@charset "UTF-8";

/* ------------------------------------------- */
/* root */
/* ------------------------------------------- */
:root {
	--default-text-color: #000;
}

/* --------------------------------------------------------------- */
/* reset start */
/* --------------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
video {
	display: block;
}

ul,
li,
ol,
dl {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

a {
	display: inline-block;
	margin: 0;
	padding: 0;
	color: var(--default-text-color);
}

@media (hover: hover) and (pointer: fine) {
	a:hover {
		text-decoration: none;
	}
}

del {
	text-decoration: line-through;
}

abbr[title],
dfn[title] {
	border-bottom: 0.1rem dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

*,
*:after,
*:before {
	-webkit-appearance: none;
	word-break: break-all;
	box-sizing: border-box;
}

video {
	filter: contrast(1);
}

/* --------------------------------------------------------------- */
/* reset end */
/* --------------------------------------------------------------- */

/* タブレット(1081px以上)のみ非表示 */
@media print,
screen and (min-width: 1080.01px) {
	.tab-off {
		display: none !important;
	}
}

/* PC(768px以上)のみ非表示 */
@media print,
screen and (min-width: 767.01px) {
	.pc-off {
		display: none !important;
	}
}

/* スマホのみ非表示 */
@media screen and (max-width: 767px) {
	.sp-off {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {
	a[href^="tel:"] {
		color: var(--default-text-color);
	}
}

@media screen and (min-width: 767.01px) {
	a[href^="tel:"] {
		pointer-events: none;
		text-decoration: none;
	}
}

html {
	font-size: 62.5%;
	letter-spacing: 0;
	font-family: "Noto Sans JP", sans-serif;
	-webkit-text-size-adjust: none;

	@media screen and (min-width: 1080.01px) and (max-width: 1919.99px) {
		font-size: calc(10 / 1920 * 100 * 1vw);
	}

	/* あまりにも文字サイズが小さくなった場合 */
	@media screen and (min-width: 767.01px) and (max-width: 1080px) {
		font-size: calc(12 / 1920 * 100 * 1vw);
	}

	/* スマホ用（デザインサイズが375の場合） */
	@media screen and (max-width: 767px) {
		font-size: calc(10 / 375 * 100 * 1vw);
	}
}

body {
	font-size: 1.6rem;
	line-height: 1;
	overflow: auto;

	@media screen and (max-width: 767px) {
		font-size: 1.4rem;
	}
}

img {
	display: block;
	max-width: 100%;
	height: auto;
	vertical-align: top;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	@media screen and (max-width: 767px) {
		/* スマホ画像長押し禁止対策 */
		pointer-events: none;
	}
}


/* ------------------------------------------- */
/* 印刷用の設定 */
/* ------------------------------------------- */
@media print {
	html {
		font-size: calc(10 / 1920 * 100 * 14px);
	}

	body {
		-webkit-print-color-adjust: exact;
		position: relative;
		width: 1400px;
		zoom: 70%;
	}
}

@page {
	size: A4;
	margin: 10mm;
}

/* ------------------------------------------- */
/* デバッグ用：スクロールバーを0pxに
/* ------------------------------------------- */
.deve body {
	--sb-track-color: #ddd;
	--sb-thumb-color: #000;
	--sb-size: 0;
	/* scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); */
	overflow-x: hidden;
}

.deve body::-webkit-scrollbar {
	width: var(--sb-size);
}

.deve body::-webkit-scrollbar-track {
	background: var(--sb-track-color);
	border-radius: 1px;
}

.deve body::-webkit-scrollbar-thumb {
	background: var(--sb-thumb-color);
	border-radius: 1px;
}

/* --------------------------------------------------------------- */
/* wrapper */
/* --------------------------------------------------------------- */
#wrapper {
	overflow: clip;
	padding-top: 12.9rem;

	@media screen and (max-width: 767px) {
		padding-top: 6rem;
	}
}

.menu-active {
	overflow: hidden;
}

#loading{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #FFF;

	animation: fadeOut 1.5s 4s forwards;

	#lottie{
		width: 30rem;
		height: 30rem;
	}
}

@keyframes fadeOut{
	100%{
		opacity: 0;
		pointer-events: none;
	}
}

/* --------------------------------------------------------------- */
/* header */
/* --------------------------------------------------------------- */
#header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	width: 100%;
	height: 12.9rem;
	background: rgba(255, 255, 255, 0.8);

	@media print {
		position: absolute;
	}

	@media screen and (max-width: 767px) {
		height: 6rem;
	}

	/* position */
	.logomark,
	.main-list,
	.contact-list {
		position: absolute;
	}

	@media screen and (max-width: 767px) {

		.main-list,
		.contact-list {
			position: static;
		}
	}

	.logomark {
		top: 3.1rem;
		left: 16rem;

		@media screen and (max-width: 767px) {
			top: 1rem;
			left: 1rem;
		}
	}

	.main-list {
		top: 5.8rem;
		right: 53rem;
	}

	.contact-list {
		top: 3.7rem;
		right: 16rem;
	}

	.logomark {
		width: 24.5rem;

		@media screen and (max-width: 767px) {
			width: 15rem;
		}
	}

	.main-list {
		display: flex;
		flex-wrap: wrap;
		gap: 3rem;

		@media screen and (max-width: 767px) {
			flex-direction: column;
			gap: 0;
			margin-bottom: 2rem;

			& li {
				border-bottom: 1px solid #DDD;
			}
		}

		& a {
			font-weight: 700;
			letter-spacing: 0.09em;
			color: #000000;
			text-decoration: none;

			@media (hover: hover) and (pointer: fine) {
				transition: ease 0.25s color;

				&:hover {
					color: #E50012;
				}
			}

			@media screen and (max-width: 767px) {
				position: relative;
				display: block;
				padding: 2rem;

				&:after {
					content: "";
					position: absolute;
					right: 2rem;
					top: calc(50% + 1px);
					z-index: 1;
					display: block;
					width: 1rem;
					height: 1.4rem;
					background: url(../img/parts/icon_arrow01_red.svg) no-repeat center center / 100% auto;
					transform: translateY(-50%);
				}
			}
		}
	}

	.contact-list {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;

		@media screen and (max-width: 767px) {
			justify-content: center;
		}

		& a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 16rem;
			height: 6rem;
			font-weight: 700;
			font-size: 1.8rem;
			letter-spacing: 0.06em;
			color: #FFFFFF;
			background-color: #E50012;
			text-decoration: none;
			border: 0.2rem solid transparent;
			border-radius: 3rem;

			@media (hover: hover) and (pointer: fine) {
				transition: ease 0.25s color, ease 0.25s background-color, ease 0.25s color;

				&:hover {
					background-color: #000;
				}
			}

			@media screen and (max-width: 767px) {
				height: 5rem;
				font-size: 1.6rem;
			}
		}

		.recruit {
			& a {
				color: #E50012;
				border-color: #E50012;
				background-color: #FFF;

				@media (hover: hover) and (pointer: fine) {
					&:hover {
						color: #FFF;
						background-color: #000;
						border-color: #000;
					}
				}
			}
		}
	}


	/* メニューボタン */
	.menu-btn {
		position: absolute;
		display: none;
		top: 0;
		right: 0;
		z-index: 9999;

		@media screen and (max-width: 767px) {
			display: block;
		}

		&:after {
			/* content: "MENU"; */
			content: "";
			position: absolute;
			left: 50%;
			bottom: 1.1rem;
			color: #E50012;
			font-weight: 500;
			letter-spacing: 0.05em;
			font-size: 1.1rem;
			transform: translateX(-50%);
			white-space: nowrap;
		}

		& a {
			position: relative;
			width: 10rem;
			height: 10rem;
			vertical-align: top;
			transition: ease 0.25s all;

			@media screen and (max-width: 767px) {
				width: 6.2rem;
				height: 6.2rem;
			}

			& span {
				position: absolute;
				left: 50%;
				top: 50%;
				display: block;
				margin-left: -1.8rem;
				width: 3.4rem;
				height: 0.2rem;
				background: #E50012;
				border-radius: 0.3rem;

				@media screen and (max-width: 767px) {
					margin-left: -1.4rem;
					width: 2.8rem;
					height: 0.2rem;
				}

				&:before,
				&:after {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: #E50012;
					border-radius: 0.3rem;
					transition: ease 0.25s all;
				}

				&:before {
					margin-top: -1.1rem;
				}

				@media screen and (max-width: 767px) {
					&:before {
						margin-top: -0.7rem;
					}
				}

				&:after {
					margin-top: 1.1rem;
				}

				@media screen and (max-width: 767px) {
					&:after {
						margin-top: 0.7rem;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.nav {
		position: fixed;
		top: 6rem;
		left: 100%;
		z-index: 999;
		width: 100%;
		height: calc(100vh - 6rem);
		pointer-events: none;
		opacity: 0;
		overflow-y: scroll;
		background: #FFF;
		transition: ease 0.25s left, ease 0.25s opacity;
	}
}

.menu-active {
	#header {
		background: #FFF;

		.menu-btn {

			/* position: fixed; */
			& a {
				background-color: #fff;

				& span {
					background-color: transparent;

					&:before {
						margin-top: 0;
						transform: rotate(45deg);
						-webkit-transform: rotate(45deg);
					}

					&:after {
						margin-top: 0;
						transform: rotate(-45deg);
						-webkit-transform: rotate(-45deg);
					}
				}
			}
		}

		@media screen and (max-width: 767px) {
			.nav {
				left: 0;
				opacity: 1;
				pointer-events: auto;
			}
		}
	}
}

/* --------------------------------------------------------------- */
/* breadcrumbs */
/* --------------------------------------------------------------- */
#breadcrumbs {
	padding: 2.4rem 0;
	background: #EEEEEE;

	@media screen and (max-width: 767px) {
		display: none;
	}

	& ol {
		display: flex;
		flex-wrap: wrap;
	}

	& li {
		position: relative;
		padding-right: 2.6rem;
		margin-right: 2.1rem;
		font-weight: 500;
		font-size: 1.2rem;
		color: #E50012;
		letter-spacing: 0.1em;

		&:last-child {
			margin-right: 0;

			&:after {
				display: none;
			}
		}


		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			right: 0;
			margin-top: -0.4rem;
			width: 0.8rem;
			height: 0.8rem;
			border-top: 0.2rem solid #9C9C9C;
			border-right: 0.2rem solid #9C9C9C;
			box-sizing: border-box;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
		}

		&:last-child {
			&:after {
				display: none;
			}
		}
	}
}

& a {
	color: #000;
	text-decoration: none;

	@media (hover: hover) and (pointer: fine) {
		&:hover {
			text-decoration: underline;
		}
	}
}
}

/* --------------------------------------------------------------- */
/* container */
/* --------------------------------------------------------------- */
#container {}

/* --------------------------------------------------------------- */
/* contents */
/* --------------------------------------------------------------- */
#contents {}

/* --------------------------------------------------------------- */
/* footer */
/* --------------------------------------------------------------- */
#footer {


	/* contact-group */
	.contact-group {
		display: flex;
		text-decoration: none;
		background: #F8F8F8;

		@media (hover: hover) and (pointer: fine) {
			.group-text {

				// transition: ease 0.25s background-color;
				.text-btn {
					transition: ease 0.25s background-color;
				}
			}

			&:hover {
				.group-text {

					// background-color: #000;
					.text-btn {
						color: #FFF;
						background-color: #E50012;
						border-color: #FFF;

						& span {
							&:after {
								background-size: 0, 100% auto;
							}
						}
					}
				}
			}
		}

		@media screen and (max-width: 767px) {
			flex-direction: column-reverse;
		}

		.group-text {
			padding-top: 7.1rem;
			padding-left: 32.6rem;
			color: #FFF;
			width: 90.7rem;
			height: 36.1rem;
			background: #E50012;

			@media screen and (max-width: 767px) {
				padding: 4rem 0;
				width: 100%;
				height: auto;
				text-align: center;
			}


			.text-label {
				margin-bottom: 1rem;
				font-family: 'Jost';
				font-weight: 500;
				font-size: 1.8rem;
				line-height: 1.44;
				letter-spacing: 0.05em;

				@media screen and (max-width: 767px) {
					margin-bottom: 0.4rem;
					font-size: 1.4rem;
				}
			}

			.text-title {
				margin-bottom: 3.4rem;
				font-weight: 700;
				font-size: 3.7rem;
				line-height: 130%;
				letter-spacing: 0.1em;

				@media screen and (max-width: 767px) {
					margin-bottom: 3rem;
					font-size: 2.4rem;
				}
			}

			.text-btn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 19rem;
				height: 6.4rem;
				font-weight: 700;
				font-size: 1.8rem;
				letter-spacing: 0.03em;
				color: #E50012;
				background: #FFFFFF;
				border-radius: 3.2rem;
				border: 0.2rem solid transparent;

				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
					height: 5rem;
				}

				& span {
					position: relative;
					padding-right: 2rem;
					display: inline-block;

					&:after {
						content: "";
						position: absolute;
						right: 0;
						top: calc(50% + 1px);
						z-index: 1;
						display: block;
						width: 1rem;
						height: 1.4rem;
						background: url(../img/parts/icon_arrow01_red.svg) no-repeat center center / 100% auto, url(../img/parts/icon_arrow01_white.svg) no-repeat center center / 0;
						transform: translateY(-50%);
					}
				}
			}

		}

		.group-photo {
			width: calc(100% - 90.7rem);
			display: flex;
			align-items: center;
			justify-content: center;
			padding-right: 13.6rem;

			@media screen and (max-width: 767px) {
				padding: 6rem 3rem;
				width: 100%;
			}

			& img {
				mix-blend-mode: multiply;

				@media print,
				screen and (min-width: 767.01px) {
					max-width: 61.4rem;
				}
			}
		}
	}


	/* recruit-group */

	.recruit-group {
		padding: 7.8rem 2rem 6.9rem;

		@media screen and (max-width: 767px) {
			padding: 4rem 0;
		}

		& a {
			display: flex;
			text-decoration: none;
			background: #FFFFFF;
			box-shadow: 0 0 2.1rem 0.4rem rgba(0, 0, 0, 0.09);
			border-radius: 2rem;
			overflow: hidden;

			@media (hover: hover) and (pointer: fine) {
				.text-btn {
					transition: ease 0.25s background-color;
				}

				&:hover {
					.group-text {
						.text-btn {
							color: #FFF;
							background-color: #E50012;

							& span {
								&:after {
									background-size: 0, 100% auto;
								}
							}
						}
					}
				}
			}

			@media screen and (max-width: 767px) {
				flex-direction: column;
				border-radius: 1rem;
			}

		}

		.group-photo {
			width: 84.6rem;

			@media screen and (max-width: 767px) {
				width: 100%;
			}
		}

		.group-text {
			display: flex;
			align-items: center;
			justify-content: center;
			width: calc(100% - 84.6rem);
			padding: 2.4rem 2rem 0 0;

			@media screen and (max-width: 767px) {
				display: block;
				width: 100%;
				padding: 3rem 2rem;
			}

			.text-label {
				margin-bottom: 1.1rem;
				font-family: 'Jost';
				font-weight: 500;
				font-size: 1.8rem;
				letter-spacing: 0.05em;
				color: #E50012;

				@media screen and (max-width: 767px) {
					margin-bottom: 0.4rem;
					font-size: 1.4rem;
				}
			}

			.text-title {
				margin-bottom: 3.5rem;
				font-weight: 700;
				font-size: 4.2rem;
				line-height: 1.4;
				letter-spacing: 0.1em;
				color: #000000;

				@media screen and (max-width: 767px) {
					margin-bottom: 1.6rem;
					// font-size: 2.4rem;
					font-size: 2.2rem;
				}
			}


			.text-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 22.7rem;
				height: 6.4rem;
				font-weight: 700;
				font-size: 1.8rem;
				letter-spacing: 0.03em;
				color: #E50012;
				background: #FFFFFF;
				border-radius: 3.2rem;
				border: 0.1rem solid #E50012;

				@media screen and (max-width: 767px) {
					margin: 0 auto;
					font-size: 1.4rem;
					height: 5rem;
				}

				& span {
					position: relative;
					padding-right: 2rem;
					display: inline-block;

					&:after {
						content: "";
						position: absolute;
						right: 0;
						top: calc(50% + 1px);
						z-index: 1;
						display: block;
						width: 1rem;
						height: 1.4rem;
						background: url(../img/parts/icon_arrow01_red.svg) no-repeat center center / 100% auto, url(../img/parts/icon_arrow01_white.svg) no-repeat center center / 0;
						transform: translateY(-50%);
					}
				}

			}
		}

	}

	/* information-group */

	.information-group {
		border-top: 1px solid #D5D5D5;

		@media screen and (max-width: 767px) {
			padding-top: 3rem;
		}

		.inner {
			position: relative;
			height: 30.2rem;

			@media screen and (max-width: 767px) {
				height: auto;
			}
		}


		/* position */
		.logomark,
		.sitemap-list,
		#copyright {
			position: absolute;

			@media screen and (max-width: 767px) {
				position: static;
			}
		}

		.logomark {
			top: 7.9rem;
			left: 0;
		}

		.sitemap-list {
			top: 8.4rem;
			right: 0;
		}

		#copyright {
			top: 22rem;
			left: 0;
		}

		.logomark {
			@media screen and (max-width: 767px) {
				margin: 0 auto 1rem;
				width: 20rem;

			}

			& img {

				@media print,
				screen and (min-width: 767.01px) {
					max-width: 31.3rem;
				}

				@media screen and (max-width: 767px) {
					position: relative;
					left: -2rem;
				}
			}
		}

		.sitemap-list {
			display: flex;
			gap: 9rem;

			@media screen and (max-width: 767px) {
				display: none;
				flex-direction: column;
				gap: 1rem;
			}

			.list-child {
				display: flex;
				flex-direction: column;
				gap: 1.6rem;

				@media screen and (max-width: 767px) {
					gap: 1rem;
				}
			}

			& a {
				font-weight: 700;
				line-height: 1.4;
				letter-spacing: 0.09em;
				color: #000000;
				text-decoration: none;

				@media (hover: hover) and (pointer: fine) {
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}

		#copyright {
			font-weight: 400;
			letter-spacing: 0.02em;

			@media screen and (max-width: 767px) {
				display: block;
				padding: 1rem 0;
				font-size: 1.2rem;
				text-align: center;
			}
		}
	}
}

/* ------------------------------------------- */
/* inner config */
/* ------------------------------------------- */
.inner {
	position: relative;
	z-index: 1;
	margin: 0 auto;

	@media screen and (max-width: 767px) {
		width: calc(100% - 3rem);
	}
}

.w1080 {
	max-width: 108rem;
}

.w1280 {
	max-width: 128rem;
}

.w1440 {
	max-width: 144rem;
}

.w1600 {
	max-width: 160rem;
}

/* ------------------------------------------- */
/* align */
/* ------------------------------------------- */
.tar {
	text-align: right;
}

.tal {
	text-align: left;
}

.tac {
	text-align: center;
}

/* --------------------------------------------------------------- */
/* common parts */
/* --------------------------------------------------------------- */

/* ------------------------------------------- */
/* common-area */
/* ------------------------------------------- */
.common-area {
	&.search {
		margin: 7.7rem 0 6.5rem;
		padding: 2.8rem 8rem 5.1rem;
		background: #F8F8F8;
		border-radius: 1rem;

		@media screen and (max-width: 767px) {
			margin: 2rem 0;
			padding: 2rem;
		}

		.area-list {
			>li {
				display: flex;
				flex-wrap: wrap;
				// align-items: center;
				padding: 3.5rem 0;
				border-bottom: 1px solid #BCBCBC;

				@media screen and (max-width: 767px) {
					padding: 2rem 0;

					&:first-child {
						padding-top: 0;
					}
				}

				&:last-child {
					border-bottom: 0;
				}
			}

			.list-label {
				width: 21.7rem;
				font-weight: 500;
				font-size: 1.8rem;
				letter-spacing: 0.02em;
				color: #000000;

				@media screen and (max-width: 767px) {
					margin-bottom: 2rem;
					width: 100%;
					font-size: 1.6rem;
				}

				&.center {
					align-self: center;
				}
			}

			.list-value {
				width: calc(100% - 21.7rem);

				@media screen and (max-width: 767px) {
					width: 100%;
				}

				.value-list {
					display: flex;
					flex-wrap: wrap;
					font-weight: 400;
					line-height: 1.4;
					letter-spacing: 0.02em;

					& li {
						position: relative;
					}

					&.parent {
						flex-direction: column;

						>li {
							&:last-child {
								.child {
									margin-bottom: 0;
								}
							}
						}
					}

					&.free {
						gap: 3rem 4rem;

						@media screen and (max-width: 767px) {
							gap: 1rem 2rem;
						}

					}

					.child {
						margin: 3rem 0 4rem 3rem;
						gap: 1.5rem 3rem;

						@media screen and (max-width: 767px) {
							gap: 1rem 2rem;
							margin: 1.5rem 0 2.5rem 2rem;
						}


						& input {
							&[type="checkbox"] {
								+label {
									padding-left: 3rem;
									font-size: 1.5rem;

									@media screen and (max-width: 767px) {
										padding-left: 2rem;
										font-size: 1.4rem;
									}

									&:after {
										top: 0.1rem;
										width: 2rem;
										height: 2rem;
									}

									@media screen and (max-width: 767px) {
										&:after {
											top: 0.3rem;
											width: 1.4rem;
											height: 1.4rem;
										}
									}
								}

								&:checked {
									+label {
										&:after {
											background-size: 1.4rem auto;
										}

										@media screen and (max-width: 767px) {
											&:after {
												background-size: 1rem auto;
											}
										}
									}
								}
							}
						}

					}
				}

				.value-select {
					position: relative;
					display: inline-block;
					background: #FFFFFF;
					border: 1px solid #BCBCBC;
					border-radius: 0.4rem;
					overflow: hidden;

					&:after {
						content: '';
						display: block;
						position: absolute;
						top: calc(50% - 0.2rem);
						right: 1.5rem;
						margin-top: -0.4rem;
						width: 0.8rem;
						height: 0.8rem;
						border-top: 0.2rem solid #333;
						border-right: 0.2rem solid #333;
						box-sizing: border-box;
						transform: rotate(135deg);
						-webkit-transform: rotate(135deg);
					}

					& select {
						padding: 0 3rem 0 1.5rem;
						height: 4.3rem;
						border: 0;
						cursor: pointer;
					}
				}
			}
		}

		.btn-set {
			display: flex;
			justify-content: center;
			gap: 2rem;
			margin-top: 1rem;
		}

		& input {

			&[type="reset"],
			&[type="submit"] {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 20rem;
				padding: 0 3rem;
				height: 4.4rem;
				font-size: 1.6rem;
				font-weight: 400;
				letter-spacing: 0.08em;
				color: #FFF;
				background-color: #E50012;
				border-radius: 0.4rem;
				border: 0;
				cursor: pointer;

				@media screen and (max-width: 767px) {
					width: 100%;
					font-size: 1.4rem;
				}

				@media (hover: hover) and (pointer: fine) {
					transition: ease 0.25s background-color;

					&:hover {
						background-color: #000;
					}
				}
			}

			&[type="reset"] {
				background-color: #BCBCBC;
			}

			&[type="text"] {
				display: flex;
				align-items: center;
				padding: 0 1.5rem;
				width: 100%;
				height: 4.4rem;
				font-size: 1.6rem;
				font-weight: 400;
				letter-spacing: 0.02em;
				border: 1px solid #BCBCBC;
				border-radius: 0.4rem;

				@media screen and (max-width: 767px) {
					font-size: 1.2rem;
					height: 4rem;
				}
			}

			&[type="checkbox"] {
				position: absolute;

				+label {
					position: relative;
					display: inline-block;
					padding-left: 4.2rem;
					cursor: pointer;

					@media screen and (max-width: 767px) {
						padding-left: 2.8rem;
						font-size: 1.5rem;
					}

					&:after {
						content: "";
						position: absolute;
						left: 0;
						top: -0.3rem;
						z-index: 1;
						display: block;
						width: 2.8rem;
						height: 2.8rem;
						background: #FFFFFF;
						box-shadow: 0 0 0.5rem 0.1rem rgba(150, 150, 150, 0.13);
						border-radius: 0.5rem;
						overflow: hidden;
					}

					@media screen and (max-width: 767px) {
						&:after {
							top: 0.2rem;
							width: 1.8rem;
							height: 1.8rem;
							border-radius: 0.3rem;
							box-shadow: 0 0 0.3rem 0.1rem rgba(150, 150, 150, 0.5);
						}
					}
				}

				&:checked {
					+label {
						&:after {
							background: #E50012 url(../img/parts/icon_check01_white.svg) no-repeat center center / 2.1rem auto;
						}

						@media screen and (max-width: 767px) {
							&:after {
								background-size: 1.2rem auto;
							}
						}
					}
				}
			}
		}
	}
}

/* ------------------------------------------- */
/* common-title */
/* ------------------------------------------- */

/* type01 */
.common-title {

	&.type01 {
		margin-bottom: 3.1rem;

		@media screen and (max-width: 767px) {
			margin-bottom: 2rem;
		}

		.title-label {
			margin-bottom: 0.4rem;
			font-family: 'Jost', 'Noto Sans JP', sans-serif;
			font-weight: 500;
			font-size: 1.8rem;
			line-height: 1.44;
			letter-spacing: 0.05em;
			color: #E50012;

			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
			}

		}

		.title-main {
			font-weight: 700;
			font-size: 3.6rem;
			line-height: 1.19;
			letter-spacing: 0.09em;
			color: #000000;

			@media screen and (max-width: 767px) {
				font-size: 2.2rem;
				line-height: 1.6;
			}

			&.small {

				@media print,
				screen and (min-width: 767.01px) {
					font-size: 3.2rem;
					letter-spacing: 0;
				}
			}
		}
	}

	&.type02 {
		position: relative;
		margin-bottom: 2rem;
		padding-left: 2.2rem;
		font-weight: 700;
		font-size: 2.4rem;
		line-height: 1.3;
		letter-spacing: 0.09em;

		@media screen and (max-width: 767px) {
			margin-bottom: 1.5rem;
			padding-left: 1.6rem;
			font-size: 1.8rem;
		}

		&:after {
			content: "";
			position: absolute;
			left: 0;
			top: 0.4rem;
			z-index: 1;
			display: block;
			width: 0.6rem;
			height: 2.8rem;
			background: #E50012;
			border-radius: 0.3rem;
		}

		@media screen and (max-width: 767px) {
			&:after {
				top: 0.2rem;
				width: 0.4rem;
				height: 2rem;
			}
		}
	}

	&.type03 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 9.6rem;
		height: 29rem;
		font-weight: 700;
		font-size: 3.6rem;
		line-height: 1.2;
		text-align: center;
		letter-spacing: 0.09em;
		color: #FFFFFF;
		background: #E50012 url(../img/parts/common_title_bg03.png) repeat 0 0;

		@media screen and (max-width: 767px) {
			margin-bottom: 3rem;
			font-size: 2.4rem;
			height: 16rem;
			background-size: auto 4rem;
		}
	}

	&.type05 {
		margin-bottom: 3.2rem;
		font-weight: 700;
		font-size: 2.9rem;
		line-height: 190%;
		letter-spacing: 0.02em;
		color: #E50012;

		@media screen and (max-width: 767px) {
			margin-bottom: 2rem;
			font-size: 1.8rem;
			line-height: 1.6;
		}
	}
}


/* ------------------------------------------- */
/* common-caption */
/* ------------------------------------------- */
.common-caption {
	&.type01 {
		margin-bottom: 4.1rem;
		font-weight: 700;
		font-size: 2.2rem;
		line-height: 210%;
		text-align: center;
		letter-spacing: 0.02em;

		@media screen and (max-width: 767px) {
			margin-bottom: 3rem;
			font-size: 1.6rem;
			line-height: 1.8;
			text-align: left;
		}
	}
}

/* ------------------------------------------- */
/* common-btn */
/* ------------------------------------------- */
.common-btn {

	&.type01 {
		.cover {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0 3rem;
			height: 6.4rem;
			font-weight: 700;
			font-size: 1.8rem;
			letter-spacing: 0.03em;
			color: #E50012;
			text-decoration: none;
			background: #FFFFFF;
			border-radius: 3.2rem;
			border: 0.1rem solid #E50012;

			@media (hover: hover) and (pointer: fine) {
				transition: ease 0.25s background-color;

				&:hover {
					color: #FFF;
					background-color: #E50012;
					border-color: #FFF;

					& span {
						&:after {
							background-size: 0, 100% auto;
						}
					}
				}
			}

			@media screen and (max-width: 767px) {
				height: 5rem;
				font-size: 1.4rem;
			}

			& span {
				position: relative;
				padding-right: 2rem;
				display: inline-block;

				&:after {
					content: "";
					position: absolute;
					right: 0;
					top: calc(50% + 1px);
					z-index: 1;
					display: block;
					width: 1rem;
					height: 1.4rem;
					background: url(../img/parts/icon_arrow01_red.svg) no-repeat center center / 100% auto, url(../img/parts/icon_arrow01_white.svg) no-repeat center center / 0;
					transform: translateY(-50%);
				}
			}

		}
	}

}

/* ------------------------------------------- */
/* common-select */
/* ------------------------------------------- */
.common-select {}

/* ------------------------------------------- */
/* common-list */
/* ------------------------------------------- */
.common-list {

	&.news {
		margin-bottom: 3.4rem;

		@media screen and (max-width: 767px) {
			margin-bottom: 2rem;
		}

		& li {
			border-bottom: 1px solid #A6A6A6;
		}

		& a {
			position: relative;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 2.4rem 3rem 2.4rem 0;
			text-decoration: none;

			@media (hover: hover) and (pointer: fine) {
				transition: ease 0.25s background;

				&:hover {
					background-color: rgba(200, 200, 200, 0.2);
				}
			}

			@media screen and (max-width: 767px) {
				padding: 2rem 0;
				overflow: hidden;
			}

			&:after {
				content: "";
				position: absolute;
				right: 0.4rem;
				top: calc(50% + 1px);
				z-index: 1;
				display: block;
				width: 1.3rem;
				height: 1.8rem;
				background: url(../img/parts/icon_arrow02_red.svg) no-repeat center center / 100% auto, url(../img/parts/icon_arrow02_white.svg) no-repeat center center / 0;
				transform: translateY(-50%);
			}

			@media screen and (max-width: 767px) {
				&:after {
					width: 1rem;
				}
			}
		}

		.list-date {
			flex-shrink: 0;
			font-weight: 400;
			letter-spacing: 0.02em;
			color: #838383;

			@media screen and (max-width: 767px) {
				width: 10rem;
				font-size: 1.2rem;
			}
		}

		.list-category {
			margin: 0 0 0 0.9rem;
			display: flex;
			flex-wrap: wrap;
			gap: 1rem;

			@media screen and (max-width: 767px) {
				width: calc(100% - 10rem - 0.9rem);
				gap: 0.5rem;
				flex-wrap: nowrap;
				overflow-x: auto;
			}

			& span {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;
				padding: 0 1rem;
				height: 3rem;
				font-weight: 400;
				font-size: 1.4rem;
				letter-spacing: 0.02em;
				color: #646464;
				background: #FFFFFF;
				border: 1px solid #646464;
				border-radius: 0.4rem;
				white-space: nowrap;

				@media screen and (max-width: 767px) {
					min-width: auto;
					height: 2rem;
					padding: 0 0.5rem;
					font-size: 1rem;

					&:nth-child(n+4) {
						display: none;
					}
				}
			}
		}

		.list-title {
			margin-top: 1.9rem;
			font-weight: 700;
			font-size: 1.8rem;
			letter-spacing: 0.02em;
			width: 100%;

			@media print,
			screen and (min-width: 767.01px) {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			@media screen and (max-width: 767px) {
				margin-top: 0.5rem;
				padding-right: 1.5rem;
				font-size: 1.6rem;
				line-height: 1.6;

				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}
	}


	&.rarity {

		& li {
			border-bottom: 1px solid #BCBCBC;

			@media screen and (max-width: 767px) {
				&:first-child {
					& a {
						padding-top: 0;
					}
				}
			}
		}

		& a {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			gap: 4rem;
			padding: 4rem 6.4rem 4rem 0;
			text-decoration: none;

			@media screen and (max-width: 767px) {
				padding: 3rem 0;
				gap: 1rem;
				flex-direction: column;
			}

			@media (hover: hover) and (pointer: fine) {
				transition: ease 0.25s background-color;

				&:hover {
					background-color: #FAFAFA;
				}
			}

			@media (hover: hover) and (pointer: fine) {
				&:hover {
					.list-text {
						.text-detail {
							&:after {
								background: #FAFAFA;
							}
						}
					}
				}
			}

			&:after {
				content: "";
				position: absolute;
				right: 0.4rem;
				top: calc(50% + 1px);
				z-index: 1;
				display: block;
				width: 1.3rem;
				height: 1.8rem;
				background: url(../img/parts/icon_arrow02_red.svg) no-repeat center center / 100% auto;
				transform: translateY(-50%);
			}

			@media screen and (max-width: 767px) {
				&:after {
					display: none;
				}
			}

		}

		.list-photo {
			width: 40rem;
			border: 1px solid #BCBCBC;
			border-radius: 2rem;
			overflow: hidden;

			@media screen and (max-width: 767px) {
				width: 100%;
				border-radius: 1rem;
			}

			& img {
				object-fit: scale-down;
				object-position: center center;
				width: 100%;
				height: 24.4rem;

				@media screen and (max-width: 767px) {
					height: 16rem;
				}
			}
		}

		.list-text {
			width: calc(100% - 40rem - 4rem);

			@media screen and (max-width: 767px) {
				width: 100%;
			}

			.text-option {
				display: flex;
				align-items: center;
				gap: 1rem;
				margin-bottom: 2.2rem;

				@media screen and (max-width: 767px) {
					margin-bottom: 0.6rem;
					align-items: flex-start;
				}

				.option-date {
					font-weight: 400;
					letter-spacing: 0.02em;
					color: #838383;

					@media screen and (max-width: 767px) {
						margin-top: 0.4rem;
						flex-shrink: 0;
						font-size: 1.2rem;
					}
				}

				.option-category {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					gap: 1rem;
					font-weight: 400;
					font-size: 1.4rem;
					letter-spacing: 0.02em;
					color: #646464;

					@media screen and (max-width: 767px) {
						gap: 0.5rem;
						font-size: 1rem;
					}

					& span {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						padding: 0.3rem 1.3rem;
						height: 3rem;
						background: #FFFFFF;
						border: 1px solid #646464;
						border-radius: 0.4rem;

						@media screen and (max-width: 767px) {
							padding: 0.3rem 0.5rem;
							height: 2rem;
						}
					}
				}
			}

			.text-title {
				margin-bottom: 1rem;
				font-weight: 700;
				font-size: 2rem;
				line-height: 1.9;
				letter-spacing: 0.02em;

				@media screen and (max-width: 767px) {
					position: relative;
					margin-bottom: 0.5rem;
					padding-right: 2rem;
					font-size: 1.6rem;
					line-height: 1.6;

					&:after {
						content: "";
						position: absolute;
						right: 0.4rem;
						top: calc(50% + 1px);
						z-index: 1;
						display: block;
						width: 1rem;
						height: 1.4rem;
						background: url(../img/parts/icon_arrow02_red.svg) no-repeat center center / 100% auto;
						transform: translateY(-50%);
					}
				}
			}

			.text-detail {
				position: relative;
				font-weight: 400;
				line-height: 190%;
				letter-spacing: 0.02em;
				color: #000000;

				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;

				&:after {
					content: "（続きを読む）";
					position: absolute;
					right: 0;
					bottom: 0;
					z-index: 1;
					display: inline-block;
					padding-left: 0.5rem;
					color: #E50012;
					background: #FFF;
					transition: ease 0.25s background-color;
				}
			}
		}

	}

	&.archive-category {

		display: flex;
		flex-wrap: wrap;
		gap: 1.4rem;
		margin-bottom: 6.1rem;

		@media screen and (max-width: 767px) {
			gap: 0.5rem;
			margin-bottom: 2rem;
		}

		& li {

			& a {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 2rem;
				min-width: 12.7rem;
				height: 4.6rem;

				font-weight: 400;
				letter-spacing: 0.02em;
				color: #5E5E5E;
				background: #E9E9E9;
				border-radius: 0.4rem;

				@media screen and (max-width: 767px) {
					min-width: auto;
					padding: 0 1rem;
					font-size: 1.2rem;
					height: 3rem;
				}

				@media (hover: hover) and (pointer: fine) {
					transition: ease 0.25s color, ease 0.25s background-color;

					&:hover {
						color: #FFF;
						background-color: #E50012;
						text-decoration: none;
					}
				}
			}

			&.active {
				& a {
					color: #FFF;
					background: #E50012;

					@media (hover: hover) and (pointer: fine) {
						&:hover {
							background-color: #000;
						}
					}
				}
			}
		}
	}

	&.products {
		display: flex;
		flex-wrap: wrap;
		gap: 5rem;

		@media screen and (max-width: 767px) {
			gap: 3rem;
		}

		>li {
			width: calc(100% / 3 - 5rem * 2 / 3);

			@media screen and (max-width: 767px) {
				width: 100%;
			}
		}

		& a {
			display: block;
			text-decoration: none;

			@media (hover: hover) and (pointer: fine) {
				& img {
					transition: ease 0.25s transform;
				}

				&:hover {
					.list-text {
						.text-title {
							color: #E50012;
						}
					}

					& img {
						transform: scale(1.2);
					}
				}
			}
		}

		.list-photo {
			position: relative;
			margin-bottom: 3.1rem;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 28.6rem;
			border: 0.2rem solid #DDDDDD;
			border-radius: 2rem;
			overflow: hidden;

			@media screen and (max-width: 767px) {
				margin-bottom: 1.5rem;
				height: 16rem;
				border-radius: 1rem;
				border-width: 1px;
			}

			& img {
				object-fit: scale-down;
				object-position: center center;
				height: 100%;
			}

			.photo-main {

				// width: 100%;
				& img {
					// object-fit: cover;
					// width: 100%;
				}
			}

			.photo-category {
				position: absolute;
				left: 2.2rem;
				bottom: 1.8rem;
				display: flex;
				flex-wrap: wrap;
				gap: 1rem;

				@media screen and (max-width: 767px) {
					left: 1rem;
					bottom: 1rem;
					gap: 0.5rem;
				}

				& li {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0 1rem;
					height: 3rem;
					font-weight: 600;
					font-size: 1.4rem;
					text-align: center;
					letter-spacing: 0.02em;
					color: #FFFFFF;
					border-radius: 0.4rem;
					background: #E50012;

					@media screen and (max-width: 767px) {
						font-size: 1.2rem;
						height: 2.4rem;
					}
				}
			}
		}

		.list-text {
			.text-title {
				position: relative;
				margin-bottom: 1.4rem;
				padding-right: 2rem;
				font-weight: 700;
				font-size: 2rem;
				line-height: 1.2;
				letter-spacing: 0.09em;
				transition: ease 0.25s color;

				@media screen and (max-width: 767px) {
					margin-bottom: 1rem;
					font-size: 1.6rem;
				}

				&:after {
					content: "";
					position: absolute;
					right: 0.4rem;
					top: calc(50% + 1px);
					z-index: 1;
					display: block;
					width: 1rem;
					height: 1.4rem;
					background: url(../img/parts/icon_arrow02_red.svg) no-repeat center center / 100% auto;
					transform: translateY(-50%);
				}
			}

			.text-description {
				margin-bottom: 2rem;
				font-weight: 400;
				line-height: 170%;
				letter-spacing: 0.02em;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}

			.text-detail {
				display: flex;
				flex-direction: column;
				gap: 1.1rem;
				margin-top: 1.6rem;
				padding: 2rem 3rem;
				background: #F8F8F8;
				border-radius: 0.6rem;

				@media screen and (max-width: 767px) {
					padding: 1.5rem;
					font-size: 1.2rem;
				}

				>div {
					display: flex;
					flex-wrap: wrap;
				}

				& dt {
					width: 8.2rem;
					font-weight: 600;
					line-height: 140%;
					letter-spacing: 0.02em;
					color: #E50012;

					@media screen and (max-width: 767px) {
						width: 6rem;
					}
				}

				& dd {
					width: calc(100% - 8.2rem);
					font-weight: 400;
					line-height: 140%;
					letter-spacing: 0.02em;

					@media screen and (max-width: 767px) {
						width: calc(100% - 6rem);
					}
				}
			}

			.text-recommend {
				margin-top: 2rem;

				@media screen and (max-width: 767px) {
					margin-top: 1.5rem;
				}

				.recommend-title {
					margin-bottom: 1.4rem;
					font-weight: 700;
					font-size: 1.8rem;
					line-height: 1.22;
					letter-spacing: 0.09em;

					@media screen and (max-width: 767px) {
						margin-bottom: 0.6rem;
						font-size: 1.6rem;
					}
				}

				.recommend-list {
					display: flex;
					flex-direction: column;
					gap: 0.5rem;

					& li {
						position: relative;
						padding-left: 2rem;
						font-weight: 400;
						line-height: 1.4;
						letter-spacing: 0.02em;

						@media screen and (max-width: 767px) {
							padding-left: 1.6rem;
						}

						&:after {
							content: "";
							position: absolute;
							left: 0;
							top: 0.9rem;
							z-index: 1;
							display: block;
							width: 0.8rem;
							height: 0.8rem;
							border-radius: 50%;
							background-color: #E50012;
						}

						@media screen and (max-width: 767px) {
							&:after {
								top: 0.8rem;
								width: 0.6rem;
								height: 0.6rem;
							}
						}
					}
				}
			}

			.text-category {
				display: flex;
				flex-wrap: wrap;
				gap: 1rem;
				margin-top: 1.6rem;

				& li {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding: 0 1rem;
					height: 2.5rem;
					font-weight: 500;
					font-size: 1.2rem;
					text-align: center;
					letter-spacing: 0.02em;
					background: #EBEBEB;
					border-radius: 0.4rem;

					@media screen and (max-width: 767px) {
						font-size: 1rem;
						height: 2.2rem;
					}
				}
			}
		}
	}

	&.dot {

		font-weight: 400;
		font-size: 1.8rem;
		line-height: 1.9;
		letter-spacing: 0.02em;
		color: #000000;
		text-align: justify;
		text-justify: inter-ideograph;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			line-height: 1.8;
		}

		& li {
			position: relative;
			padding-left: 1.8rem;

			@media screen and (max-width: 767px) {
				padding-left: 1.6rem;
			}

			&:before {
				content: "・";
				position: absolute;
				left: 0;
			}
		}
	}
}

/* ------------------------------------------- */
/* common-text */
/* ------------------------------------------- */
.common-text {

	& a {
		color: #E50012;
		text-decoration: underline;

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				text-decoration: none;
			}
		}
	}

	&.type01 {
		font-weight: 400;
		font-size: 1.8rem;
		line-height: 1.9;
		letter-spacing: 0.02em;
		color: #000000;
		text-align: justify;
		text-justify: inter-ideograph;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			line-height: 1.8;
		}

		& p {
			margin-bottom: 3rem;

			@media screen and (max-width: 767px) {
				margin-bottom: 1.5rem;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

/* ------------------------------------------- */
/* common-table */
/* ------------------------------------------- */
.common-table {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;

	&.type01 {

		& tr {
			border-bottom: 1px solid #BCBCBC;
		}

		& th,
		& td {
			padding: 2rem 1rem;
			font-size: 1.8rem;
			line-height: 190%;
			vertical-align: top;
			text-align: left;
			letter-spacing: 0.02em;

			@media screen and (max-width: 767px) {
				display: block;
				padding: 1rem 0;
				font-size: 1.6rem;
			}
		}

		& th {
			width: 18.2rem;
			font-weight: 600;
			color: #E50012;

			@media screen and (max-width: 767px) {
				padding-bottom: 0;
				width: 100%;
			}
		}

		& td {
			@media screen and (max-width: 767px) {
				padding-top: 0;
			}
		}

		.link-access {
			margin-left: 2rem;
			color: #E50012;
			text-decoration: none;

			@media screen and (max-width: 767px) {
				margin-left: 1rem;
			}

			@media (hover: hover) and (pointer: fine) {
				&:hover {
					& span {
						text-decoration: underline;
					}
				}
			}

			& span {
				display: inline-block;
				position: relative;
				padding-left: 2.2rem;

				@media screen and (max-width: 767px) {
					padding-left: 1.5rem;
				}

				&:after {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					z-index: 1;
					display: block;
					width: 1.4rem;
					height: 2rem;
					background: url(../../common/img/parts/icon_pin01_red.svg) no-repeat center bottom / 100% auto;
					transform: translateY(-50%);
				}

				@media screen and (max-width: 767px) {
					&:after {
						top: calc(50% + 1px);
						width: 1.1rem;
						height: 1.6rem;
					}
				}
			}
		}
	}

	&.type02 {

		margin: 4rem 0 6rem;
		font-size: 1.8rem;
		line-height: 1.8;
		letter-spacing: 0.02em;
		border-bottom: 1px solid #BCBCBC;

		@media screen and (max-width: 767px) {
			margin: 2rem 0 4rem;
			font-size: 1.4rem;
			border: 0;
		}

		& a {
			display: inline;
			color: #E50012;
			text-decoration: underline;
		}

		& tr {
			border-top: 1px solid #BCBCBC;

			@media screen and (max-width: 767px) {
				display: block;
				margin-bottom: 1rem;
				border: 1px solid #BCBCBC;
			}
		}

		& th,
		& td {
			padding: 2rem;

			@media screen and (max-width: 767px) {
				display: block;
				padding: 1rem;
			}
		}

		& th {
			width: 20.5rem;
			font-weight: 700;
			text-align: left;
			vertical-align: top;
			background: #F5F5F5;

			@media screen and (max-width: 767px) {
				width: 100%;
			}
		}
	}

}

/* table-scroll */
@media screen and (max-width: 767px) {
	.table-scroll {
		position: relative;
		padding-bottom: 2rem;
		overflow-x: scroll;

		&:after {
			content: "←";
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 1;
			margin-left: -1.5rem;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			width: 3rem;
			height: 3rem;
			border-radius: 1.5rem;
			border: 0.1rem solid #000;
			animation: arrowtable 2s infinite forwards;
		}

		.common-table {
			width: 80rem;
		}
	}
}

@keyframes arrowtable {
	50% {
		opacity: 1;
		right: 0;
	}

	100% {
		opacity: 0;
		right: 100%;
	}
}

/* ------------------------------------------- */
/* アニメーション用 */
/* ------------------------------------------- */
/*
.moveFlag {
	position: relative;
	top: -5rem;
	opacity: 0;
	transition: ease 0.5s top, ease 0.5s opacity;
}
.moveFlag.on {
	top: 0;
	opacity: 1;
}
@media print {
	.moveFlag {
		top: 0;
		opacity: 1;
	}
}
*/

/* --------------------------------------------------------------- */
/*  margin padding */
/* --------------------------------------------------------------- */
.mb0 {
	margin-bottom: 0rem !important;
}

.mb10 {
	margin-bottom: 1rem !important;
}

.mb20 {
	margin-bottom: 2rem !important;
}

.mb30 {
	margin-bottom: 3rem !important;
}

.mb40 {
	margin-bottom: 4rem !important;
}

.mb50 {
	margin-bottom: 5rem !important;
}

.mb60 {
	margin-bottom: 6rem !important;
}

.mb70 {
	margin-bottom: 7rem !important;
}

.mb80 {
	margin-bottom: 8rem !important;
}

.mb90 {
	margin-bottom: 9rem !important;
}

.mb100 {
	margin-bottom: 10rem !important;
}

@media screen and (max-width: 767px) {
	.mb10 {
		margin-bottom: 0.5rem !important;
	}

	.mb20 {
		margin-bottom: 1rem !important;
	}

	.mb30 {
		margin-bottom: 1.5rem !important;
	}

	.mb40 {
		margin-bottom: 2rem !important;
	}

	.mb50 {
		margin-bottom: 2.5rem !important;
	}

	.mb60 {
		margin-bottom: 3rem !important;
	}

	.mb70 {
		margin-bottom: 3.5rem !important;
	}

	.mb80 {
		margin-bottom: 4rem !important;
	}

	.mb90 {
		margin-bottom: 4.5rem !important;
	}

	.mb100 {
		margin-bottom: 5rem !important;
	}
}

.mt0 {
	margin-top: 0rem !important;
}

.mt10 {
	margin-top: 1rem !important;
}

.mt20 {
	margin-top: 2rem !important;
}

.mt30 {
	margin-top: 3rem !important;
}

.mt40 {
	margin-top: 4rem !important;
}

.mt50 {
	margin-top: 5rem !important;
}

.mt60 {
	margin-top: 6rem !important;
}

.mt70 {
	margin-top: 7rem !important;
}

.mt80 {
	margin-top: 8rem !important;
}

.mt90 {
	margin-top: 9rem !important;
}

@media screen and (max-width: 767px) {
	.mt10 {
		margin-top: 0.5rem !important;
	}

	.mt20 {
		margin-top: 1rem !important;
	}

	.mt30 {
		margin-top: 1.5rem !important;
	}

	.mt40 {
		margin-top: 2rem !important;
	}

	.mt50 {
		margin-top: 2.5rem !important;
	}

	.mt60 {
		margin-top: 3rem !important;
	}

	.mt70 {
		margin-top: 3.5rem !important;
	}

	.mt80 {
		margin-top: 4rem !important;
	}

	.mt90 {
		margin-top: 4.5rem !important;
	}

	.mt100 {
		margin-top: 5rem !important;
	}
}

.pb0 {
	padding-bottom: 0 !important;
}

.pb10 {
	padding-bottom: 1rem !important;
}

.pb20 {
	padding-bottom: 2rem !important;
}

.pb30 {
	padding-bottom: 3rem !important;
}

.pb40 {
	padding-bottom: 4rem !important;
}

.pb50 {
	padding-bottom: 5rem !important;
}

.pb60 {
	padding-bottom: 6rem !important;
}

.pb70 {
	padding-bottom: 7rem !important;
}

.pb80 {
	padding-bottom: 8rem !important;
}

.pb90 {
	padding-bottom: 9rem !important;
}

.pb100 {
	padding-bottom: 10rem !important;
}

@media screen and (max-width: 767px) {
	.pb10 {
		padding-bottom: 0.5rem !important;
	}

	.pb20 {
		padding-bottom: 1rem !important;
	}

	.pb30 {
		padding-bottom: 1.5rem !important;
	}

	.pb40 {
		padding-bottom: 2rem !important;
	}

	.pb50 {
		padding-bottom: 2.5rem !important;
	}

	.pb60 {
		padding-bottom: 3rem !important;
	}

	.pb70 {
		padding-bottom: 3.5rem !important;
	}

	.pb80 {
		padding-bottom: 4rem !important;
	}

	.pb90 {
		padding-bottom: 4.5rem !important;
	}

	.pb100 {
		padding-bottom: 5rem !important;
	}
}

.pt0 {
	padding-top: 0 !important;
}

.pt10 {
	padding-top: 1rem !important;
}

.pt20 {
	padding-top: 2rem !important;
}

.pt30 {
	padding-top: 3rem !important;
}

.pt40 {
	padding-top: 4rem !important;
}

.pt50 {
	padding-top: 5rem !important;
}

.pt60 {
	padding-top: 6rem !important;
}

.pt70 {
	padding-top: 7rem !important;
}

.pt80 {
	padding-top: 8rem !important;
}

.pt90 {
	padding-top: 9rem !important;
}

.pt100 {
	padding-top: 10rem !important;
}

@media screen and (max-width: 767px) {
	.pt10 {
		padding-top: 0.5rem !important;
	}

	.pt20 {
		padding-top: 1rem !important;
	}

	.pt30 {
		padding-top: 1.5rem !important;
	}

	.pt40 {
		padding-top: 2rem !important;
	}

	.pt50 {
		padding-top: 2.5rem !important;
	}

	.pt60 {
		padding-top: 3rem !important;
	}

	.pt70 {
		padding-top: 3.5rem !important;
	}

	.pt80 {
		padding-top: 4rem !important;
	}

	.pt90 {
		padding-top: 4.5rem !important;
	}

	.pt100 {
		padding-top: 5rem !important;
	}
}

/* ------------------------------------------- */
/* pagination */
/* ------------------------------------------- */
.single-post-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 7rem;

	@media screen and (max-width: 767px) {
		margin-top: 3.5rem;
	}

	.back {
		margin: 0 8.3rem;

		@media screen and (max-width: 767px) {
			margin: 0 1rem;
		}
	}

	.prev,
	.next {
		width: 14rem;

		@media screen and (max-width: 767px) {
			width: 4.6rem;
		}

		& a {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			width: 100%;
			height: 4.6rem;
			font-weight: 500;
			text-decoration: underline;
			letter-spacing: 0.08rem;
			color: #000;
			box-sizing: border-box;

			@media screen and (max-width: 767px) {
				padding: 0;
				font-size: 0;
				color: transparent;
			}

			@media (hover: hover) and (pointer: fine) {
				&:hover {
					text-decoration: none;
				}
			}

			&:after {
				content: "";
				position: absolute;
				top: 50%;
				margin-top: -2.3rem;
				display: block;
				width: 4.6rem;
				height: 4.6rem;
				border-radius: 2.3rem;
				background-color: #2987d9;
			}

			@media (hover: hover) and (pointer: fine) {
				&:hover:after {
					background-color: #2987d9;
				}
			}

			@media screen and (max-width: 767px) {
				.&:after {
					width: 4.8rem;
					height: 4.8rem;
					margin-top: -2.4rem;
					border-radius: 0;
				}
			}

			&:before {
				content: "";
				position: absolute;
				top: 50%;
				z-index: 1;
				margin-top: -0.4rem;
				display: block;
				width: 0.8rem;
				height: 0.8rem;
				border-top: 0.2rem solid #fff;
				box-sizing: border-box;
				transition: ease 0.25s border;
			}
		}
	}

	.prev {
		& a {
			padding-left: 7.3rem;

			&:after {
				left: 0;
			}

			&:before {
				left: 2.2rem;
				border-left: 0.2rem solid #fff;
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}

			@media (hover: hover) and (pointer: fine) {
				&:hover:before {
					border-left-color: #fff;
				}
			}
		}
	}

	.next {
		& a {
			padding-right: 7.3rem;

			&:after {
				right: 0;
			}

			&:before {
				right: 2.2rem;
				border-right: 0.2rem solid #fff;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}
		}
	}
}

/* navigation pagination */
.navigation.pagination {
	margin: 7rem 0 0;

	@media screen and (max-width: 767px) {
		margin: 3rem 0 0;
	}

	.disable {
		display: none;
	}

	.nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;

		@media screen and (max-width: 767px) {
			position: relative;
		}
	}

	.pager {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin: 0 0.8rem;
		width: 5rem;
		height: 5rem;
		font-family: "Roboto", sans-serif;
		font-weight: bold;
		letter-spacing: 0.08em;
		color: #5E5E5E;
		background: #E9E9E9;
		text-decoration: none;
		transition: ease 0.25s all;
		border-radius: 2.5rem;

		@media screen and (max-width: 767px) {
			margin: 0 0.4rem;
			width: 4rem;
			height: 4rem;
		}

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				color: #fff;
				background: #E50012;
			}
		}
	}

	.pager.current {
		color: #fff;
		font-weight: bold;
		background: #E50012;
		border-color: #E50012;
	}

	.next,
	.prev {
		@media screen and (max-width: 767px) {
			/*position: absolute;*/
			/*bottom: 0;*/
			/*width: 48%;*/
			/*height: 4rem;*/
		}

		& a {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			width: 5rem;
			height: 5rem;
			font-size: 0;
			font-family: "Roboto", sans-serif;
			font-weight: bold;
			letter-spacing: 0.08em;
			text-decoration: none;
			background: #fff;

			@media screen and (max-width: 767px) {
				width: 4rem;
				height: 4rem;
			}

			@media (hover: hover) and (pointer: fine) {
				&:hover {
					&:after {
						background-size: 0, 100% auto;
					}
				}
			}

			&:after {
				content: "";
				position: absolute;
				top: calc(50% - 0.9rem);
				display: block;
				width: 1.2rem;
				height: 1.7rem;
				background: url(../img/parts/icon_pagination_gray.svg) no-repeat center center / 100% auto, url(../img/parts/icon_pagination_red.svg) no-repeat center center / 0;
			}

			@media screen and (max-width: 767px) {
				&:after {
					width: 1rem;
					height: 1.5rem;
					top: calc(50% - 0.75rem);
				}
			}
		}
	}

	.prev {
		margin-right: 1rem;

		@media screen and (max-width: 767px) {
			margin-right: 0.5rem;
		}

		& a {
			&:after {
				left: calc(50% - 0.6rem);
			}
		}
	}

	.next {
		margin-left: 1rem;

		@media screen and (max-width: 767px) {
			margin-left: 0.5rem;
		}

		& a {
			&:after {
				right: calc(50% - 0.6rem);
				transform: rotateY(180deg);
			}

		}
	}
}

/* ------------------------------------------- */
/* wordpress パスワードフォーム調整用 */
/* ------------------------------------------- */

.post-password-form {
	padding: 100px 30px;
	line-height: 1.8;
	text-align: center;
}