@charset "utf-8";

/* ---------------------- */
/* ▼各ページ共通         */
/* ---------------------- */

/* 文字色　*/
.紺色 { color: #3333ff; }

/* 文字サイズ　*/
.font20 { font-size: 20px; }

/* 文字太さ　*/
.bold { font-weight: bold; }

/* 微調整用　*/
.m-l30 {margin-left: 30px;}

/* -------------------------------- */
/* ▼全体の設定 		　　*/
/* -------------------------------- */
* {
	margin: 0;
	padding: 0;
}

html {
	font-size: 52.5%;
	width: 100%;
	height: 100%;
	overflow: auto
/*	overflow-x: hidden; */
}

body{
	margin: 0;
	padding: 0;
	background-color: #fff;
	color: #333;
	font-family: メイリオ, Meiryo, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-weight: 400;
	font-size: 1.3rem;
	-webkit-text-size-adjust: 100%;	
	-webkit-overflow-scrolling: touch;
   	position: relative;
	min-width: 390px;
}

img{
	border: none; 
	max-width: 100%;
	height: auto;
	width /***/:auto;

}

a {
	outline: none;
}

a:link,a:visited{
	color: #333;
	text-decoration: none;
/* 	transition: 0.35s ease-in-out;*/
 	transition: 0.2s ease;
}

/* 指定のlinkを太字＆紺色にする */
a.link_blue:link,a.link_blue:visited{
	color: #3333ff;
	font-weight: bold;
}

a:hover,a:active{
	color:#666;
	text-decoration: underline;
}

.clear{
	clear: both;
}

/* ------------------------------------------ */
/* ▼ヘッダー(header)の設定　【各ページ共通】 */
/* ------------------------------------------ */
header{
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
	z-index: 1000;
	float: left;
}

header .inner {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	display: table;
	height: 105px;
}

header .l-title {
	display: table-cell;
	width: 72%;
	min-width: 300px;
	vertical-align: middle;
	text-align:left;
}

header .l-title h1 {
	margin: 0;
	vertical-align: middle;
	float:left;
}

header .l-title img {
	vertical-align: middle;
	margin: 0 0 0 30px;
	width: 400px;
	height: 80px;
}

header .l-title h1 a{
 	transition: 0.35s ease-in-out;
}

header .l-title h1 a:hover{
    opacity: 0.65;
    filter: alpha(opacity=65);
}

header .r-title{
	width: 28%;
	text-align:right;
	padding: 20px 20px 0 0;
	/* box-sizing: border-box;*/
	vertical-align: middle;
	display: table-cell;
	position: relative;
}

header .r-title img{
	display: inline;
	margin: 0 0 0 7px;
 	transition: 0.35s ease-in-out;
 	width: 48px;
	float: right;
}

header .r-title img.home, header .r-title img.sitemap, header .r-title .dial {
	float: right;
}
/*
header .r-title img.sitemap {
	float: right;
}

header .r-title img.toi { 
	float: right;
}

header .r-title .dial { 
	float: right;
}
*/
header .r-title h3 { 
	float: right;
	margin: 0 5px 0 10px;
	padding: 0;
	font-size: 150%;
	line-height: 25px;
}

header .r-title h2 { 
	clear: right;
	margin: 0 5px 0 10px;
	padding: 0;
	font-size: 150%;
	line-height: 25px;
}

header .r-title img.free { 
	float: right;
}

header .r-title img.biz { 
	float: right;
	width: 150px;
	padding-right: 5%;
}


/*
header .r-title img.sitemap:hover{
    opacity: 0.65;
    filter: alpha(opacity=65);
}
*/
header .r-title img.sitemap:hover,header .r-title img.home:hover {
    opacity: 0.65;
    filter: alpha(opacity=65);
}

/* --------------------------------------------- */
/* ▼メインメニュー(nav)の設定　【各ページ共通】 */
/* --------------------------------------------- */

nav { 
	width: 100%;
	height: 58px;
	padding: 0;
	margin: 0 auto 0px auto ;
	display: table;
	position: relative;
	background-color: #4169e1;
}

nav .block.navi-menu { 
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2px;
	margin-bottom: 2px;
}

ul.top-menu img {
	height: 32px;
	width: 32px;
     /* opacity: 0; */
	margin: 0 5px 0 0;
	vertical-align: middle;
}

/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.top-menu {
   margin: 0;               
   padding: 0px; 
/*   background-color: #cc0000; */ 
   font-size: 1.4em;
   height: 50px;
   text-align: center;
}

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.top-menu li {
/*   display: inline-block;    ★1:横並びに配置する */
   list-style-type: none;  /*  ★2:リストの先頭記号を消す */
   position: relative;     /* ★3:サブメニュー表示の基準位置にする */
   float: left;   
   width: 16.5%;
   height: 50px;
   padding: 0; 
   margin: 0;
   border: 1px solid white;
}

ul.top-menu a {
   color: white;              /* メニュー項目の文字色(白色) */
   line-height: 50px;         /* メニュー項目のリンクの高さ(40px) */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
/*   font-weight: bold;          太字にする */
   display: block;            /* ★4:項目内全域をリンク可能にする */
}

ul.top-menu a:hover {
   background-color: #ccffff; /* #00bfff;  メニュー項目にマウスが載ったときの背景色 */
   color: #3333ff;            /* メニュー項目にマウスが載ったときの文字色 */
}


/* ▼サブメニューは、とりあえず非表示にしておく */
ul.top-menu ul {
   display: none;        
}

/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.top-menu ul {
   display: none;       /* ★1:標準では非表示にする */
   margin: 0px;         /* ★2:サブメニュー外側の余白(ゼロ) */
   padding: 0px;        /* ★3:サブメニュー内側の余白(ゼロ) */
   position: relative;
   font-size: 0.8em;
} 

/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
/* ---------------------------------- */
ul.top-menu li:hover > ul {
   display: block;      /* ★5:マウスポインタが載っている項目の内部にあるリストを表示する */
   z-index: 100;
}

/* ------------------------ */
/* ▼サブメニュー項目の装飾 */
/* ------------------------ */
ul.top-menu ul li {   
   width: 100%;               /* サブメニュー1項目の横幅(211px) */
/*   border-top: 1px solid white;   項目上側の枠線(白色で1pxの実線) */
   background-color: rgba( 65, 105, 225, 0.8 );
/*   border: none;  枠線をいれない場合 */
   height: auto; /* 35px; */
   border-top: none;
   border-left: none;
   border-right: none;
   border-bottom: 0.7px dotted white;

}

/*  ▼ｻﾌﾞﾒﾆｭｰの先頭だけTOPを広げる */
ul.top-menu ul li.fst { padding-top: 2px; }

ul.top-menu ul li a {   
   line-height: 35px;   /* サブメニュー1項目の高さ(35px) */
   text-align: center;    /* 文字列の配置(左寄せ) */
   padding-left: 5px;   /* 文字列前方の余白(5px) */
   font-weight: normal; /* 太字にはしない */
   color: white;
}

ul.top-menu ul li a:hover {   
   background-color: #ccffff; /* サブメニュー項目にマウスが載ったときの背景色 */
   color: #3333ff;            /* サブメニュー項目にマウスが載ったときの文字色 */
}

/* ▼２行にまたがるﾒﾆｭｰの高さ調整  */
ul.top-menu ul li.gyo a{ 
	line-height: 17.5px;
}

/* ▼ｻﾌﾞﾒﾆｭｰの先頭、かつ２行にまたがるﾒﾆｭｰの高さ調整  */
ul.top-menu ul li.gyo-fst a{ 
	padding-top: 2px;	
	line-height: 17.5px;
}

/* ----------------------------------- */
/* ▼3階層目以降(孫メニュー以降)の装飾 */   /* ※下ではなく横(右)に表示します。 */
/* ----------------------------------- */
ul.top-menu ul ul {
   margin: 0px;         /* ★サブメニュー外側の余白(ゼロ) */
   padding: 0px;        /* ★サブメニュー内側の余白(ゼロ) */
   display: none;       /* ★標準では非表示にする */
   position: absolute;  /* ★絶対配置にする */
   top: 0px;          /* 1pxだけ上方向にずらす(※上に1pxの枠線を引いている場合) */
   left: 100.5%;         /* ★基準位置からの距離を親ボックスの幅100％にする */
/*   border-left: 1px solid pink;   左側に引く枠線(ピンク色で1pxの実線) */
   font-size: 1em;
   width: 100%;
}

/*  ▼最右の3つ目のｻﾌﾞﾒﾆｭｰだけ左に表示する */
ul.top-menu li.t-m6 ul ul li {
	right: 200%;
} 

/* ▼↑で２行にまたがるﾒﾆｭｰの高さ調整した同列の3階層目ﾒﾆｭｰの高さ戻し */
ul.top-menu ul ul li.gyo-sub a{
	line-height: 35px;
}

/* ▼3つ目のｻﾌﾞﾒﾆｭｰの先頭だけ1段下げる  */
/* ul.top-menu ul ul li.snd { margin-top: 40px; } */

/* ********************************************************************************** */
/* ▼max-width: 1216px 以下時の対応 */
/* ********************************************************************************** */
@media (max-width: 1216px) {

	header .l-title img {	margin: 0 0 0 20px;	width: 300px; 	height: 60px; } /* ジムlogoのサイズを小さめに */
	header .l-title {	width: 70%;	}
	header .r-title {	width: 30%;	padding-bottom: 15px;	}
	header .r-title h3,header .r-title h2 {	font-size: 120%;	line-height: 20px;}		/* フリーダイヤルを小さめに */
	header .r-title img { width: 37px;	}					/* フリーダイヤルのアイコンを小さめに */
	
	ul.top-menu li {	width: 33%;	}

}


/* ********************************************************************************** */
/* ▼max-width: 956px 以下時の対応 */
/* ********************************************************************************** */
@media (max-width: 956px) {
	header {	height: auto;}
	header .l-title {	display:block;	width: 100%;	text-align:center;}
	header .l-title img {	margin: 2px 0 0 0;	padding: 2px 0 0 0; width: 350px; 	height: 70px; }    /* ジムlogoのサイズを1216px時より大きめに */
	header .r-title {	display:block;	width: 200px;	 margin:0 auto;	padding: 0; } /* ｲﾝﾗｲﾝの幅をｷﾞﾘｷﾞﾘ(200px)まで縮めてから中央に配置する */
	header .r-title h3,header .r-title h2 {	font-size: 100%;	line-height: 13px;}	/* フリーダイヤルをさらに小さめに */
	header .r-title h3 {padding: 1px 0 0 0;}
	header .r-title img { width: 26px;	}	/* フリーダイヤルのアイコンをさらに小さめに */

	header .l-title h1 {margin:0 1% 0 2%;}
	header .l-title h4 {margin:0 2% 0 0;}
	header .r-title {padding: 2px 0;}

}


/* ********************************************************************************** */
/* ▼max-width: 756px 以下時の対応 */
/* ********************************************************************************** */
@media (max-width: 756px) {
	
	ul.top-menu li {	width: 49.5%;	}

	header .l-title h1 {float:none;}
	header .l-title h1 {margin:0;}
	header .l-title h4 {margin:0 0 2px 0;}

}

/* ********************************************************************************** */
/* ▼max-width: 416px 以下時の対応 */
/* ********************************************************************************** */
@media (max-width: 416px) {

	header .l-title img {	margin: 0 auto;	width: 300px; 	height: 60px; } /* ジムlogoのサイズを小さめに */
	
	ul.top-menu li {	width: 99%;	}

}



/* ------------------------------------------ */
/* ▼フッター(footer)の設定　【各ページ共通】 */
/* ------------------------------------------ */
footer{
	clear: both;
	width: 100%;
	margin: 10px auto 0;
	padding: 0 0 0 0;
	text-align: center;
	background-color: #fff;
	color: black;
}

footer .inner{
	width: 100%;
	margin: 0 auto;
	padding: 0;
}


footer .txtlink{
	padding: 15px 0;
	box-sizing: border-box;
	background-color: #dedede;
/*	border-top: 1px dashed #979797;*/
/*	border-bottom: 1px dashed #979797;*/
	text-align: center; 
	font-size: 1.3em; 
}

footer .txtlink ul{
	list-style: none;
	margin: 10px 0;
	padding: 0;
}

footer .txtlink ul li{
	display: inline;
	border-right: 1px solid #979797;
	margin: 0;
	padding: 0 10px;
}

footer .txtlink ul li:last-child{
	border-right: 0;
}

footer .info{
	text-align: center;
	padding: 0 0 10px 5% /*80px*/;  
}

footer .info h1{
	margin: 0;
}

footer .info img{
	margin: 15px 0 5px;
 	transition: 0.35s ease-in-out;
} 

footer .info img.p-img{
	float: right;
	width: 72px;
	height: 72px;
	margin: 10px 20px 10px 0; 
}


footer .info img:hover{
    opacity: 0.65;
    filter: alpha(opacity=65);
}

footer .privacy {
	float: right;		
	margin: 35px 15px;
	font-size: 1.2em;
	line-height: 1.5em;
	text-align: left;
}

footer .info .address{
	background-color: #fff;
	padding: 0px 0;
	font-size: 125%;
}


footer .info .address .hr{
	width: 100%;
	margin: 10px 0;
	padding: 0;
	border-top: 1px dashed #979797;
	border-left: none;
	border-right: none;
	border-bottom: none;
}

footer .copyright{
	text-align: center;
	padding: 20px 0;
	font-size: 120%;
	border-top: 1px dashed #979797;
}


/* ********************************************************************************** */
/* ▼max-width: 550px 以下時の対応 */
/* ********************************************************************************** */
@media (max-width: 550px) {

footer {min-width:390px;}
footer .txtlink {height: 80px;}	/*ﾘﾝｸが2行になった分、高さ増し*/
footer .txtlink ul {margin: 0; padding: 0;}
footer .txtlink ul li{	display: block;	float:left;	width: 25%;	margin:3px;	padding: 0 auto;}

footer .info{	padding: 0 4% 10px 10%;}	/*ｱﾄﾞﾚｽなどが中央になる様調整*/  

footer .info img.p-img{ margin: 10px 0;}	/*Pﾏｰｸの位置調整*/

footer .info .address{font-size: 95%;}	/*ｱﾄﾞﾚｽ・ｺﾋﾟｰﾗｲﾄのｻｲｽﾞ調整*/
footer .copyright{font-size: 100%;}

footer .txtlink ul li:nth-of-type(3){	border-right: 0;}	/*右端のﾗｲﾝを消す*/

footer .txtlink ul li:nth-of-type(1){ font-size:0.8em;}	
footer .txtlink ul li:nth-of-type(1), footer .txtlink ul li:nth-of-type(4){ margin-left:20px;}
footer .info img.p-img{	margin: 10px 20% 0 0;}
footer .privacy {margin: 30px 15px 20px;}

}

/* ********************************************************************************** */

.pagetop {
  position: fixed;
  bottom: 10px;
  right: -80px;
}

.btn {
	font-size: 20px;
}

/* ********************************************************************************** */
#video-tag{
	position: relative;
	width:90%;
	max-width:800px;
}
#video-tag video{
	max-width:100%;
	border:1px solid gainsboro;
}

#iten-info{
	padding-bottom:30px;
	font-size:160%;
	line-height:1.6em;
}
#iten-info h2{
	padding-top:30px;
	padding-bottom:22px;
}