@charset "utf-8";

/*================ ブレイクポイント ====================*/
/*
Extra small: 576pxまで
Small: 576px以上
Medium: 768px以上
Large: 992px以上
Extra large: 1200px以上
Extra extra large: 1400px以上
*/

.l-wrapper { max-width: 1100px; margin-inline-start: auto; margin-inline-end: auto; padding-inline-start: 15px; padding-inline-end: 15px; }
@media screen and (min-width: 1400px) {
  .l-wrapper { padding-inline-start: 0; padding-inline-end: 0; }
}

/*===================================================================================
ローディング画面（loading）
===================================================================================*/
.c-loading { position: fixed; inset: 0; z-index: 1000; width: 100%; display: flex; justify-content: center; align-items: center; background: var(--col-blue03); transition: opacity 1s ease-out; }
.c-loading img { max-width: 360px; width: 100%; }
.c-loading.is-loaded { opacity: 0; pointer-events: none; }

/*===================================================================================
ヘッダー（header）
===================================================================================*/
.l-header { padding-top: var(--space10); padding-bottom: var(--space20); }
.l-header__lead { display: none; }
.l-header__body__teltext { display: none; }
.l-header__body__telnumber { display: none; }
@media screen and (min-width: 992px) {
  .l-header__lead { display: block; margin-bottom: var(--space25); }
  .l-header__body { display: block grid; grid-template-columns: repeat(3, auto); gap: 20px; }
  .l-header__menubutton { display: none; }
  .l-header__body__teltext { display: block; padding: var(--space15); font-size: 1rem; font-weight: 600; background: var(--col-blue01); border-radius: 35px; line-height: 1.4; margin-block: var(--leading-trim); text-align: center; }
  .l-header__body__telnumber { display: block; }
}
@media screen and (max-width: 991px) {
  .l-header { position: fixed; inset: 0; z-index: 80; width: 100%; height: fit-content; background: var(--col-white01); }
  .l-header__body__headline img { max-width: 256px; width: 100%; }
  .l-header__menubutton { appearance: none; position: fixed; top: 15px; right: 15px; z-index: 100; width: 44px; height: 44px; background: var(--col-blue03); }
  .l-header__menubutton .bar { position: absolute; display: block; width: 54%; height: 2px; background: var(--col-white01); transition: 0.3s; }
  .l-header__menubutton .bar:nth-of-type(1) { top: 10px; left: 10px; }
  .l-header__menubutton .bar:nth-of-type(2) { top: 50%; left: 10px; transform: translateY(-50%); }
  .l-header__menubutton .bar:nth-of-type(3) { bottom: 10px; left: 10px; }

  .l-header__menubutton[aria-expanded="true"] .bar:nth-of-type(1) { top: 20px; transform: rotate(-42deg); }
  .l-header__menubutton[aria-expanded="true"] .bar:nth-of-type(2) { top: 20px; transform: rotate(42deg) }
  .l-header__menubutton[aria-expanded="true"] .bar:nth-of-type(3) { display: none; }
}

/*===================================================================================
グローバルメニュー（global menu）
===================================================================================*/
.p-gmenu { background: var(--col-white01); }
.p-gmenu__list .item a { position: relative; display: block; padding: var(--space20); font-size: 1rem; font-weight: 600; text-transform: uppercase; }
@media screen and (min-width: 992px) {
  .p-gmenu { position: sticky; top: 0; z-index: 80; }
  .p-gmenu__list { display: block grid; grid-template-columns: repeat(4, 1fr); }
  .p-gmenu__list .item a { text-align: center; }
  .p-gmenu__list .item a::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; opacity: 0; transition: opacity 1s; }
  @media (any-hover: hover) {
    .p-gmenu__list .item a:hover::before { opacity: 1; background: var(--col-blue01); border-radius: 8px; z-index: -10; }
  }
}
@media screen and (max-width: 991px) {
  .p-gmenu__list { position: fixed; top: 0; right: 0; z-index: 90; width: 72%; height: 100svb; padding-top: var(--space100); background: var(--col-white01); opacity: 0.9; transform: translateX(100%); transition: 1s; }
  .p-gmenu__list .item a::before { content: "\025b6"; margin-right: 5px; color: var(--col-blue01); }
  .p-gmenu__list .item a::after { content: ""; position: absolute; bottom: 0; left: 20px; width: 85%; height: 1px; background: var(--col-gray01); }

  .p-gmenu[aria-expanded="true"] .p-gmenu__list { transform: translateX(0); }
}

/*===================================================================================
フッター（footer）
===================================================================================*/
.l-footer { background: var(--col-blue01); }
.l-footer__body { display: block grid; grid-template-columns: auto; place-content: center; place-items: center; row-gap: 20px; padding-top: var(--space50); padding-bottom: var(--space50); }
.l-footer__body__logo .image { margin-bottom: 30px; }
.l-footer__body__logo .text { color: var(--col-white01); }
.l-footer__body__tel { padding: var(--space30); background: var(--col-white01); border-radius: 20px; text-align: center; }
.l-footer__body__tel .number { margin-bottom: 20px; }
.l-footer__body__tel .text br { display: block; }
.l-footer__copyright { padding: var(--space20); background: var(--col-white01); }
.l-footer__copyright .text { text-align: center; }
@media screen and (min-width: 768px) {
  .l-footer__body { grid-template-columns: repeat(2, auto); justify-content: space-between; column-gap: 5rem; }
}
@media screen and (min-width: 992px) {
  .l-footer__body__tel .text br { display: none; }
}
@media screen and (max-width: 991px) {
  .l-footer { margin-bottom: 80px; }
}

/*===================================================================================
トップへもどるボタン（top-button）
===================================================================================*/
.c-top-button { position: fixed; bottom: 100px; right: 20px; z-index: 70; opacity: 0; visibility: hidden; transition: 1s; }
.c-top-button.is-active { opacity: 1; visibility: visible; }
@media screen and (min-width: 992px) {
  .c-top-button { bottom: 20px; }
}

/*===================================================================================
ページ下部の電話番号（bottom-tel）
===================================================================================*/
.c-bottom-tel { position: fixed; bottom: 0; left: 0; z-index: 100; width: 100%; height: 80px; background: var(--col-blue03); text-align: center; }
.c-bottom-tel a img { max-width: 375px; width: 100%; }
@media screen and (min-width: 992px) {
  .c-bottom-tel { display: none; }
}

/*===================================================================================
アニメーション（animation）
===================================================================================*/
.fade-in_01 { opacity: 0; transform: translateY(50px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: 1s; }
.fade-in_01.--delay1\.5s { transition-delay: 1.5s; }
.fade-in_01.is-show { opacity: 1; transform: translateY(0); }