@charset "utf-8";

/* #main設定
--------------------------------------------------------------------------*/
#main {position: relative; top: 0; left: 0; background-color: #FFFDF4; clip-path: inset(0);}
#main::before {content: ''; position: fixed; top: 0; left: 75%; z-index: 0; display: block; width: 100%; height: 100dvh; background-color: #F0D34A; transform: skewX(-10deg);}
@media (max-width: 991px) and (min-width: 768px) {
  #main::before {transform: skewX(-8deg);}
}
@media (max-width: 767px) {
  #main::before {left: 80%; transform: skewX(-6deg);}
}

/* #mainVisual設定
--------------------------------------------------------------------------*/
#mainVisual {position: relative; top: 0; left: 0; width: 100%; height: 100vh; max-height: 1050px; background: center right / cover no-repeat;}
#mainVisual h1 {position: absolute; top: 140px; left: 5%; z-index: 2; width: 600px;}
#mainVisual h1 img {width: 100%; filter: drop-shadow(2px 4px 4px #888);}
#mainVisual p {position: absolute; top: 400px; left: 6%; z-index: 2; font-weight: 500; line-height: 1.6;
  text-shadow:
    rgba(255,255,255,0.15) 2px 0px 2px, rgba(255,255,255,0.15) -2px 0px 2px,
    rgba(255,255,255,0.15) 0px -2px 2px, rgba(255,255,255,0.15) -2px 0px 2px,
    rgba(255,255,255,0.15) 2px 2px 2px, rgba(255,255,255,0.15) -2px 2px 2px,
    rgba(255,255,255,0.15) 2px -2px 2px, rgba(255,255,255,0.15) -2px -2px 2px,
    rgba(255,255,255,0.15) 1px 2px 2px, rgba(255,255,255,0.15) -1px 2px 2px,
    rgba(255,255,255,0.15) 1px -2px 2px, rgba(255,255,255,0.15) -1px -2px 2px,
    rgba(255,255,255,0.15) 2px 1px 2px, rgba(255,255,255,0.15) -2px 1px 2px,
    rgba(255,255,255,0.15) 2px -1px 2px, rgba(255,255,255,0.15) -2px -1px 2px,
    rgba(255,255,255,0.15) 1px 1px 2px, rgba(255,255,255,0.15) -1px 1px 2px,
    rgba(255,255,255,0.15) 1px -1px 2px, rgba(255,255,255,0.15) -1px -1px 2px;
}
#mainVisual a {position: absolute; bottom: 15px; right: 15px; z-index: 1; display: block; width: 300px;}
h2.subTitle {position: relative; width: 100%; height: 135px;}
h2.subTitle span {position: relative; display: inline-block; font-size: 70px;}
h2.subTitle span::before {content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); display: block; height: 10px; background: center / cover no-repeat; background-image: url("images/common/bg-subtitle-bk.svg");}
h2.subTitle small {position: relative; bottom: -40px; display: block; font-size: 20px; font-weight: 700;}
h3.textDuble {font-size: 40px; line-height: 1.4; text-align: center;}
h3.textDuble span {position: relative; top: -2px; padding: 0 0.1em; color: #FFF; font-size: 44px; text-shadow: 4px 4px 0px #D1D1D1; -webkit-text-stroke: 1.5px #333;}
@media (max-width: 1229px) and (min-width: 992px) {
  #mainVisual {height: 500px;}
  #mainVisual h1 {top: 125px; left: 5%; width: 500px;}
  #mainVisual p {top: 350px; left: 6%;}
  #mainVisual a {width: 250px;}
  h2.subTitle {height: 110px;}
  h2.subTitle span {font-size: 60px;}
  h2.subTitle span::before {bottom: -15px; height: 8px;}
  h2.subTitle small {bottom: -30px; font-size: 18px;}
  h3.textDuble {font-size: 32px;}
  h3.textDuble span {font-size: 36px;}
}
@media (max-width: 991px) {
  h3.textDuble span {text-shadow: 3px 3px 0px #D1D1D1; -webkit-text-stroke: 1px #333;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #mainVisual {height: 400px;}
  #mainVisual h1 {top: 90px; left: 5%; width: 450px;}
  #mainVisual p {top: 285px; left: 5%;}
  #mainVisual a {bottom: 10px; right: 10px; width: 200px;}
  h2.subTitle {height: 95px;}
  h2.subTitle span {font-size: 50px;}
  h2.subTitle span::before {bottom: -13px; height: 6px;}
  h2.subTitle small {bottom: -26px; font-size: 16px;}
  h3.textDuble {font-size: 22px;}
  h3.textDuble span {font-size: 28px;}
}
@media (min-width: 768px) {
  #mainVisual {background-image: url("images/fp/mv-pc.webp");}
}
@media (max-width: 767px) {
  #mainVisual {height: 500px; background-image: url("images/fp/mv-mp.webp");}
  #mainVisual h1 {top: 70px; left: 15px; width: 300px;}
  #mainVisual p {top: 200px; left: 15px; width: 280px;}
  #mainVisual a {bottom: 5px; right: 5px; width: 150px;}
  h2.subTitle {height: 75px;}
  h2.subTitle span {font-size: 40px;}
  h2.subTitle span::before {bottom: -10px; height: 5px;}
  h2.subTitle small {bottom: -20px; font-size: 14px;}
  h3.textDuble {font-size: 20px;}
  h3.textDuble span {font-size: 26px;}
}
@media (max-width: 767px) and (min-width: 600px) {
  #mainVisual h1 {top: 70px; left: 30px; width: 400px;}
  #mainVisual p {top: 245px; left: 30px; width: 380px;}
}
@media (max-width: 360px) {
  #mainVisual {height: 350px;}
  #mainVisual h1 {left: 10px;}
  #mainVisual p {left: 10px;}
  h3.textDuble {font-size: 18px;}
  h3.textDuble span {font-size: 24px;}
}

/* #sec1設定
--------------------------------------------------------------------------*/
#sec1 {position: relative; margin-top: -8px; background: center / cover repeat; background-image: url("images/fp/mv-bottom.webp");}
#sec1 .container {background-color: #FFF;}
#sec1 .container > ul {position: relative; margin: 0 auto; padding: 15px 0;}
#sec1 .container > ul > li {flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; padding: 15px 0;}
#sec1 .container > ul > li:not(:last-of-type) {border-bottom: solid 1px #CCC;}
#sec1 .container > ul > li span {display: block; line-height: 1.4;}
#sec1 .container > ul > li span.blogCategory {width: 160px;}
#sec1 .container > ul > li span.blogCategory ul li a {position: relative; display: block; width: 100%; padding: 10px 0; background-color: #333; border-radius: 30px; color: #FFF; font-size: 14px; text-align: center;}
#sec1 .container > ul > li span.blogDate {width: 140px; font-size: 14px; text-align: center;}
#sec1 .container > ul > li span.blogTitle {width: calc(100% - 300px);}
#sec1 .container > ul > li span.blogTitle a {font-size: 14px; line-height: 1.4;}
@media (min-width: 1230px) {
  #sec1 {margin-top: -40px; padding: 60px 0;}
  #sec1 .container {width: calc(100% - 30px); max-width: 1800px; border-radius: 40px;}
  #sec1 .container > ul {width: 1000px; padding: 15px 0;}
}
@media (max-width: 1229px) {
  #sec1 {margin-top: -20px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec1 {padding: 50px 0;}
  #sec1 .container {width: calc(100% - 25px); max-width: 1100px; border-radius: 30px;}
  #sec1 .container > ul {width: 900px; padding: 13px 0;}
  #sec1 .container > ul > li {padding: 13px 0;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec1 {margin-top: -15px; padding: 40px 0;}
  #sec1 .container {width: calc(100% - 20px); max-width: 950px; border-radius: 20px;}
  #sec1 .container > ul {width: 700px; padding: 10px 0;}
  #sec1 .container > ul > li {padding: 10px 0;}
}
@media (max-width: 767px) {
  #sec1 {padding: 30px 0;}
  #sec1 .container {width: calc(100% - 15px); padding: 5px 0; border-radius: 15px;}
  #sec1 .container > ul {width: 100%; padding: 0 15px;}
  #sec1 .container > ul > li {padding: 10px 0;}
  #sec1 .container > ul > li span.blogCategory {width: 40%;}
  #sec1 .container > ul > li span.blogCategory ul li a {padding: 7px 0;}
  #sec1 .container > ul > li span.blogDate {width: 60%; padding-left: 15px; text-align: left;}
  #sec1 .container > ul > li span.blogTitle {width: 100%; padding-top: 5px;}
}

/* #sec2設定
--------------------------------------------------------------------------*/
#sec2 {top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 620px; padding-bottom: 100px; clip-path: inset(0);}
#sec2::before, #sec2::after {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: inherit; overflow: hidden;}
#sec2::before {margin-top: -3px; background: bottom center / cover no-repeat; background-image: url("images/fp/sec2-bg.webp"); filter: blur(3px);}
#sec2::after {background-color: rgba(0,0,0,0.5);}
#sec2 .container {padding: 120px 0;}
#sec2 .container h2 {color: #FFF; text-align: center;}
#sec2 .container h2 span::before {width: 285px; background-image: url("images/common/bg-subtitle-wh.svg");}
#sec2 .container p {margin-top: 30px; color: #FFF; font-weight: 500; text-align: center;}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec2 {height: 515px; padding-bottom: 80px;}
  #sec2 .container {padding: 100px 0;}
  #sec2 .container h2 span::before {width: 245px;}
  #sec2 .container p {margin-top: 25px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec2 {height: 430px; padding-bottom: 60px;}
  #sec2 .container {padding: 80px 0;}
  #sec2 .container h2 span::before {width: 205px;}
  #sec2 .container p {margin-top: 20px;}
}
@media (max-width: 767px) {
  #sec2 {height: 390px; padding-bottom: 45px;}
  #sec2 .container {padding: 60px 15px;}
  #sec2 .container h2 {text-align: left;}
  #sec2 .container h2 span::before {width: 165px;}
  #sec2 .container p {margin-top: 15px; text-align: left;}
}
@media (max-width: 360px) {
  #sec2 {height: 410px;}
}

/* #sec3設定
--------------------------------------------------------------------------*/
#sec3 {margin-top: -100px; background: linear-gradient(to right, #D7F3FF 0%, #FFFFFF 50%, #FFF0F8 100%); border-radius: 100px;}
#sec3 .container h2 span::before {width: 280px;}
#sec3 .container .dispFlex {align-items: center;}
#sec3 .container .dispFlex .calcArea2:last-of-type {position: relative; height: 570px;}
#sec3 .container .dispFlex .calcArea2:last-of-type::before {content: ''; position: absolute; top: 0; left: 0; z-index: 2; display: block; width: 570px; height: 570px; background: center / cover no-repeat; background-image: url("images/fp/sec3-bg-570x570.svg");}
#sec3 .container .dispFlex .calcArea2:last-of-type img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; margin-left: -8px; border-radius: 50%;}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec3 {margin-top: -80px; border-radius: 80px;}
  #sec3 .container h2 span::before {width: 230px;}
  #sec3 .container .dispFlex .calcArea2:last-of-type {height: 470px;}
  #sec3 .container .dispFlex .calcArea2:last-of-type::before {width: 470px; height: 470px;}
  #sec3 .container .dispFlex .calcArea2:last-of-type img {width: 410px; margin-left: -1px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec3 {margin-top: -60px; border-radius: 60px;}
  #sec3 .container h2 span::before {width: 190px;}
  #sec3 .container .dispFlex .calcArea2:last-of-type {height: 365px;}
  #sec3 .container .dispFlex .calcArea2:last-of-type::before {width: 365px; height: 365px;}
  #sec3 .container .dispFlex .calcArea2:last-of-type img {width: 320px; margin-left: -1px;}
}
@media (min-width: 768px) {
  #sec3 .container .dispFlex:last-of-type {flex-direction: row-reverse;}
}
@media (max-width: 767px) {
  #sec3 {margin-top: -45px; background: linear-gradient(to top, #D7F3FF 0%, #FFFFFF 50%, #FFF0F8 100%); border-radius: 100px; border-radius: 45px;}
  #sec3 .container h2 span::before {width: 155px;}
  #sec3 .container .dispFlex {flex-direction: column-reverse;}
  #sec3 .container .dispFlex .calcArea2:last-of-type {width: 300px; height: 300px; margin: 30px auto 15px;}
  #sec3 .container .dispFlex .calcArea2:last-of-type::before {width: inherit; height: inherit;}
  #sec3 .container .dispFlex .calcArea2:last-of-type img {width: 260px; margin-left: 0;}
}
@media (max-width: 360px) {
  #sec3 .container .dispFlex .calcArea2:last-of-type {width: 240px; height: 240px;}
  #sec3 .container .dispFlex .calcArea2:last-of-type img {width: 210px;}
}

/* #sec4設定
--------------------------------------------------------------------------*/
#sec4 .container h2 span::before {width: 280px;}
#sec4 .container .dispFlex {position: relative; gap: 60px; margin-top: 30px; padding: 30px; background-color: rgba(255,255,255,0.85); border-radius: 40px;}
#sec4 .container .dispFlex::before {content: ''; position: absolute; top: 0; left: 0; display: block; width: 260px; height: 260px; background: center / cover no-repeat; background-image: url("images/fp/sec4-bg-330x330.webp");}
#sec4 .container .dispFlex .calcArea2 {position: relative;}
#sec4 .container .dispFlex .calcArea2:last-of-type img {width: 100%; border-radius: 20px;}
#sec4 .container .dispFlex .calcArea2:last-of-type a {position: absolute; top: auto; bottom: 0; left: -600px;}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec4 .container h2 span::before {width: 230px;}
  #sec4 .container .dispFlex {gap: 50px; margin-top: 25px; padding: 25px; border-radius: 30px;}
  #sec4 .container .dispFlex::before {width: 220px; height: 220px;}
  #sec4 .container .dispFlex .calcArea2:last-of-type img {border-radius: 18px;}
  #sec4 .container .dispFlex .calcArea2:last-of-type a {left: -485px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec4 .container h2 span::before {width: 190px;}
  #sec4 .container .dispFlex {gap: 20px; margin-top: 20px; padding: 20px; border-radius: 20px;}
  #sec4 .container .dispFlex::before {width: 180px; height: 180px;}
  #sec4 .container .dispFlex .calcArea2:last-of-type img {border-radius: 16px;}
  #sec4 .container .dispFlex .calcArea2:last-of-type a {left: -365px;}
}
@media (min-width: 768px) {
  #sec4 .container h3 {text-align: left;}
}
@media (max-width: 767px) {
  #sec4 .container h2 span::before {width: 155px;}
  #sec4 .container .dispFlex {flex-direction: column; gap: 15px; margin-top: 15px; padding: 30px 15px 15px; border-radius: 15px;}
  #sec4 .container .dispFlex::before {width: 150px; height: 150px;}
  #sec4 .container .dispFlex .calcArea2:last-of-type img {border-radius: 15px;}
  #sec4 .container .dispFlex .calcArea2:last-of-type a {position: relative; left: auto;}
}

/* #sec5設定
--------------------------------------------------------------------------*/
#sec5 {top: 0; left: 50%; transform: translateX(-50%); margin-bottom: 120px; background-color: rgba(255,255,255,0.85); border-radius: 40px;}
#sec5 .container h2 span::before {width: 400px;}
#sec5 .container .dispFlex .calcArea2 {flex-direction: column; gap: 0; margin-top: 60px;}
#sec5 .container .dispFlex .calcArea2 p {flex-grow: 1;}
#sec5 .container .dispFlex .calcArea2 img {margin-top: 30px; border-radius: 20px;}
@media (min-width: 1230px) {
  #sec5 {width: calc(100% - 30px); max-width: 1800px;}
  #sec5 .container .dispFlex .calcArea2 h3 {font-size: 38px;}
  #sec5 .container .dispFlex .calcArea2 h3 span {font-size: 42px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec5 {width: calc(100% - 25px); max-width: 1100px; min-width: 990px; margin-bottom: 100px; border-radius: 30px;}
  #sec5 .container h2 span::before {width: 345px;}
  #sec5 .container .dispFlex .calcArea2 {margin-top: 50px;}
  #sec5 .container .dispFlex .calcArea2 h3 {font-size: 30px;}
  #sec5 .container .dispFlex .calcArea2 h3 span {font-size: 34px;}
  #sec5 .container .dispFlex .calcArea2 img {margin-top: 25px; border-radius: 18px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec5 {width: calc(100% - 20px); max-width: 950px; min-width: 760px; margin-bottom: 80px; border-radius: 20px;}
  #sec5 .container h2 span::before {width: 290px;}
  #sec5 .container .dispFlex .calcArea2 {margin-top: 40px;}
  #sec5 .container .dispFlex .calcArea2 h3 {font-size: 20px;}
  #sec5 .container .dispFlex .calcArea2 h3 span {font-size: 26px;}
  #sec5 .container .dispFlex .calcArea2 img {margin-top: 20px; border-radius: 16px;}
}
@media (min-width: 768px) {
  #sec5 .container .dispFlex .calcArea2 h3 {text-align: left;}
}
@media (max-width: 767px) {
  #sec5 {width: calc(100% - 30px); max-width: 420px; margin-bottom: 60px; padding: 60px 0; border-radius: 15px;}
  #sec5 .container h2 span::before {width: 230px;}
  #sec5 .container .dispFlex {flex-direction: column;}
  #sec5 .container .dispFlex .calcArea2 {margin-top: 30px;}
  #sec5 .container .dispFlex .calcArea2 img {margin-top: 15px; border-radius: 15px;}
}

/* #sec6設定
--------------------------------------------------------------------------*/
#sec6 {clip-path: inset(0);}
#sec6::before, #sec6::after {content: ''; position: fixed; top: 0; left: 0; display: block; width: 100%; overflow: hidden;}
#sec6::before {height: 100dvh; background: center / cover no-repeat; filter: blur(3px);}
#sec6::after {height: 100dvh; background-color: rgba(0,0,0,0.5);}
#sec6 .container .dispFlex .calcArea2:first-of-type h2 span::before {width: 290px; background-image: url("images/common/bg-subtitle-wh.svg");}
#sec6 .container .dispFlex .calcArea2:first-of-type h3 {margin-top: 60px;}
#sec6 .container .dispFlex .calcArea2:first-of-type h3 span {display: inline-block; font-weight: 700;}
#sec6 .container .dispFlex .calcArea2:first-of-type h3 span:first-of-type {padding: 15px 45px 15px 30px; border: solid 3px #FFF; border-left: none; border-radius: 0 60px 60px 0; font-size: 32px;}
#sec6 .container .dispFlex .calcArea2:first-of-type h3 span:last-of-type {margin-top: 15px; padding: 15px 60px 15px 30px; border: solid 3px #FFF; border-left: none; border-radius: 0 60px 60px 0; font-size: 44px;}
#sec6 .container .dispFlex .calcArea2:first-of-type p {font-size: 20px;}
#sec6 .container .dispFlex .calcArea2:last-of-type {position: relative; text-align: center;}
#sec6 .container .dispFlex .calcArea2:last-of-type > img {width: 100%; border: solid 5px #FFF; border-radius: 20px;}
#sec6 .container .dispFlex .calcArea2:last-of-type a {position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); display: block; width: 300px;}
@media (min-width: 1230px) {
  #sec6 .container .dispFlex {gap: 90px;}
  #sec6 .container .dispFlex .calcArea2:last-of-type > img {width: 500px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec6 .container .dispFlex .calcArea2:first-of-type h2 span::before {width: 245px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type h3 {margin-top: 50px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type h3 span:first-of-type {padding: 13px 39px 13px 26px; font-size: 30px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type h3 span:last-of-type {margin-top: 13px; padding: 13px 52px 13px 26px; font-size: 40px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type p {font-size: 18px;}
  #sec6 .container .dispFlex .calcArea2:last-of-type a {width: 250px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec6 .container .dispFlex .calcArea2:first-of-type h2 span::before {width: 200px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type h3 {margin-top: 40px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type h3 span:first-of-type {padding: 10px 30px 10px 20px; font-size: 24px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type h3 span:last-of-type {margin-top: 10px; padding: 10px 40px 10px 20px; font-size: 36px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type p {font-size: 16px;}
  #sec6 .container .dispFlex .calcArea2:last-of-type a {bottom: 10px; width: 200px;}
}
@media (min-width: 768px) {
  #sec6::before {background-image: url("images/fp/sec6-bg-pc.webp");}
}
@media (max-width: 767px) {
  #sec6::before {background-image: url("images/fp/sec6-bg-mp.webp");}
  #sec6 .container .dispFlex {flex-direction: column; gap: 30px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type h2 span::before {width: 165px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type h3 {margin: 30px 0 0 -15px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type h3 span:first-of-type {padding: 8px 24px 8px 16px; font-size: 18px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type h3 span:last-of-type {margin-top: 8px; padding: 8px 32px 8px 16px; font-size: 26px;}
  #sec6 .container .dispFlex .calcArea2:first-of-type p {font-size: 16px;}
  #sec6 .container .dispFlex .calcArea2:last-of-type a {bottom: -30px; width: 200px;}
  #sec6 .container .dispFlex .calcArea2:last-of-type > img {width: 290px;}
}

/* #sec7設定
--------------------------------------------------------------------------*/
#sec7 {background-color: #FFF;}
#sec7 .container h2 span::before {width: 190px;}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec7 .container h2 span::before {width: 160px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec7 .container h2 span::before {width: 135px;}
}
@media (max-width: 767px) {
  #sec7 .container h2 span::before {width: 105px;}
}