@charset "UTF-8";

/* ==========================================================================
   1. 変数定義 & リセット
   ========================================================================== */
:root {
    --color-primary: #FDB913;
    --color-accent: #007BFF;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-bg-gray: #F5F7FA;
    --color-bg-dark: #1A1A1A;
    --color-white: #FFFFFF;
    --color-border: #E0E0E0;
    --color-header-bg: #004e7a; 
    --container-width: 1080px;
    --sp-padding: 20px;
}

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

body {
    font-family: 'Noto Sans JP', "Helvetica Neue", Arial, sans-serif;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ユーティリティ */
.sp-br { display: none; }
.pc-br { display: block; }
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--sp-padding);
}
.section { padding: 80px 0; }
.section__title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 700;
}
.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

/* ページ内リンク位置調整 */
#product, #solution, #company, #footer { scroll-margin-top: 120px !important; }
#market, #concept, #worries, #reason { scroll-margin-top: 80px !important; }


/* ==========================================================================
   2. ヘッダー (PCベース)
   ========================================================================== */
.header {
    background-color: var(--color-header-bg);
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    color: var(--color-white);
}
.header__inner {
    width: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end; 
}
/* 左寄せロゴ追加設定 */
.header__logo {
    margin-right: auto;
    display: flex;
    align-items: center;
    margin-left: -15px; 
}
.header__logo img {
    height: 50px;
    width: auto;
    display: block;
}
.header__nav {
    display: flex;
    align-items: center;
    gap: 30px;
    width: auto !important; 
    margin-left: auto;
    margin-right: 20px;
}
.header__list {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}
.header__list li a {
    color: var(--color-white);
    display: block;
}
.header__list li a:hover {
    opacity: 0.8;
    text-decoration: underline;
}
/* お問い合わせボタン */
.btn--header {
    background: linear-gradient(to bottom, #ffda6a, #fff7de) !important;
    color: #000;
    padding: 0.6rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    display: inline-block;
}
.btn--header:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    opacity: 0.9;
}
/* ハンバーガーメニュー (PC非表示) */
.header__hamburger {
    display: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    width: 44px;
    height: 38px;
    position: relative;
    padding: 0;
    margin-left: 10px;
    z-index: 1001;
}
.header__hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #333;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s;
}
.header__hamburger span:nth-child(1) { top: 9px; }
.header__hamburger span:nth-child(2) { top: 17px; }
.header__hamburger span:nth-child(3) { top: 25px; }
.header__hamburger.is-active span:nth-child(1) { top: 17px; transform: translateX(-50%) rotate(45deg); }
.header__hamburger.is-active span:nth-child(2) { opacity: 0; }
.header__hamburger.is-active span:nth-child(3) { top: 17px; transform: translateX(-50%) rotate(-45deg); }


/* ==========================================================================
   3. メインビジュアル (MV)
   ========================================================================== */
.mv {
    position: relative;
    width: 100%;
    height: 85vh; 
    min-height: 600px; 
    background-image: url('../img/main-visual.png');
    background-size: cover;
    background-position: center center;
    background-color: #004B7C;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
}
.mv__content {
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}
.mv__title {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}
.mv__title-top,
.mv__title-bottom {
    display: block;
    line-height: 1.2;
    font-size: 3.2rem !important; 
}
.mv__title-top { margin-bottom: 0.2em; }
.mv__lead {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700; 
    font-size: 1.6rem; 
    margin-top: 1.5rem;
    line-height: 1.4;
    text-shadow: 0 2px 5px rgba(0,0,0,0.6); 
}


/* ==========================================================================
   4. 市場背景 (Market)
   ========================================================================== */
.market-section {
    position: relative;
    background: #000000;
    color: #fff;
    padding: 80px 0;
    overflow: hidden;
}
/* 装飾 */
.market-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 25% 50%, #0055FF 0%, #000000 35%);
    clip-path: polygon(0 0, 54.2% 0, 46.2% 100%, 0 100%);
    z-index: 0;
}
.market-section::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 75% 50%, #0055FF 0%, #000000 35%);
    clip-path: polygon(53.8% 0, 100% 0, 100% 100%, 45.8% 100%);
    z-index: 0;
}
.market-container::before {
    content: "";
    position: absolute;
    top: -100px; bottom: -100px; left: 50%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    transform: rotate(7deg);
    z-index: 3;
    pointer-events: none;
}
.market-container {
    display: flex;
    width: 100%;
    max-width: none;
    margin: 0; padding: 0;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}
.market-col {
    width: 50%;
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}
.market-col--left { padding-right: 40px; padding-left: 20px; }
.market-col--right { padding-left: 40px; padding-right: 20px; }
/* テキスト・バブル */
.market-heading {
    width: 100%; text-align: center;
    font-size: 2.8rem; font-weight: 700;
    margin-bottom: 30px; line-height: 1.3;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
.market-sub-heading {
    font-size: 2.0rem; display: block; margin-top: 10px;
    width: 100%; text-align: center;
}
.market-heading--sm-margin { margin-bottom: 10px; font-size: 2.8rem; }
.market-bubbles { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.bubble-row { display: flex; gap: 20px; justify-content: center; }
.bubble {
    background: linear-gradient(to bottom, #FFFFFF 30%, #C0C0C0 100%);
    color: #000;
    width: 180px; height: 180px;
    border-radius: 50%;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    padding: 10px;
}
.bubble-desc { font-size: 0.8rem; font-weight: 700; margin: 0 0 5px 0; line-height: 1.3; }
.bubble-num { font-size: 3.5rem; font-weight: 700; margin: 0; line-height: 1; letter-spacing: -0.05em; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);}
.bubble-unit { font-size: 2rem; font-weight: 700; margin-left: 2px; vertical-align: baseline; }
.market-stat { margin-bottom: 50px; width: 100%; text-align: center; }
.stat-text-lg { font-size: 1.8rem; font-weight: 700; margin: 0 0 5px 0; line-height: 1.2; }
.stat-row { display: flex; align-items: baseline; justify-content: center; gap: 15px; white-space: nowrap; }
.stat-num {
    display: inline-block; width: auto; margin: 0;
    font-size: 5rem; font-weight: 700; line-height: 1.1;
    background: linear-gradient(135deg, #FFFFFF 0%, #ff8e8e 40%, #D32F2F 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.5));
}
.stat-small {
    font-size: 2rem; background: none; -webkit-text-fill-color: #fff; color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); filter: none;
}


/* ==========================================================================
   5. 多層防御 (Concept)
   ========================================================================== */
.concept-section {
    background-color: #001b3d;
    color: #fff;
    padding: 80px 0;
    text-align: center;
    background-image: url('../img/多層防御の背景線.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.concept-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }
.concept-title {
    font-size: 1.9rem; font-weight: 700; margin-bottom: 20px;
    line-height: 1.4; white-space: nowrap;
}
.concept-sub-title {
    font-size: 1.6rem; font-weight: 700; margin-bottom: 40px;
    position: relative; top: 20px;
}
.concept-box {
    background-color: #D9D9D9; color: #000;
    padding: 30px 40px; border-radius: 20px;
    border: 3px dashed #999999 !important;
    margin-bottom: 60px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.concept-text {
    font-size: 1.0rem; line-height: 1.8; font-weight: 500;
    margin: 0; text-align: center;
}
.concept-footer {
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; text-align: center;
}
.concept-footer__desc { flex: 1; text-align: center; }
.concept-footer__desc p { font-size: 1.1rem; line-height: 1.7; margin: 0; letter-spacing: -0.05em; }
.concept-footer__logo { width: 350px; flex-shrink: 0; position: relative; right: 70px; }
.img-logo { width: 100%; height: auto; display: block; }


/* ==========================================================================
   6. 課題・不安 (Worries)
   ========================================================================== */
.worries-section {
    background-color: #001b3d;
    color: #fff;
    padding: 60px 0 80px 0 ;
    text-align: center;
}
.worries-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.worries-title { font-size: 2.0rem; font-weight: 700; margin-bottom: 50px; color: #fff; }
.worries-list { display: flex; justify-content: space-between; gap: 20px; align-items: stretch; }
.worry-item {
    width: 23%;
    display: flex; flex-direction: column; align-items: center;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.65), rgba(166, 166, 166, 0.65));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 20px 10px;
}
.worry-box {
    width: 100%;
    background: linear-gradient(to bottom, #E6E6E6, #B3B3B3);
    color: #000;
    padding: 10px 2px;
    border-radius: 0;
    position: relative;
    margin-bottom: 30px;
    display: flex; align-items: center; justify-content: center;
    min-height: 80px;
}
.worry-box p { font-size: 0.9rem; font-weight: 300; line-height: 1.3; margin: 0; letter-spacing: -0.05em; }
.worry-box::after {
    content: ""; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
    border-top: 15px solid #B3B3B3; border-left: 15px solid transparent; border-right: 15px solid transparent;
}
.worry-icon { width: 100%; display: flex; justify-content: center; align-items: center; flex-grow: 1; }
.worry-icon img { max-width: 100%; height: auto; max-height: 250px; }


/* ==========================================================================
   7. 解決策 (Solution) - SES & その他製品
   ========================================================================== */
.solution-section {
    background-color: #001b3d;
    padding: 0 0 20px 0;
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.solution-container { width: 100%; max-width: none; padding: 0 20px; }

/* タイトルエリア */
.solution-title-area {
    margin-bottom: -120px;
    display: flex; flex-direction: column; align-items: center;
    position: relative; z-index: 5;
}
.solution-title {
    font-size: 2.4rem; font-weight: 900; line-height: 1.4;
    margin-bottom: -190px; position: relative; z-index: 2;
}
.highlight-yellow {
    color: #FFFFFF; font-size: 1.3em; vertical-align: middle;
    position: relative; top: -10px;
    text-shadow: 3px 3px 6px rgba(255, 255, 255, 0.5);
}
.title-underline { width: 80%; max-width: 600px; height: auto; display: block; }

/* --- SESメインボックス --- */
.solution-box {
    border: 3px solid #FFC107;
    padding: 15px 30px 40px 30px;
    width: 100%; margin: 0 auto;
    margin-bottom: 5px;
    background-color: #001b3d;
    box-sizing: border-box;
}
.solution-header { margin-bottom: 2%; display: flex; flex-direction: column; align-items: center; }
.product-name-en {
    font-size: 3rem; font-weight: 900; color: #fff;
    margin: 0 0 -70px 0; line-height: 0.8; position: relative; z-index: 2;
}
.product-underline {
    width: 220px; height: auto; margin-bottom: -55px; position: relative; z-index: 1;
    margin-top: 10px;
}
.product-name-ja {
    font-size: 1.4rem; font-weight: 700; color: #ffffff;
    margin: 0 0 15px 0; position: relative; z-index: 2;
}
.product-desc { font-size: 1.1rem; line-height: 1.6; font-weight: 500; margin: 0; }

/* SESレイアウト */
.solution-content { display: flex; justify-content: space-between; align-items: stretch; gap: 40px; }
.solution-left {
    flex: 1.4; border: 1px solid #FFC107; padding: 10px 5px;
    background-color: #001b3d; display: flex; flex-direction: column; overflow: hidden;
}
.solution-sub-title {
    font-size: 1.5rem; font-weight: 700; margin-bottom: -10px;
    text-align: center; color: #fff; border-bottom: 1px solid #fff;
    display: inline-block; align-self: center; padding-bottom: 0px;
}
.unique-features-container { display: flex; flex-direction: column; gap: 0px; }
.unique-feature-row { display: flex; align-items: center; gap: 0px; }
.u-img-area { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; }
.u-img-area img { width: 150%; max-width: 550px; height: auto; }
.top-row .u-img-area img { width: 120%; max-width: 400px; margin-top: 10px; }
.bottom-row .u-img-area { margin-left: -100px; margin-right: -30px; margin-top: -50px; }
.u-text-area { flex: 1.2; text-align: center; color: #fff; padding: 0; }
.u-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 10px 0; border-bottom: 1px solid #fff; display: inline-block; padding-bottom: 0px; line-height: 1.4; }
.u-point { font-size: 1.1rem; font-weight: 700; margin: 0 0 10px 0; text-align: left; padding-left: 20px;}
.u-desc { font-size: 1.0rem; line-height: 1.6; margin: 0; text-align: left; display: inline-block; }

/* SES右側ボックス */
.solution-right {
    flex: 1; display: flex; flex-direction: column; gap: 15px;
    height: 100%; justify-content: flex-start; padding-top: 20px; align-items: center;
}
.feature-box {
    background: #E6E6E6; border-radius: 20px; border: 3px solid #FFC107; padding: 15px; color: #000;
    text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3); box-sizing: border-box;
    width: 270px !important; min-height: 300px; flex: 0 0 auto;
}
.solution-right > .feature-box { flex: 1; width: 30%; margin: 0 auto; }
.feature-bottom-row { display: flex; gap: 15px; flex: 1; justify-content: center; }
.feature-bottom-row .feature-box { width: 50%; }
.feature-icon img { margin-top: 30px; height: 115px; width: auto; margin-bottom: 15px; }
.feature-icon img.icon-large { height: 120px; }
.feature-text { margin-top: 15px; font-size: 0.95rem; font-weight: 700; line-height: 1.5; }
.text-large { font-size: inherit; font-weight: inherit; display: inline; margin: 0; }

/* --- その他製品 (WPS, DLP...) --- */
.dual-solution-wrapper {
    display: flex; justify-content: center; gap: 20px; padding: 5px 20px;
    background-color: #001b3d; flex-wrap: wrap; box-sizing: border-box;
}
.solution-col {
    flex: 1; min-width: 320px; border: 3px solid; padding: 30px 20px;
    color: #fff; text-align: center; box-sizing: border-box;
    display: flex; flex-direction: column; 
    margin-top: 0; align-items: center !important; white-space: nowrap !important;
}
/* タイトル & サブタイトル調整 (PC共通) */
.sol-header h2 { font-size: 2.4em; font-weight: bold; margin: 0; line-height: 1; }
.sol-header .sub-title {
    font-size: 1.3em; font-weight: bold;
    margin-bottom: 5px; padding-bottom: 5px; margin-top: -55px !important;
    width: 100% !important; display: block !important; text-align: center !important;
    transform: none !important;
}
.solution-col .product-underline {
    display: block; margin: -70px auto 0 auto !important; width: 100%; max-width: 220px;
    position: relative; z-index: 1; padding-bottom: 0 !important;
}
.sol-desc {
    font-size: 0.95em; line-height: 1.6; margin-top: 0 !important; margin-bottom: 30px;
    text-align: center !important; flex-grow: 1; position: relative; z-index: 2;
    white-space: normal !important;
}

/* 各製品カラー */
.col-wps { border-color: #7bc143; }
.card-wps-style { border: 3px solid #7bc143; }
.col-dlp { border-color: #009FE8; }
.card-dlp-style { border: 3px solid #009FE8; }
.col-soc { border-color: #ff3399; }
.card-soc-style { border: 3px solid #ff3399; }
.col-ess { border-color: #aacc00; }
.card-ess-style { border: 3px solid #aacc00; }
.col-ztna { border-color: #c49a6c; padding-top: 30px !important; }
.card-ztna-style { border: 3px solid #c49a6c; }
.col-gss { border-color: #e60012; padding-top: 30px !important; }
.card-gss-style { border: 3px solid #e60012; }
/* ZTNA/GSS 微調整 */
.col-ztna h2, .col-gss h2 { margin-bottom: 0 !important; line-height: 1.0 !important; }
.col-ztna .product-underline, .col-gss .product-underline { width: 280px !important; margin-top: -75px !important; margin-bottom: -60px !important; }
.col-ztna .sub-title, .col-gss .sub-title { display: block; margin-top: 0 !important; margin-bottom: 10px !important; }

/* カード配置 */
.cards-row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; align-items: stretch; width: 100%; }
.cards-row .col-item { flex: 1; min-width: 200px; max-width: 300px; }
.new-solution-card {
    background: #E6E6E6; border-radius: 20px; padding: 15px; color: #000;
    text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3); box-sizing: border-box;
    width: 98%; height: 270px !important; min-height: 270px;
}
.new-card-img { height: 130px; width: auto; margin-top: 10px; margin-bottom: 15px; display: block; }
.new-card-text {
    font-size: 0.95rem; font-weight: 700; line-height: 1.5; margin: 0;
    width: 100%; text-align: center !important;
}

/* 矢印エリア */
.solution-arrow {
    text-align: center; margin-top: 40px; font-weight: bold;
    color: var(--color-primary); background: #333; padding: 15px; border-radius: 8px;
}


/* ==========================================================================
   8. 選ばれる6つの理由 (Reason)
   ========================================================================== */
.reason-section { background-color: #001b3d; padding: 80px 20px; color: #fff; overflow: hidden; }
.reason-container { position: relative; width: 100%; max-width: 800px; height: 800px; margin: 0 auto; }
.reason-ring {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 82% !important; height: 82% !important;
    border: 30px solid #2b51a8 !important; border-radius: 50%; z-index: 1;
}
.reason-center-title {
    position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; z-index: 2; width: 80%;
}
.reason-sub { font-size: 1.5rem; font-weight: bold; margin-bottom: 5px; }
.reason-main { font-size: 3.5rem; font-weight: 900; margin: 0; line-height: 1.2; }
.reason-underline {
    width: 260px !important; height: auto !important; display: block;
    margin: -95px auto 0 !important; background-color: transparent !important;
}
.reason-bubble {
    position: absolute; width: 220px; height: 220px;
    background: radial-gradient(circle at 30% 30%, #6895fe, #001f65) !important;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    text-align: center; z-index: 3; box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    font-size: 1.5rem; font-weight: bold; line-height: 1.4; padding: 10px;
    text-shadow: 2px 2px 4px #000000 !important;
}
/* ポジション (PC) */
.pos-1 { top: 3%; left: 14%; }
.pos-2 { top: 3%; right: 14%; }
.pos-3 { bottom: 36%; right: 0; }
.pos-4 { bottom: 3%; right: 14%; }
.pos-5 { bottom: 3%; left: 14%; }
.pos-6 { top: 36%; left: 0; }

/* ホバーエフェクト用テキスト */
.reason-bubble .hover-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; padding: 0 15px; box-sizing: border-box;
    transition: opacity 0.3s ease; margin: 0; pointer-events: none;
    color: inherit; text-align: center; line-height: 1.4;
}
.reason-bubble .default-text { opacity: 1; font-weight: bold; font-size: inherit; }
.reason-bubble .view-text {
    opacity: 0; font-weight: normal; font-size: 0.9rem;
    line-height: 1.5; word-break: keep-all !important;
}
.reason-bubble:hover .default-text { opacity: 0; }
.reason-bubble:hover .view-text { opacity: 1; }
/* pos-3の特例設定 (PC) */
html body .reason-bubble.pos-3 .default-text {
    width: 110% !important; padding: 0 !important;
    letter-spacing: -0.1em !important; line-height: 1.25 !important;
}
html body .reason-bubble.pos-3 .view-text {
    white-space: nowrap !important; font-size: 0.9rem !important;
    letter-spacing: -0.08em !important; line-height: 1.4 !important;
    width: auto !important; min-width: 100% !important; padding: 0 !important;
}


/* ==========================================================================
   9. フッター・お問い合わせ (Footer)
   ========================================================================== */
.contact-section { background-color: #004e7a; padding: 80px 20px 40px; color: #fff; text-align: center; }
.contact-btn-wrapper { margin-bottom: 60px; }
.main-contact-btn {
    display: inline-block;
    background: linear-gradient(to bottom, #ffda6a, #fff7de) !important;
    color: #000; font-size: 1.8rem; font-weight: 900; text-decoration: none;
    padding: 20px 100px; border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.2s;
}
.main-contact-btn:hover { transform: scale(1.05); opacity: 0.9; }
.footer-banners {
    display: flex; justify-content: center; gap: 100px; max-width: 1100px;
    margin: 0 auto 60px; flex-wrap: wrap;
}
.f-banner {
    flex: 1; min-width: 320px; height: 235px; border-radius: 15px; overflow: hidden;
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.banner-content {
    position: relative; z-index: 1; width: 100%; padding: 20px;
    display: flex; flex-direction: column; align-items: center;
}
.text-white { color: #fff; }
.text-black { color: #000; }
.banner-sub-text { font-size: 2.0rem; margin-bottom: -15px; font-weight: bold; position: relative; z-index: 2; }
.banner-title { font-size: 2rem; font-weight: 900; margin: 0 0 10px; line-height: 1.2; margin-bottom: -15px; }
.banner-desc {
    font-size: 1.15rem; margin-bottom: 5px !important; font-weight: bold; white-space: nowrap !important;
    position: relative; z-index: 2;
}
.banner-btn {
    display: inline-block; background: linear-gradient(to bottom, #ffda6a, #fff7de) !important;
    color: #000; font-weight: bold; padding: 10px 50px; border-radius: 30px;
    border: 1px solid #000000; font-size: 1.1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin-top: 0 !important;
}
/* 左バナー */
.banner-left { border: 2px solid #ff9900; }
.banner-bg-img {
    position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;
    object-fit: cover !important; z-index: 0;
    transform: scale(1.1) !important; transform-origin: center center !important;
}
.banner-left .banner-sub-text, .banner-left .banner-title { text-shadow: 2px 2px 5px #000000 !important; }
.banner-left .banner-desc {
    background-color: rgba(0, 0, 0, 0.5) !important; padding: 4px 10px !important;
    display: block !important; width: 150% !important; text-shadow: 1px 1px 2px #000000 !important;
}
/* 右バナー */
.banner-right { background: linear-gradient(to right, #ff914d, #ffde59, #ff914d) !important; }
.tenamo-logo {
    height: 125px !important; width: auto; margin: -30px auto -50px auto !important;
    display: block; position: relative; z-index: 1;
}
.footer-banners .banner-right .banner-sub-text { font-size: 1.5rem !important; line-height: 1.4 !important; margin-bottom: 5px !important; }
/* フッター情報 */
.footer-info { font-size: 2rem; line-height: 1.6; }
.contact-label, .department-name, .phone-number { margin-top: 0 !important; margin-bottom: 10px !important; line-height: 1.2 !important; }
.phone-number { font-weight: 500; letter-spacing: 2px; line-height: 1.0 !important; }
.office-hours { margin-top: 0 !important; margin-bottom: 40px !important; font-size: 2rem; line-height: 1.2 !important; }
.copyright { font-size: 1rem; opacity: 0.8; }


/* ==========================================================================
   10. 大型ディスプレイ (1440px以上 / 1601px以上)
   ========================================================================== */
@media (min-width: 1440px) {
    .mv__title-top, .mv__title-bottom { font-size: 5.5rem !important; }
    .mv__content { max-width: 1600px; }
    .mv__lead { font-size: 2.5rem; }
}

@media screen and (min-width: 1601px) {
    .solution-right { justify-content: flex-start !important; padding-top: 20px !important; }
    .solution-right .feature-box { max-width: 300px !important; height: 280px !important; padding: 15px !important; }
    .solution-right .feature-icon img { height: 130px !important; margin-top: 10px !important; margin-bottom: 15px !important; }
    .feature-text { font-size: 0.95rem !important; }
    /* 文字位置調整 */
    .bottom-row .u-text-area { margin-left: -60px !important; }
    .bottom-row .u-point { margin-left: 100px !important; }
}


/* ==========================================================================
   11. PC: ズーム・中間サイズ対応 (901px ～ 1600px/1450px/1200px)
   ※ 細かいレイアウト崩れを防ぐための設定群
   ========================================================================== */

/* ------------------------------------------------
   A. PC全般 (901px - 1600px) の基本調整
   ------------------------------------------------ */
@media screen and (min-width: 901px) and (max-width: 1600px) {
    .solution-container { padding: 20 30px !important; }
    .solution-content { gap: 20px !important; }
    
    /* 図サイズ制限 */
    .u-img-area img { width: 100% !important; max-width: 350px !important; }
    .top-row .u-img-area img { width: 100% !important; max-width: 320px !important; margin-top: 0 !important; }
    .bottom-row .u-img-area img { width: 100% !important; max-width: 420px !important; }

    /* 下段レイアウト調整 */
    .bottom-row { 
        display: flex !important; justify-content: center !important; align-items: center !important; 
        margin-top: 30px !important; 
        padding-left: 30px !important; padding-right: 30px !important; /* 左右均等 */
    }
    .bottom-row .u-img-area { 
        margin: 0 !important; justify-content: center !important; overflow: visible !important; flex: 1.5 !important;
        padding: 0 !important; display: flex !important;
    }

    /* ボックス調整 */
    .solution-right { justify-content: flex-start !important; padding-top: 0 !important; }
    .solution-right .feature-box { max-width: 250px !important; height: 240px !important; padding: 10px !important; }
    
    /* SES内ロゴ拡大 */
    .solution-right .feature-icon img { height: 130px !important; margin-top: 15px !important; margin-bottom: 15px !important; }
    .solution-right .feature-text { font-size: 0.95rem !important; line-height: 1.5 !important; }

    /* タイトル位置調整 */
    .solution-title-area { margin-bottom: -110px !important; }
    .solution-title { margin-bottom: -190px !important; font-size: 2.0rem !important; }
    .product-name-en { margin-bottom: -65px !important; font-size: 2.5rem !important; }
    .product-underline { margin-bottom: -55px !important; width: 180px !important; }

    /* 説明文・見出し調整 */
    .u-title { white-space: nowrap !important; font-size: 1.0rem !important; }
    .u-desc { font-size: 0.9rem !important; line-height: 1.5 !important; word-break: break-all !important; white-space: normal !important; }
    .u-desc br { display: none !important; }
    .u-point { padding-left: 0 !important; }
    .solution-sub-title { margin-top: 25px !important; }

    /* 上段のテキストエリア左右調整 */
    .top-row .u-text-area { padding-left: 15px !important; padding-right: 15px !important; }

    /* カード個別調整 */
    .col-wps .new-solution-card { width: 100% !important; max-width: 260px !important; margin-left: auto !important; margin-right: auto !important; }
    .col-dlp .new-card-text { padding-right: 0 !important; transform: translateX(-3px) !important; display: block !important; width: 100% !important; }

    /* ==========================================================================
   ★WPS（緑色）のカード位置調整
   ========================================================================== */
html body .col-wps .cards-row {
    margin-top: -40px !important; /* この数値を変更して高さを調整してください */
    position: relative !important; 
    z-index: 5 !important;        /* 重なり順を前面に保つ */
}

    /* ==============================================
       ★WPS, DLP, SOC, ESSのアンダーライン位置調整
       （PCズーム時 125%〜200% 用）
       ============================================== */
    html body .solution-col .product-underline {
        /* 上に大きくずらす設定です */
        margin-top: -70px !important;  
        
        /* 左右中央揃え */
        margin-left: auto !important;
        margin-right: auto !important;
        
        /* 念のためブロック要素指定 */
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
        
        /* 画像の幅（必要であれば変更） */
        width: 200px !important; 
    }
}

/* ------------------------------------------------
   B. 中間サイズ1 (1201px - 1450px)
   ※ ノートPC等でSESを少し縮小・配置調整
   ------------------------------------------------ */
@media screen and (min-width: 1201px) and (max-width: 1450px) {
    /* SES縮小 */
    html body .solution-box {
        width: 95% !important; transform: scale(0.95) !important; transform-origin: top center !important;
        margin-bottom: -30px !important;
    }
    /* 他製品も縮小 */
    html body .dual-solution-wrapper {
        width: 95% !important; transform: scale(0.95) !important; transform-origin: top center !important;
        margin-left: auto !important; margin-right: auto !important; margin-bottom: -20px !important;
    }
    html body .solution-content .unique-feature-row .u-img-area img { width: 280px !important; }
}

/* ------------------------------------------------
   C. 配置調整 (901px - 1450px)
   ※ 独自機能エリアを縦並びにし、カードを3列維持
   ------------------------------------------------ */
@media screen and (min-width: 901px) and (max-width: 1450px) {
    /* --- 1. 独自機能エリア（変更なし） --- */
    html body .solution-content .unique-feature-row,
    html body .solution-content .top-row,
    html body .solution-content .bottom-row {
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: flex-start !important;
        gap: 0px !important; width: 100% !important; height: auto !important;
    }
    html body .solution-content .top-row { margin-bottom: 0 !important; }
    .top-row .u-text-area { padding-left: 30px !important; }
    html body .solution-content .bottom-row { margin-top: -30px !important; margin-bottom: 20px !important; }

    /* --- テキストエリアの基本リセット --- */
    html body .u-text-area {
        order: 1 !important; width: 100% !important; margin: 25px 0 0 0 !important;
        padding: 0 !important; text-align: center !important;
    }
    
    /* 基本の見出しスタイル */
    html body .u-text-area .u-title {
        display: inline-block !important; width: auto !important;
        margin: 0 auto 10px auto !important; padding-bottom: 3px !important;
        border-bottom: 1px solid #fff !important; font-size: 1.0rem !important;
    }
    
    /* ポイント（箇条書き）部分 */
    html body .u-text-area .u-point {
        display: block !important; text-align: left !important; width: 90% !important;
        max-width: 700px !important; margin: 0 auto 10px auto !important;
        font-size: 0.9rem !important; font-weight: bold !important;
    }
    
    /* 説明文の基本スタイル */
    html body .u-text-area .u-desc {
        display: block !important; text-align: justify !important; width: 90% !important;
        max-width: 700px !important; margin: 0 auto !important; font-size: 0.7rem !important;
    }

    /* 画像エリアの位置 */
    html body .u-img-area {
        order: 2 !important; width: 100% !important; display: flex !important;
        justify-content: center !important; margin-top: -30px !important; margin-bottom: 0 !important;
        position: relative !important; z-index: 1 !important;
    }

    /* =========================================================
       ★ここが修正箇所です: 上段（適応型保護）の位置調整
       ========================================================= */
    
    /* 1. 親要素（箱）を完全に中央固定（余計な隙間を排除） */
    html body .solution-content .top-row .u-text-area {
        padding: 0 !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        transform: none !important;
        text-align: center !important;
    }

    /* 2. 「◆適応型保護」のタイトルだけを左へ押し出す */
    html body .solution-content .top-row .u-text-area .u-title {
        position: static !important;
        transform: none !important;
        left: auto !important; /* ← 古い記述(left)を無効化 */
        
        /* ▼ 右側に透明な壁を作って、自分だけ左にズレる */
        margin-right: 140px !important; 
        margin-left: 0 !important;
    }
    
    /* 3. 説明文は「中央」に固定（影響を受けないようにする） */
    html body .solution-content .top-row .u-text-area .u-desc {
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-block !important;
        transform: none !important;
    }
    /* ========================================================= */

    html body .solution-sub-title {
        display: inline-block !important;
        
        /* 左右を自動(auto)にして画面の真ん中に配置 */
        margin-left: auto !important;
        margin-right: auto !important;
        
        text-align: center !important;
        align-self: center !important; /* Flexbox内での中央配置 */
        width: auto !important;
        
        transform: none !important;    /* 位置ズレの解除 */
    }

    /* ========================================================
       ★修正箇所★ SESカードの幅計算式を他のカードと統一
       ======================================================== */

    /* 1. カードコンテナ (WPS等) */
    html body .cards-row {
        display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
        justify-content: center !important; gap: 20px !important; width: 100% !important;
        margin: 0 auto !important; padding: 0 !important;
    }

    /* 2. カードの外枠配置 (WPS等) */
    html body .cards-row .col-item {
        flex: 0 0 calc(50% - 10px) !important; width: calc(50% - 10px) !important;
        max-width: 260px !important;
        display: flex !important; justify-content: center !important;
        margin: 0 0 20px 0 !important; padding: 0 !important;
    }
    /* 1枚目（ピラミッド頂点） */
    html body .cards-row .col-item:first-of-type:nth-last-of-type(3) {
        flex: 0 0 100% !important; width: 100% !important; max-width: none !important;
        margin-bottom: 20px !important;
        display: flex !important; justify-content: center !important;
    }
    /* 1枚目の中身 */
    html body .cards-row .col-item:first-of-type:nth-last-of-type(3) .new-solution-card {
        width: calc(50% - 10px) !important; max-width: 260px !important; margin: 0 auto !important;
    }

    /* 3. ★全カード共通スタイル定義 (デザイン部分)★ */
    html body .new-solution-card,
    #solution .solution-right .feature-box,       
    #solution .feature-bottom-row .feature-box {  
        /* --- 完全スクエア設定 --- */
        max-width: 260px !important;    /* 最大幅キャップ */
        height: auto !important;
        aspect-ratio: 1 / 1 !important; /* 正方形比率 */
        min-height: 0 !important;
        
        /* --- デザイン調整 --- */
        margin: 0 auto !important;
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
    }

    /* 4. ★幅の指定を分離 (ここが重要)★ */
    
    /* 製品カード (青) は親要素(.col-item)に従うので 100% */
    html body .new-solution-card {
        width: 100% !important;
    }

    /* SESカード (黄) は親要素がないため、計算式を直接適用して合わせる */
    #solution .solution-right .feature-box,
    #solution .feature-bottom-row .feature-box {
        width: calc(50% - 10px) !important; /* ★これで青いカードと完全に同じ幅になります */
    }


    /* 5. SESエリア（右側）の配置調整 */
    html body .solution-right {
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: flex-start !important;
        width: 100% !important;
    }
    /* SESの下段2枚 */
    html body .feature-bottom-row {
        display: flex !important; flex-direction: row !important;
        justify-content: center !important; gap: 20px !important;
        width: 100% !important;
    }

    /* 6. カード内の画像サイズ統一 */
    html body .new-card-img,
    #solution .feature-icon img,                  
    #solution .solution-right .feature-icon img { 
        height: auto !important;
        width: auto !important;
        max-width: 70% !important;
        max-height: 90px !important;    
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        object-fit: contain !important;
    }

    /* 7. カード内のテキスト統一 */
    html body .new-card-text,
    #solution .feature-text,                
    #solution .solution-right .feature-text {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* 8. 説明文（枠外）の文字サイズ統一 */
    html body .sol-desc, 
    html body .product-desc {
        font-size: 0.65rem !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
        height: auto !important;
    }
}

/* ------------------------------------------------
   D. ヘッダー崩れ防止 (901px - 1350px)
   ------------------------------------------------ */
@media screen and (min-width: 901px) and (max-width: 1350px) {
    html body .header__inner { padding: 0 10px !important; width: 100% !important; justify-content: space-between !important; }
    html body .header__logo img { height: 30px !important; width: auto !important; }
    html body .header__logo { margin-left: 0 !important; margin-right: auto !important; }
    html body .header__nav { gap: 5px !important; margin-right: 0 !important; margin-left: auto !important; width: auto !important; }
    html body .header__list { gap: 5px !important; }
    html body .header__list li a { font-size: 11px !important; padding: 5px !important; white-space: nowrap !important; }
    html body .btn--header {
        font-size: 11px !important; padding: 5px 10px !important; min-width: 0 !important;
        white-space: nowrap !important; height: auto !important; line-height: 1.2 !important;
    }
    /* 独自機能（適応型保護）の見出しを強制的に中央揃えにする */
    html body .solution-content .top-row .u-text-area .u-title {
        margin-right: auto !important;  /* 右マージン(140px)を解除 */
        margin-left: auto !important;   /* 左マージンも自動調整 */
        text-align: center !important;  /* 文字を中央揃え */
        display: inline-block !important; 
        width: auto !important;
        transform: none !important;     /* 位置ズレ要因をリセット */
    }
}

/* ------------------------------------------------
   E. 中間サイズ2 (901px - 1200px)
   ※ 強力な縮小補正
   ------------------------------------------------ */
@media screen and (min-width: 901px) and (max-width: 1200px) {

    /* --- 1. MV (メインビジュアル) の縮小 --- */
    html body .mv__title-top, 
    html body .mv__title-bottom { font-size: 2.4rem !important; }
    html body .mv__lead { font-size: 1.1rem !important; }
    html body .mv { min-height: 500px !important; height: 60vh !important; }

    /* --- 2. Market (市場背景) の縮小 --- */
    html body .market-heading { font-size: 2.0rem !important; margin-bottom: 20px !important; }
    html body .stat-num { font-size: 3.5rem !important; }
    html body .bubble { width: 140px !important; height: 140px !important; padding: 5px !important; }
    html body .bubble-num { font-size: 2.5rem !important; }

    /* --- 3. Reason (6つの理由) の縮小 --- */
    /* リング全体を80%の大きさに縮小して、上下の余白を詰める */
    html body .reason-container { 
        transform: scale(0.8) !important; 
        transform-origin: center center !important;
        margin-top: -60px !important; 
        margin-bottom: -60px !important; 
    }

    /* --- 4. Footer (バナーエリア) の文字サイズ調整 --- */
    html body .banner-title { font-size: 1.6rem !important; }
    html body .banner-sub-text { font-size: 1.4rem !important; }

    /* --- 5. Concept (多層防御) の縮小 --- */
    /* タイトルとサブタイトルを小さく */
    html body .concept-title { font-size: 1.5rem !important; margin-bottom: 10px !important; }
    html body .concept-sub-title { font-size: 1.2rem !important; margin-bottom: 20px !important; top: 0 !important; }
    
    /* ボックス内の余白と文字サイズを詰める */
    html body .concept-box { 
        padding: 20px !important; 
        margin-bottom: 30px !important; 
    }
    html body .concept-text { 
        font-size: 0.85rem !important; 
        line-height: 1.6 !important; 
    }
    
    /* 下部のロゴと説明文の調整 */
    html body .concept-footer__logo { width: 200px !important; right: 0 !important; margin-bottom: -20px !important; }
    html body .concept-footer__desc p { font-size: 0.9rem !important; }

    /* --- 6. Worries (課題・不安) の縮小 --- */
    html body .worries-title { 
        font-size: 1.5rem !important; 
        margin-bottom: 30px !important; 
    }
    html body .worry-box { 
        min-height: 60px !important; 
        padding: 5px !important;
        margin-bottom: 15px !important; 
    }
    html body .worry-box p { 
        font-size: 0.65rem !important; /* 文字を小さく */
        line-height: 1.4 !important;
    }
    html body .worry-icon img { 
        max-height: 100px !important; /* イラストを小さく */
    }
    
    /* 前回追加した「IT機器販売...」の文字切れ防止設定 */
    html body .banner-desc {
        font-size: 0.85rem !important;   /* さらに少し小さく */
        white-space: normal !important;  /* 折り返し許可 */
        line-height: 1.4 !important;
    }

    /* SES強力縮小 */
    html body .solution-box {
        width: 100% !important; transform: scale(0.85) !important; transform-origin: top center !important;
        margin-bottom: -80px !important;
    }
    /* 他製品も強力縮小 */
    html body .dual-solution-wrapper {
        width: 100% !important; transform: scale(0.85) !important; transform-origin: top center !important;
        margin-left: auto !important; margin-right: auto !important; margin-bottom: -60px !important;
    }
    html body .solution-content .bottom-row { margin-top: -20px !important; }
    html body .solution-content .unique-feature-row .u-img-area img { width: 220px !important; max-width: 220px !important; }
    html body .u-text-area { margin-top: 20px !important; }

    /* フッターバナー文字調整（文字サイズ縮小 & 折り返し許可） */
    html body .banner-desc {
        font-size: 0.9rem !important;   /* 文字サイズを小さくする */
        white-space: normal !important; /* はみ出さないように折り返しを許可する */
        line-height: 1.4 !important;    /* 行間を少し広げて読みやすくする */
    }

    /* --- 7. SESレイアウト調整 (カードサイズ維持 & 左枠拡大) --- */
    
    /* (1) 全体の余白を詰めて、使える幅を増やす */
    html body .solution-box {
        padding: 15px 5px !important; /* 外枠の余白を最小限に */
    }
    html body .solution-content {
        gap: 5px !important; /* 左右の隙間を最小限に */
    }

    /* (2) 左側（独自機能）を広げる */
    html body .solution-left {
        flex: 1.5 !important; /* 左側の比率を上げる */
        width: auto !important;
        padding: 5px !important;
    }

    /* (3) 右側（カードエリア）の調整 */
    html body .solution-right {
        flex: 1 !important;
        padding-left: 0 !important;
        /* カードが入るギリギリの幅を確保 */
        min-width: 320px !important; 
        padding-top: 100px !important; /* この数値を大きくすると、もっと下がります */
        justify-content: flex-start !important;
    }

    /* (4) カードサイズを「他の製品」と同等レベルに調整 */
    /* ※極端な縮小はせず、文字が読めるサイズを維持 */
    html body .solution-right .feature-box,
    html body .feature-bottom-row .feature-box {
        max-width: 160px !important; /* スマホ版と同じくらいの幅を確保 */
        padding: 10px !important;
        border-width: 2px !important;
        height: 180px !important;    /* ★この数値を小さくすればもっと狭くなります */
        min-height: 0 !important;
        overflow: hidden !important; /* はみ出した部分は強制的に隠す */
    }
    
    /* (5) カード内の要素調整 */
    html body .solution-right .feature-icon img {
        max-height: 70px !important; /* アイコンサイズも維持 */
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
    html body .solution-right .feature-text {
        font-size: 0.7rem !important; /* 文字も読める大きさを維持 */
        line-height: 1.3 !important;
    }
    /* --- 8. 他製品(WPS等)のカード配置修正 (スペース圧縮版) --- */
    
    /* (1) 親枠（製品ごとの枠）の余白を減らしてスペースを確保 */
    html body .solution-col {
        padding: 15px 5px !important; /* 左右の余白を5pxまで減らす */
        min-width: 0 !important;      /* 枠自体の幅制限も解除 */
    }

    /* (2) カードエリアの設定 */
    html body .cards-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 6px !important; /* カード間の隙間を限界まで詰める */
    }

    /* (3) 各カードの幅設定 */
    html body .col-item {
        /* 「50%」だと隙間で落ちるので「48%」にするのがコツです */
        flex: 0 0 48% !important;
        width: 48% !important;
        
        /* 縦並びの原因である「最小幅制限」を解除 */
        min-width: 0 !important; 
        max-width: none !important;
        
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* (4) ピラミッドの頂点（3枚中1枚目）の設定 */
    html body .cards-row .col-item:first-child:nth-last-child(3) {
        flex: 0 0 100% !important; /* 枠としては100%使う */
        width: 100% !important;
        margin-bottom: 5px !important; /* 下の段との隙間 */
    }
    
    /* (5) 頂点のカード本体を、下のカードと同じサイズにする */
    html body .cards-row .col-item:first-child:nth-last-child(3) .new-solution-card {
        width: 48% !important; /* 下段と同じ48%幅 */
        margin: 0 auto !important;
    }

    /* (6) カード本体の縮小対応 */
    html body .new-solution-card {
        width: 100% !important;
        min-height: 0 !important; /* 高さ制限解除 */
        height: auto !important;
        padding: 10px 5px !important; /* カード内の余白も詰める */
    }
    
    /* (7) 中身の画像サイズ調整 */
    html body .new-card-img {
        height: auto !important;
        max-height: 60px !important; /* 画像を小さくして高さを抑える */
        margin-bottom: 5px !important;
    }
    html body .new-card-text {
        font-size: 0.75rem !important; /* 文字サイズも少し小さく */
        line-height: 1.3 !important;
    }

    /* --- 9. フッターバナー背景画像の拡大調整 --- */
    html body .banner-bg-img {
        /* 通常(1.1倍)よりさらに大きくして、隙間なく埋める */
        transform: scale(1.3) !important; 
        transform-origin: center center !important;
        
        /* 画像の表示崩れ防止 */
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* 枠に合わせてトリミング */
    }
    
}

/* ==========================================================================
   12. 【モバイル/スマホ用】(max-width: 900px)
   ※ 構文修正済み・カードデザイン完全統一版
   ========================================================================== */
@media (max-width: 900px) {
    
    /* --- 共通レイアウト --- */
    .container, .top-row, .bottom-row, .card-container,
    html body .container, html body .top-row, html body .bottom-row, html body .card-container {
        display: flex !important; flex-direction: column !important; width: 100% !important;
        gap: 20px !important; align-items: center !important;
    }
    
    /* ヘッダー */
    .header__inner { justify-content: flex-end; gap: 15px; padding: 10px 20px; }
    .header__list { display: block; padding: 0; }
    .header__hamburger { display: block; }
    .btn--header { margin: 0; }
    .header__logo { margin-left: -10px; }
    .header__logo img { height: 38px; }
    
    /* ドロップダウンメニュー */
    .header__nav {
        display: block; position: absolute; top: 100%; left: 0;
        width: 100% !important; background: #f4f4f4;
        visibility: hidden; opacity: 0; transform: translateY(-10px);
        transition: all 0.3s ease-in-out; z-index: 1000;
        border-top: 1px solid #ddd; box-shadow: 0 5px 10px rgba(0,0,0,0.1); margin: 0;
    }
    .header__nav.is-active { visibility: visible; opacity: 1; transform: translateY(0); }
    .header__list li { border-bottom: 1px solid #e0e0e0; }
    .header__list li a { color: #333; padding: 15px 20px; font-weight: bold; }
    .header__list li a:hover { background: #e0e0e0; text-decoration: none; }

    /* MV */
    .mv { height: 500px; min-height: auto; padding: 0; background-position: center top; }
    .mv__title-top, .mv__title-bottom { font-size: 1.8rem !important; }
    .mv__lead { font-size: 0.9rem; line-height: 1.5; margin-top: 10px; }

    /* Market (市場背景) */
    .market-section { padding: 0; background: #000; }
    .market-section::before, .market-section::after, .market-container::before { display: none !important; }
    .market-container { flex-direction: column; gap: 0; padding: 0; width: 100%; }
    .market-col {
        width: 100%; max-width: 100%; flex: none; aspect-ratio: 1 / 1;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        background: radial-gradient(circle at center, #0055FF 0%, #000000 80%); padding: 20px;
    }
    .market-col--left { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
    .market-heading, .market-heading--sm-margin { font-size: 1.5rem; line-height: 1.3; margin-bottom: 15px; }
    .market-sub-heading { font-size: 1.1rem; margin-top: 5px; }
    .bubble { width: 140px; height: 140px; }
    .bubble-row { gap: 10px; position: relative; z-index: 2; }
    .bubble-num { font-size: 2.5rem; }
    .bubble-unit { font-size: 1.5rem; }
    .stat-text-lg { font-size: 1.2rem; margin-bottom: 5px; }
    .stat-row { gap: 10px; }
    .stat-num { font-size: 3.5rem; }
    .stat-small { font-size: 1.5rem; }
    .market-stat { margin-bottom: 20px; }
    .market-stat:last-child { margin-bottom: 0; }

    /* Concept (多層防御) */
    .concept-section { padding: 20px 0 0 0; overflow: visible; background-position: 30% 40%; background-size: 400%; }
    html body .concept-title,
    html body .concept-sub-title {
        font-size: 6.0vw !important; white-space: normal; margin-bottom: 5px;
        letter-spacing: -0.08em !important; line-height: 1.4 !important; width: 100% !important;
    }
    .concept-sub-title { margin-top: 15px; margin-bottom: 20px; position: static; }
    .concept-box { padding: 20px 15px; margin-bottom: 50px; }
    .concept-text { font-size: 0.95rem; text-align: left !important; line-height: 1.6; }
    .concept-footer { flex-direction: column; gap: 15px; }
    html body .concept-footer__desc p { font-size: 0.95rem !important; text-align: justify !important; line-height: 1.6 !important; width: 100% !important; }
    html body .concept-footer__desc p br, html body .concept-footer__desc br { display: none !important; }
    .concept-footer__logo { width: 250px; margin: 0 auto -45px auto; transform: translateY(-30px); right: auto; left: auto; }

    /* Worries (課題) */
    .worries-section { padding: 40px 0; }
    .worries-title { font-size: 1.4rem; margin-bottom: 25px; }
    .worries-list { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .worry-item { width: 46%; margin-bottom: 0px; padding: 15px 5px; }
    .worry-box { min-height: 80px; padding: 10px 2px; margin-bottom: 25px; }
    html body .worry-box p { font-size: 0.65rem; line-height: 1.5 !important; letter-spacing: -0.08em; text-align: center; width: 100% !important; white-space: normal !important; padding: 0 5px !important; }
    html body .worry-box p br { display: none !important; }
    .worry-icon img { max-height: 140px; }

    /* Solution (SES & Products) */
    .solution-section { padding: 40px 0; }
    html body .solution-container { padding: 0 20px !important; padding-top: 0 !important; margin-top: 0 !important; }
    
    /* SESタイトル調整 */
    html body .solution-title-area { margin-bottom: 10px !important; margin-top: -20px !important; height: auto !important; min-height: 0 !important; padding-bottom: 0 !important; }
    html body .solution-title { font-size: 3.8vw !important; white-space: nowrap !important; margin-bottom: 0 !important; width: 100% !important; }
    .highlight-yellow { font-size: 1.25em; top: -5px; }
    html body .title-underline { width: 70% !important; margin-top: -80px !important; max-width: 350px; }

    /* SESボックス本体 */
    html body .solution-box {
        padding: 30px 15px !important; border-width: 2px; border-radius: 0px;
        margin-top: -70px !important; margin-bottom: 20px !important; /* 製品間の隙間統一 */
        width: 100% !important; min-height: 400px !important; height: auto !important;
        transform: none !important; /* PCの縮小解除 */
        display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important;
    }
    html body .solution-header { margin-bottom: 0 !important; display: contents !important; }
    
    /* 製品名・説明文 (SES & 他製品共通化) */
    html body .product-name-en, html body .solution-col h2 {
        font-size: 2.5rem !important; line-height: 1.1 !important; margin-top: -10px !important; margin-bottom: -60px !important;
    }
    html body .solution-box .product-name-en { margin-top: 0 !important; } /* SES特有 */
    html body .product-underline, html body .solution-col .product-underline {
        width: 180px !important; height: auto !important; margin-top: -5px !important; margin-bottom: 15px !important; position: static !important; transform: none !important;
    }
    html body .product-name-ja, html body .solution-col .sub-title {
        font-size: 1.1rem !important; font-weight: bold !important; margin-top: -60px !important; margin-bottom: 10px !important; line-height: 1.4 !important; display: block !important;
    }
    html body .product-desc, html body .sol-desc {
        font-size: 0.75rem !important; line-height: 1.6 !important; margin-top: 0px !important; margin-bottom: 10px !important; text-align: center !important; white-space: normal !important; flex-grow: 0 !important;
    }
    html body .product-desc br, html body .sol-desc br { display: none !important; }

    /* SESレイアウト (独自機能) */
    .solution-content { flex-direction: column; gap: 50px; }
    .solution-left, .solution-right { width: 100% !important; }
    .solution-sub-title { font-size: 1.2rem; margin-top: 5px;}
    
    html body .unique-feature-row { display: flex !important; flex-direction: column !important; }
    html body .u-text-area { order: 1 !important; margin-bottom: 20px !important; margin-top: 0 !important; padding: 0 !important; }
    html body .u-img-area { order: 2 !important; margin-top: 30px !important; }
    html body .u-title { font-size: 1.0rem !important; line-height: 1.4 !important; margin-bottom: 5px !important; }
    html body .u-desc { font-size: 0.75rem !important; line-height: 1.6 !important; }
    html body .u-desc br { display: none !important; }
    html body .u-point { text-align: left !important; padding-left: 0 !important; width: 100% !important; display: block !important; font-size: 0.85rem !important; margin-bottom: 5px !important;}
    
    /* 独自機能画像の個別調整（重なり・位置） */
    html body .top-row .u-text-area { margin-top: -60px !important; padding-top: 0 !important; }
    html body .bottom-row .u-img-area { margin-top: 20px !important; }
    html body .solution-box .solution-content .bottom-row .u-text-area { margin-top: -40px !important; padding-top: 0 !important; }
    
    html body .u-img-area img, .top-row .u-img-area img, .bottom-row .u-img-area img {
        width: 100% !important; max-width: 300px !important; margin: 0 !important;
    }
    /* 画像引き上げ指定 */
    html body .solution-box img[src*="適応型保護.svg"] { margin-top: -100px !important; position: relative !important; z-index: 1 !important; margin-bottom: 0 !important; }
    html body .solution-box img[src*="Active Directoryの保護.svg"] { margin-top: -60px !important; position: relative !important; z-index: 1 !important; margin-bottom: 0 !important; }
    html body .solution-box .u-text-area, html body .solution-box p { position: relative !important; z-index: 2 !important; }

    /* ========================================================
       ★ SES & 他製品カード 完全統一スタイル ★
       ======================================================== */
    /* 1. カードコンテナ (SES & Others) の間隔統一 */
    html body .solution-right {
        width: 100% !important; padding-top: 0 !important;
        display: flex !important; flex-direction: column !important; align-items: center !important;
        gap: 10px !important; /* 他製品の隙間(10px)に合わせる */
    }

    /* 2. カード本体のデザイン統一（border-none, padding統一） */
    html body .feature-box, 
    html body .new-solution-card, 
    html body .solution-right .feature-box,
    html body .feature-bottom-row .feature-box {
        width: 100% !important; 
        max-width: 160px !important;
        aspect-ratio: 1 / 1 !important; 
        height: auto !important; 
        min-height: 0 !important;
        
        /* デザイン統一 */
        background: #E6E6E6 !important;
        
        /* ▼ 変更点: border: none を削除し、太さとスタイルだけ定義します ▼ */
        border-style: solid !important;
        border-width: 3px !important;
        /* ▲ ここまで ▲ */

        border-radius: 12px !important;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1) !important;
        
        /* レイアウト統一 */
        display: flex !important; 
        flex-direction: column !important; 
        justify-content: center !important; 
        align-items: center !important;
        padding: 10px !important;
        margin: 0 auto !important;
    }

    /* 1. SES (イエロー) */
    html body .feature-box, 
    html body .solution-right .feature-box,
    html body .feature-bottom-row .feature-box {
        border-color: #FFC107 !important;
    }

    /* 2. その他製品の枠線色 */
    html body .col-wps .new-solution-card { border-color: #7bc143 !important; } /* WPS: グリーン */
    html body .col-dlp .new-solution-card { border-color: #009FE8 !important; } /* DLP: ブルー */
    html body .col-soc .new-solution-card { border-color: #ff3399 !important; } /* SOC: ピンク */
    html body .col-ess .new-solution-card { border-color: #aacc00 !important; } /* ESS: ライム */
    html body .col-ztna .new-solution-card { border-color: #c49a6c !important; } /* ZTNA: ブラウン */
    html body .col-gss .new-solution-card { border-color: #e60012 !important; } /* GSS: レッド */
    
    /* 3. 配置（下段横並び）の統一 */
    html body .feature-bottom-row { 
        display: flex !important; flex-direction: row !important; 
        gap: 10px !important; width: 100% !important; justify-content: center !important; 
    }
    /* SES下段2枚の幅 */
    html body .feature-bottom-row .feature-box { 
        width: 48% !important; max-width: 160px !important; 
    }
    
    /* 他製品グリッド */
    html body .cards-row {
        display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
        justify-content: center !important; gap: 10px !important; width: 100% !important; padding: 0 !important;
    }
    html body .col-item {
        width: 48% !important; min-width: 0 !important; max-width: none !important;
        flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; 
        display: flex !important; justify-content: center !important;
    }
    /* 他製品のトップ（ピラミッド頂点） */
    html body .cards-row .col-item:first-child:nth-last-child(3) { width: 100% !important; margin-bottom: 0px !important; }

    /* 4. アイコン画像の統一 */
    html body .feature-icon img, 
    html body .solution-right .feature-icon img,
    html body .new-card-img {
        height: auto !important; 
        width: 80% !important; /* 少し小さくして余白確保 */
        max-width: 100px !important; 
        max-height: 100px !important;
        margin-top: 0 !important; 
        margin-bottom: 8px !important;
        object-fit: contain !important; 
        position: relative !important; z-index: 1 !important; opacity: 0.9;
    }
    
    /* SESのロゴ位置微調整リセット */
    html body .solution-right .feature-icon img { margin-top: 0 !important; margin-bottom: 8px !important; }

    /* 5. テキストの統一 */
    html body .feature-text, 
    html body .solution-right .feature-text,
    html body .new-card-text {
        font-size: 10px !important; 
        line-height: 1.3 !important; 
        margin: 0 !important; 
        width: 100% !important;
        white-space: normal !important; 
        text-align: center !important;
        position: relative !important; z-index: 2 !important;
    }
    html body .solution-right .feature-text { margin-top: 0 !important; } /* SESのマージンリセット */
    html body .text-large { font-size: 10px !important; display: block !important; margin-top: 0 !important; }


    /* --- 他製品 (WPS, DLP...) コンテナ --- */
    html body .dual-solution-wrapper {
        display: flex !important; flex-direction: column !important;
        gap: 20px !important; padding: 0 20px !important; height: auto !important; align-items: stretch !important;
    }
    html body .dual-solution-wrapper + .dual-solution-wrapper { margin-top: 20px !important; }
    
    html body .solution-col,
    html body .col-wps, html body .col-dlp, html body .col-soc,
    html body .col-ess, html body .col-ztna, html body .col-gss {
        margin: 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important;
        height: auto !important; min-height: auto !important;
        padding: 30px 15px !important;
        display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important;
        transform: none !important; position: static !important; flex: 0 0 auto !important;
        border-width: 3px !important;
    }
    html body .col-ess .sub-title { transform: translateX(-5px) !important; }

    /* 矢印 */
    .solution-arrow {
        transform: none !important; width: 100% !important;
        margin-top: 30px !important; margin-bottom: 10px !important; padding: 0 10px !important;
    }
    .solution-arrow, .solution-arrow * { white-space: nowrap !important; font-size: 4.0vw !important; width: auto !important; }
    .solution-arrow img { width: 90% !important; max-width: 300px !important; margin-top: 5px !important; }

    /* --- 6つの理由 (Reason) --- */
    html body .reason-section { padding: 40px 0 !important; padding-top: 10px !important; height: auto !important; overflow: hidden !important; }
    html body .reason-container {
        width: 350px !important; height: 350px !important;
        position: relative !important; display: block !important; margin: -5px auto 0 auto !important; padding: 0 !important;
    }
    html body .reason-ring {
        display: block !important; width: 70% !important; height: 70% !important;
        top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
        border: 15px solid #2b51a8 !important; border-radius: 50% !important;
    }
    html body .reason-center-title {
        position: absolute !important; top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important; width: 180px !important; margin: 0 !important;
    }
    .reason-main { font-size: 1.5rem !important; }
    .reason-sub { font-size: 0.6rem !important; margin-bottom: 0px !important; }
    html body .reason-underline { width: 100px !important; height: auto !important; margin: -10px auto 0 !important; display: block !important; background-color: transparent !important; margin-top: -35px !important; }

    /* バブル設定 */
    html body .reason-bubble {
        position: absolute !important; width: 90px !important; height: 90px !important;
        padding: 0 !important; margin: 0 !important; border-radius: 50% !important; transform: none !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        font-size: 10px !important; line-height: 1.3 !important;
        background: radial-gradient(circle at 30% 30%, #6895fe, #001f65) !important; color: #fff !important;
        white-space: nowrap !important; overflow: visible !important;
    }
    html body .reason-bubble br, html body .reason-bubble .pc-br { display: inline !important; }
    
    /* ポジション (PC比率適用) */
    html body .pos-1 { top: 8% !important; left: 20% !important; right: auto !important; bottom: auto !important; }
    html body .pos-2 { top: 8% !important; right: 20% !important; left: auto !important; bottom: auto !important; }
    html body .pos-3 { bottom: 35% !important; right: 5% !important; top: auto !important; left: auto !important; }
    html body .pos-4 { bottom: 8% !important; right: 20% !important; top: auto !important; left: auto !important; }
    html body .pos-5 { bottom: 8% !important; left: 20% !important; top: auto !important; right: auto !important; }
    html body .pos-6 { top: 38% !important; left: 5% !important; right: auto !important; bottom: auto !important; }

    /* バブル内テキスト位置補正 */
    html body .pos-1 .default-text, html body .pos-2 .default-text,
    html body .pos-4 .default-text, html body .pos-5 .default-text { padding-right: 1px !important; padding-left: 0 !important; }

    /* アニメーション & テキスト表示 */
    @keyframes showTitle { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
    @keyframes showDesc { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }
    
    html body .reason-bubble .default-text, html body .reason-bubble .view-text {
        position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
        width: 100% !important; margin: 0 !important; text-align: center !important;
        animation-duration: 6s !important; animation-iteration-count: infinite !important; animation-timing-function: ease-in-out !important;
    }
    html body .reason-bubble .default-text {
        font-size: 10px !important; font-weight: bold !important; line-height: 1.3 !important;
        z-index: 2 !important; padding: 0 4px !important; animation-name: showTitle !important; white-space: normal !important;
    }
    html body .reason-bubble .default-text br { display: inline !important; }

    html body .reason-bubble .view-text, html body .reason-bubble .view-text p {
        white-space: normal !important; word-wrap: break-word !important; overflow: visible !important;
        width: 100% !important; max-width: 100% !important;
        font-size: 6.5px !important; line-height: 1.15 !important; font-weight: normal !important; z-index: 2 !important; padding: 0 4px !important;
        display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 100% !important;
        animation-name: showDesc !important;
    }
    html body .reason-bubble .view-text br { display: none !important; }
    html body .reason-bubble.pos-3 .view-text, html body .reason-bubble.pos-3 .view-text p {
        font-size: 7px !important; line-height: 1.1 !important; letter-spacing: -0.08em !important; padding: 0 2px !important; white-space: normal !important;
    }

    /* --- フッター (Contact) --- */
    html body .contact-section .footer-banners { gap: 10px !important; margin-bottom: 20px !important; }
    html body .contact-section .footer-banners .f-banner {
        padding: 8px 5px !important; height: 160px !important; min-height: 0 !important; margin: 0 0 10px 0 !important;
        display: flex !important; flex-direction: column !important; justify-content: center !important;
    }
    html body .banner-content { padding: 0 !important; gap: 0 !important; }
    
    html body .banner-left .banner-sub-text { font-size: 1.6rem !important; margin-bottom: 0 !important; line-height: 1.0 !important; padding: 0 !important; }
    html body .banner-left .banner-title { font-size: 1.6rem !important; margin-bottom: 0 !important; line-height: 1.0 !important; padding: 0 !important; }
    html body .banner-left .banner-desc { margin-bottom: 2px !important; line-height: 1.1 !important; font-size: 0.8rem !important; }
    
    html body .tenamo-logo {
        position: absolute !important; width: 45% !important; height: auto !important; max-width: none !important;
        z-index: 1 !important; margin: 0 !important; opacity: 1.0 !important;
        margin-top: 12px !important; margin-bottom: 5px !important;
    }
    html body .footer-banners .banner-right .banner-sub-text { font-size: 1.0rem !important; margin-bottom: 45px !important; }
    html body .footer-banners .banner-right .banner-desc { font-size: 1.0rem !important; margin-bottom: 0px !important; }
    html body .banner-btn {
        padding: 5px 20px !important; font-size: 0.9rem !important; margin-top: 3px !important;
        border-width: 1px !important; line-height: 1.2 !important;
    }

    /* フッター情報 */
    .main-contact-btn { font-size: 1.2rem; padding: 15px 20px; width: 80%; }
    html body .footer-info { font-size: 1.0rem !important; }
    html body .contact-label, html body .department-name { font-size: 1.1rem !important; margin-bottom: 5px !important; }
    html body .phone-number { font-size: 2.0rem !important; margin-top: 5px !important; margin-bottom: 15px !important; }
    html body .office-hours { font-size: 0.9rem !important; margin-bottom: 30px !important; }
    html body .copyright { font-size: 0.8rem !important; }

} /* 【重要】ここで900pxのブロックを閉じます */

/* ------------------------------------------------
   (12の続き) 768px以下
   ------------------------------------------------ */
@media screen and (max-width: 768px) {
    .solution-arrow { padding: 0 5px !important; display: block !important; }
    .solution-arrow, .solution-arrow * { font-size: 3.8vw !important; }
    .solution-arrow img { width: 80% !important; }
    .banner-title { font-size: 1.5rem; }
}

/* ==========================================================================
   13. 激狭スマホ (iPhone SE等 / max-width: 400px)
   ========================================================================== */
@media screen and (max-width: 400px) {
    html body .bubble { width: 115px !important; height: 115px !important; padding: 5px !important; }
    html body .bubble-desc { font-size: 9px !important; line-height: 1.2 !important; margin-bottom: 0 !important; }
    html body .bubble-num { font-size: 2rem !important; }
    html body .bubble-unit { font-size: 1.2rem !important; }
    html body .market-col--right { transform: translateY(-30px) !important; }
    html body .market-col--right .market-heading { margin-bottom: 5px !important; }
    html body .market-col--right .market-stat { margin-top: 0 !important; padding-top: 0 !important; }
    html body .market-col--right .market-stat:last-child { margin-top: -10px !important; }

    .header__logo img { height: 32px !important; }
    .header__logo { margin-left: -5px !important; }
    .btn--header { font-size: 16px !important; padding: 10px 20px !important; white-space: nowrap !important; width: auto !important; }

    html body .solution-col .sub-title { font-size: 0.9rem !important; line-height: 1.3 !important; width: 100% !important; }

    html body .reason-container { width: 340px !important; height: 340px !important; }
    html body .reason-bubble { width: 90px !important; height: 90px !important; }
    html body .reason-bubble .default-text { font-size: 9px !important; }

    html body .container, html body .dual-solution-wrapper, html body .solution-container { padding-left: 15px !important; padding-right: 15px !important; }

    html body .banner-title { white-space: nowrap !important; font-size: 18px !important; }
    html body .banner-sub-text { font-size: 12px !important; }
    html body .footer-banners .f-banner .banner-content .banner-desc {
        font-size: 12px !important; letter-spacing: -0.05em !important; line-height: 1.3 !important; white-space: normal !important; margin-top: 3px !important;
    }
    html body .footer-banners .banner-right .banner-sub-text { margin-top: -50px !important; margin-bottom: 5px !important; }
    html body .footer-banners .banner-right .tenamo-logo { margin-top: 0 !important; margin-bottom: 0 !important; transform: translateY(0px) !important;width: 40% !important; max-width: 200px !important; height: auto !important; }
    html body .footer-banners .banner-right .banner-desc, html body .footer-banners .banner-right .banner-btn { transform: translateY(60px) !important; }

    html body .footer-info .department-name { white-space: nowrap !important; font-size: 16px !important; letter-spacing: -0.05em !important; width: 100% !important; display: block !important; }
}

/* ==========================================================================
   ★WPSカード位置調整（ズーム150%以上 / 強制移動版）
   ※ marginではなく transform を使うことで、レイアウト設定を無視して移動させます
   ========================================================================== */
@media screen and (max-width: 1350px) {
    html body .col-wps .cards-row {
        /* Y軸（縦方向）にマイナス移動させる記述です */
        transform: translateY(-150px) !important; 
        
        /* 念のためマージン等の設定はリセット */
        margin-top: 0 !important; 
        margin: 0 auto !important;
        
        /* 重なり順の指定 */
        position: relative !important;
        z-index: 10 !important;
    }
}

/* ==========================================================================
   ★縮小表示（ズーム1%～90%）/ 超高解像度モニター対応 (min-width: 1921px)
   ※ 背景は画面いっぱい、中身は崩れないように中央配置
   ========================================================================== */
@media screen and (min-width: 1921px) {

    /* 1. 背景色を持つセクション自体は「幅制限なし」で画面いっぱいに広げる */
    html body .contact-section,  /* フッター背景 */
    html body .mv,               /* MV背景 */
    html body .concept-section,  /* 多層防御背景 */
    html body .market-section,   /* 市場背景 */
    html body .reason-section {  /* 6つの理由背景 */
        width: 100% !important;
        max-width: none !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    /* 2. セクションの「中身」だけ幅を制限して中央に寄せる */
    html body .container,
    html body .solution-container,
    html body .mv__content,
    html body .worries-container,
    html body .concept-container,
    html body .footer-banners,       /* フッターのバナー群 */
    html body .contact-btn-wrapper,  /* お問い合わせボタン */
    html body .footer-info {         /* 会社情報テキスト */
        max-width: 1600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 3. 「6つの理由」のレイアウト崩れ修正 */
    html body .reason-container {
        /* ここを広げると円が楕円になって崩れるため、元の正方形サイズに固定します */
        width: 800px !important;
        height: 800px !important;
        max-width: 800px !important;
        
        /* 画面が広いので、崩れない程度に全体を少し拡大表示 */
        transform: scale(1.3) !important; 
        transform-origin: center center !important;
        margin: 100px auto !important; /* 上下の余白を確保 */
    }

    /* 4. SESなどの製品ボックス調整 */
    html body .solution-box {
        max-width: 1800px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* 5. 他製品（WPS等）のラッパー調整 */
    html body .dual-solution-wrapper {
        justify-content: center !important;
        max-width: 1600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 6. 市場背景（Market）の間隔調整 */
    html body .market-container {
        justify-content: center !important;
        gap: 50px !important;
    }

    /* 8. SES「独自機能の保護」内の画像・説明文サイズ調整 */
    
    /* 画像を少し小さく制限 */
    html body .u-img-area img {
        width: auto !important;
        max-width: 320px !important; /* ← この数値を小さくすると画像が小さくなります */
        max-height: 250px !important;
    }

    /* 説明文を少し小さく */
    html body .u-desc {
        font-size: 0.85rem !important; /* ← 文字サイズ */
        line-height: 1.6 !important;
    }
    
    /* 箇条書きポイント（◆〜の部分）もバランスを見て少し小さく */
    html body .u-point {
        font-size: 1.0rem !important;
    }

    /* ※見出し（u-title）は変更していません */

    /* ==========================================================================
   ★独自機能（適応型保護・AD保護）のテキスト位置調整
   ========================================================================== */

/* 1. 上段：適応型保護のテキストエリアを下げる */
html body .solution-content .top-row .u-text-area {
    padding-top: 60px !important; /* この数値を大きくするとさらに下がります */
}

/* 2. 下段：Active Directory保護のテキストエリアを下げる */
html body .solution-content .bottom-row .u-text-area {
    padding-top: 30px !important; /* この数値を大きくするとさらに下がります */
}

/* 上段（適応型保護）と 下段（AD保護）の画像を両方下げる */
html body .solution-content .top-row .u-img-area,
html body .solution-content .bottom-row .u-img-area {
    padding-top: 60px !important; /* テキストと同じ数値にすると揃って下がります */
    align-items: flex-start !important; /* 下げた分が中央揃えで戻らないように固定 */

}
}

/* ==========================================================================
   ★スマホ版 最終強制修復 (max-width: 900px)
   ※ これまでのPC用追記で崩れた箇所を、ここで強制的に正常な位置に戻します。
   ※ 必ずファイルの【一番最後】に記述してください。
   ========================================================================== */
@media screen and (max-width: 900px) {

    /* --- 1. 独自機能（適応型保護など）の余白リセット --- */
    /* PCで追加した padding-top: 60px を無効化します */
    html body .solution-content .top-row .u-text-area,
    html body .solution-content .bottom-row .u-text-area,
    html body .solution-content .top-row .u-img-area,
    html body .solution-content .bottom-row .u-img-area {
        padding-top: 0 !important;
        margin-top: 0 !important;
        transform: none !important;
    }

    /* 1. 左側エリア（独自機能全体）の箱をリセット */
    html body .solution-left {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;       /* 高さを中身に合わせる */
        padding: 20px 10px !important; /* 内側の余白確保 */
        gap: 60px !important;          /* ★重要: 上段と下段の間を60px空ける */
        background: transparent !important;
    }

    /* 2. 各行（適応型保護 / AD保護）のコンテナ設定 */
    html body .unique-feature-row,
    html body .solution-content .top-row,
    html body .solution-content .bottom-row {
        display: flex !important;
        flex-direction: column !important; /* 縦並び強制 */
        height: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;        /* 位置ずらし解除 */
        gap: 20px !important;              /* テキストと画像の間の隙間 */
        position: static !important;
    }

    /* 3. テキストエリアの設定（順序：上） */
    html body .u-text-area,
    html body .solution-content .top-row .u-text-area,
    html body .solution-content .bottom-row .u-text-area {
        order: 1 !important;           /* テキストを先に表示 */
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        position: static !important;   /* 重なり防止 */
        transform: none !important;
    }

    /* 見出しと本文の微調整 */
    html body .u-title {
        margin-bottom: 10px !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }
    html body .u-desc {
        text-align: left !important;
        width: 100% !important;
        display: block !important;
    }

    /* 4. 画像エリアの設定（順序：下） */
    html body .u-img-area,
    html body .solution-content .top-row .u-img-area,
    html body .solution-content .bottom-row .u-img-area {
        order: 2 !important;           /* 画像を後に表示 */
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        position: static !important;   /* 重なり防止 */
        transform: none !important;
    }

    /* 5. 画像本体のサイズと余白リセット */
    html body .u-img-area img {
        width: auto !important;
        max-width: 90% !important;     /* 画面からはみ出さない */
        height: auto !important;
        margin: 0 !important;
        transform: none !important;    /* 位置ずらし完全解除 */
        position: static !important;
    }
    
    /* 上下の間隔をスマホ用に再設定 */
    html body .u-text-area { margin-bottom: 20px !important; margin-top: 0 !important; }
    html body .u-img-area { margin-top: 20px !important; }
    
    /* そもそも縦並び（カラム）であることを再定義 */
    html body .solution-content .top-row,
    html body .solution-content .bottom-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-top: 0 !important;
    }

    /* (1) 上にあるサブタイトル（環境に合わせた...）の下余白を削除 */
    html body .solution-sub-title {
        margin-bottom: 0 !important;
        padding-bottom: 5px !important; /* 最低限の隙間 */
    }

    /* (2) 適応型保護のエリア全体を上に詰める */
    html body .solution-content .top-row {
        margin-top: 0 !important;
        padding-top: 0 !important;
        gap: 10px !important; /* テキストと画像の隙間を少し詰める */
    }

    /* (3) テキスト（見出し・説明文）を強制的に上に引き上げる */
    html body .solution-content .top-row .u-text-area {
        /* ▼ この数値を「-20px」「-30px」と小さくすると、どんどん上に上がります */
        margin-top: -55px !important; 
        padding-top: 0 !important;
    }

    /* --- 8. 画像の位置を下に下げる調整 --- */
    html body .solution-content .top-row .u-img-area,
    html body .solution-content .bottom-row .u-img-area {
        /* ▼ この数値を「30px」「50px」と大きくすると、どんどん下に下がります */
        margin-top: 55px !important; 
        
        /* 念のためパディングもリセット */
        padding-top: 0 !important;
    }

    /* --- 9. 独自機能エリアの画像・文字サイズ調整 --- */

    /* (1) 画像を少し小さくする */
    html body .solution-content .top-row .u-img-area img,
    html body .solution-content .bottom-row .u-img-area img {
        max-width: 80% !important; /* ← 100%だと大きいので、80%や70%に絞ります */
        width: auto !important;
        height: auto !important;
    }

    /* (2) 見出し（適応型保護など）の文字サイズ */
    html body .u-title {
        font-size: 0.9rem !important; /* 1.1rem ≒ 17~18px */
    }

    /* (3) 箇条書き（◆～）の文字サイズ */
    html body .u-point {
        font-size: 1.0rem !important; /* 1.0rem ≒ 16px */
    }

    /* (4) 説明文の文字サイズ */
    html body .u-desc {
        font-size: 0.85rem !important; /* 0.85rem ≒ 13~14px */
        line-height: 1.1 !important;   /* 行間を少し広げて読みやすく */
    }

    /* 下段の枠自体の上の内側余白を広げて、中身を押し下げます */
    html body .solution-content .bottom-row {
        padding-top: 15px !important; /* ★ここを増やすと見出しが下がります */
        margin-top: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* 念のため、テキストエリア自体のマージンは0にしておく（パディングで調整するため） */
    html body .solution-content .bottom-row .u-text-area {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    html body .col-wps .cards-row {
        /* ▼ PC用の「上に150px移動する設定」をここで強制解除します */
        transform: none !important; 
        position: static !important;
        
        /* ▼ さらに下に下げたい場合はこの数値を増やしてください */
        margin-top: 30px !important; 
        padding-top: 0 !important;
    }

    /* --- 2. カード（SES・他製品）の高さ制限解除 --- */
    /* PCで固定した height: 120px などを解除し、中身に合わせて伸びるように戻す */
    html body .feature-box,
    html body .new-solution-card,
    html body .solution-right .feature-box,
    html body .feature-bottom-row .feature-box {
        height: auto !important;      /* 高さを自動に戻す */
        min-height: 0 !important;
        width: 100% !important;       
        max-width: 160px !important;  /* スマホでの適切な幅 */
        padding: 10px !important;     /* 余白を適切に戻す */
        border-width: 3px !important; /* 枠線の太さを戻す */
    }
    
    /* カード内の画像サイズをスマホ用に最適化 */
    html body .feature-icon img,
    html body .solution-right .feature-icon img,
    html body .new-card-img {
        max-height: 90px !important; /* PC用の40px制限などを解除 */
        height: auto !important;
        width: auto !important;
        max-width: 80% !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
    
    /* カード内の文字サイズ修正 */
    html body .feature-text,
    html body .new-card-text {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    /* --- 10. 下段の見出し（管理者情報を守り...）を下に下げる --- */
    
    html body .solution-content .bottom-row .u-text-area {
        /* ▼ この数値を「40px」「60px」と大きくすると、さらに下に下がります */
        margin-top: 60px !important; 
    }

    /* --- 3. アンダーライン画像（WPS等）の位置修正 --- */
    /* PCで設定した margin-top: -70px をスマホ用に直す */
    html body .solution-col .product-underline {
        margin-top: -5px !important;  
        margin-bottom: 15px !important;
        width: 180px !important;
        position: static !important;
    }
    
    /* --- 4. フッターバナーの幅制限解除 --- */
    /* PC縮小用に入れた max-width: 1100px などの影響を解除 */
    html body .contact-section .footer-banners {
        flex-direction: column !important; /* 縦積みに戻す */
        align-items: center !important;
        max-width: none !important;
        gap: 20px !important;
    }
    html body .contact-section .footer-banners .f-banner {
        width: 100% !important;
        max-width: 350px !important;
        height: 160px !important; /* 高さをスマホ用に */
    }
    html body .banner-bg-img {
        transform: scale(1.1) !important; /* 拡大率を戻す */
    }

    /* --- 6. 多層防御タイトルの改行調整 --- */
    html body .concept-title {
        font-size: 0 !important; /* 元のテキストを見えなくする */
    }
    
    html body .concept-title::before {
        /* 改行コード(\A)を入れた新しいテキストを表示 */
        content: "Symantecの多層防御機能で\A既知・未知の脅威に対応します！";
        
        font-size: 6.0vw !important; /* 文字サイズを再設定（スマホ用の大きさ） */
        line-height: 1.4 !important;
        white-space: pre-wrap !important; /* これにより \A が改行として機能します */
        display: block !important;
        color: #ffffff !important; /* 文字色（白） */
    }

    /* 1. 「テナモ」バナー（右側）の枠設定 */
    html body .contact-section .footer-banners .banner-right {
        /* 高さを自動にしつつ、余白を極限まで減らして狭く見せる */
        height: auto !important; 
        min-height: 0 !important; /* 最低の高さ制限を解除 */
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        
        /* 要素間の隙間を詰める */
        gap: 5px !important;
        padding: 15px 5px !important; /* 上下の余白も減らす */
        
        width: 100% !important;
    }

    /* 2. テナモロゴ：サイズを小さくする */
    html body .tenamo-logo {
        position: relative !important;
        width: 40% !important;         /* ★ここを小さく(60%→40%) */
        max-width: 130px !important;   /* ★最大幅も制限 */
        height: auto !important;       
        object-fit: contain !important;
        
        /* 自然な配置 */
        margin: 0 auto !important; 
        margin-bottom: 0 !important;
        
        display: block !important;
    }

    /* 3. 上の文字：サイズを小さく */
    html body .footer-banners .banner-right .banner-sub-text {
        font-size: 0.75rem !important; /* ★文字を小さく */
        margin: 0 !important;
        line-height: 1.2 !important;
        position: static !important;
        transform: none !important;
    }

    /* 4. 説明文：サイズを小さく */
    html body .footer-banners .banner-right .banner-desc {
        font-size: 0.7rem !important;  /* ★文字を小さく */
        margin: 0 !important;
        position: static !important;
        transform: none !important;
    }

    /* 5. ボタン：サイズを小さく薄く */
    html body .footer-banners .banner-right .banner-btn {
        margin-top: 2px !important;     
        padding: 5px 20px !important;   /* ★ボタンの厚みを減らす */
        font-size: 0.8rem !important;   /* ★文字も小さく */
        line-height: 1.0 !important;
        position: static !important;
        transform: none !important;
    }

    /* 6. 上の「ビジネスソリューション」バナーもバランスを取って少し小さく */
    html body .contact-section .footer-banners .banner-left {
        min-height: 150px !important; /* 合わせるために少し縮める */
        height: auto !important;
    }

}

/* ==========================================================================
   14. タブレット専用調整 (min-width: 601px - max-width: 900px)
   ※ スマホ用レイアウト(max-width: 900px)を上書きし、画面幅を活かした配置にします。
   ========================================================================== */
@media screen and (min-width: 601px) and (max-width: 900px) {

    /* --- 1. 全体の幅調整 --- */
    /* 画面いっぱいに伸び切らないよう、適度な最大幅を持たせる */
    .container, html body .container {
        max-width: 750px !important;
        margin: 0 auto !important;
    }

    /* --- 2. メインビジュアル (MV) --- */
    .mv {
        height: 60vh !important; /* スマホより少し高く確保 */
        min-height: 450px !important;
    }
    .mv__title-top, .mv__title-bottom {
        font-size: 3.0rem !important; /* 文字サイズを大きく */
    }

    /* --- 3. Market (市場背景) --- */
    /* スマホの「縦積み」を解除し、PCに近い「左右2列」に戻してバランスをとる */
    .market-container {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    .market-col {
        width: 50% !important;
        height: auto !important;
        padding: 40px 20px !important;
        aspect-ratio: auto !important; /* 正方形強制を解除 */
    }
    /* 右カラムの位置ズレ補正 */
    html body .market-col--right {
        transform: none !important;
    }
    /* 円のサイズを少し拡大 */
    html body .bubble {
        width: 150px !important;
        height: 150px !important;
    }
    html body .stat-num {
        font-size: 3.5rem !important;
    }

    /* --- 4. Worries (課題・不安) --- */
    /* 横幅に余裕があるため、ボックス内の文字サイズを少し上げる */
    html body .worry-box p {
        font-size: 0.85rem !important;
    }

    /* --- 5. Solution (SES & 製品) --- */
    html body .solution-title {
        /* 余白(margin/padding)だと線も一緒に下がってしまうため、
       transformを使って文字の「見た目の位置」だけを移動させます */
    transform: translateY(30px) !important; 
    }
    /* コンテンツが横に伸びすぎないよう中央揃えで幅制限 */
    html body .solution-box,
    html body .dual-solution-wrapper {
        max-width: 700px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* 説明文の文字サイズを少し読みやすく */
    html body .product-desc, html body .sol-desc {
        font-size: 0.9rem !important;
        width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* カードの最大幅を少し緩めて見やすく */
    html body .feature-box, 
    html body .new-solution-card, 
    html body .solution-right .feature-box,
    html body .feature-bottom-row .feature-box {
        max-width: 200px !important;
    }

    /* --- 6. Reason (選ばれる理由) --- */
    /* スマホ用(350px)だと小さすぎるため、リング全体を拡大 */
    html body .reason-container {
        width: 500px !important;
        height: 500px !important;
    }
    html body .reason-ring {
        border-width: 20px !important; /* 線を少し太く */
    }
    .reason-main {
        font-size: 2.0rem !important;
    }
    /* バブルを拡大 */
    html body .reason-bubble {
        width: 120px !important;
        height: 120px !important;
        font-size: 12px !important;
    }
    html body .reason-bubble .default-text {
        font-size: 12px !important;
    }
    /* 拡大に伴うバブル位置の微調整 */
    html body .pos-1 { top: 10% !important; left: 22% !important; }
    html body .pos-2 { top: 10% !important; right: 22% !important; } /* 左右対称に */
    html body .pos-3 { bottom: 38% !important; right: 6% !important; }
    html body .pos-4 { bottom: 10% !important; right: 22% !important; }
    html body .pos-5 { bottom: 10% !important; left: 22% !important; }
    html body .pos-6 { top: 38% !important; left: 6% !important; }

    /* --- 7. Footer (バナーエリア) --- */
    html body .main-contact-btn {
    /* 1. 幅を強制的に「自動（文字幅 + 余白）」にします */
    width: auto !important; 
    max-width: 90% !important; /* 画面からはみ出さない保険 */
    
    /* 2. 左右の余白を減らします（元は100px → 40pxに変更） */
    padding-left: 40px !important;
    padding-right: 40px !important;
    
    /* スマホ版などで「幅80%」などの指定がある場合に上書きして解除します */
    display: inline-block !important;
}
    /* 縦積みではなく「横並び」に戻す */
    html body .contact-section .footer-banners {
        flex-direction: row !important;
        gap: 20px !important;
        max-width: 700px !important;
    }
    html body .contact-section .footer-banners .f-banner {
        width: 50% !important;
        height: 180px !important;
        margin: 0 !important;
    }
    /* ロゴや文字の位置調整 */
    html body .footer-banners .banner-right .tenamo-logo {
        width: 80% !important; 
        margin-top: 0px !important;
        margin-bottom: 10px !important;
    }
    html body .footer-banners .banner-right .banner-desc, 
    html body .footer-banners .banner-right .banner-btn {
        transform: none !important; /* スマホ用の位置移動を解除 */
    }
    html body .footer-banners .banner-right .banner-sub-text {
        margin-top: 0 !important;
        margin-bottom: 5px !important;
    }
    /* 1. メインの文字「ビジネスソリューション事業」 */
    html body .contact-section.contact-section .footer-banners.footer-banners .banner-left .banner-title {
        font-size: 1.4rem !important; /* 元(約1.6rem〜2rem)より小さく */
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }

    /* 2. 上の文字「システナ」 */
    html body .contact-section.contact-section .footer-banners.footer-banners .banner-left .banner-sub-text {
        font-size: 1.4rem !important; /* バランスを見て少し小さく */
        margin-bottom: 0 !important;
    }
    
    /* 3. 下の説明文「IT機器販売や...」 */
    html body .contact-section.contact-section .footer-banners.footer-banners .banner-left .banner-desc {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }
}