@charset "UTF-8";
/*
===================================================================
この著作権表示は、必ず残して下さい。
オリジナルバージョンのスタイルシートは、以下のチュートリアルを基にしています。
http://www.codeblog.ch/2009/01/concrete5-theme-erstellenconcrete5-theme-erstellen

This style sheet was modified and used with permission.

By Usagi Project

http://concrete5-japan.org
http://usagi-project.org
===================================================================
*/
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.codeblog.ch/2009/01/concrete5-theme-erstellenconcrete5-theme-erstellen
Copyright (c) 2008 www.mesch.ch, Remo Laubacher. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
html, body {
	margin:0px;
    padding:0px;
	font-size:14px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color:#000;
	line-height:28px;
	min-width:1300px;
}


/* ウィンドウ幅が479〜768pxの場合に適用するCSS */
@media screen and (max-width:1024px){
html, body {
	min-width:100%;
	font-size:12px;
}
}
a {
    text-decoration: none;
}

a:link {
	text-decoration:none;
}
a:visited {
	text-decoration:none;
}
a:hover {
	text-decoration:none;
}
a:active {
	text-decoration:none;
}


.img{
width: 100%;
height: auto;
max-width: 100%;
}

.im{
width:auto;
height: auto;
max-width: 100%;
}

.link:hover {
    -ms-filter: "alpha(opacity=60)";
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}

/* 文字に関して */
.text { display: inline-block; }
.text br {
  display: inline;
}

@media only screen and (max-width: 479px) {
  .text br {
    display: none;
  }
}

/* 改行 */
@media screen and (min-width: 479px){   
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 479px){   
  .pc { display:none; }
  .sp { display:block; }
}



/* ================================================================ 
ヘッダー
=================================================================== */
#header{
	width:100%;
	height:auto;
	position: relative;
	z-index:1;
}
#header_bg{
	width:100%;
	height:auto;
	position:absolute;
	z-index:3;
}

#header_left{
	width:30%;
	height:auto;
	margin-left:3%;
	margin-right:0%;
	margin-top: 20px;
}
/* ウィンドウ幅が479〜768pxの場合に適用するCSS */
@media screen and (max-width:768px){
#header_left{
	width:98%;
	height:auto;
	margin-left:1%;
	margin-right:1%;
}
}


/* ================================================================ 
アイキャッチ
=================================================================== */
#eye{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	z-index:2;
}
#eye ul{
	margin:0;
	padding:0;
}

#eye_s{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	z-index:2;
	display:none;
}
#eye_s ul{
	margin:0;
	padding:0;
}

/* ウィンドウ幅が479〜768pxの場合に適用するCSS */
@media screen and (max-width:479px){
#eye{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	z-index:2;
	display:none;
}
#eye ul{
	margin:0;
	padding:0;
}

#eye_s{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	z-index:2;
	display:block;
}
#eye_s ul{
	margin:0;
	padding:0;
}
}




/* ================================================================ 
コンテンツ
=================================================================== */
#contents{
	width:100%;
	height:auto;
	float:left;
	margin-top:0px;
	margin-bottom:30px;
	margin-left:0%;
}
@media screen and (max-width:1024px){
#contents{
	width:100%;
	height:auto;
	float:left;
	margin-top:0px;
	margin-bottom:20px;
	margin-left:0%;
}	
}



/* ================================================================ 
フッター
=================================================================== */
#footer_bg{
	width:100%;
	height:auto;
	float:left;
	background-color:#ee4035;
	padding-top:2px;
	padding-bottom:2px;
}
#footer_box{
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	max-width:1500px;
}


/* ================================================================ 
コピーライト
=================================================================== */
#copyright{
	width:100%;
	height:auto;
	float:left;
	padding-top:0px;
	padding-bottom:0px;
	margin:0;
	text-align:center;
	color:#FFF;
	font-size:10px;
}

@media screen and (max-width:768px){
#copyright{
	width:98%;
	height:auto;
	float:left;
	padding-top:0px;
	padding-bottom:0px;
	margin:0 0 1% 0;
	text-align:center;
	font-size:8px;
}
}

@media screen and (max-width:479px){
#copyright{
	width:98%;
	height:auto;
	float:left;
	padding-top:0px;
	padding-bottom:0px;
	margin:0 0 1% 0;
	text-align:center;
	font-size:8px;
}
}

/* ================================================================ 
ページトップ
=================================================================== */
.page-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    padding: 14px 10px 14px 10px;
    background: #F6921D;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 16px;
	color:#fff;
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

.page-top:hover {
    background:#FAD185;
}

@media screen and (max-width:479px){
.page-top {
    bottom: 10px;
    right: 10px;
}
}

/* ================================================================ 
体験
=================================================================== */
#taiken {
    position: fixed;
    bottom: 40px;
    right: 40px;
}
@media screen and (max-width:479px){
#taiken {
    bottom: 10px;
    right: 10px;
}
}

/* ================================================================ 
お問い合わせ
=================================================================== */
.control-label{
	width:97%;
	padding-bottom:2px;
	color:#000;
}
.form-control{
	width:97%;
	margin-top:5px;
	margin-bottom:10px;
}





/* ================================================================ 
ここからデザイン関係のスタイルシート
=================================================================== */

/* -----オレンジ　体験申込み----- */
.box-ore{
	width: 100%;
	height: auto;
	background-color: #ee4035;
	text-align: center;
	padding: 20px 0;
}
@media screen and (max-width:479px){
.box-ore{
	width: 96%;
	height: auto;
	background-color: #ee4035;
	text-align: center;
	padding: 10px 2%;
}
}

/* -----ボックス----- */
.box-1{
	width: 100%;
	height: auto;
	margin: 30px auto 0 auto;
	max-width: 1200px;
}

.box1000{
	width: 100%;
	height: auto;
	margin: 30px auto 0 auto;
	max-width: 1000px;
}

/* ---2カラム--- */
.two_box{
	width: 100%;
	height: auto;
	margin: 60px auto 60px auto ;
	max-width: 1200px;
}
@media screen and (max-width: 479px) {
.two_box{
	margin: 0 auto 0px auto ;
}
}

.two{
	width:48%;
	height:auto;
	margin:15px 1% 15px 1%;
	float:left;
	text-align: center;
}
@media screen and (max-width: 479px) {
.two{
	width:98%;
	height:auto;
	margin:10px 1% 10px 1%;
	float:left;
	text-align: center;
}
}

/* ---ボディーケアキックボクシング　2カラム--- */
.two_box-ab{
	width: 100%;
	height: auto;
	margin: 0px auto 0px auto ;
	max-width: 1000px;
}
@media screen and (max-width: 479px) {
.two_box-ab{
	width: 98%;
	height: auto;
	margin: 0px 1% 0px 1% ;
	max-width: 1000px;
}
}
.two-a{
	width:50%;
	height:auto;
	margin:0px 2% 0px 2%;
	padding: 20px;
	float:left;
    border-radius: 20px; /* ← これで角丸に */
	background-color: white;
	font-size: 16px;
	line-height: 40px;
}
@media screen and (max-width: 479px) {
.two-a{
	width:94%;
	height:auto;
	margin:10px 1% 0px 1%;
	padding: 2%;
	float:left;
	font-size: 14px;
	line-height: 28px;
}
}

.two-b{
	width:38%;
	height:auto;
	margin:0px 2% 0px 2%;
	float:left;
}
@media screen and (max-width: 479px) {
.two-b{
	width:98%;
	height:auto;
	margin:10px 1% 0px 1%;
	float:left;
}
}






/* ---flex--- */
.flex{
  display: flex;
  gap: 10px; /* カラム間の余白 */
}
@media (max-width: 479px) {
  .flex {
    flex-direction: column;
  }
}


/* ---3カラム--- */
.three_box{
	width: 100%;
	height: auto;
	margin: 0 auto 0px auto ;
	max-width: 1200px;
}
@media screen and (max-width: 479px) {
.three_box{
	margin: 0 auto 0px auto ;
}
}

.three{
	width:33.1%;
	height:auto;
	margin:15px 1% 15px 1%;
	padding: 2%;
	float:left;
	text-align: center;
	background-color: #faaf3f;
    border-radius: 20px; /* ← これで角丸に */
}
@media screen and (max-width: 479px) {
.three{
	width:94%;
	height:auto;
	margin:10px 1% 10px 1%;
	padding: 2%;
	float:left;
	text-align: center;
}
}


/* ---上の方　ダイエット、運動不足、選手--- */
.three-k{
	width:30%;
	height:auto;
	margin:15px 1% 15px 1%;
	padding: 2%;
	float:left;
	border: solid 1px #faaf3f;
    border-radius: 20px; /* ← これで角丸に */
}
@media screen and (max-width: 479px) {
.three-k{
	width:94%;
	height:auto;
	margin:10px 1% 10px 1%;
	padding: 2%;
	float:left;
}
}


/* ---STEP　3カラム--- */
.three_box-a{
	width: 100%;
	height: auto;
	margin: 60px auto 0px auto ;
	max-width: 1200px;
}
@media screen and (max-width: 479px) {
.three_box-a{
	margin: 30px auto 0px auto ;
}
}
.three-a{
	width:31.1%;
	height:auto;
	margin:15px 1% 15px 1%;
	padding:0;
	float:left;
	text-align: center;
}
@media screen and (max-width: 479px) {
.three-a{
	width:98%;
	height:auto;
	margin:10px 1% 10px 1%;
	padding:0;
	float:left;
	text-align: center;
}
}


/* ---教室紹介　3カラム--- */
.three_box-b{
	width: 100%;
	height: auto;
	margin: 60px auto 0px auto ;
	max-width: 1200px;
}
@media screen and (max-width: 479px) {
.three_box-b{
	margin: 30px auto 0px auto ;
}
}
.three-b{
	width:31.1%;
	height:auto;
	margin:15px 1% 15px 1%;
	padding:0;
	float:left;
	text-align: center;
	font-size: 18px;
}
@media screen and (max-width: 479px) {
.three-b{
	width:98%;
	height:auto;
	margin:10px 1% 10px 1%;
	padding:0;
	float:left;
	text-align: center;
}
}

/* ---テキストボックス--- */
.text-1{
	width: 100%;
	height: auto;
	text-align: center;
	border-bottom: solid 5px #f6921d;
	margin: 80px auto 80px auto ;
	max-width: 1200px;
}
@media screen and (max-width: 479px) {
.text-1{
	width: 98%;
	height: auto;
	text-align: center;
	border-bottom: solid 5px #f6921d;
	margin: 30px 1% 30px 1% ;
}
}


/* ---料金　3カラム--- */
.three_box-c{
	width: 100%;
	height: auto;
	margin: 60px auto 0px auto ;
	max-width: 980px;
}
@media screen and (max-width: 479px) {
.three_box-c{
	margin: 30px auto 0px auto ;
}
}
.three-c{
	width:31.1%;
	height:auto;
	margin:15px 1% 15px 1%;
	padding:0;
	float:left;
	text-align: center;
	font-size: 18px;
}
@media screen and (max-width: 479px) {
.three-c{
	width:98%;
	height:auto;
	margin:10px 1% 10px 1%;
	padding:0;
	float:left;
	text-align: center;
}
}



/* ---申込みボックス--- */

.box-mo{
	width: 96%;
	height: auto;
	margin: 80px 2% 80px 2%;
	text-align: center;
}
@media screen and (max-width: 479px) {
.box-mo{
	width: 96%;
	height: auto;
	margin: 40px 2% 40px 2%;
	text-align: center;
}
}

/* ---ボディーケアキックボクシング　ボックス--- */

.box-body{
	width: 100%;
	height: auto;
	padding: 0px 0 0px 0;
	background-color: #ffd69e;
	float: left;
}
.body-title1{
	width: 100%;
	height: auto;
	text-align: center;
	float: left;
	padding: 40px 0 0px 0;
	margin: 0;
}
@media screen and (max-width: 479px) {
.body-title1{
	width: 98%;
	height: auto;
	text-align: center;
	float: left;
	padding: 40px 0 0px 0;
	margin: 0 1% 0 1%;
}
}


.body-title2{
	width: 100%;
	height: auto;
	text-align: center;
	margin: 0px 0 0 0 ;
	float: left;
}
@media screen and (max-width: 479px) {
.body-title2{
	width: 98%;
	height: auto;
	text-align: center;
	margin: 0px 1% 0 1% ;
	float: left;
}
}

.box2{
	width: 100%;
	height: auto;
	text-align: center;
	margin: 0;
}

.box3{
	width: 100%;
	height: auto;
	background-color: #ffd69e;
	margin: 60px 0 0 0 ;
}
.box4{
	width: 100%;
	height: auto;
	background-color: #ffd69e;
	margin: -36px 0 0 0 ;
	padding: 0px 0 40px 0 ;
	float: left;
}
@media screen and (max-width: 479px) {
.box4{
	width: 100%;
	height: auto;
	background-color: #ffd69e;
	margin: -29px 0 0 0 ;
	padding: 0px 0 40px 0 ;
	float: left;
}
}

.box5{
	width: 100%;
	height: auto;
	margin: 60px 0 100px 0 ;
	float: left;
	text-align: center;
}
@media screen and (max-width: 479px) {
.box5{
	width: 100%;
	height: auto;
	margin: 40px 0 40px 0 ;
	float: left;
}
}
/* ---タイトルボックス--- */
.title-h{
	widows: 100%;
	height: auto;
	text-align: center;
	font-size: 34px;
	font-weight: bolder;
	padding: 86px 0 0 0 ;
	margin: 30px 0 0 0 ;
	background-image: url("images/title.png");
	background-position: center;
	background-repeat: no-repeat;
}

@media screen and (max-width: 479px) {

.title-h{
	font-size: 28px;
	font-weight: bolder;
	padding: 64px 0 0 0 ;
	margin: 30px 0 0 0 ;
}
}


/* ---タイトルボックス(背景あり）--- */
.title-g{
	widows: 100%;
	height: auto;
	text-align: center;
	font-size: 34px;
	font-weight: bolder;
	padding: 86px 0 0px 0 ;
	margin: 30px 0 0px 0 ;
	background-image: url("images/title.png");
	background-position: center;
	background-repeat: no-repeat;
	background-color: #ffd69e;
}

@media screen and (max-width: 479px) {

.title-g{
	font-size: 28px;
	font-weight: bolder;
	padding: 64px 0 0 0 ;
	margin: 30px 0 0 0 ;
}
}



/* ---インストラクター　2カラム--- */
.in-box{
	width: 100%;
	height: auto;
	margin: 0px auto 30px auto ;
	padding: 20px;
	max-width: 780px;
	border-radius: 20px; /* ← これで角丸に */
	background-color: #ffd19e;
	border: solid 3px #ee4035 ;
}
@media screen and (max-width: 479px) {
.in-box{
	width: 92%;
	height: auto;
	margin: 0px 1% 30px 1% ;
	padding: 2%;
	max-width: 780px;
}
}
/*---講師紹介テーブル---*/
table.inst {
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
	line-height: 1;
	width:100%;
}
table.inst th {
	width:50%;
	padding: 0;
	vertical-align: top;
	text-align:left;
	line-height:24px;
}
table.inst td {
	padding: 0px 0 12px 20px;
	vertical-align:top;
	text-align:left;
	line-height:24px;
}

@media screen and (max-width:479px){
table.inst th {
	width:100%;
	padding: 0 0 10px 0;
	vertical-align: top;
	text-align:center;
	line-height:24px;
	display:block;
}
table.inst td {
	padding: 0px 0 20px 0px;
	vertical-align:top;
	text-align:left;
	line-height:24px;
	display:block;
}
}