@charset "utf-8";
/* ---------------------
  - webfont

  - root

  - html
  - body

  - logo

  - header
  - headerWrapper
    - headerWrapper__logo
    - headerWrapper__drawer

  - drawerButton
    - is-open
    - is-close
  - drawerMenu
    - drawerMenu__button
    - drawerMenu__nav
      - is-open
  - drawerNav
    - drawerNav__item
  - drawerDesc
    - drawerDesc__term
    - drawerDesc__detail
  - drawerItem
    - drawerItem__name

  - main

  - footer
  - footerWraper
    - footerWraper__item
      - is-menu
      - is-logo
  - footerMenu
    - footerMenu__item
  - footerNav
    - footerNav__item
  - footerState
    - footerState__item

  - license
  - copyright

  - floatingNotice
  - floatingNoticeWrapper
    - floatingNoticeWrapper__text
    - floatingNoticeWrapper__button
--------------------- */



/* -----------------------------------
  webfont
----------------------------------- */
@font-face {
  font-family: "icomoon";
  src: url("/fonts/icomoon.eot?f8rbk0");
  src: url("/fonts/icomoon.eot?f8rbk0#iefix") format("embedded-opentype"),
       url("/fonts/icomoon.ttf?f8rbk0") format("truetype"),
       url("/fonts/icomoon.woff?f8rbk0") format("woff"),
       url("/fonts/icomoon.svg?f8rbk0#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-link:before {
  content: "\e903";
}

.icon-arrow:before {
  content: "\e900";
}

.icon-open:before {
  content: "\e901";
}

.icon-close:before {
  content: "\e902";
}



/* -----------------------------------
  root
----------------------------------- */
:root {
  --drawerButton-width: clamp( 4.285714296rem, 7.8125cqw, 6.25rem ); /* 60/14 100/12.8 100/16 */

  --width-max: 1440px;
  --width-max-large: calc( 1200px + ( 80px * 2 ) );
  --width-max-middle: calc( 1000px + ( 80px * 2 ) );
  --width-max-small: calc( 800px + ( 80px * 2 ) );

  --padding-block: clamp( 40px, 6.25cqw, 5rem ); /* 80/12.8 80/16 */
  --padding-inline: clamp( 20px, 6.25cqw, 5rem );

  --color: #151615;
  --color-rgb: 21, 22, 21;
  --color-sub: #7c7f7e;
  --color-sub-rgb: 124, 127, 126;

  --color-primary: #cd9533;
  --color-primary-rgb: 205, 149, 51;

  --color-secondary: #edf0f0;
  --color-secondary-rgb: 237, 240, 240;

  --color-secondary-dark: #d1d7d7;
  --color-secondary-dark-rgb: 209, 215, 215;

  --color-border: #d1d7d7;
  --color-border-rgb: 209, 215, 215;

  --color-placeholder: #aaa;
  --color-placeholder-rgb: 170, 170, 170;

  --color-requid: #d73030;
  --color-requid-rgb: 215, 48, 48;

  --color-line: #06c755;
  --color-line-rgb: 6, 199, 85;
  --gradient-line: radial-gradient( 215% 215% at 50% -40%, var(--color-line) 0%, #01923c 63% );

  --color-tel: #555;
  --color-tel-rgb: 85, 85, 85;
  --gradient-tel: radial-gradient( 215% 215% at 50% -40%, var(--color-tel) 0%, #393939 63% );

  --color-title: #e8Be75;
  --color-title-rgb: 232, 190, 117;
  --gradient-title: linear-gradient( 180deg, var(--color-title) 0%, rgba( var(--color-title-rgb), .4 ) 45%, rgba( var(--color-title-rgb), 0 ) 90% );

  --color-gray: #585858;
  --color-gray-rgb: 88, 88, 88;
  --gradient-gray: linear-gradient( 180deg, var(--color-gray) 0%, rgba( var(--color-gray-rgb), .4 ) 45%, rgba( var(--color-gray-rgb), 0 ) 90% );

  --color-white: #fff;
  --color-white-rgb: 255, 255, 255;
  --gradient-white: linear-gradient( 180deg, var(--color-white) 0%, rgba( var(--color-white-rgb), .4 ) 45%, rgba( var(--color-white-rgb), 0 ) 90% );

  --font-family: heisei-kaku-gothic-std, sans-serif;
  --font-family-instrument: "Instrument Serif", serif;
  --font-family-inter: "Inter", sans-serif;

  --webfont: "icomoon";
  --webfont-arrow: "\e900";
}



/* -----------------------------------
  html
----------------------------------- */
@media ( min-width: 390.1px ) {
  html {
    font-size: clamp( 14px, 1.678657088cqw, 16px ); /* 14/8.34 */
  }
}
@media ( max-width: 390px ) {
  html {
    font-size: 3.589743599cqw; /* 14/3.9 */
  }
}



/* -----------------------------------
  body
----------------------------------- */
body {
  color: var(--color);
  font-weight: 300;
  font-family: var(--font-family);
  line-height: 1.8;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: none;
          text-size-adjust: none;
}

body:before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  z-index: 999999;
  opacity: .5;
  margin-inline: auto;
  background-color: #c00;
  /*content: " ";*/
}



/* -----------------------------------
  logo
----------------------------------- */
.logo {
  font-size: 1rem;
}

.logo a {
  display: block;
  position: relative;
  aspect-ratio: 9 / 2;
  overflow: hidden;
  background-image: url("/img/logo.svg");
  background-position: 50% 50%;
  -webkit-background-size: contain;
          background-size: contain;
  background-repeat: no-repeat;
}

.logo span {
  display: block;
  position: absolute;
  top: 0;
  left: 200%;
  white-space: nowrap;
}



/* -----------------------------------
  header
----------------------------------- */
#header {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}

body:has( .JS-headerOver ) #header {
  position: fixed;
}



/* -----------------------------------
  headerWrapper
----------------------------------- */
#headerWrapper {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  justify-content: space-between;
  -ms-align-items: center;
      align-items: center;
  position: relative;
}

#headerWrapper:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  background-color: var(--color);
  content: " ";
  -webkit-transition: width .25s;
       -o-transition: width .25s;
          transition: width .25s;
}

body:has( .JS-headerOver ) #headerWrapper:after {
  width: var(--drawerButton-width);
}

body:has( .JS-headerOver ) #header.is-over #headerWrapper:after {
  width: 100%;
}


/*  headerWrapper__logo
------------------------ */
#headerWrapper__logo {
  padding-inline: clamp( 20px, 3.125cqw, 2.5em ); /* 40/12.8 40/16 */
}

#headerWrapper__logo .logo {
  width: clamp( 11.428571433em, 17.578125cqw, 14.0625em ); /* 160/14 225/12.8 225/16 */
}

body:has( .JS-headerOver ) #header:not( .is-over ) #headerWrapper__logo .logo a {
  background-image: url("/img/logo-bk.svg");
}


/*  headerWrapper__drawer
------------------------ */
#headerWrapper__drawer:after {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  background-color: rgba( var(--color-primary-rgb), .6 );
  content: " ";
  -webkit-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

#headerWrapper__drawer:has( #drawerMenu.is-open ):after {
  visibility: visible;
  opacity: 1;
}



/* -----------------------------------
  drawerButton
----------------------------------- */
.drawerButton {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  justify-content: center;
  -ms-align-items: center;
      align-items: center;
  position: relative;
  aspect-ratio: 1 / 1;
  width: var(--drawerButton-width);
  margin-left: auto;
  overflow: hidden;
  color: var(--color-white);
  cursor: pointer;
}

.drawerButton:before {
  display: block;
  -webkit-flex: none;
     -moz-flex: none;
      -ms-flex: none;
       -o-flex: none;
          flex: none;
  font-size: clamp( 1.428571439rem, 2.5cqw, 2rem ); /* 20/14 32/12.8 32/16 */
  font-family: var(--webfont);
  line-height: 1;
}

.drawerButton span {
  position: absolute;
  top: 0;
  left: 200%;
  white-space: nowrap;
}


/*  is-open
------------------------ */
.drawerButton.is-open:before {
  content: "\e901";
}


/*  is-close
------------------------ */
.drawerButton.is-close:before {
  content: "\e902";
}



/* -----------------------------------
  drawerMenu
----------------------------------- */
#drawerMenu {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
       -o-flex-direction: column;
          flex-direction: column;
  justify-content: flex-start;
  -ms-align-items: stretch;
      align-items: stretch;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  -webkit-transform: translateX( 120% );
      -ms-transform: translateX( 120% );
       -o-transform: translateX( 120% );
          transform: translateX( 120% );
  width: 18.888888889em; /* 340/18 */
  /*height: 100vh;*/
  padding-bottom: calc( var(--padding-block) / 2 );
  background-color: var(--color);
  font-size: clamp( 1rem, 1.40625cqw, 1.125rem ); /* 18/12.8 18/16 */
  -webkit-transition: transform .5s;
       -o-transition: transform .5s;
          transition: transform .5s;
}


/*  drawerMenu__button
------------------------ */


/*  drawerMenu__nav
------------------------ */
#drawerMenu__nav {
  -webkit-flex: 1;
     -moz-flex: 1;
      -ms-flex: 1;
       -o-flex: 1;
          flex: 1;
  padding-inline: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba( var(--color-white-rgb), .25 ) transparent;
}


/*  is-open  */
#drawerMenu.is-open {
  -webkit-transform: translateX( 0 );
      -ms-transform: translateX( 0 );
       -o-transform: translateX( 0 );
          transform: translateX( 0 );
  -webkit-transition: transform .5s;
       -o-transition: transform .5s;
          transition: transform .5s;
}



/* -----------------------------------
  drawerNav
----------------------------------- */
.drawerNav {
  list-style: none;
  padding: 0;
}


/*  drawerNav__item
------------------------ */
.drawerNav__item a {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  justify-content: space-between;
  -ms-align-items: stretch;
      align-items: stretch;
  gap: 1.11111111em; /* 20/18 */
  color: var(--color-white);
  text-decoration: none;
}

.drawerNav__item a:after {
  display: block;
  -webkit-flex: none;
     -moz-flex: none;
      -ms-flex: none;
       -o-flex: none;
          flex: none;
  -ms-align-self: center;
      align-self: center;
  font-size: 8px;
  font-family: var(--webfont);
  line-height: 1;
  content: var(--webfont-arrow);
}

.drawerNav__item + .drawerNav__item {
  margin-top: 1.11111111em; /* 20/18 */
}



/* -----------------------------------
  drawerItem
----------------------------------- */
.drawerItem {
  -webkit-flex: 1;
     -moz-flex: 1;
      -ms-flex: 1;
       -o-flex: 1;
          flex: 1;
  padding-block: .555555556em; /* 10/18 */
}

.drawerItem[style] {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  justify-content: flex-start;
  -ms-align-items: center;
      align-items: center;
  gap: 1.11111111em; /* 20/18 */
}

.drawerItem:before {
  display: block;
  -webkit-flex: none;
     -moz-flex: none;
      -ms-flex: none;
       -o-flex: none;
          flex: none;
  aspect-ratio: 3 / 5;
  width: 2.22222222em; /* 40/18 */
  background-image: var(--watch);
  background-position: 50% 50%;
  -webkit-background-size: contain;
          background-size: contain;
  background-repeat: no-repeat;
}
  
.drawerItem[style]:before {
  content: " ";
}


/*  drawerItem__name
------------------------ */
.drawerItem__name {
  line-height: 1.5;
}

.drawerItem[style] .drawerItem__name {
  -webkit-flex: 1;
     -moz-flex: 1;
      -ms-flex: 1;
       -o-flex: 1;
          flex: 1;
}

.drawerItem__name:before {
  display: block;
  color: var(--color-secondary-dark);
  font-weight: 700;
  content: attr(data-title);
}

.drawerItem__name span {
  display: block;
  color: var(--color-white);
  font-size: .777777778em; /* 14/18 */
  letter-spacing: .1em;
}



/* -----------------------------------
  drawerDesc
----------------------------------- */
/*  drawerDesc__term
------------------------ */
#drawerDesc__term {
  margin-bottom: 1.428571439em; /* 20/14 */
  padding-block: 10px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-white);
  font-weight: 700;
  font-size: max( 12px, .777777778em ); /*14/18 */
  letter-spacing: .1em;
  line-height: 1.5;
}


/*  drawerDesc__detail
------------------------ */



/* -----------------------------------
  main
----------------------------------- */



/* -----------------------------------
  footer
----------------------------------- */
#footer {
  padding-block: var(--padding-block);
  padding-inline: var(--padding-inline);
  background-color: var(--color);
}



/* -----------------------------------
  footerWraper
----------------------------------- */
#footerWraper {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  justify-content: center;
  -ms-align-items: stretch;
      align-items: stretch;
  gap: clamp( 1.428571439em, 3.125cqw, 2.5em ); /* 20/14 40/12.8 40/16 */
}
@media ( max-width: 600px ) {
  #footerWraper {
    -webkit-flex-direction: column;
       -moz-flex-direction: column;
        -ms-flex-direction: column;
         -o-flex-direction: column;
            flex-direction: column;
  }
}


#footerWraper:after {
  display: block;
  -ms-align-self: stretch;
      align-self: stretch;
  content: " ";
}
@media ( min-width: 600.1px ) {
  #footerWraper:after {
    border-left: 1px solid var(--color-white);
  }
}
@media ( max-width: 600px ) {
  #footerWraper:after {
    border-top: 1px solid var(--color-white);
  }
}



/*  footerWraper__item
------------------------ */
/*  is-menu  */
.footerWraper__item.is-menu {
  -webkit-order: 1;
     -moz-order: 1;
      -ms-order: 1;
       -o-order: 1;
          order: 1;
}


/*  is-logo  */
@media ( min-width: 600.1px ) {
  .footerWraper__item.is-logo {
    -ms-align-self: flex-start;
        align-self: flex-start;
  }
}

.footerWraper__item.is-logo .logo {
  width: clamp( 11.285714299em, 17.578125cqw, 14.0625em ); /* 158/14 225/12.8 225/16 */
  margin-inline: auto;
}



/* -----------------------------------
  footerMenu
----------------------------------- */
#footerMenu {
  --footerMenu-gap: 10px clamp( 1em, 1.5625cqw, 1.25em ); /* 20/12.8 20/16 */
}


/*  footerMenu__item
------------------------ */
.footerMenu__item + .footerMenu__item {
  margin-top: clamp( 1em, 1.5625cqw, 1.25em ); /* 20/12.8 20/16 */
}



/* -----------------------------------
  footerNav
----------------------------------- */
#footerNav {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  -webkit-flex-wrap: wrap;
     -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
       -o-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-align-items: baseline;
      align-items: baseline;
  gap: var(--footerMenu-gap);
  inline-size: fit-content;
}
@media ( min-width: 600.1px ) {
  #footerNav {
    justify-content: flex-start;
  }
}
@media ( max-width: 600px ) {
  #footerNav {
    justify-content: center;
    margin-inline: auto;
  }
}


/*  footerNav__item
------------------------ */
.footerNav__item a {
  color: var(--color-white);
  text-decoration: none;
}



/* -----------------------------------
  footerState
----------------------------------- */
#footerState {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  -webkit-flex-wrap: wrap;
     -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
       -o-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-direction: row-reverse;
     -moz-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
       -o-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -ms-align-items: baseline;
      align-items: baseline;
    gap: var(--footerMenu-gap);
  inline-size: fit-content;
}
@media ( min-width: 600.1px ) {
  #footerState {
    justify-content: flex-end;
  }
}
@media ( max-width: 600px ) {
  #footerState {
    justify-content: center;
    margin-inline: auto;
  }
}


/*  footerState__item
------------------------ */



/* -----------------------------------
  license
----------------------------------- */
#license {
  color: var(--color-white);
}



/* -----------------------------------
  copyright
----------------------------------- */
#copyright {
  color: var(--color-white);
}

#copyright small {
  font-size: inherit;
}


/* -----------------------------------
  floatingNotice
----------------------------------- */
#floatingNotice {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  background-color: var(--color-white);
}

#floatingNotice .inner {
  padding-block: max( 20px, calc( var(--padding-block) / 2 ) );
  padding-inline: max( 20px, calc( var(--padding-inline) / 2 ) );
}



/* -----------------------------------
  floatingNoticeWrapper
----------------------------------- */
#floatingNoticeWrapper {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  justify-content: center;
  -ms-align-items: stretch;
      align-items: stretch;
  gap: 20px max( 20px, 2.5em ); /* 40/16 */
  font-size: clamp( .857142861rem, 1.25cqw, 1rem ); /* 12/14 16/12.8 */
}
@media ( max-width: 600px ) {
  #floatingNoticeWrapper {
    -webkit-flex-direction: column;
       -moz-flex-direction: column;
        -ms-flex-direction: column;
         -o-flex-direction: column;
            flex-direction: column;
  }
}


/*  floatingNoticeWrapper__text
------------------------ */
#floatingNoticeWrapper__text {
  -webkit-flex: 1;
     -moz-flex: 1;
      -ms-flex: 1;
       -o-flex: 1;
          flex: 1;
  letter-spacing: .1em;
}

#floatingNoticeWrapper__text a {
  color: var(--color);
}


/*  floatingNoticeWrapper__button
------------------------ */
#floatingNoticeWrapper__button {
  -webkit-flex: none;
     -moz-flex: none;
      -ms-flex: none;
       -o-flex: none;
          flex: none;
}

#floatingNoticeWrapper__button button {
  display: block;
  width: 10em;
  margin: 0 auto;
  padding: .5em 1em;
  border: none;
  border-radius: 3lh;
  background-color: var(--color);
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.125em; /* 18/16 */
  letter-spacing: .1em;
  text-indent: .1em;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}