@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 以下追加css */

/* =========================
   基本レイアウト（共通）
   ========================= */

/* トップページ上部余白除去 */
.top #content { padding-top: 0; }

/* サブタイトル非表示 */
.c-pageTitle__subTitle { display: none; }

/* 固定ページタイトル中央寄せ */
.c-pageTitle,
.c-pageTitle__inner {
  float: none !important;
  text-align: center;
}

/* フッター直前の余白調整 */
.w-beforeFooter { margin-top: 0; }

/* =========================
   サイドCTA（共通の土台）
   ※ PC主体。SPでは非表示にする
   ========================= */
#fixed-sidebar-menu {
  display: flex;
  flex-direction: row;              /* 横並び */
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 10px;
  bottom: 10%;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.7);  /* 透過黒背景 */
  color: #fff;
  padding: 1.4em 0.7em;
  border-radius: 10px;
  writing-mode: horizontal-tb;      /* 横書き */
  font-size: 0.8em;
  text-align: center;
  line-height: 1.2;

  /* スライドイン初期状態（後述のキーフレームとセット） */
  transform: translateX(120%);
  opacity: 0;
  animation: cta-slide-in .6s cubic-bezier(.22,.61,.36,1) .25s forwards;
  will-change: transform, opacity;
}

#fixed-sidebar-menu .swell-block-button {
  width: 180px;                     /* ボタンの幅を固定 */
  text-align: center;
  margin: 10px;                     /* ボタン間の隙間 */
}

#fixed-sidebar-menu .swell-block-button__link {
  display: block;                   /* 高さ・幅を安定 */
  padding: 0.9em 0.9em;
  border-radius: 5px;
  font-size: 0.9em;
}

#fixed-sidebar-menu .swl-inline-icon {
  width: 12px;
  height: 18px;
  margin-right: 4px;
}

#fixed-sidebar-menu a {
  color: #fff;
  text-decoration: none;
}

/* =========================
   モバイル（〜959px）
   - フッターの固定メニュー表示
   - サイドCTAは非表示
   ========================= */
@media screen and (max-width: 959px) {
  body {
    padding-bottom: 60px; /* 固定メニューの高さに合わせて余白を設定 */
  }
  .p-fixBtnWrap {
    bottom: 6.5em; /* 上に戻るボタンの位置を上に */
  }

  /* 下部固定メニュー（SPで表示） */
  #fixed-bottom-menu {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.8); /* 0.8 = 不透明度80% */
    padding: .3em .3em;
  }
  #fixed-bottom-menu .swell-block-column {
    padding: .5em;
  }
  #fixed-bottom-menu .swell-block-button__link[data-has-icon] {
    padding: 1em 1em;
  }

  /* サイドCTAはSPで非表示（競合回避のためこちらで統一） */
  #fixed-sidebar-menu { display: none; }
}

/* =========================
   PC（960px〜）
   - 下固定メニューはPCで非表示
   - サイドCTAの位置調整／戻るボタンとの位置関係
   ========================= */
@media screen and (min-width: 960px) {
  /* PCでは下部固定メニューを隠す（サイドCTAは表示維持） */
  #fixed-bottom-menu { display: none; }

  /* サイドCTA：基準位置 */
  #fixed-sidebar-menu {
    right: 10px;
    bottom: 1%;                    /* 必要に応じて 10%〜15% で微調整可 */
    z-index: 99;
  }

  /* 上に戻るボタン：サイドCTAよりさらに上に配置 */
  .p-fixBtnWrap {
    right: 20px;                   /* かぶり防止で少し内側へ */
    bottom: calc(18% + 110px);     /* CTA底 + 110px 上（90〜140pxで調整） */
    z-index: 120;                  /* CTAより前面に */
  }
}

/* =========================
   低めのノートPC（960px〜 かつ 高さ〜720px）
   - %指定だと重なりやすいのでpx固定に切替
   ========================= */
@media screen and (min-width: 960px) and (max-height: 720px) {
  #fixed-sidebar-menu { bottom: 60px; }               /* CTAをpx指定に切替 */
  .p-fixBtnWrap       { bottom: calc(60px + 110px); } /* CTAよりさらに上 */
}

/* =========================
   モーション配慮（利用者が動きを減らす設定）
   ========================= */
@media (prefers-reduced-motion: reduce) {
  #fixed-sidebar-menu {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* =========================
   スライドインのキーフレーム
   ========================= */
@keyframes cta-slide-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}