/* --------------------------------------------------

	JRAアプリ 紹介ページ（主な機能）
	//幅375pxベース//

-------------------------------------------------- */

/* ------------------------------------------
　各セクション共通部分
------------------------------------------ */

section {
	padding: 0px;
}

#main .contents {
	position: relative;
}

h1,h2 {
	color: #1e4b48;
	text-align: left;
	font-family: 'Noto Sans JP', sans-serif;
}

section h2 {
	font-size: 2.8rem;
	font-weight: 900;

	margin-bottom: 20px;
}

section p {
	font-size: 1.5rem;
	font-weight: 500;
}

.bg_inner {
	background-repeat: no-repeat;
    background-position: top center;
	background-size: cover;
}

.note_list {
	padding-inline: 20px;

	.list_icon {
		white-space: nowrap;
		padding-right: 4px;
	}
}

.note_list p{
	font-size: 1.3rem;
	font-weight: normal;
}

/* ------------------------------------------
　メインビジュアル
------------------------------------------ */

section.main_vis {
	margin: 0;
	padding: 0;
}

.main_vis .bg_inner {
	background-image: url(../img/bg_mv.jpg);
    
	padding: 20px;
	padding-top: 30px;
	padding-bottom: 0;
}

.marker-bold {
	background: linear-gradient(transparent 70%, #fcee7c 70%);
  }

.main_vis h1 {
	margin-bottom: 22px;
	text-align: center;
}

.main_vis h1 .inner {
	display: flex;
    justify-content: center;
	justify-content: space-between;
	align-items: center;
}

.main_vis h1 .inner .img img {
	width: 68%;
}

.main_vis h1 .inner .txt {
	padding-left: 10px;
	font-size: 2.4rem;
	font-weight: 900;
	letter-spacing: 0.12em;
}

.main_vis h1 .inner .txt > span {
	padding-left: 4px;
	/* letter-spacing: -0.06em; */
}

.main_vis h2 {
	font-size: 2.8rem;
	font-weight: 900;
	margin-bottom: 10px;
	letter-spacing: -0.02em;
}

.faq_link {
	position: relative;
	z-index: 9;
}

.faq_link a {
	display: inline-block;
	padding: 4px 0;
	font-size: 1.3rem;
	color: #555;
}

.faq_link a > i { margin-left: 4px;}

.main_vis .pic_mobile {
	margin-top: -30px;
	padding-left: 22%;
	padding-bottom: 16px;
}

.main_vis .pic_mobile img {
	/* max-width: 260px; */
	max-width: 98%;

	-webkit-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
	-moz-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
	-ms-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
	filter:drop-shadow(5px 5px 5px rgba(0, 0, 0.6, 0.9));
}


/* --------　appダウンロードボタン1　---------- */

.app_dl_btn_line {
	min-height: 132px;
	background-color: #000;
}

.app_dl_btn {
	padding: 20px 0;
    width: 100%;
	background-color: #000;

	animation-name:fadeInAnime;
	animation-duration: .6s;
	animation-fill-mode:forwards;
	opacity:0;
	}

.app_dl_btn .content ul {
	display: flex;
    justify-content: center;
	align-items: center;
}

.app_dl_btn .content ul li {
	padding-right: 12px;
}

.app_dl_btn .content ul li a {
	display: block;
}

.sp .app_dl_btn .content ul li.android,
.app_dl_btn .content ul li:last-child {
	padding-right: 0;
}

.app_dl_btn .content ul li.ios img {
	max-width: 154px;
}

.app_dl_btn .content ul li.android img {
	max-width: 190px;
}

/*　PC表示用QR部分　*/
.app_dl_btn .content ul li.qr img {
	max-width: 72px;
}

.sp .app_dl_btn .content ul li.qr { display: none; }

.app_dl_btn .content p {
	/* display: none; */
	text-align: center;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 700;
	/* letter-spacing: 0.1em; */
	/* padding-top: 1em; */
	padding-bottom: 1em;
	line-height: 1.2;
}

/* --　appダウンロードボタン（固定）-- */

.app_dl_btn.fixed {
	display: none;
	position: fixed;
	max-width: 480px;
	/* left: 0; */
    bottom: 0;
    z-index: 10;

	padding: 12px;

	animation-name:fadeInAnime;
	animation-duration: .6s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeInAnime{
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
}

.app_dl_btn.fixed .content ul li.ios img {
	max-width: 130px;
}

.app_dl_btn.fixed .content ul li.android img {
	max-width: 162px;
}

.app_dl_btn.fixed .content ul li.qr img {
	max-width: 68px;
}

/*　キャンペーンバナー　*/

.cp_bnr a {
	display: block;
}

.cp_bnr img {
	width: 100%;
}


/* ------------------------------------------
　出馬表
------------------------------------------ */

section .txt_unit {
	padding: 20px;
	padding-top: 56px;
}

.race_list .bg_inner {
	background-image: url(../img/bg_race_list.jpg);
    background-size: contain;

	margin-top: 30px;
	padding-top: 30px;
}

.race_list .pic_unit {
	position: relative;
}

.race_list .pop_up {
	position: absolute;
	top: -84px;
	/* right: 6px; */
	right: 1%;
}

.race_list .pop_up img {
	max-width: 148px;
}

.race_list .pic_mobile {
	text-align: center;
}

.race_list .pic_mobile img {
	max-width: 84%;
}


/* ------------------------------------------
　ネット投票
------------------------------------------ */

.pat .bg_inner {
	background-image: url(../img/bg_pat.jpg);
}

.pat .pic_unit {
	position: relative;
}

.pat .pop_up {
	position: absolute;
	top: 110px;
	/* left: 20px; */
	left: 5%;
}

.pat .pop_up img {
	max-width: 148px;
}

.pat .pic_mobile {
	text-align: center;
	padding-top: 0px;
}

.pat .pic_mobile img {
	max-width: 85%;
}


/* ------------------------------------------
　レースライブ
------------------------------------------ */

.race_live .txt_unit {
	padding-top: 40px;
}

.race_live .bg_inner {
	background-image: url(../img/bg_race_live.jpg);
	background-position: top 36px center;

	padding-bottom: 6px;
}

.race_live .pic_unit {
	position: relative;
}

.race_live .pop_up {
	position: absolute;
	top: 20px;
	/* right: 30px; */
	right: 8%;
}

.race_live .pop_up img {
	max-width: 148px;
}

.race_live .pic_mobile {
	text-align: center;
	padding-top: 0px;
}

.race_live .pic_mobile img {
	max-width: 96%;
}


/* ------------------------------------------
　推しウマ推し騎手機能
------------------------------------------ */
.fav .pic_unit {
	position: relative;
}

.fav .bg_inner {
	background-image: url(../img/bg_fav.png);
	/* background-color:rgba(255, 255, 255, 0.5);
	background-blend-mode:lighten; */
	background-position: top 36px center;
	background-size: contain;

	margin-top: 6px;
}

.fav .pop_up {
	position: absolute;
	top: 10px;
	right: 32%;
}

.fav .pop_up img {
	max-width: 148px;
}

.fav .pic_mobile {
	text-align: center;
}

.fav .pic_mobile img {
	max-width: 94%;
}

.fav .item_pop {
	position: absolute;
}

.fav .item_pop img {
	max-width: 130px;
}

.fav .item_pop.first {
	top: 340px;
	right: 0%;
}

.fav .item_pop.second {
	bottom: 60px;
	left: 12%;
}


/* ------------------------------------------
　馬券メモリアル
------------------------------------------ */

.memorial .bg_inner {
	background-image: url(../img/bg_memorial.jpg);
	background-position: top 36px center;
	background-size: contain;

	margin-top: 4px;
}

.memorial .pop_up {
	position: absolute;
	top: -16px;
	right: 6%;
}

.memorial .pop_up img {
	max-width: 148px;
}

.memorial .pic_mobile {
	text-align: center;
}

.memorial .memorial1 .pic_mobile img {
	max-width: 94%;
}

.memorial .memorial2 .pic_mobile img {
	max-width: 46%;
}

.memorial .memorial2 .item_pop {
	position: absolute;
}

.memorial .memorial2 .item_pop img {
	max-width: 140px;
}

.memorial .memorial2 .item_pop.first {
	top: 20px;
	right: 4%;
}

.memorial .memorial2 .item_pop.second {
	top: -5%;
	left: 6%;
}

.memorial .memorial2 .item_pop.second img {
	max-width: 120px;
}

.memorial .memorial2 .item_pop.third {
	bottom: 40px;
	right: 10%;
}

.memorial .memorial2 .item_pop.third img {
	max-width: 100px;
}


/* ------------------------------------------
　Push通知
------------------------------------------ */

section.push {
	padding-bottom: 136px;
}

.push .txt_unit {
    padding-top: 40px;
}

.push .txt_unit ul {
	margin-bottom: 20px;
}

.push .txt_unit ul li {
	display: flex;
	align-items: center;

	padding: 0.6em 1em;
	margin: 0.6em 0.2em;

	font-size: 1.4rem;
    font-weight: 500;
	line-height: 1.6;

	background-color: #dfecd6;
	background-color: #e2f0a0;
	background-color: #fae7a6;
	background-color: #fdf6cc;
	background-color: #fee1fe;
	/* background-color: #fad265;
	background-color: #deba59;
	background-color: rgba(251,237,86,0.8);
	background-color: #f0fdfa;
	background-color: #fce0ab; */
	/* border: 1px solid #68a699; */
	/* border: 1px solid #f0ca6e; */
	border: 1px solid #555;
	/* border: 1px solid #faf0b6; */
	/* border: 1px solid #f2cbf2; */
    border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	color: #555;
}

.push .txt_unit ul li i {
	font-size: 2.4rem;
	color: #427e75;
	/* color: #cb4e01; */

	/* text-indent: -1.2rem; */
    margin-right: 1rem;
}

.push .txt_unit ul li span strong {
	font-weight: 700;
}

.push .pic_unit {
	position: relative;
}

.push .pop_up {
	position: absolute;
	top: 28px;
	right: 3%;
}

.push .pop_up img {
	max-width: 148px;
}

.push .pic_mobile {
	text-align: center;
	padding-top: 8px;
}

.push .pic_mobile img {
	max-width: 67%;
}


/* ------------------------------------------
　アニメーション関連
------------------------------------------ */

/* フェードイン */
.fadein {
	opacity : 0;
	transform : translate(0, 40px);
	transition : all 0.6s;
  }

.fadein.mv {
	transform : translate(0, 12px);
}

.fadein.item_push {
	transform : translate(0, 16px);
}
   
.fadein.active{
	opacity : 1;
	transform : translate(0, 0);
}

/* Push通知の情報 */
.fadein.active.item_pop.second { transition-delay: 0.2s; }
.fadein.active.item_pop.third { transition-delay: 0.4s; }


/* 拡大 */
.zoomIn{
	opacity : 0;
}

.zoomIn.active{
	animation-name:zoomInAnime;
	animation-delay: 0.6s;
	animation-duration:0.2s;
	animation-fill-mode:forwards;
}

/* 馬券メモリアルのポイント3つ */
.zoomIn.active.item_pop.first{ animation-delay: 0.6s; }
.zoomIn.active.item_pop.second{ animation-delay: 0.8s; }
.zoomIn.active.item_pop.third{ animation-delay: 1s; }
 

@keyframes zoomInAnime{
	from {
		opacity : 0;
	transform: scale(0.0);
	}

	to {
		opacity : 1;
		transform: scale(1);
	}
}


/* ------------------------------------------
　メディアクエリ
------------------------------------------ */

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

	.main_vis h1 .inner .img img { width: 70%;}
	
	.main_vis .pic_mobile { padding-left: 14%; }

	.main_vis .pic_mobile img { max-width: 94%; }

	.app_dl_btn .content p {
		font-size: 1.4rem;
	}

	.app_dl_btn .content ul li {
		height: auto;
	}

	.app_dl_btn .content ul li.ios img,
	.app_dl_btn.fixed .content ul li.ios img {
		max-width: 120px;
	}

	.app_dl_btn {
		padding: 15px 0;
	}

	.app_dl_btn .content ul li.android img,
	.app_dl_btn.fixed .content ul li.android img {
		max-width: 149px;
	}

	.pat .pic_mobile img,
	.race_live .pic_mobile img { max-width: 83%; }

	.race_live .pop_up {
		top: 0;
		right: 5%;
	}

	.memorial .memorial2 .item_pop.second { left: 0;}
	.memorial .memorial2 .item_pop.third { bottom: 20px; right: 6%;}

	.memorial .pop_up,
	.memorial .memorial2 .item_pop.first,
	.push .pop_up { right: 0; }

}

@media screen and ( min-width : 390px ) { /*---------390px---------*/

	
	.main_vis h1 .inner .txt { letter-spacing: 0.14em; }

	.main_vis h2 {
		font-size: 2.9rem;
		letter-spacing: normal;
	}

	.main_vis .pic_mobile { padding-left: 26%;}

	.race_list .pop_up { right: 3%; }

	.pat .pop_up { top: 120px; }

	.push .pic_mobile img { max-width: 62%; }
	
}

@media screen and ( min-width : 414px ) { /*---------414px---------*/

	section .txt_unit,
	.main_vis .bg_inner,
	.note_list {
		padding-left: 28px;
		padding-right: 28px;
	}

	.main_vis h1 .inner .txt {
		letter-spacing: 0.16em;
	}

	.main_vis .pic_mobile { padding-left: 31%; }
	.main_vis .pic_mobile img { max-width: 100%; }

	.race_list .pop_up { right: 6%; }

	.pat .pop_up { top: 130px; left: 10%; }

	.race_live .pop_up { right: 12%; }

	.memorial .memorial2 .item_pop.first { right: 8%;}
	.memorial .memorial2 .item_pop.second { top: -5%; left: 6%;}
	.memorial .memorial2 .item_pop.third { bottom: 50px; right: 12%;}

	.push .pop_up { right: 5%; }

	.app_dl_btn .content p { font-size: 1.8rem; }

}


@media screen and ( min-width : 428px ) { /*---------428px---------*/

	section h2 { font-size: 3rem;}

	.main_vis h1 .inner .txt {
		font-size: 2.6rem;
	}

	.main_vis h2 { font-size: 3.1rem; }

	.main_vis .pic_mobile { padding-left: 34%; }
	.main_vis .pic_mobile img { max-width: 102%; }

	.race_list .pop_up { right: 8%; }
	
	.pat .bg_inner { padding-bottom: 36px; }
	.pat .pop_up { top: 140px; }

	.race_live .txt_unit { padding-top: 20px; }
	.race_live .pop_up { right: 13%; }

	.memorial .pop_up { right: 10%; }

	.push .pic_mobile img { max-width: 58%; }
	.push .pop_up { right: 6%;  }


	.fav .pop_up {
		right: 36%;
	}
	
	.fav .item_pop.first {
		top: 360px;
		right: 4%;
	}
	
	.fav .item_pop.second {
		bottom: 70px;
		left: 16%;
	}

}
@media screen and ( min-width : 450px ) { /*---------450px---------*/
	.fav .item_pop.first {
		top: 380px;

	}
}

@media screen and ( min-width : 480px ) { /*---------480px---------*/

	section h2 { font-size: 3.2rem; }

	section .txt_unit,
	.main_vis .bg_inner,
	.note_list {
		padding-left: 32px;
		padding-right: 32px;
	}

	.main_vis h1 .inner .img img { width: 66%; }

	.main_vis h1 .inner .txt {
		padding-left: 14px;
		font-size: 2.8rem;
		/* letter-spacing: 0.17em; */
	}

	.main_vis h1 .inner .txt > span {
		padding-left: 8px;
		letter-spacing: 0;
	}

	.main_vis h2 { font-size: 3.6rem; letter-spacing: -0.04em; }

	.main_vis .pic_mobile { padding-left: 36%; }
	
	.pat .pop_up { top: 150px; left: 14%; }

	.race_live .txt_unit { padding-top: 20px; }
	.race_live .pic_mobile img { max-width: 79%; }
	.race_live .pop_up { top: 30px; right: 16%; }

	.memorial .pop_up { top: 0; right: 14%; }
	.memorial .memorial2 .item_pop.first { right: 10%;}
	.memorial .memorial2 .item_pop.second { left: 11%;}
	.memorial .memorial2 .item_pop.third { bottom: 52px; right: 17%;}

	.push .pic_mobile img { max-width: 52%; }
	.push .pop_up { right: 9%; }

	.fav .pop_up {
		top: 20px;
		right: 40%;
	}

	.fav .item_pop img {
		max-width: 136px;
	}
	
	.fav .item_pop.first {
		top: 390px;
		right: 4%;
	}

	
	.fav .item_pop.second {
		bottom: 72px;
		left: 16%;
	}

}