.article > .block-lbox {
	margin-top:1em;
	margin-bottom:1em;
}

.lbox { display:flex; margin-top:1em; margin-bottom:1em; border-width:1px; position:relative; }
.lbox > .lbox-child { flex-shrink:0; flex-grow:0; }

.lbox.font-size-small {
	font-size:81.125%;
	line-height:1.4
}


@media (min-width:767px) {
	.lbox.box-narrow { width:80%; margin-left:auto; margin-right:auto; }
	.lbox.box-narrow-left { width:80%; margin-left:0; margin-right:auto; }
}

.lbox:not([data-lbox-layout]){}
.lbox[data-lbox-layout="1"]   > .lbox-single { width:100%; }
.lbox[data-lbox-layout="1:3"] > .lbox-left { width:25%; }
.lbox[data-lbox-layout="1:3"] > .lbox-right { width:75%; }
.lbox[data-lbox-layout="1:2"] > .lbox-left { width:calc(100% / 3); }
.lbox[data-lbox-layout="1:2"] > .lbox-right { width:calc(100% / 1.5); }
.lbox[data-lbox-layout="1:1"] > .lbox-child { width:50%; }

.lbox[data-lbox-layout="1:X"] > .lbox-left { flex: 0 0 auto; max-width:100%; }
.lbox[data-lbox-layout="1:X"] > .lbox-right { flex: 1 1 100%; }

.lbox[data-lbox-layout="fix:X"] > .lbox-left { flex: 1 1 90px; max-width:100%; }
.lbox[data-lbox-layout="fix:X"] > .lbox-left figure { max-width:90px; }
.lbox[data-lbox-layout="fix:X"].reversed > .lbox-left figure { margin-left:auto; text-align:right; }
.lbox[data-lbox-layout="fix:X"].reversed > .lbox-left p { text-align:right; }
@media (min-width:767px) {
	.lbox[data-lbox-layout="fix:X"] > .lbox-left { flex: 0 0 90px; max-width:90px; }
}
.lbox[data-lbox-layout="fix:X"] > .lbox-right { flex: 2 2 100%; }

.lbox.reversed { flex-direction:row-reverse; }

.box-border-none { border-style:none; }
.box-border-solid { border-width:1px; border-style:solid; }
.box-border-dashed { border-width:1px; border-style:dashed; }

.box-border-radius { border-radius:.5em; }

.box-shadow-simple { filter:drop-shadow(5px 5px 0 rgba(0,0,0,.1)); margin-right:5px; } /* IE11 ignore */

.lbox:not([class*="box-color-bg"]) { border-color:#ccc; }
.box-color-bgwhite   { background-color: hsl(  0,  0%,100%); border-color: hsl(  0,  0%, 80%); }
.box-color-bgblack   { background-color: hsl(  0,  0%, 90%); border-color: hsl(  0,  0%, 50%); }
.box-color-bgred     { background-color: hsl(  0, 47%, 91%); border-color: hsl(  0, 47%, 78%); }
.box-color-bgbrown   { background-color: hsl( 30, 32%, 90%); border-color: hsl( 30, 32%, 63%); }
.box-color-bgorange  { background-color: hsl( 20, 66%, 92%); border-color: hsl( 20, 66%, 69%); }
.box-color-bgyellow  { background-color: hsl( 45, 62%, 92%); border-color: hsl( 45, 62%, 69%); }
.box-color-bggreen   { background-color: hsl(120, 24%, 90%); border-color: hsl(120, 24%, 63%); }
.box-color-bgcyan    { background-color: hsl(180, 33%, 92%); border-color: hsl(180, 33%, 69%); }
.box-color-bgblue    { background-color: hsl(240, 42%, 93%); border-color: hsl(240, 40%, 72%); }
.box-color-bgviolet  { background-color: hsl(275, 32%, 93%); border-color: hsl(275, 30%, 71%); }
.box-color-bgpink    { background-color: hsl(330, 47%, 94%); border-color: hsl(330, 45%, 77%); }

.lbox > .lbox-child > .sub-article { padding:0; }

.lbox > .lbox-child { padding:.75em; }

.lbox:not([class*="box-color-bg"]):not([class*="box-border-"]):not(.reversed) > .lbox-left,
.lbox:not([class*="box-color-bg"]):not([class*="box-border-"]).reversed       > .lbox-right  { padding-top:0; padding-bottom:0; padding-left:0; }
.lbox:not([class*="box-color-bg"]):not([class*="box-border-"]):not(.reversed) > .lbox-right,
.lbox:not([class*="box-color-bg"]):not([class*="box-border-"]).reversed       > .lbox-left { padding-top:0; padding-bottom:0; padding-right:0; }


/************************/
/* 2cols */

.lbox[data-lbox="2cols"]:not(.reversed) > .lbox-child.lbox-left,
.lbox[data-lbox="2cols"].reversed       > .lbox-child.lbox-right { padding-right:.375em; }
.lbox[data-lbox="2cols"]:not(.reversed) > .lbox-child.lbox-right,
.lbox[data-lbox="2cols"].reversed       > .lbox-child.lbox-left  { padding-left:.375em; }

@media (max-width:767px){
	.lbox[data-lbox="2cols"] { font-size:80%; }
}

/************************/
/* bubble */

.box-bubble { position:relative; }
.box-bubble[class*="box-color-bg"]::before,
.box-bubble[class*="box-color-bg"]::after {
	content: "";
	position: absolute;
	top:0; left:0;
	width:0; height:0;
	border: .45em solid transparent;
	border-top-color: inherit;
}
@media(min-width:768px) {
	.box-bubble[class*="box-color-bg"]::before,
	.box-bubble[class*="box-color-bg"]::after {
		transform: rotate(90deg) scaleY(1.5);
		transform-origin: top left;
		margin-top: .6em;
	}
	.box-bubble[class*="box-color-bg"]::after {
		margin-left:1px;
	}
	.lbox[data-lbox="bubble"].reversed .box-bubble:not(:empty)::before,
	.lbox[data-lbox="bubble"].reversed .box-bubble:not(:empty)::after {
		left:auto; right:0;
		transform: rotate(270deg) scaleY(1.5);
		transform-origin:top right;
	}
	.lbox[data-lbox="bubble"].reversed .box-bubble:not(:empty)::before {
		margin-right:-1px;
	}
	.lbox[data-lbox="bubble"].reversed .box-bubble:not(:empty)::after {
		margin-right:1px;
	}
	.lbox[data-lbox="bubble"] .lbox-right {
		min-height:90px;
	}
}
@media (max-width:767px) {
	.box-bubble[class*="box-color-bg"]::before,
	.box-bubble[class*="box-color-bg"]::after {
		transform: rotate(180deg) scaleY(1.5);
		transform-origin: top center;
	}
	.lbox:not(.reversed)  > .lbox-right .box-bubble[class*="box-color-bg"]::before,
	.lbox:not(.reversed)  > .lbox-right .box-bubble[class*="box-color-bg"]::after {
		left:40px;
		left:calc(45px - .45em);
	}
	
	.lbox.reversed  > .lbox-right .box-bubble[class*="box-color-bg"]::before,
	.lbox.reversed  > .lbox-right .box-bubble[class*="box-color-bg"]::after {
		left:auto;
		right:40px;
		right:calc(45px - .45em);
	}
	.lbox[data-lbox="bubble"]:not(.reversed) .box-bubble:not(:empty)::before,
	.lbox[data-lbox="bubble"].reversed .box-bubble:not(:empty)::before {
		margin-top:-1px;
	}
}

@media(max-width:767px) {
	.lbox[data-lbox="bubble"] { flex-wrap:wrap; }
	.lbox[data-lbox="bubble"].reversed { flex-direction: normal; }
	.lbox[data-lbox="bubble"].reversed > .lbox-left { margin-left:auto; }
}

.lbox[data-lbox="bubble"] > .lbox-child { padding:0; }
@media (min-width:768px){
	.lbox[data-lbox="bubble"]:not(.reversed) > .lbox-right {padding-left: .75em;}
	.lbox[data-lbox="bubble"].reversed       > .lbox-right {padding-right:.75em;}
}
@media (max-width:767px) {
	.lbox[data-lbox="bubble"]:not([class*="box-color-bg"]):not([class*="box-border-"]):not(.reversed) > .lbox-right,
	.lbox[data-lbox="bubble"]:not([class*="box-color-bg"]):not([class*="box-border-"]).reversed       > .lbox-right { padding-top:.75em; }
}

.lbox[data-lbox="bubble"] .sub-article.box-bubble { padding:.5em .75em; }

.box-bubble.box-color-bgwhite::after  { border-top-color: hsl(  0,  0%,100%); }
.box-bubble.box-color-bgblack::after  { border-top-color: hsl(  0,  0%, 90%); }
.box-bubble.box-color-bgred::after    { border-top-color: hsl(  0, 47%, 91%); }
.box-bubble.box-color-bgbrown::after  { border-top-color: hsl( 30, 32%, 90%); }
.box-bubble.box-color-bgorange::after { border-top-color: hsl( 20, 66%, 92%); }
.box-bubble.box-color-bgyellow::after { border-top-color: hsl( 45, 62%, 92%); }
.box-bubble.box-color-bggreen::after  { border-top-color: hsl(120, 24%, 90%); }
.box-bubble.box-color-bgcyan::after   { border-top-color: hsl(180, 33%, 92%); }
.box-bubble.box-color-bgblue::after   { border-top-color: hsl(240, 42%, 93%); }
.box-bubble.box-color-bgviolet::after { border-top-color: hsl(275, 32%, 93%); }
.box-bubble.box-color-bgpink::after   { border-top-color: hsl(330, 47%, 94%); }

.box-bubble:not(.box-border-solid)::before { display:none; }
.box-bubble:not([class*="box-color-bg"]):not(.box-border-solid) { padding:0; }

.lbox[data-lbox="bubble"] > .lbox-left > .sub-article > figure > figcaption { font-size:12px; text-align:left; }
.lbox[data-lbox="bubble"].reversed > .lbox-left > .sub-article > figure > figcaption { text-align:right; }

/********* float **********/

.lbox[data-lbox="float"] {
	display:block;
}
.lbox[data-lbox="float"]::after {
	content:"";
	display:table;
	clear:both;
}

.lbox[data-lbox="float"] > .lbox-left {
	position:relative;
}

.lbox[data-lbox="float"] > .lbox-child { padding:.75em; }
.lbox[data-lbox="float"]:not(.reversed) > .lbox-left { float:left; }
.lbox[data-lbox="float"].reversed > .lbox-left { float:right; }
.lbox[data-lbox="float"] > .lbox-right { width:100%; }