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

common


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


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

common

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

.page_wrap{
width:600px;
margin:0 auto 50px auto;
padding-top:130px;
position:relative;
}

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

.page_wrap{
width:auto;
margin:0;
padding-top:130px;
margin:0 30px 50px 30px;
}

}



.page_pr_ttl{
padding-bottom:3px;
font-weight:normal;
font-size:130%;
display:inline;
border-bottom:3px #000 solid;
}



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

.page_pr_ttl{
font-size:100%;
}

}


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

modal

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


.modal_about{
border:1px #666 solid;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}



.tab_wrap{
width:1000px;
margin:0 auto;
padding:50px 0;
position:relative;
}

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

.tab_wrap{
width:auto;
margin:0;
padding:20px;
}

}

.tabs {
margin-left:15px;
text-align:left;
}

.tabs li {
display:inline;
margin:0;
}

.tabs a {
width:160px;
margin-left:5px;
padding:10px 0px;
color:#000;
text-align:center;
border-top:1px #666 solid;
border-left:1px #666 solid;
border-right:1px #666 solid;
border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
border-top-right-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-top-left-right:5px;
background:#FFF;
display:inline-block;
position:relative;
z-index:0;
bottom:-1px;
}

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

.tabs a {
width:100px;
}

}


.tabs a:hover {
color:#000;
background: #FFF;
text-decoration:none;
}

.tabs li.active a{
color:#000;
background: #FFF;
text-decoration:none;
position:relative;
z-index:2;
bottom:-1px;
}



.tab_content {
padding:30px;
text-align:left !important;
border:1px #666 solid;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
position:relative;
z-index:0;
text-align:center;
background:#fff !important;
}

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

.tab_content {
height:350px;
overflow-y:scroll !important;

-webkit-overflow-scrolling:touch;
}

}
*/

.tab_content img{
max-width:100%;
}




/* Close button */

.close_wrap{
position:absolute;
top:80px;
right:0;
z-index:1;
}

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

.close_wrap{
position:absolute;
top:50px;
right:10px;
z-index:1;
}

}




.close_wrap a{
display:block;
}

.modal_close,
.modal_close span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;

}
.modal_close {
	width: 50px;
	height: 44px;
	position: absolute;
	top:20px;
	right:20px;
}



.modal_close span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #000;
	border-radius: 4px;
z-index:9999;
}
.modal_close span:nth-of-type(1) {
	top: 0;
	-webkit-transform: translateY(20px) rotate(-45deg);
	transform: translateY(20px) rotate(-45deg);
}
.modal_close span:nth-of-type(2) {
	bottom: 0;
	-webkit-transform: translateY(-20px) rotate(45deg);
	transform: translateY(-20px) rotate(45deg);
}



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

.modal_close {
	width: 25px;
	height: 17px;
	position: absolute;
	top:15px;
	right:20px;
}


.modal_close span {
	height: 3px;
}


.modal_close span:nth-of-type(1) {
	top: 0;
	-webkit-transform: translateY(7px) rotate(-45deg);
	transform: translateY(7px) rotate(-45deg);
}
.modal_close span:nth-of-type(2) {
	bottom: 0;
	-webkit-transform: translateY(-7px) rotate(45deg);
	transform: translateY(-7px) rotate(45deg);
}

}







/* remodal-theme
--------------------------------*/

.remodal-overlay.with-about-theme {
background-color:rgba(255,255,255,0.8);
}

.remodal.with-about-theme {
padding:0;
background-color:rgba(0,0,0,0);
text-align:left;
}





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

topics archive

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

.topics_wrapper{
width:820px;
margin:0 auto 50px auto;
padding-top:130px;
overflow:hidden;
}


.topics_main_wrap{
width:560px;
float:left;
}


.topics_main{
width:510px;
padding-right:50px;
background:url(../images/page/img_topics_ahv_line.svg) repeat-y right top;
}

.topics_side{
width:220px;
margin:0;
padding-left:40px;
float:left;
}

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

.topics_wrapper{
width:auto;
margin:0 25px 50px 25px;
padding-top:100px;
overflow:hidden;
}

.topics_main_wrap{
width:100%;
float:none;
}

.topics_main{
width:100%;
margin:0;
padding-right:0;
background:none;

}

.topics_side{
width:100%;
margin:0;
padding-left:0px;
float:none;
}


}




/* side
----------------------------------------------*/

.searchbox input[type=text]{
width:190px;
height:37px;
margin:0 0 50px 0;
padding-left:40px;
font-size:130%;
color:#000;
border:0;
background:url(../images/page/img_searchbox_bg.svg) no-repeat left top;
font-size:16px;
}


ul.date_achv{
margin:0 0 20px 0;
padding:0 0 15px 0;
border-bottom:1px #000 solid;
}

ul.date_achv li{
line-height:1.8;
margin:0;
padding:0;
}




/* single archive
----------------------------------------------*/

.post_wrap{
line-height:1.7;
margin:0 0 30px 0;
padding:0 0 30px 0;
background:url(../images/page/img_topics_ahv_boder.svg) no-repeat center bottom;
}

.post_wrap:last-child{
background:none;
}

.post_date{
margin:0 0 10px 0;
padding:0;
font-weight:normal;
font-size:100%;
}

ul.post{
width:100%;
margin:0;
padding:0;
display:table;
}

ul.post li{
vertical-align:top;
display:table-cell;
}

ul.post li:first-child{
padding-right:10px;
}

ul.post li.thumb{
width:250px;
}


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

ul.post{
display:block;
}

ul.post li{
display:block;
}

ul.post li:first-child{
padding-right:0px;
}

ul.post li.thumb{
width:auto;
text-align:center;
}

ul.post p{
margin-bottom:15px;
}

}


/* single
----------------------------------------------*/

.sgl_ttl{
line-height:1.7;
margin-bottom:15px;
font-size:140%;
}

.sgl_txt{
line-height:1.7;

}




/* search archive
----------------------------------------------*/

.result_ttl{
margin:0 0 25px 0;
padding:20px 0 20px 30px;
background:url(../images/page/img_search_ico.svg) no-repeat left center,
url(../images/page/img_topics_ahv_boder.svg) no-repeat left bottom;
}


ul.post li.thumb_re{
width:120px;
}


.more{margin-top:15px;}

.more:after{
content:"";
margin:0;
padding:15px 30px 15px 0;
background:url(../images/page/img_topics_page_next.svg) no-repeat right center;
}

.more:hover:after{
opacity:0.5;
cursor:pointer;
}












/* PagiNavi
----------------------------------------------*/

.wp-pagenavi { 
width:560px;
margin:30px 0;
padding:0;
text-align:center;
}

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


.wp-pagenavi { 
width:100%;
margin:30px 0;
padding:0;
text-align:center;
}
}

.wp-pagenavi a{
margin:0 6px;
padding:0;
color:#A8A9AA;
font-weight:bold;
text-decoration:none;
vertical-align:middle;
display:inline-block;
}


.wp-pagenavi a,
.pages,
.current {
margin:0 6px;
padding:0;
font-weight:bold;
color:#A8A9AA;
vertical-align:middle;
display:inline-block;
}

.wp-pagenavi a:hover,
.current{
margin:0 6px;
padding:0;
color:#000;
text-decoration:none;
}


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

company

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


.company_wrap{
width:100%;
height:200%;
margin:0;
padding-top:120px;
position:fixed;
z-index:2;
}

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

.company_wrap{
width:auto;
margin:0;
padding-top:120px;
margin:0 30px;
position:fixed;
z-index:2;
}

}


.p_vision{
line-height:1.8;
text-align:center;
}

.p_vision_web{
line-height:1.8;
text-align:center;
}


.p_vision_mobile{display:none;}

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

.p_vision_web{display:none;}

.p_vision_mobile{
line-height:1.8;
text-align:center;
display:block;
}

}

.p_draw{
width:100%;
text-align:center;
position:fixed;
z-index:0;
}

.bg_star01{
width:100%;
top:0;
left:10%;
position:fixed;
z-index:1;
}


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

.bg_star01{
width:100%;
height:100%;
top:0;
left:5%;
position:fixed;
background:url(../images/common/bg_star_01_sp.png) repeat-x center top;
z-index:1;
}

}


.modal_pr_ttl{
padding-bottom:3px;
font-weight:bold;
font-size:100%;
display:inline;
border-bottom:3px #000 solid;
}



.bg_star02{
width:100%;
top:0;
left:10%;
position:fixed;
z-index:1;
}

.bg_cloud01{
width:100%;
position:fixed;
z-index:1;
}

.bg_cloud01 img{
width:100%;
}








/* 会社概要
--------------------------------*/

.company_ttl1{
text-align:center;
margin-bottom:25px;
}

.company_ttl2{
text-align:center;
margin-bottom:50px;
}


.company_pr_bg{
padding-bottom:130px;
background:#fff url(../images/page/img_company_trex.jpg) no-repeat right bottom !important;
}


.company_pr{
padding:0;
text-align:center;
}

.company_table{
width:370px;
margin:0 auto;
padding:0;
}

.company_td{
width:90px;
margin:0;
padding:10px 0;
}


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

.company_table{
width:100%;
margin:0;
padding:0;
}

.company_td{
width:auto;
margin:0;
padding:15px 0;
font-weight:bold;
display:block;
}

.company_table td{
width:auto;
display:block;
}


}


/* 社会貢献活動
--------------------------------*/

.cts_txt{
line-height:1.5;
margin-bottom:50px;
text-align:center;
}


ul.cts{
margin:0;
padding:0;
text-align:center;
}

ul.cts li{
width:300px;
margin:0 5px;
padding:0;
vertical-align:top;
display:inline-block;
}

ul.cts li img{
width:100%;
}



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

ul.cts li{
width:auto;
margin:10px 15px;
padding:0;
vertical-align:top;
display:inline-block;
}
}


ul.cts li dl{
line-height:1.5;
}


ul.cts li dl dt{
margin-bottom:10px;
font-weight:bold;
}

ul.cts li dl dd{
font-size:80%;
}

.cts_mb10{
margin-bottom:10px;
}




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

shop

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

.shop_wrap{
width:100%;
position:fixed;
z-index:20;

}

.shop_wrap_in{
width:600px;
margin:0 auto 50px auto;
padding-top:130px;
}

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

.shop_wrap_in{
width:auto;
margin:0;
padding-top:130px;
margin:0 30px 50px 30px;
}

}




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

shop

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

ul.shop_list{
margin:100px 0;
padding:0;
text-align:center;
}

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

ul.shop_list{
margin:50px 0;
padding:0;
text-align:center;
}

}

ul.shop_list li{
line-height:1.5;
margin:0 20px;
text-align:left;
vertical-align:top;
display:inline-block;
}



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

contact

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


dl.contact{
line-height:1.5;
margin:0 0 30px 0;
padding:0;
}

dl.contact dt{
margin:0 0 10px 0;
padding:0;
}

dl.contact dd{
margin:0 0 5px 0;
color:#999;
}

.check_box{
width:96%;
line-height:2;
border:1px #939394 solid;
padding:2% 3%;
color:#000 !important;
background:#FFF;
}


dl.contact dd select{
width:100%;
height:35px;
line-height:30px;
margin:0;
padding:0 10px;
border:1px #CCC solid;
background:#BBBCBC;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background:#BBBCBC url(../images/page/img_select_arw.png) no-repeat 99%;
cursor:pointer;
font-size:16px;
}


dl.contact dd select::-ms-expand {
display: none;/*IE10以降 矢印ボタン非表示にする*/
}


dl.contact dd select:focus{
outline:none;
}

dl.contact dd option{
background:#FFF;
}


/*ボタン*/

ul.btn_contact{
margin:0 0 50px 0;
padding:0;
text-align:center;
}

ul.btn_contact li{
margin-right:15px;
display:inline-block;
}

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

ul.btn_contact li{
width:100%;
margin-right:0;
margin-bottom:15px;
text-align:center;
float:none;
}
}

ul.btn_contact li:last-child{
margin-right:0;
}

ul.btn_contact li input[type=submit]{
width:290px;
height:40px;
color:#FFF;
font-size:130%;
font-weight:bold;
border:none;
cursor:pointer;
text-align:center;
-webkit-appearance: none;
background:url(../images/page/btn_contact_bg.svg) no-repeat 0 0;
}


.send input[type=submit]{
width:290px;
height:40px;
margin:0px auto;
color:#FFF;
font-size:130%;
font-weight:bold;
text-align:center;
border:none;
cursor:pointer;
-webkit-appearance: none;
background:url(../images/page/btn_contact_bg.svg) no-repeat 0 0;
}


ul.btn_contact li input[type=button]{
width:290px;
height:40px;
font-size:130%;
font-weight:bold;
color:#FFF;
border:none;
cursor:pointer;
-webkit-appearance: none;
background:url(../images/page/btn_contact_bg.svg) no-repeat 0 0;

}


dl.contact dd input[type=text]{
width:100%;
height:35px;
margin:0;
padding:0 5px;
color:#000;
border:1px #939394 solid;
box-sizing: border-box;
font-size:16px;
}

dl.contact dd#zipcode input[type=text]{
width:70px;
height:35px;
margin:0;
padding:0 5px;
color:#000;
border:1px #939394 solid;
box-sizing: border-box;
}

#zip,#zip1{
width:100px;
height:35px;
margin:0;
padding:0 5px;
border:1px #939394 solid !important;
font-size:16px !important;
}




dl.contact dd textarea{
width:100%;
height:170px;
margin:0;
padding:10px;
border:1px #939394 solid;
box-sizing: border-box;
font-size:16px;
}

#ipt_nor textarea:focus{
border:1px #990000 solid;
}


.error{
display:inline;
}

/*　送信完了　*/


.comp_ttl{
margin:0 0 30px 0;
padding:0;
font-size:180%;
text-align:center;
}


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

privacypolicy

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


dl.term{
line-height:1.5;
margin:0 0 30px 0;
padding:0;
}

dl.term dt{
margin:0 0 15px 0;
padding:0;
}

.term_bb{
border-bottom:1px #000 solid;
}

dl.term dt:before{
content:"■";
margin-right:3px;
font-size:23px;
}

dl.term dd{
margin:0 0 20px 0;
padding:0;
}


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

404 not found

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


.not_txt{
line-height:2;
text-align:center;
font-size:120%;
}




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

English

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

.company_en_wrap{
width:100%;
height:200%;
margin:0;
padding-top:120px;
position:fixed;
z-index:2;
}

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

.company_en_wrap{
width:auto;
margin:0;
padding-top:120px;
margin:0;
position:fixed;
z-index:2;
}

}

/* navi underbar */

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

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


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


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




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

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

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



/* profile */

.en_profile{
width:100%;
margin-bottom:80px;
font-size:120%;
}

dl.en_prof{
width:530px;
margin-right:auto;
margin-left:auto;
display:table;
}

dl.en_prof dt{
width:150px;
line-height:1.2;
font-weight:bold;
display:table-cell;
}

dl.en_prof dd{
width:380px;
line-height:1.2;
padding-left:0.7em;
text-indent:-0.7em;
display:table-cell;
}

dl.en_prof dd:before{
content:":";
padding-right:5px;
}

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

.en_profile{
width:auto;
margin-right:30px;
margin-left:30px;
}

dl.en_prof{
width:auto;
display:block;
}

dl.en_prof dt{
width:auto;
margin-bottom:5px;
display:block;
}

dl.en_prof dd{
width:auto;
padding-left:0;
text-indent:-0;

display:block;
}

dl.en_prof dd:before{
content:"";
padding-right:0;
}


}



#gmap{
margin-left:-125px;
position:fixed;
left:50%;
z-index:9999;
}


/* vision */

.en_vision{
width:800px;
margin-right:auto;
margin-left:auto;
font-size:120%;
}


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

.en_vision{
width:auto;
margin-right:30px;
margin-left:30px;
}

}


/* society */

.en_society{
width:800px;
margin-right:auto;
margin-left:auto;
margin-bottom:80px;
font-size:120%;
}

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

.en_society{
width:auto;
margin-right:30px;
margin-left:30px;
}

}


/* brands */

.en_brands{
width:1000px;
margin-right:auto;
margin-left:auto;
margin-bottom:80px;
font-size:120%;
}

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

.en_brands{
width:auto;
margin-right:30px;
margin-left:30px;
}

}

ul.en_grid{
width:auto;
margin:0 auto;
text-align:left;
}

ul.en_grid li{
width:30%;
margin-right:3%;
margin-bottom:80px;
vertical-align:top;
display:inline-block;
}

ul.en_grid li:nth-child(3n){
margin-right:0;
}



ul.en_grid dl{
text-align:center
}

ul.en_grid dl dt{
min-height:110px;
max-height:134px;
line-height:134px;
}

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

ul.en_grid dl dt{
min-height:auto;
max-height:auto;
line-height:0;
}


}

ul.en_grid dl dd{
line-height:1.5;
}


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

ul.en_grid dl dd{
display:none;
}
}