@charset "UTF-8";

/*-- common --*/
html{
    font-size: 0.5208vw;
}

body{
    font-size: 1.6rem;
    font-weight: 300;
    font-family: "Noto Sans JP", sans-serif;
    color: #000;
    line-height: 1.6;
    background-color: #efeae4;
}

.flowing{
    width: 100%;
    height: 4.3575rem;
    padding: 2.728rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.loop {
    width: calc(100% + 100%);
    display: inline-flex;
    transform: translateX(100%);
    animation: flowing 40s linear 0s infinite;
  }

.loop .loop-item {
    padding: 0 7.558rem;
    font-size: 4.3575rem;
    white-space: nowrap;
}

.pc{
    display: block;
}

/*-- header --*/
header{
    margin-top: 2.799rem;
    margin-left: 3.129rem;
    width: 100%;
}

header .logo{
    width: 10.06%;
}

/*-- kv --*/
.kv_wraper{
    width: 84.6125%;
    margin: 0 auto;
}

nav .link_blk .link{
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-size: 4.51897rem;
}

.kv{
    margin-bottom: 12rem;
    width: 100%;
    position: relative;
}

.kv .kv_logo{
    width: 81.86%;
    margin: 5.694rem auto 4.726rem;
    position: absolute;
    top: 17.554%;
    right: 0;
}

.kv .kv_logo img{
    width: 100%;
}

.kv .kv1{
    width: 46.2192%;
    position: absolute;
    top: 0;
    right: 0;
}

.kv .kv1 video{
    width: 100%;
}

.kv .kv2{
    margin-top: 14.118rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.kv .kv2 video{
    width: 76.93%;
}

.kv .kv2 .flower_blk{
    width: 4.0744%;
    height: 55.548rem;
    position: relative;  
}

.kv .kv2 .flower_blk .flower1, .kv .kv2 .flower_blk .flower2{
    width: 100%;
}

.kv .kv2 .flower_blk .flower1 img{
    position: absolute;
    top: 4.368rem;
    left: 50%;
    transform: translateX(-100%);
}

.kv .kv2 .flower_blk .flower1::before{
    content: "";
    width: 1px;
    height: 2.236rem;
    background-color: #000;
    position: absolute;
}

.kv .kv2 .flower_blk .flower1::after{
    content: "";
    width: 1px;
    height: 23.673rem;
    background-color: #000;
    position: absolute;
    top: 14.311rem;
}

.kv .kv2 .flower_blk .flower2{
    position: absolute;
    bottom: 3.756rem;
}

.kv .kv2 .flower_blk .flower2 img{
    position: absolute;
    bottom: 3.368rem;
    left: 50%;
    transform: translateX(-100%);
}

.kv .kv2 .flower_blk .flower2::after{
    content: "";
    width: 1px;
    height: 2.236rem;
    background-color: #000;
    position: absolute;
}

/*-- wrapper --*/
.wrapper{
    display: flex;
}

/*-- side --*/
.side_blk{
    width: 22.9833%;
    height: 100vh;
    align-self: flex-start;
    border: 1px solid #000;
    position: sticky;
    top: 0;
}

#side .side_list .side_list_item{
    padding: 3.456rem 0.768rem 0;
    border-bottom: 1px solid #000;
}

#side .side_list .side_list_item .side_list_info{
    display: flex;
    justify-content: space-between;
    align-items: end;
}

#side .side_list .side_list_item .side_list_info .side_list_info_ttl_blk .side_list_info_ttl{
    padding-bottom: 2.144rem;
    font-size: 4.4978rem;
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    line-height: 4.4978rem;
}

#side .side_list .side_list_item .side_list_info .side_list_info_subttl{
    padding-bottom: 3.55rem;
}

/*-- contents --*/
.contents_blk{
    width: 77.016%;
}

/*-- about --*/
#about{
    width: 100%;
}

#about .about_blk{
    display: flex;
}

#about .about_person , #about .about_txt_blk{
    width: 50%;
}

#about .about_blk .about_person{
    padding: 12.276rem 0;
    border-right: 1px solid #000;
}

#about .about_blk .about_person .personphoto{
    margin:0 auto 4.247rem;
    width: 51.516%;
}

#about .about_blk .about_person .about_person_txt_blk{
    text-align: center;
    line-height: 2;
}

#about .about_blk .about_person .about_person_txt_blk .about_person_txt .ttl{
    font-size: 4.13036rem;
}

#about .about_blk .about_txt_blk{
    margin: 0 auto;
    padding: 15.497rem 6.35rem 0;
}

#about .about_blk .about_txt_blk .about_txt{
    margin-bottom: 2.4rem;
    line-height: 2.5;
}


/*-- skill --*/
#skill{
    width: 100%;
}

#skill .skill_item_blk{
    display: flex;
}

#skill .skill_item_blk .skill_item_contents{
    width: 74.594%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

#skill .skill_item_blk .skill_item_contents .skill_item{
    width: 100%;
    padding: 0 3.973rem 2.325rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

#skill .skill_item_blk .skill_item_contents .skill_item.skill3 , #skill .skill_item_blk .skill_item_contents .skill_item.skill4 , 
#skill .skill_item_blk .skill_item_contents .skill_item.skill5 , #skill .skill_item_blk .skill_item_contents .skill_item.skill6{
    height: fit-content;
}

#skill .skill_item_blk .skill_item_contents .skill_item.skill6{
    margin-top: 6.97rem;
}

#skill .skill_item_blk .skill_item_contents .skill_item .skill_header{
    margin-bottom: 1.14rem;
    width: 100%;
    display: flex;
    justify-content: end;
    font-size: 4.3575rem;
}

#skill .skill_item_blk .skill_item_contents .skill_item .percent{
    position:relative;
    width: 150px;
    height: 150px;
}

#skill .skill_item_blk .skill_item_contents .skill_item .percent svg{
    position: relative;
    width: 150px;
    height: 150px;
    transform: rotate(-90deg);
}

#skill .skill_item_blk .skill_item_contents .skill_item .percent svg circle{
    position: relative;
    fill: none;
    stroke-width: 10;
    stroke: #f3f3f3;
    stroke-dasharray: 440;
    stroke-dashoffset: 0;
    stroke-linecap: round;
}

#skill .skill_item_blk .skill_item_contents .skill_item .percent .skill_icon{
    width: 48.785%;
    height: 48.785%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#skill .skill_item_blk .skill_item_contents .skill_item .percent .line{
    animation: circleAnim 1s forwards;
}

#skill .skill_item_blk .skill_item_contents .skill_item.skill1 .percent .line{
    stroke-dashoffset: calc(440 - (440 * 88) / 100);
    stroke: #e88781;
}

#skill .skill_item_blk .skill_item_contents .skill_item.skill2 .percent .line{
    stroke-dashoffset: calc(440 - (440 * 80) / 100);
    stroke: #74a2c4;
}

#skill .skill_item_blk .skill_item_contents .skill_item.skill3 .percent .line{
    stroke-dashoffset: calc(440 - (440 * 85) / 100);
    stroke: #e482af;
}

#skill .skill_item_blk .skill_item_contents .skill_item.skill4 .percent .line{
    stroke-dashoffset: calc(440 - (440 * 86) / 100);
    stroke: #a0caab;
}

#skill .skill_item_blk .skill_item_contents .skill_item.skill5 .percent .line{
    stroke-dashoffset: calc(440 - (440 * 67) / 100);
    stroke: #f4cc00;
}

#skill .skill_item_blk .skill_item_contents .skill_item .skill_detail{
    margin-top: 4.3rem;
    text-align: center;
}

#skill .skill_item_blk .skill_item_contents .skill_item .skill_detail .skill_ttl{
    font-size: 4.3575rem;
}

#skill .skill_item_blk .skill_item_txt_blk{
    padding: 3.987rem 3.854rem;
    width: 25.245%;
    border-left: 1px solid #000;
}

#skill .skill_item_blk .skill_item_txt_blk .skill_item_txt{
    margin-bottom: 4.114rem;
}

#skill .skill_item_blk .skill_item_txt_blk .skill_item_txt li{
    padding-left: 1em;
}

/*-- work --*/
#work .top_work_blk{
    display: flex;
    border-bottom: 1px solid #000;
}

#work .top_work_blk .top_work_info{
    padding: 5.261rem 0 0 5.953rem;
    width: 63.5148%;
}

#work .top_work_blk .top_work_info .top_work_ttl{
    padding-right: 5.953rem;
    font-size: 7.1425rem;
    font-weight: bold;
}

#work .top_work_blk .top_work_info .top_work_about{
    margin-top: 19.046rem;
    margin-bottom: 7.27rem;
    font-size: 4.4537rem;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
}

#work .top_work_blk .top_work_info .top_work_txt_blk{
    margin-bottom: 20rem;
    line-height: 2.5;
}

#work .top_work_blk .top_work_info .top_work_txt_blk .top_work_link {
  width: fit-content;
  display: block;
  font-size: 2.4rem;
}

#work .top_work_blk .top_work_info .top_work_txt_blk .top_work_link:hover {
  opacity: 0.5;
}

#work .top_work_blk .top_work_info .top_work_footer{
    width: 100%;
    display: flex;
    justify-content: end;
    line-height: 12.7rem;
}

#work .top_work_blk .top_work_info .top_work_footer span{
    font-size: 12.7rem;
    font-weight: bold;
}

#work .top_work_blk .top_work_view{
    padding: 0 3.854rem;
    width: 36.4852%;
    display: flex;
    align-items: center;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

#work .top_work_blk.banner .top_work_info{
    padding: 5.261rem 5.953rem 0;
    width: 100%;
}

#work .banner_blk{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#work .banner_blk .banner_item{
    width: 33.3333%;
}

/*-- sp --*/
@media screen and (max-width:768px){
    body{
        font-size: 2.5555vw;
    }

    .pc{
        display: none;
    }

    .contents_blk{
        width: 100%;
    }

    /*-- kv --*/
    header .logo{
        margin-bottom: 3.5rem;
        width: 21.06%;
    }

    nav .link_blk .link{
        font-size: 6.51897rem;
    }

    .kv .kv2{
        margin-top: 7.118rem;
    }

    /*-- about --*/
    #about .about_blk .about_txt_blk{
        padding: 7.497rem 6.35rem;
    }

    
#about .about_blk .about_txt_blk .about_txt{
    line-height: 1.6;
}

    /*-- skill --*/
    #skill .skill_item_blk{
        display: block;
    }

    #skill .skill_item_blk .skill_item_contents{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    #skill .skill_item_blk .skill_item_contents .skill_item{
        padding: 0 5.973rem 2.325rem;
        width: 50%;
    }

    #skill .skill_item_blk .skill_item_contents .skill_item .skill_header {
        font-size: 6.3575rem;
    }

    #skill .skill_item_blk .skill_item_contents .skill_item .skill_detail .skill_ttl{
        font-size: 6.3575rem;
    }

    #skill .skill_item_blk .skill_item_txt_blk{
        width: 100%;
        border-left: none;
    }

    /*-- work --*/
    #work .top_work_blk .top_work_info{
        padding: 5.261rem 5.953rem 0;
    }

    #work .banner_blk {
        display: flex;
        justify-content: space-between;
    }
    
    #work .banner_blk .banner_item{
        width: 48%;
        margin-bottom: 5.2rem;
        display: flex;
        align-items: center;
    }

    #work .top_work_blk .top_work_info .top_work_txt_blk .top_work_link{
        font-size: 6.5rem;
    }
}

/*-- animation --*/
@keyframes flowing{
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes circleAnim {
  0% {
    stroke-dasharray: 0 440;
  }
  99.9%, to {
    stroke-dasharray: 440 440;
  }
}