@charset "UTF-8";

/* 1rem = 10px に設定 */
html {
    font-size: 62.5%;
}




*,
*:before,
*:after {
    box-sizing: border-box;
}


body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    background-image: url('/assets/images/hosokikazuko/archive/bg_0.png');
    background-repeat: repeat;
    background-position: top left;
    color: #664003;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 1.2rem;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

.contents {
    display: block;
    position: relative;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}



/* --- フォントクラス --- */
.font-mincho {
    font-family: "Hiragino Mincho ProN", serif;
}



.hero-text-absolute_pc {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
    width: 60%;
    z-index: 10;
}

.hero-text-absolute_sp {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    width: 55%;
    z-index: 10;
}

.hero-sub {
    font-size: 1.6rem;
    line-height: 1.4;
    margin: 0;
    font-weight: 700;
    text-align: center;
}

.hero-name {
    font-size: 3.2rem;
    margin: 1rem 0;
    line-height: 1;
    text-align: center;
    font-weight: bold;
}

.hero-separator {
    width: 20%;
    height: 1px;
    background-color: #d0b64f;
    margin: 0 auto;
    margin-top: 2.0rem;
    margin-bottom: 2.0rem;
}

.hero-desc {
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 0;
}

/* --- ナビゲーションパネル --- */
.nav-section {
    background-image: url('/assets/images/hosokikazuko/archive/bg_1.png');
    background-size: cover;
    background-position: center;
    padding: 2rem 2.0rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.nav-card {
    background: linear-gradient(to bottom, #fee8f2, #FFF);
    border: 1px solid #d4af37;
    padding: 1.5rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.nav-card h2 {
    font-size: 1.4rem;
    margin: 0;
    display: inline-block;
    padding-bottom: 2px;
}

.nav-card h2 a {
    color: #664003;
    text-decoration: none;
    border-bottom: 1px solid #664003;
    display: block;
}

.btn-view {
    display: block;
    width: 100%;
    max-width: 120px;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 0;
    font-size: 1.2rem;
    border-radius: 4px;
}

/* --- メイン見出し (h1) --- */
.main-heading-section {
    width: 100%;
    background-image: url('/assets/images/hosokikazuko/archive/h1_bg_1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 4rem 1rem;
    text-align: center;
}

.main-heading {
    font-family: "Hiragino Mincho ProN", serif;
    color: #664003;
    font-weight: normal;
    margin: 0;
    line-height: 1.3;
}

.main-heading-ja {
    display: block;
    font-size: 3.2rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.main-heading-en {
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
}



























/* コンテンツ内部はスマホ基準で常に縦並び */
.body-row {
    display: block;
}


.description-block:empty {
    display: none;
}

.link-block {
    margin-top: 1.5rem;
    font-size: 1.2rem;
}

.link_name {
    color: #e85298;
    text-decoration: none;
    font-weight: bold;
}

.link-more {
    color: #e85298;
    text-decoration: none;
    display: inline-block;
    margin-top: 1rem;
    border-bottom: 1px solid #e85298;
    padding-bottom: 1px;
}







/* --- ナビゲーション新デザイン --- */
.top-nav {
    background-color: #4d3102;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 0;
}

.top-nav a {
    color: #dfc79b;
    text-decoration: none;
    font-size: 1.3rem;
    padding: 1.2rem 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    letter-spacing: 0.1em;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.top-nav a:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.top-nav a:hover {
    background-color: #664003;
    color: #fff;
}

/* 現在地表示 */
.top-nav a.current {
    background-color: #664003;
    color: #fff;
    font-weight: bold;
}

.top-nav a.current::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #e85298;
}

/* --- ヒーローセクション --- */
.hero-section_pc {
    display: block;
    position: relative;
    width: 100%;
    background-color: #fdf5e6;
    line-height: 0;
}

.hero-section_sp {
    display: none;
    position: relative;
    width: 100%;
    background-color: #fdf5e6;
    line-height: 0;
}

.hero-person {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.hero-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem 5% 0;
    display: flex;
    flex-direction: column;
    z-index: 2;
    line-height: 1.6;
}

.main-title {
    font-size: 2.4rem;
    margin: 0;
    color: #664003;
}

.sub-title-en {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    display: block;
    color: #664003;
}

.hero-intro-text {
    font-size: 1.4rem;
    line-height: 1.6;
    max-width: 60%;
    margin: 0;
}

/* --- 格言カードエリア --- */
.quotes-container {
    padding: 2rem;
    background-color: #f9f6f0;
}
.quote-card {
    position: relative;
    background-color: #fff;
    border: 2px solid;
    border-image-source: linear-gradient(45deg, #b87333, #f9f0d1, #dec08a, #8a6628);
    border-image-slice: 1;
    padding: 20px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.quote-headline {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.quote-source {
    font-size: 1.1rem;
    text-align: right;
    margin-bottom: 2rem;
    color: #888;
}
.kazari_meigen {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 15%;
    opacity: .5;
}





/* --- タブ切り替え --- */
.sub-tabs {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 3rem 0;
}

.tab-btn {
    display: inline-block;
    background-color: #4d3102;
    color: #dfc79b;
    text-decoration: none;
    padding: 0.8rem 3rem;
    font-size: 1.6rem;
    transition: 0.3s;
    font-weight: 700;
}

.tab-btn.active {
    background-color: #664003;
    color: #fff;
    border-bottom: 4px solid #e85298;
}

/* --- コンテンツセクション --- */
.app-section {
    position: relative;
    width: 100%;
    background-color: #fdf5e6;
    padding: 20px 2rem 2rem;
}

.program-item {
    margin-bottom: 20px;
    display: block;
    position: relative;
    width: 100%;
    background-color: #FFF;
    padding: 20px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

/* 回り込み解除 */
.program-item::after {
    content: "";
    display: block;
    clear: both;
}


.program-title {
    width: 100%;
    font-size: 1.6rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #664003;
    line-height: 1.4;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg,
        #b8860b 0%,
        #eec55d 25%,
        #eec55d 75%,
        #b8860b 100%) 1;
}

/* 画像を右下に配置（右に回り込み） */
.program-img {
    float: right;
    width: 140px;
    /* 画像のサイズ */
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.program-text {
    /* タイトルの下、画像の左側にテキストが流れる */
}

.program-description {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 0;
}

.str {
    font-weight: 700;
}

.featured-section {
    background-image: url('/assets/images/hosokikazuko/archive/degAc_3_0_bg.webp');
    background-size: cover;
    background-position: center;
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
    display: block;
}

.featured-section2 {
    background-image: url('/assets/images/hosokikazuko/archive/degAc_3_1_bg.webp');
    background-size: cover;
    background-position: center;
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
    display: block;
}

.featured-section h2 {
    width: 100%;
    /* タイトルは横いっぱいに使う */
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    /* 画像との間の余白 */
    color: #664003;
    line-height: 1.4;
    display: block;
    /* 確実に一行占有させる */
}

.featured-section2 h2 {
    width: 100%;
    /* タイトルは横いっぱいに使う */
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    /* 画像との間の余白 */
    color: #664003;
    line-height: 1.4;
    display: block;
    /* 確実に一行占有させる */
}

.featured-img {
    float: left;
    /* 画像を左に寄せる（タイトルの左下） */
    width: 30%;
    /* 画像サイズ */
    margin-right: 1.5rem;
    margin-bottom: 0.5rem;
}

.featured-text {
    /* 画像の右側にテキストが流れる（タイトルの右下） */
}

.featured-description {
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0;
}

/* 回り込み解除 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.category-box {
    text-align: center;
    width: 200px;
    margin: 0 auto;
    margin-top: 30px;
    line-height: 0;
    padding: 5px 0 5px 0;
    border: 1px solid;
    border-image: linear-gradient(30deg,
        #b8860b 0%,
        #eec55d 25%,
        #fbf5b7 50%,
        #eec55d 75%,
        #b8860b 100%) 1;
}


.category-title {
    font-size: 2rem;
    font-weight: bold;
}

.book-list {
    padding: 0 2rem 2rem;
	max-width: 730px;
	margin: 0 auto;
}


.description-section {
    padding: 0 2rem 2rem;
}


.intro {
    padding: 20px;
}

.book-item {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 1px dotted #dfd5c3;
}

.book-img {
    width: 80px;
    flex-shrink: 0;
}

.book-info strong {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}






/* --- テキスト・導入エリア --- */
.intro {
    padding: 20px;
}

.txt_normal {
    padding: 5px 20px;
}

.title-movie {
    padding: 10px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 40px;
    background-image: url('/assets/images/hosokikazuko/archive/bg_1.png');
    background-size: cover;
    letter-spacing: .2em;
}

/* --- 会員登録ボタン --- */
.submit-btn {
    display: block;
    position: relative;
    width: 240px;
    font-weight: 700;
    text-align: center;
    padding: 15px 10px;
    line-height: 1.2;
    color: #FFF;
    text-decoration: none;
    border-radius: 5px;
    background: linear-gradient(135deg, #b8860b 0%, #d7af4b 25%, #d7af4b 75%, #b8860b 100%);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
    margin: 20px auto;
}

/* --- 動画リスト (video-grid) --- */
.video-grid {
    width: 96%;
    margin: 0 auto;
}

.video-item {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px dotted #dfd5c3;
    padding: 15px 0 5px 0;
    width: 100%;
    text-decoration: none;
    color: inherit;
    gap: 15px;
}

.video-thumbnail {
    flex: 0 0 25%;
    line-height: 0;
}

.video-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.video-description {
    flex: 0 0 65%;
}

.video-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: bold;
    color: #664003;
    line-height: 1.2;
}

.video-text {
    font-size: 1.2rem;
    color: #664003;
    line-height: 1.3;
    margin-top: 10px;
}

.video-arrow {
    flex: 1;
    text-align: right;
    font-size: 1.6rem;
    color: #d4af37;
    align-self: center;
}












/* ■■■ 吹き出し ■■■ */
.social-box {
    background-color: #f2f2f2;
    padding: 15px;
    border-radius: 4px;
    font-size: 1.0rem;
    line-height: 1.6;
}

.social-box-copied {
    background: #f2f2f2;
    margin-left: 0px;
    border-radius: 6px;
    margin-bottom: 20px;
}
/* --- 共通設定：吹き出しの基点 --- */
.social-box, 
.social-box-copied {
    position: relative; /* 擬似要素の基準にする */
}

/* --- PC版：social-box（上辺の右側に上向きの角） --- */
.social-box::before {
    content: "";
    position: absolute;
    top: -10px;       /* ボックスの上に配置（三角形の高さ分） */
    right: 15px;      /* 右端からの距離 */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #f2f2f2; /* ボックスの背景色と同じ */
}

/* --- スマホ版：social-box-copied（上辺の左側に上向きの角） --- */
.social-box-copied::before {
    content: "";
    position: absolute;
    top: -10px;       /* ボックスの上に配置 */
    left: 10px;       /* 左端からの距離 */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #f2f2f2; /* ボックスの背景色と同じ */
}

/* 中身が空の場合は角も表示しない */
.social-box-copied:empty::before {
    display: none;
}


/* 追加 */
.disp-pc{
	display:block !important;
}

.disp-sp{
	display:none !important;
}
	.degAc_3 {
		width: 100%;
	}
	.degAc_3 th {
		text-align: left;
		white-space: nowrap;
		padding: 0.6rem;
	font-size: 1.4rem;
    line-height: 1.8;
    margin: 0;
}
/* ==movie== */
.movie-detail__contents--movie-block {
	max-width: 750px;
	margin: 1rem auto;
	padding: 1rem;
	background: -webkit-repeating-linear-gradient(-45deg, #fcf9d6, #fcf9d6 3px,#fbf7c4 3px, #fbf7c4 7px);
    background: repeating-linear-gradient(-45deg, #fcf9d6, #fcf9d6 3px,#fbf7c4 3px, #fbf7c4 7px);
    border: 1px solid #af9572;
    border-radius: 0.2rem;
}
.movie-detail__contents--movie-title {
	font-size: 1.2rem;
	font-weight: bold;
	margin: 0 0 0.4rem;
	text-align: center;
	user-select: none;
}
.movie-detail__contents--movie-title-date {
	color: #eb6d9a;
	font-size: 0.8rem;
}
.movie-detail__contents--movie-title-sentence {
	display: block;
	text-align: left;
}


.movie-detail__contents--movie-wrapper, .movie-detail__contents--movie-img-wrapper {
	position: relative;
	width: 100%;
}
.movie-detail__contents--movie-wrapper::before {
	content: '';
	display: block;
	padding-top: 56.25%;
}
.movie-detail__contents--movie-wrapper > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.movie-detail__contents--movie-img-wrapper::before {
	background-image: url("/assets/images/movie/movie_key_m.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
}
/* ==movie== */



/* --- PC調整 (751px以上) --- */
@media (min-width: 751px) {
    html {
        font-size: 100%;
    }

    .contents {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }



    .category-box {
        width: 280px;
    }




    .main-title {
        font-size: 3.2rem;
    }

    .sub-title-en {
        font-size: 1.4rem;
    }








    /* nav-sectionを横並びにする設定 */
    .nav-section {
        display: flex;
        /* 横並びを有効化 */
        justify-content: space-between;
        /* 均等に配置 */
        gap: 20px;
        /* カード同士の間隔 */
        padding: 40px 20px;
        /* 上下の余白 */
    }

    /* 各カードの幅調整 */
    .nav-card {
        flex: 1;
        /* すべて同じ幅にする */
        display: flex;
        flex-direction: column;
        /* カード内の要素を縦に並べる */
        justify-content: space-between;
        /* ボタンの位置を下に揃える */
        padding: 20px;
        background: linear-gradient(to bottom, #fee8f2, #FFF);
        border: 1px solid #dfc79b;
        text-align: center;
    }

    /* カード内のテキスト微調整 */
    .nav-card p {
        margin-bottom: 20px;
        font-size: 1.2rem;
    }






    /* PC時、説明文と画像を横並びにする */
    .body-row {
        display: flex;
        align-items: flex-start;
        /* 上揃え */
        gap: 1rem;
        /* 文と画像の間隔 */
    }

    .description-block {
        flex: 1;
        /* テキスト側を可変幅に */
        margin-bottom: 0;
        /* 横並び時は下の余白をリセット */
        font-size: 1.0rem;
        line-height: 1.4;
    }

    .photo-box {
        flex-shrink: 0;
        /* 画像が潰れないように固定 */
        width: 25%;
        max-width: 300px;
    }

    .life-photo {
        float: right;
        width: 160px;
        /* 写真サイズ */
        margin-left: 1rem;
        margin-bottom: 0.5rem;
        border-radius: 4px;
    }





    .era-item {
        margin-bottom: 2rem;
    }

    .era-year {
        display: block;
        font-size: 1.6rem;
        font-weight: bold;
        color: #b8860b;
        margin-bottom: .5rem;
    }

    .timeline-container {
        flex: 0 0 75%;
        /* 右カラム：3/4 */
    }



    /* degAc2.htmlのタイトル部分。PCは変更 */
    .hero-text-overlay {
        position: absolute;
        top: 0;
        left: 6%;
        width: 70%;
        height: 100%;
        display: flex;
        flex-direction: column;
        z-index: 2;
        padding-top: 50px;
        line-height: 1.4;
        text-align: center;
    }

    .hero-intro-text {
        font-size: 1.2rem;
        line-height: 1.6;
        max-width: 100%;
        margin: 0;
    }



    /* Time Line */

    .timeline-pc-container {
        position: relative;
        padding: 50px 20px;
        max-width: 1000px;
        margin: 0 auto;
    }

    /* 中央の垂直ライン */
    .timeline-pc-container::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 300px;
        width: 1px;
        background-color: #d4af37;
    }

    .timeline-row {
        display: flex;
        gap: 40px;
        /* カラム間の余白 */
        margin-bottom: 60px;
        align-items: flex-start;
    }

    /* 左カラム（西暦＋社会背景）: 25%程度 */
    .left-group {
        flex: 0 0 250px;
        /* 幅を固定（または25%） */
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* 西暦ラベル */
    .year-col {
        text-align: right;
        position: relative;
    }

    /* ライン上の金色の円 */
    .year-col::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        right: -36px;
        /* 中央ラインに合わせる */
        top: 15px;
        background: #fff;
        border: 1px solid #d4af37;
        border-radius: 50%;
        z-index: 2;
    }

    .year-label {
        font-size: 1.6rem;
        font-weight: normal;
        color: #8a6628;
        font-family: Arial, sans-serif;
    }

    /* 社会背景：左揃え（グレー背景） */
    .social-col {
        text-align: left;
    }

    .social-box {
        display: block;
    }
    .social-box-copied {
        display: none;
    }
    
    

    /* 右カラム（生い立ち）: 残りの幅 */
    .bio-col {
        flex: 1;
    }
    

    .content-card {
        background: #fff;
        padding: 25px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        margin-left: 20px;
        border: 1px solid #eee;
        border-radius: 6px;
        margin-bottom: 20px;
    }

    .title-block {
        font-size: 1.8rem;
        font-weight: bold;
        color: #664003;
        margin-bottom: 15px;
    }


    
    
    
    /* 名言・格言集の横並び */
    /* 1. フレックスコンテナの設定 */
    .quote-flex-container {
        display: flex;
        align-items: center; /* 垂直方向の中央揃え */
        gap: 40px;           /* テキストと画像の間隔 */
    }

    /* 左側：テキストエリア */
    .quote-text-side {
        flex: 1;             /* 画像がない時、残りのスペースをすべて埋める（全幅になる） */
    }

    /* 右側：画像エリア */
    .quote-img {
        flex: 0 0 40%;       /* 画像がある時は、幅40%で固定（6:4の比率） */
    }

    /* 内部の微調整 */
    .quote-body {
        margin-bottom: 15px; /* リンクがある場合の間隔 */
    }
    
    /* 【重要】中身が空の場合に要素ごと非表示にする */
    .quote-img:empty {
        display: none;
    }

}






/* --- スマホ調整 (750px以下) --- */
@media (max-width: 750px) {
    .main-heading-ja {
        font-size: 2.6rem;
    }


    .intro,
    .txt_normal,
    .video-text {
        font-size: 1.4rem;
        /* 読みやすさのため微調整 */
    }

    .submit-btn {
        font-size: 2.0rem;
    }

    .hero-section_pc {
        display: none;
    }

    .hero-section_sp {
        display: block;
    }

    .hero-desc {
        font-size: 1.4rem;
    }

    .featured-section h2 {
        font-size: 1.6rem;
    }


    .featured-description {
        font-size: 1.6rem;
    }


    .tab-btn {
        padding: 0.8rem 1.5rem;
        font-size: 1.4rem;
    }


    .book-item {
        gap: 1.5rem;
    }

    .book-info strong {
        font-size: 1.6rem;
    }

    .book-info {
        font-size: 1.4rem;
    }

    .program-title {
        font-size: 1.8rem;
    }

    .description-text {
        font-size: 1.4rem;
    }

    .top-nav a {
        padding: 1rem 0.8rem;
        font-size: 1.1rem;
        letter-spacing: 0;
    }

    .main-title {
        font-size: 2.6rem;
    }

    .sub-title-en {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    .hero-intro-text {
        max-width: 55%;
    }

    .quote-headline {
        font-size: 1.6rem;
    }


    .link-more {
        font-size: 1.4rem;
    }




    /*年表*/
    /* 1. 元のsocial-colを非表示にし、コピー先を表示 */
    .social-col {
        display: none !important;
    }



    /*スマホ年表のレイアウト調整*/
    /* 2. SP版のレイアウト調整 */
    .timeline-pc-container {
        position: relative;
        padding: 30px 15px;
    }

    .timeline-row {
        display: block;
        /* 横並び解除 */
        margin-bottom: 40px;
        position: relative;
        padding-left: 25px;
        /* 縦ライン用の余白 */
    }

    /* 左カラム（西暦のみ表示される状態） */
    .left-group {
        display: block;
        margin-bottom: 10px;
    }


    /* 西暦ラベル */
    .year-col {
        text-align: left;
        position: relative;
    }



    .year-label {
        font-size: 2rem;
    }

    /* 3. 縦ラインの再設定（スマホでは左側に配置） */

    /* 中央の垂直ライン */
    .timeline-pc-container::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20px;
        width: 1px;
        background-color: #d4af37;
    }

    /* ライン上の金色の円 */
    .year-col::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        left: -24px;
        /* 中央ラインに合わせる */
        top: 15px;
        background: #fff;
        border: 1px solid #d4af37;
        border-radius: 50%;
        z-index: 2;
    }


    /* 4. コンテンツエリアの余白リセット */
    .bio-col {
        padding-left: 0;
    }



    /* 5. 他 */
    
    .social-box {
        font-size: 1.4rem;
    }
    .social-box-copied {
        display: block;
    }
    .social-box-copied:empty {
        display: none;
    }
    /* 追加：スマホ版では .social-box 自体の角（右側用）を消す */
    .social-box::before {
        display: none;
    }

    .content-card {
        background: #fff;
        padding: 25px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        margin-left: 0;
        border: 1px solid #eee;
        border-radius: 6px;
        margin-bottom: 20px;
        font-size: 1.4rem;
    }

    .title-block {
        font-size: 1.8rem;
        font-weight: bold;
        color: #664003;
        margin-bottom: 10px;
    }

    
    
    /* 名言・格言集の横並び */
    .quote-flex-container {
        display: block; /* スマホでは縦並びに戻す */
    }
    .quote-img {
        margin-top: 20px;
        text-align: right; /* 画像を右寄せにする場合 */
    }
    .kazari_meigen {
        top: -10px;
        left: -15px;
    }

	
    /* 追加 */
	.disp-sp{
        display:block !important;
    }
	.disp-pc{
	display:none !important;
    }

}

.m-0 {
	margin: 0;
}
.text-center {
	text-align: center;
}
.footer {
	margin-bottom: 5.4rem;
}