/* 共通の基礎スタイル。画面幅 768px / 1024px で3段階に切り替える。 */
* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; color: #463322; background: #fff; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; }
a { color: #463322; text-decoration: underline; text-underline-offset: .2em; }
a:visited { color: #463322; }
a:hover { text-decoration-thickness: .15em; }
:focus-visible { outline: 3px solid #005fcc; outline-offset: 4px; }
.site-header, main, footer { width: calc(100% - 32px); max-width: 1100px; margin-inline: auto; }
.site-header { padding-block: 16px; border-bottom: 1px solid #ccc; }
.brand { display: inline-block; margin-bottom: 12px; padding-block: 8px; color: #463322; }
nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; }
nav a[aria-current="page"] { font-weight: 700; text-decoration-thickness: .15em; }
main > section, article { padding-block: 32px; }
main > section + section, article section { border-top: 1px solid #ddd; }
article { max-width: 800px; margin-inline: auto; }
article section { padding-block: 20px; }
h1, h2, h3 { line-height: 1.5; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
h1 small { display: inline-block; font-size: 1rem; }
.hero { padding-block: 48px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0; list-style: none; }
.grid > *, .form-row > * { min-width: 0; }
.card, .steps li { border: 1px solid #ccc; padding: 20px; }
.card > :first-child, .steps li > :first-child { margin-top: 0; }
.card > :last-child, .steps li > :last-child { margin-bottom: 0; }
.card ul { padding-left: 1.5em; }
.steps { padding-left: 28px; }
.steps li + li { margin-top: 24px; }
.placeholder { display: grid; place-items: center; min-height: 140px; border: 1px dashed #999; background: #f5f5f5; padding: 20px; text-align: center; }
img, svg, iframe { max-width: 100%; }
img { height: auto; }
dt { font-weight: bold; margin-top: 24px; }
dd { margin: 8px 0 24px; }
address { font-style: normal; }
.button, button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; border: 1px solid #767676; border-radius: 4px; padding: 10px 20px; background: #f5f5f5; font: inherit; text-align: center; }
.button:hover { background: #e9e9e9; }
form { max-width: 800px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-block: 24px; }
.form-row > label, legend { font-weight: 700; }
input:not([type=radio]), textarea { width: 100%; max-width: 100%; min-height: 44px; padding: 10px; border: 1px solid #767676; border-radius: 4px; color: #463322; background: #fff; font: inherit; }
textarea { resize: vertical; }
input[type=number] { max-width: 120px; }
input[type=radio] { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: #0056a6; }
fieldset { min-width: 0; margin: 24px 0; padding: 16px; border: 1px solid #767676; }
legend { max-width: 100%; padding-inline: 4px; }
fieldset label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 20px; cursor: pointer; }
button:disabled { color: #666; cursor: not-allowed; }
footer { border-top: 1px solid #ccc; padding-block: 32px; font-size: 1rem; }
footer small { font-size: .875rem; }
.skip-link { position: absolute; left: 16px; top: 0; transform: translateY(-150%); z-index: 10; background: #fff; padding: 12px; }
.skip-link:focus { transform: translateY(0); }
/* 中間：768px以上・1024px未満 */
@media (min-width: 768px) {
  .site-header, main, footer { width: calc(100% - 64px); }
  .site-header { padding-block: 24px; }
  main > section, article { padding-block: 40px; }
  .hero { padding-block: 64px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.625rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .form-row { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
}
/* PC：1024px以上 */
@media (min-width: 1024px) {
  main > section, article { padding-block: 48px; }
  .hero { padding-block: 80px; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  nav { gap: 8px 24px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
}

/* 中間・スマホの開閉式ナビゲーション */
.menu-toggle { gap: 8px; padding: 8px 12px; color: #463322; cursor: pointer; }
.menu-toggle[hidden], #site-nav[hidden] { display: none; }
.menu-icon { display: grid; gap: 5px; width: 24px; }
.menu-icon span { display: block; height: 2px; background: currentColor; }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1023.98px) {
  .site-header.has-menu { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
  .has-menu .brand { min-width: 0; margin-bottom: 0; }
  .has-menu nav { grid-column: 1 / -1; flex-direction: column; gap: 0; border-top: 1px solid #ccc; }
  .has-menu nav a { padding: 12px 8px; border-bottom: 1px solid #ddd; }
}

/* 指定セクションの背景を本文幅の外まで広げる。 */
#topics, #faq, #about, #access {
  background-color: #ebf2db;
  box-shadow: 0 0 0 100vmax #ebf2db;
  clip-path: inset(0 -100vmax);
}

/* 原版の余白は表示枠で調整し、画像ファイルはそのまま使用する。 */
.art-characters { aspect-ratio: 1290 / 545; }
.art-characters img { width: 103.410853%; left: -1.550388%; top: -124.770642%; }
.art-shiori { aspect-ratio: 620 / 760; }
.art-shiori img { width: 220.48387096774195%; left: -76.61290322580645%; top: -121.71052631578947%; }
.art-koguchi-lean { aspect-ratio: 250 / 240; }
.art-koguchi-lean img { width: 546.8%; left: -76%; top: -429.1666666666667%; }
.art-koguchi { aspect-ratio: 405 / 625; }
.art-koguchi img { width: 337.53086419753083%; left: -101.23456790123457%; top: -112.00000000000001%; }
.art-conversation { aspect-ratio: 890 / 585; }
.art-conversation img { width: 153.59550561797752%; left: -19.101123595505616%; top: -108.54700854700855%; }
.art-ten-seated { aspect-ratio: 350 / 445; }
.art-ten-seated img { width: 390.57142857142856%; left: -252.85714285714283%; top: -149.43820224719101%; }
.art-ten { aspect-ratio: 450 / 685; }
.art-ten img { width: 303.77777777777777%; left: -93.33333333333333%; top: -85.40145985401459%; }

.illustration { display: block; position: relative; overflow: hidden; width: 100%; }
.illustration img { position: absolute; max-width: none; height: auto; }
.hero { display: grid; gap: 32px; align-items: center; }
.hero > .illustration { max-width: 560px; justify-self: center; }
.illustrated-copy { display: grid; align-items: center; gap: 24px; }
.illustrated-copy > .illustration { width: min(100%, 360px); justify-self: center; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-heading h2 { margin-block: 0; }
.section-heading .illustration { width: 90px; flex-shrink: 0; }
.section-heading .art-koguchi-lean { width: 110px; }
.location-photo { margin: 0 0 24px; }
.location-photo img { display: block; width: 100%; height: auto; border-radius: 8px; }
figcaption { margin-top: 12px; font-size: .875rem; }
.library-map { margin: 24px 0 0; max-width: 900px; }
.map-crop { display: block; background: #fff; }
.map-crop img { display: block; width: 100%; height: auto; }
.footer-organizations { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; }
.footer-organizations img { width: 220px; height: auto; }
@media (min-width: 768px) {
  .hero { grid-template-columns: 1fr 1fr; }
  .illustrated-copy { grid-template-columns: minmax(0, 1fr) minmax(200px, .6fr); gap: 40px; }
  .section-heading .illustration { width: 110px; }
  .section-heading .art-koguchi-lean { width: 140px; }
}

/* ヘッダーの公式ロゴ */
.brand img { display: block; width: 360px; max-width: 100%; height: auto; }
@media (max-width: 1023.98px) {
  .has-menu .brand { width: 280px; max-width: 100%; padding-block: 0; }
}

/* SHIORIの紹介文と建物外観 */
.about-content { display: grid; gap: 24px; align-items: center; }
.about-content > * { min-width: 0; }
.about-content .location-photo { margin: 0; }
@media (min-width: 768px) {
  .about-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}

/* 相談内容：CSSの丸い吹き出しとFont Awesomeのアイコン */
#topics { position: relative; color: #463322; padding-block: 48px; }
#topics > h2 { margin: 0 0 32px; text-align: center; letter-spacing: .06em; }
.topic-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0; margin: 0; list-style: none; }
.topic-bubble { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; min-height: 178px; width: 100%; max-width: 330px; justify-self: center; padding: 24px 20px; background: #fff; border-radius: 49% 51% 46% 48% / 52% 50% 46% 45%; text-align: center; font-size: 1.25rem; line-height: 1.6; }
/* 石ころのように、カードごとの輪郭をわずかに変える。 */
.topic-bubble:nth-child(1) { border-radius: 48% 52% 47% 53% / 53% 49% 51% 47%; }
.topic-bubble:nth-child(2) { border-radius: 53% 47% 51% 49% / 49% 54% 46% 51%; }
.topic-bubble:nth-child(3) { border-radius: 50% 50% 54% 46% / 52% 47% 53% 48%; }
.topic-bubble:nth-child(4) { border-radius: 46% 54% 49% 51% / 54% 51% 49% 46%; }
.topic-bubble:nth-child(5) { border-radius: 52% 48% 46% 54% / 47% 52% 48% 53%; }
.topic-bubble:nth-child(6) { border-radius: 49% 51% 53% 47% / 51% 46% 54% 49%; }
.topic-icon { display: flex; align-items: center; justify-content: center; color: #285650; height: 40px; font-size: 2.5rem; line-height: 1; }
.worry-lines { display: flex; align-items: center; gap: 6px; height: 40px; }
.worry-lines span { width: 4px; height: 30px; border-left: 4px solid currentColor; border-radius: 50%; transform: rotate(4deg); }
.worry-lines span:nth-child(2n) { height: 39px; transform: rotate(-4deg); }
.worry-lines span:nth-child(3) { height: 26px; align-self: flex-start; }
.hanging-plant { display: none; }
@media (min-width: 768px) {
  .topic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .topic-bubble { min-height: 190px; font-size: 1.375rem; }
}
@media (min-width: 1024px) {
  #topics { padding-block: 56px; }
  #topics > h2 { margin-bottom: 40px; }
  .topic-list { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px 24px; }
  .topic-bubble { grid-column: span 2; max-width: none; min-height: 180px; padding-inline: 12px; }
  .topic-bubble:nth-child(4) { grid-column: 2 / span 2; }
  .topic-bubble:nth-child(5) { grid-column: 4 / span 2; }
  .topic-bubble:nth-child(6) { grid-column: 6 / span 2; }
  .hanging-plant { display: block; position: absolute; right: 10px; top: 68px; width: 80px; height: 150px; color: #809f63; }
  .plant-rope { position: absolute; top: 0; left: 16px; width: 48px; height: 104px; border: 2px solid #c9b58a; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(65deg, transparent 48%, #c9b58a 49% 51%, transparent 52%), linear-gradient(-65deg, transparent 48%, #c9b58a 49% 51%, transparent 52%); }
  .hanging-plant .fa-seedling { position: absolute; bottom: 32px; left: 10px; font-size: 60px; }
  .plant-pot { position: absolute; bottom: 0; left: 13px; width: 54px; height: 42px; border: 3px solid #d7b573; border-radius: 5px 5px 22px 22px; background: #f6dfa4; }
}

/* 相談場面のイメージ写真 */
.intro-photo { min-width: 0; width: 100%; margin: 0; }
.intro-photo img { display: block; width: 100%; height: auto; border-radius: 8px; }
.intro-photo figcaption, .location-photo figcaption { margin-top: 6px; color: #463322; font-size: .875rem; text-align: right; }

/* ご利用の流れ：Canvaの4ステップ構成 */
#flow { color: #463322; }
#flow > h2 { margin: 0 0 56px; text-align: center; }
#flow .steps { max-width: 960px; margin: 0 auto; padding: 0; list-style: none; }
#flow .steps li { position: relative; padding: 32px 20px 24px; border: 1px solid #697f55; border-radius: 28px; text-align: center; }
#flow .steps li + li { margin-top: 48px; }
.step-number { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #697f55; color: #fff; font-size: 1.625rem; line-height: 1; }
#flow .steps h3 { margin: 0 0 12px; font-size: 1.375rem; font-weight: 400; }
#flow .steps p { margin: 0; }
#flow .steps .step-note { margin-top: 24px; }
.step-image { display: block; max-width: 100%; height: auto; margin: 20px auto 0; }
.step-image-1 { width: 164px; }
.step-image-3 { width: 214px; }
.step-image-4 { width: 140px; }
@media (min-width: 768px) {
  #flow > h2 { margin-bottom: 64px; }
  #flow .steps li { padding: 36px 40px 28px; border-radius: 32px; }
  #flow .steps li + li { margin-top: 56px; }
  #flow .steps h3 { font-size: 1.75rem; }
  #flow .steps p { font-size: 1.125rem; }
  #flow .steps li:nth-child(2) { padding-block: 44px; }
}

/* よくある質問：質問と回答の強弱、区切り線 */
#faq { color: #463322; }
#faq > h2 { margin: 0 0 40px; text-align: center; }
#faq dl { margin: 0; }
#faq dt { margin: 0; padding: 20px 16px 0; border-top: 1px solid #cddbb5; font-weight: 700; }
#faq dd { margin: 0; padding: 8px 16px 20px; font-weight: 400; }
#faq > .illustration { width: 100px; margin: 28px auto 0; }
@media (min-width: 768px) {
  #faq dt { padding-inline: 28px; }
  #faq dd { padding-inline: 28px; }
  #faq > .illustration { width: 110px; margin-top: 32px; }
}

/* 公開Googleカレンダー */
#calendar { color: #463322; }
#calendar > h2 { margin: 0 0 36px; text-align: center; }
.calendar-content { max-width: 860px; margin-inline: auto; }
.calendar-frame { overflow: hidden; border: 1px solid #cddbb5; border-radius: 12px; background: #fff; }
.calendar-frame iframe { display: block; width: 100%; height: 540px; border: 0; }
.calendar-link { margin-top: 8px; text-align: right; font-size: .875rem; }
.opening-hours { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin-block: 24px; }
.opening-hours p { margin: 0; }
.opening-days { margin-block: 24px; text-align: center; }
.calendar-booking { margin: 36px 0 0; text-align: center; }
.calendar-booking .button, .calendar-booking .button:visited { gap: 20px; min-width: min(100%, 280px); border: 0; border-radius: 999px; background: #697f55; color: #fff; font-weight: 700; text-decoration: none; }
.calendar-booking .button:hover { background: #526642; }
@media (min-width: 768px) {
  .calendar-frame iframe { height: 620px; }
}

/* 運営団体のロゴとフッターを中央揃え */
footer { text-align: center; }
.footer-organizations { justify-content: center; }
.footer-organizations .ncnp-logo { width: 320px; max-width: 100%; height: auto; }

footer .footer-description { font-size: .75rem; color: #888; }

/* フッターをゆったり読める余白 */
footer { padding-block: 56px 64px; }
footer .footer-organizations { margin-bottom: 40px; }
footer .footer-description { max-width: 480px; margin: 0 auto; }
footer > a[href="privacy.html"] { display: inline-block; margin-block: 32px; font-size: .75rem; }
footer > p:last-child { margin: 0; }
@media (min-width: 768px) {
  footer { padding-block: 72px 80px; }
  footer .footer-organizations { margin-bottom: 48px; }
  footer > a[href="privacy.html"] { margin-block: 40px; }
}

/* 運営団体のロゴリンク */
.footer-organizations a { display: block; max-width: 100%; }
.footer-organizations .city-logo-link { width: 220px; }
.footer-organizations .ncnp-logo-link { width: 320px; }
.footer-organizations a img { display: block; }

/* PCヘッダー：左にロゴ、右にナビゲーション */
@media (min-width: 1024px) {
  .site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: calc(100% - 48px); max-width: none; padding-block: 20px; }
  .site-header .brand { flex: 0 0 140px; margin: 0; padding: 0; }
  .site-header .brand img { width: 140px; }
  .site-header nav { justify-content: flex-end; align-items: center; gap: 8px 16px; margin-left: auto; }
  .site-header nav a { font-size: .875rem; white-space: nowrap; }
  .site-header nav a[href="contact.html"] { padding: 10px 18px; border-radius: 999px; background: #697f55; color: #fff; font-weight: 700; text-decoration: none; }
  .site-header nav a[href="contact.html"]:hover { background: #526642; }
}
@media (min-width: 1280px) {
  .site-header nav { column-gap: 28px; }
  .site-header nav a { font-size: 1rem; }
}

/* メニューリンクは全画面幅で下線なし・太字 */
.site-header nav a { text-decoration: none; font-weight: 700; }

/* 外部サービスの埋め込み */
.access-map { overflow: hidden; border-radius: 8px; }
.access-map iframe { display: block; width: 100%; height: 400px; }
#wufoo-q1rhl4qx175odxo { width: 100%; max-width: 800px; margin-inline: auto; }
#wufoo-q1rhl4qx175odxo iframe { display: block; width: 100%; max-width: 100%; }

/* PCは地図と館内案内図の2段に説明文を揃える */
.access-layout { display: grid; gap: 24px; }
.access-layout > * { min-width: 0; }
.access-layout .library-map { margin: 0; }
.access-directions h3 { margin-top: 0; }
.access-directions p { margin-bottom: 0; }
@media (min-width: 1024px) {
  .access-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; grid-template-areas: "details map" "directions plan"; align-items: start; }
  .access-details { grid-area: details; }
  .access-directions { grid-area: directions; }
  .access-layout .access-map { grid-area: map; }
  .access-layout .library-map { grid-area: plan; }
}

/* ホームのヒーロー：写真、白いぼかし、円形の案内 */
.home-main { width: 100%; max-width: none; }
.home-main > section:not(.hero) { width: calc(100% - 32px); max-width: 1100px; margin-inline: auto; }
.home-main > .hero { display: block; position: relative; isolation: isolate; overflow: hidden; padding: 24px 16px; color: #463322; }
.hero::before { content: ""; position: absolute; z-index: -2; inset: -10px; background: url("../images/hero-books.jpeg") center bottom / cover no-repeat; filter: blur(3px); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgb(255 255 255 / 42%); }
.hero-inner { display: grid; align-items: center; gap: 24px; max-width: 1680px; margin-inline: auto; }
.hero-circle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; max-width: 560px; aspect-ratio: 1; margin-inline: auto; padding: 40px 24px; border-radius: 50%; background: rgb(255 255 255 / 85%); text-align: center; }
.hero-circle h1 { width: 86%; margin: 0; line-height: 1; }
.hero-circle h1 img { display: block; width: 90%; height: auto; margin-inline: auto; }
.hero-message { margin: 0; font-size: clamp(.875rem, 1.3vw, 1.25rem); line-height: 1.9; font-weight: 700; }
.hero-circle .hero-booking { display: inline-flex; gap: 12px; width: 85%; padding: 12px 16px; border: 0; border-radius: 999px; background: #697f55; color: #fff; font-weight: 700; text-decoration: none; }
.hero-circle .hero-booking:hover { background: #526642; }
.hero-characters { width: 100%; max-width: 600px; justify-self: center; align-self: end; }
@media (min-width: 768px) {
  .home-main > section:not(.hero) { width: calc(100% - 64px); }
  .home-main > .hero { padding: 24px; }
  .hero-inner { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 24px; }
  .hero-circle { gap: 24px; padding: 44px 28px; }
  .hero-characters { max-width: none; margin-bottom: 12px; }
}
@media (min-width: 1280px) {
  .home-main > .hero { padding: 24px 40px; }
  .hero-circle { max-width: 640px; gap: 36px; padding: 64px 48px; }
  .hero-circle .hero-booking { font-size: 1.375rem; }
}

/* お問い合わせ方法の3つの案内 */
.contact-options { color: #463322; }
.contact-options > h1 { margin: 0 0 48px; text-align: center; }
.contact-cards { align-items: stretch; }
.contact-card { display: grid; grid-template-rows: auto 250px 1fr; min-width: 0; padding: 28px 20px 36px; border: 1px solid #cddbb5; border-radius: 28px; }
.contact-card h2 { margin: 0; min-height: 72px; display: flex; align-items: flex-start; justify-content: center; text-align: center; font-size: 1.375rem; font-weight: 400; }
.contact-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-width: 0; }
.contact-visual img { display: block; height: auto; }
.contact-visual .line-image { width: 145px; }
.contact-placeholder-note { font-size: .875rem; }
.contact-form-image { display: block; width: 160px; max-width: 100%; }
.contact-phone { margin: 0; padding: 10px 16px; max-width: 100%; border-radius: 999px; background: #c6d39e; color: #463322; font-size: clamp(1.25rem, 2vw, 1.75rem); white-space: nowrap; }
.contact-phone-icon { margin-top: 12px; color: #a3b578; font-size: 76px; }
.contact-card ul { margin: 28px 0 0; padding-left: 1.25em; }
.contact-card li { padding-left: 4px; }
.contact-card li + li { margin-top: 20px; }
.contact-card li::marker { color: #697f55; }
@media (min-width: 1024px) {
  .contact-options > h1 { margin-bottom: 64px; }
  .contact-card { padding-block: 32px 48px; }
}

/* 下層ページの全幅ヒーロー画像 */
.subpage-hero { width: 100%; }
.subpage-hero img { display: block; width: 100%; height: auto; }

/* プライバシーポリシーのお問い合わせボタン */
.policy-contact-button, .policy-contact-button:visited { min-width: min(100%, 280px); padding: 12px 24px; border: 0; border-radius: 999px; background: #697f55; color: #fff; font-weight: 700; text-decoration: none; }
.policy-contact-button:hover { background: #526642; }

/* 全幅の固定ヘッダーとアンカー位置の補正 */
html { scroll-padding-top: var(--header-offset, 160px); }
.site-header { position: sticky; top: 0; z-index: 100; width: 100%; max-width: none; padding-inline: 16px; background: #fff; }
.skip-link { position: fixed; z-index: 110; }
@media (min-width: 768px) { .site-header { padding-inline: 32px; } }
@media (min-width: 1024px) { .site-header { width: 100%; padding-inline: 24px; } }
@media (max-width: 1023.98px) {
  .site-header.has-menu { max-height: 100dvh; overflow-y: auto; }
}

/* ロゴの描画部分をメニューの中央に揃える */
@media (min-width: 1024px) {
  .site-header .brand { flex-basis: 190px; align-self: center; }
  .site-header .brand img { width: 190px; }
}

/* 公式ロゴとセージグリーン・ダークブラウンの統一 */
.site-header nav a, .site-header nav a:visited { color: #463322; }
@media (min-width: 1024px) {
 .site-header nav a[href="contact.html"], .site-header nav a[href="contact.html"]:visited { color: #fff; }
}
.hero::before { background-image: linear-gradient(to bottom, #adb99b 0%, #adb99b 35%, transparent 70%), url("../images/hero-books.jpeg"); background-blend-mode: color; }
.intro-photo img { filter: saturate(.65); }
.line-add-button { display: inline-block; max-width: 100%; }
.line-add-button img { display: block; width: auto; height: 36px; max-width: 100%; border: 0; }

/* LINE公式QRコード */
.contact-visual .line-qr { width: 180px; height: 180px; max-width: 100%; object-fit: contain; }

/* 提供イラストの余白を表示範囲で調整 */
.provided-art { display:block; position:relative; overflow:hidden; margin:24px auto 0; max-width:100%; }
.provided-art img { position:absolute; max-width:none; height:auto; display:block; }
.art-flow-thinking { aspect-ratio:510 / 910; width:150px; }
.art-flow-thinking img { width:268.0392156862745%; left:-74.50980392156863%; top:-49.45054945054945%; }
.art-flow-support-new { aspect-ratio:800 / 1190; width:150px; }
.art-flow-support-new img { width:170.875%; left:-32.5%; top:-37.81512605042017%; }
.art-flow-talk { aspect-ratio:880 / 585; width:250px; }
.art-flow-talk img { width:155.3409090909091%; left:-19.886363636363637%; top:-108.54700854700855%; }
.art-contact-question { aspect-ratio:620 / 1000; width:140px; }
.art-contact-question img { width:220.48387096774195%; left:-93.54838709677419%; top:-21%; }
.art-faq-confidential { aspect-ratio:445 / 680; width:110px; }
.art-faq-confidential img { width:307.19101123595505%; left:-95.50561797752809%; top:-86.02941176470588%; }
.contact-form-image.provided-art { margin:0; }

#flow .flow-question-art { width: 166px; }