@charset "UTF-8";

/*
color
-----------------------------------------------------*/
:root {
 --main: #4D4D4D;
 --blue1: #68B6E0;
 --blue2: #89CED5;
 --yellow1: #DADBA4;
 --green1: #9ECE8A;
 --green2: #265F0F;

 --g-green1: #DEE8D4;
 --g-yellow: #ECEDDE;
 --g-green2: #E3EBE5;
 --g-blue1: #DBE9EB;
 --g-blue2: #CFE2E8;
 --g-blue3: #C6DCE6;

 --bg-blue1: #94CFEF;
 --bg-blue2: #B5DFE3;
 --bg-green: #B7DBA8;


 	--100vw: 100vw;
	--1rem: 1rem;
	--px: calc(1px * var(--scale));
	--rem: calc(1rem * var(--scale));
	--scale: max(1, var(--window-width) / 1440);
  --window-width: calc(tan(atan2(var(--100vw), 1px)) * min(1, 16 / tan(atan2(var(--1rem), 1px))));

  --mh--duration01: 0.3s;
  --mh--duration02: 0.6s;
  --mh--duration03: 0.9s;
  --mh--duration04: 1.2s;
  --mh--easing01: ease;
  --mh--easing02: cubic-bezier(0.1, 0.7, 0.4, 1);
  --mh--easing03: cubic-bezier(0.03, 0.9, 0.15, 1);
  --mh--easing04: cubic-bezier(1, 0, 0.87, 0.86);
  --mh--easing05: cubic-bezier(0.3, 0.1, 0.36, 1.15)
}

/*
  Reset
-----------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

a{
  display: block;
  color: inherit;
  text-decoration: none;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
  Base
-----------------------------------------------------*/
*,
:before,
:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  color: var(--main);
  text-rendering: optimizeLegibility;
  font: 1.6rem "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo;
  letter-spacing: 0.1rem;
  line-height: 1.8;
}
body.is-drawerActive {
  overflow: hidden;
}

/* html,
body,
a {
  cursor: none;
} */

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  width: 100%;
}

a {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: block;
}

picture{
  display: block;
}

dt,
dd {
  display: inline-block;
}

*[lang=en] {
  font-family: "lato", sans-serif;
}

#top{
   opacity: 0;
}

.upper {
  text-transform: uppercase;
}

.cap {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.l-main{
  /* background-color: #DBEAEB; */
}
/* =====================================================
  Layout
===================================================== */
/*
  Centering
-----------------------------------------------------*/
.wrap {
  margin: 0 auto;
  max-width: 1000px;
  width: 90%;
  /* width: calc(100% - 34px); */
}

.wrap.90{
  width: 90%;
}

.wrap.80{
  width: 80%;
}

.wrap._95{
  width: 95%;
}

.wrap.wide{
 max-width: 800px;
}

.wrap.short{
  max-width: 550px;
}

.wrap.column-grid{
  max-width: none;
  width: 90%;
}

.l-contents{
	padding-block: calc(100 * var(--px));
}

.l-contents.-short{
	padding-block: calc(60 * var(--px));
}

@media screen and (max-width: 768px){
  .wrap.short{
  max-width: none;
  width: 100%;
  }
  .l-contents{
    padding-block: calc(80 * var(--px));
  }
}

/*
 background
-----------------------------------------------------*/
.l-body{
  position: relative;
}
.l-body:before{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
  /* background: linear-gradient(
    150deg,
    var(--g-green1) 0%,
    var(--g-yellow) 20%,
    var(--g-green2) 40%,
    var(--g-blue1) 60%,
    var(--g-blue2) 80%,
    var(--g-blue3) 100%
  ); */

  /* animation: Grad 4s infinite alternate; */
    --x-0: 85%;
    --y-0: 80%;
    --c-0: hsla(102.35294117647057, 26%, 77%, 1);
    --c-1: hsla(61.09090909090892, 38%, 88%, 1);
    --y-1: 24%;
    --x-1: 60%;
    --c-2: hsla(185.526315789474, 31%, 84%, 1);
    --x-2: 13%;
    --y-2: 82%;
    --x-3: 24%;
    --c-3: hsla(201.1764705882353, 39%, 83%, 1);
    --y-3: 7%;
    background-color: hsla(358.0000000000001, 0%, 100%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3));
    animation: hero-gradient-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal;
}
@keyframes hero-gradient-animation {
    0% {
        --s-start-0: 9%;
        --s-end-0: 55%;
        --x-0: 85%;
        --y-0: 80%;
        --c-0: hsla(102.35294117647057, 26%, 77%, 1);
        --s-start-1: 5%;
        --s-end-1: 72%;
        --c-1: hsla(61.09090909090892, 38%, 88%, 1);
        --y-1: 24%;
        --x-1: 60%;
        --c-2: hsla(185.526315789474, 31%, 84%, 1);
        --s-start-2: 5%;
        --s-end-2: 52%;
        --x-2: 13%;
        --y-2: 82%;
        --x-3: 24%;
        --c-3: hsla(201.1764705882353, 39%, 83%, 1);
        --s-start-3: 13%;
        --s-end-3: 68%;
        --y-3: 7%;
    }

    100% {
        --s-start-0: 9%;
        --s-end-0: 55%;
        --x-0: 31%;
        --y-0: 94%;
        --c-0: hsla(103.19999999999999, 30%, 83%, 1);
        --s-start-1: 5%;
        --s-end-1: 72%;
        --c-1: hsla(63.999999999999986, 29%, 90%, 1);
        --y-1: 25%;
        --x-1: 2%;
        --c-2: hsla(183.75, 28%, 89%, 1);
        --s-start-2: 5%;
        --s-end-2: 52%;
        --x-2: 98%;
        --y-2: 20%;
        --x-3: 95%;
        --c-3: hsla(200.62500000000003, 39%, 83%, 1);
        --s-start-3: 13%;
        --s-end-3: 68%;
        --y-3: 92%;
    }
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 9%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 85%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(102.35294117647057, 26%, 77%, 1)
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 72%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(61.09090909090892, 38%, 88%, 1)
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 24%
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 60%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(185.526315789474, 31%, 84%, 1)
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52%
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 82%
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 24%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(201.1764705882353, 39%, 83%, 1)
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 68%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%
}

/* .gradient{
  width: 100%;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    150deg,
    var(--g-green1) 0%,
    var(--g-yellow) 20%,
    var(--g-green2) 40%,
    var(--g-blue1) 60%,
    var(--g-blue2) 80%,
    var(--g-blue3) 100%
  );
  animation: Grad 4s infinite alternate;
} */

@keyframes Grad {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}

/*
  header
-----------------------------------------------------*/
.l-header{
  position: relative;

}

.p-header__nav{
}

.p-header_logo{
    z-index: 999;
    position: absolute;
    top: 0;
    width: 230px;
    left: 0;
    background: #fff;
    padding-block: calc(20 * var(--px));
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-right-radius: 60px;
}

.p-header_logo .img{
    max-width: 168px;
}
@media screen and (max-width:768px){
  .p-header_logo .img{
    max-width: 98px;
  }
  .p-header_logo{
    width: 160px;
    padding-block: calc(10 * var(--px));
    border-bottom-right-radius: 50px;

  }

/*
  Hamburger
*/
.hamburger_area {
  position: relative;
}

.p-hamburger {
  position: fixed;
  right: 2.5%;
  z-index: 2;
  width: 45px;
  height: 80px;
  outline: 0;
  border: 0;
  background-color: transparent;
  -webkit-box-shadow: 0 0 40px transparent;
          box-shadow: 0 0 40px transparent;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.p-hamburger:focus {
  -webkit-box-shadow: 0 0 0 1px #212121;
          box-shadow: 0 0 0 1px #212121;
}
.p-hamburger__line {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: auto;
  width: 75%;
  height: 2px;
  border-radius: 0.25em;
  background-color: #666666;
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}
.p-hamburger__line:before, .p-hamburger__line:after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: inherit;
  content: "";
  -webkit-transition: inherit;
  transition: inherit;
  right: 0;
}
.p-hamburger__line:before {
  top: -10px;
  width: 100%;
}
.p-hamburger__line:after {
  top: 10px;
  width: 100%;
}
}

/*
 MV
-----------------------------------------------------*/
.l-mv{
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

.l-mv .__tex{
  color: var(--blue1);
  font-size: calc(27 * var(--px));
  text-align: center;
  font-weight: 700;
}

.l-mv .__inner{
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  /* height: 100svh; */
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  z-index: 1;
  gap: 25px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.l-mv .animation-area{
  position: relative;
  width: 100%;
}

.l-mv .__inner .img1{
  text-align: center;
  position: relative;
}

.l-mv .__inner .img1 img{
  max-width: 360px;
  width: 90%;
}

.l-mv .__inner .img2{
  max-width: 640px;
  width: 100%;
}

.l-mv .__inner .img3{
  max-width: 198px;
  width: 100%;
}

.l-mv .mv_en .text{
    font-size: calc(114 * var(--px));
    font-weight: 700;
    color: #fff;
    /* color: transparent;
    -webkit-text-stroke: 1px #fff;
    text-stroke: 1px #fff; */
}


.l-mv .l-mv-bg,
.l-column .l-mv-bg{
  display: flex;
  width: 100%;
  overflow: hidden;

}
.l-mv .l-mv-bg{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.l-column .l-mv-bg{
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  top: 20%;
  position: fixed;
}
.l-column .l-mv-bg.is-block{
  opacity: 1;
}
.loop_text {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 80px;
  overflow: hidden;
  padding-left: 20px;
  color: transparent;
  font-family: "Gotham", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  }

.loop_text:nth-child(odd) {
  animation: loop 50s -25s linear infinite;
}

.loop_text:nth-child(even) {
  animation: loop2 50s linear infinite;
}

@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
}

@keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
}

@media screen and (max-width:768px){
  .l-mv{
    width: 80%;
    margin: 0 auto;
  }
  .l-mv .__tex{
    font-size: calc(calc(21 * var(--px)) + 3 * (100vw - 375px) / 1065);
  }
}

/*
 mv スクロール
-----------------------------------------------------*/
/* MVとsubの基本 */

/* .l-main-img::before {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:#dd4219
}

.l-main-img:not(.is-shown) {
  -webkit-mask-size:cover,700% calc(100% + 50px);
  mask-size:cover,700% calc(100% + 50px);
  -webkit-mask-position:left top,center -20px;
  mask-position:left top,center -20px
} */

/* .l-wrapper-bg{
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
  }

  .l-main-img:not(.is-shown) {
  -webkit-mask-size:cover,700% calc(100% + 50px);
  mask-size:cover,700% calc(100% + 50px);
  -webkit-mask-position:left top,center -20px;
  mask-position:left top,center -20px
}
.l-main-img:not(.is-shown) .l-main-img__content {
  opacity:0
}
.l-main-img:not(.is-shown) .l-main-img__bg {
  -webkit-mask-size:cover,700% calc(100% + 50px);
  mask-size:cover,700% calc(100% + 50px);
  -webkit-mask-position:left top,center -20px;
  mask-position:left top,center -20px;
}


 .l-main-img-trigger {
  position:absolute;
  top:0;
  left:0;
  right:0;
  pointer-events:none;
  height:75vh;
  height:calc(var(--vh, 1vh) * 75)
}
.l-main-img {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:2;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(#fff, #fff),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="black"/><path fill="black" d="M0 50h100v50H0z"/></svg>');
  mask-image:linear-gradient(#fff, #fff),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="black"/><path fill="black" d="M0 50h100v50H0z"/></svg>');
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:cover,120% 100%;
  mask-size:cover,120% 100%;
  -webkit-mask-position:left top,center calc(var(--vh, 1vh)*100 + env(safe-area-inset-top) + env(safe-area-inset-bottom));
  mask-position:left top,center calc(var(--vh, 1vh)*100 + env(safe-area-inset-top) + env(safe-area-inset-bottom));
  -webkit-mask-composite:source-out;
  mask-composite:subtract;
  transition:-webkit-mask-size var(--mh--duration04) var(--mh--easing04) .2s,-webkit-mask-position var(--mh--duration04) var(--mh--easing04) 0s;
  transition:mask-size var(--mh--duration04) var(--mh--easing04) .2s,mask-position var(--mh--duration04) var(--mh--easing04) 0s;
  transition:mask-size var(--mh--duration04) var(--mh--easing04) .2s,mask-position var(--mh--duration04) var(--mh--easing04) 0s,-webkit-mask-size var(--mh--duration04) var(--mh--easing04) .2s,-webkit-mask-position var(--mh--duration04) var(--mh--easing04) 0s
}
.l-main-img::before {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:#dd4219
}
.l-main-img__bg {
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(#fff, #fff),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="black"/><path fill="black" d="M0 50h100v50H0z"/></svg>');
  mask-image:linear-gradient(#fff, #fff),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="black"/><path fill="black" d="M0 50h100v50H0z"/></svg>');
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:cover,120% 100%;
  mask-size:cover,120% 100%;
  -webkit-mask-position:left top,center calc(var(--vh, 1vh)*100 + env(safe-area-inset-top) + env(safe-area-inset-bottom));
  mask-position:left top,center calc(var(--vh, 1vh)*100 + env(safe-area-inset-top) + env(safe-area-inset-bottom));
  -webkit-mask-composite:source-out;
  mask-composite:subtract;
  transition:-webkit-mask-size var(--mh--duration03) var(--mh--easing01) .2s,-webkit-mask-position var(--mh--duration03) var(--mh--easing01) 0s;
  transition:mask-size var(--mh--duration03) var(--mh--easing01) .2s,mask-position var(--mh--duration03) var(--mh--easing01) 0s;
  transition:mask-size var(--mh--duration03) var(--mh--easing01) .2s,mask-position var(--mh--duration03) var(--mh--easing01) 0s,-webkit-mask-size var(--mh--duration03) var(--mh--easing01) .2s,-webkit-mask-position var(--mh--duration03) var(--mh--easing01) 0s
}
.l-main-img:not(.is-shown) .l-main-img__bg{
-webkit-mask-size: cover,700% calc(100% + 50px);
  mask-size: cover,700% calc(100% + 50px);
  -webkit-mask-position: left top,center -20px;
  mask-position: left top,center -20px;
}
.l-main-img__content {
  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  width:85.3333333333%;
  max-width:58lvh;
  opacity:1;
  transition:opacity var(--mh--duration02) var(--mh--easing01)
} */

/*
 sub
-----------------------------------------------------*/

.l-sub{
  text-align: center;
}

.l-sub .text{
  font-size:calc(22 * var(--px)) ;
  font-weight: 700;
  padding-top:calc(80 * var(--px));
}

@media screen and (max-width:768px){
  .l-sub .text{
    font-size: clamp(calc(21rem / 16), calc(calc(18rem / 16) + 0.625vw), calc(16rem / 16));
  }
}

/*
 column area
-----------------------------------------------------*/
.column-grid{
  position: relative;
  display: grid;
  gap: 2.5%;
  grid-template-columns: minmax(250px, 1fr) minmax(550px, 1fr) 1fr;
}

.center{
 min-height: 1500px;
}

.l-column{
  position: relative;
  overflow: clip;
}

.l-column-bg{
    position: absolute;
    top: 0;
    left: 0;
    height: 118px;
    right: -100%;
    background: url(../../images-15th/bg.png) left top repeat;
    background-size: 100% auto;
    animation: marqueeHalfLoop 50s linear infinite both;
    margin-top: 3%;

}

@media screen and (max-width:768px) {
  .column-grid{
        grid-template-columns: 1fr;
  }
  .wrap.column-grid{
    width: 100%;
  }
}



/*
 message
-----------------------------------------------------*/
.l-message{
  background-color: #fff;
}

.l-message .text{
  font-size: calc(14 * var(--px));
  padding-top:calc(50 * var(--px)) ;
}
.l-message .text p{
  padding-bottom: calc(1o * var(--px));
}

.l-message .ceo{
  padding-top: calc(40 * var(--px));
}

.l-message .post{
  font-size: calc(14 * var(--px));
}

.l-message .name{
  font-size: calc(20 * var(--px));
  font-family: sicyubi-mohitsugyosho, sans-serif;
}
/*
 our story
-----------------------------------------------------*/
.l-story .body{
  text-align: center;
  color: #fff;
  background-color: var(--blue1);
  -webkit-transition: all ease-in-out;
  transition: all ease-in-out;
  position: relative;
}

.l-story .body.__blue1{
  background-color: var(--blue1);
}

.l-story .body.__blue2{
  background-color: var(--blue2);
}

.l-story .body.__green{
  background-color: var(--green1);
}

.l-story .head{
  background-color: var(--blue1);
  padding-bottom: calc(60 * var(--px));
}

.l-story .head .tit{
  font-size: calc(60 * var(--px));
  font-weight: 700;
  font-style: italic;
}

.l-story .head .sub{
  font-size: calc(18 * var(--px));
  font-weight: 700;
}


.l-story .l-story-list .item{
  position: relative;
  margin-bottom: calc(100 * var(--px));
  z-index: 1;
}

.l-story .l-story-list .item:before{
  content: "";
   background-color:var(--blue1) ;
   width: 100%;
   top: 0;
   bottom: 0;
   position: absolute;
   right: 0;
   left: 0;
   z-index: -1;
}
.l-story .body.__blue1 .l-story-list .item:before{
    background-color: var(--blue1) ;
}

.l-story .body.__blue2 .l-story-list .item:before{
    background-color: var(--blue2) ;
}

.l-story .body.__green .l-story-list .item:before{
    background-color: var(--green1) ;
}

.l-story .l-story-list .intro .inner{
  padding :calc(40 * var(--px)) 5%;
  background-color: rgba(255, 255, 255, 0.3);
}


.l-story .l-story-list .intro .c-year{
  font-size: calc(20 * var(--px));
  font-weight: 700;
  font-style: italic;
  position: relative;
  padding-bottom:  calc(5 * var(--px));
}

.l-story .l-story-list .intro .c-year:before{
  content: "";
  width: 20px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
}

.l-story .l-story-list .intro .c-tit{
  font-size: calc(28 * var(--px));
  font-weight: 800;
  padding: calc(10 * var(--px)) 0 calc(20 * var(--px));
}

.l-story .l-story-list .intro .c-text{
  font-size: calc(14 * var(--px));
  font-weight: 700;
}

.l-story .l-story-list .intro .c-text p{
  padding-bottom: 2%;
}

.l-story .l-story-list .card .c-year{
  font-size: calc(40 * var(--px));
  font-weight: 800;
  font-style: italic;
}

.l-story .l-story-list .card .c-tit{
  font-size: calc(18 * var(--px));
  font-weight: 700;
  padding-bottom: calc(10 * var(--px));
}

.l-story .l-story-list .card .c-text{z
  font-size: calc(14 * var(--px));
  font-weight: 700;
  padding-bottom: calc(15 * var(--px));
  padding-top: calc(10 * var(--px));
}

.l-story .border-line{
  position: absolute;
  background-color: #fff;
  right: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 0;
  margin-top: 17px;
}

.l-story .l-story-list .intro.__1st.change{
  background-color:var(--blue1) ;
}
.l-story .l-story-list .intro.__2nd.change{
  background-color:var(--blue2) ;
}
.l-story .l-story-list .intro.__3rd.change{
  background-color:var(--green1) ;
}

/*  */

/* 縦線のベース */
.timeline__line {
  position: absolute;
  left: 50%;
  transform: scaleX(50%);
  top: 0;
  width: 2px;
  background: transparent;
}

/* 伸びる部分 */
.timeline__line__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #fff;
}

.l-story-list .item_inner{
  position: relative;
}

.l-story-list .__main{
  position: relative;
  z-index: 1;

}

.l-story-list .__mask{
    -webkit-text-stroke-width: 1rem;
    color: var(--blue1);
    filter: blur(1rem);
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.l-story .body.__blue1 .l-story-list .__mask{
    color: var(--blue1) ;
}

.l-story .body.__blue2 .l-story-list .__mask{
    color: var(--blue2) ;
}

.l-story .body.__green .l-story-list .__mask{
    color: var(--green1) ;
}


@media screen and (max-width:768px) {
  .l-story .l-story-list .intro .c-text{
      font-size: calc(calc(13 * var(--px)) + 3 * (100vw - 375px) / 1065);
  }
  .l-story .head .tit{
      font-size: calc(calc(62 * var(--px)) + 3 * (100vw - 375px) / 1065);

  }

}
/*
 next-stage
-----------------------------------------------------*/
.l-next{
  background-image: linear-gradient(45deg, var(--blue1), var(--blue2) 33%, var(--yellow1) 66%, var(--green1) 100%);
  color: var(--green2);
  position: relative;
  overflow: hidden;
}

.l-next .inner{
  position: relative;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
}

.l-next .year{
  font-size: calc(127 * var(--px));
  font-family: amifer, sans-serif;
  font-weight: 700;
  font-style: italic;
}

.l-next .tit{
  font-size: calc(28 * var(--px));
  font-weight: 700;
}

.l-next .mark{
  padding-block: calc(50 * var(--px));
  width: 300px;
  margin: 0 auto;
}

.l-next .text{
  font-size: calc(19 * var(--px));
  font-weight: 700;
  line-height: 2.4;
  padding-bottom: calc(100 * var(--px));
}

.l-next .logo{
  max-width: 500px;
  margin: 0 auto;
  width: 90%;
}

.l-next .logo-area{
  /* background-color: #fff; */
  display: inline-block;
  /* padding: calc(20 * var(--px)); */
}

.l-next .l-next-bg{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -100%;
  background: url("../../images-15th/next-bg.png") left top repeat;
  background-size: 25% auto;
  opacity: .2;
  animation: marqueeHalfLoop 50s linear infinite both;
  margin-top: 3%;
}
@keyframes marqueeHalfLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.l-next .l-next-bg.row02{
  animation-direction: reverse;
}

.l-next .l-next-bg.row02{
  margin-top: 15%;
}

@media screen and (max-width:768px) {
  .l-next .year{
    font-size: calc(calc(75 * var(--px)) + 3 * (100vw - 375px) / 1065);
  }
  .l-next .tit{
    font-size: calc(calc(24 * var(--px)) + 3 * (100vw - 375px) / 1065);
  }
  .l-next .inner{
    padding-inline: 5%;
  }
  .l-next .text{
    font-size: calc(calc(13 * var(--px)) + 3 * (100vw - 375px) / 1065);

  }

}

/*
 side nav
-----------------------------------------------------*/
.side-nav{
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  align-self: start;
  margin-bottom: calc(80 * var(--px));
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.side-nav.is-block{
  opacity: 1;
}



.side-nav.is-bottom .inner{
  opacity: 0;
}

.side-nav .figure{
  padding-bottom: calc(50 * var(--px));
}

.side-nav .item{
  padding-bottom: calc(10 * var(--px));
  text-align: center;
}

.side-nav .item .nav{
  font-weight: 700;
  font-style: italic;
  text-align: center;
  display: inline-block;
  position: relative;

}

.side-nav .item .nav:before{
    content: "";
    opacity: 1;
    position: absolute;
    width: 0;
    height: 1px;
    left: 0;
    bottom: 0;
    transition: 0.5s ease all;
    background: var(--main);
}

@media (hover: hover) and (pointer:fine){
  .side-nav .item .nav:hover:before{
    width: 100%
  }
}


/*
 side year
-----------------------------------------------------*/
.side-year{;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  align-self: start;
}

.side-year .l-year-list .item{
  opacity: 0;
  border-left: 1px solid #fff;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #fff;
}

.side-year.is-active .l-year-list .item{
  opacity:1;
}


.side-year .item{
  padding-bottom: calc(10 * var(--px));
  font-size: calc(20 * var(--px));
  font-weight: 700;
  font-style: italic;
  font-family: "lato", sans-serif;
}

.side-year .item .year{
  position: relative;
  padding-left: calc(10 * var(--px));
}

.side-year .item .year:before{
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: -3px;
  background-color: #fff;
}

.side-year.is-active .l-year-list .item.current{
  opacity: 1;
  font-size: calc(30 * var(--px));
}

.side-year.is-active .l-year-list .item.current.__1st{
  color: var(--blue1);
}
.side-year .item.current.__1st .year:before{
  background-color: var(--blue1);
}
.side-year.is-active .l-year-list .item.current.__2nd{
  color: var(--blue2);
}
.side-year .item.current.__2nd .year:before{
  background-color: var(--blue2);
}
.side-year.is-active .l-year-list .item.current.__3rd{
  color: var(--green1);
}
.side-year .item.current.__3rd .year:before{
  background-color: var(--green1);
}
/*
 side
-----------------------------------------------------*/
.l-slider{
  padding-top:calc(70 * var(--px));
}
.slider-list{
  margin-right: 20px;
}



/* =====================================================
  Component
===================================================== */
/*
  primary-heading
-----------------------------------------------------*/
.c-primary-heading{
  display: flex;
  flex-direction: column;
  padding-bottom: calc(40 * var(--px));
}
.c-primary-heading .en{
  font-size: calc(42 * var(--px));
  font-style: italic;
  line-height: normal;
}

.c-primary-heading .jp{
  font-weight: 400;
}

/*
  btn
-----------------------------------------------------*/
.c-btn{
  padding-top: calc(20 * var(--px));
  max-width: 250px;
  width: 100%;
  margin: 0 auto;
}
.c-btn .btn1{
  background: #fff;
  position: relative;
  max-width: 240px;
  font-size: calc(14 * var(--px));
  font-weight: 700;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  padding-block: 20px;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
}

.c-btn .btn1:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
  margin: auto;
  width: 60px;
  height: 60px;
  background: var(--main);
  transform: scale(0);
  transition: 0.6s ease all;
}


.c-btn .btn1 svg{
  fill: var(--main);
  transition: 0.6s ease all;
}

.c-btn .btn1 .inner{
  position: relative;
}

@media (hover: hover) and (pointer:fine){
  .c-btn .btn1:hover:before{
    transform: scale(4.2);
  }
  .c-btn .btn1:hover{
    color: #fff;
  }

  .c-btn .btn1:hover svg{
     fill: #fff;
  }
}



/*
  Utility
-----------------------------------------------------*/


/*
  Break
*/
.u-break .-sp {
	display: none;
}
@media screen and (max-width:768px) {
  .u-break .-sp {
    display: block;
  }
	.u-break .-pc {
		display: none;
	}
}



/*
  Screen Reader Text
*/
.screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
}