@charset "UTF-8";
/*********************************** 全体設定 ***********************************/
body {
   font-family: "Noto Sans JP", sans-serif;
   font-size: 24px;
   line-height: 1.5;
   color:#3F3F3F;
   letter-spacing: .05em;
   background-color: #FEFFE3;
}
a {
   transition:opacity .3s;
}
a:hover{
   opacity: 0.7;
}
img {
   width: 100%;
}
.container {
   width:750px;
   margin:0 auto;
   background-color: #fff;
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
}
.innerWrap {
   padding:0 64px;
}


/*********************************** セクション ***********************************/
header {
   z-index: 100;
}
header h1  {
   width: 155px;
   height: 106px;
   margin: 0 auto;
   padding-top: 35px;
}
main {
   flex: 1;
}
main .fv {
   background-image: url(img/bg_fv.jpg);
   background-size: cover;
   background-position: center top;
   margin-top: -106px;
   padding-top: 173px;
   padding-bottom: 277px;
}
main .fv > p:nth-child(1) {
   width: 713px;
   margin: 0 auto 23px;
}
main .fv > p:nth-child(2) {
   width: 660px;
   margin: 0 auto 15px 0;
}
main .fv > p:nth-child(3) {
   width: 460px;
   margin: 0 auto 0 0;
}
main .what .innerWrap h2 {
   width: 558px;
   margin: 0 auto 34px;
}
main .what .innerWrap > div > p:nth-child(1) {
   margin-bottom: 14px;
}
main .what .innerWrap > div > p:nth-child(2) {
   margin-bottom: 31px;
}
main .what .innerWrap > div > ul {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 28px;
}
main .what .innerWrap > div > ul li {
   display: block;
   width: calc((100% - 32px) / 3);
}
main .CTA {
   padding: 54px 0 30px;
}
main .recommend {
   padding: 39px 0 100px;
   background-image: url(img/bg_recommend.png);
   background-size: contain;
   background-position: center bottom;
   background-repeat: no-repeat;
}
main .recommend .innerWrap h2 {
   width: 507px;
   margin: 0 auto 320px;
}
main .recommend .innerWrap > div > p {
   width: 541px;
}
main .recommend .innerWrap > div > p:nth-child(1),
main .recommend .innerWrap > div > p:nth-child(3) {
   margin:0 auto 30px 0;
}
main .recommend .innerWrap > div > p:nth-child(2),
main .recommend .innerWrap > div > p:nth-child(4) {
   margin:0 0 30px auto;
}
main .voice {
   padding: 56px 0 83px;
   background-image: url(img/bg_voice.png);
   background-size: cover;
}
main .voice .innerWrap h2 {
   width: 283px;
   margin: 0 auto 39px;
}
main .voice .innerWrap > div > p {
   margin-bottom: 50px;
}
main .voice .innerWrap > div > p:last-child {
   margin-bottom: 0;
}
main .reason {
   padding: 98px 0 120px;
   background-image: url(img/bg_reason.png);
   background-size: 100% auto;
   background-position: center top;
   background-repeat: no-repeat;
}
main .reason .innerWrap h2 {
   width: 385px;
   margin: 0 auto 48px;
}
main .reason .innerWrap > ul li {
   display: block;
   padding: 217px 50px 0 40px;
   background-repeat: no-repeat;
   background-size: 100% auto;
   background-position: center top;
   font-weight: 500;
}
main .reason .innerWrap > ul li:nth-child(1) {
   background-image: url(img/bg_reason01.png);
   height: 663px;
}
main .reason .innerWrap > ul li:nth-child(2) {
   background-image: url(img/bg_reason02.png);
   height: 716px;
   padding-top: 270px;
}
main .reason .innerWrap > ul li:nth-child(3) {
   background-image: url(img/bg_reason03.png);
   height: 712px;
   padding-top: 268px;
}
main .reason .innerWrap > ul li h3 {
   font-size: 40px;
   text-align: center;
   z-index: 0;
   margin-bottom: 16px;
}
main .reason .innerWrap > ul li h3 span {
   display: inline-block;
   position: relative;
   z-index: 1;
   padding:0 8px;
}
main .reason .innerWrap > ul li h3 span::after {
   content: "";
   background-color: #F8FF39;
   width: 100%;
   height: 10px;
   position: absolute;
   bottom: 4px;
   left: 0;
   z-index: -1;
}
main .flow {
   padding: 56px 0 0;
}
main .flow .innerWrap {
   padding: 0;
}
main .flow .innerWrap h2 {
   width: 392px;
   margin: 0 auto 53px;
}
main .flow .innerWrap ul li {
   margin-bottom: 48px;
}
main .flow .innerWrap ul li:nth-child(1),
main .flow .innerWrap ul li:nth-child(2) {
   background-image: url(img/bg_flow.png);
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: center bottom;
   padding-bottom: 100px;
}
main .flow .innerWrap ul li > p:first-child {
   width: 300px;
   margin: 0 auto 16px;
}
main .flow .innerWrap ul li h3 {
   text-align: center;
   font-size: 32px;
   font-weight: 500;
   color: #DB6F00;
   margin-bottom: 31px;
}
main .flow .innerWrap ul li > p:last-child {
   width: 587px;
   margin: 0 auto;
}
main .faq {
   padding: 76px 0 86px;
}
main .faq .innerWrap h2 {
   width: 340px;
   margin: 0 auto 65px;
}
footer {
   background-color: #F4810C;
   padding: 52px 0 24px;
   text-align: center;
   color: #fff;
}
footer p:first-child {
   width: 155px;
   margin: 0 auto 35px;
}
footer p:first-child img {
   filter: grayscale(100%) brightness(200%);
}
footer ul {
   display: flex;
   justify-content: center;
   font-size: 16px;
   margin-bottom: 46px;
}
footer ul li {
   padding: 0 32px;
}
footer ul li:first-child {
   border-right: 1px solid #fff;
}
footer p:last-child {
   font-size: 14px;
}

/*********************************** アコーディオン ***********************************/
.faq {
   font-weight: 500;
   background-color: #FFFFF0;
}
.faq .innerWrap > div > div {
   border-bottom: 1px solid #F4810C;
   margin-bottom: 25px;
}
.toggle {
	display: none;
}
.Label,
.content p {		/*タイトル*/
   font-size: 32px;
   padding: 0 10px;
   display: flex;
   gap:10px;
   align-items: flex-start;
}
.Label {
   background-image: url(img/circle.svg);
   background-size: 39px 39px;
   background-repeat: no-repeat;
   background-position: top 10px right 7px;
}
.Label > span:nth-child(1),
.content p > span:nth-child(1) {
	width: 53px;
   height:53px;
   border-radius: 27px;
	display: inline-block;
   color: #fff;
   background-color: #F4810C;
   text-align: center;
}
.content p > span:nth-child(1) {
   color: #F4810C;
   background-color: #fff;
   border: 2px solid #F4810C;
}
.Label > span:nth-child(2), 
.content p > span:nth-child(2) {
   color: #F4810C;
   width: 474px;
}
.content p > span:nth-child(2) {
   font-size: 20px;
   color: #3F3F3F;
}
.Label::before{
	content:"";
	width: 2px;
	height: 18px;
   background-color: #000;
	position: absolute;
	top:21px;
	right: 26px;
	transition: all .3s;
}
.Label::after{
	content:"";
	width: 18px;
	height: 2px;
   background-color: #000;
	position: absolute;
	top:29px;
	right: 18px;
	transition: all .3s;
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all .3s;
}
.content {		/*本文*/
	height: 0;
	margin-bottom:25px;
	padding:0 20px 0 0;
	overflow: hidden;
}
.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding:20px 20px 20px 0;
	transition: all .3s;
}
.toggle:checked + .Label::before {
	transform: rotate(-90deg) !important;
}
.toggle:checked + .Label::after {
	visibility: hidden;
}

@media screen and (max-width:750px) {
   body {
      font-size: 3.2vw;
   }
   .container {
      width: 100vw;
   }
   .innerWrap {
      padding:0 8.53vw;
   }
   header h1 {
      width: 20.67vw;
      height: 14.13vw;
      padding-top: 4.67vw;
   }
   main .fv {
      margin-top: -14.13vw;
      padding-top: 23.07vw;
      padding-bottom: 36.93vw;
   }
   main .fv > p:nth-child(1) {
      width: 95.07vw;
      margin: 0 auto 3.07vw;
   }
   main .fv > p:nth-child(2) {
      width: 88vw;
      margin: 0 auto 2vw 0;
   }
   main .fv > p:nth-child(3) {
      width: 61.33vw;
      margin: 0 auto 0 0;
   }
   main .what .innerWrap h2 {
      width: 74.4vw;
      margin: 0 auto 4.53vw;
   }
   main .what .innerWrap > div > p:nth-child(1) {
      margin-bottom: 1.87vw;
   }
   main .what .innerWrap > div > p:nth-child(2) {
      margin-bottom: 4.13vw;
   }
   main .what .innerWrap > div > ul {
      gap: 2.13vw;
      margin-bottom: 3.73vw;
   }
   main .what .innerWrap > div > ul li {
      display: block;
      width: calc((100% - 4.27vw) / 3);
   }
   main .CTA {
      padding: 7.2vw 0 4vw;
   }
   main .recommend {
      padding: 5.2vw 0 13.33vw;
   }
   main .recommend .innerWrap h2 {
      width: 67.6vw;
      margin: 0 auto 42.67vw;
   }
   main .recommend .innerWrap > div > p {
      width: 72.13vw;
   }
   main .recommend .innerWrap > div > p:nth-child(1),
   main .recommend .innerWrap > div > p:nth-child(3) {
      margin: 0 auto 4vw 0;
   }
   main .recommend .innerWrap > div > p:nth-child(2),
   main .recommend .innerWrap > div > p:nth-child(4) {
      margin: 0 0 4vw auto;
   }
   main .voice {
      padding: 7.47vw 0 11.07vw;
   }
   main .voice .innerWrap h2 {
      width: 37.73vw;
      margin: 0 auto 5.2vw;
   }
   main .voice .innerWrap > div > p {
      margin-bottom: 6.67vw;
   }
   main .reason {
      padding: 13.07vw 0 16vw;
   }
   main .reason .innerWrap h2 {
      width: 51.33vw;
      margin: 0 auto 6.4vw;
   }
   main .reason .innerWrap > ul li {
      padding: 28.93vw 6.67vw 0 5.33vw;
   }
   main .reason .innerWrap > ul li:nth-child(1) {
      height: 88.4vw;
   }
   main .reason .innerWrap > ul li:nth-child(2) {
      height: 95.47vw;
      padding-top: 36vw;
   }
   main .reason .innerWrap > ul li:nth-child(3) {
      height: 94.93vw;
      padding-top: 35.73vw;
   }
   main .reason .innerWrap > ul li h3 {
      font-size: 5.33vw;
      margin-bottom: 2.13vw;
   }
   main .reason .innerWrap > ul li h3 span::after {
      height: 1.33vw;
      bottom: 0.53vw;
   }
   main .flow {
      padding: 7.47vw 0 0;
   }
   main .flow .innerWrap h2 {
      width: 52.27vw;
      margin: 0 auto 7.07vw;
   }
   main .flow .innerWrap ul li {
      margin-bottom: 6.4vw;
   }
   main .flow .innerWrap ul li > p:first-child {
      width: 40vw;
      margin: 0 auto 2.13vw;
   }
   main .flow .innerWrap ul li h3 {
      font-size: 4.27vw;
      margin-bottom: 4.13vw;
   }
   main .flow .innerWrap ul li > p:last-child {
      width: 78.27vw;
      margin: 0 auto;
   }
   main .faq {
      padding: 10.13vw 0 11.47vw;
   }
   main .faq .innerWrap h2 {
      width: 45.33vw;
      margin: 0 auto 8.67vw;
   }
   footer {
      padding: 6.93vw 0 3.2vw;
   }
   footer p:first-child {
      width: 20.67vw;
      margin: 0 auto 4.67vw;
   }
   footer ul {
      font-size: 2.13vw;
      margin-bottom: 6.13vw;
   }
   footer ul li {
      padding: 0 4.27vw;
   }
   .Label,
   .content p {
      font-size: 4.27vw;
      padding: 0 1.33vw;
      gap: 1.33vw;
   }
   .Label {
      background-size: 5.2vw 5.2vw;
      background-position: top 1.33vw right 0.93vw;
   }
   .Label > span:nth-child(1),
   .content p > span:nth-child(1) {
      width: 7.07vw;
      height: 7.07vw;
      border-radius: 3.6vw;
   }
   .Label > span:nth-child(2), 
   .content p > span:nth-child(2) {
      width: 63.2vw;
   }
   .content p > span:nth-child(2) {
      font-size: 2.67vw;
   }
   .Label::before {
      width: 0.27vw;
      height: 2.4vw;
      top: 2.8vw;
      right: 3.47vw;
   }
   .Label::after {
      width: 2.4vw;
      height: 0.27vw;
      top: 3.87vw;
      right: 2.4vw;
   }
   .content {
      margin-bottom: 3.33vw;
      padding: 0 2.67vw 0 0;
   }
   .toggle:checked + .Label + .content {
      padding: 2.67vw 2.67vw 2.67vw 0;
   }
}




/*********************************** サンクスページ ***********************************/
.thx {
   padding:100px 0;
   font-weight: 500;
}
.thx .innerWrap > * {
   margin-bottom: 50px;
}
.thx .innerWrap h2 {
   font-size: 40px;
}
.thx .innerWrap p.alert {
   color: #F4810C;
   text-indent: -1em;
   padding-left: 1em;
}
.thx .innerWrap p.line {
   text-align: center;
}

@media screen and (max-width:750px) {
   .thx {
      padding: 13.33vw 0;
   }
   .thx .innerWrap > * {
      margin-bottom: 6.67vw;
   }
   .thx .innerWrap h2 {
      font-size: 5.33vw;
   }
}