@charset "UTF-8";
/* ------------------------------
    reset
------------------------------ */
html {
  font-size: 62.5%;
  overflow-y: scroll;
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 0.8333333333vw;
  }
}
@media screen and (max-width: 959px) {
  html {
    font-size: 1.0416666667vw;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 2.2222222222vw;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, address, time,
ul, ol, li, dl, dt, dd,
table, th, td, img, figure, figcaption,
form, input, button, textarea, select {
  margin: 0;
  padding: 0;
  border: none;
  line-height: 100%;
  list-style-type: none;
  font-style: normal;
  font-weight: normal;
  font-family: メイリオ, Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  -webkit-text-size-adjust: 100%;
}

input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0;
  resize: none;
  outline: none;
  background: none;
}

select::-ms-expand {
  display: none;
}

button:hover {
  cursor: pointer;
}

a {
  color: #000;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  a {
    transition: opacity 0.3s ease;
  }
  a:hover {
    opacity: 0.6;
    cursor: pointer;
  }
}

img, object, picture, svg {
  vertical-align: bottom;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ------------------------------
    base
------------------------------ */
body {
  color: #000;
  min-width: 600px;
  font-size: 1rem;
  text-align: left;
}

section {
  position: relative;
}

main {
  display: block;
}

.wrap {
  width: 90%;
  max-width: 1200px;
  padding: 0;
  margin: 0 auto;
  position: relative;
}

p, th, td, dt, dd, li, input, button, textarea {
  font-size: 1.6rem;
  line-height: 1.8;
}

.tal {
  text-align: left;
}

.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

.bold, strong {
  font-weight: bold;
}

.fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.preload *, .preload *::before, .preload *::after {
  transition: none !important;
}

@media screen and (min-width: 768px) {
  .fade {
    transition: opacity 0.3s ease;
  }
  .fade:hover {
    opacity: 0.6;
    cursor: pointer;
  }
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
  body {
    width: 600px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  body {
    min-width: inherit;
  }
  input, textarea, select, .select {
    font-size: max(1.6rem, 16px) !important;
  }
}

/* ------------------------------
    main
------------------------------ */

.l-Section__inner {
  padding: 0 !important;
}

.slick-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 40% -50%;
  background: url("../img/ico_arrow.png") no-repeat center / contain !important;
  font-size: 0;
  width: 60px;
  height: 60px;
  max-width: 8vw;
  z-index: 1;
  &.slick-prev {
    left: 0;
    translate: -40% -50%;
    scale: -1 1;
  }
  &::before {
    display: none !important;
  }
}
.slick-dots {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  position: static !important;
  li {
    button {
      font-size: 0;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background: #fff;
      &::before {
        display: none !important;
      }
    }
    &.slick-active button {
      background: #ef6f32;
    }
  }
}

.sec_optin {
  background: url("../img/optin_bg.png") no-repeat center / cover;
  padding: 5% 3%;
  .box._01 {
    position: relative;
    .btn {
      position: absolute;
      left: 50%;
      bottom: 3%;
      translate: -50% 0;
      width: 90%;
    }
  }
  .box._02 {
    position: relative;
    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5%;
      position: absolute;
      left: 50%;
      bottom: 12%;
      translate: -50% 0;
      width: 90%;
      .btn._01 {
        width: 45%;
      }
      .btn._02 {
        width: 55%;
      }
    }
  }
}

#sec_02 {
  background: url("../img/sec02_bg.png") no-repeat center top 50% / 100% auto;
  padding-top: 8%;
  margin-bottom: 5%;
  .img._01 {
    padding: 0 3%;
  }
  .img._02 {
    margin-top: 5%;
    padding: 0 5%;
  }
}

#sec_04 {
  background: url("../img/sec04_bg.png") no-repeat center top / cover;
  overflow: hidden;
  .img._01 {
    padding: 8% 0;
    margin: 0 -8%;
  }
  .img._02 {
    padding: 0 3% 8%;
  }
}

#sec_06 {
  background: linear-gradient( to bottom, #fff 12%, #f5e7dd 12%);
  padding: 8% 0;
  .img._01 {
    padding: 0 3% 5%;
  }
  .slider {
    margin: 0 5%;
  }
}

#sec_07 {
  padding: 8% 3%;
  .img._01 {
    padding: 0 5%;
  }
  .img._02 {
    margin-top: -10%;
  }
  .img._03 {
    padding: 8% 0;
  }
}

#sec_08 {
  padding-bottom: 8%;
}

#sec_09 {
  background: url("../img/sec09_bg.png") no-repeat center top / 100% auto;
  padding: 8% 5%;
  .img._01 {
    padding: 0 5%;
  }
  .slider {
    margin: 3% 0;
  }
  .img._02 {
    padding-bottom: 8%;
  }
}

#sec_10 {
  background: url("../img/sec10_bg.png") no-repeat center top / cover;
  padding: 8% 0;
  .img._02 {
    padding: 8% 8% 8% 3%;
  }
}

#sec_11 {
  .bg {
    background: #f0e3ce;
    padding: 8% 5%;
    .img._02 {
      margin: 0 3% 5%;
    }
  }
  .slick-dots {
    button {
      background: #bca88b;
    }
    .slick-active button {
      background: #ef6f32;
    }
  }
}

#sec_12 {
  .img._01 {
    width: 40%;
    margin: 8% auto 3%;
  }
  .bg {
    background: #efd1d4;
    padding: 8% 3%;
    .img {
      margin-top: 3%;
    }
  }
}

#sec_13 {
  padding: 8% 0 8% 5%;
}

#sec_14 {
  padding: 8% 5% 30%;
  .img._01 {
    width: 35%;
    margin: 0 auto 5%;
  }
  .faq {
    border-top: 1px solid #ccc;
    &:last-child {
      border-bottom: 1px solid #ccc;
    }
    .q, .a {
      font-size: 15px;
      padding: 1em 3em;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        left: .5em;
        top: 1em;
        background: url("../img/sec14_ico01.png") no-repeat center / contain;
        width: 1.5em;
        height: 1.5em;
      }
      .ico {
        width: 1.3em;
        height: 1.3em;
        position: absolute;
        right: .5em;
        top: 50%;
        translate: 0 -50%;
        &::before, &::after {
          content: '';
          position: absolute;
          left: 50%;
          top: 50%;
          translate: -50% -50%;
          width: 100%;
          height: 2px;
          background: #ef6f32;
          transition: rotate .3s ease;
        }
        &::after {
          rotate: 90deg;
        }
      }
      &.is-open .ico::after {
        rotate: 180deg;
      }
    }
    .q {
      cursor: pointer;
    }
    .a {
      padding-top: 0;
      &::before {
        background-image: url("../img/sec14_ico02.png");
        top: 0;
      }
    }
  }
}

#floating_btn {
  position: fixed;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: 100%;
  max-width: 600px;
  z-index: 999;
  img {
    height: auto !important;
  }
}

/* ------------------------------
    responsive
------------------------------ */
@media screen and (min-width: 960px) {
  .pc-none {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
@media screen and (max-width: 959px) {
  .tb-none {
    display: none !important;
  }
  .pc {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .sp-none {
    display: none !important;
  }
}

/* ------------------------------
    clearfix
------------------------------ */
.cf {
  zoom: 1;
}
.cf::after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden; /* 隙間対応 */
  font-size: 0.1em; /* 隙間対応 */
  line-height: 0; /* 隙間対応 */
}