@charset "utf-8";

/*main_sp-----------------------*/
.main_sp {background: url(../img/main_bg_sp.jpg); background-size: 100%; padding: 1.5em .5em 3em;}
.point01 {margin-top: 1em;}

/*satei_request----------------*/
.satei_request {
  width: 96%; max-width: 1200px; margin: -1.5em auto 1.5em; border: 3px solid var(--color-sub); border-radius: 10px; padding: 0; background-color: var(--color-sub);
  .inner {width: 100%; background: var(--color-wht); padding: .7em; border-radius: 0 0 9px 9px;}
  .ttl {
    margin: 0 auto; text-align: center; color: var(--color-wht); font-weight: 700; line-height: 1.2; padding: .5em; max-width: 600px;
    .sub {
      margin-block: .3em; color: var(--text-color); font-size: .85em; padding: .4em; background: var(--color-wht);
      .bubble { background: var(--color-red); padding: .2em .4em; color: var(--color-wht); font-size: .7em; border-radius: 5px; position: relative; margin-left: 10px;}
      .bubble::before { position: absolute; top: 7px; left: -10px; content:''; width: 10px; height: 10px; background-color: var(--color-red); clip-path: var(--arrow);transform: rotate(180deg);}
    }
  }
}
.satei-request-submit {display: block; width: 100%; max-width: 500px; margin: 0 auto; background-color: var(--color-sub); padding: 10px 30px; text-align: center; }

/*satei_banner------------------*/
.satei_banner {background: url(../img/satei_bg.jpg); padding: 15px 0 clamp(30px,10vw,60px);}
.satei_btn {text-align: center; margin-bottom: 10px;}
.tel_satei {
  gap: 1em; justify-content: center; width: 90%; max-width: 1000px; margin: 0 auto;
  li {
    width: 100%; border: 3px solid var(--color-sub); font-size: 1.5em; font-weight: 700; text-align: center; color: var(--color-sub); padding: .5em 1em; border-radius: 10px; background-color: var(--color-wht);
    p {margin-block: 0;}
    .shopname {padding: 0 0 .5em; border-bottom: 3px solid  var(--color-sub); margin-bottom: .5em;}
    .tel_num a { padding: 1em 0 0; font-size: 1.5em; color: var(--color-sub);}
  }
}

/*faq--------------------------*/
.accordion-area { list-style: none; width: 100%; max-width: 800px; margin:0 auto 30px;}
.accordion-area li { margin: 10px 0;}
.accordion-area .title { position: relative; cursor: pointer; font-size:1.2em; font-weight: 700; padding: 2% 3% 2% 2.5em; transition: all .5s ease; border-bottom: 2px solid var(--color-l-red); color: var(--color-l-red);}
.accordion-area li h3::before {content: "Q."; display: block; padding: .1em .2em .3em .2em; background-color: var(--color-l-red); color: var(--color-wht); font-weight: 900; font-size: 1.3em; position: absolute; border-radius: 0 100vh 100vh 0; bottom: 0; left: 0;}

.title::after{ position: absolute; top: 42%; right: 0; content:''; width: 15px; height: 15px; background-color: #d80a30; clip-path: var(--arrow);transform: rotate(0deg);}
.title.close::after{ transform: rotate(90deg);}
.box { display: none; margin:0 3% 5% 3%; padding: 0 2%;}

.contact-btn {
  position: relative; z-index: 0; background-color: var(--color-orn); padding: 2em 1.5em; margin-bottom: 0;
  a {
    display: block; margin: 0 auto; width: 95%; max-width: 520px; padding:.7em .7em; padding-right: 1.4em; font-size: clamp(18px,3vw,30px); line-height: 1.5; color: var(--color-sub); font-weight: 700; text-align: center; background-color: var(--color-wht); box-shadow: 5px 5px #aaa; position: relative;
    &::after{content: ""; display: block; width: 30px; height: 30px; mask: url(../img/common/arrow_circle.svg) no-repeat 100% / 100%; background: var(--color-sub); position: absolute; top: .7em; right: 1em;}
  }
  span{display: block;}
}

/*reason----------------------------*/
.reason_list {
  gap: .5em; max-width: 1200px; margin: 0 auto;
  li {
    width: 98%; margin-bottom: 10px; padding: 1em; box-shadow: var(--shadow);
    .ttl {font-size:1.5em; color: var(--color-sub);}
    figure { width: 60%; margin-bottom: 1em; margin: 0 auto;}
  }
}

/*example----------------------------*/

/* スライド設定 */
.slick-track {display: flex;}
.slick-slide {height: auto !important;}

.dots-wrap { display: flex; justify-content: center; gap: .6em; margin-block: .8em; }
.dots-wrap li { width: min(.7em, 16px); height: min(.7em, 16px); cursor: pointer; background: var(--color-gry); border-radius: 50%; }
.dots-wrap li.slick-active { background-color: var(--color-sub); }
.dots-wrap li button { display: none; padding: 0; appearance: none; outline: none; border: none; background-color: transparent; }

.slide-arrow { position: absolute; top: calc(50% - 50px); z-index: 1; opacity: .95; width: 20px; height: 90px; background: var(--color-sub); border-radius: 2px; border: none; }
.slide-arrow::before{ position: absolute; content: ""; 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); }
.next-arrow::before { rotate: 45deg; }
.prev-arrow::before { rotate: -135deg; }
.prev-arrow { left: -.5em;}
.next-arrow { right: -.5em;}

.pex-list .item { margin-inline:.5em ; margin-bottom: 1em; box-shadow: var(--shadow1); border-radius: 5px;}
.pex-list .pex-ttl { margin: 0; padding: .5em; font-size: 1.1em; color: #fff; font-weight: bold; text-align: center; line-height: 1.4; background-color: var(--color-sub); border-radius: 10px 10px 0 0;}
.pex-list .pex-img { padding: .95em; padding-bottom: unset;}
.pex-list .pex-data { padding: 0 .7em .5em;}
.pex-list .pex-price { align-items: baseline;}
.pex-list .pex-price dt { font-weight: bold;}
.pex-list .pex-price em { font-size: 1.7em; font-family: 'Helvetica','Arial',sans-serif;}
.pex-list .pex-info { display: grid; grid-template-columns: 5em 1fr; gap: .3em; margin-top: .5em; font-size: .95em;}
.pex-list .pex-info dt { color: var(--color-gry);}

/*flow------------------------------*/
.flow_list {
  gap: .5em; counter-reset: num; max-width: 800px; margin: 0 auto;
  li{
    width: 98%; margin-bottom: 10px; padding: 1em; box-shadow: var(--shadow);
    .ttl { counter-increment: num; display: block; width: 100%; margin-bottom: .7em; position: relative; cursor: pointer; font-size:1.3em; font-weight: 700; padding: 2% 3% 2% 2.8em; transition: all .5s ease; border-bottom: 2px solid var(--color-base); color: var(--color-base);}
    .ttl::before {content: counter(num)"."; display: block; padding: .1em .5em .1em .5em; background-color: var(--color-base); color: var(--color-wht); font-weight: 900; font-size: 1.3em; position: absolute; border-radius: 0 100vh 100vh 0; bottom: 0; left: 0;}
    .img {width: 25%; text-align: center; margin-bottom: 1em;}
    img {max-height: 100px;}
    .txt {
      width: 73%;
      > p > span { display: block; margin-block: .5em; }
    }
    .bg {background-color: var(--color-l-base); padding: .5em;}
  }
}

.news dl {
  max-width: 980px; margin: 0 auto;
  .flex {border-bottom: 1px dotted var(--color-gry); padding-block: .5em;}
  dt {width: 7em; margin-right: 1.5em;}
}
.shop_info {
  max-width: 1000px; margin: 0 auto 30px;
  .info {margin-bottom: 1em;}
  .info.flex > *{ min-width: 0; min-height: 0; }
  .ttl {display: inline-block; width: fit-content; font-size: 1.25em; background-color: var(--color-base); color: var(--color-wht); padding: .3em 1.5em; border-radius: 30px; margin-bottom: .5em;}
  .gmap {height: 300px;}
  .new-open {
    display: flex; align-items: center; gap: 1em;
    .txt { color: #d80a30; font-weight: 800; }
  }
}

.privacy .inner {width: 92%; max-width: 1000px;}
.sec_ttl {color: var(--color-base); font-weight: 700; font-size: 1.25em; border-bottom: 2px solid var(--color-l-gry);}
ol.paren { margin-top: 1em; padding-left:1.8em;
    > li { line-height: 1.7; list-style-type:none; counter-increment:paren; }
    > li::before { content: counter(paren)"."; font-size: 1.125em; display:inline-block; margin-left:-1.5em; }
    > li:nth-child(n+2) { margin-top: .7em;}
    > li ul {margin-top: 1em;}
    > li ul > ul {margin-left: 1em; margin-top: .5em;}
    > li ul li {text-indent: -1em; padding-left: 1em;}
}
.voice-block{
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}
.voice-block li{
  width: 100%;
}
.voice-block li a{
  display: block;
  border-bottom: 1px dotted var(--color-gry);
  padding: 10px 0;
}

/*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); }
}
/* ================================================================
  レスポンシブ
=================================================================== */
/* 1200以上 */
@media screen and (min-width: 1200px) {
  body { overflow-x: hidden;}
}


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

  .main_pc {
    background: url(../img/main_bg_pc.jpg) no-repeat; background-size: cover; padding: 50px 0;
    .inner {max-width: 1300px;}
    .main_img {width: 54%;}
    .point {width: 44%; margin-top: 90px;}
  }

  .reason_list {
    li { width: calc((100% - 2em) / 3);}
  }

  .satei_request { margin: -40px auto 60px;}
  .satei_request .tbl{
    border-spacing: 0; max-width: 700px; margin-bottom: 1em;
    th { padding: 1em; margin: 0;}
    td { border-left: none; }
  }

  .satei-request-submit { padding: 15px 60px;}

  .satei_banner {
    li { width: calc((100% - 2em) / 3);}
  }

  .ttl { font-size: 2em;}
  .ttl-def { font-size: 2em; margin: 0 auto 1.5em; padding: .7em 0;}

  .flow_list {
    li{
      .img {width: 20%;}
      .txt {width: 76%;}
    }
  }
  .shop_info {
    margin-bottom: 50px;
    .gmap {height: 450px;}
    .img {width: 48%;}
    .txt {width: 48%;}
  }
}

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

}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {

}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  .shop_info {
    .new-box {
      .new-open{
        font-size: .95em;
      }
    }
  }

  .flow_list {
    li {
      .img {width: 25%;}
    }
  }
}