*{
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;
}

header{
position:relative;
overflow:hidden;
}
header .icon{
position:absolute;
top:1%;
left:1%;
width:8%;
}
header .catch{
position:absolute;
top: 4%;
right: 1%;
width: 23%;
}
header .gian{
position:absolute;
top: 37%;
right: 2%;
width: 19%;
}
header .sune{
position:absolute;
top: 68%;
right: 1%;
width: 13%;
}
header .kisha{
position:absolute;
top: 7%;
left: 39%;
width: 48%;
}
header .shizu{
position:absolute;
top: 39%;
left: 22%;
width: 12%;
}
header .nobi{
position:absolute;
top: 25%;
left: 0%;
width: 24%;
}
header .dora{
position:absolute;
top: 0%;
left: 18%;
width: 36%;
}
header .title{
position:absolute;
bottom: 1.5%;
left: 1.5%;
width: 45.5%;
}

.wood{
padding:5% 0 6% 0;
background: url(images/wood.jpg) top center;
background-size: 100% auto;
}

.content{
margin:0 auto;
max-width:1200px;
}

#catch div:nth-of-type(1){
margin: 0 auto 0 auto;
width: 80%;
}
#catch div:nth-of-type(2){
margin: 0 auto 0 auto;
width: 85%;
}

#lead{
margin-top:2%;;
font-weight:bold;
font-size:2vw;
line-height:1.6;
color:#fff;
}

#ex{
margin-top:2%;
padding-bottom: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%;
}

.timeloop{
padding:12% 0 8% 0;
background: url(images/timeloop.png) top center;
background-size: 100% auto;
}

#list{
position:relative;
padding-bottom:2%;
background-size: 100%;
}
#list .midashi{
margin: 0 auto 0 auto;
width: 21%;
}
#list p{
font-weight:bold;
font-size:1.6vw;
color:#883600;
}
#list p:nth-of-type(1){
padding-top:5%;;
}
#list p:nth-of-type(2){
margin-top:3%;;
}
#list .entry img{
margin:2% 1% 0 1%;
display:inline-block;
width:28%;
}
#list .dora{
position:absolute;
top: -7%;
left: 0%;
width: 31.5%;
}
#list .nobi{
position:absolute;
top: -4%;
right: 16%;
width: 21.5%;
}
#list .shizu{
position:absolute;
top: -6.5%;
right: -3%;
width: 19%;
}

#attention{
position: relative;
width: 64%;
margin: 8% auto 0 auto;
border-radius: 28px;
padding: 1% 6% 4% 6%;
padding:1% 6% 4% 6%;/*topに0はNG*/
background: linear-gradient(0deg, #DAAE74 0%, #F3E5D2 6%, #FFFFFF 30%, #FFFFFF 70%, #F3E5D2 94%, #DAAE74 100%), linear-gradient(90deg, #DAAE74 0%, #FAEAC8 12%, #FFF9E7 40%, #FFF9E7 60%, #FAEAC8 88%, #DAAE74 100%);
background-blend-mode: multiply;
}
#attention .dora{
position: absolute;
top: -21%;
left: 50%;
transform: translateX(-50%);
width: 34%;
}
#attention .midashi{
padding-top: 19%;
font-weight:bold;
font-size:2.5vw;
color:#e05f00;
}
#attention .komidashi{
margin-top:2%;
font-weight:bold;
font-size:1.5vw;
color:#e05f00;
}
#attention p{
margin-top:1%;
font-size:1vw;
line-height:1.6;
text-align:justify;
color:#333;
}
#attention .gian{
position:absolute;
top: -40%;
left: -23%;
width: 41%;
}
#attention .gear{
position:absolute;
top: -28%;
right: 9%;
width: 19.5%;
}
#attention .sune{
position:absolute;
top: -42%;
right: -20%;
width: 26%;
}

footer .logo{
margin:2% auto 0 auto;
width:42%;
}
footer .roadshow{
margin:0 auto 0 auto;
width:48%;
}
footer .btn{
margin:1% auto 0 auto;
width:34%;
}
footer p{
margin-top:2%;
font-size:0.8vw;
color:#fff;
}

.mobile{
display:none;
}
.mobile_inline{
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: 117px;
height: 117px;
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%;
}


@media (max-width: 767px) {
header .icon{
top:2%;
left:2%;
width:9%;
}
header .catch{
top: 4%;
right: 1%;
width: 30%;
}
header .gian{
top: unset;
bottom: 18.5%;
right: 0%;
width: 19%;
}
header .sune{
top: unset;
bottom: 1%;
right: 1%;
width: 15%;
}
header .kisha{
top: 36%;
left: 38%;
width: 46%;
}
header .shizu{
top: 36%;
left: unset;
right: 4%;
width: 17%;
}
header .nobi{
top: unset;
bottom:1%;
left: 0%;
width: 27.5%;
}
header .dora{
top: 34%;
left: 9%;
width: 38%;
}
header .title{
bottom: unset;
top:2%;
left: 4%;
width: 61%;
}

.wood{
padding:5% 0 5% 0;
}

#catch div:nth-of-type(1){
width: 75%;
}
#catch div:nth-of-type(2){
width: 90%;
}

#lead{
margin-top:4%;;
font-size:3.8vw;
}

#ex{
padding-bottom: 20%;
}
#ex .midashi{
margin: 4% auto 0 auto;
width: 50%;
}
#ex img{
margin: 4% 1% 0 1%;
border-radius:10px;
width:44%;
}

.timeloop {
padding: 25% 0 25% 0;
}

#list .midashi {
width: 30%;
}
#list p:nth-of-type(1) {
font-size:3.6vw;
}
#list p:nth-of-type(2){
margin-top:4%;;
font-size:3.5vw;
}
#list .entry img{
margin: 3% 1% 0 1%;
width: 45%;
}
#list .dora{
top: -7%;
left: 2%;
width: 43%;
}
#list .nobi{
top: -5%;
right: 24.5%;
width: 29.5%;
}
#list .shizu{
top: -7%;
right: 2%;
width: 26%;
}

#container > .wood:nth-of-type(2) {
padding: 5% 0 5% 0;
}

#attention{
margin: 33% auto 0 auto;
border-radius: 15px;
width:90%;
}
#attention .dora{
top: -13%;
width: 45%;
}
#attention .midashi{
padding-top: 23%;
font-size:5vw;
}
#attention .komidashi{
font-size:4vw;
}
#attention p{
font-size:3vw;
}
#attention .gian{
top: -34.5%;
left: -4%;
width: 49%;
}
#attention .gear{
top: -24%;
right: 26%;
width: 24.5%;
}
#attention .sune{
top: -34%;
right: -4%;
width: 32%;
}

footer .logo{
margin: 6% auto 0 auto;
width:73%;
}
footer .roadshow{
width:88%;
}
footer .btn{
width:74%;
}
footer p{
font-size:2vw;
}

.pc{
display:none;
}
.mobile{
display:block;
}
.mobile_inline{
display:inline;
}

/*colorbox*/
#cboxClose {
top: 1%;
right:1%;
width: 14%;
/*height: 40px;*/
}
}