@charset "utf-8";


/*@import url(slide.css);
*/
/*全端末（PC・タブレット・スマホ）共通設定
---------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #666;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 16px;	/*文字サイズ*/
	line-height: 1.5;		/*行間*/
	background: #fff;	/*全体の背景色（古いブラウザ用）*/
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,input,select,textarea {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
video {max-width: 100%;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #666;		/*リンクテキストの色*/
	transition: 0.4s;	/*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}
a:hover {
	color: #333333;			/*マウスオン時の文字色*/
}
 a[target="_blank"]::after {
    content: url("../images/external.png");
    margin: 0 16px 0 0;
} 


/*隠しテキスト
---------------------------------------------------------------------------*/
.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){
	position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/*コンテナー（footer以外を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	max-width: 1300px;	/*サイトの最大幅*/
	margin: 0 auto;
	padding: 0 3%;
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/

header div#head-logo {
	height: 180px;	/*ヘッダーの高さ*/
    padding: 20px 20px;
	background:  url(../images/header_img.png) no-repeat right top;
}
/*ロゴ画像*/
header div#head-logo #logo img {
	width: 500px;		/*画像の幅*/
	 background-color: #fff;
	padding: auto auto auto 50px;
}
header div#head-logo {
	font-size: 14px;
}
@media screen and (min-width: 800px) {/*スマホ用メニューを表示させない*/
	header #menubar-s {display: none;}
}
@media screen and (max-width: 799px) {/* スクリーンサイズが799px以下の場合に適用 */
	header {position: relative;}
	#page-head, header div#head-logo #bearsText, header #menubar {display: none;}
	header div#head-logo {height:100px; background-size: 136px 88px; background-position: right bottom ;}
	header div#head-logo #logo img {width: 300px; padding-left: 10px; background-color: #fff;}
	header {border-bottom:  #ff871e solid 8px; position: relative;}
	header #menubar-s {
		position: absolute;
		top: 0px;
		right: 0px;
		display: block;
		overflow-y: visible;
	}
	button#hamberger {
		position: absolute;
		top: 0px;
		right: 0px;
		width: 40px;
		height: 40px;
		border: none;
		padding: 0;
		display: inline-block;
		text-align: right;
	  }
	  button#hamberger img {
		vertical-align: middle;
	  }
	  #hamberger:hover, #hamberger:focus,
	  #hmenu a:hover, #hmenu a:focus {
		outline: 1px dotted #fff;
	  }
	  
	  #hmenu {
	  	position: absolute;
		top: 40px;
		right: 0px;
		width: 12em;
		margin: 0;
		padding: 15px;
		background: #000;
	  
	  }
	  #hmenu[aria-hidden="true"] {
		display: none;
	  }
	  #hmenu[aria-hidden="false"] {
		display: block;
		overflow: visible;

	  }
	  #hmenu[aria-hidden="false"] ul {
		margin:0;
		padding: 0;
	  }
	  #hmenu[aria-hidden="false"] ul li {
		list-style-type: none;
		margin: 0;
		padding: 0.25em 0;
	  }
	  #hmenu[aria-hidden="false"] ul li[aria-current="page"] {
		background-color: #999;
	  }
	  #hmenu[aria-hidden="false"] ul li a {
		color: #fff;
		display: block;
	  }


	  #hmenu[aria-hidden="false"] ul li:last-of-type {
			font-size: 80%;
	  }
	} 
  /*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロック*/
@media screen and (min-width: 800px) {/* スクリーンサイズが 800px以上の場合に適用 */ 
	header #menubar {
		display: block;
		background: #ff871e;	/*背景色と背景画像（古いブラウザ用）*/
		background: linear-gradient(#ffb371, #ff9e49, #ff871e );	/*背景画像の読み込み、グラデーション*/
		box-shadow: 1px 2px 7px rgba(0,0,0,0.2);		/*ボックスの影。右へ、下へ、広げる幅、0,0,0は黒のことで0.2は色が20%ついた状態のこと。*/
		border-radius: 10px;	/*角丸のサイズ*/
		text-align: center;		/*テキストをセンタリング*/
		padding: 0 4%;			/*上下、左右へのメニューブロック内の余白。*/
		margin-bottom: 30px;	/*メニューブロックの下(外側)に空けるスペース*/
	}
	header #menubar ul {
		display: flex;	
		flex-flow: row;
		justify-content: space-around;
	}
	/*メニュー１個あたりの設定*/
	header #menubar li {
		overflow: hidden;
		flex: 1;
		flex-basis: auto;
		line-height: 1.6;	/*行間*/
	}
	header #menubar li a {
		display:  inline-block;
		text-decoration: none;
		border-right: 1px solid rgba(0,0,0,0.1);	/*右側の線の幅・線種・色。0,0,0は黒の事で、0.1は色が10%ついた状態の事。*/
		border-left: 1px solid rgba(0,0,0,0.1);	/*左側の線の幅・線種・色。0,0,0は黒の事で、0.1は色が10%ついた状態の事。*/
		padding: 25px 25px;	/*上下、左右へのメニュー内の余白*/
		color: #222;		/*文字色*/
	}
	#toppage #menubar .tp a, 
	#aboutrv #menubar .rv a, 
	#aboutus #menubar .us a, 
	#memberwanted #menubar .mw a, 
	#schedule #menubar .sd a, 
	#linkpage #menubar .lp a, 
	#contactpage #menubar .contactus a {border-color: #666}


	
	/*マウスオン時の設定*/
	header #menubar li a:hover,
	header #menubar li a:focus {
		background: #ff871e;	/*背景色*/
		color: #000;
	}

	
}
/*コンテンツ（メインメニューとmainとsubを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	clear: both;overflow: hidden;
	padding-bottom: 40px;	/*下の余白。footerとの間のスペースになります。*/
}


/*mainコンテンツ
---------------------------------------------------------------------------*/
/*hタグの設定*/
#main h1 {
	width: 100%;
	text-align: center;
	vertical-align: middle;
	font-size: 200%;
}
#main h1::after { content: url(../images/rolling_v.png);
}


/*h2タグの設定*/
#main h2 {
	clear: both;
	margin-bottom: 20px;	/*見出しの下にとるスペース*/
	font-size: 16px;		/*文字サイズ*/
	padding: 12px 20px;		/*上下、左右への余白*/
	color: #444;			/*文字色*/
	border-radius: 10px;	/*角丸のサイズ*/
	background: #ff871e ;	/*背景色と背景画像（古いブラウザ用）*/
	background: linear-gradient(#ffb371, #ff9e49 49%, #ff871e 50%);	/*背景画像の読み込み、グラデーション*/
	box-shadow: 1px 2px 7px rgba(0,0,0,0.2);		/*ボックスの影。右へ、下へ、広げる幅、0,0,0は黒のことで0.2は色が20%ついた状態のこと。*/
}
#main h2::before { content: url(../images/h2title.png);
}

/*mainコンテンツのh3タグの設定*/
#main h3 {
	clear: both;
	margin-bottom: 20px;	/*見出しの下にとるスペース*/
	font-size: 15px;		/*文字サイズ*/
	padding: 8px 30px;		/*上下、左右への余白*/
	border-radius: 10px;	/*角丸のサイズ*/
	background: linear-gradient(#FFF, #e5e5e5);	/*背景グラデーション*/
	border: 1px solid #ccc;
}
/*段落タグ設定*/
#main p {
	padding: 0px 40px 20px;	/*上、左右、下への余白*/
}
/*他。微調整。*/
#main p + p {
	margin-top: -5px;
}
#main h2 + p,
#main h3 + p,
#main h4 + p {
	margin-top: -10px;
}
#topRule {
	width: 80%;
	margin: 0 auto;
}
.colums {
	display: flex;
	justify-content: space-between;
 	flex-wrap: wrap;
}

.item2 {
  padding: 15px;
  width: 44%;
}
.item3 {
  padding: 15px;
  width: 30%;
}

em {
	font-weight: bold;
	font-style: normal;
}
em.practiceDay {
	font-size: 110%;
}
.t-center {
	text-align: center;
}
.pc {
  	display: block;
  }
.sp {
	display: none;
}
@media not all and (min-width:799px) {
  .item2, .item3 {
    width: 100%;
  }

  .item2:not(:last-child), .item3:not(:last-child) {
    margin-bottom: 30px;
  }
  .pc {
  	display: none;
  }
.sp {
	display:block;
}

}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
}

@media screen and (min-width: 800px) {/* スクリーンサイズが 800px以上の場合に適用 */ 
	 footer #page-top {
		 margin: 0 ;
		 margin-left: auto;
		 padding-right: 0 ;
		 width:  60px;
		 display: block;
		 }
	footer div #footermenu {display: none;}

}

footer div {
	font-size: 85%;			/*文字サイズ*/
	background: #ff871e;	/*背景色*/
	color: #222;			/*文字色*/
}
@media screen and (max-width: 799px) {/* スクリーンサイズが799px以下の場合に適用 */
 footer #page-top { display: none;}

	
	footer div #footermenu ul li {
		margin-left: 0.5em;
		margin-right: 0.5em;
		display: inline-block;
	}
}footer div p {
	text-align: center;		/*文字をセンタリング*/
}
footer div a {text-decoration: underline;color: #444;}
footer div a:hover {color: #fff;}
#toppage #footermenu .tp a, 
#aboutrv #footermenu .rv a, 
#aboutus #footermenu .us a, 
#memberwanted #footermenu .mw a, 
#schedule #footermenu .sd a, 
#linkpage #footermenu .lp a, 
#contactpage #footermenu .contactus a {text-decoration: none;}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
#updateHistory ul {
	margin: 10px 30px;
} 
#updateHistory ul li {
	list-style-image: url(../images/maru-arrow.png);
	border-bottom: 1px dashed #ff871e;
	padding-left: 12px;
}
#updateHistory ul li time {
	padding-right: 1em;
}

/*ローリングバレーとは
---------------------------------------------------------------------------*/
#faul > div, #faul > p {
	padding: 10px;
}

#faul > div {
	flex: 3;
}
#faul > p {
	flex: 1;
}
@media not all and (min-width:799px) {

	#faul > div, #faul > p {
		width: 100%;
	}
}

#aboutrv dl {
	padding-left: 30px;
}
#aboutrv dl dt {
	font-weight: bold;
}
#aboutrv dl dd {
	padding-left: 3em;
	margin-bottom: 1em;
}

/*メンバー募集
---------------------------------------------------------------------------*/
#request dl {
	margin-left: 20px;
}
#request dt {
	font-weight: bold;
}
#request dd {
	margin-bottom: 1em;
}
#wanted li {
	list-style-image: url(../images/check.png);
	list-style-position: inside;
	padding-left: 20px;
}
#wanted li img {
	display: block;
}
/*活動予定日
---------------------------------------------------------------------------*/
#schedule ul.date {
}
#schedule ul.date li {
	list-style-image: url(../images/referee_whistle_R.png);
	list-style-position: inside;
	padding-left: 20px;
}
#schedule dl#game {
}
#schedule dl#game dt {
	padding-left: 20px;
	font-weight: bold;
}
#schedule dl#game dt::before { content: url(../images/referee_whistle_R.png);
}
#schedule dl#game dd {
	display: block;
	margin-left: 30px;
}

/*dlテーブル
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#linkpage dl {
    width:  80%; /* テーブルの横幅を500pxに指定 */
    border-top: 1px solid #ddd; /* テーブルの上の線 */
    border-left: 1px solid #ddd; /* テーブルの左の線 */
    margin: 20px auto;
    display: flex; /* 子要素のdtとddを横並びにする */
    flex-wrap: wrap; /* 1つのdtとddで1行になるよう改行させる */
}
#linkpage dl dt,
#linkpage dl dd {
    border-bottom: 1px solid #ddd; /* 各セルの下の線。テーブルの下の線も補える。 */
    border-right: 1px solid #ddd; /* 各セルの右の線。テーブルの右の線も補える。 */
    box-sizing: border-box; /* widthの計算を楽にするため */
    padding: 15px 30px; /* 各セルに余白を取る */
}
#linkpage dl dt {
    font-size: 16px; /* フォントサイズを16pxに指定 */
    width: 25%; /* dt（見出し項目）の横幅を200pxに指定 */
}
#linkpage dl dd {
    width: calc(100% - 25%); /* テーブル幅からdtを引いた分の横幅を指定。 */
    vertical-align: middle;
}

/* FOR smartphone landscape
***************************************************************************/
@media screen and (max-width:799px) {

    #linkpage dl {
        width: 100%; /* 横幅をpxではなく、幅いっぱいに指定。 */
        border-left: none; /* テーブルの左の線を消す */
        display: block; /* 横並びにさせないようブロック要素にする */
    }
    #linkpage dl dt,
    #linkpage dl dd {
        border-right: none; /* セルの右の線を消す */
        width: 100%; /* 横幅を幅いっぱいに指定 */
        padding: 10px 15px; /* 各セルに余白を取る */
    }
    #linkpage dl dt {
        border-bottom: none; /* 下の線を消す（ddの下の線が残る） */
        padding-bottom: 0; /*ddとの距離を近づけるため、0にする*/
    }

}


/*フォーム関連
---------------------------------------------------------------------------*/
form#mail_form * {
	margin: 0;
	padding: 0;
	box-sizing: content-box;
}

form#mail_form {
	mix-width: 800px;
	margin: 50px auto;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 7px;
	box-shadow: 0 0 7px rgba( 0, 0, 0, 0.2 );
	line-height: 1.8;
}

form#mail_form dl {
	width: 90%;
	margin: 0 auto;
	border-bottom: 1px solid #cccccc;
}

form#mail_form dl:after,
form#mail_form dl dt:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

form#mail_form dl dt {
	width: 30%;
	float: left;
	padding: 35px 0 25px;
	text-align: right;
}

form#mail_form dl dd {
	width: 65%;
	float: right;
	padding: 30px 0 25px 5%;
}



/* -- span.required, span.optional -------------------------------------------------------------------------------- */

form#mail_form dl dt strong {
	display: inline-block;
	font-size: 85%;
	color: #ffffff;
	padding: 4px 10px;
	margin-left: 1em;
	border-radius: 3px;
	background: #c00;
	border: 1px solid #d43f3a;
}


/* -- error message -------------------------------------------------------------------------------- */

form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match {
	display: block;
	color: #cc0000;
	margin-top: 5px;
}




/* -- loading -------------------------------------------------------------------------------- */

div.loading-layer {
	width: 100vw;
	height: 100vh;
	background: rgba( 0, 0, 0, 0.7 );
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 10000;
}

span.loading {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba( 255, 255, 255, 0.2 );
	border-right: 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
	border-left: 5px solid #ffffff;
	-webkit-transform: translateZ( 0 );
	-ms-transform: translateZ( 0 );
	transform: translateZ( 0 );
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}

@-webkit-keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

@keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}




/* -- input, select, textarea -------------------------------------------------------------------------------- */

form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"] {
	width: calc( 100% - 4% - 2px );
	padding: 7px 2%;
	border: 1px solid #cccccc;
	border-radius: 3px;
	background: #fafafa;
	-webkit-appearance: none;
	font-size: 16px;
	font-family: inherit;
	line-height: normal;
}

form#mail_form input[type="text"]:focus,
form#mail_form input[type="email"]:focus,
form#mail_form input[type="tel"]:focus,
form#mail_form textarea:focus {
	box-shadow: 0px 0px 5px #55ccff;
	border: 1px solid #55ccff;
	background: #ffffff;
}

form#mail_form ul li input[type="radio"],
form#mail_form ul li input[type="checkbox"] {
	margin: 0 10px 0 0;
}

form#mail_form select {
	padding: 7px 2%;
	border: 1px solid #cccccc;
	font-size: 16px;
	font-family: inherit;
	line-height: normal;
}

form#mail_form textarea {
	display: block;
	width: calc( 100% - 4% - 2px );
	height: 200px;
	padding: 7px 2%;
	resize: vertical;
	border: 1px solid #cccccc;
	border-radius: 3px;
	background: #fafafa;
	-webkit-appearance: none;
	font-size: 16px;
	font-family: inherit;
	line-height: normal;
}


/* -- ul, li ------------------------------------------------------------ */

form#mail_form ul {
	list-style-type: none;
}

form#mail_form ul li label {
	display: block;
	margin-top: 10px;
	padding: 7px 2%;
	border-radius: 3px;
	background: #f0f0f0;
}

form#mail_form ul li:first-child label {
	margin-top: 0px;
}

form#mail_form ul li label:hover {
	cursor: pointer;
	background: #e0e0e0;
}




/* -- input design -------------------------------------------------------------------------------- */

form#mail_form input.namae {
	width: 45%;
}
form#mail_form input#message-number {
	width: 3em;
}


form#mail_form dd {
	position: relative;
}

/* set up hidden tooltip */
form#mail_form span[role="tooltip"] {
	display: none;
	padding: 0.25em;
	margin: 0;
	color: #000;
	background: #EF8100;
	width: 50%;
	z-index: 2;
}

/* reveal associated tooltip on focus of preceeding input */
form#mail_form input:focus.namae + span[role="tooltip"] {
	display: block;
	position: absolute;
	top: -0.5em;
	left: 0;
}
form#mail_form input:focus.namae + span[role="tooltip"]:last-child {
	display: block;
	position: absolute;
	top: -0.5em;
	left: 50%;
}

/* -- button -------------------------------------------------------------------------------- */

form#mail_form p#form_submit {
	width: 90%;
	margin: 0 auto;
	padding: 30px 0;
}

form#mail_form p#form_submit input[type="submit"], form#mail_form p#form_submit input[type="reset"], form#mail_form p#form_submit input[type="button"] {
	padding: 10px 20px;
	margin: 5px 10px;
}

form#mail_form input[type="button"]:hover {
	cursor: pointer;
	background: #449d44;
	border: 1px solid #398439;
}

/* -- 確認画面 -------------------------------------------------------------------------------- */
#confirm {
	border-bottom: 10px solid  #ff871e;
}
form#mail_form dl#confirmTable {
	width:  90%;
	margin: 15px auto;
}
dl#confirmTable div {
	display:flex;
	justify-content:flex-start;
}

dl#confirmTable, dl#confirmTable div dt, dl#confirmTable div dd {
	border: 1px solid #999;
}
dl#confirmTable div dt, dl#confirmTable div dd {
	padding: 10px;
    box-sizing: border-box; /* widthの計算を楽にするため */
}
dl#confirmTable div dt {
	text-align: right;
	width: 20%;
	background: #ffead6;

}
dl#confirmTable div dd {
	width: calc(100% - 20%);
	border-left: none;
}

dl#confirmTable div:nth-child(even) dd
 {
	background: #ffefe0;
}
dl#confirmTable div:nth-child(odd) dd {
	background: #fff9f4;
}

#secretariat {
	margin: 10px 0 10px auto1;
	width: 250px;
}

p.error_messe {
	color: #c00;
	font-weight: bold;
}

/* -- responsive ----------------------------------------------------------------------------------------------------------------------- */

/* 1000pixel start */
@media screen and ( max-width: 799px ) {


/* -- form#mail_form, dl, dt, dd -------------------------------------------------------------------------------- */

	form#mail_form {
		width: 95%;
		font-size: 100%;
	}

	form#mail_form dl dt {
		width: auto;
		float: none;
		padding: 25px 0 10px;
		text-align: left;
		font-weight: bold;
	}

	form#mail_form dl dd {
		width: auto;
		float: none;
		padding: 0px 0 20px 0px;
	}

	form#mail_form dl dt i {
		float: none;
		position: static;
		font-weight: normal;
	}




/* -- span.required, span.optional -------------------------------------------------------------------------------- */

	form#mail_form dl dt strong {
		margin: 0 15px 0 0;
	}




	/* -- input design -------------------------------------------------------------------------------- */

	form#mail_form textarea {
		width: 80%;
	}




	/* -- button -------------------------------------------------------------------------------- */

	form#mail_form p#form_submit {
		padding: 25px 0;
	}

	form#mail_form input[type="button"] {
		margin-left: 0;
	}

}
/* 1000pixel end */




/*checkブロック。赤い注意書きブロックです。
---------------------------------------------------------------------------*/
p.check {
	background: #ff0000;
	color:#fff;
	padding: 10px 25px !important;
	margin-bottom: 20px;
}
p.check a {color: #fff;}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 70%;		/*文字サイズ*/
	line-height: 1.5;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	list-style: disc;
	padding: 0 40px 20px 60px;
}
ol {
	padding: 0 40px 20px 65px;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #ccc;color: #333;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb30 {margin-bottom: 30px !important;}
.clear {clear: both;}
.color1, .color1 a {color: #f13a7f;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr {float: right;margin-left: 10px;margin-bottom: 10px;width: 30%;}
img.fl {float: left;margin-right: 10px;margin-bottom: 10px;width: 30%;}
.big1 {font-size: 24px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}