@charset "utf-8";

#preorder {min-height:661px; padding:50px 0 72px; text-align:initial;}
#preorder h2 {position: relative; z-index: 10; font-size: 0;}
#preorder h3 {font-size: 23px; color: #373d85; line-height: 1;}

@media screen and (min-width:641px){

#preorder h2 {height:67px; width:1200px; margin:0 auto 34px;}
#preorder h2 span {display: block; background: url(../png/h2-2.png) center top no-repeat; width: 1200px; height: 67px;}
#preorder section > img{position:absolute; left:50%;margin-left:-661px; transition:0.3s;}
#preorder div{position:absolute; left:50%; margin:0 0 0 47px; transition:0.3s;}
#preorder div h3{margin-bottom:8px; text-align:left; font-weight:bold; margin-top: 8px;}
#preorder div ul{display:flex; flex-wrap:wrap; margin:0 -4px;}
#preorder div ul li{margin:0 4px;}
#preorder div ul li a{transition:0.3s;}
#preorder div ul li img{width:215px; height:auto;}
#preorder div ul li a:hover{filter:brightness(130%);}
.edge #preorder div ul li a:hover,.ie #preorder div ul li a:hover{opacity:0.7;}
#preorder div ul + h3{margin-top:24px;}

p.comment{font-size: 20px !important; color: #373d85!important; margin: 15px 0!important;text-align: center;}

}

@media screen and (min-width:1701px){
}

@media screen and (max-width:1500px) and (min-width:1361px){
#preorder {min-height:600px;}
}
@media screen and (max-width:1360px) and (min-width:1201px){
#preorder {min-height:550px;}
}

@media screen and (max-width:1700px) and (min-width:1201px){

#preorder section > img{margin-left:-38.882vw; width: 38.118vw; height: auto;}

#preorder div h3{font-size: 1.353vw; margin-bottom: 0.471vw; margin-top: 0.471vw;}
#preorder div{margin:0 0 0 2.765vw;}
#preorder div ul {margin: 0 -0.235vw;}
#preorder div ul li{margin:0 0.235vw;}
#preorder div ul li img{width:12.647vw; height:auto;}
#preorder div ul + h3{margin-top:1.412vw;}

p.comment{font-size: 20px !important; color: #373d85!important; margin: 15px 0!important;text-align: center;}

}
@media screen and (max-width:1200px) and (min-width:641px) {
#preorder {min-height:520px;}

#preorder section > img{margin-left:-466px; width: 457px; height: auto;}
#preorder div h3{font-size: 16px; margin-bottom: 6px; margin-top: 6px;}
#preorder div{margin:0 0 0 33px;}
#preorder div ul {margin: 0 -3px;}
#preorder div ul li{margin:0 3px;}
#preorder div ul li img{width:151px; height:auto;}
#preorder div ul + h3{margin-top:18px;}

p.comment{font-size: 20px !important; color: #373d85!important; margin: 15px 0!important;text-align: center;}

}


@media screen and (max-width:640px){
/**

    SP

**********************************************************************/

#preorder{min-height:auto; padding:12.031vw 3.125vw 16.094vw;}
#preorder h2 {position:relative; width:100vw; height:10.469vw; margin-bottom:2.5vw; z-index:10;}
#preorder h2 span{display:block; width:100vw; height:10.469vw; background:url(../png/h2-2.png) no-repeat center top / 100% auto;}

#preorder section > img{position:static; width:100%; height:auto; margin-left:0; transform:scale(1);}
#preorder div{margin-top:6.406vw; transform:scale(1);}
#preorder div h3{margin-bottom:1.25vw; font-size:3.594vw; text-align:center; font-weight:bold;}
#preorder div ul{display:flex; flex-wrap:wrap; margin:0 -0.625vw;}
#preorder div ul li{width:calc(33.32% - 1.25vw); margin:0 0.625vw;}
#preorder div ul li a:hover{filter:brightness(100%);}
#preorder div ul li img{width:100%; height:auto;}
#preorder div ul + h3{margin-top:4.844vw;}

p.comment{font-size: 15px !important; color: #373d85!important; margin: 15px 0!important;text-align: center;}

}