@charset "utf-8";

/* common */
.l-header:not(.is-fixed) {
	border: 0;
	color: white;
	fill: currentcolor;
	background: none;
}
.l-header:not(.is-fixed) .logo .img {
	fill: white;
}
.l-header:not(.is-fixed) .search_input {
	background: white;
}
@media screen and (min-width: 768px) {
	.l-header:not(.is-fixed) .logo {
		 position: static;
		 margin: -4px auto 0 0;
	}
	.l-header:not(.is-fixed) .logo .img {
		width: 152px;
	}
	.l-header:not(.is-fixed) .tagline {
		display: none;
	}
}
@media screen and (min-width: 1024px) {
	.l-header:not(.is-fixed) .menu_nav {
		display: flex;
		align-items: center;
		margin-right: .4em;
		margin-left: auto;
		font-size: 1.2rem;
	}
	.l-header:not(.is-fixed) .sns {
		margin-left: 0;
	}
	.l-header:not(.is-fixed) .menu_nav a {
		padding: 1em;
	}
}
@media screen and (max-width: 767px) {
	.l-header:not(.is-fixed) .logo .img.l-header:not(.is-fixed) .tagline {
		 width: 122px;
	}
	.l-header:not(.is-fixed) .tagline {
		border-top: 1px solid #b1b1b1;
		background: none;
	}
}

.page-home {
	overflow: hidden;
	padding-top: 0;
}
@media screen and (min-width: 768px) {
	.page-home {
		background: #fafafa;
	}
}


/**
 * こんにちは、filmbumです。
 * ---------------------------------------- */
.p-hello .modal_container {
	overflow: hidden;
	width: calc(100% - 32px);
	max-width: 1160px;
}
.p-hello .modal_close {
	right: calc(50% - 580px);
}
.p-hello .hello_filmanim {
	display: flex;
	z-index: -1;
	position: absolute;
}
.p-hello .hello_filmanim.-first,
.p-hello .hello_filmanim.-third {
	left: 0;
}
.p-hello .hello_filmanim.-second,
.p-hello .hello_filmanim.-fourth {
	right: 0;
}
.p-hello .hello_filmanim.-first {
	top: 0;
}
.p-hello .hello_filmanim img {
	width: auto;
	height: 100%;
	max-width: none;
}
.p-hello.is-anim .hello_filmanim,
.p-hello.is-active .hello_filmanim {
	animation: aboutfilm_odd 60s linear infinite;
}
.p-hello.is-anim .hello_filmanim.-second,
.p-hello.is-anim .hello_filmanim.-fourth,
.p-hello.is-active .hello_filmanim.-second,
.p-hello.is-active .hello_filmanim.-fourth {
	animation-name: aboutfilm_even;
}
.p-hello.is-anim .hello_filmanim.-second,
.p-hello.is-active .hello_filmanim.-second {
	animation-delay: -1s;
}
.p-hello.is-anim .hello_filmanim.-third,
.p-hello.is-active .hello_filmanim.-third {
	animation-delay: -3s;
}
@keyframes aboutfilm_odd {
	to { transform: translateX(-50%); }
}
@keyframes aboutfilm_even {
	to { transform: translateX(50%); }
}
@media screen and (min-width: 768px) {
	.p-hello .modal_container {
		height: calc(174px * 4);
		margin-top: calc(50vh - 174px * 2);
	}
	.p-hello .modal_close {
		top: calc(50% - 174px * 2 - 48px);
	}
	.p-hello .hello_filmanim {
		height: 33.3333%;
	}
	.p-hello .hello_filmanim.-second {
		top: 33.3333%;
	}
	.p-hello .hello_filmanim.-third {
		top: 66.6666%;
	}
	.p-hello .hello_filmanim.-fourth {
		display: none;
	}
}
@media screen and (max-width: 1192px) {
	.p-hello .modal_close {
		right: 16px;
	}
}
@media screen and (max-width: 767px) {
	.p-hello .modal_container {
		height: 520px;
		margin-top: calc(50vh - 260px);
	}
	.p-hello .modal_close {
		top: calc(50vh - 260px - 48px);
	}
	.p-hello .hello_filmanim {
		height: 25%;
	}
	.p-hello .hello_filmanim.-second {
		top: 25%;
	}
	.p-hello .hello_filmanim.-third {
		top: 50%;
	}
	.p-hello.is-anim .hello_filmanim.-fourth,
	.p-hello.is-active .hello_filmanim.-fourth {
		top: 75%;
		animation-delay: -5s;
	}
}

.hello_balloon {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	border-radius: 576px;
	background: white;
}
.hello_button {
	cursor: pointer;
	z-index: 6;
	position: fixed;
	right: 16px;
	bottom: 16px;
	border-radius: 192px;
	color: black;
	background: white;
}
.hello_balloon .title,
.hello_button {
	font-size: 32px;
	line-height: 1.7;
	font-weight: 700;
	letter-spacing: .05em;
	text-indent: .5em;
	text-align: center;
}
.hello_button {
	padding-top: .8em;
	font-size: 17px;
	filter: drop-shadow(0 0 8px rgba(0,0,0,.1));
}
.hello_balloon .ruby,
.hello_button .ruby  {
	display: inline-block;
	position: relative;
	margin-left: -.5em;
	font-size: 14px;
	line-height: 1;
}
.hello_button .ruby  {
	margin-bottom: 2.8em;
	font-size: 9px;
}
.hello_balloon .ruby .logo {
	position: relative;
	top: .1em;
	width: 278px;
	height: auto;
	margin-right: .5em;
	vertical-align: baseline;
}
.hello_button .ruby .logo {
	width: 156px;
	height: auto;
}
.hello_balloon .ruby .rt,
.hello_button .ruby .rt {
	position: absolute;
	top: calc(100% + .8em);
	left: 0;
	width: 100%;
}
.hello_balloon .lead {
	max-width: 400px;
	margin-top: 48px;
}
.hello_balloon .lead p {
	font-size: 13px;
	font-weight: 700;
}
.hello_balloon .dot,
.hello_button .dot {
	content: "";
	z-index: -1;
	position: absolute;
	top: -20px;
	right: -20px;
	bottom: -20px;
	left: -20px;
	width: calc(100% + 40px);
	height: auto;
	fill: none;
	stroke: white;
	stroke-width: 7;
	stroke-linecap: round;
	stroke-dasharray: 0.05 13.9;
	animation: rotate 120s -20s linear infinite;
	backface-visibility: hidden;
}
.hello_button .dot {
	stroke-width: 12;
	stroke-dasharray: 0 24;
}
.hello_button .dot {
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;
	width: calc(100% + 16px);
}
.hello_button.is-fixed {
	position: absolute;
	bottom: calc(100% - 56px);
}
@media screen and (min-width: 1440px) {
	.hello_button:not(.is-fixed) {
		right: calc(50% - 720px + 16px);
	}
}
@media screen and (min-width: 768px) {
	.hello_balloon {
		top: calc(50% - 288px);
		left: calc(50% - 288px);
		width: 576px;
		height: 576px;
		padding-bottom: 24px;
	}
	.hello_button {
		width: 192px;
		height: 192px;
	}
	.hello_balloon .lead {
		line-height: 2.3;
	}
	.hello_balloon .arr {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.hello_balloon {
		top: calc(50% - 200px);
		left: calc(50% - 200px);
		width: 400px;
		height: 400px;
	}
	.hello_button {
		width: 104px;
		height: 104px;
	}
	.hello_balloon .title {
		font-size: 20px;
	}
	.hello_button {
		font-size: 10px;
	}
	.hello_balloon .ruby,
	.hello_button .ruby {
		font-size: 50%;
	}
	.hello_balloon .ruby .logo {
		width: 192px;
	}
	.hello_button .ruby .logo {
		width: 88px;
	}
	.hello_balloon .lead {
		overflow: auto;
		width: calc(100vw - 64px);
		max-width: 300px;
		height: 10em;
		margin-top: 24px;
	}
	.hello_button .dot {
		top: -6px;
		right: -6px;
		bottom: -6px;
		left: -6px;
		width: calc(100% + 12px);
	}
	.hello_balloon .arr {
		margin-top: 16px;
		fill: none;
		stroke: currentcolor;
		stroke-width: 3;
	}
	.hello_button.is-fixed {
		right: calc(50% - 50vw + 16px);
	}
}
@media screen and (max-width: 384px) {
	.hello_button.is-fixed {
		right: 16px;
	}
}
/* motion */
.p-hello:not(.is-active) {
	pointer-events: none;
	opacity: 0;
}
.p-hello:not(.is-active) .modal_container {
	transform: scale(.96);
}
.p-hello.is-anim {
	transition: opacity .3s;
}
.p-hello.is-anim .modal_container {
	transition: transform .3s;
}



/**
 * main_visual
 * ---------------------------------------- */
.main_visual {
	background: #2c2b2b;
}
.main_visual .visual_video {
	height: 768px;
	background: #333;
}
@media screen and (max-width: 767px) {
	.main_visual .visual_video {
		height: 136vw;
	}
}
@media screen and (max-width: 767px) {
	.main_visual {
		padding-bottom: 120px;
	}
	.main_visual .c-video video.v-mb {
		object-fit: cover;
	}
}

.visual_panel {
	z-index: 2;
	position: absolute;
	bottom: 64px;
	left: 56px;
	padding: 32px;
	background: white;
}
@media screen and (min-width: 768px) {
	.visual_panel {
		width: 100%;
		max-width: 510px;
		height: 246px;
	}
}
@media screen and (max-width: 767px) {
	.visual_panel {
		bottom: 40px;
		left: 32px;
		right: 32px;
		padding: 24px;
	}
}

.visual_panel .page_info .newer {
	display: grid;
	place-items: center;
	position: absolute;
	top: -32px;
	right: -32px;
	width: 80px;
	height: 80px;
	border-radius: 80px;
	color: white;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: .1em;
	background: #b86;
}
.visual_panel .page_info .lead {
	position: relative;
	height: 40px;
	font-size: 1.4rem;
	font-weight: 700;
}
.visual_panel .page_info .lead::before {
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-right: 1em;
	vertical-align: middle;
	background: url(../img/film.svg) center / cover no-repeat;
}
.visual_panel .page_info .lead::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 3px;
	left: 16px;
	border-bottom: 1px solid currentcolor;
}
.visual_panel .page_info .title {
	margin-top: .6em;
	font-size: 2rem;
	line-height: 1.4;
	font-weight: 700;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media screen and (min-width: 768px) {
	.visual_panel .page_info .c-date {
		display: inline-flex;
		align-items: center;
		position: absolute;
		bottom: 32px;
		left: 32px;
		height: 30px;
	}
}
@media screen and (max-width: 767px) {
	.visual_panel .page_info .newer {
		top: -16px;
		right: -16px;
		width: 48px;
		height: 48px;
		padding-top: .1em;
		font-size: 1.1rem;
	}
	.visual_panel .page_info .lead {
		height: 24px;
		font-size: .9rem;
	}
	.visual_panel .page_info .lead::before {
		width: 24px;
		height: 24px;
		margin-right: 1em;
	}
	.visual_panel .page_info .lead::after {
		bottom: 2px;
	}
	.visual_panel .page_info .title {
		min-height: calc(1.4em * 3);
		font-size: 1.6rem;
	}
}

.visual_panel .pager {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px;
	text-align: center;
}
.visual_panel .pager .current,
.visual_panel .pager .total {
	display: block;
	height: 1em;
	padding: 0 .3em;
	font-size: 1rem;
	line-height: 1;
	font-weight: 700;
}
.visual_panel .pager .current {
	position: relative;
	width: 2em;
	overflow: hidden;
}
.visual_panel .pager .current .num {
	display: block;
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
}
.visual_panel .pager .current .is-current {
	position: static;
}
.visual_timer,
.visual_timer .progress {
	position: absolute;
	left: 0;
	width: 100%;
}
.visual_timer {
	top: 100%;
	height: 4px;
	background: #c4c4c4;
}
.visual_timer .progress {
	top: 0;
	height: 100%;
	background: #b86;
	transform-origin: left center;
	transform: scaleX(.3);
}
@media screen and (min-width: 768px) {
	.visual_panel .pager {
		position: absolute;
		right: 32px;
		bottom: 32px;
		width: 224px;
	}
}
@media screen and (max-width: 767px) {
	.visual_panel .pager {
		display: none;
		margin-top: 8px;
	}
}

/* motion */
.visual_video::before,
.visual_video::after {
	content: "";
	position: absolute;
	right: 0;
	left: -70px;
	height: 22px;
	background: url(../img/pf_creatorsfilm.svg) center top / 70px auto repeat-x;
	opacity: .3;
}
.visual_video::before { top: 24px; }
.visual_video::after { bottom: 24px; }
.is-nextSlide .visual_video::before,
.is-prevSlide .visual_video::before {
	animation: filmloop .6s linear infinite;
}
.is-nextSlide .visual_video::after,
.is-prevSlide .visual_video::after {
	animation: filmloop .6s linear infinite;
}
@keyframes filmloop {
	to { transform: translateX(70px); }
}

/* プログレスバー */
.visual_timer .progress {
	transform: scaleX(0);
}
.visual_timer.is-play .progress {
	transform: none;
	transition: transform 5s linear;
}
.visual_timer.is-reset .progress {
	transform-origin: right center;
	transform: scaleX(0);
	transition: transform .8s cubic-bezier(.3,1,.7,1);
}

/* 背景 */
.visual_video .c-video {
	z-index: 1;
	position: absolute;
	top: 0;
	width: 100%;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.is-nextSlide .c-video {
	animation: nextSlideMotion 2s cubic-bezier(.8,0,.3,1);
}
.is-prevSlide .c-video {
	animation: prevSlideMotion 2s cubic-bezier(.8,0,.3,1);
}
@keyframes nextSlideMotion {
	from { transform: none; }
	30% { transform: scale(.8); }
	70% { transform: translateX(-100%) scale(.8); }
	to { transform: translateX(-100%); }
}
@keyframes prevSlideMotion {
	from { transform: none; }
	20% { transform: scale(.8); }
	70% { transform: translateX(100%) scale(.8); }
	to { transform: translateX(100%); }
}
.is-nextSlide .c-arrows,
.is-prevSlide .c-arrows,
.visual_panel .c-arrows .ico {
	pointer-events: none;
}

/* パネルの情報 */
.page_info .lead,
.page_info .title,
.page_info .c-date {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.page_info.is-hide .lead,
.page_info.is-hide .title,
.page_info.is-hide .c-date {
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.page_info.is-hide .newer {
	opacity: 0;
	transform: scale(.6);
}
.page_info.is-anim .lead,
.page_info.is-anim .title,
.page_info.is-anim .c-date {
	transition: clip-path .6s cubic-bezier(.7,0,.3,1);
}
.page_info.is-anim .newer {
	transition: opacity .3s, transform .3s cubic-bezier(.3,1,.7,1);
}
.page_info.is-anim .lead { transition-delay: .1s; }
.page_info.is-anim .title { transition-delay: .2s; }
.page_info.is-anim .c-date { transition-delay: .3s; }
.page_info.is-anim:not(.is-hide) .newer { transition-delay: .6s; }

/* ページネーション */
.visual_panel .pager .current .is-next {
	top: 100%;
}
.visual_panel .pager .current .is-prev {
	top: -100%;
}
.is-nextSlide .visual_panel .pager .current.is-anim .is-next,
.is-nextSlide .visual_panel .pager .current.is-anim .is-current {
	transform: translateY(-100%);
	transition: transform .6s cubic-bezier(.3,1,.7,1);
}
.is-prevSlide .visual_panel .pager .current.is-anim .is-prev,
.is-prevSlide .visual_panel .pager .current.is-anim .is-current {
	transform: translateY(100%);
	transition: transform .6s cubic-bezier(.3,1,.7,1);
}
.is-nextSlide .visual_panel .pager .current.is-anim .is-next,
.is-prevSlide .visual_panel .pager .current.is-anim .is-prev {
	transition-delay: .2s;
}


/**
 * main_banner
 * ---------------------------------------- */
.main_banner {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	max-width: 1321px;
	margin: 0 auto;
	padding: 40px 0;
	border-image: linear-gradient(#ac9a5f, #ac9a5f) fill 0 / 0 / 0 50vw;
}
.main_banner .banner_item {
	flex-basis: 100%;
	margin-top: 0;
	text-align: center;
}
.main_banner .banner_item img {
	height: auto;
}
@media screen and (min-width: 480px) {
	.main_banner {
		justify-content: center;
	}
	.main_banner .banner_item.-half {
		flex-basis: calc(50% - 8px);
	}
}
@media screen and (min-width: 768px) {
	.main_banner {
		gap: 32px;
	}
	.main_banner .banner_item.-half {
		flex-basis: calc(50% - 16px);
	}
}
@media screen and (max-width: 479px) {
	.main_banner {
		flex-direction: column;
		max-width: 335px;
	}
}









/**
 * TOPIC CONTENTS
 * ---------------------------------------- */
.p-topic {
	padding-top: 80px;
}
@media screen and (max-width: 767px) {
	.p-topic {
		padding-top: 64px;
	}
	.p-topic .c-lineup {
		grid-template-columns: repeat(2, 1fr);
	}
	.p-topic .lineup_item:nth-child(3n+1) {
		grid-column: 1 / 3;
	}
	.p-topic .lineup_item:nth-child(3n) .c-summary,
	.p-topic .lineup_item:nth-child(3n+2) .c-summary {
		padding: 4px 8px;
	}
	.p-topic .lineup_item:nth-child(n+7) {
		display: none;
	}
	.p-topic .lineup_item:nth-child(3n) .c-summary .title,
	.p-topic .lineup_item:nth-child(3n+2) .c-summary .title {
		font-size: 1.6rem;
	}
}


/**
 * CREATORS FILM
 * ---------------------------------------- */
.p-creatorsfilm {
	z-index: 0;
	position: relative;
	padding: 120px 0 160px;
	color: white;
	background: #2c2b2b;
}
.p-creatorsfilm::before {
	background: #2c2b2b;
}
.p-creatorsfilm .c-leadbln {
	background: none;
}
.p-creatorsfilm .c-label {
	margin-top: 40px;
}
.p-creatorsfilm .c-video {
	/*overflow: hidden;
	height: 46vw;
	max-height: 564px;*/
	margin-top: 16px;
}
.p-creatorsfilm .c-lead {
	margin-top: 64px;
}
.p-creatorsfilm .c-text {
	margin-top: 24px;
	text-align: center;
}
.p-creatorsfilm .c-creators {
	margin-top: 16px;
}
.p-creatorsfilm .deco {
	z-index: -1;
	position: absolute;
	top: 50%;
	left: calc(50% - 50vw);
	color: #2c2b2b;
	font-size: 28.8rem;
	line-height: 1;
	font-family: "Kanit", sans-serif;
	white-space: nowrap;
	-webkit-text-stroke: 1px #696969;
	transform: rotate(-5deg);
}
.p-creatorsfilm .deco .t {
	display: inline-block;
	position: relative;
}
.p-creatorsfilm .deco .t::before {
	content: attr(data-text);
	position: absolute;
	-webkit-text-stroke: 0;
}
.p-creatorsfilm .deco_perforations {
	z-index: -1;
	position: absolute;
	overflow: hidden;
	top: 24px;
	right: calc(50% - 50vw);
	bottom: 24px;
	left: calc(50% - 50vw);
	background: url(../img/pf_creatorsfilm.svg) center top repeat-x,
		url(../img/pf_creatorsfilm.svg) center bottom repeat-x;
}
@media (hover: hover) {
	.p-creatorsfilm .c-arrows {
		border-color: white;
	}
	.p-creatorsfilm .c-arrows:hover {
		color: black;
	}
	.p-creatorsfilm .c-arrows::before {
		background: white;
	}
}
@media screen and (max-width: 767px) {
	.p-creatorsfilm .p-about .c-label {
		display: none;
	}
	.p-creatorsfilm .p-about {
		margin-top: 32px;
	}
	.p-creatorsfilm .c-video {
		display: block;
		margin-right: -32px;
		margin-left: -32px;
	}
	.p-creatorsfilm .c-video .wrap {
		/*min-height: 56.25vw;
		margin-top: -5.125vw;*/
	}
	.p-creatorsfilm .c-video .wrap iframe {
		object-fit: contain;
	}
	.p-creatorsfilm .c-lead {
		margin-top: 40px;
	}
}
@media screen and (max-width: 479px) {
	.p-creatorsfilm .c-video {
		margin-right: -20px;
		margin-left: -20px;
	}
}


/**
 * HOW TO filmbum
 * ---------------------------------------- */
.p-howto {
	position: relative;
	max-width: 1080px;
}
.p-howto .c-lead {
	line-height: inherit;
	text-align: left;
}
.p-howto .c-button {
	margin-top: 24px;
}
.p-howto .c-tags {
	margin-top: 80px;
}
.p-howto .c-bnr {
	display: flex;
	flex-direction: column;
	gap: 20px 0;
	max-width: 449px;
	margin-top: 40px;
}
.p-recommend {
	margin-top: 40px;
}
.p-recommend .c-lineup {
	grid-template-columns: repeat(4, 1fr);
	margin-top: 32px;
}
.p-recommend .-topic .c-summary {
	padding: 4px 8px;
}
@media (hover: hover) {
	.p-howto .c-bnr a {
		transition: opacity .4s;
	}
	.p-howto .c-bnr a:hover {
		opacity: .5;
		transition-duration: .2s;
	}
}
@media screen and (min-width: 768px) {
	.p-howto {
		display: grid;
		grid-template: 1fr auto 1fr / 50% 50%;
		max-width: 1080px;
	}
	.p-intro {
		max-width: 50%;
		text-align: left;
	}
	.p-howto .c-title {
		grid-area: 1 / 1;
		align-self: flex-end;
		text-align: left;
	}
	.p-howto .c-title .main {
		margin-top: .2em;
		line-height: .96;
	}
	.p-howto .c-lead {
		grid-area: 2 / 1;
		margin-top: 64px;
	}
	.p-howto .c-bnr {
		grid-area: 3 / 1;
		margin-top: 64px;
	}
	.p-howto .howto_recit {
		grid-area: 1 / 2 / 4 / 3;
	}
	.p-howto .c-tags {
		grid-area: 4 / 1 / 5 / 3;
	}
	.p-howto .p-recommend {
		grid-area: 5 / 1 / 6 / 3;
	}
}
@media screen and (max-width: 767px) {
	.p-howto {
		display: flex;
		flex-direction: column;
	}
	.p-howto .c-title {
		order: -3;
	}
	.p-howto .c-title .main {
		margin-top: .3em;
	}
	.p-howto .c-title br {
		display: none;
	}
	.p-howto .howto_recit {
		order: -2;
		margin-top: 8px;
	}
	.p-howto .c-lead {
		order: -1;
		margin-top: 16px;
		line-height: 1.5;
	}
	.p-howto .c-bnr {
		margin-top: 24px;
	}
	.p-howto .c-tags {
		margin-top: 48px;
	}
	.p-recommend {
		margin-top: 32px;
	}
	.p-recommend .c-lineup {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 16px;
	}
	.p-recommend .c-summary .title {
		font-size: 1.1rem;
	}
}

/* :::::: Rec it! :::::: */
.howto_recit {
	display: grid;
	place-items: center;
	position: relative;
	pointer-events: none;
}
.howto_recit .deco {
	position: absolute;
	color: #e7e7e7;
	font-size: 28rem;
	line-height: 1;
	font-family: "Kanit", sans-serif;
	letter-spacing: .03em;
}
.howto_recit .deco.d1 {
	top: -.1em;
	left: -.2em;
}
.howto_recit .deco.d2 {
	right: -.2em;
	bottom: -.1em;
}
.hightlight-video,
.hightlight-video .c-video {
	position: relative;
	width: 456px;
	height: 456px;
}
.hightlight-video .c-video {
	-webkit-mask-image: url(../img/circle.svg);
	-webkit-mask-size: 100% 100%;
	mask-image: url(../img/circle.svg);
	mask-size: 100% 100%;
}
.hightlight-video .dot {
	position: absolute;
	top: -16px;
	right: -16px;
	bottom: -16px;
	left: -16px;
	width: calc(100% + 32px);
	height: auto;
	fill: none;
	stroke: #d7d7d7;
	stroke-width: 7;
	stroke-linecap: round;
	stroke-dasharray: .05 13.9;
	animation: rotate 120s -20s linear infinite;
	backface-visibility: hidden;
}
.hightlight-video .wrap {
	height: auto;
	min-width: 178%;
}
@media screen and (min-width: 768px) {
	.howto_recit {
		padding: 184px 0 160px;
	}
}
@media screen and (max-width: 1144px) and (min-width: 768px) {
	.hightlight-video,
	.hightlight-video .c-video {
		width: calc(456vw / 11.44);
		height: calc(456vw / 11.44);
	}
}
@media screen and (max-width: 767px) {
	.howto_recit {
		padding: 96px 0 80px;
	}
	.howto_recit .deco {
		font-size: calc(280vw / 7.68);
	}
	.howto_recit .deco.d1 {
		left: 0;
	}
	.howto_recit .deco.d2 {
		right: 0;
	}
}
@media screen and (max-width: 560px) {
	.hightlight-video,
	.hightlight-video .c-video {
		width: calc(456vw / 5.6);
		height: calc(456vw / 5.6);
	}
	.hightlight-video .dot {
		top: -12px;
		right: -12px;
		bottom: -12px;
		left: -12px;
		width: calc(100% + 24px);
	}
}

/* HOW TO スライドショー */
.howto_slideshow,
.hightlight-video .photos {
	position: relative;
	width: 456px;
	height: 456px;
}
.hightlight-video .photos {
	-webkit-mask-image: url(../img/circle.svg);
	-webkit-mask-size: 100% 100%;
	mask-image: url(../img/circle.svg);
	mask-size: 100% 100%;
}
.hightlight-video .photos img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media screen and (max-width: 1144px) and (min-width: 768px) {
	.howto_slideshow,
	.hightlight-video .photos {
		width: calc(456vw / 11.44);
		height: calc(456vw / 11.44);
	}
}
@media screen and (max-width: 560px) {
	.howto_slideshow,
	.hightlight-video .photos {
		width: calc(456vw / 5.6);
		height: calc(456vw / 5.6);
	}
}


/**
 * ホームストーリーズ大募集中！
 * ---------------------------------------- */
.p-pr::before {
	border-top: 1px solid #cfcfcf;
	border-bottom: 1px solid #cfcfcf;
	background: #ebebeb;
}
.p-pr .c-title .main {
	font-size: 4rem;
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	font-weight: 900;
}
.p-pr .deco_perforations {
	z-index: -1;
	position: absolute;
	top: 16px;
	right: calc(50% - 50vw);
	bottom: 16px;
	left: calc(50% - 50vw);
	background: url(../img/pf_pr.svg) center top repeat-x,
		url(../img/pf_pr.svg) center bottom repeat-x;
}
@media screen and (max-width: 767px) {
	.p-pr .c-title .main {
		font-size: calc(24vw / 4.8);
		line-height: 1.2;
	}
}
@media screen and (max-width: 479px) {
	.p-pr .c-title .main {
		font-size: 2.4rem;
	}
}


/**
 * HOMESTORIES MOVIE
 * ---------------------------------------- */
.homestories_container {
	margin-top: 48px;
}
.homestories_container .-pickup .c-ribbon {
	width: 114px;
	height: 114px;
}
.homestories_container .-pickup .c-ribbon::after {
	font-size: 1.8rem;
}
.homestories_container .c-lineup {
	margin-top: 0;
}
.homestories_container .c-summary .category dd {
	flex-basis: 100%;
}
@media screen and (min-width: 768px) {
	.homestories_container {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.homestories_container .-pickup {
		flex-basis: 440px;
		margin-right: 20px;
	}
	.homestories_container .c-lineup {
		flex-basis: 698px;
	}
}
@media screen and (min-width: 1024px) {
	.homestories_container .-pickup {
		margin-right: 40px;
	}
	.homestories_container .c-lineup {
		gap: 40px;
	}
}
@media screen and (max-width: 767px) {
	.homestories_container .c-lineup {
		margin-top: 20px;
	}
}


/**
 * HOMESTORIES MOVIE
 * ---------------------------------------- */
.p-news::before {
	background: #f1f1f1;
}
.p-news .c-title .main {
	font-size: 4rem;
}
.p-news .c-title .c-leadbln {
	padding-right: 2.6em;
	padding-left: 2.8em;
	background: none;
}
.p-news .c-newslist {
	margin-top: 24px;
}
.p-news .c-button {
	min-width: 144px;
	padding: 0 2em;
}
@media screen and (min-width: 768px) {
	.p-news .c-title {
		display: flex;
		align-items: center;
	}
	.p-news .c-title .c-leadbln {
		margin-left: 2em;
	}
	.p-news .c-title .main {
		order: -1;
	}
	.p-news .c-button {
		position: absolute;
		top: 96px;
		right: 0;
		margin: 0;
	}
}
@media screen and (max-width: 767px) {
	.p-news .c-title .main {
		margin-top: 8px;
	}
}