/* common */

  :root{
    --zetasy-pink: #E4007F;
    --zetasy-pink-1: #dba2c2;
    --zetasy-brown: rgb(113, 93, 93);
    --zetasy-online: rgb(93, 204, 93);
    --zetasy-offline: #999;
    --zetasy-heart: rgb(243, 149, 192);
  }
  @font-face{ 
    font-family: 'senobi';
    src: url('../fonts/senobi-ennmusubi-.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face{ 
    font-family: 'kiwiMaru-zetasy';
    src: url('../fonts/KiwiMaru-Light-zetasy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face{ 
    font-family: 'kiwiMaru-zetasy';
    src: url('../fonts/KiwiMaru-Medium-zetasy.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }
  html{
    width: 100%;
    height: 100%;
    /* max-width: 400px; */
    background-color: #000000;
    cursor: default;
    user-select: none;
  }
  body{
    background-color: #fff;
    width: 100%;
    max-width: 400px;
    min-height: 100%;
    margin: 0 auto;
    font-family: 'kiwiMaru-zetasy', serif;
    font-weight: normal;
    position: relative;
  }

/* common */

/* header */
  header{
    position: fixed;
    top: 0;
    width: 0;
    background-color: #fff;
    width: 100%;
    max-width: 400px;
    z-index: 99;
    box-shadow: 0 3px 3px #0000002d;
  }
  header .header_top{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    border-bottom: 1.5px solid rgba(99, 76, 76, 0.358);
  }
  .header-title{
    font-size: 24px;
    font-family: 'senobi';
    color: var(--zetasy-pink);
  }
  header .titleimg{
    /* width: 240px; */
    height: 50px;
    object-fit: contain;
    padding: 8px 4px 0px 16px;
  }
  .hamburger-body {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--zetasy-pink);
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 10;
    transition: all .6s;
  }

  .hamburger {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    width: 40px;
    height: 32px;
    margin: 13px 9px 15px 11px;
    padding-bottom: 2px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .header_menu{
    display: flex;
    justify-content: space-around;
    padding: 6px;
    font-size: 10px;
  }
  .header_menu li{
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--zetasy-pink);
    cursor: pointer;
  }
  .header_menu li .material-symbols-outlined{
    /* font-family: 'Material Icons Outlined'; */
    font-size: 42px;
  }
  .header_menu .topiccount{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0px;
    width: 20px;
    height: 20px;
    padding-top: 1px;
    border-radius: 50%;
    background-color: var(--zetasy-pink);
    z-index: 3;
    color: #fff;
    font-size: 16px;
    font-family: 'Nanum Gothic Coding', monospace;
    opacity: 0;
  }
  .topiccount.apear{
    opacity: 1;
  }

/* header */

/* main */
  main{
    padding-top: 120px;
  }
  .situation{
    display: flex;
    justify-content: center;
    margin: 16px auto;
  }
  .situation li{
    width: 40%;
    border-bottom: 2px solid #000;
    /* margin: 2px; */
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--zetasy-brown);
    border-color: var(--zetasy-brown);
  }
  .situation li.current{
    color: var(--zetasy-pink);
    border-color: var(--zetasy-pink);
  }
  .situation li:not(.current){
    cursor: pointer;
  }


  .personlist{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .person{
    width: 40%;
    aspect-ratio: 1/1;
    margin: 10px;
    padding: 4px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: 50% 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
  }
  .person a{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .person:hover{
    cursor: pointer;
  }

  .person::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, transparent 0 60%, #0000006c 100%);
  }
  .thumbnail_info{
    display: block;
    max-width: 90%;
    padding-bottom: 2px;
    z-index: 2;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .thumbnail_info::before{
    content: "●";
    color: var(--zetasy-offline);
    font-size: 14px;
    padding-right: 3px;
  }
  .personlist li:nth-child(4) .thumbnail_info::before{
    color: var(--zetasy-online);
  }
  .thumbnail_oneword{
    display: block;
    max-width: 90%;
    padding-bottom: 6px;
    padding-left: 4px;
    z-index: 2;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 300;
    font-size: 12px;
  }
/* main */

/* footer */
  footer{
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 100%;
    max-width: 400px;
    /* height: 40px; */
    padding: 8px 16px;
    background-color: #00000085;
    box-shadow: 0 -3px 3px #0000002d;
    color: #fff;
    text-align: center;
    padding: 16px;
    font-size: 14px;
  }
  footer dt{
    font-weight: normal;
    padding-bottom: 8px;
  }
  footer dd{
    font-weight: normal;
    line-height: 20px;
  }
  .material-symbols-outlined.footer-heart{
    position: relative;
    top: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
    margin: 0px;
  }
  .fake-footer{
    width: 100%;
    height: 110px;
  }
/* footer */




/* それぞれのプロフ画面 */

  /* 送信のラグ時のローディング画面 */
  .submit-loading{
    position: fixed;
    width: 100%;
    max-width: 400px;
    height: 100%;
    display: flex;

    justify-content: center;
    align-items: center;
    z-index: 999;
    user-select: none;
    pointer-events: none;
    background-color: #00000077;
    opacity: 0;
    transition: opacity .3s;
  }
  .submit-loading.apear{
    opacity: 1;
  }
  .dott-container{
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: center;
  }
  .dott-container > div{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 16px;
    background-color: var(--zetasy-pink);
  }
  .submit-loading.apear .dott-container > div:nth-child(1){
    animation: submit-animation .9s alternate infinite ease-in-out;
  }
  .submit-loading.apear .dott-container > div:nth-child(2){
    animation: submit-animation .9s .3s alternate infinite ease-in-out;
  }
  .submit-loading.apear .dott-container > div:nth-child(3){
    animation: submit-animation .9s .6s alternate infinite ease-in-out;
  }
  @keyframes submit-animation {
    0% {
      transform: scale(1);
      opacity: 1;
    }    
    100% {
      transform: scale(0);
      opacity: 0;
    }   
  }
    

  .list-check{
    display: none;
  }

  .check-back{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 400px;
    height: 100%;
    transform: translateX(-50%);
    background-color: #99999965;
    z-index: 999;
    opacity: 1;
    transition: all .3s .6s;
  }
  .check-back.hidden{
    transition: all .3s 0s;
    pointer-events: none;
    opacity: 0;
  }
  .check{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 80%;
    min-width: 220px;
    max-width: 300px;
    height: 160px;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    text-align: center;
  }
  .check-text.ban{
    pointer-events: none;
  }
  .check dt{
    color: var(--zetasy-pink);
    font-weight: 500;
    padding: 20px 0 8px;
    font-size: 18px;
  }
  .check dd{
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  .check dd input{
    width: 80px;
    height: 40px;
    background-color: rgb(238, 155, 169);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .check-no{
    width: 80px;
    height: 40px;
    background-color: rgb(160, 160, 160);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  .prof_body{
    position: relative;
    width: 100%;
    max-width: 400px;
    /* height: 1200px; */
  }
  .prof_header{
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 400px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    z-index: 99;
  }
  .prof_header p{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 30px;
    padding-bottom: 2px;
    color: #999;
    cursor: pointer;
    transition: all .3s;
  }
  .prof_header.gray p{
    color: #fff;
    background-color: #999;
    opacity: .8;
  }
  .prof_top{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .prof_top h1{
    height: 50px;
    font-weight: 500;
    font-size: 20px;
    line-height: 50px;
  }
  .prof_mainimag{
    width: 90%;
    aspect-ratio: 1/1;
    margin: 10px;
    padding: 4px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: 50% 50%;
  }
  .prof_mainimag .favorite{
    position: absolute;
    top: calc(50% - 70px);
    left: calc(50% - 70px);
    z-index: 99;
    font-size: 140px;
    color: var(--zetasy-heart);
    opacity: 0;
    cursor: pointer;
  }
  .prof_mainimag .favorite.love{
    animation: love .8s;
  }

  @keyframes love {
    0% {
      transform: scale(.1);
      opacity: .3;
    }
    40% {
      transform: scale(2);
      opacity: .8;
    }
    60% {
      transform: scale(1);
      opacity: .7;
    }
    80% {
      transform: scale(1.4);
      opacity: .5;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
    
  .prof_mainimag::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, transparent 0 60%, #0000006c 100%);
  }
  .arrows{
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: #fff;
    z-index: 10;
  }
  .arrows .material-symbols-outlined{
    font-size: 40px;
    padding: 0 auto;
    /* cursor: pointer; */
    text-shadow: 0 0 5px #00000079;
  }
  .arrow_link{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .prof_info{
    display: block;
    max-width: 90%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 12px;
    z-index: 2;
    color: #fff;
  }
  .prof_name{
    font-weight: 300;
    font-size: 20px;
    padding-right: 8px;
  }
  .prof_info .oneword{
    font-size: 14px;
    padding-top: 8px;
  } 
  .proof{
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 0;
    width: 85px;
    height: 30px;
    border-radius: 4px 0 0 4px;
    background-color: var(--zetasy-pink);
    color: #fff;
    z-index: 2;
  }
  .proof.on{
    display: flex;
  }
  .prof_top_under{
    width: 90%;
    padding: 4px 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
  }
  .prof_top_under span{
    cursor: pointer;
    transition: all .5s;
  }
  .prof_top_under span.love{
    color: var(--zetasy-heart);
    animation: love_s .8s forwards;
  }
  @keyframes love_s {
    0% {
      transform: scale(.1);
    }
    40% {
      transform: scale(2);
    }
    60% {
      transform: scale(1);
    }
    80% {
      transform: scale(1.4);
    }
    100% {
      transform: scale(1);
    }
  }
  .hour::before{
    content: "●";
    padding-right: 2px;
  }
  .hour.online{
    color: var(--zetasy-online);
  }
  .prof_top .sub_img{
    width: 90%;
    margin-bottom: 20px;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .prof_top .sub_img img{
    width: 100px;
    height: 100px;
    border-radius: 4px;
  }

  .prof_data{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .prof_data .prof_data_list{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }
  .prof_data .prof_data_list li{
    width: 45%;
    border-bottom: 3px solid #999;
    color: #999;
    padding-bottom: 10px;
    text-align: center;
    opacity: .5;
  }
  .prof_data .prof_data_list li.current{
    color: var(--zetasy-pink);
    border-color: var(--zetasy-pink);
    opacity: 1;
  }
  .self-introduction{
    width: 90%;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: baseline;
  }
  .self-introduction h2{
    
    /* font-size: 30px; */
    
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .self-introduction p{

    /* font-size: 24px; */

    width: 100%;
    padding-bottom: 30px;
    border-bottom: 1px solid #999;
    line-height: 22px;
  }
  .self-introduction-data{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0 100px 0;
  }
  .self-introduction-data dt,
  .self-introduction-data dd{

    /* font-size: 24px; */

    width: 50%;
    padding-bottom: 10px;
  }
  .self-introduction-data dt{
    font-weight: 300;
  }
  .self-introduction-data dt::before{
    content: "■";
    color: #999;
    padding-right: 3px;
  }
  .self-introduction-data dd{
    font-weight: 500;
    text-align: right;
  }
  
/* それぞれのプロフ画面 */


/* 集計結果 */

  /* ローディング画面 */
  .result-loading{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 999;
    opacity: 1;
    transition: opacity 1.2s;
    pointer-events: all;
  }
  .result-loading.loaded{
    opacity: 0;
    pointer-events: none;
  }
  .loading-h1{
    display: flex;
    font-size: 34px;
    margin-top: 48px;
    font-family: 'senobi';
  }
  .loading-h1 span{
    position: relative;
    left: 0;
    right: 0;
    top:0;
  }
  .loading-h1 span:nth-child(1){
    animation: bound-anim 1.5s infinite;
  }
  .loading-h1 span:nth-child(2){
    animation: bound-anim 1.5s .3s infinite;
  }
  .loading-h1 span:nth-child(3){
    animation: bound-anim 1.5s .6s infinite;
  }
  @keyframes bound-anim {
    0%,100% {top: 0;transform: scale(1);}
    30% {top: -25%;}
    50% {transform: scale(1);}
    90% {top: 0;transform: scale(1.2,0.8);}
  }

  .material-symbols-outlined.loading-favorite{
    z-index: 99;
    font-size: 50px;
    color: var(--zetasy-heart);
    animation: loading-love 1s infinite;
  }

  @keyframes loading-love {
    0% {
      transform: scale(1);
      opacity: .3;
    }
    40% {
      transform: scale(2);
      opacity: .8;
    }
    60% {
      transform: scale(1);
      opacity: .7;
    }
    80% {
      transform: scale(1.4);
      opacity: .5;
    }
    100% {
      transform: scale(1);
      opacity: 0.3;
    }
  }


  /* グラフ画面 */

  .result-body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: var(--zetasy-brown);
    /* border: 3px solid var(--zetasy-pink); */
  }
  .result-h1{
    font-size: 32px;
    margin: 16px 0 0px;
    font-family: 'senobi';
    background:linear-gradient(transparent 80%, #ff9bc5 80%);/*linear-gradient(transparent ◯◯%, 使用する色 ◯◯%)*/
  }
  .result-h1 span{
    font-size: 24px;
    font-family: 'kiwiMaru-zetasy', serif;
    font-weight: bold;
  }
  .reload-btn{
    display:inline-block;
    z-index:1;
    position:relative;
    font-size:inherit;
    font-family:inherit;
    color:#fff;
    padding:.5em 1em;
    margin: 8px;
    outline:0;
    border:none;
    border-radius: 8px;
    background-color: #cecece;
    transition: background-color 1s 4s;
  }
  .reload-btn.apear{
    background-color:#fd72ac;
  }
  .reload-btn::before{
    content:'';
    z-index:-1;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border:4px solid #cecece;
    border-radius: 8px;
    transform-origin:center;
    transform:scale(1);
    transition: border-color 1s 4s;
  }
  .reload-btn.apear::before{
    border-color: #fd72ac;
    animation: btnEffect 1.6s 4s ease-in-out infinite;
  }
  @keyframes btnEffect{
    0% {
      transform:scale(1, 1);
      opacity:1; 
    }
    100% {
      transform:scale(1.25, 1.9);
      opacity:0; 
    }
  }
      
  .graph{
    display: flex;
    justify-content: center;
    min-height: 400px;
    overflow: hidden;
    /* gap: 16px; */
  }
  .graph li{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: 0 16px;
    font-size: 18px;
    /* font-weight: bold; */
  }
  .name{
    padding-bottom: 6px;
    writing-mode: vertical-rl;
    font-weight: 500;
    letter-spacing: -0.1em;
  }
  .bar{
    width: 40px;
    height: 0px;
    /* box-shadow: 1px 1px 1px black; */
  }
  .graph li:nth-of-type(1) .bar{
    background-color: rgb(201, 150, 173);
  }
  .graph li:nth-of-type(2) .bar{
    background-color: rgb(150, 164, 201);
  }
  .graph li:nth-of-type(3) .bar{
    background-color: rgb(150, 201, 163);
  }
  .graph li:nth-of-type(4) .bar{
    background-color: rgb(223, 183, 156);
  }
  .percent{
    font-family: 'Nanum Gothic', sans-serif;
  }
  .percent > span{
    font-size: 14px;
  }
  .to_home{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 36px;
    border-radius: 4px;
    background-color: #ffd5cd;
    margin: 8px;
  }

/* 集計結果 */