/*
Theme Name: スタジオメディア七五三
Description:
Theme URI:
Author: スリーグッド鹿児島
Author URI:
Version:
License:
License URI:
*/
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ebgaramond/v14/SlGFmQSNjdsmc35JDF1K5GRwUjcdlttVFm-rI7e8QL99U661hGFJRvw.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
/*   scroll-behavior: smooth; */
}

body {
	font-size: 14px;
	line-height: 1.75;
	letter-spacing: 0.1em;
	color: #333;
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	text-align: justify;
	text-justify: inter-ideograph;
	font-weight: 500;
	overflow: hidden;
}

@keyframes blink {
	0% {
		opacity: 1;
	}
	
	50% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

body:before {
	content: 'Now loading...';
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.75rem;
	letter-spacing: 0.25em;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAACACAMAAADTa0c4AAAAM1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACjBUbJAAAAEHRSTlMAgL9A7xCfIGAw31DPj69wq5pf0QAABWBJREFUeNrsmdtuwyAMQM09EAL+/68dWrta0zSpA4cEzeexD25yTq4EBEEQBEEQBEEQBEEQBEEQhH+JRj4KfGHUKBt8x2AXWSszS4DdaarCUfSoAML6MENAcXBTAY0SzhZgK8CNBdD2sUJ7qsPPn/XgNYCDaFTBBx5OIGbS+0OAgnvgtkQGzsp/ZwGvDVXn5b+7ADAWG/GM/DnAAgIgYkPz50cFsIQAqNgIrOMaOcIqAiAhYgUegn7lX0fAwXcOVPuVfyUBhgSw5f+XAij/YgJ2EsCQ/3CwmoCD3tf72R75kwFYTYCz43cBV1751xNwjD8H7JR/PQEbNjxT/gUFVGxYx5N/PQHPS/c+nr84eF9A0n/lUHsAdqLHT7bRl0m07ytU2EuuvzgwqoOqisXR/XcH5T9RAOEd+0hMsT9/ovxzBKDduEfmOfmJYDqoyid84NmPADOafxLxsL8Y2HQXFp+ogfw6wCToTw9gItTcuy4eU/c3BYZHzh3YMLrLgKL8k4kWEZMDPio57Vj0ns+OjY3dqXUr5P+kIGLmd6qWyP9axueV7xEx/S1/jnAZiU5ZJgI57fjmMZ3CvwEZEc1bF8zL85/zPq3fGhn0DfI3/EkC1sj/PF53/pFmjfx0xZo4kvKny/PTPWvmSEffPC7H0HE47UGIVj2vh55bp4105T75P9o1tyVJYRAMAzkYk6i8/9PueiriFK2ZWmsPtXwX0w6VDvRPopRhD5YXeJGFV8o/kX7A13u6HO3Z/RfSH5bMK/W1WMbHFyJFXnr/dgbXkpCk7/ZmqIz/RKQTPlmezzxeJNGVzN8C33wrfF/ajfmF9L8cLQ1vT1nTzbH5kf6/RQAfx5enrNMINxRJ/58SwNPJtIy9u0rAj7ifjPDE/EL6+w5G/oIS2zAMwzAMwzAMwzAMw2jaEzNzxQA7RBPuEI2wg1jgZEQHJ1Pc30PPWKBlwXRtWCTP7GkZ4BPu+gWUa4p7MKnTqVBi52nUPABMXFoBPMdWAGKUUFkEICYsziWsZ5ezjBeQqWwBbWYdzNAQm9B5DQUnSp1OBeo7Y6Qcto+rUX7lnQBid56nD7FEju2lDnKCxgW1AgwgPDoVhr5+w/GIKdwL4D4IUMR8sYvriee2AWoClZlz6662AoDw7FSIxBmecRLfZwHwowByHXnW7MOZQflPgzwnkMSyIkCXUyFwyOx6VoAfvynAoA4rzJp9YoKG+mEJ+CTpyikrAvQ5FTBC4gjPZPblewLowwZm19r1nYlMoMGyglOW74sAnU4FP0LwPPT1JOQl3AowdQgAeiz8VQAGBZfBnV0cucB8EcA5RFy6nAqJtrgRnglReoM7boL9AohVcLoAhQDmPdqFVpmWZlpaid8UIKdtgWToIaCXRL0uwNKxAnAGGLYlELxbR6G6BfoFcEwzTnJr7VgF/hcFcMyDYq9ft0AFhYjrn3Uo0nZvi4oAPU5PaMaVyASdZHZ3AoiQxevDFs6KXR5Ut4UA4fGMDH7Y86cI0O8UhkOX4HmEPoiHu6eAhD3N+rDMSbOPzKF9OOsB+XIUijHuic2KAP1OIc4PtacQjvBqhoZ6FaA0AeWkFmULk7JiJOdSFioEdmdL63DopAjQ73Tg8lB5CWU6EoUA2r3l606OVS3LF65BL8tDlcCSjBKkupT9ImE3AvQ7Ra9ZdXBrkXM1wp0Ao+d5XD/nGi6xxLBaE22z6F7DzHHYshE/NeQkHo58OfEvoayg63cafGym9uHxEVhzTXCBaPw6rPJP6rVimmgnpgBX+2U+F3Mlqjk60El0XsBOJPm9B6nfaSFxFIgKGIZhGIZhGIZhGIZhGIZh/L/8AFN/sGQN8oEDAAAAAElFTkSuQmCC);
	background-position: top 49% center;
	background-size: 128px 64px;
	background-repeat: no-repeat;
	position: fixed;
	top: 0;
	left: 0;
	padding-top: 5rem;
	z-index: 999;
	opacity: 1;
/* 	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif; */
	font-style: italic;
	animation: blink 1s ease 0s infinite;
}

body:after {
	content: '';
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	padding-top: -5rem;
	z-index: 998;
	background-color: #fff;
	opacity: 1;
}

body.show {
	height: auto;
	overflow-x: hidden;
	overflow-y: auto;
}

body.show:before,
body.show:after {
	opacity: 0;
	z-index: -1;
	transition: all 0.3s ease;
	animation: anime 0s ease 0.3s forwards;
}

@keyframes anime {
	to {
		opacity: 0;
		width: 0;
		height: 0;
		overflow:hidden;
	}
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: #333;
	text-decoration: none;
}

/* common */
.clearfix {
    clear: both;
}

.content-width {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.middle-width {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

.narrow-width {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.wide-width {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.heading {
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	font-size: 3rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	margin-bottom: 1rem;
}

.heading:after {
	content: '/　'attr(data-text);
	font-size: 1rem;
	margin-left: 1em;
	letter-spacing: 0.1em;
}

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

.sub-heading {
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

.sans-serif {
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
}

.button,
.button-list > li > a {
	display: inline-block;
	padding: 1em 4em 1em 2em;
	background-color: #fff;
	border: 1px solid #333;
	position: relative;
	transition: all 0.3s ease;
}

.button:before {
	content: '';
	width: 1.5em;
	height: 2px;
	border-right: 2px solid #333;
	border-bottom: 1px solid #333;
	transform: skewx(60deg);
	position: absolute;
	top: calc(50% - 2px);
	right: 2em;
	transition: all 0.3s ease;
}

.button:hover {
	background-color: #333;
	border: 1px solid #fff;
	color: #fff;
	transition: all 0.3s ease;
}

.button:hover:before {
	border-right: 2px solid #fff;
	border-bottom: 1px solid #fff;
	right: 1em;
	transition: all 0.3s ease;
}

.button-wrap {
	text-align: center;
	margin-top: 2rem;
}

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

.button-list li {
	width: calc(50% - 0.5rem);
	margin-bottom: 1rem;
}

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

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

.col2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.col2-reverse {
	display: flex;
	flex-flow: row-reverse;
	justify-content: space-between;
	align-items: center;
}

.col2 > div,
.col2-reverse > div {
	width: calc(50% - 2rem);
}

.col2 > div:nth-child(n + 3) {
	margin-top: 2rem;
}

.col4 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.col4 > div {
	width: calc(25% - 1rem);
}

.centering {
	text-align: center;
	letter-spacing: 0.2em;
	line-height: 2;
}

.notice {
	display: flex;
	flex-flow: column;
	justify-content: center;
	background-color: #eee;
	padding: 2rem 2rem 2rem 7rem;
	position: relative;
}

.notice:before {
	content: 'i';
/* 	content: '\f12a';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900; */
	display: flex;
	width: 4rem;
	height: 4rem;
	margin-right: 2rem;
	font-size: 2rem;
	font-style: italic;
	font-family:"EB Garamond", 游明朝, 游明朝体,  YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Kaku Mincho ProN", ＭＳ明朝, serif;
	justify-content: center;
	align-items: center;
	background-color: #333;
	color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 1em;
	transform: translateY(-50%);
}

.single-content dl:not(.plain) {
	display: flex;
	flex-wrap: wrap;
	border-top: 2px solid #ccc;
	margin-bottom: 3em;
}

.single-content dl:not(.plain) > dt {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-color: #f9f9f9;
    border-bottom: 2px solid #ccc;
    padding: 1em 2em;
    font-weight: 700;
}

.single-content dl:not(.plain) > dd {
	width: 70%;
    background-color: #fff;
    border-bottom: 2px solid #ccc;
    padding: 1em 2em;
}

.mt1 {
	margin-top: 1em;
}

.mt2 {
	margin-top: 2em;
}

.mt4 {
	margin-top: 4em;
}

.mb1 {
	margin-bottom: 1em;
}

.mb2 {
	margin-bottom: 2em;
}

.mb4 {
	margin-bottom: 4em;
}

@media (max-width: 768px) {
	.centering {
		text-align: justify;
		text-justify: inter-ideograph;
	}
	
	.centering > br {
		display: none;
	}
	
	.notice {
		padding: 5rem 1rem 1rem 1rem;
	}
	
	.notice:before {
		width: 3rem;
		height: 3rem;
		top: 1rem;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.single-content dl:not(.plain) {
		flex-flow: column;
	}
	
	.single-content dl:not(.plain) > dt {
		width: 100%;
	}
	
	.single-content dl:not(.plain) > dd {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.heading {
		font-size: 1.75rem;	
	}
	
	.heading:after {
		font-size: 0.75rem;	
	}
	
	.sub-heading {
		font-size: 1.25rem;
	}
	
	.button-list {
		flex-flow: column;
	}
	
	.button-list > li:nth-of-type(odd) {
		margin-right: 0;
	}
	
	.button-list > li {
		width: 100%;
	}
	
	.button-list > li + li {
		margin-top: 1rem;
	}
	
	.col2,
	.col2-reverse,
	.col4 {
		flex-flow: column-reverse;
	}
	
	.col2.costume-list {
		flex-flow: column;
	}
	
	.col2 > div,
	.col2-reverse > div,
	.col4 > div {
		width: 100%;
	}
	
	.col2 > div:last-of-type,
	.col2-reverse > div:last-of-type,
	.col4 > div:last-of-type {
		margin-bottom: 2rem;
	}
}

/*  header */
header {
	width: 100%;
	height: 80px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 254;
	transition: all 0.3s ease;
}

header.show {
	background-color: rgba(255, 255, 255, 0.7);
	transition: all 0.3s ease;
}

header.admin {
	top: 32px;
}

header > nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	padding: 0 3rem;
}

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

#header-menu {
	list-style-type: none;
	display: flex;
	align-items: center;
	height: 100%;
}

#header-menu > li {
	margin: 0 1em;
	position: relative;
}

#header-menu > li:before {
	content: '';
	display: block;
	width: 4px;
	height: 4px;
	background-color: #333;
	border-radius: 50%;
	position: absolute;
	bottom: -12px;
	left: calc(50% - 2px);
	opacity: 0;
	transition: all 0.3s ease;
}

#header-menu > li.current-menu-item:before,
#header-menu > li:hover:before {
	opacity: 1;
	transition: all 0.3s ease;
}

#header-menu > li > a {
	display: block;
	height: 1.75em;
	overflow: hidden;
}

#header-menu > li > a > span {
	display: flex;
	flex-flow: column;
	text-align: center;
	overflow: hidden;
	transition: all 0.3s ease;
}

#header-menu > li > a > span:after {
	content: attr(data-text);
}

#header-menu > li > a:hover > span {
	transform: translatey(-1.75em);
	transition: all 0.3s ease;
}

@media (max-width: 1024px) {
	#header-menu {
		display: none;
	}
}

@media (max-width: 768px) {
	header {
		height: 50px;
	}
	
	header > nav {
		padding: 0 1rem;
	}
	
	#header-logo > img {
		width: auto;
		height: 40px;
	}
}

/* mobile */
#drawer {
	width: 50px;
	height: 50px;
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1;
}

header.admin #drawer {
	top: 32px;
}

.drawer-unshown {
	display: none;
}

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

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

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

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

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

#drawer-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 330px;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  transition: 0.3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

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

#drawer-input:checked ~ #drawer-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

#drawer-content {
	color: #fff;
}

#main-store-link {
	display: block;
	padding: 1rem 2rem;
	background-color: #c0ddff;
	color: #333;
	border-bottom: 1px solid #aaa;
	position: relative;
}

#main-store-link: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;
}

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

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

#drawer-input:checked ~ #drawer-content #drawer-close2,
#drawer-input:checked ~ #drawer-content #menu-mobile > li > a {
	transform: translateX(0);
	opacity: 1;
	transition: all 1s ease;
}

#drawer.fixed {
	position: fixed;
	top: 0;
	right: 1rem;
}

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

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

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

@media (max-width: 1024px) {	
	#drawer {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}


/* footer */
footer > .content-width {
	padding: 4rem 1rem 6rem 1rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

footer > .content-width > div {
	width: calc(50% - 2em);
}

footer > .content-width > div > p {
	margin-bottom: 1em;
}

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

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

#operating-company {
	position: relative;
	width: 100%;
	margin-top: 4em;
}

#operating-company:before {
	content: '';
	position:absolute;
	width: calc(100% - 2em);
	display: block;
	border-top: 1px solid #ccc;
	top: -2em;
	left: 1em;
}

#operating-company > div {
	width: 300px;
	border: 1px solid #ccc;
	margin-bottom: 1em;
}

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

#operating-company > div > 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;
}

#operating-company > div > 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;
}

#operating-company > div > a > img {
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
    width: calc(100% - 4em);
    height: 100%;
    object-fit: contain;
}

#operating-company > p {
	margin-bottom: 1em;
}

#footer-menu {
	list-style-type: none;
	display: flex;
	width: calc(50% - 2em);
	flex-flow: column;
}

#footer-menu > li {
	margin: 0 1rem;
}

#footer-menu > li > .sub-menu {
	list-style-type: none;
	margin-top: 0.5em
}

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

#footer-menu > li > ul > li > a {
	display: block;
	height: 1.75em;
	overflow: hidden;
}

#footer-menu > li > ul > li > a > span {
	display: flex;
	flex-flow: column;
	overflow: hidden;
	white-space: nowrap;
	transition: all 0.3s ease;
}

#footer-menu > li > ul > li > a > span:after {
	content: attr(data-text);
}

#footer-menu > li > ul > li > a:hover > span {
	transform: translatey(-1.75em);
	transition: all 0.3s ease;
}

#right-side {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 3rem;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1;
}

#sns-wrap {
	display: flex;
	flex-flow: column;
	justify-content: center;
	margin-bottom: 4rem;
}

#sns-wrap > a {
	display: block;
	text-align: center;
	font-size: 1.25rem;
	margin: 0.5rem;
	transition: all 0.3s ease;
}

#sns-wrap > a:hover {
	transform: scale(1.5);
	transition: all 0.3s ease;
}

/*
#reservation {
	position: fixed;
	right: 3rem;
	bottom: 3rem;
	width: 160px;
	height: 160px;
	z-index: 253;
}

#reservation > a {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	color: #fff;
	background-color: #333;
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1.25;
	text-align: center;
	border: 1px solid #fff;
	transition: all 0.3s ease;
}

#reservation > a > span {
	font-size: 0.75em;
}

#reservation > a:hover {
	transform: scale(1.2);
	transition: all 0.3s ease;
}

#reservation > a:before {
	content: attr(data-text);
	background-color: #fff;
	color: #333;
	line-height: 1;
	padding: 0.5em 1em;
	border-radius: 1em;
	font-size: 0.75rem;
	margin-bottom: 1em;
}

#reservation > a:after {
	content: '';
	width: 1.5em;
	height: 2px;
	border-right: 2px solid #fff;
	border-bottom: 1px solid #fff;
	transform: skewx(60deg);
	margin-top: 1em;
	transition: all 0.3s ease;
}
*/

#copyright {
	writing-mode: vertical-rl;
	-ms-writing-mode: tb -rl;
	letter-spacing: 0.5em;
	font-size: 0.75rem;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (max-width: 1100px) {
	#footer-menu {
		flex-flow: column;
		text-align: center;
	}
}

@media (max-width: 768px) {
	footer {
		margin-bottom: 6em;
	}
	
	footer > .content-width {
		padding: 2rem 1rem 2rem 1rem;
		flex-flow: column;
		align-items: center;
	}
	
	footer > .content-width > div {
		width: 100%;
		display: flex;
		align-items: center;
		flex-flow: column;
	}
	
	#operating-company {
		text-align: center;
	}
	
	#operating-company > div {
		margin: 0 auto 1em;
	}
	
	#right-side {
		display: block;
		width: 100%;
		position: static;
	}
	
	#sns-wrap {
		flex-flow: row;
		margin-bottom: 2em;
	}
	
	#copyright {
		writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		text-align: center;
	}
	
/*
	#reservation {
		width: 100%;
		height: 4rem;
		bottom: 0;
		right: 0;
	}
	
	#reservation > a {
		border-radius: 5px;
	}
	
	#reservation > a > br {
		display: none;
	}
	
	#reservation > a:after {
		position: absolute;
		right: 1rem;
		top: calc(50% - 2px);
		margin-top: 0;
	}
	
	#reservation > a:hover {
		transform: unset;
		transition: all 0.3s ease;
	}
*/
}

/* top */
#top-main-banner-sp {
	display: none;
}

#top-main-banner {
	height: 90vh;
	margin-left: 10vw;
	position: relative; 
	background-color: #f5f5f5;
/* 	background-image: radial-gradient(#fff 20%, transparent 0);
	background-position: 10px 10px;
	background-size: 20px 20px;
	animation: loop-bg 50s linear infinite; */
}

/* #top-main-banner:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-size: contain;
	background-position: center bottom;
	background-repeat: no-repeat;
} */

#top-main-slider {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;
}

#top-main-slider .slider-content {
	width: 90vw;
	height: 90vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* @media (max-width: 768px) {
	#top-main-slider .slider-content {
		height: 75vh;
	}
} */

/* @media (min-width: 768px) {
	#top-main-banner:before {
		background-image:url(/wp-content/uploads/2021/04/studiomedia753-top-main-banner.png);
	}
}

@media (max-width: 768px) {
	#top-main-banner:before {
		background-image:url(/wp-content/uploads/2021/04/studiomedia753-top-main-banner-sp.png);
	}
}
 */

@keyframes loop-bg {
    0% {
        background-position: 10px 10px;
    }
    100% {
        background-position: -100% 100%;
    }
}

#top-main-banner > div {
	display: flex;
	align-items: flex-end;
	height: 100%;
	position: relative;
	z-index: 1;
}

#top-main-banner > div > h2 {
	font-size: 5vw;
	margin-left: -1em;
	margin-bottom: 2em;
	letter-spacing: 0.1em;
	font-weight: 400;
	line-height: 1.25;
}

#top-main-banner > div > h2 span {
	background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%);
	display: inline-block;
}

#top-main-banner > div > h2 > span > span {
	font-size: 2vw;
	font-style: italic;
	letter-spacing: 0.1em;
}

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

/* モバイル用スライダー */

@media (max-width: 500px) {
  	#top-main-banner {
		display: none;
	}
	
	#top-main-banner-sp {
		display: block;
		aspect-ratio: 3 / 4;
		position: relative;
		width: 90vw;
		margin-left: auto;
	}
	
	#top-main-banner-sp > div {
		display: flex;
		align-items: flex-end;
		height: 100%;
		position: relative;
		z-index: 1;
	}
	
	#top-main-slider-sp {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		overflow: hidden;
	}
	
	#top-main-slider-sp .slider-content {
		background-size: cover;
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
	}
	
	#top-main-slider-sp .slick-track {
		height: 100%;
	}
	
	#top-main-slider-sp .slick-list {
		height: 100%;
	}
	
	#top-main-banner-sp > div > h2 {
		font-size: clamp(1.5em, 9vw, 2em);
		margin-left: -1rem;
		margin-bottom: 2rem;
		letter-spacing: 0.1em;
		font-weight: 400;
		line-height: 1.25;
	}
	
	#top-main-banner-sp > div > h2 span {
		background: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%);
		display: inline-block;
	}
	
	#top-main-banner-sp > div > h2 > span > span {
		font-size: clamp(1rem, 7vw, 1.25rem);
		font-style: italic;
		letter-spacing: 0.1em;
	}
}

#top-news-slider {
	display: flex;
	max-width: 800px;
	width: 100%;
	position: absolute;
	bottom: calc(-3.75rem / 2);
	left: 0;
	background-color: #fff;
}

#top-news-slider:before {
   content: '重要';
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 0.875em;
	white-space: nowrap;
	background-color: #333;
	padding: 0 2rem;
}

#top-news-slider div {
	width: 100%;
}

#top-news-slider .slider-content > a {
	display: flex;
	padding: 1rem 2rem;
	position: relative;
}

#top-news-slider .slider-content > a:before {
	content: '';
	width: 1.5em;
	height: 2px;
	border-right: 2px solid #333;
	border-bottom: 1px solid #333;
	transform: skewx(60deg);
	position: absolute;
	top: calc(50% - 2px);
	right: 2em;
	transition: all 0.3s ease;
}

#top-news-slider .slider-content > a:hover:before {
	right: 1em;
	transition: all 0.3s ease;
}

#top-news-slider .slider-content > a > time {
	width: 10em;
}

#top-news-slider .slider-content > a > h3 {
	width: calc(100% - 10em);
	font-weight: 500;
	font-size: 0.75rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 768px) {
	#top-news-slider {
		flex-flow: column;
		bottom: -3.75rem;
	}
	
	#top-news-slider:before {
		padding: 0.25rem 1rem;
	}
	
	#top-news-slider .slider-content > a {
		flex-flow: column;
		padding: 0.5rem 1rem;
	}
	
	#top-news-slider .slider-content > a > h3 {
		width: calc(100% - 3em);
	}
}

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

#top-news > div > h2 {
	width: calc(35% - 1em);
}

#top-news > div > ul {
	width: calc(65% - 1em);
}

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

#top-news-list > li {
	padding-right: 3em;
	position: relative;
}

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

#top-news-list > li:before {
    content: '';
    width: 1.5em;
    height: 2px;
    border-right: 2px solid #333;
    border-bottom: 1px solid #333;
    transform: skewx(60deg);
    position: absolute;
    top: calc(50% - 2px);
    right: 1em;
    transition: all 0.3s ease;
}

#top-news-list > li:hover:before {
    right: 0;
    transition: all 0.3s ease;
}

#top-news-list > li > a > article {
	display: flex;
	align-items: center;
	padding: 1em 0;
	transition: all 0.3s ease;
}

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

#top-news-list > li > a > article > time {
	width: 8em;
	margin-right: 1em;
}

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

@media (max-width: 768px) {
	#top-news > div {
		flex-flow: column;
		padding: 4rem 1rem;
	}
	
	#top-news > div > h2 {
		width: 100%;
	}

	#top-news > div > ul {
		width: 100%;
	}

	#top-news-list > li > a > article {
		flex-flow: column;
	}
	
	#top-news-list > li > a > article > time {
		width: 100%;
		margin-right: 0;
		margin-bottom: 0.5em;
	}
	
	#top-news-list > li > a > article > h3 {
		width: 100%;
	}
}

#top-campaign {
	background-color: #f7f7f7;
}

#top-campaign > div {
	padding: 8rem 1rem;
}

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

.top-campaign-list > li {
	display: flex;
	flex-flow: column;
	width: calc(100% / 3 - 2rem);
}

.top-campaign-list > li + li {
	margin-left: 3rem;
}

.top-campaign-list > li > a {
	display: block;
	border: 1px solid #888;
	opacity: 1;
	transition: all 0.3s ease;
}

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

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

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

.top-campaign-list > li > a > article > div {
	padding: 1rem 4rem 1rem 1rem;
	position: relative;
}

.top-campaign-list > li > a > article > div:before {
	content: '';
	width: 1.5em;
	height: 2px;
	border-right: 2px solid #333;
	border-bottom: 1px solid #333;
	transform: skewx(60deg);
	position: absolute;
	top: calc(50% - 2px);
	right: 2em;
	transition: all 0.3s ease;
}


.top-campaign-list > li > a > article > div > h3 {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-weight: 500;
	font-size: 0.75rem;
	margin-top: 0.5rem;
}

@media (max-width: 768px) {
	#top-campaign > div {
		padding: 4rem 1rem;
	}
	
	.top-campaign-list {
		flex-flow: column;
		align-items: center;
	}
	
	.top-campaign-list > li {
		max-width: 320px;
		width: 100%;
	}
	
	.top-campaign-list > li + li {
		margin-left: 0;
		margin-top: 2rem;
	}
}

#top-parking > div {
	padding: 8rem 3rem;
}

@media (max-width: 768px) {
	#top-parking > div {
		padding: 4rem 1rem;
	}
}

#top-plan > div {
	padding: 8rem 3rem;
}

@media (max-width: 768px) {
	#top-plan > div {
		padding: 4rem 1rem;
	}
}

#top-gallery > div {
	padding: 8rem 3rem;
}

@media (max-width: 768px) {
	#top-gallery > div {
		padding: 4rem 1rem;
	}
}

#top-simulation {
	scroll-behavior: auto;
}

#top-simulation > div {
	padding: 8rem 3rem;
}

@media (max-width: 768px) {
	#top-simulation > div {
		padding: 4rem 1rem;
	}
}

#top-costume {
	background-color: #f7f7f7;
}

#top-costume > div {
	padding: 8rem 3rem;
}

@media (max-width: 768px) {
	#top-costume > div {
		padding: 4rem 1rem;
	}
}

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

.top-costume-wrap > div {
	width: 30%;
	padding-top: 30%;
	border-radius: 50%;
	background-color: #fff;
	background-size: cover;
/* 	background-position: center bottom -5vh; */
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
}

.costume-category-list {
	text-align: center;
}

.costume-category-list dt {
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	font-size: 2rem;
	padding: 1rem;
}

.costume-category-list dt:first-letter {
	font-size: 4rem;
}

.costume-category-list dd {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 1rem;
}

.costume-category-list dd > a {
	display: flex;
	align-items: center;
	width: 400px;
	height: 150px;
	border: 1px solid #333;
	font-size: 1rem;
	padding: 2rem;
	background-color: #fff;
	position: relative;
	overflow: hidden;
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	margin: 0 1rem 2rem 1rem;
}

.costume-category-list dd > a:before {
	content: '';
	display: block;
	width: 60%;
	height: calc(100% + 4rem);
	background-color: #fff;
	filter: blur(1rem);
	position: absolute;
	top: -2rem;
	left: 0;
	z-index: 1;
}

.costume-category-list dd > a:after {
	content: attr(data-text);
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	font-size: 1rem;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 2rem;
	box-sizing: border-box;
	letter-spacing: 0.1em;
}

.costume-category-list dd > a > span {
	display: block;
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #eee;
	background-size: cover;
	background-repeat: no-repeat;
}

.costume-category-list dd:nth-of-type(1) > a:nth-of-type(1) > span {
	background-image: url(/wp-content/uploads/2026/06/studiomedia753-costume-banner1-scaled.webp);
}

.costume-category-list dd:nth-of-type(1) > a:nth-of-type(2) > span {
	background-image: url(/wp-content/uploads/2020/04/studiomedia753-costume-banner2.jpg);
}

.costume-category-list dd:nth-of-type(2) > a:nth-of-type(1) > span {
	background-image: url(/wp-content/uploads/2025/05/costume-5girl-kimono.webp);
}

.costume-category-list dd:nth-of-type(2) > a:nth-of-type(2) > span {
	background-image: url(/wp-content/uploads/2020/05/753gallery-5.jpg);
}

.costume-category-list dd:nth-of-type(3) > a:nth-of-type(1) > span {
	background-image: url(/wp-content/uploads/2020/04/studiomedia753-costume-banner7.jpg);
}

.costume-category-list dd:nth-of-type(3) > a:nth-of-type(2) > span {
	background-image: url(/wp-content/uploads/2020/04/753.jpg);
}

.costume-category-list dd:nth-of-type(4) > a:nth-of-type(1) > span {
	background-image: url(/wp-content/uploads/2020/04/studiomedia753-costume-banner3.jpg);
}

.costume-category-list dd:nth-of-type(4) > a:nth-of-type(2) > span {
	background-image: url(/wp-content/uploads/2020/04/studiomedia753-costume-banner4.jpg);
}

.costume-category-list dd:nth-of-type(5) > a:nth-of-type(1) > span {
	background-image: url(/wp-content/uploads/2020/04/studiomedia753-costume-banner5.jpg);
}

.costume-category-list dd:nth-of-type(5) > a:nth-of-type(2) > span {
	background-image: url(/wp-content/uploads/2020/04/studiomedia753-costume-banner6.jpg);
}

.costume-category-list dd:nth-of-type(6) > a:nth-of-type(1) > span {
	background-image: url(/wp-content/uploads/2020/05/753gallery_J-9.jpg);
}

.costume-category-list dd:nth-of-type(6) > a:nth-of-type(2) > span {
	background-image: url(/wp-content/uploads/2020/05/studiomedia753-top-image5.jpg);
}

.costume-category-list dd:nth-of-type(7) > a:nth-of-type(1) > span {
	background-image: url(/wp-content/uploads/2020/04/studiomedia753-costume-banner11.jpg);
}

@media (max-width: 768px) {
	.costume-category-list dd {
		flex-flow: column;
		align-items: center;
	}
	
	.costume-category-list dd > a {
		width: 320px;
		height: 120px;
	}
}

#top-movie > div {
	padding: 8rem 3rem;
}

#top-movie > div > iframe{
	display: block;
	margin: 0 auto;
}

.top-youtube-wrap {
	width: 100%;
	padding-top: 53%;
	position: relative;
}

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

@media (max-width: 768px) {
	#top-movie > div {
		padding: 4rem 1rem;
	}
}

#top-studio {
	background-color: #f7f7f7;
}

#top-studio > div {
	padding: 8rem 3rem;
}

@media (max-width: 768px) {
	#top-studio > div {
		padding: 4rem 1rem;
	}
}

#top-album > div {
	padding: 8rem 3rem;
}

@media (max-width: 768px) {
	#top-album > div {
		padding: 4rem 1rem;
	}
}

#top-flow {
	background-color: #f7f7f7;
}

#top-flow > div:first-of-type {
	padding: 8rem 1rem 2rem 1rem;
}

#top-flow > div:last-of-type {
	padding: 2rem 1rem 8rem 1rem;
}

#top-flow-slider .slider-content {
	padding-top: 62.5%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media (max-width: 768px) {
	#top-flow > div:first-of-type {
		padding-top: 4em;
	}
	
	#top-flow > div:last-of-type {
		padding-bottom: 4em;
	}
}

#part-contact {
	background-color: #333;
	color: #fff;
}

#part-contact > div {
	padding: 8rem 1rem;
}

.contact-tel {
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	font-size: 3rem;
	line-height: 1;
	margin: 0.5em 0;
	letter-spacing: 0.1em;
}

.ruby {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.ruby:before {
	content: attr(data-text);
	font-size: 10px;
}

@media (max-width: 768px) {
	#part-contact > div {
		padding: 4em 1em;
	}
	
	.contact-tel {
		font-size: 2rem;
	}
}

/* page header */
#page-header {
	height: 300px;
	background-color: #f5f5f5;
	background-image: radial-gradient(#fff 20%, transparent 0);
	background-position: 10px 10px;
	background-size: 20px 20px;
	animation: loop-bg 50s linear infinite;
}

#page-header > div {
	display: flex;
	flex-flow: column;
	justify-content: center;
	height: 100%;
	padding: 1rem;
}

#page-header > div > h1 {
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

#breadcrumb > ul {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

#breadcrumb > ul > li {
	font-size: 10px;
	padding: 0 2em 0.5em 0;
	position: relative;
}

#breadcrumb > ul > li:last-of-type {
	padding: 0 0 0.5em 0;
}

#breadcrumb > ul > li:not(:last-of-type):before {
	content: '';
	display: block;
	width: 0.2em;
	height: 0.2em;
	border-right: 1px solid #333;
	border-top: 1px solid #333;
	transform: rotate(45deg);
	position: absolute;
	right: 1em;
	top: calc(50% - 0.3em);
}

@media (max-width: 768px) {
	#page-header {
		height: 200px;
	}
	
	#page-header > div {
		padding-top: 50px;
		align-items: center;
	}
	
	
	#page-header > div > h1 {
		font-size: 1.25rem;
		margin-bottom: 0.5rem;
	}
}

/* page */
/* #page-wrap {
	display: flex;
} */

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

/* #page-content {
	width: 100%;
} */

#page-content > div > section {
/* 	padding: 8rem 3rem; */
	padding: 6rem 3rem;
}

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

@media (max-width: 768px) {
	#page-wrap {
		flex-flow: column;
	}
	
	#page-content > div > section {
		padding: 4rem 1rem;
	}
	
	#page-wrap.sidebar #page-content {
		width: 100%;
		padding: 2rem 1rem;
	}
}

/* sidebar */
#sidebar {
	width: 300px;
	margin-left: 1rem;
	padding: 4rem 3rem 4rem 1rem;
}

#sidebar > div {
	margin-bottom: 4rem;
}

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

#sidebar > div > ul > li {
	padding-right: 1rem;
	margin-bottom: 0.5em;
	position: relative;
}

#sidebar > div > ul > li:after {
	content: '';
	display: block;
	width: 0.4em;
	height: 0.4em;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	transform: rotate(45deg);
	position: absolute;
	top: calc(50% - 0.2em);
	right: 0;
}

#sidebar > div > ul > li > a {
	display: block;
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
}

#sidebar > div > h3 {
	padding-left: 1em;
	border-left: 1px solid #333;
	margin-bottom: 1em;
	font-weight: 500;
}

@media (max-width: 768px) {
	#sidebar {
		width: 100%;
		padding: 2rem 1rem;
		margin: 0;
	}
	
	#sidebar > div {
		margin-bottom: 2rem;
	}
}

/* gallery */
/* costume */
.images {
	width: 100%;
	margin: 0 auto;
	position: relative;
	list-style-type: none;
}

.item {
  padding: 10px;
  width: 360px;
}

.item.x2 {
  width: 720px;
}

.item.x3 {
  width: 1080px;
}

.item img {
  width: 100%;
}

.item > a {
	display: block;
	opacity: 1;
	transition: all 0.3s ease;
	position: relative;
}

.item > a:hover {
	opacity: 0.7;
	transition: all 0.3s ease;
}

.item > a[data-tag]:before {
	content: '';
	border-top: 2rem solid #333;
	border-left: 2rem solid #333;
	border-right: 2rem solid transparent;
	border-bottom: 2rem solid transparent;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

.item > a[data-tag]:after {
	content: attr(data-tag);
	display: inline-block;
	color: #fff;
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	font-size: 0.75rem;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: right;
	transform: rotate(-45deg);
}

.item > a[data-title]:after {
	content: attr(data-title);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	font-size: 1rem;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	font-size: 1.5rem;
	transition: all 0.3s ease;
}

.item > a[data-title]:hover:after {
	content: attr(data-title);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	transition: all 0.3s ease;
}

.lum-lightbox {
	z-index: 998;
}

.lum-lightbox-inner img {
	display: block;
	width: auto;
	height: 90vh;
	margin: auto;
	object-fit: contain;
	object-position: center;
}

@media (max-width: 768px) {
	.lum-lightbox-inner img {
		width: 100%;
		height: 100%;
	}
}

/* contact */
.contactform {
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
}

.contactform table {
	width: 100%;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
	border-spacing: 0;
	margin-bottom: 1rem;
}

.contactform table th {
	width: 30%;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	padding: 1em 5em 1em 2em;
	background-color: #eee;
	position: relative;
}

.contactform table th.required:before {
	content: '必 須';
	display: block;
	font-size: 10px;
	border-radius: 3px;
	background-color: #333;
	color: #fff;
	padding: 0.5em 1em;
	position: absolute;
	right: 1em;
	top: calc(50% - 10px);
}

.contactform table td {
	width: 70%;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	padding: 1em 2em;
}

.contactform table td input[type=text],
.contactform table td input[type=email],
.contactform table td input[type=tel],
.contactform table td textarea {
	width: 100%;
	padding: 1em;
	border-radius: 3px;
	background-color: #eee;
	border: none;
}

.contactform table td input.old[type=text] {
	display: inline-block;
	width: 4rem;
	margin-right:1em;
}

.contactform .submit-wrap {
	text-align: center;
	margin-top: 1rem;
}

.contactform .submit-wrap input[type=submit] {
	display: inline-block;
	padding: 1em 2em;
	color: #333;
	background-color: #fff;
	border: 1px solid #333;
	font-size: 1rem;
	min-width: 280px;
	position: relative;
	transition: all 0.3s ease;
}

.contactform .submit-wrap input[type=submit]:hover {
	background-color: #333;
	border: 1px solid #fff;
	color: #fff;
	transition: all 0.3s ease;
}

.tel {
	 font-size: 3rem;
    letter-spacing: 0.1em;
}

.contactform input[name=agreement] {
	appearance: 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;
}

.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;
}

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

.wpcf7-response-output:not(:empty),
.screen-reader-response:not(:empty) {
	background-color: #f5f5f5;
	padding: 1rem;
	margin: 1rem 0;
}

@media (max-width: 768px) {
	.contactform table th,
	.contactform table td {
		display: block;
		width: 100%;
	}
}

/* single */
#single-date-wrap {
	margin-bottom: 2rem;
}

#single-date {
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
}

.single-content {
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
}

/* .single-content section:not(.plain):not(:last-of-type) {
	margin-bottom: 4rem;
} */

.single-content h1:not(.plain),
.single-content h2:not(.plain) {
	font-size: 1.5rem;
	border-bottom: 1px solid #333;
	padding: 0.5rem;
	margin-bottom: 1em;
	font-weight: 500;
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
}

.single-content h3:not(.plain) {
	display: flex;
	flex-flow: column;
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	font-weight: 500;
}

.single-content h3:not(.plain):after {
	content: '';
	display: inline-block;
	width: 100px;
	border-top: 1px solid #333;
	margin: 1em 0;
}

.single-content h4:not(.plain) {
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	border-left: 1pox solid #333;
	padding-left: 1em;
	margin-bottom: 1em;
}

.single-content h5:not(.plain),
.single-content h6:not(.plain) {
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	margin-bottom: 1em;
}

.single-content ol:not(.plain),
.single-content ul:not(.plain) {
	background-color: #eee;
	padding: 2rem 2rem 2rem 3rem;
	margin-bottom: 2rem;
}

.single-content blockquote:not(.plain) {
	background-color: #eee;
	padding: 2rem;
	margin-bottom: 2rem;
}

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

.single-content a:not(.plain) {
	text-decoration: underline;
}

.single-content a.external:not(.plain):after {
	content: '\f35d';
	font-family: 'Font Awesome 5 Free';
	font-weight: 700;
	font-size: 0.75rem;
}

.single-content hr:not(.plain) {
	border: none;
	border-top: 1px solid #333;
	margin: 4rem 0;
}

.single-content strong:not(.plain) {
	font-weight: 700;
}

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

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

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

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

@media (max-width: 768px) {
	.single-content img.aligncenter:not(.plain),
	.single-content img.alignleft:not(.plain),
	.single-content img.alignright:not(.plain) {
		float: none;
		margin: 0 auto 2rem auto;
	}
}

/* single pagination */
#single-pagination {
	list-style-type: none;
	display: flex;
	margin-top: 4rem;
	margin-bottom: 4rem;
}

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

#single-pagination > li:first-of-type {
	border-right: 1px solid #aaa;
	padding-right: 1rem;
}

#single-pagination > li > a {
	display: block;
	position: relative;
}

#single-pagination > li:first-of-type > a {
	padding-left: 2em;
}

#single-pagination > li:first-of-type > a:before {
	content: '';
	display: block;
	width: 0.4em;
	height: 0.4em;
	border-left: 1px solid #333;
	border-bottom: 1px solid #333;
	transform: rotate(45deg);
	position: absolute;
	left: 1em;
	top: calc(1.75em / 2 - 0.4em);
}


#single-pagination > li:last-of-type {
	padding-left: 1rem;
}

#single-pagination > li:last-of-type > a {
	padding-right: 2em;
	text-align: right;
}

#single-pagination > li:last-of-type > a:before {
	content: '';
	display: block;
	width: 0.4em;
	height: 0.4em;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	transform: rotate(45deg);
	position: absolute;
	right: 1em;
	top: calc(1.75em / 2 - 0.4em);
}

@media (max-width: 768px) {
	#single-pagination {
		flex-flow: column;
		margin: 0 1rem;
	}
	
	#single-pagination > li {
		width: 100%;
		padding: 1rem 0;
	}
	
	#single-pagination > li:first-of-type {
		border-right: none;
		border-bottom: 1px solid #aaa;
	}
}

/* archive */
.archive-list {
	list-style-type: none;
	margin: 2rem 1rem 4rem 1rem;
}

.archive-list > li:not(:last-of-type) {
	border-bottom: 1px solid #ddd;
}

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

.archive-list > li > a > article {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2rem 0;
}

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

.archive-list > li > a > article > .info {
	width: 65%;
}

.archive-list > li > a > article > .info > time {
	display: block;
	margin-bottom: 1em;
}

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

.archive-list > li > a > article > .info > .category > span {
	display: inline-block;
	font-size: 10px;
	padding: 0.5em 1em;
	border: 1px solid #333;
	color: #fff;
	background-color: #333;
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
	margin: 1px;
}

.archive-list > li > a > article > .info > h3 {
	margin-bottom: 1em;
	font-weight: 500;
}

.archive-list > li > a > article > .info > .excerpt {
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
}

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

#pagination {
	display: flex;
	justify-content: center;
}

#pagination > * {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3em;
	height: 3em;
	margin: 0.5rem;
	line-height: 1;
	letter-spacing: 0;
	border: 1px solid #333;
	background-color: #fff;
	transition: all 0.3s ease;
}

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

/* flow */
.flow-list {
	list-style-type: none;
	counter-reset: count;
}

.flow-list > li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #aaa;
	padding: 2rem 4rem;
	position: relative;
	box-shadow: 1rem 1rem 0 #eee;
}

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

.flow-list > li:before {
	counter-increment: count;
	content: counter(count)'';
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	line-height: 1;
	letter-spacing: 0;
	border-radius: 50%;
	color: #fff;
	background-color: #333;
	position: absolute;
	top: -0.5em;
	left: -0.5em;
	font-size: 2rem;
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
}

.flow-list > li:not(:last-of-type) {
	margin-bottom: 8rem;
}

.flow-list > li:not(:last-of-type):after {
	content: '';
	width: 4px;
	height: 2em;
	border-right: 1px double #333;
	border-bottom: 1px double #333;
	transform: skewY(60deg);
	position: absolute;
	left: calc(50% - 1rem);
	bottom: -4rem;
}

.flow-list > li > .thumb {
	width: 30%;
	padding-top: 20%;
	background-color: #eee;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.flow-list > li > .info {
	width: 65%;
}

@media (max-width: 768px) {
	.flow-list > li {
		box-shadow: 0.5rem 0.5rem 0 #eee;
	}
	
	.flow-list > li,
	.flow-list > li:nth-of-type(even) {
		flex-flow: column;
		padding: 2rem 1rem;
	}

	.flow-list > li > .thumb {
		width: 100%;
		padding-top: calc(100% / 3 * 2);
		margin-bottom: 1rem;
	}
	
	.flow-list > li > .info {
		width: 100%;
	}
}

/* album */
.heading-album {
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

.heading-album:after {
	content: '/　'attr(data-text);
	font-size: 1rem;
	letter-spacing: 0.2em;
	margin-left: 1em;
	letter-spacing: 0.1em;
}

.album-price {
	position: relative;
	padding: 2rem;
	text-align: left;
	margin-top: 2rem;
	font-size: 0.75rem;
}

.album-price:before {
	content: '';
	display: block;
	width: 1rem;
	height: 1rem;
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	position: absolute;
	top: 0;
	left: 0;
}

.album-price:after {
	content: '';
	display: block;
	width: 1rem;
	height: 1rem;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	position: absolute;
	top: 0;
	right: 0;
}

.album-price > span {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.album-price > span:before {
	content: '';
	display: block;
	width: 1rem;
	height: 1rem;
	border-bottom: 1px solid #333;
	border-left: 1px solid #333;
	position: absolute;
	bottom: 0;
	left: 0;
}

.album-price > span:after {
	content: '';
	display: block;
	width: 1rem;
	height: 1rem;
	border-bottom: 1px solid #333;
	border-right: 1px solid #333;
	position: absolute;
	bottom: 0;
	right: 0;
}

.photo-item-slider .slick-list {
	aspect-ratio: 3 / 2;
}

.photo-item-slider .slick-dots {
    background-color: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.slick-dots {
	margin-top: 1rem;
	bottom: -2.5rem;
}

.youtube-wrap {
	width: 100%;
	padding-top: 62.5%;
	position: relative;
}

.youtube-wrap:not(.play):hover {
	cursor: pointer;
}

.youtube-wrap:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#shine.youtube-wrap:before {
	background-image: url(/wp-content/uploads/2020/05/studiomedia753-album-shine.jpg);
}

#kotowa.youtube-wrap:before {
	background-image: url(/wp-content/uploads/2020/05/studiomedia753-album-kotowa.jpg);
}

#wood.youtube-wrap:before {
	background-image: url(/wp-content/uploads/2020/05/studiomedia753-album-wood1.jpg);
}

.youtube-wrap:after {
	content: '\f167';
	font-family: 'Font Awesome 5 Brands';
	font-weight: 900;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
	font-size: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
	letter-spacing: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	transition: all 0.3s ease;
}

.youtube-wrap:not(.play):hover:after {
	font-size: 4rem;
	background-color: rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}

.youtube-wrap.play:before,
.youtube-wrap.play:after {
	display: none;
}

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

/* plan */
#plan-top-image {
	margin: 0 auto 4rem auto;
	width: 640px;
}

.plan-simple-wrap {
	display: block;
	text-decoration: none;
	border: 1px solid #aaa;
	padding: 2rem;
	margin-bottom: 6rem;
}

.plan-wrap {
	display: block;
	text-decoration: none;
	border: 1px solid #aaa;
	padding: 2rem;
	margin-bottom: 6rem;
	position: relative;
}

.plan-wrap[data-text]:before {
	content: attr(data-text);
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: pre;
	width: 7rem;
	height: 7rem;
	border-radius: 50%;
	position: absolute;
	top: -1.5rem;
	left: -1rem;
	background-color: #333;
	color: #fff;
	border: 1px solid #fff;
}

.plan-meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
}
/* 
.plan-meta > .plan-thumb {
	width: 30%;
	padding-top: calc(30% / 4 * 3);
	background-color: #eee;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	height: 0;
}
*/
.plan-meta > .plan-info {
/* 	width: 65%; */
	width: 100%;
}

.plan-meta > .plan-info > .plan-name {
	font-size: 2rem;
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	font-weight: 500;
	margin-bottom: 1rem;
}

.plan-meta > .plan-info > .plan-catch-copy {
	margin-bottom: 1rem;
}

.plan-meta > .plan-info > .plan-price {
	text-align: right;
	font-size: 3rem;
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
}

.plan-meta > .plan-info > .plan-price > span {
	font-size: 1rem;
	margin-left: 0.5em;
}

.plan-content {
	margin-bottom: 2rem;
}

.plan-notice {
	font-size: 0.75rem;
	margin-bottom: 2rem;
}

.plan-album {
	margin-bottom: 2rem;
}

.plan-service {
	margin-bottom: 2rem;
}

.plan-service-tags {
	display: flex;
	flex-wrap: wrap;
}

.plan-service-tags > span {
	width: calc(25% - 1rem);
	background-color: #333;
	color: #fff;
	padding: 1rem;
	margin-bottom: 1rem;
}

.plan-service-tags > span:not(:nth-of-type(4n)) {
	margin-right: calc(4rem / 3);
}

.plan-service-tags > span:before {
	content: '\f00c';
	margin-right: 0.5em;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

.plan-wrap h3 {
	font-size: 2rem;
	font-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
	text-align: center;
	margin-bottom: 1em;
	letter-spacing: 0.1em;
}

.plan-wrap h3:after {
	content: '/ 'attr(data-text);
	font-size: 1rem;
	font-weight: 500;
	margin-left: 1em;
}

.plan-wrap table {
	width: 100%;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
	border-spacing: 0;
	font-size: 0.75rem;
}

.plan-wrap table th {
	border-bottom: 1px solid #aaa;
	border-right: 1px solid #aaa;
	padding: 1em 2em;
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo UI', 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
	font-weight: 500;
}

.plan-wrap table td {
	border-bottom: 1px solid #aaa;
	border-right: 1px solid #aaa;
	padding: 1em 2em;
	text-align: right;
}

.plan-link-wrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.plan-link-wrap > .button {
	margin: 0 1rem 1rem 1rem;
}

.plan-related-wrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.plan-related-wrap > .button {
	margin: 0 1rem 1rem 1rem;
}

.plan-album-image-wrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.plan-album-image-wrap > img {
	max-width: 400px;
	width: 100%;
	margin:  1rem;
}

.plan-houmongi {
	margin-top: 4rem;
}

.plan-houmongi-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.plan-houmongi-wrap > figure {
	width: 30%;
	padding-top: 30%;
	position: relative;
}

.plan-houmongi-wrap > figure  > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

.plan-houmongi-wrap > div {
	width: calc(70% - 2rem);
}

@media (max-width: 768px) {
	.plan-wrap {
		padding: 1rem;
		margin-bottom: 2rem;
	}
	
	.plan-meta > .plan-info > .plan-name {
		font-size: 1.25rem;
	}
	
	.plan-wrap h3 {
		font-size: 1.25rem;
	}
	
	.plan-meta {
		flex-flow: column;
	}
	
	.plan-meta > .plan-thumb {
		width: 100%;
		padding-top: calc(100% / 4 * 3);
		margin-bottom: 1rem;
	}

	.plan-meta > .plan-info {
		width: 100%;
	}
	
	.plan-service-tags {
		flex-flow: column;
	}
	
	.plan-service-tags > span {
		width: 100%;
	}
	
	.plan-service-tags > span:not(:nth-of-type(4n)) {
		margin-right: 0;
	}
	
	.plan-service-tags > span:not(:last-of-type) {
		margin-bottom: 1rem;
	}
	
	.plan-wrap table th {
		display: block;
		background-color: #eee;
	}
	
	.plan-wrap table td {
		display: block;
	}
	
	.plan-link-wrap > .button {
		width: 100%;
	}
	
	.plan-related-wrap > .button {
		width: 100%;
	}
	
	.plan-houmongi-wrap {
		flex-flow: column;
	}
	
	.plan-houmongi-wrap > figure {
		width: 256px;
		padding-top: 256px;
		margin-bottom: 2rem;
	}
	
	.plan-houmongi-wrap > div {
		width: 100%;
	}
}

/* modal */
.modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 254;
}

.modal-open:hover,
.modal-close:hover {
	cursor: pointer;
}

.modal-bg {
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.modal-content {
	background: #fff;
	left: 50%;
	padding: 2rem;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	max-width: 800px;
	width: calc(100% - 2rem);
}

@media (max-width: 768px) {
	.modal-content {
		padding: 1rem;
	}
}

/* company */
table.company {
	width: 100%;
	max-width: 800px;
	border-top: 1px solid #333;
	border-spacing: 0;
	margin: 0 auto;
}

table.company th {
	width: 20%;
	border-bottom: 1px solid #333;
	padding: 1em;
	font-weight: 500;
}

table.company td {
	width: 80%;
	border-bottom: 1px solid #333;
	padding: 1em;
}

table.company td > dl {
	display: flex;
	flex-wrap: wrap;
}

table.company td > dl > dt,
table.company td > dl > dd {
	width: 50%;
}

table.company td > .shop {
	display: inline-block;
	width: 50%;
}

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

.group-list > li {
	width: 30%;
	margin: 1rem;
}

.group-list > li > a {
	display: inline-block;
	width: 100%;
	padding-top: 30%;
	background-size: 50% auto;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #333;
	opacity: 1;
	transition: all 0.3s ease;
}

.group-list > li > a:hover {
	opacity: 0.7;
	transition: all 0.3s ease;
}


@media (max-width: 768px) {
	table.company th {
		display: block;
		width: 100%;
		background-color: #eee;
	}
	
	table.company td {
		display: block;
		width: 100%;
	}
	
	.group-list {
		flex-flow: column;
	}
	
	.group-list > li {
		width: 100%;
		margin: 0 0 1rem 0;
	}
}

/* taxonomy plan_taxonomy */
.plan-list-wrap {
	padding: 0 3rem 8rem 3rem;
}

@media (max-width: 768px) {
	.plan-list-wrap {
		padding: 0 1rem 8rem 1rem;
	}
}

/* testimonials */
.testimonials-list {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.testimonials-list > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem;
    border-radius: 5px;
    background-color: #f5f5f5;
}

.testimonials-list > li:not(:last-of-type) {
    margin-bottom: 2rem;
}

.testimonials-list > li > p {
    width: calc(100% - 14rem);
    margin: 0;
}

.testimonials-list > li > div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
    width: 10rem;
    border-radius: 5px;
    background-color: #333;
    color: #fff;
    font-weight: 700;
    position: relative;
}

.testimonials-list > li > div: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 #333;
    position: absolute;
    top: calc(50% - 0.5rem);
    right: -1rem;
    text-align: center;
}

@media (max-width:768px) {
    .testimonials-list > li {
        flex-flow: column;
        padding: 1rem;
    }
    
    .testimonials-list > li > div {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .testimonials-list > li > div:before {
        width: 0;
        border-left: 0.5rem solid transparent;
        border-right: 0.5rem solid transparent;
        border-bottom: 0.5rem solid transparent;
        border-top: 0.5rem solid #333;
        position: absolute;
        top: unset;
        left: calc(50% - 0.5rem);
        bottom: -1rem;
    }
    
    .testimonials-list > li > p {
        width: 100%;
    }
}

/* costumes */
.measurements-content {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
	background-color: #eee;
    padding: 2rem;
	align-items: center;
}

.measurements-content > div {
	width: calc(50% - 2rem);
}

.measurements-content > div .pc-hide {
	display: none;
}


@media (max-width: 768px) {
	.measurements-content {
		flex-flow: column-reverse;
	}
	
	.measurements-content > div {
		width: 100%;
	}
	
	.measurements-content > div .pc-hide {
		display: block;
		width: 100%;
		height: 100%;
		margin-bottom: 2rem;
	}
	
	.measurements-content > div:last-of-type {
		display: none;
	}
}

.costumes-category-list {
	list-style-type: none;
}

.costumes-category-list > li + li {
	margin-top: 1.5rem;
}

.costumes-category-list > li > ul {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

.costumes-category-list > li > ul > li {
	width: calc(25% - 1rem);
	margin-bottom: calc(4rem / 3);
}

.costumes-category-list > li > ul > li:not(:nth-of-type(4n)) {
	margin-right: calc(4rem / 3);
}

.costumes-category-list > li > a {
	display: block;
	padding: 1em 2em;
	text-align: center;
	background-color: #fff;
	border: 1px solid #333;
	margin-bottom: calc(4rem / 3);
}

.costumes-category-list > li > ul > li > a {
	display: block;
	padding: 1em 2em;
	text-align: center;
	background-color: #fff;
	border: 1px solid #333;
	transition: all 0.3s ease;
}

.costumes-category-list > li > a:hover,
.costumes-category-list > li > ul > li > a:hover {
	background-color: #333;
	color: #fff;
	transition: all 0.3s ease;
}

.costumes-category-list > li.current-menu-item > a,
.costumes-category-list > li > ul > li.current-menu-item > a {
	background-color: #333;
	color: #fff;
}

.costumes-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	margin-top: 4rem;
}

.costumes-list > li {
	width: calc(100% / 3 - 2rem);
	margin-bottom: 3rem;
	position: relative;
}

.costumes-list > li.new:before {
	content: 'NEW';
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background-color: #333;
	border: 1px solid #fff;
	color: #fff;
	font-size: 0.75em;
	position: absolute;
	top: -1rem;
	left: -1rem;
	z-index: 1;
}

.costumes-list > li:not(:nth-of-type(3n)) {
	margin-right: 3rem;
}

.costumes-list > li > a {
	display: block;
	transition: all 0.3s ease;
}

.costumes-list > li > a:hover {
	opacity: 0.7;
	transition: all 0.3s ease;
}

.costumes-list > li > a > article > div {
	width: 100%;
	padding-top: 125%;
	background-color: #eee;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.costumes-list > li > h3 {
	margin-top: 1em;
	font-weight: 500;
	font-size: 0.875rem;
}

@media (max-width: 768px) {
	.costumes-category-list > li > ul > li {
		width: calc(50% - 0.5rem);
		margin-bottom: 1rem;
	}
	
	.costumes-category-list > li > ul > li:not(:nth-of-type(4n)) {
		margin-right: 0;
	}

	.costumes-category-list > li > ul > li:nth-of-type(odd) {
		margin-right: 1rem;
	}
	
	.costumes-list > li {
		width: calc(50% - 0.5rem);
		margin-bottom: 1rem;
	}
	
	.costumes-list > li:not(:nth-of-type(3n)) {
		margin-right: 0;
	}
	
	.costumes-list > li:nth-of-type(odd) {
		margin-right: 1rem;
	}
	
	.costumes-list > li.new:before {
		width: 3rem;
		height: 3rem;
		top: -0.5rem;
		left: -0.5rem;
	}
}

#parking-guide {
	display: flex;
	align-items: center;
	flex-flow: column;
}

#parking-guide > div {
	margin-top: 2rem;
}

#parking-guide > div > figure {
	padding-top: calc((50% - 2rem) / 16 * 9);
	width: calc(50% - 2rem);
	position: relative;
}

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

@media (max-width: 768px) {
	#parking-guide > div {
		flex-flow: column;
	}
	
	#parking-guide > div > figure {
		padding-top: calc(100% / 16 * 9);
		width: 100%;
	}
}

/* post */
.referral-list {
	display: flex;
	flex-wrap: wrap;
	border-top: 2px solid #ccc;
	margin-bottom: 3em;
}

.referral-list > dt {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    background-color: #f9f9f9;
    border-bottom: 2px solid #ccc;
    padding: 1em 2em;
    font-weight: 700;
}

.referral-list > dd {
	width: 40%;
    background-color: #fff;
    border-bottom: 2px solid #ccc;
    padding: 1em 2em;
}

@media (max-width: 768px) {
	.referral-list {
		flex-flow: column;
	}
	
	.referral-list > dt {
		width: 100%;
	}
	
	.referral-list > dd {
		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: #333;
	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;
	width: 100%;
}

#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 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 #333;
	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 {
	margin: 1em 0;
}

#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;
	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;
}

/* --------------------------
    mothers-kimono
-------------------------- */
.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-family: 'EB Garamond', '游明朝', '游明朝体',  YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Kaku Mincho ProN', 'ＭＳ明朝', serif;
}

#costume-images > li > dl {
	margin-top: 1em;
	border-top: 2px solid #ccc;
	display: flex;
	flex-wrap: wrap;
}

#costume-images > li > dl > dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10rem;
	background-color: #f9f9f9;
	border-bottom: 2px solid #ccc;
	padding: 0.75em 1.5em;
	font-weight: 700;
	flex-flow: column;
}

#costume-images > li > dl > dt > span {
	font-size: 0.875em;
}

#costume-images > li > dl > dd {
	width: calc(100% - 10rem);
	border-bottom: 2px solid #ccc;
	padding: 0.75em 1.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

#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;
	border-top: 2px solid #ccc;
}

.fee-list > dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60%;
	background-color: #f9f9f9;
	border-bottom: 2px solid #ccc;
	padding:1em 2em;
	font-weight: 700;
}

.fee-list > dd {
	width: 40%;
	border-bottom: 2px solid #ccc;
	margin-top: 1px;
	padding: 1em 2em;
	display: flex;
	justify-content: end;
	align-items: baseline;
	flex-wrap: wrap;
}

.fee-list > dd > span {
	font-size: 0.75em;
	margin-left: 0.5rem;
}

@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 {
		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%;
	} */
	
	#costume-images > li > dl > dt {
		width: 100%;
	}
	
	#costume-images > li > dl > dd {
		width: 100%;
	}
	
	.fee-list > dt {
		width: 100%;
	}
	
	.fee-list > dd {
		width: 100%;
	}
}