/* ==========================================================================
   catalog.css — ものづくり・商品一覧の仕上げ（2026-10-18）
   company.css / utility.css / finish.css の後に読み込み、この2ページだけを整える。
   ========================================================================== */

/* ---------- ものづくり ---------- */

/* パンくずの現在地：深緑の冒頭でも読める色のままに（interior.css は明るい地を前提に濃い色を当てる）。 */
.quality-page .company-hero .interior-breadcrumb [aria-current] { color: inherit; }

/* 右列の左端を、本文の列（2段組みの右側）にそろえる。段の間隔は、前後の章と同じ値に。 */
@media (min-width: 641px) {
    .quality-land-heading > p:last-child { width: calc(50% - 50px); }
    .quality-land-images { column-gap: 100px; }
}
@media (min-width: 641px) and (max-width: 1100px) {
    .quality-land-heading > p:last-child { width: calc(50% - 26px); }
    .quality-land-images { column-gap: 52px; }
}
@media (min-width: 641px) and (max-width: 800px) {
    .quality-land-heading > p:last-child { width: calc(50% - 23px); }
    .quality-land-images { column-gap: 46px; }
}

/* 農園の写真：右端で切れて線のように見える水色の支柱を、画面の外へ。 */
.quality-land-images figure:first-child img { object-position: 40% 50%; }

/* 小さな文字は、背景との差を 4.5:1 以上に。 */
.quality-land-heading .interior-eyebrow { color: #606750; }
.quality-land-images figcaption { color: #5f684f; font-size: 11px; }
.quality-closing > div > p:last-child { color: #696555; }

/* 新しいタブで開くことを、読み上げにだけ伝える（utility.css と同じ指定）。 */
.quality-page .utility-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
    .quality-land-images figcaption { font-size: 10px; }
    /* 締めの段も、ページの左右の余白（20px）にそろえる。 */
    .quality-closing > div { padding-inline: 20px; }
}

/* ---------- 商品一覧 ---------- */

/* 横長の写真：瓶とグラスが帯に収まる高さに。一言は左の暗がりに縦組みで置き、語の途中で折り返さない。
   縦組みでは margin-block が左右を指すため、上下の中央寄せは margin-top / margin-bottom で。 */
.catalog-panorama::after { background: linear-gradient(270deg, transparent 55%, rgba(12, 25, 16, .5)); }
.catalog-panorama > span {
    top: 0;
    bottom: 0;
    left: 4%;
    right: auto;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
    transform: none;
    white-space: nowrap;
}
@media (min-width: 641px) {
    .catalog-panorama { height: clamp(300px, 40vw, 560px); }
    .catalog-panorama img { object-position: 50% 95%; }
}

/* 瓶：アーチの中に立たせ、底をアーチの下の線にそろえる。どの画面幅でも高さを基準に置く。 */
.catalog-vessel { background: none; }
.catalog-vessel::after { background: radial-gradient(ellipse at 50% 64%, #e6decd, transparent 72%); }
.catalog-vessel img { top: 9.5%; bottom: auto; height: 83.5%; padding: 0; object-position: 50% 100%; }
/* 一寸先は光は丸いフラスコ瓶。ほかの瓶と並べたときの大きさに合わせて、背を低く置く。 */
.catalog-vessel--flask img { top: 37.9%; height: 55.1%; }

/* 銘柄名は「大島酒造の銘柄」の下の見出し（h3）。h2 だったときと同じ組み方に。 */
.catalog-product h3 {
    margin: 0;
    font-family: var(--fx-mincho);
    font-feature-settings: "palt" 1;
    font-size: clamp(19px, 1.65vw, 25px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: .025em;
}
.catalog-product h3 a { color: inherit; text-decoration: none; }

/* リニューアル予定の札：種別と同じ行に置き、隣の銘柄と文字の段をそろえる。 */
.catalog-product-kind .catalog-badge { margin: 0 0 0 10px; padding: 0 9px; line-height: 1.6; vertical-align: 1px; letter-spacing: .08em; }

/* 小さな文字は、背景との差を 4.5:1 以上に。 */
.catalog-product-kind { color: #666b5e; }
.catalog-product-en { color: #666b5e; font-size: 10px; }
.catalog-taste { color: #7f6841; }

@media (min-width: 1400px) {
    .catalog-product h3 { font-size: 25px; }
}
@media (max-width: 800px) {
    .catalog-product h3 { font-size: 21px; }
}
/* 2列に並ぶ画面幅では、隣の銘柄と項目の段をそろえる。名前と欧文名はひとまとまりに。 */
@supports (grid-template-rows: subgrid) {
    @media (max-width: 800px) {
        .catalog-product { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
        .catalog-product-copy { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
        .catalog-product h3 { align-self: end; }
    }
}
@media (max-width: 640px) {
    /* スマホは人物まで入る構図。一言は一列にして、左端の暗いメニュー板の上へ。 */
    .catalog-panorama::after { background: linear-gradient(270deg, transparent 62%, rgba(12, 25, 16, .55)); }
    .catalog-panorama img { object-position: 50% 30%; }
    .catalog-panorama > span { top: auto; bottom: 6%; left: 3%; margin-top: 0; margin-bottom: 0; font-size: 15px; letter-spacing: .16em; }
    .catalog-panorama > span br { display: none; }
    .catalog-product h3 { font-size: 17px; line-height: 1.7; }
    .catalog-product-en, .catalog-taste, .catalog-description { min-height: 0; }
    .catalog-product-en { font-size: 9px; }
    .catalog-taste { font-size: 11px; }
    .catalog-description { font-size: 12px; }
    .catalog-detail { font-size: 11px; }
}
@media (max-width: 360px) {
    .catalog-product h3 { font-size: 16px; }
    .catalog-description { min-height: 0; font-size: 11px; }
}