@charset "utf=8";

@media screen and (min-width:1024px) {

	/* 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 {
		color: #000;
		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: 300;
		font-style: normal;
		margin-bottom: 12px;
		font-size: 6px;
		line-height: 24px;
		letter-spacing: 1.5px;
	}

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

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

	/* 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: 60px;
		line-height: 80px;
		letter-spacing: 10px;
	}

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

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

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

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

	/*神保町、赤坂、名古屋*/
	.topbtn,
	.topbtn2,
	.topbtn3,
	.topbtn4,
	.topbtn5 {
		font-weight: 300;
		font-size: 38px;
		line-height: 70px;
		letter-spacing: 6px;
	}




	/* 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: 65%;
		margin: auto;
		z-index: 5;
		/* background-color: salmon; */
	}



	/* header
 * --------------------------------------- */

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

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

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

	.sns li p {
		width: 25px;
		height: 25px;
		padding: 10px;
	}

	.sns img {
		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: -4px;
		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;
		-webkit-appearance: none;
		appearance: none;
		border: none;
		background: transparent;
		position: absolute;
	}

	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}



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

	/*ロゴ*/
	#logo {
		width: 40%;
		margin: auto;
		position: absolute;
		top: 58%;
		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: 30px;
		margin-bottom: 20px;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}

	#typ {
		opacity: 0;
	}

	#typ span {
		opacity: 0;
	}

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

	.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: 52%;
		left: 46%;
		transform: translate(-50%, -50%);
		display: flex;
	}

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

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

	/*右側*/
	.beansinfo {
		margin-top: 90px;
		text-align: left;
	}

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

	/*テイスト下余白*/
	.beansinfo .taste {
		margin-top: 20px;
	}

	/*グリッチロゴ*/
	.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: 20px;
		letter-spacing: 5px;
		line-height: 40px;
		margin-left: -33px;
	}

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

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

	#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: 100%;
		transition: 800ms ease all;
	}



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

	.shop_img01,
	.shop_img02,
	.shop_img03,
	.shop_img04,
	.shop_img05,
	.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: 22%;
		position: fixed;
		top: 23%;
		left: 55%;
	}

	/*画像の大きさ*/
	.shop_img01 img,
	.shop_img02 img,
	.shop_img03 img,
	.shop_img04 img,
	.shop_img05 img {
		max-width: 100%;
		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: 10px;
		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 {
		max-width: 100%;
		position: fixed;
		top: 95%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
	}

}