@charset "utf-8";

/* base ------------------------*/
#wrapper {position:relative;}
main { flex-grow: 1;}
.inner { width: 96%; max-width: 1200px; margin-inline: auto;}
.con-box {
  margin-bottom: clamp(30px,10vw,60px);
}
.font-en { font-family: "Roboto Condensed",sans-serif; font-weight: bold;}
.scroll { overflow-y:scroll; }
.mt1 { margin-top: 1em; }
.mb1 { margin-bottom: 1em; }

/* common------------------------*/
:root {
  /* 使用色 */
  --text-color:#000000;
  --color-base:#06193a; /*ベースカラー*/
  --color-sub:#1f286f; /*アクセント*/
  --color-red:#a40000;
  --color-wht:#fff;
  --color-l-gry:#eee;
  --color-d-gry:#707070;
  --color-l-red:#d80a30;

  --color-orn:#f39800;
  /*--color-l-orn:#ffba00;*/
  --color-yel:#f9ce07;
  --color-crm:#fbf9dc; /*背景色など*/
  --color-l-base:#cdecfe; /*明るいベースカラー*/
  --color-gry:#bfbfbf; /*装飾用の英字など*/
  --color-l-blu:#3eccc8;
  --color-grn:#029219;
  --color-pnk:#fd5287;

  /* 図形 */
  --arrow :polygon(0 4%, 0 96%, 80% 50%);/* ▶ */

  /* ボックスシャドウ */
  --shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.1);
  --shadow1:0px 2px 6px rgba(0, 0, 0, 0.1); /*狭い*/
  --shadow2:0px 2px 10px rgba(0, 0, 0, 0.08);  /*広め*/
  --shadow3:0px 2px 5px rgba(0, 0, 0, 0.06); /*ボーダー有り用*/

  /* font */
  --font-round: 'M PLUS Rounded 1c', sans-serif;
  --font-number: "Impact", sans-serif;
}

/* 親要素を越えて画面端まで背景を敷く */
.over-bg{ border-image:linear-gradient( var(--color-l-base),var(--color-l-base) ) fill 0 /1/ 0 100vw;}
.over-bg-crm{ border-image:linear-gradient( var(--color-crm),var(--color-crm) ) fill 0 /1/ 0 100vw;}
.over-bg-gry{ border-image:linear-gradient( var(--color-l-gry),var(--color-l-gry) ) fill 0 /1/ 0 100vw;}
.bg-y-strp {background-color: #fff; background-image: repeating-linear-gradient(-45deg, #fbfae0, #fbfae0 2px, #fcfbe8 2px, #fcfbe8 6px);}
.bg-o-strp {background-color: #fff; background-image: repeating-linear-gradient(-45deg, #fbece0, #fbece0 2px, #fcf1e8 2px, #fcf1e8 6px);}
.bg-gr-strp {background-color: #fff; background-image: repeating-linear-gradient(-45deg, #fff, #fff 2px, #f4f3f3 2px, #f4f3f3 6px);}
[class*="over-bg"] {
  padding-block: 30px;
}

.shadow { box-shadow: var(--shadow);}

/* aタグに下線 */
.underline { text-decoration: underline;}

.img_border {border: 1px solid #ccc;}

/* tel */

/* title */

.ttl {
  font-size: 1.5em; font-weight: 700; line-height: 1.5;
}

.ttl-def {
  font-weight: 700; font-size: 1.5em; display: inline-block; color: var(--color-wht);
  background: var(--color-base); padding: .6em 0; box-shadow: 5px 5px #999; margin: 0 auto 1em; position: relative; width: 98%; max-width: 1200px;
  span.en {display: inline; font-size: .65em; margin-left: 1em;}
}
.sub_ttl {text-align: center; font-size: 1.5em; font-weight: 700; color: var(--color-l-red); margin-block: 0 .5em;}
input.btn-submit { display: block; width: 94%; max-width: 500px; margin: 0 auto; background-color: var(--color-sub); border-radius: 10px; color: var(--color-wht); padding: .3em; font-size: 1.4em; text-align: center; font-weight: 700;
  &.prev { order:1; margin-top: .5em;
    color: var(--text-color); border: 1px solid; background-color: var(--color-l-gry);
  }
}

/* dl */
dl > div {
  display: flex;
  &:nth-child(n+2) { margin-top: .3em;}
}
.dtl > div {
  > * { padding: .2em .7em;}
  dt { color: var(--color-wht); font-weight: 600; background-color: var(--color-l-blu);}
}



/* table */
.tbl {
  width: 100%; max-width: 1000px; margin: 0 auto; border-collapse: separate; border-spacing: 10px;
  tr {
    th { white-space: nowrap; text-align: left; padding: .5em 0 0;}
    td { width: 100%; padding-inline: 0; border-bottom: 1px dashed var(--color-gry); padding: .5em 0;}
  }
  .req { font-size: .85em; color: var(--color-wht); background-color: var(--color-l-red); padding: .2em .4em; border-radius: 5px; margin-left: .7em;}
}


/* button */
.button { position:relative; z-index:2; display:inline-block; overflow:hidden; min-width:260px;
  padding: 1em 3em .9em; font-size: 1.3em; color: var(--color-wht); font-weight: 700; text-align:center; background-color: var(--color-base); }
.button.icon:before { content:""; display:inline-block; width:1em; height:1em; margin:.3em .5em 0 0; vertical-align:top; background:no-repeat center / 100%; }


.btn {
  display: inline-block; padding: .3em 1.7em; background: var(--color-base); border: 1px solid transparent; border-radius: 4em; position: relative; box-shadow: 5px 5px var(--color-gry);
  span {
    padding-bottom: 2px; position: relative;
    &::before,&::after { content: ''; position: absolute; top: 50%; translate: 0 -50%; background-color: var(--text-color); mask-repeat: no-repeat; mask-position: center; mask-size: contain; }
  }
  &.size-l { font-size: clamp(16px,3vw,24px); font-weight: 700; }
  &:hover,&:focus {
    color: var(--text-color); background-color: var(--color-wht) !important; border-color: currentColor;
  }
  &.base {
    background:var(--color-base); &:hover,&:focus { color:var(--color-base); }
  }
  &.orn {
    background:var(--color-orn); &:hover,&:focus { color:var(--color-orn); }
  }
  &.grn {
    background:var(--color-grn); &:hover,&:focus { color:var(--color-grn); }
  }
  &.blu {
    background:var(--color-blu); &:hover,&:focus { color:var(--color-blu); }
  }
}
.btn-icon {
  span { padding-left: 1em; }
    &[href*="contact"],&[href*="reserve"]{
    span::before{
      left: -.7em; width: 1.2em; aspect-ratio: 1;
      mask-image: url(../img/common/ico_mail.svg);
    }
    &:hover,&:focus {
      span::before { background-color: var(--color-base); }
    }
  }
}
.btn-arrow { padding-right: 3em;
  span::after{
    right: -1em; width: .5em; aspect-ratio: 1;
    background-color: currentColor; clip-path: var(--arrow);
  }
  &.circle {
    span{
      padding-left: unset;
      &::before {
        left: unset; right: -2.4em; width: 1.5em; aspect-ratio: 1; border-radius: 4em; background-color: var(--text-color); mask: unset;
      }
      &::after { right: -2em; background-color: var(--color-base); clip-path: var(--arrow);}
    }
    &:hover,&:focus {
      span::before { border-color: var(--text-color);}
    }
  }
}

/* 複数バナーリンク */
.bnr-link-list {
  flex-direction: column; gap: .5em;
  li { width: 100%;}
  &.logo {
    li {
      border: 2px solid var(--color-base); position: relative;
      a {
        display: block; padding: 1em 1em .7em;
        img { max-width: 68%;}
      }
      &::before,&::after {
        content: ''; position: absolute; top: 50%; translate: 0 -50%;
      }
      &::before {
        right: 1.2em; width: 1.9em; aspect-ratio: 1; border: 2px solid var(--color-base); border-radius: 50%;
      }
      &::after {
        right: 1.7em; width: .6em; aspect-ratio: 1; background-color: var(--color-base); clip-path: var(--arrow);
      }
      .shop-name { display: inline-block; margin-bottom: .8em; padding-left: .5em; color: var(--color-red); font-weight: 700;}
    }
  }
}



/* header ------------------------*/
#header {
  padding-block: 0; align-items: center;
  .inner {width: 100%;}
  .sitename {
    display: block; max-width: 210px;
    .logo {margin-top: 15px;}
  }
  .header-wrap {
    align-items: center;
    gap: .1em;
    .btn {max-width: 47px; padding: .2em 2em .3em ;}
    .btn-arrow::after {right: -1.2em;}
    .info { display: none; }
  }
  &.is-open {
    .menu-button span:nth-of-type(1) { top: 60%; rotate: -45deg; translate: 0 -50%; width: 100%;}
    .menu-button span:nth-of-type(2) { display: none; }
    .menu-button span:nth-of-type(3) { bottom: 35%; rotate: 45deg; width: 100%;}
    #gnav {
      position: absolute; visibility: visible; opacity: 1; z-index: 1; top: 4em; translate: 0 0;
    }
  }
}

.h_reserve_btn {display: block;}
.h_reserve_btn a {display: block; background:var(--color-base); width: 156px; padding: .3em .4em; font-size: 1.2em; height: 55px; position: relative; color: var(--color-wht); font-weight: 900;}
.h_reserve_btn span {display: block; width: 100%; color: var(--color-l-red); font-size: 1.125em;}

/* gnav ------------------------*/
  #gnav {
    .sub-list-parent{
      .sub-list {
        display: none; width: 90%; margin-inline: auto;
        li {
          &:not(:last-child) {
            border-bottom: 1px solid var(--color-base);}
          }
        a { width: 100%; font-size: 1.1em;}
      }
      .tgl-btn {
        display: inline-block; width: 3em; height: 3em; position: relative;
        &::before {
          content: ''; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: .9em; aspect-ratio: 1; background-color: var(--text-color); clip-path: polygon(4% 0, 50% 80%, 96% 0);
        }
      }
      &.is-open {
        padding-bottom: .5em; border-radius: 1.65em;
        .tgl-btn {
          &::before { transform-origin: center; rotate: 60deg;}
        }
      }
    }
  }

/* menuボタン */
.menu-button { position:relative; z-index:999; float:right; background:var(--color-sub); width: 58px; height: 58px; border-radius: 50%;}
.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:28px; height:38px; margin:0 auto; transition: all .3s;}
.menu-button span { position:absolute; left:0; width:100%; height:2px; background-color:var(--color-wht); }

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

.menu-button.open span:nth-of-type(1) {
  -webkit-transform: translateY(0) 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(0) rotate(45deg);
  transform: translateY(-9px) rotate(45deg);
}
.menu-button .label { width:auto; height:auto; margin: 0; color:var(--color-wht);
  text-align:center; line-height:1; font-size:11px; font-weight:600; }

/* footer ------------------------*/
#footer {
  padding-block: clamp(20px,4vw,30px) 50px;
  .sns li {padding: .3em; width: 80px;}
  .footer_logo {
    margin: 0 auto;
    max-width: 400px;
    margin-block: 2em;
    .logo { max-width: 300px;}
    .lead { display: inline-block; margin-block: .5em; font-size: 1.125em; color: var(--text-color); font-weight: 700;}
    p {margin-block: 0;}
  }
  .f-nav{
    background-color: var(--color-l-base); padding: 3em 0;
    columns: 2; font-size: .875em;
    line-height: 2;
    /* li:has(a[href="/reserve/"]) {margin-top: 2em;} */
  }
}

.flo-nav {
  position:fixed; right:0; left:0; bottom:0; z-index:200; display:flex; align-items: center;
  li.f_reserve_btn { flex:1; }
  li { width:20%;
    a {
      display:block; padding:1.4em .2em .8em; font-size:.875em; color: var(--text-color); font-weight: 700; text-align: center; line-height: 1;background-color: var(--color-base); position: relative;
      p {margin-block: unset; font-size:.875em; }
      .txt {padding-top: 1.4em; position: relative;}
    }
  }
  .f_reserve_btn a {
    display: block; width: 100%; background-color: var(--color-base); color: var(--color-wht); padding : .95em; font-size:1.3em; font-weight: 700;
    span {color: var(--color-l-red);}
  }
    .pagetop a {background-color: var(--color-gry);}

    a::after { content: ''; display: block; position: absolute; top: .5em; left: 50%; translate: -50% 0; width: 1.5em; height: 2em;}
        }
    .pagetop a::after{
            mask: url(../img/common/icon-f-arrow.svg) no-repeat 100% / 100%; background-color: var(--text-color);
          }
}

/*cookie policy*/
.alert-cookie {
  position:fixed; bottom:0; left:0; right:0; padding:1.3em 0; background:rgba(0,0,0,.85); z-index:998;
  .flex { row-gap: .5em; justify-content: center;}
  .msg { margin:0; color:var(--color-wht); font-size:13px; line-height:1.5; }
  a { color:var(--color-wht); }
}

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


/*cookie policy
.alert-cookie { position:fixed; bottom:0; left:0; right:0; padding:1.3em 0; background:rgba(0,0,0,.85); z-index:1000; }
.alert-cookie .msg { flex:1; margin:0; color:#fff; font-size:13px; line-height:1.5; }
.alert-cookie a { color:#e45053; }
*/

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

  /* button */
  .button { padding-block: .7em .6em;}
  .btn {
    &.size-l {
      padding-block: .7em;
    }
  }

  [class*="over-bg"] { padding-block: 60px;}

  /* table */
  .tbl { border-spacing: 0; max-width: 800px; margin-block: 1.5em;
    tr {
      > :where(th,td) { display: table-cell;}
      th { margin: 0; padding: 1em; border-bottom:1px dashed var(--color-gry);}
      td { padding-left: 1em; border-bottom: 1px dashed var(--color-gry);}
    }
  }

  /* 複数バナーリンク */
  .bnr-link-list {
    flex-direction: row; gap: 1em;
    li { width: calc((100% - 1em) / 2);}
    &.logo {
      li {
        border-width: 3px;
        a {
          padding-left: 1.5em;
          img { max-width: 75%;}
        }
        &::before { right: 1.4em; width: 2.1em;}
        &::after { right: 2em;}
      }
    }
  }

    /* img list */
  .img_list { margin:0 auto; }
  .img_list > li { width: calc((100% - .5em) / 2);}

  .img_list.col3 { margin:0 auto;}
  .img_list.col3 > li  { width: calc((100% - .5em) / 3);}


  /* header ------------------------*/
  #header {
    align-items: flex-end; gap: .5em; padding-bottom: unset;
    .inner {max-width: 1200px;}
    .sitename {
      flex: 1; max-width: 300px; padding-top: 1em;
      .logo { max-width: 300px; margin-top: 0;}
    }
    .header-wrap {
      .info {
        display: block; line-height: 1.5; font-weight: 700; margin: 0 1em;
        .tel_num a {position: relative; vertical-align: middle; font-size: 2.25em; font-weight: 700; color: var(--color-base); padding-left: 22px;}
        .tel_num a::before {content: ""; display: block; width: 20px; height: 30px; mask-image: url(../img/common/ico_tel.svg); mask-size: 100%; mask-repeat: no-repeat; background: var(--color-base); position: absolute; top: 14px; left: 0;}
        .small {font-size: .8em;}
      }
      .btn-wrap {
        a.btn-icon { max-width: unset; font-size: 1.15em;}
      }
    }
  }
  .h_reserve_btn {margin-top: 0;}
  .h_reserve_btn a {width: 180px; height: 80px; background: var(--color-base); padding: .8em .5em 0; color: var(--color-wht);}
  .h_reserve_btn a span {display: block; width: 100%; line-height: 1; font-size: .875em;}

  /* gnav ------------------------*/
  #gnav {
    z-index: 1; position: relative; visibility: visible; opacity: 1; translate: 0 0; padding-block: 0; margin: 0 1em; padding-top: 1em; font-weight: 600; width: 670px;
    .nav-list {
      flex-direction: row;
      > li {
        flex-grow: 1; font-size: .85em; text-align: center; border-radius: unset; border: none; margin-block: .5em;
        }
      }
      .tgl-btn { display: none;}
    }
  }
  .menu-button  { display:none; }

  /* footer ------------------------*/
  #footer {
    padding-bottom: unset; .f-nav { columns: 3; font-size: .875em;}
  }
  .footer_logo {text-align: center;}



/* 600以上(PC) */
@media screen and (min-width: 600px) {
 .flo-nav {
    z-index:999; position:fixed; display: block; right:-5px; left: unset; bottom:80px;
    li {
      position:relative; width:70px; font-size:.8em; line-height:130%;
      a {
        font-weight:500; border: 1px solid var(--color-wht); border-right: unset; border-radius:8px 0 0 8px;
        > p { font-size:.95em; }
        &[href="#top"] { padding-block: 2em 1em;}
      }
      a::after {top: 1em; width: 2em; height: 2em;}
    }
    .f_reserve_btn {
      padding-top: 1em; writing-mode: vertical-rl;
      a {font-size: 1.5em; font-weight: 700; vertical-align: middle; line-height: 1; padding: 1em 1.3em 1em 0; }
    }
  }
}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 1000px) {
  body { font-size:15px; }
  .inner { width: 95%; margin-inline: auto; }

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



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

}


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


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

  /* gnav ------------------------*/
  #gnav {
    position: fixed; visibility: hidden; opacity: 0; translate: 0 -180%; transition: .4s; background-color: var(--color-sub);
    padding: 1em 1.5em; margin-top: 4px; width: 100%;
    .nav-list {
      flex-direction: column; width: 100%;
      > li {
        display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end; border: 2px solid var(--text-color); border-radius: 1.65em; width: 100%; background-color: var(--color-wht);
        &:nth-child(n+2) { margin-top: 1em;}
        a { flex: 1; display: inline-block; padding: .5em 1em; font-size: 1.35em; color: var(--text-color); font-weight: 600;}
      }
    }

    .sub-list-parent{
      .sub-list {
        display: none; width: 90%; margin-inline: auto;
        li {
          &:not(:last-child) {
            border-bottom: 1px solid var(--color-base);}
          }
        a { width: 100%; padding-left: .5em; font-size: 1.1em;}
      }
      .tgl-btn {
        display: inline-block; width: 3em; height: 3em; position: relative;
        &::before {
          content: ''; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: .9em; aspect-ratio: 1; background-color: var(--text-color); clip-path: polygon(4% 0, 50% 80%, 96% 0);
        }
      }
      &.is-open {
        padding-bottom: .5em; border-radius: 1.65em;
        .tgl-btn {
          &::before { transform-origin: center; rotate: 60deg;}
        }
      }
    }
  }
  /* footer------------------------*/


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

  .tbl :where(th,td){ display:block; width:100%; }

  /* tel */

  /* title */

  /* button */


}