@charset "utf-8";
/* ==========================================================================
   navfix.css  ―  ヘッダーのグローバルナビの調整

   ※既存CSS（reset/common/layout/page）は一切変更していません。
   　このファイルを後から読み込むことで、ナビの文字サイズ・余白と、
   　「費用シミュレーション」ボタンの見た目だけを上書きしています。
   　style.css の @import で読み込まれるので、全ページに効きます。

   ------------------------------------------------------------------
   2026年8月13日：ナビの構成を変えました
   ------------------------------------------------------------------
   【前】8項目
   　ホーム／サービスの特徴▼／費用シミュレーション／運営会社について▼／
   　よくある質問／コラム

   【いま】6項目
   　ホーム／サービスの特徴▼／お客様の声／相談員紹介／よくある質問／コラム
   　＋「費用シミュレーション」は右上のボタンへ

   ・「運営会社について」は廃止（私たちの想い→サービスの特徴の中へ、
   　 相談員紹介→単独のタブへ、会社案内→フッターにあるため削除）
   ・「お客様の声」はサービスの特徴の中から出して単独のタブへ

   ------------------------------------------------------------------
   折り返しについて
   ------------------------------------------------------------------
   これまでは、画面幅が足りないと「ホー／ム」「費用シミュレーショ／ン」の
   ように**項目の途中で改行**していました。読みにくいうえに、
   ヘッダーの高さも変わってしまいます。

   そこで次の2つを入れています。

   　① white-space: nowrap  … 項目の途中で改行させません
   　② 画面幅に応じて文字と余白を詰める（下のメディアクエリ）

   項目が8つ→6つに減ったこととあわせて、
   **幅1000pxほどまで1行に収まる**ようになりました
   （前は1215pxを下回ると崩れていました）。

   ・幅767px以下ではハンバーガーメニューに切り替わるため、
   　この指定は影響しません。
   ========================================================================== */

#navbar{
    font-size: 17px;
}
#navbar ul li{
    margin: 0 3px;
}

/* --------------------------------------------------------------------------
   タブの位置
   　ヘッダー右側のかたまり（.right）は、上段が電話番号とボタン、
   　下段がタブです。タブは左寄せだったため、右側に大きな余白ができて
   　左に寄って見えていました。
   　タブの並びを右端にそろえ、上段のボタンと右のラインを合わせています。
   -------------------------------------------------------------------------- */
#header .right{
    align-items: stretch;   /* タブの行を、右側のかたまりの幅いっぱいに広げます */
}
#navbar ul{
    /* 右端をボタンにそろえたうえで、その中で均等に配置します。
       max-width を外すと、大きな画面でタブの間隔が開きすぎます。 */
    justify-content: space-between;
    max-width: 820px;
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   タブの見た目
   　もとはマウスを乗せると少し薄くなるだけで、
   　どこを指しているのか分かりにくい状態でした。
   　うすいピンクの角丸を敷いて、文字色も変わるようにしています。
   -------------------------------------------------------------------------- */
#navbar ul > li > a{
    padding: 9px 15px;
    border-radius: 8px;
    font-weight: 500;
    white-space: nowrap;   /* ★項目の途中で改行させません。外さないでください */
    transition: background-color .2s, color .2s;
}
#navbar ul > li > a:hover{
    opacity: 1;            /* .op の「薄くする」効果を打ち消します */
    background: #fdf2f5;
    color: #c73b5d;
}
/* 「サービスの特徴」を開いているあいだも、同じ色を敷いておきます
   （下の6pxの帯は、開いているドロップダウンとのつながりを示す既存の指定です） */
#navbar ul > li > a.beshow.on{
    background: #fdf2f5;
    color: #c73b5d;
}
.beshow.on:before{
    border-radius: 0 0 8px 8px;
}

/* ドロップダウンの中身は、これまでどおりの大きさを保ちます
   （ナビ本体の font-size を下げた影響を受けないようにするため） */
.sub_nav ol a span{
    font-size: 16px;
}

/* ==========================================================================
   右上の「費用シミュレーション」ボタン
   　ナビから外して、「ご相談はこちら」の隣に置いたものです。
   　ピンクのボタン（ご相談）が主役なので、こちらは白地に枠線の控えめな形に
   　しています。高さは「ご相談はこちら」と同じ55pxでそろえています。
   ========================================================================== */
#header .hd_sim a,
#header.small .hd_sim a{
    display: flex;
    /* ★2026年8月14日：「1分でわかる！」を上に足したため、縦並びにしています。
       　横並び（row）に戻すと、1行に並んでボタンが大きく横に広がり、
       　1200px前後の画面でナビが2行に折り返します。 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-left: 14px;
    padding: 0 20px;
    height: 55px;
    border: 1px solid #e95377;
    border-radius: 28px;
    background: #fff;
    color: #cc2b5a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}
/* 「1分でわかる！」の1行目。
   　★色は指定していません。ボタンの文字色を受け継ぐので、
   　　マウスを乗せてピンクに反転したとき、この行も一緒に白くなります。
   　★ボタンの幅は下の行（費用シミュレーション）で決まります。
   　　この行を12pxより大きくすると、幅が広がってナビが折り返します。 */
#header .hd_sim .hs_sub,
#header.small .hd_sim .hs_sub{
    display: block;
    margin-bottom: 1px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}
#header .hd_sim a:hover,
#header.small .hd_sim a:hover{
    background: #e95377;
    color: #fff;
}
/* 電話番号・2つのボタンの高さをそろえます */
#header .conn,
#header.small .conn{
    align-items: center;
}

/* ==========================================================================
   画面幅が狭いときの詰め方
   　ここを削ると、1200px前後のノートPCでナビが2行になります。
   ========================================================================== */
@media screen and (max-width: 1279px){
    #header .header_inner{
        padding: 0 40px;
    }
    #navbar{
        font-size: 16px;
    }
    #navbar ul li{
        margin: 0 2px;
    }
    #navbar ul > li > a{
        padding: 8px 12px;
    }
    #header .hd_sim a,
    #header.small .hd_sim a{
        margin-left: 10px;
        padding: 0 16px;
        font-size: 14px;
    }
    #header .mail a,
    #header.small .mail a{
        margin-left: 10px;
        width: 170px;
        font-size: 16px;
    }
}
@media screen and (max-width: 1099px){
    #header .header_inner{
        padding: 0 20px;
    }
    /* 右側のかたまりは幅1200px固定でしたが、そのままだと
       画面が狭いときにロゴの上へはみ出します。
       中身に合わせて縮むようにしています。 */
    #header .right{
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
    }
    #header .hd_logo img{
        height: 92px;
    }
    #navbar{
        font-size: 15px;
    }
    #navbar ul li{
        margin: 0 1px;
    }
    #navbar ul > li > a{
        padding: 8px 10px;
    }
    #header .tel .txt{
        font-size: 12px;   /* 11px → 12px（2026年8月14日）*/
        white-space: nowrap;   /* 受付時間の行を折り返させません */
    }
    #header .tel img{
        max-width: 200px;
    }
    #header .hd_sim a,
    #header.small .hd_sim a{
        padding: 0 13px;
        height: 48px;
        font-size: 13px;
    }
    #header .mail a,
    #header.small .mail a{
        width: 148px;
        height: 48px;
        line-height: 48px;
        font-size: 15px;
    }
}
/* さらに狭いところでは、受付時間の行を隠して電話番号だけ残します。
   ここを消すと、ロゴと電話番号が重なります。 */
@media screen and (max-width: 949px){
    #navbar{
        font-size: 14px;
    }
    #header .hd_logo img{
        height: 80px;
    }
    #header .tel .txt{
        display: none;
    }
    #header .tel img{
        max-width: 175px;
    }
    #navbar ul li{
        margin: 0;
    }
    #navbar ul > li > a{
        padding: 7px 8px;
    }
    #header .hd_sim a,
    #header.small .hd_sim a{
        margin-left: 8px;
        padding: 0 11px;
        font-size: 12px;
    }
    #header .mail a,
    #header.small .mail a{
        margin-left: 8px;
        width: 130px;
        font-size: 14px;
    }
}

/* ==========================================================================
   スマートフォン（767px以下）
   　ハンバーガーメニューの中身です。
   　「費用シミュレーション」は、ナビの最後に置いています。
   ========================================================================== */
@media screen and (max-width: 767px){
    #header .hd_sim{
        display: none;   /* 狭いので、メニューの中のリンクに任せます */
    }
}

/* ==========================================================================
   スクロールしたときのヘッダー（#header.small）

   　※このかたまりは、必ずファイルのいちばん下に置いてください。
   　　上のメディアクエリより後ろにないと、指定が負けてしまいます。

   ------------------------------------------------------------------
   【2026年8月13日】横1列をやめ、「2段のまま小さくする」形にしました
   ------------------------------------------------------------------
   もとの作りでは、200pxスクロールすると右側が
   　　［ロゴ］［タブ］［電話番号］［ボタン］
   という**横1列**に変わっていました。しかしこれは横幅を大量に必要とするため、

   　・電話番号の「受付時間…」の行が、細い柱のように折り返す
   　・タブが左へあふれて、ロゴの上に重なる
   　・画面幅によってタブの間隔が変わってしまう

   といった崩れが起きていました。

   そこで、**通常のヘッダーと同じ2段のまま、全体を小さくする**形に変えています。
   　　上段：電話番号 ＋ 費用シミュレーション ＋ ご相談はこちら
   　　下段：タブ（右端をボタンにそろえ、間隔は固定）

   高さは 160px → 118px になります。並び方が変わらないので、
   **どの画面幅でもタブがロゴに重なりません。**
   タブの位置と間隔も、スクロール前後で変わりません。
   ========================================================================== */
#header.small .header_inner{
    height: 118px;
}
#header.small .hd_logo img{
    height: 78px;
}
/* ★ここが要です。layout.css で横1列（row）に変わる指定を打ち消し、
   通常のヘッダーと同じ2段のままにしています。 */
#header.small .right{
    flex-direction: column-reverse;
    align-items: stretch;
    width: 1200px;
}
#header.small .conn{
    align-self: flex-end;
    align-items: center;
    padding-top: 10px;
}
#header.small .tel .txt{
    display: none;       /* 受付時間の行は、小さいヘッダーでは出しません */
}
#header.small .tel img{
    max-width: 178px;
}
#header.small .hd_sim a{
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
}
#header.small .mail a{
    width: 152px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
}
/* タブは、通常のヘッダーと同じ「右端ぞろえ・間隔は固定」のままです */
#header.small #navbar{
    margin: 6px 0 0;
    font-size: 15px;
}
#header.small #navbar ul{
    max-width: 780px;
    margin-left: auto;
    justify-content: space-between;
}
#header.small #navbar ul > li{
    margin: 0 2px;
}
#header.small #navbar ul > li > a{
    margin: 0;           /* ★layout.css の margin: 0 10px を打ち消します */
    padding: 6px 10px;
}
@media screen and (max-width: 1099px){
    #header.small .right{
        width: auto;
    }
    #header.small .hd_logo img{
        height: 70px;
    }
}