@charset "utf-8";
html {
overflow-y: scroll;
}

body {
display:block;
position: relative;
visibility: visible;
opacity:1;
}
#container {
top: 0;
left: 0;
width: 100%;
position: absolute;
z-index: 1;
}

.stageBase {
width: 100%;
position: relative;
overflow: hidden;
}

#main_visual_container{
position:relative;
width:100%;
height:100%;
background:url(../../img/bg01.jpg) no-repeat center center;
background-size: cover;
}
#btn_scroll{
position:absolute;
left:50%;
margin-left:-22px;
bottom:20px;
cursor:pointer;
}
/*@media screen and (max-width: 950px) {
#btn_scroll{
left:25%;
}
}*/
#main_visual_brand_logo_container{
position: absolute;
top: 50%;
left: 75%;
-webkit-transform: translate(-50%, -75%);
transform: translate(-50%, -75%);
text-align:center;
}
#main_visual_brand_logo_container{
font-size:180%;
width:360px;
}
#main_visual_brand_logo_container img{
width:100%;
margin-bottom:0.5em;
}

#news_title{
height:121px;
background:#FFF;
width:90px;
font-size:240%;
text-align:center;
line-height:1.2;
vertical-align:central;
border-right:#f9e6d9;
float:left;
margin-right:1px;

}
#news_title p{
padding-top:40px;
}
#news_title span{
font-size:50%;
display:block;
}
span.yu{
font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-weight:normal;
}

#fade_area{
display:none;
}

.image{
position: relative;
width: 100%;
}
.image:before {
content:"";
display: block;
padding-top: 50%;
}
.image div.thema_container{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;

width:100%;
height:100%;
}
.image div.thema_container div.box{
width:50%;
height:100%;
float:left;
font-size:300%;
position:relative;
text-align:center;
}
#fade_area .image .sp_only{
pointer-events: none;
}

.thema01 .box.box_right{
background:url(../../img/top_img_con.jpg) no-repeat center center;
background-size:cover;
}
.thema02 .box.box_left{
background:url(../../img/top_img_ftr.jpg) no-repeat center center;
background-size:cover;
}
.image div.thema_container div.text_area .text_container{
position: absolute;
width:100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height:210px;
opacity:0;
}
.image div.thema_container div.text_area .text_container span{
display:block;
}
.image div.thema_container div.text_area .text_container > span{
font-size:66.666%;
}
.image div.thema_container div.text_area .text_container .text_container_title span.yu{
font-size: 66.666%;
}
.image div.thema_container div.text_area .text_container span.thema{
font-size:60%;
padding:25px 0;
line-height:1.5;
}
.image a:hover{
color:#000;
}
.hover_arrow{
font-size:66.666%;
display:inline-block !important;
width:92px;
text-align:left;
background-image: url(../../img/image_arrow_tail.jpg), url(../../img/image_arrow.png);
background-repeat:repeat-x, no-repeat;
background-position:bottom left, bottom right;
background-size:27px auto,91px auto;
position:absolute;
bottom:0;
left:47%;
}

#main_visual_brand_logo_container{
opacity:0;
}

.thema02  .text_area .text_container{
opacity:0
}
.line_border_top{
height:4px;
border-top:6px solid #d0d0d0;
border-bottom:1px solid #d0d0d0;
}
.area_title_sp{
font-size: 285.71%;
text-align:center;
padding-top:20px;
line-height:1em;
padding-bottom:25px;
}
.area_title_sp span{
display:block;
font-size: 60%;
}
@media screen and (max-width: 767px) {
#main_visual_container_sp{
position: relative;
width: 100%;

}
#main_visual_container_sp:before {
content:"";
display: block;
padding-top: 149%; /* 高さを幅の75%に固定 */
}

#main_visual_container_sp_inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width:100%;
height:100%;
background:url(../../img/bg01_sp.jpg) no-repeat  center center;
background-size: cover;
}



#brand_logo_sp{
display: block;
padding-top:40px;
width:240px;
margin:0 auto;
}
#brand_logo_sp img{
width:100%;
}
#subtitle_sp{
display: block;
font-size: 185.71%;
margin-top:0.3em;
text-align:center;
}
.line_border_top{
height:3px;
border-top:4px solid #d0d0d0;
border-bottom:1px solid #d0d0d0;
}
.area_title_sp{
height:52px;
font-size: 285.71%;
text-align:center;
padding-top:20px;
line-height:1em;
padding-bottom:0;
}
.area_title_sp span{
display:block;
font-size: 60%;
}
#new_cotainer_sp ul{
border-left:1px solid #d0d0d0;
}
#new_cotainer_sp ul li{
width:50%;
float:left;
height:103px;
overflow:hidden;
padding-bottom:2px;
}
#new_cotainer_sp ul li div{
height:100%;
border:1px solid#d0d0d0;
border-left:none;
background-image:url(../../img/item01.jpg);
background-repeat:no-repeat;
background-position:center 16px ;
background-size:80px auto;
font-size:171.42%;
text-align:center;
line-height:1.2;
position:relative;
}
#new_cotainer_sp ul li div a{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#new_cotainer_sp ul li div a span.text{
display:block;
padding-top:68px;
}
#new_cotainer_sp ul li:first-child div{
background-image:url(../../img/item02.jpg);
background-repeat:no-repeat;
background-position:center 9px ;
background-size:85px auto;
}
.news_sp_arrow{
position:absolute;
right:10px;
top:45px;
}

#main_visual_brand_logo_container{
opacity:1;
}

.image ul li.text_area .text_container{
opacity:1;
}

.image{
font-size:92%;
}
.image div.thema_container div.text_area .text_container .text_container_title span.yu{
font-size: 60%;
}
.image div.thema_container div.text_area .text_container span.thema{
padding:10px 0;
}
.hover_arrow{
width:70px;
position:static;
margin-left:30px;
}
.thema01  .text_area .text_container{
opacity:1
}
.thema02  .text_area .text_container{
opacity:1
}

#fade_area .image .sp_only{
pointer-events: auto;
}
#fade_area .image .pc_only{
pointer-events: none;
}
.image div.thema_container div.text_area .text_container{
height:auto;
opacity:1;
}
}