@charset "UTF-8";

/*共用*/
body {
	background-color: #ddbbe2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23c59eca' fill-opacity='0.36'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.area, .kv-area { width: 65%; padding: 0; margin: 0 auto; }

/*主視覺*/
.kv-area img { width: 100%; }
.kv { width: 100%; }

/*rule*/
.s1 .area { background-color: #FFF; }
.s1 .area h1 {
	width: 100%;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	color: #FFF;
	background-color: #0000A3;
	padding: 10px 0;
}
.rule {
	width: 100%;
	padding: 3%; 
    margin: 0 auto;
    overflow: hidden;
}
.rule h2 {
	font-size: 1.25em;
	font-weight: bolder;
	line-height: 130%;
    text-align: left;
	color: #0000A3;
	margin-bottom: 8px;
}
.rule h3 {
	font-size: 1.125em;
	font-weight: bold;
	line-height: 130%;
    text-align: left;
	color: #FF0000;
	margin-bottom: 8px;
}
.rule ol {
	list-style: decimal;
	margin-left: 30px;
}
.rule ul {
	list-style: disc;
	margin-left: 30px;
	margin-top: 5px;
}
.rule > ol > li {
	font-size: 1em;
	line-height: 140%;
	color: #333;
	margin-bottom: 5px;
}
.rule > ol > li > ul > li,  .rule > ol > li > ul > li > ol > li {
	font-size: 1em;
	line-height: 140%;
	color: #333;
	margin-bottom: 5px;
}
.rule p {
	font-size: 1em;
	line-height: 140%;
	color: #333;
	padding: 0 0 5px 0;
}
.rule a:link, .rule a:visited, .rule a:hover, .rule a:focus {
	font-size: 1em;
	font-weight: bold;
	line-height: 140%;
	color: #333;
	text-decoration: underline;
}
.rule-btn a:link, .rule-btn a:visited {
    width: 160px;
	font-size: 1.125em;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	background-color: #d9534f;
    border-radius: 5px;
    padding: 10px 20px;
	margin: 10px 0 0 0;
	display: block;
}
.rule-btn a:hover, .rule-btn a:focus {
	color: #FFFFFF;
	background-color: #CC0000;
}
.gift { float: right; width: 400px; margin: 15px; }
.gift img { width: 100%; }


/*---------------------------------------------------------------
----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    .area, .kv-area { width: 85%; }
}

@media screen and (max-width: 834px) {
    .area, .kv-area { width: 100%; }
    .rule { padding: 3% 5%; }
}

@media screen and (max-width: 480px) {
    .s1 .area h1 { font-size: 1.5em; }
}