@charset "UTF-8";
/* CSS Document */

#main .change_wrap{ margin-bottom:4em;}
#main .change_wrap .change_btn{ margin-bottom:2em;}
#main .change_wrap .change_btn > div{ font-size:1.6em; font-weight:600; display:inline-block; border-bottom:2px solid #AAA; cursor:pointer;}
#main .change_wrap .change_btn > div.on{ border-bottom:2px solid #EE771F;}
#main .change_wrap .change_btn .cont1{ margin-right:3em;}
#main .change_wrap .change_btn .cont2{}
#main .change_wrap .change_cont{ text-align:left;}
#main .change_wrap .change_cont > div{display:none;}
#main .change_wrap .change_cont .flex_wrap{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
-webkit-box-pack:space-between;-moz-box-pack:space-between;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;
-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
#main .change_wrap .change_cont > div.on{ display:block;}
#main .change_wrap .change_cont > div .text{ flex:1; margin-right:2em;}
#main .change_wrap .change_cont > div .img{ text-align:center;}
#main .change_wrap .change_cont .cont1{}
#main .change_wrap .change_cont .cont2{}

#main .co_mv{ position:relative; max-width:1280px; margin:auto;}
#main .co_mv .mv_text{ position:absolute; top:12%; left:10%; color:#FFF; font-size:1.4em; font-weight:600; border-bottom:2px solid; padding-bottom:0.1em; letter-spacing:0.1em;}

#main .cont_wrap{ display:inline-block; max-width:320px; width:40%; position:relative;}
#main .cont_wrap{ margin:1%;}
#main .cont_wrap .img{ overflow:hidden;}
#main .cont_wrap .text{ position:absolute; background:rgba(241,90,36,0.15);  width:100%; height:100%; left:0; right:0; top:0; bottom:0; margin:auto;}
#main .cont_wrap .text span{ color:#FFF; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; display:inline-block; text-align:center; height:1em; line-height:1.2; font-size:1.2em; letter-spacing:0em; font-weight:900;text-shadow:0 2px 3px #323232;}

#main .cont_wrap:hover .img img{transform: scale(1.02);}
#main .cont_wrap:hover .text{ opacity:0;}

#main .pickup_wrap .cont img,
#main .cont_wrap .text,
#main .cont_wrap .img img{
-moz-transition-property:opacity,transform;-webkit-transition-property:opacity,transform;-o-transition-property:opacity,transform;-ms-transition-property:opacity,transform;transition-property:opacity,transform;
-moz-transition-duration:0.3s;-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration:0.3s;
}



#main .pickup_wrap{ display:none;}
#main .pickup_wrap.on{ display:block;}
#main .pickup_wrap .cont{ display:inline-block; max-width:320px; width:30%; position:relative; margin:4% 1%; vertical-align:top; text-align:center;}
#main .pickup_wrap .cont span{ font-size:0.85em; font-weight:600; line-height:1.3; display:inline-block; margin:0.5em auto 0;}
#main .pickup_wrap .cont:hover img{transform: scale(0.96); opacity:0.8;}

#main .pickup_wrap .bnr{ width:80%; margin:2em auto; text-align:center;}

@media all and (max-width: 768px) {
	
#main .change_wrap .change_btn > div{ font-size:1.4em;}
#main .change_wrap .change_btn .cont1{ margin-right:1em;}
#main .change_wrap .change_cont > div{ display:none;}
#main .change_wrap .change_cont > div.on{ display:block;}
#main .change_wrap .change_cont .flex_wrap{ display:block;}
#main .change_wrap .change_cont > div .text{margin:0em auto 1em;}

#main .cont_wrap{ display:inline-block; max-width:320px; width:100%; position:relative;}
#main .cont_wrap2{ margin:4% auto;}

#main .pickup_wrap .cont.pc{ display:none;}
#main .pickup_wrap .cont{ display:block;  width:100%; margin:0 auto 2em;; border-bottom:1px solid #DDD; padding-bottom:1em;}
#main .pickup_wrap .cont.last,
#main .pickup_wrap .cont:last-of-type{ border-bottom:none;}
#main .pickup_wrap .bnr{ width:100%; }
#main .pickup_wrap .cont span{ font-size:1em; margin-top:0.25em;}
}