/*
Theme Name: THREE ARROWS
Theme URI: 
Description: TikTokビジネス支援のテーマ
Author: Your Name
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: threearrows
*/

:root {
  --font-primary: "Noto Sans JP", sans-serif;
}

/* ベーススタイル */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  font-family: var(--font-primary);
  zoom: 0.85;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div,
button,
input,
select,
textarea {
  font-family: var(--font-primary) !important;
}

/* リセットとベース設定 */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-primary);
  background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
  position: relative;
  overflow-x: hidden;
}

/* 背景画像用のコンテナ */
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  zoom: 1.39;
}

/* 上部の固定背景 */
.top-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  opacity: 0.3;
  z-index: -1;
  background-image: url("./assets/images/PC_back_line.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

/* 下部の固定背景 */
.bottom-background {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  background-image: url("./assets/images/PC_back_white.jpg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}

/* アニメーション背景 */
.animated-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  animation: fadeInOut 15s infinite;
}

.bg-1 {
  animation-delay: 0s;
  background-image: url("./assets/images/PC_back1.jpg");
}

.bg-2 {
  animation-delay: 5s;
  background-image: url("./assets/images/PC_back2.jpg");
}

.bg-3 {
  animation-delay: 10s;
  background-image: url("./assets/images/PC_back3.jpg");
}

@keyframes fadeInOut {
  0%,
  45%,
  100% {
    opacity: 0;
  }
  15%,
  30% {
    opacity: 1;
  }
}

.main-content {
  max-width: 1412px;
  margin: 0 auto;
  position: relative;
}

/* title-sectionのコンテナスタイル */
.title-section {
  margin-top: px;
  width: 100%;
  position: relative;
  overflow: visible;
}

.title-content {
  padding: 0 1rem;
  max-width: 1412px;
  margin: 0 auto;
  position: relative;
}

/* コンテンツラッパーのスタイル */
.content-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1412px; /* 800pxから1412pxに変更 */
  width: 100%;
}

/* 画像を重ねるためのコンテナ */
.title-images-container {
  position: relative;
  width: 100%;
  height: auto;
}

/* Group 27の画像を下に配置 */
.group-27-image {
  position: absolute;
  top: 203px;
  left: 0;
  max-width: 1200px;
  height: auto;
  z-index: 1; /* 下層に配置 */
}

/* タイトル画像を上に配置 */
.title-image {
  position: relative;
  z-index: 2; /* 上層に配置 */
  max-width: 1200px;
  height: auto;
}

/* Group 27のアニメーション用スタイル */
@keyframes revealFromLeft {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

.group-27-image {
  position: absolute;
  top: 203px;
  left: 0;
  width: 1200px;
  height: auto;
  z-index: 1;
  clip-path: inset(0 100% 0 0); /* 初期状態では完全に隠す */
  animation: revealFromLeft 1.5s ease-out forwards;
}

/* title-images-containerのoverflow制御を削除 */
.title-images-container {
  position: relative;
  width: 100%;
  height: auto;
}

.mockup-video {
  position: absolute;
  top: 290px; /* aaa-1-imageと同じ位置指定を継承 */
  right: -80px;

  width: auto;
  height: auto;
  z-index: 3;
  transform: rotate(13deg) scale(1.5); /* scaleを追加して90%に縮小 */
  transform-origin: center center;
}

.mockup-video img {
  max-width: 902px;
}

.title-description {
  margin-top: 22px;
  color: #0f1c80;
  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 45px;
  letter-spacing: 2.64px;
}

.mobile-text {
  display: none;
}
/* 相談ボタン - 元のスタイルを維持 */

.consultation-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  width: 566px;
  height: 86.4px;
  flex-shrink: 0;
  border-radius: 81px;
  background: #ee1d52;
  box-shadow: 4.5px 4.5px 9px 0px rgba(163, 164, 165, 0.7);
  text-decoration: none;
  position: relative;
  z-index: 3; /* スマートフォン画像の上に表示 */

  /* テキストスタイル */
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 52.25px;
  letter-spacing: 1.96px;

  /* ホバーエフェクト */
  transition: opacity 0.3s ease;
}

.consultation-button:hover {
  opacity: 0.9;
}

.mobile-button {
  display: none;
}

/* ミッションセクションのスタイル */
.mission-section {
  margin-top: 153px;
  max-width: 1412px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.mission-title {
  display: flex;
  justify-content: left;
}

.mission-image {
  max-width: 700px;
  height: auto;
  width: 100%;
}

.mission-subtitle {
  margin-top: 15px;
  color: #ee1d52;
  font-family: "Inter", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 55px;
  letter-spacing: 4.16px;
  text-align: left;
}

.mission-statement {
  margin-top: 50px;
  color: #0f1c80;
  font-family: "Inter", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 4.16px;
  text-align: center;
}

.mission-diagram {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  max-width: 1412px;
  margin: 0 auto;
}

.mission-element {
  width: 607px;
  height: 88.35px;
  background: #0f1c80;
  border-radius: 61.845px;
  color: #fff;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 88.35px;
  letter-spacing: 4.16px;
}

.mission-connections {
  position: absolute;
  top: 90.15px;
  max-width: 985px;
  z-index: -1;
}

.mission-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1307px;
  margin-top: 70px;
  gap: 100px;
}

.concerns-section {
  margin-top: 162px;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
}

.concerns-container {
  width: 1412px;
  height: 963px;
  flex-shrink: 0;
  border-radius: 20px;
  background: #fff;
  position: relative;
  box-sizing: border-box;
}

.concerns-title {
  margin-top: 70px;
  position: relative;
}

.title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 83px;
}

.title-text {
  color: #ee1d52;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 2.66px;
  white-space: nowrap;
}

.line-decoration {
  width: 176px;
  height: 5px;
  background-color: #69c9d0;
  flex-shrink: 0;
}

.concerns-list {
  display: flex;
  flex-direction: column;
  gap: 17.3px;
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 64px;
}

.concern-item {
  padding: 0;
  background: none;
  max-width: 700px;
}

.concern-item.concern-right {
  margin-left: auto;
}

.concern-image {
  max-width: 100%;
  height: auto;
  display: block;
}

/* お悩みセクションのスタイル */
.concerns-section {
  margin-top: 162px;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
}

.concerns-container {
  width: 1412px;
  height: 963px;
  flex-shrink: 0;
  border-radius: 20px;
  background: #fff;
  position: relative;

  box-sizing: border-box;
}

.concerns-title {
  margin-top: 70px;
  position: relative;
}

.title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 83px; /* 装飾線とテキストの間隔 */
}

.title-text {
  color: #ee1d52;
  text-align: center;
  font-family: var(--font-primary);
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 2.66px;
  white-space: nowrap;
}

.line-decoration {
  width: 176px;
  height: 5px;
  background-color: #69c9d0;
  flex-shrink: 0;
}

/* 悩みリストのスタイル */
.concerns-list {
  display: flex;
  flex-direction: column;
  gap: 17.3px;
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 64px;
}

.concern-item {
  padding: 0;
  background: none;
  max-width: 700px;
}

.concern-item.concern-right {
  margin-left: auto;
}

.concern-image {
  max-width: 100%;
  height: auto;
  display: block;
}

/* concern-itemのアニメーション用スタイル */
@keyframes slideUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.concern-item {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}

/* 左側の要素用 */
.concern-item:not(.concern-right).animate {
  animation: slideUp 0.6s ease-out forwards;
}

/* 右側の要素用（少し遅延を付ける） */
.concern-item.concern-right.animate {
  animation: slideUp 0.6s ease-out 0.3s forwards;
}

/* アニメーション順序を制御するための遅延 */
.concern-item:nth-child(3).animate,
.concern-item:nth-child(4).animate {
  animation-delay: 0.2s;
}

.concern-item:nth-child(5).animate,
.concern-item:nth-child(6).animate {
  animation-delay: 0.4s;
}

.triangle {
  position: absolute;
  left: 50%;
  top: -110px; /* 位置を上に移動 */
  transform: translateX(-50%);
  max-width: 130px;
  /* 高さを増やして両方の白枠をまたぐように */
  z-index: 2;
}

.triangle svg {
  width: 100%;
  height: 100%;
}

/* アニメーション用のクラスとキーフレーム */
@keyframes triangleSlideDown {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 三角形の基本スタイルを更新 */
.triangle,
.service-triangle,
.flow-triangle {
  opacity: 0;
  transform: translateY(-50px);
}

/* アニメーション適用時のクラス */
.triangle.animate,
.service-triangle.animate,
.flow-triangle.animate {
  animation: triangleSlideDown 0.8s ease-out forwards;
}

/* 既存のスタイルを維持しながら、position: relativeを追加 */
.solution-container,
.service-triangle-container,
.flow-triangle-container {
  position: relative;
  overflow: visible;
}

.solution-container {
  width: 1412px;
  height: 207px;
  flex-shrink: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0px 0px 11.4px 0px #fff;
  margin-top: 49px;
  position: relative;
  overflow: visible; /* 変更：三角形がはみ出すように */
}

/* スマートフォン画像のスタイル */
.phone-image {
  position: absolute;
  bottom: -360px; /* 位置調整 */
  left: -300px; /* 位置調整 */
  max-width: 1055.84px; /* サイズ調整 */

  z-index: 1;
}

.phone-image img {
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.solution-section {
  padding: 0 1rem;
  display: flex;
  justify-content: center;
}

.solution-image {
  position: absolute;
  left: 514px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 797px; /* 幅を797pxに指定 */
  height: auto; /* アスペクト比を維持 */
}

/* サービスセクションのスタイル */
.service-section {
  margin-top: 286px;
  max-width: 1412px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

/* タイトル画像のスタイル */
.service-title {
  display: flex;
  justify-content: left;
}

.service-image {
  max-width: 683px;
  height: auto;
  width: 100%;
  margin-top: 40px;
}

/* サービスについて */
.service-subtitle {
  margin-top: 15px;
  color: #ee1d52;
  font-family: var(--font-primary);
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 55px;
  letter-spacing: 4.16px;
  text-align: left;
  font-family: var(--font-primary);
}

/* デスクトップ表示用のスタイル */
.service3-mobile-content {
  display: none;
}

.service1-container {
  display: flex;
  align-items: flex-start;
  gap: 70px; /* 画像との間隔 */
  margin-top: 41px;
}

.service1-image {
  max-width: 611px;
  height: auto;
  width: 100%;
}

.service1-content {
  flex: 1;
}

.service1-header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
}

.service1-number {
  margin-top: 11px;
  color: #0f1c80;
  font-family: Inter;
  font-size: 60px;
  font-style: normal;
  font-weight: 600;
  line-height: 55px;
  letter-spacing: 3px;
}

.service1-title {
  margin-top: 17px;
  color: #0f1c80;
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 1.6px;
}

.service1-description {
  margin-top: 14px;
  width: 760px;
  color: #0f1c80;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 33px;
  letter-spacing: 1px;
  margin: 0;
}

.service2-container,
.service3-container {
  display: flex;
  align-items: flex-start;
  gap: 70px;
  margin-top: 41px;
}

.service2-image,
.service3-image {
  max-width: 611px;
  height: auto;
  width: 100%;
}

.service2-content,
.service3-content {
  flex: 1;
}

.service2-header,
.service3-header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
}

.service2-number,
.service3-number {
  margin-top: 11px;
  color: #0f1c80;
  font-family: Inter;
  font-size: 60px;
  font-style: normal;
  font-weight: 600;
  line-height: 55px;
  letter-spacing: 3px;
}

.service2-title,
.service3-title {
  margin-top: 17px;
  color: #0f1c80;
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 1.6px;
}

.service2-description,
.service3-description {
  margin-top: 14px;
  width: 760px;
  color: #0f1c80;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 33px;
  letter-spacing: 1px;
  margin: 0;
}

/* サービスのテキストコンテンツ */
.service-text-content {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
}

.service-description {
  white-space: normal; /* 追加 */
  width: 760px;
  color: #0f1c80;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 33px;
  letter-spacing: 1px;
  margin: 0;
}

.service-description.expanded {
  display: none;
}

.service-triangle-container {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  width: 100%;
}

.service-triangle {
  width: 104px;
  height: 88px;
  flex-shrink: 0;
}

.service-triangle svg {
  width: 100%;
  height: 100%;
}

.service-message-container {
  margin-top: 46px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.service-message-content {
  display: flex;
  align-items: center;
  gap: 29px;
}

.service-message {
  color: #0f1c80;
  text-align: center;
  font-family: Inter;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 68px;
  letter-spacing: 2.8px;
  margin: 0;
}

.line-left,
.line-right {
  width: 45px;
  height: 99.5px;
  flex-shrink: 0;
}

/* サービスメッセージのアニメーション */
@keyframes messageSlideUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes linesDraw {
  0% {
    transform: translateY(50px);
    opacity: 0;
    stroke-dashoffset: 103;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* 初期状態 */
.service-message,
.line-left,
.line-right {
  opacity: 0;
  transform: translateY(50px);
}

/* 線のアニメーション用スタイル */
.line-left path,
.line-right path {
  stroke-dasharray: 103;
  stroke-dashoffset: 103;
}

/* アニメーション適用時 */
.service-message.animate {
  animation: messageSlideUp 0.8s ease-out forwards;
}

.line-left.animate {
  animation: messageSlideUp 0.8s ease-out forwards;
}

.line-left.animate path {
  animation: linesDraw 1s ease-out 0.3s forwards;
}

.line-right.animate {
  animation: messageSlideUp 0.8s ease-out forwards;
}

.line-right.animate path {
  animation: linesDraw 1s ease-out 0.3s forwards;
}

/* アニメーションの順序制御 */
.line-left.animate {
  animation-delay: 0.2s;
}

.service-message.animate {
  animation-delay: 0.4s;
}

.line-right.animate {
  animation-delay: 0.6s;
}

.service-details-container {
  margin-top: 55px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.service-details-box {
  margin-top: 45px;
  width: 1412px;
  height: 397px;
  flex-shrink: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0px 0px 11.4px 0px #fff;
  display: flex;
  flex-direction: column; /* 追加：縦方向のフレックスボックス */
  align-items: center; /* 追加：中央揃え */
  padding-top: 69.7px;
  box-sizing: border-box;
}

.service-details-image {
  max-width: 1136.5px;
  height: auto;
  position: static; /* 変更：絶対位置指定を解除 */
}

.service-details-text {
  margin-top: 25.55px;
  color: #0f1c80;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 1px;
  text-align: center;
}

.service-cta-button {
  margin-top: 39.8px;
  width: 779.4px;
  height: 86.4px;
  flex-shrink: 0;
  border-radius: 81px;
  background: #ee1d52;
  box-shadow: 4.5px 4.5px 9px 0px rgba(163, 164, 165, 0.7);
  text-decoration: none; /* リンクの下線を削除 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-cta-text {
  width: 747px;
  height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 52.25px;
  letter-spacing: 3.64px;
}

/* ホバー効果を追加（オプション） */
.service-cta-button:hover {
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.strength-title-wrapper {
  margin-top: 151px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 66px;
}

.strength-title {
  color: #ee1d52;
  text-align: center;
  font-family: Inter;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 2.8px;
  margin: 0;
}

.strength-line {
  width: 329px;
  height: 5px;
  flex-shrink: 0;
  background: #69c9d0;
}

/* 強みの画像コンテナ更新 */
.strength-images-container {
  display: grid;
  grid-template-columns: repeat(2, 691px);
  gap: 30px;
  max-width: 1412px;
  margin: 35px auto 0 auto;
  grid-auto-rows: 1fr; /* 各行の高さを均等に */
}

/* strength-itemのposition設定を追加 */
.strength-item {
  width: 691px;
  min-height: 520px; /* 最小の高さを設定 */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 200 Group画像用の新しいスタイル */
.strength-number-badge {
  position: absolute;
  width: 285.84px;
  height: 285.84px;

  flex-shrink: 0;
  left: -75px; /* strongleft.pngより左に配置 */
  top: -63px; /* strength-lineからの距離 */
  z-index: 2; /* strongleft.pngより前面に表示 */
}

.strength-image {
  max-width: 100%;
  height: auto;
  /* 背景画像を使用する場合 */
  background-size: cover;
  background-position: center;
  /* または、<img>タグを使用する */
}

.strength-image.left {
  background: url("./assets/images/strongleft.png") lightgray -67.604px -76.012px /
    109.784% 148.57% no-repeat;
}

.strength-image.right {
  background: url("./assets/images/strongright.png") lightgray -67.604px -76.012px /
    109.784% 148.57% no-repeat;
}

.strength-item-title {
  margin-top: 40px;
  color: #0f1c80;
  font-family: Inter;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1.6px;
  margin-bottom: 20px; /* タイトルと本文の間隔を統一 */
}

.strength-item-text {
  color: #0f1c80;
  font-family: Inter;
  font-size: 20px;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 1px;
  margin-bottom: px;
}
/* 展開ボタンのスタイル */
.expanded-content {
  display: none;
  padding: 20px;
  color: #0f1c80;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 1px;
}

.strength-text-content {
  flex-grow: 1; /* 残りのスペースを埋める */
  display: flex;
  flex-direction: column;
}

/* 右側のテキストのスタイル */
.strength-item:last-child .strength-item-text {
  margin-top: 0; /* 右側のテキストの上マージンを削除 */
  min-height: 280px; /* テキストの最小高さを設定 */
}

.strength-item-text {
  width: 657px;
  /* height: 69px; 削除 */
  /* flex-shrink: 0; 削除 */
  color: #0f1c80;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

#fullText {
  display: none;
}

.expand-button {
  width: 336px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 15px;
  opacity: 0.65;
  background: #fff;
  border: none;
  cursor: pointer;
  margin: 20px 0 0;
  display: block;

  /* テキストスタイル */
  color: #0f1c80;
  text-align: center;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 2.6px;
}

.expand-button:hover {
  opacity: 0.8;
}

/* WORKSセクションの基本スタイル */
.works-section {
  margin-top: 30px;
  max-width: 1412px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
  position: relative;
}

/* タイトル画像のスタイル */
.works-title {
  display: flex;
  justify-content: left;
}

.works-image {
  max-width: 395px;
  height: auto;
}

/* 運用実績テキストのスタイル */
.works-subtitle {
  margin-top: 15px;
  color: #ee1d52;
  font-family: "Inter", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 55px;
  letter-spacing: 4.16px;
  text-align: left;
  margin-bottom: 0px;
}

/* モックアップのコンテナ全体 */
.works-mockups {
  display: flex;
  justify-content: center;
  gap: 45px;
  flex-wrap: nowrap;
  max-width: 1412px;
  margin: 0 auto;
}

/* 各モックアップのコンテナ */
.works-mockup-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc((100% - 100px) / 3); /* 3等分して45px間隔 */
  min-width: 430px; /* 最小幅を設定 */
}

/* モックアップ本体 */
.works-mockup {
  margin-top: 50px;
  position: relative;
  width: 430px;
  height: 866.8px;
  flex-shrink: 0;
}

/* モックの白枠背景 */
.mockup-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* サムネイル画像 */
.works-thumbnail {
  position: absolute;
  top: 56.4px;
  left: 15px;
  width: 385px;
  height: 784.1px;
  object-fit: cover;
  z-index: 2;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

/* 成果表示部分のスタイル */
.works-result-wrapper {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* 装飾線のスタイル */
.decoration-left,
.decoration-right {
  width: 22px;
  height: 58px;
  flex-shrink: 0;
}

.decoration-left {
  margin-right: 10px;
}

.decoration-right {
  margin-left: 10px;
}

/* 成果テキストのスタイル */
.works-result {
  color: #0f1c80;
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: 2px;
  text-align: center;
}

/* 結果の各行のスタイル */
.result-line {
  display: block;
  text-align: center;
  margin: 5px 0;
}

.result-line span {
  display: inline-block;
  position: relative;
}

/* 黄色い下線のスタイル */
.result-line span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 20px;
  background: #fff300;
  width: 100%;
  z-index: -1;
}

/* クライアント情報のスタイル */
.works-client-info {
  margin-top: 20px;
  text-align: center;
}

.works-account-type {
  width: 324px;
  height: 37px;
  border-radius: 50px;
  opacity: 0.8;
  background: #0f1c80;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 1px;
}

.works-client-name {
  margin-top: 16px;
  color: #0f1c80;
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 2.8px;
  text-align: center;
}

/* CTAボタンのスタイル */
.works-cta-button {
  margin-top: 85px;
  width: 779.4px;
  height: 86.4px;
  flex-shrink: 0;
  border-radius: 81px;
  background: #ee1d52;
  box-shadow: 4.5px 4.5px 9px 0px rgba(163, 164, 165, 0.7);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.works-cta-text {
  width: 747px;
  height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 52.25px;
  letter-spacing: 3.64px;
}

/* ホバーエフェクト */
.works-cta-button:hover {
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.works-result-wrapper {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0; /* 初期状態は非表示 */
  transform: translateY(50px); /* 初期位置を下に */
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* バウンス効果のある遷移 */
}

/* アニメーション適用時のスタイル */
.works-result-wrapper.animate {
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 28px;
}

/* 装飾線のアニメーション */
.decoration-left,
.decoration-right {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: 0.2s; /* テキストの後に表示 */
}

.decoration-left.animate,
.decoration-right.animate {
  opacity: 1;
  transform: translateY(-10px); /* 元の位置に戻す */
}

/* 成果テキストのアニメーション */
.works-result {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.works-result.animate {
  opacity: 1;
  transform: translateY(0);
}

/* 各行のアニメーション */
.result-line {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.result-line.animate {
  opacity: 1;
  transform: translateY(0);
}

/* 各行の遅延を設定 */
.result-line:nth-child(1) {
  transition-delay: 0.1s;
}
.result-line:nth-child(2) {
  transition-delay: 0.2s;
}
.result-line:nth-child(3) {
  transition-delay: 0.3s;
}

/* クライアントインタビューセクション */
.client-interview-section {
  margin-top: 153px;
  max-width: 1412px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.client-interview-title {
  display: flex;
  justify-content: center;
}

.client-interview-title .section-title {
  color: #EE1D52;
  text-align: center;
  font-family: var(--font-primary);
  font-size: 48px;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 2.66px;
  margin: 0;
}

.client-interview-subtitle {
  color: #0f1c80;
  text-align: center;
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 1.2px;
  margin: 30px 0 50px 0;
}

.client-interview-video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 800px;
}

.client-interview-video {
  width: 100%;
  max-width: 450px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* デスクトップ用のデフォルトスタイル */
.price-section {
  margin-top: 151px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  position: relative;
  z-index: 1;
}

.price-title,
.price-subtitle {
  width: 100%;
  max-width: 1412px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

.price-subtitle {
  margin-top: 15px;
  color: #ee1d52;
  font-family: "Inter", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 55px;
  letter-spacing: 4.16px;
  text-align: left;
  font-family: var(--font-primary);
}

.price-container {
  width: 100%;
  max-width: 1412px;
  height: 540px;
  flex-shrink: 0;
  border-radius: 20px;
  background: #fff;
  position: relative;
  margin: 41px auto 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.price-image {
  max-width: 690px;
  height: auto;
}

/* 料金セクションのスタイル */
.price-desktop-container {
  width: 1412px;
  height: 540px;
  flex-shrink: 0;
  border-radius: 20px;
  background: #fff;
  position: relative;
  margin-top: 41px; /* 費用と流れから41px */
  box-sizing: border-box;
  margin-bottom: 100px;
}

.price-content-title {
  padding-top: 74px; /* 白枠の中から74px（marginからpaddingに変更） */
  position: relative;
}

/* その他のスタイルは変更なし */
.price-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 72px;
}

.price-title-text {
  color: #0f1c80;
  text-align: center;
  font-family: Inter;
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 2.66px;
}

.price-line-decoration {
  width: 329px;
  height: 5px;
  background-color: #69c9d0;
  flex-shrink: 0;
}

/* サブタイトル（オーダーメイドの説明）のスタイル */
.price-subtitle-text {
  margin-top: 9px;
  color: #ee1d52;
  text-align: center;
  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 0.72px;
}

/* 契約条件のコンテナ */
.price-condition-container {
  display: flex;
  align-items: center;
  margin-top: -18px;
  justify-content: center;
  gap: 20px; /* タイトルと説明文の間隔 */
}

/* 契約条件タイトルのスタイル */
.price-condition-title {
  color: #0f1c80;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 1px;
}

/* 契約条件の説明文のスタイル */
.price-condition-description {
  display: flex;
  width: 539px;
  height: 45px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #0f1c80;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 55px;
  letter-spacing: 0.8px;
}

/* 料金プランのコンテナ */
.price-plan-container {
  display: flex;
  justify-content: center; /* 中央揃え */
  margin-top: -10px; /* 必要に応じて調整 */
}

/* 画像のスタイル */
.priceflow-image {
  max-width: 990px;
  max-width: 100%;
  height: auto;
}

/* タイトルラッパーのスタイル調整 */
.flow-title-wrapper {
  width: 100%;
  max-width: 1412px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 115px;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(7px);
}

.flow-section-title {
  color: #ee1d52;
  text-align: center;
  font-family: Inter;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 2.8px;
  margin: 0;
}

.flow-line {
  width: 216px;
  height: 5px;
  flex-shrink: 0;
  background: #69c9d0;
}

/* フローグリッドのスタイル */
.flow-grid-container {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(2, 691px); /* 2列 */
  gap: 30px;
  justify-content: center;
  max-width: 1412px;
  margin-left: auto;
  margin-right: auto;
}

.flow-item-title {
  color: #0f1c80;
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 1.6px;
  margin: 0;
  width: 590px;
  text-align: left;
}

/* 白枠のスタイル修正 */
.flow-item {
  width: 691px;
  height: 235px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 0; /* 角の丸みを削除 */
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 説明文のスタイル */
.flow-description {
  width: 615px;
  height: 97px;
  flex-shrink: 0;
  color: #0f1c80;
  font-family: Inter;
  font-size: 19px;
  font-style: normal;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 1px;
  margin: 0;
  margin-top: 13px; /* タイトルとの間隔を調整 */
}

/* 三角形のコンテナスタイル */
.flow-triangle-container {
  position: relative;
  width: 100%;
  max-width: 1412px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}

.flow-triangle {
  width: 104px;
  height: 88px;
  flex-shrink: 0;
  position: absolute;
  left: 654px;
}

.flow-triangle svg {
  width: 100%;
  height: 100%;
}

.flow-message-container {
  margin-top: 120px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.flow-message-content {
  display: flex;
  align-items: center;
  gap: 29px;
}

.flow-message {
  color: #0f1c80;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: 2.8px;
  margin: 0;
}

.line-left,
.line-right {
  width: 45px;
  height: 99.5px;
  flex-shrink: 0;
}

/* フローメッセージのアニメーション */
@keyframes flowMessageSlideUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes flowLinesDraw {
  0% {
    transform: translateY(50px);
    opacity: 0;
    stroke-dashoffset: 103;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* flow-message-contentの子要素の初期状態 */
.flow-message-content svg,
.flow-message {
  opacity: 0;
  transform: translateY(50px);
}

/* 線のアニメーション用スタイル */
.flow-message-content svg path {
  stroke-dasharray: 103;
  stroke-dashoffset: 103;
}

/* アニメーション適用時 */
.flow-message.animate {
  animation: flowMessageSlideUp 0.8s ease-out forwards;
}

/* 左の線のアニメーション */
.flow-message-content svg:first-child.animate {
  animation: flowMessageSlideUp 0.8s ease-out forwards;
}

.flow-message-content svg:first-child.animate path {
  animation: flowLinesDraw 1s ease-out 0.3s forwards;
}

/* 右の線のアニメーション */
.flow-message-content svg:last-child.animate {
  animation: flowMessageSlideUp 0.8s ease-out forwards;
}

.flow-message-content svg:last-child.animate path {
  animation: flowLinesDraw 1s ease-out 0.3s forwards;
}

/* アニメーションの順序制御 */
.flow-message-content svg:first-child.animate {
  animation-delay: 0.2s;
}

.flow-message.animate {
  animation-delay: 0.4s;
}

.flow-message-content svg:last-child.animate {
  animation-delay: 0.6s;
}

.flow-service-details-box {
  margin-top: 55px; /* 上のテキストからの距離 */
  width: 100%;
  max-width: 1412px;
  margin-left: auto;
  margin-right: auto;
  height: 397px;
  flex-shrink: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0px 0px 11.4px 0px #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 69.7px;
  box-sizing: border-box;
}

.flow-service-details-image {
  max-width: 1136.5px;
  height: auto;
}

.flow-service-details-text {
  margin-top: 25.55px;
  color: #0f1c80;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 1px;
  text-align: center;
}

.flow-service-cta-button {
  margin-top: 39.8px;
  width: 779.4px;
  height: 86.4px;
  flex-shrink: 0;
  border-radius: 81px;
  background: #ee1d52;
  box-shadow: 4.5px 4.5px 9px 0px rgba(163, 164, 165, 0.7);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow-service-cta-text {
  width: 747px;
  height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 52.25px;
  letter-spacing: 3.64px;
}

/* ホバー効果を追加（オプション） */
.flow-service-cta-button:hover {
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

/* FAQセクションのスタイル */
.faq-section {
  margin-top: 150px; /* flow-service-details-box からの距離 */
  width: 100%;
  max-width: 1412px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

.faq-title {
  display: flex;
  justify-content: flex-start;
}

.faq-image {
  max-width: 222px;
  height: auto;
}

.faq-subtitle {
  margin-top: 5px;
  color: #ee1d52;
  font-family: var(--font-primary);
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 55px;
  letter-spacing: 4.16px;
  text-align: left;
  margin-bottom: 65px;
}

/* 質問と回答のコンテナ */
.faq-question,
.faq-answer {
  display: flex;
  align-items: center;
}

/* Q.とA.のスタイル */
.faq-q,
.faq-a {
  color: var(--0-f-1-c-80, #0f1c80);
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px; /* 137.5% */
  letter-spacing: 2px;
}

/* Q.とA.の後のテキストのスタイル */
.faq-question-text {
  margin-left: 19px; /* Q.とテキストの間隔 */
  color: var(--0-f-1-c-80, #0f1c80);
  font-family: "Inter";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 21px; /* 文章の行間を21pxに設定 */
  letter-spacing: 1.4px;
  text-align: left;
}

.faq-answer-text {
  margin-left: 24px; /* A.とテキストの間隔 */
  color: var(--0-f-1-c-80, #0f1c80);
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 文章の行間を21pxに設定 */
  letter-spacing: 1.2px;
  text-align: left;
}

/* 質問と回答の間の間隔を15pxに設定 */
.faq-question {
  margin-bottom: 15px;
}

/* 各FAQセットの間隔 */
.faq-item {
  margin-bottom: 61px;
}

.faq-item:last-child {
  margin-bottom: 0;
}

/* お問い合わせセクションのスタイル */
.contact-section {
  margin-top: 156px; /* 前のセクションからの間隔 */
  width: 100%;
  max-width: 1412px;

  padding: 0 1rem;
}

.contact-title {
  display: flex;
  justify-content: flex-start;
}

.contact-image {
  max-width: 476.18px;
  height: auto;
}

.contact-subtitle {
  margin-top: 15px;
  color: #ee1d52;
  font-family: "Inter", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 55px;
  letter-spacing: 4.16px;
  text-align: left;
}

/* 白枠のスタイル */
.contact-whitebox {
  margin-top: 40px;
  max-width: 1412px;
  width: 100%;
  border-radius: 20px;
  background: #fff;
  position: relative;
  margin-bottom: 230px;
}

/* SVGコンテナのスタイル */
.svg-container {
  top: 70px; /* 白枠の上から120px下に配置 */
  left: 100px; /* 左余白を100pxに設定 */
  display: flex;
  flex-direction: column;
  gap: 71px; /* 行間の間隔 */
  padding: 80px 100px;
}

/* 各行のスタイル */
.svg-row {
  display: flex;
  gap: 100px; /* SVG間の間隔 */
}

.svg-row:first-child {
  justify-content: flex-start;
}

.svg-row:not(:first-child) {
  justify-content: center;
}

/* 各SVGアイテム */
.svg-item {
  width: 556px;
  height: 50px;
}

.svg-item svg {
  width: 100%;
  height: auto;
}

/* 4行目の大きなSVG */
.large-svg-row {
  margin-top: px; /* 3行目から70px空ける */
  justify-content: center;
}

.large-svg-item {
  width: 1212px;
  height: 170px;
}

.large-svg-item svg {
  width: 100%;
  height: auto;
}

/* ボタンのスタイル */
.button-container {
  margin-top: px; /* 大きなSVGから109px空ける */
  display: flex;
  justify-content: center;
}

.contact-button {
  position: relative;
  width: 426px;
  height: 68px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.contact-button svg {
  position: absolute;
  top: 0;
  left: 0;
}

.button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: bold;
}

/* SVGラベルのスタイル */
.svg-label {
  display: inline-block;
  flex-shrink: 0;
  color: #0f1c80;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px; /* 229.167% */
  letter-spacing: 1.2px;
}

/* ラベルと必須バッジのコンテナ */
.label-container {
  display: inline-flex;
  align-items: center;
  margin-bottom: px; /* SVGとの間隔 */
}

/* 必須バッジのスタイル */
.required-badge {
  width: 53px;
  height: 26px;
  border-radius: 4px;
  background: #ef001e;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px; /* テキストとの間隔を最小限に */
  color: #fff;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 1px;
}

/* 逆三角形のスタイル */
.svg-item-1 .svg-wrapper {
  position: relative;
  width: 100%;
}

.triangle-icon {
  position: absolute;
  top: 14px;
  left: 508px;
  width: 28px;
  height: 24px;
}

/* プライバシーポリシーの同意部分 */
.privacy-container {
  margin-top: 4px; /* 4行目のSVGから22px下に配置 */
  display: flex;
  align-items: center;
  flex-direction: row;
}

.checkbox-svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.privacy-text {
  margin-left: 4px; /* チェックボックスとの間隔 */
  width: 380px;
  height: 34px;
  flex-shrink: 0;
  color: #0f1c80;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 35px; /* 175% */
  letter-spacing: 1px;
}

.privacy-link {
  margin-left: 16px; /* 「プライバシーポリシー」に同意する との間隔 */
  width: 602px;
  height: 34px;
  flex-shrink: 0;
  color: #0f1c80;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 35px; /* 218.75% */
  letter-spacing: 0.8px;
}

/* プライバシーポリシーリンク内の <a> タグのスタイル */
.privacy-link a {
  color: #0f1c80;
  text-decoration: none;
}

.privacy-link a:hover {
  text-decoration: underline;
}

/* アーカイブページのベースレイアウト */
.works-archive {
  max-width: 1412px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  padding-top: 80px;
}

/* タイトルとサブタイトルの配置 */
.works-archive .works-title {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  width: calc(258px * 2 + 448px);
  margin-top: 84px;
}

.works-archive .works-image {
  max-width: 395px;
  height: auto;
}

.works-archive .works-subtitle {
  margin: 15px 0 0 0;
  color: #ee1d52;
  font-family: "Inter", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 55px;
  letter-spacing: 4.16px;
  text-align: left;
  padding: 0;
  width: calc(258px * 2 + 448px);
}

/* グリッドレイアウト */
.works-archive-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* アイテム間のスペースを調整 */
  margin: 60px 0;
  padding: 0;
  margin-top: 0px;
}

/* モックアップコンテナの調整 */
.works-archive .works-mockup-container {
  position: relative;
  max-width: 670px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  min-height: 541px; /* or simply remove this line */
  height: auto; /* Ensure the container height is auto */
}

.works-mockup-container {
  flex: 1 1 calc(50% - 20px); /* 20pxはマージンの調整 */
  margin-bottom: 40px; /* 下にマージンを追加してアイテム間のスペースを確保 */
  box-sizing: border-box; /* パディングやボーダーを含めて幅を計算 */
}

/* モックアップのスタイル */
.works-archive .works-mockup {
  position: relative;
  max-width: 258px;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

/* テキストコンテナ */
.works-archive .works-text-content {
  position: relative;
  margin-left: 28px;
  margin-top: 50px;
  flex: 1;
}

/* サムネイル画像 */
.works-archive .works-thumbnail {
  position: absolute;
  top: 50%; /* 親要素の高さの50% */
  left: 50%; /* 親要素の幅の50% */
  transform: translate(-50%, -50%); /* 子要素の中央を基準点に移動 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  width: 92%;
  border-radius: 24px;
  height: 92%;
}

/* モックアップの背景 */
.works-archive .mockup-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Vector.png の配置用のスタイル */
.works-result-background {
  margin-top: 10px;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.works-result-background img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 成果表示部分のスタイル */
.works-archive .works-result-wrapper {
  position: relative;
  top: 0;
  left: 0;
  right: auto;
  text-align: center; /* 左揃えから中央揃えに変更 */
  z-index: 2;
  display: flex;
  flex-direction: column; /* 要素を縦に並べる */
  align-items: center; /* 中央に配置 */
  justify-content: center;
  width: auto;
  position: relative;
  z-index: 2;
}

/* 装飾線 */
.works-archive .decoration-left,
.works-archive .decoration-right {
  width: 34.8px; /* 幅と高さを入れ替え */
  height: 13.2px;
  flex-shrink: 0;
}

.works-archive .decoration-left {
  margin-bottom: 10px; /* 上部の装飾線の下にマージンを追加 */
}

.works-archive .decoration-right {
  margin-top: 10px; /* 下部の装飾線の上にマージンを追加 */
}

.works-archive .decoration-left svg {
  transform: rotate(5deg); /* 90度右に回転 */
}

.works-archive .decoration-right svg {
  transform: rotate(135deg); /* 90度右に回転 */
}

/* 成果テキスト */
.works-archive .works-result {
  color: #0f1c80;
  font-family: "Inter", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 3.2px;
  text-align: center; /* 左揃えから中央揃えに変更 */
}

/* 結果の各行 */
.works-archive .result-line {
  display: block;
  text-align: center; /* 左揃えから中央揃えに変更 */
  margin: 5px 0;
  font-weight: 700;
}

.works-archive .result-line span {
  display: inline-block;
  position: relative;
}

/* 黄色い下線 */
.works-archive .result-line span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 20px;
  background: #fff300;
  width: 100%;
  z-index: -1;
}

/* クライアント情報 */
.works-archive .works-client-name {
  position: relative;
  margin-top: 49px;
  color: #0f1c80;
  font-family: "Inter", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 2.8px;
  text-align: left;
}

.works-archive .works-account-type {
  position: relative;
  margin-top: 15px;
  width: 276px;
  height: 31px;
  flex-shrink: 0;
  border-radius: 50px;
  opacity: 0.8;
  background: var(--0-f-1-c-80, #0f1c80);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 31px; /* heightと同じ値に変更 */
  letter-spacing: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ページネーション */
.works-pagination {
  margin: 60px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.works-pagination a,
.works-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 15px;
  border-radius: 20px;
  background: #fff;
  color: #0f1c80;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.works-pagination .current {
  background: #0f1c80;
  color: #fff;
}

.works-pagination a:hover {
  background: #ee1d52;
  color: #fff;
}

/* アニメーション */
.works-archive .works-result-wrapper {
  opacity: 0;
  transform: translateX(-50px); /* 左から開始 */
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* アニメーション適用時 */
.works-archive .works-result-wrapper.animate {
  opacity: 1;
  transform: translateX(0); /* 目的の位置まで移動 */
}

.works-description {
  width: 368px;
  color: #0f1c80;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0.36px;
  margin-top: 15px;
}

.back-to-top-button-container {
  margin-top: 111px;
  text-align: center;
}

/* ボタンのスタイル */
.back-to-top-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 425px;
  height: 68px;
  border-radius: 42.5px;
  background: #0f1c80;
  text-decoration: none;
  margin-bottom: 230px;
}

/* ボタン内のテキストのスタイル */
.back-to-top-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 52.25px; /* 186.607% */
  letter-spacing: 3.64px;
}

/* ホバー時のスタイル（オプション） */
.back-to-top-button:hover {
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

/* 詳細ページのベースレイアウト */
.single-works-page {
  max-width: 1412px;
  margin: 176px auto 0;
  padding: 0 20px;
  font-family: var(--font-primary);
}

.works-detail-container {
  width: 100%;
  max-width: 1412px;
  margin: 0 auto;
  position: relative;
}

/* メインコンテンツエリア */
.works-content-wrapper {
  position: relative;
  display: flex;
}

.works-thumbnail-wrapper {
  position: relative;
  width: 299.28px;
  height: 603.29px;
  margin-left: 150px;
}

.mockup-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.works-detail-thumbnail {
  position: absolute;
  top: 38px;
  left: 10.7px;
  width: 268px;
  height: 547px;
  object-fit: cover;
  border-bottom-left-radius: 27.84px;
  border-bottom-right-radius: 27.84px;
  z-index: 2;
}

/* 右側のコンテンツエリア */
.works-right-content {
  margin-left: 65px;
  width: 734px;
  position: relative;
}

/* 結果表示エリア */
.works-result-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin-bottom: 85px;
}

.decoration-left,
.decoration-right {
  margin-top: 15px;
  width: 18px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.works-result {
  color: var(--0-f-1-c-80, #0f1c80);
  text-align: center;
  font-family: Inter;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: 0.84px;
}

.works-result span {
  position: relative;
  display: inline-block;
}

.works-result span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: #fff300;
  z-index: -1;
}

/* 説明セクション */
.works-description-detail {
  width: 734px;
  margin-top: 10px;
}

.works-description-detail p {
  color: var(--0-f-1-c-80, #0f1c80);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 33px;
  letter-spacing: 2.6px;
  margin: 0;
}

/* クライアント情報エリア */
.client-info-wrapper {
  display: flex;
  align-items: center;
}

/* アカウントタイプ */
.works-account-type {
  margin-top: 46px;
  width: 276px;
  height: 31px;
  border-radius: 50px;
  background: rgba(15, 28, 128, 0.8);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 31px;
  letter-spacing: 1px;
  text-align: center;
}

/* クライアント名 */
.works-client-name {
  margin-top: 42px;
  color: #0f1c80;
  font-size: 32px;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 2.8px;
  margin-left: 30px;
}

/* デスクトップ版とモバイル版の表示制御 */
.desktop-only {
  display: block;
}

.works-result-wrapper.mobile-only {
  display: none;
}

.mobile-only {
  display: none;
}

/* 戻るボタン */
.back-to-archive {
  margin: 50px 0;
  text-align: center;
}

.back-to-archive-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 425px;
  height: 68px;
  border-radius: 42.5px;
  background: #0f1c80;
  color: #fff;
  text-decoration: none;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3.64px;
  transition: opacity 0.3s ease;
}

.back-to-archive-button:hover {
  opacity: 0.9;
}

/* 結果表示エリア */
.works-result-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin-bottom: 20px; /* 85pxから20pxに変更 */
}

/* 結果タイトル */
.works-result-title {
  color: var(--0-f-1-c-80, #0f1c80);
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 1.6px;
  margin-top: 85px; /* works-description-detailとの間隔 */
}

/* テキストボックスセクションのスタイル */
.works-textbox-section {
  width: 1412px;
  height: 543px;
  margin: 88px auto 0;
  border-radius: 20px;
  background: #fff;
  flex-shrink: 0;
  position: relative; /* 相対位置指定を確実に設定 */
  padding: 0; /* パディングをリセット */
  box-sizing: border-box; /* ボックスサイズの計算方法を指定 */
}

/* アカウント別詳細タイトル */
.account-detail-title {
  position: absolute; /* 絶対位置指定に変更 */
  left: 100px; /* 左からの位置 */
  top: 80px; /* 上からの位置 */
  color: var(--0-f-1-c-80, #0f1c80);
  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 1.2px;
}

/* アカウント別詳細内容 */
.account-detail-content {
  position: absolute; /* 絶対位置指定に変更 */
  left: 100px; /* 左からの位置 */
  top: 130px; /* タイトルの下 15px の位置（80px + 35px + 15px） */
  width: 1212px;
  color: var(--0-f-1-c-80, #0f1c80);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: 1px;
}

/* その他運用実績セクション */
.other-works-section {
  margin-top: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 110px; /* 要素間の間隔を設定 */
}

/* 装飾用の横棒 */
.horizontal-line {
  width: 250px;
  height: 5px;
  flex-shrink: 0;
  background: var(--Style, #69c9d0);
}

/* その他運用実績タイトル */
.other-works-title {
  color: var(--ee-1-d-52, #ee1d52);
  text-align: center;
  font-family: Inter;
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 2.66px;
}

/* 実績詳細ページの戻るボタン用のコンテナ追加 */
.back-button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 85px;
  margin-bottom: 50px;
}

/* 実績詳細ページの戻るボタン */
.single-works-back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 425px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 81px;
  background: var(--0-f-1-c-80, #0f1c80);
  box-shadow: 4.5px 4.5px 9px 0px rgba(163, 164, 165, 0.7);
  text-decoration: none;
  transition: opacity 0.3s ease;
  margin-bottom: 230px;
}

.single-works-back-button:hover {
  opacity: 0.9;
}

.single-works-back-text {
  width: 747px;
  height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 52.25px;
  letter-spacing: 3.64px;
}

/* フッターの基本スタイル */
.site-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 青枠セクション */
.footer-primary {
  width: 100%;
  height: 258px;
  background: var(--0-f-1-c-80, #0f1c80);
  position: relative;
}

/* フッターコンテンツのコンテナ */
.footer-content {
  max-width: 1920px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

/* フッターロゴ */
.footer-logo {
  position: absolute;
  top: 58px;
  left: 150px;
  max-height: 142px;
  width: auto;
}

/* 右側のリンクコンテナ */
.footer-links {
  position: absolute;
  top: 69px;
  right: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* リンクのスタイル */
.footer-link {
  color: #fff;
  text-align: right;
  font-family: Inter, sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: 3.64px;
  text-decoration: none;
  display: block;
}

/* 黒枠セクション */
.footer-secondary {
  width: 100%;
  height: 80px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* コピーライトテキスト */
.copyright {
  color: #fff;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  margin-top: 29px;
}

.desktop-image {
  display: block; /* デスクトップ用画像を表示 */
}

.mobile-image {
  display: none; /* モバイル用画像を非表示 */
}

/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
  .background-container {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 767px;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }

  /* 上部の固定背景 */
  .top-background {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 767px;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    z-index: -1;
    background-image: url("./assets/images/PC_back_line.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
  }

  /* 下部の固定背景 */
  .bottom-background {
    position: fixed;
    bottom: 0;
    left: 0;
    max-width: 767px;
    width: 100%;
    height: 100%;
    z-index: -3;
    background-image: url("./assets/images/PC_back_white.jpg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
  }

  /* アニメーション背景 */
  .animated-background {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 767px;
    width: 100%;
    height: 100%;
    z-index: -2;
  }

  .bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 767px;
    width: 100%;
    height: 100%;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    animation: fadeInOut 15s infinite;
  }

  .bg-1 {
    max-width: 767px;
    width: 100%;
    animation-delay: 0s;
    background-image: url("./assets/images/PC_back1.jpg");
  }

  .bg-2 {
    max-width: 767px;
    width: 100%;
    animation-delay: 5s;
    background-image: url("./assets/images/PC_back2.jpg");
  }

  .bg-3 {
    max-width: 767px;
    width: 100%;
    animation-delay: 10s;
    background-image: url("./assets/images/PC_back3.jpg");
  }

  @keyframes fadeInOut {
    0%,
    45%,
    100% {
      opacity: 0;
    }
    15%,
    30% {
      opacity: 1;
    }
  }
  .footer-secondary {
    height: 60px;
  }

  .copyright {
    font-size: 12px;
  }
}

@media only screen and (max-width: 720px) {
  /* タイトルセクション全体の調整 */
  .main-content {
    max-width: 414px; /* 現在382px */
    margin: 0 auto;
    position: relative;
  }

  /* title-sectionのコンテナスタイル */
  .title-section {
    margin-top: px;
    width: 100%;
    position: relative;
    overflow: visible;
  }

  .title-content {
    padding: 0 1rem;
    max-width: 382px;
    margin: 0 auto;
    position: relative;
  }

  /* コンテンツラッパーのスタイル */
  .content-wrapper {
    position: relative;
    z-index: 1;
    max-width: 382px; /* 800pxから1412pxに変更 */
    width: 100%;
  }

  /* 画像を重ねるためのコンテナ */
  .title-images-container {
    position: relative;
    width: 100%;
    height: auto;
  }

  /* Group 27の画像を下に配置 */
  .group-27-image {
    position: absolute;
    top: 103px;
    left: 0;
    max-width: 382px;
    height: auto;
    z-index: 1; /* 下層に配置 */
  }

  /* タイトル画像を上に配置 */
  .title-image {
    position: relative;
    z-index: 2; /* 上層に配置 */
    max-width: 372px;

    height: auto;
  }

  /* Group 27のアニメーション用スタイル */
  @keyframes revealFromLeft {
    0% {
      clip-path: inset(0 100% 0 0);
    }
    100% {
      clip-path: inset(0 0 0 0);
    }
  }

  .group-27-image {
    position: absolute;
    top: 67px;
    left: 0;
    width: 382px;
    height: auto;
    z-index: 1;
    clip-path: inset(0 100% 0 0); /* 初期状態では完全に隠す */
    animation: revealFromLeft 1.5s ease-out forwards;
  }

  /* title-images-containerのoverflow制御を削除 */
  .title-images-container {
    position: relative;
    width: 100%;
    height: auto;
  }

  .mockup-video {
    position: absolute;
    top: -50px; /* aaa-1-imageと同じ位置指定を継承 */
    right: -380px;
    width: auto;
    height: auto;
    z-index: 3;
    transform: rotate(8deg) scale(0.93); /* scaleを追加して90%に縮小 */
    transform-origin: center center;
  }

  .mobile-text {
    display: block;
    width: 346px;
    height: 81px;
    flex-direction: column;
    justify-content: center;
    color: #0f1c80;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 22.5px;
    letter-spacing: 1.12px;
    /* margin設定を1つにまとめ、!importantを追加して確実に適用 */
    margin: 350px auto 0 auto !important;
    position: relative; /* 位置制御のため追加 */
    z-index: 2; /* 重なり順制御のため追加 */
  }

  .mobile-button {
    display: flex;
    width: 280px;
    height: 46px;
    border-radius: 74.48px;
    background: #ee1d52;
    margin: 10px auto 0;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 16.128px;
    font-weight: 700;
    line-height: 30.096px;
    letter-spacing: 2.097px;
    position: relative; /* 位置制御のため追加 */
    z-index: 2; /* 重なり順制御のため追加 */
  }

  /* デスクトップ用のテキストとボタンを非表示に */
  .desktop-text,
  .desktop-button {
    display: none;
  }

  .mission-section {
    margin-top: 70px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
  }

  .mission-title {
    display: flex;
    justify-content: center;
  }

  .mission-image {
    max-width: 280px;
    height: auto;
    width: 100%;
  }

  .mission-subtitle {
    margin-top: 10px;
    color: #ee1d52;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 900;
    line-height: 22px;
    letter-spacing: 1.82px;
    text-align: center;
  }

  .mission-statement {
    margin-left: 45px;
    max-width: 251px;
    margin-top: 17px;
    color: #0f1c80;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: 2.34px;
    text-align: center;
  }

  @media only screen and (max-width: 720px) {
    /* 既存のmobileスタイル... */

    .mission-diagram {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 228px;
      height: 45px;
      flex-shrink: 0;
      border-radius: 24.738px;
      background: var(--0-f-1-c-80, #0f1c80);
      margin-top: 30px;
      padding-top: 0px;
    }

    /* mission-elementのスタイルも合わせて調整 */
    .mission-element {
      width: 152px;
      height: 47px;
      border-radius: 24.738px;
      background: var(--0-f-1-c-80, #0f1c80);
      color: #fff;
      text-align: center;
      font-family: "Inter", sans-serif;
      font-size: 14px;
      font-weight: 700;
      line-height: 40px; /* heightと同じ値に設定して垂直中央揃え */
      letter-spacing: 0.98px;
    }

    .mission-element span {
      display: block;
      line-height: 1.4;
    }

    .mission-element .line1,
    .mission-element .line2 {
      font-size: 14px;
      letter-spacing: 0.98px;
      padding-top: 2px;
    }

    /* 接続線の画像サイズも調整 */
    .mission-connections {
      position: absolute;
      top: 30px; /* 上の要素と重なるように調整 */
      left: 50%;
      transform: translateX(-50%);
      width: 300px;
      height: auto;
      z-index: -1; /* z-indexを0に変更して上の要素の下に表示 */
    }

    /* 画像自体のサイズも調整 */
    .connection-lines {
      width: 300px;
      height: 80px;
    }

    /* 下部の要素間隔も調整 */
    .mission-bottom {
      display: flex;
      justify-content: space-between;
      width: 350px;
      max-width: 350px;
      margin-top: 45px;
      gap: 30px; /* 間隔を狭める */
    }

    /* お悩みセクションのスタイル */
    @media only screen and (max-width: 720px) {
      /* concerns-sectionの基本スタイル */
      .concerns-section {
        margin-top: 44px;
        padding: 0 1rem;
        display: flex;
        justify-content: center;
      }

      /* 白枠のコンテナスタイル */
      .concerns-container {
        width: 340px;
        height: 670px;
        flex-shrink: 0;
        border-radius: 20px;
        background: #fff;
        position: relative;
        box-sizing: border-box;
      }
      /* 白枠のコンテナスタイル */
      .concerns-container {
        width: 340px;
        height: 640px;
        flex-shrink: 0;
        border-radius: 20px;
        background: #fff;
        position: relative;
        box-sizing: border-box;
      }

      /* タイトル部分のスタイル */
      .concerns-title {
        margin-top: 10px;
        position: relative;
      }

      .title-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 0px;
      }

      .title-text {
        color: #ee1d52;
        text-align: center;
        font-family: var(--font-primary);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 55px;
        letter-spacing: 0.9px;
        white-space: nowrap;
        order: 1;
      }

      .line-decoration {
        width: 100px;
        height: 3px;
        background: var(--Style, #69c9d0);
        display: block;
        order: 2;
      }

      /* 2つ目の装飾線を非表示にする */
      .title-wrapper .line-decoration:last-child {
        display: none;
      }

      /* 悩みリストのスタイル */
      .concerns-list {
        display: flex;
        flex-direction: column;
        gap: 17.3px;
        max-width: 280px;
        margin: 0 auto;
        margin-top: 30px;
      }

      .concern-item {
        padding: 0;
        background: none;
        max-width: 280px;
      }

      .concern-item.concern-right {
        margin-left: auto;
      }

      /* PC用の画像を非表示 */
      .concern-item img[src*="Group f"] {
        display: none;
      }

      .desktop-image {
        display: none;
      }

      .mobile-image {
        display: block;
      }

      .concern-image {
        max-width: 100%;
        height: auto;
        display: block;
      }

      /* アニメーション用のスタイル */
      @keyframes slideUp {
        0% {
          transform: translateY(50px);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }

      .concern-item {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.6s ease-out;
      }

      /* 左側の要素用 */
      .concern-item:not(.concern-right).animate {
        animation: slideUp 0.6s ease-out forwards;
      }

      /* 右側の要素用（少し遅延を付ける） */
      .concern-item.concern-right.animate {
        animation: slideUp 0.6s ease-out 0.3s forwards;
      }

      /* アニメーション順序を制御するための遅延 */
      .concern-item:nth-child(3).animate,
      .concern-item:nth-child(4).animate {
        animation-delay: 0.2s;
      }

      .concern-item:nth-child(5).animate,
      .concern-item:nth-child(6).animate {
        animation-delay: 0.4s;
      }

      /* 三角形のスタイル */
      .triangle {
        position: absolute;
        left: 43%;
        top: -60px;
        transform: translateX(-50%);
        max-width: 46px;
        z-index: 2;
      }

      .triangle svg {
        width: 100%;
        height: 100%;
      }

      /* 三角形のアニメーション */
      @keyframes triangleSlideDown {
        0% {
          transform: translateY(-50px);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }

      .triangle {
        opacity: 0;
        transform: translateY(-50px);
      }

      .triangle.animate {
        animation: triangleSlideDown 0.8s ease-out forwards;
      }
    }
  }
  @media only screen and (max-width: 720px) {
    /* 既存のスタイルを維持しながら、position: relativeを追加 */
    .solution-container,
    .service-triangle-container,
    .flow-triangle-container {
      position: relative;
      overflow: visible;
    }

    .solution-container {
      width: 340px;
      height: 104px;
      flex-shrink: 0;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0px 0px 5.7px 0px #fff;
      margin-top: 40px;
      position: relative;
      overflow: visible; /* 変更：三角形がはみ出すように */
    }

    .phone-image {
      display: none;
    }

    .solution-section {
      padding: 0 1rem;
      display: flex;
      justify-content: center;
    }

    .solution-image {
      position: absolute;
      left: 19px;
      top: 50%;
      transform: translateY(-50%);
      max-width: 302px; /* 幅を797pxに指定 */
      height: auto; /* アスペクト比を維持 */
    }
  }

  @media only screen and (max-width: 720px) {
    .service3-pc-content {
      display: none;
    }

    .service3-mobile-content {
      display: block;
    }

    #service3-fullText {
      display: none;
    }

    #service3-shortText {
      display: block;
      color: #0f1c80;
      font-family: Inter;
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: 21px;
      letter-spacing: 0.7px;
    }

    .service3-mobile-content .expand-button {
      width: 230px;
      height: 43px;
      border-radius: 8.6px;
      opacity: 0.5;
      background: #fff;
      border: none;
      cursor: pointer;
      margin-top: 13px;
      margin-left: 50px;
      color: #0f1c80;
      text-align: center;
      font-family: Inter, sans-serif;
      font-size: 12px;
      font-weight: 700;
      line-height: 31.6px;
      letter-spacing: 1.56px;
    }

    .service3-mobile-content .expand-button:hover {
      opacity: 0.8;
    }

    .service3-mobile-content .service-description.expanded {
      display: none;
    }
  }
  /* サービスセクションのスタイル */
  .service-section {
    margin-top: 950px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
  }

  .service-image {
    max-width: 280px;
    height: auto;
    width: 100%;
    margin-top: 40px;
    margin-left: 30px;
  }

  .service-subtitle {
    margin-top: 10px;
    color: #ee1d52;
    font-family: var(--font-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 1.82px;
    text-align: center;
    font-family: var(--font-primary);
  }

  /* サービス1のコンテナ */
  .service1-container {
    display: flex;
    flex-direction: column; /* 縦方向に変更 */
    gap: 5px; /* 間隔を調整 */
    margin-top: 20px;
    align-items: center; /* 中央揃え */
  }

  .service1-image {
    max-width: 340px;
    height: auto;
    width: 100%;
  }

  .service1-content {
    width: 100%; /* 幅を100%に */
    padding: 0 10px; /* 左右に少しパディングを追加 */
    box-sizing: border-box;
  }

  .service1-header {
    display: flex;
    align-items: center;
    gap: 2.4px;
    margin-bottom: 13px;
  }

  .service1-number {
    color: #0f1c80;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 1.4px;
  }

  .service1-title {
    color: #0f1c80;
    font-family: Inter;
    font-size: 20px; /* フォントサイズ調整 */
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 1px;
  }

  .service1-description {
    margin-top: 10px;
    color: #0f1c80;
    font-family: Inter;
    font-size: 14px; /* フォントサイズ調整 */
    font-style: normal;
    font-weight: 600;
    line-height: 21px; /* 行間調整 */
    letter-spacing: 0.7px;
    margin: 0;
    width: 100%; /* 幅を100%に */
    white-space: normal; /* 改行を許可 */
    text-align: left;
  }

  .service2-container,
  .service3-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 41px;
    align-items: center;
  }

  .service2-image,
  .service3-image {
    max-width: 340px;
    height: auto;
    width: 100%;
  }

  .service2-content,
  .service3-content {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  /* 同様のヘッダーとテキストスタイルを適用 */
  .service2-header,
  .service3-header {
    display: flex;
    align-items: center;
    gap: 2.4px;
    margin-bottom: 13px;
  }

  .service2-number,
  .service3-number {
    font-size: 28px;
    line-height: 22px;
    letter-spacing: 1.4px;
  }

  .service2-title,
  .service3-title {
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 1px;
  }

  .service2-description,
  .service3-description {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.7px;
    width: 100%;
    white-space: normal;
    text-align: left;
    margin: 5px 0;
  }

  /* サービスのテキストコンテンツ */
  .service-text-content {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
  }

  .service-description {
    white-space: normal; /* 追加 */
    width: 340px;
    color: #0f1c80;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0.7px;
    margin: 0;
  }

  .service-description.expanded {
    display: none;
  }

  .service-triangle-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    width: 100%;
  }

  .service-triangle {
    width: 36px;
    height: 31px;
    flex-shrink: 0;
  }

  .service-triangle svg {
    width: 100%;
    height: 100%;
    margin-left: 2px;
  }

  .service-message-container {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .service-message-content {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .service-message {
    color: #0f1c80;
    text-align: center;
    font-family: Inter;
    font-size: 15.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 30.2px; /* 70% */
    letter-spacing: 0.48px;
    margin: 0;
  }

  .line-left,
  .line-right {
    width: 18px;
    height: 40px;
    flex-shrink: 0;
  }

  /* サービスメッセージのアニメーション */
  @keyframes messageSlideUp {
    0% {
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes linesDraw {
    0% {
      transform: translateY(50px);
      opacity: 0;
      stroke-dashoffset: 103;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
      stroke-dashoffset: 0;
    }
  }

  /* 初期状態 */
  .service-message,
  .line-left,
  .line-right {
    opacity: 0;
    transform: translateY(50px);
  }

  /* 線のアニメーション用スタイル */
  .line-left path,
  .line-right path {
    stroke-dasharray: 103;
    stroke-dashoffset: 103;
  }

  /* アニメーション適用時 */
  .service-message.animate {
    animation: messageSlideUp 0.8s ease-out forwards;
  }

  .line-left.animate {
    animation: messageSlideUp 0.8s ease-out forwards;
  }

  .line-left.animate path {
    animation: linesDraw 1s ease-out 0.3s forwards;
  }

  .line-right.animate {
    animation: messageSlideUp 0.8s ease-out forwards;
  }

  .line-right.animate path {
    animation: linesDraw 1s ease-out 0.3s forwards;
  }

  /* アニメーションの順序制御 */
  .line-left.animate {
    animation-delay: 0.2s;
  }

  .service-message.animate {
    animation-delay: 0.4s;
    line-height: 1.4;
  }

  .line-right.animate {
    animation-delay: 0.6s;
  }

  .service-details-container {
    margin-top: 55px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .service-details-box {
    margin-top: 15px;
    width: 340px;
    height: 215px;
    flex-shrink: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 0px 5.7px 0px #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    gap: 16px;
  }

  .service-details-image {
    max-width: 274px;
    height: auto;
    position: static;
  }

  .service-cta-button {
    margin-top: 0px;
    width: 296px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 81px;
    background: #ee1d52;
    box-shadow: 1.8px 1.8px 3.6px 0px rgba(163, 164, 165, 0.7);
    order: 2; /* 表示順序を2番目に */
  }

  .service-cta-text {
    width: 242px;
    height: 30px;
    color: #fff;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: 0.55px;
  }

  /* ホバー効果を追加（オプション） */
  .service-cta-button:hover {
    opacity: 0.9;
    transition: opacity 0.3s ease;
  }

  .service-details-text {
    margin-top: 0;
    color: #0f1c80;
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: 0.55px;
    text-align: center;
    order: 3; /* 表示順序を3番目（最後）に */
    padding-left: 28px;
    padding-right: 28px;
  }

  .strength-title-wrapper {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .strength-title {
    color: #ee1d52;
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 55px;
    letter-spacing: 1px;
    margin: 0;
  }

  .strength-line {
    width: 80px;
    height: 3px;
    flex-shrink: 0;
    background: #69c9d0;
  }

  /* 強みの画像コンテナ更新 */
  .strength-images-container {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 340px;
    margin: px auto 0 auto;
    grid-auto-rows: auto;
  }

  .strength-item {
    width: 340px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .strength-number-badge {
    position: absolute;
    width: 165.84px;
    height: 165.84px;
    flex-shrink: 0;
    left: -25px;
    top: -53px;
    z-index: 2;
  }

  .strength-image {
    max-width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
  }

  .strength-image.left {
    background: url("./assets/images/strongleft.png") no-repeat center center;
    background-size: cover;
  }

  .strength-image.right {
    background: url("./assets/images/strongright.png") no-repeat center center;
    background-size: cover;
  }

  .strength-item-title {
    margin-top: 15px;
    color: #0f1c80;
    font-family: Inter, sans-serif;
    font-size: 19.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1.6px;
    margin-bottom: 10px;
  }

  .strength-item-text {
    color: #0f1c80;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0.7px;
  }

  .strength-text-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  #fullText {
    display: none;
  }

  /* 右側のテキストのスタイル */
  .strength-item:last-child .strength-item-text {
    margin-top: 0; /* 右側のテキストの上マージンを削除 */
    min-height: 280px; /* テキストの最小高さを設定 */
  }

  .strength-item-text {
    width: 340px;
    /* height: 69px; 削除 */
    /* flex-shrink: 0; 削除 */
    color: #0f1c80;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0.7px;
    margin-bottom: px;
  }

  #fullText {
    display: none;
  }

  .expand-button {
    width: 230px;
    height: 43px;
    border-radius: 8.6px;
    opacity: 0.5;
    background: #fff;
    border: none;
    cursor: pointer;
    margin-top: 0px;
    margin-left: 50px;
    color: #0f1c80;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 31.6px;
    letter-spacing: 1.56px;
  }

  .expand-button:hover {
    opacity: 0.8;
  }

  /* WORKSセクションの基本スタイル */
  .works-section {
    margin-top: -110px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
    position: relative;
  }

  /* タイトル画像のスタイル */
  .works-title {
    display: flex;
    justify-content: center;
  }

  .works-image {
    max-width: 158px;
    height: auto;
  }

  /* 運用実績テキストのスタイル */
  .works-subtitle {
    margin-top: 10px;
    color: #ee1d52;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 22px;
    letter-spacing: 1.82px;
    text-align: center;
    margin-bottom: 0px;
  }

  /* モックアップのコンテナ全体 */
  .works-mockups {
    display: flex;
    justify-content: center;
    gap: 45px;
    flex-wrap: nowrap;
    max-width: 340px;
    margin: 0 auto;
  }

  /* 各モックアップのコンテナ */
  .works-mockup-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc((100% - 80px) / 3); /* 3等分して45px間隔 */
    min-width: 430px; /* 最小幅を設定 */
    padding-top: 0px;
  }

  /* モックアップ本体 */
  .works-mockup {
    margin-top: 50px;
    position: relative;
    width: 268px;
    height: 540.2px;
    flex-shrink: 0;
  }

  /* モックの白枠背景 */
  .mockup-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  /* サムネイル画像 */
  .works-thumbnail {
    position: absolute;
    top: 35.5px;
    left: 10.45px;
    width: 239.2px;
    height: 494.3px;
    object-fit: cover;
    z-index: 2;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
  }

  /* 成果表示部分のスタイル */
  .works-result-wrapper {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  /* 装飾線のスタイル */
  .decoration-left,
  .decoration-right {
    width: 20px;
    height: 55px;
    flex-shrink: 0;
  }

  .decoration-left {
    margin-right: 5px;
  }

  .decoration-right {
    margin-left: 5px;
  }

  /* 成果テキストのスタイル */
  .works-result {
    color: #0f1c80;
    font-family: "Inter", sans-serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 2px;
    text-align: center;
  }

  /* 結果の各行のスタイル */
  .result-line {
    display: block;
    text-align: center;
    margin: 5px 0;
  }

  .result-line span {
    display: inline-block;
    position: relative;
  }

  /* 黄色い下線のスタイル */
  .result-line span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20px;
    background: #fff300;
    width: 100%;
    z-index: -1;
  }

  /* クライアント情報のスタイル */
  .works-client-info {
    margin-top: 20px;
    text-align: center;
  }

  .works-account-type {
    width: 233px;
    height: 26.6px;
    border-radius: 36px;
    opacity: 0.8;
    background: #0f1c80;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0.7px;
  }

  .works-client-name {
    margin-top: 10px;
    color: #0f1c80;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 2.4px;
    text-align: center;
  }

  /* CTAボタンのスタイル */
  .works-cta-button {
    margin-top: 30.5px;
    width: 280px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 74.48px;
    background: #ee1d52;
    box-shadow: 4.5px 4.5px 9px 0px rgba(163, 164, 165, 0.7);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .works-cta-text {
    width: 207px;
    height: 19.3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 2.1px;
  }

  /* ホバーエフェクト */
  .works-cta-button:hover {
    opacity: 0.9;
    transition: opacity 0.3s ease;
  }

  .works-result-wrapper {
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0; /* 初期状態は非表示 */
    transform: translateY(50px); /* 初期位置を下に */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* バウンス効果のある遷移 */
  }

  /* アニメーション適用時のスタイル */
  .works-result-wrapper.animate {
    opacity: 1;
    transform: translateY(0);
  }

  /* 装飾線のアニメーション */
  .decoration-left,
  .decoration-right {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: 0.2s; /* テキストの後に表示 */
  }

  .decoration-left.animate,
  .decoration-right.animate {
    opacity: 1;
    transform: translateY(-10px); /* 元の位置に戻す */
  }

  /* 成果テキストのアニメーション */
  .works-result {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .works-result.animate {
    opacity: 1;
    transform: translateY(0);
  }

  /* 各行のアニメーション */
  .result-line {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .result-line.animate {
    opacity: 1;
    transform: translateY(0);
  }

  /* 各行の遅延を設定 */
  .result-line:nth-child(1) {
    transition-delay: 0.1s;
  }
  .result-line:nth-child(2) {
    transition-delay: 0.2s;
  }
  .result-line:nth-child(3) {
    transition-delay: 0.3s;
  }

  @media only screen and (max-width: 720px) {
    .price-image {
      max-width: 276px;
      padding-right: 30px;
    }
  }

  /* 費用と流れテキストのスタイル */
  @media only screen and (max-width: 720px) {
    .price-subtitle {
      position: relative; /* または position: absolute; */
      margin-top: 10px;
      color: #ee1d52;
      font-size: 14px;
      font-style: normal;
      font-weight: 900;
      line-height: 22px;
      letter-spacing: 1.82px;
      text-align: left;
      right: 15px;
      margin-bottom: 10px;
    }
  }
}

/* デスクトップ表示時はモバイル用コンテナを非表示 */
.price-mobile-container {
  display: none;
}

@media only screen and (max-width: 720px) {
  .price-container {
    display: none;
  }

  .price-mobile-container {
    display: block;
    width: 100%;
    justify-content: center;
    max-width: 340px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .price-mobile-image {
    width: 100%;
    height: auto;
  }

  .price-section {
    margin-top: 85px;
  }

  .price-title,
  .price-subtitle {
    width: 100%;
    max-width: 340px;
    padding: 0 1rem;
    display: flex;
    justify-content: center;
  }

  .price-desktop-container {
    display: none;
  }

  .price-mobile-container {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .price-mobile-image {
    width: 315px;
    margin-top: 24px;
  }

  .price-subtitle {
    position: relative;
    margin-top: 10px;
    color: #ee1d52;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 22px;
    letter-spacing: 1.82px;
    text-align: left;
    right: 15px;
  }

  .price-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* 最初のline-decorationを非表示にする */
  .price-line-decoration:first-child {
    display: none;
  }

  /* 画像のスタイル */
  .priceflow-image {
    max-width: 100%;
    height: auto;
  }

  /* タイトルラッパーのスタイル調整 */
  .flow-title-wrapper {
    width: 100%;
    max-width: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(px);
  }

  .flow-section-title {
    color: #ee1d52;
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 55px;
    letter-spacing: 1px;
    margin: 0;
  }

  .flow-line {
    width: 50px;
    height: 3px;
    flex-shrink: 0;
    background: #69c9d0;
  }

  /* フローグリッドのスタイル */
  .flow-grid-container {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(1, 340px); /* 2列 */

    justify-content: center;
    max-width: 340px;
    padding-left: 4px;
  }

  @media only screen and (max-width: 720px) {
    .flow-item-title {
      padding-left: 20px;
      margin-left: 0;
      width: 310px;
    }

    .flow-description {
      padding-left: 20px;
      margin-left: 0;
      width: 280px;
    }

    .flow-item {
      padding: 15px 0 0 0;
    }
  }

  .flow-item-title {
    color: #0f1c80;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 27.5px;
    letter-spacing: 0.8px;
    margin: 0;
    width: 310px;
    text-align: left;
  }

  /* 白枠のスタイル修正 */
  .flow-item {
    width: 340px;
    height: 118px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 0; /* 角の丸みを削除 */

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-top: 15px; /* パディングを15pxに減らす（元は40px） */
  }

  /* 説明文のスタイル */
  .flow-description {
    width: 304px;
    height: auto; /* heightを固定値から自動に変更 */
    flex-shrink: 0;
    color: #0f1c80;
    font-family: Inter;
    font-size: 11px;
    font-style: normal;

    font-weight: 600;
    line-height: 17.5px;
    letter-spacing: 0.55px;
    margin: 0;
    margin-top: 3px; /* タイトルとの間隔を調整 */
    padding-right: 30px; /* 追加: 右側のパディング */
  }

  /* 三角形のコンテナスタイル */
  .flow-triangle-container {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }

  .flow-triangle {
    width: 36px;
    height: 31px;
    flex-shrink: 0;
    position: absolute;
    left: 155px;
  }

  .flow-triangle svg {
    width: 100%;
    height: 100%;
  }

  .flow-message-container {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
  }

  .flow-message-content {
    display: flex;
    align-items: center;
    position: relative;
    width: 340px;
  }

  .flow-message-content svg {
    position: absolute;
    width: 22px;
    height: 49.8px;
    z-index: 1;
  }

  .flow-message-content svg:first-child {
    left: 0;
  }

  .flow-message-content svg:last-child {
    right: 0;
  }

  .flow-message {
    width: 100%;
    color: #0f1c80;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.48px;
    margin: 0;
    padding: 0 5px;
    position: relative;
    z-index: 2;
  }

  .line-left,
  .line-right {
    width: 18px;
    height: 39.8px;
    flex-shrink: 0;
  }

  /* フローメッセージのアニメーション */
  @keyframes flowMessageSlideUp {
    0% {
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes flowLinesDraw {
    0% {
      transform: translateY(50px);
      opacity: 0;
      stroke-dashoffset: 103;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
      stroke-dashoffset: 0;
    }
  }

  /* flow-message-contentの子要素の初期状態 */
  .flow-message-content svg,
  .flow-message {
    opacity: 0;
    transform: translateY(50px);
  }

  /* 線のアニメーション用スタイル */
  .flow-message-content svg path {
    stroke-dasharray: 103;
    stroke-dashoffset: 103;
  }

  /* アニメーション適用時 */
  .flow-message.animate {
    animation: flowMessageSlideUp 0.8s ease-out forwards;
  }

  /* 左の線のアニメーション */
  .flow-message-content svg:first-child.animate {
    animation: flowMessageSlideUp 0.8s ease-out forwards;
  }

  .flow-message-content svg:first-child.animate path {
    animation: flowLinesDraw 1s ease-out 0.3s forwards;
  }

  /* 右の線のアニメーション */
  .flow-message-content svg:last-child.animate {
    animation: flowMessageSlideUp 0.8s ease-out forwards;
  }

  .flow-message-content svg:last-child.animate path {
    animation: flowLinesDraw 1s ease-out 0.3s forwards;
  }

  /* アニメーションの順序制御 */
  .flow-message-content svg:first-child.animate {
    animation-delay: 0.2s;
  }

  .flow-message.animate {
    animation-delay: 0.4s;
  }

  .flow-message-content svg:last-child.animate {
    animation-delay: 0.6s;
  }

  .flow-service-details-box {
    margin-top: 55px;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    height: auto; /* 高さを自動に変更 */
    flex-shrink: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 0px 5.7px 0px #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
  }

  .flow-service-details-image {
    order: 1;
  }

  .flow-service-cta-button {
    order: 2;
  }

  .flow-service-details-text {
    order: 3;
  }

  .flow-service-details-image {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .flow-service-details-text {
    margin-top: 15px;
    color: #0f1c80;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: 0.55px;
    text-align: center;
    padding-right: 24px;
    padding-left: 24px;
  }

  .flow-service-cta-button {
    margin-top: 17.8px;
    width: 296px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 32.4px;
    background: #ee1d52;
    box-shadow: 1.8px 1.8px 3.6px 0px rgba(163, 164, 165, 0.7);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flow-service-cta-text {
    width: 256px;
    height: 43px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20.9px;
    letter-spacing: 1.82px;
  }

  /* ホバー効果を追加（オプション） */
  .flow-service-cta-button:hover {
    opacity: 0.9;
    transition: opacity 0.3s ease;
  }

  /* FAQセクションのスタイル */
  .faq-section {
    margin-top: 70px; /* flow-service-details-box からの距離 */
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0rem;
  }

  .faq-title {
    display: flex;
    justify-content: center;
  }

  .faq-image {
    max-width: 89px;
    height: auto;
  }

  .faq-subtitle {
    margin-top: 3px;
    color: #ee1d52;
    font-family: var(--font-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 22px;
    letter-spacing: 1.82px;
    text-align: center;
    margin-bottom: 21px;
  }

  /* 質問と回答のコンテナ */
  .faq-question,
  .faq-answer {
    display: flex;
    align-items: center;
  }

  /* Q.とA.のスタイル */
  .faq-q,
  .faq-a {
    color: var(--0-f-1-c-80, #0f1c80);
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 27.5px; /* 137.5% */
    letter-spacing: 1px;
  }

  /* Q.とA.の後のテキストのスタイル */
  .faq-question-text {
    margin-left: 10px; /* Q.とテキストの間隔 */
    color: var(--0-f-1-c-80, #0f1c80);
    font-family: "Inter";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 27.5px; /* 文章の行間を21pxに設定 */
    letter-spacing: 0.7px;
    text-align: left;
  }

  .faq-answer-text {
    margin-left: 10px; /* A.とテキストの間隔 */
    color: var(--0-f-1-c-80, #0f1c80);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 文章の行間を21pxに設定 */
    letter-spacing: 0.6px;
    text-align: left;
    padding-top: 15px;
  }

  /* 質問と回答の間の間隔を15pxに設定 */
  .faq-question {
    margin-bottom: 0px;
  }

  /* 各FAQセットの間隔 */
  .faq-item {
    margin-bottom: 18px;
  }

  .faq-item:last-child {
    margin-bottom: 0;
  }

  /* お問い合わせセクションのスタイル */
  .contact-section {
    margin-top: 73px; /* 前のセクションからの間隔 */
    width: 100%;
    max-width: 340px;

    padding: 0rem;
  }

  .contact-title {
    display: flex;
    justify-content: center;
  }

  .contact-image {
    max-width: 190px;
    height: auto;
  }

  .contact-subtitle {
    margin-top: 10px;
    color: #ee1d52;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 900;
    line-height: 22px;
    letter-spacing: 1.82px;
    text-align: center;
  }

  /* 白枠のスタイル */
  .contact-whitebox {
    margin-top: 20px;
    width: 340px;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    position: relative;
    margin-bottom: 80px;
  }

  /* SVGコンテナのスタイル */
  .svg-container {
    top: 51px; /* 白枠の上から120px下に配置 */
    left: 30px; /* 左余白を100pxに設定 */
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 30px 29px;
  }

  /* 各行のスタイル */
  .svg-row {
    display: flex;
    gap: 0px;
  }

  .svg-row:first-child {
    justify-content: center;
  }

  .svg-row:not(:first-child) {
    justify-content: center;
    flex-direction: column;
  }

  /* 各SVGアイテム */
  .svg-item {
    width: 100%;
    max-width: 556px;
    height: 50px;
  }

  .svg-item svg {
    width: 100%;
    height: auto;
  }

  /* 4行目の大きなSVG */
  .large-svg-row {
    margin-top: px; /* 3行目から70px空ける */
    justify-content: center;
  }

  .large-svg-item {
    max-width: 342px;
    width: 100%;
    height: 170px;
  }

  .large-svg-item svg {
    width: 100%;
    height: auto;
  }

  /* ボタンのスタイル */
  .button-container {
    margin-top: px; /* 大きなSVGから109px空ける */
    display: flex;
    justify-content: center;
  }

  .contact-button {
    position: relative;
    width: 426px;
    height: 68px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .contact-button svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .contact-button svg rect {
    width: 100%;
  }

  .button-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: bold;
  }

  /* SVGラベルのスタイル */
  .svg-label {
    display: inline-block;
    flex-shrink: 0;
    color: #0f1c80;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px; /* 229.167% */
    letter-spacing: 1.2px;
  }

  /* ラベルと必須バッジのコンテナ */
  .label-container {
    display: inline-flex;
    align-items: center;
    margin-bottom: px; /* SVGとの間隔 */
  }

  /* 必須バッジのスタイル */
  .required-badge {
    border-radius: 4px;
    background: #ef001e;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px; /* テキストとの間隔を最小限に */
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1px;
  }

  /* 逆三角形のスタイル */
  .svg-item-1 .svg-wrapper {
    position: relative;
    width: 100%;
  }

  .triangle-icon {
    position: absolute;
    top: 0px;
    left: 90%;
    width: 12px;
    height: 12px;
  }

  /* プライバシーポリシーの同意部分 */
  .privacy-container {
    margin-top: 4px; /* 4行目のSVGから22px下に配置 */
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .checkbox-svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }

  .privacy-text {
    margin-left: 0px;
    width: 80%;
    height: 34px;
    flex-shrink: 0;
    color: #0f1c80;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 35px; /* 175% */
    letter-spacing: 1px;
  }

  .privacy-link {
    width: 602px;
    max-width: 100%;
    height: 34px;
    flex-shrink: 0;
    color: #0f1c80;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 10px;
    letter-spacing: 0.5px;
  }

  /* プライバシーポリシーリンク内の <a> タグのスタイル */
  .privacy-link a {
    color: #0f1c80;
    text-decoration: none;
  }

  .privacy-link a:hover {
    text-decoration: underline;
  }

  /* アーカイブページのベースレイアウト */
  .works-archive {
    max-width: 1412px;

    margin: 0 auto;
    padding: 0 20px;
    padding-top: 120px;
    position: relative;
  }

  /* タイトルとサブタイトルの配置 */
  .works-archive .works-title {
    display: flex;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    width: calc(258px * 2 + 448px);
  }

  .works-archive .works-image {
    max-width: 395px;
    height: auto;
  }

  .works-archive .works-subtitle {
    margin: 15px 0 0 0;
    color: #ee1d52;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 55px;
    letter-spacing: 4.16px;
    text-align: left;
    padding: 0;
    width: calc(258px * 2 + 448px);
  }

  /* モックアップコンテナの調整 */
  .works-archive .works-mockup-container {
    position: relative;
    width: 670px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-top: 0px;
  }

  /* モックアップのスタイル */
  .works-archive .works-mockup {
    margin-top: 50px;
    position: relative;
    width: 258px;
    height: 520.08px;
    flex-shrink: 0;
  }

  /* テキストコンテナ */
  .works-archive .works-text-content {
    position: relative;
    margin-left: 28px;
    margin-top: 50px;
    flex: 1;
    position: relative;
  }

  /* モックアップの背景 */
  .works-archive .mockup-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  /* Vector.png の配置用のスタイル */
  .works-result-background {
    margin-top: 10px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .works-result-background img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* 成果表示部分のスタイル */
  .works-archive .works-result-wrapper {
    position: relative;
    top: 0;
    left: 0;
    right: auto;
    text-align: center; /* 左揃えから中央揃えに変更 */
    z-index: 2;
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    align-items: center; /* 中央に配置 */
    justify-content: center;
    width: auto;
    position: relative;
    z-index: 2;
  }

  /* 装飾線 */
  .works-archive .decoration-left,
  .works-archive .decoration-right {
    width: 34.8px; /* 幅と高さを入れ替え */
    height: 13.2px;
    flex-shrink: 0;
  }

  .works-archive .decoration-left {
    margin-bottom: 10px; /* 上部の装飾線の下にマージンを追加 */
  }

  .works-archive .decoration-right {
    margin-top: 10px; /* 下部の装飾線の上にマージンを追加 */
    margin-bottom: 10px;
  }

  .works-archive .decoration-left svg {
    transform: rotate(5deg); /* 90度右に回転 */
  }

  .works-archive .decoration-right svg {
    transform: rotate(135deg); /* 90度右に回転 */
  }

  /* 成果テキスト */
  .works-archive .works-result {
    color: #0f1c80;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 35px;
    letter-spacing: 3.2px;
    text-align: center; /* 左揃えから中央揃えに変更 */
  }

  /* 結果の各行 */
  .works-archive .result-line {
    display: block;
    text-align: center; /* 左揃えから中央揃えに変更 */
    margin: 5px 0;
    font-weight: 700;
  }

  .works-archive .result-line span {
    display: inline-block;
    position: relative;
  }

  /* 黄色い下線 */
  .works-archive .result-line span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20px;
    background: #fff300;
    width: 100%;
    z-index: -1;
  }

  /* クライアント情報 */
  .works-archive .works-client-name {
    position: relative;
    margin-top: 49px;
    color: #0f1c80;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 35px;
    letter-spacing: 2.8px;
    text-align: left;
  }

  .works-archive .works-account-type {
    position: relative;
    margin-top: 15px;
    width: 276px;
    height: 31px;
    flex-shrink: 0;
    border-radius: 50px;
    opacity: 0.8;
    background: var(--0-f-1-c-80, #0f1c80);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 31px; /* heightと同じ値に変更 */
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* ページネーション */
  .works-pagination {
    margin: 60px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .works-pagination a,
  .works-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    border-radius: 20px;
    background: #fff;
    color: #0f1c80;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .works-pagination .current {
    background: #0f1c80;
    color: #fff;
  }

  .works-pagination a:hover {
    background: #ee1d52;
    color: #fff;
  }

  /* アニメーション */
  .works-archive .works-result-wrapper {
    opacity: 0;
    transform: translateX(-50px); /* 左から開始 */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  /* アニメーション適用時 */
  .works-archive .works-result-wrapper.animate {
    opacity: 1;
    transform: translateX(0); /* 目的の位置まで移動 */
  }

  .works-description {
    width: 368px;
    color: #0f1c80;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0.36px;
    margin-top: 15px;
  }

  @media (max-width: 768px) {
    .works-details {
      width: 100%;
      font-size: 16px;
      line-height: 28px;
    }
  }

  .back-to-top-button-container {
    margin-top: 111px;
    text-align: center;
  }

  /* ボタンのスタイル */
  .back-to-top-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 425px;
    height: 68px;
    border-radius: 42.5px;
    background: #0f1c80;
    text-decoration: none;
    margin-bottom: 230px;
  }

  /* ボタン内のテキストのスタイル */
  .back-to-top-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 52.25px; /* 186.607% */
    letter-spacing: 3.64px;
  }

  /* ホバー時のスタイル（オプション） */
  .back-to-top-button:hover {
    opacity: 0.9;
    transition: opacity 0.3s ease;
  }

  /* 詳細ページのベースレイアウト */
  .single-works-page {
    max-width: 1412px;
    margin: 120px auto 0;
    padding: 0 20px;
    font-family: var(--font-primary);
  }

  .works-detail-container {
    width: 100%;
    max-width: 1412px;
    margin: 0 auto;
    position: relative;
  }

  /* メインコンテンツエリア */
  .works-content-wrapper {
    position: relative;
    display: flex;
  }

  /* サムネイル部分のスタイル */
  .works-thumbnail-wrapper {
    position: relative;
    width: 299.28px;
    height: 603.29px;
    margin-left: 150px;
  }

  .mockup-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .works-detail-thumbnail {
    position: absolute;
    top: 38px;
    left: 10.7px;
    width: 268px;
    height: 547px;
    object-fit: cover;
    border-bottom-left-radius: 27.84px;
    border-bottom-right-radius: 27.84px;
    z-index: 2;
  }

  /* 右側のコンテンツエリア */
  .works-right-content {
    margin-left: 65px;
    width: 734px;
    position: relative;
  }

  /* 結果表示エリア */
  .works-result-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 85px;
  }

  .decoration-left,
  .decoration-right {
    margin-top: 15px;
    width: 18px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .works-result {
    color: var(--0-f-1-c-80, #0f1c80);
    text-align: center;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0.84px;
  }

  .works-result span {
    position: relative;
    display: inline-block;
  }

  .works-result span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: #fff300;
    z-index: -1;
  }

  /* 説明セクション */
  .works-description-detail {
    width: 734px;
    margin-top: 10px;
  }

  .works-description-detail p {
    color: var(--0-f-1-c-80, #0f1c80);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 33px;
    letter-spacing: 2.6px;
    margin: 0;
  }

  /* クライアント情報エリア */
  .client-info-wrapper {
    display: flex;
    align-items: center;
  }

  /* アカウントタイプ */
  .works-account-type {
    margin-top: 46px;
    width: 276px;
    height: 31px;
    border-radius: 50px;
    background: rgba(15, 28, 128, 0.8);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 31px;
    letter-spacing: 1px;
    text-align: center;
  }

  /* クライアント名 */
  .works-client-name {
    margin-top: 42px;
    color: #0f1c80;
    font-size: 32px;
    font-weight: 600;
    line-height: 35px;
    letter-spacing: 2.8px;
    margin-left: 30px;
  }

  /* 戻るボタン */
  .back-to-archive {
    margin: 50px 0;
    text-align: center;
  }

  .back-to-archive-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 425px;
    height: 68px;
    border-radius: 42.5px;
    background: #0f1c80;
    color: #fff;
    text-decoration: none;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 3.64px;
    transition: opacity 0.3s ease;
  }

  .back-to-archive-button:hover {
    opacity: 0.9;
  }

  /* 結果表示エリア */
  .works-result-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 20px; /* 85pxから20pxに変更 */
  }

  /* 結果タイトル */
  .works-result-title {
    color: var(--0-f-1-c-80, #0f1c80);
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 55px;
    letter-spacing: 1.6px;
    margin-top: 85px; /* works-description-detailとの間隔 */
  }

  /* テキストボックスセクションのスタイル */
  .works-textbox-section {
    width: 1412px;
    height: 543px;
    margin: 88px auto 0;
    border-radius: 20px;
    background: #fff;
    flex-shrink: 0;
    position: relative; /* 相対位置指定を確実に設定 */
    padding: 0; /* パディングをリセット */
    box-sizing: border-box; /* ボックスサイズの計算方法を指定 */
  }

  /* アカウント別詳細タイトル */
  .account-detail-title {
    position: absolute; /* 絶対位置指定に変更 */
    left: 100px; /* 左からの位置 */
    top: 80px; /* 上からの位置 */
    color: var(--0-f-1-c-80, #0f1c80);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 35px;
    letter-spacing: 1.2px;
  }

  /* アカウント別詳細内容 */
  .account-detail-content {
    position: absolute; /* 絶対位置指定に変更 */
    left: 100px; /* 左からの位置 */
    top: 130px; /* タイトルの下 15px の位置（80px + 35px + 15px） */
    width: 1212px;
    color: var(--0-f-1-c-80, #0f1c80);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: 1px;
  }

  /* その他運用実績セクション */
  .other-works-section {
    margin-top: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 110px; /* 要素間の間隔を設定 */
  }

  /* 装飾用の横棒 */
  .horizontal-line {
    width: 250px;
    height: 5px;
    flex-shrink: 0;
    background: var(--Style, #69c9d0);
  }

  /* その他運用実績タイトル */
  .other-works-title {
    color: var(--ee-1-d-52, #ee1d52);
    text-align: center;
    font-family: Inter;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: 55px;
    letter-spacing: 2.66px;
  }

  /* 実績詳細ページの戻るボタン用のコンテナ追加 */
  .back-button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 85px;
    margin-bottom: 50px;
  }

  /* 実績詳細ページの戻るボタン */
  .single-works-back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 425px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 81px;
    background: var(--0-f-1-c-80, #0f1c80);
    box-shadow: 4.5px 4.5px 9px 0px rgba(163, 164, 165, 0.7);
    text-decoration: none;
    transition: opacity 0.3s ease;
    margin-bottom: 230px;
  }

  .single-works-back-button:hover {
    opacity: 0.9;
  }

  .single-works-back-text {
    width: 747px;
    height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    text-align: center;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 52.25px;
    letter-spacing: 3.64px;
  }
}

.input-container {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

/* デスクトップ表示用のスタイル */
.desktop-works {
  display: flex;
  justify-content: center;
  gap: 45px;
  flex-wrap: nowrap;
  max-width: 1412px;
  margin: 0 auto;
}

/* モバイル用スライダーは通常は非表示 */
.mobile-works {
  display: none;
}

/* モバイル表示時のスタイル */
@media only screen and (max-width: 720px) {
  /* デスクトップ版を非表示 */
  .desktop-works {
    display: none !important;
  }

  /* モバイル版を表示 */
  .mobile-works {
    display: block !important;
    width: 100%;
    margin: 0 auto;
    position: relative;
    visibility: visible !important;
  }

  /* Worksセクション全体 */
  .works-section {
    margin-top: -110px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
    position: relative;
  }

  /* タイトル関連 */
  .works-title {
    display: flex;
    justify-content: center;
  }

  .works-image {
    max-width: 158px;
    height: auto;
  }

  .works-subtitle {
    margin-top: 10px;
    color: #ee1d52;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 900;
    line-height: 22px;
    letter-spacing: 1.82px;
    text-align: center;
    margin-bottom: 0px;
  }

  /* スライダー全体のコンテナ */
  .splide {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    visibility: visible;
    height: auto;
    min-height: 800px;
    padding-bottom: 50px; /* ページネーション用の余白 */
  }

  /* スライドトラック */
  .splide__track {
    width: 100%;
    overflow: visible;
    padding-bottom: 40px;
    height: auto;
  }

  /* スライドリスト */
  .splide__list {
    display: flex !important;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    height: auto;
    list-style: none;
  }

  /* 個別のスライド */
  .splide__slide {
    width: 100%;
    opacity: 1;
    visibility: visible;
    position: relative;
    height: auto;
    min-height: 700px;
  }

  /* モックアップコンテナ */
  .works-mockup-container {
    width: 100%;
    max-width: 268px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: auto;
    padding: 40px 0;
    padding-top: 0px;
  }

  /* 成果表示部分 */
  .works-result-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: self-end;
    gap: 10px;
  }

  /* 装飾線 */
  .decoration-left,
  .decoration-right {
    width: 21px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  /* 成果テキスト */
  .works-result {
    color: #0f1c80;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 42px;
    letter-spacing: 2px;
  }

  .result-line {
    display: block;
    text-align: center;
    margin: 5px 0;
  }

  .result-line span {
    display: inline-block;
    position: relative;
  }

  .result-line span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 20px;
    background: #fff300;
    width: 100%;
    z-index: -1;
  }

  /* モックアップ本体 */
  .works-mockup {
    width: 268px;
    height: 540.2px;
    position: relative;
    margin: 0 auto;
    display: block;
  }

  /* モックアップ背景 */
  .mockup-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    object-fit: contain;
  }

  /* サムネイル画像 */
  .works-thumbnail {
    position: absolute;

    object-fit: cover;
    z-index: 2;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
  }

  /* クライアント情報 */
  .works-client-info {
    width: 100%;
    margin-top: 20px;
    text-align: center;
    max-width: 233px;
  }

  .works-account-type {
    width: 233px;
    height: 26.6px;
    margin: 0 auto;
    border-radius: 36px;
    background: rgba(15, 28, 128, 0.8);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0.7px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .works-client-name {
    margin-top: 10px;
    color: #0f1c80;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 2.4px;
    text-align: center;
  }

  /* スライダーのナビゲーション */
  .splide__arrows {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
  }

  .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
  }

  .splide__arrow:hover {
    opacity: 0.8;
  }

  .splide__arrow--prev {
    left: -20px;
  }

  .splide__arrow--next {
    right: -20px;
  }

  .splide__arrow svg {
    width: 20px;
    height: 20px;
    fill: #0f1c80;
  }

  /* ページネーション */
  .splide__pagination {
    bottom: -30px;
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 3;
    padding: 1em 0;
  }

  .splide__pagination__page {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: #ccc;
    border: none;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .splide__pagination__page.is-active {
    background: #0f1c80;
    transform: scale(1.2);
  }

  /* CTAボタン */
  .works-cta-button {
    margin-top: 30.5px;
    width: 280px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 74.48px;
    background: #ee1d52;
    box-shadow: 4.5px 4.5px 9px 0px rgba(163, 164, 165, 0.7);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .works-cta-text {
    width: 207px;
    height: 19.3px;
    color: #fff;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 2.1px;
  }

  .works-cta-button:hover {
    opacity: 0.9;
    transition: opacity 0.3s ease;
  }

  .mobile-works .splide__track {
    transition: transform 0.3s ease;
    will-change: transform;
  }

  /* スライド時のトランジションを滑らかにする */
  .mobile-works .splide__track--dragging {
    transition: none;
  }

  /* クライアントインタビューセクション - モバイル */
  .client-interview-section {
    margin-top: 60px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
  }

  .client-interview-title .section-title {
    font-size: 23px;
    line-height: 40px;
    letter-spacing: 1.5px;
  }

  .client-interview-subtitle {
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0.8px;
    margin: 20px 0 30px 0;
  }

  .client-interview-video-container {
    max-width: 100%;
  }

  .client-interview-video {
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  body {
    zoom: 1;
  }
  .background-container {
    zoom: 1;
  }
}
.contact-button rect {
  width: 100%;
}
.desktop-works .works-mockup-container .works-client-info .works-client-name {
  margin-left: 0px;
}