@charset "UTF-8";

@font-face {
    font-family: Senobi-Gothic;
    src: url(../font/MODI_Senobi-Gothic_2017_0702/Senobi-Gothic-Medium.ttf) format(truetype);
}

body {
    font-family: "Senobi-Gothic";
}

a {
    text-decoration: none;
    color: #343341;
    width: fit-content;
}

/* indexの設定 */
.index-h1 {
    font-size: 40px;
    margin: 0;
}

.index-header-p {
    text-align: center;
    font-size: 20px;
}

.index-ul {
    padding: 0;
}

.index-li {
    list-style: none;
    width: 300px;
    height: 500px;
    margin: 10px;
    position: relative;
    box-shadow: 0 6px 6px #c2c2c2;
    transition: .3s ease;
}

.index-li:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 10px #c2c2c2;
}

.flex-team {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.character {
    display: flex;
}

.index-span {
    font-size: 24px;
    margin: 0;
    line-height: 2em;
}

.span-intro {
    margin: 10px;
    margin-right: 0;
    width: 480px;
}

.li-1 {
    background: url(../img/illust-1.png) #eaecf9 top center no-repeat;
    background-size: cover;
    border: 6px double #848ed0;
}

.li-2 {
    background: url(../img/illust-3.png) #ffffe7 top center no-repeat;
    background-size: cover;
    border: 6px double #caca72;
}

.li-3 {
    background: url(../img/illust-5.png) #f7d1d1 top center no-repeat;
    background-size: cover;
    border: 6px double #906161;
}

.li-4 {
    background: url(../img/illust-7.png) #ffcfe3 top center no-repeat;
    background-size: cover;
    border: 6px double #ad6d88;
}

.index-name {
    font-size: 28px;
    margin: 0;
    padding-left: 10px;
}

.index-lubi {
    padding-left: 12px;
    margin: 0;
}

@media screen and (max-width: 680px) {
    .index-li {
        width: 200px;
        height: 500px;
    }
}

/* 全体設定・宮瀬言葉のページ */
.character-1 {
    background: url(../img/background.png) #eaecf9 repeat;
    background-size: cover;
}

h1 {
    text-align: center;
}

.hover-img {
    margin-left: 120px;
    width: 420px;
    height: 700px;
    background: url(../img/illust-1.png) center top no-repeat;
    background-size: 400px;
    animation: bless 3s ease infinite;
}

.hover-img:hover {
    background: url(../img/illust-2.png) center top no-repeat;
    background-size: 400px;
}

@keyframes bless {
    0% {
        transform: translateY(5px);
    }

    50% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(5px);
    }

}

.main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.box {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 40px;
}

.flex h2 {
    font-size: 40px;
    margin-top: 0;
}

.lubi {
    margin-left: 20px;
    font-size: 25px;
}

.introduction p {
    font-size: 20px;
}

.flex {
    display: flex;
    flex-direction: column;
    justify-content: left;
}

.button-flex {
    display: flex;
    gap: 30px;
    height: fit-content;
}

.button {
    width: 130px;
    height: 130px;
    padding: 30px;
    border: 2px solid;
    border-radius: 20px;
    background-color: #eaecf9;
    box-shadow: 10px 12px #54555c;
    transition: .2s ease;
}

.button p {
    text-align: center;
    margin: 0;
    padding: 0;
}

.comment {
    display: none;
    font-size: 18px;
    margin: 30px;
    position: relative;
    z-index: 90;
}

.myself {
    display: block;
}

#heart:checked~.button-flex label .heart {
    box-shadow: 10px 22px 17px #54555c;
    transform: translateY(-10px);
}

#heart:checked~.speechBubble-div .heart-p {
    display: block;
}

#heart:checked~.speechBubble-div .myself {
    display: none;
}

#crown:checked~.button-flex label .crown {
    box-shadow: 10px 22px 17px #54555c;
    transform: translateY(-10px);
}

#crown:checked~.speechBubble-div .crown-p {
    display: block;
}

#crown:checked~.speechBubble-div .myself {
    display: none;
}

#diamond:checked~.button-flex label .diamond {
    box-shadow: 10px 22px 17px #54555c;
    transform: translateY(-10px);
}

#diamond:checked~.speechBubble-div .diamond-p {
    display: block;
}

#diamond:checked~.speechBubble-div .myself {
    display: none;
}

label {
    width: fit-content;
}

.speechBubble {
    border: 2px solid #000000;
    height: 150px;
    width: 660px;
    border-radius: 20px;
    position: relative;
    background-color: #eaecf9;
    z-index: 70;
}

.speechBubble-triangle-1 {
    border-top: 2px solid;
    width: 30px;
    transform: rotate(-45deg);
    position: relative;
    top: 67px;
    left: -24px;
}

.speechBubble-triangle-2 {
    border-top: 2px solid;
    width: 30px;
    transform: rotate(45deg);
    position: relative;
    top: -68px;
    left: -25px;
}

.speechBubble-hide {
    border-top: 2px solid #eaecf9;
    width: 38px;
    transform: rotate(90deg);
    position: relative;
    top: -80px;
    left: -18px;
    z-index: 80;
}

.footer {
    position: absolute;
    left: 20px;
    top: 200px;
}

.select-1,
.select-2,
.select-3,
.select-4 {
    border: 2px solid #000000;
    border-radius: 10px;
    width: 100px;
    height: 100px;
    margin: 20px;
}

.select-1 {
    background-color: #eaecf9;
}

.select-2 {
    background-color: #ffffe7;
}

.select-3 {
    background-color: #f3afaf;
}

.select-4 {
    background-color: #ffcfe3;
}

/* 猫田晃のページ */
.character-2 {
    background: url(../img/background2.png) #ffffe7 repeat;
    background-size: cover;
}

.hover-img-2 {
    margin-left: 120px;
    width: 420px;
    height: 700px;
    background: url(../img/illust-3.png) center top no-repeat;
    background-size: 400px;
    animation: bless 3s ease infinite;
}

.hover-img-2:hover {
    background: url(../img/illust-4.png) center top no-repeat;
    background-size: 400px;
}

.speechBubble-2 {
    border: 2px solid #000000;
    height: 150px;
    width: 660px;
    border-radius: 20px;
    position: relative;
    background-color: #ffffe7;
    z-index: 70;
}

.button-2 {
    width: 130px;
    height: 130px;
    padding: 30px;
    border: 2px solid;
    border-radius: 20px;
    background-color: #ffffe7;
    box-shadow: 10px 12px #54555c;
    transition: .2s ease;
}

.button-2 p {
    text-align: center;
    margin: 0;
    padding: 0;
}

.speechBubble-hide-2 {
    border-top: 2px solid #ffffe7;
    width: 38px;
    transform: rotate(90deg);
    position: relative;
    top: -80px;
    left: -18px;
    z-index: 80;
}

/* 立華広のページ */

.character-3 {
    background: url(../img/background3.png) #f7d1d1 repeat;
    background-size: cover;
}

.hover-img-3 {
    margin-left: 120px;
    width: 420px;
    height: 700px;
    background: url(../img/illust-5.png) center top no-repeat;
    background-size: 400px;
    animation: bless 3s ease infinite;
}

.hover-img-3:hover {
    background: url(../img/illust-6.png) center top no-repeat;
    background-size: 400px;
}

.speechBubble-3 {
    border: 2px solid #000000;
    height: 150px;
    width: 660px;
    border-radius: 20px;
    position: relative;
    background-color: #f7d1d1;
    z-index: 70;
}

.button-3 {
    width: 130px;
    height: 130px;
    padding: 30px;
    border: 2px solid;
    border-radius: 20px;
    background-color: #f7d1d1;
    box-shadow: 10px 12px #54555c;
    transition: .2s ease;
}

.button-3 p {
    text-align: center;
    margin: 0;
    padding: 0;
}

.speechBubble-hide-3 {
    border-top: 2px solid #f7d1d1;
    width: 38px;
    transform: rotate(90deg);
    position: relative;
    top: -80px;
    left: -18px;
    z-index: 80;
}

/* 八野千影のページ */
.character-4 {
    background: url(../img/background4.png) #ffcfe3 repeat;
    background-size: cover;
}

.hover-img-4 {
    margin-left: 120px;
    width: 420px;
    height: 700px;
    background: url(../img/illust-7.png) center top no-repeat;
    background-size: 400px;
    animation: bless 3s ease infinite;
}

.hover-img-4:hover {
    background: url(../img/illust-8.png) center top no-repeat;
    background-size: 400px;
}

.speechBubble-4 {
    border: 2px solid #000000;
    height: 150px;
    width: 660px;
    border-radius: 20px;
    position: relative;
    background-color: #ffcfe3;
    z-index: 70;
}

.button-4 {
    width: 130px;
    height: 130px;
    padding: 30px;
    border: 2px solid;
    border-radius: 20px;
    background-color: #ffcfe3;
    box-shadow: 10px 12px #54555c;
    transition: .2s ease;
}

.button-4 p {
    text-align: center;
    margin: 0;
    padding: 0;
}

.speechBubble-hide-4 {
    border-top: 2px solid #ffcfe3;
    width: 38px;
    transform: rotate(90deg);
    position: relative;
    top: -80px;
    left: -18px;
    z-index: 80;
}

.talk-portfolio{
    text-align: center;
    font-size: 20px;
    text-decoration: underline;
}

.span{
    font-size: 20px;
    margin-left: 30px;
}

@media screen and (max-width:1200px) {
    .top {
        position: relative;
    }

    .flex {
        position: absolute;
        top: 400px;
        left: 20%;
    }

    .footer {
        position: absolute;
        left: 20px;
        top: 100px;
    }

    .footer a div {
        width: 20%;
    }

    .speechBubble,
    .speechBubble-2,
    .speechBubble-3,
    .speechBubble-4{
        width: 90%;
        height: fit-content;
    }

    .speechBubble-hide,
    .speechBubble-hide-2,
    .speechBubble-hide-3,
    .speechBubble-hide-4,
    .speechBubble-triangle-1,
    .speechBubble-triangle-2{
        display: none;
    }

    .heart,
    .crown,
    .diamond{
        display: flex;
        flex-direction: column;
        width: 50%;
        height: 50%;
    }

    .button-flex{
        gap: 0;
        flex-wrap: wrap;
    }

}