@charset "utf-8";
/*-----
 * サンプル商品のページにとべるボタン
 * 2025-06-10
 */

.arrow_btn {
	display: inline-block;
	position: relative;
	/* width: 200px; */
	padding: 0.8em 1.6em;
	text-align: center;
	text-decoration: none;
	color: #1B1B1B;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #1B1B1B;
	transition: transform ease .3s;
	font-weight: 700;
}

.arrow_btn:hover {
	cursor: pointer;
	text-decoration: none;
}

.arrow_btn span {
	display: inline-block;
	text-decoration: none;
	transition: transform ease .3s;
}

.arrow_btn:hover span {
	cursor: pointer;
	text-decoration: none;
	transform: translateX(6px);
}

.sample_btn {
	padding: 10px 20px !important;
	background: linear-gradient(0deg, #f1f1f1 0%, #f8f8f8 100%);
	margin-bottom: 7px;
}

.sample_btn:hover {
	opacity: 0.6;
}

.sample_btn span {
	display: inline-block;
	text-decoration: none;
	transition: transform ease .3s;
}

.sample_btn:hover span {
	cursor: pointer;
	text-decoration: none;
	transform: translateX(6px);
}


/*-----
 * カラーバリエーションの丸アイコン
 * 2025-06-23
 */

.seven-cols {
	overflow: hidden;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.seven-cols p {
	margin-bottom: 0;
	padding-left: 0.5em;
}

.color-chip {
	width: 14.2857%;
	float: left;
	padding: 8px 0;
	text-align: center;
}

/* カラーサークル */
.color-circle {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-block;
	position: relative;
}

.color-circle::before {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid #ddd;
	box-sizing: border-box;
}

/* ホバー時（activeでないもののみ） */
.color-chip a:not(.active):hover .color-circle::before {
	border-color: #ccc;
	box-shadow: 0 0 6px #ccc;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* active状態の枠 */
.color-chip a.active .color-circle::before {
	border: 3px solid #39f;
	box-shadow: none;
}

/* active状態のホバー抑制 */
.color-chip a.active:hover .color-circle::before {
	border-color: #39f;
	box-shadow: none;
	transition: none;
}

/* activeリンクのカーソル形状と動作制限 */
.color-chip a.active {
	cursor: default !important;
}

/* ✅ 修正済：カーソルを手に（強制適用） */
.color-chip a:not(.active),
.color-chip a:not(.active) .color-circle,
.color-chip a:not(.active) .color-name {
	cursor: pointer !important;
}

/* クリックを無効化（hoverは有効にするため、子要素に指定） */
.color-chip a.active .color-circle,
.color-chip a.active .color-name {
	pointer-events: none;
}

/* 色名の表示 */
.color-name {
	font-size: 0.8em;
	text-align: center;
	word-wrap: break-word;
	word-break: break-word;
	margin-top: 6px;
	line-height: 1.2;
	padding: 0 0.2em;
}

/* カラー指定 */
.color-light-gray {
	background-color: #E1E2DB;
}

.color-sky-blue {
	background-color: #C0E3FE;
}

.color-black {
	background-color: #030303;
}

.color-blue {
	background-color: #5F89F4;
}

.color-sky-blue-dark {
	background-color: #5F9ED5;
}

.color-ivory {
	background-color: #E4E0D4;
}

.color-wakakusa {
	background-color: #9BEE94;
}

.color-mizuiro {
	background-color: #97D5FC;
}

.color-blue {
	background-color: #306EDD;
}

.color-brown {
	background-color: #C98E54;
}

.color-red {
	background-color: #F74F60;
}

.color-orange {
	background-color: #F8A363;
}

.color-yellow {
	background-color: #F5EF59;
}

.color-purple {
	background-color: #8867D0;
}

.color-gray {
	background-color: #D5CED6;
}

.color-white {
	background-color: #ffffff;
}

.color-pink {
	background-color: #F8B9D8;
}

.color-beige {
	background-color: #C8CCB3;
}

.color-normal {
	background-color: #2886ED;
}

.color-light-brown {
	background-color: #A28B59;
}

.color-beige-02 {
	background-color: #E0D9C8;
}

.color-brown-dark {
	background-color: #745038;
}

.color-green {
	background-color: #34AB71;
}

.color-red-dark {
	background-color: #CD3622;
}

.color-yellow-dark {
	background-color: #EFCD34;
}

.color-orange-dark {
	background-color: #FE7725;
}

.color-pink-dark {
	background-color: #E268B5;
}

.color-gray-dark {
	background-color: #747d78;
}

.color-green-dark {
	background-color: #237E48;
}

.color-blue-dark {
	background-color: #16449A;
}

/*-----
 * アタッチメントがあるときなど
 * 2025-06-27
 */
.four-cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0.5em;
}

.other-type {
	flex: 0 0 24%;
	max-width: 24%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: opacity 0.3s ease;
	/* margin-bottom: 1em; */
}


.other-type:hover {
	opacity: 0.6;
}

.other-type-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 1px solid #ddd;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.other-type-img img {
	width: 90%;
	height: auto;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.other-type a:hover .other-type-img img {
	transform: scale(1.1);
}

.other-type-name {
	font-size: 0.8em;
	margin-top: 4px;
	line-height: 1.2;
	padding: 0 0.2em;
	word-break: break-word;
}