/* ===================================
   下層ページテンプレートのスタイル
   =================================== */

/* --- 下層ページ共通ヘッダー --- */
body:not(.page-index) .header {
    background-color: #e8447e;
}


body:not(.page-index) .header-left img {
    content: url('common/images/page-header-logo_01.png');
}

body:not(.page-index) .header-right img {
    content: url('common/images/page-header-subtitle_01.png');
}

/* --- 下層ページ Body & Main Content --- */
body:not(.page-index) .site-container {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    background-image: none;
}

body:not(.page-index) .main-content {
    overflow: visible;
}

/* --- ページ固有の背景色 --- */
body.page-feature .site-container {
    background-color: #ffffff;
}


/* --- 全幅のタイトル画像 --- */
.page-title-wrapper {
    text-align: center;
    margin: 80px auto 60px;
    width: 96%;
    max-width: 945px; 
}

.page-title-wrapper img {
    max-width: 100%;
    height: auto;
}

/* --- 幅が制限されたコンテンツエリア --- */
.content-area {
    width: 96%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
}



/* ===================================
   特集ページ (feature.php) のスタイル
   =================================== */

.page-feature .intro-text-block {
    text-align: center;
    margin: 0 auto 40px;
    width: 96%;
    max-width: 800px;
    font-size: 18px;
    line-height: 2.2;
    letter-spacing: 0.05em;
}

.page-feature .intro-text-block p {
    margin: 0;
}

@media (max-width: 640px) {
    .page-feature .intro-text-block {
        text-align: center;
        font-size: 16px;
        width: auto;
        margin: 0 20px 40px;
    } 


    .page-feature .intro-text-block .pc-break {
        display: none;
    }
}

   .page-feature .content-area {
    margin-bottom: 40px;
    background-color: #ffffff; /* 白背景に変更（黄色廃止） */
    font-size: 20px;

    line-height: 2.0;
    letter-spacing: 0.05em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- 特集セクション1のスタイル --- */
.feature-01-headline {
    text-align: center;
    font-size: 24px;
    line-height: 1.6;
    font-weight: bold;
    color: #231815;
    margin: 40px auto 30px;
}

.feature-01-main-img {
    display: block;
    margin: 0 auto 30px;
    width: 100%;
    max-width: 600px;
}

.feature-01-q-box {
    display: block;
    margin: 0 auto 40px;
    width: 100%;
    max-width: 320px;
}

@media (max-width: 640px) {
    .feature-01-headline {
        font-size: 18px;
        margin: 30px auto 20px;
        line-height: 1.5;
    }
    .feature-01-main-img {
        max-width: 100%;
        margin-bottom: 20px;
    }
    .feature-01-q-box {
        max-width: 250px;
        margin-bottom: 30px;
    }
}


.page-feature .content-area img {
    max-width: 100%;
    height: auto;
}

.page-feature .content-area p {
    width: 100%;
    text-align: left;
}

.page-feature .feature-text,
.page-feature .feature-card > p,
.page-feature .column > p {
    text-indent: 1em;
}

/* --- コンテンツ内余白 --- */
.page-feature .content-area > img.content-img {
    display: block;
}

.page-feature .content-area img[src*="feature-01-midashi_01.png"] {
    margin-bottom: 10px;
}

/* --- PC/SP 表示切り替え --- */
.pc-only {
    display: block !important;
}
.sp-only {
    display: none !important;
}

@media (max-width: 640px) {
    .pc-only {
        display: none !important;
    }
    .sp-only {
        display: block !important;
    }
}

.page-feature .content-area {
    margin-bottom: 60px;

    background-color: #ffffff; /* 白背景に変更（黄色廃止） */
    font-size: 18px;
    line-height: 1.9;
    letter-spacing: 0.05em;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 50px;
}

/* 1stセクション背景白指定 */
.page-feature .content-area.section-01 {
    background-color: #ffffff;
    margin-bottom: 50px; /* 3em相当（他箇所と揃えるためにpxで設定） */
    padding-bottom: 45px;
    gap: 30px;
}

/* --- 統計セクション --- */
.feature-stats-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-top: 30px;
    width: 100%;
    box-sizing: border-box;
}

.feature-stats-image-wrapper {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
    display: block;
    box-sizing: border-box;
}

.feature-stats-img {
    width: 100%;
    max-width: 290px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.feature-stats-text-block {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
    font-size: 16px;
    line-height: 2.1;
    color: #231815;
    text-align: left;
    box-sizing: border-box;
    margin-top: -6px; /* PCでの上部揃えの微調整（ルビのスペース相殺） */
}

.page-feature .content-area .feature-stats-text-block p {
    margin: 0;
}

.page-feature .content-area .feature-stats-text-block p.feature-stats-source {
    width: 100%;
    text-align: right;
    font-size: 11px; /* 11pxに設定 */
    color: #727272;
    margin-top: 15px;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .feature-stats-container {
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
        align-items: center;
    }
    
    .feature-stats-image-wrapper {
        flex: none;
        width: 100%;
        max-width: 251px;
        display: block;
        margin: 0 auto;
    }
    
    .feature-stats-text-block {
        flex: none;
        width: auto;
        max-width: 100%;
        margin: 0 20px;
    }
    
    .page-feature .content-area .feature-stats-text-block p {
        text-align: left;
        font-size: 15px;
        line-height: 1.8;
        margin: 0;
    }
    
    .page-feature .content-area .feature-stats-text-block p.feature-stats-source {
        text-align: left;
        margin-top: 1.5em; /* スマホ用：上の本文と約1行分の空きスペースを追加 */
        font-size: 11px;   /* スマホ用：文字サイズを同様に小さく */
    }
}

/* --- クイズ どっち de SHOW セクション --- */
.page-feature .content-area.section-02 {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0;
    padding: 0;
    background-color: #eaf2d7; /* 左右ブラウザ幅100%の緑背景 */
    margin-bottom: 0;
}

.section-02-inner {
    width: 96%;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 60px;
    box-sizing: border-box;
}

.section-02-title-wrapper {
    text-align: center;
    margin-top: -30px; /* 前のセクションの白背景に少し食い込むように配置 */
    margin-bottom: 40px;
    position: relative;
    z-index: 10;
}

.section-02-title {
    max-width: 320px;
    width: 100%;
    height: auto;
    display: inline-block;
}

.section-02-pc-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.section-02-pc-content .stats-summary-box {
    max-width: 680px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .section-02-inner {
        padding-bottom: 40px;
    }

    .section-02-title-wrapper {
        margin-top: -20px; /* スマホ用食い込み調整 */
        margin-bottom: 30px;
    }

    .section-02-title {
        max-width: 220px;
    }

    .section-02-sp-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0; /* マージンを個別に精密制御するためgapは0に設定 */
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .section-02-sp-content .content-img {
        max-width: 320px;
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .section-02-separator {
        width: 100%;
        max-width: 320px;
        height: auto;
        display: block;
        margin: 60px auto; /* 3倍に増やして上下それぞれ60pxに設定 */
    }

    .section-02-sp-content .feature-sp-02-image-03 {
        margin: 0 auto 90px; /* 3倍に増やして後に90pxの余白を設定 */
    }

    .section-02-sp-content .stats-summary-box-sp {
        max-width: 320px;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
}

/* --- やさしい日本語 セクション --- */
.page-feature .content-area.section-03 {
    background-color: #ffffff;
    margin-top: 50px; /* 3em相当の間隔 */
    padding-top: 0;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.section-03-title-wrapper {
    text-align: center;
    margin-bottom: 20px;
}

.section-03-title {
    max-width: 280px; /* タイトルの最大幅 */
    width: 100%;
    height: auto;
    display: inline-block;
}

.section-03-intro-text {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}

.page-feature .content-area .section-03-intro-text p {
    font-size: 16px;
    line-height: 2.1;
    color: #231815;
    text-align: left;
    margin: 0;
}

.page-feature .content-area .section-03-intro-text p.section-03-source {
    text-align: right;
    font-size: 11px;
    color: #231815; /* 本文と同じ黒色 */
    margin-top: 15px;
}

.section-03-pc-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 45px;
    width: 100%;
}

.section-03-hasami-pc {
    max-width: 783px;
    width: 100%;
    height: auto;
}

.section-03-q-pc {
    width: 620px; /* 元の画像サイズ */
    height: 193px;
    max-width: 100%;
    display: block;
    margin: 30px auto 0; /* 上に30pxの余白を追加 */
}

@media (max-width: 640px) {
    .page-feature .content-area.section-03 {
        margin-top: 40px;
        padding-bottom: 40px;
        gap: 30px;
    }

    .section-03-title-wrapper {
        margin-bottom: 10px;
    }

    .section-03-title {
        max-width: 220px;
    }

    .page-feature .content-area .section-03-intro-text {
        padding: 0 20px;
        width: auto;
    }

    .page-feature .content-area .section-03-intro-text p {
        font-size: 15px;
        line-height: 1.8;
    }

    .page-feature .content-area .section-03-intro-text p.section-03-source {
        text-align: right; /* スマホでも右寄せに配置 */
        margin-top: 1.5em;
        font-size: 11px;
        color: #231815; /* 本文と同じ黒色 */
    }

    .section-03-sp-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        width: 100%;
        box-sizing: border-box;
    }

    .hasami-sp-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
    }

    .hasami-sp-title {
        width: 196px; /* 元の画像サイズ */
        height: 219px;
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    .hasami-sp-cards {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .hasami-sp-card {
        max-width: 361px;
        width: 100%;
        height: auto;
    }

    .section-03-q-sp {
        width: 311px; /* 元の画像サイズ */
        height: 126px;
        max-width: 100%;
        display: block;
        margin: 30px auto 0; /* 左右中央寄せ、かつ上に30pxの余白 */
    }
}

/* --- はじめよう！わたしにできること ＆ 相談窓口 セクション --- */
.page-feature .content-area.section-04 {
    background-color: #ffffff;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 40px; /* 下部パディングを40pxに変更して余白を縮小 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.section-04-pc-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.section-04-action-img-pc {
    max-width: 786px;
    width: 100%;
    height: auto;
}

.section-04-q-pc {
    width: 645px; /* 元の画像サイズ */
    height: 116px;
    max-width: 100%;
    display: block;
    margin: 0 auto 30px; /* 下に30pxの余白 */
}

.section-04-slogan-pc {
    max-width: 781px;
    width: 100%;
    height: auto;
    margin-top: 30px; /* 上の余白を30pxさらに追加 */
}

.section-04-slogan-desc {
    width: 100%;
    max-width: 780px;
    margin: -20px auto 20px; /* スローガン画像とテキストの間を20px狭める */
    box-sizing: border-box;
}

.page-feature .content-area .section-04-slogan-desc p {
    font-size: 16px;
    line-height: 2.1;
    color: #231815;
    text-align: left;
    margin: 0;
}

/* 相談窓口 (Mado) */
.mado-section {
    width: 100%;
    max-width: 786px;
    margin: 20px auto 0;
}

.mado-pc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.mado-title-pc {
    max-width: 781px;
    width: 100%;
    height: auto;
}

.mado-cols {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
}

.mado-link-pc {
    display: inline-block;
    transition: opacity 0.2s ease;
}

.mado-link-pc:hover {
    opacity: 0.8;
}

.mado-card-pc {
    max-width: 364px;
    width: 100%;
    height: auto;
}

.mado-line-pc {
    max-width: 786px;
    width: 100%;
    height: auto;
    margin-top: 10px;
}

@media (max-width: 640px) {
    .page-feature .content-area.section-04 {
        padding-bottom: 40px;
        gap: 30px;
        margin-bottom: 20px; /* 通常の60pxから40px削減し、20pxに設定 */
    }

    .section-04-sp-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        width: 100%;
        box-sizing: border-box;
    }

    .section-04-action-img-sp {
        max-width: 320px;
        width: 100%;
        height: auto;
    }

    .section-04-q-sp {
        width: 80%; /* 横幅の80% */
        max-width: 645px;
        height: auto;
        display: block;
        margin: 0 auto 30px; /* 下に30pxの余白 */
    }

    .section-04-slogan-sp {
        max-width: 308px;
        width: 100%;
        height: auto;
        margin-top: 30px; /* 上の余白を30pxさらに追加 */
    }

    .page-feature .content-area .section-04-slogan-desc {
        padding: 0 20px;
        margin-top: -20px; /* スローガン画像とテキストの間を20px狭める */
        margin-bottom: 10px;
        width: auto;
    }

    .page-feature .content-area .section-04-slogan-desc p {
        font-size: 15px;
        line-height: 1.8;
    }

    .mado-section {
        margin-top: 10px;
    }

    .mado-sp {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
    }

    .mado-title-sp {
        max-width: 360px;
        width: 100%;
        height: auto;
    }

    .mado-cards-sp {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
    }

    .mado-link-sp {
        display: inline-block;
        width: 100%;
        max-width: 276px;
        text-align: center;
    }

    .mado-card-sp {
        width: 100%;
        height: auto;
    }

    .mado-line-sp {
        max-width: 360px;
        width: 100%;
        height: auto;
        margin-top: 5px;
    }
}

/* --- Voice (技能実習生の声) セクション --- */
.page-feature .content-area.section-05 {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0;
    padding: 0;
    background-color: #e0f2ff; /* PC: 薄いブルーの背景色 (全幅100%) */
    margin-bottom: 0;
    margin-top: 0; /* 上の余白を削除 */
}

.section-05-inner {
    width: 96%;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    box-sizing: border-box;
}

.section-05-pc-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.section-05-main-pc {
    width: 100%;
    max-width: 782px; /* 原寸サイズ */
    height: auto;
    display: block;
    margin: 0 auto;
}

.section-05-text-block {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    box-sizing: border-box;
}

.page-feature .content-area .section-05-text-block p {
    font-size: 16px;
    line-height: 2.1;
    color: #231815;
    text-align: left;
    margin: 0;
}

@media (max-width: 640px) {
    .page-feature .content-area.section-05 {
        background-color: #ffffff; /* スマホ：背景色は白のまま */
        margin-top: 0; /* 上の余白を削除 */
    }

    .section-05-inner {
        padding-top: 30px;
        padding-bottom: 40px;
        gap: 30px;
    }

    .section-05-sp-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        text-align: center;
    }

    .section-05-main-sp {
        width: 100%;
        max-width: 360px; /* 原寸サイズ */
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .page-feature .content-area .section-05-text-block {
        padding: 0 20px;
        width: auto;
    }

    .page-feature .content-area .section-05-text-block p {
        font-size: 15px;
        line-height: 1.8;
    }
}








/* 1. 思い込みレンズセクション */
.lens-check-box {
    display: flex;
    background: #ffffff;
    border: 3px dashed #e8447e;
    border-radius: 16px;
    padding: 30px;
    align-items: center;
    gap: 30px;
}

.lens-text {
    flex: 1;
}

.lens-heading {
    font-size: 1.4rem;
    font-weight: bold;
    color: #d9534f;
    margin-bottom: 15px;
    line-height: 1.5;
}

.lens-sub {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
}

.lens-img-wrapper {
    flex: 0 0 250px;
    text-align: center;
}

.lens-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 2. 統計セクション */
.stats-section {
    background: #eefaf6;
    border-radius: 16px;
    padding: 30px;
}

.section-title-badge {
    display: inline-block;
    background: #45b035;
    color: #ffffff;
    font-size: 1.3rem;
    padding: 8px 20px;
    border-radius: 30px;
    margin-bottom: 20px;
    font-weight: bold;
}

.section-title-badge .highlight-num {
    color: #fffb00;
    font-size: 1.6rem;
    margin-left: 5px;
}

.stats-container {
    display: flex;
    gap: 30px;
    align-items: center;
}

.stats-text-col {
    flex: 1;
}

.stats-p {
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 15px;
}

.stats-note {
    font-size: 0.8rem;
    color: #666;
}

.stats-charts-col {
    flex: 0 0 45%;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.chart-box {
    flex: 1;
    background: #ffffff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: center;
}

.chart-img {
    max-width: 100%;
    height: auto;
}

/* 3. クイズセクション */
.quiz-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.quiz-section-title {
    text-align: center;
    background: #fff3cd;
    border: 2px solid #ffeeba;
    padding: 20px;
    border-radius: 12px;
    color: #856404;
}

.quiz-subtitle {
    font-size: 1.1rem;
    font-weight: bold;
}

.quiz-main-title {
    font-size: 2.2rem;
    font-weight: 900;
}

.quiz-hosts {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: -10px 0 10px;
}

.quiz-host-img {
    height: 110px;
    width: auto;
}

.quiz-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.quiz-card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #ffffff;
    background: #e8447e;
    padding: 6px 16px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 25px;
}

.quiz-comparison {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
}

.quiz-choice {
    flex: 1;
    padding: 20px;
    border-radius: 12px;
    position: relative;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
}

.choice-bad {
    border: 3px solid #d9534f;
    background: #fdf7f7;
}

.choice-good {
    border: 3px solid #5cb85c;
    background: #f7fdf7;
}

.choice-label {
    position: absolute;
    top: -12px;
    left: 20px;
    font-weight: 900;
    font-size: 0.9rem;
    color: #ffffff;
    padding: 2px 12px;
    border-radius: 4px;
}

.choice-bad .choice-label {
    background: #d9534f;
}

.choice-good .choice-label {
    background: #5cb85c;
}

.choice-img {
    display: block;
    margin: 10px auto 15px;
    max-height: 160px;
    width: auto;
}

.choice-text {
    font-weight: bold;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
}

.quiz-answer-box {
    background: #fdfaf2;
    border-left: 6px solid #f0ad4e;
    padding: 20px;
    border-radius: 0 12px 12px 0;
}

.quiz-comment {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.8;
}

.comment-accent {
    color: #d9534f;
    font-weight: bold;
}

.speech-quote {
    display: block;
    margin-top: 8px;
    font-weight: bold;
    color: #5cb85c;
    font-size: 1.1rem;
}

/* 4. やさしい日本語 */
.yasashii-section {
    background: #fff9e6;
    border-radius: 16px;
    padding: 30px;
    border: 2px solid #ffe8a1;
}

.yasashii-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #856404;
    text-align: center;
    margin-bottom: 8px;
}

.yasashii-subtitle {
    font-size: 1.1rem;
    text-align: center;
    color: #666;
    margin-bottom: 25px;
}

.yasashii-intro-box {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 30px;
    line-height: 1.9;
}

.yasashii-origin {
    margin: 0;
    font-size: 1rem;
}

.hasami-rules-box {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 30px;
    border: 1px solid #ffd86b;
}

.hasami-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hasami-badge {
    background: #ff5e97;
    color: #ffffff;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
}

.hasami-list {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hasami-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
}

.law-word {
    background: #e8447e;
    color: #ffffff;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.3rem;
}

.rewriting-examples {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
}

.example-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.example-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.example-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fcfcfc;
    border: 1px solid #eee;
    padding: 15px 20px;
    border-radius: 8px;
}

.ex-original {
    font-weight: bold;
    color: #666;
    flex: 1;
}

.ex-arrow {
    color: #ff5e97;
    font-weight: bold;
    padding: 0 15px;
}

.ex-easy {
    font-weight: bold;
    color: #45b035;
    flex: 1;
    font-size: 1.05rem;
}

/* 5. 現場ボイス */
.case-study-section {
    background: #ebf8f5;
    border-radius: 16px;
    padding: 30px;
}

.case-study-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #008080;
    margin-bottom: 5px;
}

.company-name {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
}

.case-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.case-img-col {
    flex: 0 0 40%;
}

.case-photo {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.case-text-col {
    flex: 1;
}

.case-p {
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 20px;
}

.trainee-voice {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border-left: 6px solid #008080;
}

.voice-title {
    font-weight: bold;
    color: #008080;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.voice-p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    font-style: italic;
}

/* 6. インタラクティブチャレンジ */
.challenge-section {
    background: #fff;
    border: 3px solid #ffcc00;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
}

.challenge-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #856404;
    margin-bottom: 20px;
}

.challenge-q {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.answer-toggle-btn {
    background: #ffcc00;
    color: #333;
    font-weight: bold;
    border: none;
    padding: 10px 30px;
    font-size: 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.answer-toggle-btn:hover {
    background: #e6b800;
}

.quiz-answer-hidden {
    display: none;
}

.quiz-answer-visible {
    display: block;
    margin-top: 20px;
    background: #fff9e6;
    padding: 15px;
    border-radius: 8px;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 7. 相談窓口 */
.support-contact-box {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 30px;
}

.contact-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

.contact-list {
    display: flex;
    gap: 20px;
}

.contact-card {
    flex: 1;
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: center;
}

.contact-card h4 {
    font-weight: bold;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.contact-card .tel {
    font-size: 1.2rem;
    font-weight: bold;
    color: #45b035;
}

/* --- レスポンス崩れ対策用メディアクエリ --- */
@media (max-width: 980px) {
    .stats-container, .case-content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .stats-charts-col, .case-img-col {
        flex: auto;
        width: 100%;
        margin-top: 15px;
    }
}

@media (max-width: 640px) {
    .page-title-wrapper {
        margin: 40px auto 30px;
    }
    
    .feature-main-title {
        font-size: 1.5rem;
    }
    
    .feature-main-title .theme-label {
        font-size: 0.9rem;
    }
    
    .feature-main-title .main-copy {
        font-size: 2rem;
    }
    
    .page-feature .intro-text-block {
        font-size: 15px;
        padding: 20px;
    }
    
    .page-feature .content-area {
        font-size: 16px;
        width: 96%;
        padding-top: 10px;
        padding-left: 0;
        padding-right: 0;
    }


    

}


/* ===================================
   インタビューページ (interview.php) のスタイル
   =================================== */

   .page-interview .main-content {
    padding-top: 0;
}

.interview-title-block {
    background-color: #fceef4;
    padding: 0;
    width: 100%;
    text-align: center;
}

.interview-title-block picture,
.interview-title-block img {
    width: 100%;
    height: auto;
    display: block;
}

.page-interview .content-area {
    /* ベースの .content-area のスタイルを上書き */
    max-width: none;
    width: 100%;
    border-radius: 0;
    margin-bottom: 0;
    padding: 40px 0; /* 上下の余白のみ設定 */
    
    /* インタビューページ固有のスタイル */
    font-size: 20px;
    line-height: 2.0;
    letter-spacing: 0.05em;
}

.content-inner {
    max-width: 880px;
    width: 96%;
    margin: 0 auto;
}

.content-inner img {
    max-width: 100%;
    height: auto;
}

.profile-section {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 80px;
}

.profile-left {
    width: calc(50% - 15px);
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.profile-left p {
    margin: 0;
}

.movie-box-pc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 30px; /* 文章との間の余白 */
}

.movie-text-pc {
    width: 220px;
    height: 51px;
    display: block;
    margin-bottom: 20px; /* メッセージはこちら画像とMOVIEボタンの間の20px余白 */
}

.movie-box-pc a {
    display: inline-block;
}

.movie-box-pc a img {
    width: 100%;
    max-width: 229px;
    height: auto;
    display: block;
}

.profile-right {
    width: calc(50% - 15px);
}

.interview-article {
    margin-bottom: 60px;
}

.interview-article > picture {
    display: block; /* pictureタグが正しく幅を持つように */
    margin-bottom: 30px;
}
.interview-article > picture > img {
    display: block; /* imgの下の余白を消す */
}


.article-text p {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0.5em; /* 段落下の余白を調整 */
}

.hobby-section {
    position: relative;
    margin-top: 60px;
}

.hobby-box {
    background-color: #eaf4fd; /* 薄い水色の背景色 */
    max-width: 780px;
    margin: 0 auto 80px;
    padding: 35px 40px;
    text-align: center;
    box-sizing: border-box;
    clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%); /* 右上斜めカット */
}

.hobby-heading {
    display: block;
    margin: 0 auto 15px;
    max-width: 100%;
    height: auto;
}

.hobby-separator {
    display: block;
    margin: 0 auto 15px;
    max-width: 100%;
    height: auto;
}

.hobby-catchphrase {
    display: block;
    margin: 0 auto 25px;
    max-width: 100%;
    height: auto;
}

.hobby-text {
    font-size: 17px;
    line-height: 1.9;
    color: #231815;
    text-align: left;
    text-indent: 1em;
    padding: 0;
    margin: 0;
}

@media (max-width: 640px) {
    .hobby-section {
        margin-top: 40px;
    }

    .hobby-box {
        padding: 30px 20px;
        margin-bottom: 50px;
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); /* スマホ用右上斜めカット */
    }

    .hobby-text {
        font-size: 15px;
        line-height: 1.8;
    }

    .hobby-heading {
        width: 80%;
        height: auto;
    }

    .page-interview .profile-section {
        flex-direction: column;
        align-items: center; 
    }

    .page-interview .profile-left,
    .page-interview .profile-right {
        width: 100%;
    }

    .page-interview .profile-right {
        order: 1;
    }
    .page-interview .profile-left {
        order: 2;
    }

    .page-interview .profile-right img {
        width: 70%;
        max-width: 390px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /* --- Movie box for SP --- */
    .movie-box-sp {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 25px; /* 上の文章との間の余白 */
    }
    .movie-box-sp a {
        display: block;
        width: 60%; /* ブラウザ幅の60% */
        max-width: 229px;
        margin: 0 auto 15px; /* 左右中央寄せ ＋ 下の画像との間に15pxの余白 */
    }
    .movie-btn-sp {
        width: 100%;
        height: auto;
        display: block;
    }
    .movie-text-sp {
        width: 80%;
        max-width: 287px;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}



/* ===================================
   案内ページ (guidance.php) のスタイル
   =================================== */

.page-guidance .main-content {
    padding-top: 0;
}

.guidance-title-block {
    background-image: url('common/images/guidance-bg_01.png');
    background-repeat: repeat;
    background-position: center top;
    padding: 0;
    width: 100%;
    text-align: center;
}

.guidance-title-block picture,
.guidance-title-img {
    width: 100%;
    height: auto;
    display: block;
}

.page-guidance .content-area {
    max-width: none;
    width: 100%;
    border-radius: 0;
    margin-bottom: 0;
    padding: 120px 0 80px; /* タイトル画像との上の余白を 60px から 2倍の 120px に広げる */
    font-size: 18px;
    line-height: 2.0;
    letter-spacing: 0.03em;
}

.page-guidance .content-inner {
    max-width: 880px;
    width: 92%;
    margin: 0 auto;
}

/* 各セクション */
.guidance-section {
    margin-bottom: 140px; /* PC: 70px から 2倍の 140px へ広げる */
}

.section-midashi {
    display: block;
    margin: 0 auto 30px;
    max-width: 100%;
    height: auto;
}

.section-text p {
    font-size: 18px;
    line-height: 2.0;
    color: #231815;
    text-indent: 1em; /* 文頭1文字スペース */
    margin: 0;
}

/* セクション2: 同和問題項目リスト */
.dowa-items-list {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin: 30px auto 0;
    max-width: 620px; /* PCでのリスト全体幅を狭めて中央揃え */
}

.dowa-item {
    display: flex;
    align-items: center;
    gap: 25px;
}

.dowa-item-badge {
    width: 166px;
    height: 54px;
    flex-shrink: 0;
    display: block;
}

.dowa-item-text {
    font-size: 18px;
    line-height: 1.8;
    color: #231815;
    text-indent: 0; /* 文頭字空けなし */
    margin: 0;
}

/* セクション4: レイアウト (回り込み) */
.section-04-content {
    margin-top: 30px;
}

.section-04-illustration {
    float: right;
    margin-left: 30px;
    margin-bottom: 15px;
}

.section-04-illustration img {
    width: 186px;
    height: 187px;
    display: block;
}

.section-04-text p {
    font-size: 18px;
    line-height: 2.0;
    color: #231815;
    text-indent: 1em; /* 文頭1文字スペース */
    margin: 0 0 1.5em;
}

.section-04-text p:last-child {
    margin-bottom: 0;
}

/* clearfix */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* 出典元エリア */
.guidance-source {
    clear: both;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 35px; /* 4の文章との余白を縮小 */
    font-size: 13.5px;
    line-height: 1.6;
    color: #231815;
}

.source-label {
    font-weight: bold;
    flex-shrink: 0;
}

.source-content p {
    margin: 0 0 4px;
}

.source-content p:last-child {
    margin-bottom: 0;
}

/* 案内ページのレスポンシブ */
@media (max-width: 640px) {
    .page-guidance .content-area {
        padding: 80px 0 60px; /* SP: 40px から 2倍の 80px に広げる */
        font-size: 16px;
    }

    .guidance-section {
        margin-bottom: 100px; /* SP: 50px から 2倍の 100px へ広げる */
    }

    .section-midashi {
        margin-bottom: 20px;
    }

    .section-text p {
        font-size: 16px;
        line-height: 1.8;
    }

    /* セクション2 SP配置 */
    .dowa-items-list {
        gap: 30px;
        margin-top: 20px;
    }

    .dowa-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .dowa-item-badge {
        width: 140px;
        height: auto;
    }

    .dowa-item-text {
        font-size: 16px;
        line-height: 1.8;
        text-align: left;
    }

    /* セクション4 SP配置 */
    .section-04-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }

    .section-04-illustration {
        float: none;
        margin-left: 0;
        margin-bottom: 15px;
        order: 1; /* SP表示時：見出しの下・本文の上に配置 */
    }

    .section-04-illustration img {
        width: 150px;
        height: auto;
    }

    .section-04-text {
        order: 2;
    }

    .section-04-text p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 1.2em;
    }

    .guidance-source {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-top: 25px; /* SPの文章との隙間を狭める */
        font-size: 13px;
    }
}

.text-center {
    text-align: center !important;
}

/* --- 汎用クラス --- */
.emphasis-dot {
    /* text-emphasis は使用せず ruby タグで制御 */
    text-emphasis: none;
    -webkit-text-emphasis: none;
}

.emphasis-dot rt {
    font-size: 0.25em; /* ドットのサイズ調整 (0.5emが標準) */
    color: #231815;   /* 本文色に合わせる */
    text-align: center;
    position: relative;
    top: -5px; /* 本文との距離を調整 */
}