@charset "utf-8";

/* **************************************************

  Display property
  
************************************************** */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

@media screen and (min-width:600px) {
.d-sm-none { display: none !important; }
.d-sm-block { display: block !important; }
.d-sm-inline { display: inline !important; }
.d-sm-inline-block { display: inline-block !important; }
}

@media screen and (min-width:768px) {
.d-md-none { display: none !important; }
.d-md-block { display: block !important; }
.d-md-inline { display: inline !important; }
.d-md-inline-block { display: inline-block !important; }
}

@media screen and (min-width:960px) {
.d-lg-none { display: none !important; }
.d-lg-block { display: block !important; }
.d-lg-inline { display: inline !important; }
.d-lg-inline-block { display: inline-block !important; }
}

@media screen and (min-width:1280px) {
.d-xl-none { display: none !important; }
.d-xl-block { display: block !important; }
.d-xl-inline { display: inline !important; }
.d-xl-inline-block { display: inline-block !important; }
}



/* **************************************************

  Text
  
************************************************** */
/* ==============================
  Text wrapping and overflow
============================== */
.text-justify { text-align: justify!important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==============================
  Text alignment
============================== */
.text-transform-uppercase { text-transform: uppercase !important; }
.text-transform-lowercase { text-transform: lowercase !important; }


/* ==============================
  Text alignment
============================== */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

@media screen and (min-width:480px) {
.text-sm-left { text-align: left !important; }
.text-sm-right { text-align: right !important; }
.text-sm-center { text-align: center !important; }
}

@media screen and (min-width:600px) {
.text-md-left { text-align: left !important; }
.text-md-right { text-align: right !important; }
.text-md-center { text-align: center !important; }
}

@media screen and (min-width:960px) {
.text-lg-left { text-align: left !important; }
.text-lg-right { text-align: right !important; }
.text-lg-center { text-align: center !important; }
}

@media screen and (min-width:1280px) {
.text-xl-left { text-align: left !important; }
.text-xl-right { text-align: right !important; }
.text-xl-center { text-align: center !important; }
}


/* ==============================
  Font weight and italics
============================== */
.font-weight-light { font-weight: 300!important; }
.font-weight-normal { font-weight: 400!important; }
.font-weight-bold { font-weight: 700!important; }
.font-italic { font-style: italic!important; }


/* ==============================
  Vertical alignment
============================== */
.align-baseline { vertical-align: baseline!important; }
.align-top { vertical-align: top!important; }
.align-middle { vertical-align: middle!important; }
.align-bottom { vertical-align: bottom!important; }
.align-text-bottom { vertical-align: text-bottom!important; }
.align-text-top { vertical-align: text-top!important; }



/* **************************************************

  Position
  
************************************************** */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }



/* **************************************************

  Sizing
  
************************************************** */
.w-100 { width: 100% !important; }
.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }



/* **************************************************

  Spacing
  
************************************************** */
.mx-auto { margin-right: auto!important; }
.mx-auto { margin-left: auto!important; }



/* **************************************************

  Visibility
  
************************************************** */
.visible { visibility: visible!important; }
.invisible { visibility: hidden!important; }



/* **************************************************

  marker
  
************************************************** */
@media screen and (min-width:768px) {
.marker .marker-bar {
  background-image: -webkit-linear-gradient(left, #1d1d1a 50%, transparent 50%);
  background-image: linear-gradient(to right, #1d1d1a 50%, transparent 50%);
  background-position: 100% 0%;
  background-size: 202% auto;
  background-repeat: no-repeat;
  -webkit-transition: color 0.5s ease-out, background-position 0.5s ease-out;
  transition: color 0.5s ease-out, background-position 0.5s ease-out;
  padding-left: 0.2em;
}
.marker:hover .marker-bar,
.hover .marker .marker-bar {
  color: #fcfcfc;
  background-position: 0% 0%;
}
html.has-effect .marker .marker-bar {
  -webkit-transition: none;
  transition: none;
}
}



/* **************************************************

  fx-btn
  
************************************************** */
.fx-btn {
  display: block;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  -webkit-transition: color 0.2s ease, background 0.2s ease, border 0.2s ease;
  transition: color 0.2s ease, background 0.2s ease, border 0.2s ease;
}
.fx-btn:before {
  background: rgba(255,255,255,0.5);
  content: '';
  width: 140%;
  height: 140%;
  mix-blend-mode: hard-light;
  z-index: 1;
  position: absolute;
  top: 80%;
  left: -120%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: top 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59), left 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: top 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59), left 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}

@media screen and (min-width:768px) {
.fx-btn:hover:before {
  top: -20%;
  left: -20%;
}
.fx-btn img {
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}
.fx-btn:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
}



/* **************************************************

  button
  
************************************************** */
.btn {
  line-height: 1.5;
  color: #1d1d1a;
  text-decoration: none !important;
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0.06em;
  text-align: center;
  box-sizing: border-box;
  border: solid 1px #deddd5;
  position: relative;
  overflow: hidden;
  -webkit-transition: color 0.2s ease, background 0.2s ease, border 0.2s ease;
  transition: color 0.2s ease, background 0.2s ease, border 0.2s ease;
}

@media screen and (min-width:768px) {
.btn:before {
  background: #080807;
  content: '';
  width: 120%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -140%;
  -webkit-transform: skewX(30deg);
  transform: skewX(30deg);
  -webkit-transition: left 0.5s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: left 0.5s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.btn:hover:before { left: -10%; }
.btn > span {
  position: relative;
  z-index: 1;
}
}


/* ==============================
  dark
============================== */
.section.black .btn {
  color: #fcfcfc;
  border-color: #deddd5;
}
.section.black .btn:before { background: #fcfcfc; }

@media screen and (min-width:768px) {
.btn:hover { color: #fcfcfc; }
.section.black .btn:hover {
  color: #080807;
  border-color: #fcfcfc;
}
}


/* ========================================
  btn-a
======================================== */
.btn.btn-a {
  font-size: 2.666666666666667vw;
  min-width: 126px;
  padding: 1.15em 1em;
}

@media screen and (min-width:600px) {
.btn.btn-a { font-size: 10px; }
}


/* ========================================
  btn-b
======================================== */
.btn.btn-b {
  font-size: 3.2vw;
  min-width: 220px;
  padding: 1.321428571428571em 1em;
}

@media screen and (min-width:600px) {
.btn.btn-b { font-size: 14px; }
}



/* **************************************************

  circle-loader
  
************************************************** */
.circle-loader {
  display: inline-block;
  border-radius: 50%;
  position: relative;
}
.circle-loader a { display: block; }
/*
.circle-loader.button { cursor: pointer; }
*/
.circle-loader .txt {
  font-size: 2.666666666666667vw;
  display: block;
  letter-spacing: 0.05em;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-35%);
  transform: translate(-50%,-35%);
}
.circle-loader .txt i {
  line-height: 1;
  color: #c7c5bc;
  display: block;
  margin-top: 0.25em;
}
.circle-loader .circle {
  width: 24vw;
  height: 24vw; 
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.circle-loader .circle svg {
  display: block;
  vertical-align: top;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotate(-90deg) scaleY(-1);
  transform: rotate(-90deg) scaleY(-1);
  -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.circle-loader .circle svg path {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 0;
  stroke: #080807;
  opacity: 0.2;
}
.circle-loader .circle svg:nth-child(2) path {
  stroke: #080807;
  stroke-dashoffset: 0;
  stroke-dasharray: 629;
  opacity: 1;
  stroke-dashoffset: 629;
  -webkit-transition: stroke-dashoffset 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: stroke-dashoffset 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ==============================
  dark
============================== */
.section.black .circle-loader .circle svg path,
.section.black .circle-loader .circle svg:nth-child(2) path { stroke: #fcfcfc; }

@media screen and (min-width:600px) {
.circle-loader .txt { font-size: 10px; }
.circle-loader .circle {
  width: 90px;
  height: 90px; 
}
}

@media screen and (min-width:768px) {
.circle-loader.button:hover .circle {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.circle-loader.button:hover .circle svg {
  -webkit-transform: rotate(90deg) scaleY(-1);
  transform: rotate(90deg) scaleY(-1);
}
.circle-loader.button:hover .circle svg:nth-child(2) path { stroke-dashoffset: 0; }
}



/* **************************************************

  form
  
************************************************** */
/* ========================================
  text
======================================== */
.input-text {
  font-size: 3.2vw;
  line-height: 1.5;
  background: #f4f4f1;
  display: block;
  box-sizing: border-box;
  letter-spacing: 0.03em;
  width: 100%;
  padding: 0.75em 1em;
  border: none;
  resize: none;
}

/* ==============================
  dark
============================== */
.section.black .input-text { background: #fcfcfc; }

@media screen and (min-width:600px) {
.input-text {
  font-size: 12px;
  padding: 0.9166666666666667em 1.166666666666667em;
}
}


/* ========================================
  selectbox
======================================== */
.c-selectbox {
  font-size: 3.2vw;
  line-height: 1.5;
  display: block;
  letter-spacing: 0.03em;
  position: relative;
}
.c-selectbox select {
  color: #080807;
  background: #fcfcfc;
  display: block;
  box-sizing:border-box;
  width: 100%;
  padding: 0.9166666666666667em 1.166666666666667em;
  border: solid 1px #deddd5;
  /*cursor: pointer;*/
}
.c-selectbox::-ms-expand { display: none; }
.c-selectbox select:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.c-selectbox:before {
  font-family: 'icon';
  font-size: 1em;
  line-height: 1;
  color: #080807;
  content: "\e908";
  display: block;
  pointer-events: none;
  z-index: 1;
  position: absolute;
  top: 50%;
  right: 1.2em;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* ==============================
  dark
============================== */
.section.black .c-selectbox select {
  color: #fcfcfc;
  background: #080807;
  border: solid 1px #7c7c7a;
}
.section.black .c-selectbox:before { color: #fcfcfc; }

@media screen and (min-width:600px) {
.c-selectbox { font-size: 12px; }
.c-selectbox select { padding: 0.9166666666666667em 4.333333333333333em 0.9166666666666667em 1.166666666666667em; }
.c-selectbox:before {
  -webkit-transform: translateY(-50%) scale(0.8);
  transform: translateY(-50%) scale(0.8);
}
}

@media screen and (min-width:600px) {
.c-selectbox.size-x2 select {
  font-size: 14px;
  padding: 0.5714285714285714em 2.285714285714286em 0.5714285714285714em 0.5714285714285714em;
}
}


/* ========================================
  checkbox
======================================== */
.c-checkbox {
  font-size: 3.2vw;
  line-height: 1.25;
  display: inline-block;
  position: relative;
}
.c-checkbox label { font-size: inherit; }
.c-checkbox input[type="checkbox"] {
  font-size: 0;
  display: block;
  width: 100%;
  height: 100%;
  /*cursor: pointer;*/
  opacity: 0;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
}
.c-checkbox input[type="checkbox"] + * {
  box-sizing: border-box;
  display: block;
  min-width: 1.25em;
  min-height: 1.25em;
  padding-left: 2em;
  position: relative;
}
.c-checkbox input[type="checkbox"] + *:before,
.c-checkbox input[type="checkbox"] + *:after {
  font-size: 0.8333333333333333em;
  line-height: 1.5;
  color: #080807;
  box-sizing: border-box;
  letter-spacing: 0;
  display: block;
  content: "";
  text-align: center;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: 0;
  left: 0;
}
.c-checkbox input[type="checkbox"] + *:before {
  background: #fcfcfc;
  border: solid 1px #deddd5;
}
.c-checkbox input[type="checkbox"]:checked + *:after {
  font-family: 'icon';
  content: "\e904";
  -webkit-transform-origin: center center;
  transform-origin: center center;
}


/* ==============================
  dark
============================== */
.section.black .c-checkbox input[type="checkbox"] + *:before { border: none; }

@media screen and (min-width:600px) {
.c-checkbox { font-size: 12px; }
}



/* **************************************************

  pagination
  
************************************************** */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pagination .wp-pagenavi {
  font-size: 3.2vw;
  color: #1d1d1a;
  letter-spacing: -0.4em;
}
.pagination .wp-pagenavi > * {
  line-height: 2.2em;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  letter-spacing: 0;
  width: 2.2em;
  height: 2.2em;
  border: solid 1px #efeee9;
}
.pagination .wp-pagenavi > *:not(.last):nth-child(n+2) { border-left: none; }
.pagination .wp-pagenavi > .extend {
  border: none;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
}
.pagination .wp-pagenavi > .is-current {
  color: #fcfcfc;
  background: #1d1d1a;
  border-color: #1d1d1a;
}

@media screen and (min-width:600px) {
.pagination .wp-pagenavi { font-size: 12px; }
}

@media screen and (min-width:768px) {
.pagination .wp-pagenavi > a {
  -webkit-transition: color 0.2s ease, background 0.2s ease, border 0.2s ease;
  transition: color 0.2s ease, background 0.2s ease, border 0.2s ease;
}
.pagination .wp-pagenavi > a:hover {
  color: #fcfcfc;
  background: #1d1d1a;
  border-color: #1d1d1a;
}
}



/* **************************************************

  keyframes
  
************************************************** */
@-webkit-keyframes fx {
0%,40%,44%,58%,61%,65%,69%,73%100% { transform: skewX(0); }
41% { transform: skewX(10deg) }
42% { transform: skewX(-10deg); }
59% { transform: skew(40deg,10deg); }
60% { transform: skew(-40deg,-10deg); }
63% { transform: skew(10deg,-5deg); }
70% { transform: skew(-50deg,-20deg); }
71% { transform: skew(10deg,-10deg); }
}

@keyframes fx {
0%,40%,44%,58%,61%,65%,69%,73%100% { transform: skewX(0); }
41% { transform: skewX(10deg) }
42% { transform: skewX(-10deg); }
59% { transform: skew(40deg,10deg); }
60% { transform: skew(-40deg,-10deg); }
63% { transform: skew(10deg,-5deg); }
70% { transform: skew(-50deg,-20deg); }
71% { transform: skew(10deg,-10deg); }
}


@-webkit-keyframes rotate-logo {
0% { transform: scale(1) rotate(0); }
20% { transform: scale(1) rotate(0); }
80% { transform: scale(1) rotate(360deg); }
100% { transform: scale(1) rotate(360deg); }
}

@keyframes rotate-logo {
0% { transform: scale(1) rotate(0); }
20% { transform: scale(1) rotate(0); }
80% { transform: scale(1) rotate(360deg); }
100% { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes glitch-anim-text {
0% { 
  transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
  -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
}
2% {
  -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
4% {
  -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
5% {
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
6% {
  -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
7% {
  -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
8% {
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
9% {
  -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
9.9% {
  transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
}
10%, 100% {
  transform: translate3d(0,0,0) scale3d(1,1,1);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}

@keyframes glitch-anim-text {
0% { 
  transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
  -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
}
2% {
  -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
4% {
  -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
5% {
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
6% {
  -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
7% {
  -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
8% {
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
9% {
  -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
9.9% {
  transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
}
10%, 100% {
  transform: translate3d(0,0,0) scale3d(1,1,1);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}