@charset "shift_jis";
@import url(icon.css);
@import url(https://fonts.googleapis.com/css?family=Oswald:700);
.jtb-nav-breadcrumb { margin-bottom: 25px; }
#contentWrap { font-family: sans-serif; line-height: 1.8; font-size: 14px; margin: 0 auto; text-align: center; text-align: left; overflow: hidden; }
#contentWrap h1 { font-size: 18px; font-weight: bold; line-height: 1; margin: 0 auto 25px; text-align: left; width: 1120px; }
#contentWrap * { box-sizing: border-box; }
#contentWrap a::before, #contentWrap a::after, #contentWrap span::before, #contentWrap span::after, #contentWrap a, #coupon-guide h2, #bnr-area .coupon, #bnr-area .point { transition: all .3s; }
#contentWrap h2 { font-size: 30px; margin-bottom: 40px; text-align: center }
#contentWrap p { margin-bottom: 20px; }
#contentWrap p.btn{ display: block; text-align: center; }
#contentWrap img { display: inline-block; vertical-align: bottom; transition: all .3s; }
.js-btn-page-top { bottom: 50px; cursor: pointer; display: none; position: fixed; right: 50px; z-index: 100; }
.js-btn-page-top a { display: block; height: 17px; position: relative; width: 35px; }
.js-btn-page-top a::before { color: #000; content: '\e802'; display: inline-block; font-family: 'icon'; font-size: 17px; height: 17px; width: 35px; }
.js-btn-page-top a:hover { opacity: .8; }
.center { text-align: center }
#coupon-list ul li .top .catch span, #coupon-list ul li .top .price strong, #coupon-list ul li .bottom dl dd { font-family: 'Oswald', sans-serif; }
#coupon-guide .coupon-guide-box { display: none; }
#contentWrap .inner { width: 1120px; margin: 0 auto }

/* ==========================================

CONTENTS

========================================== */

/*------*/
#ttl-kv { text-align: center; background: #e10111 url(../images/bg-kv-ribbon.png) repeat-x 0 0 / 199px auto; }
#ttl-kv .inner { width: 100% !important; }
#ttl-kv .box { position: relative; background: url(../images/bg-kv.png) no-repeat 50% 50% / 1120px auto }
#ttl-kv .box::before, #ttl-kv .box::after { position: absolute; content: ''; height: 146px; bottom: 0; }
#ttl-kv .box::before { width: 503px; background: url(../images/bg-kv-left.png) no-repeat 0 0 / 503px auto; left: 0; }
#ttl-kv .box::after { width: 456px; background: url(../images/bg-kv-right.png) no-repeat 0 0 / 456px auto; right: 0; }
#ttl-kv p { margin-bottom: 40px; }

/*------*/
#coupon-list { margin-bottom: 40px; }
#coupon-list h2 { background: #bf000e; padding: 10px 20px 10px 30px; text-align: left; position: relative; }
#coupon-list h2::before { position: absolute; content: ''; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 13px 13px 0 0; border-color: #f5f5f5 transparent transparent transparent; }
#coupon-list h2 span { background: url(../images/ic-tag.png) no-repeat 0 50% / 27px auto; display: inline-block; color: #fff; font-weight: bold; font-size: 24px; padding-left: 35px; }
#coupon-list ul { overflow: hidden; }
#coupon-list ul li { width: 543px; margin: 0 34px 34px 0; float: left; }
#coupon-list ul li.finish { position: relative; }
#coupon-list ul li.finish .close-overlay { background: rgba(0, 0, 0, 0.7) url(../images/ic-finish.png) no-repeat 50% 50% / 350px auto; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 100; display: block; }
#coupon-list ul li.finish a { pointer-events: none; }
#coupon-list ul li:nth-of-type(2n) { margin-right: 0 }
#coupon-list ul li .wrapper { position: relative; }
#coupon-list ul li .box { background: #fff; padding: 5px; text-align: center; margin-bottom: 10px; }
#coupon-list ul li .top { border: #d8d8d8; border: 1px solid #d8d8d8; border-bottom: none; padding: 25px 0; }
#coupon-list ul li .top .catch { font-size: 22px; margin-bottom: 10px; line-height: 1; font-weight: bold; color: #522e00 }
#coupon-list ul li .top .catch span { font-size: 24px; }
#coupon-list ul li .top .price { margin-bottom: 0; line-height: 1; font-weight: bold; color: #e10111; font-size: 36px; }
#coupon-list ul li .top .price strong { font-size: 72px; }
#coupon-list ul li .bottom { display: table; width: 100%; table-layout: fixed; border: 1px solid #d8d8d8; border-top: none; }
#coupon-list ul li .bottom dl { display: table-cell; }
#coupon-list ul li .bottom dl dt, #coupon-list ul li .bottom dl dd { padding: 10px; }
#coupon-list ul li .bottom dl dt { background: #e10111; color: #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff; font-size: 20px; }
#coupon-list ul li .bottom dl dd { background: #ffff00; color: #000; border-right: 1px solid #d8d8d8; font-size: 36px; }
#coupon-list ul li .bottom dl:last-of-type dt, #coupon-list ul li .bottom dl:last-of-type dd { border-right: none; }
#coupon-list p.center { font-size: 14px }

/*------*/
#coupon-guide { margin-bottom: 80px; }
#coupon-guide .inner { width: 1006px }
#coupon-guide h2 { background-color: #e10111; border-radius: 4px; position: relative; color: #fff; font-weight: bold; margin-bottom: 40px; padding: 10px 0; font-size: 24px}
#coupon-guide h2::after { position: absolute; content: '\e800'; font-family: 'icon'; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 27px; right: 20px;}
#coupon-guide h2.active::after { content: '\e806'; cursor: pointer;}
#coupon-guide h2:hover { cursor: pointer; background: #ffff00; color: #000; }
#coupon-guide .coupon-guide-box { display: none; text-align: center; padding: 20px 58px;}
#coupon-guide #guideline .coupon-guide-box { padding-top: 0; }
#guideline dl { background-color: #fff2e8; border: 1px solid #d8d8d8; border-top: none; width: 100%; }
#guideline dt, #guideline dd { border-top: 1px solid #d8d8d8; font-size: 12px; text-align: left; padding: 1.5em;}
#guideline dt { color: #ff6c00; clear: left; float: left; width: 180px; }
#guideline dd { background-color: #fff; display: block; border-left: 1px solid #d8d8d8; margin-left: 180px;}
#guideline dd ul li { display: list-item; list-style: disc; list-style-position: outside; margin-left: 1.5em; }
#coupon-guide p.btn { margin-bottom: 40px; text-align: center; }
#coupon-guide p.btn a { display: block; background-color: #e10111; border-radius: 4px; position: relative; color: #fff; font-weight: bold; padding: 10px 0; font-size: 24px }
#coupon-guide p.btn a::after { position: absolute; content: '\e803'; font-family: 'icon'; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 27px; right: 20px; }
#coupon-guide p.btn a:hover { background: #ffff00; color: #000; }
#coupon-guide p.btn a:hover::after { right: 15px; }

/*------*/
#bnr-area { margin-bottom: 40px; }
#bnr-area dl { margin-bottom: 10px; border: 1px solid #a1c404; vertical-align: middle; padding: 20px 45px; display: table; width: 100% }
#bnr-area dl:hover { cursor: pointer; }
#bnr-area .point dl { border-color: #ffc601; }
#bnr-area .coupon dl { background: url(../images/ic-coupon.png) no-repeat 45px 50% / 180px auto; }
#bnr-area .point dl { background: url(../images/ic-coin.png) no-repeat 45px 50% / 138px auto; }
#bnr-area dl dt, #bnr-area dl dd { display: table-cell; vertical-align: middle; }
#bnr-area dl dt { color: #000; font-weight: bold; font-size: 20px; line-height: 1.2; width: 75%; padding-left: 200px; }
#bnr-area dl dd { color: #fff; font-weight: bold; font-size: 18px; width: 25%; }
#bnr-area dl dd a { text-decoration: none; display: block; border-radius: 30px; text-align: center; position: relative; color: #fff; padding: 10px 0; }
#bnr-area dl dd a::after { right: 20px; position: absolute; content: '\e803'; font-family: 'icon'; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#bnr-area dl:hover dd a::after { right: 15px }
#bnr-area .coupon dl dd a { background: #87a500 }
#bnr-area .point dl dd a { background: #ff3d01 }
#bnr-area .coupon dl:hover dd a { background: #9ebd11 }
#bnr-area .point dl:hover dd a { background: #fd6536 }
#bnr-area .coupon { background-color: #f3ffbc; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #f6ffcd), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #f6ffcd), color-stop(.75, #f6ffcd), color-stop(.75, transparent), to(transparent)); background-size: 25px 25px; }
#bnr-area .point { margin-bottom: 60px; background-color: #ffeee2; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #fff2ea), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #fff2ea), color-stop(.75, #fff2ea), color-stop(.75, transparent), to(transparent)); background-size: 25px 25px; }
#bnr-area .coupon:hover, #bnr-area .point:hover { background-size: 60px 60px; }
#bnr-area p.btn a { background-color: #e10111; border-radius: 6px; position: relative; color: #fff; font-weight: bold; text-decoration: none; text-align: center; display: block; padding: 20px 0; font-size: 36px; width: 680px; margin: 0 auto; }
#bnr-area p.btn a::after { position: absolute; content: '\e803'; font-family: 'icon'; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 27px; right: 30px; }
#bnr-area p.btn a:hover { cursor: pointer; background: #ffff00; color: #000; }
#bnr-area p.btn a:hover::after { right: 25px; }
@keyframes rotation {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(-20deg); }
	75% { transform: rotate(20deg); }
	100% { transform: rotate(0deg); }
}