/* 元画像 design/landing-concept.png の構図に合わせたLP専用スタイル。 */
:root { --page:#faf9f6; --ink:#142624; --brand:#087d7e; --brand-dark:#076e6e; }
body { font-family:'Yu Mincho','YuMincho','Hiragino Mincho ProN',serif; }
.wrap { width:calc(100% - 80px); max-width:1200px; }
h1,h2,h3 { font-weight:500; }
.eyebrow { color:var(--brand); font-family:Georgia,serif; font-size:11px; letter-spacing:.2em; line-height:1.5; }
.bar { background:var(--page); border:0; position:relative; }
.bar .wrap { min-height:60px; }
.brand { gap:12px; }
.name { font-family:inherit; font-size:23px; letter-spacing:.12em; }
.name small { font-family:Georgia,serif; font-size:8px; letter-spacing:.16em; color:var(--brand-dark); }
nav,.button,.header-contact { font-family:'Hiragino Sans','Yu Gothic',sans-serif; }
nav { font-size:12px; gap:26px; }
.header-contact { border-radius:100px; background:var(--brand); color:#fff; box-shadow:0 3px 8px #153b3420; }
.header-contact:hover { background:var(--brand-dark); }
.button { border-radius:100px; gap:15px; }
.hero { width:100%; max-width:1280px; padding:0 0 0 48px; grid-template-columns:minmax(0,37fr) minmax(0,63fr); gap:0; align-items:start; }
.hero-copy { min-width:0; padding:70px 30px 0 0; }
.hero-copy>.eyebrow { margin-bottom:20px; }
.hero h1 { font-size:clamp(32px,4.1vw,50px); letter-spacing:-.035em; line-height:1.35; white-space:nowrap; }
.hero-description { font-size:17px; line-height:1.65; margin:26px 0; color:#45514e; }
.hero-description::before { content:''; display:block; width:40px; height:1px; background:#81968e; margin-bottom:24px; }
.hero-actions { display:flex; gap:10px; max-width:420px; }
.hero-actions .button { flex:1; min-height:60px; padding-inline:18px; font-size:15px; }
.hero-actions .button.fill { flex:1.6; box-shadow:0 4px 7px #214c4320; }
.hero-proof { display:flex; align-items:center; gap:22px; margin-top:24px; }
.hero-proof>p { border-left:1px solid #bcc5be; padding-left:22px; font-size:12px; letter-spacing:.1em; color:#717c75; }
.satisfaction { flex-direction:column; align-items:center; justify-content:center; gap:3px; width:96px; height:96px; border:1px solid #d0d5cb; border-radius:50%; margin:0; flex:none; }
.satisfaction>span:first-child { font-size:10px; }
.satisfaction strong { font:36px Georgia,serif; }
.satisfaction strong small { font-size:17px; }
.survey-note { font-size:8px; }
.hero-visual { min-width:0; min-height:0; overflow:visible; border-radius:0; }
.hero-visual img { position:static; width:100%; height:auto; object-fit:contain; border-radius:74px 0 0 0; }
.hero-visual figcaption { padding-top:12px; font-size:10px; color:#778078; letter-spacing:.12em; }
.hero-visual figcaption span { font-family:Georgia,serif; font-size:9px; }
.hero-foot { grid-column:1/-1; display:flex; justify-content:flex-end; padding:0 40px 14px 0; margin-top:-10px; }
.hero-foot p { display:none; }
.hero-foot a { font:10px Georgia,serif; letter-spacing:.12em; text-decoration:none; display:flex; align-items:center; gap:18px; min-height:40px; }
.hero-foot a span { display:block; width:1px; height:27px; background:#8b9990; font-size:0; }
.section { padding:56px 0; }
.section-eyebrow { display:flex; align-items:center; gap:18px; margin-bottom:22px; }
.section-eyebrow::before { content:''; width:40px; height:1px; background:#8b9990; }
.find { background:#f6f5f1; padding-top:50px; }
.find .wrap { width:calc(100% - 68px); }
.section-heading { gap:24px; margin-bottom:26px; }
.section-heading h2 { font-size:clamp(28px,3.8vw,46px); line-height:1.4; letter-spacing:.025em; }
.find .section-heading h2 br { display:none; }
.find .section-heading>p { font-size:13px; white-space:nowrap; }
.room-grid { gap:10px; }
.room-card { position:relative; border:1px solid #dcddd5; border-radius:10px; padding:20px 20px 0; background:#faf9f6; }
.card-top { justify-content:flex-start; gap:20px; }
.card-number { color:#c4c8bb; font-size:57px; line-height:1; letter-spacing:-.04em; }
.tag { background:#e2e7dc; color:#34544b; border-radius:0; padding:2px 10px; font:11px Georgia,serif; letter-spacing:.14em; }
.room-card h3 { font-family:inherit; font-size:clamp(19px,2.1vw,26px); line-height:1.45; margin:16px 6px 18px; letter-spacing:-.05em; }
.wish-photo { width:100%; height:auto; aspect-ratio:273/102; object-fit:cover; margin-bottom:14px; }
.room-card p { font-size:12px; line-height:1.8; margin:0 0 20px; padding-right:38px; }
.card-link { position:absolute; bottom:18px; right:20px; font-size:0; padding:0; border:0; gap:0; }
.card-link>span { display:grid; place-items:center; width:30px; height:30px; font-size:16px; flex:none; border:1px solid #aab9b0; border-radius:50%; }
.cost { background:#097d7e; color:#fff; }
.cost-inner { width:100%; max-width:1280px; display:grid; grid-template-columns:37% 38% 25%; gap:0; padding:0; min-height:205px; }
.cost-art { width:100%; height:100%; object-fit:cover; object-position:right center; }
.cost-copy { border-left:1px solid #95c5bd; padding:0 30px 0 44px; margin:32px 0; }
.cost-copy>p.eyebrow { color:#cee5dd; font-size:10px; margin:0 0 12px; letter-spacing:.18em; }
.cost-copy h2 { font-size:clamp(20px,2.25vw,28px); line-height:1.5; white-space:nowrap; }
.cost-copy h2 span { display:inline-block; }
.cost-copy .answer { color:#eef4ec; font-size:14px; line-height:1.8; margin-top:12px; }
.cost-action { padding:20px 34px 20px 0; }
.cost-action .button { background:var(--page); color:var(--brand-dark); border:0; min-height:56px; padding:14px 20px; width:100%; font-size:13px; white-space:nowrap; gap:10px; }
.cost-action .button:hover { background:#e4ede5; }
.about { padding-top:32px; }
.about-layout { grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.about-copy h2 { font-size:clamp(26px,3.2vw,39px); line-height:1.55; letter-spacing:-.025em; }
.about-copy>p { font-size:14px; line-height:1.9; margin-top:20px; }
.about-copy>.eyebrow { margin:0 0 22px; font-size:10px; }
.about-visual { display:grid; grid-template-columns:minmax(0,3fr) minmax(100px,1fr); gap:26px; }
.about-visual img { width:100%; height:100%; min-height:250px; object-fit:cover; }
.about-visual figcaption { font-size:13px; line-height:2.2; letter-spacing:.08em; padding-top:26px; color:#67746b; }
.about-visual figcaption span { display:block; font:10px/1.6 Georgia,serif; letter-spacing:.14em; margin-top:32px; }
.about-visual figcaption span::before { content:''; display:block; width:36px; height:1px; background:#8b9990; margin-bottom:30px; }
.company-layout { display:grid; grid-template-columns:1fr 1fr; gap:50px; border-top:1px solid var(--line); padding-top:36px; margin-top:44px; align-items:center; }
.company-contact>p { font-size:22px; }
.contact-list { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.contact-list a { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 18px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--brand-dark); font-size:13px; text-decoration:none; transition:background .2s; }
.contact-list a:hover { background:#eef4ef; }
.contact-list span { font-size:15px; overflow-wrap:anywhere; text-align:right; }
.shop { padding:0; border:0; background:none; }
.shop-name { font-family:inherit; font-size:22px; }
.rooms { background:#f3f4ed; }
.rooms .listing { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.rooms .listing .body { padding:18px; }
footer {
  position:relative;
  overflow:hidden;
  border-top:1px solid #e2e5dc;
  background:#f6f5f0;
  color:var(--ink);
  padding:32px 0 22px;
}
footer::before {
  content:'FITROOM';
  position:absolute;
  right:-10px;
  bottom:-20px;
  color:#087d7e06;
  font:72px/1 Georgia,serif;
  letter-spacing:.04em;
  pointer-events:none;
}
footer .wrap {
  position:relative;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:16px 28px;
}
.footer-brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--brand-dark);
  font-family:inherit;
  font-size:17px;
  font-weight:500;
  letter-spacing:.08em;
}
.footer-brand .mark { width:28px; height:24px; }
.footer-brand small {
  display:block;
  margin-top:2px;
  color:#738079;
  font:7.5px/1.4 Georgia,serif;
  letter-spacing:.16em;
}
footer p {
  padding-left:22px;
  border-left:1px solid #d4dad1;
  color:#738079;
  font-size:11.5px;
  letter-spacing:.08em;
  margin:0;
  white-space:nowrap;
}
.footer-sns {
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.footer-sns-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border:1px solid #d4dad1;
  border-radius:999px;
  background:#fff;
  color:#526058;
  text-decoration:none;
  font:500 11.5px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.04em;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.footer-sns-link svg {
  display:block;
  flex-shrink:0;
  transition:transform .2s ease;
}
.footer-sns-link:hover {
  transform:translateY(-1px);
}
.footer-sns-link:hover svg {
  transform:scale(1.08);
}
.footer-sns-line:hover {
  background:#06c755;
  border-color:#06c755;
  color:#fff;
  box-shadow:0 3px 10px rgba(6,199,85,.28);
}
.footer-sns-instagram:hover {
  background:linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 3px 10px rgba(220,39,67,.28);
}
.footer-sns-threads:hover {
  background:#111;
  border-color:#111;
  color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.footer-top {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#63726a;
  font:9px Georgia,serif;
  letter-spacing:.14em;
  white-space:nowrap;
}
.footer-top i {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid #bcc7bf;
  border-radius:50%;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-style:normal;
  transition:background .2s,color .2s,border-color .2s;
}
.footer-top:hover { color:var(--brand-dark); }
.footer-top:hover i { background:var(--brand); border-color:var(--brand); color:#fff; }
footer .wrap>small {
  grid-column:1/-1;
  padding-top:16px;
  border-top:1px solid #e2e5dc;
  color:#8a948e;
  font:8.5px Arial,sans-serif;
  letter-spacing:.1em;
}
@media(min-width:761px) and (max-width:1100px) {
  .hero { padding-left:48px; grid-template-columns:minmax(0,37fr) minmax(0,63fr); }
  .hero-copy { padding-top:58px; padding-right:30px; }
  .hero h1 { font-size:4.1vw; line-height:1.36; }
  .hero-description { font-size:15px; margin:22px 0; }
  .hero-actions .button { font-size:13px; min-height:56px; gap:10px; }
  .hero-proof { margin-top:18px; }
  .satisfaction { width:86px; height:86px; }
  .cost-inner { min-height:165px; }
  .cost-copy { padding-left:28px; padding-right:12px; margin:24px 0; }
  .cost-copy .answer { font-size:12px; }
  .cost-action { padding-right:28px; }
  .cost-action .button { font-size:11px; padding-inline:12px; }
}
@media(max-width:760px) {
  .wrap,.find .wrap { width:calc(100% - 40px); }
  .bar .wrap { min-height:66px; gap:8px; }
  .name { font-size:17px; letter-spacing:.04em; }
  .name small { font-size:6px; }
  .header-contact { font-size:11px; padding:10px 12px; }
  .header-contact span { margin-left:5px; }
  .hero { width:100%; padding:0; grid-template-columns:1fr; }
  .hero-copy { padding:30px 24px 26px; }
  .hero-copy>.eyebrow { font-size:10px; margin-bottom:18px; }
  .hero h1 { font-size:clamp(29px,8.4vw,48px); line-height:1.4; }
  .hero-description { font-size:14px; margin:20px 0; }
  .hero-description::before { margin-bottom:18px; }
  .hero-actions { max-width:100%; }
  .hero-actions .button { min-height:56px; font-size:14px; }
  .hero-proof { margin-top:20px; gap:20px; }
  .satisfaction { width:80px; height:80px; gap:2px; }
  .satisfaction strong { font-size:29px; }
  .hero-proof>p { font-size:11px; }
  .hero-visual { width:calc(100% - 24px); margin-left:24px; aspect-ratio:auto; }
  .hero-visual img { border-radius:45px 0 0 0; }
  .hero-visual figcaption { font-size:8px; letter-spacing:.02em; padding-right:12px; }
  .hero-visual figcaption span { display:none; }
  .hero-foot { margin-top:0; padding:0 20px 10px; }
  .section { padding:42px 0; }
  .section-eyebrow { font-size:10px; margin-bottom:18px; gap:14px; }
  .find .section-heading h2 br { display:block; }
  .section-heading h2 { font-size:28px; }
  .find .section-heading>p { margin-top:15px; font-size:13px; }
  .room-grid { grid-template-columns:1fr; gap:18px; }
  .room-card { padding:22px 20px 0; }
  .card-number { font-size:50px; }
  .room-card h3 { font-size:25px; margin:16px 4px; }
  .room-card p { font-size:13px; }
  .wish-photo { margin-bottom:14px; }
  .card-link { font-size:0; padding:0; }
  .cost-inner { grid-template-columns:1fr; padding-bottom:28px; }
  .cost-art { width:100%; height:210px; object-fit:cover; object-position:center; }
  .cost-copy { margin:24px 24px 0; padding:0; border:0; }
  .cost-copy h2 { font-size:23px; white-space:normal; }
  .cost-copy .answer { font-size:14px; }
  .cost-action { padding:22px 24px 0; }
  .cost-action .button { min-height:54px; font-size:14px; }
  .about-layout { grid-template-columns:1fr; gap:28px; }
  .about-copy h2 { font-size:27px; }
  .about-copy>p { font-size:13px; }
  .about-visual { gap:18px; grid-template-columns:minmax(0,1fr) 90px; }
  .about-visual img { min-height:200px; }
  .about-visual figcaption { font-size:11px; padding-top:14px; }
  .company-layout { grid-template-columns:1fr; gap:30px; margin-top:30px; padding-top:28px; }
  .company-contact>p { font-size:20px; }
  .contact-list a { flex-direction:column; align-items:flex-start; gap:4px; }
  .contact-list span { text-align:left; }
  .listings { margin-inline:-20px; }
  footer { padding:24px 0 18px; }
  footer::before { right:-6px; bottom:-6px; font-size:52px; }
  footer .wrap { display:grid; grid-template-columns:1fr auto; gap:14px 12px; }
  .footer-brand { font-size:16px; letter-spacing:.06em; }
  .footer-brand .mark { width:26px; height:22px; }
  footer p { grid-column:1/-1; grid-row:2; width:100%; padding:12px 0 0; border-left:0; border-top:1px solid #e2e5dc; margin:0; font-size:11px; }
  .footer-sns { grid-column:1/-1; grid-row:3; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding-top:2px; }
  .footer-sns-link { padding:6px 13px; font-size:11.5px; }
  .footer-top { grid-column:2; grid-row:1; }
  .footer-top span { display:none; }
  .footer-top i { width:30px; height:30px; font-size:12px; }
  footer .wrap>small { grid-column:1/-1; grid-row:4; padding-top:14px; border-top:1px solid #e2e5dc; margin:0; }
}
@media(max-width:359px) {
  .bar .wrap { width:calc(100% - 28px); }
  .brand { gap:5px; }
  .name { font-size:14px; white-space:nowrap; }
  .brand .mark { width:26px; }
  .header-contact { white-space:nowrap; font-size:10px; padding-inline:10px; }
  .hero-copy { padding-inline:20px; }
  .hero h1 { font-size:28px; }
  .room-card h3 { font-size:21px; }
  .about-copy h2 { font-size:23px; }
  .about-visual { grid-template-columns:minmax(0,1fr) 76px; gap:12px; }
}