/* 参考＝https://orange-log.com/scroll-header/ */


/* ================================================================================================

スクロールするとデザインが切り替わるヘッダー

=================================================================================================== */

/*-----------------------------------------------
▼  ヘッダー：ナビ 
-----------------------------------------------*/

/* ▼ 大枠：左側 ------- */
.header-nav.scroll-nav {
width: 100%;   /* ★変更：30% → 100% */
height: 50px;  /* ★追加 */
padding: 0px 50px;  /* ★追加 */
background: rgba(176, 26, 33, 0.9); /* ★追加 */
text-align: initial;  /* ★変更：center → initial（初期値にする） */

position: fixed;  /* ★追加：位置指定 */
top: 0;  /* ★追加：画面の一番、上にあわせる */

display:flex;
flex-direction: row;  /* ★追加：縦から横並びに */
flex-wrap: nowrap;      /* ★追加：絶対に折り返さない */
justify-content: space-between; /* ★追加：両端のアイテムを余白を空けずに配置し、他の要素は均等*/
align-items: center; /* ★追加：上下中央*/
box-sizing: border-box;
}

/* ▼ スマホ：1100px以下の幅の場合に適応される*/
@media screen and (max-width:1100px){
.header-nav.scroll-nav {display:none;}/* スマホでみた時は表示しない*/
}


/*-----------------------------------------------------------*/

/* ▼ 追加：ナビゲーション（ボタンとSNSの親） ------- */
.header-nav.scroll-nav nav {
display: flex;         /* 内部の btn と sns を横並びにする */
align-items: center;
height: 100%;
}

/*-----------------------------------------------------------*/

/* ▼ ロゴ ------- */
.header-nav.scroll-nav .nav-logo {
margin:0;/* ★変更 */
list-style: none;/* ★追加*/
}
.header-nav.scroll-nav .nav-logo img{
width: auto; /* ★変更 */
height: 30px; /* ★変更 */
vertical-align: middle;/* ★追加*/
}

      /* ▼ スクロール時のロゴ切り替え ------- */
      .header-nav.scroll-nav .nav-logo .logo-default {display: none;}/* 通常ロゴを非表示にする */
      .header-nav.scroll-nav .nav-logo .logo-scroll {/* スクロールロゴを表示する */
      display: block;   /* または inline-block */
      height: 30px;     /* 横並びにするための高さ調整（以前の指定と同じ） */
      width: auto;
      margin: 0;        /* 余計な余白を消す */
      vertical-align: middle;
      }
      .nav-logo .logo-scroll {display: none;}/* 通常時にスクロールロゴを非表示 */


/*-----------------------------------------------------------*/

/* ▼ メニューボタン ------- */
.header-nav.scroll-nav .nav-btn {
display:flex;
flex-direction: row;    /* ★変更：縦から横並びに */
justify-content: right; /* ★変更：右寄せ*/
align-items: center; /* ★追加：上下中央*/
margin: auto;       /* ★変更：余白変更 */
}

.header-nav.scroll-nav .nav-btn li{
width: auto; /*★変更：250px → auto */
height: 100%;       /* ★追加 */
background: none; /*★変更：背景消す */
color: #fff;

padding:12px 20px; /*★変更 */
margin: auto; /*★変更 */

text-align: center;
font-size: 0.8rem; /*★変更 */
font-weight: bold;
border-left: 1px solid #C9CACA;/* ★追加：仕切り線＝メニューの左側に線をつける*/
line-height: 0;      /* ★追加：行間の影響を排除 */
}

.header-nav.scroll-nav .nav-btn li:last-child{border-right: 1px solid #C9CACA;}/*仕切り線:last-child＝ラストのアイテムにだけ適用*/
.header-nav.scroll-nav .nav-btn li:hover{background-color: #d11f27;}/*クリックしたとき*/


/*-----------------------------------------------------------*/

/* ▼ SNSアイコン ------- */
.header-nav.scroll-nav .nav-sns {
display:flex;
flex-wrap: row;    /* ★変更：縦から横並びに */
justify-content:  right; /* ★変更：右寄せ*/
align-items: center;  /* ★変更：上下中央*/
margin: 0px 0px 0px 10px;/* ★変更*/
}
.header-nav.scroll-nav .nav-sns img{height: 25px;margin:0px 0px 0px 10px;}
.header-nav.scroll-nav .nav-sns img:hover{opacity: 0.6;transition-duration: 0.3s;}


/*-----------------------------------------------------------*/

/* スクロール時はスクロールダウンの矢印を消す */
.header-nav.scroll-nav #scroll-down {display: none;}


/*-----------------------------------------------
▼  メニューボタンから飛んだ時にスクロールメニューと被る
-----------------------------------------------*/
/* 全てのID（ジャンプ先）に対して、ヘッダー分の余白を作る */
[id] {scroll-margin-top: 105px; /* ヘッダーの高さ(50px) + 見出しのアイコンの高さ(50px) + 少しの余裕(5px) */}

.anchor {scroll-margin-top: 105px;}