@charset "UTF-8";

/* 製品詳細（ＰＣ） ファーストビュー用 */

.goods_tit02_ {

}

/* .map_(PC) */
@media screen and (min-width: 960px) {
	.block-goods-comment2 .map_ {
		position: relative;
		padding-bottom: 25px;
		overflow: hidden;
		padding-top: 1.5em;
	}
	.block-goods-comment2 .map_ .tit_ {
		position: absolute;
		left: 0;
		top: 0;
		font-size: 18px;
		color: var(--main-color);
	}
	.block-goods-comment2 .map_ .tit_sub_ {
		margin-bottom: 20px;
		padding: 8px 0 7px;
		border: 2px solid #ebebeb;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
	}
	.block-goods-comment2 .map_ .tit_sub_.blue_ {
		color: #4a6bad;
	}
	.block-goods-comment2 .map_ .tit_sub_.yellow_ {
		color: #ff9c08;
	}
	.block-goods-comment2 .map_ .img_ {
		padding-top: 10px;
	}
	.block-goods-comment2 .map_ img {
		max-width: none;
	}

	.block-goods-comment2 .map_.map_large_ .tit_ {
		max-width: 610px;
	}


	.block-goods-comment2 .map_ .select_colors_4x5_,
	.block-goods-comment2 .map_ .select_colors_3x8_
	 {
		width: 300px;
		margin: 10px 0 10px auto;
		display: flex;
		flex-flow: wrap;
		gap: 5px 6px;
	}
	.block-goods-comment2 .map_ li.btn_:not(.blank_),
	.block-goods-comment2 .map_ dd.btn_:not(.blank_) {
		cursor: pointer;
	}
	.block-goods-comment2 .map_ li.btn_:not(.blank_):hover,
	.block-goods-comment2 .map_ dd.btn_:not(.blank_):hover {
		opacity: 0.8;
	}
	.block-goods-comment2 .map_ li.btn_,
	.block-goods-comment2 .map_ dd.btn_ {
		height: 43px;
		overflow: hidden;
	}
	.block-goods-comment2 .map_ li.btn_ img,
	.block-goods-comment2 .map_ dd.btn_ img {
		position: absolute;
		top: -100%;
		right: -100%;
		bottom: -100%;
		left: -100%;
		display: block;
		width: auto;
		height: 100%;
		margin: auto;
	}

	/* 4x5 */
	.block-goods-comment2 .map_ .select_colors_4x5_ {
		padding: 6px 0 45px 52px;
		background: url(../../img/goods/pc/bg_map4x5.png) 0 0 / cover no-repeat;
		overflow: hidden;
	}
	.block-goods-comment2 .map_ .select_colors_4x5_ .btn_ {
		width: 56px;
	}
	/* 3x8 */
	.block-goods-comment2 .map_ .select_colors_3x8_ {
		padding: 6px 0 45px 54px;
		background: url(../../img/goods/pc/bg_map3x8.png) 0 0 / cover no-repeat;
		gap: 6px;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_ .btn_ {
		width: 73px;
	}
	/* 3*8 flex */
	.block-goods-comment2 .map_ .select_colors_3x8_.flex {
		position: relative;
		padding: 0 0 40px 40px;
		background: none;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.flex .icon {
		position: absolute;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.flex .icon.vertical_top {
		top: 0;
		left: 0;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.flex .icon.vertical_bottom {
		left: 0;
		bottom: 45px;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.flex .icon.horizontal_left {
		bottom: 0;
		left: 45px;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.flex .icon.horizontal_right {
		right: 0;
		bottom: 0;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.flex ul {
		padding: 0 0 6px;
		border-left: 2px solid #b7bcb5;
		border-bottom: 2px solid #b7bcb5;
		overflow: auto;
		flex: 1;
		display: flex;
		flex-flow: wrap;
		gap: 6px;
	}

	/* 3x8x2 */
	.block-goods-comment2:has(.maptxt_3x8x2_) .box_ {
		float: left;
		width: 264px;
		margin-top: 18px;
	}
	.block-goods-comment2:has(.maptxt_3x8x2_) .box_ + .box_ {
		float: right;
	}
	.maptxt_3x8x2_ {
		padding-left: 54px;
		overflow: hidden;
	}
	.maptxt_3x8x2_ li {
		float: left;
		width: 63px;
		margin-right: 6px;
		font-size: 10px;
		text-align: center;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.map3x8x2_ {
		padding-bottom: 6px;
		background-image: url(../../img/goods/pc/bg_map3x8x2.png);
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.map3x8x2_ .btn_ {
		width: 63px;
	}

	/* 4x2 */
	.block-goods-comment2 .map_ .select_colors_4x2_ {
		overflow: hidden;
		display: flex;
		flex-flow: wrap;
		gap: 9px 10px;
		width: 304px;
		margin: 15px 0 15px auto;
	}
	.block-goods-comment2 .map_ .select_colors_4x2_ .btn_ {
		float: left;
		width: 68px;
		height: 84px;
		overflow: hidden;
		margin: 0;
	}
	/* 2x2 */
	.block-goods-comment2 .map_ .select_colors_2x2_ {
		margin: 0 0 0 auto;
		width: 300px;
	}
	.block-goods-comment2 .map_ .select_colors_2x2_ {
		/*min-height: 325px;*/
		padding: 6px 34px 0 82px;
		background: url(../../img/goods/pc/4935059042clv_bg01.png) no-repeat 22px 43px;
		overflow: hidden;

		width: 300px;
		float: right;
	}
	.block-goods-comment2 .map_ .select_colors_2x2_ .select_color_:nth-child(1) {
		float: left;
		width: 72px;
		margin: 0;
	}
	.block-goods-comment2 .map_ .select_colors_2x2_ .select_color_:nth-child(2) {
		float: right;
		width: 72px;
		margin: 0;
	}
	.block-goods-comment2 .map_ .select_colors_2x2_ .select_color_ .tit_sub_ {
		margin-bottom: 15px;
		padding: 4px 0;
		font-size: 12px;
		line-height: 1.16;
	}
	.block-goods-comment2 .map_ .select_colors_2x2_ dd {
		margin-bottom: 6px;
	}

	/* map active */
	.block-goods-comment2 .map_ .select_colors_4x5_ .btn_,
	.block-goods-comment2 .map_ .select_colors_3x8_ .btn_,
	.block-goods-comment2 .map_ .select_colors_2x2_ .btn_,
	.block-goods-comment2 .map_ .select_colors_4x2_ .btn_ {
		position: relative;
	}
	.block-goods-comment2 .map_ .select_colors_4x5_ .btn_:after,
	.block-goods-comment2 .map_ .select_colors_3x8_ .btn_:after,
	.block-goods-comment2 .map_ .select_colors_2x2_ .btn_:after,
	.block-goods-comment2 .map_ .select_colors_4x2_ .btn_:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		border: 2px solid #004130;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: opacity .3s linear;
		-o-transition: opacity .3s linear;
		transition: opacity .3s linear;
		opacity: 0;
	}
	.block-goods-comment2 .map_ .select_colors_4x5_ .btn_.is_active_:after,
	.block-goods-comment2 .map_ .select_colors_3x8_ .btn_.is_active_:after,
	.block-goods-comment2 .map_ .select_colors_2x2_ .btn_.is_active_:after,
	.block-goods-comment2 .map_ .select_colors_4x2_ .btn_.is_active_:after {
		opacity: 1;
	}
	.to_online_counseling {
		margin: 18px auto 0;
        padding: 10px;
        max-width: 100%;
        min-width: 0;
        width: 16em;
        font-size: 14px;
        background: #ffffff;
        border: solid 1px var(--main-color);
        color: var(--text-link);
        clear: both;
        display: block;
        text-align: center;
	}
	/* 1*2 */
	.select_colors_1x2_ {
		margin-top: 1.5em;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 1.5rem 10px;
	}
	.select_colors_1x2_ .select_color_ {
		width: calc((100% - 10px) / 2);
		margin: 0;
	}
	.select_colors_1x2_ .select_color_ .tit_sub_ {
		margin-bottom: 8px;
	}
	.block-goods-comment2 .map_ .select_colors_1x2_ .select_color_:has(.btn_.is_active_)  .tit_sub_ {
		border-color: var(--main-color);
	}
	.select_colors_1x2_ .select_color_ dd.btn_ {
		height: auto;
		width: 50%;
		margin: 0 auto;
	}
	.select_colors_1x2_ .select_color_ dd.btn_ img {
		position: static;
        width: auto;
        height: auto;
        max-width: 100%;
	}

}
@media screen and (max-width: 959px) {
	.block-goods-comment2 .map_ .tit_sub_ {
		margin-bottom: 10px;
		padding: 8px 0 7px;
		border: 2px solid #ebebeb;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
	}
	.block-goods-comment2 .map_ .tit_sub_.blue_ {
		color: #4a6bad;
	}
	.block-goods-comment2 .map_ .tit_sub_.yellow_ {
		color: #ff9c08;
	}
	.block-goods-comment2 .map_ .img_ {
		padding-top: 16px;
		padding-bottom: 25px;
		overflow: hidden;
	}
	.block-goods-comment2 .map_ ul {
		display: flex;
		flex-flow: wrap;
	}
	/* 4x5 */
	.block-goods-comment2 .map_ .select_colors_4x5_ {
		overflow: hidden;
		padding: 2% 0 15% 15%;
		background: url(../../img/goods/sp/bg_map4x5.png) no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
	}
	.block-goods-comment2 .map_ .select_colors_4x5_ .btn_ {
		width: 25%;
		margin: 0;
		padding: 0 0 2% 2%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.block-goods-comment2 .map_ .select_colors_4x5_ .btn_.link_alpha_ {
		cursor: pointer;
	}
	/* 3x8 */
	.block-goods-comment2 .map_ .select_colors_3x8_ {
		overflow: hidden;
		padding: 2% 0 15% 15%;
		background: url(../../img/goods/sp/bg_map3x8.png) no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_ .btn_ {
		float: left;
		width: 33.33%;
		padding: 0 0 2% 2%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	/* flex */
	.block-goods-comment2 .map_ .select_colors_3x8_.flex {
		position: relative;
		padding: 0 0 10% 10%;
		background: none;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.flex .icon {
		position: absolute;
		width: 8%;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.flex .icon.vertical_top {
		top: 0;
		left: 0;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.flex .icon.vertical_bottom {
		left: 0;
		bottom: 15%;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.flex .icon.horizontal_left {
		bottom: 0;
		left: 13%;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.flex .icon.horizontal_right {
		right: 0;
		bottom: 0;
	}
	.block-goods-comment2 .map_ .select_colors_3x8_.flex ul {
		padding: 2% 2% 0 0;
		border-left: 2px solid #b7bcb5;
		border-bottom: 2px solid #b7bcb5;
		overflow: auto;
	}
	/* 3x8x2 */
	.block-goods-comment2 .map_ .select_colors_3x8_.map3x8x2_ {
		padding-bottom: 4%;
		background-image: url(../../img/goods/sp/bg_map3x8x2.png);
	}
	.maptxt_3x8x2_ {
		overflow: hidden;
		margin-bottom: 5px;
		padding-left: 15%;
		overflow: hidden;
	}
	.maptxt_3x8x2_ li {
		float: left;
		width: 33.33%;
		padding-left: 2%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 10px;
		text-align: center;
	}
	
	
	/* 2x2 */
	.block-goods-comment2 .map_ .select_colors_2x2_ {
		overflow: hidden;
		padding: 2% 0 2% 30%;
		background: url(../../img/goods/sp/4935059042clv_bg01.png) no-repeat 0 100%;
		-webkit-background-size: auto 66%;
		background-size: auto 66%;
	}
	.block-goods-comment2 .map_ .select_colors_2x2_ .select_color_:nth-child(1) {
		float: left;
		width: 40%;
		margin: 0;
	}
	.block-goods-comment2 .map_ .select_colors_2x2_ .select_color_:nth-child(2) {
		float: right;
		width: 40%;
		margin: 0;
	}
	.block-goods-comment2 .map_ .select_colors_2x2_ .select_color_ .tit_sub_ {
		margin-bottom: 15px;
		font-size: 12px;
		line-height: 1.16;
	}
	.block-goods-comment2 .map_ .select_colors_2x2_ .btn_ {
		width: 100%;
		padding: 0 0 4%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		cursor: pointer;
	}
	/* 4x2 */
	.block-goods-comment2 .map_ .select_colors_4x2_ {
		overflow: hidden;
		margin-right: -5px;
	}
	.block-goods-comment2 .map_ .select_colors_4x2_ .btn_ {
		float: left;
		width: 25%;
		margin-bottom: 5px;
		padding-right: 5px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	/* map active */
	.block-goods-comment2 .map_ .select_colors_4x5_ .btn_,
	.block-goods-comment2 .map_ .select_colors_3x8_ .btn_,
	.block-goods-comment2 .map_ .select_colors_2x2_ .btn_,
	.block-goods-comment2 .map_ .select_colors_4x2_ .btn_ {
		cursor: pointer;
	}
	.block-goods-comment2 .map_ .select_colors_4x5_ .btn_.blank_,
	.block-goods-comment2 .map_ .select_colors_3x8_ .btn_.blank_,
	.block-goods-comment2 .map_ .select_colors_2x2_ .btn_.blank_,
	.block-goods-comment2 .map_ .select_colors_4x2_ .btn_.blank_ {
		cursor: default;
	}
	.block-goods-comment2 .map_ .select_colors_4x5_ .btn_ img,
	.block-goods-comment2 .map_ .select_colors_3x8_ .btn_ img,
	.block-goods-comment2 .map_ .select_colors_2x2_ .btn_ img,
	.block-goods-comment2 .map_ .select_colors_4x2_ .btn_ img {
		position: relative;
		margin: 0;
		/*border: solid #004130;
		border-width: 0;*/
	}
	/*
	.block-goods-comment2 .map_ .select_colors_4x5_ .btn_.is_active_ img,
	.block-goods-comment2 .map_ .select_colors_3x8_ .btn_.is_active_ img,
	.block-goods-comment2 .map_ .select_colors_2x2_ .btn_.is_active_ img,
	.block-goods-comment2 .map_ .select_colors_4x2_ .btn_.is_active_ img {
		margin: -2px;
		border-width: 2px;
	}*/
	.block-goods-comment2 .map_ .btn_ a {
		position: relative;
		display: inline-block;
	}
	.block-goods-comment2 .map_ .btn_.is_active_ a::after {
		display: block;
		content: '';
		position: absolute;
		left: 2%;
		right: 0;
		top: 0;
		bottom: 2%;
		border: solid 2px var(--main-color);
		pointer-events: none;
	}

	.to_online_counseling {
		margin: 2.4rem auto 0;
        padding: 1.0rem;
        max-width: 100%;
        min-width: 0;
        width: 60%;
        font-size: 1.4rem;
        background: #ffffff;
        border: solid 1px var(--main-color);
        color: var(--text-link);
        clear: both;
        display: block;
        text-align: center;
	}
	/* 1*2 */
	.select_colors_1x2_ {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 1.5rem 4%;
	}
	.select_colors_1x2_ .select_color_ {
		width: 48%;
		margin: 0;
	}
	.block-goods-comment2 .map_ .select_colors_1x2_ .btn_.is_active_ a::after {
		display: none;
	}
	.block-goods-comment2 .map_ .select_colors_1x2_ .select_color_:has(.btn_.is_active_)  .tit_sub_ {
		border-color: var(--main-color);
	}
}