@import url("../../style/hdl25icons.css");
@import url("showLargeImg.css");

/*
.hdl_page_table main #main_top h1 {
	font-size: 1.9rem;
	letter-spacing: 0.075em;
	padding: 0.75em 0.75em 0.4em;
	border-bottom: 2px solid #a47434;
}
*/
#main_left_container #selection_opt_container {
	padding: 0;
}

#selection_opt_container > label input {
	display: none;
}


#selection_opt_container > label {
	padding: 0.5em 0;
	color: #000;
	font-size: 0.95rem;
	display: block;
	letter-spacing: 0.05em;
	border: 1px solid #787878;
	border-width: 0 0 1px;
	margin-bottom: 0.75em;
	width: 100%;
	text-align: center;
	width: 100%;
	background-color: #d8e8e8;
	border-radius: 4px 4px 0 0;
}

#selection_opt_container form[name="devf"] {
	font-size: 0.85rem;
	display: flex;
	/*	column-gap: 3px;*/
	margin: 0.75em 0;
	padding: 0 0.5em 0.75em 0.75em;
	border-bottom: 1px dashed #AAA;
	flex-wrap: nowrap;
}

#selection_opt_container form {
	padding-left: 0.5em;
	padding-right: 0.5em;
}

#devf label {
	word-break: keep-all;
	padding-top: 3px;
}

#devf input#devnum {
	margin: 0 4px;
	min-width: 0;
	/*	flex: 1;*/
}

#devf input {
	padding: 0 0;
}

#devf input[type="submit"] {
	padding: 0 3px;
}

.hdl_page_table .content_inner .content_overview div.series_txt p {
	padding: 1.05em 0;
	line-height: 1.4em;
	color: #2b2002;
}

.hdl_page_table .content_inner .content_overview div.series_txt {
	padding: 0 0 0 1.75em;
	background-color: #fffef2;

}

.hdl_page_table .content_inner:has(.selection_series_links input:checked) .content_overview {
	border-bottom: none;
}

.hdl_page_table .content_inner:has(.selection_series_links input:checked) .content_overview div.series_txt,
.hdl_page_table .content_inner:has(.selection_series_links input:checked) div#legend {
	/*	border-top: 1px solid #694b08;*/
}

.hdl_page_table #main_inner .content_container .content_inner:has(.result_none) .content_overview {
	/*	border-bottom: 1px solid #754a15;*/
}


.hdl_page_table .content_overview div.series_txt p::before {
	content: '\025c0';
	box-shadow: none;
	left: -1.5em;
	position: absolute;
	color: #cf7e00;
	font-size: 0.8em;
}

div#legend {
	background-color: #F7F7F7;
	padding: 0 15px 16px;
	/*	display: none;*/
}

#selection_ret_container.result_none:has(#selection_ret_table) #legend {
	display: none;
}

.selection_series_links {
	padding: 1.15em 1.95em 1.5em;
	border: 1px solid #878684;
	text-align: center;
	color: #49432a;
	position: relative;
	margin: 0 0 0.35em;
	border-radius: 0.5em;
	box-shadow: 4px 4px 5px #e9e4d5;
	background-image: linear-gradient(0deg, #fbfbfb, transparent);
	display: none;
}

.selection_series_links input {
	display: none;
}

.selection_series_links:has(input:checked) {
	display: block;
}

.selection_series_links label {
	position: absolute;
	right: 0.5em;
	top: 0.25em;
}

.selection_series_links label::after {
	content: '[X]';
	font-size: 0.85em;
	color: #736763;
	cursor: pointer;
}

.selection_series_links ul {
	display: flex;
	justify-content: space-between;
}

.selection_series_links ul li {
	display: inline-block;
	border: 1px solid #95790e;
	/* border-radius: 0.25em; */
	background: linear-gradient(135deg, #013b83 0, #013b83 4%, #f5f5f1 4%, transparent 45%, transparent 90%, #dbdbdb), linear-gradient(to right, rgba(255, 255, 255, 1.0) 30%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.0) 80%), url(https://www.hdl.co.jp/img/slide01.jpg) no-repeat right -3em top 0 / 19em;
	margin-top: 0.75em;
	text-align: left;
	flex-basis: 48.5%;
}

.selection_series_links ul li:nth-of-type(2) {
	display: inline-block;
	border: 1px solid #95790e;
	/* border-radius: 0.25em; */
	background: linear-gradient(135deg, #b30303 0, #b30303 4%, #f5f5f1 4%, transparent 45%, transparent 90%, #dbdbdb), linear-gradient(to right, rgba(255, 255, 255, 1.0) 30%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.0) 80%), url(https://www.hdl.co.jp/img/slide02.jpg) no-repeat right -7em top -1.5em / 24em;
	margin-top: 0.75em;
	text-align: left;
	flex-basis: 48.5%;
}

.selection_series_links ul li:hover {
	opacity: 0.7;
}

.selection_series_links ul li span {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1.7em;
	line-height: 1.4;
	text-shadow: 1px 1px 2px #e9e9e9;
	display: block;
	letter-spacing: 0.1em;
}

.selection_series_links ul a {
	text-decoration: none;
	color: #371a05;
	display: block;
	padding: 0.85em 1.75em 1.15em 2.5em;
	letter-spacing: 0.15em;
}

.selection_series_links ul a:link {
	color: #371a05;
}

/*
.content_inner:has(.selection_series_links input:checked) .content_overview {
	margin-bottom: 0;
}

.content_inner .content_overview {
	margin-bottom: 0.25em;
}
*/

.content_inner:has(.result_set) .content_overview {
	display: none;
}

.content_inner:has(.result_set) .selection_series_links {
	margin-top: 0.75em;
}

.result_none #selection_ret_table p {
	padding: 2em 1.25em;
}

select#subfam {
	display: none;
}

select#defsub {
	display: block;
}

.selgrp select.expandOpt {
	position: absolute;
	width: 12em;
	z-index: 10;
	box-shadow: 3px 3px 3px #999;
}

.selgrp select.expandOpt + a {
	position: absolute;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 10;
}

a.defBtn {
	display: block;
	border: 1px solid rgb(153, 153, 153);
	text-align: center;
	border-radius: 2px;
	background-color: rgb(255, 255, 255);
	position: relative;
	margin-top: 2px;
	bottom: 0px;
	padding: 1px;
	cursor: pointer;
	z-index: 2;
	font-size: 0.85rem;
}

div.zaiko a.defBtn {
	margin-top: 0px;
	padding: 0;
}




a.defBtn:hover {
	background-color: #DDDDDD;
}

#selection_ret_container table {
	width: 100%;
	border-top: 1px solid #999999;
	/*table-layout:fixed;*/
	border-collapse: collapse;
}

#undev table {
	clear: both;
	float: none;
}

#selection_ret_container #fsale {
	/*position:relative;*/
	padding-top: 1px;
}

.undevTable {
	border-top: 3px double #cccccc;
	padding-top: 2em;
}

.onSaleTable h3,
.undevTable h3 {
	position: relative;
	padding: 0 6em 0 1.5em;
	color: #fffff7;
	letter-spacing: 1em;
	width: auto;
	margin-bottom: 0.5em;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	line-height: 1.65em;
	display: inline-block;
	color: #FFF;
	font-size: 1.3em;
	background: linear-gradient(90deg, #143a46 5%, #FFFFFF 100%);
	text-shadow: 1px 1px 2px #777;
}

#selection_ret_table .undevTable h3 {
	background: linear-gradient(90deg, #5e838f 5%, #FFFFFF 100%);
}

.onSaleTable h3::after,
.undevTable h3::after {
	content: '';
	height: 1px;
	width: 13em;
	background: linear-gradient(45deg, transparent 0%, #997b12 20%, #FFFFFF 65%, #d4bd80 85%, transparent 100%);
	display: inline-block;
	margin-left: 0.5em;
	vertical-align: middle;
}


#selection_ret_table table td,
#selection_ret_table table th {
	font-size: 0.8em;
	word-wrap: break-word;
}

#selection_ret_table td img {
	vertical-align: middle;
}

#selection_ret_table table th#th02,
#selection_ret_table table th#th07,
#selection_ret_table table th#th08 {
	word-break: keep-all;
}

#selection_ret_table thead th {
	line-height: 1.2;
}

#selection_ret_table thead th.sort {
	background-color: #b2dddd;
	cursor: pointer;
}

#selection_ret_table thead th.sort:hover {
	background-color: #def9f9;
}

#selection_ret_table td span.devnum,
#selection_ret_table td a span {
	white-space: nowrap;
}

#selection_ret_table td span.devnum span {
	color: #0000BB;
	font-weight: bold;
	padding: 0px 1px;
}

#selection_ret_table td.pricell {
	white-space: nowrap;
}

#selection_ret_table tr.noTable td {
	padding: 8px 10px;
	text-align: left;
}

#selection_ret_table table li {
	line-height: normal;
	white-space: nowrap;
}

#selection_ret_table table li span.imgtxt {
	display: block;
	font-size: 12px;
	height: 16px;
	line-height: 16px;
}

div.selgrp label {
	display: block;
	text-align: center;
	word-break: keep-all;
	font-size: 0.8rem;
}

#HDLseries label,
.ckbox label,
.zaiko label {
	font-size: 0.8rem;
}

.clearfix {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	row-gap: 0.2em;
}

.clearfix label {
	flex-basis: 48%;
}

#selection_opt_container .clearfix::after {
	display: none;
}

p.hdl_counter {
	text-align: center;
}

form[name="selguide"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 0.75em;
}

div.selgrp {
	position: relative;
	flex-basis: 48%;
}

div.selgrp select {
	width: 100%;
	font-family: sans-serif;
}

div.price select option {
	text-align: right;
}


div.ckbox,
div#HDLseries,
div.zaiko {
	height: auto;
}

div.ckbox label {
	text-align: left;
	height: 1.6em;
	/*width: 120px;*/
}

div.zaiko {
	margin-bottom: 0.75em;
}

div.ckbox div label,
div#HDLseries div label,
div.zaiko div label {
	float: left;
	/*	width: 105px;*/
	height: 1.6em;
	margin-right: 2px;
	white-space: nowrap;
}

div.ckbox div,
div#HDLseries div,
div.zaiko div {
	border: 1px solid #999999;
	margin-top: 1px;
	padding: 4px;
	background-color: #FFFFFF;
}

hr {
	border: 0;
	border-top: 1px solid #999999;
	/*margin: 14px 0;*/
}

div.attn ul {
	margin: 0.75em 0 2em;
	font-size: 0.8rem;
	color: #444;
}

label.selected,
input.selected {
	background-color: #FFFFDD;
}

#nav #acmLink,
#nav #xcmLink,
#nav #allLink {
	display: block;
	text-align: center;
	width: 225px;
	border: 1px solid #999999;
	margin: 20px auto;
	font-size: 1.6em;
	border-radius: 5px;
}

#nav #acmLink a,
#nav #xcmLink a,
#nav #allLink a {
	font-family: arial;
	text-decoration: none;
	display: block;
	padding: 24px 0 25px;
	color: #666666;
}

#nav #acmLink:hover,
#nav #xcmLink:hover,
#nav #allLink:hover {
	background-color: #E0E0E0;
}

#nav #acmLink {
	background-color: #F0FFE1;
}

#nav #xcmLink {
	background-color: #E8F4F9;
}

#nav #allLink {
	background-color: #FFFFFF;
}

table.allTB td.XCM {
	background-color: #fff5f5;
}

table.allTB td.ACM {
	background-color: #edf5ff;
}

a#link2top {
	text-decoration: none;
	color: #333;
	background-color: #FFF;
	display: block;
	width: 180px;
	margin: 0 auto 6px;
	border: 1px solid #666;
	border-radius: 4px;
	height: 15px;
}

a#link2top:hover {
	background-color: #EDEDED;
}

p#noreturn {
	padding-left: 15px;
}

/*small window*/
div.smallwin #wrapper div.smallwin {
	height: 120px;
	overflow: hidden;
}

div.smallwin form select {
	width: auto !important;
}

div.smallwin #wrapper {
	background: #FFFFFF;
}

div.smallwin #nav {
	width: 100%;
}

div.smallwin #selection_ret_container {
	width: 100%;
}

div.smallwin #nav {
	border-bottom: 1px solid #999999;
}

div.smallwin div.ckbox div label {
	width: auto;
}

#selmore {
	display: none;
}

div.smallwin div.smallwin #selmore {
	display: block;
	margin: 4px 1px 20px 4px;
	/*
position:absolute;
left:15px;
top:30px;
*/
}

#selmore a {
	text-decoration: none;
	color: #333;
	background-color: #DEDEDE;
	border: 1px solid #666;
	padding: 4px 8px;
	border-radius: 5px;
}

div.smallwin div.smallwin #logo p,
div.smallwin div.smallwin #logo {
	/*float:left;*/

}

#selfoot {
	padding-left: 8px;
}

#selection_pagination {
	background-color: #dfdfdf;
	margin: 0 0 2em;
	text-align: center;
	width: auto;
	font-size: 0.9rem;
}

#selection_pagination span,
#selection_pagination a {
	padding: 0 6px;
}

span.dvficon {
	background-color: #E3E3E3;
	border: 1px solid #585858;
	color: #585858;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 15px;
	padding: 0 4px;
}

#selection_ret_table td img.z_icon {
	display: none;
	margin: 0 auto;
}

div.hdl_one_column .content_overview div.series_txt p::before {
	display: none;
}

.menu01_body div.hdl_one_column main h1.main_h1_small {
	background: linear-gradient(to right, rgba(255, 255, 255, 1.0) 30%, rgba(255, 255, 255, 0.9) 80%, rgba(255, 255, 255, 0.0) 95%), url(https://www.hdl.co.jp/img/slide01.jpg) no-repeat right -1.75em top -0.5em/ 7em;
	padding-right: 2em;
}

.menu02_body div.hdl_one_column main h1.main_h1_small {
	background: linear-gradient(to right, rgba(255, 255, 255, 1.0) 30%, rgba(255, 255, 255, 0.9) 80%, rgba(255, 255, 255, 0.0) 95%), url(https://www.hdl.co.jp/img/slide02.jpg) no-repeat right -2.5em center / 8em;
	padding-right: 2em;
}


div.hdl_one_column .content_inner .content_overview div.series_txt p {
	padding: 0.75em 0;
}

div.hdl_one_column .content_inner .content_overview div.series_txt {
	padding-left: 0;
}

div.hdl_one_column #selection_wrapper {
	display: flex;
	column-gap: 20px;
}

div.hdl_one_column div#legend {
	background-color: #FFF;
	padding: 11px 0.5em 0.5em;
}

div#selection_opt_container {
	width: 260px;
	margin-top: 10px;
	padding: 0;
	border-radius: 10px;
	background-color: #fcfcfc;
	box-shadow: 7px 7px 0px #d5dbd9;
	border: 1px solid #7d8a87;
	margin-bottom: 1.5em;
	box-sizing: border-box;
}

#selection_opt_container > label {
	padding: 0.7em 0 0.5em;
	color: #000;
	font-size: 0.95rem;
	display: block;
	letter-spacing: 0.05em;
	border: 1px solid #787878;
	border-width: 0 0 1px;
	margin-bottom: 0.75em;
	width: 100%;
	text-align: center;
	width: 100%;
	background-color: #d8e8e8;
	border-radius: 10px 10px 0 0;
}

#selection_opt_container form[name="devf"] {
	padding: 0 10px 0.75em 13px;
}

#selection_opt_container form {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 8px;
}

#selection_opt_container div.selgrp label {
	background-color: #f1eede;
	border-radius: 1em;
	margin-bottom: 4px;
}

#selection_opt_container #HDLseries > label,
#selection_opt_container div.ckbox > label,
#selection_opt_container .zaiko > label {
	text-align: center;
	background-color: #f1eede;
	border-radius: 1em;
	margin-bottom: 4px;
	display: block;
}