html { box-sizing: border-box;}
*, *::before, *::after {box-sizing: inherit;}

:root {
    --font-body: "LeJeunePoster-Regular", serif;
    --font-body-italic: "LeJeunePoster-RegularItalic", serif;
    --font-heading: "GrotzecCond-Demibold",  sans-serif;
    --font-heading-italic: "GrotzecCond-DemiboldItalic", sans-serif;

    --text: #202954;
    --max-width: 720px;
}


body {
    font-family: var(--font-body, serif);
    font-size: 18px;
    line-height: 1.5;
    color: var(--text);
    background-color: #B0C4DE;
    margin: 0;
    padding: 0;
}


h2 {
    font-family: var(--font-body-italic);
    font-weight: bold;
    font-size: clamp(16px, 2.2vw, 20px);
    letter-spacing: 0.03em;
    color: #202954;
    margin: 0.4em 0 1.2em;
}

/* Section title */
h3, h4, h5, h6, h7 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(42px, 6vw, 72px);   
    color: #202954;
    text-align: center;
    margin: 0 auto 1.5em;
    scroll-margin-top: 80px;
  }

  .section-heading {
    text-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

.section-heading::after {
    content: "";
    display: block;
    width: 160px;
    height: 4px;
    background: #202954;
    margin: 12px auto 0;
    border-radius: 2px;
}

p {
    margin: 0 0 0.9rem;
}


@media only screen and (max-width: 500px) {
div.article {
    width: 50%;
    margin: 0 auto 0 auto;
}
}

@media only screen and (max-width: 501px) {
    div.article {
        width: 50%;
        margin: 0 auto 0 auto;
    }
    }

@media only screen and (max-width: 500px) {
    figure.smallpicture {
        width: 50%;
        float:left;
        margin-right: 20px;
    };
}

@media only screen and (max-width: 500px) {
    figure.smallpicture {
        width: 50%;
        float:left;
        margin-right: 20px;
    }
}

/* Subtitle Animation part */

.heading-waiting {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;              /* Loading とタイトルの間の余白 */
  }
  
  /* Loading 全体のラッパー */
  .loading-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }
  
  /* 「Loading...」の文字（ちょっとドット絵っぽく） */
  .loading-text {
    font-family: var(--font-heading);
    font-size: clamp(20px, 2.1vw, 26px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2048a8;
    text-shadow: 2px 2px 0 #000;   /* 影をつけてレトロっぽく */
  }
  
  /* フレーム部分（黒い枠＋白背景） */
  .loading-bar {
    position: relative;
    width: 220px;
    height: 26px;
    border: 3px solid #000;
    background: #ffffff;
    box-shadow: 0 3px 0 #444;
    border-radius: 2px;
    overflow: hidden;
  }
  
  /* 中の “ブロック” が左から右へ埋まっていくアニメーション */
  .loading-bar::before {
    content: "";
    position: absolute;
    inset: 4px;  /* 枠の内側に 1 段下げて配置 */
    background:
      repeating-linear-gradient(
        to right,
        #7CFC00 0px,
        #7CFC00 14px,
        #7CFC00 14px,
        #7CFC00 18px,
        transparent 18px,
        transparent 22px
      );
    transform-origin: left center;
    transform: scaleX(0);
    animation: loadBlocks 1.4s steps(8) infinite;
  }
  
  /* ブロックが溜まって→リセット、を繰り返す */
  @keyframes loadBlocks {
    0%   { transform: scaleX(0); }
    60%  { transform: scaleX(1); }
    100% { transform: scaleX(0); }
  }
  
/* ==== Price Tag Animation ==== */

/* ==== "A Price Tag on Opportunity" 用の値札アニメ ==== */

.price-heading {
    position: relative;
    display: inline-block;
    padding: 0 2rem; /* 少し左右に余白をあげてタグを置くスペースをつくる */
  }
  
  /* 共通スタイル：白いカード風の値札 */
  .price-heading::before,
  .price-heading::after {
    content: "$";
    position: absolute;
    width: 64px;
    height: 40px;
    background: #ffffff;
    border: 2px solid #202954;           /* 濃い青の枠線（サイトのテキスト色） */
    border-radius: 10px;
    box-shadow: 0 10px 18px rgba(0,0,0,0.18);
    color: #202954;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: top center;
    animation: priceTagSwing 2.4s ease-in-out infinite;
  }
  
  /* 左上のタグ */
  .price-heading::before {
    top: -52px;
    left: -88px;
    --tag-rot: -20deg;                 /* 基本の傾き */
  }
  
  /* 右下のタグ */
  .price-heading::after {
    bottom: -48px;
    right: -92px;
    --tag-rot: 16deg;                  /* 基本の傾き */
  }
  
  /* ゆらゆらアニメーション（少しだけスイング） */
  @keyframes priceTagSwing {
    0% {
      transform: rotate(var(--tag-rot));
    }
    50% {
      transform: rotate(calc(var(--tag-rot) + 4deg));
    }
    100% {
      transform: rotate(var(--tag-rot));
    }
  }
  
/* --- "The Cost of Staying" 用の札束アニメーション --- */

.cost-heading {
    position: relative;
    display: inline-block;
    padding: 0 3.5rem 2.5rem;  /* 札束がかぶらないように少し余白 */
  }
  
  /* 札束画像の共通スタイル */
  .cash-img {
    position: absolute;
    width: 90px;                 /* ここで大きさ調整 */
    opacity: 0.95;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,0.25));
    pointer-events: none;
  }
  
  /* 左上の札束（初期の小さな山） */
  .cash1 {
    left: -120px;
    top: -20px;
    transform: rotate(-12deg);
    animation: cashPile 4s ease-in-out infinite;
  }
  
  /* 右下から落ちてくる札束 1 */
  .cash2 {
    right: -130px;
    bottom: -40px;
    transform-origin: center bottom;
    animation: cashFall 3.2s ease-out infinite;
    animation-delay: 0.6s;
  }
  
  /* 左下から落ちてくる札束 2 */
  .cash3 {
    left: -60px;
    bottom: -70px;
    transform-origin: center bottom;
    animation: cashFall 3.6s ease-out infinite;
    animation-delay: 1.2s;
  }
  
  /* 山になって少しだけゆらゆらする */
  @keyframes cashPile {
    0%, 100% {
      transform: translateY(0) rotate(-12deg);
    }
    50% {
      transform: translateY(-6px) rotate(-8deg);
    }
  }
  
  /* 上からストンと落ちてきて軽くバウンド → その場でキープ */
  @keyframes cashFall {
    0% {
      opacity: 0;
      transform: translateY(-120px) scale(0.8) rotate(10deg);
    }
    60% {
      opacity: 1;
      transform: translateY(0) scale(1) rotate(-4deg);
    }
    80% {
      transform: translateY(-6px) scale(1) rotate(-2deg);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1) rotate(-3deg);
    }
  }
  
  /* モバイルでは少し小さく＆近づける */
  @media (max-width: 800px) {
    .cost-heading {
      padding: 0 2rem 2rem;
    }
  
    .cash-img {
      width: 70px;
    }
  
    .cash1 {
      left: -80px;
      top: -10px;
    }
  
    .cash2 {
      right: -80px;
      bottom: -30px;
    }
  
    .cash3 {
      left: -40px;
      bottom: -50px;
    }
  }
  
/* === 🌟 Hope Stars Animation (fixed version) === */

/* 見出し自体を基準にする */
.section-heading {
    position: relative; 
    display: inline-block; /* ← 中央揃えの基準を見出し幅に */
}

/* 星のスタイル */
.hope-star {
    font-size: 28px;
    position: absolute;
    top: 0;                /* ← 見出しの高さに揃える */
    transform: translateY(-50%); /* 文字の縦位置と自然に揃う */
    opacity: 0;
    animation: starFade 2.5s ease-in-out infinite;
}

/* 左の星 → 見出しの左隣 */
.star-left {
    left: -40px;           /* ← 星の位置（調整可能） */
    animation-delay: 0s;
}

/* 右の星 → 見出しの右隣 */
.star-right {
    right: -40px;          /* ← 星の位置（調整可能） */
    animation-delay: 1.2s;
}

/* 光るアニメーション */
@keyframes starFade {
    0% { opacity: 0; transform: translateY(-50%) scale(0.7); }
    40% { opacity: 1; transform: translateY(-50%) scale(1); }
    70% { opacity: 1; transform: translateY(-50%) scale(1.1); }
    100% { opacity: 0; transform: translateY(-50%) scale(0.7); }
}

/* ---------------------------
   💡 The Knowledge Gap 電球アニメ
---------------------------- */

/* 見出しの位置調整（既存のレイアウトは崩さない） */
.section-heading {
    position: relative;
    text-align: center;
  }
  
  /* 電球アイコン */
  .gap-bulb {
    font-size: 4.2rem;             /* 少し控えめに大きく */
    position: absolute;
    top: 50%;                      /* h2 の高さの中央あたり */
    transform: translateY(-40%) rotate(18deg); 
    right: -3.5rem;                /* ← ここで「Graduates」の右に置く */
    opacity: 0.8;                  /* 少し見えやすく */
    animation: bulbGlow 2.5s ease-in-out infinite;
    pointer-events: none;          /* クリック無効 → 安定 */
  }
  
  
  /* 光るアニメーション */
  @keyframes bulbGlow {
    0% {
      opacity: 0.3;
      transform: translateX(-50%) scale(0.95);
      filter: drop-shadow(0 0 0px rgba(255, 255, 150, 0.4));
    }
    50% {
      opacity: 1;
      transform: translateX(-50%) scale(1.15);
      filter: drop-shadow(0 0 8px rgba(255, 255, 150, 0.8));
    }
    100% {
      opacity: 0.3;
      transform: translateX(-50%) scale(0.95);
      filter: drop-shadow(0 0 0px rgba(255, 255, 150, 0.4));
    }
  }
  













figcaption {
    font-family: var(--font-body-italic);
    font-size: 0.9rem;
    color: #3a5599;
    text-align: left;
    margin-top: 0.4em;
    line-height: 1.4;
}

/*div.flourish-embed {
    width: 50%;
    float: left;
    margin: 2em 2em 2em 0;
    border-radius: 8px;
}*/


  /* 写真が縦長すぎるときの高さ制限 */
  .split-media img {
    max-height: 420px;
  }
  
  /* 右側のカードを横幅いっぱいに広げる */
  .split-card {
    flex: 1 1 0;
  }
  
  
  

.section-heading {
    margin-top: 1.5rem;
}



/* 左カラムは中身を中央に寄せる */
.media-left {
    display: flex;
    justify-content: center;
}

/* 写真やグラフの見た目 */
.media-img {
    width: 100%;
    max-width: 460px;           /* ここで「巨大」を止めている */
    height: 320px;              /* 必要なら固定高さ。いらなければ削除してOK */
    object-fit: cover;          /* トリミングしていい感じに収める */
    border-radius: 14px;
    box-shadow: 0 16px 30px rgba(0,0,0,0.25);
}



a:link {
    color: #202954;
    text-decoration: none;
}

a:visited {
    color:blue;
}

a:hover {
    text-decoration: underline;
}

a:active {
color: #202954;
}

/*Header airport part*/

.airport {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    background-color: #B0C4DE;
}

.airport h1 {
    font-family: var(--font-heading);  
    font-size: clamp(48px, 10vw, 150px);  
    font-weight: bold;

    border: 6px solid #ffff;
    letter-spacing: 0.08;

    background-color: #2048a8;          
    color: #ffffff;                     

    padding: 2rem 6rem;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);

    max-width: min(1400px, 90vw);
    margin-bottom: 2rem;
    text-align: center;
}

/*byline*/

.byline-step {
    min-height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .byline {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: #202954;
    margin: 0;
  }
  
  .byline a {
    color: inherit;
    text-decoration: none;
  }
  
  .byline a:hover {
    text-decoration: underline;
  }
  

/*Body */

.card{
    position: relative; z-index: 1;
    width: min(650px, 86vw);
    padding: clamp(18px, 3vw, 28px);
    background: white;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    line-height: 1.9;
    font-size: clamp(16px, 2vw, 18px);
}
.card p{ margin: 0;}

@keyframes fadein{
    from{position:absolute;left: -1000px;}
    to {position:absolute;left: 0px}
}

/* stamp part */
@keyframes stampIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(-40px) rotate(-10deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) translateY(0) rotate(3deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(-5deg);
    }
}

.airport .stamp {
    width: min(70vw, 420px);
    height: auto;
    opacity: 0;
    transform: scale(0.3) translateY(-40px) rotate(-10deg);
    position:relative; 
    top: -110px;
    right: -30%;
    animation: stampIn 0.6s ease-out forwards;

}

.airport .stamp.active {
    animation: stampIn 0.6s ease-out forwards;
}




/*Scrollama animation*/
.step {
    opacity: 1;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    margin: 0 auto 80px auto;
    max-width: 700px;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ==== 画像／グラフ＋テキストを左右に並べるレイアウト ==== */

.step.media-row {
    max-width: 1100px;
    margin: 4rem auto;
    min-height: auto;                    /* 90vh を解除 */
    flex-direction: row !important;      /* column を上書き */
    align-items: center;
    gap: 32px;
}

.media-left,
.media-right {
    flex: 1 1 0;
}

.media-left {
    display: flex;
    justify-content: center;
}

/* 写真 */
.media-img {
    width: 100%;
    max-width: 460px;
    height: 320px;            /* 好みで調整。いらなければ削除してOK */
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 16px 30px rgba(0,0,0,0.25);
}

/* Flourish グラフも同じ幅に */
.media-left .flourish-embed {
    width: 100%;
    max-width: 460px;
}

/* 右側カード */
.step.media-row .card {
    width: 100%;
    margin: 0;
}

/* スマホでは縦に積む */
@media (max-width: 800px) {
    .step.media-row {
        flex-direction: column !important;
        max-width: 700px;
        align-items: stretch;
    }

    .media-left,
    .media-right {
        width: 100%;
    }

    .media-img,
    .media-left .flourish-embed {
        max-width: 100%;
        height: auto;
    }
}


.step.is-active {
    opacity: 1;
    transform: translateY(0);
}

ul.nav {
    background-color: #2961c2;
    color: white;
    padding: 5px;
    font-family: "GrotzecCond-Demibold", "Impact", sans-serif;
    font-size: 2em;
    overflow: hidden;
    list-style-type: none;
}

ul.nav li {
    float: left;
}
ul.nav li.logo {
    position: relative;
    left: 40%;
}

ul.nav li a:link {
    text-decoration: none;
    color: white;
}

ul.nav li a:visited {
    color: white;
}

div.dropdowncontent {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

ul.nav li.logo a:hover {
    text-decoration: none;
    background-color: #2961c2;
    letter-spacing: 2px;
    transition: letter-spacing 0.3s ease-in;
}

li.dropbutton:hover div.dropdowncontent {
    display: block;
}

li.dropbutton:hover div.dropdowncontent a:link {
    color: #666;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: .6em;
    border-bottom: 1px solid #666;
    }
    
    li.dropbutton:hover div.dropdowncontent a:visited { /* The same as above */
    color: #666;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: .6em;
    border-bottom: 1px solid #666;
    }
    
    li.dropbutton:hover div.dropdowncontent a:hover {
    color: white;
    background-color: #666;
    transition: background-color 0.2s ease-in;
    
    }

    /* Yuqi / Gavin / Trump ブロック共通の外枠 */
.scrolly {
    max-width: 1150px;
    margin: 0 auto;
    padding: 80px 16px;
    display: flex;
    gap: 28px;
  }
  
  /* 左：写真 or グラフ（sticky にして固定） */
  .scroll__graphic {
    position: sticky;
    top: 15vh;
    flex: 0 0 50%;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* 左側に入る画像・Flourish の見た目 */
  .scroll__graphic img,
  .scroll__graphic .flourish-embed {
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 16px 30px rgba(0,0,0,0.25);
  }

.scroll__graphic img.media-img,
.scroll__graphic .flourish-embed {
  width: 100%;
  max-width: 640px;        /* ←ここで大きさを調整 */
  max-height: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 16px 30px rgba(0,0,0,0.25);
}
  
  /* 右：テキスト列 */
  .scroll__text {
    flex: 0 0 50%;
  }
  
  /* scrolly の中の step は少し小さめにして、複数カードが順番に出てくる感じに */
  .scrolly .step {
    min-height: 60vh;          /* 全画面ではなく 6割くらいの高さ */
    max-width: 680px;
    margin: 0 0 4rem 0;        /* 下に少し余白 */
  }
  
  /* スマホ用：上下に積む */
  @media (max-width: 800px) {
    .scrolly {
      flex-direction: column;
      gap: 24px;
    }
  
    .scroll__graphic {
      position: relative;
      top: auto;
      height: auto;
      order: -1;              /* 写真をテキストの上に持ってくる */
      margin-bottom: 8px;
    }
  
    .scroll__graphic img,
    .scroll__graphic .flourish-embed {
      max-width: 560px;
      max-height: none;
    }
  
    .scroll__text {
      width: 100%;
    }
  
    .scrolly .step {
      min-height: auto;
    }
  }
  
    /*Mobile*/
    @media (max-width: 800px) {
        .scrolly {
          flex-direction: column;
        }
      
        .scrolly__graphic {
          position: relative;
          top: auto;
          height: 40vh;
          order: -1;
          margin-bottom: 24px;
        }
      }