@charset "utf-8";
/* CSS Document */

/* ======================================================
	@import"../css/test_line.css";
	[240904]追加
	全デバイス共通・index用
	------------------------------------------------------
	スマホ実機（iOS Safari）でborder-radiusが効かないときの対処法
	https://dezanari.com/ios-safari-border-radius/
	------------------------------------------------------
------------------------------------------------------ */
/* [pc, print]　※PC版をスマホで見る場合は、「.ModePC」「.ModeSP」不要 */
@media print, screen and (min-width: 480px) {
}

/* [sp]　※PC版をスマホで見る場合は、「.ModePC」「.ModeSP」不要 */
@media screen and (max-width: 480px) {

/* [smartphone] */
}


/* ============================================================================================================
	[250613-1145/250725-1130]新規　01の詳細ページ
------------------------------------------------------------------------------------------------------------ */

:root
{
}

.sp
{
	display: none;
}

/* [ヨコ長 + 高さ800px以下] */
@media screen and (orientation: landscape) and (max-height : calc(800px - 1px)) {
	:root
	{
	}
}


/* [sp]　※PC版をスマホで見る場合は、「.ModePC」「.ModeSP」不要 */
@media screen and (max-width: 480px) {
	:root
	{
	}

	.sp
	{
		display: block;
	}
}



.ContentsDetailWebDesign
{
}


.ContentsDetailWebDesign :is(ul, ol)
{
	margin-top: 0;
	margin-bottom: 0;

	display: grid;
	gap: 0.5em;
}
.ContentsDetailWebDesign :is(ul, ol)>li
{
	margin: 0;
}


.ContentsDetailWebDesign h2
{
	display: grid;
	justify-content: center;
	justify-items: center;

	text-align: center;

	margin-bottom: 0;
}

.ContentsDetailWebDesign h2 .num
{
	position: absolute;
	left: 50%;
	bottom: calc(100% + 0.2em);
	translate: -50% -0%;

	width: 100%;

	font-size: 10em;
	line-height: 0;

	opacity: 0.1;
}


.ContentsDetailWebDesign .Ct
{
	padding-top: calc(var(--padding_tb) * 1.5);
}


.ContentsDetailWebDesign .Ct .bg
{
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;

	width: 100%;
	height: 100%;

	overflow: hidden;
}
.ContentsDetailWebDesign .Ct .bg>*
{
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	
	width: 120%;
	height: 120%;

	opacity: 0.25;
}
.ContentsDetailWebDesign .Ct .bg img
{
	display: block;

	width: 100%;
	height: 100%;
	object-fit: contain;
}


.ContentsDetailWebDesign .Ct01 .bg
{
	background-color: rgb(var(--bk) / 0.1);
}
.ContentsDetailWebDesign .Ct01 .bg>*
{
	filter: blur(0.5em);
}


.ContentsDetailWebDesign .Ct02 .bg
{
	background-color: rgb(var(--w));
}
.ContentsDetailWebDesign .Ct02 .bg>*
{
	filter: brightness(1.2) blur(0.25em);
}


/* [sp]　※PC版をスマホで見る場合は、「.ModePC」「.ModeSP」不要 */
@media screen and (max-width: 480px) {

	.ContentsDetailWebDesign h2 .num
	{
		font-size: 6em;
	}
}



/* ------------------------------------------------------------------------------------------------------------
	[250613-1145/250725-1130]新規
	詳細ページ
	contents_detail_web_design.php
------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------
	[01]
------------------------------------------------------ */
.ContentsDetailWebDesign .Ct01
{
	display: grid;
	gap: var(--padding_tb);
}


.ContentsDetailWebDesign .Ct01 h2
{
}
.ContentsDetailWebDesign .Ct01 h2 .num
{
	color: rgb(var(--w));
	opacity: 0.4;
}


.ContentsDetailWebDesign .Ct01 .body
{
}

.ContentsDetailWebDesign .Ct01 .List
{
	--border_color			: var(--w);
	--border_color_alpha	: 1.0;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap);
}

.ContentsDetailWebDesign .Ct01 .List .Item
{
	display: grid;
	align-content: start;
	gap: var(--gap);

	height: 100%;

	padding: var(--gap);

	background-color: rgb(var(--w) / 0.5);
}

.ContentsDetailWebDesign .Ct01 .List .Item .head
{
	display: grid;
	gap: 1em;
}

.ContentsDetailWebDesign .Ct01 .List .Item .main
{
	display: grid;
	gap: var(--gap);
}

.ContentsDetailWebDesign .Ct01 .List .Item h3
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5em;

	line-height: 1;
}
.ContentsDetailWebDesign .Ct01 .List .Item h3>b
{
	font-size: 1.4em;
	font-weight: bold;
}


.ContentsDetailWebDesign .Ct01 .List .Item .volume
{
	justify-self: end;

	padding: 0.5em;

	background-color: rgb(var(--bk) / 0.1);
	background-color: rgb(var(--w) / 0.35);
	line-height: 1;
}


.ContentsDetailWebDesign .Ct01 .List .Item .fee
{
	font-size: 1.2em;

	display: grid;
	grid-template-columns: 6.5em auto;
	align-content: center;
	align-items: center;
	gap: 0em;
}
/*
	justify-content: center;
*/
.ContentsDetailWebDesign .Ct01 .List .Item .fee::before
{
	content: "";
	display: block;

	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;

	width: 100%;
	height: 3em;

	border-width: 1px;
	background-color: rgb(var(--w) / 0.25);
}

.ContentsDetailWebDesign .Ct01 .List .Item .fee>b
{
	padding-right: 0.5em;
}
.ContentsDetailWebDesign .Ct01 .List .Item .fee>b::before
{
	content: "";
	display: block;

	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;

	width: 100%;
	height: 3em;

	background-color: rgb(var(--w));
	--arrow_size				: 1em;
	clip-path: polygon(
		0% 0%,
		calc(100% - var(--arrow_size)) 0%,
		100% 50%,
		calc(100% - var(--arrow_size)) 100%,
		0% 100%
	);
}

.ContentsDetailWebDesign .Ct01 .List .Item .fee>div
{
	display: flex;
	justify-content: center;
	gap: 0.5em;
}

.ContentsDetailWebDesign .Ct01 .List .Item .fee>*[class*="fee_"]
{
}
.ContentsDetailWebDesign .Ct01 .List .Item .fee>*[class*="fee_"]>b
{
	font-size: 1.2em;
}


.ContentsDetailWebDesign .Ct01 .List .Item .lead
{
	text-align: left;
}


.ContentsDetailWebDesign .Ct01 .List .Item .txt
{
	display: grid;
	justify-content: center;
	gap: 1em;
}

.ContentsDetailWebDesign .Ct01 .List .Item .txt_title
{
	font-size: 1.1em;
	font-weight: bold;
}

.ContentsDetailWebDesign .Ct01 .List .Item .txt ul
{
}

.ContentsDetailWebDesign .Ct01 .List .Item .txt ul b
{
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 0.75em;
	text-underline-offset: -0.25em;
	text-decoration-color: rgb(var(--r) / 0.2);
	text-decoration-skip-ink: none;
}



/* [sp]　※PC版をスマホで見る場合は、「.ModePC」「.ModeSP」不要 */
@media screen and (max-width: 480px) {

	.ContentsDetailWebDesign .Ct01 .List
	{
		grid-template-columns: 1fr;
	}
}



/* ------------------------------------------------------
	[02]
------------------------------------------------------ */
.ContentsDetailWebDesign .Ct02
{
	display: grid;
	gap: var(--padding_tb);
}


.ContentsDetailWebDesign .Ct02 .body
{
}


.ContentsDetailWebDesign .Ct02 .body .List
{
	display: grid;
	justify-content: center;

	background-color: rgb(var(--w) / 0.5);
}

.ContentsDetailWebDesign .Ct02 .body .Item
{
	display: grid;
	grid-template-columns: calc(1.5em * 12) calc(1.2em * 10) 1fr;
	align-items: center;

	border-bottom-width: 1px;
}

.ContentsDetailWebDesign .Ct02 .body .Item>*
{
	padding: 1em;
}

.ContentsDetailWebDesign .Ct02 .body .Item .title
{
}

.ContentsDetailWebDesign .Ct02 .body .Item .fee
{
}
.ContentsDetailWebDesign .Ct02 .body .Item:not([class*="thead"]) .fee>b
{
	font-size: 1.5em;
	font-weight: inherit;
}

.ContentsDetailWebDesign .Ct02 .body .Item .txt
{
	text-align: left;
}


/* [02] <tbody> */
.ContentsDetailWebDesign .Ct02 .body .Item:not([class*="thead"]) .title
{
}
.ContentsDetailWebDesign .Ct02 .body .Item:not([class*="thead"]) .title>b
{
	font-size: 1.5em;
	font-weight: inherit;
}

/* [02] <thead> */
.ContentsDetailWebDesign .Ct02 .body .Item[class*="thead"]
{
	border-top-width: 1px;
}
.ContentsDetailWebDesign .Ct02 .body .Item[class*="thead"]>*[class]
{
	font-size: 1.2em;
	font-weight: inherit;

	display: grid;
	align-items: center;

	height: 100%;

	background-color: rgb(var(--bk) / 0.1);
	text-align: center;
}
.ContentsDetailWebDesign .Ct02 .body .Item[class*="thead"]>*[class] b
{
	font-weight: inherit;
}

/* [02] memo */
.ContentsDetailWebDesign .Ct02 .memo
{
	display: grid;
	justify-content: center;

	text-align: left;
}



/* [sp]　※PC版をスマホで見る場合は、「.ModePC」「.ModeSP」不要 */
@media screen and (max-width: 480px) {

	.ContentsDetailWebDesign .Ct02 .body .List
	{
		gap: var(--gap);
		background-color: transparent;
	}

	.ContentsDetailWebDesign .Ct02 .body .Item[class*="thead"]
	{
		display: none;
	}

	.ContentsDetailWebDesign .Ct02 .body .Item
	{
		grid-template-columns: 1fr;
		justify-content: center;

		background-color: rgb(var(--w) / 0.5);
		border-width: 0px;
		border-width: 1px;
	}

	.ContentsDetailWebDesign .Ct02 .body .Item>*[data-label]
	{
	}
	.ContentsDetailWebDesign .Ct02 .body .Item>*[data-label]::before
	{
		content: attr(data-label);
		display: inline;

		font-size: 1em;
	}

	.ContentsDetailWebDesign .Ct02 .body .Item .title
	{
		font-weight: bold;

		margin-bottom: 1em;

		background-color: rgb(var(--bk) / 0.1);
	}

	.ContentsDetailWebDesign .Ct02 .body .Item .fee
	{
		display: flex;
		justify-content: center;
		align-items: baseline;
		gap: 0em;
		
		padding-top: 0;
		padding-bottom: 0;

		text-decoration-line: underline;
		text-underline-offset: 0.25em;
		text-decoration-style: solid;
		text-decoration-thickness: 5px;
		text-decoration-skip-ink: none;
		text-decoration-color: rgb(var(--bk) / 0.1);
	}

	.ContentsDetailWebDesign .Ct02 .body .Item .txt
	{
		display: grid;
		justify-content: center;
	}
}



/* ------------------------------------------------------
	[02] footer
------------------------------------------------------ */
.ContentsDetailWebDesign .footer
{
	display: grid;
	justify-content: center;
	gap: var(--gap);
}


.ContentsDetailWebDesign .footer>*
{
}


.ContentsDetailWebDesign .footer .ColorBtn
{
	width: 100%;
	font-size: 1.75em;

	border-color: transparent;
	color: rgb(var(--w));
}
.ContentsDetailWebDesign .footer .ColorBtn::after
{
	background-color: rgb(var(--w));
}

.ContentsDetailWebDesign .footer .ColorBtn>*
{
}

.ContentsDetailWebDesign .footer .contact .ColorBtn
{
	background-color: rgb(var(--or));
}

.ContentsDetailWebDesign .footer .gallery .ColorBtn
{
	background-color: rgb(var(--bl) / 0.65);
}