/* ==========================================
   プロジェクトストーリーページ専用スタイル
   ========================================== */

:root {
   --project-blue: #186EA9;
   /* TOSCOメインブルー */
   --project-dark: #0f2d4a;
   /* 濃いネイビー */
   --project-bg: #f4f8fc;
   /* 背景色 */
   --project-text: #333;
}

/* --- セクション全体 --- */
.project-story-section {
   padding: 6rem 0 8rem;
   background: #fff;
   position: relative;
}

/* --- イントロダクション（メンバー紹介） --- */
.project-intro {
   text-align: center;
   margin-bottom: 6rem;
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
}

.project-main-title {
   font-size: clamp(2rem, 3.5vw, 3rem);
   font-weight: 700;
   color: var(--project-blue);
   margin-bottom: 1.5rem;
   letter-spacing: 0.05em;
}

.project-intro-text {
   font-size: clamp(0.9rem, 1.2vw, 1rem);
   line-height: 2;
   color: #666;
   margin-bottom: 4rem;
}

/* メンバー紹介エリア */
.project-members {
   display: flex;
   justify-content: center;
   gap: 4rem;
   flex-wrap: wrap;
}

.member-profile {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 240px;
}

.member-img {
   width: 140px;
   height: 140px;
   border-radius: 50%;
   overflow: hidden;
   margin-bottom: 1.5rem;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   border: 3px solid #fff;
}

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

.member-info {
   text-align: center;
}

.member-dept {
   font-size: 0.8rem;
   color: var(--project-blue);
   font-weight: 700;
   margin-bottom: 0.3rem;
}

.member-name {
   font-size: 1.25rem;
   font-weight: 700;
   margin-bottom: 0.3rem;
}

.member-role {
   font-size: 0.8rem;
   color: #888;
}

/* --- ストーリー本文エリア --- */
.project-body {
   max-width: 900px;
   margin: 0 auto;
}

.project-block {
   margin-bottom: 6rem;
}

.project-block:last-child {
   margin-bottom: 0;
}

/* 画像 */
.project-image {
   width: 100%;
   margin-bottom: 3rem;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.project-image img {
   width: 100%;
   height: auto;
   display: block;
   transition: transform 0.5s ease;
}

.project-block:hover .project-image img {
   transform: scale(1.03);
}

/* テキストコンテンツ */
.project-text-content {
   padding: 0 1rem;
}

/* 見出し */
.project-heading {
   font-size: clamp(1.5rem, 2.5vw, 1.8rem);
   font-weight: 700;
   color: var(--project-blue);
   margin-bottom: 2rem;
   line-height: 1.4;
   padding-left: 1rem;
   border-left: 6px solid var(--project-blue);
}

/* 対談テキスト行 */
.talk-row {
   display: flex;
   gap: 1.5rem;
   margin-bottom: 1.5rem;
   align-items: flex-start;
}

.talk-name {
   flex-shrink: 0;
   font-weight: 700;
   color: var(--project-blue);
   background: #eaf4fd;
   padding: 0.2rem 0.8rem;
   border-radius: 4px;
   font-size: 0.9rem;
   margin-top: 0.2rem;
}

.talk-text {
   line-height: 1.9;
   color: #444;
   font-size: 1rem;
}

/* --- エントリーボタンエリア --- */
.project-action {
   text-align: center;
   margin-top: 8rem;
   padding: 0 1rem;
}

.project-action-text {
   font-size: clamp(1.1rem, 1.5vw, 1.25rem);
   font-weight: 700;
   margin-bottom: 2.5rem;
   color: #333;
   line-height: 1.6;
}

.annotation {
   font-size: 0.85rem;
   color: #666;
   display: block;
}

.text-center {
   text-align: center;
}

.mt-2 {
   margin-top: 0.5rem;
}

/* ボタン（強制適用：benefits.cssから移植） */
.project-action .btn-primary {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: 4rem;
   padding: 1.2rem 3rem;
   background: linear-gradient(90deg, #019DE8 0%, #0356BB 100%);
   color: #fff;
   border-radius: 50px;
   font-weight: 600;
   text-decoration: none;
   transition: all 0.3s ease;
   min-width: 320px;
   max-width: 100%;
   box-shadow: 0 4px 15px rgba(1, 157, 232, 0.3);
}

.project-action .btn-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 20px rgba(1, 157, 232, 0.4);
   background: linear-gradient(90deg, #0178BD 0%, #023D8F 100%);
}

.project-action .btn-text {
   font-size: 1.2rem;
   font-weight: 700;
   letter-spacing: 0.05em;
}

.project-action .btn-arrow-circle {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   background: #fff;
   border-radius: 50%;
   flex-shrink: 0;
}

.project-action .btn-arrow {
   font-size: 1.2rem;
   color: #019DE8;
   line-height: 1;
   font-weight: 700;
}

/* スマホ対応（レスポンシブ内に追加） */
@media (max-width: 768px) {
   /* ... 既存のスタイル ... */

   .project-action {
      margin-top: 6rem;
   }

   .project-action-text {
      font-size: 1rem;
      margin-bottom: 2rem;
   }

   .project-action .btn-primary {
      width: 100%;
      min-width: auto;
      padding: 1rem 1.5rem;
      box-sizing: border-box;
      gap: 0;
      /* スマホでは間隔自動調整 */
   }

   .project-action .btn-text {
      font-size: 1rem;
   }

   .project-action .btn-arrow-circle {
      width: 24px;
      height: 24px;
   }

   .project-action .btn-arrow {
      font-size: 1rem;
   }
}

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

@media (max-width: 768px) {
   .project-story-section {
      padding: 4rem 0 6rem;
   }

   .project-intro {
      margin-bottom: 4rem;
   }

   .project-members {
      gap: 2.5rem;
   }

   .member-profile {
      width: 45%;
      /* スマホでは2列っぽく */
   }

   .member-img {
      width: 100px;
      height: 100px;
   }

   .member-name {
      font-size: 1.1rem;
   }

   .project-block {
      margin-bottom: 4rem;
   }

   .project-image {
      margin-bottom: 2rem;
      border-radius: 6px;
   }

   .project-heading {
      font-size: 1.3rem;
      margin-bottom: 1.5rem;
      padding-left: 0.8rem;
      border-left-width: 4px;
   }

   .project-text-content {
      padding: 0;
   }

   /* 対談形式をスマホで見やすく */
   .talk-row {
      gap: 0.8rem;
      margin-bottom: 1.2rem;
   }

   .talk-name {
      padding: 0.1rem 0.5rem;
      font-size: 0.8rem;
      margin-top: 0.3rem;
   }

   .talk-text {
      font-size: 0.95rem;
      line-height: 1.8;
   }
}