@charset "utf-8";

html {
    visibility: hidden;
}

html.wf-active,
html.loading-delay {
    visibility: visible;
}

body{
    font-family: futura-pt, dnp-shuei-mgothic-std, sans-serif;
}

img{
    display: block;
    height: auto;
}

.fadeIn {
    opacity: 0;
    transition: 2s;
  }
  .fadeIn.is-show {
    opacity: 1;
  }

.fadeIn_up {
    opacity: 0;
    transform: translate(0, 50px);
    transition: 1s;
}

.fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1;
}

/* index */

.index header{
    position: relative;
    width: 100%;
    height: 100dvh;
    padding: 12% 10% 0;
}

.index header h1 img{
    margin: 0 auto;
}

.index header nav.topnav{
    position: absolute;
    width: 80%;
    bottom: 13%;
}

.index header nav.topnav ul{
    display: flex;
    position: relative;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}

.index header nav.topnav ul li:nth-child(5){
    margin-left: 300px;
}

.index header nav.topsns{
    position: absolute;
    top: 10%;
    right: 10%;
    width: 15%;
}

.index header nav.topsns ul{
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

.index header nav.topsns a{
    display: flex;
    justify-content: flex-end;
}

/* hover */

.index header nav ul li a{
    position: relative;
}

.index header nav ul li a::before{
    position: absolute;
	content: '';
    background-repeat: no-repeat;
    transform:scale(1,0) translate(0,-1.0rem);
	transform-origin:left bottom;
	transition:0.3s;
	z-index:-1;
	opacity:0;
}

.index header nav.topnav ul li a::before{
    width: 175px;
    height: 50px;
    background-image: url(../images/hover_profile.svg);
    top: -120%;
    left: -50%;
}

.index header nav.topnav ul li:nth-child(3) a::before{
    background-image: url(../images/hover_works.svg);
    left: -45%;
}

.index header nav.topnav ul li:nth-child(4) a::before{
    background-image: url(../images/hover_calendar.svg);
    left: -53%;
}

.index header nav.topnav ul li:nth-child(5) a::before{
    background-image: url(../images/hover_photo.svg);
    left: -50%;
}

.index header nav.topnav ul li:nth-child(6) a::before{
    background-image: url(../images/hover_diary.svg);
    left: -60%;
}

.index header nav.topnav ul li:nth-child(7) a::before{
    background-image: url(../images/hover_shop.svg);
    left: -52%;
}

.index header nav.topnav ul li:first-child a::before{
    background-image: url(../images/hover_himeko.svg);
    left: -50px;
}

.index header nav.topnav ul li a:hover::before{
	transform: scale(1,1) translate(0,0);
	opacity: 1;
}

.index header nav.topsns ul li a::before{
    width: 105px;
    height: 30px;
    background-image: url(../images/hover_insta.svg);
    top: -120%;
    left: -50%;
}

/* hmk */

.index header nav.topnav ul li.hmk{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.index header nav.topnav ul li.hmk a{
    display: inline-block;
}

/* glonav */

.index header nav.glonav,.index main div.hmk{
    display: none;
}

header nav.glonav{
    position: fixed;
    width: 10%;
    padding-top: 35px;
    margin-left: 5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

header nav.glonav ul .sns{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

header nav.glonav ul li a img{
    margin: 0 auto;
    margin-bottom: 20%;
    filter:grayscale(100%)
}

header nav.glonav ul li a img:hover{
    filter:grayscale(0);
	transition:0.3s;
}

header nav.glonav ul .sns li a img{
    margin-bottom: 75%;
}

/* wrapper */

.wrapper{
    width: 100%;
}

.wrapper header h1{
    position: fixed;
    padding: 100px 100px 10px 100px;
    top: -40px;
    right: -100px;
    background-color: rgba(147, 181, 229, 0.8);
    transform: rotate( 40deg );
    font-size: 3.0rem;
    color: #fff;
    z-index: 3;
}

.wrapper main{
    width: 75%;
    padding-top: 10%;
    margin: 0 5% 0 20%;
}

.wrapper footer{
    padding-bottom: 100px;
    margin-left: 15%;
    text-align: center;
}

.wrapper footer small{
    font-size: 1.4rem;
    letter-spacing: 0.2rem;
    color: #ddd;
}

.wrapper br.sp{
    display: none;
}


/* profile */

.profile .wrapper{
    background-image: url(../images/bg_profile.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.profile main{
    letter-spacing: 0.8rem;
}

.profile main h2{
    margin-bottom: 150px;
    text-align: center;
    font-size: 2.6rem;
    color: #fff;
}

.profile main .textbox{
    margin-bottom: 150px;
}

.profile main .textbox p{
    margin-bottom: 50px;
    text-align: center;
    font-size: 2.0rem;
    font-weight: 400;
    color: #fff;
}

/* works */

.works{
    background-color: #fff;
}

.works main h2{
    width: 20%;
    padding: 20px;
    margin: 0 auto 150px;
    background-color: #555;
    border-radius: 65px;
    color: #fff;
}

.works main h2 img{
    width: 100%;
    margin: 0 auto;
}

.works main section{
    margin-bottom: 100px;
    border-bottom: 8px dotted #ddd;
}

.works main .solo{
    width: 15px 20px;
    margin-bottom: 150px;
    border-bottom: 8px dotted rgba(31, 44, 162, 0.5);
    text-align: center;
}

.works main .solo h2{
    padding: 15px 20px;
    margin-bottom: 100px;
}

.works main .solo h2 img{
    width: 60%;
}

.works main  .solo section{
    padding-bottom: 100px;
}

.works main .solo section:last-child{
    padding-bottom: 0;
    border-bottom: none;
}

.works main .solo section h3{
    font-size: 2.0rem;
    color: #333;
}

.works main .solo section .movie{
    display: flex;
    flex-wrap: wrap;
    padding: 0 5%;
}

.works main .solo section p{
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-size: 2.0rem;
    color: #333;
}

.works main .solo section p span{
    font-size: 1.6rem;
}

.works main .solo section a{
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-size: 1.6rem;
    color: rgba(250, 135, 215, 0.75);
}

.works main section .disc{
    display: flex;
    justify-content: center;
    width: 90%;
    margin: 100px;
}

.works main section .disc .text{
    position: relative;
}

.works main section .disc .text .title{
    position: absolute;
    width: 300px;
    height: 300px;
    right: -35%;
    text-align: center;
    background-color: rgba(90, 255, 60, 0.75);
    border-radius: 150px;
    color: #fff;
    z-index: 1;
}

.works main section .disc .text .title h3{
    padding-top: 35%;
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-size: 3.6rem;
    color: #fff;
}

.works main section.bm .disc .text .title h3{
    line-height: 5.0rem;
}

.works main section .disc .text ol{
    width: 370px;
    height: 370px;
    padding: 20%;
    margin-top: 40%;
    line-height: 3.0rem;
    background-color: rgba(250, 135, 215, 0.75);
    border-radius: 185px;
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-size: 2.0rem;
    color: #fff;
}

.works main section.bf .disc .text ol{
    line-height: 2.0rem;
}

.works main section .disc .text ol li span{
    font-size: 1.2rem;
}

.works main section.ym .disc .text ol,.works main section.hb .disc .text ol{
    padding-top: 90px;
}

.works main section.ya .disc .text ol,.works main section.sg .disc .text ol{
    padding-top: 100px;
}

.works main section.bm .disc .text ol,.works main section.yt .disc .text ol{
    padding-top: 150px;
}

.works main section.bm .disc .text ol,.works main section.sb .disc .text ol{
    padding-top: 60px;
}

.works main section.ya .disc .text ol li span,.works main section.bf .disc .text ol li span{
    margin-left: 30%;
}

.works main section .disc .jacket p{
    width: 35%;
    margin-left: calc(5% + 15px);
    text-align: center;
    background-color: #999;
    border-radius: 10px;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
}

.works main section .comment{
    width: 70%;
    padding: 70px;
    margin: 0 auto 100px;
    background-color: rgba(158, 232, 215, 0.2);
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-size: 1.6rem;
    color: #333;
}

.works main section .comment h4{
    padding-bottom: 50px;
    text-align: center;
    font-size: 2.0rem;
}

.works main section .movie{
    margin-bottom: 100px;
    text-align: center;
}

.works main section .movie iframe{
    margin: 0 auto 30px;
    aspect-ratio: 16 / 9;
}

.works main section .movie iframe:last-child{
    margin-bottom: 0;
}

/* calendar */

.calendar main{
    padding-top: 5%;
}

.calendar main .calendar_container{
    width: 80%;
    padding-bottom: 100px;
    margin: 0 auto 100px;
    border-bottom: 8px dotted #777;
    font-weight: bold;
}

.calendar main .calendar_container .month{
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.calendar main .calendar_container .month a{
    display: flex;
}

.calendar main .calendar_container .month h2{
    margin: 0 50px;
    line-height: 2.0rem;
    text-align: center;
    font-size: 4.0rem;
    color: #777;
}

.calendar main .calendar_container .month h2 span{
    display: inline-block;
    width: 130px;
    height: 130px;
    line-height: 130px;
    margin-left: 50px;
    background-color: #333;
    border-radius: 100px;
    font-size: 6.0rem;
    color: #fff;
}

.calendar main .calendar_container table{
    margin: 0 auto;
    table-layout: fixed;
    text-align: center;
}

.calendar main .calendar_container table tr th{
    text-align: center;
    font-size: 3.2rem;
    font-weight: bold;
    color: #eee;
}

.calendar main .calendar_container table tr td{
    position: relative;
    width: 120px;
    height: 120px;
    border: 20px solid #fff;
    background-color: #eee;
    font-size: 4.0rem;
    color: #fff;
}

.calendar main .calendar_container table tr th:nth-child(6),.calendar main .calendar_container table tr.day *:nth-child(6){
    color: #6499B5;
}


.calendar main .calendar_container table tr th:last-child,.calendar main .calendar_container table tr.day *:last-child{
  color: #E87B9D;
}

.calendar main .calendar_container table tr.day td a{
    position: absolute;
    padding: 10px 20px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 25px;
    font-size: 2.0rem;
    z-index: 1;
}

.calendar main .calendar_container table tr.day td.live a,.calendar main section .schedule h3 span.live{
    background-color: rgba(255, 250, 121, 0.5);
    color: #FF1C1C;
}

.calendar main .calendar_container table tr.day td.work a,.calendar main section .schedule h3 span.work{
    background-color: rgba(121, 255, 131, 0.5);
    color: #fff;
}

.calendar main .calendar_container table tr.day td.ner a,.calendar main section .schedule h3 span.ner{
    background-color: rgba(121, 219, 255, 0.5);
    color: #fff;
}

.calendar main .calendar_container table tr.day td.blog a,.calendar main section .schedule h3 span.blog{
    background-color: rgba(185, 37, 116, 0.5);
    color: #fff;
}

.calendar main .calendar_container .gotop{
    position: fixed;
    right: 5%;
    bottom: 20%;
    z-index: 2;
}

.calendar main .calendar_container .gotop a{
    padding: 45px 51px;
    background-image: url(../images/icon_w_calendar.svg);
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(90, 255, 60, 0.75);
    border-radius: 65px;
}

.calendar main section{
    width: 80%;
    margin: 0 auto 100px;
    color: #333;
}

.calendar main section .schedule{
    position: relative;
    width: 100%;
    margin-bottom: 100px;
    text-align: center;
    line-height: 10rem;
    font-size: 2.0rem;
}

.calendar main section .schedule h3 span{
    position: absolute;
    top: 20px;
    left: 0;
    padding: 5px 40px;
    line-height: 5.0rem;
    font-size: 3.0rem;
}

.calendar main section .schedule dl{
    max-width: 70%;
    margin: 0 auto;
    line-height: 6.0rem;
}

.calendar main section .schedule dl dd{
    margin-bottom: 50px;
}

.calendar main section .schedule dl dd:last-child{
    margin-bottom: 0;
}

.calendar main section img{
    max-width: 100%;
    margin: 0 auto 100px;
}

.calendar main section iframe{
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
}

.calendar main section .link{
    width: 40%;
    display: flex;
    justify-content: space-evenly;
    margin: 0 auto;
}

.calendar main section .link p{
    line-height: 13rem;
    color: #E87B9D;
}

.calendar main h4{
    padding: 100px 0px 200px;
    text-align: center;
    font-size: 2.4rem;
}

/* photo */

.photo main{
    width: 100%;
    padding-top: 0;
    margin: 0;
}

.photo main section{
    width: 100%;
    height: 700px;
    background-size: cover;
}

.photo main section.one{
    background-image: url(../images/photo/artist/bg.jpg);
}

.photo main section.two{
    background-image: url(../images/photo/myroom/bg.jpg);
}

.photo main section h2{
    line-height: 64rem;
    text-align: center;
}

.photo main section h2 a{
    font-size: 20rem;
    color: #fff;
}

.photo main section h2 a:hover{
    color: #333;
    transition: 0.5s;
}

.photo footer{
    padding-top: 100px;
}

/* artist */

.artist main img{
    margin: 0 auto;
}

.artist main h2{
    margin-bottom: 150px;
}

.artist main h3{
    max-width: 1000px;
    margin: 0 auto 150px;
    text-align: center;
    font-size: 2.4rem;
}

.artist main section{
    max-width: 1000px;
    margin: 0 auto 100px;
}

.artist main section .title{
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto 50px;
    color: #333;
}

.artist main section .title h4{
    font-size: 3.0rem;
}

.artist main section .title p{
    font-size: 1.6rem;
}

.artist main section img{
    width: 100%;
}

/* myroom */

.myroom main{
    width: 100%;
    padding-top: 0;
    margin: 0;
}

.myroom main h2{
    position: absolute;
    bottom: 90px;
    right: 0;
    font-size: 13rem;
    color: #fff;
    z-index: 1;
}

.myroom main h3{
    margin: -65px 0px -10px;
    text-align: end;
    font-size: 12.5rem;
    color: #d0a8a6;
}

.myroom main img{
    max-width: 100%;
    margin-bottom: 100px;
}

.myroom main div{
    display: flex;
    justify-content: space-between;
}

.myroom main div img{
    width: calc(50% - 20px);
}

.myroom main .first{
    position: relative;
}

.myroom main .first img{
    width: 100%;
}

.myroom main .bath{
    flex-wrap: wrap;
    margin-bottom: 100px;
}

.myroom main .bath img{
    width: 50%;
    margin-bottom: 0;
}

.myroom footer{
    margin-left: 0;
}

/* goroku */

.goroku .wrapper{
    position: relative;
    max-width: 100%;
    height: 100dvh;
    background-image: url(../images/bg_goroku.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.goroku header h1{
    position: static;
    width: 75%;
    padding: 5% 0 0;
    margin: 0 5% 30px 20%;
    background-color: transparent;
    transform: none;
}

.goroku header h1 img{
    width: 100%;
}

.goroku main{
    padding-top: 0;
}

.goroku main p{
    width: fit-content;
    padding: 5px 30px;
    margin-left: auto;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.3);
    font-size: 1.4rem;
    font-weight: bold;
    color: #2569B9;
}

.goroku main .orie{
    max-width: 100%;
    position: absolute;
    bottom: 10%;
    left: 48%;
}

.goroku main .orie img{
    width: 50%;
}

.goroku main .bubble ul li{
    display: none;
}

.goroku main .bubble ul li a{
    position: absolute;
    width: 300px;
    padding: 40px 20px 40px 20px;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
}

.goroku main .bubble ul li.a1 a{
    padding-bottom: 60px;
    top: 30%;
    left: 25%;
    background-image: url(../images/bubble_c1.svg);
    /* transform: rotate( -30deg ); */
}

.goroku main .bubble ul li.a2 a{
    padding-bottom: 60px;
    top: 50%;
    right: 5%;
    background-image: url(../images/bubble_a2.svg);
}

.goroku main .bubble ul li.a3 a{
    padding-top: 60px;
    bottom: 15%;
    left: 20%;
    background-image: url(../images/bubble_a3.svg);
}

.goroku main .bubble ul li.a4 a{
    padding-top: 60px;
    bottom: 15%;
    right: 10%;
    background-image: url(../images/bubble_a4.svg);
}

.goroku main .bubble ul li.b1 a{
    padding-bottom: 60px;
    top: 45%;
    left: 22%;
    background-image: url(../images/bubble_b1.svg);
}

.goroku main .bubble ul li.b2 a{
    padding-bottom: 60px;
    top: 40%;
    right: 15%;
    background-image: url(../images/bubble_b2.svg);
}

.goroku main .bubble ul li.b4 a{
    padding-top: 60px;
    bottom: 20%;
    right: 32%;
    background-image: url(../images/bubble_b4.svg);
}

.goroku main .bubble ul li.b5 a{
    padding-bottom: 60px;
    top: 37%;
    left: 30%;
    background-image: url(../images/bubble_b5.svg);
}

.goroku main .bubble ul li.c2 a{
    padding-bottom: 60px;
    top: 30%;
    right: 10%;
    background-image: url(../images/bubble_c2.svg);
}

.goroku main .bubble ul li.c3 a{
    padding-top: 60px;
    bottom: 5%;
    left: 30%;
    background-image: url(../images/bubble_c3.svg);
}

.goroku main .bubble ul li.c4 a{
    padding-top: 60px;
    bottom: 5%;
    right: 20%;
    background-image: url(../images/bubble_c4.svg);
}

.goroku main section.popup{
    display: none;
}

/* himeko */

.himeko main h2{
    margin-top: 10%;
    text-align: center;
    font-size: 3.4rem;
    color: #333;
}

.himeko main img{
    width: 40%;
    margin: 100px auto;
}

/* max-width 1024px */

@media screen and (max-width: 1024px) {

    /* index */

    .index header{
        display: flex;
        padding: 0;
        align-items: center;
    }

    .index header h1{
        margin: 0 auto;
    }

    .index header h1 img{
        max-width: 80%;
    }

    .index header .topnav,.index header .topsns{
        display: none;
    }

    .index header div.hmk{
        display: block;
        position: absolute;
        right: -227px;
    }

    .index header nav.glonav{
        display: flex;
    }

    /* hmk */

    .index main div.hmk{
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        transform: translateX(-50%);
    }

    .index main div.hmk a img{
        width: 200px;
    }

    /* wrapper */

    .wrapper  header h1{
        padding: 10px 0px 10px 50px;
        top: 0;
        left: 0;
        transform: rotate( 0deg );
    }

    .wrapper main{
        padding-top: 15%;
        margin: 0 auto;
    }

    .wrapper footer{
        margin-left: 0;
    }

    /* hamburger menu */

    header ul.button{
        display: block;
        position: fixed;
        top: 100px;
        right: 100px;
        z-index: 4;
    }

    header ul.button li span{
        display: block;
        width: 30px;
        height: 5px;
        margin-bottom: 7px;
        background-color: #ccc;
        transition: 0.5s;
    }

    header ul.button.active li:nth-child(1) span{
        transform: rotate(45deg) translate(13px, 14px);
    }

    header ul.button.active li:nth-child(2) span{
        transform: rotate(-45deg) translate(-5px, 5px);
    }

    header ul.button.active li:nth-child(3) span{
        opacity: 0;
    }

    header nav.glonav{
        position: fixed;
        display: flex;
        justify-content: center;
        width: 50%;
        height: 100dvh;
        padding: 0;
        margin: 0;
        top: 0;
        left: 50%;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.9);
        transform: translateX(100%);
        transition: 0.5s;
        z-index: 3;
    }

    header nav.glonav.active{
        transform: translateX(0);
    }

    header nav.glonav ul{
        width: 50%;
    }

    header nav.glonav ul li a img{
        filter: none;
    }

    /* profile */

    .profile .wrapper{
        background-position: center;
    }

    /* works */

    .works main h2{
        width: 40%;
        margin-bottom: 100px;
    }

    .works main .solo{
        margin-bottom: 100px;
    }

    .works main .solo h2 img{
        width: 50%;
    }

    .works main section .disc{
        display: block;
        width: 80%;
        margin: 0 auto 50px;
    }

    .works main section .disc .jacket{
        margin-bottom: 50px;
    }

    .works main section .disc .jacket p{
        margin-left: calc(10% + 30px);
    }

    .works main section .disc .jacket figure img{
        width: 80%;
        margin: 0 auto;
    }

    .works main section .disc .text .title{
        width: 200px;
        height: 200px;
        top: -400px;
        right: -50px;
    }

    .works main section .disc .text .title h3{
        font-size: 2.4rem;
    }

    .works main section.bm .disc .text .title h3{
        line-height: 3rem;
    }

    .works main section .disc .text ol{
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0 auto;
        text-align: center;
        background-color: #fff;
        color: #E87B9D;
    }

    .works main section.ym .disc .text ol,.works main section.ya .disc .text ol,.works main section.sg .disc .text ol,.works main section.hb .disc .text ol,.works main section.bm .disc .text ol,.works main section.yt .disc .text ol{
        padding-top: 0;
    }

    .works main section.bf .disc .text ol{
        line-height: 3.0rem;
    }

    .works main section.bf .disc .text ol li span,.works main section.ya .disc .text ol li span{
        margin-left: 0;
    }

    .works main section.bf .disc .text ol li br,.works main section.ya .disc .text ol li br{
        display: none;
    }

    .works main section .comment{
        width: 100%;
    }

    .works main section .movie iframe{
        width: 80%;
        height: auto;
    }

    /* calendar */

    .calendar main{
        width: 100%;
        padding-top: 20%;
    }

    .calendar main .calendar_container {
        width: 90%;
        height: 87dvh;
    }

    .calendar main .calendar_container .gotop{
        right: 8%;
        bottom: 10%;
    }

    .calendar main .calendar_container .gotop a{
        padding: 35px 41px;
    }

    .calendar main .calendar_container table tr td{
        width: 100px;
        height: 100px;
    }

    .calendar main h3{
        margin: 0 0 100px;
    }

    .calendar main section .schedule{
        margin-bottom: 50px;
        line-height: 6.4rem;
    }

    .calendar main section .schedule h3{
        margin-bottom: 25px;
    }

    .calendar main section .schedule h3 span{
        position: static;
    }

    .calendar main section .schedule dl dd{
        margin-bottom: 25px;
    }

    .calendar main section img{
        margin-bottom: 50px;
    }

    .calendar main section .link{
        width: 60%;
    }

    .calendar main section .link p{
        font-size: 2.0rem;
    }

    /* photo */

    .photo main{
        padding-top: 58.5px;
    }

    .photo main section{
        height: 300px;
    }

    .photo main section h2{
        margin-left: 0;
        line-height: 27rem;
    }

    .photo main section h2 a{
        font-size: 12rem;
    }

    /* artist */

    .artist main h2{
        margin-bottom: 100px;
    }

    .artist main h3{
        margin-bottom: 100px;
    }

    .artist main section .title{
        width: 100%;
    }

    .artist main section img{
        width: 100%;
    }

    /* myroom */

    .myroom main{
        padding-top: 0;
    }

    .myroom main h2{
        bottom: 45px;
        font-size: 7.0rem;
    }

    .myroom main img{
        margin-bottom: 50px;
    }

    .myroom main div img{
        width: calc(50% - 10px);
    }

    .myroom main .bath{
        margin-bottom: 50px;
    }

    /* goroku */

    .goroku main .orie{
    max-width: 100%;
    position: absolute;
    bottom: 10%;
    right: 0%;
    }

    .goroku header h1{
        width: 80%;
        padding: 15% 0 0;
        margin: 0 auto 30px;
    }
    
    .goroku header h1 img{
        width: 100%;
    }
    
    .goroku main{
        padding-top: 0;
    }

    }


/* max-width 520px */

@media screen and (max-width: 520px) {

    /* index */

    .index header h1 img{
        width: 50%;
    }

    .index main div.hmk a img{
        width: 150px;
    }

    /* hamburger menu */

    header ul.button{
        top: 15px;
        right: 50px;
    }

    header nav.glonav{
        width: 100%;
        left: 0;
    }

    header nav.glonav ul li a img{
        margin-bottom: 25px;
    }

    header nav.glonav ul li:nth-child(10) a img{
        margin-bottom: 0;
    }

    header nav.glonav ul li:nth-child(11) a img{
        display: none;
    }

    /* wrapper */

    .wrapper main{
        width: 90%;
        padding-top: 30%;
    }

    .wrapper footer{
        padding-bottom: 50px;
    }

    .wrapper footer small{
        font-size: 1.2rem;
    }

    .wrapper br.sp{
        display: block;
    }

    /* profile */

    .profile .wrapper{
        background-size: 100%;
        background-position: top;
        background-repeat: repeat;
    }

    .profile main{
        letter-spacing: 0.2rem;
    }

    .profile main h2{
        margin-bottom: 80px;
        font-size: 2.0rem;
    }

    .profile main .textbox{
        margin-bottom: 80px;
    }

    .profile main .textbox p{
        margin-bottom: 25px;
        font-size: 1.2rem;
    }

    /* work */

    .works main h2{
        padding: 10px;
        margin-bottom: 50px;
    }

    .works main section{
        padding-bottom: 0;
        margin-bottom: 50px;
    }

    .works main .solo{
        margin-bottom: 50px;
    }

    .works main .solo h2{
        padding: 10px 20px;
        margin-bottom: 50px;
    }

    .works main .solo section{
        margin-bottom: 50px;
        padding-bottom: 50px;
    }

    .works main .solo section h3{
        font-size: 1.4rem;
    }

    .works main .solo section p{
        font-size: 1.4rem;
    }

    .works main .solo section p span{
        font-size: 1.2rem;
    }

    .works main .solo section a{
        font-size: 1.2rem;
    }

    .works main section .disc{
        width: 100%;
    }

    .works main section .disc .jacket p{
        width: 40%;
        font-size: 1.2rem;
    }

    .works main section .disc .text .title{
        width: 170px;
        height: 170px;
        top: -130px;
        right: 0;
    }

    .works main section .disc .text .title h3{
        font-size: 2.0rem;
    }

    .works main section .disc .text ol{
        padding-top: 50px;
        font-size: 1.4rem;
    }

    .works main section.ym .disc .text ol,.works main section.ya .disc .text ol,.works main section.sg .disc .text ol,.works main section.hb .disc .text ol,.works main section.bm .disc .text ol,.works main section.yt .disc .text ol{
        padding-top: 50px;
    }

    .works main section .comment{
        padding: 30px;
        margin-bottom: 50px;
    }

    .works main section .comment h4{
        padding-bottom: 25px;
        font-size: 1.6rem;
    }

    .works main section .comment p{
        font-size: 1.2rem;
    }

    .works main section .movie{
        margin-bottom: 50px;
    }

    .works main section .movie iframe{
        width: 100%;
    }

    /* calendar */

    .calendar main{
        padding-top: 20%;
    }

    .calendar main .calendar_container{
        width: 100%;
        height: 90vh;
        margin-bottom: 50px;
    }

    .calendar main .calendar_container .month{
        margin-bottom: 20px;
    }

    .calendar main .calendar_container .month a img{
        width: 20px;
    }

    .calendar main .calendar_container .month h2{
        margin: 0 20px;
        font-size: 2.0rem;
    }

    .calendar main .calendar_container .month h2 span{
        width: 80px;
        height: 80px;
        line-height: 80px;
        margin-left: 20px;
        font-size: 3.0rem;
    }

    .calendar main .calendar_container table tr th{
        font-size: 2.0rem;
    }

    .calendar main .calendar_container table tr td{
        height: 70px;
        border: 5px solid #fff;
        font-size: 2.4rem;
    }

    .calendar main .calendar_container table tr.day td a{
        padding: 5px 5px;
        font-size: 1.0rem;
    }

    .calendar main .calendar_container .gotop a{
        padding: 25px 31px;
    }

    .calendar main section{
        margin-bottom: 50px;
    }

    .calendar main section .schedule h3 span{
        padding: 5px 20px;
        font-size: 2.0rem;
    }

    .calendar main section .schedule{
        margin-bottom: 25px;
        line-height: 3.2rem;
        font-size: 1.4rem;
    }

    .calendar main section .schedule dl{
        max-width: 100%;
        line-height: 2.8rem;
    }

    .calendar main section img{
        margin-bottom: 25px;
    }

    .calendar main section .link{
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .calendar main section .link p{
        font-size: 1.2rem;
    }

    .calendar main section .link img{
        max-width: 50%;
    }

    /* photo */

    .photo main{
        width: 100%;
        padding-top: 58.5px;
    }

    .photo main section{
        height: 150px;
    }

    .photo main section h2{
        line-height: 15rem;
    }

    .photo main section h2 a{
        display: block;
        font-size: 5.0rem;
    }

    .photo footer{
        padding-top: 50px;
    }

    /* artist */

    .artist main h2{
        margin-bottom: 50px;
    }

    .artist main h2 img{
        max-width: 80%;
    }

    .artist main h3{
        margin-bottom: 50px;
    }

    .artist main h3 img{
        max-width: 60%;
    }

    .artist main section{
        margin-bottom: 50px;
    }

    .artist main section:last-child{
        margin-bottom: 50px;
    }

    .artist main section .title{
        margin-bottom: 20px;
    }

    .artist main section .title h4{
        font-size: 2.0rem;
    }

    .artist main section .title p{
        font-size: 1.0rem;
    }

    /* myroom */

    .myroom main{
        padding-top: 58.5px;
    }

    .myroom main{
        width: 100%;
    }

    .myroom main h2{
        bottom: 20px;
        font-size: 3.2rem;
    }

    .myroom main h3{
        margin: -17px 0px -3px;
        font-size: 3.6rem;
    }
    
    .myroom main img{
        margin-bottom: 25px;
    }

    .myroom main div img{
        width: calc(50% - 5px);
    }
    
    .myroom main .bath{
        margin-bottom: 25px;
    }

    /* gorou */

    .himeko  main h2{
        font-size: 2.4rem;
    }

}