@charset "UTF-8";
/* =============================================
                    COMMON
============================================= */
body{ font-family: "dnp-shuei-mincho-pr6n", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; font-style: normal; background: #071922; color: #fff; font-weight: 400; -webkit-text-size-adjust: 100%;}
.en{ font-family: "Crimson Text", serif; font-weight: 400; font-style: normal;}
sup{ font-size: 70%; vertical-align: top; position: relative; top: -0.1em;}
img{ width: 100%;}
a{ transition: .4s;}
a:hover{ opacity: 0.6;}

/* =============================================
                    CONTENTS
============================================= */
.pc{ display: block;}
.sp{ display: none;}
#loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #071922;
  text-align: center;
}
#loading_text .progressbar-text{ font-size: 1.0rem !important;}
.fade-in{ opacity: 0; transform: translateY(20px);}

header{ display: flex; align-items: center; padding: 73px 85px 75px;}
header .logo-gdo{ margin-right: auto; flex-shrink: 0;}
header .logo-ns{ width: 298px;}
header .menu{ display: none;}

#fv{ display: flex; align-items: center; padding-right: 6.0vw;}
#fv .swiper{ width: 80%; margin: 0 auto 0 0;}
#fv nav{ min-width: 249px; margin: -34px 0 0 30px; display: block;}
#fv nav ul li{ display: flex; margin-bottom: 25px;}
#fv nav ul li:last-of-type{ margin-bottom: 0;}
#fv nav ul li::before{ flex-shrink: 0; content: ""; background: #9E9E9E; height: 1px; width: 6px; margin: 10px 15px 0 0;}
#fv nav ul li a{ font-size: 14px; line-height: 1.3; color: #fff; text-decoration: none;}

section .detail-box .h2-box,
section .detail-box .h3-box{ margin-bottom: 70px;}
section .detail-box .h2-box h2,
section .detail-box .h3-box h3{ font-size: 32px; line-height: 1.5;}
section .detail-box .h2-box p,
section .detail-box .h3-box p{ display: flex; align-items: center; margin-top: 54px;}
section .detail-box .h2-box p::before,
section .detail-box .h3-box p::before{ flex-shrink: 0; content: ""; background: #9E9E9E; height: 1px; width: 50px; margin-right: 16px;}
section .detail-box .h2-box p span,
section .detail-box .h3-box p span{ font-size: 14px;}
section .detail-box p{ font-size: 17px; line-height: 2.0;}
section .detail-box p.t-link{ font-family: "Noto Sans JP", sans-serif !important; font-size: 14px; font-weight: 400; color: #fff; text-align: right; margin-top: 40px;}
section .detail-box p.t-link a{ color: #fff; }

.bg{ background: url(../img/bg_pc.jpg) center bottom no-repeat; background-size: 100%;}
#introduction{ position: relative; z-index: 1;}
#introduction #read{ display: flex; flex-flow: row-reverse; padding-right: 11.0vw; margin-top: -60px; padding-bottom: 150px;}

#introduction #read .img-box{ flex-shrink: 1; margin-top: 280px; position: relative; margin-right: auto;}
#introduction #read .img-box figure{ overflow: hidden;}
#introduction #read .img-box figure:nth-of-type(1){ width: 76.7%; aspect-ratio: 126 / 61; margin-right: auto;}
#introduction #read .img-box figure img{ width: 100%;}
#introduction #read .detail-box{ width: 31.6%; min-width: 540px; flex-shrink: 0; margin-left: auto;}
#introduction #read .detail-box h1{ font-size: 72px; line-height: 1.2; margin-bottom: 50px;}
#introduction #read .detail-box .h2-box{ margin-bottom: 20px;}

#gallery{ position: relative; height: 210vh;}
#gallery .gallery-list{ position: sticky; top: 0; height: 70vh;}
#gallery .gallery-list li{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
#gallery .gallery-list li figure{ width: 100%; height: 100%;}
#gallery .gallery-list img{ width: 100%; height: 100%; object-fit: cover;}

#history{ display: flex; padding-right: 11.0vw; padding-top: 196px;}
#history .img-box{ flex-shrink: 1; margin-top: 114px; position: relative; margin-right: auto;}
#history .img-box h2{ position: absolute; width: 82px; top: -120px; left: 11.0vw; z-index: 1;}
#history .img-box .object{ position: absolute; width: 53.2%; top: 44%; left: 0; z-index: 1;}
#history .img-box figure{ overflow: hidden;}
#history .img-box figure:nth-of-type(1){ width: 76.7%; aspect-ratio: 126 / 61; margin-right: auto;}
#history .img-box figure img{ width: 100%;}
#history .detail-box{ width: 37%; min-width: 640px; flex-shrink: 1; margin-left: auto;}
#history .detail-box .h3-box{ text-align: right;}
#history .detail-box p{ justify-content: flex-end;}

#balance{ display: flex; flex-direction: row-reverse; padding-left: 11.0vw; padding-top: 154px;}
#balance .img-box{ flex-shrink: 1; margin-top: 114px; position: relative; padding-left: 72px;}
#balance .img-box h2{ position: absolute; width: 77px; top: -146px; right: 11.0vw; z-index: 1;}
#balance .img-box figure{ overflow: hidden;}
#balance .img-box figure:nth-of-type(1){ width: 76.7%; aspect-ratio: 126 / 61; margin-left: auto;}
#balance .img-box figure img{ width: 100%;}
#balance .detail-box{ width: 37%; min-width: 640px; flex-shrink: 1; margin-right: auto;}

#power{ display: flex; padding-right: 11.0vw; padding-top: 152px;}
#power .img-box{ flex-shrink: 1; margin-top: 114px; position: relative; padding-right: 72px;}
#power .img-box h2{ position: absolute; width: 82px; top: -132px; left: 11.0vw; z-index: 1;}
#power .img-box figure{ overflow: hidden;}
#power .img-box figure:nth-of-type(1){ width: 76.7%; aspect-ratio: 126 / 61; margin-right: auto;}
#power .img-box figure:nth-of-type(2){ width: 46.6%; aspect-ratio: 190 / 143; margin: 105px 0 0 auto;}
#power .img-box figure img{ width: 100%;}
#power .detail-box{ width: 37%; min-width: 640px; flex-shrink: 1; margin-left: auto;}
#power .detail-box .h3-box{ text-align: right;}
#power .detail-box p{ justify-content: flex-end;}

#velocity{ display: flex; flex-direction: row-reverse; padding-left: 11.0vw; padding-top: 154px;}
#velocity .img-box{ flex-shrink: 1; margin-top: 114px; position: relative; padding-left: 72px;}
#velocity .img-box h2{ position: absolute; width: 78px; top: -118px; right: 11.0vw; z-index: 1;}
#velocity .img-box .object{ position: absolute; width: 84.7%; top: -51%; right: 0; z-index: 1;}
#velocity .img-box figure{ overflow: hidden;}
#velocity .img-box figure:nth-of-type(1){ width: 76.7%; aspect-ratio: 126 / 61; margin-left: auto;}
#velocity .img-box figure:nth-of-type(2){ width: 46.6%; aspect-ratio: 190 / 143; margin: 76px auto 0 0;}
#velocity .img-box figure img{ width: 100%;}
#velocity .detail-box{ width: 37%; min-width: 640px; flex-shrink: 1; margin-right: auto;}

#control{ display: flex; padding-right: 11.0vw; padding-top: 196px; padding-bottom: 150px;}
#control .img-box{ flex-shrink: 1; margin-top: 114px; position: relative; margin-right: auto;}
#control .img-box h2{ position: absolute; width: 79px; top: -110px; left: 11.0vw; z-index: 1;}
#control .img-box .object{ position: absolute; width: 32.9%; top: -72%; left: 46%; z-index: 1;}
#control .img-box figure{ overflow: hidden;}
#control .img-box figure:nth-of-type(1){ width: 76.7%; aspect-ratio: 126 / 61; margin-right: auto;}
#control .img-box figure img{ width: 100%;}
#control .detail-box{ width: 37%; min-width: 640px; flex-shrink: 1; margin-left: auto;}
#control .detail-box .h3-box{ text-align: right;}
#control .detail-box p{ justify-content: flex-end;}

@keyframes scroll-right{
  0% { transform: translateX(0%);}
  100% { transform: translateX(-50%);}
}
#imgscroll .scroll-box { overflow: hidden; width: 100%;}
#imgscroll .scroll-list { display: flex; width: max-content; animation: scroll-right 80s linear infinite;}
#imgscroll .scroll-list li { flex-shrink: 1; width: calc(100vw / 4); margin-right: 8px;}

#lastly{ padding-top: 196px;}
#lastly .lastly-box{ background: url(../img/lastly-bg_pc.jpg) center center no-repeat; background-size: cover; position: relative; padding: 70px 11.0vw 40px;}
#lastly .lastly-box h2{ font-size: 32px; line-height: 1.5; position: absolute; top: -28px; z-index: 1;}
#lastly .lastly-box p{ width: 32%; min-width: 516px; font-size: 17px; line-height: 2.0; margin-left: auto;}
#lastly .lastly-box p.coop{ font-family: "Noto Sans JP", sans-serif !important; font-size: 14px; font-weight: 400; text-align: right; margin-top: 40px;}

#movie{ padding: 155px 11vw 132px;}
#movie h2{ font-size: 24px; text-align: center; letter-spacing: 0.1em; margin-bottom: 15px;}
#movie p{ font-size: 16px; text-align: center; margin-bottom: 60px;}
#movie .movie-list{ display: flex;}
#movie .movie-list li{ width: calc(100% - 46px); margin-right: 28px;}
#movie .movie-list li:last-of-type{ margin-right: 0;}
#movie .movie-list li .youtube{ position: relative; width: 100%; padding-top: 56.25%;}
#movie .movie-list li .youtube iframe{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
#movie .btn{ width: 425px; margin: 60px auto 0;}
#movie .btn a{ border: 1px solid #fff; display: flex; align-items: center; justify-content: center; font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 400; color: #fff; text-decoration: none; padding: 20px 0;}
#movie .btn a .arrow{ width: 28px; margin: 8px 0 0 30px;}

footer{ background: #000; padding: 100px 11vw 140px;}
footer > p{ font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-weight: 400; color: #fff; text-align: center; margin-top: 20px;}
footer > p a{ color: #fff;}
footer > p.cp{ margin-top: 20px;}
footer .footer-box{ display: flex; align-items: center; margin-bottom: 80px;}
footer .footer-box .logo-ns{ width: 298px; margin-right: auto;}
footer .footer-box .t-link a{ display: flex; align-items: center; font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 400; color: #fff; text-decoration: none;}
footer .footer-box .t-link a .ico{ width: 14px; margin: 4px 0 0 20px;}

#fixed-btn{ position: fixed; right: 40px; bottom: 40px; z-index: 1; width: 180px; display: none;}

/* ==== SP ===== */
@media screen and (max-width: 767px){
.pc{ display: none;}
.sp{ display: block;}

header{ display: flex; align-items: center; padding: 28px 30px 30px;}
header .logo-gdo{ width: 50px;}
header .logo-ns{ width: 180px; padding-right: 40px;}
header .menu {
	position: fixed;
	z-index: 11;
	top: 28px;
	right: 30px;
	width: 24px;
	height: 18px;
	cursor: pointer;
	display: block;
}
header .menu span { position: absolute; left: 0; width: 100%; height: 1px; background-color: #fff;}
header .menu,
header .menu span{ display: inline-block; transition: all .5s;}
header .menu span:nth-of-type(1) { top: 0;}
header .menu span:nth-of-type(2){ top: 9px;}
header .menu span:nth-of-type(3){ bottom: 0;}
header .menu.active span:nth-of-type(1) {
	-webkit-transform: translateY(9px) rotate(-42deg);
	transform: translateY(9px) rotate(-42deg);
}
header .menu.active span:nth-of-type(2) {
  opacity: 0;
}
header .menu.active span:nth-of-type(3) {
	-webkit-transform: translateY(-8px) rotate(42deg);
	transform: translateY(-8px) rotate(42deg);
}

#fv{ display: block !important; padding-right: 30px !important;}
#fv .swiper{ width: 100%; margin-right: 0;}
#fv nav{ min-width: 100%; margin: 0; background: #5A5960; position: fixed; top: 0; left: 0; z-index: 10; padding: 115px 0 60px; display: none;}
#fv nav ul{ width: 256px; margin: 0 auto;}

section .detail-box .h2-box,
section .detail-box .h3-box{ margin-bottom: 34px; text-align: left !important;}
section .detail-box .h2-box h2,
section .detail-box .h3-box h3{ font-size: 19px;}
section .detail-box .h2-box p,
section .detail-box .h3-box p{ justify-content: start !important; margin-top: 26px;}
section .detail-box .h2-box p span,
section .detail-box .h3-box p span{ font-size: 14px;}
section .detail-box p{ font-size: 15px; line-height: 1.7;}
section .detail-box p.t-link{ font-size: 12px; margin-top: 20px;}

.bg{ background: url(../img/bg_sp.jpg) center bottom no-repeat; background-size: 100%;}

section{ display: block !important; padding-right: 0 !important; padding-bottom: 0;}
section .detail-box{ width: 100% !important; min-width: auto !important; padding: 0 40px !important; box-sizing: border-box;}
section .img-box{ width: 100% !important; margin-top: 0 !important;}
section .img-box figure:nth-of-type(1){ width: 100% !important; margin-left: auto;}

#introduction #read{ margin-top: -24px; padding-bottom: 55px;}
#introduction #read .detail-box{ margin-bottom: 32px;}
#introduction #read .detail-box h1{ font-size: 32px; margin-bottom: 25px;}
#introduction #read .detail-box .h2-box{ margin-bottom: 20px;}
#introduction #read .img-box{ padding-left: 0;}
#introduction #read .img-box figure:nth-of-type(1){ width: calc(100% - 40px) !important; aspect-ratio: 111 / 62; padding-left: 40px;}

#gallery{ height: 126vh;}
#gallery .gallery-list{ height: 42vh;}
#gallery .gallery-list li{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
#gallery .gallery-list li figure{ width: 100%; height: 100%;}
#gallery .gallery-list img{ width: 100%; height: 100%; object-fit: cover;}

#history{ display: block; padding-left: 0; padding-top: 85px;}
#history .img-box{ padding-left: 0; margin-bottom: 90px;}
#history .img-box h2{ width: 52px; top: -32px; left: 42px;}
#history .img-box .object{ width: 70.1%; top: auto; bottom: -32px;}
#history .img-box figure:nth-of-type(1){ width: calc(100% - 80px) !important; aspect-ratio: 147 / 170; padding-left: 80px;}

#balance{ display: block; padding-left: 0; padding-top: 85px;}
#balance .img-box{ padding-left: 0; margin-bottom: 30px;}
#balance .img-box h2{ width: 52px; top: -32px; right: 42px;}
#balance .img-box figure:nth-of-type(1){ width: calc(100% - 80px) !important; aspect-ratio: 147 / 170; padding-right: 80px;}

#power{ display: block; padding-left: 0; padding-top: 85px;}
#power .img-box{ padding-right: 0; margin-bottom: 30px;}
#power .img-box h2{ width: 52px; top: -32px; left: 42px;}
#power .img-box .object{ width: 263px; top: 292px;}
#power .img-box figure:nth-of-type(1){ width: calc(100% - 80px) !important; aspect-ratio: 147 / 170; padding-left: 80px; margin-bottom: 37px;}
#power .img-box figure:nth-of-type(2){ width: calc(100% - 130px) !important; aspect-ratio: 246 / 185; margin: 0 !important;}

#velocity{ display: block; padding-left: 0; padding-top: 85px;}
#velocity .img-box{ padding-left: 0; margin-bottom: 90px;}
#velocity .img-box h2{ width: 53px; top: -32px; right: 42px;}
#velocity .img-box .object{ width: 58.9%; top: auto; bottom: -73px; left: 0;}
#velocity .img-box figure:nth-of-type(1){ width: calc(100% - 80px) !important; aspect-ratio: 147 / 170; padding-right: 80px; margin-bottom: 37px;}
#velocity .img-box figure:nth-of-type(2){ width: calc(100% - 130px) !important; aspect-ratio: 246 / 185; margin: 0 !important; padding-left: 130px;}

#control{ display: block; padding-left: 0; padding-top: 85px; padding-bottom: 55px;}
#control .img-box{ padding-left: 0; margin-bottom: 64px;}
#control .img-box h2{ width: 54px; top: -32px; left: 42px;}
#control .img-box .object{ width: 37.6%; top: auto; bottom: -40px; left: 0;}
#control .img-box figure:nth-of-type(1){ width: calc(100% - 80px) !important; aspect-ratio: 147 / 170; padding-left: 80px;}

#imgscroll .scroll-list li { width: calc(100vw / 1.5); margin-right: 4px;}

#lastly{ padding-top: 105px;}
#lastly .lastly-box{ background: none; position: relative; padding: 0;}
#lastly .lastly-box h2{ font-size: 24px; top: -58px; left: 40px;}
#lastly .lastly-box .sp{ margin-bottom: 40px;}
#lastly .lastly-box p{ width: auto; min-width: auto; font-size: 15px; line-height: 1.7; padding: 0 40px; margin-left: auto;}
#lastly .lastly-box p.coop{ font-size: 10px; padding: 0 40px; margin-top: 20px;}

#movie{ padding: 55px 40px 65px !important;}
#movie h2{ margin-bottom: 15px;}
#movie p{ font-size: 14px; margin-bottom: 22px;}
#movie .movie-list{ display: block;}
#movie .movie-list li{ width: 100%; margin-right: 0; margin-bottom: 24px;}
#movie .movie-list li:last-of-type{ margin-bottom: 0;}
#movie .btn{ width: 100%; margin: 48px auto 0;}
#movie .btn a{ padding: 10px 0;}
#movie .btn a .arrow{ width: 18px;}

footer{ padding: 60px 0 140px;}
footer > p{ font-size: 10px;}
footer > p.cp{ margin-top: 10px;}
footer .footer-box{ display: block; margin-bottom: 40px;}
footer .footer-box .logo-ns{ width: 282px; margin: 0 auto 20px;}
footer .footer-box .t-link{ text-align: center;}
footer .footer-box .t-link a{ justify-content: center; font-size: 14px;}
footer .footer-box .t-link a .ico{ width: 14px; margin: 4px 0 0 20px;}

#fixed-btn{ right: 10px; bottom: 20px; width: 120px;}


}