百たびの記憶ソースコード

・Tamaumeさん「シンプルで白背景の同人本既刊のサンプル・詳細ページ。左側に表紙画像、右側に説明みたいなページ。」

自動改行“しない”で作成しています。
幅が狭いデバイスから見ると表紙部分・詳細部分は縦一列に表示されますが、幅の広いデバイスからだと左側に表示部分・右に詳細部分と二列に表示されます。

HEAD

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

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

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

.con{display:flex;}

.left{
padding:0;
width:30%;
float:left;
margin-right:30px;
text-align:center;}

.right{
padding:10px 0;
width:70%;
float:right;}
}

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

.left{
text-align:center;
padding:0;
margin:30px auto 20px;}

.right{
margin:0 10px;
padding:10px 0;}
}

.left img{
max-height:200px;
display:inline-block;
border:solid 1px #333;
padding:5px;
margin:0 auto;}

.left a{
border:none;
margin:0 auto;
padding:0;}

.left a:hover{
border:none;
opacity:.5;}

.con{margin:20px;}

.text{
position: relative;
padding:15px;
margin:20px auto 0;
background-color: #efefef;}

.text:after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #b0c4de #b0c4de;}

.line{
margin:10px 0;
border-top:dashed 1px #2a83a2;}

strong{
font-size:13px;
color:red;
margin:5px;}

hr{
background:#333;
border:none;
height:5px;
width:40px;
margin:50px auto;
padding:0;}

header{margin:20px 20px 50px;}

header p{
max-width:300px;
margin:10px 0;
padding:1px 10px;
background-image: linear-gradient(#ddd 1px, transparent 1px);
background-size: 25px 25px;
line-height:25px;}

h1 {
margin:50px auto 20px;
font-weight:normal;
position:relative;
height:50px;
line-height:50px;
padding:0 50px 0 20px;
background:#eee;
display:inline-block;}

h1:after {
content: '';
position: absolute;
top: 0;
right: 0;
z-index: 2;
border-width: 25px 20px;
border-style: solid;
border-color: transparent;
border-right-color: #fff;}

h2{
font-weight:normal;
font-size:13px;
color:#333;
background:#fff;
border:1px solid #333;
padding:5px 15px;
margin:0 0 10px;
display:inline-block;}

a{
color:#2a83a2;
text-decoration:none;
padding:0 3px;
transition:0.5s;}

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

</style>

BODY