羊の夢

自動改行“しない”で作成しています。
タイトル部分につきまして、文字の量によっては崩れることがあります。その場合はHEAD内h1{～}部分のfont-size:30px;やbottom:130px;といった数字部分を適宜改変して調整してください。

HEAD

@import url('https://fonts.googleapis.com/css?family=Glass+Antiqua|Questrial');

@font-face
{
font-family: 刻明朝;
src: url('https://cdn.leafscape.be/kokumin/font_1_kokumr_1.00_rls_web.woff2')
     format("woff2");
}

body{
font-family:"Questrial","STHeitiSC-Light",'Microsoft YaHei',gulim,"メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#000;
background:#fff;
margin:0;
padding:0;
text-align:center;}

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

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

header{
max-width:290px;
padding:15px;
margin:0 auto;
height:250px;}

.top{
width:151px;
height:151px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin:60px auto 0;
position: relative;
z-index: 1;
left:7px;
}

.top::before,.top::after {
border:solid 1px #d4dcda;
content: "";
height: 100%;
position: absolute;
width: 100%;
}

.top::before {
left: 0;
top: 0;
z-index: -1;}

.top::after {
top: 7px;
right:6px;
z-index: -2;}

.menu{
margin:0 20px 20px;}

.menu a{
display:inline-block;
width:100px;
border:solid 1px #d4dcda;
padding:2px 3px;
margin:0 5px;}

.menu a:hover{
border:solid 1px #d4dcda;
background:#e6eae3;
padding:2px 3px;
margin:0 5px;}

.sbmenu{
margin:50px 10px 20px;
text-align:left;}

.info{
margin:20px;
text-align:left;}

.bkm{
border:solid 2px #e6eae3;
margin:5px;
padding:10px;
font-size:11px;}

hr{
border:none;
height:7px;
background-image:linear-gradient(hsla(165, 10%, 70%, 1),hsla(165, 10%, 70%, 1) 33.33%,hsla(165, 10%, 70%, 0) 33.33%,hsla(165, 10%,70%, 0) 100%);
background-size:100% 3px;
width:40px;}

.hover{
color:#888;
padding:0 3px;
border-bottom:solid 2px #c0c6c9;
}

.title{
background:#d4dcda;
border:solid 1px #fff;
display:inline-block;
width:60px;
margin-right:10px;
padding:0;
text-align:center;}

.ft{
max-width:290px;
margin:25px auto 20px;}

.ft p{
margin:0 20px;
text-align:left;}

h1{
color:#888;
font-family:刻明朝, sans-serif;
font-weight:normal;
font-size:30px;
margin:0 auto 10px;
padding:0;
writing-mode:tb-rl;
writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
-o-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
position:relative;
bottom:130px;
display:inline-block;}

h2{
font-weight:normal;
font-size:12px;
margin:0 5px;
padding:0;
border-top:double 3px #d4dcda;}

h2 p{
display:inline-block;
text-align:center;
position:relative;
bottom:10px;
background:#fff;
margin:0 auto -10px;
padding:0 10px;}

h3{
font-family:"Glass Antiqua",sans-serif;
text-transform:uppercase;
color:#555;
font-weight:normal;
font-size:18px;
margin:0 5px;
padding:0;
border-top:double 3px #d4dcda;}

h3 p{
display:inline-block;
text-align:center;
position:relative;
bottom:10px;
background:#fff;
margin:0 auto -10px;
padding:0 10px;}

a{
color:#888;
text-decoration:none;
padding:0 3px;
border-bottom:solid 2px #e6eae3;
transition:0.5s;}

a:hover{border-bottom:solid 2px #c0c6c9;}

</style>

BODY

hitsujinoyume is xxxxx site.

information

source code