/*-----------------index Page-----------------*/
/*-----------------Nav-----------------*/
/*----nav background----*/
.navbar.navbar-expand-sm.navbar-light.bg-light {
    background-image: -webkit-linear-gradient(270deg,rgb(167, 239, 243) 0%,rgb(255, 255, 255) 100%);
    background-image: -moz-linear-gradient(270deg,rgb(167, 239, 243) 0%,rgb(255, 255, 255) 100%);
    background-image: -o-linear-gradient(270deg,rgb(167, 239, 243) 0%,rgb(255, 255, 255) 100%);
    background-image: linear-gradient(180deg,rgb(167, 239, 243) 0%,rgb(255, 255, 255) 100%);
}
/*----nav toggler background----*/
.navbar.navbar-expand-sm.navbar-light.bg-light .navbar-toggler {
    background-color: #ADADAD;
}



/*----whole background----*/
.container-fluid {
    background-color: rgb(255, 255, 255);
    
    
}


/*----nav word----*/
.navbar-nav.mr-auto .nav-item .nav-link {
    color: #000000;
}

/*-----------------Card-----------------*/
.container.row.card.col-md-12.col-lg-12 .card-body .card-title {
	margin-bottom: 0px
	
}
.col-xl-6 .card.col-md-12.col-lg-12 .card-img-top {
    padding-top: 10px;
}





/*-----------------Container-----------------*/









/*-----------------footer-----------------*/
footer .row .col-sm-10 {
    color: #FFFFFF;
    text-align: center;
}


footer .row .col-sm-2 img {
padding-top: 100px
}








/*-----------------Media-----------------*/
@media only screen and (max-width: 575px){

	.row .col-sm-2 img {
padding-top: 10px
}



}


/*-----------------About Page-----------------*/
.container-fluid #wording {
    color: #000000;
}

.row #small img {
    border-radius: 10px;
    width: 100%;
}

.row #small2 img {
    border-radius: 20px;
    width: 100%;
}

/*-----------------Card list Page-----------------*/
.row.no-gutters .col-md-8.card {
    border-top-width: 0px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    border-right-width: 0px;
}

.pagination.justify-content-center .page-item .page-link {
	border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

/*-----------------Product Page-----------------*/
.container-fluid #wording {
    color: #000000;
}

.row #product img {
    width: 50%;
}

body > .container {
    min-height: calc( 100vh - 232px );
}



:root {
            --primary-color: #0f2547;
            --secondary-color: #1e40af;
            --accent-color: #3b82f6;
            --bg-color: #f8fafc;
            --text-color: #334155;
            --border-color: #e2e8f0;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.7;
        }

        header {
            background-color: var(--primary-color);
            color: #ffffff;
            padding: 40px 20px;
            text-align: center;
        }

        header h1 {
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            margin-bottom: 10px;
        }

        header p {
            font-size: 1rem;
            color: #94a3b8;
        }

        .container {
            max-width: 900px;
            margin: 60px auto;
            padding: 0 20px;
        }

        .page-title {
            font-size: 1.75rem;
            color: var(--primary-color);
            margin-bottom: 40px;
            text-align: center;
            position: relative;
            padding-bottom: 15px;
        }
        
        .page-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 4px;
            background-color: var(--accent-color);
            border-radius: 2px;
        }

        .page-title2 {
            font-size: 1.75rem;
            color: var(--primary-color);
            margin-bottom: 40px;
            text-align: center;
            position: relative;
            padding-bottom: 15px;
        }
        
        .page-title2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background-color: var(--accent-color);
            border-radius: 2px;
        }
       

        /* タイムライン全体のスタイル */
        .timeline {
            position: relative;
            padding: 20px 0;
        }

        /* 中央の縦線 */
        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 30px;
            width: 4px;
            height: 100%;
            background-color: var(--border-color);
        }

        /* 各タイムラインアイテム */
        .timeline-item {
            position: relative;
            margin-bottom: 40px;
            padding-left: 70px;
        }

        /* タイムラインのドット */
        .timeline-item::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 21px;
            width: 22px;
            height: 22px;
            background-color: #ffffff;
            border: 4px solid var(--accent-color);
            border-radius: 50%;
            z-index: 1;
            transition: all 0.3s ease;
        }

        .timeline-item:hover::before {
            background-color: var(--accent-color);
        }

        /* 年号ブロック */
        .timeline-year {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 8px;
            display: flex;
            align-items: baseline;
        }

        .timeline-month {
            font-size: 1rem;
            color: var(--secondary-color);
            margin-left: 8px;
            font-weight: 600;
        }

        /* コンテンツカード */
        .timeline-content {
            background-color: #ffffff;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            border: 1px solid var(--border-color);
        }

        .timeline-content h3 {
            font-size: 1.15rem;
            color: var(--primary-color);
            margin-bottom: 12px;
            font-weight: 700;
        }

        .timeline-content p {
            font-size: 0.95rem;
            color: var(--text-color);
        }

        /* 大全集などのリスト用 */
        .mook-list {
            margin-top: 10px;
            padding-left: 20px;
            font-size: 0.9rem;
            color: #475569;
        }

        .mook-list li {
            margin-bottom: 4px;
        }

        /* フッター */
        /*footer {
            background-color: var(--primary-color);
            color: #ffffff;
            text-align: center;
            padding: 30px 20px;
            margin-top: 100px;
            font-size: 0.85rem;
        }*/

        /* レスポンシブ対応 (PC用レイアウトの微調整) */
        @media (min-width: 768px) {
            .timeline::before {
                left: 50%;
                transform: translateX(-50%);
            }

            .timeline-item {
                width: 50%;
                padding-left: 0;
                padding-right: 40px;
                left: 0;
                text-align: right;
            }

            /* 右側に配置するアイテム */
            .timeline-item:nth-child(even) {
                left: 50%;
                padding-left: 40px;
                padding-right: 0;
                text-align: left;
            }

            .timeline-item::before {
                left: auto;
                right: -13px;
            }

            .timeline-item:nth-child(even)::before {
                right: auto;
                left: -11px;
            }

            .timeline-year {
                justify-content: flex-end;
            }

            .timeline-item:nth-child(even) .timeline-year {
                justify-content: flex-start;
            }
        }