@charset "utf-8";

/*
EX.アンドモア
*/
:root {
	--theme-color: var(--excolor);
	--base-color: var(--basecolor);
	--head-color: var(--headcolor);
	/**/
	--back-base: url("https://ex.andmore.click/css/img/back-base.svg");
	--back-theme: url("https://ex.andmore.click/css/img/back-theme.svg");
	--back-theme-color: var(--excolor-back);
	/**/
	--head-ABOUT: url("https://ex.andmore.click/css/img/head-ABOUT.svg");
	--head-ACCESS: url("https://ex.andmore.click/css/img/head-ACCESS.svg");
	--head-ARTICLE: url("https://ex.andmore.click/css/img/head-ARTICLE.svg");
	--head-CONTACT: url("https://ex.andmore.click/css/img/head-CONTACT.svg");
	--head-CONTENTS: url("https://ex.andmore.click/css/img/head-CONTENTS.svg");
	--head-DETAILS: url("https://ex.andmore.click/css/img/head-DETAILS.svg");
	--head-FAQ: url("https://ex.andmore.click/css/img/head-FAQ.svg");
	--head-FEATURE: url("https://ex.andmore.click/css/img/head-FEATURE.svg");
	--head-FEATURE_VIEW: url("https://ex.andmore.click/css/img/head-FEATURE_VIEW.svg");
	--head-GALLERY: url("https://ex.andmore.click/css/img/head-GALLERY.svg");
	--head-GUIDE: url("https://ex.andmore.click/css/img/head-GUIDE.svg");
	--head-HEADER_IMG: url("https://ex.andmore.click/css/img/head-HEADER_IMG.svg");
	--head-HERO_IMG: url("https://ex.andmore.click/css/img/head-HERO_IMG.svg");
	--head-INDEX: url("https://ex.andmore.click/css/img/head-INDEX.svg");
	--head-LINKS: url("https://ex.andmore.click/css/img/head-LINKS.svg");
	--head-CHECK: url("https://ex.andmore.click/css/img/head-CHECK.svg");
	--head-MAIL: url("https://ex.andmore.click/css/img/head-MAIL.svg");
	--head-MESSAGE: url("https://ex.andmore.click/css/img/head-MESSAGE.svg");
	--head-MORE: url("https://ex.andmore.click/css/img/head-MORE.svg");
	--head-MOVIE: url("https://ex.andmore.click/css/img/head-MOVIE.svg");
	--head-NAME: url("https://ex.andmore.click/css/img/head-NAME.svg");
	--head-NEWS: url("https://ex.andmore.click/css/img/head-NEWS.svg");
	--head-NOTES: url("https://ex.andmore.click/css/img/head-NOTES.svg");
	--head-ORDER: url("https://ex.andmore.click/css/img/head-ORDER.svg");
	--head-PHOTO: url("https://ex.andmore.click/css/img/head-PHOTO.svg");
	--head-PICKUP: url("https://ex.andmore.click/css/img/head-PICKUP.svg");
	--head-PLAN: url("https://ex.andmore.click/css/img/head-PLAN.svg");
	--head-SCENE: url("https://ex.andmore.click/css/img/head-SCENE.svg");
	--head-SHOWCASE: url("https://ex.andmore.click/css/img/head-SHOWCASE.svg");
	--head-SPEC: url("https://ex.andmore.click/css/img/head-SPEC.svg");
	--head-SPECIAL: url("https://ex.andmore.click/css/img/head-SPECIAL.svg");
	--head-TOPICS: url("https://ex.andmore.click/css/img/head-TOPICS.svg");
	--head-YOUTUBE: url("https://ex.andmore.click/css/img/head-YOUTUBE.svg");
	--head-VOICE: url("https://ex.andmore.click/css/img/head-VOICE.svg");
}

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

header {

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

	#flogo {

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

		.logo {
			width: 125px;
			padding-bottom: 5px;
			border-bottom-style: solid;
			border-bottom-color: rgb(var(--theme-color));
			border-bottom-width: 5px;
		}

		.exname {
			font-size: 20px;
			line-height: 110%;
		}

		.booth {
			display: flex;
			gap: 5px;
			align-items: center;
		}

		.head {
			width: auto;
			display: flex;
			align-items: flex-end;

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

			span {
				flex: 1;
				height: 5px;
				background-color: rgb(var(--theme-color));
				clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%);
			}
		}
	}

	#featureimg {

		& .outline {
			display: none;
		}

		.fwrap {
			padding: 0;
			background: none;
			border: 10px solid rgba(var(--bc-fwrap), var(--ac-fwrap));
		}

		.fwrap .fwrap {
			padding: 10px;
			border: none;
			background-color: rgba(255, 255, 255, 0.7);
		}
	}

}

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

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

header {

	#flogo {
		width: 100%;
		margin: 10px 0;
		display: grid;
		grid-template-columns: 125px 1fr;
		grid-template-rows: auto auto 25px;
		grid-template-areas:
			"logo    exlogo"
			"logo    head"
			"exname  exname";
		column-gap: 5px;

		.logo {
			grid-area: logo;
		}

		.exlogo {
			grid-area: exlogo;
			align-self: end;

			img {
				width: auto;
				height: 40px;
				max-width: 100%;
			}
		}

		.head {
			grid-area: head;

			svg {
				height: 27px;
				max-width: 100%;
			}
		}

		.exname {
			grid-area: exname;
			margin-top: 15px;
			padding: 5px 5px 7px;
			align-self: center;
			text-align: center;
			background-color: rgb(var(--theme-color));
			color: #fff;
		}
	}

	#featureimg .wrap {
		padding-top: 0;
	}

}

main {

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

	section .outline {

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

		.h1 {
			display: flex;
			align-items: flex-end;
			padding-left: 35px;
			height: 50px;
		}

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

}

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

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

body {
	background-size: 95% auto;
}

header {

	margin-top: 15px;

	#flogo {
		display: grid;
		gap: 5px;
		grid-template-columns: 380px auto;
		grid-template-rows: 70px 50px 55px;
		grid-template-areas:
			"logo exlogo"
			"logo exname"
			"logo head";

		.logo {
			grid-area: logo;
		}

		.exlogo {
			grid-area: exlogo;
			align-self: end;
			justify-self: start;

			img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 70px;
				object-fit: contain;
			}
		}

		.exname {
			grid-area: exname;
			font-size: 48px;
			line-height: 1;
		}

		.head {
			grid-area: head;

			span {
				height: 7px;
				clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%);
			}

			svg {
				width: 420px;
			}
		}

		/**/
		.logo {
			width: 380px;
			border-bottom-width: 7px;

			svg {
				transform: translateY(-7px);
			}
		}
	}

	#featureimg {

		.fwrap {
			border: 15px solid rgba(var(--bc-fwrap), var(--ac-fwrap));
		}

		.fwrap .fwrap {
			padding: 15px;
		}
	}

}

main {

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

		.h1 {
			padding-left: 63px;
			margin-bottom: 10px;
			display: flex;
			align-items: flex-end;
			white-space: nowrap;
		}

		.ex {
			margin-top: 0;
			margin-bottom: 20px;
			display: flex;
			align-items: flex-end;
		}
	}

}

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