/*
コメント
*/
@import url('https://fonts.googleapis.com/earlyaccess/kokoro.css');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono|Major+Mono+Display');
@import url('http://mplus-fonts.sourceforge.jp/webfonts/general-j/mplus_webfonts.css');
@import url('http://mplus-fonts.sourceforge.jp/webfonts/basic_latin/mplus_webfonts.css');
@import compass;
@import url(https://fonts.googleapis.com/css?family=PT+Sans:700|Pacifico|Changa+One);


	body{
		margin: 0;
		max-width: 100vw;
		display:none
	}

	/* floatの解除 */
	.clearfix:after{
		content: "";
		display: block;
		clear: both;
	}


	#wrap{
		background-color: #452b1e;
	}


	#loader-bg{
		background-color: #fff;
	}

	#loader{
		position:fixed;
		margin: auto;
		left:0;
		right:0;
		top:50%;
		width : 90px;
		}


	#loader ul{
		margin : 0;
		list-style:none;
		width:90px;
		position : relative;
		padding : 0;
		height:10px;
		}


	#loader li{
		position : absolute;
		width:2px;
		height : 0;
		background-color: #452b1e;
		bottom : 0;
		}



	@keyframes sequence1 {
		0%{ height: 10px; }
		50%{ height:50px; }
		100%{ height: 10px; }
	}

	@keyframes sequence2 {
		0%{ height: 20px; }
		50%{ height: 65px; }
		100%{ height: 20px; }
	}

	#loader li:nth-child(1){
		left : 0;
		animation: sequence1 1s ease infinite 0;
	}
	#loader li:nth-child(2){
		left : 15px;
		animation: sequence2 1s ease infinite 0.1s;
	}
	#loader li:nth-child(3){
		left : 30px;
		animation: sequence1 1s ease-in-out infinite 0.2s;
	}
	#loader li:nth-child(4){
		left : 45px;
		animation: sequence2 1s ease-in infinite 0.3s;
	}

	#loader li:nth-child(5){
		left : 60px;
		animation: sequence1 1s ease-in-out infinite 0.4s;
	}
	#loader li:nth-child(6){
		left : 75px;
		animation: sequence2 1s ease infinite 0.5s;
	}


	/*ヘッダーの白いフチ*/
	.ue{
		background-color: #FFF;
		height: 8vw;
		position: relative;
		}



	/*ハンバーガーメニュー*/
	.wrapper {
		height: 100%;
		overflow-x: hidden;
		position: relative;
	}

	.overlay.open {
		width: 100%;
		height: 100%;
		opacity: 1;
	}
	main {
		height: 100%;
		min-height: 100vh;
		transition: all .5s;
		display: flex;
		flex-direction: column;
	}
	main.open {
		transform: translateX(-250px);
	}
	.menu-trigger {
		display: inline-block;
		width: 40px;
		height: 28px;
		vertical-align: middle;
		position: fixed;
		top: 30px;
		right: 30px;
		z-index: 100;
		cursor: pointer;
	/*   transform: translateX(0);
	  transition: transform .5s;
	 */}
	/* .menu-trigger.active {
	  transform: translateX(-250px);
	}
	 */.menu-trigger span {
		display: inline-block;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #ddd;
		transition: all .5s;
	}
	.menu-trigger.active span {
		background-color: #452b1e;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger.active span:nth-of-type(1) {
		transform: translateY(12px) rotate(-45deg);
	}
	.menu-trigger span:nth-of-type(2) {
		top: 12px;
	}
	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
		transform: translateY(-12px) rotate(45deg);
	}

	nav {
		width: 250px;
		height: 100%;
		padding-top: 100px;
		background-color: #fff;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 10;
		transform: translate(250px);
		transition: all .5s;
	}
	nav.open {
		transform: translateZ(0);
	}
	nav li {
		color: #452b1e;
		text-align: center;
		padding: 10px 0;
	}

	nav li:hover{
		background-color: #eee;
	}

	* {
		box-sizing: border-box;
	}
	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;

	}

	nav ul a{
		text-decoration: none;
		cursor: pointer;
	}



	/* ロゴとその背景 */
	.logo{
		width: 25%;
		position: absolute;
		top: -3vw;
		left: -5vw;
		z-index: 999;
	}

	.logomobile{
		display: none;
	}


	/* メインビジュアル */
	.visual{
		max-width: 100%;
	}

	.visualmobile{
		display: none;
	}


	/* 共通見出し */
	div h1{
		font-weight: normal;
		font-family: 'Major Mono Display', monospace,serif;
		font-family: 'IBM Plex Mono', monospace,serif;
	}



	/* 私のガトーショコラについて */
	.about{
		width: 100vw;
		height: auto;
		max-width: 100%
		padding: 150px 0 50px;
		margin: 50px auto 400px;
	}



	.aboutphoto{
		width: 45%;
		float: left;
	}

	.aboutphotopad{
		display: none;
	}


	.aboutphotomobile{
		display: none;
	}


	.about h1{
		color: #fff;
		font-size: 180%;
		display: inline-block;
		padding: 30px 150px 30px 50px;
		font-family: "Kokoro",sans-serif;
		margin: 0 0 10px 30px;
		border-bottom: 2px dashed #fff;
	}


	.about p{
		color: #fff;
		width: 45%;
		font-size: 16px;
		line-height: 180%;
		margin-top: 100px;
		margin-left: 50vw;
		font-family: 'M+ Type-1 (general-j) Light',sans-serif;
	}


	.kanji{
		font-family: 'M+ Type-1 (general-j) Light',sans-serif;
	}


	/*ナイフとフォーク*/
	.nf{
		position: absolute;
		right: -25%;
		top: 30vw;
		width: 65%;
		-webkit-transform: rotate(-30deg);
		-moz-transform: rotate(-30deg);
		transform: rotate(-30deg);
		z-index: 3;
	}


	/* ストーリー */
	.story{
		background-color: #fff;
		padding: 0 0 50px 0;
		position: relative;;
		width: 100%
	}

	.story>p{
		font-family: 'Major Mono Display', monospace,sans-serif;
		font-family: 'IBM Plex Mono', monospace,sans-serif;
		color: #452b1e;
		display: inline;
		font-size: 200%;
		padding: 10px;
		position: absolute;
		left: 20vw;
		top: -5vw;
		z-index: 400;
	}



	/*高橋さんの画像*/
	.takahashi img{
		float: left;
		margin-top: 150px;
		width: 30%;
	}

	.takahashi p{
		width: 45%;
		font-size: 100%;
		float: right;
		line-height: 180%;
		margin-top: 25%;
		margin-right: 10%;
		font-family: 'M+ Type-1 (general-j) Light',sans-serif;
	}



	/*湯島の画像*/
	.yushima img{
		float: right;
		margin-top: 20%;
		width: 50%;
	}

	.yushima p{
		width: 45%;
		font-size: 100%;
		text-align: left;
		line-height: 180%;
		margin-top: 30%;
		margin-left: -25%;
		display: inline-block;
		font-family: 'M+ Type-1 (general-j) Light',sans-serif;
	}



	/*おちゃ*/
	.tea{
		position: absolute;
		width: 55%;
		left: -20vw;
		top: 90vw;
		z-index: 3;
	}


	/*シーリングスタンプの画像*/
	.stamp{
		overflow: hidden;
		display: inline-block;
	}

	.stamp img{
		float: left;
		width: 50%;
		margin-top: 10%;
	}

	.stamp p{
		width: 40%;
		font-size: 100%;
		float: left;
		line-height: 180%;
		margin-top: -25%;
		margin-left: 55%;
		font-family: 'M+ Type-1 (general-j) Light',sans-serif;
	}



	/*ストーリー背景*/
	.mokumoku img{
		width: 100%;
		left: 0;
		position: absolute;
	}

	.storyhaikeiue{
		top: -25vw;
	}

	.storyhaikeisita{
		top: 100%;
	}



	/* ラインナップ */
	.lineup{
		overflow: hidden;
		max-width: 100%;
		margin: 0;
	}

	.lineup h1{
		width: 100%;
		padding: 25% 0 100px 0;
		margin: 10px;
		font-size: 200%;
		color: #fff;
		display: inline-block;
		text-align: center;
	}


	.gato{
		overflow:hidden;
		position:relative;
		float: left;
		width: 33.3333%;
		height:1000px;
	}


	.shopad,.grpad,.mipad{
		display: none;
	}


	/*画像の効果*/
	.gato .caption {
		width: 100%;
		height: 100%;
		visibility: hidden;
		font-size: 130%;
		color: #fff;
		top: 0;
		left: 0;
		position: absolute;
		text-align: center;
		-webkit-transition: all 0.4s step-end;
		transition: all 0.2s step-end;
	}

	/* 文字を表示する */
	.gato:hover .caption {
		visibility: visible;
	}

	.gato .caption p {
		font-size: 180%;
		padding-top: 250px;
		color: #fff;
		opacity: 0;
		font-family: "Kokoro",sans-serif;
	}

	.sentence{
		font-size: 60%;
		line-height: 160%;
		padding: 30px;
		display: block;
	}

	.value{
		font-size: 50%;
		color: #fee;
		padding: 30px;
		display: block;
	}



	/* 文字を表示する */
	.gato:hover .caption p {
		opacity: 1;
	}

	.gato .mask1, .gato .mask2 {
		width: 100%;
		height: 50%;
		position: absolute;
		left: 0;
		background-color: rgba(0,0,0,0.4);
		-webkit-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}

	/* 枠の上に置いて表示させない */
	.gato .mask1 {
		top: -50%;
	}

	/* 下にずらして表示する */
	.gato:hover .mask1 {
		top: 0;
	}

	/* 枠の下に置いて表示させない */
	.gato .mask2 {
		bottom:-50%;
	}

	/* 上にずらして表示する */
	.gato:hover .mask2 {
		bottom: 0;
	}


	/*aboutからlineupまで*/
	.watashi{
		width: 100%;
		position: relative;
		overflow: hidden;
		background-color: #452b1e;
	}



	/* お店の情報 */
	.shop{
		background-color: #fff;
		padding: 30px 30px 80px;
		width: 90%;
		margin: 200px auto 5%;
		overflow: hidden;
	}



	.shop h1{
		color: #452b1e;
		display: block;
		font-size: 200%;
		text-align: center;
		padding: 25px;
		font-family: 'Major Mono Display', monospace;
		font-family: 'IBM Plex Mono', monospace;
	}



	.shop img{
		float: left;
		max-width: 100%;
		width: 35%;
		margin-left: 50px;
	}



	.shop h2{
		color: #452b1e;
		font-size: 100%;
		margin-top: 5%;
		line-height: 180%;
		font-family: 'M+ Type-1 (general-j) Light',sans-serif;
	}

	.shop > p{
		color: #452b1e;
		display: inline-block;
		font-size: 80%;
		margin-top: 2%;
		line-height: 150%;
		font-family: 'M+ Type-1 (general-j) Light',sans-serif;
	}


	/*ホバーエフェクト*/
	button {
		background: none;
		border: 0;
		box-sizing: border-box;
		margin-right: 50px;
		padding: 1em 2em;
		box-shadow: inset 0 0 0 2px #f45e61;
		color: #f45e61;
		font-size: inherit;
		font-weight: 700;
		position: relative;
		vertical-align: middle;
		font-size: 18px;
		font-family: 'M+ Type-1 (general-j) Light',sans-serif;
		cursor: pointer;
}

	button::before, button::after {
		box-sizing: inherit;
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.center:hover {
		color: #452b1e;
	}

	.center::before, .center::after {
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		-webkit-transform-origin: center;
		transform-origin: center;
	}

	.center::before {
		border-top: 2px solid #452b1e;
		border-bottom: 2px solid #452b1e;
		-webkit-transform: scale3d(0, 1, 1);
		transform: scale3d(0, 1, 1);
	}

	.center::after {
		border-left: 2px solid #452b1e;
		border-right: 2px solid #452b1e;
		-webkit-transform: scale3d(1, 0, 1);
		transform: scale3d(1, 0, 1);
	}

	.center:hover::before, .center:hover::after {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		transition: -webkit-transform 0.5s;
		transition: transform 0.5s;
		transition: transform 0.5s, -webkit-transform 0.5s;
	}



	/*ご予約ボタン*/
	.goyoyaku{
		float: right;
	}

	.goyoyaku a{
		text-decoration: none;
	}


	/*コピーライト*/
	footer{
		text-align: center;
		font-family: 'M+ Type-1 (general-j) Light',sans-serif;
		color: #fff;
		padding: 30px;
		font-size: 80%;
		}



	/*トップへ戻る*/
	#page-top {
	    position: fixed;
	    bottom: 20px;
	    right: 20px;
	    font-size: 200%;
	    z-index: 999;
	}

	#page-top a {
	    background: #666;
	    text-decoration: none;
	    color: #fff;
	    padding: 10px 18px;
	    text-align: center;
	    display: block;
	    border-radius: 40px;
	}

	#page-top a:hover {
	    text-decoration: none;
	    background: #999;
	}





















	/* ########### 750px 以下 ########### */
	@media (max-width: 750px) {

	/*ヘッダーの白いフチ*/
	.ue{
		height: 0px;
		}



	/* ロゴとその背景 */
	.visual{
		display: none;
	}

	.visualmobile{
		display: inline;
		max-width: 100%;
	}

	.logo{
		display: none;
	}

	.logomobile{
		display: inline;
		width: 30%;
		max-width: 100%;
		margin-left: 30px;
		position: absolute;
		top: 10px;
		left: -20px;
	}



	/* 私のガトーショコラについて */
	.about{
		max-width: 100%;
		padding: 20px 0 50px;
		margin: 20px 0 100px;
	}

	.about h1{
		font-size: 150%;
		display: inline-block;
		padding: 30px 150px 30px 50px;
		margin: 0;
	}

	.aboutphoto{
		display: none;
	}

	.aboutphotomobile{
		display: block;
		width: 75%;
		margin-left: 10%;
	}


	.about p{
		width: 80%;
		font-size: 80%;
		margin: 50px auto 0;
	}


	/*ナイフとフォーク*/
	.nf{
		display: none;
	}


	/*おちゃ*/
	.tea{
		display: none;
	}


	/*ストーリー*/
	.story{
		max-width: 100%;
	}

	.takahashi p{
		font-size: 75%;
	}

	.yushima img{
		width: 40%;
	}

	.yushima p{
		font-size: 75%;
		margin-left: 5%;
	}

	.stamp p{
		font-size: 75%;
	}

	/* ラインナップ */
	.gato{
		overflow:hidden;
		position:relative;
		float: none;
		width: 100%;
		height:1000px;
	}

	.gato .mask1, .gato .mask2 {
		display: none;
	}

	.gato .caption p {
		font-size: 150%;
		margin-top: -30vw;
		margin-bottom: 20vw;
		background-color: rgba(0,0,0,0.4);
		visibility: visible;
		opacity: 1;
	}

	.sentence{
		font-size: 60%;
	}

	.value{
		font-size: 50%;
	}



	/*お店の情報*/
	.shop{
		max-width: 100%;
		margin-bottom: 30px;
	}


	.shop img{
		width: 70%;
		display: block;
		margin-left: 18%;
	}

	.shop h2{
		margin-left: 10%;
	}

	.shop > p{
		margin-left: 12%
	}


	/*ご予約ボタン*/
	button{
		margin-left: 30%;
		margin-top: 10%;
	}

	.goyoyaku{
		float: none;
	}

	}



	/* ########### 751px 以上 899px 以下　########### */
	@media (min-width: 751px) and (max-width: 899px) {

	/*ヘッダーの白いフチ*/
	.ue{
		background-color: #FFF;
		height: 10vw;
		}


		/* ロゴとその背景 */
	.logomobile{
		display: none;
	}


	/* 私のガトーショコラについて */
	.about{
		max-width: 100%;
		padding: 20px 0 50px;
		margin: 20px 0 250px;
	}

	.aboutphoto{
		display: none;
	}

	.aboutphotopad{
		display: inline;
		width: 45%;
		float: left;
		margin-top: -10%;
	}

	.about h1{
		font-size: 150%;
		margin: 0 0 10px 30vw;
		padding: 30px 30px 30px 150px;
	}

	.about p{
		width: 55%;
		font-size: 85%;
		margin: 100px auto 0 35vw;
	}


	/*ストーリー*/
	.takahashi p{
		font-size: 80%;
	}

	.yushima p{
		font-size: 80%;
	}

	.stamp p{
		font-size: 80%;
	}


	/*ナイフとフォーク*/
	.nf{
		top: 7%;
	}


	/*おちゃ*/
	.tea{
		top: 100vw;
	}


	/*ラインナップ*/
	.sho,.gr,.mi{
		display: none;
	}

	.shopad,.grpad,.mipad{
		display:inline;
	}

	.gato{
		width: 100%;
		height: auto;
	}

	.gato .mask1, .gato .mask2 {
		display: none;
	}

	.gato .caption p {
		font-size: 150%;
		margin-top: -20%;
		margin-bottom: 20vw;
		background-color: rgba(0,0,0,0.4);
		visibility: visible;
		opacity: 1;
	}

	.sentence{
		font-size: 60%;
	}

	.value{
		font-size: 55%;
	}

	/*お店の情報*/
	.shop img{
		width: 60%;
		display: block;
		margin-left: 20%;
		margin-right: 18%;
		margin-bottom: 10%;
	}

	.shop h2{
		display: block;
		margin-left: 10%;
	}

	.shop > p{
		margin-top: 5%;
		margin-left: 12%
	}

	}



	/* ########### 900px 以上 1200px 以下　########### */
	@media (min-width: 900px) and (max-width: 1200px) {

	/* ロゴとその背景 */
	.logomobile{
		display: none;
	}


	/* 私のガトーショコラについて */
	.about{
		max-width: 100%;
		padding: 20px 0 50px;
		margin: 20px 0 300px;
	}

	.aboutphoto{
		display: none;
	}

	.aboutphotopad{
		display: inline;
		width: 45%;
		float: left;
		margin-top: -10%;
	}

	.about h1{
		font-size: 155%;
		display: inline-block;
		padding: 30px 150px 30px 50px;
		margin: 0 0 10px 40vw;
	}

	.about p{
		width: 60%;
		font-size: 90%;
		margin: 100px auto 0 30vw;
	}

	/*ストーリー*/
	.takahashi p{
		font-size: 90%;
	}

	.yushima p{
		font-size: 90%;
	}

	.stamp p{
		font-size: 90%;
	}



	/*ナイフとフォーク*/
	.nf{
		top: 7%;
	}

	/*おちゃ*/
	.tea{
		top: 95vw;
	}


	/*ラインナップ*/
	.sho,.gr,.mi{
		display: none;
	}

	.shopad,.grpad,.mipad{
		display:inline;
	}

	.gato{
		width: 100%;
		height: auto;
	}


	.gato .mask1, .gato .mask2 {
		display: none;
	}

	.gato .caption p {
		font-size: 160%;
		margin-top: -15%;
		margin-bottom: 20vw;
		background-color: rgba(0,0,0,0.4);
		visibility: visible;
		opacity: 1;
	}

	.sentence{
		font-size: 60%;
	}

	.value{
		font-size: 50%;
	}


	}



	/* ########### 1201px 以上　########### */
	@media (min-width: 1201px) {

		.about{
			margin-bottom: 30%;
		}

		.aboutphoto{
			margin-top: -5%;
		}


}