@charset "UTF-8";

/* COLOR
============================== */
:root {
  /* ページの背景色 */
  --bg: #FFFFFF;
  /* 基本の文字色 */
  --text: #333333;

  /* 影の色 */
  --shadow: 0 3px 5px rgba(64, 55, 52, 0.1);
  --icon-shadow: 0 7px 10px rgba(64, 55, 52, 0.2);

  /* 基本カラー */
  --color-yellow: #FFFF87;
  --color-aqua: #7AF6FF;
  --color-sky: #8CE6F0;
  --color-violet: #C399FF;
  --color-red: #FC006E;

  /* 半透明カード背景（Flow, SNSボタンなど） */
  --panel-bg-soft: rgba(255, 255, 255, 0.4);

  /* SNSアイコンホバー背景 */
  --icon-hover-bg: rgba(255, 255, 255, 0.8);

  /* 入力欄背景 */
  --input-bg: rgba(183, 198, 199, 0.1);

  /* メッシュ用 */
  --rgb-yellow: rgba(255, 255, 135, 0.35);
  --rgb-aqua: rgba(122, 246, 255, 0.25);
  --rgb-sky: rgba(140, 230, 240, 0.35);
  --rgb-violet: rgba(195, 153, 255, 0.30);

  /* 4色が溶け合うメッシュ円 1枚 */
  --mesh-gradient-main:
    linear-gradient(90deg,
      var(--rgb-yellow) 0%,
      var(--rgb-aqua) 8%,
      var(--rgb-sky) 25%,
      var(--rgb-violet) 100%);

  --mesh-gradient-sub:
    linear-gradient(165deg,
      var(--rgb-yellow) 0%,
      var(--rgb-aqua) 35%,
      var(--rgb-sky) 65%,
      var(--rgb-violet) 100%);

  /* Instagram風メッシュ用カラー */
  --ig-purple: #7638FA;
  --ig-pink: #D300C5;
  --ig-orange: #FF7A00;
  --ig-red: #FC006E;
  --ig-yellow: #FEBE05;

  /* Instagram用 RGBカラー */
  --ig-rgb-purple: rgba(118, 56, 250, 0.5);
  --ig-rgb-pink: rgba(211, 0, 197, 0.4);
  --ig-rgb-orange: rgba(255, 122, 0, 0.4);
  --ig-rgb-red: rgba(252, 0, 110, 0.4);
  --ig-rgb-yellow: rgba(254, 190, 5, 0.5);

  /* ▼ メッシュ用グラデーションセット（通常：rgba） */
  --ig-mesh-rgba:
    /* 左上 パープル～マゼンダ */
    radial-gradient(circle at 0% 0%,
      var(--ig-rgb-purple) 0%,
      var(--ig-rgb-pink) 40%,
      transparent 75%),

    /* 右上 マゼンダ～レッド */
    radial-gradient(circle at 100% 0%,
      var(--ig-rgb-pink) 0%,
      var(--ig-rgb-red) 40%,
      transparent 75%),

    /* 左下 イエロー～オレンジ */
    radial-gradient(circle at 0% 100%,
      var(--ig-rgb-yellow) 0%,
      var(--ig-rgb-orange) 40%,
      transparent 75%),

    /* 右下 レッド～マゼンダ */
    radial-gradient(circle at 100% 100%,
      var(--ig-rgb-red) 0%,
      var(--ig-rgb-pink) 40%,
      transparent 75%);

  /* ▼ メッシュ用グラデーションセット（hover：HEX） */
  --ig-mesh-hex:
    /* 左上 パープル～マゼンダ */
    radial-gradient(circle at 0% 0%,
      var(--ig-purple) 0%,
      var(--ig-pink) 40%,
      transparent 75%),

    /* 右上 マゼンダ～レッド */
    radial-gradient(circle at 100% 0%,
      var(--ig-pink) 0%,
      var(--ig-red) 40%,
      transparent 75%),

    /* 左下 イエロー～オレンジ */
    radial-gradient(circle at 0% 100%,
      var(--ig-yellow) 0%,
      var(--ig-orange) 40%,
      transparent 75%),

    /* 右下 レッド～マゼンダ */
    radial-gradient(circle at 100% 100%,
      var(--ig-red) 0%,
      var(--ig-pink) 40%,
      transparent 75%);
}


/* ==============================
  COMMON
============================== */
html {
  scroll-behavior: smooth;
  line-height: 1.8;
}

body {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 16px;
  position: relative;
  background: var(--bg);
  color: var(--text);
  width: 100%;
}

section {
  padding: clamp(2rem, 1.843rem + 0.96vw, 3rem) 0;
}

.l-wrapper {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow);
  width: min(100% - 2rem, clamp(20rem, 90vw, 75rem));
  margin: clamp(3rem, 2.53rem + 2.89vw, 6rem) auto;
}

a {
  text-decoration: none;
  color: var(--text);
}

h1 {
  line-height: 1.4;
  font-size: 3rem;
}

h2 {
  line-height: 1.4;
  font-size: clamp(1.5rem, 1.422rem + 0.48vw, 2rem);
  margin: 1rem 0 clamp(2rem, 1.687rem + 1.93vw, 4rem);
  text-align: center;
}

h3 {
  line-height: 1.2;
}

h4 {
  font-size: 1rem;
  font-weight: bold;
}

.no-break {
  white-space: nowrap;
}

.u-brSp {
  display: none;
}


/* BACKGROUND MESH
============================== */
.mesh-circle {
  position: absolute;
  width: 30rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-image: var(--mesh-gradient-main);
  background-size: 100% 100%;
  filter: blur(15px);
  opacity: 0.9;
  pointer-events: none;
}

/* メッシュ背景レイヤー（画面全体の奥に固定） */
.mesh-bg {
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
}

/* L1：画面幅1/3あたりで、上に半分かかる */
.mesh-circle--1 {
  top: -18%;
  left: 18%;
  width: 34rem;
  transform: rotate(120deg);
}

/* L2：右下、ほぼ見切れない位置（しっかり見える主役） */
.mesh-circle--2 {
  bottom: 4%;
  right: 6%;
  width: 36rem;
  transform: rotate(-30deg);
}

/* L3：左下隅、ややはみ出し（奥行き用の影） */
.mesh-circle--3 {
  bottom: -9%;
  left: -3%;
  width: 32rem;
  transform: rotate(40deg);
}

/* === M（中）：4つ（16rem前後） ======== */

/* M1：左上〜中央寄り（L1の少し下に浮かぶ） */
.mesh-circle--4 {
  top: 18%;
  left: 38%;
  width: 16rem;
  transform: rotate(15deg);
}

/* M2：右上〜中央寄り（ヘッダー裏側付近の奥行き） */
.mesh-circle--5 {
  top: 2%;
  right: 18%;
  width: 16rem;
  transform: rotate(95deg);
}

/* M3：中央やや右（画面中央付近のふくらみ） */
.mesh-circle--6 {
  top: 38%;
  right: 32%;
  width: 16rem;
  transform: rotate(-70deg);
}

/* M4：中央やや左（テキスト裏のボリューム感） */
.mesh-circle--7 {
  top: 50%;
  left: 24%;
  width: 16rem;
  transform: rotate(160deg);
}

/* === S（小）：5つ（6〜8rem） ========= */

/* S1：右上の細かい粒（ヘッダー付近のきらめき） */
.mesh-circle--8 {
  top: 22%;
  right: 8%;
  width: 7rem;
  transform: rotate(-10deg);
}

/* S2：中央〜やや上、小さめの粒（うっすら中央の奥行き） */
.mesh-circle--9 {
  top: 35%;
  left: 46%;
  width: 7rem;
  transform: rotate(45deg);
}

/* S3：左中央〜やや下（L3とM4の間をつなぐ） */
.mesh-circle--10 {
  bottom: 26%;
  left: 14%;
  width: 8rem;
  transform: rotate(-35deg);
}

/* S4：右中央〜やや下（L2とM3の間をつなぐ） */
.mesh-circle--11 {
  bottom: 6%;
  right: 30%;
  width: 8rem;
  transform: rotate(80deg);
}

/* S5：下中央付近（画面下方向の粒感） */
.mesh-circle--12 {
  bottom: 6%;
  left: 45%;
  width: 6rem;
  transform: rotate(20deg);
}


/* HEADER + HERO
============================== */
/* ヘッダー全体（ヒーローを含む） */
.site-header {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(../images/hands_typing.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--text);
}

.site-header:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--rgb-aqua);
  backdrop-filter: blur(3px);
}

/* ヘッダー内のラッパー */
.site-header_inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* =========================
  ナビゲーション
========================= */
.site-header-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  z-index: 2;
}

/* ハンバーガーボタン */
.header-menuToggle {
  position: fixed;
  right: 1.5rem;
  top: 1.5rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  border: 1px solid rgba(183, 198, 199, 0.2);
  width: 50px;
  height: 50px;
  box-shadow: var(--shadow);
  transition: all 0.3s;
}

/* ボタン内バー */
.header-menuToggle_bar {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 3px;
  background: var(--text);
  width: 45%;
  transition:
    transform 0.35s ease-in-out,
    top 0.35s ease-in-out,
    left 0.35s ease-in-out,
    opacity 0.35s ease-in-out;
}

.header-menuToggle_bar.--btn-menuBar-1 {
  top: 15px;
}

.header-menuToggle_bar.--btn-menuBar-2 {
  top: 23px;
}

.header-menuToggle_bar.--btn-menuBar-3 {
  top: 31px;
}

/* 開閉時の変形（is-open = 状態クラス） */
.header-menuToggle.is-open .--btn-menuBar-1 {
  top: 18px;
  left: 16px;
  transform: translateY(6px) rotate(-45deg);
  width: 40%;
}

.header-menuToggle.is-open .--btn-menuBar-2 {
  opacity: 0;
}

.header-menuToggle.is-open .--btn-menuBar-3 {
  top: 30px;
  left: 16px;
  transform: translateY(-6px) rotate(45deg);
  width: 40%;
}

.header-menuToggle:hover,
.header-menuToggle:active {
  background: rgba(255, 255, 255, 1);
  box-shadow: var(--icon-shadow);
}

/* グローバルナビ（スライドパネル） */
.header-menuList {
  position: fixed;
  top: 96px;
  right: -120%;
  transition: right 0.75s ease-in-out;
  list-style: none;
  background: rgba(255, 255, 255, 1);
  filter: drop-shadow(var(--shadow));
  width: 100%;
  font-size: 1.2rem;
  z-index: 2;
}

/* 開いた状態（is-open = JSで付与） */
.header-menuList.is-open {
  right: 0;
}

.header-menuItem {
  text-align: center;
}

.header-menuItem a {
  display: block;
  padding: 1rem 2rem;
}

/* Gナビのロゴ画像（メニュー内） */
.header-menuItem_logo {
  width: 120px;
}

/* hover時の背景 */
.header-menuItem a:hover,
.header-menuItem a:active {
  background: var(--mesh-gradient-sub);
}

/* =========================
  ヒーロー本体
========================= */
.hero-main {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ロゴ（FVタイトル） */
.hero-title {
  line-height: 1;
  font-size: 3rem;
  filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.3));
}

.--img-heroLogo {
  width: clamp(15rem, 12.944rem + 12.65vw, 28.125rem);
  height: auto;
}

/* =========================
  ヒーロー下のスクロール誘導
========================= */

/* hero 内で中央下に固定するコンテナ（位置決め専用） */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  /* X方向の中央寄せのみ */
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
  /* 通常は default */
  /* filter はコンテナには掛けない（レイアウト事故防止のため） */
}

/* hover 時はポインターだけ変える（transform は触らない） */
.hero-scroll:hover {
  cursor: pointer;
}

/* ラベル：hover したときだけバウンスさせる対象 */
.hero-scroll_label {
  font-weight: bold;
  margin-bottom: 0.4rem;
  display: inline-block;
  filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.3));
}

/* マウス操作がある環境だけ、hover でバウンスさせる */
@media (hover: hover) {
  .hero-scroll:hover .hero-scroll_label {
    animation: labelBounce 0.6s ease-in-out infinite;
  }
}

/* ラベル用バウンス（Y方向だけ動かす） */
@keyframes labelBounce {
  0% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(4px);
  }

  60%,
  100% {
    transform: translateY(0);
  }
}

/* 矢印：常時アニメーション＋視認性アップのシャドウ */
.--icon-arrowDown {
  width: 36px;
  opacity: 0.15;
  filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.3));
  animation: scrollArrowFlow 1.6s ease-in-out infinite;
}

/* 下向き矢印 流れるパルスアニメーション（現状のまま） */
@keyframes scrollArrowFlow {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0.2;
  }

  40% {
    transform: translateY(6px) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(10px) scale(1);
    opacity: 1;
  }
}


/* ABOUT
============================== */
.--img-aboutLogo {
  width: clamp(10rem, 8.434rem + 9.64vw, 20rem);
  height: auto;
  font-size: 2.4rem;
}

.about-textBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-desc {
  width: min(100% - 2rem, 64ch);
  padding: clamp(1rem, 0.687rem + 1.93vw, 3rem);
  border: 1px solid var(--text);
  margin: 2rem auto 0;
}

.about-concept {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-align: center;
  margin: clamp(2rem, 1.843rem + 0.96vw, 3rem) clamp(1rem, 0.687rem + 1.93vw, 3rem) clamp(1rem, 0.687rem + 1.93vw, 3rem);
}

.about-concept:before {
  display: block;
  content: '';
  width: 30px;
  height: 30px;
  margin-right: clamp(1rem, 0.687rem + 1.93vw, 3rem);
  border-top: 2px solid var(--text);
  border-left: 2px solid var(--text);
  transform: translateY(-14px);
}

.about-concept:after {
  display: block;
  content: '';
  width: 30px;
  height: 30px;
  margin-left: clamp(1rem, 0.687rem + 1.93vw, 3rem);
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: translateY(14px);
}

.--img-aboutTalk {
  display: block;
  width: clamp(7.5rem, 6.325rem + 7.23vw, 15rem);
  height: auto;
  margin: clamp(1rem, 0.843rem + 0.96vw, 2rem) auto;
}

.--img-aboutCreative {
  display: block;
  width: clamp(10rem, 8.434rem + 9.64vw, 20rem);
  height: auto;
  margin: clamp(1rem, 0.843rem + 0.96vw, 2rem) auto 0;
}


/* SERVICE
============================== */
.service-desc {
  width: min(100% - 2rem, 64ch);
  margin: 0 auto;
  padding: 0 clamp(1rem, 0.843rem + 0.96vw, 2rem) clamp(1rem, 0.843rem + 0.96vw, 2rem);
}

.--img-serviceTalk {
  display: block;
  width: clamp(10rem, 8.434rem + 9.64vw, 20rem);
  height: auto;
  margin: 0 auto clamp(1rem, 0.843rem + 0.96vw, 2rem);
}

.service-portfolio {
  width: min(100% - 2rem, 64ch);
  margin: 0 auto;
  text-align: right;
}

.--icon-arrowRight {
  width: 24px;
  height: auto;
  transform: translate(0, 1px) rotate(-90deg);
  ;
}

.--link-portfolio {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1px;
  color: var(--text);
  font-weight: bold;
}

.--link-portfolio::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0%;
  height: 1px;
  background: var(--text);
  transition: width 0.35s ease;
}

.--link-portfolio:hover::after,
.--link-portfolio:active::after {
  width: 100%;
}


/* FLOW
============================== */
.flow-preGuide {
  width: min(100% - 2rem, clamp(40ch, 60vw, 70ch));
  margin: 0 auto;
  margin-bottom: 2.5rem;
  color: var(--text);
}

.flow-guideLink {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1px;
  margin-top: 0.5rem;
  color: var(--text);
  font-weight: bold;
}

.flow-guideLink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0%;
  height: 1px;
  background: var(--text);
  transition: width 0.35s ease;
}

.flow-guideLink:hover::after,
.flow-guideLink:active::after {
  width: 100%;
}

.flow-accordionList {
  list-style: none;
  width: 96%;
  max-width: 600px;
  padding: 0 1rem;
  margin: 0 auto;
}

.flow-accordionList li {
  margin: 2rem 0;
}

.flow-step:hover,
.flow-step:active {
  box-shadow: 0 7px 10px rgba(64, 55, 52, 0.1);
}

.flow-stepTitle {
  background: var(--rgb-aqua);
  cursor: pointer;
  padding: 1rem 1.5rem;
  box-shadow: var(--shadow);
  /* transition: background 0.3s ease; */
  position: relative;
}

/* ＋／✕ アイコン部分 */
.flow-stepTitle:before,
.flow-stepTitle:after {
  position: absolute;
  content: '';
  width: 15px;
  height: 2px;
  background: var(--text);
  right: 1.5rem;
  top: 50%;
  transform-origin: center;
  transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out;
}

/* 通常時：＋ */
.flow-stepTitle:before {
  transform: translateY(-50%) rotate(0deg);
  /* 横棒 */
}

.flow-stepTitle:after {
  transform: translateY(-50%) rotate(90deg);
  /* 縦棒 */
}

/* 開いているとき：✕ */
.flow-stepTitle.close:before {
  transform: translateY(-50%) rotate(45deg);
}

.flow-stepTitle.close:after {
  transform: translateY(-50%) rotate(-45deg);
}

/* 中身：高さだけをスーッと変える */
.flow-stepBody {
  max-height: 0;
  overflow: hidden;
  background: var(--panel-bg-soft);
  box-shadow: var(--shadow);
  transition: max-height 0.4s ease;
}

.flow-stepBody-inner {
  padding: 1.5rem;
  background: var(--panel-bg-soft);
}




/* CONTACT
============================== */
.contact-inner {
  width: 96%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
}

.contact-infoDesc p {
  width: min(100% - 2rem, clamp(40ch, 60vw, 70ch));
  margin: auto;
}

.contact-infoBox {
  display: block;
}

/* icon List ========================= */
.contact-iconList {
  display: flex;
  justify-content: flex-end;
  width: 96%;
  max-width: 800px;
}

.contact-iconList a[class^="--btn-icon"] {
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.3s;
}

/* 画像アイコン共通（img） */
.contact-iconList img[class^="--img-icon"] {
  width: 50px;
  height: 50px;
  padding: 0.5rem;
  display: block;
}

/* =========================================================
  LINE
========================================================= */
.--btn-iconLine {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #06C755;
  border-radius: 8px;
  opacity: 0.6;
}

.--logo-iconLine {
  display: block;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 0;
  margin: 0;
  letter-spacing: 0.06em;
  line-height: 1;
  transform: translateX(1.45px);
}

.--btn-iconLine:hover,
.--btn-iconLine:active {
  opacity: 1;
  box-shadow: var(--icon-shadow);
}

/* =========================================================
  Instagram
========================================================= */
.--btn-iconInstagram {
  background-color: var(--ig-rgb-red);
  background-image: var(--ig-mesh-rgba);
  border-radius: 8px;
  opacity: 0.6;
}

.--btn-iconInstagram:hover,
.--btn-iconInstagram:active {
  background-image: var(--ig-mesh-hex);
  box-shadow: var(--icon-shadow);
  opacity: 1;
}

/* =========================================================
  X
========================================================= */
.--btn-iconX {
  background: #000;
  border-radius: 5px;
  opacity: 0.5;
  position: relative;
}

/* 以前 absolute を使っていた場合でも崩れないように統一 */
.--img-iconX {
  position: static;
  transition: all 0.3s;
}

.--btn-iconX:hover,
.--btn-iconX:active {
  opacity: 1;
  box-shadow: var(--icon-shadow);
}

/* =========================================================
  Chatwork
========================================================= */
.--btn-iconChatwork {
  background: var(--panel-bg-soft);
  border-radius: 5px;
}

.--img-iconChatwork {
  opacity: 0.5;
  transition: all 0.3s;
}

.--btn-iconChatwork:hover,
.--btn-iconChatwork:active {
  background: var(--icon-hover-bg);
  box-shadow: var(--icon-shadow);
}

.--btn-iconChatwork:hover .--img-iconChatwork,
.--btn-iconChatwork:active .--img-iconChatwork {
  opacity: 1;
}


form {
  display: block;
  width: 96%;
  height: 100%;
  margin: clamp(1rem, 0.922rem + 0.48vw, 1.5rem) auto clamp(2rem, 1.687rem + 1.93vw, 4rem);
  padding: 1rem;
  background: var(--bg);
  border: 1px solid rgba(183, 198, 199, 0.2);
  box-shadow: var(--shadow);
}

.required-mark {
  font-weight: bold;
  color: var(--color-red);
  vertical-align: middle;
}

input {
  width: 100%;
  display: block;
  background: var(--input-bg);
  padding: 0.5rem 1rem;
}

form p {
  margin-bottom: 2rem;
}

form p:last-child {
  margin-bottom: 0.5rem;
}

textarea {
  width: 100%;
  display: block;
  background: var(--input-bg);
  padding: 1rem;
}

input[type="submit"] {
  width: 60%;
  font-size: 1rem;
  font-weight: bold;
  background: var(--rgb-aqua);
  color: var(--text);
  border-radius: 5px;
  padding: 1rem 1.5rem;
  margin: 1rem auto;
  box-shadow: var(--shadow);
  transition: all 0.3s;
}

input[type="submit"]:hover,
input[type="submit"]:active {
  background: var(--color-aqua);
  box-shadow: 0 7px 10px rgba(64, 55, 52, 0.1);
}

/* CONTACT - honeypot 完全非表示 */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* FOOTER
============================== */
#footer {
  overflow: hidden;
  background: var(--mesh-gradient-sub);
  padding: clamp(1.5rem, 1.343rem + 0.96vw, 2.5rem) 0 1rem;
  text-align: center;
  font-size: 0.875rem;
  position: relative;
}

small {
  font-size: 1.2rem;
}

/* フッターロゴ */
.--img-footerLogo {
  width: clamp(5rem, 4.608rem + 2.41vw, 7.5rem);
  height: auto;
}


/* トップへ戻る（テキストリンク＋逆アロー） */
.l-pageTop {
  text-align: center;
  margin: 3rem 0 1.5rem;
}

.--link-pageTop {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.--link-pageTop:hover,
.--link-pageTop:active {
  opacity: 1;
}

/* 逆さまアロー（スクロールダウンの再利用） */
.--icon-arrowUp {
  width: 24px;
  height: auto;
  transform: rotate(180deg);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.--link-pageTop:hover .--icon-arrowUp {
  opacity: 1;
}



/* =========================
  RESPONSIVE
========================= */
@media (max-width: 600px) {
  .site-header {
    background-attachment: scroll;
    /* モバイルの挙動ケア用 */
  }

  .u-brSp {
    display: inline;
  }
}


/* ===============================
  THANKSページ（送信完了） - BASE
   =============================== */

/* thanks.html でフッターを常に最下部にするための土台 */
html {
  height: 100%;
}

/* thanks.html 専用レイアウト（body に .l-body が付いているページのみ） */
body.l-body {
  min-height: 100vh;
  /* 画面の高さぶんは必ず確保 */
  margin: 0;
  display: flex;
  /* 上から mesh-bg, main, footer を縦並び */
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  /* 横スクロール防止 */
}

/* メイン領域：フッター以外の高さをすべて受け持つ＋中央寄せ */
.contact-thanks {
  flex: 1;
  /* ← これで「残りの縦方向の余白」を全部使う */
  display: flex;
  align-items: center;
  /* 縦方向の中央 */
  justify-content: center;
  /* 横方向の中央 */
  padding: clamp(3rem, 2.53rem + 2.89vw, 6rem) 1rem;
  box-sizing: border-box;
}

/* 白いカード（元の .l-wrapper 相当） */
.contact-thanks_panel {
  width: min(100% - 2rem, 720px);
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 0;
}

/* カード内側の余白 */
.contact-thanks_inner {
  padding: 2.5rem 2rem 2.75rem;
}

/* タイトル「送信完了」 */
.contact-thanks_title {
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem);
  margin-bottom: 0.75rem;
}

/* サブタイトル「お問い合わせありがとうございました」 */
.contact-thanks_subTitle {
  font-size: 1rem;
  margin-bottom: 1.8rem;
}

/* 本文（説明ブロック） */
.contact-thanks_body {
  font-size: 0.95rem;
  line-height: 1.9;
}

/* 本文の段落 */
.contact-thanks_text {
  margin-bottom: 1.2rem;
}

/* 注意書き */
.contact-thanks_notice {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* トップへ戻るリンク行全体 */
.contact-thanks_back {
  text-align: center;
  font-weight: bold;
}

/* トップへ戻るリンク */
.contact-thanks_backLink {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--text);
  position: relative;
}

/* 下線のアニメーション（なくてもよければ削ってOK） */
.contact-thanks_backLink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.contact-thanks_backLink:hover::after,
.contact-thanks_backLink:focus-visible::after {
  transform: scaleX(1);
}


/* スマホ向けの細かい調整 */
@media (max-width: 600px) {
  .contact-thanks_inner {
    padding: 2rem 1.5rem 2.3rem;
  }

  .contact-thanks_title {
    font-size: 1.6rem;
  }

  .contact-thanks_subTitle {
    font-size: 0.95rem;
  }
}