@charset "utf-8";

/* #header設定
--------------------------------------------------------------------------*/
#header {position: relative; z-index: 100; justify-content: space-between; align-items: center; width: 100%; max-width: 1920px; height: 100px;}
#header strong {position: absolute; top: 15px; left: 30px; z-index: 100; font-size: 80%;}
#header a#headerLogo {position: relative; left: 30px; z-index: 100; align-self: flex-end; display: block; height: 60px; font-size: 0;}
#header a#headerLogo img {width: 100%;}
#header #hamburger {display: none;}
#header #navWrap nav ul li {position: relative;}
#header #navWrap nav ul li a {font-weight: 500;}
@media (min-width: 1230px) {
  #header label.menu_button {display: none;}
  #header #navWrap {z-index: 100;}
  #header #navWrap nav ul {gap: 45px;}
  #header #navWrap nav ul li a {display: block; height: 100px; line-height: 100px;}
  #header #navWrap nav ul li.contactLink a {padding: 0 45px; background-color: #E7654B; border-radius: 0 0 0 30px; color: #FFF;}
}
@media (max-width: 1229px) {
  #header {height: 80px;}
  #header::after {content: ''; position: absolute; top: 0; left: 0; z-index: 99; display: block; width: 100%; height: 100px; background-color: #F7F7F7;}
  #header a#headerLogo {width: 248px; height: 45px;}
  #header label.menu_button {position: absolute; top: 0; right: 0; z-index: 100; width: 80px; height: 80px; background-color: #E7654B; border-radius: 0 0 0 20px; cursor: pointer;}
  #header label.menu_button span.menu_button__line {position: relative; top: 50%; left: 50%; display: block; width: 40px; height: 3px; background-color: #FFF; border-radius: 200px; transform: translate(-50%,-50%); transition: 0.3s;}
  #header label.menu_button span.menu_button__line:before, #header label.menu_button span.menu_button__line:after {content: ''; width: 100%; height: 100%; border-radius: 200px; transition: inherit; position: absolute; top: 0; left: 0; display: block; background-color: #FFF;}
  #header label.menu_button span.menu_button__line:before {top: -10px;}
  #header label.menu_button span.menu_button__line:after {top: 10px;}
  #header label.menu_button span.textArea {position: relative; display: block; width: inherit; height: inherit; padding: 0;}
  #hamburger:checked + label.menu_button span.menu_button__line {background-color: transparent;}
  #hamburger:checked + label.menu_button span.menu_button__line::before {top: 0; transform: rotate(35deg);}
  #hamburger:checked + label.menu_button span.menu_button__line::after {top: 0; transform: rotate(-35deg);}
  #hamburger:checked ~ #navWrap {opacity: 1; visibility: visible; overflow-y: scroll;}
  #header #navWrap {position: absolute; top: 0; left: 0; width: 100%; height: 100dvh; z-index: 99; transition: 1s top, 1s opacity; opacity: 0; visibility: hidden; overflow-y: scroll;}
  #header #navWrap nav {position: relative; top: 0; left: 0; width: 100%; height: 100dvh; padding: 120px 15px 0; background-color: #F7F7F7; border-bottom: solid 5px #E7654B;}
  #header #navWrap nav ul {position: relative; flex-wrap: wrap;}
  #header #navWrap nav ul li {padding: 10px 15px; border-bottom: solid 1px #333;}
  #header #navWrap nav ul li:first-of-type, #header #navWrap nav ul li:nth-of-type(2), #header #navWrap nav ul li:nth-of-type(6) {border-top: solid 1px #333;}
  #header #navWrap nav ul li a {position: relative; display: block; padding: 15px;}
  #header #navWrap nav ul li a::before {content: '';position: absolute; top: 50%; left: 0; transform: translateY(-45%); display: block; width: 6px; height: 10px; background-image: url('images/common/angle-right-black.svg');}
  #header #navWrap nav ul:first-of-type li:nth-of-type(1) {order: 1;}
  #header #navWrap nav ul:first-of-type li:nth-of-type(2) {order: 2;}
  #header #navWrap nav ul:first-of-type li:nth-of-type(3) {order: 4;}
  #header #navWrap nav ul:first-of-type li:nth-of-type(4) {order: 5;}
  #header #navWrap nav ul:first-of-type li:nth-of-type(5) {order: 6;}
  #header #navWrap nav ul:first-of-type li:nth-of-type(6) {order: 3;}
  #header #navWrap nav ul:first-of-type li a {font-size: 16px;}
  #header #navWrap nav ul.contactLink {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-top: 30px; border: none;}
  #header #navWrap nav ul.contactLink li {padding: 0; border: double 3px rgba(0,0,0,0.5);}
  #header #navWrap nav ul.contactLink li a {padding: 15px 0; line-height: 1.6; text-align: center;}
  #header #navWrap nav ul.contactLink li a span {display: block;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #header #navWrap nav {min-height: 410px;}
  #header #navWrap nav ul {gap: 0 25px;}
  #header #navWrap nav ul li {width: calc(33.333% - 25px * 2 / 3);}
}
@media (max-width: 991px) and (min-width: 768px) {
  #header #navWrap nav {min-height: 420px; padding-top: 110px;}
  #header #navWrap nav ul {gap: 0 20px;}
  #header #navWrap nav ul li {width: calc(33.333% - 20px * 2 / 3);}
}
@media (min-width: 768px) {
  #header #navWrap nav ul.contactLink li a::before {content: none;}
}
@media (max-width: 767px) {
  #header {height: 60px;}
  #header::after {height: 75px;}
  #header strong {display: none;}
  #header a#headerLogo {left: 15px;}
  #header label.menu_button {width: 60px; height: 60px;}
  #header label.menu_button span.menu_button__line {width: 30px; height: 3px;}
  #header label.menu_button span.textArea::before {font-size: 80%;}
  #header #navWrap nav {min-height: 605px; padding-top: 85px;}
  #header #navWrap nav ul:first-of-type {gap: 0 15px;}
  #header #navWrap nav ul:first-of-type li {width: calc(50% - 15px * 2 / 3);}
  #header #navWrap nav ul:first-of-type li:nth-of-type(3) {order: 3;}
  #header #navWrap nav ul:first-of-type li:nth-of-type(4) {order: 4;}
  #header #navWrap nav ul:first-of-type li:nth-of-type(5) {order: 5;}
  #header #navWrap nav ul:first-of-type li:nth-of-type(6) {order: 6; border-top: none;}
  #header #navWrap nav ul.contactLink {gap: 15px; margin-top: 20px;}
  #header #navWrap nav ul.contactLink li a::before {left: 15px; width: 15px; height: 15px; background: center / cover no-repeat; background-image: url('images/common/icon-phone.svg');}
}
@media (max-width: 360px) {
  #header {height: 55px;}
  #header::after {height: 70px;}
  #header a#headerLogo {width: 220px; height: 40px;}
  #header #navWrap nav {min-height: 795px; padding-top: 75px;}
  #header #navWrap nav ul:first-of-type li {width: 100%;}
  #header #navWrap nav ul:first-of-type li:nth-of-type(2) {border-top: none;}
}

/* 共通設定
--------------------------------------------------------------------------*/
.bodyWrap {background-color: #F7F7F7;}
#bgArea {position: fixed; width: 100%; max-width: 1920px; height: 100dvh; margin-top: -100px; overflow: hidden;}
#bgArea span {position: absolute; top: 325px; left: 50%; transform: translateX(-50%); display: block; width: 100%; padding-top: 17%; background: center / cover no-repeat; background-image: url('images/common/bg-pc_1800x300.svg');}
#main {position: relative;}
#mainVisual {position: relative; width: 100%;}
#mainVisual h1 {position: absolute; width: 100%;}
h2 {font-size: 50px;}
h2.secTitle {position: relative; padding-top: 220px;}
h2.secTitle::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; width: 300px; height: 220px; background: center / cover no-repeat; background-image: url('images/common/bg-secTitle-green.svg'); opacity: 0.3;}
h2.secTitleB::before {background-image: url('images/common/bg-secTitle-black.svg'); opacity: 0.25;}
h2.secTitle span {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; width: 100%; color: #FFF; font-size: inherit; text-align: center;}
.textWhite p {color: #FFF;}
a.linkButton {position: relative; display: block; width: 400px; height: auto; margin: 60px auto 0; padding: 20px 0; background-color: #E7654B; border: solid 1px #E7654B; border-radius: 10px; color: #FFF; font-size: 16px; font-weight: 500; text-align: center;}
a.linkButton::before, a.linkButton::after {content: ''; position: absolute; top: 50%; right: 0; width: 30px; height: 1px; background-color: #FFF;}
a.linkButton::after {left: 100%; background-color: #E7654B;}
a.linkButton span {position: relative; display: inline-block; width: 100%;}
a.linkButton span::before {content: ''; position: absolute; top: 6px; right: -30px; width: 8px; height: 1px; background-color: #E7654B; transform: rotate(35deg);}
.textWhite a.linkButton {background-color: #FFF; color: #E7654B;}
.textWhite a.linkButton::before, .textWhite a.linkButton::after {background-color: #FFF;}
.textWhite a.linkButton::before {background-color: #E7654B;}
.textWhite a.linkButton span::before {background-color: #FFF;}
.bgGradation {background: linear-gradient(to right, #348E4B, #6BBC53);}
.iframeArea span {position: relative; display: block; max-width: 100%; margin: 0; padding-top: 56.25%;}
.iframeArea span iframe {position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
@media (min-width: 1921px) {
  #bgArea span {width: 1920px; height: 300px; margin: 0 auto; padding-top: 0;}
}
@media (max-width: 1399px) and (min-width: 1230px) {
  #bgArea span {top: 275px;}
}
@media (max-width: 1229px) {
  #bgArea {margin-top: -80px;}
  a.linkButton span {font-size: 14px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #bgArea span {top: 225px;}
  h2 {font-size: 40px;}
  h2.secTitle {padding-top: 176px;}
  h2.secTitle::before {width: 240px; height: 176px;}
  a.linkButton {width: 360px; margin-top: 50px; padding: 18px 0;}
  a.linkButton span::before {top: 4px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #bgArea span {top: 200px;}
  h2 {font-size: 30px;}
  h2.secTitle {padding-top: 132px;}
  h2.secTitle::before {width: 180px; height: 132px;}
  a.linkButton {width: 320px; margin-top: 40px; padding: 15px 0;}
  a.linkButton span::before {top: 3px;}
}
@media (max-width: 767px) {
  #bgArea {margin-top: -60px;}
  #bgArea span {top: 115px; padding-top: 70%; background-image: url('images/common/bg-mp_430x300.svg');}
  h2 {font-size: 26px;}
  h2.secTitle {padding-top: 110px;}
  h2.secTitle::before {width: 150px; height: 110px;}
  a.linkButton {width: 260px; margin-top: 30px; padding: 13px 0;}
  a.linkButton::before, a.linkButton::after {width: 20px;}
  a.linkButton span::before {top: 3.5px; right: -20px;}
}
@media (max-width: 360px) {
  #bgArea {margin-top: -55px;}
  a.linkButton span::before {top: 3px;}
}

/* .newsArea設定
--------------------------------------------------------------------------*/
.newsArea {flex-wrap: wrap; justify-content: center; padding: 30px 0 0;}
.newsArea article {flex-direction: column; gap: 0;}
.newsArea article a {flex-direction: column-reverse; flex-grow: 1; gap: 0; width: 100%;}
.newsArea article a .textArea {position: relative; flex-direction: column-reverse; flex-grow: 1; gap: 10px; width: 100%; padding: 5px 0 0;}
.newsArea article a .textArea h3 {flex-grow: 1; padding: 0 0 15px 0; font-size: 14px; line-height: 1.4;}
.newsArea article a .textArea ul {position: relative; flex-wrap: wrap; gap: 0;}
.newsArea article a .textArea ul li.blogCategory {width: 170px; height: 30px; background-color: #E7654B; border-radius: 10px;}
.newsArea article a .textArea ul li.blogCategory span {display: block; width: inherit; height: inherit; color: #FFF; font-size: 14px; line-height: 30px; text-align: center;}
.newsArea article a .textArea ul li.blogDate {height: 30px; padding-left: 15px; text-align: right;}
.newsArea article a .textArea ul li.blogDate time {font-size: 14px; line-height: 30px;}
.newsArea article a .imgArea {width: 100%; margin-bottom: 10px; padding-top: 65%; border-radius: 10px; overflow: hidden;}
.newsArea + a.linkButton {margin-top: 30px;}
@media (max-width: 1229px) {
  .newsArea article a .textArea h3 {padding-bottom: 10px; font-size: 14px;}
  .newsArea article a .textArea ul li.blogCategory {border-radius: 5px;}
  .newsArea article a .textArea ul li.blogDate {padding-left: 10px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  .newsArea {padding: 25px 0 0;}
  .newsArea article a .textArea ul li.blogCategory span, .newsArea article a .textArea ul li.blogDate time {font-size: 90%;}
  .newsArea article a .textArea ul li.blogCategory {width: 135px; height: 25px;}
  .newsArea article a .textArea ul li.blogDate {height: 25px;}
  .newsArea article a .textArea ul li.blogCategory span, .newsArea article a .textArea ul li.blogDate time {line-height: 25px;}
  .newsArea + a.linkButton {margin-top: 25px;}
}
@media (max-width: 991px) {
  .newsArea article a .textArea ul li.blogCategory span, .newsArea article a .textArea ul li.blogDate time {font-size: 80%;}
  .newsArea article a .textArea ul li.blogCategory {width: 130px; height: 20px;}
  .newsArea article a .textArea ul li.blogDate {height: 20px;}
  .newsArea article a .textArea ul li.blogCategory span, .newsArea article a .textArea ul li.blogDate time {line-height: 20px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  .newsArea {padding: 20px 0 0;}
  .newsArea + a.linkButton {margin-top: 20px;}
}
@media (min-width: 768px) {
  .newsArea article a .textArea h3 {border-bottom: solid 1px #CCC;}
}
@media (max-width: 767px) {
  .newsArea {padding: 15px 0 0;}
  .newsArea article {padding-bottom: 15px; border-bottom: solid 1px #CCC;}
  .newsArea article a {flex-direction: row-reverse; flex-wrap: wrap; height: 100px;}
  .newsArea article a .textArea {gap: 7px; width: 60%; height: 100px; padding: 0 0 0 5px;}
  .newsArea article a .textArea h3 {height: 70px; padding: 0; line-height: 1.3; overflow: hidden;}
  .newsArea article a .imgArea {width: 40%; height: 100px; margin-bottom: 0; padding: 0;}
  .newsArea + a.linkButton {margin-top: 15px;}
}
@media (max-width: 360px) {
  .newsArea article a .textArea ul li.blogCategory span, .newsArea article a .textArea ul li.blogDate time {font-size: 70%;}
  .newsArea article a .textArea ul li.blogCategory {width: 110px; padding-right: 5px;}
  .newsArea article a .textArea ul li.blogDate {padding-left: 5px;}
}

/* #secBanner設定
--------------------------------------------------------------------------*/
#secBanner ul {position: relative; flex-wrap: wrap; gap: 0;}
#secBanner ul::after {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; display: block; width: 1px; height: 360px; background-color: #FFF;}
#secBanner ul li {width: 50%; height: 360px; background-color: #000;}
#secBanner ul li a {position: relative; display: block; width: 100%; height: inherit; overflow: hidden;}
#secBanner ul li a::before, #secBanner ul li a::after {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: inherit; background: center / cover no-repeat; filter: blur(3px);}
#secBanner ul li:first-of-type a::before {background-image: url('images/common/secBanner-01.webp');}
#secBanner ul li:last-of-type a::before {background-image: url('images/common/secBanner-02.webp');}
#secBanner ul li a::after {background-color: rgba(0,0,0,0.5);}
#secBanner ul li a span {position: relative; top: 40%; left: 50%; transform: translateX(-50%); z-index: 1; display: block; width: 100%; color: #FFF; font-size: 50px; text-align: center;}
#secBanner ul li a span::before, #secBanner ul li a span::after {content: ''; position: absolute; top: 70px; left: 50%; z-index: 1; display: block; background-color: #FFF;}
#secBanner ul li a span::before {transform: translateX(-50%); width: 400px; height: 1px;}
#secBanner ul li a span::after {width: 10px; height: 1px; margin: -3px 0 0 190px; transform: rotate(35deg);}
@media (max-width: 1229px) and (min-width: 992px) {
  #secBanner ul li, #secBanner ul::after {height: 280px;}
  #secBanner ul li a span {font-size: 40px;}
  #secBanner ul li a span::before, #secBanner ul li a span::after {top: 60px;}
  #secBanner ul li a span::before {width: 300px;}
  #secBanner ul li a span::after {margin-left: 140px;}
}
@media (max-width: 991px) {
  #secBanner ul li a span::before {width: 200px;}
  #secBanner ul li a span::after {margin-left: 90px;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #secBanner ul li, #secBanner ul::after {height: 220px;}
  #secBanner ul li a span {font-size: 30px;}
  #secBanner ul li a span::before, #secBanner ul li a span::after {top: 50px;}
}
@media (max-width: 767px) {
  #secBanner ul {flex-direction: row;}
  #secBanner ul li {width: 100%; height: 200px;}
  #secBanner ul::after {top: 200px; left: 0; transform: translate(0); width: 100%; height: 1px;}
  #secBanner ul li a span {font-size: 26px;}
  #secBanner ul li a span::before, #secBanner ul li a span::after {top: 40px;}
}

/* #secContact設定
--------------------------------------------------------------------------*/
#secContact {position: relative; width: 100%; padding: 120px 0;}
#secContact .container > .dispFlex {align-items: center; gap: 0;}
#secContact .container > .dispFlex p.secTitle {position: relative; width: 50%; padding-top: 220px; font-size: 50px;}
#secContact .container > .dispFlex p.secTitle::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; width: 300px; height: 220px; background: center / cover no-repeat; background-image: url('images/common/bg-secTitle-green.svg'); opacity: 0.3;}
#secContact .container > .dispFlex p.secTitle span {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; width: 100%; color: #FFF; font-size: inherit; text-align: center;}
#secContact .container > .dispFlex p.secTitle::after {content: ''; position: absolute; top: 50%; left: auto; right: 0; transform: translateY(-50%) rotate(30deg); display: block; width: 1px; height: 300px; background-color: #FFF;}
#secContact .container > .dispFlex .rightArea {flex-direction: column; width: 50%; padding-left: 60px;}
#secContact .container > .dispFlex .rightArea p {color: #FFF; line-height: 1.8; text-align: center;}
#secContact .container > .dispFlex .rightArea a.linkButton {margin-top: 0;}
@media (max-width: 1229px) and (min-width: 992px) {
  #secContact {padding: 100px 0;}
  #secContact .container > .dispFlex p.secTitle {width: 45%; padding-top: 176px; font-size: 40px;}
  #secContact .container > .dispFlex p.secTitle::before {width: 240px; height: 176px;}
  #secContact .container > .dispFlex p.secTitle::after {height: 240px;}
  #secContact .container > .dispFlex .rightArea {width: 55%; padding-left: 30px;}
}
@media (max-width: 991px) {
  #secContact .container > .dispFlex .rightArea {padding-left: 0;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #secContact {padding: 80px 0;}
  #secContact .container > .dispFlex p.secTitle {width: 40%; padding-top: 132px; font-size: 30px;}
  #secContact .container > .dispFlex p.secTitle::before {width: 180px; height: 132px;}
  #secContact .container > .dispFlex p.secTitle::after {height: 200px;}
  #secContact .container > .dispFlex .rightArea {width: 60%;}
}
@media (max-width: 767px) {
  #secContact {padding: 45px 0 60px;}
  #secContact .container > .dispFlex {flex-direction: column; gap: 15px;}
  #secContact .container > .dispFlex p.secTitle {width: 100%; padding-top: 110px; font-size: 26px; text-align: center;}
  #secContact .container > .dispFlex p.secTitle::before {width: 150px; height: 110px;}
  #secContact .container > .dispFlex p.secTitle::after {content: none;}
  #secContact .container > .dispFlex .rightArea {position: relative; width: 100%;}
}

/* #footer設定
--------------------------------------------------------------------------*/
#footer {position: relative; padding: 120px 0 0;}
#footer .container {align-items: center;}
#footer .container nav {gap: 120px;}
#footer .container nav ul li.listParent {margin-bottom: 46px;}
#footer .container nav ul li:last-of-type.listParent {margin-bottom: 0;}
#footer .container nav ul:last-of-type li.listParent {margin-bottom: 20px;}
#footer .container nav ul li.listChild {position: relative; margin-bottom: 20px; padding-left: 16px;}
#footer .container nav ul li:last-of-type.listChild {margin-bottom: 0;}
#footer .container nav ul li.listChild::before {content: '-'; position: absolute; top: 0; left: 5px; display: block;}
#footer .container nav ul li.listParent a {font-weight: 500;}
#footer .container dl dt a {display: block;}
#footer .container dl dd address {margin-top: 30px; padding-left: 5px;}
#footer .container dl dd address span {display: block;}
#footer .container dl dd address span:first-of-type {margin-left: -3px;}
#footer .container dl dd address span a {display: block; margin: 10px 18px 10px 0;}
#footer #copyLight {display: block; width: 100%; height: 40px; margin: 120px 0 0; color: #FFF; font-weight: 500; line-height: 40px; text-align: center;}
#pageTop {position: fixed; bottom: 0; right: 0; z-index: 10;}
#pageTop a {position: relative; display: block; width: 40px; height: 40px; background-color: rgb(107,188,83,0.9);}
#pageTop a img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 15px; height: 10px;}
@media (min-width: 1230px) {
  #footer .container {width: 900px;}
}
@media (max-width: 1229px) {
  #footer .container nav ul li.listParent {margin-bottom: 45px;}
  #footer .container nav ul li.listChild {padding-left: 14px;}
  #footer .container dl dt a {width: 280px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #footer {padding: 100px 0 0;}
  #footer .container {width: 750px;}
  #footer .container nav {gap: 100px;}
  #footer #copyLight {margin: 100px 0 0;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #footer {padding: 80px 0 0;}
  #footer .container {width: 700px;}
  #footer .container nav {gap: 80px;}
  #footer .container dl {margin-top: 60px;}
  #footer #copyLight {margin: 80px 0 0;}
}
@media (min-width: 768px) {
  #footer .container {justify-content: space-between;}
  #footer .container nav {order: 2;}
  #footer .container dl {order: 1;}
}
@media (max-width: 767px) {
  #footer {padding: 60px 0 0;}
  #footer .container {flex-direction: column;}
  #footer .container nav {justify-content: center; gap: 30px;}
  #footer .container nav ul li.listParent {margin-bottom: 30px;}
  #footer .container dl {margin-top: 45px;}
  #footer .container dl dd address {margin-top: 15px; padding: 0;}
  #footer .container dl dd address span:first-of-type {margin-left: 15px;}
  #footer .container dl dd address span a {display: inline-block; margin-left: 5px;}
  #footer #copyLight {margin: 50px 0 0;}
}