/*
Theme Name: スタジオメディア
Description:
Theme URI:
Author: スリーグッド鹿児島
Author URI:
Version:
License:
License URI:
*/

/* --------------------------
    variables
-------------------------- */
:root {
    --content-width: 1100px;
    --narrow-width: 900px;
    --wide-width: 1200px;
    --large-width: 1360px;
    --header-height: 120px;
    --color: #333;
    --color-red: #eb4b4b;
    --line-height: 1.75;
    --font-size: 16px;
    --font-size-sp: 14px;
    --letter-spacing: 0.1em;
    --font-awesome: 'Font Awesome 6 Free';
    --font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'ＭＳ Ｐゴシック', sans-serif;
    --display-font: 'Poppins', var(--font-family);
    --serif-font: 'Shippori Mincho B1', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
	--serif-font2: 'Instrument Serif', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
    --side-margin: 80px;
    --side-margin-narrow: 50px;
    --icon-external: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDExLjQ2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzMzMzMzMzt9PC9zdHlsZT48L2RlZnM+PGc+PGc+PHJlY3QgY2xhc3M9ImNscy0xIiB5PSIyLjg1IiB3aWR0aD0iMTIuOTEiIGhlaWdodD0iOC42MSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIxNiA5LjAzIDE1LjE1IDkuMDMgMTUuMTUgLjg1IDIuNjcgLjg1IDIuNjcgMCAxNiAwIDE2IDkuMDMiLz48L2c+PC9nPjwvc3ZnPg==);
    --icon-external-w:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDExLjQ2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I0ZGRkZGRjt9PC9zdHlsZT48L2RlZnM+PGc+PGc+PHJlY3QgY2xhc3M9ImNscy0xIiB5PSIyLjg1IiB3aWR0aD0iMTIuOTEiIGhlaWdodD0iOC42MSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIxNiA5LjAzIDE1LjE1IDkuMDMgMTUuMTUgLjg1IDIuNjcgLjg1IDIuNjcgMCAxNiAwIDE2IDkuMDMiLz48L2c+PC9nPjwvc3ZnPg==);
    --icon-arrow: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIKCSB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMzMzMzMzO30KPC9zdHlsZT4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIxMi45LDkgMy4xLDkgMy4xLDggMTAuOSw4IDEwLjUsNy42IDExLjMsNyAiLz4KPC9zdmc+Cg==);
    --icon-arrow-w: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIKCSB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIxMi45LDkgMy4xLDkgMy4xLDggMTAuOSw4IDEwLjUsNy42IDExLjMsNyAiLz4KPC9zdmc+Cg==);
    --icon-spiner: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjYWFhIiBkPSJNNDMuOTM1LDI1LjE0NWMwLTEwLjMxOC04LjM2NC0xOC42ODMtMTguNjgzLTE4LjY4M2MtMTAuMzE4LDAtMTguNjgzLDguMzY1LTE4LjY4MywxOC42ODNoNC4wNjhjMC04LjA3MSw2LjU0My0xNC42MTUsMTQuNjE1LTE0LjYxNWM4LjA3MiwwLDE0LjYxNSw2LjU0MywxNC42MTUsMTQuNjE1SDQzLjkzNXoiPgo8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVUeXBlPSJ4bWwiCiAgICBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iCiAgICB0eXBlPSJyb3RhdGUiCiAgICBmcm9tPSIwIDI1IDI1IgogICAgdG89IjM2MCAyNSAyNSIKICAgIGR1cj0iMC42cyIKICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CjwvcGF0aD4KPC9zdmc+);
	--ph-bg: url(/wp-content/uploads/2024/10/studiomedia_gaikan.webp);
	--ph-bg-recruit: url(/wp-content/uploads/2024/05/media_recruite2.webp);
	--ornament: url(/wp-content/themes/studiomedia/src/studiomedia-top-decoration.svg);
	--shrine-visit-campaign: url(/wp-content/themes/studiomedia/src/studiomedia-privilege-illust.svg);
	--plan-ornament1: url(/wp-content/themes/studiomedia/src/plan-ornament1.svg);
	--plan-ornament2: url(/wp-content/themes/studiomedia/src/plan-ornament2.svg);
	--plan-ornament3: url(/wp-content/themes/studiomedia/src/plan-ornament3.svg);
	--plan-ornament4: url(/wp-content/themes/studiomedia/src/plan-ornament4.svg);
	--plan-ornament5: url(/wp-content/themes/studiomedia/src/plan-ornament5.svg);
	--plan-ornament6: url(/wp-content/themes/studiomedia/src/plan-ornament6.svg);
}

/* --------------------------
    reset
-------------------------- */
* {
    margin: 0;
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
    box-sizing: border-box;
}

*:before,
*:after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

body {
    font-feature-settings: "pkna";
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    color: var(--color);
    font-family: var(--font-family);
    font-weight: 500;
    min-height: 100vh;
    background-color: #fff;
	counter-reset: count;
	width: 100vw;
	overflow-x: hidden;
}

body:before {
	content: '';
	display: block;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

body.show:before {
	background-color: #fff;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s 1s ease;
}

body.home.show:before {
	transition: all 0.3s 3s ease;
}

body:after {
	content: '' !important;
	display: flex !important;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background-image: var(--icon-spiner) !important;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 32px 32px;
	font-family: var(--display-font);
	font-size: 0.75em;
	color: #555;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

body.show:after {
	content: 'COMPLETED!' !important;
	opacity: 0;
	pointer-events: none;
	background-image: unset !important;
	transition: all 0s 1s ease;
}

body.home.show:after {
	content: '' !important;
}

main {
    display: block;
}

img,
input[type="image"],
video,
embed,
iframe,
marquee,
object,
table {
    display: block;
    max-width: 100%;
    aspect-ratio: attr(width) / attr(height);
}

a {
    color: inherit;
    text-decoration: none;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: 0.75rem;
}

h6 {
    font-size: 0.75rem;
    font-weight: 500;
}

table {
    border-spacing: 0;
}

@media (max-width: 768px) {
	body {
		font-size: var(--font-size-sp);
	}
}


/* --------------------------
    common
-------------------------- */
.content-width {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
}

.narrow-width {
    width: 100%;
    max-width: var(--narrow-width);
    margin: 0 auto;
}

.wide-width {
    width: 100%;
    max-width: var(--wide-width);
    margin: 0 auto;
}

.large-width {
    width: 100%;
    max-width: var(--large-width);
    margin: 0 auto;
}

.clearfix {
    clear: both;
}

.section-padding {
	padding: 4em var(--side-margin);
}

.section-padding-low {
	padding: 4em 1em;
}

.section-padding-full {
	padding: 4em 0;
}

.button-wrap {
	margin-top: 2em;
}

.button-wrap.center {
	text-align: center;
}

.button {
	font-weight: 700;
	padding-right: 3em;
	position: relative;
}

.button:before {
	content: '';
	display: block;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	border: 1px solid #333;
	background-image: var(--icon-arrow);
	background-position: center;
	background-size: 75%;
	background-repeat: no-repeat;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease;
}

.button:hover:before {
	background-color: #333;
	background-image: var(--icon-arrow-w);
	transition: all 0.3s ease;
}

.button2 {
	display: inline-block;
	background-color: #ddd;
	padding: 1em 3em 1em 2em;
	font-weight: 700;
	position: relative;
	transition: all 0.3s ease;
}

.button2:before {
	content: '';
	display: block;
	border-top: 4px solid transparent;
	border-left: 4px solid #333;
	border-right: 4px solid transparent;
	border-bottom: 4px solid transparent;
	position: absolute;
	top: 50%;
	right: 1.5em;
	transform: translateY(-50%);
	transition: all 0.3s ease;
}

.button2:hover {
	color: #fff;
	background-color: #333;
	transition: all 0.3s ease;
}

.button2:hover:before {
	border-left: 4px solid #fff;
	right: 1em;
	transition: all 0.3s ease;
}

.button3 {
	display: inline-block;
	border: 1px solid #aaa;
	background-color: #fff;
	padding: 1em 4em 1em 1em;
	text-align: center;
	position: relative;
	transition: all 0.3s ease;
}

.button3:before {
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 1.5em;
    transform: translateY(-50%);
    transition: all 0.3s ease;
	background-image: var(--icon-arrow);
    width: 2em;
    height: 2em;
	transition: all 0.3s ease;
}

.button3:hover {
	background-color: #333;
	color: #fff;
	border: 1px solid #333;
}

.button3:hover:before {
	right: 1em;
	transition: all 0.3s ease;
	background-image: var(--icon-arrow-w);
}

.button-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	justify-content: space-between;
}

.button-list > li {
	width: calc(50% - 0.25em);
}

.button-list > li:nth-of-type(odd) {
	margin-right: 0.5em;
}

.button-list > li:nth-of-type(n+3) {
	margin-top: 0.5em;
}

.button-list > li > a {
	width: 100%;
}

.heading {
	display: flex;
	flex-flow: column;
	font-size: 1.25em;
	margin-bottom: 1em;
}

.heading:before {
	content: attr(data-text);
	font-family: var(--display-font);
	font-size: 2.5em;
	line-height: 1.25;
	font-weight: 700;
}

.heading-serif {
	display: flex;
	flex-flow: column;
	font-size: 1.25em;
	margin-bottom: 1em;
	font-family: var(--serif-font2);
}

.heading-serif:before {
	content: attr(data-text);
	font-size: 2.5em;
	line-height: 1.25;
	font-weight: 700;
}

.heading2 {
	font-family: var(--display-font);
	font-size: 2.5em;
	margin-bottom: 2rem;
	display: flex;
	flex-flow: column;
}

.heading2:after {
	content: '';
	border-bottom: 1px solid #333;
}

.bracket {
	text-align: center;
	margin-bottom: 2em;
	margin-top: 3em;
}

.bracket > span {
	display: inline-block;
	padding: 0.5em 2em;
	position: relative;	
}

.bracket > span:before {
	content: '';
	display: block;
	width: 0.5em;
	height: 100%;
	border-top: 1px solid var(--color);
	border-left: 1px solid var(--color);
	border-bottom: 1px solid var(--color);
	position: absolute;
	top: 0;
	left: 0;
}

.bracket > span:after {
	content: '';
	display: block;
	width: 0.5em;
	height: 100%;
	border-top: 1px solid var(--color);
	border-right: 1px solid var(--color);
	border-bottom: 1px solid var(--color);
	position: absolute;
	top: 0;
	right: 0;
}

.heading.center {
	align-items: center;
}

.bg-gray {
	background-color: #f5f5f5;
}

.bg-pink {
	background-color: #fff6f9;
}

.youtube-wrap {
	position: relative;
	width: 100%;
	padding-top: calc(100% / 16 * 9);
	margin-bottom: 2rem;
}

.youtube-wrap > iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.col2 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4rem;
}

.col2 > * {
	width: calc(50% - 1rem);
	height: 100%;
}

.col2 > * > figcaption {
	font-size: 0.75em;
	margin-top: 1em;
	text-align: justify;
}

.col2.center {
	align-items: center;
}

.col3 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.col3 > * {
	width: calc(100% / 3 - 1rem);
	height: 100%;
}

.mt1 {
	margin-top: 1em;
}

.mt2 {
	margin-top: 2em;
}

.mt4 {
	margin-top: 4em;
}

.mb2 {
	margin-bottom: 2em;
}

.mb4 {
	margin-bottom: 4em;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

h2.recruit-decoration {
	display: flex;
	align-items: center;
	margin-bottom: 1em;
	margin-left: 2rem;
	position: relative;
}

h2.recruit-decoration:before {
	content: '';
	background: linear-gradient(135deg, #042666 10%, #f46464 100%);
	display: block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	position: absolute;
	left: -2rem;
	top: 50%;
	transform: translateY(-50%);
}

h3.recruit-decoration {
	border-left: 4px solid;
	border-image: linear-gradient(180deg, #042666 5%, #f46464 100%) 1;
	padding: 0em 1em;
	margin-bottom: 1em;
}

ul.recruit-decoration  {
	list-style-type: none;
	background-color: #fff;
    padding: 2em;
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
	margin-bottom: 3em;
}

ul.recruit-decoration > li {
	display: flex;
	align-items: center;
	position: relative;
	padding-left:  2em;
}

ul.recruit-decoration > li:before {
	content: '';
	display: block;
    width: 0.5em;
    height: 1em;
    border-bottom: 3px solid #f46464;
    border-right: 3px solid #f46464;
    position: absolute;
    top: 50%;
    left: 0em;
    transform: translateY(-50%) rotate(45deg);
}

ul.recruit-decoration > li + li {
	margin-top: 1em;
}

.video-embed {
	width: 100%;
	max-width: 640px;
	margin: 0 auto 2em;
}

@media (max-width: 1200px) {
	.section-padding {
		padding: 4em var(--side-margin-narrow);
	}
}

@media (max-width: 768px) {
	.section-padding {
		padding: 2em 1em;
	}
	
	.section-padding-full {
		padding: 2em 0;
	}

	.heading {
		font-size: 1em;
	}

	.heading:before {
		font-size: 2em;
	}
	
	.heading-serif {
		font-size: 1em;
	}
	
	.heading-serif:before {
		font-size: 2em;
	}

	.button-list {
		flex-flow: column;
	}

	.button-list > li {
		width: 100%;
	}

	.button-list > li:nth-of-type(odd) {
		margin-right: 0;
	}

	.button-list > li + li {
		margin-top: 0.5em;
	}
	
	.col2 {
		flex-flow: column;
		margin-bottom: 2em;
	}
	
	.col2 > * {
		width: 100%;
	}
	
	.col2 > * + * {
		margin-top: 2rem;
	}
	
	.col3 {
		flex-flow: column;
	}
	
	.col3 > * {
		width: 100%;
	}
	
	.col3 > * + * {
		margin-top: 2rem;
	}
	
	ul.recruit-decoration {
		padding: 1.5em;
	}
	
	.bracket {
		margin-top: 2em;
		margin-bottom: 1em;
	}
}


/* --------------------------
    header
-------------------------- */
/* header */
header {
    display: flex;
    justify-content: space-between;
	width: 100%;
	height: 100px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
	position: fixed;
	left: 0;
	z-index: 254;
	transition: all 0.3s ease;
}

header.fixed {
	height: 50px;
	background: unset;
	background-color: rgba(255, 255, 255, 0.9);
	transition: all 0.3s ease;
}

header:hover {
	background: unset;
	background-color: rgba(255, 255, 255, 0.9);
	transition: all 0.3s ease;
}

#header-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 256px;
	height: 100%;
	background-color: #333;
	color: #fff;
	transition: all 0.3s ease;
}

#header-logo > img {
	width: 224px;
}

header.fixed #header-logo {
	width: 128px;
	transition: all 0.3s ease;
}

header.fixed #header-logo > img {
	width: 96px;
}

header > div {
	width: calc(100% - 256px - 1em);
	padding: 0 1em;
	transition: all 0.3s ease;
}

header.fixed header > div {
	width: calc(100% - 128px - 1em);
	transition: all 0.3s ease;
}

#topbar {
    display: flex;
    justify-content: space-between;
    height: 35px;
	transition: all 0.3s ease;
}

header.fixed #topbar {
	display: none;
	height: 0;
	transition: all 0.3s ease;
}

#topbar > h1 {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 10px;
    color: #fff;
	text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
}

header:hover #topbar > h1 {
    color: #333;
    text-shadow: unset;
	transition: all 0.3s ease;
}

#topbar-menu {
    list-style-type: none;
    display: flex;
    background-color: #fff;
    padding: 0 2em;
    height: 100%;
    font-weight: 700;
    font-size: 10px;
}

#topbar-menu > li {
    display: flex;
    align-items: center;
}

#topbar-menu > li + li:before {
    content: '';
    display: block;
    height: 1.5em;
    border-left: 1px solid #aaa;
    margin: 0 1.5em;
}

#header-menu {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% - 2em);
    height: calc(100% - 35px);
    font-weight: 700;
    font-size: 0.875em;
    color: #fff;
    text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
    margin-right: 2em;
}

header.fixed #header-menu {
	width: calc(100% - 2em);
	height: 100%;
	color: #333;
	text-shadow: unset;
}

header:hover #header-menu {
	color: #333;
	text-shadow: unset;
	transition: all 0.3s ease;
}

#header-menu > li {
	display: flex;
	align-items: center;
	height: 100%;
}

#header-menu > li + li {
    margin-left: 2em;
}

#header-menu > li > a[target=_blank] {
	display: flex;
	align-items: center;
}

#header-menu > li > a[target=_blank]:after {
	content: '';
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	background-image: var(--icon-external-w);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: 0.25em;
	filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 1));
}

header.fixed #header-menu > li > a[target=_blank]:after,
header:hover #header-menu > li > a[target=_blank]:after {
	background-image: var(--icon-external);
	filter: unset;
}

#header-menu > li.menu-item-has-children {
	display: flex;
	align-items: center;
}

#header-menu > li.menu-item-has-children:after {
	content: '';
	display: block;
	border-top: 4px solid #fff;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 4px solid transparent;
	margin-left: 0.5em;
	transform: translateY(2px);
	filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 1));
}

header.fixed #header-menu > li.menu-item-has-children:after,
header:hover #header-menu > li.menu-item-has-children:after {
	border-top: 4px solid #333;
	filter: unset;
}

#header-menu > li.menu-item-has-children > ul {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: var(--content-width);
	padding: 0 2em;
	pointer-events: none;
	opacity: 0;
	color: #333;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 100%);
	z-index: 1;
	transition: all 0.3s ease;
}

#header-menu > li.menu-item-has-children > ul:before {
	content: '';
	display: block;
	width: 100vw;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
	position: absolute;
	left: calc((-100vw + var(--content-width)) / 2);
	top: 0;
	z-index: -1;
}

#header-menu > li:hover.menu-item-has-children > ul {
	height: auto;
	padding: 2em;
	pointer-events: auto;
	opacity: 1;
	transition: all 0.3s ease;
}

#header-menu > li.menu-item-has-children > ul > li {
	width: calc(100% / 4 - 1em);
}

#header-menu > li.menu-item-has-children > ul > li:not(:nth-of-type(4n)) {
	margin-right: calc(4em / 3);
}

#header-menu > li.menu-item-has-children > ul > li:nth-of-type(n+5) {
	margin-top: calc(4em / 3);
}

#header-menu > li.menu-item-has-children > ul > li > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#header-menu > li.menu-item-has-children > ul > li > a > figure {
	width: 30%;
	padding-top: 30%;
	background-color: #ddd;
	position: relative;
}

#header-menu > li.menu-item-has-children > ul > li > a > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

#header-menu > li.menu-item-has-children > ul > li > a > div {
	width: calc(70% - 1em);
	text-align: center;
	font-size: 1em;
}

#header-menu > li.menu-item-has-children > ul > li > a[target=_blank] > div:after {
	content: '';
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	background-image: var(--icon-external);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: 0.25em;
}

@media (max-width: 1200px) {
	header {
		height: 50px;
		background: unset;
	}

	header:hover,
	header.fixed {
		background-color: unset;
	}

	header #header-logo {
		width: 128px;
	}
	
	header #header-logo > img {
		width: 96px;
	}

	#header-menu {
		display: none;
	}

	#topbar {
		display: none;
	}
}

/* drawer */
#drawer {
    display: none;
    width: 50px;
    height: 100%;
    background-color: #333;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 255;
}

header.fixed #drawer {
	width: 50px;
}

.drawer-unshown {
	display: none;
}

#drawer-open {
    display: inline-flex;
    flex-flow: column;
    width: 1.5rem;
    height: 1.5rem;
    justify-content: space-around;
    padding: 1rem 0;
}

#drawer-open > span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fff;
}

#drawer-open:before {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fff;
	margin-top: -0.75rem;
}

#drawer-open:after {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fff;
	margin-bottom: -0.75rem;
}

#drawer-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

#drawer-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999; 
  width: 100%;
	max-width: 330px;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-in-out;
}

#drawer-input:checked ~ #drawer-close {
  display: block;
  opacity: 0.5;
}

#drawer-input:checked ~ #drawer-content {
  opacity: 1;
  pointer-events: auto;
}

#drawer-content {
	color: #333;
}

#menu-mobile {
	list-style-type: none;
	padding-left: 0;
}

#drawer-input ~ #drawer-content #drawer-close2,
#drawer-input ~ #drawer-content #menu-mobile > li > a {
	padding: 1em;
	text-align: center;
	display: block;
	position: relative;
	color: #333;
	border-bottom: 1px solid #aaa;
	opacity: 0;
	text-decoration: none;
}

#drawer-input:checked ~ #drawer-content #drawer-close2,
#drawer-input:checked ~ #drawer-content #menu-mobile > li > a {
	opacity: 1;
}

#mobile-menu {
	list-style-type: none;
	padding-left: 0;
}

#mobile-menu > li {
	border-bottom: 1px solid #aaa;
}

#mobile-menu > li > a {
	display: block;
	padding: 1rem 2rem;
	color: #333;
}

#mobile-menu li > a {
	position: relative;
}

#mobile-menu li > a:before {
	content: '';
	display: block;
	width: 0.25rem;
	height: 0.25rem;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	transform: rotate(45deg);
	position: absolute;
	top: calc(50% - 0.125em);
	right: 1.5rem;
}

#mobile-menu > li > ul {
	border-top: 1px solid #aaa;
}

#mobile-menu > li > ul > li:not(:last-of-type) {
	border-bottom: 1px solid #aaa;
}

#mobile-menu > li > ul > li > a {
	display: block;
	padding: 1rem 2rem 1rem 3rem;
	color: #333;
	font-size: 0.75rem;
	background-color: #ddd;
}

#mobile-menu > li > ul > li > ul > li > a {
	display: block;
	padding: 1rem 2rem 1rem 4rem;
	color: #333;
	font-size: 0.75rem;
	background-color: #ccc;
}

#mobile-menu > li > ul > li > ul {
	border-top: 1px solid #aaa;
}

#mobile-menu > li > ul > li > ul > li:not(:last-of-type) {
	border-bottom: 1px solid #aaa;
}

@media (max-width: 1200px) {
	#drawer {
		display: flex;
	}
}



/* --------------------------
    footer
-------------------------- */
footer {
	color: #fff;
	background-color: #222;
	font-size: 0.75em;
}

footer > div:first-of-type {
	display: flex;
	justify-content: space-between;
	padding: 4em 6em;
}

footer > div:first-of-type > div:first-of-type {
	width: calc(30% - 2em);
}

#footer-logo {
	display: inline-block;
	margin-bottom: 1em;
}

#footer-logo > img {
	width: 300px;
}

footer > div:first-of-type > div:first-of-type > p + p {
	margin-top: 1em;
}

footer > div:first-of-type > div:last-of-type {
	width: calc(70% - 2em);
}

#footer-menu {
	list-style-type: none;
	display: flex;
}

#footer-menu > li {
	width: calc(100% / 3 - 2em);
}

#footer-menu > li + li {
	margin-right: 3em;
}

#footer-menu > li > ul {
	list-style-type: none;
}

#footer-menu > li > ul > li + li {
	margin-top: 0.5em;
}

#footer-menu > li > ul {
	color: #bbb;
	margin-top: 0.5em;
}

#footer-menu > li > ul > li > a {
	display: flex;
	align-items: flex-start;
}

#footer-menu > li > ul > li > a:before {
	content: '';
	border-top: 4px solid transparent;
	border-right: 4px solid transparent;
	border-left: 4px solid #bbb;
	border-bottom: 4px solid transparent;
	margin-right: 1em;
	margin-top: 0.5em;
}

#footer-menu > li > ul > li.current-menu-item > a:before,
#footer-menu > li > ul > li > a:hover:before {
	border-left: 4px solid #fff;
}

#footer-menu > li > ul > li.current-menu-item > a,
#footer-menu > li > ul > li > a:hover {
	color: #fff;
}

#copyright {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 5em;
	background-color: #111;
	color: #fff;
	font-family: var(--display-font);
	font-size: 10px;
	letter-spacing: 0.2em;
}

@media (max-width: 768px) {
	footer > div:first-of-type {
		flex-flow: column;
		padding: 3em;
	}

	footer > div:first-of-type > div:first-of-type {
		display: flex;
		flex-flow: column;
		align-items: center;
		width: 100%;
	}

	footer > div:first-of-type > div:last-of-type {
		display: none;
	}
	
	#footer-logo > img {
		width: 192px;
	}
	
	#copyright {
		padding: 1em 1em 5em 1em;
		height: auto;
		display: inline-block;
		width: 100%;
		text-align: center;
	}
}

#fixed-banner {
	display: contents;
}

#fixed-banner > a {
	width: 2.75em;
	height: 10em;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #333;
	border-radius: 0.25em 0 0 0.25em;
	border: 1px solid #fff;
	border-right: none;
	writing-mode: vertical-rl;
	color: #fff;
	padding: 1em 0.5em;
	font-weight: 700;
	position: fixed;
	right: 0;
	z-index: 253;
	transform: translateY(-50%);
	top: 50%;
}

#fixed-banner > a:nth-of-type(1) {
	top: 50%;
    transform: translateY(calc(-25em / 2));
/* 採用情報を再度表示させる時は下を消す */
	display: none;
}

#fixed-banner > a:nth-of-type(2) {
	top: 50%;
    height: 15em;
/*     transform: translateY(calc(-25em / 2 + 10em)); */
	transform: translate(-0%, -50%);
    margin-top: 0.125em;
	background-color: #0fb70f;
}

#fixed-banner > a > i {
	margin-bottom: 0.5em;
}

#fixed-banner > a:nth-of-type(2) > i {
	font-size: 1.75em;
}

#fixed-banner > a > span > span {
	text-combine-upright: all;
}

@media (max-width: 768px) {
	#fixed-banner > a {
		width: calc(50vw - calc(2em / 4));
		display: flex;
		writing-mode: horizontal-tb;
		top: unset;
		bottom: 0;
		right: unset;
		left: 0;
		height: unset;
		transform: translate(calc((2em / 4) / 2), calc((-2em / 4) / 2));
		padding: 0.5em 1em;
		border-right: 1px solid #fff;
		font-size: 0.875rem;
		border-radius: 0;
	}
	
	#fixed-banner > a > i {
		margin-right: 0.5em;
		font-size: 1.25em;
		margin-bottom: 0;
	}
	
	#fixed-banner > a:nth-of-type(1) {
		top: unset;
		transform: translate(calc((2em / 4) / 2), calc((-2em / 4) / 2));
	}
	
	#fixed-banner > a:nth-of-type(2) {
		top: unset;
        transform: translate(0.25em, calc(-3em - 0.25em));
        width: calc(100% - 2em / 4);
        height: 3em;
		border-bottom: 1px solid #fff;
	}
}

/* #part-sns {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--side-margin);
    mix-blend-mode: difference;
    position: fixed;
    height: 100vh;
    top: 0;
    right: 0;
    z-index: 253;
}

#part-sns-list {
    display: flex;
    flex-flow: column;
    align-items: center;
    list-style-type: none;
    font-size: 1.5em;
    color: #fff;
}

#part-sns-list:before {
    content: 'OFFICIAL SNS';
    font-family: var(--display-font);
    font-size: 0.5em;
    white-space: nowrap;
    writing-mode: vertical-rl;
    margin-bottom: 2em;
}

#part-sns-list > li + li {
    margin-top: 0.5em;
}


@media (max-width: 1200px) {
	#part-sns {
		width: var(--side-margin-narrow)
	}
}

@media (max-width: 768px) {
	#part-sns {
		width: 100%;
		height: 5em;
		mix-blend-mode: unset;
		position: static;
	}

	#part-sns-list {
		justify-content: center;
		align-items: center;
		flex-flow: row;
		width: 100%;
		color: #333;
	}

	#part-sns-list:before {
		writing-mode: horizontal-tb;
		margin-bottom: 0;
		margin-right: 2em;
	}

	#part-sns-list > li + li {
		margin-top: 0;
		margin-left: 1em;
	}

	#part-sns-list > li > a {
		font-size: 1.5em;
	}
} */

/* part contact */
#part-contact {
	display: flex;
	color: #fff;
	background: linear-gradient(135deg, #042666 30%, #f46464 100%);
}

#part-contact > div {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 50%;
	padding: 4em 2em;
}

/* #part-contact > div:first-of-type {
	background-color: #333;
}

#part-contact > div:last-of-type {
	background-color: #444;
} */

#part-contact > div .tel {
	font-family: var(--display-font);
	font-size: 2em;
}

#part-contact > div .tel:before {
	content: 'tel.';
	font-size: 0.75em;
}

.part-contact-button-wrap {
	width: 100%;
	max-width: 400px;
	margin-top: 2em;
}

.part-contact-button-wrap > a {
	display: block;
	width: 100%;
	padding: 1.5em 4em 1.5em 2em;
	background-color: #222;
	text-align: center;
	font-weight: 700;
	position: relative;
}

.part-contact-button-wrap > a:before {
	content: '';
	display: block;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	border: 1px solid #fff;
	background-image: var(--icon-arrow-w);
	background-position: center;
	background-size: 75%;
	background-repeat: no-repeat;
	position: absolute;
	right: 2em;
	top: 50%;
	transform: translateY(-50%);
}

.part-contact-button-wrap > a[target=_blank]:before {
	background-image: var(--icon-external-w);
	border: none;
	background-size: 50%;
}

@media (max-width: 768px) {
	#part-contact {
		flex-flow: column;
	}

	#part-contact > div {
		width: 100%;
		padding: 2em 1em;
	}

	.part-contact-button-wrap {
		margin-top: 1em;
	}
}

#top-reservation-pc {
	display: flex;
	position: fixed;
	width: 8rem;
	height: 8rem;
	bottom: 4rem;
	right: 3rem;
	flex-flow: column;
	border-radius: 50%;
	background-color: #333;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 0.875rem;
	z-index: 2;
	font-family: var(--display-font);
	font-weight: 700;
	transition: all 0.3s ease;
}

#top-reservation-pc > div {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#top-reservation-pc > div > i {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}

#top-reservation-pc > span:last-of-type {
	position: relative;
}

#top-reservation-pc > span:last-of-type::after {
	content: '';
	position: absolute;
	display: block;
	width: 2em;
	height: 2em;
	background-image: var(--icon-external-w);
	background-position: center;
	background-size: 75%;
	background-repeat: no-repeat;
	transform: translateX(-50%);
	left: 50%;
}

#top-reservation-pc:hover {
	animation: reservation 0.6s ease 0s forwards;
	opacity: 0.9;
	transition: all 0.3s ease;
}

@keyframes reservation {
    0% {
		transform: rotate(0deg);
    }

    100% {
		transform: rotate(360deg);
    }
}

#top-reservation-sp {
	display: none;
}

@media (max-width: 768px) {
	#top-reservation-pc {
		display: none;
	}
	
	#top-reservation-sp {
		display: flex;
		position: fixed;
		width: calc(50vw - calc(1em / 4));
		bottom: 0;
/* 		right: 0; */
		background-color: #333;
		padding: 0.5em 1em;
		color: #fff;
		font-size: 0.875rem;
		z-index: 2;
		font-family: var(--display-font);
		font-weight: 700;
		justify-content: center;
		align-items: center;
		transform: translate(calc((-2em / 4) / 2), calc((-2em / 4) / 2));
		height: unset;
		border: 1px solid #fff;
		
		width: calc(100% - 2em / 4);
		transform: translate(0.25em, calc((-2em / 4) / 2));
		left: 0;
	}
	
	#top-reservation-sp > i {
		margin-right: 0.5em;
		font-size: 1.25em;
	}
	
	#top-reservation-sp > span {
		display: flex;
		justify-content: center;
	}
}


/* --------------------------
    archive
-------------------------- */
/* archive */
.archive-list {
    list-style-type: none;
}

.archive-list > li {
    padding: 1rem 0;
}

.archive-list > li:first-of-type {
    padding-top: 0;
}

.archive-list > li + li {
    border-top: 1px solid #ddd;
}

.archive-list > li > a {
    display: block;
}

.archive-list > li > a > article {
    display: flex;
    align-items: center;
}

.archive-list > li > a > article > .thumb {
    width: 30%;
    padding-top: 20%;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 2em;
}

.archive-list > li > a > article > .info {
    width: calc(70% - 2em);
}

.archive-list > li > a > article > .info > time {
    display: block;
	font-family: var(--display-font);
    font-size: 1em;
	color: #aaa;
    margin-bottom: 0.5em;
	font-weight: 500;
}

.archive-list > li > a > article > .info > .category {
    margin-bottom: 0.5em;
}

.archive-list > li > a > article > .info > .category > span {
    display: inline-block;
    font-size: 10px;
    padding: 0.25em 0.5em;
    margin: 0 0.5em 0.5em 0;
    background-color: var(--color);
    color: #fff;
}

.archive-list > li > a > article > .info > h3 {
    font-size: 1rem;
    margin-bottom: 0.5em;
}

.archive-list > li > a > article > .info > p {
    font-size: 0.875em;
    margin-top: 1em;
}

@media (max-width: 768px) {
    .archive-list > li > a > article {
        flex-flow: column;
    }
    
    .archive-list > li > a > article > .info {
        width: 100%;
    }
    
    .archive-list > li > a > article > .thumb {
        width: 100%;
        padding-top: calc(100% / 3 * 2);
        margin-right: 0;
        margin-bottom: 1em;
    }
}

/* related list */
#related-list-wrap {
	margin-top: 4em;
}

#related-list-wrap > h2 {
	font-family: var(--display-font);
	color: var(--main-color);
	margin-bottom: 1em;
}

.related-list {
	list-style-type: none;
	display: flex;
}

.related-list > li {
	width: calc(100% / 3 - 1em);
}

.related-list > li:not(:last-of-type) {
	margin-right: calc(3em / 2);
}

.related-list > li > a > article > figure {
	width: 100%;
	padding-top: calc(100% / 3 * 2);
	position: relative;
}

.related-list > li > a > article > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

.related-list > li > a > article > div {
	width: 100%;
	margin-top: 1em;
}

.related-list > li > a > article > div > time {
	display: block;
	font-family: var(--display-font);
	margin-bottom: 0.5em;
	color: #aaa;
}

.related-list > li > a > article > div > .category {
	font-size: 10px;
	color: var(--main-color);
	margin-bottom: 0.5em;
}

.related-list > li > a > article > div > .category > span {
	display: inline-block;
	background-color: #333;
	color: #fff;
	padding: 0.25em 1em;
	font-weight: 700;
	margin: 0 0.5em 0.5em 0;
}

.related-list > li > a > article > div > h3 {
	font-size: 1em;
	margin-bottom: 0.5em;
}

.related-list > li > a > article > div > p {
	font-size: 0.875em;
}

@media (max-width: 768px) {
	.related-list {
		flex-flow: column;
		font-size: 0.75em;
	}
	
	.related-list > li {
		width: 100%;
	}
	
	.related-list > li:not(:last-of-type) {
		margin-right: 0;
		margin-bottom: 0.5em;
	}
	
	.related-list > li > a > article {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.related-list > li > a > article > figure {
		width: 30%;
		padding-top: calc((30% - 1em) / 3 * 2);
	}
	
	.related-list > li > a > article > div {
		width: calc(70% - 1em);
	}
}

/* archive pagination */
#pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
	font-family: var(--display-font);
}

#pagination > * {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    letter-spacing: 0;
    width: 3em;
    height: 3em;
    background: #eee;
    color: var(--color);
    margin: 0 0.5em;
    transition: all 0.3s ease;
}

#pagination > span,
#pagination > a:hover {
    background: var(--color);
    color: #fff;
    transition: all 0.3s ease;
}

/* --------------------------
    page
-------------------------- */
#page-wrap {
/* 	margin-top: 2em; */
}

#page-wrap.sidebar {
	display: flex;
	justify-content: space-between;
	padding: 4em 1em;
}

#page-wrap.sidebar > #page-content {
	width: calc(100% - 300px - 1em);
}

#sidebar {
	width: 300px;
	padding: 0 1em;
}

#sidebar > div + div {
	margin-top: 2em;
}

#sidebar > div ul {
	list-style-type: none;
}

#sidebar > div > h3 {
	margin-bottom: 1em;
}

#sidebar > div > ul {
	border-top: 1px solid #ddd;
}

#sidebar > div > ul > li {
	border-bottom: 1px solid #ddd;
	position: relative;
}

#sidebar > div > ul > li:before {
	content: '';
	display: block;
	border-top: 4px solid transparent;
	border-left: 4px solid #333;
	border-right: 4px solid transparent;
	border-bottom: 4px solid transparent;
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
}

#sidebar > div > ul > li > a {
	display: block;
	padding: 1em 2em 1em 0;
}

@media (max-width: 768px) {
	#page-wrap.sidebar {
		flex-flow: column;
	}
	
	#page-wrap.sidebar > #page-content {
		width: 100%;
	}

	#sidebar {
		display: none;
	}
}

/* page header */
#page-header {
	width: 100%;
	min-height: 500px;
	position: relative;
}

#page-header[style]:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: var(--ph-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#page-header:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: var(--ph-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -2;
}

#page-header.page-header-recruit:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: var(--ph-bg-recruit);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -2;
}

#page-header > div {
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: calc(100px + 1em) 4em 1em 4em;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#page-header > div > h2 {
	font-size: clamp(1.5em, 3.5vw, 3.5em);
	color: #fff;
	text-shadow: #333 1px 0 1rem;
}

#breadcrumb {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	color: #fff;
	font-size: 0.75em;
	text-shadow: #333 1px 0 0.5rem;
	margin-top: 1em;
}

#breadcrumb > li {
	display: flex;
	align-items: center;
}

#breadcrumb > li + li:before {
	content: '';
	display: block;
	border-top: 4px solid transparent;
	border-left: 4px solid #fff;
	border-right: 4px solid transparent;
	border-bottom: 4px solid transparent;
	margin: 0 0.5em 0 1em;
	filter: drop-shadow(0 0 0.5em #000) drop-shadow(0 0 0.5em #000);
}

@media (max-width: 1200px) {
	#page-header {
		width: 100%;
	}

	#page-header > div {
		padding: calc(50px + 1em) 1em 1em 1em;
	}

	#page-header > div {
		align-items: center;
		text-align: center;
	}
}

@media (max-width: 768px) {
	#page-header {
		width: 100%;
		padding-top: 0;
		min-height: calc(100vw / 2);
	}
	
	#page-header:before {
		filter: brightness(0.8);
	}
}


/* --------------------------
    single
-------------------------- */
/* single */
#single-date {
    display: block;
	font-family: var(--display-font);
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 2em;
}

.single-content h1:not(.plain),
.single-content h2:not(.plain) {
	background-color: #333;
	color: #fff;
	padding: 0.5em 1em;
    margin-bottom: 1em;
}

.single-content h3:not(.plain) {
	border-left: 4px solid #333;
	background-color: #ddd;
	padding: 0.5em 1em;
    margin-bottom: 1em;
}

.single-content h4:not(.plain) {
	border-left: 2px solid #333;
	padding: 0 1em;
    margin-bottom: 1em;
}

.single-content h5:not(.plain) {
    margin-bottom: 1em;
}

.single-content h6:not(.plain) {
    margin-bottom: 1em;
}

.single-content hr:not(.plain) {
    display: block;
    border: none;
    border-top: 2px solid #bbb;
    margin: 4em 0;
}

.single-content ul:not(.plain) {
    background-color: #fff;
    padding: 2em 2em 2em 3em;
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
    margin-bottom: 3em;
}

.single-content ol:not(.plain) {
    background-color: #fff;
    padding: 2em 2em 2em 3em;
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
    margin-bottom: 3em;
}

.single-content ul:not(.plain) > li + li,
.single-content ol:not(.plain) > li + li {
    margin-top: 0.5em;
}

.single-content blockquote:not(.plain) {
    background-color: #fff;
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
    padding: 2em;
    margin-bottom: 2em;
}

.single-content p:not(.plain) {
    text-align: justify;
    margin-bottom: 1em;
}

.single-content dl:not(.plain) {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2em;
}

.single-content dl:not(.plain) > dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40%;
	background-color: #ddd;
	padding: 1em 2em;
	font-weight: 700;
}

.single-content dl:not(.plain) > dt:nth-of-type(n+1) {
	margin-top: 4px;
}

.single-content dl:not(.plain) > dd {
	width: 60%;
	background-color: #eee;
	padding: 1em 2em;
}

.single-content dl:not(.plain) > dd:nth-of-type(n+1) {
	margin-top: 4px;
}

.single-content img:not(.plain) {
    margin-bottom: 2em;
}

.single-content img:not(.plain).alignleft {
    float: left;
    margin: 0 2em 2em 0;
}

.single-content img:not(.plain).alignright {
    float: right;
    margin: 0 0 2em 2em;
}

.single-content img:not(.plain).aligncenter {
    margin: 0 auto 2em auto;
}

.single-content a:not(.plain) {
    text-decoration: underline;
    transition: all 0.3s ease;
}

.single-content a:not(.plain):hover {
    opacity: 0.7;
    transition: all 0.3s ease;
}

.single-content strong:not(.plain) {
    color: var(--color-red);
}

.single-content small:not(.plain) {
    font-size: 0.875em;
}

.single-content mark:not(.plain) {
	background: linear-gradient(to top, #ffc3d1 30%, transparent 30%);
}

.single-content figure.aligncenter:not(.plain) {
	margin: 0 auto 2em auto;
}

.single-content figure.alignleft:not(.plain) {
	float: left;
	margin: 0 2em 2em 0;
	width: 240px;
}

.single-content figure.alignright:not(.plain) {
	float: right;
	margin: 0 0 2em 2em;
	width: 240px;
}

@media (max-width: 768px) {
	.single-content h1:not(.plain),
	.single-content h2:not(.plain) {
	}
	
	.single-content h3:not(.plain) {
	}
	
	.single-content hr:not(.plain) {
		margin: 2em 0;
	}

	.single-content ul:not(.plain) {
		padding: 1em 1em 1em 2em;
	}
	
	.single-content ol:not(.plain) {
		padding: 1em 1em 1em 3em;
	}
	
	.single-content blockquote:not(.plain) {
		padding: 1em;
	}
	
	.single-content dl:not(.plain) {
		flex-flow: column;
	}
	
	.single-content dl:not(.plain) > dt {
		width: 100%;
		padding: 1em;
	}
	
	.single-content dl:not(.plain) > dd {
		width: 100%;
		padding: 1em;
	}

	.single-content img:not(.plain),
	.single-content img.aligncenter:not(.plain),
	.single-content img.alignleft:not(.plain),
	.single-content img.alignright:not(.plain) {
		float: none;
		margin: 0 auto 2em auto;
	}
	
	.single-content figure.alignleft:not(.plain),
	.single-content figure.alignright:not(.plain),
	.single-content figure.aligncenter:not(.plain) {
		float: none;
		margin: 0 auto 2em auto;
		width: 100%;
	}
}

/* single pagination */
#single-pagination {
    list-style-type: none;
    display: flex;
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    padding: 1rem 0;
    margin-top: 2rem;
}

#single-pagination > li {
    width: 50%;
}

#single-pagination > li + li {
    border-left: 2px solid #ddd;
}

#single-pagination > li > a {
    display: block;
    color: var(--main-color);
    padding: 1rem 3rem;
    position: relative;
}

#single-pagination > li:first-of-type > a:before {
    content: '';
    display: block;
    border-top: 0.3rem solid transparent;
    border-left: 0.3rem solid transparent;
    border-right: 0.3rem solid var(--color);
    border-bottom: 0.3rem solid transparent;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

#single-pagination > li:last-of-type > a:before {
    content: '';
    display: block;
    border-top: 0.3rem solid transparent;
    border-left: 0.3rem solid var(--color);
    border-right: 0.3rem solid transparent;
    border-bottom: 0.3rem solid transparent;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    #single-pagination {
        flex-flow: column;
        padding: 0;
    }

    #single-pagination > li {
        width: 100%;
    }

    #single-pagination > li + li {
        border-left: none;
    }

    #single-pagination > li:first-of-type:empty {
        border-top: 2px solid #ddd;
    }
}

/* --------------------------
    top
-------------------------- */
#svg-animation {
	width: 20vw;
	height: auto;
	pointer-events: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: 999999;
}


body.show #svg-animation {
	opacity: 1;
}

body.show #svg-animation.hide {
	opacity: 0;
	transition: opacity 0.3s ease;
}

#svg-animation > image,
#svg-animation > mask {
	width: 100%;
	height: auto;
}

#svg-animation .st0{fill:none;stroke:#ffffff;stroke-width:16;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;}
#svg-animation .st1{fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;}

@media (max-width: 768px) {
	#svg-animation {
		width: 40vw;
		height: auto;
	}
}

#top-main-banner {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
}

#top-main-banner > div {
	width: 100%;
	height: 100%;
	color: #fff;
	text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.3);
	position: relative;
}

#top-slider {
	width: 100%;
	height: 100%;
}

#top-main-banner > div > div:last-of-type {
	font-family: var(--display-font);
	font-size: clamp(14px, 3vw, 1.5em);
	text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.3), 0 0 0.2em rgba(0, 0, 0, 0.3);
	position: absolute;
	right: 3em;
	bottom: 3rem;
	z-index: 1;
}

#top-slider {
	overflow: hidden;
}

#top-slider .swiper-slide {
	position: relative;
}

#top-slider .swiper-slide > h2 {
	font-weight: 600;
	font-size: clamp(2vw, 2rem ,2.5vw);
	text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4), 0 0 0.1em rgba(0, 0, 0, 0.4);
	position: absolute;
	bottom: 3rem;
	left: 3rem;
	z-index: 1;
}

#top-slider .swiper-slide > picture {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

#top-slider .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(1);
	transition: all 5s linear;
}

@media (max-width: 1200px) {
	#top-main-banner {
		width: 100%;
	}
	
	#top-main-banner > div {
		width: 100%;
	}
}

/* @media (max-width: 768px) {
	#top-main-banner {
		height: 100vw;
	}

	#top-main-banner > div {
		width: 100%;
	}
	
	#top-slider .swiper-slide > h2 {
		font-size: 5vw;
		left: 1em;
		bottom: 2em;
	}
} */

@media (max-width: 768px) {
	#top-main-banner {
		width: 100%;
		height: 100%;
		aspect-ratio: 3 / 4;
	}

	#top-main-banner > div > div:last-of-type {
		font-family: var(--display-font);
		font-size: clamp(14px, 1vw, 1.25em);
		text-shadow: 0 0 0.2em rgba(0, 0, 0, 0.3), 0 0 0.2em rgba(0, 0, 0, 0.3);
		position: absolute;
		right: 1rem;
		bottom: 1rem;
		z-index: 1;
		display: block;
	}


	#top-slider .swiper-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		position: absolute;
		top: 0;
		left: 0;
		transform: scale(1);
		transition: all 5s linear;
	}
	
	#top-slider .swiper-slide > h2 {
		left: 1rem;
		bottom: 3rem;
		font-size: 3.5vw;
		display: block;
	}
}

#top-news > div {
	display: flex;
	justify-content: space-between;
}

#top-news > div > div:first-of-type {
	width: calc(30% - 2em);
}

#top-news > div > div:last-of-type {
	width: calc(70% - 2em);
}

#top-news > div > div:last-of-type > .button-wrap {
	display: none;
}

#top-news-list {
	list-style-type: none;
}

#top-news-list > li + li {
	border-top: 1px solid #aaa;
}

#top-news-list > li > a {
	display: block;
	padding: 0.75em 4em 0.75em 1em;
	position: relative;
}

#top-news-list > li > a:before {
	content: '';
	display: block;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	border: 1px solid #333;
	background-image: var(--icon-arrow);
	background-position: center;
	background-size: 75%;
	background-repeat: no-repeat;
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease;
}

#top-news-list > li > a:hover:before {
	background-color: #333;
	background-image: var(--icon-arrow-w);
	transition: all 0.3s ease;
}

#top-news-list > li > a > article {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#top-news-list > li > a > article > time {
	width: 10rem;
	font-family: var(--display-font);
	color: #555;
}

#top-news-list > li > a > article > time > span {
	font-size: 1.5em;
}

#top-news-list > li > a > article > h3 {
	width: calc(100% - 10rem);
	font-size: 1em;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 768px) {
	#top-news > div {
		flex-flow: column;
	}

	#top-news > div > div:first-of-type {
		width: 100%;
	}

	#top-news > div > div:first-of-type > .heading {
		align-items: center;
	}

	#top-news > div > div:first-of-type > .button-wrap {
		display: none;
	}

	#top-news > div > div:last-of-type {
		width: 100%;
		margin-top: 2em;
	}

	#top-news > div > div:last-of-type > .button-wrap {
		display: block;
	}

	#top-news-list > li > a {
		display: block;
		padding: 0.75em 3em 0.75em 0;
		position: relative;
	}

	#top-news-list > li > a:before {
		right: 0;
	}

	#top-news-list > li > a > article {
		flex-flow: column;
	}

	#top-news-list > li > a > article > time {
		width: 100%;
		font-size: 0.75em;
	}

	#top-news-list > li > a > article > h3 {
		width: 100%;
	}
}

#top-campaign-slider .swiper-slide > a > article > figure {
	width: 100%;
	padding-top: calc(100% / 3 * 2);
	background-color: #eee;
	position: relative;
}

#top-campaign-slider .swiper-slide > a > article > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

#top-campaign-slider .swiper-slide > a > article > time {
	display: block;
	font-family: var(--display-font);
	color: #555;
	text-align: right;
	font-weight: 500;
}

#top-campaign-slider .swiper-slide > a > article > time > span {
	font-size: 1.5em;
}

#top-campaign-slider .swiper-slide > a > article > h3 {
	font-size: 1em;
	margin-top: 0.5em;
}

#top-campaign-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

#top-campaign-list > li {
	width: calc(100% / 3 - 1em);
}

#top-campaign-list > li:not(:nth-of-type(3n)) {
	margin-right: calc(3em / 2);
}

#top-campaign-list > li:nth-of-type(n+4) {
	margin-top: 2em;
}

#top-campaign-list > li > a {
	display: block;
	transition: opacity 0.3s ease;
}

#top-campaign-list > li > a:hover {
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

#top-campaign-list > li > a > article > figure {
	aspect-ratio: 3 / 2;
	background-color: #eee;
}

#top-campaign-list > li > a > article > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#top-campaign-list > li > a > article > time {
	display: block;
	font-family: var(--display-font);
	color: #555;
	text-align: right;
	font-weight: 500;
}

#top-campaign-list > li > a > article > time > span {
	font-size: 1.5em;
}

#top-campaign-list > li > a > article > h3 {
	font-size: 1em;
	margin-top: 0.5em;
}

@media (max-width: 768px) {
	#top-campaign-list {
		flex-flow: column;
	}

	#top-campaign-list > li {
		width: 100%;
	}

	#top-campaign-list > li:not(:nth-of-type(3n)) {
		margin-right: 0;
	}

	#top-campaign-list > li + li,
	#top-campaign-list > li:nth-of-type(n+4) {
		margin-top: 1em;
	}
}

#top-blog-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

#top-blog-list > li {
	width: calc(100% / 4 - 1em);
}

#top-blog-list > li:not(:nth-of-type(4n)) {
	margin-right: calc(4em / 3);
}

#top-blog-list > li > a {
	display: block;
	transition: opacity 0.3s ease;
}

#top-blog-list > li > a:hover {
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

#top-blog-list > li > a > article > figure {
	aspect-ratio: 3 / 2;
	background-color: #eee;
}

#top-blog-list > li > a > article > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#top-blog-list > li > a > article > time {
	display: block;
	font-family: var(--display-font);
	color: #555;
	text-align: right;
	font-weight: 500;
}

#top-blog-list > li > a > article > time > span {
	font-size: 1.5em;
}

#top-blog-list > li > a > article > h3 {
	font-size: 1em;
	margin-top: 0.5em;
}

@media (max-width: 768px) {
	#top-blog-list > li {
		width: 100%;
	}
	
	#top-blog-list > li:not(:nth-of-type(4n)) {
		margin-right: 0;
	}
	
	#top-blog-list > li + li {
		margin-top: 1em;
	}
}

#top-group-banner > div > div {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#top-group-banner > div > div > a {
	display: block;
	width: calc(50% - 1rem);
	padding-top: calc((50% - 1rem) * 25 / 56);
	position: relative;
	transition: all 0.3s ease;
}

#top-group-banner > div > div > a:hover {
	opacity: 0.7;
	transition: all 0.3s ease;
}

#top-group-banner > div > div > a:nth-of-type(n + 3) {
	margin-top: 2em;
}

#top-group-banner > div > div > a > img {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	image-rendering: -webkit-optimize-contrast;
}

@media (max-width: 768px) {
	#top-group-banner > div > div {
		flex-wrap: wrap;
	}
	
	#top-group-banner > div > div > a {
		width: 100%;
		padding-top: calc(100% * 25 / 56);
	}
	
	#top-group-banner > div > div > a + a {
		margin-top: 2em;
	}
}

#top-parking > div > div:first-of-type {
	display: flex;
	justify-content: space-between;
}

#top-parking > div > div:first-of-type > * {
	width: calc(50% - 1rem);
}

#top-parking > div > div:first-of-type > figure + img {
	margin-left: 2rem;
}

#top-parking > div > div:first-of-type > figure {
	padding-top: calc((50% - 1rem) /16 * 9);
	height: 100%;
	position: relative;
	overflow: hidden;
}

#top-parking > div > div > figure > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


@media (max-width: 768px) {
	#top-parking > div > div:first-of-type {
		flex-flow: column;
	}
	
	#top-parking > div > div:first-of-type > figure {
		padding-top: calc((100% - 1rem) /16 * 9);
	}
	
	#top-parking > div > div:first-of-type > * {
		width: 100%;
	}
	
	#top-parking > div > div:first-of-type > figure + img {
		margin-left: 0;
		margin-top: 2em;
	}
}

#top-plan-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

#top-plan-list > li {
	width: calc(100% / 3 - 2em);
	padding-top: calc((100% / 3 - 2em) / 3);
	border: 1px solid #aaa;
	position: relative;
}

#top-plan-list > li:not(:nth-of-type(3n)) {
	margin-right: calc(6em / 2);
}

#top-plan-list > li:nth-of-type(n+4) {
	margin-top: calc(6em / 2);
}

#top-plan-list > li > a {
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
}

#top-plan-list > li > a > figure {
	width: 50%;
	height: 100%;
	aspect-ratio: 3 / 2;
	background-color: #eee;
	position: absolute;
	top: 0;
	left: 50%;
	overflow: hidden;
}

#top-plan-list > li > a > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.3s ease;
}

#top-plan-list > li > a:hover > figure > img {
	transform: scale(1.1);
	transition: all 0.3s ease;
}

#top-plan-list > li > a > div {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 50%;
	aspect-ratio: 3 / 2;
	font-family: var(--serif-font);
	font-size: clamp(10px, 1vw, 0.875em);
	white-space: nowrap;
	position: absolute;
	top: 0;
	left: 0;
}

#top-plan-list > li > a > div:after {
	content: attr(data-text);
	font-family: var(--serif-font);
	white-space: pre-wrap;
	line-height: 1.25em;
	text-align: center;
	margin-top: 1em;
}

#top-plan-list > li > a > div:before {
	content: '';
	display: block;
	width: 80%;
	border-top: 1px solid #aaa;
	position: absolute;
	top: 50%;
	left: 10%;
}

@media (max-width: 960px) {
	#top-plan-list > li {
		width: 100%;
		padding-top: calc(100% / 3);
		position: relative;
	}

	#top-plan-list > li > a > div {
		font-size: clamp(1em, 2vw, 1.5em);
	}

	#top-plan-list > li:not(:nth-of-type(3n)) {
		margin-right: 0;
	}

	#top-plan-list > li:nth-of-type(n+4),
	#top-plan-list > li + li {
		margin-top: 1em;
	}
}

#top-houmongi .button-wrap {
	text-align: center;
}

#top-houmongi > div > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#top-houmongi > div > div > * {
	width: calc(50% - 1rem);
}

#top-houmongi > div > div > div > h3 {
	font-size: 1.5rem;
}

#top-houmongi > div > div > div > ul {
	margin-top: 2rem;
	list-style-type: none;
	font-size: 1.25rem;
	font-weight: 600;
}

#top-houmongi > div > div > div > ul > li {
	position: relative;
	padding-left: 3rem;
}

#top-houmongi > div > div > div > ul > li:before {
	content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    display: block;
    background-color: #333;
    top: 50%;
    left: 0.5em;
    border-radius: 50%;
    transform: translate(0, -50%);
    transition: all 0.3s ease;
}

#top-houmongi > div > div > div > ul > li:after {
	content: '';
    position: absolute;
    border-top: 0.25rem solid transparent;
    border-left: 0.25rem solid #fff;
    border-right: 0.25rem solid transparent;
    border-bottom: 0.25rem solid transparent;
    top: 50%;
    left: 0.5em;
    transform: translate(100%, -50%);
    transition: all 0.3s ease;
}

#top-houmongi > div > div > div > ul > li + li {
	margin-top: 1rem;
}

@media (max-width: 768px) {
	#top-houmongi > div > div {
		flex-wrap: wrap;
	}
	
	#top-houmongi > div > div > * {
		width: 100%;
	}
	
	#top-houmongi > div > div > * + * {
		margin-top: 2em;
	}
}

#top-content-list {
	display: flex;
	list-style-type: none;
	flex-wrap: wrap;
}

#top-content-list > li {
	width: calc(50% - 1rem);
}

#top-content-list > li:nth-of-type(even) {
	margin-left: 2rem;
}

#top-content-list > li:nth-of-type(n + 3) {
	margin-top: 2em;
}

#top-content-list > li > a {
	display: flex;
	width: 100%;
	align-items: center;
	background-color: #f5f5f5;
	position: relative;
}

#top-content-list > li > a::before {
	content: '';
	position: absolute;
	width: 1.5em;
	height: 1.5em;
	display: block;
	background-color: #333;
	top: 50%;
	right: 1.5em;
	border-radius: 50%;
	transform: translate(0, -50%);
	transition: all 0.3s ease;
}

#top-content-list > li > a::after {
	content: '';
	position: absolute;
	border-top: 0.25rem solid transparent;
	border-left: 0.25rem solid #fff;
	border-right: 0.25rem solid transparent;
	border-bottom: 0.25rem solid transparent;
	top: 50%;
	right: 1.5em;
	transform: translate(-0.325em, -50%);
	transition: all 0.3s ease;
}

#top-content-list > li > a > figure {
	width: 30%;
	padding-top: 30%;
	position: relative;
	overflow: hidden;
}

#top-content-list > li > a > figure::before {
	content: '';
	position: absolute;
	background-image: var(--ornament);
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	width: 1rem;
	height: 100%;
	display: block;
	top: 0;
	right: 0;
	z-index: 1;
	transform: scale(1.01);
}

#top-content-list > li > a > figure > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.3s ease;
}

#top-content-list > li > a > div {
	width: 70%;
	padding: 1em 4em 1em 2em;
	height: 100%;
}

#top-content-list > li > a > div > div {
	font-size: 1em;
	display: flex;
	flex-flow: column;
}

#top-content-list > li > a > div > div::before {
	content: attr(data-text);
	font-size: clamp(1em, 2.25vw, 1.5em);
	font-family: var(--display-font);
	font-weight: 700;
}

#top-content-list > li > a:hover > figure > img {
	transform: scale(1.1);
	transition: all 0.3s ease;
}

#top-content-list > li > a:hover::before {
	right: 1rem;
	transition: all 0.3s ease;
}

#top-content-list > li > a:hover::after {
	right: 1rem;
	transition: all 0.3s ease;
}

@media (max-width: 768px) {
	#top-content-list {
		flex-flow: column;
	}
	
	#top-content-list > li {
		width: 100%;
	}
	
	#top-content-list > li + li {
		margin-top: 1em;
	}
	
	#top-content-list > li:nth-of-type(even) {
		margin-left: 0;
	}
	
	#top-content-list > li:nth-of-type(n + 3) {
		margin-top: 1em;
	}
	
	#top-content-list > li > a > div {
		padding: 1em 4em 1em 2em;
	}
	
	#top-content-list > li > a::before {
		width: 1.5em;
		height: 1.5em;
		right: 1em;
	}
	
	#top-content-list > li > a::after {
		border-top: 0.25rem solid transparent;
		border-left: 0.25rem solid #fff;
		border-right: 0.25rem solid transparent;
		border-bottom: 0.25rem solid transparent;
		transform: translate(-0.25em, -50%);
		right: 1em;
	}
	
	#top-content-list > li > a:hover::before {
		right: 0.5rem;
		transition: all 0.3s ease;
	}

	#top-content-list > li > a:hover::after {
	right: 0.5rem;
	transition: all 0.3s ease;
	}
}

#top-recruit-banner {
	display: block;
	width: 100%;
	padding-top: calc(100% / 3);
	position: relative;
}

#top-recruit-banner  > div {
	width: 100%;
	padding-top: calc(100% / 3.5);
	overflow-x: clip;
	position: absolute;
	bottom: 0;
	left: 0;
}

#top-recruit-banner  > div:before {
	content: '';
	display: block;
	width: 200%;
	height: 100%;
	background: linear-gradient(to right, #555 0%, #555 50%, #222 50%);
	position: absolute;
	bottom: 0;
	left: -100%;
	z-index: 1;
	transition: left 0.3s ease;
}

#top-recruit-banner:hover > div:before {
	left: 0;
	transition: left 0.3s ease;
}

#top-recruit-banner  > div > img {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
}

#top-recruit > div > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#top-recruit > div > div > * {
	width: calc(50% - 2rem);
}

#top-recruit > div > div h3 {
	font-size: clamp(1.75rem, 3.25vw, 2.5rem);
	margin-bottom: 1rem;
}

#top-recruit > div > div .bracket > span {
	display: inline-block;
	padding: 0.5rem 1rem;
	color: #fff;
	
	background-color: #333;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	padding: 0.125rem  0.5rem;
}

#top-recruit > div > div .bracket {
	margin-bottom: 0.5rem;
	text-align: left;
}

#top-recruit > div > div p:last-of-type {
	margin-top: 2rem;
	font-size: 1.5rem;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 768px) {
	#top-recruit > div > div {
		flex-flow: column;
	}
	
	#top-recruit > div > div > * {
		width: 100%;
		margin-bottom: 1rem;
	}
}


#top-group {
	
}

#top-group > div > ul {
	list-style-type: none;
	display: flex;
	justify-content: space-between;
}

#top-group > div > ul > li {
	width: calc(100% / 3 - 0.5em);
	border: 1px solid #ccc;
}

#top-group > div > ul > li > a {
	display: block;
	position: relative;
	width: 100%;
	padding-top: calc(100% / 3);
	background-color: #fff;
}

#top-group > div > ul > li > a::before {
	content: '';
	display: block;
	border-top: 4px solid transparent;
	border-left: 4px solid transparent;
	border-right: 4px solid #ccc;
	border-bottom: 4px solid #ccc;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	transition: all 0.2s ease;
}

#top-group > div > ul > li > a:hover::before {
	border-top: 8px solid transparent;
	border-left: 8px solid transparent;
	border-right: 8px solid #ccc;
	border-bottom: 8px solid #ccc;
	transition: all 0.2s ease;
}

#top-group > div > ul > li > a > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	#top-group > div > ul {
		flex-direction: column;
	}
	
	#top-group > div > ul > li {
		width: 100%;
	}
	
	#top-group > div > ul > li + li {
		margin-top: 1em;
	}
}


/* --------------------------
    contact
-------------------------- */
.contact-tel {
	display: flex;
	justify-content: center;
	flex-flow: column;
}

.contact-tel > a {
	font-size: 2rem;
	font-family: var(--display-font);
	text-align: center;
	font-weight: 700;
	color: #333;
	display: block;
	margin: 0 auto 1rem;
}

.contact-tel > a > i {
	margin-right: 1rem;
}

.contactform dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-bottom: 1rem;
}

.contactform > dl > dt {
	text-align: left;
	padding: 1.5em 5em 1.5em 2em;
	position: relative;
	width: 20em;
}

.contactform > dl > dd {
	padding: 1.5em 2em;
/* 	border-bottom: 1px solid #ccc; */
}

.contactform > dl > dt.required:after {
	content: '必 須';
	display: block;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0;
	padding: 0.5em 1em;
	background: #444;
	color: #fff;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 3px;
}

.contactform > dl > dt:not(.required):after {
	content: '任 意';
	display: block;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0;
	padding: 0.5em 1em;
	background-color: #fff;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 3px;
}

.contactform > dl > dd input[type=text],
.contactform > dl > dd input[type=email],
.contactform > dl > dd input[type=tel],
.contactform > dl > dd textarea {
	display: block;
	width: 100%;
	border-radius: 3px;
	border: none;
/* 	background-color: #f9f9f9; */
	border: 1px solid #ccc;
	padding: 0.5em 1em;
}

.contactform > dl > dd select {
	display: block;
	border-radius: 3px;
	border: none;
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 0.5em 1em;
}

.contactform > dl > dd input[type=date] {
	width: 30%;
	display: block;
	border-radius: 3px;
	border: none;
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 0.5em 1em;
}

.contactform > dl > dd select {
	padding: 0.5em 1em;
}

.contactform > dl > dd input[type=number] {
	display: block;
	border-radius: 3px;
	border: none;
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 0.5em 1em;
}

.contactform > dl > dd input.inline {
	display: inline-block;
}

.contactform > dl > dd input.readonly {
	background-color: transparent;
	border: none;
}

.contactform > dl > dd input.readonly:focus {
	outline: none;
}

.contactform > dl:not(.plain) > dd.birthday {
	display: flex;
	flex-flow: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.contactform > dl:not(.plain) > dd.birthday > .year,
.contactform > dl:not(.plain) > dd.birthday > .month,
.contactform > dl:not(.plain) > dd.birthday > .date {
	display: flex;
	margin: 0.125em 0.25em 0.125em 0;
	align-items: center;
}

.contactform > dl:not(.plain) > dd.birthday > .year input[type=number] {
	width: 6em;
}

.contactform > dl:not(.plain) > dd.birthday > .year:after {
	content: '年';
	margin-left: 0.25em;
}

.contactform > dl:not(.plain) > dd.birthday > .month:after {
	content: '月';
	margin-left: 0.25em;
}

.contactform > dl:not(.plain) > dd.birthday > .date:after {
	content: '日';
	margin-left: 0.25em;
}

.agreement-wrap {
	text-align: center;
	margin-bottom: 1rem;
}

.contactform input[name=agreement] {
	appearance: none;
	-webkit-appearance: none;
	border: none;
}

.contactform input[name=agreement] + span {
	display: flex;
	justify-content: center;
	align-items: center;
}

.contactform input[name=agreement] + span:hover {
	cursor: pointer;
}

.contactform input[name=agreement] + span:before {
	content: '';
	display: inline-block;
	width: 3rem;
	height: 3rem;
	border: 1px solid #aaa;
	border-radius: 3px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGZvY3VzYWJsZT0iZmFsc2UiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIgoJIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojQUFBQUFBO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTE3My45LDQzOS40TDcuNSwyNzNjLTEwLTEwLTEwLTI2LjIsMC0zNi4ybDM2LjItMzYuMmMxMC0xMCwyNi4yLTEwLDM2LjIsMEwxOTIsMzEyLjdMNDMyLjEsNzIuNgoJYzEwLTEwLDI2LjItMTAsMzYuMiwwbDM2LjIsMzYuMmMxMCwxMCwxMCwyNi4yLDAsMzYuMkwyMTAuMSw0MzkuNEMyMDAuMSw0NDkuNCwxODMuOSw0NDkuNCwxNzMuOSw0MzkuNEwxNzMuOSw0MzkuNHoiLz4KPC9zdmc+Cg==);
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 1rem;
	background-color: #fff;
}

.contactform input[name=agreement]:checked + span:before {
	content: '';
	display: inline-block;
	width: 3rem;
	height: 3rem;
	border: 1px solid #333;
	border-radius: 3px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGVjayIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWNoZWNrIGZhLXctMTYiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ij48L3BhdGg+PC9zdmc+);
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
}

.contactform .submit-wrap {
	text-align: center;
}

.contactform .submit-wrap > input[type=submit] {
	width: 100%;
	max-width: 280px;
	border: none;
	color: #fff;
	background-color: #333;
	padding: 1rem 2rem;
	cursor: pointer;
	margin-left: 4.5rem;
	transition: all 0.3s ease;
}

.contactform .submit-wrap > input[type=submit]:hover {
	opacity: 0.7;
	transition: all 0.3s ease;
}

.contactform .submit-wrap > input[type=submit]:disabled {
	background-color: #ddd;
	cursor: not-allowed;
}

.contactform>dl:not(.plain)>dd>.zip-wrap>span {
	display: flex;
	align-items: center;
}

.contactform>dl:not(.plain)>dd>.zip-wrap input[type=text] {
	width: 10rem;
	margin: 0 .25rem;
}

.contactform>dl:not(.plain)>dd>.zip-wrap>span:before {
	content: "〒";
}

.contactform>dl:not(.plain)>.attachment>div+div {
	margin-top: 1rem;
}

.contactform>dl:not(.plain)>dd span+span {
	display: block;
	margin-top: .5rem;
}

.submit-wrap > spa {
	display: none !important;
}

.ajax-loader {
	display: block;
	margin: auto;
}

.wpcf7-list-item {
	display: block !important;
}

@media (max-width: 768px) {
	.contactform > dl {
		flex-flow: column;
	}
	
	.contactform > dl > dt {
		display: block;
		max-width: 100%;
	}
	
	.contactform > dl > dd {
		display: block;
		width: 100%;
	}
}

/* --------------------------
    reservation
-------------------------- */
#reservation > dl > dt {
	display: inline-block;
	padding: 0.5em 2em;
	background-color: #555;
	color: #fff;
	font-weight: 700;
	border-radius: 0.5em 0.5em 0 0;
	position: relative;
}

#reservation > dl > dt.required {
	padding: 0.5em 5em 0.5em 2em;
}

#reservation > dl > dt.required:after {
	content: '必 須';
	display: block;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0px;
	color: var(--color);
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	padding: 0.5em 1em;
	background-color: #fff;
	border-radius: 3px;
}

#reservation > dl > dd + dt {
	margin-top: 1em;
}

#reservation > dl > dd {
	background-color: #fff;
	padding: 1em;
	border: 1px solid #ddd;
}

#reservation > dl dl {
	display: flex;
	flex-wrap: wrap;
}

#reservation > dl dl > dt {
	width: 10em;
	padding: 1em;
}

#reservation > dl dl > dd {
	width: calc(100% - 10em);
	padding: 1em;
}

#reservation > dl dl > dt:nth-of-type(n+2),
#reservation > dl dl > dd:nth-of-type(n+2) {
	border-top: 2px solid #ddd;
}

#reservation > dl dl > dd .wpcf7-checkbox,
#reservation > dl dl > dd .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
}

#reservation select {
	padding: 0.5em 1em;
}

#reservation input[type=text],
#reservation input[type=number],
#reservation input[type=email] {
	padding: 0.5em 1em;
	width: 100%;
}

#reservation input[name=your-zip],
#reservation input[type=number],
#reservation input[name=plan-birthday-old],
#reservation input[name=plan-newborn-after-birth] {
	width: unset;
}

#reservation select {
	width: 100%;
}

#reservation textarea {
	width: 100%;
}

#reservation .zip-wrap:before {
	content: '〒';
	margin-right: 0.5em;
}

#reservation .sub-wrap > div {
	width: 100%;
	background-color: #ddd;
	padding: 0.5em 1em;
	text-align: center;
	font-weight: 700;
	margin-top: 1em;
}

#reservation .duration-wrap {
	padding: 1em 2em;
	border: 1px solid var(--color);
	border-radius: 0.5em;
	margin-top: 2em;
}

#reservation .duration-wrap > div:first-of-type {
	font-weight: 700;
}

#reservation .duration-wrap > div:first-of-type > span {
	font-size: 1.5em;
}

#reservation .notice {
	padding: 1em 2em;
	border: 1px solid var(--color);
	border-radius: 0.5em;
	margin-top: 2em;
}

#reservation .notice > div:first-of-type {
	font-weight: 700;
	font-size: 1.25em;
}

#reservation .notice > div + div {
	margin-top: 0.5em;
}

#reservation .agreement-wrap {
	text-align: center;
	margin-bottom: 1rem;
}

#reservation input[name=agreement] {
	appearance: none;
	-webkit-appearance: none;
	border: none;
}

#reservation input[name=agreement] + span {
	display: flex;
	justify-content: center;
	align-items: center;
}

#reservation input[name=agreement] + span:hover {
	cursor: pointer;
}

#reservation input[name=agreement] + span:before {
	content: '';
	display: inline-block;
	width: 3rem;
	height: 3rem;
	border: 1px solid #aaa;
	border-radius: 3px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGZvY3VzYWJsZT0iZmFsc2UiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIgoJIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojQUFBQUFBO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTE3My45LDQzOS40TDcuNSwyNzNjLTEwLTEwLTEwLTI2LjIsMC0zNi4ybDM2LjItMzYuMmMxMC0xMCwyNi4yLTEwLDM2LjIsMEwxOTIsMzEyLjdMNDMyLjEsNzIuNgoJYzEwLTEwLDI2LjItMTAsMzYuMiwwbDM2LjIsMzYuMmMxMCwxMCwxMCwyNi4yLDAsMzYuMkwyMTAuMSw0MzkuNEMyMDAuMSw0NDkuNCwxODMuOSw0NDkuNCwxNzMuOSw0MzkuNEwxNzMuOSw0MzkuNHoiLz4KPC9zdmc+Cg==);
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 1rem;
	background-color: #fff;
}

#reservation input[name=agreement]:checked + span:before {
	content: '';
	display: inline-block;
	width: 3rem;
	height: 3rem;
	border: 1px solid #333;
	border-radius: 3px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGVjayIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWNoZWNrIGZhLXctMTYiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ij48L3BhdGg+PC9zdmc+);
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
}

#reservation .submit-wrap {
	text-align: center;
}

#reservation .submit-wrap > input[type=submit] {
	width: 100%;
	max-width: 280px;
	border: none;
	color: #fff;
	background-color: #333;
	padding: 1rem 2rem;
	cursor: pointer;
	margin-left: 4.5rem;
	transition: all 0.3s ease;
}

#reservation .submit-wrap > input[type=submit]:hover {
	opacity: 0.7;
	transition: all 0.3s ease;
}

#reservation .submit-wrap > input[type=submit]:disabled {
	background-color: #ddd;
	cursor: not-allowed;
}

#reservation>dl:not(.plain)>dd>.zip-wrap>span {
	display: flex;
	align-items: center;
}


/* --------------------------
    gallery
-------------------------- */
#gallery-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

#gallery-list > li {
	width: calc(100% / 5 - 0.5em);
}

#gallery-list > li:not(:nth-of-type(5n)) {
	margin-right: calc(2.5em / 4);
}

#gallery-list > li:nth-of-type(n+6) {
	margin-top: calc(2.5em / 4);
}

#gallery-list > li > button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: #ddd;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	outline: none;
	color: #333;
	padding: 1em 2em;
	appearance: none;
	font-weight: 700;
}

#gallery-list > li > button.current {
	color: #fff;
	background-color: #333;
}

#gallery-images-wrap {
	opacity: 0;
	margin-top: 4em;
	transition: opacity 0.3s ease;
}

#gallery-images-wrap.show {
	opacity: 1;
	transition: opacity 0.3s ease;
}

#gallery-images {
	list-style-type: none;
	width: 100% !important;
}

.item {
	width: calc(100% / 4 - 6px);
	margin-top: 8px;
}

.item2 {
	width: calc(100% / 3 - 6px);
	margin-top: 8px;
}

#gallery-images > li > a > img {
	opacity: 0;
	width: 100%;
}

#gallery-images > li > a > img.show {
	opacity: 1;
	transition: opacity 0.3s ease;
}

#gallery-button-wrap {
	margin-top: 4em;
}

#gallery-button-wrap.hide {
	display: none;
}

#gallery-button-wrap > span {
	display: block;
	width: 2em;
	height: 2em;
	background-image: var(--icon-spiner);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 auto;
}

@media (max-width: 768px) {
	#gallery-list > li {
		width: calc(100% / 2 - 0.25em);
	}
	
	#gallery-list > li:not(:nth-of-type(5n)) {
		margin-right: 0;
	}
	
	#gallery-list > li:nth-of-type(odd) {
		margin-right: calc(1em / 2);
	}
	
	#gallery-list > li:nth-of-type(n+3) {
		margin-top: calc(1em / 2);
	}
	
	#gallery-list > li > button {
		padding: 1em 1.5em;
	}

	.item {
		width: 100%;
	}
}

/* luminous */
.lum-lightbox {
	z-index: 256;
}

.lum-lightbox-inner img {
	margin: 0 auto;
	max-width: calc(100% - 2rem);
	max-height: 90vh;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 768px) {
	.lum-lightbox-position-helper {
		margin: none;
	}
	
	.lum-lightbox-inner img {
		max-width: 100%;
        max-height: 100%;
        width: 100vw;
        height: 100vh;
		object-fit: contain;
	}
}

/* --------------------------
    company
-------------------------- */
.company-catch {
	text-align :center;
	font-size: 2em;
	font-weight: bold;
	margin-bottom: 2rem;
}

@media (max-width: 768px) {
	.company-catch {
		font-size: clamp(1em, 4vw, 2em);
	}
}

/* --------------------------
    faq
-------------------------- */
.qa-list {
	counter-reset: count;
}

.qa-list > dt {
	background-color: #f5f5f5;
	font-weight: 600;
	padding: 1em 3em 1em 4em;
	margin-bottom: 1rem;
	position: relative;
	transition: all 0.3s ease;
}

.qa-list > dt:hover {
	cursor: pointer;
	opacity: 0.7;
	transition: all 0.3s ease;
}

.qa-list > dt:before {
	counter-increment: count;
	content: 'Q'counter(count);
	width: 3em;
	margin-right: 1em;
	position: absolute;
	left: 1em;
	top: 50%;
	transform: translateY(-50%);
}

.qa-list > dt:after {
	content: '';
	border-top: 5px solid #333;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	position: absolute;
	right: 1em;
	top: calc(50% - 0.5em + 5px);
}

.qa-list > dd {
	display: none;
	margin-bottom: 2rem;
}

.qa-list > dd.show {
	display: block;
}

/* --------------------------
    recruit
-------------------------- */
#archive-recruit > div {
	padding: 4em var(--side-margin-narrow) 14em var(--side-margin-narrow);
	position: relative;
}

#archive-recruit > div::before {
	content: '';
	position: absolute;
	bottom: -3rem;
	left: 6rem;
	transform: rotate(-5deg);
	display: block;
	width: 16rem;
	height: 14rem;
	background-image: url(/wp-content/uploads/2024/05/recruiting-3.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 1;
}

#archive-recruit > div::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 6rem;
	display: block;
	background-image: url(/wp-content/uploads/2024/05/recruiting-4.png);
	width: 13rem;
	height: 13rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#philosophy {
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 2em;
}

.text-center {
	text-align: center;
}

.marker {
	background: linear-gradient(to top, #ffadad 30%, transparent 30%);
	font-weight: 600;	
}

.recruit-suggest {
	display: flex;
	flex-flow: column;
	margin-top: 2rem;
}

.recruit-suggest > dt {
	position: relative;
	
	font-size: 1.5em;
	font-weight: 600;
	margin-bottom: 1.5em;
}

.recruit-suggest > dt > span {
	position: relative;
	display: flex;
	justify-content: center;
}

.recruit-suggest > dt > span::before {
	content: '|';
	transform: rotate(-15deg);
	margin-right: 0.5em;
}

.recruit-suggest > dt > span::after {
	content: '|';
	transform: rotate(15deg);
	margin-left: 0.5em;
}

.recruit-suggest > dd > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style-type: none;
}

.recruit-suggest > dd > ul > li:nth-of-type(n + 3) {
	margin-top: 1rem;
}

.recruit-suggest > dd > ul > li {
	width: calc(50% - 0.5em);
	padding: 1em 1em 1em 3em;
	background-color: #f5f5f5;
	position: relative;
}

.recruit-suggest > dd > ul > li:before {
	content: '\f058';
	position: absolute;
	top: 50%;
	left: 0;
	font-family: 'Font Awesome 5 Free';
	font-size: 1.5em;   
	transform: translate(50%, -50%);
	color: #ffadad;
}

.recruit-philosophy {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style-type: none;
}

.recruit-philosophy > div:first-of-type {
	width: calc(60% - 1rem);
}

.recruit-philosophy > div:last-of-type {
	width: calc(40% - 1rem);
	position: relative;
	height: auto;
	display: block;
}

.recruit-philosophy > div:last-of-type > figure:first-of-type {
	position: absolute;
	top: calc(50% + 2rem);
	left: 0;
	transform: translateY(-100%) rotate(5deg);
	width: 90%;
}

.recruit-philosophy > div:last-of-type > figure:last-of-type {
	position: absolute;
	bottom: 50%;
	right: 0;
	width: 80%;
	transform: translateY(100%) rotate(-5deg);
}



.heading3 {
	display: flex;
	flex-flow: column;
	align-items: center;
	margin-bottom: 2rem;
	font-size: 2rem;
}

.heading3 > span.logo {
	width: clamp(30%, 30vw, 26rem);
	margin-top: 0.5rem;
}

.graph-data {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr auto auto auto;
	grid-template-areas:
        "A B C"
"D E E"
"D F F"
"G H H";
	column-gap: 1em;
	row-gap: 1em;
}

.graph-data > .item {
	padding: 2rem;
	width: 100%;
	height: 100%;
	background-color: #fff6f9;
	margin-top: 0;
	border-radius: 0.5rem;
	line-height: initial;
/* 	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3); */
}

.graph-data > .item.a {
	grid-area: A;
}

.graph-data > .item.b {
	grid-area: B;
}

.graph-data > .item.c {
	grid-area: C;
}

.graph-data > .item.d {
	grid-area: D;
}

.graph-data > .item.e {
	grid-area: E;
	display: flex;
	flex-flow: column;
}

.graph-data > .item.f {
	grid-area: F;
	display: flex;
	flex-flow: column;
}

.graph-data > .item.g {
	grid-area: G;
}

.graph-data > .item.h {
	grid-area: H;
	display: flex;
	flex-flow: column;
}

.graph-data > .item.a,
.graph-data > .item.b,
.graph-data > .item.c {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	font-size: clamp(1rem, 2vw, 1.5rem);
}

.graph-data > .item.a > span,
.graph-data > .item.b > span,
.graph-data > .item.c > span {
	font-weight: 600;
	text-align: center;
}

.graph-data > .item.a > span:first-of-type,
.graph-data > .item.b > span:first-of-type,
.graph-data > .item.c > span:first-of-type {
	display: flex;
	align-items: center;
	position: relative;
}

.graph-data > .item.a > span:first-of-type:before,
.graph-data > .item.b > span:first-of-type:before,
.graph-data > .item.c > span:first-of-type:before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: #b1e700;
	background-color: #cd1432;
	position: absolute;
	left: -1rem;
}

.graph-data > .item.a > span > span,
.graph-data > .item.b > span > span,
.graph-data > .item.c > span > span {
	font-size: 3.5em;
	font-family: var(--display-font);
	margin: 0 0.5rem;
	color: #ef7070;
}

.graph-data > .item.d {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.graph-data > .item.d > span {
	font-size: clamp(1rem, 2vw, 1.5rem);
	font-weight: 600;
	margin-bottom: 1rem;
	position: relative;
	display: flex;
	align-items: center;
}

.graph-data > .item.d > span::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: #b1e700;
	background-color: #cd1432;
	position: absolute;
	left: -1rem;
}

.graph-data > .item.d > figure {
	width: 100%;
	height: auto;
}

.graph-data > .item.e > span {
	font-size: clamp(1rem, 2vw, 1.5rem);
	font-weight: 600;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
}

.graph-data > .item.e > span:before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: #b1e700;
	background-color: #cd1432;
	margin-right: 0.5rem;
}

.graph-data > .item.e > figure {
	width: 80%;
	margin: 0 auto;
}

.graph-data > .item.f > span {
	font-size: clamp(1rem, 2vw, 1.5rem);
	font-weight: 600;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
}

.graph-data > .item.f > span:before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: #b1e700;
	background-color: #cd1432;
	margin-right: 0.5rem;
}

.graph-data > .item.f > figure {
	width: 80%;
	margin: 0 auto;
}

.graph-data > .item.g {
	font-size: clamp(1rem, 2vw, 1.5rem);
	font-weight: 600;
	display: flex;
	flex-flow: column;
	align-items: center;
	position: relative;
}

.graph-data > .item.g:before {
	content: '\f77d';
	font-family: var(--font-awesome);
	position: absolute;
	font-size: 5em;
	color: #fff1f2;
	bottom: 0rem;
	left: 2rem;
	mix-blend-mode: multiply;
}

.graph-data > .item.g > span:first-of-type {
	display: flex;
	align-items: center;
	position: relative;
}

.graph-data > .item.g > span:first-of-type:before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: #b1e700;
	background-color: #cd1432;
	position: absolute;
	left: -1rem;
}

.graph-data > .item.g > span:first-of-type > br {
	display: none;
}

.graph-data > .item.g > span:last-of-type {
	margin: auto 0;
	z-index: 1;
}

.graph-data > .item.g > span > span:last-of-type {
	font-size: 3.5em;
	font-family: var(--display-font);
	margin: 0 0.25rem;
	color: #ef7070;
}

.graph-data > .item.h > span {
	font-size: clamp(1rem, 2vw, 1.5rem);
	font-weight: 600;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
}

.graph-data > .item.h > span:before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: #b1e700;
	background-color: #cd1432;
	margin-right: 0.5rem;
}

.graph-data > .item.h > figure {
	width: 80%;
	margin: 0 auto;
}

.graph-data .distribution {
	display: flex;
	margin-bottom: 1em;
	align-items: center;
	font-size: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
}

.graph-data .color-square {
	display: flex;
	align-items: center;
	font-weight: 500;
}

.graph-data .color-square + .color-square {
	margin-left: 0.5rem;
}

.graph-data .color-square.red::before {
	content:'';
	display: block;
	width: 1rem;
	height: 1rem;
	background-color: #ef7070;
	margin-right: 0.25rem;
}

.graph-data .color-square.orange::before {
	content:'';
	display: block;
	width: 1rem;
	height: 1rem;
	background-color: #f7aa2f;
	margin-right: 0.25rem;
}

.graph-data .color-square.green::before {
	content:'';
	display: block;
	width: 1rem;
	height: 1rem;
	background-color: #62c462;
	margin-right: 0.25rem;
}

.graph-data .color-square.blue::before {
	content:'';
	display: block;
	width: 1rem;
	height: 1rem;
	background-color: #4eadf4;
	margin-right: 0.25rem;
}

.work-flow {
	list-style-type: none;
	margin-bottom: 3em;
	counter-reset: count;
	position: relative;
	z-index: 1;
}

.work-flow:before {
	content: '';
	display: block;
	height: 100%;
	border-left: 3px dashed #f7aa2f;
	border-left: 3px dashed #ccc;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -1;
	transform: translateX(-50%);
}

.work-flow > li + li {
	margin-top: 4rem;
}

.work-flow > li > dl {
	padding: 3em;
	background-color: #fff;
	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);
}

.work-flow > li > dl > dt {
	font-size: 1.25em;
	margin-bottom: 1rem;
	font-weight: 600;
}

.work-flow > li > dl > dt:before {
	counter-increment: count;
	content: counter(count)'.';
	font-family: var(--display-font);
	margin-right: 0.5rem;
	font-size: 1.75rem
}

.work-flow > li > dl > dd + dt {
	margin-top: 2rem;
}

.work-flow > li > dl > dd {
	display: flex;
	justify-content: space-between;
}

.work-flow > li > dl > dd > p {
	width: calc(70% - 1rem);
}

.work-flow > li > dl > dd > figure {
	width: calc(30% - 1rem);
	aspect-ratio: 3 / 2;
	background-color: #eee;
	border-radius: 1em;
}

.work-flow > li > dl > dd > figure > img {
	object-fit: cover;
	width: 100%;
	border-radius: 1rem;
}

.work-style-list {
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

.work-style-list:before {
	content: '';
	display: block;
	width: 0;
	height: 100%;
	position: absolute;
	left: calc(50% - 1px);
	top: 0;
	border-left: 2px dashed #ccc;
}

.work-style-list > dt {
	font-family: var(--display-font);
	display: flex;
	justify-content: right;
	align-items: center;
	width: 50%;
	padding: 0 2em;
	position: relative;
	font-weight: 600;
}

.work-style-list > dt:before {
	content: '';
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: #62c462;
	right: -4px;
	top: 50%;
	transform: translateY(-50%);
}

.work-style-list > dt:nth-of-type(n + 1) {
	margin-top: 4px;
}

.work-style-list > dd {
	width: 50%;
	padding: 1em 2em;
}

.work-style-list > dd:nth-of-type(n + 1) {
	margin-top: 4px;
}

@media (max-width: 768px) {
	#archive-recruit > div {
		padding: 2em 1em 10em 1em;
	}
	
	#archive-recruit > div::before {
		bottom: -1rem;
		left: 0rem;
		width: 12rem;
		height: 9rem;
	}
	
	#archive-recruit > div::after {
		right: 1rem;
		width: 9rem;
		height: 9rem;
	}
	
	#philosophy {
		font-size: clamp(1em, 4vw, 1.25em);
		text-align: left;
	}
	
	#philosophy > br {
		display: none;
	}
	
	.heading3 > span.logo {
		width: 60%;
	}
	
	.recruit-suggest > dd > ul > li {
		width: 100%;
	}
	
	.recruit-suggest > dd > ul > li:nth-of-type(n + 3) {
		margin-top: 1em;
	}
	
	.recruit-suggest > dd > ul > li + li {
		margin-top: 1em;
	}
	
	.marker > br {
		display: none;
	}
	
	.text-center {
		text-align: left;
	}
	
	.recruit-philosophy {
		flex-flow: column;
	}
	
	.recruit-philosophy > div:first-of-type,
	.recruit-philosophy > div:last-of-type {
		width: 100%;
	}
	
	.recruit-philosophy > div:last-of-type {
		position: initial;
		display: flex;
		margin-top: 2rem;
	}
	
	.recruit-philosophy > div:last-of-type > figure:first-of-type,
	.recruit-philosophy > div:last-of-type > figure:last-of-type {
		width: 100%;
		position: initial;
	}
	
	.recruit-philosophy > div:last-of-type > figure:last-of-type {
		margin-top: 2rem;
	}
	
	.graph-data {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto auto auto auto;
		grid-template-areas: "A B"
"C G"
"D D"
"E E"
"F F"
"H H";
	}
	
	.graph-data br {
		display: block;
	}
	
	.graph-data > .item {
		padding: 2em;
	}
	
	.graph-data > .item.a > span,
	.graph-data > .item.b > span,
	.graph-data > .item.c > span,
	.graph-data > .item.g {
		text-align: center;
		font-size: 1em;
	}
	
	.graph-data > .item.a > span > span,
	.graph-data > .item.b > span > span,
	.graph-data > .item.c > span > span {
		font-size: 3.5em;
	}
	
	.graph-data > .item.e > figure,
	.graph-data > .item.f > figure,
	.graph-data > .item.h > figure {
		width: 100%;
	}
	
	.graph-data > .item.g > span:first-of-type {
		margin-bottom: 0;
		text-align: center;
	}
	
	.graph-data > .item.g > span > span:last-of-type {
		font-size: 3.5em;
	}
	
	.graph-data > .item.g:before {
		bottom: initial;
		top: -1rem;
		left: 50%;
		transform: translate(-50%, 50%);
	}
	
	.work-flow > li > dl {
		padding: 2em;
	}
	
	.work-flow > li > dl > dd {
		flex-flow: column-reverse;
	}
	
	.work-flow > li > dl > dd + dt {
		margin-top: 1em;
	}
	
	.work-flow > li > dl > dd > figure {
		width: 100%;
		margin-bottom: 1em;
	}
	
	.work-flow > li > dl > dd > p {
		width: 100%;
	}
	
	.work-style-list {
		margin-left: 2em;
		flex-flow: column;
	}
	
	.work-style-list:before {
		left: calc(-1em - 1px);
	}
	
	.work-style-list > dt {
		width: 100%;
		justify-content: left;
	}
	
	.work-style-list > dd {
		width: 100%;
		padding: 0.5em 2em;
	}
	
	.work-style-list > dt:before {
		right: initial;
		left: calc(-1em - 4px);
	}
	
	.work-style-list > dd + dt {
		margin-top:1em;
	}
	
}

#recruit_text {
	padding: 0 4em;
	margin-bottom: 2em;
}

@media (max-width: 768px) {
	#recruit_text {
		padding: 0;
	}
}

/* --------------------------
    studio
-------------------------- */
.studio {
	margin: 4rem 0 0 0;
}

.studio + .studio {
	margin-top: 4rem;
}

.studio > div {
	display: flex;
	flex-flow: column;
}

.studio > div > span {
	display: flex;
	width: calc(80% - 1rem);
	font-size: 2rem;
	font-family: var(--display-font);
	align-items: baseline;
	font-weight: bold;
	margin-left: auto;
}

.studio > div > span:before {
	counter-increment: count;
	content: '0'counter(count);
	font-size: 3rem;
	margin-right: 0.35rem;
}

.studio > div > div:first-of-type {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.studio > div > div:first-of-type > h2 {
    display: flex;
    width: calc(20% - 1rem);
    writing-mode: tb-rl;
    flex-flow: column;
    justify-content: center;
    margin-left: 1rem;
    font-size: clamp(2vw,1.5rem,3.5vw);
}

.studio > div > div:first-of-type > h2:before {
	content: attr(data-text);
	font-size: clamp(3vw,3rem,4vw);
	font-family: var(--display-font);
}

.studio > div > div:first-of-type > img {
    width: calc(80% - 1rem);
}

.studio > div > div:last-of-type > .catch {
	font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
}

.studio > div > div:last-of-type > .catch > div {
	display: flex;
}

.studio > div > div:last-of-type > .catch > div > span {
    padding: 0.5rem 1rem;
    background-color: #333;
    color: #fff;
}

.studio > div > div:last-of-type > .catch > div + div {
	margin-top: 0.5em;
}

.studio.reversal > div > span {
	margin-left: 0;
	margin-right: auto;
	justify-content: end;
	font-weight: 600;
}

.studio.reversal > div > div:first-of-type {
	flex-flow: row-reverse;
}

.studio.reversal > div > div:first-of-type > h2 {
	margin-left: 0;
	margin-right: 1rem;
}

@media (max-width: 768px) {
	.studio:nth-of-type(odd) > div > div > span {
		width: calc(80% - 0.5em);
	}
	
	.studio > div > div > div:first-of-type {
		
	}
	
	.studio > div > div > div:first-of-type > h2 {
		width: calc(20% - 0.5rem);
	}
	
	.studio > div > div:last-of-type > .catch {
		font-size: 1.25em;
	}
}

/* --------------------------
    flow
-------------------------- */
.cls-1 {
	fill: #fff;
}

.cls-2 {
	fill: #333;
}

#flow-list {
	list-style-type: none;
	position: relative;
	margin-bottom: 2rem;
}


#flow-list:before {
	content: '';
	display: block;
	height: 100%;
	border-left: 1px solid #333;
	position: absolute;
	left: 2.5rem;
}

#flow-list > li {
	display: flex;
	justify-content: space-between;
	position: relative;
	align-items: center;
}

#flow-list > li + li {
	margin-top: 2rem;
}

#flow-list > li > figure {
	width: 5rem;
	height: 5rem;
	background-color: #333;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#flow-list > li > figure > i {
	color: #fff;
	font-size: 2.5rem;
}

#flow-list > li > figure > svg {
	width: 100%;
	height: 100%;
	max-width: 40px;
	max-height: 40px;
}

#flow-list > li > div {
	width: calc(100% - 7rem);
	padding: 1em 2em;
}

@media (max-width: 768px) {
	#flow-list:before {
		left: 1.5em;
	}
	
	#flow-list > li {
		align-items: start;
	}
	
	#flow-list > li > figure {
		width: 3em;
		height: 3em;
		margin-top: 0.5em;
	}
	
	#flow-list > li > figure > i {
		font-size: 1.5em;
	}
	
	#flow-list > li > div {
		width: calc(100% - 4em);
		padding: 0;
	}
	
	#flow-list > li > figure > svg {
		max-width: 24px;
		max-height: 24px;
	}
	
}

/* --------------------------
    testimonials
-------------------------- */
#testimonials-list {
	list-style-type: none;
}

#testimonials-list > li {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#testimonials-list > li + li {
	margin-top: 2rem;
}

#testimonials-list > li > div {
	width: 8rem;
	justify-content: space-between;
	align-items: center;
	border-radius: 5px;
	position: relative;
	font-weight: bold;
	display: flex;
	flex-flow: column;
}

#testimonials-list > li > div:before {
	content: '\f2bd';
    font-family: 'Font Awesome 5 Free';
    line-height: 1;
    letter-spacing: 0;
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

#testimonials-list > li:nth-of-type(even) {
	flex-flow: row-reverse;
}

#testimonials-list > li > p {
	width: calc(100% - 10rem);
	position: relative;
	padding: 2em 4em;
	background-color: #f5f5f5;
	border-radius: 5px;
	text-align: justify;
}

#testimonials-list > li > p:before {
	content: '';
	display: block;
	border-top: 0.5rem solid transparent;
	border-left: 0.5rem solid transparent;
	border-bottom: 0.5rem solid transparent;
	border-right: 0.5rem solid #f5f5f5;
	position: absolute;
	top: calc(50% - 0.5rem);
	left: -1rem;
	text-align: center;
}

#testimonials-list > li:nth-of-type(even) > p:before {
	content: '';
	display: block;
	border-top: 0.5rem solid transparent;
	border-right: 0.5rem solid transparent;
	border-bottom: 0.5rem solid transparent;
	border-left: 0.5rem solid #f5f5f5;
	position: absolute;
	top: calc(50% - 0.5rem);
	right: -1rem;
	left: auto;
	text-align: center;
}

@media (max-width: 768px) {
	#testimonials-list > li {
		flex-direction: column;
		align-items: stretch;
	}
	
	#testimonials-list > li:nth-of-type(even) {
		flex-direction: column;
	}
	
	#testimonials-list > li > div {
		flex-direction: row;
		margin-bottom: 1rem;
		margin-left: 1rem;
		width: auto;
		justify-content: normal;
	}
	
	#testimonials-list > li > div:before {
		margin-bottom: 0;
		margin-right: 1rem;
	}
	
	#testimonials-list > li > p {
		width: 100%;
		padding: 2em 1em;
	}
	
	#testimonials-list > li > p:before {
		top: -1em;
		left: 2.5rem;
		border-top: 0.5rem solid transparent;
		border-left: 0.5rem solid transparent;
		border-right: 0.5rem solid transparent;
		border-bottom: 0.5rem solid #f5f5f5;
	}
	
	#testimonials-list > li:nth-of-type(even) > p:before {
		top: -1em;
		left: 2.5rem;
		right: auto;
		border-top: 0.5rem solid transparent;
		border-left: 0.5rem solid transparent;
		border-right: 0.5rem solid transparent;
		border-bottom: 0.5rem solid #f5f5f5;
	}
}

/* --------------------------
    video
-------------------------- */
#event-video-list {
	list-style-type: none;
	display: flex;
	justify-content: space-between;
}

#event-video-list > li {
	width: calc(100% / 4 - 1rem);
}

#event-video-list > li > p {
	text-align: center;
}

#works-list {
	list-style-type: none;
	margin-bottom: 2rem;
	display: flex;
	flex-wrap: wrap;
}

#works-list > li {
	width: calc(50% - 1rem);
}

#works-list > li:nth-of-type(even) {
	margin-left: 2rem;
}

#works-list > li:nth-of-type(n + 3) {
	margin-top: 2rem;
}

#works-list > li > div {
	padding-top: calc(100% / 16 * 9);
	position: relative;
	margin-bottom: 1rem;
}

#works-list > li > div > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#works-list > li > p {
	text-align: center;
}


/* --------------------------
    reservation
-------------------------- */
.store-list {
	list-style-type: none;
}

.store-list > li {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.store-list > li + li {
	margin-top: 4rem;
}

.store-list > li > img {
	width: calc(50% - 1rem);
}

.store-list > li > div {
	width: calc(50% - 1rem);
	display: flex;
	flex-flow: column;
	align-items: center;
}

.store-list > li > div > div {
	font-size: 2rem;
	font-family: var(--display-font);
	display: flex;
	align-items: center;
}

.store-list > li > div > div > svg {
	height: 32px;
	margin-right: 0.5rem;
}

.store-list > li > div > div > i {
	margin-right: 0.5rem;
	color: #333;
}

.reservation-flow {
	list-style-type: none;
	counter-reset: count;
	margin-left: 1em;
	margin-top: 3em;
	position: relative;
	text-align: justify;
}

.reservation-flow:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	height: 100%;
	width: 0.25em;
	background-color: var(--color);
	transform: translate(-50%, 0%);
}

.reservation-flow > li + li {
	margin-top: 4rem;
}

.reservation-flow > li {
	position: relative;
	padding: 2em 2em 2em 4em;
	background-color: #eee;
}

.reservation-flow > li:before {
	counter-increment: count;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	content: counter(count);
	width: 4rem;
	height: 4rem;
	top: -1rem;
	left: -1rem;
	border-radius: 50%;
	font-family: var(--display-font);
	font-size: 1.25em;
	color: #fff;
	background-color: var(--color);
}

.reservation-flow > li > small {
	font-weight: 600;
	background: linear-gradient(to top, #f2cec6 50%, transparent 50%);
}

@media (max-width: 768px) {
	.store-list > li {
		flex-flow: column;
	}
	
	.store-list > li > img {
		width: 100%;
		margin-bottom: 2em;
	}
	
	.store-list > li > div {
		width: 100%;
	}
	
	.reservation-flow > li {
		padding: 2em;
	}
	
	.reservation-flow > li + li {
		margin-top: 3em;
	}
	
	.reservation-flow > li:before {
		width: 3em;
		height: 3em;
		font-size: 1em;
		top: -1em;
		left: -1em;
	}
}

/* --------------------------
    access
-------------------------- */
#parking-col2 {
	display: flex;
	justify-content: space-between;
}

#parking-col2 > * {
	width: calc(50% - 1rem);
}

#parking-col2 > img {
	margin-left: 2rem;
}

#parking-col2 > figure {
	padding-top: calc((50% - 1rem) /16 * 9);
	height: 100%;
	position: relative;
	overflow: hidden;
}

#parking-col2 > figure > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.parking-guide {
	display: flex;
	flex-flow: column;
	list-style-type: none;
}

.parking-guide > li {
	display: flex;
	justify-content: space-between;
	flex-flow: column;
}

.parking-guide > li > figure > figcaption {
	margin-top: 1em;
    text-align: justify;
}

.parking-guide > li + li {
	margin-top: 2rem;
}

@media (max-width: 768px) {
	#youtube-col2 {
		display: flex;
	}
	
	#parking-col2 {
		flex-flow: column;
	}
	
	#parking-col2 > figure {
		padding-top: calc(100% /16 * 9);
		width: 100%;
	}
	
	#parking-col2 > img {
		width: 100%;
		margin-left: 0;
		margin-top: 2em;
	}
}
/* --------------------------
    plan common
-------------------------- */
.plan {
	background-color: #fff;
	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
	margin-top: 5em;
}

.plan > dt {
	text-align: center;
	transform:  translateY(-50%);
	margin-bottom: -3em;
}

.plan > dt > span {
	display: inline-block;
	height: 100%;
	font-size: 1.5em;
	margin: 0 1em;
	position: relative;
}

.plan > dt > span > span {
	display: inline-block;
	padding: 1em 2em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background-color: #444;
	position: relative;
	z-index: 1;
}

.plan > dt > span:before {
	content: '';
	display: block;
	border-top: 1.5em solid #333;
	border-left: 0.5em solid transparent;
	border-right: 2em solid #333;
	border-bottom: 1.5em solid #333;
	position: absolute;
	top: 0.25em;
	left: 0.5em;
	z-index: -1;
	transform: translateX(-100%);
}

.plan > dt > span:after {
	content: '';
	display: block;
	border-top: 1.5em solid #333;
	border-right: 0.5em solid transparent;
	border-left: 2em solid #333;
	border-bottom: 1.5em solid #333;
	position: absolute;
	top: 0.25em;
	right: 0.5em;
	z-index: -2;
	transform: translateX(100%);
}

.plan > dd {
	padding: 3em;
}

.plan-contain-list {
	list-style-type: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	font-weight: 700;
	font-size: 0.875em;
}

.plan-contain-list > li {
	display: flex;
	flex-flow: column;
	align-items: center;
	width: calc(100% / 4 - 1em);
	padding: 2em;
	margin: 0 calc(4em / 8);
	background-color: #eee;
	color: #333;
	border-radius: 0.5em;
	text-align: center;
	
}

.plan-contain-list > li:nth-of-type(n+5) {
	margin-top: calc(4em / 4);
}

.plan-contain-list > li > a {
	display: flex;
	flex-flow: column;
	align-items: center;
	width: 100%;
}

.plan-contain-list > li i {
	width: 5em;
	height: 5em;
	margin-bottom: 1em;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.plan-contain-list > li i::before {
	font-size: 2.5rem;
}

.plan-contain-list > li i.round {
	overflow: hidden;
	border-radius: 50%;
}

.plan-contain-list > li i > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

.plan-contain-list > li i > svg {
	width: auto;
	height: 100%;
	max-height: 40px;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
}

.plan-contain-list > li i > svg > .st0 {
	fill: #333;
}

.icon-color .st0 {
	fill: #333;
}

.plan-fee-list {
	display: flex;
	flex-wrap: wrap;
}

.plan-fee-list > dt {
	display: flex;
	align-items: center;
	width: 60%;
	padding: 1em 2em;
	background-color: #ddd;
	font-weight: 700;
	flex-wrap: wrap;
}

.plan-fee-list > dt:nth-of-type(n+1) {
	margin-top: 4px;
}

.plan-fee-list > dd {
	width: 40%;
	padding: 1em 2em;
	background-color: #eee;
	display:flex;
	align-items: center;
	text-align: left;
}

.plan-fee-list > dd.right {
	justify-content: flex-end;
}

.plan-fee-list > dd:nth-of-type(n+1) {
	margin-top: 4px;
}

.plan-supplement-list {
	padding-left: 1em;
	font-size: 0.875em;
	text-align: justify;
}

.plan-supplement-list > li + li {
	margin-top: 0.5em;
}

.plan-supplement-list a {
	text-decoration: underline;
}

/* --------------------------
    plan
-------------------------- */
.plan-item {
	background-color: #fff;
	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
	margin-top: 5em;
}

.plan-item > dt {
	text-align: center;
	transform:  translateY(-50%);
	margin-bottom: -3em;
}

.plan-item > dt > span {
	display: inline-block;
	height: 100%;
	font-size: 1.5em;
	margin: 0 1em;
	position: relative;
}

.plan-item > dt > span > span {
	display: inline-block;
	padding: 1em 2em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background-color: #444;
	position: relative;
	z-index: 1;
}

.plan-item > dt > span:before {
	content: '';
	display: block;
	border-top: 1.5em solid #333;
	border-left: 0.5em solid transparent;
	border-right: 2em solid #333;
	border-bottom: 1.5em solid #333;
	position: absolute;
	top: 0.25em;
	left: 0.5em;
	z-index: -1;
	transform: translateX(-100%);
}

.plan-item > dt > span:after {
	content: '';
	display: block;
	border-top: 1.5em solid #333;
	border-right: 0.5em solid transparent;
	border-left: 2em solid #333;
	border-bottom: 1.5em solid #333;
	position: absolute;
	top: 0.25em;
	right: 0.5em;
	z-index: -2;
	transform: translateX(100%);
}

.plan-item > dd {
	padding: 3em;
}

.item-gallery-wrap {
	width: calc(100% - 8rem);
	overflow: hidden;
	margin: 0 auto 2rem;
}

.item-gallery {
	position: relative;
}

.item-gallery > div >div {
	display: flex;
	flex-flow: column;
}

.item-gallery > div >div >h3 {
	margin-bottom: 1rem;
	font-size: 1.25em;
}

.item-gallery .swiper-slide > div {
	display: block;
	padding-top: calc(100% / 3 * 2);
	background: repeating-linear-gradient(135deg, #eee, #eee 3px, #f5f5f5 3px, #f5f5f5 6px);
	position: relative;
	transition: all 0.3s ease;
}

.item-gallery .swiper-slide > div:after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border: 1px solid #ccc;
}

.swiper-slide > div > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

.item-gallery .swiper-slide > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

.item-gallery .swiper-button-prev {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.5em;
	height: 2.5em;
	background-color: var(--color);
	line-height: 1;
	color: #fff;
	left: 0;
	top: calc(50% - (1.5rem /2));
	transform: translate(0, 100%);
}

.item-gallery .swiper-button-prev:after {
    display: flex;
    justify-content: center;
    align-items: center;
    content: '\f177';
    font-family: var(--font-awesome);
    font-weight: 700;
    font-size: 1em;
    width: 100%;
    height: 100%;
}

.item-gallery .swiper-button-next {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5em;
    height: 2.5em;
    background-color: var(--color);
    line-height: 1;
    color: #fff;
    right: 0;
	top: calc(50% - (1.5rem /2));
	transform: translate(0, 100%);
}

.item-gallery .swiper-button-next:after {
    display: flex;
    justify-content: center;
    align-items: center;
    content: '\f178';
    font-family: var(--font-awesome);
    font-weight: 700;
    font-size: 1em;
    width: 100%;
    height: 100%;
}

.plan-album {
	width: calc(100% - 8rem);
	margin: 0 auto 2rem auto;
}

.plan-album.data-col2 {
	display: flex;
}

.plan-album > div {
	display: flex;
	flex-flow: column;
}

.plan-album.data-col2 > div {
	width: calc(50% - 0.5em);
}

.plan-album.data-col2 > div:nth-of-type(even) {
	margin-left:1em;
}

.plan-album:not(.data-col2) > div + div {
	margin-top: 2rem;
}

.plan-album > div > h3 {
	margin-bottom: 1rem;
	font-size: 1.25em;
}

.plan-album > div > img {
	width: 100%;
	height: 100%;
	border: 1px solid #ccc;
}

@media (max-width: 768px) {
	.plan-album.data-col2 {
		flex-flow: column;
	}
	
	.plan-album.data-col2 > div {
		width: 100%;
	}
	
	.plan-album.data-col2 > div:nth-of-type(even) {
		margin-left: 0;
		margin-top: 2rem;
	}
	
	.plan-item > dt > span {
		font-size: 1.25em;
	}
	
	.plan-item > dd {
		padding: 3em 1em 1em 1em;
	}
	
	.plan > dt > span {
		font-size: 1.25em;
	}

	.plan-fee-list > dt,
	.plan-fee-list > dd {
		width: 100%;
	}

	.plan > dd {
		padding: 3em 1em 1em 1em;
	}
	
	.item-gallery-wrap {
		width: 100%;
	}

	.plan-contain-list > li {
		width: calc(50% - 0.5em);
		margin: 0 calc(1em / 4);
		padding: 1.5em;
	}
	
	.plan-contain-list > li:nth-of-type(n+5) {
		margin-top: calc(1em / 2) calc(1em / 4) 0 calc(1em / 4);
	}

	.plan-contain-list > li:nth-of-type(n+3) {
		margin: calc(1em / 2) calc(1em / 4) 0 calc(1em / 4);
	}
	
	.plan-fee-list {
		flex-flow: column;
	}
	
	.plan-fee-list > dt {
		width: 100%!important;
		justify-content: center;
	}
	
	.plan-fee-list > dd {
		width: 100%!important;
	}
	
	.plan-album {
		width: 100%;
	}
}

/* --------------------------
    delivery-photo
-------------------------- */
.delivery-photo-chatch {
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 2rem;
}

.delivery-photo-service {
	display: flex;
	flex-wrap: wrap;
}

.delivery-photo-service > li {
	width: calc(100% / 3 - 1rem);
	display: flex;
	flex-flow: column;
}

.delivery-photo-service > li:not(:nth-of-type(3n)) {
	margin-right: calc(3rem / 2);
}

.delivery-photo-service > li:nth-of-type(n + 4) {
	margin-top: 2rem;
}

.delivery-photo-service > li > h3 {
	text-align: center;
}

/* --------------------------
    photoitem
-------------------------- */
.item-list {
	list-style-type: none;
	display: flex;
	flex-flow: column;
}

.item-list > li {
	position: relative;
}

.item-list > li:before {
    counter-increment: count;
    content: counter(count, decimal-leading-zero);
    font-size: 3rem;
    font-family: var(--display-font);
	font-weight: 700;
    width: 100%;
    display: flex;
	letter-spacing: 0;
}

.item-list > li:nth-of-type(even):before {
	justify-content: end;
}

.item-list > li + li {
	margin-top: 4rem;
}

.item-list > li > div{
	display: flex;
	flex-flow: row-reverse;
	margin-bottom: 2em;
	justify-content: space-between;
}

.item-list > li:nth-of-type(even) > div {
	flex-flow: row;
}

.item-list > li > div > .heading-vertical {
	width: calc(20% - 0.5em);
	font-size: 1.5rem;
	display: flex;
	writing-mode: vertical-rl;
	flex-flow: column-reverse;
	justify-content: center;
}

.item-list > li > div > .heading-vertical::after {
	content: attr(data-text);
	font-size: 1rem;
}

.item-list > li > div > img {
	width: calc(80% - 0.5em);
}

.item-list > li > div > div {
	width: 80%;
}

.item-list > li > p {
	padding: 2em;
	background-color: #f5f5f5;
}

.item-list > li > dl {
	flex-wrap: wrap;
	display: flex;
	margin-top: 2em;
	font-size: 0.875rem;
	border-top: 1px solid #333;
}

.item-list > li > dl > dt {
	display: flex;
	width: 60%;
	align-items: center;
	padding: 1em 1.5em;
	border-bottom: 1px solid #333;
	background-color: #f5f5f5;
}

.item-list > li > dl > dd {
	display: flex;
	width: 40%;
	align-items: center;
	padding: 1em 1.5em;
	justify-content: end;
	border-bottom: 1px solid #333;
}

.item-list > li > dl > dd::after {
	content: '(税込)';
	font-size: 0.75rem;
	margin-left: 0.5rem;
}

@media (max-width: 768px) {
	.item-list > li > dl {
		font-size: 1em;
	}
	
	.item-list > li > dl > dt {
		width: 100%;
		justify-content: center;
	}
	
	.item-list > li > dl > dd {
		width: 100%;
	}
}



/* --------------------------
    shrine-visit
-------------------------- */
.shrine-visit-campaign {
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
}

.shrine-visit-campaign > figure {
	position: relative;
}

.shrine-visit-campaign > figure::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-image: var(--shrine-visit-campaign);
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.shrine-visit-campaign .st0 {
	fill:#FBB6B2;
}

.shrine-visit-campaign .st1{
	fill:#dd979c;
}

.shrine-visit-campaign .st2 {
	fill:#dd979c;
}

.shrine-visit-campaign .st3 {
	fill:#dd979c;
}

.shrine-visit-campaign .st4 {
	fill:#dd979c;
}

.shrine-visit-campaign .st5 {
	fill:#dd979c;
}

.shrine-visit-campaign .st6{ 
	fill:#dd979c;
}

.shrine-visit-campaign .st7 {
	fill:#dd979c;
}

.shrine-visit-campaign .st8 {
	fill:#dd979c;
}

.shrine-visit-campaign .st9 {
	fill:#dd979c;
}

.shrine-visit-campaign .st10 {
	fill:#dd979c;
}

.shrine-visit-campaign .st11 {
	fill:#dd979c;
}

.shrine-visit-campaign .st12 {
	fill:#dd979c;
}

.shrine-visit-campaign .st13 {
	fill:#dd979c;
}

.shrine-visit-campaign .st14 {
	fill:#dd979c;
}

.shrine-visit-campaign .st15 {
	fill:#dd979c;
}

.shrine-visit-campaign .st16 {
	fill:#fffc;
}

.shrine-visit-campaign .st17 {
	fill:#dd979c;
}

.shrine-visit-campaign .st18 {
	opacity:0.5;fill:#FBADA9;enable-background:new;
}

.shrine-visit-campaign .st19 {
	opacity:0.5;fill:#D1C6EE;enable-background:new;
}

.shrine-visit-campaign .st20 {
	opacity:0.5;fill:#90CDF2;enable-background:new;
}

.shrine-visit-campaign .st21 {
	fill:#564C45;
}

.shrine-visit-campaign .st22{
		fill:#514336;
}


/* --------------------------
    recruit
-------------------------- */
#recruit-archive-list {
	list-style-type: none;
}

#recruit-archive-list > li + li {
	margin-top: 1em;
}

#recruit-archive-list > li > a {
	display: block;
	background-color: #fff;
	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);
	position: relative;
	transition: all 0.3s ease;
}

#recruit-archive-list > li > a:hover {
	opacity: 0.7;
	transition: all 0.3s ease;
}

#recruit-archive-list > li > a:before {
	content: '';
	display: block;
	border-top: 6px solid transparent;
	border-left: 6px solid var(--color);
	border-right: 6px solid transparent;
	border-bottom: 6px solid transparent;
	position: absolute;
	top: 50%;
	right: 1.5em;
	transform: translateY(-50%);
	transition: all 0.3s ease;
}

#recruit-archive-list > li > a:hover:before {
	right: 1em;
	transition: all 0.3s ease;
}

#recruit-archive-list > li > a > article {
	display: flex;
}

#recruit-archive-list > li > a > article > figure {
	width: 15%;
	aspect-ratio: 1 / 1;
	background-color: #eee;
	position: relative;
}


#recruit-archive-list > li > a > article > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

#recruit-archive-list > li > a > article > div {
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 85%;
	padding: 1em 3em 1em 2em;
}

#recruit-archive-list > li > a > article > div > h3 {
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-size: 1em;
}

@media (max-width: 768px) {
	#recruit-archive-list > li > a > article > figure {
		width: 25%;	
	}

	#recruit-archive-list > li > a > article > div {
		width: 75%;
		padding: 1em 3em 1em 1em;
	}

	#recruit-archive-list > li > a > article > div > h3 {
		-webkit-line-clamp: 2;
		font-size: 0.875em;
	}
}

/* --------------------------
    plan
-------------------------- */
#message {
	display: flex;
}

#message > div {
	display: flex;
	flex-flow: column;
	width: calc(50% - 1rem);
}

#message > div + div {
	margin-left: 2rem;
}

#message > div > div {
	display: flex;
	flex-flow: column;
	text-align: center;
}

#message > div > div > span:first-of-type {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1em;
}

#photo-plan-campaign .swiper-slide > a > article > figure {
	width: 100%;
	padding-top: calc(100% / 3 * 2);
	background-color: #eee;
	position: relative;
}

#photo-plan-campaign .swiper-slide > a > article > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

#photo-plan-campaign .swiper-slide > a > article > time {
	display: block;
	font-family: var(--display-font);
	color: #555;
	text-align: right;
}

#photo-plan-campaign .swiper-slide > a > article > time > span {
	font-size: 1.5em;
}

#photo-plan-campaign .swiper-slide > a > article > h3 {
	font-size: 1em;
	margin-top: 0.5em;
	text-decoration: none;
}

/* --------------------------
    a-form
-------------------------- */
.wq-Form .wq-WNavigator>.wq--overlay>.wq--dialog {
	height: calc(100vh - (100px + 5vh))!important;
	margin: calc(100px + 2.5vh) auto 2.5vh!important;
	color: #333;
}

.wq-Form .wq-Option>.wq--label {
	padding: 1rem 2rem!important;
}

.wq-Form .wq-Option.wq-belongs-wnavigator + div {
	border-top: 1px solid #f5f5f5;
}

.wq-Form .wq-Option.wq-belongs-wnavigator>.wq--label>.wq--main>.wq--name {
	margin-bottom: 0.5rem;
/* 	padding-right: 0!important; */
}

/* .wq-Form .wq-Option.wq-belongs-wnavigator>.wq--label>.wq--main>.wq--prices {
	padding-right: 0!important;
} */

/* --------------------------
    houmongi-rental
-------------------------- */
.houmongi-col2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.houmongi-col2 > img {
	width: calc(40% - 1rem);
}

.houmongi-col2 > div {
	width: calc(60% - 1rem);
}

.houmongi-col2 > div > h3 {
	margin-bottom: 2em;
}

#costume-images {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
}

#costume-images > li {
	width: calc(100% / 3 - 8px);
}

#costume-images > li:not(:nth-of-type(3n)) {
	margin-right: calc(24px / 2);
}

#costume-images > li:nth-of-type(n + 4) {
	margin-top: 2rem;
}

#costume-images > li a {
	text-decoration: none;
}

#costume-images > li a figcaption {
	margin-top: 1rem;
	display: flex;
	justify-content: center;
	font-size: 1rem;
	font-weight: 600;
}

#costume-images > li > dl {
	margin-top: 1em;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875em;
}

#costume-images > li > dl > dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10rem;
	background-color: #ddd;
	padding: 0.75em 1.5em;
	font-weight: 700;
	flex-flow: column;
}

#costume-images > li > dl > dt:nth-of-type(n+1) {
	margin-top: 4px;
}

#costume-images > li > dl > dt > span {
	font-size: 0.875em;
}

#costume-images > li > dl > dd {
	width: calc(100% - 10rem);
	padding: 0.75em 1.5em;
	background-color: #eee;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

#costume-images > li > dl > dd:nth-of-type(n+1) {
	margin-top: 4px;
}

#costume-images > li > dl > dd:not(:first-of-type) {
	justify-content: end;
}

#costume-images > li > dl > dd > span {
	font-size: 0.75rem;
	margin-left: 0.5em;
}

.fee-list {
	display: flex;
	flex-wrap: wrap;
}

.fee-list > dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60%;
	background-color: #ddd;
	padding:1em 2em;
	font-weight: 700;
}

.fee-list > dt:nth-of-type(n+1) {
	margin-top: 4px;
}

.fee-list > dd {
	width: 40%;
	padding: 1em 2em;
	display: flex;
	justify-content: end;
	align-items: baseline;
	flex-wrap: wrap;
	background-color: #eee;
}

.fee-list > dd:nth-of-type(n+1) {
	margin-top: 4px;
}

.fee-list > dd > span {
	font-size: 0.75em;
	margin-left: 0.5rem;
}

.houmongi-rental-set {
	display: flex;
	flex-flow: column;
	margin-top: 4rem;
	padding: 2rem;
	background-color: #fff;
	box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
}

.houmongi-rental-set > dt {
	font-size: 1.5rem;
	font-weight: 600;
	display: flex;
	justify-content: center;
}

.houmongi-rental-set > dd {
	margin-top: 1rem;
}

.houmongi-rental-set > dd > ul {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.houmongi-rental-set > dd > ul > li {
	margin: 4px;
	padding: 0.5rem 1rem;
	background-color: #ddd;
}

@media (max-width: 800px) {
	#costume-images > li {
		width: 100%;
	}
	
	#costume-images > li:not(:nth-of-type(3n)) {
		margin-right: 0;
	}

	#costume-images > li:nth-of-type(n + 4) {
		margin-top: 0;
	}
	
	#costume-images > li + li {
		margin-top: 2rem!important;
	}
	
	#costume-images > li img {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.houmongi-col2 {
		flex-flow: column;
		margin-bottom: 2rem;
	}
	
	.houmongi-col2 > img {
		width: 100%;
	}
	
	.houmongi-col2 > div {
		width: 100%;
	}
	
	.houmongi-col2 > img + div {
		margin-top: 2rem;
	}
	
	#costume-images > li > dl {
		font-size: 1em;
	}
	
	#costume-images > li > dl > dt {
		width: 100%;
		padding: 1em 2em;
	}
	
	#costume-images > li > dl > dd {
		width: 100%;
		padding: 1em 2em;
	}
	
	.fee-list > dt {
		width: 100%;
	}
	
	.fee-list > dd {
		width: 100%;
	}
	
	.houmongi-rental-set > dd > ul > li {
		padding: 0.25rem 0.75rem;
	}
}

/* --------------------------
    test
-------------------------- */
/* topスライダー */
#page-main-banner {
	height: 600px;
	overflow: hidden;
}

#page-top-slider .swiper-slide {
	aspect-ratio: 4 / 3;
	height: 600px;
	width: auto!important;
	overflow: hidden;
	background-color: #eee;
	position: relative;
}

#page-top-slider .swiper-slide > picture {
	width: 100%;
	height: 600px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

#page-top-slider .swiper-slide > picture > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

/* 下部スライダー */

#gallary-slider {
	width: 100vw;
	overflow: hidden;
}

#gallary-slider .swiper-slide {
	aspect-ratio: 3 / 4;
	position: relative;
}

#gallary-slider > .swiper-wrapper {
	transition-timing-function: linear;
}

#gallary-slider .swiper-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

#plan-top {
	font-family: var(--serif-font2);
}


/* 背景 */
.page-photo-plan {
	position: relative;
	overflow: hidden;
}

.bg-pink {
	background-color: rgba(245,225,223,0.6);
}

.bg-orange {
	background-color: rgba(246,221,190,0.6);
}

.bg-blue {
	background-color: rgba(163,221,226,0.4);
}

/* プラン箱 */
.photo-plan {
	box-shadow: -1em -1em 2em rgba(255, 255, 255, 1), 1em 1em 2em rgba(0, 0, 0, 0.1);
	background-color: #fff;
	margin-top: 5em;
	position: relative;
	font-family: var(--serif-font);
}

.photo-plan.pink:before {
	content: '';
	position: absolute;
	background-image: var(--plan-ornament1);
	background-repeat: no-repeat;
	display: block;
	width: 50vw;
	height: 50vw;
	top: -14rem;
	right: -20vw;
	z-index: -1;
}

.photo-plan.pink:after {
	content: '';
    position: absolute;
    background-image: var(--plan-ornament4);
    background-repeat: no-repeat;
    display: block;
    width: 80vw;
    height: 47vw;
    z-index: -1;
    bottom: -10rem;
    left: -25vw;
    transform: rotate(10deg);
}

.photo-plan.orange:before {
	content: '';
	position: absolute;
	background-image: var(--plan-ornament2);
	background-repeat: no-repeat;
	display: block;
	width: 50vw;
	height: 50vw;
	top: -14rem;
	right: -20vw;
	z-index: -1;
}

.photo-plan.orange:after {
	content: '';
    position: absolute;
    background-image: var(--plan-ornament5);
    background-repeat: no-repeat;
    display: block;
    width: 80vw;
    height: 47vw;
    z-index: -1;
    bottom: -10rem;
    left: -25vw;
    transform: rotate(10deg);
}

.photo-plan.blue:before {
	content: '';
	position: absolute;
	background-image: var(--plan-ornament3);
	background-repeat: no-repeat;
	display: block;
	width: 50vw;
	height: 50vw;
	top: -14rem;
	right: -20vw;
	z-index: -1;
	opacity: .4;
}

.photo-plan.blue:after {
	content: '';
    position: absolute;
    background-image: var(--plan-ornament6);
    background-repeat: no-repeat;
    display: block;
    width: 50vw;
    height: 30vw;
    z-index: -1;
    bottom: -5rem;
    left: -20vw;
    transform: rotate(10deg);
	opacity: .4;
}

.photo-plan > dt {
	text-align: center;
	transform: translateY(-50%);
	margin-bottom: -3em;
}

.photo-plan > dt > span {
	display: inline-block;
	height: 100%;
	font-size: 1.5em;
	margin: 0 1em;
	position: relative;
}

.photo-plan > dt > span:before {
	content: '';
	display: block;
	position: absolute;
	top: 0.25em;
	left: 0.5em;
	z-index: -1;
	transform: translateX(-100%);
}

.photo-plan > dt > span:after {
	content: '';
	display: block;
	position: absolute;
	top: 0.25em;
	right: 0.5em;
	z-index: -2;
	transform: translateX(100%);
}

/* リボンピンク */
.photo-plan.pink > dt > span > span {
	background-color: #f8919b;
	display: inline-block;
	padding: 1em 2em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	position: relative;
	z-index: 1;
}

.photo-plan.pink > dt > span:before {
	content: '';
	border-top: 1.5em solid #f48a94;
	border-left: 0.5em solid transparent;
	border-right: 2em solid #f48a94;
	border-bottom: 1.5em solid #f48a94;
}

.photo-plan.pink > dt > span:after {
	content: '';
	border-top: 1.5em solid #f48a94;
	border-right: 0.5em solid transparent;
	border-left: 2em solid #f48a94;
	border-bottom: 1.5em solid #f48a94;
}


/* リボンオレンジ */
.photo-plan.orange > dt > span > span {
	background-color: #eda03a;
	display: inline-block;
	padding: 1em 2em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	position: relative;
	z-index: 1;
}

.photo-plan.orange > dt > span:before {
	content: '';
	border-top: 1.5em solid #e39631;
    border-left: 0.5em solid transparent;
    border-right: 2em solid #e39631;
    border-bottom: 1.5em solid #e39631;
}

.photo-plan.orange > dt > span:after {
	content: '';
	border-top: 1.5em solid #e39631;
    border-right: 0.5em solid transparent;
    border-left: 2em solid #e39631;
    border-bottom: 1.5em solid #e39631;
}

/* リボン青 */
.photo-plan.blue > dt > span > span {
	background-color: #4cc0c9;
	display: inline-block;
	padding: 1em 2em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	position: relative;
	z-index: 1;
}

.photo-plan.blue > dt > span:before {
	content: '';
	border-top: 1.5em solid #42b5be;
	border-left: 0.5em solid transparent;
	border-right: 2em solid #42b5be;
	border-bottom: 1.5em solid #42b5be;
}

.photo-plan.blue > dt > span:after {
	content: '';
	border-top: 1.5em solid #42b5be;
	border-right: 0.5em solid transparent;
	border-left: 2em solid #42b5be;
	border-bottom: 1.5em solid #42b5be;
}

.photo-plan > dd {
	padding: 3em;
}

@media (max-width: 768px) {
	.photo-plan > dd {
		padding: 3em 1em 1em 1em;
	}
}

/* アルバム */

.plan-album-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.plan-album-wrap > div {
	width: calc(100% / 3 - 8px / 3);
	display: flex;
	flex-flow: column;
}

.plan-album-wrap > div:not(:nth-of-type(3n)) {
	margin-right: 4px;
}

.plan-album-wrap > div:nth-of-type(n + 4) {
	margin-top: 2em;
}

.plan-album-wrap > div > h3 {
	margin-bottom: 1em;
	font-size: 1em;
}

.plan-album-wrap > div > figure {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin-top: auto;
}

.plan-album-wrap > div > figure > img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-position: center;
	object-fit: cover;
}

.plan-album-wrap > div > div {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.5em;
}

.plan-album-wrap .fee-mb {
	margin-bottom: 2rem;
}

#plan-line-friend {
	display: flex;
	flex-flow: column;
	margin-top: 0;
	align-items: center;
	margin: auto 0;
	justify-content: center;
}

#plan-line-friend > figure {
	width: 6rem;
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

#plan-line-friend > figure > i {
	font-size: 6rem;
	color: #00B900;
}

#plan-line-friend > a {
	display: inline-block;
	background-color: #00B900;
	padding: 1em 3em 1em 2em;
	font-weight: 700;
	transition: all 0.3s ease;
	margin-top: 1em;
	color: #fff;
	border-radius: 0.5em;
	font-family: var(--display-font);
	position: relative;
	box-shadow: 3px 3px #048b3b;
}

#plan-line-friend > a > i {
	position: absolute;
	top: 50%;
	right: 1.5rem;
	transform: translate(50%, -50%);
	font-size: 1.5rem;
	transform-origin: 50% 50%;
}

#plan-line-friend > a:hover {
	opacity: 0.8;
	transition: all 0.3s ease;
	transform: translate(3px, 3px);
	box-shadow: 0px 0px #048b3b;
}

.benefit-list > li > figure {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
}

.benefit-list > li > figure > i {
	font-size: 2.5rem;
	color: #fff;
}

.checkpoint-contain > picture > img {
	width: 100%;
	height: 100%
}

@media (max-width: 768px) {
	#page-main-banner {
		height: 100vw;
	}
	
	#page-top-slider .swiper-slide {
		height: 100vw;
		aspect-ratio: 1 / 1;
	}
	
	#page-top-slider .swiper-slide > picture {
		height: 100vw;
		aspect-ratio: 1 / 1;
	}
	
	.plan-album-wrap {
		flex-wrap: wrap;
	}
	
	.plan-album-wrap > div{	
		width: 100%;
	}
	
	.plan-album-wrap > div:not(:nth-of-type(3n)) {
		margin-right: 0;
	}
	
	.plan-album-wrap > div+ div {
		margin-top: 2em;
	}
	
	.plan-album-wrap > div > img {
		margin-top: auto;
	}
}

.photo-plan.pink > dd > .plan-fee-list > dt {
    background-color: rgba(245,225,223,1);	
}

.photo-plan.pink > dd > .plan-fee-list > dd {
	background-color: rgba(245,225,223,0.6);
}

.photo-plan.orange > dd > .plan-fee-list > dt {
    background-color: rgba(246,221,190,1);
}

.photo-plan.orange > dd > .plan-fee-list > dd {
	background-color: rgba(246,221,190,0.6);
}

.photo-plan.blue > dd > .plan-fee-list > dt {
	background-color: rgba(197, 236, 239, 1);
}

.photo-plan.blue > dd > .plan-fee-list > dd {
	background-color: rgba(163,221,226,0.4);
}

/* バナーリスト */
.banner-list {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	margin-top: 4em;
	justify-content: center;
}

.banner-list + .banner-list {
	margin-top: 2em;
}

.banner-list > li {
	width: calc(50% - 1em);
}

.banner-list > li:nth-of-type(even) {
	margin-left: 2em;
}

.banner-list > li:nth-of-type(n + 3) {
	margin-top: 2em;
}

.banner-list > li > a {
	transition: all 0.3s ease;
}

.banner-list > li > a:hover {
	opacity: 0.7;
	transition: all 0.3s ease;
}

@media (max-width: 768px) {
	.banner-list {
		margin-top: 2em;
	}
	
	.banner-list > li {
		width: 100%;
	}

	.banner-list > li:nth-of-type(even) {
		margin-left: 0;
	}

	.banner-list > li:nth-of-type(n + 2) {
		margin-top: 2em;
	}
}


/* --------------------------
    weekdayplan
-------------------------- */
.weekday-plan-content {
	display: flex;
	flex-flow: row-reverse;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4em;
}

.weekday-plan-content > figure {
	width: calc(50% - 2em);
}

.weekday-plan-content > div {
	width: calc(50% - 2em);
	display: flex;
	flex-flow: column;
	align-items: center;
}

.weekday-plan-content > div > span:not(:nth-of-type(2)) {
	font-size: clamp(1.25em, 3vw, 1.5em);
	font-weight: 600;
	line-height: 1;
	background: linear-gradient(to top, #ffc3d1 30%, transparent 30%);
}

.weekday-plan-content > div > span:nth-of-type(2) {
	margin: 0.5em 0;
	font-size:1.25em;
}

.weekday-plan-fee {
	display: flex;
	flex-flow: column;
	align-items: center;
	font-weight: 600;
}

.weekday-plan-fee > div > div {
	display: flex;
	align-items: center;
	position: relative;
}

.weekday-plan-fee > div:first-of-type {
	display: flex;
	align-items: center;
	flex-flow: column;
}

.weekday-plan-fee > div:first-of-type > div:before {
	content: '';
	position: absolute;
	width: calc(100% + 1em);
	border-bottom: 4px solid var(--color-red);
	transform: rotate(-10deg) translate(0%, 50%);
	border-radius: 2px;
	top: 50%;
	left: -0.5em;
}

.weekday-plan-fee > div:last-of-type {
	display: flex;
	align-items: center;
	color: #F27E99;
	margin-top: 4em;
	position: relative;
}

.weekday-plan-fee > div:last-of-type:before {
	content: '';
	position: absolute;
	display: block;
	border-top: 1em solid var(--color);
	border-left: 1em solid transparent;
	border-right: 1em solid transparent;
	border-bottom: 1em solid transparent;
	top: -2em;
	left: 50%;
	transform: translate(-50%, -25%);
}

.weekday-plan-fee > div:last-of-type > span {
	line-height: 1.25;
	background-color: #F27E99;
	color: #fff;
	border-radius: 50%;
	width: 5rem;
	height: 5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.25em;
	margin-right: 1em;
}


.weekday-plan-fee > div > div > span:first-of-type {
	font-size: 3em;
	font-family: var(--display-font);
	line-height: 1.5;
}

.weekday-plan-fee > div > div > span:first-of-type.emphasis {
	font-size: clamp(4em, 15vw, 5em);
}

.weekday-plan-fee > div > div >span:last-of-type {
	display: flex;
	flex-flow: column;
	font-size: 1.5em;
    justify-content: center;
    align-items: center;
    line-height: 1.25;
}

.weekday-plan-fee > div > div >span:last-of-type:before {
	content: '(税込)';
	font-size: 0.875rem;
}

.subject-menu {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto;
}

.subject-menu > li {
	width: calc(50% - 2em);
}

.subject-menu > li:nth-of-type(even) {
	margin-left: 4em;
}

.subject-menu > li:nth-of-type(n + 3) {
	margin-top: 2em;
}

.subject-menu > li > figure {
	display: flex;
	flex-flow: column;
	align-items: center;
	width: calc(100% - 4em);
	margin: 0 2em 1em;
}

.subject-menu > li > figure > img {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.subject-menu > li > figure > figcaption {
	margin-top: 1em;
	font-weight: 600;
}

.subject-menu > li > h4 {
	text-align: center;
	margin-bottom: 1em;
}

.shooting-time {
	font-size: 1.5em;
	margin: 1em 0;
	text-align: center;
	font-weight: 600;
}

@media (max-width: 768px) {
	.weekday-plan-content {
		flex-flow: column;
	}
	
	.weekday-plan-content > figure {
		width: 100%;
		margin-bottom: 2em;
	}
	
	.weekday-plan-content > div {
		width: 100%;
	}
	
	.weekday-plan-fee > div:last-of-type > span {
		font-size: 1em;
		width: 4.5em;
		height: 4.5em;
	}
	
	.subject-menu {
		width: 100%;
	}
	
	.subject-menu > li {
		width: 100%;
	}
	
	.subject-menu > li:nth-of-type(even) {
		margin-left: 0;
	}
	
	.subject-menu > li + li {
		margin-top: 2em;
	}
}

/* --------------------------
    page-event
-------------------------- */
.plan .emphasis {
	text-align: center;
	margin-bottom: 1em;
	font-size: clamp(1em, 4vw, 1.25em);
	font-weight: 600;
}

.campaign-gallery {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

.campaign-gallery > li {
	width: calc(100% / 3 - 2px);
}

.campaign-gallery > li:not(:nth-of-type(3n)) {
	margin-right: 3px;
}

.campaign-gallery > li:nth-of-type(n + 4) {
	margin-top: 3px;
}

.campaign-gallery > li > a {
	background-color: #ccc;
	aspect-ratio: 1 / 1;
	display: block;
}

.campaign-gallery > li > a > img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.review-list {
	list-style-type: none;
	display: flex;
	flex-flow: column;
}

.review-list > li + li {
	margin-top: 2em;
}

.review-list > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.review-list > li > i {
	font-size: 5em;
}

.review-list > li > div {
	width: calc(100% - 7em);
	padding: 2em;
	background-color: #f5f5f5;
	position: relative;
}

.review-list > li > div:before {
	content: '';
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid #f5f5f5;
	border-bottom: 0.5em solid transparent;
	border-top: 0.5em solid transparent;
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(-100%, -50%);
}

.kuma-plan {
	list-style-type: none;
	display: flex;
	justify-content: space-between;
	margin-top: 1em;
	margin-bottom: 3em;
	flex-wrap: wrap;
}

.kuma-plan > li {
	width: calc(50% - 0.5em);
	padding: 2em;
	background-color: #f5f5f5;
	display: flex;
	flex-flow: column;
	align-items: center;
	
}

.kuma-plan > li:nth-of-type(3) {
	width: 100%;
	margin-top: 1em;
}

.kuma-plan > li > .plan-name {
	display: flex;
	flex-flow: column;
	margin-bottom: 1em;
	align-items: center;
	font-weight: 600;
}

.kuma-plan > li > .plan-name:before {
	content: attr(data-text);
	font-family: var(--display-font);
	font-size: 1.5em;
	line-height: 1.25;
}

.kuma-plan > li > .fee {
	font-family: var(--display-font);
	font-size: clamp(2em, 4vw, 2.5em);
	font-weight: 600;
	color: #f45481;
	margin-bottom: 0.5rem;
}

.kuma-plan > li > .fee > span {
	font-size: 1.25rem;
	margin-left: 0.25em;
}

.kuma-plan > li > .goods {
	display: flex;
	justify-content: center;
	margin-bottom: 1em;
	font-weight: 600;
}

.kuma-plan > li > .goods > span {
	margin: 0.25em;
    padding: 0.25em 1em;
    border: 1px solid #333;
}

.kuma-plan > li > p {
	text-align: justify;
}

.feature-wrap {
	list-style-type: none;
	counter-reset: count 0;
	margin-top: 3em;
}

.feature-wrap > li {
	counter-increment: count;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.feature-wrap > li:nth-of-type(even) {
	flex-flow: row-reverse;
}

.feature-wrap > li > figure {
	width: calc(50% - 1em);
	position: relative;
}

.feature-wrap > li > figure:before {
	content: counter(count);
	font-family: var(--display-font);
	font-size: 1.75em;
	display: flex;
    justify-content: center;
    align-items: center;
    white-space: pre;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    position: absolute;
    top: -1.5rem;
    left: -0.5em;
    background-color: #333;
    color: #fff;
}

.feature-wrap > li + li {
	margin-top: 2em;
}

.feature-wrap > li > div {
	width: calc(50% - 1em);
}

.feature-wrap > li > div > div {
	font-size: clamp(1.5em , 2vw, 1.75em);
	margin-bottom: 1em;
	font-weight: 600;
}

.feature-wrap > li > div > div > span {
	background: linear-gradient(to top, #f9eaf0 40%, transparent 40%);
}

@media (max-width: 768px) {
	.campaign-gallery > li {
		width: calc(50% - (3px / 2));
	}
	
	.campaign-gallery > li:not(:nth-of-type(3n)) {
		margin-right: 0;
	}
	
	.campaign-gallery > li:nth-of-type(even) {
		margin-left: 3px;
	}
	
	.campaign-gallery > li:nth-of-type(n + 3) {
		margin-top: 3px;
	}
	
	.feature-wrap > li {
		flex-flow: column;
	}
	
	.feature-wrap > li:nth-of-type(even) {
		flex-flow: column;
	}
	
	.feature-wrap > li + li {
		margin-top: 3em;
	}
	
	.feature-wrap > li > figure {
		width: 100%;
	}
	
	.feature-wrap > li > div {
		width: 100%;
		margin-top: 2em;
	}
	
	.review-list > li > i {
		font-size: 4em;
	}
	
	.review-list > li > div {
		width: calc(100% - 6em);
		padding: 1.5em;
	}
	
	.kuma-plan {
		flex-flow: column;
	}
	
	.kuma-plan > li {
		width: 100%;
		padding: 2em 1em;
	}
	
	.kuma-plan > li + li {
		margin-top: 2em;
	}
	
	.kuma-plan > li:nth-of-type(3) {
		margin-top: 2em;
	}
}

/* --------------------------
    audition-photos
-------------------------- */
h2.audition-heading {
	font-size: clamp(2em, 3vw, 2.5em);
	margin-bottom: 1em;
}

h2.audition-heading.center {
	text-align: center;
	margin-top: 2em;
}

h2.audition-heading > span {
	display: inline-flex;
	width: 1.5em;
	height: 1.5em;
	justify-content: center;
	align-items: center;
	background-color: #eee;
	margin-right: 0.125em;
}

#top-profile-photo > div > h3 {
	font-size: 1.75em;
    margin-bottom: 1em;
}

#top-profile-photo > div > *:not(h2) + h3 {
	margin-top: 2.5rem;
}

#top-profile-photo > div > h3 > span {
	background: linear-gradient(to top, #ffc3d1 50%, transparent 50%);
}

#top-profile-photo > div .audition-catch {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 1rem;
	font-weight: 700;
	margin-bottom: 2.5rem;
}

#top-profile-photo > div .audition-catch > div:first-of-type {
	font-size: 1.5rem;
	display: flex;
	align-items: center;
}

#top-profile-photo > div .audition-catch > div:first-of-type::before {
	content: '';
	display: block;
    border-left: 2px solid var(--color);
    height: 100%;
    transform: rotate(-15deg);
	height: 1.25em;
    margin-right: 0.5em;
}

#top-profile-photo > div .audition-catch > div:first-of-type::after {
	content: '';
	display: block;
    border-right: 2px solid var(--color);
    height: 100%;
    transform: rotate(15deg);
	height: 1.25em;
    margin-left: 0.5em;
}

#top-profile-photo > div .audition-catch > div + div {
	font-size: 3rem;
}

#top-profile-photo .alignright {
	float: right;
	margin-left: 2em;
	margin-bottom: 2em;
}

#top-profile-photo .profile {
	width: 40%;
	min-width: 320px;
}

.audition-photo-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.audition-photo-list > li {
	width: calc(100% / 4 - (18px / 4));
}

.audition-photo-list > li:not(:nth-of-type(4n)) {
	margin-right: 6px;
}

.audition-photo-list > li:nth-of-type(n + 5) {
	margin-top: 6px;
}

.profile-photo-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.profile-photo-list > li {
	width: calc(100% / 4 - (18px /4));
}

.profile-photo-list > li:not(:nth-of-type(4n)) {
	margin-right: 6px;
}

.profile-photo-list > li > figure > figcaption {
	margin-top: 0.5rem;
	text-align: center;
	font-weight: 700;
}

.profile-photo-list > li > figure > figcaption > span {
	background: linear-gradient(to top, #ffc3d1 50%, transparent 50%);
}

@media (max-width: 768px) {
	h2.audition-heading {
		font-size: clamp(1.75em, 3vw, 2.5em);
	}
	
	#top-profile-photo > div > h3 {
		font-size: 1.25rem;
	}
	
	#top-profile-photo > div .audition-catch > div:first-of-type {
		font-size: 1.25rem;
	}
	
	#top-profile-photo > div .audition-catch > div + div {
		font-size: 1.75rem;
	}
	
	#top-profile-photo .profile {
		float: none;
		margin: 0 auto 2rem auto;
		width: 100%;
	}
	
	.audition-photo-list > li {
		width: calc(50% - 3px);
	}
	
	.audition-photo-list > li:not(:nth-of-type(4n)) {
		margin-right: 0;
	}
	
	.audition-photo-list > li:not(:nth-of-type(2n)) {
		margin-right: 6px;
	}

	.audition-photo-list > li:nth-of-type(n + 5) {
		margin-top: 0;
	}
	
	.audition-photo-list > li:nth-of-type(n + 3) {
		margin-top: 6px;
	}
	
	.profile-photo-list > li {
		width: calc(50% - 3px);
	}
	
	.profile-photo-list > li:not(:nth-of-type(4n)) {
		margin-right: 0;
	}
	
	.profile-photo-list > li:not(:nth-of-type(2n)) {
		margin-right: 6px;
	}
	
	.profile-photo-list > li:nth-of-type(n + 3) {
		margin-top: 1rem;
	}
}

.price-list {
	display: flex;
	flex-wrap: wrap;
	max-width: 800px;
	margin: 2em auto 0 auto;
}

.price-list > dt {
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 40%;
	padding: 1em 2em;
	background-color: var(--color-aqua);
	color: #fff;
	font-weight: 700;
}

.price-list > dt:nth-of-type(even) {
	background-color: var(--color-aqua-dull);
}

.price-list > dd {
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 60%;
	background-color: #f7f7f7;
	padding: 1em 2em;
}

.price-list > dd:nth-of-type(even) {
	background-color: #e8e8e8;
}

@media (max-width: 768px) {
	.price-list > dt {
		width: 100%;
		align-items: center;
	}
	
	.price-list > dd {
		width: 100%;
	}
}

.plan-list-wrap {
	display: flex;
	margin-top: 4em;
}

.plan-list-wrap > dl {
	display: flex;
	align-self: stretch;
	width: calc(100% / 3);
	position: relative;
}

.plan-list-wrap.col1 > dl {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

.plan-list-wrap > dl > span {
	display: block;
	width: calc(100% - 2em);
	max-width: 50%;
	padding: 1em;
	background-color: #f5f5f5;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}

.plan-list-wrap > dl > span:before {
	content: '';
	display: block;
	border-top: 0.5em solid #f5f5f5;
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 100%);
}

.plan-list-wrap > dl + dl {
	border-left: 1px solid #fff;
}

.plan-list-wrap > dl  > div {
	width: 100%;
	height: 100%;
}

.plan-list-wrap > dl > div > h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 7rem;
	padding: 2em 1em 1em 1em;
	background-color: var(--color);
	font-weight: 700;
	text-align: center;
	color: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.plan-list-wrap > dl  > div > div {
	height: calc(100% - 7rem);
	color: #fff;
	padding: 2em;
	background-color: var(--color);
}

.plan-list-wrap > dl  > div > div > .price {
	font-family: var(--display-font);
	font-weight: 700;
	font-size: 2em;
	line-height: 1.5;
	text-align: center;
}

.plan-list-wrap > dl  > div > div > .price > small {
	font-family: var(--font-family);
	font-size: 0.5em;
}