@charset "utf-8";

/* ロボット動画集 
---------------------------------------------------------*/
.movieBox {
	overflow: hidden;
}

.movie_tool_list {
	position: relative;
	width: min(100%, 820px);
	height: 680px;
	margin: 20px auto 74px;
}

/* 中央の薄いロボット画像
--------------------------------------------------------- */

.movie_tool_list::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	width: clamp(360px, 55%, 520px);
	aspect-ratio: 1 / 1;
	background: url("../../img/member/member_icon.png") center center / contain no-repeat;
	opacity: 1;
	transform: translate(-63%, -50%) rotate(-22deg);
	pointer-events: none;
}
.movie_tool_list::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 430px;
	right: 50px;
	width: 160px;
	aspect-ratio: 1 / 1;
	background: url("../../img/member/member_icon.png") center / contain no-repeat;
	opacity: 1;
	transform: rotate(18deg);
	pointer-events: none;
}

.movie_tool_list .icon {
	position: absolute;
	top: 80px;
	left: 395px;
	width: 140px;
	aspect-ratio: 1;
	background: url("../../img/member/member_icon.png") center/contain no-repeat;
	transform: rotate(4deg);
	z-index: 1;
	pointer-events: none;
}

/* 円形ボタン
--------------------------------------------------------- */

.movie_tool_btn {
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;

	box-sizing: border-box;
	padding: 25px;

	background: #fff;
	border: 2px solid #e3e3e3;
	border-radius: 50%;

	box-shadow:
		2px 5px 5px rgba(0, 0, 0, 0.25),
		inset -3px -3px 4px rgba(0, 0, 0, 0.08);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.movie_tool_btn:hover {
	transform: translateY(-5px);
	box-shadow:
		3px 9px 10px rgba(0, 0, 0, 0.28),
		inset -3px -3px 4px rgba(0, 0, 0, 0.08);
}

.movie_tool_btn img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media screen and (min-width: 769px) and (max-width: 830px) {
	.movie_tool_list .icon {
		top: 75px;
		left: 365px;
	}
}
@media screen and (min-width: 768px) and (max-width: 768.9px) {
	.movie_tool_list {
		margin: 54px auto;
	}
	.movie_tool_list .icon {
		top: 75px;
		left: 340px;
	}
}
@media screen and (max-width: 767px) {
	.movie_tool_list::before {
		top: 10%;
		left: 59%;
		width: clamp(90px, 30%, 490px);
	}
	.movie_tool_list::after {
		top: 420px;
		right: 105px;
	}
	.movie_tool_list .icon {
		top: 300px;
		left: -15px;
		width: 90px;
		transform: rotate(-23deg);
	}
}

/* 各ボタンの配置
--------------------------------------------------------- */
.movie_tool_btn {
	position: absolute;
	width: 188px;
	height: 188px;
}

/* 左上：NX-Pro */
.movie_tool_nxpro {
	top: 20px;
	left: 140px;
}

/* 右上：TKC */
.movie_tool_tkc {
	top: 20px;
	right: 140px;
}

/* 右中央：JDL */
.movie_tool_jdl {
	top: 245px;
	right: 15px;
}

/* 右下：ASIMOV Original */
.movie_tool_original {
	right: 140px;
	bottom: 10px;
}

/* 左下：日本ICS */
.movie_tool_ics {
	left: 140px;
	bottom: 10px;
}

/* 左中央：達人 */
.movie_tool_tatsuzin {
	top: 245px;
	left: 15px;
}

/* ロゴごとの大きさ調整
--------------------------------------------------------- */
.movie_tool_list img {
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 767px) {
	.movie_tool_list {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 0px;
		width: 100%;
		height: auto;
		padding: 5px 0;
		justify-items: center;
		align-items: center;
	}

	.movie_tool_btn {
		position: static;
		width: 140px;
		height: 140px;
		margin: 0;
	}
}

/* 各ツールページ 
---------------------------------------------------------*/
.page_head.tool {
	display: none;
}
.tool_logoBOX {
	display: block;
	padding-top: 220px;
	margin: 0 auto -40px auto;
	text-align: center;
	overflow: hidden; /* はみ出し防止 */
}

.tool_logo_inner {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.tool_logo_inner::before, .tool_logo_inner::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 100vw; /* ブラウザ端まで届くよう十分な長さにし、.tool_logoBOXのoverflow:hiddenで端でクリップさせる */
	height: 25px;
	background: #c2e1d2;
	transform: translateY(-50%);
}

.tool_logo_inner::before {
	right: 100%;
	margin-right: 20px;
}

.tool_logo_inner::after {
	left: 100%;
	margin-left: 20px;
}

.tool_logo_inner img {
	width: 250px;
	max-width: 70vw; /* スマホ時縮小 */
	height: auto;
	display: block;
}

.tool_movie_thumb {
	position: relative;
	border: 1px solid #999;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.tool_movie_thumb:hover {
	opacity: 0.75;
	transition: 0.5s;
}

.tool_movie_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tool_movie_thumb span {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 110px;
	height: 62px;
	background: url("../../img/member/yt-btn.png") center center / contain no-repeat;
}

.tool_movie_thumb:hover span {
	opacity: 0.75;
	transition: 0.5s;
}

.tool_movie_video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: none;
}
.tool_movie_item {
	display: flex;
	align-items: center;
	gap: 35px;
	padding: 68px 0;
}
.tool_movie_item + .tool_movie_item {
	border-top: 2px solid #c2e1d2;
}

.tool_movie_video {
	flex: 2.4;
	cursor: pointer;
	flex-shrink: 0;
}

.tool_movie_txt {
	flex: 0.8;
}

.tool_movie_txt h3 {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.45;
	margin: 0 0 20px;
	color: #3fab75;
}

.tool_movie_txt p {
	font-size: 16px;
	line-height: 1.45;
	margin: 0;
}

@media screen and (max-width: 1000px) {
	.toolBox {
		padding-left: 10px;
		padding-right: 10px;
	}
	.tool_movie_txt h3 {
		font-size: 20px;
		margin: 0 0 15px;
	}
	.tool_movie_txt p {
		font-size: 15.5px;
	}
	.tool_movie_item {
		gap: 40px;
	}
}

@media screen and (min-width: 768px) and (max-width: 768.9px) {
	.tool_logoBOX {
		padding-top: 100px;
		margin-bottom: -50px;
	}
	.tool_logo_inner img {
		width: 200px;
	}
}

@media screen and (max-width: 767px) {
	.tool_logoBOX {
		padding-top: 90px;
		margin-bottom: -15px;
	}

	.tool_logo_inner::before {
		margin-right: 10px;
	}

	.tool_logo_inner::after {
		margin-left: 10px;
	}

	.tool_logo_inner img {
		width: 150px;
		max-width: 70vw;
		height: auto;
		display: block;
	}
	.tool_movie_item {
		display: block;
		padding: 30px 0;
	}
	.tool_movie_item:first-child {
		padding: 10px 0 30px;
	}

	.tool_movie_video {
		width: 100%;
		margin-bottom: 20px;
	}
	.tool_movie_txt h3 {
		font-size: 15.5px;
		margin: 0 0 12px;
	}
	.tool_movie_txt p {
		font-size: 14px;
	}
}

/* 横スクロール防止 */
html, body {
	overflow-x: clip;
}

/* 1000pxのコンテンツ */
.toolBox.box {
	width: 1000px;
	min-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

/* 各項目 */
.tool_movie_item {
	position: relative;
	z-index: 0;
}

/* コンテンツを背景画像より前面にする */
.tool_movie_video, .tool_movie_txt {
	position: relative;
	z-index: 2;
}

/* 共通 */
.tool_movie_item::before, .tool_movie_item::after {
	content: "";
	position: absolute;
	display: block;
	background: url("../../img/member/member_icon.png") no-repeat center;
	background-size: contain;
	pointer-events: none;
	z-index: 1;
}

/* 奇数：右側の大画像 */
.tool_movie_item:nth-child(odd)::before {
	width: clamp(240px, 33vw, 440px);
	height: clamp(240px, 33vw, 440px);

	top: -60px;

	/*
    コンテンツ右端を基準にしつつ、
    ブラウザ外へ出すぎない位置
    */
	right: max(calc((1000px - 100vw) / 2), -140px);

	transform: rotate(-24deg);
}

/* 奇数：右側の小画像 */
.tool_movie_item:nth-child(odd)::after {
	width: clamp(120px, 12vw, 140px);
	height: clamp(140px, 12vw, 140px);

	right: max(calc((1000px - 100vw) / 2 + 180px), 180px);

	bottom: 50px;
	transform: rotate(22deg);
}

/* 偶数：左側 */
.tool_movie_item:nth-child(even)::before {
	width: clamp(180px, 20vw, 280px);
	height: clamp(180px, 20vw, 280px);

	top: 50%;

	/*
    左側へ出すが、ブラウザ左端を超えない
    */
	left: max(calc((1000px - 100vw) / 2), -260px);

	transform: translateY(-50%) rotate(14deg);
}

.tool_movie_item:nth-child(even)::after {
	display: none;
}

@media screen and (min-width: 981px) and (max-width: 1120px) {
	/* 奇数：右側の大画像 */
	.tool_movie_item:nth-child(odd)::before {
		right: -80px;
		top: -30px;
	}
	/* 奇数：右側の小画像 */
	.tool_movie_item:nth-child(odd)::after {
		right: 180px;
	}
}
@media screen and (min-width: 768px) and (max-width: 980px) {
	/* 奇数：右側の大画像 */
	.tool_movie_item:nth-child(odd)::before {
		right: -20px;
		top: -30px;
	}
	/* 奇数：右側の小画像 */
	.tool_movie_item:nth-child(odd)::after {
		right: 180px;
	}
}
@media screen and (max-width: 1000px) {
	.toolBox.box {
		width: 96%;
		min-width: auto;
	}
	.tool_logo_inner::before, .tool_logo_inner::after {
		height: 22px;
	}
}
@media screen and (min-width: 768px) and (max-width: 768.9px) {
	/* 奇数：右側の小画像 */
	.tool_movie_item:nth-child(odd)::after {
		right: 130px;
	}
	.tool_movie_item {
		gap: 25px;
	}
}
@media screen and (max-width: 787px) {
	.tool_logo_inner::before, .tool_logo_inner::after {
		height: 18px;
	}
	/* 奇数：右側の大画像 */
	.tool_movie_item:nth-child(odd)::before {
		width: 140px;
		height: 140px;
		top: 210px;
		right: 0;
	}
	/* 奇数：右側の小画像 */
	.tool_movie_item:nth-child(odd)::after {
		content: none;
	}

	/* 偶数：左側 */
	.tool_movie_item:nth-child(even)::before {
		width: 140px;
		height: 140px;
		top: 300px;
		left: 0;
	}
}