/* =================================================== */
/* ===== 1. 基本設定 & 共通スタイル ===== */
/* =================================================== */
body {
  font-family:'Montserrat', 'Zen Kaku Gothic New', sans-serif;
  margin: 0;
  padding-top: 50px; 
  color: #333;
  background-color: #fff;
}







        /* ローディング画面全体 */
          #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 999999;
            opacity: 1;
            visibility: visible;
            transition: opacity 0.8s ease, visibility 0.8s ease;
          }

          /* 中央の文字 */
          /* 文字の初期設定（アニメーションはここでは書かない） */
          .loading-text {
            color: #fff;
            font-family: 'against';
            font-size: 8rem;
            font-weight: 300;
            letter-spacing: -0.08em;
            opacity: 0; /* 最初は透明 */
          }
          
          /* 初回訪問時、loaderにloadedが付くまでの間だけアニメーションさせる */
          #loading-screen:not(.loaded) .loading-text {
            animation: fadeInOut 1.5s ease-in-out forwards;
          }

          /* ローディング完了後の状態 */
          #loading-screen.loaded {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
          }

          @keyframes fadeInOut {
            0% { opacity: 0; transform: translateY(5px); }
            50% { opacity: 1; transform: translateY(0); }
            100% { opacity: 1; transform: translateY(0); }
          }





/* =================================================== */
/* ===== 2. トップページ (`index.html`) のスタイル ===== */
/* =================================================== */

/* --- メインレイアウト (2カラム) --- */
.div-box-1 { display: flex; align-items: flex-start; gap: 100px; max-width: 1200px; margin: 0 auto; }
.whoami-master { 
  flex: 1; 
  position: -webkit-sticky; 
  position: sticky; 
  /* bodyのpaddingと同じ、または少し少なめの値にするとスクロール時に綺麗に止まります */
  top: 10px;  }

.Projects-master { flex: 3; margin: 0; min-height: 100vh; /* 常に画面1枚分の高さを確保 */ }

/* --- 左カラム (`whoami`) --- */
.whoami-title, .projects-title { font-size: 2rem; font-weight: bold; color: #000; margin-top: 0; }
.whoami-master p { font-size: 12px; margin: 0; padding-bottom: 10px; }
.introduction-block { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
.introduction-block p { font-size: 12px; line-height: 1.8; margin-bottom: 1em; }
.introduction-block p:last-child { margin-bottom: 0; }

/* --- 右カラム (`projects`) --- */
.projects-title { 
  position: -webkit-sticky; 
  position: sticky; 
  /* 左側と高さを合わせる */
  top: 10px; 
  background-color: white; 
  z-index: 10; }

.filter-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.filter-btn { background: transparent; border: 1px solid #ddd; color: #555; padding: 5px 15px; border-radius: 15px; font-family: inherit; font-size: 12px; cursor: pointer; transition: all 0.2s ease; }
.filter-btn:hover { background-color: #f0f0f0; border-color: #ccc; }
.filter-btn.active { background-color: #000; color: #fff; border-color: #000; }
.project-box { position: relative; display: flex; font-size: 12px; justify-content: space-between; align-items: center; border: none; border-bottom: 1px solid #ccc; padding: 15px 10px; margin: 0; transition: background-color 0.2s ease, color 0.2s ease; }
.project-box:hover { background-color: #0000ff; color: white; cursor: pointer; }
.project-box.hidden { display: none; }
.projects-title-link { text-decoration: none; color: inherit; }
.projects-title-link::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.project-meta { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.tags-container { display: flex; gap: 6px; }
.tag { font-size: 10px; font-weight: 500; padding: 3px 10px; background-color: #eee; color: #555; border-radius: 12px; white-space: nowrap; transition: 0.2s ease; }
.project-box:hover .tag { background-color: rgba(255, 255, 255, 0.2); color: white; }
.year-tag { font-size: 10px; padding: 2px 9px; color: #888; border: 1px solid #ddd; border-radius: 6px; white-space: nowrap; transition: 0.2s ease; }
.project-box:hover .year-tag { border-color: rgba(255, 255, 255, 0.5); color: white; }


/* =================================================== */
/* ===== 3. プロジェクト詳細ページ のスタイル ===== */
/* =================================================== */

/* --- メインレイアウト --- */
.project-detail-container { display: flex; align-items: flex-start; gap: 100px; max-width: 1200px; margin: 0 auto; padding: 20px; }

/* --- 左カラム (サイドバー) --- */
.project-sidebar { flex: 1; position: -webkit-sticky; position: sticky; top: 20px; height: calc(100vh - 40px); display: flex; flex-direction: column; }
.back-link { display: block; font-weight: 500; font-size: 14px; text-decoration: none; color: #333; margin-bottom: 20px; padding: 8px 0; }
.project-list-menu { overflow-y: auto; flex-grow: 1; border-top: 1px solid #eee; }
.project-list-menu .project-box { padding-top: 12px; padding-bottom: 12px; }
.project-list-menu .project-box.active { background-color: #f0f0f0; cursor: default; }
.project-list-menu .project-box.active:hover { background-color: #f0f0f0; color: inherit; }
.project-list-menu .project-box.active .tag { background-color: #ddd; color: #555; }
.project-list-menu .project-box.active:hover .tag { background-color: #ddd; }



.mobile-back-link {display: none; font-weight: 500; font-size: 14px; color: #333; text-decoration: none; margin-bottom: 30px; }





/* --- 右カラム (コンテンツ) --- */
.project-content { flex: 2.5; padding-top: 8px; }
.project-content h1 { font-size: 2.5rem; margin-top: 0; margin-bottom: 10px; }
.project-content h2 { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-top: 60px; margin-bottom: 20px; }
.project-content h3 { font-size: 1rem; font-weight: 700; margin-top: 40px; margin-bottom: 20px; }
.project-content p, .project-content ul { font-size: 14px; line-height: 1.8; max-width: 800px; }
.project-content ul { padding-left: 20px; margin-bottom: 1.5em;}
.project-main-image { width: 100%; height: auto; border-radius: 5px; margin-bottom: 60px; border: 1px solid #eee; }
.detail-tags-container { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; margin-top: 20px; }



/* ★★★★★ 詳細ページ テキストスタイル（更新版）★★★★★ */
.concept-lead { font-size: 15px; line-height: 1.9; font-weight: 400; max-width: 800px; }
.concept-lead strong { font-weight: 700; }

.concept-list {list-style: none; padding-left: 20px; /* 2px(線の太さ) + 20px(余白) = 22px */}
.concept-list li { margin-bottom: 10px; }
.concept-list li strong { display: block; font-size: 13px; margin-bottom: 5px; font-weight: 700; }
.concept-list li span { color: #555; }

.catchphrase {margin-left: 22px; border-left: 2px solid #000; padding-left: 20px; }
.catchphrase p { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.catchphrase footer { font-size: 13px; color: #777; }

/* =================================================== */
/* ===== 4. 共通コンポーネントのスタイル ===== */
/* =================================================== */
#image-preview-container { position: fixed; z-index: 9999; width: 500px; height: 500px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); background-size: cover; background-position: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; transform: rotate(-5deg) scale(0.9); }
#image-preview-container.visible { opacity: 1; visibility: visible; transform: rotate(-5deg) scale(1); }


/* ===== すべてのメディアを「画面内に収める」保険 ===== */
img,video,iframe { max-width: 100%; height: auto; display: block; }
.video-container-square { width: 100%; max-width: 100%; aspect-ratio: 1 / 1; margin-left: auto; margin-right: auto; }

/* =================================================== */
/* ===== 5. レスポンシブ対応 (〜767px) ===== */
/* =================================================== */
@media (max-width: 767px) {
  
  body {
    padding-top: 40px; /* PCより少し控えめに */
    padding-left: 25px;
    padding-right: 25px;
  }  
  
  /* 左右の余白を広げる */
  .project-meta { gap: 8px;}
  
  .tag { font-size: 9px;}
  .mobile-back-link { display: block; }
  
  .div-box-1 { flex-direction: column; gap: 40px; width: 100%; box-sizing: border-box; } /* コンテナ自体に幅の余裕を持たせる */
  .whoami-master { position: static; padding-right: 0;} /* whoamiセクションのテキストの視認性を高める */
  .whoami-title, .projects-title { font-size: 1.8rem; }

  .projects-master { width: 100%; }

  /* プロジェクトリストの各項目 */
  .project-box { padding: 15px 5px;}/* 内側の左右余白を少し削り、外側のbody余白に任せる */
  .projects-title { position: static; background-color: transparent; }

  /* 詳細ページのコンテナ余白も統一 */
  .project-detail-container {  flex-direction: column; gap: 0; padding: 15px 20px;} /* Bodyの余白と合わせると綺麗です */

  #image-preview-container { display: none; }
  .project-sidebar { display: none; }
  .project-content { width: 100%; padding-top: 0; }
  .project-content h1 { font-size: 1.8rem; }
  
  
  /* スマホ時にコンテンツが上に突き抜けないよう調整 */
  .page-index {
    overflow: hidden; /* ローディング中はスクロール禁止 */
  }
  .page-index.content-visible {
    overflow: auto; /* ローディング終了後に解除（JSで制御） */
  }
  .loading-text {
    font-size: 1rem;   /* スマホverサイズ */
  }

}




/* =================================================== */
/* ===== 詳細ページ：埋め込み動画用のスタイル ===== */
/* =================================================== */

/* 動画を囲むコンテナ */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 のアスペクト比を維持するための設定 */
  margin-bottom: 20px; /* 動画と下の画像の間の余白 */
  border-radius: 5px;
  overflow: hidden; /* 角丸を適用するため */
  border: 1px solid #eee;
}

.video-container-square {
  width: 100%;
  max-width: 800px;   /* PCでは最大800px */
  aspect-ratio: 1 / 1; /* 正方形を維持 */
  position: relative;
  margin: 0 auto 20px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #eee;
  background: #000;
}
.video-container-square video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* coverにすると切れるのでcontain */
  display: block;
}


/* 埋め込まれたiframe要素 */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}





/* =================================================== */
/*  横スクロール完全封鎖  */
/* =================================================== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}






/* =================================================== */
/* PC版：index.htmlのみに適用する固定レイアウト設定（修正版） */
/* =================================================== */
@media (min-width: 768px) {

/* whoami側の調整 */
.page-index .whoami-master {
  flex: 1;
  height: 100%;
  /* コンテナ自体のパディングも確認 */
  padding-top: 0; 
}

/* projects側の調整 */
.page-index .projects-title {
  /* 以前設定したmargin-bottomがあれば、ここで上書きして調整 */
  margin-bottom: 38px; 
}

  .page-index {
    /* body自体のスクロールを完全に禁止し、画面にフィットさせる */
    overflow: hidden;
    height: 100vh;
  }

  .page-index .div-box-1 {
    /* 画面いっぱいの高さから、bodyの上部padding分(50px)を引く */
    height: calc(100vh - 50px); 
    display: flex;
    overflow: hidden; 
  }

  .page-index .whoami-master {
    flex: 1;
    height: 100%;
    /* whoamiセクション自体も内容が多い場合はスクロール可能にする保険 */
    overflow-y: auto; 
  }

  /* 右カラム：Projects全体 */
  .page-index .Projects-master {
    flex: 3;
    height: 100%;
    display: flex;
    flex-direction: column; /* 見出し＋フィルターと、リストを縦に並べる */
    overflow: hidden; /* ここ自体はスクロールさせない */
  }

  /* 見出しとフィルターの塊を固定 */
  .page-index .projects-sticky-header {
    flex-shrink: 0; /* 高さを圧縮させない */
    background-color: #fff;
    padding-bottom: 10px;
  }

  /* ★重要：プロジェクトリストのラッパーだけをスクロールさせる */
  .page-index .project-list-wrapper {
    flex-grow: 1; /* 残りの高さをすべて使う */
    overflow-y: auto; /* ここだけをスクロール可能にする */
    padding-right: 15px;
    /* リストの一番下が隠れないように余白を確保 */
    padding-bottom: 100px; 
    -webkit-overflow-scrolling: touch;
  }

  /* 不要な設定の解除 */
  .page-index .projects-title, 
  .page-index .filter-container {
    position: static;
    margin: 0;
  }

  /* 右側の見出し「projects」の設定 */
  .page-index .projects-title {
    position: static;
    background-color: transparent;
    /* introduction-blockのborder位置に合わせるための調整 */
    margin-top: 0;
    margin-bottom: 38px; /* ここでラベルとの間の隙間を大きく開ける */
    padding: 0;
    line-height: 1;
  }

  /* フィルターラベルのコンテナ */
  .page-index .filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
    /* introduction-blockのpadding-top(20px)と整合性を取る */
    padding-bottom: 20px; 
    border-bottom: 1px solid #eee; /* この線の位置を左側と揃える */
  }

  /* リスト部分の開始位置を微調整 */
  .page-index .project-list-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    padding-top: 10px; /* 線とリストの間の余白 */
    padding-right: 15px;
    padding-bottom: 100px;
  }



}