@charset "UTF-8";
/* top */
.top {position: relative; width: 100%; height: 100vh; background: url("../images/index/bk_trim.png") top / cover; border: 40px solid white; box-sizing: border-box; margin-bottom: 120px;}
.top .text {position: absolute; left: 120px; bottom:50px; font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 5vw; line-height:1.1em;}
.top .text span.caption { display: block; font-size: 70%; font-weight: 400;}
.top .text span.note { display: block; font-size: 22%; font-family: '游ゴシック体 Pr6N D', sans-serif; font-weight: 300; letter-spacing: 0.3em;}
@media all and (max-width: 1299px) {
.top .text {left: 80px;}
}
@media all and (orientation: portrait) {
.top {background: url("../images/index/bksp_trim.png") top / cover; border: 20px solid white;}
.top .text {left: 30px; bottom:20px;}
.top .text {font-size: 8vw;}
.top .text span.caption { font-size: 80%;}
.top .text span.note { font-size: 34%; font-weight: 300;}
}
@supports (-webkit-touch-callout: none) {
/* The hack for Safari */
.top { height: -webkit-fill-available; width: -webkit-fill-available; box-sizing: inherit;}
}

/* top_scroll */
.top .scroll {display: inline-block; position: absolute; right: 14px; bottom: -160px; padding: 10px 10px 210px; overflow: hidden; color: #000; font-size: 14px; font-family: 'Barlow Condensed', sans-serif; font-weight: 400; line-height: 1; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; writing-mode: vertical-lr;}
.top .scroll::after {content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 200px; background: rgba(120, 120, 120, 1.0);}
.top .scroll::after {animation: sdl 3s cubic-bezier(1, 0, 0, 1) infinite;}
.top .scroll::before {content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 200px; background: rgba(210, 210, 210, 1.0);}
@media all and (max-width: 767px) {
.top .scroll {bottom: -120px; padding: 10px 10px 160px;}
.top .scroll::after {height: 150px;}
.top .scroll::before {height: 150px;}
}
@keyframes sdl {
0% {transform: scale(1, 0); transform-origin: 0 0;}
50% {transform: scale(1, 1); transform-origin: 0 0;}
51% {transform: scale(1, 1); transform-origin: 0 100%;}
100% {transform: scale(1, 0); transform-origin: 100% 100%;}
}

/* section */
.section .area {margin: 0 0 240px 160px;}
.section h3 {font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 36px; color: rgba(130,180,30,1.00); margin-bottom: 40px;}
.section h3 span {font-family: '游ゴシック体 Pr6N D', sans-serif; font-weight: 400; font-size: 36%; padding-left: 20px; letter-spacing: 0.1em;}
.section .text {margin-bottom: 60px;}
.section .text h4.lead {font-family: '游ゴシック体 Pr6N D', sans-serif; font-weight: 300; font-size: 28px; line-height: 2em; letter-spacing: 0.1em; margin-bottom: 20px;}
.section .text .unit {font-family: '游ゴシック体 Pr6N R', sans-serif; font-weight: 300; font-size: 16px; line-height: 2.6em; letter-spacing: 0.1em;}
.section br.pc {display: block;}
.section br.sp {display: none;}
@media all and (min-width: 768px) and (max-width: 1299px) {
.section .area {margin: 0 0 120px 120px;}
.section .text {margin-right: 40px;}
}
@media all and (max-width: 767px) {
.section .area {margin: 0 20px 120px 20px;}
.section h3 {font-size: 28px; margin-bottom: 40px;}
.section .text {margin-bottom: 40px;}
.section .text h4.lead {font-weight: 300; font-size: 18px;}
.section .text .unit {font-weight: 300; font-size: 14px; line-height: 2.4em;}
.section .text .unit br { display: none;}
.section br.pc {display: none;}
.section br.sp {display: block;}
}

/* company */
.section.company .text h4.lead {font-family: '游ゴシック体 Pr6N M', sans-serif;}
.section.company ul {font-size:0;}
.section.company ul li {width: 320px; display: inline-block; margin: 0 60px 60px 0;}
.section.company ul li img {width: 320px; margin-bottom: 10px;}
.section.company ul li p {font-family: '游ゴシック体 Pr6N R', sans-serif; font-weight: 300; font-size: 14px; line-height: 2em; letter-spacing: 0.1em; text-align: center;}
@media all and (min-width: 768px) and (max-width: 1299px) {
.section.company ul li {width: 28%; min-width: 280px; margin: 0 40px 40px 0;}
.section.company ul li img {width: 100%; min-width: 280px;}
}
@media all and (max-width: 767px) {
.section.company ul li {width: 46%; margin: 0 8% 30px 0;}
.section.company ul li:nth-child(even) { margin: 0;}
.section.company ul li img {width: 100%; margin-bottom: 10px;}
.section.company ul li p {font-weight: 300; font-size: 11px; letter-spacing: 0em;}
}

/* service */
.section.service h3 {margin-bottom: 80px;}
.section.service ul {font-size:0;}
.section.service ul li {width: 480px; display: inline-block; margin: 0 60px 60px 0;}
.section.service ul li img {width: 120px; margin-right: 20px; display: inline-block;}
.section.service ul li p {width: 340px; display: inline-block; font-family: '游ゴシック体 Pr6N R', sans-serif; font-weight: 300; font-size: 14px; line-height: 2em; letter-spacing: 0.1em; vertical-align: top;}
.section.service ul li p span {display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 24px; letter-spacing: 0.05em; color: rgba(160,160,160,1.0); margin-bottom: 24px;}
@media all and (max-width: 1299px) {
.section.service ul li:nth-child(even) { margin-right: 0px;}
}
@media all and (max-width: 1140px) {
.section.service ul li {width: 41%; margin: 0 8% 30px 0;}
.section.service ul li img {width: 40%; text-align: center; margin: 0 0 0 10%;}
}
@media all and (max-width: 767px) {
.section.service h3 {margin-bottom: 40px;}
.section.service ul li {width: 46%;}
.section.service ul li img {width: 50%; margin: 0 0 0 25%;}
.section.service ul li p {width: 100%; font-weight: 300; font-size: 11px; letter-spacing: 0em;}
.section.service ul li p span {font-size: 18px; margin-bottom: 16px;}
}

/* flow */
.section.flow ul {font-size:0;}
.section.flow ul li {width: 320px; display: inline-block; margin: 0 60px 60px 0; vertical-align: top;}
.section.flow ul li img {width: 320px; margin-bottom: 30px;}
.section.flow ul li p {font-family: '游ゴシック体 Pr6N R', sans-serif; font-weight: 300; font-size: 14px; line-height: 2em; letter-spacing: 0.1em;}
.section.flow ul li p span {display: block; font-family: '游ゴシック体 Pr6N D', sans-serif; font-weight: 400; font-size: 16px; letter-spacing: 0.05em; color: rgba(130,180,30,1.00); margin-bottom: 10px;}
@media all and (min-width: 768px) and (max-width: 1299px) {
.section.flow ul li {width: 28%; min-width: 280px; margin: 0 40px 40px 0;}
.section.flow ul li img {width: 100%; min-width: 280px;}
}
@media all and (max-width: 767px) {
.section.flow ul li {width: 46%; margin: 0 8% 30px 0;}
.section.flow ul li:nth-child(even) { margin: 0;}
.section.flow ul li img {width: 100%; margin-bottom: 4px;}
.section.flow ul li p {font-weight: 300; font-size: 11px; letter-spacing: 0em;}
.section.flow ul li p span {font-size: 13px; margin-bottom: 10px;}
.section.flow ul li p br {display: none;}
}

/* qa */
.section.qa ul {font-size:0;}
.section.qa ul li {width: 100%; margin: 0 140px 80px 0;}
.section.qa ul li p {font-family: '游ゴシック体 Pr6N D', sans-serif; font-weight: 300; font-size: 15px; line-height: 2em; letter-spacing: 0.1em; padding-left:4em; text-indent:-4em; width: 84%;}
.section.qa ul li p.question { margin-bottom: 16px; padding-bottom: 20px; font-weight: 400; color: rgba(130,180,30,1.0); border-bottom: thin solid rgba(210,210,210,1.00);}
.section.qa ul li p.answer {font-family: '游ゴシック体 Pr6N R', sans-serif;}
.section.qa ul li p.question span, .section.qa ul li p.answer span {font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 42px;  margin: 0 20px 0 20px; vertical-align:-6px;}
.section.qa ul li p.answer span {color: rgba(180,180,180,1.0);}
@media all and (min-width: 768px) and (max-width: 1299px) {
}
@media all and (max-width: 767px) {
.section.qa ul li p { font-weight: 300; font-size: 13px; padding-left:4.6em; text-indent:-4.6em;}
.section.qa ul li p br {display: none;}
}