/* MVの背景固定 */
.bg-fixed{
    background-image: url(/images/top_page/pct_mv_sp.jpg);
    height: 100svh;
    width:100vw;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    z-index: -1;
}
@media(min-width:768px){
    .bg-fixed{
        background-image: url(/images/top_page/pct_mv_pc.jpg);
        height:63.88888vw ;
    }
}
@media(min-width:1200px){
    .bg-fixed{
        height:100svh ;
    }
}
/*MV*/
.mv{
    width: 100%;
    height: 100svh;
    padding: 0 6vw 0 6.4vw;
    position: relative;
}
.mv-inner{
    height: 100%;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
}
.mv__heading{
    color: #FFFFFF;
    font-size: 5.665vh;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 1.5px;
    position: absolute;
    bottom: 13%;
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 1.0);
}
.mv__lead{
    font-size: 1.724vh;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 500;
    line-height: 1.5;
    display: block;
    margin-bottom: 1.6em;
}
.mv__message{
    font-style: italic;
    font-size: 1.9704vh;
    color: #FFFFFF;
    letter-spacing: 1.5px;
    position: absolute;
    bottom: 9%;
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 1.0);
}
@media(min-width:768px){
    .mv{
        height: 63.88888vw;
    }
    .mv__heading{
        font-size: 5.972222vw;
        bottom: 16%;
    }
    .mv__lead{
        font-size: 1.8888vw;
    }
    .mv__message{
        font-size: 2.222222vw;
        bottom: 8.5%;
    }
}

@media(min-width:1200px){
    .mv{
        height: 100svh;
    }
    .mv__heading{
        font-size: min(9.8svh, 8.4rem);
    }
    .mv__lead{
        font-size: min(3svh, 3.0rem);
    }
    .mv__message{
        font-size: min(3.8svh, 3.2rem);
    }
}

/*  mv__leadの動きに関わる記述  */
.TextTyping span {
	display: none;
}

.TextTyping::after {
    content: "|";
	animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}
/*MVここまで*/

.shadow {
    box-shadow: 0px 10px 10px -6px rgb(229 226 226 / 40%);
}
.works,.about,.skills,.career,.experience{
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 6.4vw;
    padding-right: 6.4vw;
}
.inner{
    margin: 0 auto;
    max-width: 1160px;
}
.section__title{
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 50px;
}
.section__title-jp{
    font-family:  "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #676767;
    display: block;
    line-height: 2;
}
@media(min-width:768px){
    .works,.about,.skills,.career,.experience{
        padding-top: 140px;
        padding-bottom: 140px;
    }
    .section__title{
        font-size: min(5.208vw,6rem);
        margin-bottom: 60px;
    }
    .section__title-jp{
        font-size: min(1.8229vw,1.6rem);
        display: inline;
        margin-left: 18px;
    }
}
.works,.about,.experience{
    background-color: #f9f9f8;
}
.skills,.career{
    background-color: #F1ECEB;
}
.tab-list-wrap{
    display: flex;
    justify-content: flex-end;
}  
.tab-list {
    display: flex;
    flex-wrap: wrap;
    gap:min(6.3333vw,32px);
    max-width: 450px;    
    margin-bottom: 50px;
    line-height: 1.4;
}
.line a{
    text-decoration: none;
    color: #363427;
    cursor: pointer;
    position: relative;
}
.line a::before {
    background: #363427;
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: -1px;
    margin: auto;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
}
.line a:hover::before {
    transform-origin: left top;
    transform: scale(1, 1);
}
#tab-list .active {
border-bottom: 1.6px solid #363427;
}
/*#tab-contents {
    display: flex;
}*/
.works-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:40px;
}
.works-list-item{
    max-width: 380px;
    width: 87.2vw;
    overflow: hidden; 
}
.works-list-image{
    position: relative;
    z-index: 1;
    transition: .3s; 
    width: 100%; 
    overflow: hidden;  
} 
.works-list-item a{
    line-height: 1;
}
/*works-list-image: hover時 */
.works-list-image::before {
    content: "View";
    letter-spacing: 2px;
    font-size: 1.6rem;
    color: #FFFFFF;
    text-decoration-line: underline;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 37%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background:rgba(73, 72, 72, 0.7);
    transition: transform ease .3s;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}
.works-list-item:hover .works-list-image::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
    z-index: 2;
}
.works-list-item:hover .works-list-image img{
    transform: scale(1.2);
    transition: all 0.5s ease-in-out;
}
/* works-list-image: hover時 ここまで */
.works-list__detail{
    line-height: 1.5;
    background-color: #FFFFFF;
    padding: 12px 10px 0 12px;
    height:110px ;
}
.works-category{
    font-size: 1.2rem;
    color: #515151;
    vertical-align: middle;
    margin-bottom: 10px;
}
.production-type::before{
    content: "|";
    display: inline-block;
    margin: 0 10px;
}
.production-type{
    font-size: 1.1rem;
}
.works-list-item__title{
    font-size: 1.4rem;;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.5;
    color: #363427;
}
.production-scope{
    color: #515151;
    font-size: 1.2rem;
}

@media(min-width:768px){
    .tab{
        font-size: min(1.8229vw,1.8rem);
    }
    .works-list-item {
        width: calc(33.333333% - 40px);
        max-width: none;
    } 
    .works-list__detail{
        height:130px ;
    }
    .works-category{
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    .production-type{
        font-size: 1.1rem;
    }
    .works-list-item__title{
        font-size: min(1.8229166vw,1.6rem);
    }
    .production-scope{
        font-size:  min(1.3020833vw,1.2rem);
    }
}
/*@media(min-width:1040px){
    .works-list{
        justify-content: space-between;
    }
    .works-list-item {
        width: calc(32% - 20px);
    }  
}*/

.skills-list{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}
.skills-list-item{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    
}
.skills-list-image{
    width: min(21.3333vw,100px);
}
.skills-list-detail{
    margin-left: 12px;
    flex: 1;
}
.skills-list-item__title{
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.skills-list-item__text{
    line-height: 1.6;
}

@media(min-width:768px){
    .skills-list{
        flex-direction: row;
        flex-wrap: wrap;
        gap: 48px;
    }
    .skills-list-item{
        width: calc(50% - 24px);
    }
    .skills-list-item__title{
        font-size: 1.8rem;
    }
    .skills-list-item__text{
        font-size: 1.6rem;
    }
    .skills-list-item:nth-child(2){
        order: 2;
    }
    .skills-list-item:nth-child(3){
        order: 5;
    }
    .skills-list-item:nth-child(4){
        order: 1;
    }
    .skills-list-item:nth-child(5){
        order: 3;
    }
}


.about-image{
    width: min(74.6666vw,400px);
    margin: 0 auto 60px;
}
.about-image img{
    box-shadow: 10px 30px 60px 0 rgba(198,195,195, 0.7);
}
.about-detail-wrap {
    flex: 1;
}
.profile-name{
    font-size: 2.4rem;
    font-weight: 400;
    margin-bottom: 30px;
}
.profile-name-en{
    font-size: 2.2rem;
    letter-spacing: 1px;
    margin-left: 20px;
}
.profile-introduction{
    margin-bottom: 40px;
    line-height: 2.5;
}
.about-detail-wrap dt{
    background-color: #627962;
    font-size: 1.6rem;
    color: #FFFFFF;
    display: inline-block;
    letter-spacing: 2px;
    padding: 6px 20px;
    margin-bottom: 12px;
}
.about-detail-wrap dd{
    line-height: 2.5;
    margin-bottom: 40px;
}
.about{
    padding-bottom: 40px;
}

@media(min-width:768px){
    .about__content-wrap{
        display: flex;
        gap: min(6.8965vw,80px);
    }
    .about-image{
        width: min(34.4827vw,400px);
    }
    .profile-name{
        font-size: 2.8rem;
    }
    .profile-name-en{
        font-size: 2.4rem;
    }
    .profile-introduction{
        margin-bottom: 40px;
        font-size: 1.6rem;
    }
    .about-detail-wrap dt{
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    .about-detail-wrap dd{
        font-size: 1.6rem;
    }
    .about{
        padding-bottom: 100px;
    }
}
.career__list{
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    position: relative;
}
.career__list-item{
    display: flex;
}

.career__date {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0px;
    padding-top: 18px;
    padding-right: 18px;
    width: 70px;
}
.career__description{
    padding-left: 1.1em;
    padding-top: 24px;
    padding-bottom: 20px;
    position: relative;
    border-left: solid #A6AFA6 6px;
    width: calc(100% - 70px);
}
.last-item{
    padding-bottom: 44px;
}
.career__description::before{
    content: "";
    background-color: #627962;
    width: 18px;
    height: 18px;
    border-radius: 20px;
    position: absolute;
    z-index: 2;
    top: 29px;
    left: -12px;
}

@media(min-width:768px){
    .career__list{
    padding-left: min(9.4339vw,100px);
    }
    .career__date{
        font-size: 2.8rem;
        padding-top: 20px;
        padding-right: 22px;
        width: 96px;
    }
    .career__description{
        font-size: 1.6rem;
        padding-top: 32px;
        padding-bottom: 20px;
        width: calc(100% - 96px);
    }
    .last-item{
        padding-bottom: 52px ;
    }
    .career__description::before{
        width: 22px;
        height: 22px;
        border-radius: 20px;
        z-index: 2;
        top: 38px;
        left: -14px;
    }
}


.experience__list{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.experience__title{
    margin-bottom: 18px;
    font-weight: 400;
    font-size: 1.8rem;
    
}
.experience__title-en{
    font-size: 2.4rem;
    font-weight: 700;
    display: block;
    text-decoration-line: underline;
    margin-bottom: 18px;
}
.experience__description{
    line-height: 2.5;
}

@media(min-width:768px){
    .experience__list{
        padding-left: min(9.4339vw,100px);
    }
    .experience__title{
        font-size: 2.4rem;
    }
    .experience__title-en{
        font-size: 3.2rem;
    } 
    .experience__description{
        font-size: 1.6rem;
    }
}


.works-detail{
    padding-top: 122px;
}
.works-detail__content-wrap{
    padding: 0 6.4vw;
}
.works-heading-wrap{
    max-width: 800px;
    margin: 0 auto;
}
.banner-wrap,.graphic-wrap{
    max-width: 680px;
}
.retouch-heading-wrap{
    max-width: 480px;
}
.works-heading{
    font-size: min(6.4vw,3.6rem);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 24px;
}
.works-heading__category{
    display: block;
    font-size: min(4.266666vw,1.8rem);
    font-weight: 400;
    color: #676767;
    margin-bottom: 10px;
}
.works-heading__production-type{
    font-size: min(4vw,1.7rem);
}
.works-heading__production-type::before{
    content: "";
    display: inline-block;
    margin: 0 10px;
    background-color: #676767;
    height: min(4.266666vw,18px);
    width: 1px;
    vertical-align: sub;
}
.works-detail__main-image{
    width: 100%;
    max-width: 800px;
    margin-bottom: 16px;
    box-shadow: 5px 10px 20px 3px rgba(125,125,125, 0.12);
}
.detail-image{
    margin-bottom: 50px;
}
.works-heading-wrap a{
    display: block;
    color: #676767;
    line-height: 1.1;
    margin-bottom: 50px;
    font-size: min(3.73333333vw,1.8rem);
}
.works-heading-wrap a span{
    border-bottom: 1px solid #676767;
}
.banner-image-wrap,.retouch-image-wrap{
    display: flex;
    flex-direction: column;
    margin: 0 auto 50px;
}
.retouch-image-wrap__under{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.banner-image,.retouch-image{
    width: 100%;
    max-width: 480px;
}
.image-wrap__arrow{
    font-size: min(4.8vw,3.0rem);
    line-height: 1;
    text-align: center;
    margin: 8px auto 24px;
    max-width: 480px;
}
.before_after{
    font-size: min(4.266666vw,2.4rem);
    color: #676767;
    text-decoration: underline;
    line-height: 1;
    margin-top: 10px;
}
.works-detail__list-wrap{
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 960px;
    margin:0 auto 80px;
}
.works-detail__list-wrap-banner-retouch-graphic{
    gap: 30px;
    margin-bottom: 120px;
}
.works-detail__list-wrap-banner-retouch-graphic:last-child{
    margin-bottom: 60px;
}
.works-detail__list{
    display: flex;
    flex-direction: column;
}
.works-detail__list dt{
    margin-bottom: 5px;
    font-weight: 600;
}
.works-detail__list dt::before{
    content: "";
    display: inline-block;
    height: 18px;
    width: 3px;
    background-color: #627962;
    vertical-align: text-bottom;
    margin-right: 12px;
}
.design-image-wrap{
    padding: 80px 6.4vw;
    background-color: #F1ECEB;
}
.design-image-wrap__inner{
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    
}
.design-pc{
    width: 100%;
    max-width: 720px;
    box-shadow: 5px 10px 20px 3px rgba(125,125,125, 0.12);
}
.design-sp{
    display: none;
}
.design-sp-half{
    display: flex;
    justify-content:space-between ;
    width: 100%;
}
.design-sp-half__image{
    width: 45%;
    height: 100%;
    box-shadow: 5px 10px 20px 3px rgba(125,125,125, 0.12);

}
.works-link-wrap{
    padding: 60px 6.4vw 0;
}
.works-link{
    display: flex;
    justify-content: space-between;
    max-width: 960px;
    margin: 0 auto 80px;
}
.works-link-1st{
    justify-content: flex-end;
}
.works-link a{
    text-decoration: none;
    color: #363427;
}
.works-link__button{
    border: solid 1px #363427;
    margin: 0 auto 100px;
    width: 187px;
}
.works-link__button a{
    padding: 16px 16px 16px 54px;
    display: block;
    position: relative;
	overflow: hidden;
    transition: ease .2s;
    line-height: 1;
}
.works-link__button a span{
    font-size: 1.6rem;
    color: #363427;
    position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
}
.works-link__button a:hover span{
	color:#fff;
}
.works-link__button a span::after{
    content: ">";
    font-size: 2.0rem;
    position: absolute;
    right: -46px;
    top: 1px;
}
/*== 背景が流れる（左から右） */
.works-link__button a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background:#363427;/*背景色*/
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
}
/*hoverした際の形状*/
.works-link__button a:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}

@media(min-width:768px){
    .works-detail{
        padding-top: 180px;
    }
    .works-heading__category{
        margin-bottom: 16px;
    }
    .works-heading__production-type::before{
        margin: 0 10px;
    }
    .works-heading-wrap a{
        margin-bottom: 100px;
    }
    .retouch-heading-wrap{
        max-width: 1040px;
    }
    .banner-image-wrap,.retouch-image-wrap {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .before_after{
        font-size: min(2.08333333vw,2.4rem);
        margin-top: 8px;
    }
    .image-wrap__arrow {
        margin: 0 20px;
    }
    .change-direction{
        transform: rotate( -90deg );
    }
    .banner-image,.retouch-image{
        width: calc(50% - 40px);
    }
    .retouch-image-wrap__under{
        margin-top: 40px;
    }
    .retouch-image-wrap__under .image-wrap__arrow{
        margin-bottom: 40px;
    }
    .detail-image,.banner-image-wrap{
        margin-bottom: 100px;
    }
    .works-detail__list-wrap{
        margin-bottom: 160px;
    }
    .works-detail__list-wrap-banner-retouch-graphic{
        gap: 32px;
    }
    .works-detail__list-wrap-banner-retouch-graphic:last-child{
        margin-bottom: 100px;
    }
    .works-detail__list{
        flex-direction: row;
    }
    .works-detail__list dt{
        width: 200px;
        margin-bottom: 0;
        font-size: 1.6rem;
    }
    .works-detail__list dd{
        font-size: 1.6rem;
        width: calc(100% - 200px);
    }
    .design-image-wrap{
        padding: 160px 6.4vw;
    }
    .design-image-wrap__inner{
        max-width: 960px;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0;
    }
    .design-pc{
        width: 75%;
        max-width: 720px;
    }
    .design-sp{
        display: block;
        width: 20.8333%;
        box-shadow: 5px 10px 20px 3px rgba(125,125,125, 0.12);
    }
    .design-sp-half{
        display: none;
    }
    .works-link{
        margin-bottom: 140px;
    }
    .works-link a{
        font-size: 1.6rem;
    }
}
.banner-wrap,.retouch-heading-wrap,.graphic-wrap{
    padding-top: 82px;
    margin-top: -82px;
}
@media(min-width:768px){
    .banner-wrap,.retouch-heading-wrap,.graphic-wrap{
        padding-top: 132px;
        margin-top: -132px;
    }
}
.link-theme{
    color: #676767;
    text-decoration: underline;
}
    /* ふわっと出現する動き */
.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}.fade.active {
	opacity: 1;
	transform: translateY(0px);
}