html{
  font-size:62.5%;
}
.site-header {
    padding: 20px;

}

.site-header.is-scrolled {
    padding: 20px;

}

/* ==========================================================
   HM NAV
========================================================== */

body.is-nav-open{
  overflow:hidden;
}


/* ==========================================================
   HAMBURGER BUTTON
========================================================== */

.hm-btn{
  position:absolute;
  top:50%;
  right:20px;
  width:35px;
  height:40px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  transform:translateY(-50%);
  z-index:10002;
}

.hm-btn span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:999px;
  background:#fff;

  transition:
    top .35s ease,
    transform .35s ease,
    opacity .25s ease,
    background .35s ease;
}

.hm-btn span:nth-child(1){
  top:6px;
}

.hm-btn span:nth-child(2){
  top:18px;
}

.hm-btn span:nth-child(3){
  top:30px;
}


/* スクロール後：3本とも紺 */
.site-header.is-scrolled .hm-btn span{
  background:#004b9b;
}


/* メニューオープン時：× */
body.is-nav-open .hm-btn span{
  background:#222;
}

body.is-nav-open .hm-btn span:nth-child(1){
  top:18px;
  transform:rotate(45deg);
}

body.is-nav-open .hm-btn span:nth-child(2){
  opacity:0;
}

body.is-nav-open .hm-btn span:nth-child(3){
  top:18px;
  transform:rotate(-45deg);
}


/* ==========================================================
   OVERLAY
========================================================== */

.hm-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;

  transition:
    opacity .35s ease,
    visibility .35s ease;

  z-index:9997;
}

body.is-nav-open .hm-overlay{
  opacity:1;
  visibility:visible;
}


/* ==========================================================
   NAV PANEL
========================================================== */

.hm-nav{
  position:fixed;
  top:0;
  right:0;
  width:555px;
  max-width:100%;
  height:100vh;
  overflow-y:auto;

  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.25,.8,.25,1);

  -webkit-overflow-scrolling:touch;
  z-index:10001;
}

body.is-nav-open .hm-nav{
  transform:translateX(0);
}

.hm-nav__inner{
  padding:42px 44px 60px;
}


/* ==========================================================
   MAIN / SUB MENU COMMON
========================================================== */

.hm-nav__main,
.hm-nav__sub{
  margin:0;
  padding:0;
  list-style:none;
}

.hm-nav__main li{
  position:relative;
}

.hm-nav__main li:not(:last-child){
  border-bottom:1px dashed #222;
}

.hm-nav__main a,
.hm-nav__sub a{
  display:grid;
  align-items:baseline;
  padding:9px 0 8px;

  color:#222;
  text-decoration:none;
  font-weight:400;
}


/* メインメニュー：日本語の開始位置を統一 */
.hm-nav__main a{
  grid-template-columns:minmax(0,1.7fr) 180px;
  column-gap:20px;
}


/* サブメニュー：横並び */
.hm-nav__sub a{
  grid-template-columns:270px auto;
  column-gap:0px;
  padding:12px 0;
}


.hm-nav .en{
  min-width:0;
  margin:0;
letter-spacing:0.6px;
  font-family:"Cinzel", serif;
  font-size:1.8rem;
  line-height:1.05;
}

.hm-nav .jp{
  min-width:0;
  margin:0;
  text-align:left;
  white-space:nowrap;

  font-family:"Noto Serif JP", serif;
  font-size:1rem;
  line-height:1.2;
  letter-spacing:.01em;
}


/* ==========================================================
   ACTIVE BAR
========================================================== */

.hm-nav__main li::before{
  content:"";
  position:absolute;
  top:50%;
  left:-14px;
  width:6px;
  height:38px;

  background:#d9d9d9;
  opacity:0;
  pointer-events:none;

  transform:translateY(-50%);
  transition:opacity .3s ease;
}

.hm-nav__main li.is-current::before{
  opacity:1;

  background:linear-gradient(
    to bottom,
    #004b9b 0%,
    #004b9b 33%,
    #3f77ae 33%,
    #3f77ae 66%,
    #9fc4df 66%,
    #9fc4df 100%
  );
}


@media (hover:hover){

  .hm-nav__main li:not(.is-current):hover::before{
    opacity:1;
  }

  .hm-nav a{
    transition:opacity .3s ease;
  }

  .hm-nav a:hover{
    opacity:.6;
  }

}


/* ==========================================================
   SUB MENU
========================================================== */

.hm-nav__sub{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid #222;
}


/* ==========================================================
   INFORMATION
========================================================== */

.hm-info{
  margin-top:34px;
  color:#222;
}

.hm-info__title{
  margin:0 0 23px;
  padding:12px 10px;

  background:#004b9b;
  color:#fff;

  text-align:center;
  font-family:"Cinzel", serif;
  font-size:1.8rem;
  font-weight:400;
  letter-spacing:.18em;
}

.hm-info #js-migrationInformation2{
  padding:0;
}

.hm-info p,
.hm-info span,
.hm-info a,
.hm-info div,
.hm-info time{
  color:#222 !important;
}

.hm-info .b-date{
  margin:0 0 10px;
  font-size:1.2rem;
  font-weight:400;
  line-height:1.5;
}

.hm-info .b-txt{
  margin:0 0 18px;
  padding-bottom:18px;
  border-bottom:1px solid #ddd;
  font-size:1.3rem;
  color:#222 !important;
  line-height:1.4;
}

.hm-info a:hover{
  opacity:.7;
}


/* ==========================================================
   PC HEADER
========================================================== */

.header-nav{
  display:block;
  padding-right:57px;
}

.nav-top{
  display:flex;
  align-items:center;
  gap:12px;
}

.header-nav a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;

  padding:3px 35px;

  color:#fff;
  font-size: clamp(1.2rem, 1.3vw, 1.3rem);
  letter-spacing:.12em;
  text-decoration:none;

  background:rgba(255,255,255,.12);
  border-radius:8px;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 8px 24px rgba(0,0,0,.18);

  overflow:hidden;

  transition:
    background .35s ease,
    border-color .35s ease,
    transform .25s ease,
    box-shadow .35s ease;
}

.header-nav a:hover{
  background:rgba(255,255,255,.22);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 12px 32px rgba(0,0,0,.24);

  transform:translateY(-2px);
}


/* ==========================================================
   ENTRY BUTTON
========================================================== */

.header-nav a.entry,
.sp-header-entry{
  position:relative;

  background:linear-gradient(
    180deg,
    #a24c4c 0%,
    #904141 30%,
    #7c3333 70%,
    #6f2b2b 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 8px 18px rgba(0,0,0,.20);

  overflow:hidden;
}

.header-nav a.entry:hover,
.sp-header-entry:hover{
  background:linear-gradient(
    180deg,
    #ac5555 0%,
    #974646 45%,
    #803636 100%
  );
}


/* キラーン演出 */
.header-nav a.entry::before,
.sp-header-entry::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-80%;
  width:40%;
  height:200%;

  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );

  transform:rotate(25deg);
  transition:left .7s ease;
}

.header-nav a.entry:hover::before,
.sp-header-entry:hover::before{
  left:140%;
}


/* ==========================================================
   SCROLLED HEADER
========================================================== */

.site-header.is-scrolled .header-nav a{
  background:#22578b;
  border-color:#cdcdcd;
  color:#fff;

  backdrop-filter:none;
  -webkit-backdrop-filter:none;

  box-shadow:0 2px 4px rgba(0,0,0,.42);
}

.site-header.is-scrolled .header-nav a:hover{
  background:#32689f;
  border-color:#cdcdcd;
}

.site-header.is-scrolled .header-nav a.entry{
  background:linear-gradient(
    180deg,
    #a24c4c 0%,
    #904141 30%,
    #7c3333 70%,
    #6f2b2b 100%
  );

  border-color:#cdcdcd;
}

.site-header.is-scrolled .header-nav a.entry:hover{
  background:linear-gradient(
    180deg,
    #ac5555 0%,
    #974646 45%,
    #803636 100%
  );
}


/* ==========================================================
   SP ENTRY BUTTON
========================================================== */

/* PC・タブレットでは非表示 */
.sp-header-entry{
  display:none;
}


/* ==========================================================
   TABLET
========================================================== */

@media screen and (max-width:1080px){

  /* PC用ボタンは非表示 */
  .header-nav{
    display:none;
  }

}


/* ==========================================================
   SP
========================================================== */

@media screen and (max-width:767px){

  .hm-btn{
    right:12px;
  }

  .hm-nav__inner{
    padding:35px 24px 40px;
  }

  .hm-nav .en{
    font-size:1.5rem;
  }

  .hm-nav__main a{
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    column-gap:12px;
  }

  .hm-nav__sub a{
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    column-gap:12px;
  }

  .hm-nav .jp{
    width:auto;
    font-size:1rem;
  }

  .hm-nav__main li::before{
    height:30px;
  }


  /* SP用ENTRYボタン */
  .sp-header-entry{
    position:absolute;
    top:50%;
    right:70px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:100px;
    height:35px;

    color:#fff !important;
    font-family:"Cinzel", serif;
    font-size:1.2rem;
    letter-spacing:.08em;
    text-decoration:none;

    border-radius:5px;
    transform:translateY(-50%);
    z-index:10001;
  }

}


/* ==========================================================
   SP LOGO
========================================================== */

@media screen and (max-width:900px){

  .site-header .logo{
    width:100%;
    text-align:center;
    transition:.45s ease;
  }

  .site-header .logo img{
    display:block;
    width:min(260px,48vw);
    height:auto;
    margin:0 auto;

    filter:brightness(1.05) contrast(1.03);
    transition:opacity .45s ease;
  }

}


@media screen and (max-width: 900px) {
    .site-header.is-scrolled .logo img {
        width: 50%;
        margin: 0;
    }
}


@media screen and (max-width: 340px) {
    .site-header.is-scrolled .logo img {
        width: min(260px, 42vw);
        margin: 0;
    }
        .site-header .logo img {
        display: block;
        width: min(260px, 42vw);
        height: auto;
        margin: 0 auto;
        filter: brightness(1.05) contrast(1.03);
        transition: opacity .45s ease;
    }

    .sp-header-entry {
        width: 88px;
        height: 30px;

    }
}




/* Mobile header: logo, entry and menu share one row. */
@media screen and (max-width:767px){
  .site-header,
  .site-header.is-scrolled{
    padding:16px 12px;
    min-height:68px;
  }
  .site-header .logo,
  .site-header.is-scrolled .logo{
    width:calc((100% - 142px) * .9);
    max-width:234px;
    text-align:left;
    transform:none;
  }
  .site-header .logo a{width:100%;}
  .site-header .logo img,
  .site-header.is-scrolled .logo img{
    width:100%;
    margin:0;
  }
  .site-header .sp-header-entry{
    position:absolute;
    top:50%;
    right:62px;
    display:flex;
    width:88px;
    height:28px;
    align-items:center;
    justify-content:center;
    padding:0;
    border-radius:5px;
    font-size:12px;
    line-height:1;
    letter-spacing:.08em;
    transform:translateY(-50%);
    text-shadow:none;
  }
  .site-header .sp-header-entry:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px;
  }
  .site-header .sp-side-cta{display:none;}
}