/*
Theme Name: Sydney Child
Theme URI: http://athemes.com/theme/sydney
Author: aThemes
Author URI: http://athemes.com
Template: sydney
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sydney


body.sticky-header-active .shfb.has-sticky-header.sticky-row-main-header-row .sticky-active {
    position: fixed;
    width: 100%;
    top: 10px;
    left: 0;
    z-index: 999;
}*/


/* sticky時（ここが重要） 
body.sticky-header-active .shfb-main_header_row {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}*/

/* sticky時の中身も調整 */
body.sticky-header-active .shfb-row-wrapper .container {
    max-width: 1600px;
    margin: 0 auto;
}

.hero-custom {
    position: relative;
    height: 600px;
    overflow: hidden;
}

/* =========================
   共通タイトル
========================= */

.section-heading{
    margin-bottom:/*80*/40px;
    margin-top:30px;
    font-size:clamp(42px,6vw,72px);
    font-weight:700;
    line-height:1;

    color:#001b4c;
}

.section-heading span{
    color: #f39800;
}

/* 共通セクション幅 */
.section-message,
.section-works,
.section-business,
.topics{
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}


.section-intro{
    max-width: /*800*/900px;
    margin: 0 auto 60px;
    text-align: /*center*/left;
}

.section-intro p{
    line-height: 2;
    color: #555;
    font-size: 16px;
}/* 共通コンテナ */
.section-message .container,
.section-works .container,
.section-business .container,
.topics .container{
    max-width: 1400px;
    margin: 0 auto;
}

/* ヘッダー全幅 */
#masthead,
.site-header,
.shfb {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
}

.shfb-row-wrapper,
.shfb-main_header_row {
    background: transparent !important;
}

/* ヘッダーの中だけ背景 */
.home .shfb-main_header_row {
    max-width: 1200px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(10px);
    border-radius: 10px;
}


/* 背景 */
.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://hinata-m.co.jp/wp-content/uploads/2026/04/header_top_photo-1.png') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.content-wrapper {
    background: #fff;
    /*padding: 60px 40px;*/
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}


/* =========================
   動く写真（完全整理版）
========================= */
.photo-wrap {
    position: absolute;
    overflow: hidden;
}

.photo1-wrap { top: 80px; right: 20%; width: 20%; }
.photo2-wrap { bottom: 0; right: 10%; width: 30%; }
.photo3-wrap { top: 0; right: 18%; width: 25%; }

/* =========================
   動く写真（完成版）
========================= */

.photo-wrap {
    position: absolute;
    overflow: visible;   /* ←画面外から見せる */
    z-index: 5;
}

/* 位置 */
.photo1-wrap { top: 0; right: 20%; width: 20%; }
.photo2-wrap { top: 0; right: 10%; width: 30%; }
.photo3-wrap { top: 0; right: 18%; width: 25%; }

/* 画像 */
.photo-wrap img {
    width: 100%;
    display: block;
    animation: floatUp 25s linear infinite;
    animation-fill-mode: backwards; /* ←これ追加 */
}

/* ずらし（時間差） */
.photo1-wrap img { animation-delay: 2s; }
.photo2-wrap img { animation-delay: 11s; }
.photo3-wrap img { animation-delay: 17s; }

/* アニメーション */
@keyframes floatUp {
    0% {
        transform: translateY(120vh);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        transform: translateY(-120vh);
        opacity: 1;
    }
}

.home .shfb-main_header_row {
    max-width: 1600px;
}

/* テキスト */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding-top: 200px;
}

/* 浮かせる */
.floating {
    position: absolute;
    z-index: 20;
}


.sydney-hero-area {
    display: none !important;
}




/* ===== アニメーション追加 ===== */

.img1, .img2, .img3 {
    position: absolute;
    top: 100%;   /* ←画面の下からスタート */
    z-index: 5;
    animation: floatRotate linear infinite;
}

.img1 {
    right: 18%;
    width: 26%;
    animation-duration: 28s;
}

.img2 {
    right: 15%;
    animation-duration: 30s;
}

.img3 {
    right: 20%;
    animation-duration: 22s;
}

.text1{
    bottom: 0px;
    right: 40%;
    position: absolute;
    z-index: 3;
	width:20%;
    animation: floatUp 30s linear infinite;
}

@keyframes floatRotate {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(-120vh) rotate(360deg);
    }
}





.hero-bg {
    z-index: 1;
}

.hero-content {
    position: absolute;
    top: 30%;
	left: 13%;
    transform: translateY(-50%);
    text-align: left;
	z-index: 10000;
}

.hero-content h1 {
    font-size: 40px;
}

.hero-content p {
    font-size: 18px;
	color:#000000;
}


.hero-custom {
    min-height: 600px;
    height: 100vh;
}

/* ===== 背景 ===== */
#page {
    max-width: 1800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
}



body {
    background: repeating-linear-gradient(
        45deg,
        #f3f3f3,
        #f3f3f3 8px,
        #ffffff 8px,
        #ffffff 16px
    );
}

.content-wrapper {
    padding: 40px 20px; /* 少し狭くする */
}

.section-message,
/*.section-business,*/
.section-about,
.section-works {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 40px;
}

.section-business{
    background: linear-gradient(
        180deg,
        #fff8ef 0%,
        #ffe8cc 100%
    );

    border-radius: 30px;

    padding: 120px 60px;
}
/* スマホ用 */
@media (max-width: 768px) {
    #page {
        margin: 0;
        max-width: 100%;
    }

    .content-wrapper {
        padding: 0 20px;
    }
}

/* ===== MESSAGEセクション ===== */
.section-message {
    /*padding: 80px 20px;*/
    text-align: center;
}

/* タイトル 
.section-title {
    font-size: 32px;
    margin-bottom: 40px;
    letter-spacing: 2px;
}*/

/* 中身レイアウト 
.message-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 100%;
    margin: 0 auto;
}*/
.message-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 80px;

    max-width: 1400px;
    margin: 0 auto;
}

/* 画像 
.message-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
}*/
.message-image{
    width: 50%;
}

.message-image img{
    width: 100%;
    border-radius: 20px;
    display: block;
}

/* テキスト 
.message-text {
    text-align: left;
    max-width: 500px;
}

.message-text h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.message-text p {
    line-height: 1.8;
}*/
.message-text{
    width: 50%;
}

.message-text h3{
    font-size: 48px;
    margin-bottom: 40px;
    line-height: 1.4;
}

.message-text p{
    line-height: 2.2;
    font-size: 16px;
}


@media (max-width: 768px) {
    .message-inner {
        flex-direction: column;
        text-align: center;
    }

    .message-text {
        text-align: center;
    }
}

.section-message /*.section-title*/{
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 80px;
    color: #001b4c;
}

.section-message /*.section-title*/ span{
    color: #f39800;
}



/* ===== WORKSセクション ===== *//**/
.section-works {
    padding: 80px 20px;
    text-align: center;
}

/* タイトル */
.section-title {
    font-size: 32px;
    margin-bottom: 40px;
    letter-spacing: 2px;
}
/* タイトル */
/*.section-works .section-title{
    font-size: 64px;
    font-weight: 700;

    margin-bottom: 80px;

    color: #001b4c;
}*/

/* 中身レイアウト */
.works-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

/* 画像 */
.works-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
}

/* テキスト */
.works-text {
    text-align: left;
    max-width: 500px;
}

.works-text h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.works-text p {
    line-height: 1.8;
}

@media (max-width: 768px) {
    .works-inner {
        flex-direction: column;
        text-align: center;
    }

    .works-text {
        text-align: center;
    }
}


/* ===== OUR BUSINESSセクション ===== */
.section-business {
    /*padding: 80px 20px;*/
    text-align: center;
}

.business-list {
    display: flex;
    gap: 30px;
    justify-content: center;
}


.business-item img {
    width: 100%;
}


.business-sticky {
    display: flex;
    align-items: flex-start;
    gap: 20px;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 120px 40px;
	background-color:#fff3e0;
}
.business-sticky1 {
    display: flex;
	flex-direction: column;
    align-items: flex-start;
    gap: 20px;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 10px 40px;
	background-color:#fff3e0;
}/* 左 */
.business-left {
    width: 55%;
    flex-shrink: 0;

    position: sticky;
    top: 120px;

    height: 80vh;
}

.business-left img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;
    transition: opacity 0.6s ease;

    border-radius: 20px;
}

.business-left img.active { opacity: 1; }

/* 右 */
.business-right {
    width: 45%;
    padding-left: 60px;

    display: flex;
    flex-direction: column;
	gap: 40vh;   /* ←超重要 */
}

.business-item {
    opacity: 0.3;
    transition: 0.4s;
}

.business-item.active {
    opacity: 1;
}

.business-item {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-bottom: 1px solid #ddd;
    padding: 100px 0;
}

.business-item .num {
    color: #f39800;
    margin-bottom: 20px;
}

.business-item h3 {
    font-size: clamp(28px, 4vw, 42px);
    white-space: nowrap;
}

.business-item p {
    max-width: 600px;
    line-height: 2.2;
}

.business-intro{
    max-width: /*700px*/90%;
    line-height: 2;
	margin-top: 8px;
    font-size: 16px;
}

/* ===== WOKSセクション ===== */
/*.section-works {
    　　　　　padding: 80px 20px;
    text-align: center;
}

.works-list {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.works-item {
    width: 30%;
}

.works-item img {
    width: 100%;
}*/
/* ===== WORKS ===== */

.section-works{
    background: #f7f7f7;

    padding: 120px 80px;
    border-radius: 20px;

    margin-bottom: 120px;
}

/* タイトル */
/*.section-works .section-title{
    font-size: 64px;
    font-weight: 700;

    margin-bottom: 80px;

    color: #001b4c;
}*/

/*.section-works .section-title span{
    color: #f39800;
}*/

/* 中身 */
.works-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 80px;

    max-width: 1400px;
    margin: 0 auto;
}

/* テキスト */
.works-text{
    width: 50%;
}

.works-text h3{
    font-size: 48px;
    line-height: 1.4;

    margin-bottom: 40px;
}

.works-text p{
    font-size: 16px;
    line-height: 2.2;
}

/* 画像 */
.works-image{
    width: 50%;
}

.works-image img{
    width: 100%;
    border-radius: 20px;

    display: block;
}
/* ===== WORKS SLIDER ===== */

.works-slider-section{
    overflow: hidden;
    padding: 100px 0;
}

/* 横並び */
.works-slider-track{
    display: flex;
    gap: 30px;

    width: max-content;

    animation: worksSlide 40s linear infinite;
}

/* カード */
.works-card{
    width: 420px;
    flex-shrink: 0;
}

.works-card img{
    width: 100%;
    height: 300px;

    object-fit: cover;
    border-radius: 20px;

    display: block;
}

/* タイトル */
.works-card p{
    margin-top: 20px;
    font-size: 18px;
}

/* ホバーで止める */
.works-slider-track:hover{
    animation-play-state: paused;
}

/* 無限スクロール */
@keyframes worksSlide{
    0%{
        transform: translateX(0);
    }

    100%{
        transform: translateX(-50%);
    }
}
/* スクロールバー全体 */
.swiper-scrollbar {
    background: #ddd;
    height: 6px;
    border-radius: 10px;
}

/* 動くバー部分 */
.swiper-scrollbar-drag {
    background: #f39800;   /* ← オレンジ */
    border-radius: 10px;
}

.swiper-scrollbar-drag:hover {
    background: #ea580c;
}


/* ===== STRENGTHセクション ===== */
.strength-list {
    display: flex;
    gap: 20px;
}

.strength-item {
    flex: 1;
    padding: 40px;
    background: #f5f5f5;
}

/* ===== ABOUTS USセクション ===== */
.section-about {
    /*padding: 80px 20px;*/
    text-align: center;
}

/* タイトル 
.section-title {
    font-size: 32px;
    margin-bottom: 40px;
    letter-spacing: 2px;
}*/

/* 中身レイアウト */
.about-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

/* 画像 */
.about-image img {
    width: 100%;
    max-width: 400px;
    height: auto;
}

/* テキスト */
.about-text {
    text-align: left;
    max-width: 500px;
}

.about-text h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.about-text p {
    line-height: 1.8;
}

@media (max-width: 768px) {
    .about-inner {
        flex-direction: column;
        text-align: center;
    }

    .about-text {
        text-align: center;
    }
}


/* ===== topics =====*/

.topics {
    padding: 80px 0px;
    background: #fff3e0;
}

/* ヘッダー */
.topics-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

/*.topics-header h2 {
    font-size: 48px;
}*/

.topics-header span {
    color: #f97316;
}

/* スライダー */
.topics-slider {
    overflow-x: auto;
    scrollbar-color: orange #ccc; /* Firefox */
}
.topics-slider {
    overflow-x: auto;
    cursor: grab;
    scroll-behavior: smooth;
}

.topics-slider.dragging {
    cursor: grabbing;
}

/* Chrome系 */
.topics-slider::-webkit-scrollbar {
    height: 6px;
}

.topics-slider::-webkit-scrollbar-thumb {
    background: orange;
    border-radius: 3px;
}

.topics-slider::-webkit-scrollbar-track {
    background: #ccc;
}

.topics-track {
    display: flex;
    gap: 30px;
    width: max-content;
}

/* カード */
.topic-card {
    width: 300px;      /* ←これ追加 */
    flex-shrink: 0;    /* ←これ重要 */
}
.topics-slider:active {
    cursor: grabbing;
}

.title {
    min-height: 48px; /* タイトル高さ固定 */
}

.topic-card img {
    width: 100%;
	height: 200px;        /* ←これ重要 */
    object-fit: cover;    /* ←これ神 */
    display: block;
}

.topic-card:hover img {
    transform: scale(1.05);
    transition: 0.3s;
}

.date {
    margin-top: 10px;
    font-size: 14px;
}

.new {
    background: #f97316;
    color: #fff;
    padding: 2px 6px;
    font-size: 12px;
}

.title {
    margin-top: 5px;
    font-weight: bold;
}

/* スクロールバー */
.topics-scrollbar {
    height: 6px;
    background: #ddd;
    margin-top: 20px;
    position: relative;
}

.topics-scrollbar .bar {
    height: 6px;
    width: 30%;
    background: #f97316;
    position: absolute;
    left: 0;
}



/* ===== FOOTERセクション ===== */
.custom-footer {
    background: #f5f5f5;
    padding: 60px 40px;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

/*.footer-left {
    width: 30%;
}*/

.footer-left{
    width: 30%;
	text-align:left;
}

.footer-left p{
    line-height:1.8;
    margin-bottom:10px;
}

.footer-logo {
    width: 120px;
    margin-bottom: 20px;
}

.contact-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 30px;
    background: #2d3740;
    color: #fff;
    border-radius: 50px;
}

.footer-menu {
    display: flex;
    gap: /*60*/120px;
    width: 70%;
	justify-content: flex-end;
}

.menu-column h4 {
    color: green;
    margin-bottom: /*10*/1px;
}

.menu-column ul {
    list-style: none;
    padding: 0;
	margin-top: 0;
    padding-left: 0;
}

.menu-column li {
    margin-bottom: /*8*/8px;
}

/*.menu-column a{
    display:inline-block;
    line-height:1.3;
}*/

.menu-column a{
    line-height: 1.2;
}

.menu-column a span{
    margin:0;
    padding:0;
}

.menu-column{
    margin-right: 80px;
}
.footer-bottom {
    margin-top: 40px;
    border-top: 1px solid #ccc;
    padding-top: 20px;
    text-align: center;
}

.footer-bottom ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
}



/*　横に流れる写真ギャラリー */

.fv-slider{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 横に流れる */
.fv-track{
    display: flex;
    width: max-content;
	will-change: transform;
    animation: slideLoop 40s linear infinite;
}

/* 画像 */
.fv-item{
    flex-shrink: 0;
    width: 33vw;
    height: 100vh;
    overflow: hidden;
}

.fv-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* テキスト */
.fv-text{
    position: absolute;
    z-index: 10;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

.fv-text h1{
    font-size: 56px;
    line-height: 1.4;
}

.fv-text p{
    margin-top: 20px;
    font-size: 18px;
}

/* 無限ループ */
@keyframes slideLoop{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
}

.works-slider{
    overflow:hidden;
    padding-bottom:40px;
}

.works-card img{
    width:100%;
    height:300px;
    object-fit:cover;
}

.swiper-scrollbar{
    margin-top:30px;
}

.sub-hero{
    display:flex;
    min-height:500px;
    background:#f7f7f2;
}

.sub-hero-left{
    width:50%;
    padding:100px 6%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.sub-title-ja{
    font-size:28px;
    font-weight:700;
    margin-bottom:20px;
}

.sub-title-en{
    font-size:clamp(70px,10vw,140px);
    line-height:1;
    color:#f39800;
    font-weight:900;
}

.sub-hero-right{
    width:50%;
}

.sub-hero-right img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* =====================
   Sub Hero
===================== */

.sub-hero{
    position:relative;
    height:450px;
    overflow:hidden;
}

.sub-hero-image{
    position:absolute;
    inset:0;
}

.sub-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.sub-hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
}

.sub-hero-content{
    position:absolute;
    left:8%;
    bottom:80px;
    z-index:10;
    color:#fff;
}

.sub-title-en{
    font-size:70px;
    font-weight:700;
    letter-spacing:.08em;
    margin:0;
    line-height:1;
}

.sub-title-ja{
    font-size:20px;
    margin-top:15px;
    font-weight:500;
}

.breadcrumb-wrap{
    background:#fff;
    padding:18px 0;
    border-bottom:1px solid #eee;
}

.breadcrumb-wrap .container{
    max-width:1200px;
    margin:0 auto;
}

.breadcrumb-wrap a{
    color:#666;
    text-decoration:none;
}

.breadcrumb-wrap span{
    color:#999;
}

@media(max-width:768px){

.sub-hero{
    height:280px;
}

.sub-hero-content{
    left:20px;
    bottom:40px;
}

.sub-title-en{
    font-size:42px;
}

.sub-title-ja{
    font-size:16px;
}

.breadcrumb-wrap{
    padding:12px 15px;
    font-size:12px;
}

}

/* =====================
   Sub Page FV
===================== */

.sub-hero{
    display:flex;
    align-items:center;
    min-height:500px;
}

.sub-hero-image{
    width:55%;
}

.sub-hero-image img{
    width:100%;
    height:500px;
    object-fit:cover;
    display:block;
}

.sub-hero-content{
    width:45%;
    padding:0 80px;
}

.sub-title-ja{
    display:block;
    color:#f39800;
    font-size:20px;
    font-weight:700;
    margin-bottom:20px;
}

.sub-title-en{
    font-size:90px;
    font-weight:900;
    color:#001b4c;
    line-height:1;
}

/* パンくず */

.breadcrumb-wrap{
    background:#fff;
    padding:25px 0;
}

.breadcrumb-inner{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

.breadcrumb-inner a{
    color:#001b4c;
    text-decoration:none;
}

/* Final sub page hero layout */
.sub-hero-content {
    left: auto !important;
    right: 8% !important;
    bottom: 72px !important;
    text-align: right !important;
}

.sub-title-en {
    color: #f39800 !important;
    font-size: clamp(96px, 12vw, 168px) !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
}

.sub-title-ja {
    color: #fff !important;
    font-weight: 700 !important;
}

.breadcrumb-wrap + .breadcrumb-wrap {
    display: none !important;
}

/* Contact Form 7 中央寄せ */
.wpcf7 {
    max-width: 700px;
    margin: 0 auto;
}

/* 入力欄を横幅いっぱい */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100%;
    box-sizing: border-box;
}


#mainnav li:nth-child(1) a::after{
    content:"当社の強み";
}

#mainnav li:nth-child(2) a::after{
    content:"事業内容";
}

#mainnav li:nth-child(3) a::after{
    content:"施工事例";
}

#mainnav li:nth-child(4) a::after{
    content:"会社概要";
}

#mainnav li:nth-child(5) a::after{
    content:"お知らせ";
}

#mainnav li:nth-child(6) a::after{
    content:"お問い合わせ";
}

#mainnav li a::after{
    font-size:10px;
    color:#888;
    margin-top:4px;
    font-weight:400;
}

.contact-btn{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;

    width:220px;
    padding:16px 24px;

    background:#f39800;
    color:#fff;

    border:2px solid #f39800;

    text-decoration:none;
    transition:.3s;
}

.contact-btn:hover{
    background:#fff;
    color:#f39800;
}

/* Home hero/header stacking fixes */
body.home #masthead,
body.home .site-header,
body.home .shfb,
body.home .shfb-row-wrapper,
body.home .shfb-main_header_row {
    z-index: 1000;
}

body.home .hero-custom {
    z-index: 1;
}

body.home .hero-content {
    z-index: 2;
    pointer-events: none;
}

@media (min-width: 769px) {
    body.home .hero-content {
        top: 42%;
    }
}

/* Topics archive page */
.topics-archive {
    width: 100%;
    padding: 72px 24px 96px;
}

.topics-archive-head {
    max-width: 1200px;
    margin: 0 auto 42px;
}

.topics-archive-head .section-heading {
    margin: 0 0 14px;
}

.topics-archive-head p {
    margin: 0;
    color: #56627a;
    font-size: 16px;
    line-height: 1.9;
}

.topics-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
    max-width: 1200px;
    margin: 0 auto;
}

.topics-archive-card {
    margin: 0;
    background: #fff;
    border: 1px solid #eee2d1;
    border-radius: 8px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.topics-archive-card:hover {
    transform: translateY(-4px);
    border-color: #f39800;
    box-shadow: 0 16px 36px rgba(0, 27, 76, .12);
}

.topics-archive-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.topics-archive-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f6f1e9;
}

.topics-archive-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.topics-archive-card:hover .topics-archive-thumb img {
    transform: scale(1.04);
}

.topics-archive-body {
    padding: 22px 22px 26px;
}

.topics-archive-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 12px;
    color: #657086;
    font-size: 13px;
    line-height: 1.4;
}

.topics-archive-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff3e0;
    color: #f39800;
    font-size: 12px;
    font-weight: 700;
}

.topics-archive-body h3 {
    margin: 0 0 12px;
    color: #001b4c;
    font-size: 21px;
    line-height: 1.55;
    font-weight: 700;
}

.topics-archive-body p {
    margin: 0;
    color: #56627a;
    font-size: 14px;
    line-height: 1.85;
}

.topics-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
    margin: 46px auto 0;
}

.topics-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #e5d8c7;
    border-radius: 999px;
    color: #001b4c;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.topics-pagination .page-numbers.current,
.topics-pagination a.page-numbers:hover {
    border-color: #f39800;
    background: #f39800;
    color: #fff;
}

.topics-empty {
    max-width: 1200px;
    margin: 0 auto;
    padding: 42px 24px;
    background: #fff3e0;
    border-radius: 8px;
    color: #001b4c;
    text-align: center;
}

/* Home loading screen */
.home-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(255, 243, 224, .96), rgba(255, 255, 255, .98)),
        repeating-linear-gradient(45deg, #f3f3f3, #f3f3f3 8px, #fff 8px, #fff 16px);
    opacity: 1;
    visibility: visible;
    transition: opacity .65s ease, visibility .65s ease;
}

.home-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.home-loader-inner {
    position: relative;
    padding: 24px;
    text-align: center;
}

.home-loader-inner::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin: 22px auto 0;
    border-radius: 999px;
    background: #f39800;
    animation: homeLoaderLine 1.2s ease-in-out infinite;
}

.home-loader p {
    margin: 0;
    color: #001b4c;
    font-size: clamp(32px, 5vw, 68px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: .04em;
}

@keyframes homeLoaderLine {
    0%,
    100% {
        transform: scaleX(.45);
        opacity: .45;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}