/*
 * 2014/11/19 kubota
 * マルチデバイス対応CSS
 * PC / タブレット / SP
 * windowサイズによる切り替え
 * (SPIRALのマルチデバイス対応CSSの雛形を参考にしている)
 */
html {
  overflow: auto;
  height: 100%;
}

.body {
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "游ゴシック Medium", "Yu Gothic", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	animation: fadeInBody 2s ease 0s 1 normal;
    -webkit-animation: fadeInBody 2s ease 0s 1 normal;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
		background-color: #d3edfb;
}

@keyframes fadeInBody {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeInBody {
    0% {opacity: 0}
    100% {opacity: 1}
}

#wrapper {
	margin:0;
	padding:0;
}

#SMP_STYLE .body {
	margin: 0;
	padding: 0;
}

#SMP_STYLE .body_tbl {
	margin: 0 auto;
	position: relative;
	width:100%;
}

#SMP_STYLE h1 {
}

h2{
	display: inline-block;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
	padding:1.2em 1em;
    letter-spacing: -0.03em;
	background-color: #2ba7d2;
	width:100%;
	font-size:2.5em;
	color:#FFFFFF;
}@media screen and (max-width:750px) {
	h2 {
	margin-top: 0.1em;
    margin-bottom: 0.1em;
	padding:1.2em 0.3em 1.2em;
	font-size:1.8em;
	}
}

h2 img{
    width: 295px;
    max-width:295px;
}@media screen and (max-width:750px) {
	h2 img {
        width: 45%;
	}
}
h3{
	position: relative;
	padding:0;
	width:90%;
	font-size:2.3em;
	font-weight: bold;
	color:#1d2088;
	display: flex;
	align-items: center; /* 垂直中心 */
	justify-content: center; /* 水平中心 */
}@media screen and (max-width:750px) {
	h3 {
	font-size:1.6em;
	}
}

h3:before,
h3:after {
  border-top: 1px solid #1d2088;
  content: "";
  width: 18px; 
}
h3:before {
  margin-right: 12px; 
}
h3:after {
  margin-left: 12px; 
}

h4{
	display: inline;
	position: relative;
	padding:0.1em 1.5em;
	width:90%;
	font-size:1.8em;
	font-weight: bold;
	color:#1d2088;
	background-color:#ffff00;
	margin:1em 0 0.1em 0;
}@media screen and (max-width:750px) {
	h4 {
	padding:0.1em 0.5em;
	font-size:1.5em;
	}
}

.transfer{text-align: center; padding:0.3em 0.15em 0.3em; font-size:2.2em; font-weight:bold; color:#231815; }@media screen and (max-width:750px) {
	.transfer {font-size:1.7em;text-align: left;padding:0.3em 1em 0.3em;}
}

.transfer a{color: #1d2088; }
.dropshadow {
  -webkit-filter:drop-shadow(10px 10px 0px rgba(62, 69, 223, 0.8));
  -moz-filter:drop-shadow(10px 10px 0px rgba(62, 69, 223, 0.8));
  -ms-filter:drop-shadow(10px 10px 0px rgba(62, 69, 223, 0.8));
  filter:drop-shadow(10px 10px 0px rgba(255, 252, 0, 0.8));
}


.strong31{
	font-size: 1.2em;
	background-color: #FFFF00;
	font-weight:bold;
}
.strong05{font-size: 0.8em; color:#6C6C6C;}
.strong2{font-size: 1.5em;}
.strong12{font-size: 1.2em;}
.strong15{font-size: 1.5em;}
.strong3{font-size: 3em;}
.textblue{color:#0053a6;}
.textlightblue{color:#8bcee4;}
.textorange{color:#f2940e;}
.textwhite{color:#FFF!important;}
.textred{color:crimson;}
.textyellow{color:#ffff00 !important;}
.textpink{color:#e4007f;}
.textbold{font-weight:bold;}
.textright{text-align: right;}
.textleft{display: inline-block;text-align: left!important;}
.textcenter{text-align: center;}
.textsize08{font-size:0.8em;}
.lineh08{line-height:0.8em;}
.close{color:#AAA!important;}
.linethrough{text-decoration: line-through;}
.end{color:#FFF; background-color: red; padding:2px;}
/* ------------------------------ interval ------------------------------ */

.margin20{margin: 10em 0 10em 0;}
.margin10{margin: 5em 0 5em 0;}
.margin7{margin: 2em 0 5em 0;}
.margin5{margin: 0% 0 5em 0;}
.margin3{margin: 1.5em 0 1.5em 0;}
.margin1{margin: 1em 1em;}
.padding1{padding: 1em;}
.padding2{padding: 2em;}
.paddinglabel{padding: 0 5px;}
.padding05{padding: 0.5em;}
.padding20{padding: 10em 0 10em 0 !important;}
.padding10{padding: 5em 0 5em 0 !important;}
.padding03{padding: 3em 0 3em 0 !important;}

/* ------------------------------ BG 背景色 ------------------------------ */
.bgblue{
	background-color:#2ba7d2!important;
}
.bgorange{
	background-color:#f7ba63;
}
.bgpink{
	background-color:#f96ebc;
}
.bgdeepblue{
	background-color:#001844;
}
.bgyellow{
	background-color:#ffff00;
}
.bgactive{
	background-color:#1d2088!important;
}
.bgstripe{
  /*background: repeating-linear-gradient(-45deg, #f7fafd, #f7fafd 20px,#e9f5ff 20px, #e9f5ff 40px); */
	background: repeating-linear-gradient(-52deg, #099dc8, #099dc8 50px,#0592bb 50px, #0592bb 100px); 
	transition: .4s;
}

.bground{
	max-width: 800px;
	width:85%;
	padding:1.5em;
	background:#FFF;
	border-radius: 50px; 
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px; 
}


/* ------------------------------ btn ------------------------------ */
#entrybtn a {
	position: fixed;
	z-index:9999;
    top:0;
	right:2%;
	cursor:pointer;
	background-color: #FF0004;
	color:#FFF;
	padding:2em 1em;
	
}@media screen and (min-width:750px)and (max-width:2000px) {
	#entrybtn a {

	}
}@media screen and (max-width:750px) {
	#entrybtn a {
	width:80px;
	height: 88px;
	top:0;		
	right:2px;
	background-size: 80px 88px;
	background-repeat:no-repeat;
	}
}

#entrybtn a:hover{
	background-color: #FFFF00;
	color:#000;
}


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

#SMP_STYLE .header_img_smartphone {display: none;}
#SMP_STYLE .header_img_tablet {display: none;}
#SMP_STYLE .header_img_pc {display: block;}
#SMP_STYLE .header_text {
	margin: 0;
	padding: 20px 70px 20px 70px;
	background: #F1F1F1;
	color: #111111;
	font-size: 100%;
	font-weight: normal;
	text-align: center;
}

header {
	max-width:1000px;
	background-color: #d3edfb;
	position: relative;
}@media screen and (min-width:750px)and (max-width:2000px) {
	header {

	}
}@media screen and (max-width:750px) {
	header {

    }
}

header img {
	position: relative;
	z-index: 99;
	margin: 1em auto 0.5em;
	max-width:1700px;
	height: auto;
}
@media screen and (max-width:750px) {
	header img {
	width: 100%;
	}
}


.teleboatlogo {
  position: absolute;
  z-index: 9999;
  top: 30px;
  left: 30px;
  background-repeat: no-repeat;
  background-image: url(../images/teleboat_logo.png);
width: 525px;
height:55px;
}@media screen and (max-width:1000px) {
	.teleboatlogo {
        top: 25px;
		left: 10px;
          background-size: 65%;
	}
}

.brlogo {
  position: absolute;
  z-index: 9999;
  top: 30px;
  right: 30px;
  background-repeat: no-repeat;
  background-image: url(../images/boatrace_logo.png);
width: 242px;
height:42px;
}@media screen and (max-width:750px) {
	.brlogo {
        top: 30px;
		right: -80px;
          background-size: 60%;
	}
}





.pc { display: block !important; }
.sp { display: none !important; }
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}


/* ------------------------------ 重要 ------------------------------ */

.bg_important{
	position:  relative;
	z-index:99;
	height: auto;
	padding:0;
	width:100%;
    margin:0;
}
.bg_important2{
	position:  relative;
	z-index:99;
	height: auto;
	padding:0;
	width:100%;
    margin:0;
    background-repeat: repeat;
	background-color: #d3edfb;
}




.midashi_pc{margin-bottom: 1em; display: block;}
.midashi_sp{display: none;}
@media screen and (max-width:725px) {

	.midashi_pc{display: none;}
	.midashi_sp{margin-bottom: 1em; display: block;}

}


.imp_container{
 width: 92%;
 display: flex;  
position: relative;
 -webkit-justify-content: center;
 /*align-items: center;*/
 align-items: stretch;
justify-content: space-between;
padding:2em 0;
	}

.imp_item{
width: 80%; 
position: relative; 
flex: 1 0 auto; 
}

@media screen and (max-width:725px) {
	.imp_item{
		 word-break:break-all;
	}
}


.h3_step{margin-top: -10em;}

.imp_item p{
	font-size: 2.5em;
	text-align: center;
	line-height: 1.5em;
	padding-bottom: 0.5em;
	color:#FFF;
    font-weight:bold;
}
  
@media screen and (max-width:1300px) {
	.imp_item p{
		margin-left: 2em; 
        margin-right: 2em;
        font-size: 2em;
        text-align: left;
    }
  br {display: none;}
}  
  
@media screen and (max-width:1024px) {
	.imp_item p{
		margin-left: 2em; 
        margin-right: 2em;
        font-size: 2em;
        text-align: left;
	}
}

@media screen and (max-width:725px) {
	.imp_item p{
		padding-bottom: 1em;
		font-size: 1.8em;
        text-align: left;
	}
}
@media screen and (max-width:640px) {
	.imp_item p{
		margin-left: 1em; 
        margin-right: 1em;
		padding-bottom: 1em;
		font-size: 1.5em;
        text-align: left;
	}
}


span.emphasis { color:#0785d1; font-weight: bold;}



/* ------------------------------ キャンペーン概要 ------------------------------ */







ul, ol {
  padding: 0.5em 0.2em 0.5em 0.2em;
}@media screen and (max-width:750px) {
ul, ol{
  padding: 0.5em 0.2em 0.5em 1.5em;
	}
}

ul li, ol li {
  text-align: left;
  line-height: 1.3; 
  padding: 0.4em 0.6em;
  list-style-type: none;
  font-size:2em;
    text-indent: -0.2em; /*ここで字下げ。今回は一文字分なので1em*/
    padding-left: 0.2em; /*text-indentでデザインが崩れるので修正*/
    word-break: break-all; /*枠内にテキストを収める*/
}
@media screen and (max-width:750px) {
	ul li, ol li {
	font-size:1.6em;
	text-align: left;
	}
}
li::before {
  position: relative;
  top: -4px;
  left: -6px;
  display: inline-block;
  width: 4px;
  height: 4px;
  content: '';
  border-radius: 100%;
  background: #333;

}
































/* ------------------------------ お申込み方法 ------------------------------ */

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index:99;
}



article#gaiyou {
	position:  relative;
	z-index:0;
	height: auto;
	margin-top:-5px;
	padding:0 0 0em 0;
	width:auto;
    /*background-size: auto 100%;*/
    background-position: center;
    background-repeat: repeat;
	background-color: #d3edfb;
	background-attachment: fixed;
	overflow-y: hidden;
}@media screen and (max-width:1000px) {
	article#gaiyou {
	height: 100%;
	}
}



.marker-yellow {
background: linear-gradient(transparent 60%, #ffff00 0%);
}

.yajirushi{max-width:375px; width: 90%; margin: 30px auto 10px; text-align: center;}
@media screen and (max-width:1000px) {
	.yajirushi img {
        width: 220px; margin: 0px auto 0; text-align: center;
	}
}




.img00 img{margin:5px auto 5px!important;text-align: center;width:100%; max-width:300px;}@media screen and (max-width:750px) {
	.img00 img {display: inline-block; margin:5px auto 5px!important;text-align: center!important;
	}
}
.img01 img{margin:5px auto 5px!important;text-align: center;width:100%; max-width:600px;}@media screen and (max-width:750px) {
	.img00 img {display: inline-block; margin:5px auto 5px!important;text-align: center!important;
	}
}


.line{width:90%; height:50px; background-color: #1d2088;}@media screen and (max-width:750px) {
	.line {
height:30px;
	}
}




/* FLEXBOX */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
	position: relative;
	flex-basis: auto;
	padding:10px 12px;
	font-size:1.5em;
}@media screen and (max-width:750px) {
	.item {
	flex-basis: 160px;
	}
}

.item a img {
	width:100%;
	  overflow: hidden;
  cursor: pointer;
}

.item a:hover img{
	transform: scale(1.1);
	transition-duration: 0.2s;
}

.pre{
	position: absolute;
	background-color: #EB2052;
	padding: 5px 5px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 0.7em;
	width: 70px;
	margin-left: auto;
	margin-right: auto;
	bottom:30px;
	right:5px;
	text-align: center;
	transform:skew(-10deg,0deg);
}


.content {
	position: relative; 
	max-width:1000px;
	padding:0em 0em 0.5em;
	margin:0.5em 0;
}@media screen and (max-width:750px) {
	.content {

	}
}





.lineyellow {
     background:linear-gradient(transparent 60%, #fffc00 60%);
 }


/* --------------- 横幅726pxから981pxまで --------------- */

@media screen and (min-width:726px) and (max-width:981px) {

	#SMP_STYLE .header_img_smartphone {display: none;}
	#SMP_STYLE .header_img_tablet {display: block;}
	#SMP_STYLE .header_img_pc {display: none;}
	.none {display: none;}
	.denote {display: block;}
/* --------------- 横幅725px以下 --------------- */

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

	#SMP_STYLE .header_img_smartphone {display: block;}
	#SMP_STYLE .header_img_smartphone img {width:100%;}
	#SMP_STYLE .header_img_tablet {display: none;}
	#SMP_STYLE .header_img_pc {display: none;}

	.none {display: none;}
	.denote {display: block;}

}

	.none {display: none;}
	.denote {display: block;}
/* --------------- FOOTER --------------- */

#footer {
	position: relative;
	z-index:99;
	background-color: #1d2088;
	/*background-color: rgba(58,210,248,1);*/
	padding: 0px;
}

#footer img{
width:80%;
	max-width:600px;
	margin:5em 0em;
}@media screen and (max-width:750px) {
	#footer img {
	width:90%;
	}
}

#footer p{
	padding: 20px 10px;
    font-size: 14px;
	text-align:center;
	color:#444;
	margin:0 auto;
}
	
/* footer対策 */
#SMP_STYLE .body_tbl{
	padding-bottom:0;
	position: relative;
	width:100%;
}

/* --------------- トップへ戻る --------------- */

#back-top {
	position: fixed;
	z-index:999;
	bottom: 1em;
	right:1em;
}
#back-top a{
    background: #000;
    text-decoration: none;
    color: #fff;
    width: 4.5em;
    padding: 1.4em 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#back-top a:hover{
	opacity:0.75;filter:Alpha(opacity=75)
}
.my-big {
  font-size: 6em;
}


/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  width: 90%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  margin: 20px 0 0px;
  width: calc(100%/2);
  height: 80px;
  border-bottom: 3px solid #1d2088;
  background-color: #d9d9d9;
  line-height: 20px;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
			padding:30px 0 0 0;
}@media screen and (max-width:750px) {
	.tab_item {
  font-size: 12px;
			padding:25px 0 0 0;
	}
}


.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 1px 0px 0;
  clear: both;
	width:90%;
}


/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #1d2088;
  color: #fff;
}
.asterisk {
color:#494949;
	font-size:0.9em;
}

























*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
	margin-bottom:1.5em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-c {
  font-size: 1.8rem;
  position: relative;
  padding: 2rem 3rem 2rem 3rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #fff;
  border-radius: 100vh;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#1d2088),
    to(#5357da)
  );
  background-image: -webkit-linear-gradient(left, #1d2088 0%, #5357da 100%);
  background-image: linear-gradient(to right, #1d2088 0%, #5357da 100%);
  -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2);
}

a.btn-c:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);

  color: #fff;
}


.flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	  margin-top: 50px;
  padding-bottom: 40px;
  width: 90%;
  margin: 0 auto;
		align-items: center; 
}
.flextab {
  margin: 20px 0 0px;
  width: calc(100%/2);
  height: 80px;
  border-bottom: 3px solid #1d2088;
  background-color: #d9d9d9;
  line-height: 20px;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
			padding:30px 0 0 0;
			align-items: center; 

}@media screen and (max-width:750px) {
	.flextab {
  font-size: 12px;
			padding:25px 0 0 0;
	}
}

.flextab a{
color:#1d2088;
display: inline-block;
}

.flextab a:hover {
opacity: 0.5;
}

.flextab_content {
  display:block;
  padding: 1px 0px 0;
  clear: both;
	width:90%;
}