/******************************
共通設定 （20260313_nakamura）
******************************/
:root {
    --main-clr: #1e4ba0;
    --sub-clr: #f4f6f9;
    --accent-clr: #F7BB00;
    --member-clr: #D90000;
	--ind-clr: #DA9C2B;
	--font-mincho: "Noto Serif JP", "YuMincho", "Yu Mincho", "游明朝体", serif;
    --content-inner: min(100%, 1170px);
    --txt-cmn: var(--size-15-17);
    --txt-cmn-s: var(--size-14-16);
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
	background-color: none;
	figure, img {
		margin: initial;
		background-color: initial;
		border: initial;
	}
	ul, li {
		list-style: none;
	}
}
/******************************
コンテンツ全体
******************************/
.content {
	padding: var(--size-20-40) 0 0;
	margin: 0 auto;
	/* タイトル */
	.content-ttl {
		position: relative;
		text-align: center;
		margin: 0 auto var(--size-50-70);
		padding: 0 10px;
		font-size: clamp(25px, 13.636px + 3.03vw, 50px);
		font-weight: 700;
		line-height: 1.6;
		/* セレクタ展開: .section-title .small-text */
		.small-text {
			display: block;
			font-size: 0.6em;
		}
		&::before {
			content: "";
			width: 100px;
			/* 線の長さ */
			height: 5px;
			/* 線の太さ */
			bottom: -15px;
			/* 線の縦の開始位置 */
			left: 50%;
			border-radius: 50vh;
			transform: translateX(-50%);
			position: absolute;
			background: var(--accent-clr);
		}
		&.sub {
			font-size: calc(clamp(25px, 13.636px + 3.03vw, 50px) * 0.95);
		}
	}
	.content-lead {
		font-size: var(--size-16-18);
		text-align: center;
		margin: 0 auto;
		padding: 0 10px var(--size-30-50);
		line-height: 1.6;
	}
	&.sub {
		font-size: 
	}
}

/******************************
ナビゲーション
******************************/
.industry-anchor-nav {
	background: #f7f8f9; /* 画像の下部メニュー風の薄いグレー */
	width: min(100%, 1200px);
	padding: var(--size-30-40);
	border-radius: 10px;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.02); /* 微かな凹み効果 */
	.nav-ttl {
		font-size: var(--size-18-24);
		font-weight: 600;
		margin-bottom: var(--size-20-30);
		text-align: center;
	}
	.anchor-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		width: min(100%, 1000px);
		margin: 0 auto;
		gap: var(--size-15-30);
		li {
			a {
				position: relative;
				color: inherit;
				display: block;
				padding: var(--size-10-15) var(--size-10-15) var(--size-10-15) 50px;
				border: 2px solid rgb(from var(--ind-clr) r g b / 0.8);
				border-radius: 6px; /* 画像の控えめな角丸 */
				line-height: 1.5;
				
				background: #fff;
				transition: all 0.3s ease;
				.company-name {
					position: absolute;
					top: -20px;
					left: -15px;
					display: inline-block;
					place-content: center;
					background: var(--ind-clr);
					width: 60px;
					object-fit: cover;
					aspect-ratio: 1 / 1;
					border-radius: 50vh;
					color: #fff;
					font-size: var(--size-16-18);
					font-weight: 600;
					text-align: center;
					&::first-letter {
						font-size: 1.3em;
						margin-right: .05em;
					}
				}
				.company-request {
					font-size: var(--size-13-15);
					color: #555;
					margin: 0;
					line-height: 1.6;
				}
				&:hover {
					background: rgb(from var(--ind-clr) r g b / 0.8);
					.company-request {
						color: #fff;
					}
				}
			}
		}
		@media screen and (max-width: 767px) {
			display:flex;
			flex-direction: column;
			.company-name {
				top: 50% !important;
				transform: translateY(-50%);
				width: 50px !important;
			}
		}
	}
}
/******************************
本文
******************************/
.main-content {
	display: flex;
	flex-direction: column;
	gap: var(--size-30-50);
	width: min(calc(100% - 30px), 1200px);
	margin: 0 auto;
	/* 2. 事例詳細リスト (白背景カードの並び) */
	.industry-list {
		display: flex;
		flex-direction: column;
		gap: var(--size-30-40);
		margin: 0 auto var(--size-50-70);

		.industry-card {
			background: #fff;
			border: 1px solid #ddd; /* 非常に薄い境界線 */
/* 			padding: var(--size-15-30); */
			display: flex;
			flex-direction: column;
/* 			gap: var(--size-15-20); */
			box-shadow: 0 1px 4px rgba(0,0,0,0.03); /* 画像にある非常に微細なシャドウ */
			transition: all 0.3s ease;
			scroll-margin-top: 200px; /* ページ内リンクジャンプ時のヘッダー余白 */
			box-shadow: 0px 0px .5vh 0px rgba(0, 0, 0, 0.1);
			p, dd {
				font-size: var(--size-15-17);
				line-height: 1.6;
			}
			.company-name {
				font-size: var(--size-18-24);
				margin-bottom: 10px;
				color: #333;
				margin: 0 var(--size-15-30);
				padding: var(--size-20-30) 0;
				border-bottom: 2px solid #ddd;
				span {
					font-size: 1.5em;
                    margin-right: .05em;
				}
			}
			.label {
				display: block;
				color: #666;
				margin-bottom: var(--size-10-15);
				font-weight: 600;
				text-transform: uppercase;
				font-size: var(--size-15-17);
			}
			[class$="-section"] {
				padding: var(--size-15-30);
			}

			/* アイキャッチ画像エリア */
			.card-image img {
				width: 100%;
				height: 200px;
				object-fit: cover;
				border-bottom: 1px solid #f0f0f0;
			}

			/* 従業員数・売上高 (画像のテーブル風デザイン) */
			.company-section {
				display: flex;
				flex-direction: column;
				gap: 10px;
				.company-block {
					display: flex;
					flex-wrap: wrap;
					align-items: baseline;
					gap: 10px;
					dt {
						color: #666;
						font-weight: 600;
					}

					dd {
						margin-right: 15px;
						color: #666;
						.industry-tags {
							padding: 0;
							margin: 0;
							display: flex;
							flex-wrap: wrap;
							gap: 10px;

							li {
								background: #f0f2f5;
								color: #4a5568;
								font-size: 0.95em;
								padding: 4px 10px;
								border-radius: 3px;
							}
						}
					}
				}
			}
			.problem-section {
				margin: 0 var(--size-10-20);
				padding: var(--size-15-20);
				border: 1px solid #999;
				background: #fafafa;
				p {
					font-size: var(--size-14-16);
				}
			}
			.industry-section {
				margin: 0 auto;
				padding: var(--size-10-20) 0;
				figure {
					padding: var(--size-15-20);
					margin: 0 auto;
					width: min(100%, 940px);
					img {
						width: 100%;
					}
				}
			}
			.roblem-section {
				background: rgb(from var(--ind-clr) r g b / 0.1);
				padding: var(--size-20-30);
			}
			.system-section {
				.figure-block {
					display: flex;
					flex-wrap: wrap;
					gap: var(--size-5-10);
					li {
						border: 3px solid #fff;
						border-radius: 6px;
						a {
							position: relative;
							top:0;
							background: #fff;
							transition: 0.3s ease-out;
							display: grid;
							place-content: center;
							border: 1px solid #aaa;
							border-radius: 3px;
							width: auto;
							height: calc(var(--size-30-40) + var(--size-5-10));
							padding: 5px 0;
							border: 1px solid #aaa;
							border-radius: 3px;
							object-fit: cover;
							aspect-ratio: 3 / 1;
							figure {
								img {
									height: var(--size-30-40);
								}
							}
						}
						&:hover {
							border-color: rgb(from var(--main-clr) r g b / 0.85);
							a {
								/* 					top: -2px; */
								background: rgb(from var(--main-clr) r g b / 0.06); 
								box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
								border-color: #9c9b8a;
							}
						}
					}
				}
			}
		}
	}
}

/******************************
サブコンテンツ
******************************/
.sub-content {
	padding: var(--size-50-70) 0;
}


/******************************
導入企業様
******************************/

.install-section {
	background: #eee;
}

/* 導入企業クロール（スライダー構成） */
/* 外側の親：画面幅からはみ出す分を隠す */
.media_wrap {
	display: flex;
    flex-direction: column;
	gap: var(--size-20-30);
	overflow: hidden;
	width: 100%;
	background: #fff;
	padding: var(--size-30-50);

  /* スライダーの土台 */
  .media_list_wrap {
    display: flex;
/*     margin: 0.6rem 0; */
    position: relative;

    /* 横一列に並べるためのコンテナ */
    .media_slider {
      display: flex;
      width: max-content;
    }

    /* 動くリスト本体 */
    .media_list {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      padding: 0;
      margin: 0;
      list-style: none;
      /* 基本のアニメーション（左へ） */
      animation: scroll-left 45s linear infinite;
      will-change: transform;

      li {
        flex: 0 0 auto;
        margin: 0 .5rem;
        img {
          height: 70px;
          width: auto;
          object-fit: contain;
          display: block;
        }
      }
    }

    /* 逆方向（reverseクラスがついている場合） */
    &.reverse {
      .media_list {
        /* アニメーション名だけを上書き */
        animation-name: scroll-right;
      }
    }
  }
}

/* アニメーション定義（ここはネストの外に出す） */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* レスポンシブ */
@media (max-width: 768px) {
  .media_wrap {
    .media_list_wrap {
      .media_list {
        animation-duration: 45s;
        li img {
			height: 50px;
        }
      }
    }
  }
  .media_title {
    font-size: 1.4rem;
    .badge {
      font-size: 1.2rem;
      padding: 0.2rem 0.6rem;
    }
  }
}

/******************************
その他の業種
******************************/
.comp-section {
	.card-grid {
		display: flex;
		flex-wrap: wrap;
		place-content: center;
		justify-content: center;
		gap: var(--size-10-20);
		li {
			width: min(30%, 150px);
			a, .current-term {
				position: relative;
				display: block;
				height: auto;
				aspect-ratio: 1 / 1;
				text-align: center;
				font-size: var(--size-15-17);
				border-radius: 8px;
				font-weight: bold;	
			}
			a {
				background: rgb(from var(--ind-clr) r g b / 0.8);
				border-bottom: solid 3px var(--ind-clr);
				box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), 0 2px 3px rgba(0, 0, 0, 0.19);
				color: #fff;
				&:hover {
					opacity: .75;
				}
			}
			.ico_ttl {
				padding-top: var(--size-10-15);
				margin: 0;
				/* 			height: var(--size-20-30); */
			}
			img {
				position: absolute;
				top: var(--size-30-40);
				left: 50%;
				transform: translateX(-50%);
				width: 70%;
			}
			.current-term {
				background: #ede7d1;
				border: solid 2px rgb(from var(--ind-clr) r g b / 0.8);
				color: rgb(from var(--ind-clr) r g b / 0.8);
				img {
					filter: brightness(0) saturate(100%) invert(90%) sepia(94%) saturate(6930%) hue-rotate(305deg) brightness(99%) contrast(86%);
				}
			}
			
		}
	}
}

/******************************
動画表示
******************************/
.video-section {
	display: grid;
	background-image: linear-gradient(0deg, rgba(75, 75, 75, 1), rgba(0, 0, 0, 1));
	iframe {
		width: min(calc(100% - 30px), 800px);
		margin: 0 auto;
		aspect-ratio: 16 / 9;
		position: relative;
		border-radius: 8px;
		overflow: hidden;
		border: 1px solid #999;
	}
}

/*
|--------------------------------------------------------------------------
| Seminar Horizontal Slide Section (自動カルーセル)
|--------------------------------------------------------------------------
*/
.seminar-area {
	overflow: hidden;
	/* 		background: rgb(from var(--accent-clr) r g b / 0.1); */
	background-image: repeating-linear-gradient(-45deg, var(--sub-clr), var(--sub-clr) 2px, transparent 2px, transparent 6px);

}

.seminar-slide-wrapper {
	/* 左右に見切れるようにパディングはつけず、画面幅いっぱいを使う */
	padding: 0;
}

.seminar-track {
	display: flex;
	/* スライド6枚分 (220px + 20px) * 6 = 1440px */
	animation: seminar-scroll 60s linear infinite;
	white-space: nowrap;

	&:hover {
		animation-play-state: paused;
	}
}

.seminar-card {
	flex-shrink: 0;
	width: 240px;
	/* カードの幅を固定 */
	height: auto;
	margin-right: 20px;
	/* カード間の間隔 */
	background-color: white;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	display: inline-block;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	white-space: normal;

	@media (max-width: 768px) {
		width: 200px;
		margin-right: 10px;
	}

	.card-image-placeholder {
		width: 100%;
		height: 125px;
		display: flex;
		overflow: hidden;
		border-bottom: 1px solid #ddd;
		img {
			object-fit: cover;
/* 			aspect-ratio: 16 / 9; */
		}
	}

	.card-body {
		padding: 10px;

		.meta-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 5px;
		}

		.seminar-tag {
			background-color: #e5004f;
			/* 赤系のタグ */
			color: white;
			font-size: 0.7rem;
			font-weight: bold;
			padding: 3px 6px;
			border-radius: 2px;
			flex-shrink: 0;
		}

		.date {
			font-size: 0.7rem;
			color: #888;
			flex-shrink: 0;
		}

		.card-title {
			font-size: 0.85rem;
			line-height: 1.4;
			color: #333;
			/* 2行表示に制限 */
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			height: 4.2em;
		}
	}
}

/* --------------------------------------------------------------------------
Keyframes for PC/Desktop (4枚分移動)
-------------------------------------------------------------------------- */
@keyframes scroll-testimonial-pc {
    from {
        transform: translateX(0);
    }

    to {
        /* 4枚分の幅を正確に移動: (320px * 4) + (20px * 4) = 1360px */
        transform: translateX(-1360px);
    }
}
/* 自動スライドのためのKeyframesアニメーション (セミナー) */
@keyframes seminar-scroll {
    from {
        transform: translateX(0);
    }

    to {
        /* 6枚分の幅 (220px * 6 + 20px * 6 = 1440px) を正確に移動 */
        transform: translateX(-1440px);
    }
}


/******************************
ナビゲーションのページ内スクロール
******************************/
/* スムーズスクロール (任意) */
html {
	scroll-behavior: smooth;
}