/* --- ★ 基本設定: 洗練された色彩とタイポグラフィ --- */
:root {
    --theme-color: #db7092;
    --text-color-dark: #2c2c2c; /* 深みのあるダークグレー */
    --text-color-light: #5a5a5a; /* やや明るめのグレー */
    --background-color: #fdfdfd; /* 真っ白ではないオフホワイト */
    --border-color: #eaeaea; /* 繊細なボーダー色 */
    --base-font-size: 1.6rem;
}

body {
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.grandskin-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    color: var(--text-color-dark);
}

.grandskin-section {
    margin-top: 80px;
    margin-bottom: 80px;
}

/* --- ★ カバー画像 (16:10 / コンテンツ幅に修正) --- */
/* sp3.txtのHTML構造に合わせてセレクタとスタイルを修正 */
main .wp-block-image {
	max-width: 500px; /* コンテンツ幅(grandskin-container)と合わせる */
    width: 100%;
    margin: 0 auto 0px auto; /* 中央揃えと下に余白 */
/*    aspect-ratio: 16 / 10; /* アスペクト比を16:10に設定 */
    overflow: hidden; /* はみ出した部分を非表示 */
    height: auto; /* 高さは自動調整 */
    border-radius: 12px; /* 枠のデザインと合わせる */
}

main .wp-block-image img {
    width: 100%;
    height: 100%; /* コンテナいっぱいに広げる */
    object-fit: cover; /* 比率を維持したまま全体を覆う */
    object-position: center; /* 中央を基準にする */
    display: block;
}


/* --- ★ キャッチコピーと概要 --- */
.grandskin-catchcopy {
    border: none;
    margin: 0 0 80px 0;
}
.grandskin-catchcopy h3 {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: var(--text-color-dark);
    text-align: center;
}
.grandskin-catchcopy p {
    font-size: var(--base-font-size);
    line-height: 2;
    text-align: justify;
    color: var(--text-color-light);
    margin-top: 40px;
}


/* --- ★★★ セクション枠とタイトルの新デザイン ★★★ --- */
.grandskin-review-section,
.grandskin-points-section,
.grandskin-products-section {
    position: relative;
    border: 1px solid var(--border-color);
    padding: 20px 50px 20px;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 10px 40px -15px rgba(0, 0, 0, 0.06);
}

.grandskin-review-section {
    background-color: #fcfcfc;
}

.grandskin-section-title {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-color-dark);
    margin: 0 0 50px 0 !important;
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none !important;
    transform: none;
}

.grandskin-section-title::before,
.grandskin-section-title::after {
    content: '';
    flex-grow: 1;
    background: var(--border-color);
    height: 1px;
    margin: 0 .8em;
}

.grandskin-section-title::before {
    background: var(--theme-color);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin: 0 15px 0 0;
    flex-grow: 0;
}

.title-review::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M96 224C84.72 224 74.05 228.3 66.2 235.4L0 296.6V448h160V296.6l-66.2-61.2C87.95 228.3 77.28 224 66.67 224H64V224zM320 224c-11.28 0-21.95 4.307-29.8 11.41l-66.2 61.2V448h160V296.6l-66.2-61.2C341.9 228.3 331.3 224 320 224z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M96 224C84.72 224 74.05 228.3 66.2 235.4L0 296.6V448h160V296.6l-66.2-61.2C87.95 228.3 77.28 224 66.67 224H64V224zM320 224c-11.28 0-21.95 4.307-29.8 11.41l-66.2 61.2V448h160V296.6l-66.2-61.2C341.9 228.3 331.3 224 320 224z'/%3E%3C/svg%3E");
}
.title-points::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M528.1 171.5L382 150.2 316.7 17.82c-7.782-14.25-22.25-22.45-37.47-21.77C262.2-.0156 246.9 8.516 239.1 22.78L173.8 150.2 27.86 171.5C12.01 173.8-1.437 186.1 .1133 201.9c1.625 16.5 13.12 29.88 28.5 31.81l111.6 14.84l52.66 108.3c7.875 16.25 24.38 25.42 41.5 24.31c17.12-1.125 31.38-12.75 36.88-29.12l52.66-108.3l111.6-14.84c15.38-1.938 26.88-15.31 28.5-31.81C577.4 186.1 543.1 173.8 528.1 171.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M528.1 171.5L382 150.2 316.7 17.82c-7.782-14.25-22.25-22.45-37.47-21.77C262.2-.0156 246.9 8.516 239.1 22.78L173.8 150.2 27.86 171.5C12.01 173.8-1.437 186.1 .1133 201.9c1.625 16.5 13.12 29.88 28.5 31.81l111.6 14.84l52.66 108.3c7.875 16.25 24.38 25.42 41.5 24.31c17.12-1.125 31.38-12.75 36.88-29.12l52.66-108.3l111.6-14.84c15.38-1.938 26.88-15.31 28.5-31.81C577.4 186.1 543.1 173.8 528.1 171.5z'/%3E%3C/svg%3E");
}
.title-products::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 128H272l-54.63-54.63c-12.5-12.5-32.75-12.5-45.25 0L118.6 128H48C21.49 128 0 149.5 0 176v240c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176C512 149.5 490.5 128 464 128z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 128H272l-54.63-54.63c-12.5-12.5-32.75-12.5-45.25 0L118.6 128H48C21.49 128 0 149.5 0 176v240c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176C512 149.5 490.5 128 464 128z'/%3E%3C/svg%3E");
}

/* --- 審査員の声 (カード形式) --- */
.grandskin-review-item-single {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}
.grandskin-review-item-single:last-child {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-color);
}
.grandskin-review-item-single h4 {
    text-align: left;
    font-size: 1.9rem;
    font-weight: 500;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}
.grandskin-review-item-single p {
    text-align: left;
    font-size: calc(var(--base-font-size) - 0.1rem);
    line-height: 1.9;
    color: var(--text-color-light);
}

/* --- ここも評価されました --- */
.grandskin-points-list {
    list-style: none;
    padding-left: 0;
    font-size: 1.7rem;
    text-align: left;
}
.grandskin-points-list li {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
}
.grandskin-points-list li sup {
    white-space: nowrap;
    top: 0.5em;
}
.grandskin-points-list li:last-child {
    border-bottom: none;
}
.grandskin-points-list li::before {
    content: '';
    background-color: var(--theme-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    margin-right: 15px;
    flex-shrink: 0;
    margin-top: 0.2em;
}

/* --- 製品情報 --- */
.grandskin-products-section p {
    font-size: 1.7rem;
    line-height: 2.2;
    text-align: left;
    color: var(--text-color-light);
}

/* --- お問い合わせ --- */
.grandskin-contact-section {
    border: 1px solid var(--border-color);
    padding: 20px 40px;
    border-radius: 8px;
    background-color: #f8f8f8;
    text-align: center;
}
.grandskin-contact-section .grandskin-section-title,
.grandskin-contact-section .grandskin-section-title::before,
.grandskin-contact-section .grandskin-section-title::after {
    border: none !important;
    background: none;
    transform: none;
    margin: 0 auto 40px !important;
}
.grandskin-contact-section p {
    font-size: 1.7rem;
    line-height: 1.9;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
    :root {
      --base-font-size: 1.5rem;
    }
    .grandskin-section {
        margin-top: 60px;
        margin-bottom: 60px;
    }
    .grandskin-review-section,
    .grandskin-points-section,
    .grandskin-products-section {
        padding: 40px 25px;
    }
    .grandskin-section-title {
        font-size: 1.8rem;
        letter-spacing: 0.1em;
    }
}

.wp-block-footnotes {
	font-size: 1.2rem;
}
ol.wp-block-footnotes {
	list-style-type: decimal;
}