/* mixin */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap");
section:where(#makubetsu-iju) { --color-main: #005C33; --color-sub1: #f2ecd4; --color-sub2: #e5eeea; --color-sub3: #ccded6; --color-acc: #c9a400; --color-imp: #c1282d; color: #000; font-size: 16px; font-weight: 500; font-style: normal; font-family: "M PLUS Rounded 1c"; text-decoration: none; line-height: 1.2; overflow-x: clip; width: 100%; container-type: inline-size; }

section:where(#makubetsu-iju) * { color: var(--color, inherit); font-size: var(--fs, 1em); font-weight: var(--fw, inherit); font-style: inherit; font-family: inherit; text-decoration: inherit; line-height: inherit; display: block; margin-block: var(--my, var(--mt, var(--m, 0)) var(--mb, var(--m, 0))); margin-inline: var(--mx, var(--ms, var(--m, 0)) var(--me, var(--m, 0))); padding-block: var(--py, var(--pt, var(--p, 0)) var(--pb, var(--p, 0))); padding-inline: var(--px, var(--ps, var(--p, 0)) var(--pe, var(--p, 0))); }

section:where(#makubetsu-iju) a:hover { color: inherit; }

section:where(#makubetsu-iju) a:is(:hover, :active) img { filter: none; }

section:where(#makubetsu-iju) ul, section:where(#makubetsu-iju) ol { list-style: none; }

section:where(#makubetsu-iju) .wbr { white-space: pre-wrap; overflow-wrap: break-word; word-break: keep-all; }

section:where(#makubetsu-iju) .nobr { white-space: nowrap; }

section:where(#makubetsu-iju) .all-revert { all: revert; }

section:where(#makubetsu-iju) .sr-only { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; }

section:where(#makubetsu-iju) #split { width: 100cqi; display: grid; grid-template-columns: 0fr 1fr 0fr; grid-auto-rows: auto; transition-property: grid-template-columns; transition-duration: 0.25s; transition-timing-function: ease; position: relative; background-color: white; background-image: radial-gradient(circle, var(--color-sub3) 2px, #fff0 0), radial-gradient(circle, var(--color-sub3) 2px, #fff0 0); background-size: 40px 40px, 40px 40px; background-position: calc(50% - 20px) -20px, 50% 0; background-attachment: fixed, fixed; }

section:where(#makubetsu-iju) #split.navopen { grid-template-columns: 1fr 0fr 0fr; }

section:where(#makubetsu-iju) header, section:where(#makubetsu-iju) nav, section:where(#makubetsu-iju) main, section:where(#makubetsu-iju) aside { overflow: hidden clip; }

section:where(#makubetsu-iju) :is(nav, aside) > * { padding: 1rem; }

section:where(#makubetsu-iju) nav, section:where(#makubetsu-iju) aside { align-self: start; position: sticky; top: 0; height: 100lvh; padding-bottom: calc(100lvh - 100svh + 51.2px); }

section:where(#makubetsu-iju) nav > div, section:where(#makubetsu-iju) aside > div { min-width: 100cqi; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; }

section:where(#makubetsu-iju) header > div > section, section:where(#makubetsu-iju) main > div > section { margin-top: 2rem; padding: 2rem 1rem; background-color: rgb(from white r g b / 0.5); backdrop-filter: blur(2px); border: solid 4px var(--color-main); width: 100%; container-type: inline-size; }

section:where(#makubetsu-iju) :is(header, main) img { border-radius: 5cqi; }

section:where(#makubetsu-iju) :is(header, main) > div { padding-inline: 1rem; min-width: 100cqi; }

section:where(#makubetsu-iju) header { grid-column: 2/3; }

section:where(#makubetsu-iju) nav { grid-column: 1/2; grid-row: 1/3; }

section:where(#makubetsu-iju) nav > div { position: relative; }

section:where(#makubetsu-iju) nav #navdeco { position: absolute; width: 100%; max-width: 300px; height: 100%; container-type: inline-size; display: grid; place-items: center; }

section:where(#makubetsu-iju) nav #navdeco-f { position: absolute; width: 100lvmax; aspect-ratio: 1/1; background-color: var(--color-main); top: 50%; border-radius: 100lvmax; translate: 0 70cqi; }

section:where(#makubetsu-iju) nav ul { display: contents; }

section:where(#makubetsu-iju) nav li { container-type: inline-size; width: 100%; max-width: 300px; position: relative; display: flex; justify-content: center; align-items: center; }

section:where(#makubetsu-iju) nav li:first-child > * { position: relative; z-index: 1; }

section:where(#makubetsu-iju) nav li:first-child::before, section:where(#makubetsu-iju) nav li:first-child::after { content: ""; display: block; position: absolute; background-color: burlywood; width: 7.5cqi; height: 150cqi; top: 5cqi; border-radius: 1cqi; }

section:where(#makubetsu-iju) nav li:first-child::before { translate: -15cqi; }

section:where(#makubetsu-iju) nav li:first-child::after { translate: 15cqi; }

section:where(#makubetsu-iju) nav a, section:where(#makubetsu-iju) nav button { font-size: 8cqi; display: flex; justify-content: center; padding-block: 0.25em; margin-block: 0.25em; border: solid 4px var(--color-main); background-color: white; background-image: none; width: 100%; }

section:where(#makubetsu-iju) nav button { transition-property: background-color; transition-duration: 0.25s; transition-timing-function: ease; }

section:where(#makubetsu-iju) nav a { border: solid 2px var(--color-main); background-color: white; padding: 2px; }

section:where(#makubetsu-iju) nav a span { display: block; text-align: center; padding-block: 0.25em; width: 100%; height: 100%; color: white; background-color: var(--color-main); transition-property: background-color, color; transition-duration: 0.25s; transition-timing-function: ease; }

section:where(#makubetsu-iju) nav img { height: 8cqi; margin-inline: 0.75cqi; }

section:where(#makubetsu-iju) main { grid-column: 2/3; padding-bottom: 2rem; }

section:where(#makubetsu-iju) aside { grid-column: 3/4; grid-row: 1/3; }

section:where(#makubetsu-iju) aside > div { min-width: calc((100cqi - 500px) / 2); container-type: inline-size; }

section:where(#makubetsu-iju) aside p { writing-mode: vertical-rl; font-size: 3cqi; line-height: 2ic; }

section:where(#makubetsu-iju) aside p * { display: inline; }

section:where(#makubetsu-iju) main h2 { margin-bottom: 2rem; }

section:where(#makubetsu-iju) main mark { display: inline; background-color: #fff0; --c: rgb(from var(--color-acc) r g b / 0.5); background-image: linear-gradient(to top, #fff0 0.1ic, var(--c) 0, var(--c) 0.5ic, #fff0 0); font-weight: 700; }

section:where(#makubetsu-iju) main b { display: inline; }

section:where(#makubetsu-iju) main em { display: inline; font-style: normal !important; }

section:where(#makubetsu-iju) main small { display: inline; }

section:where(#makubetsu-iju) h2 + .fkds { margin-top: 2rem; }

section:where(#makubetsu-iju) .fkds { margin-top: 4rem; }

section:where(#makubetsu-iju) .fkds dt, section:where(#makubetsu-iju) .fkds dd { font-size: 1.25rem; padding: 1rem; line-height: 1.5; height: calc(2lh + 1rem); border-radius: calc(1lh + 0.5rem); display: grid; place-content: center; position: relative; background-color: #fff; border: solid 4px var(--color-main); margin-bottom: 3rem; filter: drop-shadow(0 4px var(--color-main)); }

section:where(#makubetsu-iju) .fkds dt *, section:where(#makubetsu-iju) .fkds dd * { line-height: 1.5; }

section:where(#makubetsu-iju) .fkds dt::before, section:where(#makubetsu-iju) .fkds dd::before { content: ""; display: block; position: absolute; background-color: #fff; border: solid 4px var(--color-main); border-top: none; border-bottom-right-radius: 100%; width: 1.25rem; height: 1.25rem; bottom: -1.25rem; left: 1.75rem; }

section:where(#makubetsu-iju) .fkds dt::after, section:where(#makubetsu-iju) .fkds dd::after { content: ""; display: block; position: absolute; background-color: #fff; width: calc(1.25rem - 8px); height: 2px; bottom: -1px; left: calc(1.75rem + 4px); }

section:where(#makubetsu-iju) .fkds h3 { white-space: pre-wrap; overflow-wrap: break-word; word-break: keep-all; text-align: center; }

section:where(#makubetsu-iju) .fkds h3::before { content: "Q."; display: inline; font-weight: 600; margin-right: 0.25ic; color: var(--color-acc); }

section:where(#makubetsu-iju) .fkds dd { height: auto; display: block; scale: -1 1; }

section:where(#makubetsu-iju) .fkds dd p { scale: -1 1; }

section:where(#makubetsu-iju) .fkds dd p:not(:has(small))::before { content: "A."; display: inline; font-weight: 600; margin-right: 0.25ic; color: var(--color-acc); }

section:where(#makubetsu-iju) .fkds dd p:has(small) { font-size: 1rem; font-weight: 400; line-height: 1; margin-top: 0.5rem; }

section:where(#makubetsu-iju) .popbtn { position: relative; margin-bottom: 1.5rem; }

section:where(#makubetsu-iju) .popbtn a { position: relative; font-size: 1.25rem; line-height: 1.5; padding: 1rem; padding-right: calc(1.5rem + 1lh); border-radius: 1rem; color: white; background-color: var(--color-main); text-align: center; white-space: pre-wrap; overflow-wrap: break-word; word-break: keep-all; background-image: url(../images/makubetsu-iju/icon-link.svg); background-repeat: no-repeat; background-size: 1lh; background-position: calc(100% - 1rem) 50%; transition-property: scale; transition-duration: 0.25s; transition-timing-function: ease; }

section:where(#makubetsu-iju) .popbtn small { font-size: 0.9rem; font-weight: 400; }

section:where(#makubetsu-iju) .akdo { margin-bottom: 2rem; display: grid; grid-template-rows: calc(3lh + 2rem) 0fr; transition-property: grid-template-rows, opacity; transition-duration: 0.25s, 1s; transition-timing-function: ease; }

section:where(#makubetsu-iju) .akdo:has(.active) { grid-template-rows: calc(3lh + 2rem) 1fr; }

section:where(#makubetsu-iju) .akdo * { line-height: 1.5; }

section:where(#makubetsu-iju) .akdo dt, section:where(#makubetsu-iju) .akdo dd { padding: 1rem; border: solid 4px var(--color-main); }

section:where(#makubetsu-iju) .akdo dt { font-size: 1.25rem; line-height: 1.5; padding-right: calc(1.5rem + 1lh); position: relative; display: flex; align-items: center; background-color: white; transition-property: background-color; transition-duration: 0.25s; transition-timing-function: ease; }

section:where(#makubetsu-iju) .akdo dt::before, section:where(#makubetsu-iju) .akdo dt::after { content: ""; position: absolute; background-color: var(--color-main); width: 1lh; height: 1lh; right: 1rem; }

section:where(#makubetsu-iju) .akdo dt::before { clip-path: inset(calc(50% - 2px) 0); }

section:where(#makubetsu-iju) .akdo dt::after { clip-path: inset(0 calc(50% - 2px)); transition-property: clip-path; transition-duration: 0.25s; transition-timing-function: ease; }

section:where(#makubetsu-iju) .akdo dt:has(.active)::after { clip-path: inset(50% calc(50% - 2px)); }

section:where(#makubetsu-iju) .akdo dt:has(button:hover) { background-color: var(--color-acc); }

section:where(#makubetsu-iju) .akdo h3 { width: 100%; text-align: center; }

section:where(#makubetsu-iju) .akdo h3 small { font-size: 0.9rem; font-weight: 400; }

section:where(#makubetsu-iju) .akdo button { position: absolute; border: none; background-color: #fff0; background-image: none; inset: -4px; z-index: 1; }

section:where(#makubetsu-iju) .akdo dd { border-top: none; background-color: #fff; overflow-y: hidden; transition-property: padding-block, margin-top; transition-duration: 0.25s; transition-timing-function: ease; }

section:where(#makubetsu-iju) .akdo:not(:has(.active)) dd { padding-block: 0; margin-top: -4px; }

section:where(#makubetsu-iju) .akdo li { padding-left: 1ic; background-image: radial-gradient(circle, #000 0.125ic, #fff0 0); background-size: 1ic 1lh; background-repeat: no-repeat; background-position: 0 0; }

section:where(#makubetsu-iju) .akdo li { font-size: 1.125rem; }

section:where(#makubetsu-iju) .akdo li + li { margin-top: 0.5rem; }

section:where(#makubetsu-iju) .akdo p { font-size: 1rem; font-weight: 400; }

section:where(#makubetsu-iju) .t-panel { position: relative; }

section:where(#makubetsu-iju) .t-panel img:nth-child(1) { position: relative; }

section:where(#makubetsu-iju) .t-panel img:nth-child(2) { position: absolute; inset: 0; opacity: 0; transition-property: opacity; transition-duration: 0.5s; transition-timing-function: ease; }

section:where(#makubetsu-iju) .t-panel img:has(+ .active) { opacity: 1; }

section:where(#makubetsu-iju) .t-panel button { border: none; background-color: var(--color-main); color: white; display: flex; margin-inline: auto; margin-top: 0.5rem; font-size: 1.25rem; padding: 1rem; border-radius: 100lvmax; align-items: center; justify-content: center; }

section:where(#makubetsu-iju) .t-panel button svg { width: 1.5em; height: auto; aspect-ratio: 1/1; }

section:where(#makubetsu-iju) .t-panel button svg path { fill: white; }

section:where(#makubetsu-iju) .t-panel button span:nth-child(2 of span) { display: none; }

section:where(#makubetsu-iju) .t-panel button.active span:nth-child(1 of span) { display: none; }

section:where(#makubetsu-iju) .t-panel button.active span:nth-child(2 of span) { display: block; }

section:where(#makubetsu-iju) #mbctxt { margin-top: 2rem; display: flex; justify-content: center; gap: 0.25rem; width: 100%; container-type: inline-size; }

section:where(#makubetsu-iju) #mbctxt img { border-radius: 0; height: 8cqi; }

header .splide, main .splide { margin-bottom: 2rem; margin-inline: -1rem; }

header .splide__arrows, main .splide__arrows { margin-top: 1rem; padding-inline: 1rem; display: flex; justify-content: center; align-items: center; counter-reset: pagination-num; font-size: 1.25rem; }

header .splide__arrow, header .splide__arrow:hover, main .splide__arrow, main .splide__arrow:hover { inset: auto; position: relative; transform: none; opacity: 1; margin-inline: 0.5rem; width: 1.5lh; height: 1.5lh; background-color: lightgray; transition-property: background-color; transition-duration: 0.25s; transition-timing-function: ease; }

header .splide__arrow svg, main .splide__arrow svg { transform: none; }

header .splide__pagination, main .splide__pagination { width: 1lh; height: 1lh; position: relative; padding: 0; inset: auto; overflow-y: hidden; }

header .splide__pagination li, main .splide__pagination li { display: contents; }

header .splide__pagination__page, main .splide__pagination__page { inset: 2lh 0 0 0; }

header .splide__pagination__page.is-active, main .splide__pagination__page.is-active { top: 0; }

header .splide__pagination__page, header .splide__pagination__page.is-active, main .splide__pagination__page, main .splide__pagination__page.is-active { display: grid; place-items: center; width: 100%; height: 100%; transform: none; margin: 0; opacity: 1; cursor: auto; background-image: none; background-color: #fff0; position: absolute; }

header .splide__pagination__page::before, main .splide__pagination__page::before { counter-increment: pagination-num; content: counter(pagination-num); }

header .splide__slash, header .splide__endpage, main .splide__slash, main .splide__endpage { width: 1lh; height: 1lh; display: grid; place-content: center; }

header .splide__endpage::after, main .splide__endpage::after { content: counter(pagination-num); }

.fadein { opacity: 0; }

.fadein:not(.akdo) { transition: opacity 1s ease; }

.fadein.show { opacity: 1; }

#btn-menu { position: fixed; bottom: 1rem; left: 1rem; font-size: 1.5rem; font-weight: 600; min-width: 5em; padding: 0.25rem 0.5rem; border-radius: 0.5rem; z-index: 901; border: solid 4px orange; background-color: white; color: orange; transition-property: background-color, color; transition-duration: 0.25s; transition-timing-function: ease; display: none; }

:has(#gmenu-sp:not(.active)) #btn-menu span:nth-child(1) { display: inline; }

:has(#gmenu-sp:not(.active)) #btn-menu span:nth-child(2) { display: none; }

:has(#gmenu-sp.active) #btn-menu span:nth-child(1) { display: none; }

:has(#gmenu-sp.active) #btn-menu span:nth-child(2) { display: inline; }

@media (any-hover: hover) { section:where(#makubetsu-iju) nav button:hover { background-color: var(--color-acc); } section:where(#makubetsu-iju) nav a:hover span { color: black; background-color: var(--color-acc); } section:where(#makubetsu-iju) .popbtn a:hover { scale: 1.025; } header .splide__arrow:hover, main .splide__arrow:hover { background-color: var(--color-acc); } #btn-menu:hover { background-color: orange; color: white; } }

@media (min-width: 992px) { section:where(#makubetsu-iju) nav, section:where(#makubetsu-iju) aside { padding-bottom: calc(100lvh - 100svh); } #btn-menu { display: block; } }

@media (min-width: 800px) { section:where(#makubetsu-iju) #split, section:where(#makubetsu-iju) #split.navopen { grid-template-columns: 1fr 500px 0fr; }
  section:where(#makubetsu-iju) :is(header, main) > div { min-width: 500px; }
  section:where(#makubetsu-iju) nav > div { min-width: calc(100cqi - 500px); } .sp-fixed-menu ul li { flex-basis: 88%; }
  ul li:has(> .btn-page-select) { display: none; } }

@media (min-width: 1000px) { section:where(#makubetsu-iju) nav > div { min-width: calc((100cqi - 500px) / 2); } }

@media (min-width: 1100px) { section:where(#makubetsu-iju) #split, section:where(#makubetsu-iju) #split.navopen { grid-template-columns: 1fr 500px 1fr; } }