@charset "UTF-8";
.contents { padding: 50px 0 120px; }
@media screen and (max-width: 750px) { .contents { padding: 60px 0; } }

._idx .coupon-lead { margin-bottom: 50px; }
._idx .coupon-list { display: flex; flex-wrap: wrap; gap: 50px 5%; }
@media screen and (max-width: 750px) { ._idx .coupon-list { flex-direction: column; } }
._idx .coupon-list li { width: 30%; border: 1px solid #D0D0D0; border-radius: 1em; overflow: hidden; }
@media screen and (max-width: 750px) { ._idx .coupon-list li { width: 100%; } }
._idx .coupon-list li figure img { aspect-ratio: 2 / 1; }
._idx .coupon-list li .coupon-list-box { padding: 20px 20px 30px; }
._idx .coupon-list li .coupon-list-box .coupon-list-name { margin-bottom: 20px; font-size: 1.8rem; text-align: center; font-weight: 500; }
._idx .coupon-list li .coupon-list-box p { width: 1005; max-width: 200px; margin: 0 auto; }
._idx .coupon-list li .coupon-list-box p a { display: block; text-decoration: none; padding: 15px; background: #4C4C4C url("../img/common/ico_arrow_w.svg") no-repeat right 20px center; background-size: 10px auto; font-size: 1.4rem; text-align: center; color: #fff; border-radius: 2em; line-height: 1; }

._couponarea .coupon-arealist .coupon-box { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr; column-gap: 30px; margin-bottom: 50px; padding: 30px; border: 1px solid #D0D0D0; border-radius: 1em; }
@media screen and (max-width: 750px) { ._couponarea .coupon-arealist .coupon-box { display: block; } }
._couponarea .coupon-arealist .coupon-box:last-child { margin-bottom: 0; }
._couponarea .coupon-arealist .coupon-fig { grid-column: 1 / 2; grid-row: 1 / 2; margin-bottom: 20px; text-align: center; }
._couponarea .coupon-arealist .coupon-box-main { grid-column: 2 / 3; grid-row: 1 / 3; }
@media screen and (max-width: 750px) { ._couponarea .coupon-arealist .coupon-box-main { margin-bottom: 30px; } }
._couponarea .coupon-arealist .coupon-box-main .coupon-guide { background-color: #F2F5FA; border: 1px solid #D0D0D0; border-radius: 1em; }
._couponarea .coupon-arealist .coupon-box-main .coupon-guide dl dt { padding: 20px; background: url("../img/common/ico_toggle_o.svg") no-repeat right 20px center; background-size: 22px auto; font-weight: 700; cursor: pointer; }
._couponarea .coupon-arealist .coupon-box-main .coupon-guide dl dt.active { background-image: url("../img/common/ico_toggle_c.svg"); }
._couponarea .coupon-arealist .coupon-box-main .coupon-guide dl dd { display: none; padding: 20px; border-top: 1px solid #D0D0D0; font-size: 1.4rem; }
._couponarea .coupon-arealist .coupon-box-main .coupon-guide dl dd p { margin-bottom: 20px; font-weight: 700; color: #D60019; }
._couponarea .coupon-arealist .coupon-box-main .coupon-guide dl dd ul li { padding-left: 1em; text-indent: -1em; line-height: 2; }
._couponarea .coupon-arealist .coupon-box-detail { grid-column: 1 / 2; grid-row: 2 / 3; }
._couponarea .coupon-arealist .coupon-box-detail .coupon-qr { width: 98px; margin: 0 auto; }
@media screen and (max-width: 750px) { ._couponarea .coupon-arealist .coupon-box-detail .coupon-qr { display: none; } }
._couponarea .coupon-arealist .coupon-box-detail .coupon-btn { display: block; width: 100%; max-width: 200px; margin: 0 auto 20px; padding: 15px 20px; border-radius: 2em; background: #4C4C4C url("../img/common/ico_arrow_w.svg") no-repeat right 20px center; background-size: 10px auto; color: #fff; text-align: center; text-decoration: none; transition: all .6s; }
._couponarea .coupon-arealist .coupon-box-detail .coupon-btn:hover { opacity: 0.7; }

.coupon-content .coupon-subheading { margin-bottom: 30px; padding-left: 20px; border-left: 4px solid #707070; font-size: 2.0rem; font-weight: 700; }
.coupon-content .coupon-txt { margin-bottom: 30px; font-weight: 500; }
.coupon-content .coupon-txtlist { margin-bottom: 30px; padding: 20px; border: 1px solid #EE5A87; font-size: 1.4rem; }
.coupon-content .coupon-txtlist li { display: flex; }
.coupon-content .coupon-txtlist li::before { content: '•'; display: inline-block; width: 1em; }
.coupon-content .coupon-txtlist li span { flex: 1; }
.coupon-content .coupon-about { margin-bottom: 20px; }
.coupon-content .coupon-about dl { display: flex; padding: 10px; border-bottom: 1px solid #D0D0D0; }
@media screen and (max-width: 750px) { .coupon-content .coupon-about dl { display: block; } }
.coupon-content .coupon-about dl dt { width: 13em; padding: 0 20px; font-weight: 700; }
@media screen and (max-width: 750px) { .coupon-content .coupon-about dl dt { width: 100%; margin-bottom: 10px; padding: 0; } }
.coupon-content .coupon-about dl dd { flex: 1; }

.modal-sec .modal-con { max-width: 800px; }
.modal-sec .modal-close { width: 38px; margin: 20px 0 0 auto; cursor: pointer; }
@media screen and (max-width: 750px) { .modal-sec .modal-close { width: 28px; margin-top: 10px; margin-bottom: 10px; } }
.modal-sec .modal-main { width: 100%; max-width: 600px; margin: 0 auto; background-color: #fff; line-height: 1.6; border-radius: 1em; overflow: hidden; }
.modal-sec .modal-ttl { padding: 15px; background-color: #F1F1F1; font-size: 2.4rem; font-weight: 500; text-align: center; }
@media screen and (max-width: 750px) { .modal-sec .modal-ttl { padding: 10px; font-size: 2.0rem; } }
.modal-sec .modal-content { padding: 40px; }
@media screen and (max-width: 750px) { .modal-sec .modal-content { padding: 20px; } }
.modal-sec .modal-fig { width: 100%; max-width: 240px; margin: 0 auto 30px; }
@media screen and (max-width: 750px) { .modal-sec .modal-fig { max-width: 200px; margin-bottom: 10px; } }
@media screen and (max-width: 750px) { .modal-sec .coupon-content .coupon-subheading { margin-bottom: 10px; font-size: 1.6rem; } }
@media screen and (max-width: 750px) { .modal-sec .coupon-content .coupon-txt { margin-bottom: 10px; font-size: 1.4rem; } }
@media screen and (max-width: 750px) { .modal-sec .coupon-content .coupon-txtlist { margin-bottom: 10px; } }
@media screen and (max-width: 750px) { .modal-sec .coupon-content .coupon-about { margin-bottom: 10px; } }
@media screen and (max-width: 750px) { .modal-sec .coupon-content .coupon-about dl { font-size: 1.4rem; } }
.modal-sec .coupon-content .coupon-about dl dt { width: 10em; }
@media screen and (max-width: 750px) { .modal-sec .coupon-content .coupon-about dl dt { width: 100%; } }

/*# sourceMappingURL=coupon.css.map */