@charset "UTF-8";
/* ==========================================================================
   歴人雑 main.css
   Figma「Desktop - 1」(1440) の中央に 480px のスマホ幅カラムを置くレイアウト
   ========================================================================== */

:root {
    --color-page: #fbf9ed;      /* カラム外背景 rgba(245,239,209,.4) on #fff */
    --color-base: #fff;
    --color-base-end: #f9f3eb;  /* コンテンツ背景グラデーション終点 */
    --color-text: #000;
    --color-sub: #333;
    --color-accent: #b66664;
    --color-accent-hover: #9d5250;
    --color-white: #fff;

    --font-base: "Shippori Mincho B1", serif;

    --column: 480px;
    --gutter: 20px;
    --radius: 8px;
}

/* reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }

body {
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* layout
   ========================================================================== */
.l-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: var(--column);
    min-height: 100vh;
    margin-inline: auto;
    background: var(--color-base);
}
@media (min-width: 481px) {
    .l-wrapper { border-inline: 1px solid #000; }
}

.l-main {
    flex: 1;
    background: linear-gradient(to bottom, var(--color-base) 0, var(--color-base-end) 30%);
}

.l-header {
    padding: 10px var(--gutter);
    border-bottom: 1px solid var(--color-base-end);
}
.l-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
}
.l-header__logo img { width: 44px; height: 44px; border-radius: 50%; }

.l-footer {
    padding: 32px var(--gutter);
    background: var(--color-accent);
    color: var(--color-white);
    text-align: center;
}
.l-footer__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 16px; font-size: 13px; }
.l-footer__privacy { margin-bottom: 8px; font-size: 12px; }
.l-footer__privacy a { text-decoration: underline; text-underline-offset: 2px; }
.l-footer__copy { font-size: 11px; opacity: .85; }

/* PC装飾（カラム外の金彩イラスト）
   1440px時の左右余白(480px)を基準に、余白幅に合わせて拡縮 */
.l-deco { display: none; }

@media (min-width: 961px) {
    .l-deco {
        --side: calc((100vw - var(--column)) / 2);
        --s: calc(var(--side) / 480);  /* 1440px時 = 1px */
        display: block;
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }
    .l-deco__item {
        position: absolute;
        background: no-repeat center / contain;
    }
    .l-deco__item--cloud-l  { left: calc(var(--s) * 24);  top: 22px;  width: calc(var(--s) * 204); aspect-ratio: 204 / 136; background-image: url(../img/common/deco-cloud-l.png); transform: scaleY(-1); }
    /* ロゴ：120px固定。中心はFigmaの位置（1440px時 x=249）に合わせる */
    .l-deco__item--logo     { left: calc(var(--s) * 249 - 60px); top: 221px; width: 120px; aspect-ratio: 1; pointer-events: auto; }
    .l-deco__item--logo img { width: 100%; height: 100%; }
    /* ロゴ下の時代リンク（ロゴの中心に合わせて配置） */
    .l-deco__item--era { --era-w: max(200px, calc(var(--s) * 280)); left: calc(var(--s) * 249 - var(--era-w) / 2); top: 365px; width: var(--era-w); z-index: 1; pointer-events: auto; }
    .l-deco .p-era { margin: 0; }
    .l-deco .p-era__list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .l-deco .p-era__link { height: auto; aspect-ratio: 140 / 80; padding: 4px; }
    .l-deco .p-era__name { font-size: max(13px, calc(var(--s) * 16)); }
    .l-deco__item--seigaiha { left: 0;  top: 742px; width: calc(var(--s) * 446); aspect-ratio: 446 / 223; background-image: url(../img/common/deco-seigaiha.png); }
    .l-deco__item--cloud-r  { right: calc(var(--s) * 70); top: 31px; width: calc(var(--s) * 345); aspect-ratio: 345 / 138; background-image: url(../img/common/deco-cloud-r.png); }
    .l-deco__item--fuji     { right: 0; top: 742px; width: calc(var(--s) * 371); aspect-ratio: 371 / 278; background-image: url(../img/common/deco-fuji.png); }
}
/* トップページ右カラムのおすすめ作品 */
@media (min-width: 961px) {
    .l-deco__item--recommend {
        --rec-w: max(220px, calc(var(--s) * 300));
        /* 右側の余白の上下左右中央 */
        right: calc(var(--side) / 2 - var(--rec-w) / 2);
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        width: var(--rec-w);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        padding: 16px;
        border-radius: var(--radius);
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
        pointer-events: auto;
    }
    .p-side-recommend__title {
        padding-bottom: 6px;
        border-bottom: 2px solid var(--color-accent);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.45;
        text-align: center;
    }
    .p-side-recommend__pr { margin-top: 6px; color: #666; font-size: 11px; text-align: center; }
    .p-side-recommend__items > * + * { margin-top: 12px; }
    /* 狭い枠に合わせて Rinker のカードを縦並びに（Rinker 側の指定より優先させる） */
    .p-side-recommend div.yyi-rinker-contents { margin: 12px 0 0; border: none; box-shadow: none; }
    .p-side-recommend div.yyi-rinker-contents div.yyi-rinker-box { flex-direction: column; align-items: center; padding: 0; }
    .p-side-recommend div.yyi-rinker-contents div.yyi-rinker-image { width: 100%; height: auto; align-items: center; justify-content: center; margin: 0 0 8px; }
    .p-side-recommend div.yyi-rinker-contents div.yyi-rinker-info { width: 100%; padding: 0; }
    .p-side-recommend div.yyi-rinker-contents div.yyi-rinker-title { font-size: 14px; line-height: 1.5; }
    .p-side-recommend div.yyi-rinker-contents div.yyi-rinker-detail { font-size: 11px; }
    .p-side-recommend div.yyi-rinker-contents ul.yyi-rinker-links { display: flex; flex-direction: column; width: 100%; margin: 8px 0 0; }
    .p-side-recommend div.yyi-rinker-contents ul.yyi-rinker-links li { width: 100%; margin: 0 0 6px; }
}

/* 画面が低い場合、下側の装飾は画面下端に寄せる */
@media (min-width: 961px) and (max-height: 1000px) {
    .l-deco__item--seigaiha,
    .l-deco__item--fuji { top: auto; bottom: 0; }
}

/* component
   ========================================================================== */
.c-heading {
    margin-bottom: 24px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.c-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 68px;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    transition: background-color .2s;
}
.c-btn:hover { background: var(--color-accent-hover); }
.c-btn--wide { width: calc(380 / 440 * 100%); margin: 40px auto 0; }
.c-btn--gray { background: #6b6b6b; }
.c-btn--gray:hover { background: #555; }

.c-person-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
}

.c-person-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--radius);
    filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .25));
}
.c-person-card__img {
    aspect-ratio: 212 / 120;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--color-base-end);
}
.c-person-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
.c-person-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    padding: 8px 16px 16px;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--color-white);
}
.c-person-card__text { display: flex; flex-direction: column; gap: 8px; }
.c-person-card__name { font-size: 24px; font-weight: 700; line-height: 1.45; }
.c-person-card__catch {
    display: -webkit-box;
    overflow: hidden;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 概要を2行で省略 */
}
.c-person-card__btn { margin-top: auto; }

.c-breadcrumb { padding: 12px var(--gutter) 0; font-size: 12px; line-height: 1.6; }
.c-breadcrumb__list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; color: #666; }
.c-breadcrumb__item:not(:last-child)::after { content: "＞"; margin: 0 6px; color: #999; }
.c-breadcrumb a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.c-breadcrumb a:hover { text-decoration: none; }

.c-empty { padding: 40px 0; text-align: center; color: var(--color-sub); }

.c-entry > * + * { margin-top: 1.2em; }
.c-entry h2 { padding: 8px 12px; border-left: 4px solid var(--color-accent); background: var(--color-base-end); font-size: 21px; line-height: 1.5; }
.c-entry h3 { font-size: 19px; line-height: 1.5; }
.c-entry ul { padding-left: 1.4em; list-style: disc; }
.c-entry a { color: var(--color-accent); text-decoration: underline; }

/* project: top
   ========================================================================== */
.p-fv {
    position: relative;
    height: 260px;
    overflow: hidden;
}
/* 720x480 の画像を右に80pxはみ出させて配置（Figma 通り） */
.p-fv__bg {
    position: absolute;
    top: 0;
    right: calc(-80 / 480 * 100%);
    width: calc(720 / 480 * 100%);
    aspect-ratio: 720 / 480;
    background: url(../img/front/fv.jpg) no-repeat center / cover;
}
/* Ellipse 1・2：文字の下の白いぼかし */
.p-fv::before,
.p-fv::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #fff;
}
.p-fv::before { left: -36px; top: 29px; width: 341px; height: 253px; filter: blur(82px); }
.p-fv::after { left: 50%; top: 175px; width: 790px; height: 242px; transform: translateX(-50%); filter: blur(42px); }

.p-fv__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 72px 0 0 33px;
    font-weight: 600;
    line-height: 1.45;
}
.p-fv__title { font-size: 34px; font-weight: 600; line-height: 1.45; }
.p-fv__lead { font-size: 18px; }

.p-top { padding: 16px var(--gutter) 80px; }

.p-era { margin-bottom: 32px; }
.p-era__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.p-era__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    padding: 10px;
    overflow: hidden;
    border-radius: var(--radius);
    background: #6b5b4b;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .25);
    color: var(--color-white);
}
.p-era__link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .15);
    transition: background-color .2s;
}
.p-era__link:hover::after { background: rgba(0, 0, 0, .35); }
.p-era__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.p-era__name {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 0 2px rgba(0, 0, 0, .6);
    white-space: nowrap;
}

/* project: archive / single
   ========================================================================== */
.p-archive { padding: 32px var(--gutter) 80px; }
.c-breadcrumb + .p-archive { padding-top: 20px; }
.p-archive .nav-links { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.p-archive .page-numbers { display: grid; place-items: center; min-width: 36px; height: 36px; border-radius: 4px; background: var(--color-white); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.p-archive .page-numbers.current { background: var(--color-accent); color: var(--color-white); }

/* 人物詳細 */
.p-person { padding-bottom: 80px; }
.p-person__fv { height: 260px; overflow: hidden; background: var(--color-base-end); }
.p-person__fv img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.p-person__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px var(--gutter) 0;
}
.p-person__name { font-size: 34px; font-weight: 600; line-height: 1.45; }
.p-person__lead { margin-top: 8px; font-size: 18px; font-weight: 600; line-height: 1.45; }
.p-person__profile {
    margin: 0;
    padding-top: 16px;
    border-top: 1px dashed #777;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}
.p-person__profile div { display: flex; }
.p-person__profile dt { flex-shrink: 0; }
.p-person__profile dd { margin: 0; }

.p-person__contents {
    display: flex;
    flex-direction: column;
    gap: 55px;
    padding: 40px var(--gutter) 0;
}
.p-person__section { display: flex; flex-direction: column; gap: 16px; }
.p-person__section:has(.p-person__video) { gap: 8px; }
.p-person__video { aspect-ratio: 16 / 9; background: #d9d9d9; }
.p-person__video iframe { display: block; width: 100%; height: 100%; border: 0; }
.p-person__pr { margin-top: -8px; color: #666; font-size: 12px; }
.p-person__items > * + * { margin-top: 16px; }

.p-person__episode { color: #1f1f1f; font-size: 16px; font-weight: 700; line-height: 1.8; }
.p-person__episode > * + * { margin-top: 1em; }
.p-person__episode > h2 { margin-top: 2em; font-size: 19px; }
.p-person__episode > h2:first-child { margin-top: 0; }

.p-person__back { margin-top: 55px; }

.p-person__related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.c-sakura-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #1f1f1f;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.45;
}
.c-sakura-heading::before {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: url(../img/common/icon-sakura.svg) no-repeat center / contain;
}

.c-mini-card {
    display: flex;
    flex-direction: column;
    filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .25));
}
.c-mini-card__img { height: 100px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--color-base-end); }
.c-mini-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.c-mini-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 9px 12px 8px;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--color-white);
}
.c-mini-card__name { font-size: 14px; font-weight: 700; line-height: 1.45; }
.c-mini-card__btn { height: 32px; margin-top: auto; padding: 0 10px; font-size: 14px; white-space: nowrap; }

/* SP（480px未満）：Figma の 480px を基準に縮める */
@media (max-width: 479px) {
    .p-fv { height: auto; aspect-ratio: 480 / 260; min-height: 220px; }
    .p-fv__body { gap: 16px; padding: 14% 0 0 6%; }
    .p-fv__title { font-size: clamp(26px, 7.1vw, 34px); }
    .p-fv__lead { font-size: clamp(12px, 3.6vw, 18px); }
    .p-era__link { height: clamp(60px, 16.7vw, 80px); }
    .p-era__name { font-size: clamp(14px, 3.8vw, 18px); }
    .c-person-list { gap: 16px 12px; }
    .c-person-card__body { gap: 12px; padding: 8px 12px 12px; }
    .c-person-card__name { font-size: clamp(19px, 5vw, 24px); }
    .c-person-card__catch { font-size: clamp(13px, 3.4vw, 16px); }
    .c-person-card__btn { padding: 10px 4px; font-size: clamp(11px, 2.9vw, 14px); }
    .p-person__fv { height: auto; aspect-ratio: 480 / 260; }
    .p-person__name { font-size: clamp(28px, 7.1vw, 34px); }
    .p-person__lead { font-size: clamp(15px, 3.8vw, 18px); }
    .c-sakura-heading { font-size: clamp(20px, 5vw, 24px); }
    .p-person__related { gap: 8px; }
    .c-mini-card__img { height: auto; aspect-ratio: 140 / 100; }
    .c-mini-card__body { align-items: stretch; padding: 8px 6px 10px; }
    .c-mini-card__btn { padding: 0 4px; font-size: clamp(10px, 2.9vw, 14px); }
}