/* ←ここにreset入れる */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body{
  margin:0;
  background:#fff;
  font-family:"Noto Serif JP",serif;

  padding-top:0;   /* ←これにする（削除でもOK） */
}

.wrap{
      max-width:1120px;
    width:100%;
    margin:0 auto;
    margin-top:80px;
    padding:0 40px;
  background:transparent;
  position:relative;
}


/* これ追加 */
img{
  max-width:100%;
  height:auto;
}

/* ---------- ヘッダー ---------- */
.header{
  padding:18px 80px;
  border-bottom:1px solid #e5e5e5;
  display:flex;
  justify-content:center;

  position:relative;
  z-index:5;   /* ←ちょい上げる */
  background:#fff;
}

.nav{
  display:flex;
  gap:56px;
  font-size:16px;
  justify-content:center;
}

/* ---------- 広告 ---------- */
.top-banner{
  position:relative;
  z-index:3;
  background:#fff;

  text-align:right;  /* ←これ追加 */
}

.top-banner img{
  max-width:300px;
  height:auto;
}

/* ---------- ファーストビュー ---------- */

.hero-title{
    font-size:72px;
    letter-spacing:6px;
    margin-bottom:24px;

    position:relative;
    display:inline-block;

    opacity:0;
    transform:translateY(30px) scale(0.96);

    animation:titleFade 1.4s ease forwards;
}

.subtitle{
  font-size:30px;
  color:#666;
  margin-bottom:40px;
}

.hero p:last-of-type{
  max-width:700px;
  margin:0 auto;

  text-align:center;   /* ← left を center に変更 */

  font-size:18px;
  line-height:2.6;
}

/* ---------- 第1部 ---------- */
.panel-section{
  padding:10px 0;
}



.panel-row{

display:grid;

grid-template-columns:

180px
1fr
180px;

gap:60px;

align-items:start;
}

.panel-text{

max-width:none;

width:100%;
}

.panel-text p{
  font-size:15px;
  line-height:2.2;
  text-align:left;
}

.person{
    width:180px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.person-head{
    display:flex;
    align-items:flex-start;   /* ←頭を揃える */
    justify-content:center;
    gap:16px;                 /* 肩書と名前の間隔 */
}

.person .affiliation{
    writing-mode:vertical-rl;
    font-size:22px;
    align-self:flex-start;
}

.person .name{
    writing-mode:vertical-rl;
    font-size:72px;
    line-height:1;
}

.person .name span{
    font-size:26px;
}

.person .img{
    width:280px;
    height:240px;

    margin-top:40px;

    overflow:hidden;
}

.person .img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.person .comment{
    writing-mode:vertical-rl;
    font-size:40px;

    margin-top:40px;   /* 写真の下にコメント */
}

.person.right .affiliation{
    left:0;
}

.person.right .name{
    left:40px;
}

.person.right .img{
    left:0;
}

.person.right .comment{
    left:60px;
}

.comment-img{
  text-align:center;
  margin:20px 0;
  
  opacity: 0;
  transform: translateY(30px);
  transition: 0.8s ease;
}

.comment-img.show{
  opacity: 1;
  transform: translateY(0);
}

.comment-img img{
  width:500px;
  height:auto;
}

.person.left .img{
    margin-top:80px;
}

.speaker{
    font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

    font-weight:700;
}

.youichi{
    color:#00b097;   /* 青 */
}

.ousaka{
    color:#ee807a;   /* ピンク */
}

.nomura{
    color:#ee807a;   /* ピンク */
}

/* ---------- 第2部（ここ重要） ---------- */
.workshop-section{
  padding:50px 20px;
  text-align:center;
}

.panel-section h2,
.workshop-section h2{
    text-align:center;
    font-size:36px;
    line-height:1.6;
    margin-bottom:10px;
}

/* ← gridに変更（安定） */
.workshop-grid{
    display:grid;
    grid-template-columns:1fr;   /* ←1列 */

    gap:40px;
    max-width:700px;             /* 好きな幅でOK */
    margin:0 auto;
}

.workshop-card{
    background:#fff;
    border:1px solid #ccc;
    border-radius:20px;   /* ←追加 */

    padding:40px;
    text-align:left;
    width:100%;
}

.workshop-card .name{
  font-size:20px;  /* ← 小さく */
  margin-bottom:20px;
}

.workshop-card .catch{
  font-size:24px;  /* ← 大きく */
  line-height:1.5;
  margin-bottom:20px;
}

.workshop-card p{
  font-size:14px;
  line-height:1.8;
}

.workshop-card p.note{
  font-size:20px;
  line-height:1.6;
  margin-top:16px;

  position: relative;
  padding-left:34px;

  opacity: 0;
  transform: translateY(30px);
  transition: 0.8s ease;
}

/* 表示後 */
.workshop-card p.note.show{
  opacity: 1;
  transform: translateY(0);
}

/* 花アイコン */
.workshop-card p.note::before{
  content:"";
  position:absolute;
  left:0;
  top:0.15em;

  width:30px;
  height:30px;

  background:url("img/flower1.png") no-repeat center/contain;
}

/* 時間差（2行分） */
.workshop-card p.note:nth-of-type(1){
  transition-delay: 0.1s;
}

.workshop-card p.note:nth-of-type(2){
  transition-delay: 0.2s;
}
.note{
  font-size:20px;
  line-height:1.6;
  margin-top:16px;
}

.note + .note{
  margin-top:6px;
}

/* ---------- ワークショップカード詳細 ---------- */

.workshop-card::after{
  content:"";
  display:block;
  clear:both;
}

.workshop-card .text{
  flex:1;
}

.catch{
  font-size:28px;
  line-height:1.6;
  margin-bottom:20px;
}

.company{
  font-size:16px;
  margin-bottom:6px;
}

.name{
  font-size:28px;
  margin-bottom:20px;
}

.desc{
  font-size:14px;
  line-height:2;
}

.photo{
  width:100px;
  height:100px;
  background:#ccc;
  float:right;   /* ←これが本体 */
  margin-left:20px;
  margin-bottom:10px;
}

.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ---------- Pick Up Interview ---------- */

.interview-section{
    padding:10px 0 100px;
}

.interview-section h2{
  text-align:center;
  font-size:36px;  /* ←これ追加 */
  margin-bottom:30px;
}

/* カード */

.interview-card{
    padding:40px 0 60px;
    margin:0 auto;
    max-width:900px;
    border-bottom:1px solid #ddd;
}

.interview-card:first-of-type{
    border-top:1px solid #ddd;
}

/* 画像（使い回しOK） */
.interview-card .photo{
    width:360px;
    height:240px;
}

.interview-card .photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* テキスト */
.interview-card .catch{
  font-size:28px;
  margin-bottom:16px;
}

.interview-card .company{
  font-size:14px;
  margin-bottom:10px;
}

.interview-card .name{
  font-size:22px;
  margin-bottom:16px;
}

.interview-card .desc{
  font-size:14px;
  line-height:2;
}

/* float解除（超重要） */
.interview-card::after{
  content:"";
  display:block;
  clear:both;
}

/* ---------- ムービー ---------- */
.movie{
  background:none;
  text-align:center;
  padding:20px 0;
}

.movie img{
  max-width:900px; /* ←サイズ調整 */
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* ---------- フッター ---------- */
.footer{
  text-align:center;
	  text-align:center;
  padding:40px 0;
}

.footer img{
    display:block;
  margin:40px auto;
	max-width:300px; /* ←サイズ調整 */
  height:auto;
  margin:0 auto;
}




.flow-bg{
  position:fixed;
  top:100px;              /* ←ここ */
  left:0;
  width:100%;
  height:100vh;       /* ←ここ */
  z-index:-1;
  pointer-events:none;
}


/* 共通 */
/* 背景を右から左へ流す */
.bg-img{
    position:absolute;

    /* 右端からスタート */
    left:100%;

    width:90px;
    height:90px;
    object-fit:cover;
    opacity:0.8;

    animation:flow linear infinite;
}


@keyframes flow{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(calc(-100vw - 100px));
    }

}


/* バラバラにする（←ここが本体） */

.i1  { top:10%; animation-duration:70s;  animation-delay:-9s; }
.i2  { top:30%; animation-duration:90s;  animation-delay:-20s; }
.i3  { top:60%; animation-duration:80s;  animation-delay:-33s; }
.i4  { top:66%; animation-duration:100s; animation-delay:-13s; }

.i6  { top:50%; animation-duration:110s; animation-delay:-39s; }
.i7  { top:70%; animation-duration:85s;  animation-delay:-49s; }
.i8  { top:25%; animation-duration:78s;  animation-delay:-23s; }
.i9  { top:5%;  animation-duration:105s; animation-delay:-65s; }

.i10 { top:15%; animation-duration:95s;  animation-delay:-36s; }
.i11 { top:35%; animation-duration:72s;  animation-delay:-59s; }
.i12 { top:55%; animation-duration:100s; animation-delay:-16s; }
.i13 { top:75%; animation-duration:82s;  animation-delay:-46s; }
.i14 { top:40%; animation-duration:110s; animation-delay:-10s; }
.i15 { top:65%; animation-duration:76s;  animation-delay:-55s; }
.i16 { top:85%; animation-duration:115s; animation-delay:-19s; }
.i17 { top:45%; animation-duration:88s;  animation-delay:-43s; }
.i18 { top:12%; animation-duration:100s; animation-delay:-63s; }

.i19 { top:13%; animation-duration:55s; animation-delay:-14s; }
.i20 { top:30%; animation-duration:85s; animation-delay:-27s; }
.i21 { top:60%; animation-duration:65s; animation-delay:-46s; }
.i22 { top:80%; animation-duration:70s; animation-delay:-19s; }
.i23 { top:20%; animation-duration:60s; animation-delay:-39s; }
.i24 { top:50%; animation-duration:85s; animation-delay:-42s; }
.i25 { top:38%; animation-duration:72s; animation-delay:-27s; }
.i26 { top:25%; animation-duration:70s; animation-delay:-26s; }
.i27 { top:5%;  animation-duration:90s; animation-delay:-46s; }

.i28 { top:15%; animation-duration:85s; animation-delay:-29s; }
.i29 { top:35%; animation-duration:70s; animation-delay:-66s; }
.i30 { top:52%; animation-duration:65s; animation-delay:-21s; }
.i31 { top:75%; animation-duration:100s; animation-delay:-47s; }
.i32 { top:42%; animation-duration:80s; animation-delay:-10s; }
.i33 { top:65%; animation-duration:70s; animation-delay:-40s; }
.i34 { top:85%; animation-duration:110s; animation-delay:-20s; }
.i35 { top:26%; animation-duration:72s; animation-delay:-49s; }
.i36 { top:12%; animation-duration:65s; animation-delay:-82s; }
.i37 { top:70%; animation-duration:85s; animation-delay:-52s; }
.i38 { top:25%; animation-duration:75s; animation-delay:-30s; }
.i39 { top:11%; animation-duration:95s; animation-delay:-51s; }

.hero{
  position:relative;
  z-index:0;   /* ←ここ変更 */

  width:calc(100% + 80px);
  margin-left:-40px;
  margin-top:120px;

  padding:140px 0 140px;
}

/* ←これ追加 */
.hero-inner{
  position:relative;
  z-index:1;   /* ←ここだけ変更 */

  max-width:800px;
  margin:0 auto;
  text-align:center;

  margin-top:60px;
}

#toTop{
  z-index:9999;   /* ←追加 */
}

html{
  scroll-behavior:smooth;
}


a{
  color:inherit;        /* 親の色をそのまま使う（＝黒のまま） */
  text-decoration:none; /* 下線消す */
}


.nav a:visited{
  color:#000;
}


#toTop{
  position:fixed;
  bottom:30px;
  right:30px;

  width:50px;
  height:50px;
  border:none;
  border-radius:50%;

  background:#000;
  color:#fff;
  font-size:20px;

  cursor:pointer;
  opacity:0;
  transition:0.3s;
}

/* 表示用 */
#toTop.show{
  opacity:0.7;
}

/* ホバー */
#toTop:hover{
  opacity:1;
}



.video-section{
  position:relative;

  width:calc(100% + 80px);
  margin-left:-40px;

  height:600px;   /* ←ここ大きく */
  overflow:hidden;
}

/* 動画 */
.bg-video{
  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center 90%;  /* ←ここ超重要 */
}

/* 上に乗せる文字 */
.video-inner{
  position:relative;
  z-index:2;

  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  font-size:48px;
  letter-spacing:4px;
}


/* 紫の帯＋ナビゲーション */
.fixed-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
}

/* 紫の帯 */
.yab_sponsored {
  width: 100%;
  margin: 0;
  background: indigo;
  color: #fff;
}

/* ナビゲーション */
.header {
  position: relative;
  z-index: 1000;
  background: #fff;
  padding: 18px 20px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: center;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: nowrap;
  font-size: 16px;
  white-space: nowrap;
}



/* 白パネル */
.wrap::before{
  content:"";
  position:absolute;

  top:50px;
  left:50%;
  transform:translateX(-50%);

  width:100%;
  max-width:1120px;

  bottom:0;

  background:rgba(255,255,255,0.92);

  z-index:0;
}

.wrap > *{
  position:relative;
  z-index:1;
}


/* それぞれ違う動きにする */
@keyframes petal1{
  0%{ opacity:0; transform:translateX(100vw) translateY(0) rotate(0deg); }
  20%{ opacity:0.8; }
  100%{ opacity:0; transform:translateX(-20vw) translateY(-30px) rotate(180deg); }
}

@keyframes petal2{
  0%{ opacity:0; transform:translateX(110vw) translateY(10px) rotate(20deg); }
  20%{ opacity:0.8; }
  100%{ opacity:0; transform:translateX(-10vw) translateY(-40px) rotate(260deg); }
}

@keyframes petal3{
  0%{ opacity:0; transform:translateX(95vw) translateY(-5px) rotate(-10deg); }
  20%{ opacity:0.8; }
  100%{ opacity:0; transform:translateX(-30vw) translateY(-10px) rotate(300deg); }
}

@keyframes petal4{
  0%{ opacity:0; transform:translateX(105vw) translateY(5px) rotate(10deg); }
  20%{ opacity:0.8; }
  100%{ opacity:0; transform:translateX(-25vw) translateY(-20px) rotate(220deg); }
}


@keyframes titleFade{

    0%{
        opacity:0;
        transform:translateY(30px) scale(0.96);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

.hero-title span{
    position:relative;
    display:inline-block;
    overflow:hidden;
}

.hero-title span::after{

    content:"";

    position:absolute;
    top:0;
    left:-160%;

    width:35%;
    height:100%;

   background:linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,236,170,.95),
    rgba(255,255,255,0)
);

    transform:skewX(-20deg);

    animation:shine 1.3s ease 1.5s forwards;

}

@keyframes shine{

    from{
        left:-160%;
    }

    to{
        left:180%;
    }

}


/*=========================
プロフィール
=========================*/

.profile-box{
    margin:40px 0;
    padding:24px 30px;
    border-radius:12px;
    border-left:8px solid;
}

.profile-name{
    font-size:22px;
    font-weight:700;
    margin-bottom:12px;
}

.profile-box p{
    margin:0;
    line-height:2;
    font-size:15px;
}

/* 葉一 */
.profile-green{
    background:#f3fbf5;
    border-color:#79c89b;
}

/* 忠犬立ハチ高 */
.profile-pink{
    background:#fff3f7;
    border-color:#ee8ca8;
}

/*=========================
VOICE バナー
=========================*/

.voice-banner{
    max-width:1120px;   /* 白帯と同じ幅 */
    margin:100px auto 80px;
}

.voice-banner img{
    display:block;
    width:100%;
    height:auto;
}

/*=========================
理系バナ満開
=========================*/

.voice-map{
    position:relative;
    width:1120px;
    margin:60px auto 60px;
}

.voice-main{

    display:block;

    width:100%;

    height:auto;

}

/* 花 */

.flower{

position:absolute;

    cursor:pointer;

    transition:.25s;

}

.flower:hover .flower-icon{

    animation:flowerFloat 1.5s ease-in-out infinite;

}

.f1{ left:170px; top:180px; }

.f2{ left:270px; top:40px; }

.f3{ left:720px; top:60px; }

.f4{ left:900px; top:110px; }

.f5{ left:350px; top:290px; }

.f6{ left:230px; top:400px; }

.f7{ left:750px; top:270px; }

.f8{ left:930px; top:260px; }

.f9{ left:80px; top:300px; }

.f10{ left:900px; top:420px; }

.f11{ left:520px; top:10px; }

.f12{ left:730px; top:430px; }

.flower-icon{
    width:55px;
    display:block;
    animation: flowerIdle 6s ease-in-out infinite;
}

.f1 .flower-icon{ animation-delay:0s; }
.f2 .flower-icon{ animation-delay:1.2s; }
.f3 .flower-icon{ animation-delay:2.8s; }
.f4 .flower-icon{ animation-delay:4.1s; }
.f5 .flower-icon{ animation-delay:5.0s; }
.f6 .flower-icon{ animation-delay:5.8s; }
.f7 .flower-icon{ animation-delay:6.9s; }
.f8 .flower-icon{ animation-delay:7.7s; }
.f9 .flower-icon{ animation-delay:8.5s; }
.f10 .flower-icon{ animation-delay:9.8s; }
.f11 .flower-icon{ animation-delay:10.5s; }
.f12 .flower-icon{ animation-delay:11.2s; }



.voice-popup{

    position:absolute;

    left:50%;
    bottom:5px;

    width:auto;
    max-width:none;

    transform:translateX(-50%) scale(.8);

    opacity:0;

    pointer-events:none;

    transition:.35s;

    z-index:100;
}

.flower:hover .voice-popup{

    opacity:1;

    transform:translateX(-50%) scale(.6);

}

@keyframes flowerFloat{

    0%{
        transform:translateY(0) scale(1);
    }

    50%{
        transform:translateY(-6px) scale(1.12) rotate(8deg);
    }

    100%{
        transform:translateY(0) scale(1);
    }

}

@keyframes flowerIdle{

    0%,85%,100%{
        transform:translateY(0) rotate(0deg);
    }

    90%{
        transform:translateY(-5px) rotate(8deg);
    }

    95%{
        transform:translateY(-2px) rotate(-5deg);
    }

}


#panel,
#workshop,
#voice,
#interview{
    scroll-margin-top:120px;
}


/* =========================================
   レスポンシブ対応
   ========================================= */

/* ---------- タブレット ---------- */

@media screen and (max-width: 900px){

    .wrap{
        width:100%;
        padding:0 25px;
        margin-top:80px;
    }

    .nav{
        gap:25px;
        font-size:14px;
        flex-wrap:wrap;
    }

    .header{
        padding:15px 20px;
    }

    /* ファーストビュー */
    .hero{
        width:100%;
        margin-left:0;
        margin-top:80px;
        padding:100px 20px;
    }

    .hero-title{
        font-size:56px;
    }

    .subtitle{
        font-size:24px;
    }

    .hero p:last-of-type{
        font-size:16px;
        line-height:2.2;
    }


    /* 第1部 */
    .panel-row{
        grid-template-columns:140px 1fr 140px;
        gap:25px;
    }

    .person{
        width:140px;
    }

    .person .name{
        font-size:52px;
    }

    .person .affiliation{
        font-size:17px;
    }

    .person .img{
        width:180px;
        height:160px;
    }

    .person .comment{
        font-size:28px;
    }

    .comment-img img{
        width:100%;
        max-width:500px;
    }

    .panel-text p{
        font-size:14px;
        line-height:2;
    }


    /* ワークショップ */
    .workshop-grid{
        width:100%;
        max-width:700px;
    }


    /* VOICE */
    .voice-map{
        width:100%;
    }

    .voice-main{
        width:100%;
    }

    .f1{ left:15%; }
    .f2{ left:25%; }
    .f3{ left:65%; }
    .f4{ left:80%; }
    .f5{ left:32%; }
    .f6{ left:20%; }
    .f7{ left:67%; }
    .f8{ left:82%; }
    .f9{ left:8%; }
    .f10{ left:80%; }
    .f11{ left:47%; }
    .f12{ left:68%; }


    /* インタビュー */
    .interview-card{
        width:100%;
        padding:30px 0 50px;
    }

}


/* =========================================
   スマートフォン
   ========================================= */

/* =========================
   スマホ専用対談画像（PCでは非表示）
========================= */

.mobile-taidan{
    display:none;
}

.mobile-taidan-end{
    display:none;
}

.mobile-sankasha{
    display:none;
}


/* PCでは非表示 */
.mobile-flow-strip{
    display:none;
}



/* 第一部上の固定画像（PC） */
.taidan13-pc{
    text-align:center;
    margin:20px 0 30px;
}

.taidan13-pc img{
    width:300px;
    height:auto;
}

/* 助成先所在地マップ */
.map-section{
    max-width:1000px;
    margin:80px auto;
    text-align:center;
}

.map-section h2{
    font-size:36px;
    margin-bottom:30px;
}

.map-section iframe{
    width:100%;
    height:900px;
    border:none;
}

/* =========================
   助成先マップ モーダル
   ========================= */

.map-modal{
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.92);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    backdrop-filter:blur(3px);
}

.map-modal.show{
    display:flex;
}

.map-modal-content{
    width:100vw;
    height:100vh;
    background:transparent;
    border-radius:0;
    overflow:hidden;
    position:relative;
    box-shadow:none;
}


.map-close{
    position:absolute;
    top:12px;
    right:16px;
    width:42px;
    height:42px;
    border:none;
    background:rgba(255,255,255,.95);
    border-radius:50%;
    font-size:28px;
    cursor:pointer;
    z-index:2;
}


.map-image{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:contain;
    display:block;

    /* 画像をドラッグできないようにする */
    -webkit-user-drag:none;
    user-drag:none;

    /* 選択できないようにする */
    user-select:none;
    -webkit-user-select:none;
}

/* ===== マップ拡大縮小 ===== */

.map-zoom-area{
    width:100%;
    height:100%;
    overflow:auto;
    position:relative;

    display:block;

    cursor:grab;
}

.map-zoom-area.dragging{
    cursor:grabbing;
}

.map-image{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    user-select:none;
    -webkit-user-select:none;

    -webkit-user-drag:none;

    touch-action:none;

    cursor:grab;
}

.map-zoom-area.dragging .map-image{
    transition:none;
    cursor:grabbing;
}


/* 拡大縮小ボタン */

.map-controls{
    position:fixed;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);

    display:flex;
    gap:8px;

    z-index:100;
}

.map-controls button{
    width:48px;
    height:48px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.9);

    font-size:24px;
    cursor:pointer;

    box-shadow:0 2px 10px rgba(0,0,0,.15);
}

.map-controls button:hover{
    background:#fff;
}

#zoomReset{
    width:70px;
    font-size:14px;
}

.member-names{
    writing-mode:vertical-rl;
    font-size:24px;
    line-height:1.2;
    white-space:nowrap;
    align-self:flex-end;
}

.member-names span{
    display:block;
}