@charset "utf-8";
/* 「ご利用ガイド」専用（2026-11-01）。top.css・intro.css と一緒に読み込む */
.page-hero .lead { font-size: .88rem; line-height: 2; color: var(--brown-soft); margin-top: 6px; }

/* 項目：左に見出し、右に説明 */
.rows { max-width: 960px; margin: 0 auto; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding: 40px 8px; border-bottom: 1px solid var(--line); }
.row h2 { text-align: left; }
.row h2 .en { display: block; font-family: var(--font-en); font-style: italic; font-size: 2rem; line-height: 1.2; color: var(--pink-deep); }
.row h2 .ja { display: block; font-size: .8rem; letter-spacing: .16em; color: var(--brown-soft); margin-top: 4px; }
.row .body h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .6em; line-height: 1.7; }
.row .body p { line-height: 2.1; margin-bottom: 1em; font-size: .95rem; }
.row .body p:last-child { margin-bottom: 0; }
.row .body a { color: var(--pink-deep); text-decoration: none; border-bottom: 1px solid var(--pink); word-break: break-all; }
.row .body .note { color: var(--pink-deep); font-size: .88rem; }

/* お問い合わせ：写真＋案内 */
.contact { display: grid; grid-template-columns: 5fr 6fr; background: var(--pink-soft); align-items: stretch; }
.contact-photo img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }
.contact-text { padding: 44px 44px; display: flex; flex-direction: column; justify-content: center; }
.contact-text .sec-tit { text-align: left; margin-bottom: 20px; }
.contact-text .sec-tit .en { font-size: 2.2rem; }
.contact-text .sec-tit:after { margin-left: 0; }
.contact-text p { line-height: 2.1; margin-bottom: 1em; font-size: .95rem; }
.contact-text a { color: var(--pink-deep); text-decoration: none; border-bottom: 1px solid var(--pink); }

/* 文章中のリンク：オンマウスで色が変わり、下線が消える */
.row .body a, .contact-text a { transition: color .25s, border-color .25s; }
.row .body a:hover, .contact-text a:hover { color: var(--brown); border-bottom-color: transparent; }

@media only screen and (max-width: 860px) {
  .row { grid-template-columns: 1fr; gap: 12px; padding: 28px 4px; }
  .row h2 .en { font-size: 1.7rem; }
  .contact { grid-template-columns: 1fr; }
  .contact-photo img { min-height: 0; height: 46vw; }
  .contact-text { padding: 30px 22px; }
}

/* ラッピング：縦長の写真はそのままの形で出す */
.wrapabout { grid-template-columns: 4fr 7fr; }
.wrapabout .about-photo { max-width: 420px; }
.wrapabout .about-photo img { aspect-ratio: auto; height: auto; }
@media only screen and (max-width: 860px) { .wrapabout { grid-template-columns: 1fr; } .wrapabout .about-photo { max-width: 360px; margin: 0 auto; } }