/*
========================================================================================
PC・タブレット・スマートフォン共通の基本デザイン
========================================================================================
*/
body {
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
color: #333;
line-height: 1.8;
background-color: #f9f9f9;
/* PCでのデフォルト文字サイズ */
font-size: 16px;
}

.product-detail {
max-width: 960px;
margin: 20px auto;
background-color: #fff;
padding: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-detail__main {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-bottom: 40px;
}

.product-detail__image-area {
flex: 1;
min-width: 300px;
position: relative;
}

.product-detail__main-image {
width: 100%;
height: auto;
border: 1px solid #eee;
margin-bottom: 10px;
}

.product-detail__image-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 10px;
box-sizing: border-box;
}

.product-detail__image-nav-arrow {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transition: background-color 0.3s;
}

.product-detail__image-nav-arrow:hover {
background-color: rgba(0, 0, 0, 0.8);
}

.product-detail__sub-images {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}

.product-detail__sub-image {
width: 80px;
height: 80px;
overflow: hidden;
border: 1px solid #ddd;
flex-shrink: 0;
cursor: pointer;
transition: border-color 0.3s;
}

.product-detail__sub-image:hover {
border-color: #000;
}

.product-detail__sub-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.product-detail__info-area {
flex: 1;
}

.product-detail__name {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 15px;
line-height: 1.4;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}

.product-detail__spec {
font-size: 1.5rem;
color: #666;
margin: 0;
line-height: 1.6;
}

.product-detail__spec dt {
font-weight: bold;
display: inline-block;
width: 80px;
}

.product-detail__spec dd {
display: inline-block;
margin-left: 0;
}

.product-detail__price-block {
margin: 20px 0;
padding: 20px;
background-color: #f5f5f5;
border-radius: 5px;
}

.product-detail__price-list {
text-decoration: line-through;
margin-bottom: 10px;
}

.product-detail__price-sales {
display: flex;
align-items: baseline;
gap: 5px;
font-size: 2.2rem;
color: #c00;
font-weight: bold;
line-height: 1;
margin: 0 0 20px; /* 修正箇所：販売価格の下部マージンを広げる */
}

.product-detail__price-label {
font-size: 1.5rem;
font-weight: normal;
color: #333;
vertical-align: baseline;
margin-right: 5px;
}

.product-detail__price-value {
font-size: 2.5rem;
}

.product-detail__price-unit {
font-size: 1.5rem;
font-weight: normal;
}

.product-detail__price-regular {
font-size: 1.5rem;
color: #999;
}

.product-detail__price-members {
font-size: 1.5rem;
color: #333; /* 修正箇所：文字色を濃いグレーに変更 */
}

.product-detail__discount-badge {
background-color: #e65100;
color: #fff;
font-size: 1.5rem;
padding: 3px 8px;
border-radius: 3px;
display: inline-block;
margin-left: 10px;
}

.product-detail__meta {
list-style: none;
padding: 0;
margin: 0 0 20px;
font-size: 1.5rem;
color: #666;
line-height: 1.8;
}

.product-detail__meta-item {
border-bottom: 1px dashed #ddd;
padding-bottom: 5px;
margin-bottom: 5px;
}

.product-detail__soldout {
color: #a00;
font-weight: bold;
}

.product-detail__description-short {
margin-bottom: 20px;
font-size: 1.5rem;
}

.product-detail__alert {
padding: 12px;
border-radius: 5px;
font-size: 1.5rem;
margin-bottom: 15px;
text-align: center;
}

.product-detail__alert--login-required,
.product-detail__alert--login-required-purchase {
background-color: #ffebee;
color: #c62828;
}

.product-detail__alert--gift-ng {
background-color: #fffde7;
color: #f9a825;
}

.product-detail__add-to-cart-block {
margin-bottom: 30px;
}

.product-detail__quantity-control {
display: flex !important;
align-items: center !important;
gap: 10px;
margin-bottom: 15px;
font-size: 1.5rem;
}

/* 数量ボタンの画像や入力フォームのスタイル */
.product-detail__quantity-control img {
width: 30px;
height: 30px;
vertical-align: middle;
}

.product-detail__quantity-control input[type="text"] {
font-size: 1.5rem;
width: 60px;
text-align: center;
padding: 5px;
border: 1px solid #ccc;
}

.product-detail__quantity-label {
font-weight: bold;
margin-right: 10px;
}

.product-detail__cart-button {
width: 100%;
padding: 18px;
background-color: #333;
color: #fff;
border: none;
font-size: 1.5rem;
cursor: pointer;
transition: background-color 0.3s;
}

.product-detail__cart-button:hover {
background-color: #555;
}

.product-detail__cart-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}

.product-detail__option-link {
display: block;
text-align: center;
margin-top: 10px;
padding: 12px;
border: 1px solid #444;
color: #444;
text-decoration: none;
font-size: 1.5rem;
transition: background-color 0.3s, color 0.3s;
}

.product-detail__option-link:hover {
background-color: #444;
color: #fff;
}

.product-detail__links {
margin-top: 20px;
border-top: 1px dashed #ccc;
padding-top: 20px;
}

.product-detail__link {
display: block;
color: #555;
text-decoration: none;
padding: 5px 0;
font-size: 1.5rem;
transition: color 0.3s;
}

.product-detail__link:hover {
color: #000;
}

.product-detail__full-description {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #eee;
}

.product-detail__section-title {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 20px;
border-left: 4px solid #333;
padding-left: 10px;
}

.product-detail__description-content {
line-height: 1.8;
font-size: 1.5rem;
}

.product-detail__description-content p,
.product-detail__description-content ul,
.product-detail__description-content ol,
.product-detail__description-content table {
margin-bottom: 1.5em;
}

.product-detail__description-content img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
}

/*
========================================================================================
最近チェックした商品セクション
========================================================================================
*/
.product-detail__history {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #eee;
}

.product-detail__history-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}

.product-detail__history-item {
text-align: left; /* ★変更点1: 商品情報を左揃えに */
}

.product-detail__history-item a {
text-decoration: none;
color: #333;
display: block; /* ★変更点2: 行間を広げるためにブロック要素化 */
line-height: 1.6; /* ★変更点3: 行間を広げる */
}

.product-detail__history-item img {
width: 100%;
height: auto;
border: 1px solid #ddd;
margin-bottom: 10px; /* ★変更点4: 画像の下に余白を追加 */
}

.product-detail__history-info {
padding: 10px 0;
}

.product-detail__history-name {
font-weight: bold;
margin: 0 0 10px; /* ★変更点5: 下に余白を追加 */
font-size: 1.5rem;
}

.product-detail__history-price {
color: #c00;
font-weight: bold;
margin: 0 0 10px; /* ★変更点6: 下に余白を追加 */
font-size: 1.5rem;
}

.product-detail__history-s-expl {
font-size: 1.5rem; /* ★変更点7: 文字サイズを大きくする */
color: #666;
margin: 0;
}

/*
========================================================================================
スマートフォン向けレイアウト・文字サイズ調整（768px以下で適用）
========================================================================================
*/
@media (max-width: 768px) {
.product-detail__main {
flex-direction: column;
}

body {
font-size: 16px;
}

/* すべての文字サイズを2.5rem以上に統一 */
.product-detail__name {
font-size: 2.5rem;
}

.product-detail__price-sales {
font-size: 2.5rem;
}

.product-detail__price-value {
font-size: 2.5rem;
}

.product-detail__cart-button {
font-size: 2.5rem;
padding: 15px;
}

.product-detail__spec,
.product-detail__meta,
.product-detail__description-short,
.product-detail__full-description,
.product-detail__alert,
.product-detail__quantity-control,
.product-detail__option-link,
.product-detail__link,
.product-detail__price-label,
.product-detail__price-unit,
.product-detail__price-list,
.product-detail__price-regular,
.product-detail__price-members,
.product-detail__discount-badge,
.product-detail__description-content {
font-size: 2.5rem;
}

.product-detail__sub-image {
width: 60px;
height: 60px;
}

.product-detail__history-list {
grid-template-columns: repeat(2, 1fr);
}

.product-detail__history-name,
.product-detail__history-price,
.product-detail__history-s-expl {
font-size: 1.8rem;
}
}