/* tcscss1.css   */
/* path ① start */
.menu-subcs {
  display: block;
  background-image: url("../img/icons/icon1_png/banner_1Q_01_01.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 60px;  		/* 画像の幅に合わせて調整 */
  line-height: 40px;   		/* 高さの調整、必要に応じて */
  text-decoration: none;
  color: black;} 		/* 必要に応じて色指定 */

.menu-subfd {
  display: block;
  background-image: url("../img/icons/icon1_png/banner_1Q_01_02.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 60px;
  line-height: 40px;
  text-decoration: none;
  color: black;}

.menu-support {
  display: block;
  background-image: url("../img/icons/icon1_png/banner_1Q_01_03.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 60px;
  line-height: 40px;
  text-decoration: none;
  color: black;}
	
/*   path ② start */
.logo-link {
  display: inline-block; 	/* 背景画像が見えるように */
  background-image: url("../img/icons/icon1_png/logo_1Q.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 60px; 		/* ロゴ画像の幅に合わせて調整 */
  height: 50px;        		/* 必要に応じて高さ指定 */
  line-height: 50px;   		/* テキスト垂直位置を合わせるため */
  color: #006699;      		/* リンクの文字色など必要なら */
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;}

.logo-link {
  display: inline-block;
  width: 300px;                       	/* 必要に応じてロゴ画像の幅に合わせて調整 */
  height: 80px;                       	/* ロゴ画像の高さに合わせて調整 */
  background-image: url(../img/icons/icon1_png/logo_1Q.png);
  background-repeat: no-repeat;
  background-size: contain;          	/* ロゴ全体が表示されるようにする */
  background-position: left center;
  text-indent: -9999px;              	/* テキストを非表示にする場合 */
  border: none;}

/*   path ③ start */
#hpb-headerLogo .logo-link {
  display: inline-block;
  background-image: url("logo_1Q.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 70px; 			/* ロゴの横幅に合わせて調整 */
  height: 50px;
  line-height: 50px;
  color: #006699;
  text-decoration: none;
  font-weight: bold;}

.logo-link {	
  display: inline-block;	
  color: #006699;	
  background-image: url("../img/icons/icon1_png/lgmn_hdr1_01.png");
  background-repeat: no-repeat;	
  background-position: left center;	
  padding-left: 60px;	
  height: 50px;	
  line-height: 50px;	
  text-decoration: none;	
  font-weight: bold;}
/* body {background-color: yellow;} */		/* ③ pass */

/*   path ④ start */
#hpb-headerLogo .logo-link {
  display: inline-block;
  background-image: url("../img/icons/icon1_png/lgmn_hdr1_01.png"); /* ←ここにまとめて入れる */
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 70px; 			/* ロゴの横幅に合わせて調整 */
  height: 50px;
  line-height: 50px;
  color: #006699;
  text-decoration: none;
  font-weight: bold;}

/* path ⑤ start */
.menu-list li a {
  display: block;
  width: 300px; 		/* 必要に応じて調整 		*/
  height: 80px;  		/* 背景画像に合わせて調整 	*/
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover; 	/* 画像サイズに合わせて必要なら contain や auto に 	*/
  text-indent: -9999px; 	/* テキストを非表示にする場合 				*/
  border: none;}
.menu-subcs    { background-image: url(../img/icons/icon1_png/banner_1Q_01_01.png); }
.menu-subfd    { background-image: url(../img/icons/icon1_png/banner_1Q_01_02.png); }
.menu-support  { background-image: url(../img/icons/icon1_png/banner_1Q_01_03.png); }

.business-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px 20px;				/* 中身に余裕を持たせて読みやすく */
  width: fit-content;				/* 内容に合わせてちょうどよいサイズ感 */
  max-width: 100%;
  background-color: #fdfdfd;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);	/* 名刺らしい縁取りと立体感 */
  font-family: "HG丸ｺﾞｼｯｸM-PRO", sans-serif;	/* 和文フォント指定、なければ sans-serif にフォールバック */
  margin: 20px auto;}

/*  path ⑥ start */
.menu-subcs, .menu-subfd, .menu-support {
  display: block;
  width: 300px;
  height: 80px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  text-indent: -9999px;}   	/* 必要なら削除してよい */

/*  path ⑦ start */
.menu-list li a {
  display: block;
  width: 300px; 		        /* 必要に応じて調整 */
  height: 80px;  		        /* 背景画像に合わせて調整 */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover; 		/* 必要なら contain や auto に */
  text-indent: -9999px; 	        /* テキストを非表示にする場合 */
  border: none;}

.menu-subcs   { background-image: url("../img/icons/icon1_png/banner_1Q_01_01.png"); }
.menu-subfd   { background-image: url("../img/icons/icon1_png/banner_1Q_01_02.png"); }
.menu-support { background-image: url("../img/icons/icon1_png/banner_1Q_01_03.png"); }

/* ================================================================== */

/*   path ⑧ start  */
.business-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px 20px;				/* 中身に余裕を持たせて読みやすく */
  width: fit-content;				/* 内容に合わせてちょうどよいサイズ感 */
  max-width: 100%;
  background-color: #fdfdfd;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);	/* 名刺らしい縁取りと立体感 */
  font-family: "HG丸ｺﾞｼｯｸM-PRO", sans-serif;	/* 和文フォント指定、なければ sans-serif にフォールバック */
  margin: 20px auto;}

/*   path ⑨ start */
.company-name {
  font-size: 10px;				/* 16px */
  font-weight: bold;
  color: #2e7d32; /* 深めの緑 */
  margin-bottom: 10px;}

.contact-info {
  font-size: 10px;				/* 14px */
  color: #333;
  line-height: 1.6;}

.contact-info a {
  color: #006699;
  text-decoration: none;}

.contact-info a:hover {
  text-decoration: underline;}

/* ================================================================== */

//   path ➉ start
.product-link{
  font-size: 20px;
  font-family: "AR丸ゴシック体M", sans-serif;
  font-weight: bolder;}

.company-name {			// 再利用可能なクラス名として設定（idはそのままでもOK）
  font-size: 12px;
  font-family: "AR丸ゴシック体M", sans-serif;	
  font-weight: bolder;
  color: green;
  text-align: left;		// 通常はデフォルトですが、明示的に指定されているので維持
p {
  font-size: 12px;
  font-family: sans-serif;
  line-height: 1.6;}
a {
  color: #006699;
  text-decoration: none;}
a:hover {
  text-decoration: underline;}}

//   path ⑪ start 
.company-name {					// 再利用可能なクラス名として設定（idはそのままでもOK）
  font-size: 12px;
  font-family: "AR丸ゴシック体M", sans-serif;   // "HG丸ｺﾞｼｯｸM-PRO" なければ sans-serif にフォールバック 
  font-weight: bolder;
  color: green;
  text-align: left;}				// 通常はデフォルトですが、明示的に指定されているので維持 

#banner-recruit {
  display: inline-block;
  width: 200px;
  height: 50px;
  background-image: url("../img/icons/icon1_png/banner_1Q_01_021.png");　
  background-repeat: no-repeat;
  background-size: contain;}

// Landing Page 
.icon-links {
  display: flex;
  gap: 10px; 			// 画像どうしの間隔 
  justify-content: center; 	// 中央寄せ（必要に応じて変更可） 
  margin: 20px 0;}

.icon-links a img {
  width: 60px;
  height: 60px;
  border: none;         	// border="0" の代替 
  display: inline-block;
  transition: transform 0.2s ease;}

.icon-links a img:hover {transform: scale(1.3);}	// コメントできない ! ☆★

// メインの見出し部分

.header-title {
  font-size: 13px;
  font-weight: bold;
  color: green;
  margin: 0;
  padding: 0;}



// 追加のヘッダー要素（必要に応じてスタイル調整） 
#hpb-headerExtra1 {
  margin-top: 10px;}

.timeline dl {
  margin: 20px auto;
  padding: 20px;
  max-width: 600px;
  background-color: #fdfdfd;
  border-left: 4px solid #006699;
  font-family: "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
  color: #333;}

.timeline dt {
  font-weight: bold;
  font-size: 16px;
  margin-top: 20px;
  color: #006699;
  position: relative;}

.timeline dd {
  margin-left: 0;
  padding-left: 1em;
  font-size: 15px;
  line-height: 1.6;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 8px;}

.dm-message {
  background-color: #f9f9f9;
  border-left: 6px solid #006699;
  padding: 20px;
  margin: 20px auto;
  max-width: 600px;
  font-family: "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
  color: #333;
  line-height: 1.8;
  font-size: 16px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);}

.dm-message p {
  margin-bottom: 1em;}

.hover-link {
  color: white;               	// 白文字に設定 
  background-color: #0066cc;    // 青背景 
  padding: 10px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;}   // なめらか変化 

.hover-link:hover {
  background-color: #004080;    // hover時は濃い青 
  color: #ffff99;}              // 黄色っぽくして視認性UP 

// 通常状態 
.hover-link {
  color: white;
  background-color: #0066cc;
  padding: 10px;
  text-decoration: none;
  display: inline-block;}

// hover状態（マウスを乗せたとき） 
.hover-link:hover {
  background-color: #004080; 	// 少し濃い青に変化 
  color: #ffff99;}           	// 黄色っぽい文字色に変化 

// 共通設定：リストの見た目リセット 
#banner-list {
  list-style: none;
  padding: 0;}

#banner-list li {
  margin: 10px 0;}

// サービス／製品一覧のバナー
#banner-service {		
  display: block;		
  background-image: url("banner_1Qb_01_0111.png");		
  background-repeat: no-repeat;		
  background-size: cover; 	// 必要に応じて調整
  color: white;		
  padding: 10px;		
  font-size: 20px;}

// 採用情報
#banner-recruit {
  display: inline-block;
  width: 200px;               	// 必要に応じて調整
  height: 50px;
  background-image: url("../img/icons/icon1_png/banner_1Q_01_021.png");
  background-repeat: no-repeat;
  background-size: contain;
  banner_1Q_01_021.png}

// アクセス
#banner-access {
  display: block;
  background-color: #009933;
  color: white;
  padding: 20px;
  font-size: 24px;
  text-decoration: none;}

.vision-section {
  background-color: #f5f9f7;
  border-left: 8px solid #007c4d;
  padding: 2em;
  margin: 2em 0;
  font-family: "HG丸ｺﾞｼｯｸM-PRO", sans-serif;
  color: #333;
  line-height: 1.8;}

.vision-section h2 {
  font-size: 24px;
  color: #007c4d;
  margin-bottom: 1em;}

.vision-section p {
  margin-bottom: 1em;
  font-size: 16px;}

.vision-date {
  text-align: right;
  color: #666;
  font-size: 14px;
  font-style: italic;}

#hpb-nav {
  padding: 1em;}

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

#hpb-nav li {
  margin-bottom: 0.5em;}

#hpb-nav a {
  text-decoration: none;
  display: inline-block;}

.nav-label {
  font-size: 16px;
  font-family: "HG丸ｺﾞｼｯｸM-PRO", sans-serif;
  font-weight: bolder;
  color: green;
  margin-right: 0.5em;}

.en {font-size: 0.9em;color: #555;}

//   path ⑫ start

.product-description {
  max-width: 800px;
  margin: 2em auto;
  padding: 1.5em;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: "Hiragino Sans", "Meiryo", sans-serif;
  line-height: 1.8;}

.product-description h2 {
  font-size: 1.5em;
  color: #333;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.3em;
  margin-bottom: 1em;}

.product-description p {
  font-size: 1em;
  color: #555;
  margin-bottom: 1em;}

//  先頭キャッチコピー

.tcs-description {
  font-size: 20px !important;
  font-family: "AR丸ゴシック体M", sans-serif;
  font-weight: bolder;
  color: red;






// 共通スタイル
.catchcopy {
  color: white;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
  background-image: url(...);}

    .catchcopy {
      word-break: break-word;
      white-space: normal;
      background-size: cover;
      background-position: center;
      color: gray;			// ☆ white
      padding: 40px;
      border-radius: 12px;
      text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
      font-size: 1.5em;
      max-width: 900px;
      margin: 40px auto;
      line-height: 1.6;
      text-align: center;}

// 各リストアイテム
.nav-menu li {}

// リンク全体の見た目
.nav-menu li a {
  text-decoration: none;
  display: flex;
  flex-direction: column;  		// 日本語と英語を縦に並べる 
  align-items: center;}

//   path ⑬ start

.menu-list li a {        		// 全体スタイルを柔軟に調整しやすくなります（例：横並びなど）
  display: block;
  width: 300px;          		// 必要に応じて調整してください
  height: 80px;          		// 背景画像サイズに応じて調整してください
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;		// 背景画像を全面に表示
  border: none;
  transition: 0.3s ease; 		// ホバー時のアニメーション
  filter: brightness(100%);}

// 個別バナー画像指定
.menu-subcs {background-image: url(../img/icons/icon1_png/banner_1Q_01_01.png);}
.menu-subfd {background-image: url(../img/icons/icon1_png/banner_1Q_01_02.png);}
.menu-supms {background-image: url(../img/icons/icon1_png/banner_1Q_01_03.png);}

// ホバー効果：画像を少し暗くする 
.menu-list li a:hover {
  filter: brightness(80%);
  cursor: pointer;}

// (2) 少し拡大 
.hover-scale:hover {
  transform: scale(1.05);         	// 少し拡大 
  cursor: pointer;}

// (3) 枠線を出す 
.hover-border:hover {			// 枠線を出す 
  outline: 3px solid #3399cc;
  outline-offset: 2px;
  cursor: pointer;}

// (4) 初期状態はテキスト表示 
.hover-text {
  text-indent: 0;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
  background-color: rgba(0, 0, 0, 0.4);} 	// 背景の透明黒 

// ホバーで強調表示 
.hover-text:hover {
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffcc00;
  text-shadow: 1px 1px 2px black;	//  テキストが浮かび上がる  
  cursor: pointer;}

// クラス名を組み合わせることで柔軟に適用可能です。 
// たとえば1つのバナーに hover-darken hover-border のように複数同時に指定も可能です。 
// テキスト効果の .hover-text は text-indent: -9999px; を無効化して、中央に表示させています。 

//   path ⑭ start 
#hpb-headerLogo {
  // 必要に応じてレイアウト調整 
  padding: 10px;}

// ロゴ画像とリンク設定 
.logo-link {
  display: inline-block;
  width: 300px;                      	// ロゴ画像の幅に合わせて調整 
  height: 80px;                      	// ロゴ画像の高さに合わせて調整 
  background-image: url(logo_1Q.png); 	// パスはHTMLから見た相対パスで 
  background-repeat: no-repeat;
  background-size: contain;         	// ロゴ全体が見えるように 
  background-position: left center;
//  text-indent: -9999px;             	// テキストを隠す場合 
  border: none;}

//   path ⑮ start 
.logo-link {
  display: block;
  width: 300px;
  height: 80px;
  background-image: url("../img/icons/icon1_png/logo_1Q.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-indent: -9999px;} 		// テキストを隠すなら 

//body {background-color: brown;} 	// ⑭ pass