/* Layout
   - Header / navigation
*/

/*************************
        ヘッダー
*************************/

.header-right{
  display:flex;
  margin-bottom:0;
  margin-left:auto;
  padding:0;
}

.header-sns{ display:none; }

@media screen and (min-width:991px){
  .header-sns{
    display:flex;
    margin-left:var(--space-15, 15px);
    margin-bottom:0;
    padding:0;
    list-style:none;
  }
}

.header-sns li{ width:30px; margin-left:var(--space-15, 15px); }

.header-sns li:first-child{ margin-left:0; }

.header-sns img{ width:30px; padding-top:4px; }

.navbar-nav{ width:100%; text-align:center; }

@media screen and (min-width:991px){
  .navbar-nav{ width:auto; }
}

.nav-item{ border-bottom:1px dotted #8F8F8F; }

@media screen and (min-width:991px){
  .nav-item{ border-bottom:none; }
}

.nav-item a{ color:#DFDFDF !important;  padding: 0 var(--space-10, 10px); display:flex; align-items:center; }

.nav-item a:hover{ color:#FFFFFF !important; }

@media screen and (min-width:991px){
  /* desktop header link metrics are handled in the base rule */
}

/* Header alignment (clean, stable) */

@media screen and (min-width:991px){
  /* Make brand and nav share the same vertical rhythm */
  .navbar .container{ align-items:center; }
  .navbar-brand{
    display:flex;
    align-items:center;
    padding-top:0;
    padding-bottom:0;
  }
  .navbar-brand h1{
    margin:0;
    display:flex;
    align-items:center;
    line-height:1;
  }

  .header-right{ align-items:center; }
  .navbar-nav{ align-items:center; }
  .nav-item{ display:flex; align-items:center; }

  /* Ensure link box is vertically centered without relying on padding */
  .nav-item a{
    padding-top:0 !important;
    padding-bottom:0 !important;
    display:flex;
    align-items:center;
    min-height:48px;
  }
}

h1{ margin:0; padding:0; }

h1 img{ width:170px; height:auto; }

@media screen and (min-width:768px){
  h1 img{ width:200px; }
}