/* TERASU 下層ページ共通の最上部見出し（2026-09-03 大串支給仕様 sec-about-pagehead-saki-0817 を移植）
   ・パンくず → 英字の大見出し（1文字＝3枚重ねをY方向にロールイン）→ 和文タイトル。最終行の右にマークが back-ease でポップ
   ・書体はサイト共通（欧文 Hanken Grotesk／和文 Noto Sans JP）。--u = 100vw/1440 のスケール設計は支給仕様どおり
   ・目玉のSVGは参考元の素材のため使わず、TERASUのマーク画像に置換 */
.tph{--u:calc(100vw / 1440);--tph-bg:#fff;--tph-ink:#212121;--tph-gray:#a0a0a0;--tph-r:calc(var(--u)*24);
  --tph-en:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;--tph-jp:YakuHanJP,"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  position:relative;z-index:10;background:var(--tph-bg);color:var(--tph-ink);border-radius:0 0 var(--tph-r) var(--tph-r);
  padding:calc(var(--u)*150) calc(var(--u)*40) calc(var(--u)*64);overflow:clip;font-family:var(--tph-jp);line-height:1;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
.tph *{box-sizing:border-box;margin:0;padding:0;min-width:0}
.tph__crumb{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*6);color:#5a5a5a}
.tph__crumb a,.tph__crumb span.c{font-family:var(--tph-en);font-size:calc(var(--u)*14);font-weight:500;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--tph-gray);text-decoration:none;transition:color .3s ease-out}
.tph__crumb span.c{color:#5a5a5a}
.tph__crumb a:hover{color:var(--tph-ink)}
.tph__crumb i{display:block;width:calc(var(--u)*6.5);height:1px;background:currentColor}
.tph__en{display:flex;justify-content:flex-start;margin-top:calc(var(--u)*64);font-family:var(--tph-en);font-size:calc(var(--u)*96);font-weight:500;line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.tph__enin{display:flex;flex-direction:column;align-items:flex-start;position:relative}
.tph__row{position:relative}
.tph__line{display:inline-block;opacity:0;transform:translateY(1em);will-change:opacity,transform;transition:opacity 1.1s cubic-bezier(.215,.61,.355,1),transform 1.1s cubic-bezier(.215,.61,.355,1)}
.tph.is-in .tph__line{opacity:1;transform:translateY(0)}
.tph__w{display:inline-block;white-space:nowrap}
.tph__cl{display:inline-flex;overflow-y:clip}
.tph__ch{position:relative;display:inline-block;white-space:pre;will-change:transform;transition:transform 1.1s cubic-bezier(.215,.61,.355,1);transition-delay:calc(var(--i,0)*.022s)}
.tph__ch b{position:absolute;left:0;display:inline-block;white-space:pre;font-weight:inherit}
.tph.is-in .tph__ch{transform:translateY(-200%)}
.tph__mark{position:absolute;z-index:10;width:calc(var(--u)*96);top:calc(var(--u)*-14);right:calc(var(--u)*-84);opacity:0;transform:translateY(50%);transition:opacity .6s cubic-bezier(.34,1.56,.64,1) .95s,transform .6s cubic-bezier(.34,1.56,.64,1) .95s;pointer-events:none}
.tph__mark img{display:block;width:100%;height:auto}
.tph.is-in .tph__mark{opacity:1;transform:translateY(-20%)}
.tph__ja{margin-top:calc(var(--u)*24);font-size:calc(var(--u)*16);font-weight:700;color:#212121;opacity:0;transform:translateY(100%);transition:opacity .7s cubic-bezier(.19,1,.22,1),transform .7s cubic-bezier(.19,1,.22,1)}
.tph.is-in .tph__ja{opacity:1;transform:none}
@media screen and (max-width:960px){
  .tph{--u:calc(100vw / 375);--tph-r:calc(var(--u)*12);padding:calc(var(--u)*110) calc(var(--u)*16) calc(var(--u)*40)}
  .tph__crumb a,.tph__crumb span.c{font-size:calc(var(--u)*12)}
  .tph__en{margin-top:calc(var(--u)*40);font-size:calc(var(--u)*46)}
  .tph__row{width:min-content}
  .tph__mark{width:calc(var(--u)*48);top:calc(var(--u)*-16);right:calc(var(--u)*-8)}
  .tph__ja{margin-top:calc(var(--u)*24);font-size:calc(var(--u)*14)}
}
@media (prefers-reduced-motion:reduce){.tph *{transition:none!important}.tph__ch{transform:translateY(-200%)}.tph__line,.tph__ja,.tph__mark{opacity:1;transform:none}}
/* 見出しの直後に来る区画は上余白を詰める（見出し側に十分な余白があるため） */
.tph + .svc--fv .svc__in,.tph + main .svc--fv .svc__in{padding-top:clamp(2rem,4vw,3rem)}
.tph + .pz,.tph + style + .pz{padding-top:clamp(2rem,4vw,3rem)}
/* Company / Contact はテーマのFVにも同じ見出しがあるので、テーマ側の英字タイトルを隠す */
.p-company .cm-under__mvBodyTitle,.p-contact .p-contact__mainMvTitle{display:none!important}

/* 2026-09-03 追記: テーマ由来のセンター寄せを解除／見出しが先頭にある main はテーマの上余白を外す（見出し側が余白を持つ） */
.tph,.tph *{text-align:left!important}
main.cm-under:has(> .tph:first-child){padding-top:0!important}
/* Journal はヘッダー中央のブログラベルが見出しと重複するので隠す */
.cl-bloglabel{display:none!important}

/* ver20.318 大串指示「料金/制作実績/コラム/よくある質問/会社概要/お問い合わせの見出しの下部を、
   真っ直ぐ囲うんじゃなくて緩やかなウニョウニョに（下のコンテンツとの繋ぎ目のところ）」
   ・従来は border-radius:0 0 24px 24px の「直線＋角丸」だった。
   ・mask を2枚重ねて、下端 --tph-wh 分だけを波形に切り抜く（上側は塗りつぶしのまま）。
     SVGは preserveAspectRatio="none" なので横幅に合わせて伸び、波の緩やかさは保たれる。
   ・波の高さは .tph の padding-bottom（9vw）より小さく取り、和文タイトルを削らない
     （1440pxで 波46px / padding 129.6px、390pxで 波16px / padding 35px）。 */
.tph{
  --tph-wh:clamp(16px,3.2vw,46px);
  --tph-wave:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 56" preserveAspectRatio="none"><path d="M0,28 C120,8 240,8 360,28 S600,48 720,28 S960,8 1080,28 S1320,48 1440,28 L1440,0 L0,0 Z" fill="black"/></svg>');
  border-radius:0!important;
  -webkit-mask-image:linear-gradient(#000,#000),var(--tph-wave);
  mask-image:linear-gradient(#000,#000),var(--tph-wave);
  -webkit-mask-size:100% calc(100% - var(--tph-wh)),100% var(--tph-wh);
  mask-size:100% calc(100% - var(--tph-wh)),100% var(--tph-wh);
  -webkit-mask-position:top left,bottom left;
  mask-position:top left,bottom left;
  -webkit-mask-repeat:no-repeat,no-repeat;
  mask-repeat:no-repeat,no-repeat;
}

/* ver20.336 大串「各ページの見出しの右上のロゴをなくして」:
   .tph__mark（96pxのTERASUマーク）を全ページで非表示にする。
   位置指定などは残すが表示しないだけなので、戻す時はこの1ブロックを消せばよい。 */
.tph__mark{display:none!important}
/* ver20.406 パンくず「Top」が 320px/1024px で 10px 未満になっていた → 11px を下限に */
.tph__crumb a,.tph__crumb span.c{font-size:max(calc(var(--u)*14),11px)}
@media screen and (max-width:960px){.tph__crumb a,.tph__crumb span.c{font-size:max(calc(var(--u)*12),11px)}}