@charset "utf-8";

/*
アンドモア
*/
/*~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~*/

html::before,
html::after {
	content: "";
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100svh;
	pointer-events: none;
}

html::before {
	z-index: -2;

	background-image: var(--back-base);
	background-size: cover;
	background-position: left top;
	background-repeat: no-repeat;
}

html::after {
	z-index: -1;

	background-color: rgb(var(--back-theme-color));

	-webkit-mask-image: var(--back-theme);
	mask-image: var(--back-theme);

	-webkit-mask-size: cover;
	mask-size: cover;

	-webkit-mask-position: left top;
	mask-position: left top;

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/*~~*/

#mng-editor {
	margin: 15px 0 15px;
}

section .editor {
	z-index: 10000;
	position: relative;
}

header {
	.pankuzu {
		margin-top: 5px;
		font-size: 12px;

		.fwrap {
			width: 100%;
			border-radius: 5px;
		}

		div {
			display: inline-block;
			padding: 5px 15px 5px 10px;
			position: relative;
			overflow: hidden;
			text-align: center;
		}

		div::after {
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 0;
			height: 0;
			border-left: 15px solid transparent;
			border-bottom: 20px solid rgb(var(--theme-color));
		}
	}
}

main {

	margin-top: 10px;

	> .andmore {
		display: flex;
		flex-direction: column;
	}

	section {
		.outline {
			/*background-position: left center;*/
			background-repeat: no-repeat;
		}

		.outline:has(.hi, .h1, h2, .ex) + .fpart {
			margin-top: 15px;
		}

		.fwrap {
			background: rgba(var(--bc-fwrap), var(--ac-fwrap));
		}
	}

	/*~~*/

	/*
	HEAD SVG MASK
	*/
	section .outline:has(.h1) {
		position: relative;
	}

	section .outline:has(.h1)::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		-webkit-mask-image: var(--head-image);
		mask-image: var(--head-image);

		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;

		-webkit-mask-position: left center;
		mask-position: left center;

		-webkit-mask-size: auto 100%;
		mask-size: auto 100%;

		background-color: rgb(var(--theme-color));

		z-index: 0;
		pointer-events: none;
	}

	section .outline:has(.h1) > * {
		position: relative;
		z-index: 1;
	}

	/*
	HEAD SVG
	*/
	#about .outline {
		--head-image: var(--head-ABOUT);
	}

	#access .outline {
		--head-image: var(--head-ACCESS);
	}

	#article .outline {
		--head-image: var(--head-ARRICLE);
	}

	#qrcard .outline {
		--head-image: var(--head-CHECK);
	}

	#headerimg .outline {
		--head-image: var(--head-CONCEPT);
	}

	#contact .outline {
		--head-image: var(--head-CONTACT);
	}

	#contents .outline {
		--head-image: var(--head-CONTENTS);
	}

	#table .outline {
		--head-image: var(--head-DETAILS);
	}

	#faq .outline {
		--head-image: var(--head-FAQ);
	}

	#feature .outline {
		--head-image: var(--head-FEATURE);
	}

	#feature360 .outline {
		--head-image: var(--head-FEATURE_VIEW);
	}

	#photobox .outline {
		--head-image: var(--head-GALLERY);
	}

	#class .outline {
		--head-image: var(--head-GUIDE);
	}

	#heroimg .outline {
		--head-image: var(--head-HERO_IMG);
	}

	#listgrp .outline {
		--head-image: var(--head-INDEX);
	}

	#instagram .outline {
		--head-image: var(--head-INSTAGRAM);
	}

	#list .outline {
		--head-image: var(--head-LINKS);
	}

	#mailtoplate .outline {
		--head-image: var(--head-MAIL);
	}

	#message .outline {
		--head-image: var(--head-MESSAGE);
	}

	#moregrp .outline {
		--head-image: var(--head-MORE);
	}

	#nameboard .outline {
		--head-image: var(--head-NAME);
	}

	#news .outline {
		--head-image: var(--head-NEWS);
	}

	#notes .outline {
		--head-image: var(--head-NOTES);
	}

	#nowstatus .outline {
		--head-image: var(--head-NOW);
	}

	#nowvoice .outline {
		--head-image: var(--head-NOW_VOICE);
	}

	#ordercard .outline {
		--head-image: var(--head-ORDER);
	}

	#photo .outline {
		--head-image: var(--head-PHOTO);
	}

	#pictboard .outline {
		--head-image: var(--head-PICKUP);
	}

	#plan .outline {
		--head-image: var(--head-PLAN);
	}

	#mp4 .outline {
		--head-image: var(--head-SCENE);
	}

	#slick .outline {
		--head-image: var(--head-SHOWCASE);
	}

	#spec .outline {
		--head-image: var(--head-SPEC);
	}

	#banner .outline {
		--head-image: var(--head-SPECIAL);
	}

	#stats .outline {
		--head-image: var(--head-STATS);
	}

	#topic .outline {
		--head-image: var(--head-TOPICS);
	}

	#youtube .outline {
		--head-image: var(--head-YOUTUBE);
	}

	#voice .outline {
		--head-image: var(--head-VOICE);
	}

	#simple360 .outline {
		--head-image: var(--head-360VIEW);
	}

	#variation360 .outline {
		--head-image: var(--head-360VIEW_PLUS);
	}

	/*~~*/

	#feature.custom {
		summary {
			padding: 5px 10px;
			background-color: #000;
			color: #fff;
		}
	}

	#heroimg.custom {
		z-index: 500;
		pointer-events: none;

		.fwrap {
			padding: 0;
			background: none;
		}
	}

	#photobox.custom {
		.fwrap {
			background: none;
			padding: 0;
		}
	}

	/*~~*/

	.outline .h1 {
		white-space: nowrap;
	}

	.outline .ex {
		margin-top: 10px;
	}

	/*~~*/

	#contact {
		.fwrap:has(.ok) {
			background-color: rgb(var(--theme-color));
		}
	}

}

footer {
	margin-top: 5px;

	#followpage {
		background-color: rgba(var(--basecolor), 0.5);

		.followpage-body li {
			background-color: rgb(var(--basecolor));
		}

		.nt {
			display: none;
		}
	}

	#more {
		background-color: rgb(var(--theme-color));

		.outline {
			display: none;
		}

		.more-body {
			gap: 20px;

			.more {
				width: 100%;
				border-radius: 6px;
				outline: solid 1px #fff;
				outline-offset: 5px;
				background: #fff;
			}
		}
	}

	#profile {
		background: rgba(var(--bc-fwrap), var(--ac-fwrap));
	}

	#footer {
		background-color: #fff;
	}

}

/*~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~*/

/*SP*/
@media screen and (max-width: 768px) {
/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/

header .wrap {
	padding-top: 0;
	padding-bottom: 0;
}

section .outline .h1 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#more .wrap {
	padding: 20px;
}

/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/
}

/*PC*/
@media screen and (min-width: 769px) {
/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/

body {
	background-size: 95% auto;
}

section .editor {
	min-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

header {
	.pankuzu {
		text-align: right;

		.fwrap {
			width: auto;
		}
	}
}

main {
	margin-top: 35px;

	> .andmore {
		gap: 35px;
		margin-bottom: 35px;
	}

	.outline {
		display: flex;
		gap: 15px;

		.h1 {
			height: 85px;
			padding-left: 15px;
		}

		.ex {
			height: 85px;
			margin: 0;
			display: flex;
			align-items: center;

			p {
				text-align: left;
			}
		}
	}

	#qrcard {
		.qrcard-body {
			li {
				width: calc((100% - 30px) / 3);
			}
		}
	}

	#cta .cta-body {
		width: 60%;
		margin: 0 auto;
	}

	#banner {
		.outline,
		.editor,
		.writer {
			width: 70%;
			min-width: 1000px;
			margin: 0 auto;
		}

		.wrap {
			width: 100%;
		}

		ul {
			gap: 5px !important;
			background: rgb(var(--basecolor));
			padding: 15px 0;
		}

		li {
			width: calc((100% - 15px) / 4) !important;
		}
	}

	#photobox {
		.wrap {
			width: 100%;
		}

		.outline {
			width: 70%;
			min-width: 1000px;
			margin: 0 auto;
			padding: 15px 0;
		}

		.form-wrap {
			width: 70%;
			min-width: 1000px;
			margin: 0 auto;
			padding: 15px 0;
		}

		ul {
			gap: 5px !important;
			background: rgb(var(--basecolor));
			padding: 15px 0;
		}

		li {
			width: calc((100% - 20px) / 5) !important;
		}
	}

	#followpage {
		.wrap {
			padding: 20px 0;
		}
	}

	#more {
		padding: 20px 0;

		.more-body {
			gap: 30px;

			.more {
				width: calc((100% - 120px) / 5);
			}
		}
	}

}

footer {
	#followpage {
		.wrap {
			padding: 20px 0;
		}
	}

	#more {
		padding: 20px 0;

		.more-body {
			gap: 30px;

			.more {
				width: calc((100% - 120px) / 5);
			}
		}
	}
}

/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/
}