body {
  margin: 0;
  font-size: 1.6rem;
  position: relative;
  padding: 0;
}

section{box-sizing: border-box;}
.forcms_block{margin-bottom: 0!important;}

a:active,
a:hover {outline-width: 0;}

.btn:hover span {background-size: 100% 1px !important;}

.breadcrumb{display: none;}

header {
  width: 100%;
  text-align: right;
  position: absolute;
  z-index: 1;
}

img {
  max-width: 100%;
  line-height: 0;
  vertical-align: bottom;
  height: auto;
  border-style: none;
}

#wrapper {position: relative;}

a{color: #000;}
.btn {position: relative;}

section.mv > img.pc {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
}

section.mv .copy {position: relative;}
section.cv01 {
  gap: 0 15px;
  position: relative;
  box-sizing: border-box;
}

.cv {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 25px;
  width: 100%;
  padding: 0 5%;
  background: linear-gradient(235deg, #53be71 24%, #adee89 99%);
  box-sizing: border-box;
}

section.cv01 > img.pc {margin-top: -40px;}
.btn span {
  width: max-content;
  font-size: 22px;
  font-weight: bold;
  transition: .75s;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
}

section.campaign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px 0;
  padding: 80px 5% 70px;
  background: linear-gradient(0deg, #e8f3d4 0%, #fff7f0 100%);
  box-sizing: border-box;
}

section.campaign img.pc {max-width: 961px;}
section.campaign a.btn span {
  background: linear-gradient(#fff, #fff) 0 100% / 0 1px no-repeat;
  color: #fff;
}

section:not(.cv) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

section.mv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  position: relative;
}

section.sec01 img.sp {width: 100%;}
section.sec02 .top {
  width: 100%;
  padding: 15vw 5% 0;
  background: url(/cms/img/usr/lp/hochoki_try/sec02_bg01.jpg) no-repeat top center / cover;
  text-align: center;
}

section.sec02 .cntWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: url(/cms/img/usr/lp/hochoki_try/sec02_bg02.png) no-repeat top center / cover;
  position: relative;
  z-index: 1;
}

section.sec03 .top {
  width: 100%;
  position: relative;
}

section.sec03 .top img.ttl {
  max-width: 90%;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
}

section.sec03 .top img.pic {width: 100%;}
section.sec03 .cntWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px 0;
  width: 100%;
  padding-bottom: 80px;
  background: linear-gradient(180deg, #d0f1b3 0%, #d3f2b1 28%, #dceeac 51%);
}

section.sec03 .cntWrap .frame {
  max-width: 800px;
  width: 90%;
  position: relative;
}

section.sec03 .cntWrap .frame iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

section.sec03 .cntWrap .frame::after {
  content: '';
  display: block;
  padding-top: 56.25%;
}

section.sec03 .cntWrap .cntBox {
  max-width: 800px;
  width: 90%;
  border-radius: 20px;
  background-color: rgba(243, 240, 226, 0.9);
  filter: drop-shadow(0 0 29px rgba(156, 156, 156, 0.27));
}

section.sec03 .cntWrap .cntBox .ttl {
  padding: 0 10px;
  border-radius: 20px 20px 0 0;
  background-color: #fbfcf4;
}

section.sec03 .cntWrap .cntBox .ttl img {margin: -20px 0;}
section.sec03 .cntWrap .cntBox .cnt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
}

section.sec03 .cntWrap .cntBox .cnt p {
  line-height: 1.8;
  font-size: 20px;
}

section.sec04 .ttl {padding: calc(3.333vw) 0 20px;}
section.sec04 .cntWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  width: 90%;
}

section.sec04 .cntWrap img,
section.sec04 .cntWrap p {width: 48.125%;}
section.sec04 .cntWrap p {
  line-height: 1.8;
  font-size: 20px;
}

section.sec05 {
  gap: 30px 0;
  padding: 130px 5% 80px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #baeaba 6%, #d3f2b1 28%, #dff1ad 51%);
}

section.sec05 .ttl img {margin-bottom: -40px;}
section.sec05 .cntWrap {filter: drop-shadow(0 0 29px rgba(156, 156, 156, 0.27));}
section.sec05 .cntWrap .cntBox {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 4%;
  max-width: 1000px;
  width: 100%;
  padding: 40px 5%;
  border-radius: 0 0 20px 20px;
  background-color: #fff;
  box-sizing: border-box;
}

section.sec05 .cntWrap .cntBox .txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32.3%;
}

section.sec05 .cntWrap .cntBox .txt img {margin-bottom: 3%;}
section.sec05 .cntWrap .cntBox .txt p {
  line-height: 1.8;
  font-size: 20px;
}

section.sec05 .cntWrap {filter: drop-shadow(0 0 29px rgba(156, 156, 156, 0.27));}
section.sec06 {
  width: 100%;
  padding: 120px 5%;
  background-color: #2a2826;
}

section.sec06 .ttl {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1000px;
  width: 100%;
  margin-bottom: 30px;
}

section.sec06 .ttl p {
  line-height: 1.4;
  color: #c7c1ba;
  font-size: 24px;
  font-weight: bold;
}

section.sec06 .ttl p span {
  font-size: 14px;
  font-weight: inherit;
}

section.sec06 .cntWrap {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  width: 100%;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #bababa;
}

section.sec06 .cntWrap .pic {width: 47%;}
section.sec06 .cntWrap dl {
  width: 50%;
  color: #fff;
}

section.sec06 .cntWrap dl dt {
  font-size: 34px;
  font-weight: bold;
}

section.sec06 .cntWrap dl dd {
  line-height: 1.8;
  font-size: 20px;
  margin: 0;
}

section.sec06 .cv {
  background: none;
  padding: 0;
}

section.sec06 .cntWrap .pic p {
  line-height: 1.2;
  color: #bababa;
  font-size: 36px;
  font-weight: bold;
}

section.sec06 .cntWrap .pic p span {font-size: 20px;}
section.sec06 .cntWrap .pic p i {
  font-size: 26px;
  font-weight: inherit;
}

section.sec07 img {width: 100%;}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: #2a2826;
  position: relative;
}

footer small {
  color: #fff;
  font-size: 10px;
}

@media screen and (min-width: 769px) {
  section.mv {
      width: 100%;
      max-height: 650px;
      height: calc(100vh - 135px);
      padding: 0 5%;
  }

  .sp {display: none !important;}
  .btn {min-width: 340px;}
  .cv > img {max-width: calc(100% - 360px);}
  .cv a.btn span {background: linear-gradient(#000, #000) 0 100% / 0 1px no-repeat;}
  section.sec01 {
    padding: 75px 5% 150px;
    background: url(/cms/img/usr/lp/hochoki_try/sec01_bg02.png) no-repeat bottom center / 100% auto, url(/cms/img/usr/lp/hochoki_try/sec01_bg01.jpg) no-repeat top center / 100% auto;
    position: relative;
    box-sizing: border-box;
  }

  section.sec02 {margin-top: -13vw;}
  section.sec02 .cntWrap {
    gap: 10px 0;
    margin-top: -120px;
    padding: 0 5% 80px;
  }

  section.sec02 .cntWrap p {
    max-width: 1000px;
    width: 100%;
    line-height: 1.2;
    font-size: 14px;
  }
  
  section.sec03 .top {
    height: 640px;
    background: url(/cms/img/usr/lp/hochoki_try/sec03_img01.jpg) no-repeat top center / auto 100%;
  }

  section.sec03 .cntWrap .frame {margin-bottom: 25px;}
  section.sec03 .cntWrap > .ttl img {margin-bottom: -50px;}
  section.sec03 .cntWrap .cntBox .cnt img {
    max-width: 400px;
    width: 54%;
  }
  section.sec03 .cntWrap .cntBox .cnt p {
    max-width: 310px;
    width: 42%;
  }

  section.sec04 {
    padding: 0 5% 30px;
    background: url(/cms/img/usr/lp/hochoki_try/sec04_bg.jpg) no-repeat top center / contain;
    box-sizing: border-box;
  }

  section.sec06 .cntWrap dl dt {
    margin: -10px 0 20px;
    pointer-events: none;
  }

  section.sec06 .cntWrap dl dd {display: block !important;}

}

@media screen and (max-width: 768px) {
  .pc {display: none !important;}
  header img {
    max-width: 100px;
    width: 20%;
  }

  section.campaign {
    gap: 0;
    padding: 0 5% 7.5%;
    box-sizing: border-box;
  }
  
  section.sec02 .cntWrap img {width: 100%;}
  section.sec02 .cntWrap p {
    width: 90%;
    font-size: 14px;
  }
  section.sec03 .cntWrap {padding-bottom: 10%;}
  section.sec03 .cntWrap > .ttl {margin: -30px auto;}
  section.sec03 .cntWrap .cntBox .ttl img {margin: 5px 0;}
  section.sec03 .cntWrap .cntBox .cnt {
    flex-direction: column;
    gap: 15px 0;
    padding: 5% 5% 3.5%;
  }
  
  section.sec03 .cntWrap .cntBox .ttl {padding: 0 3%;}
  section.sec03 .cntWrap .cntBox .cnt p {
    line-height: 1.6;
    font-size: 18px;
    margin: 0;
  }

  section.sec04 .cntWrap {
    flex-direction: column;
    gap: 3.5vw 0;
  }

  section.sec04 .cntWrap img, section.sec04 .cntWrap p {width: 100%;}
  section.sec04 .cntWrap p {font-size: 18px;}
  section.sec05 {
    align-items: flex-start;
    padding: 0 0 10%;
  }

  section.sec05 .cntWrap {width: 95%;}
  section.sec05 .cntWrap .cntBox {
    flex-direction: column;
    margin-top: -2px;
    padding: 0 0 10%;
    border-radius: 0 0 20px 0;
  }

  section.sec05 .cntWrap .cntBox .txt {
    width: 90%;
    margin-bottom: 7.5%;
  }

  section.sec05 .cntWrap .cntBox .graph {width: 100%;}
  section.sec05 .cntWrap .cntBox .graph img {width: 100%;}
  section.sec05 .cntWrap .cntBox .txt img {margin-bottom: 3%;}
  section.sec05 .cntWrap .cntBox .txt p {font-size: 18px;}
  section.sec05 .cntWrap:nth-of-type(3) {margin: 0 0 0 auto;}
  section.sec06 {
    padding: 10% 5%;
    box-sizing: border-box;
  }

  section.sec06 .ttl {margin-bottom: 20px;}
  section.sec06 .ttl p {font-size: 22px;}
  section.sec06 .ttl img {
    max-width: 130px;
    width: calc(100% - 215px);
    margin-top: 10px;
  }

  section.sec06 .cntWrap {flex-direction: column;}
  section.sec06 .cntWrap .pic {
    width: 100%;
    padding-bottom: 30px;
  }

  section.sec06 .cntWrap .pic p {font-size: 32px;}
  section.sec06 .cntWrap .pic p span {font-size: 18px;}
  section.sec06 .cntWrap .pic p i {font-size: 22px;}
  section.sec06 .cntWrap dl {
    width: 100%;
    padding-top: 30px;
    border-top: 1px solid #bababa;
    margin: 0;
  }

  section.sec06 .cntWrap dl dt {
    padding: 0 calc(3.5% + 40px) 0 3.5%;
    font-size: clamp(22px, 6vw, 30px);
    position: relative;
  }

  section.sec06 .cntWrap dl dd {padding: 20px 2.5% 0;}
  section.sec06 .cntWrap dl dt::after {
    content: '+';
    color: #bbb;
    font-size: 46px;
    position: absolute;
    top: 50%;
    right: 3.5%;
    transform: translateY(-50%);
  }

  section.cv01{box-sizing: border-box;}
  section.sec06 .cntWrap dl dt.ex::after {content: '－';}
  .cv {
    flex-direction: column;
    padding: 0 5% 5%;
    box-sizing: border-box;
  }
  body main {
    padding-top: 0;
  }
}

section.mv img.sp {width: 100%;}