@charset "utf-8";

/* #header設定
--------------------------------------------------------------------------*/
#header {position: absolute; top: 0; left: 0; z-index: 99; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; height: 90px; padding: 30px 30px 0;}
#header #headerLogo {position: relative; display: block; width: 300px; font-size: 0;}
#header #headerLogo img {width: 100%;}
#header #navWrap nav ul li {position: relative;}
#header #navWrap nav ul li a {font-weight: 500;}
@media (min-width: 1230px) {
  #header {align-items: flex-end;}
  #header #navWrap {z-index: 100;}
  #header #navWrap nav ul li a {color: #FFF;}
  #header #headerPR {position: absolute; top: 35px; right: 30px;  color: #FFF; font-size: 14px;}
  #header #headerPR a {position: relative; top: -1px; margin-left: 15px; padding: 2px 15px 3px; border: solid 1px #FFF; color: #FFF; font-size: 90%; letter-spacing: 1px;}
}
@media (max-width: 1229px) {
  #header {height: 75px; padding: 15px 15px 0;}
  #header label.menu_button {position: absolute; top: 15px; right: 15px; z-index: 100; width: 60px; height: 60px; cursor: pointer;}
  #header label.menu_button span.menu_button__line {position: relative; top: 50%; left: 50%; display: block; width: 40px; height: 3px; margin-top: -8px; 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%; background-color: #FFF; border-radius: 200px; transition: inherit;}
  #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; top: 7px; display: block; width: inherit; height: inherit;}
  #header label.menu_button span.textArea::before {content: 'MENU'; top: 50%; left: 50%; transform: translateX(-50%); margin-top: 8px; color: #FFF; font-weight: 700;}
  #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); background-color: #333;}
  #hamburger:checked + label.menu_button span.menu_button__line::after {top: 0; transform: rotate(-35deg); background-color: #333;}
  #hamburger:checked + label.menu_button span.textArea::before {content: 'CLOSE'; color: #333;}
  #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: 90px 15px 0; background-color: #F4F7EC; border-bottom: solid 10px #44AF35;}
  #header #navWrap nav::after {content: ''; position: absolute; top: auto; bottom: 0; width: 100%; height: 10px; background-color: #FFEB3F;}
  #header #navWrap nav ul {position: relative; flex-direction: column; gap: 0; border-top: solid 1px #333;}
  #header #navWrap nav ul li {padding: 10px 15px; border-bottom: solid 1px #333;}
  #header #navWrap nav ul li a {position: relative; display: block; padding: 10px 15px;}
  #header #navWrap nav ul li a::before {content: ''; top: 50%; transform: translateY(-45%); width: 6px; height: 10px; background-image: url('images/common/angle-right-black.svg');}
  #header #navWrap nav ul li.mpView {position: absolute; top: -75px; display: block; padding: 0; border: none;}
  #header #navWrap nav ul li.mpView a {padding: 0; font-size: 0;}
  #header #navWrap nav ul li.mpView a::before {content: none;}
  #header #navWrap nav ul.contactLink {width: 290px; margin: 30px auto 0; padding-bottom: 60px; border: none;}
  #header #navWrap nav ul.contactLink li {padding: 0; border: none;}
  #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;}
  #header #navWrap nav ul.menuClose {position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); display: block; width: 150px; border: none; text-align: center;}
  #header #navWrap nav ul.menuClose li {border: none;}
  #header #navWrap nav ul.menuClose li::before, #header #navWrap nav ul.menuClose li::after {content: ''; top: 50%; width: 6px; height: 10px; background-image: url('images/common/angle-right-black.svg');}
  #header #navWrap nav ul.menuClose li::before {transform: translateY(-45%);}
  #header #navWrap nav ul.menuClose li::after {left: auto; right: 0; transform: scale(-1, 1); margin-top: -5px;}
  #header #navWrap nav ul.menuClose li button {background-color: transparent;}
  #header #headerPR {display: none;}
  #header #navWrap nav ul.contactLink {display: block;}
}
@media (min-width: 768px) {
  #header #navWrap nav ul.contactLink li a::before {content: none;}
}
@media (max-width: 767px) {
  #header #headerLogo {width: 250px;}
  #header label.menu_button {right: 5px; width: 60px; height: 60px;}
  #header label.menu_button span.menu_button__line {width: 30px; height: 3px; margin-top: -7px;}
  #header label.menu_button span.textArea::before {font-size: 80%;}
  #header #navWrap nav {min-height: 660px; padding: 80px 75px 0 15px;}
  #header #navWrap nav ul li.mpView {top: -65px;}
  #header #navWrap nav ul li.mpView a {height: 50px;}
  #header #navWrap nav ul.contactLink {gap: 15px; margin-top: 20px; padding-bottom: 30px;}
  #header #navWrap nav ul.contactLink li a::before {content: none;}
  #header #navWrap nav ul.contactLink li a span img {width: 200px;}
}
@media (max-width: 360px) {
  #header #headerLogo {width: 200px;}
  #header #navWrap nav ul li.mpView {top: -65px;}
  #header #navWrap nav ul li.mpView a {width: 200px;}
}

/* 共通設定
--------------------------------------------------------------------------*/
h2 {margin-bottom: 30px;}
h2 img {height: 44px;}
section > p.secIndex {position: relative; top: -60px; left: 60px; z-index: 1; display: inline-block; font-size: 20px; font-weight: 300;}
section > p.secIndex::before, section > p.secIndex::after {content: ''; top: -30px; left: -30px; background-color: #3D554F;}
section > p.secIndex::before {width: 300px; height: 1px;}
section > p.secIndex::after {width: 1px; height: 90px;}
section.textWhite > p.secIndex {color: #FFF;}
section.textWhite > p.secIndex::before, section.textWhite > p.secIndex::after {background-color: #FFF;}
.linkButton {position: relative; display: block; width: 330px; height: 70px; margin: 60px auto 0; padding: 10px 70px 0 0; text-align: center;}
.linkButton::before {content: ''; z-index: 1; width: inherit; height: inherit; background-image: url('images/common/linkButton-bg-green.svg');}
.linkButton .point {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin-left: 130px; display: block; width: 50px; height: 50px; background: rgba(129,157,86,0.4); border-radius: 50%; animation: blink-green 1s ease-in-out infinite none;}
@keyframes blink-green {
  0% {box-shadow: 0 0 0 0 rgba(129,157,86,0.25);}
  100% {box-shadow: 0 0 0 10px rgba(129,157,86,0.05);}
}
.linkButton.white {color: #FFF;}
.linkButton.white::before {background-image: url('images/common/linkButton-bg-white.svg');}
.linkButton.white .point {background: rgba(255,255,255,0.4); animation: blink-white 1s ease-in-out infinite none;}
@keyframes blink-white {
  0% {box-shadow: 0 0 0 0 rgba(255,255,255,0.25);}
  100% {box-shadow: 0 0 0 10px rgba(255,255,255,0.05);}
}
.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: 1230px) {
}
@media (max-width: 1229px) {
  .linkButton {width: 297px; height: 63px; padding: 8px 63px 0 0;}
  .linkButton .point {margin-left: 117px; width: 45px; height: 45px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  h2 {margin-bottom: 25px;}
  h2 img {height: 35px;}
  section > p.secIndex {top: -50px; left: 50px; font-size: 18px;}
  section > p.secIndex::before, section > p.secIndex::after {top: -25px; left: -25px;}
  section > p.secIndex::before {width: 250px;}
  section > p.secIndex::after {height: 75px;}
  .linkButton {margin: 50px auto 0;}
}
@media (max-width: 991px) and (min-width: 768px) {
  h2 {margin-bottom: 20px;}
  h2 img {height: 30px;}
  section > p.secIndex {top: -40px; left: 40px; font-size: 16px;}
  section > p.secIndex::before, section > p.secIndex::after {top: -20px; left: -20px;}
  section > p.secIndex::before {width: 200px;}
  section > p.secIndex::after {height: 50px;}
  .linkButton {margin: 40px auto 0;}
}
@media (max-width: 767px) {
  h2 {margin-bottom: 15px;}
  h2 img {height: 26px;}
  section > p.secIndex {top: -30px; left: 30px; font-size: 14px;}
  section > p.secIndex::before, section > p.secIndex::after {top: -15px; left: -15px;}
  section > p.secIndex::before {width: 150px;}
  section > p.secIndex::after {height: 40px;}
  .linkButton {margin: 30px auto 0;}
}
@media (max-width: 360px) {
  h2 img {height: 22px;}
  .linkButton {width: 264px; height: 56px; padding: 6px 56px 0 0;}
  .linkButton .point {margin-left: 105px; width: 40px; height: 40px;}
}

/* .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; font-size: 16px; line-height: 1.4;}
.newsArea article a .textArea ul {position: relative; flex-wrap: wrap; gap: 0;}
.newsArea article a .textArea ul li.blogCategory {width: 150px; height: 30px; background-color: #819D56;}
.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 {color: #3D554F; font-size: 14px; line-height: 30px;}
.newsArea article a .imgArea {width: 100%; margin-bottom: 10px; padding-top: 65%;}
@media (max-width: 1229px) {
  .newsArea article a .textArea h3 {font-size: 14px;}
}
@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: 120px; 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;}
}
@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: 100px; 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 article a .textArea ul li.blogCategory {padding-right: 10px;}
  .newsArea article a .textArea ul li.blogDate {padding-left: 10px;}
}
@media (max-width: 767px) {
  .newsArea {padding: 15px 0 0;}
  .newsArea article a {flex-direction: row-reverse; flex-wrap: wrap; height: 100px;}
  .newsArea article a .textArea {width: 60%; height: 100px; padding: 0 0 0 5px;}
  .newsArea article a .textArea h3 {height: 70px; line-height: 1.3; overflow: hidden;}
  .newsArea article a .imgArea {width: 40%; height: 100px; margin-bottom: 0; padding: 0;}
  .newsArea article a .textArea ul li.blogCategory {padding-right: 10px;}
  .newsArea article a .textArea ul li.blogDate {padding-left: 10px;}
}
@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 {padding-right: 5px;}
  .newsArea article a .textArea ul li.blogDate {padding-left: 5px;}
}

/* #secContact設定
--------------------------------------------------------------------------*/
#secContact {position: relative; width: 100%; padding: 120px 0; background-color: #819D56;}
#secContact .container > .dispFlex {gap: 0;}
#secContact .container > .dispFlex .leftArea {position: relative; justify-content: center; align-items: center; width: 50%;}
#secContact .container > .dispFlex .leftArea::after {content: ''; top: 50%; left: auto; right: 0; transform: translateY(-50%) rotate(30deg); width: 1px; height: 240px; background-color: #FFF;}
#secContact .container > .dispFlex .leftArea h2 {margin: 0;}
#secContact .container > .dispFlex .rightArea {position: relative; top: 10px; flex-direction: column; width: 50%;}
#secContact .container > .dispFlex .rightArea p {color: #FFF; line-height: 1.8; text-align: center;}
#secContact .container > .dispFlex .rightArea a {margin-top: 0;}
@media (max-width: 1229px) and (min-width: 992px) {
  #secContact {padding: 100px 0;}
  #secContact .container > .dispFlex .leftArea {width: 45%;}
  #secContact .container > .dispFlex .leftArea::after {height: 220px;}
  #secContact .container > .dispFlex .rightArea {width: 55%;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #secContact {padding: 80px 0;}
  #secContact .container > .dispFlex .leftArea {width: 40%;}
  #secContact .container > .dispFlex .leftArea::after {height: 200px;}
  #secContact .container > .dispFlex .rightArea {width: 60%;}
}
@media (max-width: 767px) {
  #secContact {padding: 60px 0;}
  #secContact .container > .dispFlex {flex-direction: column; gap: 30px;}
  #secContact .container > .dispFlex .leftArea {width: 100%;}
  #secContact .container > .dispFlex .leftArea::after {content: none;}
  #secContact .container > .dispFlex .rightArea {width: 100%;}
  #secContact .container > .dispFlex .rightArea a {margin-top: 30px;}
}

/* #footer設定
--------------------------------------------------------------------------*/
#footer {position: relative; padding: 120px 0 0; background-color: #F4F7EC;}
#footer .container nav {gap: 120px;}
#footer .container nav ul li.listParent {margin-bottom: 45px;}
#footer .container nav ul li:last-of-type.listParent {margin-bottom: 0;}
#footer .container nav ul:nth-of-type(3) li.listParent {margin-bottom: 15px;}
#footer .container nav ul li.listChild {position: relative; margin-bottom: 15px; padding-left: 16px;}
#footer .container nav ul li:last-of-type.listChild {margin-bottom: 0;}
#footer .container nav ul li.listChild::before {content: '-'; left: 5px;}
#footer .container dl dt a {display: block;}
#footer .container dl dd address span {display: block; margin-top: 15px;}
#footer .container dl dd address span a {margin-right: 18px;}
#footer #copyLight {display: block; width: 100%; margin: 120px 0 0; padding: 15px; background-color: #819D56; color: #FFF; font-weight: 500; 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: #819D56;}
#pageTop a img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 15px; height: 10px;}
@media (max-width: 1229px) {
  #footer .container nav ul li.listParent {margin-bottom: 44px;}
  #footer .container nav ul li.listChild {padding-left: 14px;}
  #footer .container dl dt a {width: 280px;}
  #footer .container dl dd {text-align: center;}
  #footer .container nav ul li.listChild::before {left: 4px;}
}
@media (max-width: 1229px) and (min-width: 992px) {
  #footer {padding: 100px 0 0;}
  #footer .container nav {gap: 100px;}
  #footer #copyLight {margin: 100px 0 0;}
}
@media (min-width: 992px) {
  #footer .container {justify-content: space-between;}
  #footer .container nav {order: 2;}
  #footer .container dl {order: 1;}
}
@media (max-width: 991px) {
  #footer .container {flex-direction: column;}
  #footer .container nav {justify-content: center;}
  #footer .container dl dt a {margin: 0 auto;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #footer {padding: 80px 0 0;}
  #footer .container nav {gap: 80px;}
  #footer .container dl {margin-top: 80px;}
  #footer #copyLight {margin: 80px 0 0;}
}
@media (max-width: 767px) {
  #footer {padding: 60px 0 0;}
  #footer .container nav {flex-direction: column; align-items: center; gap: 30px;}
  #footer .container nav ul {width: 150px;}
  #footer .container nav ul li.listParent {margin-bottom: 30px;}
  #footer .container dl {margin-top: 60px;}
  #footer #copyLight {margin: 60px 0 0;}
}