@charset "utf-8";
@import url(remodal.css);
@import url(remodal_top.css);

/*------------------------------------------------
  reset
------------------------------------------------*/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

sup {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 80%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
caption, th{
	text-align:left;
	font-weight:normal;
}

h1, h2, h3, h4, h5, h6 {
	font-size:100%; font-weight:normal;
}
area {
	border:none;
	outline:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset, img{
	border:0;
	vertical-align:bottom;
}

/*------------------------------------------------
  common
------------------------------------------------*/

html, body {
	height: 100%;
}
body {
	color: #000;
	font-size:16px;
	font-weight: 500;
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	background-color: #FFF;
	-webkit-font-feature-settings: "palt" 1;
	font-feature-settings: "palt" 1;
	-webkit-text-size-adjust: 100%;
	position: relative;
}
a {
	outline: none;
	text-decoration:none;
}
img {
	width: 100%;
}
.cf:after {
	content: "";
	clear: both;
	display: block;
}
.left {
	float: left;
}
.right {
	float: right;
}
#wrapper {
	background: rgb(235,210,100);
	background: -moz-linear-gradient(left, rgba(235,210,100,1) 0%, rgba(255,240,155,1) 50%, rgba(235,210,100,1) 100%);
	background: -webkit-linear-gradient(left, rgba(235,210,100,1) 0%,rgba(255,240,155,1) 50%,rgba(235,210,100,1) 100%);
	background: linear-gradient(to right, rgba(235,210,100,1) 0%,rgba(255,240,155,1) 50%,rgba(235,210,100,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdab23', endColorstr='#cdab23',GradientType=1 );
	position: relative;
	overflow: hidden;
}

/* ------------------------------------------------
  SP(font-size)
------------------------------------------------ */

/* @media   */

@media screen and (max-width: 599px) {

	html {
		font-size: 72.9167%;
	}
	body {
		font-size: 1rem;
	}

}

@media screen and (max-width: 359px){

	html{
		font-size: 57.2917%;
	}

}

@media screen and (min-width: 360px) and (max-width: 424px) {

	html{
		font-size: 62.5%;
	}

}

@media screen and (min-width: 425px) and (max-width: 599px){

	html{
		font-size: 72.9167%;
	}

}

/* @media   */

/* ----------------------------
  common-parts
---------------------------- */

.bg {
	background: rgb(220,185,70);
	background: -moz-linear-gradient(left, rgba(220,185,70,1) 0%, rgba(240,215,100,1) 50%, rgba(220,185,70,1) 100%);
	background: -webkit-linear-gradient(left, rgba(220,185,70,1) 0%,rgba(240,215,100,1) 50%,rgba(220,185,70,1) 100%);
	background: linear-gradient(to right, rgba(220,185,70,1) 0%,rgba(240,215,100,1) 50%,rgba(220,185,70,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdab23', endColorstr='#cdab23',GradientType=1 );
}

div.entry {
	padding: 0 6.6667%;
}
div.entry .asterisk {
	font-size: 1rem;
	line-height: 1.35;
	letter-spacing: 0.05em;
	margin-top: 2.4616%;
}

/*----- .scroll（馬） -----*/

div.scroll > span {
	opacity: 0;
	position: absolute;
}
div.scroll > span.horse1 {
	left: 0;
}
div.scroll > span.horse2 {
	right: 0;
}
div.scroll.is-show > span.horse1 {
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-animation: anim-l 1s /* ease-in */ forwards;
	animation: anim-l 1s /* ease-in */ forwards;
	cubic-bezier(0.8, 0.04, 1, 1);
}
div.scroll.is-show > span.horse2 {
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-animation: anim-r 1s /* ease-in */ forwards;
	animation: anim-r 1s /* ease-in */ forwards;
	cubic-bezier(0.8, 0.04, 1, 1);
}
@-webkit-keyframes anim-l {
	100% {
		opacity: 1;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0); 
	}
}
@keyframes anim-l {
	100% {
		opacity: 1;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0); 
	}
}
@-webkit-keyframes anim-r {
	100% {
		opacity: 1;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0); 
	}
}
@keyframes anim-r {
	100% {
		opacity: 1;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0); 
	}
}

/* ------------------------------------------------
  layout
------------------------------------------------ */

section {
	padding: 73.3334% 0 16%;
	position: relative;
}

/* ------------------------------------------------
  header
------------------------------------------------ */

header {
	width: 100%;
	box-sizing: border-box;
	padding: 4% 3.4667% 0 3.7334%;
	position: absolute;
	top: 0;
	left: 0;
}
header .left {
	width: 16.6667%;
}
header .left > ul li {
	width: 46.5518%;
	float: left;
}
header .left > ul li + li {
	margin-left: 6.8966%;
}
header .right {
	width: 70.546%;
}

/* ------------------------------------------------
  #kv
------------------------------------------------ */

#kv .intro {
	padding: 0 4.1334% 0 2.5334%;
	margin-top: -8%;
}
#kv .intro .left {
	width: 34.8572%;
}
#kv .intro .right {
	width: 62%;
	margin-top: 6.2858%;
}
#kv .intro .right .entry {
	margin-top: 6.9125%;
}
#kv nav {
	width: 100%;
	box-sizing: border-box;
	padding: 0 4%;
	margin-top: 5.3334%;
}
#kv nav > ul li + li {
	margin-top: 1.4493%;
}

/* ------------------------------------------------
  about
------------------------------------------------ */

#about div.scroll > span.horse1 {
	width: 48.5334%;
	top: 2.7844%;
}
#about div.scroll > span.horse2 {
	width: 47.4667%;
	top: 2.2512%;
}
#about .lead {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.75;
	text-align: center;
	letter-spacing: 0.05em;
	margin-top: 4.2667%;
}
#about .prize {
	margin-top: 10.6667%;
}
#about .prize li {
	width: 50%;
	float: left;
}
#about .prize li:nth-child(n + 3) {
	margin-top: 13.3334%;
}
#about .entry {
	margin-top: 13.3334%;
}

/* ------------------------------------------------
  present
------------------------------------------------ */

#present div.scroll > span.horse1 {
	width: 47.8667%;
	top: 0.9473%;
}
#present div.scroll > span.horse2 {
	width: 47.6%;
	top: 1.0246%;
}
#present .prize {
	margin-top: 17.3334%;
}
#present .prize li + li {
	margin-top: 16%;
}
#present .prize li .race {
	padding: 0 9.3334%;
	margin-top: 4.2667%;
}
#present .prize li .race .box {
	font-size: 1.1rem;
	font-weight: bold;
	border: 1px solid #000;
	line-height: 1;
	text-align: center;
	letter-spacing: 0.15em;
	padding: 1.6394% 0 1.3115%;
}
#present .prize li .race .note {
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.35;
	letter-spacing: 0.05em;
	margin-top: 1.6394%;
}
#present .prize li .modal {
	width: 54.1334%;
	margin: 4.8% auto 0;
}
#present .entry {
	margin-top: 9.3334%;
}

/* ------------------------------------------------
  entry
------------------------------------------------ */

#entry div.scroll > span.horse1 {
	width: 46.5334%;
	top: 1.9055%;
}
#entry div.scroll > span.horse2 {
	width: 48.5334%;
	top: 2.0769%;
}
#entry h2 {
	margin-bottom: 12%;
}
#entry h3 {
	background-color: #000;
	padding: 3.077% 0 3.3847%;
}
#entry .method {
	text-align: center;
	padding: 0 6.6667%;
}
#entry .method h3 {
	margin-bottom: 9.2308%;
}
#entry .method > ol li {
	position: relative;
}
#entry .method > ol li + li {
	padding-top: 9.2308%;
	margin-top: 9.2308%;
}
#entry .method > ol li + li::before {
	content: '';
	width: 100%;
	height: 0;
	background-image: url(../img/entry/line.png);
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	padding-top: 6.7693%;
	position: absolute;
	top: -1.1rem;
	left: 0;
}
#entry .method > ol li .step {
	margin-bottom: 4.6154%;
}
#entry .method > ol li .note {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.65;
	letter-spacing: 0.025em;
}
#entry .method > ol li .image.club {
	margin-top: 1.5385%;
	display: block;
}
#entry .method > ol li .image.link {
	width: 69.3847%;
	margin: 2.4616% auto 0;
	display: block;
}
#entry .procedure {
	padding: 0 6.6667%;
	margin-top: 5.8667%;
}
#entry .procedure h3 {
	margin-bottom: 2.3077%;
}
#entry .procedure .column {
	background-color: #eddb8e;
	border: 3px solid #8e6c11;
	padding: 6.1539%;
}
#entry .procedure .column > ol li + li {
	border-top: 1px solid #000;
	padding-top: 8.9606%;
	margin-top: 8.6022%;
}
#entry .procedure .column > ol li .note {
	font-size: 1.4rem;
	line-height: 1.35;
	letter-spacing: 0.05em;
	padding-left: 11.4696%;
	margin-top: 2.8674%;
}
#entry .procedure .column a {
	color: #e60014;
	text-decoration: underline;
}
#entry .procedure .column > ol li .image {
	margin-top: 5.3764%;
}
#entry .procedure .column > ol li .asterisk {
	font-size: 1.1rem;
	line-height: 1.25;
	margin-top: 2.8674%;
}
#entry .procedure .column .link {
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.45;
	text-align: left;
	padding-left: 18.2796%;
	margin-top: 7.1685%;
	position: relative;
}
#entry .procedure .column .link a::before {
	content: '';
	width: 6.0932%;
	height: 0;
	background-image: url(../img/entry/arrow.png);
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	vertical-align: top;
	padding-top: 6.0932%;
	margin-top: -3.0466%;
	position: absolute;
	left: 10.7527%;
	top: 50%;
}
#entry .entry {
	margin-top: 9.2308%;
}

/* ------------------------------------------------
  qa
------------------------------------------------ */

#qa {
	padding-bottom: 62.6667%;
}
#qa div.scroll.tg1 > span.horse1 {
	width: 45.3334%;
	top: 1.7579%;
}
#qa div.scroll.tg1 > span.horse2 {
	width: 50.2667%;
	top: 1.875%;
}
#qa div.scroll.tg2 > span.horse2 {
	width: 53.7334%;
	bottom: 0.7032%;
	right: 13.8667%;
}
#qa .list {
	padding: 0 6.6667%;
	margin-top: 10.6667%;
}
#qa .list > li + li {
	border-top: 1px solid;
	padding-top: 6.1539%;
	margin-top: 7.6924%;
}
#qa .list > li:last-child {
	border-bottom: 1px solid;
	padding-bottom: 6.1539%;
}
#qa .list > li > div {
	text-align: left;
	line-height: 1.35;
	padding-left: 9.2308%;
	position: relative;
}
#qa .list > li > div::before,
#qa .list > li > div::after {
	content: '';
	height: 0;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	position: absolute;
}
#qa .list > li > div::before {
	width: 7.6924%;
	padding-top: 7.6924%;
	left: 0;
	top: 0;
}
#qa .list > li .question {
	font-size: 1.8rem;
	font-weight: bold;
	padding-right: 10.7693%;
}
#qa .list > li .question::before {
	background-image: url(../img/qa/question.png);
}
#qa .list > li .question::after {
	width: 6.7693%;
	background-image: url(../img/qa/arrow-down.png);
	padding-top: 6.7693%;
	top: .3rem;
	right: 0;
}
#qa .list > li .question.open::after {
	background-image: url(../img/qa/arrow-up.png);
}
#qa .list > li .answer {
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	margin-top: 6.1539%;
	display: none;
}
#qa .list > li .answer::before {
	background-image: url(../img/qa/answer.png);
	top: 0;
}
#qa .list > li .answer > a {
	color: #e60014;
	text-decoration: underline;
}
#qa .list > li .answer .sm {
	font-weight: 500;
	line-height: 1.5;
	margin-top: .5rem;
	display: inherit;
}
#qa .list > li .answer .mb {
	margin-bottom: .8rem;
}
#qa .bnr {
	width: 65.0667%;
	margin: 12% auto 0;
}
#qa .bnr + .bnr {
	width: 86.6667%;
	margin-top: 5.3334%;
}
#qa .entry {
	margin-top: 10.6667%;
}

/* ------------------------------------------------
  footer
------------------------------------------------ */

footer {
	background-color: #fff;
	letter-spacing: -.4em;
	text-align: center;
	padding: 1.4667% 0 1.3334%;
}
footer > p {
	vertical-align: middle;
	display: inline-block;
}
footer > p.logo {
	width: 14%;
}
footer > p.copy {
	font-size: 1rem;
	letter-spacing: normal;
	line-height: 1;
	margin-left: 9.3334%;
}

/* ------------------------------------------------
  btn-top
------------------------------------------------ */

#btn-top {
	width: 8%;
	opacity: 0;
	position: fixed;
	right: 2.6667%;
	bottom: 0;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
#btn-top.show {
	opacity: 1;
	bottom: 4.4656%;
}