@charset "UTF-8";
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
}

/*閉鎖*/
.main_visual{
    position: relative;
}
.end_box_o{
    position: relative;
    max-width: none!important;
}

.end_box_o img{
/*    max-width: 1080px!important;*/
}

.end_box {
    background: rgba(0,119,73,0.9);
    text-align: center;
    font-weight: bold;
    color: #fff;
/*    padding: 5% 0;*/
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.end_box p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 100%;
    font-size: 200%;
}

@media screen and (max-width:767px){
    .end_box p{
        font-size: 110%;
        padding: 0 0.5em;
    }
}


/* common */
#cp_main {
	font-family: "Noto Sans JP", sans-serif;
	margin-top: 70px;
}
#cp_main h1 {
	font-size: 150%;
}
#cp_main h2 {
	font-size: 130%;
}
.tl{
    text-align: left;
    display: inline-block;
    margin: 20px auto 30px auto;
    line-height: 1.5!important;
}

.tl span{
    border-bottom: 1px solid #fff;
    display: block;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

#join_top .btn-primary{
    background: #fff!important;
    color: #007749;
}

#join_bottom .btn-primary{
    background: #007749!important;
    color: #fff;
}

#entry .btn-primary{
    background: #007749!important;
    color: #fff;
}

#cp_main #join_top,
#cp_main #share,
#cp_main #target{
/*	background-color: #007749!important;*/
    color: #fff!important;
}

#join_top .text-muted{
    color: #fff!important;
    font-weight: bold;
    
    font-size: 110%;
}

#note .text-muted,
#note h3{
/*    color: #000!important;*/
}
#note h3{
/*    border-color: #007749!important;*/
}

#present{
    background-color: #fff;
    color: #007749!important;
}

#entry,
#join_bottom{
    background-color: #fff;
}

.text-danger{
    color: #fff;
}

#entry .text-danger{
    color: #fff;
}

#entry .receipt-image{
    color: #000;
}

.receipt-ng .text-danger{
/*    color: #fff!important;*/
}

.bg_color{
    background: linear-gradient(131deg, #07BA66 21.78%, #007749 49.16%, #012A1A 100%);
    color: #fff;
}

/* 【仮KV】正式KV画像確定までのアタリ。targetと同じ緑グラデ＋テキストのみ */
#cp_main .kv_temp{
    background: linear-gradient(131deg, #07BA66 21.78%, #007749 49.16%, #012A1A 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4.5rem 1.2rem;
    min-height: 380px;
    line-height: 1.35;
}
#cp_main .kv_temp p{
    color: #fff;
    letter-spacing: .04em;
}
#cp_main .kv_brand{
    font-size: 135%;
    font-weight: bold;
    margin-bottom: .5em !important;
}
#cp_main .kv_title{
    font-size: 260%;
    font-weight: 900;
    letter-spacing: .02em;
    margin-bottom: .25em !important;
}
#cp_main .kv_sub{
    font-size: 160%;
    font-weight: bold;
    margin-bottom: 1em !important;
}
#cp_main .kv_line{
    font-size: 120%;
    font-weight: bold;
    margin-bottom: .3em !important;
}
#cp_main .kv_camp{
    font-size: 210%;
    font-weight: 900;
}
@media screen and (max-width:767px){
    #cp_main .kv_temp{
        padding: 2.8rem 1rem;
        min-height: 280px;
    }
    #cp_main .kv_brand{ font-size: 110%; }
    #cp_main .kv_title{ font-size: 165%; }
    #cp_main .kv_sub{ font-size: 118%; }
    #cp_main .kv_line{ font-size: 105%; }
    #cp_main .kv_camp{ font-size: 150%; }
}

#entry .list-group-item{
    background-color: #fff !important;
    color: #000;
    
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
}

#entry .list-group{
    display: grid!important;
    grid-template-columns: repeat(5, 1fr);
}

#entry .list-group-item .image.text-center {
    align-content: center;
}

#entry .list-group-item .image.text-center .btn:not(:disabled):not(.disabled) {
    cursor: auto;
}

#entry .step_box li .image img{
    width: 90%;
    max-width: 200px;
}

/* STEP1〜6を1列横並びに（PC・タブレット）。6カラム均等・折り返しなし */
@media screen and (min-width:768px){
    #cp_main #entry .step_box{
        display: flex!important;
        flex-direction: row!important;
        flex-wrap: nowrap!important;
        align-items: stretch;
    }
    #cp_main #entry .step_box > li{
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
}

/* STEP見出し（バッジ）：高さ固定＋下揃えで、本文(<p>)の開始位置を全STEPで揃える
   （/common/css の後読み上書きに負けないよう !important で固定） */
#cp_main #entry .step_box li h4{
    height: 72px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    margin-bottom: 1rem !important;
}
/* STEP見出し画像は4x素材のため表示サイズ(高さ)を指定して統一（旧画像と同程度の大きさ） */
#cp_main #entry .step_box li h4 img{
    height: 60px !important;
    width: auto !important;
    max-height: 60px !important;
}
/* 説明文(<p>)の上マージンを消し、開始位置を厳密に揃える */
#cp_main #entry .step_box li > p:first-of-type{
    margin-top: 0 !important;
}

/* STEP3・4のスマホ単体アイコン：他STEP(レシート＋スマホ構図)と見た目の大きさを揃えるため小さめに。
   1.cssの@media(min-width:992px){ ... .image img{max-height:100%} }に勝つよう詳細度を確保(.step_box付与) */
#cp_main #entry .step_box .step3 .image img,
#cp_main #entry .step_box .step4 .image img{
    width: auto;
    max-width: 140px;
    max-height: 140px;
}

#entry .list-group-item.step2{
    border-right: none;
    /* border-left は残す（STEP1とSTEP2の間の境界線を表示するため） */
}

/* step3は隣接(step4)との二重線防止で右borderなし。step4は右端のため右borderを残す */
#entry .list-group-item.step3{
    border-right: none;
}

@media screen and (max-width:767px){
    #entry .list-group-item{
        display: block;
    }

    #entry .list-group{
        display: block!important;
    }
    #entry .list-group-item.step2{
        border-right: 1px solid rgba(0,0,0,.125);
        border-left: 1px solid rgba(0,0,0,.125);
    }

    #entry .list-group-item.step3,
    #entry .list-group-item.step4{
        border-right: 1px solid rgba(0,0,0,.125);
    }

    /* SP時は縦積みのため見出し高さ固定を解除し、バッジを少し大きく */
    #cp_main #entry .step_box li h4{
        height: auto !important;
        display: block !important;
    }
    #cp_main #entry .step_box li h4 img{
        height: 92px !important;
        max-height: 92px !important;
    }
}


#cp_main nav a img {
/*    filter: brightness(0) saturate(100%) invert(100%) sepia(13%) saturate(246%) hue-rotate(84deg) brightness(111%) contrast(100%);*/
}

#present .container,
#target .container,
#target2 .container{
    max-width: 1500px;
}

#cp_main #present .present_title {
    font-size: 200%!important;
    font-weight: bold;
    margin-bottom: 0.5em;
}
/* 【スライド反映】プレゼント注記：タイトルより小さめ・太さ普通 */
#cp_main #present .present_gift {
    font-size: 120%;
    font-weight: normal;
}

.present_title br.sp,
.target_title br.sp,
.pickup_text br.sp,
#cp_main #target .camp_lead br.sp,
#cp_main #target2 .camp_lead br.sp{
    display: none;
}

/* SP時のみ nav「キャンペーン詳細」を「キャンペーン／詳細」の2行に */
#cp_main nav a br.sp{ display: none; }
@media screen and (max-width:767px){
    #cp_main nav a br.sp{ display: inline; }
}

#cp_main #present .present_koukan {
    line-height: 1.8!important;
    font-size: 100%!important;
}
#cp_main #present .present_koukan span {
    font-size: 110%;
    font-weight: bold;
}

.present_flex{
/*
    display: flex;
    justify-content: space-between;
*/
    display: block;
}

.present_flex ul:first-child{
/*    width: 78%;*/
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.present_flex ul:last-child{
/*    width: 20%;*/
    width: 100%;
    background: #fff;
    padding: 1.5em;
    color: #000;
    border: 1px solid #000;
    margin-top: 20px;
}

.present_flex li{
    list-style: none;
}

.present_min {
    font-size: 80%;
    color: #000;
    border-top: 1px solid #ccc;
    padding-top: 20px;
    margin-top: 20px;
}

.pre_img,
.pre_img_1357{
    width: 100%;
    max-width: 428px;
    display: block;
    margin: 0 auto;
}

.pre_img_1357{
    display: none;
}

@media screen and (max-width:767px){
    .pre_img_1357{
        display: inherit!important;
    }
    .pre_img{
        display: none;
    }
}

#cp_main nav a img,
#cp_main #entry .list-group-item .image img,
#cp_main #entry .receipt-image p img{
    filter: brightness(0) saturate(100%) invert(30%) sepia(83%) saturate(992%) hue-rotate(123deg) brightness(89%) contrast(101%);
}

#cp_main #entry .list-group-item h4 img{
    filter: brightness(0) saturate(100%)
}

#entry .receipt-image .text-danger{
    color: #007749!important;
}



.disc,
.asterisk{
    display: block;
    text-indent: -1em;
    margin-left: 1em;
}

.disc::before{
    content: '・'
}
.asterisk::before{
    content: '※'
}

.target_box{
    text-align: center;
}

.target_title{
    font-size: 100%;
}

.target_title strong{
    font-size: 200%;
    display: block;
    word-break: break-word;
}

.pickup{
    background: #fff;
    text-align: center;
    color: #007749;
    padding: 20px 0;
    margin-top: 40px;
}

.pickup_title{
    font-size: 230%!important;
    font-weight: bold;
    word-break: break-all;
    color: #007749!important;
    margin: 0;
}

.pickup_text{
    font-size: 120%!important;
    color: #000!important;
}

.pickup_text span{
    font-size: 150%;
    font-weight: bold;
}

.pickup ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 30px;
}

.pickup li{
    list-style: none;
/*    padding: 0 10px;*/
    width: 23%;
}

.pickup li:first-child {
/*    width: 28.7%;*/
}

.pickup li img{
    width: 100%;
}

.pickup li span:last-child{
    background: #007749;
    display: block;
    width: 100%;
    margin: 20px auto auto auto;
    color: #fff;
}

.pickup li span:last-child a{
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: block;
    width: 100%;
    height: 100%;
}

.pickup small {
    color: #000;
    text-align: right;
    width: 100%;
    display: inline-block;
    padding-right: 20px;
}

.main_visual{
/*    max-width: 1080px;*/
    margin: 0 auto;
}

#join_bottom .red_box{
    border: 3px solid red;
    color: red;
    padding: 20px;
    font-size: 98%;
    font-weight: bold;
    margin-bottom: 30px;
}

#join_bottom .red_box p,
#join_top .early_box p{
    padding: 0;
    margin: 0;
}


#join_top .early_box{
    background: red;
    color: #fff;
    text-align: center;
/*    font-weight: bold;*/
    font-size: 120%;
    padding: 1em;
    margin-bottom: 50px;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus,
.btn-primary.focus, .btn-primary:focus {
	box-shadow: 0 0 0 0.2rem rgba(0, 119, 73, 0.5);
}

#present .item,
#entry .detail,
#entry .receipt-title,
.btn-primary {
	border-color: #007749 !important;
}

/* 対象製品：join_topと同じ背景色(bg_color)＋キャンペーンタイトル＋白ボックス */
/* 【スライド反映】背景セクションは元の矩形に戻す。右上の斜めカットはインナーの白ボックス側へ移動 */
#cp_main #target .camp_lead{
    font-size: 145%;
    font-weight: bold;
    line-height: 1.5;
    color: #333; /* 白枠内。下の応募期間と同じ#333に統一 */
}
#cp_main #target .camp_bar{
    font-weight: normal;
    margin: 0 .2em;
}
#cp_main #target .camp_period{
    font-size: 120%;
    font-weight: bold;
    color: #333; /* 白枠内に移動したためダークに */
}
#cp_main #target .camp_box{
    background: #fff;
    color: #000;
    border-radius: 8px;
    max-width: 1400px; /* 【指定】スライドのように横幅を拡大 */
    padding: 1.5rem 2rem;
}
#cp_main #target .camp_head{
    font-size: 115%;
    display: flex;
    align-items: flex-start;
}
#cp_main #target .camp_head_label{
    flex: 0 0 auto;
    white-space: nowrap;
}
#cp_main #target .camp_head_body{
    flex: 1 1 auto;
    min-width: 0;
}
#cp_main #target .camp_head strong{
    font-weight: bold;
    color: #000;
}
#cp_main #target .camp_red{
    color: #DE1E1E;
    font-weight: bold;
}
#target .camp_photos{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
#target .camp_lineup{
    height: auto;
    width: 100%;
    max-width: 720px;
    border-radius: 8px;
}

/* 【スライド2反映】対象製品カードグリッド（特設LP同様の1製品ずつ表示） */
#cp_main .prod_grid{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
}
#cp_main .prod_card{
    width: calc((100% - 48px) / 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#cp_main .prod_thumb{
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    border: 2px solid #07BE66;
    border-radius: 6px;
    padding: 8px;
    line-height: 0;
}
#cp_main .prod_thumb img{
    width: 100%;
    height: 120px;
    object-fit: contain;
    border-radius: 3px;
}
#cp_main .prod_zoom{
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #007749 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cline x1='15' y1='15' x2='21' y2='21'/%3E%3C/svg%3E") center/15px no-repeat;
    transition: transform .15s ease;
}
/* 【スライド1反映】製品画像は虫眼鏡タップで拡大表示（第1弾のみ。第2弾は拡大不要） */
#target .prod_thumb{ cursor: zoom-in; }
#target .prod_thumb:hover .prod_zoom{ transform: scale(1.12); }
.lb_overlay{
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,.82);
}
.lb_overlay.is-open{ display: flex; }
.lb_overlay .lb_img{
    max-width: 92%;
    max-height: 88%;
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.lb_overlay .lb_close{
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: #111;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.lb_overlay .lb_close:hover{ background:#fff; }
#cp_main .prod_name{
    color: #000;
    font-size: 82%;
    line-height: 1.45;
    margin: 10px 0 8px;
}
#cp_main .prod_name strong{
    display: inline-block;
    font-size: 118%;
    font-weight: bold;
    margin-top: 2px;
}
#cp_main .prod_note{
    display: block;
    color: #DE1E1E;
    font-weight: bold;
    font-size: 92%;
    margin-top: 2px;
}
#cp_main .prod_note.prod_note_plain{
    color: #333;
    font-weight: normal;
}
/* 対象製品の注記（製品詳細ページに関する案内）：赤文字の左端に揃える */
#cp_main .prod_grid_note{
    font-size: 0.85rem;
    color: #555;
}
#cp_main .prod_btn{
    display: block;
    width: 100%;
    margin-top: auto;
    padding: .45rem .5rem;
    background: #007749;
    color: #fff;
    font-size: 84%;
    font-weight: bold;
    border-radius: 4px;
    line-height: 1.3;
}
#cp_main .prod_btn:hover{
    background: #00623c;
    color: #fff;
    text-decoration: none;
}
@media screen and (max-width:767px){
    /* 【スライド反映】SP時は製品画像を1列（1カラム）で縦長に並べる */
    #cp_main .prod_grid{
        gap: 14px;
    }
    #cp_main .prod_card{
        width: 100%;
    }
    #cp_main .prod_thumb img{
        height: 200px;
    }
    #cp_main .prod_name{
        font-size: 90%;
    }
}

#target .camp_wip{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}
#target .camp_wip_badge{
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffe100;
    color: #111;
    font-weight: 900;
    font-style: italic;
    border-radius: 6px;
    transform: rotate(-8deg);
}
#target .camp_wip_label{
    font-size: 11px;
    color: #000;
    margin-top: 10px;
}
#cp_main #target .camp_list{
    list-style: none;
    padding-left: 0;
    line-height: 1.9;
    color: #000;
    margin-bottom: 0;
}
/* 「ハイコーキ製品はこちら」リンク：本文と同色(黒)・中央揃え・下線（第1弾/第2弾共通） */
#cp_main #target .camp_link,
#cp_main #target2 .camp_link{
    text-align: center;
}
#cp_main #target .camp_link a,
#cp_main #target2 .camp_link a{
    color: #000;
    text-decoration: underline;
}
#cp_main #target .camp_link a:hover,
#cp_main #target2 .camp_link a:hover{
    color: #000;
    text-decoration: underline;
}
/* 応募条件（白枠内：白背景にダーク文字）。ボタンは白枠外（緑背景） */
#cp_main #target .camp_entry{
    color: #000;
    line-height: 1.9;
}
#cp_main #target .camp_entry strong{
    font-weight: bold;
    color: #000;
}
#cp_main #target .camp_actions{
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
#cp_main #target .camp_actions .btn{
    min-width: 320px;
    font-size: 118%;
    font-weight: bold;
    border-radius: 4px;
    padding: .85rem 2rem;
    background: #0f8a52;
    color: #fff;
    border: 1px solid #57c98c;
}
#cp_main #target .camp_actions .btn:hover{
    background: #12a061;
    color: #fff;
}

/* 2ボタンの役割を明確化：詳細＝副（ゴースト）／応募＝主（塗り・大きめ・強調） */
/* 詳細を確認する：セカンダリ（透明背景＋白フチ） */
#cp_main #target .camp_actions .camp_btn_detail{
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.85);
}
#cp_main #target .camp_actions .camp_btn_detail:hover{
    background: rgba(255,255,255,.15);
    color: #fff;
    border-color: #fff;
    transform: translateY(-1px);
}
#cp_main #target .camp_actions .camp_btn_detail::after{
    content: "\00A0\203A";
    font-weight: bold;
}
/* 応募する：プライマリ（ガイドライン準拠：ネオングリーン #00FF00 ＋ スミ文字 #000。2行テキストのため縦幅を拡大） */
#cp_main #target .camp_actions .camp_btn_entry{
    background: #00FF00;
    color: #000;
    border: 2px solid #00FF00;
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
    line-height: 1.45;
}
#cp_main #target .camp_actions .camp_btn_entry:hover{
    background: #00e600;
    color: #000;
    border-color: #00e600;
    transform: translateY(-1px);
}
#cp_main #target .camp_actions .camp_btn_entry::after{
    content: "\00A0\203A";
    font-weight: bold;
}
@media screen and (max-width:767px){
    #cp_main #target .camp_lead{
        font-size: 120%;
    }
    #cp_main #target .camp_period{
        font-size: 105%;
    }
    #cp_main #target .camp_box{
        padding: 1.2rem 1.2rem;
    }
    #target .camp_lineup{
        height: auto;
        width: 100%;
        max-width: 100%;
    }
    #cp_main #target .camp_actions .btn{
        min-width: 0;
        width: 100%;
    }
}

/* 第2弾・第3弾：単色グレーバック。【スライド反映】背景は元の矩形。右上の斜めカットはインナーの白ボックス側へ移動 */
#cp_main #target2,
#cp_main #target3{
    background: #8b9095!important;
    color: #fff!important;
    margin-top: 3rem;
}
@media screen and (min-width:768px){
    #cp_main #target2,
    #cp_main #target3{
        margin-top: 4.5rem;
    }
}
#cp_main #target2 .coming_dan,
#cp_main #target3 .coming_dan{
    font-size: 145%;
    font-weight: bold;
    line-height: 1.5;
    color: #fff;
    margin: 0;
}
#cp_main #target2 .coming_title,
#cp_main #target3 .coming_title{
    font-size: 300%;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.2);
    margin: 0;
}
@media screen and (max-width:767px){
    #cp_main #target2 .coming_dan,
    #cp_main #target3 .coming_dan{
        font-size: 120%;
    }
    #cp_main #target2 .coming_title,
    #cp_main #target3 .coming_title{
        font-size: 210%;
    }
}

/* 第2弾：製品を掲載しCOMING SOONマスクを重ねる（開始時は .camp_mask を除去して公開） */
#cp_main #target2 .camp_lead{
    font-size: 145%;
    font-weight: bold;
    line-height: 1.5;
    color: #333; /* 白枠内。下の応募期間と同じ#333に統一 */
}
#cp_main #target2 .camp_bar{
    font-weight: normal;
    margin: 0 .2em;
}
#cp_main #target2 .camp_masked{
    position: relative;
    max-width: 1400px; /* 【指定】スライドのように横幅を拡大 */
}
#cp_main #target2 .camp_box{
    background: #fff;
    color: #000;
    border-radius: 8px;
    padding: 1.5rem 2rem;
}
#cp_main #target2 .camp_head{
    font-size: 115%;
}
#cp_main #target2 .camp_head strong{
    font-weight: bold;
    color: #000;
}
#cp_main #target2 .camp_red{
    color: #DE1E1E;
    font-weight: bold;
}
#target2 .camp_photos{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
#target2 .camp_lineup{
    height: auto;
    width: 100%;
    max-width: 720px;
    border-radius: 8px;
}
#cp_main #target2 .camp_list{
    list-style: none;
    padding-left: 0;
    line-height: 1.9;
    color: #000;
    margin-bottom: 0;
}
#cp_main #target2 .camp_period{
    font-size: 120%;
    font-weight: bold;
    color: #333; /* 白枠内に移動したためダークに */
}
/* 【スライド反映】製品は隠さず表示。COMING SOONは覆わない見出しとして上部に配置 */
#cp_main #target2 .camp_coming{
    margin: 0 auto;
}
#cp_main #target2 .camp_coming .coming_title{
    display: inline-block;
    color: #8b9095; /* 白枠内に移動したためグレーに（背景グレーと同系） */
    text-shadow: none;
}
@media screen and (max-width:767px){
    #cp_main #target2 .camp_lead{
        font-size: 120%;
    }
    #cp_main #target2 .camp_box{
        padding: 1.2rem 1.2rem;
    }
    #target2 .camp_lineup{
        height: auto;
        width: 100%;
        max-width: 100%;
    }
}

/* 【スライド反映】インナー白ボックス：白背景＋ネオングリーン(#00FF00)の縁取り＋右上を斜めカット（台形形状） */
/* 背景セクションは矩形のまま、白ボックスの右上のみノッチ状にカット。緑=::before、白=::after の2層で縁取りを表現 */
#cp_main #target .camp_box,
#cp_main #target2 .camp_box{
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    isolation: isolate;
    /* 【ブランドガイドラインp58 FRAME BUILD-UP準拠】ノッチ幅=横幅の1/5(20%)、角度=水平から35°(縦=横×tan35°≒0.7002) */
    --camp-notch-x: 260px; /* 白枠max-width 1300px の1/5 */
    --camp-notch-y: calc(var(--camp-notch-x) * .7002);
    --camp-bd: 5px;
}
#cp_main #target .camp_box::before,
#cp_main #target .camp_box::after,
#cp_main #target2 .camp_box::before,
#cp_main #target2 .camp_box::after{
    content: "";
    position: absolute;
    z-index: -1;
    clip-path: polygon(0 0, calc(100% - var(--camp-notch-x)) 0, 100% var(--camp-notch-y), 100% 100%, 0 100%);
}
/* 緑フレーム層（ボックスより縁取り分だけ外へ張り出す） */
#cp_main #target .camp_box::before,
#cp_main #target2 .camp_box::before{
    inset: calc(var(--camp-bd) * -1);
    background: #00FF00;
}
/* 白地層 */
#cp_main #target .camp_box::after,
#cp_main #target2 .camp_box::after{
    inset: 0;
    background: #fff;
}
@media screen and (max-width:767px){
    #cp_main #target .camp_box,
    #cp_main #target2 .camp_box{
        --camp-notch-x: 95px; /* SP:KV枠に合わせ約26%の深めノッチ。角度は縦=横×tan35°で35°維持 */
        --camp-bd: 4px;
        /* 右上ノッチ（斜め）とリード文の重なりを回避：ノッチ縦寸法＋余白ぶん上部に確保 */
        padding-top: calc(var(--camp-notch-y) + 1rem);
    }
}

/* 賞品：第1弾/第2弾で分けず1ブロック表示（タイトル中央→画像2枚＋注釈を横並び） */
#cp_main #present .present_box{
    color: #000;
}
#present .present_lower{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}
#present .present_photos{
    display: flex;
    gap: 24px;
    justify-content: center;
}
#present .present_photos .mat_fig{
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#present .present_photos .mat_img{
    height: 260px;
    width: auto;
    max-width: 100%;
    display: block;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
#present .present_photos .mat_cap{
    margin-top: 10px;
    font-size: 92%;
    font-weight: bold;
    color: #000;
}
#present .present_note{
    text-align: left;
    font-size: 90%;
    line-height: 1.8;
}
@media screen and (max-width:767px){
    #present .present_lower{
        gap: 20px;
    }
    #present .present_photos{
        gap: 12px;
        width: 100%;
    }
    #present .present_photos .mat_fig{
        flex: 0 1 47%;
        min-width: 0;
    }
    #present .present_photos .mat_img{
        height: auto;
        width: 100%;
    }
    #present .present_note{
        text-align: center;
    }
    #present .present_note br{
        display: none;
    }
}

/* 製造番号写真：OK/NG例の画像を同じ向き・同じサイズ(4:3)の枠に揃える */
#cp_main #entry .serial-photo{
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: #f2f2f2;
}
#cp_main #entry .serial-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* OK/NGの説明文は同じサイズ・太さに統一 */
#cp_main #entry .serial-note{
    font-size: 100%;
    font-weight: bold;
}
/* NGのテキストは中央寄せ（箇条書きマーカーは除去して綺麗に中央配置） */
#cp_main #entry .receipt-ng .serial-note{
    list-style: none;
    padding-left: 0;
    text-align: center;
}
/* OK例のキャプションは赤文字（スライド7準拠） */
#cp_main #entry .serial-ok-note{
    color: #DE1E1E;
}
/* 【調整】マゼンタの例は下側（製造番号付近）を表示する */
#cp_main #entry .serial-photo img.serial-mag{
    object-position: center 78%;
}
/* 【スライド8反映】OK例の色名キャプション（チャコールグレー／マゼンタ） */
#cp_main #entry .serial-cap{
    font-weight: bold;
    color: #000;
}
/* 「[赤枠]部分が製造番号です。」凡例（写真下） */
#cp_main #entry .serial-legend{
    font-weight: bold;
    color: #000;
}
#cp_main #entry .serial-legend .serial-key{
    display: inline-block;
    width: 30px;
    height: 18px;
    border: 2px solid #DE1E1E;
    border-radius: 2px;
    vertical-align: -3px;
    margin-right: .5em;
}

/* よくある質問：白背景ボックス内の文字が白のままで見えない不具合を修正 */
#faq .faq_item{
    color: #333;
}
#faq .faq_item summary{
    color: #007749;
    list-style-position: inside;
}
#faq .faq_item p{
    color: #333 !important;
}

#entry h2,
#entry h3,
#entry .receipt-ok h4,
#entry .receipt-ng h4,
#note h3,
#join_bottom h2,
#contact h2,
#faq h2,
.target_title h2,
#share h2:after,
#contact h2:after {
	color: #007749;
}

/* 【スライド6反映】公式LINE ともだち追加・ID連携方法（枠内2カラム＋中央の縦線に上下余白） */
#cp_main #entry .line_guide{
    max-width: 1000px;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 2rem 2.5rem;
}
#cp_main #entry .line_guide_row{
    position: relative;
    display: flex;
    align-items: stretch;
}
#cp_main #entry .line_guide_row > .line_col{
    flex: 1 1 0;
    min-width: 0;
    padding: 0 2rem;
    text-align: center;
}
/* 中央の縦線：上下に余白を空ける（列の高さいっぱいに引かない） */
#cp_main #entry .line_guide_row::before{
    content: "";
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 50%;
    width: 1px;
    background: #2b4b63;
    transform: translateX(-50%);
}
#cp_main #entry .line_guide .line_step{
    height: 60px;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#cp_main #entry .line_guide .line_step img{
    height: 46px;
    width: auto;
    filter: brightness(0);
}
#cp_main #entry .line_guide .line_txt{
    margin-bottom: 1.2rem;
}
#cp_main #entry .line_guide .line_qr{
    width: 160px;
    max-width: 70%;
    height: auto;
}
#cp_main #entry .line_guide .line_id{
    text-align: center;
    font-weight: bold;
    font-size: 118%;
}
/* ID連携認証：左に認証画面（スマホ枠＋赤マル）、右に説明（添付デザイン準拠） */
#cp_main #entry .line_guide .line_two{
    display: flex;
    align-items: center;
    gap: 2.5rem;
}
#cp_main #entry .line_phone_wrap{
    flex: 0 0 auto;
}
/* スマホ枠（緑・角丸／上部スピーカー・下部ホームボタン） */
#cp_main #entry .line_phone{
    position: relative;
    width: 210px;
    padding: 34px 12px;
    background: #fff;
    border: 4px solid #4CAF50;
    border-radius: 30px;
}
#cp_main #entry .line_phone::before{
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 5px;
    border-radius: 3px;
    background: #cfd8dc;
}
#cp_main #entry .line_phone::after{
    content: "";
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #cfd8dc;
}
#cp_main #entry .phone_screen{
    position: relative;
    line-height: 0;
}
#cp_main #entry .phone_screen > img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}
/* 赤い楕円マーク（「友だち追加する」トグル／「許可する」ボタン） */
#cp_main #entry .phone_mark{
    position: absolute;
    border: 3px solid #E60012;
    border-radius: 50%;
    pointer-events: none;
}
#cp_main #entry .phone_mark--toggle{
    left: 78%;
    top: 42%;
    width: 22%;
    height: 6.5%;
}
#cp_main #entry .phone_mark--allow{
    left: 4%;
    top: 82%;
    width: 92%;
    height: 8%;
}
/* 右側説明 */
#cp_main #entry .line_desc{
    flex: 1 1 auto;
    text-align: left;
}
#cp_main #entry .line_desc_main{
    font-size: 105%;
    line-height: 1.9;
}
#cp_main #entry .line_desc .line_hl{
    color: #007749;
    font-weight: bold;
}
#cp_main #entry .line_desc_note{
    color: #777;
    font-size: 88%;
    line-height: 1.8;
}
/* STEP2「詳細確認中」プレースホルダー */
#cp_main #entry .line_guide .line_wip{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    margin-top: .5rem;
    background: #2b4b63;
    color: #eef2f5;
    font-size: 115%;
    letter-spacing: .1em;
    border-radius: 2px;
}
/* 枠内下部の注記 */
#cp_main #entry .line_guide .line_note{
    margin-top: 2rem;
    text-align: center;
    font-size: 92%;
}
/* 公式LINE ともだち追加ボタン（LINEブランドカラー） */
#cp_main #entry .line_btn{
    display: inline-block;
    background: #06C755;
    color: #fff;
    font-weight: bold;
    padding: .55rem 1.4rem;
    border-radius: 6px;
    margin-top: .2rem;
}
#cp_main #entry .line_btn:hover{
    background: #05b34c;
    color: #fff;
    text-decoration: none;
}
@media screen and (max-width:767px){
    #cp_main #entry .line_guide{
        padding: 1.5rem 1.2rem;
    }
    #cp_main #entry .line_guide_row{
        flex-direction: column;
    }
    #cp_main #entry .line_guide_row > .line_col{
        padding: 0;
    }
    /* モバイルは縦積み：中央縦線を消し、列間に上下余白付きの横線を引く */
    #cp_main #entry .line_guide_row::before{
        display: none;
    }
    #cp_main #entry .line_guide_row > .line_col:first-child{
        border-bottom: 1px solid #2b4b63;
        padding-bottom: 1.8rem;
        margin-bottom: 1.8rem;
    }
    #cp_main #entry .line_guide .line_wip{
        min-height: 140px;
    }
    /* ID連携認証：SPは縦積み・中央寄せ */
    #cp_main #entry .line_guide .line_two{
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    #cp_main #entry .line_phone{
        margin: 0 auto;
    }
    #cp_main #entry .line_desc{
        text-align: left;
    }
}

/* 【スライド9反映】お問い合わせ先：囲わず、左右いっぱいに伸ばした緑のグラデ帯にする */
#cp_main #contact{
    background: linear-gradient(131deg, #07BA66 21.78%, #007749 49.16%, #012A1A 100%);
    color: #fff;
}
#cp_main #contact .contact_box{
    max-width: 900px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #fff !important;
    padding: 0;
    line-height: 1.9;
}
#cp_main #contact .contact_box p{
    color: #fff;
}
#cp_main #contact .contact_name{
    font-size: 135%;
    font-weight: bold;
    letter-spacing: .04em;
}
#cp_main #contact .contact_tel{
    font-size: 115%;
    font-weight: bold;
    letter-spacing: .1em;
}
#cp_main #contact .contact_mail{
    font-size: 112%;
    font-weight: bold;
    word-break: break-all;
}
#cp_main #contact .contact_mail a{
    color: #fff;
    text-decoration: underline;
}
#cp_main #contact .contact_note{
    font-size: 88%;
    line-height: 1.7;
}
@media screen and (max-width:767px){
    #cp_main #contact .contact_box{
        padding: 0;
    }
    #cp_main #contact .contact_name{
        font-size: 118%;
    }
}

/* よくある質問：背景白＋白背景に合う配色 */
#faq{
    background-color: #fff;
}
#faq .faq_item{
    background: #f4f8f6 !important;
    border: 1px solid #d7e4dd;
    color: #000;
}
#faq .faq_item summary{
    color: #007749;
}
#faq .faq_item p{
    color: #333;
}
#faq .faq_cat{
    font-size: 118%;
    color: #007749;
}

@media screen and (max-width:767px){
    #cp_main #present .present_title {
        font-size: 170% !important;
        text-align: center;
    }
    
    .present_title br.sp,
    .target_title br.sp,
    .pickup_text br.sp,
    #cp_main #target .camp_lead br.sp,
    #cp_main #target2 .camp_lead br.sp{
        display: inherit;
    }
    
    .pickup_text span{
        font-size: 125%;
    }
    
    .present_flex{
        display: block;
    }

    .present_flex ul:first-child{
        max-width: 500px;
        width: 100%;
    }

    .present_flex ul:last-child{
        max-width: 500px;
        width: 100%;
        margin: 30px auto auto auto;
    }

    .present_min {
        width: 95%;
        margin: 20px auto auto auto;
    }
    
    .pickup ul{
        padding: 0 20px;
    }
    
    .pickup li{
        width: 48%;
        margin-bottom: 40px;
    }

    .pickup li:first-child {
/*        width: 100%;*/
    }
    
    .pickup li:last-child {
         margin-bottom: 0;
    }
    
    .target_title strong{
        font-size: 165%;
    }
}

@media screen and (max-width:575px){
    #cp_main #present .title {
        font-size: 140% !important;
        margin-top: 20px;
    }
    #cp_main #present .text{
        font-size: 110%!important;
    }
}

/* md and up */
@media (min-width: 768px) {
	#cp_main h1 {
		font-size: 200%;
	}
	#cp_main h2 {
		font-size: 180%!important;
	}
}