@charset "utf-8";
/* ================================================================
 ワコーハウジング
 admin  : Saori Otsuaka
 Author: Graphics Drive Inc.
 Author URI: http://www.graphics-drive.com/
 update : 2025/05/227
 
 基本レイアウトcss
------------------------------------------------------------------- 
LPページのCSS設定
================================================================ */
@media screen and (min-width: 769px) { .sp , .tb{ display: none!important; }/* 960px以上では非表示 */ 
}

@media screen and (max-width: 480px) { 
	.pc{ display: none; }
	.sp{ display: block!important; }
	br{ display: block; }
	br.tb{display: block;}
}


/* 基本設定 */
html { font-size: 62.5%; scroll-behavior: smooth; }/* Resets 1rem to 10px */
body { font-family: 'Hiragino Sans', 'Helvetica Neue', sans-serif; line-height: 1.7; color: #333; font-weight: 400; }

/* ------------------------------------------------------------
		link
------------------------------------------------------------ */

a:link, a:visited { color: #53382D; text-decoration: none; }
a:hover           { color: #DDDDDD; text-decoration: underline; }

/* ---------------------------------------------------------------
		トップ画像
--------------------------------------------------------------- */

/* positionで設定する場合 */
.top-bg{ 
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
		flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
		justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
		align-items: center;
	width: 100%;
	margin:0 auto;
	height:auto;
	overflow: hidden;
}


.top-bg .tbox{ 
	position: relative;
	width: 90%;
	max-width: 1050px;
	height: 100%; 
	position: absolute; 
	-ms-flex-item-align:center; 
	    -ms-grid-row-align:center; 
	    align-self:center;
	text-align: center;
	padding-top: 13%;
	color: #37302D;
	background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255,255,255,0.00)), color-stop(20%, rgba(255,255,255,0.3)), color-stop(80%, rgba(255,255,255,0.3)), to(rgba(255,255,255,0.00)));
	background: -o-linear-gradient(left, rgba(255,255,255,0.00) 0, rgba(255,255,255,0.3) 20%, rgba(255,255,255,0.3) 80%, rgba(255,255,255,0.00) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0.00) 0, rgba(255,255,255,0.3) 20%, rgba(255,255,255,0.3) 80%, rgba(255,255,255,0.00) 100%);
}

.t_shadowW{
	text-shadow:  0 0 10px #FFFFFF, 0 0 3px #FFFFFF, 0 0 3px #FFFFFF, 0 0 10px #FFFFFF, 0 0 10px #FFFFFF, 0 0 10px #FFFFFF, 0 0 10px #FFFFFF, 
	 0 0 10px #FFFFFF, 0 0 10px #FFFFFF, 0 0 10px #FFFFFF, 0 0 10px #FFFFFF, 0 0 10px #FFFFFF, 0 0 10px #FFFFFF, 0 0 15px #FFFFFF; }


.top-bg .tbox h1{ width: auto;  display: block; margin: 0.5rem auto; padding: 1.5rem; border-bottom: solid 2px #FFFFFF; letter-spacing: 0.1rem;}
.top-bg .tbox img{position: absolute; bottom:0; left:10%; width:80%; height: auto; margin: 0 auto; padding: 0;  }

.top-bg img{ width: 100%; height: 100%;  -o-object-fit: cover;  object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; }

@media(max-width: 980px){ 
	.top-bg{ height: auto;}
	.top-bg .tbox img{left:5%; width:90%; }
}

@media(max-width: 769px){
	.top-bg .tbox{padding-top: 8%;}
	.top-bg{ height: auto; }
}

@media(max-width: 480px){ 
	.top-bg{ height:auto;}
	.top-bg .tbox{width: 95%; padding-top: 2.5rem; }
	.top-bg .tbox img{position: absolute; bottom:0; left:5%; width:90%; height: auto; margin: 0 auto; padding: 0;  }
}


/* レスポンシブ対応の文字サイズ指定*/
.t30{ 
	font-size: 25px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(3rem + ((1vw - 0.48rem) * -1.3889));/* 20px~30pxで可変*/
	line-height: 1.6;
}

.t40{ 
	font-size: 30px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(4rem + ((1vw - 0.48rem) * -2.3611));/* 23px~40pxで可変*/
	line-height: 1.4;
}

@media screen and  (min-width: 1200px) {/* 1200px以上*/
    .t30  {font-size: 3rem;/* 30px*/ }
	.t40  {font-size: 4rem;/* 40px*/ }
}


@media screen and  (min-width: 980px) {/* 980px以上*/
    .t30  {font-size: 2.8rem;/* 30px*/ }
	.t40  {font-size: 3.2rem;/* 40px*/ }
}

@media screen and  (max-width: 769px) {/* 770px以下*/
	.t30  {font-size: 2.3rem;/* 25px*/ }
	.t40  {font-size: 2.8rem;/* 30px*/ }
}

@media screen and  (max-width: 480px) {/* 480px以下*/
    .t30{ font-size: 2rem;/* 20px*/}
	.t40{ font-size: 2.3rem;/* 25px*/}
}

/* ---------------------------------------------------------------
		トップページ
--------------------------------------------------------------- */
.img-frame img{
	width: 100%;
	height: auto;
}

.btn { background: #FFA64D; color: #FFFFFF; margin: 2rem auto; padding: 1rem 2rem; letter-spacing: 0.1rem; text-decoration: none; border-radius: 30px; font-weight: bold; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; display: inline-block; }
 .btn a:link, .btn a:visited { color: #FFFFFF; text-decoration: none; }
.btn:hover { background:#53382D; -webkit-transform: scale(1.03); -ms-transform: scale(1.03); transform: scale(1.03); }


.feature { background: white; padding: 25px; border-radius: 16px; -webkit-box-shadow: 0 4px 15px rgba(0,0,0,0.08); box-shadow: 0 4px 15px rgba(0,0,0,0.08); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
.feature:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.12); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.feature img { width: 100%; border-radius: 12px; margin-bottom: 20px; }
.feature h3 { color: #3c7d3e; font-weight: 500; padding-bottom: 1rem; }

.bg_beige{background:#F0F0F0;}

.plan { text-align: center; }
.plan img { max-width:700px; width: 90%; margin: 0 auto;}


.img_bg_bnr{
	width: 100%; 
	height: 50vh;
	margin: 0 auto;
	padding: 2rem 0;
	background-image:url("images/bnr_free_design.jpg"); 
	background-repeat: no-repeat; 
	background-size:cover;
	background-position: center center;
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	-webkit-box-align:end;
	    -ms-flex-align:end;
	        align-items:flex-end;
}

footer { margin:0rem auto; padding: 1rem; width: 100%; background-color: #37302D; color: #FFFFFF; }
footer a:link, a:visited { color: #FFFFFF; text-decoration: none; }
footer a:hover           { color: #FFFFFF; text-decoration: underline; }
.address_box{ margin: 1rem auto;display: block; text-align: center; }
.address_box img{ margin: 1rem auto; display: block; }
.copy{ font-size: 13px;  font-weight: 500; line-height: 1.5; text-align: center; clear: both;  color: #FFFFFF; margin: 1rem auto;}


@media screen and (max-width: 480px) { 
	.btn { display: block; margin: 2rem auto; padding: 1rem 2rem; text-align: center; max-width: 300px;}
	.img_bg_bnr{height: 40vh;}
}