*, *::before, *::after { box-sizing: border-box; }

body { color: #fff; background: #192528; font-size: 1.5vw; letter-spacing: .1em; line-height: 1.6; font-family: noto-sans-cjk-jp, sans-serif; font-weight: 300; font-style: normal; font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media screen and (max-width: 599px) { body { font-size: 3vw; } }

_:lang(x)::-ms-backdrop, .selector { font-family: "Segoe UI", Meiryo, sans-serif; }

.fnt-SSM6 { font-family: tot-shizukasmudgemin-stdn, sans-serif; font-weight: 600; font-style: normal; letter-spacing: normal; }

p { line-height: 1.8; }

img { border: 0; vertical-align: top; }

input, select { position: relative; top: 1px; }

table, th, td { border-collapse: collapse; border-spacing: 0; }

ul, li { list-style: none; }

a:link, a:visited { color: #fff; text-decoration: none; transition: opacity 0.5s; }
a:hover, a:active { opacity: .6; }

#cover { width: 100%; height: 100%; position: fixed; background: #192528; top: 0; left: 0; z-index: 10000; }

#loader { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 300px; height: 250px; }
#loader img { width: 100%; height: auto; }
@media screen and (max-width: 599px) { #loader { width: 210px; height: 175px; } }

#wrapper { overflow: hidden; position: relative; }

#page-top { opacity: 0; position: fixed; bottom: 20px; right: 20px; z-index: 9000; width: 40px; pointer-events: none; }
#page-top img { width: 100%; height: auto; }
#page-top.fade { opacity: 1; transition: opacity .5s; pointer-events: auto; }

.dd599 { display: none; }
@media screen and (max-width: 599px) { .dd599 { display: block !important; } }

@media screen and (max-width: 599px) { .nn599 { display: none !important; } }

.fadeinS, .fadein1, .fadein2, .fadein3, .fadein4, .fadein5, .fadein6, .fadeinF { opacity: 0; transform: translateY(30px); transition: opacity 1s ease-in, transform 1s ease-out; }
.fadeinS.active, .fadein1.active, .fadein2.active, .fadein3.active, .fadein4.active, .fadein5.active, .fadein6.active, .fadeinF.active { opacity: 1; transform: translateY(0); }

#header { position: fixed; top: 0; left: 0; z-index: 900; padding: 2em 0 0 5%; }
@media screen and (max-width: 599px) { #header { padding: 1.5em 0 0 5%; } }
#header h1 { width: 20vw; filter: drop-shadow(2px 1px 0px rgba(0, 0, 0, 0.8)); }
@media screen and (max-width: 599px) { #header h1 { width: 55%; filter: drop-shadow(2px 1px 0px rgba(0, 0, 0, 0.5)); } }
#header h1 img { width: 100%; height: auto; }

main { position: relative; }
main section { position: relative; }
main section#topMainSct { background: url("../img/top_main_pic.webp") no-repeat center center/cover; height: 100vh; }
@media screen and (max-width: 599px) { main section#topMainSct { height: 58vh; background-position: 54% center; } }
main section#topMainSct .txtB { position: absolute; left: 7%; bottom: 4.5em; }
@media screen and (max-width: 599px) { main section#topMainSct .txtB { bottom: 4em; } }
main section#topMainSct .txtB .head { font-size: 470%; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); letter-spacing: -.03em; line-height: 1.6; }
@media screen and (max-width: 599px) { main section#topMainSct .txtB .head { font-size: 540%; line-height: 1.1; margin-bottom: .3em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } }
main section#topMainSct .txtB .txt { font-size: 140%; font-weight: 600; letter-spacing: .2em; padding-left: .4em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); }
@media screen and (max-width: 599px) { main section#topMainSct .txtB .txt { font-size: 130%; letter-spacing: .1em; } }
main section#topAboutSct { background: url("../img/top_about_pic.webp") no-repeat center center/cover; height: 100vh; overflow: hidden; }
@media screen and (max-width: 599px) { main section#topAboutSct { height: 215vw; background-size: 100%; background-position: center top; } }
main section#topAboutSct .headB { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); writing-mode: vertical-rl; white-space: nowrap; }
@media screen and (max-width: 599px) { main section#topAboutSct .headB { transform: translateX(-50%) translateY(-95%); } }
main section#topAboutSct .headB .head { font-size: 12.5vh; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); letter-spacing: -.03em; line-height: 1.1; }
@media screen and (max-width: 599px) { main section#topAboutSct .headB .head { font-size: 12vw; } }
main section#topAboutSct .headB .head span { display: block; padding-top: 1.8em; }
main section#topAboutSct .spBox { font-weight: 600; }
@media screen and (max-width: 599px) { main section#topAboutSct .spBox { position: absolute; width: 100%; padding: 0 6%; bottom: 3em; font-size: 120%; } }
main section#topAboutSct .spBox .txt1 { position: absolute; left: 7%; top: 9em; text-shadow: 1px 1px 2px black; }
@media screen and (max-width: 599px) { main section#topAboutSct .spBox .txt1 { position: relative; left: inherit; top: inherit; display: block; padding: .8em .6em .8em 1em; margin-bottom: 1em; background: rgba(0, 0, 0, 0.5); } }
main section#topAboutSct .spBox .txt2 { position: absolute; right: 10%; bottom: 3.5em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }
@media screen and (max-width: 599px) { main section#topAboutSct .spBox .txt2 { position: relative; right: inherit; bottom: auto; display: block; padding: .8em .6em .8em 1em; background: rgba(0, 0, 0, 0.5); } }
main section#topAboutSct .wind1 { position: absolute; z-index: 50; top: -3em; left: -30%; width: 170%; }
@media screen and (max-width: 599px) { main section#topAboutSct .wind1 { top: -3.9em; left: -141%; width: 415%; } }
main section#topAboutSct .wind1 img { width: 100%; height: auto; }
main section#topAboutSct .wind2 { position: absolute; z-index: 50; bottom: -1em; left: -48%; width: 170%; }
@media screen and (max-width: 599px) { main section#topAboutSct .wind2 { bottom: -1.3em; left: -185%; width: 415%; } }
main section#topAboutSct .wind2 img { width: 100%; height: auto; }

#footer { position: relative; }
#footer .corpB { padding: 4em 0; text-align: center; }
#footer .corpB .logo { width: 25vw; margin: 0 auto; }
@media screen and (max-width: 599px) { #footer .corpB .logo { width: 40%; } }
#footer .corpB .logo img { width: 100%; height: auto; }
#footer .corpB .add { font-size: 80%; }
@media screen and (max-width: 599px) { #footer .corpB .add { font-size: 125%; } }
#footer .corpB .tel { font-size: 80%; }
@media screen and (max-width: 599px) { #footer .corpB .tel { font-size: 125%; } }
#footer .cpr { background: #fffdf8; padding: 1em 0; text-align: center; color: #000; font-size: 80%; letter-spacing: .02em; }