@import (once) "font.less";
@import (once) "default.less";

/* contents ///////////////////////*/
.contents{

.max{
.pr;
.jc;

.photo{
padding-top:36%;
}
.read{
.pa;
.tac;
.ffm;
color:#FFF;
width:100%;
font-size:32pt;
line-height:140%;
z-index:1;
padding:0 0 40px 0;
}

ul{
.dt;
width:100%;
}
li{
.pr;
.dtc;
}
li .photo{
padding-top:69%;
}
p{
.pa;
color:#FFF;
font-size:32pt;
.ffml;
bottom:100px;
left:20px;
transform: scale(1.3, 1);
transform-origin: top left;
}
}

.dl1{
.pr;
z-index:1;
padding:0 40px 40px 40px;
background:rgba(255, 255, 255, .95);
margin-top:-60px;

dt{
.db;
.pr;
padding:40px 0 20px 0;
font-size:19pt;
line-height:130%;
.ffm;
}
dd{
.db;
}
}

.box{
border:3px @c3 solid;
margin:20px 0 80px 0;

ul,
.text{
padding:0 40px 40px 40px;
}
}

}


@media (max-width:1000px){
.contents{

.max{
.pr;
.jc;

.photo{
padding-top:42%;
}
.read{
font-size:5vw;
padding:0;
}
p{
font-size:5vw;
bottom:80px;
}
}

.dl1{
.pr;
z-index:1;
padding:0 30px 30px 30px;
margin-top:-40px;

dt{
padding:30px 0 20px 0;
font-size:4vw;
}
}

.box{
margin:20px 0 60px 0;

ul,
.text{
padding:0 30px 30px 30px;
}
}

}
}


@media (max-width:500px){
.contents{

.max{
.pr;
.jc;

.photo{
padding-top:69%;
}
.read{
font-size:17pt;
}
ul{
.db;
width:100%;
}
li{
.pr;
.db;
width:100%;
}
p{
font-size:24pt;
}
}


.dl1{
.pr;
z-index:1;
padding:0 10px 10px 10px;
margin-top:-30px;

dt{
padding:20px 0 20px 0;
font-size:15pt;
}
}

.box{
border:2px @c3 solid;
margin:20px 0 40px 0;

ul,
.text{
padding:0 10px 10px 10px;
}
}

}
}