@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&family=Noto+Serif+JP:wght@400;500;600&family=Cormorant+Garamond:wght@400;500;600&display=swap');
:root{--navy:#101e30;--navy2:#192c40;--gold:#bca071;--cream:#f7f4ee;--ink:#26303b;--muted:#68717b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:'Noto Sans JP',sans-serif;font-size:15px;line-height:1.9}a{color:inherit;text-decoration:none}button{font:inherit}.wrap{width:min(1180px,calc(100% - 88px));margin-inline:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;z-index:100;background:white;padding:10px}.site-header{position:absolute;z-index:20;top:0;left:0;width:100%;border-bottom:1px solid #ffffff36;color:white}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:100px;gap:25px}.brand{display:flex;flex-direction:column;line-height:1.15}.brand-en,.footer-brand{font:500 32px 'Cormorant Garamond',serif;letter-spacing:.12em}.brand-ja{font-size:10px;letter-spacing:.22em;margin-top:6px}.site-nav{display:flex;gap:clamp(15px,2.2vw,34px);align-items:center}.site-nav a{font-size:12px;letter-spacing:.07em;transition:color .2s}.site-nav a:hover{color:var(--gold)}.menu-toggle{display:none}.hero{height:min(850px,100svh);min-height:660px;position:relative;display:flex;align-items:center;color:white;background:var(--navy);overflow:hidden}.hero-photo{position:absolute;inset:0;background-image:url('../../image/top01.JPG');background-position:center 42%;background-size:cover;filter:saturate(.65)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,19,32,.96) 0%,rgba(8,19,32,.78) 43%,rgba(8,19,32,.25) 100%),linear-gradient(0deg,rgba(8,19,32,.48),transparent 40%)}.hero-content{position:relative;z-index:2;padding-top:65px}.eyebrow{color:#9b8156;letter-spacing:.25em;font-size:11px;font-weight:600;margin:0 0 24px}.eyebrow.light{color:#d5b987}.gold-line{display:block;width:42px;height:1px;background:var(--gold);margin:0 0 34px}.hero h1,.section-title,.join h2{font-family:'Noto Serif JP',serif;font-weight:400;letter-spacing:.09em}.hero h1{font-size:clamp(43px,5.4vw,76px);line-height:1.65;margin:0 0 24px}.hero-lead{font-size:14px;letter-spacing:.1em;line-height:2.4;color:#e7e7e7}.text-link{display:inline-flex;gap:24px;align-items:center;font-size:11px;letter-spacing:.16em;margin-top:30px;padding-bottom:9px;border-bottom:1px solid var(--gold)}.light-link{color:#e4c99a}.hero-side{position:absolute;right:34px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;letter-spacing:.3em;font-size:10px;color:#ddd}.scroll-cue{position:absolute;bottom:34px;left:calc((100% - min(1180px,100% - 88px))/2);font-size:10px;letter-spacing:.2em;display:flex;gap:16px;align-items:center}.scroll-cue span{font-size:22px;color:var(--gold)}.section{padding:115px 0}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%}.section-title{font-size:clamp(30px,3.2vw,44px);line-height:1.75;margin:0}.section-title em{font-style:normal;color:#987b4c}.intro-copy{padding-top:24px}.intro-copy p,.feature-copy>p:not(.eyebrow){color:#56606b;line-height:2.35}.arrow-link{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #c9c5bc;padding:15px 0;max-width:310px;font-size:13px;margin-top:18px}.arrow-link span{color:#a88a57;font-size:20px}.concert{background:#ece9e2}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:40px}.outline-index{font:15px 'Cormorant Garamond',serif;letter-spacing:.15em;color:#a39a8d}.concert-card{display:grid;grid-template-columns:42% 58%;background:#fff;min-height:390px;box-shadow:0 20px 55px #192c4012}.concert-art{background:linear-gradient(140deg,#253b51,#0c1828);color:#e2c9a0;padding:50px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.concert-art:before{content:'';position:absolute;border:1px solid #bca07166;width:320px;height:320px;border-radius:50%;right:-110px;top:-80px}.concert-art:after{content:'';position:absolute;border:1px solid #bca07155;width:260px;height:260px;border-radius:50%;left:-120px;bottom:-150px}.concert-art span{font:400 clamp(36px,4vw,58px)/1.12 'Cormorant Garamond',serif;letter-spacing:.04em;position:relative;z-index:1}.concert-art small{font:15px 'Cormorant Garamond',serif;letter-spacing:.3em;margin-top:30px}.concert-info{padding:60px 9%}.concert-info h3{font:400 29px 'Noto Serif JP',serif;margin:0 0 24px}.concert-info>p:not(.eyebrow){color:var(--muted);font-size:14px}.button-gold,.button-outline{display:inline-flex;justify-content:space-between;align-items:center;gap:36px;padding:14px 23px;font-size:13px;margin-top:25px;transition:transform .2s}.button-gold{background:#a98c5d;color:white}.button-gold:hover,.button-outline:hover{transform:translateY(-2px)}.concert-info .note{font-size:11px!important;margin-top:18px}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.feature-photo{height:520px;background:linear-gradient(0deg,#10203644,#10203622),url('../../image/top02.JPG') center/cover,#23354b}.feature-copy .section-title{margin-bottom:24px}.join{background:radial-gradient(circle at 75% 30%,#314760 0%,#15283c 40%,#101e30 100%);text-align:center;color:white}.join-inner{max-width:850px}.join h2{font-size:clamp(36px,4vw,58px);line-height:1.7;margin:0 0 24px}.join p:not(.eyebrow){font-size:14px;color:#e0e2e6;line-height:2.3}.button-outline{border:1px solid #c6ac7c;color:#ead7b5}.links .section-title{margin-bottom:38px}.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.link-tile{min-height:205px;border:1px solid #d8d2c7;padding:30px;display:flex;flex-direction:column;justify-content:space-between;transition:background .2s}.link-tile:hover{background:#eee9e0}.link-tile span{font:22px 'Cormorant Garamond',serif;color:#a48b65}.link-tile strong{font:400 23px 'Noto Serif JP',serif}.link-tile small{font-size:10px;letter-spacing:.12em;color:#8b7758}.site-footer{background:#0d1928;color:#eee;padding:60px 0}.footer-inner{display:flex;justify-content:space-between;gap:30px}.site-footer p{font-size:12px;color:#bbb}.footer-right{display:flex;flex-direction:column;justify-content:space-between;text-align:right;font-size:11px;letter-spacing:.1em}.footer-right small{color:#aaa}@media(max-width:900px){.wrap{width:min(100% - 42px,1180px)}.header-inner{min-height:80px}.menu-toggle{display:flex;flex-direction:column;gap:6px;background:none;border:0;padding:12px;cursor:pointer;z-index:3}.menu-toggle span{display:block;width:25px;height:1px;background:white}.site-nav{display:none;position:absolute;top:80px;left:0;right:0;background:#101e30;padding:25px 22px;flex-direction:column;align-items:stretch;gap:0}.site-nav.open{display:flex}.site-nav a{padding:12px 0;border-bottom:1px solid #ffffff22}.hero-side{display:none}.scroll-cue{left:21px}.intro-grid,.feature-grid{grid-template-columns:1fr;gap:35px}.feature-photo{height:390px}.section{padding:78px 0}.concert-card{grid-template-columns:1fr}.concert-art{min-height:270px}.concert-info{padding:38px}.link-grid{grid-template-columns:1fr}.link-tile{min-height:140px}.footer-inner{flex-direction:column}.footer-right{text-align:left;gap:15px}}@media(max-width:500px){.brand-en{font-size:26px}.brand-ja{font-size:9px}.hero{min-height:660px;height:88svh}.hero h1{font-size:42px}.hero-lead{font-size:12px}.hero-photo{background-position:55% center}.hero-shade{background:linear-gradient(90deg,#0b1928e8,#0b1928a3)}.concert-info h3{font-size:24px}.concert-art{padding:32px}.feature-photo{height:300px}}

/* Members area entry */
.site-nav .member-nav{border:1px solid #bca071;padding:10px 14px;color:#ead7b5;white-space:nowrap}.site-nav .member-nav:hover{background:#bca071;color:#101e30}.member-access{display:flex;justify-content:space-between;align-items:center;gap:32px;background:#192c40;color:#fff;margin-top:38px;padding:38px 44px;border-left:3px solid #bca071}.member-access .eyebrow{color:#d5b987;margin-bottom:6px}.member-access h3{font:400 26px 'Noto Serif JP',serif;margin:0 0 8px}.member-access p:not(.eyebrow){font-size:13px;color:#d7dce3;margin:0}.member-access-button{border:1px solid #bca071;color:#ead7b5;padding:14px 18px;white-space:nowrap;font-size:13px}.member-access-button:hover{background:#bca071;color:#101e30}@media(max-width:900px){.site-nav .member-nav{margin-top:14px;text-align:center}.member-access{flex-direction:column;align-items:stretch;padding:30px 25px}.member-access-button{text-align:center}}

/* Official choir logo */
.brand{flex-direction:row;align-items:center;gap:14px;min-width:0}.brand-logo{display:block;background:#fff;border-radius:3px;padding:4px 8px;width:165px;flex-shrink:0}.brand-logo img{display:block;width:100%;height:auto}.brand-name{font-family:'Noto Serif JP',serif;font-size:13px;letter-spacing:.08em;white-space:nowrap}.member-nav{border:1px solid #bca071;padding:9px 12px!important;color:#ead7b5}@media(max-width:1100px){.brand-logo{width:115px}.brand-name{font-size:11px}}@media(max-width:900px){.brand-logo{width:142px}.brand-name{font-size:12px}}@media(max-width:500px){.brand-logo{width:105px;padding:3px 5px}.brand-name{font-size:10px}.brand{gap:7px}}

/* Ver.4: white editorial header and official black-on-white logo */
:root{--navy:#112840;--gold:#a78342;--cream:#faf8f3}
.site-header{position:relative;background:#fff;color:#152940;border-bottom:1px solid #e6e2da;box-shadow:0 2px 18px #1529400b}
.header-inner{width:min(1480px,calc(100% - 64px));min-height:106px;gap:22px}
.brand{gap:17px;flex-shrink:0}.brand-logo{background:white;padding:0;width:230px;border-radius:0}.brand-title{display:flex;flex-direction:column;gap:4px}.brand-name{font-size:clamp(16px,1.6vw,24px);font-weight:600;letter-spacing:.03em}.brand-title small{font:11px 'Cormorant Garamond',serif;letter-spacing:.2em;color:#596575;white-space:nowrap}
.site-nav{gap:clamp(12px,1.5vw,24px)}.site-nav a{font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap;padding:10px 0;border-bottom:2px solid transparent}.site-nav a:hover,.site-nav a.active{color:#97743c;border-bottom-color:#a78342}
.site-nav .member-nav{background:#a78342;color:#fff;border:1px solid #a78342;border-radius:5px;padding:13px 16px!important;font-weight:500;letter-spacing:.02em}.site-nav .member-nav:hover{background:#8c6a34;color:#fff;border-color:#8c6a34}.site-nav .member-nav span{font-size:15px;margin-right:5px}
.hero{height:min(690px,78svh);min-height:520px}.hero-content{padding-top:0}.hero h1{font-size:clamp(36px,4.4vw,66px);line-height:1.55}.hero-shade{background:linear-gradient(90deg,rgba(7,18,32,.93),rgba(7,18,32,.68) 45%,rgba(7,18,32,.14) 100%)}.hero-photo{filter:saturate(.78)}
.concert{background:#f6f4ef}.concert-card{border:1px solid #e9e4da}.concert-art{background:linear-gradient(140deg,#1b344d,#0d1d30)}.member-access{background:#122b44}
@media(max-width:1350px){.header-inner{width:calc(100% - 44px)}.brand-logo{width:175px}.brand-name{font-size:17px}.brand-title small{font-size:9px}.site-nav{gap:13px}.site-nav a{font-size:11px}}
@media(max-width:1050px){.header-inner{min-height:82px}.brand-logo{width:165px}.brand-name{font-size:17px}.menu-toggle{display:flex;flex-direction:column;gap:6px;background:none;border:0;padding:12px;cursor:pointer;z-index:3}.menu-toggle span{display:block;width:25px;height:2px;background:#172b42}.site-nav{display:none;position:absolute;top:82px;left:0;right:0;background:#fff;padding:18px 24px 24px;flex-direction:column;align-items:stretch;gap:0;box-shadow:0 15px 25px #14263b20}.site-nav.open{display:flex}.site-nav a{padding:12px 0;border-bottom:1px solid #e8e4db;font-size:14px}.site-nav .member-nav{margin-top:14px;text-align:center}.hero{min-height:530px}}
@media(max-width:550px){.header-inner{width:calc(100% - 28px);min-height:72px}.site-nav{top:72px}.brand-logo{width:125px}.brand-title{gap:1px}.brand-name{font-size:12px;white-space:normal}.brand-title small{font-size:7px;letter-spacing:.06em}.brand{gap:9px}.hero{min-height:590px;height:78svh}.hero h1{font-size:35px}.hero-shade{background:linear-gradient(90deg,#0b1928ee,#0b1928a3)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Ver.5 — responsive refinements for smartphones, tablets and desktops */
html{scroll-padding-top:92px}body{overflow-x:hidden}img{max-width:100%}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #b18b48;outline-offset:4px}.menu-toggle{min-width:48px;min-height:48px;align-items:center;justify-content:center}.menu-toggle span{flex-shrink:0}.hero-content,.concert-info,.feature-copy,.intro-grid>div{min-width:0}.hero h1{overflow-wrap:anywhere}.member-access-button{display:inline-flex;justify-content:center;align-items:center;min-height:48px}.link-tile{min-width:0}.link-tile small{overflow-wrap:anywhere}
@media(max-width:1050px){.site-nav{z-index:30}.site-nav a{min-height:46px;display:flex;align-items:center}.site-nav .member-nav{justify-content:center;min-height:50px}.brand{min-width:0}.brand-title{min-width:0}}
@media(max-width:768px){.wrap{width:calc(100% - 36px)}.section{padding:64px 0}.hero{height:auto;min-height:590px;padding:76px 0 88px}.hero h1{font-size:clamp(30px,6.6vw,45px);line-height:1.65}.hero-lead{font-size:13px;line-height:2.1}.hero-photo{background-position:58% center}.hero-shade{background:linear-gradient(90deg,rgba(8,19,32,.94),rgba(8,19,32,.55))}.intro-grid,.feature-grid{grid-template-columns:minmax(0,1fr);gap:25px}.intro-copy{padding-top:0}.section-head{align-items:start}.outline-index{display:none}.concert-card{grid-template-columns:minmax(0,1fr)}.concert-art{min-height:225px}.concert-info{padding:30px 25px}.feature-photo{height:330px}.link-grid{grid-template-columns:minmax(0,1fr)}.link-tile{min-height:130px;padding:24px}.member-access{margin-top:24px}.footer-inner{gap:25px}}
@media(max-width:480px){.header-inner{width:calc(100% - 24px);gap:6px}.brand-logo{width:clamp(92px,27vw,125px)}.brand-name{font-size:clamp(10px,3vw,13px);line-height:1.45}.brand-title small{font-size:7px;letter-spacing:0}.brand{gap:7px}.menu-toggle{padding:9px;min-width:44px}.hero{min-height:570px;padding:66px 0 90px}.hero h1{font-size:clamp(29px,8vw,38px)}.hero-lead{font-size:12px}.section-title{font-size:clamp(27px,7.4vw,36px)}.join h2{font-size:clamp(30px,8vw,40px)}.concert-art{padding:28px;min-height:200px}.concert-art span{font-size:43px}.feature-photo{height:255px}.member-access{padding:25px 19px}.member-access-button{white-space:normal}.footer-brand{font-size:27px}}
@media(max-width:350px){.brand-logo{width:84px}.brand-name{font-size:10px}.brand-title small{font-size:6px}.hero h1{font-size:28px}}

/* Ver.6: supplied performance photo; keep the existing white header */
.hero-photo{background-image:url('choir-hero.jpg');background-position:center 52%;filter:none}
.hero-shade{background:linear-gradient(90deg,rgba(9,19,31,.82) 0%,rgba(9,19,31,.53) 29%,rgba(9,19,31,.08) 65%,rgba(9,19,31,.04) 100%)}
.hero h1{font-size:clamp(39px,5vw,72px);line-height:1.5;text-shadow:0 2px 15px #0007}
.hero-lead{text-shadow:0 2px 10px #0009}.feature-photo{background-image:linear-gradient(0deg,#10203630,#10203612),url('choir-activity.jpeg')}
@media(max-width:768px){.hero-photo{background-position:57% center}.hero-shade{background:linear-gradient(90deg,rgba(9,19,31,.89),rgba(9,19,31,.43) 75%,rgba(9,19,31,.28))}}
@media(max-width:480px){.hero-photo{background-position:54% center}.hero-shade{background:linear-gradient(90deg,rgba(9,19,31,.87),rgba(9,19,31,.47))}}
/* Ver.6.1: About the Choir image replacement */
.feature-photo { background-position: center 38%; background-size: cover; }

/* Ver.6.2: recruitment section photo (user supplied); retain layout and text */
.join{
  background-image:linear-gradient(180deg,rgba(9,19,31,.66) 0%,rgba(9,19,31,.58) 48%,rgba(9,19,31,.65) 100%),url('choir-join.jpg');
  background-size:cover;
  background-position:center 48%;
  background-repeat:no-repeat;
  min-height:610px;
  display:flex;
  align-items:center;
}
.join-inner{position:relative;z-index:1}
.join h2,.join p{text-shadow:0 2px 12px rgba(0,0,0,.55)}
.join .button-outline{background:rgba(10,22,35,.28);backdrop-filter:blur(2px)}
@media(max-width:768px){.join{min-height:530px;background-position:center 45%;padding:85px 0}}
@media(max-width:480px){.join{min-height:510px;background-position:center 45%;background-image:linear-gradient(180deg,rgba(9,19,31,.78),rgba(9,19,31,.63)),url('choir-join.jpg')}}

/* Ver.6.3: SNS and contact icons */
.link-tile .social-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:#fff;border:1px solid #d8d2c7;color:#101e30;transition:transform .2s,background .2s}
.link-tile .social-icon svg{display:block;width:29px;height:29px}
.link-tile .social-youtube{color:#e62117}
.link-tile .social-mail{color:#b18b48}
.link-tile:hover .social-icon{transform:translateY(-2px);background:#f9f5ed}
@media(max-width:768px){.link-tile .social-icon{width:46px;height:46px}.link-tile .social-icon svg{width:26px;height:26px}}

/* Upcoming concert, Ver.6.9 */
.upcoming-card{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);align-items:stretch;background:#fff;overflow:hidden}.upcoming-poster{display:block;background:#e9f2f8;min-height:400px}.upcoming-poster img{width:100%;height:100%;max-height:680px;object-fit:contain;display:block}.upcoming-info{padding:clamp(26px,4vw,64px)!important}.upcoming-info h3{font-size:clamp(24px,2.6vw,38px);line-height:1.5;margin:10px 0 16px}.upcoming-tag{color:#9b6e32;font-size:13px;font-weight:600;letter-spacing:.08em}.upcoming-subtitle{font-size:16px;font-weight:600;color:#243f56}.upcoming-facts{margin:26px 0;border-top:1px solid #e7e0d7}.upcoming-facts div{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #e7e0d7}.upcoming-facts dt{color:#9b6e32;font-size:13px}.upcoming-facts dd{margin:0;color:#20384b;font-size:14px;line-height:1.8}.upcoming-facts dd strong{margin-left:6px}.upcoming-note{line-height:1.9}.upcoming-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:22px 0}.upcoming-ticket{color:#193248;text-decoration:underline;text-underline-offset:4px}.upcoming-organizer{font-size:12px;color:#67717b;line-height:1.8}@media(max-width:780px){.upcoming-card{grid-template-columns:1fr}.upcoming-poster{min-height:0;max-height:480px;text-align:center}.upcoming-poster img{max-height:480px;object-fit:contain}.upcoming-info{padding:28px 22px!important}}