/* common */
body {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    background: url(../images/back_pc.jpg) repeat-y fixed top center / 100%;
}

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

.sp_only { display: none;}

.sec {
    width: 100%;
    background: rgb(255,249,75);
    background: rgb(255,249,75);
    background: rgb(255,249,75);
    background: linear-gradient(135deg, rgba(255,249,75,1) 0%, rgba(255,249,75,1) 12%, rgba(255,255,255,1) 12%, rgba(255,255,255,1) 88%, rgba(255,250,103,1) 88%, rgba(255,249,75,1) 100%);
    padding: 7%;
    position: relative;
    box-shadow: 0.8em 0.8em 0 #d35e02;
    margin-bottom: 30%;
}

.sec::before {
    content: "";
    display: block;
    position: absolute;
    width: 38%;
    aspect-ratio: 440 / 157;
    left: calc(50% - 19%);
    background: url(../images/handle.png) no-repeat center / 100%;
    z-index: -5;
}


#page_top {
    position: fixed;
    width: 5.5%;
    right: 3%;
    bottom: 3%;
    z-index: 50;
}

#page_top img { width: 100%;}

picture { display: block;}

.movie {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
 }

.tvo-video {
    position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     right: 0;
}
/* common */


/* koyabu_top */
#koyabu_top { 
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 128 / 59;
    background: url(../images/top_img_pc.jpg) no-repeat top center / 100%;
    position: relative;
}

#koyabu_top .top_wrapper {
    max-width: 1920px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: calc(50% - 50%);
    padding-bottom: 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#koyabu_top h1 {
    width: 43%;
    margin-bottom: 1%;
}

#koyabu_top p { width: 42%;}

#koyabu_top h1 img,
#koyabu_top p img { width: 100%;}

#koyabu_top .top_obi {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 5%;
    background: url(../images/obi_pattern.jpg) repeat-x top center / contain;
}
/* koyabu_top */


/* intro */
#intro::before { top: -10.4%;}

#intro .movie { margin: 0 auto 3% auto;}

#intro > p {
    width: 100%;
    text-align: center;
    margin-bottom: 3%;
}

#intro > p img { width: 47%;}

#intro .intro_copy { position: relative;}

#intro .intro_copy p { 
    z-index: 5;
    width: 92%;
    position: relative;
    left: calc(50% - 46%);
}

#intro .intro_copy p img { width: 100%;}

#intro .intro_img {
    position: absolute;
    width: 30%;
    top: 10%;
}

#intro .intro_img:nth-of-type(1) { left: -22%;}

#intro .intro_img:nth-of-type(2) { right: -22%;}
/* intro */


/* location */
#location {
    width: 100%;
    position: relative;
    margin-bottom: 40% !important;
}

#location::before { top: -10.65%;}

#location p:nth-of-type(1) {
    position: absolute;
    width: 50%;
    top: 3%;
    left: calc(50% - 25%);
}

#location .location_mainimg { 
    width: 100%;
    margin-top: 4%;
}

#location ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 4%;
}

#location img { width: 100%;}

/* location */


/* episode */
#episode h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 3%;
}

#episode .sec::before { top: -10.3%;}

#episode .sec:last-of-type { margin-bottom: 20%;}

#episode h2 img { width: 48%;}

#episode img { width: 100%;}

#episode p {
    width: 100%;
    font-size: 1.1vw;
    line-height: 1.7;
    text-align: justify;
}

#episode .ep_txt, #episode ul { margin-top: 2.5%;}

#episode .img_l {
    width: 25%;
    float: left;
}

#episode .img_r {
    width: 20%;
    float: right;
}

#episode .clear_both { clear: both;}

#episode ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
/* episode */

/* spot */
#spot { position: relative;}

#spot h2 {
    position: absolute;
    width: 100%;
    top: -25%;
    left: calc(50% - 50%);
    text-align: center;
}

#spot h2 img { width: 80%;}

#spot h3 {
    width: 100%;
    text-align: center;
    font-family: "ruika", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 2.5vw;
    margin-bottom: 2%;
    position: relative;
}

#spot h3::before,
#spot h3::after {
    position: absolute;
    content: "";
    display: block;
    width: 4%;
    aspect-ratio: 1 / 1;
    top: 15%;
}

#spot h3::before { background: url(../images/ttl_deco_l.png) no-repeat top center / 100%;}

#spot h3::after { background: url(../images/ttl_deco_r.png) no-repeat top center / 100%;}

#spot section:nth-of-type(1) h3::before { left: 8%;}
#spot section:nth-of-type(1) h3::after { right: 8%;}
#spot .sec:nth-of-type(1)::before { top: -15.6%;}

#spot section:nth-of-type(2) h3::before { left: 30%;}
#spot section:nth-of-type(2) h3::after { right: 30%;}
#spot .sec:nth-of-type(2)::before { top: -15.6%;}

#spot section:nth-of-type(3) h3::before { left: 35%;}
#spot section:nth-of-type(3) h3::after { right: 35%;}
#spot .sec:nth-of-type(3)::before { top: -16.7%;}
#spot .sec:nth-of-type(3) .spot_subimg li:nth-child(1) { 
    top: 50%;
    left: 85%;
}

#spot section:nth-of-type(4) h3::before { left: 28%;}
#spot section:nth-of-type(4) h3::after { right: 28%;}
#spot .sec:nth-of-type(4)::before { top: -16.3%;}

#spot section:nth-of-type(5) h3::before { left: 13%;}
#spot section:nth-of-type(5) h3::after { right: 13%;}
#spot .sec:nth-of-type(5)::before { top: -16%;}

#spot section:nth-of-type(6) h3::before { left: 31%;}
#spot section:nth-of-type(6) h3::after { right: 31%;}
#spot .sec:nth-of-type(6)::before { top: -15.6%;}

#spot section:nth-of-type(6) h3::before { left: 31%;}
#spot section:nth-of-type(6) h3::after { right: 31%;}
#spot .sec:nth-of-type(6)::before { top: -15.6%;}

#spot section:nth-of-type(7) h3::before { left: 35%;}
#spot section:nth-of-type(7) h3::after { right: 35%;}
#spot .sec:nth-of-type(7)::before { top: -17.5%;}

#spot .spot_subimg li {
    position: absolute;
    width: 28%;
}

#spot .spot_subimg li img  { width: 100%;}

#spot .spot_subimg li:nth-child(1) { 
    top: 12%;
    left: -12%;
}

#spot .spot_subimg li:nth-child(2) { 
    top: 50%;
    right: -12%;
}

#spot .spot_mainimg { 
    width: 100%;
    margin-bottom: 3%;
}

#spot .spot_info {
    width: 100%;
    text-align: center;
    font-size: 1.2vw;
}

#spot .spot_info li { margin-bottom: 1.5%;}

#spot .spot_info li:last-child { margin-bottom: 0;}
/* spot */


/* tver */
#tver img {
    display: block;
    width: 50%;
    margin: 0 auto;
}

#tver a {
    display: block;
    width: 50%;
    margin: 0 auto;
    transition: all .3s;
}

#tver a:hover { transform: translateY(-7%);}

#tver a img { width: 100%;}
/* tver */






/* ---------------------------------------------- responsive ---------------------------------------------- */
@media (max-width: 767px) {

    /* common */
    body { background: url(../images/back_sp.jpg) repeat-y fixed top center / 100%;}

    .wrapper { 
        width: 80%;
        padding: 25% 0;
    }

    .sp_only { display: block;}

    .sec { margin-bottom: 40%;}

    .sec::before {
        width: 60%;
        top: -15.3%;
        left: calc(50% - 30%);
    }

    #page_top {
        width: 13%;
        right: 1%;
        bottom: 1%;
    }
    /* common */


    /* koyabu_top */
    #koyabu_top {
        aspect-ratio: 321 / 440;
        background: url(../images/top_img_sp.jpg) no-repeat top center / 100%;
    }

    #koyabu_top h1 { width: 85%;}

    #koyabu_top p { width: 80%;}

    #koyabu_top .top_wrapper { 
        justify-content: flex-end;
        padding-bottom: 14%;
    }

    #koyabu_top .top_obi { padding-top: 10%;}
    /* koyabu_top */


    /* intro */
    #intro::before { top: -10.3%;}

    #intro > p { margin-bottom: 5%;}

    #intro > p img { width: 80%;}

    #intro .movie { margin: 0 auto 5% auto;}

    #intro .intro_img { display: none;}

    #intro .intro_copy p {
        width: 100%;
        left: calc(50% - 50%);
    }
    /* intro */


    /* location */
    #location { margin-bottom: 70% !important;}

    #location::before { top: -14.5%;}

    #location .location_mainimg { margin-top: 12%;}

    #location p:nth-of-type(1) {
        width: 80%;
        top: 4%;
        left: calc(50% - 40%);
    }

    #location ul { margin-bottom: 5%;}
    /* location */


    /* episode */
    #episode .sec:last-of-type { margin-bottom: 30%;}

    #episode h2 { margin-bottom: 6%;}

    #episode h2 img { width: 90%;}

    #episode .sec:nth-of-type(1)::before { top: -9.6%;}

    #episode .sec:nth-of-type(2)::before { top: -9.9%;}

    #episode p { font-size: 3.1vw;}

    #episode .img_l { width: 42%;}

    #episode .img_r { width: 33%;}

    #episode .ep_txt, #episode ul { margin-top: 5%;}

    #episode ul { grid-template-columns: repeat(2, 1fr);}
    /* episode */


    /* spot */
    #spot h2 { top: -27%;}

    #spot h2 img { width: 100%;}

    #spot h3 { 
        font-size: 4.3vw;
        margin-bottom: 5%;
    }

    #spot h3::before, #spot h3::after {
        width: 7%;
        top: 5%;
    }

    #spot section:nth-of-type(1) h3::before { left: -5%;}
    #spot section:nth-of-type(1) h3::after { right: -5%;}
    #spot .sec:nth-of-type(1)::before { top: -17.5%;}

    #spot section:nth-of-type(2) h3::before { left: 22%;}
    #spot section:nth-of-type(2) h3::after { right: 22%;}
    #spot .sec:nth-of-type(2)::before { top: -18.3%;}

    #spot section:nth-of-type(3) h3::before { left: 29%;}
    #spot section:nth-of-type(3) h3::after { right: 29%;}
    #spot .sec:nth-of-type(3)::before { top: -21.7%;}
    #spot .sec:nth-of-type(3) .spot_subimg li:nth-child(1) {
        top: 40%;
        left: 79%;
    }

    #spot section:nth-of-type(4) h3::before { left: 19%;}
    #spot section:nth-of-type(4) h3::after { right: 19%;}
    #spot .sec:nth-of-type(4)::before { top: -19.6%;}

    #spot section:nth-of-type(5) h3::before { left: 0;}
    #spot section:nth-of-type(5) h3::after { right: 0;}
    #spot .sec:nth-of-type(5)::before { top: -19.2%;}

    #spot section:nth-of-type(6) h3::before { left: 24%;}
    #spot section:nth-of-type(6) h3::after { right: 24%;}
    #spot .sec:nth-of-type(6)::before { top: -18.2%;}
    #spot .sec:nth-of-type(6) .spot_subimg li:nth-child(2) { top: 32%;}

    #spot section:nth-of-type(7) h3::before { left: 29%;}
    #spot section:nth-of-type(7) h3::after { right: 29%;}
    #spot .sec:nth-of-type(7) .spot_subimg li:nth-child(2) { top: 43%;}
    #spot .sec:nth-of-type(7)::before { top: -24%;}

    #spot .spot_subimg li { width: 33%;}

    #spot .spot_subimg li:nth-child(2) { top: 35%;}

    #spot .spot_info {
        font-size: 3.5vw;
        line-height: 1.3;
    }

    #spot .spot_info li { margin-bottom: 3%;}

    #spot .spot_info li br { display: block;}

    #spot .spot_info li span {
        font-size: 100%;
        margin-right: 1.5%;
    }
    /* spot */


    /* tver */
    #tver img, #tver a { width: 85%;}
    /* tver */

}