/* ===== フォント：英語は今までの Europa、日本語は Noto Sans JP ===== */
body {
  font-family: Europa, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* ===== 背景の黄色・赤の図形
   ・読み込み時：ヒーローの図形がすっと入ってくる
   ・常時：ゆっくり呼吸するように伸び縮み
   ・スクロール：少し遅れてなめらかについてきながら回転（値は js/anim.js）
   ===== */

/* はみ出した図形で横スクロールが出ないように */
.Hero,
.l-main {
  overflow-x: clip;
}
/* ヒーローの図形が、下のメッセージのセクションにはみ出して見えないように */
.Hero {
  overflow: clip;
}

/* ---------- ヒーロー ---------- */
.Hero.Hero-bg {
  background-image: none;
}
.Hero .Hero__content {
  position: relative;
  z-index: 1;
}

/* ファーストビュー：コピーを大きく、画面の中央に */
.Hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.Hero .Hero__title {
  margin-bottom: 2.4rem;
  font-size: min(4.4rem, 10.5vw); /* 「そして、つくる。」が1行に収まる大きさ */
  line-height: 1.3;
  font-weight: 700;
}
.Hero .Hero__title span {
  display: block;
  white-space: nowrap;
}
.Hero .Hero__desc {
  margin-bottom: 2.4rem;
}
@media screen and (min-width: 768px) {
  .Hero .Hero__title { font-size: 6.4rem; }
}
@media screen and (min-width: 992px) {
  .Hero { padding-top: 0; padding-bottom: 0; }
  .Hero .Hero__title { font-size: 8.4rem; line-height: 1.2; margin-bottom: 3.2rem; }
  .Hero .Hero__desc { margin-bottom: 3.2rem; }
}
@media screen and (min-width: 1200px) {
  .Hero .Hero__title { font-size: 9.6rem; }
}

/* やっていることの1行 */
.Hero .Hero__services {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
  color: #41424E;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.Hero .Hero__services span {
  color: #DB0032;
  font-weight: 400;
}
@media screen and (min-width: 992px) {
  .Hero .Hero__services { font-size: 1.5rem; }
}

/* スクロールの案内 */
.Hero__scroll {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  translate: -50% 0;
  color: #41424E;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-decoration: none;
}
.Hero__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 64px;
  background: linear-gradient(#41424E 0 0) top / 1px 0 no-repeat, rgba(65, 66, 78, 0.2);
  animation: scrollLine 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@media screen and (min-width: 992px) {
  /* PCでは右下の空いたところに */
  .Hero__scroll {
    left: auto;
    right: 4rem;
    translate: none;
  }
}
@keyframes scrollLine {
  0%   { background-size: 1px 0;    background-position: top; }
  50%  { background-size: 1px 100%; background-position: top; }
  51%  { background-size: 1px 100%; background-position: bottom; }
  100% { background-size: 1px 0;    background-position: bottom; }
}

/* 黄色：大きく、右上にはみ出す */
.Hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -50px;
  right: -22%;
  width: 62%;
  aspect-ratio: 312 / 390;
  background: url(../img/bg_yellow_sm.svg) center / 100% auto no-repeat;
  pointer-events: none;
  transform-origin: 60% 40%;
  animation:
    inYellow 1.6s cubic-bezier(0.16, 1, 0.3, 1) both,
    breathe 9s 1.6s ease-in-out infinite alternate;
  translate: 0 calc(var(--p, 0) * 0.3px);
  rotate: calc(var(--p, 0) * -0.012deg);
}
@media screen and (min-width: 992px) {
  /* 画面の中央を基準に置くので、ワイド画面でもコピーとの距離が開きすぎない */
  .Hero::after {
    top: -14%;
    right: auto;
    left: calc(50% + 160px);
    width: min(34vw, 72vh, 660px);
  }
}

/* 赤：左下 */
.Hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -8%;
  bottom: 6%;
  width: 34%;
  aspect-ratio: 312 / 390;
  background: url(../img/bg_red_sm.svg) center / 100% auto no-repeat;
  pointer-events: none;
  animation:
    inRed 1.6s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both,
    breathe 11s 1.9s ease-in-out infinite alternate-reverse;
  /* スクロールでは上へ抜けながら、黄色と逆向きに回る（下のセクションにはみ出さないように） */
  translate: 0 calc(var(--p, 0) * 0.25px);
  rotate: calc(var(--p, 0) * -0.015deg);
}
@media screen and (min-width: 992px) {
  .Hero::before {
    /* PCでは黄色の左下に寄せて、右側にまとまりを作る */
    left: calc(50% + 40px);
    bottom: 3%; /* ヒーローの中に全部収める（スクロール中に下で切れて見えないように） */
    width: min(19vw, 38vh, 380px);
  }
}

@keyframes inYellow {
  from { opacity: 0; transform: translate(12%, -12%) rotate(-12deg) scale(0.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes inRed {
  from { opacity: 0; transform: translate(-20%, 16%) rotate(14deg) scale(0.85); }
  to   { opacity: 1; transform: none; }
}

/* ヒーローの文字：コピー →（少しあとに）説明文 → Scroll の順に出る */
.Hero .Hero__title {
  animation: heroText 1.2s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.Hero .Hero__desc {
  animation: heroText 1.2s 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.Hero__scroll {
  animation: heroFade 1s 1.8s ease both;
}
@keyframes heroText {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 中段（チーム紹介の赤だけ） ---------- */
.bg-material.Team::before {
  position: absolute;
  z-index: 0;
  top: 42%;
  left: -8%;
  width: 20%;
  height: auto;
  aspect-ratio: 312 / 390;
  background: url(../img/bg_red_sm.svg) center / 100% auto no-repeat;
  pointer-events: none;
}
@media screen and (min-width: 992px) {
  .bg-material.Team::before { width: 11%; left: -4%; }
}
.Team > .container {
  position: relative;
  z-index: 1;
}

/* ---------- 各セクションの図形の動き ---------- */
.bg-material::before {
  animation: breathe 10s ease-in-out infinite alternate;
  translate: 0 calc(var(--p, 0) * 0.18px);
  rotate: calc(var(--p, 0) * 0.02deg);
}
.bg-material::after {
  animation: breathe 12s ease-in-out infinite alternate-reverse;
  translate: 0 calc(var(--p, 0) * -0.12px);
  rotate: calc(var(--p, 0) * -0.02deg);
}
/* Contactの赤は親が overflow:hidden なので、上に動いて切れないように */
.bg-material.red-lg-1::after {
  translate: 0 max(0px, calc(var(--p, 0) * 0.12px));
}

/* ゆっくり呼吸するような伸び縮み */
@keyframes breathe {
  from { scale: 1; }
  to   { scale: 1.06; }
}

/* ---------- スクロールでふわっと表示（js/anim.js が .reveal / .is-in を付ける） ---------- */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 動きを減らす設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .Hero::before,
  .Hero::after,
  .bg-material::before,
  .bg-material::after,
  .Hero__scroll::after,
  .Hero .Hero__title,
  .Hero .Hero__desc,
  .Hero__scroll {
    animation: none;
  }
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .Hero::before,
  .Hero::after,
  .bg-material::before,
  .bg-material::after {
    translate: none;
    rotate: none;
  }
}

/* ===== わたしたちができること ===== */
/* 見出しはメッセージ・実績紹介（.Message h2 / .Works h2）と同じ大きさに */
.Service h2 { margin-bottom: 4rem; }
.Service h2 .ja {
  display: block;
  font-weight: 700;
  font-size: 3.3rem;
  font-feature-settings: "palt";
  letter-spacing: 0.35rem;
  line-height: 1.3;
}
@media screen and (min-width: 375px) {
  .Service h2 .ja { font-size: 3.8rem; }
}
@media screen and (min-width: 992px) {
  .Service h2 { margin-bottom: 6.5rem; }
  .Service h2 .ja { font-size: 6.8rem; }
}
@media screen and (min-width: 1200px) {
  .Service h2 .ja { font-size: 7.4rem; }
}
/* リード文はメッセージ（.Message p）と同じ */
.Service .container > p {
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: 0.25rem;
  line-height: 2;
}
@media screen and (min-width: 375px) { .Service .container > p { font-size: 2rem; } }
@media screen and (min-width: 992px) { .Service .container > p { font-size: 2.4rem; } }
@media screen and (min-width: 1200px) { .Service .container > p { font-size: 2.6rem; } }

/* 一覧は会社概要の表と同じく、線で区切る */
.Service__list {
  margin-top: 4rem;
  border-top: 1px solid #41424e;
}
@media screen and (min-width: 992px) {
  .Service__list { margin-top: 6.5rem; }
}
.Service__item {
  padding: 3.2rem 0;
  border-bottom: 1px solid #41424e;
}
@media screen and (min-width: 992px) {
  .Service__item {
    display: grid;
    grid-template-columns: 380px 1fr;
    column-gap: 4rem;
    padding: 4.5rem 0;
  }
  .Service__head { grid-column: 1; }
  .Service__body { grid-column: 2; }
}
.Service__item .Service__num {
  margin-bottom: 0.8rem;
  color: #FFC400;
  font-family: Europa, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.Service__item:nth-child(even) .Service__num { color: #DB0034; }
.Service__item .Service__title {
  margin-bottom: 0.4rem;
  color: #252525;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 1.4;
}
@media screen and (min-width: 992px) {
  .Service__item .Service__title { font-size: 2.6rem; }
}
.Service__item .Service__en {
  margin-bottom: 2rem;
  color: rgba(117, 117, 117, 0.8);
  font-family: Europa, sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 992px) {
  .Service__item .Service__en { margin-bottom: 0; font-size: 1.4rem; }
}
/* 説明文はプロフィールの文章（.Team__content-read）と同じ */
.Service__item .Service__read {
  margin-bottom: 1.2rem;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.25rem;
  line-height: 2;
}
@media screen and (min-width: 992px) {
  .Service__item .Service__read { font-size: 1.8rem; }
}
/* 作業内容は受賞歴と同じグレーの文字で、/ 区切り */
.Service__tags {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #757575;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1.8;
}
/* 区切りの「/」は各項目の後ろに付ける（折り返したとき行頭に来ないように） */
.Service__tags li:not(:last-child)::after {
  content: "/";
  margin: 0 0.8em;
  color: rgba(117, 117, 117, 0.5);
}
@media screen and (min-width: 992px) {
  .Service__tags { font-size: 1.6rem; }
}
/* サービスの注釈（※ 当社は Studio Experts です。） */
.Service__item .Service__note {
  margin-top: 1.2rem;
  color: var(--c-mute, #757575);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 992px) {
  .Service__item .Service__note { font-size: 1.3rem; }
}

/* ===== スクロールで背景色が切り替わる（色は index.html の各セクションの data-bg） ===== */
body {
  transition: background-color 0.8s ease;
}
/* セクション自体の背景は透明にして、ページ全体の色を見せる */
.Works {
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

/* ===== 右端の縦書きラベル（MESSAGE / SERVICE …）
   画面の右に余白がある広い画面（1400px以上）だけで表示 ===== */
.SideLabel {
  display: none;
  position: fixed;
  z-index: 5;
  top: 50%;
  right: 3.2rem;
  width: 6rem;
  height: 60vh;
  translate: 0 -50%;
  pointer-events: none;
}
@media screen and (min-width: 1400px) {
  .SideLabel { display: block; }
}
.SideLabel__word {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  writing-mode: vertical-rl;
  font-family: Europa, sans-serif;
  font-size: 5.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}
.SideLabel__word span {
  display: inline-block;
  opacity: 0;
  transform: translateX(-70%) rotate(-8deg);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
.SideLabel__word.is-in span {
  opacity: 1;
  transform: none;
}
.SideLabel__word.is-out span {
  opacity: 0;
  transform: translateX(70%) rotate(8deg);
  transition-duration: 0.45s;
}
/* mask：枠の中から1文字ずつせり出す（下へスクロール中は右から、上へは左から） */
.SideLabel--mask .SideLabel__word { overflow: hidden; }
.SideLabel--mask .SideLabel__word span {
  opacity: 1;
  transform: translateX(110%);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.SideLabel--mask[data-dir="up"] .SideLabel__word span { transform: translateX(-110%); }
.SideLabel--mask .SideLabel__word.is-in span { transform: none; }
.SideLabel--mask .SideLabel__word.is-out span { opacity: 1; transform: translateX(-110%); transition-duration: 0.45s; }
.SideLabel--mask[data-dir="up"] .SideLabel__word.is-out span { transform: translateX(110%); }

/* scramble：文字がパラパラ入れ替わって決まる（文字の入れ替えは JS） */
.SideLabel--scramble .SideLabel__word span {
  transform: none;
  transition: opacity 0.3s ease;
}
.SideLabel--scramble .SideLabel__word.is-out span { transform: none; transition-duration: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .SideLabel__word span { transition: none; }
}

/* ===== 背景グラデーション版（URLに ?grad を付けると切り替わる。html に .is-bg-grad が付く）
   淡い2色のグラデーション。セクションが変わると、次のグラデーションにふわっと切り替わる ===== */
.BgGrad { display: none; }
.is-bg-grad body { background-color: #fff !important; }
.is-bg-grad .BgGrad {
  display: block;
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
}
.BgGrad i {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.BgGrad i.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .BgGrad i { transition: none; }
}

/* ===== わたしたちについて：顔写真を小さめに（元は幅62%） ===== */
.Team__content-pho {
  width: 44%;
  max-width: 220px;
}

/* ===== PCだけ改行する <br class="u-pc-br" /> ===== */
.u-pc-br { display: none; }
@media screen and (min-width: 992px) {
  .u-pc-br { display: inline; }
}

/* ===== お問い合わせフォーム ===== */
.c-form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.c-form__note {
  margin: -1rem 0 3rem;
  color: #777;
  font-size: 1.2rem;
  line-height: 1.8;
}
@media screen and (min-width: 992px) {
  .c-form__note {
    font-size: 1.3rem;
  }
}


/* =====================================================================
   デザインの統一（余白・見出し・文字・ナビのルールをここでそろえる）
   ===================================================================== */
:root {
  --c-text: #252525;
  --c-sub: #41424E;
  --c-mute: #757575;
  --c-yellow: #FFC400;
  --c-red: #DB0034;
  --c-line: #41424E;
  --sec-pad: 88px;   /* セクションの上下の余白（スマホ） */
  --head-gap: 40px;  /* 見出しと中身のあいだ（スマホ） */
}
@media screen and (min-width: 992px) {
  :root {
    --sec-pad: 136px; /* PC */
    --head-gap: 64px;
  }
}

/* --- セクションの余白をそろえる --- */
.c-sec {
  padding-top: var(--sec-pad);
  padding-bottom: var(--sec-pad);
}
.c-sec h2,
.Company h2,
.Contact h2 {
  margin-bottom: var(--head-gap);
}

/* --- 大きな見出し：どのセクションも同じ大きさ（「わたしたちについて」も） --- */
.Team h2 .ja {
  font-size: 3.3rem;
  letter-spacing: 0.35rem;
  line-height: 1.3;
}
@media screen and (min-width: 375px) { .Team h2 .ja { font-size: 3.8rem; } }
@media screen and (min-width: 992px) { .Team h2 .ja { font-size: 6.8rem; } }
@media screen and (min-width: 1200px) { .Team h2 .ja { font-size: 7.4rem; } }

/* --- 見出しの下のリード文：どのセクションもメッセージ本文と同じ --- */
.Team .container > p,
.Works .container > p {
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: 0.25rem;
  line-height: 2;
}
@media screen and (min-width: 375px) { .Team .container > p, .Works .container > p { font-size: 2rem; } }
@media screen and (min-width: 992px) { .Team .container > p, .Works .container > p { font-size: 2.4rem; } }
@media screen and (min-width: 1200px) { .Team .container > p, .Works .container > p { font-size: 2.6rem; } }

/* --- プロフィール --- */
.Team__content {
  margin-top: var(--head-gap);
}
/* 見出しのすぐ下にプロフィールが来るときは、見出しの余白だけにする */
.Team h2 + .Team__content {
  margin-top: 0;
}
.Team__content .Team__content-name {
  font-size: 2.4rem;
}
@media screen and (min-width: 992px) {
  .Team__content .Team__content-name { font-size: 3.2rem; }
}
/* 肩書きは読みやすいグレーに（黄色はグレーの背景で見えにくいため） */
.Team__content .Team__content-position,
.Team__content .Team__content-position--yellow,
.Team__content .Team__content-position--red {
  color: var(--c-mute);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 992px) {
  .Team__content .Team__content-position { font-size: 1.6rem; }
}
/* 「考えて、形にする人。」：ベタ塗りの帯をやめて、色の短い線＋文字に */
.Team__content .Team__content-title,
.Team__content .Team__content-title--yellow,
.Team__content .Team__content-title--red {
  width: auto;
  max-width: none;
  height: auto;
  margin: 0 0 1.6rem;
  justify-content: flex-start;
  gap: 1.2rem;
  background: none;
  color: var(--c-text);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.15rem;
}
@media screen and (min-width: 992px) {
  .Team__content .Team__content-title { font-size: 2rem; }
}
.Team__content .Team__content-title::before {
  content: "";
  flex: none;
  width: 2.4rem;
  height: 3px;
  border-radius: 2px;
  background: var(--c-yellow);
}
.Team__content .Team__content-title--red::before {
  background: var(--c-red);
}
.Team__content .Team__content-read {
  font-size: 1.5rem;
}
@media screen and (min-width: 992px) {
  .Team__content .Team__content-read { font-size: 1.6rem; }
}

/* --- チームのまとめ文：左の位置をほかとそろえる --- */
.Team__message {
  width: 100%;
  margin: var(--head-gap) 0 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.Team__message .Team__message-read {
  margin: 0 0 2rem;
}

/* --- 受賞歴：サービス一覧と同じ見出しの作りに --- */
.Team__awards {
  margin-top: var(--sec-pad);
  padding-bottom: 3.2rem;
}
.Team__awards .Team__awards-title {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  margin-bottom: 2.4rem;
  letter-spacing: 0.1rem;
  color: var(--c-text);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
}
@media screen and (min-width: 992px) {
  .Team__awards .Team__awards-title { font-size: 2.6rem; }
}
/* 見出しの右に伸びる線：右端まで届くように */
.Team__awards .Team__awards-title::before {
  position: static;
  order: 2;
  flex: 1;
  width: auto;
  height: 0;
  border-bottom: 1px solid var(--c-line);
  transform: none;
}
.Team__awards .Team__awards-list {
  margin: 0;
  padding: 0;
}
.Team__awards .Team__awards-item {
  color: var(--c-mute);
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 2;
}
@media screen and (min-width: 992px) {
  .Team__awards .Team__awards-item { font-size: 1.6rem; }
}

/* --- ヘッダー：画面の端から少し離れた角丸の帯
   ・いちばん上：背景も線もなし（ロゴとナビだけ）
   ・スクロール中（.is-fixed）：白い背景と影が付いて浮いた（フローティング）状態に。横幅は変えない --- */
.l-header {
  top: 12px;
  left: max(16px, calc(50% - 640px));
  width: min(calc(100% - 32px), 1280px);
  height: 72px;
  padding: 0 1.6rem;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  transition:
    top 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    left 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease,
    background-color 0.5s ease;
}
.l-header.is-fixed {
  top: 10px;
  left: max(16px, calc(50% - 640px));
  width: min(calc(100% - 32px), 1280px);
  height: 64px;
  padding: 0 1.6rem;
  border-radius: 24px;
  /* Apple の Liquid Glass 風：透けるガラス＋ふちの光＋上側のツヤ */
  isolation: isolate;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 10px 36px rgba(65, 66, 78, 0.12);
}
/* ガラスの上側にうっすら乗るツヤ */
.l-header.is-fixed::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 140% at 20% -40%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}
@media screen and (min-width: 992px) {
  .l-header {
    top: 16px;
    height: 72px;
    padding: 0;
    border-radius: 999px;
  }
  .l-header.is-fixed {
    top: 14px;
    height: 60px;
    padding: 0;
    border-radius: 999px;
  }
  .l-header .l-header__content { padding: 0 1.2rem 0 2.8rem; }
}
/* スマホでメニューを開いているときは、ふつうの全幅に戻す（メニューが画面いっぱいに出るように） */
.is-show-spNav .l-header,
.is-show-spNav .l-header.is-fixed {
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 2rem;
  border-radius: 0;
  box-shadow: none;
}
/* ロゴ下の「マスカット株式会社」が2行にならないように */
.l-header__logo-text {
  white-space: nowrap;
}


/* ===== ボタン（お問い合わせ・送信する）のホバー
   ・濃いグレーの面が左からスッと満ちる
   ・文字が下から入れ替わる（同じ文字が上に抜けて、下から出てくる）
   ・矢印が右へ少し進む ===== */
.c-btn {
  overflow: hidden;
  isolation: isolate;
  gap: 0.8em;
}
.c-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: #252525;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  opacity: 1;
}
.c-btn:hover,
.c-btn:focus-visible {
  background: #DB0034;
  transform: none;
  box-shadow: 0 8px 24px rgba(219, 0, 52, 0.25);
}
.c-btn:hover::before,
.c-btn:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}
.c-btn__label {
  display: inline-block;
  overflow: hidden;
  height: 1.5em;
  line-height: 1.5em;
}
.c-btn__label span {
  display: inline-block;
  text-shadow: 0 1.5em 0 currentColor;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.c-btn:hover .c-btn__label span,
.c-btn:focus-visible .c-btn__label span {
  transform: translateY(-1.5em);
}
.c-btn__arrow {
  display: inline-block;
  font-family: Europa, sans-serif;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.c-btn:hover .c-btn__arrow,
.c-btn:focus-visible .c-btn__arrow {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .c-btn::before,
  .c-btn__label span,
  .c-btn__arrow { transition: none; }
}