@charset "UTF-8";

/*
======== table of content. ===============

summary : 「エディター（表示側）」設定

- text editor setting
  - image float

==========================================
*/

/*----------------------------------------
text editor setting
------------------------------------------*/

.editBox {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.editBox::after {
	clear: both;
}

.editBox h1,
.editBox h2,
.editBox h3,
.editBox h4,
.editBox h5,
.editBox h6,
.editBox p,
.editBox dt,
.editBox dd,
.editBox li {
	font-size: 100%;
	font-weight: normal;
}

.editBox a:link {color: #e64678;text-decoration:underline !important;}
.editBox a:visited {color: #e64678;text-decoration:underline !important;}
.editBox a:active {color: #e64678;text-decoration:underline !important;}
.editBox a:hover {color: #e64678;text-decoration:underline !important;}

.editBox h4{
	font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", sans-serif;
	font-size: 2.1rem;
	font-weight: bold;
	line-height: 1.4;
}

.editBox h5{
	font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", sans-serif;
	font-size: 1.9rem;
	font-weight: bold;
	line-height: 1.4;
}

.editBox h6{
	font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", sans-serif;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
}

.editBox small{
	font-size: 1.4rem;
	font-weight: normal;
}

.editBox p {
	clear: both;
}

.editBox blockquote {
	background-color: #fff9bb;
	padding: 1.5em 1.5em 1em;
	position: relative;
	border: 2px solid #fbd6a0;
	margin-right: 1em;
	margin-left: 1em;
}

.editBox blockquote:before {
	content: "";
	position: absolute;
	left: 5px;
	top: -8px;
	width: 30px;
	height: 20px;
	background: url(../../common/img/common/bq_start.png) no-repeat left top;
	background-size: 30px auto;
}

.editBox blockquote:after {
	content: "";
	position: absolute;
	right: 5px;
	bottom: -8px;
	width: 30px;
	height: 20px;
	background: url(../../common/img/common/bq_end.png) no-repeat right bottom;
	background-size: 30px auto;
}

.editBox del { color: #282828; }

.editBox sup {
	font-size: 75.5%;
	vertical-align: top;
	position: relative;
	top: -0.1em;
}

.editBox sub {
	font-size: 75.5%;
	vertical-align: bottom;
	position: relative;
	top: 0.1em;
}

.editBox ol {
	padding: 0 0 0 1.5em;
	list-style: decimal;
}

.editBox ul {
	padding: 0;
}

.editBox ul li {
	padding: 0 0 0 1.5em;
	position: relative;
}

.editBox ul li::before {
	content: "";
	width: .65em;
	height: .65em;
	display: block;
	position: absolute;
	top: -0.1em;
	left: 0;
}

.editBox ul li:nth-child(4n+1)::before {
	width: .6em;
	height: .6em;
	margin: .55em 0 0 .3em;
	background: #ffba00;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.editBox ul li:nth-child(4n+2)::before {
	width: .8em;
	height: .8em;
	margin: .5em 0 0 .15em;
	border-radius: 50%;
	background: #ffba00;
}

.editBox ul li:nth-child(4n+3)::before {
	width: .8em;
	height: .75em;
	margin: .6em 0 0 .15em;
	border-bottom: .75em solid #ffba00;
	border-right: .4em solid transparent;
	border-left: .4em solid transparent;
}

.editBox ul li:nth-child(4n+4)::before {
	margin: .65em 0 0 .25em;
	background: #ffba00;
}

.editBox hr {
	clear: both;
	height: 1px;
	border: none;
	border-bottom: 1px dashed #69412d;
}

.editBox table {
	max-width: 100%;
	padding: 0;
	border-collapse: collapse;
}

.editBox table th,
.editBox table td {
	padding: 5px;
	border: 1px solid #69412d;
}

.editBox * + h1,
.editBox * + h2,
.editBox * + h3,
.editBox * + h4,
.editBox * + h5,
.editBox * + h6,
.editBox * + p,
.editBox * + dl,
.editBox * + ol,
.editBox * + ul,
.editBox * + table,
.editBox * + blockquote,
.editBox * + .mov_box {
	margin-top: 30px;
}

.editBox * + hr,
.editBox hr + * {
	margin-top: 40px;
}

.editBox img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.editBox .mov_box {
	padding-top: 56.25%;
	position: relative;
	overflow: hidden;
	-webkit-overflow-scrolling:touch;
}

.editBox .mov_box iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

/*--- image float -----------------------------------*/

.editBox img.alignright { clear:both; margin:0 0 25px 25px; float:right; width:auto; vertical-align:bottom; display:block; }
.editBox img.alignleft { clear:both; margin:0 25px 25px 0; float:left; width:auto; vertical-align:bottom; display:block; }
.editBox img.aligncenter { clear:both; margin:0 auto 25px; display:block; vertical-align:bottom; display:block; }

.editBox img.alignright::after,
.editBox img.alignleft::after,
.editBox img.aligncenter::after {
	clear: both;
}

.editBox p:last-child img.alignright { margin: 0 0 0 25px; }
.editBox p:last-child img.alignleft { margin:0 25px 0 0; }
.editBox p:last-child img.aligncenter { margin: 0 auto; }

/* レスポンシブ設定 ----------------------------*/

@media only screen and (max-width: 768px) {
	.editBox h4{
		font-size: 1.9rem;
	}
	
	.editBox h5{
		font-size: 1.7rem;
	}
	
	.editBox blockquote {
		margin-right: 0;
		margin-left: 0;
	}
	
	.editBox * + h1,
	.editBox * + h2,
	.editBox * + h3,
	.editBox * + h4,
	.editBox * + h5,
	.editBox * + h6,
	.editBox * + p,
	.editBox * + dl,
	.editBox * + ol,
	.editBox * + ul,
	.editBox * + table,
	.editBox * + blockquote,
	.editBox * + .mov_box {
		margin-top: 25px;
	}
	
	.editBox * + hr,
	.editBox hr + * {
		margin-top: 30px;
	}
	
	.editBox img.alignright,
	.editBox img.alignleft,
	.editBox img.aligncenter,
	.editBox p:last-child img.alignright,
	.editBox p:last-child img.alignleft,
	.editBox p:last-child img.aligncenter {
		float: none;
		margin: 0 auto 25px;
	}
}

@media only screen and (max-width: 559px) {
	.editBox small{
		font-size: 1.3rem;
	}
	
	.editBox * + h1,
	.editBox * + h2,
	.editBox * + h3,
	.editBox * + h4,
	.editBox * + h5,
	.editBox * + h6,
	.editBox * + p,
	.editBox * + dl,
	.editBox * + ol,
	.editBox * + ul,
	.editBox * + table,
	.editBox * + blockquote,
	.editBox * + .mov_box {
		margin-top: 20px;
	}
	
	.editBox * + hr,
	.editBox hr + * {
		margin-top: 25px;
	}
	
	.editBox img.alignright,
	.editBox img.alignleft,
	.editBox img.aligncenter,
	.editBox p:last-child img.alignright,
	.editBox p:last-child img.alignleft,
	.editBox p:last-child img.aligncenter {
		float: none;
		margin: 0 auto 20px;
	}
}