@charset "utf-8";
/* CSS Document */

/*

更新履歴：2021年2月15日12:58　editor(n)

・特定ブランド　テスト用

*/



#test_sh * {
	margin: 0px;
	padding: 0px;
	border: 0;
	word-break: break-all !important;
	font-family: "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo !important;
	font-weight: bold !important;
	letter-spacing: 0.01em !important;
	font-style: normal !important;
	list-style: none !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;

}


/* IE Fixed スムーズスクロールバグhack */
html { overflow: hidden\0; height: 100%\0; }
html { overflow: hidden\9; height: 100%\9; }
body { overflow: auto\0; height: 100%\0; }
body { overflow: auto\9; height: 100%\9; }



#test_sh .window-box {
	min-height: 900px;
	position: relative;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
}


#test_sh .window {
	width: 100%;
	position: absolute;
	text-align: center;
}

#test_sh .window::before {
	background-color: rgba(0,0,0,0.1);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
}


#test_sh .window p.brand {
	position: absolute;
	top: 400px;/* calc(50vh - 50px) */
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	font-size: 40px;
	color: #FFF;
}


#test_sh div.box {
	position: relative;
	width: 100%;
	padding-top: 60%;
	text-align: center;
	overflow: hidden;
}


#test_sh div.box img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: auto;
}


#test_sh p {
	letter-spacing: 2px;
}


#test_sh div.box p.itemname {
	position: absolute;
	top: 5%;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	font-size: 72px;
	line-height: 0.8em;
	color: #333;
}

#test_sh div.box p.itemname span {
	font-size: 26px;
}

#test_sh div.box p.itemtext {
	position: absolute;
	top: 25%;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	font-size: 17px;
	line-height: 1.5em;
	color: #333;
}




/* #test_sh .image-001 {  } */
#test_sh .image-002 { background-image: url("https://www.rakuten.ne.jp/gold/roomy/700/cate_tokusyu/balmuda/img/balmuda_top03.jpg"); }
#test_sh .image-003 { background-image: url("https://www.rakuten.ne.jp/gold/roomy/700/cate_tokusyu/balmuda/img/balmuda_top04.jpg"); }

#test_sh .image-bra-ymz { background-image: url("brand_ymz.jpg"); }




#test_sh .image-001::before,
#test_sh .image-002::before,
#test_sh .image-003::before {
	/* 透過した黒を重ねる */
	background-color: rgba(0,0,0,0.1);
	/* どの範囲に重ねるかを指定 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
}


/* 画像テキスト左右の上下マージンと背景色 */
#test_sh .bgcolor {
	background-color: #F4F4F4;
	padding: 100px 0;
	text-align: center;
}


/* テンプレート流用する場合　一番最初のコラムのマージンを削除 */
#page_tmp .page_column:first-child {
	margin-top: 100px;
}






/* ----------------------------------------------------------
　　画像テキスト左右と文字サイズ
---------------------------------------------------------- */


#test_sh .img-left,
#test_sh .img-right {
	width: 100%;
	padding-bottom: 40%;
	position: relative;
}

#test_sh .img-left>img,
#test_sh .img-right>img {
	position: absolute;
	top: 0;
	width: 40%;
}

#test_sh .img-left>img {
	left: 5%;
}

#test_sh .img-right>img {
	right: 5%;
}

#test_sh .img-left p {
	position: absolute;
	top: 20%;
	right: 8%;
	width: 40%;
	margin: 0 auto;
	text-align: left;
}

#test_sh .img-right p {
	position: absolute;
	top: 20%;
	left: 8%;
	width: 40%;
	margin: 0 auto;
	text-align: left;
}

/* FONTS */
#test_sh .img-left p,
#test_sh .img-right p {
	font-size: 17px;
	line-height: 1.9em;
	color: #303030;
}

#test_sh .img-left p strong,
#test_sh .img-right p strong {
	font-size: 48px;/* 54px */
	line-height: 1.3em;
	display: inline-block;
	padding-bottom: 0.1em;
}


/* コラム時のtext開始高さ可変 */
@media screen and (max-width: 1800px) {
	#test_sh .img-left p,
	#test_sh .img-right p {top: 19%;}
}
@media screen and (max-width: 1700px) {
	#test_sh .img-left p,
	#test_sh .img-right p {top: 16%;}
}
@media screen and (max-width: 1600px) {
	#test_sh .img-left p,
	#test_sh .img-right p {top: 13%;}
}
@media screen and (max-width: 1500px) {
	#test_sh .img-left p,
	#test_sh .img-right p {top: 10%;}
}
@media screen and (max-width: 1400px) {
	#test_sh .img-left p,
	#test_sh .img-right p {top: 8%;}
	
	#test_sh .img-left p strong br,
	#test_sh .img-right p strong br {	display: none;}
}
@media screen and (max-width: 1300px) {
	#test_sh .img-left p,
	#test_sh .img-right p {top: 6%;}
}
@media screen and (max-width: 1200px) {
	#test_sh .img-left p,
	#test_sh .img-right p {top: 4%;}
}
@media screen and (max-width: 1100px) {
	#test_sh .img-left p,
	#test_sh .img-right p {top: 2%;}
	
	#test_sh div.box p.itemtext {font-size: 2.0vw;}
	#test_sh div.box p.itemtext br {display: none;}
}
@media screen and (max-width: 1000px) {
	#test_sh .img-left p,
	#test_sh .img-right p {top: 0%;}
}











/* FONTS */ 
@media screen and (max-width: 960px) {

	
	#test_sh div.box p.itemname {
		position: absolute;
		top: 5%;
		left: 0;
		right: 0;
		margin: 0 auto;
		text-align: center;
		font-size: 6.25vw;
		line-height: 0.8em;
		color: #333;
	}

	#test_sh div.box p.itemname span {
		font-size: 2.29166666vw;
	}

	#test_sh div.box p.itemtext {
		position: absolute;
		top: 25%;
		left: 0;
		right: 0;
		margin: 0 auto;
		text-align: center;
		line-height: 1.5em;
		color: #333;
	}
	
	
	#test_sh div.box p.itemtext br {
		display: none;
	}
	
	
	#test_sh .img-left p,
	#test_sh .img-right p {
		top: 0%;
		font-size: 2.9vw;/* 18px */
		line-height: 1.9em;
		color: #303030;
	}
	

	#test_sh .img-left p strong,
	#test_sh .img-right p strong {
		font-size: 5.32395vw;/* 45px */
		line-height: 1.3em;
		letter-spacing: 0.01em;
	}

}









/* ----------------------------------------------------------
　　末尾ブランドリンク
---------------------------------------------------------- */


/* フル幅ブランドリンク */
.window-box2 {
	min-height: 900px;
	position: relative;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
}

.window2 {
	width: 100%;
	position: absolute;
	text-align: center;
}

.window2::before {
	background-color: rgba(0,0,0,0.1);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
}



.brand-link {
	display: block;
	background-color: hsla(0,0%,0%,0.90);
	padding: 50px;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	position: absolute;
	top: calc( 450px - 170px );
	text-decoration: none;
	transition: background-color 1.5s ease-in;
}

.brand-link:hover {
	background-color: hsla(0,0%,0%,1.00);
	opacity: 1.0;
	transition: background-color 0s;
}


.brand-link img {
	max-width: 390px;
	margin-bottom: 1em;
}


.brand-button {
	margin: 1em auto;
	background-color: #CCC;
	font-weight: 800;
	color: #000;
	padding: 1em;
	border-radius: 5px;
	max-width: 300px;
	transition: background-color 1.5s ease-in;
}

.brand-link:hover .brand-button {
	background-color: #EEE;
	transition: background-color 0s;
}
/* フル幅ブランドリンク　ここまで */











/* ----------------------------------------------------------
　　お買い物ガイドリンク
---------------------------------------------------------- */



#shoping-guide {
		max-width: 860px;
		margin: 50px auto 0;
	}
	
	
	#shoping-guide > a {
		display: block;
		background-color: hsla(19,8%,45%,0.90);
		text-align: center;
		padding: 30px;
		max-width: 840px;
		text-decoration: none;
		font-size: 20px;
		overflow: hidden;
		box-sizing: border-box;
		color: #FFF;
		font-weight: 800;
		border-radius: 5px;
		transition: background-color 1.5s ease-in;
	}
	
	
	#shoping-guide > a:hover {
		background-color: hsla(19,8%,45%,1.00);
		transition: background-color 0s;

	}