/* =========================================================
   写真入りトップページ用
   正式版の index.html で読み込みます。

   背景写真を変更するときは、下記2か所の
   url('../images/hero-kanoe.jpg') を差し替えてください。
   ========================================================= */

.photo-version .hero {
  /* モバイル：文字のある上側を明るくし、下側から写真を見せます */
  background-color: var(--color-ivory);
  background-image:
    linear-gradient(
      180deg,
      rgba(248, 246, 239, .99) 0%,
      rgba(248, 246, 239, .96) 48%,
      rgba(248, 246, 239, .78) 70%,
      rgba(248, 246, 239, .28) 100%
    ),
    url('../images/hero-kanoe.jpg');
  background-repeat: no-repeat;
  background-position: center, center bottom;
  background-size: cover, auto 100%;
}

.photo-version .hero::after {
  right: auto;
  left: 1.25rem;
  height: 11%;
}

.photo-version .hero-inner {
  text-shadow: 0 1px 1px rgba(255, 254, 250, .35);
  transform: translateY(-5vh);
  transform: translateY(-5svh);
}

.photo-version .hero-eyebrow {
  margin-bottom: clamp(2.2rem, 5vw, 3rem);
}

.photo-version .hero h1 {
  max-width: 48rem;
  margin-bottom: clamp(2.4rem, 5vw, 3.4rem);
  font-size: clamp(2.05rem, 9.4vw, 3.2rem);
  line-height: 1.42;
  letter-spacing: .035em;
}

.photo-version .hero h1 span {
  margin-left: .25rem;
}

.photo-version .hero .text-link {
  border-bottom: 1px solid var(--color-gold-light);
  white-space: nowrap;
}

.photo-version .hero .text-link::after {
  display: none;
}

.photo-version .hero-copy {
  max-width: 44rem;
  margin-bottom: clamp(2.8rem, 6vw, 4rem);
}

.photo-version .hero-orbit {
  display: none;
}

.photo-version .hero-dots {
  right: auto;
  bottom: 2.2rem;
  left: 2.4rem;
}

/* ===== 開業準備のお知らせ ===== */
.opening-note {
  background: var(--color-paper);
}

.opening-note-inner {
  padding-block: 1.8rem;
  border-bottom: 1px solid var(--color-line);
}

.opening-note-inner p {
  margin-bottom: 0;
}

.opening-note-label {
  margin-bottom: .45rem !important;
  color: var(--color-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .82rem;
  letter-spacing: .16em;
}

.opening-note-inner > p:last-child {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.9;
}

/* ===== はじめての方へ ===== */
.worries {
  background: var(--color-paper);
}

.worries-grid {
  display: grid;
  gap: 1rem;
}

.worries-grid .section-heading h2 {
  font-size: clamp(1.9rem, 7vw, 3rem);
  letter-spacing: .055em;
}

.heading-line {
  display: block;
  white-space: nowrap;
}

.worry-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
}

.worry-list li {
  position: relative;
  padding: 1.35rem .5rem 1.35rem 2rem;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  line-height: 1.8;
}

.worry-list li::before {
  position: absolute;
  top: 2.25rem;
  left: .35rem;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--color-gold);
  content: "";
}

.worries-reassurance {
  max-width: 27rem;
  margin-top: 2.5rem;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 2;
}

.worries-reassurance p {
  margin: 0;
}

.worries-reassurance p + p {
  margin-top: 1.15rem;
}

.photo-version .profile-detail p + p {
  margin-top: 1rem;
}

/* ===== 関連メディア：お金のととのえ ===== */
.related-media {
  border-block: 1px solid var(--color-line);
  background: var(--color-ivory);
}

.related-media-inner {
  display: grid;
  gap: clamp(2.25rem, 7vw, 4.5rem);
  padding-block: clamp(3.75rem, 8vw, 6rem);
}

.related-media-visual {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: .75rem 0;
}

.related-media-visual img {
  width: 100%;
  height: auto;
  filter: saturate(.82) sepia(.03) contrast(.96);
}

.related-media-label {
  margin-bottom: 1rem;
  color: var(--color-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .78rem;
  line-height: 1.4;
  letter-spacing: .2em;
}

.related-media-content h2 {
  margin-bottom: 1.4rem;
  font-size: clamp(1.9rem, 6vw, 2.65rem);
  line-height: 1.5;
}

.related-media-content > p:not(.related-media-label, .related-media-note) {
  max-width: 32rem;
  margin-bottom: 1.6rem;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.9;
}

.related-media-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding-block: .35rem;
  border-bottom: 1px solid var(--color-gold-light);
  color: var(--color-deep);
  font-size: 1rem;
  text-decoration: none;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.related-media-link:hover {
  border-color: var(--color-deep-soft);
  color: var(--color-deep-soft);
}

.related-media-note {
  margin: .7rem 0 0;
  color: var(--color-muted);
  font-size: .78rem;
  line-height: 1.6;
  letter-spacing: .06em;
}

/* ===== かのえについて：日常を表す写真と見出し ===== */
.concept-intro-grid {
  display: grid;
  gap: clamp(2.75rem, 8vw, 5rem);
}

.concept-image-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  align-self: center;
  overflow: hidden;
  margin: 0;
  background: #e9e3d8;
}

.concept-image-wrap::after {
  position: absolute;
  inset: 0;
  background: rgba(232, 222, 204, .12);
  pointer-events: none;
  content: "";
}

.concept-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: saturate(.72) brightness(1.07) sepia(.04) contrast(.9);
  transform: scale(1.22);
  transform-origin: right center;
}

.concept-intro-grid .section-heading {
  margin-bottom: 0;
}

.concept-intro-grid .section-heading h2 {
  font-size: clamp(1.85rem, 7.4vw, 3.15rem);
}

.concept-copy-after {
  max-width: 56rem;
  margin: clamp(3.75rem, 9vw, 6.5rem) auto 0;
}

/* ===== 総合相談で扱うテーマ例 ===== */
.consultation-overview {
  max-width: 58rem;
  margin-inline: auto;
}

.consultation-overview > p:first-child {
  margin-bottom: 2.75rem;
  color: var(--color-muted);
  font-family: var(--font-serif);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  line-height: 2.1;
}

.consultation-theme-label {
  margin-bottom: .8rem;
  color: var(--color-deep-soft);
  font-size: .9rem;
  letter-spacing: .12em;
}

.consultation-themes {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
}

.consultation-themes li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
  gap: .7rem;
  min-height: 5.25rem;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-serif);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  letter-spacing: .065em;
}

.consultation-themes li span {
  color: var(--color-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .8rem;
  letter-spacing: .08em;
}

/* ===== お金のととのえへの橋渡し ===== */
.contact-media-links {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
}

.contact-site-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
  color: rgba(255, 255, 255, .82);
  font-size: 1rem;
  text-underline-offset: .35em;
}

.contact-site-link-subtle {
  color: rgba(255, 255, 255, .68);
  font-size: .94rem;
}

/* フッターリンクが多いため、タブレットでは縦に並べます */
.photo-version .footer-inner {
  display: block;
}

.photo-version .site-footer nav {
  margin-block: 2.7rem;
}

.photo-version .site-footer ul {
  align-items: flex-start;
  flex-direction: column;
  gap: .7rem;
}

.photo-version .copyright {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-mist);
  text-align: left;
}

@media (min-width: 48rem) {
  .photo-version .hero {
    /* タブレット以上：右の写真から左の文章へ向かって薄くします */
    background-image:
      linear-gradient(
        90deg,
        rgba(248, 246, 239, 1) 0%,
        rgba(248, 246, 239, .99) 35%,
        rgba(248, 246, 239, .94) 49%,
        rgba(248, 246, 239, .68) 64%,
        rgba(248, 246, 239, .18) 83%,
        rgba(248, 246, 239, .06) 100%
      ),
      url('../images/hero-kanoe.jpg');
    background-position: center, right center;
    background-size: cover, auto 100%;
  }

  .photo-version .hero-inner {
    width: min(100%, var(--content-width));
  }

  .photo-version .hero h1 {
    font-size: clamp(2.8rem, 4.2vw, 4rem);
  }

  .photo-version .hero h1 span {
    white-space: nowrap;
  }

  .photo-version .hero::after {
    right: 10%;
    left: auto;
    height: 16%;
  }

  .photo-version .hero-dots {
    right: 7%;
    bottom: 16%;
    left: auto;
  }

  .opening-note-inner {
    display: grid;
    grid-template-columns: minmax(12rem, .45fr) minmax(26rem, 1fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
    padding-block: 2.1rem;
  }

  .opening-note-label {
    margin-bottom: 0 !important;
  }

  .worries-grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(4rem, 9vw, 8rem);
  }

  .worries-grid .section-heading h2 {
    font-size: clamp(2rem, 3.4vw, 3rem);
  }

  .worries-grid .section-heading {
    margin-bottom: 0;
  }

  .related-media-inner {
    grid-template-columns: minmax(20rem, .95fr) minmax(18rem, 1.05fr);
    align-items: center;
  }

  .related-media-visual {
    padding: clamp(.75rem, 2vw, 1.1rem) clamp(.9rem, 3vw, 1.5rem);
  }

  .consultation-themes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .consultation-themes li:nth-child(odd) {
    padding-right: 2rem;
  }

  .consultation-themes li:nth-child(even) {
    padding-left: 2rem;
    border-left: 1px solid var(--color-line);
  }
}

@media (min-width: 64rem) {
  .concept-intro-grid {
    grid-template-columns: minmax(20rem, .95fr) minmax(20rem, 1.05fr);
    align-items: center;
  }

  .concept-intro-grid .section-heading h2 {
    font-size: clamp(2rem, 3.2vw, 2.7rem);
    white-space: nowrap;
  }

  .photo-version .footer-inner {
    display: grid;
    grid-template-columns: 1fr minmax(30rem, auto);
    align-items: end;
    gap: 2rem;
  }

  .photo-version .site-footer nav {
    margin: 0;
  }

  .photo-version .site-footer ul {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .7rem 1.6rem;
  }

  .photo-version .copyright {
    grid-column: 1 / -1;
    text-align: right;
  }
}

@media (min-width: 75rem) {
  .photo-version .hero {
    background-position: center, right center;
    background-size: cover, auto 100%;
  }

  .photo-version .hero-inner {
    width: min(calc(100% - 6rem), var(--content-width));
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-version .hero-inner {
    text-shadow: none;
  }
}