@charset "UTF-8";

/* ================================

  @ 共通CSS
  --------------------------------
  <!>編集禁止です<!>
  
================================== */
:where(:not(iframe, canvas, img, svg, video):not(svg*)) {
   all: unset;
   display: revert
}

*,
::after,
::before {
   box-sizing: border-box
}

ol,
ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

img {
   max-width: 100%
}

table {
   border-collapse: collapse
}

textarea {
   white-space: revert
}

*,
*::before,
*::after {
   box-sizing: border-box
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
   margin: 0
}

ul[role="list"],
ol[role="list"] {
   list-style: none
}

html:focus-within {
   scroll-behavior: smooth
}

body {
   min-height: 100vh;
   text-rendering: optimizeSpeed;
   line-height: 1.5
}

a:not([class]) {
   text-decoration-skip-ink: auto
}

img,
picture {
   max-width: 100%;
   display: block
}

input,
button,
textarea,
select {
   font: inherit
}

@media(prefers-reduced-motion:reduce) {
   html:focus-within {
      scroll-behavior: auto
   }

   *,
   *::before,
   *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important
   }
}

a[href*="tel"],
button[href*="tel"] {
   pointer-events: inherit;
}

/* -----------------------------
  共通
---------------------------------*/

:root {
   --head-padding: 12px;
   --head-sml-txt: 12px;
   --head-color: #0070b3;
   --transtion: all 0.2s;
   --transtion-slow: all 0.4s;
   --shadow: rgb(0 0 0 / 10%) 0px 0px 5px 0px, rgb(0 0 0 / 10%) 0px 0px 1px 0px;
}

/* displaySwitch */
.pcOnly {
   display: block;
}

.spOnly {
   display: none;
}

[class*=dep_] {
   display: none;
}

@media (max-width: 768px) {
   .pcOnly {
      display: none;
   }

   .spOnly {
      display: block;
   }
}

/* -----------------------------
  パンくず 
---------------------------------*/
.pankuzu {
   min-height: 20px;
   background: #eee;
   color: #666;
   font-size: 12px;
}

.pankuzu ul {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   padding: 4px 0;
}

.pankuzu ul li {
   display: flex;
   align-items: center;
}

.pankuzu ul li::after {
   content: ">";
   margin: 0 .2rem;
}

.pankuzu ul li:last-of-type::after {
   content: "";
}

@media (max-width: 599px) {
   .pankuzu {
      overflow-x: scroll;
   }

   .pankuzu ul {
      font-size: 10px;
      width: 800px;
      margin: 0 15px;
   }
}

/* -----------------------------
  オーバーレイ 
---------------------------------*/
#ovl {
   height: 100vh;
   background: rgba(0, 0, 0, 0.8);
   position: fixed;
   top: 0;
   left: 0;
   z-index: 41;
   width: 100%;
}

.head__h1 {
    background: #eee;
    font-size: 10px;
    padding:4px 8px;
}
.head__h1>h1 {
    max-width: 100%;
    width: 1200px;
    margin: 0 auto;
}

/* -----------------------------
  @ Header 
---------------------------------*/

.commonHead__wrap.show\@sp {
   display: none;
}

.commonHead__wrap.show\@pc {
   width: 100%;
   display: flex;
   align-items: center;
   max-width: 1200px;
   margin: 0 auto;
   padding: var(--head-padding) 0;
}

/* Logo */
.commonHead__logo {
   display: block;
   width: 420px;
   padding-left: var(--head-padding);
}

.commonHead__logo img {
   width: 250px;
}

.comonHead__box {
   width: 650px;
}

.comonHead__box .commonMenu__list_other {
   display: flex;
   font-size: 12px;
}

.commonMenu__head {
   padding: 0 0 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #ffffff73;
}

.comonHead__box .commonMenu__head {
   font-weight: normal;
   padding: var(--head-padding);
   color: #333;
   border-bottom: none;
   padding: 0 0 10px;
   margin-right: 10px;
}

.comonHead__box .commonMenu__head i:nth-of-type(2) {
   margin-left: 10px;
   font-size: 10px;
   transition: var(--transtion-slow);
   opacity: .7;
}

.commonMenu__time dl {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
}

.commonMenu__time dt {
   background: #bddfef;
   padding: 10px;
   font-size: 14px;
   width: 100px;
   text-align: center;
}

.commonMenu__time dd {
   width: calc(100% - 100px - 10px);
   font-size: 14px;
}

.commonHead__my--btn {
   background: var(--head-color);
   color: #fff;
   border-radius: 20px;
   box-shadow: var(--shadow);
   cursor: pointer;
   text-align: center;
   font-size: 14px;
   padding: 6px 0;
   margin-bottom: 10px;
}

.commonHead__my--btn i {
   background: #fff;
   color: var(--head-color);
   padding: 5px 7px;
   border-radius: 40px;
   margin-right: 5px;
}

.comonHead__box+.comonHead__box {
   width: 150px;
}

.commonHead__Menu {
   width: 100%;
   cursor: pointer;
   padding: 5px;
   background: #fff;
   border: 1px solid #333;
   border-radius: 5px;
   height: inherit;
   color: #333;
   font-size: 14px;
   position: relative;
   transition: var(--transtion);
}

.commonMenu.on {
   opacity: 1;
   pointer-events: inherit;
}

.commonMenu {
   z-index: 42;
   transition: var(--transtion);
   font-size: 14px;
   height: 100%;
   background-size: 100% auto;
   width: 100%;
   opacity: 0;
   pointer-events: none;
   overflow-y: inherit;
   position: absolute;
   background: transparent;
   max-width: 1200px;
   margin: 0 auto;
   left: 50%;
   transform: translateX(-50%);
}

.commonMenu__list {
   background: var(--head-color);
   display: flex;
   position: relative;
}

.commonMenu__content {
   display: none;
   padding: var(--head-padding);
   background: #fff;
}

.commonMenu__content.on {
   display: flex !important;
   position: absolute;
   top: 50px;
   width: 100%;
}

.commonMenu__wrap {
   width: 300px;
   margin: 0 20px 0 0 !important;
}

.commonMenu__area {
   background: #d0e2ec;
   padding: 6px;
   font-weight: bold;
}

.commonMenu__box a {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 6px;
   align-items: center;
   border-bottom: 1px solid #d0e2ec;
}

.commonMenu__box a:last-of-type {
   border: none;
}

.commonMenu__box a i {
   font-size: 10px;
}

.commonMenu__list_other {
   display: none;
}

.commonHead__myBox {
   transition: var(--transtion);
   z-index: 16;
   opacity: 0;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   width: 200px;
   background: var(--head-color);
   background: -webkit-linear-gradient(to top, var(--head-color), #0d65a4);
   background: linear-gradient(to top, var(--head-color), #0d65a4);
   padding: 20px;
   position: absolute;
   top: 58px;
   left: 0;
   pointer-events: none;
}

.commonHead__myBox.on {
   opacity: 1;
   pointer-events: inherit;
}

.commonHead__myBox a {
   font-size: 12px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   padding: var(--head-padding);
   border-radius: 40px;
   text-align: center;
   box-shadow: var(--shadow);
   font-weight: bold;
}

.commonHead__myBox a:nth-of-type(1) {
   margin-bottom: 10px;
}

.myBox__close {
   text-align: center;
   width: 100%;
   margin-top: var(--head-padding);
   background: #333333a1;
   color: #fff;
   border-radius: 10px;
   padding: 5px 0px;
   font-size: 14px;
   cursor: pointer;
}

.commonHead__menuBtn+.commonHead__menuBtn {
   display: none;
}

.comonHead__box .commonMenu__head i:nth-of-type(1) {
   opacity: 1;
   color: #0070b3;
   margin-right: 5px;
}

.commonHead__menuBtn {
   text-align: center;
   font-size: 16px;
}

.commonMenu__list .commonMenu__head {
   background: #bddfef;
   cursor: pointer;
   width: calc(100% / 4);
   height: 50px;
   padding: 0;
   justify-content: center;
   font-size: 16px;
   font-weight: bold;
}

.commonMenu__list .commonMenu__head.on {
   background: var(--head-color);
   color: #fff;
}

.commonHead__Menu.on .commonHead__menuBtn {
   display: none;
}

.commonMenu__list .commonMenu__head i {
   display: none;
}

.commonHead__Menu.on .commonHead__menuBtn+.commonHead__menuBtn {
   display: block;
}

.commonHead__Menu.on {
   z-index: 42;
   border-color: #fff;
   font-weight: bold;
}

@media (max-width: 768px) {
   .commonHead__wrap.show\@pc {
      display: none;
   }

   .commonHead__wrap.show\@sp {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   .comonHead__box {
      display: none;
   }

   .commonHead__logo {
      width: 200px;
   }

   .commonHead__Menu {
      font-size: 20px;
      position: relative;
      height: 50px;
      width: 50px;
      background: #333;
      transition: var(--transtion);
      color: #fff;
      border-radius: 0;
   }

   .commonHead__Menu.off .fa-times {
      opacity: 0;
   }

   .commonHead__Menu.off .fa-bars {
      opacity: 1;
   }

   .commonHead__Menu.on .fa-bars {
      opacity: 0;
   }

   .commonHead__Menu.on .fa-times {
      opacity: 1;
   }

   .commonHead__Menu.on {
      border: none;
   }

   .commonHead__Menu i {
      transition: var(--transtion);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
   }

   .commonHead__my--btn {
      font-size: var(--head-sml-txt);
      color: #fff;
      padding: 2px 10px;
      border-radius: 20px;
      box-shadow: var(--shadow);
      margin-bottom: 0;
   }

   .commonHead__my--btn i {
      background: inherit;
      color: #fff;
      padding: 5px 7px;
      border-radius: 0;
      margin-right: 0;
   }

   .commonMenu {
      z-index: 42;
      overflow-y: scroll;
      transition: var(--transtion);
      font-size: 14px;
      background: #259fd2;
      height: 100%;
      background-size: 100% auto;
      position: fixed;
      width: 100%;
      opacity: 0;
      pointer-events: none;
   }

   .commonMenu__list {
      display: block;
   }

   .commonMenu__list .commonMenu__head {
      background: transparent;
      width: 100%;
      font-weight: bold;
      padding: var(--head-padding);
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ffffff73;
   }

   .commonMenu__list_other {
      display: block;
      background: #259fd2;
   }

   .commonMenu__head {
      font-weight: bold;
      padding: var(--head-padding);
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ffffff73;
   }

   .commonMenu__list .commonMenu__head i {
      display: block;
   }

   .commonMenu__wrap {
      width: 100%;
      margin: 0;
   }

   .commonMenu__time {
      margin: 20px 10px 100px;
   }

   .commonMenu__time dd {
      color: #fff;
   }

   .commonHead__myBox {
      opacity: 0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
      padding: 20px;
      position: absolute;
      top: 67px;
      pointer-events: none;
   }

}


/* -----------------------------
  Footer
---------------------------------*/

.footerMain {
   background-color: #f5f5f5;
   padding: 40px 0;
}

.footerMain .box:not(:last-of-type) {
   margin-bottom: 20px;
}

.footerMain .box .p3 {
   font-weight: bold;
   padding: 0 0 10px 5px;
   margin-bottom: 10px;
}

.footerMain .domestic .p3 {
   color: #3a77c7;
   border-bottom: 1px solid #3a77c7;
}

.footerMain .oversea .p3 {
   color: #2896c7;
   border-bottom: 1px solid #2896c7;
}

.footerMain .item:not(:last-of-type) {
   margin-bottom: 20px;
}

.footerMain .item .p4 {
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 10px;
   padding-left: 5px;
}

.footerMain .item ul {
   padding-left: 10px;
}

.footerMain .item li {
   margin: 0 20px 10px 0;
}

.footerMain .item li a {
   font-size: 14px;
   padding-left: 10px;
   position: relative;
}

.footerMain .item li a:after {
   display: block;
   content: "\f054";
   font-size: 10px;
   font-family: "font awesome 5 free";
   font-weight: bold;
   position: absolute;
   top: 50%;
   left: 0;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}

.footerSiteMap {
   background: #2896c7;
   padding: 40px 0;
}

.footerSiteMap .logo {
   width: 180px;
}

.footerSiteMap .box {
   width: calc(100% - 250px);
}

.footerSiteMap .box li {
   margin: 0 20px 10px 0;
}

.footerSiteMap .box li a {
   color: #fff;
   font-size: 12px;
   padding-left: 10px;
   position: relative;
}

.footerSiteMap .box li a:after {
   display: block;
   content: "\f054";
   font-size: 10px;
   font-family: "font awesome 5 free";
   font-weight: bold;
   position: absolute;
   top: 50%;
   left: 0;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
}

.footerSiteMap .copy {
   color: #fff;
   font-size: 12px;
   margin-top: 20px;
   text-align: center;
}

@media (max-width: 1024px) {
   .footerSiteMap .logo {
      width: 180px;
   }

   .footerSiteMap .box {
      width: calc(100% - 170px);
   }
}

@media (max-width: 768px) {
   #footer .footerMain .spButton {
      font-size: 13px;
      text-align: center;
      font-weight: bold;
      padding-right: 1em;
      position: relative;
   }

   .footerSiteMap .logo {
      width: 180px;
   }

   .footerSiteMap .box {
      width: 100%;
      margin-top: 20px;
   }

   .ac-content {
      display: none;
   }

   .footerMain .icon-wrap {
      position: absolute;
      left: calc(50% + 5em);
      top: 50%;
      transform: translatey(-50%);
      width: 23px;
      height: 23px;
      background: none;
   }

   .footerMain .icon {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 100%;
   }

   .footerMain .icon:before,
   .footerMain .icon:after {
      position: absolute;
      content: "";
      display: block;
      transition: all 0.4s;
      background: #000;
      left: 50%;
      top: 50%;
      width: 50%;
      height: 2px;
      transform: translate(-50%, -50%);
   }

   .footerMain .icon:before {
      transform: translate(-50%, -50%) rotate(90deg);
   }

   .footerMain .icon.ac-open:before {
      transform: translate(-50%, -50%) rotate(0deg);
   }
}
