/* =========================================================
   Techno-Ocean 2027 トップページ
   メインビジュアル：神戸港の写真
   ヘッダー以下は2025年版のCSS設計をそのまま維持し、
   変更はメインビジュアル（.main_visual）のみ。
   ========================================================= */

:root{
  --font-size-h1:44px;
  --font-size-h3:28px;
  --cnf-main-visual-height:430px;

  /* 2025年版のカラー（すべて不変） */
  --indigo:#180e81;
  --blue:#0f4692;
  --nav-dark:#174b9c;
  --nav-light:#3768ab;
  --grey-hd:#c3c3c3;
  --time:#5e758d;
  --bg-grey:#f5f5f5;
  --ft-grey:#f8f8f8;
  --hair:rgba(27,55,105,.40);
  --accent:#f5f13f;
  color-scheme:light;
}

*{box-sizing:border-box}
html{font-size:18px}
body{
  margin:0; background:#fff; color:#333;
  font-family:"Noto Sans JP", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight:400; font-size:1rem; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{list-style:none; margin:0; padding:0}
h1,h2,h3{margin:0; /*font-weight:700*/}
p{margin:0}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.text-center{text-align:center}
.mt-5{margin-top:3rem}

/* ============ header（2025年版のまま） ============ */
.main_header{
  position:sticky; 
  top:0; 
  z-index:900; 
  background:#fff; 
  /* box-shadow:0 1px 0 #ececec; */
}
.hd_wrap{height:119px; display:flex; align-items:center; padding-left:1.5rem}
.preopen-first-anchor{width:100px; text-align:center; color:var(--indigo); font-weight:700; white-space:nowrap}
.preopen-first-anchor .ico{display:block; margin:0 auto}
.preopen-first-anchor span{display:block; margin-top:.75rem; font-size:.85rem; font-weight:700; line-height:1}
.pc_nav{margin-left:auto; display:flex; align-items:stretch}
.pc_nav li{display:flex}
.pc_nav li a{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  color:var(--indigo); font-size:.8rem; font-weight:500; line-height:1.25;
  padding:2rem .8rem; height:119px; text-align:center;
}
.pc_nav li a .ico{margin-bottom:.75rem}
.pc_nav li a > span{white-space:nowrap}
.pc_nav .top_link.preopen > span:last-child{white-space:normal; line-height:1.35}
.pc_nav li a:hover{background:#f3f5fa}
.pc_nav li a.btn-light{background:var(--nav-light); color:#fff; padding:2rem .8rem}
.pc_nav li a.btn-light:hover{background:rgba(55,104,171,.75)}
.pc_nav .top_link.preopen{width:200px; padding:0 .7rem}
.pc_nav .top_link .logo{width:40px; margin:0 auto .4rem}
/* .sp_nav{display:none} */

/* ============ main visual：神戸港の写真 ============
   写真の左側（ポートタワー・ホテルオークラ・海洋博物館）を見せ、
   文字は右側の青空に右揃えで置く。右側だけ紺色のベールを重ねて白文字の可読性を確保。
   画像はプレビュー用にHTMLへ埋め込み。本番では下の url() をファイルパスに差し替え：
     PC … /images/mv_kobe_2400.jpg　　SP … /images/mv_kobe_1200.jpg */
.main_visual{position:relative; overflow:hidden}
.mv-wave{
  --mv-aqua:#9ff3ff;
  height:clamp(400px, 27vw, 520px);
  background:#1a78c2; color:#fff;
}
.mv_photo{
  position:absolute; inset:0; z-index:0;
  background-image:url("/images/mv_wave_2000.jpg");
  background-size:cover; background-repeat:no-repeat;
  background-position:50% 35%;
}
/* 左側（文字の背後）を紺で沈め、右上の明るい部分は残す */
.mv_shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,38,112,.62) 0%, rgba(4,38,112,.42) 38%, rgba(4,38,112,.08) 66%, rgba(4,38,112,0) 80%),
    linear-gradient(0deg, rgba(4,38,112,.35) 0%, rgba(4,38,112,0) 40%);
}
.mv_inner{
  position:absolute; z-index:3; left:0; right:0; top:50%; transform:translateY(-50%);
  max-width:1200px; margin:0 auto; padding:0 2rem;
}
.mv_copy{max-width:680px}
.mv_title{
  margin:0; font-family:"Barlow", "Noto Sans JP", sans-serif; font-weight:600;
  font-size:clamp(48px, 5.4vw, 86px); line-height:1; letter-spacing:.01em; white-space:nowrap;
  color:#fff; text-shadow:0 2px 16px rgba(0,30,90,.45);
}
.mv_title .yr{color:var(--mv-aqua); font-weight:500}
.mv_sub{
  margin:.35em 0 0; font-family:"Noto Sans JP", sans-serif; font-weight:300;
  font-size:clamp(19px, 2vw, 32px); line-height:1.3; letter-spacing:.16em;
  color:#e8f4fc; text-shadow:0 2px 10px rgba(0,30,90,.5);
}
/* 会期・会場：回路の配線でつないだ一覧 */
.mv_facts{position:relative; margin:24px 0 0; padding:0 0 0 26px; display:grid; gap:10px}
.mv_facts::before{content:""; position:absolute; left:5px; top:8px; bottom:10px; width:1.5px; background:linear-gradient(180deg, var(--mv-aqua), rgba(159,243,255,.3))}
.mv_fact{position:relative; display:flex; align-items:baseline; gap:14px}
.mv_fact::before{content:""; position:absolute; left:-26px; top:.62em; width:12px; height:12px; border:1.5px solid var(--mv-aqua); border-radius:50%; background:#0b3f8e; box-sizing:border-box}
.mv_fact::after{content:""; position:absolute; left:-14px; top:calc(.62em + 5.5px); width:10px; border-top:1.5px solid var(--mv-aqua)}
.mv_fact dt{flex:none; width:4.6em; font-family:"Barlow", sans-serif; font-size:13px; font-weight:600; letter-spacing:.2em; color:var(--mv-aqua)}
.mv_fact dd{
  margin:0; font-family:"Barlow", "Noto Sans JP", sans-serif; font-feature-settings:"palt" 1;
  font-size:24px; font-weight:500; line-height:1.4; letter-spacing:.04em; color:#fff;
  text-shadow:0 1px 10px rgba(0,30,90,.55);
}
.mv_fact dd .ja{font-family:"Noto Sans JP", sans-serif; font-weight:400; font-size:.8em}
.mv_fact dd.venue{font-family:"Noto Sans JP", sans-serif; font-weight:400; font-size:21px}
/* 入場無料：データチップ風のタグ */
.mv_tags{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0 26px; padding:0; list-style:none}
.mv_tag{
  display:inline-flex; align-items:center; gap:10px; margin:0; padding:7px 18px 7px 14px;
  border:1.5px solid rgba(255,255,255,.85); border-radius:3px;
  background:rgba(4,38,112,.35);
  font-family:"Noto Sans JP", sans-serif; font-size:19px; font-weight:700; letter-spacing:.16em; line-height:1.3; color:#fff;
}
.mv_tag::before{content:""; width:8px; height:8px; background:var(--accent); box-shadow:0 0 8px rgba(245,241,63,.9)}

/* SDGsロゴ枠（右下） */
.mv_sdgs{
  position:absolute; z-index:4; bottom:clamp(14px, 1.8vw, 28px);
  right:max(1.5rem, calc((100% - 1200px)/2 + 2rem));
  width:102px; height:60px;
  /* border:1px dashed rgba(255,255,255,.85); border-radius:4px;
  background:rgba(4,38,112,.25); */
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  color:#fff; font-size:9.5px; line-height:1.3; text-align:center;
}
.mv_sdgs b{font-size:11.5px; letter-spacing:.06em; font-weight:700}
.mv_sdgs span{opacity:.85}

/* 折れ線・棒・円グラフを背景の波に混ぜ合わせる重ね（静止SVG）
   3枚のSVGをそれぞれ別の合成モードで写真になじませる。文字側（左）はやや薄く */
.mv_mix{position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.75) 30%, #000 55%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.75) 30%, #000 55%)}
.mv_mix--bar{mix-blend-mode:soft-light; opacity:.55}
.mv_mix--line{mix-blend-mode:screen; opacity:.38}
.mv_mix--pie{mix-blend-mode:overlay; opacity:.5}
@media screen and (max-width:795px){
  .mv_mix{-webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 100%); mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 100%)}
}

/* ============ ここから下は2025年版のまま ============ */
.section_wrap{
  max-width:1080px; 
  margin:0 auto; 
  padding:1.5rem 1.5rem
}
.section_hd{
  text-align:center; 
  letter-spacing:.12rem; 
  font-size:2rem; 
  /* font-weight:700;  */
  /* color:var(--grey-hd); */
  color:#565656; 
  line-height:1.2
}
.section_hd span{display:block; font-size:.9rem; font-weight:400; margin-bottom:1.2rem; letter-spacing:.12rem}
.btn{display:inline-block; font-size:1em; line-height:1em; padding:.75em 2em; white-space:nowrap;
  border-radius:1.25em; color:var(--blue); background:#fff; border:1px solid var(--blue); transition:.2s; cursor:pointer}
.btn:hover{color:#fff; background:var(--blue)}

.top_sub-menu{background:var(--bg-grey); position:relative}
.gen_list{width:100%; display:flex; flex-wrap:wrap}
.gen_list li{width:calc((100% - 4.5rem)/4); position:relative; background:#fff; padding-bottom:1.4rem}
.gen_list li:not(:nth-child(4n)){margin-right:1.5rem}
.gen_list li:not(:nth-child(-n+4)){margin-top:2.5rem}
.gen_list li::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(to bottom, transparent 0 2px, var(--hair) 2px 3px)}
.gen_list li > a{position:absolute; inset:0; z-index:998}
.gen_list li > a:hover{background:rgba(255,255,255,.3)}
.gen_list li:hover{box-shadow:0 4px 14px rgba(24,14,129,.14)}
.gen_list h3{text-align:center; font-weight:500; color:var(--indigo); font-size:1rem; line-height:1.5; padding:0 .8rem; margin-top:1.2rem}
.menu_thumb{aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); font-size:.65rem; letter-spacing:.1em}
.menu_thumb.mt1{background:linear-gradient(150deg,#2b5486,#12294a)}
.menu_thumb.mt2{background:linear-gradient(150deg,#356b86,#123a4d)}
.menu_thumb.mt3{background:linear-gradient(150deg,#3d5f92,#1a2f57)}
.menu_thumb.mt4{background:linear-gradient(150deg,#21707a,#0f3346)}
.logo_menu_outer{aspect-ratio:4/3; background:#fff; border:1px solid #e3e3e3; display:flex; align-items:center; justify-content:center}
.logo_menu_inner{color:var(--indigo)}
.gen_list .new::before{content:""; position:absolute; top:0; left:0; width:0; height:0; z-index:2;
  border-top:72px solid var(--accent); border-bottom:70px solid transparent; border-left:0; border-right:70px solid transparent}
.gen_list .new::after{content:"NEW"; position:absolute; top:32px; left:7px; right:auto; bottom:auto;
  width:auto; height:auto; background:none; z-index:3;
  font-size:.9rem; font-weight:700; color:var(--indigo); transform:rotate(315deg)}

.top_news{padding:2.5rem 1.5rem 3.5rem}
.top_news ul{width:70%; max-width:1080px; margin:2rem auto 0}
.top_news li:not(:first-child){margin-top:2.2rem}
.top_news time{display:inline-block; font-size:1.15rem; color:var(--time)}
.top_news li h3{display:inline-block; line-height:1.6; font-size:1.1rem; font-weight:500; color:var(--indigo); margin-left:1.5rem}
.top_news li h3 a:hover{text-decoration:underline}
.news-memo{max-width:1080px; width:70%; margin:1.6rem auto 0; font-size:.78rem; color:#8b93a1}

/* .top_about{padding:6rem 1.5rem; background:linear-gradient(to bottom, transparent 0 2px, var(--hair) 2px 3px, transparent 3px 5px) left bottom repeat-x; background-size:100% 5px} */
.top_about p{width:80%; max-width:1080px; line-height:2; font-size:1rem; color:var(--indigo); margin:2rem auto 0}
.top_about .movies{display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin:4rem auto 0; max-width:1160px}
.top_about .movies figure{width:520px; max-width:100%; margin:0}
.ph-movie{aspect-ratio:16/9; background:#1b2b44; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:.7rem; letter-spacing:.12em}
.top_about .movies figcaption{margin-top:.75rem; font-size:.85rem; color:var(--indigo); text-align:center}

/* .top_organizers,.top_contact{padding:5.5rem 1.5rem 6.5rem; background:linear-gradient(to bottom, transparent 0 2px, var(--hair) 2px 3px, transparent 3px 5px) left bottom repeat-x; background-size:100% 5px} */
.partner_list{display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; max-width:1080px; margin:3.5rem auto 0}
.partner_list li{width:220px; height:80px; border:1px dashed #cfd6de; display:flex; align-items:center; justify-content:center; color:#93a0b0; font-size:.75rem; letter-spacing:.1em; background:#fff}
.contact_body{max-width:1080px; margin:3rem auto 0; text-align:center; color:var(--indigo); line-height:2; font-size:1rem}
.contact_body b{display:block; font-weight:700}

.main_footer{background:var(--ft-grey); padding:1.8rem 0 1.5rem;
  background-image:linear-gradient(to bottom, transparent 0 2px, var(--hair) 2px 3px, transparent 3px 5px);
  background-repeat:no-repeat; background-position:left bottom; background-size:100% 5px}
.ft_wrap{max-width:1080px; margin:0 auto; padding:0 1.5rem}
.ft_wrap ul{text-align:center}
.ft_wrap li{display:inline-block; padding:0 1rem; margin-top:1rem}
.ft_wrap li a{font-size:.9rem; color:var(--indigo)}
.ft_wrap li a:hover{color:rgba(24,14,129,.6)}
.ft_wrap small{display:inline-block; width:100%; text-align:center; line-height:2; font-size:.9rem; color:var(--indigo); border-top:1px solid #e5e5e5; padding:1.5rem 0 0; margin-top:2.5rem}

/* ============ responsive（2025年版の設計を踏襲） ============ */
@media screen and (max-width:1360px){
  .pc_nav li a{padding:2rem .55rem; font-size:.75rem}
  .pc_nav .top_link.preopen{width:150px; padding:0 .5rem}
  .pc_nav .top_link .logo{width:34px}
  .pc_nav li a.btn-light{padding:2rem .8rem}
}
@media screen and (max-width:1199px){
  .pc_nav{display:none}
  /* .sp_nav{display:flex; margin-left:auto; align-items:center; padding-right:1.5rem}
  .sp_nav .hamburger{border:1px solid var(--indigo); color:var(--indigo); background:#fff; font-size:.75rem; letter-spacing:.12em; padding:.6rem .9rem; border-radius:4px; cursor:pointer} */
  /* .drawer-list{position:absolute; left:0; right:0; top:119px; background:#fff; border-top:1px solid #ececec; box-shadow:0 10px 24px rgba(0,0,0,.12)}
  .drawer-list ul{display:grid; grid-template-columns:1fr 1fr}
  .drawer-list li a{display:flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; font-size:.85rem; font-weight:700; color:var(--indigo); border-bottom:1px solid #f0f0f0} */
}
@media screen and (max-width:1079px){
  .mv_title{font-size:40px}
  .mv_date{font-size:25px}
  .mv_venue{font-size:1.1rem}
  .gen_list li{width:calc((100% - 1.5rem)/2)}
  .gen_list li:not(:nth-child(4n)){margin-right:0}
  .gen_list li:not(:nth-child(-n+4)){margin-top:0}
  .gen_list li:not(:nth-child(2n)){margin-right:1.5rem}
  .gen_list li:not(:nth-child(-n+2)){margin-top:2.5rem}
  .top_news ul,.news-memo{width:86%}
}
@media screen and (max-width:795px){
  .mv-wave{height:auto; padding:40px 0 20px}
  .mv_photo{background-image:url("/images/mv_wave_1000.jpg"); background-position:70% 0}
  .mv_shade{background:linear-gradient(180deg, rgba(4,38,112,.25) 0%, rgba(4,38,112,.5) 45%, rgba(4,38,112,.62) 100%)}
  .mv_inner{position:relative; top:auto; transform:none; padding:0 16px}
  .mv_title{font-size:clamp(32px, 9.4vw, 50px)}
  .mv_sub{font-size:clamp(16px, 4.6vw, 22px); letter-spacing:.12em}
  .mv_facts{padding-left:22px; gap:12px; margin-top:18px}
  .mv_fact{flex-direction:column; gap:2px}
  .mv_fact::before{left:-22px; top:.1em}
  .mv_fact::after{left:-10px; top:calc(.1em + 5.5px); width:6px}
  .mv_fact dd{font-size:clamp(17px, 5vw, 21px)}
  .mv_fact dd.venue{font-size:clamp(16px, 4.6vw, 19px)}
  .mv_free{margin-left:22px; font-size:17px}
  .mv_sdgs{position:relative; bottom:auto; right:auto; margin:18px 16px 0 auto}
}
@media screen and (max-width:568px){
  .mv_title{font-size:34px}
  .mv_date{font-size:23px}
  .mv_venue{font-size:1.12rem}
  .mv_free{font-size:1.15rem}
  .gen_list{display:block}
  .gen_list li{width:100%}
  .gen_list li:not(:first-child){margin-top:2rem !important; margin-right:0 !important}
  .top_news li h3{display:block; margin:.6rem 0 0}
  .top_news time{display:block}
  .top_news ul,.news-memo{width:100%}
}