@charset "utf-8";
/*
================================================================================================================
メニューエリア
================================================================================================================
*/

@media screen and (min-width: 980px){
  .nav-menu-area .name-box{
    width: 50%;
    max-width: 660px;
    display: flex;
  }
  .contents-area .name-box{
    display: none;
  }
  .nav-menu-area .nav-box{
    width: 50%;
    max-width: 660px;
  }
}
@media screen and (max-width: 979.9px){
  .nav-menu-area .name-box{
    display: none;
  }
  .contents-area .name-box{
    display: flex;
  }
  .nav-menu-area .nav-box{
    width: 100%;
  }
  .nav-menu-area .nav-box .btn{
    flex: 1 1 33.33%;
    white-space: nowrap;
  }
}

.nav-menu-area{
  position: sticky;
  top: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  background: linear-gradient(to bottom,  #F8ECFC 0%,#EFD1FB 50%,#DCA6F9 100%);
  border-top: solid 1px rgba(100,150,150,1.00);
  border-bottom: solid 1px rgba(100,150,150,1.00);
  z-index: 902;
}
@media screen and (min-width: 980px){
  .nav-menu-area{
    padding: 10px 20px;
  }
}
@media screen and (max-width: 979.9px){
  .nav-menu-area{
    padding: 10px 10px 15px 10px;
  }
}
.nav-box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex-direction: row;
  align-items: center;
}

.nav-menu-area .nav-box .btn{
  max-height: 58px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: rgba(255,255,255,1.00);
  background-color: rgba(125,77,243,1.00);
  box-shadow: 4px 4px 4px rgba(41,41,41,0.90);
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.nav-menu-area .nav-box .btn.active{
  background-color: rgba(222,73,255,1.00);
}

@media screen and (min-width: 1200px){
  .nav-menu-area .nav-box .btn{
    font-size: 22.4px;
    padding: 8px 20px;
    margin: 0px 10px;
    border-radius: 8px;
  }
}
@media screen and (min-width: 980px) and (max-width: 1199.9px){
  .nav-menu-area .nav-box .btn{
    font-size: 1.6vw;
    padding: 0.8vw 1.6vw;
    margin: 0px 0.8vw;
    border-radius: 0.6vw;
  }
}
@media screen and (min-width: 640px) and (max-width: 979.9px){
  .nav-menu-area .nav-box .btn{
    font-size: 3.0vw;
    padding: 1.8vw 0.4vw;
    margin: 0px 1.6vw;
    border-radius: 0.6vw;
  }
}
@media screen and (max-width: 639.9px){
  .nav-menu-area .nav-box .btn{
    font-size: 3.8vw;
    padding: 1.8vw 0.5vw;
    margin: 0px 1.2vw;
    border-radius: 0.6vw;
  }
}

.nav-menu-area .nav-box .btn::after{
  content: "";
  display: block;
  vertical-align: middle;
  line-height: 1;
  width: 14px;
  height: 14px;
  margin: 0 0px 0 20px;
  padding: 0 4px;
  border: 4px solid #FFF;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-20%) rotate(135deg);
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  transition: all 0.1s ease;
}
.nav-menu-area .nav-box .btn.active::after{
  transform: translateY(20%) rotate(-45deg);
}

.nav-menu-area .name-box {
  max-height: 69px;
  height: calc(100vw * 49 / 980);

  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  flex-direction: row;
}

.contents-area .name-box{
  margin: 20px 0px 0px 0px;
}
.contents-area .name-box.site-name{
  justify-content: center;
  width: 100%;
}

@media screen and (max-width: 979.9px){
  .contents-area .name-box{
    aspect-ratio: 940/87;
    height: calc(100vw * 87 / 940);
  }
  .contents-area .name-box.site-name{
    height: calc(100vw * 152 / 940);
    justify-content: center;
    max-height: unset;
  }
}

.name-box .name, .name-box img{
  width: auto;
  height: 100%;
}
.name-box .ruby{
  width: auto;
  height: 74%;
}