/* 音葉ピアノ教室 / 共通スタイル。色・横幅はここで変更できます。 */
:root {
  --green:#173f38;
  --deep:#102f2a;
  --ink:#253d37;
  --muted:#63716b;
  --paper:#fffefa;
  --pale:#f0f3ee;
  --line:#d8dfd8;
  --accent:#aa7956;
  --width:1160px;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Helvetica Neue","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.95;
}
h1,h2,h3,p {
  margin-top:0;
}
h1,h2,h3 {
  font-family:"Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
  font-weight:500;
}
h1 {
  font-size:clamp(2.25rem,4vw,3.8rem);
  line-height:1.65;
  letter-spacing:.09em;
}
h2 {
  font-size:clamp(1.7rem,2.65vw,2.5rem);
  line-height:1.7;
  letter-spacing:.055em;
}
h3 {
  font-size:1.4rem;
  line-height:1.7;
}
p {
  margin-bottom:1.5em;
}
a {
  color:inherit;
  text-decoration:none;
}
button,input,select,textarea {
  font:inherit;
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
a,button {
  touch-action:manipulation;
}
img {
  max-width:100%;
  display:block;
}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px;
}
[hidden] {
  display:none!important;
}
.wrap {
  width:min(var(--width),calc(100% - 96px));
  margin-inline:auto;
}
.narrow {
  max-width:860px;
}
.section {
  padding-block:96px;
}
.eyebrow {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  line-height:1.6;
  margin-bottom:22px;
  color:var(--green);
}
.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:23px 4%;
  background:var(--paper);
  position:relative;
  z-index:10;
  border-bottom:1px solid rgba(23,63,56,.09);
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:18px;
  flex-shrink:0;
}
.brand-mark {
  font-family:"Yu Mincho",serif;
  font-size:1.9rem;
  line-height:1.15;
  letter-spacing:.04em;
  border-right:1px solid var(--line);
  padding-right:18px;
}
.brand-mark>span {
  display:block;
  text-align:center;
  font:9px/2.2 Arial,sans-serif;
  letter-spacing:.28em;
}
.brand-label {
  font-family:"Yu Mincho",serif;
  font-size:1.05rem;
  letter-spacing:.12em;
}
.brand-label small {
  display:block;
  font:9px/2 Arial,sans-serif;
  letter-spacing:.13em;
  margin-top:4px;
}
.header nav {
  display:flex;
  align-items:center;
  gap:26px;
  font-size:.875rem;
}
.header nav a {
  position:relative;
  white-space:nowrap;
  padding:7px 0;
}
.header nav a[aria-current=page]:not(:last-child):after {
  content:"";
  height:2px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:var(--green);
}
.header nav a:last-child {
  background:var(--green);
  color:white;
  padding:13px 22px;
}
.header nav a:hover {
  opacity:.7;
}
.menu-toggle {
  display:none;
}
.skip {
  position:absolute;
  left:20px;
  top:-80px;
  z-index:100;
  background:white;
  padding:10px;
}
.skip:focus {
  top:5px;
}
.hero {
  display:grid;
  grid-template-columns:46% 54%;
  min-height:650px;
}
.hero-copy {
  padding:76px 8% 26px 12%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hero-copy .eyebrow {
  font-size:.65rem;
  margin-bottom:23px;
  letter-spacing:.16em;
}
.hero h1 {
  font-size:clamp(2.2rem,3.65vw,3.65rem);
  white-space:nowrap;
  margin-bottom:22px;
}
.hero h1 span {
  color:var(--accent);
}
.hero-copy>p:not(.eyebrow) {
  line-height:2.1;
  font-size:.94rem;
}
.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:48px;
  background:var(--green);
  color:white;
  min-height:58px;
  padding:16px 25px;
  border:1px solid var(--green);
  font-size:.875rem;
  transition:background .2s,color .2s;
}
.button:hover {
  background:var(--deep);
}
.button span {
  font-size:1.1rem;
}
.hero-foot {
  margin-top:auto;
  padding-top:45px;
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:.75rem;
  letter-spacing:.1em;
}
.hero-foot span:last-child {
  font:10px/2 sans-serif;
  letter-spacing:.16em;
}
.hero-image {
  position:relative;
  min-width:0;
  overflow:hidden;
  margin:20px 20px 20px 0;
}
.hero-image img {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover;
  object-position:61% center;
}
.photo-label {
  position:absolute;
  bottom:24px;
  right:25px;
  color:white;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1rem;
  text-shadow:0 1px 8px #222;
}
.news {
  display:flex;
  align-items:center;
  gap:30px;
  padding-block:25px;
  border-bottom:1px solid var(--line);
  font-size:.875rem;
}
.news p,.news .eyebrow {
  margin:0;
}
.news time {
  font-size:.8rem;
  color:var(--muted);
}
.news a {
  margin-left:auto;
  font-size:1.3rem;
  padding:0 12px;
}
.concept {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}
.concept-text {
  padding-top:15px;
}
.concept p {
  line-height:2.25;
}
.text-link {
  display:inline-flex;
  gap:48px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--green);
  font-size:.875rem;
}
.text-link:hover {
  color:var(--accent);
  border-color:var(--accent);
}
.lesson-section {
  background:var(--green);
  color:white;
}
.lesson-section .eyebrow {
  color:#d0dbce;
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:48px;
}
.section-heading h2 {
  margin-bottom:0;
}
.lesson-section .text-link {
  border-color:#a5b9af;
}
.course-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.course {
  border-top:1px solid #849e92;
  background:#20483f;
  padding:28px 25px 22px;
  transition:background .25s,transform .25s;
}
.course:hover {
  background:#2c564b;
  transform:translateY(-4px);
}
.course-no {
  font:11px/1.5 Arial,sans-serif;
  letter-spacing:.15em;
  color:#d1dacd;
}
.course h3 {
  font-size:1.55rem;
  margin:30px 0 15px;
}
.course p {
  font-size:.9rem;
  color:#e5eae4;
}
.course-bottom {
  border-top:1px solid #527164;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  font-size:.8rem;
}
.reasons>h2 {
  margin-bottom:42px;
}
.reason-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
}
.reason-grid>div>span {
  font:italic 34px Georgia,serif;
  color:var(--accent);
}
.reason-grid h3 {
  font-size:1.16rem;
  margin-top:20px;
}
.reason-grid p {
  font-size:.9rem;
  color:var(--muted);
  margin:0;
}
.cta {
  margin:0 0 0;
  padding:70px max(48px,calc((100vw - var(--width))/2));
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:50px;
  background:#e8ede5;
}
.cta h2 {
  margin-bottom:15px;
}
.cta p:last-child {
  margin:0;
}
.light {
  background:transparent;
  color:var(--green);
  min-width:285px;
}
.light:hover {
  color:white;
}
.sp {
  display:none;
}
footer {
  padding:55px 4% 20px;
}
.footer-main {
  display:flex;
  justify-content:space-between;
  gap:50px;
  margin-bottom:45px;
}
.footer-main p {
  font-size:.8rem;
  line-height:1.9;
}
.footer-nav {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  font-size:.8rem;
}
.footer-nav a:hover {
  text-decoration:underline;
}
.footer-brand {
  align-self:flex-start;
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:.75rem;
  color:var(--muted);
}
.about-photo {
  height:440px;
}
.about-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 57%;
}
.teacher {
  background:var(--pale);
}
.teacher-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px;
}
.teacher-title {
  border-left:2px solid var(--accent);
  padding-left:30px;
}
.signature {
  font:italic 2.25rem Georgia,serif;
  color:var(--accent);
  margin-top:32px;
}
.tag {
  display:inline-block;
  font-size:.8rem;
  padding:5px 15px;
  border:1px solid var(--line);
  margin-bottom:22px;
}
.teacher h3 {
  font-size:1.65rem;
}
.info-list {
  margin:25px 0 0;
}
.info-list>div {
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  border-bottom:1px solid var(--line);
  padding:22px 0;
  font-size:.9rem;
}
.info-list dt {
  font-weight:500;
}
.info-list dd {
  margin:0;
  overflow-wrap:anywhere;
}
.jump {
  display:flex;
  border-block:1px solid var(--line);
  padding-block:18px;
  gap:35px;
  font-size:.9rem;
}
.jump a:hover {
  color:var(--accent);
}
.lesson-detail {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:75px;
  padding-block:75px;
  border-bottom:1px solid var(--line);
}
.lesson-detail h3 {
  font-size:1.6rem;
}
.plain-list {
  padding-left:1.2em;
  font-size:.9rem;
  line-height:2.2;
}
.plain-list li::marker {
  color:var(--accent);
}
.price {
  margin-top:30px;
  padding:20px;
  background:var(--pale);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.8rem;
}
.price strong {
  font:2rem Georgia,serif;
  margin:0 4px;
}
.price small {
  display:block;
  font-size:.75rem;
}
.guide {
  background:var(--pale);
  margin-top:70px;
}
.faq-list {
  padding-bottom:90px;
}
.faq-list details {
  border-bottom:1px solid var(--line);
}
.faq-list details:first-child {
  border-top:1px solid var(--line);
}
summary {
  cursor:pointer;
  display:flex;
  gap:22px;
  align-items:center;
  padding:26px 8px;
  list-style:none;
  font-size:1rem;
}
summary::-webkit-details-marker {
  display:none;
}
summary>span,.answer>span {
  font:1.5rem Georgia,serif;
  color:var(--accent);
  flex-shrink:0;
}
summary i {
  width:12px;
  height:12px;
  position:relative;
  flex-shrink:0;
  margin-left:auto;
}
summary i:before,summary i:after {
  content:"";
  position:absolute;
  background:var(--green);
  top:5px;
  left:0;
  width:12px;
  height:1px;
}
summary i:after {
  transform:rotate(90deg);
}
details[open] summary i:after {
  transform:rotate(0);
}
.answer {
  display:flex;
  gap:23px;
  padding:0 36px 22px 8px;
}
.answer p {
  margin:0;
  color:var(--muted);
}
.contact-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  padding-bottom:90px;
}
.trial-card {
  background:var(--pale);
  padding:32px;
}
.trial-card h2 {
  font-size:1.65rem;
}
.trial-card strong {
  font:2.3rem Georgia,serif;
}
.trial-card p {
  margin-bottom:12px;
}
.trial-card small {
  font-size:.75rem;
}
.trial-card ol {
  padding-left:22px;
  margin-bottom:0;
  margin-top:30px;
  font-size:.9rem;
  line-height:2.5;
}
.note {
  font-size:.8rem;
  color:var(--muted);
  margin-top:22px;
}
.demo-notice {
  padding:19px 22px;
  border-left:3px solid var(--accent);
  background:#f5f0e9;
  font-size:.875rem;
  margin-bottom:30px;
}
.demo-notice p {
  margin:8px 0 0;
  line-height:1.8;
}
.field {
  margin-bottom:27px;
}
.field label {
  display:block;
  margin-bottom:10px;
  font-size:.9rem;
}
.field label span {
  background:#815047;
  color:white;
  font-size:.7rem;
  padding:3px 7px;
  margin-left:8px;
}
input,select,textarea {
  width:100%;
  border:1px solid #bcc9be;
  border-radius:0;
  padding:13px;
  background:white;
  color:var(--ink);
  font-size:1rem;
}
textarea {
  resize:vertical;
}
input::placeholder,textarea::placeholder {
  color:#818980;
}
.contact-grid .button {
  width:100%;
}
#confirmation:focus {
  outline:none;
}
#confirmation .info-list {
  margin-bottom:30px;
}
@media(min-width:1500px) {
  .hero {
    min-height:750px;
  }
  .hero-copy {
    padding-left:max(70px,calc((100vw - 1300px)/2));
  }
}
@media(max-width:1100px) {
  .header {
    padding:20px 4%;
    gap:15px;
  }
  .brand-label {
    font-size:.95rem;
  }
  .header nav {
    gap:17px;
    font-size:.8rem;
  }
  .header nav a:last-child {
    padding:11px 13px;
  }
  .brand {
    gap:12px;
  }
  .brand-mark {
    padding-right:12px;
  }
  .hero {
    min-height:580px;
  }
  .hero-copy {
    padding:55px 7% 25px 9%;
  }
  .hero h1 {
    font-size:3.5vw;
  }
  .hero-copy .eyebrow {
    font-size:.6rem;
  }
  .wrap {
    width:calc(100% - 64px);
  }
  .section {
    padding-block:75px;
  }
  .concept,.teacher-grid,.lesson-detail,.contact-grid {
    gap:45px;
  }
  .course {
    padding:24px 20px;
  }
  .course h3 {
    font-size:1.3rem;
  }
  .course p {
    font-size:.8rem;
  }
  .footer-main {
    gap:30px;
  }
  .footer-nav {
    gap:15px;
  }
}
@media(max-width:820px) {
  .header {
    padding:17px 24px;
  }
  .brand-mark {
    font-size:1.65rem;
  }
  .brand-label {
    font-size:.95rem;
  }
  .menu-toggle {
    display:block;
    border:0;
    background:none;
    width:48px;
    height:44px;
    padding:3px;
    color:var(--green);
    position:relative;
  }
  .menu-toggle>span {
    display:block;
    height:1px;
    background:var(--green);
    width:26px;
    margin:7px auto;
    transition:transform .2s;
  }
  .menu-toggle b {
    display:block;
    font:9px Arial,sans-serif;
    letter-spacing:.08em;
    margin-top:8px;
  }
  .menu-toggle[aria-expanded=true]>span:first-child {
    transform:translateY(4px) rotate(45deg);
  }
  .menu-toggle[aria-expanded=true]>span:nth-child(2) {
    transform:translateY(-4px) rotate(-45deg);
  }
  .header nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--paper);
    padding:15px 24px 30px;
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 20px #173f3810;
    font-size:1rem;
  }
  .header nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .header nav a {
    padding:14px 5px;
    border-bottom:1px solid var(--line);
  }
  .header nav a:last-child {
    margin-top:18px;
    text-align:center;
    padding:13px;
  }
  .header nav a[aria-current=page]:not(:last-child):after {
    display:none;
  }
  .hero {
    grid-template-columns:1fr 1fr;
    min-height:530px;
  }
  .hero-copy {
    padding-top:42px;
  }
  .hero h1 {
    font-size:3.8vw;
  }
  .hero-copy>p:not(.eyebrow) {
    font-size:.8rem;
  }
  .hero .button {
    font-size:.8rem;
    gap:18px;
    padding:14px 17px;
  }
  .hero-foot {
    font-size:.6rem;
    display:block;
  }
  .hero-foot span:last-child {
    display:none;
  }
  .hero-image {
    margin:14px 14px 14px 0;
  }
  .hero-copy .eyebrow {
    max-width:180px;
    line-height:1.9;
  }
  .photo-label {
    font-size:.85rem;
  }
  .course-grid {
    gap:14px;
  }
  .course {
    padding:22px 15px;
  }
  .course h3 {
    font-size:1.15rem;
  }
  .course p br {
    display:none;
  }
  .concept {
    gap:30px;
  }
  .reason-grid {
    gap:25px;
  }
  .reason-grid h3 {
    font-size:1rem;
  }
  .footer-main {
    display:block;
  }
  .footer-brand {
    margin-bottom:30px;
  }
  .footer-bottom {
    flex-direction:column;
    gap:5px;
  }
  .contact-grid {
    grid-template-columns:1fr 1.3fr;
    gap:30px;
  }
  .trial-card {
    padding:22px;
  }
  .info-list>div {
    grid-template-columns:1fr;
    gap:7px;
  }
  .cta {
    padding:55px 32px;
    gap:30px;
  }
  .light {
    min-width:245px;
    gap:20px;
  }
}
@media(max-width:600px) {
  body {
    line-height:1.9;
  }
  .wrap {
    width:calc(100% - 40px);
  }
  .header {
    padding:14px 20px;
  }
  .brand-label {
    font-size:.9rem;
  }
  .brand-label small {
    font-size:8px;
  }
  .brand-mark {
    font-size:1.5rem;
  }
  .hero {
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .hero-copy {
    padding:33px 25px 25px;
  }
  .hero-copy .eyebrow {
    max-width:none;
    font-size:.6rem;
    margin-bottom:17px;
  }
  .hero h1 {
    font-size:2.3rem;
    line-height:1.65;
    margin-bottom:17px;
  }
  .hero-copy>p:not(.eyebrow) {
    font-size:.9rem;
    line-height:1.95;
    margin-bottom:22px;
  }
  .hero .button {
    padding:14px 22px;
    gap:48px;
  }
  .hero-foot {
    display:none;
  }
  .hero-image {
    height:320px;
    margin:0 15px 0 25px;
  }
  .hero-image img {
    object-position:55% center;
  }
  .photo-label {
    bottom:14px;
    right:15px;
    font-size:.9rem;
  }
  .news {
    gap:12px;
    flex-wrap:wrap;
    padding-block:20px;
  }
  .news .eyebrow {
    width:100%;
    font-size:.65rem;
  }
  .news time {
    font-size:.75rem;
  }
  .news p {
    font-size:.8rem;
  }
  .news a {
    padding:0;
  }
  .section {
    padding-block:58px;
  }
  .concept {
    grid-template-columns:1fr;
    gap:10px;
  }
  .concept h2 {
    margin-bottom:15px;
  }
  .concept-text {
    padding-top:0;
  }
  .concept p {
    font-size:.95rem;
    line-height:2.1;
  }
  .eyebrow {
    font-size:.7rem;
    margin-bottom:17px;
  }
  .section-heading {
    display:block;
    margin-bottom:30px;
  }
  .section-heading .text-link {
    margin-top:18px;
  }
  .course-grid {
    grid-template-columns:1fr;
    gap:20px;
  }
  .course {
    padding:23px 24px;
  }
  .course h3 {
    font-size:1.5rem;
    margin-top:18px;
  }
  .course p {
    font-size:.94rem;
  }
  .course-bottom {
    padding-top:15px;
  }
  .reason-grid {
    grid-template-columns:1fr;
    gap:32px;
  }
  .reason-grid>div {
    position:relative;
    padding-left:51px;
  }
  .reason-grid>div>span {
    position:absolute;
    left:0;
    top:4px;
    font-size:28px;
  }
  .reason-grid h3 {
    font-size:1.15rem;
    margin:0 0 10px;
  }
  .reason-grid p {
    font-size:.94rem;
  }
  .reasons>h2 {
    font-size:1.6rem;
    margin-bottom:30px;
  }
  .cta {
    padding:45px 25px;
    display:block;
  }
  .cta h2 {
    font-size:2rem;
  }
  .cta p {
    font-size:.9rem;
  }
  .cta .button {
    margin-top:28px;
    width:100%;
    max-width:350px;
  }
  .sp {
    display:block;
  }
  footer {
    padding:38px 20px 20px;
  }
  .footer-nav {
    gap:12px 22px;
  }
  .footer-main {
    margin-bottom:30px;
  }
  .footer-bottom {
    font-size:.7rem;
  }
.page-head h1 {
    font-size:2rem;
    line-height:1.7;
    letter-spacing:.03em;
  }
.about-photo {
    height:280px;
  }
  .teacher-grid {
    grid-template-columns:1fr;
    gap:30px;
  }
  .teacher-title {
    padding-left:22px;
  }
  .teacher-title h2 {
    font-size:1.8rem;
  }
  .signature {
    margin:20px 0 0;
  }
  .teacher h3 {
    font-size:1.45rem;
  }
  .teacher p {
    font-size:.94rem;
  }
  .jump {
    gap:0;
    justify-content:space-between;
    font-size:.8rem;
    flex-wrap:wrap;
  }
  .lesson-detail {
    grid-template-columns:1fr;
    gap:12px;
    padding-block:45px;
  }
  .lesson-detail h2 {
    margin-bottom:15px;
  }
  .lesson-detail .tag {
    margin-bottom:0;
  }
  .lesson-detail h3 {
    font-size:1.35rem;
    margin-top:12px;
  }
  .lesson-detail p {
    font-size:.95rem;
  }
  .guide {
    margin-top:30px;
  }
  .price {
    padding:18px;
  }
  .faq-list {
    padding-bottom:55px;
  }
  summary {
    padding:22px 0;
    gap:14px;
    font-size:.95rem;
  }
  summary>span,.answer>span {
    font-size:1.3rem;
  }
  .answer {
    padding:0 5px 22px 0;
    gap:15px;
    font-size:.94rem;
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:25px;
    padding-bottom:55px;
  }
  .trial-card {
    padding:25px;
  }
  .trial-card ol {
    margin-top:15px;
  }
  .trial-card h2 {
    margin-bottom:15px;
  }
  .trial-card strong {
    font-size:2rem;
  }
  .note {
    margin-bottom:0;
  }
  .demo-notice {
    padding:16px;
    font-size:.8rem;
  }
  .field {
    margin-bottom:22px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  * {
    transition:none!important;
  }
}
/* 写真を軸にしたレイアウト：共通の配色・見出しは上部の設定を継承 */
figure {
  margin:0;
}
.hero {
  position:relative;
  background:var(--green);
  color:#fff;
  grid-template-columns:43% 57%;
  min-height:700px;
}
.hero-copy {
  position:relative;
  z-index:1;
  padding:80px 0 34px max(40px,calc((100vw - 1240px)/2));
  margin-right:-90px;
  pointer-events:none;
}
.hero-copy>* {
  pointer-events:auto;
}
.hero-copy .eyebrow {
  color:#d6dfd5;
  font-size:.7rem;
}
.hero h1 {
  font-size:clamp(2.7rem,4.1vw,4.4rem);
  line-height:1.6;
  letter-spacing:.06em;
  text-shadow:0 2px 22px #173f3830;
}
.hero h1 span {
  color:#e4c9a5;
}
.hero-copy>p:not(.eyebrow) {
  color:#e8eee8;
}
.hero .button {
  background:#fffefa;
  color:var(--green);
  border-color:#fffefa;
  margin-top:6px;
}
.hero .button:hover {
  background:#e4c9a5;
  border-color:#e4c9a5;
}
.hero-foot {
  max-width:370px;
  color:#d0ded6;
}
.hero-image {
  margin:26px 26px 26px 0;
  overflow:visible;
}
.hero-image:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#173f3860,transparent 45%);
  pointer-events:none;
}
.hero-image img {
  object-position:58% center;
  clip-path:inset(0 0 0 0 round 160px 0 0 0);
}
.photo-label {
  z-index:1;
  right:24px;
  bottom:25px;
  font-size:1.4rem;
}
.news {
  position:relative;
  background:white;
  box-shadow:0 12px 28px #173f3809;
  padding:23px 30px;
  margin-top:-1px;
  border-bottom:0;
}
.news .eyebrow {
  color:var(--accent);
}
.concept-visual {
  grid-template-columns:1.1fr 1fr;
  gap:100px;
  padding-block:110px 125px;
  align-items:center;
}
.concept-photos {
  position:relative;
  padding-right:40px;
  padding-bottom:60px;
}
.concept-main img {
  width:100%;
  height:470px;
  object-fit:cover;
}
.concept-main figcaption {
  font:italic 1rem Georgia,serif;
  margin-top:15px;
  color:var(--accent);
}
.concept-small {
  width:43%;
  position:absolute;
  right:-15px;
  bottom:0;
  border:8px solid var(--paper);
  box-shadow:0 12px 35px #142e3312;
}
.concept-small img {
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
}
.vertical-caption {
  position:absolute;
  left:-23px;
  top:0;
  writing-mode:vertical-rl;
  font:10px/1.2 Arial,sans-serif;
  letter-spacing:.2em;
  color:var(--muted);
}
.concept-visual h2 {
  font-size:clamp(1.8rem,2.7vw,2.7rem);
  margin-bottom:25px;
}
.concept-visual p {
  font-size:.93rem;
}
.lesson-section {
  background:var(--pale);
  color:var(--green);
  position:relative;
}
.lesson-section .eyebrow {
  color:var(--accent);
}
.lesson-section .text-link {
  border-color:var(--green);
}
.course-grid {
  gap:28px;
  align-items:start;
  padding-bottom:30px;
}
.course {
  padding:0 0 24px;
  background:white;
  border:0;
  box-shadow:0 8px 30px #14352d08;
  overflow:hidden;
}
.course:nth-child(2) {
  margin-top:40px;
}
.course:nth-child(3) {
  margin-top:80px;
}
.course:hover {
  background:white;
  transform:translateY(-5px);
  box-shadow:0 12px 32px #14352d16;
}
.course-no,.course h3,.course p,.course-bottom {
  margin-left:26px;
  margin-right:26px;
}
.course-no {
  color:var(--accent);
}
.course h3 {
  margin-top:14px;
  color:var(--green);
  font-size:1.45rem;
}
.course p {
  color:var(--muted);
  font-size:.875rem;
}
.course-bottom {
  border-color:var(--line);
  color:var(--green);
}
.reasons-top {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:70px;
  margin-bottom:45px;
}
.reasons-photo {
  width:100%;
  height:295px;
  object-fit:cover;
  border-radius:0 90px 0 0;
}
.reasons-top h2 {
  margin-bottom:0;
}
.reason-grid {
  gap:0;
  border-top:1px solid var(--line);
}
.reason-grid>div {
  padding:30px 30px 0;
}
.reason-grid>div:first-child {
  padding-left:0;
}
.reason-grid>div+div {
  border-left:1px solid var(--line);
}
.reason-grid>div>span {
  font-size:42px;
}
.cta {
  padding:65px max(48px,calc((100vw - var(--width))/2));
  min-height:360px;
  position:relative;
  isolation:isolate;
  background:var(--deep);
  color:#fff;
  overflow:hidden;
}
.cta-photo {
  position:absolute;
  z-index:-2;
  inset:0;
  pointer-events:none;
}
.cta-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
}
.cta:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#102f2aee,#102f2aaa 55%,#102f2a60);
  z-index:-1;
}
.cta .eyebrow {
  color:#dcc8aa;
}
.cta h2 {
  font-size:2.7rem;
}
.cta .light {
  color:white;
  border-color:#f5f5ef;
  background:#ffffff08;
  backdrop-filter:blur(6px);
}
.cta .light:hover {
  background:white;
  color:var(--green);
}
footer {
  background:var(--deep);
  color:#f0f4ee;
}
.footer-bottom {
  color:#b8c8bf;
  border-color:#496057;
}
.footer-main p {
  color:#c6d2ca;
}
.footer-brand .brand-mark {
  border-color:#60766a;
}
.page-about .concept {
  padding-top:50px;
}
.teacher {
  background:#e8ede5;
}
.teacher-grid {
  grid-template-columns:.85fr 1.15fr;
  gap:85px;
  align-items:center;
}
.teacher-title {
  border:0;
  padding:0;
}
.teacher-portrait {
  position:relative;
  margin-bottom:30px;
}
.teacher-portrait img {
  width:100%;
  height:490px;
  object-fit:cover;
  object-position:50% 35%;
  border-radius:120px 0 0 0;
}
.teacher-portrait figcaption {
  font:10px/1.5 Arial,sans-serif;
  letter-spacing:.12em;
  background:var(--green);
  color:white;
  padding:14px 20px;
  position:absolute;
  right:-20px;
  bottom:22px;
}
.teacher-title>.eyebrow,.teacher-title>h2 {
  display:none;
}
.signature {
  margin:0;
  text-align:right;
}
.teacher-grid>div:last-child>h3 {
  font-size:2rem;
}
.jump {
  margin-top:35px;
  border-top:0;
  justify-content:center;
  gap:65px;
  padding-block:16px 25px;
}
.jump a:after {
  content:"↓";
  margin-left:20px;
  font-size:.8rem;
  color:var(--accent);
}
.lesson-detail {
  gap:70px;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding-block:60px;
}
.lesson-detail>div:first-child {
  position:relative;
}
.detail-photo {
  margin-bottom:26px;
  overflow:hidden;
}
.detail-photo img {
  width:100%;
  height:310px;
  object-fit:cover;
}
.lesson-detail h2 {
  margin-bottom:12px;
}
.lesson-detail .eyebrow {
  margin-bottom:8px;
}
.lesson-detail .tag {
  margin-bottom:0;
}
.lesson-detail:nth-of-type(even) .detail-photo {
  border-radius:70px 0 0 0;
}
.lesson-detail#teens>div:first-child {
  order:2;
}
.lesson-detail#teens>div:last-child {
  order:1;
}
.price {
  border-left:3px solid var(--accent);
  padding:22px;
}
.price strong {
  font-size:2.4rem;
}
.guide {
  background:#e8ede5;
}
.page-faq .faq-list {
  padding-top:30px;
}
.faq-list details {
  margin-bottom:14px;
  border:1px solid var(--line);
  background:white;
}
.faq-list summary {
  padding:25px;
}
.faq-list .answer {
  padding:0 25px 25px;
}
.faq-list details[open] {
  border-color:#93a99a;
  box-shadow:0 8px 22px #173f3806;
}
.contact-grid {
  padding-top:30px;
}
.trial-photo {
  overflow:hidden;
  border-radius:70px 0 0 0;
}
.trial-photo img {
  width:100%;
  aspect-ratio:1.5;
  object-fit:cover;
}
.trial-card {
  background:var(--green);
  color:white;
}
.trial-card .eyebrow {
  color:#e0caae;
}
.trial-card ol {
  border-top:1px solid #688276;
  padding-top:20px;
}
.trial-card small {
  color:#d5dfd6;
}
.button {
  box-shadow:0 6px 20px #173f380d;
}
@media(min-width:1500px) {
  .hero {
    min-height:760px;
  }
  .hero-copy {
    padding-top:90px;
  }
}
@media(max-width:1100px) {
  .hero {
    min-height:630px;
  }
  .hero-copy {
    padding:65px 0 28px 32px;
  }
  .hero h1 {
    font-size:4.4vw;
  }
  .hero-image {
    margin:20px 20px 20px 0;
  }
  .hero-image img {
    clip-path:inset(0 0 0 0 round 100px 0 0 0);
  }
.photo-label {
    font-size:1.1rem;
    bottom:18px;
  }
  .concept-visual {
    gap:65px;
    padding-block:85px 100px;
  }
  .concept-main img {
    height:410px;
  }
  .course-grid {
    gap:20px;
  }
  .course-no,.course h3,.course p,.course-bottom {
    margin-left:20px;
    margin-right:20px;
  }
  .course h3 {
    font-size:1.3rem;
  }
  .teacher-grid {
    gap:55px;
  }
.page-head {
    min-height:330px;
  }
.lesson-detail {
    gap:40px;
  }
  .detail-photo img {
    height:275px;
  }
  .jump {
    gap:40px;
  }
}
@media(max-width:820px) {
  .hero {
    min-height:570px;
    grid-template-columns:44% 56%;
  }
  .hero-copy {
    padding-top:50px;
  }
  .hero h1 {
    font-size:4.5vw;
  }
.hero-caption span {
    font-size:1.3rem;
    padding-right:9px;
  }
  .hero .button {
    margin-top:0;
  }
  .hero-foot {
    max-width:260px;
  }
  .concept-visual {
    gap:40px;
  }
  .concept-photos {
    padding-right:15px;
  }
  .concept-main img {
    height:360px;
  }
  .concept-small {
    width:48%;
    right:-12px;
  }
  .concept-visual h2 {
    font-size:1.7rem;
  }
  .concept-visual p {
    font-size:.875rem;
  }
  .course-no,.course h3,.course p,.course-bottom {
    margin-left:15px;
    margin-right:15px;
  }
  .course h3 {
    font-size:1.1rem;
  }
  .course p {
    font-size:.8rem;
  }
  .course-grid {
    gap:15px;
  }
.reasons-top {
    gap:35px;
  }
  .reasons-photo {
    height:250px;
  }
  .reason-grid>div {
    padding:25px 20px 0;
  }
  .cta {
    padding:50px 32px;
  }
.page-head h1 {
    font-size:2rem;
  }
.teacher-portrait img {
    height:400px;
  }
  .teacher-grid {
    gap:40px;
  }
  .teacher-grid>div:last-child>h3 {
    font-size:1.6rem;
  }
  .detail-photo img {
    height:240px;
  }
  .jump {
    gap:25px;
  }
  .jump a:after {
    margin-left:10px;
  }
}
@media(max-width:600px) {
  .hero {
    display:flex;
    min-height:0;
  }
  .hero-copy {
    padding:36px 25px 28px;
    margin-right:0;
  }
  .hero h1 {
    font-size:clamp(1.95rem,7.7vw,2.65rem);
    line-height:1.5;
    letter-spacing:.04em;
  }
  .hero-copy .eyebrow {
    font-size:.6rem;
  }
  .hero-copy>p:not(.eyebrow) {
    font-size:.9rem;
    margin-bottom:20px;
  }
  .hero .button {
    padding:13px 23px;
    min-height:52px;
  }
  .hero-image {
    height:345px;
    margin:0 16px 25px 25px;
    overflow:visible;
  }
  .hero-image img {
    clip-path:inset(0 0 0 0 round 85px 0 0 0);
    object-position:55% center;
  }
  .hero-image:after {
    display:none;
  }
.photo-label {
    right:14px;
    bottom:8px;
    font-size:.8rem;
  }
  .news {
    width:calc(100% - 32px);
    padding:19px 18px;
    margin-top:0;
    gap:10px;
  }
  .news p {
    font-size:.75rem;
  }
  .news .eyebrow {
    font-size:.6rem;
  }
  .concept-visual {
    display:flex;
    flex-direction:column;
    gap:30px;
    padding-block:55px 60px;
  }
  .concept-photos {
    width:100%;
    padding:0 45px 40px 10px;
  }
  .concept-main img {
    height:310px;
  }
  .concept-main figcaption {
    font-size:.8rem;
    margin-top:10px;
  }
  .concept-small {
    right:0;
    width:39%;
    border-width:6px;
  }
  .vertical-caption {
    left:-6px;
    font-size:8px;
  }
  .concept-text {
    width:100%;
  }
  .concept-visual h2 {
    font-size:1.95rem;
  }
  .concept-visual p {
    font-size:.95rem;
  }
  .lesson-section {
    padding-block:55px;
  }
  .course-grid {
    grid-template-columns:1fr;
    gap:28px;
    padding-bottom:0;
  }
  .course:nth-child(2),.course:nth-child(3) {
    margin-top:0;
  }
  .course {
    padding-bottom:23px;
  }
.course-photo img {
    aspect-ratio:1.65;
  }
  .course-no,.course h3,.course p,.course-bottom {
    margin-left:24px;
    margin-right:24px;
  }
  .course h3 {
    font-size:1.5rem;
    margin-top:12px;
  }
  .course p {
    font-size:.94rem;
  }
  .reasons-top {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:26px;
    margin-bottom:25px;
  }
  .reasons-photo {
    height:235px;
    border-radius:0 65px 0 0;
  }
  .reasons-top h2 {
    font-size:1.9rem;
  }
  .reason-grid {
    display:block;
  }
  .reason-grid>div,.reason-grid>div:first-child {
    padding:25px 0 25px 54px;
  }
  .reason-grid>div+div {
    border-left:0;
    border-top:1px solid var(--line);
  }
  .reason-grid>div>span {
    top:26px;
    font-size:32px;
  }
  .cta {
    padding:45px 25px;
    min-height:380px;
  }
  .cta h2 {
    font-size:2.3rem;
  }
  .cta:after {
    background:linear-gradient(90deg,#102f2aeb,#102f2aa8);
  }
  .cta-photo img {
    object-position:62% center;
  }
.page-head-copy {
    padding:35px 25px 30px;
  }
.page-head-copy>p:last-child {
    font-size:.9rem;
  }
.page-head-photo img {
    border-radius:65px 0 0 0;
    object-position:center 43%;
  }
  .page-about .concept {
    padding-top:40px;
  }
  .teacher-grid {
    display:flex;
    flex-direction:column;
    gap:30px;
  }
  .teacher-title {
    width:100%;
  }
  .teacher-portrait {
    max-width:330px;
    margin:0 auto 22px;
  }
  .teacher-portrait img {
    height:380px;
    border-radius:90px 0 0 0;
  }
  .teacher-portrait figcaption {
    right:-10px;
    font-size:9px;
    padding:13px;
  }
  .signature {
    text-align:center;
    font-size:2rem;
  }
  .teacher-grid>div:last-child>h3 {
    font-size:1.7rem;
  }
  .jump {
    gap:10px 20px;
    margin-top:20px;
    justify-content:flex-start;
    font-size:.8rem;
    padding-bottom:18px;
  }
  .jump a:after {
    margin-left:8px;
  }
  .lesson-detail {
    display:flex;
    flex-direction:column;
    gap:18px;
    padding-block:35px;
    align-items:stretch;
  }
  .lesson-detail#teens>div:first-child,.lesson-detail#teens>div:last-child {
    order:initial;
  }
  .detail-photo {
    margin-bottom:23px;
  }
  .detail-photo img {
    height:240px;
  }
  .lesson-detail .eyebrow {
    font-size:.65rem;
  }
  .lesson-detail h2 {
    font-size:1.7rem;
  }
  .lesson-detail h3 {
    margin-top:0;
  }
  .lesson-detail .tag {
    font-size:.75rem;
  }
  .price {
    margin-top:22px;
  }
  .page-faq .faq-list {
    padding-top:20px;
  }
  .faq-list summary {
    padding:21px 17px;
    font-size:.9rem;
  }
  .faq-list .answer {
    padding:0 17px 22px;
    font-size:.9rem;
  }
  .contact-grid {
    padding-top:20px;
    gap:30px;
  }
  .trial-photo img {
    aspect-ratio:1.7;
  }
  .trial-card {
    padding:24px;
  }
  .trial-card ol {
    margin-top:20px;
    padding-top:15px;
  }
  .footer-main {
    margin-bottom:30px;
  }
}
.teacher-name {
  font-family:"Yu Mincho",serif;
  font-size:1.7rem;
  margin-bottom:20px;
}
.teacher-name small {
  font:italic 1rem Georgia,serif;
  margin-left:15px;
  color:var(--accent);
}

/* コース共通アイコン */
.course-icon {
  width: 90px;
  height: 90px;
  margin: 30px 26px 24px;
  color: var(--accent);
  display: grid;
  place-items: center;
  background: var(--pale);
  border-radius: 22px 4px 22px 4px;
}
.course-icon svg {
  width: 49px;
  height: 49px;
}
/* 下層4ページ共通。写真・コピー用のラッパーは設けません。 */
.page-head {
  height: 220px;
  padding: 30px 24px;
  margin: 0 0 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--pale);
  border-bottom: 1px solid var(--line);
}
.page-head .eyebrow {
  color: var(--accent);
  margin: 0 0 12px;
}
.page-head h1 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.5;
  letter-spacing: .07em;
  margin: 0;
}
@media (max-width: 600px) {
  .page-head {
    height: auto;
    min-height: 165px;
    padding: 30px 20px;
    margin-bottom: 15px;
  }
  .page-head .eyebrow {
    font-size: .65rem;
    margin-bottom: 10px;
  }
  .page-head h1 {
    font-size: clamp(1.5rem, 6vw, 1.9rem);
  }
  .course-icon {
    width: 76px;
    height: 76px;
    margin: 25px 24px 20px;
  }
  .course-icon svg {
    width: 42px;
    height: 42px;
  }
}