@charset "UTF-8";

@font-face {
  font-family: "yugothic", YuGothic,"Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "yugothic", YuGothic,"Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "yugothic", YuGothic,"Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "yugothic", YuGothic,"Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "yugothic", YuGothic,"Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 500;
}
@font-face {
  font-family: "yugothic", YuGothic,"Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: normal;
}
@font-face {
  font-family: "yugothic", YuGothic,"Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

@font-face {
  font-family: 'yumincho';
  src: local("Yu Mincho Light");
  font-weight: 100;
}
@font-face {
  font-family: 'yumincho';
  src: local("Yu Mincho Light");
  font-weight: 200;
}
@font-face {
  font-family: 'yumincho';
  src: local("Yu Mincho Light");
  font-weight: 300;
}
@font-face {
  font-family: 'yumincho';
  src: local("Yu Mincho Regular");
  font-weight: 400;
}
@font-face {
  font-family: 'yumincho';
  src: local("Yu Mincho Regular");
  font-weight: 500;
}
@font-face {
  font-family: 'yumincho';
  src: local("Yu Mincho Demibold");
  font-weight: 600;
}
@font-face {
  font-family: 'yumincho';
  src: local("Yu Mincho Demibold");
  font-weight: 700;
}
@font-face {
  font-family: 'yumincho';
  src: local("Yu Mincho Demibold");
  font-weight: 800;
}
@font-face {
  font-family: 'yumincho';
  src: local("Yu Mincho Demibold");
  font-weight: 900;
}
@font-face {
  font-family: 'yumincho';
  src: local("Yu Mincho Demibold");
  font-weight: bold;
}

:root {
	--site-c-black: #222;
	--site-c-red: #e60020;
	--site-c-yellow: #fcf800;
	--site-c-blue: #9fd2fc;
	--site-c-blue--dark: #7ac6f6;
	--site-c-gray: #999;
	--site-c-gray--dark: #999;
	--site-c-gray--light: #dcdcdc;
	--site-c-bg: #0f0f1a;
	--font-c: #fff;
	--font-family-serif: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	--font-family-gothic: 'Segoe UI', 'Noto Sans JP', "yugothic", YuGothic, "Yu Gothic", "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	--font-family-alphabet: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, 'Noto Sans JP', "yugothic", YuGothic, "Yu Gothic", "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

:root {
	--l-container-padding-inline: 5rem;
}
@media screen and (max-width: 1120.98px) {
	:root {
		--l-container-padding-inline: 2rem;
	}
}
@media screen and (max-width: 767.98px) {
	:root {
		--l-container-padding-inline: 1rem;
	}
}




html {font-size: 16px;}
@media screen and (max-width: 1120.98px) {
	html {font-size: 16px;}
}
@media screen and (max-width: 959.98px) {
	html {font-size: 16px;}
}
@media screen and (min-width: 768px) and (max-width: 819.98px) {
	html {font-size: 1.875vw;}
}
@media screen and (min-width: 561px) and (max-width: 767.98px) {
	html {font-size: 2.857vw;}
}
@media screen and (max-width: 560.98px) {
	html {font-size: 16px;}
}
@media screen and (max-width: 374.98px) {
	html {font-size: 5vw;}
}

body {
	font-size: 16px;
	font-weight: 500;
	font-family: var(--font-family-gothic);
	background-repeat: no-repeat;
	background-position: top center;
	background-color: var(--site-c-bg);
	color: var(--font-c);
}
@media screen and (max-width: 767.98px) {
	body {font-size: 0.875rem;}
}

a {
	color: #127ff1;
	text-decoration: none;
	transition:
		box-shadow 0.2s ease,
		text-shadow 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease,
		opacity 0.2s ease;
}
a:hover,
a:focus {
	opacity: 0.75;
	text-decoration: none;
}

.wrapper {
	/* NOTE: stickyコンテンツがあるので使わない */
	/*overflow-x: hidden;*/
	/*overflow-y: auto;*/
}

/*-------------------------------------------------------------*/
/**
 * loading
**/
#is-loading {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 50000;
}
#loading {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 20rem;
	height: 20rem;
	margin-top: -10rem;
	margin-left: -10rem;
	text-align: center;
	color: #fff;
	z-index: 9;
}
.spinner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	width: 256px;
	margin: 10rem auto 0;
}
.spinner::before {
	content: '';
	display: block;
	background-image: url("../../img/img_loading.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	width: 256px;
	height: 26px;
	margin: 0 0 1rem;
}
@media screen and (max-width: 767.98px) {
	.spinner {width: 128px;}
	.spinner::before {width: 128px;}
}

.spinner > div {
	display: block;
	border-radius: 50%;
	background-color: #57cce7;
	width: 0.75rem;
	height: 0.75rem;
	margin: 0 0.25rem;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
@media screen and (max-width: 767.98px) {
	.spinner > div {
		width: 0.5rem;
		height: 0.5rem;
		margin: 0 0.25rem;
	}
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}


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

/*-------------------------------------------------------------*/
/* header */
#header {
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 20000;
	transform: translate(100%,0);
}


.header-logo {
	max-width: 16rem;
}
.header-logo > img {
	width: 100%;
	height: auto;
}


.menu-button {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	font-family: var(--font-family-serif);
	font-size: 1.25rem;
	font-weight: 600;
	gap: 1.25rem;
	position: absolute;
	top: 3.5rem;
	left: -3.5rem;
	z-index: 20010;
	transform: translate(-100%,0);
	opacity: 1;
	transition: opacity 0.4s ease;
	cursor: pointer;
}
.menu-button::before {
	content: '';
	display: block;
	background-image: url("../../img/btn-menu.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	width: 3rem;
	height: 3rem;
	transform: rotate(90deg);
}
.menu-button::after {
	content: 'もくじ';
	display: block;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	line-height: 1;
}
.menu-button.show {
	opacity: 1;
	pointer-events: auto;
}
.sub .menu-button {
	opacity: 1;
	pointer-events: auto;
}
@media screen and (max-width: 767.98px) {
	.menu-button {
		font-size: 3.25vw;
		gap: 0.5em;
		position: absolute;
		top: 1.25em;
		left: -1.25em;
	}
	.menu-button::before {
		width: 3em;
		height: 3em;
	}
}
@media screen and (max-width: 560.98px) {
	.menu-button {
		top: 1em;
		left: -1em;
	}
	.menu-button::before {
		width: 2em;
		height: 2em;
	}
}

.menu-switch {
	opacity: 0;
	position: absolute;
}


.menu-nav {
	position: relative;
	z-index: 9999;
	height: 100%;
	padding: 6rem 1rem 1rem;
	box-shadow: 0 8px 32px 0 rgba(0,0,0,0);
	background-color: #fff;
	color: var(--site-c-black);
	transform: translate(0,0);
	transition: all 0.2s ease;
	pointer-events: none;
}
[id="menu-switch"]:checked ~ .menu-nav {
	box-shadow: 0 8px 32px 0 rgba(0,0,0,0.2);
	transform: translate(-100%,0);
	pointer-events: auto;
}
@media screen and (max-width: 767.98px) {
	.menu-nav {
		font-size: 3.25vw;
	}
}

.menu-nav > ul {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row-reverse;
	align-content: stretch;
	align-items: stretch;
	padding-top: 9rem;
}
.menu-nav > ul > li {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	line-height: 1;
}
.menu-nav > ul > li + li {border-right: solid 1px var(--site-c-black);}
.menu-nav > ul > li > a {
	display: block;
	color: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	font-feature-settings: 'palt';
	letter-spacing: 0.2ex;
	padding: 0 2rem 2rem;
}
.menu-nav > ul > li > a > i {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	vertical-align: middle;
	margin: 0 0.25rem 0 0;
}
.menu-nav > ul > li > a > i > img {
	width: auto;
	height: 100%;
}
.menu-nav > ul > li > a > span {
	display: inline-block;
	vertical-align: middle;
}
@media screen and (max-width: 767.98px) {
	.menu-nav > ul > li > a {
		font-size: 0.75em;
		line-height: 1.3333;
		padding: 0 2em 2em;
	}
	.menu-nav > ul > li > a > i {
		width: 1em;
		height: 1em;
	}
}

/*-------------------------------------------------------------*/
/* content */

#content {}

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


/*-------------------------------------------------------------*/
/* footer */

.go-to-pagetop {}
.go-to-pagetop > div {}
.go-to-pagetop > div a {}
.go-to-pagetop > div a i {}

#footer {
	--footer-bg-height: 918px;
	background-image:
		url("../images/bg-footer-ghost.jpg"),
		url("../images/bg-footer.jpg");
	background-repeat: 
		no-repeat,
		repeat-x;
	background-position: 
		left 50% bottom calc(var(--footer-bg-height)*-0.5),
		left 50% top 0;
	background-size: 
		auto var(--footer-bg-height),
		auto 100%;
	background-blend-mode:
		screen,
		normal;
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 1120.98px) {
	#footer {
		--footer-bg-height: 52.3vw;/* NOTE: 横に対する比率 */
		background-position: 
			left 50% bottom calc(var(--footer-bg-height)*-0.5),
			left 50% top 0;
		background-size:
			100vw var(--footer-bg-height),
			auto 100%;
	}
}
@media screen and (max-width: 767.98px) {
	#footer {
		--footer-bg-height: 52.3vw;/* NOTE: 横に対する比率 */
		--footer-bg-height-coef: 2;/* NOTE: 大きさ（何倍サイズか） */
		background-position: 
			left 50% bottom calc(var(--footer-bg-height)*-0.5*var(--footer-bg-height-coef)),
			left 50% top 0;
		background-size:
			calc(100vw*var(--footer-bg-height-coef)) calc(var(--footer-bg-height)*var(--footer-bg-height-coef)),
			auto 100%;
	}
}

/*
.footer-sns {}
.footer-sns > dt {
	font-size: 0.75rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 1rem;
}
.footer-sns > dd {}
.footer-sns > dd > ul {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
.footer-sns > dd > ul > li {
	margin: 0 1.25rem;
}
.footer-sns > dd > ul > li > a {}
.footer-sns > dd > ul > li > a > img {
	width: auto;
	height: 1.125rem;
}
*/
.footer-title {}
.footer-title img {}

.footer-logo {}
.footer-logo img {}

.copyright {
	font-size: 1rem;
	font-weight: 500;
	font-family: var(--font-family-serif);
	letter-spacing: 0.12ex;
	text-align: center;
	padding: 2.5rem 0;
	margin: 0;
}
.copyright a {
	color: inherit;
	font-family: inherit;
	text-decoration: underline;
	margin-left: 1ex;
	margin-right: 1ex;
}


/*-------------------------------------------------------------*/
/* common style */


/*-------------------------------------------------------------*/
/* float list */

/* wrap common */
.list-float {
	margin:0 -1em;
	box-sizing: border-box;
}

.list-inline {}
.list-inline li { display: inline-block; }

/* margin */
.mb00 { margin-bottom:0; }
.mb05 { margin-bottom:0.5em; }
.mb10 { margin-bottom:1em; }
.mb15 { margin-bottom:1.25em; }
.mb20 { margin-bottom:2em; }
.mb25 { margin-bottom:2.5em; }
.mb30 { margin-bottom:2.5em; }
.mb35 { margin-bottom:3.5em; }
.mb40 { margin-bottom:4em; }

.ml00 { margin-left:0; }
.ml05 { margin-left:0.5em; }
.ml10 { margin-left:1em; }
.ml15 { margin-left:1.25em; }
.ml20 { margin-left:2em; }
.ml25 { margin-left:2.5em; }
.ml30 { margin-left:2.5em; }

.mr00 { margin-right:0; }
.mr05 { margin-right:0.5em; }
.mr10 { margin-right:1em; }
.mr15 { margin-right:1.25em; }
.mr20 { margin-right:2em; }
.mr25 { margin-right:2.5em; }
.mr30 { margin-right:2.5em; }

.ma { margin-left:auto; margin-right:auto; }

.fs--01 { font-size:50%; }
.fs--02 { font-size:66.66%; }
.fs--03 { font-size:77.77%; }
.fs--04 { font-size:100%; }
.fs--05 { font-size:128.5%; }
.fs--06 { font-size:150%; }
.fs--07 { font-size:200%; }
.fs--08 { font-size:228%; }
.fs--09 { font-size:250%; }
.fs--10 { font-size:285%; }
.fs--11 { font-size:300%; }
.fs--12 { font-size:320%; }

.fw--400 {font-weight: 400}
.fw--500 {font-weight: 500}
.fw--600 {font-weight: 600}
.fw--700 {font-weight: 700}
.fw--800 {font-weight: 800}
.fw--900 {font-weight: 900}

/* font color */
.fc--r {color: #ef3845}
.fc--b {color: #0084cd}
.fc--g {color: #858585}

.ta--c {text-align:center}
.ta--r {text-align:right}
.ta--l {text-align:left}

.va--t {vertical-align:top}
.va--m {vertical-align:middle}
.va--b {vertical-align:bottom}

.ffsp {font-feature-settings: 'palt'}

.text-upper-dots {
  display: inline-block;
  position: relative;
}
.text-upper-dots::before {
  content: '●';
  position: absolute;
  inset: 0 auto auto 50%;
  transform: translate(-50%,-66.66%) scale(0.225);
  pointer-events: none;
}


/* clearfix */
.clearfix,
.cf::after { content: ''; display: table; clear: both; }

@media (min-width:641px) {
	
	/* on pc view */
	.sp--disp { display: none; }
}
@media screen and (max-width: 640.98px) {
	
	/* on sp view */
	.pc--disp { display: none; }
}

@media (min-width:401px) {
	
	/* on pc view */
	.mini--disp { display: none; }
}