@charset "utf-8";

html{
    background: #f5f5f5;
    font-size:62.5%;
}

body{
    margin: 0;
}

section{
    margin: 6rem auto 10rem;
}

.top-section{
    margin-top: 0;
}

h2{
    text-align: center;
    margin-bottom: 5rem;
    letter-spacing: 0.5rem;
}

a{
    text-decoration: none;
    color: #000;
}

ul{
    padding: 0;
}

ul li{
    list-style-type: none;
}


/*loadingアニメーション*/
.loader-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center; /* ローダー内を中央に配置 */
    align-items: center;
    height: 100vh;
}


.hidden{
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease; /* フェードインのトランジション */
}


.loader {
    width: 40px;
    height: 20px;
    --c:no-repeat radial-gradient(farthest-side,#000 93%,#0000);
    background:
      var(--c) 0    0,
      var(--c) 50%  0,
      var(--c) 100% 0;
    background-size: 8px 8px;
    position: relative;
    animation: l4-0 1s linear infinite alternate;
}

.loader:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 12px;
    background: #000;
    left: 0;
    top: 0;
    animation: 
      l4-1 1s  linear infinite alternate,
      l4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}

@keyframes l4-0 {
    0%      {background-position: 0  100%,50% 0   ,100% 0}
    8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
    50%     {background-position: 0  0   ,50% 100%,100% 0}
    58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
    100%    {background-position: 0  0   ,50% 0   ,100% 100%}
}

@keyframes l4-1 {
    100% {left:calc(100% - 8px)}
}

@keyframes l4-2 {
    100% {top:-0.1px}
}