@charset "utf-8";


/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");
/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*lightbox.cssの読み込み
---------------------------------------------------------------------------*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);


/*アニメーションのキーフレーム設定。透明(0%)から色を100%出す指定。*/
@keyframes opa1 {
0% {opacity: 0;}
100% {opacity: 1;}
}

/*PC・タブレット・スマホ共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #222;	/*全体の文字色*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 16px;	/*文字サイズ*/
	line-height: 1.5;		/*行間*/
	background: #fff;	/*背景色*/
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,input,textarea {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}
video,audio {max-width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #222;		/*リンクテキストの色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
a:hover {
	color: #20b1e1;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*サイトの最大幅の設定
---------------------------------------------------------------------------*/
.inner {
	max-width: 1200px;	/*サイトの最大幅。これ以上大きくならない。*/
	margin: 0 auto;
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	/*background: #fff;	/*背景色（古いブラウザ用）*/
	background: url(../images/header_bg.jpg) no-repeat;/*背景画像の読み込み*/
	background-size:cover;
}
header .inner {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	height: 180px;	/*ヘッダーの高さ*/
}
/*ロゴ画像*/
header #logo {
	width: 400px;		/*ロゴ画像の幅*/
	position: absolute;
	left: 2%;		/*headerのinnerに対しての左からの配置指定*/
	top: 15px;	/*headerのinnerに対しての下からの配置指定*/
}
header #logo img{
	width:369px;
}

/*ヘッダーお問合せボタン

---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
#fsize {
	position: absolute;
	right: 2%;		/*headerのinnerに対して右からの配置指定*/
	top: 0px;		/*headerのinnerに対して上からの配置指定*/
	width: 265px;	/*ブロック幅*/
	/*background: #fff;	/*背景色*/
	/*box-shadow: 0px 0px 8px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた状態の事。*/
	/*border-radius: 0px 0px 5px 5px;	/*角丸のサイズ。左上、右上、右下、左下への順。*/
	/*line-height: 50px;	/*高さ*/
	padding: 10px 0px;	/*上下、左右へのボックス内の余白*/
}
/*ボタン*/
#fsize p {
	float: left;
	font-size: 18px;	/*文字サイズ*/
	padding: 0 20px;	/*上下、左右への余白*/
}


/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロックの設定*/
#menubar {
	overflow: hidden;
	margin-top: 85px;	/*下のコンテンツとの間に空けるスペース*/
}
/*メニュー１個あたりの設定*/
#menubar li {
	float: left;	/*左に回り込み*/
	width: 16%;	/*メニュー幅（100÷6個=16.66%）　もし４個にするなら100÷4=25%になる。*/
	border-left:solid 1px #BBB287;
}
#menubar li a {
	text-decoration: none;
	display: block;
	text-align: center;
	padding: 10px 0;	/*上下、左右へのメニュー内の余白*/
	margin: 0px 5px;	/*上下、左右へのメニューの外への余白*/
	
}
#menubar ul li:first-child{
	border-left:0px!important;
}
/*マウスオン時と、現在表示中(current)のメニューの設定*/
#menubar li a:hover, #menubar li.current a {
	background: #20b1e1;	/*背景色*/
	color: #fff;			/*文字色*/
	border-radius: 5px;	/*角丸のサイズ*/
}

/*スマホ用メニューを表示させない*/
#menubar-s {display: none;}
/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}

/*コンテンツ（mainとsubブロックを囲むボックス）
---------------------------------------------------------------------------*/
#contents {
	clear: both;overflow: hidden;
	box-sizing: border-box;
	/*padding: 2%;	/*ボックス内の余白*/
	background: #fff;	/*背景色*/
	/*box-shadow: 0px 0px 8px rgba(0,0,0,0.1);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.1は10%色がついた状態の事。*/
	margin-bottom: 40px;	/*下のフッターブロックとの間に空けるスペース*/
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
/*メインコンテンツブロック*/
#main {
	float: left;	/*右に回り込み*/
	width: 75%;		/*ボックス幅*/
	padding-bottom: 40px;
}

/*セカンドページ　タイトル*/
#main h1{
	margin:10px 0 30px 0;
	background:url("../images/secand_title_bg.jpg")no-repeat left bottom;
	color:#fff;
	font-size:1.5em;
	font-weight:bold;
	padding-left:8em;
	line-height:3.0em;
	border-radius:4px;
}

/*１カラム時のメインコンテンツ*/
.c1 #main {
	float: none;
	width: auto;
}
/*mainコンテンツのh2タグ設定*/
#main h2 {
	clear: both;
	margin: 40px 0 20px; 
	padding: 10px 20px;	/*上下、左右への余白*/
	font-size: 120%;	/*文字サイズ*/
	color: #005EA3;		/*文字色*/
	background: #9FD9EC;	/*背景色*/
	border-radius: 5px;	/*角丸のサイズ。この行を削除すれば角が尖った長方形になります。*/
}
/*h2タグの１文字目への追加設定*/
#main h2::first-letter {
	border-left: 3px solid #fff;	/*左の線の幅、線種、色*/
	padding-left: 15px;				/*線とテキストとの余白*/
}
/*mainコンテンツのh3タグ設定*/
#main h3 {
	clear: both;
	margin-bottom: 20px;
	padding: 5px 20px;	/*上下、左右への余白*/
	font-size: 110%;	/*文字サイズ*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-radius: 5px;	/*角丸のサイズ。この行を削除すれば角が尖った長方形になります。*/
}
/*h3タグの１文字目への追加設定*/
#main h3::first-letter {
	border-left: 3px solid #20b1e1;	/*左の線の幅、線種、色*/
	padding-left: 15px;				/*線とテキストとの余白*/
}
/*mainコンテンツの段落タグ設定*/
#main p {
	padding: 0px;	/*上、左右、下への余白*/
	margin:0;
}
/*他。微調整。*/
#main p + p {
	margin-top: -5px;
}
#main h2 + p,
#main h3 + p {
	margin-top: -10px;
}
#main section + section {
	padding-top: 30px;
}

/*右寄せ*/
#main #content .back {text-align:right; font-size:85%;}

/*listブロック
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
#main .list {
	overflow: hidden;position: relative;
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 20px;	/*ボックス内の余白*/
	margin-bottom: 20px;	/*ボックス同士に空けるスペース*/
}
/*画像*/
#main .list figure {
	float: left;	/*左に回り込み*/
	width: 28%;		/*画像の幅*/
	margin-right: 2%;	/*画像の右側に空けるスペース*/
}
/*テキストブロック*/
#main .text {
	float: right;	/*左に回り込み*/
	width: 70%;		/*画像の幅*/
}
/*h4（見出し）タグの設定*/
#main .list h4 {
	color: #0044A2;		/*文字色*/
	font-size: 120%;	/*文字サイズ*/
	padding-bottom:8px;
	border-bottom:solid 3px #ccc;
	margin-bottom:8px;
}
/*p（段落）タグの設定*/
#main .list p {
	padding: 0;
}

#main .list ul li{
	list-style-type:none;
	margin:0px 0 10px;
}


/*サブコンテンツ　右側のリンクバナーなど
---------------------------------------------------------------------------*/
#sub {
	float: right;	/*左に回り込み*/
	width: 22%;		/*ブロックの幅*/
	padding-bottom: 40px;
	margin-left:23px;
}
/*１カラム字のサブコンテンツ*/
.c1 #sub {display: none;}
/*h2見出しタグ設定*/
#sub h2 {
	margin-bottom: 10px;
	font-size: 110%;	/*文字サイズ*/
}
/*subコンテンツのh2タグの１文字目への設定*/
#sub h2::first-letter {
	border-left: 3px solid #20b1e1;	/*左側のアクセント用ラインの幅、線種、色*/
	padding-left: 10px;
}
/*段落タグ（p）設定*/
#sub p {
	line-height: 1.6;	/*行間を少し狭く*/
}

/*サブコンテンツ内のメニュー
---------------------------------------------------------------------------*/
/*メニュー全体の設定*/
#sub .submenu {
	margin-bottom: 20px;	/*メニューブロックの下に空けるスペース*/
	border-top: solid 1px #e4e4e4;	/*上の線の線種、幅、色*/
}
/*メニュー１個ごとの設定*/
#sub .submenu li {
	border-bottom: solid 1px #e4e4e4;	/*下の線の線種、幅、色*/
}
#sub .submenu li a {
	text-decoration: none;display: block;
	padding: 5px 10px;	/*上下、左右へのメニュー内の余白*/
	background: #fff;	/*背景色*/
}
/*サブコンテンツ内のbox1
---------------------------------------------------------------------------*/
#sub .box1 {
	padding: 15px;			/*ボックス内の余白*/
	margin-bottom: 20px;	/*ボックスの下に空けるスペース*/
	background: #f5f5f5;	/*背景色*/
	border: solid 1px #dbdbdb;	/*線の線種、幅、色*/
	box-shadow: 0px 0px 1px 1px #fff inset;	/*ボックスの影。右へ、下へ、ぼかし幅、距離。#fffは白のことでinsetは内側へ向けての影の指定。*/
}
/*box1内のメニューの設定*/
#sub .box1 .submenu {
	margin-bottom: 0px;
}

/*サブコンテンツ内のbox2 バナー）
---------------------------------------------------------------------------*/
#sub .box2 {
	margin-bottom: 15px;	/*ボックスの下に空けるスペース*/
	font-size: 120%;	/*文字サイズ*/
	/*box-shadow: 0px 0px 2px 5px #fff inset;	/*影の設定。右・下・ぼかし幅・距離・色の設定。insetは内側に向かっての影。*/
	/*background: #edf5fa;	/*背景色*/
	text-align:center;
}
#sub .box2 a {
	text-decoration: none;
	display: block;
	/*padding: 1px;			/*上下、左右へのボックス内の余白*/
	/*border: solid 3px #e4e4e4;	/*枠線の線種、幅、色*/
}
#sub .box2 a img{
	width:197px;
}
/*マウスオン時*/
#sub .box2 a:hover {
    opacity: 0.7;
}
#sub .box2 ul li{
	width:100%;
	margin-bottom:15px;
}


/*フッター設定
---------------------------------------------------------------------------*/
/*footerボックス*/
footer {
	clear: both;overflow: hidden;
	background: url("../images/footer_bg.jpg")no-repeat top center;	/*背景色*/
	background-size:cover;
	/*color: #fff;		/*文字色*/
	padding-top:30px;
}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu {
	width:100%;
	overflow: hidden;
	font-size: 100%;	/*文字サイズを少し小さく*/
	padding: 20px 0;	/*上下、左右へのボックス内の余白*/
}
/*住所*/
#footermenu .address{
	width:20%;
	padding:10px 0 130px 10px;
	float:left;
	background:url("../images/ft_comment.gif")no-repeat right bottom!important;
}
#footermenu .address img{
	width:218px;
}
/*１列分の設定*/
#footermenu ul {
	float: left;	/*左に回り込み*/
	width: 25%;		/*今回は４列作ったので、下のmarginを含めて25%になるよう指定。５列にしたいならこの行は19%にする。*/
	margin-left: 5%;
}
/*メニュー１個あたりの設定*/
#footermenu ul li {
	padding:5px 10px;	/*上下、左右への余白*/
}
/*リンクテキスト*/
#footermenu a {
	text-decoration: none;
	color: #222;	/*文字色*/
}
/*マウスオン時のリンクテキスト*/
#footermenu a:hover {
	opacity: 0.7;	/*透明度。色を100%出した状態。*/
}
/*アイコンの設定*/
.link{
	background:url("../images/arrow_next.png")no-repeat center left / 8px;
	padding-left:30px!important;
}
.gas{background:url("../images/ft_btn1.png")no-repeat center left / 20px;
    padding-left:30px!important;
}
.water{background:url("../images/ft_btn2.png")no-repeat center left / 20px;
    padding-left:30px!important;
}
.reform{background:url("../images/ft_btn3.png")no-repeat center left / 20px;
    padding-left:30px!important;
}
.repair{background:url("../images/ft_btn4.png")no-repeat center left / 20px;
    padding-left:30px!important;
}
.request{background:url("../images/ft_btn5png.png")no-repeat center left / 20px;
    padding-left:30px!important;
}

/*コピーライト
---------------------------------------------------------------------------*/
#copyright {
	clear: both;text-align: center;
	/*background: #333;	/*背景色*/
	padding: 10px;		/*余白*/
}
#copyright a {text-decoration: none;color: #000;}
#copyright .pr {display: block;}




/*HOME 鈴村浴槽株式会社はこんなお店
---------------------------------------------------------------------------*/
.suzumura{
	background:#fff url("../images/home/bg-fire-tomei.png")no-repeat center center;
	background-size:cover;
	padding:5px;
	border-radius:8px;
	margin-bottom:40px;
	border:solid 6px #FFF199;
	box-sizing: border-box;
}

/*スズムラ　4分割
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#contents .list-container-suzumura{
	display:flex;
	flex-direction: row; /*子要素を横並び*/
	padding:0px;
	flex-wrap: wrap;				/*折り返す指定*/
}
#contents .list4-suzumura {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;/*子要素をたて並び*/
	align-items: center;
	width:25%;
	margin-bottom: 5px;	/*ボックス同士に空けるスペース*/	
}
/*リンクテキストの文字色*/
#contents .list4-suzumura a {
}
/*ボックス内のh4（見出し）タグ*/
#contents .list4-suzumura4 h4 {
	margin-bottom: 10px;	/*下のテキストとの間に空けるスペース*/
	font-size: 120%;		/*文字サイズ*/
	text-align: left!important;
	width:94%;
	background:#eee;
	padding:3%;
}
/*ボックス内のp（段落）タグ*/
#contents .list4-suzumura p {
	padding: 0;		/*余白のリセット*/
}
/*ボックス内のfigure画像*/
#contents .list4-suzumura figure{
	width:30%;
	margin:0 auto;
	padding:10px;
	text-align:center;
	background:#fff;
	border-radius:50%;
	box-shadow: 3px 3px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
}


/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list4-suzumura .text {
	text-align:left!important;
	margin:10px auto 0;
	width:92%;
	font-size:100%;
}

.bg-su{
	background:#fff url("../images/home/su.png")no-repeat center center;
	background-size:contain;
}
.bg-zu{
	background:#fff url("../images/home/zu.png")no-repeat center center;
	background-size:contain;
}
.bg-mu{
	background:#fff url("../images/home/mu.png")no-repeat center center;
	background-size:contain;
}
.bg-ra{
	background:#fff url("../images/home/ra.png")no-repeat center center;
	background-size:contain;
}

/*トップページ内「お知らせ・イベント」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new{
	position:relative; 
	background:url(../images/home/info_bg.gif); 
	margin-bottom:30px;
	padding-top:30px;
}
#new .new-title {
	/*background:#fff url(../images/home/info_bg.gif) 10px 10px; padding-left:24px;*/
	position:absolute;
	top:-15px;
	left:24px;
}
#new .tape {/*右角のテープ*/
	position:absolute; 
	top:-15px; right:-17px;
}

#new dl {
	padding:5px 0px;
	overflow:hidden;
}

/*日付*/
#new dt {
	float: left;
	width: 14em;
	letter-spacing: 0.1em;
	padding:8px 0 8px 10px;
}
#new dt span {
	display:inline-block; 
	border-radius:3px; 
	margin-right:5px; 
	padding:1px 4px; 
	font-size:85%; color:#fff;
}

/*記事*/
#new dd {
	padding:8px 0px 9px 14em;
/*	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
}
#new dl dt:nth-child(4n-1),
#new dl dd:nth-child(4n) {
	background:url(../images/home/info_bg2.gif);
}
.leg .home_info dl dt {
	border-top:1px #aaa dotted; 
	margin-top:-1px;
}

/*一覧を見るボタン*/
#new p {
	position:absolute; 
	top:-10px; left:170px;
}

/*カラーアイコン*/
.icon{
	display:inline-block; 
	border-radius:3px; 
	margin-right:5px; 
	padding:1px 4px; 
	font-size:85%; 
	color:#fff;
	font-weight:normal!important;
}
 .ev {background:#ee8800;}
 .nt {background:#f56091;}
 .ex {background:#73b532;}
 .cv {background:#00badb;}

/*（トップページ4分割）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#contents .list-container{
	display:flex;
	flex-direction: row; /*子要素を横並び*/
	padding:20px;
	flex-wrap: wrap;				/*折り返す指定*/
}
#contents .list4 {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;/*子要素をたて並び*/
	align-items: center;
	width:25%;
	margin-bottom: 20px;	/*ボックス同士に空けるスペース*/	
}
/*リンクテキストの文字色*/
#contents .list4 a {
}
/*ボックス内のh4（見出し）タグ*/
#contents .list4 h4 {
	margin-bottom: 10px;	/*下のテキストとの間に空けるスペース*/
	font-size: 120%;		/*文字サイズ*/
	text-align: left!important;
	width:94%;
	background:#eee;
	padding:3%;
}
/*ボックス内のp（段落）タグ*/
#contents .list4 p {
	padding: 0;		/*余白のリセット*/
}
/*ボックス内のfigure画像*/
#contents .list4 figure{
	width:92%;
	margin:0 auto;
}

/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list4 .text {
	text-align:left!important;
	margin:8px auto 0;
	width:92%;
}

/*施工事例 枠線あり*/
.home_examples {
	position:relative; 
	border:solid 5px #CAE58C;
	box-sizing: border-box;
	border-radius:8px;
	padding:10px 0 0 0;
}
/*一覧を見る*/
.home_examples p {
	position:absolute; 
	top:20px; 
	left:180px;
}
/*タイトル画像*/
.home_examples .title{
	padding-left:20px;
}

/*お客様の声　枠線あり*/
.home_customers {
	border:solid 5px #9FDBF5;
	box-sizing: border-box;
	border-radius:8px;
	background-size:cover;
	margin-top:25px;
	position: relative;
    padding:10px 0 0 0;
}
/*一覧を見る*/
.home_customers p {
	position:absolute; 
	top:20px; 
	left:140px;
}
/*タイトル画像*/
.home_customers .title{
	padding-left:20px;
}

/*お客様の声　一覧ページ用
----------------------------------*/
/*外側ブロック*/
.faq-customers {
	padding: 0px 20px;	/*上下、左右への余白*/
}
/*質問*/
.faq-customers dt {
	color: #20b1e1;		/*文字色*/
	font-weight: bold;	/*太字にする設定*/
	padding-left: 35px;	/*背景アイコンに重ならないよう左に余白を作る*/
	margin-bottom: 8px;	/*ボックスの下側（外側）に空けるスペース*/
	padding-bottom: 8px;	/*ボックス内の下側に空けるスペース*/
	background: url(../images/faq_q.png) no-repeat left top / 25px;	/*「Q」アイコン*/
}
/*回答*/
.faq-customers dd {
	padding-left: 35px;		/*背景アイコンに重ならないよう左に余白を作る*/
	margin-bottom: 8px;	/*ボックスの下側（外側）に空けるスペース*/
	padding-bottom: 8px;	/*ボックス内の下側に空けるスペース*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	background: url(../images/faq_a.png) no-repeat left top / 25px;	/*「A」アイコン*/
}

/*ページネーション
----------------------------------------------------------*/
.Pagination-outer{
	width:100%;
	text-align:center;
	padding:20px 0 0;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    list-style-type: none;
    padding: 0;
}

.pagination a {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    border-radius: 1px;
    background-color: #f2f2f2;
    color: #2589d0;
}

.pagination a:not(:hover) {
    text-decoration: none;
}

.pagination .current a {
    background-color: #2589d0;
    color: #fff;
    pointer-events: none;
}


/*鈴村浴槽の特長
----------------------------------------------------------------*/

/*ボックスの設定*/
#contents .list-business {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	/*background: #000;	/*背景色*/
	/*color: #fff;		/*文字色*/
	margin-bottom: 30px;	/*ボックス同士に空けるスペース*/
	border-radius: 8px;
}
/*リンクテキストの文字色*/
#contents .list-business a {
	color: #fff;
}
/*ボックス内のh4（見出し）タグ*/
#contents .list-business h4 {
	margin-bottom: 10px;	/*下のテキストとの間に空けるスペース*/
	font-size: 120%;		/*文字サイズ*/
	font-weight:bold;
}
#contents .list-business h4 img{
	height:80px;
	border-radius:6px;
}
/*ボックス内のp（段落）タグ*/
#contents .list-business p {
	padding: 0;		/*余白のリセット*/
	color:#fff;
}
/*ボックス内のfigure画像*/
#contents .list-business figure {
	float: right;	/*左に回り込み*/
	width: 40%;		/*画像の幅*/
}
#contents .list-business figure img{
	border-radius:6px;
}
/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-business .text {
	float: left;	/*右に回り込み*/
	width: 54%;		/*幅*/
	margin: 3%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}
/*背景色
-------------------------*/
.bg-blue{background:#4DA2C7;}
.bg-red{background:#E18080;}
.bg-perple{background:#A98CD1;}
.bg-green{background:#ADC974;}
.bg-yellow{background:#C3A85B;}
.bg-pink{background:#E77BAA;}




/*施工の流れ
---------------------------------------------------- */
dl.flow {margin-top:25px;}
dl.flow dt {position:relative; padding-left:95px;}
dl.flow dt .icon {position:absolute; top:0; left:0;}
dl.flow dd {margin-bottom:15px; padding:10px 0 40px 95px; background:url(../images/flow/flow_arrow.gif) no-repeat 50% bottom;}
dl.flow dd.last {margin-top:-35px; padding:0 0 20px 170px; background:0;}
dl.flow dd.last .textmenu {margin-top:10px;}
ol.flow {padding:0; overflow:hidden; zoom:1;}
ol.flow li {float:left; width:220px; margin:10px; list-style-position:inside;}
ol.flow li p {height:3.5em;}
ol.flow li img {display:block; margin-bottom:8px;}



/* ------ 見出しとブロック */
.page_title {margin-bottom:30px;}
.sec_title {clear:both; margin:40px 0 20px; padding:2px 12px; background:#eef4f8; font-size:116%; font-weight:bold; color:#39d;}
.sec_title span {/*display:block; font-size:77%; color:#777;*/ display:none;}
.subsec_title1 {margin:15px 0 6px; border-left:5px #39d solid; padding-left:6px;}
.subsec_title2 {}
.catch {font-size:116%; margin:0 0 10px;}
.supl {}
.first {margin-top:0!important;}
.textmenu {margin:1.5em 0 1.5em -10px;; overflow:hidden; zoom:1;}
.textmenu li {float:left; padding:0 10px; border-left:1px #aaa dotted; position:relative; left:-1px; white-space:nowrap;}
.pic_r {float:right; padding:0 0 10px 15px;}
.pic_l {float:left; padding:0 15px 10px 0;}

/* ------ ul, ol, dl */
ul.square {margin:0; padding:0 0 0 1.5em; list-style-type:square;}
ul.disc {margin:0; padding:0 0 0 1.5em; list-style-type:disc;}
ul.spaced, ol.spaced {margin:2em 0;}
ul.spaced li, ol.spaced li {margin:0.75em 0;}
ul.semispaced, ol.semispaced {margin:1em 0;}
ul.semispaced li, ol.semispaced li {margin:0.3em 0;}
ul.double_column {overflow:hidden; zoom:1;}
ul.double_column li {width:300px; float:left;}
dl.spaced dt {margin-bottom:0.4em;}
dl.spaced dd {margin-bottom:1.2em;}




/*よくある質問
---------------------------------------------------------------------------*/
/*FAQボックス全体*/
.faq-outer {
	position:relative;
	margin: auto;
	width:90%; 
}
.faq {
	padding: 0 5px;	/*上下、左右へのボックス内の余白*/
}
/*質問*/
.faq dt {
	border-radius: 3px;		/*枠を角丸にする指定*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	background: #fff;		/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	text-indent: -2em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "Q";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #0dbd9a;			/*アイコンの色*/
	padding-right: 1em;		/*アイコンとテキストの間の余白*/
}

/*回答*/
.faq dd {
	padding: 5px 1em 30px 3em;		/*ボックス内の余白**/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

.faq dt span {text-indent: 0;}





/*会社概要
----------------------------------------*/
.gmap {margin:0 0 10px;}
.gmap iframe {width:100%;}
.outsidePic {float:right; width:240px; padding:0 0 20px 20px; background:#fff;}
.outsidePic img {width:100%;}
.insidePics {overflow:hidden; margin:30px 0;}
.insidePics li {float:left; width:32.666%; margin:0 0 10px 1%;}
.insidePics li:nth-child(3n+1) {clear:left; margin-left:0;}
.insidePics img {width:100%;}    

@media (max-width:600px){
  .outsidePic {float:none; margin:0 auto 20px; padding:0;}
}

/*概要のテーブル*/
/* ------ .table_like [前後1.5em / セル縦余白1em / ボーダー全セル上下 / <dd>オフセット12em] */
.table_like {margin:1.5em 0; border-top:1px #666 dotted; width:100%;}
.table_like dt {padding-top:1em;}
.table_like dd {margin-top:-1.5em; padding:0 0 1em 12em; border-bottom:1px #666 dotted;}

@media (max-width:600px){
  .table_like dt {font-weight:bold; margin-bottom:.4em;}
  .table_like dd {margin:0; padding-left:0;}
}

/*スタッフ紹介
-------------------------------------------*/
.staff_secimg {margin-bottom:25px;}
.staff {
	border:1px #cde solid; 
	margin:30px 0; 
	padding:8px 12px; 
	overflow:hidden; 
	zoom:1;
}
.staff > div:first-child {margin:0 0 .6em; color:#16c; font-size:108%; font-weight:bold;}
.staff h3 {width:100%; float:left; margin:0 0 0.5em; font-size:123.1%;}
.staff span {font-size:108%; padding-right:0.2em;}
.staff p {float:left; margin:0;}
.staff dl {}
.staff dt {font-weight:bold; margin-bottom:.3em;}
.staff dt:before {content:"■";}
.staff dd {margin-bottom:0.8em;}
.staff dd.flat {margin:-1.5em 0 0.8em 5em;}
.staff+.back {margin-top:20px;}
.staff dd ul.square li {width:33%; float:left; white-space:nowrap;}
.staff dd ul.square li.double {width:66%;}
.staff .illust {float:right; width:80px; margin:0 0 10px 20px;}

.staff-image{
	float:left;
	width:100%;
}
.staff-image ul li{
	width:14%;
	float:left;
	text-align:center;
}
.staff-image ul li img{
	height:100px;
	margin:10px;
}	
	
/*取扱商品
--------------------------------------------------------------------*/
/*2カラムブロック（※900px未満　スマホでは１カラム）
--------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.list-half-parts .list-parts {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	margin-bottom: 2rem;	/*ボックスの下に2文字分のスペースを空ける*/
	justify-content:center;
}

/*ブロック内のh4見出し*/
.list-half-parts .list-parts h4 {
	font-size: 1.0rem;	/*文字サイズを1.0倍*/
	color:#0D4DCF;
	margin-bottom:0.5em;
}

/*画像ブロック共通*/
.list-half-parts .image-l-parts, .list-half-parts .image-r-parts{
	display: flex;			/*flexボックスを使う指定*/
	justify-content:center;/*横方向中央に*/
}
.list-half-parts .image-l-parts img, .list-half-parts .image-r-parts img {
	border-radius: 10px;	/*角を丸くする指定。*/
	box-shadow: 5px 5px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
	
}

/*下向き矢印*/
.arrow{
	width:100%;
	text-align:center;
	padding-bottom:20px;
}
.arrow img{
	height:40px;
}


/*画面幅480px以上の追加指定　　PC幅での設定*/
	@media screen and (min-width:480px) {

		/*２カラムを囲むブロック*/
		.list-half-parts .list-parts {
			flex-direction: row;			/*子要素を横並びにする*/
			justify-content: space-between;	/*並びかたの種類の指定*/
			align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
		}
		
		/*画像ブロック共通*/
		.list-half-parts .image-l-parts, .list-half-parts .image-r-parts {
			width: 30%;			/*画像の幅*/
		}
		
		/*画像を右に配置する場合*/
		.list-half-parts .image-r-parts {
			margin-left: 2rem;	/*画像の左側に空けるスペース*/
		}
		
		/*画像を左に配置する場合*/
		.list-half-parts .image-l-parts {
			order: -1;
			margin-right: 2rem;	/*画像の右側に空けるスペース*/
		}

		/*テキストブロック*/
		.list-half-parts .text-parts {
			flex: 1;
		}
		.list-half-parts .list-parts h4 {
		font-size: 1.2rem;	/*文字サイズを1.2倍*/
		}
		

}/*画面幅480px以上の追加指定ここまで*/


.disc-check ul li {
	list-style: none;
	padding: 0 20px 20px 45px;
    background: url("../images/items/check-bg.png")no-repeat top left / 20px;
	padding-left:2em;
}




/*採用情報
--------------------------------------------------*/
.rcrtIntMenu:after {content:""; display:block; clear:both;}
.rcrtIntMenu li {width:32%; float:left; margin:0 0 16px 2%;}
.rcrtIntMenu li:nth-child(3n+1) {margin-left:0; clear:left;}
.rcrtIntMenu a {display:block; text-align:center; text-decoration:none;}
.rcrtIntMenu img {width:100%; margin-bottom:.6em;}
.rcrtIntMenu b {display:inline-block; font-size:108%;}

.intv .pic1 {width:300px; margin:0 25px 20px 0; float:left;}
.intv .pic2 {width:300px; margin:40px 0 20px 25px; float:right;}
.intv img {width:100%;}
.intv h3 {margin:2em 0 1em; font-size:150%; color:#16c;}
.intv .pic1 + h3 {margin-top:0;}
.intv .end {margin-top:4em; text-align:center;}

/* ------ table.bordered */
table.bordered th, table.bordered td {padding:0.4em 0.7em; border:1px #ccc solid;}
table.bordered th {background:#f2f2f2;}
.full {width:100%;}
.almost_full {width:98%; margin-left:1%; margin-right:1%;}
table.noborder th, table_noborder td {padding:0.1em 1em 0.1em 0; font-weight:normal;}
.th_nowrap th {white-space:nowrap;}

@media (max-width:600px){
  .intv .pic1,
  .intv .pic2 {width:38%;}
}

/*サイトマップ
--------------------------------------------------------*/
.sitemap-list{
	width:100%;
}
.sitemap-list ul li {
	list-style: none;
	padding: 0 20px;
    background: url("../images/sitemap/entry_header_bg.gif")no-repeat top left / 20px;
	padding-left:2em;
	width:25%;
	margin: 1.5%;
	float:left;
}




/*お知らせ　一覧
----------------------------------------------------------*/
.date{
	width:100%;
	float:left;
	font-size:120%;
	font-weight:bold;
	padding-top:40px;
	margin-bottom:30px;
}

.date span{
	font-size:80%;
	margin-right:30px;
	font-weight:normal;
}

/*お問合せ
----------------------------------------------------------*/

/*まめ知識
---------------------------------------------*/
.tips h3 {margin-top:40px; clear:both;}
.tips dl{
	padding:0 0 0 20px;
}
.tips dt {margin:1em 0 0.2em; font-weight:bold; color:#39d;}
.tips dd {padding-left:16px; margin-bottom:2em;}
.tips dd b {display:block; margin-left:-16px;}
.tips ul li {float:left; width:143px; padding-bottom:6px; text-align:center;}
.tips ul li img {display:block; margin:4px auto;}
.tips .back {clear:both;}
.pic_included dt {clear:both;}

@media (max-width:600px){
  div.pic_r {float:none; padding:10px 0; text-align:center;}
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption,
.ta2 caption {
	border: 1px solid #999;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	background: #cce6f6;		/*背景色*/
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
}
/*テーブル１行目に入った見出し部分（※tamidashi）*/
.ta1 th.tamidashi,
.ta2 th.tamidashi {
	width: auto;
}
/*ta1,ta2共通設定*/
.ta1,
.ta2 {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 20px;
}
.ta1, .ta1 td, .ta1 th,
.ta2, .ta2 td, .ta2 th {
	word-break: break-all;
	border: 1px solid #999;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi,
.ta2 th.tamidashi {
	width: auto;
	text-align: left;	/*左よせ*/
	background: #cce6f6;	/*背景色*/
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 20%;	/*幅*/
	text-align: center;	/*センタリング*/
	background: #eee;	/*背景色*/
	font-weight:normal;
}
/*ta2の左側ボックス*/
.ta2 th {
	background: #fffeba;	/*背景色*/
}
/*ta2の右側ボックス*/
.ta2 td {
	text-align: center;	/*センタリング*/
}
/*料金ページの追加設定（CMS用）*/
.ta1.price td {
	text-align: right;
}
.ta1.price tr.total th {
	background: #b7e0ee;
	font-size: 150%;
}
.ta1.price tr.total td {
	background: #deeff4;
	font-weight: bold;
	font-size: 150%;
}



/*施工事例　一覧　　
---------------------------------------------------------------------------*/
/*事例のタイトル*/
.green-title{
	color:#4FAF1C!important;
}

.check {
	background: #aaa;
	color:#fff;
	padding: 10px 25px !important;
	margin-bottom: 10px;
	margin-top:20px;
	border-radius: 3px;
	font-weight:bold;
}
.check a {color: #fff;}

.check-after {
	background: #5FAC0D;
	color:#fff;
	padding: 10px 25px !important;
	margin-bottom: 10px;
	margin-top:20px;
	border-radius: 3px;
	font-weight:bold;
}
.check-after a {color: #fff;}

.check-comment {
	background: #A4C383;
	color:#fff;
	padding: 10px 25px !important;
	margin-bottom: 10px;
	margin-top:20px;
	border-radius: 3px;
	font-weight:bold;
}
.check-after a {color: #fff;}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*デフォルトでは非表示に*/
body .nav-fix-pos-pagetop a {display: none;}
/*ボタンの設定*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 100;position: fixed;
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	bottom: 40px;		/*下から40pxの場所に配置*/
	right: 1%;			/*右から1%の場所に配置*/
	background: #20b1e1;	/*背景色*/
	color: #fff;		/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	border-radius: 50%;		/*円形にする*/
	animation-name: opa1;	/*冒頭のkeyframesの名前*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;	/*背景色*/
}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/

ol {padding: 0 20px 20px 45px;}

/*「NEW」アイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 70%;		/*文字サイズ*/
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

/*その他
---------------------------------------------------------------------------*/
.look {color:#fff;background: #666;padding:5px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb30 {margin-bottom: 30px !important;}
.clear {clear: both;}
.color1 {color: #20b1e1 !important;}
.color2 {color: #ff0000 !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.l {text-align: left !important;}
.fr {float: right;margin-left: 2%;margin-bottom: 20px;}
.fl {float: left;margin-right: 2%;margin-bottom: 20px;}
.big1 {font-size: 200%;letter-spacing: 0.2em;}
.mini1 {font-size: 80%;}
.sh {display: none;}
.em{font-weight:bold;}


/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1050px){
	
	
/*コンテンツ（mainとsubブロックを囲むボックス）
---------------------------------------------------------------------------*/
#contents {
	clear: both;overflow: hidden;
	box-sizing: border-box;
	padding: 2%;	/*ボックス内の余白*/
	background: #fff;	/*背景色*/
	/*box-shadow: 0px 0px 8px rgba(0,0,0,0.1);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.1は10%色がついた状態の事。*/
	margin-bottom: 40px;	/*下のフッターブロックとの間に空けるスペース*/
}

/*ヘッダーお問合せボタン
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
#fsize {
	display: none;	/*非表示にする*/
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*スマホ用メニューブロック*/
#menubar-s {
	overflow: auto;
	height: 100%;
	text-align: left;
	position: fixed;
	z-index: 101;
	top: 0px;
	width:100%;
	animation-name: opa1;		/*冒頭のkeyframesの名前*/
	animation-duration: 0.5S;	/*アニメーションの実行時間。0.5秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}
/*メニュー１個あたりの設定*/
#menubar-s li a {
	display: block;
	text-decoration: none;
	padding: 10px;	/*メニュー内の余白*/
	border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
	background: #20b1e1;	/*背景色*/
	font-size: 14px;		/*文字サイズ*/
	color: #fff;		/*文字色*/
}
/*英語表記（飾り文字）*/
#menubar-s li a span {
	font-size: 12px;	/*文字サイズ*/
	margin-left: 20px
}
/*PC用メニューを非表示にする*/
#menubar {display: none;}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: fixed;
	z-index: 102;
	top: 5px;	/*上からの配置場所指定*/
	right: 2%;	/*右からの配置場所指定*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 50px;		/*幅*/
	height: 50px;		/*高さ*/
	border-radius: 10%;	/*円形にする。この行削除すれば正方形になります。*/
}
/*三本バーアイコン*/
#menubar_hdr.close {
	background: #20b1e1 url(../images/icon_menu.png) no-repeat center top/50px;	/*背景色、アイコンの読み込み、上半分(top)を表示、幅50px*/
}
/*閉じるアイコン*/
#menubar_hdr.open {
	background: #1A469E url(../images/icon_menu.png) no-repeat center bottom/50px;	/*背景色、アイコンの読み込み、上半分(bottom)を表示、幅50px*/
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
/*main  左側メイン
---------------------------------------------------------------------------*/
#main{
	float: none;
	overflow: hidden;
	padding-top:15px;
	width: 100%;
}

/*右側コンテンツ*/
#sub {
	float: none;
	width: 100%;
	margin:0 auto;
	overflow: hidden;
}

#sub .box2 ul li{
	width:22%;
	margin:0 1.5% 15px 1.5%;
	float:left;
}
	
/*フッター
	----------------------------------------*/
/*ボックス全体*/
#footermenu {
	width:100%;
	overflow: hidden;
	font-size: 80%;	/*文字サイズを少し小さく*/
	padding: 20px 0;	/*上下、左右へのボックス内の余白*/
}
/*住所*/
#footermenu .address{
	width:30%;
	padding:10px 1.5% 130px 1.5%;
	float:left;
	background:url("../images/ft_comment.gif")no-repeat center bottom!important;
}
#footermenu .address img{
	width:auto;
}
/*１列分の設定*/
#footermenu ul {
	float: left;	/*左に回り込み*/
	width: 30%;		/*今回は４列作ったので、下のmarginを含めて25%になるよう指定。５列にしたいならこの行は19%にする。*/
	margin-left: 3%;
}
	
/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new{
	position:relative; 
	background:url(../images/home/info_bg.gif); 
	margin-bottom:30px;
	padding:10px;
}

/*右角　テープの位置　微調整*/
#new p {
	position:absolute; 
	top:-5px; left:150px;
}

/*鈴村浴槽株式会社の特長
-----------------------------*/
/*ボックス内のfigure画像*/
#contents .list-business figure {
	float: left;	/*左に回り込み*/
	width: 96%;		/*画像の幅*/
	margin: 2%;	
	text-align:center;
}
#contents .list-business figure img{
	/*border-radius:6px;*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-business .text {
	float: left;	/*左に回り込み*/
	width: 96%;		/*幅*/
	margin: 2%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}
	
/*その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #side {display: none;}
.big1 {font-size: 150%;letter-spacing: normal;}
.sh {display:block;}
.pc {display:none;}

}



/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header .inner {
	position: static;
	height: auto;
	padding: 10px;
	background-position: right center;	/*背景画像の配置場所の変更。右側に寄せる。*/
}
/*ロゴ画像*/
header #logo {
	position: static;
	margin: 0 auto;
}

/*ヘッダー内メニュー（「資料請求・お問い合わせ」と「見学のお申し込み」ボタン）
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#headermenu {
	position: static;
	margin: 0 auto;
}
/*メニュー１個あたり*/
#headermenu li {
	float: none;
	max-width: 300px;	/*最大幅*/
	margin: 10px auto;
	text-align: center;
}

}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	

/*HOME  スズムラ　4分割
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#contents .list-container-suzumura{
	display:flex;
	flex-direction: column; /*子要素を横並び*/
	padding:0px;
	flex-wrap: wrap;				/*折り返す指定*/
}
#contents .list4-suzumura {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: row;/*子要素をたて並び*/
	align-items: center;
	width:100%;
	margin-bottom: 0px;	/*ボックス同士に空けるスペース*/	
}
/*ボックス内のfigure画像*/
#contents .list4-suzumura figure{
	width:15%;
	margin:0px 10px 5px 0;
	padding:5px;
	text-align:center;
	background:#fff;
	border-radius:50%;
	box-shadow: 3px 3px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
}


/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list4-suzumura .text {
	text-align:left!important;
	margin:10px auto 0;
	width:92%;
	font-size:100%;
}

	

	
/*セカンドページ　タイトル
	-----------------------------------------------------------*/
#main h1{
	margin:10px 0 30px 0;
	background:url("../images/secand_title_bg.jpg")no-repeat left bottom / 180%;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	padding-left:0em;
	line-height:3.0em;
	border-radius:4px;
	text-align:center;
	
}

/*文字サイズ指定
---------------------------------------------------------------------------*/
body {
	font-size: 12px;
	font-size: 2.93vw;
}
	
/*サイトの最大幅の設定
---------------------------------------------------------------------------*/
.inner {
	max-width: 1200px;	/*サイトの最大幅。これ以上大きくならない。*/
	margin: 0 2%;
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ロゴ画像*/
header #logo {
	width: 220px;
	padding: 10px 0;
}

/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption,
.ta2 caption {
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1,ta2共通設定*/
.ta1, .ta1 td, .ta1 th,
.ta2, .ta2 td, .ta2 th {
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 100px;
}
	
	
	
/*フッター
	----------------------------------------*/
/*ボックス全体*/
#footermenu {
	width:100%;
	overflow: hidden;
	font-size: 100%;	/*文字サイズを少し小さく*/
	padding: 20px 0;	/*上下、左右へのボックス内の余白*/
}
/*住所*/
#footermenu .address{
	width:90%;
	padding:10px 2.5% 130px 2.5%;
	float:left;
	background:url("../images/ft_comment.gif")no-repeat center bottom!important;
}
#footermenu .address img{
	width:auto;
}
/*１列分の設定*/
#footermenu ul {
	float: left;	/*左に回り込み*/
	width: 94%;		/*今回は４列作ったので、下のmarginを含めて25%になるよう指定。５列にしたいならこの行は19%にする。*/
	margin-left: 3%;
	margin-bottom:30px;
}
#footermenu ul li{
	margin:8px 0;
}
	
	
#new dl {
	padding:5px 0px;
	overflow:hidden;
}

/*日付*/
#new dt {
	float: left;
	width: 100%;
	letter-spacing: 0.1em;
	padding:8px 0 8px 10px;
}
/*記事*/
#new dd {
	padding:8px 0px 9px 1em;
/*	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
}
	
/*お客様の声　施工事例　一覧
--------------------------*/
/*画像*/
#main .list figure {
	float: left;	/*左に回り込み*/
	width: 96%;		/*画像の幅*/
	margin: 2%;	/*画像の右側に空けるスペース*/
}
/*テキストブロック*/
#main .text {
	float: left;	/*左に回り込み*/
	width: 100%;		/*画像の幅*/
	margin:10px 0;
}
	
/*list4（4分割を2分割へ）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#contents .list-container{
	display:flex;
	flex-direction: row;
	padding:20px 5px;
	flex-wrap: wrap;
}
#contents .list4 {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items:center;
	width:48%;
	margin:1%;
	/*margin-bottom: 1px;	/*ボックス同士に空けるスペース*/	
}
	
/*リンクバナー*/	
#sub .box2 ul li{
	width:47%;
	margin:0 1.5% 15px 1.5%;
	float:left;
}
	
/*鈴村浴槽株式会社の特長
	-------------------------------*/
/*ボックスの設定*/
#contents .list-business {
	position: relative;
	overflow: hidden;
	display: inherit;
	align-items: center;
	/*background: #000;	/*背景色*/
	/*color: #fff;		/*文字色*/
	margin-bottom: 30px;	/*ボックス同士に空けるスペース*/
}
/*ボックス内のfigure画像*/
#contents .list-business figure {
	float: left;	/*左に回り込み*/
	width: 94%;		/*画像の幅*/
	margin: 3%;	
	text-align:center;
}
#contents .list-business figure img{
	/*border-radius:6px;*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
#contents .list-business .text {
	float: left;	/*左に回り込み*/
	width: 94%;		/*幅*/
	margin: 3%;		/*外側に取るスペース。これがないと枠ギチギチに文字が表示されます。*/
}
	
/*施工の流れ
----------------------------------*/
dl.flow dd.last {margin-top:35px; padding:0 20px 20px; background:0;}
	
/*会社概要
--------------------------------------*/
.pic_r {
	float:none; padding:0 0 10px 0px;
	}
.pic_r img{
	width:90%;
	margin:0 5%;
}
	
	
/*スタッフ紹介
	--------------------------------------------*/
.staff dd ul.square li {
	width:100%; 
	float:none; 
	white-space:nowrap;
	}
.staff dd ul.square li.double {
	width:100%;
	}

/*その他
---------------------------------------------------------------------------*/
.ws,.wl {width: 94%;}

}