@charset "utf-8";

/*　reset
*********************************************************/

*{
	margin:0;
	padding:0;
}

*, *:before, *:after { 
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

button:focus {
	outline:0;
}

body{
	background-image: url(../../../../images/lps/buddy/sl-omega_trial/body_01.jpg);
	background-color: #000000;
	background-position: top center;
	background-size:cover;
	background-attachment: fixed;
	color: #000000;
	font-size: 19px;
	line-height: 1.6;
	font-family: "メイリオ","Meiryo","Osaka","MS Pゴシック","MSゴシック",Helvetica,verdana,arial;
}



img{vertical-align:bottom;}

br{letter-spacing:0;}
br.sb{display: none;}
@media screen and (min-width: 568px) {
a:hover{opacity: 0.8;}
button:hover{opacity: 0.8;}
input[type="submit"]:hover{opacity: 0.8;}
    /* ホバースタイルは横幅が大きなデバイスだけ */
}
.sv{display: none;}


a:link{text-decoration:none; color: #FF2B74;}
a:visited{text-decoration:none; color: #FF2B74;}
a:hover{text-decoration:underline; color: #FF2B74;}
a:active{text-decoration:none; color: #FF2B74;}


/*　layout
*********************************************************/

#wrapper{
	width: 100%;
	height: auto;
	text-align: center;
	position: relative;
}

.wrapper-wood{
	width: 100%;
	height: auto;
	text-align: center;
	position: relative;
	background:url(../../../../images/lps/buddy/sl-omega_trial/body2.jpg) center no-repeat;
	background-size:cover;
	background-attachment: fixed;
}

#header {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
/*	background-color: rgba(255,255,255,0.2);
*//*	background-position: top center;
	background-attachment: fixed;
	background-size:cover;
*/	position:relative;
	overflow: hidden;
}

#header .h-start{
	opacity: 0;
}

#header img.head{
	width: 20%;
}


/**********************************************************/


.container{
	width:90rem;
	padding: 1rem;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
	background: #7d7e7d; /* Old browsers */
	background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
	background-attachment: fixed;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
}


.main{
	background-color: #141410;
	color: #eeeeee;
	background-attachment: fixed;
	width:88rem;
	height: 100%;
	margin:0 auto;
	padding: 1rem;
	padding-bottom: 8rem;
	border-right: 0.4rem groove #444444;
	border-left: 0.4rem ridge #444444;
	border-bottom: 0.4rem groove #444444;
	border-top: 0.4rem ridge #444444;

}


.wrapper-wood .container{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8c3310+0,752201+51,bf6e4e+100 */
	background: #8c3310; /* Old browsers */
	background: -moz-linear-gradient(top,  #8c3310 0%, #752201 51%, #bf6e4e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #8c3310 0%,#752201 51%,#bf6e4e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #8c3310 0%,#752201 51%,#bf6e4e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c3310', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-9 */
}

.wrapper-wood .main{
	background-color: #f7efea;
	color: #000000;
	border-right: 0.4rem groove #f0b7a1;
	border-left: 0.4rem ridge #f0b7a1;
	border-bottom: 0.4rem groove #f0b7a1;
	border-top: 0.4rem ridge #f0b7a1;
}

.text{
	width: 70rem;
	margin: 0px auto  0 auto;
	text-align: left;
	padding-top: 5rem;
	padding-bottom: 5rem;
}

p{padding-top:8rem; }



/*=======================================*/

section.bace{
	width: 100%;
/*	background-image: url(../images/body2.jpg);
	background-position: bottom;*/
	padding: 2rem 0;
	box-shadow: 0 0px 15px #000000;
	position: relative;
}

section.bace p{
	padding: 5rem 0;
	background-color: rgba(247,239,234,0.5);
	margin: 0 auto;
	box-shadow: 0 0px 15px #000000;
	z-index: 1;
}

section.bace-bk{
	width: 100%;
	background-color: rgba(0,0,0,0.5);

	background-position: center;
	background-attachment: fixed;
	padding: 1rem 0;
}

section.bace-bk p{
	padding: 5rem 0;
	background-color: rgba(0,0,0,0.8);
	margin: 0 auto;
}

section.bace-old{
	width: 100%;
	background-image: url(../../../../images/lps/buddy/sl-omega_trial/bg-section-bk.jpg);
	background-position: bottom;
	padding: 2rem 0;
	box-shadow: 0 0px 15px #000000;
	position: relative;
}


section.trial{
	width: 100%;
	box-shadow: 0 0px 15px #000000;
	padding: 2rem 0;
	background: rgba(195, 255, 94,0.8)0; /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(195, 255, 94,0.8)0 0%, #09509b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(195, 255, 94,0.8)0 0%,#09509b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(195, 255, 94,0.8)0 0%,#09509b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(195, 255, 94,0.8)0', endColorstr='#09509b',GradientType=0 ); /* IE6-9 */
}

section.trial p{
	padding: 5rem 0;
	margin: 0 auto;
	box-shadow: 0 0px 2px #ffffff;
}



.sectionarea{
	width: 85rem;
	margin-left: auto;
	margin-right: auto;
	padding: 1rem 0;
}
.area-dot-t{
	background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
}

.area-wall{
background-color: #1d1042;
background-image: url("https://www.transparenttextures.com/patterns/bright-squares.png");
}

.area-wall-y{
background-color: #f0e511;
background-image: url("https://www.transparenttextures.com/patterns/circles.png");
}

.area-box{
background-color: #1d1042;
background-image: url("https://www.transparenttextures.com/patterns/gplay.png");
}

.area-box-g{
background: #f3e2c7; 
background: -moz-linear-gradient(top,  #f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=0 ); /* IE6-9 */
border: 0.4rem ridge #B6991E;
}

.area-box-s{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
border: 0.4rem ridge #b5bdc8;
}


.area-box-b{
	background: #8c3310; /* Old browsers */
	background: -moz-linear-gradient(top,  #8c3310 0%, #752201 51%, #bf6e4e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #8c3310 0%,#752201 51%,#bf6e4e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #8c3310 0%,#752201 51%,#bf6e4e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c3310', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-9 */
}

.area-box-t{
background-image: url("https://www.transparenttextures.com/patterns/gplay.png");
}


.area-woven{
background-color: #1c1c1c;
background-image: url("https://www.transparenttextures.com/patterns/woven.png");
}

.area-woven-t{
background-image: url("https://www.transparenttextures.com/patterns/woven.png");
}

.area-woven-y{
	background-color: #efe164;
	background-image: url("https://www.transparenttextures.com/patterns/woven-light.png");
}

.area-wood{
	background:url(../../../../images/lps/buddy/sl-omega_trial/body2.jpg) center no-repeat;
}

.area-note{
background-color: #fafa96;
background-image: url("https://www.transparenttextures.com/patterns/lined-paper-2.png");
}

.area-grad-bk{
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */

}
.area-dky{
	background-color: #baa912;
}

t-shadow-s{
	  text-shadow: -1px -1px 1px rgba(100, 100, 100, .5),
               1px 1px 1px rgba(255, 255, 255, .7);
}

.area-super{
	background-color: #baa912;
	background-image: url("https://www.transparenttextures.com/patterns/woven.png");
}

.area-special{
	background-color: #ad4420;
	background-image: url("https://www.transparenttextures.com/patterns/woven.png");
}

.area-dhorse{
	background-color: #5878bc;
	background-image: url("https://www.transparenttextures.com/patterns/woven.png");
}


.area-comment{
	background-image: url("../../../../images/lps/buddy/sl-omega_trial/img-comment.jpg");
	background-position: center top;
}


/*==========================================*/


.box{
	display: inline-flex;
	width: 100%;
}

.box p{
	padding: 1rem;
}

.box i{
	margin-top: -0.3rem;
}


.box2{
	display: table;
	margin-left:auto;
	margin-right:auto;
	width: 95%;
	padding: 1rem 0;
	font-size: 1.6rem;
}


/*==========================================*/


.blue-bt{
	background-image: url(../../../../images/lps/buddy/sl-omega_trial/bt-bg.png);
	background-repeat: no-repeat;
	background-position: center;
}

.blue-bt img{
	margin: 0 auto;
}


.sche .box{
	display: block;
	width: 100%;
}

.sche .box p{
	width: 100%;
}

.sche .box br{
	display: block;
}



ul.simulation-result{
	width: 100%;
}

ul.simulation-result li{
	display: inline-flex;
	flex-wrap: nowrap;
	padding: 2rem 4rem;
	font-size: 3rem;
	background-color: #ffffff;
	border-radius: 1rem;
}

ul.simulation-result li.as-1 {
  animation-delay: 0.1s; /* アニメーション開始時間 */
}
ul.simulation-result li.as-2 {
  animation-delay: 0.3s; /* アニメーション開始時間 */
}
ul.simulation-result li.as-3 {
  animation-delay: 0.6s; /* アニメーション開始時間 */
}

ul.simulation-result li.win{
	background-color: #faff70;
}


.hd-1 {
  animation-delay: 0.1s; /* アニメーション開始時間 */
  animation-duration: 1s;
}
.hd-2 {
  animation-delay: 1s; /* アニメーション開始時間 */
  animation-duration: 1s;
}
.hd-3 {
  animation-delay: 1.7s; /* アニメーション開始時間 */
}



/*==========================================*/


.fukidesc {
    display: grid;
    grid-template-columns: 6rem 1fr;
    align-items: start;
    grid-gap: 2rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


.fukiimg i{
    font-size: 6rem;	
}


.fukip {
    align-items: center;
    position: relative;
	background-color: rgba(255,255,255,0.6);
    border-radius: 1rem;
    text-align: left;
	color: #000000;
/*	box-shadow: 0 0px 25px #9e9e9e;
*/}

.fukip p {
    padding: 2rem;
    vertical-align: middle;
}

.fukip:before {
    border-right: 15px solid;
    border-right-color: rgba(255,255,255,0.6); 
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    top: 2rem;
    content: '';
    position: absolute;
    left: -15px;
/*	box-shadow: 0 0px 25px #9e9e9e;
*/}



/* result
**********************************************************/




.result-data{
	padding: 1rem;
	background-color: #000000;
	text-align: left;
}

.result-data br{
	display: block;
}

.result-box{
	width: 100%;
	margin-bottom: 3rem;
	display: grid;
	grid-template-columns: 45% 1fr ;
	font-size: 1.6rem;
}

.l-box{
	text-align: left;
	margin-right: 1rem;
}

.l-number{
	display: inline-flex;
	flex-wrap: wrap;
}


.l-number p.hdd{
	flex-basis: 35%;
	font-size: 1.5rem;
	color: #ffffff;
	background-color: #474747;
	font-weight: normal;
	background-image: none;
	margin-right: 0.2rem;
}


.l-number p{
	width: 64%;
	padding: 1rem;
	margin-bottom: 0.1rem;
	text-align: left;
	background-color: #000000;
	background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
}

.l-number p.hit{
	background-color: #ffee3a;
	color: #FF0000;
	font-weight: bold;
	background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
}


.r-number{
	display: inline-flex;
	flex-wrap: wrap;
	text-align: left;
}


.r-number p.hdd{
	flex-basis: 30%;
	font-size: 1.5rem;
	color: #ffffff;
	background-color: #474747;
	font-weight: normal;
	background-image: none;
	margin-right: 0.2rem;
}

.r-number p{
	width: 69%;
	padding: 1rem;
	margin-bottom: 0.1rem;
	font-weight: bold;
	background-color: #000000;
	background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
}


.r-number p.hit{
	color: #FF0000;
	font-size: 4rem;
	font-weight:bold;
	background-color: #ffee3a;
	background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
}

.r-number p.money{
	text-align: right;
}


/* new-result
**********************************************************/


.new-result{
	padding: 1rem;
	background-color: #000000;
	text-align: left;
}

.new-result br{
	display: block;
}

.new-result-box{
	width: 100%;
	margin-bottom: 5rem;
	font-size: 1.6rem;
}

.date{
	padding: 0 0 1rem 0;
	font-size: 2.5rem;
}


.hit-info{
	display: table;
	width: 100%;
	margin-bottom: 1rem;
}

.hit-info p{
	display: table-cell;
	vertical-align: middle;
	padding: 0 1rem;
	background-color: #000000;
	text-align: center;
}


.hit-info p.race{
	width: 30%;
	padding: 1rem;
	font-size: 1.5rem;
	color: #ffffff;
	font-weight: normal;
	text-align: left;
	background-color: #000000;
	background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
}

.hit-info p.hdd{
	width: 10%;
	font-size: 1.5rem;
	color: #ffffff;
	font-weight: normal;
	text-align: center;
	background-color: #000000;
	background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
}

.hit-info p.hit{
	color: #FF0000;
	font-size: 2.5rem;
	font-weight:bold;
	text-align: center;
	background-color: #ffee3a;
	background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
}

.hit-info p.hit span{
	color: #FF0000;
	  background: -webkit-linear-gradient(top,  #ed1e1e 0%,#ed0404 50%,#d10000 51%,#f70707 100%);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
}


.hit-info p.money{
	text-align: right;
	width: 45%;
}

.hit-info p.money span{
	font-size: 4.5rem;
}



/*　
*********************************************************/

.voice{
	font-size: 1.5rem;

}

.voice img{
	margin-bottom: 1rem;
}

ul.member{
	display: flex;
	flex-wrap:wrap;
	justify-content:center;
}

ul.member li{
	display: inline-block;
	font-weight: bold;
	font-size: 1.6rem;
	background-color:#c1f4f4;
	color:#253654;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	margin: 0.2rem;

}


ul.comment{
	display: block;
	margin: 2rem 0;
	text-align: left;
}

ul.comment li{
	display: block;
	width: 100%;
	font-size: 1.8rem;
	font-weight: bold;
	color:#ed4242;
	background-color: #ffffff;
	padding: 3rem 6rem 6rem 6rem;
	border-bottom: 0.2rem solid #dddddd;
}


ul.comment li:nth-child(even){
	background-color: #f7f7f7;
}

ul.comment li .c-date{
	display: block;
	font-size: 1.4rem;
	color: #999999;
	font-weight: normal;
	margin-bottom: 1rem;
}


.brick {
  margin: 0 auto;
  padding: 2rem;
  width: 100%;
  column-count: 3;
  column-gap: 0;
  height: 140rem;
  overflow: hidden;
}

@media (max-width: 800px) {
  .brick {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .brick {
    column-count: auto;
	column-gap: 0;
    padding: 0.5rem;
    height: 100%;
  }
}

.grid {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	background: #ffffff;
	text-align: left;
	margin: 0 0.5rem 0.5rem 0.5rem;
	border-radius: 0.5rem;
	box-shadow: 0 0px 10px #9e9e9e;
	font-size: 1.6rem;
	color: #ED486A;
}

.grid p{
	padding: 1.5rem;
}


/*===========================================*/

/*折り畳み*/
.hidden_box {
    padding: 0;
}

.hidden_box label {
	width: 80%;
    padding: 2rem;
    text-align: center;
    font-weight: bold;
    cursor :pointer;
    color: #ffffff;

	background-color: #44858c;
	background-image: url("https://www.transparenttextures.com/patterns/inflicted.png");
}

/*ボタンホバー時*/
.hidden_box label:hover {
	background-color:#8dddcb;
	color:#253654;
	background-image: none;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}


/*********************************************************
/* form
*********************************************************/

.area-form{
	width: 80rem;
	margin: 0 auto;
}

.form {
	width: 100%;	
	margin: 0rem auto;
/*	padding: 2rem;
*/	text-align: center;
	color: #000000;
}


label {
	margin: 0.5rem auto;
	width: 50%;
	font-weight: bold;
	text-align: left;
	cursor:pointer;
	color: #000000;
	background-color: #dddddd;
	padding: 1.5rem 2rem;
	border-radius: 0.5rem;
	display: inline-block;
}

label:hover {
	border: none;
}



input[type="text"]{
	width: 80%;
	padding:1.5rem 2rem;
	font-size:2rem;
	color:#000000;
	font-weight:bold;
	background-color: #dddddd;
	border-radius: 0.5rem;
	border: none;
}


input[type="submit"]{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding: 2rem;
	font-size: 3rem;
/*	border-radius: 10rem;
*/	background-color: #FF2B74;
	color: #ffffff;
	border: none;
	cursor: pointer;
}



button{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding: 2rem;
	font-size: 2rem;
	font-weight: bold;
	background-color: #FF2B74;
	border: 0.3rem solid #ffffff;
	color: #FF2B74;
	cursor: pointer;
}




button.bt-simu{
	background-image: url(../../../../images/lps/buddy/sl-omega_trial/bt-bg.png);
	width: 40rem;
	height: 40rem;
	margin: 2rem auto;
	display: block;
	border: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	color: #0C228B;
	font-weight: bold;
	font-size: 3rem;
	text-shadow: 0 2px 3px rgba(119, 227, 255, 1),
				0 -1px 0 rgba(255, 255, 255, 1);;
	cursor: pointer;
}

button.bt-simu:hover{
	opacity: 0.5;
}

select{
	padding:1.5rem;
	font-size:1.6rem;
	color:#000000;
	font-weight:bold;
	border-radius: 0.5rem;
	margin: 0 0 2rem 0;
	background-color: #ffffff;
	cursor: pointer;
}

option{
	cursor: pointer;
}



textarea{
	padding:1.5rem;
	font-size:1.8rem;
	width:100%;
	height: 20rem;
	border:0.2rem solid #dddddd;
	font-family: "メイリオ","Meiryo","Osaka","MS Pゴシック","MSゴシック",Helvetica,verdana,arial;
}



a.p-link{
	width: 80%;
	margin: 0 auto;
	display: block;
	padding: 2rem;
	border-radius: 10rem;
	background-color: #ffffff;
	border: 0.3rem solid #FF2B74;
	color: #FF2B74;
	cursor: pointer;
}

a.p-link:hover{
	text-decoration: none;
	opacity: 0.8;
}



/*===========================================*/


table.list{
	width: 100%;
	margin: auto;
	border-spacing: 0.1rem;
	line-height: 1.5;
}


table.list th{
	padding:1rem;
	text-align: right;
	width: 25%;
	font-size: 1.6rem;
	vertical-align: top;
	font-weight: normal;
	border-bottom: 0.1rem solid #ffffff;
}


table.list td{
	text-align: left;
	background-color: #ffffff;
	padding:2rem;
	border-bottom: 0.1rem solid #dddddd;
}


table.list hr{
	border-top: 1px dotted #394046;
	border-bottom: 1px dotted #fff;
	margin: 0.5rem 0;
}



table.list .gray{
	color: #6d6d6d;
}

table.point{
	width:100%;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.6rem;
	border-spacing: 0;

}


table.point th{
	width:22%;
	padding: 3rem 1rem;
	font-weight: normal;
	text-align: center;
	vertical-align: top;
	background-color: #FF2B74;
	background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
	color: #ffffff;
	font-size: 1.6rem;
	letter-spacing: 0.2rem;
	border-bottom: 1px solid #ffffff;
}


table.point td{
	padding:1rem 1rem 4rem 1rem;
	overflow: hidden;
	text-align: left;
	background: #ffffff;
	background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
	border-bottom: 1px solid #ffffff;
}


span.hissu{
	display: inline-block;
	min-width:5rem;
	text-align: center;
	background-color: #ff0000;
	color: #ffffff;
	font-weight: bold;
	margin-left: 1rem;
	padding: 0 0.2rem;
}

span.jiyu{
	display: inline-block;
	min-width:5rem;
	text-align: center;
	background-color: #2179FC;
	color: #ffffff;
	font-weight: bold;
	margin-left: 1rem;
	padding: 0 0.2rem;
}





.heading{
	position: relative;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: left;
	padding: 1.5rem;
	background-color: #261d39;
}


.radio-input{
  display: none;
}
.radio-input + label{
  padding-left: 30px;
  position:relative;
  margin-right: 20px;
}
.radio-input + label::before{
  content: "";
/*  display: block;
*/  display: none;
  position: absolute;
  top: 15px;
  left: 5px;
  bottom: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 50%;
}
.radio-input:checked + label{
	background-color: #F9E54A;
}
.radio-input:checked + label::after{
  content: "";
/*  display: block;
*/
  display: none;
  position: absolute;
  top: 17px;
  left: 7px;
  width: 11px;
  height: 11px;
  background: #5e5e5e;
  border-radius: 50%;
}


/*===========================================*/




/*********************************************************
	フッター
*********************************************************/


footer {
	width: 100%;
	background-color: #000000;
	padding: 2rem 0rem;
	color: #ffffff;
}
.footer{
	width: 110rem;
	margin: 0 auto;
	text-align: center;
}

.footer ul{
	text-align: center;
	font-size: 1.6rem;
}

.footer ul li{
	display: inline-block;
	padding: 0.5rem;
	text-align: center;
	font-weight: normal;
}

.footer ul li a{
	color: #ffffff;
}


.footer .copy{
	font-size: 1.4rem;
	color: #dddddd;
	padding: 1rem 0.5rem;
	text-align: center;
}


/*=========================================*/

/*===========================================*/


.balloon,
.balloon-r{
	width: 100%;
	position: relative;
	background-color: #ffffff;
	border-top-color: #b2b2b2;
	border: 3px solid #b2b2b2;
	border-radius: 1rem;
	padding: 2rem;
/*	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4));
*/	box-sizing: border-box;
}


.balloon:before{
	content: '';
	position: absolute; /* 位置固定 */
	bottom: -40px; /* 線幅の2倍 */
	left: 48%;
	margin-left: -20px; /* 線幅だけずらす */
	border: 20px solid transparent; /* 線幅の設定 */
	border-top-color: #ffffff; /* 吹き出しの地と同じ色 */
	z-index: 1;
}


.balloon-r:before{
	content: '';
	position: absolute; /* 位置固定 */
	bottom: -40px; /* 線幅の2倍 */
	right: 10%;
	margin-left: -20px; /* 線幅だけずらす */
	border: 20px solid transparent; /* 線幅の設定 */
	border-top-color:rgba(255,255,255,0.5); /* 吹き出しの地と同じ色 */
	z-index: 1;
}


.call-out{
	border-radius: 2rem;
	background-color: #000000;
	border: 0.2rem solid #C5B97A;
	color: #ffffff;
}



/*=========================================*/
@keyframes key-fadein {
    0% {
        opacity:0.5;
    }
    100% {
        opacity:0.8;
    }
}



.fadein {
    animation-name: key-fadein;
    animation-duration: 3s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}


@keyframes zoomin {
    0% {
        opacity:0;
        transform: scale(5, 5);
    }

    70% {
        opacity:1;
        transform: scale(1, 1);
    }
    100% {
        opacity:1;
        transform: scale(1, 1);
    }
}



.zoomin {
	margin: auto;
	text-align: center;
    animation-name: zoomin;
    animation-duration: 1s;
    animation-iteration-count:1;
	animation-fill-mode:forwards;
}



@keyframes zoomUp {
    0% {
        opacity:0.2;
        transform: scale(0.2, 0.2);
    }
    100% {
        opacity:1;
        transform: scale(1, 1);
    }
}

.zoomUp {
	margin: auto;
	text-align: center;
    animation-name: zoomUp;
    animation-duration: 1s;
    animation-iteration-count:1;
	animation-delay: 0.5s;
	animation-fill-mode:forwards;
}



.flash-f {
	filter: drop-shadow(0px 0px 20px rgba(119,227,255,1));
	margin-right: auto;
	margin-left: auto;
	text-align: center;
    animation-name: flash-f;
    animation-iteration-count:infinite;    
    animation-duration: 1s;
	transition-timing-function: ease-out;
	animation-direction:alternate;
}

@keyframes flash-f {
    0% {
		filter: drop-shadow(0px 0px 40px rgba(119,227,255,1));
    }

    100% {
		filter: drop-shadow(0px 0px 5px rgba(119,227,255,1));
    }
}

#header .flash-f{
    animation-duration: 0.7s;
}

.flash-b {
	filter: drop-shadow(0px 0px 20px rgba(119,227,255,1));
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.flipInX {
  --animate-duration: 1s;
	animation-delay: 0.6s;
}

.deg-l{
	transform: rotate(1deg);	
}

/*===========================================*/

.simu{}

.w1,.w2,.w3,.w4,.w5,.w6,.w7 {
	position: relative;
	display: block;
	width: 100%;
}

.horse img{
	width: 100px;
	vertical-align: middle;
}

.simu .horse{
	display: block;
	padding: 0;
	text-align: right;
	margin: auto;
    animation-duration: 2.5s;
    animation-iteration-count:infinite;
	animation-fill-mode:forwards;
	animation-direction:alternate;
	z-index: 999999;
}

.simu .line{
	position: absolute;
	right: 0;
	top:1rem;
	padding: 0.8rem 1rem 1rem 6rem;
	height: 4rem;
	font-size: 1.6rem;
	display: block;
	text-align: left;
	margin: auto;
    animation-duration: 2.5s;
    animation-iteration-count:infinite;
	animation-fill-mode:forwards;
	animation-direction:alternate;

    transform-origin :100%;
    transform: translateX(0%);
 	z-index: 0;
   opacity: 0;
}

.simu .w1 .horse{
    animation-name: w1-h;
}

.simu .w1 .line{
    animation-name: w1-l;
    background-color: #aaaaaa;
}

.simu .w2 .horse{
    animation-name: w2-h;
}
.simu .w2 .line{
    animation-name: w2-l;
    background-color: #4c4c4c;
}

.simu .w3 .horse{
    animation-name: w3-h;
}
.simu .w3 .line{
    animation-name: w3-l;
    background-color: #934738;
}
.simu .w4 .horse{
    animation-name: w4-h;
}
.simu .w4 .line{
    animation-name: w4-l;
    background-color: #385593;
}
.simu .w5 .horse{
    animation-name: w5-h;
}
.simu .w5 .line{
    animation-name: w5-l;
    background-color: #939038;
}
.simu .w6 .horse{
    animation-name: w6-h;
}
.simu .w6 .line{
    animation-name: w6-l;
    background-color: #a07c2e;
}
.simu .w7 .horse{
    animation-name: w7-h;
}
.simu .w7 .line{
    animation-name: w7-l;
    background-color: #a56fa0;
}

@keyframes w1-h {
    0% {transform: translateX(0%);}
    20% {transform: translateX(0%);}
    50% {transform: translateX(-65%);}
    100% {transform: translateX(-65%);}
}

@keyframes w1-l {
    0% {width: 0;opacity: 0;}
    20% {width: 0;opacity: 0;}
    50% {width: 72%;opacity: 1;}
    100% {width: 72%;opacity: 1;}
}

@keyframes w2-h {
    0% {transform: translateX(0%);}
    20% {transform: translateX(0%);}
    50% {transform: translateX(-75%);}
    100% {transform: translateX(-75%);}
}
@keyframes w2-l {
    0% {width: 0;opacity: 0;}
    20% {width: 0;opacity: 0;}
    50% {width: 82%;opacity: 1;}
    100% {width: 82%;opacity: 1;}
}

@keyframes w3-h {
    0% {transform: translateX(0%);}
    20% {transform: translateX(0%);}
    50% {transform: translateX(-70%);}
    100% {transform: translateX(-70%);}
}
@keyframes w3-l {
    0% {width: 0;opacity: 0;}
    20% {width: 0;opacity: 0;}
    50% {width: 77%;opacity: 1;}
    100% {width: 77%;opacity: 1;}
}
@keyframes w4-h {
    0% {transform: translateX(0%);}
    20% {transform: translateX(0%);}
    50% {transform: translateX(-68%);}
    100% {transform: translateX(-68%);}
}
@keyframes w4-l {
    0% {width: 0;opacity: 0;}
    20% {width: 0;opacity: 0;}
    50% {width: 75%;opacity: 1;}
    100% {width: 75%;opacity: 1;}
}
@keyframes w5-h {
    0% {transform: translateX(0%);}
    20% {transform: translateX(0%);}
    50% {transform: translateX(-60%);}
    100% {transform: translateX(-60%);}
}
@keyframes w5-l {
    0% {width: 0;opacity: 0;}
    20% {width: 0;opacity: 0;}
    50% {width: 67%;opacity: 1;}
    100% {width: 67%;opacity: 1;}
}
@keyframes w6-h {
    0% {transform: translateX(0%);}
    20% {transform: translateX(0%);}
    50% {transform: translateX(-85%);}
    100% {transform: translateX(-85%);}
}
@keyframes w6-l {
    0% {width: 0;opacity: 0;}
    20% {width: 0;opacity: 0;}
    50% {width: 93%;opacity: 1;}
    100% {width: 93%;opacity: 1;}
}
@keyframes w7-h {
    0% {transform: translateX(0%);}
    20% {transform: translateX(0%);}
    50% {transform: translateX(-50%);}
    100% {transform: translateX(-50%);}
}
@keyframes w7-l {
    0% {width: 0;opacity: 0;}
    20% {width: 0;opacity: 0;}
    50% {width: 57%;opacity: 1;}
    100% {width: 57%;opacity: 1;}
}


/*===========================================*/

.timer{
		font-size: 5rem;
}


.timer .time{
	font-size: 8rem;
	display: inline-block;
	width: 15rem;
	font-weight: bold;
	letter-spacing: 0.1em;
/*	 text-shadow: 0 10px 15px rgba(0, 0, 0, 1);
*/}

.shadow-bk{
	box-shadow: 0 0px 25px #000000;
}





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


img.img100{width: 100%;}
img.img90{width: 90%;}
img.img80{width: 80%;}
img.img70{width: 70%;}
img.img60{width: 60%;}
img.img50{width: 50%;}
img.img40{width: 40%;}
img.img30{width: 30%;}
img.img20{width: 20%;}
img.w100{width: 100%;}


.container{width: 100%;}
.main{width: 100%;}
.footer{width: 100%;}

}


@media (orientation: landscape){

/*body{
	background-image: none;
background-color: #000000;
}*/

/*body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(../images/body.jpg) center no-repeat;
  background-size:cover;
}*/

}