@charset "UTF-8";
header{
    position: sticky;
  top: 0;
  width: 100%;
  height: 100px;
  z-index: 11;
}
@media screen and (max-width: 1000px) {
  header {
    height: 60px;
  }
}
.header-inner {
  position: relative;
  width: 100%;
  height: 100%;
background: #FFF;
box-shadow: 0 0 10px 0 rgba(51, 51, 51, 0.15);
  padding: 0 3.6%;
	transition: background-color 0.4s;
}
@media screen and (max-width: 1000px) {
  .header-inner {
    padding: 0 0 0 5.8%;
  }
}
.header-inner h1 {
width: 210px;
}
@media screen and (max-width: 1000px) {
  .header-inner h1 {
    display: flex;
width: 126px;

justify-content: center;
align-items: center;
  }
}
.header-inner h1 a {
  display: block;
  width: 100%;
  height: 100%;
color: #0081CC;
font-size: 40px;
font-style: normal;
font-weight: 900;
line-height: 150%; /* 60px */
}
.header-inner h1 a:hover {
opacity: 0.5;
}
.header-inner nav.pc-nav {
  display: block;
}
.header-inner nav.pc-nav ul {
  display: flex;
  gap: clamp(10px, 3vw, 40px);
}
.header-inner nav.pc-nav ul li{
position: relative;
  list-style: none;
    transition: color 0.3s;
}

.header-inner nav.pc-nav ul li a {
  color: #0081CC;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}
.pc-nav ul li a::after {
  content: "";
  position: absolute;
  bottom: -13px;      /* padding-bottom 13pxのちょうど下に配置 */
  left: 50%;      /* 中央起点にするための左位置 */
  width: 0;       /* 最初は幅0 */
  height: 2px;    /* 線の太さ */
  background: #0081CC; /* 線の色（お好みで変更してください） */
  transition: all 0.3s; /* アニメーションの速度 */
  transform: translateX(-50%); /* 中央寄せの補正 */
}
.pc-nav ul li a:hover::after {
  width: 100%;    /* 幅を100%に広げる */
}
.menu-toggle,.menu-area {
  display: none;
}
@media screen and (max-width: 1000px) {
    .header-inner h1 a {
font-size: 2.4rem;
}
    .header-inner nav.pc-nav {
    display: none;
  }
}
@media screen and (max-width: 1000px) {
    
  .menu-toggle {
      display: block;
  position: relative;
  width: 60px;
  height: 60px;
      background: transparent;
    border: none;
    cursor: pointer;
  }
    .menu-toggle:hover {
	opacity: 0.5;
}

.menu-toggle .toggle_line {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background-color: #0081CC;
  transition: all 0.3s;
}
    .menu-toggle .toggle_line:nth-child(1) {
  top: 22px;
}
.menu-toggle .toggle_line:nth-child(2) {
  top: 30px;
}
.menu-toggle .toggle_line:nth-child(3) {
  top: 38px;
}
  .menu-toggle.open .toggle_line:nth-of-type(1) {
    transform: translate(-50%, 6px) rotate(-45deg);
  }
.menu-toggle.open .toggle_line:nth-of-type(2) {
  opacity: 0;
}
.menu-toggle.open .toggle_line:nth-of-type(3) {
  transform: translate(-50%, -10px) rotate(45deg);
}
/*ハンバーガーメニューの中身*/
.menu-area {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 100;
transform: translateX(100%); 
  visibility: hidden;
  /* transitionにtransformを指定 */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
background-image: url("../image/bg-header-inner.png");
    background-size: cover;
    background-repeat: no-repeat;
  padding: 40px 0 0;
    overflow-y: auto; 
  -webkit-overflow-scrolling: touch;
}
.menu-area.open {
  transform: translateX(0);
visibility: visible !important;
  will-change: transform; 
  opacity: 1;
}
.sp-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: auto;
  flex-grow: 0;
  margin-top: 0;
  margin-bottom: 40px;
}
    .sp-nav ul {
    width: 100%;
        border-top: 2px solid #80C0E6;  
    }
     .sp-nav ul li {
  display: flex;
  padding: 12px 0;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 2px solid #80C0E6;
 }
 .sp-nav ul li a {
      width: 100%;
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 24px */
  transition: color 0.2s ease-out;
    justify-content: space-between;
     align-items: flex-start;
 }
    .menu-area-bottom{
        display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
        gap: 5px;
        border-top: 2px solid #fff;
    width: 100%;
    padding-top: 20px;
        text-align: left;
        padding-bottom: 60px;
    }
    .menu-area-bottom p, .menu-area-bottom a{
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 21px */
    }
.menu-toggle.open {
}
}