#header { color: #fff; display: flex;}
#header.akutagawa { background:/*#800000; */linear-gradient(90deg, #800000 0%, #800000 70%, transparent 70%, transparent 100%);}
#header.naoki { background:/*#004080;*/  linear-gradient(90deg, #004080 0%, #004080 70%, transparent 70%, transparent 100%)}

.entry { margin-bottom: 2em;}

#header-inner { flex:1; padding: 40px 70px 40px 40px; width: 60%;}
#header-name {  background-color: #fff; font-size: 20px; padding: 10px; font-weight: 900;text-align: center;}
.akutagawa #header-name a { color:#800000;}
.naoki #header-name a { color:#004080;}
.shoutimes { font-size: 20px; border: #fff solid 1px;padding: 8px; text-align: center;margin-bottom: 1em; }
#header-inner .copy {}

.shouimg img { max-width: 100%;}

#header.half { background:linear-gradient(90deg, #800000 0%, #800000 50%, #004080 50%, #004080 100%);
display: block;height: auto; margin-bottom: 2em;}
#header.half #header-inner { width: 100%; padding: 40px;}
#header.half .half-img { display: flex; max-width: 100%;}
#header.half .half-img div {flex:1; padding: 20px;}
#header.half .half-img img { max-width: 100%; height:auto;}
#header.half #header-name {  background-color: transparent; border:#fff solid 2px;}
#header.half #header-name a {color: #fff;}
#header.half .copy { text-align: center;}

#header-photo { width: 40%; display: flex; flex-direction: column; padding: 12px 0;position: relative;}
#header-photo p {
width: 100%;;
background-repeat:no-repeat;
background-position:center center;
background-size: cover;
flex:1;}
#header-photo p + p { margin-top: 10px;}
#header-photo .mm {position: absolute; top: 50%; left:0; transform: translate(-50px, -50px);}

strong {font-weight: 900;} 
.entry {line-height: 1.8;}
.entry-header .entry-title { border-left: 10px solid #ccc; color: #003366; padding-left:10px; 
margin: 40px 0 2em;font-size: 1.6em;}

.entry-kouho { background-color:#E0E5EB;margin: 20px 0; padding: 10px 35px;}
.entry-chapter { border: #707070 solid 2px; padding: 20px 35px; margin: 20px 0 40px;}
.entry-chapter dd { padding-left: 1em;}

.entry-content { line-height: 1.8;}
.entry-content img { max-width: 100%; height: auto;}
.entry-content p + p { margin-top: 1.5em;}
.entry-content figure { margin: 3em 0; padding: 0;}
.entry-content figcaption { font-size: 13px; margin-top: 0.5em; color: #666;}

.entry-content h3 { 
background-color: #f1f1f1; 
border-left: #003466 solid 7px; 
padding: 5px  15px;
margin-top: 3em;
margin-bottom: 1em;
color: #003466;
font-size:18px;
font-weight:900;
}
.entry-content .kanren h3 {background-color:#fff;border:none; margin:0;}

.entry-list li > a {
    display: -webkit-flex;
    display: flex;
    padding: 1em 0;
    margin: 0 10px;
    box-sizing: border-box;
}
.entry-list li > a .date {font-size: 13px; margin-bottom: 5px;} 

.bookarea2 { display: flex; margin: 3em 0;}
.bookarea2 .image { width: 150px;}
.bookarea2 .text { margin-left: 20px; flex:1;}
.bookarea2 .text .title { font-size: 1.2em; font-weight: 900;}
.bookarea2 .text .synopsis { padding: 10px; background-color: #F1F1F1; margin: 10px 0; font-size: 0.9em;}
.bookarea2 .text dt {
    color: #000;
    background-color: #C6C7A0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin: 5px 0;
    font-size: 11px;
padding-left: 1em;
}
.bookarea2 .text dd a {
    display: block;
    border: #ccc solid 1px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 2px 5px;
    margin-top: 1px;
  font-size: 0.88em;
text-align: center;
}
.bookarea2 .text dd {
    width: calc((100% - 8px)/4);
    float: left;
    margin: 1px;
}


.dobble-image { width: 160px; margin-right: 20px;}
.dobble-image p {
width: 100%; height:auto; padding-top: 60%;
background-repeat:no-repeat;
background-position:center center;
background-size: cover;
}

.kanren { border: solid 2px #ccc; margin-top: 1em; margin-bottom: 1em;}
.kanren-title { color: #fff; padding: 5px 10px;}
.kanren.akutagawa {border-color:#004080;}
.kanren.naoki {border-color:#800000;}
.kanren.akutagawa .kanren-title { background-color:#004080; }
.kanren.naoki .kanren-title { background-color:#800000; }
.kanren .entry-list { padding: 5px 15px;}

@media screen and (max-width: 1000px) {
#header-inner {padding: 3vw 6vw 3vw 3vw;}
#header-photo .mm {
width: 70px; height: 70px;
    transform: translate(-35px, -35px);
}
#header-photo .mm img { max-width: 100%;}
}
@media screen and (max-width: 750px) {
#header { display: block;}
#header-inner { text-align: center; width: 100%; padding: 40px;}
#header.akutagawa { background:#800000; /*linear-gradient(90deg, #800000 0%, #800000 70%, transparent 70%, transparent 100%);*/}
#header.naoki { background:#004080;/*  linear-gradient(90deg, #004080 0%, #004080 70%, transparent 70%, transparent 100%);*/}

#header-photo {width: 100%;flex-direction:row; padding: 0 10px 10px;}
#header-photo p { padding-top: 30%;}
#header-photo p + p { margin-top: 0; margin-left: 10px;}
#header-photo .mm { top: 0; left: 50%;}

.dobble-image { width: 100px;}
.bookarea2 { display: block;}
.bookarea2 .image { width: auto;text-align: center;}
.bookarea2 .text { margin-left:0; margin-top: 1em;margin-bottom: 3em;}
.bookarea2 .text .title,
.bookarea2 .text .author{text-align: center;}
}
@media screen and (max-width: 600px) {
.bookarea2 .text dd { width: calc((100% - 6px)/3);}
}
@media screen and (max-width: 480px) {
.bookarea2 .text dd { width: calc((100% - 4px)/2);}
}

.side_common_box .BN .date { font-size: 0.9em; color: #666; margin-top: 0.5em;}

.more-button { margin-top: 20px;}
.more-button a {
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: block;
    font-weight: 700;
    margin: auto;
    padding: 0.8em 1em;
    text-align: center;
    width: 280px;
}

.footer_profile {
    border: 1px solid #999999;
    margin-top: 1em;
    padding: 15px;
    font-size: 1.3rem;
}
.footer_profile + .footer_profile { margin-bottom: 3em;}