/* ようせいさん個別表示用CSS */
body{
    /* 大きさ */
    width:100vw;
    height:100vh;

    /* 背景 */
    background-position:center center;
    background-repeat:repeat;
		
    /* 配置 */
    margin:0%;
    padding:0%;
    display: grid;
    grid-template-columns: auto 1080px 180px;
    grid-template-rows: 100%;

    color:#777;
    line-height: 200%;
    font-size: 1em;
    font-family: 'ヒラギノ丸ゴ ProN';
}
@media screen and (min-width: 1081px) and (max-width: 1260px) {
    body {
        grid-template-columns: 0px 1080px auto;
    }
}
@media screen and (min-width: 541px) and (max-width: 1080px) {
    body {
        grid-template-columns: 0px auto 0px;
    }
}
@media screen and (max-width: 540px) {
    body {
        display: inline;
    }
}

.garden {
    /* 背景 */
    background-size:cover;
    background-position:center left;
    background-repeat:no-repeat;

    /* 配置 */
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;

    display: grid;
    grid-template-columns: auto 540px;
    grid-template-rows: 100%;
}

.slit {
    /* 背景 */
    background-image:url('zeffiroso.PNG');
    background-position:top right;
    background-repeat:no-repeat;

    /* 配置 */
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}

.window {
    /* 背景 */
    background-size:cover;
    background-position:center left;
    background-repeat:no-repeat;

    /* 配置 */
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

.room {
    /* 大きさ */
    width:540px;
    height:100vh;
		
    /* 配置 */
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}
@media screen and (max-width: 540px) {
    .room {
        width:100vw;
    }
}

header {
    width:90%;
    height:10vh;

    padding:0% 5%;
    margin:0%;
    background-color:rgba(255, 255, 255, 0.8);
}
@media screen and (max-width: 1080px) {
    header {
        /* 背景 */
        background-size:contain;
        background-image:url('zeffiroso_a.PNG');
        background-position:bottom right;
        background-repeat:no-repeat;
    }
}

main {
    width:100%;
    height:90vh;

    padding:0;
    overflow:scroll;
}

hr {
    border: none;
    border-top:dashed 1px;
    margin:10% 0%;
}

.note {
    width:480px;

    margin:30px 30px;
    padding:0px;
    background:rgba(255, 255, 255, 0.8);
}
@media screen and (max-width: 540px) {
    .note {
        width:88.89vw;

        margin:5.56vw;
    }
}

.title_img {
    /* 大きさ */
    width: 480px;
    height:360px;

    /* 背景 */
    background-size:contain;
    background-position:top left;
    background-repeat:no-repeat;
}
@media screen and (max-width: 540px) {
    .title_img {
        width:88.89vw;
        height:auto;
        aspect-ratio: 4 / 3;
    }
}

.note h1 {
    padding:5px 30px;
}

.note p {
    padding:0px 30px;
}

.story {
    padding:0 2vw;
    font-size:0.9em;
    color:#999;
}

.box {
    overflow: hidden;
}

.my_card_img {
    width:60px;
    height:60px;

    /* 背景 */
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    margin:2%;

    float:left;

    font-size: 0em;

    border-radius:50%;
}

.color {
    width:60px;
    height:60px;

    margin:2%;

    float:left;

    font-size: 0em;

    border-radius:50%;
}