<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('.more a').replaceWith(function() {
          $(this).replaceWith("<span>"+$(this).text()+"</span>")
        });
        
        $('.more').click(function(){
            $(this).next().slideToggle();
        });
    });
</script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Charmonman|Noto+Serif+JP&display=swap');


* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
}

.clearfix:after { 
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
}

 a {
    color: #000;
}

body {
    font-size: 13px;
    text-align: justify;
    line-height: 180%;
color: #000;
    font-family: 'Noto Serif JP', serif;
}

hr{
    width: 120px;
    border: 0;
    border-bottom: 1px dashed #f2f0f2;
    background: #fff;
    margin: 3px auto;
    margin-bottom: 16px;
}


header {
    max-width: 600px;
    width: 80%;
    margin: 40px auto 0;
    position: relative;
}

header ul {
    text-align: right;
    margin-top: -20px;
}

header ul li {
    list-style-type: none;
    display: inline-block;
}

.pager ul li a,
header ul li a {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: #afc3e5;
    border: 1px solid;
    color: #FFF;
    transition: .3s;
}

.pager ul li a:hover,
header ul li a:hover {
    background: #FFF;
    color: #afc3e5;
}

h1 {
    font-family: 'Sacramento', cursive;
    font-size: 24px;
}

h1 span {
    position: relative;
    top: 8px;
    padding-left: 15px;
}

h1 span i.fa {
    font-size: 10px;
    color: #ffedab;
    position: relative;
    top: -12px;
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}

h1::before,
h1::after {
    content: '/';
    font-family: 'Sacramento',cursive;
    display: inline-block;
    position: absolute;
    left: 0;
    font-size: 22px;
}

h1::after {
    margin: 20px 0 0 -3px;
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

article {
    max-width: 600px;
    width: 80%;
    margin: 50px auto;
}

section::before {
    display: inline-block;
    content: '';
    width: 100%;
    height: 40px;
    float: right;
    background: url(##IMAGE_DATA_13_URL##) no-repeat right top;
    background-size: 32px;
    position: relative;
    top: -10px;
    right: -15px;
}

section {
    margin-bottom: 50px;
    position: relative;
    border: thin solid #FCFCFC;
    background: #FCFCFC;
}

dl {
    position: relative;
    top: -20px;
    padding: 0 20px;
}

dl dt {
    float: left;
    padding-right: 20px;
    color: #1F1919;
    font-size: 11.5px;
    line-height: 20px;
    width: 90px;
}

dl dt p::before {
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 12px;
    color: #A6AEBB;
    margin-right: 5px;
}

dl dt .date::before {
    content: '\f017';
}

dl dt .category::before {
    content: '\f115';
}


dl dd {
    border-left: 1px dotted #DDD;
    overflow: hidden;
    padding: 0 0 5px 20px;
}

dl dd h2 {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}

dl dd h2:nth-child(n+2) {
    margin-top: 20px;
}

dl dd p.more {
    margin: 20px 0 0;
}

dl dd p.more span::before {
    content: '\f107';
    font-family: 'FontAwesome';
    margin-right: 5px;
}

dl dd p.more span {
    background: #afc3e5;
    border: 1px solid #afc3e5;
    color: #fff;
    text-decoration: none;
    padding: 2px 15px;
    border-radius: 3px;
    transition: .3s;
    cursor: pointer;
}

dl dd p.more span:hover {
    background: #FFF;
    color: #afc3e5;
}

dl dd p.more span:hover::before {
    position: relative;
    top: 2px;
}
dl dd p.moreBox {
    margin-top: 20px;
    display: none;
}

.pager {
    text-align: center;
    margin: 25px 0;
}

.pager ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0 5px;
}

.pager ul li a {
    display: inline-block;
}

h3 {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 45px;
	height: 22px;
	line-height: 22px;
	color: #FFF;
	text-align: center;
	background: #75D2DF;
	z-index: 0;
    border-radius: 3px;
    margin-bottom: 10px;
}

h3::before {
	content: "";
	position: absolute;
	bottom: -4px; 
    left: 50%;
	margin-left: -9px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 9px 0 9px;
	border-color: #75D2DF transparent transparent transparent;
	z-index: 0;
}

@media screen and (max-width:480px){ 
    dl dd p {
        font-size: 12px;
        line-height: 175%;
    }
}

@media screen and (max-width:480px){ 
    dl dt {
        float: none;
        border-bottom: 1px dashed #DDD;
        padding-bottom: 10px;
        width: 90%;
    }
    
    dl dd {
        border-left: none;
        padding: 15px 0 8px;;
    }
}
</style>