/*
Theme Name: Lightning Child Sample
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/

/* =========================================================
   ◆ フッター（背景色・文字色・著作権の一部非表示）
========================================================= */
.site-footer {
  background-color: #ffffff;
  color: #333333;
}
.site-footer a { color: inherit; }
.site-footer a:hover { opacity: .85; }
.site-footer-copyright p:nth-child(2) {
  display: none;
}


/* =========================================================
   ◆ 投稿メタデータ非表示（投稿日・更新日など）
========================================================= */
.entry-meta-item-author,
.entry-meta-item-date,
.entry-meta-item-updated {
  display: none !important;
}

/* =========================================================
   ◆ Lightning固定ページタイトル＆カバー非表示
========================================================= */
.page-header,
.vk_pageHeader,
.page-header-container,
.page-header-inner {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

/* ---------------------------------------------------
   ◆ Lightning フッター上のラインを非表示
--------------------------------------------------- */
.site-footer,
.site-footer-container,
.site-footer .site-footer-content {
  border-top: none !important;
  box-shadow: none !important; /* 念のため影も消す */
}

/* =========================================================
   ◆ Supreme風フッターメニュー（縦ラインなし／反転ホバー）
========================================================= */

/* フッター全体（装飾リセット） */
.site-footer,
.site-footer-container,
.site-footer-content {
  background-color: #ffffff;
  border: none !important;
  box-shadow: none !important;
}

/* フッターメニュー全体（横並び・左寄せ） */
.site-footer .menu {
  display: flex;
  justify-content: flex-start;
  gap: 80px;               /* カラム間隔 */
  padding: 40px 40px 20px;
  margin: 0;
}

/* ul / li リセット */
.site-footer .menu,
.site-footer .menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* メニューリンク（通常時） */
.site-footer .menu a {
  display: inline-block;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  font-weight: 300;
  color: #111111;
  text-decoration: none;

  padding: 2px 6px;        /* 反転時の余白（Supreme感） */
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ホバー時：赤背景＋白文字 */
.site-footer .menu a:hover {
  background-color: #e31b23; /* Supreme系の赤 */
  color: #ffffff;
}

/* コピーライト非表示（不要なら） */
.site-footer-copyright {
  display: none;
}

/* ---------------------------------------------------------
   ◆ スマートフォン表示（縦並び）
--------------------------------------------------------- */
@media (max-width: 768px) {
  .site-footer .menu {
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px 16px;
  }
}

/* =========================================================
   ◆ トップページ中央：東京の年月日時分 表示
   Noto Sans JP Thin / 数字の文字幅固定 / 余白なし
========================================================= */

#tokyo-time {
  text-align: center;

  /* 余白：上下ゼロ */
  margin: 0;
  padding: 0;

  /* フォント設定 */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100; /* Thin */
  font-size: 14px;

  /* Supreme寄せの文字設計 */
  letter-spacing: 0.15em;
  color: #111111;

  /* 数字の幅を一定にする（重要） */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";

  /* UI感を消す */
  cursor: default;
  user-select: none;
}

/* =========================================================
   ◆ TRY NEW THINGS：斜めパネル 横一列モザイク
   ラフ / 大胆 / 見切れOK
========================================================= */

.slanted-mosaic {
  display: flex;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: #fff;
}

/* 共通パネル */
.slanted-mosaic .panel {
  flex: 1;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* 斜めカット（これが肝） */
.slanted-mosaic .panel {
  clip-path: polygon(
    6% 0%,
    100% 0%,
    94% 100%,
    0% 100%
  );
}

/* それぞれ微妙に角度とズレを変える */
.slanted-mosaic .p1 {
  background-image: url("https://demo2.infocorpsite.com/wp-content/uploads/2026/01/572368879_18071561036340227_4544867716235838623_n.jpg");
  transform: translateX(-2%) rotate(-0.6deg);
}

.slanted-mosaic .p2 {
  background-image: url("https://demo2.infocorpsite.com/wp-content/uploads/2026/01/474504787_9114703845275439_759815033570034944_n.jpg");
  transform: rotate(0.3deg);
}

.slanted-mosaic .p3 {
  background-image: url("https://demo2.infocorpsite.com/wp-content/uploads/2026/01/203025000_4137044713041402_1480974642365781919_n.jpg");
  transform: rotate(-0.4deg);
}

.slanted-mosaic .p4 {
  background-image: url("https://demo2.infocorpsite.com/wp-content/uploads/2026/01/121802449_3428940777185136_3549200307615013713_n.jpg");
  transform: rotate(0.5deg);
}

.slanted-mosaic .p5 {
  background-image: url("https://demo2.infocorpsite.com/wp-content/uploads/2026/01/484107774_1567690850850414_6645219548359006116_n.jpg");
  transform: translateX(2%) rotate(-0.7deg);
}

/* ---------------------------------------------------------
   ◆ モバイル（おまかせ＝横スクロール）
--------------------------------------------------------- */
@media (max-width: 768px) {
  .slanted-mosaic {
    height: 280px;
    overflow-x: auto;
  }

  .slanted-mosaic .panel {
    flex: 0 0 70%;
  }
}

/* =========================================================
   ◆ コンセプト・マニフェストテキストブロック
   Noto Sans JP Thin / #de2525
   ※ 斜めモザイクブロックと同一幅・存在感
========================================================= */

.manifest-block {
  width: 100%;
  max-width: none;          /* Lightningの中央制限を無効化 */
  margin: 0;
  padding: 0;

  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;         /* Thin */
  font-size: 14px;

  color: #de2525;
  letter-spacing: 0.08em;
  line-height: 1.8;

  text-align: left;
  white-space: normal;

  /* 数字・記号の安定 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";

  /* UI感排除 */
  cursor: default;
  user-select: none;
}

/* =========================================================
   ◆ コンセプトテキストブロック
   Noto Sans JP Thin / #de2525
========================================================= */

.philosophy-block {
  width: 100%;
  max-width: none;          /* 中央寄せ制限を解除 */
  margin: 0;
  padding: 0;

  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;         /* Thin */
  font-size: 16px;
  line-height: 2;

  color: #de2525;
  letter-spacing: 0.08em;

  text-align: left;

  cursor: default;
  user-select: none;
}

/* 各段落の間 */
.philosophy-block p {
  margin: 0 0 32px;
}

/* 罫線風のダッシュ */
.philosophy-block .dash {
  margin: 16px 0 24px;
  letter-spacing: 0.2em;
}

/* 最後の締め */
.philosophy-block .closing {
  font-size: 15px;
  letter-spacing: 0.1em;
}

/* ---------------------------------------------------------
   ◆ モバイル（自然に縮小）
--------------------------------------------------------- */
@media (max-width: 768px) {
  .philosophy-block {
    font-size: 14px;
    line-height: 1.9;
  }

  .philosophy-block p {
    margin-bottom: 24px;
  }
}

/* =========================================================
   ◆ ブランド用 見出しブロック（300px幅・低め）
========================================================= */

.brand-heading {
  width: 300px;        /* ★ 300pxに縮小 */
  max-width: 100%;
  margin: 0;           /* 左詰め */
  padding: 0;

  background-color: #e31b23;
}

/* 見出し文字 */
.brand-heading h2 {
  margin: 0;

  /* ★ 縦幅を詰める */
  padding: 14px 20px;

  color: #ffffff;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  font-style: italic;
  line-height: 1;

  letter-spacing: -0.03em;
  text-align: left;

  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------
   ◆ モバイル
--------------------------------------------------------- */
@media (max-width: 768px) {
  .brand-heading {
    width: 100%;
  }

  .brand-heading h2 {
    padding: 12px 16px;
    font-size: 26px;
  }
}

/* =========================================================
   ◆ 黒バック → ホバーで赤に変化するボタン
========================================================= */

.btn-invert {
  display: inline-block;
  background: #000000;
  color: #ffffff;
  text-decoration: none;

  padding: 12px 18px;
  border-radius: 0;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.08em;

  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;

  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ホバー：赤背景＋白文字 */
.btn-invert:hover {
  background-color: #de2525;
  color: #ffffff;
}

/* =========================================================
   ◆ ステートメント用 長文ブロック（日英併記）
   黒文字 / 余白重視 / 思想系
========================================================= */

.statement-block {
  width: 100%;
  max-width: 880px;   /* 読ませる最大幅 */
  margin: 0;
  padding: 0;

  font-family: 'Noto Sans JP', sans-serif;
  color: #000000;

  cursor: default;
}

/* 日本語本文 */
.statement-block .jp {
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: 0.04em;
  margin-bottom: 48px;
}

/* 英文 */
.statement-block .en {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.06em;
  margin-bottom: 32px;
}

/* ---------------------------------------------------------
   ◆ モバイル
--------------------------------------------------------- */
@media (max-width: 768px) {
  .statement-block {
    max-width: 100%;
  }

  .statement-block .jp {
    font-size: 14px;
    line-height: 2;
    margin-bottom: 40px;
  }

  .statement-block .en {
    font-size: 13px;
    line-height: 1.9;
  }
}

/* =========================================================
   ◆ Capability List / HIGH DENSITY + INTERACTION
   黒 × 赤 × Hover
========================================================= */

.capability-block {
  width: 100%;
  max-width: 1000px;
  margin: 0;
  padding: 0;

  font-family: 'Noto Sans JP', sans-serif;
  color: #000;
}

/* 各カテゴリ（余白を圧縮） */
.capability {
  margin-bottom: 40px; /* ← 64px → 圧縮 */
}

/* 見出し：赤を“仕込む” */
.capability h3 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.14em;
  margin: 0 0 16px;

  display: inline-block;
  padding-bottom: 4px;

  color: #000;
  border-bottom: 1px solid #000;

  transition: color 0.15s ease, border-color 0.15s ease;
}

/* カテゴリにホバーしたら見出しが赤く */
.capability:hover h3 {
  color: #de2525;
  border-color: #de2525;
}

/* リスト：さらに詰める */
.capability ul {
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 24px; /* ← 行・列ともに圧縮 */
}

/* 各項目 */
.capability li {
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.06em;

  position: relative;
  padding-left: 10px;

  color: #000;

  transition: color 0.12s ease, transform 0.12s ease;
}

/* マーカー（無機質） */
.capability li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: #000;

  transition: color 0.12s ease;
}

/* アイテム単体ホバー */
.capability li:hover {
  color: #de2525;
  transform: translateX(2px); /* わずかに前に出る */
}

.capability li:hover::before {
  color: #de2525;
}

/* ---------------------------------------------------------
   ◆ モバイル：密度は保ちつつ崩さない
--------------------------------------------------------- */
@media (max-width: 768px) {
  .capability {
    margin-bottom: 32px;
  }

  .capability ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 16px;
  }
}

/* =========================================================
   ◆ セクション区切り：赤の断続ライン
========================================================= */

.capability {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(222, 37, 37, 0.4);

  transition: border-color 0.15s ease;
}

/* ホバーで赤を濃く */
.capability:hover {
  border-bottom-color: rgba(222, 37, 37, 0.9);
}

/* =========================================================
   ◆ 工場情報ブロック（赤カバー × 白文字）
========================================================= */

.factory-block {
  background-color: #de2525; /* 思想カラー赤 */
  color: #ffffff;

  padding: 24px 28px;
  max-width: 720px;

  font-family: 'Noto Sans JP', sans-serif;
}

/* タイトル */
.factory-title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.12em;
}

/* リスト全体 */
.factory-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 各行 */
.factory-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

/* 左ラベル（白ベタ感） */
.factory-item .label {
  white-space: nowrap;
  padding-right: 10px;
  border-right: 1px solid rgba(255,255,255,0.6);
}

/* 住所 */
.factory-item .address {
  padding-left: 10px;
}

/* ---------------------------------------------------------
   ◆ モバイル
--------------------------------------------------------- */
@media (max-width: 768px) {
  .factory-block {
    padding: 20px;
  }

  .factory-item {
    flex-direction: column;
    gap: 4px;
  }

  .factory-item .label {
    border-right: none;
    padding-right: 0;
  }

  .factory-item .address {
    padding-left: 0;
  }
}

/* =========================================================
   ◆ 商品ポートフォリオ カードブロック（完全版）
   MAKE IT JOY / 黒 × 赤 / 縦長統一
========================================================= */

.portfolio-card {
  position: relative;

  border: 1px solid #000;
  background: #fff;

  padding: 32px 24px 40px;
  text-align: center;

  font-family: 'Noto Sans JP', sans-serif;

  transition: border-color 0.15s ease, transform 0.15s ease;
}

/* ---------------------------------------------------------
   左上の番号ラベル（黒 → 赤）
--------------------------------------------------------- */
.portfolio-number {
  position: absolute;
  top: 0;
  left: 0;

  background: #000;
  color: #fff;

  padding: 12px 16px;
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1;

  transition: background-color 0.15s ease;
}

/* ---------------------------------------------------------
   画像エリア：縦長フレームで完全統一
--------------------------------------------------------- */
.portfolio-image {
  margin: 40px 0 24px;

  width: 100%;
  aspect-ratio: 3 / 5;   /* ← 縦長比率（最重要） */

  overflow: hidden;

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

  background: #f5f5f5;   /* 展示台的ニュアンス */
}

/* 中の画像は切り抜き前提 */
.portfolio-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;

  transition: transform 0.3s ease;
}

/* ---------------------------------------------------------
   説明文
--------------------------------------------------------- */
.portfolio-text {
  margin: 0;

  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.12em;

  color: #000;
}

/* ---------------------------------------------------------
   ホバー演出（控えめ・思想寄り）
--------------------------------------------------------- */
.portfolio-card:hover {
  border-color: #de2525;
  transform: translateY(-2px);
}

.portfolio-card:hover .portfolio-number {
  background-color: #de2525;
}

.portfolio-card:hover img {
  transform: scale(1.05);
}

/* ---------------------------------------------------------
   スマートフォン調整
--------------------------------------------------------- */
@media (max-width: 768px) {
  .portfolio-card {
    padding: 24px 16px 32px;
  }

  .portfolio-number {
    font-size: 16px;
    padding: 10px 14px;
  }

  .portfolio-text {
    font-size: 14px;
    letter-spacing: 0.1em;
  }

  .portfolio-image {
    margin: 32px 0 20px;
    aspect-ratio: 2 / 3; /* SPでは少しだけ詰める */
  }
}


/* ---------------------------------------------------------
   ◆ スマートフォン
--------------------------------------------------------- */
@media (max-width: 768px) {
  .portfolio-card {
    padding: 24px 16px 32px;
  }

  .portfolio-number {
    font-size: 16px;
    padding: 10px 14px;
  }

  .portfolio-text {
    font-size: 14px;
  }
}

/* =========================================================
   ◆ 右端 スクロール追従アンカーメニュー
========================================================= */

.side-anchor {
  position: fixed;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);

  z-index: 999;

  font-family: 'Noto Sans JP', sans-serif;
}

/* リスト */
.side-anchor ul {
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* リンク */
.side-anchor a {
  writing-mode: vertical-rl;      /* 縦書き */
  text-orientation: mixed;

  font-size: 12px;
  letter-spacing: 0.2em;

  color: #de2525;
  text-decoration: none;

  transition: color 0.15s ease, opacity 0.15s ease;
}

/* ホバー */
.side-anchor a:hover {
  opacity: 0.6;
}

/* ---------------------------------------------------------
   ◆ PCのみ表示（モバイル非表示）
--------------------------------------------------------- */
@media (max-width: 1024px) {
  .side-anchor {
    display: none;
  }
}

/* =========================================================
   ◆ FAQ BLOCK / MAKE IT JOY
========================================================= */

.faq-block {
  max-width: 900px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* 各FAQ */
.faq-item {
  border-bottom: 1px dashed rgba(0,0,0,0.4);
}

/* 質問 */
.faq-question {
  width: 100%;
  background: none;
  border: none;

  padding: 20px 0;
  text-align: left;

  font-size: 16px;
  letter-spacing: 0.08em;
  color: #000;

  display: flex;
  gap: 16px;
  align-items: center;

  cursor: pointer;
  transition: color 0.15s ease;
}

/* Qラベル */
.q-label {
  font-size: 14px;
  color: #de2525;
  letter-spacing: 0.2em;
}

/* ホバー */
.faq-question:hover {
  color: #de2525;
}

/* 回答 */
.faq-answer {
  max-height: 0;
  overflow: hidden;

  transition: max-height 0.3s ease;
}

/* 回答文 */
.faq-answer p {
  margin: 0;
  padding: 0 0 24px 30px;

  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.05em;

  color: #000;
}

/* 開いた状態 */
.faq-item:has(.faq-question:focus) .faq-answer,
.faq-item:has(.faq-question:active) .faq-answer {
  max-height: 500px;
}

/* =========================================================
   ◆ Contact Form 7 / 黒 × 赤 / 工業・編集デザイン
========================================================= */

.cf7-form {
  max-width: 640px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* 各フィールド */
.cf7-field {
  margin-bottom: 32px;
}

/* ラベル */
.cf7-field label {
  display: block;
  margin-bottom: 8px;

  font-size: 13px;
  letter-spacing: 0.12em;
  color: #000;
}

/* 必須マーク */
.cf7-field .required {
  color: #de2525;
  margin-left: 4px;
}

/* input / textarea 共通 */
.cf7-form input[type="text"],
.cf7-form input[type="email"],
.cf7-form input[type="tel"],
.cf7-form textarea {
  width: 100%;
  padding: 12px 14px;

  border: 1px solid #000;
  border-radius: 0;
  background: #fff;

  font-size: 14px;
  letter-spacing: 0.08em;
  color: #000;

  outline: none;
  box-shadow: none;

  transition: border-color 0.15s ease;
}

/* textarea */
.cf7-form textarea {
  min-height: 160px;
  resize: vertical;
}

/* focus：赤ライン */
.cf7-form input:focus,
.cf7-form textarea:focus {
  border-color: #de2525;
}

/* プレースホルダ */
.cf7-form ::placeholder {
  color: rgba(0,0,0,0.4);
}

/* 送信ボタン */
.cf7-submit input[type="submit"] {
  display: inline-block;

  background: #000;
  color: #fff;

  border: none;
  border-radius: 0;

  padding: 14px 24px;

  font-size: 14px;
  letter-spacing: 0.12em;

  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* hover：赤 */
.cf7-submit input[type="submit"]:hover {
  background-color: #de2525;
}

/* ---------------------------------------------------------
   ◆ エラー・送信メッセージ（CF7標準）
--------------------------------------------------------- */
.wpcf7-not-valid-tip {
  font-size: 12px;
  color: #de2525;
  margin-top: 6px;
}

.wpcf7-response-output {
  border: none;
  margin: 24px 0 0;
  padding: 0;

  font-size: 13px;
  letter-spacing: 0.08em;
}