/* ==================== Enjoy.css ==================== */

.Enjoy {
	border: solid #F2F2F2;
	border-width: 5px 0;
}
.Enjoy h3 {
	margin: 0;
}

@media all and (max-width: 640px) {
	.Enjoy {
		margin: 2em 1em;
		padding: 2em 0;
	}
	.Enjoy h3 img {
		width: 23.04em;
	}
}

@media all and (min-width: 641px) {
	.Enjoy {
		width: 46em;
		margin: 2.5em auto;
		padding: 2.5em 0;
	}
}



/* ==================== TopTitle.css ==================== */

.TopTitle h2 {
	font-size: inherit;
	background: url(../images/title_base.png) repeat-x center center;
	background-size: auto 100%;
}

@media all and (max-width: 640px) {
	.TopTitle h2 {
		padding: 0.5em 0;
	}

	.TopTitle h2 img {
		width: 23.97em;
	}
	
}

@media all and (min-width: 641px) {
	.TopTitle h2 {
		height: 11em;
		overflow: visible;
	}
	.TopTitle h2 img {
		vertical-align: top;
		transform: translateY(1em);
	}
}



/* ==================== about.css ==================== */

.About h3 {
	margin: 0;
	color: #964900;

}
.About h4 {
	margin: 0;
	background: url(../images/top_about_cap_base1.svg) no-repeat center bottom;
	color: black;

}
.About h4 span {
	display: inline-block;
}
.About .point > div:nth-of-type(1) h4 {
	background-image: url(../images/top_about_cap_base2.svg);
	color: #FF7B00;
}

.About p {
	margin: 0;
	text-align: left;
}
.About p .link {
	display: block !important;
	margin-top: 0.5em;
}

@media all and (max-width: 640px) {
	.About {
		margin: 2em 1em 0;
	}
	.About h3 {
		font-size: 1.2em;
	}
	.About .point {
		margin-top: 2em;
	}
	.About .point > div {
		margin-top: 1.5em;
		padding: 1.5em 0;
		border: solid #EDD182;
		border-width: 1px 0;
	}
	.About .point > div:not(:last-child) {
		border-bottom: none;
		padding-bottom: 0;
	}
	.About .point h4 {
		padding-bottom: 1em;
		background-size: auto 0.75em;
		font-size: 1.1em;
	}
	.About .point p {
		display: inline-block;
		margin-top: 1em;
		font-size: 0.9em;
	}
}

@media all and (min-width: 641px) {
	.About {
		margin-top: 3em;
	}
	.About h3 {
		font-size: 1.2em;
	}
	.About .point {
		display: table;
		table-layout: fixed;
		width: 42em;
		border-collapse: collapse;
		margin: 2em auto 0;
	}
	.About .point > div {
		display: table-cell;
		vertical-align: top;
		padding: 1em;
	}
	.About .point > div:not(:first-child) {
		border-left: 1px solid #EDD182;
	}
	.About .point h4 {
		padding-bottom: 1em;
		background-size: 90% auto;
		font-size: 1em;
	}
	.About .point p {
		margin-top: 2em;
		font-size: 0.7em;
	}
}



/* ==================== attention.css ==================== */

.Attention {
	margin: 2em auto 0;
}
.Attention h3 {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 100%;
	margin: 0;
}
.Attention .body {
	position: relative;
}

.Attention ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.Attention li {
	position: relative;
	background: #FFFDE0;
	border: 2px solid #EDD182;
	border-radius: 1em;
	padding: 1em;
	padding-left: 3.5em;
	text-align: left;
}
.Attention li:nth-of-type(n+2) {
	margin-top: 1em;
}
.Attention li::before {
	content: '';
	display: block;
	position: absolute;
	left: 1em;
	top: 1em;
	width: 1.75em;
	height: 1.75em;
	background: url(../images/top_attention_check.svg) no-repeat left top;
	background-size: contain;
}
.Attention li .link {
	margin-top: 0.5em;
}

@media all and (max-width: 640px) {
	.Attention {
		margin-top: 7em;
		width: 23em;
	}
	.Attention h3 {
		transform: translate(1em, 9%);
	}
	.Attention h3 img {
		transform-origin: 0 100%;
		transform: scale(1.2);
	}
	.Attention li {
		font-size: 0.9em;
	}
	.Attention li br {
		display: none;
	}
	.Attention li:nth-of-type(3) .link {
		font-size: 90%;
	}
}

@media all and (min-width: 641px) {
	.Attention {
		margin-top: 6em;
		width: 30em;
	}
	.Attention h3 {
		transform: translate(-65%, 25%);
	}
	.Attention li {
		padding-left: 4em;
		font-size: 0.8em;
	}
	.Attention li::before {
		left: 1.75em;
	}
}



/* ==================== caution.css ==================== */

@media all and (max-width: 640px) {
	.Caution {
		margin-top: 3em;
	}
	.Caution img {
		transform: scale(0.9);
	}
}

@media all and (min-width: 641px) {
	.Caution {
		margin-top: 4em;
	}
}



/* ==================== measures.css ==================== */

.Measures h3 {
	color: #964900;

}

.Measures h3 span {
	display: inline-block;
}

.Measures ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
}

.Measures li {
	position: relative;
	padding-left: 1em;
}
.Measures li:nth-of-type(n+2) {
	margin-top: 1em;
}
.Measures li::before {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 0.75em;
	height: 0.75em;
	border-radius: 50%;
	background: #FF7B00;
}

.Measures figure {
	margin: 1em 0 0;
	text-align: center;
}

@media all and (max-width: 640px) {
	.Measures {
		margin-top: 3em;
		padding: 0 1em;
	}
	.Measures h3 {
		margin: 1em 0;
	}
	.Measures li {
		font-size: 0.9em;
	}
}

@media all and (min-width: 641px) {
	.Measures {
		margin-top: 3em;
	}
	.Measures h3 {
		margin: 1.5em 0;
		font-size: 1.2em;
	}
	.Measures ul {
		display: inline-block;
	}
	.Measures li {
		font-size: 0.7em;
		line-height: 1.5;
	}
	.Measures figure {
		margin-top: 2em;
	}
}