/* ============================================================
   P000 — ポータル選択TOP（国内包括 / クリッピング / 海外包括）
   3カードを1画面でかっこよく見せる入口画面
   ============================================================ */

/* ===== ベース：1画面に収めるフルビューポート構成 ===== */
/* 縦スクロールバー出現時にルート(html)側へ残る約15pxのゴースト横スクロールを閉じる（p000.css は p000 専用ロード） */
html {
  overflow-x: hidden;
}

/* common.css が body { height:100vh; overflow:hidden } を敷いてるので、P000 では縦スクロール可能に上書きする */
body {
  background: linear-gradient(135deg, #f6fbf8 0%, #eaf5f0 60%, #d5ecdf 100%);
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100vh;
}

/* common.css は header の内側 div と main に min-width:1400px を効かせてるので解除。
   これを外さないと 1400px 未満で横スクロールバーが出てレスポンシブが機能しない */
body#p000 header > div,
body#p000 > section > main {
  min-width: 0;
}

/* common.css の header / section は width:100vw（＝スクロールバー幅込み）。section は overflow-y:scroll で
   常にスクロールバーが出るため、100vw が表示幅を約15px超えて横スクロールが発生する。
   100% に上書きし、縦スクロールは body 側に任せる（section の overflow は解除） */
body#p000 > header,
body#p000 > section {
  width: 100%;
}
body#p000 > section {
  overflow-y: visible;
}

body > section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main[data-p000] {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 50px;
  box-sizing: border-box;
  min-width: 0;
}

main[data-p000] [data-portal-wrap] {
  width: 100%;
  max-width: 1500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-100px);
}

/* ===== タイトル ===== */
main[data-p000] [data-portal-head] {
  text-align: center;
  margin-bottom: 70px;
}

main[data-p000] [data-portal-head] img {
  height: 50px;
  width: auto;
  margin-bottom: 24px;
}

main[data-p000] [data-portal-head] h1 {
  font-size: 36px;
  font-weight: 700;
  color: #2b6e55;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

main[data-p000] [data-portal-head] p {
  font-size: 16px;
  color: #5a7a6c;
  letter-spacing: 0.05em;
}

/* ===== 3カードグリッド ===== */
main[data-p000] [data-portal-cards] {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

main[data-p000] [data-portal-cards] > li {
  position: relative;
  list-style: none;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 36px rgba(56, 180, 139, 0.12), 0 2px 6px rgba(56, 180, 139, 0.06);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

main[data-p000] [data-portal-cards] > li > a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 56px 36px 44px 36px;
  height: 100%;
  min-height: 380px;
  text-decoration: none;
  color: #2c3e50;
  box-sizing: border-box;
  transition: color 0.3s ease;
}

/* カード上端のアクセントバー（サービスごとに色を変える） */
main[data-p000] [data-portal-cards] > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: #ccc;
  transition: height 0.35s ease;
  z-index: 2;
}

main[data-p000] [data-portal-cards] > li[data-service="daku"]::before     { background: linear-gradient(90deg, #38b48b 0%, #5dd0a8 100%); }
main[data-p000] [data-portal-cards] > li[data-service="clipping"]::before { background: linear-gradient(90deg, #4a78c7 0%, #7da6e8 100%); }
main[data-p000] [data-portal-cards] > li[data-service="overseas"]::before { background: linear-gradient(90deg, #e8772a 0%, #f0a76b 100%); }

/* ホバー時の盛り上がり */
main[data-p000] [data-portal-cards] > li:not([data-disabled]):hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(56, 180, 139, 0.22), 0 6px 12px rgba(56, 180, 139, 0.10);
}

main[data-p000] [data-portal-cards] > li:not([data-disabled]):hover::before {
  height: 10px;
}

/* ===== カードアイコン（テキスト or 画像） ===== */
main[data-p000] [data-card-icon] {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  background: #f4faf7;
  border: 2px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

main[data-p000] [data-portal-cards] > li:not([data-disabled]):hover [data-card-icon] {
  transform: scale(1.08) rotate(-3deg);
}

/* サービスごとのアイコン色 */
main[data-p000] [data-portal-cards] > li[data-service="daku"] [data-card-icon] {
  background: linear-gradient(135deg, #eaf7f1 0%, #d3eee0 100%);
  border-color: #b6e0cd;
}
main[data-p000] [data-portal-cards] > li[data-service="clipping"] [data-card-icon] {
  background: linear-gradient(135deg, #eaf0fa 0%, #d3dff4 100%);
  border-color: #b7c8e8;
}
main[data-p000] [data-portal-cards] > li[data-service="overseas"] [data-card-icon] {
  background: linear-gradient(135deg, #fdf0e3 0%, #fbe0c6 100%);
  border-color: #f3c79c;
}

/* テキストアイコン（国内・海外） */
main[data-p000] [data-icon-text] {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

main[data-p000] [data-portal-cards] > li[data-service="daku"] [data-icon-text]     { color: #2b6e55; }
main[data-p000] [data-portal-cards] > li[data-service="overseas"] [data-icon-text] { color: #a04a1a; }

/* 画像アイコン（クリッピング） */
main[data-p000] [data-icon-img] img {
  width: 78px;
  height: auto;
  display: block;
}

/* ===== カードラベル・説明文 ===== */
/* ラベル＋説明を1つのテキストブロックにまとめる。flex:1 でこのブロックを伸ばし、矢印を下端に押し出す。
   行レイアウト（レスポンシブ）でもラベルと説明が縦積みされるようにするための包み要素 */
main[data-p000] [data-card-text] {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  width: 100%;
}

main[data-p000] [data-card-label] {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  color: #2c3e50;
}

main[data-p000] [data-card-desc] {
  font-size: 14px;
  line-height: 1.7;
  color: #6c7b8a;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ===== カード下部の矢印（ホバーでスライド） ===== */
main[data-p000] [data-card-arrow] {
  margin-top: 24px;
  font-size: 22px;
  font-weight: 600;
  color: #aab8c2;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

main[data-p000] [data-portal-cards] > li:not([data-disabled]):hover [data-card-arrow] {
  transform: translateX(10px);
}

main[data-p000] [data-portal-cards] > li[data-service="daku"]:hover [data-card-arrow]     { color: #38b48b; }
main[data-p000] [data-portal-cards] > li[data-service="clipping"]:hover [data-card-arrow] { color: #4a78c7; }

/* 海外（準備中） */
main[data-p000] [data-portal-cards] > li[data-disabled] > a {
  cursor: not-allowed;
  opacity: 0.65;
}

main[data-p000] [data-portal-cards] > li[data-disabled] [data-coming] {
  margin-top: 24px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #4a78c7;
  background: #eaf0fa;
  border-radius: 999px;
  letter-spacing: 0.1em;
}

/* ===== フッター（非表示） ===== */
main[data-p000] [data-portal-foot] {
  display: none;
}

main[data-p000] [data-portal-foot] a {
  font-size: 14px;
  color: #5a7a6c;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

main[data-p000] [data-portal-foot] a:hover {
  color: #2b6e55;
  border-bottom-color: #2b6e55;
}

/* ===== レスポンシブ（タブレット〜SP） ===== */
/* ヘッダの padding 詰め・画面ID(ol) 非表示・ロゴ中央化は common.css の SP 共通ブロックで対応済み */
@media screen and (max-width: 768px) {
  /* ポータルロゴは横長(300x24)。高さ固定を解除し、下のカードと同じ幅（画面いっぱい／最大520px）に合わせる。
     SVGなので拡大しても綺麗。head を全幅にして img を width:100% で伸ばす */
  main[data-p000] [data-portal-head] {
    width: 100%;
  }
  main[data-p000] [data-portal-head] img {
    height: auto;
    width: 100%;
    max-width: 520px;
    margin-bottom: 18px;
  }
}

@media screen and (max-width: 1100px) {
  main[data-p000] [data-portal-cards] {
    grid-template-columns: 1fr;
    max-width: 520px;
    gap: 24px;
  }

  main[data-p000] [data-portal-cards] > li > a {
    flex-direction: row;
    align-items: center;
    text-align: left;
    min-height: auto;
    padding: 28px 32px;
  }

  /* 行レイアウトではテキストブロックを左寄せ縦積みにして「アイコン｜テキスト｜矢印」の3列に */
  main[data-p000] [data-card-text] {
    align-items: flex-start;
    text-align: left;
  }

  main[data-p000] [data-card-icon] {
    width: 80px;
    height: 80px;
    margin-bottom: 0;
    margin-right: 28px;
    flex-shrink: 0;
  }

  main[data-p000] [data-icon-text] {
    font-size: 36px;
  }

  main[data-p000] [data-icon-img] img {
    width: 56px;
  }

  main[data-p000] [data-card-label] {
    font-size: 18px;
    margin-bottom: 6px;
  }

  main[data-p000] [data-card-desc] {
    font-size: 13px;
    text-align: left;
  }

  main[data-p000] [data-card-arrow] {
    margin-top: 0;
    margin-left: 16px;
    flex-shrink: 0;
  }

  main[data-p000] [data-portal-cards] > li[data-disabled] [data-coming] {
    margin-top: 0;
    margin-left: 16px;
  }

  main[data-p000] [data-portal-head] {
    margin-bottom: 40px;
  }

  main[data-p000] [data-portal-head] h1 {
    font-size: 28px;
  }
}

@media screen and (max-width: 600px) {
  main[data-p000] {
    padding: 40px 20px;
  }

  /* SP: サブタイトルは小さめに */
  main[data-p000] [data-portal-head] p {
    font-size: 12px;
  }

  main[data-p000] [data-portal-cards] > li > a {
    padding: 22px 20px;
  }

  /* SP: 右端の矢印を消してテキストの表示領域を広げる */
  main[data-p000] [data-card-arrow] {
    display: none;
  }

  /* SP: 説明文の行間を詰める */
  main[data-p000] [data-card-desc] {
    line-height: 1.3;
  }

  main[data-p000] [data-card-icon] {
    width: 64px;
    height: 64px;
    margin-right: 20px;
  }

  main[data-p000] [data-icon-text] {
    font-size: 14px;
  }

  main[data-p000] [data-icon-img] img {
    width: 44px;
  }

  main[data-p000] [data-card-label] {
    font-size: 16px;
  }
}

/* 縦が狭い画面(720px以下)ではロゴが transform で押し出されて見切れるので、中央寄せ＋translate を解除して自然に縦スクロール可能にする */
@media (max-height: 720px) {
  main[data-p000] {
    align-items: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  main[data-p000] [data-portal-wrap] {
    transform: none;
  }
  main[data-p000] [data-portal-head] {
    margin-bottom: 30px;
  }
}