@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600&family=Shippori+Mincho&display=swap');

/* リセット */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: "Noto Serif JP", "Shippori Mincho", serif;
    line-height: 1.8;
    color: #333;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
}

/* ヘッダー */
.main-header {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左寄せに戻しました */
    padding-left: 10%;           /* 左端からの余白 */
    text-align: left;            /* テキスト左揃え */
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.6) 100%), url('../images/exterior.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-bottom: 1px solid #ddd;
}

.header-content {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

h1 { font-weight: 300; font-size: 2.8em; margin: 15px 0; letter-spacing: 0.15em; }
.denom { font-size: 0.9em; color: #d4af37; letter-spacing: 0.4em; margin-bottom: 20px; font-weight: 600; text-transform: uppercase; }

/* テキストエリア */
.intro, .access { padding: 100px 40px; max-width: 800px; margin: 0 auto; text-align: center; }
.section-title { font-size: 1.0em; color: #777; letter-spacing: 0.3em; margin-bottom: 30px; text-transform: uppercase; }
.lead { font-size: 1.6em; margin-bottom: 60px; font-weight: 400; }
.text-block { text-align: justify; line-height: 2; }
.no-break { white-space: nowrap; }

/* 3枚並びのギャラリー設定 */
.photo-gallery { padding: 60px 20px; background-color: #fff; }
.gallery-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
}
.gallery-container img {
    flex: 1; 
    width: 33.33%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
}

/* 内観エリア */
.mid-gallery {
    width: 100%; height: 60vh;
    background-image: url('../images/interior.jpg');
    background-size: cover; background-position: center; background-attachment: fixed;
    border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;
    display: flex; align-items: center; justify-content: center;
}
.gallery-text { color: #fff; font-size: 1.5em; letter-spacing: 0.2em; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

/* フッター */
.main-footer { padding: 80px 40px; background-color: #f9f9f9; text-align: center; color: #666; border-top: 1px solid #eee; }

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .main-header {
        justify-content: center; /* スマホでは中央寄せ */
        padding-left: 0;
        text-align: center;
    }
    .main-header, .mid-gallery { background-attachment: scroll; height: 50vh; }
    .gallery-container { flex-direction: column; gap: 15px; }
    .gallery-container img { width: 100%; }
    .intro, .access { padding: 40px 20px; }
    h1 { font-size: 2.0em; }
}

/* 控えめなページリンク */
.quiet-link-wrap { margin-top: 52px; text-align: center; }
.quiet-link {
    display: inline-block; position: relative; padding: 4px 14px 7px;
    color: #777; font-family: "Shippori Mincho", "Noto Serif JP", serif;
    font-size: .92em; letter-spacing: .22em; text-decoration: none;
    transition: color .35s ease;
}
.quiet-link::after {
    content: ""; position: absolute; left: 14px; right: calc(14px + .22em); bottom: 1px;
    height: 1px; background: #b8a36b; transform: scaleX(.35); opacity: .65;
    transition: transform .35s ease, opacity .35s ease;
}
.quiet-link:hover { color: #4c4c4c; }
.quiet-link:hover::after { transform: scaleX(1); opacity: 1; }



/* 一枚の紙として返るページめくり */
.page-turn { display:none; }
.page-curl-stage {
    position: fixed; inset: 0; z-index: 10000; pointer-events: none;
    overflow: hidden; visibility: hidden; perspective: 2200px;
}
body.turning { overflow: hidden; }
body.turning .page-curl-stage { visibility: visible; }
.page-curl-canvas { position:absolute; inset:0; width:100%; height:100%; }

/* Page Curl / Page Peel: destination below, lifted reverse side above */
.page-curl-stage,.page-curl-canvas{display:none!important}
.page-peel-stage{position:fixed;inset:0;z-index:10000;pointer-events:none;overflow:hidden;visibility:hidden;background:transparent}
.page-peel-stage.active{visibility:visible}
.page-peel-next{position:absolute;inset:0;width:100%;height:100%;border:0;background:#f7f5ef;clip-path:polygon(100% 0,100% 0,100% 0)}
.page-peel-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
body.turning{overflow:hidden}


/* 静かな案内リンク：本文の余韻を壊さず、同格の小さなナビゲーションとして配置 */
.quiet-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 19px;
    margin-top: 58px;
}
.quiet-nav .quiet-link { padding-left: 9px; padding-right: 9px; }
.quiet-nav .quiet-link::after { left: 9px; right: calc(9px + .22em); }
.quiet-link-main { color: #615d54; font-size: .96em; }
.quiet-link-sub { color: #99948a; font-size: 1em; }
.quiet-nav-mark { color: #b9a675; font-size: .72em; opacity: .75; transform: translateY(-1px); }

/* 日本聖公会 紹介ページ */
.about-nskk { background: #fff; }
.nskk-hero {
    min-height: 46vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 70px 24px 64px;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(to bottom, rgba(18,20,19,.10), rgba(18,20,19,.66)), url('../images/interior2.jpg');
    background-size: cover;
    background-position: center 46%;
    background-attachment: fixed;
    border-bottom: 1px solid #ddd;
}
.nskk-hero-inner { text-shadow: 0 2px 9px rgba(0,0,0,.62); }
.nskk-eyebrow { font-size: .78em; letter-spacing: .34em; color: #e3d7ad; margin-bottom: 19px; }
.nskk-title { font-weight: 300; font-size: 2.15em; letter-spacing: .13em; }
.nskk-content { max-width: 800px; margin: 0 auto; padding: 92px 40px 104px; }
.nskk-lead { text-align: center; font-size: 1.22em; letter-spacing: .07em; margin-bottom: 55px; color: #45423d; }
.nskk-copy { text-align: justify; line-height: 2.15; color: #484848; }
.nskk-copy p + p { margin-top: 30px; }
.nskk-rule { width: 46px; height: 1px; background: #b8a36b; opacity: .72; margin: 50px auto 43px; }
.nskk-note { text-align: center; font-size: .82em; color: #888; letter-spacing: .06em; }
.nskk-back { text-align: center; margin-top: 56px; }
@media (max-width: 768px) {
    .quiet-nav { gap: 11px; flex-wrap: wrap; }
    .nskk-hero { min-height: 38vh; background-attachment: scroll; padding-bottom: 48px; }
    .nskk-title { font-size: 1.75em; }
    .nskk-content { padding: 58px 22px 72px; }
    .nskk-lead { font-size: 1.08em; margin-bottom: 40px; }
}


/* 連絡先・牧師情報 */
.contact-mail {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(184,163,107,.55);
    transition: color .3s ease, border-color .3s ease;
}
.contact-mail:hover { color: #5f594c; border-color: #b8a36b; }
.pastor-info {
    margin: 38px 0 0;
    padding-top: 24px;
    max-width: 420px;
    text-align: left;
    position: relative;
}
.pastor-info::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 38px; height: 1px;
    background: #b8a36b;
    opacity: .68;
}
.pastor-label {
    color: #4b4944;
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
    font-size: 1.28em;
    font-weight: 500;
    letter-spacing: .18em;
    margin: 0 0 8px;
}
.pastor-name {
    color: #66625b;
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
    font-size: .98em;
    letter-spacing: .08em;
    margin: 0;
}

/* =========================================================
   Mobile refinement — 2026-09
   Desktop composition is intentionally left unchanged.
   ========================================================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
img{display:block;max-width:100%}
a{-webkit-tap-highlight-color:rgba(184,163,107,.16)}

@media (max-width:768px){
 body{overflow-x:hidden;font-size:16px;line-height:1.9}
 .main-header{height:64vh;min-height:430px;height:64svh;min-height:min(430px,72svh);justify-content:flex-start;align-items:flex-end;text-align:left;padding:0 max(24px,env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background-position:54% center;background-attachment:scroll}
 .header-content{width:min(100%,560px)}
 h1{font-size:clamp(1.85rem,8.1vw,2.45rem);line-height:1.42;letter-spacing:.105em;margin:0 0 10px;text-wrap:balance}
 .eng-name{font-size:clamp(.69rem,2.9vw,.82rem);line-height:1.55;letter-spacing:.16em}
 .intro,.access{width:100%;max-width:none;padding:64px max(22px,env(safe-area-inset-right)) 68px max(22px,env(safe-area-inset-left))}
 .section-title{font-size:.76rem;line-height:1.7;letter-spacing:.20em;margin-bottom:20px;overflow-wrap:anywhere}
 .lead{font-size:clamp(1.24rem,5.6vw,1.48rem);line-height:1.65;margin-bottom:36px;letter-spacing:.035em}
 .text-block{max-width:34rem;margin-inline:auto;text-align:left;line-height:2.05;overflow-wrap:anywhere;word-break:normal;line-break:strict}
 .no-break{white-space:normal}
 .quiet-link-wrap{margin-top:44px}
 .quiet-nav{gap:4px 13px;margin-top:46px;flex-wrap:wrap}
 .quiet-link{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:8px 10px 9px;line-height:1.5;letter-spacing:.15em;touch-action:manipulation}
 .quiet-link::after{left:10px;right:calc(10px + .15em)}
 .quiet-link-main{font-size:.94rem}.quiet-link-sub{font-size:.92rem}.quiet-nav-mark{margin-inline:1px}
 .photo-gallery{padding:20px max(16px,env(safe-area-inset-right)) 54px max(16px,env(safe-area-inset-left))}
 .gallery-container{width:100%;max-width:620px;flex-direction:column;gap:14px}
 .gallery-container img{width:100%;height:clamp(210px,62vw,340px);object-fit:cover;border-radius:3px}
 .mid-gallery{height:48vh;min-height:320px;height:48svh;background-attachment:scroll;background-position:center center}
 .access{padding-top:68px}.access .text-block{text-align:left}
 .contact-mail{overflow-wrap:anywhere;word-break:break-word}
 .pastor-info{max-width:none;margin-top:34px;padding-top:22px}.pastor-label{font-size:1.20rem}.pastor-name{font-size:.96rem;line-height:1.8}
 .main-footer{padding:58px max(22px,env(safe-area-inset-right)) calc(54px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
 .main-footer .denom{font-size:.68rem;line-height:1.9;letter-spacing:.18em;margin-bottom:16px;overflow-wrap:anywhere}.church-name-footer{font-size:.92rem;line-height:1.8}.copyright{margin-top:8px;font-size:.68rem;line-height:1.7}
 .nskk-hero{min-height:42vh;min-height:42svh;padding:54px max(22px,env(safe-area-inset-right)) 42px max(22px,env(safe-area-inset-left));background-attachment:scroll;background-position:center 46%}
 .nskk-eyebrow{font-size:.68rem;line-height:1.8;letter-spacing:.20em;margin-bottom:15px}.nskk-title{font-size:clamp(1.62rem,7vw,2rem);line-height:1.5;letter-spacing:.10em}
 .nskk-content{width:100%;max-width:none;padding:58px max(22px,env(safe-area-inset-right)) 72px max(22px,env(safe-area-inset-left))}
 .nskk-lead{max-width:32rem;margin:0 auto 38px;font-size:1.06rem;line-height:1.9;letter-spacing:.035em;text-align:left}
 .nskk-copy{max-width:34rem;margin-inline:auto;text-align:left;line-height:2.08;line-break:strict}.nskk-copy p+p{margin-top:26px}.nskk-rule{margin:42px auto 36px}.nskk-note{line-height:1.9}.nskk-back{margin-top:42px}
 .page-peel-stage{width:100vw;height:100vh;height:100dvh;overscroll-behavior:none}.page-peel-next,.page-peel-svg{width:100%;height:100%}
 .test-page{min-height:100vh!important;min-height:100dvh!important;padding:max(28px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))!important}
 .test-card{padding:64px 22px!important}.test-kicker{font-size:.68rem!important;line-height:1.8;letter-spacing:.18em!important}.test-message{font-size:1.22rem!important;line-height:1.8}.test-back{margin-top:44px!important}
}
@media (max-width:390px){
 .main-header{padding-left:20px;padding-right:20px}h1{letter-spacing:.075em}.intro,.access,.nskk-content{padding-left:19px;padding-right:19px}.quiet-nav{gap:2px 8px}.quiet-nav-mark{display:none}.quiet-nav .quiet-link{width:100%}.gallery-container img{height:64vw}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:950px){.main-header{height:100svh;min-height:300px;padding-bottom:28px}.mid-gallery{height:72svh;min-height:260px}.nskk-hero{min-height:76svh}}

/* Site navigation links: suppress browser default blue/purple and keep the church palette */
a.quiet-link:link,
a.quiet-link:visited {
    text-decoration: none;
}
a.quiet-link-main:link,
a.quiet-link-main:visited {
    color: #99948a;
}
a.quiet-link-sub:link,
a.quiet-link-sub:visited {
    color: #99948a;
}
a.quiet-link:hover,
a.quiet-link:focus-visible {
    color: #403d37;
}
a.quiet-link:focus-visible {
    outline: 1px solid rgba(184,163,107,.55);
    outline-offset: 4px;
}


/* 日本聖公会紋章 — 元画像の白地を背景になじませる */
.nskk-emblem {
    width: 112px;
    margin: -18px auto 44px;
    padding: 0;
    line-height: 0;
    text-align: center;
}
.nskk-emblem img {
    width: 100%;
    height: auto;
    display: block;
    opacity: .78;
    filter: grayscale(100%) contrast(.92);
    border: 0;
    box-shadow: none;
    background: transparent;
}
@media (max-width:768px) {
    .nskk-emblem { width: 88px; margin: -4px auto 34px; }
    .nskk-emblem img { opacity: .76; }
}

/* ACCESS & CONTACT — information and map in a restrained two-column composition */
.access {
    max-width: 1180px;
    padding-left: 40px;
    padding-right: 40px;
}
.access .lead { margin-bottom: 54px; }
.access-layout {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
    gap: clamp(54px, 7vw, 92px);
    align-items: stretch;
    text-align: left;
}
.access-details {
    width: 100%;
    align-self: center;
    text-align: left;
}
.access-details > p + p { margin-top: 20px; }
.access-map {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    background: #f4f3ef;
    border: 1px solid rgba(86, 80, 68, .15);
    box-shadow: 0 14px 34px rgba(50, 44, 34, .07);
}
.access-map::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
}
.access-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 0;
    filter: saturate(.72) contrast(.96) sepia(.06);
}
@media (max-width: 900px) {
    .access-layout {
        grid-template-columns: 1fr;
        gap: 42px;
        max-width: 620px;
        margin-inline: auto;
    }
    .access-map, .access-map iframe { min-height: 340px; }
}
@media (max-width: 768px) {
    .access { padding-left: max(22px,env(safe-area-inset-left)); padding-right: max(22px,env(safe-area-inset-right)); }
    .access .lead { margin-bottom: 36px; }
    .access-layout { gap: 38px; }
    .access-details { margin-inline: 0; }
    .access-map { min-height: 0; aspect-ratio: 4 / 3; box-shadow: 0 10px 26px rgba(50,44,34,.06); }
    .access-map iframe { min-height: 0; height: 100%; }
}
@media (max-width:390px) {
    .access { padding-left: 19px; padding-right: 19px; }
}


/* Custom access guide map — quiet, schematic landmark map */
.access-map-custom {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    background: #f7f6f2;
}
.access-map-custom::after { display:none; }
.local-guide-map {
    display:block;
    width:100%;
    height:auto;
    flex:1 1 auto;
    min-height:0;
}
.map-open-link, .map-open-link:link, .map-open-link:visited {
    display:block;
    padding:14px 18px 15px;
    border-top:1px solid rgba(86,80,68,.12);
    background:rgba(255,255,255,.64);
    color:#69645b;
    text-align:right;
    font-size:12px;
    letter-spacing:.06em;
    text-decoration:none;
}
.map-open-link:hover { color:#403d37; background:rgba(255,255,255,.88); }
@media(max-width:768px){
  .access-map-custom{aspect-ratio:auto; min-height:0;}
  .local-guide-map{aspect-ratio:760/470;}
  .map-open-link{padding:13px 15px 14px;font-size:11px;}
}


/* Mobile contact link normalization */
.contact-tel,
.contact-tel:link,
.contact-tel:visited,
a[href^="tel:"],
a[href^="tel:"]:visited,
a[x-apple-data-detectors],
a[x-apple-data-detectors]:visited {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}
.contact-fax {
    color: inherit;
    -webkit-text-fill-color: currentColor;
}

/* Preview layer: destination page only in the area exposed by the existing peel. */
.page-peel-next{z-index:0;pointer-events:none;}
.page-peel-svg{z-index:1;}

/* Static destination-page layer for page-turn preview (no iframe/history entry). */
.page-peel-next { overflow: hidden !important; }
.page-peel-preview-content { position:absolute; inset:0; width:100%; min-height:100%; background:#fff; }
.page-peel-preview-content.test-page { min-height:100%; }

/* 2026-10-19: Keep each navigation label on one line. */
.intro .quiet-nav { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:clamp(8px,1.6vw,19px); row-gap:12px; max-width:100%; }
.intro .quiet-nav > a.quiet-link { display:inline-flex; flex:0 0 auto; width:auto; max-width:none; white-space:nowrap; word-break:keep-all; overflow-wrap:normal; line-break:strict; letter-spacing:.10em; padding-inline:4px; align-items:center; justify-content:center; }
.intro .quiet-nav > .quiet-nav-mark { flex:0 0 auto; }
@media(max-width:768px) { .intro .quiet-nav {column-gap:10px;row-gap:10px;} .intro .quiet-nav > a.quiet-link {width:auto;min-height:44px; font-size:.85rem;letter-spacing:.045em;} }
@media(max-width:430px) { .intro .quiet-nav > .quiet-nav-mark {display:none;} .intro .quiet-nav {gap:8px 12px;} }

/* PC用表示サイズ切替。スマートフォンでは表示も倍率変更も行わない。 */
@media screen and (min-width: 1024px) {
  .display-size-switch {
    position: absolute; top: 12px; right: 18px; z-index: 50;
    display: flex; align-items: center; gap: 7px;
    padding: 9px 13px; border: 1px solid #cfc7b8; border-radius: 5px;
    background: rgba(248,246,240,.97); color: #554e43;
    font-family: sans-serif; font-size: 15px; letter-spacing: normal;
    line-height: 1.4; box-shadow: 0 1px 4px rgba(0,0,0,.12);
  }
  .display-size-switch button {
    border: 1px solid #c5b9a7; border-radius: 4px;
    background: #fcfaf6; color: #5c5347; padding: 9px 14px;
    font: inherit; font-weight: 600; cursor: pointer; min-height: 42px;
  }
  .display-size-switch button[aria-pressed="true"] {
    background: #776b58; color: #fff; border-color: #776b58;
  }
  .display-size-switch button:focus-visible { outline: 2px solid #174a81; outline-offset: 2px; }
}
@media screen and (max-width: 1023px) {
  .display-size-switch { display: none !important; }
}