/* =========================
   Base
========================= */
body{
    font-family:"Noto Serif JP",serif;
    margin:0;
    background:#fafafa;
    color:#333;
}

/* 背景画像うっすら */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
        linear-gradient(
            rgba(255,255,255,0.85),
            rgba(255,255,255,0.85)
        ),
        url("img/background.png");
    background-size:cover;
    background-position:center;
    z-index:-2;
}

/* =========================
   Header
========================= */
header{
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(6px);
    border-bottom:1px solid #e4b6c6;
    padding:16px 20px 20px;
    position:sticky;
    top:0;
    z-index:100;
}

.header-title{
    text-align:center;
    font-size:2em;
    font-weight:bold;
    color:#531d1d;
    margin-bottom:12px;
}

.nav{
    display:flex;
    justify-content:center;
    gap:80px;
    position:relative;
}

.nav-indicator{
    position:absolute;
    bottom:-6px;
    height:2px;
    background:#ffacac;
    transition:all .3s ease;
}

.nav-link{
    font-weight:bold;
    text-decoration:none;
    color:#444;
    padding:6px 4px;
}

.nav-link:hover{color:#000;}

.nav-indicator{
    position:absolute;
    bottom:-6px;
    height:2px;
    background:#ffacac;
    transition:.3s;
}

/* =========================
   Main container (完全中央)
========================= */
.container{
    width:90%;
    max-width:900px;
    margin:0;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    padding:50px 0;
}

/* =========================
   Section
========================= */
section{
    margin-bottom:80px;
    scroll-margin-top:120px;
}

h2,h3{text-align:center;}

h2{
    font-size:2em;
    border-bottom:2px solid #ffcfcf;
    padding-bottom:8px;
}

h3{
    font-size:1.5em;
    display:table;
    margin:40px auto 0;
    color:#531d1d;
    border-bottom:2px solid #ffcfcf;
    padding-bottom:4px;
}

h4{
    font-size:1.0em;
    display:table;
    margin:40px auto 0;
    color:#531d1d;
    border-bottom:2px solid #ffcfcf;
    padding-bottom:4px;
}

p{
    text-align:center;
    color:#5c3232;
}

/* =========================
   Image
========================= */
.center-img{
    display:block;
    margin:24px auto;
    max-width:100%;
    border-radius:10px;
}

/* =========================
   Book table
========================= */
.spec-table{
    width:100%;
    max-width:600px;
    margin:30px auto;
    border-collapse:collapse;
    font-size:1.1em;
}

.spec-table th,
.spec-table td{
    padding:12px 14px;
    border-bottom:1px solid #e5e5e5;
}

.spec-table th{
    text-align:right;
    width:35%;
    color:#531d1d;
    background:#fafafa;
}

.spec-table td{
    text-align:left;
}

/* =========================
   Sample
========================= */
.sample-grid{
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:24px;
}

.sample-grid img{
    width:200px;
    border-radius:8px;
    transition:.3s;
}

@media (hover:hover){
    .sample-grid img:hover{
        transform:scale(1.15);
        box-shadow:0 12px 25px rgba(0,0,0,.25);
        z-index:10;
    }
}

/* =========================
   Members
========================= */
.member-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:24px;
    margin-top:30px;
}

.member-card{
    text-align:center;
    text-decoration:none;
    color:#333;
    padding:18px;
    border-radius:14px;
    transition:.3s;
}

.member-card:hover{
    transform:translateY(-6px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.member-card img{
    width:96px;
    height:96px;
    border-radius:50%;
    margin-bottom:12px;
}

/* =========================
   Intro fade
========================= */
.intro{
    opacity:0;
    transform:translateY(30px);
    transition:.8s;
}
.intro.show{
    opacity:1;
    transform:none;
}

/* =========================
   Contact
========================= */

.contact-icons{
    display:flex;
    justify-content:center;
    gap:28px;
    margin-top:30px;
}

.contact-icons a{
    font-size:1.8em;
    color:#531d1d;
    transition:color .3s ease, transform .3s ease;
}

.contact-icons a:hover{
    color:#c55a78;          /* 桜ピンク */
    transform:translateY(-4px);
}


/* =========================
   Sakura
========================= */
.sakura-bg{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
}

.sakura{
    position:absolute;
    width:12px;
    height:12px;
    background:
      radial-gradient(circle at 30% 30%,
        #ffe6ef 0%,
        #f4a6c1 60%,
        #e88bb0 100%);
    border-radius:50% 50% 50% 0;
    opacity:.6;
    transform:rotate(45deg);
    animation:
      sakura-fall linear infinite,
      sakura-sway ease-in-out infinite;
}

@keyframes sakura-fall{
    from{transform:translateY(-10vh) rotate(0);}
    to{transform:translateY(110vh) rotate(360deg);}
}
@keyframes sakura-sway{
    0%{margin-left:0}
    50%{margin-left:20px}
    100%{margin-left:0}
}

/* =========================
   Twitter side (右固定)
========================= */
.side-tweet{
    position:fixed;
    top:140px;
    right:40px;
    width:360px;

    max-height:calc(100vh - 180px);
    overflow-y:auto;

    padding-right:6px; /* スクロールバー余白 */
}

/* スクロールバーを目立たなく */
.side-tweet::-webkit-scrollbar{
    width:6px;
}
.side-tweet::-webkit-scrollbar-thumb{
    background:rgba(200,140,160,.5);
    border-radius:3px;
}

@media(max-width:1200px){
    .side-tweet{display:none;}
}

/* =========================
   Footer
========================= */
footer{
    text-align:center;
    padding:20px 0;
    border-top:1px solid #ccc;
    color:#666;
}