@charset "utf-8";

@keyframes Swing{
	0% { transform: rotate(0deg); }
	20% { transform: rotate(10deg); }
	40% { transform: rotate(-8deg); }
	60% { transform: rotate(6deg); }
	80% { transform: rotate(-4deg); }
	100% { transform: rotate(0deg); }
}
@keyframes Scale{
	0% { transform: scale(0.5); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1.0); }
}



/*------------------------------------------
PC
------------------------------------------*/
@media print, screen and (min-width: 768px){

	/*--------------------------------
		header
	--------------------------------*/
	#pro_header{
		width: 100%;
		background-image: url("../images/bg_products.png");
		background-position: center center;
		margin-bottom: 80px;
	}
	#pro_header_inner{
		position: relative;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
		text-align: center;
	}
	#pro_logo{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
	#pro_logo a{
		display: inline-block;
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
	#pro_logo a:hover img{
		opacity: 0.8;
	}
	#pro_maintitle{
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		transform: rotate(.03deg);
		font-weight: bold;
		font-size: 60px;
		color: #3e0000;
	}
	
	/*--------------------------------
		products fd,ao
	--------------------------------*/
	.pro_cont{
		width: 100%;
	}
	.dot_line{
		border-bottom: dashed 1px #c2c4c4;
	}
	.pro_box{
		display: flex;
	}
	.name{
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		transform: rotate(.03deg);
		font-weight: bold;
	}
	.pro_box .pro_txt{
		flex: 1;
	}
	.name span{
		position: relative;
		display: inline-block;
	}
	.name span:before{
		position: absolute;
		content: "";
		display: inline-block;
	}
	.info{
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		transform: rotate(.03deg);
		font-weight: bold;
		color: #331d06;
	}
	.pro_tsukuba{
		position: relative;
	}
	.pro_tsukuba img{
		position: absolute;
		top: 0;
		left: 0;
		transform: rotate(0deg);
		transform-origin: center top;
		z-index: 2;
	}
	.pro_tsukuba.active img{ animation: Swing 1.5s ease-in-out 0s 1 forwards; }
	
	/*--------------------------------
			products fd,ao,ssn
	--------------------------------*/
	.fd_continner,
	.ssn_continner{
		width: 100%;
		max-width: 900px;
		margin: 160px auto 0 auto;
		padding: 0 10px;
	}
	.fd_products,
	.ssn_products{
		position: relative;
		margin-bottom: 11.3636%;	/* 100/880 */
	}
	.fd_products:nth-of-type(2n+1),
	.ssn_products:nth-of-type(2n+1){
		padding-left:80px;
	}
	.fd_products:nth-of-type(2n),
	.ssn_products:nth-of-type(2n){
		padding-right:80px;
	}
	.fd_products:nth-of-type(2n+1) .pro_tsukuba,
	.ssn_products:nth-of-type(2n+1) .pro_tsukuba{
		position: absolute;
		top: 0;
		left: 0;
		width: 59px;
	}
	.fd_products:nth-of-type(2n) .pro_tsukuba,
	.ssn_products:nth-of-type(2n) .pro_tsukuba{
		position: absolute;
		top: 0;
		right: 0;
		width: 59px;
	}
	.fd_products .pro_box .pro_img,
	.ssn_products .pro_box .pro_img{
		width: 25%;
	}
	.fd_products:nth-of-type(2n+1) .pro_txt,
	.ssn_products:nth-of-type(2n+1) .pro_txt{
		padding-top: 5.6818%;	/* 50/880 */
		padding-left: 5.6818%;	/* 50/880 */
	}
	.fd_products:nth-of-type(2n) .pro_txt,
	.ssn_products:nth-of-type(2n) .pro_txt{
		padding-top: 5.6818%;	/* 50/880 */
		padding-right: 5.6818%;	/* 50/880 */
	}
	.fd_products .name,
	.ssn_products .name{
		margin-bottom: 5.0847%;	/* 30/590 */
		font-size: 40px;
		padding-left: 60px;
	}
	.fd_products:nth-of-type(2n) .name,
	.ssn_products:nth-of-type(2n) .name{
		text-align: right;
	}
	.fd_products .info,
	.ssn_products .info{
		margin-bottom: 3.3898%;	/* 20/590 */
		font-size: 18px;
	}
	.nf_detail,
	.ao_detail,
	.ssn_detail{
		font-size: 14px;
	}
	.nf_detail dl,
	.ao_detail dl,
	.ssn_detail dl{
		display: inline-block;
		margin-bottom: 5px;
		text-align: center;
	}
	.nf_detail dl dt{
		padding: 5px 15px;
		background: #fea398;
		color: #ffffff;
	}
	.nf_detail dl dd{
		padding: 5px 15px;
		background: #ffe3e0;
	}
	.ao_detail dl dt{
		padding: 5px 15px;
		background: #c2ca39;
		color: #ffffff;
	}
	.ao_detail dl dd{
		padding: 5px 15px;
		background: #edefc3;
	}

	#nf_yuzu .name{ color: #f0cc30; }
	#nf_blueberry .name{ color: #795081; }
	#nf_mikan .name{ color: #e47302; }
	#nf_mango .name{ color: #d89028; }
	#nf_apple .name{ color: #e94632; }
	#ao_mikan .name{ color: #e47302; }
	#ao_tomato .name{ color: #e01e22; }
	#ao_apple .name{ color: #ee493f; }
	#ao_carrot .name{ color: #e95d1d; }

	.fd_products .name span:before,
	.ssn_products .name span:before{
		top: 0;
		left: -60px;
		width: 50px;
		height: 72px;
	}

	#nf_yuzu .name span:before{
		background: url("../images/icon_nf_yuzu.png") center center no-repeat;
		background-size: contain;
	}
	#nf_blueberry .name span:before{
		background: url("../images/icon_nf_blueberry.png") center center no-repeat;
		background-size: contain;
	}
	#nf_mikan .name span:before{
		background: url("../images/icon_nf_mikan.png") center center no-repeat;
		background-size: contain;
	}
	#nf_mango .name span:before{
		background: url("../images/icon_nf_mango.png") center center no-repeat;
		background-size: contain;
	}
	#nf_apple .name span:before{
		background: url("../images/icon_nf_apple.png") center center no-repeat;
		background-size: contain;
	}
	#ao_mikan .name span:before{
		background: url("../images/icon_ao_mikan.png") center center no-repeat;
		background-size: contain;
	}
	#ao_tomato .name span:before{
		background: url("../images/icon_ao_tomato.png") center center no-repeat;
		background-size: contain;
	}
	#ao_apple .name span:before{
		background: url("../images/icon_ao_apple.png") center center no-repeat;
		background-size: contain;
	}
	#ao_carrot .name span:before{
		background: url("../images/icon_ao_carrot.png") center center no-repeat;
		background-size: contain;
	}

	/*--------------------------------
			products season
	--------------------------------*/
	.ssn_detail dl dt{
		padding: 5px 15px;
		background: #e99923;
		color: #ffffff;
	}
	.ssn_detail dl dd{
		padding: 5px 15px;
		background: #f8e0bd;
	}
	
	#ssn_yuzu .name{ color: #f0cc30; }
	
	#ssn_yuzu .name span:before{
		background: url("../images/icon_ssn_yuzu.png") center center no-repeat;
		background-size: contain;
	}
	
	/*--------------------------------
			products gift
	--------------------------------*/
	.gb_continner{
		width: 100%;
		max-width: 1100px;
		margin: 160px auto 100px auto;
		padding: 0 10px;
	}
	.gb_box{
		display: flex;
	}
	.gb_box-nf,
	.gb_box-ao{
		width: 50%;
	}
	.gb_box-nf{ padding-right: 4.6296%;	/* 50/1080 */ }
	.gb_box-ao{ padding-left: 4.6296%;	/* 50/1080 */ }
	.gb_products{
		padding: 0 10px;
		margin-bottom: 20.4081%;	/* 100/490 */
	}
	.gb_products .name{
		position: relative;
		margin-bottom: 3.1914%;	/* 15/470 */
		font-size: 30px;
		padding-left: 110px;
		text-align: center;
	}
	.gb_products .name:before{
		content: "";
		position: absolute;
		background: #8B0000;
		top: -5px;
		left: calc(50% + 140px);
		height: 14px;
		width: 14px;
		transform: rotate(-54deg);
	}
	.gb_products .name:after{
		content: "";
		position: absolute;
		background:#D2B48C;
		top: 12px;
		left: calc(50% + 151px);
		height: 8px;
		width: 8px;
		transform: rotate(-15deg);
	}
	.gb_products .name span{
		padding: 0 5px;
	}
	.gb_products .name span:before{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 5px;
		background: repeating-linear-gradient(-45deg, #8B0000, #8B0000 2px, white 2px, white 4px);
	}
	.gb_products .name img{
		position: absolute;
		top: 0px;
		left: -110px;
		margin-right: 10px;
		box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
	}

	.gb_products .name:before{
		margin-bottom: 3.1914%;	/* 15/470 */
		font-size: 30px;
	}
	ul.gb_box_detail li{
		list-style-type: disc;
		margin-left: 2em;
	}

	ul#page_nav{
		position: fixed;
		width: 60px;
		bottom: 65px;
		right: 0;
		z-index: 2;
	}
	ul#page_nav li{
		display: inline-block;
		width: 100%;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		text-orientation: upright;
		font-size: 14px;
	}
	ul#page_nav li#nf{ background: #fea398; }
	ul#page_nav li#ao{ background: #c2ca39; }
	ul#page_nav li#ssn{ background: #e99923; }
	ul#page_nav li#gb{ background: #d03633; }
	
	ul#page_nav li a{
		display: inline-block;
		width: 100%;
		height: 100%;
		padding: 10px 17px 10px 0;
		color: #ffffff;
	}
	ul#page_nav li a br{
		display: none;
	}
}

/*------------------------------------------
sp
------------------------------------------*/
@media only screen and (max-width: 767px){
	/*--------------------------------
		header
	--------------------------------*/
	#pro_header{
		width: 100%;
		background-image: url("../images/bg_products.png");
		background-position: center center;
		margin-bottom: 40px;
	}
	#pro_header_inner{
		position: relative;
		width: 100%;
		padding: 20px;
		text-align: center;
	}
	#pro_logo{
		position: absolute;
		width: 100px;
		top: 0;
		left: 0;
		z-index: 2;
		line-height: 0;
	}
	#pro_logo a{
		display: inline-block;
		height: 100%;
		background: #ffffff;
	}
	#pro_logo a img{
		width: 100px;
	}
	#pro_logo a:hover img{
		opacity: 0.8;
	}
	#pro_maintitle{
		padding-left: 50px;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		transform: rotate(.03deg);
		font-weight: bold;
		font-size: 40px;
		color: #3e0000;
	}
	
	/*--------------------------------
		products fd,ao
	--------------------------------*/
	.pro_cont{
		width: 100%;
	}
	.dot_line{
		border-bottom: dashed 1px #c2c4c4;
	}
	.pro_box{
		display: flex;
		flex-direction: column;
	}
	.name{
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		transform: rotate(.03deg);
		font-weight: bold;
	}
	.name span{
		position: relative;
		display: inline-block;
	}
	.name span:before{
		position: absolute;
		content: "";
		display: inline-block;
	}
	.info{
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		transform: rotate(.03deg);
		font-weight: bold;
		color: #331d06;
	}
	.pro_tsukuba{
		position: relative;
	}
	.pro_tsukuba img{
		position: absolute;
		top: 0;
		left: 0;
		transform: rotate(0deg);
		transform-origin: center top;
		z-index: 2;
	}
	.pro_tsukuba.active img{ animation: Swing 1.5s ease-in-out 0s 1 forwards; }
	
	/*--------------------------------
			products fd,ao,ssn
	--------------------------------*/
	.fd_continner,
	.ssn_continner{
		width: 100%;
		max-width: 900px;
		margin: 100px auto 0 auto;
		padding: 0 10px 0 10px;
	}
	
	.fd_products,
	.ssn_products{
		position: relative;
		margin-bottom: 19.7183%;	/* 70/355 */
	}
	.fd_products .pro_tsukuba,
	.ssn_products .pro_tsukuba{
		position: relative;
		width: 100%;
		
	}
	.fd_products .pro_tsukuba img,
	.ssn_products .pro_tsukuba img{
		position: absolute;
		left: 18%;
		width: 10%;
		
	}
	.fd_products .pro_box .pro_img,
	.ssn_products .pro_box .pro_img{
		order: 1;
		margin: 0 auto;
		width: 30%;
		height: 100%;
	}
	.fd_products .pro_txt,
	.ssn_products .pro_txt{
		order: 2;
		padding-top: 5.6818%;	/* 50/880 */
	}
	.fd_products .name,
	.ssn_products .name{
		margin-bottom: 5.0847%;	/* 30/590 */
		font-size: 30px;
		padding-left: 60px;
	}
	.fd_products .info,
	.ssn_products .info{
		margin-bottom: 3.3898%;	/* 20/590 */
		font-size: 16px;
	}
	.nf_detail,
	.ao_detail,
	.ssn_detail{
		font-size: 14px;
	}
	.nf_detail dl,
	.ao_detail dl,
	.ssn_detail dl{
		display: table;
		margin-bottom: 1px;
		width: 100%;
		text-align: center;
	}
	.nf_detail dl dt{
		display: table-cell;
		width: 30%;
		padding: 5px 15px;
		background: #fea398;
		color: #ffffff;
	}
	.nf_detail dl dd{
		display: table-cell;
		width: 70%;
		padding: 5px 15px;
		background: #ffe3e0;
		text-align: left;
	}
	.ao_detail dl dt{
		display: table-cell;
		width: 30%;
		padding: 5px 15px;
		background: #c2ca39;
		color: #ffffff;
	}
	.ao_detail dl dd{
		display: table-cell;
		width: 70%;
		padding: 5px 15px;
		background: #edefc3;
		text-align: left;
	}
	
	#nf_yuzu .name{ color: #f0cc30; }
	#nf_blueberry .name{ color: #795081; }
	#nf_mikan .name{ color: #e47302; }
	#nf_mango .name{ color: #d89028; }
	#nf_apple .name{ color: #e94632; }
	#ao_mikan .name{ color: #e47302; }
	#ao_tomato .name{ color: #e01e22; }
	#ao_apple .name{ color: #ee493f; }
	#ao_carrot .name{ color: #e95d1d; }
	
	.fd_products .name span:before,
	.ssn_products .name span:before{
		top: 0;
		left: -60px;
		width: 50px;
		height: 45px;
	}
	
	#nf_yuzu .name span:before{
		background: url("../images/icon_nf_yuzu.png") center center no-repeat;
		background-size: contain;
	}
	#nf_blueberry .name span:before{
		background: url("../images/icon_nf_blueberry.png") center center no-repeat;
		background-size: contain;
	}
	#nf_mikan .name span:before{
		background: url("../images/icon_nf_mikan.png") center center no-repeat;
		background-size: contain;
	}
	#nf_mango .name span:before{
		background: url("../images/icon_nf_mango.png") center center no-repeat;
		background-size: contain;
	}
	#nf_apple .name span:before{
		background: url("../images/icon_nf_apple.png") center center no-repeat;
		background-size: contain;
	}
	#ao_mikan .name span:before{
		background: url("../images/icon_ao_mikan.png") center center no-repeat;
		background-size: contain;
	}
	#ao_tomato .name span:before{
		background: url("../images/icon_ao_tomato.png") center center no-repeat;
		background-size: contain;
	}
	#ao_apple .name span:before{
		background: url("../images/icon_ao_apple.png") center center no-repeat;
		background-size: contain;
	}
	#ao_carrot .name span:before{
		background: url("../images/icon_ao_carrot.png") center center no-repeat;
		background-size: contain;
	}
	
	/*--------------------------------
			products season
	--------------------------------*/
	.ssn_detail dl dt{
		display: table-cell;
		width: 30%;
		padding: 5px 15px;
		background: #e99923;
		color: #ffffff;
	}
	.ssn_detail dl dd{
		display: table-cell;
		width: 70%;
		padding: 5px 15px;
		background: #f8e0bd;
		text-align: left;
	}
	
	#ssn_yuzu .name{ color: #f0cc30; }
	
	#ssn_yuzu .name span:before{
		background: url("../images/icon_ssn_yuzu.png") center center no-repeat;
		background-size: contain;
	}
	
	/*--------------------------------
			products gift
	--------------------------------*/
	.gb_continner{
		width: 100%;
		max-width: 1100px;
		margin: 100px auto 100px auto;
		padding: 0 10px 0 10px;
	}
	.gb_box-nf,
	.gb_box-ao{
		width: 100%;
	}
	.gb_box-nf{ padding-right: 4.6296%;	/* 50/1080 */ }
	.gb_box-ao{ padding-left: 4.6296%;	/* 50/1080 */ }
	.gb_products{
		padding: 0 10px;
		margin-bottom: 20.4081%;	/* 100/490 */
	}
	.gb_products .name{
		position: relative;
		margin-bottom: 3.1914%;	/* 15/470 */
		font-size: 24px;
		padding-left: 80px;
		text-align: center;
	}
	.gb_products .name:before{
		content: "";
		position: absolute;
		background: #8B0000;
		top: -10px;
		left: calc(50% + 100px);
		height: 14px;
		width: 14px;
		transform: rotate(-54deg);
	}
	.gb_products .name:after{
		content: "";
		position: absolute;
		background:#D2B48C;
		top: 7px;
		left: calc(50% + 111px);
		height: 8px;
		width: 8px;
		transform: rotate(-15deg);
	}
	.gb_products .name span{
		padding: 0 5px;
	}
	.gb_products .name span:before{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 5px;
		background: repeating-linear-gradient(-45deg, #8B0000, #8B0000 2px, white 2px, white 4px);
	}
	.gb_products .name img{
		position: absolute;
		width: 80px;
		top: -5px;
		left: -90px;
		margin-right: 10px;
		box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
	}

	.gb_products .name:before{
		margin-bottom: 3.1914%;	/* 15/470 */
		font-size: 30px;
	}
	ul.gb_box_detail li{
		list-style-type: disc;
		margin-left: 2em;
	}

	ul#page_nav{
		display: none;
	}
}