@charset "UTF-8";

/**
 -----Object/Project Style-----
 01.reset
 02.common
 03.header
 04.kv
 05.navi
 06.content
 07.notes
 08.btn
 09.pagetop
 10.footer
 11.hack
 12.responsive
 ------------------------------
**/

html {
	scroll-behavior: smooth;
}

/*** reset ***/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote {
	margin: 0;
	padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	font-size: 100%;
	line-height: 1;
}
fieldset,
img {
	border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style: normal;
	font-weight: normal;
}
ol,
ul {
	list-style: none;
}
table {
	margin: 0;
}
abbr,
acronym {
	border: none;
}
a {
	outline-width: 0;
	color: #dd0000;
}
a:hover {
	color: #a70000;
}
input,
textarea {
	font-size: 120%;
}
select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	border: 0;
	margin: 0;
	padding: 0;
	background: none transparent;
	vertical-align: middle;
	font-size: inherit;
	color: inherit;
	box-sizing: content-box;
}
form {
	overflow: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

:root {
	--color-text: #333333;
	--color-white: #ffffff;
	--color-primary: #fabf1b;
	--color-accent: #fa401b;
}

/*** global ***/
* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
}

/*** common ***/
.ie6_error,
.noScript {
	background: #f66;
	padding: 30px;
	text-align: center;
	font-size: 150%;
	color: var(--color-text);
}

.innerbox {
	width: auto;
	margin: 0 auto;
	padding: 10px;
	overflow: hidden;

	@media (min-width: 600px) {
		width: 850px;
		padding: 60px 15px;
	}
}

#localbody {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'Osaka', Verdana, 'ＭＳ Ｐゴシック', 'MS P Gothic', Arial, Helvetica, sans-serif;
	position: relative;

	i {
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		margin-right: 10px;
	}

	a[href$='.pdf'] {
		padding: 10px 0 10px 0;
		background-image: url('../img/pdficon.png');
		background-repeat: no-repeat;
		background-position: 95% 50%;
	}

	.image {
		text-align: center;
		margin: 15px auto;

		img {
			width: 100%;

			@media (min-width: 600px) {
				width: auto;
			}
		}
	}
}

p.mgn_b {
	margin-bottom: 30px;
	text-align: center;

	&.w_a img {
		width: auto;
	}
}

.img {
	text-align: center;
	margin: 45px 0;
}

/*** header ***/
#localbody .header {
	width: 100%;
	margin: 0 auto;
	padding: 0;

	h1 {
		font-size: 100%;
		font-weight: bold;
		background-color: var(--color-primary);
		text-align: center;
		padding: 15px;
		letter-spacing: 3px;

		@media (min-width: 600px) {
			font-size: 21px;
		}
	}

	&.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 5;
	}
}

/*** kv ***/
.kv {
	h2 {
		margin: 30px auto;
		text-align: center;
		font-size: 140%;
		color: var(--color-text);
		line-height: 1.6;
		letter-spacing: 2px;
		font-weight: bold;

		@media (min-width: 600px) {
			margin: 80px auto;
			font-size: 28px;
			letter-spacing: 5px;
		}

		strong {
			color: var(--color-accent);
			font-weight: bold;
		}
	}
}

/*** navi ***/
.navi {
	width: 100%;
	padding: 0;
	margin: 0 auto;
	overflow: hidden;

	ul {
		width: auto;
		margin: 0 auto;
		overflow: hidden;

		@media (min-width: 600px) {
			width: 850px;
		}

		li {
			width: 30%;
			margin: 0 0 0 10px;
			float: left;
			text-align: center;

			@media (min-width: 600px) {
				width: 32%;
				margin: 0 2% 0 0;
			}

			&:last-child {
				float: right;
				margin: 0 10px 0 0;

				@media (min-width: 600px) {
					margin: 0;
				}
			}

			a {
				padding: 15px 0;
				font-size: 100%;
				font-weight: bold;
				letter-spacing: 0;
				display: block;
				color: var(--color-white);
				text-decoration: none;
				position: relative;
				background-color: var(--color-primary);
				background-image: url('../img/bg.png');
				background-repeat: repeat;
				background-position: 0 0;
				text-shadow: 1px 1px 1px #c18e00;

				@media (min-width: 600px) {
					font-size: 24px;
					letter-spacing: 1px;
				}

				i {
					font-size: 80%;
					margin-right: 5px !important;

					@media (min-width: 600px) {
						font-size: inherit;
						margin-right: 10px !important;
					}
				}

				&::after {
					position: absolute;
					content: '';
					right: 0;
					bottom: 0;
					border-width: 15px 15px 0 0;
					border-style: solid;
					border-color: #e5a800 var(--color-white) var(--color-white) var(--color-white);
				}

				&:hover {
					color: var(--color-text);
					text-shadow: 1px 1px 1px var(--color-white);
				}
			}
		}
	}
}

/*** content ***/
.content {
	margin: 30px 0 0 0;

	&:nth-child(even) {
		background-color: #f1f1f1;
	}

	img {
		width: 100%;

		@media (min-width: 600px) {
			width: auto;
		}
	}

	h3 {
		background-image: url('../img/h3_bg.png');
		background-repeat: no-repeat;
		background-position: 0 0;
		padding: 0 0 0 60px;
		font-size: 30px;
		font-weight: bold;
		color: var(--color-text);
		line-height: 60px;
		text-shadow: 1px 1px 1px var(--color-white);
	}

	p.cath {
		border-radius: 30px;
		width: auto;
		padding: 15px;
		margin: 15px;
		text-align: center;
		font-size: 100%;
		color: #dd0000;
		line-height: 1.6;
		font-weight: bold;
		letter-spacing: 1px;
		background-color: var(--color-white);
		box-shadow: 0 0 10px rgba(102, 102, 102, 0.2);

		@media (min-width: 600px) {
			width: 80%;
			margin: 30px auto;
			font-size: 26px;
			letter-spacing: 5px;
		}

		img {
			vertical-align: middle;
			margin: 0 5px 0 5px;
			width: auto;
		}
	}

	.benepo {
		width: auto;
		display: block;
		margin: 0 auto;

		@media (min-width: 600px) {
			width: 790px;
			display: table;
		}

		p {
			display: block;
			vertical-align: middle;
			font-size: 14px;
			padding: 0 15px;
			font-weight: bold;
			color: var(--color-text);

			@media (min-width: 600px) {
				display: table-cell;
			}

			strong {
				color: var(--color-primary);
				font-weight: bold;
				display: block;
				font-size: 100%;
				margin: 10px auto;
				letter-spacing: 1px;

				@media (min-width: 600px) {
					font-size: 18px;
					margin: 0;
				}
			}

			&.th {
				text-align: center;
				width: auto;
				border-radius: 15px;
				background: linear-gradient(135deg, var(--color-primary) 0%, #fad31b 100%);
				font-weight: bold;
				color: #f6ff00;
				text-shadow: 1px 1px #c18e00;
				letter-spacing: 1px;

				@media (min-width: 600px) {
					width: 15%;
				}

				br {
					display: none;

					@media (min-width: 600px) {
						display: inline;
					}
				}

				strong {
					color: #f6ff00;
					display: inline;
					font-size: 24px;
				}
			}

			span {
				display: block;
				line-height: 1.8;
				font-weight: normal;

				img {
					vertical-align: middle;
					width: auto;
				}
			}
		}
	}

	h4 {
		color: var(--color-accent);
		font-size: 24px;
		text-align: center;
		margin: 60px auto 15px auto;
		border-bottom: 2px dashed var(--color-accent);
		display: block;
		width: 260px;
		line-height: 1.6;
		font-weight: bold;
		letter-spacing: 1px;
	}

	.image {
		img {
			margin: 15px 0 0 0;
		}
	}

	.otherpoint {
		background-color: #f7efe1;
		padding: 30px;
		width: auto;
		margin: 60px auto 30px auto;

		@media (min-width: 600px) {
			width: 730px;
		}

		p {
			font-size: 110%;
			font-weight: bold;
			color: var(--color-text);
			text-align: center;
			letter-spacing: 1px;

			@media (min-width: 600px) {
				font-size: 22px;
			}

			span {
				display: block;
				font-size: 14px;
				font-weight: normal;
				margin-bottom: 30px;
			}
		}
	}

	.otherbnr {
		padding: 30px;
		width: auto;
		display: block;
		margin: 0 auto;

		@media (min-width: 600px) {
			width: 730px;
		}

		p {
			font-size: 18px;
			font-weight: bold;
			color: var(--color-text);
			text-align: center;
			letter-spacing: 1px;
		}

		a {
			text-align: center;

			&:hover {
				opacity: 0.8;
			}
		}
	}

	h5 {
		margin-bottom: 60px;
		color: var(--color-text);
		font-size: 140%;
		font-weight: bold;
		text-shadow: 1px 1px var(--color-white);
		letter-spacing: 2px;
		background-color: var(--color-primary);
		background-image: url('../img/bg.png');
		background-repeat: repeat;
		background-position: 0 0;
		text-align: center;
		padding: 15px;
		line-height: 1.4;

		@media (min-width: 600px) {
			font-size: 28px;
		}
	}

	h6 {
		font-size: 16px;
		color: var(--color-text);
		background-color: var(--color-primary);
		display: block;
		text-align: center;
		padding: 10px;
		width: 120px;
		margin: 0 auto;
	}

	p.otherlifeservice {
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		color: var(--color-accent);
		letter-spacing: 1px;
		padding: 30px 15px;
	}
}

/*** notes ***/
.notes {
	width: auto;
	margin: 15px;

	@media (min-width: 600px) {
		width: 70%;
		margin: 30px auto;
	}

	dl {
		dt {
			border-bottom: 1px dashed var(--color-text);
			display: inline-block;
			margin: 0 0 5px 0;
			letter-spacing: 1px;
			color: var(--color-text);
		}

		dd {
			margin: 0 0 5px 1em;
			font-size: 12px;
			text-indent: -1em;
			color: var(--color-text);

			strong {
				color: #ff0000;
			}

			ul {
				li {
					text-indent: -1em;
					margin: 0 0 0 1em;
					line-height: 1.6;

					ul li {
						text-indent: -1em;
						margin: 0 0 0 1em;
						line-height: 1.6;
					}
				}
			}
		}
	}
}

span.notes {
	display: block;
	text-align: center;
	margin: 0 auto;
	color: var(--color-text);
	font-size: 12px;
	letter-spacing: 1px;
	font-weight: normal;
}

/*** btn ***/
.btn a,
a.btn {
	width: auto;
	background-color: var(--color-accent);
	margin: 15px auto;
	color: var(--color-white);
	text-align: center;
	text-decoration: none;
	padding: 10px;
	font-weight: bold;
	font-size: 100%;
	letter-spacing: 1px;
	border-radius: 60px;
	display: block;

	@media (min-width: 600px) {
		width: 60%;
		font-size: 22px;
	}

	&:hover {
		color: #fffc00;
		box-shadow:
			0 2px 5px rgba(0, 0, 0, 0.1),
			0 2px 30px rgba(0, 0, 0, 0.1);
		transition: 0.3s !important;
	}

	i {
		margin-right: 5px;
	}
}

/*** pagetop ***/
#pagetop {
	padding: 0 0.5em 0 0.5em;
	position: fixed;
	right: 3%;
	bottom: 5%;
	font-size: 100%;
	z-index: 20;
	background-color: var(--color-text);
	border-radius: 6px;

	a {
		color: var(--color-white);
		text-decoration: none;
		padding: 15px;
		display: block;
	}

	&:hover {
		color: var(--color-white);
		text-decoration: underline;
	}
}

/*** footer ***/
.footer {
	padding: 15px;
	background-color: var(--color-primary);

	p.copyright {
		padding: 0;
		clear: both;
		font-size: 70%;
		text-align: center;
		color: var(--color-text);

		@media (min-width: 600px) {
			font-size: 80%;
		}

		span {
			display: block !important;

			@media (min-width: 600px) {
				display: inline !important;
			}
		}
	}
}

/*** hack ***/
/* IE11以上 */
@media all and (-ms-high-contrast: none) {
	.navibox ul li {
		float: left;

		a {
			width: 129px;
		}
	}
}

/* edge */
@supports (-ms-ime-align: auto) {
	.navibox ul li {
		float: left;

		a {
			width: 129px;
		}
	}
}