:root {

    --bg-color: #faf8f5;

    --card-bg: #ffffff;

    --text-color: #4a4543;

    --accent-color: #E78198;

    --border-color: #f0eae1;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    font-family: 'Montserrat', 'Noto Sans JP', sans-serif;

    background: linear-gradient(rgba(250, 248, 245, 0.5), rgba(250, 248, 245, 0)), 

                url('./img/bg.jpg');

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    color: var(--text-color);

    line-height: 1.6;

    padding: 40px 15px;

}



.wrapper {

    max-width: 800px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.block {

    background-color: var(--card-bg);

    border-radius: 20px;

    border: 1px solid var(--border-color);

    padding: 35px 30px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);

}



/* --- ヘッダー共通 --- */

.block-header {

    text-align: center;

}



.header-title {

    font-size: 1.6rem;

    color: var(--accent-color);

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 20px;

}



.page-title {

    font-size: 1.4rem;

    color: var(--accent-color);

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 20px;

    text-align: center;

}



.section-title {
    font-size: 1.0rem;
    margin-top: 20px;
    margin-left: 50px;
    margin-bottom: 15px;
    color: #2F3285;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: left;

}



/* --- バナー画像（index用とその他で切り分け） --- */

/* index.html用：縦長で全体が角丸 */

.index-banner {

    width: 100%;

    height: 522px;

    border-radius: 12px;

    overflow: hidden;

    margin-bottom: 20px;

}



.index-banner img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* aboutやworksなどの下層ページ用：細長バナー */

.banner-wrap {

    width: 100%;

    height: 120px;

    border-radius: 12px;

    overflow: hidden;

    margin-bottom: 20px;

}



.banner-wrap img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.banner-common {

    width: 100%;

    height: 120px;

    border-radius: 12px;

    background-size: cover;

    background-position: center;

    margin-bottom: 20px;

}

.banner-works {

    background-image: url('./img/works_header.jpg'); /* Works用画像のファイル名に変更 */

}



/* --- ナビゲーションメニュー（1行に収まる調整済み） --- */

.nav-links {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 6px;

    margin-bottom: 20px;

}



.nav-btn {

    background: var(--bg-color);

    border: 1px solid var(--border-color);

    color: var(--text-color);

    padding: 8px 12px;

    border-radius: 20px;

    text-decoration: none;

    font-size: 0.75rem;

    font-weight: 500;

    transition: 0.3s;

    white-space: nowrap;

}



.nav-btn:hover, .nav-btn.active {

    background: var(--accent-color);

    color: white;

    border-color: var(--accent-color);

}



/* --- SNSアイコン --- */

.sns-links {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 15px;

    margin-bottom: 20px;

}



.sns-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    background: var(--bg-color);

    border: 1px solid var(--border-color);

    border-radius: 50%;

    color: var(--text-color);

    font-size: 1rem;

    text-decoration: none;

    transition: 0.3s;

}



.sns-icon:hover {

    background: var(--accent-color);

    color: white;

    border-color: var(--accent-color);

    transform: translateY(-2px);

}



/* --- プロフィール（左右分割） --- */

/* --- プロフィール（左右分割から背景重ねへ変更） --- */

.split-block {

    /* 枠組みの設定 */

    background: var(--bg-color);

    border: 1px solid var(--border-color);

    border-radius: 16px; /* 角丸を少し大きくすると今風です */

    padding: 40px; /* テキスト用の内側の余白 */

    

    /* 重要：背景画像を表示するための準備 */

    position: relative; 

    overflow: hidden; /* はみ出た背景画像を隠す */

    

    /* 以前の flex 設定は解除します */

    display: block; 

}



/* プロフィールテキストのスタイル（背景画像より手前に表示する） */

/* --- プロフィール専用のカスタムカード設定 --- */

.profile-card-custom{

    position: relative;

    overflow: hidden;

    padding: 30px;

    /* ▼ ここに背景色を指定します ▼ */

    background: #ffffff; /* 例：白にしたい場合 */

    /* または、変数や他のカラーコードを指定する場合：

       background: var(--profile-bg-color, #f9f9f9); 

    */

}



/* テキストエリアの幅を制限して、右側に余白（画像スペース）を作る */

.profile-card-custom .profile-text-wrap,

.split-block .profile-text-wrap {

    position: relative;

    z-index: 2;

    width: 60%; /* 必要に応じて 55% や 65% に微調整してください */

}



/* スマホなどの狭い画面では幅を100%にする（崩れ防止） */

@media (max-width: 768px) {

    .profile-card-custom .profile-text-wrap,

    .split-block .profile-text-wrap {

        width: 100%;

    }

}



/* 右下の背景画像の位置とサイズ */

.profile-bg-img {

    position: absolute;

    z-index: 1;

    right: 10px;

    bottom: 10px;

    width: 320px; /* 画像の大きさに合わせて調整してください */

    height: auto;

    object-fit: contain;

    opacity: 1;

    pointer-events: none;

}

.profile-text-wrap {

    position: relative;

    z-index: 2; /* テキストが背景画像より上に来るようにする */

    width: 60%; /* テキストが背景画像と重なりすぎないよう幅を制限（お好みで調整） */

}



/* レスポンシブ対応：スマホなどの狭い画面ではテキスト幅を100%にする */

@media (max-width: 768px) {

    .profile-text-wrap {

        width: 100%;

    }

}



/* --- 古いスタイルの削除（もしあれば） --- */

/* .vertical-img-wrap (以前の画像を入れていた枠) のCSSは不要になります */



.split-content {

    flex: 1;

}



.vertical-img-wrap {

    width: 240px;

    min-width: 240px;

    height: 330px;

    margin-top: 40px;

    border-radius: 12px;

    overflow: hidden;

    border: 1px solid var(--border-color);

    box-shadow: 0 4px 15px rgba(0,0,0,0.04);

}



.vertical-img-wrap img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* --- YouTubeオートスクロール（index用） --- */

.yt-slider-wrap {

    width: 100%;

    overflow: hidden;

    position: relative;

    padding: 10px 0;

}



.yt-slider {

    display: flex;

    gap: 15px;

    width: max-content;

    animation: scroll 40s linear infinite; /* 秒数はスクロールの速さに合わせて調整してください */

}



.yt-slider-wrap:hover .yt-slider {

    animation-play-state: paused;

}



@keyframes scroll {

    0% {

        transform: translateX(0);

    }

    100% {

        /* リストの半分（＝オリジナル10個分の幅）だけ移動したらピタッと最初の位置に戻る */

        transform: translateX(-50%);

    }

}



.yt-thumb {

    min-width: 220px;

    height: 124px;

    border-radius: 10px;

    overflow: hidden;

    border: 1px solid var(--border-color);

    display: block;

    box-shadow: 0 4px 12px rgba(0,0,0,0.05);

    transition: transform 0.3s;

}



.yt-thumb:hover {

    transform: scale(1.03);

}



.yt-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* --- プロフィール表・アクティビティ（about用） --- */

.concept-text, .about-text {

    font-size: 0.95rem;

    color: #5c5552;

}



.profile-table {

    width: 100%;

    border-collapse: collapse;

}



.profile-table th, .profile-table td {

    padding: 10px 12px;

    border-bottom: 1px solid var(--border-color);

    font-size: 0.85rem;

}



.profile-table th {

    width: 35%;

    color: var(--accent-color);

    text-align: left;

    font-weight: 600;

}



/* --- プロフィール表の英語・補足用スタイル --- */

.profile-table td {

    color: #5c5552;

}



/* 日本語の下に続く英語テキスト用のクラス */

.profile-en {

    display: block;

    font-size: 0.8rem;

    color: #8c847f;

    margin-top: 2px;

}

/* --- 資料画像（縦並び・デザイン幅調整） --- */

.gallery-stack {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 15px;

}



.gallery-item {

    border-radius: 12px;

    overflow: hidden;

    border: 1px solid var(--border-color);

    background: var(--bg-color);

    box-shadow: 0 4px 12px rgba(0,0,0,0.03);

    text-align: center;

}



/* 画像がカードの幅いっぱいに綺麗に収まり、クリックできるカーソルにする */

.gallery-item img {

    width: 100%;

    height: auto;

    max-height: 400px;

    object-fit: contain;

    display: block;

    background: #fff;

    cursor: pointer;

    transition: opacity 0.3s;

}



.gallery-item img:hover {

    opacity: 0.9;

}



.gallery-caption {

    padding: 12px;

    font-size: 0.9rem;

    color: #5c5552;

    font-weight: 500;

    border-top: 1px solid var(--border-color);

}



/* --- 画像を拡大表示するためのモーダル背景（新規追加） --- */

.image-modal {

    display: none; /* 初期状態は非表示 */

    position: fixed;

    z-index: 9999;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.8); /* 黒い半透明の背景 */

    align-items: center;

    justify-content: center;

    cursor: zoom-out;

}



.image-modal img {

    max-width: 90%;

    max-height: 90%;

    border-radius: 8px;

    box-shadow: 0 5px 25px rgba(0,0,0,0.5);

    object-fit: contain;

}

.credit-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

}



.credit-item {

    display: flex;

    flex-direction: column;

    padding: 12px 15px;

    background: var(--bg-color);

    border-radius: 10px;

    font-size: 0.85rem;

    border: 1px solid var(--border-color);

}



.credit-role {

    font-weight: 600;

    color: var(--accent-color);

    font-size: 0.8rem;

    margin-bottom: 4px;

}



.credit-name a {

    color: var(--text-color);

    text-decoration: none;

    font-weight: 500;

}



.credit-name a:hover {

    color: var(--accent-color);

    text-decoration: underline;

}



/* --- タイムライン・お仕事依頼（works用） --- */

.work-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.work-list2 {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-left: 85px;
    margin-right: 85px;
}


.work-item {

    display: flex;

    gap: 20px;

    padding-bottom: 15px;

    border-bottom: 1px solid var(--border-color);

    font-size: 0.9rem;

}



.work-item:last-child {

    border-bottom: none;

    padding-bottom: 0;

}



.work-date {

    font-weight: 600;

    color: var(--accent-color);

    min-width: 75px;

}



.work-desc {

    color: #5c5552;

    flex: 1;

}



.work-desc a {

    color: var(--text-color);

    text-decoration: none;

}



.work-desc a:hover {

    color: var(--accent-color);

    text-decoration: underline;

}



.contact-box {

    font-size: 0.95rem;

    color: #5c5552;

    line-height: 1.8;

}



.contact-box p {

    margin-bottom: 15px;

}



.contact-box ul {

    margin-left: 20px;

    margin-bottom: 20px;

}



.contact-english-section {

    margin-top: 35px;

    padding-top: 30px;

    border-top: 1px dashed var(--border-color);

}



.contact-english-title {

    font-size: 1.1rem;

    color: var(--accent-color);

    font-weight: 600;

    margin-bottom: 15px;

    letter-spacing: 1px;

}



/* --- CONTACTブロック（中央寄せを確実に維持） --- */

.contact-block {

    text-align: center;

    background-color: #fffcfc;

}



.contact-block p {

    margin-bottom: 15px;

    font-size: 0.95rem;

}



.contact-btn-wrap {

    text-align: center;

    margin-top: 25px;

}



.contact-link-btn, .contact-btn {

    display: inline-block;

    background: var(--accent-color);

    color: white;

    padding: 12px 30px;

    border-radius: 25px;

    text-decoration: none;

    font-weight: 600;

    font-size: 0.9rem;

    transition: 0.3s;

    box-shadow: 0 4px 15px rgba(224, 159, 158, 0.3);

}



.contact-link-btn:hover, .contact-btn:hover {

    opacity: 0.85;

    transform: translateY(-2px);

}



/* --- スマホ対応レスポンシブ --- */

@media (max-width: 768px) {

    .split-block {

        flex-direction: column;

    }

    .vertical-img-wrap {

        width: 100%;

        min-width: 100%;

        height: 250px;

    }

    .credit-grid {

        grid-template-columns: 1fr;

    }

    .work-item {

        flex-direction: column;

        gap: 5px;

    }

}



/* --- 用語・あいさつ欄（配信ルール風） --- */

/* --- セクション見出しの強調 --- */

.terms-section {

    margin-top: 40px;

}



.terms-section .section-title {

    font-size: 1.2rem;

    color: var(--text-color, #333);

    border-left: 4px solid var(--accent-color); /* 左側にアクセントカラーの縦線をつける */

    padding-left: 10px;

    margin-bottom: 15px;

    letter-spacing: 0.05em;

    font-weight: bold;

}

/* 用語セクション全体をひとつの大きなカード風にしたい場合（お好みで追加してください） */

.terms-section {

    margin-top: 40px;

    background: rgba(255, 255, 255, 0.5); /* 背景より少し明るい・または半透明の色 */

    border: 1px solid var(--border-color);

    border-radius: 16px;

    padding: 25px;

}



.terms-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 15px;

    margin-top: 15px;

}



.term-card {

    background: var(--bg-color);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 15px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.03);

}



.term-title {

    font-size: 0.85rem;

    color: var(--accent-color); /* アクセントカラー（ピンク等）で項目名を強調 */

    font-weight: bold;

    margin-bottom: 5px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.term-content {

    font-size: 1rem;

    color: #333;

    font-weight: 500;

}



.term-sub {

    font-size: 0.8rem;

    color: #8c847f;

    margin-top: 3px;

}

h1 {

    font-size: 1.8rem;

    letter-spacing: 2px;

    margin-bottom: 24px;

    color: #332e2c;

} 

/* --- しずくの形とアニメーション --- */
.raindrop {
    position: absolute;
    /* 上が尖って下が丸い「しずく型」を作る */
    width: 8px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4); /* 半透明の白（水色っぽくしたい場合は rgba(200, 220, 255, 0.6) などもおすすめ） */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.4); /* 柔らかい光沢感 */
    animation: fall linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(-20px) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(105vh) scale(1);
        opacity: 0;
    }
}

/* --- 全ページ共通：横スクロールバーの発生を完全に防ぐ --- */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 雨のコンテナが画面幅を超えてスクロールを作らないようにする */
.rain-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}

/* --- 経歴を書くブロックの背景を透かす設定 --- */
.block {
    /* 例：白ベースで 80% の不透明度（背景を20%透かす）にする場合 */
    background-color: rgba(255, 255, 255, 0.3) !important;
    
    /* または、サイト全体の背景色を活かして完全に透明にする場合は以下のみにします */
    /* background-color: transparent !important; */
    
    /* お好みでガラスモフィズム（すりガラス風のぼかし）を入れたい場合 */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}