/* リスト全体 */
.my-share-buttons{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:16px 0; padding:0; list-style:none;
}

/* 各ボタンの共通見た目 */
.my-share-buttons li a{
  display:flex; align-items:center; gap:5px;
  padding:0.6rem 1.2rem; border-radius:5px;
  font-size:1.2rem; font-weight:400;
  color:#fff; text-decoration:none;
  line-height:1; transition:filter .2s ease;
}
.my-share-buttons li a:hover{ filter:brightness(0.9); }

/* アイコンサイズを統一 */
.my-share-buttons i{ font-size:16px; }

/* ブランドカラー */
.my-share-buttons .share-li a{ background:#0a66c2; }   /* LinkedIn */
.my-share-buttons .share-x a{ background:#000000; }     /* X */
.my-share-buttons .share-facebook a{ background:#1877f2; } /* Facebook */
.my-share-buttons .share-mail a{ background:#EB4654; }  /* Email */
.my-share-buttons .share-whatsapp a{ background:#25D366; } /* WhatsApp */
.my-share-buttons .share-line a{ background:#06c755; }  /* LINE */

/* 丸ボタンっぽくしたい場合（任意） */
/* .my-share-buttons li a{ border-radius:999px; padding:8px 14px; } */

/* ── GUIDE BOOK セクション全体 ── */
.section-guidebook {
  padding: 40px 0 40px; /* 上 40px / 下 40px */
}

/* ── 見出し ── */
/* 直接の children の h2.heading.heading-main のみを対象に */
.section-guidebook > .heading.heading-main {
  max-width: 1200px;
  margin: 0 auto 8px;
  padding: 0 15px 0.4em;
  border-bottom: 1px solid #e0e0e0;
}

/* 3) ページネーションのドットをグレー／アクティブは黒に */
.swiper-carousel .swiper-pagination-bullet {
  background-color: #ccc !important;
  opacity: 1 !important;
}
.swiper-carousel .swiper-pagination-bullet-active {
  background-color: #000 !important;
}

/* section-guidebook.wider の下側パディングだけ消す */
.section-guidebook.wider {
  padding-bottom: 0 !important;
}


/* ── BLOG 最新記事 見出し ── */
.section-blog {
  position: relative;
  width: 100%;
  height: 160px;
  background-color: #000;     /* 黒背景 */
  display: flex;
  align-items: center;      /* 縦中央 */
  padding: 0 15px;
  box-sizing: border-box;
}

/* ── タイトルを左端に揃えたい場合は不要ですが、念のためリセット */
.section-blog .heading.heading-main {
  position: absolute;
  top: 0;
  left: 50%;                            /* 画面中央 */
  transform: translateX(-50%);          /* +margin:auto 相当 */
  max-width: 1200px;                    /* THE THOR のメインコンテナ幅 */
  width: 100%;                          /* transform の動きをスムーズに */
  padding: 0 15px;                      /* container と同じ左右余白 */
  line-height: 160px;                   /* 高さと揃えて上下中央 */
  margin: 0;                            /* デフォルト余白リセット */
  box-sizing: border-box;
}

/* アイコン */
.section-blog > .heading.heading-main > i {
  font-size: 1.4em;       /* KNOWLEDGE と同じ */
  margin-right: 0.5em;
  line-height: 1;         /* テキストと揃える */
}

/* span（「最新記事」）も白に */
.section-blog > .heading.heading-main > span {
  color: #fff;
  margin-left: 0.5em;
}

/* もし divider が入っているなら隠す */
.section-blog > .container.divider {
  display: none;
}



/* GUIDE BOOK フッター直上エリアの上下パディングをゼロに */
@media only screen and (min-width: 992px) {
  /* commonCtr__container を .commonCtr の中だけに限定して上書き */
  .wider .commonCtr .commonCtr__container {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
  }
}

/* ――― Our Solution セクション全体を横並びに ――― */
.commonCtr__container {
  display: flex !important;
  align-items: center;     /* 上下センター */
  justify-content: space-between;
  padding: 0 !important;   /* 上下の余白をリセット */
  gap: 2em;                /* 左右のすきま */
}

/* ――― 左側：テキストコンテンツ部 ――― */
.commonCtr__contents {
  flex: 1 1 40%;           /* 幅調整 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 !important;   /* 余白リセット */
}

/* ―― 見出しとロゴを横並びに ―― */
.commonCtr__contents .heading-commonCtr {
  display: flex;
  align-items: center;
  margin: 0 0 0.4em !important; /* 見出しボトムだけ余白 */
  padding: 0;
  font-size: 3.6rem !important;    /* テキストを大きく */
  font-weight: bold;
  color: #fff;
}

/* ―― ロゴを疑似要素で追加 ―― */
.commonCtr__contents .heading-commonCtr::before {
  content: "";
  display: inline-block;
  width: 160px !important;         /* ロゴ幅を96pxに */
  height: 80px !important;        /* ロゴ高さを96pxに */
  margin-right: 0.75em !important;/* テキストとの間隔を調整 */
  background-size: contain;       /* ロゴを枠いっぱいに */
  background: url("/wp-content/uploads/2025/06/Emily_Assistant_W.png") no-repeat center/contain;
}

/* ―― 本文マージンリセット ―― */
.commonCtr__contents .phrase-bottom {
  margin: 0 0 1.5em !important;  /* 下だけ余白 */
  color: #fff;
  line-height: 1.5;
}

/* ―― ボタン群を縦並び、すきま調整 ―― */
.commonCtr__contents .btn {
  width: auto;
  margin: 0 0 1em;       /* 下部にだけ余白 */
}
.commonCtr__contents .btn + .btn {
  margin-top: 0.5em;     /* 2つめのボタンとのすきま */
}

/* ――― 右側：画像部 ――― */
.commonCtr__image {
  flex: 1 1 55%;
  padding: 0 !important;
}
.commonCtr__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ―― スマホ等で縦積みに ―― */
@media (max-width: 768px) {
  .commonCtr__container {
    flex-direction: column;
    gap: 1.5em;
  }
  .commonCtr__contents,
  .commonCtr__image {
    flex: none;
    width: 100%;
  }
}

/* フッターの概要テキストを大きくする */
.phrase-bottom.u-white {
  font-size: 1.5rem !important; /* 18px相当。お好みで調整 */
  line-height:1.7 !important;    /* 行間も整える場合 */
}

/* ───────────────────────
   フッター CTA のボタン
──────────────────────── */
/* ── ボタン群を縦並び・左寄せに ── */
.btn-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;        /* ボタン間の縦間隔 */
  margin-top: 1.5rem; /* 上のテキストとの間隔 */
}

/* ボタン共通 */
.btn-group .btn {
  margin: 0;        /* 親のセンター寄せを打ち消し */
}

.btn-group .btn__link {
  display: inline-block;
  min-width: 300px;    /* 横幅を統一 */
  padding: 1em 1.5em;  /* 高さと余白 */
  font-size: 1.5rem; /* 読みやすい大きさ */
  font-weight: 600;
  text-align: center;
  line-height: 1;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}

/* 詳しくはこちら（ソリッド） */
.btn-group .btn-solid .btn__link-primary {
  background-color: #fff;
  color: #000;
  border: none;
}
.btn-group .btn-solid .btn__link-primary:hover {
  background-color: #f0f0f0;
}

/* お問い合わせ（アウトライン） */
.btn-group .btn-outline .btn__link-secondary {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.btn-group .btn-outline .btn__link-secondary:hover {
  background: rgba(255,255,255,0.1);
}

/* ──────────────────────────────────
   フッター：メニューの親項目を横並びに
────────────────────────────────── */
.bottomFooter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;           /* 親項目同士の間隔 */
  list-style: none;   /* デフォルトのリストマーカーを消す */
  margin: 0;
  padding: 0;
}

/* 親項目リンク */
.bottomFooter__list > li > a {
  color: #fff;
  text-decoration: none;
  font-size: 0.8em;
  font-weight: 600;
}

/* ──────────────────────────────────
   子メニュー（sub-menu）を常に展開
────────────────────────────────── */
.bottomFooter__list li .sub-menu {
  display: block !important;
  margin: 0.5em 0 0 1em; /* 親からのインデント */
  padding: 0;
  list-style: none;      /* マーカーを消す */
}

/* 子項目リストアイテム */
.bottomFooter__list li .sub-menu li {
  margin: 0.3em 0;        /* 子項目間の縦間隔 */
}

/* 子リンク */
.bottomFooter__list li .sub-menu li a {
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-size: 0.7em;
}

/* 「親に子あり」の矢印アイコンを非表示に */
.bottomFooter__list .menu-item-has-children > a::after {
  display: none !important;
}

/* ──────────────────────────────────
   フッターメニュー：子メニューを縦並びに強制
────────────────────────────────── */
/* 既存の flex レイアウトを解除 */
.bottomFooter__list li .sub-menu {
  display: block !important;
  margin: 0.5em 0 0 1em;    /* 親からのインデント */
  padding: 0;
  list-style: none;         /* マーカーを消す */
  flex: none !important;    /* flex 無効化 */
}

/* それぞれの子項目も縦並び */
.bottomFooter__list li .sub-menu li {
  display: block !important;
  margin: 0.3em 0;          /* 子項目間の間隔 */
}

/* 子リンクをブロックレベルに */
.bottomFooter__list li .sub-menu li a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 300;
  font-size: 0.7em;
}

/* ──────────────────────────────────
   フッター：サブメニューを常に展開し左揃えに
────────────────────────────────── */
.bottomFooter__navi .bottomFooter__list li .sub-menu {
  display: block !important;       /* 常に展開 */
  position: static;                /* 通常フロー */
  margin: 0.5em 0 0 0;             /* 親メニューとの隙間 */
  padding: 0;
  list-style: none;
  border-left: 2px solid rgba(255,255,255,0.5); /* ← 左端に縦線を一本 */
}

/* ──────────────────────────────────
   サブメニューのリストアイテム調整
────────────────────────────────── */
.bottomFooter__navi .bottomFooter__list li .sub-menu li {
  margin: 0.25em 0;
  padding: 0 0 0 1em;              /* 左余白を増やしてテキストを境界線から離す */
  text-align: left;                /* テキストは左揃え */
}

/* ──────────────────────────────────
   サブリンクの文字スタイル
────────────────────────────────── */
.bottomFooter__navi .bottomFooter__list li .sub-menu li a {
  color: #fff;
  font-size: 0.em;
  text-decoration: none;
  white-space: nowrap;
}

/* ──────────────────────────────────
   フッター下段：メニュー＋ダウンロードボタンを左右分散
────────────────────────────────── */
.bottomFooter .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* 狭い画面では折り返しOKに */
}

/* ナビゲーション部分は左寄せのまま */
.bottomFooter__navi {
  margin: 1em 0; /* 必要なら上下余白調整 */
}

/* ダウンロードボタン */
.footer-download {
  margin: 1em 0; /* 上下余白 */
}
.footer-download .btn-download {
  display: inline-block;
  background-color: #fff;
  color: #000;
  padding: 0.75em 1.5em;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.footer-download .btn-download:hover {
  background-color: #f0f0f0;
}

/* ──────────────────────────────────
   フッター：メニュー行とダウンロードボタンを上揃え＆同サイズ化
────────────────────────────────── */
.bottomFooter .container {
  display: flex;
  align-items: flex-start;      /* 上揃え */
  justify-content: space-between;
  flex-wrap: wrap;
}

/* メニュー群はこれまで通り左 */
.bottomFooter__navi {
  margin: 0;                    /* 上下余白があれば消す */
}

/* ダウンロードボタンコンテナを上揃えに */
.footer-download {
  margin: 0;                    /* 不要なマージンをリセット */
  align-self: flex-start;       /* flexbox の上端に揃える */
}

/* 「詳しくはこちら」と同じスタイルに */
.footer-download .btn-download {
  display: inline-block;
  background-color: #fff;
  color: #000;
  padding: 1em 1.5em;           /* 「詳しくはこちら」と同じ */
  font-size: 1.5rem;            /* 同じフォントサイズ */
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  min-width: 300px;             /* 同じ横幅 */
  text-align: center;
  transition: background-color .2s;
}

/* ホバーも同じ挙動 */
.footer-download .btn-download:hover {
  background-color: #f0f0f0;
}

/* ──────────────────────────────────
   フッター右上ボタン配置
────────────────────────────────── */
.bottomFooter .container {
  display: flex;
  justify-content: space-between; /* メニュー（左）とボタン（右）を両端揃え */
  align-items: flex-start;         /* 上揃え */
  flex-wrap: nowrap;               /* 折り返し禁止 */
}

/* メニュー部分の調整（必要なら幅指定など） */
.bottomFooter__navi {
  margin: 0;        /* 上下マージンをリセット */
  padding: 0;
}

/* ダウンロードボタン用コンテナ */
.footer-download {
  /* 右寄せは justify-content で担保しているのでマージン不要 */
  margin: 0;
  align-self: flex-start;  /* 上揃え */
}

/* ダウンロードボタンを「詳しくはこちら」ボタンと同一サイズに */
.footer-download .btn-download {
  display: inline-block;
  background-color: #fff;
  color: #000;
  padding: 1em 1.5em;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  min-width: 300px;
  text-align: center;
  transition: background-color 0.2s;
}

/* ホバー時の色変化も「詳しくはこちら」と同じ */
.footer-download .btn-download:hover {
  background-color: #f0f0f0;
}

/* 1) bottomFooter 内の要素をフレックスレイアウトに */
.bottomFooter .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* ナビ＋プロデューサー＋著作権を左右分散 */
  justify-content: space-between;
}

/* 2) 著作権部分は必ず一行下にくるように */
.bottomFooter__copyright {
  order: 99;        /* 後ろに回す */
  width: 100%;      /* 横幅いっぱい使う */
  margin-top: 1.5rem;  /* 上に余白を入れる */
  text-align: center;  /* 中央寄せ */
}

/* フッターのナビ部分のみ、header-only クラスのメニューを非表示 */
.bottomFooter__navi .header-only,
.bottomFooter__list .header-only {
  display: none !important;
}

/* ヘッダーのグローバルナビのCTAボタン風デザイン */
.globalNavi__list .header-only > a {
  display: inline-block;
  background: #f5f5f5;
  color: #000;
  border-radius: 2px;           /* 角丸をかなり狭く */
  box-shadow: 1px 2px 0 rgba(0,0,0,0.3); /* 添付のような影 */
  padding: 0.6em 1.5em;         /* 縦幅を狭く */
  font-size: 1.5rem;           /* 少し小さめ */
  font-weight: bold;
  min-width: 0;                 /* 必要に応じて調整 */
  text-align: center;
  white-space: nowrap;
  margin-left: 1.5em;
  transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s;
}
.globalNavi__list .cta-btn > a:hover {
  background: #f5f5f5;
  color: #222;
  border-color: #888;
  box-shadow: 1px 1.5px 0 rgba(0,0,0,0.25);
}

/* グローバルナビ・サブメニューの背景と文字色 */
.globalNavi__list > li > .sub-menu,
.globalNavi__list > li ul.sub-menu {
  background: #fff !important;      /* サブメニュー背景を白 */
  border: 1px solid #e0e0e0;        /* お好みで境界線 */
  box-shadow: 0 4px 24px rgba(0,0,0,0.07); /* 薄い影（任意） */
}

/* サブメニューの各リンク色を黒に */
.globalNavi__list > li > .sub-menu li > a,
.globalNavi__list > li ul.sub-menu li > a {
  color: #111 !important;           /* 文字色を黒 */
  background: #fff !important;      /* hover前も白背景 */
  font-weight: 400;
  transition: background 0.2s, color 0.2s;
}

/* サブメニューhover時 */
.globalNavi__list > li > .sub-menu li > a:hover,
.globalNavi__list > li ul.sub-menu li > a:hover {
  background: #f5f5f5 !important;   /* hover時薄いグレー */
  color: #111 !important;
  font-weight: 500;
}

/* ▼ グローバルナビ・サブメニュー：背景白、枠線なし、小さめフォント */
.globalNavi__list > li > .sub-menu,
.globalNavi__list > li ul.sub-menu {
  background: #fff !important;
  /* border: none !important;   ← もし枠線指定があればこちらで消す */
  border: 0 !important;
  box-shadow: none !important;  /* 影も不要なら消す */
  font-size: 0.93em !important; /* 少し小さめ */
}

/* ▼ サブメニュー内リンクの色/サイズ */
.globalNavi__list > li > .sub-menu li > a,
.globalNavi__list > li ul.sub-menu li > a {
  color: #111 !important;
  background: #fff !important;
  font-size: 0.93em !important; /* ここも少し小さめに */
  font-weight: 400;
  border-bottom: 1px solid #eee;/* もし下線が必要なら薄く */
}

/* hover時だけ背景を少しグレー */
.globalNavi__list > li > .sub-menu li > a:hover,
.globalNavi__list > li ul.sub-menu li > a:hover {
  background: #f5f5f5 !important;
}



@media (max-width: 767px) {
  .swiper-slide {
    margin-right: 5px !important;  /* ←記事同士の間隔を調整（デフォルトは15px程度が多い） */
    margin-left: 5px !important;   /* 必要なら左右両方 */
  }

@media (max-width: 767px) {
  .swiper-wrapper {
    display: flex;
    transition-property: transform;
    /* overflow: hidden; ←必要に応じて */
  }
    .swiper-slide {
    flex: 0 0 calc(100% / 1.5) !important;
    max-width: calc(100% / 1.5) !important;
    min-width: calc(100% / 1.5) !important;
    box-sizing: border-box;

  }
}

  
@media (max-width: 767px) {
  .heading-commonCtr.u-white {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 2.8rem !important;        /* テキストのフォントサイズ大きめに（お好みで調整） */
    line-height: 1.5 !important;
  }
  .heading-commonCtr.u-white::before {
    display: block !important;
    margin: 32px auto 12px auto !important; /* 上32px, 下12px余白（お好みで調整） */
  }
}

@media (max-width: 767px) {
  /* ボタングループ自体を中央寄せ */
  .btn-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 子要素を中央に */
    justify-content: center !important;
    width: 100% !important;
  }
  /* すべてのbtnに中央寄せ＋幅調整 */
  .btn-group .btn,
  .btn-group .btn-solid,
  .btn-group .btn-outline {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 90vw !important;       /* 画面幅の90%に */
    max-width: 400px !important;  /* 最大幅を制限（調整OK） */
    margin: 0 0 16px 0 !important;
    box-sizing: border-box !important;
  }
  /* 最後のボタン下だけ余白をなくす */
  .btn-group .btn:last-child {
    margin-bottom: 0 !important;
  }
  /* ボタン内リンクも中央寄せ */
  .btn-group .btn__link,
  .btn-group .btn__link-primary {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 767px) {
.commonCtr__bg {
  object-fit: cover !important;           /* コンテナ全体を埋める */
  object-position: 65% center !important;
  display: block !important;
}

@media (max-width: 767px) {
  .l-footerTop {
    position: relative !important;
    width: 100vw !important;
    min-height: unset !important;
    height: unset !important;
    background: none !important;
    overflow: visible !important;
  }
  .commonCtr__bg_mask {
    position: relative !important;
    width: 100vw !important;
    height: 50% !important;       /* ここを必ず指定、画像を出したい高さに調整 */
    min-height: 50% !important;
    background: none !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }
  .commonCtr__bg {
    display: block !important;
    width: 100vw !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 65% 50% !important;
    max-width: none !important;
    max-height: none !important;
    background: #000 !important;     /* 万が一画像が出ない場合赤で埋めるテスト */
  }
}

@media (max-width: 767px) {
  /* フッター全体を縦並びに */
  .bottomFooter__navi {
    width: 100%;
    display: block !important;
  }
  /* メニューリスト（横並びを解除） */
  .bottomFooter__list {
    display: block !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    margin-bottom: 16px !important;
  }
  /* メニューの親liをblockで1列に */
  .bottomFooter__list > li {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    float: none !important;
    text-align: left !important;
  }

@media (max-width: 767px) {
  /* フッターメニューの行間（li間のスペース調整） */
  .bottomFooter__list > li,
  .bottomFooter__list .sub-menu li {
    line-height: 2.5 !important;         /* 行間を広げる（2.1倍に調整） */
    margin-bottom: 8px !important;       /* 各行の下余白も追加 */
  }
  /* サブメニューも少し狭めたい場合は下だけ調整（例: 1.8など） */
  .bottomFooter__list .sub-menu li {
    line-height: 2 !important;
    margin-bottom: 6px !important;
  }

  /* ご案内資料ダウンロードボタンを中央寄せ */
  .footer-download,
  .footer-download > * {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    width: 90% !important;        /* 必要に応じて幅を調整（例: 90%） */
    max-width: 430px;             /* 横幅制限したい場合 */
    padding-bottom: 24px !important;
  }
}


  /* サブメニューもblock */
  .bottomFooter__list .sub-menu {
    padding-left: 16px !important;
    margin-bottom: 6px;
  }
  .bottomFooter__list .sub-menu li {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 1.1em !important;
  }
  /* メニュータイトルや見出し用liの装飾 */
  .bottomFooter__list > li > a,
  .bottomFooter__list > li.header-only-menu-item-type-custom {
    font-weight: bold !important;
    font-size: 1.1em !important;
    margin-bottom: 2px !important;
    display: block !important;
  }
}

@media (max-width: 767px) {
  .bottomFooter__list {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 24px !important;
  }
}


@media (max-width: 767px) {
  .footer-download {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
  }
  .footer-download .btn-download {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    min-height: 54px;      /* ボタンの高さはデザインに合わせて */
    padding: 12px 0 !important;
    line-height: 1.4 !important;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center !important;
    box-sizing: border-box;
  }
}


@media (max-width: 767px) {
  .header-cta {
    display: none !important;
  }
}

#download-section {
  position: relative;
  top: 100px;       
  padding-top: -100;  /* 必要に応じて調整 */
}

@media (max-width: 767px) {
  .thank-you-message {
    font-size: 24px !important;
  }
}

.pickup3__box {
  height: auto !important;
}

/* ピックアップ3セクションの下に余白を付ける */
.pickup3 {
  margin-bottom: 40px; /* お好みで調整 */
}