@charset "utf-8";
/*
Theme Name: pictan-ori
Description: ピク単
Version: 1.0
*/

/* リセット CSS.
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
    border: 0;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
}

:focus {
    outline: 0;
}

ol, ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption, th, td{font-weight:normal;text-align:left;}
blockquote:before, blockquote:after,q:before, q:after{content:"";}
blockquote, q{quotes:"" "";}
a img{border:0;}
figure{margin:0}
/* -------------------------------------------------------------- */
body {
    color: #333;
    font: 14px/1.4 "メイリオ", "Meiryo", arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
    line-height: 1.5;
    overflow-x: hidden;
}

a {
    color: #6caefe;
    text-decoration: none;
}

a:hover {
    color: #488fdd;
}

a:active,
a:focus {
    outline: 0;
}

p{
    margin: 14px 0;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
#content li{
    margin: 0 0 3px 20px;
}

#wrapper h2{
    font-size: 140%;
    font-weight: bold;
    text-align: center;
    margin-top: 35px;
}
#wrapper h2:after{
    background-color: #5e7884; /* 線色 */
    border-radius: 5px; /* 線幅の半分 */
    content: "";
    display: block;
    height: 10px; /* 線幅 */
    width: 150px;
    margin: 5px auto 10px auto;
}
h3{
    font-size: 115%;
    font-weight: bold;
    text-align: center;
    margin:20px auto 10px auto;
}
.center{
    text-align: center;
}
pre{
    background: #EEF2F4;
    border: 1px solid #d6d6d6;
    border-radius: 3px;
    padding: 3px;
}
/* フォーム関連
-----------------------*/

input[type="text"],
input[type="email"],
textarea,
select {
    vertical-align: middle;
    line-height: 30px;
    height: 30px;
    padding: 1px 5px;
    border: 1px solid #d4d4d7;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-size: 100%;
    color: #555;
    background: #fff;
}

textarea {
    height: auto;
    line-height: 1.5;
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
    padding: 4px 12px;
    color: #fff;
    background: #5bc5f6;
    background: -moz-linear-gradient(top, #5bc5f6 0%, #8ad7fa 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc5f6), color-stop(100%, #8ad7fa));
    background: -webkit-linear-gradient(top, #5bc5f6 0%, #8ad7fa 100%);
    background: -o-linear-gradient(top, #5bc5f6 0%, #8ad7fa 100%);
    background: -ms-linear-gradient(top, #5bc5f6 0%, #8ad7fa 100%);
    background: linear-gradient(to bottom, #5bc5f6 0%, #8ad7fa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bc5f6', endColorstr='#8ad7fa', GradientType=0);
    border: 0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-size: 100%;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    background: #5bc5f6;
    background: -moz-linear-gradient(top, #8ad7fa 0%, #5bc5f6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8ad7fa), color-stop(100%, #5bc5f6));
    background: -webkit-linear-gradient(top, #8ad7fa 0%, #5bc5f6 100%);
    background: -o-linear-gradient(top, #8ad7fa 0%, #5bc5f6 100%);
    background: -ms-linear-gradient(top, #8ad7fa 0%, #5bc5f6 100%);
    background: linear-gradient(to bottom, #8ad7fa 0%, #5bc5f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ad7fa', endColorstr='#5bc5f6', GradientType=0);
}


/* 全体
-----------------------*/

.clear {
  clear: both;
}

/*************
/* メニュー
*************/
*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
#header{background:#1E262D;width:100%;position:relative}
#header:after{content:"";clear:both;display:block}
.search{float:left;padding:30px}
input{border:none;padding:10px;border-radius:20px}
.logo{float:left;padding:26px 0 26px}
.logo a{font-size:28px;display:block;padding:0 0 0 20px; color: #fff;}
nav{float:right;}
nav>ul{float:left;position:relative}
nav li{list-style:none;float:left}
nav .dropdown{position:relative}
nav li a{float:left;padding:35px; color: #fff;}
nav li a:hover{background:#2C3E50}
nav li ul{display:none}
nav li:hover ul{display:inline}
nav li li{float:none}
nav .dropdown ul{position:absolute;left:0;top:100%;background:#fff;padding:20px 0;border-bottom:3px solid #34495e}
nav .dropdown li{white-space:nowrap}
nav .dropdown li a{padding:10px 35px;font-size:13px;min-width:200px}
nav .mega-dropdown{width:100%;position:absolute;top:100%;left:0;background:#fff;overflow:hidden;padding:20px 35px;border-bottom:3px solid #34495e}
nav li li a{float:none;color:#333;display:block;padding:8px 10px;border-radius:3px;font-size:13px}
nav li li a:hover{background:#bdc3c7;background:#FAFBFB}
.mega-col{width:25%;float:left}
#menu-icon{position:absolute;right:0;top:50%;margin-top:-12px;margin-right:30px;display:none}
#menu-icon span{border:2px solid #fff;width:30px;margin-bottom:5px;display:block;-webkit-transition:all .2s;transition:all .1s}
@media only screen and (max-width: 1170px) {
  nav >ul>li >a{padding:35px 15px}
}
@media only screen and (min-width: 960px) {
  nav{display:block!important}
}
@media only screen and (max-width: 959px) {
  nav{display:none;width:100%;clear:both;float:none;max-height:400px;overflow-y:scroll}
  #menu-icon{display:inline;top:45px;cursor:pointer}
  #menu-icon.active .first{transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-top:10px}
  #menu-icon.active .second{transform:rotate(135deg);-webkit-transform:rotate(135deg);position:relative;top:-9px;}
  #menu-icon.active .third{display:none}
  .search{float:none}
  .search input{width:100%}
  nav{padding:10px}
  nav ul{float:none}
  nav li{float:none}
  nav ul li a{float:none;padding:8px;display:block}
  #header nav ul ul{display:block;position:static;background:none;border:none;padding:0}
  #header nav a{color:#fff;padding:8px}
  #header nav a:hover{background:#fff;color:#333;border-radius:3px}
  #header nav ul li li a:before{content:"- "}
  .mega-col{width:100%}
}


/*************
/* メイン
*************/
@media only screen and (min-width: 501px) {
    #head-search{
        display: none;
    }
#top-wrapper{
        width: 100%;
    height: 40vh;
    text-align: center;
    padding: 100px 0 0 0;
    background: url(images/top-img-min501.jpg) no-repeat;
    background-position: top center;
    background-size: cover;
    color: #fff;
}
#top-wrapper h1{
    font-size: 22px;
    font-weight: bold;
}
#top-wrapper h2{
    font-size: 16px;
    font-weight: normal;
}
#top-wrapper div.formbox{
    margin: 20px auto;
    width: 500px;
    text-align: center;
}
#top-wrapper div.formbox form input[type="search"]{
    width: 450px;
    margin: 0 0 0 -20px;
    font-size: 116%;
    padding: 14px;
}
}
@media only screen and (max-width: 500px) {
    #head-search{
        display: none;
    }
    #top-wrapper {
        width: 100%;
        height: 40vh;
        padding: 40px 0 0 0;
            background: url(images/top-img-min501.jpg) no-repeat;
    background-position: top center;
    background-size: cover; 
        color: #fff;
    }
    #top-wrapper div.formbox form input[type="search"] {
        width: 300px;
        margin: -30px 0 0 -3px;
    }
}
@media only screen and (max-width: 414px) {
    #head-search{
        display: contents;
    }
    #head-search input[type="search"] {
        border: 1px solid #ccc;
        margin: -10px 0;
    }
    #top-wrapper {
        width: 100%;
        height: 25vh;
        text-align: center;
        padding: 34px 10px 0 10px;
        background: url(images/top-img-max414.jpg) no-repeat;
    background-position: top center;
    background-size: cover; 
        color: #fff;
    }
    #top-wrapper h1 {
        font-size: 18px;
        font-weight: bold;
    }
    #top-wrapper h2 {
        font-size: 13px;
        font-weight: normal;
    }
    #top-wrapper div.formbox {
        display: none;
    }
}

#wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 30px 0;
    background: #f1f1f1;
}

/*********pageナビ*********/
.pagenavi{
    color: #2583ad;
    margin: 15px auto;
    line-height:2em;
    text-align:center;
    clear: both;
}
.pagenavi a{
    text-decoration:none;
}
.pagenavi a.page-numbers, .pagenavi .current{
    color: #000;
    padding: 4px 7px;
    border:solid 1px #5c6974;
    text-decoration:none;
    font-size:16px;
    border-radius: 3px;
    background: #f8f8f8;
}
.pagenavi a.page-numbers:hover{
    color:#fff;
    background: #1E262D;
}
.pagenavi .current{
    color: #fff;
    background: #1E262D;
    border-color: #1E262D;
    font-weight:bold:
}
.pagenavi .next, .pagenavi .prev{
    border:0 none;
    background:transparent;
    text-decoration:none;
    font-size:16px;
    font-weight:bold;
}

/* 記事ページ */

#subcontent{
    min-width: 300px;
    max-width: 1115px;
    margin: 0 auto;
}
#wrapcontent{
    width: 100%;
  float: left;
  margin-right: -300px;
}
#content{
    height: auto;
    margin: 0px 315px 15px 0;
    padding: 0px 0 15px 0;
    background: #fff;
    line-height: 24px;
}
.post{height: 100%;}
.post img{width: 100%; height: auto;}
.picture{
    max-width: 800px;
    text-align: center;
    margin: 0;
}
.picture img{
    width:auto;
    max-height: 550px;
    max-width:100%;
    max-height:100%;
    margin: 0;
}

.inner {
    padding: 0 20px;
}

.dlbox{
    text-align: center
}
.dlbtn{
    display: block;
    padding: 16px 30px;
    margin: 20px auto;
    width: 260px;
    font-size: 120%;
    font-weight: bold;
    background: #e6a800;
    border-radius: 3px;
    color: #fff;
}
.dlbtn:hover{
    background: #f2b91f;
    color: #fff;
}
/** 広告 **/
.ads-dlunder{
    text-align: center;
    margin: 15px 0 0 0;
    font-size: 13px;
    color: #777;
}
/** ダミー広告 **/
.ads-h280{
    width: 100%;
    height: 280px;
    background: #ddd;
}
.ads-side{
    width: 100%;
    height: 600px;
    background: #ddd;
}
/** テーブル **/
table.picinfo {
    border-collapse: collapse;
    font-size: 90%;
    margin: 25px 0;
    width: 100%;
    border-top: 1px dotted #ccc;
    clear: both;
}
.picinfo tr {
     border-bottom: 1px dotted #ccc;
}
.picinfo td, .picinfo th {
  padding: 6px 9px;
}
.picinfo th {
    width: 75px;
}

/* パンくずリスト */
.pankuzu{
    font-size: 90%;
    padding: 3px 10px;
    margin: 0;
}
#breadcrumb li a{
color: #555;
text-decoration: none;
}
#breadcrumb li{
float: left;
list-style: none;
margin: 0 6px 0 0;
}

/** お気に入り **/
.simplefavorite-button{
	float:left;
	padding:3px 5px 3px 23px;
    margin: 0 5px 0 0;
	background:#fafafa;
	border:1px #b2b2b2 solid;
	border-radius:3px;
	width:130px;
	text-align:center;
    color: #000;
    background: url(https://anime-culture.com/wp-content/themes/wp-mobi-ani/images/i-favorite.svg) no-repeat 3px 4px;
    cursor : pointer;
}
a.simplefavorite-button{
	color:#000;
}

/** taglist **/
.taglist{
    clear: both;
}
.taglist li{
    background: #fff;
    border: 1px solid #bcbcbc;
    border-radius: 10px;
    padding: 2px 6px;
    margin: 3px 2px;
    float: left;
    width: auto;
    list-style: none;
}
.taglist li:hover{
    background: #fff8e0;
}
.taglist li a{
    color: #222;
}

/** 固定ページ **/
#pagecontent{
    background: #fff;
    min-width: 300px;
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
}


/** 99-3-b. アーカイブ **/
.cate-descri{
    max-width: 1160px;
    height: auto;
    text-align: center;
    margin: 0 auto;
    padding: 8px 8px;
    background-position: top center;
}
.containt-archive {
  margin: 0 auto;
  padding: 5px;
  width: 100%;
    max-width: 1280px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.content-archive-or{
    width: 300px;
    height: 325px;
    margin: 7px;
    padding: 0;
    -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
    -moz-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
    -ms-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
    box-shadow: 0 0 13px rgba(0, 0, 0, .07);
    background: #fff;
}
.inarticle-archive-or{
    width: 300px;
    height: 325px;
    margin: 7px;
    padding: 0;
    -webkit-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
    -moz-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
    -ms-box-shadow: 0 0 13px rgba(0, 0, 0, .07);
    box-shadow: 0 0 13px rgba(0, 0, 0, .07);
    background: #fff;
}
.archive-img{
    margin: 0;
    padding: 0;
}
.archive-title{
    padding: 5px;
    margin: 0;
    text-align: center;
    font-size: 14px;
}
.archive-text{
    padding: 10px 0px 5px;
    margin: 0 20px;
    color: #696969;
    font-size: 12px;
    border-top:1px solid #696969;
}

.amazon-wish{
    min-width:250px;
    max-width:300px;
    margin: 3px auto;
    padding: 6px;
    background: #FF9900;
    border-radius: 3px;
}
.amazon-wish a{
    color: #fff;
}
/*************
/* サイドバー
*************/
#sidebar{
    width: 300px;
    min-height: 280px;
    float: right;
    background: #fff;
    padding: 5px;
}
.ads-side{
    clear: both;
    margin:8px -5px;
}
@media (max-width: 720px) {
  #wrapcontent, #content, #sidebar {
    float: none;
    margin: 0px;
    width: auto;
  }
}
/*************
グリッド 
*************/
* {
  box-sizing: border-box;
}

.grid img {
  width: 100%;
    height: auto;
  vertical-align: bottom;
}
.grid .pic a{
    margin: 0;
    padding: 0;
}

.container {
  margin: 0 auto;
  padding: 5px;
  width: 100%;
    max-width: 1200px;
  column-count: 4;
  column-gap: 0;
}

@media (max-width: 1000px) {
  .container {
    column-count: 3;
  }
}
@media (max-width: 800px) {
  .container {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .container {
    column-count: 1;
  }
}

.grid {
  padding: 5px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.text {
  padding: 20px;
  background-color: #e0f2f1;
}

.pic {
  padding: 0px 0;
}

.pic > *:not(img) {
  padding: 0 0;
}

@media (min-width: 481px) {
figure {
  position: relative;
  overflow: hidden;
  max-width: 300px;
}
    }
figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: auto;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .5s;
    color: #fff;
  opacity: 0;
}
figcaption h3{font-weight: normal; margin: 3px;}
figure:hover figcaption {
  opacity: 1;
}
@media (max-width: 480px) {
  figure {
      position: relative;
  overflow: hidden;
    max-width: 480px;
  }
}


/*************
/* フッター
*************/

#footer {
    clear: both;
    margin: 0;
    padding: 12px;
}
#footer ol, #footer ul{list-style:disc;
margin: 0 0 0 17px;
    font-size: 90%;
}
#footer ol a, #footer ul a{list-style:circle;
    color: #666;
}