@charset "utf-8";
/* ================================================================
 ワコーハウジング
 admin  : Saori Otsuaka
 Author: Graphics Drive Inc.
 Author URI: http://www.graphics-drive.com/
 update : 2025/05/227
 
 共通CSS 共通　部品
------------------------------------------------------------------- 

ローディング
カラム　flexbox
カラム　list 3カラム・4カラム flexbox
カラム  2カラム・box float
table
凡用リスト
title
ボタン
アニメーション設定
Web Font
Utility  text / margin
color
clearfix

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


/* 基本設定 */


/* ローディング
========================================== */

.loading {
	width: 100%;
	height: 100%;
	background: rgba(225,225,225,1.00);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20000;
}

.loading p{
	width: 120px;/* ロゴ幅の指定 */
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -60px;/* ロゴ幅半分 */
	margin-left: -60px;/* ロゴ高さ分 */
	text-align:center;
}

.loading p img{
	margin:0px auto;
	padding:0px;
	text-align:center;
}


/*------------------------------------------------------------
	　	カラム
------------------------------------------------------------*/

.wrapper { margin: 0; padding: 0;
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	min-height: 100vh;
	width: 100%;
}

.inner{ width: 100%;  max-width: 1024px; margin: 0 auto; padding: 0; }

.contents{ width: 100%; max-width: 1024px; margin: 0 auto 0; display: block;}


/* iframe */
 iframe{
	width:100%;  height: auto; min-height:400px;	 
}

 .news iframe{
	display: block; width:100%; max-width: 1200px; height: auto; min-height:400px; margin: 0 auto; padding: 1rem;	 
}

/* バーチャルモデルルーム */
.model{ width:100%; margin:0 auto; }
.model iframe{ width:100%;  height: auto; min-height:600px; padding: 1rem;	}

/* googlemap枠 */
.gmap{ width:100%; margin:0 auto; }
.gmap iframe{ height:40vh; }

/* 背景（黒）BOX */
.wrapper-bk { margin: 0; padding: 0; background-color: #333; }

.tbox{position: relative;}

/* センター・box */
.cbox{ max-width: 1024px; display: block; text-align: center; margin:0 auto; }
.cbox img{ width: 90%; max-width: 100%; margin: 0 auto; }
.cbox h2 img{ width: 62px; margin: 0 auto; }

/* センター位置・box */
.c_box{ 
	display:-webkit-box; 
	display:-ms-flexbox; 
	display:flex;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	width:auto;
	margin:1rem auto;
}

/* 枠付き・box */
.line-box{ 
	border: 1px solid #C5C0BB;
     padding: 2rem;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
     margin-bottom:3rem;
}

@media(max-width: 1024px){ 
	.wrapper{width: 100%; margin-right: 0%;}
	.contents, .inner{ width: 90%; margin: 0 7% 0 3%;}
	iframe, .gmap iframe{ width:100%;  margin: 0.5rem 0 ; padding: 0;}
}

@media screen and (max-width: 769px){
	.news iframe {min-height:360px; overflow: hidden;  }
}

@media screen and (max-width: 480px){
	.contents, .inner{ width: 84%; margin: 0 9% 0 7%;}
	.news iframe {min-height:380px; overflow: hidden;  }
}


/* img背景 style="background-image: url(○○.jpg)"　でhtmlから背景画像指定できます。
========================================== */

.img_bg01{
	width: 100%; 
	height: auto;
	margin: 0 auto;
	padding: 2rem 0 0rem 0;
	background-image:url("../images/trial/trial_bg.jpg"); 
	background-repeat: no-repeat; 
	background-size:cover;
	background-position: center top;
	background-attachment: fixed;/*パララックス風*/
}


.img_bg02{
	width: 100%; 
	height: auto;
	margin: 0 auto;
	padding: 10rem 2rem;
	background-image:url("../images/trial/trial_bg.jpg"); 
	background-repeat: no-repeat; 
	background-size:cover;
	background-position: center center;
}

@media screen and (max-width: 480px){
	.img_bg02{ padding: 3rem 0rem;}
}

/* バナー用カラム　単純横並び Flexbox
========================================== */

/*折り返しなし 左はじまり　上合わせ */
.banner-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	-webkit-box-align:stretch;
	    -ms-flex-align:stretch;
	        align-items:stretch;	
}

.banner-box {
	width: auto;
	height: auto;
    display: block;
    margin:1rem;
    padding: 0;
	 -webkit-box-flex: 1;-ms-flex-positive: 1; flex-grow: 1; 
}

.banner-box img { width: 100%; height:auto;}


/*折り返しあり用 */
.banner-wrap2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap:  wrap;
	    flex-wrap: wrap;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;	
}

.banner-wrap2 .banner-box {
	width: 15%;
    display: block;
    margin: 0.5rem auto;
    padding: 0 0.5rem;
}


@media screen and (max-width: 769px){
	.banner-wrap{ -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0px auto;}
	.banner-wrap .banner-box { -ms-flex-preferred-size: 23%; flex-basis: 23%; margin: 1rem 1%; }
	.banner-wrap2{ -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0px auto;}
	.banner-wrap2 .banner-box { -ms-flex-preferred-size: 23%; flex-basis: 23%; margin: 1rem 1%; }

}

@media screen and (max-width: 480px){
	.banner-wrap2 .banner-box { -ms-flex-preferred-size: 31%; flex-basis: 31%; margin: 0.5rem 1%; }
}

/* 2カラム・Flexbox　IE8以下未対応
========================================== */

/* 2カラム・固定:可変 -------------------- */
.col2-f { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
}

.col2-inner{ padding:0 0 1rem 0; }

/* 固定（width：pxにすれば固定に %設定だと可変) */
.main{
	width:45%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 0 1rem;
	background:none;
}

/* 可変 */
.side{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
	background:none;
	padding:1rem ;
}

/* 画像*/
.col2-inner img{ text-align: center; width: 95%; margin: 0 auto;}


@media screen and (max-width: 480px){
	.col2-f {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; }
	.col2-inner { width: 100%; }
	.main, .side{ width: 100%; border-right: none; padding-right:1rem; margin: 0 auto;}
	
	.col2-inner.main img{max-width: 75%;}

}

/* 2カラム・画像:textを左右交互に配置 -------------------- */

.col2-wrap {
	margin:0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
}


.col2-wrap:nth-child(odd) {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	    -ms-flex-direction: row-reverse;
	        flex-direction: row-reverse;
}

.col2-text{
	width: 50%;
	height: auto; display: block;
	}

.col2-img {
	width: 50%;
	-ms-flex-item-align:stretch;
	    -ms-grid-row-align:stretch;
	    align-self:stretch;
	overflow: hidden;
	height: auto;
	min-height:300px;
}

/* 画像 トリミング高さ合わせ */
.col2-img img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 0%; object-position: 50% 0%;
}



@media screen and (max-width: 769px){
	.col2-wrap,
	.col2-wrap:nth-child(odd)  {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

	.col2-text{
		width: 90%; margin: 0 10% 0 5%;
		height: auto; display: block; margin-top:0; padding: 1.5rem;
	}
	
	.col2-img {
		width: 100%; /*flex: 1;*/
		margin: 0px auto;
		-o-object-fit: fill;
		   object-fit: fill;
		max-height:300px;
		-o-object-position: 50% 50%;
		   object-position: 50% 50%;
	}
}


/* list 3カラム・4カラム Flexbox
========================================== */

.list-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap; /* 折り返しあり */
	-ms-flex-pack:distribute;
	    justify-content:space-around;	
}


.list-wrap img{height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 0 0; object-position: 0 0;}
.list2-box p, .list3-box p{display: block;  -ms-flex-item-align: center;  -ms-grid-row-align: center;  align-self: center;}

.list2-box {
	margin: 1rem 1%;
	padding:0.5rem;
	width: 47%; /* 4col */
	height: auto;
	overflow:hidden;
}

.lesson-box{
	margin: 1rem 1% 3rem 1%;
	padding:1rem;
	width: 47%; /* 2col */
	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-align:stretch;
	    -ms-flex-align:stretch;
	        align-items:stretch;
}

.lesson-box .bg_white{ height: 90%; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-item-align:stretch; -ms-grid-row-align:stretch; align-self:stretch;}

.list3-box{
	margin:1rem 1%;
	padding-right: 0;
	width: 31%; /* 3col */
	height: auto;
	overflow:hidden;
}

.list4-box {
	margin: 1rem 1%;
	width: 23%; /* 4col */
	height: auto;
	overflow:hidden;
	-ms-flex-item-align: stretch;
	    -ms-grid-row-align: stretch;
	    align-self: stretch;
}

.list2-box img , .list3-box img , .list4-box 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; /* ゆっくり変化させる */
}

@media screen and (max-width: 980px){
	.list-wrap img, .list2-box img{ width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%;}
}



@media screen and (max-width: 769px){
	.list3-box { margin-right:1%; padding: 1rem; width: 48%; /* 2col */}
	.list4-box { margin-right:1%; padding: 1rem; width: 48%; /* 2col */}
	.list2-box{ width: 90%; margin: 0.5rem auto; height: auto;}
	.lesson-box { width: 90%; margin: 0.5rem auto; height: auto;}
	.list-wrap img, .list2-box img , .list3-box img , .list4-box img{ width: 100%; height: auto; max-height: 380px;}
	.list-wrap.link img{height: auto; width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%;}
}



@media screen and (max-width: 480px){
	
	/* 折り返しなし・垂直に並べる */
	.list2-box, .lesson-box , .list3-box, .list4-box{ width: 90%; margin: 0.5rem auto; height: auto;}
	.list4-box img{ margin-bottom: 0; }
	.list3-box h2 br{ display: inline-block; } /* brの改行をする */
}


/* 2カラム・box float
========================================== */

.col2{ margin-bottom: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
.col2 .c{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}

.left5{ float: left; width: 49.5%; padding-right: 0.5%;}
.right5{ float: right; width: 49.5%; padding-left:  0.5%;}

/* 2カラム・3:7 */
.left3{ float: left; width: 29%; padding-right:  1%;}
.right7{ float: right; width: 69%; padding-left:  1%;}

.left7{ float: left; width: 69%; padding-right:  1%;}
.right3{ float: right; width: 29%; padding-left:  1%;}

/* 2カラム・4:6 */
.left6{ float: left; width: 60%; padding-right:  0%;}
.right4{ float: right; width: 39%; padding-left:  1%;}

.left4{ float: left; width: 39%; padding-right:  1%}
.right6{ float: right; width: 60%; padding-left:  0%;}

/* 2カラム・2:8 */
.left2{ float: left; width: 19%; padding-right:  1%;}
.right8{ float: right; width: 79%; padding-left:  1%;}

.left8{ float: left; width: 79%; padding-right:  1%;}
.right2{ float: right; width: 19%; padding-left:  1%;}

/* 2カラム・1:9 */
.left1{ float: left; width: 9%; padding-right:  1%;}
.right9{ float: right; width: 89%; padding-left:  1%;}

.left9{ float: left; width: 89%; padding-right:  1%;}
.right1{ float: right; width: 9%; padding-left:  1%;}



.left5 p img, .right5 p img, .left3 p img, .right7 p img, .left7 p img, .right3 p img, .left6 p img, .right4 p img, .left4 p img, .right6 p img, .left2 p img, .right8 p img, .left1 p img, .right9 p img
{ width: 80%; margin: 2rem auto;}

@media screen and (max-width: 769px){
/* 2カラム・box */
	.left5, .right5
{ float: none; width: 100%; margin-right: auto; margin-left: auto; padding-right: 0%; padding-left: 0%; }

.left1{ float: left; width: 19%; padding-right:  1%;}
.right9{ float: right; width: 79%; padding-left:  1%;}
.left9{ float: left; width: 79%; padding-right:  1%;}
.right1{ float: right; width: 19%; padding-left:  1%;}
	
}


@media screen and (max-width: 480px){
	
/* 2カラム・box */
.col2{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;}
.left5, .right5, .left3, .right7, .left7, .right3, .left6, .right4, .left4, .right6, .left2, .right8, .left1, .right9
{ float: none; width: 100%; margin-right: auto; margin-left: auto; padding-right: 0%; padding-left: 0%; }

.left5 img, .right5 img, .left3 img, .right7 img, .left7 img, .right3 img, .left6 img, .right4 img, .left4 img, .right6 img, .left2 img, .right8 img
{ width: 75%;}
	
.left1 img, .right9 img
{ width: 40%;}	
}
	
/*------------------------------------------------------------
	　	table
------------------------------------------------------------*/
/* 会社概要 */
.table1{ font-size: 1.6rem; letter-spacing: 0.05em;  line-height: 1.6; width: 100%; margin: 1rem auto;}
.table1 th{ text-align: center; vertical-align: middle; color: #FFFFFF; background: #ABA29A;}
.table1 td{  background: #F7F7F4;}
.bg_beige .table1 td{ background: #FFFF;}

.table1w{ font-size: 1.6rem; letter-spacing: 0.05em;  line-height: 1.2; width: 100%; margin: 1rem auto;}
.table1w th{ text-align: center; vertical-align: middle; color: #FFF; background: #64C3CD;}
.table1w .glay th{ background: #666;}
.table1w td.Day{ background: #ADDFE4;}
.table1w td{ background: #FFF;}
.table1w .glay td{ background: #F4F4F4; color: #000;}


/* 色背景用　白テーブル */
.table2{ font-size: 1.4rem; letter-spacing: 0.05em; text-align: left; line-height: 1.2; width: 100%; margin: 1rem auto; }
.table2 th{ text-align:left; vertical-align: middle; background: #FFF; color: #3294A5;}
.table2 td{ background: #FFF;}

/* クラス分け用色テーブル */
.table3{ font-size: 1.4rem; letter-spacing: 0.05em; text-align: left; line-height: 1.2; width: 100%; margin: 1rem auto; background: #FFF; border: solid 1px #FFF; }
.table3 th{ text-align:left; vertical-align: middle; text-align: center;}
.table3 td{ }


.sptable{display: none;}

@media(max-width: 480px){
	
/* 会社概要 */
.table1, .table1w, .table2, .table3{width: 95%;}
.table1 th, .table1 td, .table1w th, .table1w td, .table2 th, .table2 td, .table3 th, .table3 td{ width: 100%; display: block; text-align: center; word-break: break-all; border-bottom: #FFF solid 1px;}
.table1 th:empty, .table1 td:empty, .table1w th:empty, .table1w td:empty, .table2 th:empty, .table2 td:empty, .table3 th:empty, .table3 td:empty{display: none;} /* テーブルが空の場合は削除する（余白が入るので） がテーブルに入っていると動作しないので消す */
	.pctable{display: none;}
	.sptable{display: block;}
	.table3 {margin-bottom: 2rem;}
	.table3 th.bg_black{background: #AAA; font-size: 1.4rem; font-weight: 500;}

}

/* ------------------------------------------------------------
	　	凡用リスト
------------------------------------------------------------ */

ol{ list-style-position: inside; list-style: disc; width: auto; margin:0 1rem 0 ; text-align: left;}

ol li{  width: auto; margin-bottom:1rem; line-height: 1.8;}


dl{ 
	display: block;
	width: 90%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 1rem auto;
	text-align: left;
}

dt{ width: 100%; color: #FFF; background: #ABA29A;  margin:1rem auto; padding:0 1rem; letter-spacing: 0.2em; font-size: 2.0rem; font-weight: bold;}
dd{ width: 100%; color: #262124; font-weight: normal; margin:0rem 0rem 2rem 1rem; letter-spacing: 0.1em; font-size: 1.6rem;}

@media(max-width: 480px){
	dt{letter-spacing: 0em; font-size: 1.8rem; line-height: 1.2; padding: 0.5rem 0;}
}
/*------------------------------------------------------------
	　	title
------------------------------------------------------------*/
/* 大見出し activities / Design Competition */

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

@media (min-width: 1200px) {/* 1200px以上*/
    .title-head  {font-size: 3rem;/* 30px*/ }
}

@media screen and (max-width: 480px) {/* 480px以下*/
    .title-head{ font-size: 2rem;/* 2px*/}
}


/* 見出し ・「かぎかっこ」付き  */
.title-kagi { position: relative; line-height: 1.4; display: inline-block; padding:15px 30px;}

.title-kagi:before, .title-kagi:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

.title-kagi:before {
  border-left: solid 3px #333;
  border-top: solid 3px #333;
  top:0;
  left: 0;
}

.title-kagi:after {
  border-right: solid 3px #333;
  border-bottom: solid 3px #333;
  bottom:0;
  right: 0;
}
	
/* 見出し・アンダーライン(青)  */
.title-ul{ position: relative; border-bottom: 5px solid #FFF; margin-bottom: 20px; }

.title-ul:after{ 
	position: absolute; 
	content: ""; 
	display: block; 
	border-bottom: solid 5px #40AEC9; 
	bottom: -5px; width: 30%;
}

/* ブロックタイトル・背景グレー白文字 */
.title-block-g{ 
	margin-bottom: 10px; 
	background-color: #666; 
	text-align: center; 
	font-size: 1.6rem; 
	color: #FFF; 
	width: 100%; 
	height: auto; 
	line-height: 2.4; 
	font-weight: bold; 
}

/*------------------------------------------------------------
	　	Lines
------------------------------------------------------------*/
hr{ border-top: 1px solid #E6E6E6;}
hr.dot{ border-top: 1px dashed #37302D;}
hr.w{border-top: 2px solid #FFF;}

/* 太線 */
.bk-bold{	
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #333;
}


/*------------------------------------------------------------
	　	ボタン
------------------------------------------------------------*/

/* Blackボタン(背景：黒　枠なし）スタンダード　右:矢印アニメーション
　 ページ内ボタン　pdfへリンクなど
==================================================================== */
.btn-bk{ 
	position: relative; 
	width: auto; 
	max-width:300px;
	height: auto; 
	margin: 20px  auto 30px auto; 
	font-size: 1.5rem; 
	line-height: 1.5; 
	background-color: #37302D;
	padding:1rem 0rem 1rem  0px; 
}

.btn-bk::before {
	position: absolute;
	content: '';
	top: 50%;
	right: 1em;
	width: 13px;
	height: 2px;
	border-top: 2px solid #FFF;
	margin-top: -1px;
}

.btn-bk::after {
	position: absolute;
	content: '';
	top: 50%;
	right: 1em;
	width: 8px;
	height: 8px;
	border-top: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	margin-top: -5px;
}

.btn-bk a{ display: block; text-decoration: none!important; color: #FFFFFF!important;}

.btn-bk:hover { background-color: rgba(55,48,45,0.70);}
.btn-bk:hover::after, .btn-bk:hover::before { -webkit-animation: arrow03 .4s; animation: arrow03 .4s;}

/* whiteボタン(背景：白　枠なし）スタンダード　右:矢印アニメーション
　 ページ内ボタン　pdfへリンクなど
==================================================================== */

.btn-wh{ 
	position: relative; 
	width: auto; 
	max-width:300px;
	height: auto; 
	margin: 20px  auto 30px auto; 
	font-size: 1.5rem; 
	line-height: 1.5; 
	background-color: #F1F0EC;
	padding:1rem 0rem 1rem  0px; 
}

.btn-wh::before {
	position: absolute;
	content: '';
	top: 50%;
	right: 1em;
	width: 13px;
	height: 2px;
	border-top: 2px solid #37302D;
	margin-top: -1px;
}

.btn-wh::after {
	position: absolute;
	content: '';
	top: 50%;
	right: 1em;
	width: 8px;
	height: 8px;
	border-top: 2px solid #37302D;
	border-right: 2px solid #37302D;
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	margin-top: -5px;
}

.btn-wh a{ display: block; text-decoration: none!important; color: #37302D!important;}
.btn-wh:hover::after, .btn-wh:hover::before { -webkit-animation: arrow03 .4s; animation: arrow03 .4s;}

@-webkit-keyframes arrow03 {
  50% {
	right: 0.5em;
  }
  100% {
    right: 1em;
  }
}

@keyframes arrow03 {
  50% {
	right: 0.5em;
  }
  100% {
    right: 1em;
  }
}

/* Blackボタン(枠付）hoverアニメーション:黒 
   背景イメージ ナビボタン（ Product,information一覧  ）
==================================================================== */

.btn-bk-h{ 
	position: relative; 
	width: 100%;
	max-width: 450px;
	height: auto; 
	margin: 20px auto 30px;
	padding: 0;
	border: 1px solid #37302D;
	text-align: center; 
	z-index: 0;
}

.btn-bk-h.active{ 
	color: #FFFFFF;
	background-color: #C5C0BB;
	border: 1px solid #C5C0BB;
 }

.btn-bk-h a{ 
	position: relative; /* マウスオーバーの罫線アニメーションの基準 */
	display: block; 
	color: #333333; 
	text-decoration: none;
	width: 100%;
	height: 100%;
	z-index: 2;
 }

 
.btn-bk-h.bgf a{ 
	position: relative; /* マウスオーバーの罫線アニメーションの基準 */
	display: block; 
	text-align: center; 
	color: #FFFFFF; 
	text-decoration: none;
	width: 100%;
	height: 100%;
	z-index: 5;
 }

.btn-bk-h.active p{ 
	margin:0 auto;
	padding: 5px 10px 5px 5px;
	z-index: 5;
 }

.btn-bk-h a p, .btn-bk-h.bgf a p{ 
	padding: 0 auto;
	padding: 5px 8px 5px 5px;
	z-index: 5;
 }

.btn-bk-h a p.icon, .btn-bk-h.bgf a p.icon{ 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: flex;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
 }


.btn-bk-h.bgf a p.icon img{  max-width: 100px; max-height: 40px; padding-left: 0.5rem; padding-right: 0.5rem; -webkit-box-sizing: border-box; box-sizing: border-box;}

.btn-bk-h a::after {
	position: absolute;
	content: '';
	top: 50%;
	right: 0.5rem;
	width: 5px;
	height: 5px;
	border-top: 2px solid #37302D; /* 矢印 */
	border-right: 2px solid #37302D;
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	margin-top: -5px;
	z-index:4;
}

.btn-bk-h.bgf a::after {
	position: absolute;
	content: '';
	top: 50%;
	right: 0.5rem;
	width: 7px;
	height: 7px;
	border-top: 2px solid #FFFFFF; /* 矢印 */
	border-right: 2px solid #FFFFFF;
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	margin-top: -5px;
	z-index:4;
}

.btn-bk-h a:before {
	content:"";
	display:block;
	position:absolute;
	left:100%;
	right:100%;
	height:100%;
	z-index: -1;
	background-color:rgba(55,48,45,0.30);
	-webkit-transition:left 0.2s ease, right 0.2s ease; /* アニメーションのスピード */
	-o-transition:left 0.2s ease, right 0.2s ease;
	transition:left 0.2s ease, right 0.2s ease;
}

.btn-bk-h a:hover:before { left:0; right:0; }
.btn-bk-h a:hover{ color: #FFF; } /* 文字の色を反転 */
.btn-bk-h:hover::after{ border-top: 2px solid #FFF; border-right: 2px solid #FFF; } /* 矢印の色を反転 */


@media screen and (max-width: 480px) {/* 480px以下*/
    .btn-bk-h.active p{ letter-spacing:-0.05rem}
	.btn-bk-h a p, .btn-bk-h.bgf a p{ letter-spacing:-0.05rem}
}

/* ------------------------------------------------------------
	 アニメーション設定 / InView(アニメーションタイミング）
------------------------------------------------------------ */
/* InViewに設定 */
.fi{} /* fadeIn */
.fiu{} /* fadeInUp */
.sil{} /* slideInLeft */
.sir{} /* slideInRight */
.ridl{} /* rotateInDownLeft */
.ridr{} /* rotateInDownRight */


/* ------------------------------------------------------------
	　 Utility	text / margin
------------------------------------------------------------ */

/* 注釈 
========================================== */
.caption{ font-size: 1.4rem; line-height: 1.4; text-align: left; }

/* 字下げする(text-indent: 1em 左空） */
.indent{ padding-left: 1em!important; text-indent: -1em!important; } 

code{ display: inline-block; background: #CCC; width: 100%;}


/* float
========================================== */
.right{ float: right; }
.left{ float: left; }


/* 角丸　・　シャドウ
========================================== */
.round {border-radius: 5px;}

.shadow {
	-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0, 0.2);
	box-shadow: 3px 3px 5px 0px rgba(0,0,0, 0.2);
}

.Wshadow {
	-webkit-box-shadow: 3px 3px 5px 0px rgba(255,255,255, 0.5);
	box-shadow: 3px 3px 5px 0px rgba(255,255,255, 0.5);
}

/* 円形ボックス（flowなどの見出しに） 
========================================== */

.round_box { 
	position: relative;
	display: inline-block; 
	width:100%;
	height:100%; 
	min-width: 30px;
	min-height: 30px; 
	max-width: 60px;
	max-height: 60px; 
	border-radius:100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box; 
}

.round_box span{
	position: absolute;
	width:100%;
	height: auto; 
	top: 50%; 
	left: 50%; 
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	text-align: center;
	line-height: 1.2;
}
.round_box h2{
	display: block;
	margin: 0 auto 0.2rem auto;
	font-size: 1.6rem;
	line-height:1.1; 
}
	

.round_box img{
	display: block;
	margin: 0 auto 0.5rem auto;
}


@media screen and (max-width: 480px){
	.round_box { max-width: 45px; max-height: 45px; }
	.round_box p{margin:0.5rem 0 0 -0.2rem; line-height: 1; }
}

/* 見出しno用円形ボックス（flowなどの見出しに） 
========================================== */

.midashi_No{ position: relative; overflow: visible;  width: 40px; height: 10px; margin: 0;}

.round_Mbox { 
	position: absolute; top: 0rem; left: -2.5rem;
	display: block; 
	width:60px;
	height:60px;
	text-align: center; 
	border-radius:100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box; 
	-webkit-transform: rotate(-25deg); 
	    -ms-transform: rotate(-25deg); 
	        transform: rotate(-25deg);
}

.round_Mbox span{
	position: absolute;
	width:100%;
	height: auto; 
	top: 50%; 
	left: 50%; 
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	text-align: center;
}

@media screen and (max-width: 769px){
	.round_Mbox br{ display: block;}
}

@media(max-width: 480px){
	.flow .midashi_No{ position: absolute; top:-0.5rem; left:-2.5rem;}
	.flow .round_Mbox  { min-width:45px; min-height:45px;}
	.round_box br{ display: block;}
	.round_Mbox br{ display: block;}
}


.round_Mbox h3{
	display: block;
	margin: 0 auto 0.2rem auto;
	font-size: 1.6rem;
	line-height:1.1; 
}
	
.round_Mbox img{
	display: block;
	margin: 0 auto 0.5rem auto;
}
	
	
/* margin
========================================== */
/* margin-top */
.-mt { margin-top: -1rem; }
.mt0 { margin-top: 0; }
.mt1 { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }
.mt3 { margin-top: 3rem; }
.mt4 { margin-top: 4rem; }
.mt5 { margin-top: 5rem; }



/* margin-bottom */
.mb0 { margin-top: 0; }
.mb1 { margin-bottom: 1rem; }
.mb2 { margin-bottom: 2rem; }
.mb3 { margin-bottom: 3rem; }
.mb4 { margin-bottom: 4rem; }
.mb5 { margin-bottom: 5rem; }
.mb8 { margin-bottom: 8rem; }

/* margin-left */
.ml1 { margin-left: 1rem; }
.ml2 { margin-left: 2rem; }
.ml3 { margin-left: 3rem; }
.ml4 { margin-left: 4rem; }
.ml5 { margin-left: 5rem; }

/* margin-right */
.mr1 { margin-right: 1rem; }
.mr2 { margin-right: 2rem; }
.mr3 { margin-right: 3rem; }
.mr4 { margin-right: 4rem; }
.mr5 { margin-right: 5rem; }


/* padding-top */
.pt0 { margin-top: 0; }
.pt1 { padding-top: 1rem; }
.pt2 { padding-top: 2rem; }
.pt3 { padding-top: 3rem; }
.pt4 { padding-top: 4rem; }
.pt5 { padding-top: 5rem; }

/* padding-bottom */
.pb0 { margin-bottom: 0; }
.pb1 { padding-bottom: 1rem; }
.pb2 { padding-bottom: 2rem; }
.pb3 { padding-bottom: 3rem; }
.pb4 { padding-bottom: 4rem; }
.pb5 { padding-bottom: 5rem; }

/* padding-left */
.pl1 { padding-left: 1rem; }
.pl2 { padding-left: 2rem; }
.pl3 { padding-left: 3rem; }
.pl4 { padding-left: 4rem; }
.pl5 { padding-left: 5rem; }

/* padding-right */
.pr1 { padding-right: 1rem; }
.pr2 { padding-right: 2rem; }
.pr3 { padding-right: 3rem; }
.pr4 { padding-right: 4rem; }
.pr5 { padding-right: 5rem; }

/* padding-all */
.pa0 { padding: 0; }
.pa05 { padding: 0.5rem; }
.pa1 { padding: 1rem; }
.pa2 { padding: 2rem; }
.pa3 { padding: 3rem; }
.pa4 { padding: 4rem; }
.pa5 { padding: 5rem; }
	

/* text
========================================== */

/* text size */
.t11{ font-size: 1.1rem; letter-spacing: 0.1em;  line-height: 1.4; }
.t12{ font-size: 1.2rem; letter-spacing: 0.1em;  line-height: 1.5; }
.t13{ font-size: 1.3rem; letter-spacing: 0.1em;  line-height: 1.5; }
.t14{ font-size: 1.4rem; letter-spacing: 0.1em;  line-height: 2.0; }
.t15{ font-size: 1.5rem; letter-spacing: 0.1em;  line-height: 2.0;  }
.t16{ font-size: 1.6rem; letter-spacing: 0.1em;  line-height: 2.0;  }
.t18{ font-size: 1.8rem; letter-spacing: 0.1em;  line-height: 1.5;  }

/* レスポンシブ対応の文字サイズ指定*/

.t20{ 
	font-size: 20px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.48rem) * -0.2778));/* 18px~20pxで可変*/
	 letter-spacing: 0.1em;  line-height: 1.5;
}

.t25{ 
	font-size: 20px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.5rem + ((1vw - 0.48rem) * -0.6944));/* 20px~25pxで可変*/
	line-height: 1.3;
}

.t30{ 
	font-size: 25px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(3rem + ((1vw - 0.48rem) * -1.3889));/* 20px~30pxで可変*/
	line-height: 1.3;
}

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

.btn_t{ 
	font-size: 16px;/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(1.6rem + ((1vw - 0.48rem) * -0.5556));/* 12px~16pxで可変*/
	line-height: 1.2;
}

@media screen and  (min-width: 1200px) {/* 1200px以上*/
	.t20  {font-size: 2rem;/* 20px*/ }
	.t25  {font-size: 2.5rem;/* 25px*/ }
    .t30  {font-size: 3rem;/* 30px*/ }
	.t40  {font-size: 4rem;/* 40px*/ }
	.t50  {font-size: 5rem;/* 50px*/ }
	.btn_t{ font-size: 1.6rem;/* 16px */}
}

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

@media screen and  (max-width: 480px) {/* 480px以下*/
	.t16{ font-size: 1.6rem; letter-spacing: 0em;  line-height: 1.6;  }
	.t20{ font-size: 1.8rem;/* 18px*/}
	.t25{ font-size: 2rem;/* 20px*/}
    .t30{ font-size: 2rem;/* 20px*/}
	.t40{ font-size: 2.5rem;/* 25px*/}
	.t50{ font-size: 3rem;/* 30px*/}
	.btn_t{ font-size: 1.2rem;/* 12px*/}
}

/* 字間を狭く */
.letter_ss{letter-spacing: -0.15em; }
.letter_s{letter-spacing: -0.05em; }
.letter_l{letter-spacing: 0.1em; }

/* text align */
.texL { text-align: left; }
.texC { text-align: center; }
.texR { text-align: right; }

@media screen and (max-width: 480px){
	.sp_texC { text-align: center; }
}

/* text shadow */
.t_shadow{text-shadow: 1px 1px 5px rgba(0,0,0,0.8); }
.t_shadowW{text-shadow: 1px 1px 2px rgba(255,255,255,1), -1px -1px 4px rgba(255,255,255,1); }


/* ------------------------------------------------------------
	　	Web Font
------------------------------------------------------------ */
/* adobe Fonts */
.kozu_G_R{font-family: kozuka-gothic-pr6n, sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.05rem;}
.kozu_G_M{font-family: kozuka-gothic-pr6n, sans-serif; font-weight: 500; font-style: normal; letter-spacing: 0.05rem;}
.kozu_G{font-family: kozuka-gothic-pr6n, sans-serif; font-style: normal; font-weight: 700; letter-spacing: 0.1rem;}
.kozu_M{font-family: kozuka-mincho-pr6n, serif; font-style: normal; font-weight: 500;}


/* ------------------------------------------------------------
	　	Font　 weight
------------------------------------------------------------ */
.fb_L{font-weight: 300;}
.fb_M{font-weight: 500;}
.fb_B{font-weight: bold;}


.Italic{font-style: italic}

/* ------------------------------------------------------------
	　	color
------------------------------------------------------------ */	
.white  { color: #FFF; }
.bk     { color: #333; }
.brown  { color: #53382D; }
.beige  { color: #A88476; }
.red    { color: #B75151; }
.blue   { color: #3294A5; }

/* ------------------------------------------------------------
	　	背景色
------------------------------------------------------------ */	
.bg_black  { background: #666; color: #FFFFFF;}
.bg_white  { background: #FFFFFF; }
.bg_glay   { background: #DDDDDD; }
.bg_brown  { background: #81767B;}
.bg_beige  { background: #F1F0EC; }
.bg_blue   { background: #91A5B5; }
.bg_pink   { background: #C6959C; }
.bg_yellow { background: #BFA386; }
.bg_green { background: #67BC74; }

.bg_white2  { background:  rgba(255,255,255,0.80) }
.bg_glay2   { background: #F6F6F6; }


/* グラデ背景 */
.grd_bg01{ background-image: -o-linear-gradient( 290deg, #DBF2F4 10%, #E8F1D6 100%); background-image: linear-gradient( 160deg, #DBF2F4 10%, #E8F1D6 100%);}
/*------------------------------------------------------------
		clearfix
------------------------------------------------------------*/

/* clearfix・IE8以降をサポート */

.cf:before,
.cf:after {
	display: table;
	content: " ";
}
.cf:after {
	clear: both;
}

.contents:after, .wrapper-bk:after, .cbox:after,.Lbox:after, .col2:after, 
.left5:after, .right5:after, .left3:after, .right7:after, .left7:after, .right3:after, 
.left6:after, .left4:after, .left4:after, .left6:after,  .left2:after, .left8:after,
ul.col3:after, ul.col4:after, .finner:after, 
header:after, .hinner:after, header .contact:after, header .language ul li:after
{ content: ""; display: block; clear: both; }