/* =========================================================
   ARARAT CREWS ― NEWS 共通スタイル
   （news.html / news-01〜.html で共有。TOPページのデザイン言語を継承）
   ========================================================= */
:root{
  --bg:#F4F5F7; --panel:#FFFFFF; --panel-blue:#EAEEF6;
  --ink:#14161B; --ink-2:#565B63; --ink-3:#969BA4;
  --navy:#1B2A4A; --navy-2:#16233D; --blue:#3350C7;
  --orange:#DE7A3C;
  --line:rgba(20,22,27,0.10); --line-2:rgba(20,22,27,0.06);
  --r:14px; --r-lg:28px; --r-pill:999px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.7;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
section{padding-left:56px;padding-right:56px;}
.inner{max-width:1240px;margin:0 auto;}

/* ---- スクロール・リビール ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:none;}

/* ---- 共通ラベル（和文＋英字） ---- */
.sec-label{display:flex;align-items:baseline;gap:16px;margin-bottom:26px;}
.sec-label .en{font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--navy);text-transform:uppercase;}
.sec-label .en::before{content:'';display:inline-block;width:22px;height:2px;background:var(--orange);margin-right:14px;vertical-align:middle;}
.sec-label .jp{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--ink-3);}

.logo-mark{display:inline-flex;align-items:center;gap:11px;color:var(--navy);}
.logo-img{display:block;width:auto;}

.btn{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:15px;letter-spacing:.03em;border-radius:var(--r-pill);padding:16px 32px;transition:background .25s,color .25s,transform .2s,border-color .25s;}
.btn .arw{transition:transform .25s;}
.btn:hover .arw{transform:translateX(4px);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-2);transform:translateY(-2px);}
.btn-line{background:transparent;color:var(--navy);border:1.5px solid rgba(27,42,74,.28);}
.btn-line:hover{border-color:var(--navy);background:rgba(27,42,74,.04);}
.btn-white{background:#fff;color:var(--navy);}
.btn-white:hover{transform:translateY(-2px);}

/* =========================================================
   NAV（TOPと共通）
   ========================================================= */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:space-between;align-items:center;padding:0 40px;height:84px;background:rgba(244,245,247,0.85);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,height .3s;}
#nav.scrolled{border-color:var(--line);height:72px;}
.nav-logo .logo-img{height:24px;}
.nav-right{display:flex;align-items:center;gap:36px;}
.nav-links{display:flex;gap:32px;list-style:none;}
.nav-links a{position:relative;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--ink);padding:8px 0;transition:color .2s;}
.nav-links a:hover{color:var(--navy);}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s;}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-cta{font-size:14px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--navy);border-radius:10px;padding:14px 26px;transition:background .25s;}
.nav-cta:hover{background:var(--navy-2);}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:52px;height:52px;background:var(--navy);border:none;border-radius:10px;cursor:pointer;z-index:210;}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:0 auto;transition:transform .3s,opacity .3s;}
#nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#nav.nav-open .nav-toggle span:nth-child(2){opacity:0;}
#nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-menu-mobile{display:none;}

/* =========================================================
   ページヘッダ（TOP hero のライン生成グラフィックを踏襲）
   ========================================================= */
.page-head{position:relative;padding:150px 56px 60px;overflow:hidden;background:linear-gradient(180deg,#EFF1F5 0%,var(--bg) 100%);}
.page-head-graphic{position:absolute;top:0;right:0;width:56%;height:100%;z-index:0;pointer-events:none;overflow:hidden;}
.page-head-graphic .lines{position:absolute;inset:-14% -5% 0 0;transform:skewY(-8deg);
  background:repeating-linear-gradient(0deg, rgba(27,42,74,.30) 0 1.4px, transparent 1.4px 9px);
  -webkit-mask-image:linear-gradient(105deg, transparent 0%, #000 40%, #000 76%, transparent 100%),linear-gradient(#000,transparent 92%);
  mask-image:linear-gradient(105deg, transparent 0%, #000 40%, #000 76%, transparent 100%),linear-gradient(#000,transparent 92%);
  -webkit-mask-composite:source-in;mask-composite:intersect;}
.page-head-graphic .node{position:absolute;border-radius:50%;background:var(--orange);}
.page-head-graphic .n1{width:12px;height:12px;top:54%;left:72%;}
.page-head-graphic .n2{width:8px;height:8px;top:28%;left:44%;background:var(--navy);}
.page-head .inner{position:relative;z-index:1;}
.breadcrumb{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--ink-3);margin-bottom:26px;flex-wrap:wrap;}
.breadcrumb a{transition:color .2s;}
.breadcrumb a:hover{color:var(--navy);}
.breadcrumb .sep{color:rgba(20,22,27,.22);}
.breadcrumb .cur{color:var(--ink-2);}
.page-title{font-size:clamp(38px,6.6vw,88px);font-weight:900;letter-spacing:.02em;line-height:1.1;color:var(--ink);}
.page-title-jp{display:block;font-size:clamp(15px,1.5vw,17px);font-weight:700;letter-spacing:.16em;color:var(--navy);margin-top:18px;}

/* =========================================================
   一覧（フィルタ＋記事リスト）
   ========================================================= */
.news-body{padding-top:26px;padding-bottom:120px;}
.filters{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line);}
.filter{font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink-2);background:transparent;border:1.5px solid rgba(20,22,27,.14);border-radius:var(--r-pill);padding:10px 22px;cursor:pointer;transition:background .22s,color .22s,border-color .22s;}
.filter:hover{border-color:rgba(27,42,74,.45);color:var(--navy);}
.filter.on{background:var(--navy);border-color:var(--navy);color:#fff;}

.post-list{display:flex;flex-direction:column;}
.post-item{display:grid;grid-template-columns:132px 72px 1fr auto;align-items:center;gap:24px;padding:28px 6px;border-bottom:1px solid var(--line);transition:padding-left .25s,background .25s;}
.post-item:hover{padding-left:16px;background:rgba(255,255,255,.6);}
.post-item.hide{display:none;}
.post-date{font-size:14px;color:var(--ink-3);font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums;}
.post-tag{justify-self:stretch;text-align:center;font-size:11px;font-weight:800;letter-spacing:.1em;border-radius:5px;padding:4px 6px;white-space:nowrap;}
.tag-info{color:var(--navy);border:1px solid rgba(27,42,74,.32);}
.tag-cafe{color:#B4652F;border:1px solid rgba(222,122,60,.5);background:rgba(222,122,60,.07);}
.tag-ai{color:var(--blue);border:1px solid rgba(51,80,199,.35);background:rgba(51,80,199,.05);}
.post-title{font-size:16px;font-weight:700;color:var(--ink);line-height:1.7;}
.post-arw{font-size:15px;color:var(--ink-3);transition:color .25s,transform .25s;}
.post-item:hover .post-arw{color:var(--orange);transform:translateX(5px);}
.list-empty{padding:56px 6px;font-size:14px;color:var(--ink-3);}
.list-note{margin-top:30px;font-size:13px;color:var(--ink-3);}

/* =========================================================
   記事詳細
   ========================================================= */
.article{padding-top:16px;padding-bottom:110px;}
.article-inner{max-width:820px;margin:0 auto;}
.article-meta{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.article-meta .post-tag{padding:4px 12px;}
.article-title{font-size:clamp(26px,3.4vw,42px);font-weight:900;letter-spacing:.01em;line-height:1.5;margin-bottom:34px;}
.article-figure{border-radius:var(--r-lg);overflow:hidden;background:var(--panel-blue);margin-bottom:44px;box-shadow:0 12px 34px rgba(20,22,27,.07);}
.article-figure img{width:100%;height:clamp(220px,38vw,420px);object-fit:cover;display:block;}
/* ブランドグラフィック（線画）を使う記事向け ― 余白を締めて山の稜線を主役に */
.article-figure.graphic{background:linear-gradient(180deg,#EFF1F5 0%,#E6EAF1 100%);}
.article-figure.graphic img{height:clamp(170px,24vw,280px);object-position:center 78%;}
.article-content p{font-size:16px;color:var(--ink-2);line-height:2.15;font-weight:500;margin-bottom:28px;}
.article-content b{color:var(--ink);font-weight:700;}
.article-content h2{font-size:22px;font-weight:900;letter-spacing:.02em;line-height:1.6;color:var(--ink);margin:52px 0 20px;padding-left:16px;border-left:4px solid var(--orange);}
.article-content h3{font-size:17px;font-weight:800;letter-spacing:.02em;color:var(--navy);margin:36px 0 14px;}
.article-content ul{list-style:none;margin:0 0 28px;}
.article-content li{position:relative;font-size:15.5px;color:var(--ink-2);line-height:2;font-weight:500;padding-left:24px;margin-bottom:10px;}
.article-content li::before{content:'';position:absolute;left:2px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--orange);}
.article-content a:not(.btn){color:var(--navy);font-weight:700;border-bottom:1px solid rgba(27,42,74,.35);transition:color .2s,border-color .2s;}
.article-content a:not(.btn):hover{color:var(--orange);border-color:var(--orange);}
.article-note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:var(--r);padding:26px 30px;margin:40px 0;}
.article-note p{font-size:14.5px;color:var(--ink-2);line-height:1.95;margin:0;}
.article-note p+p{margin-top:12px;}
.article-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:44px;}

/* 前後の記事 */
.pager{max-width:820px;margin:0 auto;padding-top:44px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;}
.pager-link{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink-2);font-weight:600;transition:color .25s;max-width:280px;}
.pager-link .dir{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--ink-3);}
.pager-link:hover{color:var(--navy);}
.pager-link.next{text-align:right;justify-self:end;}
.pager-link.empty{pointer-events:none;opacity:.35;}
.pager-index{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--navy);border:1.5px solid rgba(27,42,74,.25);border-radius:var(--r-pill);padding:11px 22px;transition:background .25s,color .25s;}
.pager-index:hover{background:var(--navy);color:#fff;}

/* =========================================================
   CONTACT 帯
   ========================================================= */
.cta{padding-top:90px;padding-bottom:90px;background:var(--navy);color:#fff;position:relative;overflow:hidden;}
.cta-graphic{position:absolute;top:0;right:0;width:50%;height:100%;z-index:0;opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1.2px, transparent 1.2px 10px);
  -webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 100%);mask-image:linear-gradient(100deg,transparent 40%,#000 100%);
  transform:skewY(-8deg);}
.cta .inner{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap;}
.cta h2{font-size:clamp(24px,3vw,38px);font-weight:900;letter-spacing:.02em;line-height:1.45;}
.cta p{font-size:15px;color:rgba(255,255,255,.6);font-weight:500;margin-top:14px;max-width:520px;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:#EEF0F4;padding:56px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;}
.footer-logo .logo-img{height:22px;}
.footer-links{display:flex;gap:30px;flex-wrap:wrap;}
.footer-links a{font-size:13px;letter-spacing:.05em;color:var(--ink-2);font-weight:700;transition:color .25s;}
.footer-links a:hover{color:var(--navy);}
.footer-copy{font-size:12px;letter-spacing:.04em;color:var(--ink-3);width:100%;text-align:right;}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media(max-width:900px){
  section{padding-left:22px;padding-right:22px;}
  #nav{padding:0 20px;height:68px;}
  #nav.scrolled{height:62px;}
  .nav-right .nav-links,.nav-right .nav-cta{display:none;}
  .nav-toggle{display:flex;}
  .nav-menu-mobile{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s,visibility .3s;z-index:205;}
  #nav.nav-open ~ .nav-menu-mobile{opacity:1;visibility:visible;transform:none;}
  .nav-menu-mobile a{font-size:20px;font-weight:800;color:var(--ink);}
  .nav-menu-mobile .nav-cta{display:inline-flex;color:#fff;}
  .page-head{padding:104px 22px 40px;}
  .page-head-graphic{width:100%;opacity:.45;}
  .news-body{padding-bottom:80px;}
  .post-item{grid-template-columns:auto 1fr;gap:10px 16px;padding:22px 4px;}
  .post-tag{justify-self:start;width:72px;}
  .post-title{grid-column:1 / -1;font-size:15.5px;}
  .post-arw{display:none;}
  .article{padding-bottom:76px;}
  .article-content h2{font-size:19.5px;margin-top:40px;}
  .article-figure{margin-bottom:34px;}
  .pager{grid-template-columns:1fr;text-align:left;}
  .pager-link.next{text-align:left;justify-self:start;}
  .pager-index{justify-self:start;}
  .cta{padding-top:66px;padding-bottom:66px;}
  footer{padding:40px 22px;flex-direction:column;align-items:flex-start;}
  .footer-copy{text-align:left;}
}