/*
 Theme Name: Webs Base Theme
 Description: 寺田工務店のベーステーマです。
 Version: 1.1
 Author: 寺田工務店
 Author URI: 
*/


/* ===================================================================
 Reset
=================================================================== */

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
 margin: 0; padding: 0; border: 0; font-weight: normal; font-size: 100%; vertical-align:baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
article, header, footer, aside, figure, figcaption, nav, section { display:block; }
html { scroll-behavior:smooth; }
body { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
table { border-collapse: collapse; border-spacing: 0;}


/* ===================================================================
 Layout
=================================================================== */
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
*, :before, :after { -webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit; }

@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium");}
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold;}

body { background:#fff; padding:0; margin:0 auto; font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif; color: #000; font-size:16px; line-height:1.5; letter-spacing: 0.05em; }

/* Chrome でのみフォントを太めに表示する */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  * { text-shadow: transparent 0 0 0, rgba(0, 0, 0, .7) 0 0 0 !important; }
  * i { text-shadow: transparent 0 0 0, rgba(0, 0, 0, 0) 0 0 0 !important; }
}

.clear { clear: both;}
.clear:after { content:" "; display:block; clear:both;}

@media only screen and (min-width: 1025px) { 
    .tel { pointer-events:none }
}
/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 { }
p { margin:0 0 1em; padding:0; }
img { max-width:100%; height: auto; margin:0; padding:0; -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle; }
em { font-style: normal; color: #D80000;}

/*--------------------------------------------------------------
 Links
--------------------------------------------------------------*/
a,
a:visited { color: #000; text-decoration: none;}
a:focus { }
a:hover,
a:active { text-decoration: underline; opacity:0.75; filter: alpha(opacity=75); -webkit-transition: 0.3s; transition: 0.3s; }
p a,
p a:visited { color: #000; text-decoration: underline;}

/* List
---------------------------------------------------------------------*/
ul {list-style: none;}
.post ul { list-style-type: disc; margin: 0 0 0 1.5em; padding: 0; }
.post ul li > ul { margin-bottom: 0; margin-left: 1.5em; }
.post ol { list-style-type: decimal; margin: 0 0 0 1.5em; padding: 0; }
.post ol li > ol { margin-bottom: 0; margin-left: 1.5em; }

/* ===================================================================
 Header
=================================================================== */
#site-head { background:rgba(255,255,255,0.9); text-align: center; height: 120px;}
#site-head:after { content:" "; display:block; clear:both;}
.head { width: 100%; max-width: 1250px; height: 120px; margin: 0 auto; text-align: center; position: relative;}
h1 { position: absolute; left: 0; top:19px; z-index: 99999;}
h1 a { display: block;}
h1 .logo { max-width: 100%;}
.head .head-bt { position: absolute; width: 873px; height: 42px; right: 0; top:0; margin:0 auto; padding:0; display: flex; justify-content: flex-end;}

@media screen and (min-width:1025px){
	.head .head-bt img.sp { display:none;}
}

@media screen and (max-width:1366px){
    h1  { width:260px; }
}

@media screen and (max-width:1024px){
    #site-head { width: 100%; height: 52px; position: fixed; top:0; left:0; z-index: 1000;}
    .head { height: 52px;}
    h1  { width:200px; top:2px;}
    .head .head-bt { width:147px; right: 47px; top:5px; z-index: 1101;}
    .head .head-bt img { margin-right:4px;}
	.head .head-bt img.pc { display:none;}
}

@media screen and (max-width:640px){
    h1  { width:160px; }
}

/*--------------------------------------------------------------
 Navigation
--------------------------------------------------------------*/
@media screen and (min-width:1025px){
    #head-nav { position: absolute; right: 0; top:60px; width: 850px; margin:0 auto; padding:0; }
    #head-nav:after { content:" "; display:block; clear:both;}
    #head-nav ul { margin:0 auto; list-style-type:none; }
    #head-nav ul li { position:relative; float:left; font-size: 16px; text-align: center; margin: 0; padding: 0;}
    #head-nav ul li a { display:block; margin:0 0.8em 0 0; padding:5px 2px 5px 2px; letter-spacing:0.02em; color: #000; text-decoration: none;}
    #head-nav ul li a:hover,
    #head-nav ul li.current a{ color: #F8B62C; opacity:1; filter: alpha(opacity=100); }
    #head-nav ul li:last-child a { margin-right: 0; }
    #head-nav ul li a {
        display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden;}
    #head-nav ul li a:before {
        content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; bottom: 0; background: #F8B62C; height: 2px;
        -webkit-transition-property: left, right; transition-property: left, right;
        -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
    #head-nav ul li a:hover:before, #head-nav ul li a:focus:before, #head-nav ul li a:active:before { left: 0; right: 0;}  
}

@media screen and (max-width:1024px){
    #head-nav { width: 100%; margin:0 auto; padding:0; }
    #head-nav ul { width: 100%; margin:0 auto; list-style-type:none; }
    #head-nav ul li {}
    #head-nav ul li a { display:block; margin:0 auto; padding:15px 2px; border-bottom: 1px solid #CAC0BB; color: #fff; text-decoration: none; text-align: center;}
    #head-nav ul li a:hover { color: #fff; opacity:1; filter: alpha(opacity=100); background-color:rgba(43,29,23,1); }
}

/*--------------------------------
 Header SP
----------------------------------*/
@media screen and (min-width:1025px){
    #site-head .hidden_box > a,
    #site-head .hidden_box input,
    #site-head .hidden_box label { display: none;}
}

@media screen and (max-width:1024px){
    #site-head .hidden_box { width: 100%; position: absolute; top:0; right: 0; margin: 0; padding: 0; z-index: 1102;}
    #site-head .hidden_box label { padding: 0; width:46px; height: 42px; position: absolute; top:5px; right: 5px; font-weight: bold; cursor :pointer; transition: .8s; background: url("../images/menu_open.png") no-repeat 0 0; background-size: 46px 42px;}
    #site-head .hidden_box label span { width: 46px; height: 42px;}
    #site-head .hidden_box label:before {}
    #site-head .hidden_box label:hover { background: url("../images/menu_hover.png") no-repeat 0 0; background-size: 46px 42px;}
    #site-head .hidden_box input:checked ~ label { background: url("../images/menu_close.png") no-repeat 0 0; background-size: 46px 42px;}
    #site-head .hidden_box input { display: none;}
    #site-head .hidden_box .hidden_show { width: 100%; height: 0; padding:0; background-color:rgba(43,29,23,0.95); overflow: hidden; opacity: 0; transition: 0.8s; margin-top: 48px;}
    #site-head .hidden_box input:checked ~ .hidden_show { padding: 0; height: auto; opacity: 1;}
	#site-head .hidden_box > a { position: absolute; top: 5px;}
	#site-head .hidden_box > a.mail { right: 56px;}
	#site-head .hidden_box > a.tel { right: 103px;}
} 

/* ===================================================================
 flexレイアウト
=================================================================== */
.flex,
.flex2 { display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: justify; justify-content: space-between; }

.LtoR { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;}
.RtoL { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;}

.box-center { display: flex; justify-content: center; align-items: center; }
.conts-img{ position:relative;}
.conts-img img{ width:100%; height:auto;}

.flex2 > * { width: 48%; margin:0 4% 30px 0; }
.flex2 > *:nth-child(2n) { margin-right: 0; }

@media screen and (max-width: 480px) {
    .flex2 > * { width: 100%;}
}

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

/* パンくずリスト */
.pankuzu { width:94%; max-width:1250px; margin:8px auto 10px auto; padding:0; font-size: 11px; }
.pankuzu a { color: #593D31; text-decoration: underline;}
.pankuzu:after { content:" "; display:block; clear:both;}

/* CONTACT */
#contact { background: #F8B62C; }
#contact .contact-wrap { width: 94%; max-width: 1250px; margin: 0 auto; padding:30px 20px 30px 20px; background: url("../images/contact_bg.jpg") no-repeat right bottom;}
#contact h3 { margin-bottom:25px; width: 875px; text-align: center;}
#contact ul { width: 875px;}
#contact ul li { }

@media only screen and (max-width: 1024px) {
	#contact .contact-wrap { background-size:150px auto;}
    #contact h3,
    #contact ul { width: 80%;}
    #contact ul li { width: 48%; }
}

@media only screen and (max-width: 640px) {
    #contact h3 { width: calc(100% - 80px);}
	#contact .contact-wrap { background-position: right 0 top 10px; background-size:100px auto; }
    #contact ul { width: 100%;}
    #contact ul li { width: 100%; margin-bottom: 10px; }
}

/*--------------------------------------------------------------
 TERADAの家づくり 共通ナビ
--------------------------------------------------------------*/
.design-navi-top { background: #D4CDCA; margin-top: 30px; }
.design-navi-bottom { background: #D4CDCA; margin-bottom: 40px; }
.design-navi ul { width: 100%; max-width: 1416px; margin: 0 auto; }
.design-navi ul li { position: relative; width: 20%; height: 90px; text-align: left; font-weight: bold; line-height: 1.2; }
.design-navi ul li a { height: 90px; color: #39271F; font-size: 16px; font-weight: bold; display: block;}
.design-navi ul li img { position: absolute; top:15px; left:7px; float: left;}
.design-navi ul li a:hover { background: #94837A; color: #fff; opacity:1; filter: alpha(opacity=100); -webkit-transition: 0.3s; transition: 0.3s; text-decoration: none;}
.design-navi ul li.current { background: #94837A; color: #fff; }
.design-navi ul li a,
.design-navi ul li.current {padding:38px 0 0 75px; }

@media only screen and (min-width: 960px), print { 
	.design-navi ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; }
    .design-navi-top ul li.current:before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #94837A;}
    .design-navi-bottom ul li.current:before { content: ""; position: absolute; top: -30px; left: 50%; margin-left: -15px; border: 15px solid transparent; border-bottom: 15px solid #94837A;}
}

@media only screen and (min-width: 641px) and (max-width: 959px) { 
	.design-navi ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; }
    .design-navi ul li { width: 33.33%;}
}

@media only screen and (max-width: 640px) { 
	.design-navi ul { }
    .design-navi ul li { width: 100%; height: 60px; }
    .design-navi ul li a { height: 60px; }
    .design-navi ul li:before { content: ""; position: absolute; top: 38%; right: 5%;  border: 8px solid transparent; border-left: 8px solid #94837A;}
    .design-navi ul li a,
    .design-navi ul li.current {padding:22px 0 0 72px; }
    .design-navi ul li img { width: 40px; top:10px; left:15px;}
}





/* ===================================================================
 FOOTER
=================================================================== */
#site-foot { text-align: center; background: #fff;} 
.foot { position: relative; width: 94%; max-width: 1250px; margin: 0 auto; padding: 30px 0 70px 0;}
#site-foot:after,
.foot:after { content:" "; display:block; clear:both;}
.foot-add { width: 320px; float: left; text-align: left;}
.foot-add p { margin-bottom: 0.3em; line-height: 1.2; }
.foot-add .sns a { margin-right: 10px; font-size: 40px; color: #000; text-decoration: none; }
.foot-nav { width: calc(100% - 330px); max-width: 860px; float: right; text-align: left; padding-top: 30px;}
.foot-nav ul { clear: left; padding-bottom: 12px; }
.foot-nav ul:after { content:" "; display:block; clear:both;}
.foot-nav ul li { float: left; margin: 0 0 0.5em 0; padding-right: 1.5em; line-height: 1.2;}
.foot-nav a { font-weight: bold; font-size:15px; color: #595555; text-decoration: underline;}
.foot-nav a.child { position: relative; font-weight: normal; font-size:14px; padding-left: 0.5em; }
.foot-nav a.child::before { position: absolute; top:0; left:-0.7em; content: "-"; }
.foot-nav a i { font-size: 11px; font-weight: normal; margin-right: 0.5em;}
.foot .foot-bn { position: absolute; right: 10px; bottom: -15px;}
.foot .foot-bn ul { display: flex; align-items:center;}
.foot .foot-bn ul li { margin-right: 10px;}
.foot .foot-bn ul li:last-child { margin: 0;}

@media only screen and (max-width: 1249px) { 
    .foot { padding: 30px 0 9% 0;}
	.foot-add { clear: both; width: 100%; float: none; text-align: center; margin-bottom: 70px;}
    .foot-nav { width: 100%; float: none; }
    .foot .foot-bn { bottom: 20px; left: 0; right: 0;}
	.foot .foot-bn ul { display: flex; justify-content:center;}
	.foot .foot-bn ul li a { margin: 0 10px 10px 0;}
	.foot .foot-bn ul li a:last-child { margin: 0;}
}

@media only screen and (max-width: 360px) { 
    .foot { padding: 30px 0 2px 0;}
	.foot-add { margin-bottom: 90px;}
    .foot-nav ul li { float:none; width:100%; padding-left: 15px;}
    .foot-nav a.child { padding-left: 1.2em; }
    .foot-nav a.child::before { left:0em; }
    .foot .foot-bn ul li a img { width: 100%;}
}

/* copyright */
.copyright { width: 94%; max-width: 1250px; text-align:left; font-size:11px; margin: 0 auto 5% auto; padding: 5px 0 10px 0; color: #595656; }
.copyright a { font-size:11px; color:#444; text-decoration:none;}
.copyright a:hover { color:#595656; text-decoration:underline;}

@media only screen and (max-width: 1249px) { 
    .copyright { text-align:center; margin: 0 auto 8% auto;}
}

@media only screen and (max-width: 1024px) {
	.copyright { margin: 0 auto 14% auto;}
}

@media only screen and (max-width: 360px) { 
	.copyright { margin: 0 auto 16% auto;}
}

/* サイド------------------------------------------------
#side-bt { width: 53px; position:fixed; bottom:80px; right:0; z-index: 1000;}
#side-bt img { margin-bottom: 10px;}

@media only screen and (max-width: 1366px) { 
    #side-bt { width: 49px;}
}
------------------------------------------------ */

/* 固定フッターボタン------------------------------------------------ */
#foot-bt-fix { width: 100%; position:fixed; bottom:0px; z-index: 1000; background: rgba(255,255,255,0.50);}
#foot-bt-fix ul { display: -webkit-flex; margin: 0 auto; list-style: none; max-width: 1276px; justify-content: center;}
#foot-bt-fix ul li { text-align: center; margin: 10px 0;}
#foot-bt-fix ul li img { width: 90%; display: inline-block;}
#foot-bt-fix ul li img.sp { display:none;}

@media only screen and (max-width: 1024px) {
	#foot-bt-fix { padding: 0 5%;}
    #foot-bt-fix ul li img.sp { display: inline-block;}
	#foot-bt-fix ul li img.pc { display: none;}
}

/* ページ先頭へ------------------------------------------ */
#page-top { position:fixed; bottom:95px; right:5px; z-index: 99999;}
#page-top a { text-align:center; display:block; text-decoration:none;}
#page-top a:hover { text-decoration:none; }

/*--------------------------------------------------------------
 Print
--------------------------------------------------------------*/
@media print { }