Theater

source code

自動改行“しない”で作成しています。

HEAD

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

@font-face
{
font-family: 自由の翼;
src: url('https://cdn.leafscape.be/JiyunoTsubasa/JiyunoTsubasa_web.woff')
     format("woff");
}

body{
font-family:"Roboto Condensed","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#0a1612;
background:#c5c1c0;
margin:0;
padding:0;}

@media screen and (min-width:401px){
.wrp{
width:400px;
margin:0 auto;}
}

@media screen and (max-width:400px){
.wrp{
width:100%;
margin:0 auto;}
}

.box{
max-width:400px;
margin:0 auto;
overflow:hidden;}

.box:before,.box:after{
content: "";
display:table;}

.box:after{clear:both;}

.circle{
float:left;
padding:0 10px;
margin:0 20px 0 30px;}

.title{
margin:30px auto 0;
padding:30px;
font-size:20px;
width:50px;
height:50px;
background:#f7ce3e;
border-radius:50%;
text-align:center;}

.menu{
text-transform:uppercase;
letter-spacing:2px;
line-height:180%;
margin:50px 10px 0;
overflow:hidden;}

.menu a{
color:#c5c1c0;
padding:1px 5px;
background:rgba(255,255,255,.3);
border:none;}

.menu a:hover{
color:#f7ce3e;
background:none;
border:none;}

.top{
margin:50px 20px 20px;
padding:15px;
background:#fff;}

.con{
margin:0;
padding:15px;
text-align:center;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

.con::before,.con::after {
position: absolute;
content: '';
width: 30px;
height:30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

.con::before {
top: 0;
left: 0;
border-top: 1px solid #1a2930;
border-left: 1px solid #1a2930;}

.con::after {
bottom: 0;
right: 0;
border-bottom: 1px solid #1a2930;
border-right: 1px solid #1a2930;}

header{
background:#1a2930;
margin:0;
padding:20px;}

strong{
background:#c5c1c0;
font-weight:normal;
padding:0 2px;
margin:0 2px;}

h1{
color:#1a2930;
font-family:Roboto Condensed, sans-serif;
font-size:24px;
margin:0 auto;
padding:0;
text-align:center;
position:relative;
bottom:65px;}

h2{
font-weight:normal;
font-size:14px;
margin:10px 40px;
padding:2px 0;
color:#fff;
background:#1a2930;
border:solid 1px #1a2930;
text-align:center;}

h3{
font-weight:normal;
font-size:14px;
margin:10px 40px;
padding:2px 0;
color:#1a2930;
border:solid 1px #1a2930;
text-align:center;}

a{
color:#1a2930;
text-decoration:none;
padding:0 3px;
border-bottom:solid 1px #c5c1c0;}

a:hover{border-bottom:solid 1px #f7ce3e;}

</style>

本文

midashi1

midashi2

source code