/*
 * Base
 * -------------------------------------------------------------------
 */
/*	Reset
-------------------------------*/
*,
::before,
::after {
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
em,
small,
strong,
sub,
sup,
mark,
del,
ins,
strike,
abbr,
dfn,
blockquote,
q,
cite,
code,
pre,
ol,
ul,
li,
dl,
dt,
dd,
div,
section,
article,
main,
aside,
nav,
header,
hgroup,
footer,
img,
figure,
figcaption,
address,
time,
audio,
video,
canvas,
iframe,
details,
summary,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	padding: 0;
	margin: 0;
	border: 0;
}

a {
	text-decoration: none;
	outline: none;
}

/*	Typography
-------------------------------*/
html {
	font-size: 62.5%;
}

* {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}

a {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

/*	Layout
-------------------------------*/
article,
aside,
footer,
header,
nav,
section,
main {
	display: block;
}

* {
	box-sizing: border-box;
}
*::before,
*::after {
	box-sizing: inherit;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
table tr th,
table tr td {
	padding: 0;
	text-align: left;
	vertical-align: top;
}

ol,
ul {
	list-style: none;
}

img {
	border-style: none;
	vertical-align: middle;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

img,
svg {
	width: auto;
	height: auto;
}

blockquote,
q {
	quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
	content: "";
	content: none;
}

button,
input,
optgroup,
select,
textarea {
	vertical-align: middle;
	color: inherit;
	font: inherit;
	background: transparent;
	padding: 0;
	margin: 0;
	border-radius: 0;
	text-align: inherit;
	text-transform: inherit; /* 2 */
}

label[for] {
	cursor: pointer;
}

/*	Attributes & States
-------------------------------*/
[hidden] {
	display: none !important;
}

[disabled] {
	cursor: not-allowed;
}

:focus:not(:focus-visible) {
	outline: none;
}

:root {
	--primary: #131416;
	--on-primary: #18191b;
	--on2-primary: #232427;
	--divider: #26282b;
	--secondary: #8fb954;
	--secondary-hover: #569300;
	--accent: #f5a732;
	--title: #ffffff;
	--button-text: #ffffff;
	/*--sub-title: #3F4246;*/
	--sub-title: #9ea1a5;
	--section-tag: #9ea1a5;
	--alert: #d54d4d;
	--alert-hover: #c12e2e;
	--sky: #2bb7c0;
	--orange: #cf5732;
	--purpul: #962fd5;
	--blue: #2b66d9;
	--yellow: #f5a732;
	--grass-100: #bae7cd;
	--grass-200: #55c88c;
	--grass-300: #00b05b;
	--grass-400: #007b3c;
	--grass-500: #005e24;
	--return-link: #3f4246;
	--return-link-hover: #9ea1a5;
	--icon-color: #3f4246;
	--unselected-color: #555555;
}

[data-theme="light"] {
	--primary: #f6f6f6;
	--on-primary: #ffffff;
	--on2-primary: #eaeaea;
	--divider: #efefef;
	--secondary: #8fb954;
	--secondary-hover: #569300;
	--accent: #ec981a;
	--title: #222222;
	--button-text: #ffffff;
	/*--sub-title: #CECECE;*/
	--sub-title: #808080;
	--section-tag: #808080;
	--alert: #d54d4d;
	--alert-hover: #c12e2e;
	--sky: #2bb7c0;
	--orange: #cf5732;
	--purpul: #962fd5;
	--blue: #2b66d9;
	--yellow: #f5a732;
	--grass-100: #bae7cd;
	--grass-200: #55c88c;
	--grass-300: #00b05b;
	--grass-400: #007b3c;
	--grass-500: #005e24;
	--return-link: #cecece;
	--return-link-hover: #808080;
	--icon-color: #3f4246;
	--unselected-color: #bbbbbb;
}

* {
	transition: color 0.3s 0s ease;
	transition: background-color 0.3s 0s ease;
}

html {
	font-size: 62.5%;
}

body {
	font-size: 1.4rem;
	font-weight: 500;
	text-rendering: optimizeLegibility;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: "Noto Sans JP", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.7;
	background-color: var(--primary);
	color: var(--title);
	position: relative;
	overflow-x: hidden;
	overflow-y: scroll;
}

body.no_scroll {
	overflow: hidden;
}

[data-theme="dark"] .dark-mode {
	display: block;
}
[data-theme="dark"] .light-mode {
	display: none;
}

[data-theme="light"] .light-mode {
	display: block;
}
[data-theme="light"] .dark-mode {
	display: none;
}

@font-face {
	font-family: "Noto Sans JP";
	src: url(/assets/fonts/NotoSansJp/Light-ec1698bf330c48e789a3f686116bd1d7bd53b62e4efb99d60069d8f5841d2f25.ttf) format("TrueType");
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: "Noto Sans JP";
	src: url(/assets/fonts/NotoSansJp/Regular-bfc0ed814ff037d58b7d4a55a5a58c0b7d514129d1cb35cb15de4638ff0ba7c5.ttf) format("TrueType");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "Noto Sans JP";
	src: url(/assets/fonts/NotoSansJp/Medium-bf74446ecb000509094c9e797fb477a308eb190f7818acd19d62ed0625dace18.ttf) format("TrueType");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: "Noto Sans JP";
	src: url(/assets/fonts/NotoSansJp/SemiBold-239e379be79a59af6503fb02aabcf940ab821f7b11075f7482a6f25eaa6e9675.ttf) format("TrueType");
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: "Noto Sans JP";
	src: url(/assets/fonts/NotoSansJp/Bold-36aeb726a15445f896b0aa8ece371d6971a6b1799fe45dfe3e164634ac895a86.ttf) format("TrueType");
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: "futura-pt";
	src: url(/assets/fonts/Futura/Medium-3b4ffa5c06455eb119514690f1b4dbcced53c6acf627fe99ceedcd64cfdacce0.woff) format("woff");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: "futura-pt";
	src: url(/assets/fonts/Futura/Bold-46cb6734dc9336e8c370195298f3bbf5e28541880545e1cc35d1f2cefcf65a13.woff) format("woff");
	font-weight: 700;
	font-style: normal;
}
/*
 * Module
 * -------------------------------------------------------------------
 */
.header {
	padding: 12px 40px;
	border-bottom: 1px solid #26282b;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: var(--primary);
	z-index: 1000;
}
@media screen and (max-width: 768px) {
	.header {
		padding: 8px 16px;
	}
}

.header__inner {
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header__logo {
	width: 200px;
	cursor: pointer;
}
@media screen and (max-width: 768px) {
	.header__logo {
		width: 120px;
	}
}

.header__logo img {
	width: 100%;
}

.header__menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
}
@media screen and (max-width: 768px) {
	.header__menu {
		gap: 16px;
	}
}

.header__menu__col {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
@media screen and (max-width: 768px) {
	.header__menu__col {
		flex-direction: row-reverse;
		gap: 16px;
	}
}

@media screen and (max-width: 768px) {
	.header__menu__nav {
		display: none;
	}
}

.header__menu__nav__list {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header__menu__nav__item a {
	padding: 16.5px 24px 16.5px 24px;
	border-radius: 12px;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--sub-title);
	display: flex;
	align-items: center;
	gap: 8px;
	transition: 0.3s;
}
.header__menu__nav__item a::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: 0.3s;
}
.header__menu__nav__item a:hover {
	background-color: var(--on-primary);
}
.header__menu__nav__item a:active {
	color: var(--secondary);
}

[data-theme="dark"] .header__menu__nav__item.dash a::before {
	background-image: url(/assets/img/dash-03da9e109baa70819c03ccd303cae440f196a4bda3c1bdbb6d90e3a9e571bd48.svg);
}
[data-theme="dark"] .header__menu__nav__item.course a::before {
	background-image: url(/assets/img/course-e3ee8474046b81f949699201783037f7c255241f3dce7b7a13bc3090ca9328b3.svg);
}
[data-theme="dark"] .header__menu__nav__item.port a::before {
	background-image: url(/assets/img/port-2e15adbf81d3912ab4065790c5024b4e87d690b08b6ba231f5fb572509b2b9a0.svg);
}
[data-theme="dark"] .header__menu__nav__item.recruit a::before {
	background-image: url(/assets/img/recruit-65573784cf3c5a4f00e11ffd892d54cbc419e121d103e67d614c0e885945d28a.svg);
}
[data-theme="dark"] .header__menu__nav__item.setting a::before {
	background-image: url(/assets/img/setting-8ffaca6c9d0acd4eef247669d866d412579d0739befe180dd8068bcfe8b850a3.svg);
}

[data-theme="light"] .header__menu__nav__item.dash a::before {
	background-image: url(/assets/img/dash-light-bec1f426de752d71a119ce7e9b479064b4d850e041039b0120ab4d801ce5736f.svg);
}
[data-theme="light"] .header__menu__nav__item.course a::before {
	background-image: url(/assets/img/course-light-ebf92f0806e9b7d642b2bb61390d521e0adb2186d7cd69b5d92fdc83a61bf1ba.svg);
}
[data-theme="light"] .header__menu__nav__item.port a::before {
	background-image: url(/assets/img/port-light-de2a7ddefd6f18c93e381caafb6c3e2eba08eb3909d1510c9d99161d678bb22b.svg);
}
[data-theme="light"] .header__menu__nav__item.recruit a::before {
	background-image: url(/assets/img/recruit-light-2fe806ae322236ad9dcb2826feecada1a7214911bc296c1f31b83f19d7be6b02.svg);
}
[data-theme="light"] .header__menu__nav__item.setting a::before {
	background-image: url(/assets/img/setting-light-652cf5d58189856f7a8613bbe9e67cdf579c4d27638a21f1fe8b480f8895edb3.svg);
}

.header__menu__nav__item.on a {
	background-color: var(--on-primary);
	color: var(--secondary);
}

[data-theme="dark"] .header__menu__nav__item.dash:active a::before {
	background-image: url(/assets/img/dash-on-c9df1c06034d88ba1eefeb2ab2e240109a1971387c1026a49eb949bb8292f233.svg);
}
[data-theme="dark"] .header__menu__nav__item.course:active a::before {
	background-image: url(/assets/img/course-on-9c3641ee9846f1aee870ee81a739353347f5babe43f778bef9053abae960bff3.svg);
}
[data-theme="dark"] .header__menu__nav__item.port:active a::before {
	background-image: url(/assets/img/port-on-8dd280e70de9dd6d493debf8f8443aac19c3f38a55cddde0c62b26b0df8d4433.svg);
}
[data-theme="dark"] .header__menu__nav__item.recruit:active a::before {
	background-image: url(/assets/img/recruit-on-d39af499530da6328a214c50c13d6fe975c2d59141d3891383cc0ad7014f5cbb.svg);
}
[data-theme="dark"] .header__menu__nav__item.setting:active a::before {
	background-image: url(/assets/img/setting-on-aec16e7f2cd39e4a09003acd2d357277591411205134082a7b2da0ebda140e53.svg);
}
[data-theme="dark"] .header__menu__nav__item.dash.on a::before {
	background-image: url(/assets/img/dash-on-c9df1c06034d88ba1eefeb2ab2e240109a1971387c1026a49eb949bb8292f233.svg);
}
[data-theme="dark"] .header__menu__nav__item.course.on a::before {
	background-image: url(/assets/img/course-on-9c3641ee9846f1aee870ee81a739353347f5babe43f778bef9053abae960bff3.svg);
}
[data-theme="dark"] .header__menu__nav__item.port.on a::before {
	background-image: url(/assets/img/port-on-8dd280e70de9dd6d493debf8f8443aac19c3f38a55cddde0c62b26b0df8d4433.svg);
}
[data-theme="dark"] .header__menu__nav__item.recruit.on a::before {
	background-image: url(/assets/img/recruit-on-d39af499530da6328a214c50c13d6fe975c2d59141d3891383cc0ad7014f5cbb.svg);
}
[data-theme="dark"] .header__menu__nav__item.setting.on a::before {
	background-image: url(/assets/img/setting-on-aec16e7f2cd39e4a09003acd2d357277591411205134082a7b2da0ebda140e53.svg);
}

[data-theme="light"] .header__menu__nav__item.dash:active a::before {
	background-image: url(/assets/img/dash-light-on-3fea130f777d6c0ee6a6bbbcf3d8c22ad3a082d2f84bc87bdb8bdbede405eeed.svg);
}
[data-theme="light"] .header__menu__nav__item.course:active a::before {
	background-image: url(/assets/img/course-light-on-57c9296be2f847231d15bfe0c8076d081aae8a6da1e99aae29958b8ba7048a17.svg);
}
[data-theme="light"] .header__menu__nav__item.port:active a::before {
	background-image: url(/assets/img/port-light-on-2961ed296ab8d4a476d90d655e1bcb1ce044cc45b417afc302e153c328074856.svg);
}
[data-theme="light"] .header__menu__nav__item.recruit:active a::before {
	background-image: url(/assets/img/recruit-light-on-778dbc5e434dec4537118de232c20c19d96e63d564894a7b3532d75289eca02e.svg);
}
[data-theme="light"] .header__menu__nav__item.setting:active a::before {
	background-image: url(/assets/img/setting-light-on-7e15f21a3da1eb563472a537285eba0df2de7f9bf37744176c7bc92b5db72c99.svg);
}
[data-theme="light"] .header__menu__nav__item.dash.on a::before {
	background-image: url(/assets/img/dash-light-on-3fea130f777d6c0ee6a6bbbcf3d8c22ad3a082d2f84bc87bdb8bdbede405eeed.svg);
}
[data-theme="light"] .header__menu__nav__item.course.on a::before {
	background-image: url(/assets/img/course-light-on-57c9296be2f847231d15bfe0c8076d081aae8a6da1e99aae29958b8ba7048a17.svg);
}
[data-theme="light"] .header__menu__nav__item.port.on a::before {
	background-image: url(/assets/img/port-light-on-2961ed296ab8d4a476d90d655e1bcb1ce044cc45b417afc302e153c328074856.svg);
}
[data-theme="light"] .header__menu__nav__item.recruit.on a::before {
	background-image: url(/assets/img/recruit-light-on-778dbc5e434dec4537118de232c20c19d96e63d564894a7b3532d75289eca02e.svg);
}
[data-theme="light"] .header__menu__nav__item.setting.on a::before {
	background-image: url(/assets/img/setting-light-on-7e15f21a3da1eb563472a537285eba0df2de7f9bf37744176c7bc92b5db72c99.svg);
}

.header__menu__mode {
	display: flex;
	align-items: center;
	background-color: var(--on-primary);
	border-radius: 24px;
	padding: 4px;
}
@media screen and (max-width: 768px) {
	.header__menu__mode {
		display: none;
	}
}

.header__menu__mode__btn__parent_link {
	border-radius: 50%;
}
.header__menu__mode__btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	position: relative;
	transition: 0.4s;
	cursor: pointer;
}
.header__menu__mode__btn::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: 0.4s;
}

.header__menu__mode__btn.on {
	background-color: var(--primary);
}

[data-theme="dark"] .header__menu__mode__btn.moon::before {
	background-image: url(/assets/img/moon-c9fa01979eb6425cde719642a24b08fd543c7512f5019265b964d3295ec0221b.svg);
}
[data-theme="dark"] .header__menu__mode__btn.sun::before {
	background-image: url(/assets/img/sun-198fdc818a77e7cc0d4c6d9fbe42c02b85d60ade8ebf0467ff5f2cc775367c04.svg);
}
[data-theme="dark"] .header__menu__mode__btn.moon.on::before {
	background-image: url(/assets/img/moon-on-279869a752e702a97c5be28f8f32e8ce1769cf4e05df7668365ebeec05e828e9.svg);
}
[data-theme="dark"] .header__menu__mode__btn.sun.on::before {
	background-image: url(/assets/img/sun-on-a7071a33011dda0352c7383379636216782006b0b96a3c0b9be644f38865afda.svg);
}

[data-theme="light"] .header__menu__mode__btn.moon::before {
	background-image: url(/assets/img/moon-light-04040762aeaa794de99839dfcc4996c0af4b3859673d6b7356f17da2cb9585d7.svg);
}
[data-theme="light"] .header__menu__mode__btn.sun::before {
	background-image: url(/assets/img/sun-light-273a6e5850018b9d5e82ad665965e4ed647829448bc75227399b2cb1485e5b30.svg);
}
[data-theme="light"] .header__menu__mode__btn.moon.on::before {
	background-image: url(/assets/img/moon-light-on-331f0e07c2e8e93ca44066a412f2a2d5e5a80b3e0236504f54d8739530a2d3e2.svg);
}
[data-theme="light"] .header__menu__mode__btn.sun.on::before {
	background-image: url(/assets/img/sun-light-on-e530c8e47df0b9886a7bc36429a4d4bea0e57b78e735e88449d808946120e517.svg);
}

.header__menu__ring {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background-color: var(--on-primary);
	position: relative;
	cursor: pointer;
}
@media screen and (max-width: 768px) {
	.header__menu__ring {
		border-radius: 8px;
	}
}

.header__menu__ring.on::after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--alert);
	position: absolute;
	top: 25%;
	left: 68%;
	transform: translate(-50%, -50%);
}

.header__menu__ring__icon {
	width: 32px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
	.header__menu__ring__icon {
		width: 24px;
	}
}

.header__menu__ring__icon img {
	width: 100%;
}

.header__menu__person {
	width: 48px;
	cursor: pointer;
}
@media screen and (max-width: 768px) {
	.header__menu__person {
		width: 40px;
	}
}

.header__menu__person__icon img {
	width: 100%;
}

.header__menu__toggle {
	display: none;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background-color: var(--on-primary);
	position: relative;
	cursor: pointer;
}
@media screen and (max-width: 768px) {
	.header__menu__toggle {
		display: block;
	}
}

.header__menu__toggle span {
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--sub-title);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: 0.3s;
}

.header__menu__toggle span:nth-of-type(1) {
	top: calc(50% - 8px);
}

.header__menu__toggle span:nth-of-type(3) {
	top: calc(50% + 8px);
}

.header__menu__toggle.on span:nth-of-type(1) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.header__menu__toggle.on span:nth-of-type(2) {
	display: none;
}

.header__menu__toggle.on span:nth-of-type(3) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.header__menu__gnav {
	display: none;
	width: 100%;
	height: calc(100vh - 57px);
	position: fixed;
	top: 57px;
	right: -100%;
	background-color: var(--primary);
	z-index: 1000;
	padding: 8px 8px 0;
	transition: 0.4s ease;
}

@media screen and (max-width: 768px) {
	.header__menu__gnav {
		display: block;
	}
}

.header__menu__gnav.on {
	right: 0;
}

.header__menu__gnav__nav {
	max-width: 374px;
	width: 100%;
	margin: 0 auto 32px;
	padding: 16px 0;
	border-radius: 8px;
	background-color: var(--on-primary);
}

.header__menu__gnav__item a {
	display: block;
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header__menu__gnav__item a::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-image: url(/assets/img/arrow-right-bb970f3817fb5e3ffd68fd2a26c78201a6e145396c0bb24179b839b77edbe8a3.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.header__menu__gnav__item a span {
	font-size: 1.6rem;
	line-height: 1.44;
	color: var(--title);
	display: flex;
	align-items: center;
	gap: 8px;
}
.header__menu__gnav__item a span::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

[data-theme="dark"] .header__menu__gnav__item.dash a span::before {
	background-image: url(/assets/img/dash-on-c9df1c06034d88ba1eefeb2ab2e240109a1971387c1026a49eb949bb8292f233.svg);
}
[data-theme="dark"] .header__menu__gnav__item.course a span::before {
	background-image: url(/assets/img/course-on-9c3641ee9846f1aee870ee81a739353347f5babe43f778bef9053abae960bff3.svg);
}
[data-theme="dark"] .header__menu__gnav__item.port a span::before {
	background-image: url(/assets/img/port-on-8dd280e70de9dd6d493debf8f8443aac19c3f38a55cddde0c62b26b0df8d4433.svg);
}
[data-theme="dark"] .header__menu__gnav__item.recruit a span::before {
	background-image: url(/assets/img/recruit-on-d39af499530da6328a214c50c13d6fe975c2d59141d3891383cc0ad7014f5cbb.svg);
}
[data-theme="dark"] .header__menu__gnav__item.setting a span::before {
	background-image: url(/assets/img/setting-on-aec16e7f2cd39e4a09003acd2d357277591411205134082a7b2da0ebda140e53.svg);
}

[data-theme="light"] .header__menu__gnav__item.dash a span::before {
	background-image: url(/assets/img/dash-light-on-3fea130f777d6c0ee6a6bbbcf3d8c22ad3a082d2f84bc87bdb8bdbede405eeed.svg);
}
[data-theme="light"] .header__menu__gnav__item.course a span::before {
	background-image: url(/assets/img/course-light-on-57c9296be2f847231d15bfe0c8076d081aae8a6da1e99aae29958b8ba7048a17.svg);
}
[data-theme="light"] .header__menu__gnav__item.port a span::before {
	background-image: url(/assets/img/port-light-on-2961ed296ab8d4a476d90d655e1bcb1ce044cc45b417afc302e153c328074856.svg);
}
[data-theme="light"] .header__menu__gnav__item.recruit a span::before {
	background-image: url(/assets/img/recruit-light-on-778dbc5e434dec4537118de232c20c19d96e63d564894a7b3532d75289eca02e.svg);
}
[data-theme="light"] .header__menu__gnav__item.setting a span::before {
	background-image: url(/assets/img/setting-light-on-7e15f21a3da1eb563472a537285eba0df2de7f9bf37744176c7bc92b5db72c99.svg);
}

.header__menu__gnav__mode__outer {
	text-align: center;
}

.header__menu__gnav__mode-text {
	line-height: 2;
	color: var(--sub-title);
	margin-bottom: 8px;
}

.header__menu__gnav__mode {
	display: inline-flex;
	align-items: center;
	background-color: var(--on-primary);
	border-radius: 24px;
	padding: 4px;
}

.header__menu__gnav__mode__btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	position: relative;
	transition: 0.4s;
	cursor: pointer;
}
.header__menu__gnav__mode__btn::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: 0.4s;
}

.header__menu__gnav__mode__btn.on {
	background-color: var(--primary);
}

.header__menu__gnav__mode__btn.moon::before {
	background-image: url(/assets/img/moon-c9fa01979eb6425cde719642a24b08fd543c7512f5019265b964d3295ec0221b.svg);
}

.header__menu__gnav__mode__btn.sun::before {
	background-image: url(/assets/img/sun-198fdc818a77e7cc0d4c6d9fbe42c02b85d60ade8ebf0467ff5f2cc775367c04.svg);
}

.header__menu__gnav__mode__btn.moon.on::before {
	background-image: url(/assets/img/moon-on-279869a752e702a97c5be28f8f32e8ce1769cf4e05df7668365ebeec05e828e9.svg);
}

.header__menu__gnav__mode__btn.sun.on::before {
	background-image: url(/assets/img/sun-on-a7071a33011dda0352c7383379636216782006b0b96a3c0b9be644f38865afda.svg);
}

.header__log__img {
	max-width: 100%;
}

.layout {
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	margin-top: 82px;
}
@media screen and (max-width: 768px) {
	.layout {
		margin: 57px 0 131px;
	}
}

.layout__main {
	width: 77.778%;
	padding: 0 40px;
}
@media screen and (max-width: 768px) {
	.layout__main {
		width: 100%;
		padding: 0 16px;
	}
}

.layout__aside {
	width: 22.2223%;
	padding: 0 24px;
	border-left: 1px solid var(--divider);
}
@media screen and (max-width: 768px) {
	.layout__aside {
		width: 100%;
		padding: 0 16px;
		border-left: none;
	}
}

.box__head {
	padding: 16px 0 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
@media screen and (max-width: 768px) {
	.box__head {
		padding: 16px 0 0;
	}
}

@media screen and (max-width: 768px) {
	.box__head-sp-vert {
		align-items: flex-start;
		flex-direction: column;
		margin-bottom: 16px;
	}
}

.box__head__ttl-vert span {
	display: block;
}

.box__head__ttl-main {
	font-family: "futura-pt", sans-serif;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.3;
	margin-right: 8px;
	color: var(--title);
}
@media screen and (max-width: 768px) {
	.box__head__ttl-main {
		display: block;
		font-size: 2rem;
	}
}

.box__head__ttl-sub {
	line-height: 2;
	color: var(--sub-title);
}
@media screen and (max-width: 768px) {
	.box__head__ttl-sub {
		display: block;
	}
}

.box__head__btn a {
	padding: 8px 16px;
	border-radius: 12px;
	background-color: var(--secondary);
	font-weight: 700;
	line-height: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--button-text);
	transition: 0.3s;
}
@media screen and (max-width: 768px) {
	.box__head__btn a {
		padding: 16px;
		gap: 0;
		font-size: 0;
	}
}
.box__head__btn a::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-image: url(/assets/img/arrow-right-bb970f3817fb5e3ffd68fd2a26c78201a6e145396c0bb24179b839b77edbe8a3.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.box__head__btn a:hover {
	background-color: var(--secondary-hover);
}

.box__head__care {
	display: flex;
	align-items: center;
	gap: 16px;
}
@media screen and (max-width: 768px) {
	.box__head__care {
		justify-content: space-between;
		flex-direction: row-reverse;
		width: 100%;
	}
}

.box__head__care .switch {
	display: flex;
	align-items: center;
	background-color: var(--on-primary);
	border-radius: 12px;
	padding: 4px 0;
}

.box__head__care .switch__month {
	font-family: "futura-pt", sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 2.3;
	padding: 4px 8px;
}

.box__head__care .switch__btn {
	display: flex;
	justify-content: center;
	align-items: center;
}
.box__head__care .switch__btn::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.box__head__care .switch__btn-left {
	padding: 10px 12px 10px 16px;
}
.box__head__care .switch__btn-left::before {
	background-image: url(/assets/img/switch-left-d18709fcd48763047422cf71e6b69661083af15aecb9df985673f10501785abe.svg);
}

.box__head__care .switch__btn-right {
	padding: 10px 16px 10px 12px;
}
.box__head__care .switch__btn-right::before {
	background-image: url(/assets/img/switch-right-e29c5cd2ee237f52eb21d1aa19b8ba6c0fca862aa38efe53cd099ca2fd28f65c.svg);
}

.box__head__care .tab {
	display: flex;
	align-items: center;
	background-color: var(--on-primary);
	border-radius: 12px;
	padding: 4px;
	height: 100%;
}

.box__head__care .tab__btn {
	padding: 4px 8px;
	min-width: 64px;
	font-family: "futura-pt", sans-serif;
	font-size: 1.2rem;
	line-height: 2.3;
	color: var(--sub-title);
	text-align: center;
	border-radius: 8px;
	transition: all 0.3s 0s ease;
	cursor: pointer;
}

.box__head__care .tab__btn.on {
	background-color: var(--primary);
	color: var(--secondary);
	font-weight: 700;
}

.box__body__ttl {
	margin: 10px 0;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--divider);
	color: #9ea1a5;
	line-height: 2;
	display: flex;
	align-items: center;
	gap: 8px;
}
@media screen and (max-width: 768px) {
	.box__body__ttl {
		margin: 16px 0 8px;
	}
}
.box__body__ttl::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-image: url(/assets/img/play-circle-f4737a2697d526c0c8484a82f7013a3bd4e4bdbb736b35341130008138636393.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

[data-theme="dark"] .box__body__ttl-play::before {
	background-image: url(/assets/img/play-circle-f4737a2697d526c0c8484a82f7013a3bd4e4bdbb736b35341130008138636393.svg);
}
[data-theme="dark"] .box__body__ttl-verify::before {
	background-image: url(/assets/img/verify-9a3eb72d0781e9e9dedfed3cb3e27cd6a585d716b7cf1f2c57afc0147d84ccbb.svg);
}

[data-theme="light"] .box__body__ttl-play::before {
	background-image: url(/assets/img/play-circle-light-14694070f89e2f67ee80c7492c19056a011ab2b8f067ca7a00bdd50a07fe99ae.svg);
}
[data-theme="light"] .box__body__ttl-verify::before {
	background-image: url(/assets/img/verify-light-35c050619c2f064d57c2e2095e7682fd66cb60a83dacd7d0527395ad67f5f399.svg);
}

.box__body__col {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}
@media screen and (max-width: 768px) {
	.box__body__col {
		gap: 0;
		flex-wrap: wrap;
	}
}

.box__body__col-care {
	max-width: 320px;
	width: 100%;
}
@media screen and (max-width: 768px) {
	.box__body__col-care {
		max-width: 100%;
		width: 100%;
		margin-bottom: 16px;
	}
}

.box__body__col-care__txt {
	padding: 0 24px 4px;
	margin-bottom: 8px;
	border-bottom: 1px solid #26282b;
	line-height: 2;
	color: var(--section-tag);
}
@media screen and (max-width: 768px) {
	.box__body__col-care__txt {
		padding: 0 0 4px;
	}
}

.box__body__col-care__txt-wh {
	color: var(--title);
}

.box__body__col-graph {
	max-width: 416px;
	width: 100%;
	margin-top: 24px;
}
@media screen and (max-width: 768px) {
	.box__body__col-graph {
		max-width: 100%;
		width: 100%;
		margin: 0 0 16px;
	}
}

.box__body__col-port {
	width: 25.6%;
}
@media screen and (max-width: 768px) {
	.box__body__col-port {
		width: 100%;
	}
}

.play {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
@media screen and (max-width: 768px) {
	.play {
		gap: 8px;
	}
}

.play__item {
	width: 24.42%;
	padding: 16px;
	border: 1px solid var(--divider);
	border-radius: 12px;
	background-color: var(--on-primary);
	transition: 0.3s;
	cursor: pointer;
}
@media screen and (max-width: 768px) {
	.play__item {
		width: 100%;
	}
}
.play__item:hover {
	background-color: var(--divider);
}

.play__item__tag__dashboard {
	min-height: 3rem;
}

.play__item__tag {
	margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
	.play__item__tag {
		margin-bottom: 8px;
	}
}

.play__item__tag span {
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 900;
	text-align: center;
	color: var(--button-text);
	line-height: 1;
}
.play__item__tag span:not(:last-child) {
	margin-right: 4px;
}

.play__item__tag span.sky {
	background-color: var(--sky);
}

.play__item__tag span.orange {
	background-color: var(--orange);
}

.play__item__tag span.purpul {
	background-color: var(--purpul);
}

.play__item__tag span.blue {
	background-color: var(--blue);
}

.play__item__ttl {
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 48px;
	line-height: 1.7;
	margin-bottom: 8px;
}

.play__item__bar {
	width: 100%;
	height: 4px;
	background-color: var(--on2-primary);
	border-radius: 4px;
	position: relative;
	margin-bottom: 8px;
}
.play__item__bar::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--on2-primary);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 999;
	-webkit-animation-name: playBarAnime;
	animation-name: playBarAnime;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@-webkit-keyframes playBarAnime {
	from {
		width: 100%;
	}
	to {
		width: 0;
	}
}

@keyframes playBarAnime {
	from {
		width: 100%;
	}
	to {
		width: 0;
	}
}
.play__item__bar-percent {
	display: block;
	width: 0;
	height: 100%;
	background-color: var(--secondary);
	border-radius: 4px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 998;
}

.play__item__col {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.play__item__col-teachure,
.play__item__col-timer {
	font-size: 1.2rem;
	line-height: 2;
	color: var(--section-tag);
	display: flex;
	align-items: center;
	gap: 8px;
}

.play__item__col-teachure::before,
.play__item__col-timer::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.play__item__col-teachure::before {
	background-image: url(/assets/img/teacher-770e9b172cd745806b49f1a95bdf1be2f27d93a9efe978f110ef7af1f8a3676d.svg);
}

.play__item__col-timer::before {
	background-image: url(/assets/img/timer-ee354e8038d2860b4026e1448440a11710ad8786d9ae92995fbfd9e2f4554291.svg);
}

.verify {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 8px;
	gap: 12px 0;
}
@media screen and (max-width: 768px) {
	.verify {
		gap: 8px;
		margin-bottom: 32px;
	}
}

.verify__item {
	width: 24.42%;
	padding: 16px;
	border: 1px solid var(--divider);
	border-radius: 12px;
	background-color: var(--on-primary);
	transition: 0.3s;
	cursor: pointer;
}
@media screen and (max-width: 768px) {
	.verify__item {
		width: 100%;
	}
}
.verify__item:hover {
	background-color: var(--divider);
}

.verify__item__tag {
	margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
	.verify__item__tag {
		margin-bottom: 8px;
	}
}

.verify__item__tag span {
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 900;
	text-align: center;
	color: var(--button-text);
	line-height: 1;
}
.verify__item__tag span:not(:last-child) {
	margin-right: 4px;
}

.verify__item__tag span.sky {
	background-color: var(--sky);
}

.verify__item__tag span.orange {
	background-color: var(--orange);
}

.verify__item__tag span.purpul {
	background-color: var(--purpul);
}

.verify__item__tag span.blue {
	background-color: var(--blue);
}

.verify__item__ttl {
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 48px;
	line-height: 1.7;
	margin-bottom: 8px;
}

.verify__item__col {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.verify__item__col-teachure,
.verify__item__col-timer {
	font-size: 1.2rem;
	line-height: 2;
	color: var(--section-tag);
	display: flex;
	align-items: center;
	gap: 8px;
}

.verify__item__col-teachure::before,
.verify__item__col-timer::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.verify__item__col-teachure::before {
	background-image: url(/assets/img/teacher-770e9b172cd745806b49f1a95bdf1be2f27d93a9efe978f110ef7af1f8a3676d.svg);
}

.verify__item__col-timer::before {
	background-image: url(/assets/img/timer-ee354e8038d2860b4026e1448440a11710ad8786d9ae92995fbfd9e2f4554291.svg);
}

.care__switch {
	justify-content: center;
	align-items: center;
}

.care__switch .switch {
	display: flex;
	align-items: center;
	background-color: var(--on-primary);
	border-radius: 12px;
	padding: 4px 0;
	justify-content: center;
}

.care__switch .switch__month {
	font-family: "futura-pt", sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 2.3;
	padding: 4px 8px;
}

.care__switch .switch__btn {
	display: flex;
	justify-content: center;
	align-items: center;
}
.care__switch .switch__btn::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.care__switch .switch__btn-left {
	padding: 10px 12px 10px 16px;
}
.care__switch .switch__btn-left::before {
	background-image: url(/assets/img/switch-left-d18709fcd48763047422cf71e6b69661083af15aecb9df985673f10501785abe.svg);
}

.care__switch .switch__btn-right {
	padding: 10px 16px 10px 12px;
}
.care__switch .switch__btn-right::before {
	background-image: url(/assets/img/switch-right-e29c5cd2ee237f52eb21d1aa19b8ba6c0fca862aa38efe53cd099ca2fd28f65c.svg);
}

.care {
	padding: 0 24px 24px;
}
@media screen and (max-width: 768px) {
	.care {
		padding: 0 0 24px;
		width: 79.301%;
		margin: 0 auto;
	}
}

.care__head {
	display: flex;
	justify-content: space-between;
	gap: 2.94%;
	margin-bottom: 8px;
}

.care__head span {
	width: 11.76%;
	font-family: "futura-pt", sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sub-title);
	text-align: center;
}

.care__body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 2.94%;
}

.care__body span {
	width: 11.76%;
	height: 0;
	padding-bottom: 11.76%;
	background-color: var(--on-primary);
	border-radius: 8px;
}

.care__body span.one {
	background-color: var(--grass-100);
}

.care__body span.two {
	background-color: var(--grass-200);
}

.care__body span.three {
	background-color: var(--grass-300);
}

.care__body span.four {
	background-color: var(--grass-400);
}

.care__body span.five {
	background-color: var(--grass-500);
}

.portforio {
	margin: 24px 0;
	padding: 16px;
	border-radius: 12px;
	background-color: var(--on-primary);
}
@media screen and (max-width: 768px) {
	.portforio {
		margin: 24px 0 32px;
	}
}
.portforio:hover .portforio__link {
	gap: 16px;
}

.portforio__ttl-main {
	font-family: "futura-pt", sans-serif;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.3;
	margin-right: 8px;
}

.portforio__ttl-sub {
	line-height: 2;
	color: var(--sub-title);
}

.portforio__link {
	font-size: 1.2rem;
	line-height: 1.3333;
	color: var(--section-tag);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
	transition: 0.3s ease;
}
.portforio__link::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-image: url(/assets/img/arrow-right-gray-b8b792f020c3ea326efc99479a7ba24f0458d908734fd90b675e7c63c2c564a2.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.portforio__img {
	margin: 20.25px 0 0 auto;
	width: 160px;
}

.portforio__img img {
	width: 100%;
}

.quest__list__inner {
	max-height: 368px;
	overflow-y: scroll;
	margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
	.quest__list__inner {
		max-height: 100%;
		overflow: visible;
	}
}

.quest__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
@media screen and (max-width: 768px) {
	.quest__list {
		margin-top: 24px;
	}
}

.quest__item {
	padding: 16px;
	border-radius: 12px;
	background-color: var(--on-primary);
	word-break: break-word;
}

.quest__item__ttl {
	display: flex;
	gap: 11px;
	margin-bottom: 10px;
}

.quest__item__ttl-img {
	width: 40px;
}

.quest__item__ttl-img img {
	width: 100%;
}

.quest__item__ttl-txt {
	font-size: 1.4rem;
	line-height: 1.7;
	min-height: 48px;
}

.quest__item__txt {
	font-size: 1.2rem;
	color: var(--section-tag);
}

.quest__btn {
	max-width: 193px;
	margin: 0 auto;
}

.quest__btn a {
	padding: 8px 16px;
	border-radius: 12px;
	background-color: var(--secondary);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--button-text);
	white-space: nowrap;
	transition: 0.3s;
}
.quest__btn a:hover {
	background-color: var(--secondary-hover);
}

.quest__btn a::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-image: url(/assets/img/arrow-right-bb970f3817fb5e3ffd68fd2a26c78201a6e145396c0bb24179b839b77edbe8a3.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rate {
	text-align: center;
	margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
	.rate {
		margin: 16px 0 32px;
	}
}

.rate__link {
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--section-tag);
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 40px;
	transition: 0.3s ease;
}
@media screen and (max-width: 768px) {
	.rate__link {
		margin-bottom: 24px;
		gap: 16px;
	}
}
.rate__link:hover {
	gap: 16px;
}

.rate__link::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-image: url(/assets/img/arrow-right-gray-b8b792f020c3ea326efc99479a7ba24f0458d908734fd90b675e7c63c2c564a2.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.rate__link span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rate__link span::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-image: url(/assets/img/message-question-6a98ee09d6061d40e3fb495b2ab9be2d88ba977c404d3bcaf7d33a39060a1176.svg);
	background-size: cover;
	background-repeat: no-repeat;
}

.rate__graph {
	width: 160px;
	height: 160px;
	position: relative;
	margin: 0 auto 16px;
}

.rate__graph__chart {
	width: 100%;
	height: 100%;
	position: relative;
}

.rate__graph__chart canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.rate__graph__chart__label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 4.8rem;
	font-weight: 700;
	line-height: 1;
	font-family: "futura-pt", sans-serif;
	text-align: center;
}

.rate__num {
	display: inline-block;
	padding: 4px 16px;
	background-color: var(--on-primary);
	border-radius: 40px;
	color: var(--section-tag);
	font-size: 1.2rem;
	line-height: 2.3333;
	text-align: center;
	margin-bottom: 8px;
}

.rate__rank {
	font-size: 1.4rem;
	text-align: center;
	margin-bottom: 12px;
}

.rate__rank .yellow {
	color: var(--accent);
}

.rate__btn {
	max-width: 193px;
	margin: 0 auto;
}

.rate__btn a {
	padding: 8px 16px;
	border-radius: 12px;
	background-color: var(--secondary);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--button-text);
	white-space: nowrap;
	transition: 0.3s;
}
.rate__btn a:hover {
	background-color: var(--secondary-hover);
}

.rate__btn a::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-image: url(/assets/img/arrow-right-bb970f3817fb5e3ffd68fd2a26c78201a6e145396c0bb24179b839b77edbe8a3.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.graph {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.graph__port {
	width: 40%;
}
@media screen and (max-width: 768px) {
	.graph__port {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 24px;
	}
}

@media screen and (max-width: 768px) {
	.graph__port__item {
		width: 33.3333%;
		text-align: center;
	}
}
.graph__port__item:not(:last-child) {
	margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
	.graph__port__item:not(:last-child) {
		margin-bottom: 0;
	}
}

.graph__port__item-sub {
	font-size: 1.4rem;
	color: var(--section-tag);
}

.graph__port__item-main {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.16667;
	font-family: "futura-pt", sans-serif;
}

.graph__circles {
	width: 60%;
	text-align: center;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 768px) {
	.graph__circles {
		width: 100%;
		text-align: center;
		justify-content: center;
		align-items: center;
	}
}

.graph__circles__ttl {
	width: 100%;
	text-align: center;
}

.graph__circles__ttl .tab {
	align-items: center;
	background-color: var(--on-primary);
	border-radius: 12px;
	padding: 4px;
	height: 100%;
	margin-bottom: 10px;
}

.graph__circles__ttl .tab__btn {
	padding: 4px 8px;
	min-width: 64px;
	font-family: "futura-pt", sans-serif;
	font-size: 1.2rem;
	line-height: 2.3;
	color: var(--sub-title);
	text-align: center;
	border-radius: 8px;
	transition: all 0.3s 0s ease;
	cursor: pointer;
}

.graph__circles__ttl .tab__btn.on {
	background-color: var(--primary);
	color: var(--secondary);
	font-weight: 700;
}

.graph__circles__cts {
	width: 100%;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

.graph__circle {
	width: 50%;
	text-align: center;
}
@media screen and (max-width: 768px) {
	.graph__circle {
		width: 40%;
		text-align: center;
		justify-content: center;
		align-items: center;
	}
}

.graph__circle__ttl {
	font-size: 1.4rem;
	color: var(--section-tag);
	text-align: center;
	margin-bottom: 8px;
}

.graph__circle__body {
	width: 96px;
	height: 96px;
	position: relative;
	margin: 0 auto 12px;
}

.graph__circle__body__chart {
	width: 100%;
	height: 100%;
	position: relative;
}

.graph__circle__body__chart canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.graph__circle__body__chart__label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	font-family: "futura-pt", sans-serif;
	text-align: center;
}

.graph__circle__num {
	display: inline-block;
	padding: 4px 16px;
	background-color: var(--on-primary);
	border-radius: 40px;
	font-size: 1.2rem;
	line-height: 2.3333;
	color: var(--section-tag);
}

.content {
	flex: 1;
}

.footer {
	left: 0;
	bottom: 0;
	width: 100%;
	margin-top: 30px;
	padding: 0px 20px;
	border-radius: 16px 16px 0 0;
	background-color: var(--on-primary);
}

@media screen and (max-width: 768px) {
	.footer {
		display: block;
	}
}

.footer__pagetop {
	padding: 16px;
	border-radius: 0 16px;
	background-color: var(--on2-primary);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
}

.footer__pagetop img {
	width: 24px;
}

.footer__head {
	justify-content: space-between;
	margin-bottom: 32px;
}

.footer__head__logo {
	width: 300px;
}

.footer__head__sns {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.footer__head__sns a {
	width: 24px;
}

.footer__head__sns a figure img {
	width: 100%;
}

.footer__menu {
	margin-bottom: 16px;
}

.footer__menu__item a {
	display: block;
	font-weight: 700;
	line-height: 2.85714;
}

.footer__link {
	margin-bottom: 2px;
}

.footer__link__item a {
	/* display: block; */
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 3.07692;
}

.footer__copy {
	justify-content: center;
	width: calc(100vw - 100px);
	text-align: center;
	padding-top: 32px;
	border-top: 2px solid var(--divider);
	border-radius: 2px;
}

.footer__copy p {
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.2;
	font-family: "futura-pt", sans-serif;
	color: var(--sub-title);
}
/*# sourceMappingURL=style.css.map */