/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

/* ==========================================================================
	 font-famiry CSS
	 ========================================================================== */


	 @font-face {
		font-family: "Yu Gothic";
		src: local("Yu Gothic Medium");
		font-weight: 100;
	}
	@font-face {
		font-family: "Yu Gothic";
		src: local("Yu Gothic Medium");
		font-weight: 200;
	}
	@font-face {
		font-family: "Yu Gothic";
		src: local("Yu Gothic Medium");
		font-weight: 300;
	}
	@font-face {
		font-family: "Yu Gothic";
		src: local("Yu Gothic Medium");
		font-weight: 400;
	}
	@font-face {
		font-family: "Yu Gothic";
		src: local("Yu Gothic Bold");
		font-weight: bold;
	}
	@font-face {
		font-family: "Helvetica Neue";
		src: local("Helvetica Neue Regular");
		font-weight: 100;
	}
	@font-face {
		font-family: "Helvetica Neue";
		src: local("Helvetica Neue Regular");
		font-weight: 200;
	}

	body {
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
	}

	.marugo{
		letter-spacing: 2px;
		font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	}

	/* IE10以上 */
	@media all and (-ms-high-contrast: none) {
		body {
			font-family: Verdana, Meiryo, sans-serif;
		}
	}




/* ==========================================================================
	 over resetCSS
	 ========================================================================== */

	 /* 横スクロール制御 */
	 html,body{
		overflow: hidden;
		overflow-x: hidden;
		overflow-y: auto;
	}

	html {
		font-size: 18px;
		line-height: 1;
		color: #FDEFD4;
	}

	::-moz-selection {
		text-shadow: none;
	}

	::selection {
		text-shadow: none;
	}

	body{
		position: relative;
		background-color: #fff;

	}

	body::before{
		position: fixed;
		content: "";
		z-index: -10;
		background: url('../img/backimg_imo.jpg');
		background-size: 100% auto;
		background-position: center;
		display: block;
		width: 100%;
		padding-top: 100%;
		top: 50%;
		transform: translateY(-50%);
		height: 100%;
	}


	hr {
		display: block;
		height: 1px;
		border: 0;
		border-top: 1px solid #ccc;
		margin: 1em 0;
		padding: 0;
	}

	fieldset {
		border: 0;
		margin: 0;
		padding: 0;
	}

	textarea {
		resize: vertical;
	}

	.browserupgrade {
		margin: 0.2em 0;
		background: #ccc;
		color: #000;
		padding: 0.2em 0;
	}

	p{line-height: 2; margin:0;}

	@media only screen and (max-width: 736px) {
		html {
			font-size: 14px;
		}
	}

/* ==========================================================================
	 共通CSS
	 ========================================================================== */

	 img{max-width: 100%;}

	 a{
		text-decoration: none;
		-webkit-transition: all .3s cubic-bezier(.55,0,.1,1);
		transition: all .3s cubic-bezier(.55,0,.1,1);
		opacity: 1;
	}

	a:hover{
		opacity: 0.7;
	}

	a,
	a:link,
	a:hover,
	a:visited,
	a:active{
		color: #FDEFD4;
	}

	.common_wrap{
		max-width: 1000px;
		margin: 0 auto;
		display: block;
	}

	/* clearfix */
	.clear::after{
		content: " ";
		clear: both;
		display: block;
	}

	/* hidden */

	.sp_only,.sp_only img{display: none !important;}



	@media only screen and (max-width: 736px) {
	 .common_wrap{
			max-width: 100%;
		}

		img{margin:0 auto;display: block;}

		.pc_only,.pc_only img{display: none !important;}
		.sp_only,.sp_only img{display: block !important;}

	}

/* ==========================================================================
	 text CSS
	 ========================================================================== */

	 .t_center{text-align: center;}

/* ==========================================================================
	 layout CSS
	 ========================================================================== */

	 .col{
		display: flex;
	}

	.col2{
		width: 50%;
	}

	/* margin */
	.m0{margin-bottom: 0;}
	.m1{margin-bottom: 1rem;}
	.m2{margin-bottom: 2rem;}
	.m3{margin-bottom: 3rem;}
	.m4{margin-bottom: 4rem;}



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

		.col{
			display: block;
		}

		.col2{
			display: block;
			width: 100%;
		}

		/* margin */
		.m1{margin-bottom: 0.5rem;}
		.m2{margin-bottom: 1rem;}
		.m3{margin-bottom: 1.5rem;}
		.m4{margin-bottom: 2rem;}

		.m2sp{margin-bottom: 2rem;}
		.m4sp{margin-bottom: 4rem;}


	}
	
@keyframes loading {
  from {
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loading {
  from {
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
#loading {
	position: fixed;
	top:0; left: 0; right:0; bottom:0;
	background: #E1A242;
	z-index: 9999;
}
#loading div {
	width: 128px; height: 128px;
	position: absolute;
	top: 50%; left: 50%;
	margin-top: -64px;
	margin-left: -64px;
	-webkit-animation: loading 3s linear infinite;
	animation: loading 3s linear infinite;
}

/* ==========================================================================
	 header CSS
	 ========================================================================== */
	 .bridge_back{
		position: relative;
		padding: 40px 0 394px;
		background: #fdefd4 url('../img/bridge_backimg.png') no-repeat;
		/* background-size: 100%; */
		background-position: center bottom 14px;
	}

	.bridge_back::after{
		position: absolute;
		content: "";
		display: block;
		width: 150%;
		height: 19px;
		bottom: -19px;
		background: url('../img/line_wave.png');
		background-repeat: repeat-x;
		z-index: 1;
	}

	.company_name{
		position: relative;
		display: table;
		width: auto;
		margin:0 auto 20px;
	}
	.logo_title{
		position: relative;
		display: inline-block;
		width: auto;
	}
	.company_name::before,
	.company_name::after{
		position: absolute;
		top: 0;
		content: "";
		display: block;
		max-width: 786px;
		width: 100vw;
		height: 76px;
	}

	.company_name::before{
		background: url('../img/company_side_r.png') repeat-x;
		background-size: contain;
		background-position: center left;
		left: 320px;
	}
	.company_name::after{
		background: url('../img/company_side_l.png') repeat-x;
		background-size: contain;
		background-position: center right;
		right: 320px;
	}

	.logo_title span{
		display: block;
		width: 249px;
		position: absolute;
		bottom: -60px;
		right: -90px;
	}

	.logo_title .menu{
		position: absolute;
		top: -10px;
		right: -214px;
	}
	.logo_title .menu a{display: block; margin-bottom: 12px;}

/* goCart */
#goCart {
	margin: 0 auto;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	position: fixed;
	right: 10px;
	bottom: 120px;
	z-index: 10000;
	transition: 0.4s;
	text-align: center;
}
#goCart.sc { opacity: 1; }

#goCart a {
	padding: 12px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #e95513;
	box-sizing: border-box;
	display: block;
}
#goCart img {
	display: block;
	margin: 3px auto 7px;
}
@media (max-width: 480px) {
	#goCart {
		bottom: 90px;
		width: 80px;
		height: 80px;
	}
	#goCart a {
		width: 80px;
		height: 80px;
		font-size: 12px;
	}
	#goCart img {
		margin: 0px auto 5px;
	}
}



	/* SNSリンク */
	.sns_link{
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 10000;
		text-align: center;
		margin: 0;
	}

	.sns_link li:not(:last-child){margin-bottom: 10px;}


@media only screen and (max-width: 1100px) {
	.bridge_back::after{
		bottom: -18px;
	}
}

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

		.bridge_back{
			padding: 20px 0 120px;
			background: #fdefd4 url('../img/bridge_backimg.png') no-repeat;
			background-size: 200%;
			background-position: center bottom;
		}

		.bridge_back::after{
		width: 200%;
		height: 19px;
		left: -50%;
	}

		.company_name{
			display: table;
			width: 60%;
		}

		.company_name::before,
		.company_name::after{
			position: absolute;
			top: 0;
			content: "";
			display: block;
			max-width: 786px;
			width: 50vw;
			height: 38px;
		}

		.company_name::before{left: 100%;}
		.company_name::after{right: 100%;}

		.logo_title{width: 95%;}

		.logo_title span{
			display: block;
			width: 70%;
			position: static;
			margin: 0 auto 10px;
			padding-top: 10px;
		}

		.logo_title .menu{
			position: static;
			display: table;
			margin: 0 auto;
		}

		.logo_title .menu li{display: table-cell; padding:0 6px;}
		.logo_title .menu a{display: block; margin-bottom: 12px;}

		/* SNSリンク */
		.sns_link img{width: 70%;}
		.sns_link{
			bottom: 10px;
			right: 10px;
		}

	}

/* ==========================================================================
	 main CSS
	 ========================================================================== */

	 /* しばいぬなると ---------------------------------------------------------- */
	 .naruto_area{
		background: url('../img/backimg_umi.jpg') no-repeat;
		background-size: cover;
		padding-bottom: 50px;
	}

	.naruto_area .common_wrap{position: relative;}

	/* アニメーションパーツ */

	/* 犬 */
	.ani_dog{
		display: table;
		position: relative;
		width: auto;
		margin: 0 auto;
		top: -200px;
		z-index: 10;
	}

	@keyframes tail {
		0% { transform:rotateZ(8deg) }
		100% { transform:rotateZ(-15deg) }
	}
	@-webkit-keyframes tail {
		0% { -webkit-transform:rotateZ(8deg) }
		100% { -webkit-transform:rotateZ(-15deg) }
	}
	.ani_tail{
		position: absolute;
		top: -177px;
		left: 20px;
		transform-origin:65% bottom;
		-webkit-animation: tail 3s ease 0s infinite alternate;
		animation: tail 3s ease 0s infinite alternate;
	}

	/* 渦と波 */
	@keyframes fluffy {
		0% { transform:translateX(0) }
		100% { transform:translateX(15px) }
	}
	@-webkit-keyframes fluffy {
		0% { -webkit-transform:translateX(0) }
		100% { -webkit-transform:translateX(15px) }
	}

	.ani_wave_l,
	.ani_wave_r,
	.ani_uzu_l,
	.ani_uzu_r{
		display: inline-block;
		width: auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 1;
		-webkit-animation: fluffy 2s ease 0s infinite alternate;
		animation: fluffy 2s ease 0s infinite alternate;
	}

	.ani_wave_l,
	.ani_wave_r{width: 365px; height: 55px; margin:0 auto;}
	.ani_uzu_l{width: 514px; height: 296px;}
	.ani_uzu_r{width: 361px; height: 227px;}

	.ani_wave_l{
		top: 35px; left: -90%;
		-webkit-animation-delay: .4s;
		animation-delay: .4s;
	}
	.ani_wave_r{top: 35px; right: -90%;
		-webkit-animation-delay: .3s;
		animation-delay: .3s;
	}
	.ani_uzu_l{bottom: -33%; left: -130%;
		-webkit-animation-delay: .8s;
		animation-delay: .8s;
	}
	.ani_uzu_r{top: -55%; right: -145%;
		-webkit-animation-delay: .8s;
		animation-delay: .8s;
	}


	/* プロフィール */
	.profile_box{
		background: url('../img/backimg_profile.jpg');
		border-radius: 1000px;
		padding: 70px 90px;
		position: relative;
		top: -240px;
		z-index: 5;
	}

	.profile_box .col2:first-child{width: 40%; text-align: center; position: relative;}
	.profile_box .col2:last-child{width: 60%;}

	.profile_box .col2:first-child figure{
		position: absolute;
		bottom: 0;
		right: 30px;
	}

	.profile_box .col2:last-child p{
		line-height: 1.4;
		text-align: justify;
	}

	.profile_name{
		position: relative;
		display: inline-block;
		width: auto;
		margin-bottom: 35px;
	}

	/* 足跡 */
	.profile_name .ani_foot_profile{
		position: absolute;
		top: -13px;
		right: -96px;
		width: 80px;
		height: 78px;
	}

	.profile_name .ani_foot_profile span{position: absolute;}

	.profile_name .ani_foot_profile .foot_profile01{bottom:0px; right: 59px; transform: rotate(51deg);}
	.profile_name .ani_foot_profile .foot_profile02{bottom:8px; right: 8px; transform: rotate(34deg);}
	.profile_name .ani_foot_profile .foot_profile03{bottom:60px; right: -2px; transform: rotate(68deg);}

	/* ipad */
	@media only screen and (max-width: 1100px) {

		.ani_uzu_l{bottom: -33%; left: -120%;}
		.ani_uzu_r{top: -55%; right: -130%;}

	}


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

		.naruto_area{
			padding: 0px 10px;
		}

		/* 犬 */
		.ani_dog{
			display: table;
			position: relative;
			width: auto;
			margin: 0 auto;
			top: -122px;
			z-index: 10;
			transform: scale(0.5, 0.5);
		}

		.profile_box{
			background: url('../img/backimg_profile.jpg');
			border-radius: 20px;
			padding: 50px 20px;
			position: relative;
			/* top: -220px; */
		}

		.profile_box .col2:first-child,
		.profile_box .col2:last-child{
			width: 100%;
		}

		.profile_name{
			display: block;
			margin-bottom: 10px;
			margin:0 auto;
		}

		.naruto_sp{width: 70%; margin:0 23% 20px auto;}

		.profile_box .col2:last-child p br{display: none;}

		.name_naruto{width: 80%;}

		/* 足跡 */
		.profile_name .ani_foot_profile{
			position: absolute;
			top: -20px;
			right: -20px;
			width: 80px;
			height: 78px;
			transform: scale(0.6, 0.6);
		}

		.ani_wave_l,
		.ani_wave_r{width: calc(365px / 2); height: calc(55px / 2); margin:0 auto;}
		.ani_uzu_l{width: calc(514px / 2); height: calc(296px / 2);}
		.ani_uzu_r{width: calc(361px / 2); height: calc(227px / 2);}

		.ani_wave_l{top: 35px; left: -90%;}
		.ani_wave_r{top: 35px; right: -90%;}
		.ani_uzu_l{bottom: -66%; left: -88%;}
		.ani_uzu_r{top: auto; bottom: 16%; right: -100%;}

	}


	/* いも背景パッケージ紹介 ---------------------------------------------------------- */

/* .package_area{
	background: url('../img/backimg_imo.jpg');
	background-size: cover;
	} */

	.package_box{
		position: relative;
		display: inline-block;
		transform: translateY(0px);
		opacity: 0;
		transition: all .3s cubic-bezier(.55,0,.1,1);
		z-index: 10;
	}

	.package_box.up{
		transform: translateY(-190px);
		opacity: 1;
	}

	.package_box span{
		display: inline-block;
		width: auto;
		position: absolute;
		top: -90px;
		right: -140px;
	}

	.package_shadow{
		filter: drop-shadow(10px 0 10px rgba(0,0,0,0.4));
	}

	@media only screen and (max-width: 736px) {
		.package_area {
			height: 200px;
		}

		.package_box img{width: 80%;}

		.package_box.up{
			opacity: 1;
		}

		.package_info_sp{
			background: #E95513;
			padding: 10px 20px;
			display: inline-block !important;
			width: auto;
			font-size: 16px;
			border-radius: 50px;
			line-height: 1;
			margin: 0 auto 20px;
		}


	}


	/* ２つの味を食べくらべ ---------------------------------------------------------- */
	.taste_area{
		position: relative;
		z-index: 1000;
		background: url('../img/backimg_taste.jpg');
		padding:60px 0 0;
	}
	.taste_area .common_wrap{
		position: relative;
		max-width: 723px;
		padding-bottom: 60px;
	}

	.package_vari .col2 figure{
		position: relative;
		display: inline-block;
		width: auto;
	}
	.package_vari .col2 figure img{
		filter: drop-shadow(10px 0 10px rgba(0,0,0,0.4));
	}

	.package_vari .col2 span{
		position: absolute;
		bottom: -25px;
		right: -55px;
	}


	.company_name.taste_title::before,
	.company_name.taste_title::after{
		position: absolute;
		top: 0;
		content: "";
		display: block;
		width: 201px;
		height: 199px;
	}

	.company_name.taste_title::before{
		background: url('../img/taste_title_l.png') no-repeat;
		background-size: contain;
		background-position: center left;
		left: -201px;
	}
	.company_name.taste_title::after{
		background: url('../img/taste_title_r.png') no-repeat;
		background-position: center left;
		background-size: contain;
		right: -201px;
	}

	.about_taste{
		color: #F9EFD4;
		font-size: 17px;
		line-height: 1.4;
	}

	.about_taste dl{padding-left: 24px; width: 100%;}
	.about_taste dt{
		border-bottom: 1px dashed #F9EFD4;
		margin-bottom: 6px;
		padding-bottom: 3px;
	}
	.about_taste dt{width: 80%;}
	.about_taste dt span{display:block; font-size: 23px;}
	.about_taste dd{text-align: justify;}

	.naruto_dog_back{
		position: absolute;
		bottom: 0;
		right: -50px;
	}

	/* 美味しい食べ方 */
	.cooking_area{
		position: relative;
		z-index: 1;
		background: url('../img/backimg_tasteabout.jpg');
		padding: 40px 0;
	}

	.cooking_area .common_wrap{
		max-width: 1000px;
		background: #E3A338;
		border-radius: 280px;
		text-align: center;
		padding: 80px 110px;
	}

	/* 足跡上 */
	.ani_foot_taste_top{
		position: absolute;
		top: 0px;
		left: -400px;
		left: -55%;
		width: 187px;
		height: 181px;
	}

	.ani_foot_taste_top span{position: absolute;}

	.ani_foot_taste_top .foot_taste_up01{bottom:0px; right: 0px; transform: rotate(-56deg);}
	.ani_foot_taste_top .foot_taste_up02{bottom:29px; right: 67px; transform: rotate(-17deg);}
	.ani_foot_taste_top .foot_taste_up03{bottom:107px; right: 75px; transform: rotate(-56deg);}
	.ani_foot_taste_top .foot_taste_up04{bottom:98px; right: 162px; transform: rotate(-32deg);}
	.ani_foot_taste_top .foot_taste_up05{bottom:156px; right: 159px; transform: rotate(-60deg);}

	/* 足跡下 */
	.ani_foot_taste_bottom{
		position: absolute;
		bottom: 40px;
		right: -49%;
		width: 123px;
		height: 90px;
	}

	
	.ani_foot_taste_bottom span{position: absolute;}

	.ani_foot_taste_bottom .foot_taste_bottom01{bottom:32px; right: 0px; transform: rotate(-69deg);}
	.ani_foot_taste_bottom .foot_taste_bottom02{bottom:1px; right: 85px; transform: rotate(-42deg);}
	.ani_foot_taste_bottom .foot_taste_bottom03{bottom:64px; right: 97px; transform: rotate(-69deg);}

	/* ipad */
	@media only screen and (max-width: 1100px) {

		/* 足跡上 */
		.ani_foot_taste_top{
			top: -68px;
			left: -200px;
			transform: scale(0.6, 0.6) rotate(20deg);
		}

		/* 足跡下 */
		.ani_foot_taste_bottom{
			bottom: 0px;
			right: -185px;
			transform: scale(0.6, 0.6);
		}

	}

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

		.taste_area{
			padding:80px 0 0;
		}

		.taste_area .common_wrap{padding-bottom: 100px;}

		.taste_copy img{width: 70%;}

		.company_name.taste_title::before,
		.company_name.taste_title::after{
			transform: scale(0.5, 0.5);
			top: -50px;
		}

		.company_name.taste_title::before{left: -80%;}
		.company_name.taste_title::after{right: -80%;}

		.package_vari .col2{margin-bottom: 40px;}

		.package_vari .col2 span{right: -40px;}
		.package_vari .col2 span img{width: 60%;}

		.about_taste{padding: 0 10px;}
		.about_taste figure{margin-bottom: 20px;}
		.about_taste dl{padding-left: 0;}
		.about_taste dt{width: 100%; font-size: 14px;}

		.naruto_dog_back{
			right: -40px;
		}
		.naruto_dog_back img{width: 50%;}

		/* 足跡上 */
		.ani_foot_taste_top{
			top: -129px;
			left: -20px;
			transform: scale(0.5, 0.5) rotate(-27deg);
		}

		/* 足跡下 */
		.ani_foot_taste_bottom{
			bottom: 0px;
			right: 60px;
			transform: scale(0.5, 0.5);
		}


		/* 美味しい食べ方 */
		.cooking_area{
			padding: 20px 10px;
		}

		.cooking_area .common_wrap{
			max-width: 1000px;
			background: #E3A338;
			border-radius: 80px;
			text-align: center;
			padding: 60px 14px;
		}


	}

	/* 商品情報 ---------------------------------------------------------- */

	.iteminfo_area{
		padding: 80px 0px 60px;
		background: url('../img/backimg_iteminfo.jpg');
	}
	.iteminfo_area small {
		color: #F9EFD4;
		font-size: 15.5px;
		line-height: 1.2;
		display: block;
		padding: 10px 70px;
		text-indent: -1em;
	}
	.iteminfo_area .common_wrap{position: relative;}

	.price_info{
		padding: 0 40px;
		color: #F9EFD4;
	}

	.price_info figure{max-width: 317px;}
	.price_info dl{width: calc(100% - 317px); padding-left: 33px; line-height: 1.4;}

	.price_info span.text01{font-size: 35px; font-weight: bold;}
	.price_info span.text02{font-size: 31px; font-weight: bold;}
	.price_info span.text03{font-size: 26px; font-weight: bold;}

	.price_info dt{
		border-bottom: 1px solid #F9EFD4;
		margin-bottom: 14px;
		padding: 1em 0;
	}

	.price_info dt > div{
		position: relative;
		display: inline-block;
		width: auto;
	}

	.price_info span.unuse_info{
		position: absolute;
    	display: block;
    	width: 111px;
    	height: 111px;
    	top: -30px;
    	right: -183px;
    	z-index: 10;
	}

	.price_info dd{
		line-height: 1.7;
		font-size: 15.5px;
		text-align: justify;
	}

	.cv_area{
		color: #946134;
    	max-width: 1000px;
    	background: url(../img/bg_cv.jpg);
    	background-size: cover;
    	border-radius: 280px;
    	text-align: center;
    	padding: 80px 110px;
    	align-items: center;
	}
	.cv_area figure {max-width: 330px;}
	.cv_area figure img {
		filter: drop-shadow(8px 0 8px rgba(0,0,0,0.1));
	}
	.cv_area div {
		padding-left: 33px; 
		line-height: 1.4;
		text-align: left;
	}
	.cv_area p {
		font-size: 35px; 
		font-weight: bold;
		line-height: 1.2;
		text-indent: 1em;

	}
	.cv_area p.item_name {
		border-bottom: 1px solid #946134; 
		padding-bottom: 0.5em;
		margin-bottom: 0.5em;
		text-indent: -1em;
		padding-left: 1em;

	}
	.cv_area p span {font-size: 24px; font-weight: 700;}
	.cv_area .storesjp-button {
		margin-top: 20px;
	}
	.iteminfo_area02 {
		padding: 80px 0px 60px;
		background: url("../img/bg_cv.jpg");
		background-size: cover;
	}
	.iteminfo_area02 small {
		color: #946134;
		font-size: 15.5px;
		line-height: 1.2;
		display: block;
		padding: 10px 70px;
		text-indent: -1em;
	}
	.iteminfo_area02 h4 {
		color: #946134;
		text-align: center;
		font-size: 44px;
		margin: 2em 0;
	}
	.iteminfo_area02 h4:before {
		content: '';
		display: inline-block;
		width: 50px;
		height: 50px;
		background: url("../img/h4_left.png") no-repeat;
		background-size: contain;
		vertical-align: middle;
		margin-right: 20px;
	}
	.iteminfo_area02 h4:after {
		content: '';
		display: inline-block;
		width: 50px;
		height: 50px;
		background: url("../img/h4_right.png") no-repeat;
		background-size: contain;
		vertical-align: middle;
		margin-left: 20px;
	}
	.iteminfo_area02 .price_info{
		padding: 0 40px;
		color: #946134;
	}
	.iteminfo_area02 .price_info dt{
		border-bottom: 1px solid #946134;
	}
	.iteminfo_area02 .cv_area{
		background: url("../img/bg_cv02.jpg");
		color: #F9EFD4;
	}
	.iteminfo_area02 .cv_area p.item_name {
		border-bottom: 1px solid #F9EFD4;
	}
	.postage {
		padding: 80px;
		background: url("../img/story_bg_main.png");
		text-align: center;
		color: #946134;
		font-size: 24px;
	}
	.postage dl {
		border: 5px solid #946134;
		width: 50%;
		margin: 0 auto;
	}
	.postage dt,.postage dd {
		display: inline-block;
		width: 50%;
		line-height: 2.5;
		border: 1px solid #946134;
	}


	.inbox_info{text-align: center;}
	.inbox_info .col2:first-child{ width: calc(100% - 524px);}
	.inbox_info .col2:last-child{max-width: 524px;}

	.inbox_info .col2:first-child span{
		display: inline-block;
		font-size: 30px;
		color: #F9EFD4;
		line-height: 1.6;
		font-weight: bold;
		text-align: left;
		margin: 0 auto;
	}

	.unuse_text{
		font-size: 28px;
		color: #E3A338;
	}

	.link_btn01 a{
		background: #E95513;
		max-width: 100%;
		width: 550px;
		padding: 14px 0;
		display: inline-block;
		font-size: 35px;
		border-radius: 100px;
		line-height: 1;
		font-weight: bold;
		margin: 0 auto;
	}
	.link_btn03 a{
		background: #009245;
		max-width: 100%;
		width: 550px;
		padding: 14px 0;
		display: inline-block;
		font-size: 35px;
		border-radius: 100px;
		line-height: 1;
		font-weight: bold;
		margin: 30px auto 0;
	}


	/* 足跡上 */
	.ani_foot_taste_top.ani_small{
		top: -107px;
		left: auto;
		right: 1%;
		transform: rotate(90deg) scale(0.5, 0.5);
	}

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

		.iteminfo_area .common_wrap,
		.iteminfo_area02 .common_wrap {
			padding:0 10px;
		}
		.iteminfo_area small,.iteminfo_area02 small {
    		font-size: 14px;
			line-height: 1.4;
    		padding: 30px 10px 20px 20px;
		}
		.price_info{
			padding: 0 10px;
			color: #F9EFD4;
		}

		.price_info figure{max-width: auto; width: 100%; margin:0 auto 20px;}
		.price_info dl{width: 100%; padding-left: 0px;}
		.price_info dd {
			font-size: 14px;
		}

		.price_info span.text01,
		.price_info span.text02{font-size: 24px;}

		.price_info dt{text-align: center;}
		.price_info dt > div{transform: translateX(-50px);}
		.iteminfo_area02 .price_info dt > div{transform: translateX(0);}
		.price_info span.unuse_info{
			width: 80px;
			height: 80px;
			right: -100px;
		}
		
		.cv_area {
			border-radius: 50px;
			padding: 50px 20px;
		}
		.cv_area figure {margin-bottom: 30px}
		.cv_area p {
			font-size: 23px; 
		}
		.cv_area p span {font-size: 16px; font-weight: 700;}
		.cv_area div {
			padding-left: 0;
		}
		.cv_area iframe {
			max-width: 100%;
		}
		.iteminfo_area02 h4 {
			font-size: 23px;
			display: flex;
    		justify-content: center;
		}
		.iteminfo_area02 h4:before {
			margin-right: 0;
		}
		.iteminfo_area02 h4:after {
			margin-left: 0;
		}
		.iteminfo_area02 .price_info{
			padding: 0 20px;
		}
		.iteminfo_area02 .cv_area figure {margin: 0 10px 30px;}
		
		.postage {
			padding: 50px 20px;
			font-size: 20px;
		}
		.postage p {
			line-height: 1.4;
		}
		.postage dl {
			width: 100%;
		}

		.inbox_info .col2:first-child{width:100%;}
		.inbox_info .col2:last-child{max-width: auto; width: 100%;}

		.inbox_info .col2:first-child span {
			display: block;
			font-size: 18px;
			text-align: center;
			margin-bottom: 20px;
		}

		.unuse_text {
			font-size: 16px;
			color: #E3A338;
		}

		.link_btn01 a,.link_btn03 a {
			padding: 14px;
			display: block;
			font-size: 20px;
		}

		/* 足跡上 */
		.ani_foot_taste_top.ani_small{
			top: -122px;
			left: auto;
			right: -20px;
			transform: rotate(123deg) scale(0.5, 0.5);
		}

	}

	
	/* あずまやについて ---------------------------------------------------------- */

	.about_azumaya_area{
		background: #E3A338;
		padding: 60px 0;
	}

	.about_azumaya_area h3{
		font-size: 35px;
		color: #946134;
	}

	.about_azumaya_area p{
		line-height: 1.8;
		text-align: justify;
	}

	.link_btn02 a{
		display: inline-block;
		border: 1px solid #FDEFD4;
		padding: 10px;
		line-height: 1;
	}

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

		.about_azumaya_area{
			background: #E3A338;
			padding: 40px 10px;
		}

		.about_azumaya_area h3{font-size: 20px; text-align: center;}
		.about_azumaya_area p br{display: none;}

		.link_btn02 a{
			display: block;
			text-align: center;
		}

	}

	/* お取扱店舗 ---------------------------------------------------------- */

	.bridge_back.shopinfo_area{padding:80px 0 40px;}

	.shopinfo_area h3{
		position: relative;
		display: inline-block;
		width: auto;
		font-size: 35px;
		color: #009245;
		margin: 0 0 30px 40px;
	}

	.shopinfo_area p{
		color: #946134;
		margin: 0 0 30px 40px;
		text-align: justify;
	}

	.store_list{
		background: #009245;
		padding: 30px;
		line-height: 2;
		margin-bottom: 10px;
	}

	.store_list ul{margin:0;}
	.store_list ul.col2:first-child{width: 47%;}
	.store_list ul.col2:last-child{width: 53%;}
	.store_list ul li{font-size: 16px;font-weight:bold;margin:10px;0;}


	.store_list ul li span {font-size: 14px;}

	/* 足跡上 */
	.ani_foot_taste_bottom.ani_small{
		top: -45px;
		right: -129px;
		transform: rotate(120deg) scale(0.55, 0.55);
	}



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

		.bridge_back.shopinfo_area{padding:40px 10px 100px;}

		.shopinfo_area h3{
			font-size: 24px;
			text-align: center;
			margin: 0 0 20px 0px;
		}

		.shopinfo_area p{
			color: #946134;
			margin: 0 0 30px 0px;
		}

		.shopinfo_area p br{display: none;}

		.store_list{
			padding: 10px;
		}

		.store_list ul.col2:first-child,
		.store_list ul.col2:last-child{width: 100%;}

		.store_list ul li{font-size: 14px; text-align: center; line-height: 1.4;}
		.store_list ul li span{display: block; margin-bottom: 10px;}

		/* 足跡上 */
		.ani_foot_taste_bottom.ani_small{
			top: -40px;
			right: -100px;
		}

	}

	/* お問い合わせ ---------------------------------------------------------- */
	.naruto_area.contact_area{
		padding: 100px 0 80px;
	}
	.naruto_area.contact_area .ani_dog{top: 50px;}
	.naruto_area.contact_area .profile_box{top: 0; padding:80px 0;}
	.naruto_area.contact_area .profile_box p{
		font-size: 27px;
		line-height: 1.6;
	}

	.contact_area .ani_wave_l,
	.contact_area .ani_wave_r{
		top: -70px;
	}
	.contact_area .ani_uzu_l{bottom: 12%; left: -80%;}
	.contact_area .ani_uzu_r{top: -68%; right: -95%;}

	/* ipad */
	@media only screen and (max-width: 1100px) {

		.contact_area .ani_uzu_r{top: -65%; right: -80%;}
		
	}

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

		.naruto_area.contact_area{
			padding: 0px 10px 80px;
		}
		.naruto_area.contact_area .ani_dog{top: -89px;}
		.naruto_area.contact_area .profile_box{top: -210px; padding:60px 20px;}
		.naruto_area.contact_area .profile_box p{
			font-size: 18px;
			line-height: 1.6;
			text-align: justify;
		}

		.naruto_area.contact_area .profile_box p br{display: none;}

		.contact_area .ani_wave_l,
		.contact_area .ani_wave_r{
			top: 40px;
		}

		.contact_area .ani_uzu_l{bottom: -95%; left: -60%;}
		.contact_area .ani_uzu_r{top: 73%; right: -68%;}


	}

/* ==========================================================================
	 footer CSS
	 ========================================================================== */
	 footer{
		background: #FDEFD4;
		color: #946134;
		position: relative;
		z-index: 10;
	}

	footer .common_wrap{
		max-width: 800px;
		border-style: solid;
		border-color: #946134;
		border-width: 1px 0;
		padding: 20px 0;
	}
	footer .common_wrap.link_btn03{
		border: none;
	}

	footer .company_name{position: relative; top: -32px;}

	.company_info{
		max-width: 640px;
		margin: 0 auto;
	}

	.company_info th,
	.company_info td{
		padding: 8px 20px;
	}

	.company_info th{text-align: center;}

	.campany_contact li{
		display: inline-block;
		margin: 0 10px;
	}

	.reef_line{
		content: "";
		display: block;
		width: 100vw;
		height: 76px;
		background: url('../img/company_side_l.png') repeat-x;
		background-size: contain;
		background-position: center right;
		margin-bottom: 10px;
	}

	.copyright{
		background: #946134;
		color: #FDEFD4;
		padding: 4px 0;
	}

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

		footer .common_wrap {
			max-width: auto;
			width: 100%;
			padding: 14px;
		}

		footer .company_name{position: relative; top: -16px;}

		.company_info,
		.company_info tbody,
		.company_info tr,
		.company_info th,
		.company_info td{
			display: block;
			padding: 0px;
			line-height: 1.4;
			text-align: left;
		}

		.company_info tr{margin-bottom: 10px;}

		.campany_contact li{
			display: block;
			margin: 0 0 10px;
		}

		.reef_line{
			display: block;
			width: 100vw;
			height: 38px;
		}


	}










/* ==========================================================================
	 Media Queries
	 ========================================================================== */

	 @media print,
	 (-o-min-device-pixel-ratio: 5/4),
	 (-webkit-min-device-pixel-ratio: 1.25),
	 (min-resolution: 120dpi) {

	 }

/* ==========================================================================
	 Print styles
	 ========================================================================== */

	 @media print {
		*,
		*:before,
		*:after {
			background: transparent !important;
			color: #000 !important;
			box-shadow: none !important;
			text-shadow: none !important;
		}

		a,
		a:visited {
			text-decoration: underline;
		}

		a[href]:after {
			content: " (" attr(href) ")";
		}

		abbr[title]:after {
			content: " (" attr(title) ")";
		}

		a[href^="#"]:after,
		a[href^="javascript:"]:after {
			content: "";
		}

		pre,
		blockquote {
			border: 1px solid #999;
			page-break-inside: avoid;
		}

		thead {
			display: table-header-group;
		}

		tr,
		img {
			page-break-inside: avoid;
		}

		img {
			max-width: 100% !important;
		}

		p,
		h2,
		h3 {
			orphans: 3;
			widows: 3;
		}

		h2,
		h3 {
			page-break-after: avoid;
		}
	}


/* ==========================================================================
	 モーダル
	 ========================================================================== */
.modalArea {
  display: none;
  position: fixed;
  z-index: 20000; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 20001px;
  background-color: #fff;
	height : 80%;
  overflow : auto;
	background: url("../img/story_bg_main.png");
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
	color: #946134;
	font-size: 2rem;
  cursor: pointer;
}

@media only screen and (max-width: 736px) {
	.modalWrapper {
		width: 90%;
  	max-width: 90%;
	}
}

/* ボタンスタイル */
button.link_btn02 {
  padding: 10px;
  border: 1px solid #FDEFD4;
  cursor: pointer;
	background: none;
}

#openModal {
}

/*お芋の旅物語*/
.modalContents {
	background: url("../img/story_bg_bottom.png") bottom no-repeat;
	padding: 0 108px 90px;
}
.modalContents .comment_child {
	color: #e3a338;
}
.modalContents .comment_gm {
	color: #946134;
}
.modalContents .firstStory {
	padding-top: 280px;
	background: url("../img/story_img01.png") left 50px no-repeat;
}
.modalContents .secondStory {
	padding-top: 220px;
	background: url("../img/story_img02.png") center 50px no-repeat;
}
.modalContents .caption {
	padding-top: 103px;
	background: url("../img/story_img03.png") center 30px no-repeat;
	text-align: right;
	color: #946134;
}

@media only screen and (max-width: 736px) {
	.modalContents {
		padding: 0 20px 80px;
	}
	.modalContents .firstStory {
		padding-top: 100px;
		background: url("../img/story_img01.png") center 20px no-repeat;
		background-size: 70%;
	}
	.modalContents .secondStory {
		padding-top: 100px;
		background: url("../img/story_img02.png") center 20px no-repeat;
		background-size: 180%;
	}
	.modalContents .caption {
		background: url("../img/story_img03.png") center 30px no-repeat;
		background-size: 50%;
	}
}



/*配送遅延のお知らせモーダル*/
.overlay {
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	position: fixed;
	z-index: 100
}
.overlay .btn_area {
	width: 90%;
	max-width: 1000px;
	height: auto;
	padding: 20px;
	box-sizing: border-box;
	color: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: #fff;
	text-align: center;
	z-index: 200;
}
.overlay .btn_area .ttl {
	font-weight: bold;
	font-size: 1.6rem;
}
.overlay .btn_area p {
	padding: 15px
}
@media only screen and (max-width: 736px) {
	.overlay .btn_area p {
		text-align: left;
		padding: 0 0 .5em 0;
	}
}
.overlay .btn_area button {
	display: block;
	margin: 0 auto;
	background: #333;
	color: #fff;
	padding: 20px 40px;
	border: none
}
.overlay .btn_area button:hover {
	background: #777
}