*{
margin:0;
padding:0;
text-align:center;
font-family:"メイリオ","Hiragino Kaku Gothic ProN",sans-serif;
}
a img{
border:none;
}
img{
vertical-align:bottom;
width:100%;
}
li{
list-style-type: none;
}

#container{
overflow:hidden;
}

#loaderWrap{
position: fixed;
width: 100%;
height: 100dvh;
background: #FFF;
z-index: 20;
}
#loader{
position: fixed;
width: 20vw;
height: 20vw;
top: 50dvh;
left: 50dvw;
margin-left: -10vw;
margin-top: -10vw;
}
#loader > img{
position: absolute;
width: 100%;
height: auto;
top: 0;
left: 0;
filter:blur(0.05vw);
}
#loader > span{
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
}
#loader > span:nth-of-type(1){
top: 65%;
left: 7%;
}
#loader > span:nth-of-type(2){
top: 26%;
left: -2%;
}
#loader > span:nth-of-type(3){
top: 43%;
left: -7%;
}
#loader > span:nth-of-type(4){
top: 6%;
left: 13%;
}
#loader > span > span{
position: absolute;
width: 100%;
height: 100%;
top: -55%;
left: -10%;
}
#loader > span > span > img{
width: 100%;
height: auto;
}

header{
position:relative;
overflow:hidden;
}
header .icon, header .sune, header .buggy, header .gi, header .shizu, header .nobi, header .dora, header .icon, header .catch, header .bottom{
position:absolute;
}
header .icon{
top:1%;
left:1%;
width:65%;
}
header .sune{
top: 1%;
left: 46%;
width: 12%;
}
header .buggy{
top: 3%;
right: 22%;
width: 11%;
}
header .gi{
top: 1%;
left: 25%;
width: 25%;
}
header .shizu{
bottom: 9%;
right: 7%;
width: 29%;
}
header .nobi{
top: 11%;
left: 45%;
width: 34%;
}
header .dora{
top: 1%;
left: 3%;
width: 39%;
}
header .icon{
top: 0%;
left: 0%;
width: 13%;
}
header .catch{
top: 3%;
right: 2%;
width: 21%;
}
header .bottom{
bottom:0;
width:100%;
}

#gradation_0{
background: linear-gradient(#0870db 50%, #35AFFF);
}

#title{
position: relative;
margin: -23% auto 0 auto;
width: 66%;
}

#catch{
margin: -1% auto 0 auto;
width: 90%;
}

#lead{
margin-top:4%;;
font-weight:bold;
font-size:2.2vw;
line-height:1.4;
color:#fff;
}

#ex{
margin-top:2%;
}
#ex .midashi{
margin: 0 auto 0 auto;
width: 40%;
}
#ex img{
display: inline-block;
margin: 2% 1% 0 1%;
border-radius: 30px;
width: 38%;
}

#gradation_0 .list_bg{
margin-top:8%;
}

#list{
position:relative;
padding-bottom:10%;
background:url(images/list_bg_middle.png) 50% 0%;
background-size: 100%;
}
#list .midashi{
position:absolute;
top:-6%;
left:50%;
transform:translateX(-50%);
width:59%;
}
#list p{
font-weight:bold;
font-size:1.8vw;
color:#fff;
}
#list p:nth-of-type(1){
padding-top:13%;;
}
#list p:nth-of-type(2){
margin-top:1%;;
}
#list .entry img{
margin:1% -0.5% 0 -0.5%;
display:inline-block;
width:28%;
}

#gradation_1{
background: linear-gradient(#35AFFF, #446AD8);
}

#attention{
position:relative;
margin:3% auto 0 auto;
padding:1% 6% 4% 6%;/*topに0はNG*/
border-radius:6vw;
width:60%;
background-color:#fff;
}
#attention .dora{
position:absolute;
top:-35%;
left:50%;
transform:translateX(-50%);
width:35%;
}
#attention .midashi{
padding-top: 13%;
font-weight:bold;
font-size:2.5vw;
color:#0018B2;
}
#attention .komidashi{
margin-top:2%;
font-weight:bold;
font-size:1.5vw;
color:#0018B2;
}
#attention p{
margin-top:1%;
font-size:1vw;
line-height:1.4;
text-align:justify;
}

footer{
padding-bottom:2%;
}
footer .logo{
margin:2% auto 0 auto;
width:40%;
}
footer .roadshow{
margin:-2% auto 0 auto;
width:52%;
}
footer .btn{
margin:0 auto 0 auto;
width:30%;
}
footer p{
margin-top:2%;
font-size:0.8vw;
color:#fff;
}

.mobile{
display:none;
}

/*colorbox*/
.cboxIframe{
background:transparent;
}
#cboxContent{
background:transparent;
}
#cboxTopLeft,#cboxTopCenter,#cboxTopRight,
#cboxMiddleLeft,#cboxMiddleRight,
#cboxBottomLeft,#cboxBottomCenter,#cboxBottomRight{
width:0;
height:0;
}
#cboxClose {
top: 5%;
right:5%;
width: 70px;
height: 70px;
background: url(images/btn_close.png) no-repeat;
background-size:100%;
}
#cboxClose:hover {
background-position: 0 0;
}
#cboxLoadingOverlay,#cboxLoadingGraphic{
background:url();
}
#cboxOverlay {
background: url(library/images/overlay.png) 50% 0%;
background-size:100%;
}

.SPhover{
opacity: 0.7;
}


@media (max-width: 767px) {
#loader{
width: 54dvw;
height: 54dvw;
margin-left: -25dvw;
margin-top: -25dvw;
}
#loader img{
filter:blur(0.18vw);
}

#title{
width: 100%;
}

#lead{
font-size:3.6vw;
}

#ex img{
border-radius:15px;
width:44%;
}

#list .midashi{
top:-3%;
width:90%;
}
#list p:nth-of-type(1) {
padding-top: 21%;
font-size:3vw;
}
#list p:nth-of-type(2){
margin-top:1%;;
font-size:4vw;
}
#list .entry img{
margin:0.5% -1% 0 -1%;
width:48%;
}

#attention{
width:75%;
}
#attention .dora{
top: -12%;
width:50%;
}
#attention .midashi{
padding-top: 29%;
font-size:5vw;
}
#attention .komidashi{
font-size:4vw;
}
#attention p{
font-size:3vw;
}

footer .logo{
width:70%;
}
footer .roadshow{
width:80%;
}
footer .btn{
width:55%;
}
footer p{
font-size:2vw;
}

.mobile{
display:inline;
}

/*colorbox*/
#cboxClose {
top: 1%;
right:1%;

width: 10%;
/*height: 40px;*/
}
}