/* ==========================================================================
   スマホのメニュー（common.css のあとに読み込み、既存のメニューの指定を上書きする）
   押せる範囲が狭い（30×22px）、閉じるボタンが無い、文字が小さく区切りがそろわない、
   電話の導線が無い、を改善。開閉はチェックボックス（#nav-input）のまま。
   キーボード操作と Esc は js/nav.js
   ========================================================================== */
.nav-tel,
.nav-open__text{
  display:none;
}

/* 右下の「上に戻る」ボタン: 600px 以上スクロールすると、ふわっと出る（切り替えは js/nav.js）。
   見た目はサイト内の矢印の丸とそろえる（濃いグレーの丸に白い矢印、ホバーで青） */
.to-top{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:900;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#333 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15.97" height="27.99" viewBox="0 0 15.97 27.99"><path fill="%23fff" d="M6.45 1.61v.01L0 8.39l1.53 1.61 5.46-5.73v23.72h2V4.28l5.45 5.72 1.53-1.61L7.98 0z"/></svg>') center / 10px auto no-repeat;
  box-shadow:0 4px 14px rgba(0, 0, 0, .18);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .3s cubic-bezier(.22, .61, .36, 1), transform .3s cubic-bezier(.22, .61, .36, 1), visibility .3s, background-color .2s;
}

.to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}

.to-top:hover,
.to-top:focus-visible{
  background-color:#004EA2;
}

.to-top:focus-visible{
  outline:2px solid #004EA2;
  outline-offset:3px;
}

@media screen and (max-width:1199px) {
  /* ヘッダー: 高さ 60px で画面上部に固定し、スクロールしてもメニューボタンを押せるようにする。
     以前は高さ 78px の中でロゴが上寄り・ボタンが下寄りでそろっていなかったので、上下中央にそろえる */
  .header{
    position:sticky;
    top:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:60px;
    padding:0 6px 0 12px;
    box-sizing:border-box;
    background:#fff;
    box-shadow:0 1px 0 rgba(0, 0, 0, .08);
  }

  .header__left{
    position:relative;
  }

  /* 「愛媛の不動産賃貸…」の小さい文字は、ロゴ画像の上の余白に重ねて置く（位置はロゴ基準） */
  .header__title{
    top:-2px;
    left:34px;
    margin:0;
  }

  .header__logo img{
    display:block;
  }

  .header-logo-menu{
    margin-top:0;
  }

  /* 固定したヘッダーにページ内リンクの飛び先（アクセスマップなど）が隠れないようにする */
  [id]{
    scroll-margin-top:72px;
  }

  #nav-open .nav-open__text{
    display:block;
  }

  /* メニューボタン: 48px 四方。開くと × になり、画面右上に固定されて閉じるボタンを兼ねる */
  #nav-open{
    position:relative;
    z-index:10000;
    display:block;
    width:48px;
    height:48px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  #nav-open .nav-open__icon,
  #nav-open .nav-open__icon::before,
  #nav-open .nav-open__icon::after{
    position:absolute;
    left:12px;
    width:24px;
    height:2px;
    border-radius:2px;
    background:#333;
    content:"";
    transition:transform .3s cubic-bezier(.22, .61, .36, 1), top .3s cubic-bezier(.22, .61, .36, 1), background-color .2s;
  }

  #nav-open .nav-open__icon{
    top:14px;
  }

  #nav-open .nav-open__icon::before{
    top:-7px;
    left:0;
    bottom:auto;
  }

  #nav-open .nav-open__icon::after{
    top:7px;
    left:0;
    bottom:auto;
  }

  #nav-open .nav-open__text{
    position:absolute;
    top:30px;
    left:0;
    width:100%;
    height:auto;
    background:none;
    border-radius:0;
    color:#333;
    font-size:1rem;
    letter-spacing:.04em;
    line-height:1.4;
    text-align:center;
  }

  #nav-open .nav-open__text::before,
  #nav-open .nav-open__text::after{
    content:none;
  }

  /* 開いたときはヘッダーと同じ位置（上 6px・右 6px）に固定し、×の位置が動かないようにする */
  #nav-input:checked ~ #nav-open{
    position:fixed;
    top:6px;
    right:6px;
  }

  #nav-input:checked ~ #nav-open .nav-open__icon{
    background:transparent;
  }

  #nav-input:checked ~ #nav-open .nav-open__icon::before{
    top:0;
    transform:rotate(45deg);
  }

  #nav-input:checked ~ #nav-open .nav-open__icon::after{
    top:0;
    transform:rotate(-45deg);
  }

  #nav-input:checked ~ #nav-open .nav-open__text{
    font-size:0;
  }

  /* 古い三本線の指定（#nav-open span::after）が残らないよう、位置・大きさ・背景を戻す */
  #nav-input:checked ~ #nav-open .nav-open__text::after{
    content:"閉じる";
    position:static;
    display:block;
    width:auto;
    height:auto;
    background:none;
    border-radius:0;
    font-size:1rem;
    white-space:nowrap;
  }

  /* 背景の暗幕（フェードで出す） */
  #nav-close{
    display:block;
    visibility:hidden;
    background:rgba(8, 28, 52, .55);
    opacity:0;
    transition:opacity .3s cubic-bezier(.22, .61, .36, 1), visibility .3s;
  }

  #nav-input:checked ~ #nav-close{
    visibility:visible;
    opacity:1;
  }

  /* メニュー本体: 右から滑り出す */
  #nav-content{
    display:flex;
    flex-direction:column;
    right:0;
    width:86%;
    max-width:360px;
    padding:76px 0 28px;
    box-sizing:border-box;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s;
  }

  #nav-input:checked ~ #nav-content{
    transform:none;
    box-shadow:-8px 0 30px rgba(0, 0, 0, .15);
  }

  /* 開いている間は、後ろのページをスクロールさせない */
  body:has(#nav-input:checked){
    overflow:hidden;
  }

  .header__menu{
    padding:0;
    margin:0;
    border-top:1px solid #eee;
  }

  .header__menu-item,
  .header__menu-item:last-of-type{
    margin:0;
  }

  .header__menu-item a,
  .header__menu-item:not(:last-of-type) a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:56px;
    padding:0 20px 0 24px;
    box-sizing:border-box;
    border-bottom:1px solid #eee;
    background:none;
    color:#222;
    font-size:1.7rem;
    font-weight:600;
  }

  .header__menu-item a:active{
    background:#f5f5f5;
  }

  /* 右端に区分の色の矢印の丸（賃貸はオレンジ、売買は青、それ以外は濃いグレー） */
  .header__menu-item a::after{
    content:"";
    flex:0 0 28px;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--icon, #333) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="27.99" height="15.97" viewBox="0 0 27.99 15.97"><path fill="%23fff" d="M26.38 6.45h-.01L19.6 0l-1.61 1.53 5.73 5.46H0v2h23.71l-5.72 5.45 1.61 1.53 8.39-7.98z"/></svg>') center / 1.1rem auto no-repeat;
  }

  /* 今いる区分: 左端に区分の色の線 */
  .header__menu-item a.is-current{
    background:#fafafa;
    box-shadow:inset 3px 0 0 var(--icon, #004EA2);
    color:var(--link, #222);
  }

  /* 電話の案内（メニューの一番下） */
  .nav-tel{
    display:block;
    margin:auto 24px 0;
    padding-top:28px;
    text-align:center;
  }

  .nav-tel__lead{
    margin:0 0 10px;
    color:#555;
    font-size:1.3rem;
  }

  .nav-tel__button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:54px;
    border-radius:27px;
    background:#00328E;
    color:#fff;
    font-size:2rem;
    font-weight:700;
    letter-spacing:.04em;
  }

  .nav-tel__button::before{
    content:"";
    width:20px;
    height:20px;
    background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z"/></svg>') center / contain no-repeat;
  }

  .nav-tel__button:active{
    background:#004EA2;
  }

  .nav-tel__hours{
    margin:10px 0 0;
    color:#555;
    font-size:1.2rem;
  }

  /* メイン画像・ページ上部の見出しは、固定ヘッダーのすぐ下から始める（10px の隙間を詰める） */
  .main-visual,
  .header-visual{
    margin-top:0;
  }

  /* フッターの電話案内: カードの左右に余白をとって幅を狭め、下にも余白をとる。
     「上に戻る」ボタンは写真の帯の下端に半分かかる位置に置き、カードとの間を 40px 空ける */
  .footer-contact{
    height:auto;
    padding:40px 20px 70px;
    box-sizing:border-box;
  }

  .footer-contact__left,
  .footer-contact__right{
    height:auto;
    padding:28px 16px;
    box-sizing:border-box;
  }

  .footer-contact__right{
    margin-top:12px;
  }

  .footer-contact__description{
    margin-top:12px;
  }

  .footer-contact__go-top{
    right:0;
    bottom:-100px;
  }
}

/* PC: 「上に戻る」ボタンを内容の右端の内側に置く。
   以前は右端より 80px 外にあり、画面幅 1200〜1319px で横にはみ出していた（カードとは上下に離れているので重ならない） */
@media screen and (min-width:1200px) {
  .footer-contact__go-top{
    right:0;
  }
}

@media screen and (max-width:1199px) {
  .to-top{
    right:16px;
    bottom:16px;
    width:44px;
    height:44px;
  }
}