@charset "UTF-8";

/* ===== common ===== */
/* ===== common ===== */
:root {
    --primary-charcoalgray: #4E454A;
    --primary-yellow: #FAF7F3;

}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    color: #4E454A;
    background-color: var(--primary-yellow);


    /* font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal; */

}

.Topics {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3;
}



.about-me {
    position: relative;
}

.main-visual {
    position: relative;
}



.picture {
    margin-top: 8px;
    display: block;
    width: 100%;
    height: 580px;
    object-fit: cover;
}

.fade-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* 枠の最大幅 */
    height: 650px;
    overflow: hidden;
}

.fade-slider .picture {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.fade-slider .picture:nth-child(3) {
    object-position: 79% center;
}

/* 表示タイミング */
.fade-slider .picture {
    animation: fade 20s infinite;
}

/* 表示タイミング */
.fade-slider .picture:nth-child(1) {
    animation-delay: 0s;
}

.fade-slider .picture:nth-child(2) {
    animation-delay: 5s;
}

.fade-slider .picture:nth-child(3) {
    animation-delay: 10s;
}

.fade-slider .picture:nth-child(4) {
    animation-delay: 15s;
}

@keyframes fade {
    0% { opacity: 0; }
    8% { opacity: 1; }
    28% { opacity: 1; }
    38% { opacity: 0; }
    100% { opacity: 0; }
}

.m-txt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    writing-mode: vertical-rl;
    font-size: 1.6rem;
    font-family: Noto Serif JP;
    font-weight: 2;
    letter-spacing: 1em;
}



/* 左配置用（クラス切り替えで対応） */
/* 左配置用（順番を逆にする） */
.m-txt.left .mainvisual-txt1 {
    left: 32%;
    /* ← 一番左 */
    right: auto;
}

.m-txt.left .mainvisual-txt2 {
    left: 20%;
    right: auto;
}

.m-txt.left .mainvisual-txt3 {
    left: 8%;
    /* ← 一番右 */
    right: auto;
}

/* 右は今のままでOK（デフォルト） */

/* 白文字（3枚目用） */
.m-txt.white {
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.m-txt div {
    position: absolute;
    transition: all 3s ease; 
}

/* 枠 */
.marquee {
    position: absolute;
    top: 85%;
    overflow: hidden;
    width: 100%;
    z-index: 20;
}

/* 動く部分 */
.marquee-inner {
    display: flex;
    gap: 80px;
    width: max-content;
    animation: scrollText 30s linear infinite;
}

/* 文字 */
.marquee span {
    color: #A9DBE7;
    /* ← 薄くする */
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-size: 10rem;
    font-family: "Cormorant Garamond", serif;
    white-space: nowrap;
}

/* アニメーション */
@keyframes scrollText {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}





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

    .picture {
        width: 100%;
        height: 623px;
        object-fit: cover;
    }

    .m-txt.left .mainvisual-txt1 {
        left: 20%;
        /* ← 一番左 */
        right: auto;
    }

    .m-txt.left .mainvisual-txt2 {
        left: 16%;
        right: auto;
    }

    .m-txt.left .mainvisual-txt3 {
        left: 12%;
        /* ← 一番右 */
        right: auto;
    }

    .m-txt {
        font-size: 2rem;
    }

    .fade-slider {
        position: relative;
        width: 100%;
        max-width: 100%;
        /* 枠の最大幅 */
        height: 650px;
        overflow: hidden;
    }

    .marquee {
        top: 74%;
    }


}



/* 経歴 */
.me {
    margin-top: 64px;
}

.sea {
    padding: 64px 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.8),
            rgba(255, 255, 255, 0.8)),
        url(../img/sea2.png);
    background-size: cover;
}

.Biography {
    padding: 0px 14px;
}

.vision {
    padding: 0px 14px;
}

.timeline {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 80px;
    font-family: "Noto Serif JP", serif;
}

.tiitle {
    font-size: 2rem;
}

.resume {
    margin-top: 16px;
    font-size: 1.6rem;
}

.timeline-item {
    display: grid;
    grid-template-columns: 60px 40px 1fr;
    align-items: start;
}

.timeline-date {
    text-align: right;
    font-size: 1.2rem;
    opacity: 0.6;
}

.timeline-line {
    position: relative;
    display: flex;
    justify-content: center;
}




.timeline-dot {
    width: 10px;
    height: 10px;
    background: #4A3F3F;
    border-radius: 50%;
    margin-top: 4px;
}

.scroll-item {
    opacity: 0.3;
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.scroll-item.is-active {
    opacity: 1;
    transform: translateY(0);
}

.resume {
    line-height: 1.7;
}

/*　経歴　pc */
@media screen and (min-width: 769px) {
    .Biography {
        padding: 120px 300px 60px 300px;

    }

    .vision {
        padding: 60px 300px 120px 300px;

    }

    .timeline {
        margin-top: 32px;
    }

    .sea {
        margin-top: 120px;
    }
}


/* 強み　課題 */
/* ===== セクション ===== */
.about {
    margin-top: 64px;
    padding: 0 14px;
}

/* ===== スライダー ===== */
.slider {
    position: relative;
}

/* スライド切り替え */
.slide {
    display: none;
    font-size: 2rem;
}

.slide.active {
    display: block;
}

/* ===== 画像（基準） ===== */
.Strengths {
    position: relative;
}

.water-back {
    width: 100%;
    display: block;
}

/* ===== タイトルエリア（画像全体に広げる） */
.Strengths-title {
    position: absolute;
    inset: 0;
    /* ←これで画像いっぱいに広がる */
    font-size: 2rem;
}

/* ===== タイトル本体（中央固定） */
.title1 {
    position: absolute;
    top: 58%;
    left: 52%;
    transform: translate(-50%, -50%);

    opacity: 0;
    transition: opacity 0.4s;

    text-align: center;
    width: 80%;
    line-height: 1.6;
}

.title1.active {
    opacity: 1;
}

/* ===== テキスト ===== */
.Strengths-txt2 {
    font-size: 1.6rem;
    line-height: 1.5;
}

/* ===== ページ・矢印 ===== */
.page {
    font-size: 1.6rem;
    font-family: "Noto Serif JP", serif;
}

.page-group {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.arrow-prev,
.arrow-next {
    width: 20px;
    cursor: pointer;
}

/* ===== PCだけ横並び ===== */
@media screen and (min-width: 769px) {

    .about {
        margin-top: 160px;
        padding: 0 140px;
    }

    .slider {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 60px;
    }

    /* 左：画像 */
    .Strengths {
        width: 40%;
        flex-shrink: 0;
    }

    /* 右：テキスト全体 */
    .slide {
        display: none;
        width: 40%;
    }

    .slide.active {
        display: block;
    }

}




/* skill */
.skill {
    margin-top: 120px;
    padding: 0 14px;
}

.skill-title1 {
    font-size: 3.6rem;
}

.skill-list {
    display: flex;
    margin-top: 24px;
    margin-bottom: 24px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

/* ===== スキル全体 ===== */
.skill-title {
    font-size: 2rem;
    font-family: "Cormorant Garamond", serif;
    letter-spacing: 0.05em;
}

/* ===== カード ===== */
.skill-card {
    width: 300px;
    border: 1px solid rgba(74, 63, 63, 0.2);
    border-radius: 30px;
    padding: 32px 16px;
    /* ← 重要 */
}



/* ===== ヘッダー（横並び） ===== */
.skill-header {
    display: flex;
    align-items: center;
    position: relative;
    /* ← 重要 */
}

/* ===== ボタン（縦並び） ===== */
.skill-header button {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== アイコン ===== */
.skill1 {
    padding: 16px 0 0 0;
    width: 90%;
    height: auto;
}

.skill-1 {
    padding: 16px 0 0 0;
    width: 71%;
    height: auto;
}

.skill5 {
    padding: 16px 0 0 0;
    width: 52%;
    height: auto;
}

/* ===== 矢印 ===== */
.skill-arrow {
    width: 16px;
    height: auto;
    position: absolute;
    position: absolute;
    right: 0;
    top: 110%;
    transition: transform 0.3s ease;
}

/* ===== 開閉コンテンツ ===== */
.skill-content {
    max-height: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    margin-top: 24px;
    font-size: 1.6rem;
    font-family: "Noto Serif JP", serif;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    line-height: 2;
}

/* ===== 開いた状態 ===== */
.skill-card.active .skill-content {
    max-height: 300px;
    /* 内容に応じて調整 */
    opacity: 1;
    transform: translateY(0);
}

/* 矢印回転 */
.skill-card.active .skill-arrow {
    transform: rotate(180deg);
}

@media screen and (min-width: 769px) {
    .skill {
        padding: 0 140px;
        justify-content: center;
    }

    .skill-list {
        justify-items: center;
        align-items: center;
    }





}





/* hobby */
.hobby {
    margin: 64px 0;
    padding: 0 14px;
}

.hobby-title {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 1.6rem;
    width: 100%;
}

.hobby-explanation {
    display: block;
    font-family: "Noto Serif JP", serif;
    line-height: 1.7;
    padding: 16px 0 0 0;
    font-size: 1.6rem;

}

/* 右横の線 */
.hobby-title::after {
    content: "";
    height: 1px;
    background-color: rgba(74, 63, 63, 0.4);
    flex-grow: 1;
}


.hobby-txt {
    margin-top: 16px;
    font-family: "Noto Serif JP", serif;
    font-size: 1.6rem;
    line-height: 1.7;
}

/* slider base */
.hobby-slider {
    position: relative;
    overflow: hidden;
}

/* radio 非表示 */
.hobby-slider input {
    display: none;
}

/* slides */
.hobby-slides {
    display: flex;
    width: 100%;
    transition: transform 0.4s ease;
}

.hobby-item {
    width: 100%;
    flex-shrink: 0;
}

.hobby_img {
    margin-top: 24px;
    width: 100%;
    height: auto;
    display: block;
}

/* slide control */
#hobby1:checked~.hobby-slides {
    transform: translateX(0);
}

#hobby2:checked~.hobby-slides {
    transform: translateX(-100%);
}

#hobby3:checked~.hobby-slides {
    transform: translateX(-200%);
}

/* dots */
.hobby-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.hobby-dots label {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(74, 63, 63, 0.3);
    cursor: pointer;
}

#hobby1:checked~.hobby-dots label:nth-child(1),
#hobby2:checked~.hobby-dots label:nth-child(2),
#hobby3:checked~.hobby-dots label:nth-child(3) {
    background: #4A3F3F;
}

/*　hobby　pc */
@media screen and (min-width: 769px) {
    .hobby {
        margin-top: 120px;
        padding: 0 140px;
    }

    .hobby-slider input,
    .hobby-dots {
        display: none;
    }

    .hobby-slides {
        margin-top: 24px;
        display: flex;
        width: 100%;
        /* ← 300% を解除 */
        transform: none;
        /* ← translateX を解除 */
        gap: 40px;
    }

    .hobby-item {
        flex: 1;
        padding: 0;
        text-align: left;
        /* お好みで */
    }

    .hobby_img {
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 260px;
        /* 画像大きすぎ防止 */
    }


}