@charset "utf-8";

/* SIDE MENU */
#sidemenu-soft-sauna			{ display:block;}
#sidebana1 .bana-tylo,
#sidebana1 .bana-firewood,
#sidebana1 .bana-soft		{ display:none;}

body.soft-sauna-index #sidemenu .soft-index a,
body.soft-sauna-feature #sidemenu .soft-feature a,
body.soft-sauna-heater #sidemenu .soft-heater a,
body.soft-sauna-room #sidemenu .soft-room a,
body.soft-sauna-accessory  #sidemenu .soft-accessory a,
body.soft-sauna-download  #sidemenu .soft-download a, 
body.soft-sauna-faq  #sidemenu .soft-faq a {
	color:#fff; 
	background-color: #000;
	background-image:url("/img/icon_link_white.svg");
	background-position: 0.45rem 0.6rem;
	background-repeat: no-repeat;
	-webkit-background-size: 1rem auto;
	   -moz-background-size: 1rem auto;
	     -o-background-size: 1rem auto;
	        background-size: 1rem auto;
	text-decoration:none; 
	cursor:default;
}


/*  ソフトサウナ トップ  */

#productsPoint h3 {
	margin-bottom: 1rem;
}
#productsPoint > div {
	margin-bottom: 20px;
}


#index-point-1 {
	width: 100% !important;
	height: auto;
	margin-bottom: 40px !important;
    display: flex;                  /* フレックスボックスの有効化 */
    justify-content: center;        /* 左右の中央揃え */
    align-items: flex-end;         /* 下寄せ */
    background-image: url(/soft-sauna/img/index_section01_img01.webp);
    background-repeat: no-repeat;
    background-size: 723px;         /* 画像をコンテナにフィットさせる */
    background-position: top center;    /* 画像の位置を中央に設定 */
}
#index-point-1 .text-box {
	width: 550px;
	margin-top: 370px;
	padding: 25px 30px 0 30px;
	background-color: #fff;
}


#index-point-2 {
	width: 100% !important;
	height: 270px;
    display: flex;                  /* フレックスボックスの有効化 */
    flex-direction: column;         /* 縦方向に並べる */
    justify-content: center;        /* 上下の中央揃え */
    align-items: flex-end;         /* 右寄せ */
    background-image: url(/soft-sauna/img/index_section01_img02.webp);
    background-repeat: no-repeat;
    background-size: 723px;         /* 画像をコンテナにフィットさせる */
    background-position: top center;    /* 画像の位置を中央に設定 */
}
#index-point-2 .text-box {
	width: 270px;
	padding: 25px 20px 25px 30px;
	background-color: #fff;
}

#index-point-3 {
	width: 100% !important;
	height: 250px;
    display: flex;                  /* フレックスボックスの有効化 */
    flex-direction: column;         /* 縦方向に並べる */
    justify-content: center;        /* 上下の中央揃え */
    align-items: flex-start;       /* 左寄せ */
    background-image: url(/soft-sauna/img/index_section01_img03.webp);
    background-repeat: no-repeat;
    background-size: 723px;         /* 画像をコンテナにフィットさせる */
    background-position: top center;    /* 画像の位置を中央に設定 */
}
#index-point-3 .text-box {
	width: 220px;
	padding: 25px 30px 25px 20px;
	background-color: #fff;
}

#index-point-4 {
	width: 100% !important;
	height: 270px;
    display: flex;                  /* フレックスボックスの有効化 */
    flex-direction: column;         /* 縦方向に並べる */
    justify-content: center;        /* 上下の中央揃え */
    align-items: flex-end;         /* 右寄せ */
    background-image: url(/soft-sauna/img/index_section01_img04.webp);
    background-repeat: no-repeat;
    background-size: 723px;         /* 画像をコンテナにフィットさせる */
    background-position: top center;    /* 画像の位置を中央に設定 */
}
#index-point-4 .text-box {
	width: 270px;
	padding: 25px 20px 25px 30px;
	background-color: #fff;
}

/*  ソフトサウナの特徴  */

#featureBox	 { 
	position:relative; 
	height:569px; 
	margin:15px 0 40px 0;
}
#featureBox > picture img {
	width: 723px;
	height: auto;
}


#featureBox dl { position:absolute; color: #fff;}
#featureBox dt { 
	font-weight: bold;
	margin-bottom: 10px;
}
#featureBox dd {
	font-size: 0.85rem;
}
#feature01					{ width:216px; left:57px; top:78px;}
#feature02					{ width:218px; left:20px; top:217px;}
#feature03					{ width:360px; left:300px; top:454px;}
#feature04					{ width:183px; left:512px; top:38px;}
#feature05					{ width:187px; left:525px; top:176px;}
#feature06					{ width:206px; left:497px; top:338px;}

#feature04 dt {
	text-align: right;
	margin-right: 8px;
}
#feature05 dt {
	text-align: right;
	margin-right: 3px;
}
#feature06 dt {
	text-align: right;
	margin-right: 4px;
}

body.soft-sauna-generator .section .dotBox .installation ul {
	margin-bottom: 0 !important;
}


#recommendBox-soft-sauna					{ width:723px; background:url("/soft-sauna/img/bg_line1.gif") 0 0 repeat-y; overflow:hidden;}
#recommendBox-soft-sauna .clearfix			{ width:741px; margin:0 0 0 -18px;}
#recommendBox-soft-sauna li.li0			{ width:352px; padding:0 0 0 18px; float:left;}
#recommendBox-soft-sauna li.li0 p			{ 
	width:330px;
}
#recommendBox-soft-sauna li.li0 p.image			{ 
	text-align: center;
}
#recommendBox-soft-sauna li.li0 .link li	{ font-size:0.9rem;}
#recommendBox-soft-sauna1					{ padding:0 0 4px 0; background:url("/soft-sauna/img/bg_line2.gif") 18px 100% no-repeat;}
#recommendBox-soft-sauna2					{ padding:4px 0 0 0;}

#recommendBox-soft-sauna h3 {
	margin-bottom: 1rem;
	font-size: 0.9rem;
}
#recommendBox-soft-sauna h3 span {
	display: inline-block;
	margin-bottom: 0.5rem;
	color: #0c4d9c;
	font-weight: normal;
}

#recommendBox-soft-sauna h3 span.recommendBox1_point {
	font-family: 'Montserrat', sans-serif;
}
#recommendBox-soft-sauna h3 span.recommendBox1_number {
	padding-left: 0.5rem;
	font-size: 1.7rem;
	font-family: 'Oxygen', sans-serif;
	
}

/* 北欧式 ソフトサウナのススメ */
body.soft-sauna-feature #recommendBox1 li:nth-child(1) p.image img {
	padding: 15px 0 15px;
	width: 80%;
}
body.soft-sauna-feature #recommendBox1 li:nth-child(2) p.image img {
	padding: 40px 0 15px;
	width: 85%;
}

body.soft-sauna-feature #recommendBox2 li:nth-child(1) p.image img {
	padding: 15px 0 15px;
	width: 60%;
}
body.soft-sauna-feature #recommendBox2 li:nth-child(2) p.image img {
	padding: 30px 0 15px;
	width: 55%;
}

/* 違いの表組み */

#compareTb-soft-sauna { 
	margin:10px 0 0 0; 
	border-top:solid 1px #cccccc; 
	border-right:solid 1px #cccccc; 
	border-bottom:solid 1px #cccccc;
}
#compareTb-soft-sauna thead th:first-child {
	width: 13%; 
	border-left:solid 1px #cccccc; 
}
#compareTb-soft-sauna thead th	 { 
	width: 29%;
	border-bottom:dotted 1px #dadada; 
	border-left:dotted 1px #d2d2d2;
}
#compareTb-soft-sauna thead td				{ border-bottom:dotted 1px #dadada; border-left:solid 1px #cccccc;}
#compareTb-soft-sauna tbody th				{ border-bottom:dotted 1px #dadada; border-left:solid 1px #cccccc;}
#compareTb-soft-sauna tbody td				{ border-bottom:dotted 1px #dadada; border-left:dotted 1px #dadada;}
#compareTb-soft-sauna thead th				{ padding:10px 0 8px 0; font-weight:bold; text-align:center; background-color:#f1f1f1;}
#compareTb-soft-sauna thead th:first-child	{ background-color: #f1f1f1;}
#compareTb-soft-sauna tbody th				{ padding:10px 8px; font-weight:bold; text-align:center; background-color:#f9f9f9; vertical-align:middle; white-space:nowrap;}
#compareTb-soft-sauna tbody td				{ padding:10px 10px 10px 18px;}

#compareTb-soft-sauna .sort-sauna-note {
	font-size: 0.8rem;
	margin: 5px 0 0;
}

/* === 2列目の外枠だけ太くする === */

/* 左側外枠 */
#compareTb-soft-sauna td:nth-child(2),
#compareTb-soft-sauna th:nth-child(2) {
  border-left: 4px solid #38a7db;
}

#compareTb-soft-sauna td:nth-child(1),
#compareTb-soft-sauna th:nth-child(1) {
  border-right: 4px solid #38a7db;
}

/* 右側外枠 */
#compareTb-soft-sauna td:nth-child(2),
#compareTb-soft-sauna th:nth-child(2) {
  border-right: 4px solid #38a7db;
}

/* 上側外枠（ヘッダー行） */
#compareTb-soft-sauna thead th:nth-child(2) {
  border-top: 4px solid #38a7db;
}

/* 下側外枠（最後の行） */
#compareTb-soft-sauna tbody tr:last-child td:nth-child(2) {
  border-bottom: 4px solid #38a7db;
}



/* 体験談 */

#feature-feedback #feedback-1,
#feature-feedback #feedback-3 {
	margin-top: 20px;
	display: flex;                /* Flexboxを使用 */
	flex-direction: row;             /* アイテムを横並びに */
	justify-content: flex-start;  /* 左寄せ */
	align-items: center;          /* 縦中央揃え */
	overflow: hidden;
}

#feature-feedback #feedback-2 {
	margin-top: 10px;
	margin-bottom: 30px;
	display: flex;                /* Flexboxを使用 */
	flex-direction: row-reverse;  /* 並び順を逆にする */
	align-items: center;          /* 縦中央揃え */
	overflow: hidden;
}

#feature-feedback .feedback-icon {
	width: 130px;
}
#feature-feedback .feedback-comment {
	width: 450px;
}

#feature-feedback #feedback-1 .feedback-comment .commnetBubble,
#feature-feedback #feedback-3 .feedback-comment .commnetBubble {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-left: 30px;
  padding: 25px;
  border-radius: 4px;
  background-color: #f2f2f2;
  text-align: left;
}

#feature-feedback #feedback-1 .feedback-comment .commnetBubble::after,
#feature-feedback #feedback-3 .feedback-comment .commnetBubble::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 10px 30px 10px 0;
  border-color: transparent #f2f2f2 transparent transparent;
  translate: -100% -50%;
}

#feature-feedback #feedback-2 .feedback-comment {
	margin-right: 80px;
}

#feature-feedback #feedback-2 .feedback-comment .commnetBubble {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-right: 30px;
  padding: 25px;
  border-radius: 4px;
  background-color: #f2f2f2;
  text-align: left;
}

#feature-feedback #feedback-2 .feedback-comment .commnetBubble::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 10px 0 10px 30px;
  border-color: transparent transparent transparent #f2f2f2;
  translate: 100% -50%;
}


/*  設置資料ダウンロード  */

.download-table table { 
	width:100%; 
	border:solid 1px #cccccc;
}
.download-table th { 
	padding:10px 0; 
	font-weight:bold; 
	text-align:center; 
	border-right: 1px dotted #dbdbdb;
	border-bottom: 1px dotted #dbdbdb;
	background-color: #f1f1f1;
	white-space: nowrap;
}
.download-table td { 
	padding:10px 20px; 
	border-right: 1px dotted #dbdbdb;
	border-bottom: 1px dotted #dbdbdb;
	white-space: nowrap;
}

.download-table td:nth-of-type(1){
  font-weight: bold;
}
.download-table td:nth-of-type(1) span {
  font-weight: normal;
}



/*  サウナヒーター機器用テーブル  */
#generator .download-table td:nth-of-type(1){
  width: 40%;
  text-align: center;
}
#generator .download-table td:nth-of-type(2){
  width: 30%;
}
#generator .download-table td:nth-of-type(3){
  width: 30%;
}




.download-table table span { 
	font-size: 0.75rem;
}
.download-table td img {
	width: 100%;
}

.download-table table ul.catalog li {
	margin-bottom: 0.5rem !important;
}

/*
.download-table tr:last-child th {
	border-bottom: none;
}
.download-table tr:last-child td {
	border-bottom: none;
}
*/
.download-table th,
.download-table td { 
	vertical-align:middle;
	font-size: 0.8rem;
}
.download-table table .nowrap { 
	white-space: nowrap;
}
.download-table table .text-center {
	text-align: center;
}
.table-scroll p.scroll-caution {
	display: none;
}

/*  設置資料ダウンロード  2023-12-15 */

body.soft-sauna-download #in-page-link ul {
	margin: 1rem 0 2rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}

body.soft-sauna-download #in-page-link li { 
	padding:0 1.5rem 1rem 1rem; 
	font-weight:bold; 
	background:url("/img/icon_link_arrow_down.svg") -0.2rem 0 no-repeat;
	-webkit-background-size: 15px auto;
	   -moz-background-size: 15px auto;
	     -o-background-size: 15px auto;
	        background-size: 15px auto;
}

body.soft-sauna-download #in-page-link li:last-child {
	padding-right: 0;
}

#accessory .download-table td.BRILLIANT img {
  width: 50%;
}




/* ########## スマホ版 ########## */

@media screen and (max-width:640px) {
	
	body.soft-sauna-index #sidemenu .soft-index a,
	body.soft-sauna-feature #sidemenu .soft-feature a,
	body.soft-sauna-heater #sidemenu .soft-heater a,
	body.soft-sauna-room #sidemenu .soft-room a,
	body.soft-sauna-accessory  #sidemenu .soft-accessory a,
	body.soft-sauna-accessory  #sidemenu .soft-download a { 
		color:#fff; 
		background-color: #000;
		background-image:url("/img/icon_link_white.svg");
		background-position: 0.45rem 1.15rem;
		background-repeat: no-repeat;
		-webkit-background-size: 1rem auto;
		   -moz-background-size: 1rem auto;
		     -o-background-size: 1rem auto;
		        background-size: 1rem auto;
		text-decoration:none; 
		cursor:default;
	}


	/*  ソフトサウナ トップ  */
	
	#productsPoint img {
		width: 100%;
	}

	#productsPoint > div {
		margin-bottom: 40px;
	}
	
	#index-point-1,
	#index-point-2,
	#index-point-3,
	#index-point-4 {
	    margin: 0;
	    width: 100%;
	    height: auto;
	    background-image: none;
	    display: block;

	}
	#index-point-1 .text-box,
	#index-point-2 .text-box,
	#index-point-3 .text-box,
	#index-point-4 .text-box {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 15px 0 0 0;
	}


	/*  ソフトサウナの特徴  */


	

	#featureBox	 { 
		margin-bottom: 40px;
		height:auto; 
	}
	#featureBox > div {
		margin: 25px 0 0;
		text-align: center;
	}
	#featureBox > div picture img {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}
	#featureBox dl { 
		position:static;
		margin-bottom: 1.5rem;
		color: #000;
	}
	#featureBox dt { 
		margin-bottom: 5px;
	}
	#featureBox dd {
		font-size: 0.85rem;
	}
	#feature01, #feature02, #feature03, #feature04, #feature05, #feature06 { 
		width:100%; 
		left:0; 
		top:0;
	}
	
	#feature04 dt, #feature05 dt, #feature06 dt {
		text-align: left;
		margin-right: 0;
	}


	
	#recommendBox-soft-sauna { 
		width:100%; 
		background-image: none;
	}
	#recommendBox-soft-sauna .clearfix { 
		width:100%; 
		margin:0 0 0 -18px;
	}
	#recommendBox-soft-sauna li.li0 { 
		width:100%; 
		padding:0 0 0 18px; 
		float:none;
	}
	#recommendBox-soft-sauna li.li0 p { 
		width:100%;
	}
	#recommendBox-soft-sauna li.li0 p.image { 
		text-align: center;
	}
	#recommendBox-soft-sauna li.li0 .link li { 
	
	}
	#recommendBox-soft-sauna1 { 
		padding:0 0 0 0;
		background-image: none;
	}
	#recommendBox-soft-sauna2 { 
		padding:0 0 0 0;
	}
	
	#recommendBox-soft-sauna h3 {
		margin-bottom: 0.5rem;
		font-size: 1rem;
	}
	#recommendBox-soft-sauna h3 span {
		margin-bottom: 0;
	}
	
	#recommendBox-soft-sauna h3 span.recommendBox1_point {
		font-size: 0.7rem;
	}
	#recommendBox-soft-sauna h3 span.recommendBox1_number {
		padding-left: 0.3rem;
		padding-right: 0.5rem;
		font-size: 1.5rem;
	}
	
	/* ソフトサウナの特徴 */
	body.soft-sauna-feature #recommendBox-soft-sauna1 li:nth-child(1) p.image img {
		padding: 15px 0 25px;
		width: 150px;
	}
	body.soft-sauna-feature #recommendBox-soft-sauna1 li:nth-child(2) p.image img {
		padding: 15px 0 25px;
		width: 160px;
	}
	body.soft-sauna-feature #recommendBox-soft-sauna1 li:nth-child(3) p.image img {
		padding: 15px 0 25px;
		width: 200px;
	}
	body.soft-sauna-feature #recommendBox-soft-sauna2 li:nth-child(1) p.image img {
		padding: 15px 0 25px;
		width: 200px;
	}
	body.soft-sauna-feature #recommendBox-soft-sauna2 li:nth-child(2) p.image img {
		padding: 15px 0 25px;
		width: 220px;
	}
	body.soft-sauna-feature #recommendBox-soft-sauna2 li:nth-child(3) p.image img {
		padding: 15px 0 25px;
		width: 150px;
	}


	/* 違いの表組み */
	
	#compareTb-soft-sauna {
		width: 700px;
	}
	
	#compareTb-soft-sauna tbody th { background-color:#f9f9f9 !important;}

	#compareTb-soft-sauna thead th:nth-child(1) {
		width: 100px;
	}

	#compareTb-soft-sauna thead th:nth-child(2),
	#compareTb-soft-sauna thead th:nth-child(3),
	#compareTb-soft-sauna thead th:nth-child(4) {
		width: 200px;
	}

	#compareTb-soft-sauna th:first-child,
	#compareTb-soft-sauna  td:first-child {
	    position: sticky; /* スティッキーを有効にする */
	    left: 0; /* 左側に固定 */
	    background-color: #fff; /* 背景色を指定，必要に応じて */
	    z-index: 1; /* 重なりを考慮 */
	}

	#compareTb-soft-sauna .download-table thead th:nth-child(1) { 
		background-color: #f1f1f1 !important;
	}

	/* 体験談 */
	
	#feature-feedback #feedback-1,
	#feature-feedback #feedback-2,
	#feature-feedback #feedback-3 {
		display: flex;              /* Flexboxを有効にする */
		flex-direction: column;     /* 要素を縦に並べる */
		align-items: center;        /* 水平方向に中央揃え */
		margin: 0　0　40px;
	}

	#feature-feedback .feedback-icon {
		width: 200px;
	}
	#feature-feedback .feedback-comment {
		width: 100%;
		margin: 0 0 30px;
		display: flex;              /* Flexboxを有効にする */
		align-items: center;        /* 水平方向に中央揃え */
		
	}
	#feature-feedback #feedback-2 .feedback-comment {
		margin-right: 0 !important;
	}

	#feature-feedback #feedback-1 .feedback-comment .commnetBubble,
	#feature-feedback #feedback-2 .feedback-comment .commnetBubble,
	#feature-feedback #feedback-3 .feedback-comment .commnetBubble {
		position: relative;
		display: inline-block;
		width: 260px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 20px;
		padding: 25px;
		border-radius: 4px;
		background-color: #f2f2f2;
		text-align: left;
	}

	#feature-feedback #feedback-1 .feedback-comment .commnetBubble::after,
	#feature-feedback #feedback-2 .feedback-comment .commnetBubble::after,
	#feature-feedback #feedback-3 .feedback-comment .commnetBubble::after {
		content: "";
		position: absolute;
		top: 0;
		right: 50%;
		left: 50%;
		border-style: solid;
		border-width: 0 10px 15px 10px;
		border-color: transparent transparent #f2f2f2;
		translate: -50% -100%;
	}
	#feature-feedback #feedback-2 .feedback-comment .commnetBubble::after {

	}

	
	/*  ドライサウナルーム アウトレット販売  */
	body.soft-sauna-outlet .productsList .product {
		margin-top: 2rem;
	}
	

	/*  設置資料ダウンロード  */
	.table-scroll {
		overflow-x: scroll;
	}
/*
	.table-scroll table {
		width: 100% !important;
		white-space: nowrap;
	}
*/
	.table-scroll p.scroll-caution {
		display: block;
		background-color: #0392ca;
		color: #fff;
		padding: 0.4rem 0.8rem;
		margin-bottom: 0.8rem;
	}


	.download-table table { 
		width:750px; 
	}
	
	/*  サウナヒーター機器用テーブル  */
	#generator .download-table td:nth-of-type(1){
	  width: 150px;
	  text-align: center;
	}
	#generator .download-table td:nth-of-type(2){
	  width: 300px;
	}
	#generator .download-table td:nth-of-type(3){
	  width: 300px;
	}

	#generator .download-table th:first-child,
	#generator .download-table td:first-child {
	    position: sticky; /* スティッキーを有効にする */
	    left: 0; /* 左側に固定 */
	    background-color: #fff; /* 背景色を指定，必要に応じて */
	    z-index: 1; /* 重なりを考慮 */
	}

	#generator .download-table thead th:nth-child(1) { 
		background-color: #f1f1f1 !important;
	}


	


	/*  設置資料ダウンロード  2023-12-15 */
	body.soft-sauna-download #in-page-link ul {
		margin: 1rem 0 2rem;
		display: block;
	}
	
	body.soft-sauna-download #in-page-link li { 
		padding:0 0 0.5rem 1rem; 
		background:url("/img/icon_link_arrow_down.svg") -0.2rem 0.2rem no-repeat;
		-webkit-background-size: 15px auto;
		   -moz-background-size: 15px auto;
		     -o-background-size: 15px auto;
		        background-size: 15px auto;
	}



}