@charset "utf-8";
/* CSS Document */

/*2018/05/28 アレルギーチェック機能のページ複製#112224*/
body #allergycheck,body #allergycheck p,body #allergycheck ul,body #allergycheck li,body #allergycheck dl,body #allergycheck dt,body #allergycheck dd,body #allergycheck h3,body #allergycheck h4{ line-height: 1.5; }
#allergycheck{ margin-bottom: 30px; }
#allergycheck .contents__block__inner{ margin-bottom: 30px; }
#allergycheck section{ margin-bottom: 30px; }
#allergycheck #mainV{ background:#eeeeee; border:none; width:100%; height: 270px;padding-top: 8em;padding-bottom: 2.5em;box-sizing: border-box;}
#allergycheck #mainV div.mainV_inner{ width:950px; margin: 0 auto; text-align: center;}
#allergycheck #mainV div.mainV_inner p{ color:#c98501; font-size: 17px; font-weight: bold;}
#allergycheck #mainV div.mainV_inner img{vertical-align:middle; image-rendering: pixelated;/* CSS4 (Chrome) */}
#allergycheck #mainV .ttl_main{margin:12px auto 0; font-size: 2em; font-weight: bold;}
#allergycheck #mainV .ttl_main span.ttl_txt01{ color:#e19140; padding: 0 46px;}
#allergycheck #mainV .ttl_main span.ttl_txt02{ color:#ffffff; background-color:#e19140; padding: 3px 15px;}
#allergycheck .notice{ display:block; font-size:12px; margin-top:5px;}
#allergycheck ul.symptoms{ background:url("/web/jp/kikaku/images/allergycheck_img01.png") center center no-repeat; position: relative; height: 350px;}
#allergycheck ul.symptoms li{ position:absolute; background-color:#f6dec5; border-radius:5px; padding:5px 15px;}
#allergycheck ul.symptoms li.allergy-eye{ top:0; left:185px;}
#allergycheck ul.symptoms li.allergy-mouth{ top:90px; left:115px;}
#allergycheck ul.symptoms li.allergy-stomach{ top:205px; left:180px;}
#allergycheck ul.symptoms li.allergy-nose{ top:25px; right:145px;}
#allergycheck ul.symptoms li.allergy-skin{ top:140px; right:95px;}
#allergycheck ul.symptoms li.allergy-otherpart{ top:250px; right:175px;}
#allergycheck ul.symptoms li dl{ font-weight:bold; font-size:15px;}
#allergycheck ul.symptoms li dl dt{ font-size:24px; color:#e19140;}
#allergycheck .allergenic_foods{ background-color:#f0f0f1; text-align:center; margin:0 auto; padding: 20px 30px;}
#allergycheck .allergenic_foods h4{ font-weight:bold; font-size:18px;}
#allergycheck .allergenic_foods ul{ background: #ffffff; width: 710px; margin: 10px auto; padding-top: 20px; padding-bottom: 20px; position: relative; border-radius:5px;}
#allergycheck .allergenic_foods ul li{
	float: left;
	position: static;
	display: block;
	width: 14.28%;
	height: 88px;
	padding-top: 68px;
	text-align: center;
	background-position: center 0;
	background-repeat: no-repeat;
	box-sizing: border-box;
}
#allergycheck .allergenic_foods ul li.allergy-buckwheat{
	background-image: url(/web/jp/kikaku/images/allergycheck_img02_buckwheat.png)
}
#allergycheck .allergenic_foods ul li.allergy-peanut{
	background-image: url(/web/jp/kikaku/images/allergycheck_img02_peanut.png)
}
#allergycheck .allergenic_foods ul li.allergy-egg{
	background-image: url(/web/jp/kikaku/images/allergycheck_img02_egg.png)
}
#allergycheck .allergenic_foods ul li.allergy-wheat{
	background-image: url(/web/jp/kikaku/images/allergycheck_img02_wheat.png)
}
#allergycheck .allergenic_foods ul li.allergy-milk{
	background-image: url(/web/jp/kikaku/images/allergycheck_img02_milk.png)
}
#allergycheck .allergenic_foods ul li.allergy-crab{
	background-image: url(/web/jp/kikaku/images/allergycheck_img02_crab.png)
}
#allergycheck .allergenic_foods ul li.allergy-shrimp{
	background-image: url(/web/jp/kikaku/images/allergycheck_img02_shrimp.png)
}
#allergycheck .allergenic_foods p{ text-align:left;}
#allergycheck ul.todo{ background:url("/web/jp/kikaku/images/allergycheck_img03.png") right bottom no-repeat; height: 150px; width: 750px; margin: 0 auto; padding-top: 15px;}
#allergycheck ul.todo li{ font-size:20px; margin-bottom: 15px;}
#allergycheck ul.todo li span{ display:inline-block; background-color:#e19140; font-weight:bold; color:#ffffff; height: 32px; width: 32px; text-align: center; margin-right: 10px; padding-top: 2px;}
#allergycheck .point_txt{ text-align:center; font-size:20px; font-weight:bold; color:#e19140; margin:20px auto;}
#allergycheck img.screen-img{ display: block; margin: 0 auto;}
#allergycheck #aboutFunc .text_read{margin-bottom: 10px;}
#allergycheck .cnv_btn{
	margin: 20px auto 30px;
	text-align: center;
}
#allergycheck .text_read{
	margin: 20px 0 0;
}
@media screen and (min-width:768px) and (max-width:1023px){
	#allergycheck ul.symptoms{
		width: 690px;
		margin: 0 auto;
	}
	#allergycheck ul.symptoms li.allergy-eye{left:65px;}
	#allergycheck ul.symptoms li.allergy-mouth{ left:0;}
	#allergycheck ul.symptoms li.allergy-stomach{ left:60px;}
	#allergycheck ul.symptoms li.allergy-nose{ right:30px;}
	#allergycheck ul.symptoms li.allergy-skin{ right:0px;}
	#allergycheck ul.symptoms li.allergy-otherpart{ right:60px;}
}
@media screen and (max-width:920px){
	#allergycheck #mainV{
		height: auto;
		padding-top: 6.5em;
		padding-bottom: 1.5em;
	}
	#allergycheck #mainV div.mainV_inner{
		width: auto;
	}
	#allergycheck #mainV div.mainV_inner .ttl_main > span{
		display: block;
	}
}
@media screen and (max-width:1023px){
	#allergycheck .allergenic_foods{
		padding: 20px;
	}
	#allergycheck .allergenic_foods ul{
		width: auto;
		height: auto;
	}
	#allergycheck ul.todo{
		width: auto;
	}
	#allergycheck ul.todo li span{
		text-indent: 0;
	}
	#allergycheck #aboutFunc img.screen-img{
		max-width: 100%;
	}
}
@media screen and (max-width:767px){
	.kikaku #allergycheck p.inquiry_btn a{
		width: 100%;
		max-width: 510px;
		font-size: 20px;
		line-height: 1.9;
	}
	#allergycheck ul.symptoms{
		position: relative;
		height: auto;
		margin-bottom: 40px;
	}
	#allergycheck ul.symptoms li{
		position: static;
		margin-bottom: 10px;
	}
	#allergycheck ul.symptoms li.allergy-mouth{
		margin-bottom: 300px;
	}
	#allergycheck .allergenic_foods ul{
		padding-bottom: 0px;
	}
	#allergycheck .allergenic_foods ul li{
		width: 25%;
		margin-bottom: 20px;
	}
	#allergycheck ul.todo{
		height: auto;
		padding-bottom: 120px;
		background-position: center 100%;
	}
}
@media screen and (max-width:567px){
	#allergycheck #mainV div.mainV_inner .ttl_main span.ttl_txt02{
		display: inline-block;
		max-width: 90%;
		vertical-align: top;
		font-size: 20px;
	}
	#allergycheck .allergenic_foods ul li{
		width: 33.33%;
	}
	#allergycheck ul.todo li{
		margin-left: 42px;
		text-indent: -42px;
	}
}