@charset "UTF-8";

/* ---------------------------------------
メインビジュアル（PC）
--------------------------------------- */
@media (min-width: 1024px){
    .main_v_wrapper{
        display: flex;
        justify-content: center;
        margin: 10% 0 10% 0;
    }
    .main_typo{
        height: max-content;
        font-size: 36px;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        line-height: 72px;
        margin-left: -5%;
    }
    .line2{
        margin-top: 70px;
    }
    #main_v_img{
        width: 250px;
        padding: 10% 0 0 5%;
    }
    #main_v_img img{
        width: 100%;
    }
    @keyframes horizontal{
        0% { transform:translateX(10px); }
        100% { transform:translateX(0px); }
    }

    @keyframes vertical{
        0% { transform:translateY(40px); }
        100% { transform:translateY(0px); }
    }

    #kirakira{
        width: 7%;
        animation: vertical 2s ease-in-out infinite alternate;
        animation-duration: 2s;
        overflow: hidden;
        margin: -5% 0 0 -12%;
    }
    #kirakira img{
        width: 100%;
    }
    .main_read{
        text-align: center;
        padding-top: 490px;
        font-size: 1.05em;
    }
}

/* ---------------------------------------
メインビジュアル（SP）
--------------------------------------- */
@media (max-width: 1024px){
    .main_v_wrapper{
        display: flex;
        justify-content: center;
        margin: 40% 0 20% 0;
    }
    #main_v_img{
        width: 30%;
        padding: 35% 0 0 5%;
    }
    #main_v img{
        width: 100%;
    }
    .main_typo{
        height: max-content;
        font-size: 1.5em;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        line-height: 40px;
        margin-left: -10%;
    }
    .line2{
        margin-top: 40px;
    }

    @keyframes vertical{
        0% { transform:translateY(10%); }
        100% { transform:translateY(0px); }
    }
    #kirakira{
        width: 14%;
        animation: vertical 1.5s ease-in-out infinite alternate;
        animation-duration: 1.5s;
        /* overflow: hidden; */
        margin: -5% 0 0 -20%;
    }
    #kirakira img{
        animation: horizontal 1.5s ease-in-out infinite alternate;
        animation-duration: 1.5s;
        width: 100%;
    }
}

/* ---------------------------------------
メイン（PC）
--------------------------------------- */
@media (min-width: 1024px){
    #yoshinani{
        margin-top: 8%;
    }
    .yoshinani1, .yoshinani2{
        display: flex;
        margin-top: 6%;
    }
    .yoshinani1 .yoshinani_img{
        width: 45%;
        background: url( "../img/create/yoshina1_pc.jpg" ) no-repeat;
        background-position: center;
        background-size: 100%;
    }
    .yoshinani1 .yoshinani_txt{
        margin-left: 5%;
        width: 490px;
    }
    .yoshinani_txt h3{
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 2.5%;
    }
    .yoshinani_txt h3{
        color: #000;
    }
    .yoshinani2{
        justify-content: end;
    }
    .yoshinani2 .yoshinani_img{
        width: 45%;
        background: url( "../img/create/yoshina2_pc.jpg" ) no-repeat;
        background-position: center;
        background-size: 100%;
    }
    .yoshinani2 .yoshinani_txt{
        margin-right: 5%;
        width: 490px;
    }
    .fluid_wrapper_top{
        margin-top: 8%;
    }
    #nendo{
        margin-top: 10%;
    }
    #nendo .h2{
        margin-bottom: 5%;
    }
    .nendo_txt{
        background: url( "../img/create/nendo_pc.jpg" ) no-repeat;
        background-position: center;
        background-size: 100%;
    }
    .nendo_cover{
        background: rgba(255,255,255,0.7);
    }
    .nendo_txt p{
        width: 960px;
        margin: 0 auto;
    }
    .nendo_txt p:first-child{
        padding: 45px 0 45px;
    }
    .nendo_txt p{
        padding:  0 0 45px;
    }
}

/* ---------------------------------------
メイン（SP）
--------------------------------------- */
@media (max-width: 1024px){
    #detail{
        padding: 0 10%;
    }
    #detail .h2_wrapper{
        margin-left: 0 !important;
    }
    #yoshinani{
        margin-top: 15%;
    }
    #yoshinani .h2, #nendo .h2{
        margin-bottom: 10%;
    }
    .yoshinani_img, .yoshinani_img img{
        width: 100%;
    }
    .yoshinani_txt{
        padding: 0 10%;
    }
    .yoshinani_txt h3{
        font-size: 1.2em;
        font-weight: bold;
        margin: 3% 0;
    }
    .yoshinani2{
        margin-top: 10%;
    }
    .fluid_wrapper_top{
        margin-top: 15%;
    }
    #nendo{
        margin-top: 15%;
    }
    .nendo_txt{
        background: url( "../img/create/nendo_sp.jpg" ) no-repeat;
        background-position: bottom;
        background-size: 100%;
    }
    .nendo_cover{
        background: rgba(255,255,255,0.8);
    }
    .nendo_txt p{
        padding: 0 10%;
    }
    .nendo_txt p:first-child{
        padding-top: 10%;
    }
    .nendo_txt p:last-child{
        padding-bottom:  10%;
    }
    .nendo_txt p:not(:last-child){
        padding-bottom:  3%;
    }
}