/* ================================
   master-container（全 UI の親）
================================ */
:root {
    --index-content-max-width: 600px;
}

body{
    margin:0;
    padding:0;
    font-family:"Noto Serif JP", serif;
    background:linear-gradient(180deg,#ffffff,#f3f6fa);
    color:#333;
}
.bx{
    touch-action:manipulation;
}

/* ================================
   写真フレーム（ライト版）
================================ */
.waku{
    width:97%;
    max-width: min(90vw, var(--index-content-max-width));
    aspect-ratio: 4 / 3;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 0 10px rgba(17, 16, 16, 0.45);
    overflow: hidden;
    margin: auto;
    margin-top: 86px;
}
/* 画像 */
.bx-src{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* ================================
   ruby-c（議員カード）
================================ */
.ruby-c{
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    width: min(90vw, var(--index-content-max-width));
    height: clamp(12rem, 26vh, 14rem);
    margin: 0 auto;
    /* padding: 1vh 0; */
    box-sizing: border-box;
    border-radius: 14px;
    overflow: hidden;

}
/* ruby-inner-row（左右 7:3） */
.ruby-inner-row{
    display: grid;
    grid-template-columns: 70fr 30fr;
    align-items: start;
    min-height: 0;
    padding: 5px;
    overflow: hidden;
}
/* 左側（ふりがな＋氏名） */
.rubyCenterL .tx1{
    font-size: clamp(9px, 3.6vw, 21px);
    letter-spacing: 0.15vw;
    color: #555;
    padding-left: 0;
}
.rb-call {
    display:flex;
    justify-content:centleft;
    align-items:baseline;
    gap:0.2em;
    width:100%;
    color:#0066cc;
    font-size:1.3rem;
    font-weight:600;
    line-height:1.3;
    margin:4px 0;
}
.rubyCenterL .tx2{
    font-size: clamp(16px, 6vw, 36px);
    font-weight: bold;
    color: #222;
    padding-left: 0;
}
/* 右側（情報） */
.rubyCenterR{
    display: grid;
    grid-template-rows: repeat(4, 2.4vh);
    row-gap: 0.6vh;
  overflow: visible;
}
.r-line1,
.r-line2,
.r-line3,
.r-line4{
    font-size: clamp(10px, 3vw, 16.8px);
    line-height: 1.2;
    color: #444;
}

/* 役職＋兼務 */
.rubyBottom{
    display: grid;
    grid-template-rows: minmax(0, 0.9fr) minmax(0, 1.6fr);
    width: 100%;
    height: clamp(4.5rem, 11vh, 6rem);
    text-align: left;
    margin-top: 0.1vh;
    background: #f5f7fb;
    border-radius: 10px;
    /* padding: 0 0; */
}
.rb-job{
    font-size: clamp(22px, 3vw, 26px);
    font-weight: bold;
    color: #333;
    text-align: center;
    min-height: 0;
    overflow: hidden;
    white-space: nowrap;
}

.rb-concurrent-roles{
    font-size: clamp(16px, 2.5vw, 18px);
    color: #555;
    min-height: 0;
    overflow: hidden;
    white-space: pre-line;
}

/* ================================
   メタリック調ボタン → ライト版
================================ */
.btn-metal {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    color: #333;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: 0.2s;
}
.btn-metal:hover{
    background: #f7f9fc;
    border-color: #ccc;
}
.btn-metal:active{
    background: #eceff3;
    transform: translateY(0.3vh);
}

/* ================================
   再生系アイコン（playIcon）
================================ */
.playIconMove{
    font-size:2.6em;   /* ← アイコンだけ拡大 */
    line-height: 1;
    display: inline-block;
    /* margin-right: 20px; */
}

/* ================================
   スライダー系アイコン（sliderIcon）
================================ */
.sliderIcon{
    font-size: 1.4em;   /* ← スライダー系は少し控えめ */
    line-height: 1;
    display: inline-block;
    margin-right: 4px;
}

/* ================================
   ★★★ 横並びスライダー（スマホ縦画面対応）
================================ */
.sliderRow{
    width: 100%;
    max-width: min(90vw, var(--index-content-max-width));
    margin: 1vh auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2vw;
}

.sliderBox{
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 0.7vh 1vw;
    display: grid;
    row-gap: 0.3vh;
    text-align: center;
}

.sliderBox label{
    font-size: clamp(10px, 2.8vw, 14px);
    font-weight: bold;
    color: #222;
    margin: 0;
}

.sliderBox .labelItem{
    font-size: clamp(12px, 3vw, 16px);
    font-weight: bold;
    color: #333;
    margin: 0;
}

.sliderBox input[type="range"]{
    width: 100%;
    accent-color: #4a90e2;
    margin: 0;
}

/* 再生・一時停止・スライダーを一つの安定した操作領域にまとめる */
.slide-controls {
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    gap: clamp(4px, 0.8vh, 8px);
    width: 100%;
    margin: 0 auto;
}

.slide-controls .btn-metal-pause,
.slide-controls .sliderRow {
    margin-top: 0;
    margin-bottom: 0;
}

/* グリッド中央寄せで再生ボタン列が縮まないよう、親要素を列幅まで広げる */
.slide-controls > .itemcustom-btn1 {
    width: 100%;
}

/* ================================
   ★★★ 再生ボタン（メタリック調＋アイコン最適化）
================================ */
.saiseiArea{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: center;
    width: 100%;
    max-width: min(90vw, var(--index-content-max-width));
    margin: 0 auto;
    gap: 0.6vh;
}

/* 再生系専用メタルボタン */
.btn-metal-play{
    width: 80%;
    height: 4.5vh;
    background: linear-gradient(180deg, #cdcaca, #f2f3f5);
    border: 1px solid #d0d0d0;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    font-size: clamp(12px, 3.0vw, 18px);
    font-weight: bold;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6vw;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 左右の移動ボタンを細くし、中央の再生ボタンを目立たせる */
.saiseiArea > .btn-metal-play:first-child,
.saiseiArea > .btn-metal-play:nth-child(3) {
    width: 70%;
}

.saiseiArea > .btn-metal-play:nth-child(2) {
    width: 90%;
}

.btn-metal-play:hover{
    background: #f7f9fc;
    border-color: #c8c8c8;
}

/* 一時停止（再生の真下） */
.btn-metal-pause{
    display: block;
    width: 90%;
    height: 4.5vh;
    margin: 0;
    grid-column: 2;
    background: linear-gradient(180deg, #ffffff, #f2f3f5);
    border: 1px solid #d0d0d0;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    font-size: clamp(12px, 3.0vw, 18px);
    font-weight: bold;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6vw;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-metal-play:active,
.btn-metal-play.is-pressed,
.btn-metal-pause:active,
.btn-metal-pause.is-pressed {
    background: linear-gradient(180deg, #e3e5e8, #f0f1f3);
    box-shadow: inset 1px 2px 6px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.08);
    transform: translate3d(3px, 4px, 0);
}

/* 写真を左、プロフィール情報を右に配置 */
@media (min-width: 1400px), (max-width: 700px) and (orientation: landscape) {
    .slide-content {
        width: min(94vw, 1000px);
        margin-inline: auto;
    }

    .master-container {
        display: grid;
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        align-items: start;
        gap: clamp(8px, 1.5vw, 20px);
        width: 100%;
        margin: 90px auto 0;
    }

    .waku {
        width: calc(100% - clamp(24px, 3vw, 48px));
        max-width: none;
        margin: 0;
        justify-self: end;
    }

    .container-show {
        min-width: 0;
    }

    .ruby-inner-row {
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    }

    .ruby-c {
        width: 100%;
        margin: 0;
    }

    .rubyCenterL {
        padding-top: clamp(30px, 6vh, 58px);
    }

    .rubyCenterR {
        transform: translateX(clamp(-24px, -1.8vw, -12px));
    }

    .rubyBottom {
        margin-top: clamp(6px, 1vh, 12px);
    }
}