@charset "utf-8";

/* =============================================
PROJECT-SPECIFIC ADDITIONS
============================================= */

/* =============================================
BASE TYPOGRAPHY TWEAKS
============================================= */
.s-title__lng,
.s-works__more,
.s-credit__copy {
  font-family: "Sofia Sans Condensed", serif;
  font-weight: 400;
  text-align: center;
}

.s-works__title {
  font-weight: 500;
}

@media (max-width: 959px) {
  .s-credit__profile {
    margin-bottom: 12vw;
  }
}

@media (min-width: 960px) {
  html[data-site-lang="ja"] body,
  html[data-site-lang="ja"] h1 {
    font-weight: 400;
  }
}

/* =============================================
ADDRESS LINK UNDERLINE RE-DRAW
============================================= */
.s-credit__profile li a{
  position:relative;
  display:inline-block;
  text-decoration:none !important;
}

.s-credit__profile li a .lang-inline{
  text-decoration:none !important;
}

.s-credit__profile li a::before,
.s-credit__profile li a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  pointer-events:none;
}

html[data-site-lang="en"] .s-credit__profile li a::before,
html[data-site-lang="en"] .s-credit__profile li a::after{
  bottom:0.1em;
}

html[data-site-lang="ja"] .s-credit__profile li a::before,
html[data-site-lang="ja"] .s-credit__profile li a::after{
  bottom:0.16em;
}

.s-credit__profile li a::before{
  background:currentColor;
  opacity:.28;
}

.s-credit__profile li a::after{
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .42s cubic-bezier(.22,.8,.2,1);
}

.s-credit__profile li a:hover::after{
  transform:scaleX(1);
}

.s-credit__profile li a:not(:hover)::after{
  transform-origin:right center;
}

/* =============================================
LANG BLOCK SPACING FIX
============================================= */
.lang-block{
  display:none;
  width:fit-content;
  margin:0 auto;
}

.lang-block p{
  margin:0;
}

html[data-site-lang="en"] .lang-block--en{
  display:block;
}

html[data-site-lang="ja"] .lang-block--ja{
  display:block;
}

.s-sentence > p + p,
.s-sentence > p + .lang-block,
.s-sentence > .lang-block + p,
.s-sentence > .lang-block + .lang-block{
  margin-top:7.2vw;
}

@media (min-width: 960px){
  .s-sentence > p + p,
  .s-sentence > p + .lang-block,
  .s-sentence > .lang-block + p,
  .s-sentence > .lang-block + .lang-block{
    margin-top:5.35714vw;
  }
}

html[data-site-lang="ja"] .s-sentence > p + p,
html[data-site-lang="ja"] .s-sentence > p + .lang-block,
html[data-site-lang="ja"] .s-sentence > .lang-block + p,
html[data-site-lang="ja"] .s-sentence > .lang-block + .lang-block{
  margin-top:5.4vw;
}

@media (min-width: 960px){
  html[data-site-lang="ja"] .s-sentence > p + p,
  html[data-site-lang="ja"] .s-sentence > p + .lang-block,
  html[data-site-lang="ja"] .s-sentence > .lang-block + p,
  html[data-site-lang="ja"] .s-sentence > .lang-block + .lang-block{
    margin-top:4.01786vw;
  }
}

/* =============================================
LANG INLINE SWITCHING
============================================= */
.lang-inline{
  display:none;
}

html[data-site-lang="en"] .lang-inline--en{
  display:inline;
}

html[data-site-lang="ja"] .lang-inline--ja{
  display:inline;
}

/* =============================================
HERO LANGUAGE SWITCHING
============================================= */
.lang-fv{
  display:none;
}

.lang-fv.is-active{
  display:block;
}

.lang-fv .s-title__L1,
.lang-fv .s-title__L2,
.lang-fv .s-title__L3{
  display:block;
}

/* =============================================
JAPANESE SINGLE-PAGE SIZE TUNING
Matches the original /jp/ sizing while using data-site-lang
============================================= */
html[data-site-lang="ja"]{
  --h1FontSize:2.295svh;
  --h1FontSizeXL:10.125svh;
}

html[data-site-lang="ja"] .lang-fv--ja .s-title__L1,
html[data-site-lang="ja"] .lang-fv--ja .s-title__L2,
html[data-site-lang="ja"] .lang-fv--ja .s-title__L3{
  line-height:1.375;
  letter-spacing:-.0625em;
}

html[data-site-lang="ja"] .lang-fv--ja .s-title__L3{
  letter-spacing:-.09em;
}

html[data-site-lang="ja"] .lang-fv--ja .s-title__L2{
  margin:calc(var(--h1FontSize) * .75) auto;
}

html[data-site-lang="ja"] .s-sentence{
  font-size:4.86vw;
}

html[data-site-lang="ja"] .s-credit__profile{
  font-size:4.32vw;
}

html[data-site-lang="ja"] .s-credit__copy{
  font-size:2.88vw;
}

@media (min-width: 960px){
  html[data-site-lang="ja"]{
    --h1FontSize:6.075svh;
    --h1FontSizeXL:20.25svh;
  }

  html[data-site-lang="ja"] .lang-fv--ja .s-title__L1,
  html[data-site-lang="ja"] .lang-fv--ja .s-title__L2,
  html[data-site-lang="ja"] .lang-fv--ja .s-title__L3{
    line-height:1.375;
    letter-spacing:-.0625em;
  }

  html[data-site-lang="ja"] .lang-fv--ja .s-title__L3{
    letter-spacing:-.09em;
  }

  html[data-site-lang="ja"] .lang-fv--ja .s-title__L2{
    margin:calc(var(--h1FontSize) * .5) auto;
  }

  html[data-site-lang="ja"] .s-sentence{
    font-size:3.61607vw;
  }

  html[data-site-lang="ja"] .s-credit__profile{
    font-size:1.60714vw;
  }

  html[data-site-lang="ja"] .s-credit__copy{
    font-size:.96429vw;
  }
}

/* =============================================
JAPANESE HERO L1 START POSITION TUNING
============================================= */
html[data-site-lang="ja"] .lang-fv--ja .s-title__L1{
  -webkit-transform:translate(calc(100% - 0.13em),0);
  transform:translate(calc(100% - 0.13em),0);
}

html[data-site-lang="ja"][data-fv="into"] .lang-fv--ja .s-title__L1,
html[data-site-lang="ja"][data-fv="complete"] .lang-fv--ja .s-title__L1{
  -webkit-transform:translate(calc(50% - 0.13em),0);
  transform:translate(calc(50% - 0.13em),0);
}

/* =============================================
JAPANESE SMALL KATAKANA KERNING
============================================= */
.jp-tight-kana{
  display:inline-block;
  margin-left:-0.09em;
  margin-right:-0.09em;
}

/* =============================================
LANGUAGE SWITCH : LIQUID GLASS
============================================= */
.s-title__lng.lg-lang-switch{
  display:block;
  line-height:1;
  background:none;
  padding:0;
  text-align:left;
}

.s-title__lng.lg-lang-switch:before{
  content:none;
  display:none;
}

.lg-lang-switch__track{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:8.8rem;
  height:3.7rem;
  padding:.3rem;
  border-radius:999px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.08) 45%,
      rgba(255,255,255,.04) 100%
    );
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(18px) saturate(155%);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 .4rem 1.2rem rgba(0,0,0,.08),
    0 .08rem .24rem rgba(0,0,0,.05);
  overflow:hidden;
  transition:
    background .28s ease,
    border-color .24s ease,
    box-shadow .28s ease,
    transform .18s ease;
}

.lg-lang-switch__track:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.14) 20%,
      rgba(255,255,255,0) 42%
    );
  pointer-events:none;
}

.lg-lang-switch__track:after{
  content:"";
  position:absolute;
  left:.9rem;
  right:.9rem;
  top:.45rem;
  height:.8rem;
  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(.12rem);
  opacity:.9;
  pointer-events:none;
}

.lg-lang-switch:hover .lg-lang-switch__track{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.11) 45%,
      rgba(255,255,255,.05) 100%
    );
  border-color:rgba(255,255,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 .55rem 1.4rem rgba(0,0,0,.10),
    0 .1rem .3rem rgba(0,0,0,.06);
}

.lg-lang-switch:active .lg-lang-switch__track{
  transform:translateY(1px) scale(.982);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 .28rem .9rem rgba(0,0,0,.08),
    0 .06rem .18rem rgba(0,0,0,.05);
}

.lg-lang-switch__thumb{
  position:absolute;
  left:.3rem;
  top:.3rem;
  width:4rem;
  height:3.1rem;
  border-radius:999px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.60) 0%,
      rgba(255,255,255,.28) 38%,
      rgba(255,255,255,.18) 100%
    );
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(24px) saturate(165%);
  -webkit-backdrop-filter:blur(24px) saturate(165%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 .35rem 1rem rgba(0,0,0,.10),
    0 .08rem .24rem rgba(0,0,0,.05);
  pointer-events:none;
  transition:
    transform .46s cubic-bezier(.22,.85,.2,1) .06s,
    background .24s ease,
    box-shadow .24s ease;
}

.lg-lang-switch__thumb:before{
  content:"";
  position:absolute;
  left:.45rem;
  right:.45rem;
  top:.32rem;
  height:.72rem;
  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.12) 100%
  );
  filter:blur(.08rem);
}

.lg-lang-switch:hover .lg-lang-switch__thumb{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.68) 0%,
      rgba(255,255,255,.31) 38%,
      rgba(255,255,255,.19) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    inset 0 -1px 0 rgba(255,255,255,.14),
    0 .42rem 1.15rem rgba(0,0,0,.11),
    0 .1rem .28rem rgba(0,0,0,.06);
}

.lg-lang-switch__thumb.is-jp{
  transform:translateX(4rem);
}

.lg-lang-switch__option{
  position:relative;
  z-index:1;
  width:4rem;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  letter-spacing:.03em;
  color:rgba(0,0,0,.62);
  text-decoration:none;
  opacity:.82;
  appearance:none;
  -webkit-appearance:none;
  border:none;
  background:none;
  padding:0;
  margin:0;
  font-family:inherit;
  cursor:pointer;
  transition:
    opacity .22s ease,
    color .22s ease,
    transform .18s ease,
    text-shadow .22s ease;
  transition-delay:.02s;
}

.lg-lang-switch__option.is-active{
  color:rgba(0,0,0,.98);
  opacity:1;
  pointer-events:none;
  transition-delay:0s;
}

.lg-lang-switch__option:not(.is-active):hover{
  opacity:1;
  color:rgb(30, 131, 255);
  transform:translateY(-.02rem);
  text-shadow:0 0 .35rem rgba(255,255,255,.16);
}

/* =============================================
FLOATING LANGUAGE SWITCH
============================================= */
.s-title__lng.lg-lang-switch{
  position:fixed;
  top:2.2rem;
  right:2.2rem;
  z-index:1200;
  opacity:0;
  transform:translateY(-.8rem);
  pointer-events:none;
  transition:
    opacity .28s ease,
    transform .28s ease;
}

.s-title__lng.lg-lang-switch.is-floating-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

@media (max-width: 959px){
  .s-title__lng.lg-lang-switch{
    top:1.4rem;
    right:1.4rem;
  }
}

/* =============================================
WORKS BUTTON : LIQUID GLASS
============================================= */
.lg-glass-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:31.2rem;
  height:7.4rem;
  padding:0 1.8rem;
  margin:0 auto;
  border-radius:999px;
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      rgba(255,255,255,.075) 0%,
      rgba(255,255,255,.022) 16%,
      rgba(255,255,255,.006) 36%,
      rgba(255,255,255,.0015) 62%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.02) 0%,
      rgba(255,255,255,.005) 44%,
      rgba(255,255,255,.001) 100%
    );
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(9px) saturate(195%);
  -webkit-backdrop-filter:blur(9px) saturate(195%);
  box-shadow:
    inset 0 1.4px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255,255,255,.035),
    inset 0 -6px 14px rgba(255,255,255,.01),
    0 .95rem 1.85rem rgba(0,0,0,.10),
    0 .14rem .34rem rgba(0,0,0,.055);
  overflow:hidden;
  color:rgba(255,255,255,.98);
  font-size:2.8rem;
  text-decoration:none;
  text-align:center;
  transition:
    background .32s ease,
    border-color .26s ease,
    box-shadow .32s ease,
    transform .18s ease,
    color .22s ease,
    filter .28s ease,
    backdrop-filter .28s ease,
    -webkit-backdrop-filter .28s ease;
}

.lg-glass-btn:before{
  content:"";
  position:absolute;
  inset:.12rem;
  border-radius:inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.42) 8%,
      rgba(255,255,255,.12) 18%,
      rgba(255,255,255,.018) 28%,
      rgba(255,255,255,0) 46%
    );
  opacity:1;
  pointer-events:none;
}

.lg-glass-btn:after{
  content:"";
  position:absolute;
  left:.8rem;
  right:.8rem;
  top:.34rem;
  height:2.1rem;
  border-radius:999px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.56) 20%,
      rgba(255,255,255,.18) 44%,
      rgba(255,255,255,.03) 70%,
      rgba(255,255,255,0) 100%
    );
  filter:blur(.10rem);
  opacity:1;
  pointer-events:none;
}

.lg-glass-btn:hover{
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.045) 16%,
      rgba(255,255,255,.012) 36%,
      rgba(255,255,255,.003) 62%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.038) 0%,
      rgba(255,255,255,.01) 44%,
      rgba(255,255,255,.002) 100%
    );
  border-color:rgba(255,255,255,.20);
  backdrop-filter:blur(10px) saturate(200%);
  -webkit-backdrop-filter:blur(10px) saturate(200%);
  box-shadow:
    inset 0 1.6px 0 rgba(255,255,255,1),
    inset 0 -1.1px 0 rgba(255,255,255,.04),
    inset 0 -7px 16px rgba(255,255,255,.012),
    0 1.15rem 2.1rem rgba(0,0,0,.12),
    0 .18rem .4rem rgba(0,0,0,.065);
  color:rgb(30, 131, 255);
  filter:saturate(116%);
}

.lg-glass-btn:active{
  transform:translateY(.5px) scale(1.03);
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      rgba(255,255,255,.045) 0%,
      rgba(255,255,255,.014) 16%,
      rgba(255,255,255,.004) 36%,
      rgba(255,255,255,.001) 62%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.012) 0%,
      rgba(255,255,255,.003) 44%,
      rgba(255,255,255,.0005) 100%
    );
  border-color:rgba(255,255,255,.10);
  backdrop-filter:blur(7px) saturate(205%);
  -webkit-backdrop-filter:blur(7px) saturate(205%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    inset 0 -.6px 0 rgba(255,255,255,.02),
    inset 0 -3px 7px rgba(255,255,255,.006),
    0 .38rem .95rem rgba(0,0,0,.08),
    0 .06rem .14rem rgba(0,0,0,.04);
}

.lg-glass-btn .lang-inline{
  position:relative;
  z-index:1;
}

/* =============================================
PUNCTUATION LIGHT TUNING
============================================= */
.punct-lite{
  display:inline-block;
  font-weight:400;
  font-size:.88em;
  line-height:1;
}

/* =============================================
DOT ROLL ANIMATION
============================================= */
.rolling-dot{
  display:inline-block;
  opacity:0;
  transform:translateX(100vw);
  will-change: transform, opacity;
}

html[data-fv="complete"] .rolling-dot{
  animation:dot-slide 3.8s cubic-bezier(.22,.8,.2,1) 1 forwards;
}

@keyframes dot-slide{
  0%   { transform:translateX(100vw); opacity:0; }
  10%  { opacity:1; }

  /* 勢いよく到達して行きすぎる */
  66%  { transform:translateX(-10px); opacity:1; }

  /* 行きすぎた位置で一瞬止まる */
  72%  { transform:translateX(-10px); opacity:1; }

  /* ゆっくり戻る */
  88%  { transform:translateX(3px); opacity:1; }

  /* 軽く揺れる */
  92%  { transform:translateX(-1.5px); opacity:1; }
  97%  { transform:translateX(0.5px); opacity:1; }

  100% { transform:translateX(0); opacity:1; }
}

/* =============================================
COMMA SWING ANIMATION
============================================= */
.swing-comma-trigger{
  display:inline-block;
  transform-origin:55% 70%;
  will-change:transform;
  backface-visibility:hidden;
  transform:translateZ(0);
}

.swing-comma-trigger.is-swinging{
  animation:comma-swing 9.6s linear 1 forwards;
}

@keyframes comma-swing{
  0%   { transform:rotate(0deg); }
  2%   { transform:rotate(4deg); }
  4%   { transform:rotate(10deg); }
  7%   { transform:rotate(16deg); }
  10%  { transform:rotate(20deg); }

  13%  { transform:rotate(11deg); }
  17%  { transform:rotate(-2deg); }
  22%  { transform:rotate(-11deg); }
  27%  { transform:rotate(-14deg); }
  32%  { transform:rotate(-9deg); }
  38%  { transform:rotate(-1deg); }
  45%  { transform:rotate(6deg); }
  52%  { transform:rotate(8deg); }
  59%  { transform:rotate(5deg); }
  66%  { transform:rotate(1deg); }
  73%  { transform:rotate(-2.8deg); }
  80%  { transform:rotate(-3.8deg); }
  86%  { transform:rotate(-2.4deg); }
  91%  { transform:rotate(-0.8deg); }
  95%  { transform:rotate(1.2deg); }
  97%  { transform:rotate(1.4deg); }
  99%  { transform:rotate(.7deg); }
  100% { transform:rotate(0deg); }
}

/* =============================================
FULFILLMENT FILL ANIMATION
============================================= */
.fulfillment-trigger{
  position:relative;
  display:inline-block;
  line-height:1;
}

.fulfillment-base{
  display:block;
  opacity:.2;
}

.fulfillment-fill{
  position:absolute;
  left:0;
  top:0;
  display:block;
  color:#000;
  clip-path:inset(100% 0 0 0);
  -webkit-clip-path:inset(100% 0 0 0);
  transform:translateY(0);
  will-change:clip-path, -webkit-clip-path, transform;
  pointer-events:none;
}

.fulfillment-trigger.is-filled .fulfillment-fill{
  animation:fulfillment-fill-rise 2.5s ease-out 1 forwards;
}

@keyframes fulfillment-fill-rise{
  0%{
    clip-path:inset(100% 0 0 0);
    -webkit-clip-path:inset(100% 0 0 0);
    transform:translateY(0);
  }
  18%{
    clip-path:inset(78% 0 0 0);
    -webkit-clip-path:inset(78% 0 0 0);
    transform:translateY(.015em);
  }
  38%{
    clip-path:inset(52% 0 0 0);
    -webkit-clip-path:inset(52% 0 0 0);
    transform:translateY(-.01em);
  }
  58%{
    clip-path:inset(28% 0 0 0);
    -webkit-clip-path:inset(28% 0 0 0);
    transform:translateY(.008em);
  }
  78%{
    clip-path:inset(10% 0 0 0);
    -webkit-clip-path:inset(10% 0 0 0);
    transform:translateY(-.004em);
  }
  100%{
    clip-path:inset(0 0 0 0);
    -webkit-clip-path:inset(0 0 0 0);
    transform:translateY(0);
  }
}

/* =============================================
COUNT KEY PRESS ANIMATION
============================================= */
.count-trigger{
  display:inline-block;
  white-space:nowrap;
}

.count-char{
  display:inline-block;
  will-change:transform;
}

.count-trigger.is-counting-forward .count-char:nth-child(1){
  animation:count-key-press 0.5s ease-out 0s 1 forwards;
}
.count-trigger.is-counting-forward .count-char:nth-child(2){
  animation:count-key-press 0.5s ease-out 0.08s 1 forwards;
}
.count-trigger.is-counting-forward .count-char:nth-child(3){
  animation:count-key-press 0.5s ease-out 0.16s 1 forwards;
}
.count-trigger.is-counting-forward .count-char:nth-child(4){
  animation:count-key-press 0.5s ease-out 0.24s 1 forwards;
}
.count-trigger.is-counting-forward .count-char:nth-child(5){
  animation:count-key-press 0.5s ease-out 0.32s 1 forwards;
}

.count-trigger.is-counting-reverse .count-char:nth-child(5){
  animation:count-key-press 0.5s ease-out 0s 1 forwards;
}
.count-trigger.is-counting-reverse .count-char:nth-child(4){
  animation:count-key-press 0.5s ease-out 0.08s 1 forwards;
}
.count-trigger.is-counting-reverse .count-char:nth-child(3){
  animation:count-key-press 0.5s ease-out 0.16s 1 forwards;
}
.count-trigger.is-counting-reverse .count-char:nth-child(2){
  animation:count-key-press 0.5s ease-out 0.24s 1 forwards;
}
.count-trigger.is-counting-reverse .count-char:nth-child(1){
  animation:count-key-press 0.5s ease-out 0.32s 1 forwards;
}

@keyframes count-key-press{
  0%   { transform:translateY(0); }
  35%  { transform:translateY(.11em); }
  70%  { transform:translateY(.03em); }
  100% { transform:translateY(0); }
}

/* =============================================
CONTACT FORM
============================================= */
.s-credit__contact{
  width:100%;
}

.s-credit__contactLead{
  margin:0 0 .8rem;
  font-size:1.2rem;
  line-height:1.4;
  letter-spacing:.08em;
}

.s-credit__contactText{
  margin:0 0 2rem;
  font-size:1.2rem;
  line-height:1.8;
  letter-spacing:.04em;
  opacity:.78;
}

.contact-form{
  width:100%;
}

.contact-form__honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.contact-form__row + .contact-form__row{
  margin-top:1.6rem;
}

.contact-form__label{
  display:inline-block;
  margin-bottom:.7rem;
  font-size:1rem;
  line-height:1.4;
  letter-spacing:.08em;
  opacity:.72;
}

.contact-form__input,
.contact-form__textarea{
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.26);
  border-radius:0;
  background:transparent;
  color:#000;
  font:inherit;
  line-height:1.8;
  padding:0 0 .8rem;
  appearance:none;
  -webkit-appearance:none;
}

.contact-form__input{
  min-height:2.8rem;
}

.contact-form__textarea{
  min-height:10.5rem;
  resize:vertical;
}

.contact-form__input:focus,
.contact-form__textarea:focus{
  outline:none;
  border-bottom-color:rgba(0,0,0,.62);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder{
  color:rgba(0,0,0,.34);
}

.contact-form__actions{
  margin-top:2.2rem;
}

.contact-form__submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:9.6rem;
  min-height:4.2rem;
  padding:0 1.8rem;
  border:1px solid rgba(0,0,0,.22);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#000;
  font:inherit;
  font-size:1.1rem;
  line-height:1;
  letter-spacing:.08em;
  cursor:pointer;
  transition:
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    opacity .3s ease,
    transform .3s ease;
}

.contact-form__submit:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(0,0,0,.34);
  box-shadow:0 .4rem 1rem rgba(0,0,0,.08);
}

.contact-form__submit:active{
  transform:scale(.985);
}

.contact-form__submit:focus-visible{
  outline:1px solid rgba(0,0,0,.42);
  outline-offset:4px;
}

.contact-form__status{
  margin:0 0 1.8rem;
  font-size:1.1rem;
  line-height:1.7;
  letter-spacing:.04em;
}

.contact-form__status--success{
  opacity:.82;
}

.contact-form__status--error{
  opacity:.82;
}

html[data-site-lang="en"] .contact-form__label,
html[data-site-lang="en"] .contact-form__status,
html[data-site-lang="en"] .s-credit__contactLead,
html[data-site-lang="en"] .s-credit__contactText{
  color:#000;
}

html[data-site-lang="en"] .contact-form__input,
html[data-site-lang="en"] .contact-form__textarea{
  border-bottom-color:rgba(0,0,0,.24);
  color:#000;
}

html[data-site-lang="en"] .contact-form__input:focus,
html[data-site-lang="en"] .contact-form__textarea:focus{
  border-bottom-color:rgba(0,0,0,.62);
}

html[data-site-lang="en"] .contact-form__submit{
  border-color:rgba(0,0,0,.22);
  background:rgba(255,255,255,.12);
  color:#000;
}

html[data-site-lang="en"] .contact-form__submit:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(0,0,0,.34);
}

html[data-site-lang="ja"] .contact-form__label,
html[data-site-lang="ja"] .contact-form__status,
html[data-site-lang="ja"] .s-credit__contactLead,
html[data-site-lang="ja"] .s-credit__contactText{
  color:#fff;
}

html[data-site-lang="ja"] .contact-form__input,
html[data-site-lang="ja"] .contact-form__textarea{
  border-bottom-color:rgba(255,255,255,.28);
  color:#fff;
}

html[data-site-lang="ja"] .contact-form__input:focus,
html[data-site-lang="ja"] .contact-form__textarea:focus{
  border-bottom-color:rgba(255,255,255,.68);
}

html[data-site-lang="ja"] .contact-form__input::placeholder,
html[data-site-lang="ja"] .contact-form__textarea::placeholder{
  color:rgba(255,255,255,.34);
}

html[data-site-lang="ja"] .contact-form__submit{
  border-color:rgba(255,255,255,.24);
  background:transparent;
  color:#fff;
}

html[data-site-lang="ja"] .contact-form__submit:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.4);
}

html[data-site-lang="ja"] .contact-form__submit:focus-visible{
  outline:1px solid rgba(255,255,255,.6);
}

html[data-site-lang="ja"] .s-credit__contactLead{
  font-size:1.1rem;
  letter-spacing:.06em;
}

html[data-site-lang="ja"] .s-credit__contactText{
  font-size:1.1rem;
  line-height:1.9;
  letter-spacing:.03em;
}

html[data-site-lang="ja"] .contact-form__label{
  font-size:.95rem;
  letter-spacing:.05em;
}

html[data-site-lang="ja"] .contact-form__submit{
  font-size:1rem;
  letter-spacing:.05em;
}

@media screen and (max-width: 767px){
  .s-credit__contactText{
    margin-bottom:1.8rem;
  }

  .contact-form__row + .contact-form__row{
    margin-top:1.4rem;
  }

  .contact-form__textarea{
    min-height:9.2rem;
  }

  .contact-form__actions{
    margin-top:2rem;
  }

  .contact-form__submit{
    min-width:8.8rem;
    min-height:4rem;
    padding:0 1.6rem;
  }
}