@charset "UTF-8";
/* CSS Document */

/*PCのみ*/
body {
color: #333;
}
a:link {
color: #333;
}

/*--ヘッダー全体ここから----------------------------------------------------------------------------*/

:root{
    --header-h: 105px;          /* ヘッダー1の高さ */
    --header-h-scrolled: 48px;  /* ヘッダー2の高さ */
/*    --pad-x: 30px;              /* 原寸っぽい左右余白 */
    --blue: #0b67a8;
/*    --text: #333;*/
  }

.site-header{
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--header-h);
    background: rgba(255,255,255,0.85);
    z-index: 1000;
    transition: height .22s ease;
    line-height: 1.3em;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);/* 水平 0px, 垂直 0px, ぼかし 6px, 広がり 0px, 色 (黒の25%透明度) */
}

.header-inner{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 35px 0 25px;
}

/*トップページのみ／白バック濃度薄めに*/
.top_headaer .site-header {
  box-shadow: none;
    background: rgba(255,255,255,0.5)!important;
}

/*--ヘッダー全体ここまで----------------------------------------------------------------------------*/

/*--左側ここから-------------------------------------------------------------------------------*/

.brand_1,
.brand_2{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-decoration: none;
    flex: 0 0 auto;
  }

.brand_1{
width: 141px;
height: 82px;  
}

.brand_2{
width: 38px;
height: 38px;  
/*opacity: 0;*/
display: none;
}

.brand_1 img{
width: 100%;
height: auto;  
}

.brand_2 img{
width: 100%;
height: auto;  
}

/*--左側ここまで-------------------------------------------------------------------------------*/

/*--右側ここから-------------------------------------------------------------------------------*/

.header-right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 25px;/*会社名とリンクボタンの隙間*/
    min-width: 0;
  }

/*会社名*/
  .company-name{
    width: 212px;
    height: 20px;
  }

  .company-name img{
    width: 100%;
    height: auto;    
}

/*リンクボタン*/
  .nav-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 45px;/*各リンクボタンの隙間*/
    flex-wrap: nowrap;
  }

  .nav-list a{
    position: relative;
    display: inline-block;
    padding-left: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .03em;/*字間*/
    white-space: nowrap;
  }

  .nav-list a::before{
    content:"";
    position:absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 6px solid var(--blue);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }


/*  .nav-list a:hover{ opacity: 0.7; }*/
  

/*ドロップダウンここから----------*/
.has-dropdown{
  position: relative;
}

/* ドロップダウン本体 */
.dropdown{
  position: absolute;
  top: 100%;
  left: -50px;
/*  min-width: 220px;*/
  min-width: 12em;
  background: #fff;
  padding: 0;
  margin: 0;
  list-style: none;
/*  box-shadow: 0 8px 20px rgba(0,0,0,.12);*/
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);/*メニューの移動距離*/
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 1001;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);/* 水平 0px, 垂直 0px, ぼかし 6px, 広がり 0px, 色 (黒の25%透明度) */
}

/* 表示制御（hover） */
.has-dropdown:hover .dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ドロップダウン内リンク */
.dropdown li{
padding-left: 1em;
}

.dropdown li a{
  display: block;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* 三角アイコンは不要なので消す */
/*.dropdown li a::before{
  display: none;
}*/

/* hover */
.dropdown li:hover{
  background: #999;
}
.dropdown li a:hover{
  color: #fff;
}

/*ドロップダウンここまで-------------*/

/*--右側ここまで-------------------------------------------------------------------------------*/


/*--スクロール後ここから-------------------------------------------------------------------------------*/

/*トップページのみ*/
.top_headaer .site-header.is-scrolled {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);/* 水平 0px, 垂直 0px, ぼかし 6px, 広がり 0px, 色 (黒の25%透明度) */
    background: rgba(255,255,255,0.85)!important;
}

  .site-header.is-scrolled{
    height: var(--header-h-scrolled);
  }

  .site-header.is-scrolled .header-inner{
    align-items: center;
  }

/* ロゴ1を消す */
.site-header.is-scrolled .brand_1{
display: none;
/*    opacity: 0;*/
    height: 0;
    margin-top: 0;
    transform: translateY(-6px) scale(.98);
    overflow: hidden;
  }

/* ロゴ2を表示 */
  .site-header.is-scrolled .brand_2{
display: block;
  }

.site-header.is-scrolled .header-right{
    gap: 0!important;
  }

  /* 右上の会社名を消す（ヘッダー2は表示なし） */
  .site-header.is-scrolled .company-name{
    opacity: 0;
    height: 0;
    margin: 0;
    transform: translateY(-6px);
    overflow: hidden;
  }

  /* 縦方向のセンターに寄せるため、ブランドを横並び化 */
  .site-header.is-scrolled .brand_2{
    flex-direction: row;
    align-items: center;
  }

/*--スクロール後ここから-------------------------------------------------------------------------------*/

/* ===== (任意) ヘッダー固定分の余白：ヘッダーのみ使うなら不要 ===== */
/*  body{ padding-top: var(--header-h); }
  .site-header.is-scrolled ~ * { /* 他要素に影響させないため未使用 */ }