@charset "utf-8";

/* =========================================================
   BuzzBreak Quality Control feature page
   quality.html 専用CSS
   既存サイトの色・背景・フォントを活かしながら、
   画像を控えめにし、単元ごとに読みやすく整理。
   ========================================================= */

body.quality{
    background-color:var(--blue);
}

/* ---------- 戻るリンク ---------- */
.qc-back-row{
    text-align:center;
    margin-top:var(--header-height);
    padding-top:2rem;
}
.qc-back-row a{
    display:inline-block;
    font-size:0.85rem;
    letter-spacing:0.15rem;
    border-bottom:1px solid #fff;
    padding-bottom:0.2rem;
}

/* ---------- 共通見出し ---------- */
.qc-section-head{
    text-align:center;
    margin-bottom:3.2rem;
}
.qc-section-unit{
    display:inline-block;
    font-family:"antique";
    font-size:0.95rem;
    color:var(--red);
    letter-spacing:0.24rem;
    line-height:1;
}
.qc-section-head h2{
    margin-top:0.9rem;
    font-size:1.8rem;
    font-weight:bold;
    letter-spacing:0.12rem;
    line-height:1.5;
}

/* ---------- ヒーロー ---------- */
#qc_hero{
    background-color:#000;
    text-align:center;
    padding-top:5rem;
    padding-bottom:6rem;
    margin-top:2rem;
    position:relative;
    overflow:hidden;
}
#qc_hero:before{
    content:"";
    display:block;
    width:38rem;
    aspect-ratio:1 / 1;
    background-image:url("../img/obj_back.png");
    background-size:cover;
    background-position:center;
    position:absolute;
    top:-14rem;
    right:-12rem;
    opacity:0.22;
    pointer-events:none;
}
#qc_hero .sec-inner{
    position:relative;
    z-index:1;
}
.qc-hero-copy{
    max-width:42rem;
    margin:0 auto;
    padding:2.6rem 2rem;
    border:1px solid rgba(255,255,255,0.28);
    background-color:rgba(255,255,255,0.04);
}
.qc-hero-kicker{
    display:block;
    color:var(--red);
    font-weight:bold;
    font-size:1.45rem;
    letter-spacing:0.12rem;
    line-height:1.5;
}
.qc-hero-copy p{
    margin-top:1.5rem;
    line-height:2.15;
    font-size:1rem;
    letter-spacing:0.06rem;
}
.qc-hero-title{
    margin-top:5rem;
}
#qc_hero .qc-eyebrow{
    font-family:"antique";
    font-size:2.2rem;
    color:var(--red);
    letter-spacing:0.15rem;
    line-height:1;
}
#qc_hero .qc-eyebrow + span{
    display:block;
    font-size:1rem;
    letter-spacing:0.2rem;
    margin-top:0.8rem;
}
#qc_hero h2{
    font-weight:bold;
    font-size:2.35rem;
    letter-spacing:0.15rem;
    margin-top:2.4rem;
    line-height:1.5;
}
#qc_hero h2 + p{
    max-width:44rem;
    margin:2rem auto 0;
    line-height:1.9;
    font-size:0.95rem;
    letter-spacing:0.05rem;
}

/* ---------- Quality Control 概要 ---------- */
#qc_overview{
    margin-top:var(--section-margin);
}
.qc-card-box{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:3rem;
}
.qc-card{
    flex:1 1 20rem;
    max-width:25rem;
    border-top:2px solid var(--red);
    padding:1.6rem 0 0;
}
.qc-card-en{
    display:block;
    font-family:"antique";
    font-size:0.95rem;
    color:var(--red);
    letter-spacing:0.18rem;
}
.qc-card h3{
    font-size:1.25rem;
    font-weight:bold;
    line-height:1.6;
    margin-top:0.7rem;
    letter-spacing:0.06rem;
}
.qc-card ul{
    margin-top:1.2rem;
    line-height:2;
    font-size:0.92rem;
}
.qc-card li:before{
    content:"・";
}

/* ---------- 各テスト項目 ---------- */
#qc_features{
    margin-top:var(--section-margin);
}
.qc-feature-row{
    margin-top:7rem;
    position:relative;
}
.qc-feature-row:first-child{
    margin-top:0;
}
.qc-unit-label{
    display:inline-block;
    margin-bottom:1.5rem;
    padding:0.45rem 0.9rem;
    border:1px solid rgba(255,255,255,0.35);
    color:var(--red);
    font-family:"antique";
    font-size:0.85rem;
    letter-spacing:0.18rem;
    line-height:1;
}
.qc-feature-box{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:0;
}

/* 画像は旧レイアウト比で約2/3サイズに調整 */
.qc-feature-box > .item_1{
    width:30%;
    position:relative;
}
.qc-feature-box > .item_2{
    width:62%;
}
.qc-feature-box > .item_1:after{
    content:"";
    display:block;
    width:220%;
    aspect-ratio:976 / 1114;
    background-image:url("../img/obj_back.png");
    background-size:cover;
    background-position:center;
    position:absolute;
    top:-65%;
    left:-70%;
    z-index:0;
    pointer-events:none;
    opacity:0.42;
}
.qc-feature-box > .item_1 .qc-photo{
    position:relative;
    z-index:10;
    width:100%;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background-color:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.22);
    box-shadow:0 1.2rem 3rem rgba(0,0,0,0.18);
}
.qc-feature-box > .item_1 .qc-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
.qc-step-label{
    font-weight:bold;
    letter-spacing:0.1rem;
    font-size:1.05rem;
    line-height:1.6;
}
.qc-step-label .qc-num{
    color:var(--red);
    font-size:1.55em;
    margin-right:0.45rem;
    vertical-align:-0.06em;
}
.qc-feature-box h2{
    font-weight:bold;
    font-size:1.75rem;
    letter-spacing:0.1rem;
    margin-top:0.7rem;
    line-height:1.55;
}
.qc-feature-box p{
    margin-top:1.15rem;
    line-height:1.95;
    font-size:0.93rem;
    letter-spacing:0.04rem;
}
.qc-mini-title{
    margin-top:1.3rem;
    font-weight:bold;
    color:var(--red);
    letter-spacing:0.1rem;
    font-size:0.95rem;
}
.qc-list{
    margin-top:1rem;
    line-height:1.9;
    font-size:0.92rem;
    letter-spacing:0.04rem;
}
.qc-list-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:0.55rem 1rem;
    max-width:42rem;
}
.qc-list-grid li{
    border-left:2px solid var(--red);
    padding-left:0.65rem;
    line-height:1.6;
}
.qc-list-compact{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    max-width:34rem;
}
.qc-spec-callout{
    display:inline-block;
    border:1px solid rgba(255,255,255,0.75);
    padding:0.8rem 1.7rem;
    margin-top:1.4rem;
    min-width:12rem;
}
.qc-spec-callout .qc-spec-label{
    display:block;
    font-size:0.72rem;
    letter-spacing:0.12rem;
    opacity:0.82;
}
.qc-spec-callout .qc-spec-title{
    display:block;
    margin-top:0.25rem;
    font-size:0.85rem;
    letter-spacing:0.12rem;
}
.qc-spec-callout .qc-spec-value{
    display:block;
    font-size:1.75rem;
    font-weight:bold;
    color:var(--red);
    letter-spacing:0.05rem;
    margin-top:0.2rem;
    line-height:1.2;
}
/* PC表示でもUNITラベルは本文側の起点に揃える。
   reverse行は本文が左、画像が右になるため、左寄せが正しい配置。 */
.qc-feature-row.reverse .qc-unit-label{
    margin-left:0;
}
.qc-feature-row.reverse .qc-feature-box > .item_1{
    order:2;
}
.qc-feature-row.reverse .qc-feature-box > .item_2{
    order:1;
}
.qc-feature-row.reverse .qc-feature-box > .item_1:after{
    left:auto;
    right:-70%;
}

/* ---------- 品質基準テーブル ---------- */
#qc_table{
    margin-top:var(--section-margin);
}
table.qc-table{
    width:100%;
    max-width:46rem;
    margin:0 auto;
    border-collapse:collapse;
    background-color:rgba(0,0,0,0.12);
}
table.qc-table th,
table.qc-table td{
    padding:1.05rem 1.25rem;
    text-align:left;
    border-bottom:1px solid rgba(255,255,255,0.34);
    font-size:0.92rem;
    line-height:1.7;
}
table.qc-table th{
    background-color:var(--red);
    color:#fff;
    font-weight:bold;
    letter-spacing:0.1rem;
}
table.qc-table td:first-child{
    font-weight:bold;
    white-space:nowrap;
}
table.qc-table tr:last-child td{
    border-bottom:none;
}

/* ---------- Quality Philosophy ---------- */
#qc_philosophy{
    margin-top:var(--section-margin);
    background-color:#000;
    text-align:center;
    padding-top:6rem;
    padding-bottom:6rem;
    position:relative;
    overflow:hidden;
}
#qc_philosophy:before{
    content:"";
    display:block;
    width:36rem;
    aspect-ratio:1 / 1;
    background-image:url("../img/obj_back.png");
    background-size:cover;
    background-position:center;
    position:absolute;
    bottom:-17rem;
    left:-12rem;
    opacity:0.18;
    pointer-events:none;
}
#qc_philosophy .sec-inner{
    position:relative;
    z-index:1;
}
.qc-philosophy-eyebrow{
    font-family:"antique";
    font-size:1.6rem;
    color:var(--red);
    letter-spacing:0.1rem;
}
.qc-philosophy-body{
    max-width:38rem;
    margin:2.5rem auto 0;
    line-height:2.25;
    font-size:1.03rem;
    letter-spacing:0.06rem;
}
.qc-philosophy-tagline{
    margin-top:3.5rem;
    font-size:2rem;
    font-weight:bold;
    color:var(--red);
    letter-spacing:0.1rem;
}

@media (max-width:820px){
    .qc-back-row a{ font-size:1.2rem; }

    #qc_hero{ padding-top:6rem; padding-bottom:7rem; }
    .qc-hero-copy{ padding:3rem 2rem; }
    .qc-hero-kicker{ font-size:2.2rem; }
    .qc-hero-copy p{ font-size:1.35rem; }
    #qc_hero .qc-eyebrow{ font-size:3.4rem; }
    #qc_hero .qc-eyebrow + span{ font-size:1.5rem; }
    #qc_hero h2{ font-size:3rem; }
    #qc_hero h2 + p{ font-size:1.35rem; }

    .qc-section-unit{ font-size:1.25rem; }
    .qc-section-head h2{ font-size:2.4rem; }
    .qc-card-en{ font-size:1.25rem; }
    .qc-card h3{ font-size:1.8rem; }
    .qc-card ul{ font-size:1.3rem; }

    .qc-feature-row{ margin-top:8rem; }
    .qc-unit-label,
    .qc-feature-row.reverse .qc-unit-label{
        margin-left:0;
        font-size:1.1rem;
    }
    .qc-feature-box > .item_1,
    .qc-feature-box > .item_2{
        width:100%;
    }
    .qc-feature-box > .item_1{
        margin-bottom:3rem;
        max-width:22rem;
        margin-left:auto;
        margin-right:auto;
    }
    .qc-feature-row.reverse .qc-feature-box > .item_1{
        order:1;
    }
    .qc-feature-row.reverse .qc-feature-box > .item_2{
        order:2;
    }
    .qc-step-label{ font-size:1.55rem; }
    .qc-feature-box h2{ font-size:2.3rem; }
    .qc-feature-box p,
    .qc-feature-box .qc-list{ font-size:1.3rem; }
    .qc-list-grid,
    .qc-list-compact{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:0.9rem 1rem;
    }
    .qc-mini-title{ font-size:1.35rem; }
    .qc-spec-callout .qc-spec-label{ font-size:1.05rem; }
    .qc-spec-callout .qc-spec-title{ font-size:1.15rem; }
    .qc-spec-callout .qc-spec-value{ font-size:2.25rem; }

    table.qc-table th,
    table.qc-table td{ font-size:1.25rem; padding:1.2rem 1rem; }

    .qc-philosophy-eyebrow{ font-size:2.4rem; }
    .qc-philosophy-body{ font-size:1.35rem; }
    .qc-philosophy-tagline{ font-size:2.8rem; }
}

@media (max-width:480px){
    .qc-hero-copy{ padding:2.5rem 1.4rem; }
    .qc-hero-kicker{ font-size:2.4rem; }
    #qc_hero .qc-eyebrow{ font-size:4.2rem; }
    #qc_hero h2{ font-size:3.35rem; }
    .qc-list-grid,
    .qc-list-compact{
        grid-template-columns:1fr;
    }
    table.qc-table th,
    table.qc-table td{
        display:block;
        width:100%;
        box-sizing:border-box;
    }
    table.qc-table th:nth-child(2){ display:none; }
    table.qc-table tr{ display:block; border-bottom:1px solid rgba(255,255,255,0.34); }
    table.qc-table tr:first-child{ border-bottom:none; }
    table.qc-table td:first-child{
        border-bottom:none;
        padding-bottom:0.25rem;
        color:var(--red);
    }
    table.qc-table td:nth-child(2){ padding-top:0.25rem; }
    .qc-philosophy-tagline{ font-size:3.1rem; }
}

/* ---------- /wheel/index.html に追加するバナー用。既存互換として残しています。 ---------- */
#quality_banner{
    margin-top:var(--section-margin);
}
.quality_banner-box{
    background-color:rgba(0,0,0,0.25);
    border:1px solid rgba(255,255,255,0.25);
    padding:3rem;
    text-align:center;
}
.quality_banner-box p{
    margin-top:1.5rem;
    line-height:1.9;
    font-size:0.9rem;
    max-width:40rem;
    margin-left:auto;
    margin-right:auto;
}
.quality_banner-box .link_btn-row{
    margin-top:2rem;
}
@media (max-width:820px){
    .quality_banner-box{ padding:3rem 1.5rem; }
    .quality_banner-box p{ font-size:1.3rem; }
}

/* ---------- そこまでやる！BuzzBreak ロゴ画像レスポンシブ ----------
   sokomade.png は横長画像のため、画面幅に合わせて縮小します。
   HTML側は img に .qc-sokomade-logo、親要素に .qc-logo-wrap を付与してください。
   ------------------------------------------------------------ */
.qc-logo-wrap{
    display:block;
    width:100%;
}
.qc-sokomade-logo{
    display:block;
    width:min(100%, 34rem);
    max-width:100%;
    height:auto;
    margin:0 auto;
}
.qc-hero-kicker.qc-logo-wrap{
    color:transparent;
    font-size:0;
    letter-spacing:0;
    line-height:0;
}
.qc-hero-copy .qc-sokomade-logo{
    width:min(100%, 32rem);
}
.qc-philosophy-tagline.qc-logo-wrap{
    margin-top:3.5rem;
    font-size:0;
    line-height:0;
    letter-spacing:0;
}
.qc-philosophy-tagline .qc-sokomade-logo{
    width:min(100%, 34rem);
}

@media (max-width:820px){
    .qc-hero-copy .qc-sokomade-logo{
        width:min(88vw, 30rem);
    }
    .qc-philosophy-tagline .qc-sokomade-logo{
        width:min(88vw, 30rem);
    }
}

@media (max-width:480px){
    .qc-hero-copy .qc-sokomade-logo{
        width:min(84vw, 24rem);
    }
    .qc-philosophy-tagline .qc-sokomade-logo{
        width:min(84vw, 24rem);
    }
}