/* CSS Document */

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

@media print, screen and (min-width: 750.02px) and (max-width: 900px) {}
@media print, screen and (min-width: 750.02px) {}
@media screen and (max-width: 750px) {}

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

/* ============================================================================
	Setting
============================================================================ */

	.mainVisualWrap {
		position: relative;
		padding-top: 100px;

	}
	.productLogoArea {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.productLogoArea::before {
		content: "";
		width: 100%;
		height: 80%;
		position: absolute;
		z-index: 0;
		top: 10%;
		left: 0;
		text-align: center;
		background: linear-gradient(to bottom, transparent 0%, rgba(var(--site-themeColor-base_accent),1) 50%, transparent 100%)
	}
	.productLogoArea > span {
		position: relative;
		z-index: 10;
		display: block;
		width: 40%;
		max-width: 310px;
		text-align: center;
		margin: 0 auto;
	}

	.mainVisual {
		position: relative;
		display: block;
		width: var(--site-sizeContentWide-M);
		max-width: 1330px;
		margin: 0 auto -20%;
		text-align: right;
	}



	.mainVisual .productCopyArea {
		position: absolute;
		left: 0;
		top: 21%;
		width: 100%;
	}
	.mainVisual .productCopyArea .mainCopy {
		width: 45%;
		max-width: 480px;
	}
	.mainVisual .productCopyArea p + p {
		font-size: 1.4em;
		font-size: clamp(1.4rem, (17 / 1260 * 100vw), 1.7rem);
		letter-spacing: 0.1em;
		line-height: 2;
		margin-top: 2.3em;
		text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1), 1px 1px 10px rgba(0, 0, 0, 1);
	}


	.mainVisual .productCopyArea p + p {
		font-size: clamp(1.4rem, (22 / 1260 * 100vw), 2.2rem);
	}
	.mainVisual .productPicArea {
		position: relative;
		width: calc(1150 / 1260 * 100%);
		margin-left: auto;
		margin-bottom: 20%;
	}

@media screen and (max-width: 750px) {
	.mainVisualWrap {
		overflow: hidden;
		padding-top: 60px;

	}
	.mainVisual {
	}
	.mainVisual .productCopyArea p + p {
		width: 70%;
	}
	.mainVisual .productPicArea {
		position: relative;
		width: 120%;
		max-width: none;
		margin-left: -10%;
	}
	
	.SP_bl {
		display: block;
	}
}


@media screen and (max-width: 480px) {
	.mainVisual {
		margin-bottom: -10%;
	}
	.mainVisual .productCopyArea p + p {
		width: 90%;
	}
}






	.productsTechBg::after {
		content: "";
		width: 100%;
		height: 200px;
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		text-align: center;
		background: linear-gradient(to bottom, transparent 0%, rgba(var(--site-themeColor-base_accent),1) 50%, transparent 100%)
	}
/*
-------------------------------------------------*/
	.grade hgroup p {
		position: relative;
	}
	.grade hgroup p em {
		font-family: var(--site-font_family-basic);
		font-size: 1.2em;
		width: 15em;
	}
	.grade hgroup p em::first-letter {
		display: inline-block;
		font-size: 2.5em;
		margin-right: 0.1em;
	}
	.grade hgroup p i {
		position: absolute;
		top: 0;
		left: 4.2em;
	}

@media screen and (max-width: 480px) {
	.grade hgroup p em {
		width: 18em;
	}
}



/*
-------------------------------------------------*/
	.lineup hgroup p {
		position: relative;
	}
	.lineup hgroup p em {
		font-family: var(--site-font_family-basic);
		font-size: 1.2em;
		width: 18em;
	}
	.lineup hgroup p em::first-letter {
		display: inline-block;
		font-size: 2.5em;
		margin-right: 0.1em;
	}
	.lineup hgroup p i {
		position: absolute;
		top: 0;
		left: 4.2em;
	}
	.lineup dl dt {
		font-weight: normal;
		font-size: 1.1em;
		background: rgba(255, 255, 255, .15);
		padding: 0.5em 1em;
	}
	.lineup dl dt > span {
		display: inline-block;
		margin-right: 0.5em;
	}
	.lineup dl dt > i {
		font-size: 0.8em;
		line-height: 1.6em;
		display: inline-block;
		font-style: normal;
		margin-left: 1em;
		padding: 0 0.2em;
		border: 1px solid rgba(255, 255,255, .8);
	}
	.lineup dl dt:nth-of-type(1) + div {
		margin-bottom: 1.8em;
	}

	.lineup dl dd {
		text-indent: -0.95em;
		font-size: 1.2em;
		font-weight: bold;
		margin-top: 0.5em;
		margin-left: 1.8em;
	}
	.lineup dl dd::before {
		content: "・";
		margin-right: 0.2em;
		
	}
	.lineup dl dd small {
		display: block;
		text-indent: 0;
		font-size: 0.8em;
		font-weight: normal;
	}
	.lineup a {
		position: relative;
		text-indent: 0;
	}
	.lineup a::before {
		content: "";
		position: absolute;
		bottom: -1px;
		left: 1px;
		width: 100%;
		height: 1px;
		transform-origin: bottom right;
		background: rgba(255, 255, 255, .6);
		transition: 0.3s all ease;
	}
	.lineup a::after {
		text-indent: 0;
		content: ">";
		display: inline-block;
		margin-left: 0.5em;
		transition: 0.3s all ease;
	}
	.lineup a:hover::before {
		transform: scaleX(0);
	}
	.lineup a:hover::after {
		transform: translateX(3px);
	}

@media screen and (max-width: 480px) {
	.lineup hgroup p em {
		width: 20em;
	}
}

/*
-----------------------------------------*/
	.uniqueTechOutline .btnUnit {
		margin: var(--site-marpad-S) auto var(--site-marpad-M);
	}
	.uniqueTechOutline .btnUnit a.pageBtn {
		background: rgba(var(--marker-color), 1);
		background: rgba(0, 0, 0, 1);
	}


/*
----------------------------------------------------------*/
	.uniqueTechHgroupWrap hgroup > div {
		cursor: pointer;
		position: relative;
	}
	.uniqueTechHgroupWrap hgroup > div::after {
		content: "＋";
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		font-size: 2em;
		font-weight: bold;
	}
	.uniqueTechHgroupWrap.unitOpen hgroup > div::after {
		content: "－";
	}

	.uniqueTechCont > div {
		display: none;
	}
	.uniqueTech-wall .uniqueTechCont > div {
		display: block;
	}
	.uniqueTechOutline hgroup > div > p > br {
		display: none;
	}



@media screen and (max-width: 900px) {
	.uniqueTechHgroupWrap hgroup > div::after {
		right: 1.5em;
		top: 3.5vw;
	}
}
@media screen and (max-width: 750px) {
	.uniqueTechHgroupWrap hgroup > div::after {
		top: 4vw;
	}
}