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


/* import
------------------------------------------------------------ */
@import "https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css";


/* Overwrite
------------------------------------------------------------ */
.header {
position: fixed;
}
.spnav,
.spsubnav,
.gnav__subitem__table td a {
text-align: left;
}
.share__icon {
margin: 0;
}


/* set
------------------------------------------------------------ */
* {
margin: 0;
padding: 0;
font-style: normal;
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
-webkit-text-size-adjust: 100%;
background: url("img/bg.png") repeat-y;
background-size: 100% auto;
font-family: ryo-gothic-plusn, sans-serif;
color: #000;
font-size: 18px;
font-weight: 500;
line-height: 1.5;
text-align: center;
}
ul {
list-style: none;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
border: 0;
}
iframe {
width: 100%;
max-width: 100%;
border: none;
}
video {
max-width: 100%;
vertical-align: bottom;
}
a {
color: inherit;
text-decoration: none;
}
.opa a:hover img {
opacity: .7;
}
:hover {
transition: .3s;
}
.smd,.smp {
display: none;
}
.pc {
display: block;
}


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

/* background */
.bg_blu {
background: #004098;
color: #FFF;
}

/* style */
h2 {
margin-bottom: 60px;
}
h3 {
margin-top: 30px;
}
small {
font-size: 70%;
line-height: 1.3;
margin-top: 10px;
display: block;
}
.center {
text-align: center !important;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
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: #004098;
color: #FFF;
font-size: 26px;
font-weight: 700;
line-height: 68px;
width: 360px;
max-width: 100%;
height: 68px;
display: inline-block;
border-radius: 100vh;
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 {
opacity: .7;
}

/* .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;
}

div.swiper {
max-width: 1000px;
}
.container {
position: relative;
}
.container .swiper-button-prev {
left: 0;
}
.container .swiper-button-next {
right: 0;
}


/* 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 p {
text-align: left;
max-width: 620px;
margin: 0 auto 50px;
}
#concept ul {
background: url("img/concept_bg.png") no-repeat center;
background-size: contain;
}
#concept ul li {
text-align: left;
line-height: 1.8;
margin: 120px 0 80px;
flex-basis: 33%;
}
#concept ul li:first-child {
margin-left: 10%;
}
#concept ul li:last-child {
margin-left: 14%;
}

/* .design */
.design ul.col-2 {
max-width: 1000px;
margin: 0 auto;
}
.design .item {
flex-basis: 50%;
}
.design .item h3 {
margin-bottom: 15px;
}
.design p {
text-align: left;
}

/* #size */
#size .flex {
align-items: center;
}
#size .fadeInUp50 {
flex-basis: 42%;
}
#size .fadeInUp100 {
flex-basis: 55%;
}

/* #products */
#products p {
text-align: left;
max-width: 620px;
margin: 0 auto 50px;
}
#products .flex {
align-items: center;
text-align: left;
padding: 30px 0;
border-bottom: 1px solid #a69535;
}
#products .item:first-child {
flex-basis: 46%;
}
#products .item:last-child {
flex-basis: 52%;
}
#products .flex h3 {
font-size: 36px;
font-weight: 700;
margin-bottom: 10px;
}
#products .flex table th {
font-size: 20px;
font-weight: 700;
}
#products .flex table th + td {
font-size: 36px;
font-weight: 700;
}
#products .flex table td {
font-size: 16px;
}
#products .flex p {
font-size: 14px;
font-weight: 400;
margin-top: 20px;
}

/* #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;
}

/* #sns */
#sns {
background: #FFF;
}

/* #information */
#information a {
background: #FFE038;
font-size: 23px;
font-weight: bold;
padding: 20px;
display: block;
}
#information a:hover {
background: #004098;
color: #FFF;
}

footer h1 {
width: 188px;
margin: 0 auto 30px;
}
footer p {
color: #FFF;
font-size: 12px;
}
footer p + p {
font-size: 11px;
margin-top: 10px;
}

/* #pagetop */
#pagetop {
display: none;
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 4;
}
#pagetop a {
background: #004098;
color: #FFF;
width: 60px;
height: 60px;
border-radius: 50%;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: relative;
}
#pagetop a::before {
content: "";
width: 20px;
height: 20px;
margin: 0 auto;
display: block;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: 25px;
right: 20px;
}

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





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

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

/* common
------------------------------------------------------------ */
/* layout */
main {
margin-top: 60px;
}
section {
padding: 50px 0;
}

/* .link */
.link a {
font-size: 22px;
line-height: 50px;
width: 260px;
height: 50px;
}

/* main
------------------------------------------------------------ */
/* #concept */
#concept ul {
background: none;
display: block;
}
#concept ul li {
background-size: contain !important;
margin: 0 auto !important;
padding: 80px 200px 30px;
}
#concept ul li:first-child {
background: url("img/smp_concept_01.png") no-repeat center;
margin-bottom: 30px !important;
}
#concept ul li:last-child {
background: url("img/smp_concept_02.png") no-repeat center;
}

/* #products */
#products .item:first-child {
flex-basis: 43%;
}
#products .item:last-child {
flex-basis: 55%;
}
#products .flex h3 {
font-size: 26px;
}
#products .flex table th {
font-size: 18px;
}
#products .flex table th + td {
font-size: 26px;
}
#products .flex table td {
font-size: 14px;
}
#products .flex p {
font-size: 12px;
}

/* footer
------------------------------------------------------------ */
footer section {
padding: 30px 0;
}

/* #uniform */
#uniform a {
font-size: 18px;
}

}


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

/* set
------------------------------------------------------------ */
.smd {
display: none;
}
.smp {
display: block;
}
br.smp {
font-size: 0;
}

/* common
------------------------------------------------------------ */
/* style */
h2 {
margin-bottom: 30px;
}
h2 img {
width: auto;
height: 30px;
}

/* .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;
}
.item {
margin-bottom: 20px;
}

/* .swiper*/
.container .swiper-button-prev {
left: -15px;
}
.container .swiper-button-next {
right: -15px;
}

/* main
------------------------------------------------------------ */
/* #movie */
.js-modal-button {
font-size: 3rem;
}
/* #concept */
#concept p {
margin: 0 auto 30px;
}
#concept ul li {
background-size: 100% auto !important;
font-size: 12px;
line-height: 1.4;
min-height: 180px;
padding: 60px 60px 20px;
}

/* .design */
.design ul.col-2,
.design ul.col-2 + .container {
display: none;
}
.design .container {
margin-top: 30px;
}

/* #size */
#size .fadeInUp50 {
max-width: 70%;
margin: 0 auto 20px;
}

/* #products */
#products .flex h3 {
font-size: 26px;
text-align: center;
}
#products .flex table th {
font-size: 16px;
}
#products .flex table th + td {
font-size: 24px;
}
#products .flex table td {
font-size: 14px;
}
#products .flex p {
font-size: 11px;
}


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


/* footer
------------------------------------------------------------ */
footer section {
padding-bottom: 50px;
}

/* #information */
#information a {
font-size: 16px;
padding: 15px;
}
footer h1 {
margin: 0 auto 10px;
}
footer p {
font-size: 10px !important;
}

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

}