/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2019/05/12, 22:39:11
    Author     : th
*/




@media all and ( min-width: 376px ) {

    .coupnlistbox1{
        max-width: 1120px; 
        margin: 0 auto; 
        padding:0 10px;
    }

    .couponsinglerbuttonbox{
        text-align: center;
    }

    .couponlist2asoviewbutton2 {
        width: 400px;
        margin: 0 auto;
        padding: 20px 0 10px 0;
    }

    .couponlisttext1>a{
        color:#c1272d;
        text-decoration: underline;
    }

    #couponlistpctitle1 {
        padding: 30px 0 36px 20px;
    }

    #couponlistpctitle1text1{
        position: relative;
        display: inline-block;
    }
    #couponlistpctitle1{
        text-align: center;
    }

    #couponlist2icon1{
        position: absolute;
        top: 8px;
        left: -290px;
        width: 242px;
    }

    #couponlist2icon2{
        position: absolute;
        top: 8px;
        right: -200px;
        width: 150px;
    }

    .couponlistheaderimage1{
        padding: 10px 0;
        background-image: url(https://www.manyo.co.jp/mm21/wp2/wp-content/themes/machidatheme/image/couponlist/pc/couponlistbg.jpg);
        border-top: 5px solid #d6bfa2;
    }

    .couponlist2box1{
        padding:20px 0;
    }

    .couponlisttext1{
        font-size: 16px;
        text-align: center;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .couponlisttext2{
        font-size: 20px;
        letter-spacing: 1px;
        text-align: center;

    }

    .couponlisttext3{
        font-size: 26px;
        text-align: center;
        letter-spacing: 1px;
        color:#c1272d;
        font-weight: bold;
    }

    .couponlistheaderimage1>img{
        width: 500px;
        margin: 0 auto;
        display: block;
    }


    .couponlistprice2text1{
        color: #bd272d;
        font-size: 26px;
        margin: 0 0 0 3px;
        font-family: Hiragino Kaku Gothic Std;
        font-weight: bold;
    }

    .couponlistprice1 {
        text-align: center;
        font-size: 15px;
        margin: 0 0 8px 0;
    }

    .couponlistprice1-3{
        text-decoration: line-through;
        color:red;
    }
    .couponlistprice1-4{
        color:black;
    }

    .couponlistprice1-2 {
        text-align: center;
        font-size: 15px;
        margin: 0 0 8px 0;
    }

    .couponlist2image{
        overflow: hidden;
    }

    .couponbox2{
        position: relative;
    }

    .couponlist2image1{
        float:left;
        width:55%;
    }
    .couponlist2image2{
        float: left;
        width: 45%;
        background: repeating-linear-gradient(-47deg,#ee8492 0,#ee8492 5px, #f0909c 6px, #f0909c 11px);
        height: 148px;
    }


    .couponlist2singleimage1{
        float:left;
        width:55%;
    }
    .couponlist2singleimage2{
        float: left;
        width: 45%;
        background: repeating-linear-gradient(-47deg,#ee8492 0,#ee8492 5px, #f0909c 6px, #f0909c 11px);
        height: 322px;
    }

    .couponlist2image2inner1{
        padding: 28px 0 0 27px;
    }

    .couponlist2image2text5{
        color:white;
        position: relative;
    }

    .couponlist2singleimage2 .couponlist2image2text5{
        color:white;
        position: relative;
        left:15px;
    }

    .couponlist2image2inner2{
        padding: 29px 0 0 1px;
    }

    .couponlist2image2text6{
        font-size: 36px;
        color:white;
    }



    .couponlist2image2.blue{
        background: repeating-linear-gradient(-47deg,#41459c 0,#41459c 5px, #32349c 6px, #32349c 11px);
    }

    .couponlist2image2text{
        font-family: Hiragino Kaku Gothic Std;
        text-stroke:1px #924747;
        -web-text-stroke:1px #924747;
        font-size:45px;
        line-height: 46px;
        color: #FFFFFF;
        letter-spacing: 1px;
        text-shadow: 4px 5px 1px #924747;
    }

    .couponlist2singleimage2 {
        text-align: center;
    }

    .couponlist2singleimage2 .couponlist2image2text4{
        font-size: 52px;
        position: relative;
        left:6px;
    }

    .couponlist2singleimage2 .couponlist2image2text6{
        font-size: 70px;
    }

    .couponlist2singleimage2 .couponlist2image2text2{
        font-size: 44px;
        left: -9px;
    }

    .couponlist2singleimage2 .couponlist2image2text{
        font-size: 83px;
    }

    .couponlist2singleimage2 .couponlist2image2inner2{
        padding: 100px 0 0 5px;
    }

    .couponlist2singleimage2 .couponlist2image2inner1 {
        padding: 100px 0 0 0;
    }

    .couponlist2singleimage2 .couponlist2image2text3{
        font-size: 72px;
        line-height: 100px;
        padding:0 28px 0 0;
    }

    .couponlist2image2.blue .couponlist2image2text{
        text-shadow: 4px 5px 1px #0171b9;
    }


    .couponlist2singleimage2.blue{
        background: repeating-linear-gradient(-47deg,#41459c 0,#41459c 5px, #32349c 6px, #32349c 11px);
    }


    .couponlist2singleimage2.blue .couponlist2image2text{
        text-shadow: 4px 5px 1px #0171b9;
    }

    .couponlist2image2text2{
        font-size: 27px;
        font-family: Hiragino Kaku Gothic Std;
        color: white;
        font-weight: bold;
        position: relative;
        left: -14px;
    }

    .couponlist2image2text3{
        color: #fdfa1e;
        letter-spacing: 2px;
        text-shadow: 4px 5px 1px #924747;
        font-size: 38px;
        font-weight: bold;
    }

    .couponlist2image2text3-1{
        text-align: right;
        display: block;
        padding:0 12px 0 0;
    }

    .couponlist2image2.blue .couponlist2image2text3{
        text-shadow: 4px 5px 1px #0171b9;
    }

    .couponlistlistinner2{
        margin: 40px 0 0 0;
        min-height: 380px;
    }

    .couponlistlistinner2>ul>li {
        float: left;
        width: 33.33%;
        box-sizing: border-box;
        padding: 0 20px 50px;
        margin: 0 0 30px;
        height:442px;
    }

    .couponlistbox2circle{
        position: absolute;
        top: -8px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .couponlistbox2circle>ul{
        text-align: center;
    }

    .couponlistbox2circle>ul>li{
        width:14px;
        height:14px;
        border-radius: 50%;
        background-image: url(https://manyo.co.jp/mm21/wp2/wp-content/themes/machidatheme/image/topinfopcbkimage.jpg);
        display: inline-block;
        margin: 0 3px;
        box-shadow: 1px 2px 1px 1px rgba(171, 171, 171, 0.4) inset;
    }

    .couponlist2price{
        padding: 0 0 10px 0;
    }



    .couponlist2button1box{
        margin:8px 0 0 0;
    }

    .couponlistbox2taglist{
        padding:0 20px;
    }

    .couponlistbox2taglist>ul>li{
        float:left;
        margin:0 0 4px 6px;
    }

    .couponlist2tagbox{
        font-size : 13px;
        color : #4D4D4D;
        background : #e6e6e6;
        border-radius : 2px;
        padding:3px 4px;
    }

    .couponlistbox2bgimage{
        position: absolute;
        bottom: 0;
        right: 30px;
        width: 80px;
    }

    .couponlistbox1{
        background-color: white;
        border-radius: 16px;
        box-shadow: 5px 5px 5px #d0d0d0;
        padding:0 0 10px 0;
    }
    .couponlistbox2{
        background-color: white;
        border-radius: 16px;
        position: relative;
        padding: 24px 0 16px 0;
        box-shadow: 5px 5px 5px #d0d0d0;
    }

    .couponlist2text1{
        font-size: 19px;
        color: #121212;
        text-align: center;
        font-weight: bold;
        line-height: 23px;
        letter-spacing: 1px;
        padding:14px 0 0 0;
    }

    .couponlisticon2{
        position: absolute;
        top: -16px;
        right: -28px;
        width: 66px;
    }

    .couponlist2button1{
        background : -moz-linear-gradient(50% 4.64% -90deg,rgba(237, 28, 36, 1) 0%,rgba(193, 39, 45, 1) 100%);
        background : -webkit-linear-gradient(-90deg, rgba(237, 28, 36, 1) 0%, rgba(193, 39, 45, 1) 100%);
        background : -webkit-gradient(linear,50% 4.64% ,50% 75.62% ,color-stop(0,rgba(237, 28, 36, 1) ),color-stop(1,rgba(193, 39, 45, 1) ));
        background : -o-linear-gradient(-90deg, rgba(237, 28, 36, 1) 0%, rgba(193, 39, 45, 1) 100%);
        background : -ms-linear-gradient(-90deg, rgba(237, 28, 36, 1) 0%, rgba(193, 39, 45, 1) 100%);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ED1C24', endColorstr='#C1272D' ,GradientType=0)";
        background : linear-gradient(180deg, rgba(237, 28, 36, 1) 0%, rgba(193, 39, 45, 1) 100%);
        border-radius : 15px;
        -moz-border-radius : 15px;
        -webkit-border-radius : 15px;
        width:170px;
        margin: 0 auto;
        font-size : 13px;
        color : #FFFFFF;
        font-weight: bold;
        text-align: center;
        padding:4px 0;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ED1C24',endColorstr='#C1272D' , GradientType=0);
    }

    .couponlist2button1.blue{
        background : linear-gradient(180deg, rgb(62, 159, 236) 0%, rgb(7, 29, 140) 100%)
    }

    .couponsinglemainbox1name2 {
        text-align: center;
        font-size: 23px;
        padding: 20px 0;
        font-weight: bold;
    }

    .couponsinglemainbox1text2{
        text-align: center;
        font-size: 23px;
        padding: 12px 0;
        margin:0 0 30px 0;
        background-color: #f4d8c7;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .singlecoupon2imagelist>ul>li{
        float:left;
        width:50%;
        padding:40px 14px 0;
    }
    .singlecoupon2imagelist{
        padding:0 20px;
    }

    .singlecoupon2imagelistoneimage{
        padding:40px 40px 0;
    }

    .couponsinglerbutton1 a,.couponsinglerbutton2 a{
        font-size: 20px;
        text-align: center;
        display: inline-block;
        padding: 8px 20px;
        border-radius: 10px;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 2px;
        background-color: #dd2229;
        color: white;
        width: 300px;
        /* text-align: center; */
    }

    .couponsinglerbutton2{
        margin:10px 0 0 0;
    }

    .couponsinglerbuttonboxtext{
        font-weight: bold;
        margin: 40px 0 8px 0;
        font-size: 19px;
    }

    .couponlist2image2text4{
        color: white;
        font-size: 32px;
        letter-spacing: -6px;
    }

}

@media all and ( max-width: 375px ) {

    .couponlist2asoviewbutton2sp{
        padding:20px 30px 10px;

    }

    .couponlist1footerbutton1{
        padding:30px 0 40px 0;
    }

    .couponlisttext1sp{
        font-size:15px;
        font-weight: bold;
        letter-spacing: 1px;
        padding:0 0 20px 0;
        text-align: center;
    }

    .couponlisttext1sp>a{
        color: #c1272d;
        text-decoration: underline;
        text-align: center;
    }

    .couponlisttext1{
        font-size: 15px;
        font-weight: bold;
        letter-spacing: 1px;
        padding: 0 0 20px 0;
        text-align: center;
    }

    .couponlisttext1>a{
        color: #c1272d;
        text-decoration: underline;
        text-align: center;
    }
    .couponlist2asoviewbutton2{
        font-size:15px;
        font-weight: bold;
        letter-spacing: 1px;
        padding:0 30px 10px;
        text-align: center;
    }


    .couponlisttext1sp>a{
        color: #c1272d;
        text-decoration: underline;
        text-align: center;
    }

    .couponlist2image1{
        float:left;
        height: 143px;
        overflow: hidden;
        width:55%;
    }
    .couponlist2image2{
        float: left;
        width: 45%;
        background: repeating-linear-gradient(-47deg,#ee8492 0,#ee8492 5px, #f0909c 6px, #f0909c 11px);
        height: 143px;
    }

    .couponlist2singleimage2{
        float: left;
        width: 45%;
        background: repeating-linear-gradient(-47deg,#ee8492 0,#ee8492 5px, #f0909c 6px, #f0909c 11px);
        height: 142px;
    }

    .couponlist2singleimage1{
        float:left;
        overflow: hidden;
        width:55%;
        height: 142px;
    }

    .couponlist2singleimage2  .couponlist2image2inner2{
        padding: 24px 0 0 5px;
    }

    .couponlist2singleimage2  .couponlist2image2inner1{
        padding: 30px 0 0 18px;
    }

    .couponlist2image2  .couponlist2image2inner2{
        padding: 31px 0 0 0px;
    }

    .couponlist2image2  .couponlist2image2inner1{
        padding: 30px 0 0 18px;
    }


    .couponlist2image2.blue{
        background: repeating-linear-gradient(-47deg,#41459c 0,#41459c 5px, #32349c 6px, #32349c 11px);
    }

    .couponlist2image2text{
        font-size: 41px;
        line-height: 44px;
        font-weight: 100;
        color: #FFFFFF;
        letter-spacing: 2px;
        text-shadow: 4px 5px 1px #924747;
        font-family: Hiragino Kaku Gothic Std;
        text-stroke:1px #924747;
        -web-text-stroke:1px #924747;
    }

    .couponlist2image2text4{
        color: white;
        font-size: 30px;
        letter-spacing: -6px;
    }

    .couponlist2image2.blue .couponlist2image2text{
        text-shadow: 4px 5px 1px #0171b9;
    }

    .couponlist2image2single.blue .couponlist2image2text{
        text-shadow: 4px 5px 1px #0171b9;
    }

    .couponlist2image2text2{
        font-size: 27px;
        color: white;
        font-weight: bold;
        position: relative;
        left: -14px;
    }

    .couponlist2image2text3{
        color: #fdfa1e;
        letter-spacing: 2px;
        text-shadow: 4px 5px 1px #924747;
        font-size: 40px;
        font-weight: bold;
        text-align: center;
        display: block;
    }

    .couponlist2image2.blue .couponlist2image2text3{
        text-shadow: 4px 5px 1px #0171b9;
    }

    .couponbox2{
        margin: 0 20px 30px;
        position: relative;
    }

    .couponlistbox2bgimage{
        width: 76px;
        position: absolute;
        bottom: 0px;
        right: 22px;
    }

    .couponlist2text1{
        font-size: 18px;
        color: #121212;
        text-align: center;
        font-weight: bold;
        line-height: 23px;
        letter-spacing: 1px;
        padding:20px 10px 0;
    }

    .couponlisticon2{
        position: absolute;
        top: -14px;
        right: -16px;
        width: 62px;
    }

    .couponlistprice2text1{
        color: #bd272d;
        font-size: 28px;
        font-weight: bold;
        margin: 0 0 0 5px;
        font-family: Hiragino Kaku Gothic Std;
    }
    .couponlistprice1-3 {
        text-decoration: line-through;
        color: red;
    }
    .couponlistprice1-4 {
        color: black;
    }

    .couponlistprice1{
        font-size: 14px;
        text-align: center;
        letter-spacing: 2px;
    }
    .couponlistprice1-2{
        font-size: 14px;
        text-align: center;
        letter-spacing: 2px;
    }

    .couponlist2price{
        padding: 2px 0 20px 0;
    }


    .couponlist2button1box{
        margin:4px 0 0 0;
    }

    .couponlist2button1{
        background : -moz-linear-gradient(50% 4.64% -90deg,rgba(237, 28, 36, 1) 0%,rgba(193, 39, 45, 1) 100%);
        background : -webkit-linear-gradient(-90deg, rgba(237, 28, 36, 1) 0%, rgba(193, 39, 45, 1) 100%);
        background : -webkit-gradient(linear,50% 4.64% ,50% 75.62% ,color-stop(0,rgba(237, 28, 36, 1) ),color-stop(1,rgba(193, 39, 45, 1) ));
        background : -o-linear-gradient(-90deg, rgba(237, 28, 36, 1) 0%, rgba(193, 39, 45, 1) 100%);
        background : -ms-linear-gradient(-90deg, rgba(237, 28, 36, 1) 0%, rgba(193, 39, 45, 1) 100%);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ED1C24', endColorstr='#C1272D' ,GradientType=0)";
        background : linear-gradient(180deg, rgba(237, 28, 36, 1) 0%, rgba(193, 39, 45, 1) 100%);
        border-radius : 15px;
        -moz-border-radius : 15px;
        -webkit-border-radius : 15px;
        width:170px;
        margin: 0 auto;
        font-size : 13px;
        color : #FFFFFF;
        font-weight: bold;
        text-align: center;
        padding:4px 0;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ED1C24',endColorstr='#C1272D' , GradientType=0);
    }

    .couponlist2button1.blue{
        background : linear-gradient(180deg, rgb(62, 159, 236) 0%, rgb(7, 29, 140) 100%)
    }

    .couponlistbox2taglist{
        padding:0 20px;
    }

    .couponlistbox2taglist>ul>li{
        float:left;
        margin:0 0 2px 3px;
    }

    .couponlist2tagbox{
        font-size : 12px;
        color : #4D4D4D;
        color : rgb(77, 77, 77);
        background : #EEEEEE;
        border-radius : 2px;
        padding:2px 3px;
    }

    .couponlistbox2circle{
        position: absolute;
        top: -8px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .couponlistbox2circle>ul{
        text-align: center;
    }

    .couponlistbox2circle>ul>li{
        width:10px;
        height:10px;
        border-radius: 50%;
        background-image: url(https://manyo.co.jp/mm21/wp2/wp-content/themes/machidatheme/image/topinfopcbkimage.jpg);
        display: inline-block;
        margin: 0 4px;
        box-shadow: 1px 2px 1px 1px rgba(171, 171, 171, 0.4) inset;
    }

    .couponlistbox1{
        background-color: white;
        border-radius: 16px;
        box-shadow: 5px 5px 5px #d0d0d0;
        padding:0 0 10px 0;
    }
    .couponlistbox2{
        background-color: white;
        border-radius: 16px;
        position: relative;
        padding: 24px 0 16px 0;
        box-shadow: 5px 5px 5px #d0d0d0;
    }

    .couponlist2image2text5{
        color:white;
    }

    .couponlist2image2text6{
        color:white;
        font-size: 31px;
    }

    .couponlist2image2text3-1{
        text-align: right;
        display: block;
        margin: 2px 8px 0 0;
    }

    .couponlist2singleimage2 .couponlist2image2text3.couponlist2image2text3-2{
        padding: 0 0 0 0;
    }


    .singlecoupon2imagelist>ul>li{
        float:left;
        width:50%;
        padding:20px 2px 0;
    }
    .singlecoupon2imagelist{
        padding:0 10px;
    }

    .singlecoupon2imagelistoneimage{
        padding:20px 20px 0;
    }

    .couponsinglemainbox1text2 {
        text-align: center;
        font-size: 16px;
        padding: 12px 4px;
        background-color: #f4d8c7;
        font-weight: bold;
    }

    .couponsinglemainbox1name2 {
        text-align: center;
        font-size: 16px;
        padding: 12px 0;
        font-weight: bold;
    }


    .couponsinglerbutton1 a,.couponsinglerbutton2 a{
        font-size: 18px;
        text-align: center;
        display: block;
        padding:10px 0;
        border-radius: 4px;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 2px;
        background-color: #dd2229;
        color: white;
        /* text-align: center; */
    }

    .couponsinglerbutton2{
        margin:10px 20px 0;
    }

    .couponsinglerbutton1{
        margin:10px 20px 0;
    }
    .couponsinglerbuttonboxtext{
        font-weight: bold;
        margin: 30px 0 8px 0;
        font-size: 18px;
        text-align: center;
    }

    .couponlist2image2text8{
        text-align: center;
    }

    .topspnewstabcontentcoupontext3{
        text-decoration: line-through;
        color: red;
        padding:0 0 0 4px;
    }


    .topspnewstabcontentcoupontext5{
        color: #1a1a1a;
    }

    .topspnewstabcontentcoupontext2{
        color: #bd272d;
        font-weight: bold;
        font-size:15px;
    }

    #couponsinglebutton1{
        text-align: center;
        padding: 10px 0 30px;
    }

    #couponsinglebutton1 a{
        color:white;
    }

    .topdaybannerboxtext1{
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        padding: 12px 0 8px;
    }

    .topdaybannerboxprice1{
        font-size: 16px;
        text-align: center;
        letter-spacing: 3px;
    }

    .topdaybannerboxprice1arrow{
        width: 8px;
        display: inline-block;
        position: relative;
        top: -6px;
    }

    .topdaybannerboxprice1text1{
        color: #bd272d;
           font-size: 24px;
        font-weight: bold;
        margin: 0 0 0 5px;
        font-family: Hiragino Kaku Gothic Std;
    }

    .topdaybannerboxprice1text2{
        font-size: 16px;
        color: #bd272d;
        font-weight: bold;
    }
    .topdaybannerboxprice1text3{
        font-size: 16px;
    }


    .topdaybannerboxlinkbutton>a{
        background: linear-gradient(180deg, rgba(237, 28, 36, 1) 0%, rgba(193, 39, 45, 1) 100%);
        border-radius: 15px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 8px;
        display: block;
        width: 200px;
        padding: 5px 0;
        letter-spacing: 2px;
        font-weight: bold;
        margin: 0 auto;
        color:white;
        text-align: center;
    }

    .topdaybannerboxlinkbutton{
        margin:10px 0 0 0;
    }
    
    ul.topsproominfolist>li{
            padding: 0 0 30px 0;
    }
    
    .topspdbannertitle{
            margin: -12px -20px 20px;
    }

}

@media all and ( min-width: 376px) and  (max-width: 1150px ) {
    .couponlist2text1 {
        font-size: 1.7vw;
    }
    .couponlistprice2text1{
        font-size: 2vw;
    }
    .couponlistprice1{
        font-size: 1.2vw;
    }
}

/* =========================================================
   machida plan 一覧（page-plan.php）2026-07
   Figma: plan_14(PC 1200) / SP_plan_15(375)
   PC=3列カード / SP(〜767px)=2列カード
   ========================================================= */
/* Figma(machida プラン一覧)の地色はベージュ #f3f1ec。カードは白＋dropShadowで浮かせる（クーポン一覧 .mcp-wrap と同じ／SPも #F2F1EB でベージュ） */
.mcdpl-wrap{background:#f3f1ec;padding-bottom:100px}
.mcdpl-title{display:block}
.mcdpl-title img{width:100%;height:auto;display:block}
.mcdpl-inner{max-width:1040px;margin:0 auto;padding:0 10px}

/* --- カテゴリボタン（タブ） --- */
.mcdpl-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 22px;max-width:800px;margin:60px auto 0;padding:0;list-style:none}
.mcdpl-tabs .nav-item{margin:0}
.mcdpl-tabbtn{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;height:120px;padding:14px 8px;background:#fff;border:none;border-radius:10px;box-shadow:0 3px 6px rgba(0,0,0,.16);cursor:pointer;transition:box-shadow .2s,transform .2s}
.mcdpl-tabbtn__icon{flex:1 1 auto;display:flex;align-items:center;justify-content:center;width:100%;min-height:0}
.mcdpl-tabbtn__icon img{max-height:60px;max-width:64px;width:auto;height:auto}
.mcdpl-tabbtn__label{font-size:15px;font-weight:600;letter-spacing:.05em;color:#000;font-family:"Hiragino Sans",sans-serif;margin-top:8px}
.mcdpl-tabbtn:hover{box-shadow:0 6px 12px rgba(0,0,0,.22);transform:translateY(-1px)}
/* 選択中（TODO: XDの選択時グラフィック支給後に差替） */
.mcdpl-tabs .nav-link.mcdpl-tabbtn{background:#fff}
.mcdpl-tabs .nav-link.mcdpl-tabbtn.active{background:#FBF6EE;box-shadow:inset 0 0 0 2px #A55713,0 3px 6px rgba(0,0,0,.16)}

/* --- 案内バー --- */
/* AUN第4R プラン#1/#7: 案内バーの白ベタを撤去し地色(#f3f1ec)に馴染ませる(Figma/XD反映) */
.mcdpl-note{max-width:800px;margin:22px auto 0;border:1px solid #ADADAD;background:transparent;text-align:center;font-size:12px;font-weight:300;letter-spacing:.05em;padding:8px 5px;color:#000}
.mcdpl-note--sp{display:none}

/* --- ペイン見出し（アイコン＋カテゴリ名） --- */
.mcdpl-panehead{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:46px}
.mcdpl-panehead__icon img{height:47px;width:auto}
.mcdpl-panehead__label{font-size:24px;font-weight:600;letter-spacing:.05em;color:#000;font-family:"Hiragino Sans",sans-serif}

/* --- カードグリッド --- */
.mcdpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px;margin-top:34px}
.mcdpl-empty{text-align:center;margin:40px 0 0;font-size:14px;color:#555}

/* --- プランカード --- */
.mcdpl-card{display:block;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16);color:#000;text-decoration:none}
.mcdpl-card:hover{color:#000;text-decoration:none}
.mcdpl-card__img{aspect-ratio:324/189;overflow:hidden}
.mcdpl-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.mcdpl-card:hover .mcdpl-card__img img{transform:scale(1.1)}
.mcdpl-card__body{padding:15px 20px 22px}
.mcdpl-card__badges{display:flex;flex-wrap:wrap;gap:6px}
.mcdpl-card__badges span{display:inline-flex;align-items:center;justify-content:center;min-width:60px;height:18px;padding:0 9px;color:#fff;font-size:10px;font-weight:600;letter-spacing:.1em}
.mcdpl-card__title{font-size:18px;font-weight:600;letter-spacing:.05em;line-height:1.5;margin:12px 0 0;min-height:3em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-family:"Hiragino Sans",sans-serif}
.mcdpl-card__cond{font-size:12px;font-weight:300;letter-spacing:.05em;margin:13px 0 0;color:#000}
.mcdpl-card__pricerow{display:flex;align-items:center;gap:11px;margin:6px 0 0;min-height:24px}
.mcdpl-card__people{background:#E3E3E3;font-size:10px;font-weight:300;letter-spacing:.05em;padding:2px 9px;color:#000}
.mcdpl-card__price{font-size:16px;font-weight:600;letter-spacing:.1em}
.mcdpl-card__price small{font-size:13px;margin-left:2px}
.mcdpl-card__tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;margin:16px 0 0;padding:0}
.mcdpl-card__tags li{background:#E4E9EB;font-size:10px;font-weight:600;letter-spacing:.05em;padding:3px 12px;color:#000}

/* --- SP（〜767px） --- */
@media (max-width:767.98px){
    .mcdpl-wrap{background:#F2F1EB;padding-bottom:40px} /* AUN第4R プラン#8(SP): 最終要素とフッターの間を40px */
    .mcdpl-inner{padding:0 20px}
    .mcdpl-tabs{grid-template-columns:repeat(3,1fr);gap:10px;max-width:none;margin-top:30px}
    .mcdpl-tabbtn{height:105px;border-radius:8px;box-shadow:2px 2px 4px rgba(0,0,0,.16);padding:10px 4px}
    .mcdpl-tabbtn__icon img{max-height:50px;max-width:50px}
    .mcdpl-tabbtn__label{font-size:12px;margin-top:6px}
    .mcdpl-note{margin-top:20px}
    .mcdpl-note--pc{display:none}
    .mcdpl-note--sp{display:inline}
    .mcdpl-panehead{margin-top:26px;gap:8px}
    .mcdpl-panehead__icon img{height:47px}
    .mcdpl-panehead__label{font-size:18px}
    .mcdpl-grid{grid-template-columns:repeat(2,1fr);gap:28px 11px;margin-top:15px}
    .mcdpl-card__body{padding:12px 10px 16px}
    .mcdpl-card__badges span{min-width:40px;height:16px;font-size:9px;font-weight:300;padding:0 8px}
    .mcdpl-card__title{font-size:14px;letter-spacing:.02em;margin-top:8px;min-height:4.5em;-webkit-line-clamp:3}
    .mcdpl-card__cond{font-size:10px;font-weight:600;color:#868686;margin-top:6px}
    .mcdpl-card__pricerow{display:block;margin-top:2px;min-height:0}
    .mcdpl-card__people{display:block;width:-webkit-fit-content;width:fit-content;background:none;padding:0;color:#868686;font-size:10px;font-weight:600}
    .mcdpl-card__price{display:block;font-size:18px;margin-top:2px}
    .mcdpl-card__price small{font-size:13px}
    .mcdpl-card__tags{gap:5px 7px;margin-top:8px}
    .mcdpl-card__tags li{font-size:8px;padding:2px 8px}
}

/* ============================================================
   machida クーポン一覧（page-couponlist.php / Figma coupon_05 準拠）
   接頭辞 .mcp- で名前空間化（plan/news ページとの衝突回避）
   2026-07-05 追加
   ============================================================ */
.mcp-wrap {
    background: #F3F1EC;
    padding-bottom: 100px;
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
}
.mcp-wrap * { box-sizing: border-box; }

/* ヒーロー帯（全幅） */
.mcp-hero { font-size: 0; line-height: 0; }
.mcp-hero img { width: 100%; height: auto; display: block; }

/* イントロ文 */
.mcp-intro {
    margin: 0;
    padding: 44px 20px 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1.9;
    color: #2B2B2B;
}

/* カテゴリ切替ボタン（3列×2段） */
.mcp-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 22px;
    max-width: 800px;
    margin: 0 auto 20px;
    padding: 0 20px;
}
.mcp-cat {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 120px;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    padding: 10px;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.mcp-cat:hover { transform: translateY(-2px); }
.mcp-cat.is-active {
    border-color: #583D26;
    background: #FBF8F2;
}
.mcp-cat-icon { height: 48px; display: flex; align-items: flex-end; justify-content: center; }
.mcp-cat-icon img { max-height: 48px; width: auto; display: block; }
.mcp-cat-name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #2B2B2B;
    line-height: 1.2;
}
.mcp-cat.is-active .mcp-cat-name { color: #583D26; }

/* 案内バー */
.mcp-guide {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #ADADAD;
    padding: 8px 10px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: #2B2B2B;
    background: transparent;
}

/* 選択中カテゴリ見出し */
.mcp-pane-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 46px auto 10px;
    text-align: center;
}
.mcp-pane-icon { height: 47px; width: auto; }
.mcp-pane-name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #2B2B2B;
}

/* カードグリッド（PC2列） */
.mcp-grid {
    display: grid;
    grid-template-columns: repeat(2, 388px);
    justify-content: center;
    gap: 40px 51px;
    padding: 20px;
}
.mcp-card-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
}
.mcp-card {
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* カード画像（388:228 比率）＋ %OFF バッジ */
.mcp-card-img {
    position: relative;
    aspect-ratio: 388 / 228;
}
.mcp-card-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mcp-off {
    position: absolute;
    left: 11px;
    bottom: -13px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #C80000;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    z-index: 2;
}
.mcp-off-max { font-size: 15px; font-weight: 600; letter-spacing: 0.1em; }
.mcp-off-num { font-size: 36px; font-weight: 600; margin: 2px 0; }
.mcp-off-num small { font-size: 17px; font-weight: 600; }
.mcp-off-txt { font-size: 15px; font-weight: 600; letter-spacing: 0.1em; }

/* カード本文 */
.mcp-card-body {
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* カテゴリバッジ */
.mcp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mcp-badge {
    display: inline-block;
    min-width: 65px;
    padding: 3px 12px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.4;
}

/* タイトル（2行で末尾…／AUN⑦） */
.mcp-title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.55;
    color: #2B2B2B;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px;
    word-break: break-all;
}

/* 通常価格（斜線打消し） */
.mcp-regular {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #2B2B2B;
}
.mcp-strike {
    position: relative;
    display: inline-block;
    font-size: 19px;
    padding: 0 2px;
    color: #2B2B2B;
}
.mcp-strike small { font-size: 14px; }
.mcp-strike::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: 55%;
    border-top: 2px solid #2B2B2B;
    transform: rotate(-10deg);
}

/* クーポン価格 */
.mcp-price {
    margin: 0 0 16px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.mcp-tri {
    width: 0; height: 0;
    align-self: center;
    border-style: solid;
    border-width: 10px 0 10px 15px;
    /* AUN 7/22 温泉#3・#5: ▶は #000000 にそろえる（下層フッターのカードも同色） */
    border-color: transparent transparent transparent #000000;
}
.mcp-people { font-size: 18px; font-weight: 300; color: #2B2B2B; }
.mcp-plan { font-size: 37px; font-weight: 600; color: #DE0000; letter-spacing: 0.02em; }
.mcp-yen { font-size: 21px; font-weight: 600; color: #DE0000; }
.mcp-tax { font-size: 12px; font-weight: 600; color: #2B2B2B; }

/* 属性タグ（2段まで／AUN⑨） */
.mcp-tags {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    max-height: 46px; /* 20px×2段 + gap */
    overflow: hidden;
}
.mcp-tags li {
    background: #E4E9EB;
    color: #2B2B2B;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 20px;
    padding: 0 12px;
    white-space: nowrap;
}

/* このクーポンを使うボタン */
.mcp-usebtn {
    margin: auto auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 230px;
    height: 40px;
    border: 2px solid #DE0000;
    border-radius: 20px;
    background: #fff;
    color: #DE0000;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1em;
    transition: background-color .2s ease, color .2s ease;
}
.mcp-usebtn-arrow {
    width: 0; height: 0;
    border-style: solid;
    border-width: 7px 0 7px 9px;
    border-color: transparent transparent transparent #DE0000;
    transition: border-color .2s ease;
}
.mcp-card-link:hover .mcp-usebtn { background: #DE0000; color: #fff; }
.mcp-card-link:hover .mcp-usebtn-arrow { border-color: transparent transparent transparent #fff; }

/* 空状態 */
.mcp-empty {
    max-width: 600px;
    margin: 30px auto 0;
    padding: 40px 20px;
    background: #fff;
    border: 1px solid #E1DBD5;
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2;
    color: #2B2B2B;
}
.mcp-empty p { margin: 0; }

/* ---- SP（〜767px）: Figma SP_coupon_05 準拠 ---- */
@media (max-width: 767.98px) {
    .mcp-wrap { padding-bottom: 60px; }
    .mcp-intro {
        /* 支給 SP_coupon: text translate(20 180) / font-size 16 / 行送り30px / 3行 */
        padding: 23px 20px 27px;
        text-align: left;
        font-size: 16px;
        line-height: 30px;
        /* 237系: 改行は PHP 側の <br> で支給どおりに固定してある。
           2行目は 20文字 ＝ 335.2px で内容幅 335px を 0.2px 超えるため、
           自動折返しに任せると「し」だけが4行目へ落ちる。nowrap で再折返しを止める。
           超過分は padding-right 20px の内側に収まり、横スクロールは発生しない（実測 scrollWidth=375）。 */
        white-space: nowrap;
    }
    .mcp-cats {
        gap: 10px;
        max-width: none;
        padding: 0 20px;
        margin-bottom: 16px;
    }
    .mcp-cat { height: 105px; gap: 8px; border-radius: 5px; } /* 支給 105x105 rx5 */
    /* 支給は「ご夫婦」「カップル」の2行で、字の途中では折らない。
       CJK は既定でどこでも折れるため keep-all で抑え、<wbr>（中黒の直後）だけを折返し位置にする。 */
    .mcp-cat-name { word-break: keep-all; overflow-wrap: normal; }
    .mcp-cat-icon { height: 40px; }
    .mcp-cat-icon img { max-height: 40px; }
    .mcp-cat-name { font-size: 11px; text-align: center; }
    .mcp-guide { margin: 0 20px; font-size: 12px; }
    .mcp-pane-head { margin-top: 30px; }
    .mcp-grid {
        grid-template-columns: minmax(0, 335px);
        gap: 36px;
        padding: 16px 20px;
    }
    .mcp-card-body { padding: 16px 18px 18px; }
    .mcp-off { width: 84px; height: 84px; left: 8px; bottom: -10px; }
    .mcp-off-max, .mcp-off-txt { font-size: 12px; }
    .mcp-off-num { font-size: 30px; }
    .mcp-off-num small { font-size: 14px; }
    .mcp-title { font-size: 14px; min-height: 44px; }
    .mcp-regular { font-size: 14px; }
    .mcp-strike { font-size: 17px; }
    .mcp-people { font-size: 16px; }
    .mcp-plan { font-size: 32px; }
    .mcp-yen { font-size: 18px; }
    .mcp-usebtn { width: 220px; font-size: 15px; }
}

/* PC中間幅（カード2列が入らない場合は1列に） */
@media (min-width: 768px) and (max-width: 900px) {
    .mcp-grid { grid-template-columns: 388px; }
}

/* AUN第4R#3(SP): クーポン一覧/詳細の最終ボタンとフッターの間を40px空ける */
@media (max-width: 480px) {
    .mcp-wrap { padding-bottom: 40px; }
    .mcs-wrap { padding-bottom: 40px; }
}

/* 237系: 導入文の nowrap は支給幅375px前提。360px未満では1行が内容幅を超えて
   横スクロールが出る（320pxで scrollWidth 355 > clientWidth 320 を実測）。
   横あふれを出すより改行位置が変わる方を採り、狭幅では自動折返しへ戻す。 */
@media (max-width: 359.98px) {
    .mcp-intro { white-space: normal; }
}