@charset "UTF-8";
/*
Version: 1.0.0
Creation Date:	2021.12.23
Last Updated:	2023.2.17
*/


/* import
------------------------------------------------------------ */
@import "https://unpkg.com/swiper@8/swiper-bundle.min.css";
@import "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css";


/* set
------------------------------------------------------------ */
* {
margin: 0;
padding: 0;
font-style: normal;
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
-webkit-text-size-adjust: 100%;
font-family: ryo-gothic-plusn, sans-serif;
color: #FFF;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
text-align: center;
overflow: hidden;
}
ul {
list-style: none;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
border: 0;
}
iframe {
max-width: 100%;
border: none;
}
video {
max-width: 100%;
vertical-align: bottom;
}
a {
color: inherit;
text-decoration: none;
}
:hover {
transition: .3s;
}
:focus {
outline: none;
}
.smd,.smp {
display: none;
}
.pc {
display: block;
}


/* common
------------------------------------------------------------ */
/* layout */
main {
width: 100%;
display: block;
overflow: hidden;
}
article {
width: 100%;
position: relative;
}
section {
width: 1000px;
max-width: 86%;
margin: 0 auto;
padding: 100px 0;
}

/* style */
h2 {
margin-bottom: 60px;
}
h3 {
margin-top: 30px;
}
div.flex.col-4 {
margin-top: 80px; 
}
figcaption {
text-align: left;
padding-top: 10px;
}
.vwmax img {
width: 100vw;
}

/* .flex */
.flex {
display: flex;
}
.col-2,
.col-3,
.col-4 {
flex-wrap: wrap;
justify-content: space-between;
}
.item {
margin-bottom: 40px;
}
.col-2 .item {flex-basis: 48%;}
.col-3 .item {flex-basis: 31%;}
.col-4 .item {flex-basis: 21%;}
.col-3:after {
content: "";
width: 31%;
height: 0;
display: block;
}
.col-4:before,
.col-4:after {
content: "";
width: 23%;
height: 0;
display: block;
}
.col-4:before {
order: 1;
}

/* .link */
.link {
text-align: center;
margin: 30px auto 0;
}
.link a {
background: #a69535;
background-size: 30px auto !important;
font-size: 20px;
font-weight: 700;
line-height: 60px;
width: 320px;
max-width: 100%;
height: 60px;
display: inline-block;
border-radius: 30px;
position: relative;
z-index: 1;
}
.link a:after {
content: "";
border-top: solid 9px transparent;
border-right: solid 12px transparent;
border-bottom: solid 9px transparent;
border-left: solid 12px #FFF;
position: absolute;
top: 50%;
right: 5px;
transition: transform 0.5s ease;
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.link a:hover:after {
-webkit-transform: translate(30%,-50%);
transform: translate(30%,-50%);
}

/* .swiper*/
.swiper-button-prev,
.swiper-button-next {
background: rgba(0,64,152,1);
width: 28px;
height: 28px;
border-radius: 50%;
z-index: 1;
overflow: hidden;
}
.swiper-button-prev {
left: 15px;
}
.swiper-button-next {
right: 15px;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
background: rgba(0,64,152,.7);
}
.swiper-button-prev:after,
.swiper-button-next:after {
content: "";
border-top: solid 7px transparent;
border-right: solid 10px transparent;
border-bottom: solid 7px transparent;
border-left: solid 10px #FFF;
position: absolute;
top: 7px;
right: -3px;
}
.swiper-button-prev:after {
border-top: solid 7px transparent;
border-right: solid 10px #FFF;
border-bottom: solid 7px transparent;
border-left: solid 10px transparent;
right: auto;
left: -3px;
	}


/* header
------------------------------------------------------------ */


/* main
------------------------------------------------------------ */
/* #movie */
#movie {
background: #231815;
}
_#movie section div {
width: 100%;
padding-top: 56.25%;
position: relative;
}
_#movie iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
.js-modal-button {
font-size: 6rem;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

/* #concept */
#concept {
}

/* .swiper */
.swiper {
}

/* #design */
#design {
background: #003D8B url("images/bg.png") no-repeat right bottom;
background-size: 100% auto;
padding-bottom: 150px;
}
#design section {
width: 1180px;
}
#design section > div.flex {
background: #FFF;
padding: 4% 7% 0;
align-items: center;
}
#design figcaption {
background: #1B2D5A;
font-size: 18px;
padding: 5px 10px;
}
#design .item .item {
margin-bottom: 20px;
}

/* #gk-design */
#gk-design {
background: #003D8B url("images/bg.png") no-repeat right bottom;
background-size: 100% auto;
padding-bottom: 150px;
}
#gk-design section {
width: 1180px;
}
#gk-design section > div.flex {
background: #FFF;
padding: 4% 7% 0;
align-items: center;
}
#gk-design figcaption {
background: #1B2D5A;
font-size: 18px;
padding: 5px 10px;
}
#gk-design .item .item {
margin-bottom: 20px;
}

/* #size */
#size {
background: #1B2D5A;
}
#size section {
width: 1500px;
}
#size .flex {
align-items: center;
}
#size .item.fadeInUp50 {
flex-basis: 42%;
}
#size .item.fadeInUp100 {
flex-basis: 55%;
}

/* #color */
#color {
background: #003D8B url("images/bg.png") no-repeat right bottom;
background-size: 100% auto;
}
#color div:not(.link) {
background: url("images/back_img.jpg") no-repeat center center;
background-size: cover;
}
#color p {
font-size: 30px;
font-weight: bold;
margin-top: 20px;
}

/* #number */
#number {
background: url("images/number_bg.png") repeat-y;
background-size: 100% auto;
}

/* #sponsor */
#sponsor ul li img {
transition: 1s;
}
#sponsor ul li:hover img {
transition: 1s;
transform: scale(1.2);
}
#sponsor .col-3 {
justify-content: center;
}
#sponsor .col-3 .item {
justify-content: center;
flex-basis: 21%;
margin: 0 3%;
	}
#sponsor .col-3:after {
display: none;
}


/* footer
------------------------------------------------------------ */
footer {
background: #000;
}
footer section {
padding: 60px 0;
}
footer h1 {
width: 188px;
margin: 0 auto 30px;
}
footer p {
font-size: 12px;
}
footer p + p {
font-size: 11px;
}

/* #uniform */
#uniform {
position: fixed;
right: 1%;
bottom: 1%;
z-index: 3;
}
#uniform a {
background: #a69535;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
padding: 1.5rem 1rem;
display: inline-block;
border: 2px solid #a69535;
border-radius: 10px;
}
#uniform a:hover {
background: #FFF;
color:  #a69535;
}





@media screen and (max-width: 1180px) {
/* iPad横以下 */

}


@media screen and (max-width: 1180px) and (orientation:portrait) {
/* iPad縦以下 */

/* set
------------------------------------------------------------ */
.pc {
display: none;
}
.smd {
display: block;
}

/* main
------------------------------------------------------------ */
/* #design */
#design section > div.flex {
padding: 4% 4% 0;
}
#design figcaption {
font-size: 16px;
}

/* #gk-design */
#gk-design section > div.flex {
padding: 4% 4% 0;
}
#gk-design figcaption {
font-size: 16px;
}

/* footer
------------------------------------------------------------ */
/* #uniform */
#uniform a {
font-size: 18px;
padding: 1rem;
}

}


@media screen and (max-width: 740px) {
/* iPhone以下 */

/* set
------------------------------------------------------------ */
body {
font-size: 14px;
line-height: 1.4;
}
.smd {
display: none;
}
.smp {
display: block;
}
br.smp {
font-size: 0;
}

/* common
------------------------------------------------------------ */
/* layout */
section {
max-width: 84%;
padding: 50px 0;
}
/* style */
h2 {
margin-bottom: 30px;
}
h2 img {
width: auto;
height: 30px;
}
div.flex.col-4 {
margin-top: 40px; 
}
/* .flex */
.col-2 {display: block;}
.col-3 .item {flex-basis: 48%;}
.col-4 .item {flex-basis: 48%;}
.col-3:after,
.col-4:before,
.col-4:after {
display: none;
}

/* main
------------------------------------------------------------ */
/* #movie */
.js-modal-button {
font-size: 3rem;
}
/* #design */
#design {
padding-bottom: 50px;
}
#design .item.flex.col-2 {
display: flex;
}
/* #gk-design */
#gk-design {
padding-bottom: 50px;
}
#gk-design .item.flex.col-2 {
display: flex;
}
/* #sponsor */
#sponsor .col-3 {
justify-content: space-between;
}
#sponsor .col-3 .item {
flex-basis: 48%;
margin: 0 0 40px;
}

/* footer
------------------------------------------------------------ */
footer p {
font-size: 10px;
}
footer p + p {
font-size: 10px;
}
/* #uniform */
#uniform a {
font-size: 16px;
padding: .5rem 1rem;
}

}