/* リキッドレイアウト対応 */

body {
	font-family: "elza-text", sans-serif;
}

.u-desktop {
	display: none;
}

button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
}

#spickandspan .footer {
	padding-bottom: 1.5625rem;
	padding-top: 1.875rem;
}

#spickandspan .footer_links {
	grid-gap: 0.25rem;
	display: grid;
	gap: 0.25rem;
	grid-template-columns: 1fr;
}

#spickandspan .footer_link {
	text-align: center;
}

#spickandspan .footer_link a {
	-webkit-font-smoothing: antialiased;
	color: #7D7D7D;
	font-size: 0.75rem;
	font-synthesis: none;
	font-weight: 400;
	transition: all 0.45s;
}

#spickandspan .footer_copy {
	color: #7D7D7D;
	font-size: 0.6875rem;
	font-weight: 400;
	margin-top: 3rem;
	text-align: center;
}

#spickandspan .intro {
	padding-bottom: 2.875rem;
	padding-left: 2.1875rem;
	padding-right: 2.1875rem;
	padding-top: 2.875rem;
}

#spickandspan .intro_inner {
	background: url(../images/frame_top_left.png) top left/8.125rem no-repeat, url(../images/frame_top_right.png) top right/8.125rem no-repeat, url(../images/frame_bottom_left.png) bottom left/8.125rem no-repeat, url(../images/frame_bottom_right.png) bottom right/8.125rem no-repeat;
	margin-left: auto;
	margin-right: auto;
	max-width: 85.625rem;
	padding-bottom: 6.875rem;
	padding-top: 4.875rem;
}

#spickandspan .intro_lead {
	-webkit-font-smoothing: antialiased;
	font-size: 0.875rem;
	font-synthesis: none;
	letter-spacing: 0.02em;
	text-align: center;
}

#spickandspan .intro_ttl {
	font-size: 0.8125rem;
	margin-top: 3.9375rem;
	text-align: center;
}

#spickandspan .intro_ttl img {
	display: inline-block;
	max-width: 12.3125rem;
}

#spickandspan .intro_ttl span {
	display: block;
	font-weight: 600;
	letter-spacing: 0.09em;
	margin-top: 1.875rem;
}

#spickandspan .intro_txt {
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.09em;
	line-height: 2.5;
	margin-top: 5.25rem;
	text-align: center;
}

#spickandspan .main {
	padding-top: 3.3125rem;
}

#spickandspan .main_inner {
	margin-left: auto;
	margin-right: auto;
	max-width: 90rem;
}

#spickandspan .main_ttl {
	margin-left: auto;
	margin-right: auto;
	max-width: 24.75rem;
}

#spickandspan .main_items {
	grid-gap: 0.1875rem;
	display: grid;
	gap: 0.1875rem;
	grid-template-columns: 1fr;
	margin-top: 0.75rem;
	opacity: 0.5;
}

#spickandspan .main_items a {
	-webkit-text-decoration: underline;
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.5;
	text-decoration: underline;
	transition: all 0.45s;
}

#spickandspan .main[data-block=Jeanne] {
	padding-bottom: 5.4375rem;
}

#spickandspan .main[data-block=Jeanne] .main_inner {
	padding-left: 3.9375rem;
	padding-right: 3.9375rem;
}

#spickandspan .main[data-block=Jeanne] .main_blocks {
	margin-top: 2.875rem;
}

#spickandspan .main[data-block=Jeanne] .main_wrap {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 3.9745627981%;
}

#spickandspan .main[data-block=Jeanne] .main_block--1 {
	width: 39.9841017488%;
}

#spickandspan .main[data-block=Jeanne] .main_block--2 {
	width: 55.9618441971%;
}

#spickandspan .main[data-block=Jeanne] .main_block--3 {
	margin-left: 13.1160572337%;
	margin-top: 5.75rem;
	width: 37.9173290938%;
}

#spickandspan .main[data-block=Kiki] {
	padding-bottom: 8.875rem;
}

#spickandspan .main[data-block=Kiki] .main_inner {
	padding-left: 1.625rem;
	padding-right: 1.625rem;
}

#spickandspan .main[data-block=Kiki] .main_blocks {
	margin-top: 3.1875rem;
}

#spickandspan .main[data-block=Kiki] .main_wrap {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 1.1594202899%;
	margin-top: 8.0625rem;
}

#spickandspan .main[data-block=Kiki] .main_block--1 {
	margin-left: auto;
	margin-right: auto;
	width: 30.652173913%;
}

#spickandspan .main[data-block=Kiki] .main_block--2 {
	width: 49.4202898551%;
}

#spickandspan .main[data-block=Kiki] .main_block--3 {
	width: 49.4202898551%;
}

#spickandspan .main[data-block=Tsugumi] {
	padding-bottom: 12.1875rem;
}

#spickandspan .main[data-block=Tsugumi] .main_inner {
	padding-left: 3.0625rem;
	padding-right: 5.3125rem;
}

#spickandspan .main[data-block=Tsugumi] .main_blocks {
	margin-top: 10.1875rem;
}

#spickandspan .main[data-block=Tsugumi] .main_wrap {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6130268199%;
}

#spickandspan .main[data-block=Tsugumi] .main_block--1 {
	width: 47.0498084291%;
}

#spickandspan .main[data-block=Tsugumi] .main_block--2 {
	margin-left: auto;
	margin-top: -10.0625rem;
	width: 32.5670498084%;
}

#spickandspan .main[data-block=Tsugumi] .main_block--3 {
	margin-left: auto;
	margin-top: -16.4375rem;
	width: 38.9272030651%;
}

#spickandspan .movie {
	background-color: #000000;
	padding-bottom: 5.125rem;
	padding-top: 5.125rem;
}

#spickandspan .movie_inner {
	margin-left: auto;
	margin-right: auto;
	max-width: 90rem;
	padding-left: 3.3125rem;
	padding-right: 3.3125rem;
}

#spickandspan .movie_video {
	overflow: clip;
	position: relative;
}

#spickandspan .movie_video::before {
	background: url(../images/movie_frame.png) center center/100% 100% no-repeat;
	bottom: 0;
	content: "";
	height: 100%;
	left: 0;
	margin: auto;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 2;
}

#spickandspan .movie_video video {
	-o-object-fit: cover;
	aspect-ratio: 1334/750;
	border-radius: 1.875rem;
	height: calc(100% - 0.125rem);
	margin-left: 0.0625rem;
	margin-top: 0.0625rem;
	object-fit: cover;
	width: calc(100% - 0.125rem);
}

#spickandspan .movie_controller {
	bottom: 0.3125rem;
	height: 3.8125rem;
	left: 0;
	left: 0.3125rem;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	transform: translateY(100%);
	transition: opacity 0.45s ease, transform 0.65s cubic-bezier(0.16, 1.18, 0.32, 1);
	width: calc(100% - 0.625rem);
	z-index: 2;
}

#spickandspan .movie_video:hover .movie_controller,
#spickandspan .movie_video:focus-within .movie_controller {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

#spickandspan .movie_progress {
	background-color: rgba(255, 255, 255, 0.2);
	height: 0.3125rem;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
}

#spickandspan .movie_progressBar {
	background-color: #EAC93E;
	display: block;
	height: 100%;
	transition: width 0.1s linear;
	width: 0%;
}

#spickandspan .movie_controllerInner {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.55);
	border-radius: 0 0 1.25rem 1.25rem;
	bottom: 0;
	display: flex;
	height: calc(100% - 0.3125rem);
	justify-content: space-between;
	left: 0;
	padding-left: 2.75rem;
	padding-right: 1.9375rem;
	position: absolute;
	right: 0;
	top: 0.3125rem;
}

#spickandspan .movie_playBtn {
	cursor: pointer;
	display: block;
}

#spickandspan .movie_playIcon,
#spickandspan .movie_pauseIcon {
	align-items: center;
	display: flex;
}

#spickandspan .movie_pauseIcon {
	display: none;
	gap: 0.25rem;
}

#spickandspan .movie_playIcon_triangle {
	border-color: transparent transparent transparent #fff;
	border-style: solid;
	border-width: 0.53125rem 0 0.53125rem 0.9375rem;
	display: block;
	height: 0;
	width: 0;
}

#spickandspan .movie_pauseIcon_bar {
	background-color: #fff;
	height: 1.0625rem;
	width: 0.3125rem;
}

#spickandspan .movie_video.is-playing .movie_playIcon {
	display: none;
}

#spickandspan .movie_video.is-playing .movie_pauseIcon {
	display: flex;
}

#spickandspan .movie_soundBtn {
	align-items: center;
	cursor: pointer;
	display: flex;
	justify-content: center;
	position: relative;
}

#spickandspan .movie_soundSlash {
	background-color: #EAC93E;
	bottom: 0;
	height: 2px;
	left: 0;
	margin: auto;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform: rotate(-45deg);
	transition: opacity 0.2s ease;
	width: 141%;
}

#spickandspan .movie_video.is-muted .movie_soundSlash {
	opacity: 1;
}

#spickandspan .mv {
	position: relative;
}

#spickandspan .mv_movie {
	aspect-ratio: 1440/848;
	width: 100%;
}

#spickandspan .mv_movie video {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

#spickandspan .mv_ttl {
	animation: mvFadeIn 1s ease 0.3s forwards;
	bottom: 0;
	height: -moz-fit-content;
	height: fit-content;
	left: 0;
	margin: auto;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform: translateY(1.875rem);
	width: 35.3125rem;
}

#spickandspan .mv_logo {
	animation: mvFadeInCenter 1s ease 1.3s forwards;
	left: calc(50% - min(46.0416666667vw, 41.4375rem));
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translateY(calc(-50% + 1.875rem));
	width: 14.3125rem;
}

#spickandspan .mv_txt {
	-webkit-font-smoothing: antialiased;
	animation: mvFadeInCenter 1s ease 1.3s forwards;
	color: #EAC93E;
	font-size: 1.4375rem;
	font-synthesis: none;
	font-weight: 300;
	opacity: 0;
	position: absolute;
	right: calc(50% - min(46.0416666667vw, 41.4375rem));
	top: 50%;
	transform: translateY(calc(-50% + 1.875rem));
}

#spickandspan {
	color: #000000;
	font-family: "elza-text", sans-serif;
}

#spickandspan picture {
	display: block;
}

#spickandspan img {
	max-width: 100%;
	width: 100%;
}

#spickandspan a {
	color: inherit;
}

#spickandspan .js-fade {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 1.5s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1.5s cubic-bezier(0.155, 0.91, 0.695, 0.95);
}

#spickandspan .is-fade {
	opacity: 1;
	transform: translateY(0);
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: #EAC93E;
}

#spickandspan .staff {
	border-bottom: 1px solid rgba(0, 0, 0, 0.5);
	padding-bottom: 3.375rem;
}

#spickandspan .staff_txt {
	-webkit-font-smoothing: antialiased;
	color: #7D7D7D;
	font-size: 0.75rem;
	font-synthesis: none;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

@media (hover: hover) {

#spickandspan .footer_link a:hover {
	-webkit-text-decoration: none;
	opacity: 0.6;
	text-decoration: none;
}

#spickandspan .main_items a:hover {
	opacity: 0.7;
}

}

@media (prefers-reduced-motion: reduce) {

#spickandspan .movie_controller {
	transition: none;
}

#spickandspan .mv_ttl,
#spickandspan .mv_logo,
#spickandspan .mv_txt {
	animation: none;
	opacity: 1;
	transform: translateY(0);
}

#spickandspan .mv_logo,
#spickandspan .mv_txt {
	transform: translateY(-50%);
}

}

@media screen and (max-width: 739px) {

.u-desktop {
	display: block;
}

.u-mobile {
	display: none;
}

#spickandspan .footer {
	border-top: 1px solid #7D7D7D;
	padding-top: 1.875rem;
}

#spickandspan .intro {
	padding-bottom: 2.25rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	padding-top: 2.25rem;
}

#spickandspan .intro_inner {
	background-size: 5.25rem;
	padding-bottom: 8.9375rem;
	padding-top: 6.625rem;
}

#spickandspan .intro_txt {
	letter-spacing: normal;
}

#spickandspan .main_ttl {
	max-width: 18.8125rem;
}

#spickandspan .main_items {
	margin-top: 0.5rem;
}

#spickandspan .main[data-block=Jeanne] .main_inner {
	padding-left: 1.5625rem;
	padding-right: 2.5rem;
}

#spickandspan .main[data-block=Jeanne] .main_wrap {
	gap: 3.4375rem;
}

#spickandspan .main[data-block=Jeanne] .main_block--1 {
	margin-left: auto;
	width: 67.7611940299%;
}

#spickandspan .main[data-block=Jeanne] .main_block--2 {
	width: 100%;
}

#spickandspan .main[data-block=Jeanne] .main_block--3 {
	margin-left: 0;
	margin-top: 2.8125rem;
	width: 78.8059701493%;
}

#spickandspan .main[data-block=Kiki] .main_inner {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

#spickandspan .main[data-block=Kiki] .main_blocks {
	margin-top: 2.625rem;
}

#spickandspan .main[data-block=Kiki] .main_wrap {
	gap: 3.4375rem;
	margin-top: 3.625rem;
}

#spickandspan .main[data-block=Kiki] .main_block--1 {
	width: 61.8131868132%;
}

#spickandspan .main[data-block=Kiki] .main_block--2 {
	width: 100%;
}

#spickandspan .main[data-block=Kiki] .main_block--3 {
	margin-left: auto;
	margin-right: -1.25rem;
	width: 82.4175824176%;
}

#spickandspan .main[data-block=Tsugumi] {
	padding-bottom: rem8133;
}

#spickandspan .main[data-block=Tsugumi] .main_inner {
	padding-left: 1.4375rem;
	padding-right: 1.4375rem;
}

#spickandspan .main[data-block=Tsugumi] .main_blocks {
	margin-top: 1.25rem;
}

#spickandspan .main[data-block=Tsugumi] .main_wrap {
	gap: 3.125rem;
}

#spickandspan .main[data-block=Tsugumi] .main_block--1 {
	margin-left: -1.25rem;
	width: calc(100% + 1.25rem);
}

#spickandspan .main[data-block=Tsugumi] .main_block--2 {
	margin-right: -1.4375rem;
	margin-top: 0;
	order: -1;
	width: 72.7777777778%;
}

#spickandspan .main[data-block=Tsugumi] .main_block--3 {
	margin-right: -1.4375rem;
	margin-top: 0;
	width: 83.8888888889%;
}

#spickandspan .movie {
	padding-bottom: 0.9375rem;
	padding-top: 0.9375rem;
}

#spickandspan .movie_inner {
	padding-left: 1.125rem;
	padding-right: 1.125rem;
}

#spickandspan .movie_video video {
	border-radius: 0.625rem;
}

#spickandspan .movie_controller {
	bottom: 0.125rem;
	height: 2.9375rem;
	left: 0.125rem;
	width: calc(100% - 0.25rem);
}

#spickandspan .movie_video:hover .movie_controller,
#spickandspan .movie_video:focus-within .movie_controller {
	opacity: 0;
	pointer-events: none;
	transform: translateY(100%);
}

#spickandspan .movie_video.is-active .movie_controller {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

#spickandspan .movie_controllerInner {
	border-radius: 0 0 0.625rem 0.625rem;
}

#spickandspan .mv_movie {
	aspect-ratio: 402/659;
}

#spickandspan .mv_ttl {
	width: 17.75rem;
}

#spickandspan .mv_logo {
	animation-name: mvFadeInCenterSp;
	left: 50%;
	top: 1.875rem;
	transform: translateX(-50%) translateY(1.875rem);
}

#spickandspan .mv_txt {
	animation-name: mvFadeInCenterSp;
	bottom: 4.75rem;
	font-size: 1.1875rem;
	left: 50%;
	right: auto;
	right: initial;
	top: auto;
	top: initial;
	transform: translateX(-50%) translateY(1.875rem);
}

}

@media screen and (prefers-reduced-motion: reduce) and (max-width: 739px) {

#spickandspan .mv_logo,
#spickandspan .mv_txt {
	transform: translateX(-50%) translateY(0);
}

}

@keyframes mvFadeIn {

to {
	opacity: 1;
	transform: translateY(0);
}

}

@keyframes mvFadeInCenter {

to {
	opacity: 1;
	transform: translateY(-50%);
}

}

@keyframes mvFadeInCenterSp {

to {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

}