@charset "utf-8";
@import url("css/basic.css");
@import url("css/page.css");
@import url("css/nav.css");
/* ===== 新ナビ（全ページ共通） 2026 ===== */
.rs-sr{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.rs-hero{ width:100%; line-height:0; }
.rs-hero img{ width:100%; height:auto; display:block; }
.rs-nav{ display:flex; align-items:stretch; background:#f3dada; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; margin:0 0 18px; }
.rs-brand{ display:flex; align-items:center; justify-content:center; padding:8px 22px; min-width:150px; }
.rs-brand img{ height:54px; width:auto; mix-blend-mode:multiply; }
.rs-menu{ display:flex; flex:1; }
.rs-menu a{ flex:1; text-align:center; padding:14px 4px; text-decoration:none; border-left:1px solid #e7c9c9; }
.rs-menu a .e{ display:block; font-family:"Hiragino Mincho ProN",serif; font-size:17px; color:#5d4146; }
.rs-menu a .j{ display:block; font-size:11px; color:#8a6a70; margin-top:5px; }
.rs-menu a:hover{ background:#eccfcf; }
@media (max-width:760px){
  .rs-nav{ flex-wrap:wrap; }
  .rs-brand{ width:100%; justify-content:flex-start; }
  .rs-menu{ flex-wrap:wrap; }
  .rs-menu a{ flex:1 0 25%; }
}

/* ===== モバイル対応（レスポンシブ）2026 ===== */
@media (max-width: 768px){
  #header, #content, #footer{ width:auto !important; max-width:100%; box-sizing:border-box; padding-left:14px; padding-right:14px; }
  #content{ font-size:16px; line-height:1.85; }
  /* フッター：ナビを折返し中央寄せ・全項目を表示 */
  #footer{ margin-top:36px; }
  #footer .nav{ text-align:center; line-height:2; width:100% !important; max-width:100% !important; box-sizing:border-box; }
  #footer .nav li{ float:none; display:inline-block; border-right:none; padding:4px 10px; }
  #footer .pagetop{ float:none; width:auto; margin:0 0 12px; }
  #content p{ font-size:16px; }
  #content h2{ font-size:20px; }
  #content h3{ font-size:17px; }
  img{ max-width:100%; height:auto; }
  img#title{ width:auto; max-width:100%; }
  /* 段組を縦積み */
  .left, .right, .wrap{ float:none !important; width:auto !important; }
  #content .left, #content .right{ float:none !important; width:auto !important; margin:0 0 16px; }
  /* 右上の代表写真など固定幅の枠 */
  #content .right[style]{ width:auto !important; }
  /* テーブルは横はみ出し防止 */
  #content table{ width:100% !important; max-width:100%; }
  #content table td{ display:block; width:auto !important; }
  /* 問い合わせフォーム：ラベルと入力を縦積み・大きく */
  #contact table, #contact tbody, #contact tr, #contact th, #contact td{ display:block; width:auto !important; }
  #contact th{ text-align:left; line-height:1.6; padding:10px 0 4px; height:auto; }
  #contact .impo{ background-position:left center; padding-left:36px; }
  #contact td input:not([type=checkbox]):not([type=radio]), #contact td textarea,
  input[type=text], input[type=email], input[type=tel], textarea, select{
    width:100% !important; box-sizing:border-box; font-size:16px; padding:12px; min-height:50px; border:1px solid #ccc;
  }
  /* チェックボックスは全幅化しない（フォーム確認欄が潰れる不具合対策） */
  #contact td input[type=checkbox]{ width:auto !important; min-height:0 !important; }
  #contact td textarea{ min-height:150px; }
}

/* ===== タブレット〜フォルダブル展開時（〜980px）固定幅をやめ画面内に収める ===== */
html, body{ overflow-x:hidden; }
html{ background:#ffffff; }
@media (max-width: 980px){
  #header, #content, #footer{ width:auto !important; max-width:960px; box-sizing:border-box; padding-left:18px; padding-right:18px; }
  img{ max-width:100%; height:auto; }
  /* 固定幅テーブル（3連バナー等）を画面内に収める */
  #content table{ width:100% !important; max-width:100%; table-layout:fixed; }
  #content table td{ width:auto !important; }
  #content table td img{ width:100% !important; height:auto; }
  /* 中間幅では2段組を維持しつつ右カラムを画面内に */
  #content .right[style]{ max-width:40%; }
}

/* ===== 本文内の固定幅・フロート要素をモバイルで画面内に収める（service/flow/media等） ===== */
@media (max-width: 768px){
  #content .nav{ float:none !important; width:auto !important; max-width:100% !important; overflow:visible !important; }
  #content .nav li{ float:none !important; width:auto !important; margin:4px 0 !important; }
  #content ul.style1, #content ul.style1 li{ width:auto !important; max-width:100% !important; }
  body#flow #content ul.style1{ width:auto !important; max-width:100% !important; height:auto !important; background-size:contain; }
  #content img.style1, #content div.style1{ width:auto !important; max-width:100% !important; height:auto !important; float:none !important; }
  #content dl, #content dl dt, #content dl dd{ float:none !important; width:auto !important; max-width:100% !important; }
  #service #content .style2{ width:auto !important; max-width:100% !important; }
}

/* ===== 本文：画像のマージン/フロート無効化＋長い文字列の折返し（モバイル） ===== */
@media (max-width: 768px){
  #content img{ float:none !important; display:block; margin-left:auto !important; margin-right:auto !important; max-width:100% !important; height:auto !important; }
  #content{ overflow-wrap:break-word; word-break:break-word; }
  #content a{ word-break:break-word; }
}


/* ===== CloudSecure セキュリティバッジ（全ページ共通フッター） ===== */
/* contactページは個別のSVGバッジを実装済みのため除外 */
body:not(#contact) #footer::after{
  content:"CloudSecure  SECURED \01F512\A暗号化通信＋セキュリティ診断済";
  white-space:pre-line;
  display:block;
  clear:both;
  box-sizing:border-box;
  max-width:340px;
  margin:22px auto 8px;
  padding-top:42px;
  text-align:center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='34' viewBox='0 0 30 34'%3E%3Cpath d='M15 1.5 L27.5 6 V16 C27.5 24.3 22.3 30.2 15 33 C7.7 30.2 2.5 24.3 2.5 16 V6 Z' fill='%233b46c4'/%3E%3Cpath d='M8.8 16.8 l4 4 l8.4 -9' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat top center;
  background-size:30px 34px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:13px;
  font-weight:bold;
  line-height:1.7;
  letter-spacing:.04em;
  color:#5b5bd6;
}

/* ===== 問い合わせフォーム：チェックボックス行の折返し＆横はみ出し防止（スマホ） ===== */
@media (max-width: 600px){
  /* th/td を縦積み・セル幅を画面内に固定（横はみ出し防止） */
  #contact table, #contact tbody, #contact tr, #contact th, #contact td{
    display:block; width:100% !important; max-width:100%; box-sizing:border-box;
  }
  #contact td{ padding:0 0 4px; }
  /* 「営業ではありません」ラベル：フロート方式でチェックボックスを左、文章を残り幅で折返す
     （flexはリナライズ表内で1文字折返しになるため不使用） */
  #contact label{ display:block; overflow:hidden; }
  #contact label input[type=checkbox]{ float:left; margin:4px 8px 0 0; width:auto; }
  #contact label > span{ display:block; overflow:hidden; word-break:break-word; }
}

/* ===================================================================
   トップ（ランディングページ）リニューアル 2026  ※ #index 限定
   =================================================================== */
body#index{ background:#ffffff; }
#index #content{ font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; color:#4a4a4a; }
#index .lp-lead{ text-align:center; padding:20px 0 4px; }
#index .lp-kicker{ letter-spacing:.3em; color:#b98b91; font-size:13px; margin:0 0 14px; }
#index .lp-title{ font-family:"Hiragino Mincho ProN",serif; font-size:30px; line-height:1.5; color:#5d4146; margin:0 0 22px; font-weight:normal; background:none; padding:0; border:none; }
#index .lp-intro{ max-width:720px; margin:0 auto; text-align:left; line-height:2; font-size:15px; }
#index .lp-sec{ margin:48px 0; }
#index .lp-h{ text-align:center; font-family:"Hiragino Mincho ProN",serif; font-size:23px; color:#5d4146; margin:0 0 28px; font-weight:normal; background:none; padding:0; border:none; }
#index .lp-h::after{ content:""; display:block; width:40px; height:2px; background:#d8a7ad; margin:12px auto 0; }
#index .lp-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
#index .lp-card{ display:block; text-decoration:none; border:1px solid #eaddde; border-radius:10px; padding:24px 22px; background:#fff; transition:box-shadow .2s, transform .2s; }
#index .lp-card:hover{ box-shadow:0 6px 22px rgba(150,100,110,.16); transform:translateY(-2px); }
#index .lp-card-en{ display:block; font-family:"Hiragino Mincho ProN",serif; font-size:12px; letter-spacing:.14em; color:#b98b91; }
#index .lp-card-jp{ display:block; font-size:19px; font-weight:bold; color:#4a3236; margin:4px 0 10px; }
#index .lp-card-desc{ display:block; font-size:14px; line-height:1.9; color:#5a5a5a; }
#index .lp-more{ display:inline-block; margin-top:14px; font-size:13px; color:#c0757e; font-weight:bold; }
#index .lp-stats{ background:#faf1f1; border-radius:12px; padding:32px 26px; }
#index .lp-stat-list{ max-width:760px; margin:0 auto; list-style:none; padding:0; }
#index .lp-stat-list li{ padding:12px 0 12px 34px; background:none; border-bottom:1px dashed #e3cdd0; position:relative; line-height:1.9; }
#index .lp-stat-list li::before{ content:"◆"; color:#d8a7ad; position:absolute; left:6px; top:14px; font-size:10px; }
#index .lp-stat-list li:last-child{ border-bottom:none; }
#index .lp-stat-list b{ color:#c0757e; font-size:1.12em; }
#index .lp-note{ text-align:center; margin:18px 0 0; }
#index .lp-note a{ color:#c0757e; }
#index .lp-message{ text-align:center; }
#index .lp-msg-wrap{ display:flex; gap:28px; align-items:flex-start; justify-content:center; max-width:740px; margin:0 auto 4px; text-align:left; }
#index .lp-msg-text{ flex:1; }
#index .lp-msg-text p{ line-height:2; font-size:15px; margin:0; }
@media (max-width:600px){ #index .lp-msg-wrap{ flex-direction:column; align-items:center; gap:14px; } #index .lp-msg-text{ text-align:left; } }
#index .lp-message p{ max-width:720px; margin:0 auto 8px; text-align:left; line-height:2; font-size:15px; }
#index .lp-links{ margin:26px 0 0; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
#index .lp-btn{ display:inline-block; padding:14px 28px; border:1px solid #c9a0a6; border-radius:30px; color:#8a5860; text-decoration:none; font-size:15px; background:#fff; transition:.2s; }
#index .lp-btn:hover{ background:#c0757e; color:#fff; border-color:#c0757e; }
#index .lp-msg-photo{ flex:0 0 auto; text-align:center; margin:0; }
#index .lp-msg-photo img{ width:110px; height:auto; border-radius:10px; box-shadow:0 3px 12px rgba(150,100,110,.18); }
#index .lp-msg-photo p{ margin:10px 0 0; color:#8a6a70; font-size:14px; }
#index .lp-cta{ text-align:center; margin:46px 0 10px; }
#index .lp-cta img{ max-width:100%; height:auto; }
#index .lp-contact-btn{ display:inline-block; background:#c0757e; color:#fff; text-decoration:none; font-size:19px; font-weight:bold; letter-spacing:.02em; padding:19px 56px; border-radius:40px; box-shadow:0 6px 18px rgba(192,117,126,.35); transition:.2s; }
#index .lp-contact-btn:hover{ background:#a85f68; box-shadow:0 8px 22px rgba(168,95,104,.4); }
#index .lp-contact-sub{ display:block; font-size:13px; color:#8a5860; margin:14px 0 0; }
/* 基底の #content a:link{color:#ff6564} を上書きして、塗りボタンの文字を白に確定 */
#content a.art-btn, #content a.art-btn:link, #content a.art-btn:visited, #content a.art-btn:hover{ color:#fff !important; }
#index #content a.lp-contact-btn, #index #content a.lp-contact-btn:link, #index #content a.lp-contact-btn:visited, #index #content a.lp-contact-btn:hover{ color:#fff; }
#index #content a.lp-btn:link, #index #content a.lp-btn:visited{ color:#8a5860; }
#index #content a.lp-btn:hover{ color:#fff; }

/* 汎用の塗りお問い合わせボタン（どのページでも使える・薄いbtn_contact.jpg画像の置き換え用） */
.rs-cta-btn{ display:inline-block; background:#c0757e; color:#fff; text-decoration:none; font-size:18px; font-weight:bold; letter-spacing:.02em; padding:18px 50px; border-radius:40px; box-shadow:0 5px 16px rgba(192,117,126,.32); transition:.2s; }
.rs-cta-btn:hover{ background:#a85f68; }
#content a.rs-cta-btn, #content a.rs-cta-btn:link, #content a.rs-cta-btn:visited, #content a.rs-cta-btn:hover{ color:#fff !important; }
@media (max-width:768px){ .rs-cta-btn{ display:block; padding:17px 18px; font-size:16px; text-align:center; } }

/* 成功事例：ケース画像・お客様の声の写真 */
.rs-article .art-casefig{ text-align:center; margin:2px 0 22px; }
.rs-article .art-casefig img{ width:auto; max-width:100%; height:auto; border-radius:8px; box-shadow:0 3px 12px rgba(150,100,110,.15); }
.rs-article .art-fig-right{ float:right; width:250px; max-width:44%; margin:2px 0 12px 22px; }
.rs-article .art-fig-right img{ width:100%; height:auto; border-radius:8px; box-shadow:0 3px 12px rgba(150,100,110,.15); }
@media (max-width:600px){ .rs-article .art-fig-right{ float:none; width:auto; max-width:100%; margin:2px 0 16px; text-align:center; } }
.rs-article .art-quote{ overflow:hidden; }
.rs-article .voice-photo{ float:left; width:112px; margin:2px 16px 6px 0; }
.rs-article .voice-photo img{ width:100%; height:auto; border-radius:8px; }
@media (max-width:600px){ .rs-article .voice-photo{ width:90px; margin:2px 12px 4px 0; } }
/* プロフィール：名前下の2リンク */
.rs-article .art-proflinks{ text-align:center; margin:14px 0 0; }
.rs-article .art-proflinks a{ display:inline-block; margin:4px 6px; padding:9px 20px; border:1px solid #c9a0a6; border-radius:30px; color:#8a5860; text-decoration:none; font-size:13px; }
#content .rs-article .art-proflinks a:link, #content .rs-article .art-proflinks a:visited{ color:#8a5860; }
.rs-article .art-proflinks a:hover{ background:#c0757e; color:#fff; border-color:#c0757e; }
@media (max-width:600px){ .rs-article .art-proflinks a{ display:block; margin:6px auto; max-width:280px; } }
/* コラム本文：注記（※）は小さめ */
#content .rs-article p.col-note{ font-size:12px; color:#8a8a8a; margin:2px 0 14px; line-height:1.7; }

/* コラムコーナー（各ページの問い合わせ前・囲み） */
.col-corner{ max-width:820px; margin:46px auto 0; border:2px solid #e3cdd0; border-radius:12px; padding:24px 28px; background:#fbf4f4; }
#content .col-corner h3{ margin:0 0 16px; font-size:18px; color:#5d4146; border:none; padding:0; background:none; font-family:"Hiragino Mincho ProN",serif; text-align:center; }
.col-corner ul{ list-style:none; margin:0 0 14px; padding:0; }
#content .col-corner ul li{ background:none; padding:9px 0 9px 20px; position:relative; border-bottom:1px dotted #e3cdd0; line-height:1.6; }
.col-corner ul li::before{ content:"›"; position:absolute; left:4px; color:#c0757e; font-weight:bold; }
.col-corner ul li a{ color:#5a4a4d; text-decoration:none; }
.col-corner ul li a:hover{ color:#c0757e; text-decoration:underline; }
.col-corner .col-more{ text-align:center; margin:4px 0 0; }
.col-corner .col-more a{ color:#c0757e; font-weight:bold; text-decoration:none; }
.col-corner .col-more a:hover{ text-decoration:underline; }

/* 雑誌掲載実績ページ */
.rs-article .media-collage{ text-align:center; margin:6px 0 26px; }
.rs-article .media-collage img{ width:100%; max-width:660px; height:auto; border-radius:8px; box-shadow:0 4px 16px rgba(150,100,110,.14); }
.rs-article .media-lineup img{ max-width:520px; box-shadow:none; }
.rs-article .media-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0 0 24px; }
.rs-article .media-thumb{ display:block; line-height:0; }
.rs-article .media-thumb img{ width:170px; height:auto; border:1px solid #eee; border-radius:4px; transition:box-shadow .2s, transform .2s; }
.rs-article a.media-thumb:hover img{ box-shadow:0 4px 14px rgba(150,100,110,.25); transform:translateY(-2px); }
@media (max-width:600px){ .rs-article .media-thumb img{ width:44vw; } }
/* トップ Message：メディア掲載紹介バナー */
#index .lp-media-banner{ display:inline-block; margin:14px 0 0; line-height:0; }
#index .lp-media-banner img{ width:120px; height:auto; border-radius:6px; box-shadow:0 2px 8px rgba(150,100,110,.16); }
@media (max-width:768px){
  #index .lp-contact-btn{ display:block; padding:18px 20px; font-size:17px; }
}
@media (max-width:768px){
  #index .lp-title{ font-size:23px; }
  #index .lp-cards{ grid-template-columns:1fr; }
  #index .lp-h{ font-size:20px; }
  #index .lp-btn{ width:100%; box-sizing:border-box; text-align:center; }
}

/* ===================================================================
   内容ページ共通（新デザイン記事レイアウト）2026
   =================================================================== */
.rs-article{ max-width:820px; margin:0 auto; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; color:#4a4a4a; }
.rs-article .art-kicker{ text-align:center; letter-spacing:.2em; color:#b98b91; font-size:12px; margin:6px 0 10px; }
#content .rs-article .art-title{ text-align:center; font-family:"Hiragino Mincho ProN",serif; font-size:27px; color:#5d4146; margin:0 0 14px; font-weight:normal; background:none; padding:0; border:none; line-height:1.4; }
.rs-article .art-lead{ text-align:center; font-size:16px; color:#8a5860; line-height:1.9; margin:0 auto 34px; max-width:680px; }
#content .rs-article h3{ font-family:"Hiragino Mincho ProN",serif; font-size:20px; color:#5d4146; margin:40px 0 14px; padding:0 0 10px; border-bottom:1px solid #eaddde; border-top:none; border-left:none; font-weight:normal; background:none; }
.rs-article p{ line-height:2; font-size:15px; margin:0 0 16px; }
/* 旧ページの箇条書き：ピンク点(bg_li)と文字の間隔を確保（10px→18px） */
#content ul li{ padding-left:18px; }
.rs-article ul.art-list{ list-style:none; padding:0; margin:0 0 18px; }
#content .rs-article ul.art-list li{ padding:9px 0 9px 32px; background:none; position:relative; line-height:1.8; border-bottom:1px dashed #eee; }
.rs-article ul.art-list li::before{ content:"◆"; color:#d8a7ad; position:absolute; left:6px; top:11px; font-size:10px; }
.rs-article ul.art-list li:last-child{ border-bottom:none; }
.rs-article .art-box{ background:#faf1f1; border-radius:10px; padding:22px 26px; margin:0 0 20px; }
.rs-article .art-box h3{ margin-top:0; }
.rs-article .art-quote{ background:#faf1f1; border-left:4px solid #d8a7ad; border-radius:0 8px 8px 0; padding:18px 22px; margin:0 0 20px; color:#6a4a50; font-size:15px; line-height:1.9; }
.rs-article .art-caselabel{ display:inline-block; font-family:"Hiragino Mincho ProN",serif; letter-spacing:.1em; color:#fff; background:#c0757e; border-radius:4px; padding:4px 14px; font-size:14px; margin:8px 0 0; }
.rs-article .art-medialink{ text-align:right; margin:0 0 24px; }
.rs-article .art-medialink a{ color:#c0757e; font-weight:bold; }
.rs-article .art-cta{ text-align:center; margin:48px 0 6px; }
.rs-article .art-btn{ display:inline-block; padding:15px 36px; border-radius:30px; background:#c0757e; color:#fff; text-decoration:none; font-size:16px; transition:.2s; }
.rs-article .art-btn:hover{ background:#a85f68; }
@media (max-width:768px){
  #content .rs-article .art-title{ font-size:22px; }
  .rs-article .art-lead{ font-size:15px; }
  #content .rs-article h3{ font-size:18px; }
  .rs-article .art-btn{ display:block; }
}