[旧]boxサンプル(2019/6)

/* 色設定 */
.T-boxA .box-title,.box-footer {
color: rgba(255,255,255,0.9);/* タイトルは白 */
background:linear-gradient(to right,#6c5987, #523f6d 30%,#523f6d 70%,#6c5987);}/* タイトル背景色 */
.T-boxA {border-color:rgba(108, 89, 135, 0.8);}/* 本体ボーダー色は透明度を下げる */
.T-boxA:after{color:rgba(255,255,255,0.6);}/* 固定ロゴは白 */

/* ボックス本体 */
.T-boxA {
position:relative;
display: inline-block;/* 可変幅 */
min-width:300px;/* 最小幅 */
max-width: calc(100vw – 60px);/* 最大幅 */
text-align:center;/* 要素は中央寄せ */
background-color:#FFF ;
color:#000;
padding: 0px;
border-radius: 10px;
border-width:3px;
border-style:solid;
margin: 10px 5vw 20px 5vw;
}
/* 可編タイトル */
.T-boxA .box-title {
font-size: 1.1em;
border-radius: 7px 7px 0px 0px;
padding:6px 0px;
text-align: center;
font-weight: bold;
letter-spacing: 4px;
line-height: 1.2em;
}
/* 可編フッター */
.T-boxA .box-footer {
color:#c1bacc;
font-size: 0.8em;
border-radius: 0px 0px 7px 7px;
padding:6px 0.5em 4px;
text-align: right;
font-weight: bold;
letter-spacing: 0.05em;
line-height: 0.8em;
}

/* タイトル右上の固定ロゴ */
.T-boxA:after {
position: absolute;
right: 5px;
top: 1px;
font-size:12px;
font-weight: bold;
letter-spacing: 1px;
content: ‘SSHT’;/* ロゴの内容 */
padding-left: 0px;
z-index: 1;
}

/* ボックス本文 */
.T-boxA p {
display:inline-block;/* 本文も可変幅 */
text-align:left;/* 本文は左寄せ */
line-height:1.6em;
padding: 10px 30px 15px 30px;
margin: 0;
}

/* ボックスの固定ロゴを第2案に置き換え */
.logo2::after{content:”Zky*art”;}

/* 色設定 */
.L-boxA .box-title {
color: rgba(255, 255, 255, .9);/* ラベル文字色 */
background-color: #9681cc;/* ラベルの背景色は強め */
border-color:#a28dd8;}/* ラベルのボーダー同色 */
.L-boxA {border-color:#a28dd8;}/* 本文ボーダー同色 */
.L-boxA:after{
background-color: #a28dd8;/* ロゴ背景色同色 */
border-color: #a28dd8;/* ロゴボーダー同色 */
color:rgba(255, 255, 255, .7);/* 固定ロゴは白 */
}
.L-boxA {color:#6597c5;}/* ボックス内本文色 */

/* ボックス本体 */
.L-boxA {
position: relative;
vertical-align:top;
display: inline-block;/* 可変幅 */
min-width:200px;/* 最低幅 */
max-width: calc(100vw – 60px);/* 最大幅 */
background-color:#FFF5 ;
padding:7px 16px 8px 16px;
border-style:solid;/* ボーダー様式 */
border-width:3px;
border-radius:0 14px 14px;
margin: 25px 5vw 15px 5vw;
}
/* ボックス上辺の可編タイトル */
.L-boxA .box-title {
position: absolute;
display: inline-block;
top:calc( -1.0em – 10px);
left: -3px;
padding:3px 16px 1px 12px;
line-height: 1;
font-size: 1.0em;
letter-spacing: 0.1em;
font-weight: bold;
border-style:solid;
border-width:3px;
border-radius:16px 27px 0px 0px;
}
/* ボックス右下の固定ロゴ */
.L-boxA:after{
position: absolute;
right: -2px;
bottom: -3px;
line-height: 1;
font-size:10px;
font-weight: bold;
content: ‘SSHT’;/* ロゴ内容 */
border-width: 1px;
border-style: solid;
border-radius:16px 0px 16px 0px;/* 左上と右下は丸く */
padding:0px 4px 0px 8px;
letter-spacing: 0.1em;
z-index: 1;
}
/* ボックス内本文 */
.L-boxA p {
margin: 0;
padding: 0;
line-height:1.3em;
}

/* 半透明にする(リンク無しを暗示) */
.weak{opacity:0.5;}

/*———————————————–
ボックス> ラベル付きボックスB(ロゴを下に)
————————————————*/
/* 色設定 */
.L-boxB .box-title {
color: rgba(255, 255, 255, .9);/* ラベル文字色 */
background-color: #9681cc;/* ラベルの背景色は強め */
border-color:#a28dd8;}/* ラベルのボーダー同色 */
.L-boxB {border-color:#a28dd8;}/* 本文ボーダー同色 */
.L-boxB:after{
background-color: #a28dd8;/* ロゴ背景色同色 */
border-color: #a28dd8;/* ロゴボーダー同色 */
color:rgba(255, 255, 255, .7);/* 固定ロゴは白 */
}
.L-boxB {color:#6597c5;}/* ボックス内本文色 */

/* ボックス本体 */
.L-boxB {
position: relative;
display: inline-block;/* 可変幅 */
min-width:180px;/* 最低幅 */
max-width: calc(100vw – 60px);/* 最大幅 */
background-color:#FFF5 ;
padding:5px 5px 4px 16px;
border-style:solid;/* ボーダー様式 */
border-width:3px;
border-radius: 0 20px;/* */
margin: 20px 5vw 25px 5vw;
}
/* ボックス上辺の可編タイトル */
.L-boxB .box-title {
position: absolute;
display: inline-block;
top:calc( -1.0em – 10px);
left: -3px;
padding:3px 11px 1px 12px;
line-height: 1;
font-size: 1.0em;
letter-spacing: 0.1em;
font-weight: bold;
border-style:solid;
border-width:3px;
border-radius: 16px 16px 0px 0px;
}
/* ボックス右下の固定ロゴ */
.L-boxB:after{
position: absolute;
right: -3px;
top: 100%;
line-height: 1;
font-size:11px;
font-weight: bold;
content: ‘SSHT’;/* ロゴ内容 */
border-width: 3px;
border-style: solid;
border-radius:0px 0px 10px 10px;/* */
padding:0px 2px 0px 4px;
letter-spacing: 0.1em;
z-index: 1;
}
/* ボックス内本文 */
.L-boxB p {
margin: 0;
padding: 0;
}
/*———————————————–
ボックス> ラベル付きボックスC(要素を上に集める)
————————————————*/
/* 色設定 */
.L-boxAC .box-title {
color: rgba(255, 255, 255, .9);/* ラベル文字色 */
background-color: #9681cc;/* ラベルの背景色は強め */
border-color:#a28dd8;}/* ラベルのボーダー同色 */
.L-boxAC {border-color:#a28dd8;}/* 本文ボーダー同色 */
.L-boxAC:after{
background-color: #a28dd8;/* ロゴ背景色同色 */
border-color: #a28dd8;/* ロゴボーダー同色 */
color:rgba(255, 255, 255, .7);/* 固定ロゴは白 */
}
.L-boxAC {color:#6597c5;}/* ボックス内本文色 */

/* ボックス本体 */
.L-boxAC {
position: relative;
display: inline-block;
min-width: 200px;
max-width: calc(100vw – 60px);/* 最大幅 */
background-color: #fff5;
padding: 5px 7px 5px 16px;
border-style: solid;
border-width: 8px 3px 3px;
border-radius: 0px 0px 16px 16px;
margin: 20px 5vw 25px;
}
/* ボックス上辺の可編タイトル */
.L-boxAC .box-title {
position: absolute;
display: inline-block;
top:calc( -1.0em – 10px);
left: -3px;
padding:3px 16px 1px 9px;
line-height: 1;
font-size: 1.0em;
letter-spacing: 0.1em;
font-weight: bold;
border-style:solid;
border-width:3px;
border-radius:16px 27px 0px 0px;
}
/* ボックス右下の固定ロゴ */
.L-boxAC:after{
position: absolute;
right: -3px;
top: -16px;
line-height: 1;
font-size: 10px;
font-weight: 700;
content: ‘SSHT’;
border-width: 3px 1px 0px 1px;
border-style: solid;
border-radius: 17px 11px 0px 0px;
padding: 0 7px 0 18px;
letter-spacing: .1em;
z-index: 1;
}
/* ボックス内本文 */
.L-boxAC p {
margin: 0;
padding: 0;
}