@charset "UTF-8";
/*============
nav
=============*/
.home.fixed {}
/*
@keyframes toggle {
   0% {
      left: -100%;
      opacity: 0
   }
   15% {
      left: 0;
      opacity: 1
   }
   85% {
      left: 0;
      opacity: 1
   }
   100% {
      left: 100%;
      opacity: 0
   }
}

.toggle_btn span:nth-child(1) {
   animation: toggle 3s ease-in-out 0s infinite;
}
.toggle_btn span:nth-child(2) {
animation: toggle 3s ease-in-out .15s infinite;

}
.toggle_btn span:nth-child(3) {
   animation: toggle 3s ease-in-out .3s infinite;
}

.open .toggle_btn,
.open .toggle_btn span:nth-child(1),
.open .toggle_btn span:nth-child(2),
.open .toggle_btn span:nth-child(3) {
    animation: toggle none;
}
*/
.navtop {
   display: flex;
   align-items: center;
   padding: 4px 20px;
}
.navtop h1 {
   font-size: 12px;
}
.navsns, .navtop .navinfo {
   display: flex;
}
.icon_cart {
   position: relative;
}
.header {
   position: sticky;
   top: 0;
   z-index: 10;
   background: #fff;
   line-height: 1;
}
.contact .header > header{
    border-bottom: 1px solid #ccc;
}
.header > header {
   display: flex;
   align-items: center;
   padding: 20px 30px;
   border-left: 20px solid var(--bland-color);
}
.header > header h1 {
   margin-right: 13vw;
   line-height: 0;
}
.header > header h1 img {
   max-width: 100%;
}
.navctabtn {
   margin-left: auto;
}
.brand-logo {
   text-align: center;
   left: 0;
   right: 0;
   position: absolute;
   transform: translate(0px, 80px);
   transition: .4s;
}
.fixedfd .brand-logo img {
   width: 120px;
}
.fixedfd .brand-logo {
   transform: translate(0px, 0px);
}
.bland-info a {
   display: block;
   background: #000;
   color: #fff;
   text-align: center;
   font-family: var(--font-tenmin);
   z-index: 1;
   position: relative;
   padding: 6px;
   margin-top: 20px;
}
.btn-recruit::after {
   content: '';
   clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
   height: 12px;
   aspect-ratio: 1;
   background-color: #fff;
   display: inline-block;
   right: 10px;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
}
.navinfo a span.p-global-header__cart-count {
   background: #e04646;
   color: #fff;
   border-radius: 50px;
   width: 15px;
   height: 15px;
   text-align: center;
   font-size: 10px;
   line-height: 1.6;
   position: absolute !important;
   left: 8px;
   top: -3px !important;
   font-weight: 400;
}
.cilogo {
   position: absolute;
   left: 20px;
   top: 0;
   width: 120px;
   bottom: 0;
   margin: auto;
   height: 92px;
}
.open #mask {
   height: 100svh;
   width: 100vw;
   z-index: -1;
   position: fixed;
}
.inner {
   display: block;
   top: 0;
   background: rgb(0 0 0 / 90%);
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   z-index: 0;
   margin-left: auto;
   padding: 0px;
   position: absolute;
   right: 0;
   transform: translate(108%, 0px);
   width: 0;
   height: 100vh;
}
.inner.transition {
   transition: ease .5s;
   opacity: 0;
}
.headnav {
   display: flex;
   align-items: center;
   height: 70px;
}
.headlogo {
   display: none;
}
.headnav h1 img, .headlogo img {
   max-width: 100%;
}
.headnav ul {
   display: flex;
   margin-left: auto;
   margin-right: 90px;
}
.headnav ul li a {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-family: var(--font-noto);
}
.headnav ul li {
   margin: 0 10px;
}
.headnav ul li span {
   display: block;
   text-align: center;
   font-size: 1.2rem;
}
.headnav .head_faq a span {
   margin-top: 4px;
}
.head_cart img {
   width: 34px;
}
.head_cart span {
   position: relative;
   left: 2px;
}
.head_faq img {
   width: 30px;
   top: 2px;
   position: relative;
}
.inner ul {
   list-style: none;
   margin: 0;
   padding: 0;
   height: 0;
}
.inner ul li {
   position: relative;
   margin: 0;
}
.inner ul li a {
   display: block;
   color: #fff;
   font-size: clamp(13px, 14/1080*100vw, 15px);
   text-decoration: none;
   transition: ease .3s;
   transition-duration: 0.2s;
}
.inner ul li a:hover {
   color: var(--bland-color);
}
.inner ul li ul {
   border-bottom: none;
   margin-bottom: 10px;
   padding-bottom: 10px;
}
.inner ul li ul > li:first-child, .inner ul li ul > li {
   font-weight: normal;
}
.inner ul li ul > li:first-child::before, .inner ul li ul > li::before {
   content: '';
   display: inline-block;
   position: absolute;
   top: 50%;
   left: 0;
   width: 0;
   height: 0;
   margin-top: -5px;
   border-top: 5px solid transparent;
   border-right: 6px solid transparent;
   border-bottom: 5px solid transparent;
   border-left: 6px solid #7a626d;
}
/*============
.toggle_btn
=============*/
.togglebox {
   background: transparent;
   width: 36px;
   height: 25px;
   transition: all .5s;
   cursor: pointer;
   z-index: 53;
   display: block;
   border-radius: 0;
   margin-left: 30px;
}
.toggle_btn p {
   font-size: 1rem;
   color: #fff;
   position: absolute;
   bottom: 2px;
   text-align: center;
   display: block;
   left: 0;
   right: 0;
}
.toggle_btn {
   display: block;
   width: 36px;
   height: 25px;
   position: absolute;
}
.toggle_btn span {
   display: block;
   position: absolute;
   width: 36px;
   height: 2px;
   background-color: #000;
   border-radius: 50px;
   transition: all .5s;
}
.toggle_btn span:nth-child(1) {
   top: 0;
}
.toggle_btn span:nth-child(2) {
   top: 11px;
   width: 29px;
   right: 0;
   opacity: 1;
   transition-delay: .1s;
}
.toggle_btn span:nth-child(3) {
   bottom: 0px;
   width: 18px;
   right: 0;
   opacity: 1;
}
.open .toggle_btn span {
   background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
   transform: translate(0px, 11px) rotate(135deg);
   top: 0;
}
.open .toggle_btn span:nth-child(2) {
   transform: translate(0vw, 0px) rotate(45deg);
   transform-origin: center center;
   width: 36px;
}
.open .toggle_btn span:nth-child(3) {
   transform: translate(0, 2px) rotate(0);
   width: 0px;
   opacity: 0;
}
.second {
   padding: 31px;
}
.second h1 {
   font-size: 2rem;
}
.melmaga a {
   border: 1px solid #333;
   padding: 0 10px;
   text-align: center;
   margin-bottom: 1.5rem;
   display: block;
   color: #333;
}
.spheadlogo {
   display: block;
   padding: 13px;
   text-align: center;
   line-height: 1;
}
.navinfo {
   display: flex;
   margin-left: auto;
   letter-spacing: 0;
   font-weight: bold;
   align-items: baseline;
   font-family: "helvetica-bold";
}
.navinfo img {
   display: inline-block;
   margin-right: 8px;
}
.navinfo li:first-child a {
   margin-right: 8px;
}
.navinfo a span {
   display: inline-block;
   position: relative;
   top: -4px;
   margin-right: 17px;
   font-size: 1.3rem;
}
.navsns a {
   line-height: 1;
   display: block;
   margin: 0 5px;
}
.btn_lang {
   background: var(--primary-color);
   color: #fff;
   padding: 0px 7px;
   display: inline-block;
   border-radius: var(--radius-main);
   text-align: center;
}
.head_official {
   background: var(--bland-color);
   padding: 1px 14px;
   display: inline-block;
   text-align: center;
   color: #fff;
   border-radius: var(--radius-btn);
   font-size: 1.4rem;
}
.subhead {
   display: flex;
   margin-left: auto;
}
.subhead li:first-child {
   margin-right: 10px;
}
.subhead li:last-child span {
   display: inline-block;
   margin-right: 10px;
}
.headbox2 {
   display: flex;
   flex-direction: column;
}
.navinner {
   display: flex;
   justify-content: space-between;
}
.open picture, .open .inner ul li a {
   transform: translate(0, 0);
}
.spheadlogo picture {
   transform: translate(-40px, 0);
   transition: all .3s;
}
.open .inner ul li:nth-child(1) a {
   transition-delay: .3s;
   opacity: 1;
}
.open .inner ul li:nth-child(2) a {
   transition-delay: .4s;
   opacity: 1;
}
.open .inner ul li:nth-child(3) a {
   transition-delay: .5s;
   opacity: 1;
}
.open .inner ul li:nth-child(4) a {
   transition-delay: .6s;
   opacity: 1;
}
.open .inner ul li:nth-child(5) a {
   transition-delay: .7s;
   opacity: 1;
}
.open .inner ul li:nth-child(6) a {
   transition-delay: .8s;
   opacity: 1;
}
.open .inner {
   opacity: 1;
   height: 100vh;
   width: calc(100vw - 70%);
   margin-left: auto;
   z-index: 2;
   padding: 50px 30px;
   transform: translate(0px, 0px);
}
.open .inner ul {
   width: 14em;
   height: auto;
}
.inner ul li {
   margin-bottom: 30px;
}
.inner ul li a {
   font-size: 1.3rem;
   transform: translate(-40px, 0);
   transition: ease .6s;
   opacity: 0;
   letter-spacing: 0.2em;
   font-family: 'helvetica-bold', sans-serif;
}
.footer_list li {
   font-size: 1.5rem;
   margin-bottom: 10px;
}
.subhead {
   display: flex;
   margin: 25px;
   flex-direction: column;
   border-top: 1px solid var(--primary-color);
   padding-top: 50px;
   color: #fff;
}
.subhead li:first-child {
   margin-right: 10px;
   margin-bottom: 25px;
}
.headbox2 {
   display: flex;
   flex-direction: column-reverse;
}
.navtop h1 {
   font-size: 1vw;
}
.navinfo a span {
   display: inline-block;
   position: relative;
   top: -4px;
   margin-right: 0vw;
   font-size: 10px;
}
.navtop {
   display: flex;
   align-items: center;
   padding: 4px 10px;
}
.icon_mypage img {
   margin-right: 5px;
}
.cilogo {
   position: absolute;
   left: 20px;
   top: 13px;
   height: auto;
   display: block;
   line-height: 1;
   width: 200px;
}
.cilogo img {
   max-width: 100%;
}
.spheadlogo {
   display: block;
   padding: 13px 0 30px 30px;
   text-align: center;
   line-height: 1;
}
@media(max-width:768px) {
   .header > header {
      display: flex;
      align-items: center;
      padding:4px 10px 4px 15px;
      border-left: 10px solid var(--bland-color);
   }
   .header > header h1 {
      line-height: 0;
      padding: 4px 0px;
   }
   .header {}
   .togglebox {
      margin-right: 0;
      right: 15px;
      top: 15px;
      margin-left: 0px;
   }
   .togglebox {
      background: transparent;
      width: 20px;
      height: 14px;
      transition: all .5s;
      cursor: pointer;
      z-index: 53;
      display: block;
      border-radius: 0;
      margin-left: 0px;
   }
   .toggle_btn {
      display: block;
      width: 21px;
      height: 14px;
      position: absolute;
   }
   .toggle_btn span {
      display: block;
      position: absolute;
      width: 21px;
      height: 2px;
      background-color: #000;
      border-radius: 50px;
      transition: all .5s;
   }
   .open .toggle_btn span:nth-child(1) {
      top: -4px;
   }
   .toggle_btn span:nth-child(2) {
      top: 6px;
      width: 16px;
      right: 0;
      opacity: 1;
      transition-delay: .1s;
   }
   .toggle_btn span:nth-child(3) {
      bottom: 0px;
      width: 11px;
      right: 0;
      opacity: 1;
   }
   .open .toggle_btn span:nth-child(2) {
      top: 7px;
      transform: translate(0vw, 0px) rotate(45deg);
      transform-origin: center center;
      width: 21px;
   }
   .open .inner {
      width: 100%;
   }
}