@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ===================
   H ZETTRIO 共通CSS（子テーマ style.css に統合 or @import）
   方針: レイアウト/全幅/余白/列組みは SWELL+Gutenberg のクラスに任せ、
        ここでは「見た目」だけを .hz-* クラスで後付けする。
   置き場所: 子テーマ。追加CSSは使わない。
   =================== */

/* 1. トークン（色はカラーパレットと一致 / フォントは functions.php で読込済み） */
:root{
  --hz-blue:#1E86C9;   /* M   */
  --hz-red:#FF2D2D;    /* NIRE */
  --hz-silver:#8C95A0; /* KOU */
  --hz-ink:#0A0A0A;
  --hz-bg:#F6F5F3;
  --hz-font-jp:'Zen Kaku Gothic New',sans-serif;
  --hz-font-en:'Jost',sans-serif;
  --hz-font-mono:'Space Mono',monospace;
}

/* 2. フォントの当て方（クラスを付けるだけ） */
.hz-en{font-family:var(--hz-font-en)}
.hz-mono{font-family:var(--hz-font-mono);letter-spacing:.08em}

/* 3. セクション見出し（色バー＋英字ラベル＋大きな見出し）
   使い方: フルワイド内の見出しブロックに「追加CSSクラス」.hz-section-title を付与。
   英字ラベルは ::before（data-en属性）で出すので HTML は見出しテキストだけでOK。 */
.hz-section-title{
  font-family:var(--hz-font-en);
  font-weight:500;
  font-size:clamp(34px,5vw,72px);
  line-height:.96;
  letter-spacing:-.02em;
  color:var(--hz-ink);
  margin:0;
  padding-top:26px;
  position:relative;
}
.hz-section-title::before{        /* 上の色バー */
  content:"";
  position:absolute;left:0;top:0;
  width:46px;height:7px;
  background:var(--hz-blue);
}
.hz-section-title[data-en]::after{ /* 英字サブラベル（任意） */
  content:attr(data-en);
  display:block;
  font-family:var(--hz-font-mono);
  font-size:12px;font-weight:400;
  letter-spacing:.2em;
  color:var(--hz-silver);
  text-transform:uppercase;
  margin-top:10px;
}
.hz-section-title.is-red::before{background:var(--hz-red)}
.hz-section-title.is-silver::before{background:var(--hz-silver)}
/* 白文字（黒背景セクション） */
.swell-block-fullWide[style*="#0a0a0a"] .hz-section-title,
.hz-on-dark .hz-section-title{color:#fff}

/* 4. ボタン（SWELLボタンブロックに追加クラスで付与 = Swipe Fill ホバー）
   SWELL: a.swell-block-button__link に .hz-btn-fill / .hz-btn-red / .hz-btn-outline を付ける */
.swell-block-button__link.hz-btn-fill,
.swell-block-button__link.hz-btn-red,
.swell-block-button__link.hz-btn-outline,
a.hz-btn-fill,a.hz-btn-red,a.hz-btn-outline{
  font-family:var(--hz-font-mono);
  font-weight:700;font-size:13px;letter-spacing:.04em;
  border-radius:0;
  background-size:200% 100%;
  background-position:100% 0;
  transition:background-position .34s cubic-bezier(.6,0,.2,1),color .25s,border-color .25s;
}
.hz-btn-fill{color:#fff;background-image:linear-gradient(90deg,var(--hz-blue) 0 50%,var(--hz-ink) 50% 100%)}
.hz-btn-red {color:#fff;background-image:linear-gradient(90deg,var(--hz-ink) 0 50%,var(--hz-red) 50% 100%)}
.hz-btn-outline{color:var(--hz-ink);border:1.5px solid rgba(10,10,10,.22);background-image:linear-gradient(90deg,var(--hz-blue) 0 50%,transparent 50% 100%)}
.hz-btn-fill:hover,.hz-btn-red:hover{background-position:0 0}
.hz-btn-outline:hover{background-position:0 0;color:#fff;border-color:var(--hz-blue)}

/* 5. カード（列ブロック .wp-block-column に追加クラス .hz-card を付与） */
.hz-card{
  background:#fff;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.45);
  overflow:hidden;
}
.hz-card img{display:block;width:100%;height:auto;transition:transform .5s}
.hz-card:hover img{transform:scale(1.05)}

/* 6. アクセント色ユーティリティ（文字色を素早く当てる） */
.hz-c-blue{color:var(--hz-blue)}
.hz-c-red{color:var(--hz-red)}
.hz-c-silver{color:var(--hz-silver)}

/* 7. 端末配慮（動きを抑える設定では無効化） */
@media (prefers-reduced-motion:reduce){
  .hz-card img{transition:none}
}