@charset "Shift_JIS";
@import url(icon.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
.jtb-nav-breadcrumb { margin-bottom: 25px; }
h1 { font-size: 18px; font-weight: bold; line-height 1; margin: 0 auto 25px; width: 1120px; }
#contentWrap { font-family: "���C���I", Meiryo, sans-serif; line-height: 1.6; text-align: center; padding-top: 20px }
#contentWrap * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#contentWrap .inner { width: 1120px; margin: 0 auto }
#contentWrap h2 { font-size: 30px; margin-bottom: 30px; }
#contentWrap em, .coupon .price li:nth-child(2) dl dd { font-family: 'Roboto', sans-serif;}
.section .btn li a { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; }
#contentWrap .section p { margin-bottom: 40px; }
a:hover img{ filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; }
.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; }
p.caution { font-size: 12px;  margin-bottom: 20px;}
#box-title { text-align: center; position: relative; background: url('../images/bg-main.png') repeat 0 0;}
#box-title::before, #box-title::after { content:''; background: url('../images/bg-main-border.png') repeat-x 0 0; background-size: auto 7px; position: absolute; left: 0; width: 100%; height: 7px}
#box-title::before { top: 0;}
#box-title::after { bottom: 0;}
#box-title .inner { background: url('../images/bg-main-overlay.png') no-repeat center center;}
#anchor { display: table; width: 1120px; table-layout: fixed; margin: 0 auto 40px;}
#anchor li { display: table-cell;}
#teaser { position: relative; text-align: center; background: #fff url('../images/bg-teaser.png') repeat-x 0 100%; background-size: auto 66px; padding: 160px 0 100px}
#teaser::before { position: absolute; content:''; background: url('../images/ttl-teaser.png') no-repeat 50% 0; width: 100%; height: 187px; top: -20px; left: 0;}

#cassette01 { background: url('../images/bg-cassette01.png') repeat 0 0; }
#cassette02 { background-image: url('../images/bg-cassette02.png'); }
#cassette03 { background-image: url('../images/bg-cassette03.png'); }
.section { padding: 40px 0; }
.coupon { background: #fff;}
.coupon p { margin-bottom: 0 !important; line-height: 1}
.coupon .box { position: relative; padding: 40px 50px 15px;}
.coupon .box::before { position: absolute; content:''; top: 0; left: 0; width: 134px; height: 134px;}
#cassette01 .box::before { background: url('../images/ic-ribbon01.png') no-repeat 0 0;}
#cassette02 .box::before { background: url('../images/ic-ribbon02.png') no-repeat 0 0;}
#cassette03 .box::before { background: url('../images/ic-ribbon03.png') no-repeat 0 0;}
.coupon .price { display: table; width: 100%; margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 30px}
.coupon .price li { display: table-cell; text-align: center; vertical-align: middle;}
.coupon .price li:nth-child(1) { width: 65%; font-size: 60px; font-weight: bold; color: #e6402e;}
#cassette03 .coupon .price li:nth-child(1) { width: 100%;}
.coupon .price li:nth-child(1) em { font-size: 122px; color: #141414;}
.coupon .price li:nth-child(2) dl { display: table; width: 100%; margin-bottom: 5px; border: 1px solid #ff5a44;}
.coupon .price li:nth-child(2) dl dt{ color: #fff; background: #ff5a44; padding: 10px 0; display: table-cell; width: 45%; vertical-align: middle;}
.coupon .price li:nth-child(2) dl dd{ font-size: 28px; color: #141414; display: table-cell; vertical-align: middle;}
.coupon .detail { letter-spacing: -.4em; text-align: left;}
.coupon .detail li { display: inline-block; letter-spacing: normal; padding-right: 20px; margin-bottom: 5px;}
.coupon .detail li dl { display: table;}
.coupon .detail li dl dt { display: table-cell; padding: 5px 15px; color: #e6402e; background: #ffe8e5; text-align: center}
.coupon .detail li dl dd { margin-left: 1em }
.section .btn { letter-spacing: -.4em; margin: 40px 0; }
.section .btn:last-child { margin-bottom: 0; }
.section .btn li { letter-spacing: normal; display: inline-block; padding: 0 10px;}
.section .btn li a, #cassette03.section .btn li p { display: block; padding: 20px 0; width: 360px; position: relative; border-radius: 30px; line-height: 1; font-size: 18px;}
.section .btn li a::after { position: absolute; content: '\e804'; font-family: 'icon'; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #e6402e; font-size: 10px}
.section .btn li:nth-child(1) a, #cassette03.section .btn li:nth-child(1) p { background: #1a1a1a; color: #fff;}
.section .btn li:nth-child(2) a { background: #fff; color: #1a1a1a;}
.section .btn li:hover a { background: #c21401; color: #fff;}
.section .btn li:hover a::after { color: #fff;}

#cassette02 .coupon .price li:nth-child(1), #cassette02.section .btn li a::after{ color: #e6ba0f;}
#cassette02 .coupon .price li:nth-child(2) dl { border-color: #e6ba0f;}
#cassette02 .coupon .price li:nth-child(2) dl dt{ background: #e6ba0f;}
#cassette02 .coupon .detail li dl dt { color: #e6ba0f; background: #fff9d9;}
#cassette02.section .btn li:hover a { background: #b48f00;}

#cassette03 .coupon .price li:nth-child(1), #cassette03.section .btn li a::after{ color: #41aed7;}
#cassette03 .coupon .price li:nth-child(2) dl { border-color: #41aed7;}
#cassette03 .coupon .price li:nth-child(2) dl dt{ background: #41aed7;}
#cassette03 .coupon .detail li dl dt { color: #41aed7; background: #dceef5;}
#cassette03.section .btn li:hover a { background: #097fab;}
#cassette03 h2 i { background: #fff; display: inline-block; padding: 5px 20px; color: #1995c3; font-size: 23px; font-style:normal; position: relative;}
#cassette03 h2 i::before { position: absolute; content: ''; left: -20px; top: 0; width: 20px; height: 100%; background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top left/100% 100%}
#cassette03 h2 i::after { position: absolute; content: ''; right: -20px; top: 0; width: 20px; height: 100%; background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #fff 50.5%) no-repeat top left/100% 100%}
#cassette03 .term { display: table; width: 100%; border-bottom: 1px solid #41aed7; line-height: 1}
#cassette03 .term dt { display: table-cell; width: 300px; background: #1a1a1a; padding: 15px 0; color: #fff; font-size: 16px;}
#cassette03 .term dd { font-size: 15px;}
#cassette03 .term dd em { font-size: 18px; font-weight: bold;}

#cassette03 .complete { position: relative;}
#cassette03 .complete-txt { position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.9); z-index: 100; padding-top: 80px}
#cassette03 .complete-txt p { font-size: 18px; font-weight: bold; }
#cassette03 .complete-txt p em { font-size: 54px; color: #ee3522; }

#box-guideline h3 { background: url('../images/bg-guideline.png') repeat 0 0; color: #fff; font-size: 32px; padding: 20px 0; position: relative;}
#box-guideline h3:hover { cursor: pointer}
#box-guideline h3::after { position: absolute; content: '\e8000'; font-family: 'icon'; right: 40px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #ffdd00; font-size: 30px;}
#box-guideline h3.open::after { content: '\e8010';}
#box-guideline .box-inner { font-size: 14px; padding: 20px 6%; background: #fff; display: none}
#box-guideline dl { text-align: left; }
#box-guideline dl dt { color: #cc2a0a; float: left; font-weight: bold; padding: 15px 0; width: 20%; }
#box-guideline dl dd { border-top: 1px solid #ccc; line-height: 1.5; min-height: 54px; padding: 15px 15px 15px 22%; }
#box-guideline dl dd:first-of-type { border: none; }
#box-guideline dl dd p { margin-bottom: 1em; }
#box-guideline dl dd img { margin: 10px auto 0 0; }
#box-guideline dl dd ul li { display: list-item; list-style: disc; list-style-position: outside; margin-left: 1em; }
#box-guideline dl dd ul li + li { padding-top: 4px; }