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

/* news ///////////////////////*/
.news{
padding:130px 0 50px 0;
background:@g1;

article{
.dt;
}
section{
.dtc;
.vat;
}


.sec1{
width:280px;

header{
padding:20px 0 0 0;
}
ul{
padding:30px 0;
}
li{
padding:0 0 5px 25px;
background:url(../image/point1.png) no-repeat 0 50%;
.tdu;
}
li a:hover{
opacity:.3;
}

.os{
.oa;
}

.link a{
background:@c2;
width:200px;
}

.link_fb{
padding:30px 0 0 0;
transition:.3s;
a{
.ffgb;
}
i{
.dib;
.vam;
width:40px;
height:40px;
background:url(../image/LINE_icon.png) no-repeat 50% 50%;
background-color:01b901;
.r(0%);
margin:0 10px 0 0;
}
i:hover{
opacity:0.5;
}
	
ist{
.dib;
.vam;
width:40px;
height:40px;
background:url(../image/instagram.png) no-repeat 50% 50%;
background-color:01b901;
.r(0%);	
margin:0 10px 0 0;
}	
ist:hover{
opacity:0.5;
}

	
} /* .link_fb */



} /* .sec1 */


.sec2{
width:100%;
span{
white-space: normal;
}
.fr-view a{
color: #22a0e9;
}
.post{

li{
width:32.9%;
padding:0 0 20px 20px;
.dib;
}

a:hover > dl dd p{
.tdu;
}
a:hover > dl dt img{
opacity:.5;
width:110%;
height:110%;
top:-5%;
}

dl{
padding:10px;
background:#FFFFFF;
}

dt{
.pr;
.oh;
height:200px;

img{
.of;
.pa;
top:0;
width:100%;
height:100%;
transition:.5s;
}
b{
.db;
.pa;
left:-10px;
bottom:10px;
color:#FFFFFF;
font-size:7pt;
width:120px;
.tac;
line-height:100%;
padding:5px;
letter-spacing:.1em;
}
} /* dt */

.c1{
background:@c1;
}
.c2{
background:@c2;
}
.c3{
background:@c3;
}
.c4{
background:@c4;
}

dd{
padding:10px 0 0 0;
}

i{
.db;
color:@c3;
padding:0 0 0 20px;
font-size:12px;
font-style:italic;
.ffgb;
letter-spacing:.1em;
background:url(../image/news_icon2.png) no-repeat 0 50%;
}

small{
color:@c2;
padding:0 0 0 20px;
font-size:12px;
font-style:italic;
.ffgb;
letter-spacing:.07em;
background:url(../image/news_icon3.png) no-repeat 0 50%;
}
} /* .post */


.pager{
padding:30px 0 0 0;
.tac;

li{
.dib;
line-height:100%;
padding:0 2px;
}

a,p{
.db;
width:25px;
line-height:25px;
font-size:9pt;
}
p{
background:@c1;
color:#FFFFFF;
}
a{
border:1px @g2 solid;
}
a:hover{
background:@c2;
color:#FFFFFF;
border:0px;
}
a.current{
color: #FFFFFF;
background-color: #09478b;
border: 1px #dcdcdc solid;
}

} /* .pager */
} /* .sec2 */

}


@media (max-width:1200px){
.news{

.sec1{
width:220px;
}

}
}


@media (max-width:1000px){
.news{
padding:100px 0 50px 0;

article{
.db;
}
section{
.db;
}

.sec1{
width:100%;
.tac;

header{
padding:10px 0 0 0;
br{
.dn;
}
}

.oh{
height:70px;
}
.os{
.os;
overflow-y: visible;
}

ul{
.dt;
.tal;
padding:25px 0 0 0;
.center;
.nw;
display: flex;
flex-wrap: wrap;
}

li{
.dib;
padding:0 30px 0 20px;
}

dl{
.dt;
.tar;
margin:30px auto 30px auto;
}
dd{
.dtc;
.vat;
padding:0 10px 0 0;
}

.link a{
.r(50px);
padding:7px 0;
}
.link_fb{
padding:0;
i{
margin:0 10px 0 10px;
}
span{
.dn;
}
}

}


.sec2{
.post{

li{
padding:0 7px 15px 7px;
}

dt{
height:170px;
}

}
}

}
}


@media (max-width:800px){
.news{
padding:80px 0 50px 0;

.sec2{
.post{

li{
width:100%;
padding:0 0 5px 0;
.db;
}

dl{
.dt;
width:100%;
padding:10px;
}

dt{
.dtc;
width:30%;
height:120px;

b{
left:0;
bottom:0;
padding:5px 0;
width:100%;
.nw;
letter-spacing:.02em;
}
} /* dt */

dd{
.dtc;
padding:0 0 0 10px;
.vam;
}

}
} 

}
}


/* detail ///////////////////////*/
.detail{
padding:50px;
background:#FFF;

header{
p{
font-size:10pt;
.ffgb;letter-spacing:.05em;
.tar;
}
h3{
.ffgb;
font-size:15pt;
padding:10px 0 20px 0;
border-bottom:2px @g2 solid;
}
}

.text{
padding:50px 0 0 0;
}

.image{
padding:50px 0 0 0;
}

}


@media (max-width:500px){
.detail{
padding:20px;

header{
p{
font-size:9pt;
}
h3{
font-size:12pt;
padding:5px 0 10px 0;
}
}

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

.image{
padding:30px 0 0 0;
}

}
}