@charset "UTF-8";

/******************/
/******************/
/* style-sp.css ***/

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

* {
	-webkit-tap-highlight-color:transparent rgba(0,0,0,0);
	-moz-tap-highlight-color:transparent rgba(0,0,0,0);
	-ms-tap-highlight-color:transparent rgba(0,0,0,0);
	-o-tap-highlight-color:transparent rgba(0,0,0,0);
	-webkit-tap-highlight-color:transparent rgba(0,0,0,0);
}

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

body {font-family:Helvetica,'YuGothic', 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo', 'メイリオ', 'MS PGothic', 'ＭＳ Ｐゴシック', Arial, sans-serif;
}

.w740,
.inner {
float:none;
clear:both;
display:block;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
margin:0;
padding:0 20px;
min-width:320px;
width:100%;
max-width:640px;
}

.table {display:block;}
.table .cell {display:block;}

.pc {display:none;}
.tb {display:none;}
.sp {display:block;}

.br-sp{display: block;}
.br-pc{display: none;}

.page img{}

/******************/
#access,
.access_clone,
#page-access,
.page-access_clone{display: none;}

#header{}

#content{width: 100%; margin: 0 0 0 0;}
.one-column #content{width:100%;}

.hentry{margin: 0 0 0 0;}

#primary{
	float: none;
	width: 100%;
}

h3.widget-title{font-size: 16px; font-size: 1.6rem;}
#content h4.entry-title{font-size: 16px; font-size: 1.6rem; padding: 8px;}
.blog #content, .blog #primary, .single #content, .single #primary, .archive #container, .archive #primary{margin-top: 40px; margin-bottom: 30px;}
.post {margin-bottom: 20px;}

/******************/
/* menu *********/
#t-navi {
	display: block;
	text-align: left;
}
.navi-toggle {
	background: 0;
	top: 1px;
	right: 0;
	position: fixed;
	z-index: 999;
	display: block;
	padding: 0;
	width: 60px;
	height: 60px;
	cursor: pointer;
	border: 0;
	color: transparent;
	background-color: transparent;
	padding: 6px 12px 12px 12px;
	outline: 0;
}
.navi-toggle:hover {
	cursor: pointer;
}
.navi-toggle span {
	position: relative;
	display: block;
	width: 100%;
	height: 4px;
	margin-top: 10px;
	border-radius: 1px;
	background-color: #b81c22;
	-webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
	-o-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
	transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.navi-toggle span:before,
.navi-toggle span:after {
	position: absolute;
	content: "";
	top: -10px;
	left: 0;
	width: 100%;
	height: 4px;
	border-radius: 1px;
	background-color: #b81c22;
	-webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
	-o-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
	transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.navi-toggle span:after {
	top: 10px;
}
.navi-toggle.on span {
	background-color: transparent;
}
.navi-toggle.on span:before {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 0;
}
.navi-toggle.on span:after {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 0;
}
#t-navi .t-menu {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(66,36,11,0.9);
	z-index: 998;
}
#t-navi ul {
	margin-top: 70px;
}
#t-navi ul:after {
	content: "";
	display: block;
	clear: both;
	overflow: hidden;
}
#t-navi ul li {
	position: relative;
	width: 100%;
	text-align: center;
	line-height: 60px;
	font-size: 16px;
	font-size: 1.6rem;
}
#t-navi ul li:nth-child(odd) {
	border-right: 1px dotted #1d2087;
}
#t-navi ul li a {
	color: #fff;
	font-weight: bold;
	display: block;
}


#page-header .nav_menu_v{
	background: #333;
	width: 100%;
	overflow: hidden;
}

/******************/
/* header *********/
#site-description{
	display: none;
}

#site-title{
	top: 0;
	height: 50px;
	padding: 20px 0 10px 0;
}

#site-title a{
	margin: 0 0 0 20px;
}

.video{
	margin-top: 70px;
	}

.home .press h3{
	width: 100%;
	float: none;
	text-align: center;
	padding-top: 3px;
}

.press{
	height: auto;
	overflow: hidden;
}

.press ul{
	width: 100%;
	padding: 15px 20px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}

.press li{
	line-height: 1.8;
}

.press ul li span{
	display: block;
	padding-bottom: 3px;
}

.tonews {
    float: none;
    background-color: #333;
    display: block;
    clear: both;
    text-align: center;
}

#page-header #site-title-p {
	margin-top: 20px;
	margin-bottom: 0px;
}

#content h3.entry-title,
h3.entry-title{
	font-size: 24px;
	font-size: 2.4rem;
	background:url(images/bg_tree.png);
	background-size: 100px 100px; 
	width: 100%;
	height: 80px;
	color: #fff;
	line-height: 80px;
}

/******************/
/* footer *********/
#contact{
	background: url(images/bg_tree.png);
	background-size: 50px 50px;
	width: 100%;
	height: auto;
	display:block;
	clear: both;
	text-align: center;
}

#contact a{
	padding: 30px 0 35px 0;
}

#contact p{
	font-size: 15px;
	font-size: 1.5rem;
	margin-bottom: 15px;
}

#contact h4{
	font-size: 21px;
	font-size: 2.1rem;
	width: 240px;
}

#site-generator{
	padding: 5px 0 0 0;
	text-align: center;
	height: 60px;
	background:url(images/sp/bg_footer_sp.png) 0 0 no-repeat;
	width:100%;
	display:block;
}

#site-generator ul{
	float: none;
}

#site-generator ul li{
	margin: 5px 5px 0 5px;
	font-size: 13px;
	font-size: 1.3rem;
}

.f_link ul{float: none;}

#colophon p{
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.8;
	margin-bottom: 30px;
}

#colophon p.add{
	margin-bottom: 0;
}

.copyright{
	float: none;
	display: block;
	font-size: 10px;
	font-size: 1.0rem;
}

ul#menu-f_nav{
	overflow: hidden;
	margin-bottom: 25px;
}

ul#menu-f_nav li{
	width: 42%;
	margin: 0 4%;
	display: inherit;
	float: left;
	margin-bottom: 10px;
}

ul#menu-f_nav li a{
	border-left: none;
	font-size: 14px;
	font-size: 1.4rem;
	background: url(images/sp/li_bg.png)0 0 no-repeat;
	background-size: cover;
	padding: 7px 0;
}

ul#menu-f_nav li:last-child a{
	border-right:none;
}

ul#menu-f_nav li#menu-item-42{display: none;}

/******************
Front-page/
/******************/
#slider-sp {
	position: relative;
	height:180px;
	width:100%;
	overflow: hidden;
	margin-bottom: 30px;
}
.slide-wrap {
	width:3500px;
	height:180px;
	position:absolute;
	left:50%;
	margin-left:-1750px;
}
.bx-wrapper {width:100%; max-width:100% !important;}
#slider-sp li {
	width: 500px;
	float: left;
	height: 180px;
	margin-top: 0px;
	padding: 0;
	z-index:100;
}
/* コントローラー */
.bx-controls {
	position:absolute;
	width:500px;
	top:0;
	left:50%;
	margin-left:0;
}
.bx-controls-direction a {
position:absolute;
width:100%;
height:180px;
top:0;
display:block;
color:transparent;
background: rgba(255,255,255,0.5);
}

a.bx-prev,
a.bx-next {
	display: none;
}

/******************/
/* front-page *********/
#philosophy{
	background: url(images/sp/bg_philosophy_sp.png) center center no-repeat;
    background-size: 800px 1300px;
    height: 1300px;
    display: block;
    clear: both;
}

.page .t-concept img{
	width: 180px;
	height: auto;
	margin-bottom: 20px;
}

#content .t-concept h3{
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 1.4;
	margin-bottom: 20px;
}

#content .t-concept p{
	font-size: 17px;
	font-size: 1.7rem;
	line-height: 1.8;
}

.tcdl{
	margin-left: 0;
	margin-top: 0;
}

.t-concept dl{
	float: none;
	margin-right: 0;
	margin: 0 auto;
	padding-top: 50px;
	box-sizing: border-box;
}

#content .t-concept dl.tcdl_1{
	padding-top: 80px;
}

.t-concept dl.tcdl_3 {
    margin-right: 0;
    margin-left: 0;
    margin: 0 auto;
}

dl.tcdl_1 dt,
dl.tcdl_2 dt,
dl.tcdl_3 dt{
	margin-top: 0;
	margin-bottom: 20px;	
}

#works {
    background: url(images/bg_tree.png);
    background-size: 100px 100px;
    width: 100%;
    display: block;
    clear: both;
    color: #fff;
    padding: 40px 0;
}

.home h3.t-title,
.home h3.t-title-2{
	font-size: 32px;
	font-size: 3.2rem;
}

#content h3{
	font-size: 38px;
	font-size: 3.8rem;
}

#content h3.t-title{
	margin-bottom: 5px;
}

span.f-title,
span.b-title{
	margin-bottom: 30px;
	font-size: 14px;
	font-size: 1.4rem;
}

.home #content h3.t-title-2{
	margin-bottom: 5px;
}

.thumbnail_lists{
	width: 100%;
	margin-bottom: 15px;
}

.thumbnail_lists ul{
	width: 100%;
	margin-bottom: 0;
	padding: 0 20px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}

.thumbnail_lists li,
.thumbnail_lists li:nth-of-type(3n){
    margin-right: 0;
    width: 48%;
    position: relative;
    margin-right: 4%;
    margin-bottom: 15px;
    float: left;
    height: 100px;
    display: block;
    overflow: hidden;
    background-color: #fff;
}

.thumbnail_lists li:nth-of-type(2n){
	margin-right: 0;
}

.inside {
    background: rgba(0, 0, 0, 0.9) transparent repeat scroll 0 0;
    height: 100%;
    left: 0;
    opacity: 1;
    position: absolute;
    top: -100%;
    transition: all 0.5s ease 0s;
    width: 100%;
    z-index: 2;
    display: table;
    text-align: center;
}

#content .inside p {
    color: #fff;
    font-family: Helvetica,'YuGothic';
    display: table-cell;
    vertical-align: middle;
    line-height: 1.3;
    padding: 0 1em;
}

#works img {
    /* width: 100%; */
    /* line-height: 0; */
    min-width: 100%;
    min-height: 100%;
    height: auto;
    position: absolute;
    top: -100%;
    bottom: -100%;
    right: -100%;
    left: -100%;
    margin: auto;
    max-width: 200%;
}

.w_more, .more{
	width: 50%;
}

#what{
	padding: 40px 0;
}

.wecan{
	margin-bottom: 15px;
}

.wecan_1,
.wecan_2,
.wecan_3,
.wecan_4,
.wecan_5{
	width: 100%;
	height: auto;
	margin-right: 0;
	padding: 10px 0;
	margin-bottom: 15px;
	background: url(images/bg_tree.png);
    background-size: 50px 50px;
    border-radius: 10px;
}

.we_p{
	font-size: 15px;
	font-size: 1.5rem;
	padding: 5px 0;
}

#member{
	background:url(images/bg_pt1.png);
	background-size: 100px 100px;
	width: 100%;
	display: block;
	clear: both;
	color: #fff;
	padding: 40px 0;
}

#member img{width: 100%; height: auto;}

#member h3,
#company h3{
	font-size: 32px;
	font-size: 3.2rem;
}

#greeting{
	background:url(images/bg_tree.png);
	background-size: 100px 100px;
	width: 100%;
	display: block;
	clear: both;
	color:#fff;
	padding: 40px 0 35px 0;
}

#greeting h4{
	font-size: 20px;
	font-size: 2.0rem;
	margin-bottom: 20px;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

#greeting p{
	line-height: 1.6em;
	text-align: justify;
	font-size: 14px;
	font-size: 1.4rem;
}

.t-message{
	float: none;
	width: 100%;
	margin-bottom: 30px;
}

.g-right{
	float: none;
	margin-left: 0;
	text-align: center;
}

.g-right dl{
	overflow: hidden;
}

.g-right dd.g-name{
	font-size: 18px;
	font-weight: bold;
	margin-top: 0;
}

.g-right img{
	width: 70%;
	height: auto;
	margin-bottom: 10px;
}

#company{
	background:url(images/bg_pt1.png);
	background-size: 100px 100px;
	width: 100%;
	display: block;
	clear: both;
	color: #603813;
	padding: 40px 0 25px 0;
}

#company h3{
	margin-bottom: 20px;
}

.home table{
	width: 100%;
	float: none;
	margin: 0 0;
	margin-bottom: 10px;
}

.home table tr td{
	border-top:none;
}

.home table tr th{
	color:#603813;
	font-size: 15px;
	font-weight: normal;
	width: 32%;
}

tr th,tr td{
	padding: 3px 5px;
	font-size: 14px;
	font-size: 1.4rem;
}

#map_canvas{
	width: 100%;
	height: 350px;
}

/******************/
/* page *********/
.toTop{
	margin-top: 40px;
	margin-bottom: 35px;
}

#p-philosophy{
	background: url(images/sp/bg_philosophy_sp2.png) center center no-repeat;
    background-size: 800px 1300px;
    height: 1300px;
    display: block;
    clear: both;
}

.p-concept img{width: 100%; height: auto; margin-top: 0;}

.company{margin-top: 40px;}

.page-id-15 #content h3.p-title{
	font-size: 22px; font-size: 2.2rem;
}

.w-box-1,
.w-box-2,
.w-box-3,
.w-box-4{
	width: 100%;
	margin-right: 0;
	height: auto;
	margin-bottom: 20px;
}

.w-box-1 ul,
.w-box-2 ul,
.w-box-3 ul,
.w-box-4 ul{
	padding-bottom: 20px;
}

.w-1,
.w-2{margin-bottom: 0;}

.company img{width: 100%; height: auto;}

#content h3.m-title{font-size: 18px; font-size: 1.8rem;}

.w-lbox,.w-rbox{
	width: 100%;
	float: none;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    height: auto;
}

#content h4.w-title{font-size: 15px; font-size: 1.5rem;}
.page-id-15 #content dt{font-size: 14px; font-size: 1.4rem;}
.page-id-15 #content dd{font-size: 13px; font-size: 1.3rem;}

.company table{width: 100%; float: none; margin-bottom: 20px;}
.company img{width: 80%; height: auto; text-align: center;}
#content .company h4{font-weight: bold; font-size: 17px; font-size: 1.7rem; text-align: center; margin: 20px 0; }

#content .company p{text-align: justify;}

/******************/
/* works*********/
#content h3.p-title{font-size: 24px; font-size: 2.4rem;}

#p-works{margin-top: 40px;}

/* ************************************************ 
*   mixitup
* ************************************************ */
button.filter{
	width: 48%;
	height: auto;
	margin: 10px 0;
	padding:8px 5px;
	color: #603813;
	font-size: 12px;
	font-size: 1.2rem;
	letter-spacing: 0;
	float: left;
	height: 70px;
	line-height: 1.5em;
	margin-right: 0;
	margin: 0 1%;
	margin-bottom: 10px;
}

.controls{
	margin-bottom: 20px;
}

#Container .mix,
#Container .gap{
 width: 47%;
}

.mix img{border:1px solid #603813; width:100%; height:72px;}

iframe{width: 100%; height: auto;}

/******************/
/* Contact form7*********/
.contact{
	margin-top: 40px;
}

#content table.contact{width: 100%; border-top: none; border-left: none;}
#content table.contact th em{line-height: 17px;}

form.wpcf7-form {width: 100%; overflow: hidden;}
#content table.contact tr th span{}
#content table.contact tr{width:100%; display: block; list-style:none;}

#content table.contact tr th,
#content table.contact tr td{
	width: 100%;
	display: list-item;
	border: none;
	padding: 0 0 0 3px;
	height: auto;
	font-size: 15px;
	font-size: 1.5rem;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}

#content table.contact tr th{
    padding: 12px 0 10px 15px;
    margin-bottom: 10px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    clear: both;
    font-size: 14px;
    font-size: 1.4rem;
}

#content table.contact tr td{
	margin-bottom: 20px;
	overflow: hidden;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,select{
	width: 100% !important;
	margin: 0;
	font-size: 16px;
}

input[type="checkbox"] {
	display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 9px;
    background: transparent;
    opacity: 0.8;
}

#content .contact input{
	margin-right: 0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}

.contact textarea{
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}

select.wpcf7-form-control.wpcf7-select{width: 30% !important;}
#content table.contact tr td span.annotation{display: block;}
#content table.contact tr td span.wpcf7-not-valid-tip{margin-top: 0;}

#content table.contact tr td span.wpcf7-list-item {
	margin-left: 0;
	line-height: 2.5em;
	display: block;
	clear: both;
	margin-bottom: 0;
}

#content table.contact tr td span.wpcf7-list-item-label{
	font-size: 14px;
	font-size: 1.4rem;
	padding-left: 5px;
}

.page img.ajax-loader{width:auto;}
.page-id-17 .p-contact{display: none;}
.page-id-104 .p-contact{display: none;}

.confirmation{
	margin-top: 10px;
}

.sendBtn input{
	padding: 12px 0;
	font-size: 15px !important;
	font-size: 1.5rem !important;
}

/* =Thaks
-------------------------------------------------------------- */
#content .thanksmail h4{
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2.0;
    margin-bottom: 30px;
}

#content .thanksmail p{
	margin-bottom: 60px;
	text-align: justify;
	text-justify: inter-ideograph;
}

.thanks_mail{
	text-align: center;
	margin-bottom: 40px;
}