@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* SIZES */
:root {
  color-scheme: light dark;
  --container-max:1100px;
  --container-max-buffer:calc(var(--container-max) + 100px);
  --container-padding:20px;
  --container-padding-x:var(--container-padding);
  --col-gap:var(--container-padding);
}
@media (min-width:768px) {
  :root {--container-padding:30px;}
}
@media (min-width:1000px) {
  :root {--container-padding:40px;}
}

/* COLORS */
:root {
  --brand:#F9CA3D;
  --text-primary:black; /* #4F5059 */
  --text-strong:black;
  --text-secondary:#35576C;
  --field-placeholder:#ccc;
  --highlight:#FF5015;
  --you-are-here:#2ABA70;

  --header-background:#F9CA3D;
  --bg-accent:#F9CA3D;
  --background-primary:white;
  --background-primary-50:#ffffff88;
  --background-primary-transparent:#ffffff00;
  --paper-color:#F4F2F0;
}
@media(prefers-color-scheme:dark) {
 :root {
    --text-primary:#dfdfe4;
    --text-strong:white;
    --text-secondary:#b6c5cf;
    --field-placeholder:#666;
    --highlight:#FF5015;
    --you-are-here:#F9CA3D;

    --background-primary:#1c1c1c;
    --background-primary-50:#1c1c1c88;
    --background-primary-transparent:#1c1c1c00;
    --paper-color:#2D2D2D;
  }
}

/* show english, default english */
body[data-lang="en"] [data-lang="jp"] {display:none;}
body:not([data-lang]) [data-lang="jp"] {display:none;}

/* show japanese */
body[data-lang="jp"] [data-lang="en"] {display:none;}
[data-lang="jp"] {word-break:break-all;}

.fat-b::before, .fat-a::after,
.fal-b::before, .fal-a::after,
.far-b::before, .far-a::after,
.fas-b::before, .fas-a::after {
  content:'\f2b4';
  display:inline-block;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
}
.fat-b::before, .fat-a::after {font:var(--fa-font-thin);}
.fal-b::before, .fal-a::after {font:var(--fa-font-light);}
.far-b::before, .far-a::after {font:var(--fa-font-regular);}
.fas-b::before, .fas-a::after {font:var(--fa-font-solid);}
*.contain > * {
  max-width:var(--container-max);
  margin-right:auto;
  margin-left:auto;
  padding-right:var(--container-padding);
  padding-left:var(--container-padding);
}
body {
  background-color:var(--background-primary);
  color:var(--text-primary);
  margin:0;
  position:relative;
}
body, .body-font {
  font-size:1.3rem;
  font-family:"Inter", sans-serif;
  font-optical-sizing:auto;
  font-style:normal;
  font-weight:300;
}
h1, h2, h3, h4, h5, h6, .display-font {
  font-family:"Heebo", sans-serif;
  font-optical-sizing:auto;
  font-weight:900;
  font-style:normal;
}
h3 {
  font-size:2em;
  margin:.5em 0 .25em;
  line-height:110%;
}
p {margin:.5em 0;line-height:150%;}
a {text-decoration:none;}
.links a {
  color:var(--text-primary);
  display:block;
  font-weight:bold;
  max-width:fit-content;
}
a.arrow {display:block;padding:4px 0;}
a.trailing-arrow:hover::after {
  padding-right:0;
  padding-left:10px;
}
a.trailing-arrow::after {
  content:'\f061';
  color:var(--highlight);
  padding-right:6px;
  padding-left:4px;
  transition:all ease 70ms;
}

[class^='i-block'] {display:inline-block;}
.inline {display:inline;}
.iblock {display:inline-block;}
.i-iblock-768 {display:inline;}
.block-iblock-768 {display:block;}
@media (min-width:768px) {
  [class$="iblock-768"] {display:inline-block;}
}

.flex-row {
  display:flex;
  flex-flow:row;
}
.flex-col {
  display:flex;
  flex-flow:column;
}
[class^='flex-col-row'] {
  display:flex;
  flex-flow:column;
  width:calc(100vw - 80px);
  width:-webkit-fill-available;
}
@media (min-width:600px) {
  .flex-col-row-600 {flex-flow:row;}
}
@media (min-width:768px) {
  .flex-col-row {flex-flow:row;}
}
@media (min-width:1000px) {
  .flex-col-row-1k {flex-flow:row;}
}

img.emoji {
  display:inline-block;
  margin-bottom:-.1em;
  max-height:1.25em;
  user-select:none;
  -webkit-user-select:none;
}

@media(min-width:620px) {
.mobile-only {display:none!important;}
}

.highlight {color:var(--highlight);}
.text-secondary {color:var(--text-secondary);}
.bold {font-weight:bold;}


/* BEGIN PAGE HEADER */
header {
  background-color:var(--header-background);
  padding-bottom:40px;
}
.headline-img {
  max-width:80vw;
  margin-left:16px;
  margin-top:min(15vh, 110px);
  padding-top:16px;
  padding-right:20px;
  filter: drop-shadow(1px 1px transparent) drop-shadow(2px 2px transparent) drop-shadow(3px 3px transparent) drop-shadow(4px 4px transparent) drop-shadow(5px 5px transparent);
  transition:filter ease-in 450ms, padding ease-in 450ms, margin-left ease-in 450ms;
  transition-delay:1s;
}
.headline-img.shadow {
  margin-left:0;
  padding-top:0;
  padding-bottom:16px;
  filter: drop-shadow(1px 1px black) drop-shadow(2px 2px black) drop-shadow(3px 3px black) drop-shadow(4px 4px black) drop-shadow(5px 5px black);
}
header {position:relative;color:black;}
header h2 {margin:.5rem 0 1rem;font-weight:normal;}
header h2 b {font-weight:900;}
header .buttons {
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.shadow-button {
  background-color:white;
  border:2px solid black;
  border-radius:6px;
  box-shadow:1px 1px 0 0 black, 2px 2px 0 0 black, 3px 3px 0 0 black, 4px 4px 0 0 black;
  color:black;

  display:inline-block;
  cursor:pointer;
  font-size:1rem;
  font-weight:500;
  padding:8px 10px;

  transition:all 100ms;
}
.shadow-button:not([disabled]):hover {
  transform:translate(4px, 4px);
  box-shadow:0 0 0 0 black, 0 0 0 0 black, 0 0 0 0 black, 0 0 0 0 black;
}

/* desktop */
@media (min-width:1024px) {
  .headline-img {
    max-width:60vw;
    margin-left:0;
  }
  .headline-img.shadow {
    margin-left:-16px;
  }
}


#header + section {position:relative;}
#header + section::before {
  content:'';
  aspect-ratio:3.2;
  background-color:var(--background-primary);
  background-image:url('../img/global/below-header-wedge-light.svg');
/*  background-blend-mode:color-burn;*/
  background-size:cover;
  background-repeat:no-repeat;

  display:block;
  position:absolute;
  inset:-1px 0 0;
  z-index:-1;
}
@media (min-width:1100px) {
  #header + section::before {
    background-size:contain;
    background-image:url('../img/global/below-header-wedge-short-light.svg');
  }
}
@media(prefers-color-scheme:dark) {
  #header + section::before {
    display: none;
    background:unset;
    position:unset;
    height:12px;
  }
}
/* END PAGE HEADER */