@charset "UTF-8";
/*
Theme Name: material
Theme URI:http://creatorclip.info/
Description:Material Design
Author:とくめい
Version:4.0
*/
/* -------------------------------------------------------
	PC：3カラム
--------------------------------------------------------*/
@media screen and (max-width: 1320px) {
  #contents, .inner, #breadcrumbList ul {
    width: 92%;
    max-width: 970px;
  }

  /* ------------------------------------	
  	ヘッダー
  ------------------------------------ */
  header .inner .navBtn {
    visibility: visible;
  }

  /* ------------------------------------
  	ナビゲーション
  ------------------------------------ */
  nav #grobalNav {
    width: 100%;
  }
  nav #grobalNav li a {
    margin-bottom: 0;
  }

  #social {
    display: none;
  }

  /* ------------------------------------
  コンテンツ
  ------------------------------------ */
  #contents .column2 {
    float: none;
  }

  /* ドロワー */
  #drawer {
    position: absolute;
    top: 192px;
    left: 0;
    width: 320px;
    height: 0;
    z-index: 999;
    background: #f2f2f2;
    -webkit-transition: 0.3s;
            transition: 0.3s;
    border-radius: 0;
    -webkit-transform: translate3d(-100%, 0, 1px);
            transform: translate3d(-100%, 0, 1px);
  }
  #drawer .scroll {
    height: 100%;
    padding: 1em;
    overflow: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .ie #drawer {
    left: -100%;
  }

  #drawer.active {
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate3d(0, 0, 1px);
            transform: translate3d(0, 0, 1px);
  }

  .ie #drawer.active {
    left: 0;
  }

  #drawer.active a {
    tap-highlight-color: transparent;
  }
  #drawer h2 {
    margin: 0.5em 0.25em;
  }
  #drawer #categories-2 > ul, #drawer #archives-2 > ul {
    margin: 0 -1em;
  }

  /* PC・タブレット横：2カラム */
}
/* -------------------------------------------------------
PC・タブレット横：2カラム
--------------------------------------------------------*/
@media screen and (max-width: 960px) {
  /* 記事一覧 */
  #entry article .postInner h1 {
    font-size: 120%;
  }

  /* シェア */
  #entry article .postText #share ul li {
    width: 33.333%;
  }

  /* ページャー */
  .pager ul {
    display: block;
  }
  .pager ul li {
    display: block;
  }
  .pager ul li .pagerInner {
    display: block;
  }
  .pager ul li.prev {
    border-bottom: 1px solid #eee;
  }

  /* PC・タブレット横：2カラム */
}
/* -------------------------------------------------------
Tab縦：1カラム
--------------------------------------------------------*/
@media screen and (max-width: 768px) {
  #breadcrumbList ul {
    width: 100%;
    max-width: 100%;
  }

  #KeyVisual {
    height: auto;
    padding-bottom: 60px;
    background-color: #FFC107;
  }
  #KeyVisual #keyBg {
    opacity: 0.5;
  }
  #KeyVisual #KeyInner:before {
    content: normal;
    background: none;
  }

  .category #contents, .home #contents {
    margin-top: 1em;
  }

  /* ------------------------------------
  	ヘッダー
  ------------------------------------ */
  header .inner {
    width: 92%;
  }
  header .inner .navBtn {
    left: 0;
  }
  header .inner .search {
    right: 0;
  }

  /* 検索窓 */
  .search.active {
    top: 14px;
    width: 100%;
  }
  .search.active label {
    position: absolute;
    top: 50%;
    left: 0px;
    text-align: left;
    margin-top: -16px;
    tap-highlight-color: transparent;
  }
  .search label .ripple {
    left: 0;
  }
  .search form .bar {
    bottom: 0;
  }
  .search.active form {
    display: block;
    width: 100%;
    text-align: left;
    padding-left: 40px;
    padding-bottom: 10px;
    box-sizing: border-box;
  }
  .search.active form input {
    display: block;
    width: 100%;
    text-align: left;
  }

  @-webkit-keyframes searchForm {
    0% {
      width: 0px;
    }
    100% {
      width: 100%;
    }
  }
  @keyframes searchForm {
    0% {
      width: 0px;
    }
    100% {
      width: 100%;
    }
  }
  /* ------------------------------------
  	ナビゲーション
  ------------------------------------ */
  /* グローバルナビゲーション */
  nav #grobalNav li a {
    padding: 1em 0.5em;
  }
  nav #grobalNav li a i {
    display: block;
    margin: 0 auto 0.25em;
  }

  /* ------------------------------------
  コンテンツ
  ------------------------------------ */
  #contents .column2 {
    padding-right: 0;
  }

  /* 記事 */
  #entry {
    float: none;
    max-width: none;
    margin-right: 0;
  }
  #entry article.postList .postInner .postFooter {
    position: static;
    width: auto;
    padding: 0;
  }

  /* サイドバー */
  #side {
    float: none;
    position: static;
    width: auto;
    margin: 30px 0 0;
  }
  #side .mokuji {
    display: none;
  }

  .fixed-side, .bottom-side {
    position: static;
    width: auto;
  }

  /* Tab縦：1カラム */
}
/* -------------------------------------------------------
	Tab縦・SP横：1カラム
--------------------------------------------------------*/
@media screen and (max-width: 640px) {
  .res-sp-block {
    display: block !important;
  }

  .res-sp-none {
    display: none !important;
  }

  /* ------------------------------------
  パンくずリスト
  ------------------------------------ */
  #breadcrumbList ul li.home {
    display: none;
  }

  /* ------------------------------------
  記事本文
  ------------------------------------ */
  #entry article.postList {
    margin-bottom: 1em;
  }
  #entry article.postList:hover {
    background: #fff;
  }
  #entry article.postList .thumb, #entry article.postList .postInner {
    display: block;
    width: auto;
  }
  #entry article.postList .thumb .bg {
    max-width: auto;
  }

  /* 記事一覧を1カラムに */
  #entry article .postInner .entryMeta {
    display: block;
  }
  #entry article .postInner .entryMeta h1 {
    display: block;
    margin: 0.5em 0 0;
    padding-left: 0;
  }
  #entry article .postInner .entryMeta p.date {
    display: inline-block;
    float: none;
    width: auto;
    height: auto;
  }
  #entry article .postInner .entryMeta p.date time .year, #entry article .postInner .entryMeta p.date time .week {
    display: inline-block;
  }
  #entry article .postInner .entryMeta p.date:after {
    top: auto;
    left: 50%;
    bottom: -10px;
    margin-left: -5px;
    border-left-color: transparent;
    border-top-color: #2196F3;
  }
  #entry article .postInner .entryMeta p.date time .year:after, #entry article .postInner .entryMeta p.date time .monthDay:after {
    content: "/";
    padding: 0 2px;
  }

  .shoplinkamazon a:before, .shoplinkrakuten a:before {
    display: block;
    margin-right: 0;
    font-size: 135%;
  }

  .shoplinkamazon a:before {
    position: relative;
    top: 0.15em;
  }

  /* 投稿者 */
  #contents article.post #author dt, #contents article.post #author dd {
    float: none;
    display: block;
  }
  #contents article.post #author dt {
    display: block;
    margin: 0 auto 20px;
    padding-right: 0;
  }

  /* テーブル */
  .postText table tr {
    display: block;
  }
  .postText table tr th, .postText table tr td {
    display: block;
  }
  .postText table tr th, .postText table tr td {
    border-bottom: none;
  }
  .postText table tr:last-child td {
    border-bottom: 1px solid #ccc;
  }

  .tableBlock02 table thead {
    display: none;
  }
  .tableBlock02 table tbody th {
    text-align: left !important;
  }
  .tableBlock02 table tbody th, .tableBlock02 table tbody td {
    display: block;
    margin: -1px;
  }
  .tableBlock02 table tbody tr td:before {
    display: block;
    content: attr(data-th) ": ";
    font-weight: bold;
    text-align: left;
  }
  .tableBlock02 table tbody tr.inline td:before,
  .tableBlock02 table tbody tr td.inline:before {
    display: inline-block;
  }
  .tableBlock02 table tbody td[data-th=""] {
    background: #f2f2f2;
  }
  .tableBlock02 table tbody td[data-th=""]:before {
    display: none;
  }

  .postText > table tr {
    margin-bottom: 1em;
  }
  .postText > table tr th, .postText > table tr td {
    margin: -1px 0;
  }
  .postText > table tr th:empty {
    display: none;
  }

  /* Tab縦・SP横：1カラム */
}
/* -------------------------------------------------------
SP横：1カラム
--------------------------------------------------------*/
@media screen and (max-width: 480px) {
  #KeyVisual dl dt {
    font-size: 2em;
  }

  #entry article.post .postInner {
    padding: 1em 1em 0;
  }
  #entry article .postText {
    overflow: hidden;
    padding-left: 1em;
    padding-right: 1em;
  }
  #entry article .postText .related_article .eyecatch {
    float: none;
    width: auto;
    margin: 0 0 4%;
  }
  #entry article .postText h2, #entry article .postText h3 {
    margin-left: -1em;
    margin-right: -1em;
    padding-left: 1em;
    padding-right: 1em;
  }

  .bookmarklet-gp a + small {
    margin-top: 1em;
  }

  /* SP横：1カラム */
}
/* -------------------------------------------------------
SP横：1カラム
--------------------------------------------------------*/
@media screen and (max-width: 375px) {
  nav .inner, #breadcrumbList ul, #contents {
    width: auto;
  }

  #entry article .postText #share ul li > a span {
    display: none;
  }

  /* ------------------------------------
  ヘッダー
  ------------------------------------ */
  header .inner h1 {
    position: relative;
    top: -0.05em;
    font-size: 150%;
    line-height: 1.25;
  }

  /* ドロワーアイコン */
  .menu-trigger {
    width: 29px;
    height: 22px;
  }
  .menu-trigger span:nth-of-type(2) {
    top: 9px;
  }

  /* 1本目 */
  @-webkit-keyframes active-menu-bar01 {
    100% {
      -webkit-transform: translateY(9px) rotate(-45deg);
              transform: translateY(9px) rotate(-45deg);
    }
  }
  @keyframes active-menu-bar01 {
    100% {
      -webkit-transform: translateY(9px) rotate(-45deg);
              transform: translateY(9px) rotate(-45deg);
    }
  }
  /* 3本目 */
  @-webkit-keyframes active-menu-bar03 {
    100% {
      -webkit-transform: translateY(-9px) rotate(45deg);
              transform: translateY(-9px) rotate(45deg);
    }
  }
  @keyframes active-menu-bar03 {
    100% {
      -webkit-transform: translateY(-9px) rotate(45deg);
              transform: translateY(-9px) rotate(45deg);
    }
  }
  /* ------------------------------------
  ナビゲーション
  ------------------------------------ */
  /* グローバルナビゲーション */
  nav #grobalNav li a {
    font-size: 100%;
  }

  /* ------------------------------------
  パンくずリスト
  ------------------------------------ */
  #breadcrumbList {
    display: none;
  }

  /* ------------------------------------
  コンテンツ
  ------------------------------------ */
  /* ドロワー */
  #drawer {
    width: 90%;
    box-sizing: border-box;
  }

  #side .profile .avatar {
    left: 50%;
    margin-left: -50px;
  }
  #side .profile figcaption {
    bottom: -67px;
    left: 0;
    width: 100%;
    text-align: center;
  }
  #side .profile .description {
    padding-top: 80px;
  }

  /* 記事 */
  #entry article.postList .postInner {
    font-size: 88%;
  }
  #entry article .postInner {
    padding: 1em;
  }
  #entry article.post .thumb .shareBtn {
    right: 15px;
    -webkit-transform-origin: 15% -150%;
    -ms-transform-origin: 15% -150%;
    transform-origin: 15% -150%;
  }
  #entry article .postInner .postMeta .date, #entry article .postInner .postMeta .category, #entry article .postInner .postMeta .moreBtn {
    float: none;
  }
  #entry article .postInner .postMeta .date {
    margin-top: 0.5em;
  }
  #entry article.postList .postInner .postFooter ul li {
    display: block;
    width: 100%;
  }
  #entry article.postList .postInner .postFooter ul li.moreBtn {
    display: none;
  }
  #entry article .thumb .category {
    font-size: 88%;
  }
  #entry article .postText {
    /* シェア */
  }
  #entry article .postText h1 {
    font-size: 125%;
  }
  #entry article .postText .kaerebalink-image, #entry article .postText .kaerebalink-info {
    display: block;
    margin: 0 auto;
  }
  #entry article .postText .kaerebalink-image {
    float: none;
    margin-bottom: 1em;
    text-align: center;
  }
  #entry article .postText .kaerebalink-info {
    margin-left: 0;
  }
  #entry article .postText #share ul li > a i {
    display: block;
    margin: 0;
    font-size: 200%;
  }
  #entry article .postText #share ul li > a i.fa-facebook-official {
    display: block;
    margin: 0;
    font-size: 200%;
  }

  /* サイドバー */
  #side {
    width: 92%;
    margin: 30px auto 0;
  }

  /* SP横：1カラム */
}
/* -------------------------------------------------------
スマホ横：１カラム
--------------------------------------------------------*/
@media screen and (max-height: 480px) {
  /* header {
  	position:static;
  }
  nav {
  	padding-top: 0;
  }
  #contents #drawer {
  	top:0 !important;
  	height:100vh !important;
  }*/
  /* スマホ横：１カラム */
}
/* -------------------------------------------------------
	UA判別スマホ：１カラム
--------------------------------------------------------*/
/*.iOS header {
	position:static;
}
.iOS nav {
	padding-top: 0;
}
.iOS #contents #drawer {
	top:0 !important;
	height:200vh !important;
}*/
.android .blur {
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  -ms-filter: blur(0);
  filter: blur(0);
}