@charset "UTF-8";

/* common setting /////////////////////*/
*{
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body{
  line-height: 1.6;
  font-family: 'Zen Kaku Gothic New', 'Yu Gothic', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #1D1D1D;
}
img{
  display: block;
  max-width: 100%;
}
a, a:visited, a:active, a:hover{
  display: block;
  color: #1D1D1D;
  text-decoration: none;
}
.wrap{
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
h2{
  font-size: 30px;
  text-align: center;
  line-height: 1.5;
}
/* slider-parts */
.flickity-button,
.flickity-button:hover {
  background: #F58400;
}
.flickity-button-icon {
  fill: #fff;
}

/* header /////////////////////*/
header{
  background: #fff;
  padding: 8px 0;
}
header img{
  width: 90px;
}

/* main_visual /////////////////////*/
#main_visual{
  position: relative;
}
#main_visual .main-content{
  width: 100%;
}
#main_visual .main-btn{
  width: 30vw;
  position: absolute;
  right: 17vw;
  bottom: 3vw;
}

/* sec-01 /////////////////////*/
#sec-01{
  background: url('../image/sec01_bg.png') center top /cover,#E0E0E0;
}
#sec-01 img{
  margin: 0 auto;
}
#sec-01 .sec01_bottom{
  background: linear-gradient(transparent 30%, #FFE4A6 30%);
}

/* sec-02 /////////////////////*/
#sec-02{
  padding: 50px 0 0;
}
#sec-02 img{
  margin: 0 auto;
}

/* CTA /////////////////////*/
#cta{
  padding: 50px 0;
  background: url('../image/cta_bg.png') center top /cover, #F58400;
}
#cta .wrap{
  max-width: 900px;
  position: relative;
}
#cta .cta_content{
  margin: 0 auto;
}
#cta .cta_btn{
  position: absolute;
  left: 0;
  top: 78%;
}

/* sec-03 /////////////////////*/
#sec-03{
  padding: 50px 0;
  background: url('../image/sec03_bg.png') no-repeat top right;
}
#sec-03 img{
  margin: 0 auto;
}
#sec-03 h2{
  margin: 0 0 30px;
}
#sec-03 .slider1{
  max-width: 1008px;
  margin: 0 auto 20px;
  position: relative;
}
#sec-03 .slider1::after{
  content: url('../image/sec03_arrow.png');
  position: absolute;
  left: calc(50% - 36px);
  bottom: -19px;
}
#sec-03 .flickity-prev-next-button.previous {
  left: -28px;
}
#sec-03 .flickity-prev-next-button.next {
  right: -28px;
}

/* sec-04 /////////////////////*/
#sec-04{
  padding: 50px 0 110px;
  background: #FFF0DC;
}
#sec-04 h2 img{
  margin: 0 auto 20px;
}
#sec-04 .slider2 .slider-cell{
  width: fit-content;
  margin: 0 15px 0;
}
#sec-04 .flickity-prev-next-button.previous {
  left: calc(50% - 380px);
}
#sec-04 .flickity-prev-next-button.next {
  right: calc(50% - 370px);
}
#sec-04 .flickity-page-dots {
  bottom: -60px;
}
#sec-04 .flickity-page-dots .dot {
  width: 22px;
  height: 22px;
  opacity: 1;
  background: transparent;
  border: 2px solid #F58400;
}
#sec-04 .flickity-page-dots .dot.is-selected {
  background: #F58400;
}

/* sec-05 /////////////////////*/
#sec-05{
  background: url('../image/sec05_bg.png') center bottom /cover;
}
#sec-05 img{
  margin: 0 auto;
}

/* sec-06 /////////////////////*/
#sec-06 .wrap{
  max-width: 1000px;
}
#sec-06 h2{
  margin: 0 0 24px;
}
#sec-06 dl{
  padding: 1em 4em;
  margin: 0 0 .7em;
  background: #FFF0DC;
  border-radius: 30px;
  position: relative;
}
#sec-06 dl:last-child{
  margin: 0 0 80px;
}
#sec-06 dt{
  font-weight: 700;
}
#sec-06 dt::before {
  content: '';
  display: block;
  width: 47px;
  aspect-ratio: 1 / 1;
  background: url('../image/icon_q.png') no-repeat center center /contain;
  position: absolute;
  left: 1em; top: .85em;
}
#sec-06 dt::after{
  content: url('../image/icon_plus.svg');
  display: block;
  width: 24px;
  aspect-ratio: 1 / 1;
  position: absolute;
  right: 1.45em;
  top: 26px;
}
#sec-06 dt.open::after{
  content: url('../image/icon_minus.svg');
  top: 16px;
}
#sec-06 dd{
  display: none;
  margin: .7em 0 0;
  padding: 0.3em 1em;
  background: #fff;
}

/* sec-07 /////////////////////*/
#sec-07 img{
  margin: 0 auto;
}

/* footer /////////////////////*/
footer{
  padding: .8rem 0;
  background: #F58400;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.footer_ul { display: flex;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.footer_ul li {
  width: 50%;
}

.footer_ul li a {
  font-size: 14px;
  color: #fff;
  width: 100%;
}

/* sp_layout //////////////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 450px){
  body { font-size: 16px; }
  header img{ width: 74px; }
  /* main_visual /////////////////////*/
  #main_visual .main-btn {
    width: 90%;
    margin: 0 auto 30px;
    position: static;
  }
  /* sec-01 /////////////////////*/
  #sec-01 {
    background: url('../image/sp_sec01_bg.png') center top /cover, #E0E0E0;
    position: relative;
  }
  #sec-01::before{
    content: '';
    display: block;
    width: 100%;
    height: 20px;
    background: #fff;
    position: absolute;
    left: 0; top: 0;
  }
  #sec-01 img {
    margin: 0 auto;
  }
  #sec-01 .sec01_bottom {
    padding: 5px 0 20px;
    background: linear-gradient(transparent 25%, #FFE4A6 25%);
  }
  #sec-01 .sec01_bottom img{
    width: 70%;
    margin: 0 auto 0 10%;
  }
  /* sec-02 /////////////////////*/
  #sec-02 {
    padding: 30px 0 0;
  }
  #sec-02 .wrap{
    width: 100%;
  }
  /* CTA /////////////////////*/
  #cta {
    padding: 15px 0 25px;
    background: url('../image/sp_cta_bg.png') center top /cover, #F58400;
  }
  #cta .cta_btn {
    position: static;
    margin: 20px auto 0;
  }
  /* sec-03 /////////////////////*/
  #sec-03 {
    padding: 46px 0;
    background: url('../image/sec03_bg.png') no-repeat top right /70%;
  }
  #sec-03 h2 {
    width: 70%;
    margin: 0 auto 30px;
  }
  #sec-03 .slider1 {
    margin: 0 auto 15px;
  }
  #sec-03 .slider1::after {
    content: url('../image/sec03_arrow.png');
    transform: scale(0.5);
    bottom: -28px;
  }
  #sec-03 .flickity-prev-next-button.previous {
    left: -3.5%;
  }
  #sec-03 .flickity-prev-next-button.next {
    right: -3.5%;
  }
  /* sec-04 /////////////////////*/
  #sec-04 {
    padding: 37px 0 80px;
  }
  #sec-04 h2 img {
    width: 65%;
    margin: 0 auto 25px;
  }
  #sec-04 .slider2 .slider-cell {
    width: 80%;
    margin: 0 10% 0 0;
  }
  /* slider-parts */
    #sec-04 .flickity-prev-next-button.previous { left: 2%; }
    #sec-04 .flickity-prev-next-button.next { right: 2%; }
    #sec-04 .flickity-page-dots { bottom: -42px; }
    #sec-04 .flickity-page-dots .dot {
    width: 15px;
    height: 15px;
  }
  /* sec-05 /////////////////////*/
  #sec-05 {
    background: url('../image/sp_sec05_bg.png') center bottom /cover;
  }
  /* sec-06 /////////////////////*/
  #sec-06 h2 {
    margin: 0 0 1rem;
  }
  #sec-06 dl {
    padding: 1rem 3rem;
    margin: 0 0 1rem;
    border-radius: 15px;
  }
  #sec-06 dl:last-child {
    margin: 0 0 32px;
  }
  #sec-06 dt::before {
    content: '';
    display: block;
    width: 30px;
    aspect-ratio: 1 / 1;
    background: url('../image/icon_q.png') no-repeat center center /contain;
    position: absolute;
    left: .6rem;
    top: 1rem;
  }
  #sec-06 dt::after {
    content: url('../image/icon_plus.svg');
    transform: scale(0.7);
    position: absolute;
    right: .8rem;
    top: calc(50% - 12px);
  }
  #sec-06 dt.open::after {
    content: url('../image/icon_minus.svg');
    top: calc(50% - 18px);
  }
  #sec-06 dd {
    display: none;
    margin: .7em 0 0;
    padding: 0.3em 1em;
    background: #fff;
  }
  /* sec-07 /////////////////////*/
  #sec-07 img {
    width: 90%;
  }
  /* footer /////////////////////*/
  footer {
    font-size: 14px;
  }
}