:root{ 
  --bg:#0b0b0c; 
  --fg:#fff; 
  --muted:#b9b9c6; 
  --brand:#66ccff; 
  --brand-2:#a33fff; 
  --accent:#5fd4aa; 
  --surface:#151519; 
  --surface-2:#1b1b21; 
  --card:#121219; 
  --radius:14px; 
  --ease:cubic-bezier(.22,1,.36,1); 
  --content-max: 1200px; 
  --outer-pad: clamp(16px, 4vw, 48px); 
  --edge: clamp(24px, 6vw, 72px); /* 角からのオフセット */ 
  --shadow: 0 3px 16px rgba(0, 0, 0, 0.35); 
  --font-serif: "Noto Serif JP", Georgia, "Times New Roman", Times, serif; 
  --font-sans: "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 
*{box-sizing:border-box}

/* ========== 全体の余白統一 ========== */ 
body { 
  margin: 0; 
  font-family: var(--font-sans); 
  background: var(--bg); 
  color: var(--fg); 
  line-height: 1.8; 
}
/* === Slideshow === */ 
.slideshow{position:relative;max-width:min(100%,100vw)} 
.slideshow__viewport{ position:relative;overflow:hidden;background-color:#911144cc;aspect-ratio:16/9; } 
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.01); transition:.6s var(--ease), transform .6s var(--ease)} 
.slide.is-active{opacity:1;transform:none;z-index:1} 
.slide img{width:100%;height:100%;object-fit:cover;display:block;padding: 1.5rem;}

/* Dots */ 
.dots{display:flex;gap:1rem;justify-content:center;margin-top: 1.5rem;} 
.dots [role="tab"]{ width:40px;height:7px;border-radius:4px;cursor:pointer; 
  transition:transform .2s var(--ease);margin: 2rem 0; background:#ae85a0;border:0;transform:scale(1.2) }
.dots [aria-selected="true"]{ background:linear-gradient(90deg,var(--fg),var(--muted)); transform:scale(1.25) } 
.dots [role="tab"]:focus-visible{outline:2px solid var(--brand);outline-offset:2px} 
.dots [role="tab"]:hover, 
.dots [role="tab"]:focus-visible { background-color: #774e69; outline: none; }

/* === Hero Overlay === */ 
.heroOverlay{ font-family: "Noto Serif JP", Georgia, "Times New Roman", Times, serif; 
  font-size:1.5em;position:absolute;inset:0;z-index:3;display:grid;place-items:center; 
  pointer-events:none;isolation:isolate } 
  .heroOverlay__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.28))} 
  .heroOverlay__copy{ position:relative;max-width:min(1000px,92vw);margin-inline:auto; padding:clamp(24px,6vh,78px) clamp(16px,5vw,42px);
    text-align:center;color:#fff; pointer-events:auto;text-shadow:0 2px 24px rgba(0,0,0,.35) }

/* Split headline animation */ 
.split{font-size:clamp(36px,6vw,48px);line-height:1.5;margin:.5em 0.5em;font-weight:800} 
.split span{display:inline-block;transform:translateY(1.5em);opacity:0;} 
.split.is-ready span{transition:transform .8s var(--ease),opacity .8s var(--ease)} 
.split.is-on span{transform:translateY(0);opacity:1} 
.split.is-on span:nth-child(odd){transition-delay:.04s} 
.split.is-on span:nth-child(even){transition-delay:.16s}
@media (max-width:480px){ .heroOverlay__copy{padding:24px 16px} }
@media (prefers-reduced-motion: reduce){ .split span{transform:none;opacity:1} }

/* ========== IntroとParallaxの共通構造 ========== */ 
.intro, .parallax_content { position: relative; min-height: clamp(480px, 100vh, 900px); display: flex; align-items: center; 
  justify-content: flex-start; width: min(var(--content-max), 100%); border-radius: var(--radius); overflow: hidden; 
  margin-inline: auto; margin-bottom: -1rem;background-size: cover; background-position: center; background-repeat: no-repeat;
  background-attachment: fixed; }
/* 背景画像を下層に固定して、本文と重ねる */ 
.intro > .parallax_content, .parallax_content { 
  max-width: min(var(--content-max), 100%); margin-bottom: 3rem; /*3枚目以降の画像の上下の余白*/ 
  background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
@media (max-width: 768px) { .intro > .parallax_content, .parallax_content{ background-attachment: scroll; } }

/* 各セクション間の間隔（下三枚の隙間） */ 
.layer { display: grid; margin-inline: 5rem 5rem; }
/* ========== 角丸影など統一 ========== */ 
.intro, .parallax_content { border-radius: var(--radius); box-shadow: var(--shadow); } 
/* スクラムで明度を整える（文字が浮きやすくなる） */ 
.parallax_content::before { content: ""; position: absolute; inset: 0; 
  background: linear-gradient(180deg, rgba(59, 59, 59, 0.35), rgba(46, 46, 46, 0.3)); z-index: 1; }
/* 文字レイヤー（前面） */ 
.intro__inner { position: relative; z-index: 2; max-width: 72ch; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.4);
  padding: clamp(16px, 5vw, 32px);box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word;}
/* ===== 超小型端末（480px以下） ===== */
@media (max-width: 480px) {
.intro__inner {max-width: 94vw; padding: 1rem; left: 24px;}
.intro__title {font-size: 1.1rem;}}

/* ===== スマホ幅でレイアウト崩れ防止 ===== */
@media (max-width: 768px) {
.intro__inner {max-width: 92vw;/* 画面幅に合わせる */
    left: 50%;                /* 中央寄せ */
    transform: none;
    padding: 1.25rem 1rem;    /* 内側の余白を広めに */
    font-size: 0.95rem;       /* 文字サイズを少し小さく */
    line-height: 1.6;}}
@media (max-width: 768px) {
#intro-2 .intro__inner {text-align: center;left: 50%; right: auto;transform: translateX(-50%);}}

.intro__title {font-size: clamp(22px, 5vw, 28px);line-height: 1.3;}
.intro__content p {font-size: clamp(14px, 4vw, 17px); line-height: 1.7;}



/* ========== テキスト領域の統一 ========== */ 
.intro__inner, .title_desc { position: absolute; top: var(--edge); left: var(--edge); right: auto; max-width: 
  clamp(260px, 32vw, 520px); color: var(--fg); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); font-family: var(--font-serif); z-index: 1; } 
  #intro-1{margin-top: 2rem;}

/* 1枚目と4枚目の文字色を黒に変更 */
.img_bg_00 .title_desc {
  color: #000;
  font-style: bold;
  text-shadow: #000;
}

/* ===== タイトル・本文書式 ===== */ 
.intro__title, .title_desc h3 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(28px, 4vw, 40px); 
  line-height: 1.25; margin-bottom: 0.6em; }
.intro__content p, 
.title_desc p { 
  font-size: clamp(16px, 1.8vw, 18px); line-height: 1.8; margin-bottom: 1.2em; font-weight: 400; }

/* ========== リビールアニメ共通 ========== */ 
.intro .intro__inner [data-reveal] span, 
.title_desc [data-reveal] span { display: inline-block; opacity: 0; transform: translateY(0.6em); 
  transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: calc(var(--i) * 40ms); } 
.intro .intro__inner.is-in [data-reveal] span, .title_desc.is-in [data-reveal] span { opacity: 1; transform: none; } 
.img_bg_00::before { content: ""; position: absolute; inset: 0; 
  background: linear-gradient(180deg, rgba(146, 143, 143, 0.35), rgba(197, 191, 191, 0.3)); z-index: 1; }

/* 動画酔い対策：OS側で“簡易動作”を選んでいる人には静的表示 */ 
@media (prefers-reduced-motion: reduce){ 
  .title_desc [data-reveal] span{ opacity:1 !important; transform:none !important; transition:none !important; } }
/* モバイルでの fixed は端末によってカクつくので必要に応じてオフ */ 
@media (max-width:768px){ 
  .parallax_content{ background-attachment:scroll; height:100vh } } 
  .img_bg_00{ background-image:url(/demo-images/Desktop\ -\ 1.webp) } 
  .img_bg_01{ background-image:url(/demo-images/aaron-burden-webp.webp) } 
  .img_bg_02{ background-image:url(/demo-images/tomoki-iwata.webp) } 
  .img_bg_03{ background-image:url(/demo-images/library1.webp) } 
  .img_bg_04{ background-image:url(/demo-images/Tax\ -\ 1.webp) }

.title_desc p { margin-bottom: 1.2em; /* 文字ブロックごとに余白 */ line-height: 1.7; }

/* parallax: 2枚目（.img_bg_01）のテキストを右側に配置 */
.parallax_box figure.img_bg_01 > .title_desc,
.parallax_box .img_bg_01 .title_desc {
  left: auto; /* 左配置を解除 */
  right: var(--edge); /* 右からのオフセット */
  text-align: right; /* 文字揃えを右に */
}

@media (max-width: 768px) {
  /* モバイルでは読みやすさのため左寄せに戻す */
  .parallax_box figure.img_bg_01 > .title_desc,
  .parallax_box .img_bg_01 .title_desc {
    left: 24px !important;
    right: 20px !important;
    text-align: left !important;
    max-width: calc(100% - 60px) !important;
  }
}

/* intro の2番目（#intro-2）の本文ブロックを右寄せにする場合の明示的ルール */
#intro-2 .intro__inner {
  left: auto !important;
  right: var(--edge) !important;
  text-align: left !important;
}

@media (max-width: 768px) {
  /* モバイルでは元に戻す */
  .parallax_box figure.img_bg_03 > .title_desc,
  .parallax_box .img_bg_03 .title_desc,
  #intro-2 .intro__inner {
    left: 24px !important;
    right: 20px !important;
    text-align: left !important;
    max-width: calc(100% - 60px) !important;
  }
}

/* フッター */ 
.site-footer{ z-index:2; color:rgb(200,200,205); text-align:center; padding: 20px 0 }

.dots [role="tab"]{ min-width: 40px; min-height: 7px; display:inline-flex; align-items:center; justify-content:center; font-size: 0; }
.dots [role="tab"]:focus-visible{ outline: 3px solid #66ccff; outline-offset: 3px; box-shadow: 0 0 0 4px rgba(102,204,255,.25); }
@media (prefers-reduced-motion: reduce){ 
  .slide{ transition: none !important; transform: none !important; } 
  .split span{ transition: none !important; transform: none !important; opacity:1 !important; } } 
  .layer{ display:grid; margin-inline: clamp(16px, 5vw, 48px); } .slide{ pointer-events: none; } 
  .slide.is-active{ pointer-events: auto; }
/* ===== Hero Overlay Responsive Fix ===== */ 
@media (max-width: 768px) { 
  .heroOverlay__copy { max-width: 90vw; padding: 1.5rem 1rem; } 
  .split { font-size: clamp(20px, 3vw, 28px); line-height: 1.3; word-wrap: break-word; white-space: normal; text-align: center;} }
@media (max-width: 480px) { 
.split { font-size: clamp(16px, 6vw, 22px); line-height: 1.2; }  
.split span:first-child {
    font-size: 1.2em;}}
/* ===== スマホだけパララックス1・2枚目の文字位置を修正 ===== */
@media (max-width: 768px) {
  /* 2枚目：Education no longer…（intro） */
  #intro-2 .intro__inner {
    left: 24px !important;
    right: 20px !important;
    transform: none !important; /* 中央寄せ解除 */
    max-width: calc(100% - 60px);
    text-align: left;
  }
}
@media (max-width: 768px) {
  section.parallax_box:first-of-type figure.img_bg_00 > .title_desc {
    left: 24px !important;
    right: 20px !important;
    max-width: calc(100% - 60px) !important;
  }
}

/* ========== iPad 専用：Preparing 表示 ========== */
@media screen and (min-width: 768px) and (max-width: 1024px) {

  /* 既存のコンテンツは非表示 */
  main,
  header,
  footer,
  section {
    display: none !important;
  }

  /* 代わりに表示するメッセージ */
  body::before {
    content: "Preparing for iPad";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;

    background: #0b0b0c;
    color: #ffffff;

    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    text-align: center;
  }
}