@charset "UTF-8";

/* ==================================================
   Main Visual (PC)
================================================== */
.mv-section { width: 100%; max-width: 1440px; margin: 0 auto; padding-top: 0; position: relative; }
.mv-wrapper { width: 1339px; max-width: 100%; aspect-ratio: 1339 / 722; margin: 90px auto 0; position: relative; overflow: hidden; }

.swiper-container { width: 100%; height: 100%; }
.swiper-slide { position: relative; background: #fff; }
.swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

.mv-copy { 
    position: absolute; z-index: 10; color: var(--text-main); 
    font-family: "Yu Mincho", "YuMincho", serif; pointer-events: none; 
}
.mv-copy h2 { font-size: clamp(1.8rem, 2.5vw, 2.6rem); font-weight: 500; line-height: 1.6; letter-spacing: 0.1em; white-space: nowrap; text-align: left; }

.mv-copy--slide1 { top: 45%; right: 10%; } 
.mv-copy--slide2 { bottom: 15%; left: 8%; } 
.mv-copy--slide3 { top: 20%; left: 8%; } 

.scroll-ui { position: absolute; bottom: 28px; left: auto ;right: 40px; z-index: 15; writing-mode: horizontal-tb; font-size: 10px; letter-spacing: 0.2em; color: var(--text-main); display: flex; align-items: center; height: 140px;}
.scroll-ui::after { content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 1px; height: 140px; background: #999; margin-top: 15px; }
.scroll-ui::before { content: ""; position: absolute; left: -2.5px ;bottom: 20px; width: 6px; height: 6px; background: var(--blue); border-radius: 50%; z-index: 1;}
.scroll-text { display: inline-block; padding-left: 12px;}

.pagination-container { width: 100%; display: flex; justify-content: center; padding: 30px 0 50px; }
.swiper-pagination-bullet { width: 10px; height: 10px; background: #ddd; opacity: 1; margin: 0 6px !important; }
.swiper-pagination-bullet-active { background: var(--green) !important; }

/* ==================================================
   岡村について (About Us)
================================================== */
.about-section { padding-bottom: 0; overflow-x: hidden; }
.content-flex { display: flex; align-items: center; gap: 60px; margin-bottom: 80px; position: relative; }
.about-section .content-flex:last-child { margin-bottom: 0; }

.content-flex.reverse { flex-direction: row-reverse; }
.content-text { flex: 1; position: relative; z-index: 2; }
.content-img { flex: 1; position: relative; z-index: 1; }

.content-text h3 { 
    margin-bottom: 25px; line-height: 1.6; letter-spacing: 0.05em;
    padding-bottom: 25px;
    position: relative;
    color: var(--blue); 
    font-size: 24px; 
    font-weight: 700;
}

/* ▼▼ 線をheightではなく、border(1px)で強制的に細く均一にしました ▼▼ */
.content-text h3::after {
    content: ""; position: absolute; bottom: 0; left: 0;
    width: calc(100% + 60px); 
    height: 0; 
    border-bottom: 1px solid var(--blue);
    background-color: transparent;
}

.content-flex.reverse .content-text h3::after { 
    left: auto; right: 0; 
    width: calc(100% + 60px); 
    height: 0; 
    border-bottom: 1px solid var(--blue);
    background-color: transparent;
}

.content-text p { font-size: 16px; color: #555; line-height: 2; letter-spacing: 0.02em; text-align: justify; }

/* ==================================================
   商品情報
================================================== */
/* 商品情報セクションのリード文はPC時のみ中央寄せ */
.product-section .section-lead { text-align: center; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 40px 0 50px; }
.product-item img { display: block; margin: 0 auto; width: 100%; } 
.product-item h4 { 
    font-size: 16px; color: var(--text-main); margin: 15px 0 5px; 
    font-weight: 700; /*white-space: nowrap; overflow: hidden; 
    text-overflow: ellipsis; letter-spacing: -0.04em;*/ font-feature-settings: "palt";
}
.product-item p { 
    font-size: 16px; color: #666; line-height: 1.6; 
}

/* ==================================================
   岡村の強み
================================================== */
.strength-sub { font-size: 24px; color: var(--blue); font-weight: 700; margin: 60px 0 20px; line-height: 1.5; }
.strength-desc { font-size: 16px; color: #555; margin-bottom: 40px; line-height: 1.8; text-align: justify; }
.diag-box { text-align: center; margin: 0 0 60px; }
.diag-box img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* ==================================================
   4つの力
================================================== */
.power-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 40px 0 50px; }
.power-card { display: flex; flex-direction: column; height: 100%; min-width: 0;}
.power-head { background: var(--blue); color: #fff; padding: 30px 10px; text-align: center; }
.power-head h4 { font-size: 48px; font-weight: 400; font-family: 'Times New Roman', Times, serif; letter-spacing: 0.05em; line-height: 1.2; }
.power-head span { font-size: 18px; font-weight: 700; display: block; margin-top: 5px; letter-spacing: 0.05em; }
.power-body { background: #f7f7f7; padding: 25px 20px; font-size: 16px; color: #555; text-align: justify; flex-grow: 1; line-height: 1.8; }
.power-btns { display: flex; justify-content: center; gap: 20px; }

/* ==================================================
   採用情報 (TOPページ用バナー)
================================================== */
.recruit-area {
    /* 青みを消し、全体に均一なグレーのモヤをかけて視認性を確保 */
    background: linear-gradient(rgba(100, 110, 120, 0.6), rgba(100, 110, 120, 0.6)), url('../img/recruit.jpg');
    background-size: cover; background-position: center; padding: 120px 20px; text-align: left;
}
.recruit-inner { max-width: 1000px; margin: 0 auto; }
.recruit-area h2 { font-size: 32px; color: #fff; font-weight: 700; margin-bottom: 5px; letter-spacing: 0.1em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.recruit-area span { color: #fff; font-size: 15px; letter-spacing: 0.1em; font-family: 'Times New Roman', Times, serif; margin-bottom: 30px; display: block; text-shadow: 0 1px 3px rgba(0,0,0,0.5);}
.recruit-area p { color: #fff; font-size: 16px; margin-bottom: 40px; font-weight: 500; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }

/* ==================================================
   769 〜 1024px
================================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .content-flex {
        gap: 28px;
    }
    .content-text h3::after {
        width: calc(100% + 28px);
    }
    .power-head h4 { font-size: 40px; }
}
/* ==================================================
   スマホ用レスポンシブ設定 (TOPページ専用部分)
================================================== */
@media screen and (max-width: 768px) {
    /* MVの調整 */
    .mv-section { padding-top: 70px; }
    .mv-wrapper { width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0;}
    
    .mv-copy h2 { font-size: 1.4rem; line-height: 1.5; }
    .mv-copy--slide1, .mv-copy--slide2, .mv-copy--slide3 { 
        top: auto; bottom: 6%; left: auto; right: 4%; transform: none; text-align: left;
    }
    
    .scroll-ui { left: 20px; right: auto; bottom: 28px; height: 100px;}
    .scroll-text { padding-left: 12px; font-size: 10px; letter-spacing: 0.1em; color: #555; }
    .scroll-ui::after {
        position: absolute; left: 0; top: 0; bottom: auto;
        width: 1px; height: 100%; margin-top: 0; background: #999;
    }
    .scroll-ui::before { bottom: 16px; left: -2.5px; transform: none; background: #333; }

    .pagination-container { padding: 20px 0 40px; }
    .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 5px !important; }

    /* 商品情報 リード文の左寄せ化 */
    .product-section .section-lead { text-align: left; }

    /* 岡村について SP対応 */
    .about-section { padding-bottom: 0; }
    .content-flex, .content-flex.reverse { flex-direction: column; gap: 20px; margin-bottom: 50px; }
    .about-section .content-flex:last-child { margin-bottom: 0; }
    
    .content-text h3 { font-size: 20px; padding-bottom: 15px; margin-bottom: 15px; font-weight: 500; line-height: 1.6; }
    
    /* ▼ スマホ版の青線も border に変更 */
    .content-text h3::after,
    .content-flex.reverse .content-text h3::after { 
        width: 100%; left: 0; right: auto; 
        height: 0; 
        border-bottom: 1px solid var(--blue); 
        background-color: transparent; 
    }
    
    .content-text p { font-size: 15px; line-height: 1.8; }

    /* 商品情報 SP対応 */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 16px; margin: 30px 0 40px; }
    .product-item img { width: 100%; } 
    .product-item h4 { font-size: 16px; line-height: 1.4; margin: 15px 0 8px; letter-spacing: 0.05em; text-align: center;}
    .product-item p { font-size: 13px; line-height: 1.4; height: auto;  text-align: center;}

    /* 岡村の強み SP対応 */
    .strength-sub { font-size: 20px; margin: 40px 0 15px; }
    .strength-desc { font-size: 15px; margin-bottom: 30px; }
    .diag-box { margin: 0 0 50px; }

    /* 4つの力 SP対応 */
    .power-grid { grid-template-columns: 1fr; gap: 15px; margin: 30px 0 40px; }
    .power-card { flex-direction: row; height: auto; align-items: stretch; }
    .power-head { width: 40%; padding: 15px 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .power-head h4 { font-size: 28px; margin-bottom: 5px; }
    .power-head span { font-size: 15px; margin-top: 0; }
    .power-body { flex: 1; padding: 20px 15px; font-size: 14px; line-height: 1.6; text-align: justify; display: flex; align-items: center; }
    .power-btns { flex-direction: column; gap: 15px; }

    /* 採用情報 SP対応 */
    .recruit-area { padding: 60px 20px; }
    .recruit-area h2 { font-size: 26px; }
    .recruit-area span { font-size: 13px; }
    .recruit-area p { font-size: 15px; }
}