// 【snts_styl.css】sentence style.css  

// ボタンリストの全体設定 

.product-button-list {		// Landing Button 
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;}

// 共通ボタンスタイル 

.btn-product {			
  display: inline-block;
  width: 200px;			// 200px button width
  height: 40px;			// 40px
  line-height: 40px;		// 40px
  text-align: center;
  font-size: 14px;
  color: #006699;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  border-radius: 6px;		// 6px
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;}

// ホバー効果 

.btn-product:hover {		// (cs/fd/pp/ms) button 
  transform: scale(1.05);	// (1.05)
  box-shadow: 0 0 8px rgba(0,0,0,0.3);}

// 各種ボタンの背景画像 

/* =====================================
.btn-cs { background-image: url(img/icons/icon1_png/bnr_cs01.png); }
.btn-fd { background-image: url(img/icons/icon1_png/bnr_fd01.png); }
.btn-pp { background-image: url(img/icons/icon1_png/bnr_pp01.png); }
.btn-ms { background-image: url(img/icons/icon1_png/bnr_ms01.png); }
======================================== */

.highlight-message {			// message を薄いﾌﾞﾙｰで囲みわくを設定 ★無効
  background-color: red;		// #f5faff
  border: 2px solid blue;		// #cce5ff
  padding: 20px;
  border-radius: 10px;
  font-family: "Segoe UI", "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: red;				// #333 ★無効
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);}

.highlight-message p {margin-bottom: 1em;text-align: justify;}

.lead-message {
  font-size: 18px;
  font-family: "HG丸ｺﾞｼｯｸM-PRO", "メイリオ", sans-serif;
  font-weight: bold;
  color: green;
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;}

// 見出しの装飾 

.nav-heading {
  font-size: 40px;		// 20px
  font-weight: bold;
  color: red;		// #003366
  margin-bottom: 1em;font-family: "メイリオ", "ヒラギノ角ゴ ProN", sans-serif;}

// ナビ全体のリスト 

.nav-list {list-style: none;padding: 0;margin: 0;}

// 各項目リンク 

.nav-list li {margin-bottom: 0.5em;}

// 日本語ラベル（緑・太字） 

.nav-ja {
  font-size: 16px;					// 16px ☆
  font-family: "HG丸ｺﾞｼｯｸM-PRO", "メイリオ", sans-serif;
  font-weight: bold;
  color: blue;}						// green ☆

// 英語ラベル（補足的に小さめ） 
.nav-en {
  font-size: 13px;
  color: #555;
  margin-left: 0.5em;}


// リスト全体の見た目調整 
// id はそのまま維持（JSやアンカー用に利用する場合）
// .banner-link は共通の装飾をまとめて管理
//.banner-cs などで背景画像を個別指定
// hover 効果でボタン感・動きのある印象

.banner-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;}

// 各バナーリンクの共通スタイル 

.banner-link {
  display: inline-block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  font-family: "メイリオ", "ヒラギノ角ゴ ProN", sans-serif;
  font-weight: bold;
  color: #006699;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  transition: transform 2.3s ease, box-shadow 2.3s ease;} /* 0.3s 0.3s */

// マウスオーバーで浮き上がる演出 

.banner-link:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}

// 個別バナーの背景画像 

/* ===================================
.banner-cs { background-image: url(img/icons/icon1_png/bnr_cs01.png); }
.banner-fd { background-image: url(img/icons/icon1_png/bnr_fd01.png); }
.banner-pp { background-image: url(img/icons/icon1_png/bnr_pp01.png); }
.banner-ms { background-image: url(img/icons/icon1_png/bnr_ms01.png); }
====================================== */

// --- Product --- 

.banner-heading {
  font-size: 12px;
  font-family: "HG丸ｺﾞｼｯｸM-PRO", sans-serif;
  font-weight: bold;
  color: green;
  background-image: url("img/icons/icon1_png/bnr_ms01.png");
  background-repeat: no-repeat;
  background-size: contain;
  text-align: left;
  padding-left: 1.5em; 	// 背景画像が左に来ると想定した余白調整 
  line-height: 1.5;
  min-height: 32px;} 	// 画像高さに応じて調整 


// ▲　郵便物の減少が進む一方で、 ................. 顧客の興味を引く効果的な手段となります。

//💡 淡いブルーの背景と枠線で清潔感・信頼感を演出
//💬 **一文ごとに段落化（<p>）**して読みやすさ向上
//🎯 フォントと行間調整で、ビジネス文書らしい品位を確保
//🧱 角丸＋影で立体感と軽快さを付与

.highlight-message {
  background-color: red;		// #f5faff	★無効
  border: 2px solid blue;		// #cce5ff
  padding: 20px;
  border-radius: 10px;
  font-family: "Segoe UI", "ヒラギノ角ゴ ProN", "メイリオ", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: red;				// #33	★無効
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);}

.highlight-message p {
  margin-bottom: 1em;
  text-align: justify;}


// ▲　"デジタル化の深化にすばやく柔軟に対応し、新ビジネスモデルを提案する、機動力のある企業です。"

.lead-message {
  font-size: 18px;
  font-family: "HG丸ｺﾞｼｯｸM-PRO", sans-serif;
  font-weight: bold;
  color: green;
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;}