/* ============================================================
   article-round.css
   角丸アーティクル スタイルシート
   ────────────────────────────────────────────────────────────
   他サイトへ移植する場合：
   1. このファイルをコピー
   2. 下記の「カスタマイズ」部分を変更
   3. HTMLで <link href="article-round.css" rel="stylesheet"> を追加
   4. article直下に <p class="kv"><img ...></p> を配置（KV不要なら省略可）
   5. セクション見出しは <h2 class="sec-title"><span class="en">English</span><span class="ja">日本語</span></h2>
   6. 背景グレーセクションは <div class="bg-gray">...</div> で囲む
   ============================================================ */

/* ──────────────────────────────────────────
   「カスタマイズ」サイトに合わせて変更する値
   ────────────────────────────────────────── */
:root {
    --article-radius: 30px;
    /* 角丸の大きさ */
    --article-width-pc: 1000px;
    /* PC時のarticle幅 */
    --article-margin: 50px;
    /* ヘッダー高さに合わせた上下マージン */
    --article-padding-pc: 0;
    /* PC時の内パディング */
    --article-padding-sp: 0;
    /* SP時の内パディング */
    --article-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    --bg-gray: #f5f5f5;
    /* セクション背景グレー */
    --kv-height-pc: 500px;
    /* PC時のKV高さ */
    --kv-scale-pc: 110%;
    /* PC時のKV拡大率 */
    --kv-scale-sp: 110%;
    /* SP時のKV拡大率 */
    --heading-font: 'Hind', sans-serif;
    --heading-color: #333;
    --heading-sub-color: #888;
}

/* ──────────────────────────────────────────
   共通スタイル（PC/SP共通）
   ────────────────────────────────────────── */

/* --- article本体 --- */
article {
    background: #fff;
    border-radius: var(--article-radius);
    overflow: hidden;
    min-height: 100vh;
}

/* --- キービジュアル --- */
p.kv {
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    height: var(--kv-height-pc);
}

p.kv img {
    width: var(--kv-scale-pc);
    height: auto;
    display: block;
    margin-left: calc((100% - var(--kv-scale-pc)) / 2);
}

/* --- セクション見出し（二段：英語＋日本語） --- */
.sec-title {
    text-align: center;
    padding: 0 0 40px;
}

.sec-title::before {
    content: '';
    display: block;
    width: 1px;
    height: 40px;
    background: var(--heading-color);
    margin: 0 auto 30px;
}

.sec-title .en {
    font-family: var(--heading-font);
    font-size: 28px;
    letter-spacing: 0.15em;
    color: var(--heading-color);
    display: block;
    margin-bottom: 8px;
}

.sec-title .ja {
    font-size: 13px;
    color: var(--heading-sub-color);
    display: block;
    letter-spacing: 0.1em;
}

/* --- 背景グレーセクション --- */
.bg-gray {
    position: relative;
    z-index: 0;
    padding: 0 0 40px;
}

.bg-gray::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9999px;
    right: -9999px;
    background: var(--bg-gray);
    z-index: -1;
}

.bg-gray table {
    background: #fff;
}

/* ──────────────────────────────────────────
   PC（min-width: 501px）
   ────────────────────────────────────────── */
@media screen and (min-width: 501px) {
    article {
        width: var(--article-width-pc);
        margin: var(--article-margin) auto;
        box-shadow: var(--article-shadow);
    }

    article>div {
        padding: var(--article-padding-pc);
    }
}

/* ──────────────────────────────────────────
   SP（max-width: 500px）
   ────────────────────────────────────────── */
@media screen and (max-width: 500px) {
    article {
        width: calc(100vw - 20px);
        margin: var(--article-margin) auto;
        box-shadow: var(--article-shadow);
    }

    article>div {
        padding: var(--article-padding-sp);
    }

    /* KV */
    p.kv {
        height: auto;
    }

    p.kv img {
        width: var(--kv-scale-sp);
        margin-left: 0;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    /* セクション見出し */
    .sec-title {
        padding: 0 0 20px;
    }

    .sec-title::before {
        height: 25px;
        margin: 0 auto 15px;
    }

    .sec-title .en {
        font-size: 20px;
    }
}