/* For ver.1.6.0 */

/*===== Top page =====*/
body {
	background-color: #202020;
	margin: 0;
	padding: 0;
}

:root {
	/*疑似セレクタ。ここで変数を定義*/
	--fv-height: 224px;
	/*ファーストビューの高さ*/
	--header-height: 67px;
	/*固定しているメニューの高さ＋ボトムに開けたい隙間*/
}

#top_frame {
	border: 0px solid #fff;
	width: 100%;
	margin: 0;
}

.cz1 {
	text-align: center;
}

.MenuBar {
	border: 0px solid red;
	position: fixed;
	top: 0;
	z-index: 100;
	width: 100%;
	height: 51px;
	background-color: #7e1b40;
}

.tb {
	border: 0px solid yellow;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	inset: 0;
	top: 0px;
	z-index: 100;
	background-color: #7e1b40;
	width: clamp(650px, 900px, 100%);
	height: 51px;
	margin: 0 auto;
}

.DL-anysns {
	border: 0px solid pink;
	background-image: url(../img/logo_cien_web.png);
	background-color: #ffffff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	/* width: 500px; */
	min-width: 60px;
	height: 20px;
	margin: 0 8px 0 16px;
	padding: 0;
	position: relative;
}

.pixiv-anysns {
	width: 40px;
	min-width: 30px;
	margin: 0 8px 0 16px;
}

.twitter-anysns {
	border: 0px solid red;
	width: 40px;
	min-width: 30px;
	margin: 0 16px 0 8px;
}

.twitter-anysns img {
	width: 100%;
}

/* .ZA-anysns{
	border: 0px solid pink;
	background-color: #ee2737;
	font-weight: bold;
	width: 150px;
	margin: 0;
	padding: 0;
} */

.FNT-anysns {
	border: 0px solid pink;
	background-image: url(../img/fantia-regular-logo-preview.png);
	background-color: #ffffff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	/* width: 500px; */
	min-width: 60px;
	height: 20px;
	margin: 8px 8px 0 16px;
	padding: 0;
	position: relative;
}

.DL-anysns a,
.FNT-anysns a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 764px) {

	.menu-000 {
		grid-area: logo;
	}

	.menu-001 {
		grid-area: top;
	}

	.menu-002 {
		grid-area: about;
	}

	.menu-003 {
		grid-area: contact;
	}

	.menu-004 {
		grid-area: sns;
	}

	.DL-anysns {
		border: 0px solid pink;
		width: 50%;
		margin: 8px auto;
	}

	.FNT-anysns {
		border: 0px solid pink;
		width: 50%;
		margin: 8px auto 16px auto;
	}

	.pixiv-anysns {
		margin: 0;
		width: 90px;
		text-align: right;
		grid-area: pixiv;
	}

	.pixiv-anysns img {
		width: 40px;
		min-width: 32px;
	}

	.twitter-anysns {
		margin: 0;
		width: 83px;
		text-align: left;
		grid-area: x;
	}

	.twitter-anysns img {
		width: 16%;
		min-width: 32px;
	}
}

.cz2 {
	position: relative;
	z-index: 90;
	display: grid;
	justify-content: center;
	grid-template-columns: minmax(180px, 13%) clamp(300px, 70%, 700px);
	grid-template-rows: 0.5fr 0.6fr 1.9fr;
	gap: 0px 0px;
	grid-template-areas:
		"gal log ."
		"gal mycontents ."
		"recommend mycontents .";
	margin-top: calc(var(--fv-height) + var(--header-height));
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
  }  

@media screen and (max-width: 764px) {
	.cz2 {
		position: relative;
		z-index: 90;
		display: grid;
		justify-content: center;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		gap: 0px 0px;
		grid-template-areas:
			"log"
			"gal"
			"mycontents"
			"recommend";
		margin-top: 240px;
	}
}

@media screen and (max-width: 599px) {
	.cz2 {
		margin-top: calc(51px + 31vw);
	}
}

@media screen and (max-width: 375px) {
	.cz2 {
		margin-top: 170px;
	}
}

/* @media screen and (max-width: 604px) {
	.cz2 {
		margin-top: 48vw;
	}
}

@media screen and (max-width: 434px) {
	.cz2 {
		margin-top: 48vw;
	}
} */

.firstView {
	border: 0px solid red;
	position: fixed;
	top: 49px;
	left: 0;
	width: 100%;
	height: 224px;
	z-index: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #202020;
}

.firstView img {
	height: 224px;
	width: auto;
	max-width: none;
	object-fit: cover;
	display: block;
}

@media screen and (max-width: 764px) {
	.firstView {
		top: 0;
	}

	.firstView img {
		position: absolute;
		top: 51px;
		left: 0;
		height: auto;
		width: 100%;
	}
}

.recommend {
	border: 0px solid #ffffff;
	box-shadow: 0 12px 10px -6px rgba(0, 0, 0, .25);
	z-index: 1;
	width: 180px;
	margin: 0px;
	padding: 0;
	grid-column: 1;
	grid-row: 2;
	grid-area: recommend;
}

.rsps {
	border: 0px solid #ffffff;
	background-color: #222222;
	opacity: 0.7;
	filter: alpha(opacity=70);
	/* IE6、IE7対応 */
	-moz-opacity: 0.7;
	/* Firefox1.5以前対応 */
	text-align: left;
	margin: 0;
	padding: 4px;
}

.rs00 {
	/*宣伝スペース用*/
	border: 0px solid #ffffff;
	z-index: 0;
	/*background-color: #222222;*/
	opacity: 0.99;
	/*　99%は透けてるけど、ほぼ透けて見えないのでそれを利用中♪　というか、透かさないと上に表示されない*/
	filter: alpha(opacity=99);
	/* IE6、IE7対応 */
	-moz-opacity: 0.99;
	/* Firefox1.5以前対応 */
	height: 200px;
	text-align: center;
	margin: 0 0 32px 0;
	padding: 0 0 0 0;
}



.gal {
	border: 0px solid #ffffff;
	font-family: century;
	background-color: #222222;
	box-shadow: 0 12px 10px -6px rgba(0, 0, 0, .25);
	z-index: 0;
	opacity: 0.99;
	filter: alpha(opacity=99);
	-moz-opacity: 0.99;
	text-align: center;
	height: auto;
	width: 100%;
	min-height: 200px;
	min-width: 160px;
	margin: 0 0 0 0px;
	padding: 0;
	grid-area: gal;
}

@media screen and (max-width: 764px) {
	.gal {
		background-color: #222222;
		height: auto;
		min-height: 136px;
		margin-bottom: 16px;
	}
}

.gal dt {
	border: 0px solid #ffffff;
	background-color: #101010;
	opacity: 0.99;
	filter: alpha(opacity=99);
	/* IE6、IE7対応 */
	-moz-opacity: 0.99;
	/* Firefox1.5以前対応 */
	text-align: center;
	font-family: Lucida Console;
	font-size: 100%;
	font-weight: bold;
	color: #ffffff;
	margin: 0;
	padding: 0px;
}

.gal dd {
	border: 0px solid #ffffff;
	background-color: #222222;
	opacity: 0.99;
	filter: alpha(opacity=90);
	/* IE6、IE7対応 */
	-moz-opacity: 0.9;
	/* Firefox1.5以前対応 */
	text-align: center;
	line-height: 200%;
	font-size: 90%;
	font-family: century;
	color: #ffffff;
	margin: 0;
	padding: 5px 0 0 0;
}

.gal img {
	border: 0px solid blue;
	width: 50px;
	height: 50px;
	margin: 0px 0 0px 0;
	padding: 0 0 0 0;
}

.rs01 {
	/*宣伝スペース用*/
	border: 0px solid #ffffff;
	z-index: 0;
	opacity: 0.99;
	filter: alpha(opacity=99);
	/* IE6、IE7対応 */
	-moz-opacity: 0.99;
	/* Firefox1.5以前対応 */
	text-align: center;
	font-size: 80%;
	margin: 16px 0 16px 0;
	padding: 0;
}

.rs02 {
	/*宣伝スペース用*/
	border: 0px solid #ffffff;
	z-index: 0;
	background-color: #222222;
	opacity: 0.95;
	filter: alpha(opacity=95);
	/* IE6、IE7対応 */
	-moz-opacity: 0.95;
	/* Firefox1.5以前対応 */
	font-weight: bold;
	font-size: 95%;
	color: #CC0033;
	line-height: 2em;
	text-align: center;
	margin: 0 0 16px 0;
	padding: 0;
}

.log {
	border: 0px solid #ffffff;
	z-index: 0;
	font-family: century;
	width: 100%;
	padding: 0;
	grid-column: 2;
	grid-row: 1;
	grid-area: log;
}

.log dt {
	border: 0px solid #ffffff;
	background-color: #101010;
	opacity: 0.99;
	filter: alpha(opacity=99);
	-moz-opacity: 0.99;
	text-align: left;
	font-family: Lucida Console;
	font-size: 100%;
	font-weight: bold;
	color: #ffffff;
	width: 90%;
	margin: 0 auto;
	padding: 4px;
}

.uplog {
	border: 0px solid #ffffff;
	background-color: #222222;
	box-shadow: 0 12px 10px -6px rgba(0, 0, 0, .25);
	opacity: 0.9;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	text-align: left;
	line-height: 200%;
	font-size: 90%;
	font-family: century;
	color: #ffffff;
	margin: 0px auto 16px auto;
	padding: 0.5em 0 1.5em 1em;
	overflow: auto;
	width: 90%;
	height: clamp(10px, 7vw, 108px);
	min-height: 110px;
}

.uplog p {
	border-bottom: 2px dotted #ffffff;
	text-align: left;
	color: #ffffff;
	white-space: pre;
	/*改行させたくない場合やHTMLに記述した通りに改行した場合は「white-space」を使用する*/
	white-space: pre-line;
	margin: 0;
	padding-bottom: 4px;
	line-height: 19px;
}

.uplog span {
	border-bottom: 2px solid #fff;
	font-size: 0.9rem;
	font-weight: bold;
	line-height: 40px;
}

@media screen and (max-width: 764px) {
	.log dd {
		height: clamp(10px, 23vw, 145px);
		max-height: 110px;
	}
}

.log a:link {
	color: #999;
}

.log a:visited {
	color: #6633CC;
}

.log a:hover,
a:active {
	color: #6666CC;
	text-decoration: underline;
}

.uplog a:link {
	color: #999;
}

.uplog a:visited {
	color: #6633CC;
}

.uplog a:hover,
a:active {
	color: #6666CC;
	text-decoration: underline;
}

.mycontents {
	border: 0px solid pink;
	grid-column: 2;
	grid-row: 2;
	grid-area: mycontents;
}

.spacer {
	border: 0px solid red;
	height: 160px;
	margin-top: 65px;
}

@media screen and (max-width: 764px) {
	.spacer {
		height: 80px;
		margin-top: 170px;
	}
}

@media screen and (max-width: 375px) {
	.spacer {
		height: 40px;
		margin-top: 105px;
	}
}

.cz3 {
	border: 0px solid orange;
	display: grid;
	grid-template-columns: 30% 49%;
	gap: 8px 16px;
	justify-content: center;
	grid-template-areas:
		"about-headline about-headline"
		"request mail";
	position: relative;
	z-index: 90;
	color: #ffffff;
	max-width: 1440px;
	margin: 0 auto;
}

@media screen and (max-width: 764px) {
	.cz3 {
		border: 0px solid orange;
		display: block;
		position: relative;
		z-index: 90;
		color: #ffffff;
	}
}

.cz4 {
	border: 0px solid red;
	display: grid;
	justify-content: center;
	gap: 8px 16px;
	grid-template-columns: minmax(180px, 20.5%) clamp(300px, 70%, 700px);
	grid-template-rows: 0fr 1fr;
	grid-template-areas:
		"prf-headline prf-headline"
		"profile works";
	position: relative;
	z-index: 10;
	color: #ffffff;
	/* background-color: rgb(0, 0, 0, 0.8); */
}

.cz4 h2 {
	background-color: #cc2f75;
	width: 100%;
	text-align: center;
	font-weight: bold;
	padding: 8px;
	grid-area: prf-headline;

	font-family: "Orbitron", sans-serif;
	font-optical-sizing: auto;
	font-weight: 100;
	font-style: normal;
}

.cz4 dt {
	border: 0px solid #fff;
	background-color: #101010;
	height: auto;
	padding: 8px;
}

.prf-details {
	white-space: pre-line;
	margin: 8px 16px 16px 16px;
}

.tools {
	white-space: pre-line;
	margin: 8px 16px 16px 16px;
	max-height: 480px;
}

.profile {
	border: 0px solid darkcyan;
	display: flex;
	flex-direction: column;
	justify-content: start;
	background-color: rgba(34, 34, 34, 0.9);
	box-shadow: 0 12px 10px -6px rgba(0, 0, 0, .25);
	grid-area: profile;
}

.works {
	border: 0px solid sandybrown;
	background-color: rgba(34, 34, 34, 0.9);
	box-shadow: 0 12px 10px -6px rgba(0, 0, 0, .25);
	grid-area: works;
}

.works dd {
	margin: 0;
	white-space: pre-line;
	/* margin: 8px 16px 16px 16px; */
}

.rating {
	color: magenta;
	font-weight: bold;
}

@media screen and (max-width: 764px) {
	.cz4 {
		border: 0px solid red;
		display: grid;
		justify-content: center;
		gap: 0 16px;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas:
			"prf-headline"
			"profile"
			"works";
		position: relative;
		z-index: 10;
		color: #ffffff;
	}
}

/*依頼の際の注意ここから*/
.cz3 h2 {
	background-color: #cc2f75;
	width: 100%;
	text-align: center;
	font-weight: bold;
	padding: 8px;
	grid-area: about-headline;

	font-family: "Orbitron", sans-serif;
	font-optical-sizing: auto;
	font-weight: 100;
	font-style: normal;
}

.contact-caution {
	z-index: 1;
	border: 0px solid magenta;
	background: rgba(34, 34, 34, 0.9);
	box-shadow: 0 12px 10px -6px rgba(0, 0, 0, .25);
	height: auto;
	grid-area: request;
}

.contact-caution dt {
	background: #101010;
	font-weight: bold;
	height: auto;
	margin: 0;
	padding: 8px;
}

.contact-caution dd p {
	border: 0px solid skyblue;
	text-indent: -1em;
	line-height: 1.4rem;
	margin: 0 0 1.2em 1em;
	padding: 0;
}

.req-head {
	border: 0px solid red;
	background: #101010;
	font-weight: bold;
	margin: 0;
	padding: 8px;
}

.detail-request {
	border: 0px solid red;
	list-style-type: disc;
	/* または circle, square, decimal など */
	list-style-position: inside;
	/* or outside（外側） */
	padding-bottom: 16px;
}

.detail-request li {
	border: 0px solid red;
	/* text-indent: -1.4em; */
	width: 90%;
	min-width: 180px;
	margin: 8px;
	white-space: pre-line;
}

ul.detail-request li {
	position: relative;
	padding-left: 1.5em;
	list-style: none;
}

ul.detail-request li::before {
	content: "";
	background-image: url(../img/check.svg);
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 0.6em;
	height: 0.6em;
	/*background-color: #fff;  好きな色に♡*/
}

@media screen and (max-width: 764px) {
	.contact-caution {
		z-index: 1;
		border: 0px solid magenta;
		background: rgba(34, 34, 34, 0.9);
		height: auto;
	}

	.contact-caution dt {
		background: #101010;
		font-weight: bold;
		text-align: center;
		height: auto;
		margin: 0;
		padding: 8px;
	}

	.contact-caution dd p {
		border: 0px solid skyblue;
		text-indent: -1em;
		line-height: 1.4rem;
		width: 80%;
		margin: 0 auto;
		padding: 8px 0;
	}
}

/*依頼の際の注意ここまで*/

/*メールフォームここから*/
.contact-attention {
	border: 0px solid green;
	background: #101010;
	font-weight: bold;
	margin: 0;
	padding: 8px;
}

.contact {
	z-index: 1;
	height: auto;
	grid-area: mail;
}

.mail-form button {
	cursor: pointer;
	border: 2px solid #7e2c50;
	border-radius: 8px;
	margin-top: 8px;
	padding: 8px 16px;
}

@media screen and (max-width: 764px) {
	.contact-attention {
		border: 0px solid green;
		background: #101010;
		font-weight: bold;
		margin: 0;
		padding: 8px;
	}

	.contact {
		z-index: 1;
		height: auto;
	}
}

/*メールフォームここまで*/

.right {
	border: 0px solid #fff;
	background-color: #3b0f22;
	color: #ffffff;
	height: 27vw;
	max-height: 200px;
	margin-top: 160px;

	display: flex;

}

.right div {
	border: 0px solid red;
	/* width: 80%; */
	max-width: 1149px;
	margin: 0 auto;
	padding-top: 2em;
}

@media screen and (max-width: 764px) {
	.right {
		border: 0px solid #fff;
		background-color: #3b0f22;
		color: #ffffff;
		height: 37vw;
		min-height: 320px;
		margin-top: 64px;
		padding: 0 16px;
		display: flex;
		flex-direction: column;
		font-size: 0.7rem;
	}
}

/* トップへ戻るボタンのスタイル――ここから */
.page-top {
	/* buttonタグのリセットCSS */
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;

	/* ボタンの装飾 */
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 100;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #777;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

/* 矢印のスタイル */
.page-top::before {
	content: "";
	width: 12px;
	height: 12px;
	margin-bottom: -6px;
	border-top: solid 3px #444444;
	border-right: solid 3px #444444;
	transform: rotate(-45deg);
}

/* ホバー時のスタイル */
.page-top:hover {
	transform: scale(1.1);
}

/* トップへ戻るボタンのスタイル――ここまで */

.thanks {
	box-shadow: inset 0 0 1em rgba(204, 47, 117, 0.5), 0 0 1em rgba(204, 47, 117, 0.5);
	border: #cc2f75 solid 2px;

	background-color: #202020;
	line-height: 100px;
	text-align: center;
	vertical-align: middle;
	height: 100px;
	width: 400px;
	color: #ffffff;

	position: fixed;
	inset: 0;
	margin: auto;
}