@charset "UTF-8";

.is-fixed{
    position: static; /* fixedをやめる */
    overflow: hidden !important;
    height: 100vh; /* 必要に応じて */
    touch-action: none; /* iOSでのスクロールを抑制する強力な指定 */
}
.header_menu-nav {
  /* width: 9.44363vw;   */
  position: fixed;
  z-index: 999;
  mix-blend-mode: difference;
  color: #f1f1f1;
  isolation: isolate;
}

@media screen and (min-width: 769px) {
.header_menu-nav {
  right: 2.9282vw;
  top: 2.9282vw;
  }
}

@media screen and (max-width: 768px) {
.header-menu__position{
    margin-inline: auto;
    }
}

.header_menu-menu {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2vw;
}

.header_menu-inner {  flex-shrink: 0;  display: block;
   min-width: 120px;}

.header_menu-menu p,
.header_menu-inner {
  font-size: clamp(14px, 1.0248vw, 9999px);
}

.header_menu-inner {
  /* gap: 2rem; */  list-style: none;
  margin: -2px 0 0 0;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .header_menu-inner {
  /* gap: 2rem; */  list-style: none;
  margin: 0;
  padding: 0;
}
}

.header_menu-inner a {
  text-decoration: none;
  color: #ffffff;
}

@media screen and (max-width: 768px) {
    .header_menu-inner a {
    text-decoration: none;
    color: #1f1f1f;
    }
}

.header_menu-inner a:hover {
  color: #f1f1f1;
}

@media screen and (max-width: 768px) {
    .header_menu-inner a:hover {
        color: #f1f1f1;
}
}

.menu-checkbox {
  display: none;
}

.menu-toggle {
  display: none;  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 18px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background: #fff;
  position: absolute;
  transform-origin: center center;
}

.contact-btn {
  display: none;
}

.header_menu-text_sp,
.tel_sp,
.access_sp,
.copyright_sp {
  display: none;
}



.text-bold {
  font-weight: bold;
}

.blend-text {
  mix-blend-mode: exclusion;
}
@media screen and (max-width: 768px) {  
    .header_menu-nav {
    mix-blend-mode: normal;  
    margin-inline: auto;
}
  .menu-title {
    display: none;  }

  .menu-toggle {
    display: block;   
    position: fixed;
    top: 8vw;
    right: 6.133vw;
    width: 25px;
    height: 10px;
  }

  .spmenu_open .menu-toggle{
    top: 8vw;
    right: 6.6666vw;
  }

  .menu-toggle span {
    height: 2px;
  }  .menu-toggle span:nth-child(1) {
    top: 0;
  }

  .menu-toggle span:nth-child(2) {
    bottom: 0;
  }  .menu-checkbox:checked + .menu-toggle span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background: linear-gradient(90deg, #333 0%, #333 45%, transparent 45%, transparent 55%, #333 55%, #333 100%);
  }

  .menu-checkbox:checked + .menu-toggle span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    background: linear-gradient(90deg, #333 0%, #333 45%, transparent 45%, transparent 55%, #333 55%, #333 100%);
  }  
  .menu {
    width: 100vw;
    position: relative;
  }  
  .header_menu {
    /* display: flex;
    justify-content: space-between; */
    width: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    transition: 0.3s ease;
  }

  .header_menu-logo img {
    width: 48.84px;
    height: 40.14px;
    top: min(4vw, 15px);
    left: min(6.4vw, 24px);
  }  
  
  .menu:has(.menu-checkbox:checked) {
    height: 100vh;
    height: 100dvh; 
  }

  .header_menu.spmenu_open {
    background-image: url('../img/menu_sp.png');
    background-size: 100%;
    height: 100%;
    width: 100vw;
    overflow: hidden;
    color: #1f1f1f;
    mix-blend-mode: normal;
  }

  .header_menu.spmenu_open .header_menu-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

    .header_menu-menu {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding-right: 40px;
    padding: 0;
    position: relative;
    /* width: 100vw; */
  }

  .is-fixed .header_menu-menu {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding-right: 40px;
    padding: 0;
    position: relative;
    width: 100vw;
    height: 100vh;
  }

  /* .header_menu-logo {
    margin-top: -13px;
    margin-left: -3px;
  } */

  .menu-toggle span {
    height: 2px;
  }  .menu-toggle span:nth-child(1) {
    top: 0;
  }

  .menu-toggle span:nth-child(2) {
    bottom: 0;
  }  
  
  .header_menu-inner {
    position: absolute;
    top: 41.8666vw;
    left: min(6.4vw, 24px);
    /* width: 100vw; */
    flex-direction: column;
    gap: 8px;
    padding: 71px 0 0 24px;    visibility: hidden;
    opacity: 0;
    /* transition: opacity 0.3s ease, visibility 0.3s ease; */
  }

  body:not(.is-fixed) .header_menu-inner {
    display: none;
  }

  .header_menu-inner a {
    font-size: 24px;
    font-weight: normal;
    color: #1f1f1f;
  }  .menu-checkbox:checked ~ .header_menu-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    visibility: visible;
    opacity: 1;
  }  
  
  .header_menu-text_sp {
    display: none;
    position: absolute;
    top: 23.7333vw;
    left: min(6.4vw, 24px);
    width: 135px;
  }
  .header_menu-text_sp.active {
    display: block;
    color: #1f1f1f;
  }
  .header_menu-text_sp p {
    font-size: 10px;
    line-height: 1.6;
  }  
  
  .tel_sp.active {
    display: block;
    color: #1f1f1f;
  }
  .tel_sp span {
    font-size: 10px;
    padding-right: 11px;
  }
  .tel_sp p {
    font-size: 24px;
    margin-top: 7px;
    letter-spacing: 0.015em;
  }  
  
  .access_sp {
    display: none;
    position: absolute;
    top: 145.9333vw;
    left: min(6.4vw, 24px);
  }

  .access_sp.active {
    display: block;
  }

  .access_sp p {
    font-size: 10px;
    line-height: 1.6;
    color: #1f1f1f;
  }  
  
.copyright_sp {
    display: none;
    position: absolute;
    bottom: 6.4vw;
    left: min(6.4vw, 24px);
    color: #1f1f1f;
    top: auto;
    right: auto;
  }
  .copyright_sp.active {
    display: block;
  }
  .copyright_sp p {
    font-size: 10px;
  }  

  .contact-img {
    background: #1f1f1f;
    display: grid;
    place-content: center;
    width: 64px;
    border-right: 1px solid #ffffff;
  }
  .contact-img img {
    width: 16px;
  }

  .contact-text {
    background: #1f1f1f;
    display: grid;
    place-content: center;
    width: 251px;
    font-size: 5.8666vw;
    color: #ffffff;
    }


  body.is-fixed {
    height: 100%;
    overflow: hidden;
  }
}

body:not(.is-fixed) .js-animateText {    
    display: inline-block;    
    position: relative; 
    overflow: hidden;   
    cursor: pointer;    
    line-height: 1.5;    
    height: 1.5em;    
    width: 100%; 
}

body:not(.is-fixed) .js-animateText .text-wrap {
    display: block; 
    position: relative; 
    height: 100%; 
}

body:not(.is-fixed) .js-animateText .before,
body:not(.is-fixed) .js-animateText .after {
    display: block; 
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    line-height: inherit;

    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

body:not(.is-fixed) .js-animateText .after {
    transform: translateY(100%); 
}

body:not(.is-fixed) .js-animateText:hover .before {
    transform: translateY(-100%); 
}

body:not(.is-fixed) .js-animateText:hover .after {
    transform: translateY(0);
}

.is-fixed .js-animateText{
  position: static;
}

.is-fixed .js-animateText .after{
  display: none;
}

@media screen and (max-width: 768px) {
.header_menu-logo{
    width: fit-content;
    display: block;
    position: fixed;
    top: 8vw;
    left: min(6.4vw, 24px);
    z-index: 999;
    /* width: min(13.0666vw, 49px); */
    margin-top: auto;
    margin-left: auto;
    }

    .header_menu{
      /* width: 100vw; */
      padding-top: 0;
      padding-left: 0;
      mix-blend-mode: difference;
    }

    .spmenu_open .header_menu-nav{
      width: 100vw;
      height: 100vw;
      right: auto;
      top: auto;
    }

    .header_menu.spmenu_open .header_menu-inner{
      padding: 0;
    }

    .header_menu.spmenu_open .header_menu-inner li{
      width: fit-content;
    }
}

@media screen and (max-width: 768px) {
  .tel_sp{
    display: none;
    position: absolute;
    top: 86.8666vw;
    left: min(6.4vw, 24px);
  }
}

@media screen and (max-width: 450px) {
  .tel_sp {
    display: none;
    position: absolute;
    top: 103.9333vw;
    left: min(6.4vw, 24px);
  }
}


@media screen and (max-width: 768px) {
  .contact-btn {
    display: flex;
    position: absolute;
    top: 97.9333vw;
    right: auto;
    left:  min(6.4vw, 24px);
    height: 62px;
  }
body:not(.is-fixed) .contact-btn{
  display: none;
}

  .contact-btn a {
    display: flex;  }

  .contact-btn:hover {
    background: #0056b3;
  }
  }

@media screen and (max-width:450px) {
  .contact-btn {
    top: 118.9333vw;
  }

  .header_menu-logo{
    top: 4vw;
    }
}