@charset "UTF-8";
/* =========================================================
   劇団サソリッポ 公式サイト — 共通スタイル
   1ページ構成。色と可読性の基準はすべてこの :root に集約。
   ========================================================= */

:root {
    /* 地と文字 */
    --paper:  #fffdfa;
    --paper2: #f6f0e7;   /* セクションの帯 */
    --ink:    #17120f;
    --sub:    #6f645c;   /* 補助テキスト 白地で 5.7:1 */
    --line:   #ded3c6;

    /* アクセント */
    --accent:     #f0641e;  /* 図形（罫線・印） */
    --accenttext: #bb4708;  /* 文字・ボタン地（白地で 5.2:1 / 白文字と 5.2:1） */

    /* 人ごとの色（カードの帯） */
    --c-komoru: #f0641e;
    --c-sanuki: #4f9d5d;
    --c-uejima: #e0629a;
    --c-shirai: #dea520;
    --c-akatsuki: #c62828;
    --c-higashitani: #2f9e8f;
    --c-tachi: #7e57c2;
    --c-shibasaki: #3d8fd1;
    --c-nagano: #6b6fd6;

    --ffmin:  'Shippori Mincho', serif;
    --ffgoth: 'Zen Kaku Gothic New', sans-serif;
    --ffround:'M PLUS Rounded 1c', sans-serif;

    --head: 3.5rem;      /* ヘッダーの高さ */
    --maxw: 1080px;
    --gut: 5vw;
}

* { margin: 0; padding: 0; border: 0; box-sizing: border-box; -webkit-tap-highlight-color: #0000; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 3rem); }
body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--ffgoth);
    font-size: 16px;
    line-height: 1.9;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: var(--accenttext); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: #fbdcc7; }

/* ---------- ヘッダー ＋ セクションナビ（サイトマップ） ---------- */

/* ヘッダーとナビは1枚の帯にまとめ、その実寸ぶんだけ本文を下げる（#barspace）。
   固定値でずらすと、文字サイズや折返しでずれるため。 */
#bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
}
#barspace { height: 6.4rem; }
#head { background: var(--paper); }
#headin {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gut);
    height: var(--head);
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
#head .logo { display: flex; align-items: center; gap: 0.5rem; }
#head .logo img.mark { width: 1.7rem; height: 1.7rem; object-fit: contain; }
#head .logo img.type { height: 1.15rem; width: auto; }
#head .tk {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 2.1rem;
    padding: 0 1rem;
    border-radius: 2rem;
    background: var(--accenttext);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
#head .tk:hover { text-decoration: none; background: #a03d06; }

#nav {
    position: relative;
    background: var(--paper);
    border-top: 1px solid var(--line);
}
#navin {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gut);
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
#navin::-webkit-scrollbar { display: none; }
#nav::after {   /* 右にまだ項目があることを示す */
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 2.2rem;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,253,250,0), var(--paper));
}

#navin a {
    flex: none;
    padding: 0.55rem 0;
    color: var(--ink);
    font-size: 0.85rem;
    border-bottom: 2px solid transparent;
}
#navin a:hover { text-decoration: none; border-bottom-color: var(--accent); }
#navin a.on { border-bottom-color: var(--accent); color: var(--accenttext); }

/* ---------- ヒーロー ---------- */

#hero {
    position: relative;
    background: #16110e;
}
#hero .kv { width: 100%; height: min(78vh, 620px); object-fit: cover; object-position: 50% 30%; }
#hero .kv.pc { display: none; }
#hero .cap {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.3rem;
    background: rgba(12,8,6,.65);
    color: #fff;
    font-size: 0.72rem;
    line-height: 1.6;
}

/* ---------- セクション共通 ---------- */

main { display: block; }
section {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 4.2rem var(--gut) 0;
}
section.band {
    max-width: none;
    margin-top: 4.2rem;
    padding-bottom: 4.2rem;
    background: var(--paper2);
}
section.band > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

.h {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    padding-bottom: 0.7rem;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 1.6rem;
}
.h .en {
    font-family: var(--ffround);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: .12em;
    color: var(--accenttext);
}
.h .ja {
    font-family: var(--ffmin);
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.3;
}
.lead { color: var(--sub); font-size: 0.92rem; margin-bottom: 1.4rem; }

/* ---------- 開閉（初めは隠して、ボタンで出す） ---------- */

.disc { margin-top: 1.4rem; }
.disc > summary {
    padding: 0.75rem 1.1rem;
    border: 1px solid var(--accenttext);
    border-radius: 2rem;
    background: var(--paper);
    color: var(--accenttext);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    list-style: none;
    transition: background .15s, color .15s;
}
.disc > summary::-webkit-details-marker { display: none; }
.disc > summary::after { content: " ＋"; font-family: var(--ffround); }
.disc[open] > summary::after { content: " －"; }
.disc > summary:hover { background: var(--accenttext); color: #fff; }
.disc[open] > summary { border-radius: 0.6rem; margin-bottom: 1.5rem; max-width: none; }
.disc > .body { animation: fadein .35s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(-0.4rem); } to { opacity: 1; transform: none; } }

/* ---------- 人物カード ---------- */

.people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.1rem;
}
.person { border: 1px solid var(--line); border-radius: 0.5rem; overflow: hidden; background: var(--paper); }
.person .ph { position: relative; aspect-ratio: 4 / 3; background: #eae2d7; }
.person .ph img { width: 100%; height: 100%; object-fit: cover; }
.person .bar { height: 4px; background: var(--pc, var(--accent)); }
.person .txt { padding: 0.6rem 0.8rem 0.9rem; }
.person .nm { font-family: var(--ffmin); font-weight: 800; font-size: 1.02rem; line-height: 1.5; }
.person .ro { font-size: 0.78rem; color: var(--sub); line-height: 1.6; }
.person details { margin-top: 0.5rem; }
.person summary {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--accenttext);
    cursor: pointer;
    list-style: none;
}
.person summary::-webkit-details-marker { display: none; }
.person summary::after { content: " ＋"; }
.person details[open] summary::after { content: " －"; }
.person .prof { margin-top: 0.4rem; font-size: 0.8rem; line-height: 1.85; color: var(--sub); }

/* ---------- 公演情報 ---------- */

.stage { display: grid; gap: 1.6rem; }
.stage .poster { border: 1px solid var(--line); }
.stage .copy { font-family: var(--ffmin); font-size: 1.12rem; line-height: 2; }
.stage .copy em { font-style: normal; color: var(--accenttext); font-weight: 800; }
dl.spec { margin-top: 1.3rem; border-top: 1px solid var(--line); }
dl.spec > div { display: grid; grid-template-columns: 5.4rem 1fr; gap: 0.6rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
dl.spec dt { font-size: 0.82rem; color: var(--sub); padding-top: 0.15rem; }
dl.spec dd { font-size: 0.94rem; }
/* 「チケットを予約する」と「○○を見る」を同じ幅・同じ位置に揃える */
/* section.band > * より詳細度を上げないと 1080px 幅に上書きされる */
section .btn, section .disc > summary {
    display: block;
    width: 100%;
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    text-align: center;
}
.btn {
    margin-top: 1.8rem;
    padding: 0.8rem 1.4rem;
    border-radius: 2rem;
    background: var(--accenttext);
    color: #fff;
    font-weight: 700;
}
.btn:hover { text-decoration: none; background: #a03d06; }

/* ---------- 写真グリッド ---------- */

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; }
.photos button {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;      /* 読み込み前でもタイルの大きさが決まるように */
    padding: 0;
    background: #ece4d9;
    cursor: zoom-in;
    border-radius: 0.3rem;
    overflow: hidden;
}
.photos button:hover img { transform: scale(1.04); }
.photos button img { transition: transform .25s; }

/* 拡大表示 */
#lb {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(12,8,6,.92);
    padding: 3rem 1rem;
}
#lb.on { display: flex; }
#lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .2rem; }
#lb .x, #lb .p, #lb .n {
    position: absolute;
    background: rgba(255,255,255,.14);
    color: #fff;
    border-radius: 50%;
    width: 2.8rem; height: 2.8rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
}
#lb .x { top: 1rem; right: 1rem; }
#lb .p { left: 1rem; top: 50%; transform: translateY(-50%); }
#lb .n { right: 1rem; top: 50%; transform: translateY(-50%); }
#lb .cnt { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: #fff; font-size: .8rem; }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 過去公演 ---------- */

.works { display: grid; gap: 1.8rem; }
.work { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: start; }
.work img { width: 100%; border: 1px solid var(--line); }
.work .yr { font-family: var(--ffround); font-weight: 700; font-size: 0.8rem; color: var(--accenttext); }
.work .ttl { font-family: var(--ffmin); font-weight: 800; font-size: 1.15rem; line-height: 1.5; }
.work .cp { font-family: var(--ffmin); font-size: 0.92rem; color: var(--ink); }
.work .mt { font-size: 0.8rem; color: var(--sub); }

/* ---------- ニュース ---------- */

.news { border-top: 1px solid var(--line); }
.news li { border-bottom: 1px solid var(--line); }
.news a, .news .row { display: grid; grid-template-columns: 6.4rem 1fr; gap: 0.6rem; padding: 0.9rem 0; color: var(--ink); }
.news a:hover { text-decoration: none; color: var(--accenttext); }
.news time { font-family: var(--ffround); font-weight: 700; font-size: 0.8rem; color: var(--sub); padding-top: 0.15rem; }
.news .ttl { font-size: 0.95rem; line-height: 1.7; }
.news .tag {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0 0.5rem;
    border-radius: 0.2rem;
    background: var(--accenttext);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    vertical-align: 0.1em;
}

/* ---------- 動画 ---------- */

.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.videos .frame { aspect-ratio: 16 / 9; width: 100%; }
.videos iframe { width: 100%; height: 100%; }
.videos .ph {
    display: flex; align-items: center; justify-content: center;
    height: 100%;
    background: #ece4d9;
    border: 1px dashed #b3a496;
    color: var(--sub);
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.8;
    padding: 1rem;
}
.videos p { margin-top: 0.5rem; font-size: 0.86rem; line-height: 1.7; }

/* ---------- 外部活動 ---------- */

.guest > li { border-top: 1px solid var(--line); padding: 1.1rem 0; }
.guest .who { font-size: 0.82rem; color: var(--sub); }
.guest .who::before { content: "● "; color: var(--accent); }
.guest .gt { font-family: var(--ffmin); font-weight: 800; font-size: 1.05rem; line-height: 1.6; }
.guest .glinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.guest .glinks a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 2rem;
    color: var(--ink);
    font-size: 0.78rem;
    line-height: 1.7;
    white-space: nowrap;
}
.guest .glinks a:hover { text-decoration: none; border-color: var(--accenttext); color: var(--accenttext); }
.guest .glinks a::before { content: "↗"; font-size: 0.72em; color: var(--accenttext); }
.guest details { margin-top: 0.5rem; }
.guest summary { display: inline-block; font-size: 0.82rem; color: var(--accenttext); cursor: pointer; list-style: none; }
.guest summary::-webkit-details-marker { display: none; }
.guest summary::after { content: " ＋"; }
.guest details[open] summary::after { content: " －"; }
.guest .gd { margin-top: 0.5rem; font-size: 0.86rem; line-height: 1.9; color: var(--sub); }

/* ---------- 募集・問い合わせ ---------- */

.recruit dl { display: grid; grid-template-columns: 7rem 1fr; gap: 0.4rem 0.8rem; margin: 1rem 0; }
.recruit dt { color: var(--accenttext); font-size: 0.88rem; }
.recruit dd { font-size: 0.94rem; }
.sns { display: flex; gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap; }
.sns a { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--ink); font-size: 0.88rem; }
.sns a:hover { text-decoration: none; border-color: var(--accenttext); color: var(--accenttext); }
.sns svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* ---------- フッター ---------- */

footer { margin-top: 4.5rem; border-top: 1px solid var(--ink); }
#footimg { background: var(--paper2); }
#footimg img { width: 100%; max-width: var(--maxw); margin: 0 auto; }
#footin { max-width: var(--maxw); margin: 0 auto; padding: 1.8rem var(--gut) 2.6rem; text-align: center; }
#footin .map { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.1rem; margin-bottom: 1.2rem; }
#footin .map a { color: var(--ink); font-size: 0.84rem; }
#footin small { color: var(--sub); font-size: 0.76rem; line-height: 1.8; display: block; }

#top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 90;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: rgba(23,18,15,.72);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
#top.on { display: flex; }
#top:hover { text-decoration: none; background: var(--accenttext); }

#sprite { display: none; }

/* ---------- 画面が広いとき ---------- */

@media (min-width: 720px) {
    :root { --gut: 2.5rem; }
    #hero .kv.mb { display: none; }
    #hero .kv.pc { display: block; }
    .h .ja { font-size: 2rem; }
    .people { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .photos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
    .stage { grid-template-columns: 260px 1fr; align-items: start; }
    .work { grid-template-columns: 150px 1fr; gap: 1.5rem; }
    .news a, .news .row { grid-template-columns: 8rem 1fr; }
    .disc[open] > summary { max-width: none; }
}