@charset "UTF-8";
/*
Theme Name: My Custom Theme
Author: Omori
Description: はじめての自作テーマ
Version: 1.0
*/
/* 1. 一番上で読み込み */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 2. 先頭に 'Anton' を追加 */
  font-family: 'Anton', "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; 
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.05em;
  background: #f7f7f7;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}


.client-title h2,
.section-title h2,
.creative-title h2,
.works h2,
.works-group h3,
.contact-content h2,
.creative-content h2,
.question-title h2,
.topic h3
 {
  font-family: 'Anton', sans-serif;
}

.big-typography h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;

  /* 横方向に少し広げて、縦方向を少しつぶす */
  display: inline-block;
  transform: scaleX(1.15) scaleY(0.9);
  transform-origin: center;
}

header, footer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html, body {
  height: 100%; /* 画面の高さを100%に固定 */
  margin: 0;
  overflow-y: auto; /* コンテンツが多い時だけ出す */
}

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横スクロール防止 */
      overflow-y: auto; 

}

@media (min-width: 768px) {
  body {
    padding-top: 80px;
  }

  html {
    scroll-padding-top: 80px;
  }
}

@media (max-width: 767px) {
  body {
    padding-top: 60px; /* ←ヘッダーの高さに合わせる */
  }

  html {
    scroll-padding-top: 60px;
  }
}


/* ページ全体の最小高さを確保しつつ、はみ出しを防ぐ */
.wrapper { /* 全体を囲っているタグがあれば */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* ---------------- header ---------------- */
.header { 
  background: #fff;
  padding: 20px 40px; 
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }

.hamburger {
  display: none;
}

.nav-menu {
  display: flex;
}
.header-inner {
  display: flex;
  justify-content: flex-end; 
  align-items: center; 
  width: 100%;
} 

/* ロゴの指定を追加 */
.company-logo {
  margin-right: auto; /* ★これが魔法の1行！右側の余白をすべて押し出し、自分を左端に固定します */
}

.company-logo img {
  height: 60px; /* お好みのサイズ */
  width: auto;
  display: block;
}


.nav-list {
  display: flex;
  gap: 70px;
  list-style: none;
  margin: 0;
  align-items: center;
} 
.nav-item {
  position: relative;
}

.nav-item > a {
  display: block;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.nav-item.sns-item {
  display: flex !important;       /* 強制的に中身を横並びにする */
  align-items: center !important; /* アイコンの縦の真ん中を揃える */
  gap: 12px;                      /* アイコンとアイコンの間の隙間 */
}

/* SNSのaタグだけは、横幅を占領しないように調整 */
.nav-item.sns-item > a {
  display: inline-block !important; 
}
 /* ▼ メガメニュー */ 
 .mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #f3f3f3;
  padding: 20px; 
  display: none; 
  width: 200px; 
  z-index: 3;
}

.mega-menu ul {
  list-style: none;
}
.mega-menu li {
  margin-bottom: 10px;
}

.mega-menu a {
  text-decoration: none;
  display: block;
  color: #333; 
}
  /* ホバーで表示 */ 
  .nav-item:hover 
  .mega-menu {
    display: block;

  } 
  .contact-btn {
    background: #a0003a;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px; 
  }

  .line-logo {
    width: 45px;
    align-items: center;    /* 上下中央 */
    margin: 0 5px;
    padding: 0;
  }

    .instagram-logo {
    width: 45px;
    align-items: center;    /* 上下中央 */
    margin: 0 5px;
    padding: 0;
  }
  /* ---------------- ↑header ---------------- */

  
.top-pc {
  display: block;
  width: 100%;
}

.top-sp {
  display: none;
}

.top-page {
  position: relative;
  width: 100%;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
  .top-page video {
  width: 100%;
  height: auto;
}

.top-page .big-typography {
  position: absolute;
  bottom: 0;           /* 画像下端にぴったり */
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  padding: 0;          /* 余白をなくす */
}

/* 中身が空なら高さを出さない */
.top-page:empty {
    display: none;
}

.big-typography h2{
  font-size:10vw;
  font-weight:1200;
  transform-origin: left;
 transform: scaleX(0.64);
  color:#b0003a;
  white-space:nowrap;
  line-height:1;
  letter-spacing:-4px;
  margin:0;
  display: inline-block;/* 下端の位置を正確に制御 */
  vertical-align: bottom; /* 下に揃える */
}


.big-typography h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;

  /* 文字間を詰める */
  letter-spacing: 0;

  /* 横に広げて、縦を少しつぶす */
  display: inline-block;
  transform: scaleX(1.15) scaleY(0.9);
  transform-origin: center;
}

.big-typography {
  position: absolute;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  z-index: 2;
}

/* 横スクロールの本体 */
.scroll-text {
  display: flex;
  width: max-content;
  animation: scroll-loop 20s linear infinite;
}

/* h2を横並びにする */
.scroll-text h2 {
  display: flex;
  margin: 0;
}

/* テキスト */
.scroll-text span {
  font-size: 10vw;
  font-weight: 1500;
  color: #b0003a;
  white-space: nowrap;
  margin-right: 80px;
}

/* アニメーション */
@keyframes scroll-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.type {
  width: max-content;
  margin: 0 auto;
  margin-top: 10px;
  position: relative; /* ★ボタンの配置基準にする */
  display: block;      /* flexから戻す（画像だけを中央にするため） */
}

.type img {
  display: block;      /* 下の余白消し */
  margin: 0 auto;      /* 画像を確実に中央へ */
}
.type02 {
  display: none;
}
.circle-btn {
  /* ===================================================
     1. あなたが作ってくれた「完璧な見た目とサイズ」
  =================================================== */
  width: 100px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: #8b1a3a;
  
  /* 内側の線・文字設定 */
  outline: 1px solid #ffffff;
  outline-offset: -4px;
  display: grid;
  place-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;

  /* ===================================================
     2. スティッキーと初期位置の掛け合わせ（新設定）
  =================================================== */
  /* 最初は「元々の完璧な配置」でスタート */
  position: absolute;
  top: 20%;            
  right: -240px;        
  transform: translateY(-50%); 

  /* スクロールを感知して、自動でスティッキー（追従）モードに切り替える設定 */
  animation: sticky-switch linear both;
  animation-timeline: scroll(root);
  animation-range: 0px 400px; /* ★何pxスクロールしたときに右下に固定させるか */
}

.circle-btn a {
    color: #ffffff !important;   /* 文字を白にする */
    text-decoration: none !important; /* 青い下線を消す */
    display: flex;               /* 改行（<br>）があっても綺麗に上下中央揃えにする */
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
}

/* クリックした後に紫になるのを防ぐ */
.circle-btn a:visited {
    color: #ffffff !important;
}

.chat-btn a {
    color: #ffffff !important;   /* 文字を白にする */
    text-decoration: none !important; /* 青い下線を消す */
    display: flex;               /* 改行（<br>）があっても綺麗に上下中央揃えにする */
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
}

.circle-btn {
  width: 100px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: #8b1a3a;
  outline: 1px solid #ffffff;
  outline-offset: -4px;
  display: grid;
  place-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;

  /* 表示の仕組み（固定＋スクロール判定） */
  position: fixed;
  top: auto;
  right: 20px;
  bottom: 20px;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}

.circle-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}


/* クリックした後に紫になるのを防ぐ */
.chat-btn a:visited {
    color: #ffffff !important;
}

/* トップのアイコン 終 */


/*　first messge */

.first-message {
  margin-top: 70px;
  position: relative;     /* 基準点にする */
  width: 100%;            /* 横幅いっぱい */
  min-height: 200px;      /* 画像とテキストが入る高さを確保 */
  display: flex;
  align-items: center;    /* 上下中央 */
  justify-content: center; /* テキストを完全中央へ */
}

   .first-message.pc-text{
    font-size: 15px;
    margin: 0 auto;
    text-align: center;
  }

.description.pc-text {
  text-align: left;
}

.sp-img {
  display: none;
}

.sp-btn {
  display: none;
}

.pc-text {
  z-index: 2;             /* テキストを前面に */
  text-align: center;
  margin: 0;
}

.sp-image,
.sp-image02 {
  display: none;
}

.pc-text,
.pc-content {
  display: block;
}

.sp-text,
.sp-content {
  display: none;
}

*,
*::before,
*::after{
  box-sizing: border-box;
}
/*　first messge 終 */


.creative-title.pc-text {
  text-align: left;
}

/* イラスト　*/
.side-unit {
  position: absolute;     /* 絶対配置に切り替え */
  display: flex;
  flex-direction: column; 
  gap: 15px;
  top: 45%;
  transform: translateY(-50%); /* 垂直中央に補正 */
}

/* 左側のユニット：位置を細かく調整 */
.side-unit.left {
  left: 6%;
  top: 30%;
                 /* 画面左端からの距離（%やpxで自由に調整） */
}

/* 右側のユニット：位置を細かく調整 */
.side-unit.right {
  right: 6%;
  top: 40%;              /* 画面右端からの距離 */
}

.side-unit img {
  width: 180px;            /* 画像サイズ */
  height: auto;
}

.side-unit img.yajirusi_01 {
  width: 120px;
}

.side-unit img.yajirusi_02 {
  width: 120px;
}
/* イラスト　終*/

/* サービス 共通箇所 */
.service,
.creative {
  padding: 30px 10%;
}

.sns-loop {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden; 
  margin-top: 40px;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.sns-track {
  display: flex;
  width: max-content; /* ←重要 */
  animation: sns-scroll 30s linear infinite;
}
.video-track {
  display: flex;
  width: max-content; /* ←重要 */
  animation: sns-scroll 40s linear infinite;
}

.design-track {
  display: flex;
  width: max-content; /* ←重要 */
  animation: sns-scroll 25s linear infinite;
}

.homepage-track {
   display: flex;
  width: max-content; /* ←重要 */
  animation: sns-scroll 20s linear infinite;
}

.sns-track span,
.video-track span,
.design-track span,
.homepage-track span {
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  font-weight: 200;
  margin-right: 60px;
  white-space: nowrap;
  flex-shrink: 0;
}


@keyframes sns-scroll {
  0% {
    transform: translateX(0);
  } 
  100% {
    transform: translateX(-50%);
  }
}

/* サービス１*/
.second {
  display: flex;
  gap: 10px;
  align-items: flex-start; /* 縦に伸びるのを防ぐため追加を推奨 */
}

.main_second {
  width: 50%;      /* 親の .second に対して 40% の幅 */
  height: auto;    /* 比率を維持 */
  flex-shrink: 0;  /* 圧縮を防止 */
  display: block;
  margin-top: 20px;
}

.second-message {
  max-width: 500px;
  margin-bottom: 80px;
  text-align: center;
  margin-left: auto;
  margin-right: 30px;

}

.second-message p {
  line-height: 2.8;
  margin-bottom: 20px;
}

.second-message img {
  width: 500px;
  height: auto;
}

.first-content p {
  text-align: center;
  margin-top: 30px;
  font-weight: bolder;
  font-size: 1.2rem;
}

/* サービス１　終*/

.first_img {
  display: block;
  width: 40%;
  margin: 0 auto;
  margin-top: 50px;
}


/* クライアント部分 */
.client {
  width: 100%;
  overflow: hidden; /* はみ出たロゴを隠す */
  padding: 50px 0;
}

.client-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-bottom:30px;
}

.client-title h2{
  font-size:30px;
  letter-spacing:2px;
}

.line{
  flex:1.5;
  height: 2px;
  background:#000;
  max-width:510px;
}
.client-logos {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  overflow: hidden; /* 画面外にはみ出た画像によるスクロールバーを防ぐ */
}

.logo-row {
  display: flex; /* 2枚の画像を真横に並べる */
  width: max-content; /* 画像の本来の横幅に合わせる */
}

/* 細長い画像自体の設定 */
.long-banner {
  height: 50px;     /* 高さを指定（お好みのサイズに） */
  width: auto;      /* 高さに合わせて横幅を自動伸縮 */
  flex-shrink: 0;   /* 画像が縮まないように固定 */
}

/* 上段のアニメーション（左に流れる） */
.row1 {
  animation: logo-scroll 35s linear infinite;
}

/* 下段のアニメーション（右に流れる） */
.row2 {
  /* ここを逆向き用のアニメーション名に変更 */
  animation: logo-scroll-reverse 45s linear infinite; 
}

/* 【左に流れるアニメーション（上段用）】 */
@keyframes logo-scroll {
  0% {
    transform: translateX(0);
  } 
  100% {
    transform: translateX(-50%); /* 左へ進む */
  }
}

/* 【右に流れるアニメーション（下段用）】 */
@keyframes logo-scroll-reverse {
  0% {
    transform: translateX(-50%); /* 最初から左にずらしておく */
  } 
  100% {
    transform: translateX(0);    /* 右へ進む */
  }
}

/* クライアント部分 終*/

.section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-bottom:30px;
}

.works h2,
.question-title h2,
.creative-content h2
{
  font-size:20px;
  letter-spacing:2px;
}

.client-title h2,
.section-title h2,
.creative-title h2 {
  font-size: 30px;
}


/*　見積ボタン　*/
.contact-btn02 {
  display: inline-block;
  background: #a0003a;
  color: #fff;
  padding: 10px 40px;
  border-radius: 5px;
  text-decoration: none;
}


/*　サービス共通　*/
.service-item {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  align-items: center;
  gap: 60px;
}

.service-item.steal {
    display: block;
  margin-top: 60px;
  align-items: center;
  gap: 60px;

}

.service-item.steal .steal-visual img {
  display: block;
  max-width: none;
  width: 100%;
  height: auto;
  margin-top: 50px;
}
/* 親要素：ここは元のマージン設定などを活かします */
.service-item.steal {
  display: block;
  margin-top: 60px;
  /* overflow: hidden; はここでもOKですが、今回は画像コンテナ側で制御します */
}


/* ★画像コンテナ：ここだけを画面いっぱいに広げてはみ出させる */
.service-item.steal .steal-visual {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden; /* 画像のはみ出しをここでカット */
  position: relative;
}

/* 画像本体：サイズやループの設定はそのまま */
.service-item.steal .steal-visual img {
  display: block;
  max-width: none;
  width: 200%; /* 画像を大きく */
  height: auto;
  animation: loop-move 40s linear infinite; /* ゆっくりループ */
}

/* アニメーション定義 */
@keyframes loop-move {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.service-content {
  width: 55%;
}

/* サービスタイトル */

.service-title {
  position: relative;
  display: inline-block;
  line-height: 1;
  margin: 0;
    font-size: 37px;
  font-weight: 600; 
  font-style: italic;
}

.service-title::after {
  content: "";
  position: absolute;
  left: 0;                    /* ← 文字の左からスタート */
  bottom: -8px;               /* ← 文字のすぐ下 */
  width: calc(100% + 550px);   /* ← 右にだけ伸ばす */
  height: 2px;
  background: #a0003a;
}
.color-red::after   { background: #a0003a; }
.color-blue::after   { background: #12197c; }
.color-green::after { background: #00795C; }
.color-yellow::after { background: #D6E402; }
.color-pink::after { background: #dd1874; }


/* --- 1文字目（S）だけの特別な指定 --- */
.service-title::first-letter {
  font-size: 1.3em;
  /* ★1文字目だけは「極太」にしてインパクトを出す */
  font-weight: 750;
  /* 斜体で少し右に倒れるので、右側に少し隙間をあける */
}


/* --- 2. スマホ（画面幅 767px 以下）の設定 --- */
@media (max-width: 767px) {
  /* PC用を消す */
  .service-title.pc-text {
    display: none !important;
  }
  /* スマホ用を表示（サイズも少し調整） */
  .service-title.sp-text {
    display: inline-block !important;
    font-size: 32px;
  }
}

/* --- 3. PC（画面幅 768px 以上）の設定 --- */
@media (min-width: 768px) {
  /* スマホ用を消す（★ここが「消えてる」原因の解消！） */
  .service-title.sp-text {
    display: none !important;
  }
  /* PC用を表示 */
  .service-title.pc-text {
    display: inline-block !important;
    font-size: 44px;
  }
}

.color-red   { color: #a0003a; }
.color-blue   { color: #12197c; }
.color-green { color: #00795C; }
.color-yellow { color: #D6E402; }
.color-pink { color: #dd1874;}

/* サービス P　*/　
.description {
  line-height: 1.8;
  margin-bottom: 40px;
  margin-top: 20px;
}

/* 実績ボタンなど　*/

.achievement-link {
  display: flex;
  font-size: 16px;
  flex-direction: column;
  gap: 20px;
  width: 220px;
  margin-top: 30px;
}

.achievement-link a {
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.heading-btn {
  display: inline-block;
  background: #a0003a;
  color: #fff;
  padding: 8px 20px;
  border-radius: 8px;
  text-decoration: none;
}
.price-btn-red {
  display: inline-block;
  background: #fff;
  font-size: 20px;
  color: #a0003a;
  padding: 5px 20px;
  border-radius: 25px;
  border-color: #a0003a;
  border: 1px solid;
  text-decoration: none;
  text-align: center;
}

.heading-btn02 {
  display: inline-block;
  background: #a0003a;
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
}

.price-btn-blue {
  display: inline-block;
  background: #fff;
  font-size: 20px;
  color: #12197c;
  padding: 5px 20px;
  border-radius: 25px;
  border-color: #12197c;
  border: 1px solid;
  text-decoration: none;
    text-align: center;
}

.second-btn {
  display: inline-block;
  background: #12197c;
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
}

.price-btn-green {
  display: inline-block;
  background: #fff;
  font-size: 20px;
  color: #00795C;
  padding: 5px 20px;
  border-radius: 25px;
  border-color: #00795C;
  border: 1px solid;
  text-decoration: none;
  text-align: center;
}

.third-btn {
  display: inline-block;
  background: #00795C;
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
}


.price-btn-yellow {
  display: inline-block;
  background: #fff;
  font-size: 20px;
  color: #D6E402;
  padding: 5px 20px;
  border-radius: 25px;
  border-color: #D6E402;
  border: 1px solid;
  text-decoration: none;
  text-align: center;
}

.fourth-btn {
  display: inline-block;
  background: #D6E402;
  color: #fff;
  padding: 8px 2px;
  border-radius: 8px;
  text-decoration: none;
}
/* ボタン部分　*/


/* WORKSの矢印ボタン*/
/* 外側の黒い円 */
.arrow-btn {
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50%;
  position: relative;
  margin-left: auto;
  margin-top: 20px;
  cursor: pointer;
  /* overflow: hiddenは書かない（VIEWを見せるため） */
}
/* 矢印を閉じ込める透明な「窓」 */
.arrow-btn span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden; /* ★ここで矢印のハミ出しをカットする */
}

/* 中の白い矢印（＞） */
.arrow-btn span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;

  /* ここだけ変更 */
  transform: translate(-50%, -50%);

  transition: transform 0.3s ease-in;
}
/* 【重要】ホバーした時の動き */
.arrow-btn:hover span::after {
  /* 右上へ突き抜ける */
  transform: translate(250%, -250%) rotate(45deg);
}

/* 矢印の棒の部分（＞） */

.arrow-btn span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 4px;
  background: #fff;

  /* 右上方向へ45度回転 */
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
}

.arrow-btn:hover span::before {
  /* 右上へ突き抜ける */
  transform: translate(250%, -250%) rotate(45deg);
}




/* ---------------- visual side（写真＋シェイプ） ---------------- */
.service-visual{
  position: relative;
  width: 500px;
}

.video_schedule {
  width: 100%;
  display: block;
  margin: 100px auto;
}

.hp_schedule {
  width: 100%;
  display: block;
  margin: 100px auto;
}

.sp-image {
    display: none;
}

.sns-img {
  width: 100%;
  position: relative;
  z-index: 2;
}

.video-img {
  width: 100%;
  position: relative;
  z-index: 2;
}

.homepage {
  width: 100%;
  position: relative;
  z-index: 2;
}

.design {
  width: 100%;
  position: relative;
  z-index: 2;
}
/* ---------------- visual side（写真＋シェイプ）終 ---------------- */


/* --- お客様の声 --- */
.voice {
  padding: 60px 0;
  padding-bottom: 0;
  background-color: #f9f9f9; /* 背景を少し明るく */
}

.voice-title {
  font-size: 28px;
  margin-bottom: 40px;
  text-align: center;

}

/* スライダーの親要素 */
.voice-wrapper {
  max-width: 1100px;
  margin: 0 auto 50px auto; /* 下段との間隔 */
  position: relative;
  padding: 0 50px; /* ボタン用の余白 */
  overflow: hidden !important; /* スライドは見えないように隠す */
}

/* グリッド */
.voice-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* カード */
.swiper-wrapper {
  align-items: flex-start;
}
.swiper-slide {
  height: auto !important;
}

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


/* カードの幅を固定 */
.swiper-slide {
  flex-shrink: 0 !important;
  width: 340px !important;
}

/* 中身：JSが動かしやすいように「リニア（等速）」だけ指定 */
.swiper-wrapper {
  display: flex !important;
  z-index: 1 !important;
  transition-timing-function: linear !important; /* スルスル流すため */
}
/* --- スライダー全体のコンテナ --- */


/* Swiper本体：これが崩れると縦並びになるので重要 */
.js-slider-top, 
.js-slider-bottom {
  overflow: hidden;
  width: 100%;
}

/* スライドの並びを安定させる */
.swiper-wrapper {
  display: flex !important; /* Gridを使わずFlexに固定 */
  align-items: stretch; /* カードの高さを揃える */
}

/* 自動で流すための設定（JSの設定と合わせる） */
.js-slider-top .swiper-wrapper,
.js-slider-bottom .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* ボタン（矢印）がカードに被らないように */
.arrow {
  z-index: 100;
}

.voice-icon img{
  width: 60px;
  height: auto;
  margin-bottom: 10px;
}


/* お客さまの声 終　*/

/*　お客様　仮*/
.voice-title { font-size: 28px; margin-bottom: 40px; text-align: center; font-weight: bold; }

.voice-wrapper {
  max-width: 1100px;
  margin: 0 auto 50px auto;
  position: relative;
  padding: 0 60px !important;
  overflow: visible !important; /* 矢印が見えるように */
}

/* カードの高さ固定 */
.voice-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  text-align: center;
  height: 350px !important; /* ここで高さを固定 */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden; /* はみ出たテキストを隠す */
    padding: 20px 15px;
    margin-bottom: 30px;
}

.voice-card .icon { color: #a1002b; font-weight: bold; font-size: 18px; margin-bottom: 15px; }
.voice-card h3 { 
  font-size: 11px;
  margin-bottom: 5px;
 }
.voice-card .text {
  font-size: 13px;
  color: black;
  line-height: 1.8;
  flex-grow: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
    flex-grow: 1; /* 余白を埋める */
  overflow-y: auto; /* 長すぎる場合はスクロール（または hidden で切り捨て） */

}

/*　---3項目のところ--- */
/* 親要素：ボタンを横並びにして中央に寄せる */
.button-container {
  display: flex;
  justify-content: center; /* 中央揃え */
  gap: 60px;               /* ボタン同士の間隔 */
  padding: 50px 0;
  width: 100%;
  margin: 0 auto;
}

/* ボタン本体のデザイン */
.custom-button {
  /* レイアウト */
  margin-top: 30px;
  display: inline-block;
  padding: 25px 30px;
  min-width: 200px;
  width: 320px;        /* ボタンの最小幅 */
  text-align: center;
  text-decoration: none;   /* リンクの下線を消す */
  background-color: #ffffff; /* 白背景 */
  color: black;            /* 文字色（濃いグレー） */
  font-weight: bold;
  font-family: sans-serif;
  font-size: 20px;
  /* 角丸と影（ここが重要！） */
  border-radius: 15px;       /* 角の丸み */
  }


/* ---CREATIVEセクション---*/
.creative {
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

.creative-content {
  flex: 0 0 50%;
}

.creative-title{
  display:flex;
  align-items:center;
  justify-content:center;
    color: black;
  gap:20px;
}

.creative-title h2{
  font-size:30px;
  letter-spacing:2px;
}

.creative p {
  text-align: center;
  line-height: 2;
  margin: 60px 0;
}

.studio{
  width: 100%;
  position: relative;
  z-index: 2;
}
.creative-visual {
  width: 100%;
  position: relative;
  padding: 0;
}

/* 画像を親要素（padding 10%）を無視して広げる */
.creative-visual img {
  width: 100vw; /* 画面幅いっぱい */
  margin-left: calc(50% - 50vw); /* 左端まで引き戻す */
  height: auto;
  display: block;
  max-width: none; /* 他のスタイルからの干渉を防ぐ */
}

/* 念のため、親のsectionにこれを入れると横揺れが防げます */
.creative {
  overflow-x: hidden;
}

.pc-image {
    display: block !important;
  }
  .sp-image {
    display: none !important;
  }

/* ---CREATIVEセクション 終---*/


/* ---WORKSセクション---*/
.works {
  width: 90%;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
  position: relative;
  /* ★最重要：この中だけで重なり順を完結させ、フェードによる浮き上がりを封じ込めます */
  isolation: isolate; 
  z-index: 0;
}

.work-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-bottom:30px;
}

.work-title h2{
  font-size:30px;
  letter-spacing:2px;
}

.works-group {
  margin-bottom: 80px;
  overflow: hidden; /* ★重要：ここで左右のはみ出しをカットします */

}
.works-group h3 {
  margin-bottom: 24px;
  font-size: 23px;
  text-align: center;
}

.works-row {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  width: max-content; /* 中身の合計幅に合わせる */
  animation: loop-scroll 50s linear infinite; /* 速度はお好みで調整 */
}

 .works-row.site{
    animation: loop-scroll 50s linear infinite;
  }

/* ホバー時に全体の流れを止める（じっくり見れるように） */
.works-row:hover {
  animation-play-state: paused;
}



/* カードコンテンツ*/
.card-list {
  /* width: 100%; だと親の幅に引っ張られるので、固定幅を指定します */
  width: 350px; 
  flex-shrink: 0; /* ★重要：これがないと画像が潰れてしまいます */
  aspect-ratio: 16 / 9;
  background: #ddd;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 動き用 */
  cursor: pointer;
}

.card-list img {
  width: 100%;
  display: block;
}

/* --- 追加：card-listへの動き（ホバー演出） --- */
.card-list:hover {
  transform: translateY(-8px); /* 少し上に浮く */
}

/* --- 追加：アニメーションの定義 --- */
@keyframes loop-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 「-(1セット分の幅 + gap)」を指定するのが理想ですが、
       HTMLで2セット並べるなら -50% で綺麗に繋がります */
    transform: translateX(-50%);
  }
}

/* OVER VIWEの帯 */
/* セクション全体の基本設定 */
.company {
  font-size: 65px;
  line-height: 1.2;
  color: white;
  position: relative;
  margin: 0;
  overflow: hidden;
}

/* 背後のイラスト */
.company img {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 30%;
  max-width: 400px;
  z-index: 2;
}

.company-link {
  text-decoration: none;
  color: #fff;
}

/* タイトルの背景とレイアウト（右寄せ） */
.company-title {
  font-family: 'Anton', "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; 
  font-weight: 450;
  line-height: 2;
  letter-spacing: 0.09em;
  margin: 70px 0;
  height: 350px;
  background: #8c1b36;
  color: white;
  padding-right: 8vw;
  display: flex;
  justify-content: flex-end;
  align-items: center; /* 枠の高さに対して中央 */
}

/* アニメーションの「窓」：左側だけを隠す設定に戻します */
.moving-content-wrapper {
  overflow: hidden;
  display: block; 
  
  /* --- 位置調整のポイント --- */
  margin-left: auto;   /* 確実に右側に押し出す */
  margin-right: -5vw;  /* ★さらに右に寄せたい場合、マイナスの数値を大きくする */
  
  text-align: right;
  width: fit-content;  /* 中身の幅に合わせる（重要） */
}
/* 動くユニット */
.moving-content {
  display: flex;
  align-items: center;
  /* 最初は左の矢印を隠すために左へずらす */
  transform: translateX(-1.2em); 
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
  
}

/* ホバー時の動き */
.company-link:hover .moving-content {
  /* 全体を右へスライドさせて左の矢印を出す */
  transform: translateX(0);
}

/* 右側の矢印（check）の制御 */
.check {
  display: inline-block;
  margin-left: 0.2em;
  transition: opacity 0.3s ease, transform 0.4s ease;
  opacity: 1; /* 最初は見えている */
}

/* ★ホバーした時、右の矢印だけを透明にしてさらに右へ飛ばす */
.company-link:hover .check {
  opacity: 0;           /* 透明にする */
  transform: translateX(1em); /* 右へスッと消える動きを追加 */
}

/* 左側の矢印（arrow-left）の制御 */
.arrow-left {
  display: inline-block;
  margin-right: 0.2em;
  /* 最初は透明にしておくと、より「後から出てきた感」が出ます（お好みで） */
  transition: opacity 0.3s ease;
}

.text-group {
  display: inline-block;
  text-align: left;
  letter-spacing: 1.3;
  line-height: 1.1;
}
/* OVER VIWEの帯  終*/

/* Q&A */
.question {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 50px;
}
.question-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-bottom:30px;
}

.question-title h2{
  font-size:30px;
  letter-spacing:2px;
}

/* 質問全体のレイアウト調整 */
summary {
  display: flex; /* アイコンと文字を横並びにする */
  align-items: center; /* 垂直方向の中央揃え */
  padding: 15px;
  color: #7e002e;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid #ccc;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

/* 矢印（三角）を自作して配置 */
summary::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-right: 2px solid #a0003a; /* 画像のような緑色 */
  border-bottom: 2px solid #a0003a;
  transform: translateY(-70%) rotate(45deg); /* 下向き矢印 */
  transition: transform 0.3s;
}

/* 開いた時に矢印を上に向ける */
details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

/* Qアイコンのスタイル */
.q-icon {
  font-family: 'Anton', sans-serif;
  font-weight: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 24px;         /* 四角の幅 */
  height: 24px;        /* 四角の高さ */
  margin-right: 12px;  /* 文字との間の余白 */
  
  background-color: #a0003a; /* 緑色の背景（お好みの色に！） */
  color: #ffffff;            /* 文字の色（白） */
  font-size: 16px;           /* Qの文字サイズ */
  border-radius: 4px;        /* ほんの少し角を丸く */
  flex-shrink: 0;            /* 画面が狭くなっても四角が潰れないように固定 */
}

/* デフォルトの三角を消す（ブラウザ対応） */
summary::-webkit-details-marker {
  display: none;
}

/* 回答エリア全体のレイアウト */
.answer {
  display: flex;    /* アイコンとテキストを横並びに */
  align-items: flex-start; /* アイコンを上揃えに（長文対策） */
  padding: 15px;
  color: #a0003a;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ccc;
}

/* 回答のテキスト部分 */
.answer p {
  margin: 0;
  line-height: 1.6;
}

/* Aアイコンのスタイル */
.a-icon {
  font-family: 'Anton', sans-serif;
  font-weight: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 24px;
  height: 24px;
  margin-right: 12px;
  
  background-color: #ffffff;
  color: #a0003a;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  flex-shrink: 0; /* アイコンが潰れないように固定 */
  margin-top: 2px; /* テキストの一行目と高さを合わせる微調整 */
}

/* TOPIC */
.topic {
  position: relative;
  z-index:1 !important;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px;
  border-radius: 15px;
  background: #ffffff;
  transform-style: preserve-3d; 

}



.topic::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2; /* ← うっすら見せる */
  z-index: -1; /* 一番後ろ */
}

.topic h2 {
    margin-bottom: 40px;
}

/* TOPIC→BLOGセクション */
/* BLOGセクション全体 */
.blog-group {
  margin-bottom: 80px;
}

.blog-group h3 {
  margin-bottom: 24px;
  font-size: 40px;
  color: #a0003a; /* ここもお好みで黒（またはエンジ #a0003a）に */
  text-align: center;
}

/* カードを並べる親要素 */
.blog-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap; /* 折り返しを許可 */
}

/* カード単体の設定（PCで3つ並ぶ幅） */
.blog-card {
  width: calc(33.333% - 14px); /* 3等分 */
  background: transparent;
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* 画像エリアの設定 */
.blog-image {
  width: 100%;
  height: auto;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease; /* 浮き上がりアニメーション */
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease; /* ズームアニメーション */
  display: block;
}

/* ホバー時の演出 */
.blog-image:hover {
  transform: translateY(-10px) scale(1.03); /* 浮き上がり */
  box-shadow: 0 12px 30px rgba(0,0,0,0.15); /* 影 */
}

.blog-image:hover img {
  transform: scale(1.15); /* 画像ズーム */
}

/* テキストエリアの設定 */
.blog-text {
  margin-top: 15px;
  font-size: 16px;
  color: black; /* 基本の文字色を黒に */
    width: 100%; /* テキストも横幅いっぱいに */
  text-align: left; /* 左揃え */

}

/* 全てのリンクを黒に統一（紫にならない設定） */
.blog-card a,
.blog-card a:visited {
  text-decoration: none;
  color: black; /* 常に黒 */
}

/* タイトルとカテゴリーの個別設定 */
.blog-title {
  font-weight: bold;
  margin: 8px 0;
}

.blog-category {
  font-weight: bold;
}

/* メインページのブログカードを縦並びにする */
.blog-card {
  display: flex;
  flex-direction: column; /* これで縦並びになります */
  align-items: flex-start; /* 左寄せ */
  gap: 15px; /* 画像とテキストの間隔 */
  margin-bottom: 30px; /* カード同士の上下の間隔 */
}

/* 画像部分の調整 */
.blog-image {
  width: 100%; /* 横幅いっぱいに広げる */
  max-width: 320px; /* 必要なら最大幅を制限（お好みで調整してください） */
}

.blog-image img {
  width: 100%; /* コンテナいっぱいに広げる */
  height: auto; /* 比率を保つ */
  object-fit: cover; /* 画像が歪まないように調整 */
}

/* 日付とタイトルの間隔など */
.blog-date {
  font-size: 0.9em;
  color: black;
  margin-bottom: 5px;
}

.blog-title {
  margin-bottom: 10px;
}

/* ハッシュタグの調整 */
.blog-category .post-tag {
  display: inline-block;
  margin-top: 5px;
}

/* ボタンを包むコンテナを右寄せにする */
.view-more-container {
    display: flex;
    justify-content: flex-end; /* 右端に寄せる */
    margin-top: 30px;  
}
.view-more-btn {
    text-decoration: none !important; /* 下線を消す */
        color: #000;        /* 記事一覧との間隔 */

}

/* スマホ対応（画面が小さい時は1枚ずつ縦に並べる） */
@media (max-width: 767px) {
  .blog-card {
    width: 100%; /* 横幅いっぱい */
  }
}
/* TOPIC→BLOGセクション　終 */


/* TOPIC→NEWSセクション　*/
.news-group h3 {
  margin-bottom: 8px;
  font-size: 40px;
  color: #a0003a;
  text-align: center;
}
.news-list li {
  border-bottom: 1px solid #a0003a;  /* ← 1pxで統一 */
  list-style: none;
  margin-bottom: 15px;
}

.news-list a {
  text-decoration: none;
  color: #000;
}

.news-list time {
  margin-right: 40px;
}
/* TOPIC→NEWSセクション　終 */


/* ---下部のコンタクトフォーム--- */
.contact {
  margin: 50px auto;
  margin-bottom: 60px;
}

.contact h2 {
  font-size: 55px;
  text-align: center;
  color:#a0003a;
margin-bottom: 20px;
}

 .contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 550px;      /* ← PC基準幅 */
  margin: 0 auto;
}

.form-btn,
.primary-btn {
  font-size: 22px;
  background: #9e003a;
  color: #fff;
  display: block;        /* ← ここ重要 */
  padding: 10px 0;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
/* ---下部のコンタクトフォーム　終--- */

.contact-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #fff;
  color: #a5002d;
  text-decoration: none;
  border-radius: 8px;
}


/* --- スマホ用の表示設定 (画面幅が768px以下のとき) --- */
@media screen and (min-width: 0px) and (max-width: 768px) {
.top-sp {
    display: block !important; /* 強制的にスマホ用を出す */
    width: 100%;
  }

  .top-pc {
    display: none !important;
  }
}

@media (max-width: 500px) {

  .company img {
    left: 50%;
    transform: translate(-50%, -20%);
  }
}

/* ---------------- フッター ---------------- */
.footer {
  background: #8c0028;
  color: #fff;
  padding: 80px 30px;
  margin: 0;
  height: auto;
}

.footer-logo {
  margin-right: auto;          /* ロゴとメニューの間に自動で余白を作り、メニューを右側に逃がす */
  /* もしメニューも左に詰めたい場合は margin-right を 40px など固定値にする */
}

.logo-img {
  width: 130px;                /* ロゴのサイズ調整 */
  height: auto;
  display: block;
}
.footer-col {
  flex:0 0 auto;  
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}

.footer-col h4 {
  font-size: 18px;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col li {
  margin-bottom: 10px;
  font-size: 14px;
}

.footer-col a {
  color: #fff;
  text-decoration: none;
}

.footer-address p {
  font-size: 12px;
  margin-top: 20px;
  line-height: 1.2;
}

/* CONTACTボタン */

.footer-contact {
  background: #fff;
  color: #8c0028;
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: bold;
}

/* ---------------- フッター 終---------------- */


/* レスポンシブ */
@media screen and (max-width: 768px) {

/* ===== 共通 ===== */

body {
  font-size: 14px;
}
.top-page {
  width: 100%;   /* 縦長の枠 */
  height: auto;
  overflow: hidden;
}
.chat-btn {
    position: fixed;
    bottom: 10px; /* 表示前は少し下に下げておく */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    z-index: 99999;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 90%;
    max-width: 400px;
    height: 50px;
    background: #a0003a;
    color: #fff;
    font-weight: bold;
    border-radius: 8px;

    /* 💡 最初は絶対に非表示 */
    opacity: 0;
    visibility: hidden;

    /* 動く時のスムーズなアニメーション */
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

/* 💡 スクロールが始まったらこのクラスが強制付与される */
.chat-btn.show {
    bottom: 20px;
    transform: translateX(-50%) translateY(0); /* 定位置に上げる */
    opacity: 1 !important;
    visibility: visible !important;
}
/* ▼ ハンバーガーメニュー開いたら消す */
.hamburger.is-open ~ .chat-btn,
.hamburger.active ~ .chat-btn,
.hamburger.open ~ .chat-btn,
:has(.hamburger.is-open) .chat-btn,
:has(.hamburger.active) .chat-btn,
:has(.hamburger.open) .chat-btn,
body[class*="open"] .chat-btn,
body[class*="active"] .chat-btn,
body[class*="menu"] .chat-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ===== header ===== */
.nav{
  position:absolute;
  top:80px;
  left:0;
  width:50%;
  background:#fff;
  transform:translateY(-120%);
  transition:0.3s;

  z-index:10;
}

.nav.active{
  transform:translateY(0);
}


  /* SPではメガメニューは非表示 */
  .mega-menu {
    display: none !important;
  }

  .mega-menu li {
  margin: 0px;
  margin-left: 20px;
  font-weight: 600;
}

.mega-menu ul {
    font-weight: 600;

}


/* ===== ↑header ===== */

.sp-image,
.sp-image02 {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  width: 100%;

}
.big-typography h2{
  font-size:10vw;
  font-weight:1200;
  transform-origin: left;
 transform: scaleX(0.64);
  color:#b0003a;
  white-space:nowrap;
  line-height:1;
  letter-spacing:-2px;
  margin:0;
  display: inline-block;/* 下端の位置を正確に制御 */
  vertical-align: bottom; /* 下に揃える */
}


.big-typography h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;

  /* 文字間を詰める */
  letter-spacing: 0;

  /* 横に広げて、縦を少しつぶす */
  display: inline-block;
  transform: scaleX(1.15) scaleY(0.9);
  transform-origin: center;
}

  .first-message {
    display: block;
  }

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

.second {
  display: block;
}

.side-unit {
  display: none;
}

.second-message img {
  display: none;
}

.first-content {
  width: 100%;
  margin: 20px auto;
}

.first-content img {
  width: 60%;
  margin: 20px auto;
}

.first-content p {
  font-weight: bolder;
  font-size: 12px;
}

.line{
 max-width:500px;
}
.type {
  width: 80%;   /* 画像幅に合わせる */
  margin: 30px auto;
}

.type02 {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
}

.circle-btn {
display: none;
}

.sp-img {
  display: block;
  width: 85%;
  margin: 0 auto;
  margin-top: 20px;
}

.client{
  padding: 20px 20px;
}

.main_second {
  width: 85%;
  margin: 0 auto;
}

.service,
.creative {
  padding: 0 5%;
}
.video_schedule,
.hp_schedule {
  margin: 10px auto;
}


.image-scroll img{
   display: block;
  max-width: none;           /* 画像を縮小させない */
  width: 600px;             /* 画像を大きめに表示 */
  height: auto;
}

.image-scroll {
  overflow-x: auto;          /* 横スクロールを有効にする */
  -webkit-overflow-scrolling: touch; /* スマホで滑らかにスクロール */
}

.pc-text,
.pc-content {
  display: none;
}

.sns-loop {
    margin-top: 40px;

}

.scroll-text span {
  font-size: 17vw;
  font-weight: 1500;
  color: #b0003a;
  white-space: nowrap;
  margin-right: 80px;
}

.sns-track span,
.video-track span,
.homepage-track span,
.design-track span {
  font-size: 14px;
  font-weight: bold;
  margin-right: 30px;
}

.sns-img.sp-image,
.video-img.sp-image,
.homepage.sp-image,
.design.sp-image {
  margin-bottom: 30px;
}

.second-message {
  position: relative;
  z-index: 2;
  text-align: left;
}

.logo {
  width: 120px;
}

.client-logos {
  gap: 15px;
}

.row2 {
  margin: 0;
  justify-content: center;
}
.long-banner {
  height: 30px;     /* 高さを指定（お好みのサイズに） */
  width: auto;      /* 高さに合わせて横幅を自動伸縮 */
  flex-shrink: 0;   /* 画像が縮まないように固定 */
}

.service-item {
  margin-top: 20px;
}

.box {
  /* width: 300px; の代わりに必ずこれを使う */
  width: 200px;           /* もしくは flex: 0 0 300px; でもOK */         /* 縦幅 */
}
 
.service-visual img {
  z-index: 2;
}


.contact-btn02 {
  padding: 5px;
  display: block;
  width: 150px;
  margin: 20px auto;
  text-align: center;
  text-decoration: none;
}

.achievement-link {
  margin: 0 auto;
}
.price-btn-red,
.price-btn-blue,
.price-btn-green,
.price-btn-yellow{
  margin: 0 auto;
}


.voice {
  padding: 20px 0;
}

.voice-item {
  width: 80%;
}
.customer-title {
  font-size: 22px;
} 

.voice-icon img{
  width: 50px;
  margin: 0 auto;
  margin-bottom: 10px;
}

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

.service-visual img {
  width:70%;
  height: auto;
  margin: auto;
} 

.creative img {
  width:100%;
  height: auto;
  margin: auto;
} 

.client-title h2,
.section-title h2,
.creative-title h2 {
  font-size: 18px;
}

/* ===== first message ===== */

  .second-message {
  width: 100%;
  display: block;
}

.second-message {
  width: 100%;
  max-width: 100%;
}

.sp-text,
.sp-content  {
  display: block;
}

.sp-content p {
  font-size: 15px;
  line-height: 1.4;
}

.first-message .sp-text {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  display: block;
  margin:0 auto;
  line-height: 1.6;
}

.second-message {
  writing-mode: horizontal-tb;
  font-size: 15px;
  position: static;
  transform: none;
  letter-spacing: -0.05em;
}

/* ===== service ===== */

.service {
  padding: 20px 20px;
}

.service-item {
  flex-direction: column;
  gap: 30px;
}

.service-content,
.service-visual {
  width: 100%;
}
.service-visual {
    width: 80%;       /* スマホの画面幅に合わせて可変にする */
    margin: 0 auto;   /* 中央寄せ */
  }
  
.pc-image {
        display: none !important;
    }
    .sp-image {
        display: block !important;
    }

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

.service-title {
  font-size: 22px;
}

.description {
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 30px;
}

.achievement-link {
  flex-direction: column;
  align-items: flex-start;
}

/* カード高さ調整 */
.card {
  width: 100%;
  margin: 0 auto;
  height: auto;
}


.button-container {
  display: block;
  text-align: center;
}

.custom-button {
  padding: 15px 30px;
  min-width: 200px;
  width: 250px;        /* ボタンの最小幅 */
  font-size: 17px;
  text-align: center;
  }


/* ===== creative ===== */

.creative {
  flex-direction: column;
  gap: 40px;
  padding: 10px 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.creative-content,
.creative-visual {
  width: 100%;
}

.creative p {
  line-height: 1.2;
  margin: 20px 0;
}
.creative-title h2{
  font-size: 18px;
}

.creative-visual {
  margin-right: 0;
}

/* 最初はSP用を表示、PC用を隠す */
.pc-image {
  display: none !important;
}
.sp-image {
  display: block !important;
}

.text-group {
  font-size: 22px;
  line-height: 1.3;
}

/* ===== works ===== */
 .pc-img {
    display: none !important; /* SPでは非表示 */
  }

  .works {
  width: 90%;
  margin: 0 auto;
  padding: 20px;
}

.works h2 {
  font-size: 18px;
  position: relative;
}


.works-row {
  flex-direction: column;
  gap: 20px;
}
  /* 1. PC用の画像も表示するように変更 */
  .pc-img {
    display: block !important; 
  }

  /* 3. ループアニメーションを再起動 */
  .works-row {
    display: flex !important;
    flex-direction: row !important; /* 横並びを維持 */
    gap: 20px !important; /* スマホ用に隙間を少し狭く */
    width: max-content !important;
    animation: loop-scroll 45s linear infinite;
  }

  .works-row.site{
    display: flex !important;
    flex-direction: row !important; /* 横並びを維持 */
    gap: 20px !important; /* スマホ用に隙間を少し狭く */
    width: max-content !important;
    animation: loop-scroll 45s linear infinite;
  }

  /* 4. カードのサイズ調整 */
  .card-list {
    width: 300px !important; /* スマホだと少し小さめにするとはみ出しが自然です */
    flex-shrink: 0 !important;
  }

/* Q&A　*/

.question {
  width: 90%;
}
summary {
  padding: 8px;
}

.answer {
  padding: 8px;

}

/* お客様の声 */

/* カードの幅を固定 */
.swiper-slide {
  flex-shrink: 0 !important;
  width: 270px !important;
}

.voice-card {
  width: 270px;
  height:auto
}

.voice-wrapper {
  margin: 0 auto 20px auto; /* 下段との間隔 */
}

/* ===== blog / news ===== */


.topic {
  padding: 40px 20px;
  margin: 20px;
  border: none;
}

.blog-row {
  flex-direction: column;
  gap: 20px;
}

.blog-group h3,
.news-group h3 {
  font-size: 20px;
}

.blog-title,
.blog-text {
  margin: 0;
}


.news-list li {
  border-bottom: 1px solid #a0003a;  /* ← 1pxで統一 */
  list-style: none;
}

.news-list time {
  margin-right: 10px;
}

/* ===== contact ===== */

.contact h2 {
  font-size: 30px;
}

.contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 320px;
  margin: 0 auto;
}

.form-btn,
.primary-btn {
  width: 100%;
  font-size: 14px;
  text-align: center;
  padding: 10px 0;
}
  /* ===== footer ===== */
.footer {
  padding: 60px 10px;
}

.footer-inner {
  display: grid;
  /* メニューを3列で並べる設定 */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 10px; /* 縦の隙間を少し広げると見やすくなります */
  padding-left: 10px;
}

/* 【追加】ロゴと住所を一番上で横いっぱいに広げる */
.footer-logo {
  grid-column: 1 / -1; /* 1列目から最後（右端）までぶち抜き */
  margin-bottom: 20px; /* 下のメニューとの間に余白を作る */
}

.footer-col {
  width: 100%;
}

/* 各カラムの配置指定（現状の通り） */
.footer-col.company {
  grid-column: 1 / 2;
}

.footer-col.blog {
  grid-column: 2 / 3;
}

.footer-col h4 {
  font-size: 16px;
  margin-bottom: 12px;
}

.footer-col a {
  font-size: 14px;
}

.footer-contact {
  grid-column: 1 / -1;   /* 行全体は確保する */
  justify-self: start;    /* 【重要】左端に寄せる */
  
  width: auto;            /* 横幅を中身に合わせる（または 140px など固定値） */
  min-width: 120px;       /* 小さすぎないように最低幅を指定 */
  
  padding: 8px 15px;      /* 上下左右の余白でサイズを調整 */
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
  
  display: inline-block;  /* 幅をコンテンツに合わせるために必要 */
}
  
}
/* --- 画面サイズが中くらい（1200px以下）の時の調整 --- */
@media (max-width: 1200px) {
  .company {
    /* 文字サイズを少し落とす（80px → 60px） */
    font-size: 50px;
  }

  .company-title {
    /* 帯の高さも少し調整 */
    height: 380px;
    padding-right: 4vw; /* 右寄せをさらに強める */
  }

  .company img {
    /* イラストをさらに左へ、少し小さくして被りを回避 */
    left: 15%; 
    width: 25%;
  }
}

@media screen and (max-width: 768px) {
/* ===== company ===== */
.company-title {
  font-size: 27px;
  height: 100px;
  text-align: right;
}
.company {
    position: relative;
      font-size: 15px;
  text-align: left;
  }

  .company img {
    position: absolute;
    top: 0;
    left: 20%; /* ←ここがポイント（左寄せ） */
    transform: translate(-50%, 10%);
    width: 35%;
    max-width: 220px;
    z-index: 2;
  }}

/* companyページCSS　*/
.page-company body {
  font-family:"Helvetica Neue","Arial","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif; 
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
}

.page-company .company-wrapper {
  overflow-x: hidden;

}

.page-company html, body {
  overflow: visible;
}

.page-company * {
  box-sizing: border-box; /* paddingを含めた幅計算にする */
}


.page-company html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  /* overflow系は一旦すべて消すか、以下のみにする */
  overflow-x: clip; /* hiddenより強力で、stickyを邪魔しにくい新しい属性 */
}

.page-company h1 span {
    font-family: 'Anton', sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #a0003a;
    font-size: 25px;
}
@media (min-width: 768px) {
  .page-company body {
    padding-top: 80px;
  }

  .page-company html {
    scroll-padding-top: 80px;
  }
}

@media (max-width: 767px) {
  .page-company body {
    padding-top: 60px; /* ←ヘッダーの高さに合わせる */
  }

  .page-company html {
    scroll-padding-top: 60px;
  }
}
  /* メニュー全体の配置設定 */
/* --- サイドメニュー全体の配置 --- */
.page-company .side-menu {
  position: -webkit-sticky; /* Safari対応 */
  position: sticky;         /* スティッキー配置（スクロール追従） */
  top: 130px;               /* 画面上部からの固定位置 */
  z-index: 100;
  margin-top: 30px;
  margin-left: 30px;
  width: fit-content;       /* 中身の幅に合わせる */
}

/* リストのスタイルリセット */
.page-company .side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


.side-menu a.current { color: #a0003a !important; }

.page-company .side-menu li {
  margin-bottom: 15px;      /* 項目間の隙間を少し広めに */
}

/* --- リンクの基本スタイル（通常時：グレー） --- */
.page-company .side-menu a {
  text-decoration: none;
  color: #ad436a;              /* ★通常時の文字色（薄いグレー） */
  font-weight: bold;      
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease; /* ふわっと変わるアニメーション */
}

/* リンクの丸アイコン（通常時：グレー） */
.page-company .side-menu a::before {
  content: '>';             /* 矢印記号 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  background-color:  #a0003a;   /* ★通常時の丸の色（薄いグレー） */
  color: white;
  border-radius: 50%;
  margin-right: 12px;
  font-size: 14px;
  font-family: sans-serif;
  transition: all 0.3s ease;
}

/* --- ホバー時（マウスを乗せた時）の演出 --- */
.page-company .side-menu a:hover {
  color: #a0003a;           /* ★ホバーで赤くなる */
  padding-left: 10px;       /* ちょっと右にスライド */
}

.page-company .side-menu a:hover::before {
  background-color: #ad436a; /* ★アイコンも赤くなる */
}

/* --- 現在のページ（currentクラス）のスタイル --- */
/* これを指定することで「最初から赤」を実現します */
.page-company .side-menu a.current {
  color: #a0003a;           /* ★最初から赤 */
  font-weight: bold;        /* ★最初から太字 */
}

.page-company .side-menu a.current::before {
  background-color: #a0003a; /* ★アイコンも最初から赤 */
}




/* サイドメニュー 終　*/

.page-company section {
    margin: 200px 0 !important;
    padding-right: 3%;
    padding-left: 15%;
}

.page-company .sp-text {
  display: none;
}

.page-company .pc-text {
  display: block;
  text-align: left;
}


.page-company h1 {
    color: #a0003a;
    font-size: 50px;
    padding-left: 40px;
}

.page-company .company-header {
  width: 100%;
  height: auto;
  margin-top: 40px;
  padding: 0;
}

.page-company .company-sp {
  width: 100%;
  display: none;
}


.page-company .company-top {
  text-align: left;
  margin: 0;
  max-width: 1200px;
  position: relative;
}

.page-company .company-line {
  width: 60%;
  height: 2px;
  background: #a0003a;
}


.page-company h1 span {
    font-size: 25px;
}
.page-company .section-block {
  position: relative;
  padding-right: 100px; /* タイトル分の余白 */
  max-width: 1100px;
  margin: 0 auto;
}

.page-company .section-block .mission{
  position: relative;
}

.page-company .mission-content {
  display: flex;
  justify-content: center;
  gap: 50px;
}

.page-company .section-block.message {
  margin-top: 40px;
  align-items: center; /* 縦位置を揃える */
  gap: 20px; /* 余白 */
}

.page-company .message-block {
   display: flex;
}

/* 外側の箱：ここでサイズを自由に決める */
.page-company .people-box {
  width: 370px;       /* ★ここを好きな数字（250pxなど）に変えるだけ！ */
  margin: 0 auto;     /* 中央寄せ */
  position: relative;
  z-index: 2;
  text-align: center;
  flex-shrink: 0;     /* 親のFlex設定で潰されないようにする */
}

/* 中の画像：箱の幅に合わせて、比率を維持して表示 */
.page-company .people-box img {
  width: 100%;        /* 箱の幅(300px)いっぱいに広がる */
  height: auto !important; /* ★縦に引き伸ばされるのを強制的に防ぐ */
  display: block;     /* 下に隙間ができるのを防ぐ */
  /* 元の素材(415:537)の比率をブラウザに明示的に伝える */
  object-fit: cover;  /* 万が一のズレも綺麗にカバー */
}

.page-company .name-btn {
    background: #383838;
    color: #fff;
    font-size: 11px;
    margin: 0 auto;
    padding: 3px 10px;
    text-decoration: none;
    border-radius: 5px; 
    margin-top: 20px;
}



.page-company .shape{
  position: absolute;
  width:30%;
  left: -200px;
  top: -10px;
  transform: rotate(180deg);
  z-index: 0;
}

.page-company .pink-shape03{
  position: absolute;
  width:40%;
  left: 70%;
  top: 1500px;
  transform: rotate(0deg);
  z-index:-1;
}

.page-company .purple-shape{
  position: absolute;
  width: 50%;
  left: -30%;
  top: 70%;
  transform: rotate(0deg);
  z-index:0;
}


.page-company .section-block.history{
  position: relative;
  right: 30px;
  z-index: 2;
}

.page-company .red-shape{
  position: absolute;
  width:40%;
  left: 45%;
  top: 140px;
  transform: rotate(120px);
  z-index: 1;
}
.page-company .mission-title,
.page-company .message-title,
.page-company .profile-title,
.page-company .history-title {
  font-size: 55px;
  writing-mode: vertical-rl;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
  position: absolute;
  text-align: right;
  right: -20px;
  padding-right: 0;
  z-index: 1;
}

.page-company .mission-title {
  top: 0%;
}

.page-company .mission-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: -400px;
  width: 2px;
  background: #000;
}


.page-company .company-page img {
  width: 350px;
  height: auto;
}


.page-company .first img {
  width: 300px;
  height: auto;
  text-align: center;
  margin: 0 auto;
  margin-top: 60px;
 display: block;
}

.page-company .jp {
  font-size: 1.5rem;
}

.page-company .en {
  font-size: 1rem;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
}

.page-company .mission-section {
  margin-top: 0 !important;
}

.page-company .mission p {
  text-align: center; /* 文字は中央揃え */
  line-height: 2.8;
}

.page-company .message-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: -150px;
  width: 2px;
  background: #000;
}


.page-company .message p {
  max-width: 600px;
  text-align: center;
  line-height: 1.8;
  flex: 1;
}

.page-company .people-box p {
  text-align: left;
  margin: 0;
  margin-top: 10px;
}

.page-company .profile-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: -1200px;
  width: 2px;
  background: #000;
  z-index: 1;
}
.page-company .company-profile {
  display: grid;
  grid-template-columns: 150px 1fr; /* dt固定幅 + dd可変 */
  row-gap: 20px;
}

.page-company .company-profile dt {
  font-weight: bold;
}

.page-company .company-profile dd {
  margin: 0;
}

.page-company .company-history {
  display: grid;
  grid-template-columns: 80px 1fr; /* 左側の幅を固定 */
  gap: 0 40px; /* dtとddの間の余白 */
  max-width: 600px;
  margin: 0 auto;
}

.page-company .company-history dt {
  grid-column: 1;
  padding: 0;
  font-weight: bold;
  font-family: sans-serif;
  color: #333;
}

.page-company .company-history dd {
  grid-column: 2;
  position: relative; /* 疑似要素の基準にする */
  margin: 0;
  padding: 0 0 40px 0; /* 下の余白で線の長さを調整 */
  color: #333;
}

/* 垂直の線 */
.page-company .company-history dd::before {
  content: "";
  position: absolute;
  left: -20px; /* dtとddの中間に配置（gapの半分程度） */
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #a05060; /* 画像に近いエンジ色 */
}

/* 丸（ドット） */
.page-company .company-history dd::after {
  content: "";
  position: absolute;
  left: -25px; /* 線の位置に合わせて微調整 */
  top: 10px;   /* 文字の高さに合わせて調整 */
  width: 11px;
  height: 11px;
  background-color: #a05060;
  border-radius: 50%;
}

/* 最後の項目の線は消す、あるいは短くする場合 */
.page-company .company-history dd:last-of-type::before {
  bottom: 50%; /* 最後のドットで線が止まるように調整 */
}


/* google map */
.page-company .map {
  width: 60%;        /* 全体の70%の幅にする */
  margin: 0 auto;    /* これで左右中央 */
  display: block;    /* 念のため */
}

.page-company .map iframe {
  width: 100% !important;
  height: 450px;          /* 高さを指定 */
  border: 0;
}
@media screen and (max-width: 768px) {


.page-company section {
    margin: 40px 0 !important;
}
.page-company .side-menu {
    position: static !important; /* 固定（sticky/fixed）を解除して元の位置に戻す */
    margin: 20px auto;
    margin-left: 20px;           /* SPでは中央寄せにするなど、見た目を調整 */
    width: 100%;                 /* 横幅いっぱいにする */
  }
.page-company .side-menu a {
  font-size: 17px;
  display: flex;
  align-items: center;
}

.page-company .section-block {
  margin-top: 20px;
}

.page-company .mission-content {
  display: block;
}

/* 丸い矢印アイコンの作
成 */
.page-company .side-menu a::before {
  width: 18px;         /* 丸のサイズ */
  height: 18px;
  font-size: 10px;
}

.page-company .side-menu {
  display: none;
}

.page-company .purple-shape,
.page-company .pink-shape03,
.page-company .shape {
  width: 60%;
  z-index: 0;
   top: 10%;
}

.page-company .company-header {
 display: none;
}

.page-company .company-page {
  width: 100%;
  justify-content: center;
  display: block;
    margin: 0 auto;

}

.page-company h1 span {
  font-size: 20px;
}


.page-company .company-page .page-logo {
  margin: 0 auto;
  margin-top: 100px;
  width: 220px;
  top: 0;
}



.page-company .company-page .company-photo {
  position: static;
  margin: 0 auto;
  margin-top: 30px;
  width: 200px;
}

.page-company .company-page .first {
  position: static;
  margin: 0;

}


.page-company .company-sp {
  width: 100%;
  display: block;
  margin-top: 20px;
}
.page-company .message p{
    max-width:100%;
  }

  .page-company .first img {
    width: 200px;
    margin-top: 30px;
 }

/* ----- section余白修正 ----- */
.page-company section {
  margin: 100px 0;
  padding: 0 20px;
}

.page-company .section-block {
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
    z-index: 1;
  }

.page-company .message-block {
  flex-direction: column-reverse;
}

.page-company .red-shape{
  position: absolute;
  width: 100%;
  left: 0%;
  top: 10%;
  transform: rotate(120px);
  z-index: 1;
}

.page-company .sp-text {
  display: block;
  margin: 0 20px;
}


.page-company .pc-text {
  display: none;
}

/* ----- タイトル共通処理 ----- */
.page-company .mission,
.page-company .message,
.page-company .profile,
.page-company .history {
  padding-right: 0;
}

/* ----- 縦書き解除 ----- */
.page-company .mission-title,
.page-company .message-title,
.page-company .profile-title,
.page-company .history-title {
  writing-mode: horizontal-tb;
  position: static;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  transform: none;
  font-size: 20px;
  text-align: left;
  margin-bottom: 30px;

}

.page-company .mission-title::before,
.page-company .message-title::before,
.page-company .profile-title::before,
.page-company .history-title::before {
  display: none;
}

.page-company .mission-title::after,
.page-company .message-title::after,
.page-company .profile-title::after,
.page-company .history-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1.5px;
  background: black;
}


.page-company .company-top {
  font-size: 25px;
  text-align: left;
  margin: 0;
  padding-left: 10px;
  max-width: 1200px;
}

.page-company h1 span {
    font-size: 12px;
}

.page-company .company-line {
  width: 70%;
  height: 2px;
  background: #a0003a;
}


/* ----- テキスト調整 ----- */

.page-company .mission p {
  max-width: 100%;
  margin: 0;
  text-align: center;
  line-height: 1.8;
  font-size: 16px;
}

.page-company .message p {
  max-width: 100%;
  margin: 0;
  text-align: left;
  line-height: 1.8;
  font-size: 14px;
}



/* ----- h1サイズ調整 ----- */
.page-company h1 {
  font-size: 32px;
  text-align: center;
}

.page-company h1 span {
  font-size: 18x;
}

.page-company .company-history {
  display: block;
}

.page-company .company-history dd::before {
        display: none !important;
    }

    /* afterを消す場合 */
.page-company .company-history dd::after {
        display: none !important;
    }

/* ===== contact ===== */
.page-company .contact h2 {
  font-size: 30px;
}

.page-company .contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 320px;
  margin: 0 auto;
}

.page-company .form-btn,
.page-company .primary-btn {
  width: 100%;
  font-size: 14px;
  text-align: center;
  padding: 10px 0;
}

.page-company .people {
  width: 60%;
  margin: 0 auto;
  right: 0;
}

.page-company .people-box {
  width: 250px;
  display: block;
  margin: 0 auto;
  margin-bottom: 30px;
}

.page-company .people-box p {
 text-align: center;
}

.page-company .company-profile {
  display: grid;
  /* 1fr（1列）から「固定幅 + 可変幅」の2列に変更 */
  grid-template-columns: 80px 1fr; 
  column-gap: 5px;
  row-gap: 15px;
  align-items: baseline; /* 文字の高さがズレないように揃える */
}

.page-company .company-profile dt {
  grid-column: auto; /* 1列目固定を解除して自動配置に */
  font-weight: bold;
  font-size: 14px;
  margin: 0;
}

.page-company .company-profile dd {
  grid-column: auto; /* 2列目へ自動配置 */
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.page-company .map {
    width: 92%;        /* 左右に少し余白をもたせる（お好みで） */
    margin: 20px auto;
  }

.page-company .map iframe {
    width: 100% !important;
    /* ★ここを横幅に近い数値にする（350px〜400px程度） */
    height: 350px !important; 
    border-radius: 12px; /* 正方形に近いなら角を丸くすると可愛くなります */
  }

.page-company .section-block.history {
  right: 0;
}

.page-company .company-history dd {
  padding: 0 0 20px 0;
}
}
@media (max-width: 767px) {
  .page-company .purple-shape,
  .page-company .red-shape,
  .page-company .shape,
  .page-company .pink-shape03 {
    display: none;
  }

  .page-company .sp-background {
    
    position: absolute;
    top: 90%; left: 0;
    width: 100%; height: 3500px; /* セクションの長さに合わせて調整 */
    z-index: -1;

    /* 1. 画像を6枚（3色 × 2セット）並べる */
    background-image: 
      url("img/purple_shape.svg"), url("img/pink-shape03.svg"), url("img/blue_shape02.png"), /* 1セット目 */
    url("img/purple_shape.svg"), url("img/pink-shape03.svg"), url("img/blue_shape02.png");/* 2セット目 */

    /* 2. 繰り返さない設定にする */
    background-repeat: no-repeat;

    /* 3. 6枚それぞれの「場所」を細かく指定する（ここがキモ！） */
    background-position: 
  /* --- 1セット目（ページの上半分に散らす） --- */
  -5% 2%,    /* 1枚目：ほぼ最上部 */
  105% 25%,  /* 2枚目：少し下がった右 */
  -10% 45%,  /* 3枚目：中盤の手前 */

  /* -- ここで大きく間隔（35%分）をあける！ --- */

  /* --- 2セット目（ページの下半分に散らす） --- */
  10% 70%,  /* 4枚目：一気に飛んで下の方 */
  -5% 90%,   /* 5枚目：さらに下 */
  105% 98%;  /* 6枚目：一番最後 */
    /* 4. それぞれのサイズを指定 */
    background-size: 250px auto;
  }
}

/* ==========================================================================
   お問い合わせページ専用スタイル (page-contact.php)
   ========================================================================== */

/* 全体の body 設定などはそのまま (共通設定として) */
body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

/* ここから下を .page-contact-content で囲むことで、
   他のページの class="form-group" などと衝突しなくなります。
*/


.page-contact-content .contact-top {
    background-color: #a0003a;
    height: 350px;
    color: #fff;
    margin-bottom: 50px;
}

.page-contact-content .contact-title {
    padding: 40px;
}

.page-contact-content .head-sptext {
    display: none;
}


.page-contact-content .flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 80px;
    width: 100px;
    padding: 0;
    gap: 0;
}

.page-contact-content .contact-page {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.page-contact-content .circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}

.page-contact-content .send {
    border: 2px solid #9b0036;
    color: #9b0036;
}

.page-contact-content .input {
    background: #9b0036;
    color: #fff;
}

.page-contact-content .line {
    width: 3px;
    height: 80px;
    background: #9b0036;
    flex: 0 0 auto;
}

.page-contact-content .form {
    margin: 0 auto;
    width: 60%;
}

.page-contact-content .form-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.page-contact-content label {
    width: 150px;
    font-weight: bold;
    color: #7a0026;
}

.page-contact-content .required {
    color: #b0003a;
    margin-left: 4px;
}

.page-contact-content input,
.page-contact-content textarea {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #8b1e3f;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
}

.page-contact-content input:focus {
    border-color: #c2185b;
}

.page-contact-content input[type="text"],
.page-contact-content textarea {
    flex: none;
    width: 500px;
}

.page-contact-content textarea {
    width: 500px;
    height: 200px;
    box-sizing: border-box;
}

.page-contact-content select {
    width: 500px;
    padding: 14px 18px;
    border: 2px solid #8b1e3f;
    color: black;
    border-radius: 14px;
    font-size: 16px;
    background: #fff;
}

.page-contact-content .check {
    margin-top: 30px;
    display: block;
}

.page-contact-content .check-btn {
    display: block;
    width: 300px;
    margin: 10px auto;
    text-align: center;
    background: #a0003a;
    color: #fff;
    padding: 12px 0;
    border-radius: 8px;
    text-decoration: none;
}

.page-contact-content .form p {
    color: #a0003a;
    font-size: 12px;
    text-align: right;
}

/* -------------------------
   レスポンシブ（768px以下）
--------------------------*/
@media screen and (max-width: 768px) {
    .page-contact-content .contact-top {
        padding: 20px;
        height: auto; /* 元のCSSの 250 を修正 */
    }

    
.page-contact-content .contact-title {
    padding: 20px;
}

    .page-contact-content .head-sptext {
        font-size: 13px;
        display: block;
    }

    

    .page-contact-content .head-pctext {
        display: none;
    }

    .page-contact-content .contact-page {
        flex-direction: column;
        align-items: center;
    }

    .page-contact-content .form {
        margin: 40px 20px;
        width: 80%;
    }

    .page-contact-content .form p {
    font-size: 13px;
    text-align: center;
    margin-bottom: 10px;
}
    .page-contact-content textarea,
    .page-contact-content select,
    .page-contact-content input {
        width: 100% !important; /* 強制的に幅を100%に */
        max-width: 100%;
    }

    .page-contact-content textarea {
    height: 100px;
}

    .page-contact-content .form-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-contact-content label {
        width: 100%;
        margin-bottom: 8px;
    }

    .page-contact-content .flow {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0;
        width: auto;
    }

    .page-contact-content .line {
        width: 50px;
        height: 2px;
    }

    .page-contact-content .check-btn {
        width: 40%;
    }

    .page-contact-content .check {
       width: 55%;
       margin: 0 auto;
}
}

/* --- CF7 統合用デザイン修正 --- */

/* CF7が自動で入れる余計なスパンを無効化して横並びを維持 */
.page-contact-content .wpcf7-form-control-wrap {
    display: block;
    width: auto;
}


/* 「wpcf7（CF7全体のクラス）」の中にある「check-link」に限定する */
.wpcf7 .check-link {
  margin-bottom: 30px;
}
.wpcf7 .check-link a {
  text-decoration: none;
  color: #a0003a;
}

    .page-contact-content .wpcf7-text,
    .page-contact-content .wpcf7-tel,
    .page-contact-content .wpcf7-email,
    .page-contact-content .wpcf7-select,
    .page-contact-content .wpcf7-textarea {
        width: 500px !important;
        box-sizing: border-box;
    }

    .page-contact-content .check-btn {
        max-width: 250px !important; /* 500pxより狭く設定 */
        margin: 0 auto;             /* 中央に寄せたい場合 */
        display: block;             /* 中央寄せを効かせるために必要 */
    }
/* 送信ボタンの枠線を消す */
.page-contact-content .wpcf7-submit {
    border: none;
    cursor: pointer;
}


/* エラーメッセージ（赤文字）を左寄せに */
.wpcf7-not-valid-tip {
    text-align: left;
    font-size: 13px;
    margin-top: 5px;
}



/* WORKページ */
.page-work body {

  background-attachment: fixed;
}

@media (min-width: 768px) {
  .page-work body {
    padding-top: 80px;
  }

  .page-work html {
    scroll-padding-top: 80px;
  }
}
 @media (max-width: 767px) {
  body.page-work {
    padding-top: 60px; /* ←ヘッダーの高さに合わせる */
  }

  html.page-work {
    scroll-padding-top: 60px;
  }
}

 
.page-work .top {
  overflow-x: hidden;
   position: relative;
  z-index: 1;
}

.page-work main {
  padding: 0 10px;
  position: relative;

}

.page-work h1 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #a0003a;
    font-size: 50px;
}

.page-work h1 span {
    font-family: 'Anton', sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #a0003a;
    font-size: 25px;
}

.page-company h1 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #a0003a;
    font-size: 50px;
}



.page-work .blog-filter-area{
  text-align: left;
  margin: 30px auto;

  max-width: 1200px;
  
}

.page-work .blog-filter{
  display:flex;
  gap:20px;
  margin-top: 30px;
  margin-left: 20px;
}
.page-work .blog-filter-area {
  text-align: left;
  margin: 50px auto 30px; /* 1番目の数字(50px)を大きくすると、上の線との間隔が広がります */
  max-width: 1200px;
}

.page-work .btn-option {
  color: #a0003a;
  font-weight: bold;
  
}
.page-work .tag-btn{
  padding:8px 24px;
  margin-bottom: 20px;
  border:2px solid #8c1b36;
  border-radius:30px;
  background:white;
  color:#8c1b36;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.page-work .tag-btn.active{
  background:#8c1b36;
  color:white;
}

.page-work .tag-btn:hover{
  background:#8c1b36;
  color:white;
}
.page-work .work-top {
  text-align: left;
  margin: 0;
  padding-left: 40px;
  max-width: 1200px;
}

.page-work .work-line {
  width: 60%;
  height: 2px;
  background: #a0003a;
}

.page-work h1 span {
    font-size: 25px;
}

.page-work .box-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto !important;;
  justify-content: center;
  
}



.page-work .card {
  display: flex;
  flex-direction: column;
    height: auto !important;
      text-align: left;
    background-color: transparent !important;


}

.page-work .card a {
  text-decoration: none;
  color: #a0003a;
}

.page-work .blue-shape {
  width: 100%;
  top: 100px;
}

.page-work .box {
  height: 200px;
  background: #ddd;

}
.page-work .blog-text {
  margin-top: 10px;
  font-size: 16px;
}
.page-work .contact {
  display: none;
}

/* 強制的に縦＆左揃えにする */
.page-work .card {
  display: block !important;
  text-align: left !important;
}


/* ホバー時の演出 */
/* カード単体の設定（PCで3つ並ぶ幅） */
.page-work .card-image {
  width: calc(33.333% - 14px); /* 3等分 */
  background: transparent;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* 画像エリアの設定 */
.page-work .card-image {
  width: 100%;
  height: auto;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease; /* 浮き上がりアニメーション */
}

.page-work .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease; /* ズームアニメーション */
  display: block;
}

/* ホバー時の演出 */
.page-work .card-image:hover {
  transform: translateY(-10px) scale(1.03); /* 浮き上がり */
  box-shadow: 0 12px 30px rgba(0,0,0,0.15); /* 影 */
}

.page-work .card-image:hover img {
  transform: scale(1.15); /* 画像ズーム */
}

/* --- WORKカード全体の調整 --- */
.page-work .card {
  text-decoration: none;
  display: block;
}

/* --- ホバー時の演出（カード全体に触れたら画像が動く） --- */

.page-work .card-image {
width: 100%;
    aspect-ratio: 16 / 9 !important; /* 💡元のクラス名に強制適用 */
    overflow: hidden !important;
    position: relative;
}
.page-work .card-image img {
   width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top !important;
}

/* 3. 枠の浮き上がりと影 */
.page-work .card:hover .card-image {
  transform: translateY(-12px) scale(1.02); /* 上に浮いて、わずかに膨らむ */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* ぼわーっとした深みのある影 */
}

/* 4. 中の画像のズームアップ */
.page-work .card:hover .card-image img {
  transform: scale(1.15); /* 1.15倍にズーム */
}
/* ==========================================================================
   実績一覧ページ (.page-work) 専用：画像サイズ統一CSS（完全版）
   ========================================================================== */

/* 1. 全ての画像枠の比率を16:9（YouTubeサイズ）に完全固定して凸凹を解消 */
.page-work .card-image {
    position: relative; /* 再生ボタンを上に浮かせる基準 */
    width: 100%;
    aspect-ratio: 16 / 9 !important; 
    overflow: hidden !important;
    background-color: #000 !important; /* 余白をYouTube風に黒にする */
}

/* 2. 枠の中の画像の設定（WEBスクショもYouTubeサムネも綺麗に収める） */
.page-work .card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 隙間なくカッチリはめ込む */
    object-position: center !important; /* 中央を基準に表示 */
    transition: transform 0.3s ease !important;
}

/* カードをホバーした時に画像を少しズームするお洒落な演出 */
.page-work .card:hover .card-image img {
    transform: scale(1.05) !important;
}


/* ==========================================================================
   🎬 映像制作（data-category="video"）の時だけ発動する特殊CSS
   ========================================================================== */

/* ① 上部の黒いグラデーションを自動生成（文字エリアを絶対に潰さない設定） */
.page-work .card[data-category="video"] .card-image::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 25% !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* ② 中央の「赤い再生ボタン（中に白い三角 ▶ 入り）」を自動生成 */
.page-work .card[data-category="video"] .card-image::after {
    content: "▶" !important; /* 💡台座の中に白い三角を内蔵 */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 68px !important;
    height: 48px !important;
    background-color: rgba(33, 33, 33, 0.8) !important; /* 初期状態はYouTube公式の黒透明 */
    color: #ffffff !important;
    border-radius: 12px !important;
    z-index: 2 !important;
    font-size: 22px !important;
    font-family: sans-serif !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 3px !important; /* 三角の左右位置を微調整 */
    transition: background-color 0.2s ease !important;
}

/* 🔥 本物のYouTube同様、カード全体にホバーすると再生ボタンが「真っ赤」になる演出 */
.page-work .card[data-category="video"]:hover .card-image::after {
    background-color: #ff0000 !important; 
}



/* テキスト */
.page-work .blog-text {
  margin: 10px 0 0 ;
  padding: 0 ;
  text-align: left;
}

/* WordPressブロック対策（最重要） */
.page-work .wp-block-image {
  margin: 0 !important;
  text-align: left !important;
}

/* 親の中央寄せも潰す */
.page-work .entry-content {
  text-align: left !important;
}



.page-work .pagination {
  margin: 60px 0;
}

.page-work .pagination ul{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  list-style:none;
  padding:0;
}

.page-work .pagination a{
  text-decoration:none;
  color:#333;
  font-size:14px;
}

.page-work .pagination .current{
  width:36px;
  height:36px;
  background:#a0003a;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-work .pagination .dots{
  color:#999;
}

/* ==========================================================================
   📄 ページネーション（丸型・えんじ色・完全中央寄せ版）
   ========================================================================== */

/* 1. 親要素（.box-wrapper）にflexやgridがかかっていても、ページネーションを100%横幅にする対策 */
.page-work .box-wrapper {
    position: relative !important;
}

.page-work .box-wrapper .pagination {
    grid-column: 1 / -1 !important; /* 親がgridの場合の対策 */
    flex-basis: 100% !important;    /* 親がflexの場合の対策 */
}

/* 2. ページネーション全体の配置（真ん中寄せ） */
.page-work .pagination {
    display: flex !important;
    justify-content: center !important; /* 横方向の中央寄せ */
    align-items: center !important;     /* 縦方向の中央寄せ */
    width: 100% !important;
    clear: both !important;
    margin-top: 60px !important;        /* 実績カードとのすき間 */
    margin-bottom: 60px !important;     /* 下のコンタクトとのすき間 */
    padding: 0 !important;
    gap: 16px !important;               /* 数字同士の間隔（少し広めにしてスッキリ） */
}

/* 3. ボタン（数字・てんてん・前へ次へ）の共通デザイン */
.page-work .pagination a,
.page-work .pagination .current,
.page-work .pagination .dots {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border: none !important;            /* 💡周りの枠線をすべて消去 */
    background: none !important;        /* 💡背景も一旦透明に */
}

/* 4. まだ押していない、他のページの数字リンク */
.page-work .pagination a {
    color: #444444 !important;          /* 落ち着いたダークグレー */
    transition: all 0.2s ease;
}

/* 他の数字にマウスを乗せたとき（ふんわり薄い赤背景にするか、お好みで） */
.page-work .pagination a:hover {
    color: #8a2333 !important;          /* 文字をえんじ色に */
}

/* 5. 💡現在開いているページの数字（スクショの「1」を完全再現） */
.page-work .pagination .current {
    background-color: #8a2333 !important; /* 👈 ここで理想のえんじ色（深みのある赤）に設定 */
    color: #ffffff !important;            /* 文字は白 */
    border-radius: 50% !important;        /* 👈 これで完璧な「正円」になります */
}

/* 6. 「…（省略）」の部分のデザイン */
.page-work .pagination .dots {
    color: #444444 !important;
    letter-spacing: 2px;
}

/* 下部のコンタクトフォーム */
.page-work .contact h2 {
  font-size: 55px;
  text-align: center;
  color:#a0003a;
margin-bottom: 20px;
}

.page-work .contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 550px;      /* ← PC基準幅 */
  margin: 0 auto;
}

.page-work .form-btn,
.page-work .primary-btn {
  font-size: 18px;
  background: #9e003a;
  color: #fff;
  display: block;        /* ← ここ重要 */
  padding: 10px 0;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.page-work .contact {
  margin: 50px auto;
}

/* コンタクトフォームここまで */


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


   .page-work .content-wrapper {
  position: relative; /* 背景の基準にする */
  width: 100%;
  /* 高さ指定(px)は不要！中身のセクションが増えれば自動で伸びます */
}

  .page-work .sp-background {  
    position: absolute;
    display: block;
    top: 0; left: 0;
    width: 100%; height: 100%; /* セクションの長さに合わせて調整 */
    z-index: -1;

    /* 1. 画像を6枚（3色 × 2セット）並べる */
    background-image: 
      url("img/purple_shape.png"), url("img/pink-shape03.svg"), url("img/blue_shape01.svg"), /* 1セット目 */
    url("img/purple_shape.png"), url("img/pink-shape03.svg"), url("img/blue_shape01.svg");/* 2セット目 */

    /* 2. 繰り返さない設定にする */
    background-repeat: no-repeat;

    /* 3. 6枚それぞれの「場所」を細かく指定する（ここがキモ！） */
    background-position: 
    /* --- 1セット目（上部の装飾） --- */
    -20% 100px,   /* 7% くらいの感覚 */
    105% 400px,   /* 15% くらいの感覚 */
    -10% 600px,  /* 30% くらいの感覚 */

    /* --- 2セット目（中〜下部の装飾） --- */
    10% 800px,   /* 45% くらいの感覚 */
    80% 1000px,   /* 60% くらいの感覚 */
    -40% 1500px;  /* 80% くらいの感覚 */ 
    background-size: 250px auto;
  }


.page-work .blog-filter{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin: 30px auto;
}

.page-work .tag-btn{
  padding:5px 10px;
    margin-bottom: 5px;
  border:2px solid #8c1b36;
  border-radius:30px;
  color:#8c1b36;
  font-weight:600;
}

  .page-work h1 {
    font-size: 28px;
    text-align: center;
    margin: 40px 0;
  }

  .page-work .work-top {
  text-align: left;
  margin: 0;
  padding-left: 10px;
  max-width: 1200px;
}
.page-work .work-line {
  width: 45%;
  height: 2px;
  background: #a0003a;
}

  .page-work h1 span {
    font-size: 14px;
  }

  .page-work .card {
  text-align: center;
  width: 90%;
  aspect-ratio:0;
}

  .page-work .box-wrapper {
    grid-template-columns: 1fr;  /* 3列→1列にする */
    gap: 25px;
    width: 100%;
  }

  .page-work .box {
    height: auto;           /* 固定高さを解除 */
  }

  .page-work .blog-text {
  text-align: left;
  margin-left: 5%;
}

.page-work .content img {
  display: block;
  width: 100%;
  margin: 0;
}

  .page-work .blog {
    font-size: 14px;
  }

  
/* ===== contact ===== */
.page-work .contact {
  display: block;
}

.page-work .contact h2 {
  font-size: 30px;
}

.page-work .contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 320px;
  margin: 0 auto;
}

.page-work .form-btn,
.page-work .primary-btn {
  width: 100%;
  font-size: 14px;
  text-align: center;
  padding: 10px 0;
}
}

/* 投稿がない時のテキストを中央寄せ */
.no-posts-simple {
  grid-column: 1 / -1; /* グリッド全体の中央に */
  text-align: center;
  padding: 50px 0;
  color: #a0003a;
  font-weight: bold;
}

/* WORKページ  終*/

/* BLOGページ */


/* WORKページ */
.page-blog body {

  background-attachment: fixed;
}

/* ==========================================================================
   📄 ページネーション（丸型・えんじ色・完全中央寄せ版）
   ========================================================================== */

/* 1. 親要素（.box-wrapper）にflexやgridがかかっていても、ページネーションを100%横幅にする対策 */
.page-blog .box-wrapper {
    position: relative !important;
}

.page-blog .box-wrapper .pagination {
    grid-column: 1 / -1 !important; /* 親がgridの場合の対策 */
    flex-basis: 100% !important;    /* 親がflexの場合の対策 */
}

/* 2. ページネーション全体の配置（真ん中寄せ） */
.page-blog .pagination {
    display: flex !important;
    justify-content: center !important; /* 横方向の中央寄せ */
    align-items: center !important;     /* 縦方向の中央寄せ */
    width: 100% !important;
    clear: both !important;
    margin-top: 60px !important;        /* 実績カードとのすき間 */
    margin-bottom: 60px !important;     /* 下のコンタクトとのすき間 */
    padding: 0 !important;
    gap: 16px !important;               /* 数字同士の間隔（少し広めにしてスッキリ） */
}

/* 3. ボタン（数字・てんてん・前へ次へ）の共通デザイン */
.page-blog .pagination a,
.page-blog .pagination .current,
.page-blog .pagination .dots {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border: none !important;            /* 💡周りの枠線をすべて消去 */
    background: none !important;        /* 💡背景も一旦透明に */
}

/* 4. まだ押していない、他のページの数字リンク */
.page-blog .pagination a {
    color: #444444 !important;          /* 落ち着いたダークグレー */
    transition: all 0.2s ease;
}

/* 他の数字にマウスを乗せたとき（ふんわり薄い赤背景にするか、お好みで） */
.page-blog .pagination a:hover {
    color: #8a2333 !important;          /* 文字をえんじ色に */
}

/* 5. 💡現在開いているページの数字（スクショの「1」を完全再現） */
.page-blog .pagination .current {
    background-color: #8a2333 !important; /* 👈 ここで理想のえんじ色（深みのある赤）に設定 */
    color: #ffffff !important;            /* 文字は白 */
    border-radius: 50% !important;        /* 👈 これで完璧な「正円」になります */
}

/* 6. 「…（省略）」の部分のデザイン */
.page-blog .pagination .dots {
    color: #444444 !important;
    letter-spacing: 2px;
}


@media (min-width: 768px) {
  .page-blog body {
    padding-top: 80px;
  }

  .page-blog html {
    scroll-padding-top: 80px;
  }
}
 @media (max-width: 767px) {
  body.page-blog {
    padding-top: 60px; /* ←ヘッダーの高さに合わせる */
  }

  html.page-blog {
    scroll-padding-top: 60px;
  }
}

.page-blog .top {
  overflow-x: hidden;
   position: relative;
  z-index: 1;
}

.page-blog .sp-background {
  display: none;
}

.page-blog main {
  padding: 0 10px;
  position: relative;
}

.page-blog .card-body{
  display: block;
  margin: 0 auto;
}

.page-blog h1 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #a0003a;
    font-size: 50px;
}

.page-blog h1 span {
    font-family: 'Anton', sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #a0003a;
    font-size: 25px;
}

.page-blog .blog-filter-area{
  text-align: left;
  margin: 30px auto;
  max-width: 1200px;
}

.page-blog .blog-filter{
  display:flex;
  gap:20px;
  margin-top: 30px;
  margin-left: 20px;
}
.page-blog .blog-filter-area {
  text-align: left;
  margin: 50px auto 30px; /* 1番目の数字(50px)を大きくすると、上の線との間隔が広がります */
  max-width: 1200px;
}

.page-blog .btn-option {
  color: #a0003a;
  font-weight: bold;
  
}
.page-blog .tag-btn{
  padding:8px 24px;
  margin-bottom: 20px;
  border:2px solid #8c1b36;
  border-radius:30px;
  background:white;
  color:#8c1b36;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.page-blog .tag-btn.active{
  background:#8c1b36;
  color:white;
}

.page-blog .tag-btn:hover{
  background:#8c1b36;
  color:white;
}
.page-blog .blog-top {
  text-align: left;
  margin: 0;
  padding-left: 40px;
  max-width: 1200px;
}

.page-blog .blog-line {
  width: 60%;
  height: 2px;
  background: #a0003a;
}
.page-blog h1 span {
    font-size: 25px;
}

.page-blog .box-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto !important;;
  justify-content: center;
  
}

.page-blog .card {
  display: flex;
  flex-direction: column;
    height: auto !important;
      text-align: left;
    background-color: transparent !important;
}

.page-blog .card a {
  text-decoration: none;
  color: #a0003a;
}

.page-blog .blue-shape {
  width: 100%;
  top: 100px;
}

.page-blog .box {
  height: 200px;
  background: #ddd;
}

.page-blog .content img {
  width: 320px;
  text-align: center;
}

.page-blog .blog-text {
  margin-top: 10px;
  font-size: 16px;
}
.page-blog .contact {
  display: none;
}

/* 強制的に縦＆左揃えにする */
.page-blog .card {
  display: block !important;
  text-align: left !important;
}

/* 画像の親もリセット */
.page-blog .content{
  display: block !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 画像そのもの */
.page-blog .content img {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

/* テキスト */
.page-blog .blog-text {
  margin: 10px 0 0;
  padding: 0;
  text-align: left;
}

/* WordPressブロック対策（最重要） */
.page-blog .wp-block-image {
  margin: 0 !important;
  text-align: left !important;
}

/* 親の中央寄せも潰す */
.page-blog .entry-content {
  text-align: left !important;
}


.page-blog .pagination {
  margin: 60px 0;
}

.page-blog .pagination ul{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  list-style:none;
  padding:0;
}

.page-blog .pagination a{
  text-decoration:none;
  color:#333;
  font-size:14px;
}

.page-blog .pagination .current{
  width:36px;
  height:36px;
  background:#a0003a;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-blog .pagination .dots{
  color:#999;
}


/* 下部のコンタクトフォーム */
.page-blog .contact h2 {
  font-size: 55px;
  text-align: center;
  color:#a0003a;
margin-bottom: 20px;
}

.page-blog .contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 550px;      /* ← PC基準幅 */
  margin: 0 auto;
}

.page-blog .form-btn,
.page-blog .primary-btn {
  font-size: 18px;
  background: #9e003a;
  color: #fff;
  display: block;        /* ← ここ重要 */
  padding: 10px 0;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
.page-blog .contact {
  margin: 50px auto;
}
/* BLOGセクション 終 */

/* BLOGセクション　レスポンシブ　*/
@media screen and (max-width: 768px) {

   .page-blog .content-wrapper {
  position: relative; /* 背景の基準にする */
  width: 100%;
  /* 高さ指定(px)は不要！中身のセクションが増えれば自動で伸びます */
}

  .page-blog .sp-background {  
    position: absolute;
    display: block;
    top: 0; left: 0;
    width: 100%; height: 100%; /* セクションの長さに合わせて調整 */
    z-index: -1;

    /* 1. 画像を6枚（3色 × 2セット）並べる */
    background-image: 
      url("img/purple_shape.png"), url("img/pink-shape03.svg"), url("img/blue_shape01.svg"), /* 1セット目 */
    url("img/purple_shape.png"), url("img/pink-shape03.svg"), url("img/blue_shape01.svg");/* 2セット目 */

    /* 2. 繰り返さない設定にする */
    background-repeat: no-repeat;

    /* 3. 6枚それぞれの「場所」を細かく指定する（ここがキモ！） */
    background-position: 
    /* --- 1セット目（上部の装飾） --- */
    -20% 100px,   /* 7% くらいの感覚 */
    105% 400px,   /* 15% くらいの感覚 */
    -10% 600px,  /* 30% くらいの感覚 */

    /* --- 2セット目（中〜下部の装飾） --- */
    10% 800px,   /* 45% くらいの感覚 */
    80% 1000px,   /* 60% くらいの感覚 */
    -40% 1500px;  /* 80% くらいの感覚 */ 
    background-size: 250px auto;
  }


.page-blog .blog-filter{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin: 20px auto;
}

.page-blog .tag-btn{
  padding:5px 10px;
  margin-bottom: 5px;
  border:2px solid #8c1b36;
  border-radius:30px;
  color:#8c1b36;
  font-weight:600;
}

  .page-blog h1 {
    font-size: 28px;
    text-align: center;
    margin: 40px 0;
  }

  .page-blog .blog-top {
  text-align: left;
  margin: 0;
  padding-left: 10px;
  max-width: 1200px;
}
.page-blog .blog-line {
  width: 80%;
  height: 2px;
  background: #a0003a;
}

  .page-blog h1 span {
    font-size: 14px;
  }

  .page-blog .card {
  text-align: center;
  width: 100%;
  aspect-ratio:0;
}

  .page-blog .box-wrapper {
    grid-template-columns: 1fr;  /* 3列→1列にする */
    gap: 25px;
    width: 100%;
  }

  .page-blog .box {
    height: auto;           /* 固定高さを解除 */
  }

  .page-blog .blog-text {
    width: 100%;
  text-align: left;
margin: 0 auto;
margin-left: 15%;
}


.page-blog .blog-image {
display: block; 
margin: 0 auto;
}

.page-blog .content img {
  display: block;
  width: 100%;
  margin: 0;
}

  .page-blog .blog {
    font-size: 14px;
  }

  
/* ===== contact ===== */
.page-blog .contact {
  display: block;
}

.page-blog .contact h2 {
  font-size: 30px;
}

.page-blog .contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 320px;
  margin: 0 auto;
}

.page-blog .form-btn,
.page-blog .primary-btn {
  width: 100%;
  font-size: 14px;
  text-align: center;
  padding: 10px 0;
}
}
/* BLOGセクション レスポンシブ 終　*/

/* --- 共通デザイン：これだけで全部に効く --- */

/* 1. タイトルは常に黒 */
.post-title, .blog-title a {
  color: black !important;
  text-decoration: none;
}

/* 2. ハッシュタグは常に赤 */
.post-tag, .blog-category a {
  color: #a0003a !important;
  font-weight: bold;
}

/* 3. ボタン：選択されたら背景赤・文字白 */
.tag-btn.active {
  background: #a0003a !important;
  color: #fff !important;
}



/* ページフォーム */
@media (min-width: 768px) {
  body.page-form {
    padding-top: 80px;
  }

  html.page-form {
    scroll-padding-top: 80px;
  }
}

@media (max-width: 767px) {
  body.page-form {
    padding-top: 60px; /* ←ヘッダーの高さに合わせる */
  }

  html.page-form {
    scroll-padding-top: 60px;
  }
}
/* 問い合わせ完了後ページ */
.page-form .head-title {
  font-size: 45px;
  text-align: center;
}

.page-form .contact-top {
  margin-top: 80px;
    color: #a0003a;
}

.page-form .contact-top p {
  text-align: center;
}

.page-form .contact-title {
    padding: 20px;
}

.page-form .flow{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 80px;
}

.page-form .contact-page{
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 20px 5%;
}

.page-form * {
  box-sizing: border-box;
}

.page-form .check {
      display: block;
  margin: 0;
  margin-top: 0;
  margin-bottom: 100px;
}

.page-form .check-btn {
  display: block;          /* ← これに変える */
  width: 300px;            /* 幅を決める */
  margin: 10px auto;       /* ← これで中央 */
  text-align: center;
  background: #a0003a;
  color: #fff;
  font-size: 22px;
  padding: 12px 0;
  border-radius: 8px;
  text-decoration: none;
}

.page-form .check p {
    color: #a0003a;
    font-size: 16px;
    text-align: center;
}
/* 問い合わせ完了後ページ 終　*/

/* -------------------------
   問い合わせ完了後ページ　レスポンシブ（768px以下）
--------------------------*/
@media screen and (max-width: 768px) {

  .page-form .contact-top {
    padding: 40px 20px;
    height: 250; /* 高さ固定を解除 */
  }

.page-form .head-title {
  font-size: 30px;
  text-align: center;
}

.page-form .contact-top p {
  text-align: center;
  font-size: 13px;
}

.page-form .pc-text {
  display: none;
}

.page-form select {
  color: #a0003a;
}

.page-form .contact-title {
    padding: 0;
  }

  .page-form .contact-page{
  flex-direction: column;
  align-items: center;
}

  .page-form .form {
    margin: 40px 20px;
    width: 80%;
  }

.page-form textarea {
    width: 100%;
    height: auto;
  }
  .page-form select {
    width: 100%;
  }

  .page-form .form-group {
    flex-direction: column;   /* ← 横並びを縦並びに */
    align-items: flex-start;  /* 左揃え */
  }

  .page-form label {
    width: 100%;  /* 固定幅解除 */
    margin-bottom: 8px;
  }

.page-form .flow{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0;
}

/* 上の丸 */
.page-form .input{
  border: 2px solid #9b0036;
  color: #9b0036;
}

/* 下の丸 */
.page-form .send{
  background: #9b0036;
  color: #fff;
}

/* 線を横にする */
.page-form .line{
  width: 60px;
  height: 2px;
}

.page-form .circle{
  width: 60px;
  height: 60px;
  font-size: 14px;
}

  .page-form input {
    width: 100%;   /* 横幅いっぱい */
    max-width: 100%;
  }

  .page-form .check {
    margin-bottom: 50px;
        display: block;

  }

  .page-form .check-btn {
    width: 60%;   /* ボタンも横いっぱい */
    font-size: 12px;
    display: block; /* インラインだと margin auto が効かないので block にする */
  margin: 0 auto;
  }
}
/* ページフォーム 終 */


/* プランページ */
.page-plan body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* まずリセットしてみる */
.page-plan html, body {
    margin: 0;
    padding: 0;
    overflow-x:hidden;
}
.page-plan * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

  /* ---------------- top-title ---------------- */

.page-plan .title-text {
  text-align: center;
}

.page-plan .top-title {
    background-color: #E5EBF0;
    height: 270px;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 80px;
    border-bottom: 8px solid #0F5C7A;
}
  .page-plan .sp-text {
    display: none;
  }

  .page-plan .pc-text {
    display: block;
  }
.page-plan .top-content {
    justify-items: center;
}

.page-plan .plan-title {
    font-size: 43px;
}

  /* ---------------- ↑top-title ---------------- */

    /* ---------------- CARD ---------------- */

.page-plan .price-card{
  width: 80%;       /* 親幅に合わせる */
  max-width: 320px;  /* PC用は最大320pxに制限 */
  box-sizing: border-box; /* padding込みで幅を計算 */
  font-size: 12px;
  letter-spacing: normal;
  background:#fff;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
  overflow:hidden;
}

.page-plan .card-lists {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin: 0 auto;
  justify-content: center;
}

/* 上の青 */
.page-plan .blue-header{
  background:#0d6ea8;
  border-radius: 10px;
  padding:10px 0px;
  text-align:center;
}

/* オレンジ */
.page-plan .orange-header{
  background: #fa7f0b;
  padding:10px 0px;
  border-radius: 10px;
  text-align:center;
}

/* ネイビー */
.page-plan .navy-header{
  background:#000122;
  padding:10px 0px;
  border-radius: 10px;
  text-align:center;
}

.page-plan .plan-top{
  width: 80%;
  background:#fff;
  padding:6px 10px;
  border-radius:30px;
  display:inline-block;
  font-weight:bold;
}


.page-plan .plan-name {
 font-size: 22px;
 line-height: 1.4;
 font-weight: bolder; 
 margin: 10px auto;
 color: #fff;
}
.page-plan .price {
  font-size: 30px;
}


/* 中身 */

.page-plan .card-body{
  padding:20px;
}

/* 見出し */

.page-plan .section-title{
  text-align:center;
  font-size: 16px;
  margin:0 0 10px 0;
  position:relative;
}

.page-plan .section-title::before,
.page-plan .section-title::after{
  content:"";
  position:absolute;
  top:50%;
  width:20%;
  height:1px;
  background:#ccc;
}

.page-plan .section-title::before{
  left:0;
}

.page-plan .section-title::after{
  right:0;
}

/* チェック */

.page-plan .check-list{
  list-style:none;
  padding:0;
  font-size:16px;
  margin-bottom:10px;
}

.page-plan .letter {
  letter-spacing: -0.05em
}

.page-plan .check-list li{
  display:flex;
  align-items:center;
  color: #000;
  gap:10px;
  margin:10px 0;
}

.page-plan .item-list li {
  border-bottom: 1px solid #000; /* 下線 */
  padding: 5px 0;
}

.page-plan .item-list li.no-underline {
  border-bottom: none; /* 下線を消す */
}

.page-plan .check-list.blue li::before{
  content:"✓";

  width: 15px;
  height: 15px;

  border:1px solid #0d6ea8;

  font-size:10px;
  color:#0d6ea8;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;
}

.page-plan .check-list.orange li::before{
  content:"✓";

  width: 15px;
  height: 15px;

  border:1px solid #fa7f0b;

  font-size:10px;
  color:#fa7f0b;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;
}

.page-plan .check-list.navy li::before{
  content:"✓";

  width: 15px;
  height: 15px;

  border:1px solid #000122;

  font-size:10px;
  color:#000122;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;
}

/* 矢印 */

.page-plan .arrows{
  text-align:center;
  font-size:25px;
  margin: 0;
}

/* おすすめ */

.page-plan .target-text{
  text-align:center;
  font-size: 16px;
  margin: 0px;
}

.page-plan .blue {
    color: #0d6ea8;
}

.page-plan .orange {
  color:#fa7f0b
}

.page-plan .navy {
  color: #000122;
}

/* 青タイトル */

.page-plan .blue-title{
  background:#0d6ea8;
  box-sizing:border-box;
  color:#fff;
  padding:2px 10px;
  border-radius:4px;
  margin: 5px 0;
}

/* オレンジ */

.page-plan .orange-title{
  background:#fa7f0b;
  box-sizing:border-box;
  color:#fff;
  padding:2px 10px;
  border-radius:4px;
  margin: 5px 0;
}

/* ネイビー */
.page-plan .navy-title{
  background:#000122;
  box-sizing:border-box;
  color:#fff;
  padding:2px 10px;
  border-radius:4px;
  margin: 5px 0;
}

.page-plan .item-list{
  width:250px;
  margin:0 auto;
  padding:0;
}

.page-plan .item-list li{
  border-bottom:1px solid #ddd;
  margin:0 auto;
  font-size: 12px;
  padding:4px 0;
}
.page-plan .gray{
  color:#999;
}

.page-plan .item-list li::marker{
  font-size:7px;
}

/* ボタン */

.page-plan .blue-button{
  display:block;
  text-align:center;
  background:#0d6ea8;
  color:#fff;
  width: 200px;
  padding:9px;
  font-size: 17px;
  border-radius:8px;
  text-decoration:none;
  margin:20px auto 0;
}


.page-plan .orange-button{
  display:block;
  text-align:center;
  background: #fa7f0b;
  color:#fff;
  width: 200px;
  padding:9px;
  font-size: 17px;
  border-radius:8px;
  text-decoration:none;
  margin:20px auto 0;
}


.page-plan .navy-button{
  display:block;
  text-align:center;
  background:#000122;
  color:#fff;
  width: 200px;
  padding:9px;
  font-size: 17px;
  border-radius:8px;
  text-decoration:none;
  margin:20px auto 0;
}

.page-plan .sns-card{
  width:300px;
  border-radius:8px;
  overflow:hidden;
  background:white;
  box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

.page-plan .sns-top{
  background:#b3003c;
  padding:8px 0;
  text-align:center;   /* 横中央 */
  color:white;
  font-size:18px;
}

.page-plan .sns-bottom{
  padding:8px 0;
  text-align:center;   /* 横中央 */
  font-size:22px;
  color: #a0003a;
}

/* 下部のコンタクトフォーム */
.page-plan .contact h2 {
  font-size: 55px;
  text-align: center;
  color:#a0003a;
margin-bottom: 20px;
}

 .page-plan .contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 550px;      /* ← PC基準幅 */
  margin: 0 auto;
}

.page-plan .form-btn,
.page-plan .primary-btn {
  font-size: 18px;
  background: #9e003a;
  color: #fff;
  display: block;        /* ← ここ重要 */
  padding: 10px 0;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.page-plan .contact {
  margin: 50px auto;
}

.page-plan .OPTIONS {
    margin: 40px;

}

.page-plan .options-title h1 {
  font-size: 48px;
  padding-left: 30px;

}

/* グリッド */
.page-plan .price-grid{
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 24px;
  max-width: 900px;
  margin: auto;
}

/* カード */
.page-plan .card-name{
  grid-column: span 2;
  border-radius: 6px;
  margin-top: 30px;
  overflow: hidden;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* タイトル */
.page-plan .price-card-title{
  background:#b0003a;
  color:white;
  text-align:center;
  padding:5px;
  font-size:16px;
}

/* 金額 */
.page-plan .price-card-value{
  background:white;
  color: #b0003a;
  text-align:center;
  padding:5px;
  font-size:23px;
  font-weight:bold;
}

/* 下2つ中央配置 */
.page-plan .card-name:nth-child(4){
  grid-column: 2 / span 2;
}

.page-plan .card-name:nth-child(5){
  grid-column: 4 / span 2;
}

.page-plan .plan-img {
  text-align: center;
}

.page-plan .plan-img img {
  width: 70%;
  height: auto;
  margin: 0;
  margin-top: 50px;
}

.page-plan .plan-last p{
  text-align: center;
  color: #a0003a;
  margin-bottom: 10px;
}

.page-plan .plan-last .contact-btn {
    font-size: 18px;
    background: #9e003a;
    color: #fff;
    display: block;
    padding: 10px 0;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    width: 300px;
    text-align: center;
    margin: 0 auto;
}

/* コンタクトフォームここまで */

/* プランページ　レスポンシブ */
@media (max-width: 767px) {

  .page-plan body {
  margin: 0;       /* デフォルトの余白を消す */
  padding: 0;      /* 念のためパディングも消す */
  box-sizing: border-box; /* 幅計算を安定させる */
}
  .page-plan .top-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* タイトルを上に */
  .page-plan .title-text {
    order: 1;
    margin: 20px 0;
    text-align: center;
  }


  .page-plan .right-top {
  transform: translateY(-10px);
}


.page-plan .sp-text {
  margin: 0;
  display: block;
  text-align: center;
  order: 1;               /* 上に来るように順序を指定 */
}

.page-plan .plan-text.sp-text {
  font-size: 15px;

}

.page-plan .top-title {
  height: 250px;
}


.page-plan .price-card {
    margin: 0 auto;  /* ←これで中央 */
  }

   .page-plan .price-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-plan .card-name{
    grid-column: auto;
    width: 80%;
    margin: 0 auto;
  }

  .page-plan .card-name:nth-child(4),
  .page-plan .card-name:nth-child(5){
    grid-column: auto;
  }
  
  .page-plan .card-lists {
     flex-direction: column;
  }

  .page-plan .options-title h1 {
  font-size: 27px;
  padding-left: 10px;
  text-align: left;

}

  .page-plan .pc-text {
    display: none;
  }
  .page-plan .plan-title {
    padding: 0;
    text-align: center;
    font-size: 25px;
  }


.page-plan .plan-img {
  text-align: center;
}

.page-plan .plan-img img {
  width: 90%;
  height: auto;
  margin: 50px auto;
}

  /* ===== contact ===== */

.page-plan .contact h2 {
  font-size: 30px;
}

.page-plan .contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 320px;
  margin: 0 auto;
}

.page-plan .form-btn,
.page-plan .primary-btn {
  width: 100%;
  font-size: 14px;
  text-align: center;
  padding: 10px 0;
}


} 
/* プランページ レスポンシブ 終 */

/* ヘッダー分の上余白（全ページ）*/
@media (min-width: 768px) {
  /* 適用したいページのbodyクラスを並べる */
  #page-blog,
    #page-work,
  #page-contact-content,
  #page-company,
  #page-form,
  #single-main,
  #page-plan{
    padding-top: 120px !important;
  }

  /* スムーズスクロールの着地点もずらす */
  #page-blog,
  #page-work,
  #page-contact-content,
  #page-company,
  #page-form,
  #single-main,
  #page-plan{
    scroll-padding-top: 120px !important;
  }


}

@media (max-width: 767px) {
  #page-blog,
  #page-work,
  #page-contact-content,
  #page-company,
  #page-form,
  #single-main,
  #page-plan {
    padding-top: 100px; /* ←ヘッダーの高さに合わせる */
        scroll-padding-top: 100px;

  }

.page-plan .plan-last .contact-btn {
    font-size: 14px;
    width: 220px;
}

}

/* アニメーション */
.fade-up {
  opacity: 1;
  transform: translateY(40px);
  transition: 0.6s;
   z-index: 1;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}
/* 最初は透明で、少し下に下げておく */
.fade-init {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s, transform 0.8s;
}

/* クラスがついたら表示する */
.is-active {
    opacity: 1;
    transform: translateY(0);
}

.description.is-active {
  margin-top: 30px;
}

/* ハッシュタグの文字をすべて大文字にする */
.post-tag {
  color: #a0003a !important;
  font-weight: bold;
  text-transform: uppercase; /* これで小文字も大文字になります */
}

/* --- 強制横並びリセット --- */
@media screen and (min-width: 769px) {

    /* CF7が勝手に入れる p タグを消して、中身の .form-group を直接横並びにする */
    .page-contact-content .wpcf7 form p {
        display: contents !important; /* 段落タグを構造上無視させる */
    }

    /* 1. 親要素を横並びにする */
    .page-contact-content .form-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 25px !important;
        width: 100% !important;
    }

    /* 2. 左側のラベル幅を固定 */
    .page-contact-content label {
        width: 180px !important;
        flex-shrink: 0 !important;
        margin-right: 20px !important;
        text-align: left !important;
    }

    /* 3. 右側の入力欄の幅を固定 */
    .page-contact-content .wpcf7-form-control-wrap {
        display: block !important;
        width: 500px !important;
        flex-shrink: 0 !important;
       
    }

    /* 各入力パーツの横幅を100%（＝500px）にする */
    .page-contact-content input,
    .page-contact-content select,
    .page-contact-content textarea {
        width: 100% !important;
        max-width: 500px !important;
        box-sizing: border-box !important;
    }
    /* --- 項目名のフォントサイズ強制上書き --- */
.page-contact-content .form-group label {
    font-size: 20px !important; /* ← まずは大きく 24px にして変わるか試してください */
    font-weight: bold !important;
    display: inline-block !important;
    line-height: 1.5 !important;
}

/* 必須マーク（*）のサイズも合わせる場合 */
.page-contact-content .required {
    font-size: 15px !important;
    vertical-align: middle !important;
}
}
/* --- スマホ専用：セレクトボックス強制広幅設定 --- */
@media screen and (max-width: 768px) {
    
    /* 1. CF7のセレクトボックスを囲むスパンを横幅いっぱいに */
    .page-contact-content .wpcf7-form-control-wrap {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. セレクトボックス本体のサイズと見た目を強制上書き */
    .page-contact-content select,
    .page-contact-content .wpcf7-select {
        display: block !important;
        width: 100% !important;       /* 横幅を親要素（100%）に合わせる */
        max-width: 100% !important;
        min-width: 100% !important;
        height: 50px !important;      /* 高さを他の入力欄と合わせる（適宜調整） */
        padding: 10px 15px !important;
        box-sizing: border-box !important; /* パディングを含めて100%にする */
        
        /* ↓ ブラウザ独自の見た目をリセット（これが重要！） */
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-color: #fff !important;
        border: 2px solid #8b1e3f !important; /* 今までの枠線の色 */
        border-radius: 12px !important;       /* 今までの角丸 */
    }
}
/* スマホ（768px以下）でセレクトボックスを横幅100%に強制する */
@media screen and (max-width: 768px) {

    /* 1. 全ての入力欄・セレクトボックスを対象にする */
    .wpcf7-form-control, 
    .wpcf7-select, 
    select.wpcf7-form-control {
        display: block !important;
        width: 100% !important;        /* 横幅100% */
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important; /* 余白を内側に含める */
        appearance: none !important;    /* ブラウザ独自の見た目を消す */
        -webkit-appearance: none !important;
    }

    /* 2. セレクトボックスを囲んでいる余計なスパンを広げる */
    .wpcf7-form-control-wrap {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 3. 親の div (.form-group) が横並びのままなら縦にする */
    .form-group {
        display: block !important;      /* 横並び解除 */
        width: 100% !important;
    }
}
/* --- 送信ボタン下の余白を消す --- */

/* 1. CF7が自動で作る「レスポンス出力用」の余白をリセット */
.page-contact-content .wpcf7-response-output {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}


/* 4. もし p タグが原因なら、これを追加して無視させる */
.page-contact-content .wpcf7 form br {
    display: none !important; /* CF7が勝手に入れる改行を消す */
}


/*　ヘッダー */
@media screen and (max-width: 768px) {
  
  /* 線の初期位置 */
  .hamburger span:nth-child(1) { top: 16px; }
  .hamburger span:nth-child(2) { top: 26px; }

  /* ★ バツ印への変形設定 */
 .hamburger.active {
    background-color: transparent !important; /* 四角い背景を透明（なし）にする */
}

.hamburger.active span {
    background-color: #fff !important; /* 中のシェイプ（線）だけを白にする */
}


  .nav.active {
    transform: translateX(0);
  }

  /* 3. 子メニュー（中の文字） */
  .mega-menu {
    display: block !important;
    position: static !important;
    padding: 6px 0 0 15px !important; 
    margin: 0 !important;
    background: none !important;
   font-weight: 600;

  }
  .mega-menu a {
    color: #ffffff !important;
    font-size: 10px !important; /* 16pxから14pxにサイズダウン */
    font-weight: 600 !important;
    opacity: 0.8;
    text-decoration: none !important;
  }

  /* 4. 右下のCONTACT（下線なし） */
  .nav-list .nav-item:last-child {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    margin: 0 !important;
  }

  .nav-list .nav-item:last-child a {
    font-size: 14px !important; /* 他の大項目と同じサイズに */
    font-weight: 700 !important;
    border-bottom: none !important; /* 下線を削除 */
    padding-bottom: 0 !important;
  }
  
/* SNSアイコンの親要素だけを横並びに強制変更 */
.nav-item.sns-item {
    flex-direction: row !important; /* 縦(column)を横(row)に上書き */
    display: flex !important;
    gap: 0px;      /* アイコン同士の隙間 */
    margin-top: 20px; /* 上のメニューとの間隔調整 */
}

  /* --- ハンバーガーボタン（バツに変形） --- */


  .hamburger.active span:nth-child(1) { top: 21px !important; transform: rotate(45deg) !important; }
  .hamburger.active span:nth-child(2) { top: 21px !important; transform: rotate(-45deg) !important; }
}

/* --- 全体・PCの設定（デフォルト） --- */
section[id], 
div[id] {
  scroll-margin-top: 80px; /* PCでのヘッダー高さに合わせる */
}

/* --- スマホ（SP）の設定 --- */
@media screen and (max-width: 767px) {
  section[id], 
  div[id] {
    /* スマホはヘッダーの高さが変わることが多いので、ここで数値を調整 */
    scroll-margin-top: 60px; 
  }
}
/* カード内の画像コンテナ */
.card-image {
    width: 100%;
    height: 200px; /* ★ここでお好みの高さに固定 */
    overflow: hidden; /* はみ出た分を隠す */
    position: relative;
}

/* 中の画像 */
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ★これが重要！アスペクト比を維持して枠いっぱいに広げる */
    object-position: center; /* 中央合わせ */
}/* ==========================================
   1. PC版（769px以上）の設定
   ========================================== */
@media screen and (min-width: 769px) {
    .pc-logo { display: block !important; }
    .sp-logo { display: none !important; }
}

/* ==========================================
   2. スマホ版（768px以下）の設定
   ========================================== */
@media screen and (max-width: 768px) {

    /* --- ヘッダー・ロゴ設定 --- */
    .header-inner {
        position: relative !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .company-logo {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    .pc-logo { display: none !important; }

    /* --- ハンバーガーボタン（50pxの正方形で中央配置） --- */
    .hamburger {
        position: absolute !important; 
        top: 50% !important;
        right: 5px !important;
        transform: translateY(-50%) !important;
        width: 50px !important;
        height: 50px !important;
        background-color: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        border: none !important;
        z-index: 1000000 !important;
        margin: 0 !important;
            cursor: pointer;
    padding: 0 !important; /* 余計なパディングをリセット */

    }

    .hamburger span {
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        background-color: #7b1e39 !important;
        margin: 5px auto !important; /* 三本線の間隔 */
        border-radius: 2px !important;
        transition: all 0.3s !important; /* 動きを滑らかに */

    }


    /* --- メニュー画面本体（スクロール対応） --- */
   
    .nav.active {
        right: 0 !important;
    }
    .nav-list .nav-item:first-child {
        display: flex !important;
        flex-direction: column !important;
    }

    /* --- メニュー文字サイズ（大きめ） --- */
    .nav-list > .nav-item > a {
        font-size: 16px !important; 
        font-weight: 500 !important;
        color: #ffffff !important;
        text-decoration: none !important;
        padding: 0 !important; /* 行間を詰めつつ大きく見せる */
        padding-top: 10px !important;
        display: block !important;
        letter-spacing: 0.1em !important;
        line-height:1.1 !important;
    }

    /* 子メニュー */
    .nav-list .sub-menu .nav-item a,
    .nav-list .mega-menu a {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #ffffff !important;
        display: block !important;
    }

    /* CONTACTボタン（右下寄せ） --- */
    .nav-list > .nav-item:last-child {
        margin-top: 15px !important;
        margin-bottom: 40px !important;
        align-self: flex-end !important;
        text-align: right !important;
    }
    /* --- メニュー画面本体（スクロール対応） --- */
    .nav {
        padding: 7cap 20px 60px 20px !important; 
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: #7b1e39 !important; 
        transition: 0.4s ease-in-out !important;
        z-index: 999999 !important;
        overflow-y: scroll !important; /* はみ出してもスクロール可能 */
        -webkit-overflow-scrolling: touch;
        right: -100% !important;
    }

    /* 2. リスト自体の位置を固定解除して上に寄せる */
    .nav-list {
        margin-top: 0 !important;
        padding-top: 15px !important;
        padding-left: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; /* 上詰めに固定 */
                list-style: none !important;
        margin: 0 !important;
        padding: 0;
        gap: 0 !important;
align-items: flex-start !important;
      }

    /* 3. メニュー内のロゴをさらに上に詰める */
    .sp-logo {
        display: block !important;
        height: auto !important;
        width: 90px !important;   /* 少し小さくして場所を空ける */
        margin: 0 !important; 
    }

    /* 4. 各メニュー項目の隙間をさらにカット */
    .nav-item {
        margin-bottom: 4px !important; /* 項目同士をギュッと寄せる */
        display: block;
    }

    .nav-item > a {
        font-size: 13px !important;
        padding: 4px 0 !important; /* リンクの上下余白もカット */
    }


    .mega-menu a {
        padding: 2px 0 !important;
    }

}

/* ジャンプ先の要素（#one, #two...）すべてに適用 */
#one, #two, #three, #four {
    /* ヘッダーが50pxなら、70px〜80pxくらいあけると綺麗です */
    scroll-margin-top: 150px !important;
}

@media (max-width: 767px) {
  #one, #two, #three, #four {
    /* ヘッダーが50pxなら、70px〜80pxくらいあけると綺麗です */
    scroll-margin-top: 60px !important;
}
}

/* もし「スルスル」と動かしたい場合はこれも追加 */
html {
    scroll-behavior: smooth;
}


/* bodyは「素」の状態に戻す */
.page-company body {
  overflow: visible !important;
}

/* 全体を囲んだdivに「横揺れ防止」を任せる */
.page-company .company-wrapper {
 overflow: visible; /* hiddenではなくvisibleにする */
    position: relative;
    width: 100%;
}

/* 基本のスタイル */
.side-menu a { color: #ad436a; }
.side-menu a::before { background-color: #a0003a; }

/* アクティブ時のスタイル（!importantで確実に上書き） */
.side-menu a.current {
  color: #a0003a !important;
  font-weight: bold !important;
}
.side-menu a.current::before {
  background-color: #a0003a !important;
}

/* BLOG投稿内容 */

/* 「BLOG一覧に戻る」のリンクカスタマイズ */
.single-main .back-link {
    margin-top: 40px;      /* 上にも少し余白があると綺麗です */
    margin-bottom: 60px;   /* 下にしっかり余白を確保 */
    text-align: center;    /* 中央寄せにするなら追加 */
}

.single-main .back-link a {
    color: #a0003a;        /* エンジ色（マルーン） */
    text-decoration: none; /* 下線を消す */
    font-weight: bold;     /* 少し太くして目立たせる */
    transition: opacity 0.3s;
}

/* マウスを乗せた時の動き */
.single-main .back-link a:hover {
    opacity: 0.7;
    text-decoration: underline; /* ホバー時だけ下線を出す */
}

/* 詳細ページの中身全体を右に寄せる */
.single-main .post-item {
    margin-left: 30px;   /* 左側の余白（数字はお好みで） */
    margin-right: 30px;  /* 右側も同じだけ空けるとバランスが良いです */
}


/* スマホで見るときに余白が広すぎないように調整 */
@media (max-width: 768px) {
    .single-main .post-item {
        margin-left: 15px;
        margin-right: 15px;
    }
}
/* BLOG投稿内容 終 */

/* ボタン：最前面へ。z-indexを極端に上げる */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999 !important; /* 何があっても一番上 */
  pointer-events: auto !important; /* クリックを強制的に有効化 */
  cursor: pointer !important;
  width: 44px;
  height: 44px;
}

.js-slider-top-prev, .js-slider-bottom-prev { left: 5px !important; }
.js-slider-top-next, .js-slider-bottom-next { right: 5px !important; }

/* スライダー本体：ボタンの下に下げる */
.swiper {
  z-index: 1;
  overflow: hidden; 
}


@media screen and (max-width: 768px) {
    /* ロゴをメニュー背景より手前に出す */
    .company-logo {
        position: relative !important;
        z-index: 2000000 !important; /* メニュー(999999)より大きい数字 */
    }

    /* ハンバーガーボタンも手前に出す */
    .hamburger {
        z-index: 2000000 !important;
    }

    /* メニュー背景 */
    .nav {
        z-index: 999999 !important;
    }
}

@media screen and (max-width: 768px) {
    /* 通常時の設定は共有いただいた通りでOK */    

    /* メニューが開いたとき（.active）の動き */
    .hamburger.active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    .hamburger.active span:nth-child(2) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }
}

.swiper-wrapper {
  /* 等速で動かすために必須 */
  transition-timing-function: linear !important;
}


/* ==========================================
   1. PC版（769px以上）の設定
   ========================================== */
@media screen and (min-width: 769px) {
    .nav-list {
        display: flex !important;
        /* PCは横並びなら row、縦並びなら column */
        flex-direction: row !important; 
    }

    /* CONTACTを前に出す (小さい数字ほど前) */
    .nav-item:has(a[href*="/contact/"]) {
        order: 1 !important;
    }

    /* SNSを後に回す */
    .sns-item {
        order: 2 !important;
    }
}

/* ==========================================
   2. スマホ版（768px以下）の設定
   ========================================== */
@media screen and (max-width: 768px) {
    .nav-list {
        display: flex !important;
        flex-direction: column !important; /* スマホは縦並び */
    }

    /* SNSを上に表示 */
    .sns-item {
        order: 1 !important;
    }

    /* CONTACTを下に表示 */
    .nav-item:has(a[href*="/contact/"]) {
        order: 2 !important;
    }
}/* 親要素（動画とボタンを包む箱） */
.video-container {
    position: relative; /* これがボタン配置の基準点になります */
    width: 100%;
}

.page-work .card.is-hidden {
  display: none !important;
}
.page-blog .card.is-hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}