/*---------------------------------------------------------------------*/
/*　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　     　*/
/*　　　　　　　       Serviceページ用CSS　2025.08.10　 　　　          */
/*　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　     */
/*---------------------------------------------------------------------*/



.t-noimage {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
  overflow: hidden;
}


.t-noimage p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 1em;
}

.service-fuan {
  width: 100%;
  background-color:#E9ECF0;
  padding: 40px 0 0;
  margin: 0 auto 30px;
  overflow: hidden;
}

.service-fuan h5 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: #222;
  text-align:center;
  margin-bottom: 1.5em;
}

.service-fuan-box {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.service-fuan-pc {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
}

.service-fuan-sp {
  display: none;
}

.service-tr-box {
  width: 95%;
  max-width: 1200px;
  overflow: hidden; /* floatの影響を受けないようにする */
  margin: 0 auto 40px;
}

.service-tr-image {
  float: left;
  width: 450px;
  margin-right: 50px;
  margin-bottom: 40px;
}

.service-tr-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.service-tr-text p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 1em;
}

.service-tl-box {
  width: 95%;
  max-width: 1200px;
  overflow: hidden; /* floatの影響を受けないようにする */
  margin: 0 auto 40px;
}

.service-tl-image {
  float: right;
  width: 450px;
  margin-left: 50px;
  margin-bottom: 40px;
}

.service-tl-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.service-tl-text p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 1em;
}

.service-3points {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 150px;
  padding: 40px;
  border: #333 solid 1px;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr; /* デフォは1カラム（スマホ基準） */
  grid-auto-rows: auto;
  row-gap: 32px;
}

/* ========== h5（ロゴ＋テキスト） ========== */
.service-3points > h5 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  text-align: center;
}

.service-3points > h5 img {
  height: 50px;   /* 高さを固定 */
  width: auto;    /* アスペクト比維持 */
  display: block;
}

/* ========== 左側のテキストブロック ========== */
.service-3points-text {
  /* PCでは左カラムに配置（下で指定） */
}

.service-3points-text h6 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin: 0;
  padding: 0;
}

.service-3points-text p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 1em;
}


/* ========== 右側のアイコン群 ========== */
.service-3pointsp-icon {
  display: grid;
  grid-template-columns: 1fr; /* SPは縦並び */
  row-gap: 24px;              /* アイコン間の余白（SP） */
  text-align: center;
}


.service-3pointsp-icon > div img {
  max-width: 180px;
  width: 70%;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}


.service-3pointsp-design h6 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 2;
  letter-spacing: 0em;
  color: #0085B2;
  margin-bottom: 0.3em;
  padding: 0;
}

.service-3pointsp-function h6 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 2;
  letter-spacing: 0em;
  color: #00B2B2;
  margin-bottom: 0.3em;
  padding: 0;
}

.service-3pointsp-operation h6 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 2;
  letter-spacing: 0em;
  color: #E8B917;
  margin-bottom: 0.3em;
  padding: 0;
}

.service-3pointsp-icon > div p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 0;
}


/* ========== PC表示（768px以上） ========== */
@media (min-width: 768px) {
  .service-3points {
    grid-template-columns: 1fr 70px 1fr; /* 左テキスト、中央余白70px、右アイコン */
    row-gap: 40px;
  }

  .service-3points > h5 {
    grid-column: 1 / -1; /* 見出しは横幅全体で中央寄せ */
  }

  .service-3points-text {
    grid-column: 1;
  }

  .service-3pointsp-icon {
    grid-column: 3;
    grid-template-columns: repeat(3, 1fr); /* 3カラムで横並び */
    column-gap: 40px; /* アイコン間は50px */
    row-gap: 0;
    align-items: start;
  }

  /* ★ PC時：アイコン画像の高さを90pxに統一（比率維持） */
  .service-3pointsp-icon > div img {
    height: 90px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
}

.service-original {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0;
  overflow: visible;
}

.service-original p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 1em;
}

.swiper-container {
  background:#82C6E3;
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;   /* = calc(50% - 50vw) と同義 */
  margin-right: -50vw;
  margin-bottom: 20px;
  padding: 30px 0;
  overflow: hidden;     /* 子要素のはみ出しはここで隠す */
}

.swiper-wrapper {
 transition-timing-function: linear !important; /* ←一定速度で動くために追加 */
}

.swiper-slide {
 width: auto; /* 自動幅 */
 flex-shrink: 0;
 display: flex;
 justify-content: center;
 align-items: center;
}

.swiper-slide img {
 width: 220px;
 height: auto;
 margin: 0 5px;
 object-fit: cover;
 border-radius: 8px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s;
}

.swiper-slide img:hover {
 transform: scale(1.05);
}

.pageBT_wrapper {
 text-align: center;
 margin-bottom: 140px;
}

.pageBT {
 display: inline-flex;
 align-items: center;
 padding:20px 100px;
 background-color: #FFC422;
 color: #222;
 font-family: "Noto Sans", sans-serif;
 font-size: 0.95rem;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-decoration: none;
 border-radius: 999px;
 transition: background-color 0.3s ease;
 border: none;
}

.pageBT:hover {
 background-color: #FFDB78; /* ホバー時の色 */
}

.service-ikkan {
  width: 100%;
  background-color:#F3F3F3;
  padding: 40px 0;
  margin: 0 auto 70px;
  overflow: hidden;
}

.service-ikkan h5 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: #222;
  text-align:center;
  margin-bottom: 1.5em;
}

.service-ikkan-box {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.service-ikkan-pc {
  width: 95%;
  max-width: 1000px;
  margin: 0 auto;
  display: block;
}

.service-ikkan-sp {
  display: none;
}

.related-link {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 24px 0;
  border-top: 1px solid #e9e9e9;
}

.related-link > h6 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 1.125rem; /* 18px相当 */
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #222;
  margin: 0 0 .75em;
  display: flex;
  align-items: center;
  gap: .5em;
}

.related-link > h6::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1E587C; /* WEB FOREST系の落ち着いたブルー */
  display: inline-block;
}

.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;      /* 横並びで足りなければ自動折り返し */
  gap: .5em 1em;        /* 行間・列間のすきま */
}

.related-list li {
  margin: 0; padding: 0; /* 余白はa側で管理 */
}

.related-list a {
  display: inline-block;
  padding: .5em .9em;
  font-family: "Noto Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #1a1a1a;
  text-decoration: none;
  background: #fff;
  border: 1px solid #dddddd;
  border-radius: 999px;    /* チップ風の丸み */
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.related-list a:hover,
.related-list a:focus-visible {
  color: #1E587C;
  border-color: #1E587C;
  background: #f7fbff;
  box-shadow: 0 0 0 3px rgba(30, 88, 124, .12);
  outline: none;
}



/* カラートークン（必要に応じて調整） */
.related-links {
  --bg: #f8fafc;      /* 背景 */
  --panel: #ffffff;   /* リンク背景 */
  --border: #e5e7eb;  /* 枠線 */
  --text: #374151;    /* 文字 */
  --muted: #6b7280;   /* 補助文字 */
  --accent: #2563eb;  /* アクセント */
  --accent-bg: #eff6ff;
}

/* コンテナ */
.related-links {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
}

/* タイトル */
.related-links h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
}

/* リスト配置：PCは自動で複数列、スマホは1列 */
.related-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

/* リンク（チップ風） */
.related-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 9999px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .06s ease;
}

/* 矢印アイコン（お好みで削除可） */
.related-links a::after {
  content: "→";
  font-size: 0.9em;
  color: var(--muted);
  transition: color .2s ease, transform .2s ease;
}

/* ホバー/フォーカス */
.related-links a:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.related-links a:hover::after {
  color: var(--accent);
  transform: translateX(2px);
}
.related-links a:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent) 45%, white);
  outline-offset: 2px;
}



/* スマホ表示時の調整 */
@media (max-width: 767px) {

.t-noimage {
  width: 90%;
  max-width: none;
  margin: 0 auto 40px;
  overflow: hidden;
}


.t-noimage p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 1em;
}

.service-fuan {
  width: 100%;
  background-color:#E9ECF0;
  padding: 30px 0 0;
  margin: 0 auto 30px;
  overflow: hidden;
}

.service-fuan h5 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #222;
  text-align:center;
  margin-bottom: 1.5em;

}

.service-fuan-box {
  width: 90%;
  max-width: none;
  margin: 0 auto;
  overflow: hidden;
}

.service-fuan-pc {
  display: none;
}

.service-fuan-sp {
  width: 100%;
  margin: 0 auto;
  display: block;
}

.service-tr-box {
  width: 90%;
  overflow: hidden;
  margin: 0 auto 40px;
}

.service-tl-box {
  width: 90%;
  overflow: hidden;
  margin: 0 auto 40px;
}
  
.service-tr-image {
  float: none;
  width: 100%;
  margin: 0 auto 30px;
}
  
.service-tr-image img {
  max-width: 100%;
}

.service-tl-image {
  float: none;
  width: 100%;
  margin: 0 auto 30px;
}

.service-tl-image img {
  max-width: 100%;
}

  
.service-tr-text p {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.9rem;
 line-height: 1.8;
}

  .service-3points {
    width: 90%;
  }

  /* h5は縦並び */

.service-3points > h5 {
    flex-direction: column;
    gap: 0.4em;
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #222;
  text-align: center;
}

.service-3points > h5 img {
  height: 40px;   /* 高さを固定 */
  width: auto;    /* アスペクト比維持 */
  display: block;
}

.service-3points-text h6 {
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #222;
  margin: 0;
  padding: 0;
  text-align:center;
}

.service-3points-text p {
  font-family: "Noto Sans", sans-serif;
  font-size: 1rem !important;
 line-height: 1.8;
}


  /* テキストとアイコンも縦並び（初期値でOK） */
  .service-3pointsp-icon {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  
  .service-3pointsp-icon > div img {
    height: 150px;  /* ← 確認して適時変更してください */
    width: auto;
    object-fit: contain;
	margin-bottom: 15px;
  }
  
.service-3pointsp-design h6 {
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0em;
  color: #0085B2;
  margin-bottom: 0.3em;
  padding: 0;
}

.service-3pointsp-function h6 {
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0em;
  color: #00B2B2;
  margin-bottom: 0.3em;
  padding: 0;
}

.service-3pointsp-operation h6 {
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0em;
  color: #E8B917;
  margin-bottom: 0.3em;
  padding: 0;
}

.service-3pointsp-icon > div p {
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 0;
}

.service-original {
  width: 90%;
  max-width: none;
  margin: 0 auto 40px;
  padding: 0;
  overflow: visible;
}

.service-original p {
  font-family: "Noto Sans", sans-serif;
  font-size: 0.9rem;
 line-height: 1.8;
}

.swiper-slide img {
 width: 200px; /* スマホ用にサイズ調整 */
}

.pageBT {
 padding:20px 70px;
 margin: 0 auto;
}

.service-ikkan {
  width: 100%;
  background-color:#F3F3F3;
  padding: 30px 0;
  margin: 0 auto 30px;
  overflow: hidden;
}

.service-ikkan h5 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #222;
  text-align:center;
  margin-bottom: 1.5em;

}

.service-ikkan-box {
  width: 90%;
  max-width: none;
  margin: 0 auto;
  overflow: hidden;
}

.service-ikkan-pc {
  display: none;
}

.service-ikkan-sp {
  width: 100%;
  margin: 0 auto;
  display: block;
}

.related-link {
    margin: 0 auto 30px;
    padding: 16px 0;
  }
  .related-link > h6 {
    font-size: 1rem;
    letter-spacing: 0.06em;
    margin-bottom: .5em;
  }
  .related-list {
    gap: .5em .6em;
  }
  .related-list a {
    font-size: .92rem;
    padding: .45em .8em;
    border-radius: 999px;
  }



}



/*---------------------------------------------------------------------*/
/*                                                                       */
/*                  SEO対策ページ用CSS　追記分　2025.08.10               */
/*                                                                       */
/*---------------------------------------------------------------------*/



/* ========================================
   具体的な施策セクション
======================================== */
.seo-measures {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.seo-measures > p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 1em;
}

.seo-measures-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 24px 0;
}

.measures-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.measure-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 18px 20px;
}

.measure-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
}

.measure-item p {
  line-height: 2;
  letter-spacing: 0.1em;
}

.measure-item strong {
  display: block;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}



/* ========================================
   AI時代のSEO対策ボックス
======================================== */
.seo-ai-box {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
  background: linear-gradient(135deg, #e8f5e9 0%, #e3f2fd 100%);
  border-radius: 8px;
  padding: 32px;
}

.seo-ai-box h3 {
  color: #1565c0;
  font-weight: 700;
  margin-bottom: 16px;
}


/* ========================================
   オプションセクション
======================================== */
.seo-option-wrap {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.seo-option-inner {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

.seo-option-image {
  flex: 0 0 450px;
}

.seo-option-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.seo-option-text {
  flex: 1;
}

.seo-option-text p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 1em;
}

.option-badge {
  display: inline-block;
  background: #f9a825;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.08em;
}

.option-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.option-list li {
  padding: 6px 0;
  padding-left: 1.4em;
  text-indent: -1.4em;
  line-height: 2;
  letter-spacing: 0.1em;
}

.option-list li::before {
  content: "● ";
  color: #f9a825;
  font-size: 0.6rem;
  vertical-align: middle;
}

.option-target {
  background: #f9f9f9;
  border-radius: 6px;
  padding: 16px 20px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.option-target h5 {
  font-weight: 600;
  color: #888;
  font-size: 0.88rem;
  margin-bottom: 10px;
}

.option-target ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.option-target ul li {
  padding: 4px 0;
  padding-left: 1.4em;
  text-indent: -1.4em;
  line-height: 2;
  letter-spacing: 0.1em;
}

.option-target ul li::before {
  content: "→ ";
  color: #f9a825;
}

.option-note {
  font-size: 0.83rem !important;
  color: #888 !important;
  margin-top: 8px !important;
}


/* ========================================
   正直なお話ボックス
======================================== */
.seo-honest-box {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 32px;
}

.seo-honest-box h5 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #555;
  margin-bottom: 16px;
}

.seo-honest-box p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #555;
  margin-bottom: 1em;
}

.seo-honest-box p:last-child {
  margin-bottom: 0;
}

.seo-honest-box strong {
  font-weight: 700;
  color: #333;
}


/* ========================================
   FAQセクション
======================================== */
.seo-faq {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.seo-faq > h4 {
  margin-bottom: 20px;
}

.faq-item {
  border-bottom: 1px solid #ddd;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-q {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0 10px;
}

.faq-q .q-mark {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: #2e7d32;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.faq-q-text {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #222;
  padding-top: 4px;
}

.faq-a {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 0 0 24px 0;
}

.faq-a .a-mark {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: #e0e0e0;
  color: #555;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.faq-a p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #555;
  margin: 0;
  padding-top: 4px;
}


/* ========================================
   スマホ対応（SEOページ追記分）
   max-width: 767px
======================================== */
@media (max-width: 767px) {

  .seo-option-wrap {
    width: 90%;
  }

  .seo-option-inner {
    flex-direction: column;
    gap: 24px;
  }

  .seo-option-image {
    flex: none;
    width: 100%;
  }

  .seo-measures {
    width: 90%;
  }

  .measures-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .measure-item {
    padding: 14px 16px;
  }


  .seo-ai-box {
    width: 90%;
    padding: 24px 20px;
  }


  .seo-honest-box {
    width: 90%;
    padding: 24px 20px;
  }

  .seo-faq {
    width: 90%;
  }

  .faq-q .q-mark,
  .faq-a .a-mark {
    width: 24px;
    height: 24px;
    font-size: 0.82rem;
  }

}



/*---------------------------------------------------------------------*/
/*                                                                       */
/*          ホームページ更新・管理ページ用CSS　追記分                    */
/*                                                                       */
/*---------------------------------------------------------------------*/


/* ========================================
   お悩みセクション
======================================== */
.mainte-trouble {
  width: 100%;
  background-color: #E9ECF0;
  padding: 60px 0 50px;
}

.mainte-trouble h4 {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 1.5em;
}

.trouble-grid {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.trouble-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border-radius: 10px;
  padding: 24px 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.trouble-icon {
  width: 200px;
  height: auto;
  flex-shrink: 0;
  display: block;
}

.trouble-item p {
  line-height: 2;
  letter-spacing: 0.1em;
}

.trouble-item strong {
  display: block;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.trouble-lead {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: #FFC422;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

  .trouble-lead br {
	display: none;
  }


/* ========================================
   料金表セクション
======================================== */
.mainte-price {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
}

/* --- 都度料金 --- */
.mainte-price-spot {
  background: #f7f7f7;
  border-radius: 10px;
  padding: 36px 40px;
  margin-bottom: 50px;
}

.mainte-price-spot h5,
.mainte-price-teigaku h5 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 1.2em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid #ddd;
}

.spot-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.spot-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #e0e0e0;
  line-height: 2;
  letter-spacing: 0.05em;
}

.spot-item:last-of-type {
  border-bottom: none;
}

.spot-label {
  font-weight: 500;
  color: #333;
}

.spot-price {
  font-weight: 700;
  font-size: 1.1rem;
  color: #1E587C;
}

.price-note {
  margin-top: 1em;
  font-size: 0.85rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #888;
}

/* --- 定額コース --- */
.teigaku-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 30px;
}

.teigaku-card {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.teigaku-card--recommended {
  border: 2px solid #FFC422;
  box-shadow: 0 4px 16px rgba(255, 196, 34, 0.2);
}

.recommend-badge {
  background: #FFC422;
  color: #222;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 5px 0;
}

.teigaku-card-header {
  background: transparent;
  padding: 24px 24px 20px;
  text-align: center;
  border-bottom: 1px solid #e9e9e9;
}

.teigaku-card--recommended .teigaku-card-header {
  background: transparent;
}

.course-name {
  display: block;
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 6px;
}

.course-price {
  display: block;
  font-family: "Alata", sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  color: #1E587C;
  line-height: 1.2;
}

.course-price small {
  font-size: 1rem;
  font-weight: 500;
  color: #555;
}

.teigaku-card-body {
  padding: 24px;
  flex: 1;
}

.teigaku-card-body p {
  line-height: 2;
  letter-spacing: 0.08em;
  color: #444;
}

.price-notes {
  list-style: none;
  padding: 0;
  margin: 0;
}

.price-notes li {
  padding: 6px 0 6px 1.2em;
  text-indent: -1.2em;
  font-size: 0.85rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #888;
}

.price-notes li::before {
  content: "※";
  margin-right: 0.2em;
}


/* ========================================
   スマホ対応（更新・管理ページ追記分）
   max-width: 767px
======================================== */
@media (max-width: 767px) {

  .mainte-trouble {
    padding: 50px 0 40px;
  }

  .mainte-trouble h4 {
    width: 90%;
  }

  .trouble-grid {
    width: 90%;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .trouble-item {
    padding: 18px 20px;
    gap: 12px;
  }

  .trouble-icon {
    width: 120px;
  }

  .trouble-item p {
    font-size: 0.9rem;
    line-height: 1.8;
  }

  .trouble-lead {
    width: 90%;
  }
  
  .trouble-lead br {
	display: block;
  }

  .mainte-price {
    width: 90%;
  }

  .mainte-price-spot {
    padding: 28px 24px;
  }

  .spot-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 0;
  }

  .teigaku-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .course-price {
    font-size: 1.8rem;
  }

  .teigaku-card-body p {
    font-size: 0.9rem;
    line-height: 1.8;
  }

}


/*---------------------------------------------------------------------*/
/*                                                                       */
/*              ホームページ制作料金ページ用CSS　追記分                  */
/*                                                                       */
/*---------------------------------------------------------------------*/


/* ========================================
   制作実績ベースの参考価格セクション
======================================== */
.price-cases {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.price-cases-lead {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 40px;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 20px;
}

.case-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.case-card-header {
  background: #f3f6f9;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e9e9e9;
}

.case-industry-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.case-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}

.case-industry {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #222;
}

.case-type {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 999px;
}

.case-type--renewal {
  background: #e8f4f8;
  color: #1E587C;
}

.case-type--new {
  background: #e8f8ee;
  color: #2e7d32;
}

.case-card-body {
  padding: 24px;
  flex: 1;
}

.case-detail {
  margin: 0;
  padding: 0;
}

.case-detail-row {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.case-detail-row:last-child {
  border-bottom: none;
}

.case-detail-row dt {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #888;
  flex-shrink: 0;
  width: 80px;
}

.case-detail-row dd {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #333;
  margin: 0;
}

.case-card-footer {
  background: #f8fafc;
  padding: 20px 24px;
  border-top: 1px solid #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.case-price-label {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #888;
}

.case-price {
  font-family: "Alata", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: #1E587C;
  line-height: 1.2;
}

.case-price small {
  font-size: 0.85rem;
  font-weight: 500;
  color: #555;
}

/* 追加予定カード */
.case-card--coming {
  border: 2px dashed #ddd;
  background: #fafafa;
  box-shadow: none;
  min-height: 200px;
  justify-content: center;
  align-items: center;
}

.case-coming-inner {
  text-align: center;
  padding: 40px 20px;
}

.case-coming-icon {
  display: block;
  font-size: 2.5rem;
  color: #ccc;
  margin-bottom: 12px;
  line-height: 1;
}

.case-coming-inner p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #bbb;
}

.cases-note {
  font-size: 0.85rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #888;
  margin-top: 8px;
}


/* ========================================
   費用の目安セクション
======================================== */
.price-range {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.price-range-lead {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 32px;
}

.range-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.range-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ddd;
  background: #fff;
}

.range-card--middle {
  box-shadow: 0 4px 20px rgba(30, 88, 124, 0.12);
  border-color: #1E587C;
  border-width: 2px;
}

.range-card-header {
  padding: 24px 24px 16px;
  text-align: center;
  background: #fff;
}

.range-card-header--small,
.range-card-header--middle,
.range-card-header--large {
  background: #fff;
}

.tree-icon {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 12px;
}

.range-label {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #1E587C;
  display: block;
}

.range-card-body {
  padding: 24px;
}

.range-price {
  font-family: "Alata", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: #1E587C;
  line-height: 1.4;
  margin-bottom: 16px;
}

.range-card--middle .range-price {
  color: #1E587C;
}

.range-price small {
  font-size: 0.85rem;
  font-weight: 500;
  color: #555;
}

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

.range-list li {
  padding: 6px 0 6px 1.2em;
  text-indent: -1.2em;
  font-family: "Noto Sans", sans-serif;
  font-size: 0.9rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #444;
}

.range-list li::before {
  content: "・";
  color: #1E587C;
}


/* ========================================
   個別項目料金表セクション
======================================== */
.price-detail {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.price-detail-lead {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #222;
  margin-bottom: 40px;
}

.price-table-wrap {
  margin-bottom: 40px;
}

.price-table-wrap h5 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #fff;
  background: #1E587C;
  padding: 8px 20px;
  border-radius: 4px 4px 0 0;
  margin: 0;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  border-top: none;
}

.price-table tr {
  border-bottom: 1px solid #e9e9e9;
}

.price-table tr:last-child {
  border-bottom: none;
}

.price-table tr:nth-child(even) {
  background: #f9f9f9;
}

.price-table td {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #333;
  padding: 14px 20px;
  vertical-align: middle;
}

.price-table td:last-child {
  font-weight: 700;
  color: #1E587C;
  white-space: nowrap;
  text-align: right;
  width: 260px;
}

.price-detail-note {
  font-size: 0.85rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: #888;
  margin-top: 8px;
}


/* ========================================
   スマホ対応（料金ページ追記分）
   max-width: 767px
======================================== */
@media (max-width: 767px) {

  .price-cases {
    width: 90%;
  }

  .cases-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .case-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 20px;
  }

  .case-card-body {
    padding: 16px 20px;
  }

  .case-card-footer {
    padding: 16px 20px;
  }

  .case-price {
    font-size: 1.5rem;
  }

  .price-range {
    width: 90%;
  }

  .tree-icon {
    width: 90px;
  }

  .range-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .range-card--middle {
    transform: none;
  }

  .price-detail {
    width: 90%;
  }

  .price-table td {
    font-size: 0.85rem;
    padding: 12px 14px;
  }

  .price-table td:last-child {
    width: auto;
    white-space: normal;
  }

}


/*---------------------------------------------------------------------*/
/*                                                                       */
/*          チラシ・パンフレット・ロゴ作成ページ用CSS　追記分            */
/*                                                                       */
/*---------------------------------------------------------------------*/


/* ========================================
   対応できるものカードグリッド
======================================== */
.dtp-items {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.dtp-items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.dtp-item-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 28px 24px;
  text-align: center;
}

.dtp-item-icon {
  display: block;
  font-size: 2.2rem;
  margin-bottom: 14px;
  line-height: 1;
}

.dtp-item-card h5 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: #222;
  margin-bottom: 10px;
}

.dtp-item-card p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: #555;
  text-align: left;
}


/* ========================================
   注意事項ボックス
======================================== */
.dtp-note-box {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto 40px;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 32px;
}

.dtp-note-box h5 {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #555;
  margin-bottom: 16px;
}

.dtp-note-box p {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #555;
  margin-bottom: 1em;
}

.dtp-note-box p:last-child {
  margin-bottom: 0;
}


/* ========================================
   スマホ対応（DTPページ追記分）
   max-width: 767px
======================================== */
@media (max-width: 767px) {

  .dtp-items {
    width: 90%;
  }

  .dtp-items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .dtp-item-card {
    padding: 22px 16px;
  }

  .dtp-item-icon {
    font-size: 1.8rem;
  }

  .dtp-note-box {
    width: 90%;
    padding: 24px 20px;
  }

}