/* ------------------- common ------------------- */
body { 
    font-family: 'Noto Sans JP', sans-serif;
    background: url(../images/back.jpg) repeat-y fixed top center / 100%;
}

picture { display: block;}

.pc_only { display: block;}

.sp_only { display: none;}

.wrapper {
    max-width: 1152px;
    width: 60%;
    margin: 0 auto;
    padding: 5% 0 30% 0;
}

#content {
    overflow: hidden;
    background: url(../images/cycle_bottom_bk.png) no-repeat bottom -2.5% center / 110%;
}

#page section { margin-bottom: 15%;}

#page section:last-of-type { margin-bottom: 0;}

#page section h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 4%;
}

#page section h2 img { width: 78%;}

#page section h3 {
    text-align: center;
    font-size: 1.7vw;
    font-weight: 700;
    margin-bottom: 4%;
    position: relative;
}

#page section h3::before,
#page section h3::after {
    position: absolute;
    content: "";   
    display: flex;
    width: 29%;
    height: 1px;
    border-bottom: dotted 1px #000;
    top: calc(50% - 1px);
}

#page section h3::before { left: 15%;}

#page section h3::after { right: 15%;}

#page section .description {
    width: 100%;
    text-align: center;
    font-size: 1.3vw;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.05em;
}

#page-top {
    position: fixed;
    width: 6.5%;
    padding-top: 6.5%;
    background: url(../images/pagetop.png) no-repeat center / 100%;
    bottom: 5%;
    right: 2%;
}

#page-top:hover { background: url(../images/pagetop_hover.png) no-repeat center / 100%;}

/* ------------------- common ------------------- */


/* ------------------- cycle_onigokko_top ------------------- */
#cycle_onigokko_top {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: url(../images/top_bk_pc.png) no-repeat top center / 100%;
    position: relative;
}

#cycle_onigokko_top .wrapper {
    position: absolute;
    top: 0;
    left: calc(50% - 30%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 竊添ouTube繝ｪ繝ｳ繧ｯ縺後ｏ縺九▲縺溘ｉ縺薙�繧ｳ繝｡繝ｳ繝医い繧ｦ繝医ｒ蛻ｩ逕ｨ竊� */
    padding: 1% 0 !important;
    /* padding: 10% 0 !important; */
}

#cycle_onigokko_top h1 { 
    width: 72%;
    margin-bottom: 1%;
}

#cycle_onigokko_top .time { 
    width: 54%;
    margin-bottom: 4%;
}

#cycle_onigokko_top a { 
    display: block;
    margin-bottom: 3%;
    transition: all .2s;
}

#cycle_onigokko_top a:hover { opacity: .7;}

#cycle_onigokko_top a,
#cycle_onigokko_top ul { width: 80%;}

#cycle_onigokko_top ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#cycle_onigokko_top ul li { width: 47%;}

#cycle_onigokko_top ul li a,
#cycle_onigokko_top img { width: 100%;}
/* ------------------- cycle_onigokko_top ------------------- */


/* ------------------- cast ------------------- */
#cast ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3.5em;
}

#cast ul li a {
    display: block;
    width: 20%;
    transition: all .2s;
    margin: 5.5% auto 0 auto;
}

#cast ul li a:hover { opacity: .7;}

#cast ul li img { width: 100%;}

#cast .gender { margin-bottom: 10%;}

#cast .narration {
    width: 100%;
    text-align: center;
    font-size: 1.7vw;
    font-weight: 700;
}

#cast .narration span:first-of-type { font-size: 70%;}

#cast .narration span:last-of-type { font-size: 60%;}

/* ------------------- cast ------------------- */


/* ------------------- rule ------------------- */
#rule .cycle_mode { margin-top: 8%;}

#rule .cycle_mode p:first-of-type {
    width: 100%;
    text-align: center;
    font-size: 1vw;
    font-weight: 700;
    margin-bottom: 1%;
}

#rule .cycle_mode p:last-of-type {
    width: 100%;
    text-align: center;
    margin-bottom: 5%;
}

#rule .cycle_mode p:last-of-type img { width: 63%;}

#rule ul {
    width: 34%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#rule ul li { 
    width: 20%;
    transition: all .2s;
}

#rule ul li img { width: 100%;}

#rule ul li:hover { opacity: .7;}
/* ------------------- rule ------------------- */






/* =========================================== responsive =========================================== */

@media (max-width: 767px) {
   /* ------------------- common ------------------- */ 
   .pc_only { display: none;}

   .sp_only { display: block;}

   .wrapper { padding: 15% 0 45% 0;}

   .wrapper, #page section h2 img { width: 100%;}

   #page { background: url(images/back.jpg) no-repeat top center / cover !important;}

   #page section h3 { font-size: 6.2vw;}

   #page section h3::before { left: 8%;}

   #page section h3::after { right: 8%;}

   #page section .description {
        font-size: 3.8vw;
        line-height: 1.5;
        text-align: justify;   
        width: 90%; 
        margin: 0 auto;
   }

   #content { background: url(../images/cycle_bottom_bk.png) no-repeat bottom -1% center / 200%;}
   /* ------------------- common ------------------- */ 


   /* ------------------- cycle_onigokko_top ------------------- */
   #cycle_onigokko_top {
    /* 竊添ouTube繝ｪ繝ｳ繧ｯ縺後ｏ縺九▲縺溘ｉ縺薙�繧ｳ繝｡繝ｳ繝医い繧ｦ繝医ｒ蛻ｩ逕ｨ竊� */
        aspect-ratio: 1 / 2.18;
        /* aspect-ratio: 1 / 1.3; */
        background: url(../images/top_bk_sp.png) no-repeat top center / 100%;
   }

   #cycle_onigokko_top .wrapper { 
        left: calc(50% - 50%);
        padding: 15% 0 !important;
   }

   #cycle_onigokko_top h1 { width: 90%;}

   #cycle_onigokko_top .time { 
        width: 80%;
        margin-bottom: 38%;
    }

    #cycle_onigokko_top a { margin-bottom: 5%;}

   #cycle_onigokko_top ul { width: 70%;}

   #cycle_onigokko_top ul li { width: 100%;}

   #cycle_onigokko_top ul li:first-child { margin-bottom: 4%;}

   /* ------------------- cycle_onigokko_top ------------------- */


   /* ------------------- cast ------------------- */
   #cast ul {
        width: 65%;
        margin: 0 auto;
        grid-template-columns: 1fr;
   }

   #cast .narration { font-size: 5vw;}
   /* ------------------- cast ------------------- */


   /* ------------------- rule ------------------- */
   #rule .cycle_mode { margin-top: 15%;}

   #rule .cycle_mode p:last-of-type img { width: 90%;}

   #rule .cycle_mode p:first-of-type {
        font-size: 3.3vw;
        margin-bottom: 2%;
    }

    #rule ul { width: 65%;}
   /* ------------------- rule ------------------- */
}