@charset "UTF-8";
/*------------------------
スタイルの初期化
------------------------*/
html{
	font-size: 62.5%;
	background: #000;
}
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; }
body{
	width:100%;
	background: var(--bgblack);
	font-family: 'Noto Sans JP','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	font-size: 1.4rem;
	line-height: 1.65;
	text-autospace:ideograph-alpha;
	font-weight:normal;
	font-feature-settings: 'palt';
	letter-spacing: .06em;
	position: relative;
	color:#fff;
}
body.is-menu-open {
	overflow: hidden;
}
.wf{
  font-family: "Playfair Display", serif;
  font-weight:400;
  font-style: normal;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
}
.wf-min {
	font-family: "Noto Serif JP", serif;
	font-weight: 200;
}
* {
	box-sizing: border-box;
}
a {
	text-decoration: none;
	color: var(--black);
	transition: all .3s ease 0s;
	display: block;
}
a img {
	border:0;
	transition: opacity .3s ease;
}
img{
	vertical-align:top;
	width: 100%;
	height: auto;
}
ul, ol { list-style-type:none; }
sup { position: relative; vertical-align: baseline; top: -0.9em; font-size: 0.5em; }
hr { display: none; }
h1,h2,h3,h4,h5,h6 { font-size: 100%;}
th, caption{ text-align: left; font-weight: normal; }
th,td { empty-cells:show; }
input[type="text"] , 
input[type="email"] , 
input[type="tel"] , 
input[type="password"] { padding:0 2px; margin-right:0.4em; }
input[type="submit"] { display:inline; margin:0; }
input[type="radio"] { margin-right:0.4em; }
textarea { padding:2px; }
optgroup { font-style:normal; }
option { padding-right:10px; }
*:focus {
outline: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,main{
	display:block;
}
/*ボタンデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"],button {
	color: var(--black);
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
	font-family: 'Noto Sans JP','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
	outline-offset: -2px;
}
input[type="text"] , 
input[type="email"] , 
input[type="tel"] , 
input[type="password"] ,
textarea {
	-webkit-appearance : none;
	appearance: none;
	border-radius:0;
	padding:8px;
	border:1px solid #dadada;
	width: 90%;
	box-sizing: border-box;
}
select {
	padding: 10px 16px 10px 10px;
	border: 1px solid #dadada;
	appearance: none;
	border-radius: 0;
	background-size: auto 5px;
}

:root{
	--bgblack:#232323;
	--red:#ad0303;
	--gray:#9FA0A0;
	--purple:#a6118f;
	--opaW:rgba(255,255,255,.75);
}
.flex-box {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.image img{
	width: 100%;
	height: 100%;
}
table {
	width: 100%;
	border-collapse: collapse;
}
.textarea{
	text-align: justify;
}

@media screen and (min-width:768px) {
	body{min-width:1200px;}
	.pc{display: block;}
	.sp,.sp-nav{display: none;}
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
	}
	a:hover img {
		opacity: .7;
	}
	main{
		padding-bottom: 180px;
	}
}
@media screen and (max-width:767px) {
	body{font-size: 3.73vw;}
	.pc{display: none;}
	.sp{display: block;}
	main{
		padding-top: calc(51px + 4vw);
		padding-bottom: 21.33vw;
	}
}

/*------------------------
アニメーション
------------------------*/
.js-fade {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 0.8s ease,
		transform 0.8s ease;
	will-change: opacity, transform;
}

.js-fade.is-inview {
	opacity: 1;
	transform: translateY(0);
}

/* 左から出したい場合 */
.js-fade[data-fade="left"] {
	transform: translateX(-30px);
}

.js-fade[data-fade="left"].is-inview {
	transform: translateX(0);
}

/* 右から出したい場合 */
.js-fade[data-fade="right"] {
	transform: translateX(30px);
}

.js-fade[data-fade="right"].is-inview {
	transform: translateX(0);
}

/* 拡大しながら表示 */
.js-fade[data-fade="scale"] {
	transform: scale(0.95);
}

.js-fade[data-fade="scale"].is-inview {
	transform: scale(1);
}


/*後続シングルタイトル、ボーダーちらつき対策*/
.single-sub-title{
	line-height: 1.4;
	position: relative;
}
.single-sub-title > span {
	display: block;
}

.single-sub-title::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--red);

	/* 初期状態 */
	opacity: 0;
	transform: translateY(15px);
}

/* ローディング完了後 */
html.js.is-loaded .single-sub-title::after {
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity .7s ease,
		transform .7s ease;

	transition-delay: .7s;
}

/* アニメーションを減らす設定の人には即表示 */
@media (prefers-reduced-motion: reduce) {
	.js-fade {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
/*------------------------
ローディング後フェードイン
------------------------*/
html.js .js-load-fade {
	opacity: 0;
	transform: translateY(15px);
}

html.js.is-loaded .js-load-fade {
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity .7s ease,
		transform .7s ease;
	/*
	 * page-loaderのフェードアウトが.7秒なので、
	 * ローダー終了後から動かす
	 */
	transition-delay:.7s;
}
html.js.is-loaded .js-load-fade[data-load-delay="1.2"] {
	transition-delay: 1.2s;
}
html.js.is-loaded .js-load-fade[data-load-delay="1.0"] {
	transition-delay: 1.0s;
}

@media (prefers-reduced-motion: reduce) {
	html.js .js-load-fade,
	html.js.is-loaded .js-load-fade {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
/*------------------------
Page Loading
------------------------*/
#page-loader {
	display: none;
}

html.js #page-loader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: block;

	background: #fff;

	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transition:
		opacity .7s cubic-bezier(.4, 0, .2, 1),
		visibility .7s cubic-bezier(.4, 0, .2, 1);

	will-change: opacity;
}


/*------------------------
ページ表示完了
白 → コンテンツ
------------------------*/
html.js.is-loaded #page-loader {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}


/*------------------------
ページ遷移開始
コンテンツ → 白
------------------------*/
html.js.is-leaving #page-loader {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transition-duration: .6s;
}


/* ロード中・ページ遷移中 */
/* html.js.is-loading,
html.js.is-loading body{
	overflow: hidden;
} */


/*------------------------
SPブラウザ下部対策
------------------------*/
@media screen and (max-width:767px) {

	/*
	 * Safariに認識させる最外周は黒
	 */
	html.js #page-loader {
		background: #000;
	}

	/*
	 * 実際に見せるローディング画面は白
	 * 下端だけ1px空ける
	 */
	html.js #page-loader::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 1px;
		left: 0;

		background: #fff;
		pointer-events: none;
	}

}


/*------------------------
アニメーション軽減
------------------------*/
@media (prefers-reduced-motion: reduce) {

	html.js #page-loader,
	html.js.is-leaving #page-loader {
		transition-duration: .01s;
	}

}

/*------------------------
header
------------------------*/
header {

	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 9999;
	background: rgba(0, 0, 0, .85);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	transition:
		background .35s ease,
		backdrop-filter .35s ease,
		-webkit-backdrop-filter .35s ease;
}

.sitelogo h1,
.sitelogo p {
	margin: 0;
	line-height: 1;
}
/* スクロール時 */
body.is-header-compact header {
	background: rgba(0, 0, 0, .85);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

/* メニューオープン時 */
header .sns {
	transition:
		opacity .35s ease,
		visibility .35s ease,
		transform .35s ease;
}

body.is-menu-open header .sns {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-4px) scale(.92);
}

/* PC */
@media screen and (min-width:768px) {
	header{
		height: 88px;
		min-width:1200px;
	}
	header .inner {
		height: 100%;
		box-sizing: border-box;
		display: grid;
		/*
			4列構成
			1列目：ロゴ
			2列目：余白・gnav
			3列目：SNS
			4列目：メニューボタン
		*/
		grid-template-columns: auto 1fr auto auto;

		/*
			通常時：
			1行目は成り行き、2行目は0px。
			gnavは2行目に入るが、高さ0なので見えない。
		*/
		grid-template-rows: auto 0px;

		align-items: center;
		align-content: center;
		column-gap: 22px;
		padding: 0 40px;
	}

	.sitelogo {
		/* 1列目に配置 */
		grid-column: 1;
		/*
			1行目から2行目までまたぐ。
			通常時もスクロール後も、ヘッダー全体の高さに対して中央配置にする。
		*/
		grid-row: 1 / 3;
		align-self: center;
	}
	.sitelogo img {
		display: block;
		width: auto;
		height: 22px;
	}
	header .sns {
		/* 3列目・1行目に配置 */
		grid-column: 3;
		grid-row: 1;
		align-self: center;
		justify-self: end;
		margin-right: 8px;

		/* 通常時のSNSサイズ */
		transform: scale(1);
		transform-origin: right center;
	}

	header .sns ul {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	header .sns img {
		display: block;
		height: 18px;
		width: auto;
		transition:
			opacity .3s ease,
			height .35s ease,
			transform .35s ease;
	}

	header .sns .mardigras {
		margin-right: 8px;
	}

	header .sns .kuroyume img {
		height: 56px;
	}

	header .sns .okiruneru img {
		height: 32px;
	}

	header .gnav {
		/* 2列目から3列目までまたぐ */
		grid-column: 2 / 4;
		/* 2行目に配置 */
		grid-row: 2;
		align-self: stretch;
		justify-self: end;
		/*
			通常時は高さ0で隠す。
			heightで制御することで、スクロール後のホバー範囲を調整しやすくする。
		*/
		height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(6px);

		transition:
			height .35s ease,
			opacity .3s ease,
			transform .3s ease,
			visibility .3s ease;
	}

	header .gnav ul {
		height: 100%;
		display: flex;
		align-items: stretch;
		gap: 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	header .gnav li {
		display: flex;
		align-items: stretch;
	}

	header .gnav a {
		height: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		color: #fff;
		font-size: 16px;
		line-height: 1;
		text-decoration: none;
	}

	header .menu-btn {
		/* 4列目に配置 */
		grid-column: 4;
		/*
			1行目から2行目までまたぐ。
			これにより、2行目だけの中央ではなく、
			ヘッダー全体の高さに対して中央に配置できる。
		*/
		grid-row: 1 / 3;
		align-self: center;
		justify-self: end;
		width: 52px;
		height: 26px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.menu-btn span {
		display: block;
		width: 100%;
		height: 2px;
		background: #fff;
		transition:
			transform .3s ease,
			opacity .3s ease;
	}

	/*------------------------
	スクロール後
	------------------------*/

	body.is-header-compact header .inner {
		/*----------------------------------------------
			スクロール後：
			ヘッダー88pxを 40px + 48px に分ける。

			1行目：40px / SNS
			2行目：48px / gnav

			gnavの2行目を48px確保することで、
			gnav a のホバー範囲をヘッダー下端まで広げる。
		------------------------*/
		grid-template-rows: 44px 44px; 
		align-content: stretch;
	}

	body.is-header-compact header .gnav {
		height: 48px;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	body.is-header-compact header .gnav ul {
		height: 100%;
		align-items: stretch;
	}

	body.is-header-compact header .gnav li {
		display: flex;
		align-items: stretch;
	}

	body.is-header-compact header .gnav a {
		height: 100%;
		display: flex;
		align-items: center;
		padding-bottom: 8px;	}

	body.is-header-compact header .sns {
		padding-top: 12px;
		transform: scale(.86);
	}

	body.is-header-compact header .sns ul {
		gap: 10px;
	}

	body.is-header-compact header .sns img {
		height: 18px;
	}

	body.is-header-compact header .sns .kuroyume img {
		height: 40px;
	}

	body.is-header-compact header .sns .okiruneru img {
		height: 28px;
	}
}

/* SP */
@media screen and (max-width:767px) {
	header{
		height: 51px;
	}
	header .inner {
		height: 100%;
		box-sizing: border-box;
		display:flex;
		align-items: center;
		justify-content:space-between;
		padding: 0 5.33vw;
	}
	header .gnav,
	header .sns{
		display: none;
	}
	header .sitelogo img {
		height: 13px;
		width: auto;
	}
	header .menu-btn {
		width:40px;
		height: 100%;
		position: relative;
		background: none;
	}
	.menu-btn span {
		display: block;
		width: 100%;
		height: 1px;
		background: #fff;
		position: absolute;
	}
	.menu-btn span:nth-child(1){
		top: 16px;
		left: 0;
		right: 0;
	}
	.menu-btn span:nth-child(2){
		top: 26px;
		left: 0;
		right: 0;
	}
	.menu-btn span:nth-child(3){
		top: 36px;
		left: 0;
		right: 0;
	}

}

/*------------------------
オーバーレイメニュー
------------------------*/

.overlay-menu {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(10, 10, 10, .97);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity .35s ease,
		visibility .35s ease;
}

body.is-menu-open .overlay-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.overlay-menu__inner {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.overlay-menu__nav ul,
.overlay-menu__sns ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.overlay-menu__nav a {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	letter-spacing: .08em;
	line-height: 1;
	transition: opacity .3s ease;
}

.overlay-menu__nav a:hover {
	opacity: .65;
}

.overlay-menu__sns ul {
	display: flex;
	align-items: center;
	justify-content: center;
}

.overlay-menu__sns img {
	display: block;
	width: auto;
}

/* メニュー開いた時のボタン */
body.is-menu-open .menu-btn span:nth-child(1) {
	transform: translateY(9px) rotate(35deg);
}

body.is-menu-open .menu-btn span:nth-child(2) {
	opacity: 0;
}

body.is-menu-open .menu-btn span:nth-child(3) {
	top: 40px;
	transform: translateY(-15px) rotate(-35deg);
}

.menu-btn span {
	transition:
		transform .3s ease,
		opacity .3s ease;
}

/* PC */
@media screen and (min-width:768px) {

	.overlay-menu__inner {
		padding: 120px 40px 80px;
	}

	.overlay-menu__nav {
		margin-bottom: 54px;
	}

	.overlay-menu__nav ul {
		display: grid;
		grid-template-columns: repeat(2, auto);
		gap: 28px 90px;
		text-align: center;
	}

	.overlay-menu__nav a {
		font-size: 34px;
	}

	.overlay-menu__sns ul {
		gap: 18px;
	}

	.overlay-menu__sns img {
		height: 24px;
	}

	.overlay-menu__sns .kuroyume img {
		height: 60px;
	}

	.overlay-menu__sns .okiruneru img {
		height: 38px;
	}
}

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

	.overlay-menu__inner {
		padding: 24vw 8vw 12vw;
	}

	.overlay-menu__nav {
		margin-bottom: 10.667vw;
	}

	.overlay-menu__nav ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6.4vw;
	}

	.overlay-menu__nav a {
		font-size: 7.467vw;
	}

	.overlay-menu__sns ul {
		flex-wrap: wrap;
		gap: 3.2vw;
	}

	.overlay-menu__sns img {
		height:4.27vw;
	}

	.overlay-menu__sns .kuroyume img {
		height: 13.333vw;
	}

	.overlay-menu__sns .okiruneru img {
		height: 8vw;
	}
}

/*------------------------
footer
------------------------*/
footer {
	background: #000;
}

footer .copy {
	text-align: center;
}

footer .inner {
	position: relative;
}

#page-top {
	position: absolute;
	z-index: 2;
}

#page-top a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	line-height: 1;
	letter-spacing: .08em;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	text-decoration: none;
	transition: opacity .3s ease;
}

/* 三角矢印 */
#page-top a::before {
	content: "";
	position: absolute;
	display: block;
	width: var(--arrow-size);
	height: var(--arrow-size);
	left: var(--line-left);
	top: calc(var(--line-top) - var(--arrow-size));
	background: #fff;
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	transition: top .3s ease;
}

/* 縦線 */
#page-top a::after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	left: var(--line-left);
	top: var(--line-top);
	height: var(--line-height);
	background: #fff;
	transition:
		top .3s ease,
		height .3s ease;
}

#page-top a:hover {
	opacity: .75;
}

/* PC */
@media screen and (min-width:768px) {
	footer {
		padding: 80px 0 50px;
	}
	footer .inner {
		width: 1200px;
		margin: 0 auto;
	}
	footer .site-logo {
		margin-bottom: 30px;
	}
	footer .site-logo img {
		width: auto;
		height: 26px;
	}
	footer .sns {
		margin-bottom: 35px;
	}
	footer .sns ul {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	footer .sns ul img {
		display: block;
		height: 20px;
		width: auto;
		transition: opacity .3s ease, max-height .35s ease;
	}
	footer .sns .mardigras {
		margin-right: 8px;
	}
	footer .sns .kuroyume img {
		height: 54px;
	}
	footer .sns .okiruneru img {
		height: 32px;
	}

	footer .fnav {
		margin-bottom: 80px;
	}

	footer .fnav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 15px;
		justify-content: flex-start;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	footer .fnav li {
		width: calc((100% - 105px) / 8);
		font-size: 17px;
	}

	#page-top {
		right: 0;
		top: 0;
	}

	#page-top a {
		--line-left: 28px;
		--line-top: 8px;
		--line-height: 56px;
		--arrow-size: 10px;

		width: 58px;
		height:70px;
		padding-left: 28px;
		font-size: 15px;
	}

	/* ホバー時：下端を固定したまま上方向に10px伸ばす */
	#page-top a:hover::before {
		top: calc(var(--line-top) - var(--arrow-size) - 10px);
	}

	#page-top a:hover::after {
		top: calc(var(--line-top) - 10px);
		height: calc(var(--line-height) + 10px);
	}

}

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

	footer {
		padding: 19vw 0 16vw;
	}

	footer .inner {
		width: 100%;
		box-sizing: border-box;
		padding: 0 5.33vw;
		margin: 0 auto;
	}

	footer .site-logo {
		margin-bottom:16vw;
		height:4.62vw;
		text-align: center;
	}
	footer .site-logo a{
		height: 100%;
		display: block;
	}
	footer .site-logo img{
		height: 100%;
		width: auto;
	}
	footer .sns {
		margin-bottom:8vw;
	}

	footer .sns ul {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2.667vw;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	footer .sns ul img {
		display: block;
		width: auto;
		height: 4.27vw;
	}

	footer .sns .mardigras {
		margin-right: 1.6vw;
	}

	footer .sns .kuroyume img {
		height:12vw;
	}

	footer .sns .okiruneru {
		margin-left: 1.6vw;
	}
	footer .sns .okiruneru img {
		height: 7.2vw;
	}

	footer .fnav {
		margin-bottom: 10.667vw;
	}

	footer .fnav ul {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap:8vw;
		row-gap: 4.27vw;
		margin: 0 auto;
	}

	footer .fnav li {
		font-size: 4vw;
		line-height: 1;
		text-align: center;
		letter-spacing: .04em;
	}

	footer .fnav a {
		padding:1.6vw 0;
		}

	footer .copy {
		margin: 0;
		color: #fff;
		font-size: 2.933vw;
		line-height: 1;
		letter-spacing: .02em;
		text-align: center;
	}

	#page-top {
		right: 5.333vw;
		top: -8vw;
	}

	#page-top a {
		--line-left: 3.733vw;
		--line-top: 3.2vw;
		--line-height: 14vw;
		--arrow-size: 2.4vw;
		--line-hover: 2.667vw;

		width: 8.8vw;
		height: 21.333vw;
		padding-left: 5.333vw;
		font-size: 3.2vw;
	}

	#page-top a::before {
		left: var(--line-left);
		top: calc(var(--line-top) - var(--arrow-size));
		width: var(--arrow-size);
		height: var(--arrow-size);
	}

	#page-top a::after {
		left: var(--line-left);
		top: var(--line-top);
		height: var(--line-height);
	}

	#page-top a:hover::before {
		top: calc(var(--line-top) - var(--arrow-size) - var(--line-hover));
	}

	#page-top a:hover::after {
		top: calc(var(--line-top) - var(--line-hover));
		height: calc(var(--line-height) + var(--line-hover));
	}

}


/*------------------------
共通パーツ パンくず　メインタグ
------------------------*/
#breadcrumb{
	overflow: hidden;
}
/* PC */
@media screen and (min-width:768px) {
	main{
		padding-top: 110px;
	}
	#breadcrumb{
	padding: 0 40px;
	margin: 0 auto 90px;
}
	#breadcrumb li {
		float: left;
		font-size: 14px;
		line-height: 1;
		padding-right: 4px;
	}
	#breadcrumb li:not(:first-of-type)::before {
		content: '   >   ';
		color: #fff;
		padding: 0 5px;
	}
	#breadcrumb li a {
		display: inline-block;
		color: #fff;
	}
	#breadcrumb li a::after {
		content: '';
		display: block;
		width: 0;
		transition: width 0.3s;
		border-bottom: 1px solid #fff;
		margin: auto;
	}
	#breadcrumb li a:hover {
		opacity: 1;
	}
	#breadcrumb li a:hover::after {
		width: 100%;
	}
}
/* SP */
@media screen and (max-width:767px) {
#breadcrumb {
	padding: 0 5.33vw;
	margin-bottom: 19vw;
	overflow-x: scroll;
	font-size: 0;
	white-space: nowrap;
	position: relative;
	z-index: 1;
}
#breadcrumb li {
	display: inline-block;
	font-size: 2.67vw;
}
#breadcrumb li:not(:first-of-type) {
	padding-left: 4vw;
}
#breadcrumb li a {
	display: block;
	font-size: 2.67vw;
	color: #fff;
	line-height: 1;
	position: relative;
}
#breadcrumb li:not(:first-of-type) a::before  {
	content: '';
	width: 1vw;
	height: 1vw;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: translateY(-50%) rotate(-45deg);
	position: absolute;
	top: 50%;
	left: -3vw;
}
}
.page-title{
	text-align: center;
	position: relative;
}
.page-title .head{
	letter-spacing: 0.08em;
}
.page-title:after{
	content: '';
	display: block;
	background: var(--red);
}
.page-back{
	border-top: 1px solid rgba(255, 255, 255, .12);
	text-align: center;
}

/* PC */
@media screen and (min-width:768px) {
	.page-title{
		margin-bottom: 90px;
	}
	.page-title .head{
		font-size: 48px;
		/* font-size: clamp(48px, calc(2vw + 24px), 56px); */
	}	
	.page-title:after{
		width: 56px;
		height: 1px;
		margin: 16px auto 0;
	}
	.page-back{
		margin-top: 70px;
		padding-top: 40px;
	}
	.page-back a{
		display: inline-block;
		line-height: 1;
		letter-spacing: 0.1em;
		font-size: 18px;
	}
	.page-back a:hover{
		opacity: .6;
	}
}
/* SP */
@media screen and (max-width:767px) {
	.page-title{
		padding:0 5.33vw;
		margin-bottom:16vw;
	}
	.page-title .head{
		font-size:8.53vw;
		line-height: 1.4;
	}	
	.page-title:after{
		width:7.47vw;
		height: 1px;
		margin:4.27vw auto 0
	}
	.page-back{
		margin-top: 13.33vw;
		padding-top: 7.47vw;
	}
	.page-back a{
		font-size: 4.27vw;
	}
}

/*------------------------
共通パーツ ボタン・h2見出し・インナー幅
------------------------*/
.btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 1px solid var(--opaW);
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	letter-spacing: .08em;
	transition: background .25s ease, color .25s ease;
}
.sec-title h2{
	text-align: center;
	letter-spacing: 0.08em;
	line-height: 1;
}
/* PC */
@media screen and (min-width:768px) {
	.btn a {
		min-width: 260px;
		height: 55px;
		font-size: 17px;
	}
	.btn a:hover {
		background: rgba(255,255,255,.18);
	}
/*
	セクションタイトル用フォントサイズ
	1200px以下：35px 1200px〜1520px：35pxから44pxまで可変 	1520px以上：44pxで固定
*/
.sec-title h2 {
	font-size: clamp(35px, calc(2.8125vw + 1.25px), 44px);
	margin-bottom:50px;
	}
/* 
	共通インナー幅 最大幅は --inner-max で変更可能。
	左右余白は 1200px時に0px、1360px以上で40pxになるよう可変。
*/
	.l-inner {
		--inner-max: 1520px;
		--inner-side-gap: clamp(0px, calc((100vw - 1200px) / 4), 40px);
		/* 
		画面幅から左右余白分を引いた幅と、
		最大幅 --inner-max の小さい方を採用する
		*/
		width: min(
			calc(100% - var(--inner-side-gap) - var(--inner-side-gap)),
			var(--inner-max)
		);
		margin-left: auto;
		margin-right: auto;
	}
}
/* SP */
@media screen and (max-width:767px) {
	.btn a {
		min-width: 58.67vw;
		height: 12.8vw;
		font-size:4vw;
	}
	.sec-title h2 {
		font-size: 9.06vw;
		margin-bottom: 9.33vw;
	}

}



/* ------------------------
	ページネーション：共通
------------------------ */
.pagination-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pagination__list {
	display: flex;
	align-items: center;
}

.pagination__item {
}


.pagination__link {
	transition: opacity 0.3s ease;
}
.pagination__link,
.pagination__current {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}

.pagination__link::after,
.pagination__current::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s ease;
	height: 1px;
}

/* 現在のページ */
.pagination__current::after {
	transform: scaleX(1);
}

/* 前後の丸ボタン */
.pagination__arrow {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-style: solid;
	border-color:var(--opaW);
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

.pagination__arrow svg {
	display: block;
}

/* 無効状態 */
.pagination__arrow.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}


/* ------------------------
	PC
------------------------ */
@media screen and (min-width: 768px) {
	.pagination {
		margin-top: 50px;
	}
	.pagination-wrap {
		min-height: 114px;
	}

	.pagination {
		gap: 30px;
	}

	.pagination__list {
		gap: 20px;

	}

	.pagination__link,
	.pagination__current {
		padding-bottom: 8px;
		font-size: 27px;
	}
	.pagination__arrow {
		width: 34px;
		height: 34px;
		border-width: 1px;
	}

	.pagination__arrow svg {
		width: 12px;
		height: 14px;
	}
	.pagination__link:hover::after {
		transform: scaleX(1);
	}

}


/* ------------------------
	SP：375px基準
------------------------ */
@media screen and (max-width: 767px) {

	.pagination-wrap {
		min-height: 30.4vw;
	}

	.pagination {
		margin-top: 9.33vw;
		gap: 5.33vw;
	}

	.pagination__list {
		gap: 4.8vw;
	}

	.pagination__link,
	.pagination__current {
		min-width: 2.13vw;
		font-size: 5.33vw;
		padding-bottom: 2.26vw;
	}

	.pagination__arrow {
		width: 8.53vw;
		height: 8.53vw;
		border-width: 0.27vw;
	}

	.pagination__arrow svg {
		width: 1.87vw;
		height: 3.2vw;
	}

}


/* ------------------------
	ホバー
------------------------ */
@media (hover: hover) and (pointer: fine) {

	.pagination__link:hover {
		opacity: 0.6;
	}

	.pagination__arrow:hover {
		background-color: #fff;
		color: #222;
	}

}


/*------------------------
header
------------------------*/
/* PC */
@media screen and (min-width:768px) {
}
/* SP */
@media screen and (max-width:767px) {
}


/*------------------------
header
------------------------*/
/* PC */
@media screen and (min-width:768px) {
}
/* SP */
@media screen and (max-width:767px) {
}

/*------------------------
contactform7
------------------------*/

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border: 1px solid var(--red) !important;
}

.wpcf7-not-valid-tip {
	color: var(--purple) !important;
}


/*------------------------
フォーム基本
------------------------*/

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="number"],
.contact-form textarea,
.contact-form select {
	width: 100%;
	color: #fff;
	background-color: #333;
	border: none;
}

.contact-form textarea {
	resize: vertical;
}


/* フォーカス時 */
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form input[type="url"]:focus,
.contact-form input[type="number"]:focus,
.contact-form textarea:focus,
.contact-form select:focus {
	background-color: #3a3a3a;
	border-color: #888;
	outline: none;
}


/* placeholder */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: #777;
	opacity: 1;
}


/* 必須 */
.contact-form .required {
	margin-left: .35em;
	color: var(--red);
	font-size: .8em;
}


/* 見出し内の小文字 */
.contact-form .form-head .mini {
	font-size: .8em;
}


/*------------------------
生年月日
------------------------*/

.contact-form .birth-date {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.contact-form .birth-date__item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
}

.contact-form .birth-date__item .wpcf7-form-control-wrap {
	display: block;
}


/*------------------------
ラジオボタン
------------------------*/

.contact-form input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #777;
	border-radius: 50%;
	background: #333;
	cursor: pointer;
	vertical-align: middle;
	transition:
		border-color .2s ease,
		background-color .2s ease;
}

.contact-form input[type="radio"]:checked {
	border-color: #fff;
	background:
		radial-gradient(
			circle at center,
			var(--red) 0,
			var(--red) 38%,
			transparent 42%
		),
		#333;
}

.contact-form input[type="radio"]:focus-visible {
	outline: 2px solid rgba(255,255,255,.5);
	outline-offset: 3px;
}

.contact-form .wpcf7-radio {
	display: flex;
	align-items: center;
}

.contact-form .wpcf7-list-item {
	margin: 0;
}

.contact-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}


/*------------------------
補足テキスト
------------------------*/

.contact-form .note {
	line-height: 1.7;
}

.contact-form .note.bold {
	font-weight: 700;
}


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

.contact-form > .submit-btn {
	position: relative;
	text-align: center;
}

.contact-form .submit-btn input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 30px;
	border: 1px solid var(--opaW);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-family: inherit;
	text-align: center;
	letter-spacing: .08em;
	line-height: 1;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition:
		background .25s ease,
		color .25s ease;
}


/*------------------------
その他
------------------------*/

.contact-wrapper .message-area,
#entry-wrapper .message-area{
	line-height: 1.85;
}

.form-submit-note {
	text-align: center;
}


/*------------------------
PC
------------------------*/

@media screen and (min-width:768px) {

	.contact-wrapper,
	#entry-wrapper{
		font-size: 16px;
	}

	.contact-wrapper .message-area,
	#entry-wrapper .message-area{
		margin-bottom: 30px;
	}

	.contact-form .item-wrap {
		margin-bottom: 22px;
	}

	.contact-form .item-wrap .form-head {
		margin-bottom: 10px;
		font-size: 17px;
	}


	/* 入力欄 */
	.contact-form input[type="text"],
	.contact-form input[type="email"],
	.contact-form input[type="tel"],
	.contact-form input[type="url"],
	.contact-form input[type="number"],
	.contact-form textarea,
	.contact-form select {
		padding: 16px 15px;
		border-radius: 8px;
		font-size: 16px;
	}


	/* 生年月日 */
	.contact-form .birth-date {
		gap: 20px;
	}

	.contact-form .birth-date__item {
		gap: 8px;
	}

	.contact-form .birth-date__item:nth-child(1) .wpcf7-form-control-wrap {
		width: 120px;
	}

	.contact-form .birth-date__item:nth-child(2) .wpcf7-form-control-wrap,
	.contact-form .birth-date__item:nth-child(3) .wpcf7-form-control-wrap {
		width: 90px;
	}


	/* ラジオボタン */
	.contact-form input[type="radio"] {
		width: 28px;
		height: 28px;
	}

	.contact-form .wpcf7-radio {
		gap: 35px;
	}

	.contact-form .wpcf7-list-item label {
		gap: 8px;
	}


	/* 郵便番号 */
	.contact-form #postcode1,
	.contact-form input[name="postal-code"]{
		width:10em;
	}


	/* 補足 */
	.contact-form .note,
	.contact-form .form-note{
		margin-top: 8px;
		font-size: 13px;
	}

	.contact-form .note + .note {
		margin-top: 3px;
	}


	/* メール確認 */
	.contact-form .mail-confirm {
		margin-top: 20px;
	}


	/* 送信ボタン */
	.contact-form .submit-btn input[type="submit"] {
		min-width: 260px;
		height: 55px;
		font-size: 17px;
	}

	.contact-form .submit-btn input[type="submit"]:hover {
		background: rgba(255,255,255,.18);
	}


	/* スピナー */
	.contact-form > .submit-btn .wpcf7-spinner {
		position: absolute;
		top: 50%;
		left: calc(50% + 200px);
		margin: 0;
		transform: translateY(-50%);
	}


	/* CF7レスポンス */
	.wpcf7 form .wpcf7-response-output {
		padding: 10px 15px !important;
	}

	.form-submit-note {
		margin: 25px 0 40px;
	}

}


/*------------------------
SP
------------------------*/

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

	/* CF7レスポンス */
	.wpcf7 form .wpcf7-response-output {
		padding-top: 3.2vw !important;
		padding-bottom: 3.2vw !important;
		margin-top: 4vw !important;
		margin-bottom: 6.4vw !important;
	}


	/* 入力欄 */
	.contact-form input[type="text"],
	.contact-form input[type="email"],
	.contact-form input[type="tel"],
	.contact-form input[type="url"],
	.contact-form input[type="number"],
	.contact-form textarea,
	.contact-form select {
		padding: 4vw;
		border-radius: 8px;
		font-size: 3.74vw;
	}


	/* 各項目 */
	.contact-form .item-wrap {
		margin-bottom: 6.67vw;
	}

	.contact-form .item-wrap .form-head {
		margin-bottom: 1.63vw;
	}


	/* 生年月日 */
	.contact-form .birth-date {
		gap: 2.67vw;
	}

	.contact-form .birth-date__item {
		gap: 1.6vw;
	}

	.contact-form .birth-date__item:nth-child(1) .wpcf7-form-control-wrap {
		width: 24vw;
	}

	.contact-form .birth-date__item:nth-child(2) .wpcf7-form-control-wrap,
	.contact-form .birth-date__item:nth-child(3) .wpcf7-form-control-wrap {
		width: 18.67vw;
	}

	.contact-form .birth-date select {
		padding-left: 2.67vw;
		padding-right: 2.67vw;
	}


	/* ラジオボタン */
	.contact-form input[type="radio"] {
		width: 8vw;
		height: 8vw;
	}

	.contact-form .wpcf7-radio {
		gap: 8vw;
	}

	.contact-form .wpcf7-list-item label {
		gap: 2.13vw;
	}


	/* 郵便番号 */
	.contact-form #postcode1,
	.contact-form input[name="postal-code"]{
		width:10em;
	}


	/* 補足 */
	.contact-form .note,
	.contact-form .form-note {
		margin-top: 2.13vw;
		font-size: 3.2vw;
	}

	.contact-form .note + .note {
		margin-top: .8vw;
	}


	/* メール確認 */
	.contact-form .mail-confirm {
		margin-top: 5.33vw;
	}


	/* 送信ボタン */
	.contact-form .submit-btn input[type="submit"] {
		min-width: 58.67vw;
		height: 12.8vw;
		font-size: 4vw;
	}


	/* スピナー */
	.contact-form > .submit-btn .wpcf7-spinner {
		position: absolute;
		top: 50%;
		left: calc(50% + 35vw);
		margin: 0;
		transform: translateY(-50%);
	}


	/* その他 */
	.contact-wrapper .message-area,
	#entry-wrapper .message-area {
		margin-bottom: 8vw;
	}

	.form-submit-note {
		margin: 0 0 5.33vw;
		font-size: 3.47vw;
	}

}
/*------------------------
INOS 関連リンク
------------------------*/
.inos-links {
	background: var(--bgblack);
	border-top: 1px solid rgba(255, 255, 255, .15);
}

.inos-links ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.inos-links a {
	color: #fff;
	line-height: 1;
	letter-spacing: 0.08em;
	text-decoration: none;
}

/* PC */
@media screen and (min-width:768px) {
	.inos-links {
		padding: 30px 40px 30px;
	}

	.inos-links ul {
		gap: 15px 40px;
	}

	.inos-links a {
		font-size: 12px;
	}

	.inos-links a:hover {
		opacity: .6;
	}
}

/* SP */
@media screen and (max-width:767px) {
	.inos-links {
		padding: 8vw 5.33vw 12vw;
	}

	.inos-links ul {
		flex-direction: column;
		gap: 5.33vw;
	}

	.inos-links a {
		font-size: 3.47vw;
	}
}