@charset "utf-8";

/*
************************************************************************
* コンテンツエディタ
************************************************************************
*/
.contents-editor-wraper
{
    display: flex;
    flex-wrap:wrap;
    padding:0 0 1em 0;
}
.contents-editor-wraper > .contents-editor-title
{
    width:100%;
    border-radius:0.5em;
    background-color:#CCCCCC;
    padding: 0.5em 0.5em;
}
.contents-editor-wraper > .contents-editor-title::after
{
    content:"";
    position:absolute;
    top:100%;
    left:1em;

    width:0;
    height:0;

    border:0.5em solid transparent;
    border-top:0.5em solid #CCCCCC;
}
.contents-editor-wraper > .contents-editor-title > .ope
{
    position:absolute;
    top:calc(50% + 0.2em);
    right:0.5em;
    transform:translateY(-50%);
}
.contents-editor-wraper > .contents-editor-header
{
    flex:0 0 100%;
    display: flex;

    padding: 0.5em 0;
    border-bottom:1px dashed #DDDDDD;
}
.contents-editor-wraper > .contents-editor-header > .eyecatch
{
    flex:0 1 auto;
    padding:0.25em;
    align-self: center;
    cursor:pointer;
}
.contents-editor-wraper > .contents-editor-header > .eyecatch > i
{
    font-size:2.0em;
}
.contents-editor-wraper > .contents-editor-header > .title
{
    flex:1 0 auto;
    padding:0.25em 0.25em 0.25em 0.0em;
}
.contents-editor-wraper > .contents-editor-header > .sort
{
    flex:0 1 auto;
    padding:0.25em;
}
.contents-editor-wraper > .contents-editor-header > .remove
{
    flex:0 1 auto;
    padding:0.25em;
}
.contents-editor-wraper > .contents-editor
{
    flex:0 0 100%;
    padding: 1.0em 0;
}

.add-section
{
    padding-top: 1em;
    border-top: 1px solid #CCCCCC;
}

.editor-contents-tile
{
    display: flex;
    flex-wrap: wrap;

    margin:-0.5em;
}
.editor-contents-tile > .editor-contents-tile-item
{
    margin:0.5em;
    flex:0 0 calc(25% - 1em);
}
.editor-contents-tile > .editor-contents-tile-item.editor-contents-tile-item-add
{
    border-radius: 0.5em;
    background-color:#EFEFEF;
    cursor:pointer;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    
}

/* コンテンツエディタ用のフォーム */
input.contents-editor-input,
textarea.contents-editor-input,
div.contents-editor-input
{
	display:block;
	margin-bottom:0.25em;
	
	width:calc(100% - 0.0em);
	border-radius: 0.4em;
	border:0px solid transparent;
	background-color:#EFEFEF;
	padding:0.5em;
	line-height:1.5;
	font-size: 1.4rem;

	height:auto;
}
input.contents-editor-input.no-margin,
textarea.contents-editor-input.no-margin,
div.contents-editor-input.no-margin
{
	margin-bottom:0.0em;
}
textarea.contents-editor-input
{
	min-height:4.0em;
}
div.contents-editor-input
{
    min-height:2.5em;
}
div.contents-editor-input.large
{
    min-height:4.5em;
}

input.contents-editor-input.error,
textarea.contents-editor-input.error
{
	background-color:#FFCCCC;
}
.contents-editor-input-button > div
{
    position:absolute;
    bottom:0.25em;
    right:0.25em;
}
.icon-select
{
    padding:0.25em;
    align-self: center;
    cursor:pointer;
}

/***
 * MVエディタ
 */
.mv-editor
{
    overflow:hidden;

    background-color:#EFEFEF;
}
.mv-editor > .blur
{
	z-index:0;
	position: absolute;
	top: calc(-2 * var(--mv-bg-blur-editor));
	bottom: calc(-2 * var(--mv-bg-blur-editor));
	left: calc(-2 * var(--mv-bg-blur-editor));
	right: calc(-2 * var(--mv-bg-blur-editor));
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image:var(--mv-bg-editor);
	
	-webkit-filter: blur(var(--mv-bg-blur-editor));
	-moz-filter: blur(var(--mv-bg-blur-editor));
	-o-filter: blur(var(--mv-bg-blur-editor));
	-ms-filter: blur(var(--mv-bg-blur-editor));
	filter: blur(var(--mv-bg-blur-editor));
}
.mv-editor > .alpha
{
	z-index:1;
	position: absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	
	background-color:var(--mv-bg-color-editor);
	opacity:var(--mv-bg-alpha-editor);
}
.mv-editor > .mv-wrapper
{
	z-index:2;
	width:100%;
	max-width:1000px;
	
	margin:0 auto;
}
.mv-editor > .mv-wrapper > .mv
{
	width:100%;
	padding-top:56.25%;
	/* padding-top:52.5%; */
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image:var(--mv-image-pc-editor);
}
.mv-editor > .mv-wrapper > .mv > .title-wrapper
{
    display:none;
}
.mv-editor > .mv-wrapper.textMode > .mv
{
	background-image:none;
}
.mv-editor > .mv-wrapper.textMode > .mv > .title-wrapper
{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;

	width:100%;
	height:100%;

	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.mv-editor > .mv-wrapper > .mv > .title-wrapper > .title-frame
{
	padding:2em;
	border-radius: var(--mv-title-frame-radius-editor);
	border:var(--mv-title-frame-size-editor) solid var(--mv-title-frame-color-editor);
	width:80%;
}
.mv-editor > .mv-wrapper > .mv > .title-wrapper > .title-frame > .catch-copy > div,
.mv-editor > .mv-wrapper > .mv > .title-wrapper > .title-frame > .main-title > div,
.mv-editor > .mv-wrapper > .mv > .title-wrapper > .title-frame > .body-copy > div
{
    display:block;
}

/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1200px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:1000px) {
	.mv-editor > .mv-wrapper > .mv
	{
		padding-top:100%;
		background-image:var(--mv-image-sp-editor);
	}
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.mv-editor > .mv-wrapper > .mv
	{
		padding-top:100%;
		background-image:var(--mv-image-sp-editor);
	}
}