@charset "UTF-8";
/* CSS Document */


/* Header */
header { height: auto; overflow: visible; }

#keyvisual { width: 100%; position: relative; }
#slider { width: 100%; margin-bottom: 10rem; position: relative; z-index: -1; }
#slider ul { width: 100%; position: relative; }
#slider ul::before { content: ""; width: 70%; height: 0; padding-top: 85%; background: #E5E5E5; clip-path: polygon(0% 0%, 100% 50.5%, 0% 100%); position: absolute; top: 52.3%; left: 0; }
#slider ul::after { content: ""; width: 30%; height: 0; padding-top: 18.4%; background: #FFF; clip-path: polygon(0% 100%, 100% 0%, 100% 100%); position: absolute; bottom: 0; right: 0; }
#slider ul li { width: 100%; height: 0; padding-top: 90%; object-fit: cover; position: relative; overflow: hidden; }
#slider ul li img { width: auto; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1; }
#catch-box { width: min(92%,960px); position: absolute; top: 60%; left: 50%; transform: translateX(-50%); }
#catch-box h1 { font-size: 2.8rem; line-height: 1.2; margin-bottom: 7%; }
#catch-box h1 strong { font-weight: normal; text-align: center; width: 18em; margin-left: -1em; padding: .5rem 0; background: #FFF; display: block; animation-name: catch1; animation-duration: 2s; transition-timing-function: easelnOut; }
#catch-box h1 span { text-align: center; width: 12em; margin: .3em 0 0 1em; padding: .5rem 0; background: #FFF; display: block; animation-name: catch2; animation-duration: 2s; transition-timing-function: easelnOut; }
#copy-box { width: min(92%,960px); position: absolute; top: calc(60% + 12rem); left: 50%; transform: translateX(-50%); }
#copy-box p { font-size: 1.1rem; line-height: 1.8; text-align: justify; padding-bottom: .5em; text-shadow: #E5E5E5 2px 0px 2px, #E5E5E5 -2px 0px 2px, #E5E5E5 0px -2px 2px, #E5E5E5 -2px 0px 2px, #E5E5E5 2px 2px 2px, #E5E5E5 -2px 2px 2px, #E5E5E5 2px -2px 2px, #E5E5E5 -2px -2px 2px, #E5E5E5 1px 2px 2px, #E5E5E5 -1px 2px 2px, #E5E5E5 1px -2px 2px, #E5E5E5 -1px -2px 2px, #E5E5E5 2px 1px 2px, #E5E5E5 -2px 1px 2px, #E5E5E5 2px -1px 2px, #E5E5E5 -2px -1px 2px, #E5E5E5 1px 1px 2px, #E5E5E5 -1px 1px 2px, #E5E5E5 1px -1px 2px, #E5E5E5 -1px -1px 2px; }
#copy-box p span::before { content: "\A"; white-space: pre; }
@keyframes catch1 {
  from { transform: translateX(-100vw); }
  50% { transform: translateX(0); }
  to { transform: translateX(0); }
}
@keyframes catch2 {
  from { transform: translateX(-100vw); }
  25% { transform: translateX(-100vw); }
  90% { transform: translateX(0); }
  to { transform: translateX(0); }
}
@media only screen and (min-width: 1500px) {
  #slider { margin-bottom: 0; }
}
@media only screen and (max-width: 900px) {
  #catch-box { bottom: 25%; }
  #catch-box h1 { font-size: 2.2rem; line-height: 1.2; }
  #copy-box { margin-top: -8%; }
  #copy-box p { font-size: 1rem; line-height: 1.8; }
}
@media only screen and (max-width: 960px) {
  #slider { margin-bottom: 13rem; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
  header { height: 70px; border-top: none; background: #7E9C4F; }
  #slider { z-index: 3; margin: -50px 0 0 0; }
  #slider::before { content: ""; width: 70%; height: 0; padding-top: 40%; background: #7E9C4F; clip-path: polygon(0 0, 100% 0, 0 100%); position: absolute; top: 0; left: 0; }
  #slider::after { content: ""; width: 30%; height: 0; padding-top: 15%; background: #7E9C4F; clip-path: polygon(0 0, 100% 0, 100% 100%); position: absolute; top: 0; right: 0; }
  #slider ul::before { top: 57%; }
  #slider ul li { padding-top: 100%; }
  #catch-box { top: 65vw; bottom: auto; }
  #catch-box h1 { font-size: 4.8vw; margin-bottom: 15%; }
  #catch-box h1 strong, #catch-box h1 span { margin-left: -4vw; }
  #copy-box { margin-bottom: 2rem; padding-top: 10vw; position: relative; top: 0; z-index: 10; }
  #copy-box p { font-size: 1rem; line-height: 1.6; text-shadow: none; }
  #copy-box p span::before { content: ""; }
}


.index-column { margin-bottom: 6rem; }
.index-column h2 { width: min(92%,960px); margin: 0 0 -1px calc((100vw - 960px) / 2); }
.index-column img { width: min(70%,260px); }
#message h2 { margin-left: 50px; }
.index-column .index-base { width: min(100%,calc(1060px + calc((100vw - 1060px) / 2))); background: #7E9C4F; }
.index-column .inner-box { width: min(92%,960px); margin-left: calc((100vw - 960px) / 2); padding-top: 2%; position: relative; }
.index-column .inner-box p { line-height: 1.8; text-align: justify; color: #FFF; padding-bottom: .8rem; }
.index-column .inner-box p span::before { content: "\A"; white-space: pre; }
#message { margin-left: calc((100vw - 1060px) / 2); }
#business .inner-box { padding-bottom: 11%; }
#message .inner-box { margin-left: 50px; padding-bottom: 22%; }
#benefit .inner-box { padding-bottom: 1rem; }
.index-column ul.link-btn { margin-bottom: 1.5rem; display: flex; }
.index-column ul.link-btn li { font-size: 1.1rem; line-height: 1.2; width: 12em; padding-right: .5rem; }
.index-column ul.link-btn li a { color: #7E9C4F; padding: .3rem .5rem; background: #FFF; display: block; position: relative; }
.index-column ul.link-btn li a::before { content: ""; width: 100%; height: 100%; background: #FF3; mix-blend-mode: multiply; position: absolute; top: 0; left: 0; z-index: 0; transform: skewX(-45deg) scale(0,1); transform-origin: left top; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); }
.index-column ul.link-btn li a::after { content: ""; width: .5em; height: .7em; background: #7E9C4F; clip-path: polygon(0 0, 100% 50%, 0 100%); position: absolute; top: 50%; right: .5em; transform: translateY(-50%); }
.index-column ul.link-btn li a:hover::before { transform: skewX(0deg) scale(1,1); }
#business ul.images { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; position: absolute; left: 0; }
#business ul.images li { width: 24%; }
#business ul.images li img { width: 100%; height: auto; }

#message ul.profile { width: 100%; display: flex; justify-content: space-between; position: absolute; left: 0; }
#message ul.profile li { width: 32%; }
#message ul.profile li a { background: #FFF; border: solid 1px #7E9C4F; display: block; }
#message ul.profile li a:hover dl dt img { opacity: .8; }
#message ul.profile li a dl { width: calc(100% - 2rem); margin: 1rem auto; position: relative; }
#message ul.profile li a dl dt { width: 100%; margin-bottom: 1rem; }
#message ul.profile li a dl dt img { width: 100%; }
#message ul.profile li a dl dd h3 { font-size: 1.2rem; line-height: 1.2; text-align: center; color: #FFF; width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; position: absolute; top: -1.6rem; right: 0; }
#message ul.profile li a dl dd h3 strong { font-weight: normal; display: block; position: relative; z-index: 2; }
#message ul.profile li a dl dd h3::after { content: ""; width: 3.5rem; height: 3.5rem; border: solid 1px #FFF; background: #7E9C4F; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; transform: rotate(-45deg) skew(calc(45deg / 2), calc(45deg / 2)); z-index: 1; }
#message ul.profile li a dl dd h4 img { width: 100%; height: auto; }

@media only screen and (max-width: 1060px) {
  .index-column .index-base { width: 96% }
  #message .index-base { margin-left: 4%; }
}
@media only screen and (max-width: 960px) {
  .index-column { margin-bottom: 3rem; }
  #business { margin-bottom: 4rem; }
  .index-column h2, #message h2 { margin-left: 4%; }
  .index-column .inner-box, #message .inner-box { margin-left: 4%; }
  #message { margin-left: 0; }
  #business .inner-box { padding-bottom: 14%; }
  #message .inner-box { padding-bottom: 27%; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
  .index-column .inner-box p span::before { content: ""; }
  #business .inner-box, #message .inner-box { padding-bottom: 2%; }
  #business ul.images { position: relative; }
  #business ul.images li { width: 49%; margin-bottom: 2%; }
  #message ul.profile { flex-direction: column; position: relative; }
  #message ul.profile li { width: 100%; margin-bottom: 2%; }
}


#comp-profile { width: min(100%,1060px); margin: 4rem auto; }
#comp-profile h2 { margin: 0 0 -1px min(4svw,50px); }
#comp-profile img { width: min(70%,260px); }
#comp-profile-box { padding: 2rem min(4svw,50px); background: #999; background: linear-gradient(180deg, #999 0%, #BBB 100%); }
#comp-profile-box ul { border-top: dotted 1px #FFF; }
#comp-profile-box ul li { line-height: 1.4; color: #FFF; padding: .5em 0 .4em 8em; border-bottom: dotted 1px #FFF; position: relative; }
#comp-profile-box ul li h3 { position: absolute; left: 0; }
#comp-map { width: 100%; height: 400px; margin-top: 2px; }
#comp-map iframe { width: 100%; height: 100%; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #comp-profile { margin: 3rem auto 2rem auto; }
  #comp-profile-box ul li { padding: .5em 0 .4em 0; }
  #comp-profile-box ul li h3 { font-weight: bold; padding-bottom: .2rem; position: relative; }
  #comp-profile-box ul li h3::before { content: "■"; }
}