@charset "utf-8";

/* ===================================================================
css information

File Name  : layout.css
Author     : 
Style Info : 使用画面（/index.html）
=================================================================== */

/*********************************************************************

トップ画面

*********************************************************************/

/* top-slide-wrap
------------------------------------------------*/

#top-slide { width:100%; position:relative; overflow:hidden; visibility:hidden; opacity:0; }
.slideInit #top-slide { visibility:visible; opacity:1; }
#top-slide .slide > div { width:100%; height:0; padding:66.46% 0 0 0; overflow:hidden; position:relative; }
#top-slide .slide.video > div:after { content:''; width:100%; height:100%; position:absolute; top:0; left:0; border:#000 2px solid; z-index:2; }
#top-slide .slide img,
#top-slide .slide video { width:100%; position:absolute; top:0; left:0; }
#top-slide .slide video { height:100%; margin:0; padding:0; border:0; outline:0; }
#top-slide .slick-dots { width:100%; position:absolute; bottom:0; left:0; font-size:0; text-align:right; z-index:50; }
#top-slide .slick-dots > * { width:54px; height:7px; display:inline-block; vertical-align:bottom; background:#000; border-left:#fff 2px solid; border-top:#fff 2px solid; cursor:pointer; }
#top-slide .slick-dots button { display:none; }
#top-slide .slick-dots .slick-active { background:#014f99; }

/* transition */
#top-slide {
-webkit-transition: visibility 0.4s ease, opacity 0.4s ease;
-moz-transition: visibility 0.4s ease, opacity 0.4s ease;
-ms-transition: visibility 0.4s ease, opacity 0.4s ease;
-o-transition: visibility 0.4s ease, opacity 0.4s ease;
transition: visibility 0.4s ease, opacity 0.4s ease;
}

/* ua-pc */
.ua-pc.no-videoautoplay #top-slide .slide.video > div:after { display:none; }
.ua-pc #top-slide .slide .video-img { display:none !important; } 

/* ua-mobile, ua-tablet */
.ua-mobile #top-slide .slide video,
.ua-tablet #top-slide .slide video { display:none !important; }

@media screen and (max-width:900px){
#top-slide .slick-dots { text-align:right; }
#top-slide .slick-dots > * { width:34px; height:5px; border-left-width:1px; border-top-width:1px; }
}

/* top-pickup
------------------------------------------------*/

#top-pickup { padding:38px 0 0 0; } 
#top-pickup .cmn-pagettl { padding-bottom:68px; padding-left:50px; padding-right:50px; }
#top-pickup ul { padding:0 37px; margin:-13px 0 0 0; }
#top-pickup li { width:33.333%; float:left; padding:13px; }
#top-pickup li > * { display:block; width:100%; height:0; padding:68.831% 0 0 0; position:relative; overflow:hidden; }
#top-pickup li .figure { width:100%; height:100%; position:absolute; top:0; left:0; }
#top-pickup li .section { width:100%; position:absolute; bottom:-400px; left:0; opacity:0; visibility:hidden; }
#top-pickup li .section { padding:9px 15px; }
#top-pickup li .section h3 { font-size:14px; line-height:160%; }
#top-pickup li .section p { font-size:10px; line-height:175%; margin:5px 0 0 0; }
#top-pickup li .section p span { padding-right:0.5em; }
#top-pickup li .section p:after { content:'\00FF1Emore'; display:inline-block; vertical-align:baseline; }

/* news,item */
#top-pickup li .section,
#top-pickup li .figure:after,
#top-pickup li .section:after { background:transparent no-repeat center center; background-size:auto 19px; }
#top-pickup li .figure:after,
#top-pickup li .section:after { content:''; width:68px; height:30px; position:absolute; }
#top-pickup li .figure:after { bottom:0; left:0; }
#top-pickup li .section:after { top:-30px; left:0; }

/* news */
#top-pickup li.news .section,
#top-pickup li.news .figure:after,
#top-pickup li.news .section:after { background-color:#004f97; background-color:rgba(0,79,151,1); }
#top-pickup li.news .figure:after,
#top-pickup li.news .section:after { background-image:URL(/img/pickup_icon_01.png); }

/* item */
#top-pickup li.item .section,
#top-pickup li.item .figure:after,
#top-pickup li.item .section:after { background-color:#00532a; background-color:rgba(0,83,42,1); }
#top-pickup li.item .figure:after,
#top-pickup li.item .section:after { background-image:URL(/img/pickup_icon_02.png); }

/* transition */
#top-pickup li .section,
#top-pickup li .section:after { 
-webkit-transition: bottom 0.5s ease, background-color 0.5s ease, opacity 0s ease 0.5s, visibility 0s ease 0.5s;
-moz-transition: bottom 0.5s ease, background-color 0.5s ease, opacity 0s ease 0.5s, visibility 0s ease 0.5s;
-ms-transition: bottom 0.5s ease, background-color 0.5s ease, opacity 0s ease 0.5s, visibility 0s ease 0.5s;
-o-transition: bottom 0.5s ease, background-color 0.5s ease, opacity 0s ease 0.5s, visibility 0s ease 0.5s;
transition: bottom 0.5s ease, background-color 0.5s ease, opacity 0s ease 0.5s, visibility 0s ease 0.5s;
}
#top-pickup li a:hover .section,
#top-pickup li a:hover .section:after { 
-webkit-transition: bottom 0.5s ease, background-color 0.5s ease, opacity 0s ease, visibility 0s ease;
-moz-transition: bottom 0.5s ease, background-color 0.5s ease, opacity 0s ease, visibility 0s ease;
-ms-transition: bottom 0.5s ease, background-color 0.5s ease, opacity 0s ease, visibility 0s ease;
-o-transition: bottom 0.5s ease, background-color 0.5s ease, opacity 0s ease, visibility 0s ease;
transition: bottom 0.5s ease, background-color 0.5s ease, opacity 0s ease, visibility 0s ease;
}
#top-pickup li .figure img { 
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
#top-pickup li .figure:after { 
-webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
-moz-transition: opacity 0.5s ease, visibility 0.5s ease;
-ms-transition: opacity 0.5s ease, visibility 0.5s ease;
-o-transition: opacity 0.5s ease, visibility 0.5s ease;
transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* hover */
#top-pickup li a:hover .figure img { opacity:0.2; }
#top-pickup li a:hover .figure:after { opacity:0; visibility:hidden; }
#top-pickup li a:hover .section { bottom:0; opacity:1; visibility:visible; }
#top-pickup li.news a:hover .section,
#top-pickup li.news a:hover .section:after { background-color:#004f97; background-color:rgba(0,79,151,0.7); }
#top-pickup li.item a:hover .section,
#top-pickup li.item a:hover .section:after { background-color:#00532a; background-color:rgba(0,83,42,0.7); }

/* tablet */
.ua-tablet #top-pickup li a:hover .figure img { opacity:1; }
.ua-tablet #top-pickup li a:hover .figure:after { opacity:1; visibility:visible; }
.ua-tablet #top-pickup li a .section { display:none; }

/* clearfix element */
#top-pickup ul:after { visibility:hidden; display:block; font-size:0; content:"." ; clear:both; height:0; }
* html #top-pickup ul { zoom:1; /*\*//*/ height:auto; overflow:hidden; /**/ }
*:first-child+html #top-pickup ul { zoom:1; }

/* english
------------------------------------------------------------------- */
body#en #top-pickup li .section h3 { font-size:15px; }
body#en #top-pickup li .section p { font-size:12px; }

@media screen and (max-width:900px){	
#top-pickup { padding:10px 0 0 0; } 
#top-pickup .cmn-pagettl { padding-bottom:30px; padding-left:15px; padding-right:15px; }
#top-pickup ul { padding:0 15px; margin:0; }
#top-pickup li { width:100%; float:none; padding:10px 0 0 0; }
#top-pickup li:first-of-type { padding-top:0; }
#top-pickup li .section { display:none; }

/* news,item */
#top-pickup li .section,
#top-pickup li .figure:after,
#top-pickup li .section:after { background-size:auto 14px; }
#top-pickup li .figure:after,
#top-pickup li .section:after { width:54px; height:26px; }

/* hover */
#top-pickup li a:hover .figure img { opacity:1; }
#top-pickup li a:hover .figure:after { opacity:1; visibility:visible; }
}