/*

  全体レイアウト

================================================================
*/
#wrapper {
  overflow: hidden;
  position: relative;
  max-width: 2000px;
  min-width: 1100px;
  margin: 0 auto;}
#wrapper.noflow {
  overflow: visible;}
.inner {
  position: relative;
  width: 1000px;
  height: 100%;
  margin: 0 auto;}
#container {
  position: relative;
  margin-top: 100px;}
.pcn {
  display: none;}
.spn {
  display: inline-block;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
#wrapper {
  max-width: 100%;
  min-width: 100%;}
.inner {
  width: 100%;}
#container {
  margin-top: 0;}
.pcn {
  display: inline-block;}
.spn {
  display: none;}}

/*

  ヘッダー構成

================================================================
*/
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1100px;
  height: 100px;
  background-color: rgba(255, 255, 255, .5);
  backdrop-filter: blur(5px);
  z-index: 5;}
#header .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;}
#header .flex .left {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 140px;}
#header .flex .left .logo {
  position: absolute;
  top: 20px;
  left: 0;
  border: solid #00457E;
  border-width: 1px;
  z-index: 3;}
#header .flex .left img {
  width: 110px;
  height: auto;}
#header .flex .left .seotext,
#header .flex .left h1 {
  width: 100%;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.4;}
#header .flex .right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 10px;}
#header .flex .right .tl {
  margin-bottom: 10px;}
#header .flex .right .tl ul {
  display: flex;
  height: 40px;}
#header .flex .right .tl ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 100%;
  color: #fff;}
#header .flex .right .tl ul li.tel {
  margin-right: 30px;}
#header .flex .right .tl ul li.tel a {
  pointer-events: none;
  width: auto;
  background: url(../img/common/itel.png) no-repeat left center / auto 80%;
  color: #17191A;}
#header .flex .right .tl ul li.tel a span {
  display: inline-flex;
  flex-direction: column;
  padding-left: 45px;}
#header .flex .right .tl ul li.tel a span em {
  font-family: mos;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;}
#header .flex .right .tl ul li.line a {
  border-radius: 3px;
  background-color: #198059;}
#header .flex .right .tl ul li.web a {
  border-radius: 0 3px 3px 0;
  background-color: #00457E;}
#header .flex .right .bl ul {
  white-space: nowrap;
  display: flex;
  font-size: 14px;}
#header .flex .right .bl ul li + li {
  border-left: 1px solid #DBDBDB;}
#header .flex .right .bl ul li a {
  display: block;
  padding: 2px 15px;}
#header .flex .right .bl .moni {
  display: none;}
#breadcrumbs{
  color: #666;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;}
#breadcrumbs a{
  color: #00457E;}
#breadcrumbs span + span::before {
  content: "＞";
  font-size: 8px;
  margin: 0 8px;
  vertical-align:middle;
  position: relative;
  top: -2px;
  color: #666;}
.breadcrumbs_sp{
  display: none;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
#header {
  min-width: 100%;
  height: 16vw;
  backdrop-filter: blur(1vw);
  transition: .2s;}
#header.active {
  background-color: #fff;}
#header .flex {
  padding: 0 3vw;}
#header .flex .left {
  padding-left: 17vw;}
#header .flex .left .logo {
  top: 3vw;}
#header .flex .left img {
  width: 100%;
  height: auto;}
#header .flex .left h1 {
  display: none;}
#header .flex .right {
  margin-left: 0;}
#header .flex .right .tl {
  display: flex;
  margin-bottom: 0;}
#header .flex .right .tl ul {
  height: 10vw;}
#header .flex .right .tl ul li a {
  width: 30vw;
  font-size: 3.2vw;}
#header .flex .right .tl ul li.tel {
  display: none;}
#header .flex .right .tl ul li.line a {
  border-radius: 1vw;}
#header .flex .right .tl ul li.web a {
  border-radius: 0 1vw 1vw 0;}
#header .flex .right .bl {
  position: fixed;
  top: 16vw;
  left: 0;
  display: none;
  padding: 7vw 5vw 5vw;
  border-top: 1px solid #ccc;
  background-color: #fff;
  z-index: 2;}
#header .flex .right .bl ul {
  white-space: wrap;
  flex-wrap: wrap;
  font-size: 3.4vw;}
#header .flex .right .bl ul li {
  width: calc(100%/3);
  border-bottom: 1px solid #ccc;}
#header .flex .right .bl ul li + li {
  border-left: none;}
#header .flex .right .bl ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 10vw;
  padding: 0;}
#header .flex .right .bl .moni {
  display: block;
  margin-top: 5vw;}
#header .flex .right .bl .moni img {
  border-radius: 2vw;}
.breadcrumbs_pc{
  display: none;}
#breadcrumbs{
  font-size: 3vw;
  margin: initial;
  padding: 3vw 5vw;
  background-color: #f7f7f7;}
#breadcrumbs span{
  display: flex;
  align-items: center;}
#breadcrumbs span + span::before{
  font-size: 1.6vw;
  top: 1px;}
.breadcrumb_last{
  padding-right: 5vw;}
.breadcrumbs_sp{
  display: block;}}

/*

  バーガーメニュー

================================================================
*/
.burger {
  display: none;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
.burger {
  display: flex;
  width: 10vw;
  height: 10vw;
  margin-left: 3vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% auto;
  background-image: url(../img/common/iclose.png);
  cursor: pointer;}
.burger.active {
  background-size: 50% auto;
  background-image: url(../img/common/iopen.png);}}

/*

  フッター構成

================================================================
*/
#footer {
  position: relative;
  padding: 60px 0;
  /*background: linear-gradient(45deg, #00457E, #00549A);*/}
#footer .tl .ml {
  display: flex;}
#footer .tl .ml + .ml {
  margin-top: 30px;}
#footer .tl .ml .left {
  width: 180px;
  border-right: 1px solid #00457E;}
#footer .tl .ml .left .title {
  padding-bottom: 12px;
  border-bottom: 1px solid #00457E;
  font-family: smm;
  font-feature-settings: normal;
  font-size: 15px;
  letter-spacing: .1em;}
#footer .tl .ml .right {
  flex: 1;
  margin-left: 30px;}
#footer .tl .ml .right > ul {
  display: flex;
  flex-wrap: wrap;}
#footer .tl .ml .right > ul li {
  width: 25%;}
#footer .tl .ml .right > ul li a {
  display: block;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.5;}
#footer .tl .ml .right > ul > li.wrap {
  width: 100%;}
#footer .tl .ml .right > ul > li.wrap.mb {
  margin-bottom: 20px;}
#footer .tl .ml .right > ul > li.wrap ul {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  border: 1px solid #EBF0F5;
  border-radius: 0 3px 3px 3px;}
#footer .tl .ml .right > ul > li.wrap ul li {
  width: auto;}
#footer .tl .ml .right > ul > li.wrap span {
  display: inline-block;
  padding: 10px;
  border-radius: 3px 3px 0 0;
  background-color: #EBF0F5;
  color: #00457E;
  font-size: 14px;}
#footer .tl .ml .right > ul > li.wrap ul li a {
  padding: 5px 10px;}
#footer .bl {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 40px;}
#footer .bl .logo img {
  width: auto;
  height: 80px;}
#footer .bl .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;}
#footer .bl .right ul {
  display: flex;}
#footer .bl .right ul li + li {
  margin-left: 20px;}
#footer .bl .right ul li a {
  font-size: 14px;}
#footer .bl .right small {
  display: inline-block;
  margin-top: 20px;
  letter-spacing: .1em;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
#footer {
  padding: 10vw 5vw;}
#footer .tl .ml {
  flex-direction: column;}
#footer .tl .ml + .ml {
  margin-top: 10vw;}
#footer .tl .ml .left {
  width: 100%;
  margin-bottom: 1vw;
  padding-bottom: 2vw;
  border-bottom: 1px solid #fff;
  border-right: none;
  font-size: 3.6vw;}
#footer .tl .ml .left .title {
  padding-bottom: 3.5vw;
  font-size: 4vw;
  text-align: center;}
#footer .tl .ml .right {
  width: 100%;
  margin-left: 0;}
#footer .tl .ml .right > ul {
  display: flex;
  flex-wrap: wrap;}
#footer .tl .ml .right > ul li {
  width: 50%;}
#footer .tl .ml .right > ul li a {
  padding: 1vw 0;
  font-size: 3.2vw;}
#footer .tl .ml .right > ul > li.wrap.mb {
  margin-top: 3vw;
  margin-bottom: 3vw;}
#footer .tl .ml .right > ul > li.wrap + .wrap {
  margin-top: 1vw;}
#footer .tl .ml .right > ul > li.wrap ul {
  padding: 2vw;
  border-radius: 0 1vw 1vw 1vw;}
#footer .tl .ml .right > ul > li.wrap span {
  padding: 2vw 2.5vw;
  border-radius: 1vw 1vw 0 0;
  font-size: 3.3vw;}
#footer .tl .ml .right > ul > li.wrap ul li a {
  padding: .8vw 2vw;}
#footer .bl {
  position: relative;
  flex-direction: column-reverse;
  align-items: flex-start;
  margin-top: 10vw;}
#footer .bl .logo img {
  width: 12vw;
  height: auto;}
#footer .bl .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;}
#footer .bl .right ul {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 5vw;}
#footer .bl .right ul li {
  width: 49%;}
#footer .bl .right ul li + li {
  margin-left: 0;}
#footer .bl .right ul li a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 8vw;
  padding-left: 1vw;
  border-bottom: 1px solid #fff;
  font-size: 3.2vw;}
#footer .bl .right small {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-top: 0;
  font-size: 2.5vw;}}