/*---------------------------------------
Header
-------------------------------*/
header {
    max-width: 1000px;
}


/*---------------------------------------
Main
-------------------------------*/
/*-- 全体 --*/
.videobox {
    background-color: #2b2b2b;
}

.title h2 {
    display: inline-block;
    color: #7cbfd6;
    background-color: #2b2b2b;
    margin-bottom: 1.25%;
    padding: 1.25%;
}

.title p {
    color: #2b2b2b;
    font-weight: 600;
    margin-bottom: 2.5%;
}


/*-- mv --*/
#mv {
    background-color: #ffffff;
    padding: 5% 0 0 0;
}

#mv h1 {
    display: flex;
    justify-content: center;
    padding-bottom: 2.5%;
}

#mv h1 img {
    width: 10%;
}

#mv .box_1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    writing-mode: vertical-rl;
    width: 100%;
    padding-bottom: 5%;
}

#mv .box_1 h2 {
    color: #2b2b2b;
}

#mv .box_2 {
    display: flex;
}

#mv .box_2 img {
    width: calc(100%/5)
}


/*-- ol --*/
#ol {
    margin-bottom: 5%;
    padding: 5% 2.5% 2.5% 2.5%;
}

#ol .ol_title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#ol .ol_title h2 {
    display: inline;
    margin-bottom: 1.25%;
    padding: 1.25%;
    color: #7cbfd6;
    background-color: #2b2b2b;
}

#ol .ol_title p {
    width: 100%;
    text-align: center;
    font-weight: 600;
    color: #ffffff;
    padding-bottom: 1.25%;
}

#ol .box_1 {
    display: flex;
    background-color: #2b2b2b;
    padding: 5% 5% 2.5% 5%;
}

#ol .box_1 .info {
    width: calc(100%/4);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#ol .box_1 .info h3 {
    color: #7cbfd6;
    margin-bottom: 5%;
}

#ol .box_1 .info p {
    width: 100%;
    text-align: center;
}

#ol .box_2 {
    background-color: #ffffff;
    padding: 5% 5% 2.5% 5%;
}

#ol .box_2 h4 {
    color: #2b2b2b;
    border-bottom: #2b2b2b solid 0.05rem;
    margin-bottom: 2.5%;
    padding-bottom: 1.25%;
}

#ol .box_2 p {
    line-height: 1.5;
    color: #2b2b2b;
    font-weight: 400;
    padding-bottom: 2.5%;
}

#ol .box_2 .signature {
    text-align: right;
}


/*-- class --*/
#class {
    margin-bottom: 5%;
    padding: 5% 2.5% 2.5% 2.5%;
}

#class .infos {
    background-color: #ffffff;
    padding: 5% 5% 3.75% 5%;
}

#class .infos .info {
    display: flex;
    align-items: center;
    padding: 1.25% 0 1.25% 0;
}

#class .infos h3 {
    color: #2b2b2b;
    border-bottom: #2b2b2b solid 0.05rem;
    margin-bottom:  1.25%;
    padding-bottom: 1.25%;
}

#class .infos .info h4 {
    display: inline-block;
    color: #ffffff;
    background-color: #2b2b2b;
    font-weight: 400;
    padding: 1.25%;
    margin-right: 2.5%;
}

#class .infos .info p {
    color: #2b2b2b;
}


/*-- style --*/
#style {
    margin-bottom: 5%;
    padding: 5% 2.5% 2.5% 2.5%;
}

#style .text {
    background-color: #ffffff;
    padding: 5% 5% 2.5% 5%;
}

#style .text h3 {
    color: #2b2b2b;
    border-bottom: #2b2b2b solid 0.05rem;
    margin-bottom: 2.5%;
    padding-bottom: 1.25%;
}

#style .text p {
    line-height: 1.5;
    color: #2b2b2b;
    border: none;
    font-weight: 400;
    margin: 0;
    padding-bottom: 2.5%;
}


/*-- tool --*/
#tool {
    margin-bottom: 5%;
    padding: 5% 2.5% 2.5% 2.5%;
}

#tool .infos {
    display: flex;
    background-color: #2b2b2b;
    padding: 2.5% 10% 2.5% 10%;
}

#tool .infos .info {
    display: flex;
    justify-content: center;
    width: 100%;
}

#tool .infos .info img {
    width: 20%;
}

#tool .text {
    background-color: #ffffff;
    padding: 5% 5% 2.5% 5%;
}

#tool .text h3 {
    color: #2b2b2b;
    border-bottom: #2b2b2b solid 0.05rem;
    margin-bottom: 2.5%;
    padding-bottom: 1.25%;
}

#tool .text p {
    line-height: 1.5;
    color: #2b2b2b;
    border: none;
    font-weight: 400;
    margin: 0;
    padding-bottom: 2.5%;
}


/*-- item --*/
#item {
    margin-bottom: 5%;
    padding: 5% 2.5% 2.5% 2.5%;
}

#item .infos {
    display: flex;
    background-color: #2b2b2b;
    padding: 5% 10% 2.5% 10%;
}

#item .infos .info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: end;
    width: 50%;
}

#item .infos .info img {
    width: 20%;
    filter: brightness(0) invert(1);
    padding-bottom: 5%;
}

#item .infos .info h3 {
    width: 100%;
    display: inline-block;
    text-align: center;
    color: #ffffff;
}

#item .text {
    background-color: #ffffff;
    padding: 5% 5% 2.5% 5%;
}

#item .text h3 {
    color: #2b2b2b;
    border-bottom: #2b2b2b solid 0.05rem;
    margin-bottom: 2.5%;
    padding-bottom: 1.25%;
}

#item .text p {
    line-height: 1.5;
    color: #2b2b2b;
    border: none;
    font-weight: 400;
    margin: 0;
    padding-bottom: 2.5%;
}


/*-- follow --*/
#follow {
    margin-bottom: 5%;
    padding: 5% 2.5% 2.5% 2.5%;
}

#follow .videobox {
    position: relative;
}

#follow .videobox .comeon {
    position: absolute;
    width: 100%;
    top: 125%;
    left: 60%;
    transform: rotate(20deg);
}

#follow .videobox .comeon img {
    width: 30%;
}

#follow .videobox .kira_1 {
    position: absolute;
    top: 33%;
    left: 77%;
    transform: rotate(-20deg);
}

#follow .videobox .kira_1 img {
    width: 44%;
}

#follow .videobox .kira_2 {
    position: absolute;
    top: 44%;
    left: 66%;
    transform: rotate(-20deg);
}

#follow .videobox .kira_2 img {
    width: 33%;
}

#follow .infos {
    display: flex;
    background-color: #2b2b2b;
    padding: 2.5% 10% 2.5% 10%;
}

#follow .infos .info {
    display: flex;
    justify-content: center;
    width: 100%;
}

#follow .infos .info img {
    width: 20%;
}

#follow .text {
    background-color: #ffffff;
    padding: 5% 5% 2.5% 5%;
}

#follow .text h3 {
    color: #2b2b2b;
    border-bottom: #2b2b2b solid 0.05rem;
    margin-bottom: 2.5%;
    padding-bottom: 1.25%;
}

#follow .text p {
    line-height: 1.5;
    color: #2b2b2b;
    border: none;
    font-weight: 400;
    margin: 0;
    padding-bottom: 2.5%;
}


/*-- works --*/
#works {
    margin-bottom: 5%;
    padding: 5% 2.5% 2.5% 2.5%;
}

#works .infos {
    padding: 0;
}

#works .infos .info {
    border: 0.05rem #7cbfd6 solid;
    background-color: #ffffff;
    margin-bottom: 2.5%;
}

#works .infos .info h3 {
    display: inline-block;
    background-color: #2b2b2b;
    color: #ffffff;
    margin: 5% 0 0 5%;
    padding: 1.25%;
}

#works .infos .info .box {
    padding: 2.5% 5% 2.5% 5%;
}

#works .infos .info .box h4 {
    color: #2b2b2b;
    border-bottom: 0.05rem #2b2b2b solid;
    margin-bottom: 1.25%;
    padding-bottom: 1.25%;
}

#works .infos .info .box span {
    color: #2b2b2b;
}

#works .infos .info .box p {
    color: #2b2b2b;
    line-height: 1.5;
    border: none;
    font-weight: 400;
    margin: 0;
}


/*-- youtube --*/
#youtube {
    margin-bottom: 5%;
    padding: 5% 2.5% 2.5% 2.5%;
}

#youtube .youtubebox {
    background-color: #2b2b2b;
    width: 100%;
    aspect-ratio: 16 / 9;
}
#youtube .youtubebox iframe {
    width: 100%;
    height: 100%;
}


/*-- navi --*/
#navi {
    margin-bottom: 5%;
    padding: 5% 2.5% 2.5% 2.5%;
}

#navi a {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5%;
}

#navi a p {
    color: #3c3c3c;
    background-color: #fff67f;
    width: 100%;
    text-align: center;
    border-radius: 0.5rem;
    padding: 5% 0 5% 0;
}


/*-- style_icons --*/
#style_icons {
    padding: 2.5% 10% 7.5% 10%;
}

#style_icons .infos {
    display: flex;
}

#style_icons .infos .info_1,
#style_icons .infos .info_2,
#style_icons .infos .info_3 {
    display: flex;
    justify-content: center;
    align-items: end;
    width: calc(100% / 3);
}

#style_icons .infos .info_1 img {
    z-index: 1;
    width: 33%;
}

#style_icons .infos .info_2 img {
    z-index: 1;
    width: 55%;
}

#style_icons .infos .info_3 img {
    z-index: 1;
    width: 77%;
}


/*---------------------------------------
Animation
-------------------------------*/
.none {
     opacity: 0;
}

.green {
    z-index: 1;
    transform: translateX(200%);
    animation: slideGreen 1s ease forwards;
}
@keyframes slideGreen {
    0% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(0);
    }
}

.yellow {
    z-index: 2;
    transform: translateX(100%);
    animation: slideYellow 1s ease forwards;
}
@keyframes slideYellow {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.black {
    z-index: 3;
}

.red {
    z-index: 2;
    transform: translateX(-100%);
    animation: slideRed 1s ease forwards;
}
@keyframes slideRed {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

.blue {
    z-index: 1;
    transform: translateX(-200%);
    animation: slideBlue 1s ease forwards;
}
@keyframes slideBlue {
    0% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Bigger */
.off_bigger {
    transform: scale(0);
}
.bigger {
    animation: bigger 0.6s ease-in-out forwards;
}
@keyframes bigger {
    0% {
      transform: scale(0);
    }
    33% {
        transform: scale(0);
    }
    66% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}