@charset "utf-8";

body {
font-family: 'Noto Sans JP', sans-serif;
color:#000000;
margin:0;
font-size:16px;
line-height:160%;
}
h1,h2,h3,h4{
margin:0;
line-height:140%;
}
p{
margin:0 0 1em;
}
a{
text-decoration:none;
}
ul{
margin:0;
padding:0;
list-style:none;
}
dd{
margin-left:0;
}
input[type="text"],
input[type="password"],
input[type="text"],
textarea
{
padding:5px;
border-radius:3px;
border:1px solid #8c8c8c;
font-size:18px;
}
button{
display:inline-block;
border:none;
letter-spacing:0.5em;
text-indent:0.5em;
text-align:center;
padding:5px;
box-sizing:border-box;
cursor:pointer;
font-size:18px;
}
img {
image-rendering: -webkit-optimize-contrast;
}

body > header{
background:#CE121B;
padding:15px 18px;
overflow:hidden;
}
body > header div{
max-width:1200px;
margin:0 auto;
}
body > header h1{
/*width:200px;*/
float:left;
font-size:20px;
}
body > header h1 a{
display:block;
height:100%;
color:#fff;
}
body > header h1 a img{
margin-right:20px;
}
body > header ul{
width:500px;
float:right;
margin-top:15px;
text-align:right;
}
body > header ul li{
display:inline-block;
color:#ffffff;
}
body > header ul li a{
color:#ffffff;
}
body > header ul li:first-child::after{
content: '｜';
}
body > header ul li:nth-child(3){
box-sizing:border-box;
width:150px;
text-align:center;
background: url( "../img/ico_header_writer.png" ) center left 20px no-repeat #ffffff ;
background-size:11px;
border-radius:15px;
padding-left:20px;
margin-left:15px;
}
body > header ul li:nth-child(3) a{
color:#CE121B;
display:block;
font-size:12px;
}
main {
width:1000px;
margin:0 auto 50px;
overflow:hidden;
}

div#side{
width:270px;
float:left;
}
div#side > h1{
background:#CE121B;
margin-bottom:20px;
color:#ffffff;
font-size:21px;
padding:5px 10px;
}
#side #search_area,
#side #search_naiyo,
#side #news
{
margin-bottom:40px;
}
#side #search_area h2{
font-size:18px;
background: url( "../img/ico_h_search_area.png" ) top left 0px no-repeat ;
background-size:27px;
border-bottom:1px solid #000;
margin-bottom:20px;
padding:3px 0 10px 35px;
}
#side #search_area select{
width:182px;
background:#E5E5E5;
border:none;
padding:5px;
}
#side #search_area button{
color:#fff;
background:#CE121B;
width:82px;
padding:8px 0;
border-radius:5px;
}

#side #search_naiyo h2{
font-size:18px;
background: url( "../img/ico_h_search_naiyo.png" ) top 3px left 0px no-repeat ;
background-size:24px;
border-bottom:1px solid #000;
margin-bottom:20px;
padding:3px 0 10px 35px;
}

#side #search_naiyo label{
display:block;
cursor: pointer;
padding:5px 0 5px 48px;
border-radius: 5px;
margin-bottom:10px;
font-size:15px;
}
#side #search_naiyo input[type="checkbox"]{
display:none;
}
#side #search_naiyo input[type="checkbox"]:checked + label {
background-color: #F1B8BB;
}

#search_naiyo #w1 + label {
background: url( "../img/ico_w1.png" ) center left 10px no-repeat #E5E5E5;
background-size:26px;
}
#search_naiyo #w2 + label {
background: url( "../img/ico_w2.png" ) center left 10px no-repeat #E5E5E5;
background-size:26px;
}
#search_naiyo #w3 + label {
background: url( "../img/ico_w3.png" ) center left 10px no-repeat #E5E5E5;
background-size:28px;
}
#search_naiyo #w4 + label {
background: url( "../img/ico_w4.png" ) center left 10px no-repeat #E5E5E5;
background-size:27px;
}
#search_naiyo #w5 + label {
background: url( "../img/ico_w5.png" ) center left 10px no-repeat #E5E5E5;
background-size:30px;
}
#search_naiyo #w6 + label {
background: url( "../img/ico_w6.png" ) center left 10px no-repeat #E5E5E5;
background-size:28px;
}
#search_naiyo #w7 + label {
background: url( "../img/ico_w7.png" ) center left 10px no-repeat #E5E5E5;
background-size:27px;
}
#search_naiyo #w8 + label {
background: url( "../img/ico_w8.png" ) center left 10px no-repeat #E5E5E5;
background-size:26px;
}
#search_naiyo #w9 + label {
background: url( "../img/ico_w9.png" ) center left 10px no-repeat #E5E5E5;
background-size:27px;
}
#search_naiyo #w10 + label {
background: url( "../img/ico_w10.png" ) center left 10px no-repeat #E5E5E5;
background-size:25px;
}
#search_naiyo #w11 + label {
background: url( "../img/ico_w11.png" ) center left 10px no-repeat #E5E5E5;
background-size:30px;
}
#search_naiyo #w12 + label {
background: url( "../img/ico_w12.png" ) center left 10px no-repeat #E5E5E5;
background-size:27px;
}
#search_naiyo button{
color:#fff;
background:#CE121B;
width:100%;
padding:8px 0;
border-radius:5px;
letter-spacing:normal;
line-height:160%;
}

#side #taglist{
margin-top:30px;
margin-bottom:50px;
background:#f3f3f3;
padding:10px 6px;
}
#side #taglist h3{
font-size:16px;
margin-bottom:10px;
}
#side #taglist ul{
margin-bottom:20px;
}
#side #taglist ul:nth-child(10){
margin-bottom:0;
}
#side #taglist ul li {
margin-bottom:3px;
padding:3px;
border-bottom:1px solid #fff;
font-size:15px;
}
#side #taglist ul li a{
display:block;
color:#000;
}
#side #taglist ul li a:hover{
text-decoration:underline;
}


#side #news{
border:1px solid #808080;
}

#side #news h2{
color:#ffffff;
font-size:18px;
background: url( "../img/ico_h_news.png" ) center left 5px no-repeat #808080;
background-size:27px;
padding:3px 0 5px 38px;
}
#side #news dl{
margin:5px;
}
#side #news dl dt,
#side #news dl dd{
line-height:150%;
}
#side #news dt::before{
content:'●';
font-size:10px;
margin:0 5px 0 10px;
}
#side #news dt{
font-size:12px;
padding:0;
margin:0;
}
#side #news dd{
padding:0 20px 5px;
border-bottom:1px dashed #808080;
font-size:14px;
margin:0;
}
#side #news dd:last-child{
/*border-bottom:1px solid #808080;*/
border-bottom:none;
}
#side #news > a {
display:block;
font-size:14px;
color:#000;
text-align:center;
background-image: url("../img/ico_news_arrow.png");
background-repeat: no-repeat;
background-position: calc(50% + 1.5em) center;
background-size:12px;
padding:0 0 5px;
text-indent:-1em;
}
#side > aside a{
display:block;
margin-bottom:8px;
}
#side > aside a img{
width:100%;
}

div#main{
width:680px;
float:right;
}
div#footer_pr{
text-align:center;
margin-bottom:80px;
}
footer{
background:#fae7e8;
}
footer > div{
width:1000px;
margin:0 auto;
position:relative;
}
footer p{
position:absolute;
width:64px;
height:64px;
right:0;
border-radius:50%;
background:#ce121b;
margin-top:-32px;
}
footer p a{
position:relative;
display:block;
height:100%;
text-align:center;
color:#ffffff;
padding-top:30px;
}
footer p a::before{
content: "";
position: absolute;
top: 10px;
left: 17px;
border-right: 15px solid transparent;
border-bottom: 22px solid #ffffff;
border-left: 15px solid transparent; 
}
footer nav{
padding:50px 0;
overflow:hidden;
}
footer nav div{
width:190px;
float:left;
margin-right:40px;
font-size:14px;
}
footer nav h3{
padding:5px 0;
margin-bottom:10px;
}
footer nav ul{
}
footer nav ul li{
}
footer nav ul li a{
color:#000000;
}
footer nav h3{
color:#d0121b;
border-bottom:1px solid #d0121b;
}
footer small{
display:block;
background:#CE121B;
text-align:center;
padding:10px;
color:#ffffff;
font-size:14px;
}
#topicpath{
margin:20px 0;
font-size:12px;
}
#topicpath a{
color:#d0121b;
}
#topicpath ul{
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
#topicpath li{
display: inline-block;
position: relative;
padding-right: calc(16px + 2px);
margin-right: 2px;
}
#topicpath li::before{
content: '›';
width: 1em;
height: 1em;
line-height: 1;
text-align: center;
font-size: 1em;
color: inherit;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#topicpath li:last-child {
margin-right: 0;
padding-right: 0;
}
#topicpath li:last-child::before {
content: normal;
}




#mv {
margin:32px 0;
}
#mv ul a{
display:block;
margin:0 20px;
}
#mv img{
width:900px;
}
#search_keyword{
background:#FAE7E8;
border-radius:25px;
padding:20px 28px;
margin-bottom:35px;
}
#search_keyword form{
position:relative;
margin-bottom:60px;
}
#search_keyword input{
box-sizing:border-box;
height:60px;
padding:0 30px; 
position:absolute; 
left:0;
top:0; 
border:none;
border-radius:30px;
outline:0;
background:#fff;
width:100%;
font-size:24px;
}
#search_keyword input::placeholder{
color:#b2b2b2;
}
#search_keyword button{
height:60px;
width:25%;
position:absolute; 
top:0;
right:0;
background:#CE121B;
color:#fff;
border:none;
border-radius:0 30px 30px 0;
}
#search_keyword button i{
font-size:24px;
position:absolute;
top:30%;
left:15%;
}
#search_keyword ul{
margin-top:80px;
margin-bottom:0;
list-style:none;
padding:0;
}
#search_keyword ul li{
display:inline-block;
margin:0 10px 15px 0;
}
#search_keyword li.sml{
font-size:18px;
}
#search_keyword li.mid{
font-size:25px;
}
#search_keyword li.big{
font-size:34px;
}
#search_keyword li a{
color:#000;
}

#search_genre,
#writers{
margin-bottom:35px;
}
#search_genre h2,
#writers > h2,
#basic > h2
{
font-size:21px;
border-bottom:1px solid #000000;
padding:5px 0;
margin-bottom:24px;
}
#search_genre ul{
}
#search_genre ul li{
display:inline-block;
width:156px;
border-radius:12px;
margin-right:14px;
vertical-align:text-top;
}
#search_genre ul li.g1{
background: url( "../img/ico_j1.png" ) top 20px center no-repeat #CE121B;
}
#search_genre ul li.g2{
background: url( "../img/ico_j2.png" ) top 20px center no-repeat #CE121B;
}
#search_genre ul li.g3{
background: url( "../img/ico_j3.png" ) top 20px center no-repeat #CE121B;
}
#search_genre ul li.g4{
background: url( "../img/ico_j4.png" ) top 20px center no-repeat #CE121B;
}
#search_genre ul li.g5{
background: url( "../img/ico_j5.png" ) top 25px center no-repeat #E19600;
margin-right:0;
}
#search_genre ul li a{
color:#ffffff;
display:block;
height:100%;
font-size:23px;
line-height:130%;
text-align:center;
padding:78px 0 20px 0;
}
#search_genre ul li.g5 a{
padding:94px 0 33px 0;
}
#search_genre p{
margin:33px 0 0 20px;
}

#writers article{
box-sizing:border-box;
padding:20px;
border-radius:8px;
overflow:hidden;
margin-bottom:18px;
}
#writers article a{
color:#000000;
}
#writers article img{
display:block;
width:90px;
float:left;
}
#writers article section{
width:525px;
float:right;
}
#writers article section aside{
overflow:hidden;
margin-bottom:10px;
}
#writers article section aside span{
display:inline-block;
float:left;
color:#ffffff;
font-size:14px;
padding:0px 10px;
border-radius:5px;
}
#writers article section aside p{
display:inline-block;
float:right;
font-size:14px;
}
#writers article h2{
font-size:26px;
margin-bottom:10px;
}
#writers article section h3{
font-size:27px;
}
#writers article section ruby{
font-size:12px;
}
#writers article section ul{
padding:5px 10px;
border-radius:5px;
}
#writers article section ul li{
display:inline-block;
font-size:14px;
line-height:140%;
padding:0 5px;
color:#ffffff;
border-radius:3px;
line-height:160%;
}
#writers article section ul li:first-child{
background:transparent !important;
}
#writers article section ul li:first-child::after{
content:'｜';
}
#writers article.a1{
border:1px solid #5486ac;
}
#writers article.a1 aside span,
#writers article.a1 section ul li {
background:#5486ac;
}
#writers article.a1 h2,
#writers article.a1 section > p,
#writers article.a1 section ul,
#writers article.a1 section ul li:first-child {
color:#5486ac;
}
#writers article.a1 section ul{
background:#e2eaf1;
}
#writers article.a2{
border:1px solid #d19053;
}
#writers article.a2 aside span,
#writers article.a2 section ul li {
background:#d19053;
}
#writers article.a2 h2,
#writers article.a2 section > p,
#writers article.a2 section ul,
#writers article.a2 section ul li:first-child {
color:#d19053;
}
#writers article.a2 section ul{
background:#f7ece2;
}
#writers article.a3{
border:1px solid #579055;
}
#writers article.a3 aside span,
#writers article.a3 section ul li {
background:#579055;
}
#writers article.a3 h2,
#writers article.a3 section > p,
#writers article.a3 section ul,
#writers article.a3 section ul li:first-child {
color:#579055;
}
#writers article.a3 section ul{
background:#e3ece2;
}
#writers article.a4{
border:1px solid #d6bb38;
}
#writers article.a4 aside span,
#writers article.a4 section ul li {
background:#d6bb38;
}
#writers article.a4 h2,
#writers article.a4 section > p,
#writers article.a4 section ul,
#writers article.a4 section ul li:first-child {
color:#d6bb38;
}
#writers article.a4 section ul{
background:#f7f1d7;
}
#writers article.a5{
border:1px solid #5aa4ae;
}
#writers article.a5 aside span,
#writers article.a5 section ul li {
background:#5aa4ae;
}
#writers article.a5 h2,
#writers article.a5 section > p,
#writers article.a5 section ul,
#writers article.a5 section ul li:first-child {
color:#5aa4ae;
}
#writers article.a5 section ul{
background:#e3f0f1;
}
#writers article.a6{
border:1px solid #c47c8c;
}
#writers article.a6 aside span,
#writers article.a6 section ul li {
background:#c47c8c;
}
#writers article.a6 h2,
#writers article.a6 section > p,
#writers article.a6 section ul,
#writers article.a6 section ul li:first-child {
color:#c47c8c;
}
#writers article.a6 section ul{
background:#f5e9ec;
}
#writers article.a7{
border:1px solid #9eb050;
}
#writers article.a7 aside span,
#writers article.a7 section ul li {
background:#9eb050;
}
#writers article.a7 h2,
#writers article.a7 section > p,
#writers article.a7 section ul,
#writers article.a7 section ul li:first-child {
color:#9eb050;
}
#writers article.a7 section ul{
background:#eaeed9;
}
#writers article.a8{
border:1px solid #cb5d5c;
}
#writers article.a8 aside span,
#writers article.a8 section ul li {
background:#cb5d5c;
}
#writers article.a8 h2,
#writers article.a8 section > p,
#writers article.a8 section ul,
#writers article.a8 section ul li:first-child {
color:#cb5d5c;
}
#writers article.a8 section ul{
background:#f7e5e5;
}
#writers article.a9{
border:1px solid #a98f7b;
}
#writers article.a9 aside span,
#writers article.a9 section ul li {
background:#a98f7b;
}
#writers article.a9 h2,
#writers article.a9 section > p,
#writers article.a9 section ul,
#writers article.a9 section ul li:first-child {
color:#a98f7b;
}
#writers article.a9 section ul{
background:#eee9e5;
}

/* list */
.wrapper{
width:1000px;
margin:0 auto;
overflow:hidden;
}
#global_search{
background:#E5E5E5;
overflow:hidden;
padding:20px 0;
}

#global_search #search_keyword{
width:50%;
float:left;
background:transparent;
padding:25px 0 0 ;
margin-bottom:0;
}
#global_search #search_keyword input{
height:50px;
}
#global_search #search_keyword button{
height:50px;
}
#global_search #search_keyword button i{
font-size:18px;
}
#global_search #search_genre ul{
text-align:right;
}
#global_search #search_genre ul li{
width:100px;
border-radius:8px;
margin-right:10px;
background-size:30px;
background-position: top 15px center;
vertical-align:text-top;
}
#global_search #search_genre ul li.g5{
background-position: top 20px center;
}
#global_search #search_genre{
width:50%;
float:right;
margin-bottom:0;
}
#global_search #search_genre ul li a{
font-size:15px;
padding:52px 0 10px 0;
}
#global_search #search_genre ul li.g5 a{
padding:61px 0 20px 0;
}
#result_info{
padding:5px 0;
margin-bottom:20px;
border-bottom:1px solid #000000;
overflow:hidden;
}
#result_info h2{
float:left;
font-size:22px;
}
#result_info h2 small{
font-size:14px;
}
#result_info dl{
float:right;
margin:10px 0 0;
}
#result_info dt{
float:left;
margin:0 5px 0 10px;
font-size:14px;
line-height:100%;
}
#result_info dd{
float:left;
font-size:12px;
line-height:140%;
}
#result_info dd a{
display:inline-block;
background:#E5e5e5;
color:#000000;
margin-left:5px;
padding:0 5px;
border-radius:5px;
}
#result_info dd a.cur{
background:#CE121B;
color:#ffffff;
}

/* writer detail */
#writer_detail{
}
#writer_detail header{
overflow:hidden;
}
#writer_detail header div{
width:400px;
float:left;
}
#writer_detail header img{
display:block;
float:right;
width:250px;
}
#writer_detail header b{
display:block;
background:#579055;
color:#ffffff;
font-size:20px;
padding:5px 10px;
margin-bottom:10px;
}
#writer_detail header h1{
font-size:35px;
font-weight:normal;
}
#writer_detail header ruby{
display:block;
margin-bottom:0px;
padding:0 0 10px;
line-height:40%;
}
#writer_detail header ruby rt{
font-size:12px;
}

#writer_detail header small{
display:inline-block;
padding:0px 10px;
border-radius:5px;
background:#cb5d5c;
color:#fff;
}

#writer_detail header strong{
display:block;
font-size:14px;
}
#writer_detail header h2{
font-size:26px;
font-weight:normal;
color:#579055;
margin:10px 0 0;
padding:20px 0 0;
border-top:1px solid #579055;
}
#writer_detail p{
line-height:200%;
}
#writer_detail #genre,
#writer_detail #irai
{
background:#e6eee5;
border-radius:0 0 10px 10px;
padding-bottom:10px;
margin-bottom:30px;
}
#writer_detail #genre h2,
#writer_detail #irai h2{
background:#579055;
border-radius:10px 10px 0 0;
color:#ffffff;
font-size:16px;
text-align:center;
padding:5px;
}
#writer_detail #genre ul,
#writer_detail #irai ul{
padding:20px 20px 0px;
}
#writer_detail #genre li{
display:inline-block;
background:#579055;
color:#ffffff;
font-size:20px;
padding:5px;
border-radius:5px;
margin:0 5px 5px;
}
#writer_detail #irai ul{
display:flex;
flex-wrap:wrap;
}
#writer_detail #irai li{
font-size:18px;
color:#579055;
margin:0 15px 20px;
/*
   display:inline-block;
   margin:0 3px 5px;
 */
}
#writer_detail #irai li img{
width:20px;
margin-right:6px;
vertical-align:sub;
}
#writer_detail #irai dl{
margin:0;
padding:0 20px;
}
#writer_detail #irai dt,
#writer_detail #irai dd{
display:inline-block;
}
#writer_detail #irai dt{
font-size:14px;
}
#writer_detail #irai dd{
color:#579055;
margin-right:10px;
}
#writer_detail #app{
border-top:1px solid #579055;
border-bottom:1px solid #579055;
padding:10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
#writer_detail #app dt{
width:20%;
font-size:14px;
}
#writer_detail #app dd{
width:80%;
border-left:1px solid #579055;
padding-left:30px;
color:#579055;
}
#writer_detail #contact{
text-align:center;
}
#writer_detail #contact li{
display:inline-block;
width:300px;
margin: 30px 10px;
text-align:left;
background:#579055;
border:2px solid #3a6439;
border-radius:10px;
}
#writer_detail #contact li.site{
background: url( "../img/ico_contact_site.png" ) center left 15px no-repeat #579055;
background-size:30px;
}
#writer_detail #contact li.mail{
background: url( "../img/ico_contact_mail.png" ) center left 15px no-repeat #579055;
background-size:30px;
}
#writer_detail #contact a{
position: relative;
display: block;
height:100%;
vertical-align: middle;
text-decoration: none;
color: #ffffff;
font-size: 18px;
padding:20px 0 20px 55px;
}
#writer_detail #contact a:before,
#writer_detail #contact a:after{
position: absolute;
top: 0;
bottom: 0;
right: 10px;
margin: auto;
content: "";
vertical-align: middle;
}
#writer_detail #contact a::before{
width: 20px;
height: 20px;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #ffffff;
}
#writer_detail #contact a::after{
right: 9px;
box-sizing: border-box;
width: 10px;
height: 10px;
border: 6px solid transparent;
border-left: 8px solid #579055;
}
#writer_detail #sns{
text-align:center;
margin:30px 0 10px;
}
#writer_detail #sns li{
display:inline-block;
margin:0 15px;
}
#writer_detail #sns img{
/*width:34px;*/
height:30px;
}

#writer_detail #center_banner{
margin:30px 0;
}
#writer_detail #center_banner img{
width:100%;
}



#writer_all{
}
#writer_all h2{
position: relative;
background:#d0121b;
color:#ffffff;
font-size:20px;
padding:5px;
cursor: pointer;
}
#writer_all h2:hover,
#writer_all h2:active,
#writer_all h2.open{
background-color: #8a050a;
}
#writer_all h2::after {
content: "";
position: absolute;
top: 15px;
right: 15px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #fff;
}
#writer_all h2.open:before{
content: "";
position: absolute;
background: #fff;
top: 50%;
right: 24px;
width: 2px;
height: 18px;
transform: translate(-50%, -50%) rotateZ(45deg);
}

#writer_all h2.open::after{
content: "";
position: absolute;
background: #fff;
top: 50%;
right: 24px;
width: 2px;
height: 18px;
transform: translate(-50%, -50%) rotateZ(-45deg);
border:none;
}

#writer_all ul{
background:#fae7e8;
padding:10px 20px;
}
#writer_all ul li{
border-bottom:1px solid #ffffff;
padding:5px 0;
}
#writer_all ul li a{
display:block;
color:#000;
}
#writer_all hr{
border:none;
margin-bottom:30px;
}

#contact #submitArea{
text-align:center;
margin:50px 0;
}
table.formTable{
width:100%;
border-collapse: collapse;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
}
table.formTable th,
table.formTable td{
padding:10px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
table.formTable th{
width:30%;
text-align:left;
}
table.formTable td{
width:70%;
}



@media screen and (min-width:769px){
.sp{
display:none;
}
}

@media screen and (max-width:768px){

.pc{
display:none;
}
header div{
width:auto;
}
main{
width:auto;
}
#mv img{
width:100%;
}
div#side{
width:auto;
}
div#main{
width:auto;
}
div#footer_pr{
display:none;
}
footer div{
width:auto;
}

/*  type demo */
body > header{
padding:0 8px 5px;
}
body > header h1{
width:150px;
margin-top:10px;
}
body > header h1 img{
width:100%;
}
body > header ul{
width:auto;
float:none;
margin-top:5px;
}
body > header ul a{
font-size:12px;
}
body > header ul li{
display:block;
}
body > header ul li:first-child::after{
content:none;
}
body > header ul li:nth-child(3){
float:right;
}
#mv{
margin:15px 0 0;
}
.wrapper{
width:auto;
}
div#side{
float:none;
padding:20px 20px 0;
}
div#side #condition p{
background:#000;
color:#fff;
padding:5px 10px;
position: relative;
}
div#side #condition span{
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: #ffffff;
display: block;
width: 24px;
height: 24px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
border-radius: 50%;
}
div#side #condition span:before,
div#side #condition span:after{
display: block;
content: '';
background-color: #000;
position: absolute;
width: 10px;
height: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div#side #condition span:before{
width: 2px;
height: 10px;
}
div#side #condition p.selected span:before{
content:normal;
}
#side #search_area select{
width:75%;
}
#side #search_area button{
width:23%;
}
div#side aside{
text-align:center;
}
#side #search_area, #side #search_naiyo, #side #news, #side aside{
display:none;
}
div#main{
float:none;
padding:20px;
}
#global_search{
padding:10px 20px;
}
#global_search #search_keyword{
width:auto;
float:none;
height:50px;
}
#search_keyword{
border-radius:10px;
padding:20px 10px;
margin-bottom:0;
}
#search_keyword form{
margin-bottom:20px;
}
#global_search #search_keyword input,
#search_keyword input{
height:30px;
font-size:1em;
padding:0 10px;
}
#global_search #search_keyword button,
#search_keyword button{
height:30px;
width:25%;
}
#global_search #search_keyword button i,
#search_keyword button i{
font-size:12px;
}
.fa-search:before{
content:none !important;
}
#search_keyword ul{
margin-top:40px;
}
#search_keyword ul li{
margin-bottom:0px;
font-size:13px;
}
#search_genre{
margin-bottom:0;
}
#writers{
padding:20px 0;
margin-bottom:0;
}
#global_search #search_genre{
width:auto;
float:none;
/*margin-top:30px;*/
}
#global_search #search_genre ul{
text-align:center;
}
#global_search #search_genre ul li,
#search_genre ul li{
width:24%;
background-position:center 12px !important;
background-size:30px !important;
margin-right:0;
}
#global_search #search_genre ul li a,
#search_genre ul li a{
font-size:12px;
padding:50px 0 10px;
}
#search_genre ul li.g5 a{
padding:58px 0 17px;
}
#global_search #search_genre ul li.g5 a{
padding-top:56px;
}
#global_search #search_genre p{
margin:0;
}
#topicpath{
margin:10px 20px 0;
}
#writers article{
padding:10px;
}
#writers article img{
width:100px;
margin:0 10px 10px 0;
}
#writers article h2{
font-size:20px;
}
#writers article section{
width:auto;
float:none;
}
#writers article section aside{
padding:0 0 0 0px;
}
#writers article section aside span{
font-size:12px;
}
#writers article section aside p{
font-size:12px;
}
#writers article section h3{
font-size:20px;
}
#writers article section ruby{
display:block;
margin-bottom:20px;
}
#writers article section ul li:first-child{
display:block;
}
#writers article section ul li:first-child::after{
content:none;
}
#writers article section p{
font-size:16px;
}
#writers article section ul li{
font-size:12px;
}
#search_genre h2, #writers > h2{
font-size:16px;
}
footer p{
right:20px;
width:50px;
height:50px;
}
footer p a{
font-size:12px;
padding-top:20px;
}
footer p a::before{
top: 7px;
left: 15px;
border-right: 10px solid transparent;
border-bottom: 15px solid #ffffff;
border-left: 10px solid transparent;
}
footer nav{
padding:30px 10px;
}
footer nav ul li{
display:inline-block;
margin-right:30px;
}
footer nav div{
width:auto;
float:none;
margin:0 0 20px;
}
footer small{
font-size:10px;
}

#writer_detail header div{
width:auto;
float:none;
}
#writer_detail header b{
font-size:16px;
}
#writer_detail header h1{
font-size:28px;
}
#writer_detail header ruby{
margin-bottom:5px;
}
#writer_detail header h2{
font-size:24px;
}
#writer_detail header img{
float:none;
width:250px;
margin:0 auto 10px;
}
#writer_detail p{
line-height:180%;
font-size:15px;
margin:10px 0 20px;
}
#writer_detail #genre ul, #writer_detail #irai ul{
padding:10px 10px 0;
}
#writer_detail #genre li,
#writer_detail #irai li{
font-size:14px;
margin:0;
line-height:100%;
}
#writer_detail #irai li{
width:50%;
margin-bottom:10px;
}
#writer_detail #irai img{
width:35px;
}
#writer_detail #app dt{
font-size:12px;
padding:0 10px;
}
#writer_detail #app dd{
font-size:12px;
padding-left:10px;
}
#writer_detail #contact li{
margin:1%;
background-size:20px !important;
background-position:center left 10px !important;
}
#writer_detail #contact li a{
padding:10px 10px 10px 38px;
font-size:13px;
}
#writer_detail #sns img{
/*width:26px;*/
height:26px;
}
#contact input[type=text],
#contact textarea{
width:100%;
box-sizing:border-box;
}





/* ここまで */


}