/* *******************************************************

		 　　基本レイアウト

******************************************************* */

html {
	height:100%;
}
body {
	height:100%;
	color:#595757;
	font-family:sans-serif;
}

.inner {
	max-width:1280px;
	margin:0 auto;
}

main {
	background:#fff;
	overflow:hidden;
}

body#index main {
	padding-bottom:4em;
}

/* 黄色背景 */
.bg_yellow {
	background:#fff362;
}
/* 白色背景 */
.bg_white {
	background:#FFFFFF;
}

h2 {
	font-weight:bold;
	font-size:1.0em;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
}

h3 {
	font-weight:700;
	font-size:1.6em;
	line-height:1.8em;
	margin:3em 0;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
}

p {
	font-size:0.95em;
	line-height:2.2em;
}

/* -------------------------------------------------------
		共通 － 背景
------------------------------------------------------- */
body#index::before ,
body#product::before ,
body#story::before ,
body#access::before  {
	content:"";
	width:100%;
	height:calc(var(--vh, 1vh) * 100); /* iPhoneのナビゲーションで表示がズレるのを防ぐためJSで処理 */
	position:fixed;
	z-index: -1;
	margin:0 auto;
}

body#index::before {
	background:url('img/index_bg.jpg') center / cover no-repeat;
}
body#product::before {
	background:url('img/product_bg_pc3.jpg') center / cover no-repeat;
}
body#story::before {
	background:url('img/story_bg.jpg') center / cover no-repeat;
}
body#access::before {
	background:url('img/access_bg.jpg') center / cover no-repeat;
}


/* -------------------------------------------------------
		STORY － 背景アニメ
------------------------------------------------------- */

#curtain {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0 auto;
	 width: 100%;
	height: 100vh;
}
#curtain {
	z-index: 99;
	background: #fff362;
	animation-duration: 0.7s;
	animation-delay:0.6s;
	animation-fill-mode: forwards;
	animation-name: curtain_motion;
}

@keyframes curtain_motion {
	0% {
	  width: 100%;
	  left:0;
	}
	50% {
	  width: 100%;
	}
	100% {
	  width: 0%;
	  left: 100%;
	}
}


/* *******************************************************

			ヘッダー

******************************************************* */

#page_name {
	position:fixed;
	z-index:5;
	display:inline-block;
	font-weight:bold;
	border-bottom:1px solid #623c22;
	padding:0 0.2em 0 2.5em;
	margin-top:2em;
	color:#623c22;
}

header {
	margin:0 auto;
}
#index header ,
#product header ,
#story header ,
#access header  {
	position:relative;
	height:100%;
}

/* -------------------------------------------------------
		　　　タイトル － HOME
------------------------------------------------------- */
#index h1#title {
	position:absolute;
	width:24.18vw; /* 619px,210px */
	height:auto;
	top:35%;
	left:13.16%;
}
#index h1#title:before {
	content:"";
	display:block;
	padding-top:33.93%;
}
#index h1#title img {
	position:absolute;
	top:0; 
	left:0;
	width:100%;
	height:100%;
}

/* -------------------------------------------------------
		　　　タイトル － PRODUCT
------------------------------------------------------- */
#product h1#title {
	position:absolute;
	bottom:75%;
	left:50%;
	transform:translate(-50%,0); 
	font-weight:bold;
	font-size:1.8em;
	line-height:1.8em;
	text-align:center;
}

/* -------------------------------------------------------
		　　　タイトル － STORY
------------------------------------------------------- */
#story h1#title {
	position:absolute;
	width:12.9vw;
	height:auto;
	bottom:0%;
	left:0;
	margin:3em 4em;
}
#story h1#title:before {
	content:"";
	display:block;
	padding-top:37.27%;
}
#story h1#title img {
	position:absolute;
	top:0; 
	left:0;
	width:100%;
	height:100%;
}

/* -------------------------------------------------------
		　　　タイトル － ACCESS
------------------------------------------------------- */
#access h1#title {
	position:absolute;
	width:22.66vw;
	height:auto;
	top:12%;
	left:0;
	margin:0 0 0 0;
}
#access h1#title:before {
	content:"";
	display:block;
	padding-top:18.3%;
}
#access h1#title img {
	position:absolute;
	top:0; 
	left:0;
	width:100%;
	height:100%;
}

/* *******************************************************

		   ナビゲーション

******************************************************* */

nav {
	position:absolute;
	top:0%;
	right:0%;
	width:11.7%;
	height:calc(var(--vh, 1vh) * 100); /* iPhoneのナビゲーションで表示がズレるのを防ぐためJSで処理 */
	background:rgba(255,240,0,0.6);
	display:flex;
}
nav ul {
	display:flex;
	flex-direction:column;
	height:75vh;
	margin:8vh auto;

}
nav li {
	text-align:center;
	font-weight:bold;
	color:#623c22;
}
.nav_logo {
	margin-bottom:10vh;

}
.nav_logo img {
	width:auto;
	height:16.43vh;
	margin:0 auto;
}

.nav_home ,
.nav_product ,
.nav_story ,
.nav_access {
	flex-grow:1;

}

.nav_shop {
	margin:10vh 0 6vh;
}
.nav_shop img {
	width:auto;
	height:6.06vh;
	margin:0 auto;
}
.nav_insta {
}
.nav_insta img {
	width:auto;
	height:4.5vh;
	margin:0 auto;
}

/* ハンバーガーメニュー用のチェックボックスを非表示 */
#menu_check {
	display:none;
}

/* *******************************************************

			HOME

******************************************************* */

#index_product {
}

/* -------------------------------------------------------
	     　重なった写真（右寄せ）
------------------------------------------------------- */
.flexbox_layer_right {
	display:flex;
	justify-content:space-between;

}
.flexbox_layer_right_txt {
	flex-basis:56%;
	padding:0 2.65% 0 6.944%;
	margin:5em 0;
}
.flexbox_layer_right_img {
	flex-basis:44%;
	position:relative;
	margin-bottom:3em;
}

.top_layer_right {
	position:absolute;
	top:0%;
	right:42%;
}
.top_layer_right:before {
	content:"";
	display:block;
}
.top_layer_right .top_layer_right_flame {
	position:absolute;
	top:0%; 
	left:0;
	width:100%;
	height:auto;
}
.top_layer_right .top_layer_right_flame img {
	width:100%;
	height:auto;
}

.bottom_layer_right {
	margin-left:auto;
	text-align:right;
}
.bottom_layer_right img {
	width:100%;
	height:auto;
	margin-bottom:36%;
	vertical-align:top;
}

/* 画像 － パイナップルパイ － #index_product_img2 */
#index_product_img2 {
	width:58.18%;
	height:auto;
	max-width:724px;
	margin:90% 0% 0% 0%;
}
#index_product_img2:before {
	padding-top:73.4%;
}

/* 画像 － ワシントニアパームの木 － #index_product_img1 */
#index_product_img1 {
	width:80%;
	height:auto;
	max-width:1589px;
}

/* しおり（右寄せ） */
.bookmark_left {
	text-align:left;
	margin:6em 0 1em;
}
.bookmark_left img {
	width:auto;
	height:3em;
	margin-left:auto;
}

/* -------------------------------------------------------
	     　小窓スライドショー（2枚）
------------------------------------------------------- */
.slide_two_std,
.slide_two_delay,
.slide_three_std,
.slide_three_delay {
	white-space: nowrap;
	overflow: hidden;
}

.slide_two_std img:first-child {
	animation-name:slide_two_motion;
	animation-duration:11s;
	animation-delay:0s;
	animation-timing-function:ease-in;
	animation-iteration-count:infinite;
}
.slide_two_delay img:first-child {
	animation-name:slide_two_motion;
	animation-duration:11s;
	animation-delay:0s;
	animation-timing-function:ease-in;
	animation-iteration-count:infinite;
}

@keyframes slide_two_motion {
	0% {
		margin-left: 0;
	}
	45% {
		margin-left: 0;
	}
	50% {
		margin-left: -100%;
	}
	95% {
		margin-left: -100%;
	}
	100% {
		margin-left: -200%;
	}
}

/* -------------------------------------------------------
	     　重なった写真（左寄せ）
------------------------------------------------------- */
.flexbox_layer_left {
	display:flex;
	justify-content:space-between;
	flex-direction:row-reverse;
}
.flexbox_layer_left_txt {
	flex-basis:56%;
	padding:0 6.944% 0 6.944%;
	margin:5em 0;
}
.flexbox_layer_left_img {
	flex-basis:44%;
	position:relative;
	margin-bottom:3em;
}

.top_layer_left {
	position:absolute;
	top:0%;
	left:42%;
}
.top_layer_left:before {
	content:"";
	display:block;
}
.top_layer_left .top_layer_left_flame {
	position:absolute;
	top:0%; 
	left:0;
	width:100%;
	height:auto;
}
.top_layer_left .top_layer_left_flame img {
	width:100%;
	height:auto;
}

.bottom_layer_left {
	margin-left:auto;
	text-align:right;
}
.bottom_layer_left img {
	width:100%;
	height:auto;
	margin-bottom:36%;
	vertical-align:top;
}

/* 画像 － パイナップルと洋書 － #index_story_img2 */
#index_story_img2 {
	width:58.18%;
	height:auto;
	max-width:724px;
	margin:90% 0% 0% 0%;
}
#index_story_img2:before {
	padding-top:73.4%;
}

/* 画像 － 店内カウンターで働く女性店員  － #index_story_img1 */
#index_story_img1 {
	width:80%;
	height:auto;
	max-width:1589px;
	margin:0 auto 0 0;
}

/* しおり（右寄せ） */
.bookmark_right {
	text-align:right;
	margin:6em 0 1em;
}
.bookmark_right img {
	width:auto;
	height:3em;
	margin-right:auto;
}

/* -------------------------------------------------------
	     　小窓スライドショー（3枚）
------------------------------------------------------- */
.slide_three_std img:first-child {
	animation-name:slide_three_motion;
	animation-duration:11s;
	animation-delay:0s;
	animation-timing-function:ease-in;
	animation-iteration-count:infinite;
}
.slide_three_delay img:first-child {
	animation-name:slide_three_motion;
	animation-duration:11s;
	animation-delay:0s;
	animation-timing-function:ease-in;
	animation-iteration-count:infinite;
}

@keyframes slide_three_motion {
	0% {
		margin-left: 0;
	}
	28% {
		margin-left: 0;
	}
	33% {
		margin-left: -100%;
	}
	61% {
		margin-left: -100%;
	}
	66% {
		margin-left: -200%;
	}
	95% {
		margin-left: -200%;
	}
	100% {
		margin-left: -300%;
	}
}

/* -------------------------------------------------------
	    	 　左右に配置された写真
------------------------------------------------------- */

section#index_healthy h2 {
	text-align:center;
	font-weight:bold;
	font-size:1.6em;
	line-height:1.8em;
	margin:3em 0;
}
section#index_healthy h3 {
	font-weight:bold;
	font-size:1.4em;
	line-height:1.8em;
	margin:0 0 0.5em 0;
}

.index_grid {
	display:grid;
	grid-template:
		"grid_txt1 grid_img1" auto 
		"grid_img2 grid_txt2" auto 
		"grid_txt3 grid_img3" auto 
		/ 50% 50%;
	justify-items:center;
	align-items:center;
}
.index_grid img {
	max-width:100%;
}

#grid_img1 {
	grid-area:grid_img1;
}

#grid_txt1 {
	grid-area:grid_txt1;
}
#grid_img2 {
	grid-area:grid_img2;
}

#grid_txt2 {
	grid-area:grid_txt2;
}
#grid_img3 {
	grid-area:grid_img3;
	padding-bottom:5em;
}

#grid_txt3 {
	grid-area:grid_txt3;

}

#grid_txt1 ,
#grid_txt2 ,
#grid_txt3 {
	width:80%;
	margin:0 auto;
}


#grid_txt3 .bookmark_right {
	margin-top:2em;
}

/* *******************************************************

			PRODUCT

******************************************************* */

#product_cake {
}

/* -------------------------------------------------------
		AOSHIMA PINEAPPLE CAKE
------------------------------------------------------- */
.product_flex {
	display:flex;
	flex-direction:row-reverse;

}
.product_flex_img {
	flex-basis:50%;
}
.product_flex_txt {
	flex-basis:50%;
	display:flex;
	align-items:center;
	text-align:center;
}
.product_flex_txt div {
	width:64%;
	margin:0 auto;
	padding-bottom:40%;
	background:url('img/product_flex_img1.jpg') bottom center / 100% auto no-repeat;
}
.product_flex_txt h1 {
	margin:4em 0 4em;
}
.product_flex_txt p {
	text-align:left;
}
.product_flex img {
	max-width:100%;
}

/* -------------------------------------------------------
			product_grid
------------------------------------------------------- */
.product_grid {
	display:grid;
	grid-template:
		"butter_img butter_txt" auto 
		"flour_txt flour_img" auto 
		"pineapple_img pineapple_txt" auto 
		"bake_txt bake_img" auto 
		/ 50% 50%;
	justify-items:center;
	align-items:center;
	padding:15% 0;
}
.product_grid img {
	max-width:100%;
}
.product_grid h2 {
	margin:0 0 1em 0;
	font-size:1.6em;
	line-height:1.6em;
}

.butter_txt ,
.flour_txt ,
.pineapple_txt ,
.bake_txt {
}
.butter_txt_inner ,
.pineapple_txt_inner {
	width:76%;
	padding-right:10%;
	margin:0 auto;
}
.flour_txt_inner ,
.bake_txt_inner {
	width:76%;
	padding-left:10%;
	margin:0 auto;
}

.butter_img ,
.flour_img ,
.pineapple_img ,
.bake_img {
	text-align:right;
}
.butter_img_inner ,
.pineapple_img_inner {
	width:76%;
	margin-left:auto;
}
.flour_img_inner ,
.bake_img_inner  {
	width:76%;
	margin-right:auto;
}

/* -------------------------------------------------------
			BUTTER
------------------------------------------------------- */
.butter_txt {
	grid-area:butter_txt;
	padding-bottom:25%;
}
.butter_img {
	grid-area:butter_img;
	position:relative;
	padding-bottom:25%;
}
.butter_vertical {
	width:20%;
	height:auto;
	display:block;
	position:absolute;
	margin-top:15%;
	top:0%;
	left:13%;
}

/* -------------------------------------------------------
			FLOUR
------------------------------------------------------- */
.flour_txt {
	grid-area:flour_txt;
	padding-bottom:25%;
}
.flour_img {
	grid-area:flour_img;
	position:relative;
	padding-bottom:25%;
}
.flour_vertical {
	width:20%;
	height:auto;
	display:block;
	position:absolute;
	margin-top:10%;
	top:0%;
	right:13%;
}

/* -------------------------------------------------------
			PINEAPPLE
------------------------------------------------------- */
.pineapple_txt {
	grid-area:pineapple_txt;
	padding-bottom:25%;
}
.pineapple_img {
	grid-area:pineapple_img;
	position:relative;
	padding-bottom:25%;
}
.pineapple_vertical {
	width:20%;
	height:auto;
	display:block;
	position:absolute;
	margin-top:-2%;
	top:0%;
	left:13%;
}

/* -------------------------------------------------------
			BAKE
------------------------------------------------------- */
.bake_txt {
	grid-area:bake_txt;
	padding-bottom:25%;
}
.bake_img {
	grid-area:bake_img;
	position:relative;
	padding-bottom:25%;
}
.bake_vertical {
	width:20%;
	height:auto;
	display:block;
	position:absolute;
	margin-top:31%;
	top:0%;
	right:13%;
}

/* -------------------------------------------------------
	　　　	　　　COCOPINE
------------------------------------------------------- */
#product_coco_bg {
	width:100%;
	background:url('img/product_coco_bg.jpg') top center / 100% auto no-repeat;
	padding-top:62.25%;
	position:relative;
}
#product_coco_bg img {
	position:absolute;
	bottom:3em;
	right:4em;
	width:33.8%;
	height:auto;
}

#product_coco_about {
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.product_coco_about_txt {
	flex-basis:50%;
	display:flex;
	flex-direction:column;
}
.product_coco_about_img {
	flex-basis:50%;
}

.coco_about_txt_inner {
	width:66.6%;
	margin:0 auto;
}

.product_coco_about_txt h2 {
	text-align:center;
	margin-bottom:2em;
}

.product_coco_about_txt p {
	margin-bottom:2em;
}

.product_coco_about_img img {
	max-width:100%;
	margin-top:0em;
}

/* -------------------------------------------------------
		SIDE STORY #1へ
------------------------------------------------------- */
section#product_coco_banner .inner {
	padding:0 10%;
}
section#product_coco_banner .half_block {
	width:41%;
	text-align:center;

}
section#product_coco_banner a {
	border:1px solid #707070;
	display:inline-block;
	padding:1em;
	margin:0 auto;
	width:100%;
}

/* *******************************************************

			STORY

******************************************************* */

/* -------------------------------------------------------
		　　　SIDE STORY
------------------------------------------------------- */

#side_story_body {
	padding:8em 0 0;
}
#side_story_body h2 img {
	width:100%;
	height:100%;
}
#side_story_body h3 {
	font-size:1.8em;
	margin:2em 0 1em;
}

.side_story_grid {
	display:grid;
	grid-template:
		"seen1_txt seen1_img" auto 
		"seen2_img seen2_txt" auto 
		"seen3_txt seen3_img" auto 
		"seen4_img seen4_txt" auto 
		"seen5_img seen5_txt" auto 
		/ 50% 50%;
	justify-items:center;
	align-items:center;
}
.side_story_grid img {
	max-width:100%;

}

.side_story_txt {
	width:68%;
	margin:0 auto 5em;
}
.side_story_img {
	margin:0 auto 5em;
	
}
.side_story_txt_join {
	grid-area:side_story_txt_join;
}
.side_story_txt_join p:first-child {
	margin-bottom:2em;
}

#seen1_txt {
	grid-area:seen1_txt;
}
#seen1_img {
	grid-area:seen1_img;
}
#seen2_txt {
	grid-area:seen2_txt;
}
#seen2_img {
	grid-area:seen2_img;
}
#seen3_txt {
	grid-area:seen3_txt;
}
#seen3_img {
	grid-area:seen3_img;
}
#seen4_txt {
	grid-area:seen4_txt;
}
#seen4_img {
	grid-area:seen4_img;
}

#seen5_txt {
	grid-area:seen5_txt;
}
#seen5_img {
	grid-area:seen5_img;
	width:56.25%;
}

.page_end {
	text-align:center;
	margin-bottom:3em;
}

/* -------------------------------------------------------
		　　　OUR HISTORY
------------------------------------------------------- */
#our_history_body {
	background:#fbf5e6;
	margin:0em 0 0 0;
	padding:8em 0 0;
}
#our_history_body h2 img {
	width:100%;
	height:100%;
	margin-bottom:4em;
}

.our_history_grid {
	display:grid;
	grid-template:
		"our_history_txt1 our_history_img1" auto 
		"our_history_txt2 our_history_img2" auto 
		"our_history_img3 our_history_txt3" auto 
		"our_history_img4 our_history_txt4" auto 
		/ 50% 50%;
	justify-items:center;
	width:90%;
	margin:0 auto;
}
.our_history_grid img {
	max-width:100%;
}
.our_history_grid p {
	margin:0 2em;
}
.our_history_grid p:last-child {
	margin-top:2em;
}
.our_history_grid p.owner {
	margin-top:6em;
	text-align:right;
}

.our_history_txt1 {
	grid-area:our_history_txt1;
}
.our_history_img1 {
	grid-area:our_history_img1;
}
.our_history_txt2 {
	grid-area:our_history_txt2;
}
.our_history_img2 {
	grid-area:our_history_img2;
}
.our_history_txt3 {
	grid-area:our_history_txt3;
}
.our_history_img3 {
	grid-area:our_history_img3;
}
.our_history_txt4 {
	grid-area:our_history_txt4;
}
.our_history_img4 {
	grid-area:our_history_img4;
}

.our_history_txt1 ,
.our_history_txt2 ,
.our_history_txt3 ,
.our_history_txt4 {
	width:80%;
	margin:0 auto;
}

.our_history_img1 ,
.our_history_img3 ,
.our_history_img2 ,
.our_history_img4 {
	width:80%;
	margin:0 auto 10em;
}

/* *******************************************************

			ACCESS

******************************************************* */

body#access  h1 {
	font-weight:bold;
	font-size:3em;
	padding:3em 0 0 0;
}
#access_add {
	width:80%;
	margin:0 auto;
}

#access_add_body {
	display:flex;
	width:88%;
	margin:0 auto;
}
.add_text {
	flex-basis:50%;
	margin-top:3em;
}
.add_text p {
	margin-bottom:2em;
}

/* -------------------------------------------------------
		　　　Google Map
------------------------------------------------------- */
.googlemap {
	flex-basis:50%;
	text-align:center;
}
.googlemap img {
	max-width:100%;
}
.googlemap_embed {
	position:relative;
	width:100%;
	height:auto;
	padding-top:75%;
}
.googlemap_embed iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
span.googlemap_link  {
	border:1px solid #707070;
	padding:0.5em 1em;
	margin:2em auto 0;
	display:inline-block;
}

/* -------------------------------------------------------
		　問い合わせフォーム
------------------------------------------------------- */
#access_contact {
	width:80%;
	margin:0 auto;
	padding-bottom:4em;
}
#access_contact form {
	margin:2em auto 0;
	padding:0 5%;
	text-align:center;
	width:80%;
}
#contact_form {
	display:flex;
	width:100%;
}
#contact_form ul {
	width:100%;
	margin:auto;
}
#contact_form ul li {
	display:flex;
	border:1px solid #707070;
	padding:1em 1em;
	margin-bottom:1em;
	text-align:left;
}
#contact_form ul li input {
	width:100%;
	background:none;
	border:0;
	font-size:0.95em;
}
#contact_form ul li textarea {
	padding-top:1em;
	font-size:0.95em;
	width:100%;
	background:none;
	border:0;
	height:8em;
}
::placeholder {
	color:#ccc;
	opacity:1;
}
#submit {
	width:10em;
	height:3em;
	background:#666666;
	color:#fff;
	border:0;
	text-align:center;
}
#submit_conf {
	width:14em;
	height:3em;
	background:#666666;
	color:#fff;
	border:0;
	text-align:center;
}

body#mailform {
	display:flex;
	flex-direction:column;
	min-height:100vh;
}
body#mailform section {
	padding:2em 2em;
}
body#mailform h1 {
	font-weight:bold;
	font-size:3em;
}
body#mailform footer {
	margin-top:auto;
}

/* *******************************************************

			フッター

******************************************************* */

footer {
	width:100%;
	background:#fff;
}

.footer_flex {
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.footer_logo {
	order:-3;
	flex-basis:21%;
	text-align:center;
}
.footer_logo img {
	margin:0 auto;

}
.footer_nav {
	order:-2;
	flex-grow:1;
	padding-right:10%;
}
.footer_nav ul {
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-weight:bold;
	color:#613b22;
	margin-top:1em;
}

.footer_insta img {
	width:100%;
	height:2em;
}
.copyright {
	text-align:center;
	font-size:0.9em;
	margin-top:1.0em;
	color:#613b22;
}

.footer_shop {
	order:-1;
	flex-basis:10%;
	background:#614021;
	text-align:center;
	border-top:3px solid #614021;
	border-bottom:3px solid #614021;
}
.footer_shop img {
	width:49%;
	height:auto;
	margin:0 auto;
	padding:2em 0;
}

/* *******************************************************

		　　　メディアクエリ

******************************************************* */

/* タブレット（縦）・スマホ（縦／横） */
@media only screen and (max-width: 920px) {

	/* ===============================================

		　　　ハンバーガーアイコン

	================================================ */
	nav {
		position:static;
	}

	.menu_button {
		display:flex;
		align-items:center;
		justify-content:flex-end;
		font-weight:bold;
		position:fixed;
		top:0;
		right:0;
		z-index:10;
		width:3em;
		margin-left:auto;
		padding:1.5em 1em;
	}

	/* 3本線 */
	.menu_button span.menu_icon,
	.menu_button span.menu_icon:before,
	.menu_button span.menu_icon:after {
		content:'';
		display:block;
		height:2px;
		width:1.5em;
		border-radius:3px;
		background-color:#707070;
		position:absolute;
	}
	.menu_button span.menu_icon:before {
		bottom:8px;
	}
	.menu_button span.menu_icon:after {
		top:8px;
	}

	/* メニューを画面外へ隠しておく */
	nav {
		width:45%;
		position:fixed;
		top:0;
		left:100%;
		z-index:-1;
		transition:all 0.5s;/*アニメーション設定*/
	}

	/* ------------------------------------------------
		  クリックしてメニューを表示中
	------------------------------------------------ */

	/* 3本線を×に切り替え */
	#menu_check:checked ~ .menu_button span.menu_icon {
		background-color:rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
	#menu_check:checked ~ .menu_button span.menu_icon::before {
		bottom:0;
		transform:rotate(45deg);
	}
	#menu_check:checked ~ .menu_button span.menu_icon::after {
		top:0;
		transform:rotate(-45deg);
	}

	/* 隠しておいたメニューを画面内へ */
	#menu_check:checked ~ nav {
		left:55%;
		z-index:1;
	}

	/* ===============================================

		　　　　　基本レイアウト

	================================================ */
	
	.inner {
		width:100%;
	}

	h2 {
		font-size:1.2em;
		padding-top:2em;
	}
	h3 {
		font-size:1.3em;
	}

	h2 span ,
	h3 span {
		display:block;
	}

	/* ===============================================

		　　　　　　ヘッダー

	================================================ */

	#page_name {
		display:none;
	}

	body#product::before {
		background:url('img/product_bg_sp4.jpg') top / auto 100% no-repeat #fff;
	}


	#index h1#title {
		width:42.1vw;
		top:34%;
	}
	#product h1#title {
		width:100%;
		bottom:80%;
		font-size:1.4em;
		line-height:1.6em;
	}
	#product h1#title span {
		display:block;
	}

	#story h1#title {
		width:31.8vw;
		margin:2.5em 3em;
	}

	.onlineshop {
		margin-bottom:6%;
	}
	#story .onlineshop {
		display:none;
	}


	/* ===============================================

		　　　　　　　HOME

	================================================ */

	.flexbox_layer_right {
		display:block;
		padding:0 0 20% 0%;
	}
	.flexbox_layer_right_txt {
		margin:0 2em;
		padding:0;
	}
	.flexbox_layer_right_img {
		margin-left:2em;
		padding:0;
	}

	.top_layer_right {
		top:70%;
		right:0;
	}

	#index_product_img1 {
		width:76%;

	}
	#index_product_img2 {
		width:72%;
		margin:0% 28% 0 0%;
	}

	
	/* しおり（右寄せ） */
	.bookmark_left {
		margin:3em 0 3em;
	}


	.flexbox_layer_left {
		display:block;
		padding:0 0 20% 0%;
		margin-right:2em;
	}
	.flexbox_layer_left_txt {
		margin:0 2em;
		padding:0;
	}
	.flexbox_layer_left_img {

	}

	.top_layer_left {
		top:70%;
		left:auto;
		right:0;
	}

	#index_story_img1 {
		width:76%;
	}
	#index_story_img2 {
		width:72%;
		margin:0% 0% 0 0%;
	}

	/* しおり（左寄せ） */
	.bookmark_right {
		margin:3em 0 3em;
	}



	section#index_healthy h2 {
		margin:0em 0 1em;
	}
	.index_grid {
		display:block;
	}
	.index_grid img {
		margin:2em 0;
	}
	#grid_img3 {
		padding-bottom:0;
	}
	#grid_txt1 ,
	#grid_txt2 ,
	#grid_txt3 {
		width:100%;
		padding:0 2em;
	}

	/* ===============================================

		　　　　　　　PRODUCT

	================================================ */

	.product_flex {
		display:block;
		padding-bottom:1em;
	}

	.product_grid {
		display:block;
		margin-left:0;
	}
	.product_grid h2 {
		font-size:1.3em;
		line-height:1.6em;
	}

	.butter_txt ,
	.flour_txt ,
	.pineapple_txt {
		margin-top:2em;
		padding-bottom:3em;
	}
	.bake_txt {
		margin-top:6em;
		padding-bottom:3em;
	}


	#product_coco_bg img {
		bottom:1em;
		right:1em;
	}

	.coco_about_txt_inner {
		width:100%;
		padding:0 2em;
	}

	.coco_about_txt_inner h2 {
		text-align:center;
		margin:0 auto;
		padding:4em 0;

	}

	#product_coco_about {
		display:block;
	}
	
	section#product_coco_banner .half_block {
		width:100%;
		margin-top:2em;
	}
	
	/* ===============================================

		　　　　　　　STORY

	================================================ */

	#side_story_body {
		padding:1em 0;
	}
	#side_story_body h2 img {
		width:70%;
	}
	.side_story_grid {
		display:block;
	}
	.side_story_txt,
	.side_story_img {
		width:100%;
		padding:0 2em;
		margin:0 auto 2em;
	}

	#our_history_body {
		padding:3em 0 3em;
	}
	.our_history_grid {
		display:block;
		width:100%;
		padding:0 2em;
	}
	.our_history_grid p {
		margin:0 0em;
	}
	.our_history_txt1 ,
	.our_history_txt2 ,
	.our_history_txt3 ,
	.our_history_txt4 {
		width:100%;
	}

	
	.our_history_img1 ,
	.our_history_img2 ,
	.our_history_img3 ,
	.our_history_img4 {
		width:100%;
		margin:3em 0;
	}

	/* ===============================================

		　　　　　　　ACCESS

	================================================ */

	body#access  h1 {
		font-size:2em;
		padding:2em 0 0 0;
	}

	#access_add {
		width:100%;
		padding:0 2em;
	}
	#access_add_body {
		display:block;
	}
	.googlemap {
		max-width:100%;
	}

	#access_contact {
		width:100%;
		padding:0 2em 3em;
	}
	#access_contact form {
		width:100%;
	}

	body#mailform section {
		padding:0.5em 2em 2em;
	}
	body#mailform h1 {
		font-size:2em;
		padding:2em 0 0 0;
	}

	/* ===============================================

		　　　　　　　フッター

	================================================ */

	.footer_flex {
		flex-wrap:wrap;
	}
	.footer_logo {
		flex-basis:50%;
	}
	.footer_logo img {
		width:20%;
	}
	.footer_shop {
		flex-basis:50%;
	}
	.footer_shop img {
		width:20%;
		padding:1em 0;
	}
	.footer_nav {
		order:0;
	}
	.footer_nav {
		flex-grow:0;
		flex-basis:90%;
		padding:0;
		margin:0 auto;
	}
	.footer_nav li {
		padding:0 0.5em;
		font-size:0.8em;
	}
	.copyright {
		font-size:0.7em;
		padding:2em 0 1em;
	}

}