@charset "UTF-8";

/*
 * Utility classes
 * 汎用的で再利用可能なヘルパークラス
 */

/* 
 * Layout utilities
 */
.wrapper {
	position: relative;
	max-width: var(--wrapper-width);
	margin: 0 auto;
	padding-inline: 2em;
}

.flex-container {
	display: flex;
	row-gap: 2rem;
	column-gap: 1rem;
}

.flex-container > * {
	max-width: 50%;
}

@media (max-width: 576px) {
	.flex-container {
		justify-content: center;
		flex-direction: column-reverse;
	}
	
	.flex-container > * {
		max-width: 100%;
	}
}

.frame {
	background-color: var(--color-light-purple);
	border-radius: 1rem;
	margin: 2rem auto;
	width: fit-content;
	padding: 3em;
}

.wide {
	background-color: var(--bg-color);
	margin-inline: calc(50% - 50vw + (var(--scrollbar-width) / 2));
	padding-inline: calc(50vw - 50%);
}

/* 
 * Display utilities
 */
[id] {
	scroll-margin-top: calc(var(--h-header) + 2.5em);
}

.inline {
	display: inline;
}

.inline-blk {
	display: inline-block;
}

.block {
	display: block;
}

.contents {
	display: contents;
}

[hidden],
.hidden {
	display: none !important;
}

.visually-hidden {
	position: fixed !important;
	top: 0px !important;
	left: 0px !important;
	width: 4px !important;
	height: 4px !important;
	opacity: 0 !important;
	overflow: hidden !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	visibility: visible !important;
}

/* 
 * Responsive display
 */
.show-pc {
	display: block;
}

.show-tb {
	display: block;
}

.show-sp {
	display: none;
}

/* 
 * Text alignment
 */
.text-center {
	text-align: center !important;
}

.text-left {
	text-align: left !important;
}

.text-right {
	text-align: right !important;
}

.center {
	display: grid;
	place-content: center;
}

/* 
 * Float utilities
 */
.align-right {
	float: right;
}

.align-left {
	float: left;
}

.align-none {
	float: none;
}

@media (width < 768px) {
  .align-right,
  .align-left,
  .align-none {
    display: block;
    float: none;
    margin-inline: auto !important;
  }
}

/* 
 * Vertical alignment
 */
.v-align-top {
	vertical-align: top;
}

/* 
 * Text utilities
 */
.text-indent {
	text-indent: 1em;
}

.letter-wide {
	letter-spacing: 0.12em;
}

/* Japanese character spacing utilities */
.letter-4ch,
.letter-4ch__for3 {
	display: inline-block;
	width: 6em;
}

.letter-4ch__for3 {
	letter-spacing: 0.5em;
}

.letter-4ch::after,
.letter-4ch__for3::after {
	content: "：";
}

.letter-4ch__for3::after {
	margin-left: -0.5em;
}

.char2:first-letter {
	letter-spacing: 2em;
}

.char3 {
	width: 4em;
	letter-spacing: 0.5em;
	white-space: nowrap;
}

/* 
 * Font size utilities
 */
.font-xxx-small {
	font-size: var(--xxx-small) !important;
}

.font-xx-small {
	font-size: var(--xx-small) !important;
}

.font-x-small {
	font-size: var(--x-small) !important;
}

.font-small {
	font-size: var(--small) !important;
}

.font-medium {
	font-size: var(--medium) !important;
}

.font-large {
	font-size: var(--large) !important;
}

.font-x-large {
	font-size: var(--x-large) !important;
}

.font-xx-large {
	font-size: var(--xx-large) !important;
}

.font-xxx-large {
	font-size: var(--xxx-large) !important;
}

/* 
 * Font weight utilities
 */
.font-normal {
	font-weight: normal !important;
}

.font-thin {
	font-weight: lighter !important;
}

.font-bold {
	font-weight: bold !important;
}

/* 
 * Color utilities
 */
.text-black {
	color: var(--color-black);
}

.text-white {
	color: var(--color-white);
}

.text-gray {
	color: var(--color-gray);
}

.text-dark-gray {
	color: var(--color-gray-70);
}

.text-red {
	color: var(--color-red);
}

.text-purple {
	color: var(--color-purple);
}

.text-orange {
	color: var(--color-orange);
}

/* 
 * Animation utilities
 */
.fadeIn {
	animation-name: fadeIn;
}

.fadeOut {
	animation-name: fadeOut;
}

.animated.slower {
	animation-duration: calc(var(--anime-duration) * 3);
	animation-delay: var(--anime-delay);
}

/* 
 * Column layouts
 */
.column-2 {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
}

.column-2 > li {
	margin-bottom: 0.4rem;
}

.columns-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.2rem;
}

/* 
 * Margin utilities
 */
.m0 { margin: 0 !important; }
.m1 { margin: 1em; }
.m2 { margin: 2em; }
.m3 { margin: 3em; }
.m4 { margin: 4em; }
.m5 { margin: 5em; }

.mt0 { margin-top: 0 !important; }
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mt3 { margin-top: 3em; }
.mt4 { margin-top: 4em; }
.mt5 { margin-top: 5em; }

.mr0 { margin-right: 0 !important; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mr3 { margin-right: 3em; }
.mr4 { margin-right: 4em; }
.mr5 { margin-right: 5em; }

.mb0 { margin-bottom: 0 !important; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.mb3 { margin-bottom: 3em; }
.mb4 { margin-bottom: 4em; }
.mb5 { margin-bottom: 5em; }

.ml0 { margin-left: 0 !important; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }
.ml3 { margin-left: 3em; }
.ml4 { margin-left: 4em; }
.ml5 { margin-left: 5em; }

.mx0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.mx1 {
	margin-left: 1em;
	margin-right: 1em;
}

.mx2 {
	margin-left: 2em;
	margin-right: 2em;
}

.mx3 {
	margin-left: 3em;
	margin-right: 3em;
}

.mx4 {
	margin-left: 4em;
	margin-right: 4em;
}

.mx5 {
	margin-left: 5em;
	margin-right: 5em;
}

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

.my0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.my1 {
	margin-top: 1em;
	margin-bottom: 1em;
}

.my2 {
	margin-top: 2em;
	margin-bottom: 2em;
}

.my3 {
	margin-top: 3em;
	margin-bottom: 3em;
}

.my4 {
	margin-top: 4em;
	margin-bottom: 4em;
}

.my5 {
	margin-top: 5em;
	margin-bottom: 5em;
}

/* 
 * Padding utilities
 */
.p0 { padding: 0 !important; }
.p1 { padding: 1em; }
.p2 { padding: 2em; }
.p3 { padding: 3em; }
.p4 { padding: 4em; }
.p5 { padding: 5em; }

.pt0 { padding-top: 0 !important; }
.pt1 { padding-top: 1em; }
.pt2 { padding-top: 2em; }
.pt3 { padding-top: 3em; }
.pt4 { padding-top: 4em; }
.pt5 { padding-top: 5em; }

.pr0 { padding-right: 0 !important; }
.pr1 { padding-right: 1em; }
.pr2 { padding-right: 2em; }
.pr3 { padding-right: 3em; }
.pr4 { padding-right: 4em; }
.pr5 { padding-right: 5em; }

.pb0 { padding-bottom: 0 !important; }
.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
.pb3 { padding-bottom: 3em; }
.pb4 { padding-bottom: 4em; }
.pb5 { padding-bottom: 5em; }

.pl0 { padding-left: 0; }
.pl1 { padding-left: 1em; }
.pl2 { padding-left: 2em; }
.pl3 { padding-left: 3em; }
.pl4 { padding-left: 4em; }
.pl5 { padding-left: 5em; }

.px0 { padding-inline: 0; }
.px1 { padding-inline: 1em; }
.px2 { padding-inline: 2em; }
.px3 { padding-inline: 3em; }
.px4 { padding-inline: 4em; }
.px5 { padding-inline: 5em; }

.py0 { padding-block: 0; }
.py1 { padding-block: 1em; }
.py2 { padding-block: 2em; }
.py3 { padding-block: 3em; }
.py4 { padding-block: 4em; }
.py5 { padding-block: 5em; }

/* 
 * Component utilities
 */
.video > iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-left: auto;
	margin-right: auto;
}

.important-notification {
	width: 100%;
	margin-block-end: 2rem;
	padding: 1rem 2rem;
	background-color: var(--bg-color-light-pink);
	border-radius: 8px;
	color: var(--color-red);
	font-size: var(--small);
}

.important-notification a {
	color: currentColor;
	text-decoration: underline;
}