@charset "utf-8";

:where(p),
:where(li),
:where(dt),
:where(dd) {
	line-break: strict;
	-webkit-hyphens: auto;
	hyphens: auto;
	hanging-punctuation: last allow-end;
}

/**
 * コンポーネント
 * ---------------------------------------- */
.ar {
	width: 10px;
	height: auto;
	fill: currentcolor;
}
/*[aria-current="page"] {
	pointer-events: none;
}*/

/* :::::: ボタン :::::: */
.c-button {
	display: inline-grid;
	place-items: center;
	position: relative;
	min-width: 120px;
	min-height: 32px;
	padding: 0 1.4em 0 1em;
	border-radius: 80px;
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 700;
	background: #00aae3;
}
.c-button.-pale {
	background: #62d1ed;
}
.c-button.-grad {
	background: linear-gradient(to left, #0098e3, #00b5e3);
}
.c-button.-large {
	min-width: 320px;
	min-height: 104px;
	font-size: 18px;
	background: linear-gradient(to top, #0099e4, #00b6e4);
}
.c-panel .c-button {
	color: #00aae3;
	background: white;
}
.c-button small {
	font-size: 80%;
}
.c-button .ar {
	position: absolute;
	top: calc(50% - 4px);
	right: 16px;
	width: 8px;
	height: auto;
	fill: currentcolor;
}
.c-button .ico {
	display: inline-block;
	position: relative;
	top: -.1em;
	margin-right: .5em;
	fill: currentcolor;
}
@media screen and (max-width: 479px) {
	.c-button {
		padding: 1em;
		font-size: 10px;
	}
	.c-button.-large {
		min-width: 240px;
		min-height: 88px;
		font-size: 15px;
	}
	.c-button .ar {
		right: 12px;
	}
}

/* :::::: 両脇の柱 :::::: */
.c-pillar {
	position: absolute;
	top: 0;
	width: auto;
	height: 100%; 
	stroke-width: 1;
}
.c-pillar.-l {
	transform: scaleX(-1);
}
@media screen and (min-width: 480px) {
	.c-pillar.-l {
		right: 100%;
	}
	.c-pillar.-r {
		left: 100%;
	}
}
@media screen and (max-width: 479px) {
	.c-pillar.-l {
		left: 0;
	}
	.c-pillar.-r {
		right: 0;
	}
}

/* :::::: パネル :::::: */
.c-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 480px;
	height: 370px;
	border-radius: 5px;
	color: white;
	background: #3ec9e9;
}
.c-panel.-grad {
	background: linear-gradient(to left, #0098e3, #00b5e3);
}
@media screen and (max-width: 767px) {
	.c-panel {
		width: calc(242vw / 4.8);
		height: calc(200vw / 4.8);
	}
}
@media screen and (max-width: 479px) {
	.c-panel {
		width: 242px;
		height: 200px;
	}
}

/* :::::: 被せリンク :::::: */
.c-coverlink {
	z-index: 1;
	position: absolute;
	inset: 0;
	color: transparent;
	text-indent: -99em;
}

/* :::::: リンク下線 :::::: */
.c-link {
	padding: .2em 0;
	color: #00a0d9;
	background: linear-gradient(currentcolor, currentcolor) left bottom / 100% 1px no-repeat;
}
@media (hover: hover) {
	.c-link {
		transition: background-size .4s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	.c-link:hover {
		background-position: right bottom;
		background-size: 0 1px;
	}
}

/* :::::: バナー :::::: */
.c-banner {
	display: block;
}
.c-banner img {
	border-radius: 10px;
	box-shadow: 8px 8px 16px rgba(0,0,0,.1);
}

/* :::::: グレーベタ :::::: */
.box {
	display: inline-block;
	padding: .3em 1em;
	background: #f3f3f3;
}

/* :::::: 頭に塗り丸 :::::: */
.disc {
	padding-left: 12px;
	text-indent: -12px;
}
.disc::before {
	content: "";
	display: inline-block;
	position: relative;
	top: -.1em;
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border-radius: 8px;
	background: currentcolor;
}

/* :::::: テーブル :::::: */
.c-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: "Noto Sans JP", sans-serif;
}
.c-table th,
.c-table td {
	padding: 24px;
}
.c-table thead th {
	color: white;
	background: #00abe4 url(../img/thead_line.svg) center left / 2px 6px repeat-y;
}
.c-table thead th:first-child {
	background-image: none;
}
.c-table tbody th,
.c-table tbody td {
	color: #00abe4;
	background: white;
}
.c-table tbody td {
	background: white url(../img/tbody_line.svg) center left / 2px 6px repeat-y;
}
.c-table tr:nth-child(even) th,
.c-table tr:nth-child(even) td {
	background-color: #e4f3fc;
}
@media screen and (max-width: 767px) {
	.c-table th,
	.c-table td {
		padding: 16px;
	}
}
@media screen and (max-width: 479px) {
	.c-table th,
	.c-table td {
		padding: 8px 16px;
	}
}

/* :::::: 番号付きリスト :::::: */
.c-numlist {
	counter-reset: num;
}
.c-numlist > li {
	counter-increment: num;
	padding-left: 1.3em;
	text-indent: -1.3em;
}
.c-numlist > li::before {
	content: counter(num)".";
	margin-right: .3em;
	text-indent: 0;
}
.c-numlist.-brackets > li::before {
	content: "（"counter(num)"）";
	margin-right: .3em;
	text-indent: 0;
}
.c-numlist.-circle > li {
	padding-left: 1.5em;
	text-indent: -1.5em;
}
.c-numlist.-circle > li::before {
	content: counter(num);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1.5em;
	height: 1.5em;
	margin-right: .5em;
	border: .5px solid currentcolor;
	border-radius: 1.5em;
	font-size: 75%;
	line-height: 1;
	letter-spacing: -.1em;
	text-indent: -.05em;
}

/* :::::: 番号付きデータリスト :::::: */
.c-numdata > .item {
	counter-increment: num;
	margin-top: 24px;
}
.c-numdata > .item > dt::before {
	content: counter(num)".";
	margin-right: .3em;
}
.c-numdata.-brackets > .item > dt::before {
	content: "（"counter(num)"）";
	margin-right: .3em;
}
.c-numdata dd {
	padding-left: 1.3em;
}
.c-numdata .disc {
	padding-left: calc(1.3em + 12px);
}
.c-numdata.-brackets dd {
	padding-left: 2em;
}
.c-numdata.-brackets .disc {
	padding-left: calc(2em + 12px);
}
.c-numdata .c-alphlist li {
	margin-left: 1.5em;
}
.c-numdata .item dl,
.c-numdata .item dt {
	margin-top: 0;
}
.c-numdata .item dl dd {
	padding-left: 0;
}

/* :::::: アルファベットリスト :::::: */
.c-alphlist {
	list-style-type: upper-alpha;
	list-style-position: outside;
}
.c-alphlist li:nth-child(n+2) {
	margin-top: 1em;
}
.c-alphlist dt {
	font-weight: inherit;
}
.c-alphlist dd {
	padding-left: 0;
}

/* :::::: 背景ベタ :::::: */
.c-widebg::before {
	content: "";
	z-index: -2;
	position: absolute;
	right: calc(50% - 50vw);
	left: calc(50% - 50vw);
}


/**
 * デコレーション
 * ---------------------------------------- */
.l-decoration {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	pointer-events: none;
}
.l-decoration .deco {
	position: absolute;
}
.l-decoration .obj,
.l-decoration .bar {
	position: relative;
}
.l-decoration .obj {
	width: 100%;
	height: auto;
}

/* :::::: 矩形 :::::: */
.deco.-rect {
	z-index: -1;
	width: 50%;
	height: 400px;
}
.deco.-rect .obj {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 10px;
	background: linear-gradient(to left, #0098e3, #00b5e3);
}
@media screen and (max-width: 767px) {
	.deco.-rect {
		height: calc(200vw / 4.8);
	}
}
@media screen and (max-width: 479px) {
	.deco.-rect {
		width: 65%;
		height: 200px;
	}
	.deco.-rect .obj {
		border-radius: 5px;
	}
}

/* :::::: トラック線 :::::: */
.deco.-trackline {
	z-index: -1;
	fill: none;
	width: 900px;
}
.deco.-trackline rect:nth-child(1) {
	stroke: #00ddd6;
}
.deco.-trackline rect:nth-child(2) {
	stroke: #5fdcd9;
}
.deco.-trackline rect:nth-child(3) {
	stroke: #3ec9dc;
}
.deco.-trackline rect:nth-child(4) {
	stroke: #2ca7cd;
}
.deco.-trackline rect:nth-child(5) {
	stroke: #2e87cb;
}
@media screen and (max-width: 767px) {
	.deco.-trackline {
		width: calc(448vw / 4.8);
	}
}
@media screen and (max-width: 479px) {
	.deco.-trackline {
		width: 448px;
	}
}

/* :::::: 縦ライン :::::: */
.deco.-vertical {
	z-index: -1;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	column-gap: 16px;
	right: 8%;
}
.deco.-vertical .bar {
	width: 14px;
}
.deco.-vertical .bar.-b1 {
	height: 100%;
	background: #1ba5e6;
}
.deco.-vertical .bar.-b2 {
	height: calc(100% - 80px);
	background: #2bace8;
}
.deco.-vertical .bar.-b3 {
	height: calc(100% - 160px);
	background: #3cb4e9;
}
.deco.-vertical .bar.-b4 {
	height: calc(100% - 240px);
	background: #4bbbeb;
}
.deco.-vertical .bar.-b5 {
	height: calc(100% - 320px);
	background: #5cc2ed;
}
.deco.-vertical .bar.-b6 {
	height: calc(100% - 400px);
	background: #6ccaee;
}
.l-main:not(.p-home) .deco.-vertical .bar.-b6 {
	display: none;
}
@media screen and (max-width: 767px) {
	.deco.-vertical {
		column-gap: 10px;
		right: 6%;
	}
	.deco.-vertical .bar {
		width: 8px;
	}
	.deco.-vertical .bar.-b2 {
		height: calc(100% - 60px);
	}
	.deco.-vertical .bar.-b3 {
		height: calc(100% - 120px);
	}
	.deco.-vertical .bar.-b4 {
		height: calc(100% - 180px);
	}
	.deco.-vertical .bar.-b5 {
		height: calc(100% - 240px);
	}
	.deco.-vertical .bar.-b6 {
		height: calc(100% - 300px);
	}
}
@media screen and (max-width: 479px) {
	.deco.-vertical {
		column-gap: 6px;
	}
	.deco.-vertical .bar {
		width: 5px;
	}
	.deco.-vertical .bar.-b2 {
		height: calc(100% - 40px);
	}
	.deco.-vertical .bar.-b3 {
		height: calc(100% - 80px);
	}
	.deco.-vertical .bar.-b4 {
		height: calc(100% - 120px);
	}
	.deco.-vertical .bar.-b5 {
		height: calc(100% - 160px);
	}
	.deco.-vertical .bar.-b6 {
		height: calc(100% - 200px);
	}
}

/* :::::: 斜ライン :::::: */
.deco.-diagonal {
	z-index: -1;
	display: flex;
	flex-direction: column;
	row-gap: 40px;
	width: 90%;
}
.deco.-diagonal .bar {
	height: 16px;
	transform-origin: right top;
	transform: skewY(-32deg);
}
.deco.-diagonal .bar.-b1 {
	width: calc(100% - 40px);
	background: #46b8ea;
}
.deco.-diagonal .bar.-b2 {
	width: calc(100% - 80px);
	background: #57c0ec;
}
.deco.-diagonal .bar.-b3 {
	width: calc(100% - 120px);
	background: #67c7ee;
}
.deco.-diagonal .bar.-b4 {
	width: calc(100% - 160px);
	background: #77cff0;
}
.deco.-diagonal .bar.-b5 {
	width: calc(100% - 200px);
	background: #87d6f1;
}
.deco.-diagonal .bar.-b6 {
	width: calc(100% - 240px);
	background: #97dcf1;
}
@media screen and (max-width: 767px) {
	.deco.-diagonal {
		row-gap: 36px;
	}
	.deco.-diagonal .bar {
		height: 9px;
	}
}
@media screen and (max-width: 479px) {
	.deco.-diagonal {
		row-gap: 20px;
		width: 100%;
	}
	.deco.-diagonal .bar {
		height: 6px;
	}
	.deco.-diagonal .bar.-b1 {
		width: calc(100% - 20px);
	}
	.deco.-diagonal .bar.-b2 {
		width: calc(100% - 40px);
	}
	.deco.-diagonal .bar.-b3 {
		width: calc(100% - 60px);
	}
	.deco.-diagonal .bar.-b4 {
		width: calc(100% - 80px);
	}
	.deco.-diagonal .bar.-b5 {
		width: calc(100% - 100px);
	}
	.deco.-diagonal .bar.-b6 {
		width: calc(100% - 120px);
	}
}


/**
 * ユーティリティ
 * ---------------------------------------- */
.u-alignr { text-align: right; }
.u-alignc { text-align: center; }

.u-indent {
	display: inherit;
	padding-left: 1em;
	text-indent: -1em;
}
.u-indent1 {
	display: inherit;
	padding-left: 1.5em;
	text-indent: -1.5em;
}
.u-indent2 {
	display: inherit;
	padding-left: 2em;
	text-indent: -2em;
}

.u-shift { margin-left: 1em; }
.u-shift1 { margin-left: 1.5em; }
.u-shift2 { margin-left: 2em; }

.u-mt0 { margin-top: 0; }
.u-mt1 { margin-top: 8px; }
.u-mt2 { margin-top: 16px; }
.u-mt3 { margin-top: 24px; }
.u-mt4 { margin-top: 32px; }
.u-mt5 { margin-top: 40px; }
.u-mt6 { margin-top: 48px; }
.u-mt7 { margin-top: 56px; }
.u-mt8 { margin-top: 64px; }
.u-mt9 { margin-top: 72px; }
.u-mt10 { margin-top: 80px; }