html {
  font-size: 16px;
}

@media (max-width: 767px) {
  html {
    font-size: 14px;
  }
}

html, body {
  /* 縦方向のバウンス効果を無効にする */
  overscroll-behavior-y: none;
}

:root {
  --header-h: 80px;
  --brand: #F29600;
  --color-bg: #fff;
  --gutter-sp: 20px;
  --burger-w: 28px;
  --burger-h: 1px;
  --burger-gap: 4px;
}

li {
  padding: 0;
  margin: 0;
}

body {
  min-width: 320px;
  min-height: 50vh;
  background-color: #fff;
}

.container {
  /* メインのコンテンツラッパーに設定する例 */
  min-width: 240px;
  /* その他のスタイル (例: 中央寄せ、最大幅など) */
  margin: 0 auto;
  max-width: 1200px; /* 例: 最大幅は1200pxにする */
}
/* ===============================
  背景画像表示の終了 (Intro DX以降のセクション)
================================ */

a:where(:not(.wp-element-button)) {
  text-decoration: none;
}

p {
  color: #2A2A2A;
  letter-spacing: 0.1em;
  margin: 0;
  padding: 0;
  line-height: 1.8;
  font-size: 16px;
}

h2 {
  margin: 0;
  padding: 0;
}

h3 {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  padding-inline: 24px;
  margin: 0 auto;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}


.sp-br {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-br {
    display: inline;
  }

  .container {
    padding: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  p {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --header-h: 64px;
  }
  p {
    font-size: 14px;
  }
}

/* スクロール固定 */
html.no-scroll,
html.no-scroll body {
  overflow-x: hidden;
  width: 100%;
}

/* ===============================
  Header (PC & Default)
================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999999;
  background: var(--color-bg, #fff);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: 3.2vw;
  position: relative;
  z-index: 401;
  max-width: 100%;
}

.site-header.is-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* Overlay */
.site-header--overlay {
  background: rgba(0, 0, 0, 0.5);
  border-bottom-color: transparent;
}

.site-header--overlay .site-nav__list a {
  color: #fff;
  font-weight: 400;
}

.site-header.is-open.site-header--overlay {
  background: var(--color-bg, #fff);
}

/* Logo & Nav */
.site-logo__img {
  width: 180px;
  height: auto;
  display: none;
}

.site-logo__img--default {
  display: block;
}

.site-header--overlay .site-logo__img--default {
  display: none;
}

.site-header--overlay .site-logo__img--white {
  display: block;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}

.site-nav__list a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #2A2A2A;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.05em;
}

.site-nav__list a:hover {
  color: var(--brand);
}

/* Button Final (HTML dual-layer method) */
.btn-contact {
  display: inline-block;
  border-radius: 9999px;
  padding: 2px;
  background: linear-gradient(to right, #F29600, #00A3E0);
  text-decoration: none;
  transition: all .3s ease;
  border: none;
}

.btn-contact__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #fff;
  color: #333;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}


.btn-contact:hover .btn-contact__inner {
  background-color: rgba(255, 255, 255, 0.8);
  color: #2A2A2A;
}

.btn-contact__circle {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1782A8;
  margin-right: -6px;
}

.btn-contact__circle::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-mask-image: url(../images/arrow-icon.svg);
  mask-image: url(../images/arrow-icon.svg);
  -webkit-mask-size: 50% auto;
  mask-size: 50% auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.btn-contact__circle-2 {
  border:  4px solid #1DA3D2;
  transition: border-color 0.2s ease-in-out;

}

.btn-contact:hover .btn-contact__circle-2 {
    /* ホバー時の背景色（変更したい色） */
    border-color: #a0dbf1; /* 例: オレンジに変更 */
    opacity: 1; /* 必要に応じて表示する */
}

.en-btn-text {
  font-family: "Lexend Zetta", sans-serif;
  font-weight: 400;
  letter-spacing: -0.15em;

}

.jp-btn-text {
  font-family: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Hamburger */
.site-nav__toggle {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  width: 44px;
  height: 44px;
  position: relative;
  border-radius: 8px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.site-nav__toggle:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.burger {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--burger-w);
  height: 0;
  transform: translate(-50%, -50%);
}

.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--burger-h);
  border-radius: 1px;
  transform-origin: center;
  transition: all .2s ease;
}

.burger::before {
  transform: translateY(calc(-1 * var(--burger-gap)));
}

.burger::after {
  transform: translateY(var(--burger-gap));
}

.burger::before,
.burger::after {
  background-image: linear-gradient(90deg, #F29600 0%, #00A3E0 100%);
}

.site-header--overlay .burger::before,
.site-header--overlay .burger::after {
  background-image: none;
  background-color: #fff;
}

.site-header.is-open .burger::before {
  transform: rotate(45deg);
}

.site-header.is-open .burger::after {
  transform: rotate(-45deg);
}

.site-header.is-open .burger::before,
.site-header.is-open .burger::after {
  background-image: none;
  background-color: #111;
}

.site-header--overlay.is-open .burger::before,
.site-header--overlay.is-open .burger::after {
  background-color: #fff;
}

/* PC/SP 表示切替 (Default is SP) */
.site-header__nav-wrapper {
  display: none;
}

.site-nav--pc {
  display: none;
}

.site-header__cta--pc {
  display: none;
}

.site-nav--drawer {
  display: flex;
}

.site-nav__toggle {
  display: block;
}

/* ===============================
  Tablet & PC Overrides (min-width: 769px)
================================ */
@media screen and (min-width: 768px) {
  .site-nav--pc {
    display: block;
  }

  .site-header__cta--pc {
    display: block;
  }

  .site-nav--drawer {
    display: none;
  }

  .site-nav__toggle {
    display: none;
  }

  .site-header__nav-wrapper {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  /* PC用ボタンのサイズ調整 */
  .site-header__cta--pc .btn-contact__inner {
    height: 34px;
    padding: 6px 28px;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
  }

  .site-header__cta--pc .btn-contact__circle {
    width: 28px;
    height: 28px;
  }

  .site-header__cta--pc .btn-contact__circle::before {
    font-size: 12px;
  }

  /* オーバーレイ状態のスタイル */
  .site-header--overlay .site-header__cta--pc .btn-contact__inner {
    background-color: #0E4460;
    color: #fff;
    margin-top: 0.02em;
  }

  /* オーバーレイ時のホバースタイルを追加 */
  .site-header--overlay .site-header__cta--pc .btn-contact:hover .btn-contact__inner {
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
  }

  .site-header__cta--pc .btn-contact__inner-2 {
  gap: 24px;
  
}

.section-view-btn {
  top: 160px;
  right: 6vw;
  position: absolute;
}
}

/* Tablet Header Adjustments (max-width: 1199px and min-width: 769px) */
@media screen and (max-width: 1199px) and (min-width: 769px) {
  /* ナビゲーションとお問い合わせボタンの間の余白を調整 */
  .site-header__nav-wrapper {
    gap: 16px;
  }

  /* ナビゲーション項目の間の余白を調整 */
  .site-nav__list {
    gap: 12px;
  }

  /* ナビゲーションの文字サイズを調整 */
  .site-nav__list a {
    font-size: 14px;
  }

  .site-header__cta--pc .btn-contact__inner {
    padding: 4px 16px;
    font-size: 14px;
    margin-top: 0.04em !important;
    margin-left: -0.015em !important;
  }

  .site-logo__img {
    width: 160px;
  }
}

/* ===============================
  SP Menu (max-width: 767px)
================================ */
@media screen and (max-width: 1023px) {
  .site-nav__toggle {
    display: block;
  }

  .site-logo__img {
    width: 130px;
  }

  .site-nav--drawer {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    z-index: 400;
    background: linear-gradient(to right, #FEF9F0, #F0FAFD);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .2s ease;
    padding-inline: var(--gutter-sp);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .site-header.is-open .site-nav--drawer {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .site-nav--drawer .site-nav__list {
    display: grid;
    gap: 14px;
    padding: 24px var(--gutter-sp) 12px;
  }

  .site-nav--drawer .site-nav__list li {
    position: relative;
    padding-left: 18px;
    display: flex;
    align-items: center;
  }

  .site-nav--drawer .site-nav__list li::before {
    content: "";
    position: absolute;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00A3E0;
  }

  .site-nav--drawer .site-nav__list a {
    color: #2A2A2A;
    font-size: 20px;
    line-height: 1.9;
    text-decoration: none;
    font-weight: 400;
  }

  .site-nav__cta {
    padding: 8px var(--gutter-sp) 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .site-nav--drawer .btn-contact__inner {
    height: 44px;
    padding: 8px 3.6em;
    gap: 12px;
    font-size: 16px;
  }

  .site-nav--drawer .btn-contact__circle {
    width: 32px;
    height: 32px;
  }

  .site-nav--drawer .btn-contact__circle::before {
    font-size: 14px;
  }

  .site-nav__foot {
    padding: 16px var(--gutter-sp) 24px;
    text-align: center;
    color: #6B7280;
    font-size: 12px;
  }

  .site-nav__foot a {
    color: inherit;
    text-decoration: none;
  }

  .site-nav__foot .sep {
    margin: 0 8px;
  }
}

/* ===============================
  Hero & Other (PC & Default)
================================ */
.hero {
  /* 🌟 高さの確保とz-index設定 */
  height: 100vh; 
  overflow: hidden;
  position: relative;
  z-index: 1; 
  width
: 100%;
  
  /* ヘッダー下に配置 */
  margin-top: calc(var(--header-h) * -1); 
}

.hero__img {
  width: 100%;
  height: 100vh;
  min-height: 640px;
  object-fit: cover;
  
  /* 🌟 画像を固定し、パララックス効果を生む */
  position: fixed; 
  bottom: 0;
  left: 0;
  z-index: -1; /* body/htmlの背面に配置 */ 
}

.hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
}
.anchor-target {
  scroll-margin-top: calc(var(--header-h) + 8px);
}



@media screen and (max-width:1199px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media screen and (max-width:767px) {
  .grid--3 {
    grid-template-columns: 1fr;
  }

}

/* キャッチコピー全体のスタイル（既存のものを調整） */
.catchphrase {
  position: absolute;
  top: calc(42%);
  left: 6vw;
  transform: translateY(-50%);
  color: #fff;
  text-align: left;
  font-family: 'shippori mincho', serif;
  line-height: 1.4;
  width: auto;
  padding-top: 24px;
}

.catchphrase>span {
  display: block;
}

/* PC & Default */
.line-base {
  font-size: clamp(72px, 5.82vw, 92px);
}

.line-large {
  font-size: clamp(88px, 6.5vw, 148px);
  position: relative;
  left: -0.03em;
  margin-top: -0.1em;
}

.line-medium {
  font-size: clamp(68px, 3.29vw, 96px);
}

  


@media  screen and (max-width: 1199px) {
  .catchphrase {
    top: calc(50% - 8vh);
  }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .catchphrase {
    left: 24px;
    top: calc(36%);
  }
}

/* ===============================
  Catchphrase (max-width: 767px)
================================ */
@media  screen and (max-width: 767px) {
  /* clamp()の最小値をさらに下回る場合にフォントサイズを固定 */
  .line-base {
    /* 画面幅に応じて320pxで36px、430pxで48pxになる */
    font-size: clamp(40px, calc(10.8vw), 64px);
    margin-right: -12px;
  }

  .line-large {
    font-size: clamp(52px, calc(16vw), 80px);
  }

  .line-medium {
    font-size: clamp(32px, calc(9.5vw), 56px);
  }

  .catchphrase {
    top: calc(24%);
  }
}

@media  screen and (max-width: 375px) {
  /* clamp()の最小値をさらに下回る場合にフォントサイズを固定 */
  .line-base {
    /* 画面幅に応じて320pxで36px、430pxで48pxになる */
    font-size: clamp(30px, calc(10.6vw), 64px);
  }
}



/* ===============================
  Intro DX (企業理念セクション #philosophy)
================================ */
.intro-dx {
  /* 修正点: 背景色のコントラストを上げて、動きを強調 */
  background: linear-gradient(135deg,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5));

  background-size: 1000% 1000%;
  animation: subtleGradient 8s ease infinite;
  position: relative;
  z-index: 200;
  padding-top: 15vh;
  padding-bottom: 60px;
}

.intro-dx-wrapper {
  padding-inline: 6vw;
}

.intro-dx.container {
  padding-inline: 0;
  max-width: 100%;
}

.intro-dx__content {
  color: #fff;
  margin: 0 auto;
  padding-bottom: 12px;
  padding-inline: 24px;
}

.intro-dx__sub-title {
  margin-bottom: 40px;
}

.section-sub-title {
  font-size: 24px;
  color: #fff;
  letter-spacing: 0.05em;
  font-weight: 300;
  font-family: 'shippori mincho', serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 新規追加: 8pxの青い円 */
.section-sub-title::before {
  content: "";
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ffffff;
  flex-shrink: 0;
}

.intro-dx__main-caption {
  font-size: clamp(40px, 4.4vw, 72px);
  font-family: 'shippori mincho', serif;
  font-weight: 300;
  line-height: 1.4;
  color: #fff;
  position: relative;
  left: -0.18em;
  margin-top: -4px;
  margin-bottom: 56px;
}

.intro-dx__text {
  color: #D1D5DB;
  font-size: 16px;
  line-height: 2.0;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .intro-dx {
    padding-inline: 0;
    padding-top: 80px;
  }

  .intro-dx__sub-title {
    margin-bottom: 32px;
  }

  .section-sub-title {
    font-size: 20px;
  }

  .intro-dx__main-caption {
    font-size: clamp(32px, 6vw, 48px);
    margin-bottom: 40px;
    left: -0.1em;
  }
  
  .intro-dx-wrapper {
    padding-inline: 24px;
  }

  .intro-dx__content {
    padding-inline: 0;
  }
}

/* ===============================
  Intro DX (max-width: 767px)
================================ */
@media screen and (max-width: 767px) {
  .intro-dx {
    padding-top: 48px;
    padding-bottom: 40px;
    padding-inline: 0 !important;
  }

  .intro-dx__wrapper {
    padding-inline: 6vw;
  }

  .intro-dx__sub-title {
    margin-bottom: 20px;
  }

  .section-sub-title {
    font-size: 16px;
  }

  .intro-dx__main-caption {
    margin-bottom: 28px;
    font-size: clamp(32px, 7vw, 48px);
    left: 0;
  }

    .intro-dx__content {
    padding-inline: 0;
  }

  body {
    padding-inline: 0;
  }
  
}

/* ===============================
  Logo Marquee 
================================ */

/* PC/タブレットでは、複製したリストを非表示にする */
.logo-marquee__list.is-duplicate-list {
    display: none;
}

.logo-marquee {
  margin-top: 20px;
  padding: 32px 0;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 6vw;
}


/* PC/タブレットでは、ラッパーは不要なのでdisplay:blockで初期化 */
.marquee-content {
    display: block;
    padding-inline: 24px;
}


ul.logo-marquee__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
  max-width: 1200px;
}

.logo-marquee__list li {
  flex-shrink: 0;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(56px, 6.5vw, 156px);
  border-radius: 4px;

}

.logo-marquee__list img {
  width: auto;
  max-width: 180px;
  height: 100%;
  display: block;
  object-fit: contain;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  ul.logo-marquee__list {
    /* 🌟 グリッドレイアウトに切り替え 🌟 */
    display: grid;
    /* 3列均等幅（fr）を設定 */
    grid-template-columns: repeat(3, 1fr); 
    /* 縦と横の隙間 */
    gap: 8px;
    padding-inline: 4vw; /* 左右の余白を適切に */
    /* 高さは自動調整 */
    height: auto; 
    /* 中央揃えのFlexbox設定を解除 */
    justify-content: unset;
    width: fit-content;
    margin: 0;
  }

  .logo-marquee__list li {
    width: 100%; /* 各ロゴがセルいっぱいに広がる */
    height: auto;
    justify-content: unset;
  }

  .marquee-content {
    padding-inline: 0px;

  }

  ul.logo-marquee__list {
    padding-inline: 0;
  }

  .logo-marquee {
    padding-inline: 24px;
  }


}


/* ===============================
  代表メッセージ (#message)
================================ */

#message {
  background-color: #ffffff !important; 
  position: relative;
  z-index: 50;
  padding-top: 120px;
  padding-bottom: 180px;
}

  .message__wrapper {
    padding-inline: 6vw;
  }

/* ■代表メッセージ (section-sub-titleの継承と修正) */
.message-subtitle {
  /* section-sub-titleの基本スタイルを継承し、中央揃えに */
  text-align: center;
  margin-bottom: 16px;
  color: #2A2A2A;
  display: flex;
  justify-content: center;
  
  /* 既存の「●」の疑似要素と競合するため、ここでは上書きまたは調整が必要 */
  /* 今回は文字の「■」を使用しているため、疑似要素は表示されません */
}

.message-subtitle::before {
  background-color: #2A2A2A;
}

/* キャッチコピー */
.msg-catchphrase {
  font-family: 'shippori mincho', serif;
  font-weight: 500;
  line-height: 1.26;
  color: #333;
  text-align: center;
  margin-bottom: 56px;
}




/* キャッチコピーの「始まり」と「未来」を色付け */


.msg-catchphrase__small {
  font-size: clamp(38px, 3vw, 50px);
  font-weight: 400;
  color: #2A2A2A
}

.msg-capthphrase__large {
  font-size: clamp(68px, calc(2vw + 49.76px), 88px);
    padding-left: 8px;
    /* グラデーションを適用する */
    background: linear-gradient(to right, #F29600, #00ADE1); 
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    padding-left: 40px;

}


/* メインコンテンツラッパー */
.msg-content-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin: 0 auto;
  position: relative;
  z-index: 20;
}

/* 左カラム: 写真 */
.msg-figure {
  flex-shrink: 0;
  width: 38%; /* PCでの写真の幅 */
  margin: 0;
}
.msg-figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 右カラム: 本文 */
.msg-body {
  flex-grow: 1;
}
.msg-text {
  line-height: 2.0;
  letter-spacing: 0.1em;
  margin-bottom: 1.5em; /* 段落間のスペース */
}

/* 署名 */
.msg-signature {
  margin-top: 32px;
  font-size: 16px;
  text-align: right;
  line-height: 1.5;
  text-align: left;
}
.msg-signature p {
  margin: 0;
}




@media screen and (min-width: 768px) and (max-width: 1199px) {
  .msg-content-wrapper {
    display: flex;
  }

  .msg-figure {
    width: 40%; /* タブレットでの写真の幅を調整 */
    display: flex;
    justify-content: center;
  }

  .msg-figure img {
    width: 100%;
    height: auto;
    display: flex;
    object-fit: cover;
    align-items: center;
    object-position: 100% 0;
    height: auto;

  }

  .message__wrapper {
    padding-inline: 0;
  }

  .msg-catchphrase__small {
  font-size: clamp(38px, 3vw, 50px);
  font-weight: 400;
  color: #2A2A2A

}

#message {
  padding-bottom: 120px;
}
}







/* ===============================
  代表メッセージ SP/Tablet Adjustments
================================ */
@media screen and (max-width: 767px) {
  .congtainer {
    margin: 0 auto;
  }

  .msg-content-wrapper {
    flex-direction: column; /* SPでは縦並びにする */
    gap: 32px;
  }
  .msg-figure {
    width: 100%; /* SPでは写真を広めに表示 */
    margin: 0 auto;
}
  #message {
    padding-top: 72px;
    padding-bottom: 100px;
  }
  .msg-catchphrase {
    font-size: 24px;
  }

      .msg-catchphrase__small {
    font-size: clamp(18px, calc(1.6vw + 17.46px), 48px);
    letter-spacing: -0.02em;
    margin: 0 -14px;
    padding-left: 4px;
  }

  .msg-capthphrase__large {
    font-size: clamp(28px, calc(5.45vw + 18.46px), 56px);
    padding-left: 6vw;
    margin: 0 -8vw;
    letter-spacing: -0.02em;
  } 
  }

  @media screen and (max-width: 375px) {
        .msg-catchphrase__small {
    font-size: clamp(18px, calc(0.88vw + 17.46px), 40px);
    letter-spacing: -0.02em;
    margin: 0 -14px;
    padding-left: 4px;
  }

  .msg-capthphrase__large {
    font-size: clamp(28px, calc(4.44vw + 18.46px), 56px);
    padding-left: 12px;
    margin: 0 -20px;
    letter-spacing: -0.02em;
  }

  }
    




  /* ===============================
  装飾バー関連のスタイル
================================ */
.msg-decoration-wrapper {
    overflow-x: hidden;
}

.msg-decoration-orange, 
.msg-decoration-blue {
    display: block;
    position: absolute; 
    pointer-events: none; 
    z-index: 10;
    opacity: 1!important;
}

/* オレンジのバー (画像) */
.msg-decoration-orange {
    position: absolute;
    right: 0px;
    /* top の値を調整して、表示したい位置に移動させます */
    top: -540px; 
    width: clamp(200px, 42%, 640px);
    height: auto; 
    z-index: 105;
    opacity: 1!important;
}

/* 青いバー (画像) */
.msg-decoration-blue {
    overflow: auto; /* overflow: hidden; による切断を回避 */
    position: absolute;
    left: 5vw;
    /* top の値を調整 */
    top: -400px; 
          width: clamp(320px, 56%, 520px);
    height: auto; 
    z-index: 105; 
    opacity: 1!important;
}


@media screen and (max-width: 1599px) and (min-width: 1200px) {
      .msg-decoration-orange {
        top: -360px;

}

.msg-decoration-blue {
  width: clamp(320px, 50%, 440px);
}
}
  /* ===============================
  Tablet Adjustment (max-width: 900px)
================================ */
@media screen and (max-width: 1199px) and (min-width: 900px) {
    /* 🌟 タブレットでの位置調整 (例: テキストが折り返して高くなった分、バーの位置を下げる) */
    .msg-decoration-orange,
    .msg-decoration-blue {
        top: -280px; /* PCよりも低い位置に調整 */
    }

    .msg-decoration-blue {
      width: clamp(80px, 44%, 360px);
}
    .msg-decoration-orange {
      width: clamp(80px, 56%, 480px);
    }
}

@media screen and (max-width: 899px) and (min-width: 768px) {
    /* 🌟 タブレットでの位置調整 (例: テキストが折り返して高くなった分、バーの位置を下げる) */
    .msg-decoration-orange,
    .msg-decoration-blue {
        top: -280px; /* PCよりも低い位置に調整 */
    }

    .msg-decoration-blue {
      width: 44%;
      top: -520px;
}
    .msg-decoration-orange {
      width: 54%;
    }
}


@media screen and (min-width: 375px) and (max-width: 767px) {
  .msg-figure {
    width: 100%; /* タブレットでの写真の幅を調整 */
    display: flex;
    justify-content: center;
  }

  .msg-figure img {
    width: 100%;
    height: auto;
    display: flex;
    object-fit: cover;
    align-items: center;
    

  }
  

  .msg-decoration-orange {
    width: clamp(80px, 68%, 440px);
    right: 0;
    top: -280px;
  }

  .msg-decoration-blue {
        width: clamp(80px, 60%, 440px);
    left: 0;
    top: -180px;
  }
}


@media screen and (min-width: 560px) and (max-width: 767px) {
   .msg-decoration-blue {
    top: -200px;
    width:  clamp( 80px, 58%, 320px);

    

   }
}

@media screen and (min-width: 376px) and (max-width: 559px) {
      .msg-decoration-orange {
        top: -220px;
   }
}





  @media screen and (max-width: 375px) {
    .msg-decoration-orange {
          width: clamp(80px, 70%, 440px);
      top: -200px;
    }
   .msg-decoration-blue {
        width: clamp(80px, 60%, 360px);
        top: -160px;
        left: 0;
    }


  }

/* ===============================
  Logo Marquee (モバイル 1列 自動スクロール: max-width: 767px)
================================ */
@media (max-width: 767px) {
    
    .intro-dx {
        max-width: none;
    }

    

    /* 1. 親要素 (変更なし) */
    .logo-marquee {
        padding: 24px 0;
        overflow: hidden; 
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        padding-left: 0;
        box-sizing: border-box; 
        display: flex;
    }

    /* 2. アニメーションさせるラッパー（2つのリストの親）(変更なし) */
    .marquee-content {
        display: flex;
        width: max-content; 
        will-change: transform;
        backface-visibility: hidden;
    }

    /* 3. リスト本体（1周目・2周目 共通）(変更なし) */
    ul.logo-marquee__list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center; 
        width: max-content; 
        flex-shrink: 0;
        max-width: none;
        justify-content: flex-start; 
        height: 80px;
        margin: 0;
        padding: 0; 
        list-style: none;
        backface-visibility: hidden;
    }

    /* 4. 複製リスト (変更なし) */
    .logo-marquee__list.is-duplicate-list {
      display: flex;
        /* 特に追加指定は不要 */
    }

    /* 5. リスト内の各ロゴ（li）*/
    .logo-marquee__list li {
        flex-shrink: 0;
        height: 100%;
        display: flex;
        
        /* ★タイプミス修正済み */
        align-items: center; 
        
        margin-right: 20px; 
        backface-visibility: hidden;
    }
    
    /* 6. ロゴ画像 (変更なし) */
    .logo-marquee__list img {
        height: 100%; 
        width: auto;
        backface-visibility: hidden;
    }

} /* @media (max-width: 767px) の閉じ */

/* * ※ @keyframes は @media の外側に記述してください 
 */




.case-container .sec-title {
  text-align: left;

}

.sec-title {
  /* サイトのh2タイトルスタイルを適用 */
  font-size: clamp(48px, 4.4vw, 72px);
  font-weight: 400;
  margin-bottom: 56px;
  color: #2A2A2A;
  letter-spacing: 0.05em;
  margin-top: 120px;
  margin-left: -0.6rem;
}

.service-sec {
  margin-top: 88px;
}


.archive-title {
  text-align: center;
}


.archive-news-title {
  margin-top: 0;
  padding-top: 120px;
}

.single-archive-news-title {
  margin-top: 0 !important;
  padding-top: 120px;
}

.single-news-sec {
    background: linear-gradient(to right, 
    rgba(242, 150, 0, 0.2), /* #F29600 (オレンジ) に 20% の透明度 */
    rgba(0, 163, 224, 0.2)  /* #00A3E0 (青) に 20% の透明度 */);
    position: relative;
    padding-bottom: 180px;
}

.single-news__content p {
  font-size: 1.125rem;
  line-height: 1.8;
  font-weight: 300;
  color: #2A2A2A;
}

.single-news__title {
  margin-bottom: 0;
  color: #2A2A2A;
  font-weight: 600;
  margin-left: -4px;
  margin-top: 0;
}

.single-news__date {
  padding-left: 2px;
  font-size: 0.875rem;
  font-weight: 300;
}

.single-news__header {
  margin-bottom: 32px;
}

.single-news-btn {
  bottom: 64px;
  top: unset;
  left: 50%;
  transform: translateX(-50%);
  max-width: fit-content;
}

/* お知らせ記事内のリンクのスタイル */
.single-news__content a {
  color: #00ADE1; /* リンクの色 */
  text-decoration: none; /* デフォルトの下線を消す */
  transition: all 0.3s ease; /* ホバー時の変化を滑らかに */
  margin-top: 12px;
  font-weight: 400;
  font-size: 1rem;
}

/* リンクにマウスを乗せた（ホバーした）ときのスタイル */
.single-news__content a:hover {
  color: rgb(14, 174, 195); /* ホバー時の文字色を少し濃くする */
}

.single-news__related-link {
  margin-bottom: 0;
  margin-top: 40px;

}

/* 長いリンクを省略表示するためのクラス */
.truncate-link {
  display: inline-block; /* 幅を指定するために必要 */
  max-width: 600px;      /* リンクの最大幅を指定 (この幅を超えると省略される) */
  white-space: wrap;     /* テキストを折り返さない */
  overflow: hidden;        /* はみ出した部分を隠す */
  text-overflow: ellipsis; /* はみ出した部分を「...」で表示 */
  vertical-align: bottom;  /* 他のテキストとの高さを調整 */
  line-height: 1.4;

}

.related-link__label {
  color: #2A2A2A;
  letter-spacing: 0.02em;
}

.single-news__related-link a,
.single-news__related-link a:visited {
    color: #00ADE1 !important;
    text-decoration: none !important;
}


/* --- ページネーション全体のスタイル --- */

/* ▼ ナビゲーション全体のコンテナ */
.pagination {
  margin-top: 40px; /* 上の要素との余白 */
  display: flex;
  justify-content: center; /* 中央揃え */
}

/* ▼ リンク全体を囲むラッパー */
.nav-links {
  display: flex;
  align-items: center;
  gap: 14px; /* 各アイテム間の隙間 */
}

/* ▼ 各アイテム（数字やリンク）の基本スタイル */
.page-numbers {
  display: inline-flex; /* 中のテキストを上下左右中央揃えにするため */
  align-items: center;
  justify-content: center;
  
  width: 32px;  /* 幅 */
  height: 40px; /* 高さ */

  border-radius: 2px;

  
  font-size: 1rem;
  color: #7F7F7F; /* 文字色 */
  text-decoration: none; /* リンクの下線を消す */
  
  transition: background-color 0.2s, color 0.2s; /* ホバー時の変化を滑らかに */
  font-family: "Lexend Zetta", sans-serif;
  font-weight: 200;

   background-color: rgba(255, 255, 255, 1);
}

/* ▼ 現在表示しているページのスタイル */
.page-numbers.current {
  /* 背景色: #00ADE1, 不透明度: 70% */
  background-color: rgba(0, 173, 225, 1);
  color: #fff;               /* 文字色を白に */
  border-color: #0073aa;      /* 枠線の色を背景に合わせる */
  font-weight: 200;
}


.next,.prev{
  background-color: unset !important;
  color: #2A2A2A;
  font-weight: 400;
  display: contents;

}



/* ▼ ホバー時（マウスを乗せた時）のスタイル ※現在地以外 */
.page-numbers:not(.current):hover {
  background-color: #f0fdff; /* 薄いグレーの背景色 */
  color: #00a0e9;
}

/* ▼ 「...」の部分のスタイル */
.page-numbers.dots {
  border: none; /* 枠線を消す */
  background-color: transparent;
}

.next:hover,.prev:hover {
  color: #00a0e9;

}

.strengths-grid {
  display: grid;
  /* 3列均等幅 */
  grid-template-columns: repeat(3, 1fr); 
  gap: 30px;
  margin: 0 auto;
}



.strength-card {
  text-align: center;
  padding: 56px 32px;
  background-color: #ffffff;
  border-radius: 16px;
}

/* アイコン */
.strength-icon {
  margin: 0 auto 20px;
  width: 80px;
  height: 80px;
  /* アイコンが四角い画像の場合、背景として丸く見せることができます */
}
.strength-icon img {
  width: 100%;
  height: auto;
}


@media screen and  (max-width: 767px) {
  .archive-news-title {
    width: 60vw;
  }

  .single-news-sec {
    padding-bottom: 120px;
  }

  .pagination {
    margin-top: 12px;
    margin-left: 2vw;
  }

  .back-circle {
  transform:
   scaleX(-1);
  }

  .single-news__related-link {
    font-size: 0.857rem;
  }

}



 



/* ===============================
  ソライズの強み (#strengths) - 統合版
================================ */

#strengths {
  z-index: 70;
  position: relative;
  background-color: #ffffff;
  background-image: linear-gradient(to right, rgba(242, 150, 0, 0.2), rgba(0, 163, 224, 0.2));
  padding-top: 1px;
  padding-bottom: 50px;
  
}

#message {
  position: relative;
}

.strengths-wrapper {
  position: relative;
  z-index: 50;
}

.strength-card {
  text-align: center;
  padding: 56px 32px;
  background-color: #ffffff;
  overflow:visible;
}

/* アイコン */
.strength-icon {
  margin: 0 auto 20px;
  width: 80px;
  height: 80px;
}
.strength-icon img {
  width: 100%;
  height: auto;
}

/* カードタイトル */
.card-title {
  font-size: clamp(1.125rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 15px;
  color: #2A2A2A;
  margin-right: -12px;
  margin-left: -12px;
  letter-spacing: 0em;
}

/* カード本文 */
.card-text {
  font-size: 14px;
  line-height: 2.0;
  color: #555;
  text-align: left;
}

/* 1. 最初の子要素（画像など）に「上」の角丸 */
.strength-card > .card-image { /* もしくは :first-child */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  /* ... */
}

/* 2. 最後の子要素（テキストブロックなど）に「下」の角丸 */
.strength-card > .card-text { /* もしくは :last-child */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: white; /* 背景色はこちらに付ける */
  /* ... */
}

/* .strength-card.swiper-slide の共通スタイル */
.strength-card.swiper-slide {
  /* ... 既存のスタイル ... */
  
  /* ↓ 変更：親のパディングは 0 にする */
  padding: 0; 
  
  /* ↓ 追加：角丸をここに設定 (値は調整) */
  border-radius: 16px; 
  
  /* ↓ 追加：中身がはみ出たら、この角丸で切り取る (最重要) */
  overflow: hidden;
  
  /* ↓ 追加：中身を Flexbox で管理する */
  display: flex;
  flex-direction: column;
  
  /* ↓ 追加：親(グリッド)の高さに100%合わせる */
  height: auto;
  
  /* ※ SP用の height: unset; は (max-width: 900px) の
     メディアクエリ内に残してください */
}

.strengths-card-content {
  padding: 56px 48px;
}

@media screen and (max-width: 767px) {
.strengths-grid.swiper-wrapper {
 left: 6vw;
 padding-right: 6vw;
 box-sizing: border-box;
}




  /* (JSが .strengths-grid に .swiper-wrapper を追加しています) */
  .strengths-grid.swiper-wrapper {/* 最初のスライドの左 と 最後のスライドの右 に余白を設定 */
  padding-right: 6vw !important;
  /* 念のため padding を幅の計算に含める */
  box-sizing: border-box !important; 

}
}


/* ===============================
  ソライズの強み (PC / Tablet Adjustments)
================================ */

@media screen and (min-width: 768px) {
  .strengths-container {
    position: relative !important;
    overflow: visible !important;
  }

  .strength-card {
  overflow:visible;
}

.strengths-innner-container {
  padding-inline: 6vw;
}

.strengths-padding-wrapper {
  padding-inline: 6vw;
}


.strengths-padding-container {
  padding-inline: 24px;
}
}

@media screen and (min-width: 1400px) {
    .strengths-title .sec-title {
    padding-inline-start: 0;
  } 
 
  .achivement-title {
      padding-inline: calc(6vw + 24px);
      max-width: 1200px;
      margin-right: auto;
     margin-left: auto;

  }

  .strength-wrapper {
    margin: 0 auto;
  }
}


@media screen and (min-width: 1200px) and (max-width: 1399px) {
.strengths-title .sec-title {
  padding-inline: calc(6vw + 24px);
}
  .achivement-title  {
    padding-inline-start:calc(6vw + 24px);
  }

  .strengths-wrapper {
    margin: 0 !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .strengths-title {
    padding-inline-start: 24px;
  }

    .achivement-title {
    padding-inline-start: 24px;
  }
  
}

/* PC/タブレット (768px以上) でのSwiperの無効化スタイル */
@media screen and (min-width: 768px) {

  .strengths-wrapper {
    max-width: 1200px;
    margin: 0 auto;

  }

 


  /* JSが .swiper-wrapper を追加しても、PCでは grid に戻す 
    JSが .swiper-slide を追加しても、PCでは width: auto に戻す
  */
  .strengths-grid.swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 0;
    transform: translate3d(0px, 0px, 0px) !important;
    box-sizing: border-box;
    box-sizing: border-box;
  }

  .strength-card.swiper-slide {
    width: auto !important; /* Swiperが設定するスライド幅をリセット */
    overflow: hidden;
  }

  .swiper-backface-hidden .swiper-slide:nth-child(3) {
    margin-right: 0 !important;
  }

  /* PCではページネーションを非表示 */
  .swiper-pagination {
    display: none;
  }

  .strengths-container {
    max-width: 1200px;
    padding-inline: 24px;
    display: block;
  }
}

@media screen and (min-width:768px) and (max-width: 1199px) {
  .strengths-padding-wrapper {
    padding-inline: 0;
  }
}


@media screen and (min-width: 900px) and (max-width: 1200px) {
  .strengths-card-content {
    padding: 40px 28px;
  }
}
  

/* タブレット (900px以下) */
@media screen and (min-width: 768px) and (max-width: 899px) {
  .strengths-grid.swiper-wrapper {
    width: 100%;
  }

    .strengths-card-content {
      padding: 32px 28px;
    }

.strengths-grid {
  gap: unset;
}

  .card-title {
    font-size: 1.25rem;
  }

  .sec-title {
    font-size: clamp(24px, 6vw, 48px);
  }
}


@media screen and (max-width: 767px) {
  .strengths-card-content {
    padding: 32px 28px;
    margin-right: -2px;
  }


  .archive-news-title {
    margin-top: 0 !important;
    padding-top: 80px;
    margin-bottom: 30px;
  }
   .sec-title.achivement-title {
    margin-bottom: 0;
  }
}



/* ===============================
  ソライズの強み (SP: max-width: 767px)
================================ */
@media screen and (max-width: 767px) {
  #strengths {
    padding-top: 12px;
    padding-bottom: 12px;
    z-index: 99;
  }

  /* SP用の .sec-title (既存のスタイル) */
  .case-container .sec-title {
    text-align: center;
  }
  .sec-title {
    font-size: clamp(24px, 10vw, 40px);
    margin-bottom: 30px;
    text-align: center;
    margin-top: 80px;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
  }

  .case-grid .three-columns .swiper-wrapper {
    margin-left: -6vw;
  }


}



  /* SPでは Swiper のスタイルを適用する 
  */
@media screen and (max-width: 767px) {
  /* Swiper本体のコンテナ */
  .swiper {
    overflow: unset !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* display: flex; はSwiperが自動で付与します */
    box-sizing: border-box;
  }

  /* SPではページネーションを表示 */
  .swiper-pagination {
    display: block; /* PCで none にしたので、SPで block に戻す */
    position: unset !important;
    margin-top: 20px;
  }
  

  /* SPのスライド (幅や余白はJSが制御) */
  .strength-card.swiper-slide {
    height: unset;
    width: calc(90%);
    margin-right: 3.8vw;
    box-sizing: border-box;
  }


  .card-text {
    height: unset;
  }



  .strengths-grid {
    gap: 0;
}

.card-title {
  font-size: 1.5rem;
}


}

@media screen and (min-width:768px) {
  .swiper {
    overflow: visible;
  }

     .case-grid.three-columns {
        transform: translate3d(0px, 0px, 0px)!important;
  }

  .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
    transform: translate3d(0px, 0px, 0px)!important;
  }
  }



  



/* ===============================
  サービス紹介 (#service) - 統合版
================================ */

  #service {
  /* 🌟 グラデーションと位置を統合 */
  background: linear-gradient(to right, 
    rgba(242, 150, 0, 0.2), /* #F29600 (オレンジ) に 20% の透明度 */
    rgba(0, 163, 224, 0.2)  /* #00A3E0 (青) に 20% の透明度 */);
  
  position: relative;
  z-index: 70;
}

#service {
  padding-top: 1px;
  padding-bottom: 50px;
  background-color: #ffffff;
  position: relative;
  z-index: 80;
}

/* 2カラムレイアウト */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  /* 🌟 max-widthを1200pxに設定し、中央に配置することで、PCでの過度な拡大を防ぐ */
  max-width: 1200px;
  margin: 0 auto;
}

.service-column {
  padding: 30px;
  border-radius: 16px;
  background: white;
  /* 🌟 カード内のパディングが幅を広げないようにする */
  box-sizing: border-box; 
  text-align: center; /* タイトル、イラストを中央揃えに */
}

/* 🌟 イラスト/画像の修正 🌟 */
.service-illustration {
  margin: 15px auto 25px; /* タイトルとリストの間の余白を調整 */
  width: 100%; /* 親要素の幅いっぱいに */
  max-width: 320px; /* イラストの最大幅を制限 */
  height: auto;
}
.service-illustration img {
  width: 100%;
  height: 280px;
  object-fit: contain;
  display: block;
}

/* ヘッダー部分 */
.column-header {
  display: block;
  text-align: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

.column-title {
  /* 🌟 最新のclamp()計算を適用 */
  font-size: 32px;
  font-weight: 500;
  color: #2A2A2A;
}

/* サービスリスト */
.service-list {
  list-style: disc;
  text-align: left; /* リスト項目は左揃えに戻す */
}

.service-list li {
  position: relative;
  padding-left: 0px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: #555;
}


.service-wrapper {
  padding-inline: 6vw;
  position: relative;
  z-index: 50;
}

.swiper-slide {
  height: auto !important;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .service-wrapper {
    padding-inline: 0;
}
}
  


/* ===============================
  サービス紹介 SP/Tablet Adjustments
================================ */
@media (max-width: 767px) {
  #service {
    padding-top: 40px;
    padding-bottom: 72px;
  }
  .service-grid {
    /* 1列に切り替え */
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .service-column {
      padding: 32px 28px; /* モバイルではパディングを少し減らす */
  }

  .column-illustration {
    max-width: 200px; /* モバイルでの最大幅を小さくする */
  }

  .service-sec {
  margin-top: 40px;
}

.service-illustration {
  width: 80%;
  height: auto;
}

.column-title {
  font-size: 1.714rem;
}

.column-header {
  margin-bottom: 0;
  padding-bottom: 0;
}

.service-list li {
  margin-left: -12px;
  font-size: 1rem;
}

.service-list li::marker {
  font-size: 0.75rem;
}

.service-illustration img {
  width: 100%;
  height: 200px;
}
}

/* ===================================== */
/* 0. 共通の親要素設定 */
/* ===================================== */
.case-teaser {
  padding-bottom: 88px;
}

.case-teaser, 
.archive-case-list {
    position: relative; 
    overflow: hidden; 
    z-index: 90;
    background: #ffffff; 
    
    /* ✨【修正点】セクションの重なりを解消するためのマージンを追加 */
    /* サービス紹介セクションの下に十分なスペースを確保します。 */
}

.case-teaser-wrapepr {
  padding-inline: 6vw;
}


@media screen and (max-width:767px) {
  .case-teaser {
    padding-bottom: 0;
  }
}
  

/* ===================================== */
/* 1. 【フロントページ】透かし画像スタイル  */
/* ===================================== */
.front-en-bg-text {
  position: absolute;
  height: clamp(164px, 9.4vw, 170px);
  width: auto;
  right: 0;
  margin-right: 0px;
  top: 68px;
  z-index: -2;
}


.news-en-bg-text {
  right: 5vw;
  top: 72px;
}

.service-en-bg-text {
  right: 10vw;
  top: -36px;
}


@media screen and  ( min-width: 1600px)  {
.strengths-en-bg-text {
  top: -48px;
  margin-right: -200px;

}
}
  


@media screen and  (max-width: 1599px) {
.front-en-bg-text {
  top: 60px;
}

.case-en-bg-text {
  top: 72px;
}

.strengths-en-bg-text {
  top:-52px;
  right: 0;
}

.service-en-bg-text {
  right: 10vw;
  top: -52px;
}

}

@media screen and (max-width: 1399px) {
  .front-en-bg-text {
  height: clamp(120px, 12vw, 200px);
  top: 80px;
}

.strengths-en-bg-text {
  top:-40px;
  right: 0;
}

.service-en-bg-text {
  right: 4vw;
  top: -40px;
}

.service-en-bg-text {
  top: -32px;
}

.case-en-bg-text {
  top: 72px;
}

}

@media screen and (max-width: 1199px)  {
  .strengths-en-bg-text {
  top:-32px;
}

.case-en-bg-text {
  top: 88px;
}

.security-en-bg-text {
  width: 100% !important; 
  height: auto !important;
}



}




@media screen and (min-width:768px) and (max-width: 1920px) {
.strength-card.swiper-slide.swiper-slide-active {
  margin-right: 0 !important;
}

.strength-card.swiper-slide.swiper-slide-next {
  margin-right: 0 !important;
}

.strengths-grid.swiper-wrapper {
  gap:16px;
}

.service-column.service-web.swiper-slide.swiper-slide-active {
  margin-right: 0 !important;

}
}



@media screen and (max-width: 767px) {
.front-en-bg-text {
  width: 100%;
  height: auto;
  text-align: center;
  top: -64px;
  transform: translateX(-50%);
  left: 50%;
}


.case-en-bg-text {
  top: -56px;
}

.strengths-en-bg-text {
  margin-right: 0;
  top: 8px;
}

.news-en-bg-text {
  top: -12px;
}



.swiper {
  overflow: hidden  !important;
}

.strengths-container {
  overflow: hidden !important;
  margin-left: 6vw;
}


.strength-card.swiper-slide:nth-child(2) {
  margin-left: 2vw;
}

.strength-card.swiper-slide:nth-child(3) {
  margin-left: 2vw;
}

  .news-page-en-bg-text {
    width: 60vw !important;
  }

  
}

/*
 * ----------------------------------------
 * 「サービス紹介」スライダーのCSS (.service-container / .service-column)
 * ----------------------------------------
 */

/* 1. コンテナの基本設定 */
.service-container.swiper {
  box-sizing: border-box;
  /* (必要に応じて padding-left: 6vw; なども指定できます) */
}

/* 2. SP幅 (767px以下) での .service-column の幅指定 (必須) */
@media (max-width: 767px) {
  .service-grid .service-column.swiper-slide {
    /* * ★★★ ここでスライド1枚の幅を指定します ★★★
     * (例: 画面幅の88%。デザインに合わせて調整してください) 
     */
    width: calc(100% - 6vw);
    
    /* スライドが意図せず縮むのを防ぐため */
    flex-shrink: 0;
    height: auto;
    
    /* (必要に応じて高さを揃える) */
    /* height: auto; */ 
  }

  .service-container.swiper {
    width: 100%;
  }

  .service-wrapper {
    padding-inline: 0;
  }

  .service-grid.swiper-wrapper {
    padding-right: 6vw;
    box-sizing: border-box;
  }

  .service-column.service-web.swiper-slide.swiper-slide-prev {
    margin-right: 0 !important;
  }

  .achive-page-en-bg-text {
   top: -40px !important;
  }

  
  .strengths-en-bg-text { 
    top: -96px;
  }

  .security-en-bg-text {
    top: 12px !important;
  }

  .privacy-en-bg-text {
    top:0px !important;
  }
  
}

@media screen and (min-width:480px) and (max-width: 640px) {
  .news-en-bg-text {
  top: 16px;
}

.case-en-bg-text {
  top: -16px;
} 

  .achive-page-en-bg-text {
   top: -8px !important;
  }

  .strengths-en-bg-text {
    top: -68px;
  }

    .security-en-bg-text {
    top: 24px !important;
  }

}

/* 3. PC幅 (768px以上) でのスタイルリセット */
@media (min-width: 768px) {
  /* (PC用のグリッドレイアウトは .service-grid で指定してください) */
  .service-grid {
     /* ★★★ ここのコメントアウトを外します ★★★ */
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px; /* カラム間の余白 (デザインに合わせて調整) */
  }

  /* SP用に指定した .service-column の幅をリセット */
  .service-grid .swiper-slide {
    width: 100%; 
    flex-shrink: unset;
  }
}



    
  @media (min-width: 768px) and (max-width: 1199px) {
  .achive-page-en-bg-text {
    width: 100% !important;
    height: auto !important;

  }

  .case-en-bg-text {
    top: 88px !important;
  }
  
  .service-column.service-dx.swiper-slide.swiper-slide-next {
  margin-right: 0 !important;
}

.case-teaser-wrapepr {
  padding-inline: 24px !important;

}


.case-card {
  margin-bottom: 32px !important;
}
  }

@media screen and (max-width: 479px) {
.strengths-en-bg-text {
  margin-right: 0;
  top: -42px;
}

.case-en-bg-text {
  top: 8px !important;
}
.service-en-bg-text {
  top: -44px;
}

.news-en-bg-text {
  top: 34px;
}

  .news-page-en-bg-text {
    width: 60vw;
    top: 40px !important;
  }

  .achive-page-en-bg-text {
    top: 16px !important;
  }

    .security-en-bg-text {
    top: 12px !important;
  }
}










/* ===================================== */
/* 2. 【個別調整】トップページ (.case-teaser) */ 
/* ===================================== */
/* カードタイトル (例: H3要素) のフォントサイズを小さくする */
.case-teaser .case-card .case-title {
    font-size: 1.5rem; 
    text-decoration: none;
    color: #2A2A2A;
}

/* 抜粋文 (.case-excerpt) のフォントサイズを小さくする */
.case-teaser .case-card .case-excerpt {
    font-size: 0.875rem; 
    font-weight: 300;
}

.case-excerpt-archive {
  font-weight: 300;
}

/* URLテキスト (.case-url-text) のフォントサイズを調整 */
.case-teaser .case-card .case-url-text {
    display: none;
}

.view-more-sp {
  display: none;
}



.sec-head {
    display: flex;
    position: relative;
}

.top-watermark-overlay {
    position: absolute;
    width: 50%;
    top: 0.1em;

}

.sec-link {
    justify-content: flex-end;
    position: absolute;
    
}


/* ===================================== */
/* 3. 【個別調整】一覧ページ (.archive-case-list) での設定 */
/* ===================================== */
/* ✨【修正点】一覧ページのウォーターマーク設定をネストで明確化 */


.archive-title {
    text-align: center !important;
}




.archive-title {
    text-align: center !important;
}

.page-en-bg-text {
  height: 160px;
  width: auto;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);

}

@media screen and (max-width: 767px) {
 .page-en-bg-text {
  width: 100%;
  height: auto;
  top: 8px;
 } 

}




/* ===================================== */
/* PC/一覧ページでの3列グリッドレイアウト */
/* ===================================== */
.case-grid.three-columns {
    /* リストのデフォルトスタイルをリセット */
    list-style: none; 
    padding-inline: 6vw;   
    margin: 0 auto;
    max-width: 1200px;
    
    /* CSS Gridを使用して3列に分割 */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3等分 */
    gap: 64px; /* カード間の隙間（行と列の両方） */
    margin-top: 40px;

}

.case-grid.three-columns {
  padding-inline: 0;
}

.pc-case-archive-contoainer {
  padding-bottom: 88px;
  
}
/* ... レスポンシブ対応は省略 ... */


/* ===================================== */
/* レスポンシブ対応 */
/* ===================================== */




/* タブレット (768px - 1199px) の調整 */
@media (min-width: 768px) and (max-width: 1199px) {
    .case-grid.three-columns {
        grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
        gap: 28px;
    }
}

/* スマートフォン (767px以下) の調整 */
@media (max-width: 767px) {
    .case-grid.three-columns {
        grid-template-columns: 1fr; /* 1列（全幅）に変更 */
        gap: 48px; /* カード間の縦の隙間を少し減らす */
        margin: top 20px;
    }

    .case-archive-sp-container {
      padding-bottom: 64px;
    }

    .single-news__title {
      font-size: 1.5rem;
    }
    
}




/*---カードのcss---*/
.case-thumb {
    /* 16 / 9 = 1.777... */
    aspect-ratio: 16 / 9; 
    
    /* 内部の画像がはみ出さないように設定 */
    overflow: hidden; 
    
    /* コンテナの下の余白をリセット */
    margin: 0; 
    padding: 0; 
}

.case-title {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 16px;
}

.case-url-text {
    margin-top: 12px;
    font-size: 0.875rem;
}

.case-url-text a {
    color: #00ADE1;
}

/* お知らせセクション全体 */
.news-teaser {
   padding-top: 1px;
   padding-bottom: 56px;
    background: linear-gradient(to right, 
    rgba(242, 150, 0, 0.2), /* #F29600 (オレンジ) に 20% の透明度 */
    rgba(0, 163, 224, 0.2)  /* #00A3E0 (青) に 20% の透明度 */);
  z-index: 80;
  position: relative;
  z-index: 80;
  background-color: #ffffff;
    /* 背景色や背景の大きな文字などの装飾CSS */
}


/* お知らせリスト全体 */
.news-list-cards {
    list-style: none;
    padding: 0;
}

.news-article-bg-container {
  padding: 56px 4vw 72px 4vw;
  background: #ffffff;
  border-radius: 8px;
}
.news-list-archive {
  border-radius: 8px;
  padding: 0;
}

.news-list-archive li {
  margin-bottom: 20px;
  background: rgb(255, 255, 255);
  transition: background-color 0.3s ease;

}

.news-list-archive__item {
  list-style-type: none;
}

.news-list-archive__category {
  display: none;
}

.news-list-archive__title {
  font-size: 1.5rem;
  margin-bottom: 12px;
  transition: color 0.3s ease-out;
  /* ▼ここから追加 */
  /* 「・ 」の幅の分だけ、左側に余白を確保します */
  padding-left: 1.5em;
  /* 確保した余白の分だけ、一行目の開始位置を左にずらします */
  text-indent: -1.5em;
  position: relative;
  font-weight: 500;
}

.news-list-archive__title span {
  color: #00ADE1;
  font-size: 2rem;
  position: absolute;
  top: -5px;
}

/* カード全体(.news-list-archive__item)をホバーした時に、
   中のタイトル(.news-list-archive__title)の色を変える */
  body .news-list-archive li:hover .news-list-archive__title {
  color: #F29600;
}

/* お知らせ一覧のリストアイテム全体をボタンのように見せる */
.news-list-archive__item {
    /* li要素のデフォルトのパディングをリセット */
    padding: 24px 32px 12px 32px;
    transition: background-color ease-out 0.3s;
      border-radius: 8px;
    /* ホバー時の背景色変化を滑らかにする */
}

/* li要素にマウスが乗った時に背景色を変える */
.news-list-archive__item:hover {
    background-color: #f9f9f9; /* お好みの色に変更してください */
    
    
}

.news-list-archive__date {
  font-size: 0.875rem;
  font-weight: 300;
}

/* リンク(aタグ)をli要素いっぱいに広げる */
.news-list-archive__item a {
    /* ブロック要素にして、親要素いっぱいに広がるようにする */
    display: block;
    /* リンクのデフォルトの青色ではなく、親要素の文字色を継承（黒にする） */
    color: inherit;
    /* リンクのデフォルトの下線を消す */
    text-decoration: none;
    /* クリック領域を確保するための内側の余白 */
    padding: 1.5em 1em; /* 上下左右の余白。お好みの値に調整してください */
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  
.news-list-archive__title {
font-size: 1.5rem;
padding-left: 0;
left: 0;
text-indent: 0;
}

.news-list-archive__title span {
  left: -40px;
}

.news-list-archive__title {}
}


/* スマホ表示など、必要に応じてパディングを調整 */
@media (max-width: 767px) {

  .case-archive-sp-container {
    padding-inline: 6vw;
  }

.jp-btn-text.submit--btn-text {
  font-size: 1.142rem;
}
  .top-news-list-archive__title {
  display: -webkit-box;             
  -webkit-box-orient: vertical;      /* 垂直方向に配置 */
  overflow: hidden;                  /* 溢れた部分を隠す */
  text-overflow: ellipsis;           /* 溢れた部分に「...」を表示 */
  -webkit-line-clamp: 2;    
  width: 100%;         /* 最大行数を2行に設定 */
  position: relative;
}



.news-list-archive .news-list-archive__title span {
    /* 4. 「・」を行数制限の影響を受けないよう絶対配置にする */
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.news-sp-view-more-btn {
  bottom: 40px;
}

.single-archive-news-title {
  padding-top: 80px;
}





  

  .news-article-bg-container {
    margin: 0 6vw;
    padding: 32px 6vw 48px 6vw;
  }
    .news-list-archive__item a {
        padding: 0;
        margin-left: 0px;
    }

    .news-archive {
      padding-inline: 6vw;
      padding-bottom: 64px !important;
    }

    .news-teaser {
      padding-inline: 6vw;
      padding-bottom: 96px;
    }
    .news-list-archive__title {
      text-indent: 0;
      padding-left: 0;

    }

     .news-list-archive__title span {
      margin-left: -4vw;
     }


     .news-list-archive__title{
      text-indent: 0;
      padding-left: 0;

    }

    .news-list-archive__item {
      padding: 24px 28px 16px 28px;
    }

    }


    @media (min-width: 480px) and (max-width: 767px) {
      .news-list-archive .news-list-archive__title span {
        margin-left: -34px;
        margin-bottom: 0px;
        position: relative;
        top: 4px;
        margin-right: -8px;
      }

      .news-list-archive__title {
  
      }
    }

    @media screen and (max-width: 375px) {
      .news-list-archive__title {
        font-size: 1.285714286rem;
      }
      
    }





/* お知らせカード（個別の項目） */
.news-card {
    margin-bottom: 20px; /* カード間のスペース */
    border-radius: 8px; /* 角丸 */
    overflow: hidden;
    /* スクリーンショットのような淡い影 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
    background-color: #fff;
}

/* カード内のリンク */
.news-card a {
    display: block;
    padding: 16px 20px;
    display: flex; /* 要素を横並びにするためにflexboxを使用 */
    align-items: center;
}

/* お知らせラベル */
.news-label {
    /* 黄色い背景のラベルのデザイン */
    background-color: #ffebcc; 
    color: #cc8400;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    flex-shrink: 0; /* 縮まないようにする */
    margin-right: 15px;
}

.single-news__category {
  display: none;
}


/* 日付 */
.news-card time {
    font-size: 0.9em;
    color: #888;
    flex-shrink: 0;
    margin-left: auto; /* 右端に寄せる */
}


.news-archive {
    background: linear-gradient(to right, 
    rgba(242, 150, 0, 0.2), /* #F29600 (オレンジ) に 20% の透明度 */
    rgba(0, 163, 224, 0.2)  /* #00A3E0 (青) に 20% の透明度 */);
    position: relative;
    padding-bottom: 88px;
}

/* --- お問い合わせセクション --- */
:root {
    --contact-primary-color: #00a0e9; /* アイコンや必須マークの色 */
    --contact-text-color: #333;
    --contact-border-color: #e0e0e0;
    --contact-button-border-color: #f39800; /* ボタンの枠線の色 */
}

.contact-section {
    padding: 80px 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 90;
}

.contact-container {
  display: flex;
  gap: 32px;
}

.contact-form {
  width: 100%;
}

/* --- 左側の情報エリア --- */
.contact-title {
  margin-top: 0;
  margin-bottom: 24px;
}

.contact-info {
    width: 42%;
}



.contact-info-bg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/contact-bg-text.png); /* ←ここで画像を指定 */
    background-repeat: no-repeat;
    background-size: auto 90%;
    top: 28px;
    max-width: 200px;
    z-index: -1;
}



.contact-description,
.contact-phone {
    line-height: 2.0;
    color: var(--contact-text-color);
    font-size: 0.875rem;
    margin-top: 32px;
}

.contact-phone p {
    font-size: 0.875rem;
}

.contact-phone .phone-title {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 4px;
}

.phone-number {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 2rem;
    font-weight: 500;
    text-decoration: none;
    color: #00ADE1;
    margin-top: 1rem;
}

.phone-icon {
    width: 32px;
    height: 32px;
    color: #00ADE1;
    margin-top: 8px;
}

/* --- 右側のフォームエリア --- */
.contact-form-wrapper {
    flex: 1;
}

.form-group, .form-row {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 1.142rem;
    font-family: 'shippori mincho', serif;
    font-weight: 500;
    color: #2A2A2A;
    letter-spacing: 0em;

}


.form-group .font-alt {
   font-family: "Noto Sans JP", sans-serif;
}
.form-check .check-text {
  font-family: "Noto Sans JP", sans-serif;
 }

 #request-docs {
  margin-top: -2px;
  width: 18px !important;   /* Set desired width */
  height: 18px !important;  /* Set desired height */
  vertical-align: middle; /* Adjusts vertical alignment with the text */
}

/* 必須マーク（*）のスタイル */
.form-group label:after {
    content: '*';
    color: #F29600;
    margin-left: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--contact-border-color);
    border-radius: 4px;
    font-size: 1rem;
    background-color: #fff;
    box-sizing: border-box;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aaa;
}

textarea#message {
  padding-top: 16px;
  padding-bottom: 16px;
}
/* フォームの横並び（名前とメールアドレス） */
.form-row {
    display: flex;
    gap: 20px;
}
.form-row .form-group {
    flex: 1;
}
.form-row-2nd {
  margin-bottom: 28px;
}

.form-check {
  margin-bottom: 28px;
}

.form-check label {
  margin-bottom: 0;
}

/* チェックボックス */
.form-group-checkbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 2rem;
}

.form-group-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #00ADE1;
}

.form-group-checkbox label {
    font-size: 0.9rem;
    margin: 0;
}
.form-group-checkbox label:after {
    content: ''; /* チェックボックスのラベルには不要なので削除 */
}

.form-group label.optional::after {
  content: none;
}

.form-group-checkbox a {
    color: var(--contact-primary-color);
    text-decoration: underline;
}

/* 送信ボタン */


.contact-submit {
  margin-top: 32px;
}
.submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: bold;
    color: var(--contact-text-color);
    background-color: #fff;
    border: 1px solid var(--contact-button-border-color);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background-color: #fffaf0;
    box-shadow: 0 4px 15px rgba(243, 152, 0, 0.2);
}

.arrow-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--contact-primary-color);
}

.arrow-icon {
    width: 18px;
    height: 18px;
    color: #fff;
    stroke-width: 2.5;
}


/* --- レスポンシブ対応 (768px以下のスクリーン) --- */
@media (max-width: 767px) {
  .contact-submit.btn-contact__circle::before {
    display: block;
  }

  .site-header__cta--pc.contact-submit-btn{
    display: flex;
  }

  .submit-btn-inner {
    padding: 24px;
  }



  .contact-submit-btn.btn-contact.btn-contact__inner {
    gap: 12px;
  }
  .form-group-checkbox label {
    font-size: 1rem;
  }
    .contact-container {
        flex-direction: column;
        gap: 40px;
        padding-inline: 6vw;
    }

    .phone-icon {
      width: 24px;
      height: 24px;
      margin-top: -1px;
    }

    .contact-description,
.contact-phone {
  text-align: left;
  font-size: 1rem;

}

.contact-info-bg {
  height: 60vh;
  width: 100%;
}

.sp-br-none {
  display: none;
}
    .contact-info {
        max-width: 100%;
        text-align: center;
        width: 100%;
    }

    .phone-number {
        justify-content: center;
        font-size: 1.4285rem;
        gap: 4px;
    }
    

    .form-row {
        flex-direction: column;
        gap: 8px; /* スマホでは縦並びなので間隔を調整 */
    }

    /* 1. ボタンの内側 (inner) のサイズを調整します */
  /* (既存の .submit-btn-inner { padding: 24px; } があれば、それで上書きしてもOKです) */
  .contact-submit-btn .btn-contact__inner {
    height: 44px;         /* 高さを指定 (ヘッダーのボタンと合わせる) */
    padding: 8px 12px 8px 32px ;   /* パディング (ヘッダーのボタンと合わせる) */
    gap: 12px;            /* アイコンとの隙間 (ヘッダーのボタンと合わせる) */
    font-size: 16px;      /* 文字サイズ (ヘッダーのボタンと合わせる) */
  }

  /* 2. ★★★ これが丸い背景を表示させるためのコードです ★★★ */
  .contact-submit-btn .btn-contact__circle {
    width: 32px;          /* 幅を指定 (ヘッダーのボタンと合わせる) */
    height: 32px;         /* 高さを指定 (ヘッダーのボタンと合わせる) */
  }

  .contact-submit-btn {
    justify-content: center; /* ボタン内の要素を中央揃えに */
    align-items: center;
  }

  .contact-section {
    padding-bottom: 120px;
  }
}


        /* --- ベーススタイル（モバイルファースト） --- */
        .site-footer {
            /* グラデーションは画像から完全に再現するのは難しいため、
               例として近い色合いの線形グラデーションを設定しています */
            background-color: #ffffff;
            background-image: linear-gradient(to right, rgba(242, 150, 0, 0.06), /* #F29600 (オレンジ) に 20% の透明度 */ rgba(0, 163, 224, 0.2) /* #00A3E0 (青) に 20% の透明度 */);
            color: #333;
            padding: 80px 0 0 6vw; /* 左右に余白を設定 */
            padding-inline: 6vw;
            position: relative;
            z-index: 100;

        }

        

        body.home .site-footer {
                      /* グラデーションは画像から完全に再現するのは難しいため、
               例として近い色合いの線形グラデーションを設定しています */
            background: linear-gradient(90deg, #FCEACD 0%, #CDEFF9 100%);
            color: #333;
            padding: 80px 0 0 6vw; /* 左右に余白を設定 */
            padding-inline: 6vw;
            position: relative;
            z-index: 100;
        }



        /* 情報と地図のラッパー */
        .footer-content-wrapper {
            display: flex;
            gap: 30px;
            margin: 0 auto;
            justify-content: space-between;
            max-width: 1200px;
        }

        /* 会社情報セクション */
        .company-info {
            display: block;
            width: 34%;
        }

        .info-group {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* セクションごとの薄い線 */
            padding-bottom: 22px;
            padding-top: 22px;
        }

        .info-group:last-child {
            border-bottom: none; /* 最後のグループは線なし */
        }

        .label {
            font-size: 1.5rem;
            font-family: 'shippori mincho', serif;
            font-weight: 500;
            margin: 0 0 5px 0;
            color: #2A2A2A; /* ラベルの文字色を少し暗く */
            letter-spacing: 0.02em;
        }

        .info-group:first-child {
        border-top: 1px solid rgba(0, 0, 0, 0.1); /* 例: 薄いグレーの1px線 */
        }

        .detail {
            font-size: 0.875rem;
            margin: 3px 0;
            line-height: 1.5;
            padding-left: 2px;
            text-decoration: none;
            border-bottom: none;
            font-weight: 300;
        }

        /* 地図コンテナ */
        .google-map-container {
          aspect-ratio: 16 / 9;
          width: 60%;
            /* SP版の地図の縦幅を調整 */
            height: auto;
            overflow: hidden;
            border-radius: 5px; /* 角を少し丸く */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 48px;
            max-width: 800px;
        }

        .google-map-container iframe {
            display: block; /* iframeの不要な余白を削除 */
        }

        /* フッター最下部 */
        .footer-bottom {
            background-color: rgba(0, 0, 0, 0.4); /* 暗めの背景色 */
            color: #fff;
            text-align: center;
            padding-inline:  3.2vw;
            margin: 20px -6vw -20px -6vw; /* 親要素のパディングを相殺し、左右いっぱいに */
            display: flex;
            flex-direction: column; /* SP版は縦積み */
            align-items: center;
            gap: 10px;
        }

        .footer-links {
            padding: 20px 0;
            display: flex;
            gap: 20px;
        }

        .footer-link {
            color: #fff;
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 400;
        }

        .footer-link:hover {
            text-decoration: underline;
        }

        .copyright {
            font-size: 0.9375rem;
            text-align: center;
            align-self: center;
            color: white;
            font-weight: 300;
        }

        .footer-bottom-text {
          display: flex;
          justify-content: space-between;
          width: 100%;
        }

        .orangee-bar {
          display: none;
          opacity: 1 !important;
        }

        .blue-bar {
          display: none;
          opacity: 1 !important;
        }



        body.home .orangee-bar {
          display: block;
          top: -280px;
          position: absolute;
          right: 50%; /* まず要素の左端を中央に合わせる */
          transform: translateX(-140px); /* そこから右に20px移動 */
          width: clamp(120px, 40%, 460px);
        }

        body.home .blue-bar {
          display: block;
          top: -420px;
          position: absolute;
          right: 50%;
          transform: translateX(-440px);
          width: clamp(80px, 36%, 380px);
          left: 50%;
        }

@media screen and (min-width: 768px) and (max-width: 999px) {
  body.home .orangee-bar {
    top: -180px;

  }

  body.home .blue-bar {
    top: -320px;
    left: 60%;

  }
}


        
@media (max-width: 767px) {


  .google-map-container {
    width: 100%;
    margin-bottom:8px;
  }
  .detail {
    font-size: 1rem !important;
    text-decoration: none;
    border-bottom: none;
    outline: none;
  }
  .footer-bottom-text {
    display: block;

  }

  .copyright {
    padding-bottom: 16px;
  }

  .footer-links {
    justify-content: center;
    padding-bottom: 40px;
    padding-top: 28px;
  }

  .detail {
    text-decoration: none;
    border-bottom: none;
  }
  .footer-content-wrapper {
    display: block;
  }

  .company-info {
    width: 100%;
  }
  

  body.home .orangee-bar {
    top: -180px;
    left: 4vw;
    transform: translateX(0);
    width: clamp(120px, 56%, 400px);
  }

  body.home .blue-bar {
    top: -220px;
    right: 4vw;
    left: unset;
    transform: translateX(0);
    width: clamp(80px, 36%, 320px);
  }
        }

@media screen and (min-width: 480px) and (max-width: 767px) {
  body.home .orangee-bar {
    top: -240px;
    width: clamp(120px, 48%, 320px);
  }

  body.home .blue-bar {
    top: -280px;
    width: clamp(80px, 36%, 240px);
  }
}
  



@media screen and (max-width: 767px) {
  /* * .page-template-page-security は、
   * 「情報セキュリティ方針」テンプレートを使っているページの body タグに
   * WordPressが自動で追加するクラスです。
   */
  .page-template-page-security .single-news__content p {
    font-size: 14px !important;
    /* 必要に応じて行間も調整してください */
    /* line-height: 1.7; */ 
  }

  .security-en-bg-text {
    width: 100% !important;
  }
}

@media screen and (max-width: 479px) {
  .security-policy-title {
    font-size: clamp(1.714rem, 8vw, 2.285rem);
    padding-top: 80px;
  }
  }


     
/* ===============================
  Animations (Keyframes)
================================ */
/* Catchphrase Fade-In */
/* ===============================
  Catchphrase CSS Animation (統合修正版)
================================ */

/* アニメーション前の状態 */
.catchphrase > span {
  display: block;
  
  /* 初期状態: 安定性を優先し、opacity: 0, translateY: 20px を維持 */
  opacity: 0;
  transform: translateY(20px);
  
  /* 🌟 修正: 継続時間を1.8秒に延長し、優雅な「ふわっと」イージングを適用 */
  animation: catchphrase-fade-in-up 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* 各行の開始を遅らせる (維持) */
.catchphrase > span:nth-child(2) {
  animation-delay: 0.6s;
}

.catchphrase > span:nth-child(3) {
  animation-delay: 1.2s;
}



/* アニメーションの定義 */
/* アニメーションの定義 (維持) */
@keyframes catchphrase-fade-in-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero Zoom */
.hero__img {
  animation: hero-zoom-in 7s ease-out forwards,
    hero-fade-in 1.6s ease-out forwards;
    width: 100%;
    top: unset;
    bottom: unset;
}


@media screen and (max-width: 767px) {
  .hero__img {
    width: 100vw;
  }
}

@keyframes hero-fade-in {
  from {
    filter: brightness(0.5);
  }

  to {
    filter: brightness(1);
  }
}

/* Background Gradient */
@keyframes subtleGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ===============================
  Logo Marquee アニメーションの定義
================================ */
@keyframes auto-marquee {
  from {
    /* アニメーション開始時: 要素を右端から見えない位置に移動 */
transform: translateX(0%);
}
to {
  /* アニメーション終了時: 要素を左に移動。リスト1つ分の幅だけ移動させる */
  /* 🌟 ポイント: 2つのリストを連結してアニメーションをループさせるため、
  1つのリストの幅（つまり全体の幅の50%）だけ左に移動させます。 */
  transform: translateX(-50%); 
}
}


/* ===============================
  Intro Overlay (スクロールで画像を押し上げる層)
================================ */
.intro-overlay {
  height: 100vh;
  position: relative;
  z-index: 10;
  margin-top: -100vh;
}

/* キャッチフレーズのレイアウト調整 */
.intro-overlay .catchphrase {
  position: absolute;
  top: 40%;
  left: 6vw;
  transform: translateY(-50%);
  width: auto;
  text-align: left;
  color: white;
  padding-inline: 24px;
}

@media screen and (max-height: 900px) {
  .intro-overlay .catchphrase {
    top: calc(40% + 40px);
}
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
  .intro-overlay .catchphrase {
    left: 4vw;
  }
  .intro-dx-wrapper {
    padding-inline: 4vw;
  }
  .logo-marquee {
    padding-inline: 4vw;
  }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .intro-overlay .catchphrase {
    left: 24px;
    top: calc(45%);
    padding-inline: 0;
  }

    .intro-overlay {
    height: 100vh;
    }
}

@media screen and (max-width: 767px) {
  .intro-overlay .catchphrase {
    top: calc(24%);
    padding-inline: 0;

  }
  
}

  @media screen and (min-width: 480px) and  (max-width:768px) and (max-height: 800px) {
  .intro-overlay .catchphrase {
    top: 200px;
  }
}

  @media screen and (max-width: 479px) and (max-height: 640px) {
  .intro-overlay .catchphrase {
    padding-top: 200px;
  }
}


  

/* -------------------------------------- */
/* スクロールアニメーションのCSS設定 */
/* -------------------------------------- */

/* 初期状態：画面の下に隠れていて、透明 */
.case-card[data-animation="fade-in-up"].is-hidden {
    opacity: 0;
    transform: translateY(30px); /* 30px下にずらしておく */
    transition: none; /* 初期読み込み時はアニメーションを無効に */
}

/* アニメーション実行後の状態：画面内に表示され、元の位置に戻る */
.case-card[data-animation="fade-in-up"].is-visible {
    opacity: 1;
    transform: translateY(0);
    /* 変化にかける時間と滑らかさを定義。transition-delayはJSが設定します。 */
    transition: opacity 1s ease-out, transform 1s ease-out; 
}

/* 767px以下のスマホ表示のときだけ適用 */
@media (max-width: 767px) {


  /* --- ▼「事業実績」スライダーのためのCSS ▼ --- */

  /* ★★★ 必須 ★★★ */
  /* (PC用の .three-columns などの) grid設定を強制的に上書きします */
  .case-grid.swiper-wrapper {
    display: flex; /* Swiperの基本スタイル(flex)を強制 */
    grid-template-columns: unset; /* PC用のgrid指定を解除 */
    gap: unset; /* PC用のgap指定を解除 */
  }

  /* ★★★ 必須 ★★★ */
  .case-grid .swiper-slide {
    /* Swiperがスライドとして正しく扱うために必須 */
    flex-shrink: 0; 
    
    /* PC用gridアイテムの設定を解除 */
    grid-column: unset;
    grid-row: unset;
    
    /* --- ↓↓ ここから下は、すでにお持ちの設定です ↓↓ --- */

    /* * 画面幅の約90%の幅に設定します。*/
    width: 64%; 
  }

@media screen  and (max-width: 320px) {
  .case-card {
    width: calc(100% - 12vw);
  }
  
}

@media screen  and (max-width: 319px) {
  .case-card {
    width: 100%;
  }
  
}


  /* * 最後のスライドの右側に余白を追加 */
  .case-grid .swiper-slide:last-child {
    margin-right: 6vw;
  }

  /* --- ▲「事業実績」スライダーのためのCSS ▲ --- */
  
  
  /* --- ▼「強み」スライダーのCSS (もしあれば) ▼ --- */
  
  /* * 「強み」スライダーの左右余白 (もし設定していなければ追加) */
 

  .case-teaser-wrapepr {
    padding-inline: 0;
  }

  /* --- テキストを省略（...）する設定 --- */

/* 実績カードのタイトル（.case-title）を2行で省略 */
.case-title {

}

/* 実績カードの抜粋（.case-excerpt）を3行で省略 */
.case-excerpt {

}

.case-url-text{
  font-size: 1rem;
}

.case-container.swiper {
  padding-bottom: 120px;

  padding-left: 20px;
  padding-right: 20px;
  
  /* padding を含めて幅を計算させるため */
  box-sizing: border-box; 
}

.case-excerpt-archive {
  display: block;
  -webkit-line-clamp: unset;

}

.sp-view-more-btn {
  position: absolute;
  bottom: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  left: -50%;
  transform: translate(50%);
  width: 100%;
  z-index: 999;

} 

.single-news-btn {
  max-width: 100%;
}

.en-btn-text {
  padding: 10px 24px;
  font-size: 1.142rem;
  font-weight: 500;
}

.jp-btn-text {
  font-size: 0.875rem;
}

 .btn-contact__circle-2 {
  width: 32px;
  height: 32px;
}

.sp-view-more-btn .btn-contact__inner {
  gap: 24px;
  padding-right: 12px;
}

.single-news__content p {
  font-size: 1rem 
}

.has-24-px-font-size {
  font-size: 1.42857rem !important;
}

.single-news__content p:not(.has-24-px-font-size) {
    font-size: 1rem !important;
  }

  .wp-block-spacer {
    height: 40px !important;
  }

  .wp-block-spacer[style*="height:12px"] {
  display: none !important;
  }


}

    @media screen and (max-width: 479px) {

      .news-list-archive__item {
        padding: 16px 16px 12px 16px;
      }
    }

    
body.home .blue-bar {
  transition: 
  opacity 1.3s ease-out,
  transform 0s ease-out !important;
}
    
body.home .orangee-bar {
  transition: 
  opacity 1.3s ease-out,
  transform 0s ease-out !important;
}
    

    

    /* --- Contact Form 7 デザイン崩れ防止CSS --- */

/* 1. CF7が自動挿入するspanラッパーを「無かったこと」にする */
.wpcf7-form-control-wrap,
.wpcf7-list-item {
  /* 中身だけを表示させ、ラッパーの存在をレイアウト上無効化する */
  display: contents;
}

/* 2. 「資料請求」のチェックボックスとラベルを正しく表示 */
/* (CF7は input と label を <label> で囲むため) */
.form-check .wpcf7-list-item > label {
  /* 元の <label for="request-docs"> のスタイルを再現 */
  display: inline !important; 
  font-weight: normal !important;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
}
.form-check .wpcf7-list-item input[type="checkbox"] {
  /* 元の <input id="request-docs"> のスタイルを再現 */
  width: 20px !important;
  height: 20px !important;
  vertical-align: middle;
  margin-right: 8px;
  position: relative;
  top: -3px;
}

/* 3. 「プライバシー」のチェックボックスとラベルを正しく表示 */
.form-group-checkbox .wpcf7-acceptance {
  /* 元の <div class="form-group-checkbox"> のスタイルを継承 */
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-group-checkbox .wpcf7-acceptance input[type="checkbox"] {
   /* 元のCSSのスタイルを継承 */
  width: 20px;
  height: 20px;
  accent-color: #00ADE1;
  position: relative;
  top: 4px;
}
.form-group-checkbox .wpcf7-acceptance .wpcf7-list-item-label {
   /* CF7が生成するテキストのスタイルを、元の<label for="privacy">に合わせる */
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5; /* クリックしやすくするため */
}
.form-group-checkbox .wpcf7-acceptance .wpcf7-list-item-label a {
  /* 元のCSSのスタイルを継承 */
  color: var(--contact-primary-color, #00a0e9);
  text-decoration: underline;
}

/* 4. 送信ボタンが <a> から <input> に変わるため、微調整 */
input.wpcf7-submit.btn-contact {
  padding: 2px !important; /* 元の <a> タグと同じスタイルを適用 */
  height: auto; /* 高さを自動調整 */
  border: none; /* input固有のborderを削除 */
}
input.wpcf7-submit.btn-contact:hover {
  /* ホバー時の背景色を無効化（中のspanで制御するため） */
  background: transparent;
}

/* ================================================= */
/* --- CF7 [submit]タグ デザイン調整CSS --- */
/* ================================================= */

/* [submit]タグは <input> になるため、高さをリセット */
input.wpcf7-submit.btn-contact {
    height: auto;
    border: none;
    /* <input> のデフォルトの背景色や余白をリセット */
    background: none;
    padding: 0;
    margin: 0;
}

/* 枠線のグラデーションを適用 */
input.wpcf7-submit.btn-contact {
    display: inline-block;
    border-radius: 9999px;
    padding: 2px !important; /* ★元の<a>タグと同じ枠線幅 */
    background: linear-gradient(to right, #F29600, #00A3E0);
    text-decoration: none;
    transition: all .3s ease;
}

/* ホバー時に <input> 自体の背景色が変わらないようにする */
input.wpcf7-submit.btn-contact:hover {
    background: linear-gradient(to right, #F29600, #00A3E0);
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #00ADE1;
  border-radius: 4px;
  padding: 0.8em 1em;
  text-align: center;
  font-size: 1rem;



}

/* --- ヒーロー画像をスクロールで非表示にする --- */
.hero__img {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.hero__img.is-hidden {
  opacity: 0;
  visibility: hidden;
}

@media screen and (max-width: 767px) {

.form-check .wpcf7-list-item input[type="checkbox"] {
  margin-right: 0;
  height: 16px !important;
  width: 16px !important;
} 

.form-group-checkbox .wpcf7-acceptance input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
}

}

/* ================================================= */
/* --- 汎用アニメーション (fade-in-up) の設定 --- */
/* ================================================= */

/* * [data-animation="fade-in-up"] が付いた要素の
 * 「隠れた状態 (.is-hidden)」を定義します。
 * （.case-card 以外にも適用されるようになります）
 */
[data-animation="fade-in-up"].is-hidden {
  opacity: 0!important;
  transform: translateY(30px); /* 30px下にずらしておく */
  transition: none; /* JSが is-visible を追加するまでアニメーションしない */
}

.footer-bar-img {
  opacity: 1;
}

/* ↓ こっちは残す ↓ */
@keyframes marquee-animation {
  0% {
 transform: translateX(0) translateZ(0);
}

100% {
  transform: translateX(-50%) translateZ(0);
}
}

.asterisk-label {
    color: #F29600;
    margin-top: 4px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 1rem;
}

.asterisk-label span {
  font-family: "shippori mincho", serif;
}