@charset "UTF-8";

/*==============================================
	yoso_service_guide.css
	厳選予想 ウマい馬券とは？
	body#PremiumYoso .ServiceGuide
==============================================*/

/* キャンペーン */
/*.w_g1_campain {
	margin-top: -74px;
	padding-bottom: 52px;
}
.w_g1_campain img {
	display: block;
	margin: 0 auto;
	position: relative;
	vertical-align: bottom;
}*/
/* base_contents */
.YosoInfoHeader {
background: url("../img/yoso_guide/yoso_guide_bg.png") no-repeat center;
background-color: #fff;
text-align: center;
padding: 105px 0 0;
height: 489px;
}
.YosoInfoHeader .frame{
width: 742px;
margin: auto;
}
.YosoInfoHeader h1 {
display: inline-block;
float: right;
}
.YosoContainer {
background: #fff;
overflow: hidden;
}
.YosoInfoContents {
position: relative;
}
/* 厳選予想こだわり3ポイント */
.GensenYosoPoint {
text-align: center;
position: relative;
}
.GensenYosoPoint .YosoTitle {
margin-bottom: 28px;
padding-top: 50px;
}
.GensenYosoPoint .YosoTxt {
color: #888;
font-size: 128.5%;
line-height: 1.5;
letter-spacing: 1px;
text-align: center;
}
.GensenYosoPoint .YosoTxt span{
color: #f3536c;
}

.GensenYosoPoint .YosoBtnArea {
margin: 16px 0 0;
width: 262px;
}
.YosoLinkBtn:hover {
text-decoration: none;
background: rgba(210, 209, 199, .3);
}

/*01*/
.GensenYosoPoint.GensenPoint1 {
padding: 15px 0 345px;
background: #fff;
}
.GensenYosoPoint.GensenPoint1 .IntroYosoka{
width: 920px;
margin: auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-justify-content:space-between;
-moz-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
}
.GensenYosoPoint.GensenPoint1 .IntroYosoka > div{
display: inline-block;
}
.GensenYosoPoint.GensenPoint1 .IntroYosoka .title{
padding-bottom: 44px;
}
.GensenYosoPoint.GensenPoint1 .YosoImage{
position: relative;
width: 371px;
margin: auto;
padding: 35px 0;
}
.GensenYosoPoint.GensenPoint1 .YosoImage .map_abroad{
position: absolute;
bottom: 70px;
right: -120px;
}
/*02*/
.GensenYosoPoint.GensenPoint2 {
z-index: 1;
padding: 35px 0 275px;
background: #f8f8f8;
}
.GensenYosoPoint.GensenPoint2:before{
content: "";
background: #f8f8f8;
position: absolute;
top: 0;
left: 0;
width: 130%;
height: 500px;
margin: 3% -10% 0;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
z-index: -1;
}
.GensenYosoPoint.GensenPoint2 .GensenYosoInner {
margin-top: -270px;
}
.GensenYosoPoint.GensenPoint2 .YosokaBox{
display: inline-block;
}
.GensenYosoPoint.GensenPoint2 .YosokaBox .text_02{
color: #888;
padding-top: 12px;
line-height: 1.8;
}
.GensenYosoPoint.GensenPoint2 .YosoImage{
padding: 36px 0px 26px;
}
.GensenYosoPoint.GensenPoint2 .YosoImage .Note {
position: absolute;
left: 180px;
bottom: 8px;
}
.GensenYosoPoint.GensenPoint2 .YosoImage ul{
width: 920px;
margin: auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-justify-content:space-between;
-moz-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
}
.GensenYosoPoint.GensenPoint2 .MovieImage{
padding:23px 0;
}
.GensenYosoPoint.GensenPoint2 .MovieImage .img_01{
width: 552px;
margin: 18px auto;
}
.GensenYosoPoint.GensenPoint2 .MovieImage .img_01 a{
outline: none;
}
/*03*/
.GensenYosoPoint.GensenPoint3 {
padding: 80px 0 115px;
z-index: 1;
background: #fff;
}
.GensenYosoPoint.GensenPoint3:before{
content: "";
background: #fff;
position: absolute;
top: 0;
left: 0;
width: 130%;
height: 360px;
margin: -18% -10% 0;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
z-index: -1;
}
.GensenYosoPoint.GensenPoint3 .GensenYosoInner{
margin-top: -303px;
}
.GensenYosoPoint.GensenPoint3 .YosoImage{
padding: 30px 0;
}
.GensenYosoPoint.GensenPoint3 .RankingImage{
background: #f8f8f8;
}

.GensenYosoPoint.GensenPoint3 .RankingImage .frame{
position: relative;
width: 866px;
margin: auto;
padding: 25px 0 20px 245px;
background: #f8f8f8;
}
.GensenYosoPoint.GensenPoint3 .RankingImage .img_01{
position: absolute;
left: 40px;
top: -60px;
}
.GensenYosoPoint.GensenPoint3 .RankingImage .text_01{
padding: 0 0 20px 10px;
text-align: left;
}
.GensenYosoPoint.GensenPoint3 .RankingImage .btn{
display: inline-block;
margin-left: -3px;
}
.GensenYosoPoint.GensenPoint3 .RankingImage .btn + .btn{
margin-left:20px;
}
.GensenYosoPoint.GensenPoint3 .CampaignImage{
width: 850px;
margin: 42px auto 0;
}
.GensenYosoPoint.GensenPoint3 .CampaignImage .text_01{
float: left;
width: 505px;
margin-top: 5px;
}

.GensenYosoPoint .GensenYosoInner .NotesOnUse .attention{
	margin:106px auto 36px;
	padding: 25px 40px;
	width: 660px;
	height: 120px;
	border:1px solid #e5e5e5;
}
.GensenYosoPoint .GensenYosoInner .NotesOnUse .attention h3{
	display:block;
	width: 165px;
	margin: 0 auto 16px;
}
.GensenYosoPoint .GensenYosoInner .NotesOnUse .attention p{
	text-align: left;
	color: #888888;
	line-height: 1.5;
}
.GensenYosoPoint .GensenYosoInner .NotesOnUse > p{
	font-size: 128.57%;
	color: #888888;
	line-height: 1.5;
}
.GensenYosoPoint .GensenYosoInner .NotesOnUse > p span{
	color:#e9526a; 
}
/* うまい馬券の使い方 Pont*/
.YosoInfoContents.Point{
background: #fff;
padding: 75px 0 300px;
}
.GensenYosoHowTo_Wrap {
	padding-bottom: 38px;
	text-align: center;
}
.YosoInfoContents.Point .YosoTitle{
padding-top: 40px;
}
.YosoHowTo_Header {
	padding-top: 95px;
	height: 280px;
	text-align: center;
	background: url("../img/yoso_guide/yoso_guide_howtouse_bg.png") no-repeat center,-webkit-gradient(linear, left top, left bottom, from(#f77d73), to(#f14469));
	background: url("../img/yoso_guide/yoso_guide_howtouse_bg.png") no-repeat center,-webkit-linear-gradient(top, #f77d73 0%, #f14469 100%);
	background: url("../img/yoso_guide/yoso_guide_howtouse_bg.png") no-repeat center,linear-gradient( to bottom, #f77d73 0%, #f14469 100%);
}
.YosoHowTo_Notice {
	color: #888;
	font-size: 129%;
	margin: 29px auto;
}
.YosoHowTo_Notice a{
color: #888;
text-decoration: underline;
}
.YosoHowTo_Notice a:hover{
text-decoration: none;
}
.YosoHowTo_PointBtn{
padding-top: 20px;
margin-bottom: 40px;
}
.YosoHowTo_Campaign{
padding: 20px 30px;
width: 700px;
margin: auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content:space-between;
-moz-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
border:1px solid #e5e5e5;
}
.GensenYosoHowTo_Wrap .p-btm{
padding-top: 20px;
}
.GensenYosoHowTo_Wrap .p-btm li{
color: #888;
line-height: 1.5;
}
/* うまい馬券の使い方 Check*/
.YosoInfoContents.Check{
background:#f8f8f8;
z-index: 1;
padding: 35px 0 195px;
}
.YosoInfoContents.Check:before{
 content: "";
background: #f8f8f8;
position: absolute;
top: 0;
left: 0;
width: 130%;
height: 360px;
margin: 4% -10% 0;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
z-index: -1;
}
.YosoInfoContents.Check .Inner{
margin-top: -260px;
}
.YosoInfoContents.Check .YosoTitle{
padding-top: 40px;
}
.GensenYosoHowTo_Wrap .YosoHowTo_Choose_List{
padding: 8px 0 20px;
width: 920px;
margin: auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-justify-content:space-between;
-moz-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
}
.GensenYosoHowTo_Wrap .YosoHowTo_Choose_List .Wrap{
width: 440px;
}
.GensenYosoHowTo_Wrap .YosoHowTo_Choose_List li:nth-child(2) .Wrap{
margin: 150px 0 0 20px;
}
.GensenYosoHowTo_Wrap .YosoHowTo_Choose_List .title{
width: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content:space-between;
-moz-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
}
.GensenYosoHowTo_Wrap .YosoHowTo_Choose_List .img_01{
margin: -40px 0 10px 15px;
}
.GensenYosoHowTo_Wrap .YosoHowTo_RaceBtn + .YosoHowTo_RaceBtn {
margin-top: 5px;
}
/*予想内容は！？*/
.YosoHowTo_YosoContent{
position: relative;
width: 920px;
margin: -20px auto 0;
}
.YosoHowTo_YosoContent .title{
position: absolute;
top: -25px;
left: 117px;
}
.YosoHowTo_YosoContent .img_01{
background: #fff;
border-radius: 50%;
width: 472px;
height: 472px;
padding: 27px 0 0 5px;
}
.YosoHowTo_YosoContent [class^="PickUpText"]{
position: absolute;
right: 70px;
width: 275px;
text-align: left;
}
.YosoHowTo_YosoContent [class^="PickUpText"]:before{
position: absolute;
content: "";
width: 98%;
height: 7px;
bottom: 8px;
left: -365px;
background: url(../img/yoso_guide/yoso_guide_check_yoso_dot.png)repeat-x;
}
.YosoHowTo_YosoContent .PickUpText01{
top: 80px;
}
.YosoHowTo_YosoContent .PickUpText02{
top: 190px;
}
.YosoHowTo_YosoContent .PickUpText03{
bottom: 139px;
}
.YosoHowTo_YosoContent .PickUpText01:before,.YosoHowTo_YosoContent .PickUpText03:before{
width: 347px;
}
.YosoHowTo_YosoContent .PickUpText02:before{
width: 247px;
left: -265px;
}
.YosoHowTo_YosoContent .ring{
background:rgba(233, 82, 106, 0.3);
position:absolute;
height:10px;
width:10px;
-webkit-border-radius:70px;-moz-border-radius:70px;-ms-border-radius:70px;-o-border-radius:70px;border-radius:70px;z-index: 1;
-webkit-animation: wave 1s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation: wave 1s ease-out;
-moz-animation-iteration-count: infinite;
-ms-animation: wave 1s ease-out;
-ms-animation-iteration-count: infinite;
-o-animation: wave 1s ease-out;
-o-animation-iteration-count: infinite;
animation: wave 1s ease-out;
animation-iteration-count: infinite;
}
@-webkit-keyframes wave {
	0% {-webkit-transform: scale(1, 1); }
	50% {opacity: 1;}
	100% {-webkit-transform: scale(7, 7); opacity: 0.0;}
}
@-moz-keyframes wave {
	0% {-moz-transform: scale(1, 1); }
	50% {opacity: 1;}
	100% {-moz-transform:scale(7, 7); opacity: 0.0;}
}
@-o-keyframes wave {
	0% {-o-transform: scale(1, 1); }
	50% {opacity: 1;}
	100% {-o-transform:scale(7, 7); opacity: 0.0;}
}
@keyframes wave {
	0% {transform: scale(1, 1); }
	50% {opacity: 1;}
	100% {transform:scale(7, 7); opacity: 0.0;}
}
.YosoHowTo_YosoContent .ring.ring01{top: 85px;left: 148px;}
.YosoHowTo_YosoContent .ring.ring02{top: 194px; left: 247px;}
.YosoHowTo_YosoContent .ring.ring03{top: 318px;left: 148px;}

/*プレミアムサービスのご登録はこちらから*/
.YosoRegistBtn_Area{
position: relative;
background: #fff;
text-align: center;
padding: 0 0 45px;
z-index: 1;
}
.YosoRegistBtn_Area:before{
content: "";
background: #fff;
position: absolute;
top: 0;
left: 0;
width: 130%;
height: 360px;
margin: -23% -10% 0;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
z-index: -1;
}
.YosoRegistBtn_Area .text01{
padding: 0 0 23px;
}
/* よくあるご質問 */
/*.GensenYosoFaq_Wrap {
	border-top: 1px dashed #333;
	padding: 34px 0 40px;
}
.PointFaq_Title {
	font-weight: bold;
	text-align: center;
	background: #e5e4dd;
	padding: 15px 0;
}
.PointFaqList {
	text-align: left;
}
.PointFaqList ul {
	border: 3px solid #e5e4dd;
	border-top: 0 none;
	border-bottom: 2px solid #e5e4dd;
}
.PointFaqList ul li {
	border-bottom: 1px solid #e5e4dd;
	background: #fff;
	font-size: 114.5%;
	cursor: pointer;
}
.PointFaqList ul li:hover {
	background: #F9F9F9;
}
.PointFaqList ul li dl {
	padding: 16px 28px;
}
.PointFaqList ul li dl dt,
.PointFaqList ul li dl dd {
	position: relative;
	padding-left: 1.5em;
	line-height: 1.6;
}
.PointFaqList ul li dl dt {
	padding-right: 36px;
}
.PointFaqList ul li dl dd {
	margin-top: 14px;
	display: none;
	font-weight: bold;
}
.PointFaqList ul li dl dt:before {
	content: "Q.";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	font-weight: bold;
	color: #e95e5e;
}
.PointFaqList ul li dl dd:before {
	content: "A.";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	font-weight: bold;
	color: #84b252;
}
.PointFaqList ul li dl.QuestOpen {
	background: #f2f9e9;
}
.PointFaqList ul li dl dt:after {
	content: " ";
	display: block;
	width: 26px;
	height: 26px;
	position: absolute;
	right: 0;
	top: 0;
	border-radius: 2px;
	background-color: #e5e4dd;
	background-image: url("../img/yoso_guide/icon_sprite_yoso_arrow01.png");
	background-position: 6px 9px;
	background-repeat: no-repeat;
	-webkit-background-size: 20px 45px;
	-moz-background-size: 20px 45px;
	-ms-background-size: 20px 45px;
	-o-background-size: 20px 45px;
	background-size: 20px 45px;
}
.PointFaqList ul li dl.QuestOpen dt:after {
	background-color: #bdbcb2;
	background-position: 6px -19px;
}
.PointFaqBtnArea {
	width: 280px;
	margin: 15px auto 0;
}

.YosoRegistBtn {
	padding: 20px 0 100px;
	text-align: center;
}
.YosoRegistBtn a {
	display: inline-block;
}
.YosoRegistBtn a:hover img {
	opacity: .8;
}
*/