/* 
===================================================================
CSS index

common
link
header
footer

===================================================================
*/

/* 
-------------------------------------------------------------------

skroll

------------------------------------------------------------------- */


#scroll{margin:10px;position:fixed;z-index:9999999;}


/* 
-------------------------------------------------------------------

common

------------------------------------------------------------------- */

html, body {
height:100%;
}


body{
margin:0;
padding:0;
font-family:Helvetica,Arial,’ヒラギノ角ゴ Pro W3’,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,sans-serif;
font-size:81.3%;
color:#000;
/*background:#F6F1DF url(../images/common/bg.jpg) no-repeat top center;
-moz-background-size:cover;
background-size:cover;
background-attachment:fixed;*/
-webkit-text-size-adjust:100%;
}

.notfound{
background:none !important;
}



/* 
-------------------------------------------------------------------

link

------------------------------------------------------------------- */

a:link{
color:#000;
text-decoration:none;
}


a:visited{
color:#000;
text-decoration:none;
}


a:hover{
color:#828282;
text-decoration:none;
}


a:active{
color:#000;
text-decoration:none;
}


/* 
-------------------------------------------------------------------

loading

------------------------------------------------------------------- */

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #FFF;
  z-index:999998;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index:999999;

}

#wrap{
width:100%;
height:100vh;
display:none;
background:#fff;
position:fixed;
z-index:99999;
}



/* 
-------------------------------------------------------------------

skrollable

------------------------------------------------------------------- */

.skrollable {
	/*
	 * First-level skrollables are positioned relative to window
	 */
	position:fixed;

	/*
	 * Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable
	 */
	z-index:100;
}

.skrollr-mobile .skrollable {
	/*
		May cause issues on Android default browser (see #331 on GitHub).
	*/
	position:absolute;
}

.skrollable .skrollable {
	/*
	 * Second-level skrollables are positioned relative their parent skrollable
	 */
	position:absolute;
}

.skrollable .skrollable .skrollable {
	/*
	 * Third-level (and below) skrollables are positioned static
	 */
	position:static;
}



/* 
-------------------------------------------------------------------

opning navi

------------------------------------------------------------------- */
/*
#op_navi_wrap{
width:100%;
position:fixed;
z-index:10000;
}

@media screen and (max-width:768px){

#op_navi_wrap{
display:none;
}

}

#op_navi{
width:45%;
height:0;
margin:0 auto;
padding-top:11%;
position:relative;
background-color:rgba(255,255,255,0);
}


@media screen and (max-width:1500px){

#op_navi{
width:600px;
height:180px;
margin:0 auto;
padding-top:0;
position:relative;
background-color:rgba(0,0,0,0.5);
}

}


#op_top{
position:absolute;
left:40px;
bottom:50px;
}

#op_topics{
position:absolute;
left:140px;
bottom:13px;
}

#op_brands{
position:absolute;
left:280px;
bottom:5px;
}

#op_company{
position:absolute;
right:100px;
bottom:20px;
}

#op_shop{
position:absolute;
right:0px;
bottom:50px;
}




#op_top{
position:absolute;
left:10%;
bottom:28%;
}

#op_topics{
position:absolute;
left:22%;
bottom:10%;
}

#op_brands{
position:absolute;
left:45%;
bottom:2%;
}

#op_company{
position:absolute;
right:20%;
bottom:9%;
}

#op_shop{
position:absolute;
right:0%;
bottom:37%;
}

*/


/* 
-------------------------------------------------------------------

opning

------------------------------------------------------------------- */



/* theater */

.theater{
width:100%;
height:100%;
margin:0;
padding:0;
position:fixed;
z-index:9999;
background:#000;
box-shadow: 0px 0px 20px #333;　/* Firefox用 */  
-moz-box-shadow: 0px 0px 20px #333;　/* Firefox用 */  
-webkit-box-shadow: 0px 0px 20px #333;　/* Safari,Google Chrome用 */
}






/* top menu */

.logo_wrap{
width:100%;
position:fixed;
top:0px;
left:0px;
z-index:1000;
}



.logo_wrap_in{
width:1000px;
margin:0 auto;
text-align:right;
position:relative;
top:0px;
}


.logo{
width:1000px;
margin:20px auto 0 auto;
position:relative;
}

.logo img{
width:45px;
}
/*元のサイズ28px*/

@media screen and (max-width:768px){

.logo{
width:100%;
margin:20px auto 0 auto;
position:static;
}

.logo img{
width:45px;
}

}


.top_open{
cursor:pointer;
}


.menu_txt{
color:#FFF;
font-size:11px;
position: absolute;
bottom:-12px;
left:11px;
}



#top_close{
width:35px;
height:35px;
position: absolute;
top:10px;
left:0px;
cursor: pointer;
z-index:10010;
background-color:rgba(0,0,0,0.8);
}

.top_drawr{
display:none;
background-color:rgba(0,0,0,0.8);
position:fixed;
top: 0px;
left:0;
width:200px;
padding:60px 0 20px 20px;
z-index:10010;
}


ul.top_menu{
margin:0;
padding:0;
}

ul.top_menu li{
line-height:1.5;
margin:0 0 20px 0;
padding:0;
}

ul.top_menu li a{
color:#FFF;
display:block;
}





/* 縦横比率レスポンシブ*/
.curtain{
width:100%;
height:100%;
/*padding-top:60.01119%;*/
text-align:center;
position:absolute;
top:0;
z-index:31;
background:url(../images/common/curtain.png) no-repeat center top;
-moz-background-size:cover;
background-size:cover;
}


/*もともとのcss
.curtain{
width:100%;
height:100vh;
text-align:center;
position:absolute;
top:0;
z-index:31;
background:url(../images/common/curtain.png) no-repeat center top;
-moz-background-size:contain;
background-size:contain;
}


@media screen and (max-width:1500px){
.curtain{
width:100%;
height:100vh;
text-align:center;
position:absolute;
top:0;
z-index:31;
background:url(../images/common/curtain.png) no-repeat center top;

}
}
*/


/* maku */

.drop{
width:100%;
height:1059px;
text-align:center;
position:fixed;
top:0;
z-index:10;
background:url(../images/common/drop.png) no-repeat center top;
}


@media screen and (max-width:1024px){
/* ipad */

.drop{
background:url(../images/common/drop.png) no-repeat center -60px;
}

}

@media screen and (max-width:768px){
/* ipad */

.drop{
background:url(../images/common/drop.png) no-repeat center top;
-moz-background-size:cover;
background-size:cover;
}

}

@media screen and (max-width:667px){
/* smarphone landscpe*/

.drop{
height:180%;
background:url(../images/common/drop_mobile.png) no-repeat center -100px;
}

}

@media screen and (max-width:560px){
/* smarphone portraite*/

.drop{
height:120%;
background:url(../images/common/drop_mobile.png) no-repeat center 50px;
}

}



.trex_drop_logo{
margin-top:220px;
}

@media screen and (max-width:1024px){
/* ipad */

.trex_drop_logo{
margin-top:150px;
}

.trex_drop_logo img{
width:200px;
}

}


@media screen and (max-width:768px){
/* ipad */

.trex_drop_logo{
margin-top:220px;
}

.trex_drop_logo img{
width:280px;
}

}


@media screen and (max-width:667px){
/* smarphone landscpe*/

.trex_drop_logo{
margin-top:80px;
}

.trex_drop_logo img{
width:80px;
}

}

@media screen and (max-width:560px){
/* smarphone portraite*/

.trex_drop_logo{
margin-top:130px;
}

.trex_drop_logo img{
width:150px;
}

}



.top_vision{
margin:10px auto;
position:relative;
}

.bg_vision{
width:auto;
height:auto;
}

.bg_vision_sm{
display:none;
}

.sm{
display:none;
}



@media screen and (max-width:667px){

.top_vision{
margin:0px auto;
}

.top_vision img{
width:46%;
margin:0 27%;
}

.bg_vision{
display:none;
}

.bg_vision_sm{
width:auto;
height:200px;
display:block;
}

.sm{
display:block;
}

}



@media screen and (max-width:560px){

.top_vision img{
width:96%;
margin:0 2%;
}

.bg_vision{
display:none;
}

.bg_vision_sm{
width:auto;
height:250px;
display:block;
}

.sm{
display:block;
}

}


.top_vision_wrap{
width:100%;
text-align:center;
position:absolute;
z-index:1;
}

.txt_vision{
width:340px;
/*height:165px;*/
line-height:1.8;
margin:80px auto 0 auto;
font-size:10px;
display:inline-block;
overflow:hidden;
}

@media screen and (max-width:667px){

.txt_vision{
width:75%;
height:auto;
line-height:1.5;
margin:55px auto 0 auto;
font-size:8px !important;
display:inline-block;
}

.txt_vision img{
width:30%;
}

}

@media screen and (max-width:560px){

.txt_vision{
width:75%;
height:auto;
line-height:1.5;
margin:80px auto 0 auto;
font-size:9px !important;
display:inline-block;
}

.txt_vision img{
width:70%;
}


/*
.txt_vision{
width:75%;
height:auto;
line-height:1.8;
margin:120px auto 0 auto;
display:inline-block;
}
*/

}

.scroll_down{
width:100%;
text-align:center;
}


@media screen and (max-width:667px){

.scroll_down img{
width:35px;
}

}


/* arm */

.arm_wrap{
width:100%;
height:100%;
margin:0;
padding:0;
position:fixed;
z-index:9;
background:#000;
}


.arm{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
position:fixed;
z-index:9;
background-repeat:no-repeat;
background-position:center bottom;
background-color:#000;
background-image:url(../images/common/capmp26_3926.jpg);

}

.draw01{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
position:fixed;
z-index:9;
background-repeat:no-repeat;
background-position:center bottom;
background-color:#000;
background-image:url(../images/common/capmp26_3928.jpg);
}

.draw02{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
position:fixed;
z-index:9;
background-repeat:no-repeat;
background-position:center bottom;
background-color:#000;
background-image:url(../images/common/capmp26_3932.jpg);
}

.draw03{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
position:fixed;
z-index:9;
background-repeat:no-repeat;
background-position:center bottom;
background-color:#000;
background-image:url(../images/common/capmp26_3944.jpg);
}

.draw04{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
position:fixed;
z-index:9;
background-repeat:no-repeat;
background-position:center bottom;
background-color:#000;
background-image:url(../images/common/capmp26_3951.jpg);
}

.draw05{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
position:fixed;
z-index:9;
background-repeat:no-repeat;
background-position:center bottom;
background-color:#000;
background-image:url(../images/common/capmp26_3960.jpg);
}

.draw06{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
position:fixed;
z-index:9;
background-repeat:no-repeat;
background-position:center bottom;
background-color:#000;
background-image:url(../images/common/capmp26_3968.jpg);
}

.draw07{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
position:fixed;
z-index:9;
background-repeat:no-repeat;
background-position:center bottom;
background-color:#000;
background-image:url(../images/common/capmp26_3979.jpg);
}

.draw08{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
position:fixed;
z-index:9;
background-repeat:no-repeat;
background-position:center bottom;
background-color:#000;
background-image:url(../images/common/capmp26_3996.jpg);
}

.draw09{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
position:fixed;
z-index:9;
background-repeat:no-repeat;
background-position:center bottom;
background-color:#000;
background-image:url(../images/common/capmp26_4004.jpg);
}

.draw10{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
position:fixed;
z-index:9;
background-repeat:no-repeat;
background-position:center bottom;
background-color:#000;
background-image:url(../images/common/capmp26_4009.jpg);
}

.draw11{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
position:fixed;
z-index:9;
background-repeat:no-repeat;
background-position:center bottom;
background-color:#000;
background-image:url(../images/common/capmp26_4013.jpg);
}


@media screen and (max-width:768px){

.arm{
-moz-background-size:cover;
background-size:cover;
}

.draw01{
-moz-background-size:cover;
background-size:cover;
}

.draw02{
-moz-background-size:cover;
background-size:cover;
}

.draw03{
-moz-background-size:cover;
background-size:cover;
}

.draw04{
-moz-background-size:cover;
background-size:cover;
}

.draw05{
-moz-background-size:cover;
background-size:cover;
}

.draw06{
-moz-background-size:cover;
background-size:cover;
}

.draw07{
-moz-background-size:cover;
background-size:cover;
}

.draw08{
-moz-background-size:cover;
background-size:cover;
}

.draw09{
-moz-background-size:cover;
background-size:cover;
}

.draw10{
-moz-background-size:cover;
background-size:cover;
}

.draw11{
-moz-background-size:cover;
background-size:cover;
}
}
/* 
-------------------------------------------------------------------

trex_kun

------------------------------------------------------------------- */

.trex_kun_wrap{
width:100%;
height:100%;
margin:0;
padding-top:10%;
position:fixed;
z-index:21;
}


.trex_kun{
width:100%;
height:100vh;/*対応するブラウザIE9以上*/
text-align:center;
background-repeat:no-repeat;
background-position:center bottom;
background-image:url(../images/common/ico_trex.svg);
}


@media screen and (max-width:768px){

.trex_kun{
-moz-background-size:cover;
background-size:cover;
}
}



.trex_kun_neo{
position:fixed;
right:27px;
bottom:83px;
z-index:999;
opacity:1;
}

@media screen and (max-width:667px){

.trex_kun_neo{
width:106px;
height:78px;
position:fixed;
right:25px;
bottom:50px;
opacity:1;
}
}



@media screen and (max-width:560px){

.trex_kun_neo{
width:106px;
height:78px;
position:fixed;
right:5px;
bottom:65px;
opacity:1;
}
}





/* trex kun end
----------------------------------------------*/


.trex_end_in{
width:100%;
height:300px;
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align:center;
}


@media screen and (max-width:768px){

.trex_end_in{
width:85%;
height:300px;
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align:center;
}

}


@media screen and (max-width:667px){

.trex_end_in{
height:200px;
}

.trex_end_in img{
width:50%;
}

}


@media screen and (max-width:560px){

.trex_end_in{
height:300px;
}

.trex_end_in img{
width:100%;
}

}



/* 
-------------------------------------------------------------------

位置確認用バー

------------------------------------------------------------------- */

.bar{
width:15px;
height:200px;
background:#CCCCCD;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
position:fixed;
top:40%;
right:10px;
z-index:9999;
}

.bar_point{
width:10px;
height:10px;
background:#A6A7A8;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
position:absolute;
top:0;
right:3px;
}


/* 
-------------------------------------------------------------------

位置確認用バー(dot)

------------------------------------------------------------------- */

.bounce{
width:15px;
position:fixed;
right:10px;
z-index:9999;
}

.b_index{
top:20%;
}

.b_en{
top:40%;
}


ul.bounce_dot li{
margin-bottom:10px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

ul.bounce_dot li a{
width:15px;
height:15px;
display:block;
}

.no2{
position:absolute;
top:30px;
}

.no3{
position:absolute;
top:60px;
}

.no4{
position:absolute;
top:90px;
}

.no5{
position:absolute;
top:120px;
}

.no6{
position:absolute;
top:150px;
}

.no7{
position:absolute;
top:180px;
}

.no8{
position:absolute;
top:210px;
}

.no9{
position:absolute;
top:240px;
}

.no10{
position:absolute;
top:270px;
}

.no11{
position:absolute;
top:300px;
}

.no12{
position:absolute;
top:330px;
}

.no13{
position:absolute;
top:360px;
}

.no14{
position:absolute;
top:390px;
}

.no15{
position:absolute;
top:420px;
}


@media screen and (max-width:667px){

.m_index{
top:30%;
}

ul.bounce_dot li{
margin-bottom:10px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}

ul.bounce_dot li a{
width:10px;
height:10px;
display:block;
}


.no2{
position:absolute;
top:20px;
}

.no3{
position:absolute;
top:40px;
}

.no4{
position:absolute;
top:60px;
}

.no5{
position:absolute;
top:80px;
}

.no6{
position:absolute;
top:100px;
}

.no7{
position:absolute;
top:120px;
}

.no8{
position:absolute;
top:140px;
}

.no9{
position:absolute;
top:160px;
}

.no10{
position:absolute;
top:180px;
}

.no11{
position:absolute;
top:200px;
}

.no12{
position:absolute;
top:220px;
}

.no13{
position:absolute;
top:240px;
}

.no14{
position:absolute;
top:260px;
}



}


/* tablet landscpae */

@media screen and (max-width:1024px){

ul.bounce_dot_port{display:none;}
ul.bounce_dot_land{display:block;}

ul.bounce_dot_land li{
margin-bottom:10px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

ul.bounce_dot_land li a{
width:15px;
height:15px;
display:block;
}

}

/* tablet portraite */

@media screen and (max-width:768px){

ul.bounce_dot_land{display:none;}
ul.bounce_dot_port{display:block;}

ul.bounce_dot_port li{
margin-bottom:10px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

ul.bounce_dot_port li a{
width:15px;
height:15px;
display:block;
}

}



/* 
-------------------------------------------------------------------

to jump

------------------------------------------------------------------- */

ul.tojump{
position:fixed;
right:10px;
bottom:20px;
text-align:right;
z-index:10;
}

ul.tojump li{
margin-left:10px;
display:inline-block;
}


/* 
-------------------------------------------------------------------

navi

------------------------------------------------------------------- */

/* indexのみ */
#navi{
width:100%;
height:70px;
background:url(../images/common/bg_navi.png) repeat-x bottom center;
position:fixed;
z-index:9990;
/*z-index:21;*/
}

/* その他page */

#navi_page{
width:100%;
height:70px;
background:url(../images/common/bg_navi.png) repeat-x bottom center;
position:fixed;
z-index:21;
display:block;
}

@media screen and (max-width:768px){

#navi_page{
display:none;
}

}



.navi_inner{
width:1000px;
margin:0 auto;
position:relative;
}

@media screen and (max-width:768px){

.navi_inner{
display:none;
}

}

@media screen and (max-width:1200px){

.navi_inner{
width:100%;
margin:0 auto;
position:relative;
}

}

.navi_logo{
margin:0;
padding:0;
position:absolute;
top:17px;
left:5px;
z-index:12;

}

ul.navi{
height:70px;
margin:0 0 0 0;
padding:0;
text-align:right;
position:relative;
z-index:11;
}

ul.navi li{
margin-left:30px;
padding-top:10px;
vertical-align:middle;
display:inline-block;
position:relative;
}



ul.navi li.current:after{
content:"";
display: block;
position:relative;
margin-bottom:-3px;
bottom:-2px;
border-bottom:3px #000 solid;
}


.navi_lang{
padding-left:80px;
position:absolute;
top:0;
right:0;
z-index:8888;
}


/* tablet landscape */

@media screen and (max-width:1024px){

ul.navi_t{
height:70px;
margin:0 0 0 0;
padding:0;
text-align:right;
position:relative;
z-index:11;
}

ul.navi_t li{
margin-left:30px;
padding-top:10px;
vertical-align:middle;
display:inline-block;
position:relative;
}



ul.navi_t li.current:after{
content:"";
display: block;
position:relative;
margin-bottom:-3px;
bottom:-2px;
border-bottom:3px #000 solid;
}


.navi_t_lang{
padding-left:80px;
position:absolute;
top:0;
right:0;
z-index:8888;
}

}












/* navi_marker2 */

.top_bdr{
width:30px;
height:3px;
display:block;
position: absolute;
bottom:-6px;
background-color:#000;
}


.topics_bdr{
width:50px;
height:3px;
display:block;
position: absolute;
bottom:-6px;
background-color:#000;
}

.brands_bdr{
width:52px;
height:3px;
display:block;
position: absolute;
bottom:-6px;
left:-3px;
background-color:#000;
}








/* navi_marker */

#navi_marker {
height:3px;
position: absolute;
background-color:#000;
left:0px;
top:45px;
display:block;
}


/* opning_online */

.btn_online_wrap{
width:100%;
position:fixed;
right:65px;
top:7px;
z-index:10001;
background:#ccc;
}

@media screen and (max-width:768px){

.btn_online_wrap{
right:0px;
}

}

.btn_online_in{
width:1000px;
margin:0 auto;
text-align:right;
/*background-color:rgba(255,255,255,0.5);*/
position:relative;
top:0px;
}

.btn_online{
position:absolute;
right:0;
}

.btn_online_top img{
width:114px;
position:absolute;
right:0;
}

@media screen and (max-width:1200px){

.btn_online_in{
width:100%;
margin:0 auto;
text-align:right;
position:relative;
top:0px;
}

.btn_online{
position:absolute;
right:5px;
}

.btn_online_top img{
right:5px;
}

}



/* 
-------------------------------------------------------------------

mobile navi

------------------------------------------------------------------- */

.m_navi{
display:none;
}

.navi_m_logo img{
display:none;
}

.m_menu_wrap{
display:none;
}

.drawr{
display:none;
}



@media screen and (max-width:768px){


.m_navi{
width:100%;
height:70px;
background:url(../images/common/bg_navi.png) repeat-x bottom center;
position:fixed;
top: 0;
left: 0;
z-index:9991;
display:block;
}

.page_m_logo{
margin-top:16px;
text-align:center;
}


.navi_m_logo{
width:100%;
margin-top:18px;
position:fixed;
z-index:9991;
}



/*
.navi_m_logo{
width:100%;
margin-top:15px;
margin-right:auto;
margin-left:auto;
text-align:center;
display:block;
position:fixed;
z-index:21;
}
*/

.navi_m_logo img{
width:66px;
margin-right:auto;
margin-left:auto;
display:block;
text-align:center;
}


.m_menu_wrap{
width:20%;
height:70px;
position:fixed;
top:0px;
z-index:9992;/*21*/
display:block;
}

.m_menu_in{
width:1000px;
margin:0 auto;
display:block;
}

.m_open{
position:fixed;
top:8px;
cursor:pointer;
}

#m_close{
width:35px;
height:35px;
position: absolute;
top:10px;
left:0px;
cursor: pointer;
z-index:10000;
background-color:rgba(0,0,0,0.8);
}

.drawr{
display:none;
background-color:rgba(0,0,0,0.8);
position:fixed;
top: 0px;
left:0;
width:200px;
padding:60px 0 20px 20px;
z-index:10001;
}

ul.m_menu{
margin:0;
padding:0;
}

ul.m_menu li{
line-height:1.5;
margin:0 0 20px 0;
padding:0;
}

ul.m_menu li a{
color:#FFF;
display:block;
}

}









/* 
-------------------------------------------------------------------

topics

------------------------------------------------------------------- */

.topics_wrap{
width:100%;
height:auto;
padding-top:130px;
position:fixed;
z-index:20;
background:#F6F1DF url(../images/common/bg.jpg) no-repeat top center;
-moz-background-size:cover;
background-size:cover;
/* background-attachment:fixed; */
-webkit-text-size-adjust:100%;
box-shadow: 0px 0px 20px #333;　/* Firefox用 */  
-moz-box-shadow: 0px 0px 20px #333;　/* Firefox用 */  
-webkit-box-shadow: 0px 0px 20px #333;　/* Safari,Google Chrome用 */

}


.index_ttl{
margin:0 0 50px 0;
padding:0;
text-align:center;
position:relative;
}

ul.btn_sns{
width:820px;
margin:-60px auto 20px auto;
text-align:right;
position:relative;
}

@media screen and (max-width:768px){

ul.btn_sns{
width:auto;
margin:-20px 55px 20px 40px;
text-align:right;
position:static;
}

}

ul.btn_sns li{
margin-left:10px;
display:inline-block;
}



ul.topics_list{
width:820px;
margin:0 auto 100px auto;
padding:0;
overflow:hidden;
}

@media screen and (max-width:667px){

ul.topics_list{
width:auto;
margin:0 25px 25px 25px;
padding:0;
overflow:hidden;
}

}

ul.topics_list li{
width:315px;
height:190px;
margin-right:30px;
margin-bottom:25px;
padding:10px;
border-style: solid;
border-width: 30px;
border-image: url('../images/common/topics_fream_ylw.svg?w=200') 32 stretch;
-moz-border-image: url('../images/common/topics_fream_ylw.svg') 25 repeat;
float:left;
background:#FFF;
display:table;
box-sizing: content-box;
}

ul.topics_list li:nth-child(even){
margin-right:0;
}


@media screen and (max-width:768px){

ul.topics_list li{
width:250px;
height:260px;
margin-right:20px;
margin-left:10px;
margin-bottom:25px;
padding:10px;
border-style: solid;
border-width: 30px;
border-image: url('../images/common/topics_fream_ylw.svg?w=200') 32 stretch;
-moz-border-image: url('../images/common/topics_fream_ylw.svg') 23 repeat;
float:left;
background:#FFF;
display:table;
box-sizing: content-box;
}

ul.topics_list li:nth-child(even){
margin-right:0;
}

}



@media screen and (max-width:667px){

ul.topics_list li{
width:82%;
height:auto;
margin:0 0px 25px 0px;
padding:10px;
border-style: solid;
border-width: 30px;
border-image: url('../images/common/topics_fream_ylw.svg?w=200') 32 stretch;
-moz-border-image: url('../images/common/topics_fream_ylw.svg') 23 repeat;
float:none;
background:#FFF;
display:table;
box-sizing: content-box;
}

ul.topics_list li:nth-child(even){
margin-right:20px;
}

}

@media screen and (max-width:560px){

ul.topics_list li{
width:70%;
}

}


ul.topics_list li.waku_red{
border-image: url('../images/common/topics_fream_red.svg?w=200') 32 stretch;
-moz-border-image: url('../images/common/topics_fream_red.svg?w=200') 25 repeat;
}

@media screen and (max-width:667px){

ul.topics_list li.waku_red{
-moz-border-image: url('../images/common/topics_fream_red.svg?w=200') 25 repeat;
}

}

/* contents */

.topics_list_img{
width:140px;
padding-right:5px;
vertical-align:middle;
display:table-cell;
}

@media all and (-ms-high-contrast:none){
/* ie10以上hack */

.topics_list_img img{
width:140px;
padding-right:5px;
vertical-align:middle;
display:table-cell;
}

}



dl.topics_list_inner{
line-height:1.5;
vertical-align:top;
display:table-cell;
}

@media screen and (max-width:560px){

.topics_list_img{
width:100%;
padding-right:5px;
vertical-align:middle;
text-align:center;
display:block;
}

dl.topics_list_inner{
line-height:1.5;
vertical-align:top;
display:block;
}

}

dl.topics_list_inner dt{
margin-bottom:10px;
font-weight:bold;
}

dl.topics_list_inner dd{
font-size:80%;
}


.topics_inner{
width:auto;
padding:10px;
display:block;
}



/* 
-------------------------------------------------------------------

brands

------------------------------------------------------------------- */

.brands_wrap{
width:100%;
height:auto;
padding-top:130px;
padding-bottom:50px;
position:fixed;
z-index:19;
background:#F6F1DF url(../images/common/bg.jpg) no-repeat top center;
-moz-background-size:cover;
background-size:cover;
/* background-attachment:fixed; */
-webkit-text-size-adjust:100%;
box-shadow: 0px 0px 20px #333;　/* Firefox用 */  
-moz-box-shadow: 0px 0px 20px #333;　/* Firefox用 */  
-webkit-box-shadow: 0px 0px 20px #333;　/* Safari,Google Chrome用 */
}




ul.brand_list{
width:820px;
margin:0 auto;
padding:0;
overflow:hidden;
}

@media screen and (max-width:768px){

ul.brand_list{
width:auto;
margin:0 25px 25px 25px;
padding:0;
overflow:hidden;
}

ul.brand_list br{
display:none;
}


}

ul.brand_list li{
width:370px;
height:150px;
margin-right:20px;
margin-bottom:20px;
padding-bottom:80px;
border-style: solid;
border-width: 15px;
border-image: url('../images/common/brands_fream.svg?w=200') 15 stretch;
background:#FFF;
float:left;
position:relative;
box-sizing: content-box;
}


@media screen and (max-width:768px){

ul.brand_list li{
width:42%;
height:100px;
margin-right:20px;
margin-bottom:20px;
padding-bottom:80px;
border-style: solid;
border-width: 15px;
border-image: url('../images/common/brands_fream.svg?w=200') 15 stretch;
background:#FFF;
float:left;
position:relative;
box-sizing: content-box;
}

}



/*
@media screen and (max-width:768px){
1コンテンツづつにした場合

ul.brand_list li{
width:92%;
height:140px;
margin-right:auto;
margin-left:auto;
margin-bottom:20px;
padding-bottom:80px;
border-style: solid;
border-width: 15px;
border-image: url('../images/common/brands_fream.svg?w=200') 15 stretch;
background:#FFF;
float:left;
position:relative;
}

}
*/

@media screen and (max-width:667px){
/* smarphone landscpe*/

ul.brand_list li{
width:92%;
/*height:auto;*/
height:75px;
margin-right:auto;
margin-left:auto;
margin-bottom:20px;
padding-bottom:80px;
border-style: solid;
border-width: 15px;
border-image: url('../images/common/brands_fream.svg?w=200') 15 stretch;
background:#FFF;
float:left;
position:relative;
}

}

@media screen and (max-width:560px){
/* smarphone portraite*/

ul.brand_list li{
width:85%;
height:auto;
margin-right:auto;
margin-left:auto;
margin-bottom:20px;
padding-bottom:0px;
border-style: solid;
border-width: 15px;
border-image: url('../images/common/brands_fream.svg?w=200') 15 stretch;
background:#FFF;
float:left;
position:relative;
}

}

ul.brand_list li:nth-child(even){
margin-right:0;
}



/* contents */

dl.brand_list_img{
width:140px;
margin-right:10px;
padding:0;
float:left;
text-align:center;
}

@media screen and (max-width:768px){

dl.brand_list_img{
width:80px;
}

}

@media screen and (max-width:667px){

dl.brand_list_img{
width:80px;
}

}

@media screen and (max-width:560px){
/* smarphone portraite*/

dl.brand_list_img{
width:60px;
margin-right:0px;
}

}


dl.brand_list_img dt{
width:140px;
height:70px;
margin-bottom:10px;
vertical-align:middle;
display:table-cell;
}




@media screen and (max-width:560px){
/* smarphone portraite*/

dl.brand_list_img dt{
width:100%;
height:50px;
margin-bottom:10px;
vertical-align:middle;
display:block;
}

}


.brand_list_item{
width:140px;
position:absolute;
bottom:5px;
left:0;
}

@media screen and (max-width:768px){

.brand_list_item{
width:70px;
}

}

@media screen and (max-width:667px){

.brand_list_item{
width:80px;
text-align:center;
}

.brand_list_item img{
width:auto;
max-height:60px;
}

}



@media screen and (max-width:560px){
/* smarphone portraite*/

.brand_list_item{
width:100%;
position:static;
bottom:5px;
left:0;
}

}


.brand_content{
width:200px;
margin-top:10px;
float:left;
}


@media screen and (max-width:768px){

.brand_content{
width:60%;
margin-top:10px;
float:right;
}

}

@media screen and (max-width:667px){

.brand_content{
width:75%;
margin-top:10px;
float:right;
}

}

@media screen and (max-width:560px){
/* smarphone portraite*/

.brand_content{
width:70%;
margin-top:10px;
float:right;
}

.bctxt{
display:none;
}

}


dl.brand_check{
margin-bottom:15px;
padding-bottom:10px;
text-align:right;
border-bottom:1px #000 solid;
display:block;
}

@media screen and (max-width:768px){

dl.brand_check img{
width:30px;
}

}

@media screen and (max-width:667px){

dl.brand_check img{
width:30px;
}

}

@media screen and (max-width:560px){

dl.brand_check img{
width:30px;
}

}

dl.brand_check dd{
display:inline-block;
}


/* カタログボタン非表示のため一時的に削除

dl.brand_link{
width:65%;
text-align:center;
position:absolute;
bottom:5px;
right:0;
background:#333;
}

dl.brand_link dt{
text-align:center;
display:inline-block;
}

dl.brand_link dd{
padding:0 10px;
display:inline-block;
}
*/

dl.brand_link{
width:60%;
text-align:center;
position:absolute;
bottom:5px;
right:0;
}

dl.brand_link dt{
padding-right:20px;
border-right:1px #000 solid;
display:inline-block;
}

dl.brand_link dd{
padding:0 10px;
display:inline-block;
}

@media screen and (max-width:768px){

dl.brand_link{
text-align:center;
}

dl.brand_link dt{
width:45%;
padding-right:15px;
vertical-align:top;
display:inline-block;
}

dl.brand_link dd{
width:25%;
display:inline-block;
}

}

@media screen and (max-width:667px){

dl.brand_link{
width:75%;
text-align:center;
}

dl.brand_link dt{
width:20%;
padding-right:15px;
vertical-align:top;
display:inline-block;
}

dl.brand_link dd{
width:9%;
display:inline-block;
}

}


@media screen and (max-width:560px){
/* smarphone portraite*/


dl.brand_link{
width:100%;
margin-top:20px;
text-align:center;
position:static;
bottom:0;
right:0;
}

dl.brand_link dt{
width:54%;
display:inline-block;
}

dl.brand_link dd{
width:25%;
padding:0 5px;
display:inline-block;
}

}

/* trex collectionのみ */


dl.brand_link2{
width:60%;
text-align:center;
position:absolute;
bottom:5px;
right:0;
}

dl.brand_link2 dt{
padding-right:20px;
display:inline-block;
}

dl.brand_link2 dd{
padding:0 10px;
display:inline-block;
}

@media screen and (max-width:768px){

dl.brand_link2{
text-align:center;
}

dl.brand_link2 dt{
width:45%;
padding-right:15px;
vertical-align:top;
display:inline-block;
}

dl.brand_link2 dd{
width:25%;
display:inline-block;
}

}

@media screen and (max-width:667px){

dl.brand_link2{
width:75%;
text-align:center;
}

dl.brand_link2 dt{
width:20%;
padding-right:15px;
vertical-align:top;
display:inline-block;
}

dl.brand_link2 dd{
width:9%;
display:inline-block;
}

}


@media screen and (max-width:560px){
/* smarphone portraite*/


dl.brand_link2{
width:100%;
margin-top:20px;
text-align:center;
position:static;
bottom:0;
right:0;
}

dl.brand_link2 dt{
width:54%;
display:inline-block;
}

dl.brand_link2 dd{
width:25%;
padding:0 5px;
display:inline-block;
}

}





/*
dl.brand_link{
width:100%;
margin-top:20px;
text-align:center;
position:static;
bottom:0;
right:0;
}

dl.brand_link dt{
display:inline-block;
}

dl.brand_link dd{
padding:0 5px;
display:inline-block;
}
*/

/* カタログボタン非表示のため一時的に削除
dl.brand_link{
width:100%;
margin-top:20px;
text-align:center;
position:static;
bottom:0;
right:0;
}

dl.brand_link dt{
padding-right:10px;
border-right:1px #000 solid;
display:inline-block;
}

dl.brand_link dd{
padding:0 5px;
display:inline-block;
}
*/
}



/* 
-------------------------------------------------------------------

vision

------------------------------------------------------------------- */




/* company vision shop */

.other_wrap{
width:100%;
height:100%;
margin:50px 0 0 0;
position:fixed;
z-index:7;
background:#EEE;

}




/* 
-------------------------------------------------------------------

スクロール中に非表示

------------------------------------------------------------------- */

.now_scroll{
margin-left:-20px;
position:fixed;
left:50%;
bottom:5px;
z-index:9998;

}



/* 
-------------------------------------------------------------------

footer

------------------------------------------------------------------- */

#footer{
width:100%;
height:30px;
margin:0;
padding:20px 0;
background:url(../images/common/bg_footer.png) repeat-x top center;
}

.ft_para{
width:100%;
position:fixed;
bottom:0;
z-index:9999;
background:#ccc;
}

ul.footer_navi{
margin:0 0 5px 0;
padding:0;
text-align:center;
}

ul.footer_navi li{
margin:0 5px;
display:inline-block;
}


ul.footer_navi li:first-child{
padding-right:15px;
background:url(../images/common/footer_bar.svg) no-repeat right center;
}