/*
 * 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: #0FBC73;
  --secondary-hover: #00A660;
  --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: #0D996F;
  --secondary-hover: #128361;
  --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-dadc34b9fdeba6ee0842a2bf1ad60f6d9538445082e09c55075ab027a40f9b97.svg);
}
[data-theme=dark] .header__menu__nav__item.course:active a::before {
  background-image: url(/assets/img/course-on-ec51b0c8531679bc4fd8713b3a347e6d2b1d7cdcdf79caefe2f2c42486c67f46.svg);
}
[data-theme=dark] .header__menu__nav__item.port:active a::before {
  background-image: url(/assets/img/port-on-25d678ae37bbd6c7188bb18f691702f8b29be267cf48beb40a59d81c866e957b.svg);
}
[data-theme=dark] .header__menu__nav__item.recruit:active a::before {
  background-image: url(/assets/img/recruit-on-17a44f829142af777b491cb812691bb47d8e063511d51d08c441cac556a02e5a.svg);
}
[data-theme=dark] .header__menu__nav__item.setting:active a::before {
  background-image: url(/assets/img/setting-on-df9b081ea56cea57e1f73dfb77ff664e54eddcdd1a8369a26f4911ef53d34b24.svg);
}
[data-theme=dark] .header__menu__nav__item.dash.on a::before {
  background-image: url(/assets/img/dash-on-dadc34b9fdeba6ee0842a2bf1ad60f6d9538445082e09c55075ab027a40f9b97.svg);
}
[data-theme=dark] .header__menu__nav__item.course.on a::before {
  background-image: url(/assets/img/course-on-ec51b0c8531679bc4fd8713b3a347e6d2b1d7cdcdf79caefe2f2c42486c67f46.svg);
}
[data-theme=dark] .header__menu__nav__item.port.on a::before {
  background-image: url(/assets/img/port-on-25d678ae37bbd6c7188bb18f691702f8b29be267cf48beb40a59d81c866e957b.svg);
}
[data-theme=dark] .header__menu__nav__item.recruit.on a::before {
  background-image: url(/assets/img/recruit-on-17a44f829142af777b491cb812691bb47d8e063511d51d08c441cac556a02e5a.svg);
}
[data-theme=dark] .header__menu__nav__item.setting.on a::before {
  background-image: url(/assets/img/setting-on-df9b081ea56cea57e1f73dfb77ff664e54eddcdd1a8369a26f4911ef53d34b24.svg);
}

[data-theme=light] .header__menu__nav__item.dash:active a::before {
  background-image: url(/assets/img/dash-light-on-26ae40fd696e9a271211dc0859fd5fd791ed3aa81a58e0381a28c98f6376c73f.svg);
}
[data-theme=light] .header__menu__nav__item.course:active a::before {
  background-image: url(/assets/img/course-light-on-2230b5c2f0aeccc057ffab9f32554696df7c01b95a8a83312e001784940cba47.svg);
}
[data-theme=light] .header__menu__nav__item.port:active a::before {
  background-image: url(/assets/img/port-light-on-9d97c534aaed39b89a311a97cf91602afbc6760c844d356190e486bcc4f6c3fe.svg);
}
[data-theme=light] .header__menu__nav__item.recruit:active a::before {
  background-image: url(/assets/img/recruit-light-on-74b228ca9f1dffb895f310a11e0d90be0123507e8fceb7bb443a1161192129c8.svg);
}
[data-theme=light] .header__menu__nav__item.setting:active a::before {
  background-image: url(/assets/img/setting-light-on-3e110a58fe2987d5c85e54f2fd625b5526f795c972c0d20c4ee9975b773a29de.svg);
}
[data-theme=light] .header__menu__nav__item.dash.on a::before {
  background-image: url(/assets/img/dash-light-on-26ae40fd696e9a271211dc0859fd5fd791ed3aa81a58e0381a28c98f6376c73f.svg);
}
[data-theme=light] .header__menu__nav__item.course.on a::before {
  background-image: url(/assets/img/course-light-on-2230b5c2f0aeccc057ffab9f32554696df7c01b95a8a83312e001784940cba47.svg);
}
[data-theme=light] .header__menu__nav__item.port.on a::before {
  background-image: url(/assets/img/port-light-on-9d97c534aaed39b89a311a97cf91602afbc6760c844d356190e486bcc4f6c3fe.svg);
}
[data-theme=light] .header__menu__nav__item.recruit.on a::before {
  background-image: url(/assets/img/recruit-light-on-74b228ca9f1dffb895f310a11e0d90be0123507e8fceb7bb443a1161192129c8.svg);
}
[data-theme=light] .header__menu__nav__item.setting.on a::before {
  background-image: url(/assets/img/setting-light-on-3e110a58fe2987d5c85e54f2fd625b5526f795c972c0d20c4ee9975b773a29de.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-1f70220fa0af29352417d6457c0b39da92279037b01f82917e2252125db44abb.svg);
}
[data-theme=dark] .header__menu__mode__btn.sun.on::before {
  background-image: url(/assets/img/sun-on-a140c3f161cefe9776a6c6f28d4ef605907e73302afea6e9591d568372dfa6f7.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-39b63d2d5b4a7b1ce56ab0e1369e734b0bcbda161859e6eb54684d1aed0666e3.svg);
}
[data-theme=light] .header__menu__mode__btn.sun.on::before {
  background-image: url(/assets/img/sun-light-on-f0adef97b6622bb463d36cb1ce500c3189a1cdfc149f32bf56c21f4770dfb317.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-dadc34b9fdeba6ee0842a2bf1ad60f6d9538445082e09c55075ab027a40f9b97.svg);
}
[data-theme=dark] .header__menu__gnav__item.course a span::before {
  background-image: url(/assets/img/course-on-ec51b0c8531679bc4fd8713b3a347e6d2b1d7cdcdf79caefe2f2c42486c67f46.svg);
}
[data-theme=dark] .header__menu__gnav__item.port a span::before {
  background-image: url(/assets/img/port-on-25d678ae37bbd6c7188bb18f691702f8b29be267cf48beb40a59d81c866e957b.svg);
}
[data-theme=dark] .header__menu__gnav__item.recruit a span::before {
  background-image: url(/assets/img/recruit-on-17a44f829142af777b491cb812691bb47d8e063511d51d08c441cac556a02e5a.svg);
}
[data-theme=dark] .header__menu__gnav__item.setting a span::before {
  background-image: url(/assets/img/setting-on-df9b081ea56cea57e1f73dfb77ff664e54eddcdd1a8369a26f4911ef53d34b24.svg);
}

[data-theme=light] .header__menu__gnav__item.dash a span::before {
  background-image: url(/assets/img/dash-light-on-26ae40fd696e9a271211dc0859fd5fd791ed3aa81a58e0381a28c98f6376c73f.svg);
}
[data-theme=light] .header__menu__gnav__item.course a span::before {
  background-image: url(/assets/img/course-light-on-2230b5c2f0aeccc057ffab9f32554696df7c01b95a8a83312e001784940cba47.svg);
}
[data-theme=light] .header__menu__gnav__item.port a span::before {
  background-image: url(/assets/img/port-light-on-9d97c534aaed39b89a311a97cf91602afbc6760c844d356190e486bcc4f6c3fe.svg);
}
[data-theme=light] .header__menu__gnav__item.recruit a span::before {
  background-image: url(/assets/img/recruit-light-on-74b228ca9f1dffb895f310a11e0d90be0123507e8fceb7bb443a1161192129c8.svg);
}
[data-theme=light] .header__menu__gnav__item.setting a span::before {
  background-image: url(/assets/img/setting-light-on-3e110a58fe2987d5c85e54f2fd625b5526f795c972c0d20c4ee9975b773a29de.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-1f70220fa0af29352417d6457c0b39da92279037b01f82917e2252125db44abb.svg);
}

.header__menu__gnav__mode__btn.sun.on::before {
  background-image: url(/assets/img/sun-on-a140c3f161cefe9776a6c6f28d4ef605907e73302afea6e9591d568372dfa6f7.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-1be4c796f76763c8a99769edebcd17c95c0436a3f8a6d2fb1baf52511961a80c.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-1be4c796f76763c8a99769edebcd17c95c0436a3f8a6d2fb1baf52511961a80c.svg);
}
[data-theme=dark] .box__body__ttl-verify::before {
  background-image: url(/assets/img/verify-aff3a9fc0f575349b246bc20f40b78d4b78372ff3dfb6e9c6af22c1db72bb5bc.svg);
}

[data-theme=light] .box__body__ttl-play::before {
  background-image: url(/assets/img/play-circle-light-9e734fab627bfeb021261e8a0f1e597eec3ac88db72b78fe63eae5c42e4933e7.svg);
}
[data-theme=light] .box__body__ttl-verify::before {
  background-image: url(/assets/img/verify-light-722731e5f4fcbb7d7f3cf790644575018c17d41b3cff240339bfa97beee8477f.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 */