/******************************
	全体の設定
******************************/
.initial-settings {
	font-family				: "Noto Sans JP", sans-serif;
	font-size				: clamp(1.2rem, 0.914rem + 0.89vw, 1.6rem);
	color					: #333333;
}

/******************************
	アンカーポイント
******************************/
*[id] {
	scroll-margin-top		: 80px;
}

/******************************
	メーカーロゴマーク
******************************/
.logo-align {
	width					: 100%;
	margin-bottom			: 0.5em;
}
.logo-align img {
	width					: 100%;
	height					: auto;
	max-width				: 420px;
	display					: block;
	margin					: 0 auto;
/*	aspect-ratio			: 675 / 60; */
}

/******************************
	機能・装備アイコン
******************************/
.icon-align {
	max-width				: 420px;
	margin					: 0 auto 0.5em;
	display					: flex;
	justify-content			: space-between;
	align-items				: center;
}
.icon-align img {
	width					: 16.66%;
	height					: auto;
	max-width				: 70px;
	margin					: 0;
	aspect-ratio			: 1 / 1;
}
.icon-align:has(img:nth-child(6):last-child) {
	gap						: 1px;
	justify-content			: center;
}
.icon-align:has(img:nth-child(6):last-child) img {
	width					: calc((100% - 5px) / 6);
	max-width				: none;
}

/******************************
	【商品説明２】テキストコンテンツ
******************************/
.feature-item {
	line-height				: 1.4;
	font-weight				: bold;
	color					: white;
	background				: linear-gradient(90deg, #002060 0%, #0040c0 100%);
	border-left				: none;
	border-radius			: 4px;
	padding					: 0.5em;
	margin-top				: 1rem;
	margin-bottom			: 0.5em;
	display					: block;
}
.feature-text {
	line-height				: 1.4;
	margin-bottom			: 0.5em;
	text-align				: justify;
	word-break				: break-all;
	padding					: 0 0.5em;
}
.feature-text strong {
	color					: #0040c0;
	font-weight				: bold;
	background-image		: linear-gradient(rgba(255, 215, 0, 0.4), rgba(255, 215, 0, 0.4));
	background-repeat		: no-repeat;
	background-position		: bottom left;
	background-size			: 0% 40%;
	transition				: background-size 0s;
	padding					: 0 2px;
}
.feature-text strong:hover {
	background-size			: 100% 40%;
	transition				: background-size 0.6s ease-out;
}

/******************************
	ナビゲーションコントロール
******************************/
.nav-control {
	margin					: 1em 0;
	text-align				: center;
	display					: flex;
	flex-wrap				: wrap;
	justify-content			: center;
	gap						: 8px;
}
.nav-control a {
	display					: inline-block;
	padding					: 8px;
	background-color		: #f0f5ff;
	color					: #0040c0;
	text-decoration			: none;
	font-size				: 12px;
	font-weight				: bold;
	border					: thin solid #0040c0;
	border-radius			: 4px;
	transition				: 0.2s;
}
.nav-control a:hover {
	background-color		: #0040c0;
	color					: white;
}

/******************************
	代理店表示・お取り寄せ表示
******************************/
/*** 画像で表示するタイプ ***/
.info-align {
	width					: 100%;
	margin-bottom			: 0.5em;
}
.info-align img {
	width					: 100%;
	height					: auto;
	max-width				: 420px;
	display					: block;
	margin					: 0 auto;
}
/*** テキストで表示するタイプ ***/
.spec-cont {
	width					: 100%;
	max-width				: 420px;
	height					: auto;
	margin					: 0 auto;
}
.spec-cont table {
	width					: 100%;
	border-collapse			: collapse;
	color					: dimgray;
}
.spec-cont th,
.spec-cont td {
	border					: thin solid lightgray;
	text-align				: center;
	vertical-align			: middle;
}
.spec-cont th {
	background-color		: whitesmoke;
}

.spec-cont td {
	background-color		: white;
}
.agency-cont,
.payment-cont,
.postage-cont,
.inquiry-cont {
	position				: relative;
	overflow				: hidden;
	width					: 100%;
	max-width				: 420px;
	height					: auto;
	padding					: 0.5em;
	margin					: 0 auto 0.5em;
	text-align				: center;
	font-weight				: bold;
	border-radius			: 0.5em;
	box-sizing				: border-box;
	line-height				: 1.4;
}
.agency-cont[data-label],
.payment-cont[data-label],
.postage-cont[data-label],
.inquiry-cont[data-label] {
	padding-top				: 1.5em;
}
.agency-cont[data-label]::before,
.payment-cont[data-label]::before,
.postage-cont[data-label]::before,
.inquiry-cont[data-label]::before {
	content					: attr(data-label);
	position				: absolute;
	top						: 15px;
	left					: -38px;
	width					: 120px;
	padding					: 3px 0;
	transform				: rotate(-45deg);
	font-size				: 0.75em;
	font-weight				: bold;
	text-align				: center;
	line-height				: 1;
	box-shadow				: 0 1px 3px rgba(0, 0, 0, 0.15);
	letter-spacing			: 0;
	box-sizing				: border-box;
}
.agency-cont {
	background-color		: aliceblue;
	border					: 0.5em ridge lightsteelblue;
	color					: midnightblue;
	white-space				: nowrap;
}
.agency-cont[data-label]::before {
	background-color		: lightsteelblue;
	color					: midnightblue;
}
.agency-logo {
	height					: 1.2em;
	width					: auto;
	vertical-align			: -0.2em;
	display					: inline-block;
	margin-right			: 0.1em;
}
.payment-cont {
	background-color		: floralwhite;
	border					: 0.5em ridge beige;
	color					: darkslategrey;
}
.payment-cont[data-label]::before {
	background-color		: burlywood;
	color					: white;
}
.payment-text {
	display					: inline-block;
	text-align				: left;
	color					: midnightblue;
	font-size				: 1.05em;
	background-color		: lemonchiffon;
	padding					: 0.5em;
	box-shadow				: 2px 2px 2px darkgray;
	border-radius			: 0.25em;
}
.payment-text span:before {
	content					: "\2713";
	color					: crimson;
	margin					: 0 0.5em 0 0;
}
.postage-cont {
	background-color		: honeydew;
	border					: 0.5em ridge powderblue;
	color					: darkgreen;
}
.postage-cont[data-label]::before {
	background-color		: powderblue;
	color					: darkgreen;
}
.postage-logo {
	margin					: 0 0.1em;
}
.postage-text1 {
	display					: inline-block;
	font-size				: 1.05em;
	color					: crimson;
	background-color		: lemonchiffon;
	padding					: 0.5em;
	box-shadow				: 2px 2px 2px darkgray;
	border-radius			: 0.25em;
}
.postage-text2 {
	display					: inline-block;
	margin-top				: 0.5em;
	font-size				: 0.8em;
	font-weight				: normal;
	line-height				: 1.2;
	letter-spacing			: -0.02em;
}
.inquiry-cont {
	background-color		: lavenderblush;
	border					: 0.5em ridge pink;
	color					: darkred;
}
.inquiry-cont[data-label]::before {
	background-color		: pink;
	color					: darkred;
}
.inquiry-cont img {
	padding					: 0 0.5em 0 0;
}
.inquiry-mark {
	box-shadow				: 0px 0px 3px lightgray;
	display					: inline-block;
	margin					: 0.25em 0.5em 0.25em 0;
	font-weight				: normal;
	color					: black;
	font-size				: 0.875em;
	background-color		: white;
	padding					: 0.25em 1em;
	border					: thin solid #dadada;
}
.inquiry-text {
	position				: relative;
	top						: -0.5px;
}
.inquiry-highlight {
	color					: crimson;
	font-size				: 1.1em;
}

/******************************
	タイトル項目の設定
******************************/
.title-container {
	position				: relative;
	width					: 100%;
	background				: whitesmoke;
	font-size				: x-large;
	font-weight				: bold;
	text-align				: left;
	padding					: 0.3em 1.5em;
	margin-top				: 3rem;
	margin-bottom			: 0.5rem;
	border					: solid thin lightgray;
	border-left				: none;
	white-space				: nowrap;
	box-sizing				: border-box;
}
.title-container:first-of-type {
	margin-top				: 0;
}
.title-container::before {
	content					: "";
	position				: absolute;
	left					: 0;
	top						: -1px;
	bottom					: -1px;
	width					: 1.5rem;
	background				: #0040c0;
	clip-path				: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%);
}

/******************************
	主な用途の設定
******************************/
.usecase-container {
	display					: flex;
	flex-wrap				: wrap;
	justify-content			: center;
	gap						: 5px 10px;
	width					: 100%;
	margin					: 0 auto;
}
.usecase-item {
	display					: flex;
	flex-direction			: column;
	align-items				: center;
	width					: calc(20% - 10px);
	min-width				: 120px;
}
.usecase-item img {
	width					: 100%;
	height					: auto;
	aspect-ratio			: 1 / 1;
	display					: block;
	border					: thin solid lightgray;
	border-radius			: 8px;
	margin-bottom			: 2px;
}
.usecase-item span {
	width					: 100%;
	box-sizing				: border-box;
}
.usecase-labels {
	display					: flex;
	flex-wrap				: wrap;
	justify-content			: center;
	gap						: 5px;
	width					: 100%;
	margin-top				: 0;
}
.usecase-item span,
.usecase-labels span {
	display					: inline-flex;
	justify-content			: center;
	align-items				: center;
	padding					: 0.5rem 1rem;
	background				: linear-gradient(whitesmoke, white);
	border					: thin solid lightgray;
	border-radius			: 8px;
	font-weight				: normal;
	text-align				: center;
	white-space				: nowrap;
	font-size				: inherit;
}

/******************************
	基本仕様の設定
******************************/
.spec-table {
	border-collapse			: collapse;
	width					: 100%;
	border-bottom			: thin solid lightgray;
}
.spec-table th, .spec-table td {
	text-align				: left;
	border					: thin solid lightgray;
	vertical-align			: middle;
}
.spec-table th {
	padding					: 0.25em 1em;
	line-height				: 1.2;
	width					: auto;
	background-color		: whitesmoke;
	font-weight				: bold;
	white-space				: nowrap;
}
.spec-table th small {
	font-weight				: normal;
}
.spec-table td {
	padding					: 0.75em 1em;
	line-height				: 1.4;
}
.spec-table td span {
	display					: inline-block;
}
.spec-table td span:not(:last-child)::after {
	content					: "、";
}
.spec-table td sup {
	font-size				: 0.75em;
	line-height				: 0;
	vertical-align			: super;
}
.spec-table td:has(.spec-sub_table) {
	padding					: 0;
}
.spec-table caption {
	position				: absolute;
	width					: 1px;
	height					: 1px;
	overflow				: hidden;
	clip					: rect(0, 0, 0, 0);
}

/******************************
	オプション・消耗品
******************************/
.option-items {
	display					: flex;
	flex-wrap				: wrap;
	justify-content			: flex-start;
	gap						: 4px 7px;
	max-width				: 930px;
	margin					: 0 auto;
	align-items				: stretch;
}
.option-items a {
	text-decoration			: none;
	font-weight				: bold;
	margin-bottom			: 0.5rem;
	box-sizing				: border-box;
	display					: flex;
	flex-direction			: column;
	width					: 180px;
	overflow				: visible;
	min-height				: 220px;
	color					: #333333;
}
.option-items img {
	width					: 100%;
	height					: auto;
	aspect-ratio			: 1 / 1;
	object-fit				: contain;
	padding					: 4px;
	border-radius			: 8px;
	border					: solid thin lightgray;
	box-sizing				: border-box;
	transition				: transform 0.3s ease;
}
.option-items p {
	background				: #0040c0;
	color					: white;
	border-radius			: 8px;
	padding					: 0.25rem;
	margin-top				: 0.5rem;
	box-shadow				: 0 4px 0 navy;
	text-align				: center;
	font-size				: medium;
	transition				: transform 0.2s, box-shadow 0.2s;
}
.option-items a:hover p {
	background-color		: #0036a3;
	box-shadow				: 0 1px 0 #002673;
	transform				: translateY(3px);
}
.option-items a:hover img {
	border					: solid medium #0040c0;
}
.option-text {
	font-weight				: normal;
	font-size				: small;
	text-align				: center;
	margin-top				: 0.5rem;
	line-height				: 1.2;
}
.option-items a.is-new {
	position				: relative;
	overflow				: hidden;
	display					: block;
}
.option-items a.is-new::before {
	content					: "NEW!";
	position				: absolute;
	top						: 10px;
	right					: -25px;
	width					: 100px;
	background-color		: red;
	color					: white;
	font-size				: 12px;
	font-weight				: bold;
	text-align				: center;
	line-height				: 25px;
	transform				: rotate(45deg);
	z-index					: 1;
	box-shadow				: 0 2px 4px rgba(0,0,0,0.2);
}

/******************************
	注意書き
******************************/
.notes {
	margin-top				: 3rem;
	margin-left				: 1em;
	text-indent				: -1em;
	line-height				: 1.4;
	color					: dimgray;
}

/******************************
	問合せ
******************************/
/*** 画像で表示するタイプ ***/
.contact-banner {
	margin					: 0 auto;
	text-align				: center;
}
.contact-banner img {
	width					: 100%;
	height					: auto;
	max-width				: 720px;
}
.speech-bubble {
	position				: relative;
	display					: inline-block;
	margin					: 5rem 0 1.2rem;
	padding					: 0.5rem 2rem;
	min-width				: 120px;
	max-width				: 100%;
	background-color		: white;
	border					: solid 3px #0040c0;
	box-sizing				: border-box;
	border-radius			: 5rem;
}
.speech-bubble:before {
	content					: "";
	position				: absolute;
	bottom					: -21px;
	left					: 50%;
	margin-left				: -15px;
	border					: 12px solid transparent;
	border-top				: 12px solid white;
	z-index					: 2;
}
.speech-bubble:after {
	content					: "";
	position				: absolute;
	bottom					: -28px;
	left					: 50%;
	margin-left				: -17px;
	border					: 14px solid transparent;
	border-top				: 14px solid #0040c0;
	z-index					: 1;
}
.speech-bubble p {
	margin					: 0;
	padding					: 0;
	background				: linear-gradient(transparent 40%, gold 80%);
	font-size				: x-large;
}
/*** テキストで表示するタイプ ***/
.contact-cont {
	max-width				: 640px;
	margin					: 3rem auto 0.5em;
	padding					: 1em;
	background-color		: honeydew;
	border					: 0.4em ridge powderblue;
	border-radius			: 0.5em;
	color					: darkgreen;
	box-sizing				: border-box;
	text-align				: center;
	font-weight				: bold;
}
.contact-cont a {
	display					: block;
	margin					: 0.5em auto 0.8em;
	padding					: 0.5em 0;
	color					: white;
	font-size				: 1.5em;
	border-radius			: 0.5em;
	text-decoration			: none;
	box-sizing				: border-box;
	width					: 80%;
	background				: linear-gradient(to bottom, darkorange 0%, chocolate 100%);
	box-shadow				: 0 5px 0 saddlebrown;
	transition				: transform 0.2s ease, box-shadow 0.2s;
}
.contact-cont a .btn-arrow {
	color					: chocolate;
}
.contact-cont a:hover {
	background				: linear-gradient(to bottom, #f58600 0%, #ce671e 100%);
	box-shadow				: 0 1px 0 saddlebrown;
	transform				: translateY(3px);
}
.contact-cont a:hover .btn-arrow {
	color					: #ce671e;
}
.contact-cont p {
	font-weight				: normal;
	margin-top				: 0.5em;
	letter-spacing			: -1px;
}

/******************************
	非表示項目
******************************/
.sr-only {
	position				: absolute;
	width					: 1px;
	height					: 1px;
	padding					: 0;
	margin					: -1px;
	overflow				: hidden;
	clip					: rect(0, 0, 0, 0);
	white-space				: nowrap;
	border					: 0;
}

/******************************
	TZeテープ専用
******************************/
.tze-cont {
	display					: grid;
	grid-template-columns	: repeat(2, 1fr);
	gap						: 0.6em;
}
.tze-card-cont {
	display					: flex;
	gap						: 0.3em;
	flex-direction			: column;
	border					: 2px solid lightgray;
	border-radius			: 0.5em;
	padding					: 0.5em;
	box-sizing				: border-box;
}
.tze-white {
	background-color		: whitesmoke;
}
.tze-pink {
	background-color		: lightpink;
}
.tze-card {
	display					: flex;
	gap						: 0.3em;
	align-items				: stretch;
}
.tze-card-left {
	width					: 40%;
	height					: 100%;
	border					: thin solid gray;
	box-sizing				: border-box;
	flex-shrink				: 0;
	display					: flex;
	align-items				: center;
	background-color		: white;
}
.tze-card-left img {
	width					: 100%;
	height					: auto;
	max-height				: 200px;
	object-fit				: contain;
	display					: block;
	aspect-ratio			: 1 / 1;
	box-sizing				: border-box;
}
.tze-card-right {
	flex					: 1;
}
.tze-card-right table {
	width					: 100%;
	height					: 100%;
	border-collapse			: collapse;
}
.tze-card-right th,
.tze-card-right td {
	border					: thin solid gray;
	text-align				: center;
	vertical-align			: middle;
}
.tze-card-right th {
	background-color		: gainsboro;
}
.tze-card-right td {
	background-color		: white;
}
.price-cell {
	display					: inline-grid;
	grid-template-columns	: auto auto;
	align-items				: center;
	min-height				: 3em;
	text-align				: right;
}
.tze-card-cont p {
	color					: white;
	font-size				: 1.25em;
	font-weight				: bold;
	text-align				: center;
	background-color		: crimson;
	border-radius			: 0.25em;
	padding					: 0.5em;
	border					: thin solid gray;
}
.tze-card-cont a {
	display					: flex;
	align-items				: center;
	justify-content			: center;
	gap						: 0.5em;
	padding					: 0.55em 1em;
	margin-bottom			: 0.5em;
	color					: white;
	font-weight				: bold;
	text-decoration			: none;
	border-radius			: 0.4em;
	transition				: all 0.15s ease-in-out;
	border-top				: 1px solid rgba(255, 255, 255, 0.4);
	background				: linear-gradient(to bottom, #1d61ea 0%, #0037a3 100%);
	box-shadow				: 0 4px 0 #002266, 0 5px 8px rgba(0, 0, 0, 0.25);
}
.tze-card-cont a:hover {
	background				: linear-gradient(to bottom, #2b6df4 0%, #0040be 100%);
	box-shadow				: 0 2px 0 #002266, 0 3px 5px rgba(0, 0, 0, 0.2);
	transform				: translateY(2px);
}
.tze-card-cont a:active {
	box-shadow				: 0 0 0 #002266, inset 0 2px 4px rgba(0, 0, 0, 0.3);
	transform				: translateY(4px);
}
.font-size-up {
	font-size				: 1.25em;
}
.btn-arrow {
	margin-left				: 1em;
	display					: inline-flex;
	align-items				: center;
	justify-content			: center;
	width					: 1.8em;
	height					: 1.8em;
	background-color		: white;
	color					: #0037a3;
	border-radius			: 50%;
	font-size				: 0.75em;
	padding-left			: 0.15em;
	box-shadow				: 0 1px 2px rgba(0, 0, 0, 0.2);
	flex-shrink				: 0;
}

/******************************
	ACM-Server専用
******************************/
.acm-items {
	display					: flex;
	flex-wrap				: wrap;
	justify-content			: flex-start;
	gap						: 14px 7px;
	max-width				: 930px;
	margin					: 0 auto;
}
.acm-card {
	box-sizing				: border-box;
	display					: flex;
	flex-direction			: column;
	width					: 180px;
	overflow				: visible;
	min-height				: 220px;
	color					: #333333;
}

.acm-items img {
	width					: 100%;
	height					: auto;
	aspect-ratio			: 1 / 1;
	object-fit				: contain;
	padding					: 4px;
	border-radius			: 8px;
	border					: solid thin lightgray;
	box-sizing				: border-box;
}
.acm-items p {
	display					: inline-flex;
	justify-content			: center;
	align-items				: center;
	padding					: 0.2em 0.25em;
	background				: linear-gradient(whitesmoke, white);
	border					: thin solid lightgray;
	border-radius			: 4px;
	font-weight				: bold;
	text-align				: center;
	white-space				: nowrap;
	font-size				: inherit;
	margin-top				: 0.5em;
}
.acm-text {
	font-weight				: normal;
	font-size				: 0.78em;
	text-align				: center;
	margin					: 0.25em 0 0.2em;
	letter-spacing			: -0.1em;
	line-height				: 1.2;
}

/************************************************************
	タブレット・スマホ設定
************************************************************/
@media screen and (max-width: 768px) {
/******************************
	アンカーポイント
******************************/
	*[id] {
		scroll-margin-top	: 85px;
	}

/******************************
	タイトル項目の設定
******************************/
	.title-container {
		font-size			: clamp(18px, calc(12.275px + 1.527vw), 24px);
	}

/******************************
	主な用途の設定
******************************/
	.usecase-item {
		width				: auto;
		min-width			: 0;
	}
	.usecase-item span {
		width				: auto;
	}
	.usecase-container,
	.usecase-labels {
		display				: flex;
		gap					: 5px;
	}

/******************************
	基本仕様の設定
******************************/
	.spec-table th, .spec-table td {
		padding				: 0.5em;
		width				: 100%;
		display				: block;
		box-sizing			: border-box;
		border-bottom		: none;
		text-align			: center;
	}
	.spec-table td sup {
		line-height				: inherit;
		vertical-align			: baseline;
	}
	.spec-sub_table {
		display					: table;
		border					: none;
		margin					: 0 auto;
		width					: 100%;
	}
	.spec-table .spec-sub_table th,
	.spec-table .spec-sub_table td {
		display					: table-cell;
		text-align				: left;
	}
	.spec-table .spec-sub_table th {
		padding					: 0.2em 0.5em;
		line-height				: 1.1;
		width					: 30%;
		border-left				: none;
	}
	.spec-table .spec-sub_table td {
		padding					: 0.5em;
		width					: 70%;
		border-right			: none;
	}
	.spec-table .spec-sub_table tr:first-child th,
	.spec-table .spec-sub_table tr:first-child td {
		border-top				: none;
	}
	.spec-table .spec-sub_table tr:last-child th,
	.spec-table .spec-sub_table tr:last-child td {
		border-bottom			: none;
	}
	.spec-table tr:last-child td,
	.spec-table tr:last-child td:has(.spec-sub_table) {
		border-bottom			: none;
	}
	.spec-table.spec-table-compact {
		display					: table !important;
		width					: 100% !important;
		table-layout			: auto !important;
	}
	.spec-table.spec-table-compact tbody {
		display					: table-row-group !important;
		width					: auto !important;
	}
	.spec-table.spec-table-compact tr {
		display					: table-row !important;
		width					: auto !important;
	}
	.spec-table.spec-table-compact th,
	.spec-table.spec-table-compact td {
		display					: table-cell !important;
		width					: auto !important;
		box-sizing				: border-box;
		text-align				: left;
	}
	.spec-table.spec-table-compact th {
		white-space				: nowrap;
	}
/******************************
	オプション・消耗品
******************************/
	.option-items {
		padding				: 0;
		gap					: 4px;
		align-items			: flex-start;
	}
	.option-items a {
		width				: calc(33.33% - 3px);
		height				: auto !important;
		min-height			: 0 !important;
		display				: flex;
		flex-direction		: column;
		padding-bottom		: 6px;
		box-sizing			: border-box;
	}
	.option-items p {
		font-size			: 0.9em;
		margin-top			: 5px;
		margin-bottom		: 0;
	}
	.option-text {
		font-size			: 0.8em;
		letter-spacing		: -0.1em;
		margin-top			: 5px;
	}
	.option-items a.is-new::before {
		top					: 5px;
		right				: -20px;
		width				: 70px;
		font-size			: 9px;
		line-height			: 18px;
	}

/******************************
	問合せの設定
******************************/
	.speech-bubble p {
		font-size			: clamp(11px, calc(1.714px + 2.902vw), 24px);
	}
	.contact-cont {
		padding				: 1em 0.5em;
	}
	.contact-cont a {
		width				: 100%;
	}

/******************************
	TZeテープ専用
******************************/
	.tze-cont {
		grid-template-columns	: 1fr;
	}

/******************************
	ACM-Server専用
******************************/
	.acm-items {
		padding				: 0;
		gap					: 8px 4px;
	}
	.acm-card {
		width				: calc(33.33% - 3px);
		min-height			: 135px;
	}
	.acm-items p {
		font-size			: 0.9em;
	}
}