@charset "utf-8";


/**
 * main
 * ---------------------------------------- */
.l-main {
	min-height: 100vh;
	padding: 96px 32px 0;
}
@media screen and (max-width: 767px) {
	.l-main {
		padding-top: 94px;
	}
}
@media screen and (max-width: 479px) {
	.l-main {
		padding-right: 20px;
		padding-left: 20px;
	}
}

.main_section {
	max-width: 1220px;
	margin: 0 auto;
	padding: 96px 0;
	text-align: center;
}
.main_innersection {
	margin-top: 48px;
}
@media screen and (max-width: 767px) {
	.main_section {
		padding: 64px 0;
	}
}

.-widebg {
	z-index: 0;
	position: relative;
}
.-widebg::before {
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	right: calc(50% - 50vw);
	bottom: 0;
	left: calc(50% - 50vw);
}
.hasScrollbar .-widebg::before {
	right: calc(50% - 50vw + var(--scroll-bar-width) / 2);
	left: calc(50% - 50vw + var(--scroll-bar-width) / 2);
}

.main_visual {
	position: relative;
	margin: 0 -32px;
	background: gray;
}
.main_visual .visual_video {
	height: 500px;
}
@media screen and (max-width: 1024px) {
	.main_visual .visual_video {
		height: 50vw;
	}
}
@media screen and (max-width: 479px) {
	.main_visual {
		margin: 0 -20px;
	}
}

.visual_video {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}
.visual_video .c-video .wrap {
	width: 100%;
	min-width: calc(160vw * .09);
}
.visual_video .c-video .wrap {
	height: 56.25vw;
}
.visual_video.-soon .c-video::before,
.visual_video.-soon .c-video::after {
	z-index: 1;
	position: absolute;
}
.visual_video.-soon .c-video::before {
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.8);
}
.visual_video.-soon .c-video::after {
	content: "coming soon...";
	top: calc(50% - .5em);
	left: 0;
	width: 100%;
	color: white;
	font-size: 3.6rem;
	line-height: 1;
	font-family: "Kanit", sans-serif;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
}
.visual_video.-soon .play {
	display: none;
}
@media (hover: hover) {
	.visual_video .tag {
		transition: opacity .4s;
	}
	.visual_video .tag:hover {
		opacity: .5;
		transition-duration: .2s;
	}
}
@media screen and (max-width: 767px) {
	.visual_video.-soon .c-video::after {
		font-size: calc(20vw / 4.8);
	}
	.visual_video .c-video .wrap iframe {
		object-fit: contain;
	}
}
@media screen and (max-width: 479px) {
	.visual_video.-soon .c-video::after {
		font-size: 2rem;
	}
}


/**
 * component
 * ---------------------------------------- */
.c-title {
	line-height: 1;
}
.c-title .main {
	display: block;
	font-size: 7.2rem;
	line-height: 1.2;
	font-weight: 700;
	font-family: "Kanit", sans-serif;
	letter-spacing: .05em;
}
.c-title .c-leadbln + .main {
	margin-top: 8px;
}
.c-title .main.-ja {
	font-size: 3.6rem;
	font-family: "Roboto", "Noto Sans JP", sans-serif;
}
.c-title .c-leadbln + .main.-ja {
	margin-top: 16px;
}
.p-latest .c-title {
	text-align: center;
}
@media screen and (max-width: 767px) {
	.c-title .main {
		font-size: calc(36vw / 3.75);
		line-height: 1;
	}
	.c-title .c-leadbln + .main {
		margin-top: 16px;
	}
	.c-title .main.-ja {
		font-size: calc(20vw / 3.75);
	}
}
@media screen and (max-width: 479px) {
	.c-title .main {
		font-size: 3.6rem;
	}
	.c-title .main.-ja {
		font-size: 2rem;
	}
}

.c-leadbln {
	display: inline-block;
	min-width: 100px;
	padding: .4em 1em .3em 1.5em;
	border: 2px solid currentcolor;
	border-radius: 2em 2em 2em 0;
	font-size: 1.1rem;
	line-height: 1.4;
	font-weight: 700;
	text-align: center;
	background: white;
}
@media screen and (max-width: 767px) {
	.c-leadbln {
		max-width: 22em;
	}
}

.c-emotitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	font-size: 2.2rem;
	line-height: 1.5;
	text-align: left;
}
.c-emotitle .deco {
	position: absolute;
	top: -24px;
	left: calc(50% - 32px);
	width: 64px;
	height: 30px;
	fill: none;
	stroke: currentcolor;
	padding: 0 .3em;
}
.c-emotitle .emoji {
	display: block;
	font-size: 2.4rem;
}
.c-emotitle .main {
	z-index: 0;
	position: relative;
	padding: 0 .5em;
}
.c-emotitle .main span {
	background: linear-gradient(#d1b866, #d1b866) left bottom / 100% .6em no-repeat;
}
@media screen and (max-width: 767px) {
	.c-emotitle {
		font-size: 2rem;
	}
	.c-emotitle .emoji {
		font-size: 4.2rem;
	}
	.c-emotitle .deco {
		top: -20px;
		left: calc(50% - 44px);
		width: 88px;
		height: 40px;
	}
}

.c-hashtag {
	padding: .3em 1em;
	border: 1px solid #c4c4c4;
	border-radius: 2em;
	font-size: 88%;
	line-height: 1.2;
}

.c-poptext {
	display: inline-block;
	position: relative;
}
.c-poptext::before,
.c-poptext::after {
	content: "";
	position: absolute;
	bottom: .1em;
	height: calc(100% - .2em);
	border-left: 3px solid currentcolor;
}
.c-poptext::before {
	right: calc(100% + 1em);
	transform: rotate(-20deg)
}
.c-poptext::after {
	left: calc(100% + 1em);
	transform: rotate(20deg)
}

/* パンくず */
.c-crumb {
	padding: 1em 32px;
	color: #848484;
	font-size: 1.2rem;
	font-weight: 400;
	text-align: left;
}
.c-crumb a {
	color: black;
}
@media (hover: hover) {
	.c-crumb a {
		transition: opacity .4s;
	}
	.c-crumb a:hover {
		opacity: .5;
		transition-duration: .2s;
	}
}
@media screen and (max-width: 1023px) {
	.c-crumb {
		padding: 1em 0;
	}
}
@media screen and (max-width: 767px) {
	.c-crumb {
		display: none;
	}
}

/* 急上昇ラベル */
.c-ribbon {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 64px;
	height: 64px;
}
.c-ribbon::after {
	content: attr(data-text);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2em;
	width: 144%;
	color: white;
	font-size: 1rem;
	font-weight: 700;
	background: #ff7070;
	transform-origin: left bottom;
	transform: rotate(-45deg);
}

/* タイトルラベル */
.c-label {
	color: #848484;
	font-size: 1.8rem;
	font-family: "Kanit", "Noto Sans JP", sans-serif;
	letter-spacing: .05em;
	text-align: center;
}
@media screen and (max-width: 767px) {
	.c-label {
		/*font-size: 1.6rem;*/
	}
}

/* リード文 */
.c-lead {
	font-size: 2.4rem;
	line-height: 1.5;
	font-weight: 700;
}
.c-lead.-s {
	font-size: 1.4rem;
}
.c-lead:first-letter {
	font-family: "Roboto", "YakuHanJP", "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 767px) {
	.c-lead {
		font-size: 1.8rem;
	}
}

/* メイン文 (p) */
.c-text {
	max-width: 1140px;
	margin: 0 auto;
	font-size: 1.4rem;
	text-align: left;
}
@media screen and (max-width: 767px) {
	.c-text {
		font-size: 1.2rem;
	}
}

/* 日付 */
.c-date {
	color: #848484;
	font-size: 1.1rem;
	font-family: "Kanit", sans-serif;
}

/* 要素を覆う透明リンク */
.c-coverlink {
	z-index: 1;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999em;
}

/* ボタン */
.c-button {
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	z-index: 0;
	position: relative;
	min-width: 200px;
	height: 50px;
	margin-top: 64px;
	padding: 0 40px;
	border: 1px solid currentcolor;
	font-size: 1.4rem;
	font-weight: 700;
}
.c-button.-large {
	width: 100%;
	max-width: 384px;
	height: 80px;
}
.c-button .bg {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
}
.c-button .loader {
	pointer-events: none;
	position: absolute;
	top: calc(50% - 12px);
	left: calc(50% - 12px);
	opacity: 0;
	line-height: 0;
}
.c-button .loader,
.c-button .loader .svg {
	width: 24px;
	height: 24px;
}
.c-button .loader .svg {
	fill: none;
	stroke: #d1b866;
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1s infinite cubic-bezier(.4,0,.3,1), ajax .8s infinite linear;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes ajax {
	from { transform: none; }
	to { transform: rotate(360deg); }
}
@media (hover: hover) {
	.c-button .bg::before {
		content: "";
		position: absolute;
		top: calc(50% - 300px);
		left: calc(50% - 300px);
		width: 600px;
		height: 600px;
		padding-bottom: 100%;
		border-radius: 50%;
		background: #d1b866;
	}
	.c-button.-large .bg::before {
		top: calc(50% - 400px);
		left: calc(50% - 400px);
		width: 800px;
		height: 800px;
	}
	.c-button:hover {
		color: white;
		border-color: #d1b866;
	}
	.c-button:not(:hover) .bg::before {
		opacity: 0;
		transform: scale(0);
	}
	.c-button {
		transition: color .2s, border-color .2s;
	}
	.c-button .bg::before {
		transition: opacity 0s, transform .4s;
		transition-timing-function: ease, cubic-bezier(.3,1,.7,1);
	}
	.c-button.-large .bg::before {
		transition-duration: 0s, .6s;
	}
	.c-button:not(:hover) {
		transition-duration: .4s;
	}
	.c-button:not(:hover) .bg::before {
		transition-duration: .4s, 0s;
		transition-delay: 0s, .4s;
	}
}
@media screen and (max-width: 767px) {
	.c-button {
		margin-top: 40px;
	}
}
/* motion */
.c-button.is-loading {
	pointer-events: none;
	color: gainsboro;
}
.c-button.is-loading .loader {
	opacity: 1;
}
.c-button.is-delete {
	pointer-events: none;
	height: 0;
	opacity: 0;
}
.c-button.is-anim,
.c-button.is-anim .loader {
	transition: opacity .3s;
}

/* 矢印ボタン */
.c-arrows {
	cursor: pointer;
	display: grid;
	place-items: center;
	width: 60px;
	height: 30px;
	border: 1px solid currentcolor;
	border-radius: 30px;
	color: inherit;
	fill: none;
	stroke: currentcolor;
}
.c-arrows.-prev {
	margin-right: auto;
}
.c-arrows.-next {
	margin-left: auto;
}
.c-arrows.-next path {
	transform-origin: center;
	transform: scaleX(-1);
}
@media (hover: hover) {
	.c-arrows {
		position: relative;
		overflow: hidden;
		border-color: black;
		transition: color .2s;
	}
	.c-arrows:hover {
		color: white;
	}
	.c-arrows::before {
		content: "";
		z-index: -1;
		position: absolute;
		top: calc(50% - 80px);
		width: 160px;
		height: 160px;
		border-radius: 160px;
		background: black;
		transition: opacity 0s, transform .4s;
		transition-timing-function: cubic-bezier(.3,1,.7,1);
		backface-visibility: hidden;
	}
	.c-arrows.-prev::before {
		left: -24px;
	}
	.c-arrows.-next::before {
		right: -24px;
	}
	.c-arrows:not(:hover)::before {
		opacity: 0;
		transform: scale(0);
		transition-duration: .4s, 0s;
		transition-delay: 0s, .4s;
	}
}

/* シェア */
.c-share {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	line-height: 1;
}
.c-share dt {
	color: #848484;
	font-size: 1.2rem;
	font-family: "Kanit", sans-serif;
	letter-spacing: .1em;
}
.c-share dd {
	margin-left: 16px;
}
.c-share dd a {
	display: block;
	width: 30px;
	height: 30px;
}
.c-share dd img {
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 767px) {
	.c-share dt {
		margin-bottom: 12px;
		flex-basis: 100%;
	}
	.c-share dd:first-of-type {
		margin-left: 0;
	}
}

/* filmbumのSNSアカウントでもHOMESTORIESを発信中！ */
.fun_sns {
	margin: 0 auto;
	padding: 24px 64px;
	text-align: center;
	background: white;
}
.fun_sns .c-poptext {
	font-size: 1.8rem;
	font-weight: 700;
}
.fun_sns ul {
	display: flex;
	justify-content: center;
	column-gap: 40px;
	margin-top: 16px;
}
.fun_sns ul img {
	width: 60px;
}
@media screen and (max-width: 479px) {
	.fun_sns {
		padding: 24px;
	}
	.fun_sns ul {
		column-gap: 24px;
	}
}


/**
 * 一覧
 * ---------------------------------------- */
.c-lineup {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}
.c-lineup.-recommend {
	grid-template-columns: repeat(4, 1fr);
}
.lineup_item {
	position: relative;
	text-align: left;
}

.-topic .lineup_item {
	background: #3b3b3b;
}
.lineup_item .link {
	z-index: 1;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.lineup_item .thumb {
	display: flex;
	align-items: center;
	position: relative;
}
.lineup_item .thumb img,
.lineup_item .thumb .spacer {
	width: 100%;
	height: auto;
}
.lineup_item .thumb .main {
	position: absolute;
	left: 0;
	width: 100%;
	height: auto;
	object-fit: cover;
}
@media screen and (max-width: 767px) {
	.c-lineup,
	.c-lineup.-recommend {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* motion */
.c-lineup.is-addition {
	transition: height .3s cubic-bezier(.7,0,.3,1);
}
.lineup_item.is-hide {
	opacity: 0;
}
.lineup_item.is-fade {
	transition: opacity .3s;
}

@media (hover: hover) {
	.c-lineup.-topic .lineup_item .link::after,
	.lineup_item .thumb::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
		transition: opacity .4s;
	}
	.c-lineup.-topic .lineup_item .link:hover::after,
	.lineup_item:hover .thumb::after {
		opacity: .3;
	}
	.lineup_item .title,
	.lineup_item .c-date {
		transition: color .4s;
	}
	.lineup_item:hover .title,
	.lineup_item:hover .c-date {
		transition-duration: .2s;
	}
	
	.c-lineup.-topic .lineup_item .link::after {
		background: #b86;
	}
	.lineup_item .thumb::after {
		background: #3cb378;
	}
	.lineup_item:hover .title,
	.lineup_item:hover .c-date {
		color: #3cb378;
	}
	.lineup_item.-homestories .thumb::after {
		background: #f9434e;
	}
	.lineup_item.-homestories:hover .title,
	.lineup_item.-homestories:hover .c-date {
		color: #ff7070;
	}
	.lineup_item.-creators .thumb::after {
		background: none;
	}
	.lineup_item.-creators:hover .title,
	.lineup_item.-creators:hover .c-date {
		color: #d1b866;
	}
}

/* ホームストーリーズ大募集中！ */
.c-promotion {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 40px;
	text-align: left;
}
.lineup_item.-recit {
	position: relative;
}
.lineup_item.-recit .title {
	font-size: 1.6rem;
}
.lineup_item.-recit .c-status {
	position: absolute;
	top: 8px;
	left: 0;
	padding: .3em .6em;
	color: white;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	background: #3cb378;
}
.lineup_item.-recit .c-status.-yet {
	background: gainsboro;
}
.lineup_item.-recit .c-status.-close {
	background: #ff7070;
}
@media screen and (max-width: 767px) {
	.c-promotion {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 24px;
	}
}
@media screen and (max-width: 479px) {
	.c-promotion {
		display: block;
		padding: 0 16px;
	}
	.lineup_item.-recit:nth-child(n+2) {
		margin-top: 24px;
	}
}

/* 埋め込みレイアウト */
.lineup_item .c-video.-embed {
	display: grid;
	place-items: center;
	overflow: hidden;
}
.lineup_item .c-video.-youtube {
}
.lineup_item .-youtube iframe {
	width: 100%;
}
.lineup_item .c-video.-tiktok {
}
.lineup_item .-tiktok .tiktok-embed {
	height: 150%;
	transform: scale(.8);
}
.lineup_item.-pickup .-tiktok .tiktok-embed {
	height: 74%;
	transform: scale(1.4);
}
.lineup_item .c-video.-dummy img {
	position: relative;
}

/* 一覧内サマリー (-topic) */
.c-summary {
	margin-top: .5em;
	font-weight: 700;
}
.-topic .c-summary {
	z-index: 0;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin-top: 0;
	padding: 16px;
}
.c-summary .c-date {
	display: block;
}
.-topic .c-summary .c-date {
	color: #c0c0c0;
}
.c-summary .title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 1.4rem;
	line-height: 1.5;
}
.-topic .c-summary .title {
	margin: 0 4px;
	color: white;
	font-size: 2.4rem;
	line-height: 1.8;
	filter: drop-shadow(-4px 0 0 black) drop-shadow(4px 0 0 black);
}
.-recommend .c-summary .title {
	font-size: 1.8rem;
}
.-topic .c-summary .title span {
	padding: .2em 0;
	background: black;
}
.c-summary .category {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 4px;
	line-height: 1.2;
}
.c-summary .category dt {
	position: absolute;
	clip: rect(0 0 0 0);
	overflow: hidden;
	width: 1px;
	height: 1px;
}
.-topic .c-summary .category dt {
	border-color: currentcolor;
}
.c-summary .category dd {
	display: flex;
	flex-wrap: wrap;
	margin: .2em 0;
	font-size: 1.1rem;
	font-weight: 500;
}
.c-summary .category a {
	z-index: 1;
	position: relative;
}
.c-summary .visuallyhidden ~ dd {
	margin-top: 0;
}
.c-summary .category .tags {
	margin-left: -.5em;
}
.c-summary .category .cat {
	margin-right: .8em;
	padding: .2em .6em .1em;
	border: 1px solid #b1b1b1;
	color: black;
	font-size: 1rem;
	background: white;
}
.c-summary .category .tag {
	padding: .1em .5em;
	color: #848484;
}
.-topic .c-summary .category .tag {
	color: #e7e7e7;
}
.-topic .c-summary::before {
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to top, rgba(0,0,0,.8), rgba(118,118,118,0));
}
.c-summary .status {
	display: inline-block;
	padding: .2em 1em .1em;
	color: white;
	font-size: 1rem;
	line-height: 1.4;
	font-weight: 700;
	background: black;
}
.c-summary .status.-close {
	padding: 0;
	color: #848484;
	font-size: 1.1rem;
	font-weight: 500;
	background: none;
}
@media (hover: hover) {
	.c-summary .category a {
		transition: opacity .4s;
	}
	.c-summary .category a:hover {
		opacity: .5;
		transition-duration: .2s;
	}
}
@media screen and (max-width: 767px) {
	.c-summary {
		margin-top: .2em;
	}
}
@media screen and (max-width: 479px) {
	.-recommend .c-summary .title {
		font-size: 1.4rem;
	}
}

/* タグ一覧 */
.c-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}
.tag_item {
	position: relative;
	flex-basis: calc(25% - 96px / 4);
}
.tag_item::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to top, rgba(0,0,0,.8), rgba(118,118,118,0));
}
.tag_item .link {
	display: grid;
	place-items: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	color: white;
	font-size: 1.8rem;
	font-weight: 700;
}
.tag_item img {
	aspect-ratio: 77 / 38;
	object-fit: cover;
}
@media screen and (max-width: 767px) {
	.c-tags {
		gap: 20px;
	}
	.tag_item {
		flex-basis: calc(25% - 60px / 4);
	}
}
@media screen and (max-width: 767px) {
	.tag_item {
		flex-basis: calc(50% - 10px);
	}
	.tag_item .link {
		font-size: calc(13vw / 4.8);
	}
}
@media screen and (max-width: 479px) {
	.tag_item .link {
		font-size: 1.3rem;
	}
}

/* タグクラウド */
.c-tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.c-tagcloud .cat,
.c-tagcloud .tag {
	padding: .4em 1em;
	border: 1px solid #b1b1b1;
	font-size: 1.2rem;
	line-height: 1.2;
}
.c-tagcloud .tag {
	border-radius: 2em;
}

/* ニュース一覧 */
.c-newslist {
	text-align: left;
}
.c-title + .c-newslist {
	margin-top: 24px;
}
.news_item {
	position: relative;
	padding: 40px;
	border-bottom: 1px solid #c4c4c4;
}
.news_item:first-child {
	border-top: 1px solid #c4c4c4;
}
.news_item .link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.news_item .date {
	font-size: 1.4rem;
	font-family: "Kanit", sans-serif;
	font-weight: 700;
	letter-spacing: .1em;
}
.news_item .category {
	font-size: .9rem;
}
.news_item .category .cat {
	display: inline-block;
	min-width: 7.7em;
	padding: .4em 1em;
	border: .5px solid currentcolor;
	line-height: 1.2;
	text-align: center;
}
.news_item .title {
	font-size: 1.2rem;
	font-weight: 400;
}
@media screen and (min-width: 768px) {
	.news_item {
		display: grid;
		grid-template: repeat(2, 1fr) / 9em auto;
	}
	.news_item .date {
		grid-area: 1 / 1 / 2 / 2;
		align-self: flex-end;
	}
	.news_item .category {
		grid-area: 2 / 1 / 3 / 2;
	}
	.news_item .title {
		grid-area: 1 / 2 / 3 / 3;
		align-self: center;
	}
}
@media screen and (max-width: 767px) {
	.news_item {
		padding: 24px;
	}
	.news_item .date,
	.news_item .category {
		display: inline-block;
		vertical-align: middle;
	}
	.news_item .date {
		margin-right: .5em;
	}
	.news_item .title {
		display: block;
		line-height: 1.6;
	}
}
@media screen and (max-width: 479px) {
	.news_item {
		padding: 24px 0;
	}
}

/* バナー一覧 */
@media screen and (min-width: 480px) {
	.c-bannerlist {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}
@media screen and (min-width: 768px) {
	.c-bannerlist {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media screen and (min-width: 1024px) {
	.c-bannerlist {
		gap: 40px;
	}
}
@media screen and (max-width: 479px) {
	.c-bannerlist {
		display: flex;
		flex-direction: column;
	}
	.banner_item:nth-child(n+2) {
		margin-top: 20px;
	}
}
@media (hover: hover) {
	.banner_item a {
		transition: opacity .4s;
	}
	.banner_item a:hover {
		opacity: .5;
		transition-duration: .2s;
	}
}


/**
 * クリエイターズ一覧
 * ---------------------------------------- */
.c-creators {
	position: relative;
}
.c-creators .creator {
	width: 124px;
	margin-top: 7px;
	margin-right: 32px;
	transition: opacity .3s;
}
.c-creators .slide:not(.is-active) {
	opacity: .2;
}
.c-creators .creator a {
	display: block;
}
.c-creators .creator.-soon .photo {
	border-radius: 124px;
}
.c-creators .creator .photo {
	width: 124px;
	height: 124px;
	-webkit-mask-image: url(../img/circle.svg);
	-webkit-mask-size: 100% 100%;
	mask-image: url(../img/circle.svg);
	mask-size: 100% 100%;
}
.c-creators .creator .photo img {
	backface-visibility: hidden;
}
.c-creators .creator .text {
	margin: .7em -1.5em 0;
	line-height: 1.5;
}
.c-creators .creator .name {
	font-size: 1.8rem;
}
.c-creators .creator .title {
	font-size: 1.3rem;
}
.c-creators .creator .job,
.c-creators .creator .credit {
	font-size: 1.1rem;
}
.c-creators .creator.-soon .photo {
	position: relative;
}
.page-home .c-creators .creator.-soon .photo {
	background: #484848;
}
.c-creators .creator.-soon .photo::before,
.c-creators .creator.-soon .photo::after {
	z-index: 1;
	position: absolute;
	left: 0;
}
.c-creators .creator.-soon .photo::before {
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,.8);
}
.c-creators .creator.-soon .photo::after {
	content: "coming soon";
	top: calc(50% - .5em);
	width: 100%;
	color: white;
	font-size: 1.4rem;
	line-height: 1;
	font-weight: 700;
	text-align: center;
}
.c-creators .link {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-bottom: 100%;
}
.c-creators .link::after {
	content: "";
	position: absolute;
	top: -7px;
	right: -7px;
	bottom: -7px;
	left: -7px;
	border: 3px solid #d1b866;
	border-radius: 50%;
	opacity: 0;
}
.c-creators.is-drag .link {
	pointer-events: none;
}
@media (hover: hover) {
	.c-creators .c-arrows {
		border-color: white;
	}
	.c-creators .c-arrows:hover {
		color: black;
	}
	.c-creators .c-arrows::before {
		background: white;
	}
	.c-creators .link::after {
		transition: opacity .4s;
	}
	.c-creators .link:hover::after {
		opacity: 1;
		transition-duration: .2s;
	}
}
@media screen and (min-width: 768px) {
	.c-creators::before,
	.c-creators::after {
		content: "";
		z-index: 1;
		position: absolute;
		top: 0;
		bottom: 0;
		width: 21%;
		pointer-events: none;
	}
	.c-creators::before {
		left: 0;
		background: linear-gradient(to right, #2c2b2b, rgba(44,43,43,0));
	}
	.c-creators::after {
		right: 0;
		background: linear-gradient(to left, #2c2b2b, rgba(44,43,43,0));
	}
	.c-creators .c-arrows {
		z-index: 2;
		position: absolute;
		top: calc(124px / 2 - 8px);
	}
	.c-creators .c-arrows.-prev {
		left: 0;
	}
	.c-creators .c-arrows.-next {
		right: 0;
	}
}
@media screen and (max-width: 767px) {
	.c-creators {
		margin-right: -32px;
		margin-left: -32px;
	}
	.c-creators .c-arrows {
		display: none;
	}
	.c-creators .link::after {
		transition: opacity .4s;
	}
	.c-creators .is-selected .link::after {
		opacity: 1;
		transition-duration: .2s;
	}
}
@media screen and (max-width: 479px) {
	.c-creators {
		margin-right: -20px;
		margin-left: -20px;
	}
}


/**
 * 検索窓
 * ---------------------------------------- */
.c-search {
	position: relative;
	color: black;
}
.search_icon {
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.5;
	pointer-events: none;
}
.c-search .search_icon {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 20px;
	height: 20px;
}
.c-search .search_input {
	width: 13em;
	height: 48px;
	padding: 0 14px 0 48px;
	border: 0;
	border-radius: 48px;
	background: #f1f1f1;
}
.c-search .search_input::placeholder {
	color: #b1b1b1;
	font-size: 1.1rem;
}
.c-search .search_input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	cursor: pointer;
	width: 12px;
	height: 12px;
	background: url(../img/ico_cancel.svg) center / 12px 12px no-repeat;
}


/**
 * 動画 UI
 * ---------------------------------------- */
.c-video {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 100%;
	background: #3b3b3b;
}
.main_visual.-vertical,
.-vertical .c-video {
	background: transparent;
}
.c-video .wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	margin: 0;
	min-height: 100%;
}
.-vertical .c-video .wrap {
	width: 31.640625vw;
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
	.-vertical .visual_video.-creators {
		height: 177.777vw;
	}
	.-vertical .c-video .wrap {
		width: 100vw;
	}
	.hasScrollbar .-vertical .visual_video.-creators {
		height: calc(177.777vw - var(--scroll-bar-width) * 1.77777);
	}
	.hasScrollbar .-vertical .c-video .wrap {
		width: calc(100vw - var(--scroll-bar-width));
	}
}
.c-video .cover,
.c-video .poster,
.c-video .poster img,
.c-video .poster::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.c-video .wrap img,
.c-video .poster img,
.c-video .wrap iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	object-position: center top;
}
.c-video .wrap img,
.c-video .poster img {
	object-fit: cover;
}
.c-video .wrap video {
	width: 100%;
	height: 100%;
}
.c-video .poster .blur {
	filter: blur(10px);
	margin: -12px 0 0 -12px;
	max-width: none;
	width: calc(100% + 24px);
	height: calc(100% + 24px);
}

.c-video .wrap .c-yt {
	position: relative;
	/*aspect-ratio: 16 / 9;*/
	width: 100%;
	height: 100%;
}
.c-video .wrap .c-yt.-mb {
	/*aspect-ratio: 9 / 16;*/
}
.c-video .wrap .spacer {
	position: relative;
	width: 100%;
	height: auto;
}
.c-video .wrap .spacer + .c-yt {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.c-video .cover {
	background: rgba(0,0,0,.2);
}
.c-video .poster {
	transition: opacity .3s;
}
.c-video .wrap + .poster {
	cursor: pointer;
}
.c-video.has-controls.is-playing .poster {
	pointer-events: none;
}
.c-video.is-playing .poster {
	opacity: 0;
}
.c-video .poster::after {
	content: "";
	background: rgba(0,0,0,.2);
}
.c-video .play {
	pointer-events: none;
	z-index: 1;
	position: absolute;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 40px;
	color: transparent;
	line-height: 0;
	background: #f9434e;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.c-video .play svg {
	fill: white;
	width: 20px;
	height: 20px;
}
@media (hover: hover) {
	.c-video .play {
		transition: background .3s, transform .3s cubic-bezier(.3,1,.7,1);
	}
	.c-video .poster::after,
	.lineup_item a + .thumb .poster::after {
		transition: background .3s;
	}
	.c-video:hover .play {
		background: #ff7070;
		transform: scale(1.2);
	}
	.c-video:hover .poster::after,
	.lineup_item a:hover + .thumb .poster::after {
		background: rgba(0,0,0,.1);
	}
}
@media screen and (max-width: 767px) {
	.c-video .play {
		top: calc(50% - 20px);
		left: calc(50% - 20px);
		width: 40px;
		height: 40px;
	}
	.c-video .play svg {
		width: 12px;
		height: 12px;
	}
}

/* 一覧内動画 */
.lineup_item .c-video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #e5e5e5;
}
.lineup_item .c-video .wrap {
	height: auto;
	min-height: 0;
	padding-bottom: 56.25%;
}
.lineup_item .c-video .poster {
	display: flex;
	align-items: center;
}
.lineup_item .c-video.-dummy img {
	height: auto;
	position: relative;
}
.lineup_item .c-video .play {
	top: calc(50% - 24px);
	left: calc(50% - 24px);
	width: 48px;
	height: 48px;
}
.lineup_item .c-video .play svg {
	width: 16px;
	height: 16px;
}
@media screen and (max-width: 767px) {
	.lineup_item .c-video .play {
		top: calc(50% - 16px);
		left: calc(50% - 16px);
		width: 32px;
		height: 32px;
	}
	.lineup_item .c-video .play svg {
		width: 10px;
		height: 10px;
	}
	.lineup_item.-pickup .c-video .play {
		top: calc(50% - 32px);
		left: calc(50% - 32px);
		width: 64px;
		height: 64px;
	}
	.lineup_item.-pickup .c-video .play svg {
		width: 20px;
		height: 20px;
	}
}

/**
 * SNS から投稿するデッキ
 * ---------------------------------------- */
.c-snsdeck {
	margin-top: 40px;
}
.c-snsdeck li:nth-child(n+2) {
	margin-top: 16px;
}
.c-snsdeck a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 64px;
	color: white;
	font-size: 1.4rem;
	background: #2c2b2b;
}
.c-snsdeck img {
	flex-basis: 26px;
}
.c-snsdeck .t {
	flex-basis: 12em;
}

/**
 * インラインフレーム
 * ---------------------------------------- */
.c-scrollcontainer {
	overflow: auto;
	max-height: 360px;
	border: 8px solid #f5f5f5;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	background: #f5f5f5;
}
.c-scrollcontainer::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
.c-scrollcontainer::-webkit-scrollbar-thumb {
	box-shadow: none;
	background: #adadad;
}
.c-scrollcontainer::-webkit-scrollbar-track {
	background: #d7d7d7;
}
.c-scrollcontainer .scroll_inner {
	padding: 24px;
}

/**
 * 規約
 * ---------------------------------------- */
.c-rules {
	text-align: left;
}
.c-rules dt {
	font-weight: 700;
}
.c-rules dd + dt {
	margin-top: 2em;
}
.c-rules dd {
	font-size: 1.4rem;
}

/**
 * Produced by / 関連プロジェクト
 * ---------------------------------------- */
.p-footerlink {
	max-width: 1080px;
	margin: 0 auto;
	padding: 96px 0;
}
.c-footerlink {
	max-width: 424px;
	margin: 0 auto;
	text-align: center;
}
.footerlink_label {
	font-size: 2rem;
	font-weight: 700;
}
.footerlink_item + .footerlink_label {
	margin-top: 32px;
}
.footerlink_item {
	margin-top: 24px;
}
.footerlink_item a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 28px;
}
.footerlink_item .thumb {
	flex-basis: 132px;
}
.footerlink_item .text {
	flex-basis: calc(100% - 132px - 28px);
	text-align: left;
}
.footerlink_item .lead {
	display: inline-block;
	margin-top: 1em;
	font-size: 1.2rem;
	line-height: 1.5;
}
@media screen and (max-width: 767px) {
	.p-footerlink {
		padding: 48px 0;
	}
	.c-footerlink {
		max-width: 304px;
	}
	.footerlink_item a {
		gap: 0 16px;
	}
	.footerlink_item .thumb {
		flex-basis: 105px;
	}
	.footerlink_item .text {
		flex-basis: calc(100% - 105px - 16px);
	}
	.footerlink_item .logo svg {
		width: 100%;
		max-width: 180px;
		height: auto;
	}
	.footerlink_item.-dolive .logo svg {
		width: 60%;
		max-width: 110px;
	}
}
@media screen and (max-width: 479px) {
	.footerlink_item + .footerlink_label {
		margin-top: 24px;
	}
	.footerlink_item {
		margin-top: 12px;
	}
	.footerlink_item .thumb {
		flex-basis: 80px;
		min-width: 80px;
	}
	.footerlink_item .text {
		flex-basis: calc(100% - 80px - 16px);
	}
}

/**
 * コンテンツポリシー
 * ---------------------------------------- */
.page-privacy-policy .page_title,
.page-contents-policy .page_title,
.page-terms .page_title {
	text-align: center;
}
.page-privacy-policy .contents_main,
.page-contents-policy .contents_main,
.page-terms .contents_main {
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 160px;
}
.page-privacy-policy .main_section,
.page-contents-policy .main_section,
.page-terms .main_section {
	text-align: left;
}
.page-privacy-policy h2,
.page-contents-policy h2,
.page-terms h2 {
	margin-top: 80px;
	font-size: 2.6rem;
}
.page-privacy-policy h3,
.page-contents-policy h3,
.page-terms h3 {
	margin-top: 32px;
}
.page-privacy-policy h2 + *,
.page-contents-policy h2 + *,
.page-terms h2 + * {
	margin-top: 24px;
}
.page-privacy-policy li,
.page-contents-policy li,
.page-terms li {
	font-weight: 400;
}

/* 段落の頭にドット */
.c-dot {
	padding-left: 32px;
	text-indent: -16px;
}
.c-dot * {
	text-indent: 0;
}
.c-dot::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 6px;
	margin-right: 10px;
	background: currentcolor;
}

/* ドット一覧 */
.c-dotlist {
	margin-top: 1em;
}
.c-dotlist > li {
	padding-left: 32px;
	text-indent: -16px;
}
.c-dotlist > li * {
	text-indent: 0;
}
.c-dotlist > li::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 6px;
	margin-right: 10px;
	background: currentcolor;
}

/* 数字の一覧 */
.c-numlist > li,
.c-dotlist ol > li {
	counter-increment: num;
	padding-left: 2.5em;
	text-indent: -2.5em;
}
.c-numlist > li *,
.c-dotlist ol > li * {
	text-indent: 0;
}
.c-numlist > li::before,
.c-dotlist ol > li::before {
	content: "（"counter(num)"）";
}


/**
 * wp-block
 * ---------------------------------------- */
.wp-block-image,
.wp-block-galler,
.wp-block-columns {
	margin: 40px 0 0;
}
.wp-block-columns .wp-block-embed {
	margin-bottom: 0;
}
.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}
.wp-embed-aspect-9-16 .wp-block-embed__wrapper,
.wp-embed-aspect-16-9.v .wp-block-embed__wrapper {
	aspect-ratio: 9 / 16;
}
.wp-block-embed__wrapper iframe {
	width: 100%;
	height: 100%;
}


/**
 * シンプルスライドショー
 * ---------------------------------------- */
.js-slideshow img {
	opacity: 0;
}
.js-slideshow .is-active {
	opacity: 1;
}
.js-slideshow .is-anim {
	transition: opacity .6s;
}
.js-slideshow .is-anim:not(.is-active) {
	transition-delay: .3s;
}


/**
 * TEXT Copy
 * ---------------------------------------- */
.js-copy {
	cursor: pointer;
	position: relative;
}
.js-copy .ico {
	pointer-events: none;
	color: inherit;
}
.js-copy.is-copyed {
	pointer-events: none;
}
.js-copy.is-copyed .copy_msg {
	display: grid;
	place-items: center;
	z-index: 1;
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	max-width: 14em;
	min-height: 2.4em;
	padding: .5em 1em;
	border-radius: 4px;
	color: #373039;
	font-size: 10px;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	background: #eeeff1;
	transform: translateX(-50%);
}
@-moz-document url-prefix() {
	.js-copy.is-copyed .copy_msg {
		white-space: normal;
	}
}
.js-copy.is-copyed .copy_msg::after {
	content: "";
	position: absolute;
	top: calc(100% - 1px);
	left: calc(50% - 4px);
	border-width: 8px 4px 0;
	border-style: solid;
	border-color: #fff0;
	border-top-color: #eeeff1;
}
.js-copy.is-copyed .copy_msg {
	animation: copyed 2s;
}
@keyframes copyed {
	from, to { opacity: 0; }
	10%, 80% { opacity: 1; }
}


/**
 * Utility
 * ---------------------------------------- */
.u-alignr {
	margin-top: 24px;
	text-align: right;
}
.u-mt0 { margin-top: 0 !important; }
.u-mt1 { margin-top: 8px !important; }
.u-mt2 { margin-top: 16px !important; }
.u-mt3 { margin-top: 24px !important; }
.u-mt4 { margin-top: 32px !important; }
.u-mt5 { margin-top: 40px !important; }
.u-mt6 { margin-top: 48px !important; }
.u-mt7 { margin-top: 56px !important; }
.u-mt8 { margin-top: 64px !important; }
.u-mt9 { margin-top: 72px !important; }


/*! Flickity v2.2.2
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}}.flickity-slider[style]{will-change:transform}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}