body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color:#eee; 
      z-index: 9999; 
      pointer-events: none; 
      opacity: 0; 
      transition: .5s .3s;
      z-index: 1000;
}
body.fadeout::after {
      opacity: 1;
}

/* nav
-----------------------------------------------------------*/
#nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  z-index: 5;
  top: 72px;
  left: 0;
  width: 100%;
  background: #EEEEEE;
  font-weight: 700;
  padding: 1em 1.5em;
  font-size: 100%;
  overflow-x:hidden;
}
#nav-sp{ display:none; position: absolute; overflow-x: hidden; z-index: 6; font-weight: 700; width: 100%; left: 0; }
#nav.fixed,#nav-sp.fixed{ position:fixed; top:0; }
#nav #logo{ margin-left:12em; width:10em; }
#nav ul{
  margin-right: 1em;
  display: flex;
  align-items: center;
  gap: 2.5em;
  font-size: 1.8em;
}
#nav li{}

.menu-trigger,
.menu-trigger span {
  display: block;
  box-sizing: border-box;
}
.menu-trigger {
  position: absolute;
  right: 2em;
  top: 15px;
  width: 36px;
  height: 36px;
  z-index: 100;
  background-color: #eee;
  border-radius: 100px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  display: none;
  z-index: 7;
}
.menu-trigger span {
  position: absolute;
  left: calc(50% - 10px);
  width: 20px;
  height: 3px;
  background-color: #000;
  transition: all .3s;
}
.menu-trigger span:nth-of-type(1) {
  top: calc(50% - 6px);
}
.menu-trigger span:nth-of-type(2) {
  top: 50%;
}
.menu-trigger span:nth-of-type(3) {
  top: calc(50% + 6px);
}
.menu-trigger.active span {  }
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(6px) rotate(-45deg);
  width: 20px;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-6px) rotate(45deg);
  width: 20px;
}

@media screen and (max-width: 1280px) {
  #nav {
    font-size: .8vw;
  }
  #nav #logo{ margin-left:2em; width:10em; }
}
@media screen and (max-width: 767px) {
  #nav {
    font-size: 100%;
    top: 110px;
    display: block;
    padding: 1em 0;
  }
  .menu-trigger { display:block; top:122px; }
  .menu-trigger.fixed { position:fixed; top:11px; }
  #nav #logo{ margin-left:2.5em; width:7em; }
  #nav ul{ display:none; }
  #nav-sp{ display: block; visibility: hidden; top: 108px; position:absolute; left: 0; height:100vh; background:none; }
  #nav-sp.active{ visibility:visible; }
  #nav-sp ul{ display:block; position: absolute; right: -18em; top: 0; background: #EEEEEE; margin:0; padding:2em 1.5em 3em; transition:.8s cubic-bezier(0.65, 0, 0.35, 1); opacity:0; z-index:7; font-size: 1.7em;  }
  #nav-sp ul.active{ right:0; opacity:1; }
  #nav-sp li{ margin-top:2em; }
  #nav-sp li:not(:last-child){ padding-left:.5em; }
  #nav-bg{ position:fixed; left:0; top:0; background-color:rgba(0, 0, 0, .15); width:100vw; height:100vh; opacity:0; transition:1s; visibility:hidden; }
  #nav-bg.active{ opacity:1; visibility:visible; }
}

/* common
-----------------------------------------------------------*/
main {
  position: relative;
  font-weight: 700;
  z-index: 2;
}
a.btn{background:#000; color:#fff; border-radius:10em; padding:.8em 1.4em; display: inline-block;}
a.btn:hover{ background:#f89728; opacity:1; }
h2.ttl{ font-size:3.8em; margin-bottom:2em; }
h2.ttl2{ font-size:3em; margin:1em auto .3em; }
h2.ttl2 span{ font-weight:400; }
h2.ttl span{ opacity: 0; position:relative; display:inline-block;  }
h2.ttl.play span:nth-child(1){ animation: h2-l .5s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(2){ animation: h2-t .5s .05s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(3){ animation: h2-b .5s .1s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(4){ animation: h2-b .5s .15s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(5){ animation: h2-s .5s .2s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(6){ animation: h2-b .5s .25s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(7){ animation: h2-t .5s .3s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(8){ animation: h2-b .5s .35s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(9){ animation: h2-s .5s .4s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(10){ animation: h2-r .5s .45s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(11){ animation: h2-s .5s .5s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(12){ animation: h2-b .5s .55s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(13){ animation: h2-b .5s .6s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(14){ animation: h2-t .5s .65s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(15){ animation: h2-b .5s .7s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(16){ animation: h2-s .5s .75s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(17){ animation: h2-t .5s .8s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(18){ animation: h2-t .5s .85s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(19){ animation: h2-b .5s .9s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(20){ animation: h2-s .5s .95s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(21){ animation: h2-t .5s 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(22){ animation: h2-t .5s 1.05s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(23){ animation: h2-b .5s 1.1s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(24){ animation: h2-b .5s 1.15s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }
h2.ttl.play span:nth-child(25){ animation: h2-t .5s 1.2s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards; }

.modal-video {background-color: rgba(0,0,0,0.95);}
.modal-video-body { max-width:1700px; }
.modal-video-close-btn{ cursor:pointer; }

@keyframes h2-l {
  0% {opacity: 0; transform:translateX(-1em) scale(1.1); }
  100% {opacity: 1; transform:translateX(0) scale(1);  }
}
@keyframes h2-r {
  0% {opacity: 0; transform:translateX(1em) scale(1.1); }
  100% {opacity: 1; transform:translateX(0) scale(1);  }
}
@keyframes h2-t {
  0% {opacity: 0; transform:translateY(-1em) scale(1.1); }
  100% {opacity: 1; transform:translateY(0) scale(1);  }
}
@keyframes h2-b {
  0% {opacity: 0; transform:translateY(1em) scale(1.1); }
  100% {opacity: 1; transform:translateY(0) scale(1);  }
}
@keyframes h2-s {
  0% {opacity: 0; transform:scale(1.3); }
  100% {opacity: 1; transform:scale(1); }
}

@media screen and (max-width: 1610px) {
  main {
    font-size: .62vw;
  }
}

@media screen and (max-width: 768px) {
  main {
    font-size: 1.5vw;
  }
}

/* kv
-----------------------------------------------------------*/
#kv {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100vw;
  max-width: 1920px;
  height: calc(100vh - 80px);
  z-index: 1;
  overflow-x: hidden;
}
#kv.fixed{ position:fixed; }
.kv_img{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  display: block;
}
.kv_img.sp{ display:none; }
.kv_img video {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%,-50%);
}
.kv_img .play-btn{ max-width:250px; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); z-index:1; transition:.5s; opacity:.7; }
.on .kv_img .play-btn{ opacity:0; }
#kv .cover{ content: ""; background: rgba(238, 238, 238, .95); height:100%; width:100%; display:block; position:absolute; left:0; top:0; pointer-events:none; z-index:1; visibility: hidden; opacity:0; transition:1s; }
#kv.on .cover{ opacity:1; visibility: visible; pointer-events:visible; }

#thought-bg{ background:url(../img/thought_ph.webp) no-repeat top center; background-size:cover; position:fixed; left:0; top:0; width: 100vw; height: 100vh; max-width:1920px; z-index: 0; display:none; }

#about{
  padding: 0 0 0;
  position: absolute; top: 50%; left: 0; width: 100%; height: 100%; transform: translateY(-50%);
  display:flex; align-items: center; justify-content: center; z-index: 2;
  pointer-events:none;
}
.about-in{ display:flex; justify-content:space-between; align-items: center; width:80%; max-width:1400px; margin:0 auto; position:relative; }
.about-in h1{ width:50%; opacity:0; transform:scale(1.4); transition:.2s; }
.about-in p{ width:45%; font-size:2.2em; line-height:2; opacity:0; font-weight: 700; transition:.2s; }

#kv.on #about{ pointer-events:visible; }
#kv.on h1{ animation: about-in 1s .4s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
#kv.on p{ animation: blur .8s 1s forwards; }

@keyframes about-in {
  0% {opacity: 0; transform:scale(1.3);}
  100% {opacity: 1; transform:scale(1); }
}
@keyframes fade {
  0% {opacity: 0; }
  100% {opacity: 1;  }
}
@keyframes blur {
  0% {opacity: 0; filter:blur(2em); }
  100% {opacity: 1; filter:blur(0);  }
}
@keyframes fade-b {
  0% {opacity: 0; transform:translateY(5rem); }
  100% {opacity: 1; transform:translateY(0);  }
}
@keyframes slide {
  0% {opacity: 0; transform:translateX(-7rem); }
  100% {opacity: 1; transform:translateX(0);  }
}


@media screen and (max-width: 1610px) {
  #kv {
    font-size: .62vw;
  }
}
@media screen and (max-width: 1280px) {
  #kv {
    top: 50px;
    height: calc(100vh - 50px);
  }
  .about-in p  {
    font-size: 2.6em;
  }
}

@media screen and (max-width: 768px) {
  #kv {
    top: 65px;
    height: calc(100vh - 65px);
    font-size: 1.2vw;
    overflow-x: hidden;
  }
  .kv_img.pc{ display:none; }
  .kv_img.sp{ display:block; }
  .about-in{ display:block; max-width: 600px; width: 80%;}
  .about-in h1{ width:80%; margin: 0 auto 4em;}
  .about-in p{ width: 100%; }
  #thought-bg{ display:none; }
}

@media screen and (max-width: 600px) {
  #kv {
    font-size: 1.4vw;
  }
  .kv_img .play-btn{ width:35%; }
}

/* role
-----------------------------------------------------------*/
#role{ background: #eee; padding: 15em 0; margin-top: 280vh; }
.role-in{ width:90%; max-width:1570px; margin:0 auto; }
.model-list{  }
.model-list li{ display:flex; justify-content:space-between; align-items:center; margin-bottom:15em;   }
.model-list li:last-child{ margin-bottom:4em; }
.model-list li:nth-child(even){ flex-direction: row-reverse; }
.model-list .ph{ max-width:785px; width:50%; opacity:0; }
.model-list .text{ max-width:785px; width:45%; }
.model-list .text .name{ font-size:4.5em; opacity:0; }
.model-list .text .catch{ font-size:3.5em; margin:1em 0 3em; letter-spacing: 0.03em; font-feature-settings: "palt"; opacity:0; }
.model-list .text .txt{ font-size:2.2em; font-weight:400; line-height:1.8;  margin-bottom:4em; opacity:0; }
.model-list .text .btn{ font-size:2.5em; opacity:0; }
.model-list .text .btn.sp{ display:none; }

.model-list .play .ph{ animation: about-in 1s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.model-list .play .name,
.model-list .play .catch,
.model-list .play .txt,
.model-list .play .btn{ animation: slide 1s .8s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.model-list .play .catch{ animation-delay:1s; }
.model-list .play .txt{ animation-delay:1.2s; }
.model-list .play .btn{ animation-delay:1.4s; }

@media screen and (max-width: 768px) {
    #role{ padding-bottom:1em; padding: 10em 0 1em; overflow-x: hidden; }
    .role-in{ width:100%;}
    .role-in .ttl{ margin-left:5%; }
    .model-list li{ display:block;}
    .model-list .ph{ width:100%; margin-bottom:4em; }
    .model-list .text{ width:90%; margin:0 auto; }
    .model-list .text .catch{ margin:1em 0; }
    .model-list .text .txt{ margin-bottom: 2em; }
    .model-list .text .btn{ font-size:2.8em; margin:0 auto; text-align: center; display: block; max-width: 15em;}
    .model-list .text .btn.pc{ display:none; }
    .model-list .text .btn.sp{ display:block; }

}


/* thought
-----------------------------------------------------------*/
#thought{  padding: 15em 0; color:#fff; }
.thought-in{ width:90%; max-width:1570px; margin:0 auto; }
.thought-in h2.ttl {  }
.thought-in .text{ text-align:center; text-shadow:1px 1px 5px rgba(0, 0, 0, .7); font-size:2.2em; line-height:2; }
.thought-in .text p{ opacity:0; }
.thought-in .text .catch{ margin:3em auto; display:block; width:40em; opacity:0; text-align:center; }
.thought-in .text .logo{ width:12em; margin:0 auto;  opacity:0; }
.thought-in .text .logo img{ filter: brightness(0) invert(1) }
.thought-in .text .catch img{ margin:0 auto; }
.thought-in .text p.play{ animation: fade-b 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.thought-in .text .catch.play { animation: fade-b 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.thought-in .text .logo.play { animation: about-in 1s cubic-bezier(0.65, 0, 0.35, 1) forwards; }

@media screen and (max-width: 1280px) {
  .thought-in .text  {
    font-size: 2.8em;
  }
}
@media screen and (max-width: 768px) {
    #thought{  background:#eee; color:#000; padding-bottom:1em; overflow-x: hidden; }
    .thought-in .text{ text-shadow:none; font-size: 2.2em;}
    .thought-in .text .catch { width:20em; text-align:center; }
    .thought-in .text .catch img{ filter: brightness(0); display:block; }
    .thought-in .text .logo img{ filter: none; }
    .thought-ph{ margin:10em 0 0; opacity:0; }
    .thought-ph.play{ animation: fade 1s forwards; }
}

/* data
-----------------------------------------------------------*/
#data{ background: #eee; padding: 15em 0 10em; overflow-x:hidden; }
.data-in{ width:90%; max-width:1570px; margin:0 auto; }
.graph-area{ padding-bottom:1em;  max-width:1280px; margin:0 auto; }
.graph-area .text{ font-size:2.5em; margin-top:4em; }
.graph-area .text h3{ font-weight:800; margin-bottom:.3em; opacity:0; }
.graph-area .text p{ font-weight:400; opacity:0; }
.graph-area.play .text h3{ animation: slide 1s .2s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.graph-area.play .text p{ animation: slide 1s .6s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.graph-area .graph{ text-align:center; margin: 5em auto 0; position:relative; opacity:0; }
.graph-area .graph + .graph{ margin-top:0; }
.graph-area .graph .gitem{ position:absolute; left:0; top:0; width:100%; height:100%; }
.graph-area.play .graph{ animation: fade-b .8s 1s cubic-bezier(0.33, 1, 0.68, 1) forwards; }

.graph-area .graph #gitem1-1{ opacity:0; transform-origin: bottom left; }
.graph-area.play .graph #gitem1-1{ animation: graph1 1s 1.6s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.graph-area .graph #gitem2-1{ clip-path: inset(0 100% 0 0);}
.graph-area.play .graph #gitem2-1{ animation: graph2 1s 1.6s forwards; }
.graph-area .graph #gitem3-1{ opacity:0;}
.graph-area.play .graph #gitem3-1{ animation: graph3 1.4s 1.6s linear forwards; }
.graph-area .graph #gitem4-1{ clip-path: inset(100% 0 0 0);}
.graph-area.play .graph #gitem4-1{ animation: graph4 1s 1.6s forwards; }
.graph-area .graph #gitem5-2{ opacity:0; }
.graph-area.play .graph #gitem5-1{ animation: graph5 .8s 1s cubic-bezier(0.33, 1, 0.68, 1) forwards; opacity: 0; }
.graph-area.play .graph #gitem5-2{ animation: fade 1s 1.6s forwards; }

@keyframes graph1 {
  0% {opacity: 0; transform:scaleY(0.5) translateY(-7.5%);}
  100% {opacity: 1; transform:scaleY(1) translateY(0);  }
}
@keyframes graph2 {
  0% {clip-path: inset(0 100% 0 0);}
  100% {clip-path: inset(0 27% 0 0);  }
}
@keyframes graph3 {
  0% {opacity: 0;}
  33% {opacity: 1;}
  34% {opacity: 1;}
  67% {opacity: 0;}
  100% {opacity: 1; }
}
@keyframes graph4 {
  0% {clip-path: inset(100% 0 0 0);}
  100% {clip-path: inset(4% 0 0 0);  }
}
@keyframes graph5 {
  0% {transform:scale(1.3); opacity: 0;}
  100% {transform:scale(1); opacity: 1;  }
}

@media screen and (max-width: 768px) {
  .graph-area .text{ font-size:2.2em; margin-top:4em; }
  .graph-area .graph #gitem5-1{ position:relative; height:auto; margin:32em auto; }
  .graph-area .graph #gitem5-1 ul{ position:absolute; left:0; top:0; width:100%; height:100%; }
  .gbg li{ width:27%; position:absolute; cursor: pointer; }
  .gbg li:nth-child(1){ left:36.5%; top:1.5%; }
  .gbg li:nth-child(2){ right: 0; top:20%; }
  .gbg li:nth-child(3){ right: 0; bottom:20%; }
  .gbg li:nth-child(4){ left:36.5%; bottom:1.5%; }
  .gbg li:nth-child(5){ left: 0; bottom:20%; }
  .gbg li:nth-child(6){ left: 0; top:20%; }

  .gtit{  pointer-events:none;  }
  .gtit li{ left: 5%; width: 90%; position:absolute; display: none; }
  .gtit li:nth-child(1){ top:-30%; }
  .gtit li:nth-child(2){ top:-40%; }
  .gtit li:nth-child(3){ bottom:-35%; }
  .gtit li:nth-child(4){ bottom:-52%; }
  .gtit li:nth-child(5){ bottom:-40%; }
  .gtit li:nth-child(6){ top:-29%; }

  @keyframes graph1 {
    0% {opacity: 0; transform:scaleY(0.5) translateY(-8.5%);}
    100% {opacity: 1; transform:scaleY(1) translateY(0);  }
  }
    @keyframes graph2 {
    0% {clip-path: inset(100% 0 0 0);}
    100% {clip-path: inset(24% 0 0 0);  }
  }
    @keyframes graph4 {
    0% {clip-path: inset(100% 0 0 0);}
    100% {clip-path: inset(0% 0 0 0); }
  }
}



/* end
-----------------------------------------------------------*/
#end{ background: #eee; padding: 5em 0 10em; text-align:center; }
#end .ph{ position:relative; overflow:hidden; }
#end .ph:before,#end .ph:after{ content:""; height:51%; width:100%; position:absolute; left:0; background:#eee; transition:1s cubic-bezier(0.33, 1, 0.68, 1); }
#end .ph.play img{ animation: about-in 1s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
#end .ph:before{ top:0; }
#end .ph:after{ bottom:0; }
#end .ph.play:before,#end .ph.play:after{ height:0; }
#end .btn{ font-size:3em;  padding:.8em 3em; margin:4em auto; }
#end .logo{ display:flex; justify-content:center; align-items:center; }
#end .logo li:first-child{ border-right:1px solid #000; }
#end .logo li{ padding:0 4em; }
@media screen and (max-width: 768px) {
  #end{ overflow-x: hidden; }
}



/* grant
-----------------------------------------------------------*/
#grant{ background: #eee; padding: 200px 0 5em; }
.grant-in{ width:90%; max-width:1450px; margin:0 auto; }
.grant-in .logo{ text-align:center; padding:10em 0 15em; width:70%; margin:0 auto; }
.grant-in .logo img{ width:755px;}
.grant-in h2.ttl{ margin-bottom:.5em; font-size:5em; }
.grant-in h2.ttl + p{ font-size:2.2em; opacity:0; margin-bottom:2em; }
.grant-in h2.ttl + p + a.apply-btn{  }
.grant-in h2.ttl + p.play{ animation: fade 1s .5s forwards; }
.grant-in .flex{ display:flex; justify-content:space-between; }
.grant-in .flex > h2{ width:25%; }
.grant-in .flex > .text-area{ width:70%; }
.grant-in h2.ttl2 span { display:block; font-size:90%; }
.grant-in h2.ttl2 span span{ font-size:60%; }


.grant-list{ margin:0 auto 8em; }
.grant-list > li{ display:flex; justify-content:space-between; align-items: center; padding:5em 0;  }
.grant-list > li:last-child{ margin-bottom:4em; }
.grant-list > li:nth-child(even){ flex-direction: row-reverse; }
.grant-list .ph{ max-width:710px; width:49%; opacity:0; }
.grant-list .text{ max-width:785px; width:46%; }
.grant-list .text h2{ font-size:6.5em; font-weight:900; line-height:1; opacity:0; }
.grant-list .text .catch{ font-size:3.5em; margin:.5em 0 1em; letter-spacing: 0.03em; font-feature-settings: "palt"; opacity:0; }
.grant-list .text dl{ display:flex; flex-wrap:wrap; font-weight:400; font-size:1.7em; opacity:0; }
.grant-list .text dt{ width:5.5em; margin-bottom:1em; font-weight:bold; }
.grant-list .text dd{ width:calc(100% - 5.5em); margin-bottom:1em; }
.grant-list .text h3{ font-size:1.7em; margin:2em 0 0; opacity:0; }
.grant-list .text dl + ul li{ margin-top:0em; }
.grant-list .text dl + ul{ margin-top:.5em; }
.grant-list .text ul{ list-style:disc; margin-left:1em; font-size:1.7em; font-weight:400;  }
.grant-list .text li{ margin-top:1.5em; opacity:0; }

.grant-list .play .ph{ animation: fade 1s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.grant-list .play h2,
.grant-list .play .catch,
.grant-list .play dl,
.grant-list .play h3,
.grant-list .play li{ animation: slide 1s .8s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.grant-list .play .catch{ animation-delay:.9s; }
.grant-list .play dl{ animation-delay:1s; }
.grant-list .play h3{ animation-delay:1.1s; }
.grant-list .play li:nth-child(1){ animation-delay:1.2s; }
.grant-list .play li:nth-child(2){ animation-delay:1.3s; }
.grant-list .play li:nth-child(3){ animation-delay:1.4s; }
.grant-list .play li:nth-child(4){ animation-delay:1.5s; }

.text-area{ font-size:1.7em; font-weight:400; line-height:1.8; margin:1em auto 5em;  }
.text-area sup{ font-size:70%; }
.text-area ul{ list-style:disc; margin-left:1em; font-weight:400;  }
.text-area ul li{ margin-bottom:.5em; }
.text-area ul li p{ margin-bottom:0; }

.text-area h3{ margin-bottom:.5em; }
.text-area h3:not(:first-child){ margin-top:1.5em; }
.text-area h3 span{ font-weight:400; }
.text-area p{ margin-bottom:.5em; }
.text-area a:not(.btn){ text-decoration:underline; }
.text-area a:hover{ text-decoration:none; }
.text-area .img{ text-align:center; margin:2em auto; }
.text-area.flex2{ display:flex; gap:10%; }

.note{ margin:1em 0; font-size:80%; }
a.apply-btn{ font-size:2.5em; max-width: 16em; font-weight: bold;  padding:.8em 1em; margin:1em auto 5em; display:block; text-align:center; opacity:0; }
a.apply-btn:hover{ background:#f89728; opacity:1; }
.play + a.apply-btn{ animation: fade 1s .8s forwards; }

b.b{ font-size:200%; }
.ef{  opacity:0; }
.ef.play{ animation: fade-b 1s forwards; }
.ml1em{ margin-left:1em; }


@media screen and (max-width: 768px) {
  #nav-sp a.btn { width:100%; text-align:center; }
  .grant-in .flex{ display:block; }
  .grant-in .flex > h2{ width:100%; font-size:4em; }
  .grant-in .flex > .text-area{ width:100%; }
    .grant-list > li{ display:block;}
    .grant-list .ph{ width:100%; margin-bottom:4em; }
    .grant-list .text{ width:95%; margin:0 auto; }
    .grant-list .text h2 { font-size:5.5em; }
    .grant-list .text .catch{ font-size:3em; }
    .grant-list .text dl{ display:block; font-size:2em; }
    .grant-list .text dt{ width:100%; margin-top:.5em; }
    .grant-list .text dd{ width:100%; }
    .grant-list .text h3{ font-size:2em; }
    .grant-list .text ul{ font-size:2em;  }
    .text-area{ font-size:2em;  }
    a.apply-btn{ display: block; text-align:center; width:70%; }
    b.b{ font-size:160%; }

    
}