@charset "utf=8";


@media screen and (max-width: 736px) and (orientation: landscape) {

	/* Reset CSS
 * --------------------------------------- */
	body,
	div,
	dl,
	dt,
	dd,
	ul,
	ol,
	li,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	pre,
	form,
	fieldset,
	input,
	textarea,
	p,
	blockquote,
	th,
	td {
		padding: 0;
		margin: 0;
	}

	a {
		text-decoration: none;
	}

	table {
		border-spacing: 0;
	}

	ol,
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: normal;
		font-size: 100%;
		margin: 0;
		padding: 0;
	}



	/* font size
 * --------------------------------------- */

	/* header,concept,wholesale,training,location */
	body {
		font-size: 100%;
		font-family: futura-pt, sans-serif;
		font-weight: 400;
		font-style: normal;
	}

	/* all */
	p {
		font-size: 2em;
	}

	/* ヘッダーの文字大きさ */
	.global-nav li {
		font-size: 15px;
		padding-left: 12px;
		padding-right: 12px;
		letter-spacing: 2px;
	}

	/* concept,wholesale,training,location */
	#ja {
		font-family: source-han-sans-japanese, sans-serif;
		font-weight: 200;
		font-style: normal;
		margin-bottom: 12px;
		font-size: 3px;
		line-height: 14px;
		letter-spacing: 1.5px;
	}

	/* concept,wholesale,training,location */
	#en {
		font-size: 3px;
		letter-spacing: 0px;
		line-height: 14px;
		letter-spacing: 1.5px;
	}

	/* concept,wholesale,training,location */
	#ja a,
	#en a {
		font-family: futura-pt, sans-serif;
		font-weight: 500;
		font-size: 10px;
		letter-spacing: 1px;
		line-height: 13px;
		z-index: 5;
	}

	/* concept,wholesale,training,location選択時の下線*/
	#ja a,
	#en a {
		position: relative;
		display: inline-block;
		text-decoration: none;
	}

	#ja a::after,
	#en a::after {
		position: absolute;
		bottom: 6px;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #333;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform .5s;
	}

	#ja a:hover::after,
	#en a:hover::after {
		transform: scale(1, 1);
	}

	/* concept,wholesale,training,locationの見出し*/
	#section2 h2,
	#section4 h2,
	#section5 h2,
	#section6 h2 {
		font-weight: 500;
		margin: 0 auto;
		font-size: 22px;
		line-height: 30px;
		letter-spacing: 2px;
	}

	/*豆国名*/
	#section3 .name,
	#section3-2 .name {
		font-weight: 500;
		font-size: 22px;
		line-height: 30px;
		letter-spacing: 2px;
	}

	/*豆詳細名前*/
	#section3 .sab_name,
	#section3-2 .sab_name {
		font-weight: 500;
		font-size: 10px;
		line-height: 18px;
		letter-spacing: 1px;
	}

	/* 豆テイストのサイズ*/
	.beansinfo .taste {
		font-size: 7px;
		line-height: 18px;
		letter-spacing: 1px;
	}

	/*フッターサイズ*/
	.copy {
		font-size: 8px;
		letter-spacing: 2px;
	}

	/*神保町、赤坂、名古屋*/
	.topbtn,
	.topbtn2,
	.topbtn3,
	.topbtn4,
	.topbtn5 {
		font-weight: 300;
		font-size: 12px;
		line-height: 20px;
		letter-spacing: 2px;
		z-index: 5;
	}


	/* witdh
 * --------------------------------------- */

	#wrapper {
		max-width: 100%;
	}

	#section1,
	#section2,
	#section3,
	#section4,
	#section5,
	#section6 {
		width: 100%;
	}

	/* concept,wholesale,training*/
	#section2 .intro,
	#section4 .intro,
	#section5 .intro,
	#section6 .intro {
		max-width: 80%;
		margin: auto;
		z-index: 5;
	}



	/* Menu
 * --------------------------------------- */

	/*ヘッダーの表示*/
	#menu {
		position: fixed;
		z-index: 70;
	}

	/*ヘッダーの文字関係*/
	.global-nav {
		display: flex;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/*ハンバーガーメニューフォント*/
	.global-nav li {
		font-size: 20px;
		padding: 3px;
		letter-spacing: 3px;
	}

	/*snsアイコン大きさ*/
	.sns {
		position: fixed;
		top: 5%;
		left: 92%;
		transform: translate(-50%, -50%);
		display: flex;
	}

	.sns li p {
		width: 18px;
		height: 18px;
		padding: 7px;
	}

	.sns img {
		max-width: 100%;
	}

	/*ヘッダー選択時の色*/
	#menu li a {
		text-decoration: none;
		color: #000;
	}

	#menu li.active a {
		color: gray;
	}

	/*ヘッダー選択時の下線*/
	.global-nav a {
		position: relative;
		display: inline-block;
		text-decoration: none;
	}

	.global-nav a::after {
		position: absolute;
		bottom: -7px;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #333;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform .5s;
	}

	.global-nav a:hover::after {
		transform: scale(1, 1);
	}

	/*携帯用のハンバーガーメニュー*/
	.menu-trigger {
		display: none;
		/*PCの時は消しておく*/
		-webkit-appearance: none;
		/* Crome用　フォ-ム要素の初期化*/
		appearance: none;
		/*フォ-ム要素の初期化*/
		border: none;
		background: transparent;
		/* Firefox用 背景を透過させる設定*/
		position: absolute;
	}

	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		/* ブロック要素とインライン要素の中間の状態の要素*/
		transition: all .4s;
		box-sizing: border-box;
	}


	/* humberger
 * --------------------------------------- */

	.menu-trigger {
		width: 56px;
		height: 60px;
		/*positionで画面左上に絶対配置*/
		position: absolute;
		top: 9%;
		left: 10%;
		transform: translate(-50%, -50%);
		/*要素の重なり、上のレイヤーと同じ考えかた*/
		z-index: 90;
		/*クリックした際のボタン周りの線を消す*/
		outline: none;
	}

	.menu-trigger span {
		position: absolute;
		left: 10%;
		width: 24px;
		height: 2px;
		background-color: #000;
		/*menu-trigger内のspan全体を中心位置に揃える設定*/
		transform: translate(-50%, -50%);
	}

	.menu-trigger span:nth-of-type(1) {
		top: 22px;
	}

	.menu-trigger span:nth-of-type(2) {
		top: 50%;
	}

	.menu-trigger span:nth-of-type(3) {
		bottom: 20px;
	}

	/*.activeが付いているものは
クリックした際した後の表示を設定しています。*/
	.menu-trigger.active span:nth-of-type(1) {
		top: 49%;
		/* 変形の設定　右側の軸は変えずに左側を傾けている */
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0;
		/*透過の指定で消してる*/
	}

	.menu-trigger.active span:nth-of-type(3) {
		bottom: 49%;
		/* 変形の設定　右側の軸は変えずに左側を上に傾けている */
		transform: translate(-50%, -50%) rotate(45deg);
	}

	/*----- スマホ ナビゲーション ----- */
	#global-nav {
		display: none;
		/* クリックする前は消えてほしい*/
		width: 100vw;
		/*画面横幅めいいっぱい広げる*/
		height: 100vh;
		/*画面縦幅めいいっぱい広げる*/
		background: rgba(255, 255, 255, .95);
		margin: 0 auto;
		padding: 90px 0% 0;
		/*positionと組み合わせページをスクロールした場合も同じ位置に常に置く設定　transrateXと合わせてど真ん中に位置を合わせる設定*/
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: -1;
		/* 何かしらの要素の背面に設置*/
	}

	#global-nav.active {
		display: block;
		/* クリックした時に表示*/
		z-index: 1;
		/* 何かしらの要素の全面に設置*/
	}

	#global-nav ul {
		/* display:flex;を解除して縦並びにしている*/
		display: block;
		position: absolute;
		top: 34%;
		left: 48%;
		transform: translate(-50%, -50%);
	}

	#global-nav li,
	#global-nav li:last-child {
		/*画面横にめいいっぱい伸ばしている設定*/
		width: 100%;
	}

	#global-nav li a {
		font-size: 22px;
		line-height: 14px;
		text-align: center;
		background: none;
		padding-top: 0px;
	}




	/* #home
--------------------------- */

	/*ロゴ*/
	#logo {
		width: 37%;
		margin: auto;
		position: absolute;
		top: 54%;
		left: 54%;
		transform: translate(-50%, -50%);
	}

	path {
		stroke-dasharray: 1000;
		/*線の間隔を指定する*/
		stroke-dashoffset: 0;
		/*線の位置を指定する(IEは効かない属性)*/
		stroke-width: 1;
		/*線の太さを指定する*/
	}

	/*家紋色合い*/
	.bayleyssvg {
		display: block;
		margin: auto;
		width: 100%;
	}

	.bayleys {
		fill: black;
		stroke: black;
		stroke-width: 0;
		animation: logo 7.5s linear infinite;
		animation-iteration-count: 1;
	}



	/*家紋表示時間*/
	@keyframes logo {
		0% {
			stroke-width: 0.5pt;
			stroke-dashoffset: 1200;
			fill-opacity: 0;
		}

		50% {
			fill-opacity: 0;
		}

		100% {
			stroke-dashoffset: 0;
			fill-opacity: 1;
			stroke-width: 0pt;
		}
	}



	/*左情報*/
	.left {
		position: fixed;
		top: 68%;
		left: 13%;
		transform: translate(-50%, -50%);
	}

	/*縦書き情報*/
	.tategaki {
		font-family: ro-nikkatsu-sei-kai-std, serif;
		font-weight: 800;
		font-style: normal;
		font-size: 12px;
		margin-bottom: 0px;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}

	#typ {
		opacity: 0;
	}

	#typ span {
		opacity: 0;
	}

	/*左ロゴ情報*/
	.logo2 {
		width: 20px;
		height: 20px;
	}

	.logo2 img {
		width: 100%;
		opacity: 0;
		-webkit-animation: example 0.5s ease 10s 1 forwards;
		animation: example 10s ease 7s 1 forwards;
	}

	@keyframes example {
		100% {
			opacity: 1;
		}
	}

	/* .concept
--------------------------- */

	/*イラストロゴ*/
	#section2 .illust p {
		width: 7%;
		position: fixed;
		top: 80%;
		left: 80%;
		transform: translate(-50%, -50%);
		z-index: -1;
	}

	#section2 .illust img {
		width: 100%;
	}





	/* .beans
--------------------------- */

	/*豆部分の大きさ*/
	.beans {
		position: fixed;
		top: 49%;
		left: 47%;
		transform: translate(-50%, -50%);
		display: flex;
		text-align: center;
		justify-content: space-between;
	}


	/*パッケージ画像サイズ決め*/
	#section3 h2,
	#section3-2 h2 {
		width: 280px;
		z-index: 90;
	}

	/*パッケージ画像*/
	#section3 h2 img,
	#section3-2 h2 img {
		max-width: 100%;
	}

	/*右側*/
	.beansinfo {
		width: 250px;
		margin-left: 1px;
		margin-top: 30px;
		text-align: left;
	}

	/*棒線*/
	hr {
		height: 1px;
		width: 40%;
		background-color: #000;
		position: absolute;
		border: none;
	}


	/*グリッチロゴ*/
	.beansinfo .logo {
		width: 40px;
		height: 40px;
		margin-top: -55px;
		margin-left: 450px;
	}

	.beansinfo .logo img {
		max-width: 100%;
	}

	/*豆購入ボタン*/
	#button a {
		color: black;
		text-decoration: none;
		font-size: 9px;
		letter-spacing: 2px;
		line-height: 10px;
		margin-left: -33px;
	}

	#button {
		max-width: 100%;
		color: #fff;
		border: none;
		position: relative;
		height: 30px;
		padding: 0 2em;
		cursor: pointer;
		transition: 800ms ease all;
		outline: none;
		margin-top: 10px;
	}

	#button:hover {
		color: #fff;
		background-color: white;
	}

	#button2:before,
	#button:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		height: 1px;
		width: 0;
		background: black;
		transition: 400ms ease all;
	}

	#button:after {
		right: inherit;
		top: inherit;
		left: 0;
		bottom: 0;
	}

	#button:hover:before,
	#button:hover:after {
		width: 70%;
		transition: 800ms ease all;
	}



	/* .location
--------------------------- */

	.shop_img01,
	.shop_img02,
	.shop_img03,
	.shop_img04,
	.shop_img05 {
		display: none;
		/*PCの時は消しておく*/
		-webkit-appearance: none;
		/* Crome用　フォ-ム要素の初期化*/
		appearance: none;
		/*フォ-ム要素の初期化*/
		border: none;
		background: transparent;
		/* Firefox用 背景を透過させる設定*/
		position: absolute;
	}

	/*地名押した後に画像表示*/
	#shop_image .active {
		display: block;
		/* クリックした時に表示*/
		z-index: 5;
		/* 何かしらの要素の全面に設置*/
		width: 30%;
		position: fixed;
		top: 23%;
		left: 55%;
	}

	/*画像の大きさ*/
	.shop_img01 img,
	.shop_img02 img,
	.shop_img03 img,
	.shop_img04 img,
	.shop_img05 img {
		max-width: 80%;
		opacity: 0;
		-webkit-animation: photo 0.5s ease 1s 1 forwards;
		animation: photo 1s ease 0.5s 1 forwards;
	}

	/*画像の表示スピード*/
	@keyframes photo {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}


	/*地名をさした時の下線*/
	.topbtn,
	.topbtn2,
	.topbtn3,
	.topbtn4,
	.topbtn5 {
		position: relative;
		display: inline-block;
		text-decoration: none;
	}

	.topbtn::after,
	.topbtn2::after,
	.topbtn3::after,
	.topbtn4::after,
	.topbtn5::after {
		position: absolute;
		bottom: 3px;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #333;
		transform: scale(0, 1);
		transform-origin: left top;
		transition: transform .5s;
	}

	.topbtn:hover::after,
	.topbtn2:hover::after,
	.topbtn3:hover::after,
	.topbtn4:hover::after,
	.topbtn5:hover::after {
		transform: scale(1, 1);
	}






	/* .footer
--------------------------- */
	footer {
		width: 100%;
		position: fixed;
		top: 95%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
		text-align: center;
	}

	#pp-nav li .active span,
	.pp-slidesNav .active span {
		background: #333;
	}

	#pp-nav span,
	.pp-slidesNav span {
		top: 2px;
		left: 2px;
		width: 5px;
		height: 5px;
		border: 1px solid #000;
		background: rgba(0, 0, 0, 0);
		border-radius: 50%;
		position: absolute;
		z-index: 1;
	}

	#pp-nav.right {
		right: 3px;
	}
}