@charset "UTF-8";




/*
---------------------------------------------------------*/
#pagebody {
	position: relative;
	padding-top: 30px;
}
#pagebody::before {
	position: absolute;
	content: "";
	background: url("../images/allergy/bg1@2x.jpg") no-repeat right top;
	background-size: contain;
	width: 50%;
	height: 20vw;
	right: 0;
	top: 0;
	z-index: -1;
}
.pankuzu {
	margin-top: 0;
}
#about {
	padding-top: 30px;
}
#about .bg {
	position: relative;
	background-image: none;
    padding-bottom: 0;
}
#about h1 {
	text-align: left;
	padding-left: 1.2em;
	padding-top: 0;
	transform: translateY(-0.8em);
	margin-bottom: .4em;
}
#about h1::before {
	width: 1em;
	right: auto;
}


/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
#pagebody {
	padding-top: 3%;
}

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
	
#pagebody {
	padding-top: 3%;
}
#pagebody::before {
	width: 100%;
	height: 50vw;
	opacity: 0.7;
}
#about h1 {
	padding-left: 1.5em;
	margin-bottom: 0;
}

}


/*symptoms
---------------------------------------------------------*/
#symptoms .bg {
	position: relative;
	text-align: center;
	background-color: #FFF;
	padding: 70px 8% 50px;
}
#symptoms .bg::after {
	position: absolute;
	content: "";
	background-color: #FFF;
	width: 100%;
	height: min(6.5vw,100px);
	left: 0;
	top: calc(100% - 1px);
	clip-path: polygon(0 0, 50% 100%, 100% 0);
}
#symptoms .fukidashi {
	position: relative;
	display: inline-block;
	font-size: 205%;
	font-size: min(235%,3.5vw);
	letter-spacing: .2em;
	line-height: 1.4;
	padding: 0 1em;
	margin-bottom: 1em;
}
#symptoms .fukidashi::before,
#symptoms .fukidashi::after {
	position: absolute;
	content: "";
	background-color: #333;
	width: 1px;
	height: 1.8em;
	bottom: 0;
}
#symptoms .fukidashi::before {
	left: 0;
	transform: rotate(-30deg);
}
#symptoms .fukidashi::after {
	right: 0;
	transform: rotate(30deg);
}
#symptoms .fukidashi .ft_azo {
	color: #7dba57;
	font-size: 45%;
	letter-spacing: .3em;
	line-height: 1.5;
	margin-top: .7em;
}
#symptoms .fukidashi + p {
	text-align: left;
	margin-bottom: 2em;
}
#symptoms .symp_list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#symptoms .symp_list > li {
	width: 31%;
	max-width: 300px;
	background-color: rgba(125,186,87,0.1);
	border-radius: 15px;
	box-sizing: border-box;
	padding: 25px 0;
}
#symptoms .symp_list > li:nth-of-type(n+4) {
	margin-top: 4.5%;
}
#symptoms .symp_list img {
	width: 68%;
}
#symptoms .symp_list p {
	position: relative;
	font-size: min(1.8vw,129%);
	letter-spacing: .1em;
	line-height: 1.4;
	height: 3.2em;
}
#symptoms .symp_list p span {
	display: block;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	box-sizing: border-box;
	padding: 0 .5em;
}


/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

#symptoms .bg {
	padding: 7% 6% 5%;
}
#symptoms .symp_list > li:nth-of-type(n+4) {
	margin-top: 3%;
}
#symptoms .symp_list p {
	font-size: 2vw;
	letter-spacing: .05em;
}

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
	
#symptoms .bg {
	padding: 10% 5% 8%;
}
#symptoms .bg::after {
	height: 10vw;
}
#symptoms .fukidashi {
	font-size: 140%;
	letter-spacing: .1em;
}
#symptoms .fukidashi .ft_azo {
	letter-spacing: .25em;
}
#symptoms .symp_list {
	justify-content: center;
}
#symptoms .symp_list > li {
	width: 48.5%;
	padding: 5% 0;
}
#symptoms .symp_list > li:nth-of-type(even) {
	margin-left: 3%;
}
#symptoms .symp_list > li:nth-of-type(n+3) {
	margin-top: 3%;
}
#symptoms .symp_list img {
	width: 85%;
}
#symptoms .symp_list p {
	font-size: 85%;
	letter-spacing: normal;
}

}

/*cause
---------------------------------------------------------*/
#cause .bg {
	color: #FFF;
	background: #7dba57 url("../images/allergy/cause_bg@2x.jpg") no-repeat center bottom;
	background-size: 100% auto;
	padding: min(10%,150px) 0 100px;
}
#cause .cause_title {
	text-align: center;
	font-size: min(295%,4.0vw);
	letter-spacing: .15em;
	line-height: 1.6em;
	margin-bottom: .5em;
}
#cause .cause_title span {
	display: inline-block;
	font-size: 140%;
	letter-spacing: .15em;
	line-height: 1.6em;
	transform: translateY(.1em);
	position: relative;
}
#cause .cause_title span.dot::before {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #f8e247;
	left: calc(50% - .05em);
	bottom: 100%;
	transform: translateX(-50%);
}
#cause .cause_title img {
	display: inline-block;
	width: 1.7em;
	vertical-align: -0.8em;
}
#cause .cause_list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 90%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#cause .cause_list > li {
	width: 22%;
}
#cause .cause_list > li:nth-of-type(n+5) {
	margin-top: 3.5%;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
#cause .cause_title {
	font-size: 4.5vw;
	letter-spacing: .1em;
}
#cause .cause_title span {
	letter-spacing: .1em;
}
#cause .cause_title span.dot::before {
	width: 6px;
	height: 6px;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
	
#cause .bg {
	padding: 15% 0 12%;
}
#cause .cause_title {
	font-size: 170%;
	letter-spacing: .1em;
}
#cause .cause_title span {
	letter-spacing: .1em;
}
#cause .cause_title span.dot::before {
	width: 6px;
	height: 6px;
	left: calc(50% - .05em);
	bottom: calc(100% - .1em);
}
#cause .cause_list {
	width: 90%;
}
#cause .cause_list > li {
	width: 31%;
}
#cause .cause_list > li:nth-of-type(n+4) {
	margin-top: 3.5%;
}

}


/*kind
---------------------------------------------------------*/
#kind .checkup {
	background-color: #f7f2e6;
	padding: 40px 4.5%;
}
#kind .checkup dt {
	font-size: min(170%,2.8vw);
	letter-spacing: .15em;
	line-height: 1.6em;
	padding-left: .5em;
	padding-bottom: .5em;
	border-bottom: 1px solid #7dba57;
	margin-bottom: .8em;
}
#kind .checkup dt .ft_azo {
	position: relative;
	display: inline-block;
	color: #7dba57;
	font-size: 155%;
	letter-spacing: normal;
	line-height: 1;
	vertical-align: -0.2em;
	padding: .35em .5em 0;
	margin-right: .5em;
}
#kind .checkup dt .ft_azo::before {
	position: absolute;
	content: "";
	background: url("../images/allergy/check.svg") no-repeat center top;
	background-size: contain;
	width: 100%;
	height: .5em;
	left: 0;
	top: 0;
}
#kind .checkup dd {
	margin-bottom: 2em;
}
#kind .checkup dd:last-of-type {
	margin-bottom: 0;
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
	
#kind .checkup {
	padding: 7% 5%;
}
#kind .checkup dt {
	font-size: 120%;
	letter-spacing: .05em;
	padding-left: 0;
}
#kind .checkup dt .ft_azo {
	font-size: 140%;
	margin-right: .3em;
}
#kind .checkup dd {
	margin-bottom: 1.5em;
}

}


/*
---------------------------------------------------------*/

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
}