@charset "UTF-8";
:root {
  /* フォントスタックを変数に格納 */
  --font-main: 'Noto Sans JP', sans-serif;
  --font-accent: 'Akshar', sans-serif;
  --font-normal: 'Akshar', 'Noto Sans JP', sans-serif;
  /* 併記する場合（英数字はAkshar、日本語はNoto Sansにしたい時） */
  --font-mixed-01: sans-serif, 'Akshar', 'Noto Sans JP';
  --font-mixed-02: 'Akshar', 'Noto Sans JP';
  --work-main-color:#E63862;
  --work-bg-pink: #FDECF2;
}

body {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: clamp(14px, 2.5vw, 16px);
  letter-spacing: 0.05rem;
  color: #222222;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  body {
    letter-spacing: normal;
    line-height: 1.3rem;
  }
}

/* ヘッダーセクション */
header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #FFF;
  height: 96px;
  display: flex;
  align-items: center;
  padding: 0 32px 0 0;
}
@media screen and (max-width: 768px) {
  header {
    padding: 0;
    height: 84px;
  }
}

.header-btn-area {
  display: flex;
  justify-content: space-between; /* 左右に振り分け */
  align-items: center; /* 上下中央揃え */
}

.header-logo {
  padding: 0 0 0 32px;
}
@media screen and (max-width: 768px) {
  .header-logo {
    max-width: none;
    width: 156px;
  }
}

/* ボタンを横に並べるエリア */
.header-nav {
  display: flex;
  gap: 15px; /* ボタン同士の間隔 */
}
@media screen and (max-width: 768px) {
  .header-nav {
    display: none;
  }
}

/* ボタンの共通設定 */
.header-nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  border-radius: 27px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  gap: 8px;
}

.hum-area {
  display: none;
}
@media screen and (max-width: 768px) {
  .hum-area {
    display: block;
  }
}

/* 赤いボタン（資料ダウンロード） */
.btn-download {
  background-color: var(--work-main-color);
  color: #fff;
  width: 192px;
  transition: opacity 0.3s;
}

/* 黒いボタン（お問い合わせ） */
.btn-contact {
  background-color: #222222;
  color: #fff;
  width: 160px;
  transition: opacity 0.1s;
}

/* アイコンのサイズ調整 */
.icon {
  width: 18px; /* アイコンの大きさ 👁️ */
  height: auto;
}

.hero-section {
  position: relative; /* 疑似要素の基準にする */
  background-color: #fff;
  /* 元の背景画像がある場合はここを url(../img/bg.jpg) に戻してね */
  background-image: url(../img/bg.jpg);
  background-size: cover;
  background-position: center;
  padding: 56px 32px;
  height: auto;
  display: block;
  overflow: hidden; /* 斜め装飾のはみ出しを防ぐ */
  /* --- 装飾1：ドットパターン（背景全体に薄く） --- */
}
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#FFCDDF 1px, transparent 1px); /* CSSでドットを作成 */
  background-size: 15px 15px; /* ドットの間隔 */
  opacity: 0.3; /* 薄くする */
  pointer-events: none; /* 下の要素をクリックできるように */
  z-index: 0;
}
.hero-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFCDDF;
  pointer-events: none; /* 下の要素をクリックできるように */
  z-index: 0;
  clip-path: polygon(100% 0, 100% 100%, 50% 100%, 65% 0); /* (x y)、左下、左上、右上、右下 */
}
@media screen and (max-width: 768px) {
  .hero-section::after {
    clip-path: polygon(0% 60%, 0 100%, 100% 100%, 100% 90%);
  }
}
@media screen and (max-width: 768px) {
  .hero-section {
    padding: 40px 24px;
  }
}

/* 中身が装飾の下に隠れないように z-index を指定 */
.hero-contents-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  -moz-column-gap: 40px;
       column-gap: 40px;
  justify-content: center;
  /* ...以下、元のコードと同じ... */
}

/* 左側全体のコンテナ調整 */
.hero-left-content {
  flex: 1;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* フォームの高さ436pxに対して中央寄せ */
  min-height: 436px;
}
@media screen and (max-width: 768px) {
  .hero-left-content {
    min-height: auto;
    max-width: none;
    width: 100%;
  }
}

/* 1. 月桂冠エリア：画像の上に文字を重ねる */
.badge-row {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
}
@media screen and (max-width: 480px) {
  .badge-row {
    margin: 0 auto 25px auto;
    gap: 3px;
  }
}

.badge-unit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
}

.badge-bg {
  width: 220px;
  height: auto;
}
@media screen and (max-width: 480px) {
  .badge-bg {
    width: 190px;
  }
}

.badge-info {
  position: absolute; /* 画像の中央に文字を固定 */
  display: flex;
  flex-direction: column;
  text-align: center;
  line-height: 1.2;
  font-family: var(--font-mixed-02);
}

.badge-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--work-main-color);
}
@media screen and (max-width: 380px) {
  .badge-label {
    font-size: 10px;
  }
}

.badge-label-inside {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.badge-val {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 500;
  color: var(--work-main-color);
  margin-top: -5px;
}

/* 2. メインコピー画像：ここが最重要 */
.main-visual-text {
  width: 100%;
  margin-bottom: 15px;
}

.main-visual-text img {
  width: 100%; /* 親の幅（720px）に合わせて伸び縮み */
  height: auto;
  display: block;
}

/* 3. ピンクの帯 */
.pink-ribbon {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content; /* 中身の文字幅に合わせる */
  background-color: var(--work-main-color);
  color: #fff;
  font-weight: 500;
  font-size: clamp(15px, 2.5vw, 27px);
  padding: 5px;
  margin: 20px 0;
  line-height: 1.2;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .pink-ribbon {
    margin: 10px auto 20px auto;
    text-align: center;
    width: 100%;
  }
}

/* 4. 丸い数値 */
/* 丸いアイコン本体 */
/* 親：横に並べる */
.circles {
  display: flex;
  gap: 15px; /* 丸の間のスキマ */
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .circles {
    margin-top: 0px;
    gap: 5px;
  }
}

/* 子：正円を作る */
.circle {
  max-width: 130px;
  width: 100%;
  aspect-ratio: 1/1; /* 【修正】高さを固定せず、正方形を保つ設定 */
  border: 2px solid #E63862;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column; /* 中の文字を縦に並べる */
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
}
@media screen and (max-width: 480px) {
  .circle {
    font-size: 10px;
  }
}

.circle-font01 {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--work-main-color);
}
@media screen and (max-width: 400px) {
  .circle-font01 {
    font-size: 10px;
  }
}

/* 数字だけ大きく */
.pink-num {
  font-size: clamp(28px, 2.5vw, 30px);
  font-weight: 500;
  font-family: var(--font-accent);
  color: var(--work-main-color);
}

.hero-contents-right {
  height: auto; /* 高さは中身に任せろ */
  display: block;
}
@media screen and (max-width: 1000px) {
  .hero-contents-right {
    display: none;
  }
}

.form {
  width: 496px;
  max-width: 100%;
  height: 436px; /* 窓の高さ（外枠） */
  display: flex; /* 追加：中身を縦に並べる制御 */
  box-sizing: border-box;
  overflow: hidden; /* 追加：親からはみ出る分は強制カット */
}
@media screen and (max-width: 1000px) {
  .form {
    display: none;
  }
}

.form-title {
  padding: 8px;
  border-radius: 16px 16px 0 0;
  text-align: center;
  font-size: 15px;
  background-color: var(--work-main-color);
  color: #FFF;
}

/* --- フォーム土台：436px --- */
.form {
  width: 496px;
  height: 436px;
  background-color: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 親ははみ出し禁止 */
  box-sizing: border-box;
  font-size: 14px;
}

.form-main-contents {
  flex: 1;
  padding: 20px;
  display: flex;
  overflow: hidden; /* ボタンを固定するためここは hidden */
}

.form-scroll-inner {
  height: 100%; /* ★ここで窓の高さを固定。これで絶対にはみ出る */
}

.form-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.form-group.align-start {
  align-items: flex-start;
}

.label-container {
  width: 190px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap !important; /* ★絶対改行禁止 */
}

.badge-required {
  background-color: var(--work-main-color);
  color: #FFF;
  border-radius: 5px;
  padding: 3px;
  font-size: 12px;
}

.form-input, .check-list {
  flex: 1;
  box-sizing: border-box;
}

.form-input {
  height: 56px;
  border: 1px solid #AAA69F;
  border-radius: 6px;
  padding: 0 12px;
}

/* --- 下段：横いっぱい --- */
.full-row {
  width: 100%;
  list-style: none;
}

.policy-box {
  width: 100%;
  height: 60px;
  overflow-y: scroll;
  background: #f8f8f8;
  border: 1px solid #eee;
  padding: 10px;
  font-size: 10px;
  margin-top: 10px;
}

/* ★指示：ロボット PC時305px / スマホ100% */
.full-row-02 {
  display: flex;
  justify-content: center;
}

.recap-mock {
  width: 100%;
  max-width: 305px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
}

@media screen and (max-width: 768px) {
  .recap-mock {
    width: 100% !important;
  }
}
.recap-left {
  font-size: 14px;
  display: flex;
}

.recap-right {
  font-size: 11px;
  text-align: right;
}

/* チェックボックス (12px / 黒) */
.check-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.check-item input[type=checkbox] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  position: relative;
  flex-shrink: 0;
}

.check-item input[type=checkbox]:checked {
  background: #000;
  border-color: #000;
}

.check-item input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- ポリシーBOX：高さを決めて中身を溢れさせる --- */
.policy-box {
  width: 100%;
  height: 60px; /* ★高さを固定 */
  overflow-y: scroll !important; /* ★autoではなくscroll */
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 10px;
  box-sizing: border-box;
  /* iOS/Safari対策：慣性スクロールを有効にしつつバーを表示 */
  -webkit-overflow-scrolling: touch;
}

/* ★★★【核心】スクロールバーを「消させない」強制描画設定 ★★★ */
/* 1. バー全体の幅を確保 */
.policy-box::-webkit-scrollbar,
.form-list-scroll::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
  display: block !important;
}

/* 2. バーの通り道（レール）を可視化 */
.policy-box::-webkit-scrollbar-track,
.form-list-scroll::-webkit-scrollbar-track {
  background: #eee !important;
  border-radius: 10px;
}

/* 3. 動くバー（つまみ）をグレーで描画 */
.policy-box::-webkit-scrollbar-thumb,
.form-list-scroll::-webkit-scrollbar-thumb {
  background: #ccc !important; /* ★カンプ通りのグレー */
  border-radius: 10px;
  border: 2px solid #eee; /* レールとの間に隙間を作って浮き立たせる */
}

/* 4. マウスが乗った時に少し濃くする */
.policy-box::-webkit-scrollbar-thumb:hover,
.form-list-scroll::-webkit-scrollbar-thumb:hover {
  background: #999 !important;
}

/* --- ボタンにアイコンを横並びにする（再調整） --- */
.submit-btn {
  width: 100%;
  height: 56px;
  background: #E63862;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
}

.btn-icon {
  width: 22px; /* カンプに合わせて少し調整 */
  height: auto;
}

/* 送信ボタン */
.submit-btn {
  width: 100%;
  height: 60px;
  background-color: var(--work-main-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* アイコンとの隙間 */
  cursor: pointer;
}

.btn-icon {
  width: 20px;
  height: auto;
}

.download-btn-sp a {
  display: none;
}
@media screen and (max-width: 768px) {
  .download-btn-sp a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    border-radius: 27px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    width: 100%;
    margin-top: 32px;
    gap: 8px;
  }
}

@keyframes horizontal-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.slider-container {
  display: flex;
  overflow: hidden;
  padding: 24px 0;
}
@media screen and (max-width: 768px) {
  .slider-container {
    padding: 16px 0;
  }
}

.slider-wrapper {
  display: flex;
  animation: horizontal-animation 30s linear infinite;
}

.slide {
  width: 96px;
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  .slide {
    width: 64px;
    height: auto;
  }
}

.slide img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.problem-container {
  display: flex;
  flex-direction: row; /* 横並び */
  gap: 24px; /* カード同士の間隔 */
  align-items: flex-start; /* 高さをコンテンツに合わせる */
  margin-top: 40px;
  font-family: var(--font-mixed-01);
  font-weight: 500;
  text-align: center;
  flex-wrap: wrap; /* 折り返しを許可する */
  justify-content: center;
}
.problem-card {
  width: 370px;
}
@media screen and (max-width: 768px) {
  .problem-card {
    width: 100%;
  }
}

.problem-img-box img {
  aspect-ratio: 16/9;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  width: 100%;
}

.problem-title-box {
  min-height: 5;
  vertical-align: top;
}

.problem-title-03 {
  font-size: clamp(16px, 2.5vw, 18px);
  font-weight: 700;
  line-height: 1.5em;
  margin-top: 32px;
  /* --- 追加：タイトルの高さを2行分で固定 --- */
  min-height: 3em;
  display: flex;
  align-items: center; /* 1行の時も上下中央に */
  justify-content: center;
}

.problem-text {
  font-size: 16px;
  font-weight: 400;
  margin-top: 10px;
  line-height: 1.8; /* 数値指定で固定 */
  text-align: justify; /* 両端揃えに */
  text-justify: inter-character;
}
@media screen and (max-width: 768px) {
  .problem-text {
    font-size: 14px; /* 12pxだと少し小さすぎて読みにくいかもしれません */
    text-align: left; /* スマホでは中央寄せにするのが一般的 */
  }
}

.solution {
  background-image: url(../img/bg.jpg);
  background-size: cover;
}

.solution-title {
  /* 背景色：左から右へのグラデーション */
  background: linear-gradient(to right, #f0869b, #E63862);
  color: #ffffff;
  padding: 40px 20px 40px; /* 下側に少し余裕を持たせる */
  text-align: center;
  /* 形状 */
  /* 座標: 左上(0 0), 右上(100 0), 右下(100 85), 中央下(50 100), 左下(0 85) */
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  width: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .solution-title {
    padding: 20px 20px 30px;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  }
}

.solution-title-inside {
  font-family: var(--font-main);
  font-size: clamp(18px, 2.5vw, 39px);
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: 0;
}

.solution-main-contents {
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.solution-inner {
  display: flex;
  align-items: center;
  max-width: 100%;
  gap: 32px;
  padding-top: 40px;
}
@media screen and (max-width: 768px) {
  .solution-inner {
    padding-top: 32px;
  }
}

/* --- 左側：デバイス画像エリア --- */
.solution-img {
  max-width: 487px;
}
@media screen and (max-width: 768px) {
  .solution-img {
    margin-top: 0;
  }
}

.solution-visual {
  flex: 1;
  text-align: center;
}

.solution-img {
  width: 100%; /* 基本は親の幅いっぱいに広がる */
  max-width: 487px; /* ★最大：これ以上はデカくならない（PC用） */
  min-width: 280px; /* ★最低：これ以上は小さくならない（スマホ用） */
  height: auto; /* 比率を崩さないためのお約束 */
}
@media screen and (max-width: 480px) {
  .solution-img {
    max-width: none;
    min-width: none;
    width: 100%;
  }
}

/* --- 右側：コンテンツエリア --- */
.solution-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.solution-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
@media screen and (max-width: 768px) {
  .solution-icon-container {
    flex-wrap: wrap;
    gap: 8px;
  }
}

.solution-circle {
  width: 125px;
  height: 125px;
  background-color: var(--work-main-color);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .solution-circle {
    width: 103px;
    height: 103px;
  }
}
@media screen and (max-width: 375px) {
  .solution-circle {
    width: 140px;
    height: 140px;
  }
}

.solution-icon {
  width: 45px;
  height: auto;
  margin-bottom: 4px;
}

.solution-label {
  font-family: var(--font-main);
  font-size: clamp(12px, 2.5vw, 15px);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .solution-label {
    font-size: 12px;
  }
}
@media screen and (max-width: 375px) {
  .solution-label {
    font-size: 14px;
  }
}

/* 説明文 */
.solution-text-box {
  width: 100%;
  text-align: center;
}

.solution-text {
  font-family: sans-serif;
  font-size: clamp(14px, 2.5vw, 18px);
  line-height: 1.8;
  color: #333;
  margin: 0;
  font-weight: 500;
  padding-top: 24px;
}

/* --- レスポンシブ --- */
@media screen and (max-width: 1000px) {
  .solution-inner {
    flex-direction: column; /* 縦並びに変更 */
  }
}
@media screen and (max-width: 415px) {
  .solution-icon-container {
    transform: scale(0.85); /* アイコン部分だけ縮小して収める */
    transform-origin: center;
  }
  .solution-text br {
    display: none;
  }
  .solution-text { /* スマホでは改行を無視して流す */ }
}
/* --- 5. Challenge Section --- */
.challenge {
  background-color: #fff;
  padding: 60px 0;
}

/* コンテナをGridレイアウトに変更 */
.challenge_container {
  display: grid;
  /* PC版：横に4つ並べる */
  grid-template-columns: repeat(4, 288px);
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.challenge_card {
  /* 幅はgrid側で制御するため、width: 288pxは削除（またはmax-widthに） */
  width: 100%;
  background-color: #fceef2;
  border-radius: 12px;
  padding: 24px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.challenge_header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.challenge_icon-img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

.challenge_title {
  color: var(--work-main-color);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

/* クラス名の揺れを統合して指定 */
.challenge_text,
.challenge_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  color: #222222;
  line-height: 1.7;
  text-align: center;
  margin: 0;
}

/* --- レスポンシブ設定 --- */
/* 1. タブレット版：2列 × 2段（1200px以下〜768px以上など） */
@media screen and (max-width: 1240px) {
  .challenge_container {
    /* 2列にする */
    grid-template-columns: repeat(2, 1fr);
    max-width: 650px; /* カードが広がりすぎないよう調整 */
    margin-left: auto;
    margin-right: auto;
  }
  .challenge_card {
    /* 2列のときはカードを少し横長にしても綺麗です */
    max-width: 100%;
  }
}
/* 2. スマホ版：1列（767px以下） */
@media screen and (max-width: 767px) {
  .challenge_container {
    /* 1列にする */
    grid-template-columns: 1fr;
    max-width: 450px;
  }
}
.work-section {
  background-color: var(--work-bg-pink);
  padding-top: 60px; /* 上だけpadding */
  padding-bottom: 0; /* 下は0にして密着させる */
  overflow: hidden; /* 横揺れ防止 */
}

.work-container {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 0 auto;
  box-sizing: border-box;
}

.work-inner {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.work-step-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* --- 吹き出しデザイン（1pxライン・一筆書きSVG） --- */
.work-step-balloon {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--work-main-color);
  font-family: var(--font-normal); /* 設定済みの変数を使用 */
  font-weight: 400;
  font-size: 16px;
  position: relative;
  margin-bottom: 10px;
  /* SVGによる途切れない1pxライン */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 180 50' preserveAspectRatio='none'%3E%3Cpath d='M5,0.5 H175 A4,4 0 0 1 179.5,4.5 V32.5 A4,4 0 0 1 175,36.5 H98 L90,48 L82,36.5 H5 A4,4 0 0 1 0.5,32.5 V4.5 A4,4 0 0 1 5,0.5 Z' fill='white' stroke='%23d65067' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-bottom: 8px;
}

/* コンテンツカード */
.work-step-content {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.work-step-title {
  background-color: var(--work-main-color);
  color: #fff;
  margin: 0;
  padding: 15px 10px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}

.work-step-body {
  padding: 20px 12px;
  text-align: center;
}

.work-step-icon {
  margin-bottom: 15px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-step-icon img {
  max-height: 100%;
  width: auto;
}

.work-step-text {
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  margin: 0;
  color: #333;
}

/* --- 中画面（1200px以下〜769px）：3列×2段レイアウト --- */
@media screen and (max-width: 1200px) {
  .work-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
  }
}
/* --- スマホ版（768px以下）：右側の余白を消したカルーセル仕様 --- */
@media screen and (max-width: 768px) {
  .work-container {
    padding-right: 0; /* 画面右端まで領域を広げる */
  }
  .work-inner {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 30px 0; /* 右paddingをなくし「切れ」を表現 */
    margin: 0;
    justify-content: flex-start;
    gap: 15px;
  }
  /* 最後までスクロールした時だけ右余白（20px）を出す */
  .work-inner::after {
    content: "";
    flex: 0 0 20px;
  }
  /* カスタムスクロールバー */
  .work-inner::-webkit-scrollbar {
    height: 8px;
  }
  .work-inner::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 10px;
  }
  .work-inner::-webkit-scrollbar-thumb {
    background: var(--work-main-color);
    border-radius: 10px;
  }
  .work-step-card {
    flex: 0 0 280px; /* 画面に対して少しはみ出るサイズ */
    scroll-snap-align: start;
  }
}
.conversion-section * {
  box-sizing: border-box;
}

.conversion-section {
  width: 100%;
  background-color: var(--work-main-color);
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1.5px, transparent 0.5px);
  background-size: 15px 15px;
  /* ★パディング（余白）を常に確保。これがスマホ時の「ボタンの両端の空き」になります */
}

.conversion-container {
  max-width: 1200px;
  margin: 0 auto;
}

.conversion-flex-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.conversion-lead {
  color: #fff;
  font-weight: bold;
  margin: 0;
  line-height: 1.4;
  /* 文字サイズは画面に合わせて可変（最大36px 〜 最小20px） */
  font-size: clamp(20px, 2.5vw, 35px);
  flex: 1 1 600px;
  text-align: left;
}

.conversion-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* --- PC版（769px以上）の設定 --- */
  width: 300px; /* 300px固定 */
  height: 64px;
  background-color: #ffeb3b;
  color: var(--work-main-color);
  text-decoration: none;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 700 !important;
  flex-shrink: 0;
}

.conversion-btn span {
  font-weight: 700 !important;
}

.conversion-icon img {
  width: 20px;
  height: auto;
}

/* --- レスポンシブ：ここから本番 --- */
/* 1. PC〜タブレット（衝突前に2段にする） */
@media (max-width: 1050px) {
  .conversion-flex-box {
    justify-content: center;
  }
  .conversion-lead {
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
}
/* 2. ★ご要望の768pxブレイクポイント設定 */
@media (max-width: 768px) {
  .conversion-btn {
    /* ★ボタンを100%にする。ただし、sectionのpadding(20px)があるので
    画面の両端からは20px浮いた状態で、綺麗に横いっぱいに広がります */
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    /* 文字サイズもスマホで見やすいように微調整 */
    font-size: 18px !important;
    height: 56px;
  }
}
/* 3. 最小幅320pxへの配慮（さらにパディングを維持） */
@media (max-width: 320px) {
  .conversion-section {
    padding: 40px 15px; /* 320pxのときは左右余白を15pxに少し詰めてボタンを広く */
  }
  .conversion-btn {
    font-size: 16px !important;
    gap: 8px;
  }
}
/* --- Reasonコンテンツ (PC版) --- */
.reason-content-wrapper {
  margin-top: 32px; /* 見出しとの間隔調整 */
}

.reason-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
@media screen and (max-width: 768px) {
  .reason-item {
    gap: 0px;
  }
}
.reason-item:last-child {
  margin-bottom: 0;
}
.reason-item.reason-reverse {
  flex-direction: row-reverse;
}

.reason-item.reason-reverse {
  flex-direction: row-reverse;
}

.reason-text-box {
  flex: 1;
}

.reason-image-box {
  flex: 1;
  text-align: center;
}

/* PC装飾 */
.reason-number {
  font-family: var(--font-accent);
  font-size: clamp(33px, 2.5vw, 47px);
  display: block;
  font-size: 56px;
  font-weight: bold;
  color: var(--work-main-color);
  line-height: 1;
  margin-bottom: 15px;
}

.reason-title {
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: bold;
  line-height: 1.4;
  color: #333;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .reason-item,
  .reason-item.reason-reverse {
    display: flex;
    /* ★重要：row-reverse を無視して画像を上にするため column-reverse を使用 */
    flex-direction: column-reverse;
    margin-bottom: 32px;
    gap: 20px;
  }
  .reason-text-box,
  .reason-image-box {
    width: 100%;
  }
  /* スマホ版：数字とタイトルの横並び */
  .reason-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
  }
}
.case-section {
  background-color: #FDECF2; /* 薄ピンク背景 */
  text-align: center;
  padding: 80px 0;
  /* リード文：スラッシュの吹き出し */
}
.case-section .case-lead {
  font-weight: bold;
  color: var(--work-main-color);
  margin-bottom: 40px;
  line-height: 1.6;
  text-align: center;
  font-size: clamp(16px, 2.5vw, 22px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 3.2em;
}
.case-section .case-lead .case-lead-inside {
  display: inline-block;
  position: relative;
  padding: 0 1.8em;
  width: 100%;
  max-width: 650px;
  width: 100%;
  font-weight: 700;
}
.case-section .case-lead .case-lead-inside::before, .case-section .case-lead .case-lead-inside::after {
  position: absolute;
  bottom: 0.2em;
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1;
  display: inline-block; /* rotateさせるために必要 */
}
.case-section .case-lead .case-lead-inside::before {
  content: "\\";
  left: 0;
  /* ★左スラッシュの角度調整：マイナス方向に振ると寝ます */
  transform: rotate(-15deg);
}
.case-section .case-lead .case-lead-inside::after {
  content: "/";
  right: 0;
  /* ★右スラッシュの角度調整：プラス方向に振ると寝ます */
  transform: rotate(15deg);
}
@media screen and (max-width: 1000px) {
  .case-section .case-lead .case-lead-inside {
    margin-top: 32px;
    padding: 0 1em;
  }
}
@media screen and (max-width: 768px) {
  .case-section .case-lead .case-lead-inside {
    max-width: 260px;
    padding: 0 1em;
    margin-top: 0;
  }
  .case-section .case-lead .case-lead-inside::before, .case-section .case-lead .case-lead-inside::after {
    bottom: 0.1em;
  }
}
.case-section {
  /* カテゴリーアイコン：PC 8列 / SP 3列 */
}
.case-section .case-category-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.case-section .case-category-list .category-item {
  width: 120px;
  height: 120px;
  background-color: var(--work-main-color);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(9px, 2.5vw, 11px);
  font-weight: bold;
  flex-shrink: 0;
}
.case-section .case-category-list .category-item img {
  width: 50px;
  height: auto;
  margin-bottom: 4px;
}
.case-section .case-category-list .category-item p {
  line-height: 1.2;
  margin: 0;
}
.case-section {
  /* 活用事例カード：PC 3列 */
}
.case-section .case-card-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.case-section .case-card-wrapper .case-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 影を少し強めにFigma再現 */
  max-width: 389px;
}
.case-section .case-card-wrapper .case-card .case-card-title {
  color: var(--work-main-color);
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.case-section .case-card-wrapper .case-card .case-card-img {
  width: 100%;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.case-section .case-card-wrapper .case-card .case-card-img img {
  width: 100%;
  height: auto;
  display: block;
}
.case-section .case-card-wrapper .case-card .case-card-text {
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  color: #333;
  margin: 0;
}
.case-section {
  /* --- レスポンシブ (1000px以下) --- */
}
@media screen and (max-width: 1000px) {
  .case-section .case-lead .case-lead-inside {
    max-width: 400px; /* 2行にする */
  }
  .case-section {
    /* アイコン：Figma通りの 3-3-2 並びを実現 */
  }
  .case-section .case-category-list {
    display: flex;
    justify-content: center;
    gap: 15px 10px; /* 横と縦の隙間 */
  }
  .case-section .case-category-list .category-item {
    width: 120px;
    height: 120px;
    font-size: 10px;
  }
  .case-section {
    /* カード：1列に並べる */
  }
  .case-section .case-card-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  .case-section .case-lead .case-lead-inside {
    max-width: 280px; /* 2行にする */
  }
}

.price-img {
  max-width: 483px;
  margin-top: 32px;
}
@media screen and (max-width: 768px) {
  .price-img {
    max-width: none;
    width: 80%;
    display: block;
    margin: 0 auto;
  }
}

.price-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  align-items: center;
}

.price-text-box {
  text-align: center;
}

.price-text-01 {
  font-family: var(--font-main);
  font-size: clamp(16px, 2.5vw, 24px);
  color: var(--work-main-color);
  font-weight: 700;
}

.price-text-02 {
  font-family: var(--font-main);
  font-size: clamp(14px, 2.5vw, 20px);
  font-weight: 500;
  margin-top: 16px;
}

.price-btn-box {
  margin: 48px auto 0 auto;
  display: flex;
  justify-content: center;
}

.btn-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 340px;
  height: 64px;
  background-color: var(--work-main-color);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  border-radius: 50px;
  box-sizing: border-box;
}
.btn-info_icon {
  width: 20px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .btn-info {
    width: 100%;
    max-width: none;
    height: 56px;
    font-size: 16px;
  }
}

.faq {
  background-color: var(--work-bg-pink);
}
.faq .faq-container {
  max-width: 1000px;
  margin: 40px auto 0;
  width: 100%;
}
.faq .faq-item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
  list-style: none;
}
.faq .faq-item:last-child {
  margin-bottom: 0;
}
.faq .faq-item[open] .faq-arrow {
  transform: translateY(-50%) rotate(0deg);
}
.faq .faq-item[open] .faq-question {
  border-bottom: 1px solid #eee;
}
.faq .faq-question {
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 700;
  padding: 24px 60px 24px 24px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.faq .faq-question::-webkit-details-marker {
  display: none;
}
.faq .faq-question .faq-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  width: 16px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 7l5-5 5 5' stroke='%23333' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.3s ease;
}
@media screen and (max-width: 768px) {
  .faq .faq-question {
    font-size: 16px;
    padding: 18px 50px 18px 16px;
  }
}
.faq .faq-answer {
  padding: 24px;
  font-size: clamp(12px, 2.5vw, 14px);
  line-height: 1.8;
  color: #333;
  background-color: #fff;
}
.faq .faq-answer p {
  margin: 0;
}
@media screen and (max-width: 768px) {
  .faq .faq-answer {
    padding: 18px 16px;
  }
}

/* --- 前段タイトルの閉じ忘れ修正（ここから全消去して貼り付けを！） --- */
.common-title-outer {
  text-align: center;
}

@media screen and (max-width: 768px) {
  .common-title-outer {
    margin-bottom: 30px;
  }
}
/* --- フッター共通 --- */
.exc-footer {
  background-color: #ffffff;
  width: 100%;
  color: #333333;
  font-family: sans-serif;
  overflow: hidden; /* はみ出し防止 */
}

.exc-footer_inner {
  display: flex;
  justify-content: center; /* 全体を中央寄せ */
  width: 100%;
  padding: 60px 32px;
  box-sizing: border-box;
}

.exc-footer_content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  max-width: 1200px; /* PC版の最大幅を設定 */
}

/* 住所エリア */
.exc-footer_info {
  flex: 0 0 auto;
  text-align: left;
}

.exc-footer_logo {
  margin-bottom: 25px;
}

.exc-footer_address {
  font-size: 12px;
  line-height: 1.8;
}

.exc-footer_office {
  font-weight: bold;
  font-size: 14px;
  margin: 0 0 5px 0;
}

/* メニューエリア */
.exc-footer_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  margin: 0 40px;
}

.exc-footer_nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.exc-footer_nav-list li {
  margin-bottom: 12px;
  font-size: 14px;
}

.exc-footer_nav-list a {
  text-decoration: none;
  color: #333333;
  transition: color 0.3s ease; /* ホバーじわっと効果 */
}

/* ★ホバー：ピンクに変身 */
.exc-footer_nav-list a:hover {
  color: #e63862;
}

/* 右グループロゴ */
.exc-footer_group img {
  max-width: 240px;
  height: auto;
  vertical-align: bottom;
}

/* ピンク帯（紅） */
.exc-footer_bottom {
  background-color: #e63862;
  color: #ffffff;
  width: 100%;
}

.exc-footer_bottom-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 32px;
  box-sizing: border-box;
  font-size: clamp(10px, 2.5vw, 12px);
  gap: 15px;
  text-align: center;
}

.exc-footer_policy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}

.exc-footer_policy-list a {
  color: #ffffff;
  text-decoration: underline;
  transition: opacity 0.3s ease, color 0.3s ease;
}

/* ★ホバー：白地の上のリンク（薄ピンク） */
.exc-footer_policy-list a:hover {
  color: #ffb1c1;
  text-decoration: none;
}

/* ==========================================
SP版（1000px以下）：左端揃え・中央配置
========================================== */
@media screen and (max-width: 1000px) {
  .exc-footer_inner {
    padding: 40px 32px;
  }
  .exc-footer_content-wrapper {
    flex-direction: column;
    align-items: flex-start; /* 中身の頭を左で揃える */
    width: -moz-fit-content;
    width: fit-content; /* 塊を中身の幅に固定 */
    margin: 0 auto; /* 塊を中央へ */
    gap: 40px;
  }
  .exc-footer_info, .exc-footer_nav, .exc-footer_group {
    width: 100%;
    text-align: left;
  }
  .exc-footer_nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px 24px;
    margin: 0;
  }
}
/*
=================================================================================

▼▼▼　ハンバーガーメニュー　▼▼▼

=================================================================================
*/
/* ▼▼ トグルボタン ▼▼ */
:root {
  --hamburger-size: 80px; /* ハンバーガーアイコンサイズ */
  --hamburger-line: 0.5; /* ハンバーガーアイコンの横線の長さ */
}

.hamburger_area {
  position: relative;
  z-index: 12;
}

.toggle_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 11;
  width: var(--hamburger-size);
  height: var(--hamburger-size);
  transition: all 0.5s;
  cursor: pointer;
  margin: 0 0 0 auto;
  /* border-radius: 50%; */
}

.toggle_btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  right: calc((99.99% - var(--hamburger-size) * var(--hamburger-line)) / 2);
  width: calc(var(--hamburger-size) * var(--hamburger-line));
  height: calc(var(--hamburger-size) * 0.06); /* ハンバーガーアイコンの縦線の長さ */
  border-radius: 50vmin;
  background: #E63862;
  transition: all 0.5s;
}

.toggle_btn span:nth-child(1) {
  transform: translateY(calc(var(--hamburger-size) * -0.2));
}

.toggle_btn span:nth-child(3) {
  transform: translateY(calc(var(--hamburger-size) * 0.2));
  font-size: calc(var(--hamburger-size) * 0.2);
}

/* オープン時 */
body.open .toggle_btn {
  box-shadow: none;
  background: none;
  color: #FFF;
}

body.open .toggle_btn span {
  background-color: #FFF;
}

body.open .toggle_btn span:nth-child(1) {
  transform: translateY(0) rotate(225deg);
}

body.open .toggle_btn span:nth-child(2) {
  transform: translateY(0) rotate(-225deg);
}

body.open .toggle_btn span:nth-child(3) {
  opacity: 0;
}

/* ▲ ３ライン目をMENU/CLOSEという文字に変更 ▲ */
/* ▲▲ トグルボタン ▲▲ */
/* ▼ グローバルナビ ▼ */
.gloval-nav {
  background-color: #E63862;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  position: fixed;
  z-index: 11;
  top: 0;
  bottom: 0;
  right: 0;
  padding: var(--hamburger-size) 1em 1em;
  transform: translateX(100%);
  transition: 1s all;
  width: 100vw;
  max-height: 100vh;
}

.gloval-nav .gloval_box {
  overflow-y: auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.gloval-nav ul.gloval_ul > li {
  opacity: 0;
  transform: translateX(-200px);
  transition: transform 0.6s ease, opacity 0.2s ease;
  color: #fff;
  margin-bottom: 24px;
}

.gloval-nav ul.gloval_ul > li:nth-child(2) {
  transition-delay: 0.1s;
}

.gloval-nav ul.gloval_ul > li:nth-child(3) {
  transition-delay: 0.2s;
}

.gloval-nav ul.gloval_ul > li:nth-child(4) {
  transition-delay: 0.3s;
}

.gloval-nav ul.gloval_ul > li:nth-child(5) {
  transition-delay: 0.4s;
}

.gloval-nav ul.gloval_ul > li:nth-child(6) {
  transition-delay: 0.5s;
}

.gloval-nav ul.gloval_ul > li:nth-child(7) {
  transition-delay: 0.6s;
}

.gloval-nav ul.gloval_ul > li:nth-child(8) {
  transition-delay: 0.7s;
}

.gloval-nav ul.gloval_ul > li:nth-child(9) {
  transition-delay: 0.8s;
}

.gloval-nav ul.gloval_ul > li:nth-child(n+10) {
  transition-delay: 0.9s;
}

.gloval-nav ul.gloval_ul > li > a {
  display: block;
  transition: color 0.6s ease;
  padding: 2rem 1em 2rem 0;
  color: inherit;
  display: flex;
}

/* open時 */
.open {
  overflow: hidden;
}

.open .gloval-nav {
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.6s;
}

.open .gloval-nav ul.gloval_ul > li {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1s ease, opacity 0.9s ease;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}
@media screen and (min-width: 769px) {
  .sp {
    display: none !important;
  }
}
.gloval-nav-download-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  border-radius: 27px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  width: 100%;
  color: #E63862;
  background-color: #FFF;
  width: 192px;
  font-weight: 700;
  gap: 8px;
}

.gloval-nav-mail-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  border-radius: 27px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  width: 100%;
  color: #FFF;
  background-color: #333333;
  width: 192px;
  font-weight: 700;
  gap: 8px;
}

/* ▲ グローバルナビ ▲ */
.common-title-outer {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .common-title-outer {
    margin-bottom: 30px;
  }
}

.common-title-inside {
  list-style: none;
  padding: 0;
  margin: 0;
}

.common-title-01 {
  font-family: var(--font-normal);
  font-size: 16px;
  font-weight: 500;
  color: var(--work-main-color);
  line-height: 1.2;
  text-align: center;
}

/* 日本語のメイン見出し：Noto Sans JPを適用（Aksharに日本語はないため） */
.common-title-02 {
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 700;
  color: var(--work-main-color);
  margin-top: 10px;
  text-align: center;
  line-height: 1.2;
}

.common-padding {
  padding: 120px 32px;
}
@media screen and (max-width: 768px) {
  .common-padding {
    padding: 40px 32px;
  }
}
@media screen and (max-width: 374px) {
  .common-padding {
    padding: 32px 16px;
  }
}

.common-padding-02 {
  padding: 40px 32px;
}
@media screen and (max-width: 374px) {
  .common-padding-02 {
    padding: 32px 16px;
  }
}

.container1300 {
  max-width: 1300px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .container1300 {
    max-width: none;
    width: 100%;
  }
}

.container1200 {
  max-width: 1200px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .container1200 {
    max-width: none;
    width: 100%;
  }
}

.hover-opacity {
  transition: opacity 0.3s;
}
.hover-opacity:hover {
  opacity: 0.8;
}

/* --- CTAボタンのホバー時の文字色固定 --- */
.header-nav a:hover,
.header-nav a:hover span,
.btn-download:hover,
.btn-contact:hover,
.conversion-btn:hover,
.btn-info:hover {
  color: #ffffff !important; /* 文字が青くなるのを防ぎ、白で固定 */
  text-decoration: none !important; /* 下線が出るのを防ぐ */
}

/* 黄色いボタン（conversion-btn）だけは文字色が赤なので、個別に上書き */
.conversion-btn:hover {
  color: var(--work-main-color) !important;
}

.indent-box .indent {
  padding-left: 1em;
  text-indent: -1em;
}

/* --- 改行コントロール --- */
/* デフォルト（PC）では改行を無効化 */
.sp-only-br {
  display: none;
}

/* 768px以下（SP）になったら改行を有効化 */
@media screen and (max-width: 1000px) {
  .sp-only-br {
    display: block; /* または inline */
  }
}
/* 余白 */
.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-40 {
  padding-top: 40px;
}

.pd-20 {
  padding: 20px;
}

.pd-40 {
  padding: 40px;
}
@media (max-width: 768px) {
  .pd-40 {
    padding: 20px;
  }
}

.pd-60 {
  padding: 60px;
}
@media (max-width: 768px) {
  .pd-60 {
    padding: 30px 10px;
  }
}/*# sourceMappingURL=style.css.map */