/*-------------------------
  ブログカード
-------------------------*/
.blog-card {
  background: #fbfaf8;
  border: 1px solid #ddd;
  word-wrap: break-word;
  max-width: 100%;
  border-radius: 5px;
  margin: 30px;
  /* sp用 ※4 */
}
.blog-card:hover {
  background: #fee;
}
.blog-card a {
  text-decoration: none;
}
.blog-card-title {
  color: #337ab7;
  display: block;
}
.blog-card-thumbnail {
  float: left;
  padding: 10px;
}
.blog-card-thumbnail img {
  display: block;
  padding: 0;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.blog-card-content {
  line-height: 120%;
}
.blog-card-title {
  padding: 10px 10px 10px 0;
  font-size: 120%;
  font-weight: bold;
  line-height: 1.5em;
}
.blog-card-excerpt {
  color: #333;
  margin: 0 10px 10px;
  line-height: 1.5em;
}
.blog-card .clear {
  clear: both;
}
/* --- ヘッダー最終調整：ロゴ独立・メニュー凝縮・追従時の調整 --- */

/* 1. ヘッダー全体の幅と配置 */
header.gnav .gnav__content.content {
  max-width: 1240px !important;
  width: 95% !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative; /* ロゴ配置の基準 */
}

/* 2. ロゴをメニューから「分離」して左端に配置 */
header.gnav nav ul li.header__logo {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 169px !important; /* 元のサイズ */
  margin: 0 !important;
  padding: 0 !important;
  background: none !important; /* ロゴにドットを出さない */
}

/* 3. メニューエリア（About〜Recruit）を右側に凝縮 */
header.gnav nav {
  margin-left: auto !important;
  margin-right: 120px !important; /* 右端(Contact)との距離 */
}

header.gnav nav ul {
  display: flex !important;
  gap: 0 !important;
  padding-left: 170px !important; /* ロゴが重ならないよう余白を確保 */
}

header.gnav nav ul li.item__flex1:not(.header__logo) {
  flex: none !important;
  width: 110px !important; /* 青枠の密度 */
  padding: 15px 0 !important; /* 上下の余白を増やしてアイコン欠けを防止 */
  background-position: center !important;
}

/* 4. アイコンサイズの調整と「削れ」防止 */
header.gnav li img.icn {
  display: block !important;
  height: 40px !important; /* PC時の基本高さ */
  width: auto !important;
  margin: 0 auto 5px !important;
  object-fit: contain;
}

/* ★採用情報のみ小さく */
header.gnav li:nth-child(8) img.icn {
  height: 32px !important;
}

/* 5. スクロール追従（Sticky）時の高さ微調整 */
/* スクロールしてヘッダーが小さくなった時にアイコンが削れるのを防ぐ */
header.gnav.fixed .gnav__content {
  height: 50px !important; /* アイコンが上下で切れない高さを確保 */
}

header.gnav.sticky li img.icn {
  height: 35px !important; /* 追従時は少しだけアイコンを小さくして収める */
}

header.gnav.sticky li:nth-child(8) img.icn {
  height: 28px !important; /* 追従時の採用アイコン */
}

/* 6. テキストサイズ（元のサイズ） */
header.gnav li span.txt-en {
  font-size: 2rem !important;
  font-family: "Jost", sans-serif !important;
}
header.gnav li i {
  font-size: 1.4rem !important;
  font-style: normal !important;
}

/* 7. 背景ドット（順番維持） */
header.gnav li:nth-child(2) {
  background-image: url("./img/dot-yellow.webp") !important;
  background-size: 100px !important;
}
header.gnav li:nth-child(3) {
  background-image: url("./img/dot-red.webp") !important;
  background-size: 100px !important;
}
header.gnav li:nth-child(4) {
  background-image: url("./img/dot-blue.webp") !important;
  background-size: 100px !important;
}
header.gnav li:nth-child(5) {
  background-image: url("./img/dot-yellow.webp") !important;
  background-size: 100px !important;
}
header.gnav li:nth-child(6) {
  background-image: url("./img/dot-red.webp") !important;
  background-size: 100px !important;
}
header.gnav li:nth-child(7) {
  background-image: url("./img/dot-blue.webp") !important;
  background-size: 100px !important;
}
header.gnav li:nth-child(8) {
  background-image: url("./img/dot-yellow.webp") !important;
  background-size: 100px !important;
}

/* --- TOPページのH1カスタマイズ：大きいオレンジ色を復活 --- */

/* PC・スマホ共通：文字色をオレンジ、フォントをKaiseiOptiに */
.home .area--1 .left h1 {
  color: #f08300 !important;
  font-family: "KaiseiOpti", serif !important;
  font-size: 3.5rem !important; /* 約40px */
  line-height: 1.4 !important;
  font-weight: bold !important;
  margin-top: 30px !important;
}

/* スマホサイズ（横幅768px以下）の調整 */
@media only screen and (max-width: 768px) {
  .home .area--1 .left h1 {
    font-size: 2rem !important;
    line-height: 1.5 !important;
  }

  /* スマホ時に改行(br)を有効にする */
  .home .area--1 .left h1 br {
    display: block !important;
  }
}

/* --- FAQデザイン復元・最適化 --- */
.faq-layout-wrapper {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

/* カード全体のスタイル（元のcaseデザインを継承） */
.faq-item-card {
  background: #fff;
  margin-bottom: 40px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.faq-item-card .top {
  padding: 30px;
  background: #fdfdfd;
  align-items: center;
}

.faq-item-card .left img {
  max-width: 100px;
  height: auto;
}

.faq-item-card h2 {
  font-size: 1.4rem;
  color: #f08300;
  margin-bottom: 5px;
}

.faq-item-card h3 {
  font-size: 1.8rem;
  color: #333;
  line-height: 1.5;
  text-align: left;
}

/* トグル部分の挙動を元のJSに合わせる */
.faq-item-card .toggle-container {
  border-top: 1px solid #eee;
}

.faq-item-card .toggle-text {
  /* JSで制御されるため、初期状態は元のCSSに従う */
}

/* 回答内のボタン配置を調整 */
.faq-item-card .bottom {
  padding: 30px;
}

.faq-item-card .bottom p {
  margin-bottom: 25px;
  line-height: 1.8;
}

/* モバイル調整 */
@media only screen and (max-width: 768px) {
  .faq-item-card .top {
    flex-direction: column;
    text-align: center;
  }
  .faq-item-card h3 {
    text-align: center;
    margin-top: 15px;
  }
}
/* --- FAQアイコンとテキストの間の余白を強制的に作る --- */

/* 左側の画像エリアに右方向の余白（隙間）を追加 */
.faq-item-card .top .left {
  flex: 0 0 70px !important; /* エリアの幅を少し狭める */
  margin-right: 30px !important; /* ★ここで右側テキストとの間に隙間を作ります */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* アイコン画像自体の大きさを制限 */
.faq-item-card .top .left img {
  width: 60px !important;
  max-width: 60px !important;
  height: auto !important;
}

/* 右側のテキストエリアを整える */
.faq-item-card .top .right {
  flex: 1 !important;
  padding-left: 0 !important; /* leftのmarginで隙間を作るのでここは0でOK */
}
/* --- FAQカードの赤枠の隙間を完全に除去 --- */

/* 1. PC版のカード自体の高さ・余白をリセット */
.home .area--4 .case article {
  min-height: 0 !important; /* 強制的に最小高さを解除 */
  height: auto !important;
  padding-bottom: 10px !important; /* カード下の余白を最小に */
  margin-bottom: 20px !important; /* カード同士の間隔を調整 */
  transform: none !important; /* 2列目のカードを下げていた指定を解除 */
}

/* 2. 質問テキスト(h3)の下に溜まっている余白を消す */
.home .area--4 .case article h3 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 3. トグル（矢印）部分の上の余白を消す */
.home .area--4 .case article .toggle-container {
  margin-top: 0 !important;
}

.home .area--4 .case article .toggle .toggle-button {
  height: 30px !important; /* 矢印エリアの高さも少し縮める */
}

/* 4. スマホ版も同様にリセット */
.home .area--4 .case-sp article {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 10px !important;
}
/* --- 5.6番の隙間を物理的に消滅させる --- */

.home .area--4 .case article .top.flex {
  height: auto !important; /* 高さを固定せず中身に合わせる */
  min-height: 0 !important; /* 最小高さを撤廃 */
  padding-bottom: 0 !important; /* 下の余白を削除 */
  align-items: flex-start !important; /* アイコンを上揃えにする */
}

/* 質問タイトルの下のマージンを削る */
.home .area--4 .case article .right h3 {
  margin-bottom: 0 !important;
  padding-bottom: 5px !important;
}

/* 矢印ボタンエリア自体の高さを詰める */
.home .area--4 .case article .toggle .toggle-button {
  height: 40px !important;
  margin-top: -10px !important; /* 少し上に食い込ませて隙間を消す */
}

/* --- サービス一覧：緑リボンの設定 --- */
.common-ribbon article.ribbon-green {
  background-image: url("./img/service/area--1/ribbon_green.png") !important;
}

/* 文字数が多い場合の微調整（リボンからはみ出さないようサイズ調整） */
.common-ribbon article.ribbon-green h4 {
  font-size: 1.8rem !important; /* PC版サイズ調整 */
  line-height: 1.3 !important;
}

@media only screen and (max-width: 768px) {
  .common-ribbon article.ribbon-green h4 {
    font-size: 1.3rem !important; /* スマホ版サイズ調整 */
  }
}
/* --- サービス一覧：表示崩れ最終調整 --- */

/* 見出しが重ならないよう高さを自動調整 */
.area--2_1 {
  height: auto !important;
  align-items: flex-start !important; /* 画像と文章の上端を揃える */
}

/* タイトルが長い場合のフォントサイズ微調整（PC） */
.doubleTtl ul li:last-child {
  font-size: clamp(1.8rem, 2.5vw, 3.4rem) !important; /* 画面幅に合わせて可変 */
  line-height: 1.3 !important;
}

/* 王冠アイコン（対応可能なサービス）を横並びにする（PC） */
@media only screen and (min-width: 769px) {
  .area--2_3 .col6 {
    display: flex !important;
    flex-wrap: nowrap !important; /* 折り返しを禁止 */
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .area--2_3 .col6 a {
    width: auto !important; /* 幅を自動に */
    min-width: 140px !important;
    height: 140px !important; /* 正円を維持するためのサイズ */
    flex: 0 0 auto !important;
  }
}

/* スマホ版の見出し見切れ対策 */
@media only screen and (max-width: 768px) {
  .double-border.doubleTtl {
    overflow: visible !important;
  }
  .doubleTtl ul li:last-child {
    font-size: 1.8rem !important; /* スマホで文字を少し小さく */
    white-space: normal !important; /* 改行を許可 */
  }
}
/* --- サービス一覧：崩れ防止の決定版 --- */

/* タイトルの「サービス 06」部分が潰れるのを防ぐ */
.doubleTtl ul {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.doubleTtl ul li:nth-child(1),
.doubleTtl ul li:nth-child(2) {
  flex-shrink: 0 !important; /* 数字部分を絶対に縮ませない */
}
.doubleTtl ul li:last-child {
  flex: 1 !important;
  font-size: clamp(
    1.6rem,
    2.5vw,
    3.4rem
  ) !important; /* 画面幅に合わせて自動で文字サイズを微調整 */
  padding-left: 15px !important;
  white-space: normal !important; /* 長い場合は自動で改行させる */
}

/* PC版：左右をきっちり50%ずつに固定 */
@media only screen and (min-width: 769px) {
  .area--2_1 {
    display: flex !important;
    align-items: flex-start !important;
  }
  .area--2_1 > .item__flex1 {
    width: 50% !important;
    flex: 0 0 50% !important;
  }
  .area--2_1 > article.sp-display-none {
    width: 50% !important;
    flex: 0 0 50% !important;
    padding-left: 50px !important; /* 画像とテキストの間の距離 */
  }
  .area--2_1 > article.sp-display-none img {
    width: 100% !important;
    height: auto !important;
  }
}
/* PCでは一行、スマホでは折り返しを許可 */
.doubleTtl ul li:last-child {
  white-space: normal !important;
}
@media only screen and (min-width: 769px) {
  .doubleTtl ul li:last-child {
    white-space: nowrap !important;
  }
}

/* サービス01〜03のアイコンエリア：中央揃え＆重なり解消 */
#page1_top ~ .area--2_3 .col6,
#page2_top ~ .area--2_3 .col6,
#page3_top ~ .area--2_3 .col6 {
  display: flex !important;
  flex-wrap: wrap !important; /* 入りきらない分を改行 */
  justify-content: center !important; /* ★全体を中央揃えにする */
  width: 100% !important;
  max-width: 900px; /* ボタンとの重なりを防ぐガード */
  margin: 20px auto 0 !important; /* 上下に余白を作り、エリア自体を中央へ */
  padding: 0 10px !important;
}

#page1_top ~ .area--2_3 .col6 a,
#page2_top ~ .area--2_3 .col6 a,
#page3_top ~ .area--2_3 .col6 a {
  flex: 0 0 auto !important;
  margin: 5px 8px 15px !important; /* 左右に均等なマージンを持たせて中央寄せを安定させる */
}

/* 右側の「制作実績」ボタンなどがある場合は、少し下げて重なりを物理的に回避 */
.area--2_3 .btn-area {
  clear: both !important;
  margin-top: 30px !important;
}

/* スマホ版の微調整 */
@media only screen and (max-width: 768px) {
  #page1_top ~ .area--2_3 .col6,
  #page2_top ~ .area--2_3 .col6,
  #page3_top ~ .area--2_3 .col6 {
    max-width: 100% !important;
  }
}
/* =========================
  AI INTRO カスタマイズ
========================= */

.area--ai-intro {
  padding: 120px 0;
  background: #f7f9fb;
  position: relative;
  overflow: hidden; /* 背景のはみ出しをカット */
  z-index: 1;
}

/* 背景画像共通設定 */
.ai-intro__bg {
  position: absolute;
  z-index: -1;
  pointer-events: none; /* クリックを無視 */
}

.ai-intro__bg img {
  width: auto;
  height: auto;
  max-width: 60vw; /* 画面に対して大きすぎないよう調整 */
  opacity: 0.6; /* 透明度はここでお好みで調整 */
}

/* bg1: 左上に配置 */
.ai-intro__bg--top {
  top: -50px;
  left: -100px;
}

/* bg2: 右下に配置 */
.ai-intro__bg--bottom {
  bottom: -100px;
  right: -50px;
}

/* レイアウト・文字設定（既存テーマのクラスを継承） */
.ai-intro__top {
  position: relative;
  z-index: 2;
}
.ai-intro__flex {
  display: flex;
  align-items: center;
  gap: 60px;
}
.ai-intro__text {
  flex: 1;
}

.ai-intro__text h2 {
  font-family: "KaiseiOpti", serif !important;
  font-size: 3.4rem !important;
  line-height: 1.4 !important;
  margin-bottom: 24px;
}

.ai-intro__text .lead {
  font-family: "KaiseiOpti", serif !important;
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.ai-intro__btn {
  display: inline-block;
  margin-top: 20px;
  color: #f08300 !important;
  font-weight: bold;
  font-family: "Jost", sans-serif !important;
  font-size: 1.8rem;
  border-bottom: 2px solid #f08300;
  transition: 0.3s;
}

.ai-intro__image {
  flex: 1;
  text-align: center;
}
.ai-intro__image img {
  max-width: 100%;
}

.ai-intro__case {
  margin-top: 100px;
  position: relative;
  z-index: 2;
}
.ai-intro__case-ttl {
  text-align: center;
  font-family: "KaiseiOpti", serif !important;
  font-size: 2.8rem;
  margin-bottom: 60px;
  color: #f08300;
}

.ai-case-card {
  background: rgba(255, 255, 255, 0.9); /* 背景が透けすぎないよう白を強めに */
  border: 1px solid #5cb9e7;
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.ai-case-flex {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.ai-case-img,
.ai-case-txt {
  flex: 1;
}

/* スマホ対応 */
@media only screen and (max-width: 768px) {
  .area--ai-intro {
    padding: 60px 24px;
  }
  .ai-intro__flex,
  .ai-case-flex {
    flex-direction: column;
    gap: 30px;
  }
  .ai-intro__bg img {
    max-width: 80vw;
  } /* スマホでは少し小さく */
  .ai-intro__text h2 {
    font-size: 2.2rem !important;
  }
}
/* =========================
  AI INTRO 修正・完全版
========================= */

/* 1. 見出しのデザイン */
.ai-intro__main-ttl {
  text-align: center;
  position: relative;
  margin-bottom: 60px;
}
.ai-intro__bg-txt {
  font-size: 12rem;
  color: #f0f4f7;
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  z-index: -1;
  letter-spacing: 0.1em;
}
.ai-intro__main-ttl h2 {
  font-size: 3.2rem !important;
  color: #3d3d3d;
  margin-bottom: 10px;
}
.ai-intro__main-ttl .sub-lead {
  font-size: 1.6rem;
  font-weight: bold;
}

/* 3. circleの上のテキスト配置 */
.circle-container {
  position: relative;
  display: inline-block;
}
.circle-label {
  position: absolute;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #367fe7;
  font-weight: bold;
  text-align: center;
  pointer-events: none;
}
.circle-label span {
  font-size: 1rem;
  font-weight: normal;
  display: block;
  color: #3d3d3d;
}
.label-top {
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  color: #367fe7;
}
.label-left {
  top: 60%;
  left: 10%;
  color: #00c2b2;
}
.label-right {
  top: 55%;
  right: 10%;
  color: #ff608c;
}

/* 4. ボタンの横幅調整 */
.ai-btn-fix {
  margin-left: 0 !important;
  margin-top: 40px;
}

/* 5. 見出しのデザイン修正（吹き出し風） */
.ai-intro__case-ttl {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.ai-intro__case-ttl::before,
.ai-intro__case-ttl::after {
  content: "";
  width: 30px;
  height: 2px;
  background: #3d3d3d;
  transform: rotate(-45deg);
}

/* CASEタイトルのフォント */
.ai-case-card h4.g_square {
  font-size: 4rem !important;
  -webkit-text-stroke: 1px #3d3d3d;
  color: #fff;
  margin-bottom: 20px;
}
.ai-case-card h4 span {
  font-size: 1.8rem;
  -webkit-text-stroke: 0;
  color: #f08300;
  margin-left: 20px;
}

/* 6. ケース説明文 */
.case-desc {
  margin-top: 30px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
  font-size: 1.5rem;
  line-height: 1.7;
}

/* レスポンシブ調整 */
@media only screen and (max-width: 768px) {
  .ai-intro__bg-txt {
    font-size: 6rem;
    top: -10px;
  }
  .circle-label {
    font-size: 1rem;
  }
  .circle-label span {
    display: none;
  } /* スマホでは詳細テキストを隠してスッキリさせる */
}
/* --- area--ai-intro コンテンツ幅の強制調整 --- */

/* セクション全体の背景を白に固定 */
.area--ai-intro {
  padding: 100px 0;
  background: #fff !important;
  overflow: hidden;
}

/* コンテンツを中央に寄せる（既存テーマの最大幅に合わせる） */
.ai-intro__top,
.ai-intro__case {
  max-width: 1080px !important; /* 既存テーマの content2 に合わせる */
  margin: 0 auto !important;
  padding: 0 40px !important; /* 左右の余白をしっかり確保 */
  box-sizing: border-box;
}

/* 上部フレックスエリアの幅調整 */
.ai-intro__flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5%; /* 左右のパーツの間に隙間を作る */
}

/* 左テキストエリアの幅を制限 */
.ai-intro__text {
  flex: 0 0 55% !important; /* 横幅を55%に固定して広がりすぎを防ぐ */
}

/* 右画像エリアの幅を制限 */
.ai-intro__image {
  flex: 0 0 40% !important;
  display: flex;
  justify-content: flex-end;
}

/* 3つの円のコンテナサイズを固定 */
.circle-container {
  width: 100%;
  max-width: 480px; /* デザイン案に近いサイズ */
  position: relative;
}

.circle-container img {
  width: 100%;
  height: auto;
}

/* 実績カードの幅をコンテンツ内に収める */
.ai-case-card {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* スマホ時の幅調整 */
@media only screen and (max-width: 768px) {
  .ai-intro__top,
  .ai-intro__case {
    padding: 0 24px !important;
  }
  .ai-intro__flex {
    flex-direction: column;
    gap: 40px;
  }
  .ai-intro__text,
  .ai-intro__image {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}