/* =========================================================
   共通ヘッダー（全ページ共通部品）

   ★公開中のサイト（https://aircon.co.jp/）の実CSSをそのまま土台にしている。
     独自に作り直さないこと。数値を変えるとトップページとズレる。
     出典：https://aircon.co.jp/assets/css/style.css?v=13

   ナビだけ、新デザイン（header-pc.svg）の10項目・「｜」区切りに変更。
   ========================================================= */

.aahd{
  --c-blue:      #2F56AB;   /* ブランド青（上部バー・ナビ・業務用ボタン） */
  --c-red:       #CA2927;   /* CTA赤（ルームエアコンボタン） */
  --c-tel:       #F14826;   /* 電話番号 */
  --c-yellow:    #EBF053;   /* ボタン内の強調文字（黄） */
  --c-badge:     #43649E;   /* 通常/夏季バッジ */
  --c-black-bar: #0E0F0E;   /* 黒帯（電話1本で〜） */
  --c-white:     #FFFFFF;
  --c-text:      #333333;
  --container:   1280px;
  --h-topbar: 47px;
  --h-header: 124px;
  --h-nav:    61px;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
.aahd *{box-sizing:border-box;}
.aahd a{text-decoration:none;color:inherit;}
.aahd p{margin:0;}
.aahd ul{list-style:none;margin:0;padding:0;}

/* 中央寄せコンテナ */
.aahd .container{
  width:var(--container);
  max-width:100%;
  margin-inline:auto;
  padding-inline:20px;
}

/* --- 上部バー --- */
.aahd .topbar{
  background:var(--c-blue);
  color:var(--c-white);
  height:var(--h-topbar);
  display:flex;
  align-items:center;
}
.aahd .topbar .container{text-align:center;position:relative;}
/* 切り替え表示（固定文 → お知らせ最新 → お知らせ2件目 → 固定文…） */
.aahd .topbar__slider{position:relative;height:var(--h-topbar);}
.aahd .topbar__item{
  position:absolute;
  left:0;right:0;top:0;
  height:var(--h-topbar);
  display:flex;align-items:center;justify-content:center;
  color:var(--c-white);
  opacity:0;
  transition:opacity .45s;
  pointer-events:none;
  white-space:nowrap;
}
.aahd .topbar__item.is-active{opacity:1;pointer-events:auto;}

/* =========================================================
   ★2026/08/31 クライアント指示
   お知らせをナビのすぐ上に置き、左から右へ流す。
   1件ずつを「白い角丸の枠」に入れて、その枠ごと流れるようにした。
   ・青帯の中で白い枠が動くので、記事の区切りが一目で分かる
   ・同じ内容を2組ならべ、半分ぶん動かして切れ目なく流している
   ========================================================= */
.aahd .topbar--flow{
  /* ★2026/08/31 クライアント指示：青帯をやめ、うすいグレーの地に。
     墨5%相当（#F2F2F2）。その上を白い角丸の枠が流れる */
  background:#F2F2F2;
  border-top:1px solid #E5E5E5;
  border-bottom:1px solid #E5E5E5;
  height:44px;
  display:flex;
  align-items:center;
  overflow:hidden;
  position:relative;
}
.aahd .topbar--flow .topbar__track{
  display:flex;
  width:max-content;
  align-items:center;
  animation:aahd-newsflow 21s linear infinite;   /* ★2026/08/31 スピードを倍に（42s→21s） */
}
.aahd .topbar--flow:hover .topbar__track{
  animation-play-state:paused;   /* マウスを乗せると止まる。読みたい人が読めるように */
}
.aahd .topbar--flow .topbar__seq{
  display:flex;
  align-items:center;
  gap:14px;
  padding-right:14px;
  white-space:nowrap;
}
/* 1件＝白い角丸の枠 */
.aahd .topbar--flow .topbar__item{
  position:static;
  left:auto;right:auto;top:auto;
  opacity:1;
  pointer-events:auto;
  transition:none;
  display:inline-flex;
  align-items:center;
  height:30px;
  background:#fff;              /* 白い角丸の枠。グレーの地の上を流れる */
  border-radius:15px;
  padding:0 16px;
  color:#333;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.06);   /* 地から少し浮かせて枠を見やすく */
}
.aahd .topbar--flow a.topbar__item:hover{background:#F7FAFF;}
/* 枠の中の「お知らせ」ラベルと記事名 */
.aahd .topbar--flow .topbar__label{
  flex:none;
  color:#0954A5;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  padding-right:10px;
  margin-right:10px;
  border-right:1px solid #c8d3e0;
  background:none;
}
.aahd .topbar--flow .topbar__news{
  color:#333;
  font-size:12.5px;
  font-weight:500;
}
.aahd .topbar--flow a.topbar__item:hover .topbar__news{text-decoration:underline;}
/* 枠が区切りになったので、文字の「/」は出さない */
.aahd .topbar--flow .topbar__sep{display:none;}

@keyframes aahd-newsflow{
  from{ transform:translateX(-50%); }
  to  { transform:translateX(0); }
}
/* 動きを減らす設定にしている人には、流さずに止めて見せる */
@media (prefers-reduced-motion:reduce){
  .aahd .topbar--flow .topbar__track{animation:none;}
}
.aahd .topbar__text{
  font-size:17px;
  font-weight:900;
  letter-spacing:.36em;
}
/* お知らせ行 */
.aahd .topbar__news{
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:1240px;
}
.aahd .topbar__label{
  font-weight:900;
  letter-spacing:.14em;
  margin-right:14px;
  padding-right:14px;
  border-right:1px solid rgba(255,255,255,.5);
}
.aahd a.topbar__item:hover .topbar__news{text-decoration:underline;}
.aahd .topbar__num{
  font-size:30px;
  font-weight:900;
  letter-spacing:.02em;
  margin:0 4px;
}

/* --- ヘッダー本体（白） --- */
.aahd .header-main{background:var(--c-white);}
.aahd .header-inner{
  min-height:var(--h-header);
  display:flex;
  align-items:center;
  gap:0;
  padding-block:10px;
  padding-inline:0;
}

/* ブランド（ロゴ＋許可番号） */
.aahd .brand{flex:0 0 auto;}
.aahd .brand__logo{width:241.5px;height:auto;display:block;}
.aahd .brand__permit{
  font-size:12px;
  color:var(--c-text);
  margin-top:4px;
  white-space:nowrap;
}

/* 連絡先（電話） */
.aahd .contact{flex:0 0 auto;margin-left:32px;}
.aahd .contact__tel{display:flex;align-items:center;gap:8px;}
.aahd .contact__freedial{width:31px;}
.aahd .contact__num{
  font-size:42px;
  font-weight:900;
  color:var(--c-tel);
  line-height:1;
  letter-spacing:-.005em;
}
.aahd .contact__note{
  margin-top:4px;
  background:var(--c-black-bar);
  color:var(--c-white);
  font-size:13px;
  text-align:center;
  padding:4px 6px;
  border-radius:3px;
  white-space:nowrap;
}
.aahd .contact__note strong{
  font-size:16px;
  font-weight:900;
  letter-spacing:.25em;
  margin-left:4px;
}

/* 営業時間 */
.aahd .hours{
  flex:0 0 auto;
  margin-left:13px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:11px;
  color:var(--c-text);
  line-height:1.57;
}
.aahd .hours__row{display:flex;align-items:center;gap:8px;}
.aahd .hours__badge{
  flex:0 0 auto;
  background:var(--c-badge);
  color:var(--c-white);
  font-size:13px;
  font-weight:700;
  padding:3px 6px;
  border-radius:4px;
  line-height:1;
  white-space:nowrap;
}

/* ヘッダーCTAボタン */
.aahd .head-btns{
  flex:0 0 auto;
  margin-left:24px;
  display:flex;
  gap:11px;
}
.aahd .head-btn{
  flex:0 0 225px;
  width:225px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 24px 13px 10px;
  border-radius:8px;
  color:var(--c-white);
  font-size:13px;
  font-weight:900;
  line-height:1.3;
  position:relative;
  box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.aahd .head-btn::after{
  content:"";
  position:absolute;
  right:11px;
  top:50%;
  width:8px;
  height:8px;
  border-top:2px solid var(--c-white);
  border-right:2px solid var(--c-white);
  transform:translateY(-50%) rotate(45deg);
}
.aahd .head-btn--red{background:var(--c-red);}
.aahd .head-btn--blue{background:var(--c-blue);}
.aahd .head-btn__icon{flex:0 0 auto;width:31px;}
.aahd .head-btn__icon--ceiling{width:34px;}
.aahd .head-btn__hl{color:var(--c-yellow);}

/* --- グローバルナビ ---
   公開中サイトと同じ「セル幅固定＋左に区切り線」方式。
   セル幅は新デザイン（header-pc.png）の区切り線の位置を実測して算出した。 */
.aahd .gnav{background:var(--c-blue);}
.aahd .gnav__inner{padding-inline:0;}
.aahd .gnav__list{
  display:flex;
  width:100%;
  height:var(--h-nav);
}
.aahd .gnav__item{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  border-left:1px solid rgba(255,255,255,.4);
}
.aahd .gnav__item:first-child{border-left:none;}
/* 実測したセル幅（合計1276px＝コンテナ幅1280に収まる） */
/* ★2026/08/31 「お問合せ」を削除。空いた81pxを残り9項目に9pxずつ均等配分した。
   もとの文字量ごとの幅の比率は保ったまま、合計は1276pxのまま（＝右端がぴったり揃う） */
.aahd .gnav__item:nth-child(1) {width: 77px;}  /* トップ           68 + 9 */
.aahd .gnav__item:nth-child(2) {width:197px;}  /* サービス特徴（管理） 188 + 9 */
.aahd .gnav__item:nth-child(3) {width:175px;}  /* 選ばれる10の理由   166 + 9 */
.aahd .gnav__item:nth-child(4) {width:137px;}  /* 料金について       128 + 9 */
.aahd .gnav__item:nth-child(5) {width:122px;}  /* お客様の声        113 + 9 */
.aahd .gnav__item:nth-child(6) {width:169px;}  /* 10年保証について   160 + 9 */
.aahd .gnav__item:nth-child(7) {width:138px;}  /* ご利用の流れ      129 + 9 */
.aahd .gnav__item:nth-child(8) {width:168px;}  /* お支払いについて   159 + 9 */
.aahd .gnav__item:nth-child(9) {width: 93px;}  /* ブログ            84 + 9 */
.aahd .gnav__item a{
  color:var(--c-white);
  font-size:15px;
  font-weight:700;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  transition:background .2s;
}
.aahd .gnav__item a:hover{background:rgba(255,255,255,.12);}

/* =========================================================
   スマホ（768px以下）
   ★Illustrator「header-sp.svg」「menu-sp.svg」（375px幅）を
     1ミリもずらさず再現する。すべて vw（画面幅に対する比率）で指定。
     画面幅が変わっても比率は崩れず、左右の余白も同じまま。
   ========================================================= */
@media (max-width:768px){

  .aahd{position:relative;min-width:0;}
  .aahd .topbar,.aahd .header-main,.aahd .gnav{display:none;}

  /* --- ヘッダー本体 --- */
  .aahd__sp{
    display:block;
    position:relative;
    height:17.117vw;   /* ★お知らせ帯を外に出したぶん(8.765vw)を引いた */
    background:#0054AC;
    overflow:hidden;
  }

  /* ★2026/09/01 和田さん指示：PC版と同じデザインにそろえる。
     うすいグレーの地（#F2F2F2）の上を、白い角丸の枠が左から右へ流れる。
     青いヘッダーの外に出して、独立した帯にした（PC版の .topbar--flow と同じ作り） */
  .aahd__spnews{
    position:relative;
    width:100%;
    height:11.733vw;             /* PC版と同じ44px */
    background:#F2F2F2;
    border-top:1px solid #E5E5E5;
    border-bottom:1px solid #E5E5E5;
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  .aahd__spnews-item{
    position:absolute;
    left:8.000vw;right:1.600vw;top:0;
    height:4.926vw;
    display:flex;align-items:center;
    color:#4f4c4b;
    opacity:0;transition:opacity .45s;pointer-events:none;white-space:nowrap;
  }
  .aahd__spnews-item.is-active{opacity:1;pointer-events:auto;}

  /* ★2026/08/31 スマホのお知らせも「左から右へ流す」表示に。
     スマホはメニューがハンバーガーの中なので、白帯の位置は変えず動きだけ変更 */
  .aahd__spnews-track{
    display:flex; width:max-content; align-items:center; height:100%;
    animation:aahd-spnewsflow 13s linear infinite;  /* ★2026/08/31 スピードを倍に（26s→13s） */
  }
  .aahd__spnews:hover .aahd__spnews-track{animation-play-state:paused;}
  .aahd__spnews-seq{
    display:flex; align-items:center;
    gap:8vw; padding-right:8vw; white-space:nowrap;
  }
  /* 切り替え表示用の「重ねて隠す」指定を打ち消し、横に並ぶようにする */
  /* 白い角丸の枠。グレーの地の上を流れる（PC版 .topbar--flow .topbar__item と同じ） */
  .aahd__spnews-track .aahd__spnews-item{
    position:static; left:auto; right:auto; top:auto;
    opacity:1; pointer-events:auto; transition:none;
    display:inline-flex; align-items:center;
    height:8.000vw;                 /* PC版と同じ30px */
    background:#fff;
    border-radius:4.000vw;          /* PC版と同じ15px */
    padding:0 4.267vw;              /* PC版と同じ16px */
    white-space:nowrap;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
    color:#333;
  }
  @keyframes aahd-spnewsflow{
    from{ transform:translateX(-50%); }
    to  { transform:translateX(0); }
  }
  @media (prefers-reduced-motion:reduce){ .aahd__spnews-track{animation:none;} }
  /* ★2026/09/01 PC版（.topbar--flow .topbar__label）と同じ見え方にそろえた。
     PC 12px / padding 10px / 区切り線 #c8d3e0 → スマホは 375px 基準の vw に換算 */
  .aahd__spnews-label{
    flex:none;
    color:#0954A5;
    font-size:3.200vw;          /* 12px */
    font-weight:900;
    letter-spacing:.02em;
    padding-right:2.667vw;      /* 10px */
    margin-right:2.667vw;       /* 10px */
    border-right:1px solid #c8d3e0;
    background:none;
  }
  /* ★PC版（.topbar--flow .topbar__news）と同じ 12.5px / 太さ500 */
  .aahd__spnews-txt{
    color:#333;
    font-size:3.333vw;          /* 12.5px */
    font-weight:500;
    letter-spacing:.01em;
    overflow:hidden;text-overflow:ellipsis;
  }

  /* ロゴ（青地なので白文字版） */
  .aahd__splogo{
    position:absolute;
    left:3.253vw;top:4.974vw;
    width:28.507vw;
  }
  .aahd__splogo img{display:block;width:100%;height:auto;}

  /* 「エアコン専門会社」「40,000件管理の実績」 */
  .aahd__spcopy{
    position:absolute;
    left:34.533vw;
    top:3.134vw;
    color:#fff;
    white-space:nowrap;
    margin:0;
  }
  .aahd__spcopy b{
    display:block;
    font-size:3.733vw;font-weight:900;letter-spacing:.045em;
    line-height:6.013vw;
    padding-left:0.240vw;
  }
  .aahd__spcopy span{
    display:block;
    font-size:3.733vw;font-weight:900;letter-spacing:.06em;
    line-height:6.013vw;
  }
  .aahd__spcopy em{
    font-style:normal;
    font-size:4.601vw;font-weight:900;letter-spacing:.08em;
    margin-right:0.800vw;
  }

  /* menuボタン */
  .aahd__spmenubtn{
    position:absolute;
    left:85.270vw;top:2.554vw;
    width:11.524vw;height:11.524vw;
    background:#fff;cursor:pointer;display:block;
  }
  .aahd__spmenubtn i{
    position:absolute;
    left:1.879vw;
    width:7.505vw;height:0.517vw;
    background:#0054AC;display:block;
  }
  .aahd__spmenubtn i:nth-child(1){top:2.718vw;}
  .aahd__spmenubtn i:nth-child(2){top:4.130vw;}
  .aahd__spmenubtn i:nth-child(3){top:5.542vw;}
  .aahd__spmenubtn span{
    position:absolute;
    left:0;right:0;top:6.640vw;
    text-align:center;
    font-size:2.993vw;font-weight:500;letter-spacing:.04em;
    color:#0054AC;line-height:1;
  }

  /* --- スライドメニュー（menu-sp.svg どおり） --- */
  .aahd__spmenu{
    display:none;
    position:fixed;left:0;top:0;right:0;bottom:0;
    z-index:9999;background:#0054AC;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .aahd__spmenu-inner{
    position:relative;
    width:100%;
    min-height:160.000vw;
  }
  .aahd__spclose{
    position:absolute;
    left:84.096vw;top:2.441vw;
    width:13.843vw;height:13.843vw;
    background:#fff;cursor:pointer;display:block;
  }
  .aahd__spclose::before,.aahd__spclose::after{
    content:"";position:absolute;
    left:3.600vw;top:6.773vw;
    width:6.667vw;height:0.517vw;
    background:#0054AC;
  }
  .aahd__spclose::before{transform:rotate(45deg);}
  .aahd__spclose::after{transform:rotate(-45deg);}

  .aahd__spnav{position:absolute;left:0;top:0;width:100%;}
  .aahd__spnav a{
    position:absolute;
    left:29.200vw;
    color:#fff;
    font-size:3.733vw;font-weight:900;letter-spacing:.11em;
    line-height:1;display:block;
    padding-left:4.133vw;
  }
  .aahd__spnav a::before{
    content:"";position:absolute;
    left:0;top:0.533vw;
    width:1.333vw;height:1.333vw;
    border-top:0.400vw solid #fff;
    border-right:0.400vw solid #fff;
    transform:rotate(45deg);
  }
  .aahd__spnav a:nth-child(1){top:15.305vw;}
  .aahd__spnav a:nth-child(2){top:22.478vw;}
  .aahd__spnav a:nth-child(3){top:29.651vw;}
  .aahd__spnav a:nth-child(4){top:36.825vw;}
  .aahd__spnav a:nth-child(5){top:43.998vw;}
  .aahd__spnav a:nth-child(6){top:51.171vw;}
  .aahd__spnav a:nth-child(7){top:58.345vw;}
  .aahd__spnav a:nth-child(8){top:65.518vw;}
  .aahd__spnav a:nth-child(9){top:72.691vw;}
  .aahd__spnav a:nth-child(10){top:79.865vw;}

  /* メニュー内の電話 */
  .aahd__sptel{
    position:absolute;
    left:20.021vw;top:89.467vw;
    display:flex;align-items:center;
  }
  .aahd__sptel img{width:8.267vw;height:auto;display:block;}   /* PCヘッダーと同じ出し方（つぶさない） */
  .aahd__sptel span{
    margin-left:2.336vw;
    font-size:6.959vw;font-weight:900;color:#fff;line-height:1;
    letter-spacing:-.005em;
  }
  .aahd__sphours{position:absolute;left:20.559vw;top:98.168vw;}
  .aahd__sphrow{display:flex;align-items:center;margin-bottom:1.891vw;}
  .aahd__sphbadge{
    flex:none;
    width:6.182vw;height:5.994vw;
    border:1px solid #fff;border-radius:0.465vw;
    color:#fff;font-size:2.302vw;font-weight:900;
    display:flex;align-items:center;justify-content:center;
  }
  .aahd__sphtxt{
    margin-left:1.493vw;
    font-size:2.458vw;font-weight:400;color:#fff;
    line-height:3.813vw;letter-spacing:.01em;
  }

  /* メニュー内の2ボタン（menu-sp.svg どおり） */
  .aahd__spbtn{
    position:absolute;
    left:21.038vw;
    width:54.561vw;height:14.228vw;
    border-radius:1.449vw;
    display:block;color:#fff;
    box-shadow:0 0.800vw 0 rgba(0,0,0,.25);
  }
  .aahd__spbtn--room {top:117.101vw;background:#d72100;}
  .aahd__spbtn--gyomu{top:134.973vw;background:#0054AC;border:1px solid #fff;}
  .aahd__spbtn img{position:absolute;}
  /* アイコン（SVG実測） */
  .aahd__spbtn--room  img{left:2.480vw;top:5.173vw;width:7.387vw;height:4.933vw;}
  .aahd__spbtn--gyomu img{left:2.427vw;top:4.613vw;width:8.400vw;height:6.053vw;}
  /* テキストは「アイコンの右端〜矢印の左端」の中央に置く（和田さん指示） */
  .aahd__spbtn span{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:3.266vw;font-weight:900;
    line-height:4.413vw;
    white-space:nowrap;
    text-align:center;
    display:block;
    color:#fff;          /* 白抜き（.aahd a の color:inherit に負けないよう明示） */
  }
  .aahd__spbtn--room  span{left:9.867vw;width:41.147vw;}
  .aahd__spbtn--gyomu span{left:10.827vw;width:39.813vw;}
  .aahd__spbtn em{font-style:normal;color:#fdf65f;}
  /* 右端の「＞」（SVG実測 4.4×8.8） */
  .aahd__spbtn::after{
    content:"";position:absolute;
    width:1.173vw;height:2.347vw;
    background:url("cta/arrow.svg") no-repeat center / 100% 100%;
  }
  .aahd__spbtn--room::after {left:51.013vw;top:6.400vw;}
  .aahd__spbtn--gyomu::after{left:50.640vw;top:6.187vw;}

  .aahd__sptoggle{display:none;}
  .aahd__sptoggle:checked ~ .aahd__spmenu{display:block;}
}

@media (min-width:769px){
  /* ★2026/09/01 お知らせ帯を青ヘッダーの外へ出したので、
     パソコンで隠すリストに .aahd__spnews を足した */
  .aahd__sp,.aahd__spmenu,.aahd__sptoggle,.aahd__spnews{display:none;}
}

/* =========================================================
   ★2026/09/01 和田さん指示：ヘッダーをスクロール追従（画面上部に固定）
   ・パソコン … スクロールしたら「メニュー」だけを上に残す
                （青帯「40,000件管理の実績」・お知らせ・ロゴ/電話は流れて消える）
   ・スマホ   … スクロールしたら「ロゴ＋menuボタン」の帯だけを上に残す
   仕組み：ヘッダーを position:sticky で画面上部に貼り付け、
           少しスクロールしたら上の段を隠す（.is-scrolled）
   ========================================================= */

/* ヘッダーを画面の上に貼り付ける（position:sticky）。
   そのうえで、少しスクロールしたら上の段（青帯・お知らせ・ロゴ帯）を隠す。
   ★高さの数字を使わないので、原稿が変わってもズレない。
   ページに <script> を1つ入れて、スクロールしたら .is-scrolled を付ける。 */
.aahd{
  position:sticky;
  top:0;
  z-index:100;
}

/* --- パソコン：スクロールしたら「ロゴ・フリーダイヤル・注文ボタン」＋「メニュー」を残す --- */
/* ★2026/09/01 和田さん指示：メニューだけでなく、ロゴ・フリーダイヤルの帯も一緒に追従させる。
   消えるのは「40,000件管理の実績」の青帯と、お知らせの帯だけ。 */
@media (min-width:769px){
  .aahd.is-scrolled .topbar,
  .aahd.is-scrolled .topbar--flow{
    display:none;
  }
}

/* --- スマホ：スクロールしたらロゴ＋menuの帯だけ残す --- */
@media (max-width:768px){
  .aahd.is-scrolled .aahd__spnews{
    display:none;
  }
  /* スライドメニューは、固定した帯より前に出す */
  .aahd__spmenu{z-index:200;}
}