@charset "utf-8";

/* #mainVisual設定
--------------------------------------------------------------------------*/
#mainVisual {position: relative; width: 100%; max-width: 1920px; height: 100dvh; max-height: 1080px; margin: 0 auto; overflow: hidden;}
#mainVisual::after {content: ''; z-index: 1; width: inherit; height: 100dvh; max-height: 1080px; background-color: rgba(0,0,0,0.2);}
#mainVisual .swiper-container, #mainVisual .swiper-container ul, #mainVisual .swiper-container ul li, #mainVisual .swiper-container ul li figure {position: relative; width: inherit; height: inherit; max-height: 1080px;}
#mainVisual .swiper-container {position: fixed; }
#mainVisual .swiper-container ul li figure img {position: absolute; top: 0; left: 0; width: inherit; max-width: 1920px; height: inherit; max-height: 1080px; object-fit: cover; object-position: center;}
#mainVisual #mvText {position: absolute; top: 0; left: 0; z-index: 9; display: block; width: 100%; max-width: 1920px; height: 100dvh; max-height: 1080px;}
#mainVisual #mvText img {position: absolute; top: 50%; left: 100px; transform: translateY(-50%); width: 1000px;}
#mainVisual #mvBadge {position: absolute; top: 0; left: 0; z-index: 9; display: block; width: 100%; max-width: 1920px; height: 100dvh; max-height: 1080px;}
#mainVisual #mvBadge img {position: absolute; bottom: 100px; width: 220px;}
#mainVisual #mvBadge img:first-of-type {right: 215px;}
#mainVisual #mvBadge img:last-of-type {right: 30px;}
@media (max-width: 1399px) and (min-width: 1230px) {
  #mainVisual #mvText img {left: 90px; width: 800px;}
  #mainVisual #mvBadge img {bottom: 95px; width: 176px;}
  #mainVisual #mvBadge img:first-of-type {right: 180px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #mainVisual #mvText img {left: 80px; width: 700px;}
  #mainVisual #mvBadge img {bottom: 90px; width: 154px;}
  #mainVisual #mvBadge img:first-of-type {right: 160px;}
}
@media (max-width: 991px) {
  #mainVisual, #mainVisual::after, #mainVisual .swiper-container, #mainVisual .swiper-container ul, #mainVisual .swiper-container ul li, #mainVisual .swiper-container ul li figure, #mainVisual .swiper-container ul li figure img, #mainVisual #mvText, #mainVisual #mvBadge {max-height: 100dvh;}
  #mainVisual #mvText img {left: 50%; transform: translate(-50%,-50%); width: auto;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #mainVisual #mvText img {height: 65%;}
  #mainVisual #mvBadge img {bottom: 85px; width: 132px;}
  #mainVisual #mvBadge img:first-of-type {right: 145px;}
}
@media (max-width: 767px) {
  #mainVisual #mvText img {height: 75%; margin-top: 30px;}
  #mainVisual #mvBadge img {width: 110px;}
  #mainVisual #mvBadge img:first-of-type {bottom: 100px; right: -10px;}
  #mainVisual #mvBadge img:last-of-type {bottom: 5px; right: -10px;}
}
@media (max-width: 360px) {
  #mainVisual #mvBadge img {width: 88px;}
  #mainVisual #mvBadge img:first-of-type {bottom: 80px;}
  #mainVisual #mvBadge img:last-of-type {bottom: 5px;}
}

/* #newsNavi設定
--------------------------------------------------------------------------*/
#newsNavi {position: absolute; top: calc(100dvh - 70px); left: 50%; transform: translateX(-50%); z-index: 10; width: calc(100% - 60px); height: 40px; border: solid 1px #FFF; overflow: hidden;}
#newsNavi ul {position: relative; width: 100%; height: 40px; list-style-type: none; animation: newsticker infinite linear;}
@keyframes newsticker {
  0%, 25% {transform: translateY(0);}
  50% {transform: translateY(calc(-100% - 1px));}
  75%, 100% {transform: translateY(calc(-100% - 1px));}
}
#newsNavi::before {content: ''; width: 100%; height: inherit; background-color: rgba(0,0,0,0.3);}
#newsNavi ul li {width: 100%; height: 40px; padding: 12px 30px 0 15px; overflow: hidden;}
#newsNavi ul li a {flex-wrap: wrap; gap: 0; width: 100%; color: #FFF; font-size: 14px;}
#newsNavi ul li a span:first-of-type {width: 150px; text-align: center;}
#newsNavi ul li a span:last-of-type {width: calc(100% - 300px); height: 14px; padding-left: 30px; overflow: hidden;}
#newsNavi ul li a time {position: relative; display: inline-block; width: 150px; text-align: center;}
#newsNavi ul li a time::before, #newsNavi ul li a time::after {content: '/';}
#newsNavi ul li a time::after {left: auto; right: 0;}
@media (min-width: 992px) and (min-height: 1080px) {
  #newsNavi {top: 1010px;}
}
@media (max-width: 991px) and (min-height: 1081px) {
  #newsNavi {top: calc(100dvh - 70px);}
}
@media (max-width: 767px) {
  #newsNavi {display: none;}
  #newsNavi {width: calc(100% - 30px); height: 60px;;}
  #newsNavi ul {height: 60px;}
  #newsNavi ul li {height: 60px; padding: 12px 0 0;}
  #newsNavi ul li a span:first-of-type {width: auto; padding: 0 15px 0 15px; text-align: left;}
  #newsNavi ul li a span:last-of-type {width: 100%; margin-top: 5px; padding: 0 15px;}
  #newsNavi ul li a time {width: auto; padding-left: 20px; text-align: left;}
  #newsNavi ul li a time::after {content: none;}
}

/* 共通設定設定
--------------------------------------------------------------------------*/
#main section {position: relative; width: 100%; padding: 120px 0; clip-path: inset(0);}
#main section .container {padding: 0 15px;}
#main section .container h2 {text-align: center;}
@media (max-width: 1229px) and (min-width: 992px) {
  #main section {padding: 100px 0;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #main section {padding: 80px 0;}
}
@media (max-width: 767px) {
  #main section {padding: 60px 0;}
}

/* #sec1設定
--------------------------------------------------------------------------*/
#sec1 { background-color: #F4F7EC;}
#sec1::before {content: ''; top: 80%; width: 100%; height: 1px; background-color: #3D554F;}
#sec1 .container {justify-content: space-between; gap: 0;}
#sec1 .container .leftArea {width: 475px;}
#sec1 .container .leftArea p {color: #3D554F; line-height: 2.4;}
#sec1 .container .rightArea {width: 630px;}
#sec1 .container .rightArea img {width: 100%;}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec1 .container .leftArea {width: 410px;}
  #sec1 .container .leftArea p {line-height: 2.2;}
  #sec1 .container .rightArea {width: 480px;}
}
@media (min-width: 992px) {
  #sec1 .container {align-items: center;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec1 {padding: 100px 0 60px;}
  #sec1::before {top: 82%;}
  #sec1 .container .leftArea {width: 350px;}
  #sec1 .container .leftArea p {padding-top: 0; line-height: 2.0;}
  #sec1 .container .rightArea {width: 330px;}
  #sec1 p.secIndex {top: -50px;}
  #sec1 p.secIndex::before, #sec1 p.secIndex::after {top: -30px;}
}
@media (max-width: 767px) {
  #sec1::before {top: 88%;}
  #sec1 .container {flex-direction: column; gap: 15px; padding: 0 30px;}
  #sec1 .container .leftArea {width: 100%;}
  #sec1 .container .leftArea p {line-height: 2.0;}
  #sec1 .container .rightArea {width: 100%; max-width: 300px; margin: 0 auto;}
}

/* #sec2設定
--------------------------------------------------------------------------*/
#sec2::before {content: ''; position: fixed; width: 100%; height: 100dvh; background-image: url('images/fp/sec2-bg.webp');}
#sec2::after {content: 'Eagle Construction Works'; top: auto; bottom: 45px; left: 30px; z-index: 99; color: #FFF; font-size: 24px; font-weight: 300; writing-mode: vertical-rl;}
#slideBox {position: relative; z-index: 10; width: 100%; margin-top: 60px;}
#slideBox .swiper-wrapper {z-index: 9; margin-bottom: 15px; transition-timing-function: linear;}
#slideBox .swiper-wrapper li {filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.2));}
#slideBox .swiper-wrapper li a {display: block; width: 100%; padding-top: 65%;}
#slideBox .swiper-wrapper li a img {object-fit: cover; width: 100%; height: 100%;}
#sec2 .linkButton {margin: 45px 90px 0 auto;}
@media (min-width: 1230px) {
  #sec2 .container {max-width: 100%; padding-left: 125px !important;}
  #sec2 .container h2 {text-align: left !important;}
}
@media (max-width: 1229px) {
  #sec2 .linkButton {margin-right: auto;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec2::after {bottom: 38px; left: 25px; font-size: 20px;}
  #slideBox {margin-top: 50px;}
  #sec2 .linkButton {margin-top: 35px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec2::after {bottom: 30px; left: 20px; font-size: 18px;}
  #slideBox {margin-top: 40px;}
  #sec2 .linkButton {margin-top: 25px;}
}
@media (max-width: 767px) {
  #sec2::after {bottom: 24px; left: 15px; font-size: 14px;}
  #sec2 .linkButton {margin-top: 15px;}
  #slideBox {margin-top: 30px;}
  #slideBox .swiper-wrapper li {filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.25));}
}
@media (max-width: 360px) {
  #sec2::after {bottom: 18px; left: 12px;}
}

/* #sec3設定
--------------------------------------------------------------------------*/
#sec3 {background-color: #F4F7EC;}

/* #sec4設定
--------------------------------------------------------------------------*/
#sec4::after {content: ''; position: fixed; width: 100%; height: 100dvh; background-color: rgba(0,0,0,0.25);}
#sec4 .container h2 {margin-bottom: 60px;}
#sec4 .container dl {padding: 30px; background-color: #FFF;}
#sec4 .container dl:not(:first-of-type) {margin-top: 30px;}
#sec4 .container dl dt {position: relative; margin-bottom: 15px; padding: 0 0 15px 35px; border-bottom: solid 1px #CCC; line-height: 1.8;}
#sec4 .container dl dd {position: relative; padding-left: 35px; color: #76953D; line-height: 1.8;}
#sec4 .container dl dt::before, #sec4 .container dl dd::before {content: ''; top: 2px; width: 24px; height: 26px;}
#sec4 .container dl dt::before {background-image: url('images/fp/sec4-dt.svg');}
#sec4 .container dl dd::before {background-image: url('images/fp/sec4-dd.svg');}
@media (min-height: 1081px) {
  #sec4 {background: fixed center / cover no-repeat transparent; background-image: url('images/fp/mv-02-test.jpg');}
}
@media (max-width: 1229px) {
  #sec4 .container dl dt, #sec4 .container dl dd {padding-left: 30px;}
  #sec4 .container dl dt::before, #sec4 .container dl dd::before {width: 19px; height: 20px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec4 .container h2 {margin-bottom: 50px;}
  #sec4 .container dl {padding: 25px;}
  #sec4 .container dl:not(:first-of-type) {margin-top: 25px;}
  #sec4 .container dl dt {margin-bottom: 13px; padding-bottom: 13px;}
}
@media (max-width: 991px) {
  #sec4 .container dl dt {margin-bottom: 10px; padding-bottom: 10px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec4 .container h2 {margin-bottom: 40px;}
  #sec4 .container dl {padding: 20px;}
  #sec4 .container dl:not(:first-of-type) {margin-top: 20px;}
}
@media (max-width: 767px) {
  #sec4 .container h2 {margin-bottom: 30px;}
  #sec4 .container dl {padding: 15px;}
  #sec4 .container dl:not(:first-of-type) {margin-top: 15px;}
}

/* #sec5設定
--------------------------------------------------------------------------*/
#sec5 {  background-color: #F4F7EC;}
#sec5 .container > ul {padding: 15px 0;}
#sec5 .container > ul > li {flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; padding: 15px 0; border-bottom: solid 1px #CCC;}
#sec5 .container > ul > li:last-child {border: none;}
#sec5 .container > ul > li span {display: block; line-height: 1.4;}
#sec5 .container > ul > li span.blogCategory {width: 200px;}
#sec5 .container > ul > li span.blogCategory ul li a {position: relative; display: block; width: 100%; padding: 10px 0; background-color: #819D56; color: #FFF; font-size: 14px; text-align: center;}
#sec5 .container > ul > li span.blogDate {width: 200px; font-size: 14px; text-align: center;}
#sec5 .container > ul > li span.blogTitle {width: calc(100% - 400px);}
#sec5 .container > ul > li span.blogTitle a {color: #3D554F;}
@media (max-width: 1229px) {
  #sec5 .container > ul > li span.blogCategory {width: 150px;}
  #sec5 .container > ul > li span.blogDate {width: 150px;}
  #sec5 .container > ul > li span.blogTitle {width: calc(100% - 300px);}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec5 .container > ul {padding: 10px 0;}
  #sec5 .container > ul > li span.blogCategory ul li a {padding: 8px 0;}
}
@media (max-width: 991px) {
  #sec5 .container > ul > li span.blogCategory ul li a {padding: 6px 0;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec5 .container > ul {padding: 5px 0;}
}
@media (max-width: 767px) {
  #sec5 .container > ul {padding: 0;}
  #sec5 .container > ul > li span.blogCategory {width: 50%;}
  #sec5 .container > ul > li span.blogDate {width: 50%; text-align: right;}
  #sec5 .container > ul > li span.blogTitle {width: 100%; padding-top: 8px;}
}

/* #sec6設定
--------------------------------------------------------------------------*/
#sec6 {background-color: #F4F7EC;}
#sec6 .container .dispFlex {flex-direction: row-reverse; flex-wrap: wrap; align-items: flex-start;}
#sec6 .container .dispFlex .textArea {width: calc(100% - 450px - 30px);}
#sec6 .container .dispFlex .textArea dl:not(:first-of-type) {margin-top: 30px;}
#sec6 .container .dispFlex .textArea dl dt {color: #3D554F; font-size: 24px; font-weight: 500; line-height: 1.4;}
#sec6 .container .dispFlex .textArea dl dd {margin-top: 10px; padding-bottom: 30px; border-bottom: solid 1px #CCC; line-height: 1.4;}
#sec6 .container .dispFlex .textArea dl dd span {position: relative; display: inline-block;}
#sec6 .container .dispFlex .textArea dl dd span::before {content: '・'; position: static; display: inline;}
#sec6 .container .dispFlex img {width: 450px; margin-top: 30px;}
@media (min-width: 1230px) {
  #sec6 .container .dispFlex .textArea dl dd {font-size: 18px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #sec6 .container .dispFlex .textArea {width: calc(100% - 360px - 25px);}
  #sec6 .container .dispFlex .textArea dl:not(:first-of-type) {margin-top: 25px;}
  #sec6 .container .dispFlex .textArea dl dt {font-size: 22px;}
  #sec6 .container .dispFlex .textArea dl dd {padding-bottom: 25px;}
  #sec6 .container .dispFlex img {width: 360px; margin-top: 25px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #sec6 .container .dispFlex .textArea {width: calc(100% - 315px - 20px);}
  #sec6 .container .dispFlex .textArea dl:not(:first-of-type) {margin-top: 20px;}
  #sec6 .container .dispFlex .textArea dl dt {font-size: 20px;}
  #sec6 .container .dispFlex .textArea dl dd {padding-bottom: 20px;}
  #sec6 .container .dispFlex img {width: 315px; margin-top: 20px;}
}
@media (max-width: 767px) {
  #sec6 .container .dispFlex {flex-direction: column-reverse; gap: 0;}
  #sec6 .container .dispFlex .textArea {width: 100%;}
  #sec6 .container .dispFlex .textArea dl:not(:first-of-type) {margin-top: 15px;}
  #sec6 .container .dispFlex .textArea dl dt {font-size: 18px;}
  #sec6 .container .dispFlex .textArea dl dd {padding-bottom: 15px;}
  #sec6 .container .dispFlex img {width: 290px; margin: 15px auto;}
}