
 .clearfix:after {   
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
/* clearfix for ie7 */
.clearfix{
    display: inline-block;
}
.clearfix {
    display: block;
}
h1        { color: #f99; font-size: 9px; margin-top: 1px; margin-bottom: 1px; padding-top: 1px }
h2   { color: #444; font-size: 10px; margin-top: 1px; margin-bottom: 1px; padding-top: 1px}
h3    { color: orange; font-size: 11px; font-style: italic; font-weight: normal; line-height: 11px; text-decoration: none; margin: 10px 0 0; left: 12px; width: 700px; float: left }
p{font-size:80%;}
#head{
	background:url(../../fc2%83T%83C%83g/web-content/img/bg_head.gif) repeat-x;
	height:50px;
	margin:0 0 1px 0;
	zoom:100%;
	}
#head:after{
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;		
	}
a {
text-decoration: none;
}
a:link { color: #ff8080; } 
   a:visited { color: #ff8080; } 
   a:hover { color: #ff0000; } 

.example             { background-color: #f0f0f0; top: 50px; width: 610px; height: 660px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px       }

.n43                                                                                                                                   { font-size: 16px; width: 744px; background-color: #f0f0f0; border: solid 2px #004a72; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px  }

.example2              { font-size: 16px; font-family: "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-style: italic; margin-top: -10px; padding-top: -10px }
.box-1              { background: #777; display: inline; margin: 10px; padding: 10px; width: 160px; height: 160px; float: left; border: dotted 1px #000; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px             }
.box-2                 { font-size: 12px; background: transparent; display: inline; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; padding: 1px 10px 19px; width: 260px; height: 362px; float: left; border: dotted 1px #000; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px                }
.box-3                        { font-size: 10px; background: transparent; display: inline; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; width: 88px; height: 362px; float: left; border: dotted 1px #000; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px                        }
.box-4                     { font-size: 10px; background: transparent; display: inline; margin-bottom: 15px; padding: 10px; width: 76px; height: 80px; float: left; border-width: 1px; border-color: #000; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px                     }
.box-5               { font-size: 10px; background: transparent; display: inline; margin: 10px; padding: 10px; width: 362px; height: 160px; float: left; border: dotted 1px #000; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px              }
.linktop          { background-image: url(http://newageyoyogi.syanari.com/yoyogi/top1.jpg); display: inline; margin: 10px; width: 180px; height: 180px; float: left; border: dotted 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px     }
.linktop2        { background-image: url(http://newageyoyogi.syanari.com/yoyogi/top2.jpg); display: inline; margin: 10px; width: 180px; height: 180px; float: left; border: dotted 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px      }
.linktop3         { background-image: url(http://newageyoyogi.syanari.com/yoyogi/top-link.jpg); display: inline; margin: 10px; width: 180px; height: 180px; float: left; border: dotted 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px       }
.linkbox0            { color: black; background-color: transparent; background-position: 130px 100px; display: inline; margin: 10px; padding: 10px; width: 160px; height: 160px; float: left; border: dotted 1px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px       }
.linkbox        { background-image: url(http://newageyoyogi.syanari.com/yoyogi/hb.jpg); background-position: 130px 100px; display: inline; margin: 10px; padding: 10px; width: 160px; height: 160px; float: left; border: dotted 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px   }
.linkbox2       { background-image: url(http://newageyoyogi.syanari.com/yoyogi/hn.jpg); background-position: 130px 100px; display: inline; margin: 10px; padding: 10px; width: 160px; height: 160px; float: left; border: dotted 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px     }
.linkbox3       { background-image: url(http://newageyoyogi.syanari.com/yoyogi/hp.jpg); background-position: 130px 100px; display: inline; margin: 10px; padding: 10px; width: 160px; height: 160px; float: left; border: dotted 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px     }
.linkbox4       { background-image: url(http://newageyoyogi.syanari.com/yoyogi/hp2.jpg); background-position: 130px 100px; display: inline; margin: 10px; padding: 10px; width: 160px; height: 160px; float: left; border: dotted 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px     }
.linkbox5       { background-image: url(http://newageyoyogi.syanari.com/yoyogi/ha.jpg); background-position: 130px 100px; display: inline; margin: 10px; padding: 10px; width: 160px; height: 160px; float: left; border: dotted 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px     }
.linkbox6       { background-image: url(http://newageyoyogi.syanari.com/yoyogi/hg.jpg); background-position: 130px 100px; display: inline; margin: 10px; padding: 10px; width: 160px; height: 160px; float: left; border: dotted 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px     }
.linkbox7       { background-image: url(http://newageyoyogi.syanari.com/yoyogi/ht.jpg); background-position: 130px 100px; display: inline; margin: 10px; padding: 10px; width: 160px; height: 160px; float: left; border: dotted 1px black; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px     }
.box_hover     {background: #fff; cursor: pointer }
.box_hover0   { background: #fff; cursor: pointer }
.none{
	text-indent:-9999px;
	height:0px;
	filter:alpha(opacity=90);
opacity:0.90;
-moz-opacity:0.90;
}
.none0   { background-color: black; text-indent: -9999px; height: 0 }
 li {
margin-left:0px;
list-style-type: none;
 float:left;
}

body
          { background: url(yoyogi/body.gif) center }
#container
{
      width: 800px;
	 padding: 20px;
	 border: 1px solid #e4e4e4;
	 margin:  10px;
	 background: #fff;
	 margin-top: 20px;
	 margin-bottom: 20px;
	 -webkit-border-radius: 10px;
	 -moz-border-radius: 10px;
}
#container1
{
      width: 2500px;
	 padding: 10px;
	 border: 1px solid #e4e4e4;
	 margin:  10px;
	 background: #fff;
	 margin-top: 1px;
	 margin-bottom: 1px;
	 -webkit-border-radius: 5px;
	 -moz-border-radius: 5px;
}
}
.text
{
     font-size:20px;
	 color:#666;
	 border-bottom:1px solid black;
}
.return
{
     color: #809dba;
}
div.tdftdiv{
	padding:3px;
/*	margin:11px 0 0 0;*/
	line-height:16px;
}
ul.tdftad{
	margin:0;
	padding:0;
}
ul.tdftad li{
	display:inline;
	background-image:url("al.gif");
	background-position:left center;
	background-repeat:no-repeat;
	padding:0 4px 0 8px;
	font-size:13px;
}
ul.tdftad li.tdftpr{
	background-image:url("pr.gif");
	padding-left:20px;
}
ul.tdftad li.tdftlink{
	background-image:url("link.gif");
	padding-left:25px;
}
ul.tdftad li a:hover{
	text-decoration:none;
}
.button1
{
     background: url(http://newageyoyogi.syanari.com/images/contact1.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button1 a
{
     background: url(http://newageyoyogi.syanari.com/images/contact1.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button2
{
     background: url(http://newageyoyogi.syanari.com/images/contact2.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button2 a
{
     background: url(http://newageyoyogi.syanari.com/images/contact2.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button3
{
     background: url(../../../images/contact3.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button3 a
{
     background: url(../../../images/contact3.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button4
{
     background: url(../../../images/contact4.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button4 a
{
     background: url(../../../images/contact4.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button5
{
     background: url(../../../images/contact5.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button5 a
{
     background: url(../../../images/contact5.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button6
{
     background: url(../../../images/contact6.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button6 a
{
     background: url(../../../images/contact6.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button7
{
     background: url(../../../images/contact7.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button7 a
{
     background: url(../../../images/contact7.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button8
{
     background: url(../../../images/contact8.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button8 a
{
     background: url(../../../images/contact8.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button9
{
     background: url(../../../images/contact9.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button9 a
{
     background: url(../../../images/contact9.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button10
{
     background: url(../../../images/contact10.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button10 a
{
     background: url(../../../images/contact10.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button11
{
     background: url(../../../images/contact11.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button11 a
{
     background: url(../../../images/contact11.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button12
{
     background: url(../../../images/contact12.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button12 a
{
     background: url(../../../images/contact12.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button13
{
     background: url(../../../images/contact13.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button13 a
{
     background: url(../../../images/contact13.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button14
{
     background: url(../../../images/contact14.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button14 a
{
     background: url(../../../images/contact14.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button15
{
     background: url(../../../images/contact15.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button15 a
{
     background: url(../../../images/contact15.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button16
{
     background: url(../../../images/contact16.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button16 a
{
     background: url(../../../images/contact16.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button17
{
     background: url(../../../images/contact17.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button17 a
{
     background: url(../../../images/contact17.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button18
{
     background: url(../../../images/contact18.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button18 a
{
     background: url(../../../images/contact18.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button19
{
     background: url(../../../images/contact19.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button19 a
{
     background: url(../../../images/contact19.png);
     height:143px;
	 width:100px;
	 display:block;
}

.button20
{
     background: url(../../../images/contact20.png);
     height:143px;
	 width:100px;
	 display:block;
	 background-position:0 -143px;
}
.button20 a
{
     background: url(../../../images/contact20.png);
     height:143px;
	 width:100px;
	 display:block;
}
.class { }
.example1 { font-family: "ＭＳ Ｐ明朝","ＭＳ 明朝",serif; }
table   { border-width: 1px; border-color: #2b2b2b }
td, th     { color: #555; font-size: 12px; background-color: white; border-width: 1px; border-color: #2b2b2b }
table th.t_top     { color: white; font-size: 16px;  background-color: #444; text-align: center; border-bottom: 1px solid #000; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px } 

/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
〜以下、画面の横幅が768pxまでの場合のスタイル記入〜
}
/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
〜以下、画面の横幅が768pxまでの場合のスタイル記入〜
}
/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
〜以下、画面の横幅が640pxまでの場合のスタイル記入〜
}

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

.header
{
	border-bottom: 3px solid #888 ;		/* 枠線 */
	text-align: center ;			/* テキスト、画像の真ん中寄せ */
	padding: 1em 0 ;			/* 上下の余白 */
	margin-bottom: 2em ;			/* 他のブロックとのスペース */
	background: #ffffff ;			/* 背景色(確認用) */
}

/* ロゴ画像を囲むh1 */
.logo-wrapper
{
	margin: 0 ;
	padding: 0 ;
	line-height: 1 ;
}

/* ロゴ画像 */
.logo
{
	width: 764px ;
	height: auto ;
}



/* フッター */
.footer
{
	border-top: 3px solid #888 ;		/* 枠線 */
	text-align: center ;			/* テキスト、画像の真ん中寄せ */
	margin-top: 2em ;			/* 他のブロックとのスペース */
	padding: 1em 0 ;			/* 上下の余白 */
	background: #ffffff ;
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{
	width: auto ;
	margin: 0 auto ;		/* 左右に[auto]を指定することで、真ん中に寄る */
	padding: 0 ;			/* 上下左右の余白を0にしておく */
	text-align: center ;			/* テキスト、画像の真ん中寄せ */
}

/* スマホだけに適用するCSS */
@media screen and (max-width:960px)
{
	.wrapper
	{
		width: auto ;
		padding: 0 10px ;
		text-align: center ;			/* テキスト、画像の真ん中寄せ */
	}
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
{
	width:  auto ;
	padding: 20px ;					/* 上下左右に20pxの余白 */
	border: 1px solid rgba(0,0,0,.1) ;		/* 枠線 */
}



/* スマホだけに適用するCSS */
@media screen and (max-width:960px)
{
	.main
	{
		width: auto ;
		padding: 0 ;		/* 余白 */
		border: none ;		/* 枠線 */
	}


}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
{
	float: left ;		/* 左に寄せる */
}



/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.main
	{
		float: none ;
	}
}

.wrapper
{
	overflow: hidden ;
}

.container    { display: flex; width: 100%; height: auto; align-items: center; box-sizing: border-box; justify-content: center   }

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* 電話 */

.reserve         { position: fixed; z-index: 2; top: 280px; left: 0; width: 40px }

.reserve img {
	border: none
}

a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);/*IE6,IE7*/
	-ms-filter:"alpha(opacity=70)";/*IE8*/
	zoom:1;
}
/* ネット予約 */

.reserve2          { position: fixed; z-index: 2; top: 330px; left: 0; width: 40px }

.reserve2 img {
	border: none
}

a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);/*IE6,IE7*/
	-ms-filter:"alpha(opacity=70)";/*IE8*/
	zoom:1;
}
/* LINE予約 */

.reserve3          { position: fixed; z-index: 2; top: 380px; left: 0; width: 40px }

.reserve3 img {
	border: none
}

a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);/*IE6,IE7*/
	-ms-filter:"alpha(opacity=70)";/*IE8*/
	zoom:1;
}


/*ヘッダーまわりはサイトに合わせて調整してください*/
header {
  padding:10px;
  background: skyblue;
}

footer  { background: #87ceeb; margin-top: 12px; padding: 10px }

#nav-drawer {
  position: relative;
}

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

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#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: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 220px;/*最大幅（調整してください）*/
  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);
}
/*チェックが入ったらもろもろ表示*/
ul#yoyo10 li{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    /*幅*/
    /*チェックが入ったらもろもろ表示*/
ul#yoyo11 li { list-style-type: disc; margin-top: 10px; margin-bottom: 10px; margin-left: 20px }
    /*幅*/
@media screen and (min-width:1500px) {
  #nav-open {
    display:none;
  }
}
/*ボタン*/

.btn-flat-simple {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #00BCD4;
  background: #ECECEC;
  transition: .4s;
}

.btn-flat-simple:hover {
  background: #00bcd4;
  color: white;
}


/* パソコンではタイル型で表示 */
.slide-wrap {
  background-color: #ccc;
  display: flex;
  margin: 0 auto;
  max-width: 1080px;
  width: 100%;
}
.slide-box {
  height: auto;
  margin-right: 1%;
  width: 24%;
}
.slide-box32 {
  height: auto;
  margin-right: 1%;
  width: 32%;
}
/* サムネイルとタイトルのスタイル調整 */
.slide-box a {
  background-color: #fff;
  color: #222;
  display: block;
  text-decoration: none;
}
.slide-box img {
  display: block;
  height: auto;
  width: 100%;
}
.slide-box p {
  font-weight: bold;
  padding: 10px;
}
@media screen and (max-width: 479px) {
/* スマホではスライダーで表示 */
  .slide-wrap {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
  .slide-box {
    flex: 0 0 90%;
  }
}
/* サムネイルとタイトルのスタイル調整 */
.slide-box32 a {
  background-color: #fff;
  color: #222;
  display: block;
  text-decoration: none;
}
.slide-box32 img {
  display: block;
  height: auto;
  width: 100%;
}
.slide-box32 p {
  font-weight: bold;
  padding: 10px;
}
@media screen and (max-width: 479px) {
/* スマホではスライダーで表示 */

  .slide-box32 {
    flex: 0 0 90%;
  }
}

.breadcrumbs {
width: auto;
padding: 7px 10px;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid #EEE;
white-space: nowrap;
}
.breadcrumbs ul {
display: table;
font-size: 13px;
}
.breadcrumbs ul li {
margin: 0 10px 0 0;
font-size: 13px;
float: left;
}
.breadcrumbs ul li:first-child::before {
padding: 0 3px 0 0;
content: "\f015";
font-family: FontAwesome;
font-size: 14px;
}
.breadcrumbs ul li::before {
padding: 0 10px 0 0;
content: "\f105";
font-family: FontAwesome;
font-size: 14px;
}
