/* =============================================================
   kotobuki custom layer — 2026 クリーン再構築での追加・上書き分
   ベンダー由来の css/style.css には手を入れず、差分はすべてここに置く。
   読み込み順: reset.css → style.css → custom.css（このファイルが最後に勝つ）
   ============================================================= */

/* --- PC/SP 出し分けユーティリティ ---------------------------------
   旧テーマでは .pcOnly / .spOnly がHTML側にだけ存在しCSS未定義だった
   （＝SPでも16:9動画が小さな帯として表示されていた）。ここで正式に定義する。 */
@media (min-width: 768px) {
  .spOnly { display: none !important; }
}
@media (max-width: 767px) {
  .pcOnly { display: none !important; }
}

/* --- ヒーロー動画 --------------------------------------------------
   旧実装: <video width="100%"> を流し込みのみ → ビューポート比率次第で
   下に白帯が出る／SPでは白地に白文字でキャッチコピーが読めなかった。
   新実装: 枠いっぱいに object-fit:cover。SPは縦長動画(720x1280)に差し替え。 */
#hero--image .hero-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* キャッチコピーの前面化は不要：元CSSで #hero--text--wrapper が z-index:3 を持ち、
   スクリム(::after, z-index:2)より上に描画される。h2 側に position を与えると
   absolute な wrapper の基準が高さ0の h2 になり画面外へ飛ぶので触らないこと。 */

@media (max-width: 767px) {
  /* SPヒーローは縦長見せ。450px固定だった旧指定を上書き（svh非対応端末はvhにフォールバック） */
  #hero--image {
    height: 80vh !important;
    height: 80svh !important;
    min-height: 480px;
  }
  /* キャッチコピー可読性の確保：下部グラデーションスクリム */
  #hero--image::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    z-index: 2;
    pointer-events: none;
  }
  /* 元CSSの width:780px 固定がSPでは画面からはみ出していたので可変に */
  #hero--image #hero--text #hero--text--wrapper {
    width: 90% !important;
  }
}

/* --- ヒーロー：タブレット帯(768-991px)の文字切れ修正 ----------------
   元CSSは #hero--text--wrapper { left:16%; width:780px } 固定のため、
   768〜928px では右端がビューポート外に出て「Meet all your needs.」が
   切れていた（旧テーマ由来の欠陥）。この帯だけ可変幅にする。 */
@media (min-width: 768px) and (max-width: 991px) {
  #hero--image #hero--text #hero--text--wrapper {
    width: auto !important;
    left: 8% !important;
    right: 8%;
  }
}

/* --- ヒーロー：PC/ノートPCではコピーを左寄せ（ディスプレイ左基準）-----
   元CSSは left:16% でノートPC(1366px等)だと216pxと右寄りだった。
   992px以上は左を詰めて、左端に近い位置に固定的に寄せる。 */
@media (min-width: 992px) {
  #hero--image #hero--text #hero--text--wrapper {
    left: 6% !important;
  }
}

/* --- トップ SERVICE（業務紹介）グリッド：SP修正 ---------------------
   元CSSは .service が幅42pxのinline-gridで、100px幅のラベルがはみ出して
   隣の項目と文字が重なっていた（旧テーマ由来）。SPは2列カードに再構成。
   PC(768px〜)は元のまま。 */
@media (max-width: 767px) {
  #index--business .wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 16px;
  }
  #index--business .wrapper .service {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto !important;
    margin: 0; /* ベンダーの margin:0 14px が列幅を圧迫し「クリエイティブ」が折り返すため除去 */
    padding: 18px 8px;
    text-align: center;
  }
  #index--business .wrapper .service span {
    display: block;
    width: auto;
    text-align: center;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1.4;
    white-space: nowrap; /* 6文字ラベルの途中改行を禁止 */
  }
  /* 3項目：最後の1つは行全体を使って中央に（[1][2] / [3]） */
  #index--business .wrapper .service:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 50%;
  }
}

/* --- ヘッダー：SNSアイコン（インスタ / LINE）--------------------------
   2026改修：ナビ右にSNS導線を追加（#header--lang は旧「言語切替」用の空枠）。 */
.header--sns {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header--sns li { margin: 0; }
.header--sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: opacity .2s, color .2s;
}
.header--sns a:hover { opacity: .65; }
/* ヘッダーのSNSは約5px上寄りだったため下げて上下余白を均等に */
#header--lang .header--sns { transform: translateY(5px); }
.sns-badge { display: block; height: auto; }

/* --- フッター共通：SNS＋認証マーク帯 -------------------------------- */
.footer--sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}
.footer--sns li { margin: 0; }
.footer--sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: opacity .2s;
}
.footer--sns a:hover { opacity: .65; }

/* --- フッター情報帯（SNS＋認証マーク）を整える --------------------
   旧: .mark ul li{width:10%} で縦長FSCと正方形Pの高さがバラバラ＋間延び。
   新: 高さ基準で揃え、中央寄せの1つの帯としてまとめる。 */
.footer-info {
  padding: 38px 16px 42px;
  background: #fff;
  border-top: 1px solid #ececec;
  text-align: center;
}
/* SNS（IG・LINE）と認証マーク（FSC・P）を1本の横並びに、同じサイズ感で。 */
.footer-info .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.footer-info .footer--sns {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  order: 2;               /* 先方フッター案どおり SNS は右 */
}
.footer-info .footer--sns .sns-badge {
  width: 66px !important;
  height: 66px !important;
}
.footer-info .mark {
  padding: 0 !important;
  order: 1;               /* FSC・P マークは左 */
}
.footer-info .mark ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-info .mark ul li {
  width: auto !important;
  margin: 0 !important;
}
.footer-info .mark ul li a img {
  width: auto !important;
  display: block;
}
/* SNSアイコン(66px)・Pマークと同じ見かけサイズに。FSCは説明文付きで縦長のため気持ち高め。 */
.footer-info .mark ul li:nth-child(1) a img { height: 84px !important; }
.footer-info .mark ul li:nth-child(2) a img { height: 68px !important; }
@media (max-width: 767px) {
  .footer-info { padding: 28px 16px 32px; }
  .footer-info .container { gap: 24px; }
  .footer-info .footer--sns { gap: 20px; }
  .footer-info .footer--sns .sns-badge { width: 58px !important; height: 58px !important; }
  .footer-info .mark ul { gap: 24px; }
  .footer-info .mark ul li:nth-child(1) a img { height: 74px !important; }
  .footer-info .mark ul li:nth-child(2) a img { height: 60px !important; }
}

/* ドロワー内のSNS導線 */
.drawer--sns {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid rgba(0,0,0,.1);
}
.drawer--sns a { color: #333; display: inline-flex; }
.drawer--sns a:hover { opacity: .65; }

/* --- トップ MV：日本語キャッチ（リサイクル素材メッセージ）----------
   長文キャッチに差し替えたため、PCは1行固定（改行させない）＋幅に応じて
   自動縮小。SPは折り返し可（改行位置はブラウザ任せ）。 */
@media (min-width: 768px) {
  #hero--image #hero-catch-ja {
    white-space: nowrap;
    font-size: min(30px, 2.55vw);
  }
}
@media (max-width: 767px) {
  #hero--image #hero-catch-ja {
    white-space: normal;
  }
}

/* --- 業務ページの製品ギャラリー：画像下の白余白を除去 -----------------
   カードは .shadow-wrapper.h100 で等高ストレッチされ、横長画像の下に
   カード地(白)が余っていた。等高を解除し、カードを画像実寸に合わせる。
   （2026改修で card-body を撤去し画像のみになったギャラリーが対象） */
#business--lower01 .product--content .row.gutters-10 {
  align-items: flex-start;
}
#business--lower01 .product--content .shadow-wrapper.h100 {
  height: auto !important;
}
#business--lower01 .product--content .card.product-card {
  height: auto;
}
#business--lower01 .product--content .card.product-card > img,
#business--lower01 .product--content .card.product-card .card-img-top {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 画像なし業務セクション（包装紙/ギフト箱/各種印刷物）の間延び緩和 ---
   .no-img で青帯は中身にぴったり巻くようになる（ベンダー標準）。
   加えて前後の content-inner-ex(100px) を詰め、テキストのみ帯が
   間延びして見えないようにする。 */
#business--lower01 .content-inner-ex:has(.product--head.no-img) {
  padding-top: 45px;
  padding-bottom: 45px;
}
@media (max-width: 767px) {
  #business--lower01 .content-inner-ex:has(.product--head.no-img) {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/* --- コンセプト MV：アイキャッチ（リサイクル可能な素材でご提案）----- */
.mv-eyecatch {
  display: inline-block;
  margin: 14px 0 0;
  padding: 6px 16px;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 700;
  color: #197a4b;
  background: rgba(255, 255, 255, .82);
  border-radius: 2px;
}

/* --- トップ SERVICE：背景画像上の白文字の可読性＆アイコンのサイズ感 ---
   背景 service01_bg.jpg が明るくスクリム無しで、白い見出し・ラベル・
   アイコンが読みづらかった。暗めスクリムを敷き、注記も白系に。
   アイコン円は少し締めてアイコンを大きめ（中央寄せは flex で確実に）。 */
#index--business { position: relative; }
#index--business::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .42);
  z-index: 0;
  pointer-events: none;
}
#index--business > * { position: relative; z-index: 1; }

/* アイコン円は 88px・border3px。flexで中央寄せ。FAグリフは字形が上寄り
   （買い物カゴ等はベースライン上に偏る）ため、i を line-height:1 にして
   em ボックス中央≒グリフ中央に揃える。 */
#index--business .service p {
  width: 88px;
  height: 88px;
  border-width: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#index--business .service i.fa {
  font-size: 50px;
  line-height: 1;
  display: block;
  transform: translateY(-13px); /* FAグリフの上寄り字形を補正して円の中央へ（3アイコンで実測） */
}

/* --- トップ SERVICE：廃止業務の補足一文（A②） --------------------- */
.service--note {
  margin: 34px auto 0;
  max-width: 720px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .92);
}

/* --- 「ワンストップ・プラットフォーム」背景動画（point-movie） --------
   SPでも再生。12.9MBの本編は重いので、軽量なSP版(point-movie_sp.mp4/約270KB)
   を用意して流す。読み込み中はポスター画像でつなぐ。 */
@media (max-width: 767px) {
  .bg.bg04 .spOnly {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* --- フォーム：エラーメッセージ -------------------------------------
   旧テーマはエラー文字列を算出しながらHTMLコメントで非表示にしていた。
   ユーザーに理由が伝わるよう正式に表示する。 */
.error-text {
  color: #ce0000;
  font-size: .85em;
  margin: 0 0 6px;
}

/* --- フォーム：SPでの入力しやすさ ----------------------------------- */
@media (max-width: 767px) {
  .contact-form-table input[type="text"],
  .contact-form-table input[type="email"],
  .contact-form-table input[type="tel"],
  .contact-form-table textarea {
    font-size: 16px; /* iOSのフォーカス時自動ズームを抑止 */
    padding: 10px;
    max-width: 100%;
  }
  .submits input[type="submit"] {
    padding: 14px 28px; /* タップ領域の確保 */
  }
}

/* --- ハニーポット（スパム対策。視覚・支援技術の双方から隠す） --- */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =============================================================
   新着情報 詳細（single-news）ページ — 2026 作り直し
   旧: リスト用レイアウトの流用でタイトルがリンク・本文が浮く等。
   新: 記事詳細としてメタ→見出し→本文→一覧へ戻る、を紺アクセントで整理。
   ============================================================= */
#news-single .container { max-width: 880px; }

.news-single__article {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 4px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .05);
  padding: 52px 56px;
}
.news-single__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.news-single__date {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #626264;
}
.news-single__cat {
  display: inline-block;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: #05387d;
  border-radius: 2px;
}
.news-single__title {
  margin: 0 0 30px;
  padding-bottom: 26px;
  font-size: clamp(21px, 3vw, 29px);
  font-weight: 700;
  line-height: 1.55;
  color: #1a1a1a;
  border-bottom: 2px solid #05387d;
}
.news-single__body {
  font-size: 16px;
  line-height: 2;
  color: #333;
}
.news-single__body > *:first-child { margin-top: 0; }
.news-single__body > *:last-child { margin-bottom: 0; }
.news-single__body p { margin: 0 0 1.5em; }
.news-single__body a {
  color: #3460fb;
  text-decoration: underline;
  word-break: break-all;
}
.news-single__body a:hover { opacity: .75; }
.news-single__body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 10px 0;
}
.news-single__body h2,
.news-single__body h3 {
  margin: 1.6em 0 .7em;
  font-weight: 700;
  line-height: 1.5;
  color: #1a1a1a;
}
.news-single__body h2 {
  font-size: 20px;
  padding-left: 14px;
  border-left: 4px solid #05387d;
}
.news-single__body h3 { font-size: 17px; }
.news-single__body ul,
.news-single__body ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.news-single__body li { margin-bottom: .4em; }

/* 一覧へ戻る */
.news-single__nav {
  text-align: center;
  margin-top: 46px;
}
.news-single__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 40px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #05387d;
  background: #fff;
  border: 1.5px solid #05387d;
  border-radius: 3px;
  text-decoration: none;
  transition: color .3s, background-color .3s;
}
.news-single__back::before {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s;
}
.news-single__back:hover {
  color: #fff;
  background: #05387d;
}

@media (max-width: 767px) {
  .news-single__article { padding: 30px 22px; }
  .news-single__title { font-size: 20px; margin-bottom: 22px; padding-bottom: 20px; }
  .news-single__body { font-size: 15px; line-height: 1.95; }
  .news-single__nav { margin-top: 34px; }
  .news-single__back { padding: 13px 32px; }
}

/* --- トップ：ABOUT(コトブキの特徴ボタン) と greeting(動画) の間隔を詰める ---
   about下60px＋greeting上100px＝約230pxの空きが広すぎたため縮小。 */
#index--about .content-inner-y { padding-bottom: 24px; }
.greeting .content-inner-ex { padding-top: 28px; }

/* --- スマホ：ヘッダー右のSNSボタン（ハンバーガー左）は非表示 ---
   ドロワー内のSNS導線は残す。 */
@media (max-width: 767px) {
  #header--lang { display: none !important; }
}