@charset "UTF-8";

/* =========================================
   1. タブレット＆モバイル共通ベース (画面幅768px以下)
   ※ PC版からのレイアウト変更（縦積み、100%化など）をすべてここに記述
========================================= */
@media screen and (max-width: 768px) {
    /* --- 横揺れ（右へのはみ出しによる左余白）防止 --- */
    body {
        overflow-x: hidden;
    }

    /* --- 共通 --- */
    .container_obi {}
    #article_obi {
        margin-top: 0px;
        padding-top: 50px;
    }
    .section_main {
        background-color: #fcedeb;
        padding-top: 30px;
    }
    .contents_wrap {
        width: 100%;
        padding: 0 15px; 
        box-sizing: border-box;
    }
    .sp_br { display: block; }
    .pc_br { display: none; }

    /* ==========================
       article_header
    ========================== */
    .header_topic {
        position: relative;
        padding-top: 4px;
        flex-direction: column; 
    }
    .topic_wrap {
        padding: 14px 0 10px;
    }
    .topic_wrap_bk {
        font-size: 18px;
        height: auto;
        padding: 7px 10px;
        letter-spacing: 0;
        background-size: 100% 100%;
        box-sizing: border-box;
        display: inline-block;
    }

    /* --- 赤背景のメインコピー（AI自動帯替え機能） --- */
     .topic_wrap_w {
        font-size: clamp(2.8rem, 12vw, 38px); 
        word-break: keep-all; 
        line-height: 1.2;
    }

    /*ふきだし*/
    .top_fukidashi {
        position: relative;
        display: inline-block;
        margin-bottom: 20px;
        padding: 5px 10px;
        border: 2px solid #f5f5f5;
        border-radius: 5px;
        background-color: #ffffff;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        line-height: 1.2;
        color: #000000;
    }
    .top_fukidashi::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 27%;
        border-style: solid;
        border-width: 20px 10px 0 10px;
        border-color: #f5f5f5 transparent transparent;
        translate: -50% 100%;
    }
    .top_fukidashi::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 27%;
        border-style: solid;
        border-width: 15.5px 7.8px 0 7.8px;
        border-color: #ffffff transparent transparent;
        translate: -50% 100%;
    }

    /* --- 黄色い丸と中のテキスト --- */
    .maru_ye {
        position: absolute;
        width: 82px;
        height: 82px;
        top: 134px;
        right: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .maru_ye span {
        font-size: 22px;
        position: static;
        transform: none;
        line-height: 1;
        margin-bottom: 5px;
        color: #e60012;
    }
    .maru_ye p {
        font-size: 14px;
        position: static;
        transform: none;
        width: auto;
        line-height: 1.2;
    }

    /* --青-- */
    .obi_blueTxt_wrap {
        padding-right: 28%;
        box-sizing: border-box;
    }
    .header_txt {
        font-size: 18px;
        line-height: 1.6;
        padding: 3% 0 1%;
    }
    .hakase_sagyou { display: none; }
    .hakase_sagyou img {
        width: 120px;
        height: auto;
    }
    .section_blue {
        background-color: #2056a8;
        min-height: 35px;
    }

    /* --白-- */
    .header_img {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin-top: 30px;
    }
    .obi_hakase {
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }
    .img_hakase {
        width: 30%;
    }
    .obi_hakase_txt {
        font-size: 18px;
        line-height: 22px;
        background-size: 100% 100%;
        padding: 6% 4% 6% 12%;
        height: auto;
        box-sizing: border-box;
    }
    /* 入れ子（ネスト）構文を標準形式に展開（安全対策） */
    .obi_hakase_txt span {
        font-size: 22px;
        line-height: 28px;
    }
    .obi_ijyuin {
        justify-content: center;
        gap: 12px;
        width: 100%;
    }
    .obi_ijyuin_txt {
        font-size: 18px;
        padding-top: 12px;
        width: auto;
        line-height: 28px;
        max-height: 120px;
    }
    .obi_ijyuin_txt span {
        font-size: 28px;
    }
    .obi_ijyuin_txt span::before {
        width: 145px;
        height: 10px;
    }
    .obi_ijyuin_txt::before,
    .obi_ijyuin_txt::after {
        width: 75px;
        height: 2px;
    }
    .obi_ijyuin_txt::before { top: 7px; }
    .obi_ijyuin_txt::after { bottom: 20px; }
    
    .ijyuin { width: 40%; }
    .ijyuin img { width: 100%; }

    /* --- 共通の赤枠ボックス --- */
    .red-border-box {
        background-color: #ffffff;
        border: 2px solid #d32f2f;
        border-radius: 12px;
        padding: 25px 15px 20px 15px;
        margin-bottom: 40px;
        position: relative;
    }
    .section_header {
        margin-top: 0;
        padding-top: 45px; 
    }

    /* ==========================
       帯替え機能セクション
    ========================== */
    .obi-replacement-section {
        padding-top: 60px;
        padding-bottom: 50px;
        padding-left: 10px;
        padding-right: 10px;
        max-width: 100%;
        margin: 0 auto;
    }
    .section-title {
        font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); 
        line-height: 32px;
        margin-top: -75px;
        margin-bottom: 15px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        display: flex;
        text-align: center;
    }
    .section-title img {
        width: 90px;
        margin-right: 0;
        margin-bottom: 10px;
    }
    .section-title span.large-num {
        font-size: 32px;
        white-space: nowrap;
        margin: 0 3px;
    }
    
    /* 上段：2ステップセクション */
    .step-container {
        display: flex;
        flex-direction: column; 
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    .step-block, 
    .step-block2 {
        width: 100%;
        text-align: center;
        margin-bottom: 0;
    }
    .step-label {
        font-size: 28px;
        padding: 10px 15px;
        margin-bottom: 10px;
    }
    .step-title {
        color: #d32f2f;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 15px;
        line-height: 28px;
    }
    .step-arrow {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        transform: rotate(90deg); 
        margin: 20px 0;
        height: 50px; 
    }
    .step-image-placeholder,
    .step-image-placeholder2 {
        width: 100%;
        height: auto;
        min-height: 200px;
    }
    
    /* 上段：右側テキスト部分 */
    .step-side-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 30px;
        text-align: center;
    }
    .step-side-info .top-text {
        line-height: 1.6;
        background-image: url(../img/roop.webp);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 130px;
        height: 115px;
        text-align: center;
        margin: 0 auto 30px auto;
        padding-top: 30px;
        font-size: 20px;
        width: 100%;
        box-sizing: border-box;
    }
    .step-side-info .bottom-text {
        position: relative;
        line-height: 1.4;
        text-align: center;
        font-size: 25px;
        width: 100%;
    }
    .step-side-info .bottom-text img {
        width: 70px;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    /* 下段：新・再編集機能セクション */
    .edit-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .edit-mockup {
        width: 100%;
        min-height: 200px;
    }
    .edit-features-grid {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
    }
    .feature-item {
        width: calc(50% - 5px); 
        padding: 10px;
        box-sizing: border-box;
    }
    .feature-number {
        font-size: 16px;
        top: 5px;
        left: 5px;
    }
    .feature-title {
        font-size: 13px;
        margin-top: 10px;
        margin-bottom: 5px;
    }
    .feature-icon-placeholder {
        width: 40px;
        height: 40px;
    }

    /* ==========================
       旧：再編集機能 (plus) 
    ========================== */
    .step_plus { margin: 60px auto 0; }
    .step_item { width: 100%; }
    .step_item_topic {
        font-size: 22px;
        font-weight: bold;
        height: auto;
        line-height: 1.4;
        padding: 15px 10px;
    }
    .step_item_plus {
        font-size: 16px;
        width: 60px;
        height: 60px;
        padding-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        top: -50px;
        left: 10px;
    }
    .step_item_plus p { padding-top: 0; }
    
    .hakase_plus { display: none; }
    .hakase_plus img { width: 120px; }
    .plus_list { padding: 20px 10px; }
    .plus_topic {
        font-size: 16px;
        font-weight: 500;
        width: 100%;
        display: inline-block;
        padding: 5px 15px 5px 40px;
        box-sizing: border-box;
    }
    .plus_number {
        font-size: 25px;
        width: 30px;
        height: 30px;
        top: 3px;
        left: 5px;
        line-height: 30px;
        margin-right: 20px;
    }
    .num01, .num02, .num03, .num04 {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 20px auto; 
        width: 100% !important; 
        box-sizing: border-box; 
    }
    .plus_img_pc { display: none; }
    .plus_img_sp {
        display: block;
        text-align: center;
    }
    .plus_img_sp img { max-width: 100%; }
    .plus_txt {
        padding: 8px;
        font-size: 15px;
        width: 100%;
    }

    /* ==========================
       article_footer (相談ボタン)
    ========================== */
    .soudan {
        padding: 40px 15px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .maru_bl {
        line-height: 1.2;
        width: 90px;
        height: 90px;
        top: -45px;
        left: 50%;
        transform: translateX(-50%); 
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .maru_bl p {
        font-size: 13px;
        font-weight: 600;
        padding-top: 0;
    }
    .txt_contents { margin-top: 30px; }
    .txt_contents h3 {
        font-size: 18px;
        line-height: 1.4;
    }
    .soudan_txt {
        font-size: 14px;
        margin-top: 10px;
    }
    .soudan_img { display: none; }
    
    .soudan_btn {
        font-size: 16px;
        width: 90%;
        max-width: 320px;
        padding: 18px 10px;
        margin: 30px auto;
        box-sizing: border-box;
        border: 2px solid #ff0901;
    }
}

/* =========================================
   2. 標準スマホ用 (画面幅480px以下)
   ※ 768pxの設定を引き継ぎつつ、一般的なスマホサイズで
   微調整が必要なものだけをここに上書きします
========================================= */
@media screen and (max-width: 480px) {
    /* 必要に応じて、余白をさらに狭めたいクラスなどをここに記述します */
    /* 例： .topic_wrap { padding: 10px 0; } */
}

/* =========================================
   3. 小さいスマホ用 (画面幅375px以下)
   ※ エラーの起きていた閉じタグを修正済です
========================================= */
@media screen and (max-width: 375px) {
    .header_txt {
        font-size: 16px;
        line-height: 1.6;
        padding: 3% 0 1%;
    }
     .topic_wrap_w {
        font-size: clamp(2.7rem, 10.5vw, 40px); 
        word-break: keep-all; 
        line-height: 1.2;
    }
    .img_hakase {
        width: 35%;
    }
    .obi_hakase_txt {
        font-size: 16px;
        background-size: 100% 100%;
        padding: 6% 4% 6% 12%;
        height: auto;
        box-sizing: border-box;
    }
    .obi_hakase_txt span {
        font-size: 20px;
    }
}