/* ===== トップページ専用（index / home / 404）=====
   ※ sd-○○ のクラス名はページごとに意味が違うので、トップ以外では読み込まないこと */

/* 木漏れ日動画：灰色 → 日が差したような暖かい色に */
.sd-165{ mix-blend-mode:normal !important; }
.sd-171 video, .sd-172 video{ filter:brightness(1.28) contrast(.78) sepia(.45) hue-rotate(-18deg) saturate(1.5); }

/* 動画の下端：下に向かってふわっと消す（.sd-171 はPC用、.sd-172 はスマホ・狭い画面用の動画） */
.sd-171, .sd-172{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 45%,rgba(0,0,0,.5) 70%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 45%,rgba(0,0,0,.5) 70%,transparent 100%);
}

/* 動画の上に重なってくるWorks欄・フッター：上端を透明→地色のグラデーションにして境目をなくす
   （色はサイト全体の地色 #fffcfb。ほかの要素の上に重ねないので文字やボタンを隠さない） */
.sd-31{ background:linear-gradient(to bottom, rgba(255,252,251,0) 0, #fffcfb 200px) !important; }
footer.symbol-3{ background:linear-gradient(to bottom, rgba(255,252,251,0) 0, #fffcfb 160px) !important; }

/* Works：タイトルと小見出し（KYOKAN KOZA ／ Digital Learning Materials）を1行に。
   画面が狭めのときは文字を少し小さくして、1行のまま揃える */
.sd-31 > * > :nth-child(2) > div{
  flex-direction:row !important; flex-wrap:nowrap !important;
  align-items:baseline !important; white-space:nowrap;
}
@media (min-width:768px){
  .sd-31 > * > :nth-child(2) > div > p{ font-size:clamp(12px,1.18vw,15px) !important; }
  .sd-31 > * > :nth-child(2) > div > div p{ font-size:clamp(9.5px,.94vw,12px) !important; }
}

/* ===== トップの欧文（UCHINOKO TO と同じ組み方：左下の英文・右端の縦書き・右下の年号） ===== */
.dr-hero-type{
  position:absolute; top:0; left:0; right:0; height:100vh; height:100svh;
  z-index:1; pointer-events:none; /* 動画(0)より上、ヘッダー・本文(2以上)より下 */
  font-family:Montserrat,"Helvetica Neue",Arial,sans-serif; font-weight:400;
  color:#716d6f; text-transform:uppercase;
  animation:drHeroIn 1.6s ease .6s both;
}
.dr-hero-type p{ margin:0; }
.dr-hero-lead{
  position:absolute; left:48px; bottom:44px; max-width:330px;
  font-size:9.5px; line-height:2.1; letter-spacing:.18em;
}
.dr-hero-side{
  position:absolute; right:28px; top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; font-size:9.5px; letter-spacing:.3em;
}
.dr-hero-est{
  position:absolute; right:48px; bottom:44px;
  font-size:10px; letter-spacing:.28em;
}
/* スクロールしたら欧文はそっと消す（ヘッダーと重ならないように） */
.dr-hero-type{ transition:opacity .5s ease; }
.dr-is-scrolled .dr-hero-type{ opacity:0 !important; }
@keyframes drHeroIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (max-width:767px){
  .dr-hero-lead{ left:20px; bottom:28px; max-width:34%; font-size:8px; letter-spacing:.12em; } /* 中央の SCROLL に重ならない幅 */
  .dr-hero-side{ right:12px; font-size:8.5px; }
  .dr-hero-est{ right:20px; bottom:28px; font-size:9px; }
}
@media (prefers-reduced-motion:reduce){ .dr-hero-type{ animation:none; } }

/* News：長いお知らせも一覧の幅の中で折り返す（日付は固定幅、本文は残りの幅） */
.sd-132 .sd-134{ flex:1 1 0 !important; min-width:0 !important; max-width:none !important; width:auto !important; }
.sd-132 .sd-133{ flex:0 0 auto !important; }

/* News：行ごとの上下の線が重なって2本分の太さになっていたので、2行目以降は上の線をなくして1本に */
.sd-132 + .sd-132{ border-top:0 !important; }

/* トップ中央の「Dritto」ロゴは画面に固定されていて、影つきの画像のため
   スクロール中に本文のうしろで灰色のもやとして透けて見えていた → スクロールしたら消す */
.sd-168{ transition:opacity .5s ease; }
.dr-is-scrolled .sd-168{ opacity:0 !important; }