/*@charset "UTF-8";*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*基本CSSの設定*/

body{
	/*font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	font-size:80%;
	line-height:1.6;
	color:#676767;
	background:#fff;
	font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

a:link,
a:visited,
a:active{
	color:#676767;
	text-decoration:none;
}

a:hover{
	color:#ff8b35;
	text-decoration:none;
}

#array{
	width:960px;
	margin:0 auto;
	background:#efeeee;
	-moz-box-shadow: 0px 0px 10px rgba(108,108,108,0.5);
	-webkit-box-shadow: 0px 0px 10px rgba(108,108,108,0.5);
	-o-box-shadow: 0px 0px 0px rgba(108,108,108,0.5);
	-ms-box-shadow: 0px 0px 0px rgba(108,108,108,0.5);
}

/*メニューエリアの設定*/
nav{
	background:#000;
	width:100%;
	height:30px;
	background:-moz-linear-gradient(
    top,
    #000 0%,
    #000 95%,
    #ff8b35 95%,
    #ff8b35);
    background:-webkit-gradient(
    linear,left top,left bottom,
    from(#000),
    color-stop(0.95,#000),
    color-stop(0.95,#ff8b35),
    to(#ff8b35));
	opacity:0.8;
}

nav ul{
	width:960px;
	margin:0 auto;
}

nav ul li a{
	display:inline-block;
	width:160px;
	height:24px;
	padding-top:6px;
	float:left;
	color:#fff;
	text-align:center;
	position: relative;
	z-index: 2;
	background:-moz-linear-gradient(
    top,
    #000 0%,
    #000 95%,
    #ff8b35 95%,
    #ff8b35);
    background:-webkit-gradient(
    linear,left top,left bottom,
    from(#000),
    color-stop(0.95,#000),
    color-stop(0.95,#ff8b35),
    to(#ff8b35));
	overflow: hidden;
}

nav a:link,
nav a:visited{
	color:#fff;
}

nav a:hover{
	color:#fff;
	letter-spacing: 2px;
	-webkit-transition: all .3s;
	transition: all .3s;
}

nav a::before,
nav a::after{
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}

nav a::after{
	top: -100%;
	width: 100%;
	height: 100%;
	letter-spacing: 2px;
	-webkit-transition: all .2s;
	transition: all .2s;
}

nav a:hover::after{
	top: 0;
	background-color: #ff8b35;
}

/*ヘッダーエリアの設定*/

#header_img{
	background:url(../data/h1_back.jpg) no-repeat 0 0;
	width:960px;
	height:80px;
	position:relative;
}

h1{
	width:300px;
	height:65px;
	margin-left:50px;
	padding-top:15px;
	font-size:2em;
	background:rgba(0,0,0,.5);
	text-align:center;
	float:left;
}

h1 a:link,
h1 a:visited,
h1 a:active,
h1 a:hover{
	pacity:0.5;
	color:#ff8b35;
	text-shadow: 0px 1px 2px #000;
}

#header_img ul{
	width:100px;
	float:right;
	margin-top:20px;
	margin-right:10px;
}

#header_img ul li{
	width:30px;
	height:30px;
	padding-left:5px;
	float:right;
}

#header_img ul li:hover{
	opacity:0.5;
	-webkit-transition: all .3s;
	transition: all .3s;
}

#header_img p{
	width:30px;
	height:150px;
	padding-top:20px;
	padding-left:10px;
	background:#000;
	 -ms-writing-mode: tb-lr;            /* IE用　*/
     -webkit-writing-mode: vertical-lr;  /* chrome用　*/
     -o-writing-mode: vertical-lr;       /* opera用　*/
     writing-mode: vertical-lr;
	 position:absolute;
	 right:-41px;
	 color:#fff;
}

#header_img a:hover p{
	background:#ff8b35;
}

/*メインイメージの設定*/
/*RW11.12*/
#header_btm{
	width:960px;
	height:300px;
	margin-left:5px;
	margin-top:10px;
}

/*RW11.12*/
#mainimage{
	width:720px;
	height:300px;
	margin-left: 5px;
	float:left;
}

#mainimage ul{
	width:240px;
	height:300px;
	background:#E5DEDE;
	float:left;
}

#mainimage ul li{
	display:inline-block;
	width:240px;
	height:30px;
/*	background:#000;*/
	background:rgba(0,0,0,.4);
	margin-top:120px;
	text-align:center;
	font-size:1.5em;
}

#mainimage a:link,
#mainimage a:visited,
#mainimage a:active{
	color:#fff;
}

#mainimage a ul,
#mainimage a ul::before,
#mainimage a ul::after{
	-webkit-transition: all .3s;
	transition: all .3s;
}

#mainimage a ul{
	position: relative;
	z-index: 2;
	color: #fff;
}
#mainimage a ul:hover li{
	color: #ff8b35;
	background:rgba(0,0,0,.5);
}

#mainimage a ul::before,
#mainimage a ul::after{
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	
	top: 0;
	width: 50%;
	height: 100%;
}

#mainimage a ul::before{
	right: 0;
}

#mainimage a ul::after{
	left: 0;
}

#mainimage a ul:hover::before,
#mainimage a ul:hover::after{
	width: 0;
	background-color: #ff8b35;
}


#mainimage ul.tour{
	background:url(../data/tour.jpg) no-repeat 0 0;
}

#mainimage ul.goto{
	background:url(../data/goto.jpg) no-repeat 0 0;
}

#mainimage ul.variety{
	background:url(../data/variety.jpg) no-repeat 0 0;
}

#mainimage a{
	width:240px;
	height:300px;
}

/*各種連絡ボタンの設定*/
/*RW11.12*/
#contact_btn {
	width:225px;
	height:300px;
	float:left;
	background:#fff;
}
#contact_btn ul {
	padding-top:13px;
}

#contact_btn ul li {
	width:215px;
	height:40px;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:5px;
}

#contact_btn ul li a {
	display:inline-block;
	width:215px;
	height:30px;
	padding-top:8px;
	background-color: #ff6335;
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
	text-align:center;
	color:#fff;
	font-size:1.2em;
}

#contact_btn ul li a:hover {
	background-color: #ffb47d;
}

#contact_btn ul li a,
#contact_btn ul li a::before,
#contact_btn ul li a::after {
	-webkit-transition: all .5s;
	transition: all .5s;
}

/*contents内の基本設定 RW10.24*/
.section{
	margin:15px 5px 5px 5px;
}

.contents_section{
	background:#fff;
	border-radius: 0 0 5px 5px;        /* CSS3草案 */  
    -webkit-border-radius: 0 0 5px 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 0 0 5px 5px;   /* Firefox用 */  
}

h2{
	margin-left:-5px;
	padding-left:10px;
}

.title_section{
	height:35px;
	padding-top:5px;
	background:-moz-linear-gradient(
    top,
    #ff8b35 0%,
    #ff8b35 89%,
    #ff6335 90%,
    #ff6335);
    background:-webkit-gradient(
    linear,left top,left bottom,
    from(#ff8b35),
    color-stop(0.89,#ff8b35),
    color-stop(0.90,#ff6335),
    to(#ff6335));
	/* IE 10 */
	background: linear-gradient(to bottom,
    #ff8b35 0%,
    #ff8b35 89%,
    #ff6335 90%,
    #ff6335);
	border-radius: 5px 5px 0 0;        /* CSS3草案 */  
    -webkit-border-radius: 5px 5px 0 0;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px 5px 0 0;   /* Firefox用 */  
	/* IE 5.5-7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8b35', endColorstr='#ff6335', GradientType=0);
	/* IE 8+ */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8b35', endColorstr='#ff6335', GradientType=0)";
　	font-size:1.5rem;
	padding-left:10px;
	color:#fff;
}

/*RW11.12*/
#contents_middle_left{
	float:left;
}

#contents_middle_right{
	float:right;
}

/*RW11.12*/
/*愛知県サイクリング協会とはの基本設定*/
#explain{
	width:380px;
	/*height:170px;	*/
}

#explain .contents_section{
	height:60px;
	padding:10px;
	overflow-y:scroll;
}

/*お知らせの基本設定*/
/*RW11.12*/
#news{
	width:380px;
	/*height:170px;*/
}

/*RW11.12*/
#news .contents_section{
	height:130px;
	padding-top:10px;
	padding-left:10px;
	overflow-y:scroll;
}

#news .contents_section p{
	margin-bottom:7px;
	
}

#news .contents_section p a:link,
#news .contents_section p a:visited,
#news .contents_section p a:active{
	color:#676767;
}

#news .contents_section a{
	margin-bottom:7px;
}

#news .contents_section p a:hover{
	color:#9e9e9e;
}

.yellow{
	display:inline-block;
	margin-left:-5px;
	margin-right:5px;
	padding-left:5px;
	padding-right:5px;
	background: linear-gradient(transparent 40%, #fdfdab 40%);
	}
	
.red{
	display:inline-block;
	margin-left:-5px;
	margin-right:5px;
	padding-left:5px;
	padding-right:5px;
	background: linear-gradient(transparent 40%, #ffddf7 40%);
}

.green{
	display:inline-block;
	margin-left:-5px;
	margin-right:5px;
	padding-left:5px;
	padding-right:5px;
	background: linear-gradient(transparent 40%, #d5ffd5 40%);
}

.blue{
	display:inline-block;
	margin-left:-5px;
	margin-right:5px;
	padding-left:5px;
	padding-right:5px;
	background: linear-gradient(transparent 40%, #dafafe 40%);
}

/*イベントのお知らせの基本設定 RW10.24*/
/*RW 11.12*/
#event{
	width:560px;
	/*margin-top:10px;*/
}

/*RW 11.12*/
#event .contents_section{
	height:265px;
	padding-top:10px;
	padding-left:10px;
	overflow-y:scroll;
}

#event .contents_section a{
	display:inline-block;
	margin-left:10px;
}

#event .contents_section a dl{
	margin-bottom:7px;
}

#event .contents_section a dl dt{
	width:30px;
	float:left;
}

#event .contents_section a dl dd{
	width:450px;
	float:left;
	padding-left:20px;
}

#event .contents_section a:link,
#event .contents_section a:visited,
#event .contents_section a:active{
	color:#676767;
}

#event .contents_section a:hover{
	color:#9e9e9e;
}

dt .meeting{
	display:inline-block;
	margin-left:-5px;
	margin-right:50px;
	padding-left:5px;
	padding-right:50px;
	background: linear-gradient(transparent 40%, #ffddf7 40%);
}

dd .meeting{
	display:inline-block;
	padding-right:5px;
	background: linear-gradient(transparent 40%, #ffddf7 40%);
}

dt .goto{
	display:inline-block;
	margin-left:-5px;
	margin-right:50px;
	padding-left:5px;
	padding-right:50px;
	background: linear-gradient(transparent 40%, #d5ffd5 40%);
}

dd .goto{
	display:inline-block;
	padding-right:5px;
	background: linear-gradient(transparent 40%, #d5ffd5 40%);
}

dt .tour{
	display:inline-block;
	margin-left:-5px;
	margin-right:50px;
	padding-left:5px;
	padding-right:50px;
	background: linear-gradient(transparent 40%, #fdfdab 40%);
	}

dd .tour{
	display:inline-block;
	padding-right:5px;
	background: linear-gradient(transparent 40%, #fdfdab 40%);
}

dt .variety{
	display:inline-block;
	margin-left:-5px;
	margin-right:50px;
	padding-left:5px;
	padding-right:50px;
	background: linear-gradient(transparent 40%, #dafafe 40%);
	}

dd .variety{
	display:inline-block;
	padding-right:5px;
	background: linear-gradient(transparent 40%, #dafafe 40%);
}

/*ギャラリーの基本設定*/
#gallery{
	width:950px;
	height:629px;
}

#gallery .contents_section{
	height:594px;
}

#example3{
	padding-top:5px;
}

/*ギャラリーの基本設定*/
/*#sponsor{
	width:950px;
	height:100px;
	margin-top:10px;
	padding-bottom:5px;
}

#sponsor .contents_section{
	height:100px;
}

/*スポンサーの基本設定*/
#sponsor{
	width:950px;
/*	height:170px;*/
	height:510px;
	margin-top:10px;
	padding-bottom:5px;
}
/*RW10.24*/
#sponsor.section{
	margin-top:20px;
}

#sponsor .contents_section{
/*	height:170px;*/
	height:510px;
	border-radius: 5px 5px 5px 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px 5px 5px 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px 5px 5px 5px;   /* Firefox用 */
}

#sponsor ul{
	padding-top:5px;
	padding-left:75px;
}

#sponsor ul li{
	width:156px;
	height:76px;
	padding-left:5px;
	padding-top:5px;
	text-align:center;
	float:left;
	
}

/*フッターの基本設定*/
footer{
	background:-moz-linear-gradient(
    top,
    #ff8b35 0%,
    #ff8b35 10%,
    #000 10%,
    #000);
    background:-webkit-gradient(
    linear,left top,left bottom,
    from(#ff8b35),
    color-stop(0.1,#ff8b35),
    color-stop(0.1,#000),
    to(#000));
	width:100%;
	height:22px;
	padding-top:5px;
	padding-bottom:5px;
	opacity:0.8;
	position:relative;
}

footer p#page{
	padding-top:13px;
	width:105px;
	height:119px;
	background:url(../data/icon_pagetop.png) no-repeat;
	text-align:center;
	position:absolute;
	top:-360%;
}

footer p{
	width:960px;
	margin:0 auto;
	text-align:center;
	padding-top:2px;
}

footer a:link,
footer a:visited,
footer a:active{
	color:#fff;
}

footer a:hover{
	color:#fff;
	text-decoration:none;
}