/* Coworking Space KLATCH Ishigaki（workation-lab.com）
   色は WordPress の頃の青い帯（Lightning の #337ab7）と、文字の下の黄色を引き継いでいる */
:root {
  --blue: #2f6fa8;
  --blue-deep: #1f4f7a;
  --blue-soft: #eaf2f9;
  --yellow: #fcb900;
  --yellow-soft: #fff6d6;
  --ink: #22262a;
  --sub: #5c6670;
  --line: #e1e5e9;
  --soft: #f5f7f8;
  --white: #fff;
  --radius: 10px;
  --wrap: 1040px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  color: var(--ink);
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--white); font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
a:hover { color: var(--blue-deep); }
/* 数値の入力に上下の矢印を出さない（全アプリ共通の約束） */
input[type=number] { appearance: none; -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ヘッダー */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo img { height: 44px; width: auto; }
.gnav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.gnav > ul > li { position: relative; }
.gnav a { display: block; padding: 10px 12px; color: var(--ink); text-decoration: none; font-size: 15px; border-radius: 8px; }
.gnav > ul > li.on > a, .gnav a:hover { color: var(--blue); background: var(--blue-soft); }
.gnav .sub { display: none; position: absolute; left: 0; top: 100%; flex-direction: column; min-width: 220px; padding: 8px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.gnav .has-sub:hover .sub, .gnav .has-sub:focus-within .sub { display: flex; }
.mnav { display: none; }
.mnav summary { list-style: none; cursor: pointer; padding: 8px; color: var(--ink); }
.mnav summary::-webkit-details-marker { display: none; }
.mnav nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .08); padding: 8px 20px 16px; }
.mnav ul { list-style: none; margin: 0; padding: 0; }
.mnav li a { display: block; padding: 12px 4px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.mnav .sub li a { padding-left: 20px; font-size: 15px; color: var(--sub); }
@media (max-width: 860px) {
  .gnav { display: none; }
  .mnav { display: block; }
  .logo img { height: 38px; }
}

/* 青い帯（ページの名前） */
.band { background: var(--blue); color: var(--white); }
.band .wrap { padding-top: 34px; padding-bottom: 34px; }
body[data-page^="post-"] .band .wrap { padding-top: 16px; padding-bottom: 16px; }
.band-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: .04em; text-align: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; padding-bottom: 10px; font-size: 13px; color: var(--sub); }
.crumbs a { color: var(--sub); }

/* 本文 */
.content { padding-top: 24px; padding-bottom: 64px; }
.home { padding-bottom: 64px; }
.home > :not(.hero) { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
/* トップの見出しは、本文と同じ端にそろえる（上の 1 行の余白をそのまま使うと、背景だけが左右にはみ出す） */
.home > .h2, .home > .h3 { box-sizing: border-box; width: calc(100% - 40px); max-width: calc(var(--wrap) - 40px); padding-left: 16px; padding-right: 16px; }
.h2 { font-size: 24px; line-height: 1.5; margin: 48px 0 18px; padding: 12px 16px; background: var(--soft); border-left: 5px solid var(--blue); border-radius: 6px; }
@media (max-width: 640px) { .h2 { font-size: 20px; padding: 10px 14px; margin-top: 36px; } }
.h3 { font-size: 19px; line-height: 1.5; margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.content > .h2:first-child, .content > .h3:first-child { margin-top: 8px; }
.text { margin: 0 0 14px; }
.text strong, .list strong, .faq strong { background: linear-gradient(transparent 62%, var(--yellow-soft) 0); }
.list { margin: 0 0 18px; padding-left: 1.4em; }
.list li { margin: 4px 0; }
/* 写真。画面いっぱいに広げず、ふつうのホームページくらいの大きさにする（2026-11-15 宮井）。
   1 枚だけの写真は、PC で縮めなくても 1 枚が画面に収まる大きさ。続けて置いた写真は 2 枚ずつ横に並べる */
.figure { margin: 20px 0 24px; }
.figure img { border-radius: var(--radius); margin: 0 auto; }
/* 大きさの上限は app/content.py の FIT_PAGE・FIT_POST が <img> の width・height に書く。ここでは画面が狭い時に縮めるだけ */
.figure-one img { max-width: 100%; height: auto; }
.photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 28px; }
.photos .figure { margin: 0; }
.photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 40%), 1fr)); gap: 10px; margin: 12px 0 28px; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
@media (max-width: 640px) { .photos, .gallery { gap: 8px; } }
/* 押すと大きく見られる写真（site/site.js） */
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; }
.zoom img { transition: opacity .15s; }
.zoom:hover img { opacity: .88; }
.zoom:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.lb-on { overflow: hidden; }
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; display: none; place-items: center; }
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(10, 14, 18, .9); }
.lightbox img { max-width: calc(100vw - 32px); max-height: calc(100dvh - 120px); width: auto; height: auto; border-radius: 6px; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: var(--white); cursor: pointer; }
.lightbox button:hover { background: rgba(255, 255, 255, .26); }
.lightbox button[hidden] { display: none; }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; color: #d9e0e6; font-size: 14px; }
@media (max-width: 640px) {
  .lb-prev, .lb-next { top: auto; bottom: 8px; transform: none; }
  .lb-count { bottom: 22px; }
}
.note { font-size: 14px; color: var(--sub); margin: 8px 0 0; }

/* 表（料金・企業概要）。列の多い表は折り返さず横に流す */
.table { margin: 16px 0 24px; }
.table-scroll { overflow-x: auto; }
.table table { width: 100%; border-collapse: collapse; background: var(--white); }
.table th, .table td { border: 1px solid var(--line); padding: 12px 14px; text-align: center; vertical-align: middle; }
.table thead th { background: var(--blue-soft); color: var(--blue-deep); font-weight: 600; }
.table tbody th { background: var(--soft); font-weight: 600; white-space: nowrap; }
.table td { font-size: 17px; }
@media (max-width: 640px) {
  .table th, .table td { padding: 10px 6px; font-size: 14px; }
  .table tbody th { font-size: 13px; }
}

/* 説明のカード（オプションなど） */
.cards { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--white); }
.card-title { margin: 0 0 4px; font-weight: 700; color: var(--blue-deep); }
.card-text { margin: 0; font-size: 15px; color: var(--sub); }
/* 目立たせるカード（KLATCH COFFEE の半額など）。2 列ぶんの幅をとり、黄色の下地にする */
.card-accent { grid-column: span 2; background: var(--yellow-soft); border: 2px solid var(--yellow); }
.card-accent .card-title { font-size: 18px; color: var(--ink); }
.card-accent .card-text { color: var(--ink); }
@media (max-width: 520px) { .card-accent { grid-column: auto; } }

/* 登記企業の一覧（site.companies） */
.companies { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.company { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.company > a { flex: none; width: 96px; height: 56px; display: grid; place-items: center; }
.company img { max-width: 96px; max-height: 56px; width: auto; }
.company-name { margin: 0; font-weight: 700; }
.company-text { margin: 4px 0 0; font-size: 15px; color: var(--sub); }

/* 手順 */
.steps { list-style: none; margin: 12px 0 24px; padding: 0; counter-reset: none; }
.step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.step-n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: var(--white); display: grid; place-items: center; font-weight: 700; }
.step-title { margin: 2px 0 2px; font-weight: 700; }
.step-text { margin: 0; color: var(--sub); }

/* よくある質問。質問を押すと答えが開く（開け閉めは site/site.js。JS が無ければ全部開いたまま） */
.faq { margin: 0 0 24px; }
.faq-q { position: relative; margin: 10px 0 0; padding: 12px 14px 12px 46px; background: var(--soft); border-radius: var(--radius) var(--radius) 0 0; font-weight: 700; }
.faq-q::before { content: "Q"; position: absolute; left: 14px; top: 11px; color: var(--blue); font-weight: 800; }
.faq-q > svg { display: none; }
.faq-a { position: relative; margin: 0; padding: 12px 14px 14px 46px; border: 1px solid var(--soft); border-top: none; border-radius: 0 0 var(--radius) var(--radius); }
.faq-a::before { content: "A"; position: absolute; left: 14px; top: 11px; color: var(--yellow); font-weight: 800; }
.faq-js .faq-q { padding-right: 46px; border-radius: var(--radius); cursor: pointer; transition: background .15s; }
.faq-js .faq-q:hover { background: var(--blue-soft); }
.faq-js .faq-q:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.faq-js .faq-q > svg { display: block; position: absolute; right: 14px; top: 14px; color: var(--blue); transition: transform .2s; }
.faq-js .faq-q.open { border-radius: var(--radius) var(--radius) 0 0; }
.faq-js .faq-q.open > svg { transform: rotate(180deg); }
.faq-js .faq-a { display: none; }
.faq-js .faq-q.open + .faq-a { display: block; }
.faq-off, .faq-js .faq-off, .faq-js .faq-q.open + .faq-a.faq-off { display: none; }
/* よくある質問の検索 */
.faq-search { margin: 8px 0 28px; padding: 18px; background: var(--blue-soft); border-radius: 14px; }
.faq-box { display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--white); border: 2px solid var(--blue); border-radius: 999px; color: var(--blue); }
.faq-box input { flex: 1; min-width: 0; min-height: 50px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.faq-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.faq-word { min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.faq-word:hover { border-color: var(--blue); color: var(--blue); }
.faq-word[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.faq-count { margin: 12px 0 0; font-size: 14px; color: var(--blue-deep); font-weight: 600; }
.faq-count:empty { display: none; }
.faq-none { margin: 10px 0 0; font-size: 15px; }

/* ボタン */
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border-radius: 999px; background: var(--blue); color: var(--white);
  text-decoration: none; font-weight: 600; }
.btn:hover { background: var(--blue-deep); color: var(--white); }

/* 料金のページの入口（choices）。絵と短い説明を付けたカードを並べる */
.choices { list-style: none; margin: 20px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.choice { display: flex; align-items: center; gap: 16px; height: 100%; box-sizing: border-box; padding: 20px; background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; color: var(--ink); text-decoration: none; box-shadow: 0 2px 8px rgba(31, 79, 122, .06); transition: border-color .15s, box-shadow .15s, transform .15s; }
.choice:hover { border-color: var(--blue); box-shadow: 0 8px 22px rgba(31, 79, 122, .14); transform: translateY(-2px); color: var(--ink); }
.choice:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.choice-icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--blue-soft); color: var(--blue); }
.choice-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.choice-title { font-size: 18px; font-weight: 700; color: var(--blue-deep); }
.choice-text { font-size: 14px; line-height: 1.6; color: var(--sub); word-break: keep-all; overflow-wrap: anywhere; }
.choice-go { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--soft); color: var(--blue); transition: background .15s, color .15s; }
.choice:hover .choice-go { background: var(--blue); color: var(--white); }
@media (prefers-reduced-motion: reduce) { .choice, .choice:hover { transition: none; transform: none; } }
@media (max-width: 640px) {
  .choices { grid-template-columns: 1fr; gap: 10px; }
  .choice { padding: 14px 16px; gap: 14px; }
  .choice-icon { width: 40px; height: 40px; border-radius: 12px; }
  .choice-icon svg { width: 22px; height: 22px; }
  /* カード全体が押せるので、スマホでは右の矢印を出さずに文字の幅をとる */
  .choice-go { display: none; }
}

/* トップ */
.hero { position: relative; overflow: hidden; background: var(--ink); }
.hero-imgs { position: relative; aspect-ratio: 16 / 7; max-height: 72vh; width: 100%; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: hero-fade calc(var(--n) * 6s) infinite; }
.hero-img:nth-child(1) { opacity: 1; animation-delay: 0s; }
.hero-img:nth-child(2) { animation-delay: 6s; }
.hero-img:nth-child(3) { animation-delay: 12s; }
.hero-img:nth-child(4) { animation-delay: 18s; }
.hero-img:nth-child(5) { animation-delay: 24s; }
@keyframes hero-fade { 0% { opacity: 0; } 4% { opacity: 1; } 20% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-img { animation: none; } .hero-img:not(:first-child) { display: none; } }
.hero-title { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 20px 28px; text-align: center; color: var(--white);
  font-size: clamp(22px, 4vw, 36px); line-height: 1.4; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
@media (max-width: 640px) { .hero-imgs { aspect-ratio: 4 / 3; } }

.news-box .h2 { margin-top: 32px; }
.news { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.news li { border-bottom: 1px solid var(--line); }
.news a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 14px 4px; color: var(--ink); text-decoration: none; }
.news a:hover .news-title { color: var(--blue); text-decoration: underline; }
.news time { color: var(--sub); font-size: 14px; min-width: 8em; }
.new { font-size: 12px; font-weight: 700; color: var(--white); background: #d33b3b; border-radius: 4px; padding: 0 6px; }
.more { text-align: right; margin: 10px 0 0; }

/* 運営メンバー（2026-11-15 宮井）。PC は縦長の写真を横に並べ、1 人だけが広がって名前と紹介文を出す。
   広がる人はホバー・タブ・タップで替わる（site/site.js）。スマホは横にスワイプするカード */
.team { margin: 20px 0 32px; }
.members { position: relative; list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; height: 380px; }
.member { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 28px; background: var(--soft); cursor: pointer;
  transition: flex-grow .5s cubic-bezier(.3, .7, .2, 1); }
.member.on { flex-grow: var(--grow, 4.2); cursor: default; }
.member:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.member img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .4s; }
.member:not(.on) img { filter: saturate(.75) brightness(.92); }
.member-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 110px 30px 30px; color: var(--white); text-align: left;
  background: linear-gradient(transparent, rgba(12, 20, 28, .55) 30%, rgba(12, 20, 28, .85)); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.member.on .member-info { opacity: 1; visibility: visible; transition: opacity .35s .25s, visibility 0s; }
.member-name { margin: 0 0 6px; font-size: 20px; font-weight: 700; white-space: nowrap; }
.member-text { margin: 0; font-size: 14px; line-height: 1.7; text-align: left; }
.member-text a { color: var(--white); }
.team-dots, .team-bio { display: none; }
/* JS が動く PC では、写真の上には名前だけを出し、紹介文は並びの下に出す（長い紹介文で顔が隠れないように） */
@media (min-width: 768px) {
  .team.js .member-text { display: none; }
  .team.js .member-info { padding-top: 70px; padding-bottom: 20px; background: linear-gradient(transparent, rgba(12, 20, 28, .7)); }
  .team.js .member-name { margin: 0; }
  .team.js .team-bio { display: block; margin: 16px 4px 0; font-size: 15px; line-height: 1.8; color: var(--sub); transition: opacity .25s; }
  .team-bio .member-name-bio { margin: 0 0 4px; font-weight: 700; color: var(--ink); }
  .team-bio p { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .member, .member-info, .member.on .member-info { transition: none; } }
@media (max-width: 767px) {
  /* 横にスワイプ。次の人のカードが少し見えるようにして、横に動かせることを伝える */
  .members { height: auto; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 4px; }
  .members::-webkit-scrollbar { display: none; }
  .member, .member.on { flex: 0 0 82%; border-radius: 20px; scroll-snap-align: center; cursor: auto; background: var(--white); border: 1px solid var(--line); }
  .member img, .member:not(.on) img { position: static; height: auto; aspect-ratio: 4 / 3; filter: none; }
  .member-info, .member.on .member-info { position: static; opacity: 1; visibility: visible; padding: 14px 18px 18px; color: var(--ink); background: none; text-align: left; transition: none; }
  .member-name { font-size: 17px; white-space: normal; }
  .member-text { color: var(--sub); }
  .member-text a { color: var(--blue); }
  .team-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .team-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .2s, width .2s; }
  .team-dots span.on { width: 22px; border-radius: 4px; background: var(--blue); }
}

/* 記事 */
.post-date { margin: 8px 0 0; color: var(--sub); font-size: 14px; }
.post-title { font-size: 26px; line-height: 1.5; margin: 4px 0 24px; }

.stripe { margin: 16px 0 24px; min-height: 200px; }

/* フッター */
.site-footer { background: #1d2a36; color: #d9e0e6; margin-top: 0; }
.site-footer a { color: #d9e0e6; }
.f-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; padding-top: 44px; padding-bottom: 28px; }
.f-col p { margin: 0 0 10px; font-size: 14px; }
.f-about img { width: 88px; border-radius: 8px; margin-bottom: 10px; }
.f-name { font-weight: 700; color: var(--white); }
.f-title { font-weight: 700; color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, .2); padding-bottom: 6px; }
.f-facts { list-style: none; margin: 0 0 12px; padding: 0; font-size: 14px; }
.f-sns { display: flex; gap: 10px; }
.f-sns a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.f-sns a:hover { background: rgba(255, 255, 255, .22); }
.f-logos { display: flex; flex-wrap: wrap; gap: 10px; }
.f-logos a { background: var(--white); border-radius: 8px; padding: 6px; display: grid; place-items: center; width: 92px; height: 92px; }
.f-logos img { max-height: 80px; width: auto; }
/* 登記企業のロゴは、その他サービスより小さく（2026-11-15 宮井） */
.f-logos-companies a { width: 92px; height: 52px; padding: 4px 6px; box-sizing: border-box; }
.f-logos-companies img { max-height: 44px; max-width: 80px; }
.f-more { margin-top: 10px; }
.f-shops { list-style: none; margin: 0 0 10px; padding: 0; font-size: 14px; }
.f-shops li { margin: 0 0 6px; }
.f-shop { font-weight: 700; color: var(--white); margin-right: 8px; }
.f-when { display: inline-block; }
.f-links ul { list-style: none; margin: 0; padding: 0; columns: 2; font-size: 14px; }
.f-links li { margin: 0 0 6px; break-inside: avoid; }
.copy { text-align: center; font-size: 12px; color: #9fb0bf; margin: 0; padding: 14px 20px 22px; border-top: 1px solid rgba(255, 255, 255, .08); }

/* ---- 2026-11-15 レビュー 1 周目（見にくい所の直し） ---- */
/* 1 行に 60 字を超えると読み疲れる。PC の本文の行の長さを抑える（見出し・表・カード・写真は今の幅のまま） */
.content .text, .content > .list, .home > .text, .home > .list, .post .text, .post > .list { max-width: 46em; }
/* 文の最後の 1、2 文字だけが次の行に落ちないように。見出しは行の長さをそろえる */
.text, .list li, .card-text, .step-text, .note, .faq-a, .member-text, .choice-text, .news-title { text-wrap: pretty; }
.h2, .h3, .band-title, .card-title, .step-title, .faq-q, .choice-title, .hero-title, .post-title { text-wrap: balance; word-break: auto-phrase; }
/* 長い URL や英字が画面の外へはみ出さないように（スマホで横にはみ出していた） */
.text, .list li, .faq-a, .card-text, .table td { overflow-wrap: anywhere; }
/* 箇条: 1 行目が項目名なら太字の見出し、「・」の行は小さな箇条 */
.list .li-head { display: block; font-weight: 700; color: var(--blue-deep); }
.list > li + li { margin-top: 10px; }
.list .sub { margin: 4px 0 2px; padding-left: 1.2em; list-style: disc; }
.list .sub li { margin: 2px 0; }
/* 2 列の情報の表（住所など）は値を左寄せ。料金の表（3 列以上）は今のまま中央 */
.table tbody tr > th[scope="row"]:first-child + td:last-child { text-align: left; }
.table thead th { word-break: keep-all; }
.table .per { white-space: nowrap; }
@media (max-width: 640px) {
  .table tbody th { padding: 10px; }
  .table .per { display: block; font-size: 12px; color: var(--sub); }
}
/* 公式 LINE へのボタンは LINE の緑とアイコン。スマホではボタンを幅いっぱいに */
.btn { gap: 8px; }
.btn-line { background: #06c755; }
.btn-line:hover { background: #05a648; }
@media (max-width: 640px) { .btns .btn { width: 100%; } }
/* 図（間取り図）は写真より広く出す。1 枚だけの写真は、押すと大きく見られる印を右下に */
.figure-one .zoom { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.figure-one .zoom::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(20, 28, 36, .62) center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E"); }
/* 一番上の大きな見出しは、スマホでだけ「石垣島最大級の / コワーキングスペース」で折る */
@media (min-width: 641px) { .hero-title br { display: none; } }
/* ページの名前（青い帯）をスマホで 1 行に収めやすく */
@media (max-width: 640px) { .band-title { font-size: clamp(21px, 6.2vw, 28px); letter-spacing: .02em; } }
/* よくある質問をスマホで少し広く */
@media (max-width: 640px) { .faq-js .faq-q { padding-left: 40px; padding-right: 40px; } .faq-q::before { left: 12px; } }
/* お知らせの記事: スマホではパンくずに題名を繰り返さない（すぐ下に題名がある） */
@media (max-width: 640px) { body[data-page^="post-"] .crumbs > :nth-last-child(-n+2) { display: none; } }
/* 運営メンバー: スマホのカードは中身の高さで（短い紹介文の人に大きな空白が出ていた） */
@media (max-width: 767px) { .members { align-items: flex-start; } }
/* フッター: リンクを単語の途中で折らない。「登記企業の一覧」をロゴから離す */
.f-links li { white-space: nowrap; }
.f-col .f-more { margin-top: 12px; }
@media (min-width: 861px) {
  .f-links ul { columns: 1; }
  .f-logos a { width: 64px; height: 64px; padding: 5px; }
  .f-logos img { max-height: 54px; }
  .f-logos-companies a { width: 88px; height: 50px; }
}
@media (max-width: 640px) { .f-links ul { column-gap: 12px; font-size: 13px; } }

/* ---- 2026-11-15 レビュー 2 周目 ---- */
/* 1 周目で崩れたもの: 虫眼鏡の印が写真の中の文字（注意書き・QR・タブ）を隠していた。ホバーできる端末で、乗せた時だけ出す */
.figure-one .zoom::after { opacity: 0; transition: opacity .15s; }
@media (hover: hover) { .figure-one .zoom:hover::after, .figure-one .zoom:focus-visible::after { opacity: 1; } }
/* 1 周目で崩れたもの: トップの本文が中央に寄っていた（トップの中央寄せと 1 行の長さの上限がぶつかった）。見出しと同じ左の端にそろえる */
.home > .text, .home > .list { margin-left: max(0px, calc((100% - var(--wrap)) / 2)); margin-right: auto; }
/* 1 行の長さの上限を、手順の文・メンバーの紹介文・表の下の注意書きにも */
.step-text, .team.js .team-bio, .content > .note, .table .note { max-width: 46em; }
/* 1 周目で崩れたもの: スマホで料金の単位を次の行にした時、元の改行と重なって空の行ができていた */
@media (max-width: 640px) { .table .per + br { display: none; } }
/* 1 周目で崩れたもの: 白い文字に LINE の明るい緑では読みにくい。少し濃い緑と太字に */
.btn-line { background: #05a648; font-weight: 700; }
.btn-line:hover { background: #048a3c; }
/* 箇条の中の小見出し（■）と注意書き（※・（）） */
.list .li-subhead { display: block; margin-top: 10px; font-weight: 700; }
.list .li-note { display: block; margin: 2px 0 4px; font-size: 14px; color: var(--sub); }
.list .sub { list-style: circle; padding-left: 1.5em; }
/* 運営メンバーの細い柱では名前を小さく（切れて見えないように） */
.team.js .member:not(.on) .member-info { padding-left: 10px; padding-right: 10px; }
.team.js .member:not(.on) .member-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
/* よくある質問の矢印を、質問の 1 行目の高さにそろえる */
.faq-js .faq-q > svg { top: 15px; }
/* お知らせの一覧: 押せることが分かるように、題名の色と右の矢印 */
.news-title { color: var(--blue-deep); font-feature-settings: "palt"; }
.news a { position: relative; padding-right: 30px; }
.news a::after { content: ""; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: .55;
  background: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.post-title { font-feature-settings: "palt"; }
@media (max-width: 640px) {
  /* スマホ: 何の場所かが早く分かるよう、トップのお知らせは 3 件まで（一覧は「お知らせをすべて見る」から） */
  .home .news li:nth-child(n+4) { display: none; }
  .post-title { font-size: 22px; line-height: 1.45; }
  .cards { gap: 8px; }
  .card { padding: 12px 14px; }
  /* フッター: リンクを押しやすく、全体を少し詰める */
  .f-links ul { font-size: 14px; }
  .f-links li { margin: 0; }
  .f-links a { display: inline-block; padding: 7px 0; }
  .f-grid { gap: 20px; padding-top: 32px; }
  .f-about img { width: 64px; }
}

/* ---- 2026-11-15 レビュー 3 周目 ---- */
/* 行の頭に「ー」や小さい「ィ」「ョ」を置かない（バーチャルオフ／ィス・ワーケーシ／ョン） */
body { line-break: strict; }
/* 箇条・カード・表・お知らせの題も文節で折る（Chrome。Safari は今まで通り） */
.list li, .step-text, .card-text, .table td, .news-title { word-break: auto-phrase; }
/* カードの題は空白の所で折る（「郵便物転送 週／1回アップグレード」） */
.card-title { word-break: keep-all; overflow-wrap: anywhere; }
/* 文の中の「・」「※」の行は、折り返した 2 行目を記号の下に入れない */
.text .hang { display: block; padding-left: 1em; text-indent: -1em; }
/* 箇条の注意書きは、上の小さな箇条の文字の位置にそろえる（箇条が途中で切れて見えないように） */
.list .li-note.in { padding-left: 1.5em; }
/* 見出しのある箇条（シェアキッチンの利用方法など）は、まとまりの間を空ける */
.list > li:has(> .li-head) + li:has(> .li-head) { margin-top: 18px; }
/* スマホでも料金の入口に「押せる」印を小さく残す */
@media (max-width: 640px) { .choice-go { display: grid; width: 28px; height: 28px; } .choice-go svg { width: 16px; height: 16px; } }
/* スマホのフッターの 2 列が 1 本のリンクに見えないよう、文字を少し小さくして列の間を空ける */
@media (max-width: 640px) { .f-links ul { font-size: 13px; column-gap: 16px; } }
/* PC のオプションのカードは 3 列（4 列だと 1〜2 文字だけ次の行に落ちる） */
.cards { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
/* PC の館内の写真は 3 列（4 列だと 1 枚が小さすぎる） */
@media (min-width: 861px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
/* よくある質問は、質問の行を白にして分類の見出し（灰色の帯）と見分ける */
.faq-q { background: var(--white); border: 1px solid var(--line); }
.faq-a { border-color: var(--line); }
/* リンクの下線が「_」に重ならないよう少し下げる（@imaiyu__hinaran） */
.content a, .post a { text-underline-offset: .22em; }
/* 縦長の画面写真は枠で囲み、スマホでは幅を抑える（白い所が空白に見えないように） */
.figure-tall img { border: 1px solid var(--line); }
@media (max-width: 640px) { .figure-tall .zoom { max-width: 72%; } }
/* 5 列の表（間取り図の凡例）はスマホで行の名前を折り返し、全部の列を画面に収める */
@media (max-width: 640px) {
  .table table:has(thead th:nth-child(5)) :is(th, td) { padding: 8px 4px; font-size: 13px; }
  .table table:has(thead th:nth-child(5)) tbody th { white-space: normal; }
}