@charset "utf-8";
/* CSS Document */

body {
	background:#FFF url("../img/bg-20.jpg") no-repeat;
    background-size:100% auto;
	color:#FFF;
	font-size:15px;
	letter-spacing: 1px;
	line-height:1.5;
	font-family:"メイリオ", Meiryo, Osaka,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	min-width:1000px;
}
a { text-decoration:none;}

.wrap {
    width:100%;
	max-width:1000px;
	margin:0 auto;
    
}
.onlysp {display:none;}

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

header {
	width:100%;
    position:relative;
}
#head {
	width:100%;
	margin:0 ;
	padding:12px 0;
	text-align: center;
	z-index:100 ;
}

h1 {
    width:76%;
	max-width:490px;
    margin:0 auto;
}

#head img {
	width:100%;
	vertical-align: bottom;
}

/*---------------------------
          nav
----------------------------*/
#navi {
	width:100%;
    height:77px;
	margin:0;
    background: url(../img/nav_bg.png) repeat-x;
    color:#FFF;
    z-index:100 !important ;
}
nav {
	width:1000px;
	margin:0 auto;
	padding: 12px 0 0;
    font-size:19px;
}
/*nav ul {
	margin-left:20px;
}
nav ul li {
	float:left;
}
nav ul li a {
	display:block;
	padding:22px 22px;
    color:#FFF;
    font-weight:700;
}
nav ul li a:hover {
    color:#F00;
}*/
/*ナビバー固定*/
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/*-------------------
   アニメーションナビ
---------------------*/

.btn-2 {
  margin: 0 auto  ;
  overflow: hidden;
  display: block;
}
.btn-2 li {
	float:left;
	line-height:50px;
	margin-right:14px;
	background: #001E6C;
}
.btn-2 li a {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	background: #001E6C;
	color: #C9ECFF;
	letter-spacing: 2px;
	font-weight: 700;
	padding: 6px 16px ;
	font-size: 18px;
	text-transform: uppercase;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
.btn-2 li a:hover {
	background: transparent;
	color: #FFF;
}
.btn-2 li a:hover:before {
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	width: 100%;
}
.btn-2 li a:hover:after {
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	width: 100%;
}
.btn-2 li a:before {
	content: '';
    position: absolute;
    bottom: 0;
	left: 0px;
	width: 0px;
    height: 2px;
	background: #008CFF;
	transition: all .4s ease;
}
/*.btn-2 li a:after {
	content: '';
    position: absolute;
    top: 0;
	left: 0px;
	width: 0px;
    height: 2px;
	background: #D0F9C7;
	transition: all .4s ease;
}*/
.btn-2 li a:after {
	top: inherit;
	left: inherit;
	bottom: 0;
	right: 0;
}

#navToggle {
	display:none;
}

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

footer {
	clear:both;
	position:relative;
	width: 100%;
	background: #FFF;
    color:#333;
	font-size:13px;
	text-align:center;
    padding:50px 0 10px;
	z-index:100 !important;
}
.f_logo {
    width:40%;
    max-width:178px;
    margin:0 auto;
}
.f_logo img {
    width:100%;
    margin-bottom: 0px;
}
footer p {
	margin-top:30px;
	letter-spacing:1px;	
}

/*--------------------------------
            section
----------------------------------*/
section.sec01 {/*濃紺*/
    position:relative;
    width:100%;
	padding:60px 0 0;
	background: #001B58 url("../img/bg02.png") no-repeat center 0 ;
    background-size:100% auto;
}
section.sec02 {/*水色白色ボーダー*/
    width:100%;
    padding:60px 0;
	background: #b0e3f0 url("../img/bg_sec02.png") repeat;
    background-attachment: fixed; 
}
section.sec03 {/*トップのアクセス*/
    width:100%;
    padding:60px 0;
    background: #26BBF6 url("../img/bg03.png") no-repeat 0 320px ;
    background-size:100% auto;
    color:#111;
}
section.sec_h2 {
    width:100%;
    padding:60px 0 10px;
}

.bg_nami02 {
    width:100%;
    background: url("../img/bg01.png") no-repeat;
    background-size:100% auto;
    padding-bottom:60px;
}

h2 {
	margin:0 auto 40px;
 }
h2.w300 {width:300px;}
h2.w420 {width:420px;}
h2 img {
    width:100%;
    vertical-align: bottom;
}
h3 {
	background: url("../img/h3_bg.png") no-repeat;
    border-bottom:solid 4px #29ABE2;
	text-align: left;
	font-weight:300;
	font-size:26px;
	letter-spacing: 2px;
	padding:2px 0 1px 40px;
	margin:0 0 50px;
}
h3.color_lb {color:#82E5FC;}
h3.color_db {color:#001B58;}
h3.color_w {color:#DEEFFC;
    background: url("../img/h3_bg2.png") no-repeat;
    border-bottom:solid 4px #DEEFFC;}


/*-------------------------------
  リンクボタン　開催情報・レース展望
---------------------------------*/

/*リンクボタン*/
.btn01 {
    width:450px;
    margin:0 auto 50px;
    
}
.btn01 a {
	background: #001B58;
	color:#B0E3F0;
    font-size:17px;
    font-weight:700;
    text-align: center;
	padding:15px 0;
    border-right:solid 2px #b0e3f0;
    border-bottom:solid 2px #b0e3f0;
    box-shadow: 2px 2px 0px #0058E0;
    display: block;
}
.btn01 a:hover {
	background: #0058E0;
	color:#FFF;
    border:none;
    padding:16px 0;
}

.cs {
	text-align: center;
	font-size:20px;
	font-weight:700;
	padding:100px 0;
}

.yellow {	color:#FDED43;}
.orange { color:#FF4200;}
.red {	color:#F03;}
.blue {	color:  #09F;}
.gold { color:#9C6A0E;}


/*テキスト装飾*/

.big {font-size:130%;}
.small80 {font-size:80%;}
.small90 {font-size:90%;}
.bold {	font-weight: 700;}

/*この頁のトップボタン*/

#page-top {
    position: fixed;
    bottom: 10px;
	left:50%;
	margin-left:450px;
}
#page-top a {
    background: url("../img/totop.png") no-repeat;
    background-size:100% auto;
    width: 74px;
	height:101px;
    display: block;
	opacity:1.0;
	filter:alpha(style=0, opacity=100);
}
#page-top a:hover {
    text-decoration: none;
	opacity:0.7;
	filter:alpha(style=0, opacity=70);
}


/*----ボタンロールオーバー----*/

a:hover .rollOver,
a:focus .rollOver,
a:active .rollOver {
	opacity:0.6;
	filter:alpha(style=0, opacity=70);
}

.clear {
	clear:both;
	height:0;
}

/* clearfix */
.clearfix:after {
  content: ".";  /* 新しい要素を作る　.でなくても良い */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}


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

body {
	min-width:100%;
	letter-spacing: 0;
    background:#FFF url("../img/bg-20.jpg") no-repeat center 0;
    background-size:150% auto;
}

.onlypc {
	display:none;
}
.onlysp {
	display: block;
}
    
/*header*/
#head {
	padding:10px 0 10px;
    border-bottom:solid 5px #0051DA;
	/*height: 46px;*/
	/*position:fixed;*/
}
    
section.sec01 {/*濃紺*/
	padding:30px 0 0;
    background-size:800px auto; 
}
section.sec02 {/*水色白色ボーダー*/
    padding:30px 0;
}
section.sec03 {/*トップのアクセス*/
    padding:30px 0 40px 0;
    background: #26BBF6 url("../img/bg03.png") no-repeat 0 380px ;
    background-size:800px auto;
}
section.sec04 {/*イベントのみ*/
    padding:20px 0 30px;
}
section.sec_h2 {
    padding:40px 0 0px;
}
.bg_nami02 {
    width:100%;
    background: url("../img/bg01.png") no-repeat center 450px;
    background-size:800px auto;
    padding-bottom:60px;
}    

h2 {
	margin:0 auto 30px;
 }
h2.w300 {width:50%;} 
h2.w420 {width:80%;}
    
h3 {
    background-size:18px auto;
    border-bottom:solid 3px #29ABE2;
	font-size:18px;
	letter-spacing: 1px;
	padding:2px 0 1px 30px;
	margin:0 1% 30px;
} 
h3.color_w {
    background-size:18px auto;
    border-bottom:solid 3px #DEEFFC;}
/*footer*/
.f_wrap {
    background-size:100% auto;
}
.f_logo img {
    margin:0 3%;
}
.w163 {width:36%;}
.w182 {width:40%;}

/*リンクボタン*/
.btn01 {
    width:80%;
}
.btn01 a {
    font-size:16px;
    padding:10px 0;
}
.btn01 a:hover {
	background: #0058E0;
	color:#FFF;
    border:none;
    margin:0;
    padding:11px 0 ;
}	
/*テキスト装飾*/

.big {font-size:100%;}
	
/*nav*/
#navi {
	height:auto;
	background:none;
	z-index:100 !important; 
	position:relative;
}
.menu {
	text-align: center;
    margin-bottom:20px;
}
nav {
	position:fixed;
	right:-270px;/*通常時は見えないように*/
	top:0;/*右から表示*/
	background:#001E6C;
	width:270px;
	padding:25px 0 10px;
	-webkit-transition:.5s ease-in-out; /*transitionで動きを*/
    -moz-transition:.5s ease-in-out;
    transition:.5s ease-in-out;
	z-index:100 !important ;
    font-size:18px;
    border-bottom:solid 10px #008CFF;
}
nav ul {
	margin:0;
	padding:10px 0 ;
    border-top:solid 2px #008CFF;
    
}
.btn-2 li {
	float:none;
	width:100%;
	/*border-bottom: dotted 1px #008CFF;*/
	background-color: transparent;
	background-position: center;
	line-height:3.0;/*高さここで調節*/
	text-align:center;
	vertical-align:middle;
    
}

	

/*ハンバーガーメニュー3本線*/
#navToggle {
	display: block;
	position: fixed ;
	right:0px;
	top:0px;
	width:48px;
	height:25px;
	cursor:pointer;
	z-index:1000!important ;
}
#navToggle div {
	position:relative;
    padding:23px 0;
	/*background-color:#FFF;
	border-radius:25px;*/
}
#navToggle span {
	display:block;
	position:absolute;
	width:50%;
	border-bottom:solid 3px #999;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
#navToggle span:nth-child(1) {top:13px;left:12px;}
#navToggle span:nth-child(2) {top:22px;left:12px;}
#navToggle span:nth-child(3) {top:31px;left:12px;}


.openNav #navToggle span:nth-child(1){
	top:21px;
	-webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
    top: 21px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
}
.openNav nav {/*ヘッダーの高さで可変*/
    -moz-transform: translatex(-270px);
    -webkit-transform: translatex(-270px);
    transform: translatex(-270px);
}
	

/*この頁のトップボタン*/
#page-top a {
    width: 64px;
	height:90px;
}
#page-top {
	left:82%;
	margin-left:0px;
}

}