@charset "utf-8";

/* base ------------------------*/
#wrapper { position:relative; }
.inner { width: 96%; max-width: 1200px; margin-inline: auto; }
.con-box {
  margin-bottom: clamp(30px,4vw,60px);
}
.font-en { font-family: "Roboto Condensed",sans-serif;}
.en {font-size: .6em;}

/* common------------------------*/
:root {
  /* 使用色 */
  --text-color:#0d0d0d;
  --color-base:#0085ce; /*ベースカラー*/
  --color-sub:#fff100; /*アクセント*/

  --color-orn:#f39800;
  --color-d-orn:#eb6100;
  --color-l-orn:#ffba00;
  --color-yel:#fff100;
  --color-crm:#fbf9db; /*背景色など*/
  --color-gry:#d2c5c5; /*装飾用の英字など*/
  --color-l-gry:#e8e7e0;
  --color-red:#e60012;
  --color-wht:#fff;
  --color-blu:#0085ce;
  --color-l-blu:#92e0ee;
  --color-grn:#3eccc8;

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

  /* ボックスシャドウ */
  --shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.1);
}
/*ストライプ背景*/
.bg_gry {margin-top: 0; background-color: #fff; background-image: repeating-linear-gradient(-45deg, #fff, #fff 2px, #f4f4f4 2px, #f4f4f4 6px);}
.bg_lbl {margin-top: 0; background-color: #fff; background-image: repeating-linear-gradient(-45deg, #b6eaf4, #b6eaf4 2px, #9ee3f0 2px, #9ee3f0 6px);}

/* 親要素を越えて画面端まで背景を敷く */
.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;}
.over-bg-lblu{ border-image:linear-gradient( var(--color-l-blu),var(--color-l-blu) ) fill 0 /1/ 0 100vw;}
[class*="over-bg"] {
  padding-block: clamp(30px,3vw,60px);
}
.shadow { box-shadow: var(--shadow);}

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

/* 文字色 */
.color-yel { color: #fff100; }
.color-blu { color: var(--color-base);}

.mt0 { margin-top: 0;}
.mt1 { margin-top: 1em;}
.mt15 { margin-top: 1.5em;}

.mb0 { margin-bottom: 0;}


/* 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-block: .3em; padding-left: .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-wht); 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-base); font-size: 1.125em; font-weight: 700; position: relative;
  &::before {
    content: ''; position: absolute; top: .35em; left: .1em; width: 3px; height: 1.2em; background-color: var(--color-base);
  }
}

.ttl-bg {
  padding: .5em 1em; font-size: 1.12em; color: var(--color-sub); font-weight: 700; background-color: var(--color-l-orn);
}

/* 左右に横線 */
.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-blu);}
}

/* table */
.tbl {
  width: 100%; max-width: 900px; border-collapse: separate; border-spacing: 10px; margin: 0 auto;
  tr {
    > :where(th,td) { display: block; padding-block: .5em; font-size: .9em;}
    th { background-color: var(--color-l-gry);}
    td { 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:1.2em; height:1.2em; margin:.3em .5em 0 0; vertical-align:top; background:no-repeat center / 100%; }


.btn {
  display: inline-block; padding: .4em 3em .4em 2.5em; color: var(--color-wht); background: var(--color-d-orn); 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(17px,3vw,28px); font-weight: 700; }
  &:hover,&:focus {
    color: var(--color-d-orn); 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-d-orn); }
    }
  }
}
.btn-arrow {
  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-d-orn);}
    }
    &:hover,&:focus {
      span::before { border-color: var(--color-d-orn);}
    }
  }
  &: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-d-orn); font-weight: 700;}
    }
  }
}



/* header ------------------------*/
#header {
  align-items: center; padding-block: .3em;
  .sitename {width: 220px; position: relative; margin-top: -3em;
    a {display: block;}
  .logo { max-width: 50px; position: absolute; top: 0; left: 0;}
  .lead { display: inline-block; font-size: .75em; line-height: 1.2; color: var(--color-base); font-weight: 600; position: absolute; top: 0; left: 55px;}
  .lead span {font-size: 1.3em;}
  }

  .header-wrap {
    gap: .2em;
    .btn {max-width: 140px; padding: .2em 2em .3em ;}
    .btn-arrow::after {right: -1.2em;}
    .info { display: none;}
  }
  &.is-open {
    .menu-button span:nth-of-type(1) { top: 50%; rotate: -45deg; translate: 0 -50%; width: 90%;}
    .menu-button span:nth-of-type(2) { display: none; }
    .menu-button span:nth-of-type(3) { bottom: 45%; rotate: 45deg; width: 90%;}
    #gnav {
      position: absolute; visibility: visible; opacity: 1; z-index: 1; top: 4em; translate: 0 0;
    }
  }
}


.line_btn {display: block; align-items: center; padding-top: 5px; width: 60px; padding-right: 5px;}

/* gnav ------------------------*/
#gnav {
  position: fixed; width: 96%; visibility: hidden; opacity: 0; translate: 0 -180%; transition: .4s;
  padding-block: 1.5em 2em; border-image:linear-gradient( var(--color-wht),var(--color-wht) ) fill 0 /1/ 0 100vw;
  .nav-list {
    flex-direction: column;
    > li {
      display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end; border: 2px solid var(--color-base); border-radius: 1.65em; margin-top: 1em;
      a { flex: 1; display: inline-block; padding: .5em 1em; font-size: 1.2em; color: var(--color-base); font-weight: 600;}
    }
    &.sp_only {
      > li {
        background: var(--color-base);
        > a { color: #fff; }
        &.stock {
          background:var(--color-l-orn); border-color:var(--color-l-orn);
          span { color:var(--color-red); }
        }
        &.reserve {
          background:var(--color-red); border-color:var(--color-red);
          span { color:var(--color-yel); }
        }
      }
    }
  }

  .sub-list-parent{
    .sub-list {
      display: none;width: 90%; margin-inline: auto;
      li {
        &:not(:last-child) {
          border-bottom: 1px solid var(--color-wht);}
        }
      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(--color-base); 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:9999; float:right; background:var(--color-base); border-radius: 50%; width: 60px; height: 60px;}
.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:33px; 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: 15px; }
.menu-button span:nth-of-type(2) { top: 23px; }
.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:3px 0 0; color:var(--color-wht);
  text-align:center; line-height:1; font-size:14px; font-weight:600; }

/* footer ------------------------*/
#footer {
  padding-block: clamp(20px,4vw,30px) 22.5vw;
  .sns li {padding: .3em; width: 80px;}
  .footer_logo {
    margin: 0 auto;
    width: 350px;
    margin-block: 3em;
    .logo { max-width: 152px;}
    .lead { display: inline-block; margin-block: .5em; font-size: 1.125em; color: var(--color-base); font-weight: 700;}
    .lead span {font-size: 1.6em;}
    p {margin-block: 0;}
  }

  .shop_info_list {
    justify-content: space-around; margin-bottom: 2em;
    h3 {color: var(--color-base); font-size: 1.875em; }
  }
  
  .f-nav {
    columns: 2; font-size: .875em;
    line-height: 2;
    margin-bottom: 5em;
    /* 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 {
    a {
      display: block; padding: 1.2em .2em; 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;}
        .txt {padding-top: 1.9em; position: relative;}
        }
    }
    .tel1 a {background-color: var(--color-base);}
    .tel2 a {background-color: var(--color-grn);}
    .pagetop a {background-color: #707070;}
    .stock a {background-color: var(--color-orn);}
    .contact a {background-color: var(--color-red);}

    a::after { content: ''; display: block; position: absolute; top: .5em; left: 50%; translate: -50% 0; width: 1.5em; height: 2em;}

    .tel1 a::after,.tel2 a::after{width: 1em; background: url(../img/common/icon-f-tel.svg) no-repeat 100% / 100%;}
    .pagetop a::after{ background: url(../img/common/icon-f-arrow.svg) no-repeat 100% / 100%;}
    .stock a::after{ background: url(../img/common/icon-f-search.svg) no-repeat 100% / 100%;}
    .contact a::after{ background: url(../img/common/icon-f-mail.svg) no-repeat 100% / 100%;}
  }


.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: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); }
}



/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  #wrapper { min-width: 1000px; }
  [class*="over-bg"] { padding-block: 2em; }

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

  /* table */
  .tbl {
    tr {
      &:not(:last-child) {
        th { width: 14em;}
        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; padding-block: .7em;
    .sitename {
      width: 430px;
      .logo { max-width: 88px; position: relative;}
      .lead {margin-block: .5em; font-size: 1.125em; font-weight: 700; position: relative; top:0; left: 0;}
      .lead span {font-size: 1.6em;}
    }
    .sitename a {width: 100%;}
    .header-wrap {
      .info {
        display: block; line-height: 1.5; font-weight: 700;
        dt {width: 6.3em;}
        div {margin:0;}
        .tel_num {position: relative; vertical-align: middle;}
        .tel_num a {font-size: 1.875em; color: var(--color-base); padding-left: 16px; line-height: 1;}
        .tel_num::before {content: ""; display: block; width: 14px; height: 20px; background: url(../img/common/icon-h-tel.svg); background-size: 100%; position: absolute; top: .5em; left: 0;}
      }
      .btn-wrap {
        a.btn-icon { max-width: unset; font-size: 1.15em;}
      }
    }
    .menu-button  { display:none; }
  }
  .line_btn { margin-left: 1em; padding-top: 1em; }


  .h_reserve_btn { margin-left: 1em; }
  .h_reserve_btn li { display: block; }
  .h_reserve_btn li:nth-child(2) { margin-top: 0.3em; }

  .h_reserve_btn li a {display: block; width: 100%; padding: 0.6em 3em;background:var(--color-base); border-radius:10px; text-align:center; color:var(--color-wht); position: relative;}
  .h_reserve_btn li.reserve a { background-color:var(--color-red); }
  .h_reserve_btn span {display: block; line-height: 1.3;}


  /* gnav ------------------------*/
  #gnav {
    z-index: 1; position: static; visibility: visible; opacity: 1; translate: 0 0; width: 100%; padding-block: .8em;
    border-image:linear-gradient( var(--color-base),var(--color-base) ) fill 0 /1/ 0 100vw;
    .nav-list {
      flex-direction: row;
      &.sp_only { display: none;}
      > li {
        flex-grow: 1; text-align: center; border-radius: unset; margin-top: unset;
        &:nth-child(n+2) { border-left: 1px solid var(--color-wht);}
        > a {
          display: inline-block; width: 100%; padding:1.8em 1em 0; font-size: 1em; color: var(--color-wht); position: relative;
          &::before {
            content: ''; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 2.5em; height: 1.8em; background: var(--color-wht); background-size: auto; mask-repeat: no-repeat; mask-position: center; mask-size: auto;
          }
          &[href="/"]::before { mask-image: url(../img/common/icon-top.svg);}
          &[href="/stock/"]::before { mask-image: url(../img/common/icon-stock.svg);}
          &[href="/about/"]::before { mask-image: url(../img/common/icon-about.svg);}
          &[href="/reason/"]::before { mask-image: url(../img/common/icon-reason.svg);}
          &[href="/purchase/"]::before { mask-image: url(../img/common/icon-purchase.svg);}
          &[href="/company/"]::before { mask-image: url(../img/common/icon-company2.svg);}
        }
      }
      li.sub-list-parent {
        position: relative; z-index: 500;
        &.is-open { padding-block: unset; border-radius: unset;}
        .sub-list {
          position: absolute; top: 4.4em; width: 100%; padding-inline: .5em; background-color: #42a4d9;
          li {
            font-size: .9em;
            &:nth-child(n+2) { border-top: 1px dashed var(--color-wht);}
            &:not(:last-child) { border-bottom: unset;}
            a { display: block; padding-block: .5em; font-size: 1em; color: var(--color-wht); }
          }
        }
        .tgl-btn { display: none;}
      }
    }
  }

  /* footer ------------------------*/
  #footer {
    padding-bottom: unset; .f-nav { columns: 3; font-size: 1em;}
  }
  .footer_logo {text-align: center;}
  .flo-nav {
    z-index:999; position:fixed; display: block; right:-5px; left: unset; bottom:80px;
    li {
      position:relative; width:100px; font-size:.8rem; line-height:130%;
      a {
        font-size: 1.2em; font-weight:500; border: 1px solid var(--color-wht); border-right: unset; border-radius:8px 0 0 8px;
        &[href="/stock/"] {
          padding-block: 2em 1em;
        }
        &[href="/reserve/"] {
          font-size: 1.2em; padding-block: 2em 1em;

        }
        &[href="#top"] {
          padding-block: 2em 1em; font-size: .95rem;
        }
      }
      a::after {top: 1em; width: 2em; height: 2em;}
    }
  }

  /*cookie policy*/
  .alert-cookie{
    .flex { justify-content: unset;}
    .msg { flex:1;}
  }
}


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


}


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


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



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

}


/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  body { font-size:14px; }

  /* header------------------------*/
  #header .sitename .lead { margin-top: .3em; }

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


  /* footer------------------------*/
  .shop_info_list { gap: 1.5em; }
  .flo-nav {
    li {   }
    .contact {
      width:50%; 
      a {padding: unset; color:var(--color-yel); background-color: unset; &::after { display: none;}}
    }
    .stock {align-self: end; width:50%;
      a {
        padding: unset;
        font-size:1em; line-height:1.4;
        color:var(--text-color); text-align:left; background-color: unset;
        em { font-size:1.5em; color:var(--color-red); }
        &::after { display:none; }
      }
    }
    .pagetop {
      position:absolute; right:0;bottom: calc(22.5vw + 100px); width:18%;
      a{
        font-size: 2em; padding: unset; background-color: unset;
        &::after { top: .15em; background: url(/img/common/icon-f-arrow-gry.svg) no-repeat 100% / 100%;}
      }
      p { display: none;}
    }
  }

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

  /* tel */

  /* title */

  /* button */


}