@charset "UTF-8";

/* ==========================================================================
   style.css について
   ==========================================================================
   このファイルは、比較的古いページ（index.html, 404.html, card.html）が
   <link rel="stylesheet" href="style.css"> で読み込んでいる共通スタイルシート。
   その後に作られたページ（recruit.html, portal/mypage.html など）は、このファイルを
   使わず、各HTMLファイルの中に <style> タグで直接デザインを書く方式に変わっている
   （そのため、色の名前(--color-primary など)は似ているが、ファイルとしては別物）。
   ========================================================================== */

/* ==========================================================================
   Google Fonts
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

/* ==========================================================================
   1. マイルド・ポップ・デザインシステム (Variables)
   ========================================================================== */
:root {
  --color-primary: #F08332;       /* 少し落ち着いたオレンジ */
  --color-primary-light: #FFB77A; /* 優しい薄オレンジ */
  --color-secondary: #5C4D43;     /* 枠線・文字色（柔らかいブラウン） */
  --color-accent-yellow: #FADB5F; /* まぶしすぎないイエロー */
  --color-accent-blue: #70D6FF;   /* パステル系の水色 */
  --color-accent-pink: #FF85A1;   /* マイルドなピンク */
  --bg-color: #FFFBF7;            /* より白に近いクリーム色 */
  --font-pop: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Quicksand', sans-serif;
}

/* ==========================================================================
   2. Base & Typography
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-color);
  background-image: 
    radial-gradient(#F3E5D8 20%, transparent 20%),
    radial-gradient(#F3E5D8 20%, transparent 20%);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
  color: var(--color-secondary);
  font-family: var(--font-pop);
  line-height: 1.85;
  font-weight: 500;
  overflow-x: hidden;

  /* スマホ等で変な位置で改行されないようにする設定 */
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: break-word;

  /* 背景のドットがゆっくり斜めに流れるアニメーション */
  animation: backgroundScroll 30s linear infinite;
}

/* 見出しの改行バランスを自動で美しく均等にする */
h1, h2, h3, .section-title, .hero-title, .text-large-emphasis {
  text-wrap: balance; 
}

/* 長文の最終行が1〜2文字だけポツンと残るのを防ぐ */
p, .story-text, .member-comment, .timeline-desc, .org-desc, .message-text p {
  text-wrap: pretty;
}

strong {
  background: linear-gradient(transparent 60%, rgba(250, 219, 95, 0.6) 60%);
  padding: 0 4px;
  color: var(--color-secondary);
  font-weight: 900;
}

/* ==========================================================================
   3. Keyframes (アニメーション定義)
   ========================================================================== */
@keyframes backgroundScroll {
  0% { background-position: 0 0, 15px 15px; }
  100% { background-position: 60px 60px, 75px 75px; }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(-2deg); }
}

@keyframes floatRotate {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-5deg); }
  50% { transform: translateX(-50%) translateY(-10px) rotate(5deg); }
}

@keyframes popIn { 
  from { opacity: 0; transform: scale(0.9) translateY(20px); } 
  to { opacity: 1; transform: scale(1) translateY(0); } 
}

/* 初回ローディング用アニメーション */
@keyframes drawLogoLine {
  0% { stroke-dashoffset: var(--length); fill: transparent; }
  60% { stroke-dashoffset: 0; fill: transparent; }
  100% { stroke-dashoffset: 0; fill: var(--color-secondary); }
}

/* ==========================================================================
   4. Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-narrow {
  max-width: 800px;
}

section {
  padding: 90px 0;
  position: relative;
}

/* ==========================================================================
   5. Common Components (Buttons, Titles, etc.)
   ========================================================================== */
.section-title-wrap { text-align: center; margin-bottom: 60px; }
.section-subtitle { display: inline-block; font-size: 0.95rem; font-weight: 900; letter-spacing: 0.1em; color: var(--color-secondary); background-color: var(--color-accent-blue); padding: 6px 16px; margin-bottom: 12px; border-radius: 20px; border: 2px solid var(--color-secondary); box-shadow: 3px 3px 0 var(--color-secondary); transform: rotate(-1deg); }
.section-title { font-size: 2.2rem; color: var(--color-primary); font-weight: 900; letter-spacing: 0.05em; border-bottom: 3px dashed var(--color-primary-light); padding-bottom: 10px; display: inline-block; }

.text-large-emphasis { display: block; font-size: 1.8rem; line-height: 1.6; font-weight: 900; color: var(--color-secondary); text-align: center; margin: 40px 0; letter-spacing: 0.05em; }
.text-large-emphasis .red { color: var(--color-primary); font-size: 2.2rem; background: linear-gradient(transparent 60%, rgba(250, 219, 95, 0.6) 60%); }

/* 共通ボタン（ホバー時にぽよんっ） */
.btn, .start-btn, .btn-entry, .form-submit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 36px; font-size: 1.1rem; font-weight: 900; text-decoration: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer; border-radius: 50px;
  border: 2px solid var(--color-secondary);
}
.btn-primary, .start-btn, .btn-entry, .form-submit-btn {
  background-color: var(--color-primary); color: #fff;
  box-shadow: 4px 4px 0 var(--color-secondary);
}
.btn-primary:hover, .start-btn:hover, .btn-entry:hover, .form-submit-btn:hover {
  transform: translate(2px, 2px) scale(1.03); 
  box-shadow: 2px 2px 0 var(--color-secondary);
}
.btn-secondary { background-color: #fff; color: var(--color-secondary); box-shadow: 4px 4px 0 var(--color-secondary); }
.btn-secondary:hover { transform: translate(2px, 2px) scale(1.03); box-shadow: 2px 2px 0 var(--color-secondary); }

.btn-line {
  display: flex; align-items: center; justify-content: center; 
  width: 100%; max-width: 400px; margin: 15px auto 0; padding: 16px 20px; 
  font-size: 1.05rem; font-weight: 900; 
  color: #fff; background-color: #06C755; 
  border: 2px solid var(--color-secondary); border-radius: 50px; 
  text-decoration: none; box-shadow: 4px 4px 0 var(--color-secondary); 
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
}
.btn-line:hover { transform: translate(2px, 2px) scale(1.03); box-shadow: 2px 2px 0 var(--color-secondary); }

.skip-btn { display: block; margin: 25px auto 0; font-size: 0.95rem; color: #888; text-decoration: underline; background: none; border: none; cursor: pointer; font-weight: 900; font-family: inherit; transition: 0.2s; }
.skip-btn:hover { color: var(--color-primary); transform: scale(1.05); }

/* ==========================================================================
   6. Hero Section ＋ ★名刺表面のデザイン逆輸入
   ========================================================================== */
.hero { 
  position: relative; 
  min-height: 90vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  padding-top: 100px; 
  padding-bottom: 40px; 
  overflow: hidden; /* はみ出しカット */
}

/* ★名刺表面の巨大な「NAKAYORI」透かし文字を背景に配置 */
.hero::after {
  content: 'N A K A Y O R I';
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(60px, 16vw, 250px); /* 画面幅に合わせて伸縮 */
  font-family: 'Helvetica Neue', Arial, sans-serif; /* 名刺と同じソリッドなフォント */
  font-weight: 900;
  color: rgba(92, 77, 67, 0.04); /* 透かしのように極薄く */
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

.hero-wrap { text-align: center; margin-bottom: 60px; padding-top: 60px; }
.hero-content { position: relative; z-index: 2; }
.hero-tag { display: inline-block; font-size: 1.1rem; font-weight: 900; color: #fff; background-color: var(--color-primary); border: 2px solid var(--color-secondary); padding: 6px 24px; border-radius: 50px; margin-bottom: 30px; box-shadow: 3px 3px 0 var(--color-secondary); animation: floatY 3s ease-in-out infinite; }
.hero-title { font-size: 3.2rem; font-weight: 900; color: #fff; -webkit-text-stroke: 1.5px var(--color-secondary); text-shadow: 4px 4px 0 var(--color-secondary); line-height: 1.4; margin-bottom: 24px; letter-spacing: 1px; }
.hero-title .red { color: var(--color-accent-yellow); }
.hero-subtitle, .hero-desc { display: inline-block; font-size: 1.2rem; font-weight: 700; background: #fff; border: 2px solid var(--color-secondary); padding: 10px 24px; border-radius: 20px; box-shadow: 3px 3px 0 var(--color-primary); transform: rotate(1deg); margin-bottom: 50px; color: var(--color-secondary); }
.hero-cta { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   7. Top Page Modules
   ========================================================================== */
/* 提灯 */
.lantern-container { display: flex; justify-content: space-around; width: 100%; max-width: 650px; margin: 0 auto; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; }
.lantern-wrapper { position: relative; transform-origin: top center; animation: swing 4s ease-in-out infinite alternate; }
.lantern-wrapper:nth-child(1) { animation-duration: 3.5s; transform: rotate(2deg); }
.lantern-wrapper:nth-child(2) { animation-delay: -1.3s; margin-top: 25px; animation-duration: 4.2s; }
.lantern-wrapper:nth-child(3) { animation-delay: -2.6s; animation-duration: 3.8s; transform: rotate(-1deg); }
.lantern-string { width: 3px; height: 40px; background-color: var(--color-secondary); margin: 0 auto; border-radius: 5px; }
.lantern { width: 54px; height: 70px; background: radial-gradient(ellipse at 40% 30%, #fff 0%, var(--color-accent-yellow) 30%, var(--color-primary) 90%); border-radius: 30px 25px 28px 30px / 35px 32px 36px 33px; position: relative; border: 3px solid var(--color-secondary); animation: glow 2s ease-in-out infinite alternate; }
.lantern::before, .lantern::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 28px; height: 8px; background-color: var(--color-secondary); border-radius: 4px; }
.lantern::before { top: -6px; }
.lantern::after { bottom: -6px; }
.lantern-line { position: absolute; top: 50%; left: 0; width: 100%; height: 3px; background-color: rgba(92, 77, 67, 0.4); box-shadow: 0 -14px 0 rgba(92, 77, 67, 0.4), 0 14px 0 rgba(92, 77, 67, 0.4); border-radius: 50%; }
.lantern-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color-secondary); font-size: 0.85rem; font-weight: 900; writing-mode: vertical-rl; letter-spacing: 0.1em; text-shadow: 1.5px 1.5px 0 rgba(255,255,255,0.7); }

/* NEWS */
.news-section { padding: 0 0 60px; }
.news-box { background: #fff; border: 3px solid var(--color-secondary); border-radius: 20px; box-shadow: 8px 8px 0 rgba(112, 214, 255, 0.5); max-width: 700px; margin: 0 auto; padding: 40px; position: relative; }
.news-box::before { content: '📌'; position: absolute; top: -15px; left: 50%; font-size: 2.2rem; filter: drop-shadow(2px 2px 0 rgba(92, 77, 67, 0.3)); animation: floatRotate 4s ease-in-out infinite; }
.news-box-title { font-size: 1.4rem; color: var(--color-secondary); font-weight: 900; text-align: center; margin-bottom: 25px; letter-spacing: 0.1em; border-bottom: 3px dashed var(--color-primary-light); padding-bottom: 15px; }
.news-list { list-style: none; }
.news-item { border-bottom: 2px dashed rgba(92, 77, 67, 0.2); }
.news-item:last-child { border-bottom: none; }
.news-link-btn { display: flex; align-items: center; gap: 15px; padding: 15px 10px; text-decoration: none; color: var(--color-secondary); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: inherit; border-radius: 10px; }
.news-link-btn:hover { background-color: #FFFDFB; box-shadow: inset 0 0 0 2px var(--color-primary-light); transform: translateX(8px); }
.news-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.news-date { font-size: 0.95rem; color: #888; font-weight: 900; }
.news-category { background: var(--color-accent-yellow); color: var(--color-secondary); font-size: 0.8rem; padding: 4px 10px; border-radius: 20px; font-weight: 900; border: 1px solid var(--color-secondary); }
.news-title-text { font-size: 1.05rem; font-weight: 700; line-height: 1.5; }
.news-status-msg { text-align: center; padding: 30px; font-weight: 900; color: var(--color-secondary); }

/* Gallery */
.gallery-section { padding: 40px 0 80px; }
.gallery-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.photo-card { background-color: #fff; padding: 12px 12px 25px 12px; border: 3px solid var(--color-secondary); box-shadow: 6px 6px 0 rgba(250, 219, 95, 0.6); border-radius: 12px; position: relative; width: calc(33.333% - 20px); min-width: 260px; max-width: 320px; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.photo-card::before { content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 80px; height: 25px; background-color: var(--color-accent-blue); border: 2px solid var(--color-secondary); box-shadow: 2px 2px 0 var(--color-secondary); z-index: 2; border-radius: 2px; }
.photo-card:nth-child(even)::before { background-color: var(--color-accent-pink); transform: translateX(-50%) rotate(2deg); }
.photo-card:nth-child(1) { transform: rotate(-2deg); }
.photo-card:nth-child(2) { transform: rotate(1.5deg); margin-top: 15px; }
.photo-card:nth-child(3) { transform: rotate(-1deg); }
.photo-card:hover { transform: scale(1.05) rotate(0deg) translateY(-5px); z-index: 10; box-shadow: 8px 12px 0 rgba(240, 131, 50, 0.4); }
.photo-img-wrap { width: 100%; aspect-ratio: 4 / 3; background-color: #eee; overflow: hidden; border: 2px solid var(--color-secondary); border-radius: 6px; }
.photo-img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.1) contrast(1.05); transition: 0.3s; }
.photo-card:hover .photo-img { filter: sepia(0) contrast(1.1) scale(1.05); }
.photo-caption { text-align: center; font-size: 0.95rem; color: var(--color-secondary); font-weight: 900; margin-top: 12px; }

/* Story / Concept */
.story-section { padding: 80px 0 120px; }
.concept-card { background-color: #fff; border-radius: 20px; border: 3px solid var(--color-secondary); padding: 50px; box-shadow: 8px 8px 0 rgba(92, 77, 67, 0.15); position: relative; max-width: 840px; margin: 0 auto; }
.concept-card::before { content: '💡'; position: absolute; top: -25px; left: 50%; font-size: 3.2rem; filter: drop-shadow(2px 2px 0 var(--color-secondary)); animation: floatRotate 4.5s ease-in-out infinite reverse; }
.story-text { font-size: 1.1rem; color: var(--color-secondary); font-weight: 700; text-align: justify; margin-bottom: 20px; line-height: 2; }

/* 組織図 */
.org-structure-box { margin-top: 50px; background: #F2FBFF; border: 3px dashed var(--color-accent-blue); border-radius: 15px; padding: 35px; text-align: center; }
.org-structure-box h3 { font-size: 1.25rem; color: var(--color-secondary); margin-bottom: 25px; font-weight: 900; }
.org-tree { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.org-parent { background: var(--color-primary); color: #fff; font-weight: 900; padding: 12px 35px; border-radius: 50px; font-size: 1.1rem; border: 2px solid var(--color-secondary); box-shadow: 4px 4px 0 var(--color-secondary); letter-spacing: 0.05em; transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: default; }
.org-parent:hover { transform: scale(1.05); box-shadow: 6px 6px 0 var(--color-secondary); }
.org-arrow { width: 4px; height: 25px; background: var(--color-secondary); border-radius: 2px; }
.org-children { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
.org-child { background: #fff; color: var(--color-secondary); border: 2px solid var(--color-secondary); font-weight: 900; padding: 12px 20px; border-radius: 12px; font-size: 0.95rem; box-shadow: 3px 3px 0 rgba(240, 131, 50, 0.3); transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: default; }
.org-child:hover { transform: scale(1.05) translateY(-3px); box-shadow: 5px 5px 0 rgba(240, 131, 50, 0.5); }
.org-desc { font-size: 0.95rem; color: var(--color-secondary); font-weight: 700; text-align: left; margin-top: 25px; line-height: 1.8; }

/* ロードマップ */
.timeline { position: relative; max-width: 600px; margin: 0 auto; padding: 20px 0; }
.timeline::before { content: ''; position: absolute; top: 0; left: 26px; height: 100%; width: 4px; background-color: var(--color-primary-light); border-radius: 2px; }
.timeline-item { position: relative; padding-left: 70px; margin-bottom: 50px; }
.timeline-dot { position: absolute; left: 14px; top: 8px; width: 28px; height: 28px; background-color: var(--color-accent-yellow); border: 3px solid var(--color-secondary); border-radius: 50%; box-shadow: 2px 2px 0 var(--color-secondary); transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.timeline-item:hover .timeline-dot { transform: scale(1.3); background-color: var(--color-primary); }
.timeline-date { font-size: 1.05rem; font-weight: 900; color: #fff; background-color: var(--color-secondary); display: inline-block; padding: 6px 16px; margin-bottom: 12px; border-radius: 20px; border: 2px solid var(--color-secondary); transform: rotate(-1deg); }
.timeline-title { font-size: 1.3rem; color: var(--color-primary); font-weight: 900; margin-bottom: 10px; }
.timeline-desc { font-weight: 700; font-size: 1rem; line-height: 1.8; }

/* メンバー */
.member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 20px; }
button.member-card, a.member-card { font-family: inherit; cursor: pointer; appearance: none; outline: none; margin: 0; text-decoration: none; display: flex; flex-direction: column; align-items: center; width: 100%; }
.member-card { background: #fff; border-radius: 20px; border: 3px solid var(--color-secondary); padding: 35px 20px 25px; text-align: center; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 6px 6px 0 rgba(240, 131, 50, 0.3); position: relative; }
.member-card:hover { transform: scale(1.03) translateY(-5px) !important; box-shadow: 8px 12px 0 rgba(112, 214, 255, 0.5) !important; }
.member-photo-wrap { width: 130px; height: 130px; overflow: hidden; margin-bottom: 20px; border: 3px solid var(--color-secondary); background-color: var(--bg-color); border-radius: 50%; box-shadow: 4px 4px 0 rgba(92, 77, 67, 0.1); transition: 0.3s; }
.member-card:hover .member-photo-wrap { transform: rotate(5deg) scale(1.05); }
.member-photo { width: 100%; height: 100%; object-fit: cover; }
.member-info { flex-grow: 1; display: flex; flex-direction: column; width: 100%; }
.member-name { font-size: 1.3rem; color: var(--color-secondary); font-weight: 900; margin-bottom: 8px; line-height: 1.3; }
.member-role { font-size: 0.9rem; color: var(--color-primary); margin-bottom: 15px; font-weight: 900; background: var(--color-primary-light); padding: 2px 10px; border-radius: 12px; display: inline-block; margin-left: auto; margin-right: auto; color: #fff;}
.member-comment { font-size: 0.95rem; color: var(--color-secondary); font-weight: 700; line-height: 1.6; text-align: left; background: #FFFDFB; padding: 15px; border-radius: 12px; border: 2px dashed var(--color-primary-light); margin-top: auto; }

/* CTA Area */
.cta-area { text-align: center; margin-top: 80px; padding-top: 60px; padding-bottom: 30px; border-top: 3px dashed var(--color-primary-light); }
.cta-message { font-size: 1.25rem; margin-bottom: 30px; font-weight: 900; color: var(--color-secondary); line-height: 1.8; }

/* ==========================================================================
   8. Footer ＋ ★名刺裏面のデザイン逆輸入
   ========================================================================== */
footer { 
  position: relative;
  background-color: var(--color-secondary); 
  color: #fff; 
  padding: 60px 0 40px; 
  text-align: center; 
  border-top: 5px solid var(--color-primary); 
  overflow: hidden; /* パターンのはみ出しを防ぐ */
}

/* ★名刺裏面の幾何学ロゴパターンを背景に敷き詰める（SVGデータURI化） */
footer::before {
  content: '';
  position: absolute;
  top: -50%; left: -100%; width: 250%; height: 300%;
  /* SVGの viewBox にマイナス値で余白をもたせることで間隔を広げています */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-150 -150 794.86 777.12'%3E%3Cpath fill='%23ffffff' opacity='0.08' d='M 494.86 65.29 L 494.86 411.83 L 428.85 476.6 L 66.83 105.51 L 67.25 375.84 L 104.48 339.63 L 131.91 312.92 L 132.12 251.66 L 303.43 422.87 L 275.9 449.68 L 247.74 477.12 L 192.87 421.32 L 158.11 385.94 L 63.95 476.6 L 0 411.42 L .21 62.09 L 64.15 0 L 220.61 160.9 L 255.47 196.58 L 292.6 234.74 L 399.87 345 L 427.3 372.85 L 427.3 102.62 L 360.98 163.58 L 360.78 226.7 L 240.73 105.92 L 191.12 55.69 L 245.06 .41 L 335.2 92.82 L 400.8 27.64 L 428.54 .21 L 462.58 33.42 Z'/%3E%3C/svg%3E");
  background-size: 100px; /* パターンの大きさに合わせて調整 */
  transform: rotate(-15deg); /* 名刺裏面のように少し傾ける */
  z-index: 0;
  pointer-events: none;
}
/* フッターのコンテンツがパターンの上にくるようにする */
footer .container { position: relative; z-index: 2; }

.footer-logo { font-size: 2.2rem; letter-spacing: 0.1em; margin-bottom: 15px; font-weight: 900; color: var(--color-accent-yellow); transform: rotate(-2deg); display: inline-block; text-shadow: 2px 2px 0 #000; }
.footer-desc { font-size: 0.95rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); margin-bottom: 30px; }
.footer-contact a { color: var(--color-accent-blue); text-decoration: none; border-bottom: 2px solid var(--color-accent-blue); padding-bottom: 2px; font-weight: 900; }
.copyright { font-size: 0.85rem; font-weight: 700; color: rgba(255, 255, 255, 0.5); padding-top: 30px; margin-top: 50px; border-top: 2px dashed rgba(255, 255, 255, 0.2); }

/* モーダル */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(92, 77, 67, 0.85); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 20px; }
.modal-overlay.is-active { opacity: 1; visibility: visible; }
.modal-content { background-color: var(--bg-color); width: 100%; max-width: 750px; max-height: 90vh; border: 3px solid var(--color-secondary); border-radius: 20px; box-shadow: 10px 10px 0 rgba(0,0,0,0.3); position: relative; transform: translateY(30px) scale(0.95); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; overflow: hidden; }
.modal-overlay.is-active .modal-content { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; background-color: var(--color-accent-pink); color: #fff; border: 2px solid var(--color-secondary); border-radius: 50%; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); font-weight: bold; box-shadow: 2px 2px 0 var(--color-secondary); }
.modal-close:hover { transform: scale(1.1) rotate(90deg); box-shadow: 4px 4px 0 var(--color-secondary); }
.modal-body { padding: 40px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-primary) transparent; line-height: 1.8; font-weight: 700; color: var(--color-secondary); }

.news-detail-content h1 { font-size: 1.5rem; color: var(--color-primary); border-bottom: 3px dashed var(--color-primary-light); padding-bottom: 10px; margin-bottom: 20px; line-height: 1.4; font-weight: 900; }
.news-detail-content h2 { font-size: 1.2rem; background: var(--color-accent-yellow); padding: 5px 15px; border-radius: 10px; display: inline-block; margin: 30px 0 15px; border: 2px solid var(--color-secondary); }
.news-detail-content img { max-width: 100%; height: auto; border-radius: 8px; border: 2px solid var(--color-secondary); margin: 20px 0; box-shadow: 4px 4px 0 rgba(0,0,0,0.1); }

.member-modal-header { display: flex; gap: 30px; margin-bottom: 30px; align-items: center; border-bottom: 3px dashed var(--color-primary-light); padding-bottom: 30px; }
.member-modal-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-secondary); flex-shrink: 0; background-color: #fff; box-shadow: 4px 4px 0 rgba(0,0,0,0.1); }
.member-modal-info h2 { font-size: 1.8rem; color: var(--color-secondary); margin-bottom: 5px; font-weight: 900; }
.member-modal-info .role { font-size: 0.95rem; background-color: var(--color-primary); color: #fff; padding: 4px 12px; border-radius: 20px; font-weight: 900; margin-bottom: 15px; display: inline-block; border: 2px solid var(--color-secondary); }
.sns-links { display: flex; gap: 12px; }
.sns-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: #fff; color: var(--color-secondary); text-decoration: none; transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); border: 2px solid var(--color-secondary); box-shadow: 2px 2px 0 var(--color-secondary); }
.sns-link:hover { transform: translateY(-5px) rotate(10deg) scale(1.1); background-color: var(--color-accent-blue); box-shadow: 4px 4px 0 var(--color-secondary); }
.sns-link svg { width: 22px; height: 22px; fill: currentColor; }
.member-modal-body h3 { font-size: 1.2rem; color: var(--color-secondary); border-left: 5px solid var(--color-primary); padding-left: 12px; margin-bottom: 15px; margin-top: 10px; font-weight: 900;}


/* ==========================================================================
   9. Recruit Page Modules
   ========================================================================== */
.message-section, .trust-section { margin-bottom: 60px; }
.message-box { background: #fff; border: 3px solid var(--color-secondary); border-radius: 20px; box-shadow: 6px 6px 0 rgba(112, 214, 255, 0.6); padding: 40px 30px; position: relative; }
.message-box::before { content: '💬'; position: absolute; top: -20px; left: 20px; font-size: 3.5rem; filter: drop-shadow(2px 2px 0 var(--color-secondary)); animation: floatRotate 3.5s ease-in-out infinite; }
.message-title { font-size: 1.5rem; color: var(--color-primary); font-weight: 900; margin-bottom: 25px; line-height: 1.5; text-align: center; border-bottom: 3px dashed var(--color-primary-light); padding-bottom: 15px; }
.message-text p { margin-bottom: 1.5em; font-weight: 700; }

.trust-section { display: flex; flex-direction: column; gap: 20px; }
.trust-box { background: #fff; border: 3px solid var(--color-secondary); border-radius: 15px; padding: 25px; box-shadow: 4px 4px 0 rgba(240, 131, 50, 0.3); transition: 0.3s ease; }
.trust-box:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 rgba(240, 131, 50, 0.4); }
.trust-box h3 { font-size: 1.2rem; color: var(--color-secondary); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; font-weight: 900; background: var(--color-accent-yellow); padding: 8px 15px; border-radius: 12px; border: 2px solid var(--color-secondary); display: inline-flex; }
.trust-box p { font-size: 1rem; margin-bottom: 1em; font-weight: 700; }

.app-container { background: #fff; border: 3px solid var(--color-secondary); border-radius: 20px; box-shadow: 8px 8px 0 rgba(92, 77, 67, 0.15); padding: 40px 30px; position: relative; min-height: 400px; }
.app-step { display: none; text-align: center; animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.app-step.is-active { display: block; }

/* クイズUI */
.question-badge { display: inline-block; background: var(--color-accent-yellow); color: var(--color-secondary); font-weight: 900; padding: 4px 16px; border-radius: 20px; margin-bottom: 20px; border: 2px solid var(--color-secondary); transform: rotate(-2deg); }
.question-text { font-size: 1.25rem; font-weight: 900; color: var(--color-secondary); line-height: 1.6; margin-bottom: 30px; }
.choice-btn { display: block; width: 100%; text-align: left; background: #fff; border: 2px solid var(--color-secondary); border-radius: 12px; padding: 18px 20px; margin-bottom: 15px; font-size: 1.05rem; font-weight: 900; color: var(--color-secondary); cursor: pointer; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; box-shadow: 4px 4px 0 rgba(240, 131, 50, 0.2); }
.choice-btn:hover { border-color: var(--color-primary); background-color: #FFFDFB; transform: translate(-3px, -3px) scale(1.01); box-shadow: 6px 6px 0 rgba(240, 131, 50, 0.4); }

.result-badge { display: inline-block; font-size: 1rem; color: #fff; background: var(--color-accent-blue); padding: 6px 20px; border-radius: 20px; margin-bottom: 15px; border: 2px solid var(--color-secondary); font-weight: 900; }
.result-title { font-size: 1.6rem; color: var(--color-primary); font-weight: 900; margin-bottom: 20px; border-bottom: 3px dashed var(--color-primary-light); padding-bottom: 10px; display: inline-block; }
.result-desc { font-size: 1.05rem; text-align: left; background: #fff; padding: 25px; border-radius: 15px; border: 2px solid var(--color-secondary); margin-bottom: 30px; box-shadow: 4px 4px 0 rgba(92, 77, 67, 0.1); }

.overview-card { border: 2px solid var(--color-secondary); border-radius: 15px; padding: 20px; margin-bottom: 20px; background: #fff; box-shadow: 4px 4px 0 rgba(255, 183, 122, 0.4); text-align: left; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.overview-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 6px 8px 0 rgba(255, 183, 122, 0.6); }
.overview-card h3 { color: var(--color-secondary); background: var(--color-accent-blue); display: inline-block; padding: 6px 14px; border-radius: 30px; border: 2px solid var(--color-secondary); margin-bottom: 12px; font-size: 1.1rem; font-weight: 900; }
.overview-card p { font-weight: 700; font-size: 0.95rem; }

/* フォームUI */
.form-header { text-align: center; margin-bottom: 30px; }
.form-group { text-align: left; margin-bottom: 25px; }
.form-label { display: block; font-weight: 900; color: var(--color-secondary); margin-bottom: 8px; font-size: 1.05rem; }
.form-label span.req { color: #fff; background: var(--color-accent-pink); font-size: 0.75rem; padding: 3px 8px; border-radius: 20px; margin-left: 10px; border: 1px solid var(--color-secondary); }
.form-input, .form-select, .form-textarea { width: 100%; padding: 12px 15px; font-size: 1rem; border: 2px solid var(--color-secondary); border-radius: 8px; background: #fff; font-family: inherit; font-weight: 700; transition: 0.3s ease; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; background: #FFFDFB; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(240, 131, 50, 0.2); transform: translateY(-2px); }
.form-textarea { resize: vertical; min-height: 100px; }
.char-counter { font-size: 0.85rem; font-weight: 700; color: #888; text-align: right; margin-top: 5px; }
.char-counter.error { color: var(--color-accent-pink); font-weight: 900; animation: floatRotate 0.3s ease infinite; } 
.form-note { font-size: 0.85rem; color: #666; margin-top: 5px; font-weight: 700; }

.invite-box { background: rgba(250, 219, 95, 0.2); border: 2px dashed var(--color-primary); border-radius: 12px; padding: 20px; margin-bottom: 30px; text-align: left; transition: 0.3s; }
.invite-box:hover { background: rgba(250, 219, 95, 0.3); }
.invite-input-group { display: flex; gap: 10px; margin-top: 10px; }
.invite-btn { background: var(--color-secondary); color: #fff; font-weight: 900; border: 2px solid var(--color-secondary); border-radius: 8px; padding: 0 20px; cursor: pointer; transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.invite-btn:hover { background: var(--color-primary); border-color: var(--color-primary); transform: scale(1.05); }
.invite-msg { margin-top: 12px; padding: 12px; border-radius: 8px; display: none; font-size: 0.95rem; font-weight: 900; border: 2px solid var(--color-secondary); animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.invite-msg.success { background: #fff; box-shadow: 3px 3px 0 rgba(112, 214, 255, 0.5); color: var(--color-secondary); }

.essay-section { display: none; background: #F2FBFF; border: 2px dashed rgba(112, 214, 255, 0.8); padding: 25px 20px; border-radius: 12px; margin-top: 25px; transform-origin: top center; }
.essay-section.is-active { display: block; animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.exemption-notice { display: none; background: var(--color-accent-pink); color: #fff; padding: 15px; border-radius: 12px; text-align: center; font-weight: 900; margin-top: 20px; border: 2px solid var(--color-secondary); box-shadow: 4px 4px 0 rgba(92, 77, 67, 0.15); animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }


/* ==========================================================================
   10. Loading Animation (SVG ドローイング)
   ========================================================================== */
#loading-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--bg-color); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; }
#loading-screen.is-loaded { opacity: 0; visibility: hidden; }
.loading-logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.main-logo-svg { width: 140px; height: auto; }
.text-logo-svg { width: 180px; height: auto; }

#loading-screen path { fill: transparent; stroke: var(--color-secondary); stroke-width: 3px; stroke-dasharray: var(--length); stroke-dashoffset: var(--length); }
#loading-screen .main-logo-svg path { animation: drawLogoLine 2.2s ease-in-out forwards; }
#loading-screen .text-logo-svg path { animation: drawLogoLine 2.2s ease-in-out 0.2s forwards; }


/* ==========================================================================
   11. Media Queries
   ========================================================================== */
@media (max-width: 960px) {
  .member-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-card { width: calc(50% - 15px); }
}

@media (max-width: 600px) {
  section { padding: 60px 0; }
  .hero { min-height: 80vh; padding-top: 90px; }
  
  .hero-title br, .text-large-emphasis br { display: none; }
  
  .hero-title { font-size: 2rem; -webkit-text-stroke: 1px var(--color-secondary); }
  .text-large-emphasis { font-size: 1.3rem; margin: 30px 0; }
  .text-large-emphasis .red { font-size: 1.6rem; }
  
  .btn { width: 100%; min-width: auto; }
  
  .concept-card { padding: 40px 25px; }
  .org-structure-box { padding: 25px 15px; }
  .member-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .photo-card { width: 100%; margin-bottom: 15px; }
  .cta-message { font-size: 1.1rem; }
  .news-link-btn { flex-direction: column; align-items: flex-start; gap: 8px; }
  .modal-content { max-height: 85vh; border-radius: 15px; }
  .modal-body { padding: 30px 20px; }
  .member-modal-header { flex-direction: column; text-align: center; gap: 15px; }
  .sns-links { justify-content: center; }

  .app-container { padding: 30px 20px; }
  .invite-input-group { flex-direction: column; }
  .invite-btn { padding: 12px; }

  .main-logo-svg { width: 110px; }
  .text-logo-svg { width: 150px; }
}