@charset "utf-8";

/*============================
body
============================*/
html { background: #282828; }
body { min-width: 1240px; background: #f9f8f6; }
main {}

/*============================
#js_loading
============================*/
#js_loading { width: 100%; height: 100%; background: #282828; position: fixed; top: 0; left: 0; z-index: 20000; }

.cssload-loader {
  position: relative;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  width: 100px;
  height: 100px;
  perspective: 780px;
}

.cssload-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
.cssload-inner.cssload-one {
  left: 0%;
  top: 0%;
  animation: cssload-rotate-one 1.15s linear infinite;
  -o-animation: cssload-rotate-one 1.15s linear infinite;
  -ms-animation: cssload-rotate-one 1.15s linear infinite;
  -webkit-animation: cssload-rotate-one 1.15s linear infinite;
  -moz-animation: cssload-rotate-one 1.15s linear infinite;
  border-bottom: 3px solid #ccddee;
}
.cssload-inner.cssload-two {
  right: 0%;
  top: 0%;
  animation: cssload-rotate-two 1.15s linear infinite;
  -o-animation: cssload-rotate-two 1.15s linear infinite;
  -ms-animation: cssload-rotate-two 1.15s linear infinite;
  -webkit-animation: cssload-rotate-two 1.15s linear infinite;
  -moz-animation: cssload-rotate-two 1.15s linear infinite;
  border-right: 3px solid #e7e3da;
}
.cssload-inner.cssload-three {
  right: 0%;
  bottom: 0%;
  animation: cssload-rotate-three 1.15s linear infinite;
  -o-animation: cssload-rotate-three 1.15s linear infinite;
  -ms-animation: cssload-rotate-three 1.15s linear infinite;
  -webkit-animation: cssload-rotate-three 1.15s linear infinite;
  -moz-animation: cssload-rotate-three 1.15s linear infinite;
  border-top: 3px solid #c6ab59;
}

@keyframes cssload-rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@-webkit-keyframes cssload-rotate-one {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@keyframes cssload-rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
@-webkit-keyframes cssload-rotate-two {
  0% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
@keyframes cssload-rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
@-webkit-keyframes cssload-rotate-three {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}

/*============================
#header
============================*/
#header { position: fixed; height: 120px; width: 100%; z-index: 99; overflow: hidden; transition: .25s; }
#header::before { content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 120px; background: linear-gradient(rgba(30, 20, 10, .3), rgba(30, 20, 10, 0)); }
#header .logo { position: absolute; left: 50px; top: 50px; transition: .2s; }
#header .logo img { width: 250px; height: auto; }
#header .lang { position: absolute; right: 130px; top: 60px; color: #fff; transition: .25s; }
#header .lang span a { margin: 0 10px; font-size: 1.125em; color: #eee; text-decoration: underline; }
#header .lang span a.active { color: #fff; text-decoration: none; }
#header.hide { height: 80px; }
#header.hide::before { height: 80px; }
#header.hide .logo { top: 20px; }
#header.hide .lang { top: 30px; }
#header.hide .hamburgerMenu .hamburger { top: 20px; }
#header.hide .hamburgerMenu .checkbox-toggle { top: 15px; }
#header .hamburgerMenu { display: block; }
#header .hamburgerMenu .checkbox-toggle { position: absolute; top: 40px; right: 40px; z-index: 9; cursor: pointer; width: 80px; height: 55px; margin-right: 0; opacity: 0; }
#header .hamburgerMenu .checkbox-toggle:checked + .hamburger > div { transform: rotate(135deg); background: #fff; top: -20px; }
#header .hamburgerMenu .checkbox-toggle:checked + .hamburger > div:before,
#header .hamburgerMenu .checkbox-toggle:checked + .hamburger > div:after { top: 0; transform: rotate(90deg); background: #fff; width: 100%; }
#header .hamburgerMenu .checkbox-toggle:checked + .hamburger > div:after { opacity: 0; }
#header .hamburgerMenu .checkbox-toggle:checked + .hamburger span { color: #fff; }
#header .hamburgerMenu .checkbox-toggle:checked ~ .menu { pointer-events: auto; visibility: visible; }
#header .hamburgerMenu .checkbox-toggle:checked ~ .menu > div { transform: scale(1); transition-duration: 0.5s; }
#header .hamburgerMenu .checkbox-toggle:checked ~ .menu > div > div { opacity: 1; transition: opacity 0.4s ease 0.4s; }
#header .hamburgerMenu .checkbox-toggle:checked:hover + .hamburger > div { transform: rotate(225deg); }
#header .hamburgerMenu .hamburger { position: absolute; top: 50px; right: 40px; z-index: 8; width: 80px; height: 55px; padding: 0 15px 10px; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; align-items: center;  justify-content: center; transition: .25s; }
#header .hamburgerMenu .hamburger > div { position: relative; top: -20px; flex: none; width: 100%; height: 1px; background: #fff; transition: all 0.4s ease; display: flex; align-items: center; justify-content: center; }
#header .hamburgerMenu .hamburger > div:before,
#header .hamburgerMenu .hamburger > div:after { content: ''; position: absolute; z-index: 1; top: -20px; left: 0; width: 100%; height: 1px; background: inherit; transition: all 0.4s ease; }
#header .hamburgerMenu .hamburger > div:before { top: 10px; width: 70%; }
#header .hamburgerMenu .hamburger > div:after { opacity: 0; }
#header .hamburgerMenu .hamburger span { position: absolute; width: 100%; text-align: center; bottom: 7px; right: 0; z-index: 1; color: #fff; font-size: 0.875em; letter-spacing: 0.1em; }
#header .hamburgerMenu .menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: 1px solid transparent; display: flex; align-items: center; justify-content: center; }
#header .hamburgerMenu .menu > div { width: 300vw; height: 300vw; color: #111; background: rgba(25,25,25,0.95); border-radius: 50%; transition: all 0.4s ease; flex: none; transform: scale(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#header .hamburgerMenu .menu > div > div { text-align: left; max-width: 100vw; max-height: 100vh; opacity: 0; transition: opacity 0.4s ease; }
#header .hamburgerMenu .menu > div > div > .logoMENU { padding-bottom: 1.5em; border-bottom: solid 1px #777; }
#header .hamburgerMenu .menu > div > div > .logoMENU img { width: 100%; height: auto; }
#header .hamburgerMenu .menu > div > div > ul { list-style: none; margin: 40px 0 0 0; display: block; max-height: 100vh; }
#header .hamburgerMenu .menu > div > div > ul > li { width: 300px; padding: 0; margin-top: 10px; font-size: 1em; display: block; position: relative; }
#header .hamburgerMenu .menu > div > div > ul > li > a { position: relative; display: block; padding: 10px 0; cursor: pointer; letter-spacing: 0.1em; color: #fff; font-size: 1.125em; transition: opacity 0.4s ease; }
#header .hamburgerMenu .menu > div > div > ul > li > a::after { content: ""; display: block; width: 15px; height: 15px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url("../../imageFile/global/arrow_wh.svg") no-repeat center; background-size: 8px auto; transition: .25s; }

#header .hamburgerMenu .menu > div > div > ul > li.top { margin-bottom: 40px;}
#header .hamburgerMenu .menu > div > div > ul > li.top::after { content: ""; position: absolute; left: 0; bottom: -20px; width: 24px; height: 2px; border-bottom: dotted 1px #777; }	
#header .hamburgerMenu .menu > div > div > ul > li.top a { font-size: 1.75em; }
#header .hamburgerMenu .menu > div > div > ul > li.top a::after { display: none; }
#header .hamburgerMenu .menu > div > div > ul > li.subTitle {}
#header .hamburgerMenu .menu > div > div > .langMENU { margin: 40px 0 0 0; border-top: solid 1px #777; padding-top: 1.5em; color: #fff; text-align: right; transition: .25s; }
#header .hamburgerMenu .menu > div > div > .langMENU span a { margin: 0 10px; font-size: 1.125em; color: #ccc; text-decoration: underline; }
#header .hamburgerMenu .menu > div > div > .langMENU span a.active { color: #eee; text-decoration: none; }


#header.black {}
#header.black::before { background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)); }
#header.black .lang { color: #222; }
#header.black .lang span a { color: #555; }
#header.black .lang span a.active { color: #222; }
#header.black .hamburgerMenu .checkbox-toggle:checked + .hamburger > div { background: #222; }
#header.black .hamburgerMenu .checkbox-toggle:checked + .hamburger > div:before,
#header.black .hamburgerMenu .checkbox-toggle:checked + .hamburger > div:after { background: #222; }
#header.black .hamburgerMenu .checkbox-toggle:checked + .hamburger > div:after {}
#header.black .hamburgerMenu .checkbox-toggle:checked + .hamburger span { color: #222; }
#header.black .hamburgerMenu .hamburger > div { background: #222; }
#header.black .hamburgerMenu .hamburger > div:before,
#header.black .hamburgerMenu .hamburger > div:after {}
#header.black .hamburgerMenu .hamburger > div:before {}
#header.black .hamburgerMenu .hamburger > div:after { }
#header.black .hamburgerMenu .hamburger span { color: #222; }

/*============================
#footer
============================*/
#footer { padding: 40px 25px 25px; background: #282828; }
#footer .sns {}
#footer .sns ul { display: flex; align-content: space-between; justify-content: center; }
#footer .sns ul li { margin: 0 10px; }
#footer .sns ul li a { display: block; }
#footer .sns ul li a img { width: 24px; height: auto; }
#footer .copy { margin-top: 30px; text-align: center; color: #eee; line-height: 1.25; }
#footer .copyright { margin-top: 20px; color: #fff; font-size: 0.975em; line-height: 1.5; text-align: center; }