@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: "M PLUS Rounded 1c", sans-serif;}
.scroll { overflow-y:scroll; }
.mt1 { margin-top: 1em; }
.mb1 { margin-bottom: 1em; }

/* common------------------------*/
:root {
  /* 使用色 */
  --text-color:#000000;
  --color-base:#0068b7; /*ベースカラー*/
  --color-sub:#1bc0eb; /*アクセント*/

  --color-orn:#fc9b02;
  --color-l-orn:#f5d44f;
  --color-yel:#fdd000;
  --color-crm:#fbf9dc; /*背景色など*/
  --color-gry:#999; /*装飾用の英字など*/
  --color-l-gry:#eee;
  --color-d-gry:#707070;
  --color-red:#e4351d;
  --color-wht:#fff;
  --color-l-blu:#dff9f3;
  --color-grn:#5ed3d0;
  --color-l-grn:#8fc31f;

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

  /* ボックスシャドウ */
  --shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.1);

  /* font */
  --font-round: 'M PLUS Rounded 1c', sans-serif;
  --font-number: "Oswald", sans-serif;
}
/* 親要素を越えて画面端まで背景を敷く */
.over-bg{ border-image:linear-gradient( var(--color-base),var(--color-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, #fce5ac, #fce5ac 2px, #fbeece 2px, #fbeece 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: clamp(30px,10vw,60px);
}

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

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



/* tel */

/* title */
/* 背景にロゴマーク
.ttl-def {
  padding-bottom: 1em; font-size: clamp(18px,3vw,34px); color: var(--color-grn); font-weight: 700; text-align: center;
  span {
    position: relative;
    &::before {
      content: ''; z-index: -1; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 2em; aspect-ratio: 1; background-color: var(--color-l-gry); mask: url(../img/common/logomark.svg) no-repeat center / contain;
    }
  }
} */
/* .ttl-defにサブタイトルが付くとき */
.ttl-def-2line {
  z-index: 1; display: flex; flex-direction: column-reverse; padding-bottom: .7em; font-size: clamp(18px,3vw,34px); color: var(--color-grn); font-weight: 700; text-align: center; line-height: 1.5; position: relative;
  &::before {
    content: ''; z-index: -1; position: absolute; top: 35%; left: 50%; translate: -50% -50%; width: 2.2em; aspect-ratio: 1; background-color: var(--color-l-gry); mask: url(../img/common/logomark.svg) no-repeat center / contain;
  }
  .sub {
    margin-block: 0 -.3em; font-size: .56em; font-weight:500;
  }
}

/* 左にロゴマーク */
.ttl-left-logomark {
  padding-left: 1.4em; font-size: clamp(20px,3vw,36px); color: var(--color-base); font-weight: 700; position: relative;
  &::before {
    content: ''; position: absolute; top: 50%; left: 0; translate: 0 -50%; width: .9em; aspect-ratio: 1; background: url(../img/common/logomark.svg) no-repeat center / contain;
  }
}

/* 小さいアイコン付き（TOP営業カレンダー・小見出し） */
.ttl-s-icon {
  padding: .5em 1.5em; font-size: 1.25em; color: var(--color-wht); font-weight: 700; background-color: var(--color-base); position: relative;
}

/* アイコンと英字（TOPメーカーで選ぶ等に使用） */
.ttl-icon-en {
  display: flex; flex-direction: column-reverse; margin-bottom: .5em; padding-left: 3.5em; padding-bottom: .5em; font-size: clamp(17px,3vw,34px); line-height: 1.5; border-bottom: 2px solid var(--color-base); position: relative;
  &::before {
    content: ''; position: absolute; top: 45%; left: .5em; translate: 0 -50%; width: 2.4em; aspect-ratio: 1; background-color: var(--color-sub); mask-repeat: no-repeat; mask-position: center; mask-size: contain;
  }
  &::after { content: ''; position: absolute; bottom: .1em; left: 0; width: 100%; height: 1px; background-color: var(--color-base);}
  &.search {
    &::before { mask-image: url(../img/common/ico_search2.svg);}
  }
  &.ranking {
    &::before { mask-image: url(../img/common/ico_crown.svg);}
  }
  .ttl {
    color: var(--color-sub);
  }
  .font-en {
    margin-block: 0 -.2em; font-size: .76em; color: var(--color-gry);
  }
  &.col {/*アイコン・タイトル・英字が横並び（TOPブログに使用）*/
    flex-direction: row; align-items: baseline; gap: .5em; padding-block: .7em 0; background-color: var(--color-base);
    &::before { top: 62%; left: 1em; width: 2em; background-color: var(--color-wht); mask-image: url(../img/common/ico_book.svg);}
    .ttl { color: var(--color-wht);}
    .font-en { color: var(--color-wht);}
  }
}

/* 太字中央揃えの下に小さい横棒の装飾 */
.ttl-u-line {
  margin-bottom: 1em; padding-bottom: .8em; font-size: clamp(17px,3vw,34px); color: var(--color-grn); font-weight: 700; text-align: center; position: relative;
  &::before {
    content: ''; position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: 1em; height: 4px;
    background-size: auto auto; background-color: #239212;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 2px,var(--color-grn) 2px,var(--color-grn) 4px );
  }
}

/* 左に縦棒（小見出し） */
.ttl-l-line {
  padding-left: .7em; color: var(--color-sub); font-weight: 700; position: relative;
  &::before {
    content: ''; position: absolute; top: .35em; left: .1em; width: 2px; height: 1.2em; background-color: var(--color-sub);
  }
}

.ttl-bg {
  padding: .5em 1em; font-size: 1.12em; color: var(--color-sub); font-weight: 700; border-bottom: 2px solid var(--color-sub);
}

/* 左右に横線 */
.ttl-w-border {
  span {
    position: relative;
    &::before,&::after {
      content: ''; position: absolute; top: 50%; translate: 0 -50%; width: 1em; height: 1px; background-color: var(--color-base);
    }
    &::before { left: -1.3em;}
    &::after { right: -1.3em;}
  }
}


/* 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 {
    > :where(th,td) { display: block; padding: .5em 1.5em;}
    th { white-space: nowrap; background-color: var(--color-orn); color: var(--color-wht);}
    td { width: 100%; padding-inline: .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; color: var(--color-wht); background: var(--color-sub); border: 1px solid transparent; border-radius: 4em; position: relative;
  span {
    padding-bottom: 2px; position: relative;
    &::before,&::after { content: ''; position: absolute; top: 50%; translate: 0 -50%; background-color: var(--color-wht); 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(--color-sub); background-color: var(--color-wht) !important; border-color: currentColor;
  }
  &.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-sub); }
    }
  }
}
.btn-arrow { padding-right: 3em;
  span::after{
    right: -1.3em; width: .5em; aspect-ratio: 1;
    background-color: var(--color-wht); clip-path: var(--arrow);
  }
  &.circle {
    span{
      padding-left: unset;
      &::before {
        left: unset; right: -2.4em; width: 1.5em; aspect-ratio: 1; border: 1px solid transparent; border-radius: 4em; background-color: var(--color-wht); mask: unset;
      }
      &::after { right: -2em; background-color: var(--color-sub);}
    }
    &:hover,&:focus {
      span::before { border-color: currentColor;}
    }
  }
  &:hover,&:focus {
    span::after { background-color: currentColor; }
  }
}

/* 複数バナーリンク */
.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: .2em; align-items: center;
  .inner {width: 99%;}
  .sitename {
    .logo { max-width: 246px; margin-top: 12px;}
    a:hover { color: var(--color-base);}
  }
  .header-wrap {
    .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; margin-right: .2em;}
.h_reserve_btn a {display: block; background:var(--color-orn); border-radius: 50%; width: 57px; height: 57px; position: relative; color: var(--color-wht);}
.h_reserve_btn a::before {content: ""; display: block; width: 1.6em; height: 1.3em; mask: url(/common/images/header/icon-contact.svg) no-repeat; mask-size: 100%; background: var(--color-wht); position: absolute; top:.9em; left: 0; right: 0; margin: auto;}
.h_reserve_btn span {display: block;width: 100%;font-size: .75em;position: absolute;bottom: .8em;text-align: center;}

/* 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-base); 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) 70px;
  .sns li {padding: .3em; width: 80px;}
  .footer_logo {
    margin: 0 auto;
    max-width: 400px;
    margin-block: 2em;
    text-align: center;
    
    
    .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 {
    columns: 2;
    font-size: .875em;
    background-color: #eee;
    padding: 2em 0;
    line-height: 2;
    margin-bottom: 1.5em;
    /* li:has(a[href="/reserve/"]) {margin-top: 2em;} */
    text-align: center;
    font-weight: 500;
  }
}

.flo-nav {
  position:fixed; right:0; left:0; bottom:0; z-index:200; display:flex; align-items: center;
  li.tel { flex:1; }
  li { width:20%;
    a {
      display:block;
      padding: 2.4em .2em .8em;
      font-size:.875em;
      color: var(--color-wht);
      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;}
        }
      }
    .tel a {background-color: var(--color-base);
      .small {padding-top: 1.4em;position: relative;font-weight: 500;}
            }
    .pagetop a {background-color: var(--color-d-gry);}
    .stock a {background-color: var(--color-grn);}
    .contact a {background-color: var(--color-sub);}

    a::after { content: ''; display: block; position: absolute; top: .5em; left: 50%; translate: -50% 0; width: 1.5em; height: 2em;}
        }
    .pagetop a::after{
            background: url(/common/images/header/icon-f-arrow.svg) no-repeat 100% / 100%;
          }
    .stock a::after{
            background: url(/common/images/header/icon-f-search.svg) no-repeat 100% / 100%;
          }
    .contact a::after{
            background: url(/common/images/header/icon-f-mail.svg) no-repeat 100% / 100%;
          }
    .tel a::after{
            mask: url(/common/images/header/ico_tel.svg) no-repeat; mask-size: 100%; background-color: var(--color-wht); width: 1em; height: 1.5em; top: .7em;
          }

/*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; font-size:14px; font-weight:500;}
  .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:12px; text-align:center; font-weight:500;}


/*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; }
  [class*="over-bg"] {
    padding-block: 2em;
  }


	.sp_only { display:none; }
	.sp_none{display:block;}

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

  /* table */
  .tbl {
    tr {
      &:not(:last-child) {
        td { border-bottom: 1px dashed var(--color-gry);}
      }
      > :where(th,td) { display: table-cell;}
    }
  }

  /* 複数バナーリンク */
  .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;}
      }
    }
  }

  /* header ------------------------*/
  #header {
    align-items: flex-end; gap: .5em; padding-bottom: unset;
    .inner {max-width: 1200px;}
    .sitename {
      flex: 1;
      .logo { max-width: 300px;}
      .lead { margin: 0 0 .3em; font-size: 14px; font-weight:bold; color: var(--text-color);}
    }
    .header-wrap {
      .info {
        display: block; line-height: 1.5; font-weight: 700; margin: .5em 1em;
        .tel_num a {position: relative; vertical-align: middle; font-family: var(--font-number); font-size: 2.5em; font-weight: 700; color: var(--color-orn); padding-left: 22px; line-height: 1.2;}
        .tel_num a::before {content: ""; display: block; width: 22px; height: 32px; mask-image: url(/common/images/header/ico_tel.svg); mask-size: 100%; mask-repeat: no-repeat; background: var(--color-orn); position: absolute; top: 15px; left: 0;}
        .small {font-size: 12px; font-weight:bold;}
      }
      .btn-wrap {
        a.btn-icon { max-width: unset; font-size: 1.15em;}
      }
    }
  }
  .h_reserve_btn {margin-top: 1em;}
  .h_reserve_btn a {width: 80px; height: 80px; border-radius: 50%; background: var(--color-sub); padding: unset; color: var(--color-wht);}
  .h_reserve_btn a::before {width: 1.8em; height: 1.3em; top: 1.2em; left: 0; right: 0; margin: auto; background: var(--color-wht);}
  .h_reserve_btn a span {display: block; text-align: center; width: 100%; line-height: 1; font-size: 13px; position: absolute; bottom: 1.5em; left: 0;}

  /* gnav ------------------------*/
  #gnav {
    z-index: 1; position: relative; visibility: visible; opacity: 1; translate: 0 0; width: 100%; padding-block: 0; margin: 0;
    border-image:linear-gradient( var(--color-base),var(--color-base) ) fill 0 /1/ 0 100vw; font-weight: 600;
    .nav-list {
      flex-direction: row;
      > li {
        flex-grow: 1; text-align: center; border-radius: unset; border: none;
        &:nth-child(n+2) { margin-top: unset; border-left: 1px solid var(--color-yel);}
        &.nav-list-top > a::before { mask-image: url(/common/images/header/icon-top.svg); width: 1.5em; height: 1.3em;}
        &.nav-list-stock > a::before { mask-image: url(/common/images/header/icon-stock.svg); width: 1.6em; height: 1.6em;}
        &.nav-list-guide > a::before { mask-image: url(/common/images/header/icon-about.svg); width: 2.2em; height: 1.2em;}
        &.nav-list-mainte > a::before { mask-image: url(/common/images/header/icon-mainte.svg); }
        &.nav-list-purchase > a::before { mask-image: url(/common/images/header/icon-assessment.svg);}
        &.nav-list-shop > a::before { mask-image: url(/common/images/header/icon-shop.svg); width: 1.5em; height: 1.5em;}
        &.nav-list-company > a::before { mask-image: url(/common/images/header/icon-company.svg);}
        > a {
          display: inline-block;
          width: 100%;
          height: 100%;
          padding: 2.3em 2em .5em;
          font-size: 1em;
          color: var(--color-wht);
          position: relative;
          
          
          
          
          
          
          &::before {
            content: ''; position: absolute; bottom: 2.2em; left: 50%; translate: -50% 0; width: 1.8em; height: 1.8em; mask-repeat: no-repeat; mask-position: center; mask-size: contain; background: var(--color-yel);
          }
        }
      }
      li.sub-list-parent {
        position: relative;
        &.is-open { padding-block: unset; border-radius: unset;}
        .sub-list {
          position: absolute; top: 5em; width: 100%; padding-inline: .5em 0; background-color: var(--color-l-orn); font-size: .9em;
          li {
            font-size: .9em;
            &:nth-child(n+2) { border-top: 1px dashed var(--color-base);}
            &:not(:last-child) {border-bottom: unset;}
          }
          a {
            display: block;
            padding-block: .5em;
            font-size: 1em;
            color: var(--text-color);
            padding: 12px 0;
          }
        }
      }
      .tgl-btn { display: none;}
    }
  }
  .menu-button  { display:none; }

  /* footer ------------------------*/
  #footer {
    padding-bottom: unset; 
    .f-nav {
      columns: 3; font-size: .875em;
      ul {max-width: 1000px; text-align:center; font-size:14px;font-weight:500;}
    }
  }
  .footer_logo {text-align: center;}
  .flo-nav {
    z-index:999; position:fixed; display: block; right:-5px; left: unset; bottom:80px;
    .stock a {padding: 3em .2em .8em;}
    li {
      position:relative; width:100px; font-size:.8rem; 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: 15px;}
        &[href="/stock/"] {
          padding-block: 2em 3em;
        }
        &[href="/reserve/"] {
          padding-block: 2em 1em;
        }
        &[href="#top"] {
          padding-block: 2em 1em;
        }
      }
      a::after {top: 1em; width: 2em; height: 2em;}
    }
  }
}

/* 960以上(PC) */
@media screen and (min-width: 960px) {


}


/* ================================================================
  タブレット
=================================================================== */
@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%; }

  .sp_none{display:none;}

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

  /* gnav ------------------------*/
  #gnav {
    position: fixed; visibility: hidden; opacity: 0; translate: 0 -180%; transition: .4s; background-color: var(--color-base);
    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-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 ------------------------*/

  /* tel */

  /* title */

  /* button */


}




.flex { display:-webkit-box; display:flex; flex-wrap:wrap; }
.flex-between { -webkit-box-pack:justify; justify-content:space-between; }
.flex-center  { -webkit-box-pack:center; justify-content:center; }
.flex-end  { -webkit-box-pack:end; justify-content:flex-end; }
.flex-align-center { -webkit-box-align:center; align-items:center; }