@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* base ------------------------*/
:root {
  /* 使用色 */
  --color-text:#333333;

  --color-base:#002062; /*ベースカラー*/
  --color-sub1:#0d2e72; /*ベース やや薄い*/
  --color-sub2:#ff8a00; /*アクセント 1*/
  --color-sub3:#fd740f; /*アクセント 2*/
  --color-sub4:#da000d; /*アクセント 別の色*/

  --color-satei  :#35509c;
  --color-reserve:#c40d1c;
  --color-store  :#323232;
  --color-syaken :#5f210b;

  --color-wht:#ffffff;
  --color-red:#c40d1c;
  --color-blu:#387daf;

  --color-gry0:#f9f9f9;
  --color-gry1:#f1f1f1;
  --color-gry2:#b6b5b4;
  --color-gry3:#848484;
  --color-gry4:#636262;
}

body {
  font-size:16px; color: var(--color-text); 
  font-weight:400;
  font-family:
  "Noto Sans JP", "游明朝", "Yu Mincho", YuMincho,
  "ヒラギノ明朝 ProN W6", "HiraMinProN-W6",
  "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
body a { text-decoration: none;}
#wrapper { position: relative; width: 100%; max-width: 960px; margin: 0 auto; overflow: hidden; }
.inner { position: relative; padding-inline: 3.5%; }


.ttl-sub { margin-bottom: .4em; padding-left: .6em; font-size: 1.3em; }

.mt0 { margin-top: 0; }
.mt2 { margin-top: 2em; }

/* header ------------------------*/
#header { }

/* gnav ------------------------*/
#gnav {  }

/* footer ------------------------*/
#footer { background-color: #002062; }

.f-info { display: flex; justify-content: space-between; align-items: end; padding: 1em 4em; }
.f-address { display: flex; align-items: end; gap: 1em; }
.f-address figure { width: 15%; }
.f-address > div { margin: 0; color: #fff; }
.f-address > div > h3 { margin-bottom: .3em; font-size: 1.3em; }
.f-address > div > p { margin: 0; line-height: 1.4; }
.f-hour { padding: .7em 2em; text-align: center; background-color: #fff; border-radius: 10px; }
.f-hour > p { margin: 0; color: #002062; line-height: 1.2; }
.f-hour > p a { color: #002062; }
.f-hour > p .tel { position: relative; padding-left: 1em; font-size: 1.5em; font-weight: 800; }
.f-hour > p .tel::before { position: absolute; content: ""; width: .8em; height: .8em; left: 0; top: 50%; transform: translateY(-50%); background: url(../img/ico-tel.svg) 100% / contain no-repeat; }
.f-hour > p .hour { font-size: .8em; }


.copyright { margin:0; padding:1em 0; color: #fff; font-size:.75em; text-align:center; }
.copyright a { color: #fff; }

/* common------------------------*/
/* tel */

/* title */

/* button */
.button { position:relative; z-index:2; display:inline-block; overflow:hidden; min-width:260px;
  padding:.7em 3em .6em 3em; text-align:center; }
.button.icon:before { content:""; display:inline-block; width:1.2em; height:1.2em; margin:.3em .5em 0 0; vertical-align:top; background:no-repeat center / 100%; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

}

/* 960以上(PC) */
@media screen and (min-width: 960px) {
  .menu-button  { display:none; }

}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 959px) {
  body { font-size:15px; }

  /* header ------------------------ */

  /* gnav ------------------------ */
  #gnav {  }

  /* menuボタン */
  .menu-button { position:relative; z-index:9999; float:right; background:#fff; }
  .menu-button,
  .menu-button span { display:block; transition:all .5s; -webkit-transition:all .5s; box-sizing:border-box; }
  .menu-button .h_menu { position:relative; width:30px; height:20px; margin:0 auto; }
  .menu-button span { position:absolute; left:0; width:100%; height:2px; background-color:#1e2024; }

  .menu-button span:nth-of-type(1) { top: 0; }
  .menu-button span:nth-of-type(2) { top: 9px; }
  .menu-button span:nth-of-type(3) { bottom: 0; }

  .menu-button.open span:nth-of-type(1) {
    -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
  }
  .menu-button.open span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-button.open span:nth-of-type(3) {
    -webkit-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
  }
  .menu-button .label { width:auto; height:auto; margin:0 0 5px; color:#1e2024;
    text-align:center; line-height:1; font-size:11px; }

  /* footer ------------------------ */

}


/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  body { font-size:14px; }
  .wide_inner,
  .inner, .narrow { margin: 0 15px; }


  /* header------------------------*/

  /* gnav------------------------*/

  /* footer------------------------*/
  .f-info { flex-wrap: wrap; }
  .f-address { flex-wrap: wrap; gap: .5em; margin-bottom: 1em; }
  .f-address figure { width: 25%; margin-inline: auto; }
  .f-address > div > h3 { text-align: center; }
  .f-hour { width: 100%; padding: .7em 1em; }

  /* common ------------------------*/

  /* tel */

  /* title */

  /* button */


}