@charset "utf-8";
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanmp.min.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&display=swap&subset=japanese');

body {
	background: #fff;
	font-family: YakuHanMP, '游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'Noto Serif JP', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
	color: #222;
	font-size: 14px;
	font-feature-settings: "palt"1;
	line-height: 1.8;
	letter-spacing: 0.08em;
	-webkit-text-size-adjust: 100%;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	body {
		font-feature-settings: "pkna"1;}
}
header, footer, nav, main, article, section, aside, details, figcaption, figure, video {
	display: block;}

input, select, textarea, button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	margin: 5px 5px;
	padding: 5px 3px;
	outline: 0;
	border: 1px solid #aaa5a5;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	vertical-align: middle;}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea {
	width: 98%;}

input[type="radio"],
input[type="checkbox"] {
	display: none;}
input[type="radio"] + span,
input[type="checkbox"] + span {
	position: relative;
	padding-left: 25px;}
input[type="radio"] + span::before,
input[type="radio"] + span::after,
input[type="checkbox"] + span::before,
input[type="checkbox"] + span::after {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	transition: 0.5s;
	content: '';}
input[type="radio"] + span::before,
input[type="checkbox"] + span::before {
	width: 18px;
	height: 18px;
	border: 1px solid #aaa5a5;
	background: #fff;}
input[type="radio"]:checked + span,
input[type="checkbox"]:checked + span {
	color: #c00;}
input[type="radio"] + span::before {
	border-radius: 50%;}
input[type="radio"] + span::after {
	left: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #aaa5a5;
	opacity: 0;
	transition: 0.5s;}
input[type="radio"]:checked + span::after {
	background: #c00;
	opacity: 1;}
input[type="checkbox"] + span::after {
	left: 4px;
	width: 10px;
	height: 7px;
	border: 2px solid transparent;
	border-top: none;
	border-right: none;
	transform: translateY(-50%) rotate(-45deg);}
input[type="checkbox"]:checked + span::after {
	border-color: #c00;}

input[id="postcode"] {
	width: 10em;
	margin-left: 0.5em;}
textarea {
	max-width: 100%;
	height: 12em;}
label {
	display: inline-block;
	margin: 5px;
	padding-right: 1em;}
select {
	margin: 0;
	text-indent:  0.01px;
	text-overflow: '';}
select::-ms-expand {
	display: none;}
.selectCover {
	display: inline-block;
	overflow: hidden;
	position: relative;
	margin: 5px;
	border: 1px solid #aaa5a5;
	vertical-align: middle;}
.selectCover.st01 {
	width: 7em;}
.selectCover.st02 {
	width: 6em;}
.selectCover::after {
	display: block;
	position: absolute;
	top: calc(50% - 0.25em);
	right: .625em;
	border: solid .35em transparent;
	border-top: solid 0.55em #18191c;
	content: '';
	pointer-events: none;}
.selectCover select {
	width: 100%;
	position: relative;
	border: none;}
.selectCover select:not(:target) {
	width: 120%;}
.dateCover {
	display: inline-block;
	position: relative;
	width: 180px;
	margin: 5px;
	border: 1px solid #aaa5a5;
	vertical-align: middle;}
.dateCover::before {
	position: absolute;
	top: 0;
	right: 0;
	width: 36px;
	height: 100%;
	background: #231815 url(../img/share/calendar.svg) center center no-repeat;
	background-size: 55%;
	content: '';}
.dateCover input {
	position: relative;
	width: 100%;
	margin: 0;
	border: 0;
	background: transparent;}
.dateCover input::-webkit-inner-spin-button {
	-webkit-appearance: none;}
.dateCover input::-webkit-clear-button {
	-webkit-appearance: none;}
.dateCover input::-webkit-calendar-picker-indicator {
	position: absolute;
	top: 0;
	right: 0;
	width: 36px;
	height: 100%;
	padding: 0;
	background: transparent;
	color: transparent;
	cursor: pointer;}
::before,
::after,
a {
	transition: background 0.3s, border 0.3s, color 0.3s, transform 0.3s;}

a {
	color: inherit;}
a:hover {
	opacity: 0.5;}

p {
	text-align: justify;
	text-justify: inter-ideograph;
	word-break: break-all;}

img[src$=".svg"],
svg {
	width: 100%;
	height: auto;
	vertical-align: top;}
svg {
	transform: 0.3s;}
img.ofi {
	object-fit: cover;
	object-position: 50% 50%;
	font-family: 'object-fit:cover; object-position:50% 50%;';}

.pic img {
	width: 100%;
	height: auto;}
.btn {
	width: 280px;
	margin: 0 auto;
	padding: 0.75em 0 0.5em;
	border: 1px solid currentColor;
	background: #fff;
	color: #222;
	font-weight: bold;
	text-align: center;
	text-decoration: none;}
.btn[target="_blank"]::after {
	display: inline-block;
	margin-left: 1em;
	content: "→";}
.btn:hover {
	background: #231815;
	color: #fff;
	opacity: 1;}
a.btn {
	display: block;}
.small {
	font-size: 0.8em;}

.tabDisp,
.spDisp {
	display: none !important;}
@media screen and (min-width:813px) {
	/* iPhoneX縦サイズ 812px */
	a[href^="tel:"] {
		pointer-events: none;
		cursor: default;}
	a[href^="tel:"]:hover {
		opacity: 1;}
}
@media only screen and (max-width:1024px) {
	.pcDisp {
		display: none !important;}
}
@media only screen and (max-width:768px) {
	.pcDisp2 {
		display: none !important;}
	.tabDisp {
		display: block !important;}
	br.tabDisp {
		display: inline-block !important;}
}
@media only screen and (max-width:640px) {
	body {
		font-size: 22px;
		letter-spacing:  0.05em;}
	.selectCover.st01 {
		width: 6em;}
	.selectCover.st02 {
		width: 5em;}
	.dateCover {
		width: 220px;}
	.btn {
		width: 100%;}

	.pcDisp3 {
		display: none !important;}
	.spDisp {
		display: block !important;}
	br.spDisp {
		display: inline-block !important;}
}

/* -- animation -- */
.inView {
	overflow: hidden;
	position: relative;
	z-index: 1;
	padding-bottom: 1px;}
.img-overlay::before {
	display: block;
	position: absolute;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
	z-index: 2;
	background: #fff;
	transition: background-color 1s, transform 1s cubic-bezier(.075, .82, .165, 1) 0.5s;
	transform: scaleX(1);
	transform-origin: right;
	content: '';}
.img-overlay._in::before {
	background: #f4f4f4;
	transform: scaleX(0);}
.text-overlay::before {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 2;
	background: #fff;
	transition: transform cubic-bezier(.075, .82, .165, 1);
	transition-duration: 1.5s;
	transform: translateX(0);
	transform-origin: right;
	content: '';}
.text-overlay._in::before {
	transform: translateX(100.1%);}
.fade-up {
	opacity: 0;
	transform: translateY(100px);
	transition: 1s 0.5s;}
.fade-up._in {
	opacity: 1;
	transform: translateY(0);}
.fade-right {
	opacity: 0;
	transform: translateX(-100px);
	transition: 1s 0.5s;}
.fade-left {
	opacity: 0;
	transform: translateX(100px);
	transition: 1s 0.5s;}
.fade-right._in,
.fade-left._in {
	opacity: 1;
	transform: translateX(0);}
.text-fade1 {
	display: block;
	overflow: hidden;
	transform: translateX(-100.5%);
	transition: transform 1s cubic-bezier(.075, .82, .165, 1) 0.5s;}
.text-fade2 {
	display: block;
	transform: translateX(100.5%);
	transition: transform 1s cubic-bezier(.075, .82, .165, 1) 0.5s;}
._in .text-fade1,
._in .text-fade2 {
	transform: translateX(0);}

/* -- share -- */
ul.bottom {
	padding: 38px 0 0;
	color: #fff;}
ul.bottom li {
	padding: 0 10px 20px;}
ul.bottom a {
	display: block;
	padding: 0.5em 1.5em;
	border: 1px solid #fff;
	border-radius: 100px;
	line-height: 1;
	text-decoration: none;}
ul.bottom a:hover {
	color: #222;
	background: #fff;
	opacity: 1;}

/* -- header -- */
#header .headLogo {
	position: fixed;
	top: 14px;
	left: 20px;
	z-index: 90;
	width: 100px;
	line-height: 1;}
#header .headLogo.change {
	color: #fff;}
#header .headLogo a {
	display: block;}
#header.active .headLogo {
	color: #fff;}

/* -- footer -- */
#footer {
	margin-top: 120px;
	background: #231815;
	color: #fff;
	text-align: center;}
#footer .footLogo {
	width: 155px;
	margin: 0 auto;
	padding: 30px 0;}
#footer .footLogo a {
	display: block;}
#footer .footLogo path.logotype {
	fill: currentColor;}
#footer small {
	display: inline-block;
	padding: 50px 0;
	font-size: 0.857em;}
#footer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;}
#footer li {
	letter-spacing:  0.07em;}
#footer .address {
	padding: 38px 0 0;
	color: #fff;}
#footer .address p {
	margin-top: 1em;
	text-align: center;}
#footer .address p:first-child {
	margin-top: 0;}
#footer .address p strong {
	display: inline-block;}
#footer .address p span {
	display: block;
	padding-top: 0.5em;}
#footer .address a {
	display: inline-block;
	font-size: 2em;
	line-height: inherit;}
@media only screen and (max-width:640px) {
	#footer .address a {
		font-size: 1.91em;
		font-weight: bold;}
}

/* -- container -- */
#container {
	overflow: hidden;
	position: relative;
	opacity: 0;}
.inner {
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;}

#pageTtl {
	background: #f4f4f4;
	padding: 120px 0 100px;}
#pageTtl h1 {
	font-size: 3em;
	font-weight: bold;
	line-height: 1;
	text-align: center;}

.section {
	margin-top: 70px;
	padding-top: 80px;}
.page .section {
	margin-top: 20px;}
.section .pic.cover::after {
	display: block;
	padding-top: 45%;
	content: '';}
.section .textArea {
	text-align: center;
	padding-top: 40px;}
.section .sectionTtl2 + .textArea {
	padding-top: 0;}
.section .textArea p {
	padding-top: 1em;
	text-align: center;}
.section .textArea p:first-of-type {
	padding-top: 0;}

.section .btn {
	margin-top: 40px;}

.homeTtl {
	padding: 0 0 40px;
	font-size: 3em;
	line-height: 1;
	text-align: center;}
.homeTtl span.jp,
.homeTtl span.en {
	display: block;
	padding-top: 0.5em;
	font-size: 0.5em;
	font-weight: normal;}
.sectionTtl {
	margin-top: 60px;
	padding: 0 0 0.5em;
	font-size: 1.5em;
	font-weight: normal;
	text-align: center;}
.sectionTtl:first-child {
	margin-top: 0;}
.sectionTtl span {
	display: block;
	font-size: 0.71em;}
.sectionTtl span::before {
	display: block;
	width: 22em;
	margin: 10px auto;
	border-top: 1px solid #222;
	content: '';}
.sectionTtl2 {
	padding: 0 0 30px;
	font-size: 2em;
	line-height: 1;
	text-align: center;}
.sectionTtl2 span.jp,
.sectionTtl2 span.en {
	display: block;
	padding-top: 0.5em;
	font-size: 0.5em;
	font-weight: normal;}
@media only screen and (max-width:1024px) {
	#container {
		width: 1024px;}
}
@media only screen and (max-width:768px) {
	#container {
		width: 768px;}
}
@media only screen and (max-width:640px) {
	#container {
		width: 640px;}
	#pageTtl {
		padding-top: 160px;}
	#pageTtl h1 {
		font-size: 2.64em;}
	.homeTtl {
		font-size: 2.64em;}
	.sectionTtl2 {
		padding: 0 0 50px;
		font-size: 1.75em;}
}

/* -- contact -- */
#contact {
	margin-top: 0;
	padding: 0 20px;}
#contact .inner {
	max-width: 900px;
	padding: 50px 40px;
	background: #fff;}
#contact .top {
	padding: 0 0 20px;
	text-align: center;}
#contact table {
	width: 100%;
	table-layout: fixed;}
#contact table th,
#contact table td {
	border-bottom: 1px solid #aaa5a5;}
#contact table th {
	width: 18em;
	padding: 20px 0;}
#contact table th b {
	display: inline-block;
	font-size: .91em;
	margin-right: 1em;
	padding: 0 0.5em;
	background: #bd4c4c;
	color: #fff;}
#contact table td {
	width: calc(100% - 18em);
	padding: 15px 0 15px 1em;}
#contact table td span.block {
	display: inline-block;
	width: 100%;
	margin-top: 10px;}
#contact table td span.block:first-child {
	margin-top: 0;}
#contact.return table td {
	padding: 20px 0 20px 1em;}
#contact.return table td span {
	display: block;}
#contact.return table td span.error {
	display: inline-block;
	padding: 0 6px;
	background: #f6e5e5;
	color: #bd4c4c;}
.formSubmit {
	padding: 60px 0 0;}
.formSubmit input,
.formSubmit a.formBack {
	-webkit-appearance: none;
	display: inline-block;
	width: 250px;
	margin: 20px 0 0;
	padding: 1em 0 0.75em;
	border: 1px solid #231815;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	vertical-align: top;
	cursor: pointer;}
.formSubmit input:hover,
.formSubmit a.formBack:hover {
	background: #fff;
	color: #222;
	opacity: 1;}
.formSubmit input {
	color: #fff;
	background: #231815;
	transition: .3s;}
.formSubmit a.formBack {
	color: #222;
	background: #f4f4f4;
	text-align: center;}
.formSubmit p.guide {
	text-align: center;}
.formSubmit p.submit {
	padding: 0 0 60px;
	text-align: center;}
.formSubmit p.mobile {
	margin: 0 0 20px;
	padding: 20px 30px;
	border: 1px solid #bd4c4c;}
.formSubmit p.mobile span {
	display: block;
	padding-bottom: 5px;
	color: #bd4c4c;
	font-size: 1.2em;
	text-align: center;}
.formSubmit p.privacy {
	background: #f4f4f4;
	padding: 20px 30px;}
@media only screen and (max-width:640px) {
	#contact .inner {
		padding: 40px 30px;}
	#contact .top {
		text-align: left;}
	#contact table th,
	#contact table td {
		display: block;
		width: 100%;}
	#contact table th {
		border: none;
		white-space: normal;}
	#contact table td {
		padding: 0 0 15px;}
	#contact table td p {
		font-size: .91em;}
	.formSubmit p {
		font-size: 0.8em;}
	.formSubmit p.guide {
		text-align: left;}
	.formSubmit p.guide br {
		display: none;}
}

/* -- IE11 YuMincho -- */
_:-ms-lang(x)::-ms-backdrop,
input[type="radio"] + span,
input[type="checkbox"] + span {
	padding-top: 5px;}
_:-ms-lang(x)::-ms-backdrop,
ul.bottom a {
	padding: 1em 1.5em 0.5em;}
_:-ms-lang(x)::-ms-backdrop,
#fixedBnr a {
	padding-top: 0.5em;}
_:-ms-lang(x)::-ms-backdrop,
.homeTtl,
.homeTtl .text-fade2,
.sectionTtl2,
.sectionTtl2 .text-fade2 {
	padding-top: 5px !important;}