@charset "utf-8";

/* ===== 移管対応（fan独立方針・2026-07-02） =====
   新デザインは #container{min-width:100%}(fluid) かつ reset.css の border-box を前提に作られているため、
   旧移管の content-box 一括や .no-touch #container{min-width:980px} は付けない（新設計と衝突するため）。
   device-gate(max-device-width:1280px)は下層方針どおり温存（PC/SP切替はtouchベース。SP確認は実機/デバイスモード）。 */
/* MENUナビ表示。fan独立でbiz style.css非読込のため実質defaultだが、hide対策で明示block維持 */
.page-handdry #hamburger_nav_area {
  display: block;
}
/* SP(touch)時は共有ヘッダーのPC用共通nav(holdings-titlenav)を非表示（旧同様） */
.touch .page-handdry .titlenavigation.holdings-titlenav {
  display: none;
}
/* 移管ページ共通: reset.css の body{background:#f2f2f2} を #page(全体ラッパ)を白くして覆う */
#page {
  background-color: #fff;
}


/* custom */
.page-handdry .bottom_nav {
    margin: 20px 0;
}
.page-handdry .bottom_nav .middle_section {
    background: #fff;
}

/* ----------------------------------------------------------------------- 
handdry common
-------------------------------------------------------------------------*/
.page-handdry .pc-only {
    display: block;
}
.page-handdry .sp-only {
    display: none;
}

.flex__block {
	display: flex;
}
.flex__block.just-spabe {
	justify-content: space-between;
}
.flex__block.just-flexen {
	justify-content: flex-end;
}
.flex__block.flexdir-row-r {
	flex-direction:row-reverse;
}
.flex__block.flex-wr {
	flex-wrap: wrap;
}
.flex__block.align-flexen {
	align-items: flex-end;
}
.flex-sp__block {
	display: block;
}

.t-center {
	text-align: center;
}

/* SP Responsive (handdry common)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.page-handdry .pc-only {
		display: none;
	}
	.page-handdry .sp-only {
		display: block;
	}
	.flex__block {
		display: block;
	}
	.flex-sp__block {
		display: flex;
	}
	.flex-sp__block.align-ce {
		align-items: center;
	}

	/*common custom*/
	.page-handdry .column-three_child {
		border-top:10px #fff solid !important;
		border-left:none !important;
	}
	/* /common custom*/
}


/* ----------------------------------------------------------------------- 
handdry hero--page-products
-------------------------------------------------------------------------*/
.hero--page-products {
	padding-bottom:50px;
}
.hero--page-products .flex__block {
	border-top:1px #e2e2e2 solid;
	border-bottom:1px #e2e2e2 solid;
	background-color: #F2F2F2;
}
.hero--page-products .hero-institution-maintexts {
position: absolute;
top:0;
right:0;
}
.hero--page-products .hero-institution-texts {
	position: absolute;
	right:0;
	bottom:0;
	z-index: 1;
	width:100%;
	height:102px;
	background-color: #999999;
}
@media only screen and (max-width: 1100px) {
	.hero--page-products .hero-institution-texts {
		height:77px;
	}
}
.hero--page-products .hero-institution-texts dl {
	width:78%;
	margin:2% 2% 0 auto;
 	color:#fff;
	text-align: left;
}
@media only screen and (max-width: 1200px) {
	.hero--page-products .hero-institution-texts dl {
		width:80%;
		margin:2% 4% 0 auto;
	}
}
@media only screen and (max-width: 1100px) {
	.hero--page-products .hero-institution-texts dl {
		width:89%;
		margin:1% 2% 0 auto;
	}
}
.hero--page-products .hero-institution-texts dt {
   font-size:18px;
   font-weight: bold;
}
@media only screen and (max-width: 1100px) {
	.hero--page-products .hero-institution-texts dt {
		font-size:16px;
	}
}
.hero--page-products .hero-institution-texts dd {
	font-size:15px;
}
@media only screen and (max-width: 1100px) {
	.hero--page-products .hero-institution-texts dd {
		font-size:13px;
	}
}
.hero--page-products .flex__block--left {
	position: relative;
	width:600px;
	text-align: right;
}
@media only screen and (max-width: 1200px) {
	.hero--page-products .flex__block--left {
		text-align: center;
	}
}
.hero--page-products .flex__block--right {
	width:600px;
}
.hero--page-products .flex__block--left img {
	max-width: 488px;
	width:100%;
}
@media only screen and (max-width: 1200px) {
	.hero--page-products .flex__block--left img {
		width:90%;
	}
}
.hero--page-products .flex__block--right img {
	width:100%;
}

/* SP Responsive (handdry hero--page-products)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.hero--page-products {
		padding-bottom:50px;
	}
	.hero--page-products .hero-institution-maintexts {
		position:static;
		}
	.hero--page-products .hero-institution-texts {
		position: static;
		width:100%;
		height:auto;
	}
	.hero--page-products .hero-institution-texts dl {
		width:87%;
		margin:0 auto;
		padding:2%;
	}
	.hero--page-products .hero-institution-texts dt {
	   font-size:3.7vw;
	   font-weight: bold;
	}
	.hero--page-products .hero-institution-texts dd {
		font-size:3.3vw;
	}
	.hero--page-products .flex__block--left {
		width:100%;
		margin-bottom:0;
	}
	.hero--page-products .flex__block--left img {
		max-width:inherit;
		width:100%;
	}
	.hero--page-products .flex__block--right {
		width:100%;
		margin-bottom:0;
	}
}


/* ----------------------------------------------------------------------- 
handdry lineup-
-------------------------------------------------------------------------*/
.page-handdry .lineup-handdry .custom-h2_area {
	margin-bottom:15px;
}
.page-handdry .lineup-handdry .custom-h2_area h2 {
	display: flex;
	align-items: center;
	font-size: 14px;
}
.page-handdry .lineup-handdry .custom-h2_area img {
	width:181px;
	margin-right:10px;
}
.page-handdry .lineup-handdry .column-three_caption .custom-price {
	display: block;
	padding-top:10px;
	font-size:14px;
	font-weight:normal;
}

/* SP Responsive (handdry lineup- )
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.page-handdry .lineup-handdry .custom-h2_area {
		margin-bottom:0;
		padding-bottom:10px;
	}
	.page-handdry .lineup-handdry .custom-h2_area img {
		max-width:210px;
		width:45%;
		margin-right:5px;
	}
	.page-handdry .lineup-handdry .custom-h2_area span {
		display: inline-block;
		width:55%;
		text-align: left;
	}
}
@media only screen and (max-width: 400px) {
	.page-handdry .lineup-handdry .custom-h2_area span {
		font-size:3.5vw;
	}
}