@charset "UTF-8";
/*==============================

0. General Common
1. Header
   1.1 Content Page Header
2. Footer
   2.1 Footer menu
   2.2 Copyright
3. Top
   3.1 Kv
   3.2 水の重要性

4. 
   4.1 
   4.2 
5. よくある疑問
6. 
7. 
8. 
9. 

株式会社XDi 2026/01-
===============================*/

/*==============================================
0. General Common
================================================*/
html, body {margin: 0;height: 100%;}
.header,
.top-header,
main,
.footer-nav {position: relative;z-index: 2;}
.outer-frame {min-height: 100vh;background: #036eb8;padding: 20px;box-sizing: border-box;}
.inner-frame {position: relative;min-height: calc(100vh - 40px);z-index: 2;background: #fff;border-radius: 24px;overflow: hidden;}

.nav a {margin-left: 20px;text-decoration: none;}
.section {padding: 80px 16px;}
.bg-light {background: #f7f9fb;}
.bg-white {background: #fff;}
.container {max-width: 1100px;margin: auto;}
.narrow {max-width: 960px !important; padding-bottom: 80px;}
.section-title {font-size: 1.8rem;margin-bottom: 40px;}
.content-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 24px;}
.content-box {background: #fff;padding: 32px;border-radius: 16px;}
.lead {font-size: 1.2rem;line-height: 1.8;}
h4 {font-size: 25px;}

@media (max-width: 768px) {
  html, body {overflow-x: hidden;}
  .outer-frame {padding: 0;background: #fff;min-height: 100vh;}
  .inner-frame {min-height: 100vh;border-radius: 0;}
}

/* ===== パンくず ===== */

/*==============================================
1. Header
================================================*/
.header {border-bottom: 1px solid #eee;background: #fff;}
.header-inner {max-width: 1200px;margin: auto;padding: 16px;display: flex;justify-content: space-between;}
.top-header {text-align: center;padding: 40px 16px 120px;}
.top-header,
.header,
main,
.footer-nav {position: relative;z-index: 2;}
.logo-wrap img {width: 280px;margin-bottom: 40px;}
.card-slider {position: relative;height: 420px;display: flex;justify-content: center;gap: 24px;}
.card {width: 180px;height: 360px;overflow: hidden;border-radius: 20px;transform-origin: bottom center;animation: flip 3s infinite ease-in-out;}
.card:nth-child(2) { animation-delay: 2s; }
.card:nth-child(3) { animation-delay: 4s; }
.card img {width: 100%;height: 100%;object-fit: cover;}

@keyframes flip {
  0%   { transform: rotateY(0deg); opacity: 1; }
  30%  { transform: rotateY(0deg); }
  50%  { transform: rotateY(90deg); opacity: 0; }
  70%  { transform: rotateY(0deg); opacity: 1; }
}

/* ===== 1.1 Content Page Header ===== */
.content-header {border-bottom: 1px solid #eee;background: #fff;}
.content-header-inner {max-width: 1200px;margin: 0 auto;padding: 24px 24px 20px;display: flex;align-items: center;gap: 24px;justify-content: flex-start;}
.content-header .logo-wrap img {width: 180px;height: auto;}
.page-title {font-size: clamp(32px, 4vw, 56px);font-weight: 600;letter-spacing: 0.06em;color: #036eb8;margin: 0;line-height: 1.2;}

@media (max-width: 768px) {
  .content-header-inner {padding: 20px 16px;gap: 16px;}
  .content-header .logo-wrap img {width: 140px;}
  .page-title {font-size: 30px;line-height: 1.3;}
}

/*==============================================
2. Footer
================================================*/
.footer-fixed {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(40px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 9999;
  pointer-events: none;
}

/* ===== 2.1 Footer menu ===== */
.footer-nav {
  pointer-events: auto;
  width: 90vw;              /* ← 画面の90% */
  max-width: 480px;         /* ← PCで広がりすぎ防止 */
  height: 44px;

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

  padding: 0 16px;          /* ← 両端の安全余白 */
  background: #036eb8;
  border-radius: 999px;
  box-sizing: border-box;
}

/* メニュー文字 */
.footer-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0 4px;           /* ← 文字の呼吸 */
  white-space: nowrap;
}

/* ===== モバイル ===== */
@media (max-width: 768px) {
  .footer-fixed {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .footer-nav {
    width: 90vw;
    padding: 0 14px;
  }

  .footer-nav a {
    font-size: 13px;
  }
}

/* ===== 2.2 Copyright ===== */
.footer-copy {
  margin: 0;
  font-size: 11px;
  line-height: 1;
  color: #777;
  pointer-events: none;
}


/*==============================================
3. Top
================================================*/
/* ===== 3.1 Kv ===== */
.kv {position: absolute;inset: 0;height: 100vh;background: transparent;z-index: 0;}
#blobCanvas {position: absolute;inset: 0;width: 100%;height: 100%;transform: translateZ(0);backface-visibility: hidden;will-change: transform;}
.kv-track {position: absolute;top: 50%;left: 0;transform: translateY(-50%);display: flex;white-space: nowrap;pointer-events: none;z-index: 1;}
.kv-text {font-size: 160px;font-weight: 700;color: #036eb8;padding-right: 120px;}

/* ===== 3.2 水の重要性 ===== */
.water-importance {background: linear-gradient(180deg, #f5f8f7 0%, #ffffff 100%);padding: 100px 24px;}
.water-inner {max-width: 900px;margin: 0 auto;text-align: center;}
.water-importance h2 {font-size: clamp(36px, 6vw, 52px);line-height: 1.3;font-weight: 700;margin-bottom: 36px;letter-spacing: 0.06em;}
.water-importance h2 span {color: #6ba8a1;font-weight: 700;}
.water-importance .lead {font-size: clamp(18px, 3.2vw, 22px);line-height: 2;color: #444;margin-bottom: 56px;}
.water-importance h3 {font-size: 25px;margin-bottom: 24px;letter-spacing: 0.1em;color: #333;}
.role-list {list-style: none;padding: 0;margin: 0 auto 48px;max-width: 520px;text-align: left;}
.role-list li {position: relative;padding-left: 32px;margin-bottom: 18px;line-height: 2.4;color: #555;font-size: 20px;}
.role-list li::before {content: "●";position: absolute;left: 0;top: 0.95em;font-size: 10px;color: #6ba8a1;}
.water-importance .note {font-size: 15px;line-height: 2;color: #666;}
.sp-only {display: none;}

@media (max-width: 768px) {
  .water-importance {padding: 72px 20px;}
  .water-importance h2 {font-size: clamp(24px, 4vw, 36px);line-height: 1.4;font-weight: 600;margin-bottom: 32px;letter-spacing: 0.05em;}
  .water-importance .lead {font-size: 16px;line-height: 2;color: #444;margin-bottom: 48px;}
  .role-list li {font-size: 17px;}
  .sp-only {display: inline;}
}


s
/* 思想セクション全体 */
.philosophy {
  background: linear-gradient(180deg, #f3f9fc 0%, #ffffff 100%);
  padding: 120px 16px;
}

/* 中のカード */
.philosophy-inner {
  background: #ffffff;
  border-radius: 24px;
  padding: 64px 48px;
  box-shadow: 0 12px 32px rgba(3, 110, 184, 0.08);
}

/* タイトルを少し思想寄りに */
.philosophy .section-title {
  color: #036eb8;
  margin-bottom: 40px;
  text-align: center;
}

/* リード文 */
.philosophy .lead {
  font-size: 18px;
  line-height: 2;
  color: #333;
}

/* 注意書きはトーンダウン */
.philosophy .lead.note {
  font-size: 14px;
  color: #666;
  margin-top: 32px;
}


/*==============================================
4. 
================================================*/

/*==============================================
5. よくある疑問
================================================*/
.qa-wrap {background: linear-gradient(180deg, #f5f8f7 0%, #ffffff 100%);padding: 100px 24px;}
.qa-inner {max-width: 960px;margin: 0 auto;}
.qa-tabs {display: grid;grid-template-columns: repeat(4, 1fr);gap: 8px;margin-bottom: 32px;}
.qa-tab {text-align: center;padding: 14px 8px;border-radius: 16px;background: #dbebfb;color: #036eb8;font-weight: 600;cursor: pointer;transition: all 0.3s ease;line-height: 1.2;}
.qa-tab.active {background: #036eb8;color: #fff;}
.qa-panel {display: none;}
.qa-panel.active {display: block;}
.qa-panel details {background: #ffffff;border-radius: 20px;padding: 0;margin-bottom: 16px;box-shadow: 0 6px 20px rgba(0,0,0,0.05);overflow: hidden;}
.qa-panel summary {list-style: none;padding: 20px 24px;font-weight: 600;font-size: 16px;cursor: pointer;position: relative;}
.qa-panel summary::-webkit-details-marker {display: none;}
.qa-panel summary::after {content: "+";position: absolute;right: 24px;top: 50%;transform: translateY(-50%);font-size: 20px;color: #036eb8;transition: transform 0.3s ease;}
.qa-panel details[open] summary::after {content: "−";}
.qa-panel p {padding: 0 24px 24px;margin: 0;line-height: 1.8;color: #333;}
.faq-intro {padding-bottom: 40px;}
.faq-intro .narrow {padding-bottom: 0;}

@media (max-width: 768px) {
  .qa-tabs {grid-template-columns: repeat(2, 1fr);}
}

.qa-item {background: #fff;border-radius: 16px;margin-bottom: 20px;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);transition: box-shadow 0.3s ease;}
.qa-question {position: relative;width: 100%;padding: 18px 52px 18px 20px;font-size: 20px;font-weight: 600;text-align: left;background: none;border: none;cursor: pointer;}
.qa-question::after {content: "+";position: absolute;right: 20px;top: 50%;transform: translateY(-50%);font-size: 28px;font-weight: 600;color: #036eb8;transition: transform 0.3s ease;}
.qa-item.is-open .qa-question::after {content: "−";}
.qa-question:focus,
.qa-question:active {color: #222;outline: none;}
.qa-question {-webkit-tap-highlight-color: transparent;}
.qa-content {overflow: hidden;height: 0;transition: height 0.35s ease;padding: 0 20px;}
.qa-content p {margin: 16px 0 20px;}
.qa-item.is-open .qa-question {color: #036eb8;}

/* ===== QA セクション見出し ===== */
/* ===== QAカテゴリ見出し（h3）===== */
.qa-panel h3 {
  position: relative;
  padding: 6px 8px 6px 36px;

  background: #147d99;
  color: #fff;

  /* ↓ ここだけ調整 */
  font-size: clamp(16px, 2vw, 21px);

  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;

  margin: 0 0 32px -28px;

  z-index: 1;
}

/* 左の三角アクセント */
.qa-panel h3::before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;

  border-left: solid 32px #fff;
  border-bottom: solid 64px transparent;

  z-index: -1;
}

/* 全体の各丸背景 */
.reference-box {
  background: #d6effa;
  border-radius: 16px;
  padding: 20px;
  margin: 32px 0;
}

/* h4：参考になる外部情報 */
.reference-heading {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 5px solid #3cb371;
}

/* h5：機関名 */
.reference-org {
  font-size: 0.95rem;
  font-weight: bold;
  margin: 14px 0 4px; /* 下の余白を詰める */
  color: #333;
}

/* リンク */
.reference-link {
  display: inline-block;
  font-size: 0.9rem;
  color: #0066cc;
  text-decoration: none;
  margin-bottom: 6px; /* 次のh5との間隔を最小限に */
}

.reference-link:hover {
  text-decoration: underline;
}

/* 注釈 */
.reference-note {
  font-size: 0.85rem;
  color: #666;
  margin-top: 12px;
}

/*==============================================
5. 記事
================================================*/
/* ===== TOP 記事一覧 ===== */
.top-posts {padding: 0 16px;}
.post-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 24px;}
.post-card {display: block;background: #fff;border-radius: 16px;overflow: hidden;text-decoration: none;color: inherit;box-shadow: 0 10px 24px rgba(0,0,0,0.08);transition: transform 0.3s ease, box-shadow 0.3s ease;}
.post-card:hover {transform: translateY(-6px);box-shadow: 0 16px 32px rgba(0,0,0,0.12);}
.post-thumb img {width: 100%;height: 180px;object-fit: cover;}
.post-title {padding: 16px;font-size: 16px;line-height: 1.6;font-weight: 600;}

@media (max-width: 768px) {
  .post-grid {grid-template-columns: 1fr;}
  .post-thumb img {height: 200px;}
}