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


/* import
------------------------------------------------------------ */
@import "https://unpkg.com/swiper@7/swiper-bundle.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;
background-color: #1a1a7c;
background-image: url("images/line_l.png"), url("images/line_r.png");
background-repeat: repeat-y, repeat-y; 
background-position: top left, top right;
background-size: 4vw auto, 4vw auto;
}
ul {
list-style: none;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
border: 0;
}
iframe {
max-width: 100%;
border: none;
}
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 {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.mySwiper2 {
height: 80%;
width: 100%;
}
.mySwiper {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.mySwiper .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.mySwiper .swiper-slide-thumb-active {
opacity: 1;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.swiper-button {
position: relative;
}
.swiper-container,
.mySwiper {
max-width: calc(100% - 60px);
margin: 0 auto;
}
.swiper-button-prev,
.swiper-button-next {
_background: rgba(255,255,255,1);
width: 28px;
height: 28px;
border-radius: 50%;
z-index: 1;
overflow: hidden;
}
.swiper-button-prev {
left: 0;
}
.swiper-button-next {
right: 0;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
_background: rgba(255,255,255,.7);
transition: none;
}
.swiper-button-prev:after,
.swiper-button-next: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: 7px;
right: -2px;
}
.swiper-button-prev:after {
border-top: solid 9px transparent;
border-right: solid 12px #FFF;
border-bottom: solid 9px transparent;
border-left: solid 12px transparent;
right: auto;
left: -2px;
	}


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


/* main
------------------------------------------------------------ */
/* #movie */
#movie {
}
#movie section div {
width: 100%;
padding-top: 56.25%;
position: relative;
}
#movie iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}

/* #concept */
#concept {
padding: 100px 0;
padding: 0 0 100px;
}

/* #uniform2022 */
#uniform2022 {
}

/* #design */
#design {
}
.slide {
margin: 80px auto;
}

/* #gk-design */
#gk-design {
background-color: #004098;
background-image: url("images/line_l.png"), url("images/line_r.png");
background-repeat: repeat-y, repeat-y; 
background-position: top left, top right;
background-size: 4vw auto, 4vw auto;
}

/* #color */
#color p {
font-size: 30px;
font-weight: bold;
margin-top: 20px;
}


/* footer
------------------------------------------------------------ */
footer {
background-color: #FFF;
background-image: url("images/line_l.png"), url("images/line_r.png");
background-repeat: repeat-y, repeat-y; 
background-position: top left, top right;
background-size: 4vw auto, 4vw auto;
}
footer ul li img {
___filter: grayscale(100%);
transition: 1s;
}
footer ul li:hover img {
___filter: grayscale(0%);
transition: 1s;
transform: scale(1.2);
}
footer .col-3 {
justify-content: center;
}
footer .col-3 .item {
justify-content: center;
flex-basis: 21%;
margin: 0 3%;
	}
footer .col-3:after {
display: none;
}

/* #pagetop */
#pagetop {
display: none;
position: fixed;
right: 0;
bottom: 0;
z-index: 1;
}
#pagetop a {
background: #a69535;
width: 60px;
height: 60px;
margin: 0 0 0 auto;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: relative;
}
#pagetop a:before {
content: "";
border: 9px solid transparent;
border-bottom: 12px solid #FFF;
position: absolute;
top: 14px;
left: 21px;
}





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

/* footer
------------------------------------------------------------ */
___footer ul li img {
filter: grayscale(0%);
}

}


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

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

}


@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
------------------------------------------------------------ */
/* #concept */
#concept {
padding: 50px 0;
padding: 0 0 50px;
}
/* #design */
.slide {
margin: 40px auto;
}

/* footer
------------------------------------------------------------ */
footer .col-3 {
justify-content: space-between;
}
footer .col-3 .item {
flex-basis: 48%;
margin: 0 0 40px;
}

}