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

/*===============================================
●共通
===============================================*/
.contentsTop p a.pcNoCall {
	text-decoration: none;
	color: #778288;
}
.margin2 {line-height: 2;}

/* allergyForm
-----------------------------------------------*/
#allergyForm {background-color: #fff;}
#allergyForm .formTable {table-layout: fixed;}
#allergyForm .formTable td,
#allergyForm .formTable td input,
#allergyForm .formTable td textarea {
	color: #636b70;
	border-radius: unset;
	padding: 0.5em;
}
#allergyForm .formTable td input::placeholder {color: #c0c0c0;}
#allergyForm .formTable td input::-ms-input-placeholder {color: #c0c0c0;}
#allergyForm .formTable td input:-ms-input-placeholder {color: #c0c0c0;}
#allergyForm .formTable .restaurantList,
#allergyForm .formTable .itemList {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#allergyForm .restaurantSo,
#allergyForm .restaurantAqua {
	display: flex;
	flex-wrap: wrap;
}
#allergyForm .formTable .itemLabel {
	display: block;
	text-align: center;
	line-height: 36px;
	height: 36px;
	border: 1px solid #778288;
	transition: all 0.3s;
}
#allergyForm .formTable .checkItem {
	position: absolute;
	z-index: -1;
}
#allergyForm .formTable .checkItem:checked + .itemLabel {
	color: #fff;
	background-color: #778288;
}
#allergyForm .formTable .colorcaution {margin-top: 0.5em;}
#allergyForm .formTable .colorcaution.lheghtsmall {color: #ff0000;}
#allergyForm .formTable .carefulPerson #sexBox label:first-of-type {margin-left: 1em;}
#allergyForm .formTable .proprietyBox {
	width: 100%;
	height: 0;
	visibility: hidden;
	opacity: 0;
	transition: 0.3s;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#allergyForm .formTable .open {
	height: auto;
	background-color: #eee;
	visibility: visible;
	opacity: 1;
}
#allergyForm .formTable .proprietyBox h4 {
	width: 100%;
	line-height: 1.5;
	border-bottom: 1px solid #fff;
	display: flex;
	justify-content: space-between;
}
#allergyForm .formTable .proprietyBox div p {display: inline;}
#allergyForm .formTable .reading {
	padding: 2em 1em;
	margin-bottom: 1em;
	border: 3px double #ccc;
}
#allergyForm .formTable .reading .readingTitle {
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
	margin-bottom: 0.5em;
}
#allergyForm .formTable .reading ul li {
	font-size: 1.1em;
	line-height: 1.75;
	text-indent: -1em;
	padding-left: 1em;
}
#allergyForm .formTable .reading ul li:not(:last-child) {margin-bottom: 0.5em;}
#allergyForm .btn01 button {background-color: #fff;}
#allergyForm .btn01 button:hover {color: #B0B9BF;}
#allergyForm .btn01 button[disabled] {
	border: 1px solid #ccc;
	pointer-events: none;
	color: #ccc;
}

/* confirmTable */
#allergyForm .confirmTable .allergyItems {
	display: flex;
	flex-wrap: wrap;
}
#allergyForm .confirmTable .allergyItems p {margin-right: 1em;}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px) {
	
	input[type="radio"],
	input[type="checkbox"] {
		height: 1.2em;
		width: 1.2em;
		margin-right: 0.3em;
	}
	
	/* allergyForm
	-----------------------------------------------*/
	#allergyForm {margin-bottom: 5.8em;}
	#allergyForm h3 {
		font-size: 1.5em;
		margin-bottom: 1em;
	}
	#allergyForm p.acenter {
		font-size: 1.15em;
	}
	#allergyForm .widthmax02 {width: 100%;}
	#allergyForm .widthl02 {width: 165px;}
	#allergyForm .formTable {
		width: 90%;
		font-size: 1.15em;
		margin: 0 auto 3.5em;
	}
	#allergyForm .formTable th,
	#allergyForm .formTable td {
		display: block;
		text-align: center;
	}
	#allergyForm .formTable th {padding: 1.5em 1em 1em;}
	#allergyForm .formTable td {
		border-bottom: 1px solid #ccc;
		padding-bottom: 1.5em;
	}
	#allergyForm .formTable .carefulPerson p {margin-bottom: 1.5em;}
	#allergyForm .formTable .open {
		padding: 0.3em 0.5em 0.5em;
		margin-bottom: 0.85em;
		justify-content: space-between;
	}
	#allergyForm .formTable .itemLabel {
		width: 32%;
		margin:  0 0.6% 10px;
	}
	#allergyForm .formTable .proprietyBox > div {
		width: 50%;
		min-width: 180px;
		margin: 0.25em 0;
		text-align: left;
	}
	#allergyForm .formTable .reading ul {text-align: justify;}
	
	/* allergyConfirmWrap
	-----------------------------------------------*/
	#allergyConfirmWrap #formArea {padding-top: 0.5em;}
	#allergyConfirmWrap .pageTitle h1 {padding-left: 0.4em;}
	
	/* confirmTable */
	#allergyConfirmWrap .confirmTable {margin: 0 auto 3.5em;}

	/* --------------------------------------------------------
	英語版ページの微調整
	-------------------------------------------------------- */

	body.englishPage #allergyForm .formTable .itemLabel {
		width: calc((100% - (0.6% * 4)) / 2);
	}
	body.englishPage #allergyForm .formTable .proprietyBox > div {
		width: 100%;
	}
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px) {
	
	input[type="radio"],
	input[type="checkbox"] {
		height: 1.12em;
		width: 1.12em;
		margin-right: 0.5em;
	}
	
	/* メイン画像 */
	.mv {padding :12% 0;}
	
	/* allergyForm
	-----------------------------------------------*/
	#allergyForm {margin-bottom: 7em;}
	#allergyForm #contactInfo {
		font-size: 1.2em;
	}
	#allergyForm p a.pcNoCall {
		font-size: 1.8em;
	}
	#allergyForm p.acenter {
		font-size: 1.2em;
	}
	#allergyForm .widthmax02 {width: 50%;}
	#allergyForm .widthl02 {width: 240px;}
	#allergyForm h3 {
		font-size: 1.8em;
		margin-bottom: 1.8em;
	}
	#allergyForm .formTable {
		font-size: 1.2em;
		border-spacing: 16px;
		border-collapse: inherit;
		width: 100%;
		margin-bottom: 2.1em;
	}
	#allergyForm .formTable th {
		width: 20%;
		text-align: right;
		padding-right: 2em;
	}
	#allergyForm .formTable td {width: 80%;}
	#allergyForm .formTable .itemLabel {
		width: 17%;
		min-width: 50px;
		margin: 0 0 1.5em 10px;
	}
	#allergyForm .formTable .carefulPerson {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	#allergyForm .formTable .carefulPerson p {margin-right: 3%;}
	#allergyForm .formTable .open {
		padding: 0.75em 1em 1em;
		margin-bottom: 1em;
	}
	#allergyForm .formTable .proprietyBox h4 {font-size: 1.25em;}
	#allergyForm .formTable .proprietyBox > div {
		width: 30%;
		min-width: 200px;
		margin: 0.5em 0;
	}
	#allergyForm .formTable .proprietyBox div .itemName {margin-right: 0.5em;}
	
	/* --------------------------------------------------------
	英語版ページの微調整
	-------------------------------------------------------- */

	body.englishPage #allergyForm .formTable .itemLabel {
		width: 30%;
	}
	body.englishPage #allergyForm .formTable .proprietyBox > div {
		width: 50%;
		min-width: 180px;
	}
}