:root {
  --vw: 100vw;
  --first-view-height: 100vh;
  --max-content-width: 168rem;
  --color-base: #222222;
  --color-bg: #f4f1ec;
  --color-primary: #c1341c;
  --color-pink: #ff5a5a;
  --color-blue: #0068bc;
  --color-textblue: #003364;
  --color-sky: #e0e9ff;
  --color-green: #00c1aa;
  --color-yellow: #5e5534;
  --color-yellow-guide: #f6cf45;
  --color-yellow-blur: #ffe366;
  --color-orange: #e95412;
  --color-cream: #fcf0be;
  --color-purple: #c098dd;
  --color-white: #ffffff;
  --color-black: #444444;
  --color-black2: #222222;
  --color-black3: #111111;
  --color-gray: #eeeeee;
  --color-twitter: #1da1f2;
  --color-line: #06c755;
  --color-facebook: #0668e1;
  --color-copy: #c098de;
  --color-present-base: #000091;
  --breakpoints-xs: 320px;
  --breakpoints-sm: 768px;
  --breakpoints-md: 1024px;
  --breakpoints-lg: 1440px;
  --breakpoints-xl: 1680px;
  --breakpoints-full: 9999px;
  --design-view-width-pc: 1440px;
  --design-view-width-sp: 750px;
  --zindex-back: 0;
  --zindex-middle: 10;
  --zindex-front: 100;
  --zindex-modal: 1000;
  --zindex-magic: 10000;
  --zindex-always: 20000;
  --font-weight-thin: 100;
  --font-weight-extraLight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semiBold: 600;
  --font-weight-bold: 700;
  --font-weight-extraBold: 800;
  --font-weight-black: 900;
  --font-family-gothic: "Zen Kaku Gothic New", sans-serif;
  --font-family-garamond: "EB Garamond", serif;
  --font-family-shippori: "Shippori Mincho", serif;
  --font-family-bellefair: "Bellefair", serif;
  /* --font-family-mincho:'Shippori Mincho', serif; */
  --font-family-mincho: "Zen Old Mincho", serif;
  --leading-none: 1;
  --leading-tight: 1.2;
  --ease-linear: cubic-bezier(0.25, 0.25, 0.75, 0.75);
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-inout-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-inout-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-inout-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-inout-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-inout-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-inout-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-unleash: cubic-bezier(0.16, 0.05, 0, 1);
  --ease-in-unleash: cubic-bezier(0.56, 0.09, 0.7, 0.21);
  --ease-out-unleash: cubic-bezier(0.11, 0.92, 0.3, 1);
  --ease-inout-unleash: cubic-bezier(0.53, 0.2, 0.29, 1);
  --ease-pop: cubic-bezier(0.19, 0.04, 0.28, 1.39);
  --ease-in-pop: cubic-bezier(0.52, -0.28, 0.85, 0.14);
  --ease-out-pop: cubic-bezier(0.23, 1, 0.46, 1.4);
}
/* ACCORDER Inc.
/* reset.css
/* Based on Yahoo! CSS Reset (YUI 3)
*/
html {
  background-color: #f4f3ed;
  color: #000;

}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
body {
  -webkit-text-size-adjust: 100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
svg:not(:root) {
  overflow: hidden;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  height: auto;
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
li {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
q:before,
q:after {
  content: "";
}
abbr,
acronym {
  border: 0;
  font-variant: normal;
}
sup {
  vertical-align: super;
}
sub {
  vertical-align: sub;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
input,
textarea,
select {
  *font-size: 100%;
}
input,
select {
  vertical-align: middle;
}
legend {
  color: #000;
}
figure {
  margin: 0;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
html.is-drawerActive {
  touch-action: none;
}
body{
  overflow-y: hidden;
}
/* =================================== */
/* Lenis */

.l-header {
  overflow-x: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .lenis.lenis-smooth {
  scroll-behavior: auto;
}
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* .lenis.lenis-stopped {
  overflow: hidden;
} */

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* =================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-gothic);
  overflow-y: hidden;
}

/* @media screen and (min-width: 768px) {

} */
@media screen and (min-width: 768px) {
  html,
  body {
    overflow-y: initial;
    /* hright: 100vh; */
  }
}

html {
  overflow: scroll;
}
html.lenis {
  height: auto;
}
/* .header */
.header_title {
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* height: 100vh; */
  z-index:10;
}
.header_info {
  position: relative;
  z-index: 1;
}

.header_nav {
  padding-top: calc(120 / 667 * 100svh);
}
.hero__logo {
  opacity: 0;
  position: fixed;
  z-index: 2;
  top: 16px;
  left: calc(24 / 375 * 100vw);
}
@media screen and (min-width: 1024px) {
.header_nav {
  padding-top: 0px;
}
.drawer_inner {
  z-index: 1;
  opacity: 0;
  padding-bottom: 27rem;
  overflow: auto;
  height: 100%;
}
.hero__logo{
  /* opacity: 0; */
  transition: transform 0.6s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.8s cubic-bezier(0.12, 0, 0.39, 0),
  /* visibility 0.8s cubic-bezier(0.12, 0, 0.39, 0), */
}
[data-is-top="false"] .drawer_inner{
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.12, 0, 0.39, 0),opacity 0.5s cubic-bezier(0.12, 0, 0.39, 0),
  visibility 0.5s cubic-bezier(0.12, 0, 0.39, 0);

}
[data-is-top="true"] .drawer_inner{
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  transition: transform 0.5s cubic-bezier(0.12, 0, 0.39, 0), opacity 0.5s cubic-bezier(0.12, 0, 0.39, 0);

}
}

/* globalNav */
.globalNav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: flex-start;
}
.globalNav a {
  font-family: var(--font-family-gothic);
  text-decoration: none;
  color: #003364;
  font-size: calc(15 / 16 * 1rem);
  transition: color 0.3s var(--ease-in-sine);
  font-weight: 500;
  width: 100%;
  display: block;
  padding: 1rem 0;
}
.globalNav__item {
  color: #003364;
  width: 100%;
  font-weight: 500;
  position: relative;
}
.globalNav__item._top::after {
  content: "";
  width: 14.48px;
  height: 7.85px;
  background-image: url("./images/nav-arrow.svg");
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto 0;
}
.globalNav__item.-tab a {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 5px;
}
.globalNav__item.-tab a:after {
  content: "";
  width: 14px;
  height: 12px;
  background-size: cover;
  background-image: url("./images/tab2.svg");
  transition: background-image 0.3s var(--ease-in-sine);
}
.is-historyActive .globalNav__item.-tab a:after {
  background-image: url("./images/tab2-white.svg");
}
.globalNav__item._top + .globalNav__item._top {
  border-top: 1px solid rgba(0, 51, 100, 0.13);
}
.globalNav .globalNav__item._top:first-child {
  border-top: 1px solid rgba(0, 51, 100, 0.13);
}
.globalNav .globalNav__item._top:nth-child(3) {
  border-bottom: 1px solid rgba(0, 51, 100, 0.13);
}
.globalNav__item.-tab + .globalNav__item.-tab {
  margin-top: 1rem;
}
.globalNav__item._bottom {
  margin-top: 52px;
}
.globalNav__item.-tab {
  text-align: center;
}
.globalNav__item.-tab a {
  padding: 0;
}
.globalNav__item._bottom {
  margin-top: 52px;
}
@media screen and (min-width: 1024px) {
  .globalNav a {
    padding: 0;
    position: relative;
    display: inline-block;

  }
  .globalNav__item a,
  .progress_link {
    position: relative;
  }
  .globalNav__item a::before,
  .progress__end::before {
    position: absolute;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: #003364;
    bottom: -1px;
    transform: scale(0, 1);
    transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
    transition: transform 0.3s; /*変形の時間*/
  }
  .progress__end::before{
    background: #fff;
  }
  .is-historyActive .globalNav__item a::before {
    background: #fff;
  }
  .globalNav__item a:hover::before,
  .progress__end:hover::before{
    transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
    transform-origin: left top; /*左から右に向かう*/
  }
  .globalNav__item {
    width: auto;
  }
  .is-historyActive .globalNav a {
    color: #fff;
  }
  .globalNav__item._top + .globalNav__item._top {
    border-top: 1px solid #003364;
  }
  .globalNav__item._top + .globalNav__item._top {
    margin-top: 0px;
    border-top: none;
  }
  .globalNav__item.-tab + .globalNav__item.-tab {
    margin-top: 0px;
  }
  .globalNav__item._bottom {
    margin-top: 0px;
  }
  .globalNav .globalNav__item._top:first-child {
    border-top: none;
  }
  .globalNav .globalNav__item._top:nth-child(3) {
    border-bottom: none;
  }
  .globalNav__item._top::after {
    content: none;
  }
}
/* .hamburger */
.hamburger {
  position: fixed;
  top: 27px;
  right: 24px;
  z-index: 11;
  -webkit-transition: -webkit-box-shadow 0.3s cubic-bezier(0.23, 1, 0.58, 1) 0.5s,
    -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.58, 1);
  transition: -webkit-box-shadow 0.3s cubic-bezier(0.23, 1, 0.58, 1) 0.5s,
    -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.58, 1);
  -o-transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.58, 1) 0.5s, transform 0.3s cubic-bezier(0.23, 1, 0.58, 1);
  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.58, 1) 0.5s, transform 0.3s cubic-bezier(0.23, 1, 0.58, 1);
  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.58, 1) 0.5s, transform 0.3s cubic-bezier(0.23, 1, 0.58, 1),
    -webkit-box-shadow 0.3s cubic-bezier(0.23, 1, 0.58, 1) 0.5s, -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.58, 1);
  outline: 0;
  border: 0;
  background-color: transparent;
  border-radius: 6px;
  width: 52px;
  height: 52px;
  text-align: center;
  cursor: pointer;
}
.hamburger_line {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 1px;
  margin: auto;
  border-radius: 5rem;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
}
.hamburger_line:before,
.hamburger_line:after {
  content: "";
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  transition: all 0.3s ease-in-out;
  background-color: #003364;
}
.is-drawerActive .hamburger_line {
  background-color: transparent;
}
.is-drawerActive .hamburger_line::before,
.is-drawerActive .hamburger_line::after {
  top: 0;
}
.is-historyActive .hamburger_line:before,
.is-historyActive .hamburger_line:after {
  background-color: #fff;
}
.hamburger_line::before {
  width: 100%;
}
.hamburger_line::after {
  width: calc(28 / 40 * 100%);
}
.is-drawerActive .hamburger_line::before {
  transform: rotate(30deg);
}
.is-drawerActive .hamburger_line::after {
  transform: rotate(-30deg);
  width: 100%;
}

.hamburger_line:before {
  top: -4px;
}
.hamburger_line:after {
  top: 4px;
}

main {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  height: 100dvh;
  overflow: hidden;
}
main section + section{
  margin-left: -.5px;
}
.section {
  display: grid;
  place-items: center;
}
.content {
  width: auto;
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding-left:360px;
  height: 100dvh;
}
.content__inner{
  display: grid;
  place-items: center;
  background: #f4f3ed;
  padding-left:calc(200 / 667 * 100svh);
  padding-right:calc(200 / 667 * 100svh);
  position: relative;
  width: 100%;
  height: 100%;
}
.content::after{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  content: "";
  height: 100%;
  width:360px;
  background-size: cover;
  background-position: right center;
  background: linear-gradient(to right, rgba(244, 243, 238, 0) 0%, rgba(244, 243, 238, 0.961) 86.9%, rgba(244, 243, 238, 1) 100%);
}

h2 {
  font-size: 5rem;
  font-weight: normal;
  color: #ea5a5a;
}

h2 span {
  display: inline-block;
}

.cover {
  z-index: 1;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}
.cover p {
  white-space: nowrap;
  font-size: 10rem;
  color: #fff;
}
/* content */
.content_wrapper {
  display: flex;
  align-items: center;
  column-gap:calc(115 / 667 * 100svh);
  position: relative;
  z-index: 9;
}
.content_wrapper h2{
  display: flex;
}
.content_logo img {
  width: calc(186.2 / 667 * 100svh);
  max-width: 186.2px;
}
.content_text {
  display: flex;
  align-items: flex-start;
  color: var(--color-textblue);
}
.content_text .content_text_inner .-sp{
  padding: 0;
  margin: 0;
  border: none;
  display: inline-block;
}
.content_text .content_text_inner .-pc{
  margin: 0;
  padding: 0;
  border: none;
  display: none;
}
@media screen and (min-width: 768px) {
  .content_text .content_text_inner .-pc{
  display: inline-block;
}
.content_text .content_text_inner .-sp{
  display: none;
}
.content__inner{
  display: grid;
  place-items: center;
  background: #f4f3ed;
  padding-left: 670px;
  padding-right: 418px;
  position: relative;
  width: 100%;
  height: 100%;
}
.content::after{
  width: 460px;
}
}
.content_text_inner span + span {
  margin-top:calc(22 / 667 * 100svh);
}

/* history */
.scroll__bar_item .year_content {
  opacity: 0.4;
  font-size: 15px;
  color: #fff;
  font-family: var(--font-family-garamond);
}
.content_copy {
  position: absolute;
  right: calc(100 / 667 * 100svh);
  bottom: calc(87 / 667 * 100svh);
  font-family: var(--font-family-bellefair);
  font-size: 10px;
  color: #4082c4;
  line-height: calc(23 / 14);
  font-weight: 400;
  letter-spacing: 0.1em;
  z-index: 2;
}
.content_back1 {
  position: absolute;
  left: 0px;
  top: 0px;
}
.content_back1 .-decorate {
  position: absolute;
  top: calc(90 / 700 * 100svh);
  left: calc(10 / 700 * 100svh);
}
.content_back1 .-decorate img {
  width: calc(281 / 700 * 100svh);
}
.content_back1 .-back img {
   width: calc(700 / 700 * 100svh);
}
.content_back1 .-back {
  display: none;
}
.content_back1 .-backSp {
 display: block;
}
.content_back1 .-backSp img{
  width:calc(511 / 700 * 100svh);
}
.content_back2 {
  position: absolute;
  right: 0px;
  bottom: -25px;
  overflow: hidden;
}
.message_back{
  position: relative;
}
.content_back2:after,
.message_back:after{
  position: absolute;
  bottom: 0;
  content: "";
  width: 76.83px;
  height:424.77px;
  background: linear-gradient(to right, rgba(244, 243, 238, 0) 0%, rgba(244, 243, 238, 0.953) 83.2%, rgba(244, 243, 238, 1) 100%);
}
.content_back2:after{
  right: 0;
}
.message_back:after{
  left: 0;
  transform: scaleX(-1);
}
.content_back2 .-rainbow {
  position: absolute;
  right: 0px;
  bottom:7px;
}
.content_back2 .-parallax {
  position: absolute;
  right: calc(50 / 700 * 100svh);
  bottom: calc(90 / 700 * 100svh);
}
.content_back2 .-parallax img {
  width: calc(324 / 700 * 100vh);
}
@media screen and (min-width: 768px) {
  .content_back2 .-parallax img {
  width: calc(508.8 / 900 * 100vh);
}
.content_back1 .-back{
  display: block;
}
.content_back1 .-backSp {
 display: none;
}
}
.content_back2 .-rainbow img {
  transform: rotate(0deg);
  width: calc(150 / 700 * 100svh);
}
.content_back2 .-decorate {
  position: absolute;
  right: 0;
  bottom: -40px;
}

.content_back2 img {
  width: calc(517 / 700 * 100svh);
}
@media screen and (min-width: 768px) {
  .content_back1 .-back img {
  width: calc(1120 / 900 * 100vh);
}
  .content_back2 img {
  width: calc(617 / 900 * 100vh);
}
}
/* history */
.history {
  padding-left: 124px;
  padding-right: 177px;
  width: auto;
  position: relative;
  font-size:2vh;
  z-index: 8;
  overflow-y:hidden;
  height: 100dvh;

}
.history__thumbnail {
  width: 320.64px;
}
.history__thumbnail._vertical {
  width: 235.5px;
}
.history__title h2 {
  font-size: calc(52 / 16 * 1em);
}
main::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("./images/history_bg.jpg");
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  opacity: 0;
  /* mix-blend-mode: multiply; */
  transition: all 1s ease;
  transition-delay: 0s;
  pointer-events: none;
}
.is-historyActive main::after {
  opacity: 1;
  /* transition-delay: 0.8s; */
}
.history__title {
  position: relative;
}
.history__title img {
  width: 195px;
}
.history_en {
  font-size: calc(103 / 16 * 1rem);
  text-transform: uppercase;
  -webkit-text-stroke: 1px #ffffff;
  text-stroke: 1px #ffffff;
  color: transparent;
  position: absolute;
  bottom: calc(-140 / 900 * 100vh);
  left: 0;
  font-family: var(--font-family-bellefair);
  opacity: 0.23;
}
.history__inner,
.history_content {
  display: flex;
  position: relative;
  flex-wrap: nowrap;
  z-index: 5;
  margin-top: 20px;
}
.history_content {
  padding-left: calc(100 / 16 * 1em);
}
.history__main {
  position: relative;
  color: #fff;
}

.history__main_item1,
.history__main_item2,
.history__main_item3,
.history__main_item4,
.history__main_item5 {
  position: absolute;
  top: 0;
}
.history__main_item1 .history__year {
  padding-top: 60px;
}
.history__year {
  width: calc(270 / 16 * 1em);
}
.history__year._2008 {
  width: calc(237 / 16 * 1em);
}
.history__main_item1 {
  left: 62px;
}
.history__main_item2 {
  left: 680px;
  top: -74px;
}
.history__main_item3 {
  left: 924px;
  top: 170px;
}
.history__main_item3._2021 {
  left: 919px;
  top: 174px;
}

.history__main_item4 {
  left: 1202px;
  top: 88px;
}
.history__main._pattern1 .history__main_item2 {
  top: -10px;
  transform: translate(0, -58%);
}
.history__main._pattern1 #_2000.history__main_item2 {
  top: -30px;
}
.history__main._pattern2 .history__main_item1 {
  column-gap: 215px;
  left: -15px;
  top: -109px;
}
.history__main._pattern2 .history__main_item1 .history__year {
  padding-top: 0px;
  margin-top: calc(-80 / 900 * 100vh);
}
.history__main._pattern2 .history__main_item2 {
  top: 200px;
}
.history__main._pattern2 .history__main_item2._2010 {
  top: 180px;
}
.history__main._pattern2 .history__main_item3 {
  top: 0px;
  left: 984px;
}
.history__main_item2._2018 .history__image {
  margin-top: 80px;
}
.history__main._pattern3 .history__main_item1 {
  left: 0px;
}
.history__main._pattern3 .history__main_item2 {
  display: flex;
  left: 200px;
  column-gap: 46px;
}
.history__main._pattern3 .history__main_item2._1997 .history__year {
  transform: translateY(-50%);
}
.history__main._pattern3 .history__main_item2._1997 .history__image {
  transform: translateY(40%);
}
.history__main._pattern3 .history__main_item2._1988 .history__year{
  transform: translateY(-10%);
}
.history__main._pattern3 .history__main_item2 .history__year {
  transform: translateY(-30%);
}
.history__main._pattern3 .history__main_item3 {
  left: 750px;
  top: 0px;
  gap: 0;
  height: 100%;
}
.history__main._pattern3 .history__year._first {
  position: absolute;
  top: -65px;
  left: 100px;
}
.history__main._pattern3 .history__main_item2._1976 .history__year {
  width: calc(320 / 16 * 1em);
  transform: translateY(-35%);
}
.history__main._pattern3 .history__main_item2._1976 .history__image {
  margin-top: 100px;
}
.history__main._pattern3 .history__year._first._1977 {
  top: -192px;
  left: 176px;
}
.history__main._pattern3 .history__year._first._1989 {
  top: -150px;
}
.history__main._pattern2 .history__main_item1 .history__year._1970 {
  margin-top: 0px;
}
.history__main._pattern2 .history__main_item1 .history_yea._1970{
  margin-top: calc(-140 / 900 * 100vh);
}
.history__year._2016 {
  margin-top: calc(-140 / 900 * 100vh);
}
.history__main._pattern2 .history__main_item1 .history__year._2009 {
  margin-top: calc(-90 / 900 * 100vh);
}
.history__main._pattern2 .history__main_item1 .history__year._2022 {
  margin-top: calc(-100 / 900 * 100vh);
}

.history__main._pattern3 .history__year._first._2019 {
  top: -150px;
}
.history__main._pattern3 .history__year._second {
  position: absolute;
  top: 100px;
  left: 444px;
}

.history__image._adjust{
transform: translateY(-10%);
}
.history__year_title {
  font-size: calc(38 / 16 * 1em);
  margin-bottom: calc(16 / 16 * 1rem);
  font-family: var(--font-family-garamond);
}
.history__year_title ._small {
  display: block;
  font-size: calc(6 / 16 * 1em);
  font-family: var(--font-family-gothic);
}
.history__year_list {
  display: inline-block;
  font-size: calc(15 / 16 * 1em);
   margin-bottom: calc(6 / 16 * 1rem);
  font-family: var(--font-family-mincho);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.history__year_item {
  font-size: calc(14 / 16 * 1rem);
  font-family: var(--font-family-mincho);
  font-weight: 400;
}
.history__main_item1 {
  display: flex;
  column-gap: 25px;
}

.history__year._2003 {
  width: calc(260 / 16 * 1em);
}

.history__main._pattern3 .history__main_item2._2011 .history__image {
  margin-top: 80px;
}
.history__main._pattern3 .history__main_item2._2003 .history__year {
  transform: translateY(-50%);
}
.history__main._pattern3 .history__main_item2._2003 .history__image {
  transform: translateY(60%);
}
@media screen and (min-width: 768px) {
  .history__year_title ._small {
  font-size: calc(10 / 16 * 1rem);
}
  .history__main._pattern2 .history__main_item1 .history__year._2009 {
  margin-top: calc(-120 / 900 * 100vh);
}
  .history__inner,
  .history_content
 {
  margin-top: 0px;
}
  .content_back1 .-decorate {
    left:calc(324 / 900 * 100svh);
  }

  .content_back1 .-decorate img {
      width: calc( 455 / 900 * 100svh);
  }
  .content_back2 .-rainbow {
    position: absolute;
    right: 100px;
    bottom: -50px;
  }
.content_back2 .-rainbow img {
    transform: rotate(0deg);
    width: calc(254.3 / 900 * 100svh);
  }
.content_copy {
    position: absolute;
    line-height: calc(23 / 14);
    right: calc( 200 / 900 * 100svh);
    bottom: calc(140 / 900 * 100svh);
    font-family: var(--font-family-bellefair);
    font-size: calc(14 / 900 * 100svh);
  }
.history {
    overflow-y: hidden;
    font-size: 1.78vh;
    padding-left: calc(165 / 900 * 100vh);
    padding-right: calc(232 / 900 * 100vh);
  }
.history__year_title {
    font-size: calc(52 / 16 * 1em);
    margin-bottom: calc(16 / 900 * 100vh);
  }
  .history__year {
    width: calc(260 / 16 * 1em);
  }
  .history__year.-wide {
    width: calc(268 / 16 * 1em);
  }
  .history__year#2020{
    width: calc(272 / 16 * 1em);
  }
  .history__main_item2._2017{
    left: calc(660 / 900 * 100vh);

  }
  .history__main_item2 {
    left: calc(860 / 900 * 100vh);
    top: -74px;
  }
  .history__main_item2._1972 {
    left: calc(660 / 900 * 100vh);
  }
  .history__main_item2._1985{
    left: calc(660 / 900 * 100vh);
  }
  .history__main_item3 {
    left: calc(938 / 900 * 100vh);
    top: calc(190 / 900 * 100vh);
  }
  .history__main_item3._2000{
      left: calc(838 / 900 * 100vh);
  }
  .history__main_item4 {
    left: calc(1192 / 900 * 100vh);
    top: 60px;
  }
  .history__main_item1 {
    left: calc(62 / 900 * 100vh);
  }
  .history__main_item2._2018 .history__image {
    margin-top: 0px;
  }
  .history__main._pattern2 .history__main_item1 .history__year._1970 {
  margin-top: calc(-100 / 900 * 100vh);
}
  .history__main._pattern3 .history__main_item2 {
    display: flex;
    top: calc(100 / 900 * 100vh);
    left: calc(320 / 900 * 100vh);
    column-gap: 48px calc(-48 / 900 * 100vh);
    column-gap: 46px;
  }
  .history__main._pattern3 .history__main_item2 .history__year {
    transform: translateY(-90%);
  }
  .history__main._pattern3 .history__main_item2._1976 .history__year {
    transform: translateY(-135%);
  }
  .history__main._pattern3 .history__year._first._1977 {
    left: 0;
    top: calc(-250 / 900 * 100vh);
  }
  .history__main._pattern3 .history__main_item2._1997 .history__year {
    transform: translateY(-130%);
  }
  .history__main._pattern3 .history__year._first._2019 {
    top: calc(-240 / 900 * 100vh);
  }

  .history__main._pattern1 .history__main_item2._2007 {
    top: calc(-90 / 900 * 100vh);
  }
  .history__main._pattern3 .history__year._second {
    position: absolute;
    top: calc(80 / 900 * 100vh);
    left: calc(200 / 900 * 100vh);
  }

  .history__thumbnail._vertical {
    width: calc(235.5 / 16 * 1em);
  }
  .history_en {
    font-size: calc(140 / 900 * 100vh);
  }
  .history__year_list {
    font-size: calc(15.5 / 16 * 1em);
  }
  .history__year_item {
    font-size: calc(18 / 16 * 1rem);
  }
  .history__thumbnail {
    width: calc(320 / 16 * 1em);
  }
  .history__main._pattern2 .history__main_item1 {
    left: 0;
  }
  .history__main._pattern2 .history__main_item1 {
    column-gap: calc(215 / 16 * 1em);
    top: calc(-70 / 900 * 100vh);
  }
  .history__main._pattern2 .history__main_item3 {
    top: 0px;
    /* left: 1012px; */
    left: calc(1012 / 900 * 100vh);
  }
  .history__main._pattern2 .history__main_item2 {
    top: calc(210 / 900 * 100vh);
  }
  .history__main._pattern3 .history__main_item3 {
    left: calc(980 / 900 * 100vh);
    top: 0px;
    gap: 0;
    height: 100%;
  }
  .history__main._pattern2 .history__main_item1 {
    column-gap: 215px;
    left: -5px;
    top: calc(-70 / 900 * 100vh);
  }
   .history__main._pattern2 .history__main_item1._2022 {
    column-gap: 100px;
    left: 68px;
   }
  .history__main._pattern3 .history__year._first {
    position: absolute;
    top: calc(-150 / 900 * 100vh);
    left: 0;
  }

  .history__main_item3._2021 {
    left:calc(1000 / 900 * 100vh);
    top: calc(134 / 900 * 100vh);
  }
  .history__main._pattern2 .history__main_item2._2010 {
    top: calc(180 / 900 * 100vh);
  }
  .history__main._pattern3 .history__main_item2._2011 .history__image {
    margin-top: 0px;
  }
  .history__main._pattern3 .history__main_item2._2003 .history__year {
    transform: translateY(-110%);
  }
  .history__main._pattern3 .history__main_item2._1976 .history__image {
    margin-top: 0px;
  }
  .history__main._pattern3 .history__year._first._1989 {
    top: calc(-230 / 900 * 100vh);
  }
  .history__main._pattern3 .history__main_item2._2003 .history__image {
    transform: translateY(0%);
  }
  .history__main._pattern3 .history__main_item2._1997 .history__image {
    transform: translateY(0%);
  }
  .history__main._pattern2 .history__main_item1 .history__year._2022 {
  margin-top: calc(-140 / 900 * 100vh);
  margin-right: calc(-140 / 900 * 100vh);
}
.history__main_item4._2021{
  margin-left: calc(60 / 900 * 100vh);
}
.history__main._pattern3 .history__main_item2._1988 .history__year{
  transform: translateY(-60%);
}
.history__image._adjust{
  transform: translateY(-30%);
}
.history__main_item2._2002 {
  left: calc(660 / 900 * 100vh);
}
}
.history .box {
  display: flex;
}
.box__item {
  width: 400px;
}
/* message */
.meesage {
  position: relative;
  z-index: 2;
  font-size: 1.78vh;
  height: 100dvh;
}
.meesage_lg {
  font-family: var(--font-family-garamond);
  position: absolute;
  font-size: calc(99 / 16 * 1rem);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px #003364;
  text-stroke: 1px #003364;
  opacity: 0.1;
  left: -230px;
  top: 50px;

}
.message_back {
  position: absolute;
  left: 0px;
  bottom: 0px;
}
.message_back.js-inview {
    transition-delay: 2s;
}
.message_back img {
  width: 493.63px;
}
section.meesage {
  width: auto;
  padding-left: 272px;
  background-color: #f4f3ee;
}

.meesage__inner {
  position: relative;
  z-index: 1;
}
.meesage__title {
  line-height: calc(43 / 22);
  margin-bottom: calc(24 / 16 * 1rem);
  color: inherit;
  font-size: calc(17 / 16 * 1rem);
  font-family: var(--font-family-mincho);
  letter-spacing: .1em;
}
.meesage__text p {
  font-size: calc(15 / 16 * 1rem);
  font-family: var(--font-family-gothic);
  line-height: 1.8;
}
.meesage__letter {
  line-height: 2;

}
.meesage__wrapper {
  width: 742px;
  display: grid;
  grid-template:
    "text image" auto
    "text name" 1fr /
    calc(250 / 542 * 100%) calc(214.15 / 542 * 100%);
  column-gap: 78px;
}
.meesage__text {
  grid-area: text;
  margin-top: 44px;
}
.meesage__text {
  color: var(--color-textblue);
}
.meesage__image {
  grid-area: image;
}
.meesage__image img {
  width: 100%;
}
.meesage__bottom {
  grid-area: name;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.meesage__bottom p {
  font-family: var(--font-family-mincho);
  font-size: calc(14 / 16 * 1rem);
  font-weight: 400;
}
.meesage__name {
  display: inline-block;
  margin-left: 10px;
  font-size: calc(24 / 16 * 1rem);
}
.meesage__bottom ._top {
  font-size: calc(14 / 16 * 1rem);
  margin-bottom: 0.6rem;
  letter-spacing: .1em;
  line-height: calc(26 / 14 * 1rem);
  color: var(--color-textblue);
}
.meesage__bottom ._bottom {
  font-size: calc(15 / 16 * 1rem);
  color: var(--color-textblue);
  letter-spacing: .1em;
}
.meesage__gellary {
  min-width: 1480px;
  height: 100dvh;
  position: relative;
  z-index: 2;
   overflow: hidden;
  background-color: #f4f3ee;
}
.meesage__gellary .-image figure {
  position: absolute;
  top: 50%;
  bottom: 0;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.meesage__gellary .-image img {
  width: 100%;
}
.meesage__gellary .-image figure:first-child {
  width: 191.97px;
  justify-content: flex-start;
  transform: translateY(-32%);
  left: 260px;
}
.meesage__gellary .-image figure:first-child img {
  aspect-ratio: 332.82/233.26;
  object-fit: cover;
}
.meesage__gellary .-image figure:nth-child(2) {
  left: 356px;
  margin-top: 50px;
  width: 270.89px;
  transform: translateY(0%);
  justify-content: flex-start;
}
.meesage__gellary .-image figure:nth-child(3) {
  left: 655px;
  width: 146.21px;
  margin-bottom: 20px;
  transform: translateY(-65%);
}
.meesage__gellary .-image figure:nth-child(4) {
  left: 870px;
  top: 267px;
  width: 192.18px;
}
.meesage__gellary .-image figure:nth-child(5) {
  left: 990px;
  width: 229.98px;
  top: -100px;
}
.meesage__flex {
  display: flex;
  position: relative;
  z-index: 9;
  padding-top: calc(100 / 900 * 100vh);
}
.meesage__en {
  position: absolute;
  width: 100%;
  left: 835px;
  top: 42%;
  color: #4082c4;
  letter-spacing: 0.1em;
  font-size: 9px;
  font-family: var(--font-family-bellefair);
  line-height: calc(14 / 9);
}
.gallary_back1 {
  position: absolute;
  left: 100px;
  top: 0;
  z-index: -1;
}
.gallary_back1 .-back img {
  width: 665.96px;
}
.gallary_back1 .-back {
  left: 0;
  top: -100px;
  position: absolute;
}
.gallary_back2 {
  z-index: -1;
  position: absolute;
  right: -86px;
  bottom: -100px;
}
.gallary_back2 .-back img {
  width: 500px;
}

.gallary_decorate1 {
  position: absolute;
  left: -62px;
  bottom: -20px;
  z-index: -1;
}
.gallary_back1 .-decorate {
  position: absolute;
  left: 400px;
  top: 56px;
}
.gallary_back1 .-decorate img {
  width: 226px;
}
.gallary_back2 .-decorate {
  position: absolute;
  right: 171px;
  bottom: 140px;
}
.gallary_decorate1 img {
  width: 350px;
}
.gallary_back2 .-decorate img {
  width: 272px;
}
.gellary__section{
  height: 100dvh;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .meesage__title {
    font-size: calc(22 / 16 * 1em);
    margin-bottom: calc(38 / 16 * 1rem);
  }
  .meesage__text p {
    font-size: calc(15 / 16 * 1em);
    line-height: 2;
  }
  .gallary_back1 .-back img {
    width: 928.33px;
  }
  .gallary_decorate1 {
    position: absolute;
    left: -62px;
    bottom: -64px;
    z-index: -1;
  }
  .gallary_back1 .-decorate img {
    width: 288px;
  }
  .gallary_back2 .-back img {
    width: 898.29px;
  }
  .gallary_back2 .-decorate img {
    width: 400px;
  }
  .meesage_lg {
    left: -186px;
    top: 4px;
    font-size: calc(140 / 900 * 100vh);
  }
  .meesage__wrapper {
    width: 1342px;
    display: grid;
    width: auto;
    grid-template:
      "text image" auto
      "name image" 1fr /
      calc(435 / 900 * 100vh) calc(366.4 / 900 * 100vh);
    column-gap: calc(78 / 900 * 100vh);
  }
  .meesage__text {
    grid-area: text;
    margin-top: 0;
  }
  .meesage__text {
    color: var(--color-textblue);
  }
  .meesage__image {
    grid-area: image;
  }
  .meesage__bottom {
    margin-top: 50px;
    grid-area: name;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  section.meesage {
    padding-left: calc(440 / 900 * 100vh);
  }
  .meesage__gellary {
    width: calc(2200 / 900 * 100vh);
    position: relative;
    padding-left: calc(260 / 900 * 100vh);
    overflow-y: hidden;
  }
  .meesage__en {
    position: absolute;
    width: 100%;
    left: calc(1100 / 900 * 100vh);
    top: calc(380 / 900 * 100vh);
    color: #4082c4;
    font-size: calc(14 / 16 * 1rem);
    line-height: calc(23 / 14 * 1rem);
  }
  .meesage__gellary .-image figure {
    top: 50%;
    transform: translateY(-50%);
    bottom: 0;
  }
  .meesage__gellary .-image figure:first-child {
    left: calc(332.82 / 900 * 100vh);
    bottom: calc(-100 / 900 * 100vh);
    transform: translateY(-45%);
    width: calc(332 / 900 * 100vh);
  }
  .meesage__gellary .-image figure:first-child img {
    aspect-ratio: 332.82/233.26;
    object-fit: cover;
  }
  .meesage__gellary .-image figure:nth-child(2) {
    top: calc(500 / 900 * 100vh);
    left: calc(441 / 900 * 100vh);
    width: calc(517.67 / 900 * 100vh);
    margin-top: 0px;
    justify-content: flex-start;
  }
  .meesage__gellary .-image figure:nth-child(3) {
    left: calc(947 / 900 * 100vh);
    width: calc(253.49 / 900 * 100vh);
    bottom: calc(-453.49 / 900 * 100vh);
  }
  .meesage__gellary .-image figure:nth-child(4) {
    left: calc(1280 / 900 * 100vh);
    width: calc(333.18 / 900 * 100vh);
    transform: translateY(0%);
    top: auto;
    bottom: calc(120 / 900 * 100vh);
  }
  .meesage__gellary .-image figure:nth-child(5) {
    top: auto;
    left: calc(1462 / 900 * 100vh);
    width: calc(398.72 / 900 * 100vh);
    bottom: calc(290 / 900 * 100vh);
  }
  .content_text_inner span {
    padding-bottom: 40px;
  }
  .gallary_decorate1 img {
    width: 421.38px;
  }
  .gallary_back1 {
    left: 0;
  }
  .gallary_back1 .-decorate {
    position: absolute;
    left: 660px;
    top: 56px;
  }
}
.js-parallax {
  position: relative;
}
/* scroll__bar */
.scroll__bar {
  position: fixed;
  left: 100px;
  bottom: 40px;
  opacity: 0;
  transform: translateY(20%);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.58, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.58, 1);
}
.is-historyActive .scroll__bar {
  opacity: 1;
  transform: translateY(0%);
}
.scroll__bar_item {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.scroll__bar {
  display: flex;
  width: 461px;
  border-radius: 20px;
}
.scroll__bar span {
  cursor: pointer;
}
/* drawer */
.drawer {
  top: 0;
  right: 0;
  bottom: 0;

  position: fixed;
  left: 0;
  visibility: hidden;
  opacity: 0;
  background-color: #f4f3ee;
  z-index: -5;
  height: 100svh;
  transition: all 0.4s ease-in-out;
}
.drawer::before {
  background-color: #f4f3ee;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  max-width: 150vh;
  height: 100vw;
  max-height: 150vh;
  content: "";
}
.is-drawerActive .drawer {
  visibility: visible;
  opacity: 1;
  z-index: 10;
  /* -webkit-transition: none;
    -o-transition: none;
    transition: none; */
}
.drawer_inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 4rem 48px 5rem 48px;
  overflow: auto;
  height: 100%;
}

/*  ユーティリティ  */
.c-button {
  display: inline-block;
  cursor: pointer;
  border: 0;
  /* background-color: rgba(0,0,0,0); */
  color: inherit;
  text-decoration: none;
}
.u-visuallyHidden {
  clip: rect(0 0 0 0);
  position: absolute;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.ulList li {
  /* list-style-type: disc; */
  margin: auto 0;
  position: relative;
}
.ulList li:after {
  position: absolute;
  content: "-";
  color: #fff;
  left: -0.75em;
  top: -2px;
  bottom: 10px;
  margin: auto 0;
}
.ulList {
  padding-left: 0.75em;
  list-style-type: disc;
}
/* utility */
.u-wbr {
  display: block;
}
.u-wbr.-sp {
  display: block;
}
.u-wbr.-pc {
  display: inline;
}
@media screen and (min-width: 768px) {
  .history__title img {
    width: calc(328.4 / 900 * 100vh);
  }
  .u-wbr.-sp {
    display: inline;
  }
  .u-wbr.-pc {
    display: block;
  }
}
@media screen and (min-width: 1024px) {
  .header_title {
    left: 0;
  }
  .drawer {
    position: static;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    visibility: visible;
    z-index: 1;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0);
    padding: 0;
    opacity: 1;
    width: auto;
    height: auto;
  }
  .drawer_inner {
    position: static;
    padding: 0;
    height: auto;
    overflow: visible;
  }
  .drawer::before {
    display: none;
  }
  .globalNav {
    position: relative;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    width: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    justify-content: flex-end;
    gap: 0 calc(52 / 16 * 1rem);
    margin-top: calc(76 / 16 * 1rem);
    margin-right: calc(76 / 16 * 1rem);
  }
  .hamburger {
    display: none;
  }
}
.pattern-wrapper {
  height: 60px;
  top: 50%;
  left: 0%;
  width: 100%;
  bottom: 0;
  height: 44px;
  transform: translateY(-50%);
  box-sizing: border-box;
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.pattern-dot {
  position: relative !important;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background-color: #fff;
  flex-shrink: 0;
  display: grid;
}
.pattern {
  position: relative !important;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  opacity: 0.4;
  overflow: hidden;
  padding: 0 14px;
  gap: 16px;
  box-sizing: border-box;
}
.scroll__bar .scroll__bar_item {
  position: relative;
  z-index: 10;
}

.scroll__bar_item span {
  top: -10px;
  bottom: 0;
  margin: auto 0;
  opacity: 0;
  font-size: 10px;
}
.year_content.selected {
  opacity: 1;
}
.content_text ._lg {
  font-size: calc(18 / 667 * 100vh);
  font-weight: 500;
  letter-spacing: 0.15em;
}
.content_text_inner {
  letter-spacing: 0.1em;
  font-size: calc(15 / 667 * 100svh);
  font-family: var(--font-family-shippori);
}
@media screen and (min-width: 768px) {
  .content {
    width: auto;
    height: 100vh;
    display: grid;
    place-items: center;
    padding-left: 460px;

  }
  .content_text_inner span:first-child {
    padding: 0 24px;
  }
  .content_wrapper {
  column-gap:calc(115 / 900 * 100vh);
  }
  .content_text {
    writing-mode: vertical-rl;
    display: flex;
    align-items: flex-end;
    color: var(--color-textblue);
    font-size: calc(15 / 900 * 100vh);
  }
  .content_text_inner span + span {
    padding-right: 24px;
    padding-left: 24px;
    border-right: 1px solid rgba(0, 51, 100, 0.1);
    margin-top: 0px;
  }
  .content_logo{
  align-items: center;
  display: flex;
  }
  .content_logo img {
    width: calc(250 / 900 * 100vh);
    max-width:251.26px ;
  }
  .content_text_inner {
    font-size: calc(15 / 900 * 100vh);
    border-left: 1px solid rgba(0, 51, 100, 0.1);
    border-right: 1px solid rgba(0, 51, 100, 0.1);
  }
  .content_text ._lg {
  font-size: calc(18 / 900 * 100vh);
}
  .footer__nav li + li {
  margin-top: 27px;
}
.footer__nav li a:before {
  position: absolute;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: #003364;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s;
}
.footer__nav li a:hover:before{
  transform: scale(1, 1);
  transform-origin: left top;
}
}

.progress__width {
  position: fixed;
  cursor: pointer;
  width: 659px;
  position: fixed;
  bottom: calc(112 / 900 * 100vh);
  left: 60px;
  z-index: 999;
  background-color: transparent;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  display: none;
}
.is-historyActive .progress__width {
  visibility: visible;
  opacity: 1;
}
.progress__width span {
  display: inline-block;
  width: 100%;
  position: relative;
}

.progress__end {
  position: fixed;
  right: 10%;
  bottom:20px;
  color: #fff;
  z-index: 10;
  display: flex;
  align-items: center;
  column-gap: 10px;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  font-family: var(--font-family-mincho);
}

.progress__end a{
  font-size: 15px;
  font-family: var(--font-family-gothic);
  font-weight: 400;
  color: #fff;
  text-decoration: none;
}

.progress__end ._number {
  font-size: 18px;
  display: inline-block;
  margin-right: 2px;
  font-family: var(--font-family-garamond);
}

.progress__end p {
  font-size: 15px;
}

.progress__end::after {
  content: "";
  width: 15px;
  height: 7px;
  background-image: url("./images/arrow.svg");
  background-position: center;
  background-size: cover;
  display: block;
}

.is-historyActivee .progress__width,
.is-historyActive .progress__end {
  visibility: visible;
  opacity: 1;
}

.progress__wrapper {
  position: relative;
}
.progress__back,
.progress__front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 100%;
}

.progress__front {
  z-index: 10;
  -webkit-clip-path: polygon(0 0, calc(var(--progress) * 1%) 0, calc(var(--progress) * 1%) 100%, 0% 100%);
  clip-path: polygon(0 0, calc(var(--progress) * 1%) 0, calc(var(--progress) * 1%) 100%, 0% 100%);
}
.progress__back {
  z-index: 0;
  opacity: 1;
}
//	scroll
.scroll__inner {
  position: relative;
  z-index: 999;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.scroll__back {
  content: "";
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 120vw;
  height: 120vh;
  z-index: 999;
  opacity: 1;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  transition-property: opacity,visibility;
}

.scroll__back::after {
  transition: all 0.5s ease-in-out;
  transition-property: opacity,visibility;
  position: fixed;
  left: 0;
  top: 0;
  content: "";
  opacity: 0;
  background-color: #0068bc;
  width: 120vw;
  height: 120vh;
  z-index: 99;
}
.is-loaded .scroll__back::after {
  opacity: 0.6;
}

.scroll__content {
  position: fixed;
  width: 100vw;
  z-index: 999;
  display: grid;
  place-items: center;
  transition: opacity,visibility 0.5s ease-in-out;
  row-gap: 20px;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.is-loaded .scroll__content {
  opacity: 1;
}
.scroll__content  .scroll_text{
  color: #fff;
  font-family: var(--font-family-gothic);
  font-weight: 500;
}
.is-loaded .scroll__inner {
  opacity: 1;
  visibility: visible;
}
.is-loaded .is-sp .scroll__inner {
  opacity: 0;
  visibility: hidden;
  transition:  0.5s ease-in-out;
}
   .is-loaded .is-sp  .scroll.-top .scroll__inner {
    opacity: 1;
    visibility:visible;
   }
.scroll_center {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  color: #fff;
  flex-direction: column;
  row-gap: 20px;
  z-index: 999;
  width: 100%;
}
.scroll_center p {
  font-size: 15px;
}
.scroll__content img {
  animation: hand 1.4s ease-in-out infinite;
}

@keyframes hand {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(-30px);
    opacity: 0;
  }
}

@media screen and (min-width: 768px) {
  .scroll__inner {
    display: none;
  }
   .scroll.-top .scroll__inner{
    display: block;
   }

  .progress__width {
    display: block;
  }
  .progress__end {
    bottom: calc(96 / 900 * 100vh);
    display: flex;
  }
}
/* footer */
.footer {
  position: relative;
  z-index: 5;
  height: 100dvh;
  overflow-y: hidden;
  display: grid;
  place-items: center;
  background-color: #f4f3ee;
}
.footer_list {
  margin-top: 74px;
}
.footer__nav {
  height: 100%;
  padding-right: 100px;
  padding-left: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer__nav li {
  text-align: center;
  display: flex;
  justify-content: center;
}
.footer__nav li + li {
  margin-top: 19.5px;
}
.footer__nav li a {
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: #003364;
  display: flex;
  align-items: center;
  column-gap: 5px;
}
.footer__nav li a:after {
  content: "";
  width: 14px;
  height: 12px;
  background-size: cover;
  background-image: url("./images/tab2.svg");
}
/*  footer  */
.footer {
  position: relative;
  overflow-y: auto;
}
.footer_logo a img {
  width: 165.58px;
}
.footer_bottom{
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 32px;
  margin: 0 auto;
  text-align: center;
}
.footer_copy {
  text-align: center;
  font-size: 12px;
  color: #767676;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-top: 12px;
}
.footer_bottom img{
 width: 157.65px;
}
.footer__inner {
  position: relative;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .footer {
    padding-right: 142px;
  }
  .footer_logo a img {
    width: 212.45px;
  }
  .footer_copy {
    margin-top: 21px;
    bottom: 80px;
  }
}
/*
  Visually Hidden
*/
.u-visuallyHidden:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
  clip-path: inset(50%);
}
.history_hidden1 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  height: 1px;
}
.history_hidden2 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  height: 1px;
  padding: 0;
  margin-top: 0;
}
.history__end{
  position: relative;
}
.history__end .history__main_item{
  position: absolute;
  left: 660px;
  top: calc(-135 / 900 * 100vh);
}
.history__endText{
  position: absolute;
  right: 30px;
  top: 30px;
  font-size : 22px;
  font-weight: 400;
  font-family: var(--font-family-bellefair);
}
svg text {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .history__path {
    width: calc(1471.21 / 16 * 1em);
  }
  .history_start img {
    width: calc(292.02 / 16 * 1em);
  }
  .history__end img {
    width: calc(863.41 / 16 * 1em);
  }
  .history__end .history__main_item{
   position: absolute;
    left: calc(433 / 900 * 100vh);
    top: calc(-135 / 900 * 100vh);
}
.history__endText{
  right: 0;
  top: 10px;

}
}
.section#top {
  width: 100vw;
  height: 100dvh;
  display: grid;
  overflow: hidden;
  place-items: center;
  position: relative;
  background-color: #f4f3ee;
  transition: .5s;
}
.section#top{
opacity: 0;
}
[data-is-top="false"] .section#top{
opacity: 1;
}
[data-is-top="true"] .section#top{
opacity: 0;
}
.hero__thumbnail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(19 / 677 * 100vh);
  width: 100%;
  height: 50%;
  min-width: 100vw;
  z-index: 0;
  display: grid;
  align-items: start;
}

.hero__logo a {
  display: block;
}
.hero__logo img {
  max-width: 120px;
  width: calc(95.39 / 375 * 100vw);
}
.hero__thumbnail img {
  margin: 0 auto;
  width: 100%;
}
.hero__thumbnail picture {
  margin: 0 auto;
  max-width: 373px;
  width: calc(373 / 375 * 100%);
  display: flex;
  align-items: flex-end;
}
@media screen and (min-width: 768px) {
  .hero__thumbnail {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  z-index: 0;
  display: grid;
  place-content: center;
  align-items: center
}
  .hero__thumbnail picture {
    margin: 0 auto;
    width: calc(1280 / 1600 * 100%);
    max-width: 1590px;
    height: auto;
  }
  .hero__logo {
    position: fixed;
    top: 52px;
    left: calc(74 / 1600 * 100vw);
  }
  .hero__logo img {
    max-width: 145.95px;
    width: calc(145.95 / 1600 * 100vw);
  }
.footer_bottom{
  bottom: 80px;
}
}
.u-zIndex {
  width: auto;
  position: relative;
}

/* fv */
.fv_right {
  z-index: 0;
  position: fixed;
  right: calc(48 / 375 * 100vw);
  top: calc(90 / 677 * 100svh);
}
.fv_right svg {
  width: calc(102 / 375 * 100vw);
  max-width: 102px;
  height: calc(209 / 375 * 100vw);
}
.fv__left .-txt1 svg {
  width: calc(60 / 375 * 100vw);
  max-width: 60px;
  height: calc(201 / 375 * 100vw);
}
.fv__left .-txt2 svg {
  width: calc(70 / 375 * 100vw);
  max-width: 70px;
  height: calc(242 / 375 * 100vw);
}
.fv__left {
  z-index: 2;
}
.fv__left .-txt1 {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-right: 10%;
  top: calc(90 / 677 * 100svh);
}

.fv__left .-txt2 {
  position: fixed;
  left: calc(45 / 375 * 100vw);
  top: 110px;
  top: calc(110 / 677 * 100svh);
}

@media screen and (min-width: 768px) {
  .fv_right {
  z-index: 2;
  right: calc(147 / 1600 * 100vw);
  top: 181px;
  }
  .fv_right svg {
    width: calc(171.52 / 1600 * 100vw);
    max-width: 190px;
    height: auto;
    max-width: initial;
  }
  .fv__left .-txt1 svg {
    width: calc(81.01 / 1600 * 100vw);
    max-width: 90px;
    height: auto;
    max-width: initial;
  }
  .fv__left .-txt2 svg {
    width: calc(109.432 / 1600 * 100vw);
    max-width: 115px;
    height: auto;
    max-width: initial;
  }
  .fv__left .-txt1 {
    position: fixed;
    right: auto;
    left: calc(294 / 1600 * 100vw);
    top: 181px;
  }
  .fv__left .-txt2 {
    position: fixed;
    left: calc(132 / 1600 * 100vw);
    top: 228px;
  }
}
.g1 path,
.g2 path,
.g3 path,
.g4 path,
.g5 path,
.g6 path,
.g7 path {
  opacity: 0;
}
.accent1,
.accent2 {
  filter: blur(5px);
  scale: 1;
  opacity: 0;
  position: relative;
  z-index: -10;
}
.accent2 {
  filter: blur(2px);
}
.js-inview {
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.12, 0, 0.39, 0);
}
.js-inview.is-inview {
  opacity: 1;
}
.drawer__decorate .-item1 {
  position: absolute;
  left: 33px;
  top: 24px;
  animation: spin 10s linear infinite;
  z-index: 3;
}
.drawer__decorate .-item1 img{
  width: calc(118 / 677 * 100svh);
}
@keyframes spin {
  100% {
    transform: rotateZ(360deg);
  }
}
.drawer__decorate .-item2 {
  position: absolute;
  left: 10px;
  bottom: -16px;
}
.drawer__decorate .-item2 img{
  width: calc(111 / 677 * 100svh);

}
.drawer__decorate .-item3 {
  position: absolute;
  left: calc(120 / 667 * 100svh);
  bottom: calc(30 / 667 * 100svh);
  z-index: 3;
}
.drawer__decorate .-item4 {
  position: absolute;
  right: -70px;
  bottom: -70px;
  transform: rotate(-10deg);

}
.drawer__decorate .-item4 img{
  width: calc(213 / 677 * 100svh);
}
.drawer__decorate .-item5 {
  position: absolute;
  left: 0px;
  top: -70px;
}
.drawer__decorate .-item5 img {
  width: 213px;
}
.wrapper {
  width: 50%;
  max-width: 350px;
}
.target {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}
.target img{

width: calc(103 / 667 * 100svh);
}
@media screen and (min-width: 768px) {
  .drawer__decorate {
    display: none;
  }
  .drawer__decorate .-item4 {
    position: absolute;
    right: -70px;
    bottom: -70px;
    transform: rotate(-10deg);
  }
}




/* scroll */
.scroll {
  position: fixed;
  bottom:20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.scroll__inner p {
  font-size: 16px;
}
.scroll__bar {
  width: 71.74px;
  height: 1px;
  position: absolute;
  content: "";
  background-color: #003364;
  z-index: 100;
  display: block;
}
.scroll::after {
  display: block;
  content: "";
  position: absolute;
  left: 50px;
  top: 2px;
  bottom: 0;
  margin: auto 0;
  background-color: #003364;
  opacity: 0.2;
  z-index: 1;
  font-variant-position: ;
  width: 71.74px;
  height: 1px;
}
.scroll::before {
  content: "";
  position: absolute;
  left: 50px;
  top: 2px;
  bottom: 0;
  margin: auto 0;
  width: 10px;
  height: 1px;
  background-color: #003364;
  z-index: 1;
  animation: anime-scroll1 2.4s ease-in-out infinite;
}
.section.-top .scroll {
  right: 60px;
}
.scroll__inner p {
  letter-spacing: 0.1em;
  font-family: var(--font-family-bellefair);
}
.content .scroll {
  left: -92px;
  bottom: 30px;
}
@keyframes anime-scroll1 {
  from {
    transform: translateX(0%);
    opacity: 1;
    filter: brightness(1.75);
  }
  to {
    transform: translateX(71.74px);
    opacity: 0;
    filter: brightness(0);
  }
}

@media screen and (min-width: 768px) {
  .scroll {
    display: block;
  }
  .scroll__bar {
    width: 198.17px;
  }
  .scroll {
    top: auto;
    bottom: 52px;
  }
  .content .scroll {
    left: -92px;
    top: auto;
  }
  .scroll::before {
    content: "";
    position: absolute;
    left: 50px;
    top: 2px;
    bottom: 0;
    margin: auto 0;
    width: 10px;
    height: 1px;
    background-color: #003364;
    z-index: 1;
    animation: anime-scroll2 2.4s ease-in-out infinite;
  }
  .scroll::after {
    width: 196px;
  }
  @keyframes anime-scroll2 {
    from {
      transform: translateX(0%);
      opacity: 1;
      filter: brightness(1.75);
    }
    to {
      transform: translateX(194px);
      opacity: 0;
      filter: brightness(0);
    }
  }
  #_1924,#_1950,#_1975,#_2000,#_2000,#_2024{
  padding-left: 44px;
  }
}

 body {
    overflow-y: visible;
  }
.history__main._pattern2 .history__main_item2._2023{
  top: 176px;
  left: 762px;
}
@media screen and (min-width: 768px) {
.history__main._pattern2 .history__main_item2._2023{
  top: calc(176 / 900 * 100vh);;
  left: calc(762 / 900 * 100vh);

}
body {
  overflow-y: visible;
  }
}

.fv_width{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.history_content > div + div {
 margin-left: -11px;
}
#loading--logo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  place-content: center;
  z-index: 100;
  pointer-events: none;
}
.loading--gra {
--mask-start:100%;
--mask-end: 100%;
  content: "";
  position: absolute;
  width: 120vw;
  height: 120vh;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  background: linear-gradient(-135deg, #F4F3ED var(--mask-start), #F4F3ED00 var(--mask-end));
}
#loading--logo img {

    display: grid;
  place-content: center;
  position: relative;

}

#loading--logo .-inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: grid;
  place-content: center;
}

#loading--logo .-inner {
  opacity: 1;
  margin: 0 auto;
}
#loading--logo img {
  width: 100%;
  margin: 0 auto;
  max-width: 184.33px;
}
@media screen and (min-width: 768px) {
  #loading--logo {
    width: calc(100vw);
    height: 100vh;
    z-index: 100;
    pointer-events: none;
  }
  #loading--logo img {
    width: calc(324.3 / 1600 * 100vw);
    max-width: 324.3px;
  }
}
html,
body{
  overflow-y: hidden;
}
.history__main._pattern3 .history__year._second._2005{
  position: absolute;
  top: 48px;
  left: 469px;
}
@media screen and (min-width: 768px) {
  html,
body{
  overflow-y: visible;
}
.history__main._pattern3 .history__year._second._2005{
  position: absolute;
  top: calc(80 / 900 * 100vh);
  left: calc(200 / 900 * 100vh);
}
}
.main__wrapper{
  position: relative;
  z-index: 5;
}