@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
.mt20{margin-top: 20px;}
.mt40{margin-top: 40px;}
.mt60{margin-top: 60px;}
.mb30{margin-bottom: 30px;}

ul {list-style: none;}
dl figure{display: flex;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}
.swiper a:hover img{
	transform: scale(1.1); /* 拡大 */}

h2,h3,h4,dt,dd,a,p,li,span,th,td{
font-family: "source-han-sans-japanese", sans-serif;
font-style: normal;}

a:hover img{transition: 0.5s;}
.red{color: #bf1f1f;}

h1 .mainbnr{
	text-align: center;
	background-color: #f7f7f7;
	line-height: 0;}
h1 img{max-width: 70%;margin: 0 auto;}
h2{
	margin: 0 auto 35px auto;
	font-weight: 400;
	font-size: 26px;
	position: relative;
	display: inline-block;
	color: white;
	z-index: 1;}
h2:before{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 125%;
	height: 100%;
	background-image: linear-gradient(90deg, #004ea2, #1ac4ea);
	transform: skew(-20deg) translateX(-50%); /* ← ここで斜体っぽく傾ける！ */
	z-index: -1;}

.inner{
	width: 1080px;
	margin: 0 auto;}

#prologue{margin: 60px 0;}
#prologue .inner{text-align: center;}
#prologue .leed{
	width: 80%;
	font-weight: 400;
	margin: 0 auto;
	text-align: left;
	font-size: 16px;
	line-height: 2.0;}
#prologue .coupon h3{
	font-size: 26px;
	display: inline-block;
	margin: 30px 0;
	position: relative;
	padding: 0 65px;
	text-decoration: underline;}
#prologue .coupon .period{
	font-size: 24px;
	padding: 10px 0;
	margin-bottom: 30px;
	text-align: center;
	border-top: solid 1px #3c3c43;
	border-bottom: solid 1px #3c3c43;
	width: 750px;
	margin: 0 auto 30px;}
#prologue .coupon .code{
	font-size: 35px;
	color: #fff;
	background-color: #005da2;
	padding: 5px 10px;
	text-align: center;
	width: 750px;
	margin: 0 auto 30px;}
#prologue .coupon dl{
	width: 750px;
	margin: 0 auto;
	text-align: left;
	font-size: 16px;}


#rankup{margin-bottom: 60px;}
#rankup{background-color: #f7fdff;}
#rankup .inner{padding: 60px 0;}
#rankup .inner ul li{
	font-size: 18px;
	font-weight: 500;}


#rankgift{margin-bottom: 60px;}
#rankgift .inner{text-align: center;}
#rankgift .inner .leed{
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 30px;}
#rankgift .inner .leed span{color: #bb0000;}
#rankgift .inner figure{margin-bottom: 30px;}
#rankgift .inner div{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;}
#rankgift .inner div figure:nth-child(even){padding: 0 15px;}
#rankgift .inner ul li{
	font-weight: 500;
	font-size: 18px;
	text-align: left;}


#conditions{margin-bottom: 60px;}
#conditions{background-color: #f7fdff;}
#conditions .inner{
	text-align: center;
	padding: 60px 0;}
#conditions .inner .leed{
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 30px;}
#conditions .inner table{
	width: 100%;
	font-size: 20px;
	border-collapse: collapse;}
#conditions .inner table .item{background-color: #fafafa;}
#conditions .inner table tr{background-color: #fff;}
#conditions .inner table th{
	border-top:1px solid #333;
	border-bottom:1px solid #333;}
#conditions .inner table td{
	border-top:1px solid #333;
	border-bottom:1px solid #333;}
#conditions .inner table td:nth-child(2){
	border-left:1px solid #333;
	border-right:1px solid #333;}
#conditions .inner table span{color: #bf1f1f; font-weight: 500;}
th,td{padding: 8px 0;font-weight: 500;}
#conditions .inner ul li{
	font-size: 18px;
	font-weight: 500;
	text-align: left;}
#conditions .regular{ color: #3b8e4f;}
#conditions .bronze{ color: #b37e31;}
#conditions .silver{ color: #6c7c7c;}
#conditions .gold{ color: #c7b722;}
#conditions .platinum{ color: #2a7fa9;}


#judge{margin-bottom: 60px;}
#judge .inner{text-align: center;}
#judge .inner .leed{
	font-weight: 400;
	font-size: 18px;
	margin-bottom: 30px;}


#precautions{margin-bottom: 60px;}
#precautions{background-color: #f7fdff;}
#precautions .inner{
	text-align: center;
	padding: 60px 0;}
#precautions .inner ul{
	font-size: 18px;
	text-align: left;}


#qa .inner{text-align: center;}
#qa .inner dl{text-align: left;}
#qa .inner dl:nth-child(n+2){margin-top: 20px;}
#qa .inner dt{
	position: relative;
	cursor:pointer;
	font-size: 20px;
	font-weight: 500;
	padding: 10px 10px 10px 60px;
	color: #3a8bb8;
	border: solid 1px;
	border-image:linear-gradient(90deg, #004ea2, #1ac4ea)1;}
#qa .inner dt:before{
	content: url(../img/question_icon.webp);
	width: 33px;
	height: 90%;
	align-content: end;
	position: absolute;
	top: 50%;
	left: 11px;
	transform: translateY(-50%);
	border-right: solid 1px;}
#qa .inner dd{
	position: relative;
	font-size: 18px;
	font-weight: 500;
	background:#f4f8fb;
	display:none;
	box-sizing: border-box;
	padding: 30px 30px 30px 60px;}
#qa .inner dd:before{
	content: url("../img/answer_icon.webp");
	width: 25px;
	height: 23px;
	position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);}
#qa .inner dd p{
	padding-left: 15px;
	border-left: solid 1px;
	border-image:linear-gradient(90deg, #004ea2, #1ac4ea)1;}



.spotlist_back{
	margin-top: 60px;
	text-align: center;}
.spotlist_back a{
	font-size: 20px;
	border: solid 2px;
	padding: 15px 60px;
	border-radius: 10px;}


@media only screen and (max-width: 768px) {}
@media (max-width: 1024px) {}
@media (max-width: 768px) {
	h1 img{max-width: 100%;}
	
	.inner{
		width: 90%;
		margin: 0 auto;}
	.inner img{
		max-width: 100%;}
	
	#prologue{margin: 50px 0;}
	#prologue .inner{margin: 0 auto 30px;}
	#prologue .leed{width: 100%;}
	#prologue .coupon h3{
		display: block;
		font-size:20px;
		padding: 0;}
	#prologue .coupon .period{
		width: 100%;
		font-size: 23px;
		margin-bottom: 15px;}
	#prologue .coupon .code{
		width: 100%;
		font-size: 23px;
		margin-bottom: 15px;}
	#prologue .coupon dl{width: 100%;}
	#prologue .coupon dd{font-size: 15px;}
	
	#rankup .inner{padding: 0;}
	#rankup .inner ul li{font-size: 16px;}
	#rankup .inner figure{width: 700px;}
	#rankup .inner .slidarea{overflow-x: auto;}
	#rankup .inner .sptxt{
		text-align: center;
		font-size: 16px;
		padding-bottom: 5px;
		color: #bb0000;}
	
	
	#rankgift .inner ul li{font-size: 16px;}
	#rankgift .inner div figure:nth-child(even){
		padding: 0;
	}
	
	
	#conditions .inner .leed{font-size: 16px;}
	#conditions .inner .slidarea{overflow-x: auto;}
	#conditions .inner table{width: 750px;}
	#conditions .inner ul li{font-size: 16px;}
	#conditions .inner .sptxt{
		text-align: center;
		font-size: 16px;
		padding-bottom: 5px;
		color: #bb0000;}
	
	
	#judge .inner .leed{font-size: 16px;}
	
	#qa .inner dt:before{
		content: url(../img/question_icon.webp);
		align-content: space-evenly;}
	#qa .inner dt{
		font-size: 18px;
		line-height: 1.4;}
	#qa .inner dd{
		padding:20px;
		line-height: 1.4;}
	#qa .inner dd:before{content: none;}
	#qa .inner dd p{
		padding: 0;
		border: none;}
	

	
	.more{width: 100%;}
	.more a{font-size: 18px;}
	
	
	
}
@media (max-width: 599px) {}