/* ================================================================
   CSS VARIABLES
   ================================================================ */
:root {
	--blue: #1882ba;
	--blue-dk: #0f5f8a;
	--blue-bg: rgba(26, 136, 199, 0.75);
	--light-blue: #f2f6fb;
	--dark: #2d2d2d;
	--mid: #535353;
	--light: #a7a7a7;
	--bg-gray: #f3f3f3;
	--bg-blue: #f3f8fa;
	--white: #ffffff;
	--header-h-sp: 50px;
	--header-h-pc: 60px;
	--bottom-bar-h: 95px;
	--font-body: YuGothic, "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	--font-serif: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "Yu Mincho", serif;
	--font-num: 'Quicksand', sans-serif;
	--font-script: 'Nothing You Could Do', cursive;
}

/* ================================================================
   RESET & BASE
   ================================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	width: 100%;
}

body {
	font-family: var(--font-body);
	color: var(--mid);
	font-size: 100%;
	line-height: 1.5;
	letter-spacing: .05em;
	text-align: center;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	padding-top: var(--header-h-sp);
	padding-bottom: var(--bottom-bar-h);
}

img {
	vertical-align: bottom;
	border: 0;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--blue);
	text-decoration: none;
	transition: .3s ease-out;
}

a:hover {
	opacity: .8;
}

ul {
	list-style: none;
}

p {
	display: block;
	padding-bottom: .6em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	font-style: normal;
}

/* ================================================================
   UTILITY
   ================================================================ */
.fit {
	width: 100%;
	height: auto;
}

.center {
	text-align: center;
}

.serif {
	font-family: var(--font-serif);
}

/* ================================================================
   SP HEADER
   ================================================================ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-h-sp);
	background: rgba(255, 255, 255, .88);
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-header .hd-left,
.site-header .hd-right {
	display: none;
}

.site-header .hd-center {
	text-align: center;
}

.site-header .hd-center img {
	height: 32px;
	width: auto;
}

/* ================================================================
   HERO
   ================================================================ */
#hero {
	position: relative;
	width: 100%;
	height: 56vw;
	overflow: hidden;
}

#hero video {
	position: relative;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
}

.hero-copy {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-shadow: 0 0 8px rgba(0, 0, 0, .5);
	opacity: .85;
	pointer-events: none;
}

.hero-copy .main-title {
	font-family: var(--font-script);
	font-size: clamp(28px, 8vw, 70px);
	line-height: 1.2;
	letter-spacing: 2px;
	margin-bottom: .2em;
	padding-bottom: 0;
}

.hero-copy .sub-en {
	font-family: var(--font-num);
	font-size: clamp(9px, 2.2vw, 14px);
	letter-spacing: .5em;
	margin-bottom: 2em;
}

.hero-copy .sub-ja {
	font-family: var(--font-serif);
	font-size: clamp(12px, 3vw, 18px);
	letter-spacing: .2em;
}

/* ================================================================
   UNKOU BAR
   ================================================================ */
section#unkou {
	padding: 15px;
}

.unkou-bar {
	background: #dbe7f0;
	padding: 12px 15px;
	font-size: 12px;
	line-height: 1.7;
	text-align: center;
	color: var(--dark);
	position: relative;
	z-index: 1;
}

.unkou-bar:after {
	content: "";
	z-index: 1;
	border: 1px solid #fff;
	right: 1px;
	left: 1px;
	bottom: 1px;
	top: 1px;
	position: absolute;
	pointer-events:none;
}

.unkou-bar .unkou-title {
	font-weight: bold;
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
}

/* ================================================================
   SECTION BASE
   ================================================================ */
.section {
	padding: 40px 15px;
	text-align: left;
}

.section-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.sec-heading {
	text-align: center;
	margin-bottom: 30px;
}

.sec-heading h2 {
	font-size: 22px;
	letter-spacing: .1em;
	color: var(--dark);
}

.sec-heading .sub-en {
	font-family: var(--font-num);
	font-size: 13px;
	color: var(--light);
	letter-spacing: .15em;
	display: block;
	margin-top: 4px;
}

/* ================================================================
   NEWS SECTION
   ================================================================ */
#news {
	background: var(--white);
	padding: 15px 15px 40px;
}

.news-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.top-news-thumb {
	position: relative;
	flex-shrink: 0;
}

.top-news-thumb img {
	width: 100%;
	display: block;
}

.news-label {
	position: absolute;
	top: 0;
	left: 0;
	background: #d57e05;
	color: #fff;
	font-size: 11px;
	padding: 6px 12px;
}

.news-btn {
	padding: 8px 18px;
	font-size: 12px;
	background: #00000080;
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: var(--white);
}

.news-list h3 {
	font-size: 20px;
	letter-spacing: .1em;
	margin-bottom: 15px;
	color: var(--dark);
	text-align: center;
}

.news-list h3 .sub-en {
	font-family: var(--font-num);
	font-size: 13px;
	color: var(--light);
	display: block;
}

.news-list ul {
	padding: 0;
}

.news-list ul li {
	border-bottom: 1px dotted #e1e1e1;
	padding: 8px 0;
	font-size: 13px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.news-list .news-date {
	font-family: var(--font-num);
	color: var(--light);
	white-space: nowrap;
	font-size: 12px;
	padding-top: 2px;
}

.news-list a {
	color: var(--dark);
}

.news-list a:hover {
	color: var(--blue);
}

/* ================================================================
   PLANS SECTION
   ================================================================ */
#plans {
	background: var(--light-blue);
}

.plans-link-wrap {
	text-align: center;
	margin-bottom: 20px;
}

.btn-list-all {
	display: inline-block;
	padding: 8px 18px;
	background: var(--blue);
	color: #fff;
	font-size: 13px;
	border-radius: 50px;
	letter-spacing: .05em;
}

.btn-list-all:hover {
	background: var(--blue-dk);
	opacity: 1;
	color: #fff;
}

.btn-list-all i {
	margin-left: 6px;
}

.plan-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 5px;
}

.plan-card {
	background: #fff;
	display: flex;
	border: 1px solid #e8e8e8;
}

.plan-card .thumb {
	position: relative;
	overflow: hidden;
	padding: 5px;
}

.plan-card .thumb img {
	width: 80px;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.plan-card:hover .thumb img {
	transform: scale(1.04);
}

.plan-card .plan-body {
	padding: 12px;
	flex: 1;
}

.plan-card .plan-title {
	font-size: 14px;
	color: var(--dark);
	line-height: 1;
}

.plan-card .plan-desc {
	font-size: 12px;
	color: var(--light);
	line-height: 1.6;
	padding: 0;
	margin:0;
}

/* ================================================================
   FACILITY SECTION
   ================================================================ */
#facility {
	background: var(--white);
}

.col2-block {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 50px;
}

.col2-block:last-child {
	margin-bottom: 0;
}

.col2-block .col-text h3 {
	font-size: 18px;
	color: var(--dark);
	letter-spacing: .1em;
	line-height: 1.5;
	margin-bottom: 15px;
}

.col2-block .col-text p {
	font-family: var(--font-serif);
	font-size: 13px;
	line-height: 1.9;
	color: var(--mid);
}

.col2-block .col-img img {
	width: 100%;
	display: block;
}

.facility-text span {
	font-weight: 600;
}

.main-facilities {
	background: var(--bg-gray);
	padding: 1rem;
}

.main-facilities span {
	display: block;
	background: var(--mid);
	color: var(--white);
	width: fit-content;
	padding: 0 10px;
	margin-bottom: 5px;
}


/* ================================================================
   INTRO SECTION
   ================================================================ */
#intro {
	background: var(--bg-blue);
}

/* ================================================================
   CTA BUTTONS
   ================================================================ */
#cta {
	background: var(--white);
	padding: 30px 15px;
}

.cta-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 800px;
	margin: 0 auto;
}

.cta-btn {
	display: block;
	padding: 16px;
	background: var(--blue);
	color: #fff;
	font-size: 14px;
	letter-spacing: .1em;
	text-align: center;
	transition: background .2s;
}

.cta-btn:hover {
	background: var(--blue-dk);
	opacity: 1;
	color: #fff;
}

/* ================================================================
   SNS
   ================================================================ */
#sns {
	display: none;
}

.sns-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--dark);
	font-size: 15px;
}

.sns-link i {
	font-size: 22px;
	color: var(--blue);
}

.sns-link:hover {
	color: var(--blue);
	opacity: 1;
}

/* ================================================================
   FOOTER
   ================================================================ */
footer {
	background: var(--bg-gray);
	color: var(--dark);
	padding: 30px 15px 20px;
	font-family: var(--font-serif);
	font-size: 12px;
}

.footer-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.footer-logo img {
	height: 60px;
	width: auto;
}

.footer-addr {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--mid);
	text-align: center;
}

.footer-menu {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

.footer-menu a {
	color: var(--mid);
	font-size: 12px;
	display: block;
	padding: 4px 0;
	border-bottom: 1px dotted #ddd;
}

.footer-menu a:hover {
	color: var(--blue);
	opacity: 1;
}

.footer-inner .sns-link {
	margin-top: 10px;
}

.copyright {
	text-align: center;
	font-family: var(--font-num);
	font-size: 11px;
	color: var(--light);
	padding-top: 20px;
	letter-spacing: .05em;
}

/* ================================================================
   SP BOTTOM FIXED BAR
   ================================================================ */
.sp-bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 950;
	/* モーダル(800)より上 */
}

.sp-bottom-nav {
	display: flex;
	height: 50px;
	background: var(--blue);
}

.sp-bottom-nav a {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: .05em;
	border-right: 1px solid rgba(255, 255, 255, .2);
	transition: background .15s;
}

.sp-bottom-nav a:last-child {
	border-right: none;
}

.sp-bottom-nav a:hover {
	background: var(--blue-dk);
	opacity: 1;
}

.sp-bottom-nav a .sub-en {
	font-family: var(--font-num);
	font-size: 10px;
	color: rgba(255, 255, 255, .7);
}

.sp-bottom-nav .menu-btn {
	flex: 0 0 55px;
	background: #fff !important;
	/* 常時白 */
	color: var(--dark);
	font-family: var(--font-num);
	font-size: 11px;
	gap: 4px;
	border-right: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.sp-bottom-nav .menu-btn:hover {
	opacity: 1;
	background: #fff !important;
}

/* ハンバーガー三本線 */
.hamburger {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}

.hamburger span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--dark);
	border-radius: 1px;
	transition: .2s;
}

/* 開いているとき: ハンバーガー非表示→✕表示 */
.menu-btn .menu-label-close {
	display: none;
	font-size: 20px;
	line-height: 1;
	color: var(--dark);
}

.menu-btn .menu-label-open {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

body.menu-is-open .menu-btn .menu-label-close {
	display: block;
}

body.menu-is-open .menu-btn .menu-label-open {
	display: none;
}

.sp-bottom-tel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #111;
	height: 45px;
	color: var(--light);
}

.sp-bottom-tel a {
	font-family: var(--font-num);
	font-size: 16px;
	letter-spacing: .1em;
	color: var(--light);
}

.sp-bottom-tel a i {
	margin-right: 4px;
}

.sp-bottom-tel .time {
	font-size: 11px;
	letter-spacing: .05em;
}

/* ================================================================
   PC SIDE NAV (fixed left)
   ================================================================ */
.pc-side-nav {
	display: none;
}

/* ================================================================
   PC RIGHT MENU BUTTON & PANEL
   ================================================================ */
.pc-menu-btn {
	display: none;
}

.pc-menu-panel {
	display: none;
}

/* ================================================================
   PC: min-width 801px
   ================================================================ */
@media screen and (min-width: 801px) {
	body {
		padding-top: var(--header-h-pc);
		padding-bottom: 0;
	}

	/* ---- HEADER ---- */
	.site-header {
		height: var(--header-h-pc);
		padding: 0 60px;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.site-header .hd-left,
	.site-header .hd-right {
		display: block;
	}

	.site-header .hd-left h1 {
		font-size: 11px;
		color: var(--mid);
		text-align: left;
		font-weight: normal;
	}

	.site-header .hd-center img {
		height: 40px;
	}

	.site-header .hd-right {
		text-align: right;
	}

	.site-header .hd-tel {
		font-family: var(--font-num);
		font-size: 22px;
		letter-spacing: .1em;
		color: var(--dark);
		line-height: 1;
	}

	.site-header .hd-tel .pre {
		font-size: 11px;
		color: var(--mid);
		margin-right: 6px;
		letter-spacing: .05em;
	}

	.site-header .hd-tel .hours {
		display: block;
		font-size: 11px;
		color: var(--light);
		letter-spacing: .05em;
		margin-top: 3px;
	}

	/* ---- SP BOTTOM BAR: hidden ---- */
	.sp-bottom-bar {
		display: none;
	}

	/* ---- PC SIDE NAV (left, fixed) ---- */
	.pc-side-nav {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		top: 65px;
		z-index: 500;
		/* メニューパネル(450)より上 */
		gap: 5px;
	}

	.pc-side-nav a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100px;
		padding: 12px 0;
		background: var(--blue-bg);
		color: #fff;
		font-size: 13px;
		letter-spacing: .05em;
		backdrop-filter: blur(4px);
		transition: background .15s;
	}

	.pc-side-nav a:hover {
		background: var(--blue);
		opacity: 1;
	}

	.pc-side-nav a .sub-en {
		font-family: var(--font-num);
		font-size: 10px;
		color: rgba(255, 255, 255, .7);
		margin-top: 2px;
	}

	/* ---- PC MENU BUTTON (fixed right) ---- */
	.pc-menu-btn {
		display: flex;
		align-items: center;
		gap: 8px;
		position: fixed;
		right: 0;
		top: 65px;
		z-index: 500;
		background: var(--blue-bg);
		color: #fff;
		padding: 12px 18px;
		font-size: 14px;
		letter-spacing: .1em;
		cursor: pointer;
		border: none;
		font-family: var(--font-num);
		backdrop-filter: blur(4px);
		transition: background .15s;
	}

	.pc-menu-btn[aria-expanded="true"] {
		background: transparent;
	}

	.pc-menu-btn:hover {
		background: var(--blue);
	}

	.pc-menu-btn[aria-expanded="true"]:hover {
		background: transparent;
	}

	.pc-menu-btn .btn-icon {
		font-size: 16px;
	}

	/* 開いているとき */
	body.pc-menu-is-open .pc-menu-btn .btn-icon-open {
		display: none;
	}

	body.pc-menu-is-open .pc-menu-btn .btn-icon-close {
		display: inline;
	}

	.pc-menu-btn .btn-icon-close {
		display: none;
	}

	/* ---- PC MENU PANEL (fixed right side) ---- */
	.pc-menu-panel {
		display: block;
		position: fixed;
		top: 0;
		right: -320px;
		/* 初期状態: 画面外 */
		width: 320px;
		height: 100vh;
		background: rgba(26, 136, 199, 0.7);
		backdrop-filter: blur(6px);
		z-index: 450;
		overflow-y: auto;
		padding: 110px 0 40px;
		transition: right .3s ease;
		text-align: left;
	}

	body.pc-menu-is-open .pc-menu-panel {
		right: 0;
	}

	/* パネル内ナビ */
	.pc-panel-nav ul {
		padding: 0;
		margin: 0;
	}

	.pc-panel-nav>ul>li {
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}

	.pc-panel-nav>ul>li:first-child {
		border-top: 1px solid rgba(255, 255, 255, .15);
	}

	.pc-panel-nav>ul>li>a,
	.pc-panel-nav>ul>li>span.pc-accordion-trigger {
		display: block;
		padding: 12px 20px;
		color: var(--white);
		font-size: 14px;
		letter-spacing: .08em;
		cursor: pointer;
		position: relative;
		transition: background .15s;
	}
	
	.pc-panel-nav>ul>li>span.pc-accordion-trigger>a{
		color: var(--white);
	}

	.pc-panel-nav .sub-menu {
		display: none;
		padding: 0 0 6px 10px;
		border-left: 2px solid rgba(255, 255, 255, .3);
		margin: 0 20px 6px;
		display: block;
	}

	.pc-panel-nav .sub-menu li a {
		display: block;
		padding: 8px 10px;
		color: rgba(255, 255, 255, .85);
		font-size: 13px;
	}

	.pc-panel-nav .sub-menu li a:hover {
		color: #fff;
		opacity: 1;
	}
	
	.pc-panel-nav ul li:last-child a {
    	font-weight: 600;
	}
	
	.pc-panel-nav ul li ul li:last-child a {
    	font-weight: normal;
	}

	/* ---- HERO ---- */
	#hero {
		height: calc(100vh - 140px);
		padding: 0 60px;
	}

	.hero-copy {
		transform: translateY(-4em);
	}

	.hero-copy .sub-en {
		margin-bottom: 4em;
	}

	/* ---- SECTION ---- */
	.section {
		padding: 60px 40px;
	}

	section#unkou {
		width: fit-content;
		padding: 0;
		position: absolute;
        top: 100vh;
        left: 50%;
        transform: translate(-50%, -110%);
		min-height:105px;
	}

	.unkou-bar {
		width: fit-content;
		min-width: 700px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		line-height: 1.2;
	}



	/* ---- NEWS ---- */
	#news {
		padding: 80px 40px 0;
	}

	.news-inner {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.news-thumb {
		width: 50%;
		flex-shrink: 0;
	}

	.news-thumb img {
		height: 340px;
		object-fit: cover;
	}


	.news-list h3 {
		text-align: left;
	}

	.news-list h3 .sub-en {
		margin-left: 10px;
	}

	/* ---- PLANS ---- */
	#plans {
		background: none;
		position: relative;
		padding-bottom: 150px;
		margin-top: 100px;
	}

	#plans:after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		transform: skewY(-3deg);
		transform-origin: bottom left;
		z-index: -2;
		width: 100%;
		height: 100%;
		background: #f2f6fb;
	}

	#plans .section-inner {
		display: flex;
		flex-direction: column;
	}

	.plans-link-wrap {
		order: 1;
		text-align: right;
	}

	.sec-heading {
		order: 2;
	}

	.plan-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
		order: 3;
	}

	.plan-card {
		flex-direction: column;
	}

	.plan-card .thumb {
		padding: 0;
	}

	.plan-card .thumb img {
		width: 100%;
		height: 190px;
		aspect-ratio: unset;
	}

	.plan-card .plan-title {
		line-height: 1.4;
		margin-bottom: 6px;
	}

	/* ---- FACILITY / INTRO ---- */
	.col2-block {
		flex-direction: row;
		align-items: center;
		gap: 50px;
		margin-bottom: 60px;
	}

	.col2-block .col-text {
		flex: 1;
		text-align: left;
	}

	.col2-block .col-img {
		flex: 1;
	}

	/* ---- CTA ---- */
	.cta-grid {
		flex-direction: row;
		gap: 16px;
	}

	.cta-btn {
		flex: 1;
	}

	/* ---- SNS ---- */
	#sns {
		display: block;
		padding: 20px 15px 25px;
		background: var(--white);
	}

	/* ---- FOOTER ---- */
	.footer-inner {
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: flex-start;
	}

	.footer-brand {
		width: 280px;
		text-align: left;
		flex-shrink: 0;
	}

	.footer-menu {
		flex: 1;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0;
		column-gap: 0;
		text-align: left;
	}

	.footer-menu a {
		width: 33%;
		font-size: 12px;
		padding: 6px 8px;
		border-bottom: 1px dotted #ddd;
		border-right: none;
	}

	.footer-addr {
		text-align: left;
	}

	.footer-inner .sns-link {
		display: none;
	}
}

/* ================================================================
   TOPPAGE SPECIFIC: hero fixed bg
   ================================================================ */
body.is-top #hero {
	background-attachment: scroll;
}

/* ================================================================
   MODAL MENU
   ================================================================ */
.modal-menu {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 800;
	background: rgba(255, 255, 255, .97);
	overflow-y: auto;
	padding: 20px 20px 110px;
	/* ボトムバー分の余白 */
}

.modal-menu.is-open {
	display: block;
}

.modal-menu-inner {
	max-width: 600px;
	margin: 0 auto;
	text-align: left;
}

.modal-close-btn {
	display: block;
	width: 100%;
	padding: 14px;
	margin-bottom: 24px;
	background: var(--dark);
	color: #fff;
	font-size: 13px;
	letter-spacing: .15em;
	text-align: center;
	border: none;
	cursor: pointer;
}

.modal-logo {
	display: block;
	margin: 0 auto 20px;
	height: 50px;
	width: auto;
}

.modal-logo-sub {
	text-align: center;
	font-family: var(--font-num);
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--light);
	margin-bottom: 24px;
	display: block;
}

/* アコーディオンメニュー */
.modal-nav ul {
	padding: 0;
	margin-bottom: 0;
}

.modal-nav>ul>li {
	border-bottom: 1px dotted #ddd;
}

.modal-nav>ul>li>a,
.modal-nav>ul>li>span.accordion-trigger {
	display: block;
	padding: 14px 10px;
	color: var(--dark);
	font-size: 14px;
	letter-spacing: .08em;
	cursor: pointer;
	position: relative;
}

.modal-nav>ul>li>span.accordion-trigger::after {
	content: '+';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: var(--light);
	transition: transform .2s;
}

.modal-nav>ul>li>span.accordion-trigger.is-open::after {
	content: '−';
}

.modal-nav .sub-menu {
	display: none;
	padding: 0 0 8px 16px;
	border-left: 2px dotted rgba(26, 136, 199, .4);
	margin: 0 10px 8px;
}

.modal-nav .sub-menu li a {
	display: block;
	padding: 8px 10px;
	color: var(--mid);
	font-size: 13px;
	border-bottom: 1px dotted #eee;
}

.modal-nav .sub-menu li a::before {
	content: '+';
	margin-right: 8px;
	color: var(--light);
}

.modal-nav .sub-menu li a:hover {
	color: var(--blue);
}

/* モーダル内CTAボタン */
.modal-cta {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.modal-cta a {
	display: block;
	padding: 14px;
	background: var(--blue-bg);
	color: #fff;
	font-size: 13px;
	text-align: center;
	letter-spacing: .08em;
}

.modal-cta a:hover {
	background: var(--blue);
	opacity: 1;
}


@media screen and (min-width: 801px) {
	.sp-only {
		display: none;
	}
}

@media screen and (max-width: 800px) {
	.pc-only {
		display: none;
	}
}

/* ================================================================
   PAGE COMMON: HERO / PLAN / ACTIVITY
   ================================================================ */

/* ---- PAGE HERO ---- */
.page-hero {
	width: 100%;
}

.page-hero img {
	width: 100%;
	height: 210px;
	object-fit: cover;
	display: block;
	box-shadow: 0 5px 25px -10px rgba(0, 0, 0, 0.4);
}

.page-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 40px auto;
}

.page-hero-copy h2 {
	font-size: 24px;
	letter-spacing: .12em;
	font-weight: normal;
}

.page-hero-copy p {
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "Yu Mincho", serif;
	font-size: 13px;
	line-height: 1.9;
	color: #535353;
	padding-bottom: 0;
}

/* ---- PLAN SUBMENU ---- */
.plan-submenu {
	background: #f3f3f3;
	padding: 16px 15px;
	border-bottom: 1px solid #e1e1e1;
}

.plan-submenu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	padding: 0;
	margin: 0;
	justify-content: center;
}

.plan-submenu ul li {
	list-style: none;
}

.plan-submenu ul li a {
	display: inline-block;
	padding: 6px 14px;
	font-size: 12px;
	letter-spacing: .05em;
	color: var(--blue);
	border: 1px solid var(--blue);
	transition: .2s;
}

.plan-submenu ul li a:hover,
.plan-submenu ul li a.active {
	background: var(--blue);
	color: #fff;
	opacity: 1;
}

/* ---- PLAN DETAIL CARD ---- */
.plan-detail {
	margin-bottom: 50px;
	padding-bottom: 50px;
	border-bottom: 1px dotted #ddd;
}

.plan-detail-head {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 30px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--blue);
	flex-direction: column;
}

.plan-detail-head h3 {
	font-size: 18px;
	font-weight: normal;
	letter-spacing: .08em;
	color: var(--dark);
	line-height: 1.4;
	margin-bottom: 6px;
}

.plan-detail-head .period {
	display: inline-block;
	font-family: var(--font-num);
	font-size: 12px;
	color: #fff;
	background: rgba(26, 136, 199, .8);
	padding: 4px 12px;
	letter-spacing: .05em;
}

.plan-detail-head .period.limited {
	background: #d57e05;
}

/* ---- PLAN IMAGES ---- */
.plan-imgs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.plan-imgs img {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.plan-imgs.single img {
	height: 220px;
}

/* ---- PLAN DESCRIPTION ---- */
.plan-desc {
	font-family: var(--font-serif);
	font-size: 13px;
	line-height: 1.9;
	color: var(--mid);
	margin-bottom: 20px;
}

/* ---- PRICE SECTION ---- */
.price-section {
	margin-bottom: 20px;
}

.price-section h5 {
	font-size: 13px;
	font-weight: normal;
	letter-spacing: .05em;
	color: var(--dark);
	margin-bottom: 4px;
	padding-bottom: 4px;
	border-bottom: 1px solid #e1e1e1;
}

.price-section .price-note {
	font-size: 12px;
	color: var(--mid);
	margin-bottom: 8px;
	font-weight: bold;
}

.price-section .includes {
	font-size: 12px;
	color: var(--mid);
	margin-bottom: 10px;
	padding: 8px 12px;
	background: #f8f8f8;
	border-left: 3px solid var(--blue);
}

.price-group {
	margin-bottom: 12px;
}

.price-group .price-season {
	font-size: 11px;
	color: var(--light);
	font-family: var(--font-num);
	letter-spacing: .05em;
	margin-bottom: 6px;
}

ul.price-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin-bottom: 10px;
}

ul.price-list li {
	list-style: none;
	flex: 1;
	min-width: 120px;
	background: #ecf8f8;
	padding: 10px 8px;
	text-align: center;
}

ul.price-list li .price-label {
	display: block;
	font-size: 11px;
	color: var(--mid);
	margin-bottom: 4px;
	line-height: 1.4;
}

ul.price-list li .price-num {
	display: block;
	font-family: var(--font-num);
	font-size: 20px;
	letter-spacing: .05em;
	color: var(--dark);
	line-height: 1;
}

ul.price-list li.disabled .price-num {
    font-size: 15px;
    padding-top: 5px;
}

ul.price-list li .price-num small {
	font-size: 13px;
}

ul.price-list li.disabled .price-num small {
    display: none;
}

ul.price-list li .price-tag {
	display: block;
	font-size: 11px;
	color: var(--blue);
	margin-top: 3px;
}

ul.price-list li .price-strikethrough {
	display: block;
	font-family: var(--font-num);
	font-size: 13px;
	color: var(--light);
	text-decoration: line-through;
	margin-bottom: 2px;
}

ul.price-list li.disabled {
	background: #f3f3f3;
}

ul.price-list li.disabled .price-label,
ul.price-list li.disabled .price-num {
	color: var(--light);
}

/* ---- アクティビティ用シンプル料金 ---- */
.price-simple {
	display: flex;
	flex-direction:column;
	margin-bottom: 16px;
}

p.price-season {
    font-size: 0.8rem;
    padding: .6rem 0 .3rem;
}

.price-simple-item {
	background: #ecf8f8;
	padding: 12px 16px;
	min-width: 160px;
	flex: 1;
}

.price-simple-item .ps-label {
	display: block;
	font-size: 11px;
	color: var(--light);
	font-family: var(--font-num);
	letter-spacing: .05em;
	margin-bottom: 4px;
}

.price-simple-item .ps-price {
	display: block;
	font-family: var(--font-num);
	font-size: 26px;
	letter-spacing: .03em;
	color: var(--dark);
	line-height: 1;
}

.price-simple-item .ps-price small {
	font-size: 14px;
}

.price-simple-item .ps-time {
	display: block;
	font-size: 11px;
	color: var(--light);
	margin-top: 3px;
	font-family: var(--font-num);
}

.price-simple-item .ps-note {
	display: block;
	font-size: 11px;
	color: var(--mid);
	margin-top: 4px;
	line-height: 1.5;
}

/* ---- BBQ SET ---- */
.bbq-set {
	font-size: 12px;
	color: var(--mid);
	padding: 12px;
	margin: 10px 0 16px;
	border: 2px solid var(--light-blue);
	line-height: 1.7;
}

.bbq-set strong {
	color: var(--dark);
	display: block;
	margin-bottom: 4px;
}

/* ---- PLAN WARNING ---- */
.plan-warning {
	font-size: 12px;
	background: #ffffef;
	border: 1px solid #cfcbb3;
	padding: 12px;
	margin: 12px 0;
	line-height: 1.7;
	color: var(--mid);
}

.plan-warning strong {
	color: var(--dark);
	display: block;
	margin-bottom: 4px;
}

/* ---- NOTICE LIST ---- */
.notice-list {
	padding: 0;
	margin: 16px 0;
	text-align: left;
}

.notice-list li {
	list-style: none;
	font-size: 12px;
	color: var(--mid);
	padding: 5px 0 5px 16px;
	border-bottom: 1px dotted #e1e1e1;
	position: relative;
	line-height: 1.6;
}

.notice-list li span {
	color:var(--mattrz-color-focus-border);
}

.notice-list li::before {
	content: '・';
	position: absolute;
	left: 0;
	color: var(--blue);
}

.notice-env {
	font-size: 12px;
	margin-top: 10px;
	padding: 8px 12px;
	background: #fff4f9;
	border: 1px solid #be0022;
	color: #af001f;
	line-height: 1.6;
}

/* ---- ACTIVITY STOP ---- */
.activity-stop {
	font-size: 12px;
	color: var(--mid);
	background: #f3f8fa;
	border: 1px solid #c6dcec;
	padding: 12px;
	margin: 12px 0;
	line-height: 1.7;
}

.activity-stop strong {
	color: var(--blue);
	display: block;
	margin-bottom: 4px;
}

/* ---- 当日申込みバッジ ---- */
.onsite-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-family: var(--font-num);
	letter-spacing: .08em;
	background: #f3f8fa;
	border: 1px solid var(--blue);
	color: var(--blue);
	padding: 4px 10px;
	margin-bottom: 10px;
}

.onsite-badge.reservable {
	background: var(--white);
	border-color: #d57e05;
	color: #d57e05;
}

.onsite-note {
	font-size: 12px;
	color: var(--mid);
	background: #f3f8fa;
	border-left: 3px solid var(--blue);
	padding: 8px 12px;
	margin-bottom: 16px;
	line-height: 1.6;
}

/* ---- レンタル料金リスト ---- */
.rental-list {
	padding: 0;
	margin-bottom: 10px;
}

.rental-list li {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	border-bottom: 1px dotted #e1e1e1;
	font-size: 13px;
	color: var(--mid);
}

.rental-list li .r-price {
	font-family: var(--font-num);
	font-size: 16px;
	color: var(--dark);
	white-space: nowrap;
}

.rental-set-note {
	font-size: 13px;
	color: #fff;
	background: var(--blue);
	padding: 10px 14px;
	margin-bottom: 12px;
	font-family: var(--font-num);
}

/* ================================================================
   PAGE COMMON PC: min-width 801px
   ================================================================ */
@media screen and (min-width: 801px) {
	.page-hero {
		position: relative;
		height: 700px;
	}
	
	.page-hero.sgl-plan {
		height: 400px;
	}

	.page-hero img {
		height: 100%;
	}

	.page-hero-copy {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(6px);
		width: fit-content;
		height: fit-content;
		margin: auto;
		padding: 20px 30px;
	}

	.page-hero-copy h2 {
		font-size: 34px;
	}

	.page-hero-copy p {
		font-size: 14px;
	}

	.plan-submenu {
		padding: 20px 40px;
	}

	.plan-submenu ul {
		gap: 8px 12px;
	}

	.plan-submenu ul li a {
		font-size: 13px;
		padding: 7px 18px;
	}

	.plan-detail {
		display: grid;
		grid-template-columns: 340px 1fr;
		grid-template-rows: auto;
		gap: 0 40px;
		margin-bottom: 60px;
		padding-bottom: 60px;
	}

	.plan-detail-head {
		grid-column: 1 / -1;
		flex-direction: row;
		gap: 14px;
	}

	.plan-detail-head h3 {
		margin-bottom: 0;
	}

	.plan-imgs {
		grid-column: 1;
		grid-row: 2;
		flex-direction: column;
	}

	.plan-imgs img {
		height: 200px;
		flex: none;
		width: 100%;
	}

	.plan-imgs.double img {
		height: 160px;
	}

	.plan-body-right {
		grid-column: 2;
		grid-row: 2 / 5;
	}

	.plan-desc {
		grid-column: 1;
		grid-row: 3;
	}

	ul.price-list li {
		min-width: 100px;
		padding: 12px;
	}

	ul.price-list li .price-num {
		font-size: 22px;
	}

	.price-simple-item {
		padding: 14px 20px;
	}

	.price-simple-item .ps-price {
		font-size: 30px;
	}
}

/* ================================================================
	   FOOD & DRINK PAGE SPECIFIC
	   ================================================================ */
.food-section {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 15px 60px;
}

.food-block {
	margin-bottom: 60px;
}

.food-block:last-child {
	margin-bottom: 0;
}

.food-block-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--blue);
	margin-bottom: 24px;
}

.food-block-head h3 {
	font-size: 20px;
	font-weight: normal;
	letter-spacing: .1em;
	color: var(--dark);
}

.food-block-head .food-en {
	font-family: var(--font-num);
	font-size: 12px;
	letter-spacing: .2em;
	color: var(--light);
}

.food-img {
	width: 100%;
	margin-bottom: 24px;
}

.food-img img {
	width: 100%;
	height: 220px;
	object-fit: contain;
	display: block;
}

.food-layout {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.menu-category {
	margin-bottom: 24px;
}

.menu-category:last-child {
	margin-bottom: 0;
}

.menu-category-label {
	display: inline-block;
	font-family: var(--font-num);
	font-size: 11px;
	letter-spacing: .15em;
	color: #fff;
	background: var(--blue);
	padding: 4px 14px;
	margin-bottom: 10px;
}

.menu-table {
	width: 100%;
	border-collapse: collapse;
}

.menu-table tr {
	border-bottom: 1px dotted #e1e1e1;
}

.menu-table tr:first-child {
	border-top: 1px dotted #e1e1e1;
}

.menu-table td {
	padding: 10px 8px;
	font-size: 14px;
	color: var(--dark);
	vertical-align: middle;
}

.menu-table td:last-child {
	text-align: right;
	font-family: var(--font-num);
	font-size: 16px;
	letter-spacing: .05em;
	white-space: nowrap;
}

.menu-table tr:nth-child(odd) td {
	background: #f8fafa;
}

/* ================================================================
	   PC: min-width 801px
	   ================================================================ */
@media screen and (min-width: 801px) {
	.food-section {
		padding: 60px 40px 80px;
	}

	.food-layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 40px;
	}

	.food-layout>* {
		flex: 1;
	}

	.food-img img {
		height: 280px;
	}

	.food-block-head h3 {
		font-size: 24px;
	}

	.menu-table td {
		padding: 12px 10px;
		font-size: 15px;
	}

	.menu-table td:last-child {
		font-size: 18px;
	}
}

/* ================================================================
	   TIMETABLE PAGE SPECIFIC
	   ================================================================ */
.tt-section {
	max-width: 860px;
	margin: 0 auto;
	padding: 40px 15px 60px;
}

.tt-intro {
	font-family: var(--font-serif);
	font-size: 13px;
	line-height: 1.9;
	color: var(--mid);
	margin-bottom: 40px;
	padding: 16px;
	background: #f3f8fa;
}

/* ---- シーズンブロック ---- */
.tt-block {
	margin-bottom: 50px;
}

.tt-block:last-child {
	margin-bottom: 0;
}

.tt-block-head {
	padding-bottom: 10px;
	border-bottom: 2px solid var(--blue);
	margin-bottom: 20px;
}

.tt-block-head h3 {
	font-size: 17px;
	font-weight: normal;
	letter-spacing: .08em;
	color: var(--dark);
}

/* ---- 時刻表 SP: カード形式 ---- */
.tt-table-wrap {
	margin-bottom: 14px;
}

/* SP: thead非表示、tbody tdをカード表示 */
.tt-table {
	width: 100%;
	border-collapse: collapse;
}

.tt-table thead {
	display: none;
}

.tt-table tbody tr {
	display: block;
	margin-bottom: 10px;
	border: 1px solid #dde8f0;
	background: #f3f8fa;
}

.tt-table tbody tr:last-child {
	margin-bottom: 0;
}

.tt-table tbody td {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	color: var(--dark);
	border-bottom: 1px dotted #dde8f0;
}

.tt-table tbody td:last-child {
	border-bottom: none;
	background-color: var(--white);
}

/* 便名セル */
.tt-table .col-name {
	font-family: var(--font-num);
	font-size: 11px;
	color: #fff;
	background: var(--blue);
	letter-spacing: .1em;
	padding: 6px 12px;
	justify-content: center;
}

.tt-table .col-name.rinji {
	background: #d57e05;
}

/* data-label で行き/帰りラベルを擬似要素で表示 */
.tt-table tbody td[data-label]::before {
	content: attr(data-label);
	display: block;
	font-family: var(--font-num);
	font-size: 10px;
	letter-spacing: .1em;
	color: var(--light);
	margin-bottom: 4px;
}

/* 行き・帰りのルート表示 */
.route {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.route .port {
	font-size: 11px;
	color: var(--light);
	white-space: nowrap;
}

.route .time {
	font-family: var(--font-num);
	font-size: 22px;
	letter-spacing: .03em;
	color: var(--dark);
	white-space: nowrap;
}

.route .arrow {
	color: var(--blue);
	font-size: 12px;
}

.route .dest {
	font-size: 11px;
	color: var(--light);
	white-space: nowrap;
}

/* ---- 注意事項 ---- */
.tt-notes {
	padding: 0;
	margin: 0;
}

.tt-notes li {
	list-style: none;
	font-size: 12px;
	color: var(--mid);
	padding: 4px 0 4px 14px;
	position: relative;
	line-height: 1.6;
	text-align:left;
}

.tt-notes li::before {
	content: '・';
	position: absolute;
	left: 0;
	color: var(--blue);
	font-size: 10px;
	top: 6px;
	text-align: left;
}

/* ================================================================
	   PC: min-width 801px
	   ================================================================ */
@media screen and (min-width: 801px) {
	.tt-section {
		padding: 60px 40px 80px;
	}

	.tt-intro {
		font-size: 14px;
		width: fit-content;
		margin: 0 auto 40px;
	}

	.tt-block-head h3 {
		font-size: 20px;
	}

	/* PC: 通常のテーブル表示に戻す */
	.tt-table {
		border-collapse: collapse;
	}

	.tt-table thead {
		display: table-header-group;
	}

	.tt-table thead tr {
		background: var(--blue);
		color: #fff;
	}

	.tt-table thead th {
		padding: 12px 16px;
		font-weight: normal;
		letter-spacing: .05em;
		text-align: center;
		font-family: var(--font-num);
		font-size: 13px;
	}

	.tt-table thead th:first-child {
		text-align: left;
	}

	.tt-table tbody tr {
		display: table-row;
		margin-bottom: 0;
		border: none;
		border-bottom: 1px solid #e1e1e1;
	}

	.tt-table tbody tr:nth-child(odd) {
		background: #f3f8fa;
	}

	.tt-table tbody tr:nth-child(even) {
		background: #fff;
	}

	.tt-table tbody td {
		display: table-cell;
		padding: 14px 16px;
		border-bottom: none;
		vertical-align: middle;
	}

	.tt-table tbody td[data-label]::before {
		display: none;
	}

	.tt-table tbody td:last-child {
		background-color: unset;
	}

	.tt-table .col-name {
		background: none;
		color: var(--blue);
		font-size: 13px;
		padding: 14px 16px;
		white-space: nowrap;
	}

	.tt-table .col-name.rinji {
		background: none;
		color: #d57e05;
	}

	.route .time {
		font-size: 22px;
	}

	.route .port,
	.route .dest {
		font-size: 13px;
	}
}

/* ================================================================
	   ACCESS PAGE SPECIFIC
	   ================================================================ */

/* ---- セクション見出し ---- */
.ac-block {
	margin-bottom: 50px;
}

.ac-block:last-child {
	margin-bottom: 0;
}

.ac-block-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--blue);
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.ac-block-head h3 {
	font-size: 18px;
	font-weight: normal;
	letter-spacing: .08em;
	color: var(--dark);
}

/* ---- Google Map ---- */
.ac-map {
	width: 100%;
	margin-bottom: 20px;
}

.ac-map iframe {
	width: 100%;
	height: 280px;
	display: block;
	border: none;
}

/* ---- 住所・注意 ---- */
.ac-address {
	background: #f3f8fa;
	border-left: 3px solid var(--blue);
	padding: 14px 16px;
	margin-bottom: 16px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--dark);
}

.ac-address strong {
	display: block;
	font-size: 15px;
	margin-bottom: 6px;
}

.ac-caution {
	font-size: 12px;
	color: #af001f;
	background: #fff4f9;
	border: 1px solid #be0022;
	padding: 10px 14px;
	margin-bottom: 20px;
	line-height: 1.7;
}

.ac-parking {
	font-size: 13px;
	font-weight: bold;
	color: var(--dark);
	background: #ffffef;
	border: 1px solid #cfcbb3;
	padding: 10px 14px;
	margin-bottom: 24px;
	line-height: 1.6;
}

/* ---- 方面別ルート ---- */
.ac-routes {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}

.ac-route-item {
	border: 1px solid #e1e1e1;
	overflow: hidden;
}

.ac-route-item .route-label {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--blue);
	color: #fff;
	padding: 8px 14px;
	font-size: 13px;
	letter-spacing: .05em;
}

.ac-route-item .route-label i {
	font-size: 14px;
}

/* ---- 最寄り交通 ---- */
.ac-transit {
	padding: 0;
	margin: 0;
}

.ac-transit li {
	list-style: none;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px dotted #e1e1e1;
	font-size: 13px;
	color: var(--dark);
}

.ac-transit li:last-child {
	border-bottom: none;
}

.ac-transit li i {
	color: var(--blue);
	margin-top: 2px;
	flex-shrink: 0;
	width: 16px;
	text-align: center;
}

/* ---- 受付カウンター写真 ---- */
.ac-counter-img {
	width: 100%;
	margin-bottom: 20px;
}

.ac-counter-img img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

/* ================================================================
	   PC: min-width 801px
	   ================================================================ */
@media screen and (min-width: 801px) {
	.ac-section {
		padding: 60px 40px 80px;
	}

	.ac-block-head h3 {
		font-size: 22px;
	}

	.ac-map iframe {
		height: 400px;
	}

	.ac-routes {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px;
	}

	.ac-route-item {
		flex: 1;
		min-width: 240px;
	}

	.ac-route-item img {
		width: 100%;
	}

	.ac-layout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30px;
		align-items: start;
	}

	.ac-counter-img img {
		height: 320px;
	}
}

/* ================================================================
	   COMPANY ETC PAGE SPECIFIC
	   ================================================================ */

/* ---- テキストヒーロー ---- */
.text-hero {
	background: #f3f3f3;
	border-bottom: 1px solid #e1e1e1;
	padding: 40px 20px;
	text-align: center;
}

.text-hero h2 {
	font-size: 24px;
	font-weight: normal;
	letter-spacing: .12em;
	color: var(--dark);
	margin-bottom: 8px;
}

.text-hero p {
	font-family: var(--font-serif);
	font-size: 13px;
	color: var(--light);
	letter-spacing: .05em;
	padding-bottom: 0;
}

/* ---- コンテンツ ---- */
.cp-section {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px 0;
	text-align: left;
}

.cp-panel-head {
	margin-bottom: 30px;
}

.cp-panel-head h2 {
	font-size: 20px;
	font-weight: normal;
	letter-spacing: .1em;
	color: var(--dark);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--blue);
}

.cp-panel-head .cp-sub-en {
	display: block;
	font-family: var(--font-num);
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--light);
	margin-top: 5px;
}

/* ---- サブナビ（SP: 縦並び） ---- */
.cp-subnav {
	max-width: 900px;
	margin: 40px auto 0;
	padding: 0 20px 60px;
}

.cp-subnav ul {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	border: 1px solid #e1e1e1;
}

.cp-subnav ul li {
	list-style: none;
}

.cp-subnav ul li a {
	display: block;
	padding: 14px 16px;
	font-size: 13px;
	letter-spacing: .03em;
	color: var(--mid);
	background: #f8f8f8;
	border-bottom: 1px solid #e1e1e1;
	text-align: center;
	transition: .2s;
}

.cp-subnav ul li:last-child a {
	border-bottom: none;
}

.cp-subnav ul li a:hover {
	color: var(--blue);
	background: #eef5fa;
	opacity: 1;
}

.cp-subnav ul li a.active {
	color: var(--blue);
	background: #fff;
	font-weight: bold;
	border-left: 3px solid var(--blue);
}

.cp-subnav ul li a i {
	padding-right: 5px;
}

/* ---- テーブル ---- */
.cp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.cp-table tr {
	border-bottom: 1px dotted #e1e1e1;
}

.cp-table tr:first-child {
	border-top: 1px dotted #e1e1e1;
}

.cp-table th {
	width: 30%;
	padding: 12px 10px;
	font-weight: normal;
	color: var(--light);
	vertical-align: top;
	white-space: nowrap;
	text-align: left;
	font-family: var(--font-num);
	font-size: 12px;
	letter-spacing: .05em;
}

.cp-table td {
	padding: 12px 10px;
	color: var(--dark);
	line-height: 1.7;
	vertical-align: top;
}

.cp-table tr:nth-child(odd) {
	background: #f8f8f8;
}

@media screen and (max-width: 800px) {
.cp-table th, .cp-table td {
    display: inline-block;
    width: 100%;
}
}

/* ---- テキストコンテンツ ---- */
.cp-content h3 {
	font-size: 14px;
	font-weight: bold;
	color: var(--dark);
	margin: 28px 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid #e1e1e1;
	letter-spacing: .05em;
}

.cp-content h3:first-child {
	margin-top: 0;
}

.cp-content p {
	font-size: 13px;
	line-height: 1.9;
	color: var(--mid);
	margin-bottom: 12px;
	font-family: var(--font-serif);
}

.cp-content ol {
	padding-left: 20px;
	margin-bottom: 12px;
}

.cp-content ol li {
	font-size: 13px;
	line-height: 1.8;
	color: var(--mid);
	font-family: var(--font-serif);
	margin-bottom: 4px;
}

/* ---- 安全方針ブロック ---- */
.safety-block {
	background: #f3f8fa;
	border-left: 3px solid var(--blue);
	padding: 16px 18px;
	margin-bottom: 20px;
}

.safety-block h3 {
	font-size: 14px;
	font-weight: bold;
	color: var(--blue);
	margin-bottom: 10px;
	letter-spacing: .05em;
	border-bottom: none;
	padding: 0;
}

.safety-block p {
	font-size: 13px;
	line-height: 1.9;
	color: var(--mid);
	margin: 0;
	font-family: var(--font-serif);
}

/* ---- PDFボタン ---- */
.pdf-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: #d70000;
	color: #fff;
	font-size: 14px;
	letter-spacing: .05em;
	margin-top: 10px;
	transition: background .2s;
}

.pdf-btn:hover {
	background: #a50000;
	color: #fff;
	opacity: 1;
}

.pdf-btn i {
	font-size: 16px;
}

/* ================================================================
	   PC: 横タブ切替に変える
	   ================================================================ */
@media screen and (min-width: 801px) {
	.text-hero {
		padding: 60px 40px;
	}

	.text-hero h2 {
		font-size: 32px;
	}

	.text-hero p {
		font-size: 14px;
	}

	.cp-section {
		padding: 50px 40px 0;
	}

	.cp-panel-head h2 {
		font-size: 24px;
	}

	.cp-table th {
		width: 22%;
		font-size: 13px;
	}

	.cp-table td {
		font-size: 14px;
	}

	.cp-content p,
	.cp-content ol li {
		font-size: 14px;
	}

	/* PC: 横タブ */
	.cp-subnav {
		padding: 0 40px 60px;
		margin-top: 40px;
	}

	.cp-subnav ul {
		flex-direction: row;
		border-bottom: 2px solid #e1e1e1;
	}

	.cp-subnav ul li a {
		text-align: left;
		background: transparent;
		border-bottom: none;
		border-left: none;
		border-right: 1px solid #e1e1e1;
		padding: 12px 20px;
		font-size: 13px;
	}

	.cp-subnav ul li:last-child a {
		border-right: none;
	}

	.cp-subnav ul li a:hover {
		background: #f3f8fa;
	}

	.cp-subnav ul li a.active {
		color: var(--blue);
		background: #fff;
		font-weight: bold;
		border-left: none;
		border-bottom: 3px solid var(--blue);
		margin-bottom: -2px;
	}
}

/* ================================================================
	   INQUIRY PAGE
	   ================================================================ */
.inq-section {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 20px 60px;
	text-align: left;
}

/* ---- リード ---- */
.inq-lead {
	margin-bottom: 32px;
}

.inq-lead h3 {
    font-weight: 600;
    padding-bottom: 20px;
}

.inq-lead p {
	font-family: var(--font-serif);
	font-size: 13px;
	line-height: 1.9;
	color: var(--mid);
}

.inq-tel-block {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
	padding: 14px 18px;
	background: #f3f8fa;
	border-left: 3px solid var(--blue);
}

.inq-tel-block i {
	color: var(--blue);
	font-size: 20px;
}

.inq-tel-block .tel-num {
	font-family: var(--font-num);
	font-size: 22px;
	letter-spacing: .1em;
	color: var(--dark);
	display: block;
	line-height: 1;
}

.inq-tel-block .tel-num a {
	color: var(--dark);
}

.inq-tel-block .tel-hours {
	font-size: 12px;
	color: var(--light);
	font-family: var(--font-num);
	margin-top: 4px;
	display: block;
}

/* ---- フォーム ---- */
.inq-form {
	margin-bottom: 40px;
}

.inq-row {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

.inq-section.confirm .inq-row{
	border-bottom: 1px dotted var(--light);
    padding-bottom: 10px;
}

.inq-label {
	font-size: 13px;
	color: var(--dark);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.inq-required {
	font-size: 10px;
	font-family: var(--font-num);
	letter-spacing: .05em;
	background: #d70000;
	color: #fff;
	padding: 2px 6px;
	line-height: 1;
}

.inq-optional {
	font-size: 10px;
	font-family: var(--font-num);
	letter-spacing: .05em;
	background: var(--light);
	color: #fff;
	padding: 2px 6px;
	line-height: 1;
}

.inq-input,
.inq-textarea {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	font-family: var(--font-body);
	color: var(--dark);
	border: 1px solid #d0d0d0;
	background: #fff;
	outline: none;
	transition: border-color .2s;
	-webkit-appearance: none;
	border-radius: 0;
}

.inq-input:focus,
.inq-textarea:focus {
	border-color: var(--blue);
}

.inq-textarea {
	height: 160px;
	resize: vertical;
	line-height: 1.7;
}

/* ---- プライバシーポリシー ---- */
.inq-privacy {
	background: #f8f8f8;
	border: 1px solid #e1e1e1;
	padding: 20px;
	margin-bottom: 24px;
	max-height: 260px;
	overflow-y: auto;
	font-size: 12px;
	line-height: 1.8;
	color: var(--mid);
	font-family: var(--font-serif);
}

.inq-privacy h4 {
	font-size: 13px;
	font-weight: bold;
	color: var(--dark);
	margin: 16px 0 6px;
	padding-bottom: 4px;
	border-bottom: 1px solid #e1e1e1;
}

.inq-privacy h4:first-child {
	margin-top: 0;
}

.inq-privacy ol {
	padding-left: 18px;
	margin-bottom: 8px;
}

.inq-privacy ol li {
	margin-bottom: 3px;
}

/* ---- 同意チェック ---- */
.inq-agree {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 28px;
	font-size: 13px;
	color: var(--dark);
}

.inq-agree input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	flex-shrink: 0;
	accent-color: var(--blue);
	cursor: pointer;
}

/* ---- 送信ボタン ---- */

.inq-btn-wrap{
	display:flex;
	gap:10px;
}
.inq-submit {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	padding: 16px;
	background: var(--blue);
	color: #fff;
	font-size: 15px;
	letter-spacing: .1em;
	text-align: center;
	border: none;
	cursor: pointer;
	font-family: var(--font-body);
	transition: background .2s;
}

.inq-submit:hover {
	background: var(--blue-dk);
}

.inq-back {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 16px;
    background: var(--light);
    color: #fff;
    font-size: 15px;
    letter-spacing: .1em;
    text-align: center;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background .2s;
}

.inq-back:hover {
	background: var(--mid);
}

/* CF7 バリデーションエラー */
.wpcf7-not-valid {
    border-color: #d70000 !important;
}
.wpcf7-not-valid-tip {
    font-size: 12px!important;
    color: #d70000;
    margin-top: 4px;
    padding: 4px 8px;
    background: #fff4f4;
    border: 1px solid #d7000050;
    border-radius: .2rem;
}
.wpcf7-response-output {
    border: 1px solid #d7000050 !important;
    border-radius: .2rem;
    font-size: 12px;
    background: #fff4f4;
    color: #dc3232;
}

.wpcf7-spinner {
    display: none!important;
}

.inq-input,
.inq-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

.wpcf7-form-control-wrap{
	width: 100%;
    display: block;
}

.wpcf7-list-item label {
    display: flex;
    gap: .5rem;
    align-items: center;
}
/* ================================================================
	   PC
	   ================================================================ */
@media screen and (min-width: 801px) {
	.inq-section {
		padding: 60px 40px 80px;
	}

	.inq-row {
		flex-direction: row;
		align-items: flex-start;
		gap: 20px;
	}

	.inq-label {
		width: 220px;
		flex-shrink: 0;
		padding-top: 10px;
		margin-bottom: 0;
	}
	
	.inq-section.confirm .inq-label {
		padding-top: 0;
	}

	.inq-input,
	.inq-textarea {
		flex: 1;
	}
}

/* ================================================================
	   NEWS ARCHIVE
	   ================================================================ */
.news-section {
	max-width: 860px;
	margin: 0 auto;
	padding: 40px 20px 60px;
	text-align: left;
}

.news-list {
	padding: 0;
	margin: 0;
}

.news-item {
	display: flex;
	gap: 20px;
	padding: 24px 0;
	border-bottom: 1px dotted #e1e1e1;
	text-decoration: none;
	color: inherit;
	transition: background .15s;
}

.news-item:first-child {
	border-top: 1px dotted #e1e1e1;
}

.news-item:hover {
	opacity: 1;
	background: #f8fafa;
	margin: 0 -10px;
	padding-left: 10px;
	padding-right: 10px;
}

/* サムネ */
.news-thumb {
	flex-shrink: 0;
	width: 100px;
	height: 70px;
	overflow: hidden;
	background: #eee;
}

.news-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s;
}

.news-item:hover .news-thumb img {
	transform: scale(1.05);
}

.news-thumb.no-img {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f3f3;
}

.news-thumb.no-img i {
	font-size: 24px;
	color: #ccc;
}

/* テキスト */
.news-body {
	flex: 1;
	min-width: 0;
}

.news-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.news-date {
	font-family: var(--font-num);
	font-size: 12px;
	color: var(--light);
	letter-spacing: .05em;
	white-space: nowrap;
}

.news-title {
	font-size: 14px;
	font-weight: normal;
	color: var(--dark);
	line-height: 1.5;
	margin-bottom: 6px;
	letter-spacing: .03em;
}

.news-item:hover .news-title {
	color: var(--blue);
}

.news-excerpt {
	font-size: 12px;
	color: var(--light);
	line-height: 1.6;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.news-more {
	font-family: var(--font-num);
	font-size: 11px;
	color: var(--blue);
	letter-spacing: .05em;
	margin-top: 6px;
	display: inline-block;
}

/* ページネーション */
.news-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 40px;
	padding: 0;
}

.news-pager li {
	list-style: none;
}

.news-pager li a,
.news-pager li span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-family: var(--font-num);
	font-size: 13px;
	border: 1px solid #e1e1e1;
	color: var(--mid);
	transition: .2s;
}

.news-pager li a:hover {
	border-color: var(--blue);
	color: var(--blue);
	opacity: 1;
}

.news-pager li span.current {
	background: var(--blue);
	color: #fff;
	border-color: var(--blue);
}

/* ================================================================
	   PC
	   ================================================================ */
@media screen and (min-width: 801px) {
	.news-section {
		padding: 50px 40px 80px;
	}

	.news-thumb {
		width: 160px;
		height: 100px;
	}

	.news-title {
		font-size: 16px;
	}

	.news-excerpt {
		font-size: 13px;
	}
}

/* ================================================================
	   NEWS SINGLE
	   ================================================================ */
.single-section {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 20px 60px;
	text-align: left;
}

/* パンくず */
.breadcrumb {
	font-size: 12px;
    color: var(--light);
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: .5rem 1rem;
    border-top: 1px solid var(--bg-gray);
}

.breadcrumb a {
	color: var(--blue);
}

.breadcrumb a:hover {
	opacity: .7;
}

.breadcrumb i {
	font-size: 10px;
	color: var(--light);
}

/* 記事ヘッダー */
.single-head {
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e1e1e1;
}

.single-date {
	font-family: var(--font-num);
	font-size: 12px;
	color: var(--light);
	letter-spacing: .05em;
	margin-bottom: 10px;
	display: block;
}

.single-title {
	font-size: 20px;
	font-weight: normal;
	letter-spacing: .06em;
	color: var(--dark);
	line-height: 1.5;
}

/* 記事本文 */
.single-body {
	font-family: var(--font-serif);
	font-size: 14px;
	line-height: 1.9;
	color: var(--mid);
}

.single-body p {
	margin-bottom: 1.4em;
}

.single-body img {
	width: 100%;
	height: auto;
	display: block;
	margin: 20px 0;
}

.single-body h2 {
	font-size: 18px;
	font-weight: normal;
	color: var(--dark);
	border-left: 3px solid var(--blue);
	padding: 6px 12px;
	margin: 28px 0 14px;
	background: #f3f8fa;
}

.single-body h3 {
	font-size: 16px;
	font-weight: normal;
	color: var(--dark);
	padding-bottom: 6px;
	border-bottom: 1px solid #e1e1e1;
	margin: 24px 0 12px;
}

.single-body ul,
.single-body ol {
	padding-left: 20px;
	margin-bottom: 1.2em;
}

.single-body li {
	margin-bottom: 4px;
}

/* 前後記事ナビ */
.single-nav {
	display: flex;
	gap: 12px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px dotted #e1e1e1;
}

.single-nav a {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid #e1e1e1;
	color: var(--mid);
	font-size: 13px;
	line-height: 1.4;
	transition: .2s;
	min-width: 0;
}

.single-nav a:hover {
	border-color: var(--blue);
	color: var(--blue);
	opacity: 1;
}

.single-nav a i {
	flex-shrink: 0;
	color: var(--blue);
}

.single-nav a.prev {
	flex-direction: row;
	text-align: left;
}

.single-nav a.next {
	flex-direction: row-reverse;
	text-align: right;
}

.single-nav .nav-label {
	font-family: var(--font-num);
	font-size: 10px;
	letter-spacing: .1em;
	color: var(--light);
	display: block;
}

/* 一覧に戻るボタン */
.back-to-list {
	display: block;
	text-align: center;
	margin-top: 30px;
}

.back-to-list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 24px;
	border: 1px solid var(--blue);
	color: var(--blue);
	font-size: 13px;
	letter-spacing: .05em;
	transition: .2s;
}

.back-to-list a:hover {
	background: var(--blue);
	color: #fff;
	opacity: 1;
}

/* ================================================================
	   PC
	   ================================================================ */
@media screen and (min-width: 801px) {
	.single-section {
		padding: 50px 40px 80px;
	}

	.single-title {
		font-size: 24px;
	}

	.single-body {
		font-size: 15px;
	}
}


/* ================================================================
	   NOTICE PAGE
	   ================================================================ */
.notice-section {
	max-width: 860px;
	margin: 0 auto;
	padding: 40px 20px 60px;
	text-align: left;
}

.notice-block {
	margin-bottom: 50px;
}

.notice-block:last-child {
	margin-bottom: 0;
}

.notice-block-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--blue);
	margin-bottom: 20px;
}

.notice-block-head h2 {
	font-size: 18px;
	font-weight: normal;
	letter-spacing: .08em;
	color: var(--dark);
}

.notice-block-head i {
	color: var(--blue);
	font-size: 18px;
	flex-shrink: 0;
}

/* ================================================================
	   PC
	   ================================================================ */
@media screen and (min-width: 801px) {
	.notice-section {
		padding: 60px 40px 80px;
	}

	.notice-block-head h2 {
		font-size: 22px;
	}
}


/* 言語スイッチャー */
.hd-lang {
    text-align: right;
    margin-top: 4px;
}
.hd-lang ul.bogo-language-switcher {
    display: flex;
    justify-content: flex-end;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hd-lang .bogo-language-switcher li {
    font-size: 11px;
    letter-spacing: .05em;
}
.hd-lang .bogo-language-switcher li:not(:last-child)::after {
    content: '|';
    margin: 0 6px;
    color: #ccc;
}
.hd-lang .bogo-language-switcher a {
    color: var(--mid);
    text-decoration: none;
}
.hd-lang .bogo-language-switcher a:hover {
    color: var(--blue);
}
.hd-lang .bogo-language-switcher .current a,
.hd-lang .bogo-language-switcher .current span {
    color: var(--blue);
    font-weight: bold;
    pointer-events: none;
}
/* 国旗非表示 */
.hd-lang .bogo-language-switcher img {
    display: none;
}

/* SP 言語スイッチャー（モーダル内） */
@media screen and (max-width: 800px) {
    .hd-lang {
        display: none;
    }
    .modal-lang {
        margin-top: 20px;
        padding: 16px 0 0;
        border-top: 1px solid rgba(255,255,255,.2);
        text-align: center;
    }
    .modal-lang ul.bogo-language-switcher {
        display: flex;
        justify-content: center;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .modal-lang .bogo-language-switcher li {
        font-size: 13px;
        letter-spacing: .05em;
    }
    .modal-lang .bogo-language-switcher li:not(:last-child)::after {
        content: '|';
        margin: 0 10px;
        color: rgba(255,255,255,.4);
    }
    .modal-lang .bogo-language-switcher a {
        color: rgba(255,255,255,.8);
        text-decoration: none;
    }
    .modal-lang .bogo-language-switcher a:hover {
        color: #fff;
    }
    .modal-lang .bogo-language-switcher .current a,
    .modal-lang .bogo-language-switcher .current span {
        color: #fff;
        font-weight: bold;
        pointer-events: none;
    }
    .modal-lang .bogo-language-switcher img {
        display: none;
    }
}
@media screen and (min-width: 801px) {
.hd-right {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px;
	justify-content: end;
}
	}

@media screen and (max-width: 800px) {
    .modal-lang .bogo-language-switcher a,
    .modal-lang .bogo-language-switcher span {
        color: #333 !important;
    }
    .modal-lang .bogo-language-switcher li:not(:last-child)::after {
        color: #999 !important;
    }
    .modal-lang .bogo-language-switcher .current a,
    .modal-lang .bogo-language-switcher .current span {
        color: var(--blue) !important;
    }
}

@media screen and (min-width: 801px) {
    .hd-lang {
        position: relative;
    }
    .lang-btn {
        background: none;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 4px 10px;
        font-size: 12px;
        cursor: pointer;
        color: var(--mid);
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }
    .lang-btn:hover {
        border-color: var(--blue);
        color: var(--blue);
    }
    .lang-dropdown {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0,0,0,.1);
        list-style: none;
        padding: 4px 0;
        margin: 0;
        min-width: 100px;
        z-index: 9999;
    }
    .lang-dropdown.is-open {
        display: block;
    }
    .lang-dropdown li a {
        display: block;
        padding: 8px 16px;
        font-size: 12px;
        color: var(--mid);
        text-decoration: none;
        white-space: nowrap;
    }
    .lang-dropdown li a:hover {
        background: #f5f5f5;
        color: var(--blue);
    }
    .lang-dropdown li a.current {
        color: var(--blue);
        font-weight: bold;
        pointer-events: none;
    }
}

.error404-section {
    max-width: 600px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}
.error404-heading {
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--dark);
}
.error404-text {
    font-size: 14px;
    color: var(--mid);
    margin-bottom: 40px;
}
.error404-btn {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    padding: 14px 40px;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: .08em;
}
.error404-btn:hover {
    opacity: .8;
}