@charset "utf-8";

/*-------------------------*/
/*  base
/*-------------------------*/
:root,
:host {
    --white: #ffffff;
    --black: #000000;
    --main_text: #1b1a4b;
}

* {
    box-sizing: border-box;
    position: relative;
}

body {
    font-family: 'ヒラギノ角ゴ ProN', 'Noto Sans JP', sans-serif, "メイリオ", Meiryo, 'Kosugi Maru', sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    position: relative;
    line-height: 2.5;
    font-size: 14px;
    color: var(--main_text);
}

.inner {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

main .mv img {
    width: 100%;
}

.foot {
    width: 100%;
    font-size: 12px;
    text-align: center;
    margin-top: 80px;
}

/*-------------------------/*-------------------------*/
/*  pc  
/*-------------------------/*-------------------------*/
@media (min-width: 1156px) {

    main {
        background: #a4a3be;
        padding: 30px;
    }

    .main_bg {
        background: #f4f3f8;
        border-radius: 80px;
    }

    /*-------------------------*/
    /*  mv
    /*-------------------------*/
    .mv {
        padding-top: 10px;
    }

    /*-------------------------*/
    /*  about voisonia
    /*-------------------------*/
    .about,
    .voisonia {
        text-align: center;
        width: 100%;
    }

    .voisonia {
        margin-top: 1vw;
    }

    .about h2,
    .voisonia h2 {
        width: 100%;
        position: absolute;
    }

    .about .inner,
    .voisonia .inner {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 300px;
        font-size: clamp(13px, 1.2vw, 23px);
    }

    /*-------------------------*/
    /*  ichica
    /*-------------------------*/
    .ichica {
        background: url(../img/pc_ichica.png) no-repeat top left;
        background-size: contain;
        aspect-ratio: 1/ 0.585;
    }

    .ichica .inner {
        height: 100%;
    }

    .ichica .inner h2 {
        max-width: 25vw;
        position: absolute;
        right: 16vw;
        top: 19vw;
    }

    .ichica.logo_02 .inner h2 {
        max-width: 39vw;
        position: absolute;
        right: 9vw;
        top: 17vw;
    }

    .ichica .inner .flex {
        display: flex;
        font-size: clamp(9px, 1.2vw, 23px);
        width: 33vw;
        position: absolute;
        right: 11vw;
        top: 31vw;
    }

    .ichica .inner .flex p {
        width: 50%;
    }

    .ichica .inner .flex p span {
        font-size: clamp(9px, 1vw, 16px);
        color: #a4a3be;
    }

    /*-------------------------*/
    /*  souya
    /*-------------------------*/
    .souya {
        margin-top: -6vw;
        background: url(../img/pc_souya.png) no-repeat 1.8vw top;
        background-size: contain;
        aspect-ratio: 1/ 0.585;
    }

    .souya .inner {
        height: 100%;
    }

    .souya .inner h2 {
        max-width: 26vw;
        position: absolute;
        left: 14vw;
        top: 15.5vw;
    }

    .souya .inner>div {
        width: 44vw;
        position: absolute;
        left: 6vw;
        top: 26vw;
        font-size: clamp(13px, 1vw, 23px);
        text-align: center;
    }

    .souya .inner>div a {
        display: inline-block;
        width: 8vw;
    }

    .sns {
        margin-top: 2vw;
    }

    /*-------------------------*/
    /*  details
    /*-------------------------*/

    .details {
        padding: 80px 0;
    }

    .details .inner .flex {
        display: flex;
        font-size: clamp(13px, 1.2vw, 23px);
        width: 60vw;
        margin: 0 auto;
    }

    .details .inner .flex p {
        text-align: center;
        width: 50%;
    }

    .details .inner .flex p:nth-child(1) {
        margin-right: 1vw;
    }

    .totop {
        position: fixed;
        right: -100px;
        bottom: -15px;
        width: 5vw;
    }

    .totop img {
        width: 100%;
    }

}

/*-------------------------/*-------------------------*/
/*  sp  
/*-------------------------/*-------------------------*/
@media (max-width: 1156px) {

    body {
        line-height: 1.8;
    }

    main {
        background: #a4a3be;
        padding: 15px;
    }

    .main_bg {
        background: #f4f3f8;
        border-radius: 40px;
    }

    /*-------------------------*/
    /*  mv
    /*-------------------------*/
    .mv {
        padding-top: 10px;
    }

    .mv img {
        width: 100%;
    }


    /*-------------------------*/
    /*  about voisonia
    /*-------------------------*/
    .about,
    .voisonia {
        text-align: center;
        width: 100%;
    }

    .about {
        margin-top: 4.5vw;
        margin-bottom: 5vw;
    }

    .voisonia {
        margin-top: 16vw;
    }

    .about h2,
    .voisonia h2 {
        width: 100%;
        position: absolute;
        top: 0;
    }

    .about .inner,
    .voisonia .inner {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 300px;
        font-size: clamp(13px, 1.2vw, 23px);
    }

    .about .inner p,
    .voisonia .inner p {
        text-align: left;
    }

    /*-------------------------*/
    /*  ichica
    /*-------------------------*/
    .ichica {
        background: url(../img/sp_ichica.png) no-repeat top left;
        background-size: contain;
        aspect-ratio: 1 / 1.6;
    }

    .ichica .inner {
        height: 100%;
    }

    .ichica .inner h2 {
        max-width: 62vw;
        position: absolute;
        right: 15vw;
        top: 66vw;
    }


    .ichica .inner .flex {
        font-size: clamp(14px, 3.8vw, 46px);
        width: 62vw;
        position: absolute;
        right: 15.5vw;
        top: 91vw;
        line-height: 2;
    }

    .ichica .inner .flex p {}

    .ichica .inner .flex p span {
        font-size: clamp(12px, 3.5vw, 16px);
        color: #a4a3be;
    }

    /*-------------------------*/
    /*  souya
    /*-------------------------*/
    .souya {
        margin-top: -14vw;
        background: url(../img/sp_souya.png) no-repeat top center;
        background-size: contain;
        aspect-ratio: 1/ 1.6;
    }

    .souya .inner {
        height: 100%;
    }

    .souya .inner h2 {
        width: 62vw;
        position: absolute;
        right: 15vw;
        top: 60vw;
    }

    .souya .inner>div {
        font-size: clamp(13px, 3vw, 27px);
        width: 62vw;
        position: absolute;
        right: 15.5vw;
        top: 85vw;
        line-height: 1.5;
    }

    .souya .inner>div a {
        display: inline-block;
        width: 17vw;
    }

    .sns {
        margin-top: 2vw;
        text-align: center;
    }

    .voisonia div>p:first-child {
        text-align: center;
    }

    /*-------------------------*/
    /*  details
    /*-------------------------*/

    .details {
        padding: 40px 0;
    }

    .details .inner .flex {
        width: 60vw;
        margin: 0 auto;
    }

    .details .inner .flex p {
        text-align: center;
        margin-bottom: 20px;
    }

    .details .inner .flex p:nth-child(1) {
        margin-right: 1vw;
    }

    .totop {
        position: fixed;
        right: -100px;
        bottom: -4px;
        width: 9vw;
    }

}

/*----*/
.load {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#load {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    color: #fff;
    text-align: center;
    overflow: hidden;
    font-size: 11px;
    letter-spacing: 2px;
}

.bg_03,
.bg_02,
.bg_01,
.bg_00 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.bg_01 {
    background: #a4a3be;
}

.bg_02 {
    background: #f8f7fd;
}

.bg_03 {
    background: #f4f3f8;
}

.bg_00_wrap {
    opacity: 0;
    top: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    animation-name: fade-in;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
    animation-delay: .1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

@keyframes fade-in {
    0% {
        transform: translate(-50%, -35%);
    }

    100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.logos img {
    width: 50px;
    animation: rotateAnimation 5s linear infinite;
}

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}