@charset "UTF-8";

/* ------------------------------
全体的な事
------------------------------ */
.flex{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;}

body {
	text-align: center;
	margin: 0px;
	padding: 0px;
    background-image: url(img/bg2.png);
	background-repeat: repeat;
}

img {
border:0;
}

#contents {
	margin: auto;
	width: 900px;
	background-color: #FFF;
}

#header {
	height: 100px;
	width: 900px;
}
#slide {
	background-color: #FFF;
	height: 500px;
	width: 900px;
}
#button {
	height: 100px;
	width: 900px;
    justify-content: space-between;
    margin: 0 auto;
}

#top_cont {
	height: auto;
	width: 900px;
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
	font-size: 12px;
	line-height: 20px;
	float: none;
	background-color: #FFF;
}

a:link {
	text-decoration: none;
	color: #006699;
}
a:visited {
	text-decoration: none;
	color: #69C;
	font-weight: normal;
}
a:hover {
	text-decoration: none;
	color: #F99;
}
a:active {
	text-decoration: none;
	color: #C69;
} 

#lower {
	height: auto;
	width: 780px;
	margin: 10px;
	text-align: left;
}

/*---------------------------
短縮期間用 固定画像スタイル
---------------------------*/
.top-photo{ width: 100%;}


/*---------------------------
トップページ新着部分
---------------------------*/
.news{
  width:100%;
  margin: 0 auto;
  padding: 15px 0 15px;
}
.news img{ width: 100%; }


/*---------------------------
別府体操服セール用バナー
---------------------------*/
.top-banner{
  width: 100%;
  /*border-bottom: solid 1.5px #cccccc;*/
  margin: 0 auto 8px;
  padding-bottom: 8px;
  box-sizing: border-box;
}

.top-banner img,
.members-wrap,
.members-wrap img{
	width: 100%;
}


/*---------------------------
申込書のダウンロード
---------------------------*/
.dl{
  width: 100%;
  margin: 0;
}

.b-dl{
  display: inline-block;
  box-sizing: border-box;
}

.b-dl p{
  font-size: 25px;
  font-weight: bold;
  border: solid 2px #D80C18;
  color: #D80C18;
  padding: 12px;
  border-radius: 6px;
  transition: 0.3s;
  margin: 15px auto;
}

.b-dl p:hover{
  background: #D80C18;
  color: #fff;
}


/* ------------------------------
TOPクラス
------------------------------ */

.gakkou {
	width: 500px;
    background: #fff;
}
.map {
	width: 400px;
    background: #fff;
}

.hidari {
	width: 450px;
    float: left;
}

.migi {
	width: 450px;
    float: right;
}

.hidari2 {
	width: 580px;
	height: auto;
    float: left;
}

.migi2 {
	width: 320px;
	height: auto;
    float: right;
}


.dai {
	width: 900px;
	height: auto;
}

.top_lr {
	width: 900px;
}

.top_lr2 {
	width: 900px;
	height: auto;
    flex-wrap:wrap;
    margin: 30px auto 10px;
}

.bg_lr {
	width: 900px;
	height: 1170px;
}

.bg_lr2 {
	width: 900px;
	height: auto;
}


.fo_lr {
	width: 900px;
	height: 250px;
}

.bana_l {
	width: 450px;
	height: auto;
    margin-top: 10px;
}
.bana_r {
	width: 450px;
	height: auto;
    margin-top: 10px;
}

/*----------------------------------
グーグルマップ
---------------------------------*/
.g_map{
  width: 95%;
  margin: 15px auto 0;
  height: 0;
  overflow: hidden;
  padding-bottom: /*43.5%;*/80%;
  position: relative;
}

.map iframe{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.shop-photo{
  width: 95%;
  margin: 10px auto 0; 
}

.shop-photo img{width: 100%;}

/* ------------------------------
フッター設定
------------------------------ */
#footer {
	height: 120px;
	width: 900px;
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
	font-size: 14px;
	line-height: 20px;
	background-color: #FFF;
	color: #666;
    padding-bottom: 80px;
}

#footer2 {
	height: 120px;
	width: 900px;
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
	font-size: 14px;
	line-height: 20px;
	background-color: #FFF;
	color: #666;
}

.footer-border{ margin-bottom: 10px; }

/* ウィンドウ幅が0〜479pxの場合に適用するCSS */
@media screen and ( max-width:1100px )
{
#footer,#footer2 {
	height: 120px;
	width: 900px;
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
	font-size: 12px;
	line-height: 17px;
	background-color: #FFF;
	color: #666;
}
}


/* ------------------------------
ヘッターの中身
------------------------------ */
.logo a {
	display:block;
	width:800px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	float: left;
	background-image: url(img/logo.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.logo a:hover {
background-position:left bottom;
}

.inquiry a {
	display:block;
	width:600px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	float: right;
	background-image: url(img/het_b.png);
	background-repeat: no-repeat;
	background-position: left top;
}
.inquiry a:hover {
background-position:left bottom;
}

.migi1 {
	width: 100px;
	float: right;
	height: auto;
}

/* ------------------------------
スライドショー部分
------------------------------ */
#slideshow {
	position:relative;
	height:500px;
}

#slideshow DIV {
	position:absolute;
	top:0;
	left:0;
	z-index:8;
	opacity:0.0;
	height: 500px;
	background-color: #FFF;
}

#slideshow DIV.active {
    z-index:10;
    opacity:1.0;
}

#slideshow DIV.last-active {
    z-index:9;
}

#slideshow DIV IMG {
    height: 500px;
    display: block;
    border: 0;
}

/* ------------------------------
ボタン
------------------------------ */
.button_1 a {
	display:block;
	width:180px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	background-image: url(img/button_1.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.button_1 a:hover {
background-position:center bottom;
}

/*準備中リンクなし*/
.button_1_nolink{
  display:block;
	width:180px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-decoration:none;
	outline:none;
	background-image: url(img/button_1.png);
	background-repeat: no-repeat;
	background-position: center top;
    position: relative;
    overflow: hidden;
}

.button_2 a {
	display:block;
	width:180px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	background-image: url(img/button_2.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.button_2 a:hover {
background-position:center bottom;
}

/*準備中リンクなし*/
.button_2_nolink{
	display:block;
	  width:180px;
	  height:100px;
	  font-size:1px;
	  line-height:1px;
	  text-decoration:none;
	  outline:none;
	  background-image: url(img/button_2.png);
	  background-repeat: no-repeat;
	  background-position: center top;
	  position: relative;
	  overflow: hidden;
  }

.button_3 a {
	display:block;
	width:180px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	background-image: url(img/button_3.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.button_3 a:hover {
background-position:center bottom;
}
/*準備中リンクなし*/
.button_3_nolink{
	display:block;
	  width:180px;
	  height:100px;
	  font-size:1px;
	  line-height:1px;
	  text-decoration:none;
	  outline:none;
	  background-image: url(img/button_3.png);
	  background-repeat: no-repeat;
	  background-position: center top;
	  position: relative;
	  overflow: hidden;
  }

.button_4 a {
	display:block;
	width:180px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	background-image: url(img/button_4.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.button_4 a:hover {
background-position:center bottom;
}
/*準備中リンクなし*/
.button_4_nolink{
	display:block;
	  width:180px;
	  height:100px;
	  font-size:1px;
	  line-height:1px;
	  text-decoration:none;
	  outline:none;
	  background-image: url(img/button_4.png);
	  background-repeat: no-repeat;
	  background-position: center top;
	  position: relative;
	  overflow: hidden;
  }

.button_5 a {
	display:block;
	width:180px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	background-image: url(img/button_5.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.button_5 a:hover {
background-position:center bottom;
}

/*準備中リンクなし*/
.button_5_nolink{
  display:block;
	width:180px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-decoration:none;
	outline:none;
	background-image: url(img/button_5.png);
	background-repeat: no-repeat;
	background-position: center top;
    position: relative;
    overflow: hidden;
}
/*
.button_1_nolink::before,
.button_2_nolink::before,
.button_3_nolink::before,
.button_4_nolink::before,
.button_5_nolink::before{
	content: 'Coming Soon';
	position: absolute;
	left:-24px;
	top: 20px;
	font-size: 18px;
	font-weight: bold;
	display: block;
	text-align: center;
	color: red;
	background: yellow;
	width:180px;
	line-height: 1;
	padding: 6px 10px 6px 0;
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	transform: rotate(-30deg);
  }
*/
.button_1_nolink::before,
.button_2_nolink::before,
.button_3_nolink::before,
.button_4_nolink::before,
.button_5_nolink::before{
	content: 'Coming Soon';
	position: absolute;
	left:50%;
	top: 50%;
	font-size: 16px;
	font-weight: bold;
	display: block;
	text-align: center;
	color: #fff;
	background: rgba(255,0,0,0.8);
	width: 120px;
	line-height: 1.4;
	padding: 6px 5px;
	-webkit-transform: translate(-50%,-50%) rotate(-12deg);
	-moz-transform: translate(-50%,-50%) rotate(-12deg);
	-o-transform: translate(-50%,-50%) rotate(-12deg);
	-ms-transform: translate(-50%,-50%) rotate(-12deg);
	transform: translate(-50%,-50%) rotate(-12deg);
	border-radius: 8px;
  }

/* ------------------------------
ボタン押しっぱなし
------------------------------ */

.button_6 a {
	display:block;
	width:180px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	background-image: url(img/button_1a.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.button_6 a:hover {
background-position:center bottom;
}
.button_7 a {
	display:block;
	width:180px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	background-image: url(img/button_2a.png);
	background-repeat: no-repeat;
	background-position: center top;
	 
}
.button_7 a:hover {
background-position:center bottom;
}

.button_8 a {
	display:block;
	width:180px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	background-image: url(img/button_3a.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.button_8 a:hover {
background-position:center bottom;
}

.button_9 a {
	display:block;
	width:180px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	background-image: url(img/button_4a.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.button_9 a:hover {
background-position:center bottom;
}

.button_10 a {
	display:block;
	width:180px;
	height:100px;
	font-size:1px;
	line-height:1px;
	text-indent:-9999px;
	text-decoration:none;
	outline:none;
	background-image: url(img/button_5a.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.button_10 a:hover {
background-position:center bottom;
}
/* ------------------------------
下層ページ
------------------------------ */

p {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	line-height: 20px;
}
.midasi{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 20px;
	font-weight: bold;
}

.gaiyou {
	float: left;
	width: 300px;
	margin-right: 30px;
}

.formal_a {
	float: left;
	width: 225px;
}

.koukou_a {
	float: left;
	width: 225px;
}

.hurry{
  margin-bottom: 15px;
}


/* ------------------------------
かくだい
------------------------------ */

.cWrap{
    width:800px;
    height:800px;
    margin:0 auto;
    border:solid 3px #333;
}
.clBtn{
    width:120px;
    height:35px;
    background-color:#333;
    color:#fff;
    font-weight:bold;
    margin:20px auto;
    line-height:2.2em;
    cursor:pointer;
}
.clBtn:hover{
    width:120px;
    height:35px;
    background-color:#666;
    color:#fff;
    font-weight:bold;
    margin:20px auto;
    line-height:2.2em;
    cursor:pointer;
}

/* ------------------------------
画像を表示
------------------------------ */
.uniform_a {
	float: left;
	width: 125px;
}
.uniform_b {
	float: left;
	width: 250px;
}

/* ------------------------------
重要なお知らせ部分
------------------------------ */
.news-wrap{
  width: 85%;
  margin: auto;
  padding: 20px 0;
  text-align: left;
}

.news-ttl{
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}

.news-date{
  font-size: 15px;
  border-bottom: solid 1.2px gray;
  padding-bottom: 10px;
}

.news-tx{
  font-size: 16px;
  line-height: 1.8;
  margin: 20px 0;
  text-align: justify;
}

.open-wrap{
  text-align: center;
}

.open-tx{
  font-size: 30px;
  font-weight: bold;
  color: red;
  display: inline-block;
  margin: 10px 0;
  border-bottom: solid 1.5px red;
  padding-bottom: 10px;
}

.text-right{
  text-align: right;
}

.tel-wrap{
  width: 100%;
  background: #efefef;
  padding: 12px 0;
  box-sizing: border-box;
}

.tel-wrap .news-tx{
  text-align: center;
  margin: 0;
}

.news-tel{
  font-size: 25px;
  font-weight: bold;
}

.top-page-ttl{
  font-size: 25px;
  margin: 10px 0 30px;
}

.top-page-ttl a{
  color: #005bac;
  border: solid 1.5px #005bac;
  display: inline-block;
  padding: 8px 15px;
  box-sizing: border-box;
  border-radius: 8px;
}

.top-page-ttl a:hover{
  color: #fff;
  background: #005bac;
  transition: 0.3s;
}

.top-btn{
  text-align: center;

}

.top-btn a{
  font-size: 13px;
  display: inline-block;
  border: solid 1px #005bac;
  color:#005bac;
  padding: 5px 10px;
  border-radius: 5px;
}