:root {
    --green: #64ff00;
    --blue: #0072ff;
    --orange: #ff7434;
    --black: #000;
    --dgray: #191919;
    --white: #fff;
    --lgray: #f9f9f9;
    --RGBblack:0,0,0;
    --RGBwhite:255,255,255;
    --RGBlgray:249,249,249;
}

:root {
    --colorBody: var(--lgray);
    --colorBodyRGB: var(--RGBlgray);
    --colorBoxBg: var(--white);
    --colorBorder: rgba(var(--RGBblack),0.1);
    --colorTextBody: var(--black);
    --colorTextBodyRGB: var(--RGBblack);
    --colorAccent: var(--green);
    --colorAccentReverse: #7500b8;
}
.is-mode-dark {
    --colorBody: var(--black);
    --colorBodyRGB: var(--RGBblack);
    --colorBoxBg: var(--dgray);
    --colorBorder: rgba(var(--RGBwhite),0.25);
    --colorTextBody: var(--white);
    --colorTextBodyRGB: var(--RGBwhite);
    --colorAccent: var(--blue);
    --colorAccentReverse: #ec9700;
}


/* 共通リセット・ノーマライズ */
*,input,:before,:after { -o-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { display: block; }
audio,canvas,progress,video { display: inline-block; vertical-align: baseline; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td,figure,main { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var { font: inherit; }
del,ins { text-decoration: none; }
li { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: inherit; }
q:before,q:after { content: ""; }
abbr,acronym { border: 0; font-variant: normal; }
sup { vertical-align: baseline; }
sub { vertical-align: baseline; }
a:hover { text-decoration: inherit; }
button { border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; text-transform: inherit; outline: none; }
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
a{text-decoration:none}
@font-face{ font-family: 'BatonNouveau';src: url('../font/BatonNouveauWeb-Book.woff2') format('woff2'),url('../font/BatonNouveauWeb-Book.woff') format('woff');}


/*============================================================================
  Grid Columns
==============================================================================*/
.clearfix:after { content: ''; display: table; clear: both; }
.grid:after { content: ""; display: table; clear: both; }
.grid { display: flex; flex-wrap: wrap; margin: 0; padding: 0; margin-left: -1rem; margin-bottom: -1rem; }
.grid--align-bottom { align-items: flex-end !important; }
.grid--align-center { align-items: center !important; }
.grid--align-top { align-items: flex-start !important; }
.grid--justify-center { justify-content: center !important; }
.grid--justify-flex-start { justify-content: flex-start !important; }
.grid--justify-flex-end { justify-content: flex-end !important; }
.grid--nowrap { flex-wrap: nowrap }
.grid--reverse { flex-direction: row-reverse }
.grid__item { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; max-width: 100%; padding-left: 1rem; padding-bottom: 1rem; width: 100%; min-height: 1px }
.grid--no-gutters { margin-left: 0; margin-bottom: 0; }
.grid--no-gutters > .grid__item { padding-left: 0; padding-bottom: 0; }
.grid--one-gutters { margin-left: 1px; margin-bottom: 1px; }
.grid--one-gutters > .grid__item { padding-left: 1px; padding-bottom: 1px; }
.grid--small-gutters { margin-left: -1rem; margin-bottom: -1rem; }
.grid--small-gutters > .grid__item { padding-left: 1rem; padding-bottom: 1rem; }
.grid--large-gutters { margin-left: -4rem; margin-bottom: -4rem; }
.grid--large-gutters > .grid__item { padding-left: 4rem; padding-bottom: 4rem; }
@media only screen and (max-width:768px) {
  .grid--large-gutters { margin-left: -2rem; margin-bottom: -2rem; }
  .grid--large-gutters > .grid__item { padding-left: 2rem; padding-bottom: 2rem; }
}

.one-whole { flex-basis: 100%; max-width: 100%; width: 100%; }
.one-half { flex-basis: 50%; max-width: 50%; width: 50%; }
.one-third { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.two-thirds { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
.one-quarter { flex-basis: 25%; max-width: 25%; width: 25%; }
.two-quarters { flex-basis: 50%; max-width: 50%; width: 50%; }
.three-quarters { flex-basis: 75%; max-width: 75%; width: 75%; }
.one-fifth { flex-basis: 20%; max-width: 20%; width: 20%; }
.two-fifths { flex-basis: 40%; max-width: 40%; width: 40%; }
.three-fifths { flex-basis: 60%; max-width: 60%; width: 60%; }
.four-fifths { flex-basis: 80%; max-width: 80%; width: 80%; }
.one-sixth { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
.two-sixths { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.three-sixths { flex-basis: 50%; max-width: 50%; width: 50%; }
.four-sixths { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
.five-sixths { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
.one-eighth { flex-basis: 12.5%; max-width: 12.5%; width: 12.5%; }
.two-eighths { flex-basis: 25%; max-width: 25%; width: 25%; }
.three-eighths { flex-basis: 37.5%; max-width: 37.5%; width: 37.5%; }
.four-eighths { flex-basis: 50%; max-width: 50%; width: 50%; }
.five-eighths { flex-basis: 62.5%; max-width: 62.5%; width: 62.5%; }
.six-eighths { flex-basis: 75%; max-width: 75%; width: 75%; }
.seven-eighths { flex-basis: 87.5%; max-width: 87.5%; width: 87.5%; }
.one-tenth { flex-basis: 10%; max-width: 10%; width: 10%; }
.two-tenths { flex-basis: 20%; max-width: 20%; width: 20%; }
.three-tenths { flex-basis: 30%; max-width: 30%; width: 30%; }
.four-tenths { flex-basis: 40%; max-width: 40%; width: 40%; }
.five-tenths { flex-basis: 50%; max-width: 50%; width: 50%; }
.six-tenths { flex-basis: 60%; max-width: 60%; width: 60%; }
.seven-tenths { flex-basis: 70%; max-width: 70%; width: 70%; }
.eight-tenths { flex-basis: 80%; max-width: 80%; width: 80%; }
.nine-tenths { flex-basis: 90%; max-width: 90%; width: 90%; }
.one-twelfth { flex-basis: 8.33333%; max-width: 8.33333%; width: 8.33333%; }
.two-twelfths { flex-basis: 16.66667%;  max-width: 16.66667%;  width: 16.66667%; }
.three-twelfths { flex-basis: 25%; max-width: 25%; width: 25%; }
.four-twelfths { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.five-twelfths { flex-basis: 41.66667%; max-width: 41.66667%; width: 41.66667%; }
.six-twelfths { flex-basis: 50%; max-width: 50%; width: 50%; }
.seven-twelfths { flex-basis: 58.33333%; max-width: 58.33333%; width: 58.33333%; }
.eight-twelfths { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
.nine-twelfths { flex-basis: 75%; max-width: 75%; width: 75%; }
.ten-twelfths { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
.eleven-twelfths { flex-basis: 91.66667%; max-width: 91.66667%; width: 91.66667%; }

@media only screen and (max-width:768px) {
  .small--one-whole { flex-basis: 100%; max-width: 100%; width: 100%; }
  .small--one-half { flex-basis: 50%; max-width: 50%; width: 50%; }
  .small--one-third { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .small--two-thirds { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
  .small--one-quarter { flex-basis: 25%; max-width: 25%; width: 25%; }
  .small--two-quarters { flex-basis: 50%; max-width: 50%; width: 50%; }
  .small--three-quarters { flex-basis: 75%; max-width: 75%; width: 75%; }
  .small--one-fifth { flex-basis: 20%; max-width: 20%; width: 20%; }
  .small--two-fifths { flex-basis: 40%; max-width: 40%; width: 40%; }
  .small--three-fifths { flex-basis: 60%; max-width: 60%; width: 60%; }
  .small--four-fifths { flex-basis: 80%; max-width: 80%; width: 80%; }
  .small--one-sixth { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
  .small--two-sixths { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .small--three-sixths { flex-basis: 50%; max-width: 50%; width: 50%; }
  .small--four-sixths { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
  .small--five-sixths { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
  .small--one-eighth { flex-basis: 12.5%; max-width: 12.5%; width: 12.5%; }
  .small--two-eighths { flex-basis: 25%; max-width: 25%; width: 25%; }
  .small--three-eighths { flex-basis: 37.5%; max-width: 37.5%; width: 37.5%; }
  .small--four-eighths { flex-basis: 50%; max-width: 50%; width: 50%; }
  .small--five-eighths { flex-basis: 62.5%; max-width: 62.5%; width: 62.5%; }
  .small--six-eighths { flex-basis: 75%; max-width: 75%; width: 75%; }
  .small--seven-eighths { flex-basis: 87.5%; max-width: 87.5%; width: 87.5%; }
  .small--one-tenth { flex-basis: 10%; max-width: 10%; width: 10%; }
  .small--two-tenths { flex-basis: 20%; max-width: 20%; width: 20%; }
  .small--three-tenths { flex-basis: 30%; max-width: 30%; width: 30%; }
  .small--four-tenths { flex-basis: 40%; max-width: 40%; width: 40%; }
  .small--five-tenths { flex-basis: 50%; max-width: 50%; width: 50%; }
  .small--six-tenths { flex-basis: 60%; max-width: 60%; width: 60%; }
  .small--seven-tenths { flex-basis: 70%; max-width: 70%; width: 70%; }
  .small--eight-tenths { flex-basis: 80%; max-width: 80%; width: 80%; }
  .small--nine-tenths { flex-basis: 90%; max-width: 90%; width: 90%; }
  .small--one-twelfth { flex-basis: 8.33333%; max-width: 8.33333%; width: 8.33333%; }
  .small--two-twelfths { flex-basis: 16.66667%;  max-width: 16.66667%;  width: 16.66667%; }
  .small--three-twelfths { flex-basis: 25%; max-width: 25%; width: 25%; }
  .small--four-twelfths { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .small--five-twelfths { flex-basis: 41.66667%; max-width: 41.66667%; width: 41.66667%; }
  .small--six-twelfths { flex-basis: 50%; max-width: 50%; width: 50%; }
  .small--seven-twelfths { flex-basis: 58.33333%; max-width: 58.33333%; width: 58.33333%; }
  .small--eight-twelfths { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
  .small--nine-twelfths { flex-basis: 75%; max-width: 75%; width: 75%; }
  .small--ten-twelfths { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
  .small--eleven-twelfths { flex-basis: 91.66667%; max-width: 91.66667%; width: 91.66667%; }
}

@media only screen and (min-width:769px) {
  .medium-up--one-whole { flex-basis: 100%; max-width: 100%; width: 100%; }
  .medium-up--one-half { flex-basis: 50%; max-width: 50%; width: 50%; }
  .medium-up--one-third { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .medium-up--two-thirds { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
  .medium-up--one-quarter { flex-basis: 25%; max-width: 25%; width: 25%; }
  .medium-up--two-quarters { flex-basis: 50%; max-width: 50%; width: 50%; }
  .medium-up--three-quarters { flex-basis: 75%; max-width: 75%; width: 75%; }
  .medium-up--one-fifth { flex-basis: 20%; max-width: 20%; width: 20%; }
  .medium-up--two-fifths { flex-basis: 40%; max-width: 40%; width: 40%; }
  .medium-up--three-fifths { flex-basis: 60%; max-width: 60%; width: 60%; }
  .medium-up--four-fifths { flex-basis: 80%; max-width: 80%; width: 80%; }
  .medium-up--one-sixth { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
  .medium-up--two-sixths { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .medium-up--three-sixths { flex-basis: 50%; max-width: 50%; width: 50%; }
  .medium-up--four-sixths { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
  .medium-up--five-sixths { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
  .medium-up--one-eighth { flex-basis: 12.5%; max-width: 12.5%; width: 12.5%; }
  .medium-up--two-eighths { flex-basis: 25%; max-width: 25%; width: 25%; }
  .medium-up--three-eighths { flex-basis: 37.5%; max-width: 37.5%; width: 37.5%; }
  .medium-up--four-eighths { flex-basis: 50%; max-width: 50%; width: 50%; }
  .medium-up--five-eighths { flex-basis: 62.5%; max-width: 62.5%; width: 62.5%; }
  .medium-up--six-eighths { flex-basis: 75%; max-width: 75%; width: 75%; }
  .medium-up--seven-eighths { flex-basis: 87.5%; max-width: 87.5%; width: 87.5%; }
  .medium-up--one-tenth { flex-basis: 10%; max-width: 10%; width: 10%; }
  .medium-up--two-tenths { flex-basis: 20%; max-width: 20%; width: 20%; }
  .medium-up--three-tenths { flex-basis: 30%; max-width: 30%; width: 30%; }
  .medium-up--four-tenths { flex-basis: 40%; max-width: 40%; width: 40%; }
  .medium-up--five-tenths { flex-basis: 50%; max-width: 50%; width: 50%; }
  .medium-up--six-tenths { flex-basis: 60%; max-width: 60%; width: 60%; }
  .medium-up--seven-tenths { flex-basis: 70%; max-width: 70%; width: 70%; }
  .medium-up--eight-tenths { flex-basis: 80%; max-width: 80%; width: 80%; }
  .medium-up--nine-tenths { flex-basis: 90%; max-width: 90%; width: 90%; }
  .medium-up--one-twelfth { flex-basis: 8.33333%; max-width: 8.33333%; width: 8.33333%; }
  .medium-up--two-twelfths { flex-basis: 16.66667%;  max-width: 16.66667%;  width: 16.66667%; }
  .medium-up--three-twelfths { flex-basis: 25%; max-width: 25%; width: 25%; }
  .medium-up--four-twelfths { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .medium-up--five-twelfths { flex-basis: 41.66667%; max-width: 41.66667%; width: 41.66667%; }
  .medium-up--six-twelfths { flex-basis: 50%; max-width: 50%; width: 50%; }
  .medium-up--seven-twelfths { flex-basis: 58.33333%; max-width: 58.33333%; width: 58.33333%; }
  .medium-up--eight-twelfths { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
  .medium-up--nine-twelfths { flex-basis: 75%; max-width: 75%; width: 75%; }
  .medium-up--ten-twelfths { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
  .medium-up--eleven-twelfths { flex-basis: 91.66667%; max-width: 91.66667%; width: 91.66667%; }
}

@media only screen and (min-width:1025px) {
  .large-up--one-whole { flex-basis: 100%; max-width: 100%; width: 100%; }
  .large-up--one-half { flex-basis: 50%; max-width: 50%; width: 50%; }
  .large-up--one-third { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .large-up--two-thirds { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
  .large-up--one-quarter { flex-basis: 25%; max-width: 25%; width: 25%; }
  .large-up--two-quarters { flex-basis: 50%; max-width: 50%; width: 50%; }
  .large-up--three-quarters { flex-basis: 75%; max-width: 75%; width: 75%; }
  .large-up--one-fifth { flex-basis: 20%; max-width: 20%; width: 20%; }
  .large-up--two-fifths { flex-basis: 40%; max-width: 40%; width: 40%; }
  .large-up--three-fifths { flex-basis: 60%; max-width: 60%; width: 60%; }
  .large-up--four-fifths { flex-basis: 80%; max-width: 80%; width: 80%; }
  .large-up--one-sixth { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
  .large-up--two-sixths { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .large-up--three-sixths { flex-basis: 50%; max-width: 50%; width: 50%; }
  .large-up--four-sixths { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
  .large-up--five-sixths { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
  .large-up--one-eighth { flex-basis: 12.5%; max-width: 12.5%; width: 12.5%; }
  .large-up--two-eighths { flex-basis: 25%; max-width: 25%; width: 25%; }
  .large-up--three-eighths { flex-basis: 37.5%; max-width: 37.5%; width: 37.5%; }
  .large-up--four-eighths { flex-basis: 50%; max-width: 50%; width: 50%; }
  .large-up--five-eighths { flex-basis: 62.5%; max-width: 62.5%; width: 62.5%; }
  .large-up--six-eighths { flex-basis: 75%; max-width: 75%; width: 75%; }
  .large-up--seven-eighths { flex-basis: 87.5%; max-width: 87.5%; width: 87.5%; }
  .large-up--one-tenth { flex-basis: 10%; max-width: 10%; width: 10%; }
  .large-up--two-tenths { flex-basis: 20%; max-width: 20%; width: 20%; }
  .large-up--three-tenths { flex-basis: 30%; max-width: 30%; width: 30%; }
  .large-up--four-tenths { flex-basis: 40%; max-width: 40%; width: 40%; }
  .large-up--five-tenths { flex-basis: 50%; max-width: 50%; width: 50%; }
  .large-up--six-tenths { flex-basis: 60%; max-width: 60%; width: 60%; }
  .large-up--seven-tenths { flex-basis: 70%; max-width: 70%; width: 70%; }
  .large-up--eight-tenths { flex-basis: 80%; max-width: 80%; width: 80%; }
  .large-up--nine-tenths { flex-basis: 90%; max-width: 90%; width: 90%; }
  .large-up--one-twelfth { flex-basis: 8.33333%; max-width: 8.33333%; width: 8.33333%; }
  .large-up--two-twelfths { flex-basis: 16.66667%;  max-width: 16.66667%;  width: 16.66667%; }
  .large-up--three-twelfths { flex-basis: 25%; max-width: 25%; width: 25%; }
  .large-up--four-twelfths { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .large-up--five-twelfths { flex-basis: 41.66667%; max-width: 41.66667%; width: 41.66667%; }
  .large-up--six-twelfths { flex-basis: 50%; max-width: 50%; width: 50%; }
  .large-up--seven-twelfths { flex-basis: 58.33333%; max-width: 58.33333%; width: 58.33333%; }
  .large-up--eight-twelfths { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
  .large-up--nine-twelfths { flex-basis: 75%; max-width: 75%; width: 75%; }
  .large-up--ten-twelfths { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
  .large-up--eleven-twelfths { flex-basis: 91.66667%; max-width: 91.66667%; width: 91.66667%; }
}

@media only screen and (min-width:769px) {
  .medium-up--push-one-half { left: 50%; }
  .medium-up--push-one-third { left: 33.33333%; }
  .medium-up--push-two-thirds { left: 66.66667%; }
  .medium-up--push-one-quarter { left: 25%; }
  .medium-up--push-two-quarters { left: 50%; }
  .medium-up--push-three-quarters { left: 75%; }
  .medium-up--push-one-fifth { left: 20%; }
  .medium-up--push-two-fifths { left: 40%; }
  .medium-up--push-three-fifths { left: 60%; }
  .medium-up--push-four-fifths { left: 80%; }
  .medium-up--push-one-sixth { left: 16.66667%; }
  .medium-up--push-two-sixths { left: 33.33333%; }
  .medium-up--push-three-sixths { left: 50%; }
  .medium-up--push-four-sixths { left: 66.66667%; }
  .medium-up--push-five-sixths { left: 83.33333%; }
  .medium-up--push-one-eighth { left: 12.5%; }
  .medium-up--push-two-eighths { left: 25%; }
  .medium-up--push-three-eighths { left: 37.5%; }
  .medium-up--push-four-eighths { left: 50%; }
  .medium-up--push-five-eighths { left: 62.5%; }
  .medium-up--push-six-eighths { left: 75%; }
  .medium-up--push-seven-eighths { left: 87.5%; }
  .medium-up--push-one-tenth { left: 10%; }
  .medium-up--push-two-tenths { left: 20%; }
  .medium-up--push-three-tenths { left: 30%; }
  .medium-up--push-four-tenths { left: 40%; }
  .medium-up--push-five-tenths { left: 50%; }
  .medium-up--push-six-tenths { left: 60%; }
  .medium-up--push-seven-tenths { left: 70%; }
  .medium-up--push-eight-tenths { left: 80%; }
  .medium-up--push-nine-tenths { left: 90%; }
  .medium-up--push-one-twelfth { left: 8.33333%; }
  .medium-up--push-two-twelfths { left: 16.66667%; }
  .medium-up--push-three-twelfths { left: 25%; }
  .medium-up--push-four-twelfths { left: 33.33333%; }
  .medium-up--push-five-twelfths { left: 41.66667%; }
  .medium-up--push-six-twelfths { left: 50%; }
  .medium-up--push-seven-twelfths { left: 58.33333%; }
  .medium-up--push-eight-twelfths { left: 66.66667%; }
  .medium-up--push-nine-twelfths { left: 75%; }
  .medium-up--push-ten-twelfths { left: 83.33333%; }
  .medium-up--push-eleven-twelfths { left: 91.66667%; }
}

@media only screen and (min-width:1025px) {
  .large-up--push-one-half { left: 50%; }
  .large-up--push-one-third { left: 33.33333%; }
  .large-up--push-two-thirds { left: 66.66667%; }
  .large-up--push-one-quarter { left: 25%; }
  .large-up--push-two-quarters { left: 50%; }
  .large-up--push-three-quarters { left: 75%; }
  .large-up--push-one-fifth { left: 20%; }
  .large-up--push-two-fifths { left: 40%; }
  .large-up--push-three-fifths { left: 60%; }
  .large-up--push-four-fifths { left: 80%; }
  .large-up--push-one-sixth { left: 16.66667%; }
  .large-up--push-two-sixths { left: 33.33333%; }
  .large-up--push-three-sixths { left: 50%; }
  .large-up--push-four-sixths { left: 66.66667%; }
  .large-up--push-five-sixths { left: 83.33333%; }
  .large-up--push-one-eighth { left: 12.5%; }
  .large-up--push-two-eighths { left: 25%; }
  .large-up--push-three-eighths { left: 37.5%; }
  .large-up--push-four-eighths { left: 50%; }
  .large-up--push-five-eighths { left: 62.5%; }
  .large-up--push-six-eighths { left: 75%; }
  .large-up--push-seven-eighths { left: 87.5%; }
  .large-up--push-one-tenth { left: 10%; }
  .large-up--push-two-tenths { left: 20%; }
  .large-up--push-three-tenths { left: 30%; }
  .large-up--push-four-tenths { left: 40%; }
  .large-up--push-five-tenths { left: 50%; }
  .large-up--push-six-tenths { left: 60%; }
  .large-up--push-seven-tenths { left: 70%; }
  .large-up--push-eight-tenths { left: 80%; }
  .large-up--push-nine-tenths { left: 90%; }
  .large-up--push-one-twelfth { left: 8.33333%; }
  .large-up--push-two-twelfths { left: 16.66667%; }
  .large-up--push-three-twelfths { left: 25%; }
  .large-up--push-four-twelfths { left: 33.33333%; }
  .large-up--push-five-twelfths { left: 41.66667%; }
  .large-up--push-six-twelfths { left: 50%; }
  .large-up--push-seven-twelfths { left: 58.33333%; }
  .large-up--push-eight-twelfths { left: 66.66667%; }
  .large-up--push-nine-twelfths { left: 75%; }
  .large-up--push-ten-twelfths { left: 83.33333%; }
  .large-up--push-eleven-twelfths { left: 91.66667%; }
}

.show { display: block !important; }
.hide { display: none !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
@media only screen and (max-width:768px) {
  .small--show { display: block !important; }
  .small--hide { display: none !important; }
  .small--text-left { text-align: left !important; }
  .small--text-right { text-align: right !important; }
  .small--text-center { text-align: center !important; }
}
@media only screen and (max-width:1024px) {
  .medium-down--show { display: block !important; }
  .medium-down--hide { display: none !important; }
  .medium-down--text-left { text-align: left !important; }
  .medium-down--text-right { text-align: right !important; }
  .medium-down--text-center { text-align: center !important; }
}
@media only screen and (min-width:769px) {
  .medium-up--show { display: block !important; }
  .medium-up--hide { display: none !important; }
  .medium-up--text-left { text-align: left !important; }
  .medium-up--text-right { text-align: right !important; }
  .medium-up--text-center { text-align: center !important; }
}
@media only screen and (min-width:1025px) {
  .large-up--show { display: block !important; }
  .large-up--hide { display: none !important; }
  .large-up--text-left { text-align: left !important; }
  .large-up--text-right { text-align: right !important; }
  .large-up--text-center { text-align: center !important; }
}


html{font-size:10px; height:auto; -webkit-font-smoothing: antialiased; }
body { font-family: 'BatonNouveau', "Noto Sans JP", sans-serif; background-color: var(--colorBody); color:var(--colorTextBody); }
@media screen and (max-width: 1300px){
    html{font-size:calc(100vw / 120)}
}
@media screen and (max-width: 1180px){
    html{font-size:calc(100vw / 100)}
}
@media screen and (max-width: 992px){
    html{font-size:calc(100vw / 52.5)}
}
@media screen and (max-width: 475px){
    html{font-size:calc(100vw / 39)}
}
.section { position: relative}
.main { position: relative; }
.section-inner {
	width: 95vw;
	max-width:45rem;
    margin:0 auto;
    padding:0 1.5rem;
}
.section-inner-wide {
    position: relative;
    width: 100%;
    padding:0 16px;
    margin: 0 auto;
}
@media(min-width: 769px) {
    .section-inner-wide {
        padding:0 24px;
        max-width: 90rem;
    }
}
@media only screen and (min-width: 993px) {
	.section-inner {
		width:calc(50vw - 2rem);
	}
}

.front-block { z-index: 10; /*mix-blend-mode: difference;*/ justify-content: center; align-items: flex-start; display: flex; position: absolute; top: 0%; right: 0%; bottom: 0%; left: 0%; pointer-events:none}
.div-block { justify-content: center; align-items: center; width: 100%; height: 100vh; display: flex; position: sticky; top: 0}
.center-container { flex: none; justify-content: center; align-items: center; width: 100%; max-width: 100rem; display: flex}
.home-page .logo-main,
.home-page .main-section .home-block__styk{}
.home-page .logo-main{transition: opacity 2000ms linear; }
.home-page .header,
.home-page .home-block__styk{transition: all 600ms ease}
.loaded .home-page .header{opacity: 1}
.home-page .home-block__styk{ transition: opacity 2000ms linear; }
.startloaded .home-page .main-section .home-block__styk,
.loaded .home-page .main-section .home-block__styk{opacity: 1}
.startloaded .home-page .logo-main,
.loaded .home-page .logo-main{opacity: 1}
.logo-main { width: 36rem; fill:var(--colorAccent)}
@media screen and (max-width: 991px) {
    .center-container { justify-content: center }
    .logo-main { width: 25rem }
}


.styk-mom { flex-flow: column; height: 300vh; margin-bottom: -200vh; display: flex; position: relative}
.styk-mom:after {  background: linear-gradient(180deg,hsla(35,32%,93%,0),var(--colorBody) 100%,var(--colorBody));content: "";display: block;height: 50%;left: 0;position: absolute; bottom: 0; width: 100%;}
.styk { flex: none; height: 100vh; position: sticky; top: 0}
.main-section { justify-content: center; align-items: center; width: 100%; height: 100vh; display: flex; position: relative; overflow: hidden}
@media screen and (max-width: 475px){ 
    .styk-mom { height: var(--data-height-2); margin-bottom: var(--data-height-minus); min-height:90vh;  }
    .styk { height: 100dvh; min-height:100vh; height: var(--data-height); }
    .styk .main-section {height: var(--data-height);min-height:90svh;}
    .styk .main-section .home-block__styk-mom { height: calc(100% + var(--data-height)); min-height:90svh; }
}
@media screen and (min-width: 495px) and (max-width: 1440px){ 
    .styk-mom { height: 200svh; margin-bottom: -100svh; }
    .styk { height: 100svh; }
    .main-section { height: 100svh; }
}


.bg-video-code { background-position: 50%; background-size: cover; margin-bottom: 0; position: absolute; top: 0%; right: 0%; bottom: 0%; left: 0%}
.background-video { z-index: 2; height: auto; position: absolute; inset: 0;}
.w-background-video>video { position: absolute; left:50%; top:50%; height:auto; width:100%; min-height: 100vh; transform: translate(-50%,-50%);}
@media (max-aspect-ratio: 16/9) {
    .w-background-video>video { width:auto; min-width: 100%; height: calc(100% + 1px); min-height: unset; }
}

.drops-mom { z-index: 1; position: relative;  }
.home-block-wrap { z-index: 1; width: 100%;position: relative; }
.home-block { flex: none; width: 100%; position: relative; z-index: 1;}
.home-block__image { aspect-ratio: 1600 / 1380; object-fit: contain; width: 100%; display: block; }
.home-block__styk-mom { z-index: 2; /*mix-blend-mode: difference;*/ flex-flow: column; height: 200vh; display: flex; position: absolute; inset: 0% 0% auto}
.home-block__styk-mom.static { height: 100vh}
.home-block__styk { justify-content: center; align-items: flex-start; width: 100%; height: 100vh; padding-top: 16.6rem; display: flex; position: sticky; top: 0}
.home-block__styk.static { position: relative}
@media screen and (max-width: 991px) {
    .home-block__image { aspect-ratio: auto; object-fit: cover; height: 100vh }
    .home-block__styk { padding-top: 9.4rem }
    .home-block__styk { padding-top: calc(50vh + 8.5rem); }
}
@media screen and (min-width: 992px){
    .home-block:nth-child(even) img{object-position:left}
    .home-block__styk{padding-top: calc(50vh + 16rem)}
}
.trigger { position: absolute; top: 51vh; right: 0; bottom: 51vh; left: 0}
.arctext { color: var(--colorAccent); text-align: center; margin-top: 0; margin-bottom: 0; font-size: 2rem; letter-spacing: 0.12em; line-height: 2rem}
@media screen and (max-width: 991px) {
    .arctext { transform: scale(0.58); }
}
@media screen and (max-width: 475px){ 
    .mobile-link{ position: absolute; z-index: 3; width: 100%; height: 100%; top: 0; left: 0; }
}



.home-side { z-index: 10; justify-content: flex-end; align-items: flex-start; padding-top: 1.2rem; padding-right: 1.2rem; display: flex; position: absolute; inset: 0% 0% -100vh auto}
.home-side__card { background-color: var(--colorBoxBg); border-radius: 8px; flex: none; justify-content: center; align-items: center; width: 25rem; height: 30rem; display: flex; position: sticky; top: calc(50vh - 12.5rem); overflow: hidden}
.lottie-animation { object-fit: contain; width: 100%; height: 100%; display: none; position: absolute}
.home-side__card_lotties { overflow: hidden; flex: none; justify-content: center; align-items: center; width: 25rem; height: 30rem; display: flex; position: relative}
.home-side__cardLink { display: none; position: absolute; top: 0%; right: 0%; bottom: 0%; left: 0%}
.home-side__cardLinks-lom { z-index: 10; position: absolute; top: 0%; right: 0%; bottom: 0%; left: 0%}
.home-side__card_vertical { flex-flow: column; flex: none; justify-content: flex-start; align-items: flex-start; width: auto; display: flex; position: absolute; inset: auto 1.6rem 1.6rem}
.home-side__card_name-block { width: 100%; height: 4rem; position: relative; overflow: hidden}
.stragg { position: absolute; top: 0%; right: 0%; bottom: 0%; left: 0%; transition: all .3s; }
.name-line-block { flex-flow: column; justify-content: flex-start; align-items: flex-start; font-size: 1.6rem; line-height: 2rem; display: flex; position: absolute; inset: 0% 0% auto}
.name-line-block.fs-s { font-size: 1.4rem; }
.name-line-block > div { min-height: 4rem; }
.img-line-block { flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex; position: absolute; inset: 0% 0% auto }
.img-line-block img { width:100%; display: block; }
@media screen and (max-width: 991px) {
    .home-side { flex-flow: column; padding-left: 0.8rem; padding-top: calc(100vh - 20rem); left: 0; right: auto }
    .home-side__card { border-radius: 4px; width: 15rem; height: 18rem; top: auto; bottom: 0.8rem }
    .home-side__card_lotties { width: 15rem; height: 18rem }
    .home-side__card_vertical { width: auto; inset: 1.2rem 1.2rem auto }
    .home-side__card_name-block { height: 3.6rem }
    .name-line-block { font-size:1.4rem; line-height: 1.8rem; }
    .name-line-block.fs-s { font-size: 1.2rem; }
    .name-line-block > div { min-height: 3.5rem; }
}
@media screen and (min-width: 992px){ 
    /* .home-side__card_lotties { transform: scale(0.7); } */
}



.people-content {
    position: relative;
    background: linear-gradient(180deg, var(--colorAccent) 0%, var(--colorBody) 100%);
    align-content: center;
    padding: 0;
    display: grid;
    min-height: 200rem;
    height: 100vw;
    place-items: start center;
    grid-template-areas: 'main';
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    z-index: 99;
}
.people-content__link {
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    height: 50%;
    z-index: 4;
}
.people-content__linkbtn {
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    height: 70%;
    z-index: 1;
}
.people-content__linkbtn > div {
    position: sticky;
    top:0;
    width: 100%;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.people-grid {
    position: sticky;
    top:0;
    grid-area: main;
    display: grid;
    width: 100%;
    height: 100dvh;
    grid-template-columns: repeat(9,1fr);
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 0;
    overflow: hidden;
    z-index: 2;
}
.people-grid__img {
    background-size: cover;
    background-position: 50% 50%;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0.1px);
    box-shadow: 0 0 0 1px var(--colorAccent);
}
.people-grid__img:before {
    content:"";
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: #64ff00;
    background: linear-gradient(0deg, rgb(60 126 34) 0%, rgb(118 237 105) 100%);
    mix-blend-mode: screen;
}
.is-mode-dark .people-grid__img:before {
    background: linear-gradient(0deg, rgb(0 49 109) 0%, rgb(0 114 255) 100%);
}
.people-grid__img img {
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    backdrop-filter: blur(5px);
    transition: opacity 0.3s ease-in-out;
}
.people-grid__img:hover img {
    opacity: 0;
}
@media (max-aspect-ratio: 1/1) {
    .people-grid {
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        aspect-ratio: 3/2;
    }
}



/* Timeline */
.scroll_section {
    background-color: var(--colorBody);
    color:var(--colorTextBody);
    width: 100vw;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
}
.scroll_section a {
    color:var(--colorTextBody);
}
.container.is-timeline {
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    padding: 38vh 0 0;
    display: flex;
    position: relative;
    overflow: hidden
}
.heading_world {
    position: absolute;
    top: 28vh;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.heading_world h2 {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 400;
}
.heading_world h2 strong {
    font-size: 3.2rem;
    display: block;
}
.heading_world p {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-top: 1.2rem;
    margin-bottom: 0;
    text-align: left;;
}
.heading_world p.en {
    font-size: 1.2rem;
    opacity: 0.7;
    font-weight: 300;
}

.circle_wrap {
    flex: none;
    width: 90%;
    height: 42vh;
    margin-top: auto
}
.circle_height {
    width: 100%;
    padding-top: 100%;
    position: relative
}
.circle_wrapper {
    width: 100%;
    height: 100%
}

.circle_list {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative
}

.circle {
    text-align: center;
    border: 1px solid var(--colorBorder);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(.445,.05,.55,.95),opacity .4s;
    display: flex;
    position: absolute;
    inset: 0%
}

.circle_link-2 {
    margin-top: -4.8rem;
    display: block;
    position: relative
}

.circle_date {
    border: 1px solid var(--colorBorder);
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    width: 2.85rem;
    height: 2.85rem;
    margin-bottom: 1rem;
    padding: 1.5rem;
    font-size: 1.1rem;
    transition: opacity .3s;
    display: flex
}

.circle_dot {
    width: 5rem;
    height: 10rem;
    margin-left: auto;
    margin-right: auto;
    transition: transform 1s;
    display: block;
    transform: scale(0.1);
}
.circle_dot img {
    display: block;
    width: 100%;
}
.circle_description {
    opacity: 0;
    flex-flow: column;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 30rem;
    height: auto;
    margin-top: 7rem;
    transition: opacity .45s ease-in-out;
    display: flex;
    position: absolute
}

.circle_line {
    /* background-color: var(--colorBorder); */
    width: 1px;
    height: 7.5rem;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    inset: 0 0% auto;
    transform: translateY(-100%)
}

.circle_p {
    letter-spacing: -.03em;
    font-size: 1.3em;
    font-weight: 500;
    line-height: 1.4
}

.circle_p.headline_circle {
    width: 100%;
    margin-bottom: 0;
    font-size: 2.4rem;
    line-height: 1.2
}

.circle_p.base_txt {
    letter-spacing: .01em;
    width: 100%;
    margin-bottom: 0;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5
}
.circle_p.base_txt .en{
    display: block;
    font-size: 1.2rem;
    opacity: 0.7;
    font-weight: 300;
}

.scroll_track {
    height: 310vh;
    padding-top: 0;
    padding-bottom: 0
}

.txt_circle {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: column;
    margin-top: 2rem;
    display: flex
}

.circle_item {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    display: flex;
    position: absolute;
    transform: rotate(0)
}

.circle_link {
    pointer-events: auto;
}

.circle_item.current .circle_description {
    transition-delay: 500ms;
    opacity: 1;
}

.circle_item.current .circle_dot {
    transform: scale(1);
}


@media screen and (max-width: 991px) {
    .heading_world {
        
    }
    .circle_wrap {
        height: 35vh;;
    }

    .container {
        padding-left: 6vw;
        padding-right: 6vw
    }

    .container.is-timeline {
        padding-left: 0;
        padding-right: 0
    }

    .circle_link-2 {
        margin-top: -9.1em;
        font-size: 1vw;
        z-index: 2;
    }

    .circle_line{
        height: 5rem;
    }

    .circle_date {
    }

    .circle_description {
        opacity: 0;
        width: 80em;
        margin-top:5rem;
        font-size: 1vw
    }

    .circle_p.headline_circle {
        width: auto;
    }
    .txt_circle {
        margin-top: 3em
    }
}
@media screen and (max-width: 767px) {
    .heading_world {
    }
}
@media screen and (max-width: 500px) {
    .container.is-timeline {
        height: 100vh;
        padding-top: 18vh;
        overflow: visible
    }
    .heading_world {
        top:32vh
    }
    .circle_wrap {
        width: 50em;
        height: 28em;
        font-size: 2.5vw;
        position: relative;
        overflow: visible
    }

    .circle {
        width: 100%
    }

    .circle_item {
        justify-content: flex-start;
        align-items: center
    }

    .page-wrapper {
        overflow: visible
    }

    .container.is-timeline {
        height: 100vh;
        padding-top: 18vh;
        overflow: visible
    }

    .circle_link-2 {
        flex-flow: column;
        margin-top: -7em;
        display: flex;
    }

    .circle_dot {
        width: 3rem;
        height: 6rem;
    }

    .circle_date {
        display: none;
    }


    .circle_line {
        margin-top:0;
        height: 20em;
    }

    .circle_dot {
        order: -1
    }

    .circle_description {
        width: 120ch;
        margin-top: 20em
    }

    .circle_p.headline_circle {
        font-size: 2rem;
    }

    .circle_p.base_txt {
        width: auto;
        font-size: 1.3rem
    }
}



/* Article */
.rte h2,
.rte .h2 {
    font-size: 2.4rem;
    line-height: 1.4;
    margin-bottom: 1.2rem;
}
.rte h3,
.rte .h3 {
    font-size: 2.0rem;
    line-height: 1.4;
    margin-bottom: 1.2rem;
}
.rte h4,
.rte .h4 {
    font-size: 1.7rem;
    line-height: 1.4;
    margin-top:2rem;
    margin-bottom: 1.2rem;
}
.rte h5,
.rte .h5 {
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin-top:-0.5rem;
    margin-bottom: 1.5rem;
}
.rte p {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
@media screen and (max-width: 500px) {
    .rte p {
        font-size: 1.4rem;
    }
}
.rte ul {
    margin: 0 0 1.5rem 1.5rem;
}
.rte ul > li {
    list-style: disc;
}
.rte ol {
    margin: 0 0 1.5rem 2rem;
}
.rte ol > li {
    list-style: decimal;
    margin-bottom:1rem
}
.rte ol ul {
    margin-top:1rem
}
.rte li {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}
.rte b,
.rte strong {
    font-weight: 700;
}
.rte > *:first-child {
    margin-top: 0;
}
.rte > *:last-child {
    margin-bottom: 0;
}

.rte hr {
    border: none;
    width:6rem;
    border-top: 1px solid var(--colorBorder);
    margin: 2rem 0;
}

.rte p.en {
    font-size: 1.2rem;
    opacity: 0.7;
    font-weight: 300;
}
.rte ul.en li {
    font-size: 1.2rem;
    opacity: 0.7;
    font-weight: 300;
}

.arrow-btn {position:relative;display:inline-block;font-size:1.3rem;letter-spacing:0.1em;line-height: 5rem;color:var(--colorTextBody);transition: all 700ms cubic-bezier(0.19, 1, 0.22, 1);}
.arrow-btn>span {position:relative;display:flex;align-items: center;ptext-transform:uppercase;letter-spacing:.1rem;}
.arrow { position: relative; margin:-1px 5px 0 10px; height: 1px; width: 8px; display: inline-block; background: var(--colorAccent); transition: width 700ms cubic-bezier(0.19, 1, 0.22, 1); }
.arrow::before, .arrow::after { content: ''; position: absolute; top: 0; right: 0; height: 1px; width: 8px; display: block; background: inherit; transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1); }
.arrow::before { transform: translateX(5px) rotate(45deg); transform-origin: 100% 100%; }
.arrow::after { transform: translateX(5px) rotate(-45deg); transform-origin: 100% 0%; }
a.arrow-btn:hover { color:  var(--colorAccent); }
a:hover .arrow { width:20px; }
a:hover .arrow::before { transform: translateX(9px) rotate(-45deg); transform-origin: 100% 0%; }
a:hover .arrow::after { transform: translateX(9px) rotate(45deg); transform-origin: 100% 100%; }


.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--colorAccent);
    background-size: cover;
    background-position: 50% 50%;
    display: flex;
    margin-bottom: 3rem;
}
.hero--gray {
    background-color: rgba(var(--colorTextBodyRGB), 0.5);
}
.hero__fog-bg {
    z-index: 1;
    background: linear-gradient(180deg,hsla(35,32%,93%,0),var(--colorBody) 90%,var(--colorBody));
    margin-left: -1.6rem;
    margin-right: -1.6rem;
    position: absolute;
    inset: 0%;
}
.hero__bg {
    color: var(--colorTextBody);
    height: 100%;
    position: absolute;
    inset: 0% auto;
    width:100%;
    opacity: 0.2;
}
@media (max-aspect-ratio: 1/1) {
    .hero__bg {
        inset: 0% auto;
        left:50%;
        transform: translateX(-50%);
        width:auto;
    }
}
.hero__img {
    z-index: 2;
    justify-content: center;
    align-items: center;
    padding-top: 10rem;
    padding-bottom: 10rem;
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0%;
    max-height: 100dvh;
    margin:0 auto;
    padding:0;
}
.hero__img-content {
    display: inline-block;
    max-height: 70dvh;
    max-width: 100%;
}
.hero__img .lt {
    font-size: 4.8rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
.hero__img h1 {
    position: relative;
    /* background-color: var(--colorTextBody);
    color: var(--colorBody); */
    text-align: center;
    font-size: 1.6rem;
    padding: 0.2rem 1rem 0.5rem;
    border-radius: 1.5rem;
    margin-top: 1rem;
    writing-mode: vertical-rl;
    position: absolute;
    padding:1rem 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width:10rem;
    min-height:35rem;
    margin:0;
}
.hero__img h1 svg {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    /* fill: var(--colorAccent); */
    fill:#fff;
    pointer-events: none;
    background: url(../img/logo-vertical-waku2.svg?2) no-repeat center/contain;
}
.hero__img h1 span {
    position: relative;
    color:#fff;
    z-index: 2;
}
.hero__img h1.nobox {
    background-color: unset;
    color: var(--colorTextBody);
}

.hero__img--difference {
    mix-blend-mode: difference;
}
.hero__img--difference .lt {
    color:#fff;
}
.hero__img--difference h1 {
    background-color: #fff;
    color: #000;
}
.hero__img--full {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    padding:0;
    z-index: 0;
}
.hero__img--full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.hero__img--vertical {
    width:100%;
    height:calc(100% - 10rem);
    margin-top:5rem;
    background-size:cover;
    background-position:50% 50%;
    border-radius: 2rem;
    position:relative;
}

.hero__title {
    background: unset;
    color:var(--colorTextBody);
    text-align: center;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 3;
}
.hero__title h1{
    font-size: 6rem;
}
.hero__title p{
    font-size: 1.4rem;
    font-weight: 500;;
}
#kyutai {
    width: 100%; max-width: 600px; aspect-ratio: 1/1; margin: 0 auto; position:relative;
}
#kyutai canvas {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
#kyutai canvas.loaded {
    opacity: 1;
    pointer-events: auto;
}
.marquee-wrap {
    position: fixed;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    z-index: 2;
    writing-mode: vertical-rl;
    pointer-events: none;
}
.marquee {
    display: flex;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    font-size:12rem;
    line-height: 1;
    text-transform: uppercase;
    color:var(--colorAccent);
    /* opacity: .6; */
    animation: marquee-anim-y 12s linear infinite;
}
.marquee span {
    display: inline-block;
    padding-top: 1em;
}
@keyframes marquee-anim {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
@keyframes marquee-anim-y {
    0% { transform: translateY(0%); }
    100% { transform: translateY(-50%); }
}
@media(max-width: 768px) {
    .marquee {
        font-size:6rem;
        opacity: .8;
    }
}

.article-block {
    position: relative;
    width: 100%;
    margin: 6rem 0;
    padding:1rem 0;
}
.article-block:first-child {
    margin-top: 0;
}
.article-block__title {
    position: relative;
    margin:3rem auto;
    text-align: center;
    padding:0 2rem;
}
.article-block__title h2 {
    position: relative;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.1;
}
.article-block__title .lt {
    position: absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color:var(--colorAccent);
    font-size: 4.8rem;
    line-height: 1.2;
    opacity: 0.5;
}
.article-block__image {
    width: 100%;
    max-width: 45rem;
    margin: 3rem auto;
    display: block;
    background-color: var(--colorAccentReverse);
    background-color: var(--colorTextBody);
    box-shadow: 0 0 2px var(--colorBorder);
    border-radius: 1rem;
    overflow: hidden;
}
.article-block__image img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: difference;
}
.article-block__image .normal-img {
    mix-blend-mode: normal;
}
.grid__item > .article-block__image {
    margin:0;
    background-color: var(--colorBody);
}

.article-index {

}
.article-index p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    letter-spacing: 0.1em;
}
.article-index ol {
    margin: 0 0 1.5rem 2rem;
}
.article-index li {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    padding-left: 0.3rem;
    list-style: decimal;
    border-bottom: 1px solid var(--colorBorder);
}
.article-index li:last-child {
    border-bottom: none;
}
.article-index li a {
    color: var(--colorTextBody);
    text-decoration: none;
}


.about-sec__img {
    width: 100%;
    display: block;
    overflow: hidden;
}
.about-sec__img img {
    aspect-ratio: auto;
    object-fit: cover;
    height: 100vh;
    width:100%
}
.about-sec__text {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.member-wrap {
    position: relative;
    width: 100%;
    padding:0 16px;
    margin: 0 auto;
}
@media(min-width: 769px) {
    .member-wrap {
        padding:0 24px;
        max-width: 90rem;
    }
}
.member-filter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.member-filter label {
    font-size: 1.2rem;
    line-height: 1.4;
    margin-right: .5rem;
}
.member-filter select {
    font-size: 1.4rem;
    line-height: 1.4;
    padding: 0.5rem 0;
    border-radius: 4px;
    border: 0;
    border-radius: 0;
    background-color: var(--colorBody);
    border-bottom: 1px solid var(--colorTextBody);
    color: var(--colorTextBody);
}
.member-image {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    margin-bottom: 1rem;
    overflow: hidden;
}
.member-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.member-name {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.member-bio {
    font-size: 1.2rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    margin-bottom: 1rem;
}
.member-categories {
    font-size: 0;
    margin-right: -0.5rem;
}
.member-category {
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1.4;
    padding: 0.2rem 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: var(--colorAccent);
    border-radius: 4px;
}

.barba-leave {
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.barba-leave {
  opacity: 0;
}
.barba-enter {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(.4,0,.2,1);
}
.barba-enter {
  opacity: 1;
}

.archive-sec {
    padding:1rem 0;
}
.archive-sec__title {
    text-align: center;
    margin-bottom: 7.5rem;
    
}
.archive-sec__title h1 {
    font-size: 7.5rem;
}
.archive-sec__title p {
    margin:0;
}

.archive-grid {
    display: block;
    border-radius: 1rem;
    padding:1rem;
    box-shadow: 0 0 2px var(--colorBorder);
    background-color: var(--colorBoxBg);
    color:var(--colorTextBody);
    transition: all 0.3s ease-in-out;
}
.archive-grid:hover {
    box-shadow: 0 1px 8px var(--colorBorder);
}
.archive-grid__image {
    position: relative;
    width: 100%;
    height:auto;
    padding-bottom: 125%;
    display: block;
    border-radius: 0.8rem;
    overflow: hidden;
    margin:0 0 1rem;
    background: linear-gradient(180deg, var(--colorAccent) 0%, var(--colorBody) 100%);
}
.archive-grid__image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.archive-grid__content {
    text-align: center;
}
.archive-grid__content h2 {
    font-size: 1.6rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}
.archive-grid__content p {
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}



.cv-block {
    position: relative;
    padding:0;
    margin: 0 -1rem 3rem;
}
.cv-block__bg {
    position: relative;
    width: 100%;
    height:0;
    padding-bottom: 100%;;
    display: block;
    overflow: hidden;
    background: url(../img/member.png) no-repeat center/cover;
    transition: all 3s;
}
.cv-block:hover .cv-block__bg {
    transform: rotate(360deg);
}

.cv-block__bg--nomember {
    background: url(../img/no-member.png) no-repeat center/cover;
}
.cv-block__link {
    position: absolute;
    top:0;
    left:0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color:var(--colorTextBody)
}
.cv-block__link p {
    font-size: 1.4rem;
    font-weight: 600;
    opacity: .7;
    line-height: 1.4;
    margin: 1rem 0;
    text-align: center;
}
.cv-block__btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.4rem;
    list-style: 1.2;
    height:7rem;
    min-width: 66%;
    background: var(--orange);
    color:#fff;
    border-radius: 10rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.8s cubic-bezier(.19,1,.22,1);
}
.cv-block__btn i {
    position: absolute;
    top:0.5rem;
    left:0.5rem;
    width:6rem;
    height:6rem;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: all 0.4s cubic-bezier(.19,1,.22,1);
}
.cv-block__btn strong {
    font-weight: 600;
    font-size:1.2rem;
}
.cv-block__btn .en {
    font-size:1.0rem;
    text-transform: uppercase;
    margin-top: 0.1rem;
}
.cv-block__btn:hover {
    transform: scale(0.95);
}
.cv-block__btn:hover i {
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.cv-block__btn.is-click i {
    left:calc(100% - 6.5rem);
}
@media(max-width: 768px) {
    .cv-block__link p {
        font-size: 1.2rem;
    }
    .cv-block__btn {
        font-size: 1.2rem;
        height: 6rem;
    }
    .cv-block__btn i {
        width:5rem;
        height:5rem;
    }
}