@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Righteous&family=Zen+Kaku+Gothic+New&display=swap");
/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

全ページ共通

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	font-family: "M PLUS 1", sans-serif;
	font-size: 1.675rem;
	color: #262D40;
	letter-spacing: 2px;
	line-height: 1.8;
}
@media screen and (max-width: 520px) {
	body {
		font-size: 1.4rem;
	}
}

*:hover,
*::before,
*::after {
	transition: 0.2s;
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

文字

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
p {
	margin: 20px 0;
	letter-spacing: 1px;
	text-align: justify;
}

p span {
	display: block;
}

a {
	color: inherit;
}

/*－－－－－－－－－－ リンクホバー時の設定 －－－－－－－－－－*/
a {
	position: relative;
}
a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 2px;
	border-bottom: 2px solid #262D40;
	width: 0%;
	transition: 0.3s;
}
@media (hover: hover) {
	a:hover::after {
		width: 100%;
	}
}

/* ホバー装飾の無効化 */
a:is(.snslist *)::after,
.btn::after,
.pageup::after {
	display: none;
}

/*fuwaimgでの無効化 */
/*－－－－－－－－－－ 見出し －－－－－－－－－－*/
h1,
h2,
h3,
h4,
h5 {
	font-family: "Righteous", "Zen Kaku Gothic New", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: normal;
	letter-spacing: 4px;
	line-height: 1;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

/*－－－－－－－－－－ 大見出し －－－－－－－－－－*/
.headingL {
	position: absolute;
	top: 0px;
	right: 0px;
	text-align: right;
	font-size: clamp(4rem, 3.2rem + 4vw, 8rem);
	-webkit-text-stroke: 2px #262D40;
	color: transparent;
}

/* タブレット */
@media screen and (max-width: 1024px) {
	.headingL {
		position: relative;
		top: 0;
		left: -20px;
		text-align: left;
	}
}
/* スマホ */
@media screen and (max-width: 520px) {
	.headingL {
		left: -10px;
	}
}
/*－－－－－－－－－－ 中見出し －－－－－－－－－－*/
.headingM {
	position: relative;
	font-size: clamp(3rem, 2.8rem + 1vw, 4rem);
	margin: 32px 0;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin-left: -50px;
}
.headingM::after {
	position: absolute;
	bottom: -94px;
	left: -10px;
	content: "";
	display: block;
	width: calc(100% + 20px);
	height: 100px;
	border-top: 2px solid #D2D9E1;
	border-left: 2px solid #D2D9E1;
	z-index: -1;
}
.headingM + * {
	margin-top: 0;
}

/* タブレット */
@media screen and (max-width: 1024px) {
	.headingM {
		margin: 20px 0;
		margin-left: -20px;
	}
}
/* スマホ */
@media screen and (max-width: 520px) {
	.headingM {
		margin: 20px 0;
		margin-left: -10px;
	}
}
/*－－－－－－－－－－ 小見出し －－－－－－－－－－*/
.headingS {
	position: relative;
	font-size: clamp(2.4rem, 2.28rem + 0.6vw, 3rem);
	margin: clamp(2rem, 1.8rem + 1vw, 3rem) 0 16px;
	width: -moz-fit-content;
	width: fit-content;
}
.headingS::before {
	content: "";
	position: absolute;
	bottom: 0;
	border-bottom: 4px solid #262D40;
	width: 100%;
	z-index: 1;
}
.headingS::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: 4px solid #D2D9E1;
	width: min(920px, 75vw - 240px);
}

/* タブレット */
@media screen and (max-width: 1024px) {
	.headingS::after {
		width: calc(100vw - 80px);
	}
}
/* スマホ */
@media screen and (max-width: 520px) {
	.headingS::after {
		width: calc(100vw - 40px);
	}
}
/*－－－－－－－－－－ 最小見出し －－－－－－－－－－*/
.headingSS {
	font-size: clamp(1.8rem, 1.76rem + 0.2vw, 2rem);
	margin: 20px 0;
}

/*－－－－－－－－－－ 文字装飾 －－－－－－－－－－*/
.right {
	text-align: right;
}

.center {
	text-align: center;
}

.marker {
	background: linear-gradient(transparent 60%, #F0F2F5 60%);
}

.label {
	display: block;
	margin: 20px 0;
	padding: 2px 10px;
	border: 1px solid #D2D9E1;
	width: -moz-fit-content;
	width: fit-content;
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

アイコン等

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.la,
.las {
	font-size: 1.2em;
	color: #262D40;
	position: relative;
	top: 2px;
}

/* 矢印 */
.arrow {
	width: 20px;
	height: 20px;
	border: 2px solid #262D40;
	border-bottom: 0;
	border-left: 0;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

入力フォーム、ボタン

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
/* 入力フォーム */
input[text],
textarea {
	-webkit-appearance: none;
		 -moz-appearance: none;
					appearance: none;
	padding: 10px 20px 8px 20px;
	background-color: #F0F2F5;
	border: 0;
	margin: 10px 0;
}

/* ボタン */
.btn {
	display: block;
	-webkit-appearance: none;
		 -moz-appearance: none;
					appearance: none;
	background-color: #262D40;
	color: #fff;
	text-align: center;
	text-decoration: none;
	padding: 4px 24px;
	border: 1px solid #262D40;
	transition: 0.2s;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-moz-transition: 0.2s;
}
.btn:hover {
	cursor: pointer;
	background-color: #D2D9E1;
	color: #262D40;
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

リスト

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.list,
.list-number {
	margin: 20px 0;
}

.list li {
	position: relative;
	margin-left: 16px;
}
.list li::before {
	position: absolute;
	top: calc(50% - 4px);
	left: -16px;
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background-color: #D2D9E1;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

/*－－－－－－－－－－ 数字付きリスト －－－－－－－－－－*/
.list-number {
	list-style-type: decimal-leading-zero;
	list-style-position: inside;
}
.list-number li {
	text-indent: -3.4rem;
	padding-left: 3.6rem;
}
.list-number li > :not(:first-child) {
	text-indent: 0;
}

/*－－－－－－－－－－ 表リスト －－－－－－－－－－*/
.gridlist {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 0px;
	width: -moz-fit-content;
	width: fit-content;
}
.resultlist .resultlist__text,
.gridlist .gridlist__label,
.gridlist .gridlist__text {
	padding: 6px 20px;
	background-color: #F0F2F5;
}
.gridlist .gridlist__label {
	position: relative;
	display: flex;
	align-items: center;
}
.resultlist .resultlist__text {
	font-family: "Google Sans Code", monospace;
	position: relative;
	width: 100%;
	min-height: 12rem;
	padding: 12px 28px;
	line-height: 1.7;
}

.resultlist .resultlist__text::after,
.gridlist .gridlist__label::after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: #D2D9E1;
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
		clip-path: polygon(0 0, 0% 100%, 100% 0);
}

/* スマホ */
@media screen and (max-width: 520px) {
	.gridlist {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.gridlist .gridlist__text {
		margin-bottom: 10px;
	}
}
/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

枠組み

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.box {
	position: relative;
	padding: 40px;
	border: 4px solid #D2D9E1;
	border-left: none;
	border-right: none;
}
.box > :first-child,
.box .box__title + * {
	margin-top: 0;
}
.box > :last-child {
	margin-bottom: 0;
}

/* タブレット、スマホ */
@media screen and (max-width: 1024px) {
	.box {
		padding: 20px;
	}
}
/* タイトル付き */
.box:has(.box__title) {
	margin-top: 40px;
}
.box:has(.box__title) .box__title {
	position: absolute;
	top: -1em;
	left: 0;
	font-size: clamp(2.4rem, 2.28rem + 0.6vw, 3rem);
	width: -moz-fit-content;
	width: fit-content;
}
.box:has(.box__title) .box__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: 4px solid #262D40;
	width: 100%;
	z-index: 1;
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

SNSアイコンリスト

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.snslist .snslist__item a {
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	background-color: #D2D9E1;
	border-radius: 50%;
	transition: 0.2s;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-moz-transition: 0.2s;
}
.snslist .snslist__item a:hover {
	color: #fff;
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
}
.snslist .snslist__item.twitter:hover a {
	background-color: #1DA1F2;
}
.snslist .snslist__item.instagram:hover a {
	background-color: #CF2E92;
}
.snslist .snslist__item.facebook:hover a {
	background-color: #4267b2;
}
.snslist .snslist__item.youtube:hover a {
	background-color: #DA1725;
}
.snslist .snslist__item .lab {
	margin: 6px 1px 3px 3px;
	font-size: 2rem;
}
@media screen and (max-width: 520px) {
	.snslist {
		justify-content: center;
	}
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

レイアウト

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
/*－－－－－－－－－－ 横並び －－－－－－－－－－*/
.flex {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	/* 表示サイズを変えたい場合は200pxの部分を変更 */
	gap: 20px;
	justify-content: center;
	align-items: center;
}

/*－－－－－－－－－－ 2カラム表示 －－－－－－－－－－*/
.--2column {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 60px;
}

/* タブレット、スマホでは１カラム */
@media screen and (max-width: 768px) {
	.--2column {
		grid-template-columns: 1fr;
	}
}
/*－－－－－－－－－－ 左右反対 －－－－－－－－－－*/
.reverse {
	flex-direction: row-reverse;
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

全体のレイアウト

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
/*－－－－－－－－－－ ヘッダー －－－－－－－－－－*/
.header {
	position: fixed;
	height: 100svh;
	width: max(25vw, 295px);
	background-color: #D2D9E1;
	background-image: radial-gradient(#262D40 20%, transparent 22%), radial-gradient(#262D40 20%, transparent 22%);
	background-size: 10px 10px;
	background-position: 0 0, 5px 5px;
	z-index: 10;
}
.header::after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #262D40;
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
					clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.header .sitename {
	position: absolute;
	top: -10px;
	left: -4px;
	font-size: clamp(10rem, 9.6rem + 2vw, 12rem);
	color: #D2D9E1;
	line-height: 0.8;
	letter-spacing: 6px;
	text-align: right;
	z-index: 1;
	-webkit-text-stroke: 2px #262D40;
	text-stroke: 1px #262D40;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
}

/* タブレット */
@media screen and (max-width: 1024px) {
	.header {
		position: relative;
		width: 100%;
	}

	.header {
		height: 140px;
	}
	.header .globalnav {
		bottom: 20px;
	}
	.header .globalnav__main {
		display: flex;
	}
	.header .sitename {
		top: 8px;
		left: 8px;
		font-size: clamp(1.5rem, 2.6rem + 2vw, 5rem);
		text-align: left;
		writing-mode: initial;
		transform: initial;
	}
}

/*－－－－－－－－－－ コンテンツ全体の横幅、余白 －－－－－－－－－－*/
.mainwrapper {
	padding: 20px;
}
.mainwrapper > :first-child {
	margin-top: 0;
	padding-top: 0;
}

/* タブレット */
@media screen and (min-width: 768px) {
	.mainwrapper {
		padding: 40px;
	}
}
/* PC */
@media screen and (min-width: 1025px), print {
	.mainwrapper {
		max-width: 1160px;
		margin-left: max(25vw, 295px);
		padding: 24px 60px 0 60px;
	}
}
/*－－－－－－－－－－ セクション －－－－－－－－－－*/
section {
	padding: 30px 0;
}
section > :first-child {
	margin-top: 0;
}
section > :last-child {
	margin-bottom: 0;
}
section section {
	padding-left: 0;
	padding-right: 0;
}
section section:first-of-type {
	padding-top: 0;
}
section section:last-of-type {
	padding-bottom: 0;
}

/* PC */
@media screen and (min-width: 1025px), print {
	section {
		padding: 60px;
	}
}
/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

メニュー

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.globalnav {
	position: absolute;
	bottom: 40px;
	right: 20px;
	z-index: 998;
}

.globalnav__main .globalnav__item {
	position: relative;
	font-size: 2.4rem;
	font-family: "Righteous", "Zen Kaku Gothic New", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	padding: 10px;
}
.globalnav__main .globalnav__item a {
	display: block;
	text-decoration: none;
	line-height: 1;
	overflow-wrap: break-word;
	transition: 0.2s;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-moz-transition: 0.2s;
}
.globalnav__main .globalnav__item > a {
	text-shadow: 2px 2px 0 #D2D9E1, -2px -2px 0 #D2D9E1, -2px 2px 0 #D2D9E1, 2px -2px 0 #D2D9E1, 2px 0 0 #D2D9E1, -2px 0 0 #D2D9E1, 0 2px 0 #D2D9E1, 0 -2px 0 #D2D9E1;
}
.globalnav__main .globalnav__item._has-child:hover .globalnav__child {
	visibility: visible;
	opacity: 1;
	transition: 0.4s;
}
.globalnav__main .globalnav__child {
	position: absolute;
	top: 0;
	left: 100%;
	background-color: #D2D9E1;
	visibility: hidden;
	opacity: 0;
	transition: 0.2s;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-moz-transition: 0.2s;
}
.globalnav__main .globalnav__child li {
	padding: 10px;
}

/*	タブレット、スマホでの表示 */
@media screen and (max-width: 1024px) {
	.globalnav__main .globalnav__item .globalnav__child {
		top: 100%;
		left: auto;
		right: 0;
		max-width: calc(100vw - 40px);
		z-index: 1;
		visibility: visible;
		/*JSで制御するため一旦表示*/
		opacity: 1;
		/*JSで制御するため一旦表示*/
		display: none;
		/*JSのtoggleで表示させるため非表示に*/
	}
	.globalnav__main .globalnav__item .globalnav__child.active {
		display: block;
	}
}
/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

サブメニュー

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.submenu {
	position: fixed;
	top: 0;
	z-index: 9;
}

.submenu__main {
	align-items: flex-start;
	gap: 0;
}

/* 親項目のスタイル */
.submenu__item {
	position: relative;
}
.submenu__item a {
	background-color: #fff;
	display: block;
	padding: 8px 20px 8px 30px;
	text-decoration: none;
	transition: 0.2s;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-moz-transition: 0.2s;
}
.submenu__item a:hover {
	background: #D2D9E1;
}
.submenu__item:has(.submenu__child.active) > a {
	background: #D2D9E1;
}

/* 親項目の矢印 */
.submenu__item._has-child::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 18px;
	width: 6px;
	height: 6px;
	border-top: 1px solid #262D40;
	border-right: 1px solid #262D40;
	z-index: 1;
	transform: rotate(135deg);
}

/* 子項目のスタイル */
.submenu__item._has-child .submenu__child {
	background-color: #fff;
	min-width: 100%;
	z-index: 9;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-ms-transition: 0.4s;
}
.submenu__item._has-child .submenu__child li a {
	display: block;
	color: #000;
	padding: 8px 20px 8px 40px;
}
/* 子項目の矢印 */
.submenu__child ._has-child {
	position: relative;
}
.submenu__child ._has-child::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 18px;
	width: 6px;
	height: 6px;
	border-top: 1px solid #262D40;
	border-right: 1px solid #262D40;
	z-index: 1;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
}

/* 孫項目のスタイル */
.submenu__item._has-child .submenu__child li._has-child .submenu__grandchild {
	transition: 0.4s;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-ms-transition: 0.4s;
}

/* クリックで表示 */
.submenu__item._has-child .submenu__child,
.submenu__item._has-child .submenu__child li._has-child .submenu__grandchild {
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-ms-transition: 0.4s;
}
.submenu__item._has-child .submenu__child.active,
.submenu__item._has-child .submenu__child li._has-child .submenu__grandchild.active {
	height: auto;
	overflow: auto;
	opacity: 1;
}

/* スマホ、タブレット */
@media screen and (max-width: 1024px) {
	.submenu {
		right: 0;
	}
}
/* スマホ */
@media screen and (max-width: 520px) {
	.submenu {
		max-width: 50%;
	}
	/* 親項目のスタイル */
	.submenu__main {
		display: block;
	}
	.submenu__main .submenu__item a {
		padding: 2px 20px 2px 30px;
	}
	.submenu__item._has-child::before {
		top: 12px;
	}
	/* 子項目のスタイル */
	.submenu__item._has-child .submenu__child li a {
		padding: 2px 20px 2px 40px;
	}
	.submenu__item._has-child .submenu__child ._has-child::before {
		top: 12px;
	}
}
/* 親メニューのみの場合の設定 */
.submenu__main:not(:has(.submenu__child)) .submenu__item > a {
	padding: 2px 20px 2px 20px;
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ページUP

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.pageup {
	position: fixed;
	right: 2vw;
	bottom: 4vw;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	background-color: #D2D9E1;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	transition: 0.2s;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-moz-transition: 0.2s;
	opacity: 0;
	visibility: hidden;
}
.pageup .arrow {
	border-color: #fff;
	margin-top: 10px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}
.pageup._active {
	opacity: 1;
	visibility: visible;
}

@media (hover: hover) {
	.pageup:hover {
		background-color: #262D40;
	}
}
/* タブレット */
@media screen and (max-width: 1024px) {
	.pageup .arrow {
		width: 14px;
		height: 14px;
		margin-top: -4px;
	}
	.pageup::after {
		left: 2px;
		bottom: 8px;
		content: "MENU";
		display: block;
		width: 100%;
		border: 0;
		text-align: center;
		font-size: 1rem;
	}
}
/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

フッター

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
footer {
	font-size: 1.275rem;
	padding: 20px;
}

/* タブレット */
@media screen and (max-width: 1024px) {
	footer small {
		display: block;
		text-align: left;
	}
}