@charset "UTF-8";

/* ↓Googleフォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
	--color-base: #e9e9e9;
	--color-main: #b6334f;
	--color-text: #333;
	--font-primary: 'Zen Kaku Gothic New', Meiryo, メイリオ, sans-serif; /* 日本語フォント */
	--font-alphanumeric: 'Outfit', 'Zen Kaku Gothic New'; /* 英数フォント */
	--font-icon: 'Material Symbols Outlined'; /* アイコンフォント */
}

@media screen and (min-width: 1367px) {
	html{ font-size:62.5%;}}
@media screen and (max-width: 1366px) {
	html{ font-size:50%;}}
@media screen and (max-width: 768px) {
	html{ font-size:75%;}}
@media screen and (max-width: 500px) {
	html{ font-size:62.5%;}}

@media screen and (min-width: 769px) {
	:root {
		--margin-base: 8rem;
		--header-height: 6rem;
		--top-header-height: 12rem;
		--max-width: 120rem;
	}

	body{
		font-size: 1.5rem;
	}

	.min{
		display: none;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--margin-base: 3rem;
		--max-width: 100%;
		--header-height: 4rem;
		--top-header-height: 20rem;
	}

	body{
		font-size: 1.4rem;
	}

	.max{
		display: none;
	}
}

.none{
	display: none;
}

[data-ruby] {
    position: relative;
}

[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.5em;
}

.material-symbols-outlined{
	font-size: 1.2em;
    vertical-align: -0.15em;
}

/* transition */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}