@charset "UTF-8";

/*---------------------------------------------------------------------------------------------
Stylesheet - version date 1.0 2017.11.01
BLOCKS SYSTEM [style.css]
---------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
html,body {	height:100%; background-color: #f2f2f2; }
body {
	font-size: 13px;
	font-family:-apple-system,’Lucida Grande’,
‘Helvetica Neue’,’Hiragino Kaku Gothic ProN’,
‘游ゴシック’,’メイリオ’,meiryo,sans-serif;
	line-height: 1.5;
	color: #333;
	-webkit-text-size-adjust:100%;
}
ol,ul,dl {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #ccc;
    margin:1em 0;
    padding:0;
}
input, select { vertical-align:middle; }
img {
    font-size:0;
    line-height: 0;
	vertical-align: top;
	border: 0;
}
a {
    color: #333;
    transition: all 300ms ease-out;
	text-decoration: none;
}
a:hover {
    opacity: 0.8;
    text-decoration: none;
}
.clr { clear: both; }
.clearfix:after {
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	content: " ";
	font-size: 0;
}
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

/*---------------------------------------------------------------------------------------------
  common
---------------------------------------------------------------------------------------------*/
body {
	background-color: #f2f2f2;
}
#js-body-content-height {
    height: inherit;
}
.contentWrapper {
	padding: 15px;
}

section {
	margin-bottom: 20px;
	background-color: #fff;
	border-radius: 6px;
	overflow: hidden;
}
.contentWrapper section:last-child { margin-bottom: 0; }

h2.pageTit {
	display: inline-block;
	width: 100%;
	padding: 16px;
	background-color: #6a6a6a;
	font-size: 18px;
	color: #fff;
}
section h3.editTit {
	font-size: 20px;
	color: #7bc5a2;
	white-space: nowrap;
}
.headdingBox {
	display: flex;
	align-items: center;
	padding: 25px;
}
.headdingBox > p {
	margin-left: 60px;
	font-size: 15px;
}

.dropShadow {
	box-shadow:0px 0px 9px 0px #666;
}

/*---------------------------------------------------------------------------------------------
  admin top
---------------------------------------------------------------------------------------------*/
.private {
	padding: 30px;
	background-color: #fff5f4;
	border: 2px solid #eda3a4;
}

.infoBox {
	display: table;
	width: 100%;
	min-height: 80px;
}
.infoBox h3 {
	display: table-cell;
	width: 130px;
	height: 100%;
	background-color: #7dc4a4;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	vertical-align: middle;
}

.infoBox > .infoList {
	display: table-cell;
	margin-bottom: 0;
	padding-left: 30px;
	vertical-align: middle;
}
.infoBox > .infoList:last-child {	margin-bottom: 0; }
.infoBox > .infoList dl {
	display: flex;
	align-items: center;
	min-height: 38px;
	margin-bottom: 15px;
	font-size: 17px;
}
.infoBox > .infoList dl:last-child { margin-bottom: 0; }
.infoBox > .infoList dl dt {
	font-weight: normal;
}
.infoBox > .infoList dl dt span.infoLabel {
	margin-left: 30px;	
	padding: 8px 16px;
	border: 2px solid #e4e4e4;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
}
.infoBox > .infoList dl dd {
	padding-left: 30px;
}

/* siite list */
.siteList {
	display: flex;
	align-items: center;
	padding: 10px 20px;
	background-color: transparent;
	border-radius: 0;
}
.siteList dl { margin-right: 12px; }
.siteList dl:last-child { marign-right: 0; }
.siteList dl dt {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: normal;
}
.siteList dl dt span { margin-right: 3px; color: #7bc5a2; }
.siteList dl dd a {
	display: block;
	border: 4px solid transparent;
}
.siteList dl dd a:hover
, .siteList dl dd a.active {
	border-color: #fd6769;
	opacity: 1;
}
.siteList dl dd a img {
	width: 170px;
	height: 135px;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}

.siteList dl.pageAdd { margin-top: 22px; }
.siteList dl.pageAdd dd {
	width: 175px;
	height: 135px;
	background-color: #fff;
}
.siteList dl.pageAdd dd a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.siteList dl.pageAdd dd a span {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	line-height: 42px;
	border-radius: 20px;
	background-color: #7bc5a2;
	color: #fff;
	text-align: center;
}

/* control panel */
.controlPanel {
	padding: 15px;
}
.controlPanel dl {
	display: flex;
	align-items: center;
	width: 100%;
}
.controlPanel dl dt {	padding: 25px 10px; }
.controlPanel dl dt .previewBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px 21px 42px 21px;
	background: url(../image/pc.png) no-repeat center center/ contain;
}
.controlPanel dl dt .previewBox img {
	width: 209px;
	height: 132px;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}
.previewBox + a {
	display: block;
	margin-top: 20px;
	color: #3369C3;
	font-weight: norml;
	text-align: center;
	text-decoration: underline;
}
.previewBox + a:hover {
	text-decoration: none;
}
.previewBox + a img.prevIcon {
	width: 18px;
	height: 16px;
	margin-right: 5px;
}

/*
.controlPanel dl dt .previewBox + a {
	display: block;
	margin-top: 20px;
	color: #3369C3;
	font-weight: norml;
	text-align: center;
	text-decoration: underline;
}
.controlPanel dl dt .previewBox + a:hover {
	text-decoration: none;
}
.controlPanel dl dt .previewBox + a img.prevIcon {
	width: 18px;
	height: 16px;
	margin-right: 5px;
}*/
.controlPanel dl dd {
	width: 100%;
}
.controlPanel dl dd ul {
	display: flex;
	align-items: center;
	width: 100%;
	margin-left: 20px;
	padding-right: 10px;
}
.controlPanel dl dd ul li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(25% - 10px);
	min-height: 290px;	
	margin-right: 10px;
	background-color: #f9fbfa;
	border: 1px solid #7dc4a2;
	border-radius: 4px;
}
.controlPanel dl dd ul li:last-child {
	margin-right: 0;
}
.controlPanel dl dd ul li img {
	max-height: 50px;
	margin-bottom: 30px;
}
.controlPanel dl dd ul li h4 {
	margin-bottom: 10px;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.3;
	color: #7dc4a4;
	text-align: center;
}
.controlPanel dl dd ul li p {
	margin-bottom: 25px;
	line-height: 1.4;
	text-align: center;
}
.controlPanel dl dd ul li> .btnWrapper {
	margin-bottom: 0;
}
.controlPanel dl dd ul li> .btnWrapper> .btn-danger {
	padding: 5px 30px;
}
.controlPanel dl dd ul li> .btnWrapper> .btn-danger:hover {
	opacity: 0.6;
}

/* 仕事情報 */
.jobInfo {
	display: flex;
	align-items: center;
	padding: 30px 40px;
}
.jobInfo .btnWrapper {
	margin-bottom: 0;
}
.jobInfo p {
	width: 100%;
	font-size: 15px;
	line-height: 1.7;
	text-align: center;
}
.jobInfo p span {
	display: inline-block;
	margin: 0 3px;
	color: #ff6666;
}

/*---------------------------------------------------------------------------------------------
  contents edit common
---------------------------------------------------------------------------------------------*/

.itemBoxHeader {
	display: flex;
	align-items: center;
	padding: 20px 0 20px 15px;
}
.itemBoxHeader h3 {
	/* display: inline-block; */
	/* height: 40px; */
	margin-right: 30px;
	line-height: 40px;
	color: #7dc4a4;
	font-size: 21px;
	font-weight: bold;
	display: flex;
	min-height: 40px; 
	height: auto;
}
.itemBoxHeader h3::before {
	content: '';
	display: block;
	float: left;
	width: 33px;
	height: 40px;
	margin-right: 25px;
}
.itemBoxHeader h3.sortTitle::before {
	background: url(../image/sortIcon.png) no-repeat center center / contain;
}
.itemBoxHeader h3.mainPanelTitle::before {
	background: url(../image/panelIcon.png) no-repeat center center / contain;
}
.itemBoxHeader h3.colorTitle::before {
	background: url(../image/colorIcon.png) no-repeat center center / contain;
}
.itemBoxHeader p { font-size: 16px; }


/*---------------------------------------------------------------------------------------------
  edit section
---------------------------------------------------------------------------------------------*/
/* 背景画像 */
/* 
.imageSelectBox {
	display: flex;
	align-items: center;
	max-width: 1030px;
	margin: 0 auto;
	padding: 40px 0 0 0;
}
.imageSelectBox>h3.editTit { margin-top: -20px; }
.imageSelectBox .imageSelect {
	width: 100%;
	padding-left: 30px;
}
.imageSelectBox .imageSelectInn {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 25px;
	background-color: #555;
	border-radius: 6px;
	overflow: hidden;
}

.imageSelectBox .imageSelectInn ul.imageList {
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 560px;
	height: 85px;
	overflow-x: scroll;
}
.imageSelectBox .imageSelectInn ul.imageList .photo {
	position: relative;
	width: 85px;
	height: 55px;
	margin-right: 10px;
	cursor: pointer;
	transition: all 300ms 0s ease;
}
.imageSelectBox .imageSelectInn ul.imageList .photo:hover {
	opacity: 0.8;
}
.imageSelectBox .imageSelectInn ul.imageList .photo::after {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.6);
	font-family: FontAwesome;
	content: '\f00c';
	color: #fff;
	font-size: 150%;
	opacity: 0;
	transition: all 300ms 0s ease;
}
.imageSelectBox .imageSelectInn ul.imageList .photo.selected::after {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.6);
	font-family: FontAwesome;
	content: '\f00c';
	color: #fff;
	font-size: 150%;
	opacity: 100;
}
.imageSelectBox .imageSelectInn ul.imageList .photo img {
	width: 85px;
	height: 55px;
	object-fit: cover;
	font-family: 'object-fit: cover;'
}


.imageSelectBox .imageSelectInn ul.imageList .color {
	position: relative;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 300ms 0s ease;
}
.imageSelectBox .imageSelectInn ul.imageList .color.color1 { background-color: #1bbc9b; }
.imageSelectBox .imageSelectInn ul.imageList .color.color2 { background-color: #2dcc70; }
.imageSelectBox .imageSelectInn ul.imageList .color.color3 { background-color: #3598db; }
.imageSelectBox .imageSelectInn ul.imageList .color.color4 { background-color: #9b58b5; }
.imageSelectBox .imageSelectInn ul.imageList .color.color5 { background-color: #f1c40f; }
.imageSelectBox .imageSelectInn ul.imageList .color.color6 { background-color: #f39c11; }
.imageSelectBox .imageSelectInn ul.imageList .color.color7 { background-color: #e84c3d; }
.imageSelectBox .imageSelectInn ul.imageList .color.color8 { background-color: #95a5a5; }
.imageSelectBox .imageSelectInn ul.imageList .color.color9 { background-color: #fff; }
.imageSelectBox .imageSelectInn ul.imageList .color.color10 { background-color: #000; }

.imageSelectBox .imageSelectInn ul.imageList .color:hover {
	opacity: 0.8;
}
.imageSelectBox .imageSelectInn ul.imageList .color::after {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: FontAwesome;
	content: '\f00c';
	color: #fff;
	font-size: 150%;
	opacity: 0;
	transition: all 300ms 0s ease;
}
.imageSelectBox .imageSelectInn ul.imageList .color.selected::after {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: FontAwesome;
	content: '\f00c';
	color: #fff;
	font-size: 150%;
	opacity: 100;
}

.imageSelectBox .imageSelectInn .colorCodeBox {
	width: 220px;
	height: 85px;
	margin: 0 auto;
}
.imageSelectBox .imageSelectInn .colorCodeBox h4 {
	margin-bottom: 20px;
	color: #fff;
	font-size: 20px;
	text-align: center;
}
.imageSelectBox .imageSelectInn .colorCodeBox .selectedColor {
	position: relative;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	background-color: #000;
	border-radius: 4px;
	cursor: pointer;
	transition: all 300ms 0s ease;
}
.imageSelectBox .imageSelectInn .colorCodeBox .form-control {
	width: 100px;
	height: 40px; 
}
.imageSelectBox .imageSelectInn .colorCodeBox .colorSet {
	display: flex;
	align-items: center;
	justify-content: center;
}

.imageSelectBox .imageSelectInn .fileUpload {
	padding: 10px 15px;
	border: 1px dashed #fff;
	text-align: center;
	background: url(../image/uploadIcon.png) no-repeat center 10px / 65px auto;
}
.imageSelectBox .imageSelectInn .fileUpload p {
	color: #fff;
}

.imageSelectBox .imageSelectInn .fileUpload p.drag-drop-info + p {
	margin: 3px auto 5px auto;
	font-size: 10px;
}

a.forList {
	position: absolute;
	top: 32px;
	left: 500px;
	z-index: 30;
	display:flex;
	align-items:  center;
	justify-content: center;
	width: 85px;
	height: calc(100% - 78px);
	background-color: #555;
	font-size: 11px;
	color: #fff;
}
a.forList:hover {
	opacity: 1;
	text-decoration: underline;
}
a.forList .moreIcon {
	position: relative;
	display: block;
	width: 13px;
	height: 13px;
	margin-right: 5px;
	line-height: 13px;
	border-radius: 6.5px;
	background-color: #fff;
	color: #555;
	text-align: center;
} */


/* 背景画像ギャラリー(modal) */
.modal {
	top: 30px;
	transform: translateX(-50%);
	width: calc(100% - 60px);
	margin-left: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	transition: all 300ms 0s ease;
}
.modal-dialog {
	width: auto;
	margin: 0;
	/*background-color: rgba(0,0,0,.8);*/
}
.modal-content {
	background-color: transparent;
	color: #fff;
	border-radius: 0;
}
.modal-backdrop { background-color: #f1f1f1; }
.modal-backdrop.in { opacity: 1; }
.modal-header {
	background-color: rgba(34,34,34,.5);
	border-bottom: 1px solid rgba(85,85,85,0.9);
}
.modal-body {
	height: 640px;
	padding: 25px 75px;
	background-color: rgba(34,34,34,.8);
	overflow-y: auto;
}

.modal-body ul.bgList {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	/* width: 1048px; */
	margin: 0 auto;
}
.modal-body ul.bgList li.bgImage {
	position: relative;
	z-index: 10;
	width: 138px;
	height: 275px;
	margin: 0 44px 40px 0;
	padding: 31px 0 0 9px;
	border: 3px solid transparent;
	border-radius: 26px;
	background: url(../image/iPhone.png) no-repeat center center / contain;
	cursor: pointer;
}

.modal-body ul.bgList li.bgImage.selected::after {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	z-index: 20;
	width: 138px;
	height: 275px;
	border: 3px solid #ff8c89;
	border-radius: 26px;
	background-color: transparent;
}
.modal-body ul.bgList li.bgImage.selected:hover {
	border: 3px solid transparent;
}

.modal-body ul.bgList li.bgImage:hover {
	border: 3px solid #ff8c89;
}
.modal-body ul.bgList li.bgImage:nth-child(6n) {
	margin-right: 0;
}
.modal-body ul.bgList li.bgImage img {
	position: relative;
	z-index: 20;
	width: 115px;
	height: 208px;
	object-fit: cover;
	font-family: 'object-fit: cover;'
}
.modal-body ul.bgList li.bgImage .textBox {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: rgba(34,34,34,.5);
	border-radius: 26px;
	text-align: center;
}
.modal-body ul.bgList li.bgImage .textBox h3 {
	margin-bottom: 10px;
	font-size: 12px;
}
.modal-body ul.bgList li.bgImage .textBox p {
	font-size: 10px;
}
.modal-footer {
	background-color: rgba(34,34,34,.5);
	border-top: 1px solid rgba(85,85,85,0.9);
}

.modal-footer>.btnWrapper {
	margin-bottom: 20px;
}
.modal-footer>.btnWrapper>.btn-default {
	margin-top: 15px;
	padding-left:40px;
	padding-right:40px;
	text-decoration: underline;
}
#bgGallery .modal-dialog {
	width: auto;
	max-width: none;
}

h4.modal-title { font-size: 18px; }
.close {
	color: #fff;
	text-shadow: 0 1px 0 #000;
	opacity: .7;
}

.close:focus, .close:hover {
	color: #fff;
	opacity: 1;
}


/* テキスト編集(modal) */
#textEdit.modal {
	top: 30px;
	transform: translateX(-50%);
	width: 600px;
	margin: 0 auto;
	border: none;
	border-radius: 6px;
	box-shadow: 0 3px 9px rgba(0,0,0,0.5);
	background-color: transparent;
	transition: all 300ms 0s ease;
}
#textEdit .modal-content {
	border: none;
	color: #333;
}
#textEdit .modal-contant {
	background-color: #fff;
	color: #333;
}

#textEdit .modal-header {
	border-bottom: 1px solid #e5e5e5;
	background-color: #fff;
}
#textEdit .modal-body {
	height: auto;
	padding: 20px 15px 5px 15px;
	background-color: #fff;
}
#textEdit .modal-body textarea + textarea {
	margin-top: 15px;
}
#textEdit .modal-footer {
	background-color: #fff;
	border-top: none;
}
#textEdit .modal-footer .btnWrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
#textEdit .modal-footer .btnWrapper .btn-danger {
	padding-left: 40px;
	padding-right: 40px;
}
#textEdit .modal-footer>.btnWrapper>.btn-default {
	margin: 0 0 0 20px;
	color: #fff;
	background-color: #b4b4b4;
	text-decoration: none;
}
#textEdit .close {
	color: inherit;
	text-shadow: inherit;
}
.mainPanelWrapper .modal-backdrop {
	background-color: #7F7F7F;
}

/* パーツプレビュー */
.innerSection {
	width: calc(100% - 20px);
	margin: 10px auto 0 auto;
	border-radius: 6px 6px 0 0;
}
p.notes {
	margin: 10px 0 0 0;
	font-size: 12px;
}

/*---------------------------------------------------------------------------------------------
  contents sort
---------------------------------------------------------------------------------------------*/

.contentList {
	padding: 25px 0;
	text-align: center;
	width: 900px; 
	margin: auto;
}
.contentList .sortList {
	position: relative;
	display: flex;
	align-items: center;
	width: 860px;
	margin: 0 auto;
}
.contentList .sortList .items {
	width: 100%;
	height: 55px;
	margin-bottom: 15px;
	line-height: 55px;
	border-radius: 6px;
	border: 2px solid #7dc4a4;
	background-color: #f9fbfa;
	cursor: move;
}
.contentList .sortList:not(.disabled) .items:hover {
	background-color: #e1ede7;
}
.contentList .sortList.disabled .items {
	cursor: default;
}
.contentList .sortList.disabled .items h3 {
	text-indent: -44px;
}
.contentList .sortList.disabled .sortBtn {
	display: none;
}
.contentList .sortList .items h3 {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 55px;
	line-height: 55px;
	font-size: 21px;
	font-weight: bold;
	color: #7dc4a4;
}
.contentList .sortList:not(.disabled) .items h3::after {
	position: absolute;
	bottom: 15px;
	right: 15px;
	z-index: 20;
	content:'';
	display: block;
	width: 25px;
	height: 30px;
	/* background: url(../image/hamburgerIcon.png) no-repeat center center / contain; */
	background: url(../image/sort_item_icon.png) no-repeat center center / contain; 

}
.contentList .sortList .sortBtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 55px;
	margin-bottom: 15px;
}
.contentList .sortList .sortBtn a {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	color: #fff;
	font-size: 10px;
	text-align: center;
	text-indent: 1px;
}
.contentList .sortList .sortBtn a.upBtn {
	margin-bottom: 5px;
	line-height: 20px;
	background-color: #7dc4a4;
}
.contentList .sortList .sortBtn a.downBtn {
	line-height: 22px;
	background-color: #fa6868;
}

/*---------------------------------------------------------------------------------------------
  main panel
---------------------------------------------------------------------------------------------*/
.contentPanel { 
	max-width: 860px;
	margin: 0 auto;
}
.contentPanel .imageSelect { padding-left: 0; }

.mainPanel {
	display: flex;
	margin-top: 15px;
	border-radius: 0;
}
.mainPanel .mainPanelInn {
	width: 620px;
	height: 400px;
	min-height: initial;
}

.mainPanel .mainPanelInn .mainImageBox {
	min-height: 435px;
}

.mainPanel .mainPanelInn .copyBox {
	background-color: transparent;
}
.mainPanel .mainPanelInn .copyBox2 {
	position: absolute;
	bottom: 30px;
	background-color: transparent;
}
.mainPreviewBox {
	width: 210px;
	margin-left: 30px;
}
.mainPreviewBox .bgImage {
	position: relative;
	z-index: 10;
	width: 163px;
	height: 333px;
	margin: 0 auto 30px auto;
	padding: 38px 0 0 11px;
	border: 1px solid #605f5f;
	border-radius: 26px;
	background: url(../image/iPhone.png) no-repeat center center / contain;
}
.mainPreviewBox .bgImage img {
	position: relative;
	z-index: 20;
	width: 139px;
	height: 255px;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}
.mainPreviewBox .bgImage .textBox {
	position: absolute;
	top: 38px;
	left: 11px;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 139px;
	height: 255px;
	background-color: rgba(34,34,34,.5);
	color: #fff;
	text-align: center;
	background-position: center
}
.mainPreviewBox .bgImage .textBox h3 {
	margin-bottom: 10px;
	font-size: 12px;
}
.mainPreviewBox .bgImage .textBox p {
	font-size: 10px;
}
.mainPreviewBox .preview-container.sp {
	overflow: hidden;
}

/*---------------------------------------------------------------------------------------------
  clickable
---------------------------------------------------------------------------------------------*/
.clickable {
	position: relative;
	/* z-index: 10; */
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	border-width: 1px;
	border-style: dotted;
	cursor: pointer;
	transition: all 300ms 0s ease;
	min-height: 16px;
}
/* title用 */
.clickable.title {
	min-width: 150px;
	min-height: 16px;
	font-size: 10px;
	border-color: #fff;
	display: inline-block;
	padding: 4px 0;
}
.clickable.message {
	min-width:980px;
	min-height:65px;
	font-size: 12px;
}
.clickable.title:hover {
	background-color: rgba(255,255,255,0.3);
}

.clickable.colorWhite {
	border-color: #fff;
	color: #fff;
}

.clickable.colorWhite:hover {
	background-color: rgba(85,85,85,.8);
}
.clickable.colorBlack {
	border-color: #000;
	color: #333;
}
.mainPanel .clickable.colorBlack * {
	color: #fff;
}
.clickable.colorBlack:hover {
	background-color: rgba(85,85,85,.25);
}

/* 画像用 */
.clickable.image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 2px;
	border-color: #000;
}
.clickable.image span {
	display: none;
	transition: all 300ms 0s ease;
}
.clickable.image:hover {
	background-color: rgba(85,85,85,.8);
	font-weight: bold;
	text-align: center;
}
.clickable.image:hover span {
	display: block;
	color: #fff;
}
.clickable.image:hover span h3 {
	font-size: 150%;
	font-weight: bold;
	line-height: 2;
}
.clickable.image:hover span p {
	margin-top: 30px;
	font-size: 130%;
	font-weight: normal;
	line-height: 2.5;
}
.clickable.image:hover::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	content:'';
}

/* アイコン用 */
.clickable.icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 2px;
	border-color: #000;
}

.clickable.icon:hover {
	background-color: rgba(241,148,138,.2);
	font-weight: bold;
	text-align: center;
}

.clickable::after {
	position: absolute;
	top: -12.5px;
	right: -12.5px;
	z-index: 20;
	display: block;
	width: 25px;
	height: 25px;
	line-height: 25px;
	background-color: #7bc5a2;
	border-radius: 12.5px;
	font-family: FontAwesome;
	font-size: 15px;
	content: '\f040';
	color: #fff;
	text-align: center;
	z-index: 0;
}

.clickable.wideImage::after {
	top: 12.5px;
	right: 12.5px;
}

/* icon変更時 */
.businessList dl dt { cursor: pointer; }

/*---------------------------------------------------------------------------------------------
  template
---------------------------------------------------------------------------------------------*/
.templateList {
	max-width: 1030px;
	margin: 20px auto 0 auto;
}
.templateList ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-left: -30px;
	margin-right: -30px;
}
.templateList ul li {
	position: relative;
	z-index: 10;
	/* width: calc(50% - 15px); */
	width: 500px;
	margin: 0 15px 30px 15px; 
	/* margin: 0;
	margin-bottom: 30px; */
	padding: 20px;
	background-color: #f1f1f1;
	cursor: pointer;
}
/* .templateList ul li:nth-child(even) {
	margin-right: 0;
} */
.templateList ul li h3 {
	margin-bottom: 10px;
	font-size: 16px;
	color: #7bc5a2;
}
.templateList ul li .templateThumbnail {
	display: flex;
	align-items: center;
	justify-content: center;
	/* height: 100%; */
}
.templateList ul li .templateThumbnail img {
	max-width: 100%;
}
.templateList ul li .selector {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.6);
	opacity: 0;
	transition: all 300ms 0s ease;
}
.templateList ul li .selector .btnWrapper {
	margin: 0;
}
.templateList ul li:hover .selector {
	opacity: 100;
}

/*---------------------------------------------------------------------------------------------
  button
---------------------------------------------------------------------------------------------*/
.btnWrapper {
	clear: both;
	margin-bottom: 50px;
	text-align: center;
}
.btnWrapper>.btn-danger {
	padding-left: 60px;
	padding-right: 60px;
	background-color: #ff6666;
	border-color: #ff6666;
}
.btnWrapper>.btn-link {
	color: #333;
	text-decoration: underline;
}
.btnWrapper>.btn-link:hover {
	text-decoration: none;
}
.btn-link.bgChange {
	position: absolute;
	top: 15px;
	right: 15px;
	display: block;
	color: #7bc5a2;
	font-weight: bold;
	text-decoration: underline;
}
.btn-link.bgChange:hover {
	text-decoration: none;
}

.imageSelectBox .imageSelectInn .fileUpload {
	margin-left: 20px;
}

.drag-drop-inside p + p {
	display: none;
}

.imageSelectBox .imageSelectInn .fileUpload {
	min-width: 196px;
}

.businessList dl {
	border: 1px solid #f1948a;
}
.businessList dl dt {
	background-color: rgba(241,148,138,.5);
	color: #fff !important;
	transition: all 300ms 0s ease;
}
.editTit p {
	color: #393939;
}
.pageTit a,
.pageTit span {
	color: #fff;
	opacity: 1;
}
.pageTit a:hover {
	opacity: 0.5;
}
.section-bottom-btn-box {
	padding-top: 20px;
}