@charset "utf-8";

/* =======================
main
======================= */

/* article__header */

.article__header {
    position: relative;
    padding: 0 4% 30px;
    background: linear-gradient(to right, #F1EDEA 76.3%, #E5E0DC 23.7%);
}

.article__header::before {
    position: absolute;
    content: "";
    width: calc(100% - 8%); /* 親要素の左右のpadding 4%を差し引く */
    height: 20px;
    background: #fcfcfc;
    top: -20px;
    z-index: 1;
    left: 4%; /* paddingと合わせて配置 */
}

.mainVisual__pc {
    display: none;
}

.mainVisual__item--sp {
    position: absolute;
    content: "";
    bottom: 17px;
    left: 0; 
}

.mainVisual__item--pc {
    display: none;
}

.mainVisual__textOverlay {
    color: #5F5253;
    font-family: "Zen Old Mincho";
    font-size: 3.2rem;
    font-weight: 700;
    line-height: normal;

    position: absolute;
    content: "";
    top: 90px;
    left: 4%; 
    z-index: 1;

    /* 文字表示のアニメーション */
    clip-path: inset(0 100% 0 0);
    display: inline-block;
    animation: textanimation 2s 0.5s forwards;
}

.space {
    /* 文字表示のアニメーション */
    clip-path: inset(0 100% 0 0);
    display: inline-block;
    animation: textanimation 2s 2s forwards; 
}

@keyframes textanimation {
    /* 文字表示のアニメーション */
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0);
    }
}

.mainVisual__textOverlay .space {
    display: inline-block;
    margin-left: 32px;
}

/* article__header pc */
@media screen and (min-width: 769px) {

    .article__header {
        position: relative;
        padding: 0 3.5% 90px 23.6%;
    }

    .article__header::before {
        width: calc(100% - 27.1%); 
        left: 23.6%;
    }

    .mainVisual__sp {
        display: none;
    }
    
    .mainVisual__pc {
        display: block;
    }
    
    .mainVisual__item--sp {
        display: none;
    }

    .mainVisual__item--pc {
        display: block;
        position: absolute;
        content: "";
        top: 44px;
        left: 0;
    }

    .mainVisual__textOverlay {
        font-size: 5.6rem;
        top: 0;
        left: 9.7%;
        display: flex;
        justify-content: center;
        height: 100%;
        flex-direction: column;

        align-items: flex-start;  
        padding-bottom: 50px; 
    }

    .mainVisual__textOverlay .space {
        margin-left: 56px;
    }

}/* pc 769px */

/* article__header responsive */

@media screen and (min-width: 500px) and (max-width: 769px) {
    .mainVisual__textOverlay {
        font-size: 4rem;
    }
}

@media screen and (min-width: 769px) and (max-width: 1000px) {
    .mainVisual__textOverlay {
        font-size: 3.2rem;
        padding-bottom: 35px; 
    }
}

@media screen and (min-width: 1001px) and (max-width: 1200px) {
    .mainVisual__textOverlay {
        font-size: 4rem;
        padding-bottom: 40px; 
    }
}

@media screen and (min-width: 1201px) and (max-width: 1439px) {
    .mainVisual__textOverlay {
        font-size: 4.8rem;
        padding-bottom: 45px; 
    }
}

@media screen and (min-width: 1600px) and (max-width: 1840px) {
    .article__header {
        position: relative;
        padding: 0 3.5% 100px 23.6%;
    }

    .mainVisual__textOverlay {
        padding-bottom: 70px; 
    }
}

@media screen and (min-width: 1841px) and (max-width: 2080px) {
    .article__header {
        position: relative;
        padding: 0 3.5% 110px 23.6%;
    }

    .mainVisual__textOverlay {
        padding-bottom: 80px; 
    }
}

@media screen and (min-width: 2081px) and (max-width: 2320px) {
    .article__header {
        position: relative;
        padding: 0 3.5% 120px 23.6%;
    }

    .mainVisual__textOverlay {
        font-size: 6.4rem;
        padding-bottom: 90px; 
    }
}

@media screen and (min-width: 2321px) and (max-width: 2560px) {
    .article__header {
        position: relative;
        padding: 0 3.5% 130px 23.6%;
    }

    .mainVisual__textOverlay {
        font-size: 6.4rem;
        padding-bottom: 100px; 
    }
}

@media screen and (min-width: 2561px) {
    .article__header {
        position: relative;
        padding: 0 3.5% 140px 23.6%;
    }

    .mainVisual__textOverlay {
        font-size: 6.4rem;
        padding-bottom: 110px; 
    }
}/*responsive */

/* section--aboutMe */

.section--aboutMe {
    padding: 63px 4% 25px 4%;
    position: relative;
}

.aboutMe {
    background: #F1EDEA;
    padding: 50px 4.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
    
.aboutMe__title {
    color: #7D6B6C;
    font-family: "Georgia";
    font-size: 2.4rem;
    font-weight: 700;
    line-height: normal;

    position: absolute;
    content: "";
    z-index: 15;
    top: 50px;
    left: 4%; 
}

.aboutMe__frame {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.aboutMe__detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.aboutMe__me {
    display: flex;
    align-items: center;
    gap: 5px;
}

.aboutMe__name {
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 700;
    line-height: normal;
    color: #4D4545;
}

.aboutMe__sns {
    width: 19px;
    height: 19px;
}

.aboutMe__career {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.aboutMe__txt {
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 170%;
}

.aboutMe__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.aboutMe__hobby {
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: normal;
    color: #FCFCFC;

    display: inline-block;
    line-height: 1;
    padding: 5px 10px;
    background: #986363;

    margin-bottom: 5px;
}

.aboutMe__license {
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: normal;
    color: #7A2B2E;

    display: inline-block;
    line-height: 1;
    padding: 5px 10px;
    background: #FCFCFC;

    margin-bottom: 5px;
}

.aboutMe__list1 {
    display: flex;
}

.aboutMe__item {
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-weight: 400;
    line-height: normal;
    display: flex;
}

.aboutMe__item::before {
    content: "・"; 
    margin-right: 1px; 
}

.aboutMe__item.no-dot::before {
    content: ""; 
}

.view-more {
    margin: 0 auto;
}

.aboutMe__btn--sp {
    margin-top: 30px;
    
}

.aboutMe__btn--pc {
    display: none;
    margin: 0 auto;
}

@media screen and (max-width: 375px) {
    .aboutMe__list1 {
        flex-direction: column;
    }

    .aboutMe__item.no-dot::before {
        content: "・";
    }
}

/* section--aboutMe pc */
@media screen and (min-width: 769px) {

    .section {
        max-width: 1440px;
        margin: 0 auto;
    }

    .section--aboutMe {
        padding: 150px 9.7% 90px 9.7%;
    }
    
    .aboutMe {
        padding: 80px 5.2%;
        position: relative;
        max-width: 1160px;
    }

    .aboutMe__title {
        font-size: 4.8rem;
        top: 120px;
        left: 9.7%;
    }

    .aboutMe__frame {
        flex-direction: row;
        gap: 60px;
    }

    .aboutMe__photo {
        width: calc(42.3%);
    }

    .aboutMe__detail {
        max-width: 540px;
        gap: 34px;
    }
    
    .aboutMe__me {
        gap: 16px;
    }

    .aboutMe__name {
        font-size: 2.4rem;
    }

    .aboutMe__sns {
        width: 30px;
        height: 30px;
        overflow:hidden;
    }

    .aboutMe__sns:hover{
        transform:scale(1.2);
	    transition:0.3s;
    }
    

    .aboutMe__career {
        gap: 0px;
    }

    .aboutMe__txt {
        font-size: 1.6rem;
    }

    .aboutMe__content {
        gap: 16px;
    }

    .aboutMe__hobby {
        font-size: 1.5rem;
    }

    .aboutMe__license {
        font-size: 1.5rem;
    }

    .aboutMe__item {
        font-size: 1.6rem;
    }
    
    .profile {
        margin-bottom: 16px;
    }

    .view-more {
        display: inline-block;
        width: auto;
        vertical-align: top;
        
        position: absolute;
        bottom: 80px;
        right: 5.2%;
        
    }
    
    .aboutMe__btn--sp {
        display: none;
    }

    .aboutMe__btn--pc {
        display: block;
        overflow:hidden;
    }

    
    .aboutMe__btn--pc:hover{
	transform:scale(1.05);
	transition:0.3s;
    }

    

}/* pc 769px */

/* section--aboutMe responsive */

@media screen and (min-width: 769px) and (max-width: 1023px) {
    
    .aboutMe__frame {
        flex-direction: column;
    }

    .aboutMe__detail {
        max-width: none;
    }
}

@media screen and (min-width: 769px) and (max-width: 1400px) {

    .aboutMe {
        padding: 80px 5.2% 194px 5.2%; 
    }
    
    .view-more {
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        right: auto; /* 右側の指定を無効化 */
    }

    .aboutMe__btn--sp {
        display: block;
        margin-top: 0px;
    }

    .aboutMe__btn--pc {
        display: none;
    }
    
}/*responsive */

/* section--works */

/* スクロール位置を調整 */
#works {
    scroll-margin-top: 77px; 
}

.section--works {
    display: flex;
    padding: 25px 4% 0px 4%;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.section--works::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 39px;
    bottom: -39px;
    background-color: #FCFCFC; 
    z-index: 10;
}

.works__header {
    position: relative;
}

.works__title {
    color: #7D6B6C;
    text-align: center;
    font-family: "Georgia";
    font-size: 2.4rem;
    font-weight: 700;
    line-height: normal;

    position: absolute; 
    top: -14px; 
    left: 0px; 
    z-index: 15;
}

.works__kainds {
    background: #E5E0DC;
    display: flex;
    /* padding: 39px 4.3% 50px 4.3%; */
    /* 未完成のためレイアウト変更 */
    padding: 20px 4.3% 20px 4.3%;
    justify-content: center; 
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

.works__kainds::before {
    content: "";
    position: absolute;
    width: calc(100% - 8%);
    height: 1px;
    top: 68px;
    background-color: #C0BCB9; 

    /* 未完成のためレイアウト変更 */
    display: none;
}

.works__kaind {
    color: #625B59;
    text-align: center;
    font-family: "Lato";
    font-size: 1.6rem;
    font-weight: 700;
    line-height: normal;
    position: relative;
    border-left: 1px solid #C0BCB9;
    padding: 0 7px;
    cursor: pointer;
}

.works__kaind.is-active {
    color: #926D6B;
}

.works__kaind:first-child {
    border-left: none;
    padding: 0 7px 0 0
}

.works__kaind:last-child {
    padding: 0 0 0 7px;
}

.works__subTitle {
    color: #625B59;
    font-family: "Lato";
    font-size: 2rem;
    font-weight: 800;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    padding: 30px 0 20px 0;
}

.first-section {
    position: relative;
}

.first-section::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 24px;
    top: 20px;
    background-color: #E5E0DC;
    border-radius: 20px;
}

.works__image {
    box-shadow: -2px 2px 15px rgba(200, 200, 200, 0.2);
}

.works__info {
    display: flex;
    padding: 20px 4.3% 35px 4.3%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-bottom: 2px solid #D4D7D9;
    margin-bottom: 35px;
}

.works__lastInfo {
    margin-bottom: 25px;
}

.works__tags {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.works__tag1 { 
    font-family: "Noto Sans JP";
    font-size: 1.2rem;
    font-weight: 500;
    line-height: normal;

    color: #FFF;
    display: flex;
    padding: 3px 5px;
    background: #967878;

    justify-content: center;
    align-items: center;
}

.vertical {
    display: flex;
    gap: 10px;
}

.works__tag2 { 
    font-family: "Noto Sans JP";
    font-size: 1.2rem;
    font-weight: 500;
    line-height: normal;

    display: flex;
    padding: 3px 5px;
    outline: 1px solid rgba(150, 120, 120, 0.50);
    outline-offset: -1px;
    background-color: #fff;
    color: rgba(55, 52, 52, 0.70);

    justify-content: center;
    align-items: center;
}

.works__name {
    color: #373434;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 500;
    line-height: normal;
    width: 100%;
    border-bottom: 1px solid #D4D7D9;
    border-top: 1px solid #D4D7D9;
    padding: 8px 0px;
}

.indention {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.indention__span {
    font-weight: 400;
    font-size: 1.4rem;
    color: #222222;
}

.works__change {
    border-bottom: none;
    padding-bottom: 0px;
}

.works__working {
    font-family: "Noto Sans JP";
    font-size: 1.2rem;
    font-weight: 400;
    line-height: normal;
}

.others-section {
    position: relative;
}

.others-section::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 24px;
    top: 20px;
}

.others-section:nth-child(2)::before,
.others-section:nth-child(4)::before {
    background-color: #F1EDEA;
    border-radius: 20px;
}

.others-section:nth-child(3)::before {
    background-color: #E5E0DC;
    border-radius: 20px;
}

/* section--works pc */

@media screen and (min-width: 769px) {

    /* スクロール位置を調整 */
    #works {
        scroll-margin-top: 106.5px; 
    }

    .section--works {
        padding: 90px 9.7% 0px 9.7%;
    }

    .section--works::before {
        display: none;
    }

    .works__title {
        font-size: 4.8rem ;
        position: absolute; 
        top: 0px; 
    }
    
    .works__kainds {
        padding: 16.5px 0% 89.5px 0%;
        justify-content: flex-end;
        margin-bottom: 20px;
    }

    .works__kainds::before {
        width: 100%;
        height: 28px;
        top: 0px;
        background-color: #FCFCFC; 

        /* 未完成のためレイアウト変更 */
        display: block;
    }
    
    .works__kaind {
        font-size: 1.8rem;
        font-weight: 800;
        padding: 0 9px;
        border-left: 2px solid #C0BCB9;
    }

    .works__kaind:hover{ 
        opacity:0.5;
        transition:0.3s;
    }

    .works__kaind:first-child {
        padding: 0 9px 0 0
    }
    
    .works__kaind:last-child {
        padding: 0 0 0 9px;
    }

    .works__subTitle {
        font-size: 3.2rem;
        padding: 30px 0 50px 0;
    }

    .works__list {
        display: flex;
        gap: 3.4%;
        margin-bottom: 90px;
    }

    .first-section::before {
        height: 50px;
        top: 0;
    }

    .works__item--web .works__info {
        padding: 30px 1.8% 0px 1.8%;
    } 
    
    .works__info {
        padding: 30px 2.8% 0px 2.8%;
        gap: 10px;
        border-bottom: none;
        margin-bottom: 0px;
    }
    
    .works__lastInfo {
        margin-bottom: none;
    }

    .vertical {
        gap: 10px;
    }

    .works__tag1 { 
        font-size: 1.4rem;
        padding: 4px 8px;
    }

    .works__tag2 { 
        font-size: 1.4rem;
        padding: 4px 8px;
    }

    .works__name {
        font-size: 1.8rem;
        padding: 10px 0px;
    }
 
    .indention__span {
        font-size: 1.6rem;
    }

    .pcBr {
        display: none;
    }
    
    .works__change {
        padding-bottom: 0px;
    }

    .works__working {
        font-size: 1.4rem;
    }

    .others-section::before {
        height: 50px;
        top: 0;
    }
    
}/* pc 769px */

/* section--works responsive */


@media screen and (min-width: 769px) and (max-width: 887px) {

    

    .works__tags {
        /* flex-direction: column; */
        width: fit-content;
        gap: 5px;
    }

    .works__tag1 {
        font-size: 1.2rem;
        padding: 3px 5px;
    }

    .vertical {
        gap: 5px;
    }

    .works__tag2 {
        font-size: 1.2rem;
        padding: 3px 5px;
    }

    .indention__span {
        font-size: 1.4rem;
    }

    .works__working {
        font-size: 1.2rem;
    }

}

@media screen and (min-width: 769px) and (max-width: 1390px) {
    .pcBr {
        display: block;
    }
    .padding {
        padding-bottom: 36px;
    }

}

@media screen and (min-width: 769px) and (max-width: 887px) {
    
    .works__name {
        font-size: 1.6rem;
    }
}
/*responsive */
















/* sction--skill */

#skill {
    scroll-margin-top: 84px; 
}

.skill__title {
    color: #7D6B6C;
    font-family: "Georgia";
    font-size: 2.4rem;
    font-weight: 700;
    line-height: normal;
    z-index: 15;
    position: relative;
}

.sction--skill {
    padding: 25px 4% 50px 4%;
}

.skill__list {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.skill__item {
    background: #FCFCFC;
    display: flex;
    padding: 20px 4.3%;
    justify-content: center;
    align-items: center;
    gap: 16px;
    height: 167px;
    border-radius: 10px;
} 

.skill__icon {
    width: 59px;
    height: 59px;
}

.skill__detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.skill__subTitle {
    color: #986363;
    font-family: "Lato";
    font-size: 1.6rem;
    font-weight: 800;
    line-height: normal;
}

.skill__txt {
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 170%;
}

@media screen and (max-width: 375px) {
    .skill__item {
        height: auto;
    } 
}

/* sction--skill pc */

@media screen and (min-width: 769px) {

    #skill {
        scroll-margin-top: 130px; 
    }

    .backgroundColor--skill {
        position: relative;
    }

    .backgroundColor--skill::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 120px;
        top: 0;
        background-color: #FCFCFC; 
    }

    .skill__title {
        font-size: 4.8rem;
    }

    .sction--skill {
        padding: 90px 9.7% 120px 9.7%;
    }

    .skill__list {
        margin-top: 75px;
        display: grid;
        gap: 40px;
        grid-template-columns: repeat(2, 1fr); /* 2列に固定 */
        grid-template-rows: repeat(4, auto);  /* 4行にする（内容によって高さが変わる） */
    }

    .skill__item {
        padding: 20px 3.6%;
        gap: 20px;
        height: auto;
    } 

    .skill__icon {
        width: 86px;
        height: 86px;
        margin: 17px;
    }

    .skill__detail {
        justify-content: center;
    }

    .skill__subTitle {
        font-size: 1.8rem;
    }

    .skill__txt {
        font-size: 1.6rem;
    }

}/* pc 769px */

/* sction--skill responsive */
@media screen and (min-width: 769px) and (max-width: 979px) {
    .skill__item {
        gap: 10px;
    } 
}

@media screen and (min-width: 769px) and (max-width: 822px) {
    .skill__detail {
        min-height: 243.63px;
    }
}

@media screen and (min-width: 823px) and (max-width: 872px) {
    .skill__detail {
        min-height: 216.42px;
    }
}

@media screen and (min-width: 873px) and (max-width: 979px) {
    .skill__detail {
        min-height: 189.22px;
    }
}

@media screen and (min-width: 980px) and (max-width: 1108px) {
    .skill__detail {
        min-height: 162.02px;
    }
}

@media screen and (min-width: 1109px) and (max-width: 1359px) {
    .skill__detail {
        min-height: 134.81px;
    }
}/*responsive */


/* sction--skill animation */

.fadein {
    opacity: 0;
}

.anime {
    animation-name: fade_in;
    animation-duration: 2s;
    opacity: 1;
}

@keyframes fade_in {
    from {
        opacity: 0;
        transform: scale(0.95);  /* 少し縮めた状態 */
    }
    to {
        opacity: 1;
        transform: scale(1);  /* 通常のサイズに戻る */
    }
}


/* top common fade-in animation */
.fade-in-element,
.fade-in-element--works {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}
.fade-in-element.visible,
.fade-in-element--works.visible {
  opacity: 1;
  transform: translateY(0);
}