@charset "utf-8";


/*各cssの読み込み
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*トップページのメイン画像用css*/
@import url(jquery.bxslider.css);


/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #000;	/*全体の文字色*/
	color: #032b26 ;
	font-family: "Yu Gothic" ,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 16px;	/*文字サイズ*/
	font-size: 18px;	/*文字サイズ*/
	font-weight:500 ;
	line-height: 2;		/*行間*/
	background: #fff;	/*背景色*/
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,input,textarea {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ul.disc{list-style:disc ;padding-left:1.5em ;padding-left:2.5em ;}
ul.decimal{list-style:decimal ;padding-left:1.5em ;padding-left:2.5em ;}
.c ul.disc, .c ul.decimal{padding-left: auto;}
.ta1 ul.disc,.ta1 ul.decimal,.ta2 ul.disc,.ta2 ul.decimal{padding-left: 1em ;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
img.br_6060 {border-radius:30px 0 30px 0 ;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}
video,audio {max-width: 100%;}

/*リンク（全般）設定

---------------------------------------------------------------------------*/
a {
	color: #00949e;		/*リンクテキストの色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
a:hover {
	color: #333;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}
/*マウスオン時の画像*/
a img{
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
a:hover img {
	opacity: 0.7;	/*70%色がついた状態*/
}

/*inner共通
---------------------------------------------------------------------------*/
.inner {
	/*max-width: 1300px;	/*サイトの最大幅*/
	/*margin: 0 auto;*/
}

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

---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	z-index: 100;
	/*◆◆◆印刷時はコメント*/position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;		/*高さ*/
	color: #333;		/*文字色*/
}
/*ロゴ画像*/
header #logo {
	float: left;		/*左に回り込み*/
	width:240px ;
		margin-top: 20px;	/*ロゴの上にあける余白。ヘッダー内の上下の配置バランスをここで調整して下さい。*/
	margin-left: 1%;	/*ロゴの左側にあける余白。*/
}
/********************
.contentsを過ぎたヘッダー(スクロールによって背景を緑に変更)
********************/
/*ヘッダーブロック*/
.site-header.transform{
    background: rgba(0, 148, 158, 0.6);
    height:60px ;
    transition: 0.2s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
/*ロゴ画像*/
.site-header.transform #logo {
	margin-top: 10px;	/*ロゴの上にあける余白。ヘッダー内の上下の配置バランスをここで調整して下さい。*/
}

/*メインメニューのブロック
---------------------------------------------------------------------------*/
/*メニューブロック*/
.drawer-nav {
	position: absolute;
	right: 0px;		/*ヘッダーブロックに対して右から0pxの場所に配置*/
	top: 0px;	/*ヘッダーブロックに対して上から0pxの場所に配置*/
	height: 80px;		/*メニューの高さ。下の「.drawer-nav ul li a」の「height」と「padding-top」の数字を合計した数字に合わせる。*/
	text-align: center;	/*文字を中央に*/
	font-size:14px ;
	border-bottom: 1px solid #FFF;	/*メニューの下側の線の幅、線種、色*/
}
/*メニュー１個あたりの設定*/
.drawer-nav li {
	float: left;	/*左に回り込み*/
	width:auto;
	min-width:60px ;
	margin-right:1.5em ;
}
.drawer-nav li a {
	text-decoration: none;
	display: block;
	height: 52px;		/*高さ*/
	border-bottom:3px solid transparent ;
	padding-top: 25px;	/*上に追加する余白*/
	color:#FFF ;
	font-weight:bold ;
}
/*マウスオン時と、現在表示中(current)のメニューの設定*/
.drawer-nav li a:hover, .drawer-nav li.current a {
	color:#f8b62d ;
	border-bottom:3px solid #f8b62d ;
}
/*お知らせ・お問い合わせボタン*/
.drawer-nav li.news ,
.drawer-nav li.contact {
	width:110px ;
	margin-right:0 ;
}
.drawer-nav li.news a {
	background:#f8b62d ;
	color:#FFF ;
}
.drawer-nav li.contact a {
	background:#00949e ;
	color:#FFF ;
}
/*マウスオン時と、現在表示中(current)のメニューの設定*/
.drawer-nav li.news a:hover,
.drawer-nav li.contact a:hover{
	opacity:0.7 ;
	border-bottom:3px solid transparent ;
}
/*スマホ用メニューを表示させない*/
#menubar-s {display: none;}
/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}
/********************
.contentsを過ぎたメニュー(スクロールによって高さを低く変更)
********************/
/*メニューブロック*/
.site-header.transform .drawer-nav {
	height: 60px;		/*メニューの高さ。下の「.drawer-nav ul li a」の「height」と「padding-top」の数字を合計した数字に合わせる。*/
	border-bottom: none;	/*メニューの下側の線の幅、線種、色*/
}
/*メニュー１個あたりの設定*/
.site-header.transform .drawer-nav li a {
	height: 42px;		/*高さ*/
	padding-top: 15px;	/*上に追加する余白*/
}

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
---------------------------------------------------------------------------*/
/*上部固定メニュー用fixmenu設定*/
body.is-fixed-menu .nav-fix-pos {
	/*width: 100%;z-index: 100;position: fixed;/*top: 0;left: 0;*/
}
/*上の設定の「is-fixed-menu」を「is-fixed」に変更したものをそのまま記入します。fixmenuスクリプトを２つ使う為に必要な設定になります。*/
body.is-fixed .nav-fix-pos {
	/*width: 100%;z-index: 100;position: fixed;/*top: 0;left: 0;*/
}

/*トップページのメイン画像
---------------------------------------------------------------------------*/
/*大きな端末用（600px以上端末）の設定*/
#mainimg{
	position:relative ;
	/*margin-bottom:60px ;*/
	margin-bottom:40px ;
}
/*小さな端末用（600px以下端末）の設定*/
#mainimg_ms{
	position:relative ;
	display:none ;
}
/********************
無料体験レッスンボックス
********************/
/*ボックス設定*/
#mainimg .free-lesson_box {
	position:absolute ;
	/*right:10% ;*/
	right:1% ;
	bottom:10% ;
	width:400px ;
	padding:15px 15px ;
	background:#f8b62d ;
	background:rgba(0, 196, 209, 0.8);
	color:#FFF ;
	border-radius:20px 0 20px 0 ;
	text-align:center ;
}
/*白いライン*/
#mainimg .free-lesson_box div {
	width:calc(100% - 30px);
	height:calc(100% - 30px);
	padding:15px 15px ;
	border:1px solid #FFF ;
	border-radius:20px 0 20px 0 ;
}
/*無料体験レッスン募集中*/
#mainimg .free-lesson_box h4 {
	font-size:140% ;
	font-weight:bold ;
}
/*詳細はこちら*/
#mainimg .free-lesson_box p {
	background: url(../images/icon_arrow.svg)no-repeat right 50px center / 50px ;
	font-weight:bold ;
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
/*マウスオン時*/
#mainimg a:hover .free-lesson_box {
	background:rgba(0, 196, 209, 0.7);
	transform:translateY(-5px);
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
#mainimg a:hover .free-lesson_box p {
	background: url(../images/icon_arrow.svg)no-repeat right 40px center / 50px ;
}

/*各コンテンツブロックの背景設定
---------------------------------------------------------------------------*/
/*背景：濃いブルー*/
.bg_blue {
	background: #00949e ;
}
/*背景：薄いグリーン*/
.bg_palegreen {
	background: #f7fdfe ;
}

/*コンテンツ。メニューの下にある白い背景色のブロック。
---------------------------------------------------------------------------*/
#contents {
}
.contents{
	position:relative ;
	padding: 70px 10% 70px 10%;	/*上、右、下、左への余白*/
	clear:both ;
	margin:0 ;
}
/*左右余白なし*/
.contents.contents_rl0{
	padding:0 ;
}
/*下余白なし*/
.contents_b{
	padding: 70px 10% 0 10%;	/*上、右、下、左への余白*/
}
/********************
コンテンツ背景の英字コピー
********************/
.contents span.contents_bg_copy {
	/*overflow:hidden ;*/
	position:absolute ;
	top:0 ;
	left:0 ;
	line-height:1.0 ;
	color:#e2fdff ;	/*薄いグリーン*/
	font-family: 'Lato', sans-serif;
	font-size: 700%;		/*文字サイズ*/
	font-weight:900 ;
	z-index:-1 ;
}
	.contents.bg_palegreen span.contents_bg_copy {
		/*color:#FFF ;*/
		top:15px ;
		z-index:0 ;
	}
.contents_r span.contents_bg_copy {
	left:auto ;
	right:0 ;
}

/********************
h2タグ
********************/
#contents h2 {
	clear: both;
	position: relative;
	margin-bottom:60px ;
	padding:0 2% ;
	font-size: 200%;		/*文字サイズ*/
	font-weight:bold ;
}
/*type1のh2タグ*/
#contents .type1_box {
	display: block;
	padding: 120px 10% 90px ;	/*上下、左右へのボックス内の余白*/
	background: url(../images/bg_type1.jpg) no-repeat center center;
	background-size:cover;
	text-align:center ;
}
	/*当クラブについて*/
	#about #contents .type1_box {background: url(../images/bg_type1_about.jpg) no-repeat center center;background-size:cover;}
	/*コーチ紹介*/
	#coach #contents .type1_box {background: url(../images/bg_type1_coach.jpg) no-repeat center center;background-size:cover;}
	/*施設案内*/
	#facility #contents .type1_box {background: url(../images/bg_type1_facility.jpg) no-repeat center center;background-size:cover;}
	/*会員制度*/
	#member #contents .type1_box {background: url(../images/bg_type1_member.jpg) no-repeat center center;background-size:cover;}
	/*レッスン・料金*/
	#lesson #contents .type1_box {background: url(../images/bg_type1_lesson.jpg) no-repeat center center;background-size:cover;}
	/*よくある質問*/
	#qa #contents .type1_box {background: url(../images/bg_type1_qa.jpg) no-repeat center center;background-size:cover;}
	/*お知らせ*/
	#news #contents .type1_box {background: url(../images/bg_type1_news.jpg) no-repeat center center;background-size:cover;}
	/*お問い合わせ*/
	#contact #contents .type1_box {background: url(../images/bg_type1_contact.jpg) no-repeat center center;background-size:cover;}
	/*プライバシーポリシー*/
	#privacy #contents .type1_box {background: url(../images/bg_type1_privacy.jpg) no-repeat center center;background-size:cover;}
#contents h2.type1 {
	margin-bottom:0 ;
	color:#FFF ;
}
/*h2タグ内のspanタグ（飾り文字）*/
#contents .type1 h2 span {
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	display: block;
	font-size: 60%;	/*文字サイズ*/
	letter-spacing: 0.2em;	/*文字間隔を少し広くとる設定*/
}
/********************
h3タグ
********************/
#contents h3 {
	clear: both;
	position: relative;
	margin-bottom: 30px;	/*下に空けるボックスの外側への余白*/
	padding: 10px 0;	/*上下、左右へのボックス内の余白*/
	border-bottom: solid 3px #00949e;
	font-size: 160%;		/*文字サイズ*/
	font-weight:900 ;
}
#contents h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #f8b62d;
	bottom: -3px;
	width: 20%;
}
/*英字の飾り文字（コーチ紹介）*/
#contents h3 span.en {
	display: flex;
	align-items: center;
	color: #00949e;
	font-size: 70%;
	font-weight:700 ;
	font-family: 'Lato', sans-serif;
}
#contents h3 span.en::before {
	content: '';
	display: inline-block;
	margin-right: 20px;
	width: 30px;
	height: 1px;
	background-color: #00949e;
}
/********************
h5タグ
********************/
#contents h5 {
	line-height:1.4 ;
	margin-bottom:0.5em ;
	padding: 0 20px;	/*左右の余白を段落タグに合わせる*/
	color: #00949e;	/*全体の文字色*/
	font-size: 140%;		/*文字サイズ*/
}
/*段落タグ*/
#contents p {
	padding: 0 20px 40px;
}
/********************
コンテンツ下の斜線ライン（トップページのみ）
********************/
.line_l {
	position: relative;
	padding-bottom: 10px;
}
.line_l::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50%;
	height: 8px;
	background-image: repeating-linear-gradient(45deg, #affaff 0px, #affaff 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
	background-size: 8px 8px;
}
.line_r::after {
	left:auto ;
	right:0 ;
}

/*ページ内サブメニュー（ローカルナビゲーション）
---------------------------------------------------------------------------*/
/*ブロック全体*/
nav.submenu{
	clear:both ;
	width:calc(100% - 32px) ;
	border:1px solid #CCC ;
	padding:30px 15px 15px;
	margin:0 0 60px;
	background:#f3feff ;
	text-align:center ;
}
/*一つのコンテンツブロック内でリンクする場合*/
nav.submenu_in{
	width:calc(96% - 32px) ;
	margin:0 2% 45px;
	-webkit-box-shadow: 5px 5px #fff2cd;	/*薄イエローの影*/
	box-shadow: 5px 5px #fff2cd;	/*薄イエローの影*/
}

/*メニュー1個ずつの設定*/
nav.submenu ul li{
	display:inline-block ;
	width:auto ;
}
nav.submenu ul a{
	display:inline-block ;
	padding-left:25px ;
	margin-right:45px ;
	margin:0 45px 15px 0 ;
	background: url(../images/icon_arrow_down.svg) no-repeat left 0px center /15px;	/*マーク*/
	color:#032b26;
	font-size:95% ;
	font-weight:bold ;
	text-decoration:none ;
}
nav.submenu ul a:hover{
	background: url(../images/icon_arrow_down.svg) no-repeat left 0px top 14px /15px;	/*マーク*/
	color:#00949e;
	text-decoration:underline ;

}

/*listブロック（画像と文章のブロック　基本は3つ並び）
---------------------------------------------------------------------------*/
/*listブロック１個あたりの設定*/
.list {
	display:inline-block ;
	overflow: hidden;
	width:calc((100% - 210px) / 3) ;
	padding:15px ;
	margin: 0 20px 4% 20px ;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	text-align:left ;
	text-decoration: none;
}
/*画像と文章を囲むブロックの設定*/
.list section{
	display: block;
	overflow: hidden;
}
/*画像の設定*/
.list figure {
	overflow: hidden;
	margin-bottom:15px ;
	background:transparent ;
}
.list figure img{
	width:100% ;
}
/*h4（見出し）タグの設定*/
.list h4 {
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
	line-height:1.5 ;
	margin-bottom:5px ;
	color:#00949e ;
	font-weight:bold ;
	font-size:120% ;
}
/*日付（pタグ）の設定*/
#contents .list p {
	padding:0 ;
}
/*********************************
2つ並びにする設定
*********************************/
/*listブロック１個あたりの設定*/
.list2 {
	width:calc((100% - 140px) / 2) ;
}
/*3の倍数番目は右側の余白をなくさない*/
.list2:nth-of-type(3n) {
	margin-right:20px ;
}
/*********************************
トップページのアピールボックス
*********************************/
/*listブロック１個あたりの設定*/
#top .list {
	width:calc((100% - 250px) / 3) ;
	background:#e2fdff ;
	border-top:5px solid #33d8e5;
	margin: 0 40px 4% 0 ;	/*上、右、下、左へのボックスの外側に空けるスペース*/
}
#top .list:first-child {
	margin: 0 40px 4% 40px ;	/*上、右、下、左へのボックスの外側に空けるスペース*/
}
/*h4（見出し）タグの設定*/
#top .list h4 {
	padding-left:35px ;
	background:url(../images/icon_ball.svg)no-repeat left 0px top 3px/ 25px;/*リンク設定した際の右下の矢印マークの読み込み。left（左）、center（中央）、40pxは画像の幅。*/
	/*color:#f8b62d ;
	color:#f7ab0c ;*/
}

/*お客様の声　LINE風吹き出し
---------------------------------------------------------------------------*/
/*吹き出し*/
.balloon_l,
.balloon_r{
  margin: 30px 0;
  display:flex;
  justify-content: flex-start;
  align-items: flex-start; /*縦位置を上揃え*/
/*   align-items: center; */ /*縦位置を真ん中揃え*/
}
.balloon_r{
  justify-content:flex-end;
}
.faceicon img{
  width: 80px; /*サイズてきとー*/
  min-width:50px ;
  height: auto;
}
.balloon_r .faceicon{
  /*margin-left:25px;*/
  margin-left:35px;
}
.balloon_l .faceicon{
  /*margin-right:25px;*/
  margin-right:35px;
}
.balloon_r .faceicon{
  order:2 !important;
}
.says {
  /*max-width:500px; /*最大幅てきとー*/
  max-width:600px; /*最大幅てきとー*/
  display: flex;
  flex-wrap: wrap;
  position: relative;
  /*padding: 17px 13px 15px 18px;*/
  padding: 20px 30px;
  border-radius: 12px;
  background: #e2fdff;/*色はてきとー#99dddd*/
  box-sizing:border-box;
  margin:0 !important;
  line-height:1.5;

/*   align-items: center; */
}
.says p{
  margin:8px 0 0 !important;
}
.says p:first-child{
  margin-top:0 !important;
}
.says:after {
  content: "";
  position: absolute;
  border: 10px solid transparent;
/*   margin-top:-3px;  */
}
.balloon_l .says:after {
  /*left: -26px;
  border-right: 22px solid #e2fdff;*/
  left: -36px;
  border-right: 32px solid #e2fdff;
}
.balloon_r .says:after {
  /*right: -26px;
  border-left: 22px solid #e2fdff;*/
  right: -36px;
  border-left: 32px solid #e2fdff;
}
#contents #voice p {
	padding: 0 ;
}
#contents #voice p.ball{
    color: #00949e;
    font-weight: bold;
    font-size: 120%;
    /*padding-left: 35px;*/
    padding-left: 40px;
    /*background: url(../images/icon_ball.svg)no-repeat left 0px top 0px;*/
    background: url(../images/icon_ball.svg)no-repeat left 0px top 0px / 30px;
}

/*チェックボックス付きリスト
---------------------------------------------------------------------------*/
ul.check {
	padding-left:20px ;
}
ul.check li{
	font-weight:bold ;
	margin-bottom:20px ;
	padding-left:36px ;
	background:url(../images/icon_check.svg)no-repeat left 0px top 5px/ 25px;/*リンク設定した際の右下の矢印マークの読み込み。left（左）、center（中央）、40pxは画像の幅。*/
}

/*フローリスト（入会方法など）
---------------------------------------------------------------------------*/
ul.flow li{
	font-size:120% ;
	font-weight:bold ;
	margin-bottom:30px ;
}

/*list_contactブロック（お問い合わせブロック）
---------------------------------------------------------------------------*/
/*全体を囲むブロック*/
.wrapper_contact {
	padding: 30px 10% 45px;	/*上下、左右へのボックス内の余白*/
}

/*list_contactブロック１個あたりの設定*/
a.list_contact {
	display:inline-block ;
	overflow: hidden;
	width:calc((92% - 64px) / 2) ;
	padding:15px ;
	margin: 0 2% 0 2% ;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	background:#00949e ;
	color:#FFF ;
	text-align:center ;
	text-decoration: none;
}
/*画像と文章を囲むブロックの設定*/
a.list_contact section{
	display: block;
	height:120px ;
	border:1px solid #FFF ;
	padding:6px ;
}
/*h4（見出し）タグの設定*/
a.list_contact h4 {
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
	margin-bottom:5px ;
	font-weight:bold ;
}
/*pタグの設定*/
a.list_contact p {
	font-weight:bold ;
}
/*メール*/
p span.mail{
	line-height:2.5 ;
	padding-left:35px ;
	background: url(../images/icon_mail.svg)no-repeat left center / 24px;
	font-size:160% ;
	font-weight:bold ;
}
/*電話番号*/
p span.tel{
	padding-left:35px ;
	background: url(../images/icon_tel.svg)no-repeat left center / 24px;
	font-size:200% ;
	font-weight:bold ;
	font-family: 'Lato', sans-serif;
}
/*マウスオン時の設定*/
a.list_contact:hover {
	color:#FFF ;
	text-decoration:none ;
	opacity:0.7 ;
}
/********************
お問い合わせページ内の設定
********************/
/*電話番号*/
#contact_tel p span.tel{
	background: url(../images/icon_tel_dark.svg)no-repeat left center / 28px;
	color:#00949e ;
}
#contact_tel p a {
	text-decoration:none ;
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	padding: 30px 0 0;	/*上、左右、下へのボックス内の余白*/
	font-size: 14px;	/*文字サイズ*/
	background: #f7fdfe ;
	color:#00949e  ;
	text-align:center ;
}
footer a {
	display:inline-block ;
	color:#00949e ;
	font-weight:bold ;
	text-decoration: none;
}
footer a:hover {
	color:#00949e  ;
	text-decoration:underline ;
}
footer .pr {display: block;font-size: 80%;}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu {
	overflow: hidden;
	padding: 15px 10% 30px;	/*上下、左右へのボックス内の余白*/
}
/*コピーライト
---------------------------------------------------------------------------*/
#copyright {
	clear: both;
	text-align: center;
	padding:15px 0 ;
	background:#00949e ;
	color:#FFF ;
}
#copyright a {color:#FFF ;}
#copyright a:hover {color: #f8b62d;}

/*写真背景リンクボックス「menu_forclient.tpl」の設定
（会員制度・レッスン料金・スケジュール　メニューボタン）
---------------------------------------------------------------------------*/
figure.list_fig {
  position: relative;
  overflow: hidden;
  width: calc(100% / 3);
  background: #001024;
  color: #ffffff;
  text-align: center;
  float:left ;
}
figure.list_fig * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
}
figure.list_fig img {
  max-width: 100%;
  position: relative;
  opacity: 0.9;
  opacity: 0.5;
}
figure.list_fig figcaption {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width:70% ;
	border:1px solid #fff ;
}
figure.list_fig h4 {
 /*display: table;*/
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  /*text-align: center;*/
  width: auto;
  text-transform: uppercase;
  font-weight: 400;

  font-weight:bold ;
  font-size:140%;
}
figure.list_fig h4 span {
  font-size: 70%;
}
figure.list_fig a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.list_fig:hover img,
figure.list_fig.hover img {
  opacity: 0.25;
   opacity: 0.9;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
figure.list_fig p{
	font-size:110% ;
	font-weight:bold ;
}

/*画像3つ並び「ギャラリー」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/
.gallery{
	padding:0 20px ;
	margin-bottom:30px ;
	text-align:center ;
}
/*画像を囲むブロックの設定*/
.gallery figure{
	display:inline ;
	width:calc((100% - 80px) / 3) ;
	height:auto ;
	margin:0 40px 0 0 ;
}
/*3の倍数番目だけ右余白をなくす*/
.gallery figure:nth-child(3n){
	margin:0 0 0 0 ;
}
/*画像の設定*/
.gallery img{
	width:100% ;
	border-radius:30px 0 30px 0 ;
}
/*キャプション設定*/
.gallery figcaption{
	line-height:1.2 ;
	margin:15px 0 0;
	font-size:90% ;
}
/**************************
4つ並びの場合のみの設定
************************/
.gallery4 figure:nth-child(3n){
	margin:0 40px 0 0 ;
}
/*4の倍数番目だけ右余白をなくす*/
.gallery4 figure:nth-child(4n){
	margin:0 0 0 0 ;
}

/*お知らせ一覧・お知らせ詳細
---------------------------------------------------------------------------*/
/*リスト全体*/
ul.list_news{
	margin-bottom:45px ;
}
	/*トップページのみ最上部に線*/
	#top ul.list_news{
		border-top:1px solid #999 ;
	}
/*見出しを含まないお知らせブロック一行*/
.list_news li {
	clear:both ;
	border-bottom:1px solid #999 ;
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
.list_news li a{
	display:block ;
	padding:15px 0;
	color:#000 ;
	text-decoration: none;
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
.list_news li a article{
	padding-right:100px ;
	background:url(../images/icon_arrow.svg) no-repeat right 30px center / 30px;
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
/*マウスオン時*/
.list_news li a:hover article{
	padding-right:100px ;
	background: url(../images/icon_arrow.svg) no-repeat right 15px center / 30px;
	text-decoration:none ;
}
/*日付共通設定*/
.date {
	color:#00949e ;
	font-family: 'Lato', sans-serif;
}
.list_news .date {
	float: left;
	width: 9em;		/*幅*/
	width: 11em;		/*幅*/
	line-height:1.5 ;
}
/*タイトル設定*/
.list_news h4 {
	line-height:1.5 ;
	padding-left:7em ;
	padding-left:12em ;
	/*color:#191919 ;*/
	/*font-size:22px ;
	font-size:130% ;
	font-weight:bold ;*/
	font-weight:500 ;
}
/*マウスオン時*/
.list_news a:hover h4 {
	color:#00949e ;
	text-decoration:underline ;
}
/*カテゴリーアイコン*/
#news span.cate,
#news h3 span.cate
	{
	display:inline-block ;
	width: 6em;			/*幅*/
	padding:2px 3px ;
	margin-right:1em ;
	background: #00c4d1;	/*背景色：グリーン*/
	color: #fff;			/*文字色*/
	font-size:75% ;
	font-weight:bold ;
	text-align:center ;
	font-family: "Yu Gothic" ,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
}
	/*大会関連*/
	#news span.cate_01,
	#news h3 span.cate_01
 		{background: #f8b62d;	/*背景色：イエロー*/}
	/*その他*/
	#news span.cate_etc,
	#news h3 span.cate_etc
		{margin-right:0 ;background: #999;	/*背景色：グレー*/}
	/*全て*/
	#news span.cate_all,
	#news h3 span.cate_all
		{background: #90bd70;	/*背景色：イエローグリーン*/}
	/*一覧ページのお知らせリスト内*/
	#news .list_news span.cate{margin-left:1em ;margin-right:0 ;}
	/*一覧ページのh3見出し内*/
	#news h3 span.cate{margin-right:0 ;font-size:50% ;}
	/*マウスオン時*/
	#news a:hover span.cate{opacity:0.7 ;}
/*NAVI ナビゲーション*/
.navi {
	font-weight:bold ;
	text-align:center ;
	margin:30px auto ;
}
.navi a{
	font-weight:normal ;
	padding:0 10px 0 10px ;
	text-decoration:none ;
}
/********************
お知らせ詳細
********************/
/*お知らせ詳細「サムネイルギャラリー」ブロック*/
.photo_container{
        margin: 0 auto 30px;
    }
	.thumbnail{
		overflow: hidden;
		margin: 0 0 10px;
		margin: 0 auto 10px;
		margin: 0 auto 30px;
        padding: 0 3% ;
        width: 94%;
        text-align:center ;
	}
	.thumbnail li{
        display:inline ;
        /*margin-right: 5px;
        margin-bottom: 5px;*/
		list-style: none;
	}
    .thumbnail li:last-child{
        margin-right: 0;
    }
	.thumbnail li img{
        height:100px ;
        width:auto ;
		opacity: 0.5;
        filter: alpha(opacity=50);
        margin:5px ;


        padding: 5px;
    	background-color: #FFF;
    	border:1px solid #d4d4d4 ;
    	border-radius:0 ;
	}
	.thumbnail li.current img{
		opacity: 1;
        filter: alpha(opacity=100);
	}
	.main_photo{
		position: relative;
        height: 450px;
        text-align:center ;
        margin-bottom: 15px;
	}
	.main_photo img{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin:auto;
		height:100% ;
		height:calc(100% - 22px) ;
		/*width:auto ;*/

		padding: 10px;
    	background-color: #FFF;
    	border:1px solid #d4d4d4 ;
    	border-radius:0 ;
	}
	/*画像キャプション*/
	.photo_container p {
		margin-top:15px ;
	}

/*アコーディオン開閉ボックス（QAなど）
---------------------------------------------------------------------------*/
.acc-wrap {
  border-bottom:1px solid #CCC ;
  margin:0 20px 0 ;
}
/*アコーディオンになるボックス*/
.acc-wrap .acc-title {
  display: block;
  position: relative;
	border:solid 1px #CCC;
	border-bottom:none;
  margin: 0;
  padding: 15px 60px 15px 30px ;
  background:#f7fdfe ;
  font-size: 100% ;
  font-weight: bold;
  cursor: pointer;
	transition: all 0.5s;
}

.acc-wrap .acc-title:hover,
.acc-wrap .acc-title:active,
.acc-wrap .content-entry.open .acc-title {
  background-color: #baf2f6;
}

.acc-title{
  position: relative;
}

.acc-title.open {
  background-color: #baf2f6;
}
.acc-title:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 10px;
  height: 10px;
  border-top: solid 4px #00949e;
  border-right: solid 4px #00949e;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);

  transition: all 0.5s;
}

.acc-title.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}
/*アコーディオンで表示される中身*/
.acc-content {
  display: none;
  border:solid 1px #CCC;
	border-bottom:none;
  padding-left: 2.3125em;
  padding:15px 30px ;
  background:#FFF ;
}
#contents .acc-content p {
	padding:0 ;
}

/*テーブル1
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	background: #c1e4ff !important;	/*背景色*/
	border: 1px solid #999;	/*テーブルの枠線の幅、線種、色*/
	border-bottom:none ;
	font-weight:bold ;
	text-align:left ;
	padding: 5px 10px;	/*ボックス内の余白*/
}
/*ta1設定*/
.ta1{
	width: calc(100% - 40px);
	table-layout: fixed;
	margin: 0 20px 30px;
}
.ta1, .ta1 td, .ta1 th{
	line-height: 2;
	padding: 10px 10px;	/*ボックス内の余白*/
	border:1px solid #CCC ;
	word-break: break-all;
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 150px;	/*幅*/
	background: #baf2f6;	/*背景色*/
	font-weight: 500;
	text-align:left;	/*左寄せ*/
	vertical-align:top ;
}
.ta1 th.c {
	text-align:center;	/*中央寄せ*/
}
.ta1 th.tamidashi {
	background: #c1e4ff !important;	/*背景色*/
	font-weight:bold ;
}
/*ta1の右側ボックス*/
.ta1 td {
	background: #FFF ;	/*背景色*/
}
/*フォーム内の入力欄*/
.ta1 input,
.ta1 select,
.ta1 textarea{
	padding:5px ;
}
/***********************
施設案内内
************************/
#facility .ta1, #facility .ta1 td, #facility .ta1 th{
	/*padding: 5px 10px;
	border:none ;
	border-bottom:1px solid #CCC ;*/
}
#facility .ta1 {
	/*border-top:1px solid #CCC ;*/
}
/*ta1の左側ボックス*/
#facility .ta1 th {
	/*width: 100px;
	background: transparent;
	color:#14949e ;
	border-top:1px solid #14949e ;
	border-bottom:1px solid #14949e ;
	font-weight:bold ;*/
}
/***********************
お問い合わせページ内
************************/
/*ta1設定*/
#contact .ta1{
	margin: 0 20px 60px;
}
/*ta1の左側ボックス*/
#contact .ta1 th {
	width: 260px;	/*幅*/
}
/***********************
必須アイコン
************************/
.ta1 th span.reqd {
	display: inline-block;
	line-height:1.5 ;
	padding: 1px 10px;
	margin: 0px 5px ;
	border-radius: 3px;
	background: #ff0202 ;
	background:#f76c2f ;
	color: #FFF;
	font-size: 80%;
	font-size: 70%;
	font-weight:bold ;
	text-align:center ;
	vertical-align: text-top ;
}
/*任意アイコンの場合*/
.ta1 th span.noreqd {
	background: #999;
}
/***********************
横並びを縦並びにするテーブル（横長テーブル）
************************/
.ta_attr {
	text-align:center ;
}
/*ta_attrの左側ボックス*/
.ta_attr th {
	width: auto;		/*幅*/
	text-align:center ;
}

/*inputの設定
---------------------------------------------------------------------------*/
#contents input,
#contents textarea{
	padding:7px ;
}
/*inputボタンにclass="btn"をつけた場合の設定
---------------------------------------------------------------------------*/
#contents input[type="submit"].btn,
#contents input[type="button"].btn,
#contents input[type="reset"].btn {
	-webkit-appearance: none;	/*iOS独自の装飾仕様をクリアする*/
	border: none;	/*iOS独自の装飾仕様をクリアする*/
	border-radius: 0;	/*iOS独自の装飾仕様をクリアする*/
	width: 210px;
	display: inline-block;
	margin:0 auto 0;
	text-align: center;
	line-height:40px ;
	background-color: #00949e;
	color: #FFF;
	font-weight: 700;
	font-family: "Yu Gothic" ,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	text-decoration:none ;
	transition: 0.5s;
}
/*マウスオン時の設定*/
#contents input[type="submit"].btn:hover,
#contents input[type="button"].btn:hover,
#contents input[type="reset"].btn:hover {
	background: #00c4d1;
	color:#FFF ;
	-webkit-appearance: none;	/*iOS独自の装飾仕様をクリアする*/
	border-radius: 0;	/*iOS独自の装飾仕様をクリアする*/
}

/*.link（大「リンクボタン」設定）
---------------------------------------------------------------------------*/
.link a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 210px;
  padding: 9px 24px;
  background-color: #00949e;
  color: #FFF;
  font-weight: 700;
  text-decoration:none ;
  transition: 0.5s;
}

.link a::before {
  content: '';
  position: absolute;
  top: calc(50% - 2px);
  right: -2em;
  transform: translateY(calc(-50% - 2px)) rotate(30deg);
  width: 12px;
  height: 2px;
  background-color: #f8b62d;
  transition: 0.3s;
}

.link a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -2em;
  transform: translateY(-50%);
  width: 70px;
  height: 2px;
  background-color: #f8b62d;
  transition: 0.3s;
}

.link a:hover {
  text-decoration: none;
  background-color: #00c4d1;
}

.link a:hover::before,
.link a:hover::after {
  right: -2.5em;
}
/*中央寄せ*/
.link_c a {
  margin: 0 auto;
}
/********************
GoogleMapを開く
********************/
.link_gmap a {
  border-radius:50px ;
  margin-bottom:30px ;
}
.link_gmap a:hover {
  color:#FFF ;
}
/*.link_mini（小「リンクボタン」設定）
---------------------------------------------------------------------------*/
a.link_mini {
	display:inline-block ;
	width:auto ;
	line-height:1.0 ;
	height:1.0 ;
	padding:9px 45px 9px 15px ;
	background: #00949e;
	background:#00949e url(../images/icon_arrow_mini.svg) no-repeat right 12px center /25px;	/*マーク*/
	color: #FFF;
	font-size:90% ;
	text-decoration:none ;
}
/*マウスオン時*/
a:hover.link_mini {
	background:#00c4d1 url(../images/icon_arrow_mini.svg) no-repeat right 6px center /25px;	/*マーク*/
}
/********************
PDFボタン
********************/
a.link_pdf {
	background: #f8b62d;
	background:#f8b62d url(../images/icon_arrow_mini.svg) no-repeat right 12px center /25px;	/*マーク*/
}

/*ページの上部へボタン「↑」設定

---------------------------------------------------------------------------*/
@keyframes scroll {0% {opacity: 0;}100% {opacity: 1;}}
body .nav-fix-pos-pagetop a {display: none;}
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	z-index: 3;
	position: fixed;
	bottom: 3px;	/*下から20pxの場所に配置*/
	right: 1%;		/*右から3%の場所に配置*/
	background: #f8b62d;	/*背景色。0,0,0は黒の事。0.6は60%色がついた状態。*/
	color: #fff;	/*文字色*/
	border-radius:50% ;
	animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
body.is-fixed-pagetop .nav-fix-pos-pagetop a img {
	width:30px ;
	padding-bottom:5px ;
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #ffe669;	/*背景色*/
}

/*その他
---------------------------------------------------------------------------*/
.logo_series{margin:30px 0 40px;}
.look {background: #eee;border: 1px solid #ccc;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb45 {margin-bottom: 45px !important;}
.mr15 {margin-right: 15px !important;}
.mr30 {margin-right: 30px !important;}
.mr30_max600 {margin-right: 30px !important;}
.mt1em{margint-top:1em ;}
.mt60{margint-top:60px !important;}
.clearfix:after {content: ""; /* 擬似要素を実体化 */clear: both;/* floatを解除する */display: block;/* ブロック要素にする */}	/*floatでなくなる親要素の高さを出す*/
.clear {clear: both;}
.color1, .color1 a {color: #8cc167 !important;}
.color_bl, .color_bl a {color: #032b26 !important;}/*ブラック*/
.color_g, .color_g a {color: #00949e !important;}/*エメラルドグリーン*/
.color_o, .color_o a {color: #f76c2f !important;}
.red, .red a {color: #ff0000 !important;}
.bg_o {background: #fffbf2 !important;}/*オレンジ*/
/*.marker_pink {background:linear-gradient(transparent 75%, #ffc1e0 75%);font-weight:bold; }/* マーカー線・ピンク */
.marker_g{background:linear-gradient(transparent 75%, #afeeee 75%);/*font-weight:bold;*/ }/* マーカー線・水色 */
.marker_o{background:linear-gradient(transparent 75%, #ffce9e 75%);/*font-weight:bold;*/ }/* マーカー線・オレンジ */
.pr {font-size: 10px;}
.wl {width: 96%;}
img.wl {width: calc(100% -40px);margin-left:20px; mergin-right:20px ;}
.ws {width: 50%;}
.c {text-align: center;}
.c2 {text-align: center;}
.c_max900 {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
.fr {width:40% ;float: right;margin-left: 30px;margin-bottom: 30px;margin:0 2% 30px 2% ;}
#member .fr {max-width:400px;}
.fl {width:40% ;float: left;margin-right: 30px;margin-bottom: 30px;margin:0 2% 30px 2% ;}
figure.fr, figure.fl {margin-left:auto; margin-right:auto ;}
.fr25, .fl25 {width:25% ; /*min-width:200px ;*/}
.fr_text {width:55% ;float: right;}
.fl_text {width:55% ;float: left;}
.fr_text70, .fl_text70{width:70% ;}
.border{border:1px solid #d4d4d4 ;}
.big1 {font-size: 24px;letter-spacing: 0.2em;}
.mini1 {font-size: 11px;}
.fs120{font-size:120% ;}
.fs90{font-size:90% ;}
.fs80{font-size:80% ;}
.b{font-weight:bold ;}
.n{font-weight:normal ;}
.fw500{font-weight:500;}
.dis_flex{display:flex;flex-wrap: wrap;justify-content: center;}	/*横並びボックスの高さを揃える*/
.flex-start{justify-content: flex-start;}	/*上記に加え、要素を左寄せにする*/
.dis_900{display:none ;}
.dis_600{display:none ;}
.non_dis_600{display: inline-block;}
.dis_480{display:none ;}
.sh {display: none;}
.gmap {width:calc(100% - 40px);margin:0 20px ;}
/*ul.disc{list-style-type: disc;margin-left :2.0em ;}
ul.decimal{	list-style-type: decimal;	margin-left :2.5em ;}*/



/*画面幅1301px以上の設定

------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1301px){



}



/*画面幅1300px以下の設定

------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1300px){



}



/*画面幅1200px以下の設定

------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1200px){


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

---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	z-index: 100;
	/*◆◆◆印刷時はコメント*/position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;		/*高さ*/
	color: #333;		/*文字色*/
	/*background: rgba(255, 255, 255, 0.2);	/*背景色*/
	/*border-bottom: 1px solid #d4d4d4;	/*メニューの下側の線の幅、線種、色*/
}
/*ロゴ画像*/
header #logo {
	/*width:30% ;
	width:240px ;
	float: left;		/*左に回り込み*/
	/*margin-top: 20px;	/*ロゴの上にあける余白。ヘッダー内の上下の配置バランスをここで調整して下さい。*/
	/*margin-left: 1%;	/*ロゴの左側にあける余白。*/
}
/********************
.contentsを過ぎたヘッダー(スクロールによって背景を緑に変更)
********************/
/*ヘッダーブロック*/
.site-header.transform{
    /*background: rgba(0, 148, 158, 0.6);
    height:60px ;
    transition: 0.2s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
/*ロゴ画像*/
.site-header.transform #logo {
	/*margin-top: 10px;	/*ロゴの上にあける余白。ヘッダー内の上下の配置バランスをここで調整して下さい。*/
}
/*ヘッダー（ロゴが入った最上段のブロック）

---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	height: 60px;		/*高さ*/
}
/*ロゴ画像*/
header #logo {
	/*width:30% ;
	width:240px ;
	float: left;		/*左に回り込み*/
	margin-top: 10px;	/*ロゴの上にあける余白。ヘッダー内の上下の配置バランスをここで調整して下さい。*/
	margin-left: 10px;	/*ロゴの左側にあける余白。*/
	/*margin-left: 1%;	/*ロゴの左側にあける余白。*/
}

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）

---------------------------------------------------------------------------*/
/*fixmenuから折りたたみメニューになるのでリセット。*/
body.is-fixed-menu header,body.is-fixed header {margin-bottom: 0px;}


/*メインメニュー
---------------------------------------------------------------------------*/
/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明(0%)から色を100%出すアニメーション指定。*/
@keyframes menu1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*スマホ用メニューブロック*/
#menubar-s {
	display: block;
	overflow: hidden;
	z-index: 10;
	position: absolute;
	/*top: 80px;	/*上から100pxの場所に配置*/
	width: 100%;
	padding-top:60px ;
	background: rgba(0, 148, 158, 0.9);
	animation-name: menu1;		/*上のkeyframesの名前*/
	animation-duration: 0.5S;	/*アニメーションの実行時間。0.5秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}
/*メニュー１個あたりの設定*/
#menubar-s li a {
	display: block;text-decoration: none;
	padding: 10px 10px 10px 20px;	/*上、右、下、左へのメニュー内の余白*/
	border-bottom: 1px solid #d4d4d4;	/*下の線の幅、線種、色*/
	/*background: rgba(0, 103, 205, 0.9);	/*背景色*/
	color: #fff;		/*文字色*/
	font-size:16px ;
	font-weight:bold ;
}
#menubar-s li:first-child a {
	border-top: 1px solid #d4d4d4;	/*下の線の幅、線種、色*/
}
/*マウスオン時と、現在表示中(current)のメニューの設定*/
#menubar-s li a:hover, #menubar li.current a {
	background: #3499ff;	/*背景色*/
	/*color:#00949e ;*/
}
/*PC用メニューを非表示にする*/
#menubar {display: none;}

/*３本バーアイコン設定

---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: absolute;
	position: fixed;
	top: 24px;	/*上から24pxの場所に配置*/
	top: 7px;	/*上から18pxの場所に配置*/
	right: 1%;	/*右から3%の場所に配置*/
	z-index: 101;


	display: none;
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 50px;		/*幅*/
	height: 50px;		/*高さ*/
}
/*三本バーアイコン*/
#menubar_hdr.close {
	background: #5AAC36 url(../images/icon_menu.png) no-repeat center top/50px;	/*背景色、アイコンの読み込み、上半分(top)を表示、幅50px*/
	background: url(../images/icon_menu.png) no-repeat center top/50px;	/*アイコンの読み込み、上半分(top)を表示、幅50px*/
}
/*閉じるアイコン*/
#menubar_hdr.open {
	background: #5AAC36 url(../images/icon_menu.png) no-repeat center bottom/50px;	/*背景色、アイコンの読み込み、上半分(bottom)を表示、幅50px*/
	background: url(../images/icon_menu.png) no-repeat center bottom/50px;	/*アイコンの読み込み、上半分(bottom)を表示、幅50px*/
}

/*トップページのメイン画像
---------------------------------------------------------------------------*/
/*大きな端末用（600px以上端末）の設定*/
#mainimg{
	/*margin-top:80px ;	/*固定メニュー分下げる*/
}
/*小さな端末用（600px以下端末）の設定*/
#mainimg_ms{
}
/********************
無料体験レッスンボックス
********************/
/*ボックス設定*/
#mainimg .free-lesson_box {
	width:320px ;
}
/*無料体験レッスン募集中*/
#mainimg .free-lesson_box h4 {
	font-size:120% ;
	font-weight:bold ;
}
/*詳細はこちら*/
#mainimg .free-lesson_box p {
	background: url(../images/icon_arrow.svg)no-repeat right 30px center / 50px ;
	font-size:90% ;
}
#mainimg a:hover .free-lesson_box p {
	background: url(../images/icon_arrow.svg)no-repeat right 20px center / 50px ;
}

}



/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

/*全体の設定

---------------------------------------------------------------------------*/
body {
	/*font-size: 15px;	/*文字サイズ*/
}

/*トップページのメイン画像
---------------------------------------------------------------------------*/
/*大きな端末用（600px以上端末）の設定*/
#mainimg{
	margin-bottom:20px ;
}
/********************
無料体験レッスンボックス
********************/
/*ボックス設定*/
#mainimg .free-lesson_box {
	bottom:15% ;
	width:auto ;
	padding:10px 10px ;
}
/*白いライン*/
#mainimg .free-lesson_box div {
	padding:10px 15px ;
}
/*無料体験レッスン募集中*/
#mainimg .free-lesson_box h4 {
	padding-right:45px ;
	background: url(../images/icon_arrow.svg)no-repeat right 5px center / 35px ;
	font-size:100% ;
}
#mainimg a:hover .free-lesson_box h4 {
	background: url(../images/icon_arrow.svg)no-repeat right center / 35px ;
}
/*詳細はこちら*/
#mainimg .free-lesson_box p {
	display:none ;
}

/*コンテンツ
---------------------------------------------------------------------------*/
.contents {
	padding: 45px 6% 45px 6%;	/*上、右、下、左への余白*/
}
/*左右余白なし*/
.contents_rl0{
	/*padding: 0 0 45px 0;	/*上、右、下、左への余白*/
}
/*下余白なし*/
.contents_b {
	padding: 45px 6% 0 6%;	/*上、右、下、左への余白*/
}

/*コンテンツ。メニューの下にある白い背景色のブロック。
---------------------------------------------------------------------------*/
/********************
h2タグ
********************/
#contents h2 {
	font-size: 180%;		/*文字サイズ*/
	/*margin-bottom: 70px;	/*下に空けるボックスの外側への余白*/
}
/********************
h3タグ
********************/
#contents h3 {
	font-size: 150%;		/*文字サイズ*/
}
/********************
h5タグ
********************/
#contents h5 {
	/*font-size: 140%;		/*文字サイズ*/
}

/*ページ内サブメニュー（ローカルナビゲーション）
---------------------------------------------------------------------------*/
/*ブロック全体*/
nav.submenu{
	margin:0 0 45px;
	text-align:left ;
}

/*listブロック（画像と文章のブロック　基本は3つ並び）
---------------------------------------------------------------------------*/
/*listブロック１個あたりの設定*/
.list {
	width:auto ;
	/*margin: 0 20px 4% 20px ;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	/*width:calc((92% - 124px) / 2) ;
	width:calc((92% - 64px) / 2) ;
	margin: 0 2% 4% 2% ;	/*上、右、下、左へのボックスの外側に空けるスペース*/
}
/*********************************
トップページのアピールボックス
*********************************/
/*listブロック１個あたりの設定*/
#top .list ,
#top .list:first-child{
	width:auto ;
	margin: 0 20px 20px 20px ;	/*上、右、下、左へのボックスの外側に空けるスペース*/
}

/*写真背景リンクボックス「menu_forclient.tpl」の設定
（会員制度・レッスン料金・スケジュール　メニューボタン）
---------------------------------------------------------------------------*/
figure.list_fig {
  width: 100%;
  max-height:450px ;
  float:none ;
}
figure.list_fig h4 {
  font-size: 170%;
}

/*画像3つ並び「ギャラリー」ブロック
---------------------------------------------------------------------------*/
/*画像を囲むブロックの設定*/
.gallery figure{
	width:calc((100% - 40px) / 3) ;
	margin:0 20px 0 0 ;
}
/*画像の設定*/
.gallery img{
	border-radius:20px 0 20px 0 ;
}

/**************************
4つ並びの場合のみの設定
************************/
.gallery4 figure:nth-child(3n){
	margin:0 20px 0 0 ;
}

/*list_contactブロック（画像と文章のリンクブロック　基本は3つ並び）
---------------------------------------------------------------------------*/
/*全体を囲むブロック*/
.wrapper_contact {
	padding: 30px 0% 45px;	/*上下、左右へのボックス内の余白*/
}
/*画像と文章を囲むブロックの設定*/
a.list_contact section{
	height:102px ;
}
/*メール*/
p span.mail{
	padding-left:24px ;
	background: url(../images/icon_mail.svg)no-repeat left center / 18px;
	font-size:120% ;
}
/*電話番号*/
p span.tel{
	padding-left:24px ;
	background: url(../images/icon_tel.svg)no-repeat left center / 18px;
	font-size:160% ;
}
/********************
お問い合わせページ内の設定
********************/
/*電話番号*/
#contact_tel p span.tel{
	background: url(../images/icon_tel_dark.svg)no-repeat left center / 22px;
	color:#00949e ;
}
/*フッターメニュー
---------------------------------------------------------------------------*/
/*１列分の設定*/
#footermenu ul {
	display:none ;
}
/*ロゴと住所の設定*/
#footermenu #footermenu1{
	text-align:center ;
	clear:both ;
	float:none ;
}
#footermenu #footermenu1 img{
	float:none ;
	margin-right:0 ;
}
/*スマホ版フッターメニューの設定*/
#footermenu #footermenu2{
	display:block ;
	padding: 20px 10px 0; /*上、右、下、左への余白*/
	clear:both ;
	text-align:center ;
}

/*お知らせ一覧・お知らせ詳細
---------------------------------------------------------------------------*/
/*見出しを含まないお知らせブロック一行*/
.list_news li a article{
	padding-right:60px ;
	background:url(../images/icon_arrow.svg) no-repeat right 10px center / 30px;
}
/*マウスオン時*/
.list_news li a:hover article{
	padding-right:60px ;
	background:url(../images/icon_arrow.svg) no-repeat right 0px center / 30px;
}
/*日付設定*/
.list_news .date {
	display:inline-block ;
	float: none;
	margin-bottom:9px ;
}
/*タイトル設定*/
.list_news h4 {
	line-height:1.5 ;
	padding-left:0 ;
}
/********************
お知らせ詳細
********************/
/*お知らせ詳細「サムネイルギャラリー」ブロック*/
	.thumbnail li img{
        height:70px ;
	}
		.main_photo{
        height: 350px;
	}

/*アコーディオン開閉ボックス（QAなど）
---------------------------------------------------------------------------*/
/*アコーディオンになるボックス*/
.acc-wrap .acc-title {
padding: 15px 45px 15px 15px ;
}
.acc-title:after {
  right: 15px;
  width: 7px;
  height: 7px;
  border-top: solid 3px #00949e;
  border-right: solid 3px #00949e;
}
/*アコーディオンで表示される中身*/
.acc-content {
  padding:15px 15px ;
}

/*テーブル1
---------------------------------------------------------------------------*/
/***********************
お問い合わせページ内
************************/
/*ta1設定*/
#contact .ta1{
	/*margin: 0 2% 60px;
	margin: 0 4% 60px;*/
}
/*ta1の左側ボックス*/
#contact .ta1 th {
	width: 30%;	/*幅*/
}
/***********************
画面900pxで横並びを縦並びにするテーブル（横長テーブル）
************************/
.ta_attr {
    /*width: 80%;
    width: 96%;*/
    border:none ;
  }
  .ta_attr .thead {
    display: none;
  }
  .ta_attr tr {
    width: 100%;
    width:calc(100% - 32px) ;
  }
  .ta_attr td {
    display: block;
    text-align: right;
    width: 100%;
    width:calc(100% - 32px) ;
    padding: 10px 15px;	/*ボックス内の余白*/
  }
  .ta_attr td.c { text-align:center;  }	/*中央寄せしたい場合*/
  .ta_attr td:before {
    content: attr(data-label);
    float: left;
    /*font-weight: bold;*/
    margin-right: 10px;
  }
  /*小見出し（背景薄いブルー）*/
  .ta_attr td.ta_attr_midashi {
    background:#baf2f6 ;
    font-weight: bold;
    text-align: left;
  }
  /*長めの文章は段落を下げて左寄せ*/
  .ta_attr td div {
    /*padding-left:7em ;*/
    padding-top:2.5em ;
    text-align:left ;
  }

/*その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #footermenu,.m-n {display: none;}
.big1 {font-size: 20px;}
.ws,.wl {width: 94%;width:calc(100% -10px);}
.w50 {overflow: hidden;width: auto;}
.sh {display:block;}
.pc {display:none;}
.c_max900 {text-align: left;}
.fr, .fl {width:96% ;float: none;margin:0 2% 30px ;}
#member .fr {max-width:initial;}
.fr_text, .fl_text{width:100% ;float: none;}


}



/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){

/*全体の設定
---------------------------------------------------------------------------*/
ul.disc, ul.decimal{padding-left:1.5em ;}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	height:60px ;
}
/*ロゴ画像*/
header #logo {
	width: 220px;
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明(0%)から色を100%出すアニメーション指定。*/
@keyframes menu1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*スマホ用メニューブロック*/
#menubar-s {
	top: 60px;	/*上から100pxの場所に配置*/
}

/*トップページのメイン画像
---------------------------------------------------------------------------*/
/*大きな端末用（600px以上端末）の設定*/
#mainimg{
	display:none ;
}
/*小さな端末用（600px以下端末）の設定*/
#mainimg_ms{
	display:block ;
	margin-bottom:20px ;
}
/********************
無料体験レッスンボックス
********************/
/*ボックス設定*/
#mainimg_ms .free-lesson_box {
	position:absolute ;
	left: 0;
	right: 0;
	margin: auto;
	bottom:10% ;
	width:290px ;
	padding:10px 10px ;
	background:#f8b62d ;
	background:rgba(0, 196, 209, 0.8);
	color:#FFF ;
	border-radius:20px 0 20px 0 ;
	text-align:center ;
}
/*白いライン*/
#mainimg_ms .free-lesson_box div {
	width:calc(100% - 20px);
	height:calc(100% - 20px);
	padding:10px 10px ;
	border:1px solid #FFF ;
	border-radius:15px 0 15px 0 ;
}
/*無料体験レッスン募集中*/
#mainimg_ms .free-lesson_box h4 {
	padding-right:45px ;
	background: url(../images/icon_arrow.svg)no-repeat right 5px center / 35px ;
}
/*マウスオン時*/
#mainimg_ms a:hover .free-lesson_box {
	background:rgba(0, 196, 209, 0.7);
	transform:translateY(-5px);
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
#mainimg_ms a:hover .free-lesson_box h4 {
	background: url(../images/icon_arrow.svg)no-repeat right center / 35px ;
}

/*コンテンツ。メニューの下にある白い背景色のブロック。
---------------------------------------------------------------------------*/
/********************
コンテンツ背景の英字コピー
********************/
.contents span.contents_bg_copy {
	font-size: 500%;		/*文字サイズ*/
}
/********************
h2タグ
********************/
#contents h2 {
	font-size: 150%;		/*文字サイズ*/
	margin-bottom: 45px;	/*下に空けるボックスの外側への余白*/
}
/*h2タグ内のspanタグ（飾り文字）*/
#contents .type1 h2 span {
	font-size: 80%;	/*文字サイズ*/
}
/*type1のh2タグ*/
#contents h2.type1 {
	padding: 0px 0px;	/*上下、左右へのボックス内の余白*/
}
/********************
h3タグ
********************/
#contents h3 {
	font-size: 130%;	/*文字サイズ*/
	line-height: 1.5;	/*行間を少し狭くする*/
}
/********************
h5タグ
********************/
#contents h5 {
	font-size: 120%;		/*文字サイズ*/
	padding: 0 0px;	/*左右の余白を段落タグに合わせる*/
}
/********************
段落タグ
********************/
/*pタグ*/
#contents p {
	padding: 0px 0px 30px;	/*上、左右、下への段落タグ内の余白*/
}
/*section同士の余白*/
#contents section + section {
	/*margin-top: 20px;*/
}

/*listブロック（画像と文章のブロック　基本は3つ並び）
---------------------------------------------------------------------------*/
/*listブロック１個あたりの設定*/
.list {
	width:auto;
	padding:0 ;
	margin: 0 0 30px 0 ;	/*上、右、下、左へのボックスの外側に空けるスペース*/
}
/*********************************
トップページのアピールボックス
*********************************/
/*listブロック１個あたりの設定*/
#top .list {
	padding:10px ;
}

/*写真背景リンクボックス「menu_forclient.tpl」の設定
（会員制度・レッスン料金・スケジュール　メニューボタン）
---------------------------------------------------------------------------*/
figure.list_fig h4 {
  font-size: 150%;
}

/*画像3つ並び「ギャラリー」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/
.gallery{
	padding:0 0 ;
}
/*画像を囲むブロックの設定*/
.gallery figure{
	width:100% ;
	margin: 0 0 20px 0 ;
}
/*画像の設定*/
.gallery img{
	border-radius:30px 0 30px 0 ;
}

/*アコーディオン開閉ボックス（QAなど）
---------------------------------------------------------------------------*/
.acc-wrap {
	margin:0 0 0 ;
}

/*お客様の声　LINE風吹き出し
---------------------------------------------------------------------------*/
.faceicon img{
  min-width:45px ;
}
.balloon_r .faceicon{
  margin-left:25px;
}
.balloon_l .faceicon{
  margin-right:25px;
}
.says {
  padding: 15px 13px 15px 17px;
  font-size:95% ;
}
.balloon_l .says:after {
   left: -26px;
  border-right: 22px solid #e2fdff;
}
.balloon_r .says:after {
  right: -26px;
  border-left: 22px solid #e2fdff;
}

/*チェックボックス付きリスト
---------------------------------------------------------------------------*/
ul.check {
	padding-left:0 ;
}

/*フローリスト（入会方法など）
---------------------------------------------------------------------------*/
ul.flow li{
	font-size:110% ;
}

/*テーブル1（基本のテーブル）　※th とtdを縦並びにする
---------------------------------------------------------------------------*/
.ta1 {
	width:100%;
	margin:0 0 30px ;
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 80px;		/*幅*/
}
/***********************
お問い合わせページ
************************/
#contact .ta1 {
	width:100%;
	margin:0 0 30px ;
}
/***********************
横並びを縦並びにするテーブル
************************/
.ta1.ta_vertically {
    border:none ;
}
.ta1.ta_vertically th,.ta1.ta_vertically td , #contact .ta1.ta_vertically th{
    display: block;
    width:calc(100% - 30px) ;
    padding: 10px 15px;	/*ボックス内の余白*/
}
.ta1.ta_vertically th {
    border-bottom: none;
}
.ta1.ta_vertically td {
    padding: 15px 15px;	/*ボックス内の余白*/
}

/*list_contactブロック（画像と文章のリンクブロック　基本は3つ並び）
---------------------------------------------------------------------------*/
/*全体を囲むブロック*/
.wrapper_contact {
	padding: 30px 3% 15px;	/*上下、左右へのボックス内の余白*/
}
/*list_contactブロック１個あたりの設定*/
a.list_contact {
	width:96% ;
	margin: 0 2% 30px 2% ;	/*上、右、下、左へのボックスの外側に空けるスペース*/
}

/*お知らせ一覧・お知らせ詳細
---------------------------------------------------------------------------*/
/*カテゴリーアイコン*/
#news span.cate{
	width: 4.5em;			/*幅*/
}
	/*一覧ページのh3見出し内*/
	#news h3 span.cate{font-size:65% ;}
/********************
お知らせ詳細
********************/
/*お知らせ詳細「サムネイルギャラリー」ブロック*/
	.thumbnail li img{
        height:50px ;
	}
		.main_photo{
        height: 200px;

        height:auto ;
        width:96% ;
	}
		.main_photo img{
         height:auto ;
        width:auto ;
	}

/*.link（大「リンクボタン」設定）
---------------------------------------------------------------------------*/
.link a {
	display: block;
	margin:0 auto ;
}
.link a::before {
  right: -1.5em;
}
.link a::after {
   width: 50px;
   right: -1.5em;
}
.link a:hover::before,
.link a:hover::after {
  right: -2.0em;
}
/********************
GoogleMapを開く
********************/
.link_gmap a {
  margin-bottom:30px ;
}

/*その他
---------------------------------------------------------------------------*/
.mr30_max600 {margin-right: 0px !important;}

.fr, .fl {width:100% ;float:none;margin: 0 auto 1em; }
img.fr, img.fl {display:block ; width:auto ;float:none;margin: 0 auto 1em;}
.c2 {text-align:left ;}
.gmap {width:100%;margin:0 0 ;}
.dis_600{display:inline-block ;}
.non_dis_600{	display:none ;}

}




/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	/*font-size: 12px;	/*文字サイズ*/
}

/*コンテンツ
---------------------------------------------------------------------------*/
/********************
コンテンツ背景の英字コピー
********************/
.contents span.contents_bg_copy {
	font-size: 480%;		/*文字サイズ*/
}

/*ページ内サブメニュー（ローカルナビゲーション）
---------------------------------------------------------------------------*/
/*ブロック全体*/
nav.submenu{
	padding:15px 15px 0;
}
/*メニュー1個ずつの設定*/
nav.submenu ul li{
	display:block ;
}
nav.submenu ul a{
	margin:0 0 15px 0 ;
}

/*フッターメニュー
ウィンドウ幅が狭くなって見づらくなるので、１列にレイアウト変更。
---------------------------------------------------------------------------*/
#footermenu ul {
	float: none;
	width: auto;
}

/*inputボタンにclass="btn"をつけた場合の設定
---------------------------------------------------------------------------*/
#contents input[type="submit"].btn,
#contents input[type="button"].btn,
#contents input[type="reset"].btn {
	font-size: 12px;		/*文字サイズ*/
}

/*その他
---------------------------------------------------------------------------*/
.ws,.wl {width: 94%;}
.big1 {font-size: 16px;}



}