@charset "utf-8";
/* ここは変更しない　
--------------------------------------------------------------------------*/

body {
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
	font-size: 80%;
	line-height: 2;	/*全体の行間*/
	color: #333333;	/*全体の文字色*/
	margin: 0px;
	padding: 0px;
	text-align: center;
	background-image: url(images/rule_bg.jpg);	/*背景画像*/
	background-repeat: repeat-y;			/*背景画像をリピートしない設定*/
	background-position: center top;		/*背景画像を中央の上部に配置する設定*/
}
h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, form {
	margin: 0px;
	padding: 0px;
}
ul {
	list-style-type: none;
}
img {
	border: none;
}
p {
	padding: 0.5em 0;
}
h3 {
	color: #666;
	font-size: 110%;
	background-image: url(images/rule_bar_02.gif);
	background-repeat: no-repeat;
	background-position: center;
	padding-left: 10px;
}
h3 span {
	display: block;
	float: right;
	padding: 0 10px 0 0;
}
div.right {
	float: right;
	width: 220px;
}
/*-------------------------------------------------------------------------- 
ここまで変更しない */

/*リンクの全般設定
---------------------------------------------------------------------------*/
a:hover {
	color: #FF7F00;			/*カーソルオーバー時の文字色*/
	text-decoration: none;	/*カーソルオーバー時にアンダーラインを消す設定。残したいならこの1行を削除。*/
}
/*HP枠
---------------------------------------------------------------------------*/
#wrapper {
	text-align: left;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 1px;
	padding-left: 1px;
}
/*ヘッダー
---------------------------------------------------------------------------*/
#header {
	background-image: url(images/rule_header_001.jpg);	/*ヘッダー背景画像設定。*/
	background-repeat: no-repeat;
	border-top: 3px solid #ffa800;	/*ヘッダー上部のオレンジのライン。*/
	width: 900px;
	height: 250px;
}
#header h1 {
	font-size: 130%;
	line-height: 1.2;
	float: right;
	margin-top: 5px;
	margin-right: 10px;   /*h1テキストの位置指定（右側の余白調整）*/
}
#header a img {
	margin-top: 10px;  /*ヘッダーロゴの位置指定（左側の余白調整）*/
}
/*グローバルナビゲーション
---------------------------------------------------------------------------*/
#gnavi {
	width: 900px;
}
#gnavi ul li {
	display: block;
	float: left;
}
/*main、subブロックを囲むボックス
---------------------------------------------------------------------------*/
#contents {
	clear: both;	/*メインメニューのフロート解除*/
	width: 900px;
}
/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
	float: right;			/*右側に配置させる設定*/
	margin-right: 10px;		/*右側に余白を設ける*/
	width: 620px;			/*幅*/
	display: inline;		/*IE6用対策*/
	padding-bottom: 50px;	/*下余白*/
	padding-top: 20px;		/*上余白*/
}
#main h2 {
	font-size: 130%;
	line-height: 38px;
	height: 38px;
	color: #FFFFFF;	/*文字色*/
	background-image: url(images/rule_bar.png);	/*h2背景画像*/
	background-repeat: no-repeat;	/*背景画像をリピートさせない*/
	overflow: hidden;	/*文字オーバー分は非表示にする*/
	margin: 0 0 20px 0;
	padding-left: 60px;	/*左側への余白*/
	padding-right: 10px;/*右側への余白*/
}
#main p {
	margin: 1em 0;
	padding-right: 10px;
	padding-left: 10px;
	text-align: left;  /*テキストを左端揃えにする*/
	text-justify: distribute-all-lines;  /*IEでも両端揃えにする為の独自規格を指定*/
}
#main .section {
	margin: 0 0 20px 0;
	overflow: hidden;
}
#main .section:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
#main .section .leftBox {
	float: left;
	width: 240px;
	padding: 20px 10px 0 10px;
}
#main .section .rightBox {
	float: right;
	width: 360px;
}
#main .section dl dt {
	clear: none;
	border-left: solid 5px #ccc;
	width: 350px;
	margin: 0 0 15px 0;
	padding: 0 0 0 5px;
}
#main .section dl dd {
	clear: both;
	border: none;
	margin: 0;
	padding: 0;
}
#main .section ul.gallery {
	padding: 20px 10px 0 10px;
}
#main .section ul.gallery li {
	display: block;
	float: left;
	width: 180px;
	padding: 0 20px 10px 0;
}
/*サブコンテンツ
---------------------------------------------------------------------------*/
#side {
	float: left;			/*左側に配置させる設定*/
	margin-top: 20px;       /*上側に余白を設ける*/
	margin-left: 10px;		/*左側に余白を設ける*/
	margin-bottom: 0px;
	width: 220px;			/*幅*/
	display: inline;		/*IE6用対策*/
}
#side p {
	padding: 0;
}

#side2 {
	float: left;			/*左側に配置させる設定*/
	margin-top: 0px;       /*上側に余白を設ける*/
	margin-left: 0px;		/*左側に余白を設ける*/
	margin-bottom: 0px;
	width: 220px;			/*幅*/
	display: inline;		/*IE6用対策*/
}
#side2 p {
	padding: 0;
}
/*　サイドボックス設定
----------------------------------------------*/
#side div.sideBox {
	background: #FFF;
	border: 1px solid #DDDDDD;
	margin-bottom: 0px;
	width: 218px;
	line-height: 1.6;
	overflow: hidden;
}
#side div.sideBox div.sideBoxInner5 {
	margin: 10px auto;
	width: 208px;
}
#side div.sideBox div.sideBoxInner5 p {
	margin-bottom: 1em;
}
#side div.sideBox div.sideBoxInner10 {
	margin: 10px auto;
	width: 198px;
}
#side div.sideBox div.sideBoxInner10 p {
	margin-bottom: 1em;
}
#side div.sideBox dl {
	margin: 0;
	overflow: hidden;
}
#side div.sideBox dl dt {
	clear: none !important;
	border-left: solid 3px #ffd671 !important;
	width: 50px !important;
	margin: 0 0 8px 0 !important;
	padding: 0 0 0 5px !important;
}
#side div.sideBox dl dd {
	float: left !important;
	border: none !important;
	width: 138px !important;
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
}

/*　サイドボックス設定2
----------------------------------------------*/
#side div.sideBox2 {
	background: #FFF;
	border: 1px solid #DDDDDD;
	margin-bottom: 20px;
	width: 218px;
	line-height: 1.6;
	overflow: hidden;
}
#side div.sideBox2 div.sideBoxInner5 {
	margin: 10px auto;
	width: 208px;
}
#side div.sideBox2 div.sideBoxInner5 p {
	margin-bottom: 1em;
}
#side div.sideBox2 div.sideBoxInner10 {
	margin: 10px auto;
	width: 198px;
}
#side div.sideBox2 div.sideBoxInner10 p {
	margin-bottom: 1em;
}
#side div.sideBox2 dl {
	margin: 0;
	overflow: hidden;
}
#side div.sideBox2 dl dt {
	clear: none !important;
	border-left: solid 3px #ffd671 !important;
	width: 50px !important;
	margin: 0 0 8px 0 !important;
	padding: 0 0 0 5px !important;
}
#side div.sideBox2 dl dd {
	float: left !important;
	border: none !important;
	width: 138px !important;
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
}

/*　サイドバナー
----------------------------------------------*/
#side div.sideBnr {
	margin: 0 0 0px 0;
}
#side div.sideBnr p {
	margin: 0 0 10px 0;
}
/*　不思議なバドミントン物語のフォーム設定
----------------------------------------------*/
#side div#storyForm {
	width: 198px;
}
#side div#storyForm td {
	padding-bottom: 5px;
	text-align: left;
}
#side div#storyForm td input.name {
	width: 100px;
}
#side div#storyForm td input.email {
	margin-bottom: 10px;
	width: 194px;
}
/*フッター
---------------------------------------------------------------------------*/
#footer {
	clear: both;
	width: 900px;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-align: center;
	border-bottom: 3px solid #ffa800;     /*フッター下部のオレンジのライン*/
}
/*フッターメニュー
---------------------------------------------------------------------------*/
#footer ul {
	clear: both;
	width: 100%;
	text-align: center;
	font-size: 12px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-image: url(images/rule_footer.jpg);
	background-repeat: no-repeats;
	background-position: bottom;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}
#footer ul li {
	display: inline;
	padding-right: 10px;
	padding-left: 10px;
}
#footer ul li a {
	color: #333333;
	text-decoration: none;
}
#footer ul li a:hover {
	color: #FF7F00;			/*カーソルオーバー時の文字色*/
	text-decoration: none;	/*カーソルオーバー時にアンダーラインを消す設定。残したいならこの1行を削除。*/
}
/*競技規則ページのリスト設定
---------------------------------------------------------------------------*/
dl {
	margin-top: 20px;
}
dl dt {
	clear: left;
	float: left;
	width: 10em;
	border-left: solid 8px #ccc;
	padding-left: 5px;
}
dl dd {
	margin-bottom: 0.8em;
	margin-left: 10em;
	border-bottom: solid 1px #ccc;
}
dl.sup5 dt {
	float: none;
	width: 620px;
	border-left: solid 8px #ccc;
	padding-left: 5px;
}
dl.sup5 dt dd {
	margin-bottom: 0.8em;
	margin-left: 20em;
	border-bottom: solid 1px #ccc;
}
td {
	width: 33%;
	text-align: center;
}
#main dl dd img.clause {
	margin: 5px 5px 5px 0;
	padding: 2px;
	border: solid 1px #999;
}
#main ul.caption li.caption {
	margin: 0;
	list-style-type: none;
	text-align: center;
	color: #F00;
}
/*動画
---------------------------------------------------------------------------*/
#main object#Player {
	width: 320px;
	height: 305px;
	margin: 0 auto;
	display: block;
	text-align: center;
}
/*ひとこと設定
---------------------------------------------------------------------------*/
#main p.comment {
	margin: 0;
	background-color: #FC6;
}
/*よくある質問ページのリスト設定
---------------------------------------------------------------------------*/
ul li.q {
	width: auto;
	margin-top: 1.5em;
	background-image: url(images/rule_q.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 40px;
}
/*回答ページのリスト設定
---------------------------------------------------------------------------*/
dl.answer dt.answer {
	clear: left;
	float: left;
	width: auto;
	margin: 0.5em 0;
	border-left: none;
	border-bottom: 1px solid;
	background-image: url(images/rule_q.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
	font-size: 16px;
	color: #03F;
}
dl.answer dd.answer {
	clear: left;
	width: auto;
	margin: 2em 2em;
	border-bottom: none;
}
dl.answer dt.answer_02 {
	clear: left;
	float: left;
	width: auto;
	margin: 0.5em 0;
	border-left: none;
	border-bottom: 1px solid;
	background-image: url(images/rule_a.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
	font-size: 16px;
	color:#F00;
}
div#main p.answer {
	text-align: right;
}
/*教材ページのリスト設定
---------------------------------------------------------------------------*/
ul li.teach {
	margin-left: 10px;
	background: url(images/check01.gif) no-repeat left center;
	padding-left:30px;
}
dl.teach {
	margin: 20px 0;
}
dl dt.teach {
	clear: left;
	float: left;
	width: 15em;
}
dl dd.teach {
	border-bottom: none;
}
dl dd.teach li {
	margin-left: 8em;
}
img.teach {
	margin-left: 80px;
}
img.teach_banner {
	margin-top: 20px;
}
p.teach {
	font-size: 18px;
}
p.teach_value {
	color: #F00;
}
span.value {
	font-size: 24px;
	font-weight: bold;
}
img.send {
	margin: 10px 0 0 50px;
}
dt.sm {
	float: none;
	border:none;
	padding-left: 10px;
}
dd.sm {
	border: none;
}
div.text_area_profile {
	width:400px;
	float:left;
}
div.profile {
	width: 200px;
	float: right;
}
div.profile p img {
	clear: both;
}
/* レスポンシブ対応
 * add 2018/04/13 
 */
@media screen and (max-width: 640px) {
div#wrapper {
	padding: 0;
	  width:100%;
	   display: flex;
 flex-direction: column;
}
div#contents {
	  width:100%;
	   display: flex;
 flex-direction: column; 
}
div#main {
	  width:100%;
	  margin: 0;
	    order: 1;
}
div#main h2{
	 font-size: 4vw;
}
div#main p img{
	  width:100%;
	  height:auto;
}
div#main .section p img{
	  width:auto;
	  height:auto;
}

div#main .section ul.gallery
{
padding: 5px 5px 5px 5px;
}
div#main .section ul.gallery li{
	  padding: 0;
	  width: 49%;
	  border: 1px solid #F2F2E6;
}
div#main .section ul.gallery li img{
	  width: 100%;
	 height: auto;
	 
}
div#main img[alt=ひとこと]{
	  width: auto;
}
div#main img[alt=ダブルスマッチの進め方]{
	    width: 100%;
	  height: auto;
}
div#main dd img{
	  width: 100%;
	  height: auto;
}
div#main table{
	  width: 100%;
}

#main dl dd{

margin-left:2em;

}

#main dl dt{
margin-right:2em;
width:auto;

}
div#side {
	  width:100%;
	    margin: 0;
	    order: 2;
}

div#side2 {
	  width:100%;
	    margin: 0;
	    order: 2;
}

div#side .sideBox{
	  width:100%;
	    margin: 0;
	    /*text-align: center;*/
	    border: 0;
	
}

div#side2 .sideBox2{
	  width:100%;
	    margin: 0;
	    /*text-align: center;*/
	    border: 0;
	
}

div#side h5{
background-color: #FFD76A;
	
}
div#side div.sideBox dl dd
{

	width: 100%;
}

div#side div.sideBnr{
/*text-align: center;*/
margin: 10px;


}
div#side div.sideBnr img{
width: 100%;
height: auto;


}

div#side div.sideBox dl dt{width: 15% !important;}
div#side div.sideBox dl dd{width: 80% !important;}

div#side div.sideBox div.sideBoxInner10
{

	margin: 0;
	width: auto;

}
div#side div.sideBoxInner5  img
{

width: 100%;
height: auto;

}
#storyForm{
	margin: auto;
}
div.section {
	  width:100%;
	   
}
div#gnavi {
	  width:100%;
	   
}
div#header {
	  width:100%;
	   height: auto;
}

div#header h1{
	  font-size: 4vw;
}

div#footer {
	  width:100%;
	   
}

	dl.sup5 dt{  width:100%;}

#footer ul li{
	display: block;
}

#gnavi ul{
	text-align: center;
	}
#gnavi ul li{
	display: contents;
	
	margin: 5px;
	}

	#gnavi ul li img{
		width: 128px;
	}
#header img{
	width: 50%;
	height: 50%;
}

.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

/*dl dt{width: 100%;}*/

div#main div.section div.rightBox,div#main div.section div.rightBox dl dt{width: 90%;}

div#side div#storyForm input{
	width: 100%;
border-radius: 5px;

font-size:1.4em;
}
#main dl dd img.clause{margin: 0;
border: 0;padding: 0;
margin-top: 5px;}


a[href="profile.html"]{
display: none;
}



#main p{
	margin: 0;
border: 0;padding: 0;

}
div.text_area_profile{
	width: 100%;
}
input:focus, select:focus, textarea:focus {
background: #bde9ba;

}


}