@charset "UTF-8";
/* ============================================================
   trend.css — 見た目の底上げ（2026-09-16）

   既存のCSSは1行も書き換えていない。このファイルを読み込むのをやめれば
   完全に元の見た目に戻る。header_top.php の1行を消すだけでよい。

   入れているのは3つだけ。
     1. 余白とタイポグラフィの調整
     2. スクロールで要素が入ってくる演出
     3. ボタンとカードのホバーの統一
   ============================================================ */

/* ------------------------------------------------------------
   1. 余白とタイポグラフィ
   見出しまわりの空きを広げて、文字の間隔を少しゆるめる。
   詰まって見えるのが「古く見える」一番の原因なので、ここが一番効く。
------------------------------------------------------------ */
.heading1 { margin-bottom: 76px; }
.heading2 { margin-bottom: 66px; }
.heading3 { margin-bottom: 58px; }

/* 先頭以外の見出しは、前のブロックとの間も広げる */
#main > .heading1:not(:first-child),
#main > .heading2:not(:first-child),
#main > .heading3:not(:first-child) { margin-top: 40px; }

/* 英字の大見出し。字間を開けると一気に今っぽくなる */
.heading1 h1, .heading1 h2,
.heading2 p { letter-spacing: 0.04em; }

/* 和文の見出し */
.heading1 small,
.heading2 small { letter-spacing: 0.08em; }

/* ページ見出し（各ページ上部の帯） */
#pagetitle h1, #pagetitle h2 { letter-spacing: 0.05em; }

@media (max-width: 999px) {
  .heading1 { margin-bottom: 56px; }
  .heading2 { margin-bottom: 50px; }
  .heading3 { margin-bottom: 44px; }
  #main > .heading1:not(:first-child),
  #main > .heading2:not(:first-child),
  #main > .heading3:not(:first-child) { margin-top: 28px; }
}
@media (max-width: 767px) {
  .heading1 { margin-bottom: 42px; }
  .heading2 { margin-bottom: 38px; }
  .heading3 { margin-bottom: 34px; }
  #main > .heading1:not(:first-child),
  #main > .heading2:not(:first-child),
  #main > .heading3:not(:first-child) { margin-top: 20px; }
}

/* ------------------------------------------------------------
   2. スクロールで入ってくる演出
   JavaScriptを使わず、CSSのスクロール連動アニメーションだけで動かす。
   対応していないブラウザや「動きを減らす」設定の人には
   @supports / @media が効かないので、最初から普通に見えている。
   ずれを防ぐため transform ではなく translate を使っている
   （ホバーの transform とぶつからない）。
------------------------------------------------------------ */
@keyframes trend-rise {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #main .heading1,
    #main .heading2,
    #main .heading3,
    #main .linkset li,
    #main .mediaset,
    #main .calloutset,
    #main .txtset,
    #main .flowset,
    #main .badgeflow,
    #main .listset li,
    #main .productslist li,
    #main .interview_list li,
    #main .recruitlist li,
    #main .q-ablock {
      animation: trend-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}

/* ------------------------------------------------------------
   3. ボタンとカードのホバー
   既存は opacity:0.6 で全体を薄くするだけだった。
   薄くするのはやめて、浮かせる・矢印を送り出す形に統一する。
------------------------------------------------------------ */
.ccm-block-next-previous .ccm-block-next-previous-parent-link a,
.products-detail .contactbnr .btns .btn a,
.miniSurveyView table.formBlockSurveyTable tr:last-child td input[type=submit],
.linkbtn a,
.linkset a,
.mediaset .btn a {
  transition: translate 0.3s ease, box-shadow 0.3s ease, background-position 0.3s ease, filter 0.3s ease;
}
.ccm-block-next-previous .ccm-block-next-previous-parent-link a:hover,
.products-detail .contactbnr .btns .btn a:hover,
.miniSurveyView table.formBlockSurveyTable tr:last-child td input[type=submit]:hover,
.linkbtn a:hover,
.linkset a:hover,
.mediaset .btn a:hover {
  opacity: 1;
  translate: 0 -3px;
  filter: saturate(1.12);
  box-shadow: 0 10px 22px rgba(233, 85, 4, 0.26);
  background-position: center right 5px, 0 0;
}

/* 一覧のカード。浮かせて影をつけるだけに留める */
#main .productslist li a,
#main .interview_list li a,
#main .recruitlist li a,
#main .listset li a {
  transition: translate 0.3s ease, box-shadow 0.3s ease;
}
#main .productslist li a:hover,
#main .interview_list li a:hover,
#main .recruitlist li a:hover,
#main .listset li a:hover {
  translate: 0 -4px;
  box-shadow: 0 12px 26px rgba(0, 32, 71, 0.13);
}

/* キーボード操作のときだけ、はっきりした枠を出す */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #ea5e08;
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   4. ページ見出しの帯（#pagetitle）
   全ページの一番上に出るので、ここが一番目に入る。
   ブランドの青い斜めバーはそのまま残し、下端を斜めに切って
   見出しを左から送り込む。既存の ::before（灰色のスクリーン）は
   触っていないので、::after を使っている。
------------------------------------------------------------ */
#pagetitle {
  position: relative;
  overflow: hidden;
}

/* 下端の斜めカット。body が白なので白で切り抜いている */
#pagetitle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 72px;
  background-color: #fff;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 767px) {
  #pagetitle::after { height: 36px; }
}

/* 見出しは斜めカットより手前に置く */
#pagetitle h1,
#pagetitle h2 {
  position: relative;
  z-index: 2;
}

/* 読み込み時に左から入る */
@media (prefers-reduced-motion: no-preference) {
  @keyframes trend-hero-in {
    from { opacity: 0; translate: -48px 0; }
    to   { opacity: 1; translate: 0 0; }
  }
  #pagetitle h1,
  #pagetitle h2 {
    animation: trend-hero-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
}

/* パンくずは帯の斜めに合わせて少し下げる */
#breadcrumb { margin-top: 6px; }