@charset "utf-8";

/* =========================================
   1. COLOR CONFIGURATION (THEME SYSTEM)
   ========================================= */
:root {
	/* --- 365カラー (固定) --- */
	--365-color-h: #005a9e;
	
    --365-color-c: #0067b8;
    --365-color-i: #0078d4;
	--365-color-m: #74b5e7;
    --365-color-b: #e8f2fb;
    --365-color-t: #eff6fc;
    --365-color-c-01: #242424;
    --365-color-c-02: #424242;
    --365-color-c-03: #616161;
	--365-color-c-04: #666666;
	--365-color-c-05: #808080;
	--365-color-c-06: #a0a0a0;
	--365-color-c-11: #f3f2f1;
    
	
    /* --- 共通ブランドカラー --- */
    --brand-navy: #19283c;    
    --brand-accent01: #355073;  
    --brand-accent02: #425d80;  
    --brand-accent03: #355986;  
    --brand-accent04: #72A6CD;  
	
    /* --- 各プランの固有色 (固定) --- */
    --color-stylepc: #21344e;   /* 青 */
    --color-single: #3d6698;   /* 青 */
    --color-multi: #000057;    /* 紺 */
    --color-mydesk: #9b9b00;   /* オリーブ緑 (155,155,0) */
	
	/* --- 背景色 --- */
    --color-bg01: #f2f5f7;   /* 薄いブルーグレー */
    --color-bg02: #f6f6f6;   /* MSグレー */
	
	/* --- 線色 --- */
    --color-ln01: #e1dfdd;
	
	/* 追加：レイアウトの基準幅と隙間 */
    --max-width: 1600px;
	--pad-x-nav: 80px;   /* 最上部ナビ用（中身元々1360px） */
    --pad-x-top: 200px;  /* トップページ用（中身元々1200px） */
    --pad-x-sub: 100px;   /* その他ページ用（中身元々1300px） */
    
    /* --- フォント設定 --- */
	--font-family: sans-serif;
    --font-roman: 'Roboto Slab', serif; 
	
}



/* テーマ切り替え設定 */

/* デフォルト / StylePC用テーマ (青) */
body.cs-theme-sp, .cs-theme-sp {
    --plan-r: 33; --plan-g: 52; --plan-b: 78;
	--color-stylepc: var(--brand-navy);
    --plan-color: #21344e;
}

/* デフォルト / シングル用テーマ (青) */
body.cs-theme-single, .cs-theme-single {
    --plan-r: 61; --plan-g: 102; --plan-b: 152;
    --plan-color: var(--color-single);
    --highlight-bg: rgba(255,255,255,0.2);
    --highlight-text: #fff;
    --section-highlight-bg: rgba(0,0,0,0.06);
    --section-highlight-text: var(--color-stylepc);
}

/* マイデスク用テーマ (緑) */
body.cs-theme-mydesk, .cs-theme-mydesk {
    --plan-r: 155; --plan-g: 155; --plan-b: 0;
    --plan-color: var(--color-mydesk);
    --highlight-bg: rgba(255,255,255,0.2);
    --highlight-text: #fff;
    /* 黄色背景だと白文字が見にくい箇所の調整 */
    --section-highlight-bg: rgba(155,155,0,0.15);
    --section-highlight-text: var(--color-stylepc);
}

/* マルチ用テーマ (紺) - 将来用 */
body.cs-theme-multi, .cs-theme-multi {
    --plan-r: 0; --plan-g: 0; --plan-b: 87;
    --plan-color: var(--color-multi);
    --highlight-bg: rgba(255,255,255,0.2);
    --highlight-text: #fff;
    --section-highlight-bg: rgba(0,0,0,0.06);
    --section-highlight-text: var(--color-stylepc);
}

/* =========================================
   2. BASE STYLES
   ========================================= */
body.cs-modern-lp {
    margin: 0; padding: 0;
    font-family: var(--font-family);
    color: var(--brand-navy);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

*, *::before, *::after { box-sizing: border-box; }
.cs-container, .cs-container-2col-73 { 
	max-width: var(--max-width); 
	width: 100%; 
	margin: 0 auto; 
	padding: 0 var(--pad-x-sub);
	box-sizing: border-box; 
}
img { max-width: 100%; height: auto; vertical-align: bottom; }

/* =========================================
   3. TYPOGRAPHY
   ========================================= */
.cs-roman-num {
    font-family: var(--font-roman); font-weight: 700; 
    display: inline-block; line-height: 1; margin-right: 2px; vertical-align: baseline;
}

/* テキスト強調 (テーマごとに色が自動で変わる) */
.cs-text-highlight {
    background: var(--highlight-bg); 
    color: var(--highlight-text);
    padding: 1px 6px; border-radius: 3px; margin-left: 4px; font-weight: 700; letter-spacing: 0.5px;
}
.cs-text-highlight-dark {
    background: var(--section-highlight-bg);
    color: var(--section-highlight-text);
    padding: 0 8px; border-radius: 4px; margin: 0 4px; font-weight: 700;
}

/* =========================================
   4. NAVIGATION
   ========================================= */
.cs-nav {
    height: 56px; 
	background: rgba(255, 255, 255, 0.95); 
	backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-ln01); 
	position: sticky; 
	top: 0; 
	z-index: 1000;
}

/* ここを追加！ 最上部だけ隙間を20pxにして広く使う */
.cs-nav .cs-container { 
    padding: 0 var(--pad-x-nav); /* 変数に変更 */
}
/* ここまで */

.nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.nav-left-group {
    display: flex;
    align-items: center; /* ロゴとメニューの上下中央を揃える */
    gap: 60px;           /* 48px */
}
.nav-right-group {
	
}
.cs-logo { 
	display: flex; 
	align-items: center; 
	text-decoration: none; 
	gap: 3px;
}
.cs-logo img { 
	width: 32px; 
}
.cs-logo span { font-weight: 600; font-size: 18px; color: var(--brand-navy); }
/* ロゴ内の区切り線のデザイン（これを新しく追加します） */
.logo-separator {
	color: var(--brand-navy); /* ヘッダーの文字と同じ濃い色（環境に合わせて変更してください） */
    font-size: 24px;     /* 線の高さ */
    font-weight: 400;    /* 線を細くしてシャープに */
    
    /* これが「左側」を詰める魔法の数値です */
    margin-left: -30px;   /* マイナスにするほど左に寄ります */
    
    /* ついでに右側も少し詰めるとバランスが良くなります */
    margin-right: -15px;  
    margin-bottom: 5px;  
}

/* ついでに製品名を少し太くして強調します */
.product-name {
    font-weight: 800;
    color: var(--brand-navy);
}
.cs-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: -2.5px;  
    color: var(--brand-navy); 
    font-size: 14px; 
    font-weight: 500;
}
.cs-menu a, 
.cs-menu .dropdown-trigger {
    padding: 6px 12px !important; /* アクティブ時と同じ余白を最初から持たせる */
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s;
    text-decoration: none;
	/* 重要：訪問済みでも未訪問でも、常にこの色にする指定 */
    color: var(--brand-navy) !important; 
    
    /* 文字が横に太らないように標準の太さを強制 */
    font-weight: 400 !important;
}
.cs-menu a:hover { 
	
}
/* 右上のメインボタン（365スタイル） */
.cs-btn-nav {
    text-decoration: none;
    background: var(--brand-navy); /* 塗りつぶして主役にする */
    color: #ffffff !important;      /* 文字は白でくっきり */
    font-size: 14px;
    font-weight: 700;
    padding: 8px 20px;             /* 365に近いサイズ感 */
    border-radius: 4px;            /* 信頼の4px角丸 */
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* マウスを乗せた時（少しだけ色を浮かせる） */
.cs-btn-nav:hover {
    background: var(--brand-accent02);         /* 少し明るいネイビーに */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* =========================================
   5. HERO SECTION
   ========================================= */
.cs-hero {
    /* ここで plan-color が使われているため、bodyクラスによって色が変わる */
    background: linear-gradient(135deg, var(--color-stylepc) 20%, var(--plan-color) 100%);
    color: #fff; padding: 100px 0 120px; position: relative; overflow: hidden;
}
.cs-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.cs-hero h1 { 
	font-size: 48px; 
	font-weight: 500; 
	margin: 0 0 24px; 
	line-height: 1.15; 
}
.cs-sub-text { 
	font-size: 18px; 
	margin-bottom: 40px; 
	color: rgba(255,255,255,0.9); 
	max-width: 540px; 
}

.cs-btn-primary {
    background: #fff; 
    /* マイデスク(緑)の時は文字が見にくいので、緑の時は少し濃くするロジックが必要だが、
       CSS変数だけだと複雑になるため、ここでは汎用的に少し濃い目の色指定で統一するか、
       テーマ変数で文字色を制御する */
    color: var(--plan-color);
    padding: 12px 32px; text-decoration: none; font-weight: 700; font-size: 16px;
    border-radius: 4px; display: inline-block; transition: 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* マイデスクの時だけボタン文字色を調整 */
body.cs-theme-mydesk .cs-btn-primary { color: #8b8b00; }

.cs-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }

/* Product Tag */
.cs-product-tag {
    display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 4px; margin-bottom: 24px; overflow: hidden;
}
/* Product Tag のIの部分 */
.cs-tag-number {
    font-family: var(--font-roman); font-weight: 900; 
    
    /* ここを固定！ */
    background: rgba(255, 255, 255, 0.9);  /* (33, 52, 78, 0.9) */
    /* StylePC共通のネイビー */
    color: rgba(33, 52, 78, 1.0); 
    padding: 0.5px 14px 0; 
    font-size: 16px; 
    line-height: 1.5;
    
    /* これを追加して角を丸くします */
    border-radius: 4px; 
}
.cs-tag-name { padding: 4px 12px; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; }

/* Glass Card */
.cs-hero-visual { display: flex; justify-content: center; align-items: center; perspective: 1000px; }
.cs-glass-card {
    width: 100%; max-width: 400px; aspect-ratio: 4/3.2; 
    background: rgba(var(--plan-r), var(--plan-g), var(--plan-b), 0.25);
    backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px; box-shadow: 0 25px 50px rgba(0,0,0,0.35);
    display: flex; flex-direction: column; justify-content: center;
    padding-left: 48px; text-align: left; transform: rotateY(-10deg) rotateX(5deg);
    transition: transform 0.5s ease; position: relative; overflow: hidden;
}
.cs-glass-card:hover { transform: rotateY(0deg) rotateX(0deg); }

.cs-bg-number {
    position: absolute; top: -50px; right: -10px; font-size: 280px; font-weight: 700; line-height: 1; 
    color: rgba(255, 255, 255, 0.1); font-family: var(--font-roman); z-index: 0; pointer-events: none;
}
.cs-glass-icon { width: 80px; height: 80px; margin-bottom: 24px; z-index: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.25)); }
.cs-glass-titles { display: flex; flex-direction: column; margin-bottom: 24px; position: relative; z-index: 1; line-height: 1; }
.cs-title-sub { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; opacity: 0.8; margin-bottom: 8px; font-weight: 600; }
.cs-title-main { font-size: 28px; font-weight: 400; letter-spacing: 0.5px; margin-bottom: 4px; }
.cs-title-huge {
    font-size: 40px; font-weight: 800; letter-spacing: -2px; color: #fff;
    background: linear-gradient(to bottom, #ffffff 40%, rgba(255,255,255,0.8) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}
.cs-glass-badge {
    display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.25);
    padding: 8px 16px; border-radius: 30px; font-size: 13px; font-weight: 600; color: #fff;
    border: 1px solid rgba(255,255,255,0.15); width: fit-content; z-index: 1;
}
.cs-icon-user {
    font-size: 16px; margin-right: 2px;
    filter: grayscale(100%) brightness(500%); -webkit-filter: grayscale(100%) brightness(500%);
}
.cs-glass-shine {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
    z-index: 2; pointer-events: none;
}

/* =========================================
   6. FEATURES
   ========================================= */
.cs-features { 
	padding: 40px 0; 
	background: var(--color-bg01); 
}
.cs-grid-3 { 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	gap: 16px;
}

.cs-card {
    border: 2px solid rgba(var(--plan-r), var(--plan-g), var(--plan-b), 0.3);
    background: #fff; 
	padding: 40px 32px; 
	border-radius: 12px;
	transition: 0.3s; 
	border-top: 6px solid var(--plan-color); 
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.cs-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-top-color: var(--plan-color); }

.cs-card-icon { 
	width: 60px; 
	height: 60px; 
	margin-bottom: 15px; 
	color: var(--plan-color); 
}
.cs-card-icon svg { width: 100%; height: 100%; }
.cs-card h3 { font-size: 20px; color: var(--color-stylepc); margin: 0 0 16px; font-weight: 600; }
.cs-card p { font-size: 15px; color: var(--brand-accent02); margin: 0; }

/* =========================================
   7. LINEUP & OTHERS
   ========================================= */
.cs-lineup { 
	padding: 80px 0; 
	background-color: #ffffff;
	border-top: 1px solid var(--color-ln01); 
}
.cs-lineup-card {
    padding: 7px; /* 余白をゼロにするのが重要！ */
    border: 0.01px solid #d1d1d1;
    border-radius: 26px;
    text-align: left; /* center から left に変更！ */
    transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    
    /* 以下を追加 */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 画像の角をカードに合わせて丸める */
}

/* cs-lineup-card.active のブラッシュアップ */
.cs-lineup-card.active { 
    /* 全体を 3px のテーマカラーで囲う */
	border: 2px solid rgba(var(--plan-r), var(--plan-g), var(--plan-b), 0.3);
    
    /* 背景色を極薄く敷いて、白抜き文字やアイコンを際立たせる */
    background: rgba(var(--plan-r), var(--plan-g), var(--plan-b), 0.04);
    
    /* 選択中の浮遊感を強化 */
    transform: translateY(-8px); 
    box-shadow: 0 20px 40px rgba(var(--plan-r), var(--plan-g), var(--plan-b), 0.15);
    
    z-index: 2; /* 隣のカードより手前に見せる */
}

/* 非アクティブなカードの微調整 */
.cs-lineup-card:not(.active) {
    border: 2px solid rgba(204, 208, 212, 0.6);
    opacity: 0.85; 
    transform: scale(0.98); /* わずかに小さくすることで、activeをより強調 */
	background: #fff; 
}

/* 重要：ここがプラン別固定色 */
.cs-lineup-card.card-single { border-top: 6px solid var(--color-single); }
.cs-lineup-card.card-multi { border-top: 6px solid var(--color-multi); }
.cs-lineup-card.card-mydesk { border-top: 6px solid var(--color-mydesk); }

.cs-lineup-tag {
    font-size: 11px; 
	font-weight: 700; 
	text-transform: uppercase; 
	letter-spacing: 1px; 
	display: block; 
	margin-bottom: -16px;
}
/* タグの文字色も固定 */
.card-single .cs-lineup-tag { color: var(--color-single); }
.card-multi .cs-lineup-tag { color: var(--color-multi); }
.card-mydesk .cs-lineup-tag { color: var(--color-mydesk); }

.cs-lineup-card h3 { 
	font-size: 20px; 
	margin-bottom: 6px; 
	line-height: 1.2;
	font-weight: 700; /* もし少し細く感じるなら、太さを強調しても良いです */
}

.cs-lineup-card p { font-size: 14px; color: var(--brand-accent02); 
	line-height: 1.5; }

.cs-story { 
	padding: 0px 0; 
	background: #fff; 
}
.cs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.cs-tag { color: var(--plan-color); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; display: block; }
.cs-story-content h2 { 
	font-size: 36px; 
	color: var(--color-stylepc); 
	margin: 0 0 24px; 
	line-height: 1.25; 
}
.cs-story-content p { 
	font-size: 17px; 
	color: var(--brand-accent02); 
	margin-bottom: 32px; 
}

/* Microsoft 365風 画像カード用スタイル追加 */

/* 画像を囲む枠（16:9の黄金比率） */
.cs-card-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
	border-radius: 16px;  /* 画像自体の角を丸くして柔らかくする */
    overflow: hidden;
	margin-bottom: 24px; /* 画像と、その下の文字の間に隙間を作るために追加 */
}

/* 画像本体とホバーエフェクト */
.cs-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* マウスを乗せると画像がゆっくり拡大 */
.cs-lineup-card:hover .cs-card-img-wrap img {
    transform: scale(1.05);
}

/* テキスト部分の入れ物（ここで余白を再設定） */
.cs-card-content {
    padding: 0px 16px 16px 16px; /* 元のカードのpaddingをここに移動 */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* カードの高さを揃える魔法 */
    align-items: flex-start; /* center から flex-start(左寄せ) に変更！ */
}
/* 追加ここまで */

.cs-link-arrow { 
	color: var(--plan-color); 
	text-decoration: none; 
	font-weight: 600; 
	display: inline-flex; 
	align-items: center; 
}
.cs-link-arrow::after { 
	content: '>'; 
	margin-left: 8px; 
	transition: 0.2s; 
}
.cs-link-arrow:hover::after { 
	margin-left: 12px; 
}
.cs-story-img-wrapper img { border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; }

.cs-banner-section { padding: 0 0 80px; }
.cs-banner-card {
    background: linear-gradient(135deg, var(--color-stylepc) 0%, var(--plan-color) 100%);
    color: #fff; 
	border-radius: 12px; 
	padding: 64px; 
	text-align: center; 
	box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.cs-banner-text h2 { margin: 0 0 16px; font-size: 28px; }
.cs-banner-text p { margin: 0 0 32px; opacity: 0.9; }
.cs-btn-white {
    background: #fff; color: var(--color-stylepc); padding: 10px 24px; text-decoration: none; font-weight: 600; border-radius: 4px; transition: 0.2s; display: inline-block;
}
.cs-btn-white:hover { background: #f0f0f0; }

.cs-footer { background: #f2f2f2; padding: 40px 0; font-size: 13px; color: var(--365-color-c-03); }
.footer-flex { display: flex; justify-content: space-between; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 20px; }
.footer-logo-text { font-weight: 700; color: var(--brand-navy); font-size: 16px; }
.footer-links a { color: var(--365-color-c-03); text-decoration: none; margin-left: 24px; }
.footer-links a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .cs-hero-grid, .cs-grid-3, .cs-grid-2 { grid-template-columns: 1fr; gap: 40px; }
    .cs-hero { text-align: center; padding: 60px 0; }
    .cs-sub-text { margin-left: auto; margin-right: auto; }
    .cs-menu, .cs-nav-cta { display: none; }
    .footer-flex { flex-direction: column; gap: 20px; }
    .cs-glass-card { max-width: 320px; margin: 0 auto; transform: none; padding-left: 32px; }
    .cs-glass-card:hover { transform: none; }
    .cs-title-huge { font-size: 40px; }
    .cs-card-icon { margin: 0 auto 24px; }
}

/* コーポレート（企業情報）用テーマ (ブランド共通ネイビー) */
body.cs-theme-about, .cs-theme-about {
    /* brand-navy の数値をセット */
    --plan-r: 25;   
    --plan-g: 40;  
    --plan-b: 60;  
	
	/* これを追加！グラデーションの右側を飾る色になります */
    --plan-color: #43556b;  /* ブランドアクセントカラー */
    
	--highlight-bg: rgba(255,255,255,0.2);
    --highlight-text: #fff;
	
    /* セクション内のハイライト */
    --section-highlight-bg: rgba(25, 40, 60, 0.1); 
    /* 文字色はブランドネイビーそのまま */
    --section-highlight-text: #19283c; 
}

/* =========================================
   会社概要：MS完全再現版レイアウト
   ========================================= */
.cs-about-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0px;
}

/* テーブル構造を解体して縦積みにする魔法 */
.cs-about-table tbody,
.cs-about-table tr,
.cs-about-table th,
.cs-about-table td {
    display: block; 
}

.cs-about-table tr {
    margin-bottom: 40px; /* 項目と項目の間の余白をたっぷり取る */
}

/* 上にくる項目（見出し） */
.cs-about-table th {
    width: 100%;
    padding: 0px 0 20px 3px; /* 下に少しだけ隙間 */
    color: var(--365-color-c-01); /* MSの優しい黒 */
    font-weight: 600; /* 品のある太さ */
    font-size: 21px; /* 見出しを少し大きく */
    text-align: left;
    border-bottom: none; /* ダサい直線を消す */
    background: transparent;
	font-family: "Segoe UI Light", "Yu Gothic Light", sans-serif !important;
}

/* 下にくる内容（本文） */
.cs-about-table td {
    width: 100%;
    padding: 10px 0px 0px 30px; /* ここがMSのキモ！左側に余白を作って字下げする */
    border-bottom: none; /* 直線を消す */
    line-height: 1.35 !important;
    color: var(--365-color-c-02); /* 本文はダークグレー */
    font-weight: 500; /* 品のある太さ */
    font-size: 16px;	
	font-family: "Segoe UI", "Yu Gothic", sans-serif !important;
	
}

/* 補足の小さい文字の微調整 */
.cs-about-table td span {
    display: inline-block;
    margin-top: 6px;
    color: var(--365-color-c-03) !important; /* MSの補足グレー */
}





/* CSSに追記、またはインラインで指定 */
.cs-card-icon {
    background: transparent !important; /* 四角い背景を消す */
}

/* ここから：miiboボタンの位置とサイズの設定 */

/* --- PC設定 --- */
#chatbot-toggle_button {
  position: fixed !important;
  bottom: 10px !important;
  right: 0px !important; /* 右に寄せる */
  z-index: 9999 !important;
  width: 70px !important;
  height: 70px !important;
}

/* リンク自体を白い板にする大作戦 */
#chatbot-toggle_button a {
  display: block !important;
  position: absolute !important;
  /* 画像より少し小さい白い板を作ります */
  width: 54px !important;
  height: 54px !important;
  top: 6px !important;   /* 少し内側に配置 */
  left: 6px !important;  /* 少し内側に配置 */
  background-color: #ffffff !important;
  border-radius: 12px !important; /* 角丸 */
  text-decoration: none !important;
}

/* 画像を白い板に被せて、元のサイズに広げる */
#chatbot-toggle_button img {
  position: absolute !important;
  width: 70px !important;
  height: 70px !important;
  /* 板の中に入れた画像を元の枠にピッタリ合うように逆方向にズラす */
  top: -6px !important;
  left: -6px !important;
  background: transparent !important;
  max-width: none !important;
  border: none !important;
}

/* チャット画面本体 */
#chatbot {
  right: 20px !important;
  bottom: 20px !important;
  z-index: 2147483647 !important;
}

/* --- スマホ設定 --- */
@media screen and (max-width: 600px) {
  #chatbot-toggle_button {
    bottom: 0px !important;
    right: 0px !important;
    width: 85px !important;
    height: 85px !important;
  }
  
  /* スマホ用の白い板 */
  #chatbot-toggle_button a {
    width: 67px !important;
    height: 67px !important;
    top: 7px !important;
    left: 7px !important;
    border-radius: 16px !important;
  }
  
  /* スマホ用の画像被せ調整 */
  #chatbot-toggle_button img {
    width: 85px !important;
    height: 85px !important;
    top: -7px !important;
    left: -7px !important;
  }
  
  #chatbot {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
  }
}
/* ここまで */

/* カード内のリンクボタン（Microsoft風） */
.cs-card-link {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    color: var(--color-stylepc);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

/* 青い四角のアイコン部分 */
.cs-card-link .link-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    background-color: var(--365-color-i); /* Microsoftブルー */
    color: #ffffff;
    border-radius: 8px;
    margin-right: 10px;
    
    /* 記号を綺麗に見せるための特別設定 */
    font-family: 'Segoe UI', Meiryo, sans-serif; /* Microsoftでお馴染みのフォント */
    font-weight: bold;  /* 限界まで太くしてアイコンっぽく */
    font-size: 16px;   /* サイズ調整 */
    padding-left: 2px; /* 目の錯覚を補正してド真ん中に配置 */
    padding-bottom: 5px;
    
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* マウスを乗せた時のアニメーション */
.cs-card-link:hover {
    color: #005293; /* 文字も青くする */
}

/* マウスを乗せると、アイコンが右に少し動いて「進む」感を出す */
.cs-card-link:hover .link-icon {
    transform: translateX(4px);
    background-color: #005293; /* 少し濃い青に */
}



/* カード内のリンクボタン（Microsoft風） */
.cs-card-link-f {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    color: var(--brand-navy);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

/* 青い四角のアイコン部分 */
.cs-card-link-f .link-icon-f {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    background-color: var(--365-color-i); /* Microsoftブルー */
    color: #ffffff;
    border-radius: 8px;
    margin-right: 10px;
    
    /* 記号を綺麗に見せるための特別設定 */
    font-family: 'Segoe UI', Meiryo, sans-serif; /* Microsoftでお馴染みのフォント */
    font-weight: bold;  /* 限界まで太くしてアイコンっぽく */
    font-size: 16px;   /* サイズ調整 */
    padding-left: 2px; /* 目の錯覚を補正してド真ん中に配置 */
    padding-bottom: 5px;
    
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* マウスを乗せた時のアニメーション */
.cs-card-link-f:hover {
    color: var(--brand-navy); /* 文字も青くする */
}

/* マウスを乗せると、アイコンが右に少し動いて「進む」感を出す */
.cs-card-link-f:hover .link-icon-f {
    transform: translateX(4px);
    background-color: var(--365-color-c); /* 少し濃い青に */
}

/* カード内のテキストエリアの調整（ボタンを一番下に綺麗に揃えるため） */

/* セレクタを .cs-card-content p に変更 */
.cs-card-content p {
    flex-grow: 1; /* 文章の長さが違っても、ボタンの位置を一番下に揃える魔法 */
    margin-bottom: 30px;
    width: 100%; /* テキストの幅を確保 */
	line-height: 1.6;
    color: var(--brand-accent02);
}

/* =========================================
   親ページ専用：中央寄せヒーロー＆横長タブ
   ========================================= */
.cs-hero-center {
    text-align: center;
    padding: 120px 0;
}
.cs-hero-center h1 {
    font-size: 52px;
    margin-bottom: 32px;
}
.cs-sub-text-center {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 800px;
    margin: 0 auto 56px;
    line-height: 1.8;
}

/* Microsoft風 横長選択タブ */
.cs-hero-tabs {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.cs-tab-btn {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--brand-navy);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-width: 240px;
    text-align: left;
}
.cs-tab-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.cs-tab-icon {
    font-size: 28px;
    margin-right: 16px;
}
.cs-tab-text {
    display: flex;
    flex-direction: column;
}
.cs-tab-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.cs-tab-desc {
    font-size: 13px;
    color: var(--365-color-c-03);
    margin-top: 4px;
}

/* =========================================
   拡張フッター（サイトマップ型）
   ========================================= */
.cs-footer {
    background: #f8f9fa;
    padding: 60px 0 40px;
    border-top: 1px solid var(--color-ln01);
}
.cs-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}
.cs-footer-brand-col .footer-logo-text {
    font-size: 20px;
    margin-bottom: 16px;
}
.cs-footer-desc {
    font-size: 14px;
    color: var(--365-color-c-03);
    line-height: 1.6;
    margin-bottom: 24px;
}
.cs-footer-links-col h4 {
    font-size: 15px;
    color: var(--brand-navy);
    margin-bottom: 20px;
    font-weight: 700;
}
.cs-footer-links-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cs-footer-links-col li {
    margin-bottom: 12px;
}
.cs-footer-links-col a {
    color: var(--365-color-c-03);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}
.cs-footer-links-col a:hover {
    color: var(--color-single);
    text-decoration: underline;
}

/* スマホ対応 */
@media (max-width: 900px) {
    .cs-hero-tabs { flex-direction: column; align-items: stretch; }
    .cs-tab-btn { justify-content: center; }
    .cs-footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================
   沿革（ヒストリー）：会社概要レイアウトと完全統一
   ========================================= */
.cs-history-list {
    list-style: none !important;
	padding: 0px 0 20px 3px !important;
    margin: 0 !important;
}

/* リスト全体の構造を縦積みに変更 */
.cs-history-list li {
    display: block !important; 
    border-bottom: none !important; 
    padding: 0 !important; 
    margin-bottom: 40px !important; 
}

.cs-history-list li:last-child {
    margin-bottom: 0 !important;
}

/* 上にくる年の部分 */
.cs-history-year {
    display: block !important; /* これが文字の回り込みを防ぐ魔法です */
    width: 100% !important;
    padding: 0px 0 20px 3px !important;
    color: var(--365-color-c-01) !important;
    font-weight: 600 !important;
    font-size: 21px !important;
    font-family: "Segoe UI Light", "Yu Gothic Light", sans-serif !important;
}

/* 下にくる内容の部分 */
.cs-history-desc {
    display: block !important; /* これが文字の回り込みを防ぐ魔法です */
    width: 100% !important;
    padding: 10px 0px 0px 30px; !important;
    line-height: 1.5 !important;
    color: var(--365-color-c-02) !important;
    font-size: 16px !important;
    font-family: "Segoe UI", "Yu Gothic", sans-serif !important;
}


/* =========================================
   MS 365風 巨大タブ & 追従ナビゲーション（整理・完全版）
   ========================================= */

/* 1. スクロール停止位置を 120px に完全固定 */
html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 120px !important; 
}

/* 2. 巨大タブ (Big Tabs) */
.ms-big-tabs {
    display: flex;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    margin-top: 100px;
    margin-bottom: 0px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.ms-tab-btn {
    flex: 1;
    background: #ffffff;
    border: none;
    border-right: 1px solid var(--color-ln01);
    padding: 16px 32px;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
}

.ms-tab-btn.active {
    box-shadow: inset 0 -4px 0 0 #0078d4;
}

.ms-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--color-stylepc);
}

/* 一番右のボタンだけ、右側の線を消す魔法 */
.ms-tab-btn:last-child {
    border-right: none;
}

.tab-label { 
	display: block; 
	font-size: 12px; 
	font-weight: 600; 
	color: var(--365-color-c-03); 
	margin-bottom: 6px;
}
.tab-title { 
	display: block; 
	font-size: 24px; 
	font-weight: 800; 
	color: var(--brand-navy);
}

/* 3. 追従ナビゲーション (Sticky Nav) */
.ms-sticky-nav {
    background: #ffffff;
    border-bottom: 1px solid var(--color-ln01);
    position: sticky;
    top: 56px; 
    z-index: 990;
}

.ms-sticky-flex {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    height: 56px;
	position: relative;      /* 右端ボタンを固定するための基準点 */
}

.ms-sticky-links a {
    color: var(--brand-navy);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    margin-right: 32px;
    display: inline-block;
    transition: 0.2s;
}

/* 4. 子ヒーロー：高さを抑えて隙間なく着地させる */
#single-value, 
#multi-value, 
#mydesk-value { 
    padding: 60px 0 !important;
    margin: 0 !important;
    border: none !important;
    position: relative;
    overflow: hidden;
}

#single-value h2 {
    color: #ffffff !important;
    border: none !important;
    padding-left: 0 !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
}

/* 不要になった隙間隠し用のフタを完全に消去 */
.first-plan-section::before { display: none !important; }

/* 5. ガラスカードとその他の装飾 */
.cs-glass-card {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}

.cs-section-title {
    text-align: left;           /* 中央揃えから左詰めへ */
    font-weight: 600; 
    border-left: 6px solid var(--plan-color); /* ページごとのテーマカラーが自動で適用されます！ */
    line-height: 1.3;
    font-size: 32px !important;
    color: var(--brand-navy) !important;
    padding-left: 15px !important;
    margin-bottom: 40px !important;
	margin-top: 0px !important;
}

/* =========================================
   【親ページ改修】MS 365風 ライトテーマ化 (修正決定版)
   ========================================= */

/* 直下の親ヒーローだけが白くなり、
   奥にある子ヒーローの濃い色は守られます */
.cs-theme-sp > .cs-hero {
    background: linear-gradient(180deg, #f7f9fc 0%, #eef2f6 100%) !important;
    color: var(--brand-navy) !important;
    padding-top: 80px;
    padding-bottom: 80px;
}

/* 親ヒーロー内のテキスト色調整 */
.cs-theme-sp > .cs-hero h1 {
	font-size: 54px; 
    text-shadow: none !important;
    color: var(--brand-navy) !important;
}

.cs-theme-sp > .cs-hero .cs-sub-text {
    color: var(--brand-accent02) !important;
    font-weight: 500;
}

/* 親ヒーロー内のタグ調整 */
.cs-theme-sp > .cs-hero .cs-product-tag {
    background: rgba(25, 40, 60, 0.05) !important;
    border: 1px solid rgba(25, 40, 60, 0.1) !important;
}
.cs-theme-sp > .cs-hero .cs-tag-number {
    background: var(--brand-navy) !important;
    color: #ffffff !important;
}
.cs-theme-sp > .cs-hero .cs-tag-name {
    color: var(--brand-navy) !important;
}

/* ビジュアルエリアの3D解除 */
.cs-theme-sp > .cs-hero .cs-hero-visual {
    perspective: none !important;
    transform: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 親ヒーローのキャッチコピーの上の余白を広くする --- */
.cs-theme-sp > .cs-hero h1 {
    margin-top: 0px !important;
}



/* ---------------------------------------------------
   選ばれていないタブを少し薄くする
   --------------------------------------------------- */
.ms-tab-btn:not(.active) {
    /* 全体を60%の濃さにして、控えめな印象にする */
    opacity: 0.6; 
    
    /* 背景をほんの少しだけグレーにして奥にある感を出す */
    background: #fdfdfd; 
}

/* ---------------------------------------------------
   選ばれていないタブにマウスを乗せた時の動き
   --------------------------------------------------- */
.ms-tab-btn:not(.active):hover {
    /* マウスが乗ったら少し濃くする */
    opacity: 0.9; 
    background: #f5f8fc; /* ほんのり青白いハイライト */
}

/* =========================================
   タブがアクティブな時だけ、各プランの固定色を直接適用する
   ========================================= */

/* シングルが選ばれた時 */
#tab-single.active .tab-title { 
    color: var(--color-single); 
}
#tab-single.active::after { 
    background: var(--color-single); 
}

/* マルチが選ばれた時 */
#tab-multi.active .tab-title { 
    color: var(--color-multi); 
}
#tab-multi.active::after { 
    background: var(--color-multi); 
}

/* マイデスクが選ばれた時 */
#tab-mydesk.active .tab-title { 
    color: var(--color-mydesk); 
}
#tab-mydesk.active::after { 
    background: var(--color-mydesk); 
}

/* こんなイメージのCSSを加えると365に化けます */
.cs-eyebrow {
display: block;
    font-size: 14px;         /* 小さく控えめに */
    font-weight: 700;        /* でも太くして存在感を出す */
    color: var(--color-stylepc); /* 象徴カラー */
    letter-spacing: 0.15em;  /* 文字の間隔を広げる */
    margin-bottom: 15px;    /* キャッチコピーとの隙間 */
    text-transform: uppercase;
}

/* --- 右側のボタンエリアの整列 --- */
.ms-sticky-actions {
    display: flex;
    align-items: center;
}

/* --- 365風の青いソリッドボタン --- */
.ms-btn-primary {
    background: var(--brand-accent03);               
    color: #ffffff !important;        /* 文字は白 */
    text-decoration: none !important; /* ダサい青下線を消す */
    font-size: 14px;
    font-weight: 700;
    padding: 8px 24px;                /* ボタンに厚みを持たせる */
    border-radius: 4px;              /* 信頼の4px角丸 */
	/* ここが魔法の数値！角を完全に丸くする */
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* マウスを乗せた時の動き */
.ms-btn-primary:hover {
    background: var(--brand-accent01);              /* 少し濃い青に沈み込む */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* =========================================
   お知らせバナー (Promo Banner)
   ========================================= */
.cs-promo-banner {
    background-color: var(--brand-accent03); 
    color: #ffffff;
    display: flex;
    justify-content: center; /* テキストをど真ん中に配置 */
    align-items: center;
    padding: 11px 24px 13px; /* 解説： 上 左右 下 の順番になります */
    position: relative; /* 閉じるボタンを右端に固定するための基準 */
    z-index: 995; /* ヘッダーの下に潜り込ませる */
}

/* 青いお知らせバナーの文字ズレ修正 */
.cs-promo-content {
    display: flex !important;
    align-items: center !important;      /* 上下の中央をピタッと揃える */
    justify-content: center !important;  /* 左右のド真ん中に寄せる */
    flex-wrap: wrap !important;          /* スマホ画面で綺麗に改行させる */
    column-gap: 8px;                     /* 前半と後半の間の隙間 */
	font-size: 16px;
}

/* バナー内のリンクテキスト */
.cs-promo-content a {
    color: #ffffff;
    text-decoration: none;
    
    font-weight: 500;
    transition: opacity 0.2s;
	display: inline-block !important;
    line-height: 1 !important;             /* 余計な行間をなくす */
    margin: 0 !important;
    padding: 0 !important;
}

.cs-promo-content a strong {
    font-weight: 800;
}

/* マウスを乗せた時にリンクっぽく下線を出す */
.cs-promo-content a:hover {
    text-decoration: underline;
    opacity: 0.9;
}

/* 右端の閉じるボタン */
.cs-promo-close {
    position: absolute;
    right: 24px;         /* 右端から24pxの位置に固定 */
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

/* マウスを乗せたらクッキリさせる */
.cs-promo-close:hover {
    opacity: 1;
}

/* --- マイデスクの設定 --- */
#content-mydesk {
    --plan-color: #9b9b00; /* この中にあるものは全部緑にする */
}

/* --- シングル（青）の設定 --- */
#content-single {
    --plan-color: #3d6698; /* この中にあるものは全部青にする */
}

/* --- マルチ（濃い青）の設定 --- */
#content-multi {
    --plan-color: #000057; /* この中にあるものは全部濃い青にする */
}

/* --- タグの文字色を強制的に変える --- */
.cs-tag {
    color: var(--plan-color) !important;
    font-weight: 700; /* ついでに文字を少し太くして365風に */
}

/* --- カードの下の薄いブルーの背景を広げる魔法 --- */

.cs-features .cs-container {
    /* 下の余白をドカンと120px追加します */
    padding-bottom: 60px !important; 
}

/* --- 価格セクション：全プラン共通でグレーにする --- */
#mydesk-price, #single-price, #multi-price {
    background-color: var(--color-bg01) !important;
}

/* ついでに画像（チラシ）の影の設定も共通化しておきます */
#mydesk-price .cs-story-img-wrapper img,
#single-price .cs-story-img-wrapper img,
#multi-price .cs-story-img-wrapper img {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid var(--color-ln01);
}

/* ついでに、チラシ画像の影を少しだけ強調して浮かせるとさらに格好いいです */
#mydesk-price .cs-story-img-wrapper img {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid var(--color-ln01); /* 薄い枠線でチラシを縁取り */
}

/* CloudStyle 基本ボタン：プロフェッショナル仕様 */
.cs-btn-primary.cs-btn-xl {
    display: inline-block;
    padding: 18px 45px;
    background-color: var(--plan-color); /* ここで変数を参照！ */
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* 動きを滑らかに */
    border: none;
    cursor: pointer;
}

/* マウスを乗せた時の動き（インラインCSSではできない技） */
.cs-btn-primary.cs-btn-xl:hover {
    transform: translateY(-2px); /* 少し浮き上がる */
    box-shadow: 0 8px 25px rgba(0,0,0,0.2); /* 影を強くして押せる感を出す */
    filter: brightness(1.1); /* 少しだけ明るくする */
    color: #fff !important;
}

/* 新しく追加：縦線の前後の隙間設定 */
.ms-divider {
    margin-left: 0px;  /* 左側との隙間 */
    margin-right: 30px; /* 右側との隙間を広めに設定 */
    display: inline-block; /* 隙間を正しく反映させるための魔法 */
}

/* ========================================================
   フライヤー記事ページ専用 CSS（1カラム版）
   ======================================================== */

/* 1カラムの読みやすい幅に制限 */
.cs-solutions-article {
    max-width: 100%;      /* 修正：画面幅いっぱいに広げる */
    margin: 0 auto;
    padding: 0 0 80px;    /* 左右のパディング(20px)を削除してフル幅に対応 */
    color: var(--365-color-c-01);
    font-size: 15px;
    line-height: 1.8;
}

/* 記事ヘッダー（ヒーローの代わり） */
.cs-solutions-header {
    background-color: #ffffff; /* 背景を白に */
    padding: 40px 0px 70px 0px;   /* 上の隙間を60pxに増やして復活！ */
    text-align: center;
    border-bottom: none;       /* 線を消して下と繋げる */
    margin-bottom: 0px;
}



/* MS365風：明るいCTAセクション */
.solutions-cta-box {
    background: var(--365-color-t) !important;
    color: var(--brand-navy); 
    border-radius: 0; 
    margin: 0 !important;
    padding: 40px 20px 100px;
    box-shadow: none;
}

/* 見出しのデザイン */
.solutions-cta-box h3,
.cs-carousel-header h4 {
    color: var(--brand-navy);
	text-align: center; /* 全体を中央寄せに */
	font-size: 32px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

/* 説明文のデザイン */
.solutions-cta-box p {
    color: var(--brand-navy);
    font-size: 16px;
    margin-bottom: 0px;
	text-align: center; /* 全体を中央寄せに */
}

/* ボタンを中央に配置するための設定 */
.cta-actions {
    display: flex;
    justify-content: center; /* 横方向の中央寄せ */
	align-items: stretch;
    flex-wrap: wrap;         /* 追加：画面が狭い時は折り返す */
    gap: 16px;               /* 追加：ボタン同士の隙間をここで管理 */
    margin-top: 120px;        /* 説明文との間の隙間 */
}

/* ボタンのデザイン（MS風の四角いボタン） */
.solutions-btn-1 {
    display: inline-flex !important;
	justify-content: center !important;
    align-items: center !important;
	width: 320px !important;
    background-color: var(--365-color-i); /* MSブルー (#0067b8) */
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 20px;
    border-radius: 4px; /* 丸みを減らして四角く */
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    
    /* 複数のボタンを並べるならこれが必要 */
    margin: 0 10px; 
	text-align: center !important;     /* 改行された文字を中央揃えに */
    line-height: 1.4 !important;        /* 2行になった時の行間を美しく */
}

.solutions-btn-1:hover {
    background-color: var(--365-color-c); /*少し濃く*/
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* ボタンのデザイン（MS風の四角いボタン） */
.solutions-btn-2 {
    display: inline-flex !important;
	justify-content: center !important;
    align-items: center !important;
	width: 320px !important;
    background-color: #ffffff; /* MSブルー (#0067b8) */
    color: var(--365-color-i) !important;
	border: 3px solid var(--365-color-i) !important;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 20px;
    border-radius: 4px; /* 丸みを減らして四角く */
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* 複数のボタンを並べるならこれが必要 */
    margin: 0 10px; text-align: center !important;     /* 改行された文字を中央揃えに */
    line-height: 1.4 !important;        /* 2行になった時の行間を美しく */
}

.solutions-btn-2:hover {
    background-color: var(--365-color-b); /*少し濃く*/
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* ① 外枠（親）の設定：幅制限と中央寄せ */
.solutions-image-container {
    max-width: 640px;  /* ここで幅を制限 */
    margin: 0 auto;    /* ここで中央寄せ */
    padding: 0;        /* 余白をなくす */
    text-align: center; /* 中身（画像やリンク）を中央に */
    
    background: transparent; /* 背景を透明に */
    border-radius: 0;  /* 角丸をなくす */
    box-shadow: none;  /* 枠の影をなくす */
}
/* ② 画像を包むリンク（子）の設定 */
.solutions-image-container > a {
    display: block;    /* 画像の下に謎の隙間ができないようにする */
    transition: opacity 0.3s; /* マウスを乗せた時にふわっとさせる準備 */
}

/* ③ マウスを乗せた時の動き（お好みで） */
.solutions-image-container > a:hover {
    opacity: 0.8;      /* 少し透明にして「押せる」感を出す */
}

/* ④ 画像本体（孫）の設定（既存の記述があればそれを活かす） */
.solutions-image-container img {
    width: 100%;       /* 親枠に合わせて伸縮 */
    height: auto;      /* 比率を保持 */
    display: block;    /* 画像の下の隙間を消す魔法 */
    border: 1px solid #eaeaea; /* 極薄のフチをつけて紙の輪郭を出す */
    border-radius: 5px;        /* チラシなので角の丸みは最小限に */
    box-shadow: 0 15px 40px rgba(0,0,0,0.12); /* 紙が浮いているような影！ */
}

/* フライヤー画像下のリンク用設定 */
.solutions-links {
    margin-top: 40px;        /* 今までの設定をキープ */
    margin-left: auto;       /* 追加：箱ごと中央に寄せる */
    margin-right: auto;      /* 追加：箱ごと中央に寄せる */
    width: fit-content;      /* 追加：箱の幅を、長い方のテキストにピッタリ合わせる */
    
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 変更：center から flex-start（左揃え）に変更！ */
    gap: 14px;
    padding-bottom: 0px;
}

/* ========================================================
   フライヤー MS365風（左右交互）レイアウト
   ======================================================== */

/* SEO用：人間には見せないがGoogleには読ませるタイトル */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 左右交互レイアウトのコンテナ */
.z-pattern-container {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
}

/* 1つのブロック（行） */
.z-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 80px;
    gap: 60px !important; /* これで絶対言うことを聞きます！ */
}

/* 偶数行は左右を反転（右にテキスト、左にアイコン） */
.z-row:nth-child(even) {
    flex-direction: row-reverse;
}

/* テキストエリア */
.z-text {
    /* 隙間50pxのうち、6割分(30px)を引いて正確な60%幅にする魔法 */
    flex: 0 0 calc(60% - 25px);
}
.z-text h4 {
    font-size: 25px;
    color: var(--brand-navy);
    font-weight: 500;
	margin-top: 0 !important; /* 追加：上の謎の隙間を完全に消す！ */
    margin-bottom: 0px;
    /* border-bottom: 2px solid #3da9f5; */
    padding: 5px 0px 5px 0px;
    display: inline-block;
}
.z-text dl {
    margin: 0;
    padding: 0;
}

.z-text dt {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-navy);
    margin-top: 13px;
}
.z-text dd {
    font-size: 15px;
    color: var(--365-color-c-01);
    margin: 0px 0 0 0;
    line-height: 1.7;
}

/* ビジュアル（アイコン）エリア */
.z-visual {
    /* 隙間50pxのうち、4割分(20px)を引いて正確な40%幅にする魔法 */
    flex: 0 0 calc(37% - 25px);
    aspect-ratio: 1 / 1;  /* 強制的に真四角にする */

    /* 追加：スクロールに合わせて画面についてくる（追従する）設定 */
    position: sticky;
    top: 100px;           /* ヘッダーの下で止まるように調整 */
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--color-bg02) !important;
    border-radius: 12px !important; 
    /* 変更：paddingが60pxだと真四角の中身が窮屈になるかもしれないので少し減らします */
    padding: 40px !important;        
    
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.3s ease;
}
/* 715行目付近：アイコン自体の装飾をリッチにする */
.z-visual i {
    /* 1. 大きさと色の調整 */
    font-size: 64px;            /* 80pxから少し小さくすると上品になります */
    color: var(--365-color-i); /* 先ほど特定したモダンブルー(#0078d4)を使用 */
    opacity: 1;                /* 背景が薄いので、アイコン自体はハッキリさせます */
    
    /* 2. アイコンの後ろに丸い背景を作る魔法 */
    background-color: rgba(0, 120, 212, 0.08); /* MSブルーを8%だけ敷く */
    width: 140px;              /* 丸のサイズ */
    height: 140px;             /* 丸のサイズ */
    display: flex;             /* アイコンを丸の真ん中に置く */
    justify-content: center;
    align-items: center;
    border-radius: 50%;        /* 完璧な丸にする */
    
    /* 3. マウスを乗せた時の動きの準備 */
    transition: all 0.3s ease;
	flex-shrink: 0;
}


.z-row:hover .z-visual i {
    transform: scale(1.1);                     /* 1.1倍にふわっと膨らむ */
    background-color: rgba(0, 120, 212, 0.15); /* 背景の青を少しだけ濃くして強調 */
    color: var(--365-color-c);                /* アイコン自体の青を少し深みのある青へ（お好みで） */
}


/* スマホ表示では縦並びに戻す */
@media screen and (max-width: 768px) {
    .z-row, .z-row:nth-child(even) {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
    }
    .z-visual {
        width: 100%;
        padding: 30px;
    }
}

/* ========================================================
   MS365風：3列アイコンサマリー
   ======================================================== */
/* ① 1階：背景を画面端まで塗る「帯」 */
.ms-summary-container-bg,
.cs-pickup-area {
    background-color: var(--365-color-t); 
    width: 100%;
    margin: 0;
    padding: 60px 0 80px 0; /* 上下の余白をここでしっかり確保 */
}

.ms-summary-container-no {
    width: 100%;
    margin: 0;
    padding: 60px 0; /* 上下の余白をここでしっかり確保 */
}

/* ② 2階：中身の幅を制限してド真ん中に置く「箱」 */
.ms-summary-container {
    max-width: var(--max-width); /* 1600px */
    margin: 0 auto !important;   /* 超重要：これで左右中央に揃います */
    padding: 0 var(--pad-x-sub); /* 重要：これで他の文章と縦ラインが揃います */
    box-sizing: border-box;      /* パディングを幅に含める設定 */
}

/* ③ タイトルとグリッドの微調整 */
.ms-summary-main-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
    font-size: 36px;
    font-weight: 600;
}

.ms-summary-item {
	display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important; 
    padding: 35px 30px !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 20px rgba(0,0,0,0.1) !important;
    text-align: left !important;
}
/* マウスを乗せた時に箱を少し浮かせる（高級感アップ） */
.ms-summary-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.ms-summary-icon {
    font-size: 36px;
    color: var(--365-color-c); /* MSブルー */
	margin-bottom: 5px; /* アイコンと見出しの間の隙間を綺麗にとる */
    display: block;
}
/* 2. タイトル */
.ms-summary-title {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--brand-navy) !important;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
    line-height: 1.4 !important;
    display: block !important;
    flex-grow: 0 !important;
	
}

/* 3. 説明文 */
.ms-summary-desc {
    font-size: 16px !important;
    color: var(--365-color-c-01) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    
    /* タイトルとの適正な隙間（少しだけ開ける） */
    padding-top: 8px !important;
}







/* スマホ表示では縦に並べる */
@media screen and (max-width: 768px) {
    .ms-summary-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

/* ========================================================
   MS365風：シンプルINDEXレイアウト（写真なし）
   ======================================================== */
.index-section {
    max-width: 900px;
    margin: 80px auto;
    padding: 0 20px;
}
.index-section-title {
    font-size: 28px !important;      
    font-weight: 500 !important;     
    color: var(--365-color-c-01) !important;        
    text-align: left !important;     
	padding: 0px 0px 50px 0px !important; 
    margin-top: 0px !important;     
    margin-bottom: 0px !important;
    
    font-family: "Segoe UI Light", "Yu Gothic Light", "游ゴシック体", "Yu Gothic", "游ゴシック", sans-serif !important;
	
}
.index-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列並び */
    gap: 60px 40px;
}
.index-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.index-item-icon {
    color: var(--365-color-c);
    font-size: 24px;
    margin-bottom: 15px;
}
.index-item h4 {
    font-size: 18px;
    font-weight: 800;
    color: var(--brand-navy);
    margin: 0 0 12px 0;
    border: none; /* 既存の装飾をリセット */
    padding: 0;
}
.index-item p {
    font-size: 14px;
    color: var(--365-color-c-03);
    line-height: 1.6;
    margin-bottom: 15px;
}
.index-link {
    font-size: 14px;
    color: var(--365-color-c);
    text-decoration: none;
    font-weight: bold;
}
.index-link:hover {
    text-decoration: underline;
}

/* スマホでは1列にする */
@media screen and (max-width: 768px) {
    .index-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* =========================================
   MS365風 カプセル型（ピル型）ナビゲーション
   ========================================= */

/* ① 1階：背景を画面端まで塗る「帯」 */
.ms-pill-nav-wrapper-bg {
    background: linear-gradient(
        to bottom, 
        #ffffff 0%, 
        #ffffff 100%
    ) !important;
    width: 100%;
    margin: 0;
    padding: 60px 0 100px 0; /* 上下の余白をここでしっかり確保 */
}



/* ナビゲーションを包む外枠（画面上部に固定） */
.ms-pill-nav-wrapper {
    position: sticky;
    top: 56px; /* ヘッダーの高さ */
    z-index: 900;
    /* 背景を少し透過させてコンテンツと分離 */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
	padding: 0px 0 0; /* 左右の調整は下のカプセルに任せる */
    margin-bottom: 0;
	

}

/* カプセル本体（白い横長の楕円） */
.ms-pill-nav {
    display: flex;
    align-items: center;
    max-width: calc(var(--max-width) - (var(--pad-x-sub) * 2));
	width: calc(100% - (var(--pad-x-sub) * 2));
    margin: 0 auto;
    
    background-color: #ffffff;
    border-radius: 50px; /* 丸い形状 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    overflow: hidden; 
    
    /* 横スクロール対応（スマホ用） */
    overflow-x: auto;
    white-space: nowrap;
    /* スクロールバーを消す（モダンブラウザ用） */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.ms-pill-nav::-webkit-scrollbar {
    display: none;
}

/* 各メニュー項目 */
.ms-pill-item {
    flex: 1; /* 等間隔に広げる */
    text-align: center;
    padding: 5px 20px; /* 高さと余白 */
    
    color: var(--brand-navy);
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 600; /* 太字 */
    transition: all 0.2s ease;
    border-right: 1px solid #f0f0f0; /* 薄い区切り線 */
    
    /* 文字が折り返さないようにする */
    white-space: nowrap;
}

/* 最後の項目の右線は消す */
.ms-pill-item:last-of-type {
    border-right: none;
}

/* ホバー時の挙動 */
.ms-pill-item:hover {
    background-color: #f5f8fc;
    color: var(--365-color-c);
}

/* 重要：アクティブ（選択中）のデザイン */
/* 画像のように「青背景・白文字」になります */
.ms-pill-item.active {
    background-color: var(--365-color-c); /* MSブルー */
    color: #ffffff !important;
    border-right-color: var(--365-color-c); /* 境界線も青くして馴染ませる */
}

/* 共通：矢印アイコンの装飾 */
.ms-pill-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px; /* クリックしやすい幅 */
    color: var(--brand-navy);
    font-size: 18px;
    background: #fff; /* 背景色（文字が透けないように必須） */
    cursor: pointer;
    z-index: 10;
    height: 100%; /* 高さを揃える */
}

/* 左矢印の位置固定 */
.ms-pill-arrow-left {
    position: sticky;
    left: 0;
    border-right: 1px solid #f0f0f0; /* 右側に区切り線 */
	border-radius: 50px 0 0 50px;
}

/* 右矢印の位置固定 */
.ms-pill-arrow-right {
    position: sticky;
    right: 0;
    border-left: 1px solid #f0f0f0; /* 左側に区切り線 */
	border-radius: 0 50px 50px 0;
}

/* スマホ表示の調整（矢印を消す場合） */
@media screen and (max-width: 768px) {
    .ms-pill-arrow {
        display: none; /* スマホは指でスクロールするので矢印不要 */
    }
}


/* =========================================
   2. ボックス
   ========================================= */

/* 各セクションのボックス設定 */
.ms-section-box {
	max-width: calc(var(--max-width) - (var(--pad-x-sub) * 2));
	width: calc(100% - (var(--pad-x-sub) * 2));
    padding: 10px 0 30px 0; /* 上下の余白をたっぷりとる */
    border-radius: 5px;
	margin: 60px auto;
	box-sizing: border-box;
	
}

/* ここが魔法の交互カラー設定 */

/* 奇数番目（1, 3, 5） */
.ms-section-box:nth-of-type(odd) {
    background-color: var(--color-bg02); /* EDF2F7 */
}

/* 偶数番目（2, 4, 6） */
.ms-section-box:nth-of-type(even) {
    background-color: var(--color-bg02);
}

/* バンドの中身（.z-row）の微調整 */
.ms-section-box .z-row {
    display: flex;
    width: 100% !important;
    max-width: none !important; /* 親（box）が制限しているので、ここは自由に広げる */
    margin: 0 !important;
    padding: 10px 30px !important;
    gap: 80px;
}

/* 偶数番目のセクションだけ、レイアウトを左右反転させる */
.ms-section-box:nth-of-type(even) .z-row {
    flex-direction: row-reverse;
}




/* =========================================
   2. 全幅ゼブラストライプ（交互背景）
   ========================================= */

/* 各セクションのバンド（帯）設定 */
.ms-section-band {
    width: 100%;
    padding: 10px 0 60px; /* 上下の余白をたっぷりとる */
    border-bottom: 1px solid rgba(0,0,0,0.03); /* 極薄の境界線 */
}

/* ここが魔法の交互カラー設定 */

/* 奇数番目（1, 3, 5）は「白」 */
.ms-section-band:nth-of-type(odd) {
    background-color: #fafafa; /* MS製品ページによくある上品なグレー */
}

/* 偶数番目（2, 4, 6）は「薄いグレー」 */
.ms-section-band:nth-of-type(even) {
    background-color: #ffffff;
}

/* バンドの中身（.z-row）の微調整 */
.ms-section-band .z-row {
    margin-bottom: 0; /* HTML書き換え前の余白をリセット */
    gap: 80px;
}

/* 偶数番目のセクションだけ、レイアウトを左右反転させる */
.ms-section-band:nth-of-type(even) .z-row {
    flex-direction: row-reverse;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .ms-index-nav-wrapper {
        top: 50px; /* スマホヘッダーの高さに合わせる */
        overflow-x: auto; /* 横スクロール可能に */
        white-space: nowrap;
        justify-content: flex-start;
        padding-left: 20px;
    }
    .ms-section-band {
        padding: 50px 0;
    }

}



/* =========================================
   修正版：MS風「ドキュメント・スタイル」
   ========================================= */

/* 1. ヘッダー：もっと事務的に、シンプルに */
.cs-text-hero {
    /* 背景色は白のまま */
    
    
	padding: 0px 0 10px !important; /* 上下の余白を大幅に削る */
	
}


.cs-page-title {
    font-size: 34px !important;
    font-weight: 300 !important;
    color: var(--365-color-c-01) !important;
    margin-top: 14px !important;
    margin-bottom: 52px !important;
	font-family: "Segoe UI Light", "Yu Gothic Light", "游ゴシック体", "Yu Gothic", "游ゴシック", sans-serif !important;
}
.cs-page-lead {
	
}


.cs-text-hero-title {
    font-size: 38px !important;
    font-weight: 600 !important;
    color: var(--brand-navy) !important;
    margin-top: 0px !important;
    margin-bottom: 6px !important;
	
}
.cs-text-hero-lead {
    /* 背景色は白のまま */
    padding: 0px 0 40px; /* 上下の余白を大幅に削る */
    border-bottom: none;  /* 下線も消して、ただの空間にする */
    font-size: 16px;
    color: var(--365-color-c-01);
    line-height: 1.6;
    margin: 0;
}


/* =========================================
   署名（シグネチャ）のMS風スタイリング
   ========================================= */
.signature {
	padding: 0px 0px 0px 0px !important;
    margin-top: 0px !important;     
    margin-bottom: 0px;     /* 下のコンテンツとの距離 */
    font-size: 14px;
    color: var(--365-color-c-03);          /* 役職名は控えめなダークグレー */
    line-height: 1.8;
    text-align: left;        /* モダンな左寄せを明示 */
    font-family: "Segoe UI", "Meiryo", "メイリオ", sans-serif;
}

/* お名前（漢字）部分 */
.signature .sig-name {
    font-size: 15px;         /* 役職より少しだけ大きく */
    color: var(--365-color-c-01);          
    margin-right: 6px;       /* ローマ字との隙間 */
}

/* お名前（ローマ字）部分 */
.signature .sig-roman {
    font-size: 14px;
    color: #888888;          /* ローマ字はさらに薄いグレーで添えるだけ */
    font-family: "Segoe UI Light", "Segoe UI", sans-serif; /* シュッとした細い英数字 */
}

/* 3. 右側サイドバー：画像の主張を抑える */
.cs-side-col {
	
    padding-top: 0px; 
    margin-top: -5px; 
	
}








/* カードの枠線や影を極力薄くする（MSはほぼフラット） */
.cs-side-col .cs-lineup-card,
.cs-side-col .cs-glass-card,
.cs-side-col > div {
    box-shadow: none !important;     /* 影を消す */
    background: transparent !important; /* 背景色も消す */
    border: none !important;         /* 線も消す */
    padding: 0 !important;           /* 余白も消す */
    margin-bottom: 40px !important;  /* 項目ごとの間隔は広めに */
}

.cs-side-col .cs-card-img-wrap {
    box-shadow: none !important;
    border-radius: 4px !important;   /* 角丸も小さく（365は結構四角い） */
    margin-bottom: 8px !important;
}






/* =================================================================
   【最終警告修正・スマホ対応版】画面幅に応じて縦横を切り替える
   ================================================================= */



/* 2. 企業情報セクション：上の隙間を固定 */
.cs-theme-about .ms-section-band {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
    background-color: #f7f7f7 !important;
}


/* 3. PC表示用（画面幅が1000pxより広い時は横並び） */
@media screen and (min-width: 1001px) {
    .cs-theme-about .cs-container-2col-73 {
        display: flex !important;
        gap: 25px !important; /* 隙間を広げて美しく */
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    .cs-side-col {
        flex: 3 !important; /* 常に3割の幅！ */
        width: auto !important;
        min-width: 0 !important;
        background: transparent !important;
    }
    .cs-main-col {
        flex: 7 !important; /* 常に7割の幅！ */
        width: auto !important; 
        min-width: 0 !important;
        background-color: #ffffff !important;
        padding: 15px 28px 50px 28px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    }
}

/* 4. スマホ・タブレット表示用（画面幅が1000px以下の時は縦積み） */
@media screen and (max-width: 1000px) {
    .cs-theme-about .cs-container-2col-73 {
        display: flex !important;
        flex-direction: column !important; /* ここで縦並びに強制変更 */
        padding: 0 20px !important; /* スマホ用の左右余白 */
    }
    .cs-main-col {
        width: 100% !important; /* 白い紙を画面いっぱいに */
        flex: none !important;
        padding: 30px 20px !important; /* スマホ用に内側の余白を少し狭く */
    }
    .cs-side-col {
        width: 100% !important; /* サイドバーも画面いっぱいに */
        flex: none !important;
        min-width: 0 !important;
        margin-top: 40px !important; /* 上の白い紙との間に隙間を作る */
        position: static !important; /* 追従（スクロール固定）を解除 */
    }
}

/* =========================================
   復旧：サイドバーの「白い箱」と装飾
   ========================================= */
/* リンク集などを白い箱にする */
.ms-other-content-box {
    background-color: #ffffff !important;
    padding: 24px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
    margin-bottom: 30px !important; /* 次の要素との隙間 */
}
/* リンクの文字色 */
.ms-other-content-box a {
	display: block !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    color: var(--365-color-c-02) !important; /* MS風の青色に微調整 */
    text-decoration: underline !important;
	line-height: 1.4 !important;
}
/* 見出し（Other Contentなど）の装飾 */
.cs-side-col h4 {
    font-size: 20px !important;
    color: var( --365-color-c-01) !important;
	margin-top: 0 !important; 
    margin-bottom: 20px !important;
	
	font-weight: 400 !important;
	
}
/* サイドバーの画像の装飾（枠や影） */
.cs-side-col img {
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    margin-bottom: 10px !important;
    background: #fff !important;
    border-radius: 4px !important;
}

/* =========================================
   最終復旧：削りすぎた余白と画像ストッパー
   ========================================= */

/* ① スマホ画面での余白調整（狭い画面を広く使う） */
@media screen and (max-width: 768px) {
    .cs-container, .cs-container-2col-73 {
        padding: 0 20px !important;
    }
}

/* =========================================
   サイドバー：画像【ピッタリ】に枠をつける
   ========================================= */

/* 1. 画像そのものに枠線を引く（隙間なし） */
.side-solutions-item img {
    /* 隙間（padding）をゼロにしました */
    padding: 0 !important;
    
    /* グレーの線（太さは1px） */
    border: 1px solid #d1d1d1 !important;
    
    /* 角を少しだけ丸く */
    border-radius: 4px !important;
    
    /* 動きの設定 */
    transition: all 0.2s ease;
    
    /* 念のためボックスサイズを固定 */
    box-sizing: border-box;
    width: 100%;
    display: block; /* 画像の下に謎の隙間ができないようにする魔法 */
}

/* 2. マウスを乗せた時の動き */
.side-solutions-item:hover img {
    /* 線がネイビーに変わる */
    border-color: var(--brand-navy) !important;
    
    /* 少し浮く */
    transform: translateY(-2px);
    
    /* 影をつける */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    
    /* 画像を少し明るくして「押せる感」を出す */
    opacity: 0.9;
}

/* 3. タイトル文字の調整（太字・ネイビー） */
.side-solutions-item div {
    font-size: 21px !important;
    font-weight: 600 !important;    
    color: var(--365-color-c-01) !important;
    padding: 0px 0px 0px 3px !important; 
    margin-bottom: 2px !important; 
    line-height: 1.2 !important;
	font-family: "Segoe UI Light", "Yu Gothic Light", "游ゴシック体", "Yu Gothic", "游ゴシック", sans-serif !important;
	
}




/* 画像側の上マージンも念のためゼロに */
.side-solutions-item img {
    margin-top: 0 !important; 
}

/* 親要素の装飾リセット */
.side-solutions-item {
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
    display: block;
}


/* 右側中央・縦書きお問い合わせタブ */
.mobile-contact-btn {
	position: fixed;
	top: 50%;         /* 画面の高さ中央 */
	right: 0;           /* 右端に密着 */
	transform: translateY(-50%); /* 高さを正確にセンターへ */
	z-index: 9999;

	/* デザイン：プランのネイビー色をベースに透過 */
	background: rgba(25, 40, 60, 0.9); 
	color: #ffffff !important;

	/* 縦書きの設定 */
	writing-mode: vertical-rl;   /* 文字を縦書きにする */
	text-orientation: mixed;     /* 英数字を自然な向きにする */
	letter-spacing: 0.15em;      /* 文字の間隔を広げて高級感を出す */

	padding-top: 15px;    /* 上側の余白 24*/
	padding-bottom: 15px; /* 下側の余白 24*/
	padding-left: 10px;   /* 左側の隙間：今のゆとりを維持 */
	padding-right: 10px;   /* 右側の隙間：ここを思い切り詰めました */

	border-radius: 10px 0 0 10px; /* 左側だけ丸くして「タブ」感を出す */
	text-decoration: none !important;
	font-weight: 700;
	font-size: 14px;

	/* ガラス感（磨りガラス効果） */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-right: none;          /* 右端の境界線を消して馴染ませる */

	/* 影と配置 */
	box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: row;        /* これに変更します（縦書きモードでの「上から下」配置） */
	justify-content: center;   /* 上下方向の中央揃え */
	align-items: center;
	gap: 8px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* マウスを乗せた時の「引き出し」アニメーション */
.mobile-contact-btn:hover {
	padding-right: 20px;         /* 少し左にせり出して「呼んでいる」感を出す */
	background: rgba(25, 40, 60, 1);
}

/* アイコン（封筒マーク）の調整 */
.mobile-contact-btn i {
	font-size: 18px;
	transform: rotate(0deg);      /* 封筒は横向きのままの方が綺麗です */
}

/* 2. 文字だけの設定 */
.mobile-contact-btn span {
    /* 文字の位置を少し右に寄せたい、などの微調整も可能 */
    margin-left: 0px;
}

/* スマホでは中央だと操作しにくいため、右下に戻す（定石） */
/* スマホ表示：画面下部中央に配置 */
@media screen and (max-width: 767px) {
	.mobile-contact-btn {
		writing-mode: horizontal-tb; /* 横書きに戻す */
		top: auto;
		bottom: 0px;            /* 下からの距離 */

		/* 中央寄せの魔法のセット */
		left: 50%;
		right: auto;
		transform: translateX(-50%); 

		width: max-content;     /* 中身に合わせて幅を自動調整 */
		border-radius: 50px;
		padding: 12px 28px;     /* 横の余白を少し広げて押しやすく */
		border-right: 1px solid rgba(255, 255, 255, 0.2);
		flex-direction: row;    /* アイコンと文字を横並びに */
		font-size: 14px;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); /* 浮遊感を強調 */
	}

	/* スマホ時はホバーのアニメーションを無効化（誤操作防止） */
	.mobile-contact-btn:hover {
		transform: translateX(-50%); /* 位置を固定 */
		padding-right: 28px;
	}
}

/* =========================================
   SEOキーワードセクション（完全独立版）
   ========================================= */

/* 外側のグレーの帯 */
.cs-seo-section {
    background-color: #f4f4f4;
    padding: 60px 0; /* 元のHTMLに合わせて上下にゆとりを持たせました */
    border-top: 1px solid #ddd;
}

/* 新しいコンテナ（幅1000px専用） */
.cs-seo-container {
    max-width: 1000px;      /* ここがこだわりポイント（狭くする） */
    width: 100%;            /* スマホで横にはみ出さないお守り */
    margin: 0 auto;         /* 画面の真ん中に置く */
    padding: 0 40px;        /* スマホで見た時に端っこがくっつかないようにする隙間 */
    box-sizing: border-box; /* 隙間を含めてサイズ計算する（レイアウト崩れ防止） */
    text-align: left;       /* 左揃え */
}

/* --- 以下、文字のデザイン --- */

/* 見出し (H2) */
.cs-seo-section h2 {
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
    border-left: 5px solid #a0a0a0; /* 元のデザインを再現 */
    padding-left: 15px;
    font-weight: bold;
    line-height: 1.4;
}

/* 本文エリア */
.cs-seo-content {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
}

/* 小見出し (H3) */
.cs-seo-content h3 {
    font-size: 15px;
    font-weight: bold;
    color: var(--365-color-c-01);
    margin-top: 25px;
    margin-bottom: 8px;
}

/* 文章 (P) */
.cs-seo-content p {
    margin: 0 0 20px 0;
}

/* 最後の段落の下余白を消す */
.cs-seo-content p:last-child {
    margin-bottom: 0;
}

/* スマホ表示時の調整（隙間を少し狭く） */
@media screen and (max-width: 768px) {
    .cs-seo-container {
        padding: 0 20px; /* スマホでは左右の余白を減らす */
    }
}

/* 変更後（追記） */
.cs-container-top {
    max-width: var(--max-width); 
    width: 100%; 
    margin: 0 auto; 
    padding: 0 var(--pad-x-top); /* トップページ用の100px変数を指定 */
    box-sizing: border-box; 
}



.dropdown-trigger {
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s;
}

/* 開いている時は、現在地(current-active)の色に絶対負けないよう強制的にグレーにする */
.cs-nav-dropdown-m.is-open .dropdown-trigger,
.cs-nav-dropdown-f.is-open .dropdown-trigger,
.cs-nav-dropdown-m.is-open .dropdown-trigger:hover,
.cs-nav-dropdown-f.is-open .dropdown-trigger:hover,
.cs-nav-dropdown-m.is-open .dropdown-trigger.current-active,
.cs-nav-dropdown-f.is-open .dropdown-trigger.current-active,
.cs-nav-dropdown-m.is-open .dropdown-trigger.current-active:hover,
.cs-nav-dropdown-f.is-open .dropdown-trigger.current-active:hover {
    background-color: var(--365-color-c-11) !important; 
    border-bottom-left-radius: 0 !important; 
    border-bottom-right-radius: 0 !important;
    position: relative;
    z-index: 1001; 
    color: var(--brand-navy) !important;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--365-color-c-11);
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
    z-index: 1000;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    border-radius: 0 4px 4px 4px !important;
    overflow: hidden;
}



.cs-nav-dropdown-m {
    position: relative;
    display: inline-block;
    margin-left: -5px;
    cursor: pointer;
    color: var(--brand-navy); /* ブランドカラーに合わせて調整してください */
    
}

.cs-nav-dropdown-m:hover .dropdown-trigger {
    
}


/* ========================================================
   ▼ ドロップダウン：マウスホバー禁止＆クリック専用ルール ▼
   ======================================================== */

/* ① ホバーで勝手に開くのをサイト全体で完全に禁止する */
.cs-nav-dropdown-m:hover .dropdown-menu,
.cs-nav-dropdown-f:hover .dropdown-menu {
    display: none !important;
}

/* ② 「is-open（クリックされた証）」がついた時だけ開く */
.cs-nav-dropdown-m.is-open .dropdown-menu,
.cs-nav-dropdown-f.is-open .dropdown-menu,
.cs-nav-dropdown-m.is-open:hover .dropdown-menu,
.cs-nav-dropdown-f.is-open:hover .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


.dropdown-menu li a {
    color: var(--brand-navy);
    padding: 8px 24px; /* 上下はスッキリ、左右の余白をゆったり取る */
    text-decoration: none;
    display: block;
    font-weight: 500;  /* 文字を少しだけ太くして存在感を出す */
    font-size: 14px;
    background-color: transparent;
}

.dropdown-menu li a:hover {
    text-decoration: underline; 
    text-underline-offset: 4px;    /* MS風：線を文字から少し離す */
    text-decoration-thickness: 1px;/* MS風：線を細く上品に */
    color: #000000;                /* MS風：ホバー時は少し黒く際立たせる */
    background-color: #e1dfdd !important;
}

/* すべて表示の下だけに少し隙間を作ってグループ分けする */
.dropdown-menu li a[href="/solutions/index.html"] {
    margin-bottom: 8px !important; /* お好みで 4px から 12px の間で調整してください */
}

.dropdown-menu li:first-child {
     /* margin-bottom: 8px; 隙間の広さ（お好みで4pxから12pxに調整してください） */
}

/* ロゴ横のドロップダウン専用 */
.cs-nav-dropdown-f .dropdown-trigger {
    font-size: 16px !important; /* イメージのサイズ */
	padding-top: 12px !important;
}

/* メインのドロップダウン（プラン・ソリューション）専用 */
.cs-nav-dropdown-m .dropdown-trigger {
    font-size: 14px !important; /* プラン・ソリューションのサイズ */
}

/* 偶数行の反転を無効化（タブ切り替え型なら常に同じ向きが美しいです） */
.ms-section-box:nth-of-type(even) .z-row {
    flex-direction: row !important; 
}

.ms-section-box .z-visual {
    flex: 1 !important;
    width: 50% !important;
    /* 写真がない場合は、濃いめのグレーやブランドカラーを敷いて画像っぽく見せる */
    background-color: var(--color-ln01) !important; 
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: static !important;
}

/* アイコンを白抜きにして「写真の代わりのグラフィック」として見せる */
.ms-section-box .z-visual i {
    font-size: 100px !important;
    color: #ffffff !important; 
    background: transparent !important;
}

/* ========================================================
   右側のボックスを上・下・右いっぱいまで広げる
   ======================================================== */

/* 1. 親ボックスの角丸に合わせて、はみ出た部分を綺麗にカットする */
.ms-section-box {
    overflow: hidden !important; 
}

/* 2. テキスト側と画像側の高さをぴったり揃える */
.ms-section-box .z-row {
    align-items: stretch !important; 
}

/* 3. 画像ボックスを枠の端まで引っ張り出す */
.ms-section-box .z-visual {
    /* 6:4の比率に戻す */
    flex: 0 0 40% !important;
    width: 40% !important;

    /* 真四角の制限を解除し、下まで伸びるようにする */
    aspect-ratio: auto !important; 

    /* 魔法のマイナスマージン：親の余白分を打ち消して端まで伸ばす */
    margin-top: -20px !important;    /* 上の隙間（10px+10px）を埋める */
    margin-bottom: -70px !important; /* 下の隙間（60px+10px）を埋める */
    margin-right: -30px !important;  /* 右の隙間（30px）を埋める */
    margin-left: 0 !important;       /* 左（テキスト側）の隙間はそのまま */
}

/* ========================================================
   絵（アイコン）を青い丸背景にする
   ======================================================== */
.ms-section-box .z-visual i {
    font-size: 80px !important; /* アイコンの大きさ */
    color: #ffffff !important; /* アイコン本体は白 */
    background-color: var(--365-color-c) !important; /* 背景をMSブルーに */
    width: 160px !important; /* 丸の横幅 */
    height: 160px !important; /* 丸の縦幅 */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important; /* 綺麗な丸にする */
    box-shadow: 0 10px 20px rgba(0, 103, 184, 0.2) !important; /* ほんのり青い影をつけて浮かせる */
}

/* =========================================
   MS365風 アンダーライン（全メニュー完全対応）
   ========================================= */

/* 1. ドロップダウン用 */
.dropdown-trigger span {
    position: relative;
}
/* ホバー時のみアンダーラインを出す */
.dropdown-trigger:hover span::after {
    content: '';
    position: absolute;
    bottom: -2px; 
    left: 0;
    width: 100%;   
    height: 2px;   
    background-color: var(--brand-navy);
}

/* 箱の一体化を邪魔するアンダーラインを、開いている間は強制的に消す（最強版） */
.cs-nav-dropdown-m.is-open .dropdown-trigger span::after,
.cs-nav-dropdown-f.is-open .dropdown-trigger span::after,
.cs-nav-dropdown-m.is-open .dropdown-trigger.current-active span::after,
.cs-nav-dropdown-f.is-open .dropdown-trigger.current-active span::after,
.cs-nav-dropdown-m.is-open .dropdown-trigger.current-active:hover span::after,
.cs-nav-dropdown-f.is-open .dropdown-trigger.current-active:hover span::after {
    display: none !important;
}

/* 2. 通常リンク用 */
.cs-menu > a {
    position: relative;
}
.cs-menu > a:hover::after {
    content: '';
    position: absolute;
    
    /* 線の高さを上に持ち上げて、文字のすぐ下へ移動させる */
    bottom: 6px; /* ドロップダウンとピッタリ揃わない場合は、8px や 10px などに変更して微調整してください */
    
    left: 12px; 
    width: calc(100% - 24px); 
    height: 2px;
    background-color: var(--brand-navy);
}

/* ========================================================
   現在地（アクティブ）の表示：薄いピル型の背景
   ======================================================== */

/* 1. 現在地（ソリューション等）を薄い青の箱で囲む */
.cs-menu > a.current-active,
.cs-menu .dropdown-trigger.current-active {
    color: var(--brand-navy) !important; 
    background-color: var(--365-color-b) !important;
    font-weight: 500 !important;
}

/* 2. ホバーした時も、周りをズラさず背景だけ付ける */
.cs-menu > a:hover,
.cs-menu .dropdown-trigger:hover,
.cs-menu > a.current-active:hover,
.cs-menu .dropdown-trigger.current-active:hover {
    background-color: var(--365-color-b) !important;
}

/* 3. 現在地に線が勝手に出ないようにリセット */
.cs-menu > a.current-active::after,
.cs-menu .dropdown-trigger.current-active span::after {
    display: none; 
}

/* 4. ただしホバーした時だけは線を表示する */
.cs-menu > a.current-active:hover::after,
.cs-menu .dropdown-trigger.current-active:hover span::after {
    display: block !important;
}

/* =========================================
   イメージだけ下線を太く（3px）する
   ========================================= */

/* ① イメージ項目の下線を 3px に上書き */
.cs-nav-dropdown-f .dropdown-trigger span::after,
.cs-nav-dropdown-f.is-open .dropdown-trigger span::after {
    height: 3px !important; /* 他より1px太く */
    bottom: -3px;           /* 太くなった分、位置を微調整 */
}

/* ② 他の項目は 2px をキープ */
.cs-nav-dropdown-m:hover .dropdown-trigger span::after,
.cs-nav-dropdown-m.is-open .dropdown-trigger span::after,
.cs-menu > a:hover::after {
    height: 2px;
}

/* ========================================================
   【修正版】文字切り替え時の横揺れ防止 & 改行禁止
   ======================================================== */

/* 1. 親の箱を一番長い文字に合わせて完全に固定する */
.cs-nav-dropdown-f {
	position: relative;
    display: inline-block;
    margin-left: -5px;
    cursor: pointer;
    color: var(--brand-navy); /* ブランドカラーに合わせて調整してください */
    font-weight: 550;
	
    width: 110px !important; /* 3つのポイントが余裕で入る幅に固定 */
	margin-right: 10px !important;
}

/* 2. 文字と矢印を左寄せでピッタリくっつけ、絶対に改行させない */
.cs-nav-dropdown-f .dropdown-trigger {
    display: flex !important;
    justify-content: flex-start !important; /* 左寄せ */
    align-items: center !important;
    white-space: nowrap !important; /* 【重要】絶対に改行させない魔法 */
}

/* 3. 前回の失敗コードをリセット */
.cs-nav-dropdown-f .dropdown-trigger span {
    width: auto !important; /* 文字の自然な長さに合わせる */
    display: inline-block;
}

/* =========================================
   新設パーツ：5:5（ハーフ＆ハーフ）レイアウト（統合版）
   ========================================= */

/* 1. 基本設定（ベースとなる箱の形） */
.cs-container-2col-55 {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--pad-x-sub);
    box-sizing: border-box;
}

/* 2. PC表示用（1001px以上で5:5の横並び） */
@media screen and (min-width: 1001px) {
    .cs-container-2col-55 {
        display: flex !important;
        gap: 40px !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .cs-col-50 {
        width: 50% !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
}

/* 3. スマホ・タブレット表示用（1000px以下で縦積み） */
@media screen and (max-width: 1000px) {
    .cs-container-2col-55 {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 20px !important;
        gap: 30px !important;
    }
    .cs-col-50 {
        width: 100% !important;
        flex: none !important;
    }
}

/* =========================================
   Isotope 絞り込みボタン & 4列グリッド
   ========================================= */
.filter-btn {
    /* 基本の形（四角） */
    background: #ffffff;
    border: 1px solid var(--color-ln01);
    color: var(--brand-navy);
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* くっつけるための魔法 */
    margin: 0; 
    margin-left: -1px; /* 線が2重になるのを防ぐ */
    border-radius: 0;  /* 元の丸みを消す */
}

/* 最初のボタンの左側だけ丸くする */
.filter-btn:first-child {
    border-radius: 6px 0 0 6px;
    margin-left: 0;
}

/* 最後のボタンの右側だけ丸くする */
.filter-btn:last-child {
    border-radius: 0 6px 6px 0;
}

/* マウスを乗せた時 */
.filter-btn:hover {
    background: #f5f8fc;
    z-index: 1;
    position: relative;
}

/* アクティブ（選択中） */
.filter-btn.active {
    background: var(--365-color-c);
    border-color: var(--365-color-c);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 103, 184, 0.2);
    z-index: 2; /* 選択中の青い枠線を一番上に持ってくる */
    position: relative;
}

/* =========================================
   Isotope 絞り込みボタン & 4列グリッド (最終完成版)
   ========================================= */

.isotope-grid {
    /* 魔法：4枚目の右側の隙間(10px)を吸収するために、親の箱を10pxだけ広げる */
    width: calc(100% + 10px);
    margin-right: -10px;
    margin-left: 0;
}

.isotope-grid::after {
    content: "";
    display: block;
    clear: both;
}

.element-item {
    /* 複雑な計算は不要！「4等分(25%)から隙間(10px)を引く」だけで完璧に並びます */
    width: calc(25% - 10px); 
    margin-right: 10px;  /* 横の隙間 */
    margin-bottom: 10px; /* 縦の隙間 */
    
    text-decoration: none !important;
    
    float: left;
}

/* スマホ・タブレットのレスポンシブ（列数を減らす） */
@media screen and (max-width: 1100px) {
    /* 3列：3等分(33.333%)から隙間を引く */
    .element-item { width: calc(33.333% - 10px); } 
}
@media screen and (max-width: 768px) {
    /* 2列：2等分(50%)から隙間を引く */
    .element-item { width: calc(50% - 10px); } 
}
@media screen and (max-width: 480px) {
    /* スマホ1列：隙間不要 */
    .element-item { width: 100%; margin-right: 0; } 
}
/* ここまで上書き */



/* 追加：コントロールバーの共通ラベル文字 */
.cs-filter-c-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--365-color-c-03) !important;
	padding: 0px 0px 0px 20px !important;
	display: flex !important;
	align-items: baseline !important;
	
}
.cs-filter-s-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--365-color-c-03) !important;
	padding: 0px 20px 0px 0px !important;
	display: flex !important;
	align-items: center; !important;
	
}

.cs-filter-c {
	display: inline-block;
	min-width: 55px;
	text-align: center; 
	font-size: 30px; 
	color: var(--365-color-c); 
	font-weight: 800; 
	font-variant-numeric: tabular-nums; 
	line-height: 1; 
	margin-right: 2px;
	
}



.cs-sort-select-direct {
	/* ラベルが消えた分、左側の余白を12pxから16pxに増やしてバランス調整 */
	padding: 8px 30px 8px 16px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--brand-navy) !important;
	background-color: #ffffff !important;
	border: 1px solid #d1d1d1 !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	outline: none !important;
	appearance: none !important; 
	-webkit-appearance: none !important;
	/* オリジナルの矢印アイコン */
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%23616161%22%20d%3D%22M6%208.825L1.175%204%202.238%202.938%206%206.7l3.763-3.762L10.825%204z%22%2F%3E%3C%2Fsvg%3E') !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 10px !important;
	transition: all 0.2s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
}
.cs-sort-select-direct:hover {
	border-color: var(--365-color-c) !important;
}

.isotope-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: fit-content;
	margin: 0 auto;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	border-radius: 6px;
	
}


/* 特別なカードだけ枠線を青くして、影を少し強調する */
.cs-lineup-card.cs-card-special {
    border: 5px solid var(--365-color-m) !important; /* 鮮やかな青枠 */
    box-shadow: 0 0 16px 3px rgba(116, 181, 231, 0.7) !important; /* 青みがかった影 */
}

/* 最初の青いバッジのデザイン（共通設定） */
.cs-card-badge {
    position: absolute;
    
    /* MSブルーからネイビーへの高級グラデーション */
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--365-color-i) 100%);
    color: #ffffff;
    
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 5px 14px;
    border-radius: 20px; /* 綺麗なカプセル型 */
    
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 10;
    pointer-events: none;
	border: 3px solid #ffffff;
}

/* タイトル部分まではみ出させる個別設定 */
.cs-badge-right-bottom {
    bottom: auto; /* 初期化 */
    left: auto;   /* 初期化 */
    
    /* 魔法の数値：文字エリアの上端から、マイナス方向に引っ張り上げる！ */
    top: -19px;  
    right: 2px; 
    
    /* 角度の微調整 */
    transform: rotate(25deg);
}

/* =========================================
   カテゴリと日付の隙間を消す（最強のGridレイアウト）
   ========================================= */
/* カテゴリと日付を囲んでいる箱を、強制的にGrid（マス目）に変更！ */
.cs-card-content > div:not(.cs-card-link) {
    display: grid !important;
    grid-template-columns: 1fr auto !important; /* 左は残り全ての空間、右は日付の幅だけと厳格に指定！ */
    gap: 8px !important; /* 日付との隙間は8pxで固定！これ以上は絶対に空かない！ */
    width: 100% !important;
    align-items: center !important;
}

/* カテゴリ側の設定 */
.cs-card-cat-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    min-width: 0 !important;    /* これがGrid内で「...」を正しく効かせる絶対条件 */
    margin-right: 0 !important; /* 余白はgapに任せるのでゼロ */
	color: var(--365-color-c-04);
	font-size: 12px;
}

/* 日付側の設定 */
.cs-card-date-label {
    display: block !important;
    white-space: nowrap !important;
    text-align: right !important; /* 右寄せに固定 */
	color: var(--365-color-c-03);
	font-size: 13px;
	
}

/* =========================================
   ローマ数字の共通スタイル（現代風チューニング版）
========================================= */
.cs-roman-icon {
    /* 【重要】明朝体フォントを消して、現代的なサンセリフ体に上書き！ */
    font-family: "Segoe UI", "Meiryo", "メイリオ", sans-serif !important;
    
    /* 太さはそのままでゴシック体風に！ */
    font-weight: 550 !important;
    
    /* 大きさは先ほど増やした1.15emのままで存在感を出す！ */
    font-size: 1.05em !important;
    
    /* 【重要】日本語テキストと高さをピタッと揃える魔法 */
    vertical-align: 0px !important; /* 日本語テキストの中央に揃える */
}


/* ========================================================
   カルーセル（スライダー）共通スタイル
   ======================================================== */
.cs-carousel-wrapper {
	width: 100%;
	background: #ffffff;
	padding: 0px 0 80px 0;
	overflow: hidden; 
}
.cs-carousel-header {
	text-align: center;
	margin-bottom: 30px;
}
.cs-carousel-track {
	display: flex;
	gap: 15px;
	overflow-x: auto;
	scroll-snap-type: x mandatory; 
	padding: 20px calc(50% - 140px);
	scrollbar-width: none; 
	-ms-overflow-style: none; 
	scroll-behavior: smooth;
}
.cs-carousel-track::-webkit-scrollbar {
	display: none; 
}

/* フッターエリア（左右分割） */
.cs-carousel-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 30px auto 0;
	padding: 0 20px;
}

/* 左下：矢印グループ */
.cs-carousel-controls {
	display: flex;
	gap: 12px;
}
.cs-car-btn {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 1px solid var(--brand-navy);
	background: #ffffff;
	color: var(--brand-navy);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s ease;
	outline: none;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
#cs-btn-prev svg { transform: scale(1.1) translateX(-1px); }
#cs-btn-next svg { transform: scale(1.1) translateX(1px); } 

.cs-car-btn:hover {
	background: var(--brand-navy);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(46, 68, 102, 0.2);
}

/* 右下：戻るボタン */
.cs-nav-back-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--brand-navy);
	padding: 14px 40px;
	border-radius: 30px;
	border: 1px solid var(--brand-navy);
	font-size: 15px;
	font-weight: 500;
	transition: all 0.3s ease;
}
.cs-nav-back-btn:hover {
	background: var(--brand-navy);
	color: #fff;
    transform: translateY(-2px); /* 🌟 左右ボタンと同じ「浮き上がり」！ */
    box-shadow: 0 8px 20px rgba(46, 68, 102, 0.2); /* 🌟 影も同じようにリッチに！ */
}

/* スマホ表示 */
@media screen and (max-width: 600px) {
	.cs-carousel-footer {
		flex-direction: column;
		gap: 24px;
		justify-content: center;
	}
	.cs-carousel-controls {
		justify-content: center;
		width: 100%;
	}
}

/* ソリューション：日付・番号のメタ情報エリア */
.cs-solution-meta {
    margin-top: 32px;
    font-size: 14px;
    color: var(--365-color-c-03);
    text-align: center;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* メタ情報の区切り線（ | ） */
.cs-solution-meta-divider {
    margin: 0 10px;
    opacity: 0.5;
}

/* ========================================================
   プライバシーポリシー専用：MS完全フラット（白一色）レイアウト
   ======================================================== */

/* テーマ専用の白一色上書き */
.cs-theme-pp .ms-section-band {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
    background-color: #ffffff !important; /* 強制的に真っ白にする */
    border-bottom: none !important;
}

.cs-policy-container {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    margin-bottom: 100px;
}

/* 左側：目次ナビゲーション（箱感を完全に消す） */
.cs-policy-sidebar {
    flex: 0 0 28%;
    position: sticky;
    top: 120px;
    background: #ffffff;
    padding: 15px 28px 50px 28px !important;
    border: none;    
    box-shadow: none; 
}
.cs-policy-sidebar h4 {
    font-size: 17px;
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--brand-navy);
    font-weight: 700;
}
.cs-policy-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
	margin-left: 15px;
}
.cs-policy-sidebar li {
    margin-bottom: 14px;
}
.cs-policy-sidebar a {
    text-decoration: none;
    color: var(--365-color-c-01);
    font-size: 15px;
    font-weight: 400;
    transition: color 0.3s ease;
    display: block;
}
.cs-policy-sidebar a:hover {
    color: var(--365-color-c);
}

/* 🌟 MS完全再現：選択中のメニューは左側に青い縦線を出す */
.cs-policy-sidebar a.active {
    color: var(--365-color-c);
    border-left: 3px solid var(--365-color-c);
    padding-left: 12px;
    margin-left: -15px; /* テキストの左端を他の項目と揃える魔法 */
}

/* 右側：メインコンテンツ（箱感を完全に消す） */
.cs-policy-content {
    flex: 1;
    background: #ffffff;
    padding: 15px 28px 50px 28px !important;
    border: none;
    box-shadow: none; 
}
.cs-policy-content section {
    margin-bottom: 50px;
    scroll-margin-top: 120px;
}
.cs-policy-content section:last-child {
    margin-bottom: 0;
}
.cs-policy-content h2 {
    font-size: 24px;
    color: var(--brand-navy);
	margin-top: 0 !important;
    margin-bottom: 16px;
    font-weight: 700;
}
.cs-policy-content p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--365-color-c-01);
	margin-top: 0 !important;
    margin-bottom: 13px;
}
.cs-policy-content ul {
	margin-top: -13px !important;
    margin-bottom: 16px;
    padding-left: 20px;
}
.cs-policy-content li {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--365-color-c-01);
    margin-bottom: 0px;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .cs-policy-container {
        flex-direction: column;
        gap: 30px;
    }
    .cs-policy-sidebar {
        flex: none;
        width: 100%;
        position: relative;
        top: 0;
        padding: 20px 0;
    }
    .cs-policy-content {
        padding: 10px 0;
    }
}