@charset "utf-8";
/* CSS Document */

/* =============================================================================
 Reset
============================================================================= */

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{text-decoration:none}ins,mark{background-color:#ff9;color:#000}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
*,:after,:before{box-sizing:border-box}button,input[type=button]{margin:0;padding:0;border:0;border-radius:0;background-color:transparent;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}





/* =============================================================================
 variable
============================================================================= */
:root {
  --color-base: #293765;
  --color-yellow: #F5FF00;
  --color-green: #00FF80;
  --color-black: #000;
  --color-white: #FFFFED;

  --window-width: 100vw;

  --txt-shaddow01: 0px 3px 6px #000;

  --sp-lr: calc(16/390*var(--window-width));

  --ff-dgo: "Dela Gothic One", sans-serif;
}

@media screen and (min-width: 768px) {
  :root {
    --window-width: 390px;
  }

}






/* =============================================================================
 Fonts
============================================================================= */

html {
  font-size: 62.5%;
}
body {
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

@media screen and (max-width: 767px) {
}





/* =============================================================================
 Elements
============================================================================= */

/* color setting */
body {
}



/* link setting */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}



/* image setting */
img {
  max-width: 100%;
  vertical-align: top;
}

@media screen and (max-width: 767px) {
  img {
    width: 100%;
  }
}



/* box */
*,*:before,*:after {
  box-sizing: border-box;
}



/* cursor */
button {
  cursor: pointer;
}





/* =============================================================================
 Responsive Class
============================================================================= */

@media screen and (min-width: 768px) {
  .only-sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .only-pc {
    display: none;
  }
}





/* =============================================================================
 Base Layout
============================================================================= */

body {
  background-color: #1b1645;
}
#container {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: clip;
}





/* =============================================================================
 Follow BG
============================================================================= */

.followBG {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.followBGPC {
  position: fixed;
  top: 0;
  right: 140px;
  z-index: -1;
  width: 100%;
  width: 390px;
  height: 100%;
  background-color: #1b1645;
  pointer-events: none;
}
#background_pc {
  position: absolute;
  width: 100%;
  height: 100%;
}


.followAnime {
  overflow: hidden;
}
.followAnime .treats {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 544px);
  height: 100%;
}

.followAnime .treat {
  position: absolute;
  will-change: transform;
}
.followAnime .swaying {
  animation: fuwafuwa 3s infinite ease-in-out;
}
.followAnime .-t01 {
  top: 64px;
  left: 13px;
  width: 40px;
  animation-duration: 4s;
  animation-delay: 1s;
}
.followAnime .-t02 {
  top: 36%;
  left: 40px;
  width: 36px;
  animation-delay: .6s;
}

.followAnime .-t03 {
  top: 40%;
  right: 54px;
  width: 40px;
}

.followAnime .-t04 {
  left: 12px;
  bottom: 12px;
  width: 54px;
  animation-delay: 1.3s;
}

.followAnime .-t05 {
  top: 12%;
  left: 48px;
  width: 118px;
  animation-duration: 6s;
}
.followAnime .-t06 {
  top: 12%;
  right: 12px;
  width: 160px;
  animation-duration: 8s;
  animation-delay: 1s;
}

.followAnime .comet {
  left: 54%;
  bottom: 0;
  width: 91px;
  animation: comet 10s linear infinite;
  transform: translate(1000%,-1000%);
  will-change: transform;
}
.treat.umaemon {
  position: fixed;
  top: 8%;
  right: 0;
  width: 106px;
  z-index: 1000;
  pointer-events: none;
  animation: umaemon 36s linear infinite;
  will-change: transform;
}
.treat.umaemon2 {
  position: fixed;
  top: 38%;
  left: 0;
  width: 106px;
  z-index: 1000;
  pointer-events: none;
  will-change: transform;
  animation: umaemon2 36s linear infinite;
}
@keyframes comet {
  0% {
    transform: translate(110vmax,-110vmax);
  }
  20% {
    transform: translate(110vmax,-110vmax);
  }
  65% {
    transform: translate(-110vmax,110vmax);
  }
  100% {
    transform: translate(-110vmax,110vmax);
  }
}
@keyframes umaemon {
  0% {
    transform: translate(110vmax,-110vmax) rotate(0deg);
  }
  30% {
    transform: translate(-110vmax,110vmax) rotate(-3600deg);
  }
  100% {
    transform: translate(-110vmax,110vmax) rotate(-3600deg);
  }
}
@keyframes umaemon2 {
  0% {
    transform: translate(-150vmax,-80vmax) rotate(0deg);
  }
  60% {
    transform: translate(-150vmax,-80vmax) rotate(0deg);
  }
  90% {
    transform: translate(110vmax,60vmax) rotate(3600deg);
  }
  100% {
    transform: translate(110vmax,60vmax) rotate(3600deg);
  }
}
@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(max(-5%,10px));
  }
}

.followBGPC .treats {
  width: 100%;
}
.followBGPC .-t01 {
  top: 64px;
  right: 50px;
  left: auto;
  width: 30px;
}
.followBGPC .-t02 {
  top: auto;
  left: auto;
  right: 93px;
  bottom: 16px;
  width: 34px;
}

.followBGPC .-t03 {
  top: auto;
  bottom: 32%;
  right: 108px;
  width: 44px;
}

.followBGPC .-t04 {
  left: -14px;
  bottom: 48%;
  width: 56px;
}

.followBGPC .-t05 {
  top: 4%;
  left: -14px;
  width: 84px;
}
.followBGPC .-t06 {
  top: 4%;
  right: 0;
  width: 94px;
}

.followBGPC .comet {
  left: auto;
  right: 0;
  bottom: auto;
  top: 30%;
  width: 92px;
}
.followBGPC .umaemon {
  top: 8%;
  right: 0;
  width: 106px;
}

@media screen and (max-width: 767px) {
  .followBGPC {
    display: none;
  }
  .followBG .treats {
    width: 100%;
  }
  .followBG .-t01 {
    top: calc(64/390*var(--window-width));
    right: calc(54/390*var(--window-width));
    left: auto;
    width: calc(30/390*var(--window-width));
  }
  .followBG .-t02 {
    top: auto;
    left: auto;
    right: calc(93/390*var(--window-width));
    bottom: calc(16/390*var(--window-width));
    width: calc(34/390*var(--window-width));
  }

  .followBG .-t03 {
    top: auto;
    bottom: 32%;
    right: calc(108/390*var(--window-width));
    width: calc(44/390*var(--window-width));
  }

  .followBG .-t04 {
    left: calc(-14/390*var(--window-width));
    bottom: 48%;
    width: calc(56/390*var(--window-width));
  }

  .followBG .-t05 {
    top: 4%;
    left: calc(-14/390*var(--window-width));
    width: calc(84/390*var(--window-width));
  }
  .followBG .-t06 {
    top: 4%;
    right: 0;
    width: calc(94/390*var(--window-width));
  }

  .followBG .comet {
    left: auto;
    right: 0;
    bottom: auto;
    top: 30%;
    width: calc(92/390*var(--window-width));
  }
  .treat.umaemon,
  .treat.umaemon2 {
    width: calc(106/390*var(--window-width));
  }
}





/* =============================================================================
 KV
============================================================================= */

.ticker {
  position: absolute;
  top: 7px;
  left: 22px;
  line-height: 44px;
  font-family: var(--ff-dgo);
  font-size: 3.4rem;
}
.tickerTxt {
  color: transparent;
  -webkit-text-stroke: 1px var(--color-green);
  text-stroke: 1px var(--color-green);
  white-space: nowrap;
  animation: ticker 24s linear infinite;
  will-change: transform;
}
.tickerTxt:after {
  content: 'UMAIBO UCHU DAKKAN PROJECT　UMAIBO UCHU DAKKAN PROJECT　UMAIBO UCHU DAKKAN PROJECT　UMAIBO UCHU DAKKAN PROJECT　UMAIBO UCHU DAKKAN PROJECT　';
}
@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.tagline {
  margin: 0 0 0 calc(187/822*100%);
  margin-left: 0;
  color: var(--color-yellow);
  font-size: min(40px,calc(40/1366*var(--window-width)));
  font-family: var(--ff-dgo);
  transform: translateX(8.5%);
}
.scroller {
  position: absolute;
  bottom: 57px;
  right: 564px;
}
.scrollerTxt {
  position: relative;
  width: 12px;
  height: 64px;
}
.scrollerTxt img {
  position: absolute;
  top: 0;
  left: calc(50% + 7px);
  max-width: inherit;
  width: 64px;
  height: 12px;
  transform: rotate(90deg);
  transform-origin: top left;
}
.scroller::before {
  animation: scroll 2s infinite;
  background-color: var(--color-green);
  bottom: -57px;
  content: "";
  height: 44px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
@media screen and (min-width: 768px) {
  .hero {
    padding-top: 58px;
    padding-right: 544px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .hero:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 544px);
    height: 100%;
    background: url(../images/bg_kv.png) center center /cover no-repeat;
  }
  .hero:after {
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    right: 126px;
    width: 418px;
    height: 44px;
    background-color: #1b1645;
  }
  .heroBody {
    width: 100%;
    max-height: 100%;
    text-align: center;
  }
  .siteTitle {
    margin: 0 auto max(-58px,calc(-58/822*100%)) auto;
    position: relative;
    z-index: 3;
    width: calc(521/822*100%);
    max-width: 100%;
    /*
    max-width: 521px;
    min-width: 430px;
    min-width: inherit;
    max-height: 35.4vh;
    */
    width: 521px;

    display: flex;
    align-items: flex-start;
    width: calc(782/822*100%);
    max-width: 782px;
  }
  .siteTitle > img {
    position: relative;
    z-index: 2;
    width: calc(521/782*100%);
  }
  .siteTitle .treat {
    animation: fuwafuwa 3s infinite ease-in-out;
  }
  .siteTitle .treat.-t05 {
    width: calc(118/761*100%);
    animation-duration: 6s;
  }
  .siteTitle .treat.-t06 {
    margin-top: calc(40/782*100%);
    margin-left: calc(-53/782*100%);
    width: calc(195/782*100%);
    animation-duration: 8s;
    animation-delay: 1s;
  }
  .heroImg {
    margin: max(-256px,calc(-256/822*100%)) auto 0;
    position: relative;
    width: calc(860/822*100%);
    max-width: 860px;
  }
  .heroImg2 {
    position: absolute;
    bottom: -6px;
    right: 580px;
    width: calc(234/822*100%);
    max-width: 234px;
  }
  .heroBody img {
    max-height: 100%;
  }
  .cpnPeriod {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 126px;
    height: 100%;
  }
  .content{
    margin-left: calc(100% - 544px);
    border-left: 14px solid var(--color-green);
    border-right: 14px solid var(--color-green);
    position: relative;
    z-index: 100;
    width: 418px;
  }
}

@media screen and (min-width: 1366px) and (min-height: 768px) and (max-aspect-ratio: 683/384) {
  .heroImg {
    max-width: 1100px;
  }
}

@media screen and (max-width: 767px) {
  .hero {
    margin: 0;
    padding: 78px 0 0;
    position: relative;
    overflow: hidden;
  }
  .hero:before {
    content: '';
    display: block;
    position: absolute;
    top:  calc(220/390*var(--window-width));
    left:  calc(-39/390*var(--window-width));
    width: calc(480/390*var(--window-width));
    height:  calc(480/390*var(--window-width));
    background: url(../images/bg_kv.png) center center /cover no-repeat;
  }
  .ticker {
    top: 15px;
    left: var(--sp-lr);
    z-index: 6;
    line-height: 35px;
    font-size: 2.4rem;
    width: 90%;
  }
  .tickerTxt {
    width: fit-content;
  }
  .heroBody {
  }
  .siteTitle {
    margin-left: calc(8/390*var(--window-width));
    position: relative;
    z-index: 2;
    width: calc(383/390*var(--window-width));
  }
  .siteTitle > img {
    position: relative;
    z-index: 2;
  }
  .siteTitle .treat {
    position: absolute;
    animation: fuwafuwa 3s infinite ease-in-out;
  }
  .siteTitle .treat.-t05 {
    top: calc(-47/390*var(--window-width));
    left: calc(-14/390*var(--window-width));
    width: calc(84/390*var(--window-width));
    animation-duration: 6s;
  }
  .siteTitle .treat.-t06 {
    top: calc(-62/390*var(--window-width));
    right: calc(-14/390*var(--window-width));
    width: calc(340/390*var(--window-width));
    animation-duration: 8s;
    animation-delay: 1s;
  }
  .heroImg {
    position: relative;
    z-index: 2;
  }
  .heroImg2 {
    position: absolute;
    bottom: 0;
    right: calc(5/390*var(--window-width));
    width: calc(156/390*var(--window-width));
  }
  .cpnPeriod {
    margin: calc(-24/390*var(--window-width)) auto calc(31/390*var(--window-width));
    position: relative;
    z-index: 2;
    width: calc(358/390*var(--window-width));
  }
  .heroImg {
    margin-top: calc(-174/390*var(--window-width));
    width: calc(394/390*var(--window-width));
  }
  .scroller {
    right: auto;
    left: calc(16/390*var(--window-width));
  }
  .scrollerTxt {
  }
  .scrollerTxt img {
  }
}





/* =============================================================================
 loading
============================================================================= */

body.hidden {
  overflow: hidden;
}


.hero:before,
.followAnime canvas,
.followAnime .treats,
.hero .siteTitle .treat img {
  opacity: 0;
  transform: scale(.8);
  transition: opacity ease .6s,transform ease .6s;
}
.followAnime .treats,
.hero .siteTitle .treat img {
  transform: scale(.3);
  transition-delay: .4s;
}
.hero:before,
.hero .ticker,
.hero .siteTitle>img,
.hero .cpnPeriod,
.hero .heroImg,
.hero .heroImg2,
.hero .scroller {
  opacity: 0;
  transition: opacity ease .6s,transform ease .6s;
}
.hero .siteTitle>img,
.hero .cpnPeriod {
  transform: translateY(-50px);
  transition-delay: .8s;
}
.hero .heroImg,
.hero .heroImg2 {
  transform: scale(.1);
  transition-delay: .8s;
}
.hero .heroImg2 {
  transform: scale(1);
  transition-delay: 1.2s;
}
.hero .ticker,
.hero .scroller {
  transition-delay: 1.4s;
}
.followAnime .come,
.followAnime .umaemon {
  animation-fill-mode: both;
}
.content > * {
  opacity: 0;
  pointer-events: none;
  transition: opacity ease .6s;
}



.onload .hero:before,
.onload .followAnime canvas,
.onload .followAnime .treats,
.onload .hero .siteTitle .treat img,
.onload .hero .heroImg,
.onload .hero .heroImg2 {
  opacity: 1;
  transform: scale(1);
}
.onload .hero .siteTitle>img,
.onload .hero .cpnPeriod {
  opacity: 1;
  transform: translateY(0);
}
.onload .hero .ticker,
.onload .hero .scroller {
  opacity: 1;
}

.loaded .content > * {
  opacity: 1;
  pointer-events: all;
}





/* =============================================================================
 Main Contents
============================================================================= */

.content p {
  line-height: 1.75;
  color: var(--color-white);
  font-size: calc(16/390*var(--window-width));
  font-weight: bold;
}

.blur {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.storyForeword {
  padding: 70px 0 34px;
  position: relative;
  background-color: rgba(255, 255, 255, 0);
  text-align: center;
}
/*
.storyForeword:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(14.6/390*100%);
  height: calc(40.88/390*var(--window-width));
  background: url(../images/ico_triangle.svg) 0 0 / 100% auto no-repeat;
  transform: translateX(-50%);
}
*/
.nextIcon {
  margin: 15px 0 0;
  position: relative;
  height: calc(40.88/390*var(--window-width));
  text-align: center;
}
.nextIcon .icon {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: calc(14.6/390*100%);
  height: calc(40.88/390*var(--window-width));
  transform: translateX(-50%);
  overflow: hidden;
}
.nextIcon .icon:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url(../images/ico_triangle_bg.svg) 0 0 /contain no-repeat;
}
.nextIcon .iconInner {
  width: 100%;
  height: 100%;
  height: 0;
  overflow: hidden;
  animation: nexticon 1.2s linear infinite;
}
.nextIcon .icon img {
  max-width: inherit;
  width: 100%;
  height: auto;
}
@keyframes nexticon {
  0% {
    height: 0;
  }
  70% {
    height: calc(40.88/390*var(--window-width));
  }
  100% {
    height: calc(40.88/390*var(--window-width));
  }
}





/* =============================================================================
 foreword
============================================================================= */

.storyForewordHead {
  margin: 0 auto 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(192/390*var(--window-width));
  background: url(../images/bg_title.png) top center / cover no-repeat;
}
.storyForewordHead:before,
.storyForewordHead:after {
  content: '';
  display: block;
  position: absolute;
  width: calc(39/390*var(--window-width));
  aspect-ratio: 78/296;
  background: url(../images/img_trans_umaibou.png) 0 0 / contain no-repeat;
  animation: flickering01 7s infinite;
}
.storyForewordHead:before {
  top: calc(26/390*var(--window-width));
  left: calc(20/390*var(--window-width));
  transform: rotate(-13deg);
  transform-origin: top left;
}
.storyForewordHead:after {
  top: calc(50/390*var(--window-width));
  right: calc(20/390*var(--window-width));
  transform: rotate(30deg);
  transform-origin: top right;
}
@keyframes flickering01 {
  0% {
    opacity: 1;
  }
  2% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  14% {
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}



.storyForewordHeadInner {
  font-family: var(--ff-dgo);
  font-weight: normal;
  transform: rotate(-5deg);
  text-align: center;
}
.storyForewordHead .line1 {
  color: var(--color-white);
  font-size: calc(20/390*var(--window-width));
}
.storyForewordHead .line2 {
  color: var(--color-yellow);
  font-size: calc(50/390*var(--window-width));
  text-shadow: var(--txt-shaddow01);
}
.storyForeword p.strong {
  line-height: 1.45;
  color: var(--color-yellow);
  font-size: calc(20/390*var(--window-width));
  font-family: var(--ff-dgo);
  font-weight: normal;
}
.storyForeword p.strong span {
  padding-bottom: 0.2em;
  background: url(../images/line_strong.png) bottom left / 11px 6px repeat-x;
}
.storyForeword p.strong.-strong02 {
  line-height: 1.6666666666666667;
  font-size: calc(24/390*var(--window-width));
}
.storyForeword .storyIllust {
  margin: 0 auto;
}
.storyForeword .storyIllust.-character01 {
  margin-top: 15px;
  margin-bottom: 10px;
  width: calc(240/390*100%);
}
.storyForeword .storyIllust.-character02 {
  margin-top: 90px;
  margin-bottom: 80px;
  width: calc(390/390*100%);
  position: relative;
  right: -1%;
}
.storyForeword .storyIllust.-character02 .cb {
  margin-bottom: calc(-32/390*100%);
}
.storyForeword .storyIllust.-character03 {
  margin-top: -50px;
  width: calc(390/390*var(--window-width));
}

@media screen and (max-width: 767px) {
  .storyForeword {
    padding-top: 90px;
  }
}





/* =============================================================================
 support
============================================================================= */

.support {
  margin-bottom: -50px;
  padding-bottom: 150px;
  background-color: rgba(255, 255, 255, 0);
}
.supportTtile {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(304/390*100%);
  aspect-ratio: 304/204;
  color: var(--color-yellow);
  background: url(../images/bg_title_support.svg) 0 0 / cover no-repeat;
  font-family: var(--ff-dgo);
  font-size: calc(40/390*var(--window-width));
  font-weight: normal;
  text-align: center;
  text-shadow: var(--txt-shaddow01);
}

.supportCard {
  margin: calc(35/390*var(--window-width)) auto 0;
  border: 2px solid var(--color-yellow);
  border-radius: 32px;
  width: calc(358/390*var(--window-width));
  background: var(--color-white);
  text-align: center;
}

.supportCardTitle {
  padding: 0 34px;
  position: relative;
  min-width: calc(180/390*var(--window-width));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: calc(46/390*var(--window-width));
  border-radius: 23px;
  color: var(--color-base);
  background: linear-gradient(to bottom,#f5ff00 0%, #f5ff00 52.71%, #dbe214 100%);
  font-size: calc(18/390*var(--window-width));
  font-weight: 900;
  transform: translateY(-50%);
}
.supportCardTitle:before {
  content: '';
  border-radius: 100%;
  display: block;
  position: absolute;
  top: calc(50% - 7px);
  left: 11px;
  width: 14px;
  height: 14px;
  background: linear-gradient(to bottom,#a3a815 0%, #dbe214 100%);
}
.supportCardBody {
  padding-bottom: 30px;
}
.-card01 .supportCardBody {
  padding-bottom: 50px;
}
.supportCardBody p {
  line-height: 1.5;
  color: var(--color-base);
  font-weight: 900;
}
.supportCardBody .howtoLine01 {
}
.howtoLine01 .small {
  font-size: calc(12/390*var(--window-width));
}
.supportCardBody .howtoLine02 {
  margin: 5px 0;
  color: #FF6448;
  font-size: calc(26/390*var(--window-width));
}
.supportCardBody .howtoLine03 {
  margin: 0 0 20px;
}
.supportCardBody .howtoLine04 {
  font-size: calc(17/390*var(--window-width));
}
.supportCardBody .howtoLine05 {
  font-size: calc(26/390*var(--window-width));
}
.supportCardBody .howtoLine05 span {
  font-size: calc(26/390*var(--window-width));
  background: linear-gradient(to bottom,transparent 0%,transparent 70%, #FF6448 70%, #FF6448 100%);
}
.supportCardBody .logo {
  margin: 0 auto;
  width: calc(255/390*var(--window-width));
}
.supportCardBody .termLine01 {
  line-height: calc(36/390*var(--window-width));
  color: #FF6448;
}
.supportCardBody .termLine01 .large {
  font-size: calc(26/390*var(--window-width));
}
.presentBox {
  margin: 0 auto;
  width: calc(300/390*var(--window-width));
}

.presentVisual {
  position: relative;
}
.presentVisual .presentBack,
.presentVisual .presentNum,
.presentVisual .presentCopy,
.presentVisual .presentImg {
  position: absolute;
}
.presentVisual .presentBack {
  margin-left: auto;
  margin-right: auto;
  top: calc(34/390*var(--window-width));
  left: 0;
  right: 0;
  width: calc(224/390*var(--window-width));
  animation: roll 20s linear infinite;
}
@keyframes roll {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.presentName {
  margin-top: 15px;
  position: relative;
  color: var(--color-base);
  font-family: var(--ff-dgo);
  font-size: calc(30/390*var(--window-width));
  font-weight: normal;
}

.-p01.presentBox {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 2px dotted var(--color-base);
}
.-p01 .presentVisual {
  aspect-ratio: 300/286;
}
.-p01 .presentVisual .presentNum {
  top: 0;
  left: 0;
  width: calc(113/390*var(--window-width));
}
.-p01 .presentVisual .presentCopy {
  top: calc(20/390*var(--window-width));
  right: 0;
  width: calc(61/390*var(--window-width));
}
.-p01 .presentVisual .presentImg {
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: calc(-55/390*var(--window-width));
  width: calc(226/390*var(--window-width));
}
.-p02 .presentVisual {
  aspect-ratio: 300/292;
}
.-p02 .presentVisual .presentNum {
  top: calc(17/390*var(--window-width));
  left: 0;
  width: calc(113/390*var(--window-width));
}
.-p02 .presentVisual .presentCopy {
  top: 0;
  right: 0;
  width: calc(150/390*var(--window-width));
}
.-p02 .presentVisual .presentImg {
  margin: 0 auto;
  top: calc(102/390*var(--window-width));
  left: 0;
  right: 0;
  width: calc(308/390*var(--window-width));
}
.-p02 .presentName {
  margin-top: calc(-32/390*var(--window-width));
  margin-top: 10px;
}
.-p02 .presentNameSet {
  margin: 4px 0 5px;
  line-height: 1.5;
  color: var(--color-base);
  font-size: calc(16/390*var(--window-width));
  font-weight: 900;
}
.-p02 .presentNameSet .small {
  font-size: calc(10/390*var(--window-width));
}
.-p02 .presentTag {
  margin: 0 calc(-4/390*var(--window-width)) 20px;
}
.supportCardBody p.presentTxt {
  margin-top: 10px;
  font-size: calc(12/390*var(--window-width));
  font-weight: 500;
  text-align: left;
}
.supportCardBody p a {
  color: #FF6448;
  text-decoration: underline;
}
.relationNum {
  margin: 0 0 50px;
  padding: 50px calc(11/390*var(--window-width)) 115px;
  position: relative;
  background: url(../images/bg_num.png) 0 0 / 57px 57px repeat;
  --mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 4vmin 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 4vmin 51% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

.relationNum:before {
  --mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50%/4vmin 100%;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
.relationNumTitle {
  line-height: 1.4230769230769231;
  color: var(--color-white);
  font-size: calc(26/390*var(--window-width));
  font-weight: 900;
  text-align: center;
}
.relationNumCounter {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.relationNumCounterLabel {
  padding-bottom: calc(5/390*var(--window-width));
  width: calc(56/390*var(--window-width));
}
.relationNumCounterNum {
  display: flex;
  align-items: flex-end;
  line-height: 1;
  color: var(--color-yellow);
  font-size: calc(86/390*var(--window-width));
  font-weight: 900;
  letter-spacing: -0.025em;
  font-feature-settings: "palt";
}
.relationNumCounterNum:after {
  padding-bottom: calc(6/390*var(--window-width));
  content: '本！';
  font-size: calc(36/390*var(--window-width));
}
.currentLocation {
  padding: calc(40/390*var(--window-width)) 0 0;
  position: relative;
  width: calc(358/390*var(--window-width));
  height: calc(409/390*var(--window-width));
  color: var(--color-white);
  background: url(../images/bg_arrive.png) 0 0 /contain no-repeat;
  text-align: center;
  overflow: hidden;
}
.currentLocation:has(.currentLocationNameLinebreak) {
  height: calc(461/390*var(--window-width));
  border-radius: calc(16 / 390* var(--window-width));
  background-size: cover;
}
.currentLocationLabel {
  line-height: 1.3;
  font-size: calc(20/390*var(--window-width));
  font-weight: 900;
}
.currentLocationName {
  margin-bottom: calc(-68/390*var(--window-width));
  line-height: 1.4444444444444444;
  font-size: calc(36/390*var(--window-width));
  font-weight: 900;
}
.currentPlanet {
  margin: 0 auto;
  position: absolute;
  bottom: calc(36/390*var(--window-width));
  left: 0;
  right: 0;
  width: calc(260/390*var(--window-width));
}
.currentPlanet img {
  width: 100%;
}
.currentLocationTreat {
  position: absolute;
  bottom: calc(56/390*var(--window-width));
  bottom: 0;
  right: calc(16/390*var(--window-width));
  width: calc(106/390*var(--window-width));
  height: calc(106/390*var(--window-width));
  transform: translateY(100%);
}






/* =============================================================================
 friend
============================================================================= */

.friends {
  padding-bottom: 100px;
  overflow: hidden;
}
.friendTitle {
  margin-bottom: calc(38/390*var(--window-width));
  color: var(--color-white);
  font-size: calc(30/390*var(--window-width));
  font-family: var(--ff-dgo);
  font-weight: normal;
  text-align: center;
}
.planetsWrap {
  position: relative;
  z-index: 1;
  background: url(../images/bg_planetline.png) bottom 117% center / 100% auto no-repeat;
}
.planetsWrap:before {
  content: '';
  display: block;
  position: absolute;
  top: calc(-64/390*var(--window-width));
  left: calc(49/390*var(--window-width));
  width: calc(292/390*var(--window-width));
  height: calc(292/390*var(--window-width));
  background: url(../images/bg_planet.png) top center / contain no-repeat;
}
.planets {
  margin: 0 auto;
  width: calc(212/390*100%);
}
.planets .swiper-wrapper {
  transition-timing-function: cubic-bezier(.06,1.17,.85,.48);
}
.planet {
  padding: 0 35px;
  aspect-ratio: 1/1;
  position: relative;
}
.planet img {
  position: absolute;
  top: -12%;
  left: 0;
  width: calc(100% + 70px);
}
.planet:not(.swiper-slide-active) img {
  /*
  transform: scale(.5);
  */
  animation: planetDeActive .9s linear 1 forwards;
}
.planet.swiper-slide-active img {
  animation: planetActive 1.2s ease-in-out 1 forwards;
  /*
  transform: scale(.5);
  */
}
.planet img {
  /*
  transform-origin: top center;
  transition: all ease .3s;
  */
}

.loading .planet img {
  animation-duration: 0s;
}

@keyframes planetActive {
  0% {
    transform: scale(.5);
    translate: 0 -25%;
  }
  5% {
    translate: 0 -5%;
  }
  50% {
    transform: scale(.5);
    translate: 0 5%;
  }
  75% {
    translate: 0 10%;
    transform: scale(1.1);
    rotate: 90deg;
  }
  90% {
    translate: 0 10%;
    transform: scale(1.6);
  }
  95% {
    translate: 0 5%;
  }
  100% {
    transform: scale(1);
    translate: 0 0%;
    rotate: 360deg;
  }
}
@keyframes planetDeActive {
  0% {
    transform: scale(1);
    translate: 0 0%;
  }
  20% {
    transform: scale(.5);
  }
  100% {
    transform: scale(.5);
    translate: 0 -25%;
  }
}
.spaceship {
  margin: calc(-80/390*100%) auto 40px;
  position: relative;
  z-index: 2;
  width: calc(137/390*100%);
}
/*
.spaceship.go img {
  animation: hurueru 1s ease-in-out 1 forwards;
}
@keyframes hurueru {
  0% {transform: translate(0, 0) rotateZ(0deg)}
  5% {transform: translate(5%, 5%) rotateZ(3deg)}
  10% {transform: translate(0px, 5%) rotateZ(0deg)}
  15% {transform: translate(5%, 0) rotateZ(-3deg)}
  20% {transform: translate(0, 0) rotateZ(0deg)}
  30% {transform: translate(-20%, 0)}
  60% {transform: translate(600%, 0)}
  60.1% {transform: translate(-600%, 0)}
  100% {transform: translate(0, 0)}
}
*/
.planetCards {
  margin: 0 auto;
  position: relative;
  width: calc(300/390*100%);
}
.planetCards .swiper-wrapper {
  align-items: stretch!important;
}
.planetCard {
  padding: 0 calc(10/390*var(--window-width));
  text-align: center;
  height: auto!important;
}
.planetCardInner {
  padding: calc(16/390*var(--window-width));
  border-radius: calc(16/390*var(--window-width));
  position: relative;
  height: 100%!important;
}
.planetCardUmaibou {
  position: absolute;
  top: calc(51/390*var(--window-width));
  right: calc(-20/280*100%);
  width: calc(112/280*100%);
}
.planetCardNakama {
  position: absolute;
  top: calc(var(--nakama-top)/390*var(--window-width));
  right: calc(var(--nakama-right)/280*100%);
  width: calc(var(--nakama-width)/280*100%);
}
.planetCard .planetName {
  margin: 20px 0 5px;
  font-size: calc(26/390*var(--window-width));
  font-family: var(--ff-dgo);
  font-weight: normal;
}
.planetCard p {
  color: inherit;
  font-weight: normal;
  text-align: left;
  margin-bottom: calc(30/390*var(--window-width));
}
.planetCard .planetNum {
  /* margin-top: 16px; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0 7px;
  font-size: calc(14/390*var(--window-width));
  font-family: var(--ff-dgo);
  font-weight: normal;
  text-align: center;
  letter-spacing: -0.025em;
  position: absolute;
  inset: auto 0 calc(16/390*var(--window-width));
}
.planetCards .swiper-button-prev:after,
.planetCards .swiper-button-next:after {
  display: none;
}
.planetCards .swiper-button-prev,
.planetCards .swiper-button-next {
  margin: 0;
  top: calc(150/390*var(--window-width));
  width: calc(60/390*var(--window-width));
  height: calc(60/390*var(--window-width));
  background: url(../images/ico_paddle.svg) 0 0 / contain no-repeat;
}
.planetCards .swiper-button-prev {
  left: calc(-28/390*var(--window-width));
  transform: rotate(180deg);
}
.planetCards .swiper-button-next {
  right: calc(-28/390*var(--window-width));
}
.planetCards .swiper-button-disabled {
  opacity: 0;
}






.-norisio .planetCardInner {
  color: #FFF851;
  background: linear-gradient(to bottom right,#008736 0%, #005f26 100%);
}
.-norisio .planetNum svg {
  fill: #FFF851;
}
.-gyutan .planetCardInner {
  color: #60C7F7;
  background: linear-gradient(to bottom right,#f04a00 0%, #cc3f00 100%);
}
.-gyutan .planetNum svg {
  fill: #60C7F7;
}
.-yakitori .planetCardInner {
  color: #100800;
  background: linear-gradient(to bottom right,#e70015 0%, #c90012 100%);
}
.-yakitori .planetNum svg {
  fill: #100800;
}
.-teriyakiburger .planetCardInner {
  color: #F56500;
  background: linear-gradient(to bottom right,#ffef01 0%, #e5dd15 100%);
}
.-teriyakiburger .planetNum svg {
  fill: #F56500;
}
.-tonkatsusauce .planetCardInner {
  color: #F7AFBE;
  background: linear-gradient(to bottom right,#089dee 0%, #007abe 100%);
}
.-tonkatsusauce .planetNum svg {
  fill: #F7AFBE;
}
.-ebimayo .planetCardInner {
  color: #fff;
  background: linear-gradient(to bottom right,#e70015 0%, #ad0010 100%);
}
.-ebimayo .planetNum svg {
  fill: #fff;
}
.-sugarrask .planetCardInner {
  color: #011A77;
  background: linear-gradient(to bottom right,#fff 0%, #ebebeb 100%);
}
.-sugarrask .planetNum svg {
  fill: #011A77;
}
.-chocolate .planetCardInner {
  color: #FD8600;
  background: linear-gradient(to bottom right,#7f6b6e 0%, #42171d 100%);
}
.-chocolate .planetNum svg {
  fill: #FD8600;
}
.-sarami .planetCardInner {
  color: #FFEF04;
  background: linear-gradient(to bottom right,#f56600 0%, #d85a00 100%);
}
.-sarami .planetNum svg {
  fill: #FFEF04;
}
.-yasaisarada .planetCardInner {
  color: #FFB9A2;
  background: linear-gradient(to bottom right,#075 0%, #106049 100%);
}
.-yasaisarada .planetNum svg {
  fill: #FFB9A2;
}
.-natto .planetCardInner {
  color: #7B2880;
  background: linear-gradient(to bottom right,#fd0 0%, #ffb900 100%);
}
.-natto .planetNum svg {
  fill: #7B2880;
}
.-takoyaki .planetCardInner {
  color: #F4B5D5;
  background: linear-gradient(to bottom right,#e70015 0%, #b50010 100%);
}
.-takoyaki .planetNum svg {
  fill: #F4B5D5;
}
.-cheese .planetCardInner {
  color: #0597EF;
  background: linear-gradient(to bottom right,#edf1f4 0%, #eef2f4 100%);
}
.-cheese .planetNum svg {
  fill: #0597EF;
}
.-cornpotage .planetCardInner {
  color: #008736;
  background: linear-gradient(to bottom right,#fffbbd 0%, #f0ea8f 100%);
}
.-cornpotage .planetNum svg {
  fill: #008736;
}
.-mentai .planetCardInner {
  color: #F25B00;
  background: linear-gradient(to bottom right,#52026b 0%, #38004a 100%);
}
.-mentai .planetNum svg {
  fill: #F25B00;
}





/* =============================================================================
 story
============================================================================= */

.story {
  padding: 100px 0;
  position: relative;
  background: url(../images/bg_story.png) top center / 100% auto repeat-y;
  overflow: clip;
  mask: radial-gradient(60% 40px at top, #0000 calc(100% - 1px), #000);
}
.storyTitle {
  margin: 0 0 60px;
  color: var(--color-white);
  font-size: calc(30/390*var(--window-width));
  font-family: var(--ff-dgo);
  font-weight: normal;
  text-align: center;
}
.storyLine {
  margin-top: 40px;
  text-align: center;
}
.storyLineTitle {
  margin-bottom: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0  calc(16/390*var(--window-width));
  color: var(--color-white);
  font-size: calc(26/390*var(--window-width));
  font-family: var(--ff-dgo);
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.2em;
}
.storyLineTitle:before,
.storyLineTitle:after {
  content: '';
  display: block;
  width: calc(105/390*var(--window-width));
  height: calc(4/390*var(--window-width));
  background: url(../images/bg_story_title.svg) 0 0 / contain no-repeat;
}
.storyLineTitle:after {
  transform: rotate(180deg);
}
.storyScenes {
  margin-left: calc(45/390*var(--window-width));
  position: relative;
  z-index: 1;
  width: calc(330/390*var(--window-width));
}
.storyScene {
  padding-right: calc(30/390*var(--window-width));
  position: relative;
  z-index: 1;
	height: auto;
}
.storyScene:before {
  content: '';
  border-width: 2px;
  border-style: solid;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: -1;
  width: calc(100% - 200px);
  height: 0px;
  background: transparent;
}
.storyScene:last-child:before {
  display: none;
}
.storySceneInner {
  padding-bottom: 40px;
  border-radius: calc(16/390*var(--window-width));
  height: 100%;
  background-color: var(--color-white);
  overflow: hidden;
}
.storySceneImg {
  margin-bottom: 20px;
}
.storySceneTitle {
  margin: 0 calc(20/300*100%);
  line-height: 1.2;
  color: var(--color-base);
  font-size: calc(20/390*var(--window-width));
  font-family: var(--ff-dgo);
  font-weight: normal;
  text-align: left;
}
.storySceneTitle .basicFont {
  font-weight: 500;
  font-size: calc(16/390*var(--window-width));
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
.storyScene p {
  margin: 0 calc(20/300*100%);
  line-height: 1.5;
  color: var(--color-base);
  font-weight: 500;
  text-align: left;
}
.storySceneInner>*:nth-child(2) {
  margin-bottom: 5px;
}
.storyComingsoon {
  border: 1px solid #00ff80;
  border-radius: calc(16 / 390* var(--window-width));
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #293765;
  filter: drop-shadow(0px 0px 10px #03ff81);
}
.storyComingsoonImg {
  width: calc(179/390*var(--window-width));
}



.-story01 .storyScene:before,
.-story01 .storyComingsoon {
  border-color: var(--color-yellow);
  filter: drop-shadow(0px 0px 6px var(--color-yellow));
}
.-story01 .storyComingsoon svg {
  fill: var(--color-yellow);
}
.-story02 .storyScene:before,
.-story02 .storyComingsoon {
  border-color: #00ff80;
  filter: drop-shadow(0px 0px 6px #03ff81);
}
.-story02 .storyComingsoon svg {
  fill: #00ff80;
}
.-story03 .storyScene:before,
.-story03 .storyComingsoon {
  border-color: #FF5238;
  filter: drop-shadow(0px 0px 6px #FF5238);
}
.-story03 .storyComingsoon svg {
  fill: #FF5238;
}



.story:has(.roboAnimeSection) {
  padding-bottom: min(150vh,500px);
  position: relative;
}
.roboAnimeSection {
  margin-top: min(100vh,600px);
  margin-top: 50px;
  position: relative;
  height: max(450vh,2250px);
}
.roboAnimeWrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  background: url(../images/bg_story.png) top center / 100% auto repeat-y;
  transition: opacity ease .3s;
}
.roboAnimeWrap.on {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .roboAnimeWrap {
    right: 140px;
    width: 390px;
  }
}
.roboAnime {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(291/390*var(--window-width));
}
.roboAnimeFix {
  transform: translate(100%, 100%);
  will-change: transform;
}
.roboAnimeInner {
  position: relative;
  width: 100%;
  transform: rotate(-45deg);
  --base: 390px;
  --height: 100vh;
  --angle: atan2(var(--height), var(--base));
  transform: rotate(calc(var(--angle)*-1));
  /*transform-origin: top right;*/
}
@media screen and (max-width: 767px) {
  .roboAnimeInner {
    --base: var(--window-width);
    --height: 100vh;
    --angle: atan2(var(--height), var(--base));
    transform: rotate(calc(var(--angle)*-1));
  }
}
.roboWake {
  position: absolute;
  top: calc(118/390*var(--window-width));
  right: calc(31/390*var(--window-width));
  width: calc(221/390*var(--window-width));
  height: 30000vh;
  background-color: var(--color-yellow);
}
.robo {
  position: relative;
  z-index: 2;
}





/* =============================================================================
 finale
============================================================================= */

.finale {
  padding-top: 40px;
  display: flex;
  align-items: flex-end;
  position: relative;
  background: var(--color-yellow);
}
.finaleBG {
  position: fixed;
  bottom: 0;
  right: 140px;
  width: 390px;
  height: 100%;
  background: var(--color-yellow) url(../images/bg_finish.png) 0 0 / 59px 56px repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity ease .4s;
}
.finaleBG.bottom {
  position: absolute;
  right: 0;
}
@media screen and (max-width: 767px) {
  .finaleBG {
    right: 0;
    width: 100%;
  }
}
.finaleInner {
  padding-bottom: calc(78/390*var(--window-width));
  position: sticky;
  bottom: 0;
  left: 0;
  transition: opacity ease .4s;
}
.finaleInner,
.finaleInner > * {
  opacity: 0;
  transition: opacity ease .4s;
}
.finaleIllust01 {
}
.finaleIllust02 {
  margin: calc(-24/390*var(--window-width)) auto 15px;
  position: relative;
  z-index: 2;
  width: calc(358/390*var(--window-width));
}
.finaleTitle {
  margin: 0 auto 10px;
  width: calc(326/390*var(--window-width));
  line-height: 1.25;
  color: var(--color-base);
  font-size: calc(24/390*var(--window-width));
  font-family: var(--ff-dgo);
  font-weight: normal;
}
.finale p {
  margin: 0 auto 10px;
  /* padding-bottom: 30px; */
  width: calc(326/390*var(--window-width));
  line-height: 1.5;
  color: var(--color-base);
}

.finaleIllust03 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}


.finaleIllust02,
.finaleTitle,
.finale p {
}

.finaleIllust01 ,
.finaleIllust03 {
  transform: translateY(20%);
}
.finale.animated .finaleBG,
.finale.animated .finaleInner {
  opacity: 1;
  transition: opacity ease .4s;
}
.finale.animated .finaleIllust02,
.finale.animated .finaleTitle,
.finale.animated p {
  opacity: 1;
  transition: opacity ease .6s .5s;
}
.finale.animated .finaleIllust01,
.finale.animated .finaleIllust03 {
  opacity: 1;
  transform: translateY(0);
  transition: opacity ease .6s 1s,transform ease .6s 1s;
}





/* =============================================================================
 xposts
============================================================================= */

.xposts {
  padding: 50px 0 0;
}
.xpostsTitle {
  margin-bottom: 30px;
  line-height: 1.1538461538461537;
  color: var(--color-white);
  font-size: calc(26/390*var(--window-width));
  font-family: var(--ff-dgo);
  font-weight: normal;
  text-align: center;
}

.xpostsTimeline {
  margin: 0 auto;
  padding: calc(20/390*var(--window-width));
  padding-right: 0;
  border-radius: calc(8/390*var(--window-width));
  width: calc(358/390*var(--window-width));
  height: calc(432/390*var(--window-width));
  background-color: var(--color-white);
}
.xpostsTimelineFrame {
  height: 100%;
  overflow: auto;
}





/* =============================================================================
 pagetop
============================================================================= */

.pagetop {
  margin-top: 40px;
  padding-right: 11px;
  display: flex;
  justify-content: flex-end;
}
.pagetop a {
  display: inline-block;
  position: relative;
  width: 83px;
  text-decoration: none;
}

.pagetop .icon01 {
  position: relative;
  z-index: 2;
  will-change: transform;
}
.pagetop .icon02 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  will-change: transform;
}
.pagetop .txt {
  padding-top: 4px;
  padding-left: 1em;
  line-height: 1.5;
  color: var(--color-green);
  font-size: calc(10/390*var(--window-width));
  font-family: var(--ff-dgo);
  font-weight: normal;
}
.pagetop a .icons {
  position: relative;
  transition: transform linear .2s 0s;
}
.pagetop a.go .icons {
  transform: translateY(-30px);
  transition: transform linear .2s .4s;
}
@media screen and (hover: hover) {
  .pagetop a:hover .icon01,
  .pagetop a:hover .icon02 {
    animation: buruburu .3s linear infinite;
  }
  .pagetop a:hover .icon02 {
    animation: buruburu .4s linear infinite;
  }
}
@media screen and (min-width: 768px) {
  .pagetop {
    margin-top: 0;
    padding-right: 0;
    position: fixed;
    right: 6px;
    bottom: 20px;
    width: 106px;
  }
  .pagetop a {
    width: 106px;
  }
}
.pagetop a:focus .icon01,
.pagetop a:focus .icon02 {
  animation: buruburu2 1.2s linear 1 forwards;
}
@keyframes buruburu {
  0% {transform: translate(0, 0) rotateZ(0deg)}
  25% {transform: translate(2px, 2px) rotateZ(3deg)}
  50% {transform: translate(0px, 2px) rotateZ(0deg)}
  75% {transform: translate(2px, 0) rotateZ(-3deg)}
  100% {transform: translate(0, 0) rotateZ(0deg)}
}
@keyframes buruburu2 {
  0% {transform: translate(0, 0) rotateZ(0deg)}
  25% {transform: translate(2px, 2px) rotateZ(3deg)}
  50% {transform: translate(0px, 2px) rotateZ(0deg)}
  75% {transform: translate(2px, 0) rotateZ(-3deg)}
  100% {transform: translate(0, 0) rotateZ(0deg)}
}
@keyframes buruburu2 {
  0% {transform: translate(0, 0) rotateZ(0deg);}
  5% {transform: translate(2px, 2px) rotateZ(3deg)}
  10% {transform: translate(0px, 2px) rotateZ(0deg)}
  15% {transform: translate(2px, 0) rotateZ(-3deg)}
  20% {transform: translate(0, 0) rotateZ(0deg)}
  25% {transform: translate(2px, 2px) rotateZ(3deg);}
  30% {transform: translate(0px, 2px) rotateZ(0deg)}
  35% {transform: translate(2px, 0) rotateZ(-3deg)}
  40% {transform: translate(0, 0) rotateZ(0deg)}
  45% {transform: translate(2px, 2px) rotateZ(3deg)}
  50% {transform: translate(0px, 2px) rotateZ(0deg)}
  55% {transform: translate(2px, 0) rotateZ(-3deg)}
  60% {transform: translate(0, 0)}
  65% {transform: translate(2px, 2px) rotateZ(3deg)}
  70% {transform: translate(0px, 2px) rotateZ(0deg)}
  75% {transform: translate(2px, 0) rotateZ(-3deg)}
  80% {transform: translate(0, 0)}
  85% {transform: translate(2px, 2px) rotateZ(3deg)}
  90% {transform: translate(0px, 2px) rotateZ(0deg)}
  95% {transform: translate(2px, 0) rotateZ(-3deg)}
  100% {transform: translate(0, 0)}
}





/* =============================================================================
 footer
============================================================================= */

.footer {
  margin-top: 20px;
  padding: 20px 0 15px;
  background-color: var(--color-base);
}

.footerLogo {
  margin: 0 auto 15px;
  width: calc(127/390*var(--window-width));
}

.copyright {
  color: var(--color-white);
  font-size: calc(10/390*var(--window-width));
  text-align: center;
}
@media screen and (min-width: 768px) {
  .footer {
    margin-top: 80px;
    padding: 20px 0 15px;
    background-color: var(--color-base);
  }
}





/* =============================================================================
 anime base
============================================================================= */

.anime,
.anime2 {
  opacity: 0;
}
@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity: 1;}}