@charset "UTF-8";



/*///////////////////////////////
	共通パーツ
///////////////////////////////*/

html{
    scroll-padding-top: 150px;
    overflow-x: hidden; /* 横スクロールを防止 */
    scroll-behavior: smooth;
}

body {
    margin:0px;
	padding:0px;
	color:#000;
    font-family: 'Noto Serif JP', serif;
    background-color: #fff;
    text-align: left;
    position:relative;
    overflow-x: hidden; /* 横スクロールを隠す */
    font-weight:  normal;
    letter-spacing: 0.15em;
}

.inner { 
    display:block; 
    max-width: 1160px;
    margin: auto;
}
.inner_second { 
    max-width: 1000px;
}
@media (max-width: 760px) {
    .inner{
        padding:0 10px; 
        max-width: 370px;
    }    
}

img{
    width: 100%;
    pointer-events: none; 
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    touch-callout:none;
    user-select:none;
}

a{
    text-decoration: none;
    color: #000;
}

.a_click{
    display: block;
}


p{
    font-size: 14px; 
    line-height: 40px;
    letter-spacing: 0.05em;
    font-weight:  600;
}

@media (max-width: 760px) {
    p{
        font-size: 12px; 
        line-height: 27px;
        letter-spacing: 0.12em;
    }    
    
}


.japanese h1{
    font-family: 'Noto Serif JP', sans-serif;
}

@keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}





ul{
    list-style: none;
    padding-inline-start: 0px;
}

.position_base{
    position: relative;
}

.position_in{
    position: absolute;
}

.title{
    margin-bottom: 40px;
}

/* ▼ スクロール前（非表示） */
.scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

/* ▼ スクロール後（表示） */
.scroll-animate.show {
    opacity: 1;
    transform: translateY(0);
}

.slide-right {
    transform: translateX(60px);
}
.slide-left {
    transform: translateX(-60px);
}

.pc_vis{
    display:block;
}
@media (max-width: 760px) {
    .pc_vis{
        display: none;
    } 
    
}

.sp_vis{
    display: none;
}
@media (max-width: 760px) {
    .sp_vis{
        display: block;
    } 

}

.link_touch{
    text-decoration: underline ;
}



/*///////////////////////////////
	header
///////////////////////////////*/

.hero {
    background-image: url("/osirase/0604/space-summit/image/back.webp");
    background-size: 100% auto; /* 横幅を100%、縦は自動調整 */
    background-position: center top; /* 位置を上中央に */
    background-repeat: no-repeat; /* 繰り返さない */
    width: 100%; /* 横幅いっぱい */
    height: 3326px; /* 高さは好きな値で調整 */
}
@media (max-width: 760px) {
    .hero {
        background-image: url("/osirase/0604/space-summit/image/back_sp.webp");
    }

}


/*** header_menu ***/


/* ハンバーガー初期は非表示（PC） */
.hamburger {
    display: none;
    width: 30px;
    height: 20px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 100000;
}

.hamburger span {
    display: block;
    height: 1px;
    background: #fff;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* メニュー（スマホ時は非表示） */
.nav_menu {
    transition: all 0.3s ease;
}

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

    /* ハンバーガー表示 */
    .hamburger {
        display: flex;
    }

    /* メニューは隠す（スマホ時） */
    .nav_menu {
        position: fixed;
        top: -20px;
        right: -285px;
        width: 310px;
        height: 100vh;
        background: #242A7E;
        flex-direction: column;
        padding-top: 100px;
        gap: 25px;
        align-items: center;
    }

    .nav_menu a {
        color: #fff !important;
        font-size: 16px;
        margin-left: 0;
    }
    
    .nav_menu a {
        display: block;
        padding: 12px 0;   /* 行の高さ調整（好みで） */
        text-align: center; /* 中央寄せ（必要なら） */
    }

    /* メニュー全体も縦方向に揃える */
    .nav_menu {
        display: flex;
        flex-direction: column;
        gap: 0; /* もし隙間いらないなら */
    }

    /* メニュー開いた時 */
    .nav_menu.open {
        right: -80px;
    }

    /* ✕（クロス）に変形 */
    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}


.header_menu {
    text-align: center;
    width: 100%;
    max-width: 1160px;
    margin: 0 20px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    transition: all 0.3s ease;

    /* ▼ 初期は透明＋上に待機（MVが出た後にスッと下りてくる） */
    opacity: 0;
    transform: translate(-50%, -20px);
    animation: headerDown 0.8s ease forwards;
    animation-delay: 2.3s;
}

/* --- ロゴ画像（初期：白） --- */
.header_menu .logo img {
    width: 165px;
    content: url("../image/header_01.webp");
    transition: all 0.3s ease;
}

/* --- 右側メニュー（初期：白文字） --- */
.flex_right a {
    color: #fff;
    margin-left: 55px;
    transition: all 0.3s ease;
}

/* ▼▼ スクロール後に付くクラス ▼▼ */
.header_menu.scrolled .logo img {
    content: url("../image/header_02.webp"); /* 黒ロゴ */
}

.header_menu.scrolled .flex_right a {
    color: #000; /* 黒文字 */
}

.header_menu a {
    transition: opacity 0.3s ease;
}

.header_menu a:hover {
    opacity: 0.6;
}


.menu_back{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px; /* グラデの高さ、調整OK */
    pointer-events: none; /* クリックの邪魔をしない */
    z-index: 9998; /* ヘッダーより1つ下、本文より上 */

    /* 上（濃い）→ 下（透明） */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.8) 40%,  /* ← 60%まで濃いまま（ここ調整すると遅くなる） */
        rgba(0, 0, 0, 0) 100%
    );
    
    /* ← これが超重要！ */
    transition: background 1s ease;
}

/* スクロール後（白グラデ） */
.menu_back.scrolled {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.8) 40%,  /* ← 60%まで濃いまま（ここ調整すると遅くなる） */
        rgba(255, 255, 255, 0) 100%
    );
}



/*** mv ***/

.mv {
    height: 800px;
}

/* ▼ 初期は透明で準備 */
.mv_title,
.mv_date,
.mv_sub {
    opacity: 0;
}

/* ▼ mv_01（中央ロゴ）下→上へ */
.mv_title {
    width: 653px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: slideUp 0.8s ease forwards;
    animation-delay: 0.3s;
}

/* ▼ mv_02（左下の日付）フェードイン */
.mv_date {
    width: 369px;
    bottom: 40px;
    left: 87px;
    animation: fadeIn 0.8s ease forwards;
    animation-delay: 1s;
}

/* ▼ mv_03（右のサブテキスト）フェードイン */
.mv_sub {
    width: 51px;
    right: 100px;
    top: 157px;
    animation: fadeIn 0.8s ease forwards;
    animation-delay: 1.6s;
}

/*** 惑星アニメーションそのまま ***/

.planet {
    animation: float 4s ease-in-out infinite;
}

.planet_second {
    animation: float 6s ease-in-out infinite;
}

/* 上下にゆっくり動くアニメーション */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

.planet_01 {
    width: 275px;
    left: 60px;
    top: 122px;
}

.planet_02 {
    width: 815px;
    bottom: -157px;
    right: -61px;
}

/*** ▼▼ 追加したアニメーション ▼▼ */

/* 下 → 上 */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* フェードイン */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 上 → 下（header_menu） */
@keyframes headerDown {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}



/*** news ***/

#news {
    margin: 230px auto 209px;
}

#news .title{
    width: 214px;
    margin-right: auto;
}

/* ニュース全体の余白調整（必要なら変更してOK） */
.news_list {
    margin-top: 38px;
}

/* 1件分の行 */
.news_item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 57px;              /* 日付とニュース名の距離 */
    padding: 12px 0;
    border-bottom: 1px solid #fff;  /* 白い下線1px */
}

/* 日付 */
.news_date {
    color: #fff;
    font-size: 20px;
    width: 140px;            /* 日付の幅（長さ揃える） */
    flex-shrink: 0;
    padding-left: 20px;
}

/* ニュース内容 */
.news_text {
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
}

#news a{
    color: #fff;
}




/*** about ***/
#about{
    margin: 219px auto 80px;
    text-align: right;
}

#about .title{
    width: 212px;
    margin-left: auto;
}

#about p{
    text-align: right;
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.08em;
}

@media (max-width: 760px) {
    #about p{
        font-size: 12px;
        letter-spacing: 0.05em;
    }
}

.planet_03{
    width: 253px;
    top: -149px;
}

.planet_04{
    width: 476px;
    bottom: -66px;
    left: -260px;
}


/*** message ***/
#message{
    margin: 110px auto 80px;
    text-align: left;
}

h2{
    font-size: 31px;
    line-height: 60px;
    margin-bottom: 55px;
    color: #fff;
}

#message .title{
    width: 325px;
    margin-right: auto;
}

#message p{
    color: #fff;
    font-size: 16px;
        letter-spacing: 0.08em;
}

@media (max-width: 760px) {
    #message p{
        font-size: 12px;
        letter-spacing: 0.05em;
    }
}


.planet_05{
    width: 177px;
    top: 0;
    left: 50%;
}

.planet_06{
    width: 333px;
    top: 129px;
    right: -91px;
}



/*///////////////////////////////
	main
///////////////////////////////*/

/*** program ***/
#program{
    margin: 244px 0;
}



#program .title{
    width: 359px;
}

.info-list {
	width: 100%;
	margin: 0 auto;
}

.info-item {
    display: grid;
    grid-template-columns: 120px 1fr; /* 左120px、右は自動で広がる */
    column-gap: 310px;
    padding: 28px 0;
    align-items: center;
    border-bottom:  solid 1px #242A7E;
}

.label {
    font-weight: 800;
    font-size: 16px;
}

.value {
    font-size: 14px;
    text-align: left; /* ここで文字だけ左揃え */
}

.info-btn{
    padding: 14px 0;
}

.info-btn .value {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 60px 15px 31px;
    border: 1px solid #000;
    text-decoration: none;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    transition: all 0.3s ease;
}

.info-btn .value::after {
    content: "";
    position: absolute;
    right: 16px;
    width: 12px;
    height: 12px;
    background-image: url(../image/arrow_01.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}

.info-btn .value {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 60px 15px 31px;
    border: 1px solid #000;
    text-decoration: none;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    transition: all 0.3s ease;
}

/* hoverで反転 + 矢印差し替え */
.info-btn .value:hover {
	background-color: #000;
	color: #fff;
}

.info-btn .value:hover::after {
	background-image: url("../image/arrow_02.webp");
}


.planet_07{
    width: 850px;
    right: -438px;
    top: -140px;
}

.planet_08{
    width: 132px;
    right: 41%;
    top: -190px;
}

.scroll_slide{
    transition: transform 0.1s linear; /* カクつきを防ぐ */    
    z-index: -1;
}

.planet_third {
	animation: spinAlternate 15s infinite ease-in-out;
}

/* 右回転 → 停止 → 左回転 → 停止 のループ */
@keyframes spinAlternate {
    0% {
        transform: rotate(0deg);
    }

    /* 右に1回転（滑らかに加速→減速） */
    25% {
        transform: rotate(360deg);
    }

    /* 一旦停止 */
    50% {
        transform: rotate(0deg);
    }

    /* 左に1回転（-360deg） */
    75% {
        transform: rotate(360deg);
    }

    /* また停止（ここから次のループで右回転へ） */
    100% {
        transform: rotate(0deg);
    }
}


/*** speakers **/


/* .arrow{
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #fff;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
    right: -97px;
    bottom: 89px;
}

.arrow::before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
    border-top: 1px solid #fff;
}

.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}


.sample2-1::after{
	left: 2px;
	width: 10px;
	height: 10px;
}

.sample2-1::before{
	width: 12px;
	height: 2px;
	background: #000;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
*/

.back_blue{
    background: linear-gradient(to bottom, #242A7E, #3F1238);
}

#speakers{
    padding: 175px 0 172px;
}

#speakers .title{
    width: 324px;
}

.speakers_in{
   margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.speakers_in_in{
    width: 150px;
    display: block;
    margin-bottom: 70px;
}

/* 背景オーバーレイ */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* ポップアップ本体 */
.popup {
    background: white;
    max-width: 405px;
    padding: 20px;
    position: relative;
    text-align: left;
    font-size: 20px;
    font-weight: 300;
    color: #000;
    margin: 0 200px;

    
}

.speakers_in_in div{
    cursor: pointer; /* ← 指カーソル */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* なめらか */
}

.speakers_in_in div:hover {
    transform: scale(1.05); /* ← 少し大きく */
}

.popup_write{
    line-height: 1.7em;
}

/* スクロール可能にする部分 */
.popup_in {
    padding-right: 10px;
}

/* 閉じるボタン（はみ出す） */
.close-btn {
    z-index: 1000;
    cursor: pointer;
    color: #000;
    font-size: 30px;
    font-weight: 600;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: right;
    position: absolute;
    right: 15px;
}

.speakers_in_in_not{
    display: none;
}

/*** timetable ***/

#timetable{
    padding-bottom: 300px;
}

#timetable .title{
    width: 347px;
}

/* 全体：左に時間帯、右に内容 */
#timetable .timeline {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    padding-left: 120px; /* 左の時間欄の幅 */
}

#timetable .worning{
    color: #fff;
    font-size: 16px;
}

/* 左の縦線 */
#timetable .timeline::before {
    content: "";
    position: absolute;
    left: 37px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #fff;
}



/* 時間ブロック */
#timetable .time-block {
    position: relative;
    margin-bottom: 20px;
}

/* 時間の白ボックス */
#timetable .time-box {
    position: absolute;
    left: -120px;    /* 左に出す */
    top: 0;
    border: solid 1px #fff;
    background: #242A7E;
    color: #fff;
    padding: 4px 12px;
    font-weight: bold;
}

/* ラベル（オープニング等） */
#timetable .label {
    position: absolute;
    left: -120px;
    background: #BEDDF7;
    color: #242A7E;
    padding: 4px 10px;
    font-size: 12px;
    width: 150px;
}

/* 右側の内容（楕円など） */
#timetable .content {
    padding-top: 35px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 30px;
}

#timetable .person-area {
    display: flex;
    gap: 40px;
    margin-left: 20px;
}

/* 楕円（画像を入れるときはimgを入れて！） */
#timetable .oval {
    width: 140px;
    height: 90px;
}

/* タブボタン */
.timetable-tabs {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin: 36px 0 69px;
}

.tab-btn {
    font-family: 'Noto Serif JP', serif;
    padding: 10px 25px;
    border: 1px solid #242A7E;
    background: #fff;
    color: #242A7E;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
}

/* 選択中のタブ */
.tab-btn.active {
    background: #242A7E;
    color: #fff;
}

/* タイムラインは非表示に */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* time-block は relative でOK（既存のまま） */

/* セッション名だけ右側に配置する */
#timetable .session-title {
    position: absolute;
    left: 120px; /* この値で位置調整（右に動かす） */
    top: 0;      /* 時刻と同じ高さに揃えるなら0 */
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    white-space: nowrap;
}

.timeline .speakers_in_in{
   padding-top: 25px;
}



/*** access ***/

#access{
    margin-bottom: 424px;
    margin-top: 322px;
}

#access .title{
    width: 261px;
    margin:0 auto 47px;
}

#access iframe {
    width: 100%;
    height: 494px;
    border: 0;
    display: block;
}

.access_place{
    font-size: 18px;
    color: #242A7E;
    margin-top: 30px;
}

#access p{
    font-weight: 600;
}

.planet_09{
    width: 159px;
    left: 0;
    top: -36px;
}

.planet_10{
    width: 341px;
    left: -167px;
    top: -77px;
    z-index: -1;
}

.planet_26{
    width: 770px;
    right: -174px;
    top: -20px;
    z-index: -1;
}


/*** sponsor ***/

#sponsor{
    margin-bottom: 264px;
}

#sponsor .title{
    width: 342px;
}

.sponsor-block {
    width: 1000px;
    margin: 0px auto 93px;
}

.center-line {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

/* ロゴを並べる領域（flexで均等割り） */
.logo-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 35px;
}

/* 全ロゴ共通（比率維持で収める） */
.logo-wrap img {
    height: auto;
    object-fit: contain;
}

/* --- ここでサイズを管理 --- */

/* 特別協賛（2つ → 1個あたり max 350px） */
.sponsor-block.special img {
    max-width: 500px;
}

/* ゴールド（4つ → 1個あたり max 200px） */
.sponsor-block.platina img {
    max-width: 300px;
}

/* ゴールド（4つ → 1個あたり max 200px） */
.sponsor-block.gold img {
    max-width: 220px;
}

/* シルバー（4つ → max 180px） */
.sponsor-block.silver img{
    max-width: 180px;
}

/* ブロンズ（5つ → max 140px） */
.sponsor-block.bronze img {
    max-width: 150px;
}


.center-line {
    position: relative;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #242A7E; /* 色は自由 */
    margin: 40px 0;
}

.center-line::before,
.center-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #000; /* 横棒の色 */
}

.center-line::before {
    left: 0;
}

.center-line::after {
    right: 0;
}

.planet_11{
    width: 526px;
    left: -211px;
    top: -143px;
    z-index: -1;
}

.planet_12{
    width:106px;
    right: 0;
    top: 21px;
    z-index: -1;
}

.planet_13{
    width: 191px;
    right: -211px;
    top: -123px;
    z-index: -1;
}



/*** contact ***/

#contact{
    text-align: center;
}

#contact .title{
    width: 285px;
    margin:0 auto 40px;
}

.contact_big{
    font-size: 16px;
    font-weight: 600px;
}

#contact p{
    margin:0 0 10px;
}

.planet_14{
    width: 748px;
    right: -509px;
    top: -158px;
    z-index: -1;
}

.planet_15{
    width: 35px;
    left: 95px;
    bottom: -91px;
    z-index: -1;
}

.planet_16{
    width: 132px;
    left: -65px;
    bottom: -47px;
    z-index: -1;
}



/*///////////////////////////////
	footer
///////////////////////////////*/

footer{
    margin: 120px 0 42px;
    border-top: solid 1px #000;
}

footer .policy {
    width: 504px;
    margin: 120px auto 60px;
    display: flex;                 /* 中央寄せにするため flex のまま */
    justify-content: center;       /* 文字を中央に配置 */
    align-items: center;
    padding: 15px 60px 15px 31px;  /* 右側に矢印のスペースを確保 */
    border: 1px solid #000;
    text-decoration: none;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    position: relative;            /* 矢印の絶対配置の基準にする */
    transition: all 0.3s ease;
}

/* 矢印を右端に配置 */
footer .policy::after {
    content: "";
    position: absolute;
    right: 16px;                   /* ボタン右端 */
    width: 12px;
    height: 12px;
    background-image: url("../image/arrow_01.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}

/* hoverで反転 + 矢印差し替え */
footer .policy:hover {
	background-color: #000;
	color: #fff;
}

footer .policy:hover::after {
	background-image: url("../image/arrow_02.webp");
}

.accessibility{
    background: #D6D7E7;
    padding: 26px 0 30px;
    text-align: center;
    margin: auto;
}

.accessibility div{
    font-size: 18px;
    font-weight: 600;
}

.accessibility div{
    font-size: 16px;
    font-weight: 600;
}

.accessibility p a{
    text-decoration: underline;
}

.footer_flex{
    display: flex;
    margin: 78px auto 8px;
    justify-content: space-between;
    align-items: flex-end;
}

.footer_flex div{
    width: 266px;
}

.footer_flex p{
    font-size: 16px;
    font-weight: 600;
}

.copy{
    font-size: 10px;
    text-align: right;
    margin: auto;
}





/*///////////////////////////////
	レスポンシブ
///////////////////////////////*/

@media (max-width: 760px) {
    
  
    

    
    /*///////////////////////////////
        header
    ///////////////////////////////*/
    
    .hero {
        height: 2868px;
    }
    
    .planet_02 {
        width: 481px;
        bottom: -109px;
        right: -153px;
    }
    
    .mv_title {
        width: 307px;
    }
    
    .header_menu {
        max-width: 350px;
        margin: 0; 
        top: 20px;

    }
    
    .header_menu .logo img {
        width: 118px;
        content: url(../image/header_01.webp);
        transition: all 0.3s 
    ease;
    }
    
    .nav_menu {
        position: fixed;
        top: -20px;
        right: -405px;
        width: 250px;
        height: 100vh;
        background: #242A7E;
        flex-direction: column;
        padding-top: 100px;
        gap: 25px;
        align-items: center;
    }
    
    .menu_back{
        height: 75px; /* グラデの高さ、調整OK */
    }
    
    .planet_01 {
        width: 175px;
        left: -34px;
        top: 90px;
    }
    
    .mv_sub {
        width: 48px;
        right: 45px;
        top: 75px;
    }
    
    .mv {
        height: 100vh;
    }
    
    .mv_date {
        width: 208px;
        bottom: 90px;
        left: 17px;
    }
    
    .planet_03 {
        width: 179px;
        top: -40px;
    }
    
    #news {
        margin: 136px auto 0;
    }
 
    #news .title {
        width: 155px;
    }
    
    .news_list {
        margin-top: -10px;
    }
    
    .news_date {
        font-size: 13px;
        width: 84px;
        padding-left: 0px;
    }
    
    .news_text {
        font-size: 12px;
    }

    .news_item {
        gap: 20px;
        padding: 7px 0;
    }
    
    
    #about {
        margin: 84px auto 78px;
    }
    
    #message {
        margin: 95px auto 137px;
    }
    
    #about .title {
        width: 137px;
    }
    
    .title {
        margin-bottom: 32px;
    }
    
    .planet_04 {
        width: 476px;
        bottom: -66px;
        left: -260px;
    }
    
    .planet_04 {
        width: 342px;
        bottom: -282px;
        left: -169px;
    }
    
    #message .title {
        width: 223px;
    }
    
    h2 {
        font-size: 20px;
        line-height: 40px;
        margin-bottom: 31px;
    }
    
    .planet_05 {
        width: 177px;
        top: -85px;
        right: -35px;
        left: inherit;
    }
    
    .header_menu_pc{
        display: none;
    }
    
    .flex_right a {
        margin-left: 0px;
    }
    
    .nav_menu a {
        display: block;
        padding: 12px 0;
        text-align: left;   /* ← 左寄せにする */
        padding-left: 35px;
    }

    .nav_menu {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    .nav_menu {
        position: fixed;
        top: -20px;
        right: -405px;
        width: 250px;
        height: 100vh;
        background: #242A7E;
        flex-direction: column;
        padding-top: 100px;
        gap: 25px;
        align-items: flex-start; /* ← ここを修正！ */
    }
    
    /* スクロール後（黒） */
    .header_menu.scrolled .hamburger span {
        background: #000;
    }




    /*///////////////////////////////
        main
    ///////////////////////////////*/
    
    #program {
        margin: 244px 0 139px;
    }
    
    .info-btn .value {
        padding: 10px 60px 10px 31px;
        font-size: 13px;
    }
    
    .planet_07 {
        width: 567px;
        right: -334px;
        top: -136px;
    }
    
    .planet_08 {
        width: 107px;
        right: 53%;
        top: -190px;
    }
    
    #program .title {
        width: 254px;
    }
    
    .info-item {
        display: block;
        padding: 15px 0;
    }
    
    .info-item span {
        display: block;
    }
    
    .label{
        margin-bottom: 10px;
    }
    
    .planet_09 {
        width: 106px;
        left: 53px;
        top: -36px;
    }
    
    
    .planet_10 {
        width: 217px;
        left: -127px;
        top: -83px;
    }
    
    
    #speakers {
        padding: 92px 0 54px;
    }
    
    
    #speakers .title {
        width: 221px;
    }
    
    
    .speakers_in {
        margin-top: 0px;
        justify-content: space-around;
    }
    
    .speakers_in_in {
        margin-bottom: 30px;
    }
    
    .speakers_in_in_not{
        width: 150px;
        display: block;
        margin-bottom: 70px;
    }
    
    .popup {
        max-width: 330px;
        margin: 0 10px;
        padding: 0px;
    }
    
    .close-btn {
        top: 10px;
    }

    #timetable .title {
        width: 225px;
    }
    
    .timetable-tabs {
        display: block;
        margin: 17px 0 0px;
    }
    

    .tab-btn {
        margin-bottom: 8px;
        padding: 5px 25px;
    }
    
    #timetable .time-box {
        padding: 2px 6px;
        font-size: 12px;
        left: -69px;
    }
    
    #timetable .label {
        padding: 4px 10px;
        font-size: 11px;
        width: 88px;
        left: -69px;
    }
    
    #timetable .session-title {
        left: 68px;
        font-size: 12px;
    }
    
    #timetable .timeline {
        padding-left: 79px;
    }
    
    .timeline .speakers_in_in {
        margin-bottom: 0px;
    }
    
    .planet_26 {
        width: 327px;
        right: -18px;
        top: 176px;
        z-index: -1;
    }

    
    #access .title {
        width: 175px;
        margin: 0 auto 25px;
    }
    
    
    #timetable .oval {
        height: 0px;
    }
    
    #timetable .content {
        padding-top: 39px;
        padding-bottom: 34px;
        gap: 10px;
    }
    
    #timetable {
        padding-bottom: 148px;
    }
    
    #timetable .worning {
        font-size: 12px;
    }
    
    .planet_26 {
        width: 327px;
        right: -18px;
        top: 260px;
    }

    
    #access iframe {
        height: 370px;
    }
    
    .access_place {
        font-size: 15px;
        margin-top: 18px;
    }
    
    .planet_11 {
        width: 361px;
        left: -171px;
        top: -202px;
        z-index: -1;
    }
    
    #access {
        margin-bottom: 146px;
        margin-top: 180px;
    }
    
    .planet_13 {
        width: 153px;
        right: -103px;
        top: -159px;
        z-index: -1;
    }
    
    
    #sponsor .title {
        width: 229px;
    }
    
    
    #sponsor {
        margin-bottom: 230px;
    }
    
    
    #sponsor {
        margin-bottom: 157px
    }
    
    .sponsor-block {
        width: 100%;
        margin: 0px auto 50px;
    }
    
    .center-line::before, .center-line::after {
        width: 35%;
    }
    
    .center-line_second::before, .center-line_second::after {
        width: 20%;
    }
    
    .center-line {
        margin: 20px 0;
    }
    
    .logo-wrap {
        gap: 10px;
    }
    
    .silver .logo-wrap {
        gap: 20px;
    }
    
    .bronze .logo-wrap {
        gap: 20px;
    }

    .center-line {
        margin: 15px 0;
    }
    
    .sponsor-block.silver img {
        max-width: 150px;
    }
    
    
    #contact .title {
        width: 176px;
        margin: 0 auto 21px;
    }
    
    .contact_big {
        font-size: 14px;
    }



    /*///////////////////////////////
        footer
    ///////////////////////////////*/
    
    footer .policy {
        width: 350px;
        margin: 75px auto 60px;
        padding: 15px 0px 15px 0px;
        font-size: 12px;
    }
    
    .accessibility {
        padding: 26px 0 18px;
    }
    
    .footer_flex p {
        font-size: 12px;
        font-weight: 600;
    }
    
    .footer_flex div {
        width: 125px;
    }
    
    footer {
        margin: 120px 0 22px;
        border-top: solid 1px #000;
    }

  

}