/*共通*/

body {
  margin:0px;
  padding:0px;
  background-color:#CBFF97;
  max-height: 100%;
  font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", Osaka;
  -webkit-text-size-adjust: none;
}


table{
  font-size:16;
  line-height:1.8em;
  color:#333333;
}
@media only screen and (max-width : 800px){
table{font-size:28;}
}


.pc { display:block; }
.sp { display:none; }
@media only screen and (max-width : 800px){
.pc { display:none; }
.sp { display:block; }
}




ul,
ol {
  padding-left: 20px;/* クロムはデフォルトだと左40 */
}


/* ボックス関係 */
.box_all{
  box-shadow:0px 0px 5px gray;
}


.box_sita{/* 一番下 */
    padding:15px 0px 10px 0px;
    margin: 0px 0px 0px 0px ;
    color: #333333;
    background: white;
    width:100%;
    text-align: right;
    border-top:0px solid lightgray;
}
@media only screen and (max-width : 800px){
.box_sita{font-size:28;}
}




.kakomi {
  border:1px #E7E7E7 solid;
  padding:10px 10px 10px 20px;
  margin:0px 0px 0px 0px;
  border-radius: 10px;/*角の丸み*/
}

.box26 {/* 利用再開：トレーニング室 */
    position: relative;
    margin: 1em 0;
    padding: 0.5em 1em;
    border: solid 3px red;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 25px;
    background: #FFF;
    color: red;
    font-weight: bold;
}
@media only screen and (max-width : 800px){
.box26 .box-title{font-size:28;}
}

.box26 p {
    margin: 0; 
    padding: 0;
    font-size:16;
}
@media only screen and (max-width : 800px){
.box26 p{font-size:28;}
}






/* リンク関係 */
a:link,
a:visited,
a:active {
  font-size:15;
  text-decoration:underline;color:#333333;
  }
a:hover {
  text-decoration:underline;color:#58a2ff;
  }
a:hover img {
  opacity: 0.7;
  }
@media only screen and (max-width : 800px){
a:link,
a:visited,
a:active,
a:hover
{font-size:27;}
}



a.menu {/* PC時メニュー */
  padding: 10px 7px 6px 7px;
  display:block;
  text-align:center;
  font-weight:bold;
  text-shadow:0 -1px 0 #ccc;
  }
a.menu:link,
a.menu:visited,
a.menu:active {
  text-decoration:none;
  color:green;
  border-top: 1px #b3e589 solid;
  border-bottom: 1px #7ab24c solid;
  border-left: 0px #b3e589 solid;
  border-right: 0px #7ab24c solid;
  background-color:#a9db80;
  }
a.menu:hover {
  background-color:#8ed058;
  border-top: 1px #9fcc7a solid;
  border-left: 0px #9fcc7a solid;
  }
a.menu p {
  padding: 0px 0px 0px 0px;
  }


a.menu2 {/* スマホ時メニュー */
  display:block;
  font-size: 30px;
  }
a.menu2:link,
a.menu2:visited{
  padding: 30px 0px 25px 20px;
  border-top: 1px lightgray solid;
  color: #333333;
  text-decoration:none;
  }
a.menu2:hover {
  background-color:whitesmoke;
  color: #333333;
  }
a.menu2:active {
  background-color:lightgray;
  }



.head/* PC用BT写真とHP名 */
  {position: relative;
}
.head p{
  position: absolute;
  color:white;
  font-weight: bold;
  font-size: 35;
  line-height:1.2em;
  top:33;
  left:45;
  text-shadow:0 -1px 0 blue;
  text-align:left;
}
.head img{
  width:100%;/* %はテーブル幅 */
}


.head2{/* スマホ時のHP名 */
  padding:40px 0px 30px 0px;
  color: white;
  font-weight: bold;
  font-size:35;
}


.peiji_title {/* 各ページのタイトル */
  margin:0px 0px 5px 0px;
  padding:10px 0px 5px 10px;
  border-top: 0px #E7E7E7 solid;
  border-bottom: 1px #AFAFAF dashed;
  border-left: 5px #8ed058 solid;
  font-size:25;
  color:#494949;
  }
@media only screen and (max-width : 800px){
.peiji_title{font-size:30;}
 }


.taitoru10 {/* 各記事のタイトル */
  margin:0px 0px 5px 0px;
  padding:5px 0px 0px 7px;
  border-top:;
  border-bottom:2px #E7E7E7 solid;
  border-left:5px #8ed058 solid;
  border-right:2px #DBDBDB solid;
  font-size:18;
  font-weight: bold;
  color:#494949;
  }
@media only screen and (max-width : 800px){
.taitoru10
{font-size:29;}
}








/* ホーム */


/*利用料金一覧表、フィットネス教室表*/
table
.hyou{
  background-color: #b2b2ff;
  }
.hyou th {
   background-color: #E7E7E7;
   text-align: center;
   color:navy;
   }
.hyou td {
  background-color: white;
  }
@media only screen and (max-width : 800px){
table.hyou
{font-size:23;}
}



/*サークル案内*/


a.shumoku2 {
  text-decoration:none;
  font-weight: bold;
  font-size:17;/*原因不明*/
  color:#333333;
  }



/*深谷アスリートクラブ*/
a.eventname:link,
a.eventname:visited,
a.eventname:active {
  text-decoration:underline;
  color:#333333;
  }
a.eventname:hover {
  text-decoration:underline;
  color:#58a2ff;
  }

table
.event {
  background-color:lightgray;
  width:100%;
  }
.event th {
  background-color:#F3F3F3;
  text-align:center;
  color:#333333;
  font-weight:normal;
  width:30%;
  }
.event td {
  background-color: white;
  height:50;
  }















/*ドロワーのメニュー*/
header {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding:0px 0px 0px 0px;
}

#nav-drawer {
    position: relative;
  padding: 0px 0px 0px 0px/*ドロワーの位置*/
  
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 0px;
  height: 0px;
  vertical-align: middle;/*縦に中央寄せ*/
}

/*文字「メニュー」（上下リンク幅が広がるので入れる。３本目の下に置く*/
#nav-open p {
  font-size: 13px;
  font-weight: bold;
  margin:0px;
  padding: 50px 0px 0px 0px;/*トップからの位置*/
  color:#9edb6d;
  width:100;
  height:0;
}

/*ハンバーガーアイコン、位置*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  right:50;/*１本目のマージン 50以下にすると右余白ができてしまう*/
  bottom:15;/*３本まとめて底からの高さ*/
  height: 6px;/*３本の線の太さ*/
  width: 60px;/*３本の長さ*/
  border-radius: 1px;
  background: white;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -20px;/*２本目*/
  right:0;/*１本目を基準として*/
}
#nav-open span:after {
  bottom: -40px;/*３本目*/
  right:0;/*１本目を基準として*/
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 70%;/*メニュー側の幅*/
  max-width: 100%;/*最大幅（調整）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

@media screen and (min-width:900px) {
  #nav-open {
    display:;/*アイコンをＰＣのとき表示しない場合は「none」*/
  }
}



/*スライダー*/
.box_sra {
  box-shadow:0px 0px 3px lightgray;
  padding:1px 1px 1px 1px;
  width:218;
}

#stage {/* 背景枠画面 */
	position: relative;
	max-width: 218;
	height: ;/* A4サイズ=(210×maxwidth)÷297-1≒352 */
	margin: 0 auto;
	overflow: hidden;
        background-color:#333333;
}

/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの animation を設定*/
#photos {
	position:absolute;
	top:0;
	width:100%;
	animation: imgPassToLeft0 30s infinite;
	-webkit-animation: imgPassToLeft0 30s infinite;
}
/*各写真の並び位置を設定
#photo1, #photo2, #photo3, #photo4, #photo5 */
#photo0 { left:  0%; }
#photo1 { left:100%; } 
#photo2 { left:200%; }
#photo3 { left:300%; }
#photo4 { left:400%; }
#photo5 { left:500%; }
#photo6 { left:600%; }
.pic { position:absolute;top:0;width:100%; }

/*写真サイズを可変に*/
.pic img { width:100%; }

/*文字（主に説明文、送りボタン*/
.pic span {
  position: absolute;/*絶対配置*/
  top:93;/*画像サイズが違うので上からの高さとする*/
  right:0%;
  left:0%;
  font-size:14;
  line-height:1.6em;
  color:white;
  font-weight: ;
  background-color:rgba(44,48,44,0.5);
  padding:5px 5px 100px 5px;
  width:100%;
  text-align:left;
  }

/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
	display: none;
}

/*送りボタン文字（＜、＞）の設定*/
.b_left span, .b_right span {
	position: absolute;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:15px;
	font-weight:;
	top: 0;/*影の上からの距離*/
	opacity:0;
	color:white;/*マウスを置かないとき*/
        background-color:rgba(44,48,44,0.5);
        padding:5px 0px 1px 0px;
        width:100%;
  text-align:right;
}

.b_left span {
	left: ;
}
.b_right span {
	left: 0%;
}
/*ボタン文字hover時の設定#58a2ff*/
.pic:hover > label div span {
	opacity:1;
	color:white;/*画面にマウス*/
}
.pic label div span:hover {
	color:white;/*矢印にマウス*/
	cursor:pointer;
  text-decoration:underline;
}


/* 各送りボタンクリック時のanimation設定 */
#next1:checked ~ #photos {
	animation: imgPassToLeft1 30s infinite;	
	animation-delay: -4.8s;
	-webkit-animation: imgPassToLeft1 30s infinite;	
	-webkit-animation-delay: -4.8s;
}
#next2:checked ~ #photos {
	
	
	animation: imgPassToLeft2 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToLeft2 30s infinite;
	-webkit-animation-delay: -10.8s;
}
#next3:checked ~ #photos {
	animation: imgPassToLeft3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToLeft3 30s infinite;
	-webkit-animation-delay: -16.8s;
}
#next4:checked ~ #photos {
	animation: imgPassToLeft4 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToLeft4 30s infinite;
	-webkit-animation-delay: -22.8s;
}
#next5:checked ~ #photos {
	animation: imgPassToLeft5 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToLeft5 30s infinite;
	-webkit-animation-delay: -28.8s;
}
#back1:checked ~ #photos {
	animation: imgPassToRight1 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToRight1 30s infinite;
	-webkit-animation-delay: -28.8s;
}
#back2:checked ~ #photos {
	animation: imgPassToRight2 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToRight2 30s infinite;
	-webkit-animation-delay: -22.8s;
}
#back3:checked ~ #photos {
	animation: imgPassToRight3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToRight3 30s infinite;
	-webkit-animation-delay: -16.8s;
}
#back4:checked ~ #photos {
	animation: imgPassToRight4 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToRight4 30s infinite;
	-webkit-animation-delay: -10.8s;
}
#back5:checked ~ #photos {
	animation: imgPassToRight5 30s infinite;
	animation-delay: -4.8s;
	-webkit-animation: imgPassToRight5 30s infinite;
	-webkit-animation-delay: -4.8s;
}
/* animation設定 */
@keyframes imgPassToLeft0 {
	0%  { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft1 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft2 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft3 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft4 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft5 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToRight1 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight2 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight3 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight4 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight5 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@-webkit-keyframes imgPassToLeft0 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft1 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft2 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft3 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft4 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft5 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToRight1 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@-webkit-keyframes imgPassToRight2 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@-webkit-keyframes imgPassToRight3 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@-webkit-keyframes imgPassToRight4 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@-webkit-keyframes imgPassToRight5 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}

/* ポップアップ部分 */

.open {
	cursor:pointer; 
}
#popup {
	display: none;
}
.overlay {
	display: none;
}
#popup:checked + .overlay {
	display: block;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
.window {
	width: 90vw;
	max-width: 480px;
	height: 600px;
	background-color: #888888;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.text {
	font-size: 25px;
	margin: 0;
	color: #fcfff9;
}
.close {
	cursor:pointer;
	position: absolute;
	top: 0%;
	right: 0%;
	font-size: 20px;
}