@charset "utf-8";
/* ================================================================
 株式会社　ソーフィールド
 admin  : Masako Yoshimoto
 Author: Graphics Drive Inc.
 Author URI: https://www.graphics-drive.com/
 update : 2020/07/28--2025/04/24 一部リニューアル
 
 基本レイアウトcss
------------------------------------------------------------------- 

コンテンツ
汎用box
見出し
汎用カラム
トップページ
コンセプト
main画像
4つのスタイル（施工事例）/asian european modern natural
ショールーム
点検・保証・安心メンテナンス
こだわり仕様
お問い合わせ・来場予約
sitemap
privacy

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

.teian{ width: 100%; max-width: 1400px; margin: 0 auto; text-align: center;}

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

#wrapper { width: 100%;margin: 0; padding: 0; }
#wrapper02 { width: 100%; margin: 0; padding: 0; background-color: #EEE; }

/* 各ページのコンテンツ枠・fixメニュー分top160px空ける */
#contents{ width: 100%; max-width: 980px; margin: 0 auto 0px; padding-top: 30px;}

/* 各ページのコンテンツ枠・空けない */
#contents2{ width: 100%; max-width: 980px; margin: 0 auto 0px;}

/* コンテンツ w980 */
.inner{width: 100%; max-width: 980px; display: block; margin: 0 auto; }


/* ------------------------------------------------------------
		コンテンツ・見出し・共通
------------------------------------------------------------ */

/* メインタイトル */
#title-box{ width: 100%; max-width: 980px; margin: 0 auto 0px; padding-top: 30px; }

/* パンくずリスト */
ul.breadcrumb { 
	margin-top: 80px; 
	
	/* レスポンシブでテキストを改行しないようにする */
    word-break: keep-all;
    white-space: nowrap;
 
    /* スクロールの動きを滑らかにする */
    -webkit-overflow-scrolling: touch;
}
ul.breadcrumb li { display: inline-block; font-size: 12px; color: #999;}
ul.breadcrumb li:not(:first-child) { margin-left: 0.4em; }
ul.breadcrumb li:not(:first-child):before {
  content: '>';
  margin-right: 0.4em;
}

.logo h1{ font-size: 11px; line-height: 1.2em; color: #666; font-weight: normal; }

/* ------------------- 汎用box　---------------------------- */

.center-box{ width: 100%; max-width: 980px; display: block; text-align: center; clear: both; margin: 30px auto; }
.center-box img{ margin-right: auto; margin-left: auto;}

/* 枠付き */
.line-box{ display: block; margin-bottom: 30px; border: 1px solid #333; padding: 10px; box-sizing:border-box;}

@media(max-width: 768px){ 
    
#title-box{
    width: 90%;
    }

ul.breadcrumb { 
	margin-top: 30px;
    }

.line-box{ float: none!important; width: 95%!important; padding: 10px!important; margin-right: 10px; margin-left: 10px; }

}

/* 枠付きのセンター合わせ */
.waku-box{ display: block; text-align: center; margin-bottom: 30px; clear: both; border: 1px solid #CCC; padding: 10px; }
.waku-box h2{ font-size: 1.6em; }

/* 左寄せbox */
.cbox{ width: 100%; margin-right: auto; margin-left: auto; clear: both; margin-top: 30px; margin-bottom: 30px; }
.Lbox{ width: 100%; clear: both; margin-top: 30px; margin-bottom: 30px; }

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

/* 大見出し / 各ページのヘッダー画像の上の文字   */
.title-head{ font-size: 3.3em; line-height: 3;}

.title-sub{ font-size: 2.8em; line-height: 1; }

.title-list{ margin-bottom: 2em; font-size: 2.1rem; text-align: center;}

.subtext{ font-size: 1.6em; line-height: 1.6; }

@media(max-width: 600px){
	
.title-sub{ font-size: 2.2em; line-height: 1.4; }

}

/* 各ページのトップの見出し */
.main-title{ width: 100%; max-width: 980px; display: block; text-align: center; clear: both; margin: 30px auto; }
.main-title h2{ font-size: 3.2em; line-height: 1.6em; color: #666; margin: 0px; padding: 0px; }

/* トップの見出し下のラインアニメーション */
.movline{ animation: slidein; animation-duration: 2.5s; border-bottom: 5px solid #CCC; }

@keyframes slidein {
  from {
    margin-right: 100%;
    width: 0%; 
  }

  to {
    margin-right: 0%;
    width: 100%;
  }
}

/* 背景黒メッシュ白文字 / 会社情報 */
.title-bk{
	height: auto;
	width: 100%;
	margin-bottom: 30px;
	background-image: url(../images/black_bg.gif);
	background-repeat: repeat;
}

.title-bk h2{
	font-size: 1.8em;
	line-height: 2em;
	color: #fff;
	margin-right: 10px;
	margin-left: 10px;
}

/* 左ボーダー＋下線付きtitle / コンセプト・安心のシステム */
h2.title-lu{ font-size: 2.4em; line-height: 1.4em; font-family: "Sawarabi Mincho"; color: #666; }
h2.title-lu{
	position: relative; 
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #A1CC00;
}

h2.title-lu:after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}

h2.title-lu em{
	font-style: normal;
}

h2.title-lu span{ font-size: 14px; letter-spacing: 0.1em; font-family: initial; font-weight: normal; margin-left: 10px; }/* font継承しない */


/* 緑○付きタイトル（10px）/ コロナ保証 */
h3.title-circle{ position: relative; font-size: 2.4em; padding-left: 30px; font-family:Times New Roman; color: #666; }

h3.title-circle:before{
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background: none;
	border: 5px solid #A1CC00;
	border-radius: 70px;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	margin-top: 10px;
	margin-left: -30px;
}

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

/* 文字の頭を揃える */
p.ind{padding-left: 1em; text-indent:-1em;}

/* 黒枠ボタン/下:border 右:矢印アニメーション/トップページ特設枠 */	 
.btn-gwaku{ 
	position: relative; 
	width: 100%; 
	height: auto; 
	margin: 20px auto 30px; 
	font-size: 1.7em; 
	line-height: 3; 
	border: 5px solid #333; 
}

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

.btn-gwaku a{ display: block; text-decoration: none!important; color: #333!important; font-weight: bold;}
.btn-gwaku:hover{ color: #333!important; background-color: none; }

.btn-gwaku:hover::after { animation: arrow04 .4s;}

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

/* ボタン・緑 */
.btn-green { 
	position: relative; 
	display: inline-block; 
	width: 100%; 
	height: 50px; 
	text-align: center; 
	line-height: 50px; 
	background: #8BC03E; /* Greeen */ 
	font-weight: bold; 
	border-radius: 10px; 
	text-decoration: none; 
	box-sizing: border-box; 
	padding-right: 4em; 
	padding-left: 4em; 
}

.btn-green::after {
	position: absolute;
	content: '';
	top: 50%;
	right: 3em;
	width: 7px;
	height: 7px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: rotate(45deg);
	margin-top: -5px;
}

.btn-green a{ display: block; text-decoration: none!important; color: #FFF!important; font-size: 1.8em; font-weight: bold;}
.btn-green:hover{ color: #FFF; background-color: #000; }

.btn-green:hover::after { animation: arrow02 .4s;}

@keyframes arrow02 {
  50% {right: 2.5em;}
  100% {right: 3em;}
} 

/* ボタン・緑・↓ */
.btn-greenU { 
	position: relative; 
	display: inline-block;
	width: 100%; 
	text-align: center; 
	line-height: 3; 
	color: #FFF;
	background: #8BC03E; /* Greeen */ 
	font-weight: bold; 
	border-radius: 10px; 
	text-decoration: none; 
	box-sizing: border-box; 
	padding-right: 4em; 
	padding-left: 4em; 
}

.btn-greenU::after {
	position: absolute;
	content: '';
	top: 50%;
	right: 3em;
	width: 7px;
	height: 7px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: translateY(-25%) rotate(135deg);
	margin-top: -5px;
}

.btn-greenU a{ 
	display: block; 
	text-decoration: none!important; 
	font-size: 1.6rem; 
	font-weight: bold;
}
.btn-greenU:hover{ color: #FFF; background-color: #666; }



/* ------------------- clearfix　---------------------------- */

#contents:after, #contents2:after, #contents-top:after, .center-box:after, .cbox:after, .Lbox:after, .bg-online:after, .col2:after, 
.left50:after, .right50:after, .left50c:after, .right50c:after, .left30:after, .right70:after, .left70:after, .right30:after, 
.left60:after, .left40:after, .left40:after, .left60:after,  .left20:after, .left80:after, .right20:after,
ul.col2:after, ul.col3:after, ul.col3-fix:after, ul.col4:after{content: ""; display: block; clear: both;}

/* ------------------- 汎用カラム　---------------------------- */

/* 2カラム・box */
.col2{width: 100%; margin-bottom: 20px;}

.left50{ float: left; width: 49%; padding-right: 10px; box-sizing:border-box;}
.right50{ float: right; width: 49%; padding-left: 10px; box-sizing:border-box;}

/* 2カラム・センター合わせ/来場予約 */
.left50c{ float: left; width: 49%; padding-right: 10px; box-sizing: border-box; text-align: center;}
.right50c{ float: right; width: 49%; padding-left: 10px; box-sizing:border-box; text-align: center;}

/* 2カラム・画像 */
.right50c img, .left50c img{max-width: 100%; height: auto; margin-right: auto; margin-left: auto; }
.right50 img, .left50 img, .left30 img, .right70 img, .left70 img, .right30 img, .right20 img{ max-width: 100%; height: auto;}

/* 2カラム・3:7 */
.left30{ float: left; width: 29%; padding-right: 10px; box-sizing:border-box;}
.left70{ float: left; width: 69%; padding-right: 10px; box-sizing:border-box;}

.right30{ float: right; width: 29%; padding-left: 10px; box-sizing:border-box;}
.right70{ float: right; width: 69%; padding-left: 10px; box-sizing:border-box;}

/* 2カラム・4:6 */
.left60{ float: left; width: 59%; padding-right: 10px; box-sizing: border-box; clear: both;}
.right40{ float: right; width: 39%; padding-left: 10px; box-sizing:border-box;}

.left40{ float: left; width: 39%; padding-right: 10px; box-sizing:border-box;}
.right60{ float: right; width: 59%; padding-left: 10px; box-sizing:border-box;}

/* 2カラム・2:8 */
.left20{ float: left; width: 19%; padding-right: 10px; box-sizing:border-box;}
.right80{ float: right; width: 79%; padding-left: 10px; box-sizing:border-box;}

.left80{ float: left; width: 79%; padding-right: 10px; box-sizing:border-box;}
.right20{ float: right; width: 19%; padding-left: 10px; box-sizing:border-box;}


/* ------------------- 汎用list　---------------------------- */

/* 2カラム・list */
ul.col2{width: 100%; margin-bottom: 20px;}
ul.col2 li{
	float: left;
	width: 49%;
	height: auto;
	display: block;
	padding-right: 1%;
	list-style-type: none;
	text-align: center;
}
ul.col2 li:nth-child(2n){ padding-right: 0; }
ul.col2 li p{ text-align: center; letter-spacing: 0em;}
ul.col2 li img{ max-width: 100%; height: auto; margin-right: auto; margin-left: auto; }

/* 3カラム・list/　Zoom無し */
ul.col3n{ width: 100%; padding-bottom: 50px; display: block;}
ul.col3n li{
	float: left;
	width: 32%;
	height: auto;
	display: block;
	padding-right: 2%;
	padding-bottom: 2%;
	list-style-type: none;
}
ul.col3n li:nth-child(3n){ padding-right: 0; }
ul.col3n li p{ text-align: center; letter-spacing: 0em;}

/* 4カラム・list */
ul.col4{ width: 100%; margin-bottom: 30px;}

ul.col4 li{
	float: left;
	width: 24%;
	height: auto;
	display: block;
	padding-right: 1.2%;
	list-style-type: none;
	text-align: center;
}

ul.col4 li:nth-child(4n){ padding-right: 0; }
ul.col4 li p{ text-align: center; letter-spacing: 0em;}
ul.col4 li img{ max-width: 100%; height: auto; margin-right: auto; margin-left: auto; }


/* 2カラム・Flexbox
==========================================
カラムとカラムの間（列間）を10px空けています。
子カラムの中に余白が必要な場合は＋.pa1(10px)などを指定して下さい。
 */

.col2-f { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
 column-gap:10px;
}

.col2-f img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 1:1 子アイテムの均等割 */
.f1{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}

/* 5:5 50%  */
.f5{ -webkit-box-flex: 5; -ms-flex: 5; flex: 5;}

/* 3:7 */
.f3{ -webkit-box-flex: 3; -ms-flex: 3; flex: 3;}
.f7{ -webkit-box-flex: 7; -ms-flex: 7; flex: 7;}

/* 4:6 */
.f4{ -webkit-box-flex: 4; -ms-flex: 4; flex: 4;}
.f6{ -webkit-box-flex: 6; -ms-flex: 6;flex: 6;}

/* 2:8 */
.f2{ -webkit-box-flex: 2; -ms-flex: 2; flex: 2;}
.f8{ -webkit-box-flex: 8; -ms-flex: 8;flex: 8;}

/* Flexbox内の要素の真ん中合わせ/justify-content: center;  */
.center {
  -webkit-box-pack: center;
   -ms-flex-pack: center;
	justify-content: center;
}

@media screen and (max-width: 768px){
	
.col2-f { 
		-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;
	column-gap:0;
}

.f1, .f5, .f3, .f7, .f4, .ft6, .f2, .f8{ width: 100%; }

/* 画像真ん中合わせ/justify-content: center;  */
.col2-f img {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	max-width: 100%;
	height: auto;
	display: block;
	margin-bottom: 20px;
}

}


/* list  Flexbox
========================================== */

/* 折り返し有りで複数行に配置、左から右へ */ 
.list-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	row-gap: 20px; /* 縦の余白 */
}

.f1{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}

/* -------- 3カラムリスト  --------- */
.list-col3{
	width: 31%;
	height: auto;
	margin-bottom: 30px;
	padding: 10px;
}

.list-col3 p{text-align: center;}

@media(max-width: 768px){ 
    .list-col3{ width: 95%; margin-bottom: 3%; margin: auto;}
	.list-col3 img {justify-content: center!important; margin: auto;}
}

/* w480以下で１列にしたい時
@media screen and (max-width: 480px){

.list-wrap {
	-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		row-gap: 10px; /* 縦の余白 
}

} */ 

/* --------------------------------------------------------------------------
		トップページ
		2024.1.リニューアル
-------------------------------------------------------------------------- */


/* 背景画像切り替えスライダー(vegas）
============================================================================= */
.slider-bg { width: 100vw; height: 50vw; margin: 0; padding: 0; } 


 @media screen and (max-width: 600px) { .slider-bg { width: 100vw; height: 75vw; margin: 0; padding: 0; } }
 
/* 背景画像上のキャッチコピー  */
.catch{ position: relative; max-width: 980px; margin-right: auto; margin-left: auto; margin-top: 150px; text-align: center; }
.catch h2{ color: #FFF; font-size: 40px; text-shadow: 1px 2px 3px #333;}
.catch p{ color: #FFF; font-size: 25px; text-shadow: 1px 2px 3px #333;}

 @media screen and (max-width: 768px) { 
 .catch{ margin-top: 100px;}
 .catch h2{ font-size: 30px; }
 .catch p{font-size: 15px; }
 }
 
 
/* concept(パララックス風）スタイルの説明 */
.concept{
	width: 100%; 
	min-height: 570px;
	color: #FFF;
	text-align: center;
	padding-top: 60px; 
	background-image: url(../images/para.jpg); 
	background-repeat: no-repeat; 
	background-size:cover;
	background-position: center center;
	background-attachment: fixed;
}
 
/* 見出し・アンダーライン(赤)  */
.title-ul{ position: relative; border-bottom: 3px solid #000;  margin-bottom: 50px; }

.title-ul:after{ 
	position: absolute; 
	content: ""; 
	display: block; 
	border-bottom: solid 3px #EC1A0F; 
	width: 20%;
}

.concept h2{ font-size: 24px; color: #333; font-weight: normal; }

@media(max-width: 768px){
	
.title-ul{
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

}



/* ボタン(斜線グレー）/ 右:矢印アニメーション 
==================================================================== */

.btn-sg{
	position: relative;
	width: 250px;
	height: auto;
	font-size: 14px;
	letter-spacing: 0;
	line-height: 3;
	background-color: #333;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
	background: repeating-linear-gradient(-45deg,#888,#888 1px,#666 0,#666 5px);
}

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

.btn-sg a{ padding-left: 10px; display: block; text-decoration: none!important; color: #FFF!important;}

.btn-sg a:hover{ 
	background:repeating-linear-gradient(-45deg,#666,#666 1px,#000 0,#000 5px); 
	color: #FFF!important;
}

.btn-sg:hover::after { animation: arrow03 .4s;}

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

/* 画像のhoverアニメーション
========================================== */
 
.sample-img {
  cursor: pointer;
  position: relative;
  width: 100%;
}
.sample-img img {
  height: auto;
  width: 100%;
}
.hover-mask {
  align-items: center;/* テキストの中央揃え */
  background: rgba(0, 0, 0, .5);/* マスクの色(黒の50%) */
  bottom: 0;
  color: #FFF!important;/* テキストの色 */
  display: flex;/* テキストの中央揃え */
  height: auto;
  justify-content: center;/* テキストの中央揃え */
  left: 0;
  opacity: 0;/* 最初は透明（非表示） */
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .6s ease;/* ゆっくりopacityのみへ変化させる */
  width: 100%;
}
.hover-mask:hover {
  opacity: 1;/* hoverしたら透過しない(表示させる) */
  padding-bottom: 10px;
  transition: .6s ease-in-out;
}
.hover-mask p {
  color: #FFF!important;
  font-family: "Sawarabi Mincho"!important;
}

/* 画像のhoverアニメーション：疑似j要素に文字を入れる場合
==========================================
.h-bg{ 
	position: relative;
	overflow: hidden; 
}

.h-bg::before,
.h-bg::after {
  content: "";
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  margin: auto;
  transition: .6s cubic-bezier(0.45, 0, 0.55, 1);
  opacity: 0;
}

.h-bg::before {
  background: rgba(0,0,0,.9);
  width: 100%;
  height: 100%;
}

/* 疑似要素の文字の改行　\A を入れ　white-space: pre;を記述する
.h-bg::after {
	color: #FFF;
	content: "クリエィティブモダン\A Creative Modern House";
	white-space: pre;
	font-size: 16px;
	font-weight: normal;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	bottom: 0;
	right: 0;
}
 
.h-bg:hover::before,
.h-bg:hover::after {
	opacity: 1;
	padding-bottom: 10px;
} 
==========================================*/



/*  -------- 4カラムリスト / .list-wrapの中に入れる  --------  */
.list-col4{
	position: relative;
	display: block;
	width: 24%;
	height: auto;
	text-align: center;
	margin-right: 1%;
	margin-bottom: 2%;
}

.list-col4 h3{
	font-size: 16px;
	font-family: 'Klee One', cursive;
	text-align: center;
	line-height: 1;
}

.list-col4 p{
	font-size: 14px;
	font-family: 'Klee One', cursive;
	text-align: center;
	color: #333;
	line-height: 1;
}

@media(max-width: 768px){ 

.list-col4{ width: 48%;}

.wrapper-dark .leaf img{ width: 200px;}

.flower{ padding-bottom: 90px;}

.flower .leaf img{ width: 150px; }

}

@media(max-width: 600px){ 

.wrapper-dark{ padding-bottom: 80px;}

.list-col4{ width: 48%; }

.wrapper-dark .leaf img{ width: 150px; bottom: 0px;}

.flower .leaf img{
	width: 120px;
	bottom: -50px;
	padding-top: 20px;
	margin-top: 50px;
}


}

/* トップページ(パララックス風）ショールームの説明 */
.showroom{
	width: 100%; 
	min-height: 450px;
	color: #FFF;
	text-align: center;
	padding-top: 60px; 
	background-image: url(../images/para2.jpg); 
	background-repeat: no-repeat; 
	background-size:cover;
	background-position: center center;
	background-attachment: fixed;
}

.showroom h2{
	font-size: 47px;
	color: #FFF;
}

.showroom span{
	font-size: 13px;
	color: #FFF;
	font-weight: normal;
}

.showroom p{
	font-size: 18px;
	color: #FFF;
	text-align: left;
}

@media(max-width: 768px){ 
.showroom h2{
	line-height: 20px;
}
.showroom p{ width: 90%; margin: 0 auto;}
.showroom p br { display: none; }/* brの改行をさせない */
}

/* トップページの見出し・Owner’s House */
.top-title{ width: 100%; max-width: 980px; display: block; text-align: center; clear: both; margin: 30px auto; }
.top-title h2{ font-size: 4.5em; line-height: 1.6em; margin: 0px; padding: 0px; }


/* slick slider の ul li　の中に入る施工事例のレイアウト
   .sliderArea の li の中　/ 基本設定は「slick.css」に記載
=========================================================================== */

.sliderArea li p{
	font-size: 12px;
	min-height: 80px;/* 文字の量が違うのでガタガタするのを防止 */
	text-align: center;
}
.sliderArea li h3{
	font-size: 13px;
	text-align: center;
	margin-top: 10px;
}

.sliderArea li .btn-sg{
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}

@media(max-width: 600px){ 
.sliderArea li p{
	font-size: 15px;
}
}


/* トップページのNEWS / flexbox
=========================================================================== */
.news2 { 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: flex;
}

/* .news2 .f5{ -webkit-box-flex: 5; -ms-flex: 5; flex: 5;}  50%にする場合 */

.news2 dl{width: 100%;}

/* clear: left で回り込みを解除  */
.news2 dt{ font-size: 14px; float: left; clear: left; margin-top: 25px;}

/* padding-leftで改行しても文字の先頭を合わせる  */
.news2 dd{ border-bottom: 1px dotted #887A4F; padding-top: 5px; padding-bottom: 5px; padding-left: 150px; }

.news2 dl dd h2{
	font-size: 14px;
	margin-top: 15px;
	font-weight: normal;
}

.news2 dl dd a{ color: #333; text-decoration: none; }
.news2 dl dd a:hover{ color: #8BC03E;}

/* newアイコン / トップページ・ニュース一覧 / em で指定 */
.news2 dl dt em{
	font-size: 10px;
	background-color: #E03C08;
	color: #FFF;
	margin-left: 10px;
	font-style: normal;
	font-weight: bold;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	margin-right: 10px;
}

/* news タイトル横並び */

.title-news{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: flex-start;
}

.news2 h3{ margin-right: 20px; }

/* 小さいボタン */
.btn-b-s{
	position: relative;
	width: 130px;
	height: 30px;
	font-size: 13px;
	line-height: 2.3;
	background-color: #000;
	margin-top: 5px;
	text-align: center;
}

.btn-b-s::after {
	position: absolute;
	content: '';
	top: 50%;
	right: 1em;
	width: 7px;
	height: 7px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: rotate(45deg);
	margin-top: -5px;
}

.btn-b-s a{ display: block; text-decoration: none!important; color: #FFF!important;}
.btn-b-s:hover::after { animation: arrow04 .4s; color: #FFF!important;}

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

@media screen and (max-width: 768px){

.news2 { 
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
				width: 90%;	
}
.news2 dl dt{ float:none; width: 100%; }
.news2 dl dd{ width: 100%; padding-left: 0;}

}

/* 白枠付きボタン */
.btn-white{ 
	position: relative; 
	width: 300px; 
	height: auto; 
	border: 2px solid #FFF; 
	margin: 20px auto 30px; 
	line-height: 3; 
	font-family: Times New Roman;
	filter: drop-shadow(5px 5px 10px rgba(0,0,0,.8));
	-webkit-filter: drop-shadow(5px 5px 10px rgba(0,0,0,.8));
}

.btn-white::after {
	position: absolute;
	content: '';
	top: 50%;
	right: 3em;
	width: 7px;
	height: 7px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: rotate(45deg);
	margin-top: -5px;
}

.btn-white a{ display: block; text-decoration: none!important; color: #FFF!important; font-size: 18px; font-weight: bold;}
.btn-white:hover{ color: #FFF; background-color: none; }

.btn-white:hover::after { animation: arrow02 .4s;}

@keyframes arrow02 {
  50% {
	right: 2.5em;
  }
  100% {
    right: 3em;
  }
} 

/* イベント・コロナ対策バナー */
.bg-online{
	position: relative;
	width: 100%;
	background-color: #5C9B1C;
	color: #FFF;
	padding: 10px;
}

.bg-online h2{font-size: 19px;}
.bg-online p{color: #FFF; font-size: 15px; line-height: 1.2;}

@media(max-width: 768px){ 
.bg-online .left50, .bg-online .right50
{ float: none; width: 95%; margin-right: auto; margin-left: auto; padding: 20px;}
.bg-online img{
	width: 100%;
	max-width:100%;
	margin-right: auto;
	margin-left: auto;
}
}

/* イベント・コロナ対策ページ */
.g-top{ 
	width: 100%; 
	background-color: #519226; 
	text-align: center; 
	margin-top: -30px; 
	padding-top: 20px; 
	padding-bottom: 20px; 
}
.g-top h2{font-size: 1.8em; line-height: 2em; margin: 0px; padding: 0px; color: #FFF;}
.g-top p{font-size: 1.4em; line-height: 1.4em; margin: 0px; padding: 0px; color: #FFF;}

.g-top img, .g-box{ width: 100%; margin-right: auto; margin-left: auto; background-color: #dae5ad; }
.g-box img{ max-width: 100%; margin-right: auto; margin-left: auto;}
.y-box{ width: 100%; margin-right: auto; margin-left: auto; background-color: #fcf6b8; }
.taisaku{width: 100%; margin-bottom: 20px;}
.taisaku p{ font-size: 1.3em; letter-spacing: 0.1em; line-height: 1.4em; color: #333;}

.g-top .btn-white2{ 
	position: relative; 
	width: 100%; 
	height: auto; 
	border: 2px solid #FFF; 
	margin: 20px auto 30px; 
}

.g-top .btn-white2::after {
	position: absolute;
	content: '';
	top: 50%;
	right: 3em;
	width: 7px;
	height: 7px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: rotate(45deg);
	margin-top: -5px;
}

.btn-white2 a{ display: block; text-decoration: none!important; color: #FFF!important; font-size: 1.8em; line-height: 3em; font-weight: bold;}
.btn-white2:hover{ color: #FFF!important; background-color: #42771E; }

.g-top:after, .g-box:after, .y-box:after, .taisaku:after{content: ""; display: block; clear: both;} /* clearfix */

/* ------------------------------------------------------------
		フローディングCM 
------------------------------------------------------------ */

#floatingAd {
	position: fixed;
	background: #FFFFFF;
	bottom: -310px; /* 初期位置を画面外に設定 */
	right:0;
	width: 600px; height: 315px; margin:0; padding:0;
	-webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-transition: bottom 0.8s ease;
	-o-transition: bottom 0.8s ease;
	transition: bottom 0.8s ease; /* スライドインのアニメーション */
	z-index:7; 
}

#floatingAd.show {
  bottom:0rem; /* 表示時の位置 */
}

/* close button */
#closeAd {
	position: absolute;
	right:0;
	width: 30px; height: 30px;
	margin:0 0 0 auto;
	font-size:1.5rem; line-height: 1.3; text-align: center;
	background: #666666; color: #FFF;
	border: none;
    cursor: pointer;
	z-index:+1;
}
#closeAd:hover { cursor: pointer; background: #B20000;}
#closeAd.hidden { visibility: hidden;} /* closeボタンを隠す */

/* open button */
#openAd {
	visibility: hidden;
	position: absolute;
	right:0;
	width: 30px; height: 30px;
	margin:-30px 0 0 auto;
	font-size:1.5rem; line-height: 1.3; text-align: center;
	background: #999999; color: #FFF;
	border: none;
    cursor: pointer;
	z-index:10;
}

#openAd:hover { cursor: pointer; background: #B20000;}
#openAd.show  { visibility: visible;}/* openボタンを表示 */

@media(max-width: 980px){ 
	#floatingAd { bottom: -220px; /* 初期位置を画面外に設定 */}
	#floatingAd.show {bottom:5.5rem; /* 表示時の位置 */}
}

@media(max-width: 480px){ 
	#floatingAd { width: 95%; height: auto; margin:0; padding:0; bottom: -110px; /* 初期位置を画面外に設定 */}
}


/* ------------------------------------------------------------
		コンセプト
------------------------------------------------------------ */
/* Like a hotel */
#concept-h{
	width: 100%; 
	max-width: 100%;
	min-height: 300px;
	color: #FFF;
	text-align: center;
	padding-top: 70px;
	font-family: "Sawarabi Mincho"; 
	background-size: cover;
	background-image: url(../images/concept/main.jpg); 
	background-repeat: no-repeat; 
	background-position: center center;
}

#concept-h h2, #conceept-s h2{ 
	font-size: 3.6em; 
	line-height: 1.8em; 
	color: #FFF; 
	filter: drop-shadow(5px 5px 10px rgba(0,0,0,.8));
	-webkit-filter: drop-shadow(5px 5px 10px rgba(0,0,0,.8));
}

 #conceept-s p, #concept-h p{ 
	font-size: 1.8em; 
	line-height: 1.6em; 
	color: #FFF; 
	font-family: "Sawarabi Mincho"; 
	filter: drop-shadow(5px 5px 10px rgba(0,0,0,.8));
	-webkit-filter: drop-shadow(5px 5px 10px rgba(0,0,0,.8));
}

/* Harmony With Nature */
#conceept-s{
	width: 100%; 
	max-width: 100%;
	min-height: 300px;
	color: #FFF;
	font-family: "Sawarabi Mincho"; 
	text-align: center;
	padding-top: 20px;
	background-size: cover;
	background-image: url(../images/concept/green_bg.jpg); 
	background-repeat: no-repeat; 
	background-position: center center;
}

.style-box2:after{content: ""; display: block; clear: both;}
.style-box2{ 
	width: 100%; 
	max-width: 980px; 
	margin-right: auto; 
	margin-left: auto; 
	text-align: center; 
	padding-top: 30px;
}

.style-box2 h2, .showr h2{ font-size: 1.6em; line-height: 1.6em; font-family: "Sawarabi Mincho"; margin: 0px; padding: 0px; color: #666;}
.style-box2 h3, .showr h3{ font-size: 3.2em; line-height: 1.8em; font-family: Times New Roman; margin: 0px; color: #666;}

/* ------------------------------------------------------------
	main画像
------------------------------------------------------------ */
#main:after{content: ""; display: block; clear: both;}

#main{width: 100%; position: relative;}

#main .inner{ width: 980px; height: auto; border: 0; display: block; margin-right: auto; margin-left: auto; text-align: center;}

/* 背景画像の上の文字 */
#main p{ 
	position: absolute;
	width:980px;
	top: 30%;
	font-size: 1.7em; 
	line-height: 1.4em; 
	color: #FFF; 
	font-family: "Sawarabi Mincho"; 
	filter: drop-shadow(5px 5px 10px rgba(0,0,0,.8)); 
	-webkit-filter: drop-shadow(5px 5px 10px rgba(0,0,0,.8)); 
	text-align: left; 
}

.green-bg h2{ 
	position: absolute;
	width:980px;
	top: 10%;
	font-size: 3em;
	line-height: 1.8em; 
	color: #FFF; 
	font-family: Times New Roman; 
	font-family: "Sawarabi Mincho"; 
	filter: drop-shadow(5px 5px 10px rgba(0,0,0,.8)); 
	-webkit-filter: drop-shadow(5px 5px 10px rgba(0,0,0,.8)); 
	margin-right: auto; margin-left: auto; 
}

/* .green-bg h2{
	position: absolute;
	width: 90%;
	top: 10%;
	font-size: 3em; 
	line-height: 1.8em; 
	color: #FFF; 
	font-family: Times New Roman; 
	font-family: "Sawarabi Mincho";
	filter: drop-shadow(5px 5px 10px rgba(0,0,0,.8)); 
	-webkit-filter: drop-shadow(5px 5px 10px rgba(0,0,0,.8)); 
	text-align: center; 
}

/* 背景画像（背景画像の比率を保つ　padding-top: 20%;） */

/* works中トップ */
.m-works{ 
	width: 100%;
	height: 0;
	background-image: url(../images/works.jpg); 
	background-repeat: no-repeat; 
	background-position: center center; 
	background-size: cover;
	padding-top: 20%;
}

/* 4スタイル */
.m-4s{ 
	width: 100%;
	height: 0;
	background-image: url(../images/4series/main.jpg); 
	background-repeat: no-repeat; 
	background-position: center center; 
	background-size: cover;
	padding-top: 20%;
}

/* 高崎示場 */
.m-takasaki{ 
	width: 100%;
	height: 0;
	background-image: url(../images/takasaki/main.jpg); 
	background-repeat: no-repeat; 
	background-position: center center; 
	background-size: cover;
	padding-top: 20%;
}

/* 伊勢崎示場 */
.m-isesaki{ 
	width: 100%;
	height: 0;
	background-image: url(../images/isesaki/main.jpg); 
	background-repeat: no-repeat; 
	background-position: center center; 
	background-size: cover;
	padding-top: 20%;
}

/* 太田展示場 */
.m-ota{ 
	width: 100%;
	height: 0;
	background-image: url(../images/ota/main.jpg); 
	background-repeat: no-repeat; 
	background-position: center center; 
	background-size: cover;
	padding-top: 20%;
}

/* 新伊勢崎展示場 */
.green-bg{ 
	position: relative;
	width: 100%;
	height: 0;
	background-image: url(../images/new_isesaki/green.jpg); 
	background-repeat: no-repeat; 
	background-position: center center; 
	background-size: cover;
	padding-top: 20%;
}

/* ------------------------------------------------------------
	 施工事例 works　/ modern european natural original
------------------------------------------------------------ */

/* 3カラム・list */
ul.col3{ width: 100%; padding-bottom: 50px; display: block;}
ul.col3 li{
	float: left;
	display: inline-block;
	width: 32%;
	height: auto;
	display: block;
	padding-right: 2%;
	padding-bottom: 2%;
	list-style-type: none;
}
ul.col3 li a{
	display: block;
    width: 100%;
    height: auto;
    overflow: hidden;/* zoomで、はみ出した部分を非表示  */
}
ul.col3 li:nth-child(3n){ padding-right: 0; }
ul.col3 li p{ text-align: center; letter-spacing: 0em;}

/* zoomする画像の元の大きさ  */
ul.col3 img{ 
	width: 100%;
	height: auto;
}

/* 施工事例・画像のズーム opacity=100に変更  */
ul.col3 li img:hover{
	color: #fff;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

/* --------- works　中トップ（旧ページのcss）ショールーム中トップでまだ使っているので残す ---------------- */

#works:after, .layer:after, .lt:after, .rt:after{content: ""; display: block; clear: both;} /* clearfix */

#works{ width: 100%; max-width: 980px; margin: 0 auto 0px;}

.layer{ 
	position: relative;
	 width: 100%; 
	 margin-top: 50px; 
	 margin-bottom: 50px; 
	 display: block; 
	 height: 400px; 
	 font-family: Times New Roman; 
	 font-family: "Sawarabi Mincho";
}


/* --- 左で上になる文字box ---  */
.lt{ 
	position: absolute; 
	top: 15px;
	width: 50%; 
	text-align: center; 
	background-color: #333; 
	margin: 0 auto;
	display: block;
	z-index: 1; 
	
	filter: alpha(opacity=90);
	-moz-opacity:0.9;
	opacity:0.9;
}

/* --- 右で上になる文字box ---  */
.rt{ 
	position: absolute; 
	top: 15px;
	right: 0;
	width: 50%; 
	text-align: center; 
	background-color: #333;
	margin: 0 auto; 
	z-index: 1; 
	
	filter: alpha(opacity=90);
	-moz-opacity:0.9;
	opacity:0.9;
}

.lt h2, .rt h2{ font-size: 1.8em; color: #FFF; margin-top: 10px; }
.lt p, .rt p{ font-size: 1.4em; color: #FFF; padding-bottom: 5px; }

 /* 右で下になる画像box */
.ru-img{ width: 100%; height: auto; top: 0; right: 0;}

 /* 左で下になる画像box */
.lu-img{ width: 100%; height: auto; top: 0; left: 0;}



/*   works　中トップ  2024.01 リニューアル
=================================================================================================== */

.works-bg {
	width: 100%;
	background-color: #EEE;
	clear: both;
	padding-top: 30px;
	padding-bottom: 30px;
}

/* パララックス風　4スタイルの説明 */

/* modern */
.mo-bg{
	width: 100%; 
	min-height: 550px;
	color: #FFF;
	text-align: center;
	padding-top: 60px; 
	background-image: url(../images/modern.jpg); 
	background-repeat: no-repeat; 
	background-size:cover;
	background-position: center center;
	background-attachment: fixed;
}

/* european */
.eu-bg{
	width: 100%; 
	min-height: 550px;
	color: #FFF;
	text-align: center;
	padding-top: 60px; 
	background-image: url(../images/european.jpg); 
	background-repeat: no-repeat; 
	background-size:cover;
	background-position: center center;
	background-attachment: fixed;
}

/* natural */
.na-bg{
	width: 100%; 
	min-height: 550px;
	color: #FFF;
	text-align: center;
	padding-top: 60px; 
	background-image: url(../images/natural.jpg); 
	background-repeat: no-repeat; 
	background-size:cover;
	background-position: center center;
	background-attachment: fixed;
}

/* my style */
.my-bg{
	width: 100%; 
	min-height: 550px;
	color: #FFF;
	text-align: center;
	padding-top: 60px; 
	background-image: url(../images/my.jpg); 
	background-repeat: no-repeat; 
	background-size:cover;
	background-position: center center;
	background-attachment: fixed;
}



.mo-bg p, .eu-bg p, .na-bg p, .my-bg p{
	color: #FFF;
	text-align: left;
}


.layer-2{
	position: relative;
	width: 100%;
	height: 500px;
	display: block;
}

.i01{ position: absolute; top: 0; left: 0; width: 550px; height: auto; z-index: 1; }

.i02{ position: absolute; top: 300px; left:450px;  width: 345px; height: auto; z-index: 1; }

/*　アニメーションの遅延の指定　*/
.i01 {animation-delay: 0.5s;}
.i02 {animation-delay: 0.5s;}

/* モデルルーム */

.modelr{
	display: flex;
	margin-bottom: 30px;
	justify-content:center;
}

.modelr img {
  width: 200px; /*画像サイズ*/
  margin: 0;
  padding: 0;
}

.modelr .text {
  margin: 0 0 0 20px;
  padding: 0;
}

@media screen and (max-width: 768px) { 
/*　position解除
.i01, .i02{ position: initial; }　*/

.layer-2{ height: auto;}
.mo-bg,.eu-bg,.na-bg,.my-bg{ padding-top: 30px;  }
.mo-bg p, .eu-bg p, .na-bg p, .my-bg p{
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

.modelr{
	-webkit-box-orient: vertical;
	 -webkit-box-direction: normal;
	  -ms-flex-direction: column;
	   flex-direction: column;
	　　width: 90%;	
}

.modelr img {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}

.modelr .text {
	text-align: center;
	width: 90%;
}

}

/* --------- works　施工事例 ---------------- */

ul.col3{ width: 100%; padding-bottom: 50px; display: block;}

ul.col3 li{
	float: left;
	width: 32%;
	height: auto;
	display: block;
	padding-right: 2%;
	padding-bottom: 2%;
	list-style-type: none;
}

ul.col3 li:nth-child(3n){ padding-right: 0; } 

ul.col3 li p{
	text-align: center;
	letter-spacing: 0em;
}

/* 施工事例・詳細ページ・背景塗り */
.col2 .right50 .inbox-asian{ background-image: url(../my/images/syosai-bg.jpg);  display: block; padding-bottom: 45px; }
.col2 .right50 .inbox-european{ background-image: url(../european/images/syosai-bg.jpg); display: block; padding-bottom: 45px; }
.col2 .right50 .inbox-modern{ background-image: url(../modern/images/syosai-bg.jpg);  display: block; padding-bottom: 45px; }
.col2 .right50 .inbox-natural{ background-image: url(../natural/images/syosai-bg.jpg);  display: block; padding-bottom: 45px; }

/* 施工事例・詳細ページ・小見出し */
.inbox-asian h3{
	font-size: 1.6em;
	color: #666;
	padding-left: 10px;
	line-height: 1.7em;
}
.inbox-european h3{
	font-size: 1.6em;
	color: #A0BDD2;
	padding-left: 10px;
	line-height: 1.7em;
}
.inbox-modern h3{
	font-size: 1.6em;
	color: #333;
	padding-left: 10px;
	line-height: 1.7em;
}
.inbox-natural h3{
	font-size: 1.6em;
	color: #A1CC01;
	padding-left: 10px;
	line-height: 1.7em;
}

.inbox-asian h2, .inbox-european h2, .inbox-modern h2, .inbox-natural h2{
	font-size: 1.5em;
	line-height: 2em;
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #333;
	margin-bottom: 15px;
	padding: 5px;
}

.inbox-asian p, .inbox-european p, .inbox-modern p, .inbox-natural p{
	font-size: 1.4em;
	line-height: 1.4em;
	padding-right: 10px;
	padding-left: 10px;
}


/* 施工事例・詳細ページ・Q&A */
.col2 .qa{
	background-image: url(../images/tex-bg.jpg);
	background-repeat: repeat;
	padding: 10px;
}

.col2 .qa h2{
	font-size: 1.5em;
	line-height: 1.5em;
	padding-left: 45px;
	margin-bottom: 15px;
	padding-top: 5px;
}

.col2 .qa p{padding-left: 45px;}

.col2 .qa img{float: left;}

.dot{
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #333;
	margin-bottom: 10px;
}

/* 施工事例・フッターボタン・一覧へ */
.btn-all { 
	position: relative; 
	display: inline-block; 
	width: 100%; 
	height: 50px; 
	text-align: center; 
	line-height: 50px; 
	background: #666; 
	font-weight: bold; 
	border-radius: 10px; 
	text-decoration: none; 
	box-sizing: border-box; 
	padding-right: 4em; 
	padding-left: 4em; 
}

.btn-all2 { 
	position: relative; 
	display: inline-block; 
	width: 100%; 
	height: 70px; 
	text-align: center; 
	line-height: 1.5; 
	background: #666; 
	font-weight: bold; 
	border-radius: 10px; 
	text-decoration: none; 
	box-sizing: border-box; 
	padding: 1em 4em 0 4em;
}

.btn-all::after, .btn-all2::after{
	position: absolute;
	content: '';
	top: 50%;
	right: 3em;
	width: 7px;
	height: 7px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: rotate(45deg);
	margin-top: -5px;
}

.btn-all a, .btn-all2 a{ display: block; text-decoration: none!important; color: #FFF!important; font-size: 1.8em; font-weight: bold;}
.btn-all:hover, .btn-all2:hover{ color: #FFF; background-color: #000; }

.btn-all:hover::after, .btn-all2:hover::after{ animation: arrow02 .4s;}

@keyframes arrow02 {
  50% {right: 2.5em;}
  100% {right: 3em;}
} 

/* ページフッターの4つのボタン */
ul.btn4-2{
	width: 100%;
	margin-bottom: 30px;
	margin-left: 0.5%;
}

ul.btn4-2 li{
	float: left;
	width: 24%;
	height: auto;
	display: block;
	list-style-type: none;
	text-align: center;
	margin-right: 1.1%;
	margin-bottom: 1%;
	border-radius: 5px; /* 角丸 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;
	box-sizing: border-box;
}

ul.btn4-2 li:nth-child(4n){ margin-right: 0; } /* 4の倍数だけ右余白無し */

ul.btn4-2 li:nth-child(1){ background-color: #A0BDD2; }
ul.btn4-2 li:nth-child(2){ background-color: #999999; }
ul.btn4-2 li:nth-child(3){ background-color: #A1CC01; }
ul.btn4-2 li:nth-child(4){ background-color: #CCCCCC; }

ul.btn4-2 li a {
	text-decoration: none;
	color: #FFF;
	font-size: 1.2em;
	line-height: 3em;
	font-weight: bold;
}

ul.btn4-2 li:hover{
	display: block;
	background-color: #0089CA;
	border-radius: 5px; /* 角丸 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;
}

/* ------------------------------------------------------------
		ショールーム
------------------------------------------------------------ */

/* スタイル名の大見出し */
.style-title{ width: 100%; text-align: center; color: #FFF; background-color: #666; font-size: 2.8em; line-height: 1.8em; font-family: "Sawarabi Mincho";}

/* 太田展示場の背景黒box */
.bk{ width: 100%; background-color: #000; padding: 30px 5px; }

/* 新伊勢崎展示場の背景緑box */
.green-box { width: 100%; background-color: #669900; padding: 30px 5px; }
.d-green-box { width: 100%; background-color: #336600; padding: 30px 5px; }

/* 新伊勢崎展示場のボタン(2つ) */
.green-box ul.bk-btn li{ 
	width: 48%; 
	float: left; 
	border: 1px solid #FFF; 
	margin-right: 5px; 
	color: #FFF; 
	font-size: 2em; 
	line-height: 3em;
	display: block; 
}

.green-box ul.bk-btn li a:hover{ background-color: #336600; display: block; }

/* 太田展示場のボタン(2つ) */
.gr-box{ width: 100%; background-color: #999; padding-top: 30px; padding-bottom: 30px; }

ul.bk-btn{ 
	text-align: center; 
	width: 100%; 
	padding: 5px; 
	margin-right: auto; 
	margin-left: auto; 
	display: block; 
	box-sizing:border-box;
}
ul.bk-btn:after{ content: ""; display: block; clear: both;} /* clearfix */

ul.bk-btn li{ 
	display: block; 
	width: 48%; 
	float: left; 
	list-style-type: none; 
	border: 1px solid #FFF; 
	margin-right: 5px;
	margin-left: 5px;
	color: #FFF; 
	font-size: 2em; 
	line-height: 3em;  
}

ul.bk-btn li a{ width: 100%; hight: 100%; display: block; text-decoration: none!important; color: #FFF;}
ul.bk-btn li a:hover{ background-color: #669900; display: block; color: #FFF!important; }

/* 太田展示場のボタン(3つ)
ul.bk-btn li{ 
	display: block; 
	width: 32%; 
	float: left; 
	list-style-type: none; 
	border: 1px solid #FFF; 
	margin-right: 5px;
	margin-left: 5px;
	color: #FFF; 
	font-size: 2em; 
	line-height: 3em;  
} */

/* 夜間展示場案内のバナー */
.night-bnr{
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	background-color: #2E287E;
}

.night-bnr p{
	color: #FFF;
}

/* ------------------------------------------------------------
	住まいのライブラリースペース
------------------------------------------------------------ */

/* ------- hosyou(パララックス風 / 2023.09.12　追加）------------------------- */
.library-bg{
	width: 100vw; 
	height: auto;
	color: #FFF;
	padding-top: 0;
	background-image: url(../library/images/main.jpg); 
	background-repeat: no-repeat; 
	background-size:cover;
	background-position: center top;
	background-attachment: fixed;
	padding-top: 160px;
	padding-bottom: 10em;
}

.library-bg .center-box h2{ font-size: 3.2em; line-height: 1.6em; color: #FFF; }
.library-bg .center-box p{ font-size: 1.8em; line-height: 1.8em; color: #FFF; }


@media(max-width: 768px){ 

.library-bg{ height: auto; padding-top: 50px;}
.library-bg .inner{ width: 95%;}
.library-bg .center-box { width: 95%;}

}

@media(max-width: 600px){ 
.library-bg .center-box h2{ font-size: 2.4em;}
.library-bg .center-box p{ font-size: 1.5em; line-height: 1.4em; }

.library-bg .center-box br { display: none; }/* brの改行をさせない */
}

/* ------------------------------------------------------------
	点検・保証・安心メンテナンス
------------------------------------------------------------ */

/* ------- hosyou(パララックス風 / 2020.12.14　追加）------------------------- */
.hosyou{
	width: 100vw; 
	height: auto;
	color: #FFF;
	padding-top: 0;
	background-image: url(../images/hosyou/bg_hosyou.jpg); 
	background-repeat: no-repeat; 
	background-size:cover;
	background-position: center top;
	background-attachment: fixed;
	padding-bottom: 10em;
}

.hosyou .inner{ width: 980px; height: auto; background: rgba(255,255,255,0.7); padding: 10px; margin-right: auto; margin-left: auto; }

.hosyou .inner img{ width: 100%; margin-right: auto; margin-left: auto; }

.hosyou .inner h4{ font-size: 3em; margin-bottom: 10px; letter-spacing: 0.1em; line-height: 1.6em; } 

@media(max-width: 768px){ 

.hosyou{ height: auto; padding-top: 50px;}

.hosyou .inner{ width: 95%;}

.hosyou .inner img{ width: 95%; }

}



/* ------------------------------------------------------------
	こだわり仕様
------------------------------------------------------------ */
/* 黄色いサブメニュー */
ul.btn4{
	width: 100%;
	margin-bottom: 30px;
	margin-left: 0.5%;
}

ul.btn4 li{
	float: left;
	width: 24%;
	height: auto;
	display: block;
	list-style-type: none;
	text-align: center;
	background-color: #F4B800;
	margin-right: 1.1%;
	margin-bottom: 1%;
	border-radius: 5px; /* 角丸 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;
	box-sizing: border-box;
}

ul.btn4 li:nth-child(4n){ margin-right: 0; } /* 4の倍数だけ右余白無し */

ul.btn4 li a {
	width: 100%; hight: 100%;
	display: block;
	text-decoration: none;
	color: #FFF!important;
	font-size: 1.2em;
	line-height: 3em;
	font-weight: bold;
}

ul.btn4 li:hover{
	display: block;
	background-color: #E3AB00;
	color: #FFF!important;
	border-radius: 5px; /* 角丸 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;
}

/* 丸付き見出し(紫） */
.title-c{
	position: relative;
	height: auto;
	width: 100%;
	margin-bottom: 30px;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #663366;
	padding-top: 2px;
}

.title-c:before{
	content: "";
	position: absolute;
	width: 10px; /* 10pxのまる */
	height: 10px;
	border: 5px solid #663366;
	border-radius: 70px;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	margin-left: 6px;
	margin-top: 6px;
	display: inline-block;
	margin-right: 10px;
	background-color: #FFF;
}

.title-c h2{
	margin-left: 35px;
	font-size: 1.8em;
	line-height: 2em;
	color: #655C4B;
}

/* 番号付きリスト・丸数字 */
ol {
  counter-reset: n-counter; /* olが複数並んでも数を引き継がないようにいったんリセットさせる */
  list-style: none;
  padding: 0;
}
 
ol li {
	margin-bottom: 0.5em;
	padding-left: 30px;
	position: relative;
	font-size: 1.5em;
	line-height: 1.7em;
}

ol li:before {
	content: counter(n-counter); /* カウンタ名 */
	counter-increment: n-counter; /* カウントする数字を与える */
	background-color: #663366; /* 丸・紫 */
	color: #FFF; /* 文字・白 */
	display: block;
	float: left;
	line-height: 2em;
	margin-left: -30px;
	text-align: center;
	height: 2em;
	width: 2em;
	border-radius: 50%;
	font-weight: bold;
	margin-right: 5px;
}

ol li p{
	font-size: 1.5em;
	letter-spacing: 0.1em;
}

/* 見出し・太い紫 */
.midashi-p{
	font-size: 1.6em;
	line-height: 2em;
	font-weight: bold;
	color: #663366;
}




/* ------------------------------------------------------------
	市別お役立ち情報
------------------------------------------------------------ */
/* 黄緑サブメニュー */
ul.btn3{
	width: 100%;
	margin-bottom: 30px;
	margin-left: 0.5%;
}

ul.btn3 li{
	float: left;
	width: 32%;
	height: auto;
	display: block;
	list-style-type: none;
	text-align: center;
	background-color: #A1CC00;
	margin-right: 1.1%;
	margin-bottom: 1%;
	border-radius: 5px; /* 角丸 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;
	box-sizing: border-box;
}

ul.btn3 li:nth-child(3n){ margin-right: 0; } /* 4の倍数だけ右余白無し */

ul.btn3 li a {
	width: 100%; hight: 100%;
	display: block;
	text-decoration: none;
	color: #FFF!important;
	font-size: 1.2em;
	line-height: 3em;
	font-weight: bold;
}

ul.btn3 li:hover{
	display: block;
	background-color: #336600;
	color: #FFF!important;
	border-radius: 5px; /* 角丸 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;
}

/* リスト */
ol.shopping {
	counter-reset: n-counter; /* olが複数並んでも数を引き継がないようにいったんリセットさせる */
  list-style:none;
  padding: 0;
}
 
ol.shopping li {
	content: counter(n-counter); /* カウンタ名 */
	counter-increment:none; /* カウントする数字を与える */
	margin-bottom: 0.5em;
	padding-left: 40px;
	position: relative;
	font-size: 1.4em;
	line-height: 1em;
}

ol.shopping li:before {
	background-color: #A1CC00; /* 丸・黄緑 */
	color: rgba(255,255,255,0.0);;
	display: block;
	float: left;
	line-height:1em;
	margin-left: -20px;
	text-align: center;
	height:1em;
	width:1em;
	border-radius: 50%;
	font-weight:normal;
}

ol.shopping li p{
	font-size: 1em;
	line-height: 1.2em;
}



/* ------------------------------------------------------------
	お問い合わせ・来場予約
------------------------------------------------------------ */

input {padding: .5em; box-sizing: border-box;}
textarea {padding: .5em; width: 100%;}
button, input, select, textarea { font-family : inherit; font-size : 100%;}
.ERR{ color: #F00 !important;}

input[type="radio"] {
	width: 20px;
	height: 20px;
	border: 3px solid #AAAAAA;
	border-radius: 50%;
	position: relative;
	outline: none;
	display: inline-block;
	margin-top: 0;
	margin-right: 0.5rem;
}

/* タイトル・背景グレイ */
.title-contact{
	background-color: #333;
	height: auto;
	width: 100%;
	display: block;
	text-align: center;
	margin-bottom: 30px;
	clear: both;
}

.title-contact img{
	margin-right: auto;
	margin-left: auto;
}

/* タイトル・背景グレイフォーム内ボーダー無し */
.title-form{
	background-color: #333;
	height: auto;
	width: 100%;
	display: block;
	text-align: center;
	margin-bottom: 10px;
	clear: both;
	padding: 5px;
	font-size: 14px;
	line-height: 2;
}

.col3-frame:after, ul.col4:after{content: ""; display: block; clear: both;} /* clearfix */

/* 青枠付き・3カラム・来場予約のメリット */

.col3-frame{ width: 100%;}

ul.col3-frame li{
	width: 32%;
	height: 280px;
	list-style-type: none;
	border: 5px solid #A0BDD2;
	margin-right: 1.3%;
	padding: 5px;
	box-sizing: border-box;
	display: block;
	float: left;
	margin-bottom: 1em;
}

ul.col3-frame li:nth-child(3n){ padding-right: 0; }

ul.col3-frame li img{
	max-width:100%;
	margin-right: auto;
	margin-left: auto;
	display: block;
}

ul.col3-frame li p{
	letter-spacing: 0em;
}

/* 来場予約フォーム・日付から下 */

.inputform{
	width: 100%;
	font-size: 1.4em;
	letter-spacing: 0.1em;
	line-height: 1.6em;
	color: #333;
	box-sizing: border-box;/* tebleに入れる場合input枠のpaddingがはみ出すので */
}

.inputform dl dt{ background-color: #EEE; padding: 10px; }

.inputform dd{padding: 10px;}

/* 4カラム・来場予約・見学会・トップページショールーム展示会 */

ul.col4{ width: 100%; margin-bottom: 30px;}

ul.col4 li{
	float: left;
	width: 24%;
	height: auto;
	display: block;
	padding-right: 1%;
	padding-bottom: 3%;
	list-style-type: none;
	text-align: center;
}

ul.col4 li:nth-child(4n){ padding-right: 0; } /* 4の倍数だけ右余白無し */

ul.col4 li p{
	text-align: center;
	letter-spacing: 0em;
}

ul.col4 li img{
	max-width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

.gray-box{
	background-color: #EEE;
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.gray-bg { background-color: #333; }

@media screen and (max-width: 768px){
    .inputform{width: 95%; margin: auto;}
    input[type="text"],textarea {width: 100%;}
}
/*------------------------------------------------------------
		sitemap
------------------------------------------------------------*/

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

.sitemaps{ width: 100%; font-size: 1.3em; line-height: 2em; margin-top: 30px; margin-bottom: 50px; }

.sitemaps ul li { width: 80%; margin-top: 10px; margin-bottom: 10px; padding-left: 20px; }
.sitemaps ul ul { padding: 0px; margin: 0px; }
.sitemaps ul ul li{ padding: 0px 0px 0px 15px; margin: 0px; }

/* 下線の有無 */
.sitemaps a{ border-bottom-style: solid; display: block; border-bottom-width: 1px; border-bottom-color: #CCC; text-decoration: none!important; }
.sitemaps ul ul li a{ border-style: none; text-decoration: none;}
.sitemaps a:hover {color: #A1CC00;}

/*------------------------------------------------------------
		privacy
------------------------------------------------------------*/
.privacy{ width: 80%; max-width: 800px; text-align: left; margin-top: 30px; margin-right: auto; margin-bottom: 50px; margin-left: auto;}

.privacy h2{ text-align: center; font-size: 16px; color: #333; font-weight: normal; background-color: #EEE; padding-bottom: 20px; line-height: 40px; height: 20px; }

.privacy h3{ line-height: 12px; color: #666; font-size: 13px; margin-right: 5px; margin-left: 5px; padding-left: 10px; margin-top: 20px; height: 20px;font-weight: bold; border-bottom: 1px dotted #CCC; border-left: 5px solid #A1CC00; }

.privacy p{line-height: 20px;color: #333;font-weight: normal;padding: 5px;font-size: 13px;}
.pbox01 {display: block;text-align: center;border: 1px solid #CCCCCC;padding: 5px;margin-top: 30px;margin-bottom: 30px;}
.pbox01 p{font-size: 1.2em;font-weight: normal;color: #333;line-height: 1.4em;}