/*
Theme Name: Afterfive Suit
Theme URI: https://afterfive-suit.com/
Description: Afterfive Suit Original WordPress Theme
Version: 1.0
*/


  :root{
    --bg:#f2efe8;
    --bg-soft:#ece7dc;
    --ink:#1b1b1b;
    --ink-soft:#5b5b56;
    --green:#233e3c;
    --green-light:#3e625e;
    --line:#d8d2c4;
    --white:#ffffff;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Noto Sans JP', sans-serif;
    font-weight:300;
    line-height:1.9;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:'Shippori Mincho', serif; font-weight:500;}
  .en-display{font-family:'Cormorant Garamond', serif;}
  a{color:inherit; text-decoration:none;}
  img,svg{display:block; max-width:100%;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
  @media (max-width:640px){ .wrap{padding:0 22px;} }
 
  .eyebrow{
    font-family:'Noto Sans JP', sans-serif;
    font-size:11px;
    letter-spacing:0.28em;
    color:var(--green);
    font-weight:500;
  }
 
  /* ===== HEADER ===== */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 44px;
    color:#fff;
    mix-blend-mode:difference;
  }
  .logo{display:flex; align-items:center; gap:12px;}
  .logo img{height:88px; width:auto;}
  .logo-text{font-family:'Cormorant Garamond', serif; font-size:22px; letter-spacing:0.12em; line-height:1;}
  .logo-text small{display:block; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:11px; letter-spacing:0.05em; opacity:.8; margin-top:3px;}
  header nav{display:flex; gap:36px; font-size:12.5px; letter-spacing:.1em;}
  header nav a{position:relative; padding-bottom:4px;}
  header nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .35s ease;}
  header nav a:hover::after{width:100%;}
  .header-cta{border:1px solid #fff; padding:10px 22px; font-size:11.5px; letter-spacing:.12em;}
@media (max-width:900px){header nav{display:none;}header{position:absolute;top:0;left:0;right:0;padding:20px 24px;transform:none;}}
 
  /* ===== HERO ===== */
  .hero{
    height:100svh; min-height:640px;
    position:relative; background:var(--green); overflow:hidden;
    display:flex; align-items:flex-end;
  }
  .hero-art{position:absolute; inset:0; width:100%; height:100%;}
  .hero-veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,30,29,0.15) 0%, rgba(20,30,29,0.25) 55%, rgba(15,24,23,0.85) 100%);}
  .hero-top{
    position:absolute; top:130px; left:44px; z-index:2; color:#fff;
    font-family:'Shippori Mincho', serif; font-size:15px; letter-spacing:.03em; line-height:2;
  }
  .hero-top b{font-weight:700;}
  .hero-bottom{
    position:relative; z-index:2; width:100%; padding:0 40px 56px; color:#fff;
  }
  .hero-mark{display:flex; align-items:center; gap:22px; margin-bottom:8px;}
  .hero-mark img{width:52px; height:34px;}
  .hero-word{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    font-size:clamp(72px, 15vw, 220px);
    line-height:0.85;
    letter-spacing:0.02em;
  }
  .hero-sub-line{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-top:20px; flex-wrap:wrap; gap:20px;
  }
  .hero-tagline{font-family:'Shippori Mincho', serif; font-size:14px; letter-spacing:.08em; color:rgba(255,255,255,0.85); max-width:420px;}
  .dots{display:flex; gap:8px;}
  .dots span{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.35);}
  .dots span.on{background:#fff;}
 
  /* ヒーローと次セクションの間の余白 */
  .section-gap{height:90px; background:var(--bg);}
  @media (max-width:640px){ .section-gap{height:48px;} }
 
  /* ===== SPLIT: image + text (Philosophy) ===== */
  .split{display:grid; grid-template-columns:1fr 1fr;}
  .split .visual{aspect-ratio:1/1; overflow:hidden; position:relative;}
  .split .visual svg{width:100%; height:100%;}
  .split .text-col{display:flex; flex-direction:column; justify-content:center; padding:70px 80px;}
  .split .text-col h2{font-size:clamp(28px,3.2vw,44px); line-height:1.55; margin:20px 0 26px;}
  .split .text-col p{font-size:13.5px; color:var(--ink-soft); margin-bottom:18px; max-width:480px;}
  .btn-arrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:12px; letter-spacing:.14em; font-weight:500;
    margin-top:14px; padding-bottom:6px; border-bottom:1px solid var(--ink);
    width:fit-content;
  }
  @media (max-width:900px){
    .split{grid-template-columns:1fr;}
    .split .text-col{padding:56px 28px;}
  }
 
  /* ===== COLLECTIONS (3-col like OUR BRANDS) ===== */
  .collections{padding:130px 0 110px; background:var(--bg);}
  .collections h2.en-display{
    font-size:clamp(34px,4.2vw,52px); font-weight:500; letter-spacing:.04em; margin-bottom:60px;
  }
  .col-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:46px;}
  .col-item{position:relative;}
  .col-item .tag{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:13px; color:var(--green); margin-bottom:14px; display:block;}
  .col-item .frame{aspect-ratio:3/4; overflow:hidden; position:relative;}
  .col-item .frame svg{width:100%; height:100%;}
  .col-item .side-label{
    position:absolute; top:14px; right:-6px;
    writing-mode:vertical-rl;
    font-family:'Shippori Mincho', serif;
    font-size:12px; letter-spacing:.15em; color:#fff;
    z-index:2;
    text-shadow:0 1px 6px rgba(0,0,0,0.35);
  }
  .col-item .name{margin-top:16px; font-family:'Shippori Mincho', serif; font-size:16px; letter-spacing:.04em;}
  @media (max-width:900px){ .col-grid{grid-template-columns:1fr; gap:56px;} }
 
  /* ===== FULL BLEED BREAK ===== */
  .bleed{height:70vh; min-height:420px; position:relative; overflow:hidden;}
  .bleed svg{width:100%; height:100%;}
 
  /* ===== IMAGE BRIDGE (写真が2つのセクションの背景色をまたぐ) ===== */
  .image-bridge{
    display:grid;
    grid-template-columns:64% 36%;
    grid-template-rows:auto auto;
  }
  .image-bridge .photo{
    grid-column:1; grid-row:1 / 3;
    min-height:440px;
    overflow:hidden; position:relative;
  }
  .image-bridge .photo svg{width:100%; height:100%;}
  .image-bridge .band{
    grid-column:2;
    display:flex; flex-direction:column; justify-content:center;
    padding:60px 56px;
  }
  .image-bridge .band-a{grid-row:1; background:var(--bg); min-height:260px;}
  .image-bridge .band-b{grid-row:2; background:var(--bg-soft); min-height:380px;}
  .image-bridge .band .eyebrow{margin-bottom:16px;}
  .image-bridge .band h3{font-size:22px; line-height:1.6; margin-bottom:14px;}
  .image-bridge .band p{font-size:13px; color:var(--ink-soft);}
  @media (max-width:900px){
    .image-bridge{grid-template-columns:1fr;}
    .image-bridge .photo{grid-column:1; grid-row:1; min-height:360px;}
    .image-bridge .band{grid-column:1;}
    .image-bridge .band-a{grid-row:2;}
    .image-bridge .band-b{grid-row:3;}
  }
 
  /* ===== NEWS ===== */
  .news{background:var(--bg-soft); padding:120px 0;}
  .news-grid{display:grid; grid-template-columns:280px 1fr; gap:60px;}
  .news h2{font-size:clamp(30px,3.6vw,44px); line-height:1.3;}
  .news-item{
    display:grid; grid-template-columns:1fr 160px; gap:40px;
    padding:38px 0; border-top:1px solid var(--line);
    align-items:center;
  }
  .news-item:last-child{border-bottom:1px solid var(--line);}
  .news-date{font-size:12px; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:10px;}
  .news-item h3{font-size:19px; font-weight:600; margin-bottom:12px;}
  .news-item p{font-size:13px; color:var(--ink-soft); max-width:520px;}
  .news-read{display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:11.5px; letter-spacing:.12em; font-weight:500;}
  .news-thumb{aspect-ratio:1/1; overflow:hidden;}
  .news-thumb svg{width:100%; height:100%;}
  @media (max-width:900px){
    .news-grid{grid-template-columns:1fr;}
    .news-item{grid-template-columns:1fr; gap:16px;}
    .news-thumb{order:-1; aspect-ratio:16/9;}
  }
 
  /* ===== MADE IN section (split reversed) ===== */
  .madein .visual{order:2;}
  .madein .text-col{order:1; background:var(--bg);}
  .btn-solid{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--green); color:#fff;
    padding:16px 30px; font-size:12px; letter-spacing:.14em; font-weight:500;
    width:fit-content; margin-top:8px;
  }
  .btn-solid:hover{background:var(--green-light);}
  @media (max-width:900px){
    .madein .visual{order:1;}
    .madein .text-col{order:2;}
  }


/* ===== STAFF SHOWCASE ===== */

.staff-showcase{padding:130px 0;background:var(--bg-soft);}
.staff-showcase-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px;}
.staff-showcase-head h2{font-size:clamp(34px,4.2vw,52px);font-weight:500;letter-spacing:.04em;margin-top:8px;}
.staff-showcase-note{font-size:11px;letter-spacing:.14em;color:var(--ink-soft);}

/* ===== 全体 ===== */

.staff-stage{display:grid;grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(120px,.42fr));height:620px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;}

/* ===== 左側メイン ===== */

.staff-main{position:relative;overflow:hidden;background:var(--bg-soft);border-right:1px solid var(--line);}
.staff-panel{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;}
.staff-panel:first-child{opacity:1;}
.staff-panel img{width:100%;height:100%;object-fit:cover;}
.staff-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.65) 100%);}

/* ===== メイン人物情報 ===== */

.staff-copy{position:absolute;left:44px;right:44px;bottom:40px;z-index:2;color:#fff;}
.staff-number{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;letter-spacing:.12em;margin-bottom:6px;}
.staff-copy h3{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,3vw,42px);font-weight:400;letter-spacing:.04em;line-height:1.1;}
.staff-role{font-size:10px;letter-spacing:.18em;margin-top:8px;opacity:.8;}
.staff-message{font-family:'Shippori Mincho',serif;font-size:13px;line-height:1.9;max-width:390px;margin-top:18px;}

/* ===== 右側スタッフ ===== */

.staff-thumb{position:relative;overflow:hidden;border-right:1px solid var(--line);cursor:pointer;}
.staff-thumb:last-child{border-right:0;}
.staff-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(.78);transition:transform .6s ease,filter .45s ease;}
.staff-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.48) 100%);pointer-events:none;}
.staff-thumb:hover img{transform:scale(1.035);filter:grayscale(0%) brightness(1);}

/* ===== 右側名前 ===== */

.staff-thumb-info{position:absolute;left:20px;bottom:22px;color:#fff;z-index:2;}
.staff-thumb-info span{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:12px;opacity:.75;}
.staff-thumb-info p{font-family:'Shippori Mincho',serif;font-size:13px;letter-spacing:.08em;margin-top:2px;}

/* ===== HOVERで左を切り替える ===== */

.staff-stage:has(.staff-thumb:nth-child(2):hover) .staff-panel{opacity:0;}
.staff-stage:has(.staff-thumb:nth-child(2):hover) .staff-panel:nth-child(1){opacity:1;}
.staff-stage:has(.staff-thumb:nth-child(3):hover) .staff-panel{opacity:0;}
.staff-stage:has(.staff-thumb:nth-child(3):hover) .staff-panel:nth-child(2){opacity:1;}
.staff-stage:has(.staff-thumb:nth-child(4):hover) .staff-panel{opacity:0;}
.staff-stage:has(.staff-thumb:nth-child(4):hover) .staff-panel:nth-child(3){opacity:1;}

/* ===== SMARTPHONE ===== */

@media (max-width:900px){
.staff-showcase{padding:80px 0;}
.staff-showcase-head{margin-bottom:32px;}
.staff-showcase-note{display:none;}
.staff-stage{grid-template-columns:repeat(3,1fr);grid-template-rows:440px 150px;height:auto;}
.staff-main{grid-column:1 / -1;border-right:0;border-bottom:1px solid var(--line);}
.staff-thumb{grid-row:2;}
.staff-copy{left:24px;right:24px;bottom:24px;}
.staff-message{font-size:12.5px;}
}
 
  /* ===== CTA BAND ===== */
  .cta-band{padding:130px 0; background:var(--green); color:#fff; text-align:center;}
  .cta-band .eyebrow{color:#cfe0dc; justify-content:center;}
  .cta-band h2{margin-top:20px; font-size:clamp(30px,4.2vw,50px);}
  .cta-band p{margin-top:20px; font-size:13.5px; color:rgba(255,255,255,0.75);}
  .cta-band .actions{margin-top:42px; display:flex; justify-content:center; gap:18px; flex-wrap:wrap;}
  .btn-outline{border:1px solid #fff; padding:15px 30px; font-size:12px; letter-spacing:.14em;}
  .btn-outline:hover{background:#fff; color:var(--green);}
  .btn-fill-light{background:#fff; color:var(--green); padding:15px 30px; font-size:12px; letter-spacing:.14em; font-weight:600;}
 
  footer{background:var(--ink); color:rgba(255,255,255,0.55); padding:36px 0; font-size:11px; letter-spacing:.05em;}
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
 
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease;}
  .reveal.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .reveal{opacity:1;transform:none;transition:none;} }



/* ===== JOURNAL SINGLE ===== */

.journal-single{background:var(--bg);}

/* ===== INTRO ===== */

.journal-intro{padding:180px 0 130px;background:var(--bg);}
.journal-intro-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:60px;}
.journal-date{font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.16em;color:var(--ink-soft);}
.journal-intro-grid{display:grid;grid-template-columns:1fr .72fr;gap:90px;align-items:center;}
.journal-title{display:flex;flex-direction:column;align-items:flex-start;}
.journal-title h1{font-size:clamp(38px,5vw,68px);line-height:1.45;letter-spacing:.03em;max-width:680px;}
.journal-scroll{display:inline-block;margin-top:46px;font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.18em;color:var(--ink-soft);}

/* 4:5 Instagram比率 */

.journal-main-photo{width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--bg-soft);}
.journal-main-photo img{width:100%;height:100%;object-fit:cover;}


/* ===== ARTICLE ===== */

.journal-article{padding:120px 0 140px;background:var(--bg-soft);}
.journal-article-inner{width:min(720px,calc(100% - 44px));margin:0 auto;}
.journal-article-inner p{font-size:14px;line-height:2.2;color:var(--ink-soft);margin-bottom:32px;}
.journal-article-inner h2{font-size:clamp(25px,3vw,34px);line-height:1.6;margin:80px 0 28px;}
.journal-article-inner h3{font-size:21px;line-height:1.7;margin:58px 0 22px;}

/* 本文に追加画像を入れた場合にも対応 */
.journal-article-inner img{width:100%;height:auto;margin:60px 0;}
.journal-article-inner figure{margin:60px 0;}
.journal-article-inner figure img{margin:0;}


/* ===== BACK ===== */

.journal-back{padding:70px 0 100px;background:var(--bg);}
.journal-back-link{display:inline-flex;align-items:center;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--ink);font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.16em;}


/* ===== NEXT JOURNAL ===== */

.journal-next{height:60vh;min-height:460px;position:relative;overflow:hidden;background:var(--green);}
.journal-next > a{position:absolute;inset:0;display:block;color:#fff;}
.journal-next-image{position:absolute;inset:0;background-size:cover;background-position:center 35%;transition:transform .8s ease;}
.journal-next-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,24,23,.15),rgba(15,24,23,.72));}
.journal-next-content{position:absolute;left:6vw;right:6vw;bottom:58px;z-index:2;}
.journal-next-label{font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.2em;margin-bottom:16px;}
.journal-next h2{font-size:clamp(28px,4vw,48px);line-height:1.45;max-width:760px;color:#fff;}
.journal-next-arrow{display:inline-block;margin-top:26px;font-size:11px;letter-spacing:.16em;}
.journal-next:hover .journal-next-image{transform:scale(1.025);}


/* ===== SMARTPHONE ===== */

@media (max-width:900px){
.journal-intro{padding:130px 0 75px;}
.journal-intro-top{margin-bottom:36px;}
.journal-intro-grid{grid-template-columns:1fr;gap:42px;}
.journal-title h1{font-size:34px;}
.journal-scroll{margin-top:26px;}
.journal-main-photo{width:100%;max-width:520px;margin:0 auto;}
.journal-article{padding:75px 0 90px;}
.journal-article-inner{width:calc(100% - 44px);}
.journal-article-inner p{font-size:13.5px;line-height:2.1;}
.journal-article-inner h2{margin-top:60px;}
.journal-back{padding:55px 0 70px;}
.journal-next{height:52vh;min-height:400px;}
.journal-next-content{left:24px;right:24px;bottom:38px;}

}

/* ===== 調整追加 ===== */
.single-post .journal-intro{padding-top:280px !important;}