/* --- 1. 基本設定・変数 --- */
:root {
  --ink: #0d0d0d;
  --muted: #888;
  --light: #f8f9fa;
  --border: #e2e0da;
  --cyan: #00d2ff;
  --white: #fff;
  --r999: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Noto Sans JP", sans-serif; color: var(--ink); line-height: 1.7; overflow-x: hidden; background: #000; }
a { text-decoration: none; }
.w { max-width: 1080px; margin: 0 auto; padding: 0 48px; width: 100%; position: relative; }
.tc { text-align: center; }
.bg-white { background: #fff; }

/* --- 2. 共通アニメーション --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .1s; }
[data-reveal][data-delay="2"] { transition-delay: .2s; }

/* --- 3. ヘッダー・ナビ --- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: 60px; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav__logo { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; font-weight: 900; color: #fff; }
.nav__logo em { color: var(--cyan); font-style: italic; margin-left: 4px; }
.nav__right-btn {
  display: flex; align-items: center; background: var(--cyan); color: #fff !important;
  font-weight: 700; font-size: 13px; padding: 8px 20px; border-radius: var(--r999);
}
.nav__right-btn img { width: 14px; margin-left: 8px; filter: brightness(0) invert(1); }

/* --- 4. HERO (画像画面右半分固定・文字重ね) --- */
.hero {
  background-color: #fff;
  width: 100%;
  overflow: hidden;
  /* --- ここから追加・修正 --- */
  padding: 50px 0; /* 上下に100pxずつ広めの余白を作ります（数値はお好みで） */
  min-height: 0; /* 画面の高さの80%以上を確保するようにします */
  display: flex;
  align-items: center;
  /* --- ここまで --- */
}

/* 2. 背景画像を全体に広げる */
.hero__right {
  flex: 0 0 85%; /* 残りの幅を確保 */
  position: relative;
  height: 500px; /* 画像の高さを指定（サイトに合わせて調整） */
  z-index: 1;
}

.hero__case-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%; /* 斜めにしても端が切れないよう少し広めに */
  height: 100%;
  
  /* --- ★ここがポイント：斜めのトリミング --- */
  /* polygon(上左, 上右, 下右, 下左) の座標を指定 */
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}

.hero__case-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 比率を保って領域を埋める */
  object-position: center; /* 画像の中央を見せる */
}

/* 3. コンテンツ（テキスト）を前面に出す */
.hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1080px; /* ここを .w と同じ 1080px に変更 */
  margin: 0 auto;
  padding: 0 48px;  /* 左右の余白も .w と合わせる */
}

/* 4. テキストの視認性を上げる（画像が明るい場合） */
.hero__left {
  flex: 0 0 50%; /* お好みの幅に調整 */
  padding-right: 0; /* テキストと画像の間隔 */
  z-index: 2; /* テキストを前面に */
}

/* 5. 分割レイアウトを解除する（もしflexなどで横並びになっていれば） */
.hero__content-split {
  display: flex;
  align-items: center; /* 上下中央揃え */
  justify-content:space-between; /* 左はテキスト、右は画像 */
}
.hero__h1 {
  color: #0d0d0d !important;
  font-size: clamp(32px, 5vw, 68px);
  font-weight: 900;
  line-height: 1.1; /* 行間を少し詰めてインパクトを出す */
  margin-bottom: 24px;
}

.hero__h1 .accent-fluid {
  background: linear-gradient(90deg, #00d2ff, #ffb7ff, #ffe6a1, #00d2ff);
    background-size: 400% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fluid-gradient 12s ease infinite;
    display: inline-block;
    white-space: nowrap;
}
@keyframes fluid-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero__desc {
  font-size: clamp(18px, 2vw, 22px);
  color: #333;
  font-weight: 500;
  line-height: 1.6;
  max-width: 550px; /* 文字が画像に被りすぎないよう幅を制限 */
}
/* PC用とスマホ用の改行制御 */
.u-sp-br { display: none; } /* 基本（PC）はスマホ用改行を隠す */
.u-pc-br { display: inline; } /* 基本（PC）はPC用改行を出す */

/* --- 5. スクロールロゴ（共通） --- */
.scrolling-logos {
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
  background: #fff;
  display: flex; /* 2つのinnerを横に並べる */
}

.scrolling-logos__inner {
  display: flex;
  flex-shrink: 0;
  /* linear（一定速度）を指定することで、つなぎ目がスムーズになります */
  animation: scroll-left 30s linear infinite;
}

.scrolling-logos__inner img {
  height: 80px; 
  width: auto;
  margin-right: 60px; /* ★ここ！PCでのロゴ同士の間隔を作ります */
  vertical-align: middle;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  /* HTMLに2つのinnerがある場合、-100%で完璧にループします */
  100% { transform: translateX(-100%); }
}
/* --- 6. 見出し・共通 --- */
.sec-h {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(24px, 3vw, 36px); font-weight: 900;
  color: #0d0d0d !important; letter-spacing: -2px; margin-bottom: 2rem;
}

/* --- 7. PAIN SOLUTION (事例) --- */
/* 数字の横の「件」を小さくする設定 */
.cc__num-sub {
  font-size: 0.4em; /* 数字の40%の大きさに設定 */
  margin-left: 4px;
  vertical-align: baseline;
  font-family: "Noto Sans JP", sans-serif; /* 数字とフォントを分けて読みやすく */
}

/* 念のため数字部分の折り返しを防ぐ */
.ps-card .cc__num {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.pain-solution { background: #fff; padding: 100px 0; color: var(--ink); }
.pain-solution .w { display: flex; flex-direction: column; align-items: center; }
.sub-txt { display: block; font-size: clamp(18px, 2.5vw, 24px); font-weight: 700; color: #666; margin-top: 15px; letter-spacing: 0; }

.ps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; width: 100%; max-width: 1100px; }
.ps-card { background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 40px 30px; text-align: center; display: flex; flex-direction: column; }
.ps-card .pcard__num { font-family: "Bricolage Grotesque", sans-serif; font-size: 64px; font-weight: 900; color: var(--cyan); line-height: 1; margin-bottom: 20px; }
.ps-card h3 { font-size: 24px; font-weight: 900; color: var(--ink); margin-bottom: 16px; line-height: 1.4; }
.ps-issue-desc { font-size: 15px; color: #666; line-height: 1.7; text-align: left; margin-bottom: 5px; min-height: 4.5em; }

.ps-card .cc__flow { margin: 0 auto 30px; width: 100%; max-width: 210px; padding: 10px 10px; background: #37bbd7; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cc__bridge--white { font-size: 17px; font-weight: 400; color: #fff !important; line-height: 1; }
.cc__arrow { color: #fff; font-size: 17px; font-weight: 900; line-height: 1; transform: translateY(2px); }

.cc__result-thumb { width: 100%; height: 220px; object-fit: cover; border-bottom: 1px solid rgba(0,0,0,0.05); }
.ps-card .cc__num-wrap { padding: 25px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cc__special-result { font-size: 42px; font-weight: 900; color: #ff9912; line-height: 1.1; white-space: nowrap; letter-spacing: -1px; }
.ps-card .cc__num { font-family: "Bricolage Grotesque", sans-serif; font-size: 56px; font-weight: 900; color: #ff9912; line-height: 1; }
.ps-card .cc__num-unit { font-size: 16px; color: #666; font-weight: 700; }
.cc__result-desc { font-size: 15px; color: #ff9912; font-weight: 300; width: 100%; }

/* --- 8. MERIT --- */
.merit { background: #fff; padding: 70px 0 70px; color: var(--ink); position: relative; overflow: hidden; z-index: 1; }
.merit .sec-h { color: #333 !important; }
.merit__flow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 80px; position: relative; z-index: 10; }
.mf__step { display: flex; align-items: center; flex: 1; }
.mf__node { 
  flex: 1; 
  background: #ffffff !important; 
  /* 【修正】高さを最低160pxで固定し、中身が増えても揃うようにする */
  min-height: 160px; 
  height: 100%; /* 親の高さに合わせる */
  padding: 20px 10px; 
  text-align: center; 
  border: 1px solid var(--border); 
  border-radius: 16px; 
  font-size: 14px; 
  font-weight: 700; 
  display: flex; 
  flex-direction: column;
  align-items: center; 
  justify-content: center; 
  position: relative; 
  z-index: 10;
}
.mf__node-icon img { height: 40px; width: auto; margin-bottom: 12px; }
.mf__conn { color: var(--cyan); font-weight: 900; font-size: 24px; margin: 0 10px; }
.mf__result { flex: 1.5; background: #2f8ad5; color: #fff; padding: 20px; border-radius: 24px; }
.mf__result-item { display: flex !important; align-items: center; margin-bottom: 12px; font-weight: 600; line-height: 1.4;     font-size: 15px;}
.mf__check { width: 20px; height: 20px; margin-right: 12px; flex-shrink: 0; }
p.more-cases__text {
    margin: 60px 0 0;
    font-size: 26px; /* サイズを大幅にアップ */
    line-height: 1.6;
    color: #333;
}
p.more-cases__text strong {
    color: var(--cyan); /* 「きっと見つかります」をブランドカラーで強調 */
}
/* --- 9. WHATS INSIDE (追加) --- */
.whats-inside { padding: 80px 0 40px; background: #fff; }
.inside-box { max-width: 600px; margin: 0 auto;   background: #fffdf0;
    border: 2px solid #ffdbad;border-radius: 24px; padding: 50px 40px 25px; position: relative; }
.inside-box__ttl { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); background: #ffaa62; color: #fff; padding: 10px 40px; border-radius: var(--r999); font-size: 20px; font-weight: 900; white-space: nowrap; }
.inside-list { list-style: none; }
.inside-list li { display: flex; align-items: center; gap: 15px; margin-bottom: 24px; }
.inside-list__check { flex-shrink: 0; width: 26px; height: 26px; background-color: #ffaa62; border-radius: 50%; position: relative; }
.inside-list__check::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.inside-list p strong { font-size: 18px; font-weight: 700; color: var(--ink); }

/* --- 10. DECORATIONS --- */
.bg-deco { position: absolute; z-index: -1; background-size: cover; border-radius: 12px; opacity: 0.15; pointer-events: none; }
.deco-1 { width: 320px; height: 240px; top: -380px; left: -120px; transform: rotate(-15deg); background-image: url("contest1.jpg"); }
.deco-2 { width: 260px; height: 180px; top: -80px; right: -60px; transform: rotate(10deg); background-image: url("contest2.jpg"); }
.deco-3 { width: 300px; height: 220px; bottom: -120px; left: -100px; transform: rotate(-8deg); background-image: url("contest3.jpg"); }

/* --- 11. FORM --- */
.form-sec { padding: 40px 0 100px; background: #fff; }
.form-box { max-width: 650px; margin: 0 auto; background: var(--light); padding: 60px; border-radius: 32px; border: 1px solid var(--border); }
.form-box__ttl { font-size: 24px; font-weight: 900; margin-bottom: 32px; text-align: center; }
.form-info-msg { font-size: 15px; text-align: center; margin-bottom: 24px; display: block; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ff.full { grid-column: 1 / -1; }
.fl { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.finput { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px; }
.f-checkbox-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.fsub { width: 100%; background: var(--cyan); color: #fff; padding: 20px; border-radius: var(--r999); border: none; font-weight: 900; font-size: 18px; margin-top: 32px; cursor: pointer; }
.form-trust__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.form-trust__badges span { background: #e6ffed; color: #28a745; font-size: 12px; padding: 4px 12px; border-radius: var(--r999); border: 1px solid #c3e6cb; }
.form-trust {
  margin-top: 24px;
}

.f-consent {
  display: flex;
  align-items: flex-start; /* チェックボックスを上揃えに */
  gap: 12px;               /* チェックボックスと文字の間隔 */
  cursor: pointer;
  line-height: 1.6;        /* 行間の確保 */
}

.f-consent input[type="checkbox"] {
  width: 18px;             /* チェックボックスのサイズを安定させる */
  height: 18px;
  margin-top: 4px;         /* テキストの1行目中央に合わせる微調整 */
  flex-shrink: 0;          /* 潰れ防止 */
}

.f-consent__text {
  font-size: 14px;
  color: #333;
}

.f-consent__text small {
  display: block;          /* 注釈を改行させる */
  margin-top: 4px;         /* 同意文と注釈の間の余白 */
  color: #666;
  font-size: 12px;
  line-height: 1.4;
}

/* --- 12. FOOTER --- */
footer { padding: 40px; text-align: center; background: #000; color: #555; font-size: 12px; }


/* --- 13. RESPONSIVE (Smartphone) --- */
@media (max-width: 768px) {
  /* 画面全体の横揺れを強制防止 */
  html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
  }
  body {
    background: #ffffff !important;
  }
  
  /* ナビゲーション */
  .nav {
    height: 54px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .nav__logo {
    font-size: 14px;
    white-space: nowrap;
  }
  .nav__right-btn {
    font-size: 11px;
    padding: 6px 12px;
    min-width: max-content;
  }

  /* コンテンツ幅 */
  .w {
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
  }

  /* --- HEROエリア：はみ出し防止 --- */
  .hero {
    position: relative;
    width: 100%;
    display: block;
    min-height: 0;
    overflow: hidden; /* ★重要：これがないとはみ出します */
  }
  .hero__in {
    position: relative;
    z-index: 2;
    padding: 0 20px;
  }
  .hero__right {
    position: absolute;
    top: 0;       /* セクションの最上部から */
    right: 0;     /* 右端にピタッと */
    width: 40%;   /* 横幅はお好みで（50〜55%くらいが綺麗です） */
    height: 100%; /* ★重要：セクションの高さ一杯に広げる */
    z-index: 1;
    flex: none;
    overflow: hidden;
  }

  .hero__case-visual {
    width: 100%;
    height: 100%; 
    
    /* 斜めのカットを維持（数値を変えると角度が変わります） */
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
  }
  .hero__h1 {
    font-size: 26px;
    line-height: 1.3;
	padding: 25px 0 0px;
  }
  .hero__desc {
    font-size: 15px;
    max-width: 70%;
    text-shadow: 0 0 10px #fff;
  }
  .hero__content-split {
    display: block;
  }

  /* --- ロゴ --- */
  .scrolling-logos {
    padding: 0;
  }
  .scrolling-logos__inner img {
    height: 40px;
    margin-right: 20px;
  }

  /* --- 事例カード：1列に強制 --- */
  .ps-grid {
    grid-template-columns: 1fr; /* ★重要：2列から1列へ */
    gap: 20px;
    width: 100%;
  }
  .ps-card {
    padding: 24px 15px;
  }
  .cc__special-result {
    font-size: 28px;
    white-space: normal;
  }

  /* --- メリットフロー：縦並びに強制 --- */
  .merit__flow {
    flex-direction: column; /* ★重要：横並びから縦並びへ */
    gap: 0;
  }
  .mf__step {
    flex-direction: column;
    width: 100%;
  }
  .mf__node {
    min-height: 100px !important;
    width: 100%;
    margin-bottom: 0;
  }
  .mf__conn {
    display: block !important;
    transform: rotate(90deg); /* 矢印を下に向けます */
    margin: 5px 0 !important;
  }
  .mf__result {
    width: 100%;
    padding: 20px;
    margin-top: 20px;
  }

  /* 資料・フォーム */
  .inside-box {
    width: 100%;
    padding: 40px 15px 0;
  }
  .form-box {
    padding: 40px 15px;
    width: 100%;
  }
  .frow {
    grid-template-columns: 1fr; /* フォームも1列に */
  }
  p.more-cases__text {
    font-size: 18px;
    margin-top: 40px;
  }
	/* 改行の出し分け */
  .u-sp-br { display: inline; } /* スマホでは「なら、」の後の改行を出す */
  .u-pc-br { display: none; }   /* スマホではPC用の改行を消す */
}