#main-title .base img, #main-title .cloud img, #main-title .title img {
  opacity: 0; }
#main-title .base img.back {
  transition: opacity 0.25s linear 0s; }
#main-title .cloud img.c1 {
  transform: translateX(-100%);
  transition: opacity 0.25s linear 0.25s, transform 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.5s;
}
#main-title .cloud img.c2 {
  transform: translateX(100%);
  transition: opacity 0.25s linear 0.25s, transform 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.5s;
}
#main-title .cloud img.c3 {
  transform: translateX(100%);
  transition: opacity 0.25s linear 0.25s, transform 1.5s cubic-bezier(0.23, 1, 0.32, 1) 1s;
}
#main-title .cloud img.c4 {
  transform: translateX(-100%);
  transition: opacity 0.25s linear 0.25s, transform 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.75s;
}
.device-sp #main-title .cloud img.c1 {
  transform: translateX(-100%);
}
.device-sp #main-title .cloud img.c2 {
  transform: translateX(-100%);
  transition: opacity 0.25s linear 0.25s, transform 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.75s;
}
.device-sp #main-title .cloud img.c3 {
  transform: translateX(150%);
}
.device-sp #main-title .cloud img.c4 {
  transform: translateX(250%);
}
#main-title .title img.title1 {
  transform: translate(-50%, 0) scale(0.6);
  transition: opacity 0.25s linear 0.25s, transform 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.25s;
}
#main-title .title img.title2 {
  transform: translate(-50%, 0) scale(0.4) rotate(15deg);
  transform-origin:bottom center;
  transition: opacity 0.25s linear 1.5s, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 1.5s; }
#main-title.ready {
  visibility: visible !important; }
#main-title.ready.status-base .base img {
  opacity: 1;
  transform: translate(-50%, 0); }
.device-sp #main-title.ready.status-cloud .cloud img {
  transform: translateX(-50%);
  left: 50%;
}
#main-title.ready.status-cloud .cloud img {
  opacity: 1;
  transform: translateX(0); }
#main-title.ready.status-title .title img {
  opacity: 1;
  transform: translate(-50%, 0) scale(1) rotate(0); }
#contents.result .mt > p img{
  opacity: 0;
  transform: translateY(-3%) scale(1.2);
  transition: opacity 1s linear 0.5s, transform 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.5s; }
#contents.result.status-result .mt > p img{
  opacity: 1;
  transform: translateY(0) scale(1); }
@media print {
  body.mt-result header[role=extra],
  body.mt-result nav[role=global],
  body.mt-result nav[role=breadcrumb],
  body.mt-result footer[role=sitemap],
  body.mt-result .btn-gotop {
    display: none !important; }
  body.mt-result #page {
    padding-top: 0 !important; }
  body.mt-result #contents footer {
    display: none !important; }
  body.mt-result #contents .share {
    display: none !important; }
  body.mt-result #contents #btn_omikuji {
    display: none !important; }
  body.mt-result #contents hr {
    display: none !important; }
  body.mt-result #contents #lineup {
    display: none !important; }
  .device-sp body.mt-result #contents .mt {
    max-width: 400px !important; }
  .device-pc body.mt-result #contents .mt {
    padding-bottom: 40px !important; } }
#contents {
  padding: 0;
  background-color: #f8bebe;
  -ms-transform: rotate(0.001deg);
  transform: rotate(0.001deg);
}
canvas {
  height: 100vh;
  width: 100%;
  position: absolute;
  z-index: 1;
}
.device-sp canvas {
  height: 80vh;
}  
@media (min-width: 641px) {
  .device-sp canvas {
    height: 50vh;
  }  
}
.container > .main{
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  color: #000;
}
.checkered {
  width: 100%;
  padding: 0;
  background: url(../images/bg_left.png) repeat right top;
  background-size: 252px;
  /* background-size: 19.8vw; */
}
.checkered.right {
  background: url(../images/bg_right.png) repeat left top;
  background-size: 252px;
}
#contents section > div > p.yodogawa {
  font-family: 'Gill Sans','Trebuchet MS',sans-serif;
  font-size: 16px;
  line-height: 1.75;
  padding: 25px 0;
  max-width: 570px;
  margin: 0 auto;
}
.device-sp #contents section > div > p.yodogawa {
  max-width: 450px;
  width: 87.5%;
  line-height: 1.58;
}
.device-pc #contents section > div > p.yodogawa {
  font-size: 18px;
  padding: 50px 0 80px;
}
.mikuji {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.result .mikuji {
  margin: 100px auto 0;
}
#btn_omikuji img {
  width: 400px;
  height: auto;
  cursor: pointer;
  opacity: 1 !important;
  animation: btn_anim infinite step-end 1.5s;
  -ms-animation: btn_anim_safari infinite step-end 1.5s;
  -webkit-animation: btn_anim_webkit infinite step-end 1.5s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@keyframes btn_anim{
  1% { transform:translate3d(0,0,0); }
  20% { transform:translate3d(0, -400px,0);}
  30% { transform:translate3d(0,-800px,0);}
}
@keyframes btn_anim_safari{
  1% { transform:translate3d(0,0,0); }
  20% { transform:translate3d(0, -400px,0);}
  30% { transform:translate3d(0,-800px,0);}
}
@keyframes btn_anim_webkit{
  1% { transform:translate3d(0,0,0); }
  20% { transform:translate3d(0, -400px,0);}
  30% { transform:translate3d(0,-800px,0);}
}
.device-sp .mikuji {
  width: 200px;
  height: 200px;
}
.device-sp #btn_omikuji img {
  width: 200px;
  animation: btn_anim-sp infinite step-end 1.5s;
  -ms-animation: btn_anim_safari-sp infinite step-end 1.5s;
  -webkit-animation: btn_anim_webkit-sp infinite step-end 1.5s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@keyframes btn_anim-sp{
  1% { transform:translate3d(0,0,0); }
  20% { transform:translate3d(0, -200px,0);}
  30% { transform:translate3d(0,-400px,0);}
}
@keyframes btn_anim_safari-sp{
  1% { transform:translate3d(0,0,0); }
  20% { transform:translate3d(0, -200px,0);}
  30% { transform:translate3d(0,-400px,0);}
}
@keyframes btn_anim_webkit-sp{
  1% { transform:translate3d(0,0,0); }
  20% { transform:translate3d(0, -200px,0);}
  30% { transform:translate3d(0,-400px,0);}
}
.mikuji + div{
  font-size: 15px;
  text-align: center;
  padding: 1em 0 6.6em;
}
.mikuji + div span{
  font-size: 80%;
  display: block;
  max-width: 26em;
  margin: 0 auto;
}
.device-sp .mikuji + div {
  font-size: 14px;
  padding: 1em 0 2em;
}
#cats::before {
  content: "";
  display: block;
  background: url(../images/ribbon.svg) no-repeat;
  width: 780px;
  height: 70px;
  margin: 0 auto;
}
#cats h2 {
  font-family: "Kanteiryu", sans-serif;
  font-feature-settings: "palt";
  text-align: center;
  font-size: 28px;
  padding: 40px 0 35px;
}
#cats .viewhistory {
  max-width: 780px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  line-height: 0;
  padding-bottom: 8em;
}
.device-sp #cats .viewhistory {
  max-width: 480px;
}
#cats .viewhistory img {
  width: 180px;
}
.device-sp #cats .viewhistory {
  gap: 3.125vw;
  padding-bottom: 4em;
}
.device-sp #cats .viewhistory img {
  max-width: 210px;
  width: 43.4vw;
}
.device-sp #cats::before{
  max-width: 450px;
  width: 90%;
  margin: 0 auto;  
  background: url(../images/ribbon_sp.svg) no-repeat;
  background-position: center center;
  background-size: 100% auto;
}
.device-sp #cats h2 {
  font-size: 21px;
  padding: 20px 0 10px;
}
.device-pc #cats .viewhistory a:hover{
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -o-transition: opacity .3s;
  -ms-transition: opacity .3s;
  transition: opacity .3s;
  opacity: .4;
}
#contents header {
  padding-bottom: 0; }
#contents section {
  background-color: #f8bebe; }
#contents section img.logo {
  width: 50%;
  max-width: 320px;
  display: block;
  margin: 0 auto;
  mix-blend-mode: multiply; }
.ua-desktop-windows #contents section > div > a {
  -ms-transform: rotate(0.001deg);
  transform: rotate(0.001deg); }
#contents footer {
  background-color: #f8bebe; }
  #contents footer > a.lineup{
  position: relative;
  z-index: 1;
}
#contents footer > a.lineup img{
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
#contents footer::before {
  content: "";
  display: block;
  border-top: 2px solid #e42828;
  width: 780px;
  margin: 0 auto;
}
.device-sp #contents footer::before{
  max-width: 450px;
  width: 90%;
  border-top: 1px solid #e42828;
}
#contents footer {
  padding: 0 0 8em;
}
#contents footer > a {
  font-size: 16px;
  font-weight: 700;
  display: table;
  margin: 3.75em auto;
}
#contents footer > ul.magazine-share {
  display: flex;
  flex-wrap: wrap;
  width: 56em;
  margin: 7em auto;
  padding: 2em 0 3.5em;
  border: 0.1em #ccc solid;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
}
#contents footer > ul.magazine-share:before {
  font-size: 12px;
  font-weight: 700;
  line-height: 2.33;
  display: block;
  width: 100%;
  margin-bottom: 1.25em;
  content: "Share";
  text-align: center;
  color: #666;
}
#contents footer > ul.magazine-share li a {
  display: block;
  width: 3em;
  height: 3em;
  cursor: pointer;
}
#contents footer > ul.magazine-share li a img {
  display: block;
  width: 100%;
}
#contents footer > ul.magazine-share li + li {
  margin-left: 4em;
}
#contents footer > p {
  text-align: center;
  font-size: 12px;
  line-height: 2.08;
}
.device-sp #contents footer {
  padding: 0 0 4em;
  text-align: center;
}
.device-sp #contents footer > ul.magazine-share {
  max-width: 56em;
  width: 90%;
  margin: 4em auto;
  padding: 10.3vw 0;
  border-radius: 7px;
}
.device-sp #contents footer > a.lineup {
  max-width: 35em;
  width: 90%;
  margin: 0 auto;
}
.device-sp #contents footer > a.lineup img {
  border-radius: 7px;
}
.device-sp #contents footer > a {
  margin: 3em auto;
  display: block;
}
.device-pc #contents.result {
  display: block;
}
.device-pc #contents.result .container {
  display: flex;
}
#contents.result section {
  width: 93.75%;
  max-width: 500px;
  margin: 0 auto;
  background-color: transparent; }
#contents.result section > div {
  overflow: hidden;
  margin: 20px auto 0;
  background-color: #fff;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5); }
#contents.result section > div p {
  font-family: 'Gill Sans','Trebuchet MS',sans-serif;
  font-size: 190%; }
#contents.result section > div > a {
  font-size: 180%; }
#contents.result section > div > a#lineup {
  font-size: 160%;
  line-height: 1.25;
  display: flex;
  text-align: left;
  background-image: none;
  border: 2px solid #00a9f3;
  padding: 8px 0;
  color: #00a9f3;
  justify-content: center;
  align-items: center; }
#contents.result section > div > a#lineup::before {
  display: block;
  width: 27.5px;
  height: 30px;
  margin-right: 8px;
  content: "";
  background: url(../images/main4-3.svg) no-repeat center center;
  background-size: contain; }
#contents.result section > div > a#lineup small {
  font-size: 87.5%; }
#contents.result section > div hr {
  border-color: #CCC;
  margin: 20px auto; }
#contents.result section > div > div.share {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px auto 30px; }
.ua-desktop-windows #contents.result section > div > div.share p {
  -ms-transform: rotate(0.001deg);
  transform: rotate(0.001deg); }
#contents.result section > div > div.share ul {
  display: flex;
  justify-content: center;
  align-items: center; }
#contents.result section > div > div.share ul li {
  width: 25%;
  max-width: 30px;
  margin: 0 12px; }
#contents.result section > div > div.share ul li:last-of-type {
  margin-right: 0; }
.device-sp #contents section a {
  display: block; }
.device-pc #contents {
  display: flex;
  width: 100%; }
.device-pc #contents header {
  width: 100%;
}
.device-pc #contents header p {
  font-size: 180%;
  width: 400px;
  margin: 40px auto 0;
  padding-bottom: 40px; }
.device-pc #contents section {
  width: 96em;
  margin: 0 auto; }
.device-pc #contents section > div > a {
  display: block;
  max-width: 320px;
  margin: 40px auto;
  transition: transform 0.25s, box-shadow 0.25s; }
.device-pc #contents section > div > a:hover {
  transform: translate(0, 5px);
  box-shadow: 0 0 0 1px #00a9f3; }
.device-pc #contents footer {
  width: 96em;
  margin: 0 auto; }
.device-pc #contents footer > a {
  margin-top: 0;
  margin-bottom: 60px; }
.device-pc #contents.result section {
  padding-top: 40px; }
.device-pc #contents.result section > div {
  margin-top: 40px; }
.device-pc #contents.result section > div p {
  padding: 0;
  width: 420px;
  margin: 0 auto; }
.device-pc #contents.result section > div > div.share {
  margin: 40px auto; }
.device-pc #contents.result section > div > div.share p {
  max-width: 100px; }
#main-title {
  position: relative;
  padding-top: 387px; }
#main-title span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%; }
#main-title span img {
  position: absolute;
  top: 0;
  left: 0; }
#main-title span.base img {
  left: 49%; }
#main-title span.base img:nth-of-type(1) {
  width: 600px;
  top: 6px;
}
#main-title span.base img.cats {
  top: 206px;
  width: 237px; }
#main-title span.cloud img:nth-of-type(1) {
  top: 96px;
  margin-left: -116px;
  width: 114px;
}
#main-title span.cloud img:nth-of-type(2) {
  top: 293px;
  margin-left: -119px;
  width: 143px;
}
#main-title span.cloud img:nth-of-type(3) {
  top: 228px;
  width: 140.1px;
  margin-left: 134px;
}
#main-title span.cloud img:nth-of-type(4) {
  top: 114px;
  margin-left: 137px;
  width: 106.4px;
}
#main-title span.title img {
  left: 50%;
  transform: translate(-50%); }
#main-title span.title img:nth-of-type(1) {
  top: 129px;
  width: 254px;
}
#main-title span.title img:nth-of-type(2) {
  top: 72px;
  margin-left: 61px;
  width: 84px;
}
#contents header .top{
  position: relative;
}
#contents .main > .scroll {
  position: absolute;
  left: 50%;
  top: -6.2vh;
  transform: translateX(-50%);
}
#contents .main > .scroll img:first-of-type{
  padding-bottom: 5px;
}
#contents .main > .scroll img:last-of-type{
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
  }
  20% {
    -webkit-transform: translate(0, 10px);
  }
  40% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, 10px);
  }
  40% {
    transform: translate(0, 0);
  }
}
.device-pc #contents .main > .scroll {
  width: 44px;
  text-align: center;
}
.device-pc #contents header .top{
  width: 96em;
  margin: 0 auto;
  height: calc(100vh - 100px - (100vh - 100px - 64.58%));
}
.device-pc #main-title {
  padding-top: 64.58%;
  margin: calc((100vh - 100px - 64.58%)/2) auto;
}
.device-pc #main-title span.base img:nth-of-type(1) {
  width: 88.3%;
  top: 2.8%;
  left: 51%;
}
.device-pc #main-title span.base img.cats {
  width: 30%;
  top: 56.5%;
  left: 50%;
}
.device-pc #main-title.ready.status-cloud .cloud img {
  margin-left: 0;
}
.device-pc #main-title span.cloud img:nth-of-type(1) {
  top: 32%;
  left: 13.8%;
  width: 20%; }
.device-pc #main-title span.cloud img:nth-of-type(2) {
  top: 10.8%;
  left: 73.9%;
  width: 25%; }
.device-pc #main-title span.cloud img:nth-of-type(3) {
  top: 59.4%;
  left: 69.8%;
  width: 25%; }
.device-pc #main-title span.cloud img:nth-of-type(4) {
  top: 64.4%;
  left: 1.7%;
  width: 28%;}
.device-pc #main-title span.title img:nth-of-type(1) {
  top: 25%;
  left: 50.5%;
  width: 58%;}
.device-pc #main-title span.title img:nth-of-type(2) {
  top: 23%;
  width: 12.514%;
  left: 81%;
  margin-left: 0;
}
#contents.result section div.mt{
  border-image: url(../images/bg_result.svg) 8 round;
  border-style: solid;
  border-width: 12px;
  padding: 0;
  display: inline-table;
  margin: 20px 28px;
  text-align: center;
}
#contents.result section > div p:nth-of-type(2) {
  max-width: 410px;
  margin: 2.5em auto;
  padding: 1.5em;
  border-top: 2px solid #e42828;
  border-bottom: 2px solid #e42828;
  text-align: left;
}
#contents.result section div.mt img{
  width: 100%;
}
#contents.result section > div .advice{
  max-width: 410px;
  margin: 0 auto;
}
#contents.result section > div .advice h3{
  font-family: 'Gill Sans','Trebuchet MS',sans-serif;
  font-weight: bold;
  font-size: 170%;
  border: 2px solid #e42828;
  border-radius: 7px;
  display: inline-block;
  padding: 0.2em 1em;
}
#contents.result section > div .advice ul{
  font-family: 'Gill Sans','Trebuchet MS',sans-serif;
  font-weight: bold;
  text-align: left;
  font-size: 200%;
  display: inline-block;
  padding: 1em 0.2em 0.5em;
}
#contents.result section > div .advice li::before {
  position: relative;
}
#contents.result section > div .advice li::before {
  content: '';
  display: inline-block;
  background: url(../images/icon_list.svg) no-repeat;
  background-size: contain;
  width: 7px;
  height: 9px;
  vertical-align: middle;
  margin: 0 .5em .1em 0;
}
#contents.result section > div .advice li {
  line-height: 1.55;
  padding-bottom: 0.5em;
}
#contents.result section#cats {
  max-width: 960px;
  width: 100%;
}
#contents.result section#cats > div {
  background-color: inherit;
  box-shadow: inherit;
}
.device-sp #contents.result section div.mt {
  border-image: url(../images/bg_result.svg) 8 round;
  border-style: solid;
  border-width: 10px;
  margin: 10px;
}
.device-sp #contents.result section div.mt img {
  width: 90%;
  margin: 0 auto;
}
.device-sp #contents.result section > div p:nth-of-type(2) {
  max-width: 410px;
  width: 95%;
  margin: 1.5em auto 2em;
  padding: 1em 0.8em 1.5em;
  text-align: left;
  border-top: 1.5px solid #e42828;
  border-bottom: 1.5px solid #e42828;
  font-size: 170%;
}
.device-sp #contents.result section > div .advice h3 {
  font-size: 130%;
  border: 1.5px solid #e42828;
  border-radius: 2.88px;
  display: inline-block;
  padding: 0.5em 1.5em;
}
.device-sp #contents.result section > div .advice ul {
  font-size: 150%;
}
.device-sp .result .mikuji {
  margin: 40px auto 0;
}