@charset "utf-8";

/*
MY.アンドモア
*/
:root {
	--theme-color: var(--mycolor);
	--base-color: var(--basecolor);
	--head-color: var(--headcolor);
	/**/
	--back-base: url("https://my.andmore.click/css/img/back-base.svg");
	--back-theme: url("https://my.andmore.click/css/img/back-theme.svg");
	--back-theme-color: var(--mycolor-back);
	/**/
	--head-ABOUT: url("https://my.andmore.click/css/img/head-ABOUT.svg");
	--head-ACCESS: url("https://my.andmore.click/css/img/head-ACCESS.svg");
	--head-ARTICLE: url("https://my.andmore.click/css/img/head-ARTICLE.svg");
	--head-CHECK: url("https://my.andmore.click/css/img/head-CHECK.svg");
	--head-CONCEPT: url("https://my.andmore.click/css/img/head-CONCEPT.svg");
	--head-CONTACT: url("https://my.andmore.click/css/img/head-CONTACT.svg");
	--head-CONTENTS: url("https://my.andmore.click/css/img/head-CONTENTS.svg");
	--head-DETAILS: url("https://my.andmore.click/css/img/head-DETAILS.svg");
	--head-FAQ: url("https://my.andmore.click/css/img/head-FAQ.svg");
	--head-FEATURE: url("https://my.andmore.click/css/img/head-FEATURE.svg");
	--head-FEATURE_VIEW: url("https://my.andmore.click/css/img/head-FEATURE_VIEW.svg");
	--head-GALLERY: url("https://my.andmore.click/css/img/head-GALLERY.svg");
	--head-GUIDE: url("https://my.andmore.click/css/img/head-GUIDE.svg");
	--head-HERO_IMG: url("https://my.andmore.click/css/img/head-HERO_IMG.svg");
	--head-INDEX: url("https://my.andmore.click/css/img/head-INDEX.svg");
	--head-INSTAGRAM: url("https://my.andmore.click/css/img/head-INSTAGRAM.svg");
	--head-LINKS: url("https://my.andmore.click/css/img/head-LINKS.svg");
	--head-MAIL: url("https://my.andmore.click/css/img/head-MAIL.svg");
	--head-MESSAGE: url("https://my.andmore.click/css/img/head-MESSAGE.svg");
	--head-MORE: url("https://my.andmore.click/css/img/head-MORE.svg");
	--head-NAME: url("https://my.andmore.click/css/img/head-NAME.svg");
	--head-NEWS: url("https://my.andmore.click/css/img/head-NEWS.svg");
	--head-NOTES: url("https://my.andmore.click/css/img/head-NOTES.svg");
	--head-NOW: url("https://my.andmore.click/css/img/head-NOW.svg");
	--head-NOW_VOICE: url("https://my.andmore.click/css/img/head-NOW_VOICE.svg");
	--head-ORDER: url("https://my.andmore.click/css/img/head-ORDER.svg");
	--head-PHOTO: url("https://my.andmore.click/css/img/head-PHOTO.svg");
	--head-PICKUP: url("https://my.andmore.click/css/img/head-PICKUP.svg");
	--head-PLAN: url("https://my.andmore.click/css/img/head-PLAN.svg");
	--head-SCENE: url("https://my.andmore.click/css/img/head-SCENE.svg");
	--head-SHOWCASE: url("https://my.andmore.click/css/img/head-SHOWCASE.svg");
	--head-SPEC: url("https://my.andmore.click/css/img/head-SPEC.svg");
	--head-SPECIAL: url("https://my.andmore.click/css/img/head-SPECIAL.svg");
	--head-STATS: url("https://my.andmore.click/css/img/head-STATS.svg");
	--head-TOPICS: url("https://my.andmore.click/css/img/head-TOPICS.svg");
	--head-YOUTUBE: url("https://my.andmore.click/css/img/head-YOUTUBE.svg");
	--head-VOICE: url("https://my.andmore.click/css/img/head-VOICE.svg");
	--head-360VIEW: url("https://my.andmore.click/css/img/head-360VIEW.svg");
	--head-360VIEW_PLUS: url("https://my.andmore.click/css/img/head-360VIEW_PLUS.svg");
}

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

header {

	#and path,
	#my path {
		fill: rgb(var(--theme-color));
	}

	#flogo .head {
		margin-top: 5px;

		#theme path {
			fill: rgb(var(--theme-color));
		}

		#andmore path {
			fill: rgb(var(--head-color));
		}
	}

}

main {

	.outline {
		position: relative;
		z-index: 100;
	}

	section .outline:has(.h1)::before {
		background: linear-gradient(
			to right,
			rgb(var(--theme-color)) 0 35px,
			#000 35px 100%
		);
	}

}

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

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

header {

	#flogo {
		margin-bottom: 10px;
		padding: 15px 15px 0;
		text-align: center;

		svg,
		img {
			width: 70%;
		}

		.logo {
			padding-bottom: 3px;
			border-bottom: 5px solid rgb(var(--base-color));
		}
	}

	.pankuzu.wrap {
		padding: 0;
	}

	#nowvoice .nowvoice-body .face {
		width: 70%;
		margin: 0 auto;
	}

}

main {

	section .outline:has(.h1)::before {
		height: 50px;
	}

	section .outline {

		&:has(.h1),
		&:has(.ex) {
			margin-bottom: 15px;
			background-size: auto 50px;
		}

		.h1 {
			padding-left: 35px;
			height: 50px;
		}

		.h1 + .ex {
			margin-top: 5px;
		}
	}

}

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

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

body {
	background-size: 95% auto;
}

header {

	margin-top: 15px;

	#flogo {
		display: grid;
		grid-template-columns: 2fr 3fr;
		gap: 15px;
	}

	#flogo .logo {
		grid-column: 1;

		a {
			display: inline-block;
			width: 75%;
		}

		svg:nth-of-type(2) {
			margin-top: 7px;
		}
	}

	#flogo .pankuzu {
		grid-column: 2;
		justify-self: end;
		width: fit-content;
		margin: 0;
	}

	#flogo .pankuzu.wrap {
		width: fit-content;
		min-width: 0;
		margin: 0;
	}

	#nowvoice .nowvoice-body {
		margin-top: 15px;
		padding: 15px;
		background-color: rgba(255, 255, 255, 0.3);
	}

}

main {

	section .outline:has(.h1),
	section .outline:has(.ex) {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 20px;

		.h1 {
			height: 85px;
			padding-left: 58px;
			display: flex;
			align-items: flex-start;
			white-space: nowrap;
			background-size: auto 85px;
		}

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

			p {
				text-align: left;
			}
		}
	}

	section .outline:has(.h1)::before {
		background: linear-gradient(
			to right,
			rgb(var(--theme-color)) 0 60px,
			#000 60px 100%
		);
	}

}

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