@charset "UTF-8";
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, xmp {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
ol, ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
* {
box-sizing: border-box;
}
body {
color: #222;
background-color: #fff;
}
img {
max-width: 100%;
vertical-align: bottom;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-size: 100%;
}
a {
color: inherit;
text-decoration: none;
}
a, button {
cursor: pointer;
background-color: transparent;
border: none;
}
:root {
--primary-25: #fbf7ff;
--primary-50: #f5ebff;
--primary-100: #ebd7ff;
--primary-200: #d7afff;
--primary-300: #c387ff;
--primary-400: #af5fff;
--primary-500: #9B37FF;
--primary-600: #7c2ccc;
--primary-700: #5d2199;
--primary-800: #3e1666;
--primary-900: #1f0b33;
--secondary-25: #f5f9ff;
--secondary-50: #e6f0ff;
--secondary-100: #cce0ff;
--secondary-200: #99c2ff;
--secondary-300: #66a3ff;
--secondary-400: #3385ff;
--secondary-500: #0066ff;
--secondary-600: #0052cc;
--secondary-700: #003d99;
--secondary-800: #002966;
--secondary-900: #001433;
--gray-25: #fbfbfc;
--gray-50: #f6f5f6;
--gray-100: #edeaee;
--gray-200: #dad6dd;
--gray-300: #c8c1cb;
--gray-400: #b5adba;
--gray-500: #A398A9;
--gray-600: #827a87;
--gray-700: #625b65;
--gray-800: #413d44;
--gray-900: #211e22;
}
:root {
--font-size-4xl: 2.2rem;
--font-size-3xl: 1.7rem;
--font-size-2xl: 1.4rem;
--font-size-xl: 1.3rem;
--font-size-lg: 1.16rem;
--font-size-md: 1rem;
--font-size-sm: 0.88rem;
--font-size-xs: 0.79rem;
--font-size-2xs: 0.62rem;
--font-size-3xs: 0.56rem;
--font-size-h1: 2.4rem;
--font-size-h2: var(--font-size-4xl);
--font-size-h3: var(--font-size-3xl);
--font-size-h4: var(--font-size-2xl);
--font-size-h5: var(--font-size-xl);
--font-size-h6: var(--font-size-lg);
--font-size-body: var(--font-size-md);
}
:root {
--space-none: 0px;
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 40px;
--space-2xl: 64px;
--space-3xl: 80px;
--radius-none: 0px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 32px;
--radius-2xl: 128px;
--radius-3xl: 360px;
--primary: var(--primary-500);
--secondary: var(--grape);
--active: var(--prune);
--text-alert: var(--tomato);
--surface-alert: var(--tomato-water);
--brand1: #002288;
--brand2: #00AADD;
--button-primary: var(--berry);
--button-primary-dark: var(--black-berry);
--button-gradient: linear-gradient(to bottom, var(--berry) 0%, var(--black-berry) 100%);
--button-gradient-dark: linear-gradient(to bottom, var(--black-berry) 0%, var(--black-berry) 100%);
--button-gradient-secondary: linear-gradient(to bottom, var(--light-orange) 0%, var(--orange) 100%);
--button-gradient-secondary-dark: linear-gradient(to bottom, var(--orange) 0%, var(--orange) 100%);
--button-gradient-alert: linear-gradient(to bottom, var(--tomato) 0%, var(--ripe-tomato) 100%);
--button-gradient-alert-dark: linear-gradient(to bottom, var(--ripe-tomato) 0%, var(--ripe-tomato) 100%);
--surface-primary: var(--gray-50);
--surface-secondary: var(--gray-100);
--surface-3rd: var(--gray-400);
--surface-invert: var(--gray-900);
--surface-brand: var(--berry-water);
--surface-brand-secondary: var(--orange);
--surface-alert: var(--tomato-water);
--surface-alert-strong: var(--tomato);
--border-primary: var(--gray-300);
--border-secondary: var(--gray-200);
--border-3rd: var(--gray-100);
--border-4th: var(--gray-50);
--border-alert: var(--tomato);
--border-brand: var(--berry);
--text-form: var(--navy-900);
--text-placeholder: var(--navy-400);
--surface-form: var(--navy-50);
--surface-form-dark: var(--navy-400);
--surface-note: var(--gray-50);
--border-form: var(--navy-400);
--active-form: var(--prune);
}
:root {
--icon-chevron-up: url('data:image/svg+xml,');
--icon-chevron-down: url('data:image/svg+xml,');
--icon-chevron-left: url('data:image/svg+xml,');
--icon-chevron-right: url('data:image/svg+xml,');
--icon-chevrons-updown: url('data:image/svg+xml,');
--icon-arrow-up: url('data:image/svg+xml,');
--icon-arrow-down: url('data:image/svg+xml,');
--icon-arrow-left: url('data:image/svg+xml,');
--icon-arrow-right: url('data:image/svg+xml,');
--icon-dot-arrow-right: url('data:image/svg+xml,');
--icon-arrow-up-left: url('data:image/svg+xml,');
--icon-arrow-up-right: url('data:image/svg+xml,');
--icon-arrow-down-left: url('data:image/svg+xml,');
--icon-arrow-down-right: url('data:image/svg+xml,');
--icon-burger-open: url('data:image/svg+xml,');
--icon-burger-close: url('data:image/svg+xml,');
--icon-user: url('data:image/svg+xml,');
--icon-search: url('data:image/svg+xml,');
--icon-checkbox: url('data:image/svg+xml,');
--icon-checkbox-checked: url('data:image/svg+xml,');
--icon-file-text: url('data:image/svg+xml,');
--icon-file-text-fill: url('data:image/svg+xml,');
--icon-external-link: url('data:image/svg+xml,');
--icon-download: url('data:image/svg+xml,');
--icon-bookmark: url('data:image/svg+xml,');
--icon-bookmark-fill: url('data:image/svg+xml,');
--icon-check: url('data:image/svg+xml,');
--icon-crosshair: url('data:image/svg+xml,');
--icon-book: url('data:image/svg+xml,');
--icon-book-open: url('data:image/svg+xml,');
--icon-tool: url('data:image/svg+xml,');
--icon-box: url('data:image/svg+xml,');
--icon-training: url('data:image/svg+xml,');
--icon-message: url('data:image/svg+xml,');
}
.p-authBar__container, .l-container {
width: min(100%, 1440px);
margin-inline: auto;
}
.p-authBar__container, .p-contentsNav, .p-header, .l-page {
padding-inline: var(--space-lg);
}
@media (width <= 768px) {
.p-authBar__container, .p-contentsNav, .p-header, .l-page {
padding-inline: var(--space-md);
}
}
.p-overview__title {
font-size: var(--font-size-h1);
font-weight: 700;
}
.p-mypage h1, .p-article h2 {
font-size: var(--font-size-h2);
font-weight: 700;
}
.p-article h3 {
font-size: var(--font-size-h3);
font-weight: 700;
}
.p-article h4, .p-overviewPost__texts h2 {
font-size: var(--font-size-h4);
font-weight: 700;
}
.p-mypage h3, .p-article h5 {
font-size: var(--font-size-h5);
font-weight: 700;
}
.p-searchResults__body h2, .p-article h6 {
font-size: var(--font-size-h6);
font-weight: 700;
}
.l-page #wpmem_login input[type=submit], .p-prevNext__prev a, .p-prevNext__next a, .p-understand__action label, .p-dashboard__button, .c-searchBox form button, .p-module__favorite {
font-weight: 400;
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.5em 1em;
border-radius: var(--radius-md);
border: 1px solid var(--gray-100);
user-select: none;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.l-page #wpmem_login input[type=submit]:hover, .p-prevNext__prev a:hover, .p-prevNext__next a:hover, .p-understand__action label:hover, .p-dashboard__button:hover, .c-searchBox form button:hover, .p-module__favorite:hover {
color: var(--primary-500);
border-color: var(--primary-50);
background-color: var(--primary-50);
}
.l-page #wpmem_login input[type=submit]:focus-within, .p-prevNext__prev a:focus-within, .p-prevNext__next a:focus-within, .p-understand__action label:focus-within, .p-dashboard__button:focus-within, .c-searchBox form button:focus-within, .p-module__favorite:focus-within {
outline: 2px solid var(--secondary-600);
}
.p-module__favorite {
font-size: var(--font-size-md);
}
.c-searchBox form button {
font-size: var(--font-size-sm);
}
.p-prevNext__prev a, .p-prevNext__next a, .p-understand__action label, .p-dashboard__button {
color: var(--primary-800);
font-size: var(--font-size-md);
background-color: var(--gray-50);
border-color: var(--gray-50);
}
.p-overviewPost__list a {
font-size: var(--font-size-md);
font-weight: 400;
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.5em 1em;
border-radius: var(--radius-sm);
border: 0;
background-color: transparent;
user-select: none;
cursor: pointer;
position: relative;
}
.p-overviewPost__list a:hover {
color: var(--primary-500);
background-color: var(--primary-50);
}
.p-overviewPost__list a.is-current {
color: var(--primary-600);
font-weight: 700;
}
.p-sidebarCategories__lv2 a, .p-popupNav a, .p-globalNav ul li > a {
font-size: var(--font-size-sm);
font-weight: 400;
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.5em 1em;
border-radius: var(--radius-sm);
border: 0;
background-color: transparent;
user-select: none;
cursor: pointer;
position: relative;
}
.p-sidebarCategories__lv2 a:hover, .p-popupNav a:hover, .p-globalNav ul li > a:hover {
color: var(--primary-500);
background-color: var(--primary-50);
}
.p-sidebarCategories__lv2 a.is-current, .p-popupNav a.is-current, .p-globalNav ul li > a.is-current {
color: var(--primary-600);
font-weight: 700;
}
.p-contentsNav__nav a {
font-size: var(--font-size-xs);
font-weight: 400;
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.5em 1em;
border-radius: var(--radius-sm);
border: 0;
background-color: transparent;
user-select: none;
cursor: pointer;
position: relative;
}
.p-contentsNav__nav a:hover {
color: var(--primary-500);
background-color: var(--primary-50);
}
.p-contentsNav__nav a.is-current {
color: var(--primary-600);
font-weight: 700;
}
.p-module__back a {
font-size: var(--font-size-sm);
display: inline-flex;
align-items: center;
user-select: none;
cursor: pointer;
}
.p-module__back a:hover {
color: var(--primary-600);
text-decoration: underline;
}
.p-sidebarCategories__back a, .p-authBar__container a {
font-size: var(--font-size-xs);
display: inline-flex;
align-items: center;
user-select: none;
cursor: pointer;
}
.p-sidebarCategories__back a:hover, .p-authBar__container a:hover {
color: var(--primary-600);
text-decoration: underline;
}
.p-overviewPost__action a {
color: var(--primary-600);
font-size: var(--font-size-body);
display: inline-flex;
align-items: center;
user-select: none;
cursor: pointer;
}
.p-overviewPost__action a:hover {
color: var(--primary-700);
text-decoration: underline;
}
.p-serviceCategoryCard__button {
color: var(--primary-600);
font-size: var(--font-size-sm);
display: inline-flex;
align-items: center;
user-select: none;
cursor: pointer;
}
.p-serviceCategoryCard__button:hover {
color: var(--primary-700);
text-decoration: underline;
}
.p-searchResults__item a:hover, .p-prevNext__prev a:hover, .p-prevNext__next a:hover, .p-themes__item button:hover, .p-serviceCategoryCard:hover, .p-serviceCategoryPanel:hover, .p-tileNavCard:hover {
background-color: #fff;
box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.2), 0px 4px 4px 4px rgba(0, 0, 0, 0.1);
}
.p-article .button[target=_blank]::after, .p-overviewPost__action a::after, .p-overviewPost__list a::before, .p-serviceCategoryCard__button::after, .p-prevNext__prev a i, .p-prevNext__next a i, .p-article .button--open::after, .p-article .button--download::after, .p-overviewPost__list a::after, .p-understand__action label i::before, .p-module__favorite::before, .p-overviewGallery__list a::after {
display: inline-block;
width: 1.2rem;
height: auto;
aspect-ratio: 1;
mask-size: contain;
mask-repeat: no-repeat;
background-color: currentColor;
}
.p-overviewGallery__list a::after {
width: 1.8em;
}
.p-understand__action label i::before, .p-module__favorite::before {
width: 1.4em;
}
.p-prevNext__prev a i, .p-prevNext__next a i, .p-article .button--open::after, .p-article .button--download::after, .p-overviewPost__list a::after {
width: 1.2em;
}
.p-article .button[target=_blank]::after, .p-overviewPost__action a::after, .p-overviewPost__list a::before, .p-serviceCategoryCard__button::after {
width: 1em;
}
.p-prevNext__prev a i, .p-prevNext__next a i {
mask-image: var(--icon-chevron-left);
mask-size: contain;
}
.p-prevNext__next a i {
mask-image: var(--icon-chevron-right);
mask-size: contain;
}
.p-overviewPost__action a::after, .p-overviewPost__list a::after, .p-serviceCategoryCard__button::after {
mask-image: var(--icon-arrow-right);
mask-size: contain;
}
.c-checklist input[type=checkbox] {
mask-image: var(--icon-checkbox);
mask-size: contain;
}
.c-checklist input[type=checkbox]:checked {
mask-image: var(--icon-checkbox-checked);
mask-size: contain;
}
.p-overviewPost__list a::before {
mask-image: var(--icon-file-text-fill);
mask-size: contain;
}
.p-article .button[target=_blank]::after, .p-article .button--open::after {
mask-image: var(--icon-external-link);
mask-size: contain;
}
.p-article .button--download::after {
mask-image: var(--icon-download);
mask-size: contain;
}
.p-module__favorite::before {
mask-image: var(--icon-bookmark);
mask-size: contain;
}
.p-module__favorite:has(input[type=checkbox]:checked)::before, .p-overviewPost__list a.is-favorite::after, .p-overviewGallery__list a::after {
mask-image: var(--icon-bookmark-fill);
mask-size: contain;
}
.p-understand__action label i::before, .p-overviewPost__list a.is-checked::before {
mask-image: var(--icon-check);
mask-size: contain;
}
@font-face {
font-family: "LINE Seed JP";
src: url("../fonts/LINESeedJP_OTF_Th.woff2") format("woff2"), url("../fonts/LINESeedJP_OTF_Th.woff") format("woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "LINE Seed JP";
src: url("../fonts/LINESeedJP_OTF_Rg.woff2") format("woff2"), url("../fonts/LINESeedJP_OTF_Rg.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "LINE Seed JP";
src: url("../fonts/LINESeedJP_OTF_Bd.woff2") format("woff2"), url("../fonts/LINESeedJP_OTF_Bd.woff") format("woff");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "LINE Seed JP";
src: url("../fonts/LINESeedJP_OTF_Eb.woff2") format("woff2"), url("../fonts/LINESeedJP_OTF_Eb.woff") format("woff");
font-weight: 900;
font-style: normal;
}
:root {
--family: "LINE Seed JP","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
html {
background-color: #000;
}
body {
font-family: var(--family);
font-size: 16px;
font-feature-settings: "palt" 1;
display: grid;
border: 4px solid #000;
border-radius: 24px;
min-height: 100dvh;
overflow: auto;
}
p {
font: 400 var(--font-size-body)/1.7 var(--family);
letter-spacing: 0.04em;
}
html {
margin-top: 0 !important;
}
#wpadminbar {
opacity: 0;
}
#wpadminbar:hover {
opacity: 1;
}
.l-container {
display: grid;
align-content: start;
grid-template-rows: auto 1fr auto;
overflow: clip;
border-radius: 24px;
}
.l-container:has(.p-dashboard) {
grid-template-rows: auto 1fr auto;
}
.l-page {
display: grid;
gap: var(--space-2xl);
}
@media (width <= 1200px) {
.l-page {
gap: var(--space-lg);
}
}
@media (width <= 992px) {
.l-page {
grid-template-columns: 1fr;
}
}
.l-page > aside .p-sidebar__inner, .l-page > main {
padding-block: var(--space-sm);
}
.l-page:has(.p-sidebar) {
grid-template-columns: 320px 1fr;
}
@media (width <= 992px) {
.l-page:has(.p-sidebar) {
grid-template-columns: 1fr;
}
}
@media (width <= 992px) {
.l-page:has(.p-sidebar) .p-sidebar {
display: none;
}
}
.l-page main {
width: min(100%, 920px);
margin-inline: auto;
container-type: inline-size;
}
.l-page .p-bread {
margin-block: 0 var(--space-xl);
}
.c-icon {
display: inline-block;
width: 1.2rem;
height: auto;
aspect-ratio: 1;
mask-size: contain;
mask-repeat: no-repeat;
background-color: currentColor;
}
.c-icon--md-em {
width: 1.2em;
}
.c-icon--sm-em {
width: 1em;
}
.c-icon[data-icon=chevron-up] {
mask-image: var(--icon-chevron-up);
}
.c-icon[data-icon=chevron-down] {
mask-image: var(--icon-chevron-down);
}
.c-icon[data-icon=chevron-left] {
mask-image: var(--icon-chevron-left);
}
.c-icon[data-icon=chevron-right] {
mask-image: var(--icon-chevron-right);
}
.c-icon[data-icon=chevrons-updown] {
mask-image: var(--icon-chevrons-updown);
}
.c-icon[data-icon=arrow-up] {
mask-image: var(--icon-arrow-up);
}
.c-icon[data-icon=arrow-down] {
mask-image: var(--icon-arrow-down);
}
.c-icon[data-icon=arrow-left] {
mask-image: var(--icon-arrow-left);
}
.c-icon[data-icon=arrow-right] {
mask-image: var(--icon-arrow-right);
}
.c-icon[data-icon=dot-arrow-right] {
mask-image: var(--icon-dot-arrow-right);
}
.c-icon[data-icon=arrow-up-left] {
mask-image: var(--icon-arrow-up-left);
}
.c-icon[data-icon=arrow-up-right] {
mask-image: var(--icon-arrow-up-right);
}
.c-icon[data-icon=arrow-down-left] {
mask-image: var(--icon-arrow-down-left);
}
.c-icon[data-icon=arrow-down-right] {
mask-image: var(--icon-arrow-down-right);
}
.c-icon[data-icon=burger-open] {
mask-image: var(--icon-burger-open);
}
.c-icon[data-icon=burger-close] {
mask-image: var(--icon-burger-close);
}
.c-icon[data-icon=user] {
mask-image: var(--icon-user);
}
.c-icon[data-icon=search] {
mask-image: var(--icon-search);
}
.c-icon[data-icon=checkbox] {
mask-image: var(--icon-checkbox);
}
.c-icon[data-icon=checkbox-checked] {
mask-image: var(--icon-checkbox-checked);
}
.c-icon[data-icon=file-text] {
mask-image: var(--icon-file-text);
}
.c-icon[data-icon=file-text-fill] {
mask-image: var(--icon-file-text-fill);
}
.c-icon[data-icon=external-link] {
mask-image: var(--icon-external-link);
}
.c-icon[data-icon=download] {
mask-image: var(--icon-download);
}
.c-icon[data-icon=bookmark] {
mask-image: var(--icon-bookmark);
}
.c-icon[data-icon=bookmark-fill] {
mask-image: var(--icon-bookmark-fill);
}
.c-icon[data-icon=check] {
mask-image: var(--icon-check);
}
.c-icon[data-icon=crosshair] {
mask-image: var(--icon-crosshair);
}
.c-icon[data-icon=book] {
mask-image: var(--icon-book);
}
.c-icon[data-icon=book-open] {
mask-image: var(--icon-book-open);
}
.c-icon[data-icon=tool] {
mask-image: var(--icon-tool);
}
.c-icon[data-icon=box] {
mask-image: var(--icon-box);
}
.c-icon[data-icon=training] {
mask-image: var(--icon-training);
}
.c-icon[data-icon=message] {
mask-image: var(--icon-message);
}
.c-iconButton {
--size: 2.5rem;
display: inline-block;
width: var(--size);
height: var(--size);
aspect-ratio: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
position: relative;
}
.c-iconButton--2xs {
--size: 1.2rem;
}
.c-iconButton--xs {
--size: 1.5rem;
}
.c-iconButton--sm {
--size: 2rem;
}
.c-iconButton--md {
--size: 2.5rem;
}
.c-iconButton--lg {
--size: 3rem;
}
.c-iconButton::after {
content: "";
display: block;
width: calc(var(--size) * 0.6);
height: calc(var(--size) * 0.6);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
background: currentColor;
position: absolute;
inset: 50% 0 0 50%;
translate: -50% -50%;
}
.c-iconButton[data-icon=chevron-up]::after {
mask-image: var(--icon-chevron-up);
}
.c-iconButton[data-icon=chevron-down]::after {
mask-image: var(--icon-chevron-down);
}
.c-iconButton[data-icon=chevron-left]::after {
mask-image: var(--icon-chevron-left);
}
.c-iconButton[data-icon=chevron-right]::after {
mask-image: var(--icon-chevron-right);
}
.c-iconButton[data-icon=chevrons-updown]::after {
mask-image: var(--icon-chevrons-updown);
}
.c-iconButton[data-icon=arrow-up]::after {
mask-image: var(--icon-arrow-up);
}
.c-iconButton[data-icon=arrow-down]::after {
mask-image: var(--icon-arrow-down);
}
.c-iconButton[data-icon=arrow-left]::after {
mask-image: var(--icon-arrow-left);
}
.c-iconButton[data-icon=arrow-right]::after {
mask-image: var(--icon-arrow-right);
}
.c-iconButton[data-icon=dot-arrow-right]::after {
mask-image: var(--icon-dot-arrow-right);
}
.c-iconButton[data-icon=arrow-up-left]::after {
mask-image: var(--icon-arrow-up-left);
}
.c-iconButton[data-icon=arrow-up-right]::after {
mask-image: var(--icon-arrow-up-right);
}
.c-iconButton[data-icon=arrow-down-left]::after {
mask-image: var(--icon-arrow-down-left);
}
.c-iconButton[data-icon=arrow-down-right]::after {
mask-image: var(--icon-arrow-down-right);
}
.c-iconButton[data-icon=burger-open]::after {
mask-image: var(--icon-burger-open);
}
.c-iconButton[data-icon=burger-close]::after {
mask-image: var(--icon-burger-close);
}
.c-iconButton[data-icon=user]::after {
mask-image: var(--icon-user);
}
.c-iconButton[data-icon=search]::after {
mask-image: var(--icon-search);
}
.c-iconButton[data-icon=checkbox]::after {
mask-image: var(--icon-checkbox);
}
.c-iconButton[data-icon=checkbox-checked]::after {
mask-image: var(--icon-checkbox-checked);
}
.c-iconButton[data-icon=file-text]::after {
mask-image: var(--icon-file-text);
}
.c-iconButton[data-icon=file-text-fill]::after {
mask-image: var(--icon-file-text-fill);
}
.c-iconButton[data-icon=external-link]::after {
mask-image: var(--icon-external-link);
}
.c-iconButton[data-icon=download]::after {
mask-image: var(--icon-download);
}
.c-iconButton[data-icon=bookmark]::after {
mask-image: var(--icon-bookmark);
}
.c-iconButton[data-icon=bookmark-fill]::after {
mask-image: var(--icon-bookmark-fill);
}
.c-iconButton[data-icon=check]::after {
mask-image: var(--icon-check);
}
.c-iconButton[data-icon=crosshair]::after {
mask-image: var(--icon-crosshair);
}
.c-iconButton[data-icon=book]::after {
mask-image: var(--icon-book);
}
.c-iconButton[data-icon=book-open]::after {
mask-image: var(--icon-book-open);
}
.c-iconButton[data-icon=tool]::after {
mask-image: var(--icon-tool);
}
.c-iconButton[data-icon=box]::after {
mask-image: var(--icon-box);
}
.c-iconButton[data-icon=training]::after {
mask-image: var(--icon-training);
}
.c-iconButton[data-icon=message]::after {
mask-image: var(--icon-message);
}
.c-iconButton:hover {
color: var(--primary-500);
background-color: var(--primary-50);
}
.c-iconButton--outline {
border-color: var(--gray-100);
}
.c-iconButton--outline:hover {
border-color: var(--primary-500);
}
.c-modal {
width: min(100%, 640px);
display: grid;
place-items: center;
}
.c-modal__overlay {
display: none;
place-items: center;
margin: 0 !important;
padding-inline: var(--space-md);
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 15;
overflow: auto;
}
.c-modal__box {
background-color: white;
margin-block: var(--space-md);
padding: 20px;
border-radius: 5px;
position: relative;
}
.c-modal__title {
font-size: var(--font-size-lg);
font-weight: 700;
border-bottom: 1px solid var(--gray-100);
margin-block: 0 2rem;
}
.c-modal__close {
position: absolute;
inset: 0.5rem 0.5rem auto auto;
z-index: 1;
}
.c-modal dl {
--border: 1px solid var(--gray-200);
display: grid;
gap: 2rem 0;
grid-template-columns: max-content 1fr;
}
@media (width <= 600px) {
.c-modal dl {
gap: 1rem 0;
grid-template-columns: 1fr;
}
}
.c-modal dl dt {
font-size: var(--font-size-md);
font-weight: 700;
padding-inline: 0 2em;
}
.c-modal dl dd {
font-size: var(--font-size-sm);
}
@media (width <= 600px) {
.c-modal dl dd {
border-bottom: 1px solid var(--gray-100);
padding-block: 0 var(--space-md);
}
}
.c-modal dl dd > dl {
grid-template-columns: max-content 1fr;
}
.c-modal dl dd > dl dt {
font-size: var(--font-size-sm);
}
@media (width > 600px) {
.c-modal dl dt, .c-modal dl dd {
border-bottom: var(--border);
padding-block: 0 var(--space-md);
}
}
.c-modal dl dt:last-of-type, .c-modal dl dd:last-of-type {
border: none;
}
body.is-modal-open {
overflow: hidden;
}
.c-progress__container {
display: grid;
width: min(100%, 320px);
padding-block: var(--space-md) 0;
}
.c-progress__progress {
position: relative;
}
.c-progress__base {
background-color: var(--primary-100);
height: 6px;
border-radius: 2px;
overflow: hidden;
}
.c-progress__bar {
height: 100%;
background-color: var(--primary-600);
animation: progress 1.2s ease-in-out forwards;
}
.c-progress__percentage {
color: #fff;
text-align: right;
font-size: var(--font-size-2xs);
font-weight: 600;
line-height: 1;
display: flex;
align-items: baseline;
gap: 0.2em;
background-color: var(--primary-600);
padding-block: 0.4em 0.8em;
padding-inline: 0.6em;
clip-path: polygon(0 0, 100% 0, 100% 75%, 60% 75%, 50% 90%, 40% 75%, 0 75%);
outline: 1px solid red;
position: absolute;
inset: 0 auto auto var(--progress, 0%);
translate: -50% -100%;
}
.c-progress__percentage span {
font-size: 0.8em;
}
.c-progress__counter {
color: var(--gray-600);
font-size: var(--font-size-2xs);
display: flex;
align-items: baseline;
justify-content: center;
}
@keyframes progress {
from {
width: 0;
}
to {
width: var(--progress, 0%);
}
}
.c-checklist__container {
width: min(100%, 600px);
margin-block: var(--space-xl);
margin-inline: auto;
padding: var(--space-md);
border-radius: var(--radius-lg);
border: 1px solid var(--gray-700);
box-shadow: 0px 12px 4px -2px rgba(0, 0, 0, 0.1);
}
.c-checklist__progress {
text-align: center;
}
.c-checklist__progress span {
font-weight: 800;
}
.c-checklist ul {
display: grid;
gap: var(--space-2xs);
padding: 0 !important;
margin-block: var(--space-sm) !important;
}
.c-checklist ul > li {
display: grid;
list-style-type: none;
margin-top: 0 !important;
}
.c-checklist label {
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.5em 1em;
background-color: var(--gray-50);
border-radius: var(--radius-md);
user-select: none;
}
.c-checklist label:has(input[type=checkbox]:checked) {
background-color: var(--primary-100);
}
.c-checklist label:focus-within {
outline: 2px solid;
}
.c-checklist input[type=checkbox] {
appearance: none;
width: 1.2em;
aspect-ratio: 1;
background-color: var(--gray-500);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.c-checklist input[type=checkbox]:checked {
background-color: var(--primary-500);
}
.c-checklist__footer {
display: grid;
place-items: center;
}
.p-header {
display: flex;
align-items: center;
padding-block: var(--space-xs);
background-color: #fff;
border-bottom: 1px solid var(--gray-100);
position: sticky;
top: 0;
z-index: 10;
transition-property: translate, box-shadow, opacity;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.18, 0.8, 0.44, 1);
}
.p-header.is-scroll {
translate: 0 -100%;
opacity: 0;
transition-duration: 1s;
}
.p-header.is-scroll.is-show {
translate: 0;
box-shadow: 0px -8px 16px 8px rgba(0, 0, 0, 0.1);
opacity: 1;
}
.p-header__logo {
margin-inline: -1rem 0;
}
.p-header__logo a {
display: inline-flex;
border: 1px solid transparent;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-lg);
transition: border-color 0.4s;
}
.p-header__logo a:hover {
border-color: var(--secondary-700);
}
.p-header__logo img {
height: 3rem;
vertical-align: middle;
}
.p-header__action {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-left: auto;
}
.p-globalNav {
container-type: inline-size;
flex: auto;
}
.p-globalNav ul {
display: flex;
align-items: center;
padding-inline: var(--space-xl) var(--space-xs);
}
@container (width <= 720px) {
.p-globalNav ul {
padding-inline: var(--space-md) var(--space-xs);
justify-content: center;
}
}
@container (width <= 240px) {
.p-globalNav ul {
display: none;
}
}
.p-globalNav ul li {
--currentFontWeight: inherit;
--currentContent: none;
position: relative;
--barWidth: 48px;
}
.p-globalNav ul li.is-current > a {
color: var(--primary-600);
font-weight: 700;
}
.p-globalNav ul li.is-current::before {
content: "";
display: block;
width: 0;
height: 2px;
background-color: var(--primary-600);
position: absolute;
inset: auto auto 0 50%;
translate: -50% 0;
border-radius: 100px;
opacity: var(--pointerOpacity);
animation: currentScale 0.5s forwards;
z-index: 1;
}
@keyframes currentScale {
to {
width: var(--barWidth);
}
}
@media (width <= 992px) {
.p-globalNav ul li {
--barWidth: 100%;
}
}
.p-globalNav ul li > a {
color: var(--currentColor);
font-weight: var(--currentFontWeight);
line-height: 1.3;
text-align: center;
position: relative;
}
@container (width <= 720px) {
.p-globalNav ul li > a {
font-size: var(--font-size-xs);
padding-inline: 1.4vw;
}
}
.p-globalNav ul li > a:hover {
color: var(--primary);
background-color: var(--primary-50);
}
.p-globalNav ul li > a:hover + .p-popupNav {
visibility: visible;
}
@container (width <= 500px) {
.p-globalNav ul li > a span {
display: none;
}
}
.p-globalNav ul li > a br {
display: none;
}
@container (width <= 720px) {
.p-globalNav ul li > a br {
display: block;
}
}
.p-globalNav ul li > a img {
width: 1.8rem;
aspect-ratio: 1;
}
@container (width <= 500px) {
.p-globalNav ul li > a img {
width: 1.6rem;
}
}
.p-globalNav ul li > a:has(img) {
padding-right: 1.8vw;
gap: 0.5em;
}
@container (width <= 720px) {
.p-globalNav ul li > a:has(img) {
padding-left: 1.4vw;
padding-right: 1.4vw;
}
}
@container (width <= 500px) {
.p-globalNav ul li > a:has(img) {
padding-left: 1.6vw;
padding-right: 1.6vw;
}
}
.p-burger__button {
position: relative;
z-index: 21;
}
.p-burger__button[data-icon=burger-close] {
color: #fff;
}
.p-burger__menu {
visibility: hidden;
opacity: 0;
color: #fff;
background-color: var(--gray-900);
padding: var(--space-lg);
position: fixed;
inset: 0 auto auto 0;
display: grid;
place-items: center;
width: 100vw;
height: 100dvh;
z-index: 20;
transition-property: opacity, translate, filter;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
.p-burger__menu.is-open {
visibility: visible;
opacity: 1;
}
.p-burger__list {
display: grid;
margin-inline: auto;
gap: var(--space-sm);
}
.p-burger__list a {
font-size: var(--font-size-3xl);
display: flex;
align-items: center;
gap: 0.5em;
}
.p-burger__list a br {
display: none;
}
.p-burger__list a img {
display: block;
width: 1em;
aspect-ratio: 1;
}
.p-contentsNav {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--space-xl);
align-items: center;
padding-block: var(--space-sm);
border-bottom: 1px solid var(--gray-100);
position: relative;
z-index: 2;
}
@media (width <= 768px) {
.p-contentsNav {
padding-block: var(--space-xs);
}
}
.p-contentsNav__head {
display: flex;
align-items: center;
gap: var(--space-xs);
position: relative;
}
.p-contentsNav__head button {
display: none;
}
@media (width <= 768px) {
.p-contentsNav__head button {
display: block;
}
}
.p-contentsNav__title {
font-size: var(--font-size-h6);
font-weight: 700;
flex: 0 0 max-content;
position: relative;
}
@media (width <= 768px) {
.p-contentsNav__title {
font-size: var(--font-size-body);
font-weight: 700;
}
}
.p-contentsNav__title:has(a:hover) {
color: var(--primary-500);
}
.p-contentsNav__title:has(.is-current) {
color: var(--primary-600);
}
.p-contentsNav__title:has(.is-current)::before {
content: "";
display: block;
width: 0;
height: 2px;
background-color: var(--primary-600);
position: absolute;
inset: auto auto -4px 50%;
translate: -50% 0;
border-radius: 100px;
opacity: var(--pointerOpacity);
animation: currentNavScale 0.5s forwards;
}
.p-contentsNav__title a {
display: block;
width: 100%;
height: 100%;
border-radius: var(--radius-sm);
background-color: var(--primary-50);
position: absolute;
inset: 0 auto auto 0;
z-index: 1;
scale: 1.24;
mix-blend-mode: multiply;
opacity: 0;
}
.p-contentsNav__title a:hover {
opacity: 1;
}
.p-contentsNav__nav ul {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-left: auto;
}
.p-contentsNav__nav ul li {
position: relative;
}
.p-contentsNav__nav a {
position: relative;
}
.p-contentsNav__nav a.is-current::before {
content: "";
display: block;
width: 0;
height: 2px;
background-color: var(--primary-600);
position: absolute;
inset: auto auto 0 50%;
translate: -50% 0;
border-radius: 100px;
opacity: var(--pointerOpacity);
animation: currentNavScale 0.5s forwards;
}
@keyframes currentNavScale {
to {
width: 40px;
}
}
.p-contentsNav__nav a:hover + .p-popupNav {
visibility: visible;
}
@media (width <= 768px) {
.p-contentsNav__nav {
display: none;
}
}
.p-popupNav {
min-width: max-content;
padding: var(--space-xs);
background-color: #fff;
border: 1px solid var(--gray-100);
border-radius: var(--radius-md);
box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.2);
position: absolute;
inset: 100% auto auto 0;
z-index: 1;
visibility: hidden;
}
.p-popupNav.is-visible, .p-popupNav:hover {
visibility: visible;
display: grid;
}
.p-popupNav a:has(img) {
display: grid;
grid-template-columns: 20px 1fr;
gap: 1em;
}
.p-bread ul {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.p-bread ul li {
display: flex;
}
.p-bread ul li:not(:first-child)::before {
content: "/";
color: var(--gray-700);
font-size: var(--font-size-2xs);
margin-right: 0.5em;
}
.p-bread ul li a, .p-bread ul li p {
color: var(--gray-700);
font-size: var(--font-size-2xs);
}
.p-bread ul li a {
text-decoration: underline;
}
.p-bread ul li a:hover {
color: var(--primary-500);
}
.p-bread ul li p {
display: inline;
}
.p-authBar {
padding-block: var(--space-xs);
border-bottom: 1px solid var(--gray-100);
}
.p-authBar__container {
display: flex;
justify-content: flex-end;
gap: 1em;
}
.p-dashboard {
display: grid;
grid-template-columns: 2fr 3fr;
gap: var(--space-sm) var(--space-md);
padding: var(--space-md);
max-height: 1000px;
margin-block: auto;
position: relative;
}
@media (width <= 992px) {
.p-dashboard {
grid-template-columns: 1fr;
max-height: none;
}
}
.p-dashboardBackground {
position: fixed;
inset: 0 auto auto 0;
width: 100dvw;
height: 100dvh;
mix-blend-mode: difference;
opacity: 0.7;
pointer-events: none;
}
.p-dashboardBackground::after {
content: "";
display: block;
width: 100dvw;
height: 100dvh;
background: linear-gradient(-45deg, #f44336, #8bc34a);
position: absolute;
inset: 0 auto auto 0;
mix-blend-mode: multiply;
}
.p-dashboardBackground__inner {
mix-blend-mode: difference;
display: block;
width: 100%;
height: 100%;
position: relative;
}
.p-dashboardBackground__inner video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
background-color: #000;
}
@media (width <= 992px) {
.p-dashboardBackground__inner video {
object-fit: cover;
}
}
.p-dashboard__about {
container-type: inline-size;
display: grid;
}
.p-dashboard__texts {
display: grid;
align-content: start;
justify-items: start;
border-radius: var(--radius-xl);
padding-block: 12cqh;
padding-inline: 10cqw;
position: relative;
}
@media (width <= 992px) {
.p-dashboard__texts {
padding-block: 6cqh 10cqh;
padding-inline: 5cqw;
}
}
.p-dashboard__texts img {
width: min(40cqw, 320px);
position: absolute;
inset: auto -1cqw 10cqh auto;
animation: floating-x 5s ease-in-out infinite alternate-reverse, floating-y 2s ease-in-out infinite alternate-reverse;
}
@media (width <= 992px) {
.p-dashboard__texts img {
width: min(40cqw, 200px);
inset: auto -1cqw 2cqh auto;
}
}
@keyframes floating-x {
0% {
translate: -16px 0;
}
100% {
translate: 16px 0;
}
}
@keyframes floating-y {
0% {
transform: translateY(-4px);
}
100% {
transform: translateY(4px);
}
}
.p-dashboard__title {
font-size: min(8cqw, 48px);
font-weight: 900;
line-height: 1.4;
margin: 0 0 1em;
}
.p-dashboard__title .scriptText {
font-family: Yellowtail;
font-size: 1.2em;
display: inline-block;
background: linear-gradient(62deg, var(--brand1), var(--brand2));
background-clip: text;
color: transparent;
padding-right: 4px;
}
.p-dashboard__button {
margin-block: 4em 0;
color: var(--gray-700);
border-color: var(--gray-400);
background-color: #fff;
}
.p-dashboard__button:hover {
border-color: currentColor;
}
.p-dashboard__nav {
display: grid;
}
.p-tileNav {
container-type: inline-size;
display: grid;
}
.p-tileNav__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
}
@container (width <= 480px) {
.p-tileNav__list {
grid-template-columns: 1fr;
}
}
.p-tileNav__list li {
container-type: inline-size;
display: grid;
}
.p-tileNavCard {
display: grid;
align-content: start;
gap: 2cqh;
padding-block: 6cqh;
padding-inline: 10cqw;
background-color: var(--gray-50);
border: 1px solid transparent;
border-radius: var(--radius-xl);
position: relative;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.p-tileNavCard > a {
position: absolute;
inset: 0;
z-index: 1;
}
.p-tileNavCard img {
width: min(28cqw, 10cqh);
}
.p-tileNavCard__title {
font-size: 8cqw;
font-weight: 700;
}
.p-tileNavCard__description {
font-size: var(--font-size-sm);
}
.p-footer {
display: flex;
align-items: baseline;
padding-block: var(--space-md);
padding-inline: var(--space-md);
gap: 1rem;
}
@media (width <= 576px) {
.p-footer {
display: flex;
flex-direction: column;
align-items: center;
}
}
.p-footer__nav {
display: flex;
align-items: center;
gap: 1rem;
}
.p-footer__nav ul {
display: flex;
align-items: center;
}
.p-footer__nav a {
font-size: var(--font-size-2xs);
padding: 1em;
}
.p-footer__copyright {
font-size: var(--font-size-3xs);
margin-inline: auto 0;
}
@media (width <= 576px) {
.p-footer__copyright {
margin-inline: auto;
}
}
.p-serviceExplain {
container-type: inline-size;
margin-block: 0 var(--space-xl);
padding-block: var(--space-md) 0;
}
.p-serviceExplain__layout {
display: grid;
grid-template-columns: 160px 1fr;
gap: var(--space-xl);
border-bottom: 1px solid var(--gray-100);
padding-block: 0 var(--space-xl);
}
@container (width <= 600px) {
.p-serviceExplain__layout {
grid-template-columns: 40px 1fr;
gap: var(--space-md);
}
}
.p-serviceExplain__images img {
width: 100%;
}
.p-serviceExplain__title {
font-size: var(--font-size-h1);
font-weight: 700;
margin-block: -0.25em 0.5em;
}
@container (width <= 600px) {
.p-serviceExplain__title {
font-size: var(--font-size-h2);
}
}
.p-serviceExplain__phrase {
color: var(--gray-800);
font-size: var(--font-size-h4);
font-weight: 700;
}
@container (width <= 600px) {
.p-serviceExplain__phrase {
font-size: var(--font-size-h5);
}
}
.p-serviceExplain__phrase::before {
content: "“";
}
.p-serviceExplain__phrase::after {
content: "”";
}
.p-serviceExplain__description {
margin: 0.5em 0 0;
font-size: var(--font-size-body);
}
.p-serviceCategories {
container-type: inline-size;
}
.p-serviceCategories__list {
display: grid;
gap: 1em;
counter-reset: number 0;
}
.p-serviceCategories__list:has(.p-serviceCategoryCard) {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.5em;
}
.p-serviceCategories__list:has(.p-serviceCategoryPanel) {
grid-template-columns: 1fr 1fr;
gap: 1.5em;
}
.p-serviceCategories__list:has(.p-serviceCategoryPanel) li.correction {
grid-column: span 2;
}
.p-serviceCategories__list li {
display: grid;
counter-increment: number 1;
}
.p-serviceCategoryCard {
display: grid;
align-content: start;
gap: 1em;
background-color: #fff;
padding-block: var(--space-md);
padding-inline: var(--space-md);
background-color: var(--gray-50);
border: 1px solid transparent;
border-radius: 1rem;
position: relative;
}
@container (width <= 600px) {
.p-serviceCategoryCard {
grid-template-columns: 40px 1fr;
}
}
.p-serviceCategoryCard:hover {
--button-color: var(--primary-500);
--button-border-color: var(--primary-500);
}
.p-serviceCategoryCard > a {
position: absolute;
inset: 0;
z-index: 1;
}
.p-serviceCategoryCard img {
display: block;
width: 80px;
height: auto;
aspect-ratio: 1;
}
@container (width <= 600px) {
.p-serviceCategoryCard img {
width: 64px;
}
}
.p-serviceCategoryCard__title {
font-size: var(--font-size-h5);
font-weight: 700;
margin: 0 0 0.2em;
}
.p-serviceCategoryCard__description {
font-size: var(--font-size-sm);
}
.p-serviceCategoryCard__button {
gap: 0.25em;
margin-block: var(--space-sm) 0;
}
.p-serviceCategoryCard__button::after {
content: "";
}
.p-serviceCategoryPanel {
display: grid;
align-content: start;
grid-template-columns: 1fr;
gap: 1em 2.5em;
background-color: #fff;
padding-block: var(--space-xl);
padding-inline: var(--space-xl);
background-color: var(--gray-50);
border: 1px solid transparent;
border-radius: 1rem;
position: relative;
}
@container (width <= 600px) {
.p-serviceCategoryPanel {
grid-template-columns: 1fr;
padding-block-end: var(--space-sm);
}
}
.correction .p-serviceCategoryPanel {
--color: #5865F2;
background-color: color-mix(in srgb, var(--color), white 76%);
}
.correction .p-serviceCategoryPanel img {
margin-inline: auto;
z-index: 1;
}
.correction .p-serviceCategoryPanel__level {
inset: var(--space-lg) auto auto 50%;
translate: -50% 0;
}
.correction .p-serviceCategoryPanel__level::before {
content: none;
}
.correction .p-serviceCategoryPanel__level::after {
content: "Correction";
color: #fff;
}
.correction .p-serviceCategoryPanel__texts {
text-align: center;
}
.p-serviceCategoryPanel__level {
color: var(--gray-200);
font-size: var(--font-size-h1);
font-weight: 700;
line-height: 1;
display: flex;
align-items: baseline;
position: absolute;
inset: var(--space-xl) var(--space-xl) auto auto;
}
.p-serviceCategoryPanel__level::before, .p-serviceCategoryPanel__level::after {
content: "Lv.";
}
.p-serviceCategoryPanel__level::after {
content: counter(number);
font-size: 2em;
}
.p-serviceCategoryPanel > a {
position: absolute;
inset: 0;
z-index: 1;
}
.p-serviceCategoryPanel img {
display: block;
width: 80px;
height: auto;
aspect-ratio: 1;
}
@container (width <= 600px) {
.p-serviceCategoryPanel img {
width: 64px;
}
}
.p-serviceCategoryPanel__title {
font-size: var(--font-size-h3);
font-weight: 700;
margin: 0 0 0.5em;
}
.p-serviceCategoryPanel__description {
font-size: var(--font-size-sm);
}
.p-serviceCategoryPanel__type {
font-size: var(--font-size-xs);
line-height: 1.2;
display: inline-block;
border: 1px solid var(--gray-200);
padding: 0.5em 1em;
border-radius: 100px;
background-color: #fff;
margin-block: 1em 0;
}
@keyframes focus-hightlight {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.p-overview {
container-type: inline-size;
}
.p-overview__head {
display: grid;
grid-template-columns: 1fr 160px;
padding-inline: 0 16cqw;
gap: var(--space-xl);
padding-block: 0 var(--space-lg);
border-bottom: 1px solid var(--gray-100);
position: relative;
}
@container (width <= 720px) {
.p-overview__head {
grid-template-columns: 1fr 120px;
padding-inline: 0 var(--space-md);
}
}
@container (width <= 480px) {
.p-overview__head {
grid-template-columns: 1fr 80px;
padding-inline: 0;
}
}
.p-overview__title {
margin-block: 0 0.5em;
}
.p-overview__description {
font-size: var(--font-size-body);
}
.p-overview__type {
font-size: var(--font-size-xs);
line-height: 1.2;
display: inline-block;
border: 1px solid var(--gray-200);
padding: 0.5em 1em;
border-radius: 100px;
background-color: #fff;
margin-block: 1.5em 0;
}
.p-overview__images img {
width: 100%;
}
.p-overview__body {
container-type: inline-size;
}
.p-overview__body .rtoc-mokuji-content {
max-width: none;
}
.p-overviewPosts {
display: grid;
}
.p-overviewPost {
display: grid;
grid-template-columns: 2fr 3fr;
gap: var(--space-md) var(--space-xl);
padding-block: var(--space-xl) var(--space-md);
}
@container (width <= 700px) {
.p-overviewPost {
grid-template-columns: 1fr;
}
}
.p-overviewPost + .p-overviewPost {
border-top: 1px solid var(--gray-100);
margin-block: var(--space-xl) 0;
}
.p-overviewPost__texts {
position: sticky;
top: 80px;
}
.p-overviewPost__texts h2 {
--iconSize: 56px;
display: grid;
gap: var(--space-sm);
margin-block: 0 0.5em;
position: relative;
}
.p-overviewPost__texts h2:target::before {
content: "▶︎";
color: var(--primary-500);
font-size: var(--font-size-h1);
position: absolute;
top: calc(var(--iconSize) + var(--space-sm) + 0.45em);
left: 0;
translate: -120% -50%;
animation: focus-hightlight 1.5s ease-in-out infinite;
}
.p-overviewPost__texts h2:not(.p-overviewPost__texts h2:has(img)):target::before {
top: 50%;
translate: -120% -50%;
}
.p-overviewPost__texts h2 img {
width: var(--iconSize);
}
.p-overviewPost__description {
font-size: var(--font-size-sm);
}
.p-overviewPost__action {
margin-block: var(--space-xs) 0;
}
.p-overviewPost__action a {
gap: 0.25em;
}
.p-overviewPost__action a::after {
content: "";
}
.p-overviewPost__progress {
margin-block: var(--space-sm) 0;
}
.p-overviewPost__list {
display: grid;
gap: var(--space-2xs);
}
.p-overviewPost__list a {
color: var(--primary-800);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
background-color: var(--gray-50);
gap: 0.72em;
}
.p-overviewPost__list a::before {
content: "";
background-color: var(--primary-700);
}
.p-overviewPost__list a::after {
content: "";
background-color: var(--primary-700);
}
.p-overviewPost__list a:hover::after {
background-color: var(--primary-500);
}
.p-overviewPost__list a.is-checked {
color: var(--gray-500);
background-color: var(--gray-25);
}
.p-overviewPost__list a.is-checked::before {
background-color: var(--gray-500);
}
.p-overviewPost__list a.is-checked:hover {
color: var(--primary-500);
background-color: var(--primary-50);
}
.p-overviewPost__list a.is-favorite::after {
background-color: var(--primary-500);
}
.p-overviewGallery {
container-type: inline-size;
--imageBoxShadow: none;
--imageBorderColor: var(--gray-500);
--favoritedColor: transparent;
--figcaptionColor: var(--gray-500);
--backgroundColor: transparent;
}
.p-overviewGallery__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm) var(--space-md);
background-color: var(--gray-50);
padding: var(--space-lg);
border-radius: var(--radius-lg);
}
@container (width <= 600px) {
.p-overviewGallery__list {
padding: var(--space-sm);
gap: var(--space-sm) var(--space-xs);
margin-inline: calc(var(--space-md) * -1);
border-radius: 0;
}
}
@container (width <= 480px) {
.p-overviewGallery__list {
grid-template-columns: 1fr;
}
}
.p-overviewGallery.--card .p-overviewGallery__list {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-sm);
}
.p-overviewGallery__list.is-section-header {
grid-template-columns: 1fr;
}
.p-overviewGallery.--card .p-overviewGallery__list > li {
display: grid;
}
.p-overviewGallery__list a {
font-size: var(--font-size-xs);
display: grid;
gap: 0.25em;
background-color: var(--backgroundColor);
position: relative;
}
.p-overviewGallery.--card .p-overviewGallery__list a {
align-items: start;
align-content: start;
gap: 0;
--backgroundColor: #fff;
border: 1px solid var(--imageBorderColor);
box-shadow: var(--imageBoxShadow);
border-radius: var(--radius-md);
}
.p-overviewGallery__list a::after {
content: "";
display: block;
background-color: var(--favoritedColor);
position: absolute;
inset: -0.25rem -0.4rem auto auto;
}
@container (width <= 480px) {
.p-overviewGallery__list a::after {
inset: 0.25rem -0.4rem auto auto;
}
}
.p-overviewGallery__list a:hover {
--imageBoxShadow: 0px 2px 12px -4px rgba(0,0,0,.2);
--imageBorderColor: var(--primary-500);
--figcaptionColor: var(--primary-500);
}
.p-overviewGallery.--card .p-overviewGallery__list a:hover {
--backgroundColor: var(--primary-50);
}
.p-overviewGallery__list a.is-favorite {
--favoritedColor: var(--primary-500);
}
.p-overviewGallery__thumbnail {
display: grid;
}
.p-overviewGallery__thumbnail figure {
margin: 0;
}
.p-overviewGallery__thumbnail figure img {
object-fit: contain;
width: 100%;
height: auto;
border: 1px solid var(--imageBorderColor);
box-shadow: var(--imageBoxShadow);
transition-property: box-shadow, border-color;
}
.p-overviewGallery.--card .p-overviewGallery__thumbnail figure img {
height: 100%;
object-fit: cover;
border-radius: calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0 0;
border: none;
border-bottom: 1px solid var(--gray-200);
box-shadow: none;
}
.p-overviewGallery.--card .p-overviewGallery__text {
padding: 1em 1.5em;
}
.p-overviewGallery__title {
color: var(--figcaptionColor);
font-size: var(--font-size-2xs);
}
.p-overviewGallery.--card .p-overviewGallery__title {
--figcaptionColor: var(--gray-800);
font-size: var(--font-size-md);
font-weight: 700;
}
.p-overviewGallery__description {
color: var(--gray-600);
font-size: var(--font-size-2xs);
margin-block: 0.5em 0;
}
.p-themes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-gap: 1rem;
}
.p-themes__item button {
font-size: var(--font-size-sm);
font-weight: 700;
text-align: left;
display: grid;
align-items: center;
justify-items: center;
grid-template-columns: 1fr;
gap: var(--space-sm);
width: 100%;
padding: var(--space-md);
background-color: var(--gray-50);
border-radius: var(--radius-md);
}
.p-themes__item button img {
border: none !important;
}
.p-module {
width: min(100%, 800px);
background-color: #fff;
border-radius: var(--radius-lg);
padding-block: var(--space-xs) var(--space-xl);
margin-inline: auto;
}
.p-module__back {
margin-block: -0.5em 2em;
}
.p-module__back a {
gap: 0.5em;
line-height: 2rem;
}
.p-module__back a img {
width: 2em;
}
.p-module__title {
font-size: var(--font-size-h3);
font-weight: 700;
margin-block: 0 1em;
}
.p-module__info {
display: flex;
justify-content: space-between;
}
.p-module__info p {
font-size: var(--font-size-2xs);
}
.p-module__favorite {
color: var(--gray-600);
}
.p-module__favorite:hover {
color: var(--);
}
.p-module__favorite::before {
content: "";
}
.p-module__favorite:has(input[type=checkbox]:checked) {
color: var(--primary-600);
border-color: var(--primary-50);
background-color: var(--primary-50);
}
.p-module__favorite:has(input[type=checkbox]:checked):hover {
border-color: var(--primary-600);
}
.p-module__favorite input[type=checkbox] {
position: absolute;
visibility: hidden;
}
.p-module__thumbnail {
margin-block: var(--space-md) 0;
}
.p-module__thumbnail img {
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.12);
}
.single-post .p-module__thumbnail img {
display: block;
margin-inline: auto;
width: min(100%, 600px);
height: auto;
aspect-ratio: 2.5/1;
object-fit: cover;
border: none;
box-shadow: none;
}
.p-module__thumbnail + .p-article {
margin-block-start: var(--space-2xl);
}
.p-article > * {
margin-block: 1.5em;
line-height: 1.9;
}
.p-article img, .p-article video {
border-radius: 8px;
overflow: hidden;
}
.p-article :not(.shadow) img, .p-article video {
border: 1px solid var(--gray-200);
}
.p-article .shadow img, .p-article .shadow video {
box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.12);
}
.p-article .border img, .p-article .border video {
border: 1px solid var(--gray-200);
}
.p-article .none img, .p-article .none video {
border: none;
border-radius: 0;
}
.p-article h2 {
letter-spacing: 0.06em;
}
.p-article h3 {
letter-spacing: 0.06em;
}
.p-article h4 {
letter-spacing: 0.06em;
}
.p-article h5 {
letter-spacing: 0.06em;
}
.p-article h6 {
letter-spacing: 0.06em;
}
.p-article h2 {
line-height: 1.5;
margin-block: 2em 1.5em;
margin-inline: -1em 0;
padding-block: 0.4em 0.5em;
padding-inline: 1em 0;
position: relative;
}
.p-article h2:first-child {
margin-top: 0;
}
.p-article h2::before, .p-article h2::after {
content: "";
display: block;
width: 8px;
height: 100%;
background-color: var(--primary-600);
border-radius: 2px;
position: absolute;
inset: 0 auto auto 0;
}
.p-article h2::after {
width: 100%;
height: 3px;
inset: auto auto 0 0;
}
.p-article h3 {
padding-left: 1em;
margin-block: 2.5em 0;
position: relative;
}
.p-article h3::before {
content: "";
display: block;
width: 6px;
height: 2em;
border-radius: 2px;
background-color: var(--primary-600);
position: absolute;
inset: -0.1em auto auto 0;
}
.p-article h4 {
padding-left: 1em;
margin-block: 2em 0;
position: relative;
}
.p-article h4::before {
content: "";
display: block;
width: 0.5em;
aspect-ratio: 1;
border-radius: 50%;
background-color: var(--primary-600);
position: absolute;
inset: 0.64em auto auto 0;
}
.p-article h3.step,
.p-article h4.step {
--content: "ステップ. 1";
padding-left: 4em;
}
.p-article h3.step::before,
.p-article h4.step::before {
content: var(--content);
color: #fff;
font-size: 0.5em;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
width: auto;
height: auto;
padding: 0.5em 1em;
translate: 0 0.2em;
aspect-ratio: auto;
border-radius: 100px;
position: absolute;
inset: 0.62em auto auto 0;
}
.p-article h3.step--1,
.p-article h4.step--1 {
--content: "ステップ. 1";
}
.p-article h3.step--2,
.p-article h4.step--2 {
--content: "ステップ. 2";
}
.p-article h3.step--3,
.p-article h4.step--3 {
--content: "ステップ. 3";
}
.p-article h3.step--4,
.p-article h4.step--4 {
--content: "ステップ. 4";
}
.p-article h3.step--5,
.p-article h4.step--5 {
--content: "ステップ. 5";
}
.p-article h3.step--6,
.p-article h4.step--6 {
--content: "ステップ. 6";
}
.p-article h3.step--7,
.p-article h4.step--7 {
--content: "ステップ. 7";
}
.p-article h3.step--8,
.p-article h4.step--8 {
--content: "ステップ. 8";
}
.p-article h3.step--9,
.p-article h4.step--9 {
--content: "ステップ. 9";
}
.p-article h3.step--10,
.p-article h4.step--10 {
--content: "ステップ. 10";
}
.p-article h3.step--11,
.p-article h4.step--11 {
--content: "ステップ. 11";
}
.p-article h3.step--12,
.p-article h4.step--12 {
--content: "ステップ. 12";
}
.p-article p {
letter-spacing: 0.06em;
margin-block: 1.5em;
}
.p-article small {
color: var(--gray-600);
font-size: var(--font-size-xs);
}
.p-article a:not(.button) {
color: var(--primary-500);
text-decoration: underline;
display: inline-flex;
gap: 0.25em;
}
.p-article a:not(.button):hover {
color: var(--primary-700);
}
.p-article a:not(.button)[target=_blank]::after {
content: "";
display: inline-flex;
inline-size: 1em;
aspect-ratio: 1;
align-self: center;
background-color: currentColor;
mask-image: var(--icon-external-link);
mask-size: contain;
mask-repeat: no-repeat;
translate: 0 -2px;
}
.p-article ul,
.p-article ol {
font-size: var(--font-size-body);
list-style-type: disc;
padding-left: 1.5em;
margin-block: 2em;
}
.p-article ul strong,
.p-article ol strong {
font-weight: 700;
font-size: var(--font-size-h6);
}
.p-article ul p,
.p-article ol p {
margin-block: 0.5em 1em;
}
.p-article ul > li,
.p-article ol > li {
letter-spacing: 0.06em;
}
.p-article ul > li::marker,
.p-article ol > li::marker {
font-weight: 900;
}
.p-article ul > li + li,
.p-article ol > li + li {
margin-top: 0.6em;
}
.p-article ul ul,
.p-article ul ol,
.p-article ol ul,
.p-article ol ol {
margin-block: 1em 2em;
}
.p-article ol {
list-style-type: decimal;
}
.p-article dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 1rem 2rem;
}
@media (width <= 768px) {
.p-article dl {
grid-template-columns: 1fr;
}
}
@media (width <= 768px) {
.p-article dl dt {
font-size: var(--font-size-xs);
}
}
@media (width <= 768px) {
.p-article dl dd {
padding-bottom: 1.5rem;
}
}
.p-article dl dd > ul:first-child {
margin-block: 0;
}
.p-article .note {
font-size: 0.825rem;
margin: 2em 0 0;
}
.p-article .box {
background-color: var(--gray-50);
padding-block: 1.5em;
padding-inline: 2em;
border-radius: var(--radius-md);
border: 1px solid var(--gray-200);
}
.p-article .box > *:first-of-type {
margin-top: 0;
}
.p-article .box .wp-block-group__inner-container > * {
margin-block: 1em;
}
.p-article .box .wp-block-group__inner-container > *:first-of-type {
margin-top: 0;
}
.p-article .box .wp-block-group__inner-container > *:last-of-type {
margin-bottom: 0;
}
.p-article .comment {
--avatar: url(../images/avatar/normal.png);
display: grid;
grid-template-columns: 1fr auto;
max-width: max-content;
gap: 1.2em;
margin-block: 2em;
margin-inline: auto;
padding-inline: 1.5em;
--outline: var(--gray-400);
--surface: var(--gray-50);
}
@container (width <= 500px) {
.p-article .comment {
padding-inline: 0;
}
}
.p-article .comment::after {
content: "";
display: block;
width: 80px;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid var(--gray-900);
background-color: #0cf;
background-image: var(--avatar);
background-size: cover;
}
.p-article .comment.normal {
--avatar: url(../images/avatar/normal.png);
}
.p-article .comment.happy {
--avatar: url(../images/avatar/happy.png);
}
.p-article .comment.sad {
--avatar: url(../images/avatar/sad.png);
}
.p-article .comment.fight {
--avatar: url(../images/avatar/fight.png);
}
.p-article .comment.hint {
--avatar: url(../images/avatar/hint.png);
}
.p-article .comment.question {
--avatar: url(../images/avatar/question.png);
}
.p-article .comment.panic {
--avatar: url(../images/avatar/panic.png);
}
.p-article .comment.angry {
--avatar: url(../images/avatar/angry.png);
}
.p-article .comment.mmm {
--avatar: url(../images/avatar/mmm.png);
}
.p-article .comment p {
font-size: var(--font-size-md);
max-width: max-content;
align-self: center;
border: 2px solid var(--outline);
background: var(--surface);
margin-block: 0;
padding-block: 1em;
padding-inline: 1em;
border-radius: var(--radius-md);
position: relative;
}
.p-article .comment p::before, .p-article .comment p::after {
content: "";
display: block;
width: 1em;
aspect-ratio: 1/1.5;
background-color: var(--outline);
position: absolute;
inset: 1em 0 auto auto;
translate: 98% 0;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.p-article .comment p::after {
background-color: var(--surface);
translate: calc(98% - 3px) 0;
}
.wp-block-column {
container-type: inline-size;
}
.wp-block-column .comment {
padding-inline: 1.5rem;
}
@container (width <= 500px) {
.wp-block-column .comment {
padding-inline: 0;
}
}
.p-article .shortcut {
width: fit-content;
display: flex;
flex-wrap: wrap;
gap: 0 1em;
margin-block: 2rem 0.5rem;
padding: 1em 1.5em;
border-radius: var(--radius-sm);
background-color: #e6f1f0;
position: relative;
}
.p-article .shortcut::before {
content: "ショートカットキー";
color: #20423f;
font-size: 12px;
line-height: 1;
letter-spacing: 0.1em;
position: absolute;
inset: 0 auto auto 1em;
translate: 0 -0.5em;
}
.p-article .shortcut label {
font-weight: 700;
}
.p-article .shortcut kbd:not(:has(kbd)) {
color: #6d8a87;
width: fit-content;
background-color: white;
padding: 4px 6px;
border-radius: 4px;
border: 1px solid #6d8a87;
margin-inline: 2px;
}
.p-article .button {
color: #fff;
text-decoration: none;
display: grid;
align-items: center;
gap: 1em;
width: max-content;
margin-block: var(--space-md);
margin-inline: auto;
padding: 1.5em 2.5em;
background-color: var(--primary-500);
border-radius: 16px;
}
.p-article .button:hover {
background-color: var(--primary-700);
}
.p-article .button[target=_blank] {
grid-template-columns: 1fr auto;
}
.p-article .button[target=_blank]::after {
content: "";
}
.p-article .button--open {
grid-template-columns: 1fr auto;
}
.p-article .button--open::after {
content: "";
}
.p-article .button--download {
grid-template-columns: 1fr auto;
margin-bottom: var(--space-2xl);
}
.p-article .button--download::after {
content: "";
}
.p-article__steps {
border: 8px solid var(--gray-100);
padding: var(--space-2xl) var(--space-2xl);
border-radius: var(--radius-xl);
}
.p-article__steps--discord {
--color: #5865F2;
border-color: transparent;
background-color: color-mix(in srgb, var(--color), white 92%);
}
.p-article__steps *:first-child {
margin-top: 0;
}
.p-article__steps img {
margin-block: 1em;
}
.p-article__steps > ol {
list-style-type: none;
padding-left: 0;
}
.p-article__steps > ol > li {
font-size: var(--font-size-body);
}
.p-article__steps > ol > li + li {
margin-top: var(--space-lg);
}
.p-articleCard {
--borderColor: var(--gray-100);
--backgroundColor: #fff;
container-type: inline-size;
margin-top: 2.5rem;
width: min(100%, 720px);
}
.p-articleCard:hover {
--borderColor: var(--primary-500);
--backgroundColor: var(--primary-50);
}
.p-articleCard__container {
display: grid;
grid-template-columns: min(160px, 40cqw) 1fr;
gap: var(--space-sm);
padding: var(--space-sm);
border: 3px solid var(--borderColor);
border-radius: var(--radius-lg);
position: relative;
background-color: var(--backgroundColor);
}
@container (width <= 600px) {
.p-articleCard__container {
grid-template-columns: min(100px, 40cqw) 1fr;
gap: var(--space-xs);
padding: var(--space-xs);
}
}
.p-articleCard__container:not(:has(.p-articleCard__images)) {
grid-template-columns: 1fr;
}
.p-articleCard__container::before {
content: "この記事もチェック";
font-size: var(--font-size-xs);
line-height: 1.3;
letter-spacing: 0.12em;
display: inline-block;
padding-inline: 0.8em;
border-radius: 100px;
position: absolute;
inset: 0 auto auto 0;
translate: 1rem -50%;
backdrop-filter: blur(20px);
}
@container (width <= 600px) {
.p-articleCard__container::before {
font-size: var(--font-size-2xs);
}
}
.p-articleCard__container > a {
display: block !important;
position: absolute;
inset: 0;
z-index: 1;
}
.p-articleCard__texts {
padding: var(--space-xs);
}
@container (width <= 600px) {
.p-articleCard__texts {
padding: var(--space-2xs);
}
}
.p-articleCard__title {
font-size: var(--font-size-md);
line-height: 1.3;
font-weight: 600;
}
@container (width <= 600px) {
.p-articleCard__title {
font-size: var(--font-size-sm);
}
}
.p-articleCard__description {
color: var(--gray-700);
font-size: var(--font-size-xs);
margin-block: 0.5em 0 !important;
}
@container (width <= 600px) {
.p-articleCard__description {
font-size: var(--font-size-2xs);
}
}
.p-article .rtoc-mokuji-content {
max-width: none;
}
.p-article .rtoc-mokuji-content .rtoc-mokuji.level-1 li, .p-article .rtoc-mokuji-content .rtoc-mokuji.level-2 li {
font-size: 0.8em;
}
.p-article .rtoc-mokuji-content .rtoc-mokuji.level-1 li a strong, .p-article .rtoc-mokuji-content .rtoc-mokuji.level-2 li a strong {
font-size: inherit;
font-weight: inherit;
}
.p-article .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(.code-block-pro-editor) pre code {
white-space: pre-wrap !important;
}
.p-article iframe {
width: 100%;
height: auto;
aspect-ratio: 16/9;
overflow: hidden;
outline: 1px solid rgba(0, 0, 0, 0.24);
outline-offset: -1px;
}
@property --gradient-angle {
syntax: "";
initial-value: 0turn;
inherits: false;
}
@keyframes gradient-angle {
to {
--gradient-angle: 1turn;
}
}
.p-understand {
--image: url(../images/icons/understand-yet.svg);
container-type: inline-size;
margin-top: var(--space-3xl);
}
.p-understand:has(input[type=checkbox]:checked) {
--image: url(../images/icons/understand-done.svg);
}
.p-understand__container {
display: grid;
grid-template-columns: auto 1fr;
gap: 4cqw;
width: min(100%, 720px);
margin-inline: auto;
padding-block: 4cqw;
padding-inline: 4cqw;
border-radius: var(--radius-md);
animation: 4s gradient-angle infinite linear;
border: 2px solid transparent;
background-image: linear-gradient(white, white), conic-gradient(from var(--gradient-angle), var(--primary-500) 0%, var(--gray-200) 10%, var(--gray-200) 25%, var(--gray-200) 40%, var(--primary-500) 50%, var(--gray-200) 60%, var(--gray-200) 75%, var(--gray-200) 90%, var(--primary-500) 99%);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
}
@container (width <= 600px) {
.p-understand__container {
grid-template-columns: 1fr;
width: min(100%, 400px);
}
}
.p-understand__container:has(input[type=checkbox]:checked) {
border-color: var(--primary-500);
background-image: linear-gradient(var(--primary-50), var(--primary-50));
}
.p-understand__head {
display: grid;
grid-template-columns: 100px 1fr;
align-items: center;
gap: 1em;
}
@container (width <= 700px) {
.p-understand__head {
grid-template-columns: 80px 1fr;
}
}
.p-understand__image {
width: 100%;
height: auto;
aspect-ratio: 1;
background-image: var(--image);
background-size: contain;
}
.p-understand__texts {
font-size: max(3cqw, 18px);
font-weight: 700;
min-width: 11em;
}
.p-understand__action {
display: grid;
place-items: center;
}
.p-understand__action > div {
width: 100%;
}
.p-understand__action label {
--iconColor: var(--gray-200);
--checkboxColor: #fff;
color: var(--gray-700);
letter-spacing: 0.08em;
width: 100%;
display: grid;
grid-template-columns: auto 1fr;
padding-block: 1em;
padding-inline: 1.5em 3em;
gap: 1em;
}
@container (width <= 600px) {
.p-understand__action label {
padding-block: 0.5em;
}
}
.p-understand__action label:hover {
--iconColor: var(--primary-500);
}
.p-understand__action label:has(input[type=checkbox]:checked) {
--checkboxColor: var(--primary-500);
--iconColor: #fff;
color: var(--primary-600);
background-color: var(--primary-100);
border-color: var(--primary-100);
}
.p-understand__action label:has(input[type=checkbox]:checked):hover {
border-color: var(--primary-500);
}
.p-understand__action label i {
background-color: var(--checkboxColor);
padding: 0.5rem;
border-radius: var(--radius-md);
}
.p-understand__action label i::before {
content: "";
background-color: var(--iconColor);
}
@container (width <= 600px) {
.p-understand__action label i {
padding: 0.25rem;
}
}
.p-understand__action label input {
display: none;
}
.p-understand__action label span {
text-align: center;
}
.p-prevNext {
container-type: inline-size;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
margin-top: var(--space-3xl);
}
.p-prevNext__prev, .p-prevNext__next {
display: grid;
align-content: flex-start;
grid-template-rows: auto 1fr;
gap: 0.25rem;
}
.p-prevNext__prev::before, .p-prevNext__next::before {
color: var(--gray-700);
font-size: var(--font-size-sm);
}
.p-prevNext__prev a, .p-prevNext__next a {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.5em;
padding: 1em;
}
@container (width <= 600px) {
.p-prevNext__prev a, .p-prevNext__next a {
font-size: var(--font-size-sm);
}
}
.p-prevNext__prev a span, .p-prevNext__next a span {
display: grid;
place-items: center;
}
.p-prevNext__prev {
grid-column: 1;
}
.p-prevNext__prev::before {
content: "前の記事";
}
.p-prevNext__next {
grid-column: 2;
}
.p-prevNext__next::before {
content: "次の記事";
}
.p-prevNext__next a {
grid-template-columns: 1fr auto;
}
.p-sidebar__inner {
max-height: 100dvh;
position: sticky;
top: 0;
overflow: auto;
}
.p-sidebarCategories {
color: var(--gray-700);
border-bottom: 1px dotted var(--gray-200);
--backAreaHeight: calc(var(--space-lg) * 1);
}
.p-sidebarCategories__back {
height: var(--backAreaHeight);
}
.p-sidebarCategories__back a {
color: var(--gray-700);
font-size: var(--font-size-2xs);
gap: 0.5em;
}
.p-sidebarCategories__wrapper {
position: relative;
}
.p-sidebarCategories__wrapper::before, .p-sidebarCategories__wrapper::after {
content: "";
display: block;
width: 100%;
height: 2rem;
background-image: linear-gradient(#fff, transparent);
position: absolute;
inset: 0 auto auto 0;
z-index: 1;
pointer-events: none;
}
.p-sidebarCategories__wrapper::after {
background-image: linear-gradient(transparent, #fff);
inset: auto auto 0 0;
}
.p-sidebarCategories__container {
padding-block: var(--space-lg) var(--space-2xl);
padding-inline: 0.25rem 0;
height: calc(100dvh - var(--space-xl) - var(--backAreaHeight));
overflow: auto;
}
.p-sidebarCategories__head {
font-size: var(--font-size-body);
margin-block: 0 1em;
}
.p-sidebarCategories__title {
font-size: var(--font-size-body);
font-weight: 700;
display: flex;
align-items: center;
gap: 0.8em;
}
.p-sidebarCategories__title img {
width: 2rem;
height: auto;
aspect-ratio: 1;
margin-left: -0.25rem;
}
.p-sidebarCategories__lv1 {
display: grid;
--icon: var(--icon-chevron-right);
--font-weight: 400;
}
.p-sidebarCategories__lv1 details[open] {
--icon: var(--icon-chevron-down);
--font-weight: 700;
}
.p-sidebarCategories__lv1 details summary {
font-size: var(--font-size-sm);
font-weight: var(--font-weight);
padding-block: 0.5em;
padding-inline: 2.2em 1em;
display: flex;
align-items: center;
gap: 0.5em;
user-select: none;
position: relative;
list-style: none;
}
.p-sidebarCategories__lv1 details summary::-webkit-details-marker {
display: none;
}
.p-sidebarCategories__lv1 details summary::before {
content: "";
display: block;
width: 1.5em;
height: auto;
aspect-ratio: 1;
position: absolute;
mask-image: var(--icon);
mask-size: contain;
mask-repeat: no-repeat;
background-color: var(--gray-500);
inset: 0.5em auto auto 0;
z-index: 1;
}
.p-sidebarCategories__lv1 details summary img {
display: block;
width: 2.5ch;
aspect-ratio: 1;
margin-right: 0.25em;
}
.p-sidebarCategories__lv1 details summary a {
order: 3;
}
.p-sidebarCategories__lv1Item {
padding-block: 0 0.5rem;
}
.p-sidebarCategories__lv1Item:has([open]) {
padding-block: 0 1.5rem;
}
.p-sidebarCategories__lv2 {
padding-left: 0.6em;
position: relative;
}
.p-sidebarCategories__lv2::before {
content: "";
display: block;
width: 1px;
height: 100%;
background-color: var(--gray-100);
position: absolute;
inset: 0 auto auto 0.58em;
}
.p-sidebarCategories__lv2 a {
gap: 0.25em;
padding-left: 1.8em;
}
.p-sidebarCategories__lv2 a.is-current {
border-left: 1px solid var(--primary-500);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
z-index: 1;
position: relative;
}
.p-sidebarCategories__lv2 a img {
display: block;
width: 2.25ch;
aspect-ratio: 1;
margin-right: 0.5em;
}
.p-sidebarCategories__lv2 a.is-favorite::after {
content: "";
display: block;
width: 1em;
height: auto;
aspect-ratio: 1;
mask-image: var(--icon-bookmark-fill);
mask-size: contain;
background-color: var(--primary-500);
align-self: flex-start;
translate: 0 0.3em;
}
.p-sidebarCategories__lv2 a.is-checked {
color: var(--gray-500);
font-weight: 300;
}
.p-sidebarCategories__lv2 a.is-checked.is-current {
color: var(--primary-600);
font-weight: 400;
}
.p-sidebarCategories__lv2 a.is-checked::before {
content: "";
display: block;
width: 1em;
height: auto;
aspect-ratio: 1;
mask-image: var(--icon-check);
mask-size: contain;
background-color: currentColor;
align-self: flex-start;
translate: 0 0.3em;
margin-left: -0.6em;
margin-right: 0.2em;
}
.p-sidebarCategories [data-count] {
align-items: center;
gap: 0.25em;
}
.p-sidebarCategories [data-count]::after {
content: attr(data-count);
color: var(--gray-600);
font-size: var(--font-size-2xs);
padding-inline: 0.25em;
background-color: var(--gray-50);
border-radius: var(--radius-sm);
mix-blend-mode: multiply;
}
.p-sidebarCategories [data-count=done]::after {
content: "✔︎";
color: var(--primary-600);
background-color: transparent;
}
.c-searchBox {
position: relative;
z-index: 1;
}
.c-searchBox form {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
.c-searchBox form label {
display: block;
}
.c-searchBox form label input[type=search] {
width: 100%;
padding: 0.5rem;
border: 1px solid var(--gray-300);
border-radius: var(--radius-md);
}
.c-searchBox form label input[type=search]::-webkit-search-decoration, .c-searchBox form label input[type=search]::-webkit-search-cancel-button, .c-searchBox form label input[type=search]::-webkit-search-results-button, .c-searchBox form label input[type=search]::-webkit-search-results-decoration {
display: none;
}
.c-searchBox form button {
color: #fff;
background-color: var(--primary-500);
border-color: var(--primary-300);
align-self: stretch;
}
.p-searchArea {
position: fixed;
width: 100%;
height: 100dvh;
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
padding-block: 0 20dvh;
display: grid;
place-items: center;
inset: 0 auto auto 0;
z-index: 5;
visibility: hidden;
}
.p-searchArea__cover {
width: 100%;
height: 100dvh;
background-color: transparent;
position: absolute;
z-index: 1;
}
.p-searchArea__box {
width: min(320px, 100%);
padding: 0.75rem;
background-color: rgba(0, 0, 0, 0.5);
border-radius: var(--radius-lg);
box-shadow: 0px 12px 10px -2px rgba(0, 0, 0, 0.24);
}
.p-searchArea.is-visible {
visibility: visible;
}
.p-searchResults section {
margin-block: 2rem 0;
}
.p-searchResults__search {
display: grid;
place-items: center;
}
.p-searchResults__search .c-searchBox {
width: min(400px, 100%);
}
.p-searchResults__body {
margin-block: 2rem 0;
}
.p-searchResults__body h2 {
margin-block: 0 0.5em;
}
.p-searchResults__title {
font-weight: 600;
}
.p-searchResults__count {
font-size: var(--font-size-sm);
padding: 0.25em 1em;
display: inline-flex;
border-bottom: 1px solid;
}
.p-searchResults__list {
display: grid;
gap: var(--space-xs);
}
.p-searchResults__item a {
padding: 1em;
background-color: var(--gray-50);
display: grid;
gap: 1rem;
border-radius: var(--radius-md);
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.p-searchResults__item a:has(.image) {
grid-template-columns: 1fr auto;
}
@container (width <= 600px) {
.p-searchResults__item a:has(.image) {
grid-template-columns: 1fr;
}
}
.p-searchResults__item a .image img {
width: 120px;
height: auto;
}
.p-searchResults__no-results {
font-size: var(--font-size-sm);
padding: 0.5em 1em;
display: inline-flex;
border-radius: var(--radius-sm);
border: 1px solid var(--gray-200);
}
.p-mypage {
width: 100%;
}
.p-mypage h3 {
margin-block: 2em 0.5em;
display: flex;
align-items: center;
gap: 0.5em;
}
.p-mypage h3 i {
background-color: var(--primary-600);
}
.p-mypage h4 {
font-size: var(--font-size-md);
font-weight: 700;
margin-block: 2em 0.5em;
}
.p-mypage hgroup {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.p-mypage hgroup a {
font-size: var(--font-size-sm);
display: inline-flex;
margin-inline: auto 0;
}
.p-mypage hgroup a:hover {
color: var(--primary-500);
}
.p-mypageFavorites ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 4px;
}
.p-mypageFavorites ul li {
display: grid;
}
.p-mypageFavorites__card {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
background-color: var(--gray-50);
border-radius: var(--radius-md);
padding: 0.5rem;
position: relative;
}
.p-mypageFavorites__card::before {
content: "";
display: block;
width: 1rem;
aspect-ratio: 1;
position: absolute;
inset: 0 0 auto auto;
translate: -50% -25%;
mask-image: var(--icon-bookmark-fill);
mask-size: contain;
background-color: var(--primary-600);
}
.p-mypageFavorites__card:hover {
background-color: var(--primary-100);
}
.p-mypageFavorites__card:has(.p-mypageFavorites__thumbnail) {
grid-template-columns: 1fr 100px;
}
.p-mypageFavorites__card > a {
display: block;
position: absolute;
inset: 0;
z-index: 1;
}
.p-mypageFavorites__thumbnail img {
width: 100%;
height: auto;
}
.p-mypageFavorites__texts {
padding: 0.5rem;
}
.p-mypageFavorites__category {
font-size: var(--font-size-2xs);
line-height: 1.2;
margin-block: 0.5em 0;
color: var(--primary-600);
}
.p-mypageFavorites__title {
font-size: var(--font-size-sm);
}
.l-page:has(#wpmem_login) main {
display: grid;
place-items: center;
}
.l-page #wpmem_login {
width: min(560px, 100%);
margin-inline: auto;
background-color: var(--primary-25);
border: 1px solid var(--gray-300);
padding: var(--space-lg);
border-radius: var(--radius-lg);
}
.l-page #wpmem_login fieldset > label {
display: block;
font-size: var(--font-size-sm);
margin-block: 1em 0.25em;
}
.l-page #wpmem_login fieldset input[type=text],
.l-page #wpmem_login fieldset input[type=password] {
border: 1px solid var(--gray-500);
padding: 0.5em;
border-radius: var(--radius-sm);
}
.l-page #wpmem_login input[type=submit] {
color: #fff;
background-color: var(--primary-500);
border-color: var(--primary-500);
}
.l-page #wpmem_reg {
display: none !important;
pointer-events: none !important;
opacity: 0 !important;
}/*# sourceMappingURL=style.css.map */