@keyframes move {
100% {
transform: translate3d(0, 0, 1px) rotate(360deg);
}
}

.background {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
z-index: -1;
}

.background span {
width: 7vmin;
height: 7vmin;
border-radius: 7vmin;
backface-visibility: hidden;
position: absolute;
animation: move;
animation-duration: 16;
animation-timing-function: linear;
animation-iteration-count: infinite;
}


.background span:nth-child(0) {
color: #ffffff;
top: 98%;
left: 18%;
animation-duration: 133s;
animation-delay: -313s;
transform-origin: 25vw -2vh;
box-shadow: 14vmin 0 2.3812326408068265vmin currentColor;
}
.background span:nth-child(1) {
color: #ffffff;
top: 16%;
left: 75%;
animation-duration: 298s;
animation-delay: -147s;
transform-origin: 5vw 6vh;
box-shadow: 14vmin 0 1.930954830304005vmin currentColor;
}
.background span:nth-child(2) {
color: #ffffff;
top: 95%;
left: 91%;
animation-duration: 162s;
animation-delay: -18s;
transform-origin: -7vw -15vh;
box-shadow: 14vmin 0 2.6622222759367715vmin currentColor;
}
.background span:nth-child(3) {
color: #ffffff;
top: 17%;
left: 100%;
animation-duration: 188s;
animation-delay: -303s;
transform-origin: -15vw 4vh;
box-shadow: -14vmin 0 2.3604309850142404vmin currentColor;
}
.background span:nth-child(4) {
color: #ffffff;
top: 5%;
left: 90%;
animation-duration: 80s;
animation-delay: -117s;
transform-origin: -17vw -7vh;
box-shadow: 14vmin 0 2.145551692779437vmin currentColor;
}
.background span:nth-child(5) {
color: #ffffff;
top: 15%;
left: 61%;
animation-duration: 182s;
animation-delay: -170s;
transform-origin: -20vw -13vh;
box-shadow: -14vmin 0 1.8207319062480707vmin currentColor;
}
.background span:nth-child(6) {
color: #ffffff;
top: 54%;
left: 20%;
animation-duration: 69s;
animation-delay: -51s;
transform-origin: 8vw 18vh;
box-shadow: 14vmin 0 2.719178263023673vmin currentColor;
}
.background span:nth-child(7) {
color: #ffffff;
top: 54%;
left: 5%;
animation-duration: 76s;
animation-delay: -137s;
transform-origin: -9vw 24vh;
box-shadow: 14vmin 0 1.8920584336295518vmin currentColor;
}
.background span:nth-child(8) {
color: #ffffff;
top: 83%;
left: 31%;
animation-duration: 114s;
animation-delay: -119s;
transform-origin: -23vw -5vh;
box-shadow: 14vmin 0 1.9346736978966308vmin currentColor;
}
.background span:nth-child(9) {
color: #ffffff;
top: 37%;
left: 32%;
animation-duration: 267s;
animation-delay: -81s;
transform-origin: 22vw -23vh;
box-shadow: 14vmin 0 2.3025932908738733vmin currentColor;
}
.background span:nth-child(10) {
color: #ffffff;
top: 67%;
left: 74%;
animation-duration: 229s;
animation-delay: -151s;
transform-origin: -12vw -11vh;
box-shadow: -14vmin 0 2.6675791255425763vmin currentColor;
}
.background span:nth-child(11) {
color: #ffffff;
top: 40%;
left: 26%;
animation-duration: 325s;
animation-delay: -319s;
transform-origin: -2vw -17vh;
box-shadow: -14vmin 0 2.1812265195371854vmin currentColor;
}
.background span:nth-child(12) {
color: #ffffff;
top: 56%;
left: 100%;
animation-duration: 111s;
animation-delay: -308s;
transform-origin: 14vw 2vh;
box-shadow: 14vmin 0 2.2048889647248964vmin currentColor;
}
.background span:nth-child(13) {
color: #ffffff;
top: 41%;
left: 88%;
animation-duration: 11s;
animation-delay: -216s;
transform-origin: 13vw 7vh;
box-shadow: -14vmin 0 1.9075243816976637vmin currentColor;
}
.background span:nth-child(14) {
color: #ffffff;
top: 5%;
left: 71%;
animation-duration: 323s;
animation-delay: -339s;
transform-origin: 19vw 19vh;
box-shadow: 14vmin 0 1.9219493955541767vmin currentColor;
}

@media screen and (max-width: 768px) {
.background {
display: none;
}
}


section {
overflow: hidden;
}

.cm-title {
display: flex; 
justify-content: center;
}
.cm-title h2 {
color: #e68888;
writing-mode: vertical-rl;
text-orientation: upright;
text-align: center; 
font-size: 3.2rem;
font-family: "Shippori Mincho", serif;
font-weight: 400;
font-style: normal;
}

.dec-year {
display: block;
text-align: center;
font-family: "Shippori Mincho", serif;
font-weight: 400;
}
.dec-year small {
padding-left: 3px;
font-family: "Shippori Mincho", serif;
font-weight: 400;
}
.dec-year::before {
content: "(";
display: inline;
}
.dec-year::after {
content: ")";
display: inline;
}
.lead {
font-size: 1.4rem;
}

.c-inner {
width: 86.6666%;
margin: 0 auto;
}
.vis {
position: relative;
}
.vis .cap {
position: absolute;
left: 0;
right: 0;
bottom: 15px;
text-align: center;
color: #fff;
font-size: 1.2rem;
letter-spacing: 0;
}


/*--------------------------------------------------------------------------
hirogari
---------------------------------------------------------------------------*/
.hirogari .history-swiper .swiper-slide {
position: relative;
}
.hirogari .history-swiper .swiper-slide .label {
display: flex;
padding: 0 10px;
position: absolute;
align-items: center;
height: 20px;
right: 10px;
bottom: 10px;
background: #fff;
font-size: 1rem;
line-height: 1;
border-radius: 100px;
}

/*--------------------------------------------------------------------------
header
---------------------------------------------------------------------------*/

header {
padding: 15px 0;
}

header a {
display: block;
width: 45px;
margin: 0 auto;
}


/*--------------------------------------------------------------------------
footer
---------------------------------------------------------------------------*/
footer {
background: #fafafa;
text-align: center;
}
footer .copy {
font-size: 1.3rem;
}
footer .icon {
width: 130px;
margin: 0 auto;
}
footer .banner {
}
footer .banner p {
font-size: 1.2rem;
}
footer .btn-top p {
display: flex;
}
footer .btn-top a {
display: inline-block;
padding-bottom: 5px;
font-size: 1.3rem;
justify-content: center;
background-image: linear-gradient(to right, #333 3px, transparent 1px);
background-size: 6px 1px;
background-repeat: repeat-x;
background-position: left bottom;
}


footer .copyright {
font-size: 1rem;
opacity: 0.7;
}