@charset "UTF-8";

/*------------------------------------------------
　　　　写真
------------------------------------------------*/
.profile--photo{
    float: left;
    width: 30%;
    background-color: #000;
    margin: 0 2em 1em 0;
}
@media screen and (max-width: 1100px) {
    .profile--photo{ width: 38%;}
}
@media screen and (max-width: 740px) {
    .profile--photo{ width: 46%;}
}
@media screen and (max-width: 580px) {
    .profile--photo{ width: 100%; margin: 0 0 2em;}
}

/*------------------------------------------------
　　　　概要
------------------------------------------------*/
.profile--main--name{
    font-size: 160%;
    font-weight: bold;
    line-height: 1.4;
    padding-bottom: 0.7em;
}
.profile--main--name span,
.profile--main--name .sabajiro--bold{ font-size: 80%;}
.profile--main--intro{
    line-height: 2.0;
    text-align: justify;
    padding-bottom: 1.4em;
}
.profile--main--h4{
    display: inline-block;
    background-color: #000;
    line-height: 1.0;
    color: #fff;
    font-weight: bold;
    padding: 0.2em 0.4em;
    margin-bottom: 0.3em;
}
@media screen and (max-width: 480px) {
    .profile--main--name{ font-size: 150%;}
}

.profile--detail{
    border-top: solid 1px #cbae38;
    margin: 1em 0 0;
    padding: 2.4em 0;
}
.profile--detail--h4{
    font-weight: bold;
    line-height: 1.6;
    padding-bottom: 1em;
}
.profile--detail--h4 span,
.profile--detail--list dt span{
    font-size: 80%;
}
.profile--detail--list dt{
    font-weight: bold;
    line-height: 1.6;
    padding-bottom: 0.5em;
}
.profile--detail--list dt::before{
    content: "◆";
    color: #cbae38;
    margin-right: 0.2em;
}
.profile--detail--list--summary{
    padding-bottom: 2em;
    text-align: justify;
}
.profile--detail--list--summary > ul > li::before{
    content: "・";
}
.profile--detail--list--summary > ul > li{
    text-indent: -1em;
    margin: 0 0 0.5em 1em;
    
}

/*------------------------------------------------
　　　　作品紹介
------------------------------------------------*/
.works__list{
    display: flex; flex-wrap: wrap;
    margin-bottom: 2em;
    justify-content: center;
}
.works__item{
    flex-shrink: 0;
    width: 23%;
    height: calc(90vw * 0.23 * 0.667);
    background-color: #555;
    margin: 0.8vw 1%;
    overflow: hidden;
}
@media screen and (min-width: 1700px) {
    .works__item{
        margin: 14px 1%;
        height: calc(1600 * 0.23 * 0.667);
    }
}
@media screen and (max-width: 920px) {
    .works__item{
        width: 31.3%;
        height: calc(90vw * 0.313 * 0.667);
    }
}
@media screen and (max-width: 740px) {
    .works__item{
        width: 48%;
        height: calc(90vw * 0.48 * 0.667);
    }
}
.works__item a{
    display: block;
    transition: transform 0.4s ease-out;
}
@media screen and (min-width: 740px) {
    .works__item a:hover{
        -ms-transform: scale(1.1,1.1) translate3d(0, 0, 0);
        -webkit-transform: scale(1.1,1.1) translate3d(0, 0, 0);
        transform: scale(1.1,1.1) translate3d(0, 0, 0);
        -ms-transition: -ms-transform 0.4s ease-out;
        -webkit-transition: -webkit-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
        transform-origin: center center;
    }
}

.profile--detail--movie{
    background-color: #dedede;
}
.profile--detail--movie > div{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}
.profile--detail--movie > div > iframe{
    border:none; overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    margin: 0 auto;
}
@media screen and (min-width: 1000px) {
    .profile--detail--movie{ padding: 1em 0;}
    .profile--detail--movie > div{
        width: 900px;
        height: 450px;
        padding-top: 0;
        margin: 0 auto;
    }
}