/* CSS Document */
.section { width: 100%; height: 100%; position: fixed; inset: 0; margin: auto; background: #FFF; }

.header { position: fixed; top: 3vw; left: 5%; margin: auto; z-index: 9; font-size:1rem; font-weight: bold; }

.header .name { width: 250px; text-align: left; }
.header .name img { width: 100%; display: block; }
.header .name span { display: block; font-size: 1rem; margin-top: 1em; white-space: nowrap; }

.opening { z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: bold; letter-spacing: .1em; }
.opening .title { width: 40vw;font-weight: bold; margin: 0 auto 4rem; }
.loading { display: none; z-index: 2;  }
.loading .inner { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; }

@media screen and (max-width:768px) {
  .header { top: 5vw; }
  .header .name { width: 180px;  }
  .header .name span { font-size: .75rem; }
  .opening .title { width: 60vw;margin: 0 auto 3rem;}
}

.result-conts { display: none; }
.result-conts .inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.result-conts .result { font-size: 3.5vw; height: 70vh; writing-mode: vertical-rl; width: fit-content; line-height: 2; font-family: "Zen Old Mincho", serif; }

.input {  display: flex; align-items: center; justify-content: center; text-align: center; }
.input input[type="text"] { background: #f7f8f8; font-size: 1.2rem; padding: 1em; width: 730px; max-width: 90%; border: none; appearance: none;  }



  :root{
    --size: 135px;       /* 全体の大きさ */
    --ring-count: 4;     /* 同時に見えるリング数 */
    --duration: 2.8s;    /* 1リングのアニメーション時間 */
    --color: #b5b5b6;
  }

  .ripple-wrap{
    width:var(--size);
    height:var(--size);
    position:relative;
    border-radius:50%;
    overflow:visible; /* リングが外に出るので visible に */
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 55px; 
  }

  /* 各リング */
  .ripple-wrap span{
    position:absolute;
    left:50%;
    top:50%;
    width:100%;
    height:100%;
    transform-origin:center;
    transform:translate(-50%,-50%) scale(0);
    border-radius:50%;
    box-sizing:border-box;
    background: #b5b5b6;
    opacity:0;
    animation-name:ripple;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    z-index:1;
    pointer-events:none;
  }

  .ripple-wrap span:nth-child(1){ animation-duration: var(--duration); animation-delay: 0s; }
  .ripple-wrap span:nth-child(2){ animation-duration: var(--duration); animation-delay: calc(var(--duration) / var(--ring-count) * -1); }
  .ripple-wrap span:nth-child(3){ animation-duration: var(--duration); animation-delay: calc(var(--duration) / var(--ring-count) * -2); }
  .ripple-wrap span:nth-child(4){ animation-duration: var(--duration); animation-delay: calc(var(--duration) / var(--ring-count) * -3); }

  @keyframes ripple{
    /* scale: 0 -> 1.6 (少し大きめ) ; opacity: 1 -> 0 */
    0%{
      transform:translate(-50%,-50%) scale(0.05);
      opacity:0.95;
      border-width:3px;
      filter: blur(0px);
    }
    60%{
      opacity:0.6;
      border-width:2px;
      filter: blur(0.5px);
    }
    100%{
      transform:translate(-50%,-50%) scale(1.6);
      opacity:0;
      border-width:1px;
      filter: blur(2px);
    }
  }

  /* 小さい画面用に縮小 */
  @media (max-width:420px){
    :root{ --size:160px; --duration:2.1s; }
  }


.download-btn { position: absolute; text-align: center; right: 5%; bottom:3vw; margin: auto; background: none; border: none; cursor: pointer; }
.download-btn img { display: block; margin-bottom: 1em; }