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

   ★公開中のサイト（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;}
.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に収まる） */
.aahd .gnav__item:nth-child(1) {width: 68px;}  /* トップ */
.aahd .gnav__item:nth-child(2) {width:188px;}  /* サービス特徴（管理） */
.aahd .gnav__item:nth-child(3) {width:166px;}  /* 選ばれる10の理由 */
.aahd .gnav__item:nth-child(4) {width:128px;}  /* 料金について */
.aahd .gnav__item:nth-child(5) {width:113px;}  /* お客様の声 */
.aahd .gnav__item:nth-child(6) {width:160px;}  /* 10年保証について */
.aahd .gnav__item:nth-child(7) {width:129px;}  /* ご利用の流れ */
.aahd .gnav__item:nth-child(8) {width:159px;}  /* お支払いについて */
.aahd .gnav__item:nth-child(9) {width: 84px;}  /* ブログ */
.aahd .gnav__item:nth-child(10){width: 81px;}  /* お問合せ */
.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:25.882vw;
    background:#0054AC;
    overflow:hidden;
  }

  /* お知らせの白帯 */
  .aahd__spnews{
    position:absolute;
    left:6.829vw;
    top:3.839vw;
    width:87.681vw;
    height:4.926vw;
    background:#fff;
    border-radius:2.463vw;
    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;}
  .aahd__spnews-label{
    flex:none;
    font-size:3.286vw;font-weight:900;letter-spacing:.02em;
    padding-right:2.133vw;margin-right:2.133vw;
    border-right:1px solid #b9b6b4;
  }
  .aahd__spnews-txt{
    font-size:2.988vw;font-weight:900;letter-spacing:.01em;
    overflow:hidden;text-overflow:ellipsis;
  }

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

  /* 「エアコン専門会社」「40,000件管理の実績」 */
  .aahd__spcopy{
    position:absolute;
    left:34.533vw;
    top:11.899vw;
    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:11.319vw;
    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){
  .aahd__sp,.aahd__spmenu,.aahd__sptoggle{display:none;}
}