/*
Theme Name:   filmbum_theme
Theme URI:	mimiguri
Description:  WordPress Theme for filmbum
Author:	  mimiguri
Author URI:   https://mimiguri.co.jp/
Template:	twentynineteen
Version:	 0.0.1
Tags:		news, entertainment
Text Domain:  twentynineteen
*/

@charset "utf-8";

*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0;}
ul,ol{list-style:none;padding:0;}
a{color:inherit;text-decoration:inherit;text-decoration-skip-ink:auto;}
img,svg,video,iframe{vertical-align:middle;}
img,video{max-width:100%;}
img[height]{height:auto;}
input,button,textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;}
button{border:0;padding:0;color:inherit;background:none;}
small{font-size:inherit;}
sub{vertical-align:baseline;}
@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}}
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: auto;
}
body {
	width: 100%;
	color: black;
	font-size: 1.6em;
	line-height: 2;
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-feature-settings: "pkna";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	background: white;
	overscroll-behavior: auto;
}
body.is-fixed {
	position: fixed;
	width: 100%;
	overscroll-behavior: none;
}
p {
	font-weight: 400;
}
hr {
	margin: 48px 0;
	border: 0;
	border-top: 1px solid #b1b1b1;
}
.f-kanit {
	font-family: "Kanit", "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) {
	.v-mb { display: none !important; }
}
@media screen and (max-width: 767px) {
	.v-dt { display: none !important; }
	hr {
		margin: 32px 0;
	}
}
.hasScrollbar body {
	overflow-x: hidden;
	overflow-y: scroll;
}


/*! Mediaqueries
 * @media screen and (min-width: 480px) {}
 * @media screen and (min-width: 768px) {}
 * @media screen and (min-width: 1200px) {}
 * @media screen and (max-width: 1199px) {}
 * @media screen and (max-width: 767px) {}
 * @media screen and (max-width: 479px) {}
 * -------------------------------------------------- */

/**
 * common style (desktop/mobile 共通の style)
 * @media screen and (min-width: 480px) {} mobile には適用したくない style
 * @media screen and (min-width: 768px) {} desktop だけの style
 * @media screen and (min-width: 1200px) {} wide desktop style
 * @media screen and (max-width: 767px) {} desktop には適用したくない style
 * @media screen and (max-width: 479px) {} mobile だけの style
 * @media screen and (max-width: 360px) {} small mobile style
 * MEMO: 
 * -------------------------------------------------- */
.l-header { z-index: 3; }
.l-menu { z-index: 4; }
.l-main { z-index: 1; }
.l-footer { z-index: 2; }
.l-floating { z-index: 5; }
.l-modal { z-index: 6; }

@keyframes rotate {
	from { transform: none; }
	to { transform: rotate(360deg); }
}

/**
 * menu
 * ---------------------------------------- */
.menu_nav {
	font-size: 1.4rem;
	font-weight: 700;
}
.menu_nav a,
.menu_global a,
.menu_other a {
	display: inline-block;
}
.menu_nav dd a::before {
	content: "-";
	display: inline-block;
	width: 1em;
	margin-right: .5em;
	text-align: center;
}
.menu_nav .sub {
	margin-left: .5em;
	font-size: 86%;
}
@media (hover: hover) {
	.menu_nav a,
	.menu_global a,
	.menu_other a {
		transition: opacity .4s;
	}
	.menu_nav a:hover,
	.menu_global a:hover,
	.menu_other a:hover {
		opacity: .5;
		transition-duration: .2s;
	}
}

.menu_nav button {
	cursor: pointer;
	position: relative;
	color: inherit;
}
.menu_nav button .ico {
	position: absolute;
	top: calc(50% - 5px);
	right: calc(100% + .3em);
	fill: none;
	stroke: currentcolor;
}
.menu_nav button:not(.is-active) .ico {
	transform: rotate(-90deg);
}
.menu_nav button.is-anim .ico {
	transition: transform .2s cubic-bezier(.3,1,.7,1);
	will-change: transform;
}
.menu_sub {
	overflow: hidden;
	font-size: 1.2rem;
	font-weight: 400;
}
.menu_sub.is-anim {
	transition: height .6s cubic-bezier(.3,1,.7,1);
	will-change: height;
}
.menu_sub.is-anim.is-active {
	transition-duration: .2s;
}
.menu_sub li {
	padding-left: .2em;
}
.menu_sub a::before {
	content: "-";
	display: inline-block;
	width: 1em;
	text-align: center;
}
.menu_global {
	color: #b1b1b1;
	font-size: 1.1rem;
	font-weight: 500;
}
.menu_other dt {
	font-size: 1.1rem;
	font-weight: 700;
}
.menu_other dd {
	line-height: 0;
}
.menu_other svg {
	height: auto;
	fill: currentcolor;
}
.menu_sns {
	display: flex;
	flex-wrap: wrap;
}
.menu_sns dt {
	flex-basis: 100%;
}
.menu_sns dd {
	flex-basis: 26px;
}
.menu_sns dd:nth-of-type(n+2) {
	margin-left: 12px;
}
@media screen and (max-width: 767px) {
	.menu_nav {
		font-size: 1.2rem;
	}
	.menu_other dt {
		font-size: 1rem;
	}
}

/**
 * header
 * ---------------------------------------- */
.l-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 96px;
	padding: 0 64px;
	background: white
}
.l-header.is-fixed {
	position: fixed;
	top: -80px;
	height: 80px;
	transform: translateY(100%);
}
.l-header.is-anim {
	transition: transform .6s cubic-bezier(.3,1,.7,1);
}
.l-header.is-anim:not(.is-fixed) {
	position: fixed;
	top: -96px;
	transition-duration: .2s;
}
.logo svg,
.sns svg {
	fill: inherit;
}
.l-header .logo {
	position: absolute;
	top: calc(50% - 26px);
	left: calc(50% - 96px);
	line-height: 0;
}
.l-header .logo a {
	display: block;
}
.l-header .logo .img {
	width: 192px;
	height: auto;
	fill: black;
}
.l-header .tagline {
	margin-right: auto;
	font-size: 1.1rem;
	line-height: 1.5;
}
.l-header .menu_nav {
	display: none;
}
.l-header .sns {
	display: flex;
	align-items: center;
	margin-left: auto;
	line-height: 1;
}
.l-header .sns a {
	display: inline-block;
	padding: 8px;
}
.l-header .sns svg {
	width: 20px;
	height: 20px;
}
/* .l-header .c-search {
	margin-left: 1em;
}
.l-header .search_input {
	width: 13em;
} */
.l-header .search,
.l-header .menu {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	width: 48px;
	height: 48px;
	margin-left: 1em;
	border: 0;
	border-radius: 48px;
	color: black;
}
.l-header .search {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f1f1f1;
}
.l-header .menu {
	color: white;
	font-size: 1.4rem;
	background: black;
}
.l-header .menu.is-active {
	opacity: 0;
	transform: scale(.5);
}
.l-header .menu.is-anim {
	transition: opacity .3s, transform .3s;
	transition-timing-function: cubic-bezier(.3,1,.7,1);
	will-change: opacity, transform;
}
.l-header .menu.is-anim:not(.is-active) {
	transition-delay: .2s;
}
.l-header .menu svg {
	stroke: currentcolor;
	stroke-width: 1.5;
}
@media (hover: hover) {
	.l-header .sns a {
		transition: opacity .4s;
	}
	.l-header .sns a:hover {
		opacity: .5;
		transition-duration: .2s;
	}
	.l-header .search,
	.l-header .menu {
		position: relative;
		transition: background .4s;
	}
	.l-header .search {
		transition: color .4s, background .4s;
	}
	.l-header .search:hover,
	.l-header .menu:hover {
		background: #d1b866;
		transition-duration: .2s;
	}
	.l-header .search:hover {
		color: white;
	}
}
@media screen and (max-width: 1023px) {
	.l-header {
		padding: 0 32px;
	}
	/* .l-header .c-search .search_input {
		width: 48px;
		padding-right: 0;
	} */
}
@media screen and (min-width: 768px) {
	.l-header.is-fixed .logo {
		top: calc(50% - 20px);
		left: calc(50% - 76px);
	}
	.l-header.is-fixed .logo .img {
		width: 152px;
	}
}
@media screen and (max-width: 767px) {
	.l-header {
		height: 64px;
		border-bottom: 1px solid #b1b1b1;
	}
	.l-header.is-fixed {
		top: -64px;
		height: 64px;
	}
	.l-header.is-anim:not(.is-fixed) {
		top: -96px;
	}
	.l-header .logo {
		top: calc(50% - 16px);
		left: calc(50% - 61px);
	}
	.l-header .logo .img {
		width: 122px;
	}
	.l-header .tagline {
		display: grid;
		place-items: center;
		position: absolute;
		top: 64px;
		right: 0;
		left: 0;
		height: 30px;
		padding-top: .1em;
		border-bottom: 1px solid #b1b1b1;
		text-align: center;
		background: white;
	}
	.l-header .tagline br {
		display: none;
	}
	.l-header .sns {
		order: -1;
		flex-basis: 64px;
		margin-left: -8px;
	}
	.l-header .search {
		margin-left: auto;
	}
	.l-header .search,
	.l-header .menu {
		width: 36px;
		height: 36px;
	}
	.l-header .sns svg,
	.l-header .menu svg {
		width: 16px;
		height: 16px;
	}
}
@media screen and (max-width: 479px) {
	.l-header {
		padding: 0 20px;
	}
	.l-header .menu {
		margin-left: 8px;
	}
	.l-header .sns {
		flex-wrap: wrap;
		flex-basis: 64px;
	}
	.l-header .sns a {
		padding: 4px 6px;
	}
}
@media screen and (max-width: 360px) {
	.l-header {
		padding-right: 12px;
	}
}

/**
 * footer
 * ---------------------------------------- */
.l-footer {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	color: white;
	background: black;
}
.l-footer::before {
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	right: calc(50% - 50vw);
	bottom: 0;
	left: calc(50% - 50vw);
	background: black;
}
.hasScrollbar .l-footer::before {
	right: calc(50% - 50vw + var(--scroll-bar-width) / 2);
	left: calc(50% - 50vw + var(--scroll-bar-width) / 2);
}
.l-footer .logo {
	line-height: 1;
}
.l-footer .logo .img {
	width: 193px;
}
.l-footer .tagline {
	margin-top: 32px;
	padding-right: 2em;
	font-size: 1.1rem;
	line-height: 1.5;
	font-weight: 700;
}
.l-footer .menu_nav dd + dt {
	margin-top: .5em;
}
.l-footer .menu_sub li {
	margin-top: 2px;
}
.l-footer .menu_sns {
	margin-top: 24px;
}
.l-footer .menu_sns dd:nth-of-type(n+2) {
	margin-left: 16px;
}
.l-footer .menu_other svg {
	width: 145px;
}
.l-footer .menu_other a[href*="dolive"] svg {
	width: 94px;
}
.l-footer .menu_produced dd {
	margin-top: 6px;
}
.l-footer .menu_produced dd + dd {
	margin-top: 16px;
}
.l-footer .menu_relation {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #b1b1b1;
}
.l-footer .menu_relation .label {
	font-size: 1.8rem;
	line-height: 1.5;
	font-weight: 700;
}
.l-footer .menu_relation .item a {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.l-footer .menu_relation .item dt {
	flex-basis: 104px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.l-footer .menu_relation .item dd {
	font-size: 1.1rem;
	line-height: 2;
}
.l-footer .copyright {
	color: #b1b1b1;
	font-size: 1.1rem;
	line-height: 1.2;
}
@media screen and (min-width: 768px) {
	.l-footer {
		display: grid;
		grid-template: 50px auto auto / 224px auto auto auto;
		padding: 80px 32px;
	}
	.l-footer .logo {
		grid-area: 1 / 1 / 2 / 2;
	}
	.l-footer .tagline {
		grid-area: 2 / 1 / 3 / 2;
	}
	.l-footer .menu_nav.-primary {
		grid-area: 1 / 2 / 4 / 3;
		padding-left: 32px;
	}
	.l-footer .menu_nav.-secondary {
		grid-area: 1 / 3 / 4 / 4;
		padding-left: 32px;
	}
	.l-footer .menu_nav li:not(:first-child),
	.l-footer .menu_global li:not(:last-child),
	.l-footer .menu_sns li:not(:last-child) {
		margin-bottom: 4px;
	}
	.l-footer .menu_global {
		grid-area: 1 / 4 / 3 / 5;
		padding-left: 20px;
	}
	.l-footer .menu_sns {
		grid-area: 3 / 1 / 4 / 2;
	}
	.l-footer .menu_produced {
		grid-area: 1 / 5 / 4 / 6;
		padding-left: 20px;
	}
	.l-footer .menu_relation {
		grid-area: 4 / 1 / 5 / 6;
	}
	.l-footer .menu_relation .lineup {
		display: flex;
		justify-content: space-between;
		margin-top: 40px;
	}
	.l-footer .menu_relation .item {
		flex-basis: calc(33.3333% - 16px);
	
	}
	.l-footer .copyright {
		position: absolute;
		right: 64px;
		bottom: 32px;
		text-align: right;
	}
}
@media screen and (min-width: 1024px) {
	/*.l-footer .menu_nav {
		columns: 2;
	}*/
}
@media screen and (min-width: 1199px) {
	.l-footer {
		padding: 80px;
	}
	.l-footer .menu_nav {
		padding-left: 80px;
	}
}
@media screen and (max-width: 1023px) {
	.l-footer .menu_nav > li + li {
		margin-top: 2px;
	}
	.l-footer .menu_nav {
		font-size: 1.2rem;
	}
	.l-footer .menu_other.l-footer .menu_sns dt {
		font-size: 1.2rem;
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.l-footer .menu_nav {
		max-width: 360px;
		margin-left: auto;
	}
}
@media screen and (max-width: 767px) {
	.l-footer {
		display: flex;
		flex-direction: column;
		max-width: 384px;
		padding: 48px 20px 32px;
	}
	.l-footer .logo .img {
		width: 137px;
	}
	.l-footer .tagline {
		margin-top: 16px;
		font-size: 1rem;
	}
	.l-footer .menu_nav {
		margin-top: 32px;
	}
	.l-footer .menu_global {
		margin-top: 8px;
	}
	.l-footer .menu_produced {
		margin-top: 24px;
	}
	.l-footer .menu_produced dd {
		line-height: 24px;
	}
	.l-footer .menu_produced svg {
		width: 132px;
		vertical-align: bottom;
	}
	.l-footer .menu_produced a[href*="dolive"] svg {
		width: 82px;
	}
	.l-footer .menu_relation .label {
		text-align: center;
	}
	.l-footer .menu_relation .lineup {
		margin-top: 24px;
	}
	.l-footer .menu_sns {
		justify-content: center;
		margin-top: 24px;
		text-align: center;
	}
	.l-footer .copyright {
		margin-top: 24px;
		text-align: center;
	}
	.l-footer .menu_sns,
	.l-footer .copyright {
		order: 1;
	}
}
@media screen and (max-width: 360px) {
	.l-footer .menu_sub,
	.l-footer .menu_nav {
		font-size: 1.1rem;
	}
	.l-footer .menu_sns dt {
		font-size: 1.1rem;
	}
}


/**
 * nav
 * ---------------------------------------- */
.l-menu,
.l-menu .overlay {
	position: fixed;
	inset: 0;
}
.l-menu .overlay {
	background: rgba(0,0,0,.05);
}
.l-menu .close {
	cursor: pointer;
	position: fixed;
	top: 24px;
	right: 64px;
	width: 48px;
	height: 48px;
	margin-left: 1em;
	border: 0;
	border-radius: 48px;
	font-size: 1.4rem;
	background: white;
}
.l-menu .close svg {
	stroke: currentcolor;
	stroke-width: 1.5;
}
.l-menu .container {
	overflow: auto;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	padding: 80px 80px 48px;
	color: white;
	background: black;
}
.l-menu .menu_nav {
	font-size: 1.6rem;
}
.l-menu .menu_nav.-secondary {
	margin-top: 1em;
}
.l-menu .menu_nav dt {
	font-size: 2.4rem;
}
.l-menu .menu_nav dd + dt {
	margin-top: .5em;
}
.l-menu .menu_nav > li > a,
.l-menu .menu_nav > li > button,
.l-menu .menu_global > li > a {
	padding: .1em 0;
}
.l-menu .menu_global,
.l-menu .menu_other {
	margin-top: 32px;
}
.l-menu .menu_sub li:last-child {
	padding-bottom: .5em;
}
.l-menu .menu_other {
	text-align: center;
}
.l-menu .menu_other dd {
	margin-top: 16px;
}
.l-menu .menu_other svg {
	width: 187px;
}
.l-menu .menu_other a[href*="dolive"] svg {
	width: 124px;
}
.l-menu .menu_sub a {
	padding: .1em 0;
}
.l-menu .menu_sns {
	display: none;
}
.l-menu .menu_produced {
	margin-top: 32px;
}
.l-menu .menu_produced dd + dd {
	margin-top: 24px;
}
.l-menu .menu_relation {
	display: none;
}
@media screen and (max-width: 1023px) {
	.l-menu .close {
		right: 32px;
	}
	.l-menu .container {
		padding: 80px 64px 48px;
	}
}
@media screen and (max-width: 767px) {
	.l-menu .close {
		top: 14px;
		width: 36px;
		height: 36px;
	}
	.l-menu .close svg {
		width: 16px;
		height: 16px;
	}
	.l-menu .container {
		padding: 64px 48px 48px;
	}
	.l-menu .menu_nav dt {
		font-size: 1.6rem;
	}
	.l-menu .menu_global {
		margin-top: 8px;
	}
}
@media screen and (max-width: 479px) {
	.l-menu .close {
		right: 20px;
	}
}
/* effect */
.l-menu:not(.is-active) {
	pointer-events: none;
}
.l-menu .overlay:not(.is-active),
.l-menu .close:not(.is-active),
.l-menu:not(.is-active) .container {
	opacity: 0;
}
.l-menu .close:not(.is-active) {
	transform: scale(.5);
}
.l-menu:not(.is-active) .container {
	transform: translateX(40px);
}
.l-menu .overlay.is-anim,
.l-menu .close.is-anim,
.l-menu.is-anim .container {
	transition: opacity .3s, transform .3s;
	transition-timing-function: cubic-bezier(.3,1,.7,1);
	will-change: opacity, transform;
}
.l-menu.is-active .close.is-anim { transition-delay: .2s; }
.l-menu:not(.is-active) .overlay.is-anim { transition-delay: .2s; }
.l-menu.is-anim:not(.is-active) .container { transition-delay: .2s; }


/**
 * フローティング
 * -------------------------------------------------- */
.l-floating {
	position: fixed;
	right: 0;
	width: 304px;
	bottom: 24px;
	padding: 24px;
	text-align: center;
	background: rgba(235,235,235,.9);
}
.l-floating .c-title {
	display: grid;
	gap: 8px;
}
.l-floating .c-leadbln {
	max-width: none;
	padding-top: .4em;
	padding-bottom: .3em;
	font-size: .9rem;
}
.l-floating .c-title .main {
	margin: 0;
	font-size: 1.8rem;
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	font-weight: 900;
	letter-spacing: 0;
}
.l-floating .c-title + .promotion_item {
	margin-top: 8px;
}
.l-floating .close {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	position: absolute;
	top: -12px;
	left: -12px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 40px;
	background: white;
}
.l-floating .close svg {
	width: 16px;
	height: 16px;
	stroke: currentcolor;
	stroke-width: 1.5;
}
/* motion */
.l-floating.is-close {
	pointer-events: none;
	transform: translateX(100%);
}
.l-floating.is-anim {
	transition: transform .6s cubic-bezier(.7,0,.3,1);
}
/*.close {
	opacity: 0;
	transform: scale(.6);
	transition: opacity .3s, transform .3s cubic-bezier(.3,1,.7,1);
}*/


/**
 * モーダルレイアウト
 * ---------------------------------------- */
.l-modal {
	position: fixed;
	inset: 0;
}
.l-modal .modal_overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.6);
}
.l-modal .modal_close {
	cursor: pointer;
	position: absolute;
}
.l-modal .modal_close svg {
	fill: none;
	stroke: white;
	stroke-width: .5;
	width: 40px;
	height: auto;
}
.l-modal .modal_container {
	z-index: 0;
	position: relative;
	margin: 0 auto;
}


/**
 * utility
 * -------------------------------------------------- */
.js-holder {
	display: none;
}
.js-holder,
.svg-parts,
.visuallyhidden {
	position: absolute;
	clip: rect(0 0 0 0);
	overflow: hidden;
	width: 1px;
	height: 1px;
}

/* zoomEffect */
.zoomContainer {
	cursor: zoom-out;
	z-index: 11;
	position: absolute;
	transform-origin: left top;
}
.zoomOverlay {
	cursor: zoom-out;
	z-index: 10;
	position: fixed;
	inset: 0;
	background: rgba(255,255,255,.8);
}
.zoomContainer:not(.is-active),
.zoomOverlay:not(.is-active) {
	opacity: 0;
	pointer-events: none;
}
.zoomContainer.is-anim {
	transition: opacity .2s, transform .4s cubic-bezier(.7,0,.3,1);
}
.zoomContainer.is-anim:not(.is-active) {
	transition-duration: .4s;
	transition-timing-function: ease, cubic-bezier(.3,1,.7,1);
}
.zoomOverlay.is-anim {
	transition: opacity .4s;
}

/* transformScroll */
.js-sc-wrap {
	overflow: hidden;
}
.js-fixed {
	position: fixed;
	width: 100%;
}
.js-fixed,
.js-sc-slip,
.js-scrollSlideDeco .t[style] {
	backface-visibility: hidden;
	will-change: transform;
}
.js-sc-dummy {
	z-index: -1;
	pointer-events: none;
}

/* inview */
.js-inview:not(.is-inview) {
	opacity: 0;
	transform: translateY(24px);
}
.js-inview.is-anim {
	transition: opacity .6s, transform .6s cubic-bezier(.3,1,.7,1);
}

/* lazy */
img[data-src]:not(.is-loaded) {
	opacity: 0;
}
img[data-src].is-anim {
	transition: opacity .6s;
}