@charset "utf-8";

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

  --color-base:#323232; /*ベースカラー*/
  --color-sub1:#c40d1c; /*アクセント 濃い*/
  --color-sub2:#f25c09; /*アクセント 濃い*/
  --color-sub3:#f39800; /*アクセント 薄い*/
  --color-sub4:#5f210b; /*アクセント 別の色*/

  --color-zaiko  :#387daf;
  --color-reserve:#c40d1c;
  --color-store  :#323232;
  --color-syaken :#06A75E;

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

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

  /* 親からはみ出す */
  --fw :calc(50% - 50vw);

  /* シャドウ */
  --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); /*ボーダー有り用*/
}

body { color:var(--color-text); }
#wrapper { position:relative; overflow:hidden; }
.inner, .inner-narrow { position:relative; }
.sec-box { padding-block:min(8.5%,60px); }
.sec-btm { padding-bottom:min(9%,65px); }
main .sec-box:first-child { padding-top: min(5%,30px);}

/* common------------------------*/
a { color:var(--color-text); text-decoration:none; transition:all .3s; }
a:active, a:hover { color:var(--color-sub2); }
a:focus { outline:none; }

.mt0  { margin-top:0; }
.mt1  { margin-top:1em; }
.mt15 { margin-top:1.5em; }
.mt2  { margin-top:2em; }
.mt25 { margin-top:2.5em; }
.mt3 { margin-top:3em; }

.mb0 { margin-bottom:0; }
.mb1 { margin-bottom:1em; }
.pb1 { padding-bottom:1em; }

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

.dropdown::after, .dl-reason dt::after {
  position:absolute; top:50%; right:0; transform:translateY(-50%);
  content:''; display:block; width:1em; height:1em;
  background:url(../img/common/plus.svg) no-repeat center / contain;
  }
  .dropdown.is-open::after, .dl-reason dt.is-open::after {
    background-image:url(../img/common/minus.svg); }
.hide + .dropdown, .bodytype + .dropdown { margin-top:1em; }

/* color */
.c-red  { color:var(--color-red); }

.c-sub1 { color:var(--color-sub1); }
.c-sub2 { color:var(--color-sub2); }
.c-sub3 { color:var(--color-sub3); }
.c-sub4 { color:var(--color-sub4); }

/* bg */
.bg-gry { background-color:var(--color-gry1); }
.bg-crm { background-color:#fff6e4; }

/* title */
[class*="ttl-"] { font-weight:700; line-height:1.4; position:relative; }
.ttl-sec { margin-bottom:.8em; padding-bottom:.3em; font-size:1.8em; text-align:center; }
.ttl-sec::after {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  content:''; display:block; width:1.6em; height:2px;
  background-color:var(--color-sub2);
}
.ttl-sec.nf { margin-top:min(8%,60px); }
.ttl-sec > .lead { font-size:.6em; }

.ttl-def { padding-left:.1em; padding-bottom:.3em; font-size:1.2em; border-bottom:2px solid var(--color-gry2); }
.ttl-def::before {
  position:absolute; bottom:-2px; left:0;
  content:''; display:block; width:min(20%,100px); height:2px;
  background-color:var(--color-sub2); }
  .ttl-def > em { font-size:1.1em; }
.ttl-def.dropdown { padding-right:1.2em; }


.ttl-base { margin-bottom:.8em; font-size:1.5em; text-align:center; }

.ttl-sub { margin-bottom:.4em; padding-left:.6em; font-size:1.3em; }
.ttl-sub.l { font-size:1.4em; }
.ttl-sub::before {
  position:absolute; top:0; left:0; bottom:0;
  content:''; display:block; width:.2em; background-color:var(--color-sub2); }

/*下線*/
.ttl-bb { padding-bottom:.5em; font-size:1.6em; line-height:1.3; border-bottom:2px solid var(--color-sub1); }

.ttl-bb-b {
 margin:min(8%,50px) 0 .8em; padding-bottom:.2em; font-size:1.3em; font-weight:bold;
  line-height:1.5; border-bottom:3px solid #dfdfdf; position:relative }
.ttl-bb-b::before {
 content:""; display:block; position:absolute; bottom:-3px; left:0;
 width:2.5em; height:3px; background-color:var(--color-sub3)}

/*山型*/
.ttl-ms {
  padding:.6em; font-size:1.5em; color:#fff; background-color:var(--color-base);
  border-radius:10px 10px 0 0;
}

/* 塗りつぶし */
.ttl-full {
  padding: .6em .8em .7em; font-size: 1.6em; background-color: #dfdfdf;
}

/* 左に小さい〇 */
.ttl-cir { padding-left: 1.1em; font-size: 1.12em; position: relative;}
.ttl-cir::before { content: '\25CF'; position: absolute; top: .55em; left: 0; font-size: .6em; color: var(--color-sub3);}

/* 選ばれる理由 */
.ttl-reason { margin-bottom:.8em; font-size:1.5em; text-align:center; }
.ttl-reason img { height:min(11vw,70px); }
.ttl-reason > span { font-size:.8em; }


/* ボタン */
[class*="btn-"]:not(.mfp-close-btn-in) {
  display:inline-block; text-decoration:none; position:relative;
  &::before, &::after { transition:all .3s; }
}
.btn-def {
  padding:.5em 1em; text-align:center; border-radius:10px;
  color:var(--color-wht); background-color:var(--color-sub1);
  }
  .btn-def:hover { color:var(--color-wht); }
.btn-def.syaken  { background-color:var(--color-syaken); }
.btn-def.sub2 { background-color:var(--color-sub2); }
.btn-def.bankin, .btn-def.sub3 { background-color:var(--color-sub3); }
.btn-def.gry  { background-color:var(--color-gry3); }

.btn-def.big { padding:.6em 1.6em; line-height:1.3; } 
.btn-def.big .txt { font-size:1.25em; font-weight:700; text-shadow:var(--shadow1); }
.btn-def.big .txt em { font-size:1.14em; }

.btn-def.arrow::after {
  content:""; display:block; width:1.25rem; height:1.25rem;
  position:absolute; top:50%; right:4%; transform:translateY(-50%);
  background:#89040e url(../img/common/arrow-cright-wht.svg) no-repeat center / contain;
  border-radius:50%;
}
.btn-def.syaken.arrow::after { background-color:#048A4D; }
.btn-def.bankin.arrow::after { background-color:#c18420; }
.btn-def.sub2.arrow::after, .btn-def.sub3.arrow::after { width:1rem; background-color:inherit; }

.btn-basic {
  padding:.35em; text-align:center; border-radius:5px;
  color:var(--color-wht); background-color:var(--color-sub1);
  }
  .btn-basic:hover { color:var(--color-wht); }
  .btn-basic.arrow { padding-inline:1em 1.5em; }
  .btn-basic.arrow::after {
    content:""; display:block; width:1.1rem; height:1.1rem;
    position:absolute; top:50%; right:2%; transform:translateY(-50%);
    background:url(../img/common/arrow-right-wht.svg) no-repeat center / contain;
  }
  .btn-basic.syaken { background-color:var(--color-syaken); }
  .btn-basic.tenken { background-color:var(--color-sub2); }
  .btn-basic.oil    { background-color:var(--color-sub3); }

/*線のボタン*/
.btn-border {
  padding-block:.75em; font-weight:700; text-align:center;
  border:1px solid var(--color-gry2); border-radius:10px; box-shadow:var(--shadow2); background-color:#fff;
  }
  .btn-border > em { font-size:1.3em; }
  .btn-border::after {
    content:'';
    position:absolute; top:0; bottom:0; right:.7em;
    width:.5rem; height:.5rem; margin:auto;
    border-top:2px solid var(--color-sub2);
    border-right:2px solid var(--color-sub2);
    transform:rotate(45deg);
  }
  .btn-border.big { font-size:1.2em; }
  .btn-border.inline { padding-inline:1.5em 2em; }

/* list ------------------ */
.list-simbtn { display:flex; flex-wrap:wrap; gap:.5em 1em; }
.list-simbtn a { display:inline-block; padding:0 1em; color:#fff; background-color:var(--color-sub1); border-radius:2em; }

.list-num { padding-left: unset; counter-reset: list-num;}
.list-num > li { padding-left: 1.7em; list-style: none; counter-increment: list-num; position: relative;}
.list-num > li::before { content: counter(list-num); position: absolute; top: .2em; left: 0; width: 1.4em; height: 1.4em; font-size: .9em; color: var(--color-wht); line-height: 1.4; text-align: center; background-color: var(--color-sub3); border-radius: 50%;}



/* form */
select { appearance:none;
  padding-block:.2em; padding-inline:.5em 28px;
  background-color:#fff; border:1px solid #dcdcdc; border-radius:4px;
  background:url(../img/common/arrow-down.svg) no-repeat right 10px center / 12px;
}

form .submit { margin:2em auto 1em; text-align:center; }
form .submit input {
  display:inline-block; min-width: 170px; margin:0 10px; padding: 1em; font-size:1.12em; color:#fff; font-family:inherit; font-weight: 600; border-radius:5px; background: var(--color-sub1); -webkit-transition:all 3s; transition:all 3s;
}
form .submit input.prev, form .submit input[value="戻る"] { background-color: var(--color-gry2);}

/* シンプルモーダル */
.openModal { cursor: pointer; }
.modal {
  display:none; position:fixed; top:0; left:0; z-index:1001;
  width:100%; height:100%;
  background-color:rgba(0, 0, 0, 0.8);
  justify-content:center; align-items:center;
}
.modal-wrap { overflow-y:auto;
  position:relative; top:50%; left:50%;
  width:min(94%,800px); max-height:80vh; padding:1em; background-color:#fff;
  transform:translate(-50%, -50%);
}
.modal-content { }
.modal-close { cursor:pointer;
  position:absolute; top:0; right:0;
  display:block; width:1.5em; line-height:1.4; font-size:1.5em;
  color:#fff; text-align:center;
  background-color:var(--color-sub1); }


/* シンプルタブ */
.tabs { padding-top:.5em; margin-bottom:1.5em; background-color:#fff; }
.tab-buttons { display:flex; flex-wrap:wrap; width:100%; position:relative; cursor:pointer; }
.tab-buttons::after { display:block; content:""; position:absolute; bottom:0; left:0; right:0; height:1px; background-color:var(--color-gry2); }

.tab-buttons > li { padding:.5em 1.5em; font-weight:700; border-bottom:1px solid var(--color-gry2); position:relative; }
.tab-buttons > .selected::before {
  display:block; content:""; position:absolute; bottom:-1px; left:0; right:0; height:2px; background-color:var(--color-sub1); z-index:1; }
.tab-content { display:none; padding:1.2em 1em; }
.tab-content.active { display:block; }


/* slick ------------------------*/
.slick-slider { touch-action:auto; }
/* slick 読み込み時がたつき対応 */
ul[class*="slider"] > li:not(:first-child) { display:none; }

/* slick dotsカスタマイズCSS */
.dots-wrap { margin-block:.8em; display:flex; justify-content:center; gap:.6em; }
.dots-wrap li {
  width:min(.7em,16px); height:min(.7em,16px); cursor:pointer;
  background:var(--color-gry3); border-radius:50%;
  }
.dots-wrap li:hover,
.dots-wrap li.slick-active {
  background:var(--color-wht); border:3px solid var(--color-sub3); }
.dots-wrap li button {
  display:none; padding:0;
  -webkit-appearance:none;
  appearance:none;
  outline:none; border:none; background-color:transparent;
}

/* slick arrowsカスタマイズCSS */
.arrows .slide-arrow {
  position:absolute; top:calc(50% - 50px); z-index:1; opacity:.95;
  width:20px; height:90px; background:var(--color-gry3); border-radius:2px; }
  .arrows .slide-arrow::before {
    content:'';
    position:absolute; top:0; bottom:0; left:0; right:0;
    width:.5rem; height:.5rem; margin:auto;
    border-top:2px solid var(--color-wht);
    border-right:2px solid var(--color-wht);
  }
.arrows .prev-arrow { left:0; }
.arrows .prev-arrow::before { rotate:-135deg; }
.arrows .next-arrow { right:0; }
.arrows .next-arrow::before { rotate:45deg; }


/* header------------------------*/
.h-lead { margin-block:0; color:var(--color-wht); text-align:center; }
#gnav .smenu { position:absolute; display:flex; }
  #gnav .smenu .btn-def { border-radius:5px; }


/* footer------------------------*/
#footer {  }
#footer.min { padding-block:1em 0; background-color:var(--color-gry0); }

.copyright { margin:0; padding:.6em; color:#fff; font-size:.875em; text-align:center; background-color:var(--color-base); }
.copyright a { color:#fff; }

.flo-nav { position:fixed; z-index:99; font-size:.9em; }
.flo-nav a { display:block; color:#fff; text-align:center; position:relative; }
.flo-nav a::before {
  content:''; display:block; position:absolute; left:50%; transform:translateX(-50%);
  background:no-repeat center / contain;
}
.flo-nav .stock { background-color:var(--color-zaiko); }
.flo-nav .stock a::before { background-image:url(../img/common/ico-search.svg); }
.flo-nav .reserve { background-color:var(--color-reserve); }
.flo-nav .reserve a::before { background-image:url(../img/common/ico-calendar.svg); }
.flo-nav .store { background-color:var(--color-store); }
.flo-nav .store a::before { background-image:url(../img/common/ico-store.svg); }
.flo-nav .txt { line-height:1; }

.f-info { padding-top:30px; }
.f-menu { display: grid; grid-template-columns: repeat(5,1fr); column-gap: 1.5em;}
.f-menu .menu-name { font-weight: 700;}

#pagetop { background-color:var(--color-gry2); }
#pagetop a::before { background:#fff; clip-path:polygon(50% 0%, 0% 100%, 100% 100%); }

/*cookie policy*/
.alert-cookie { position:fixed; bottom:0; left:0; right:0; padding:1.3em 0; background:rgba(0,0,0,.85); z-index:300; }
.alert-cookie .msg { margin:0; color:#fff; font-size:13px; line-height:1.5; }
.alert-cookie a { color:var(--color-sub3); }
.alert-cookie .btn-def { width:240px; font-family:inherit; }


/* 見て、触って --------------------------- */
/* 来店予約リンク */
.top-reserve .lead { position:relative; z-index:1;
  padding:.3em 1em; font-size:1.3em; font-weight:700;
  color:var(--color-reserve); background-color:#fff;
  border-radius:1em; box-shadow:var(--shadow1); }
  .top-reserve .lead::after {
    content:''; display:block;
    position:absolute; top:98%; left:50%; z-index:1;
    width:.6em; height:.5em; transform:translateX(-50%);
    background-color:#fff;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
  }
.top-reserve .lead > em { font-size:1.4em; }
.top-reserve .btn-def { margin-top:-.3em; }

#contact .f-reserve { display:none; }
.f-reserve { color:#fff; font-weight:700; text-align:center; background:url(../img/common/bg-freserve.jpg) no-repeat center / cover; }
.f-reserve .com { font-size:min(7.7vw,40px); line-height:1.1; }
.f-reserve .txt { font-size:min(5.5vw,28px); line-height:1.3; }
.f-reserve .top-reserve { margin-top:1em; }
.f-reserve .hour { font-size:min(5vw,28px); }
.f-reserve .hour > span {
  display:inline-block; margin-right:.5em; padding:.2em .6em;
  font-size:16px; color:var(--color-wht); background:var(--color-sub2);
}

/* 目玉車（共通） --------------------------- */
.medama-ttl { line-height:1.2; text-align:center; }
.medama-ttl .date > em { font-size:1.4em; }
.medama-ttl .web { font-size:1.7em; }
.medama-ttl .medama { font-size:2em; color:var(--color-sub1); }
.ttl-base + .medama-list { margin-top:-1em; }
.medama-list.slide { margin-inline:-5px; }
.medama-box { margin:10px 5px; background-color:#fff; border-radius:5px; box-shadow:var(--shadow1); font-feature-settings:"palt"; }
.medama-box a { display:flex; flex-direction:column; height:100%; }
.medama-box a:hover { color:inherit; opacity:0.7; }

.medama-list .slick-track { display: flex; }
.medama-list .slick-slide { height: auto !important; }

.medama-list .data { display:flex; flex-direction:column; flex:1; padding:.5em 6% .8em; text-align:center; }
.medama-box .name { margin:0; font-weight:700;  }
.medama-box .grade { margin:0; font-size:.85em; color:#333; line-height:1.4; }

.medama-box .image { position:relative; }
.medama-box .image > img { border-radius:5px 5px 0 0; }
.medama-box .obi { /* position:absolute; top:0; left:0; right:0; z-index:1; */ border-radius:5px 5px 0 0; }
.medama-box .ribbon { position:absolute; top:0; left:0; }
.medama-box .ribbon > img { border-radius:5px 0 0 0; }
.medama-box .type {
  position:absolute; top:10%; right:0; display:block; z-index:2;
  padding:.2em .5em; color:var(--color-wht); border-radius:5px 0 0 5px; }
.medama-box .type.k { background-color:var(--color-sub2); }
.medama-box .type.n { background-color:var(--color-blu); }

.medama-box .price { margin:auto 0 0; font-size:.9em; font-weight:700; text-align:right; border-bottom:1px solid var(--color-gry2); }
.medama-box .price > em { font-family:'Helvetica','Arial',sans-serif; font-size:2em; color:var(--color-red); }
.medama-box .price .label { font-weight:500; color:var(--color-gry4); }

.medama-box .info { display:grid; grid-template-columns:5em 1fr; margin-top:.5em; text-align:left; }
.medama-box .info > dt { color:var(--color-gry4); }

/* 店舗一覧（共通） --------------------------- */
.store-list { display:grid; grid-template-columns:repeat(2,1fr); gap:3.5vw; }
.store-list > li { display:grid; grid-template-rows:subgrid; grid-row:span 5; gap:0; padding-bottom:1em; background-color:var(--color-wht); border:1px solid var(--color-gry4); border-radius:6px; }
.store-list .name {
  display:grid; align-items:center; height:100%;
  padding:.5em .3em; font-size:1.1em; line-height:1.3; font-feature-settings:"palt"; color:#fff; text-align:center;
  background-color:var(--color-base); border-radius:5px 5px 0 0; }
.store-list .addr { margin:.75em 6% 0; font-size:.875em; line-height:1.3; }
.store-list .tel { margin:.2em 6%; font-weight:700; }
.store-list .free:before { content:""; display:inline-block; margin-right:.2em; width:1.4em; height:1em; background:url(../img/common/ico-freedial.png) no-repeat bottom / contain; }
.store-list .link {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:.5em 3%;
  margin:.5em 3.8% 0; align-items:start; }
.store-list .link > li .btn-basic { display:block; padding:.3em; }
.store-list .link > li .btn-basic.arrow::after { right:0; }
.store-list .link > li .btn-basic.oil { padding-block:1em; font-size:.6em; font-feature-settings:"palt"; }
.store-list .link > li.notice { grid-column:span 2; font-size:.75em; line-height:1.4; }

/* 動画リスト（共通） --------------------------- */
.cm-list { margin-bottom:min(6%,50px); display:grid; grid-template-columns:repeat(2,1fr); gap:.75em; }