.img-center{
width: 100%;
 align-self: center;
}


@media (min-width:768px){

  .img-center{
  width: 80%;
  }
}

@media (min-width:1033px){

  .img-center{
  width: 40%;
  }
}



/* #region カーソル */
.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #11ff00;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 99999;
  transition: transform 0.15s ease;
}
@media (max-width:1032px){

  .custom-cursor{
    display:none;
  }

}
@media (hover: hover) and (pointer: fine) {

  .custom-cursor.is-hover {
    transform: translate(-50%, -50%) scale(1.8);
  }

}

/* #endregion カーソル */



.header-spacer{
  height: 120px;          /* ヘッダーと同じ高さ */
  background: #ffffff;    /* ヘッダーと同じ緑 */
}

@media (max-width:1032px){

  .header-spacer{
    height: 100px;
  }

}



/* #region Footer menu */
.footer-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  min-width: 0;
}

@media (min-width: 1033px) {
  .footer-menu {
    gap: var(--space-s);
  }
}


/* footer全体 */
.footer-menu-modal {
  position: relative;

  width: 100%;
  max-width: 100%;

  background-color: var(--color-gray);
  color: var(--color-main);
  overflow-x: hidden;
  box-sizing: border-box;
}


/* footer内側 */
.footer-modal-inner {
  position: relative;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  box-sizing: border-box;
}


.footer-modal-inner .content-001 {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  gap: var(--space-xl);
  box-sizing: border-box;
}


.footer-menu-modal .footer-menu-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  box-sizing: border-box;
}


.footer-menu-modal .footer-menu-item h3 {
  max-width: 100%;

  font-size: var(--fs-m);
  text-align: left;

  overflow-wrap: anywhere;
}


.footer-content-001-menu {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  gap: var(--space-m);
  box-sizing: border-box;
}

@media (min-width: 1033px) {
  .footer-content-001-menu {
    gap: var(--space-xl);
  }
}


/* =========================
   TOP
========================= */

.footer-content-001-top {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-s);
}

@media (min-width: 1033px) {
  .footer-content-001-top {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--space-xxl);
  }
}


/* =========================
   MIDDLE
========================= */

.footer-content-001-middle {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-l);
}

@media (min-width: 768px) {
  .footer-content-001-middle {
    flex-direction: row;
  }
}


/* =========================
   LEFT / RIGHT
========================= */

.footer-content-001-left {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-m);
}

@media (min-width: 768px) {
  .footer-content-001-left {
    width: 50%;
  }
}

.footer-content-001-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .footer-content-001-right {
    width: 50%;
  }
}


/* =========================
   INNER
========================= */

.footer-content-001-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);

  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}


.footer-social-link {
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .footer-social-link:hover {
    opacity: 0.2;
  }
}


.privacypolicy {
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .privacypolicy:hover {
    opacity: 0.2;
  }
}


.footer-access {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}


/* =========================
   BOTTOM
========================= */

.footer-content-001-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-xs);
}

.footer-content-002 {
  margin: 0;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-m);
}


.footer-menu-link {
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .footer-menu-link:hover {
    opacity: 0.2;
  }
}


/* #endregion Footer menu */


/* ==========================================================================
   Fixed Top Navigation Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;

  display: flex;
  justify-content: space-between;
  align-items:flex-start;

  padding: 45px 45px 60px 45px;
  z-index: 30000;

  transition: transform .5s ease;
  pointer-events: none;
}


@media (min-width: 1033px) {
 .site-header {


  padding: 45px 45px 145px 45px;


  }
}


.site-header .site-logo,
.site-header .menu-button {
  /* 💡 ヘッダーの中の必要な要素だけ、クリックを受け付ける状態に戻す */
  pointer-events: auto; 
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  /* 上は色、下に向かって透明 */
  background: linear-gradient(
    to bottom,
  rgba(109,115,0,0.4) 0%,
  rgba(109,115,0,0.35) 35%,
  rgba(109,115,0,0.25) 50%,
    rgba(109,115,0,0.1)65%,
  rgba(109,115,0,0.05) 80%,
    rgba(109,115,0,0.02) 90%,

  rgba(109,115,0,0) 100%
  );

  /* 透明度アニメーション */
  opacity: 0;
  transition: opacity .4s ease;


}

/* 🔄 動くグラデーションの定義（これもそのまま下部に残しておいてください） */
@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 背景あり */
.site-header.bg::before {
  opacity: 1;
}

.site-header.hide{
  transform: translateY(-120%);
}






/* #region modal menu */


.menu{
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  
}

@media (min-width: 1033px) {
  .menu{
   
    gap: var(--space-s);
    
  }
}




/* ===================================================
   ① 一番外側のオーバーレイ（背後をぼかす役割）
=================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40000;
  
  /* 初期状態は非表示（JSで block に切り替え） */
  display: none; 

  /* 🌫️ 背面（元の画面）をすりガラス状にぼかす */
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  
  /* 💡 ぼかしをより綺麗に見せるための薄い背景色（好みで調整してください） */
  background-color: rgba(0, 0, 0, 0.3); 

  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  
}

/* ===================================================
   ② 内側のモーダル（ウネウネ・マスク・中身の役割）
=================================================== */
.menu-modal {
  /* 📐 サイズとレイアウト（親要素の .modal-overlay いっぱいに広げる） */
  width: 100%;
  min-height: 100dvh;
  color: var(--color-invert);
  transform-origin: top center; /* 💡 起点を上中央に設定 */
  pointer-events: auto;
  position: relative; /* 疑似要素の基準にするために必須 */
  display:flex;
  justify-content: center;
  align-items: center;
}

/* 🎨 👇【変更】グラデーション、ウネウネ、マスクを「背景レイヤー」として切り離す */
.menu-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* 文字（.modal-inner）の背後に配置 */

  /* 🎨 45度の斜めグラデーション */
  background: linear-gradient(45deg, #a1a294, #6d7300);

  /* 💡 背景を3倍に広げて動かす準備 */
  background-size: 300% 300%;

  /* ✨ グラデーションをウネウネ動かすアニメーション */
  animation: moveGradient 8s ease infinite;

  /* 🖼️ マスク画像の設定 */
  -webkit-mask-image: url("./img/mask2_1.png");
  mask-image: url("./img/mask2_1.png");
  -webkit-mask-mode: luminance;
  mask-mode: luminance;

  /* 📐 マスクのサイズと配置 */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: top center;
  mask-position: top center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}



.menu-link{
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1);


}

@media (hover: hover) and (pointer: fine) {

.menu-link:hover{
  opacity: 0.2;

}
}


.modal-inner {
  align-self: start;
  position: relative;
  width: 100%;
    opacity: 1;

overflow: visible;
  -webkit-overflow-scrolling: touch;
  z-index: 2;
    transform:translateY(0);
}

.modal-inner .content-001 {
  gap: var(--space-xl);
}



.menu-modal .menu-item h3 {
  font-size: var(--fs-l);
  text-align: left;
}


.content-001-menu {
    display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-xl);
}


.content-001-top{
  display: flex;
    flex-wrap:wrap;

  flex-direction: column;
  gap: var(--space-s);
}


@media (min-width: 1033px) {
  .content-001-top{
    flex-direction: row;

  gap: var(--space-xxl);
  
  }

}


.content-001-middle {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-l);
}
@media (min-width: 768px) {
  .content-001-middle {
  
      flex-direction: row;
    
  }
}




.content-001-left {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-m);
}

@media (min-width: 768px) {
  .footer-content-001-left {
    width: 50%;
  }
}

.content-001-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .footer-content-001-right {
    width: 50%;
  }
}


.content-001-inner{
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}



.access{
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}


.content-001-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-xs);

}

.content-002 {
  margin: 0;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-m);
}





/* #endregion modal menu */


/* #region LOGO */

.site-logo {
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
     height: 45px;
}




.site-logo img {

  display: block;
  width: auto;
  height: 55px;
    transition: transform 0.6s ease;

}

@media (min-width: 768px) {
  .site-logo img {

  display: block;
  width: auto;
  height: 55px;
  
}



@media (hover: hover) and (pointer: fine) {

.site-logo:hover img {
  transform: rotate(-360deg);
}
}


}
/* #endregion LOGO */

/* #region  HAMBURGER MENU */


/* ==========================================
  📱 スマホ・タブレット（初期設定）
========================================== */
.menu-button {
  width: 45px;
  height: 45px;
  

  
  z-index: 20000;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 💡 三本線の線のすき間（デザインに合わせて調整） */
  cursor: pointer;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-m);
  transition: transform 0.3s ease;

  
}




.menu-button span {
  width: 100%;
  height:1px;
  background: var(--color-invert);
  display: block;

}

.menu-button.dark span {
  background: #000;
}


@media (hover: hover) and (pointer: fine) {


.menu-button:hover {
   transform: scale(1.05);
}
}

/* #endregion  HAMBURGER MENU */

/* #region  ENTRY BUTTON */

/* ============================================================================================
   ENTRY BUTTON（丸型・回転テキスト）
============================================================================================ */

.entry-button {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 30000;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--color-accent); 
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.25s ease;
  /* PC用のフォントサイズに上書き */


  /* 🌫️ 背面をすりガラス状に12pxぼかす */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ==========================================
  💻 PC・デスクトップ（画面幅 768px 以上）
========================================== */
@media (min-width: 768px) {
  .entry-button {
    /* 💡 PCの大画面になったら、本来の迫力あるデザイン（150px）に戻す */
    right: 60px;
    bottom: 60px;
    width: 150px;
    height: 150px;
    

  }
}

@media (hover: hover) and (pointer: fine) {

.entry-button:hover {
  transform: scale(1.08);
}
}
.entry-button.pulse {
  transform: scale(1.05);
}

.rotating-text-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: rotateCircleText 20s linear infinite;
  pointer-events: none;
}

.rotating-text-svg text {
  font-size: 7.2px;
  fill:var(--color-invert);
  letter-spacing: 1.95px;
}

.entry-center-text {
  font-size: var(--fs-m);
  color: var(--color-invert);
  z-index: 2;
}

/* ==========================================
  💻 PC・デスクトップ（画面幅 768px 以上）
========================================== */
@media (min-width: 768px) {
 .entry-center-text {
    /* 💡 PCの大画面になったら、本来の迫力あるデザイン（150px）に戻す */
    font-size: 24px;

  }
}


@keyframes rotateCircleText {
  to { transform: rotate(360deg); }
}



/* #endregion  ENTRY BUTTON */




/* #region ALL*/

/* #region Text*/


.text-s {
  font-size: var(--fs-s);
}

.text-l {
  font-size: var(--fs-m);
  align-self: flex-start;
}

.text-xl {
  font-size: var(--fs-l);
}




/* #endregion Text*/


/* #region Section & Content*/


.section-001 {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.content-001 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-m);
}

/* #endregion Section & Content*/


/* #region Search*/

.search-form {
  display: flex;
  align-items: center;
}

.search-box {
  position: relative;
  width: 100%;
}

.search-input {
  width: 100%;
  height: 45px;
  padding: 0 60px 0 20px; /* ボタン分の余白 */
  border: none;
  background: var(--color-button);
  font-size: var(--fs-s);
  color: var(--color-main);
  border-radius: var(--radius-m);
}



.search-input:focus {
  outline: none;
}


.search-input::placeholder {
  color: var(--color-trans);
}

.search-button {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.search-button img {
  display: block;
  width: 18px;
  height: 18px;
}
/* #endregion Search*/



/* #region Button*/

.button-002 {
  position: relative;
  background: var(--color-button);
  font-size: var(--fs-xs);
     width: fit-content; /* 追加 */

  padding: var(--space-xs) var(--space-s);
  
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  transition: 0.3s ease;
  z-index: 1;
  border-radius: var(--radius-m);
}




.button-002 span,
.button-002 img {
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1);
  
  position: relative;
  z-index: 1;
}



@media (hover: hover) and (pointer: fine) {


.button-002:hover span,
.button-002:hover img {
  opacity: 0.2;
}
}

.button-002 img {

  height:1em;
  width:auto;
  transform: translateY(0.2px);
}


.article-search{
  display: flex;
  gap: var(--space-xs);
  width: 100%;
}

.search-reset {
  height: 45px;
  padding: 0 20px 0 20px; /* ボタン分の余白 */
  border: none;
  background: var(--color-button);
  font-size: var(--fs-s);
  color: var(--color-main);
  border-radius: var(--radius-m);
  display: flex;
  justify-items: center;
  align-items: center;
}

.search-reset span{
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}


@media (hover: hover) and (pointer: fine) {


.search-reset:hover span {
  opacity: 0.2;
}


}
.button-004 {
  position: relative;
  background: var(--color-button);
  font-size: var(--fs-xs);
  width: auto;
  height: 45px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  transition: 0.3s ease;
  z-index: 1;
  border-radius: var(--radius-m);
}

.button-004 img {

  height:1em;
  width:auto;
  transform: translateY(0.2px);
}



.button-004 span,
.button-004  img{
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1);
  
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {


.button-004:hover span,
.button-004:hover img {
  opacity: 0.2;
}
}


.button-005 {
  position: relative;
  border: var(--border-m) solid var(--color-main);
  font-size: var(--fs-xxs);
  width: 100%;
  margin-top: var(--space-s);
  padding: var(--space-xs) var(--space-xs);
  
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  transition: 0.3s ease;
  z-index: 1;
  border-radius: var(--radius-m);
}




.button-005 span,
.button-005 img {
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1);
  
  position: relative;
  z-index: 1;
}


@media (hover: hover) and (pointer: fine) {

.button-005:hover span,
.button-005:hover img {
  opacity: 0.2;
}


}


.button-006 {
  position: relative;

  width: auto;
  background: var(--color-button);

  font-size: var(--fs-m);

  padding: var(--space-s) var(--space-l);

  display: flex;
  justify-content: center;
  align-items: center;
  gap:17px;

  align-self: center;
  overflow: hidden;
  transition: 0.3s ease;

  z-index: 1;
  border-radius: var(--radius-m);
}

.button-006 p,
.button-006 span,
.button-006 img {
  position: relative;
  z-index: 1;

  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
.button-006:hover p,
  .button-006:hover span,
  .button-006:hover img {
    opacity: 0.2;
  }

}

.button-006 img {
  width: auto;
  height: 1em;
  transform: translateY(0.2px);
}

.button-006 p {
font-size: var(--fs-s);
}

.button-006-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxxs);
}
/* #endregion Button*/


/* #region List Items */


.list-items-001 {
  width: 100%;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s) var(--space-m);
}

.list-items-001 li {
  font-size: var(--fs-s);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.list-items-001 li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-main);
  flex-shrink: 0;
  transform:translateY(7.5px);

}


/* #endregion List Items */

/* #region Image Fit*/

.image-fit {
  height: auto;
  display: flex;
padding: 0;

}

.image-002 {
  flex: 1;
}

.image-002 img {
  width: 100%;

  border-radius: var(--radius-m);
}

/* #endregion Image Fit*/


/* #region Story*/


.story .content-001{
  align-items: center;
}
/* #endregion Story*/




/* #region story-list-card*/

/* ============================================================================================
   STORY LIST & CARD
============================================================================================ */

.story-list {
  display: grid;
  grid-template-columns: repeat(1,1fr);
  gap: 20px;
}

/* ==========================================
  💻 PC・デスクトップ（画面幅 768px 以上）
========================================== */
@media (min-width: 768px) {
    .story-list {
      grid-template-columns: 1fr 1fr 1fr;
    }
}

.story-card:nth-child(1) {
  grid-row: span 1;
}



.story-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: var(--color-gray);
  overflow: hidden;
 border-radius: var(--radius-m);
}

.story-card > * {
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}


@media (hover: hover) and (pointer: fine) {

.story-card:hover > * {
  opacity: 0.2;
}
}

.story-card-middle p:last-child {
  display: -webkit-box;
   line-clamp: 3;

  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.story-card-num  { font-size: var(--fs-xs); }
.story-card-name { font-size: var(--fs-xs); }
.story-card-date { font-size: var(--fs-xs); }


.story-card-title-name{
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.story-card-title {
  font-size: var(--fs-m);
  line-height: var(--lh-sm);
}



.story-card-wrap {
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

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

.story-card-middle {
  padding: var(--space-s-xs) var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.story-card-bottom {
  position: relative;
  padding: var(--space-xs);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);

  overflow: hidden;
}



.story-card-bottom a,
.story-card-bottom img,
.story-card-bottom span {
  position: relative;
  z-index: 1;
}

/* #endregion story-list-card*/



/* #endregion ALL*/


/* #region About*/
.about .header-002 {
  line-height: var(--lh-s);
  display: flex;
  justify-content: flex-start;
  align-items: center;  
  padding-bottom:20px;
  border-bottom: 30px solid var(--color-gray);
}


.about-img{
  width: 100%;
}

.about-concept {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);

  width: 100%;
}

.about-concept .text-xl {
  min-width: 0;
  margin: 0;
}

.about-concept .projects-card-img {
  display: block;

  width: 100%;
  height: auto;

  border-radius: var(--radius-m);
}


/* スマホ */
@media (max-width: 1032px) {
  .about-concept {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}

/* #endregion About*/


/* #region Map*/
/* =====================================
   MAP HEADER
===================================== */

.map-header {
  font-size: var(--fs-xl);
}


/* =====================================
   MAP LAYOUT
===================================== */

.map-layout {
  width:80%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  border:var(--border-m) solid var(--color-main);
}


/* タブレット */
@media (min-width:500px){

  .map-layout{
    width:80%;
  }

}


/* PC */
@media (min-width:1033px){

  .map-layout{

    width:80%;
    height:min(40vw,700px);

    flex-direction:row;

  }

}



/* =====================================
   SECTION
===================================== */

.content-001-map{

  align-items:center;

  background-color:var(--color-gray-color);

  padding:var(--space-xl) 0;

  border-radius:var(--radius-m);

}



/* =====================================
   MAP AREA
===================================== */

.map-scroll-lock-wrap{

  width:100%;

  display:flex;

  justify-content:center;

  align-items:center;

  border-bottom:var(--border-m) solid var(--color-main);

}



@media (min-width:1033px){

  .map-scroll-lock-wrap{

    width:70%;
    flex-shrink:0;

    border-bottom:none;

    border-right:var(--border-m) solid var(--color-main);
    overflow:hidden;

  }

}



.map-view{

  width:100%;

  position:relative;

  overflow:hidden;

  display:flex;

  justify-content:center;

  align-items:center;

}



#map-wrapper{
  width:100%;
  position:relative;
}


#map-image{
  display:block;
  width:100%;
  height:auto;
}




/* =====================================
   INFO AREA
===================================== */


.map-info{

  width:100%;

  padding:20px;

  overflow-y:auto;

}



@media (min-width:1033px){

  .map-info{

     width:30%;

    height:100%;

    overflow-y:auto;

    flex-shrink:0;

  }

    .map-view{

      width:100%;

    height:100%;

  }
    #map-wrapper{

    flex-shrink:0;

  }


}




/* スマホ */

@media(max-width:1032px){

  .map-view{

    height:50vh;

    align-items:flex-start;

  }


  .map-info{

    height:auto;

    overflow:visible;

  }

}



/* =====================================
   INFO BLOCK
===================================== */


.map-block{

  width:100%;

  min-height:80px;

  padding:15px 0;

  border-bottom:var(--border-m) solid var(--color-main);

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:var(--space-xs);

}



@media(min-width:1033px){

  .map-block{

    min-height:7vw;

  }

}



.info-name{

  min-height:120px;

}



@media(min-width:1033px){

  .info-name{

    min-height:10vw;

  }

}



.info-middle{

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:var(--space-xxs);

}



/* =====================================
   IMAGE
===================================== */


.map-info-img{

  padding:15px 0;

  border-bottom:var(--border-m) solid var(--color-main);

}



.map-info-img img{

  width:100%;

  height:auto;

  display:block;

  border-radius:var(--radius-m);

}



/* =====================================
   ANIMATION
===================================== */


.info-animate{

  animation:fadeInUp .5s ease;

}



@keyframes fadeInUp{

  from{

    opacity:0;

    transform:translateY(5px);

  }


  to{

    opacity:1;

    transform:translateY(0);

  }

}



/* =====================================
   HIDDEN ITEM
===================================== */


#info-instagram,
#info-image-wrap{

  display:none;

}



/* =====================================
   PIN
===================================== */


.map-pin{

  --pin-color:var(--color-main);

  position:absolute;

  width:5px;

  height:5px;

  border:none;

  border-radius:50%;

  background:var(--pin-color);

  cursor:pointer;

  transform:translate(-50%,-50%);

  z-index:10;

}



.map-pin::before{

  content:"";

  position:absolute;

  left:50%;

  top:50%;

  width:5px;

  height:5px;

  border-radius:50%;

  background:var(--pin-color);

  transform:translate(-50%,-50%);

  animation:pinPulse 2s infinite;

}



@keyframes pinPulse{

  0%{

    transform:translate(-50%,-50%) scale(1);

    opacity:1;

  }


  100%{

    transform:translate(-50%,-50%) scale(3);

    opacity:0;

  }

}



/* =====================================
   PIN LABEL
===================================== */


.pin-label{

  position:absolute;

  left:50%;

  bottom:10px;

  color:var(--color-main);

  transform:translateX(-50%);

  font-size:3px;

  white-space:nowrap;

  opacity:0;

  visibility:hidden;

  transition:.3s;

}



.pin-label.show{

  opacity:1;

  visibility:visible;

}





/* #endregion Map*/

/* #region Join */




.join-top{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-m);
}





.join-top .content-001, .join-flow-faq .content-001{
   display: flex;
  justify-content: center;
  width: 100%;
  
}

.join-top-list{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-s);

}


@media (min-width: 1033px) {
 
  .join-top-list{
    grid-template-columns: repeat(3, 1fr);
    
  }
}

@media (min-width: 1033px) {
 
  .business-page .join-top-list{
    grid-template-columns: repeat(4, 1fr);
    
  }
}




.join-top-list-content{
  display: flex;
  flex-direction: column;
    background-color: var(--color-gray);
padding: var(--space-s);
border-radius: var(--radius-m);
gap: var(--space-s);

}

.businesscontest-mini .join-top-list-content > * {
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}


@media (hover: hover) and (pointer: fine) {

.businesscontest-mini .join-top-list-content:hover > * {
  opacity: 0.2;
  
}
}



.join-top-list-content-num{
  font-size: var(--fs-l);
  color: var(--color-trans);
}





.join-top .header-003{
  align-items: center;
  justify-content: center;
    width: auto;
}

.card-box{
    width: 100%;
}

.card-box .content-001{
    width: 100%;

  background-color: var(--color-gray);
  border-radius: var(--radius-m);
          padding: var(--space-s);

}






.join-card-content{
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--space-xxl);
}

.join-card-left,
.join-card-right{
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
      gap: var(--space-xs);

}

@media (max-width: 768px){
  .join-card-content{
    flex-direction: column;
  }

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


/* #endregion Join */


/* #region Join Video */


.join-video-section {
  min-height: 100dvh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: var(--color-invert);
}

.join-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.join-video-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-m);
  z-index: 2;
}

.join-video-section .button-002 {
  border: var(--border-m) solid var(--color-invert);
  background: none;
}

.join-video-section .button-002::before {
  background-color: var(--color-trans);
}

.join-video-content .list-items-001 li::before {
  background: var(--color-invert);
}


/* #endregion Join Video */

/* #region Projects*/

/* #region Projects(sample) */

.sample{
  
  position:relative;
  width: 100%;
  height:100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;

}




.sample .content-001{
  width: 100%;
  height: 100%;
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;  
  background-color: var(--color-gray-color);
    border-radius: var(--radius-m);


}


.sample-card{
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
      padding: 5vw;


  
}
/* ==========================================
  💻 PC・デスクトップ（画面幅 768px 以上）
========================================== */
@media (min-width: 768px) {
  .sample-card{
   flex-direction: row;
    padding: 15vw;

  }
}




.sample-title{
  font-size:var(--fs-4xl);
}

/* 重なり順 */
.sample-card:nth-child(1){ z-index:1; }
.sample-card:nth-child(2){ z-index:2; }
.sample-card:nth-child(3){ z-index:3; }

/* #endregion Projects(sample) */

/* #region Projects-card*/



.projects-card {
  position: sticky;
  top: 0;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: var(--space-l);
  background: #6a8dec;
  will-change: opacity, transform;
}

.projects-card:nth-child(1) { z-index: 1; }
.projects-card:nth-child(2) { z-index: 2; }

.projects-card-image {
    width: 100%;
  
}

@media (min-width: 500px) {
.projects-card-image{
    width: 50%;


  }
}



/* ==========================================
  💻 PC・デスクトップ（画面幅 768px 以上）
========================================== */
@media (min-width: 768px) {
.projects-card-image{
    width: 50%;


  }
}


.projects-card-img {
  width: 100%;
  height: auto;
  display: block;
}

.projects-card-middle {
  width: 100%;
  padding-bottom:var(--space-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ==========================================
  💻 PC・デスクトップ（画面幅 768px 以上）
========================================== */
@media (min-width: 768px) {
.projects-card-middle{
    width: 50%;
     padding-right: var(--space-m);

  }
}



.projects-card-num-header{
  width: auto;
  display: flex;
    flex-direction: column;

  gap: var(--space-s);
  justify-content: flex-start;
  align-items: flex-start;
}


.projects-card-middle .header-003{
  width: auto;
}

.projects-card-num   { font-size: var(--fs-xl);  color: var(--color-trans); white-space: nowrap;}


.projects-card-title { font-size: var(--fs-2xl); line-height: var(--lh-s); }
.projects-card-date  { font-size: var(--fs-s); }

.projects-card-name {
  font-size: var(--fs-m);
  padding-top: var(--space-xs);
}





/* #endregion Projects-card*/

/* #endregion Projects*/


/* #region News*/

.journal{
  color: var(--color-main);

}





.journal .content-001{
  align-items: center;
    background-color: var(--color-gray);
      padding:var(--space-s); /* もしくは padding: 80px 20px; */
  border-radius: var(--radius-m);


}


.journal-index .content-001{
  align-items: center;
    background-color:var(--color-invert);
      padding:0; /* もしくは padding: 80px 20px; */
  border-radius: var(--radius-m);


}






.journal .header-001{
  width: 100%;
}


.journal-list-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.journal-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-s) var(--space-s);
  border-top: var(--border-m) solid var(--color-trans);
  margin-top: -1px;
  gap: var(--space-xxs);
  overflow: hidden;
}


.journal-item .journal-meta,
.journal-item .journal-title{
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}


@media (hover: hover) and (pointer: fine) {

.journal-item:hover .journal-meta,
.journal-item:hover .journal-title{
  opacity: 20%;
}
}

.journal-item-link{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.journal-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.journal-date {
  font-size: var(--fs-xs);
  color: #000;
  transition: 0.3s ease;
}

.journal-tag {
  font-size: var(--fs-xs);
  color: var(--color-main);
  transition: 0.3s ease;
}

.journal-title {
  font-size: var(--fs-s);
  color: var(--color-main);
  transition: 0.3s ease;
}



/* #endregion News*/




/* #region Supporter */

.supporter{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--color-gray);
}





.supporter .content-002{ 
  width: 200%;
  transform:translateX(-15%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}






.support-title h2{
  font-size:20px;
  margin-left: 60px;
  margin-bottom:6px;
  color: #000;
}

.support-title p{
  margin-left: 60px;
  font-size:12px;
  color: #000;
}

.container {
  width: 100%;
  margin-top: 40px;
  justify-content:center;
}



.supporter{
  overflow:hidden;
}

.supporter-splide{
  width:100%;
  overflow:hidden;
}

.splide__track{
  overflow:hidden;
}

.splide__list{
  align-items:center;
}




/* #endregion Supporter */


/* #region About Page */

.about-page .content-001 img {
  width: 100%;
}

.about-page .header-002 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-s);
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;  
     padding-bottom:20px;
     border-bottom: 30px solid var(--color-gray);

  
}

/* ============================================================================================
   LIST ITEMS
============================================================================================ */



.list-items-002 {
  width: auto;
  display: flex;
  flex-wrap: wrap; /* ← 追加 */
  gap: var(--space-s) var(--space-s);
}

.list-items-002 p {
  width: auto;
  background-color: var(--color-gray-color);
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-m);
}




/* #region Members*/

/* ==========================================================================
   Core Members Section Styles (w1.jpg & 111122.jpg Integration)
   ========================================================================== */

.core-member-section {
  position:relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}


#members {
  position: relative;
  width: 100%;

}

/* メインコンテナ：大きな角丸と背景のクリッピング */
.members-container {
  position: relative;
  width: 100%;
  min-height: 100dvh; /* PCでの最低限の見栄えを担保 */
  overflow: hidden;
 padding: 8vw 8vw; 
   display: flex;
  flex-direction: column;
  justify-content: space-between;
}


@media (min-width: 768px) {
 

.members-container {

  padding: 60px 60px;

}
}


.members-container .header-001{
  color: var(--color-invert);
}

/* 背景画像：暗めのグラデーションを重ねて文字の視認性を確保 */
.members-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:1;
}

.members-bg-cover{

    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    opacity:0;

    transition:opacity .8s ease;

}

.members-bg-cover.active{

    opacity:1;

}

/* コンテンツは背景の上に配置 */
.members-content-wrapper {
  position: relative;
  z-index: 2;
flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-l, 40px);
  justify-content: space-between; /* 💡2つのブロックを上下の両端にピタッと離す */
  
}

/* セクションタイトルエリア */
.members-content-wrapper .section-title-area {
  color: var(--color-invert);
}
.members-content-wrapper .section-title-area .en-title {
  font-size: var(--fs-l);
  margin-bottom: 4px;
}
.members-content-wrapper .section-title-area .ja-sub {
 font-size: var(--fs-l);
  opacity: 0.8;
}

.members-lower-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-s); 
}


/* メンバー詳細表示エリア */
.member-detail-display {
  color: var(--color-invert);
  max-width: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 切り替え時のフェードインアニメーション用クラス */
  animation: memberFadeIn 0.6s ease forwards;
  
}

@keyframes memberFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.member-axis {
  font-size: var(--fs-m);

}

.member-facility {
  font-size: var(--fs-xl);
    min-height: calc(var(--fs-xl) * 1.5);
}

.member-company {
  font-size: var(--fs-s);
  margin: 4px 0;
  margin-bottom: 8px;
}

/* ROLE / 役割ブロック */
.member-role-box {
  margin-bottom: 16px;
}
.role-label {
  display: block;
  font-size: var(--fs-s);

  margin-top: 20px;
}
.role-text {
  font-size: var(--fs-xs);
  
  margin-bottom: 20px;


}


.members-container .button-002{
  background-color: var(--color-button-invert);
  color: var(--color-main);
  z-index: 1;                                   
}



@media (hover: hover) and (pointer: fine) {


.members-container .button-002:hover::before {
  width: 100%;
}
}

/* プログレスバー */
.member-progress-bar {
  width: 100%;
  max-width: 220px;
  height: var(--border-m);
  background-color: #656565;
  margin: 8px 0;
}
.member-progress-line {
  width: 100%;
  height: 100%;
  background: var(--color-invert);

  transform: scaleX(0);
  transform-origin: left center;
}

@keyframes memberProgress {

  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }

}

/* 下部メンバー選択ナビゲーション（w1.jpg準拠の2列変則配置対応） */
.members-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, auto));
  gap: var(--space-xs) var(--space-xl);
  justify-content: flex-start;
  margin-top: auto;
}

/* ナビゲーションボタン */
.member-nav-btn {
  background: none;
  border: none;
  color:var(--color-invert);
  font-size: var(--fs-s);
  text-align: left;
  padding: 4px 0;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {

.member-nav-btn:hover {
  opacity: 0.8;
}
}

.member-nav-btn.active {
  opacity: 1;
}

/* ==========================================================================
   Responsive Styles (111122.jpg 準拠)
   ========================================================================== */
@media (max-width: 768px) {
 

  .members-content-wrapper {
    gap: var(--space-s);
  }


  .member-progress-bar {
    max-width: 80px; /* スマホではインジケーターをやや短く */
    margin: 16px 0;
  }

  /* スマホでのボタンの配置と横並びの最適化 */
  .members-nav-grid {
    grid-template-columns: repeat(2, 1fr); /* 均等2カラム */
    gap: 5px 12px;
    width: 100%;
  }

  .member-nav-btn {

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 文字溢れ対策 */
  }
}

/* #endregion Members*/




/* #endregion About Page */



/* #region join page */

.join-002 .header-001{
  gap: var(--space-xxs);
}


.join-002 .header-001 h2{
  font-size: var(--fs-l);
}

.join-inner{
  display:grid;
  grid-template-columns:repeat(1, 1fr);
  width:100%;

  gap: var(--space-l) var(--space-xxl);
  
}

 

@media (min-width: 768px) {
  .join-inner {
    grid-template-columns:repeat(2, 1fr);

  }


  
}

@media (min-width: 1033px) {
  .join-inner {
    grid-template-columns:repeat(3, 1fr);

  }


}




/* BLOCK */
.join-block{
  display:flex;
  flex-direction:column;
  gap:var(--space-s);
padding-left: 20px;
  transition:0.3s ease; /* MEMBERと全く同じ時間 */
   border-left: 4px solid var(--color-gray);

}


@media (max-width: 1032px) {

/* 一番右端の列は右線を消す */
.join-block:nth-child(even){
  border-right:none;
}

.join-block:nth-child(5){
  border-bottom:none;
}
}

.join-text p{
  margin:0;
  line-height:1.8;
  color:var(--color-main);
  text-align:justify;
  font-size: var(--fs-l);
}

.join-title-jp{
  margin:0;
  line-height:1.8;
  color:var(--color-main);
  text-align:justify;
  transition:0.3s ease;
  padding: 0 27px 30px 27px ;
}


/* #region join flow & faq */


.join-flow-faq{
  width: 100%;
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  color:var(--color-main);
  gap: var(--space-m);
    background-color: var(--color-gray);
  border-radius: var(--radius-m);

    padding: var(--space-s);

}



/* FLOW */


.flow-block img {
  width: 100%;
  height: auto;
  display: block;
  align-self: center;
  border-radius: var(--radius-m);
}



.flow-inner{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 40px;
  cursor: grab;
  user-select: none;


  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.flow-inner.dragging {
  cursor: grabbing;
}

.flow-inner::-webkit-scrollbar{
  display: none; /* Chrome, Safari */
}

.flow-block{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);

  min-width: 300px;
    width: 300px;

  flex-shrink: 0;

  padding: var(--space-s);
  background-color: var(--color-invert);
  border-radius: var(--radius-m);
}



@media (max-width: 767px) {
.flow-block{
  min-width: 200px;

  width: 200px;

}
}




.business-page .flow-block{
  min-width: 200px;
}

.flow-title{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

.flow-num-out{
  height: 25px;
  width: 25px;
  border:1px solid var(--color-main);
  border-radius: 300px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.flow-num{
  font-size:var(--fs-xxs);
  transform:translateX(1px);

}


.flow-title h2{
  font-size:var(--fs-m);
}

/* FAQ */

.faq{
  width:100%;
  flex-shrink:0;


}




.faq .header-001{
      padding-bottom: 40px;
}

.faq-item{
  border-top:var(--border-m) solid var(--color-main);



}

.faq-question{
  color:var(--color-main);
  width:100%;
  padding:15px 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-size:var(--fs-s);
}

.faq-answer{
  display:none;
  padding:0 15px 15px;
  line-height:1.8;
}

.faq-item.active .faq-answer{
  display:block;
}

.faq-item.active .faq-icon{
  transform:rotate(45deg);
}

.faq-icon{
  font-size:var(--fs-m);
  transition:.3s;
}



/* #endregion join flow & faq */



/* TITLE */
.join-title h2{
  font-size:15px; 
  line-height:1.2;
  margin-bottom:6px;
  color:var(--color-main);
  transition:0.3s ease;
}

.join-title p{

  line-height:1.2;
  color:var(--color-main);
  transition:0.3s ease;
}

/* DESC */
.join-desc{
  margin:0;
  line-height:1.8;
  color:var(--color-main);
  text-align:justify;
  transition:0.3s ease;
}


/* #endregion join page */


/* #region story page */

.story-page .header-002  {
  width: auto;
}

.story-page .content-001 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
}


.story-caption {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-xs);
}

.story-001 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-m);
  width: 100%;
}
@media (min-width: 768px) {
  .story-001 {
    width: 70%;
  }
}




.story-001 h2{
  font-size: var(--fs-l);
}

.story-001 p{
  font-size: var(--fs-m);
}



.story-main{
  width: 100%;
  display: flex;
      flex-direction: column;

  gap: var(--space-m);
    align-items: flex-start;

}

@media (min-width: 768px) {
  .story-main{
    flex-direction: row;

  }
}




.story .header-002 {
  justify-content: flex-start;
}

.story-content {
  display: flex;
  gap: 24px;
  font-size: var(--fs-s);
}


.title-medium h2 {
  font-size: var(--fs-l);
}

.story-speaker {
  width: 30px;
  flex-shrink: 0;
}


@media (min-width: 768px) {
 .story-speaker {
  width: 80px;
}
}

.story-text {
  flex-grow: 1;

    width: auto;
    font-size: var(--fs-s);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--space-s);
   
    
}

.story-text p{
  font-size: var(--fs-m);
   
    
}



.story-text-q{
  background-color:var(--color-invert);

}

.story-caption-speaker {
  font-size: var(--fs-s);
}

.speaker {
  font-family: "NotoSans";
  line-height: var(--lh-m);
  letter-spacing: 0.5px;
}
.story-map-info {
  position: sticky;
  top: var(--space-m);

  width: 100%;
  height: auto;

  display: flex;
  flex-direction: column;
  gap: var(--space-s);

  padding: var(--space-xs);
  box-sizing: border-box;
  border-radius: var(--radius-m);
  background: var(--color-gray);
}

@media (min-width: 768px) {
  .story-map-info {

    width: 30%;
      height: calc(100vh - (var(--space-m) * 2));


  }
}



.story-map-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
    overscroll-behavior: contain;

}


iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;

  filter: grayscale(100%);
  border-radius: var(--radius-m);
}

@media (min-width: 1033px) {
  iframe {
    aspect-ratio: 4 / 3;
  }
}



/* #endregion story page */


/* #region story-all page */

/* ============================================================================================
    STORY LIST
============================================================================================ */


.story-all .content-001 {

    align-items: center;
  
}


.story-all .story-list{
  display: grid;
  grid-template-columns: repeat(1,1fr);
}

@media (min-width: 768px) {
.story-all .story-list{
  grid-template-columns:1fr 1fr 1fr;
}
}
.story-all .story-card:nth-child(1){
  grid-row:span 1;

}

/* #endregion story-all page */


/* #region Business Contest  */

.content-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.content-image img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1033px) {
  .content-wrap {
    flex-direction: row;
    gap: 60px;
    align-items: flex-start;
  }

  .content-001,
  .content-image {
    flex: 1;
  }

  .content-image {
    overflow: hidden;
    border-radius: var(--radius-m);
  }

  .content-image img {
    width: 90%;
    object-fit: cover;
  }
}

.business .flow-inner{

  display: flex;
  flex-direction: row;
  gap: 20px;
}

@media (min-width: 768px) {
  .business .flow-inner{

  
    flex-direction: row;
    
  }
}

.owner img {
  width: 70%;
  height: auto;
  display: block;
  align-self:center;
  border-radius:50%;
}

.mentor img {
  width: 100%;
  height: auto;
  display: block;
  align-self:center;
  border-radius:var(--radius-m);
}





.business .flow-block {
  flex: 1;
    position: relative;

}

.business .flow-block:not(:last-child)::after {
  display: none;
}


  .arrow-bottom {
  align-self: center;
  display: inline-block;
  width: 0;
  height: 0;
  background: none;


    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--color-main);
  }

/* スマホ：下向き */
.arrow-right {
  align-self: center;
  display: inline-block;
  width: 0;
  height: 0;
  background: none;

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--color-main);
}





.businesscontest-mini .join-top-list{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-s);
  
}


@media (min-width: 768px) {
 
  .businesscontest-mini .join-top-list{
    grid-template-columns: repeat(3, 1fr);
    
  }
}

.guideline-info-tag{
  font-size:var(--fs-m) ;
}


/* =====================================
   OWNER MODAL
===================================== */

.owner-modal {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100dvh;

  z-index: 99999;
  padding: var(--space-s);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}


@media (min-width: 768px) {
.owner-modal {
 

  padding: var(--space-m);


}

}



/* JSで付与される表示クラス */
.owner-modal.is-owner-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 背景 */
.owner-modal-bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  background: rgba(197, 197, 197, 0.779);
   
}

/* モーダル本体 */
.owner-modal-content {
    border-radius: var(--radius-m);

  position: relative;
  z-index: 1;

  width: 100%;
  height: 100%;

  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  background: var(--color-base, #fff);
}




/* --- 右上に常に固定されるクローズボタン --- */
.owner-modal-close {
  position: absolute;
  top: 45px;
  right: 45px;

  width: 45px;
  height: 45px;

  border: var(--border-m) solid var(--color-main);
  border-radius: 50%;
  background: none;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 100000;
  box-sizing: border-box;

  font-size: 0;
  color: transparent;

  transition: opacity 0.2s;
}


/* ×の線 */
.owner-modal-close::before,
.owner-modal-close::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 20px;
  height: var(--border-m);

  background: var(--color-main);
  border-radius: 2px;

  transform-origin: center;
}

.owner-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.owner-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}


.business-owner .header-003{
  margin-top: var(--space-m);
}

/* #endregion Business Contest  */

/* #region Owner  */

.resource{ 
  width: auto;
  display: flex;
  flex-wrap: wrap; /* ← 追加 */
  gap: var(--space-s) var(--space-s);
}
.resource p{ 
  width: auto;
  background-color: var(--color-gray-color);
  font-size: var(--fs-m);
  display: flex;
  align-items: center;
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-m);
}


.comment {
  width: 100%;
    display: flex;
    flex-direction: column;

    background-color: var(--color-gray);
    padding: var(--space-s);
    border-radius: var(--radius-m);
    gap: var(--space-s);
}


@media (min-width: 768px) {
 
.comment {

    flex-direction: row;

}

}





.comment img {
  width: 80px;
  height: auto;
  display: block;
  align-self:flex-start;
  border-radius:50%;
}





.comment-info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: var(--space-xs);

}



.comment-info .join-top-list-content-num {
    font-size: var(--fs-s);
    color: var(--color-trans);
}

.comment-info h2{
  font-size: var(--fs-l);

}

.split-block {
  display: flex;
  flex-direction: column;
  height: auto;
  gap: var(--space-m); /* ←ここが余白 */
  box-sizing: border-box;
}

@media (min-width: 768px) {

.split-block {
 flex-direction: row;
}
}

.split {
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-m); /* 角丸 */
}

/* 画像を綺麗にフィット */
.split img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* #endregion Owner  */

/* #region Fan Card  */

.fancard-mini{
  width: 100%;
}


.fancard-mini .join-top-list-content{
    flex-direction: row;

}


@media (max-width: 768px) {
 
.fancard-mini .comment-info {
  width: 40vw;

}
}





.fancard-mini img {
  width: 30px;
  height: auto;
  display: block;
  align-self:center;
  border-radius:50%;
  transform: translateY(3px);
}


.fancard-mini .join-top-list{
  width: 100%;
  display: flex;
  gap: var(--space-s);
   overflow: auto;
   
}




@media (min-width: 768px) {
 
  .fancard-mini .join-top-list{
      display: grid;
    grid-template-columns: repeat(2, 1fr);
    
  }
}

.video-section {
  width: 100%;
  height: 300vh;
  position: relative;
  display: flex;
  justify-content: center;
}

.video-section video {
  position: sticky;
  top: 0;

  width: 100%;
  height: 100vh;
}

/* #endregion Fan Card  */

/* #region buy  */




.buy{
  
  position:relative;
  width: 100%;
  height:auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.buy .content-001{
  width: 100%;
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;  
  background-color: var(--color-gray-color);
    border-radius: var(--radius-m);


}


.buy-card{
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
      padding: 5vw;
  
}
/* ==========================================
  💻 PC・デスクトップ（画面幅 768px 以上）
========================================== */
@media (min-width: 768px) {
  .buy-card{
   flex-direction: row;
    padding: 10vw;

  }
}




.buy-title{
  font-size:var(--fs-4xl);
}




.buy-card-image {
  width: 100%;
}

/* ==========================================
  💻 PC・デスクトップ（画面幅 768px 以上）
========================================== */
@media (min-width: 768px) {
.buy-card-image{
    width: 50%;


  }
}


.buy-card-img {
  width: 100%;
  height: auto;
  display: block;
}

.buy-card-middle {
  width: 100%;
  padding-bottom:var(--space-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ==========================================
  💻 PC・デスクトップ（画面幅 768px 以上）
========================================== */
@media (min-width: 768px) {
.buy-card-middle{
    width: 50%;
     padding-right: var(--space-m);

  }
}



.buy-card-num-header{
  width: auto;
  display: flex;
    flex-direction: column;

  gap: var(--space-s);
  justify-content: flex-start;
  align-items: flex-start;
}


.buy-card-middle .header-003{
  width: auto;
}



.buy-card-title { font-size: var(--fs-2xl); line-height: var(--lh-s); }
.buy-card-date  { font-size: var(--fs-s); margin-bottom:var(--space-xs); }

.buy-card-name {
  font-size: var(--fs-m);
  padding-top: var(--space-xs);
}

.buy .button-002{
  background-color: var(--color-button);
}



.buy-card-bottom {
  width: auto;
  position: relative;
  display: flex;
  overflow: hidden;
  pointer-events: auto ;
}


@media (hover: hover) and (pointer: fine) {

.buy-card-bottom:hover::before {
  width: auto;
}
}

.buy-card-bottom a,
.buy-card-bottom span,
.buy-card-bottom img {
  position: relative;
  z-index: 1;
}




/* #endregion buy  */

/* #region    PRIVACY POLICY  */
/* =====================================
   PRIVACY POLICY
===================================== */

.privacy-policy-list{

  width:100%;

  display:flex;

  flex-direction:column;

  gap:var(--space-m);

}



.privacy-policy-block{
  display: flex;
  flex-direction: column;
gap: var(--space-xxs);
}





.privacy-policy-block h3{

  font-size:var(--fs-m);

  margin-bottom:var(--space-xxs);

}



/* #endregion    PRIVACY POLICY  */

/* #region    contact  */
/* =====================================
 CONTACT
===================================== */


.contact-content{

  width:50%;
  margin:0 auto;

}






.contact-form{

  display:flex;
  flex-direction:column;

  gap:40px;

}



.contact-item{

  display:flex;
  flex-direction:column;

  gap:var(--space-xs);

}



.contact-item label{

  font-size:var(--fs-s);

}



.contact-textarea{

  width:100%;
  min-height:200px;

  padding:20px;

  background:var(--color-button);

  border:none;

  border-radius:var(--radius-m);

  font-size:var(--fs-s);

  color:var(--color-main);

  resize:vertical;

}



.contact-policy{

  margin-top:var(--space-s);
  display: flex;
  flex-direction: column;
  gap: 20px;

}



.contact-policy input{

  margin-right:10px;
    transform: translateY(2.3px);


}

.contact-submit{

  margin-top:var(--space-m);

  align-self:center;

}



@media(max-width:1032px){

  .contact-content{

    width:100%;

  }

}


.required{

  font-size:12px;

  color:#ff7866;

  margin-left:8px;

}


.top-contact .content-001{

  background-color: var(--color-gray);


}



/* #endregion    contact  */



/* #region owner page */

.owner-resource{
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}


 .businesscontest-mini .list-items-002 p {
  background-color: var(--color-invert);
}
/* --- 全画面モーダルの外枠（画面全体に完全固定） --- */
.owner-project-overlay {

  display: none;
  position: fixed; /* 変更：親の高さに影響されないよう画面に完全固定 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-invert);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  z-index: 30000;
  box-sizing: border-box;
}

/* 表示用クラス（JSでこれがついた時にブロック表示） */
.owner-project-overlay.is-owner-open {
  display: block !important; 
  animation: ownerFadeIn 0.25s ease forwards;
}

/* --- 【最重要】ここをスクロールさせます --- */
.owner-project-container {
  width: 100%;
  height: 100%; /* 画面いっぱいの高さにする */
  position: relative;
  box-sizing: border-box;
  
  /* ▼ はみ出た中身をここで確実にスクロールさせる設定 ▼ */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* --- コンテンツ全体の余白（上部にボタン用のスペースを確保） --- */
.owner-project-scroll-content {
  padding: 120px 40px 60px 40px; 
  max-width: 1000px; 
  margin: 0 auto;    
  box-sizing: border-box;
}

/* --- 右上に「常に」固定される専用クローズボタン（既存のデザインに統合） --- */
.owner-project-close {
  position: fixed; /* 画面の右上に常に完全固定 */
  top: 40px;
  right: 40px;
  width: 45px;
  height: 45px;
  border: var(--border-m) solid var(--color-main); /* 既存の変数を使用 */
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000; /* コンテンツより必ず上 */
  padding: 0;
  box-sizing: border-box;
  transition: opacity 0.2s;
}

/* PCサイズでの位置調整（いただいたメディアクエリに準拠） */
@media (min-width: 768px) {
  .owner-project-close {
    top: 45px;
    right: 45px;
  }
}

/* ×の線を擬似要素で再現 */
.owner-project-close::before,
.owner-project-close::after {
  content: "";
  position: absolute;
  width: 20px;
  height: var(--border-m); /* 既存の変数を使用 */
  background: var(--color-main); /* もし色が反映されない場合は #fff か var(--color-invert) に変更してください */
  border-radius: 2px;
}

.owner-project-close::before { transform: rotate(45deg); }
.owner-project-close::after  { transform: rotate(-45deg); }




/* ホバー時の半透明エフェクト */

@media (hover: hover) and (pointer: fine) {

.owner-project-close:hover {
  opacity: 0.5;
}

}

/* スマホ用の余白微調整 */
@media (max-width: 767px) {
  .owner-project-scroll-content {
    padding: 90px 20px 40px 20px;
  }

}

/* --- アニメーション：ふわっと表示 --- */
@keyframes ownerFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}





/* #endregion owner page */


/* #region footer page */







/* #endregion footer page */






/* ============================================================================================
   HEADERS
============================================================================================ */

.header-001 {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.header-001 h2 {
  font-size: var(--fs-m);
}

.header-002 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-s);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-003 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxxs);
}

.header-003 h2 {
  font-size: var(--fs-2xl);
}

.header-003 h3 {
  font-size: var(--fs-l);
  margin-bottom: 20px;
}

.header-003 p {
  font-size: var(--fs-l);
  color: var(--color-trans);
}


.header-004 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxxs);
}


/* Mobile */
@media (max-width: 767px) {
.header-004 {

  gap: var(--space-xs);
}
}




.header-004 h2 {
  
  font-size: var(--fs-xl);
}

.header-004 p {
  font-size: var(--fs-m);
  color: var(--color-trans);
}

.header-004 .num{
  font-size: var(--fs-xl);
  color: var(--color-trans);
}



.header-006 h2 {
 font-size: var(--fs-l);
}


.header-006 p{
  margin-top: 5px;
 color: var(--color-trans);
}





/* ============================================================================================
   IMAGES
============================================================================================ */

.image-001 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: var(--space-l);
  border-radius: var(--radius-m);
}






/* ============================================================================================
   PROJECTS LIST & CARD
============================================================================================ */

.projects-list {
  position: relative;
  width:fit-content;
  height: 100vh;
  perspective: 1000px;
  overflow: hidden;
}


.projects-card-bottom {
  width: auto;
  position: relative;
  display: flex;
  overflow: hidden;
  pointer-events: auto ;
}


@media (hover: hover) and (pointer: fine) {

.projects-card-bottom:hover::before {
  width: auto;
}
}

.projects-card-bottom a,
.projects-card-bottom span,
.projects-card-bottom img {
  position: relative;
  z-index: 1;
}


/* ============================================================================================
   SUPPORTER
============================================================================================ */

.supporter-splide {
  width: 100%;
}

.supporter-list img {
  width: 150px;
  height: auto;
  object-fit: contain;
  display: block;
  transition: 0.3s;
}


/* ============================================================================================
   BUTTONS
============================================================================================ */

.button-001 {
  font-size: var(--fs-xs);
  display: inline-flex;
  width: fit-content;
  flex: none;
  padding: var(--space-xxs) var(--space-s);
  border: var(--border-m) solid var(--color-main);
  border-radius: var(--radius-m);
}




.read-more {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.read-more img {
  width: auto;
  height:1em;

  transform: translateY(0.4px);
}




/* ============================================================================================
   FOOTER
============================================================================================ */













/* ============================================================================================
   CLOSE BUTTON
============================================================================================ */

.close-button {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 45px;
  height: 45px;
  border: var(--border-m) solid var(--color-invert);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20001;
}
@media (min-width: 768px) {
.close-button {

  top: 45px;
  right: 45px;

 
}
}



.close-button::before,
.close-button::after {
  content: "";
  position: absolute;
  width: 20px;
  height: var(--border-m);
  background: #fff;
  border-radius: 2px;

}

.close-button::before { transform: rotate(45deg); }
.close-button::after  { transform: rotate(-45deg); }



@media (hover: hover) and (pointer: fine) {

.close-button:hover {
  opacity: 0.5;
}

}





.background {
  font-size: var(--fs-s);
  line-height: var(--lh-l);
}

.background-img {
  width: 100%;
}






/* ============================================================================================
   STORY (PAGE)
============================================================================================ */



/* ============================================================================================
   LINES
============================================================================================ */

.line,
.line-s {
  width: 100%;
  border-top: var(--border-m) solid var(--color-main);
}

.line-l {
  width: 100%;
  border-top: 10px solid var(--color-gray);
}
.line-ss {
  width: 100%;
  border-top: 1px dashed var(--color-main);
}


/* ============================================================================================
   GUIDELINE
============================================================================================ */



.guideline-map-info {
  position: sticky;
  top: var(--space-m);

  width: 100%;

  display: flex;
  flex-direction: column;
  gap: var(--space-s);

  padding: var(--space-xs);
  box-sizing: border-box;
  border-radius: var(--radius-m);
  background: var(--color-gray);
}

.guideline-map-block {
  width: 100%;
  padding: 15px 0;
  border-bottom: var(--border-m) solid var(--color-main);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}


.guideline-map-block:last-child {
  border-bottom: none;
}


.guideline-info-name   { min-height: 9vw; }

.guideline-info-middle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xxs);
}