@charset "UTF-8";

/*======================================================
   Original style
======================================================== */

html,
body {
   height: 100%;
}

html {
   font-size: 62.5%;
   scroll-behavior: smooth;
}

body {
   margin: 0;
   padding: 0;
   overflow-x: hidden;
   color: #333;
   font-size: clamp(1.6rem,1.888vw,2rem);
   font-weight: 500;
   line-height: 1.7;
   word-wrap: break-word;
   font-family: "Outfit", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
   letter-spacing: .01em;
}

body.fixed {
   overflow: hidden;
}

img {
   width: 100%;
   vertical-align: bottom;
}

li {
   list-style-type: none;
}

hr {
   display: none;
}

a,
button {
   -webkit-transition: all .3s;
   transition: all .3s;
}

button {
   border: none;
   appearance: none;
}

a {
   display: block;
}

a:hover {
   opacity: .6;
}

.flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   width: 100%;
}

.nowrap {
   white-space: nowrap;
}


/*=========================================================
   Break Point
==========================================================*/

/* スマホで見たときは"sp"のclassがついたコンテンツを表示 */
.sp {
   display: block !important;
}
.sp_only {
   display: block !important;
}
.sp-tab {
   display: block !important;
}
.tablet {
   display: none !important;
}
.pc {
   display: none !important;
}
.pc_only {
   display: none !important;
}

/* 680px～の場合"tablet"のclassがついたコンテンツを表示 */
@media only screen and (min-width: 680px) {
   .sp_only {
      display: none !important;
   }
   .tablet {
      display: block !important;
   }
}

/* 768px～の場合"tab_only"と"pc"のclassがついたコンテンツを表示 */
@media only screen and (min-width: 768px) {
   .pc {
      display: block !important;
   }
   .sp {
      display: none !important;
   }
}

/* タブレットで見たときは"tablet"のclassがついたコンテンツを表示 */
@media only screen and (min-width: 1024px) {
   .pc_only {
      display: block !important;
   }
   .sp-tab {
      display: none !important;
   }
}

/*==========================================================
   header
===========================================================*/

header {
   position: fixed;
   top: 0;
   width: 100%;
   height: auto;
   z-index: 9999;
}

.header-wrap {
   padding: 2.5% 3.5% 2.5% 2.5%;
}

#header-logo {
   width: 54%;
   max-width: 220px;
   opacity: 1;
   transition: .3s;
   z-index: 9997;
}
#header-logo.is-hidden {
   visibility: hidden;
   opacity: 0;
   transition: .3s;
}

.g-navWrap {
   z-index: 9999;
}

/*
ハンバーガーボタン部分
---------------------------------*/
.hamburger-menu {
   position: relative;
   width: 55px;
   height: 55px;
   cursor: pointer;
   z-index: 9999;
}

.hamburger-menu__bar {
   display: inline-block;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 47px;
   height: 2px;
   border-radius: 5px;
   background: #333;
   transition: .1s;
}

.hamburger-menu__bar:first-child {
   top: 19px;
}

.hamburger-menu__bar:nth-child(2) {
   bottom: 19px;
}

.hamburger-menu.active .hamburger-menu__bar {
   background: #fff;
}

.hamburger-menu.active .hamburger-menu__bar:first-child {
   transform: translateY(9px) translateX(-50%) rotate(30deg);
   transition: .3s;
}

.hamburger-menu.active .hamburger-menu__bar:nth-child(2) {
   transform: translateY(-6px) translateX(-50%) rotate(-30deg);
   transition: .3s;
}

/*hover*/

.hamburger-menu:hover {
   opacity: 1;
}
.hamburger-menu:hover:not(.active) .hamburger-menu__bar:first-child {
   top: 20px;
   transition: .1s;
}
.hamburger-menu:hover:not(.active) .hamburger-menu__bar:nth-child(2) {
   bottom: 20px;
   transition: .1s;
}
.hamburger-menu.active:hover .hamburger-menu__bar {
   background: #EBDAB8;
}

/*
ハンバーガーメニューリスト部分
---------------------------------*/

.navigation {
   position: fixed;
   top: 0;
   right: -400px;
   width: 100%;
   max-width: 400px;
   height: 100%;
   color: #fff;
   background: #333;
   overflow-y: auto;
   transition: all .5s ease;
   z-index: 9998;
}

.navigation.is_active {
   right: 0;
}

.navigation__content-wrap {
   position: relative;
   top: 0;
   padding: 13vh 18%;
}

.navigation__list {
   margin: 0 auto;
   width: 1;
}

.navigation__list--item:not(:last-child) {
   margin-bottom: 40px;
}

.navigation__link {
   display: block;
   font-size: 2rem;
   font-size: clamp(2rem,2.4vw,2.6rem);
   letter-spacing: .12rem;
   line-height: 1.6;
   transition: .5s;
   white-space: nowrap;
}

.navigation__link .en {
   display: block;
   color: #EBDAB8;
   font-size: clamp(1.2rem,1.4vw,1.6rem);
   font-weight: 300;
}

.navigation-bg {
   opacity: 0;
   visibility: hidden;
   transition: .5s all ease-in-out;
   width: 100%;
   height: 100%;
   background-color: #70707085;
   position: fixed;
   z-index: 9993;
   top: 0;
   left: 0;
}

.navigation-bg.is_active {
   visibility: visible;
   opacity: 1;
}



/*==========================================================
   main
===========================================================*/

/*-------- heading ---------*/

h1,
h2,
h3,
h4 {
   line-height: 1.2;
}

/*-------------content box---------------*/

.inner {
   margin: auto;
   width: 90%;
   max-width: 601px;
}

/*---------------bg parts-----------------*/

.bg-line {
   background-size: 100svw;
   background-repeat: no-repeat;
}
.bg-line--upper {
   padding-top: 17%;
}
.bg-line--bottom {
   padding-bottom: 20%;
}

/*---------------margin top-----------------*/

.mt10 {
   margin-top: 10px;
}
.mt15 {
   margin-top: 15px;
}
.mt20 {
   margin-top: 20px;
}
.mt25 {
   margin-top: 25px;
}
.mt30 {
   margin-top: 30px;
}
.mt35 {
   margin-top: 35px;
}
.mt40 {
   margin-top: 40px;
}
.mt45 {
   margin-top: 45px;
}
.mt50 {
   margin-top: 50px;
}
.mt55 {
   margin-top: 55px;
}
.mt60 {
   margin-top: 60px;
}
.mt65 {
   margin-top: 65px;
}
.mt70 {
   margin-top: 70px;
}
.mt75 {
   margin-top: 75px;
}
.mt80 {
   margin-top: 80px;
}
.mt85 {
   margin-top: 85px;
}
.mt90 {
   margin-top: 90px;
}
.mt95 {
   margin-top: 95px;
}
.mt100 {
   margin-top: 100px;
}

/*---------------margin bottom-----------------*/

.mb10 {
   margin-bottom: 10px;
}
.mb15 {
   margin-bottom: 15px;
}
.mb20 {
   margin-bottom: 20px;
}
.mb25 {
   margin-bottom: 25px;
}
.mb30 {
   margin-bottom: 30px;
}
.mb35 {
   margin-bottom: 35px;
}
.mb40 {
   margin-bottom: 40px;
}
.mb45 {
   margin-bottom: 45px;
}
.mb50 {
   margin-bottom: 50px;
}
.mb55 {
   margin-bottom: 55px;
}
.mb60 {
   margin-bottom: 60px;
}
.mb65 {
   margin-bottom: 65px;
}
.mb70 {
   margin-bottom: 70px;
}
.mb75 {
   margin-bottom: 75px;
}
.mb80 {
   margin-bottom: 80px;
}
.mb85 {
   margin-bottom: 85px;
}
.mb90 {
   margin-bottom: 90px;
}
.mb95 {
   margin-bottom: 95px;
}
.mb100 {
   margin-bottom: 100px;
}

/*---------------padding top-----------------*/
.pt10 {
   padding-top: 10px;
}
.pt15 {
   padding-top: 15px;
}
.pt20 {
   padding-top: 20px;
}
.pt25 {
   padding-top: 25px;
}
.pt30 {
   padding-top: 30px;
}
.pt35 {
   padding-top: 35px;
}
.pt40 {
   padding-top:40px;
}
.pt45 {
   padding-top: 45px;
}
.pt50 {
   padding-top: 50px;
}
.pt55 {
   padding-top: 55px;
}
.pt60 {
   padding-top: 60px;
}
.pt65 {
   padding-top: 65px;
}
.pt70 {
   padding-top: 70px;
}
.pt75 {
   padding-top: 75px;
}
.pt80 {
   padding-top: 80px;
}
.pt85 {
   padding-top: 85px;
}
.pt90 {
   padding-top: 90px;
}
.pt95 {
   padding-top: 95px;
}
.pt100 {
   padding-top: 100px;
}

/*---------------padding bottom-----------------*/
.pb10 {
   padding-bottom: 10px;
}
.pb15 {
   padding-bottom: 15px;
}
.pb20 {
   padding-bottom: 20px;
}
.pb25 {
   padding-bottom: 25px;
}
.pb30 {
   padding-bottom: 30px;
}
.pb35 {
   padding-bottom: 35px;
}
.pb40 {
   padding-bottom:40px;
}
.pb45 {
   padding-bottom: 45px;
}
.pb50 {
   padding-bottom: 50px;
}
.pb55 {
   padding-bottom: 55px;
}
.pb60 {
   padding-bottom: 60px;
}
.pb65 {
   padding-bottom: 65px;
}
.pb70 {
   padding-bottom: 70px;
}
.pb75 {
   padding-bottom: 75px;
}
.pb80 {
   padding-bottom: 80px;
}
.pb85 {
   padding-bottom: 85px;
}
.pb90 {
   padding-bottom: 90px;
}
.pb95 {
   padding-bottom: 95px;
}
.pb100 {
   padding-bottom: 100px;
}

/*==========================================================
   footer
===========================================================*/

#footer {
   background: #fff;
}

.footer__logo {
   margin: 0 auto;
   width: 45%;
   max-width: 180px;
}

.copyright {
   padding-bottom: .8em;
   text-align: center;
   font-size: 78%;
}

#online-shop,
#page-top  {
   position: fixed;
   height: auto;
   opacity: 0;
   transition: .5s;
   z-index: 9999;
}

/*online shop*/

#online-shop {
   bottom: -150px;
   right: 3svw;
   width: 22%;
   max-width: 130px;
}

#online-shop.is-show {
   bottom: 2.5svw;
   opacity: 1;
}

#online-shop.switching {
   bottom: -150px !important;
   opacity: 0;
}

/*hover*/
#online-shop a:hover {
   opacity: 1;
}
#online-shop img.change {
   display: none;
}
#online-shop:hover img.change {
   display: block;
}
#online-shop:hover img.basic {
   display: none;
}

/*page top*/

#page-top {
   bottom: 2.5svw;
   right: 5svw;
   width: 16%;
   max-width: 100px;
}

#page-top.switching {
   opacity: 1;
   transition-delay: .3s;
}

@media screen and (min-width:1024px) {

   #online-shop {
      right: 2svw;
      max-width: 150px;
   }

   #online-shop.is-show {
      bottom: 1.5svw;
   }

   #page-top {
      right: 2.6svw;
      bottom: 1svw;
      max-width: 120px;
   }
}


/*================================================================
 タブレット（画面幅768px以上で読み込む）
================================================================*/
@media screen and (min-width:768px) {
   /*==========================================================
      header
   ===========================================================*/
   .header-wrap {
      padding: 1.5% 3.5% 2.5% 2.5%;
   }

   #header-logo {
      width: 32%;
      max-width: 305px;
   }

   /*
   ハンバーガーボタン部分
   ---------------------------------*/
   .hamburger-menu {
      width: 85px;
      height: 85px;
   }

   .hamburger-menu__bar {
      width: 75px;
      height: 3px;
   }

   .hamburger-menu__bar:first-child {
      top: 30px;
   }
   .hamburger-menu__bar:nth-child(2) {
      bottom: 30px;
   }

   .hamburger-menu.active .hamburger-menu__bar:first-child {
      transform: translateY(11px) translateX(-50%) rotate(30deg);
   }
   .hamburger-menu.active .hamburger-menu__bar:nth-child(2) {
      transform: translateY(-10px) translateX(-50%) rotate(-30deg);
   }

   /*hover*/

   .hamburger-menu:hover {
      opacity: 1;
   }
   .hamburger-menu:hover:not(.active) .hamburger-menu__bar:first-child {
      top: 32px;
   }
   .hamburger-menu:hover:not(.active) .hamburger-menu__bar:nth-child(2) {
      bottom: 32px;
   }

   /*
   ハンバーガーメニューリスト部分
   ---------------------------------*/

   .navigation {
      right: -650px;
      width: 50%;
      max-width: 650px;
   }

   .navigation__list--item:not(:last-child) {
      margin-bottom: 55px;
   }

   /*==========================================================
      main
   ===========================================================*/

   /*-------------content box---------------*/

   .inner {
      width: 80%;
      max-width: 780px;
   }

   /*---------------bg parts-----------------*/

   .bg-line--upper {
      padding-top: 12%;
   }
   .bg-line--bottom {
      padding-bottom: 15%;
   }

   @media screen and (min-width:1536px) {
      .bg-line--upper {
         padding-top: 170px;
      }
      .bg-line--bottom {
         padding-bottom: 200px;
      }
   }

   /*---------------margin top-----------------*/

   .mt20 {
      margin-top: 25px;
   }
   .mt25 {
      margin-top: 30px;
   }
   .mt30 {
      margin-top: 40px;
   }
   .mt35 {
      margin-top: 45px;
   }
   .mt40 {
      margin-top: 55px;
   }
   .mt45 {
      margin-top: 60px;
   }
   .mt50 {
      margin-top: 70px;
   }
   .mt55 {
      margin-top: 80px;
   }
   .mt60 {
      margin-top: 90px;
   }
   .mt65 {
      margin-top: 100px;
   }
   .mt70 {
      margin-top: 110px;
   }
   .mt75 {
      margin-top: 120px;
   }
   .mt80 {
      margin-top: 125px;
   }
   .mt85 {
      margin-top: 130px;
   }
   .mt90 {
      margin-top: 135px;
   }
   .mt95 {
      margin-top: 140px;
   }
   .mt100 {
      margin-top: 145px;
   }

   /*---------------margin bottom-----------------*/

   .mb20 {
      margin-bottom: 25px;
   }
   .mb25 {
      margin-bottom: 30px;
   }
   .mb30 {
      margin-bottom: 40px;
   }
   .mb35 {
      margin-bottom: 45px;
   }
   .mb40 {
      margin-bottom: 55px;
   }
   .mb45 {
      margin-bottom: 60px;
   }
   .mb50 {
      margin-bottom: 70px;
   }
   .mb55 {
      margin-bottom: 80px;
   }
   .mb60 {
      margin-bottom: 90px;
   }
   .mb65 {
      margin-bottom: 100px;
   }
   .mb70 {
      margin-bottom: 110px;
   }
   .mb75 {
      margin-bottom: 120px;
   }
   .mb80 {
      margin-bottom: 125px;
   }
   .mb85 {
      margin-bottom: 130px;
   }
   .mb90 {
      margin-bottom: 135px;
   }
   .mb95 {
      margin-bottom: 140px;
   }
   .mb100 {
      margin-bottom: 145px;
   }

   /*---------------padding top-----------------*/

   .pt20 {
      padding-top: 25px;
   }
   .pt25 {
      padding-top: 30px;
   }
   .pt30 {
      padding-top: 40px;
   }
   .pt35 {
      padding-top: 45px;
   }
   .pt40 {
      padding-top: 55px;
   }
   .pt45 {
      padding-top: 60px;
   }
   .pt50 {
      padding-top: 70px;
   }
   .pt55 {
      padding-top: 80px;
   }
   .pt60 {
      padding-top: 90px;
   }
   .pt65 {
      padding-top: 100px;
   }
   .pt70 {
      padding-top: 110px;
   }
   .pt75 {
      padding-top: 120px;
   }
   .pt80 {
      padding-top: 125px;
   }
   .pt85 {
      padding-top: 130px;
   }
   .pt90 {
      padding-top: 135px;
   }
   .pt95 {
      padding-top: 140px;
   }
   .pt100 {
      padding-top: 145px;
   }

   /*---------------padding bottom-----------------*/

   .pb20 {
      padding-bottom: 25px;
   }
   .pb25 {
      padding-bottom: 30px;
   }
   .pb30 {
      padding-bottom: 40px;
   }
   .pb35 {
      padding-bottom: 45px;
   }
   .pb40 {
      padding-bottom: 55px;
   }
   .pb45 {
      padding-bottom: 60px;
   }
   .pb50 {
      padding-bottom: 70px;
   }
   .pb55 {
      padding-bottom: 80px;
   }
   .pb60 {
      padding-bottom: 90px;
   }
   .pb65 {
      padding-bottom: 100px;
   }
   .pb70 {
      padding-bottom: 110px;
   }
   .pb75 {
      padding-bottom: 120px;
   }
   .pb80 {
      padding-bottom: 125px;
   }
   .pb85 {
      padding-bottom: 130px;
   }
   .pb90 {
      padding-bottom: 135px;
   }
   .pb95 {
      padding-bottom: 140px;
   }
   .pb100 {
      padding-bottom: 145px;
   }
}


/*================================================================
   PC（画面幅1024px以上で読み込む）
================================================================*/

@media screen and (min-width:1024px) {

   /*==========================================================
      main
   ===========================================================*/
   /*-------------content box---------------*/

   .inner {
      width: 90%;
      max-width: 1000px;
   }


}