/*
Theme Name: atarashitatami
Theme URI: 
Description: あたらしオリジナルテーマ
Version: 
Author: 
Author URI: 
*/

/*==========================================
File name: base.css
Editors: IT-Probe
Last Editor: IT-Probe
Date: 2012.12.04
========================================== */

/* ▼ BASE SETTING ▼ */

* {
	margin: 0;
	padding: 0;
}


img{
	vertical-align: top;
}


/* ▼ BASE LAYOUT▼ */ 

html{
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	height: 100%;
	margin: 0;
	padding: 0 0 0 0;
	text-align: center;
	background: #FFF url(../images/common/body_upper_bg.jpg) repeat-x top;
	color: #333333;
	font-family: Meiryo, "メイリオ","Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic", "ＭＳ Ｐゴシック",sans-serif;
	font-size: 90%;
}


#screen{
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;/* コンテンツを横断する背景(画像) */
	text-align: left;
}

#container{
	width: 960px;
	margin: 0 auto;

}

#container-footer{
	height: 180px;/* footerの高さを入れる */
	position: relative;
	clear: both;
}

#contents{
	clear: both;
	width: 960px;
	text-align: left;
	padding: 15px 0 15px 0;
}


/* ▼ LINK SETTING ▼ */

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

a,a:link {
	text-decoration: underline;
}

a:visited {
}

a:hover {
	text-decoration: none;
}

a.current,
a:active,
a:focus {
}

a:hover img{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}



/* ▼ HEADER ▼ */

#header {
	width: 960px;
	height: 88px;
	position: relative;

}

#header_link{
	position: absolute;
	top: 10px;
	right: 10px;
}

#header_link ul{
	width: 250px;
	display:flex;
	justify-content: flex-end;
	align-items: center;
	position: relative;
}

#header_link ul li {
	font-size: 10px;
	background: url(../images/common/li.gif) no-repeat 0 50%;
	padding-left: 10px;
	margin: 0 0 0 10px;
}

#header_link ul li:last-child {
	font-size: 10px;
	background: url(../images/common/li02.gif) no-repeat 0 50%;
	padding-left: 10px;
	margin: 0 0 0 10px;
}

#header_link ul li a{
	color: #333333;
	text-decoration: none;
}
#header_link ul li a:hover{
	color: #333333;
	text-decoration: underline;
}

.red {
	color:#d70035!important;
}



#header p{
	position: absolute;
	top: 3px;
	left: 0;
	font-size: 10px;
}


/* .header_sns{
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header_sns li{
    width: 40%;
}

.header_sns li img{
    width: 100%;
    height: auto;
}

@media screen and (max-width:767px) {
.header_sns{
    top: 12px;
    right: 70px;
    width: 90px;
    }
}

@media screen and (min-width:768px) {
.header_sns{
    top: 5px;
    right: 250px;
    width: 70px;
    }
} */

/* ▼ MAIN IMAGE ▼ */

#keyvisual{
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

.key_text {
	font-size: 15px;
	text-align: left;
	padding:10px 0 0;
	box-sizing: border-box;
}

.mc {
	margin-left: auto;
	margin-right: auto;
	width:calc(100% - 20px);
	margin-left:auto;
	margin-right:auto;
}

/* ▼ GLOBAL NAVIGATION ▼ */

#gnav{
	margin: 0 auto;
	width: 960px;
	height: 44px;
}

#gnav ul{
	position: relative;
	background: url(../images/common/gnav_bg.jpg) no-repeat top left;
	width: 960px;
	height: 44px;
}

#gnav li{
	list-style-type: none;
	display: inline;

}

#gnav li a{
	position: absolute;
	display: block;
	height: 44px;
}

#gnav li a:hover{
	background-color: transparent;

}

#gnav li a:hover img{
	visibility: hidden;
}


#gnav_01{
	left: 0;
}

#gnav_02{
	left: 60px;
}

#gnav_03{
	left: 240px;
}

#gnav_04{
	left: 420px;
}

#gnav_05{
	left: 600px;
}

#gnav_06{
	left: 780px;
}

/* ▼ 07: MAIN CONTENTS ▼ */

.blue {
	font-size: 13px;
	font-weight: bold;
}
.gray {
	color: #666;
}

.s_text {
	font-size: 11px;
}

.text_light {
	text-align: right;
}

.font_small {
	font-size: 11px;
}



#main{
	width: 720px;
	min-height: 300px;
	height: auto !important;
	height: 300px;
	float: right;
	line-height: 1.9;
}
#top_main {
	width: 540px;
	min-height: 300px;
	height: auto !important;
	height: 300px;
	float: right;
	line-height: 1.9;
}
#top_side {
	width: 374px;
	float: left;
	padding: 0 0 0 0;
	font-size: 90%;
}



/* ▼ SIDEBAR ▼ */

#side{
	width: 180px;
	float: left;
	padding: 0 0 0 0;
	font-size: 90%;
}
.top_side_float {
	overflow:hidden;
	margin-bottom: 15px;
}
.top_side_float .top_side_float1 {
	float: left;
	width: 180px;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000;
	padding-top: 10px;
}
.campaign {
	margin-bottom: 10px;
}

.top_side_float1_1 {
	width: 180px;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000;
	padding-top: 10px;
}

.top_side_float .top_side_float2 {
	float: right;
	width: 180px;
	line-height: 1.2em;
}
.top_side_float3  {
	float: right;
	width: 180px;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000;
	padding-top: 10px;
	line-height: 1.2em;
	margin-top: 20px;
}
.top_side_float4 {
	float: right;
	width: 180px;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000;
	padding-top: 10px;
	line-height: 1.2em;
	margin-top: 20px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.top_side_float2 .top_side_float2_contet {
	float: right;
	width: 180px;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000;
	padding-top: 10px;
	line-height: 1.2em;
	margin-bottom: 10px;
}
.top_side_float2con {
	margin-top: 5px;
}


.top_side_baner {
	margin-bottom: 10px;
}


.side_line1 {
	
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000;
}


/* --- SIDE MENU --- */


#snav{
	width: 240px;
	margin: 0 0 20px 0;
	
}


#snav ul{
	width: 240px;
	position: relative;
}

#snav li{
	list-style-type: none;
	height: 40px;
	width: 240px;
	margin: 0 0 5px 0;
}

.ie7 #snav li,
.ie6 #snav li{
	margin: 0 0 3px 0;
}/* --- for IE6, IE7 --- */

#snav li a{
	display: block;
	height: 40px;
	width: 240px;
}

#snav a:hover img{
	visibility: hidden;
}


#snav_01{
	background: url(../images/common/snav_o01.jpg) no-repeat top left;
}

#snav_02{
	background: url(../images/common/snav_o02.jpg) no-repeat top left;
}

#snav_03{
	background: url(../images/common/snav_o03.jpg) no-repeat top left;
}

#snav_04{
	background: url(../images/common/snav_o04.jpg) no-repeat top left;
}

#snav_05{
	background: url(../images/common/snav_o05.jpg) no-repeat top left;
}


/* -- aside menu -- */

#side #aside ul{
	margin: 0 0 30px 0;
}

#side #aside ul li{
	background: url(../images/common/li.gif) no-repeat 20px 50%;
	width: 210px;
	padding: 0 0 0 30px;
	margin: 0 0 5px 0;
}
.side_baner {
	margin-bottom: 5px;
}

.side_baner02 a {
	margin-bottom: 5px;
	display:flex;
	justify-content: center;
	align-items: center;
	background: red;
	color:#fff;
	text-decoration: none;
	font-weight: 700;
	padding:10px;
	font-size:.75rem;
	white-space: nowrap;
	transition: all .2s;
}

.side_baner02 a:hover {
	opacity: .7;
	transition: all .2s;
}

/* ▼ FOOTER ▼ */

#footer {
	width: 100%;
	clear: both;
	height: 159px;
	background: url(../images/common/footer_bg.jpg) bottom repeat-x;
	color: #888;
	font-size: 85%;
	position: absolute;
	bottom: 0;
}


#footer_body{
	width: 960px;
	height: 159px;
	margin: 0 auto;
	text-align: left;
	position: relative;
}


#footer_body img{
	vertical-align: bottom;
}

#copyright{
	position: absolute;
	top: 120px;
	clip: rect(auto,auto,auto,auto);
	right: 0px;
	color: #000;
}

#copyright p{
	margin: 0;
	padding: 0;
}

#footer_body #office{
	position: absolute;
	top: 43px;
	right: 0;
	margin: 0;
	padding: 0;
	width: 193px;
	color: #000;
	font-size: 80%;
}

#footer_body #office p{
	margin: 0;
	padding: 0;
}

#footer_body #author_link{
	position: absolute;
	bottom: 0;
	right: 0;
}

#footer_link{
	width: 700px;
	position: absolute;
	top: 15px;
	left: 0;
	font-size: 95%;
}


#footer_link .ul_01{
	float: left;
	margin: 0 10px 0 0;
	width: 100px;
}

#footer_link .ul_02{
	float: left;
	width: 100px;
	margin-left: 20px;
}
#footer_link .ul_03 {
	float: left;
	width: 150px;
	margin-left: 20px;
}
#footer_link .ul_04 {
	float: left;
	width: 190px;
	margin-left: 20px;
}

#footer_link li{
	background: url(../images/common/li.gif) no-repeat 0px center;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 7px;
	margin-left: 0;
	padding-left: 10px;
}

/*.footer_sns{
    margin: 0 auto 80px;
    width: 40%;
    max-width: 150px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.footer_sns li{
    width: 48%;
    margin-right: 15%;
}

.footer_sns li:nth-child(2){
    margin-right: 0;
}

.footer_sns li img{
    width: 100%;
    height: auto;
}*/


/*▼ CLEAR FIX ▼ */

.clear{
	clear: both;
}


/* modern browsers */

.clearfix:after,
div#container:after,
div#header:after,
div#footer:after,
div#contents:after{
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0.1em;
	line-height: 0;
}

/* IE7 */

.clearfix,
div#container,
div#header,
div#footer,
div#contents{
	display: inline-block;
}

/* legacy IE */

* html .clearfix,
* html div#container,
* html div#footer,
* html div#contents{
	height: 1%;
}

.clearfix,
div#container,
div#header,
div#footer,
div#contents{
	display: block;
}

/* ▼ 10: COMMON STYLE ▼ */

section,
.section{
	clear: both;
	margin: 0 0 15px 0;
	overflow: hidden;
	line-height: 1.5em;
}

section p,
.section p{
	margin: 0 0 10px 0;
}

.section_body{
	overflow: hidden;
}
/* --- ぱんくずナビ --- */

#breadcrumbs{
	text-align: left;
	margin: 0 0 10px 0;
	font-size: 90%;
}


/* --- このページのトップへ戻る --- */

.to_pagetop{
	position: relative;
	height: 20px;
	margin: 0 0 5px 0;
}

.to_pagetop a{
	position: absolute;
	display: block;
	width: 150px;
	height: 20px;
	padding: 0 0 0 20px;
	background: url(../images/common/to_pagetop.gif) no-repeat 0 50%;
	right: 0;
	font-size: 80%;
}


/* --- Adobe Readerの取得 --- */

#get_adobe_reader{
	padding: 7px;
	border: solid 1px #CCCCCC;
}

#get_adobe_reader img{
	float: right;
}

#get_adobe_reader p{
	float: left;
	width: 400px;
	margin: 0 0 0 0;
	font-size: 11px;
}


/*    product変更    */
ul.syoji_list {
	width:720px;
	margin-bottom:10px;
}

ul.syoji_list li {
	float:left;
}

ul.syoji_list li:nth-child(2) {
	margin:0 15px;
}

ul.mesh_list {
	width:720px;
}

ul.mesh_list li {
	float:left;
	width:150px;
	margin-right:40px;
	text-align:center;
}

ul.mesh_list li img {
	margin-bottom:10px;
}

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


/*    garaheri変更    */
.garaheri_photo_list {
	width:720px;
	margin:0 auto 30px;
}
	
.garaheri_photo_list li {
	float:left;
}

.garaheri_photo_list li + li {
	float:right;
}


/*    sayaka    */
	
.sayaka_left_list {
	float:left;
	width:360px;
}

.sayaka_right_list {
	float:right;
	width:360px;
}

.sayaka_contents_style .sayaka_contents1 {
	float:left;
	width:186px;
}

.sayaka_contents_style .sayaka_contents2 {
	float:right;
	width:186px;
}



/*     shikioriori    */
ul.nonoka_photo li {
	float:left;
}

ul.nonoka_photo li + li {
	float:right;
}

ul.tatami_huti_list {
	width:720px;
}

ul.tatami_huti_list li {
	float:left;
	margin:0 12px 15px 0;
}

ul.tatami_huti_list li:nth-child(6),
ul.tatami_huti_list li:nth-child(12) {
	margin-right:0;
}



/*    recruit    */
	
.recruit_main_left {
	float:left;
	width:300px;
	padding-right:20px;
	padding-top:50px;
}
	
.recruit_main_right {
	float:right;
	width:400px;
}

.showroom_left {
	float:left;
	width:300px;
	padding-top:50px;
	padding:50px 20px 0 0;
}

.showroom_left img {
	margin-bottom:20px;
}

.showroom_right {
	float:left;
	width:400px;
}

/*    work_fusuma    */
.work_fusuma_content ul {
	width:720px;
	background:url(../images/sp/work/fusuma/step_affter.png) no-repeat bottom center;
	padding-bottom:50px;
	margin-bottom:30px;
}

.work_fusuma_content ul li {
	float:left;
	width:230px;
}

.work_fusuma_content ul li:nth-child(2) {
	margin:0 15px;
}

p.step_last_text {
	font-size:30px;
	font-weight:bold;
	text-align:center;
}


/*    work_tatami    */

.work_tatami_step ul {
	margin-bottom:20px;
	background:url(../images/sp/work/tatami/step_affter.png) no-repeat bottom center;
	padding-bottom:50px;
}

.work_tatami_step ul li {
	float:left;
	width:230px;
}

.work_tatami_step ul li:nth-child(2) {
	margin:0 15px;
}


/*   kojin   */
.kojin_left {
	float:left;
	width:480px;
}

.kojin_right {
	float:right;
	width:240px;
}

.kojin_right img {
	margin-bottom:10px;
}

.kojin_left dl dt {
	font-size:20px;
	width:120px;
	float:left;
}

.kojin_left dl dd {
	font-size:14px;
	width:340px;
	float:left;
	margin:0;
}

.kojin_left dl {
	margin-bottom:20px;
	border-bottom:1px dotted #9D9D9D;
	padding-bottom:10px;
	width:460px;
}

.kojin_left dl dt span {
	font-size:14px;
}

.kojin_left dl dt span span {
	font-size:20px;
	font-weight:bold;
}

/*    qa    */
.qa_main {
	width:720px;
	margin-bottom:72px;
}

.qa_main .qa_main_left {
	width:300px;
	padding-right:20px;
	float:left;
}

.qa_main .qa_main_left img {
	margin:60px 0 20px;
}

.qa_main_right {
	float:right;
	width:400px;
}

.deco_none {
	text-decoration: none!important;
}

/* --ページのトップへ戻る--------------------- */

#pageTop{
	filter:alpha(opacity=70);
	color: #FFF;
	-moz-opacity: 0.7;
	opacity: 0.7;
	text-decoration: none;
    padding: 10px 15px;
    position: fixed;
    bottom: 5px;
    right: 5px;
	background: #34A48B;
}

#pageTop:hover{
    background:  #44CE98;
	transition: background-color 0.5s;/*ふわっと変化*/
}

/* ------------------------------------------------
Contact Form7
------------------------------------------------ */
.half_left,
.half_right{
	width: 50%;
	overflow: hidden;
}

.half_left{
	float: left;
}

.half_right{
	float: right;
}

.half_right input[type="text"]{
	width: 15%;
	margin-bottom: 6px;
}


@media print{
	
#footer{
	display: none;
}

}


/* WP jQuery Lightbox */

#imageData #imageDetails #controls{
    display: none!important;
}


.topix_table {
	margin: 15px 0;
}

.topix_table th, 
.topix_table td {
	border: solid 1px #ccc;
	padding:6px;
}


.title_topix {
	font-size: 1.625rem;
	font-weight: bold;
	margin:20px 0;
}

.title_topix01 {
	font-size: 1rem;
	padding:6px 10px 3px;
	margin-bottom: 15px;
	background: #8dc21f;
	color:#fff;
}

.two_block {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-flow: column;
	margin-bottom: 20px;
}

.two_block span {
	display: inline-block;
	width:30px;
}

.two_block > div {
	width:100%;
	margin-bottom: 20px;
}

@media screen and (min-width:768px) {
.two_block {
	flex-flow: row;
}
	
.two_block > div {
	width:45%;
}
}

.img80 {
	width:100%;
	height:auto;
}

@media screen and (min-width:768px) {
	.img80 {
		width:80%;
		height:auto;
	}
}

.img100 {
	width:100%;
	height:auto;
}

@media screen and (min-width:768px) {
.pc_mb40 {
	margin-bottom: 40px!important;
}
	
}

.fsize12a {
	font-size: .75rem!important;
	padding-left:.875rem;
	line-height: 1.4!important;
	position: relative;
}

.fsize12a:before {
		content:"※";
		color:#C03;
		position: absolute;
		left: 0px;
	}

.fsize18 {font-size: 18px!important;}

.bold {font-weight: bold;}
.green{color:#2EA786!important;}
.red{color: #C30!important;}

.mt0 {margin-top: 0!important;}
.mt10 {margin-top: 10px!important;}
.mt20 {margin-top: 20px!important;}
.mt30 {margin-top: 30px!important;}
.mt40 {margin-top: 40px!important;}

.mb0 {margin-bottom: 0!important;}
.mb10 {margin-bottom: 10px!important;}
.mb20 {margin-bottom: 20px!important;}
.mb30 {margin-bottom: 30px!important;}
.mb40 {margin-bottom: 40px!important;}
.mt30 {margin-top: 30px!important;}

.pc_only {
	display: none;
}

@media screen and (min-width:768px) {
.pc_only {
	display: block;
}
}

.sp_only {
	display: block;
}
@media screen and (min-width:768px) {
.sp_only {
	display: none;
}
	
}

.company_link a {
	display: block;
	text-decoration: underline;
}

.company_link a:hover {
	text-decoration: none;
}


.textl{text-align: left!important;}
.textc{text-align: center!important;}
.textr{text-align: right!important;}

/* reCAPTCHA v3　表示位置 */
.grecaptcha-badge{
    margin-bottom: 50px;
}



.attn_info {
    border: double 3px #009A20;
    padding: 20px 24px;
    line-height: 1.7;
    box-sizing: border-box;
}

.attn_info p {
    margin-bottom: 0;
    text-align: left;
    font-size: .875rem;
}

@media screen and (min-width:768px) {
    .attn_info p {
    text-align: center;
         font-size: 16px;
}
}

@media screen and (min-width:768px) {
.sns_ico{
    display: none;
    }
}

@media screen and (max-width:767px) {
#sp_footer ul{
   overflow: hidden;   
}
    
.sns_ico{
    clear: both;
    padding: 20px 15px 180px 15px;
    }
.sns_ico ul{
    display: flex;
    justify-content: space-between;
    max-width: 180px;
    align-items: center;
    margin: 0 auto;
    }
.sns_ico li{
     width: 32%;
     max-width: 40px;   
  }

.sns_ico li img{
    width: 100%;
    height: auto;
  }
}