/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
  .item {
	height: auto;
	padding-top: 4rem;
	padding-bottom: 4rem;
	text-align: center;
	color: #CCC;
	/*border: thin dashed #F69;*/
  }
  section.item > section {
	  /*height: 500px;*/
	  height: auto;
  }
  
  /*****************/
  /**  MainImage  **/
  /*****************/
  .MainImage {
	  position: relative;
  }
  
  /** MainImage 中央揃え **/
  .cycle-slideshow img {
	  margin-left: 50%;
	  -webkit-transform: translateX(-50%);
	  transform: translateX(-50%);
  }
  
  
  /*********************************************/
  /**  キャッチフレーズ 読み込みフェードイン  **/
  /*********************************************/
  .LoadFadeIn {
	  /* 全ブラウザ対応opacity */
	  filter:alpha(opacity=0); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=0)"; /* IE 8,9 */
	  -moz-opacity: 0; /* FF , Netscape */
	  -khtml-opacity: 0; /* Safari 1.x */
	  zoom:0; /*IE*/
	  opacity: 0;
	  transition: 2.5s;
	  /**  fadein  **/
	  width: 100%;
	  position: absolute;
	  top: 50%;
	  -webkit-transform: translateY(-60%);
	  -moz-transform: translateY(-60%);
	  transform: translateY(-60%);
	  text-align: center;
	  margin-right: auto;
	  margin-left: auto;
	  /*padding: 18% 0;*/
	  /*border: thin dashed #F00;*/
  }
  .LoadFadeIn.Show {
	  /*全ブラウザ対応opacity*/
	  filter:alpha(opacity=1); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
	  -moz-opacity: 1; /* FF , Netscape */
	  -khtml-opacity: 1; /* Safari 1.x */
	  zoom:1; /*IE*/
	  opacity: 1;
  }
  .LoadFadeIn p {
	  color: #FFF;
	  font-size: 2em;
	  text-align: center;
	  vertical-align: top;
	  /*background-color: #000;*/
	  display: inline-block;/*IEセンター揃え*/
	  margin-right: auto;
	  margin-left: auto;
	  height: 16em;
	  /*border: thin dashed #0CF;*/
	  /* 縦書き */
	  -webkit-writing-mode: vertical-rl;
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
  }
  .LoadFadeIn p span {
	   display: inline-block;
	   line-height: 1.2em;
	   font-size: 1.6rem;
	   padding: 20px;
	   background-color: rgba(0, 0, 0, 0.5);
   }
   
   /*==  SubCopy  ==*/
   .SubCopy {
		/*border: thin dashed #C00;*/
		/*height: 30vh;*/
		width: 60%;
		color: #FFF;
		text-align: left;
		vertical-align: bottom;
		display: table-cell;
		/*position: absolute;*/
		margin: ;
		padding: 0;
		/*padding-top: 40%;*/
		/*遅らせる*/
		transition-delay: .8s;
		
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		bottom: 0;
   }
   .SubCopy span {
	   /*border: thin dashed #F00;*/
	   font-size: 1rem;
	   line-height: 1.2em;
	   letter-spacing: 3px;
	   text-align: left;
	   vertical-align: bottom;
	   -webkit-text-shadow: 0 1px 2px black;
	   -moz-text-shadow: 0 1px 2px black;
	   text-shadow: 0 1px 2px black;
	   
	   display: inline-block;
	   margin-left: 3%;
	   position: absolute;
	   bottom: 20%;
	   /* animation */
	   -webkit-animation: example 0.5s ease 3s 1 forwards;
	   animation: example 0.5s ease 3s 1 forwards;
   }



  
   
   
  
  
  
  
  /**********************************/
  /**  下からスライドフェードイン  **/
  /**********************************/
  .LowSlideFadeIn {
	  /* animation */
	  opacity: 0;
	  transition: 0.7s;
	  margin-top: 60px;
  }
  .LowSlideFadeIn.ShowUp {
	  /* 全ブラウザ対応opacity */
	  filter:alpha(opacity=1); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
	  -moz-opacity: 1; /* FF , Netscape */
	  -khtml-opacity: 1; /* Safari 1.x */
	  zoom:1; /*IE*/
	  opacity: 1;
  }
  
  /* GoogleFont はんなり */
  .wf-hannari { font-family: "Hannari"; }
  
  /*.FadeContents {
	  height: 500px; 
  }*/
  
  
  
  /********************/
  /*==  お詫びTEXT  ==*/
  /*******************
  .OwabiText {
	  color: #333;
	  padding-bottom: 8%;
  }
  .OwabiText dl dt {
	  letter-spacing: 3px;
  }*/
  
  
  
  /****************/
  /**  Kodawari  **/
  /****************/
  .Kodawari {
	  padding-bottom: 9%;
	  
  }
  .Kodawari em {
	  color: #630;
	  font-size: 3em;
	  /*background-color: #CCC;*/
	  /* 縦書き */
	  -webkit-writing-mode: vertical-rl;
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
  }
  .Kodawari:not(:target){ /*IE9はopacityとfilter両方適応される*/
	  filter: none\9;
	  -ms-filter: none\9;
  }
  
  
  /********************/
  /**  横からtoggle  **/
  /********************/
  .KodawariContents {
	  /*border: thin dashed #C66;*/
	  border-bottom: thin solid #EFEFEF;
  }
  .KodawariContents > dl {
	  margin: 0;
	  padding: 0;
  }
  .KodawariContents > dl > dt {
	  margin: 0;
  }
  .KodawariContents > dl > dd {
	  margin: 0;
  }
  
  .KodawariType {
	  /*border: thin dashed #F06;*/
	  padding: 0;
	  /* clearfix */
	  display: table;
  }
  .KodawariType:after {
	  /* clearfix */
	  content: "."; 
	  display: block; 
	  height: 0; 
	  clear: both; 
	  visibility: hidden;
  }
  .KodawariType img {
	  /*width: 50%;*/
	  width: 100%;
	  margin: 0;
	  margin-top: 1.7%;
	  display: table-cell;
  }
  .KodawariType dl {
	  background-image: url(//zestien.net/img/pokect.png);
	  background-repeat: no-repeat;
	  background-position: right top;
	  width: 50%;
	  min-height: 300px;
	  display: table-cell;
	  /*float: right;*/
	  text-align: left;
	  vertical-align: middle;
	  padding: 10%;
	  padding-bottom: 7%;
	  /*border: thin dashed #FF3399;*/
  }
  .KodawariType dl dt {
	  font-weight: bold;
	  font-style: normal;
	  margin: 0;
	  margin-bottom: 3%;
	  font-size: 1.2em;
  }
  .KodawariType dl dd {
	  margin: 0;
	  line-height: 2em;	  
  }
  
  /*************/
  /**  2段目  **/
  /*************/
  .KodawariType:nth-child(2) > img {
	  width: 50%;
	  float: right;
	  display: table-cell;
	  margin: 0;
	  padding: 0;
  } 
  .KodawariType:nth-child(2) > dl {
	  /*background-color: #6FF;*/
	  float: left;
  }
  
  
  
  /*.KodawariType {
	  opacity: 0;
  }*/
  .KodawariType.ShowUp {
	  opacity: 0;
	  color: #6C635E;
	  -webkit-transform: translateX(-10%);
	  -ms-transform: translateX(-10%);
	  transform: translateX(-10%);
	  -webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
	  animation: delay1 1.2s ease 0.3s 1 forwards;
  }
  .KodawariType.ShowUp:nth-Child(2) {
	  -webkit-transform: translateX(10%);
	  -ms-transform: translateX(10%);
	  transform: translateX(10%);
	  -webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
	  animation: delay1 1.2s ease 0.3s 1 forwards;
  }
  .KodawariType.ShowUp:nth-Child(3) {
	  -webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
	  animation: delay1 1.2s ease 0.3s 1 forwards;
  }
  /*.KodawariType.ShowUp:nth-Child(4) {
	  -webkit-transform: translateX(20%);
	  -ms-transform: translateX(20%);
	  transform: translateX(20%);
	  -webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
	  animation: delay1 1.2s ease 0.3s 1 forwards;
	  color: #999;
  }
  .KodawariType.ShowUp:nth-Child(5) {
	  -webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
	  animation: delay1 1.2s ease 0.3s 1 forwards;
	  color: #666;
  }*/
  
  
  
  /** Logo **/
  /** toggleClassでフェードインとフェードアウトを繰り替えす **/
  .Logo {
	  text-align: center;
	  padding-top: 5%;
	  padding-bottom: 5%;
	  /* animation */
	  opacity: 0;
	  transition: 0.7s;
	  margin-top: 60px;
  }
  .Logo > img {
	  width: 10%;
  }
  .Logo:not(:target){ /*IE9はopacityとfilter両方適応される*/
	  filter: none\9;
	  -ms-filter: none\9;
  }
  .Logo.ShowUp {
	  margin-top: 0;
	  /* 全ブラウザ対応opacity */
	  filter:alpha(opacity=1); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
	  -moz-opacity: 1; /* FF , Netscape */
	  -khtml-opacity: 1; /* Safari 1.x */
	  zoom:1; /*IE*/
	  opacity: 1;
  }
  
  
  
  
  
  /*******************/
  /**  ZestienInfo  **/
  /*******************/
  .ZestienInfo {
	  background-color: #705B48;
	  margin-bottom: 10%;
	  /* clearfix */
	  display: inline-table;
	  background-image: url(//zestien.net/img/zestineinfo.jpg);
	  background-repeat: no-repeat;
	  background-position: left top;
	  /*text-align: right;*/
  }
  .ZestienInfo:after {
	  /* clearfix */
	  content: "."; 
	  display: block; 
	  height: 0; 
	  clear: both; 
	  visibility: hidden;
  }
  .ZestienInfo dl {
	  width: 50%;
	  text-align: left;
	  /**/float: right;
	  padding: 5%;
  }
  .ZestienInfo dl dt {
	  margin: 0;
	  margin-bottom: 3%;
  }
  .ZestienInfo dl dd {
	  line-height: 2em;
	  margin: 0;
  }
  .ZestienInfo img {
	  width: 50%;
	  margin: 0;
	  float: right;
  }
  /* animation */
  /*.ZestienInfo {
	  opacity: 0;
  }*/
  .ZestienInfo.ShowUp {
	  opacity: 0;
	  /*-webkit-transform: translateX(-20%);
	  -ms-transform: translateX(-20%);
	  transform: translateX(-20%);*/
	  -webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
	  animation: delay1 1.2s ease 0.3s 1 forwards;
  }
  
  
  
  
  
  /*********************/
  /**  ZESTIENの由来  **/
  /*********************/
  .Origin {
	  background-color: #EFEFEF;
	  text-align: center;
	  padding-top: 5%;
	  padding-bottom: 5%;
	  /* animation */
	  opacity: 0;
	  transition: 0.7s;
	  margin-top: 60px;
	  margin-bottom: 5rem;
  }
  .Origin:not(:target){ /*IE9はopacityとfilter両方適応される*/
	  filter: none\9;
	  -ms-filter: none\9;
  }
  .Origin.ShowUp {
	  margin-top: 0;
	  /* 全ブラウザ対応opacity */
	  filter:alpha(opacity=1); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
	  -moz-opacity: 1; /* FF , Netscape */
	  -khtml-opacity: 1; /* Safari 1.x */
	  zoom:1; /*IE*/
	  opacity: 1;
  }
  .Origin dl {
	  color: #8C8581;
	  /*border: thin dashed #F39;*/
	  width: 40em;
	  margin-right: auto;
	  margin-left: auto;
	  padding: 0;
  }
  .Origin dl dt {
	  font-size: 1.2em;
	  font-weight: bold;
	  margin-bottom: 3%;
  }
  .Origin dl dd {
	  text-align: left;
	  line-height: 2em;
	  margin-left: 0;
  }
  
  
  /*********************/
  /**  取り扱い店舗   **/
  /********************
  .Store {
	  width: 70%;
	  text-align: center;
	  margin-right: auto;
	  margin-left: auto;
	  padding-top: 10%;
	  padding-bottom: 10%;
	  display: table;
	  * animation *
	  opacity: 0;
	  transition: 0.7s;
	  margin-top: 60px;
  }
  .Store:not(:target){ *IE9はopacityとfilter両方適応される*
	  filter: none\9;
	  -ms-filter: none\9;
  }
  .Store.ShowUp {
	  margin-top: 0;
	  *全ブラウザ対応opacity*
	  filter:alpha(opacity=1); *IE 6,7*
	  -ms-filter: "alpha(opacity=1)"; *IE 8,9 *
	  -moz-opacity: 1; *FF , Netscape*
	  -khtml-opacity: 1; *Safari 1.x*
	  zoom:1; *IE*
	  opacity: 1;
  }
  
  .StorePhoto {
	  text-align: left;
	  width: 100%;
	  display: block;
  }
  .StorePhoto img {
	  width: 48%;
	  display: inline-block;
	  margin-right: 1%;
	  margin-bottom: 2%;
  }
  .StorePhoto img:nth-child(2), .StorePhoto img:nth-child(4) {
	  margin-right: 0;
  }
  
  .Store dl {
	  color: #8C8581;
	  width: 30%;
	  margin-right: auto;
	  margin-left: auto;
	  padding: 0;
	  text-align: left;
	  display: table-cell;
	  vertical-align: top;
  }
  .Store dl dt {
	  font-size: 1.2em;
	  font-weight: bold;
	  margin-bottom: 3%;
  }
  .Store dl dd {
	  line-height: 2em;
	  margin-left: 0;
  }*/
  
  /*********************/
  /**  icon Facebook  **/
  /********************
  .facebook-icon::before {
	color: #305097;
	font-family: fontawesome;
	content: "\f082";
	margin-right: .5em;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }*/
  
  
  
  /********************/
  /**  教室のご案内  **/
  /********************/
  .Lecture {
	  /*border: thin dashed #3CC;
	  background-color: #EFEFEF;*/
	  width: 100%;
	  text-align: center;
	  margin-right: auto;
	  margin-left: auto;
	  /* clearfix */
	  display: inline-table;
	  /* animation */
	  opacity: 0;
	  transition: 0.7s;
	  margin-top: 60px;
  }
  .Lecture:after {
	  /* clearfix */
	  content: "."; 
	  display: block; 
	  height: 0; 
	  clear: both; 
	  visibility: hidden;
  }
  .Lecture:not(:target){ /*IE9はopacityとfilter両方適応される*/
	  filter: none\9;
	  -ms-filter: none\9;
  }
  .Lecture.ShowUp {
	  margin-top: 0;
	  /* 全ブラウザ対応opacity */
	  filter:alpha(opacity=1); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
	  -moz-opacity: 1; /* FF , Netscape */
	  -khtml-opacity: 1; /* Safari 1.x */
	  zoom:1; /*IE*/
	  opacity: 1;
  }
  .LectureInfo {
	  float: right;
	  position: relative;
	  width: 100%;
  }
  .Lecture img {
	  width: 70%;
	  float: left;
  }
  .Lecture dl {
	  color: #8C8581;
	  background-color: #FFF;
	  border: thin solid #CCC;
	  width: 30em;
	  display: block;
	  margin-right: auto;
	  margin-left: auto;
	  padding: 3%;
	  position: absolute;
	  top: -5em;
	  right: 10%;
  }
  .Lecture dl dt {
	  font-size: 1.2em;
	  font-weight: bold;
	  margin-bottom: 3%;
  }
  .Lecture dl dd {
	  text-align: left;
	  line-height: 2em;
	  margin-left: 0;
  }
  
  /** CultuerStudioPhoto **/
  .CultureStudio {
	/*border: thin dashed #F39;*/
	clear: both;
	width: 50%;
	float: right;
	position: relative;
	top: -9em;
	left: -15em;
  }
  .CultureStudio img {
	  border: 4px solid #FFF;
	  width: 32%;
	  margin-right: 2%;
  }
   .CultureStudio img:nth-child(3) {
	  margin-right: 0;
  }
  
  
  
  /****************/
  /**  BoxSlide  **/
  /****************/
  .SlideAnimetion {
	  border: thin dashed #999;
	  /* clearfix */
	  display: inline-table;
	  min-height: 1%;
	  overflow: hidden;
  }
  .SlideAnimetion:after {
	  /* clearfix */
	  content: ".";
	  display: block;
	  height: 0;
	  clear: both;
	  visibility: hidden;
  }
  .SlideAnimetion div {
	  width:80%;
	  margin-right: auto;
	  margin-left: auto;
  }
  .SlideAnimetion ul li {
	  opacity: 0;
  }
  .SlideAnimetion ul li figure {
	  margin: 0;
	  padding: 0;
  }
  .SlideAnimetion ul li figure figcaption {
	  /*background-color: #EFEFEF;*/
	  color: #CCC;
	  text-align: right;
	  margin: 0;
	  padding: 0;
  }
  .SlideAnimetion ul li figure img {
	  margin: 0;
	  margin-bottom: 8%;
  }
  .SlideAnimetion ul li figure figcaption {
	  text-align: right;
	  margin: 0;
	  padding: 0;
  }
  .SlideAnimetion ul li figure figcaption dl {
	  /*background-color: #33FFCC;*/
	  text-align: left;
	  line-height: 1.2em;
	  height: 17em;
	  margin: 1% 0;
	  padding: 0;
	  /* 縦書き */
	  -webkit-writing-mode: vertical-rl;
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
	  position:relative;
	  top:100%;
	  left:-30%;
	  display:inline;
	  transform:translate(-5%, 0);
	  /* marginで%を指定すると包含ブロックを基準に考えるがtranslateは自分自身を基準に考えてくれるので-50%でも問題ない */
  }
  .SlideAnimetion ul li figure figcaption dl dt {
	  font-weight: bold;
	  font-size: 1.3em;
	  letter-spacing: 10px;
	  margin: 0;
  }
  .SlideAnimetion ul li figure figcaption dl dd {
	  margin: 0;
	  margin-right: 5%;
  }
  
  .Box {
	float: left;
	margin-right: 10px;
	padding: 10px;
	width: 23%;
	height: auto;
	/*background-color: #499AAF;
	color: #fff;*/
	border: thin solid #CCC;
	list-style: none;
	text-align: center;
	line-height: 60px;
	opacity: 0;
	transition: 0.7s;
	-webkit-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
  }
  .Box img {
	  margin: 0;
  }
  .Box fuiger {
	  margin: 0;
  }
  .Box fuiger figcaption {
	  font-size: 1em;
	  line-height: 1em;
	  margin: 0;
	   /* 縦書き 
	  -webkit-writing-mode: vertical-rl;
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;*/
  }
  
  .Box:nth-child(1) {
	-webkit-animation: example 0.5s ease 0.5s 1 forwards;
	animation: example 0.5s ease 0.5s 1 forwards;
  }
  
  .Box:nth-child(2) {
	-webkit-animation: example 0.5s ease 1s 1 forwards;
	animation: example 0.5s ease 1s 1 forwards;
  }
  
  .Box:nth-child(3) {
	-webkit-animation: example 0.5s ease 1.5s 1 forwards;
	animation: example 0.5s ease 1.5s 1 forwards;
  }
  
  .Box:nth-child(4) {
	-webkit-animation: example 0.5s ease 2s 1 forwards;
	animation: example 0.5s ease 2s 1 forwards;
  }
  
  .Box:nth-child(5) {
	-webkit-animation: example 0.5s ease 2.5s 1 forwards;
	animation: example 0.5s ease 2.5s 1 forwards;
  }
  
  .Box:nth-child(6) {
	-webkit-animation: example 0.5s ease 3s 1 forwards;
	animation: example 0.5s ease 3s 1 forwards;
  }
  
  
  /********************/
  /** Icon Emargence **/
  /********************/
  .cover {
	  position: relative;
	  width: 100%;
	  margin: 0;
	  padding: 0;
	  color: #CCC;
	  
	  opacity: 0;
	  transition: 0.7s;
	  margin-left: 60px;
  }
  .cover.ShowUp {
	  margin-left: 0;
	  /* 全ブラウザ対応opacity */
	  filter:alpha(opacity=1); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
	  -moz-opacity: 1; /* FF , Netscape */
	  -khtml-opacity: 1; /* Safari 1.x */
	  zoom:1; /*IE*/
	  opacity: 1;
  }
  .centerBox {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: auto;
	  width: 80%;
	  height: 200px;
	  line-height: 160%;
	  text-align: center;
	  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  }
  .centerBox i {
	  height: 120px;
	  padding: 20px;
	  font-size: 100px;
	  /* Transition */
	  /* アイコンの表示速度 */
	  transition: .8s;
	  /* ディレイ */
	  transition-delay: 0;
  }
  .centerBox div {
	  margin: auto;
	  /* Transition */
	  transition: .8s;
	  transition-delay: .8s;
  }
}

/****************************************************/
/**  メディアクエリの外に出さないとIEで動作しない  **/
/****************************************************/
 /* animation Diray設定 */
@-webkit-keyframes example {
  100% {
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
  }
}
@keyframes example {
  100% {
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
  }
}

@-webkit-keyframes delay1 {
	100% {
	  opacity: 1;
	  margin-left: 0;
	  -webkit-transform: translateX(0);
	  -ms-transform: translateX(0);
	  transform: translateX(0);
	}
  }
  @keyframes delay1 {
	100% {
	  opacity: 1;
	  margin-left: 0;
	  -webkit-transform: translateX(0);
	  -ms-transform: translateX(0);
	  transform: translateX(0);
	}
  }
  
  @-webkit-keyframes example {
	100% {
	  opacity: 1;
	  -webkit-transform: translateY(0);
	  -ms-transform: translateY(0);
	  transform: translateY(0);
	}
  }
  @keyframes example {
	100% {
	  opacity: 1;
	  -webkit-transform: translateY(0);
	  -ms-transform: translateY(0);
	  transform: translateY(0);
	}
  }




/*===============================================
	●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px) {
  .item {
	height: auto;
	padding-top: 4rem;
	padding-bottom: 4rem;
	text-align: center;
	color: #CCC;
  }
  section.item > section {
	  /*height: 500px;*/
	  height: auto;
  }
  
  /*****************/
  /**  MainImage  **/
  /*****************/
  .MainImage {
	  width: auto;
	  height: 90vh;
	  position: relative;
  }
  
  /*********************************************/
  /**  キャッチフレーズ 読み込みフェードイン  **/
  /*********************************************/
  .LoadFadeIn {
	  /* 全ブラウザ対応opacity */
	  filter:alpha(opacity=0); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=0)"; /* IE 8,9 */
	  -moz-opacity: 0; /* FF , Netscape */
	  -khtml-opacity: 0; /* Safari 1.x */
	  zoom:0; /*IE*/
	  opacity: 0;
	  transition: 2.5s;
	  /* fadein */
	  width: 100%;
	  position: absolute;
	  top: 50%;
	  -webkit-transform: translateY(-70%);
	  -moz-transform: translateY(-70%);
	  transform: translateY(-70%);
	  text-align: center;
	  margin-right: auto;
	  margin-left: auto;
	  /*padding: 10% 0;*/
  }
  .LoadFadeIn.Show {
	  /*全ブラウザ対応opacity*/
	  filter:alpha(opacity=1); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
	  -moz-opacity: 1; /* FF , Netscape */
	  -khtml-opacity: 1; /* Safari 1.x */
	  zoom:1; /*IE*/
	  opacity: 1;
  }
  .LoadFadeIn p {
	  color: #FFF;
	  font-size: 1em;
	  text-align: center;
	  vertical-align: top;
	  background-color: #000;
	  display: inline-block; /*IEセンター揃え*/
	  margin-right: auto;
	  margin-left: auto;
	  height: 22em;
	  /* 縦書き */
	  -webkit-writing-mode: vertical-rl;
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
  }
  .LoadFadeIn p span {
	   display: inline-block;
	   line-height: 1.2em;
	   font-size: 1rem;
	   padding: 20px;
	   background-color: rgba(0, 0, 0, 0.5);
   }
   .SubCopy {
		/*border: thin dashed #C00;*/
		color: #FFF;
		text-align: left;
		vertical-align: bottom;
		display: table-cell;
		/*position: absolute;*/
		padding: 0;
		padding-top: 50%;
   }
   .SubCopy span {
	   font-size: 2rem;
	   display: inline-block;
	   vertical-align: bottom;
	   line-height: 1.2em;
	   font-size: 1rem;
	   margin-left: 3%;
	   padding-top: 50px;
	   /*border-top: 2px solid #fff;
	   border-bottom: 2px solid #fff;
	   background-color: rgba(0, 0, 0, 0.5);*/
   }
   
   
   
   /********************/
   /*==  お詫びTEXT  ==*/
   /********************/
   .OwabiText {
	  color: #333;
	  padding-bottom: 8%;
	  /*border: thin dashed #F00;*/
   }
   .OwabiText dl {
	   /*background-color: #CCC;*/
	   margin: 0;
	   padding: 0;
   }
   .OwabiText dl dt {
	  letter-spacing: 3px;
   }
   .OwabiText dl dd {
	   text-align: left;
	   margin: 3%;
   }
  
  
  /**********************************/
  /**  下からスライドフェードイン  **/
  /**********************************/
  .LowSlideFadeIn {
	  /* animation */
	  opacity: 0;
	  transition: 0.7s;
	  margin-top: 60px;
  }
  .LowSlideFadeIn.ShowUp {
	  /* 全ブラウザ対応opacity */
	  filter:alpha(opacity=1); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
	  -moz-opacity: 1; /* FF , Netscape */
	  -khtml-opacity: 1; /* Safari 1.x */
	  zoom:1; /*IE*/
	  opacity: 1;
  }
  
  /* GoogleFont はんなり */
  .wf-hannari { font-family: "Hannari"; }
  
  /*.FadeContents {
	  height: 500px; 
  }*/
  
  
  
  /****************/
  /**  Kodawari  **/
  /****************/
  .Kodawari {
	  padding-bottom: 9%;
	  
  }
  .Kodawari em {
	  color: #630;
	  font-size: 2em;
	  /*background-color: #CCC;*/
	  /* 縦書き */
	  -webkit-writing-mode: vertical-rl;
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
  }
  .Kodawari:not(:target){ /*IE9はopacityとfilter両方適応される*/
	  filter: none\9;
	  -ms-filter: none\9;
  }
  
  
  /********************/
  /**  横からtoggle  **/
  /********************/
  .KodawariContents {
	  /*border: thin dashed #C66;*/
	  padding-bottom: 5%;
	  border-bottom: thin solid #EFEFEF;
  }
  .KodawariContents > dl {
	  margin: 0;
	  padding: 0;
  }
  .KodawariContents > dl > dt {
	  margin: 0;
  }
  .KodawariContents > dl > dd {
	  margin: 0;
  }
  
  .KodawariType {
	  background-image: url(//zestien.net/img/pokect_right.jpg);
	  background-repeat: no-repeat;
	  background-position: right top;
	  /*border-top: thin solid #F1EEE9;*/
	  padding: 0;
	  /* clearfix */
	  display: table;
  }
  .KodawariType:after {
	  /* clearfix */
	  content: "."; 
	  display: block; 
	  height: 0; 
	  clear: both; 
	  visibility: hidden;
  }
  .KodawariType img {
	  /*width: 50%;*/
	  width: 100%;
	  margin: 0;
	  margin-top: 15%;
	  display: table-cell;
	  /* Box-shadow */
	  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
	  -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
	  -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
	  -ms-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  }
  .KodawariType dl {
	  width: 50%;
	  min-height: 300px;
	  display: table-cell;
	  /*float: right;*/
	  text-align: left;
	  vertical-align: middle;
	  padding: 10%;
	  padding-bottom: 7%;
	  /*border: thin dashed #FF3399;*/
  }
  .KodawariType dl dt {
	  font-weight: bold;
	  font-style: normal;
	  margin: 0;
	  margin-bottom: 3%;
	  font-size: 1.2em;
  }
  .KodawariType dl dd {
	  margin: 0;
	  line-height: 2em;	  
  }
  
  /*************/
  /**  2段目  **/
  /*************/
  .KodawariType:nth-child(2) {
	  background-image: url(//zestien.net/img/pokect_left.jpg);
	  background-repeat: no-repeat;
	  background-position: left top;
  }
  .KodawariType:nth-child(2) > img {
	  width: 50%;
	  float: right;
	  display: table-cell;
	  margin: 0;
	  margin-top: 5%;
	  padding: 0;
	  /* Box-shadow */
	  box-shadow: 3px 5px 10px rgba(0,0,0,0.3);
	  -webkit-box-shadow: 3px 5px 10px rgba(0,0,0,0.3);
	  -moz-box-shadow: 3px 5px 10px rgba(0,0,0,0.3);
	  -ms-box-shadow: 3px 5px 10px rgba(0,0,0,0.3);
  } 
  .KodawariType:nth-child(2) > dl {
	  /*background-color: #6FF;*/
	  float: left;
  }
  
  
  
  .KodawariType {
	  opacity: 0;
  }
  .KodawariType.ShowUp {
	  opacity: 0;
	  color: #6C635E;
	  -webkit-transform: translateX(-10%);
	  -ms-transform: translateX(-10%);
	  transform: translateX(-10%);
	  -webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
	  animation: delay1 1.2s ease 0.3s 1 forwards;
  }
  .KodawariType.ShowUp:nth-Child(2) {
	  -webkit-transform: translateX(10%);
	  -ms-transform: translateX(10%);
	  transform: translateX(10%);
	  -webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
	  animation: delay1 1.2s ease 0.3s 1 forwards;
  }
  .KodawariType.ShowUp:nth-Child(3) {
	  -webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
	  animation: delay1 1.2s ease 0.3s 1 forwards;
  }
  
  
  /************/
  /**  Logo  **/
  /************/
  .LogoContents {
	  padding: 13%;
  }
  /** toggleClassでフェードインとフェードアウトを繰り替えす **/
  .Logo {
	  text-align: center;
	  padding-top: 5%;
	  padding-bottom: 5%;
	  /* animation */
	  opacity: 0;
	  transition: 0.7s;
	  margin-top: 60px;
  }
  .Logo > img {
	  width: 10%;
  }
  .Logo:not(:target){ /*IE9はopacityとfilter両方適応される*/
	  filter: none\9;
	  -ms-filter: none\9;
  }
  .Logo.ShowUp {
	  margin-top: 0;
	  /* 全ブラウザ対応opacity */
	  filter:alpha(opacity=1); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
	  -moz-opacity: 1; /* FF , Netscape */
	  -khtml-opacity: 1; /* Safari 1.x */
	  zoom:1; /*IE*/
	  opacity: 1;
  }
  
  
  
  
  
  /*******************/
  /**  ZestienInfo  **/
  /*******************/
  .ZestienInfo {
	  background-color: #705B48;
	  margin-bottom: 10%;
	  /* clearfix */
	  display: inline-table;
	  background-image: url(//zestien.net/img/zestineinfo.jpg);
	  background-repeat: no-repeat;
	  background-position: left top;
	  /*text-align: right;*/
  }
  .ZestienInfo:after {
	  /* clearfix */
	  content: "."; 
	  display: block; 
	  height: 0; 
	  clear: both; 
	  visibility: hidden;
  }
  .ZestienInfo dl {
	  width: 50%;
	  text-align: left;
	  /**/float: right;
	  padding: 5%;
  }
  .ZestienInfo dl dt {
	  margin: 0;
	  margin-bottom: 3%;
  }
  .ZestienInfo dl dd {
	  line-height: 2em;
	  margin: 0;
  }
  .ZestienInfo img {
	  width: 50%;
	  margin: 0;
	  float: right;
  }
  /* animation */
  .ZestienInfo {
	  opacity: 0;
  }
  .ZestienInfo.ShowUp {
	  opacity: 0;
	  /*-webkit-transform: translateX(-20%);
	  -ms-transform: translateX(-20%);
	  transform: translateX(-20%);*/
	  -webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
	  animation: delay1 1.2s ease 0.3s 1 forwards;
  }
  
  
  
  
  
  /*********************/
  /**  ZESTIENの由来  **/
  /*********************/
  .Origin {
	  background-color: #EFEFEF;
	  text-align: center;
	  padding-top: 5%;
	  padding-bottom: 5%;
	  /* animation */
	  opacity: 0;
	  transition: 0.7s;
	  margin-top: 60px;
	  margin-bottom: 15rem;
  }
  .Origin:not(:target){ /*IE9はopacityとfilter両方適応される*/
	  filter: none\9;
	  -ms-filter: none\9;
  }
  .Origin.ShowUp {
	  margin-top: 0;
	  /* 全ブラウザ対応opacity */
	  filter:alpha(opacity=1); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
	  -moz-opacity: 1; /* FF , Netscape */
	  -khtml-opacity: 1; /* Safari 1.x */
	  zoom:1; /*IE*/
	  opacity: 1;
  }
  .Origin dl {
	  color: #8C8581;
	  /*border: thin dashed #F39;*/
	  width: 40em;
	  margin-right: auto;
	  margin-left: auto;
	  padding: 0;
  }
  .Origin dl dt {
	  font-size: 1.2em;
	  font-weight: bold;
	  margin-bottom: 3%;
  }
  .Origin dl dd {
	  text-align: left;
	  line-height: 2em;
	  margin-left: 0;
  }
  
  
  /*********************/
  /**  取り扱い店舗   **/
  /********************
  .Store {
	  width: 90%;
	  text-align: center;
	  margin-right: auto;
	  margin-left: auto;
	  padding-top: 15%;
	  padding-bottom: 15%;
	  display: table;
	  * animation *
	  opacity: 0;
	  transition: 0.7s;
	  margin-top: 60px;
  }
  .Store:not(:target){ *IE9はopacityとfilter両方適応される*
	  filter: none\9;
	  -ms-filter: none\9;
  }
  .Store.ShowUp {
	  margin-top: 0;
	  *全ブラウザ対応opacity*
	  filter:alpha(opacity=1); *IE 6,7*
	  -ms-filter: "alpha(opacity=1)"; *IE 8,9*
	  -moz-opacity: 1; *FF , Netscape*
	  -khtml-opacity: 1; *Safari 1.x*
	  zoom:1; *IE*
	  opacity: 1;
  }
  
  .StorePhoto {
	  text-align: left;
	  width: 50%;
	  display: table-cell;
  }
  .StorePhoto img {
	  width: 45%;
	  display: inline-table;
	  margin-right: 1%;
	  margin-bottom: 2%;
  }
  
  .Store dl {
	  color: #8C8581;
	  width: 50%;
	  margin-right: auto;
	  margin-left: auto;
	  padding: 0;
	  text-align: left;
	  display: table-cell;
	  vertical-align: top;
  }
  .Store dl dt {
	  font-size: 1.2em;
	  font-weight: bold;
	  margin-bottom: 3%;
  }
  .Store dl dd {
	  line-height: 2em;
	  margin-left: 0;
  }*/
  
  /*********************/
  /**  icon Facebook  **/
  /********************
  .facebook-icon::before {
	color: #305097;
	font-family: fontawesome;
	content: "\f082";
	margin-right: .5em;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }*/
  
  
  
  /********************/
  /**  教室のご案内  **/
  /********************/
  .Lecture {
	  /*border: thin dashed #3CC;
	  background-color: #EFEFEF;*/
	  width: 100%;
	  text-align: center;
	  margin-right: auto;
	  margin-left: auto;
	  /* clearfix */
	  display: inline-table;
	  /* animation */
	  opacity: 0;
	  transition: 0.7s;
	  margin-top: 60px;
  }
  .Lecture:after {
	  /* clearfix */
	  content: "."; 
	  display: block; 
	  height: 0; 
	  clear: both; 
	  visibility: hidden;
  }
  .Lecture:not(:target){ /*IE9はopacityとfilter両方適応される*/
	  filter: none\9;
	  -ms-filter: none\9;
  }
  .Lecture.ShowUp {
	  margin-top: 0;
	  /* 全ブラウザ対応opacity */
	  filter:alpha(opacity=1); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
	  -moz-opacity: 1; /* FF , Netscape */
	  -khtml-opacity: 1; /* Safari 1.x */
	  zoom:1; /*IE*/
	  opacity: 1;
  }
  .LectureInfo {
	  float: right;
	  position: relative;
	  width: 100%;
  }
  .Lecture img {
	  width: 70%;
	  float: left;
  }
  .Lecture dl {
	  color: #8C8581;
	  background-color: #FFF;
	  border: thin solid #CCC;
	  width: 30em;
	  display: block;
	  margin-right: auto;
	  margin-left: auto;
	  padding: 3%;
	  position: absolute;
	  top: -5em;
	  right: 10%;
  }
  .Lecture dl dt {
	  font-size: 1.2em;
	  font-weight: bold;
	  margin-bottom: 3%;
  }
  .Lecture dl dd {
	  text-align: left;
	  line-height: 2em;
	  margin-left: 0;
  }
  
  
  
  
  
  /****************/
  /**  BoxSlide  **/
  /****************/
  .SlideAnimetion {
	  border: thin dashed #999;
	  /* clearfix */
	  display: inline-table;
	  min-height: 1%;
	  overflow: hidden;
  }
  .SlideAnimetion:after {
	  /* clearfix */
	  content: ".";
	  display: block;
	  height: 0;
	  clear: both;
	  visibility: hidden;
  }
  .SlideAnimetion div {
	  width:80%;
	  margin-right: auto;
	  margin-left: auto;
  }
  .SlideAnimetion ul li {
	  opacity: 0;
  }
  .SlideAnimetion ul li figure {
	  margin: 0;
	  padding: 0;
  }
  .SlideAnimetion ul li figure figcaption {
	  /*background-color: #EFEFEF;*/
	  color: #CCC;
	  text-align: right;
	  margin: 0;
	  padding: 0;
  }
  .SlideAnimetion ul li figure img {
	  margin: 0;
	  margin-bottom: 8%;
  }
  .SlideAnimetion ul li figure figcaption {
	  text-align: right;
	  margin: 0;
	  padding: 0;
  }
  .SlideAnimetion ul li figure figcaption dl {
	  /*background-color: #33FFCC;*/
	  text-align: left;
	  line-height: 1.2em;
	  height: 17em;
	  margin: 1% 0;
	  padding: 0;
	  /* 縦書き */
	  -webkit-writing-mode: vertical-rl;
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
	  position:relative;
	  top:100%;
	  left:-30%;
	  display:inline;
	  transform:translate(-5%, 0);
	  /* marginで%を指定すると包含ブロックを基準に考えるがtranslateは自分自身を基準に考えてくれるので-50%でも問題ない */
  }
  .SlideAnimetion ul li figure figcaption dl dt {
	  font-weight: bold;
	  font-size: 1.3em;
	  letter-spacing: 10px;
	  margin: 0;
  }
  .SlideAnimetion ul li figure figcaption dl dd {
	  margin: 0;
	  margin-right: 5%;
  }
  
  .Box {
	float: left;
	margin-right: 10px;
	padding: 10px;
	width: 23%;
	height: auto;
	/*background-color: #499AAF;
	color: #fff;*/
	border: thin solid #CCC;
	list-style: none;
	text-align: center;
	line-height: 60px;
	opacity: 0;
	transition: 0.7s;
	-webkit-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
  }
  .Box img {
	  margin: 0;
  }
  .Box fuiger {
	  margin: 0;
  }
  .Box fuiger figcaption {
	  font-size: 1em;
	  line-height: 1em;
	  margin: 0;
	   /* 縦書き 
	  -webkit-writing-mode: vertical-rl;
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;*/
  }
  
  .Box:nth-child(1) {
	-webkit-animation: example 0.5s ease 0.5s 1 forwards;
	animation: example 0.5s ease 0.5s 1 forwards;
  }
  
  .Box:nth-child(2) {
	-webkit-animation: example 0.5s ease 1s 1 forwards;
	animation: example 0.5s ease 1s 1 forwards;
  }
  
  .Box:nth-child(3) {
	-webkit-animation: example 0.5s ease 1.5s 1 forwards;
	animation: example 0.5s ease 1.5s 1 forwards;
  }
  
  .Box:nth-child(4) {
	-webkit-animation: example 0.5s ease 2s 1 forwards;
	animation: example 0.5s ease 2s 1 forwards;
  }
  
  .Box:nth-child(5) {
	-webkit-animation: example 0.5s ease 2.5s 1 forwards;
	animation: example 0.5s ease 2.5s 1 forwards;
  }
  
  .Box:nth-child(6) {
	-webkit-animation: example 0.5s ease 3s 1 forwards;
	animation: example 0.5s ease 3s 1 forwards;
  }
  
 
  
  
  
  
  /********************/
  /** Icon Emargence **/
  /********************/
  .cover {
	  position: relative;
	  width: 100%;
	  margin: 0;
	  padding: 0;
	  color: #CCC;
	  
	  opacity: 0;
	  transition: 0.7s;
	  margin-left: 60px;
  }
  .cover.ShowUp {
	  margin-left: 0;
	  /* 全ブラウザ対応opacity */
	  filter:alpha(opacity=1); /* IE 6,7*/
	  -ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
	  -moz-opacity: 1; /* FF , Netscape */
	  -khtml-opacity: 1; /* Safari 1.x */
	  zoom:1; /*IE*/
	  opacity: 1;
  }
  .centerBox {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: auto;
	  width: 80%;
	  height: 200px;
	  line-height: 160%;
	  text-align: center;
	  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  }
  .centerBox i {
	  height: 120px;
	  padding: 20px;
	  font-size: 100px;
	  /* Transition */
	  /* アイコンの表示速度 */
	  transition: .8s;
	  /* ディレイ */
	  transition-delay: 0;
  }
  .centerBox div {
	  margin: auto;
	  /* Transition */
	  transition: .8s;
	  transition-delay: .8s;
  }
}

/****************************************************/
/**  メディアクエリの外に出さないとIEで動作しない  **/
/****************************************************/
 /* animation Diray設定 */
 @-webkit-keyframes example {
	100% {
	  opacity: 1;
	  -webkit-transform: translateY(0);
	  -ms-transform: translateY(0);
	  transform: translateY(0);
	}
  }
  @keyframes example {
	100% {
	  opacity: 1;
	  -webkit-transform: translateY(0);
	  -ms-transform: translateY(0);
	  transform: translateY(0);
	}
  }
  @-webkit-keyframes delay1 {
	100% {
	  opacity: 1;
	  margin-left: 0;
	  -webkit-transform: translateX(0);
	  -ms-transform: translateX(0);
	  transform: translateX(0);
	}
  }
  @keyframes delay1 {
	100% {
	  opacity: 1;
	  margin-left: 0;
	  -webkit-transform: translateX(0);
	  -ms-transform: translateX(0);
	  transform: translateX(0);
	}
  }



/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width: 640px) {
	
	.MainImage {
		/*border: 2px dashed #F03;*/
		height: 90vh;
	}
	
	/*********************************************/
	/**  キャッチフレーズ 読み込みフェードイン  **/
	/*********************************************/
	.LoadFadeIn {
		/* 全ブラウザ対応opacity */
		filter:alpha(opacity=0); /* IE 6,7*/
		-ms-filter: "alpha(opacity=0)"; /* IE 8,9 */
		-moz-opacity: 0; /* FF , Netscape */
		-khtml-opacity: 0; /* Safari 1.x */
		zoom:0; /*IE*/
		opacity: 0;
		transition: 2.5s;
		/* fadein */
		width: 100%;
		position: absolute;
		text-align: center;
		margin-right: auto;
		margin-left: auto;
		padding: 3% 0;
	}
	.LoadFadeIn.Show {
		/*全ブラウザ対応opacity*/
		filter:alpha(opacity=1); /* IE 6,7*/
		-ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
		-moz-opacity: 1; /* FF , Netscape */
		-khtml-opacity: 1; /* Safari 1.x */
		zoom:1; /*IE*/
		opacity: 1;
	}
	.LoadFadeIn p {
		color: #FFF;
		font-size: 1em;
		text-align: center;
		vertical-align: top;
		background-color: #000;
		display: inline-block; /*IEセンター揃え*/
		margin-right: auto;
		margin-left: auto;
		height: 18em;
		/* 縦書き */
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	.LoadFadeIn p span {
		 display: inline-block;
		 line-height: 1.2em;
		 font-size: 0.8rem;
		 padding: 10px;
		 background-color: rgba(0, 0, 0, 0.5);
	 }
	 
	 /**  div.Sub CahiCopy  **/
	 .SubCopy {
		  /*border: thin solid #EDECE7;*/
		  /**/height: 65vh;
		  color: #FFF;
		  text-align: left;
		  vertical-align: bottom; 
		  display: inline-block;
		  padding: 0;
		  /*padding-top: 0;
		  padding-bottom: 2%;*/
		  position: absolute;
		  left: 0;
		  bottom: -5em;
		  /*bottom: -5em;*/
	 }
	 .SubCopy span {
		 font-size: 1rem;
		 display: inline-block;
		 vertical-align: bottom;
		 /*border: thin dashed #33C;*/
		 position: absolute;
		 bottom: -5em;
		 /*line-height: 1.2em;
		 font-size: 0.8rem;
		 margin-left: 3%;
		 padding-top: 50px;
		 border-top: 2px solid #fff;
		 border-bottom: 2px solid #fff;
		 background-color: rgba(0, 0, 0, 0.5);*/
	 }
	 
	 
	/****************/
	/**  Kodawari  **/
	/****************/
	.Kodawari {
		padding-bottom: 9%;
	}
	.Kodawari em {
		color: #630;
		font-size: 2em;
		/*background-color: #CCC;*/
		/* 縦書き */
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	.Kodawari:not(:target){ /*IE9はopacityとfilter両方適応される*/
		filter: none\9;
		-ms-filter: none\9;
	}
	
	
	/********************/
	/**  横からtoggle  **/
	/********************/
	.KodawariContents {
		/*border: thin dashed #C66;*/
		padding-bottom: 5%;
		border-bottom: thin solid #EFEFEF;
	}
	.KodawariContents > dl {
		margin: 0;
		padding: 0;
	}
	.KodawariContents > dl > dt {
		margin: 0;
	}
	.KodawariContents > dl > dd {
		margin: 0;
	}
	
	.KodawariType {
	  background-image: url(//zestien.net/img/pokect_right.jpg);
	  background-repeat: no-repeat;
	  background-position: -450px top;
	  /*border-top: thin solid #F1EEE9;*/
	  padding: 0;
	  padding-top: 15%;
	  /* clearfix */
	  display: block;
	}
	.KodawariType:after {
		/* clearfix */
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	.KodawariType img {
		/*width: 50%;*/
		width: 90%;
		margin: 0;
		margin-top: 0;
		
		/* Box-shadow 
		box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
		-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
		-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
		-ms-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);*/
	}
	.KodawariType dl {
		width: 50%;
		min-height: 300px;
		/*display: table-cell;*/
		/*float: right;*/
		text-align: left;
		vertical-align: middle;
		padding: 10%;
		padding-bottom: 7%;
		/*border: thin dashed #FF3399;*/
	}
	.KodawariType dl dt {
		font-weight: bold;
		font-style: normal;
		margin: 0;
		margin-bottom: 3%;
		font-size: 1.2em;
	}
	.KodawariType dl dd {
		margin: 0;
		line-height: 2em;	  
	}
	
	/*************/
	/**  2段目  **/
	/*************/
	.KodawariType:nth-child(2) {
		background-image: url(//zestien.net/img/pokect_left.jpg);
		background-repeat: no-repeat;
		background-position: -50px top;
	}
	.KodawariType:nth-child(2) > img {
		width: 90%;
		float: none;
		display: block;
		margin: 0;
		margin-top: 5%;
		padding: 0;
		/* Box-shadow */
		box-shadow: 3px 5px 10px rgba(0,0,0,0.3);
		-webkit-box-shadow: 3px 5px 10px rgba(0,0,0,0.3);
		-moz-box-shadow: 3px 5px 10px rgba(0,0,0,0.3);
		-ms-box-shadow: 3px 5px 10px rgba(0,0,0,0.3);
	} 
	.KodawariType:nth-child(2) > dl {
		/*background-color: #6FF;*/
		float: none;
	}
	
	.KodawariType {
		opacity: 0;
	}
	.KodawariType.ShowUp {
		opacity: 0;
		color: #6C635E;
		-webkit-transform: translateX(-10%);
		-ms-transform: translateX(-10%);
		transform: translateX(-10%);
		-webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
		animation: delay1 1.2s ease 0.3s 1 forwards;
	}
	.KodawariType.ShowUp:nth-Child(2) {
		-webkit-transform: translateX(10%);
		-ms-transform: translateX(10%);
		transform: translateX(10%);
		-webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
		animation: delay1 1.2s ease 0.3s 1 forwards;
	}
	.KodawariType.ShowUp:nth-Child(3) {
		-webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
		animation: delay1 1.2s ease 0.3s 1 forwards;
	}
	 
	 
	 
	 
	/************/
	/**  Logo  **/
	/************/
	.LogoContents {
		padding: 18%;
	}
	/** toggleClassでフェードインとフェードアウトを繰り替えす **/
	.Logo {
		text-align: center;
		padding-top: 5%;
		padding-bottom: 5%;
		/* animation */
		opacity: 0;
		transition: 0.7s;
		margin-top: 60px;
	}
	.Logo > img {
		width: 25%;
	}
	
	
	/*******************/
	/**  ZestienInfo  **/
	/*******************/
	.ZestienInfo {
		background-color: #010000;
		margin-bottom: 10%;
		padding-top: 20em;
		background-image: url(//zestien.net/img/zestineinfo.jpg);
		background-repeat: no-repeat;
		background-position: left top;
		/*text-align: right;*/
		/* clearfix */
		display: inline-table;
	}
	.ZestienInfo:after {
		/* clearfix */
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	.ZestienInfo dl {
		width: 100%;
		text-align: left;
		/**/float: none;
		padding: 5%;
	}
	.ZestienInfo dl dt {
		margin: 0;
		margin-bottom: 3%;
	}
	.ZestienInfo dl dd {
		line-height: 2em;
		margin: 0;
	}
	.ZestienInfo img {
		width: 50%;
		margin: 0;
		float: right;
	}
	/* animation */
	.ZestienInfo {
		opacity: 0;
	}
	.ZestienInfo.ShowUp {
		opacity: 0;
		/*-webkit-transform: translateX(-20%);
		-ms-transform: translateX(-20%);
		transform: translateX(-20%);*/
		-webkit-animation: delay1 1.2s ease 0.3s 1 forwards;
		animation: delay1 1.2s ease 0.3s 1 forwards;
	}
	
   
	 
	 
	 
	 /*********************/
	/**  ZESTIENの由来  **/
	/*********************/
	.Origin {
		background-color: #EFEFEF;
		text-align: center;
		padding-top: 5%;
		padding-bottom: 5%;
		/* animation */
		opacity: 0;
		transition: 0.7s;
		margin-top: 60px;
	}
	.Origin:not(:target){ /*IE9はopacityとfilter両方適応される*/
		filter: none\9;
		-ms-filter: none\9;
	}
	.Origin.ShowUp {
		margin-top: 0;
		/* 全ブラウザ対応opacity */
		filter:alpha(opacity=1); /* IE 6,7*/
		-ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
		-moz-opacity: 1; /* FF , Netscape */
		-khtml-opacity: 1; /* Safari 1.x */
		zoom:1; /*IE*/
		opacity: 1;
	}
	.Origin dl {
		color: #8C8581;
		/*border: thin dashed #F39;*/
		width: 90%;
		margin-right: auto;
		margin-left: auto;
		padding: 0;
	}
	.Origin dl dt {
		font-size: 1.2em;
		font-weight: bold;
		margin-bottom: 3%;
	}
	.Origin dl dd {
		text-align: left;
		line-height: 2em;
		margin-left: 0;
	}
	
	
	
	
	/*********************/
	/**  取り扱い店舗  **/
	/*********************/
	.Store {
		/*background-color: #EFEFEF;*/
		width: 90%;
		text-align: center;
		margin-right: auto;
		margin-left: auto;
		padding-top: 15%;
		padding-bottom: 20%;
		display: table;
		/* animation */
		opacity: 0;
		transition: 0.7s;
		margin-top: 60px;
	}
	.Store:not(:target){ /*IE9はopacityとfilter両方適応される*/
		filter: none\9;
		-ms-filter: none\9;
	}
	.Store.ShowUp {
		margin-top: 0;
		/* 全ブラウザ対応opacity */
		filter:alpha(opacity=1); /* IE 6,7*/
		-ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
		-moz-opacity: 1; /* FF , Netscape */
		-khtml-opacity: 1; /* Safari 1.x */
		zoom:1; /*IE*/
		opacity: 1;
	}
	
	.StorePhoto {
		/*background-color: #F9C;*/
		text-align: left;
		width: 90%;
		display: block;
	}
	.StorePhoto img {
		width: 100%;
		display: inline0block;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 2%;
	}
	.Store dl {
		color: #8C8581;
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		padding: 0;
		text-align: left;
		display: inline-block;
		vertical-align: top;
	}
	.Store dl dt {
		font-size: 1.2em;
		font-weight: bold;
		margin-bottom: 3%;
	}
	.Store dl dd {
		line-height: 2em;
		margin-left: 0;
	}
	
	/*********************/
	/**  icon Facebook  **/
	/*********************/
	.facebook-icon::before {
	  color: #305097;
	  font-family: fontawesome;
	  content: "\f082";
	  margin-right: .5em;
	  display: inline-block;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	
	
	/********************/
	/**  教室のご案内  **/
	/********************/
	.Lecture {
		/*border: thin dashed #3CC;
		background-color: #EFEFEF;*/
		width: 100%;
		text-align: center;
		margin-right: auto;
		margin-left: auto;
		/* clearfix */
		display: inline-table;
		/* animation */
		opacity: 0;
		transition: 0.7s;
		margin-top: 60px;
	}
	.Lecture:after {
		/* clearfix */
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	.Lecture:not(:target){ /*IE9はopacityとfilter両方適応される*/
		filter: none\9;
		-ms-filter: none\9;
	}
	.Lecture.ShowUp {
		margin-top: 0;
		/* 全ブラウザ対応opacity */
		filter:alpha(opacity=1); /* IE 6,7*/
		-ms-filter: "alpha(opacity=1)"; /* IE 8,9 */
		-moz-opacity: 1; /* FF , Netscape */
		-khtml-opacity: 1; /* Safari 1.x */
		zoom:1; /*IE*/
		opacity: 1;
	}
	.LectureInfo {
	  float: none;
	  position: static;
	  width: 100%;
	}
	.Lecture img {
		width: 100%;
		float: noen;
	}
	.Lecture dl {
		color: #8C8581;
		background-color: #FFF;
		border: thin solid #CCC;
		width: 99%;
		display: block;
		margin-right: auto;
		margin-left: auto;
		padding: 3%;
		position: static;
		top: -5em;
		right: 10%;
	}
	.Lecture dl dt {
		font-size: 1.2em;
		font-weight: bold;
		margin-bottom: 3%;
	}
	.Lecture dl dd {
		text-align: left;
		line-height: 2em;
		margin-left: 0;
	}
}

/****************************************************/
/**  メディアクエリの外に出さないとIEで動作しない  **/
/****************************************************/
 /* animation Diray設定 */
 @-webkit-keyframes delay1 {
	100% {
	  opacity: 1;
	  margin-left: 0;
	  -webkit-transform: translateX(0);
	  -ms-transform: translateX(0);
	  transform: translateX(0);
	}
  }
  @keyframes delay1 {
	100% {
	  opacity: 1;
	  margin-left: 0;
	  -webkit-transform: translateX(0);
	  -ms-transform: translateX(0);
	  transform: translateX(0);
	}
  }