/* <system section="theme" selected="10328749687185893787"> */
/* _________________

  Theme:  Modernist
  Author:  Kazuma Tojo
  Responsive:  yes
  _______________________*/

@import url(https://fonts.googleapis.com/css?family=Quattrocento:400,700);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,700,700i);
@import url(https://fonts.googleapis.com/css?family=PT+Sans);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);

/*=========================*
   Default Settings
/*=========================*/

header, nav, section, article, aside, footer {
   display: block;
}

html *:not(ul), *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

ul {
   box-sizing: border-box;
}

body ul.hatena-urllist li {
   margin-top: 1em;
}

body code, body pre {
   font-family: "Lucida Console", Monaco !important;
   font-size: 1em;
}

html {
   font-size: 16px;
   background: url(http://img.f.hatena.ne.jp/images/fotolife/D/DDramonQ/20160925/20160925130022.png);
   background-position: left top;
   background-repeat: repeat;
   background-size: 8px 8px;
}

html, body {
   position: relative;
   width: 100% !important;
   overflow-x: hidden !important;
}

body {
   font-family: 'Noto Sans JP', 'PT Sans', sans-serif;
   font-size: 1rem;
   color: #666;
   font-weight: 400;
}

body a {
   font-family: inherit;
   font-size: inherit;
   ;
   color: #ababab;
   font-weight: inherit;
   text-decoration: none;
   font-style: normal;
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   -moz-transition: all .4s;
   transition: all .4s;
}

body a:hover {
   opacity: 0.75;
}


/*=========================
   Architectural Styling
/*=========================*/


/*===================*
      1.#globalheader-container
/*===================*/

body #globalheader-container {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 5;
   width: 100%;
   height: 60px;
   background: transparent;
   color: #fff;
}


/*- e -*/

.page-entry #globalheader-container {
   background: rgba(255, 255, 255, 0.75);
   color: #555;
   height: 60px;
}


/*===   ===*/

body iframe#globalheader {
   display: block;
   max-width: 1450px;
   width: 100%;
   height: 60px;
   margin: 0 auto;
   padding-top: 5px;
}


/*===  1.#container  ===*/

body #container {
   width: 100%;
}


/*===================*
      3.Blog-title
/*===================*/

body:not(.page-entry) #blog-title {
   width: 100%;
   min-height: 340px;
   height: auto;
   background: -webkit-linear-gradient(-20deg, #403E34 50%, #222);
   background: -o-linear-gradient(-20deg, #403E34 50%, #222);
   background: -moz-linear-gradient(-20deg, #403E34 50%, #222);
   background: linear-gradient(-20deg, #403E34 50%, #222);
}


/*- e -*/

.page-entry #blog-title {
   margin: 0 auto;
   min-height: 3.75rem;
   max-height: 3.75rem;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 4;
}


/*===  4.#blog-title-inner  ===*/

body:not(.page-entry) #blog-title-inner {
   width: 100%;
   min-height: 340px;
   height: auto;
   padding: 9.5rem 0 3.5rem 0;
   background-image: url(http://kazumalabo.sakura.ne.jp/img/Modenist1.3_header.jpg);
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: center top;
}


/*- e -*/

.page-entry #blog-title-inner {
   width: 100%;
   min-height: 60px;
   max-height: 60px;
   background-image: url(http://kazumalabo.sakura.ne.jp/img/Modenist1.3_header.jpg);
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: center top;
   overflow: hidden;
}


/*===========  #title  ========*/

body #title {
   width: 80%;
   margin: 0 auto;
   padding-left: 1rem;
   font-size: 3.5rem;
   font-weight: 700;
   line-height: 3.875rem;
   text-align: center;
}

body #title a {
   color: #fff;
   font-size: 3.5rem;
   font-family: 'Noto Sans JP', 'PT Sans', sans-serif;
   font-weight: 700;
   text-decoration: none;
   text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}


/*- e -*/

.page-entry #title {
   font-size: 0.75rem;
   line-height: 60px;
   padding-top: 1.25rem;
}

.page-entry #title a {
   font-size: 0.75rem;
   line-height: 60px;
}


/*-  -*/

.page-entry #title a::after {
   display: block;
   position: fixed;
   top: 15px;
   right: 0;
   width: 45px;
   height: 45px;
   font-family: 'Fontawesome';
   content: '   \f015';
   z-index: -1;
   font-size: 20px;
   font-weight: 400;
   line-height: 45px;
   text-align: center;
   vertical-align: middle;
   color: rgba(44, 44, 44, 0.7);
   text-shadow: none;
   background: rgba(255, 255, 255, 0.75);
   border: 1px solid rgba(189, 189, 189, 0.7);
   border-radius: 0 2px 2px 0;
   box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   -moz-transition: all .4s;
   transition: all .4s;
}

.page-entry #title a:hover {
   opacity: 1 !important;
   color: orange !important;
}


/*===  #blog-description  ===*/

.page-index #blog-description, .page-about #blog-description {
   width: 80%;
   color: #fff;
   font-size: 0.875rem;
   font-weight: 400;
   text-align: right;
   margin: 3.4375rem auto 0 auto;
   padding-left: 30%;
   text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.page-entry #blog-description, .page-archive #blog-description, .page-entries-year-month-day #blog-description {
   display: none;
}


/*===================*
      3.#content
/*===================*/


/*- i -*
.page-index #content {
   }
/*- e -*
.page-entry #content {
   }
   



/*=== 4.#content-inner  ===*/


/*- i -*/

.page-index #content-inner {
   /*max-width: 855px; 
   width: 100%;*/
   margin: 0 0.75rem;
   padding: 0;
   /* 必要 */
   background: #f9f9fa;
   display: -webkit-flex;
   display: -moz-flex;
   display: flex;
   -webkit-justify-content: center;
   -moz-justify-content: center;
   justify-content: center;
}


/*- e -*/

.page-entry #content-inner {
   max-width: 1030px;
   width: 100%;
   margin: 0 auto;
}


/*===  5.wrapper  ===*/


/*- i -*/

.page-index #wrapper {
   width: 70%;
   max-width: 545px;
   padding: 0 0.75rem 1.5rem 0.75rem;
}


/*- e -*/

.page-entry #wrapper {
   margin: 0 0.75rem;
}


/*===========  7. #main-inner  ========*/


/*- e -*/

.page-entry #main-inner {
   padding: 0 1.5rem 2rem 1.5rem;
   background: #fafafa;
}


/*===================*
      8. entry
/*===================*/


/*--- i ---*/

.page-index .entry {
   margin: 1.25rem auto 0 auto;
   padding: 1.25rem 2rem;
   max-width: 525px;
   width: 100%;
   height: 280px;
   background: #fff;
}

.page-index .entry::after {
   display: block;
   position: absolute;
   bottom: 0;
   right: 75px;
   content: '.....';
}


/*--- e ---*/

.page-entry .entry {
   background: #fff;
}


/*===  entry-inner  ===*/


/*--- i ---*/

.page-index .entry-inner {
   width: 100%;
   height: 100%;
   overflow: hidden;
}


/*===================*
      entry-header
/*===================*/

body .entry-header {
   position: relative;
}


/*--- i ---*/

.page-index .entry-header {
   border-top: 1px solid transparent;
}


/*--- e ---*/

.page-entry .entry-header {
   width: calc(100%+ 3rem);
   margin-left: -1.5rem;
   padding: 12rem 1.5rem 9rem 1.5rem;
   background: -webkit-linear-gradient(-20deg, #403E34 50%, #222);
   background: -o-linear-gradient(-20deg, #403E34 50%, #222);
   background: -moz-linear-gradient(-20deg, #403E34 50%, #222);
   background: linear-gradient(-20deg, #403E34 50%, #222);
}


/*========  date  =======*/

body .date {
   position: absolute;
   width: 200px;
}

body .date a {
   line-height: 1.25rem;
   font-size: 1.25rem;
   font-family: 'Quattrocento', sans-serif;
   font-weight: 400;
   background: #D90034;
   color: #fff;
   font-weight: 700;
   font-style: italic;
   letter-spacing: -0.3px;
   padding: 0rem 0.5rem;
}


/*--- i ---*/

.page-index .date {
   left: 0;
   top: 5px;
}

.page-index .date a {
   background: #D90034;
   color: #fff;
   font-weight: 700;
   font-style: italic;
   font-size: 0.9375rem;
   letter-spacing: -0.3px;
}


/*--- e ---*/

.page-entry .date {
   right: 1.5rem;
   bottom: 4.125rem;
   text-align: right;
   padding-left: 1rem;
}

.page-entry .date a {
   line-height: 1.125rem;
   font-size: 1.125rem;
   color: #fff;
}


/*===  a Time  ===*/

body .date a time .hyphen {
   display: none;
}

body .date a time .date-month::before {
   content: '.';
}

body .date a time .date-day::before {
   content: '.';
}


/*===================*
      entry-title
/*===================*/


/*--- i ---*/

.page-index h1.entry-title {
   font-size: 1.75rem;
   line-height: 2.125rem !important;
   text-align: center;
   letter-spacing: -1.2px;
   margin: 3.25rem 0 0 0;
   padding: 0 2em;
}

.page-index h1.entry-title a {
   font-size: 1.75rem;
   line-height: 2.125rem !important;
   color: #515150;
   font-weight: 700;
}


/*--- e ---*/

.page-entry h1.entry-title {
   font-size: 2.5rem;
   line-height: 3.0625rem;
   font-weight: 700;
   color: #616161;
   text-align: center;
   margin: 2rem 0;
}

.page-entry h1.entry-title a {
   color: #fff;
   text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}


/*==========  categories  =========*/


/*- i -*/

.page-index .categories {
   display: none;
}


/*- e -*/

.page-entry .categories {
   position: absolute;
   top: 100%;
   right: 1.5rem;
   -webkit-transform: translate(0, -4rem);
   -o-transform: translate(0, -4rem);
   -moz-transform: translate(0, -4rem);
   -ms-transform: translate(0, -4rem);
   transform: translate(0, -4rem);
   width: 45%;
   word-break: keep-all;
   text-align: right;
   line-height: 2rem;
}

.page-entry .categories a {
   background: #000;
   color: #fff;
   border-color: #000;
   border-radius: 2px;
   font-size: 0.875rem;
   background: #000;
   border: 1px solid #000;
   padding: 0.15625rem 0.9375rem;
}


/*===================*
   5. #box2
/*===================*/


/*--- i ---*/

.page-index #box2 {
   width: 30%;
   font-size: 1rem;
   color: #666;
   padding: 0 0.75rem 0 1rem;
}


/*--- e ---*/

.page-entry #box2::before {
   display: block;
   position: fixed;
   top: 60px;
   right: 0;
   width: 45px;
   height: 45px;
   z-index: 999;
   font-family: 'FontAwesome';
   content: '\f0c9';
   font-size: 20px;
   line-height: 45px;
   text-align: center;
   vertical-align: middle;
   color: rgba(44, 44, 44, 0.7);
   background: rgba(255, 255, 255, 0.75);
   border: 1px solid rgba(189, 189, 189, 0.7);
   border-radius: 2px 0 0 2px;
   box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   -moz-transition: all .4s;
   transition: all .4s;
}

.page-entry #box2:hover::before {
   opacity: 0.75;
}


/*--------------*/

.page-entry #box2 {
   position: fixed;
   z-index: 9999;
   top: 0px;
   right: -300px;
   width: 300px;
   height: 100vh;
   font-size: 1rem;
   background: rgba(245, 245, 245, 0.5);
   border-left: 1px solid rgba(200, 200, 200, 0.8);
   border-top: 62px solid #403E34;
   padding: 0 1.25rem;
   -moz-transition: all .6s ease;
   -o-transition: all .6s ease;
   -webkit-transition: all .6s ease;
   transition: all .6s ease;
}

.page-entry #box2:hover {
   right: 0;
   background: rgba(255, 255, 255, 0.93);
   height: 100vh;
   box-shadow: -1px 0 3px rgba(35, 35, 35, 0.45), -3px 0 6px rgba(35, 35, 35, 0.2);
   overflow-y: auto;
   overflow-x: hidden;
   scroll-behavior: smooth;
}


/*========  #box2 a  ===========*/

body #box2 a {
   font-size: 1rem;
}


/*===================*
      Module
/*===================*/

body #box2 .hatena-module {
   margin-top: 3.5rem;
   border-top: 1px solid #ddd;
}


/*--------------*/

body #box2 .hatena-module:last-of-type {
   margin-bottom: 10rem;
}


/*====  Module-Title  ===*/

body #box2 .hatena-module-title {
   display: block;
   margin: 5px 0 1rem 0;
   font-family: 'Noto Sans JP';
   /* en専用-'Josefin Sans' */
   color: #423E37;
   font-weight: 700;
   font-size: 1.25rem;
   line-height: 1.75rem;
   letter-spacing: 1.7px;
}

body #box2 .hatena-module-title a {
   display: block;
   font-family: 'Noto Sans JP';
   /* en専用-'Josefin Sans' */
   color: #423E37;
   font-weight: 700;
   font-size: 1.25rem;
   line-height: 1.75rem;
   letter-spacing: 1.7px;
   border: none;
}


/*===  Module-Body  ===*/

body #box2 .hatena-module-body {
   padding-left: 1.5em;
   margin-top: 30px;
   color: #888;
}

body:not(.page-index) #box2 .hatena-module-body {
   color: #555;
}

.page-index #box2 .hatena-module-body a {
   color: #888;
}

body:not(.page-index) #box2 .hatena-module-body a {
   color: #555;
}


/*========  Misc  ===========*/

body #box2 ul.hatena-urllist {
   list-style-type: none;
   padding: 0;
}


/*===================*
      The Modules
/*===================*/


/*=========  プロフ  ==========*/

body #box2 .hatena-module-profile .hatena-module-title:before {
   display: block;
   position: absolute;
   content: '';
   left: -37.5px;
   top: 0px;
   width: 27.5px;
   height: 27.5px;
   background: url(http://kazumalabo.sakura.ne.jp/img/profile.png);
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: center top;
}

body #box2 .hatena-module-profile .hatena-module-title {
   position: relative;
   margin-left: 37.5px;
}

body #box2 .hatena-module-profile a {
   font-size: 0.875rem;
}

body #box2 .hatena-module-profile a.hatena-id-link {
   font-size: 0.875rem !important;
}


/*- 1.画像 -*/

.hatena-module-profile a.profile-icon-link {
   margin: 5px 0 0 10px;
   display: inline-block;
   width: 80px;
   height: 80px;
   border: 1px solid #ddd;
   overflow: hidden;
}

.hatena-module-profile a.profile-icon-link, .hatena-module-profile img.profile-icon {
   width: 80px;
   height: 80px;
}


/*-------id-------*/

body #box2 .hatena-module-profile span.id {
   display: inline-block;
   width: 120px;
   height: 2.5rem;
   vertical-align: top;
   text-align: center;
   margin: 5px 0 0 0;
   font-size: 16px;
   line-height: 16px;
}


/*--------------*/

body #box2 .hatena-module-profile a.hatena-id-link, body #box2 .hatena-module-profile span.user-name-nickname, body #box2 .hatena-module-profile span.user-name-hatena-id {
   font-size: 0.875rem;
   line-height: 16px;
}

.hatena-module-profile span.user-name-paren {
   display: none;
}

span.user-name-hatena-id {
   font-size: 0.875em;
   color: #bbb;
}


/*------3.説明--------*/

div.profile-description {
   margin: 5px 0 0 0;
   padding: 0 10px;
   color: #aaa;
   font-size: 0.875em;
}


/*-------フォロボタン-------*/

div.hatena-follow-button-box {
   width: 80px;
   height: 35px;
}

body #box2 .hatena-module-profile a.hatena-follow-button {
   display: block;
   box-sizing: border-box;
   background: #fff;
   word-wrap: break-word;
   word-break: break-all;
   font-size: 0.75rem;
   font-weight: 400;
   text-align: center;
   padding: 5px 0 0 0;
   width: 100px;
   height: 30px;
   min-height: 30px;
   max-height: 30px;
   box-shadow: 0px 2px 0 #ccc;
}


/*---*/

body #box2 .hatena-module-profile a.hatena-follow-button:hover {
   box-shadow: 1px 2px 0 #777;
}


/*--------------*/

span.subscribing {
   color: #777;
}


/*--------------*/

span.unsubscribing {
   color: #777;
}


/*========  サーチ  ===========*/

body #box2 .hatena-module-search-box .hatena-module-title {
   display: none;
}

body #box2 .hatena-module-search-box form {
   display: table;
   border: 1px solid #eee;
}

body #box2 .hatena-module-search-box input {
   border: none;
   outline: none;
   -webkit-appearance: none;
   height: 30px;
   background: #fff;
}


/*--------------*/

::-webkit-input-placeholder {
   color: #fff;
   opacity: 0;
}

:-moz-placeholder {
   color: #fff;
   opacity: 0;
}

::-moz-placeholder {
   color: #fff;
   opacity: 0;
}

:-ms-input-placeholder {
   color: #fff;
   opacity: 0;
}


/*--------------*/

body #box2 .hatena-module-search-box input[type=text] {
   display: inline-block;
   width: 120px;
   height: 30px;
   border-right: 1px solid #eee;
   padding: 0px 15px;
   color: #999;
   font-size: 1rem;
}

body #box2 .hatena-module-search-box input[type=submit] {
   display: inline-block;
   width: 40px;
   padding: 5px 5px;
   color: #999;
   text-indent: -9999px;
   background: #fff url(http://kazumalabo.sakura.ne.jp/svg/search-button.svg) no-repeat center center;
   background-size: 22px 22px;
}


/*=======  アーカイブ  ============*
body #box2 .hatena-module-archive .hatena-module-title {}

/*======== カテゴリ ===========*/

body #box2 .hatena-module-category li {
   white-space: nowrap;
   padding: 0;
}

body #box2 .hatena-module-category li a {
   border: 1px solid #e8e8e8;
   border-radius: 2px;
   padding: 2.5px 5px;
   background: #FAF8F0;
}


/*=======  リンク  ============*
body #box2 .hatena-module-links .hatena-module-title {}


/*==========  アクセスランク  =========*/


/*+++++++++  画像あり  ++++++++++*/

#box2 div.hatena-module-entries-access-ranking *:hover {
   opacity: 1;
}

#box2 ul.entries-access-ranking li.entries-access-ranking-item {
   -webkit-transition: all .372s ease;
   -o-transition: all .372s ease;
   -moz-transition: all .372s ease;
   transition: all .372s ease;
   margin: 16px 0 0 0;
}


/*---  hover  ---*/

#box2 ul.entries-access-ranking li.entries-access-ranking-item:hover {
   -webkit-transform: scale(1.06);
   -o-transform: scale(1.06);
   -moz-transform: scale(1.06);
   -ms-transform: scale(1.06);
   transform: scale(1.06);
}

#box2 ul.entries-access-ranking li.entries-access-ranking-item:hover>
div.entries-access-ranking-item-inner>
a.entries-access-ranking-title {
   color: #E7D3B4;
}

#box2 ul.entries-access-ranking li.entries-access-ranking-item:hover>
div.entries-access-ranking-item-inner>
a.entries-access-ranking-image-link::after {
   background: rgba(30, 24, 16, 0.8);
}


/*--------------*/

#box2 div.hatena-module-entries-access-ranking div.entries-access-ranking-item-inner {
   border: 1px solid #bbaa99;
   border-radius: 3px;
   width: 100%;
   height: 200px;
   text-align: center;
   background: #343222;
   position: relative;
   z-index: 0;
   overflow: hidden;
}


/*---  画像  ---*/

#box2 div.hatena-module-entries-access-ranking a.entries-access-ranking-image-link {
   display: block;
   width: 100%;
   height: 230px;
   position: relative;
   z-index: 0;
   text-align: center;
}

#box2 div.hatena-module-entries-access-ranking a.entries-access-ranking-image-link::after {
   position: absolute;
   display: block;
   content: '';
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(30, 24, 16, 0.4);
   z-index: 2;
   -webkit-transition: all .372s ease;
   -o-transition: all .372s ease;
   -moz-transition: all .372s ease;
   transition: all .372s ease;
}

#box2 div.hatena-module-entries-access-ranking img.entries-access-ranking-image {
   display: block;
   width: auto;
   height: 115%;
   margin: 0 auto;
   -webkit-filter: blur(2px);
   -o-filter: blur(2px);
   -moz-filter: blur(2px);
   -ms-filter: blur(2px);
   filter: blur(2px);
}


/*---  タイトル  ---*/

#box2 div.hatena-module-entries-access-ranking a.entries-access-ranking-title {
   display: block;
   width: 100%;
   height: auto;
   color: #888;
   font-size: 0.875rem;
   /*
   line-height: 1.5rem;*/
   padding-bottom: 0.5rem;
   border-top: 1px solid #aaa;
   -webkit-transition: all .372s ease;
   -o-transition: all .372s ease;
   -moz-transition: all .372s ease;
   transition: all .372s ease;
}


/*++++++++++++  画像無し  ++++++++++++*/

#box2 div.hatena-module-entries-access-ranking div.entries-access-ranking-date-link a time, #box2 div.hatena-module-entries-access-ranking a.entries-access-ranking-title, #box2 div.hatena-module-entries-access-ranking a.bookmark-widget-counter, #box2 div.hatena-module-entries-access-ranking a.entries-access-ranking-category-link, #box2 div.hatena-module-entries-access-ranking div.entries-access-ranking-entry-body {
   display: block;
   color: #bbaa99;
   background: #343222;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   border: none;
   font-size: 0.875rem;
}


/*---  画無し-タイトル  ---*/

#box2 div.hatena-module-entries-access-ranking a.entries-access-ranking-title {
   position: absolute;
   top: 50%;
   left: 0;
   -webkit-transform: translate(0, -50%);
   -o-transform: translate(0, -50%);
   -moz-transform: translate(0, -50%);
   -ms-transform: translate(0, -50%);
   transform: translate(0, -50%);
   z-index: 2;
   font-size: 1.25rem;
   padding: 2rem 0.5rem;
}


/*++++++++++++++ 画像有-補正ver ( テキスト部/ 白地,黒字,font-size:  ++++*/

#box2 div.hatena-module-entries-access-ranking a.entries-access-ranking-image-link~ div, #box2 div.hatena-module-entries-access-ranking a.entries-access-ranking-image-link~ a, #box2 div.hatena-module-entries-access-ranking a.entries-access-ranking-image-link~ div>
a>
time, #box2 div.hatena-module-entries-access-ranking a.entries-access-ranking-image-link~ div>
a.entries-access-ranking-category-link {
   color: #888;
   background: #fff;
   font-size: 0.875rem;
}


/*---  タイトル  ----*/

#box2 div.hatena-module-entries-access-ranking a.entries-access-ranking-image-link~ a.entries-access-ranking-title-link {
   position: absolute;
   top: 50%;
   left: 0;
   -webkit-transform: translate(0, -53.5%);
   -o-transform: translate(0, -53.5%);
   -moz-transform: translate(0, -53.5%);
   -ms-transform: translate(0, -53.5%);
   transform: translate(0, -53.5%);
   z-index: 2;
   font-size: 1.25rem;
   color: #fff;
   background: transparent;
   text-align: center;
   padding: 0 1rem;
}


/*===================*
      8. pager
/*===================*/

body div.pager {
   width: 80%;
   height: 3.75rem;
   margin: 55px auto 2.1875rem auto;
   font-size: 1rem;
   display: -webkit-flex;
   display: -moz-flex;
   display: flex;
   -webkit-justify-content: center;
   -moz-justify-content: center;
   justify-content: center;
   -moz-align-items: center;
   -webkit-align-items: center;
   align-items: center;
   text-align: center;
}

body div.pager a {
   color: #696555;
   background: #fff;
   font-size: 0.875rem;
   padding: 5px 10px;
   -webkit-transition: all .25s;
   -o-transition: all .25s;
   -moz-transition: all .25s;
   transition: all .25s;
}


/*--- e ---*/

.page-entry div.pager {
   margin: 135px auto 2.1875rem auto;
}


/*=========  Prev  ==========*/

body .pager-prev a::before {
   position: absolute;
   content: 'Newer';
   bottom: 103%;
   left: 0.5rem;
   color: #bbb;
   font-style: italic;
}

body span.pager-prev {
   display: block;
   width: 50%;
   height: 100%;
}

body span.pager-prev a {
   display: block;
   position: relative;
   height: 100%;
   border: 1px solid #696555;
   border-radius: 3px 0 0 3px;
}


/*========= next ==========*/

body span.pager-next {
   display: block;
   width: 50%;
   height: 100%;
}

body span.pager-next a {
   display: block;
   height: 100%;
   border: 1px solid #696555;
   border-radius: 0 3px 3px 0;
}


/*--- i ---*/

.page-index span.pager-next {
   width: 120px;
   height: 2.5rem;
}


/*===================*
       3. Bottom-editarea
/*===================*/

body #bottom-editarea {
   max-width: 1030px;
   font-size: 0.875rem;
   color: #888;
   margin: 2.1875rem auto;
   padding: 0.625rem 3.4375rem;
   text-align: center;
}

body #bottom-editarea a {
   color: #aaa;
   border-bottom: 1px dashed #ccc;
}


/*===================*
      1. Footer
/*===================*/

body #footer {
   background: #333;
   color: #fff;
   width: 100%;
   height: 200px;
   font-family: 'PT Sans', sans-serif;
   font-size: 0.875rem;
   color: #ccc;
   text-align: center;
   line-height: 1.5rem;
   letter-spacing: 0.7px;
   padding: 2.8125rem 0 0 0;
}

body #footer a {
   color: #ccc;
}


/*===================*/

body #footer-inner {
   margin-left: 10px;
   padding: 0.625rem 1rem 0.625rem 0.8125rem;
}

body #footer p.services, body #footer p.services a {
   font-size: 0.75rem;
   line-height: 4.5rem;
}


/*=============================*
      entry-content + Styling
/*=============================*/

body .entry-content {
   margin-top: 3rem;
   padding-bottom: 60px;
}

body .entry-content a {
   font-style: italic;
   border-bottom: 1px dashed #aaa;
}


/*------- i -------*/

.page-index .entry-content {
   margin-top: 3rem;
   color: #999;
   font-size: 14px;
   line-height: 21px;
}

.page-index .entry-content a {
   color: #999;
   font-size: 14px;
   line-height: 21px;
}


/*------- e -------*/

.page-entry .entry-content {
   color: #515151;
   font-size: 1rem;
   font-weight: 400;
   padding: 0 2.5rem;
}

.page-entry .entry-content a {
   color: #888;
   font-size: 1rem;
   font-weight: 400;
}


/*=========  Contents  Styling  ==========*/


/*---  Heading  ---*/

body h3, body h4, body h5, body h6 {
   color: #6f6f6f;
   text-align: center;
   margin: 75px 0px 75px 0;
}

body:not(.page-archive) h3 {
   font-size: 2.25rem;
   line-height: 2.8125rem;
   font-weight: 700;
}

body:not(.page-archive) h4 {
   font-size: 1.75rem;
   line-height: 2.25rem;
   font-weight: 700;
}

body:not(.page-archive) h5 {
   font-size: 1.25rem;
   line-height: 1.8125rem;
   font-weight: 700;
}


/*- i -*/

.page-index h3, .page-index h4, .page-index h5 {
   margin: 0;
   padding: 0;
   font-size: 1rem;
   line-height: 1.5625rem;
}

.entry-content ul {
   background-color: #fff;
   list-style-type: square;
}

.entry-content ul li {
   clear: both;
}

.footnote {
   border-top: 1px dotted #d3d3d3;
   color: grey;
   font-size: .6875rem;
   margin-top: 3em;
}


/* ----- 画像 -----  */

.entry-content img.hatena-fotolife {
   display: block;
   margin: 1.5rem auto;
   border: 9px solid #fff;
   outline: 1px solid #ddd;
}


/*--------------*/

.page-index .entry-content img.hatena-fotolife {
   display: block;
   border: none;
   height: 120px;
   width: auto;
   outline: none;
   margin: 0 auto;
   pointer-events: none;
   cursor: default;
}


/*--------------*/

.entry-content img.hatena-fotolife1 {
   display: block;
   margin: 1.5rem auto;
   border: 9px solid #fff;
   outline: 1px solid rgb(207, 207, 207);
}


/* ----- 引用 -----  */

.entry-content blockquote {
   position: relative;
   width: 90%;
   color: #727272;
   font-family: 'Noto Sans JP', sans-serif;
   background-color: #FAFAFA;
   border: 1px dashed #ccc;
   margin: 55px auto;
   padding: 2rem 2rem;
}

.entry-content blockquote::before {
   display: block;
   position: absolute;
   top: -25px;
   left: 5px;
   width: 60px;
   height: 60px;
   content: "\201C";
   color: #727272;
   font-family: 'PT Sans', sans-serif;
   font-size: 140px;
   line-height: 140px;
   vertical-align: top;
}


/*  -----  Amazon埋込  -----  */

div.freezed, div.freezed ul {
   background: #fafafa;
}

div.freezed {
   width: 100%;
   max-width: 550px;
   border: 1px dashed #ccc;
   border-radius: 3px;
   padding: 1rem 1.5rem 0.5rem 1.5rem;
   margin: 15px auto;
}

div.hatena-asin-detail {
   border: none;
   margin: 0;
   padding: 0;
   /* 必要 */
   width: 100%;
   display: -webkit-flex;
   display: -moz-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-justify-content: center;
   -moz-justify-content: center;
   justify-content: center;
}

div.hatena-asin-detail >
a {
   width: auto;
   min-height: 80px;
   max-height: 120px;
   margin-right: 5px;
   margin-bottom: 10px;
}

img.hatena-asin-detail-image {
   display: block;
   width: auto;
   min-height: 80px;
   max-height: 120px;
}

div.hatena-asin-detail-info {
   min-width: 280px;
   max-width: 400px;
   height: 120px;
   margin-bottom: 10px;
}

.hatena-asin-detail-info .hatena-asin-detail-title {
   padding-right: 20px;
}

.hatena-asin-detail-foot {
   display: none;
}

.freezed ul li:nth-of-type(4), .freezed ul li:nth-of-type(5), .freezed ul li:nth-of-type(6) {
   display: none;
}


/*-----リンクカード埋込---------*/

iframe.embed-card {
   margin: 1.5rem auto !important;
}


/*-----リンク埋込カード下----*/

cite.hatena-citation {
   display: none;
}


/*-----もくじ-----*/

.entry-content ul.table-of-contents:before {
   display: table;
   position: absolute;
   top: 35px;
   left: 50%;
   -webkit-transform: translate(-50%, 0);
   -o-transform: translate(-50%, 0);
   -moz-transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
   transform: translate(-50%, 0);
   height: 1.5rem;
   content: '- Contents -';
   font-family: 'Josefin Sans', sans-serif;
   font-size: 1.5rem;
   line-height: 1.5rem;
   letter-spacing: 0.3px;
   color: #797979;
   font-weight: 700;
   padding-bottom: 0px;
   border-bottom: 3px double #ababad;
}


/*--------------*/

.entry-content ul.table-of-contents {
   position: relative;
   width: 100%;
   max-width: 600px;
   height: auto;
   margin: 55px auto;
   padding: 110px 0 35px 70px;
   border: 1px solid #ddd;
   border-radius: 3px;
   background: #f8f8f6;
   overflow-x: auto;
   white-space: nowrap;
   list-style-type: none;
}


/*--------------*/

.entry-content ul.table-of-contents * {
   background: transparent;
}


/*--------------**/

.entry-content ul.table-of-contents li {
   list-style-type: square;
   margin-top: 5px;
}


/*------*/

.entry-content ul.table-of-contents li >
ul li {
   list-style-type: none;
}

.entry-content ul.table-of-contents li >
ul li::before {
   content: '-';
   margin-right: 10px;
}


/*--------------*/

.entry-content ul.table-of-contents li a {
   font-size: 1rem;
   color: #686868;
   font-style: normal;
   text-decoration: none;
}


/* ----- キーワード  -----  */

.page-entry a.keyword {
   text-decoration: none;
   border-bottom: 1px dashed grey;
}

.page-entry h3 a.keyword, .page-entry h4 a.keyword, .page-entry h5 a.keyword {
   border: none;
   text-decoration: none;
   font-size: inherit;
}


/*-------フットノート-------*/

.footnote {
   border: 1px dashed #d3d3d3;
   background: #fafafa;
   color: #777777;
   font-size: 14px;
   margin: 3em 0;
   padding: 12px 12px;
}

.footnote a {
   color: darkviolet;
   font-style: italic;
}


/*-------Code-------*/

body pre {
   background: #f8f8f8;
   overflow-x: auto;
   border: 1px solid #f2f2f0;
   border-radius: 3px;
   padding: 0.5rem 1rem;
   margin: 1rem 1rem;
}

body code {
   display: inline-block;
   background: #f8f8f8;
   padding: 0;
   margin: 0;
   line-height: 1.2rem;
   border: 1px solid #f2f2f0;
   border-radius: 3px;
}


/*------サーチ結果--------*/

div.search-result {
   padding: 2rem 1rem 0 1rem;
   text-align: center;
}

form.search-result-form {
   display: table;
   margin: 0 auto;
}


/*------続きをよむ--------*/

.page-index a.entry-see-more {
   display: table;
   background: rgba(235, 229, 216, 0.6);
   color: #444;
   padding: 0.25em 1em;
   margin: 0.3em 0 0 auto;
   border: none;
}


/*------マーカー--------*/

markre {
   display: inline;
   background: #ff5555;
   background: -webkit-linear-gradient(transparent 55%, #ff5555 55%);
   background: -o-linear-gradient(transparent 55%, #ff5555 55%);
   background: -moz-linear-gradient(transparent 55%, #ff5555 55%);
   background: linear-gradient(transparent 55%, #ff5555 55%);
}

markpi {
   display: inline;
   background: #ff83c1;
   background: -webkit-linear-gradient(transparent 55%, #FF8CC6 55%);
   background: -o-linear-gradient(transparent 55%, #FF8CC6 55%);
   background: -moz-linear-gradient(transparent 55%, #FF8CC6 55%);
   background: linear-gradient(transparent 55%, #FF8CC6 55%);
}

marksb {
   display: inline;
   background: #07b0f2;
   background: -webkit-linear-gradient(transparent 55%, #07b0f2 55%);
   background: -o-linear-gradient(transparent 55%, #07b0f2 55%);
   background: -moz-linear-gradient(transparent 55%, #07b0f2 55%);
   background: linear-gradient(transparent 55%, #07b0f2 55%);
}

markcy {
   display: inline;
   background: #00bcd4;
   background: -webkit-linear-gradient(transparent 55%, #00bcd4 55%);
   background: -o-linear-gradient(transparent 55%, #00bcd4 55%);
   background: -moz-linear-gradient(transparent 55%, #00bcd4 55%);
   background: linear-gradient(transparent 55%, #00bcd4 55%);
}

markyg {
   display: inline;
   background: #aeee00;
   background: -webkit-linear-gradient(transparent 55%, #aeee00 55%);
   background: -o-linear-gradient(transparent 55%, #aeee00 55%);
   background: -moz-linear-gradient(transparent 55%, #aeee00 55%);
   background: linear-gradient(transparent 55%, #aeee00 55%);
}

markye {
   display: inline;
   background: #ffeb3b;
   background: -webkit-linear-gradient(transparent 55%, #ffeb3b 55%);
   background: -o-linear-gradient(transparent 55%, #ffeb3b 55%);
   background: -moz-linear-gradient(transparent 55%, #ffeb3b 55%);
   background: linear-gradient(transparent 55%, #ffeb3b 55%);
}

markor {
   display: inline;
   background: #ffc800;
   background: -webkit-linear-gradient(transparent 55%, #ffc800 55%);
   background: -o-linear-gradient(transparent 55%, #ffc800 55%);
   background: -moz-linear-gradient(transparent 55%, #ffc800 55%);
   background: linear-gradient(transparent 55%, #ffc800 55%);
}

.picup {
   background: #faf8f6;
   color: red;
}


/*===================*
      entry-footer
/*===================*/

.entry-footer a {
   color: #66695A;
   text-decoration: none;
}


/*--- i ---*/

.page-index .entry-footer {
   display: none;
}


/*--- e ---*/

.page-entry .entry-footer {
   margin: 50px 0 0 0;
   border-top: 1px dashed #ddd;
   background: #f8f8f8;
   color: #66695A;
   font-size: 12px;
   width: 100%;
   padding: 15px 0 0 0;
}


/*-------  ❶日付, id-------*/

.entry-footer p.entry-footer-section {
   display: none;
}


/*-------  ❷コメント欄  -------*/

.entry-footer .comment-box {
   font-size: 14px;
}

.entry-footer .comment-box ul.comment {
   list-style-type: none;
   margin-bottom: 30px;
   padding: 1rem 1rem;
   background: transparent;
}

.entry-footer .comment-box ul li p.comment-user-name a {
   color: #aaa;
   font-size: 0.875rem;
   font-style: normal;
   border: 1px solid #ddd;
   padding: 2px 4px 2px 8px;
}

.entry-footer .comment-box ul li p.comment-user-name span.user-name-nickname {
   color: #89b6a5;
}

.entry-footer .comment-box ul li p.comment-user-name span.user-name-hatena-id {
   color: #aaa;
}

.entry-footer .comment-box ul li div.comment-content {
   padding: 10px 10px;
}

.entry-footer .comment-box a.leave-comment-title {
   display: table;
   font-size: 14px;
   line-height: 14px;
   font-style: normal;
   text-align: center;
   border: 1px solid #ccc;
   border-radius: 2px;
   padding: 7.5px 7.5px;
   background: #fff;
}


/*===================*
      Archive
/*===================*/

h2.archive-heading {
   padding: 1rem 1rem 0.5rem 1rem;
   text-align: center;
}


/*===================*/

#top-box {
   display: table;
   margin: 1rem auto 0 auto;
   font-size: 1.5rem;
}

#top-box a {
   font-size: 1.125rem;
   color: #CCC6AB;
}

#top-box a:hover {
   color: #777;
}


/*===================*/

.page-archive a {
   color: #444;
}


/*--------------*/

.page-archive .archive-entries {
   padding: 0 1rem 1rem 1rem;
   width: 100%;
   display: -webkit-flex;
   display: -moz-flex;
   display: flex;
   -webkit-justify-content: center;
   -moz-justify-content: center;
   justify-content: center;
   -webkit-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   flex-wrap: wrap;
}


/*===================*/

.page-archive .archive-entry {
   max-width: 400px;
   width: 30%;
   height: 320px;
   border: 1px solid #ccc;
   border-radius: 2px;
   font-size: 11px;
   margin: 15px 0.5rem;
   padding: 0.5rem 2px;
   overflow: hidden;
}


/*=========  archive-entry-header  ==========*/

.archive-entry-header {
   text-align: center;
}


/*=========  time(date)  ==========*/

.page-archive .date {
   position: static;
   width: 100%;
   font-size: 1rem;
   line-height: 1.25rem;
}

.page-archive .date a {
   font-size: 1rem;
   line-height: 1.25rem;
   font-family: 'Quattrocento', sans-serif;
   font-weight: 400;
   color: #fff;
   font-style: italic;
   letter-spacing: -0.3px;
   background: #D90034;
   border-radius: 2px;
   padding: 0rem 0.5rem;
}


/*==========  Entry-title  =========*/

.page-archive .entry-title {
   margin-top: 1rem;
   font-size: 1.25rem;
   font-weight: 400;
   line-height: 1.5rem;
}

.page-archive .entry-title a {
   font-size: 1.25rem;
   font-weight: 400;
   line-height: 1.5rem;
}


/*===================*/

.page-archive .categories {
   position: static;
   font-size: 0.75rem;
   text-align: center;
   word-break: keep-all;
   margin-top: 1rem;
   line-height: 1.75rem;
}

.page-archive .categories a {
   font-size: 0.75rem;
   color: #888;
   border: 1px solid #ccc;
   padding: 1px 1px;
   margin-right: 1px;
}


/*--------------*/

a.entry-thumb-link {
   display: inline-block;
   margin-top: 20px;
}

.page-archive .archive-entry-body {
   margin-top: 1rem;
   font-size: 0.875rem;
   color: #888;
}

.page-archive span.social-buttons {
   display: none;
}


/*========  #Box2  ===========*/

.page-archive #box2::before {
   display: block;
   position: fixed;
   top: 390px;
   right: 2rem;
   width: 50px;
   height: 50px;
   z-index: 999;
   font-family: 'FontAwesome';
   content: '\f0c9';
   font-size: 34px;
   line-height: 50px;
   text-align: center;
   vertical-align: middle;
   color: #EBE5CE;
   background: transparent;
   border-radius: 2px 0 0 2px;
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   -moz-transition: all .4s;
   transition: all .4s;
}

.page-archive #box2:hover::before {
   opacity: 0;
}

.page-archive #box2 {
   position: fixed;
   z-index: 9999;
   top: 0px;
   right: -300px;
   width: 300px;
   height: 100vh;
   font-size: 1rem;
   background: rgba(245, 245, 245, 0.5);
   border-left: 1px solid rgba(200, 200, 200, 0.8);
   border-top: 62px solid #403E34;
   padding: 0 1.25rem;
   -moz-transition: all .6s ease;
   -o-transition: all .6s ease;
   -webkit-transition: all .6s ease;
   transition: all .6s ease;
}

.page-archive #box2:hover {
   right: 0;
   background: rgba(255, 255, 255, 0.93);
   height: 100vh;
   box-shadow: -1px 0 3px rgba(35, 35, 35, 0.45), -3px 0 6px rgba(35, 35, 35, 0.2);
   overflow-y: auto;
   overflow-x: hidden;
   scroll-behavior: smooth;
}

.page-archive div.pager {
   width: 300px;
   height: 2.5rem;
}


/*===================*
      About
/*===================*/

.page-about #content {
   width: 100%;
   height: auto;
}

.page-about #box2::before {
   display: block;
   position: fixed;
   top: 390px;
   right: 2rem;
   width: 50px;
   height: 50px;
   z-index: 999;
   font-family: 'FontAwesome';
   content: '\f0c9';
   font-size: 34px;
   line-height: 50px;
   text-align: center;
   vertical-align: middle;
   color: #EBE5CE;
   background: transparent;
   border-radius: 2px 0 0 2px;
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   -moz-transition: all .4s;
   transition: all .4s;
}

.page-about #box2:hover::before {
   opacity: 0;
}

.page-about #box2 {
   position: fixed;
   z-index: 9999;
   top: 0px;
   right: -300px;
   width: 300px;
   height: 100vh;
   font-size: 1rem;
   background: rgba(245, 245, 245, 0.5);
   border-left: 1px solid rgba(200, 200, 200, 0.8);
   border-top: 62px solid #403E34;
   padding: 0 1.25rem;
   -moz-transition: all .6s ease;
   -o-transition: all .6s ease;
   -webkit-transition: all .6s ease;
   transition: all .6s ease;
}

.page-about #box2:hover {
   right: 0;
   background: rgba(255, 255, 255, 0.93);
   height: 100vh;
   box-shadow: -1px 0 3px rgba(35, 35, 35, 0.45), -3px 0 6px rgba(35, 35, 35, 0.2);
   overflow-y: auto;
   overflow-x: hidden;
   scroll-behavior: smooth;
}

.page-about dl {
   display: block;
   max-width: 600px;
   width: 98.5%;
   margin: 100px auto 55px auto;
   padding: 1rem 1rem;
   background: #fcfcfa;
   color: #595959;
   outline: 1px solid #999999;
   border: 12px solid #fff;
}

.page-about dt {
   float: left;
   clear: left;
   width: 100px;
   text-align: right;
   white-space: nowrap;
   font-weight: bold;
}

.page-about dt::after {
   content: ": ";
}

.page-about dd {
   margin: 0 0 0 110px;
   padding: 0 0 0.5em 0;
   color: #ababab;
}


/*===================*
      entries-year-
/*===================*/

.page-entries-year-month-day #content-inner {
   max-width: 1030px;
   margin: 0 auto;
}

.page-entries-year-month-day #wrapper {
   margin: 0 0.75rem;
}

.page-entries-year-month-day #main-inner {
   padding: 0 1.5rem 2rem 1.5rem;
   background: #fafafa;
}

.page-entries-year-month-day .entry {
   background: #fff;
   padding: 2.5rem 2.5rem;
}

.page-entries-year-month-day .entry-header {
   padding: 1em 1em;
   background: -webkit-linear-gradient(-20deg, #403E34 50%, #222);
   background: -o-linear-gradient(-20deg, #403E34 50%, #222);
   background: -moz-linear-gradient(-20deg, #403E34 50%, #222);
   background: linear-gradient(-20deg, #403E34 50%, #222);
}

.page-entries-year-month-day h1.entry-title {
   font-size: 2.5rem;
   line-height: 3.0625rem;
   text-align: center;
   margin: 2rem 0;
}

.page-entries-year-month-day h1.entry-title a {
   font-size: 2.5rem;
   line-height: 3.0625rem;
   font-weight: 700;
   color: #fff;
}

.page-entries-year-month-day .date {
   position: static;
}

.page-entries-year-month-day h1.entry-title {
   font-size: 2rem;
   line-height: 2.25rem;
   text-align: center;
   margin: 2rem 0;
}

.page-entries-year-month-day h1.entry-title a {
   font-size: 2rem;
   line-height: 2.25rem;
   font-weight: 700;
   color: #fff;
}

.page-entries-year-month-day .categories {
   word-break: keep-all;
   text-align: right;
   line-height: 2rem;
}

.page-entries-year-month-day .categories a {
   color: #fff;
   background: #000;
   color: #fff;
   border-color: #000;
   border-radius: 2px;
   font-size: 0.875rem;
   background: #000;
   border: 1px solid #000;
   padding: 0.15625rem 0.9375rem;
}

.page-entries-year-month-day #box2::before {
   display: block;
   position: fixed;
   top: 390px;
   right: 2rem;
   width: 50px;
   height: 50px;
   z-index: 999;
   font-family: 'FontAwesome';
   content: '\f0c9';
   font-size: 34px;
   line-height: 50px;
   text-align: center;
   vertical-align: middle;
   color: #EBE5CE;
   background: transparent;
   border-radius: 2px 0 0 2px;
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   -moz-transition: all .4s;
   transition: all .4s;
}

.page-entries-year-month-day #box2:hover::before {
   opacity: 0;
}

.page-entries-year-month-day #box2 {
   position: fixed;
   z-index: 9999;
   top: 0px;
   right: -300px;
   width: 300px;
   height: 100vh;
   font-size: 1rem;
   background: rgba(245, 245, 245, 0.5);
   border-left: 1px solid rgba(200, 200, 200, 0.8);
   border-top: 62px solid #403E34;
   padding: 0 1.25rem;
   -moz-transition: all .6s ease;
   -o-transition: all .6s ease;
   -webkit-transition: all .6s ease;
   transition: all .6s ease;
}

.page-entries-year-month-day #box2:hover {
   right: 0;
   background: rgba(255, 255, 255, 0.93);
   height: 100vh;
   box-shadow: -1px 0 3px rgba(35, 35, 35, 0.45), -3px 0 6px rgba(35, 35, 35, 0.2);
   overflow-y: auto;
   overflow-x: hidden;
   scroll-behavior: smooth;
}


/*===================*
   @Media Query
/*===================*/


/*===  ~414px  ===*/

@media(max-width: 414px) {
   /*===  #blog-title  ===*/
   body:not(.page-entry) #container #blog-title {
      min-height: 30vh;
   }
   /*===  #blog-title-inner  ===*/
   body:not(.page-entry) #container #blog-title #blog-title-inner {
      min-height: 30vh;
      padding: 2.5rem 0 1rem 0;
      background-position: center top;
      background-size: 120% auto;
   }
   /*========  #title  ===========*/
   body #title {
      width: 100%;
      padding: 0.5rem 0.5rem;
      font-size: 2.75rem;
      line-height: 3rem;
   }
   body #title a {
      font-size: 2.75rem;
      line-height: 3rem;
   }
   /*--------------*/
   .page-entry #title {
      top: 4.25rem;
      left: 0rem;
      font-size: 0.5rem;
   }
   /*=========  #blog-description  ==========*/
   body #blog-description {
      margin: 1.7rem auto 0 auto;
      padding-left: 15%;
   }
   /*========  content-inner  ===========*/
   .page-index #content-inner {
      margin: 0 0.25rem;
   }
   /*=========  5.#wrapper  ==========*/
   /*--- i ---*/
   .page-index #wrapper {
      width: 100%;
      padding: 0 0.5rem 1rem 0.5rem;
   }
   /*--- e ---*/
   .page-entry #wrapper {
      margin: 0 0.375rem;
   }
   /*==========  #main-inner  =========*/
   .page-index #main-inner {
      padding: 0;
   }
   .page-entry #main-inner {
      padding: 0 0.5rem 1rem 0.5rem;
   }
   /*=========  entry  ==========*/
   .page-index .entry {
      padding: 0.25rem 0.5rem;
      height: 280px;
   }
   .page-index .entry:first-of-type {
      margin-top: 1rem;
   }
   /*--------------*/
   .page-entry .entry {
      width: 100%;
      margin: 2rem auto;
   }
   /*===================*/
   .page-entry .entry-header {
      width: calc(100%+ 2rem);
      margin-left: -1rem;
      padding: 6.5rem 0.75rem 4.5rem 0.75rem;
   }
   /*=========  date  ==========*/
   .page-index .date {
      bottom: 2rem;
   }
   /*--- e ---*/
   .page-entry .date {
      right: 0.75rem;
      bottom: 2.0625rem;
      padding-left: 0.5rem;
   }
   /*=========  entry-title  ==========*/
   .page-entry h1.entry-title {
      padding: 0 1.25rem;
   }
   /*==========  categories  =========*/
   .page-entry .categories {
      right: 0.75rem;
      -webkit-transform: translate(0, -2rem);
      -o-transform: translate(0, -2rem);
      -moz-transform: translate(0, -2rem);
      -ms-transform: translate(0, -2rem);
      transform: translate(0, -2rem);
      width: 75%;
   }
   /*=========  entry-content  ==========*/
   .page-index .entry-content {
      margin-top: 2.25rem;
      padding: 0 0px;
   }
   /*--------------*/
   .page-entry .entry-content {
      margin-top: 3.5rem;
      padding: 0 0.5rem;
   }
   /*========= pager ==========*/
   body div.pager {
      position: relative;
      left: -13px;
      width: calc(100%+ 26px);
      z-index: 1;
   }
   /*====== blockquote =============*/
   .entry-content blockquote {
      width: 98%;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
   }
   /*=======  #box2::before  ============*/
   /*--- i ---*/
   .page-index #box2::before {
      position: fixed;
      right: 0.25rem;
      top: 11rem;
      width: 50px;
      height: 50px;
      z-index: 999;
      font-family: 'FontAwesome';
      content: '\f0c9';
      font-size: 34px;
      font-weight: 400;
      color: #EBE5CE;
      text-align: center;
      -o-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -webkit-transition: all .5s ease;
      transition: all .5s ease;
   }
   /*--- e ---*/
   .page-entry #box2::before {
      opacity: 0.5;
      top: 60px;
      right: 0;
   }
   .page-archive #box2::before, .page-entries-year-month-day #box2::before, .page-about #box2::before {
      top: 11rem;
      right: 0.25rem;
   }
   /*--------------*/
   .page-index #box2:hover:before {
      opacity: 0;
   }
   /*========  #box2  ===========*/
   body:not(.page-index) #box2 {
      width: 80vw;
      right: -80vw;
   }
   /*------ i --------*/
   .page-index #box2 {
      position: fixed;
      z-index: 9999;
      top: 0px;
      right: -80vw;
      width: 80vw;
      height: 100vh;
      font-size: 1rem;
      color: #666;
      background: rgba(245, 245, 245, 1);
      border-left: 1px solid rgba(200, 200, 200, 0.8);
      border-top: 3.75rem solid #403E34;
      padding: 0 1.25rem;
      -o-transition: all .6s ease;
      -moz-transition: all .6s ease;
      -webkit-transition: all .6s ease;
      transition: all .6s ease;
   }
   /*--------------*/
   .page-index #box2:hover {
      right: 0;
      background: rgba(255, 255, 255, 0.85);
      height: 100vh;
      box-shadow: -1px 0 3px rgba(35, 35, 35, 0.45), -3px 0 6px rgba(35, 35, 35, 0.2);
      overflow-y: auto;
      overflow-x: hidden;
      scroll-behavior: smooth;
   }
   /*===================*
         archive
   /*===================*/
   .page-archive #wrapper {
      width: 96%;
      margin: 0 auto 1.5625rem auto;
      padding: 3rem 0 1rem 0;
      background: #f8f8f8;
   }
   .page-archive .archive-entries {
      padding: 0;
   }
   .page-archive section.archive-entry {
      width: 49%;
      height: 260px;
      background: #fff;
   }
}


/*==============  905~  ========================*/

@media(min-width:905px) {
   .page-index #content-inner {
      margin: 0 auto;
   }
}


/*=======  1030~ ============*/

@media(min-width:1030px) {
   /*=========  3. Blog-title  ==========*/
   body:not(.page-entry) #container #blog-title {
      min-height: 0;
      height: 500px;
   }
   /*======== #blog-title-inner ===========*/
   body:not(.page-entry) #container #blog-title #blog-title-inner {
      min-height: 0;
      height: 500px;
      background-size: 80% auto;
   }
}


/*========  1450px~  ===========*/

@media(min-width:1450px) {
   body #blog-description {
      display: table;
      width: auto;
      text-align: center;
      padding: 1rem 1rem;
      margin: 155px 25px 0 62%;
   }
   /*=========  #content-inner  ==========*/
   /*--- i ---*/
   .page-index #content-inner {
      max-width: 1450px;
      margin: 0 auto;
   }
   /*--- e ---*/
   .page-entry #content-inner {
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      max-width: none;
      width: 1400px;
      height: auto;
      margin: 0 auto;
   }
   /*=========  #wrapper  ==========*/
   /*--- i ---*/
   .page-index #wrapper {
      max-width: none;
      width: 1150px;
      margin: 0 0 25px 25px;
      padding: 25px 5px;
   }
   /*--- e ---*/
   .page-entry #wrapper {
      width: 1050px;
      height: auto;
      margin: 0;
      border: 1px solid transparent;
   }
   /*=========  7. #main-inner  ========*/
   /*--- e ---*/
   .page-entry #main-inner {
      padding: 0;
   }
   /*======== #main-inner ===========*/
   /*--- i ---*/
   .page-index #main-inner {
      width: 1150px;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      flex-wrap: wrap;
   }
   /*======== entry ===========*/
   /*--- i ---*/
   .page-index .entry {
      width: 525px;
      margin: 1rem 0.75rem;
   }
   /*===================*
      Box2
   /*===================*/
   .page-entry #box2::before, .page-archive #box2::before, .page-entries-year-month-day #box2::before, .page-about #box2::before {
      display: none;
   }
   /*--- i ---*/
   .page-index #box2 {
      width: 300px;
   }
   /*--- e ---*/
   .page-entry #box2 {
      position: static;
      width: 350px;
      height: auto;
      border: 1px solid transparent;
      background: #f9f9fa;
      padding: 0 55px;
      margin: 60px 0 0 0;
      -o-transition: none;
      -moz-transition: none;
      -webkit-transition: none;
      transition: none;
   }
   .page-entry #box2:hover {
      background: #f9f9fa;
      height: auto;
      box-shadow: none;
      overflow-y: visible;
      overflow-x: visible;
   }
   /*===  -Module  ===*/
   body #box2 .hatena-module:first-of-type {
      margin-top: 40px;
   }
   /*===  module-title  ====*/
   body #box2 .hatena-module-title {
      text-align: left;
   }
   /*===  -module-body  ===*/
   body #box2 .hatena-module-body {
      padding-left: 45px;
   }
   /*===================*
         Archive
   /*===================*/
   .page-archive #content-inner {
      width: 100%;
      max-width: 1450px;
      margin: 0 auto;
      padding: 55px 0 0 0;
   }
   /*=== #box2 ===*/
   /* 
   box2::before,
   #box2{},
   #box2:hover{}
      about のところ
   */
   .page-archive #box2 .hatena-module {
      width: 30%;
      display: inline-block;
      vertical-align: top;
      margin: 25px 0 0 3%;
      border: none;
   }
   .page-archive#box2 .hatena-module, .page-archive #box2 .hatena-module a, .page-archive #box2 .hatena-module-title, .page-archive #box2 .hatena-module-title a, .page-archive #box2 .hatena-module-body, .page-archive #box2 .hatena-module-body a {
      background: #333;
      color: #fff !important;
   }
   /*===================*
         About
   /*===================*/
   .page-about dl {
      margin: 120px auto 120px auto;
   }
   .page-about #content-inner {
      width: 100%;
      max-width: 1450px;
      margin: 0 auto;
      padding: 55px 0 0 0;
   }
   .page-about #wrapper {
      width: 100%;
      max-width: 1450px;
      margin: 0 auto;
   }
   /*=========  box2  ==========*/
   .page-about #box2::before, .page-archive #box2::before {
      display: none;
   }
   .page-about #box2, .page-archive #box2 {
      position: relative;
      left: 0;
      top: 0;
      z-index: 1;
      width: 100%;
      height: auto;
      background: #333;
      margin: 0;
      border: none;
   }
   .page-about #box2::after, .page-archive #box2::after {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 100vw;
      height: 100%;
      background: #333;
      z-index: -1;
      -webkit-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
   }
   .page-about #box2:hover, .page-archive #box2:hover {
      background: #333;
      height: auto;
      box-shadow: none;
      overflow-y: visible;
      overflow-x: visible;
   }
   /*======*/
   .page-about #box2 .hatena-module {
      width: 30%;
      display: inline-block;
      vertical-align: top;
      margin: 25px 0 0 3%;
      border: none;
   }
   /*======*/
   .page-about #box2 .hatena-module, .page-about #box2 .hatena-module a, .page-about #box2 .hatena-module-title, .page-about #box2 .hatena-module-title a, .page-about #box2 .hatena-module-body, .page-about #box2 .hatena-module-body a {
      background: #333;
      color: #fff !important;
   }
   /*===================*
         entries-year-
   /*===================*/
   .page-entries-year-month-day #content-inner {
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      width: 1150px;
      margin: 0 auto;
   }
   .page-entries-year-month-day #wraqqer {
      width: 1150px;
   }
   .page-entries-year-month-day #box2 {
      position: static;
      width: 300px;
      height: auto;
      background: #f9f9fa;
      border: none;
      margin: 60px 0 0 0;
      -webkit-transition: none;
      -o-transition: none;
      -moz-transition: none;
      transition: none;
   }
   /*------*/
   .page-entries-year-month-day #box2:hover {
      box-shadow: none;
      background: #f9f9fa;
      overflow-y: visible;
      overflow-x: visible;
   }
}
/* </system> */