@charset "utf-8";
/* ================================================================
 ワコーハウジング
 admin  : Saori Otsuaka
 Author: Graphics Drive Inc.
 Author URI: http://www.graphics-drive.com/
 update : 2025/05/227
 
 共通CSS 全てに適用
 
 break point max-width: 960px, max-width: 769px, min-with: 480px
------------------------------------------------------------------- 

基本設定
link

header
footer

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

/* 基本設定 */

html { font-size: 62.5%; scroll-behavior: smooth; }/* Resets 1rem to 10px */

body{ 
	font-family: kozuka-gothic-pr6n, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 300;
	line-height: 1.8;
	color:#262124;
	margin: 0px; 
	padding: 0px; 
	background: #FFF;
}

body{
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
}

section{
	width: 100%;
	overflow-x: hidden;
}
* { 
	-webkit-box-sizing: border-box; 
			box-sizing: border-box; 
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
	-webkit-transition: -webkit-transform .6s ease;
	transition: -webkit-transform .6s ease;
	-o-transition: transform .6s ease;
	transition: transform .6s ease;
	transition: transform .6s ease, -webkit-transform .6s ease; /* ゆっくり変化させる */
}

.img-frame{
	display: block;
	width: 100%;
	height: auto;
	overflow:hidden;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.img-frame img{
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	   object-fit: cover; /* 画像を中央の位置でトリミングする */
	-o-object-position: center top;
	   object-position: center top;
	-webkit-transition: -webkit-transform .6s ease;
	transition: -webkit-transform .6s ease;
	-o-transition: transform .6s ease;
	transition: transform .6s ease;
	transition: transform .6s ease, -webkit-transform .6s ease; /* ゆっくり変化させる */
}

a img { border: none; }

iframe,
object,
embed {
	max-width: 100%;
}
/* フェードインアニメーション:IE10以下未対応 */
a{  -webkit-transition: 0.6s ease; 
		 -o-transition: 0.6s ease; 
			transition: 0.6s ease; }

a:hover img{
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	        transform: scale(1.1); /* 拡大 */
	filter: alpha(opacity=100);
	-moz-opacity:100;
	opacity:100;
}

/* listのスタイル無し　*/
ul, ol{ margin: 0; padding: 0; list-style: none; }

/* 768以上で電話をクリックできないようにする */
@media screen and (min-width: 769px) { a[href^="tel:"] {pointer-events: none;} }
 
@media screen and (max-width: 769px) { 
	.pc{ display: none; }
	.tb{ display: block; } /* 960px以下では表示 */
	.sp{ display: none; }
}

@media screen and (max-width: 480px) { 
	.pc{ display: none; }
	.sp{ display: block!important; }
	body { word-wrap:break-word; width:100vw; }/* スマホで英文字の改行をさせる */
	br{ display: none; }/* brの改行をさせない */
	br.tb{display: block;}
	/* 画像センター合わせ(元の大きさで） */
	img{ float: none; max-width: 100%; margin-right: auto; margin-left: auto; padding: 0; }
}

/* ------------------------------------------------------------
		見出し
------------------------------------------------------------ */

h2, h3{ font-weight: normal; text-decoration: none; }

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

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


/*リンクの位置調整*/
.anchor{
	display: block;
	position: relative;
	top: -320px;
}

@media screen and (max-width: 769px) { 
	/*リンクの位置調整*/
.anchor{
	top: -170px;
}

}
/* ------------------------------------------------------------
		header
------------------------------------------------------------ */

/* ヘッダー  */
header{ 
	top: 0;
	height:130px;
	width: 100%;
	position:relative;
	z-index: 250;
	margin: 0 auto;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap:nowrap;
	    flex-wrap:nowrap;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	background:rgba(130,119,124,0.40);
	-webkit-backdrop-filter: blur(2px);
	        backdrop-filter: blur(2px);
}

header a:link, header a:visited { text-decoration: none; }

header h1.logo{display: block; padding-left:2rem; padding-right: 1rem; width: 25%; max-width: 250px;}
header h1.logo_sp{display: none;}
header .h_contact{ 
	position: absolute; top:0; right:0; z-index: 8;
	-ms-flex-preferred-size:100px;
	    flex-basis:100px; height: 100px; margin: 0 auto;
}


@media (min-width: 1200px) {/* 1200px以上*/
}

@media screen and (max-width: 980px) {/* 980px以下*/
}

@media screen and (max-width: 769px) {/* 768px以下*/
	header{margin: 0 auto; height: 110px; }
	header h1.logo{display: none;}
	header h1.logo_sp{ display: block; max-height:70px; width: auto; padding:0 0.5rem; margin: 0 auto;}
	header h1.logo_sp img{ display: block; height: 70%; width: auto; }
	header .h_contact{display: none;}
}

@media screen and (max-width: 480px) {/* 480px以下*/
	header{margin: 0 auto; height: 70px; }
	header h1.logo{display: none;}
	header h1.logo_sp{ display: block; max-height:55px; width: auto; padding:0 0.5rem; margin: 0 auto;}
	header h1.logo_sp img{ display: block; height: 55px; width: auto; }
}



/* ------------------------------------------------------------
		sp_contact
------------------------------------------------------------ */

@media(min-width: 480px){
.sp_contact{ display: none; }
}

@media(max-width: 480px){
	.sp_contact{ 
		position: fixed;
		bottom:0;
		left: 0;
		width: 100%;
		height: auto;
		margin:0 auto;
		z-index: 6;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap:wrap;
		    flex-wrap:wrap; 
		-ms-flex-pack:distribute;
	    justify-content:space-around;
	} 
	.sp_contact a{
		margin: 0 auto;
		width: 100%;
		height:100%;
		text-align: center;
		vertical-align:middle;
		padding:0 0.5rem;
	}
	
	.sp_contact img{
		-ms-flex-item-align: center;-ms-grid-row-align: center;align-self: center;
		display: block; max-width: 40%; max-height:70px; margin: 8% auto 1rem auto; padding: 0;}
	.sp_contact p{-ms-flex-item-align:center; -ms-grid-row-align:center; align-self:center; font-size: 12px; font-weight: 600; line-height: 1.2; margin: 0 auto 1rem auto; }
	
}

/* ------------------------------------------------------------
		Footer contact
------------------------------------------------------------ */

.f_contact{
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap; 
	-ms-flex-pack:distribute;
	    justify-content:space-around;
}

.f_contact .f_con_title{
	-ms-flex-preferred-size:100%;
	    flex-basis:100%;
	height: 100px;
	margin:0 auto;
	padding: 1rem 0 1rem 0;
	background: #272324;
	color: #FFFFFF;
	text-align: center;
}

.f_contact h2, .sp_contact h2{
	-ms-flex-preferred-size:100%;
	    flex-basis:100%;
	margin:0 auto;
	background: #272324;
	color: #FFFFFF;
	text-align: center;
	letter-spacing: 0.2rem;
}

.f_contact .f_con, .sp_contact .f_con{
	-webkit-box-flex:1;
	    -ms-flex-positive:1;
	        flex-grow:1;
	-ms-flex-preferred-size:33%;
	    flex-basis:33%;
	
	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;
	text-align: center; margin: 0 auto;
	height:  auto;
	min-height: 60px;
	background:url("../images/bnr_contact01.jpg") center center  no-repeat; 
	background-size: cover;
}

.f_contact a{
	margin: 0 auto;
	width: 100%;
	height:100%;
	text-align: center;
	vertical-align:middle;
	padding: 1rem 1rem 0.5rem 1rem;
}

.f_contact a:link, .sp_contact a:link{color: #FFF; text-decoration: none;}
.f_contact a:hover, .sp_contact a:hover{background:  rgba(255,255,255,0.30);} 
.f_contact a:first-child, .sp_contact a:first-child { border-left: none;}

.f_contact img{-ms-flex-item-align: center; -ms-grid-row-align:center; align-self:center; display: block; max-width: 35%; margin: 20% auto 1rem auto; padding: 0;}
.f_contact p{-ms-flex-item-align: center; -ms-grid-row-align:center; align-self:center;font-size: 18px; font-weight: 600; line-height: 1.2; margin: 0 auto 5rem auto; }

/* レスポンシブ設定 */
@media screen and (max-width: 480px) {/* 480px以下*/
	.f_contact{display: none;}
}

/* ------------------------------------------------------------
		Page Top トップへ戻る
------------------------------------------------------------ */

.pageTop{
	width: 70px;
    height:70px;
    position: fixed;
    bottom: 0;
    right: 0;
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	z-index: 4;
}

.pageTop a{
	width: 100%;
    height:100%;
    display: block;

}

.pageTop a:hover{ background-position: 0px 0px;}

/* レスポンシブ設定 */
@media screen and (max-width: 480px) {/* 480px以下*/
	.pageTop{width: 60px; height:60px;bottom: 8.2rem; right: 0;}
}

/* ------------------------------------------------------------
		Footer
------------------------------------------------------------ */

/* footer */

footer { margin:0rem auto; padding: 0 0 1rem 0; width: 100%; background-color: #F1F0EC; }

footer .finner{  width: 100%; top: 1em; margin: 2rem auto 0.5rem auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
}

/* footer 会社情報など */
.f_add{ 
	height:auto;
	margin:0 2rem;
	-webkit-box-flex: 1;-ms-flex-positive: 1; flex-grow: 1;
}

.f_add img{
	display: block;
	margin: 0 0 2rem 0;
}

.area{ 
	height:auto;
	margin:0 2rem;
	-webkit-box-flex: 1;-ms-flex-positive: 1; flex-grow: 1;
}

.copy{ 
	font-size: 13px; 
	font-weight: 500; 
	line-height: 1.5; 
	clear: both; 
	color: #000000;
	margin: 1rem 2rem;
}

/* レスポンシブ設定 */
@media(max-width: 769px){

	footer .finner{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin:1rem auto; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
	footer .finner br{display: block;}
	.f_add{ margin: 1rem auto 2rem auto; padding: 0 2rem; text-align: center;}
	.f_add img{margin: 0 auto 1rem auto;}
	.area{ margin: 1rem auto 0 auto; padding: 0 2rem;}
	.copy{ width: 90%; text-align: center; }
}

@media(max-width: 480px){
	footer{border-top: solid 2px #ABA29A;}
	.copy{ width: 90%; margin: 0 auto 13.5rem auto; text-align:left;}
}

/* ------------------------------------------------------------
		footer_nav
------------------------------------------------------------ */

.footer_nav{
	-webkit-box-flex: 2;-ms-flex-positive: 2; flex-grow: 2;
	width: auto;
	height: auto;
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap:nowrap;
	    flex-wrap:nowrap;
	-ms-flex-line-pack:end;
	    align-content:flex-end;
}

/* footer nav */
.f_nav{ display: block;  margin:2rem auto 0rem auto;}
.f_nav:last-child{ border-right: none;}
.f_nav ul { display: block; width: auto; margin:0 auto;}
.f_nav ul li { line-height: 2em; }
.f_nav ul li a{ position: relative; display: block; letter-spacing: 0; display: block;}


/*== SNSの設定 */
	.f_nav ol.sns{
		list-style: none;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap:nowrap;
		    flex-wrap:nowrap;
		-webkit-box-pack:end;
		    -ms-flex-pack:end;
		        justify-content:flex-end;
		-webkit-box-align:center;
		    -ms-flex-align:center;
		        align-items:center;
		height: auto;
		width: 80%; margin: 1rem auto;}
	.f_nav ol.sns a{display: block; margin: 0 auto; padding: 0.5rem;}
	.f_nav ol.sns img{display: block; margin: 0 auto; padding: 0 ;}
	.f_nav ol.sns span{display:none;}


/* サブメニュー「-」 */
.f_nav ul ul {margin: 0px; padding: 0px 0 1rem 0 ;}
.f_nav ul li li{ margin-left: 0.5rem;   line-height: 1.6em;}
.f_nav ul li li a{ position: relative; display: block; letter-spacing: 0; display: block; padding-left:1rem; }
.f_nav ul  li li a:before{
	position: absolute;
	content: '';
	top: 50%;
	left: 0;
	width: 4px;
	height: 4px;
	border-top: 1px solid #37302D;
	border-right: 1px solid #37302D;
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	margin-top: -5px;

}

/* サブメニュー「-」無し
/
.sitemap .finner ul li .noc :before { content: none;}
.sitemap .finner ul li.noc{ padding-left: 15px;} */

.f_nav a:link, footer a:visited{ color: #000; text-decoration: none;}
.f_nav a:hover{ color: #999; text-decoration: underline;} /* グレー */
.f_nav ul li li a{ color: #000; text-decoration: none;}


/* レスポンシブ設定 */
@media screen and (max-width: 769px) {/* 769px以下*/
	.f_nav{ display: block;  margin:2rem auto ; -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex-preferred-size: 50%; flex-basis: 50%; border-right:none;}
	.f_nav ol.sns{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
	.footer_nav{display: none;}
}

/* レスポンシブ設定 */
@media screen and (max-width: 480px) {/* 480px以下*/
	
}