@charset "utf-8";

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.5; color: #fff; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, th, td { font-size: inherit; font-weight: inherit; }
img { border: none; max-width: 100%; height: auto; }
table { border-collapse: collapse; }
ul, ol { list-style-type: none; }
a { color: inherit; text-decoration: none; }
em { font-style: inherit; }
button, input[type="button"], input[type="submit"] { cursor: pointer; border: none; background: transparent; outline: none; appearance: none; -webkit-appearance: none; }
button img { width: 100%; }
input[type="text"], input[type="email"] { font-size: inherit; }
textarea { font-size: inherit; font-family: inherit; }
video { filter: drop-shadow(0px 0px rgba(0,0,0,0)); outline: none; border: none; }

#page { overflow: hidden; }

#footer { color: #000; text-align: center; }
#footer .logo { margin: 2.0em 0; }
#footer .address { margin: 2.0em 0; }
#footer .copyright { margin: 2.0em 0; }

.band-text { display: none; margin-top: -1px; }
.band-text .wrap { display: inline-block; position: relative; }
.band-text .text { display: inline-block; position: relative; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.band-text .band { display: block; position: absolute; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; background: #ffd900; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.band-text.init { display: block; }
.band-text.show .text { animation-name: band-text-text; animation-duration: 1.0s; animation-fill-mode: forwards; }
.band-text.show .band { animation-name: band-text-band; animation-duration: 1.0s; }
.band-text-black .text { background: #000; }
.band-text-color .text {
	background: rgb(29,32,136);
	background: linear-gradient(90deg, rgba(29,32,136,1) 0%, rgba(227,0,127,1) 100%);
}

.section-title { font-weight: bold; margin: 2.0em 0; }
.section-title.band-text .wrap { display: block; }
.section-title.band-text .text { display: block; padding: 0 0.5em; }

section.movie .movie-container { position: relative; width: 100%; height: 100vh; }
section.movie .movie-container video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
section.movie .overlay { position: absolute; z-index: 10; left: 0; bottom: -3.0vw; width: 100%; height: 52.12vw; }
section.movie .logo { position: absolute; z-index: 10; right: calc(109/1437*100%); top: calc(140/749*100%); width: calc(483/1437*100%); transform: translateX(100%); opacity: 0; transition-property: transform, opacity; transition-duration: 0.5s; transition-delay: 1.0s; }
section.movie .logo.show { transform: translateX(0); opacity: 1; }
section.movie .logo img { width: 100%; }
section.movie .catch { font-size: 2.3vw; font-weight: bold; position: absolute; z-index: 10; left: calc(147/1437*100%); top: calc(346/749*100%); }
section.movie .catch .band-text span { animation-delay: 1.5s; }
section.movie .catch .band-text .text { padding: 0.25em 1.0em 0.25em 0.5em; }
section.movie .description { font-size: 1.0vw; font-weight: bold; position: absolute; z-index: 10; right: calc(39/1437*100%); top: calc(510/749*100%); }
section.movie .description span { animation-delay: 1.5s; }
section.movie .description .band-text .text { padding: 1.0em 10.0em 1.0em 1.0em; }
section.movie .shape { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 0.5s; transition-delay: 1.0s; }
section.movie .shape.show { opacity: 1.0; }
section.movie .shape-white { background: #fff; clip-path: polygon(0 calc(416/749*100%), 100% calc(0/749*100%), 100% 100%, 0 100%); }
section.movie .shape-black { background: #000; clip-path: polygon(0 calc(492/749*100%), 100% calc(320/749*100%), 100% calc(405/749*100%), 0 calc(719/749*100%)); }
section.movie .shape-color {
	background: rgb(228,0,127);
	background: linear-gradient(90deg, rgba(228,0,127,1) 0%, rgba(29,32,136,1) 100%);
	clip-path: polygon(0 calc(280/749*100%), 100% calc(450/749*100%), 100% calc(760/749*100%), 0 calc(462/749*100%));
}

section.achievement { position: relative; overflow: hidden; background: #000; }
section.achievement .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
section.achievement .bg img { display: block; width: 100%; height: 33.33%; object-fit: cover; }
section.achievement .overlay { position: relative; z-index: 10; }
section.achievement .item { font-weight: bold; background: #000000; padding: 2.0em 3.0em; margin: 5.0em 0; transform: translateY(50px); opacity: 0; transition-property: transform, opacity; transition-duration: 0.5s; }
section.achievement .item.show { transform: translateY(0); opacity: 1; }
section.achievement .item h2 { margin-bottom: 2.0em; }
section.achievement .item h2 small { font-size: 66.66%; margin-left: 1.0em; }
section.achievement .item ul > li { margin-bottom: 1.0em; }

section.company { background: #000 url(images/bg04.png) no-repeat left top; background-size: 100%; overflow: hidden; }
section.company table { width: 100%; }
section.company table tr > * { text-align: left; }
section.company table .band-text .text { padding: 0.5em 1.0em; }

section.map { position: relative; padding-top: 41.66%; }
section.map iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

section.contact { background: #000 url(images/bg05.png) no-repeat left top; background-size: 100%; overflow: hidden; }
section.contact .description { padding: 0 1.0em; margin-bottom: 4.0em; }
section.contact .privacy { text-align: center; padding: 0 1.0em; margin: 3.0em 0; }
section.contact .privacy a { text-decoration: underline; }
section.contact .privacy img { vertical-align: middle; margin: 0 0.5em; }
section.contact .submit-button { text-align: center; margin: 3.0em; }
section.contact table { width: 100%; }
section.contact table tr > * { text-align: left; vertical-align: top; padding: 0.25em 1.0em; }
section.contact table tr > th { position: relative; padding-top: 0.5em; }
section.contact table tr > th:after { content: "必須"; position: absolute; top: 0; right: 0; color: #000; background: #ffea00; border-radius: 0.25em; padding: 0 0.5em; margin-top: 1.0em; }
section.contact :is(input[type="text"], textarea) { display: block; width: 100%; padding: 0.5em; border-radius: 0.25em; }
section.contact textarea { width: 100% !important; height: 10.0em !important; }
section.contact button[type="submit"] { position: relative; color: #000; background: #ffea00; border: none; box-shadow: none; text-shadow: none; }
section.contact button[type="submit"]::before { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 26px; height: 27px; background: url(images/icon01.png) no-repeat center; background-size: contain; }

section.thanks { background: #000; text-align: center; padding: 10.0em 0; }

#mfp_overlay { color: #000; }
.mfp_element_all { max-width: none; }


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

	:root { --base-width: 640; --to-vw: calc(100 / var(--base-width)); }

	body { font-size: calc(24vw * var(--to-vw)); }

	.visible-pc { display: none; }

	.section-header { margin-left: calc(30vw * var(--to-vw)); max-width: calc(530vw * var(--to-vw)); }
	.section-title { font-size: calc(30vw * var(--to-vw)); }

	#footer { font-size: calc(20vw * var(--to-vw)); }
	#footer .logo img { width: calc(236vw * var(--to-vw)); }

	section.movie .overlay { bottom: 0; height: 100vw; }
	section.movie .logo { width: calc(883/1437*100%); }
	section.movie .catch { font-size: 3.5vw; }
	section.movie .description { font-size: 2.0vw; }
	section.movie .description .band-text .text { padding-right: 1.0em; }

	section.achievement .items { max-width: 90%; margin-left: auto; }
	section.achievement .item h2 { font-size: calc(36vw * var(--to-vw)); }

	section.contact .description { margin-left: calc(90vw * var(--to-vw)); }
	section.contact table { display: block; }
	section.contact table :is(thead, tbody, tr, th, td) { display: block; }
	section.contact table tr > th:after { font-size: calc(20vw * var(--to-vw)); right: calc(25vw * var(--to-vw)); }
	section.contact button[type="submit"] { font-size: calc(24vw * var(--to-vw)); padding: calc(10vw * var(--to-vw)) calc(30vw * var(--to-vw)) calc(10vw * var(--to-vw)) calc(60vw * var(--to-vw)); border-radius: calc(20vw * var(--to-vw)); }
	section.contact button[type="submit"]::before { left: calc(20vw * var(--to-vw)); width: calc(26vw * var(--to-vw)); height: calc(27vw * var(--to-vw)); }

}

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

	body { font-size: 18px; }

	.visible-sp { display: none; }

	.section-header { margin-left: calc(512/1440*100%); max-width: 530px; }
	.section-title { font-size: 30px; }

	#footer { font-size: 14px; }
	#footer .logo img { width: 236px; }

	section.achievement .items { max-width: 70%; margin-left: auto; }
	section.achievement .item h2 { font-size: 36px; }

	section.company .section-body { margin-left: calc(540/1440*100%); }

	section.contact .description { margin-left: calc(540/1440*100%); }
	section.contact .table { margin-left: calc(400/1440*100%); max-width: 860px; }
	section.contact table tr > th:after { font-size: 14px; }
	section.contact button[type="submit"] { font-size: 24px; padding: 10px 30px 10px 60px; border-radius: 20px; }
	section.contact button[type="submit"]::before { left: 20px; }

}

/**
 * animation
 */
@keyframes band-text-text {
	0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
	80% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
	100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes band-text-band {
	0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 1.0; }
	80% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1.0; }
	90% { clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); opacity: 0.75; }
	100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 0; }
}