@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Noto Sans JP", sans-serif;
}
a{
  text-decoration: none;
  color: black;
}
.textpoint-blue{
  color: #0060d2;
}
.sp_br{
  display:none;
}
.pc_br{
  display: block;
}

/* ヘッダー */
header{
  height: 74px;
  position: relative;
  z-index: 100;
}
.header-area{
  display: flex;
  justify-content: space-between;
  padding: 15px;
  box-shadow: 0 0 8px #78b2f7;
  align-items: center;
}
.header-logo img{
  width: 50%;
}
.header-btn{
  display: flex;
  gap: 10px;
}
/* ボタンのスタイル */
.btn a {
  position: relative;
  display: block;
  width: 200px;
  padding: 12px 8px 12px 0;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
/* アイコンのスタイル */
.btn-triangle-right a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 9px solid #fff;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;
}
.btn-dl{
  background-image: linear-gradient(90deg, #00a59f, #00ceab);
  border-radius: 25px;
}
.btn-ct{
  background-image: linear-gradient(90deg, #ff2652, #ff8083);
  border-radius: 25px;
}
/* メインビジュアル */
.main-visual{
  height: 980px;
  margin: 0 auto;
  background-repeat: repeat;
  background-size: 100%;
  background-position: center;
  background-image: linear-gradient(180deg, #0060d2, #99f4df);
  position: relative;
}
.main-visual-contents{
  width: 100%;
  height: 90%;
  margin: 0 auto;
  background-image:url(img/backFukidashiTopFukidashi.png);
  background-repeat:repeat-x;
  background-size: cover;
  background-position:center;
}
.visual-area{
  width: 1230px;
  margin: 0 auto;
  text-align: center;
  background-image: url(img/topImg_01.png), url(img/topImg_02.png),url(img/topFukidashiImg01.png),url(img/topFukidashiImg02.png),url(img/backWhiteWave_ver2.svg);
  background-repeat:no-repeat;
  background-size: 250px, 215px, 120px, 120px, 1250px;
  background-position: 19% 58%, 80% 58%, 16% 6%, 80% 9%, 50% -30%;
}
.visual-area img{
  width: 485px;
  padding: 20px 0;
}
.sub-message{
  padding: 50px 0px 20px;
}
.sub-message p{
  color: #fff;
  text-shadow: 0px 0px 12px rgb(1 61 134);;
}
.sub-message-basic{
  font-weight: 800;
  font-size: 42px;
}
.sub-message-point{
  font-weight: 900;
  font-size: 52px;
}
.point-area{
  width: 850px;
  background-color: #fff;
  margin: 0 auto;
  box-shadow: 0 0 8px #78b2f7;
  padding: 22px;
  border-radius: 10px;
}
.point-title{
  font-size: 22px;
  font-weight: 700;
  color: #3b536c;
}
.point{
  display: flex;
  justify-content: center;
  gap: 30px;
  padding-top: 15px;
  align-items: center;
}
.point-item{
  background-color: #e2f0ff;
  flex: 0 1 200px; /* 3つの要素を均等な幅にする */
  aspect-ratio: 1 / 1; /* 縦横比を1:1にする */
  padding: 20px;
  width: 200px;
  height: 200px;
  border-radius: 210px;

 /* 中の要素を中央に配置 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.3s ease;
   box-sizing: border-box;
}
.point-item p{
  margin: 0;
  font-size: 20px;
}
.point-imp{
  font-size: 25px;
  font-weight: 800;
}
.main-visual::before {
  content: "";
  width: 100%;
  height: 130px;
  background-color: #fff;
  position: absolute;
  bottom: 0px;
  clip-path: polygon(0% 0%, 0% 100%, 50% 100%);
}
.main-visual::after {
  content: "";
  width: 100%;
  height: 130px;
  background-color: #fff;
  position: absolute;
  bottom: 0px;
  clip-path: polygon(50% 100%, 100% 0%, 100% 100%);
  }

/* 課題 */
.trouble{
  text-align: center;
  padding: 82px 0 0;
}
.gray-text{
  color: #3b536c;
  font-size: 40px;
  font-weight: 700;
}
.trouble img{
  width: 900px;
  margin: 0;
}
.tippy-word img{
  width: 800px;
}
.trouble h2{
  color: #3b536c;
  font-size: 40px;
}

/* 伝わらない理由 */
.cause{
  text-align: center;
  padding: 82px 0 0;
}
.cause h2{
  color: #005fd3;
  font-size: 40px;
  position: relative;
  padding-bottom: 28px;
}
.cause h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70px;
  height: 8px;            /* ラインの太さ */
  background-color: #005fd3;
  border-radius: 10px;    /* 角を丸くする設定 */
}
.cause-text{
  width: 800px;
  margin: 0 auto;
  padding: 28px 0 50px;
  line-height: 30px;
}
.cause-lead{
  display: flex;
  flex-flow: column;
  gap: 25px;
}
.cause-lead p{
  background-color: #005fd3;
  color: #fff;
  width: 350px;
  margin: 0 auto;
  font-size: 30px;
  padding: 10px;
}
.cause-lead img{
  width: 800px;
  margin: 0 auto;
}
.cause-tippy{
  padding: 30px 0;
}
.cause-message{
  font-size: 32px;
  font-weight: 800;
  color: #002154;
}
.message-imp{
  font-size: 62px;
  font-feature-settings: "palt";
}
.imp-gra{
  background: linear-gradient(to right, #9edcce 0%, #319cd1 50%, #005fd3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 浸透させることのメリット */
.merit::before {
  content: "";
  width: 100%;
  height: 130px;
  background-color: #fff;
  position: absolute;
  top: -1px;
  clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}
.merit{
  width: 100%;
  padding: 82px 0 190px;
  margin: 0 auto;
  height: auto;
  background-image:url(img/backFukidashi_01.jpg);
  background-repeat:repeat-x;
  background-size: cover;
  background-position:center;
  position: relative;
}
.merit::after{
  content: "";
  width: 100%;
  height: 240px;
  position: absolute;
  bottom: -1px;
  background-image: url(img/backWhiteShippo.svg);
  background-repeat:repeat-x;
  background-size: cover;
  background-position:center;
  height: 240px;
  z-index: 90;
}
.merit h2{
  color: #005fd3;
  font-size: 40px;
  position: relative;
  text-align: center;
  padding-top: 148px;
  padding-bottom: 28px;
}
.merit h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70px;
  height: 8px;            /* ラインの太さ */
  background-color: #005fd3;
  border-radius: 10px;    /* 角を丸くする設定 */
}
.merit-text{
  width: 800px;
  margin: 0 auto;
  padding: 28px 0 50px;
  line-height: 30px;
  text-align: center;
  color: #005fd3;
}
.merit-lead{
  padding-bottom: 25px;
}
.merit-lead p{
  background-color: #005fd3;
  color: #fff;
  width: 620px;
  text-align: center;
  margin: 0 auto;
  font-size: 30px;
  padding: 9px 10px 11px;
}
.merit-container{
  width: 950px;
  margin: 0 auto;
  padding: 32px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 950px;
  gap: 32px;
}
.merit-card-area{
  padding: 30px 0;
}
.merit-card {
  position: relative;
  border: 2px solid #005fd3;
  background-color: #fff;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px;
  /* flex-grow: 1 を指定することで、行の余白を埋めるように伸びます */
  flex: 1 1 260px;
}
 /* 枠をはみ出す数字（正円・中央配置） */
 .merit-number {
  position: absolute;
  /* サイズを固定して正円にする */
  width: 40px;
  height: 40px;
  top: -20px; /* 半分はみ出させる（高さの半分） */
  left: 50%;  /* 親の左から50%の位置へ */
  transform: translateX(-50%); /* 自身の幅の半分だけ左に戻して中央揃え */
  background-color: #005fd3;
  color: white;
  border-radius: 50%; /* 正円にする */
  /* 数字を円の中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  z-index: 10;
}
.merit-item{
  text-align: center;
}
.merit-item-title{
  font-size: 22px;
  color: #005fd3;
  font-weight: 700;
  padding: 15px 0;
  height: 85px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.merit-item-text{
  line-height: 26px;
  font-size: 15px;
}
.merit-message{
  margin: 0 auto;
  padding: 30px 0px;
}
.merit-message p{
  text-align: center;
  color: #fff;
}
.merit-message-basic{
  font-weight: 600;
  font-size: 32px;
}
.merit-message-point{
  font-weight: 800;
  font-size: 50px;
}

/* ３つの効果 */
.effect{
  text-align: center;
  padding: 0px 0 0;
}
.comic-area img{
  width: 900px;
  margin: 0 auto;
}
.effect h2{
  color: #005fd3;
  font-size: 40px;
  position: relative;
  padding: 40px 0 28px;
}
.effect h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70px;
  height: 8px;
  background-color: #005fd3;
  border-radius: 10px;
}
.effect-container {
  width: 950px;
  margin: 0 auto;
  padding: 80px 0 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 950px;
  gap: 32px;
}
.effect-card {
  position: relative;
  background-color: #eff6ff;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px;
  flex: 1 1 260px;
}
.effect-number {
  position: absolute;
  width: 40px;
  height: 40px;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #005fd3;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  z-index: 10;
}
.effect-item {
  text-align: center;
  min-height: 450px;
}
.effect-item img{
  width: 258px;
}
.effect-item-title {
  font-size: 22px;
  color: #005fd3;
  font-weight: 700;
  padding: 15px 0;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.effect-item-text {
  text-align: justify;
  line-height: 26px;
  font-size: 15px;
  height: 190px;
}
.source{
  font-size: 10px;
}
/* メソッド */
.method {
  width: 100%;
  padding: 82px 0 190px;
  margin: 0 auto;
  height: auto;
  background-image: url(img/backFukidashi_02.jpg);
  background-repeat: repeat-x;
  background-size: cover;
  background-position: center;
  position: relative;
}
.method::before {
  content: "";
  width: 100%;
  height: 130px;
  background-color: #fff;
  position: absolute;
  top: -1px;
  clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}
.method::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px; /* フェードする高さ */
  /* 白から透明(rgba(255,255,255,0))へのグラデーション */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.method h2{
  color: #fff;
  text-align: center;
  font-size: 40px;
  padding: 140px 0 120px;
}
.method-first {
  width: 950px;
  margin: 0 auto;
  padding: 32px;
  max-width: 950px;
  position: relative;
  background-color: #fff;
  border-radius: 16px;
}
.method-first-icon {
  position: absolute;
  width: 40px;
  height: 40px;
  top: -20px;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  z-index: 10;
}
.method-first-icon img{
  width: 120px;
}
.method-first-title{
  padding: 40px 0;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
}
.method-item-read{
  text-align: center;
  font-size: 18px;
  line-height: 30px;
}
.method-first-item img{
  text-align: center;
  margin: 0 auto;
  padding: 32px 0;
}
.method-item-text{
  text-align: justify;
  line-height: 27px;
}
.method-first-img{
  margin: 0 auto;
  text-align: center;
}
.method-container {
  width: 950px;
  margin: 0 auto;
  padding: 90px 0 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 950px;
  gap: 32px;
}
.method-card {
  position: relative;
  background-color: #fff;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px;
  flex: 1 1 260px;
}
.method-icon {
  position: absolute;
  width: 30px;
  height: 30px;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.method-icon img{
  width: 120px;
}
.method-item {
  text-align: center;
  min-height: 310px;
}
.method-item-title {
  font-size: 25px;
  font-weight: 700;
  padding: 40px 0 20px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.method-item-text2 {
  text-align: justify;
  line-height: 26px;
  font-size: 15px;
}

 /* 導入事例 */
 /* カルーセルコンテナ */
.carousel-container {
  width: 90%;
  max-width: 870px; /* 1枚表示に合わせたサイズ感 */
  margin: auto;
  padding: 40px 0;
}

.case-title{
  margin: 0 auto;
  text-align: center;
  background-color: #f0f6ff;
  height: 60px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  position: relative;
  font-size: 26px;
  font-weight: 700;
  color: #005fd3;
}
.case-title::after{
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  bottom: -15px;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 25px solid #f1f6ff;
  border-bottom: 0;
  box-sizing: border-box;
}
.my-carousel{
  padding: 30px 0 0;
}

        /* カルーセルアイテムの基本的なスタイリング */
        .carousel-item {
          background-color: #ffffff; /* アイテムの背景色 */
          border-radius: 0.75rem; /* 角を丸くする */
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加 */
          padding: 2rem;
          margin: 0 0.5rem; /* アイテム間のスペース */
          text-align: center;
          font-size: 1.5rem;
          font-weight: bold;
          color: #334155; /* テキストの色 */
          height: 410px; /* 1枚表示で見栄えが良くなるよう少し高さを調整 */
          display: flex;
          justify-content: center;
          align-items: center;
          width: 860px;
      }
      .carousel-item-title{
        text-align: left;
        color: #005fd3;
        font-size: 23px;
      }
        /* コンテナ */
        .case-study-container {
          max-width: 1000px;
          margin: 0 auto;
          background-color: #ffffff;
          padding: 30px;
          border-radius: 4px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }

      /* フレックスレイアウト（横並び） */
      .content-flex {
          display: flex;
          gap: 30px;
          align-items: flex-start;
          padding-top: 10px;
      }

      /* 左側：画像セクション */
      .image-box {
          flex: 0 0 40%;
          max-width: 260px;
      }

      .image-box img {
          width: 100%;
          height: auto;
          display: block;
          border-radius: 2px;
          object-fit: cover;
      }

      /* 右側：テキストセクション */
      .text-box {
          flex: 1;
          text-align: left;
      }

      .main-headline {
          font-size: 22px;
          font-weight: 700;
          margin-bottom: 8px;
          color: #1a1a1a;
      }

      .sub-headline {
          font-size: 19px;
          font-weight: 700;
          margin-bottom: 15px;
          color: #333;
      }

      .description {
          font-size: 15px;
          color: #444;
          margin-bottom: 20px;
          text-align: justify;
      }

      /* リンク部分 */
      .link-area {
          font-size: 14px;
          color: #666;
      }

      .link-area a {
          color: #0066cc;
          text-decoration: none;
          word-break: break-all;
      }

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

      /* ボタンのスタイル */
.btn-link a {
  position: relative;
  display: block;
  width: 200px;
  padding: 12px 8px 12px 0;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  background-image: linear-gradient(90deg, #005fd3, #78b2f8);
  border-radius: 25px;
}
/* アイコンのスタイル */
.btn-link-triangle a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 9px solid #fff;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;
}

      /* Slickの矢印のコンテナを完全にリセット */
      .slick-prev,
      .slick-next {
          font-size: 0;
          line-height: 0;
          position: absolute;
          top: 50%;
          display: block;
          width: 40px;
          height: 40px;
          padding: 0;
          transform: translate(0, -50%);
          cursor: pointer;
          color: transparent;
          border: none;
          outline: none;
          background: transparent !important; /* 背景を完全に透明に */
          z-index: 10;
      }

      /* 矢印アイコン自体のスタイル (水色の線のみ) */
      .slick-prev:before,
      .slick-next:before {
          font-family: 'slick';
          font-size: 3rem;
          line-height: 1;
          opacity: 1;
          color: #005fd3 !important; 
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          background: none !important;
          border: none !important;
          box-shadow: none !important;
      }

      /* 左矢印の位置調整 */
      .slick-prev {
          left: -60px; /* 1枚表示で見やすくなるよう外側へ配置 */
      }
      /* 右矢印の位置調整 */
      .slick-next {
          right: -60px;
      }

      .slick-prev:before {
          content: '←';
      }
      .slick-next:before {
          content: '→';
      }

      /* ドットナビゲーションのスタイリング */
      .slick-dots {
          position: absolute;
          bottom: -50px;
          display: block;
          width: 100%;
          padding: 0;
          margin: 0;
          list-style: none;
          text-align: center;
      }
      .slick-dots li {
          position: relative;
          display: inline-block;
          width: 20px;
          height: 20px;
          margin: 0 5px;
          cursor: pointer;
      }
      .slick-dots li button {
          font-size: 0;
          line-height: 0;
          display: block;
          width: 20px;
          height: 20px;
          padding: 5px;
          cursor: pointer;
          color: transparent;
          border: 0;
          outline: none;
          background: transparent;
      }
      .slick-dots li button:before {
          font-family: 'slick';
          font-size: 10px;
          line-height: 20px;
          position: absolute;
          top: 0;
          left: 0;
          width: 20px;
          height: 20px;
          content: '•';
          text-align: center;
          opacity: .25;
          color: #9ca3af !important;
      }
      .slick-dots li.slick-active button:before {
          opacity: .75;
          color: #005fd3 !important; /* アクティブなドットも水色に */
      }


 /* 選ばれる理由 */
.fact{
  width: 100%;
  padding: 100px 0 50px;
  margin: 0 auto;
  height: auto;
}
.fact h2{
  color: #005fd3;
  font-size: 40px;
  position: relative;
  text-align: center;
  padding-bottom: 28px;
}
.fact h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70px;
  height: 8px;            /* ラインの太さ */
  background-color: #005fd3;
  border-radius: 10px;    /* 角を丸くする設定 */
}
.fact-contents{
  width: 900px;
  margin: 0 auto;
  padding: 50px 0 0;
}
.fact-item-title{
  padding: 10px;
  color: #005fd3;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  background-image: linear-gradient(90deg, #e1f5f0, #c7f0ff, #9ed1ff);
}
.fact-item{
  display: flex;
  justify-content: flex-end;
  padding: 27px 0px;
  gap: 30px;
}
.fact-item-text{
  width: 400px;
  font-size: 20px;
  text-align: justify;
  line-height: 35px;
}
.fact-item-img img{
  width: 470px;
}
.fact-item-2{
  display: flex;
  flex-flow: column;
  padding: 27px 0px;
  gap: 30px;
}
.fact-item-text-2{
  font-size: 20px;
  text-align: justify;
  line-height: 35px;
}
.fact-item-img-2 {
 margin: 0 auto;
 text-align: center;
}
.fact-item-img-2 img{
  width: 100%;
}


/* トータルプロデュースの流れ */
.flow::before {
  content: "";
  width: 100%;
  height: 240px;
  position: absolute;
  top:-75px;
  background-image: url(img/backWhiteWave2.svg);
  background-repeat: repeat-x;
  background-size: cover;
  background-position: center;
  z-index: 90;
}
.flow{
 width: 100%;
 padding: 75px 0 190px;
 margin: 0 auto;
 height: auto;
 background-image:url(img/backFukidashi_01.jpg);
 background-repeat:repeat-x;
 background-size: cover;
 background-position:center;
 position: relative;
}
.flow::after{
  content: "";
  width: 100%;
  height: 240px;
  position: absolute;
  bottom:-75px;
  background-image: url(img/backWhiteWave3.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.flow h2{
 color: #005fd3;
 font-size: 40px;
 position: relative;
 text-align: center;
 padding-top: 148px;
 padding-bottom: 28px;
}
.flow h2::after {
 content: "";
 position: absolute;
 left: 50%;
 bottom: 0;
 transform: translateX(-50%);
 width: 70px;
 height: 8px;            /* ラインの太さ */
 background-color: #005fd3;
 border-radius: 10px;    /* 角を丸くする設定 */
}

.flow-contents{
  display: flex;
  margin: 0 auto;
  justify-content: center;
  flex-direction: row;
  height: 500px;
  gap: 16px;
}
.step-items{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.step-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #005fd3;
  border-right: 0;
}
.step-text-box{
  display: flex;
  width: 15px;
  height: 340px;
  margin: 0 auto;
  text-align: center;
  background-color: #fff;
  padding: 35px;
  border-radius: 60px;
  border: solid, #005fd3, 2px;
  justify-content: center;
  align-items: center;
}
.step-text-box p{
  writing-mode: vertical-rl;
  font-size: 20px;
  font-weight: 600;
  color: #005fd3;
}
.flow-tippy{
  margin: 0 auto;
  text-align: center;
  padding: 20px 0 80px;
}

/* よくあるご質問 */
.faq{
 width: 100%;
 padding: 0px 0 75px;
 margin: 0 auto;
 height: auto;
}
.faq h2{
 color: #005fd3;
 font-size: 40px;
 position: relative;
 text-align: center;
 padding-top: 0px;
 padding-bottom: 28px;
}
.faq h2::after {
 content: "";
 position: absolute;
 left: 50%;
 bottom: 0;
 transform: translateX(-50%);
 width: 70px;
 height: 8px;            /* ラインの太さ */
 background-color: #005fd3;
 border-radius: 10px;    /* 角を丸くする設定 */
}
        /* Q&Aアイテム */
        .faq-list {
          display: flex;
          flex-direction: column;
          gap: 24px;
          margin: 0 auto;
          justify-content: center;
          align-items: center;
          padding-top: 47px;
      }

      .faq-item {
          background-color: #f0f7ff;
          border-radius: 20px;
          width: 850px;
          padding: 24px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
          border: 1px solid rgba(0, 91, 200, 0.05);
      }

      /* 質問(Q)エリア */
      .faq-question {
          display: flex;
          align-items: flex-start;
          gap: 16px;
          margin-bottom: 16px;
      }

      .q-icon {
          color: #005fd3;
          font-size: 28px;
          font-weight: 900;
          line-height: 1;
          font-family: Arial, sans-serif;
      }

      .q-text {
          font-size: 18px;
          font-weight: bold;
          color: #005fd3;
          margin-top: 2px;
      }

      /* 区切り線 */
      .faq-divider {
          border: 0;
          border-top: 1px solid #005bc8;
          opacity: 0.2;
          margin: 0 0 16px 0;
      }

      /* 回答(A)エリア */
      .faq-answer {
          display: flex;
          align-items: flex-start;
          gap: 16px;
      }

      .a-icon {
          color: #f486ad;
          font-size: 28px;
          font-weight: 900;
          line-height: 1;
          font-family: Arial, sans-serif;
      }

      .a-text {
          font-size: 16px;
          color: #444;
          white-space: pre-wrap; /* 改行を反映させる設定 */
          margin-top: 4px;
      }

footer::before {
  content: "";
  width: 100%;
  height: 240px;
  position: absolute;
  top:-75px;
  background-image: url(img/backWhiteWave2.svg);
  background-repeat: repeat-x;
  background-size: cover;
  background-position: center;
  z-index: 90;
}

footer{
 width: 100%;
 padding: 82px 0 0px;
 margin: 0 auto;
 height: auto;
 background-image:url(img/backFukidashi_01.jpg);
 background-repeat:repeat-x;
 background-size: cover;
 background-position:center;
 position: relative;
}

.button-container {
  display: flex;
  gap: 20px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 176px;
  padding-bottom: 30px;
}

/* --- 追従バー --- */
.floating-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.05);
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 1000;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
   }
/* 表示状態のクラス */
.floating-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  }
 /* 着地地点に来た時に強制的に隠すクラス */
 .floating-cta.is-hidden-at-bottom {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  }


/* ボタンの基本スタイル */
.cv-button {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  border-radius: 24px;
  color: #ffffff;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

/* ホバー時の動き */
.cv-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  filter: brightness(1.05);
}

/* クリック時の動き */
.cv-button:active {
  transform: translateY(0);
}

/* テキストエリア */
.button-content {
  display: flex;
  flex-direction: column;
  text-align: center;
  flex-grow: 1;
}

.main-text {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

.sub-text {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.95;
  letter-spacing: 0.02em;
}

/* CSS border による三角形の矢印 */
.arrow-icon {
  width: 0;
  height: 0;
  border-style: solid;
  /* 上:11px, 右:0, 下:11px, 左:15px で右向き三角形を作成 */
  border-width: 11px 0 11px 15px;
  border-color: transparent transparent transparent #ffffff;
  margin-left: 10px;
  transition: var(--transition);
  flex-shrink: 0;
}

/* ホバー時に矢印を少し右に動かす */
.cv-button:hover .arrow-icon {
  transform: translateX(5px);
}

/* 個別カラー設定 */
.btn-green {
  background-image: linear-gradient(90deg, #00a59f, #00ceab);
  border-radius: 25px;
}

.btn-red {
  background-image: linear-gradient(90deg, #ff2652, #ff8083);
  border-radius: 25px;
}

.footer-tippy{
  margin: 0 auto;
  text-align: center;
  padding: 30px 0 30px;
}

.copyright{
  margin: 0 auto;
  text-align: center;
  background-color: #334155;
  padding: 20px 0;
  color: #fff;
  font-weight: 100;
}

/***
 * SPレイアウト
 *************************/

 @media only screen and (max-width: 768px) and (min-width: 321px) {
  .sp_br{
    display:block;
  }
  .pc_br{
    display: none;
  }
  .sp_span{
    display: block;
    white-space: nowrap;
  }

  /* ヘッダーエリア */

  header {
    height: 40px;
  }
  .header-area {
    height: 40px;
    text-align: center;
  }
  .header-btn {
    display: none;
  }
  /* ビジュアルエリア */
  .visual-area {
    width: 100%;
    background-repeat: no-repeat;
    background-size: 65px, 57px, 20px, 20px, 95%;
    background-position: 10% 8%, 90% 8%, 16% 6%, 80% 9%, 50% 0%;
  }
  .main-visual {
    height: 700px;
  }
  .visual-area img {
    width: 40%;
  }
  .sub-message-basic {
    font-size: 17px;
  }
  .sub-message-point {
    font-size: 20px;
  }
  .sub-message {
    padding: 12px 0px;
  }
  .point-area {
    width: 85%;
    padding: 15px;
    border-radius: 10px;
  }
  .point {
    justify-content: center;
    flex-direction: column;
    gap: 15px;
  }
  .point-area p{
    font-size: 14px;
  }
  .point-title p{
    font-size: 18px;
  }
  .point-item {
    flex: 0 1 60px;
    padding: 10px;
    width: 264px;
    border-radius: 18px;
    flex-direction: column;
    transition: transform 0.3s ease;
    aspect-ratio: 0;
  }
  .point-imp {
    font-size: 20px;
  }
    /* 課題エリア */
  .trouble {
    text-align: center;
    padding: 45px 0 0;
  }
  .gray-text {
    font-size: 20px;
  }
  .trouble img {
    width: 100%;
  }
  .tippy-word img {
    width: 90%;
  }
/* 伝わらない理由 */
  .cause {
    width: 90%;
    margin: 0 auto;
    padding: 45px 0 0;
  }
  .cause h2 {
    font-size: 22px;
    padding-bottom: 20px;
  }
  .cause-text {
    width: 90%;
    margin: 0 auto;
    padding: 28px 0 50px;
    line-height: 30px;
    /* font-size: 16px; */
  }
  .cause-text p{
    text-align: justify;
  }
  .cause-lead p{
    width: 80%;
    font-size: 18px;
    padding: 10px;
  }
  .cause-lead img{
    width: 100%;
  }

/* 浸透させることのメリット */
  .merit h2 {
    width: 90%;
    margin: 0 auto;
    font-size: 22px;
    padding-top: 100px;
    padding-bottom: 20px;
  }
  .merit-text {
    width: 90%;
    line-height: 26px;
    text-align: justify;
  }
  .merit-lead p {
    width: 90%;
    font-size: 19px;
    padding: 10px;
  }
  .merit-container {
    width: 90%;
  }
  .merit::after {
    width: 130%;
  }

/* ３つの効果 */
  .effect{
  width: 100%;
  }
  .comic-area img {
    width: 100%;
  }
  .effect-container {
    width: 90%;
  }
/* メソッド */
  .method h2 {
    width: 90%;
    margin: 0 auto;
    font-size: 35px;
  }
  .method-first {
    width: 90%;
  }
  .method-first-item img {
    width: 100%;
  }
  .method-container {
    width: 90%;
    gap: 70px;
  }
  .method-first-icon {
      width: auto;
}
  .method-first-icon img {
    width: 120px;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
/* 導入事例 */
  .content-flex {
    flex-direction: column;
  }
  .carousel-item {
    height: auto;
  }
  .carousel-container {
    width: 60%;
  }
  .btn-link a {
    width: 100%;
  }
/* 選ばれる理由 */
  .fact h2 {
    width: 90%;
    margin: 0 auto;
  }
  .fact-contents {
    width: 90%;
  }
  .fact-item {
    flex-direction: column;
    width: 100%;
  }
  .fact-item-text {
    width: 100%;
  }
  .fact-item-img img {
    width: 100%;
  }
/* トータルプロデュースの流れ */
  .flow h2 {
    width: 90%;
    margin: 0 auto;
  }
  .flow-contents {
    padding-top: 42px;
    height: auto;
  }
  .flow-contents {
    flex-direction: column;
    padding-top: 42px;
  }
  .step-items {
    flex-direction: column;
  }
  .step-text-box p {
    writing-mode: horizontal-tb;
  }
  .step-text-box {
    width: 90%;
    height: 80px;
  }
  .step-arrow {
    border-top: 15px solid #005fd3;
    border-bottom: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
  }
  .faq-item {
    width: 90%;
  }
  footer{
    width: 100%;
  }
  footer::before {
    height: 100px;
  }
  .button-container {
    padding-top: 40;
    padding-bottom: 30px;
    margin: 0 auto;
    width: 90%;
    padding-top: 10px;
  }
  .final-cta-section{
    width: 100%;
  }
  .floating-cta {
    width: 100%;
    flex-direction: column;
  }
  .main-text {
    font-size: 20px;
  }

 }