@charset "utf-8";

/* #mainVisual設定
--------------------------------------------------------------------------*/
#mainVisual {height: 900px; margin-top: -100px;}
#mainVisual::before {content: ''; position: absolute; bottom: -30px; left: 0; display: block; width: 100%; max-width: 1920px; height: 300px; background: linear-gradient(to right, #348E4B, #6BBC53);}
#mainVisual h1 {top: 150px;}
#mainVisual h1 picture {display: block; width: 860px;}
#mainVisual h1 picture img {width: 100%;}
#slideBox {position: absolute; top: 400px; z-index: 10; width: 100%;}
#slideBox .swiper-wrapper {transition-timing-function: linear;}
#slideBox .swiper-wrapper li {width: 400px; height: 500px;}
#slideBox .swiper-wrapper li figure {position: relative; width: 100%; height: 100%;}
#slideBox .swiper-wrapper li figure img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
@media (max-width: 1399px) and (min-width: 1230px) {
  #mainVisual {height: 750px;}
  #mainVisual::before {height: 225px;}
  #mainVisual h1 picture {width: 688px;}
  #slideBox {top: 350px;}
  #slideBox .swiper-wrapper li {width: 320px; height: 400px;}
}
@media (max-width: 1229px) {
  #mainVisual {margin-top: -80px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #mainVisual {height: 575px;}
  #mainVisual::before {height: 175px;}
  #mainVisual h1 {top: 120px;}
  #mainVisual h1 picture {width: 516px;}
  #slideBox {top: 275px;}
  #slideBox .swiper-wrapper li {width: 240px; height: 300px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #mainVisual {height: 475px;}
  #mainVisual::before {height: 150px;}
  #mainVisual h1 {top: 110px;}
  #mainVisual h1 picture {width: 430px;}
  #slideBox {top: 225px;}
  #slideBox .swiper-wrapper li {width: 200px; height: 250px;}
}
@media (max-width: 767px) {
  #mainVisual {height: 440px;}
  #mainVisual::before {height: 130px;}
  #mainVisual h1 {top: 100px;}
  #mainVisual h1 picture {width: 340px;}
  #slideBox {top: 215px;}
  #slideBox .swiper-wrapper li {width: 180px; height: 225px;}
}
@media (max-width: 360px) {
  #mainVisual {height: 420px;}
  #mainVisual h1 picture {width: 275px;}
  #slideBox {top: 195px;}
}

/* 共通設定設定
--------------------------------------------------------------------------*/
.secArea {padding: 60px 0 120px;}
.newsArea article a .textArea h3 {color: #FFF;}
.newsArea article a .textArea ul li.blogDate time {color: #FFF;}
@media (max-width: 1229px) and (min-width: 992px) {
  .secArea {padding: 50px 0 100px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  .secArea {padding: 40px 0 80px;}
}
@media (min-width: 768px) {
  .newsArea article a .textArea h3 {border-bottom: solid 1px #FFF;}
}
@media (max-width: 767px) {
  .secArea {padding: 30px 0 60px;}
  .newsArea article {border-bottom: solid 1px #FFF;}
}

/* #sec1設定
--------------------------------------------------------------------------*/
#sec1 .container > ul {position: relative; padding: 15px 0 30px;}
#sec1 .container > ul > li {flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; padding: 15px 0; border-bottom: solid 1px #FFF;}
#sec1 .container > ul > li span {display: block; line-height: 1.4;}
#sec1 .container > ul > li span.blogCategory {width: 200px;}
#sec1 .container > ul > li span.blogCategory ul li a {position: relative; display: block; width: 100%; padding: 10px 0; background-color: #E7654B; border-radius: 10px; color: #FFF; font-size: 14px; text-align: center;}
#sec1 .container > ul > li span.blogDate {width: 200px; color: #FFF; font-size: 14px; text-align: center;}
#sec1 .container > ul > li span.blogTitle {width: calc(100% - 400px);}
#sec1 .container > ul > li span.blogTitle a {color: #FFF; font-size: 14px; line-height: 1.4;}
@media (max-width: 1229px) {
  #sec1 .container > ul > li span.blogCategory {width: 150px;}
  #sec1 .container > ul > li span.blogDate {width: 150px;}
  #sec1 .container > ul > li span.blogTitle {width: calc(100% - 300px);}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec1 .container > ul {padding: 10px 0 25px;}
  #sec1 .container > ul > li span.blogCategory ul li a {padding: 8px 0;}
}
@media (max-width: 991px) {
  #sec1 .container > ul > li span.blogCategory ul li a {padding: 6px 0;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec1 .container > ul {padding: 5px 0 20px;}
}
@media (max-width: 767px) {
  #sec1 .container > ul {padding: 0 0 15px;}
  #sec1 .container > ul > li span.blogCategory {width: 35%;}
  #sec1 .container > ul > li span.blogDate {width: 65%; padding-left: 15px; text-align: left;}
  #sec1 .container > ul > li span.blogTitle {width: 100%; padding-top: 8px;}
}

/* #sec2設定
--------------------------------------------------------------------------*/
#sec2 .container h2 {margin-bottom: 30px; line-height: 1.6; text-align: center;}
@media (min-width: 1230px) {
  #sec2 .container p {width: 990px; margin: 0 auto; font-size: 18px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec2 .container h2 {margin-bottom: 25px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec2 .container h2 {margin-bottom: 20px;}
}
@media (max-width: 767px) {
  #sec2 .container h2 {margin-bottom: 15px; font-size: 22px;}
}
@media (max-width: 360px) {
  #sec2 .container h2 {font-size: 18px;}
}

/* .sec3-4設定（sec3・sec4 共通設定）
--------------------------------------------------------------------------*/
.sec3-4 .container {max-width: 1920px;}
.sec3-4 .container > .textArea {width: 100%; padding: 0;}
.sec3-4 .container .textArea .Inner {margin: 0 auto;}
.sec3-4 .container .textArea .Inner h2 {line-height: 1.2;}
.sec3-4 .container picture {width: 100%; height: 600px; border-radius: 0 300px 300px 0; overflow: hidden;}
@media (min-width: 1230px) {
  .sec3-4 .container .textArea .Inner {width: 575px;}
}
@media (max-width: 1229px) {
  .sec3-4 .container .textArea .Inner p .pcView {display: none;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  .sec3-4 .container .textArea .Inner {width: 450px;}
  .sec3-4 .container picture {height: 500px; border-radius: 0 250px 250px 0;}
}
@media (max-width: 991px) and (min-width: 768px) {
  .sec3-4 .container .textArea .Inner {width: 350px;}
  .sec3-4 .container picture {height: 400px; border-radius: 0 200px 200px 0;}
}
@media (min-width: 768px) {
  .sec3-4 .container {flex-direction: row-reverse; justify-content: flex-end; align-items: center;}
  .sec3-4 .container > .textArea {width: 50%;}
  .sec3-4 .container .textArea .Inner h2 span {text-align: left;}
  .sec3-4 .container picture {width: 50%;}
}
@media (max-width: 767px) {
  .sec3-4 .container {display: block; padding: 0;}
  .sec3-4 .container > .textArea {padding: 0 15px;}
  .sec3-4 .container .textArea .Inner {width: 100%; max-width: 420px; margin: 0 auto;}
  .sec3-4 .container .textArea .Inner h2 {margin-bottom: 215px;}
  .sec3-4 .container picture {position: absolute; top: 125px; left: 0; width: calc(100% - 15px); height: 200px; border-radius: 0 100px 100px 0;}
}

/* #sec4設定
--------------------------------------------------------------------------*/
#sec4 {padding: 0 0 240px;}
#sec4 .container picture {border-radius: 300px 0 0 300px;}
@media (min-width: 1230px) {
  #sec4 .container .textArea .Inner h2 {font-size: 45px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec4 {padding-bottom: 200px;}
  #sec4 .container .textArea .Inner h2 {font-size: 36px;}
  #sec4 .container picture {border-radius: 250px 0 0 250px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec4 {padding-bottom: 160px;}
  #sec4 .container .textArea .Inner h2 {font-size: 27px;}
  #sec4 .container picture {border-radius: 200px 0 0 200px;}
}
@media (min-width: 768px) {
  #sec4 .container {flex-direction: row;}
}
@media (max-width: 767px) {
  #sec4 {padding-bottom: 120px;}
  #sec4 .container picture {left: auto; right: 0; border-radius: 100px 0 0 100px;}
}
@media (max-width: 360px) {
  #sec4 .container .textArea .Inner h2 {font-size: 24px;}
}

/* #sec5設定
--------------------------------------------------------------------------*/
#sec5 {height: 650px; margin-top: -120px; padding: 0 15px; border-radius: 120px; overflow: hidden;}
#sec5::before {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: inherit; background: center / cover no-repeat;}
#sec5::after {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: inherit; background-color: rgba(0,0,0,0.5);}
#sec5 .container {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#sec5 .container p {padding: 0; color: #FFF;}
@media (min-width: 1230px) {
  #sec5 .container {width: 900px; margin-top: -30px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec5 {height: 550px; margin-top: -100px; border-radius: 100px;}
  #sec5 .container {margin-top: -25px; padding: 0 60px;}
}
@media (max-width: 991px) {
  #sec5 {height: 450px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec5 {margin-top: -80px; border-radius: 80px;}
  #sec5 .container {margin-top: -20px; padding: 0 50px;}
}
@media (min-width: 768px) {
  #sec5::before {background-image: url('images/fp/sec5-pc-01.webp');}
}
@media (max-width: 767px) {
  #sec5 {margin-top: -60px; border-radius: 60px;}
  #sec5::before {background-image: url('images/fp/sec5-mp-01.webp');}
  #sec5 .container {margin-top: -15px; padding: 0 15px;}
}

/* #sec6設定
--------------------------------------------------------------------------*/
#sec6 {background-color: #F7F7F7;}
#sec6 .container h2.secTitleB::before {opacity: 0.03;}
#sec6 .container h2.secTitle span {color: #333;}
#sec6 .container > .dispFlex {align-items: flex-start; padding-top: 30px;}
#sec6 .container > .dispFlex:not(:first-of-type) {margin-top: 30px;}
#sec6 .container .dispFlex .textArea {width: calc(55% - 15px); padding: 0;}
#sec6 .container .dispFlex .textArea h3 {padding: 0 15px 15px; font-size: 24px; font-weight: 500; line-height: 1.4; text-align: center;}
#sec6 .container .dispFlex .textArea h3 span {font-size: 80%;}
#sec6 .container .dispFlex .textArea dl {flex-wrap: wrap; gap: 0; border-top: solid 1px #CCC;}
#sec6 .container .dispFlex .textArea dl dt, #sec6 .container .dispFlex .textArea dl dd {display: flex; align-items: center; padding: 15px; border-bottom: solid 1px #CCC; line-height: 1.4;}
#sec6 .container .dispFlex .textArea dl dt {justify-content: center; width: 18%;}
#sec6 .container .dispFlex .textArea dl dd {width: 82%;}
#sec6 .container .dispFlex .textArea dl dd a small img {width: 12px; height: 12px;}
#sec6 .container .dispFlex picture {width: calc(45% - 15px); border-radius: 15px; overflow: hidden;}
#sec6 .container .dispFlex picture img {width: 100%;}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec6 .container > .dispFlex {padding-top: 25px;}
  #sec6 .container > .dispFlex:not(:first-of-type) {margin-top: 25px;}
  #sec6 .container .dispFlex .textArea {width: calc(60% - 13px);}
  #sec6 .container .dispFlex .textArea h3 {font-size: 22px;}
  #sec6 .container .dispFlex picture {width: calc(40% - 13px);}
}
@media (max-width: 991px) {
  #sec6 .container .dispFlex .textArea h3 {padding-bottom: 10px; font-size: 20px;}
  #sec6 .container .dispFlex .textArea dl {display: block;}
  #sec6 .container .dispFlex .textArea dl dt {width: 100%; padding: 10px 0 0; border: none; font-weight: 500;}
  #sec6 .container .dispFlex .textArea dl dt span {position: relative;}
  #sec6 .container .dispFlex .textArea dl dt span::before {content: '【';}
  #sec6 .container .dispFlex .textArea dl dt span::after {content: '】';}
  #sec6 .container .dispFlex .textArea dl dd {flex-direction: column; justify-content: center; width: 100%; padding: 5px 0 10px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec6 .container > .dispFlex {padding-top: 20px;}
  #sec6 .container > .dispFlex:not(:first-of-type) {margin-top: 20px;}
  #sec6 .container .dispFlex .textArea {width: calc(60% - 10px);}
  #sec6 .container .dispFlex picture {width: calc(40% - 10px);}
}
@media (max-width: 767px) {
  #sec6 .container .dispFlex {flex-direction: column-reverse;}
  #sec6 .container > .dispFlex {padding-top: 15px;}
  #sec6 .container .dispFlex .textArea {width: 100%;}
  #sec6 .container .dispFlex picture {width: 100%;}
}