@charset "utf-8";

.fs12 { font-size: 0.75em; }
.fs24 { font-size: 1.5em; }

body { width: 100%; height: 100%; background: #000000; }
.section { position: relative; display: none; }
.svg-wrapper { position: relative; width: 100%; pointer-events: none; }
.svg-wrapper.absolute { position: absolute; left: 0; right: 0; top: 0; }
.svg-wrapper:before { content: ''; display: block; }
.svg-content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }
.svg-content svg { width: 100%; height: auto; }

.works-modal table { width: 100%; }
.works-modal th { width: 40%; }
.works-modal td:last-child { width: 60%; }

#header { display: none; }
#footer { display: none; }

#section01 .bg01:before { content: ''; display: block; padding-top: calc(786 / 1400 * 100%); }
#section01 .img01 { max-width: 100vw; margin: 0 auto; bottom: 10%; top: auto; }
#section01 .img01:before { content: ''; display: block; padding-top: calc(786 / 1400 * 100%); }
#section01 .news { background: #000; position: relative; z-index: 10; padding: 10px 0; }
#section01 .news ul { max-width: 960px; margin: 0 auto; position: relative; }
#section01 .news ul li { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
#section01 .news .news-post { display: flex; align-items: center; justify-content: space-around; }
#section01 .news .news-post * { color: #fff; }
#section01 .news .news-post .title a { text-decoration: underline; }
#section01 .news .news-post .banner { opacity: 0; overflow: hidden; }
#section01 .news .news-post .banner img { transform: scale(1.2); transition: transform 0.5s; }
#section01 .news .news-post .title { opacity: 0; position: relative; }
#section01 .news .news-post .description { opacity: 0; position: relative; }

#section02 { margin-top: -1px; }
#section02 .bg01:before { content: ''; display: block; padding-top: calc(706 / 1400 * 100%); }
#section02 .bg02:before { content: ''; display: block; padding-top: calc(706 / 1400 * 100%); }
#section02 .text01:before { content: ''; display: block; padding-top: calc(706 / 1400 * 100%); }
#section02 .img01:before { content: ''; display: block; padding-top: calc(706 / 1400 * 100%); }

#section03 { padding: 0 0 15%; }
#section03 .bg01:before { padding-top: calc(700 / 1400 * 100%); }
#section03 .bg02 { top: 30%; }
#section03 .bg02:before { padding-top: calc(889 / 1400 * 100%); }
#section03 .bg03 { top: 50%; }
#section03 .bg03:before { padding-top: calc(1839 / 1400 * 100%); }
#section03 .bg04 { top: auto; bottom: 0; }
#section03 .bg04:before { padding-top: calc(493 / 1400 * 100%); }
#section03 .img01:before { padding-top: calc(1528 / 1400 * 100%); }
#section03 .works { max-width: 800px; width: 90%; margin: 0 auto; position: relative; z-index: 10; }
#section03 .works h2 { padding: 7% 0 45%; }
#section03 .works h2 img { max-width: 15%; }
#section03 .works h3 { color: #ffffff; margin-bottom: 3%; }
#section03 .works table { color: #ffffff; width: 95%; margin-left: 5%; margin-bottom: 10%; }
#section03 .works th { width: 40%; }
#section03 .works td:last-child { width: 60%; }
#section03 .works ul { overflow: hidden; }
#section03 .works ul li { float: left; position: relative; }
#section03 .works ul li a { display: inline-block; background: #2c2c2c; color: #fff; border-radius: 100%; text-align: center; }
#section03 .works ul li a:hover { background: #202020; color: #9f9f9f; }


#section04 { background: #212121; }
#section04 .bg01:before { padding-top: calc(964 / 1400 * 100%); }
#section04 .bg02 { top: auto; bottom: 0; }
#section04 .bg02:before { padding-top: calc(2332 / 1400 * 100%); }
#section04 .bg03 { top: auto; bottom: 0; }
#section04 .bg03:before { padding-top: calc(2332 / 1400 * 100%); }
#section04 .bg04 { top: auto; bottom: 0; }
#section04 .bg04:before { padding-top: calc(2332 / 1400 * 100%); }
#section04 .bg05 { top: auto; bottom: 0; }
#section04 .bg05:before { padding-top: calc(2332 / 1400 * 100%); }
#section04 .bg06 { top: auto; bottom: 0; }
#section04 .bg06:before { padding-top: calc(2332 / 1400 * 100%); }
#section04 .text01:before { padding-top: calc(964 / 1400 * 100%); }
#section04 .gallery { max-width: 968px; width: 90%; margin: 0 auto; position: relative; z-index: 10; padding: 15% 0 113%; }
#section04 .gallery-item:after { content: ""; display: block; clear: both; }
#section04 .gallery-item h3 { color: #ffffff; text-align: center; margin-bottom: 1%; position: relative; }
#section04 .gallery-item ul > li { width: 48%; margin-bottom: 4%; position: relative; }
#section04 .gallery-item ul > li:nth-child(2n+1) { float: left; }
#section04 .gallery-item ul > li:nth-child(2n+2) { float: right; }

#section05 { margin-top: -90%; padding-top: 5%; }
#section05 .text01:before { padding-top: calc(720 / 1400 * 100%); }
#section05 .map iframe { display: block; width: 100%; height: 400px; }

#section06 { background: #f5f5f5; }
#section06 .bg01 { z-index: 10; }
#section06 .bg01:before { padding-top: calc(1493 / 1400 * 100%); }
#section06 .bg02:before { padding-top: calc(1074 / 1400 * 100%); }
#section06 .bg03:before { padding-top: calc(1074 / 1400 * 100%); }
#section06 .text01 { z-index: 20; }
#section06 .text01:before { padding-top: calc(1074 / 1400 * 100%); }
#section06 .contact { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 20; }
#section06 .contact input[type="text"] { border: 1px solid #e1e1e1; border-radius: 4px; vertical-align: top; padding: 2%; }
#section06 .contact textarea { border: 1px solid #e1e1e1; border-radius: 4px; vertical-align: top; padding: 2%; height: 100%; }
#section06 .contact button { vertical-align: top; }
#section06 .contact .form-group { position: absolute; left: 35%; right: 10%; max-width: 460px; }
#section06 .contact .form-group:nth-child(1) { top: 34.2%; }
#section06 .contact .form-group:nth-child(2) { top: 39.8%; }
#section06 .contact .form-group:nth-child(3) { top: 45.4%; }
#section06 .contact .form-group:nth-child(4) { top: 51.0%; }
#section06 .contact .form-group:nth-child(5) { top: 56.6%; bottom: 30%; }
#section06 .contact .form-group:nth-child(6) { bottom: 20%; text-align: center; }
#section06 .contact .form-group:nth-child(6) button { width: 20%; }
#section06 .contact .form-group-single > * { width: 100%; }
#section06 .contact .form-group-double > * { width: 47%; }
#section06 .contact .form-group-double > *:nth-child(1) { float: left; }
#section06 .contact .form-group-double > *:nth-child(2) { float: right; }

#section07 { background: #ffffff; }
#section07 .bg01:before { padding-top: calc(925 / 1400 * 100%); }
#section07 .bg02:before { padding-top: calc(925 / 1400 * 100%); }
#section07 .bg03:before { padding-top: calc(925 / 1400 * 100%); }
#section07 .bg04:before { padding-top: calc(925 / 1400 * 100%); }
#section07 .text01:before { padding-top: calc(925 / 1400 * 100%); }




/**
 * SP
 */
@media screen and (max-width: 640px) {

.works-modal th, .works-modal td { font-size: 2.0vw; }

#main { margin: 0 -30%; }

#section01 .img01 { bottom: 15%; }
#section01 .news ul { width: 95.0vw; }
#section01 .news .news-post .banner { max-width: 20%; }
#section01 .news .news-post .title { padding: 0 10px; }
#section01 .news .news-post .title h2 { font-size: 3.0vw; }
#section01 .news .news-post .title a { font-size: 1.5vw; display: block; }
#section01 .news .news-post .description p { font-size: 1.5vw; }

#section02 .text01 { font-size: 1.3em; }

#section03 .bg03 { margin-left: -15%; }
#section03 .works { width: 90.0vw; }
#section03 .works h3 { font-size: 3.0vw; }
#section03 .works th, #section03 .works td { font-size: 2.0vw; }
#section03 .works ul { text-align: center; }
#section03 .works ul li { width: 20%; margin-bottom: 5%; }
#section03 .works ul li a { width: 40px; height: 40px; line-height: 40px; font-size: 12px; }

#section04 .gallery { width: 90.0vw; }
#section04 .gallery-item h3 { font-size: 3.0vw; }

#section05 .text01 { font-size: 1.3em; }
#section05 .map { width: 100.0vw; margin: 0 auto; }

#section06 .bg02 { margin-left: -15%; }
#section06 .bg03 { margin-left: -15%; }
#section06 .text01 { font-size: 1.3em; }
#section06 .contact { width: 100.0vw; margin: 0 auto; }
#section06 .contact input[type="text"] { font-size: 2.0vw; }
#section06 .contact textarea { font-size: 2.0vw; }
#section06 .contact .form-group:nth-child(6) button { margin-left: -30%; }

#section07 .bg01 { margin-left: -5%; }
#section07 .bg02 { margin-left: -5%; }
#section07 .text01 { font-size: 1.3em; }

}

/**
 * PC・タブレット
 */
@media screen and (min-width: 641px) {

.works-modal th, .works-modal td { font-size: 1.25vw; }

#main { margin: 0 -20%; }

#section01 .news ul { width: 95.0vw; }
#section01 .news .news-post .banner { max-width: 20%; }
#section01 .news .news-post .title h2 { font-size: 2.0vw; }
#section01 .news .news-post .title a { font-size: 1.25vw; }
#section01 .news .news-post .description p { font-size: 1.25vw; }

#section03 .bg03 { margin-left: -10%; }
#section03 .works { width: 90.0vw; }
#section03 .works h3 { font-size: 1.5vw; }
#section03 .works th, #section03 .works td { font-size: 1.25vw; }
#section03 .works ul { text-align: center; }
#section03 .works ul li { width: 14.28%; margin-bottom: 5%; }
#section03 .works ul li a { width: 52px; height: 52px; line-height: 52px; font-size: 14px; }

#section04 .gallery { width: 90.0vw; }
#section04 .gallery-item h3 { font-size: 1.5vw; }

#section05 .map { width: 100.0vw; margin: 0 auto; }

#section06 .bg02 { margin-left: -10%; }
#section06 .bg03 { margin-left: -10%; }
#section06 .contact { width: 100.0vw; margin: 0 auto; }
#section06 .contact input[type="text"] { font-size: 1.25vw; }
#section06 .contact textarea { font-size: 1.25vw; }

}

/**
 * PC
 */
@media screen and (min-width: 960px) {

.works-modal th, .works-modal td { font-size: 12px; }

#main { margin: 0; }

#section01 .news .news-post .title h2 { font-size: 24px; }
#section01 .news .news-post .title a { font-size: 12px; }
#section01 .news .news-post .description p { font-size: 12px; }

#section03 .bg03 { margin-left: 0; }
#section03 .bg04 { margin-left: 0; }
#section03 .works { width: 90%; }
#section03 .works h3 { font-size: 18px; }
#section03 .works th, #section03 .works td { font-size: 12px; }
#section03 .works ul { text-align: left; }

#section04 .gallery { width: 90%; }
#section04 .gallery-item h3 { font-size: 18px; }

#section05 .map { width: 100%; }

#section06 .bg02 { margin-left: 0; }
#section06 .bg03 { margin-left: 0; }
#section06 .contact { width: auto; margin: 0 auto; }
#section06 .contact input[type="text"] { font-size: 12px; }
#section06 .contact textarea { font-size: 12px; }

}