:root {
    --brown: #642400;
    --gold: #ba9655;
    --paper: #faf8f5;
    --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
a:focus-visible {
    outline: 4px solid #176194;
    outline-offset: 5px;
}
.photo-slice {
    display: block;
    overflow: hidden;
    width: 100%;
    height: auto;
}
.live-copy,
.lesson-examples,
.past-lessons,
.washoku,
.archive-details,
.teachers,
.faq {
    color: var(--brown);
    font-size: clamp(1rem, 3.5vw, 1.75rem);
    line-height: 1.9;
    overflow-wrap: anywhere;
}
.live-copy {
    text-align: center;
    padding: clamp(24px, 5vw, 44px) 5% clamp(28px, 6vw, 48px);
}
.live-copy .added-copy {
    font-size: clamp(1rem, 3.2vw, 1.5rem);
    line-height: 2;
    margin: 0 auto 1.4em;
    max-width: 36em;
}
.live-copy .duration {
    font-family: var(--serif);
    font-size: clamp(1.65rem, 5.3vw, 2.6rem);
    line-height: 1.5;
    font-weight: 700;
    margin: .65em 0;
}
.live-copy p {
    margin: .5em 0;
}
.live-copy mark {
    color: inherit;
    background: linear-gradient(transparent 70%, #fff3a0 70%);
}
.lesson-examples {
    padding: 0 4.6% 1.5em;
}
.ribbon-title {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 4.9vw, 2.4rem);
    font-weight: 500;
    line-height: 1.65;
    text-align: center;
    color: white;
    background: var(--brown);
    border: 2px solid var(--gold);
    margin: .5em 2% 1.8em;
    padding: .6em .4em;
}
.lesson-card {
    position: relative;
    padding: 0 5% 1.4em;
    margin: 0 0 2em;
    border: 1px solid var(--gold);
    border-radius: 10px;
    background: var(--paper);
    box-shadow: 0 2px 5px #46270222;
    text-align: center;
}
.lesson-card h3 {
    position: relative;
    font-family: var(--serif);
    font-size: clamp(1rem, 4vw, 1.9rem);
    line-height: 1.6;
    margin: -.7em -1% .8em;
    padding: .2em .55em;
    color: #fff;
    background: var(--gold);
    border: 1px solid #d7ba7f;
    border-radius: 100px;
}
.lesson-card .dish-name {
    font-size: clamp(1rem, 2.9vw, 1.3rem);
    line-height: 1.75;
    margin: 1em 0 .3em;
}
.lesson-card .lesson-name {
    font-size: clamp(1.05rem, 3.8vw, 1.9rem);
    font-weight: 700;
    line-height: 1.65;
    margin: 0;
}
.section-note {
    font-size: clamp(.875rem, 2.7vw, 1.1rem);
    line-height: 1.8;
}
.live-close {
    font-weight: 700;
    text-align: center;
    margin: 1.4em 0 .3em;
}
.past-lessons {
    padding: 1.3em 4.6% 1.5em;
    background: #f8f5ef;
}
.past-lessons h3 {
    text-align: center;
    font-family: var(--serif);
    font-size: clamp(1.35rem, 4.5vw, 2.2rem);
    margin: 0 0 1em;
}
.past-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(7px, 1.5vw, 14px);
}
.past-grid figure {
    min-width: 0;
    margin: 0;
    background: white;
}
.past-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.past-grid figcaption {
    padding: .55em .3em;
    font-size: clamp(.875rem, 2.3vw, 1.125rem);
    line-height: 1.65;
    text-align: center;
}
.past-lessons .section-note {
    margin: 1em 0 0;
    text-align: center;
}
.washoku {
    padding: 1.5em 4.6% 2em;
}
.washoku-card {
    overflow: hidden;
    border: 1px solid var(--gold);
    border-radius: 10px;
    background: var(--paper);
    text-align: center;
}
.washoku-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.washoku-card h3 {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 4.5vw, 2.2rem);
    line-height: 1.65;
    margin: .8em .5em .3em;
}
.washoku-card p {
    font-size: clamp(1rem, 3.2vw, 1.5rem);
    margin: 0 6% 1.2em;
}
.archive-details {
    padding: 1em 4.6% 2em;
}
.archive-card {
    padding: 0 8% 1.25em;
    background: var(--paper);
    border: 1px solid var(--gold);
    border-radius: 10px;
    box-shadow: 0 2px 5px #46270222;
}
.archive-card > h3 {
    color: white;
    background: var(--gold);
    font-size: clamp(1.4rem, 4.6vw, 2.2rem);
    text-align: center;
    border-radius: 60px;
    padding: .3em;
    margin: -.7em -2% .7em;
}
.archive-intro {
    font-family: var(--serif);
    font-weight: 700;
    color: #21150f;
    text-align: center;
    margin: 1em 0;
}
.archive-feature {
    border-bottom: 1px solid #c7a55e;
    padding: 1.2em 0;
}
.archive-feature:last-child {
    border: 0;
}
.archive-feature h4 {
    font-size: clamp(1.1rem, 3.8vw, 1.9rem);
    line-height: 1.65;
    margin: 0 0 .3em;
}
.archive-feature p {
    margin: 0;
}
.archive-feature .section-note {
    margin: .5em 0 0;
}
.archive-details > .section-note {
    margin: 1.3em 5% 0;
    color: #51483d;
}
.support {
    background: #fff;
    color: var(--brown);
}
.support-excerpts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    width: 88%;
    max-width: 410px;
    margin: 0 auto;
    padding: 10px 0 40px;
}
.support-excerpts figure {
    margin: 0;
    padding: 12px;
    border: 1px solid #d8c294;
    border-radius: 10px;
    background: #faf8f5;
}
.support-excerpts figcaption {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.65;
    text-align: center;
}
.support-excerpts .section-note {
    margin: 0;
    text-align: center;
}
.excerpt-ellipsis {
    background: #e9ecef;
    color: #66717b;
    font-size: 22px;
    line-height: 1;
    text-align: center;
}
.teachers {
    background: #f8f4ed;
    padding: 0 5% 1.5em;
}
.teachers > h2 {
    color: #fff;
    background: var(--brown);
    font-size: clamp(1.6rem, 5.7vw, 2.8rem);
    line-height: 1.5;
    text-align: center;
    margin: 0 -5.56% 1em;
    padding: .9em .3em 1em;
    border-bottom: 5px solid #d6b771;
}
.teacher {
    display: grid;
    grid-template-columns: minmax(86px, 24%) minmax(0, 1fr);
    gap: 5%;
    align-items: center;
    margin: 0 0 1em;
    padding: 1em 4%;
    background: #fff;
    box-shadow: 0 2px 4px #4327001f;
}
.teacher img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center 30%;
    border: 2px solid #c8a449;
    border-radius: 50%;
}
.teacher h3 {
    margin: 0 0 .3em;
    padding-bottom: .25em;
    border-bottom: 1px solid #d8c294;
    color: #977438;
    font-family: var(--serif);
    font-size: clamp(1.05rem, 3.6vw, 1.8rem);
    line-height: 1.65;
}
.teacher p {
    margin: 0;
    font-size: clamp(1rem, 2.65vw, 1.3rem);
    line-height: 1.9;
}
.guest-title {
    text-align: center;
    font-size: clamp(1.5rem, 4.8vw, 2.4rem);
    margin: 1.2em 0 .7em;
}
.guests {
    margin: 0;
    padding: .5em 6%;
    border: 1px solid var(--gold);
}
.guest {
    display: grid;
    grid-template-columns: clamp(62px, 16vw, 104px) minmax(0, 1fr);
    align-items: center;
    gap: 5%;
    padding: .8em 0;
    border-bottom: 1px solid #d8c294;
}
.guest:last-child {
    border: 0;
}
.guest .photo-slice {
    border-radius: 50%;
}
.guest h4 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.1rem, 3.7vw, 1.7rem);
    font-weight: 700;
}
.guest p {
    font-size: clamp(1rem, 2.65vw, 1.3rem);
    margin: .1em 0 0;
}
.faq-title {
    background: var(--brown);
    color: white;
    text-align: center;
    border-bottom: 6px solid #d6b771;
    padding: 1em 4% 1.5em;
}
.faq-title span {
    display: block;
    width: 55%;
    margin: 0 auto .25em;
    border-radius: 50px;
    background: linear-gradient(110deg, #cbae64, #e5d5a0, #cbae64);
    font: 700 clamp(1.5rem, 5vw, 2.5rem) / 1.6 var(--serif);
}
.faq-title h2 {
    font-size: clamp(1.8rem, 6vw, 3rem);
    line-height: 1.5;
    margin: .3em 0 0;
}
.faq-body {
    padding: 1.3em 7.5% 1.5em;
}
.faq-item {
    margin: 0 0 1.8em;
}
.faq-item:last-child {
    margin-bottom: 0;
}
.faq-item h3 {
    color: #9d793c;
    font-family: var(--serif);
    font-size: clamp(1.25rem, 4.4vw, 2rem);
    line-height: 1.7;
    padding: 0 0 .6em;
    border-bottom: 1px solid #d5b46d;
    margin: 0 0 .8em;
}
.faq-item p {
    margin: 0;
    font-size: clamp(1rem, 3.5vw, 1.7rem);
    line-height: 1.95;
}
@media (max-width: 359px) {
    .teacher {
        gap: 4%;
        padding-right: 3%;
        padding-left: 3%;
    }
    .past-grid {
        gap: 6px;
    }
}