@charset "utf-8";

/*============================================
全般的なスタイル
============================================*/
*{
	margin:0; padding:0; 		/*全要素のマージン・パディングをリセット*/
}
body {
	background-color:#cccccc;	/*ページ全体の背景色*/
	background-image:url("images/bg_body.png");	/*ウェブページ全体の背景画像*/
	font-size:95%;			/* フォントサイズを95%にする */
	font-family: "ＭＳ ゴシック",sans-serif;	/* フォントの種類をゴシック系にする */
	line-height:1.5;		/* 行の高さを1.5倍にする */
	color:#333333;			/* 文字色を濃い目のグレーにする */
}
div#pagebody {
	width:1000px; margin:0 auto;			/*内容全体をセンタリング*/
	background-color:#ffffff;			/*内容全体の背景色*/
	background-image:url("images/bg_pagebody.png");	/*コンテンツ全体の背景画像*/
	background-repeat:repeat-y;			/*背景画像を縦方向に繰り返す*/
}
img {border:0;} 				/*画像のボーダーを0にする*/

p {
	width:900px;			/*幅の指定*/
	margin:0px 0px 0px 0px;		/*マージン*/
	padding:0px 0px 0px 0px;

}

p.mb-100 {
	margin-bottom: 100px;
}

p.mt-100 {
	margin: 200px 100px 100px 100px;
}


hr {
	clear:both;		/*フロート配置をクリアする*/
	width:680px;		/*幅の指定*/
	margin:10px 0px;		/*マージン*/
	border:1px dotted #cccccc;	/*内容の区切りをグレーの点線表示にする*/
}

/*============================================
ヘッダ
============================================*/
div#header {
	height:50px;				/*ヘッダ部分の高さ*/
}
div#header h1 {
	padding:10px 0px 5px 20px;		/*見出しの位置調整*/
	font-size:18px;				/*フォントのサイズ*/
	font-family:Arial, Helvetica, sans-serif;	/*フォントの種類*/
}
div#header h1 a {text-decoration:none;} 	/*リンクの下線を無くす*/

/*============================================
メインメニュー
============================================*/
ul#menu {
	width:960px; height:50px; 	/*メインメニュー部分の幅と高さ*/
	margin:5px 20px 5px 20px; 		/*上下マージン0px、左右マージン20px*/
}
#menu li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline;			/*リスト項目をインライン表示にする*/
	float:left;			/*リスト項目を横に並べる*/
}
#menu li a {
	background-color:#005fff;		/*背景色*/
	color:#ffffff;			/*文字色*/
	display:block;			/*リンク部分をブロック表示にする*/
	width:160px; height:35px;	/*幅と高さ*/
	padding:15px 0px 0px 0px;	/*上パディング*/
	text-align:center;		/*テキストをセンター揃えにする*/
	text-decoration:none;		/*リンク部分を下線無しにする*/
	background-image:url(images/bg_menu22.png);	/*背景画像を指定*/
	background-repeat:no-repeat; 			/*背景画像を繰り返さない*/
}
#menu li a:hover {
	background-color:#5507ff;	/*リンクにマウスが乗ったら背景色を変更する*/
	background-image:url(images/bg_menu12.png); 	/*リンクにマウスが乗ったら背景画像を変更する*/
}

/*============================================
ヘッダ画像
============================================*/
#img_index {
	width:980px; height:335px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 20px;		/*マージン*/
}

#img_nenindex {
	width:770px; height:160px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 110px 0px 110px;		/*マージン*/
}

/*============================================
募集ヘッダ画像
============================================*/
#img_bosyu{
	width:800px; height:1000px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:10px 110px 0px 140px;		/*マージン*/
}

#img_txtbosyu{
	width:1000px; height:60px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:10px 0px 0px 45px;		/*マージン*/
}

/* --- ハンバーガーボタンの基本スタイル（PCでは非表示） --- */
#nav-toggle {
    display: none;
    cursor: pointer;
    padding: 10px;
    background: #333;
    color: #fff;
    text-align: center;
}

/* --- スマホ用設定 --- */
/* --- スマホ用設定 --- */
@media screen and (max-width: 768px) {
    /* 全体の幅固定を解除してスマホに合わせる */
    div#pagebody, p, ul#menu, div#header, div#submenu, div#info, .msg, .itop, .toiawase {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box; /* パディングを含めた幅計算 */
    }

    #nav-toggle {
        display: block;
        position: relative;
        height: 50px;
    }

    /* 三本線のデザインとアニメーション準備 */
    #nav-toggle span {
        display: block;
        position: absolute;
        width: 30px;
        height: 2px;
        background: white;
        left: 50%;
        margin-left: -15px;
        transition: all 0.4s; /* アニメーションの速度 */
    }

    /* 線の位置 */
    #nav-toggle span:nth-child(1) { top: 15px; }
    #nav-toggle span:nth-child(2) { top: 25px; }
    #nav-toggle span:nth-child(3) { top: 35px; }

    /* メニューが開いた時（openクラス時）のX印への変形 */
    #nav-toggle.open span:nth-child(1) {
        transform: translateY(10px) rotate(-45deg);
    }
    #nav-toggle.open span:nth-child(2) {
        opacity: 0; /* 真ん中の線を消す */
    }
    #nav-toggle.open span:nth-child(3) {
        transform: translateY(-10px) rotate(45deg);
    }

    #menu {
        display: none;
        float: none; /* 回り込み解除 */
    }

    #menu.open {
        display: block;
    }

    #menu li {
        float: none;
        width: 100%;
    }
    
    #menu li a {
        width: 100%;
        background-image: none; /* スマホでは背景画像を消した方が見やすい */
    }
}

/*============================================
サブメニュー（左カラム）
============================================*/
h2 {
	font-size:14px;			/*文字サイズ*/
	width:540px;			/*横幅*/
	margin:5px 0px 10px 0px;	/*マージン*/
	padding:10px 0px 10px 10px;	/*パディング*/
	background-color:#005fff;	/*背景色*/
	color:#ffffff;			/*文字色*/
	border-radius:3px;		/*角丸にする*/
}

h4 {
	font-size:14px;			/*文字サイズ*/
	width:540px;			/*横幅*/
	margin:5px 0px 10px 0px;	/*マージン*/
	padding:10px 0px 10px 10px;	/*パディング*/
	background-color:#ff00ff;	/*背景色*/
	color:#ffffff;			/*文字色*/
	border-radius:3px;		/*角丸にする*/
}

h10 {
	font-size:14px;			/*文字サイズ*/
	width:100px;			/*横幅*/
	margin:10px 0px 10px 40px;	/*マージン*/
	padding:10px 10px 10px 10px;	/*パディング*/
	background-color:#3366cc;	/*背景色*/
	color:#ffffff;			/*文字色*/
	border-radius:3px;		/*角丸にする*/
}

.keiji {
    width:540px;
    margin: 0.5em 0 1em 0;
    background: #eeeeee;
}
.keiji .keiji-title {
    font-size: 1.2em;
    background: #00dd00;
    padding: 4px;
    text-align: left;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.keiji p {
    width:540px;
    padding: 15px 10px;
    margin: 0;
}

.msg {
    width:960px;
    margin: 10px 20px 10px;
    background: #eeeeee;
}
.msg .msg-title {
    font-size: 1.2em;
    background: #00dd00;
    color:#FFF;
    padding: 4px;
    text-align: left;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.msg p {
    width:900px;
    padding: 10px 20px;
    margin: 0;
}


.coat {
    width:80px;
    margin: 0.5em 0 1em 0;
    background: #ffdbc9;
}
.coat .coat-title {
    font-size: 1.0em;
    background: #ff5f17;
    padding: 4px;
    text-align: left;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.coat p {
    width:360px;
    padding: 15px 10px;
    margin: 0;
}

.map p {
    width:500px;
    padding: 15px 5px;
    margin: 15px 0 0 0;
}


div#submenu {
	width:960px;			/*幅の指定*/
	margin:0px 0px 0px 0px;	/*位置調整*/
}

p.infobox{
   height: 30.5em;  /* 高さを制限(※) */
   width: 370px;
   overflow: auto; /* スクロールバーを表示(※) */
   border: solid #d7d7d7 1px ;  /* 枠線を追加 */
   background-color: #f4f4f4; /* 背景色を追加 */
	padding: 10px 10px 0px 10px ;
	margin-top: 0px;
   
}

p.courtbox{
   height: 2.0em;  /* 高さを制限(※) */
   width: 350px;
    border: solid #d7d7d7 1px ;  /* 枠線を追加 */
   background-color: #f4f4f4; /* 背景色を追加 */
	padding: 10px 10px 0px 10px ;
	margin-top: 0px;
   
}
div#submenu ul li {
	list-style-type:none;		/*リストマーカー無しにする*/
}
div#submenu ul li a {
	display:block;			/*リンク部分をブロック表示にする*/
	height:45px;			/*高さを45pxにする*/
	padding:15px 0px 0px 30px;	/*パディング*/
	text-decoration:none;		/*リンクの下線を無くす*/
	border-bottom:1px dotted gray;	/*リンク領域の下部にボーダーを付ける*/
	background-image:url(images/bg_submenu.png);	/*リンク領域に背景画像を付ける*/
	background-repeat:no-repeat;	/*背景画像を繰り返さない*/
	color:#333333;			/*文字色*/
}
div#submenu ul li:first-child a {
	border-top:1px dotted gray;	/*一番上のリンクに上線を表示*/
}
div#submenu ul li a:hover	{
	text-decoration:underline;	/*リンクにマウスが乗ったら下線を表示*/
}
div#submenu ul li a:before {
	content: url("images/icon_submenu.png");/*アイコン画像を挿入*/
	margin:0px 10px 0px 0px;		/*マージン*/
	vertical-align:text-top;		/*縦方向の表示位置*/
}

/*============================================
インフォメーション（右カラム）
============================================*/
div#info {
	width:390px;			/*幅の指定*/
	float:right;			/*カラムを左寄せにする*/
	padding:10px 30px 0px 10px;	/*パディング*/
}
h3 {
	font-size:14px;			/*文字サイズ*/
	width:370px;			/*横幅*/
	float:right;
	margin:5px 0px 10px 0px;	/*マージン*/
	padding:10px 0px 10px 20px;	/*パディング*/
	background-color:#003399;	/*背景色*/
	color:#ffffff;			/*文字色*/
	border-radius:3px;		/*角丸にする*/
}

.inforight {
	font-size:14px;			/*文字サイズ*/
	width:390px;			/*横幅*/
	margin:10px 0px 10px 0px;	/*マージン*/
	padding:10px 110px 10px 20px;	/*パディング*/
	background-color:#003399;	/*背景色*/
	color:#ffffff;			/*文字色*/
	border-radius:3px;		/*角丸にする*/
}

.infoimg_index {
	width:200px; height:150px;	/*画像の表示サイズを指定*/
	margin:10px 0px 10px 10px;	/*マージン*/
	float:right;			/*画像を右寄せにする*/
}

.infoimg_index1 {
	width:120px; height:150px;	/*画像の表示サイズを指定*/
	margin:10px 0px 10px 10px;	/*マージン*/
	float:right;			/*画像を右寄せにする*/
}

.flimg_index {
	width:200px; height:290px;	/*画像の表示サイズを指定*/
	margin:10px 0px 10px 10px;	/*マージン*/
	float:right;			/*画像を右寄せにする*/
}

.flimg_index1 {
	width:200px; height:200px;	/*画像の表示サイズを指定*/
	margin:10px 0px 10px 10px;	/*マージン*/
	float:right;			/*画像を右寄せにする*/
}

.flimg_index2 {
	width:350px; height:190px;	/*画像の表示サイズを指定*/
	margin:10px 0px 10px 10px;	/*マージン*/
	float:left;			/*画像を左寄せにする*/
}

.flimg_index3 {
	width:380px; height:215px;	/*画像の表示サイズを指定*/
	margin:10px 0px 10px 10px;	/*マージン*/
	float:right;			/*画像を左寄せにする*/
}

hr {
	clear:both;			/*フロート配置をクリアする*/
}

/*============================================
フッタ
============================================*/
div#footer {
	clear:both;			/*回り込みを解除する*/
	height:40px;			/*高さの指定*/
	padding:10px 0px 0px 0px;	/*パディング*/
	font-size:small;		/*フォントサイズを小さくする*/
	text-align:center;		/*センタリング*/
}

/*============================================
katsudo スタイル
============================================*/
p.plan{
	width:1000px;
	font-size:x-large;
}

caption.a{font-size:x-large;}

/*============================================
gallery スタイル
============================================*/
p.gallery{
	width:1000px;
	margin:20px 0px 0px 60px;
	font-size:x-large;
}

p.gallery2022{
	width:1000px;
	font-size:x-large;
}

div#g1_index {
	width:600px; height:400px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:30px 0px 0px 250px;		/*マージン*/
}

div#g0917_index {
	width:600px; height:1100px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:30px 0px 0px 200px;		/*マージン*/
	font-size:x-large;
}

div#g0923_index {
	width:700px; height:1650px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 200px;		/*マージン*/
	font-size:large;
}

div#g1103_index {
	width:800px; height:1250px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 50px;		/*マージン*/
	font-size:large;
}

div#g1202_index {
	width:800px; height:1350px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 50px;		/*マージン*/
	font-size:large;
}

div#g1118_index {
	width:800px; height:850px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g0503_index {
	width:600px; height:650px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:30px 0px 0px 250px;		/*マージン*/
}

div#g429_index {
	width:600px; height:500px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:30px 0px 0px 250px;		/*マージン*/
}

div#g1404_index {
	width:800px; height:970px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 50px;		/*マージン*/
	font-size:large;
}

div#g190429_index {
	width:700px; height:1330px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 200px;		/*マージン*/
	font-size:large;
}

div#g190503_index {
	width:800px; height:1100px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g190519_index {
	width:800px; height:900px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g190616_index {
	width:800px; height:2850px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g190901_index {
	width:800px; height:700px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g190929_index {
	width:800px; height:1600px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g191104_index {
	width:800px; height:1200px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g191117_index {
	width:800px; height:1350px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g191201_index {
	width:800px; height:2300px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g20200105_index {
	width:800px; height:1700px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g20200202_index {
	width:800px; height:2600px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g20201115_index {
	width:800px; height:2800px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 110px;		/*マージン*/
	font-size:large;
}

div#g201129_index {
	width:800px; height:3550px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g20210516_index {
	width:800px; height:3350px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 110px;		/*マージン*/
	font-size:large;
}

div#g20210613_index {
	width:800px; height:2380px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 110px;		/*マージン*/
	font-size:large;
}

div#g210718_index {
	width:800px; height:2250px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g20211103_index {
	width:800px; height:1650px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 110px;		/*マージン*/
	font-size:large;
}

div#g20211121_index {
	width:800px; height:1400px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 90px;		/*マージン*/
	font-size:large;
}


div#g211128_index {
	width:800px; height:3000px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

div#g220109_index {
	width:800px; height:2000px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:0px 0px 0px 100px;		/*マージン*/
	font-size:large;
}

/*
div#g220206_index {
	width:800px; height:3720px;
	margin:0px 0px 0px 100px;
	font-size:large;
}
*/

div#g220206_index {
	width:800px; margin:0 auto;	/*トップページのヘッダ画像の表示サイズを指定*/
	font-size:large;
}

div#g_index {
	width:800px; margin:0 auto;	/*トップページのヘッダ画像の表示サイズを指定*/
	font-size:large;
}

div#f_index {
	width:850px;  		/*トップページのヘッダ画像の表示サイズを指定*/
	margin:50px 0px 50px 50px;
	font-size:large;
}

div#g2_index {
	width:558px; height:417px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:10px 0px 0px 260px;		/*マージン*/
}

div#g3_index {
	width:300px; height:200px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:10px 0px 0px 260px;		/*マージン*/
}

div#tbl_style{
	width:800px; height:600px;
	margin:0px 0px 0px 100px;		/*マージン*/
}

/*============================================
top スタイル
============================================*/
p.itop{
	width:900px;
	margin:0px 20px 0px 40px;
	font-size:x-large;
}

.itop .itop-title {
    font-size: 1.2em;
    background: #00dd00;
    padding: 4px;
    text-align: left;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}


/*============================================
toiawase スタイル
============================================*/
p.toiawase{
	width:900px;
	margin:0px 20px 0px 40px;
	font-size:x-large;
}

/*============================================
club intro スタイル
============================================*/
p.clubintro{
	width:900px;
	margin:10px 50px 0px 40px;
	font-size: medium;
}

/*============================================
大会ヘッダ画像
============================================*/
#img_taikai {
	width:960px; height:200px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:10px 20px 0px 20px;		/*マージン*/
}

/*============================================
ヘッダテキスト
============================================*/

p.hdtxt{
	width:960px;
	margin:0px 20px 10px 20px;
	padding:0px,10px 0px 10px;
	font-size:large;
	background-color: #eeeeee;
}

/*============================================
inputボタン スタイル
============================================*/

input[type="button"] {
   /* input要素のうちtype属性値がbuttonのものに対して装飾 */
	font-size: 0.8em;
	font-weight: bold;
	padding: 5px 25px;
/*	background-color: #248;   */
	background-color: #696969;
	color: #fff;
	border-style: none;
/*
   background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd);
   border: 1px solid #3c7fb1;
   border-radius: 0.3em;
*/
}

input[type="button"]:hover {
   /* マウスが載ったとき */
/*	background-color: #24d;  */
	background-color: #778899;
	color: #fff;
/*
   background-image: linear-gradient(0deg, #68d3db, #e5f4fc);
   border: 1px solid #2c628b;
*/
}

/*============================================
文字スタイル
============================================*/

.red1 {
color:#ffffff;
background-color:#6633cc;
}

.ore1 {
color:#ffffff;
background-color:#ff6347;
}

/*============================================
活動画像
============================================*/
#img_katsudou {
	width:960px; height:330px;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:10px 20px 0px 20px;		/*マージン*/
}


<style>
.sp{
display: inline-block;
}
.sph span{
	padding-left: 21em;
}

.spq span{
	padding-left: 6em;
}
</style>