@charset "utf-8";

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

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

header {

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

	#flogo .head {

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

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

	#featureimg {

		& .outline {
			display: none;
		}

		.fwrap {
			flex-direction: column;
		}

		.subfeatureimg {

			.fwrap {
				background-color: rgb(var(--theme-color));
			}

			dd > div {
				display: flex;
				flex-direction: column;

				/*gap: 15px;*/

				.pict {
					width: 100%;
				}
			}

			dd.img-r > div {
				flex-direction: column-reverse;
			}
		}
	}
}

main {

	#about,
	#access,
	#article,
	#mailtoplate,
	#contact,
	#contents,
	#table,
	#faq,
	#feature,
	#feature360,
	#photobox,
	#class,
	#listgrp,
	#list,
	#message,
	#moregrp,
	#youtube,
	#nameboard,
	#news,
	#notes,
	#ordercard,
	#photo,
	#pictboard,
	#plan,
	#slick,
	#spec,
	#banner,
	#topic,
	#qrcard,
	#voice,
	#simple360,
	#variation360 {

		.fpart {
			margin-top: 0;
		}
	}

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

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

}

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

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

header {

	#flogo {
		margin-bottom: 10px;
		padding: 15px 15px 0;
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto auto;
		grid-template-areas:
			"logo media"
			"logo head";

		svg,
		img {
			width: 100%;
		}

		.logo {
			grid-area: logo;
			align-self: flex-end;
			padding-bottom: 3px;
			border-bottom: 5px solid rgb(var(--base-color));
		}

		.head {
			grid-area: head;
		}

		.media {
			grid-area: media;
		}
	}

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

}

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 {
				line-height: 50px;
			}
		}

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

}

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

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

body {
	background-size: 95% auto;
}

header {
	margin-top: 45px;

	#flogo {
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 10px;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);

		.logo svg {
			width: calc(35% + 20px);
		}

		img {
			width: calc(35% - 20px);
		}

		.head svg {
			width: calc(35% - 20px);
		}
	}

	#featureimg {

		& .featureimg-body > .fwrap {
			padding: 0;
			border: none;
			background: none;
			display: flex;
			flex-direction: row-reverse;
		}

		& div:has(> .featureimg) {
			width: 65%;
			border: 20px solid rgb(var(--base-color));
			border-radius: 5px;
		}

		& .subfeatureimg {
			z-index: 1000;
			width: calc(35% + 20px);
			margin-right: -20px;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding-bottom: 20px;

			.fwrap {
				width: 100%;
				padding: 0;
				flex-direction: column;
				border: 10px solid rgb(var(--base-color));
				border-right: 20px solid rgb(var(--base-color));
				border-radius: 5px 0 0 5px;

				dt,
				dd {
					padding: 15px;
				}

				dd > div {
					gap: 15px;
				}

				.text {
					width: 100%;
					padding: 0;
					align-items: start;
					justify-content: flex-start;
				}
			}
		}
	}
}

main {

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

		.h1 {
			height: 85px;
			padding-left: 40px;
			display: flex;
			align-items: center;
			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,
			rgb(var(--base-color)) 60px 100%
		);
	}

}

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