/*
Theme Name: blog-m4
Theme URI: http://blog.web-mk.net
Description: A theme by <a href="http://blog.web-mk.net">blog-m</a>.
Version: 1
Author: blog-m
Author URI: http://blog.web-mk.net

*/
@charset "UTF-8"
/* 誤差修正 */
*{box-sizing:border-box;}
* { margin:0; padding:0; font-family:"メイリオ","Meiryo","ＭＳ Ｐゴシック", Osaka, verdana ,arial ,sans-serif; border:0px; list-style-type: none; font-weight:normal; text-align:left;}
/* 基本設定 */
html{font-size:62.5%;}
body { font-size:1.4rem; background-color:#F5F5F5; border-top:3px solid #6CF;}
a { color:#333; text-decoration:none;}
.article_body a{color:#39F; text-decoration:underline;}
.article_body a:hover { text-decoration:none;}

/* 属性指定 */
.pd_typeA{padding:24px;}
.pd_typeA_ub {padding:24px 0;}
.pd_typeA_lr {padding:0 24px;}


/* ページ要素 */
.page_header {text-align: center;}
.page_footer {text-align: center; margin-top:32px;}
.page_header h1 {font-size:1.2rem;text-align:center;}

/* コンテンツ要素 */
.section {margin-top:_32px;}
.section:first-child{margin-top:0;}
.block {margin-top:32px; padding:0 24px}
.block.comment{margin-top:0;}
.block_title {text-align:center;margin-bottom:8px;padding-bottom:8px;}

.article {border:1px solid #CCC; position: relative; background: #FFF;}
.article:last-child {margin-bottom:0;}
/* 一覧のみ */
.article .noimg,
.article .article_top_img { display:block; width:96px; height:160px; object-fit:cover; object-position:50% 0; float: left; margin-right: 24px;}

.article_header {font-size:2.0rem; line-height: calc(2rem + 8px);}
.article_header a {color:#000;}
.article_header a:before {content:''; position: absolute; top:0; left:0; width:100%; height:100%; display: block;}
.article_date { font-size: 1.2rem; display: block; margin: 8px; text-align: right; color: #999;}
.article_body {}
.article_body h3 {font-size:2.0rem; color:#333; line-height: 180%; margin-bottom: 1rem;letter-spacing: 0.5px;}
.article_body p {font-size:1.6rem; color:#555; line-height: 180%; margin-bottom: 3rem;letter-spacing: 0.5px;}
.article_body p:first-child{margin-top:1rem;}
.article_body p img { max-width:100%; height:auto; display:block; margin:auto;}
.article_body p a {text-decoration:underline;}


.list_article .article {margin-bottom:-1px;clear:both;min-height:160px;max-height:160px;overflow: hidden;}
.list_article .article_body { overflow: hidden; }
.list_article .article_body p:first-child img { display:none;}

.page.home_bottom {margin-top:32px;}
.home_bottom .contents_item {margin-bottom:32px; border:1px solid #CCC; background: #FFF; position:relative;}
.home_bottom .contents_item .list_cat_title {padding:16px 24px 0px;}
.home_bottom .contents_item .list_cat_article {padding:12px 24px 24px;}
.link_more a{position:absolute; bottom:0; right:0; width:100%; height:100%; text-indent:-9999px;}

.list_cat_title {font-size:1.6rem; text-align: center;}
.list_cat_article a {display: block;}
.list_cat_article .date{font-size:1.2rem;color:#999;}
.list_cat_article .atc--title {width:100%; padding-left: 1px; display:inline-block; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}

.section_header { font-size:2rem; font-weight:bold; text-align: center; padding:32px 0 16px;}

.global_menu {width:100%;}
.global_menu li a {display: block; text-align: center; padding: 8px 0;}
.global_menu li ul {display:flex; flex-wrap:wrap;}
.global_menu li ul li {width:50%;}
.global_menu li ul li a:hover {}

.footer_menu {width:100%; max-width:480px;margin:24px auto 0;}
.footer_menu li a {display: block; text-align: center; padding: 8px 0;}
.footer_menu li ul {display:flex; flex-wrap:wrap;}
.footer_menu li ul li {width:25%;}
.footer_menu li ul li a:hover {}

.list_recommend ul {}
.list_recommend .list1 li {border-bottom:1px solid #CCC; background:#FFF;}
.list_recommend .list2 li {border-bottom:1px solid #CCC; background:#FFF;}
.list_recommend li a {display:block; height:100%; width:100%; vertical-align:middle; font-size:1.6rem;}
.list_recommend li a span.thumb {display:inline-block; text-align:center; width:80px; height:80px; background:#EEE; color:#999; margin-right: 16px; vertical-align:middle;}
.list_recommend li a img {display:inline-block; width:80px; height:80px; vertical-align:middle;object-fit: cover;}
.list_recommend li a img:hove {opacity:0.8;}
.list_recommend li a span {display:inline-block;padding:16px;}

.pager {}
.pager > div {margin:auto;}
.pager ul {display:flex; justify-content:center; margin: auto; align-items: center;}
.pager li a { font-size:1.6rem; display: block; padding:8px; text-align: center; border:1px solid #F5F5F5; }
.pager .active_page a { font-weight: bold; border:1px solid #CCC;}

/* コメント */
#commentform {}
#commentform textarea {width:100%;border:1px solid #CCC;padding:16px; height:120px; background:#FFF;box-sizing:border-box;}
#commentform .form-submit .submit {display:block; width:100%; margin-top:-2px; text-align: center; margin: auto; border:1px solid #CCC; padding:8px;}
.comment-reply-title {text-align:center;}

/* アイテム */
.af_block{margin:32px 0;}
.aflink {display:flex; justify-content:space-between; margin-bottom:32px;}
.aflink .item {width:calc(calc(100% - 32px) / 3);}
.aflink .item img {display: block; margin: 8px auto; max-width:100%; }
.aflink .item img:hover {opacity:0.8; }
.afbtn {display:flex;justify-content: space-between; padding:0;}
.afbtn li {width:48%;}
.afbtn li a {display:block; padding-top:6px; background:#FFF; text-align: center; border:1px solid #CCC;}
.afbtn li a:hover{opacity:0.6;}
.waku {background:#FFF; border:1px solid #CCC; padding:24px;}

/* Tweet */
.side-cont {padding:0 16px;}
.tweet li {font-size:1.4rem; color:#666; line-height: 150%; margin-bottom:32px;}
.tweet li .twimg {display: block; margin:0 auto 8px;}

/* カレンダー */
#wp-calendar {width:100%;}
#wp-calendar caption {background-color:#999;color:#FFF;text-align:center;padding-top:3px;}
#wp-calendar thead th {text-align:center;font-weight:bold;}
#wp-calendar tbody td {text-align:center;color:#999}
#wp-calendar tbody td a {text-align:center;display:block;text-decoration:none;font-weight:bold;border:1px solid #6CF}
#wp-calendar tbody td a:hover{color:#FFF;background:#6CF}
#wp-calenter tfoot #next {text-align:right}

/* カレンダーAjax */
span#cat_calendar{}
table#wp-catcalendarajax{width:100%;}
table#wp-catcalendarajax caption {text-align:center;margin:auto;font-weight:bold;}
table#wp-catcalendarajax th {text-align:center;font-weight:bold;}
table#wp-catcalendarajax td {text-align:center;color:#999}
table#wp-catcalendarajax td a {text-align:center;display:block;text-decoration:none;}
table#wp-catcalendarajax td a:hover {color:#FFF;background:#6CF}
table#wp-catcalendarajax td#prev a { text-align:left;border:none;}
table#wp-catcalendarajax td#next a { text-align:right;border:none;}

.sp_menu_btn {background: #000; width:30px; height:30px; border-radius: 0; box-sizig:border-box; transition:all 0.5s; position:fixed; top:6px; right:12px; z-index:40; opacity:0.8;outline: none;}
.sp_menu_btn div span { width:calc(100/1*1%); position: relative; height:6px;}
.sp_menu_btn div span:after { content:''; display:block;opacity:1; margin:auto; width:100%; height:6px; background: #F5F4EF; transition:all 0.5s; -webkit-tap-highlight-color:rgba(0,0,0,0);}
.sp_menu_btn div {margin:6px 0; position: relative;}
.sp_menu_btn.active {border-radius: 100px}
.sp_menu_btn.active .dt1:after { transform: translateX(0px) translateY(6px) rotate(225deg);}
.sp_menu_btn.active .dt2:after { transform: translateX(0px) translateY(-6px) rotate(-225deg);}
.sp_menu {position:fixed; top:4px; margin:0 4px; border-radius:8px; overflow: hidden; background: rgba(0,0,0,0.8); display: none;z-index:30;}
.sp_menu_margin {height:20px; display: none; background: #333;}

.mokuji li a { display: block; padding:4px 32px;}

@media (max-width:1080px){
  .block.list_recommend{}
  .tweet {display:none;}
  .global_menu{position:relative;top:0;background:#FFF;position:absolute;display:none;}
  .category .list_article .section{display:flex; flex-direction:column-reverse;}
}

@media (min-width:1080px){

  .page { width:1080px; margin: auto;}
  .page_sub { width:calc(1080px - 400px); margin:auto;}

  .pd_typeA{padding:32px;}
  .pd_typeA_ub {padding:32px 0;}
  .pd_typeA_lr {padding:0 32px;}
  .block {padding:0 32px}
  .waku {padding:32px;}

  /* レイアウト */
  .page_contents {display:flex;flex-wrap:wrap; justify-content:space-between;}
  .page_contents .contents_main {order:0; width:calc(100% - 200px);}
  .page_contents .contents_sub {order:-1; width:200px;}
  .page_contents .contents_item {width:calc(calc(100% - 64px)/3);}
  
  .section {display:flex;}
  .section .section_main {width:calc(100% - 200px);}
  .section .section_sub {width:200px;}

  .side-cont {position:sticky; top:32px; }
  .single .side-cont {height:90vh; overflow:scroll;}
  .global_menu {position:sticky; top:32px;}
  .related_item {position:sticky; top:32px; width:140px; margin: auto;}

  .list_recommend ul{ display:flex; flex-wrap:wrap; justify-content:space-between;}
  .list_recommend li {width:calc(calc(100% - 8px)/4);}
  .list_recommend .list1 li a span.thumb {display:block;text-align:center;width:100%; height:150px;background:#EEE;color:#999;padding-top:64px;}
  .list_recommend .list1 li a img {display:block;width:100%;height:150px;margin:auto;}

.mokuji { position:sticky; top:32px;}
.mokuji li a { padding:8px 16px;}
.mokuji .current a { background: #EEE;}

  .sp_menu_btn{display:none;}

}

.pager {text-align:center}
.pager span {display:inline-block; padding:8px; line-height:100%; min-width:1em;}
.pager a {display:inline-block; padding:8px; line-height:100%; }
.pager .current {background:#6CF; color:#FFF;}
/* end