@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
*/

/* ページID42限定：トップタイトルエリアの画像位置調整（上からトリミング） */
.page-id-42 #top_title_area .l-topTitleArea__img,
.page-id-42 #top_title_area .c-filterLayer__img {
  object-position: top center !important; /* 中央ではなく上基準 */
  object-fit: cover !important;
}

/* H3（横線付き）のうち、h3-subcolor だけ左側をサブカラーにする */
.post_content h3.wp-block-heading.h3-subcolor::before {
  background: repeating-linear-gradient(
    90deg,
    #BD1C21 0%,              /* 左側：サブカラー赤 */
    #BD1C21 29.3%,
    rgba(150,150,150,.2) 29.3%,  /* 右側：グレーはそのまま */
    rgba(150,150,150,.2) 100%
  ) !important;
}


/* 背景白 */
.steps {
  background: #fff;
}


/* 下の太いライン（SWELLは ::before / ::after を使うことが多いので両方叩く） */
.wp-block-heading.is-style-section_ttl.h3-subcolor::before,
.wp-block-heading.is-style-section_ttl.h3-subcolor::after {
  background-color: #BD1C21 !important;
  border-color: #BD1C21 !important;
}


/* SWELLボタン：赤テキスト用クラス */
.btn-red-text a {
  color: #BD1C21 !important; /* テキスト色を赤に */
}

.btn-red-text a:hover {
  color: #fff !important; /* ホバー時：白文字 */
}

/* サブカラー赤（#BD1C21）のSWELLボタン */
.btn-red .swell-block-button__link,
.btn-red .wp-block-button__link {
  background-color: #BD1C21 !important;  /* 背景をサブカラー赤に */
  color: #fff !important;               /* テキストを白に */
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
}

/* hover時のスタイル */
.btn-red .swell-block-button__link:hover,
.btn-red .wp-block-button__link:hover {
  background-color: #a3181d !important;  /* 少し濃い赤で反応 */
  opacity: 0.95;
  transform: translateY(-1px);
}


/* タイトル・説明テキストの文字影 */
.alma-plaza-cta {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.c-gnav a[href$="/plaza/"] {
  background-color: #BD1C21;
  color: #fff !important;
  padding: 8px 16px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.c-gnav a[href$="/plaza/"]:hover {
  background-color: #a3181d;
  opacity: 0.9;
}

/* ヒーローテキスト全体の調整（共通） */
.hero-main,
.hero-sub {
  line-height: 1.4;
  position: relative;
  z-index: 2;
}

/* メインタイトル（大きく・黒にうっすら影） */
.hero-main {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.05em;
  margin-bottom: 0.4em;
  transition: text-shadow 0.3s ease;
}

/* サブタイトル（くっきり・プロフェッショナルトーン） */
.hero-sub {
  display: inline-block; /* ←これがポイント！ */
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 500;
  color: #BD1C21;
  background-color: #fff;
  padding: 0.1em 0.4em; /* 背景の余白 */
  letter-spacing: 0.03em;
  margin-top: 0.3em;
  line-height: 1.5;
}





/* フッター上余白消す */
.w-beforeFooter {
	margin-top:0!important;
}

/* 「お知らせ｜」をコードを変えずに左側へ挿入（横並び） */
.news-inline .p-postListWrap {
  display: flex;
  align-items: center;
  gap: 8px;                /* ラベルと記事タイトルの間隔 */
}

/* ラベルそのものを擬似要素で追加 */
.news-inline .p-postListWrap::before {
  content: "お知らせ｜";
  color: #BD1C21;          /* サブカラー */
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 1件表示のulを横並び用に崩さない（保険） */
.news-inline .p-postList.-type-simple {
  margin: 0;               /* 余白を詰める */
}
.news-inline .p-postList__item {
  padding: 0;              /* SWELLのデフォ余白をリセット（必要なら） */
}

/* loos/post-list simple の下線を確実に無効化する */
.news-inline .p-postList.-type-simple .p-postList__link {
  border-bottom: none !important;
  transition: none;
}

/* 横並び＆中央揃え、余白をリセット */
.news-inline .p-postListWrap{
  display:flex;
  align-items:center;     /* 縦位置を中央で揃える */
  gap:12px;
  flex-wrap:wrap;         /* スマホで折り返しても崩れない */
}

/* ラベル「お知らせ｜」側の行高をタイトルに合わせる */
.news-inline .p-postListWrap::before{
  line-height:1.4;        /* タイトルと同じくらいに */
  display:inline-block;
}

/* UL/LIまわりの余白を削る */
.news-inline .p-postList{-webkit-margin-before:0;margin-block-start:0; margin:0;}
.news-inline .p-postList__item{padding:0; border:0}

/* タイトルの上下マージン＆行高を調整して中央に */
.news-inline .p-postList__title{
  margin:0;               /* h2のデフォルト余白を消す */
  line-height:1.4;
  font-weight:700;
}

/* （保険）タイトルの外側も中央寄せ */
.news-inline .p-postList__body{
  display:flex;
  align-items:center;
}

/* SNS ラッパー：フレックスで横並び。折り返し・中央寄せ */
.contents-sns{
  width:100%;
  max-width:1200px;
  margin:0 auto 50px;
  font-size:13px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

}

/* 各アイテム */
.contents-sns > div{
  /* float/個別widthは不要 */
  text-align:center;
  width:180px;             /* お好みで 160–200px に調整 */
}

/* クリック領域を整える */
.contents-sns a{
  color:#231815;
  text-decoration:none;
  display:block;
}

/* すべてのSNSアイコンの見た目を揃える */
.contents-sns img{
  display:block;
  width:72px;              /* アイコン枠の大きさ（統一） */
  height:72px;
  object-fit:contain;      /* 縦横比を保って内側に収める */
  margin:0 auto 12px;
}

/* 画像下テキスト */
.contents-sns .sns_text{
  line-height:1.6;
}

/* スマホ幅での調整（2列〜3列） */
@media (max-width: 768px){
  .contents-sns{ gap:28px 32px; }
  .contents-sns > div{ width:150px; }
  .contents-sns img{ width:60px; height:60px; }
}

/* ========== Footer ========== */
.alma-footer{
  color:#fff;
  padding:40px 24px 12px;
  display:flex;
  gap:40px;
  align-items:flex-start;
}

/* 幅配分：左42% / 他で58% */
.alma-footer .af-col{flex:1 1 0;}
.alma-footer .af-left{flex-basis:42%;}
.alma-footer .af-mid-left{flex-basis:20%;}
.alma-footer .af-mid-right{flex-basis:18%;}
.alma-footer .af-right{flex-basis:20%;}

/* 左カラム内：ロゴ＋SNS（右寄せ）／キャラ（右） */
.af-brandRow{
  display:flex;
  align-items:flex-end;
  gap:22px;
}
.af-brandStack{
  min-width:260px;
  margin-left:auto;       /* ← 右側へ寄せる決め手 */
  text-align:right;       /* ← ロゴとSNSを右揃え */
}
.af-logo{
  display: block;
  margin: 0 0 12px auto;   /* ←左マージンを auto にして右寄せ */
  width: 220px;            /* 既存サイズがあればそのままでOK */
  max-width: 100%;
}


/* SNS */
.af-sns{
  display:flex;
  gap:14px;
  align-items:center;
  list-style:none;
  padding:0;
  margin:2px 0 0;
  justify-content:flex-end; /* 右寄せ */
}
.af-sns img{
  width:33px; height:33px; display:block;
}
.af-sns a{display:inline-flex;}

/* 右側のキャラクター */
.af-mascot-right{
  width:170px;
  max-width:26vw;
  height:auto;
  display:block;
  margin:0;
}

/* コピーライト：左寄せ＋行間つめる */
.af-copy{
  margin-top:10px;
  opacity:.86;
  line-height:1;
  text-align:left;        /* ← 左揃え */
}
.af-copy small{font-size:12px;}

/* -- フッター内 H4 見出しの整列＆テキスト下だけの赤線 -- */
/* 「>」の右側テキスト開始位置と同じだけ左インデントを付与 */
.alma-footer h4.af-head{
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  text-align: left;
  margin: 0 0 .8em !important;

  /* ▼ここがポイント：リストの li と同じ 1.1em を使って左を揃える */
  padding-left: 1.1em;
  padding-bottom: .35em;

  position: relative;
  line-height: 1.2;
}

/* 赤線は「テキスト幅だけ」。左の 1.1em インデント分は除外する */
.alma-footer h4.af-head::after{
  content: "";
  position: absolute;
  left: 1.1em;                      /* インデント分だけ右にずらす */
  bottom: 0;
  width: calc(100% - 1.1em);        /* テキスト幅 = 見出し幅 - インデント */
  height: 2px;
  background-color: #BD1C21;
  border-radius: 1px;
  pointer-events: none;
}



.af-menu{list-style:none;margin:0;padding:0;display:grid;gap:1px;text-align:left;}
.af-menu li{position:relative;padding-left:1.1em;margin:0;line-height:1.7;}
.af-menu li::before{
  content: ">";
  position:absolute;left:0;top:0;line-height:1.7;
  color:#ffffff;opacity:.86;
}
.af-menu a{color:rgba(255,255,255,.92);text-decoration:none;font-size: 0.9rem;}
.af-menu a:hover{opacity:.75;text-decoration:underline;}

/* SWELL標準コピーライト非表示 */
.copyright {
  display:none;
}


/* =======================
   スマホ専用フッター
======================= */
.af-footer-sp {
  text-align: center;
  color: #fff;
  background-color: #0f192f; /* PC版と同系の背景を想定 */
  padding: 32px 20px 24px;
}

/* ロゴ */
.af-footer-sp .af-logo-sp {
  width: 200px;
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto 18px;
}

/* SNSアイコン */
.af-footer-sp .af-sns-sp {
  display: flex;
  justify-content: center;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.af-footer-sp .af-sns-sp img {
  width: 33px;
  height: 33px;
  display: block;
  border-radius: 4px;
}

/* キャラクター */
.af-footer-sp .af-mascot-sp {
  width: 120px;
  max-width: 45%;
  height: auto;
  margin: 0 auto 16px;
  display: block;
}

/* コピーライト */
.af-footer-sp .af-copy-sp {
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.9;
}

/* PC時は非表示 */
@media screen and (min-width: 768px) {
  .af-footer-sp {
    display: none;
  }
}

/* スマホだけ表示（念押し） */
@media screen and (max-width: 767px) {
  .alma-footer {
    display: none !important;
  }
  .af-footer-sp {
    display: block;
  }
}

/* ===== スマホメニューにも「足場PLAZA」強調を適用 ===== */
@media (max-width: 767px){
  #sp_menu a[href*="plaza.alma-rent.jp"],
  #drawer-menu a[href*="plaza.alma-rent.jp"],
  #sp_nav a[href*="plaza.alma-rent.jp"]{
    background-color: #BD1C21 !important;
    color: #fff !important;
    padding: 12px 16px;
    font-weight: 600;
    display: block;
    text-align: center;
    border-radius: 4px;
    margin: 12px 16px;
    transition: all .3s ease;
  }

  #sp_menu a[href*="plaza.alma-rent.jp"]:hover,
  #drawer-menu a[href*="plaza.alma-rent.jp"]:hover,
  #sp_nav a[href*="plaza.alma-rent.jp"]:hover{
    background-color: #a3181d !important;
    color: #fff !important;
    opacity: .9;
  }

  #sp_menu a[href*="plaza.alma-rent.jp"]::before,
  #sp_menu a[href*="plaza.alma-rent.jp"]::after,
  #drawer-menu a[href*="plaza.alma-rent.jp"]::before,
  #drawer-menu a[href*="plaza.alma-rent.jp"]::after,
  #sp_nav a[href*="plaza.alma-rent.jp"]::before,
  #sp_nav a[href*="plaza.alma-rent.jp"]::after{
    content: none !important;
    display: none !important;
  }
}

/* 指定クラスのテーブルで、1列目だけ折り返し禁止 */
.table-nowrap td:first-child,
.table-nowrap th:first-child {
  white-space: nowrap;
}

/* =========================================
   Alma History  — compact & equivalent CSS
   ========================================= */

/* Theme tokens */
:root{
  --alma-navy:#0e2235;
  --alma-red:#BD1C21;
  --alma-gray:#e6e9ee;
}

/* コンテナ：幅を少し広め＋左右padding軽減（SWELL上書き） */
.alma-history{margin:3rem auto;}
.alma-history.l-container{
  max-width:1180px;
  padding:0 10px !important;
}

/* 2カラム：左テキスト / 右写真（PCは7:3） */
.alma-history__inner{
  display:grid;
  grid-template-columns:70% 30%;
  gap:50px;
  align-items:start;
}

/* 見出し */
.ah-head{
  margin:0 0 20px;
  font-weight:700;
  font-size:clamp(18px,2.2vw,22px);
  letter-spacing:.02em;
  display:flex;
  gap:.75em;
  align-items:center;
}
.ah-head__en{font-size:.9em;opacity:.6;font-weight:600}

/* タイムライン本体 */
.ah-list{
  position:relative;
  margin:0;
  padding-left:26px;           /* 縦ライン＋菱形の余白 */
  list-style:none;             /* 連番を消す */
  display:grid;
  row-gap:26px;
}
/* 縦ライン（全体） */
.ah-list::before{
  content:"";
  position:absolute;
  left:12px; top:6px; bottom:6px;
  width:2px;
  background:linear-gradient(var(--alma-navy),var(--alma-navy));
  opacity:.15;
}

/* 各アイテム */
.ah-item{position:relative}
/* ♦ マーカー（赤・影なし） */
.ah-item::before{
  content:"";
  position:absolute;
  left:-17px; top:.25em;
  width:12px; height:12px;
  background:var(--alma-red);
  border:2px solid #fff;
  transform:rotate(45deg);
  box-shadow:none;
}

/* 年と本文 */
.ah-year{
  color:var(--alma-navy);
  font-weight:700;
  font-size:clamp(18px,2.4vw,22px);
  line-height:1.3;
  margin:0 0 .25em;
  padding-left:5px;
}
.ah-text{margin:0;color:#222;line-height:1.9}

/* 右側写真 */
.ah-right{justify-self:end; max-width:480px}
.ah-photos{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.ah-photos li{border:1px solid var(--alma-gray);background:#fff}
.ah-photos img{display:block;width:100%;height:auto;border-radius:4px}

/* 画面が広い時は右カラム幅を固定ぎみに */
@media (min-width:1280px){
  .alma-history__inner{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
}

/* スマホ：縦積み＆余白微調整 */
@media (max-width:900px){
  .alma-history__inner{grid-template-columns:1fr; gap:28px}
  .ah-left{order:1}
  .ah-right{order:2; max-width:100%}
  .ah-list{padding-left:22px}
}

/* === Rental Compare (table) ================================== */
.rental-compare { margin: 40px auto; }

/* 見出し */
.cmp-heading {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 16px;
}

.cmp-subheading {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  margin: 28px 0 10px;
}

/* 横スクロール保護（スマホで崩さない） */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* テーブル本体 */
.cmp-table {
  width: 100%;
  min-width: 720px;            /* スマホはスクロール、PCは見やすく */
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e6e9ee;
}
.cmp-table th,
.cmp-table td {
  padding: 14px 16px;
  line-height: 1.7;
  vertical-align: top;
  border-bottom: 1px solid #e6e9ee;
}
.cmp-table thead th {
  background: #f6f8fb;
  font-weight: 700;
  text-align: left;
}
.cmp-table tbody th[scope="row"] {
  width: 180px;               /* 1列目（項目名） */
  white-space: nowrap;
  color: #0e2235;
}

/* メモ／注記 */
.cmp-note {
  margin: 10px 0 0;
  font-size: 0.92rem;
  color: #666;
}

/* 箇条書き */
.cmp-bullets {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.9;
}

/* SWELLのコンテナ内でも窮屈にならないよう少しだけ広げる（任意） */
.rental-compare.l-container {
  max-width: 1100px;          /* サイト幅に合わせて微調整OK */
}

/* スマホ微調整 */
@media (max-width: 600px) {
  .cmp-table th, .cmp-table td { padding: 12px; }
  .cmp-table tbody th[scope="row"] { width: 150px; }
}

/************************************
** contact form7 カスタマイズ
************************************/
.haveto{
font-size:11px;
padding:2px 5px;
background:#FF0000;/*必須 色の変更はこちら*/
color:#fff;
margin:0px 5px;
position:relative;
bottom:2px;
}

/* 全体：1行ごとに余白 */
.c-contact-form .c-contact-form__row {
  margin-bottom: 1.4em;  /* 行間のゆとり */
}

/* ラベルと入力の基本 */
.c-contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3em;
}

/* テキスト系入力を横いっぱいに */
.c-contact-form input[type="text"],
.c-contact-form input[type="email"],
.c-contact-form input[type="tel"],
.c-contact-form select,
.c-contact-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 複数行テキスト（備考）は高さも少し大きめに */
.c-contact-form textarea {
  min-height: 180px;
}

/* お問い合わせフォーム送信ボタン（メインカラー設定） */
.wpcf7-submit {
  width: 100%;
  background-color: #0e2235;  /* メインカラー */
  color: #fff;
  padding: 12px 0;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .3s ease;
  border-radius: 4px;
}

/* ホバー時（少しだけ明るく） */
.wpcf7-submit:hover {
  background-color: #BD1C21; /* メインカラーを少し薄く */
}


/* チェックボックスを少し大きくする */
.c-contact-form__check input[type="checkbox"] {
  transform: scale(1.3);   /* ←ここでサイズ調整（1.2〜1.4推奨） */
  margin-right: 8px;
  cursor: pointer;
}

/* ラベルとの縦位置をきれいに揃える */
.c-contact-form__check {
  display: flex;
  align-items: center;
  gap: 6px;
}


/* ===== Alma 全国拠点マップ（リンクオーバーレイ方式） ===== */
.alma-map-pc {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 2rem;
}
.alma-map-pc img {
  display: block;
  width: 100%;
  height: auto;
}

/* クリック範囲の共通スタイル */
.map-link-pc {
  position: absolute;
  display: block;
  cursor: pointer;
}

/* === 各拠点リンク座標（1200×630のcoordsを%に変換） === */

/* #01 仙台機材センター (832,293)-(1033,336) */
.map-sendai-center {
  left: 69.3%;
  top: 46.5%;
  width: 16.7%;
  height: 6.8%;
}

/* #02 福島機材センター (777,410)-(983,454) */
.map-fukushima-center {
  left: 64.8%;
  top: 65.2%;
  width: 17.2%;
  height: 7.0%;
}

/* #03 埼玉機材センター (646,521)-(861,567) */
.map-saitama-center {
  left: 53.8%;
  top: 82.7%;
  width: 17.9%;
  height: 7.3%;
}

/* #04 愛知機材センター (400,252)-(607,301) */
.map-aichi-center {
  left: 33.3%;
  top: 40.0%;
  width: 17.3%;
  height: 7.8%;
}

/* #05 大阪機材センター (204,316)-(412,362) */
.map-osaka-center {
  left: 17.0%;
  top: 50.2%;
  width: 17.3%;
  height: 7.3%;
}

/* #06 富谷営業所 (826,238)-(952,284) */
.map-tomiya-office {
  left: 68.8%;
  top: 37.8%;
  width: 10.5%;
  height: 7.3%;
}

/* #07 福島営業所 (817,352)-(943,395) */
.map-fukushima-office {
  left: 68.1%;
  top: 55.9%;
  width: 10.5%;
  height: 6.8%;
}

/* #08 本宮事業所 (731,472)-(858,514) */
.map-motomiya-office {
  left: 60.9%;
  top: 75.0%;
  width: 10.6%;
  height: 6.7%;
}


/* ===== SP：全国拠点マップ ===== */
.alma-map-sp {
  position: relative;
  max-width: 550px;
  margin: 0 auto 2rem;
}
.alma-map-sp img {
  display: block;
  width: 100%;
  height: auto;
}

.map-link-sp {
  position: absolute;
  display: block;
  cursor: pointer;
  /* デバッグ用  
  background-color: rgba(255, 0, 0, .2);
*/
}

/* 元画像 550×450 の coords を%に変換 */

/* #01 仙台機材センター (390,180)-(547,214) */
.map-sp-sendai-center {
  left: 70.9%;
  top: 40.0%;
  width: 28.5%;
  height: 7.6%;
}

/* #02 福島機材センター (384,262)-(546,296) */
.map-sp-fukushima-center {
  left: 69.8%;
  top: 58.2%;
  width: 29.5%;
  height: 7.6%;
}

/* #03 埼玉機材センター (312,355)-(469,390) */
.map-sp-saitama-center {
  left: 56.7%;
  top: 78.9%;
  width: 28.5%;
  height: 7.8%;
}

/* #04 愛知機材センター (79,179)-(238,216) */
.map-sp-aichi-center {
  left: 14.4%;
  top: 39.8%;
  width: 28.9%;
  height: 8.2%;
}

/* #05 大阪機材センター (3,243)-(157,278) */
.map-sp-osaka-center {
  left: 0.5%;
  top: 54.0%;
  width: 28.0%;
  height: 7.8%;
}

/* #06 富谷営業所 (378,135)-(479,175) */
.map-sp-tomiya-office {
  left: 68.7%;
  top: 31.1%;
  width: 18.4%;
  height: 8.9%;
}

/* #07 福島営業所 (420,222)-(519,249) */
.map-sp-fukushima-office {
  left: 76.4%;
  top: 49.3%;
  width: 18.0%;
  height: 6.0%;
}

/* #08 本宮事業所 (368,309)-(467,342) */
.map-sp-motomiya-office {
  left: 66.9%;
  top: 68.7%;
  width: 18.0%;
  height: 7.3%;
}




/* ルート案内：番号とテキストの横並び */
.route-step {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;            /* 固定サイズで潰れ防止 */
  height: 48px;
  border: 2px solid #0E2235;  /* メインカラー */
  color: #0E2235;
  font-size: 1.15rem;     /* 数字を少し強調 */
  font-weight: 600;
  margin-right: 12px;
  flex-shrink: 0;         /* 圧縮されないように固定 */
}



/* 説明テキスト */
.step-text {
  line-height: 1.6;
}

/* アクセスステップ間の矢印 */
.access-step {
  position: relative;
  margin-bottom: 3rem; /* ボックス間に余白 */
}

/* 最後の要素は矢印なし */
.access-step:last-child {
  margin-bottom: 0;
}

/* 矢印のデザイン */
.access-step:not(:last-child)::after {
  content: "▼";               /* 矢印文字 */
  font-size: 1.6rem;
  color: #BD1C21; /* サブカラー */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* --------------------------------------
   ALMA 3サービス帯メニュー
   ヘッダー直下 / 非追従
-------------------------------------- */

/* ALMA service band */
.alma-service-band-wrap {
  width: 100%;
  position: relative;
  z-index: 10;
}

.alma-service-band {
  display: flex;
  width: 100%;
  margin: 0;
  background: #101D39;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.alma-service-band__item {
  flex: 1 1 33.333%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 14px 16px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
  border-right: 1px solid rgba(255,255,255,.14);
  transition: background-color .2s ease, color .2s ease;
}

.alma-service-band__item:last-child {
  border-right: none;
}

.alma-service-band__item:hover,
.alma-service-band__item:focus {
  color: #fff;
  background: #1a2a54;
  text-decoration: none;
}

.alma-service-band__item--sales {
  background: #BD1C21;
}

.alma-service-band__item--sales:hover,
.alma-service-band__item--sales:focus {
  background: #a3171b;
}

.alma-service-band__label {
  display: inline-block;
  font-size: 16px;
  letter-spacing: .02em;
}

@media (min-width: 960px) {
  .alma-service-band__item {
    min-height: 68px;
    padding: 16px 20px;
  }
  .alma-service-band__label {
    font-size: 18px;
  }
}

@media (max-width: 959px) {
  .alma-service-band__item {
    min-height: 58px;
    padding: 12px 10px;
  }
  .alma-service-band__label {
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .alma-service-band {
    flex-direction: column;
  }
  .alma-service-band__item {
    min-height: 52px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .alma-service-band__item:last-child {
    border-bottom: none;
  }
}

.alma-service-band__label--sp {
  display: none;
}

.alma-service-band__label--pc {
  display: inline-block;
}

@media (max-width: 767px) {
  .alma-service-band {
    flex-direction: row;
  }

  .alma-service-band__item {
    min-height: 48px;
    padding: 10px 6px;
    border-right: 1px solid rgba(255,255,255,.14);
    border-bottom: none;
  }

  .alma-service-band__item:last-child {
    border-right: none;
  }

  .alma-service-band__label--pc {
    display: none;
  }

  .alma-service-band__label--sp {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 0;
    white-space: nowrap;
  }
}

/* --------------------------------------
   スマホ：ハンバーガーメニューをサービス帯より前面へ
-------------------------------------- */
@media (max-width: 767px) {
  .p-spMenu,
  .p-spMenu__inner,
  .p-spMenu__body {
    z-index: 9999 !important;
  }

  .alma-service-band-wrap {
    z-index: 1;
  }
}

/* お問い合わせページ：専用フォームボタン */
.contact-form-buttons .swell-block-button {
  max-width: 680px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.contact-form-buttons .swell-block-button__link {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .contact-form-buttons .swell-block-button {
    max-width: 100%;
  }

  .contact-form-buttons .swell-block-button__link {
    min-height: 48px;
    padding-left: 14px;
    padding-right: 14px;
  }
}