/* <system section="theme" selected="6653586347153366095"> */
/*カスタマイズ方法はこちら*/
/*This theme is made by CatNose (http://tsukuruiroiro.hatenablog.com/)*/

@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700|Quicksand:400,300,700|Nothing+You+Could+Do);
/*
font-family: 'Montserrat', sans-serif;
font-family: 'Quicksand', sans-serif;
font-family: 'Nothing You Could Do', cursive;

*/

html {
  font-family: sans-serif;
  /* 1 */

  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* 2 */

}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */

  vertical-align: baseline;
  /* 2 */

}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 1.8em;
  margin: 0.67em 0;
  line-height: 1.1}
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */

  font: inherit;
  /* 2 */

  margin: 0;
  /* 3 */

}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */

  cursor: pointer;
  /* 3 */

}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */

  padding: 0;
  /* 2 */

}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */

  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */

  box-sizing: content-box;
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */

  padding: 0;
  /* 2 */

}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
/*  import mixin */
.clearfix {
  display: block;
  *zoom: 1;
}
.clearfix:after {
  display: block;
  visibility: hidden;
  font-size: 0;
  height: 0;
  clear: both;
  content: ".";
}
.inline-block {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/*  import variable */
/* Common */
html,
body {
  font-family: "Avenir Next", 'Quicksand', Arial, YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif;
    -webkit-font-smoothing: antialiased;
  color: #454545;
  background-color: #ffffff;
}
a {
  color: #1487bd;
}
a:hover {
  color: #0f5373;
}
a:visited {
  color: #789dae;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
h1 a:visited,
h2 a:visited,
h3 a:visited,
h4 a:visited,
h5 a:visited,
h6 a:visited {
  color: #333333;
  text-decoration: none;
}
a.keyword {
  text-decoration: none;
  border-bottom: 1px dotted #dddddd;
  color: #454545;
}
/* Buttons */
.btn {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  line-height: 18px;
  color: #454545;
  background-color: #ffffff;
  text-align: center;
  vertical-align: middle;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-radius: 2px;
  background-clip: padding-box;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-decoration: none !important;
}
.btn:hover {
  background-color: #f5f5f5;
  text-decoration: none !important;
}
.btn-small {
  padding: 2px 10px !important;
  font-size: 11px !important;
}
.btn-large {
  padding: 13px 19px;
  font-size: 17px;
  line-height: normal;
  font-weight: bold;
}
/* ヘッダ（グローバルヘッダ）
  グローバルヘッダの中はiframeですが、
  #globalheader-container に背景色や文字色を指定することでirameの中にも色が反映されます。
*/
#globalheader-container {
  background-color: #333;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
/* container */
#container {

  margin-bottom: 30px;
  padding-top: 37px;
}
#container #content {
  display: block;
  *zoom: 1;
    width: 940px;
        margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
}
#container #content:after {
  display: block;
  visibility: hidden;
  font-size: 0;
  height: 0;
  clear: both;
  content: ".";
}
.globalheader-off #container {
  padding-top: 0;
}
/* 2カラムレイアウト */
#main {
  width: 600px;
  float: left;
}
#box2 {
  width: 300px;
  float: right;
}
/* 1カラムにしたい場合は下記のコメントアウトを外してください ----
#main {
    width: 100%;
    float: none;
}
#box2 {
    width: 100%;
    float: none;
}
#box2-inner {
    width: 960px;
    .clearfix;
    overflow: hidden;
}
.hatena-module {
    text-align: left;
    padding-right: 20px;
    width: 300px;
    float: left;
    &:nth-child(3n+1) {
        clear: both;
    }
}
---- END 1カラム */
/* header */
#blog-title {
    margin: 0;
    padding: 2px 0 5px 0;
        background: #202035;
}
#blog-title-content {width: 940px;
  margin-left: auto;
  margin-right: auto;}
#title {
  margin: 0;
  padding:5px 0;
}
#title a {
    color: white;
    letter-spacing: 0.1em;
    font-size: 1.1em;
    font-family: 'quicksand';
}
#title a:hover {color:#B4D7FF;}

#blog-description {
    font-weight: normal;
    font-size: 80%;
    margin: 0px 3px 0 2px;
    letter-spacing: 0.05em;
    color: #AED1FF;
    font-family: "quicksand";
}
/* ヘッダ画像を設定したとき */
.header-image-enable #title {
  padding-top: 70px;
}
.header-image-enable #title,
.header-image-enable #blog-description {
  padding-left: 20px;
}
/* パンくず（カテゴリーページで表示されます） */
#top-box {
  margin: 10px auto 20px;
  font-size: 90%;
}
#top-box .breadcrumb {
  border: 1px solid #dddddd;
  padding: 10px;
}
/* entry */
.entry {
  position: relative;
  margin-bottom: 100px;
}
.entry-header {
  padding: 0 0 10px 0;
  margin-bottom: 20px;
  border-bottom: 2px solid #dddddd;
  position: relative;
}
.entry-title {
  margin: 0;
  line-height: 1.3;
  font-size: 160%;
}
/* 日付 */
.date {
  font-weight: bold;
  margin-bottom: 10px;
}
.date:before {
     font-family: "blogicon";
    content: "\f043";
    font-size: 79%;
    color: #383838;
    position: relative;
    top: 1px;
}

.date a {
    color: #383838;
    text-decoration: none;
    font-size: 74%;
    letter-spacing: 0.1em;
    font-family: 'quicksand', sans-serif;
}
/* カテゴリ */
.categories {
  margin-top: 12px;
  font-size: 80%;
}
.categories a {
    color: black;
    background: #69B8D2;
    padding: 2px 8px;
    font-weight: lighter;
    font-size: 0.6em;
    border-radius: 2px;
    letter-spacing: 0.05em;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
}
.categories a:hover {background: gray}

.categories.no-categories {
  margin: 0;
}
/* 「編集する」ボタン */
.entry-header-menu {
  position: absolute;
  bottom: 0px;
  left: -60px;
}
.entry-header-menu a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  line-height: 18px;
  color: #454545;
  background-color: #ffffff;
  text-align: center;
  vertical-align: middle;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-radius: 2px;
  background-clip: padding-box;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-decoration: none !important;
}
.entry-header-menu a:hover {
  background-color: #f5f5f5;
  text-decoration: none !important;
}
/* entry-content の中の書式 */
.entry-content {
  font-size: 95%;
  line-height: 1.7;
  padding-bottom: 10px;
  border-bottom: 1px solid #dddddd;
}
.entry-content p {
    margin: 0 0 1em 0;
    line-height: 2.0em;
}
.entry-content img {
  max-width: 100%;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin: 1.3em 0 0.8em 0;
  line-height: 1.5;
}
.entry-content h1 {
  font-size: 160%;
}
.entry-content h2 {
  font-size: 150%;
}
.entry-content h3 {
    font-size: 140%;
    padding: 12px 0 12px 13px;
    color: #4D517D;
    padding-left: 13px;
    line-height: 1.6em;
    border-left: #4D517D solid 9px;
  }
.entry-content h4 {
    font-size: 120%;
    margin: 35px 0 20px;}

.entry-content h4:before {
      content: "\f029";
    font-family: "blogicon";
    position: relative;
    padding-right: 10px;
    color: #6C9FCE;
}

.entry-content h5 {
  font-size: 110%;
}
.entry-content h6 {
  font-size: 100%;
}
.entry-content table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 1em;
}
.entry-content table img {
  max-width: none;
}
.entry-content table th,
.entry-content table td {
  border: 1px solid #ddd;
  padding: 5px 10px;
}
.entry-content table th {
  background: #f5f5f5;
}
.entry-content blockquote {
  border: 1px solid #dddddd;
  margin: 0 0 10px;
  padding: 20px;
}
.entry-content blockquote p {
  margin-top: 0;
  margin-bottom: 0;
}
.entry-content pre {
  border: 1px solid #dddddd;
  margin: 0 0 10px;
  padding: 20px;
  white-space: pre;
}
.entry-content pre > code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: 0;
  background: transparent;
  font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}
.entry-content code {
  font-size: 90%;
  margin: 0 2px;
  padding: 0 5px;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px;
  font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}
.entry-content ul, .entry-content ol {padding: 15px 20px 7px;
    color: #566AA0;
    border: solid #566AA0 2px;}
.entry-content ul li {list-style-type: disc;
    margin: 3px 17px;}
.entry-content ol li {list-style-type:  decimal;
    margin: 3px 17px;}

.entry-content ul li ul, .entry-content ol li ol {
    border: 0px;
    padding: 5px 5px 5px 0;
    font-size: 0.9em;
    color: #8297CA;
}

.entry-content .hatena-asin-detail li {
  line-height: 1.4;
}
/* entry-footer */
.entry-footer {
  margin-top: 10px;
}
.entry-footer-section {
  font-size: 80%;
  color: #999999;
}
.entry-footer-section a {
  color: #999999;
}
.social-buttons,
.entry-footer-html {
  margin: 10px 0;
}
/* コメント */
.comment-box ul {
  list-style: none;
  margin: 0 0 15px 0;
  padding: 0;
  font-size: 95%;
  line-height: 1.7;
}
.comment-box li {
  padding: 10px 0 10px 60px;
  border-bottom: 1px solid #dddddd;
  position: relative;
}
.comment-box li:first-child {
  border-top: 1px solid #dddddd;
}
.comment-box .read-more-comments {
  padding-left: 0;
}
.comment-box .hatena-id-icon {
  position: absolute;
  top: 10px;
  left: 0;
  width: 50px !important;
  height: 50px !important;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-radius: 3px;
  background-clip: padding-box;
}
.comment-user-name {
  margin: 0 0 10px 0;
  font-weight: bold;
}
.comment-content {
  font-size: 90%;
  margin: 0 0 10px 0;
  word-wrap: break-word;
}
.comment-content p {
  margin: 0 0 10px 0;
}
.comment-metadata {
  font-size: 80%;
  color: #999999;
  margin: 0;
}
.comment-metadata a {
  color: #999999;
}
.leave-comment-title {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  line-height: 18px;
  color: #454545;
  background-color: #ffffff;
  text-align: center;
  vertical-align: middle;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-radius: 2px;
  background-clip: padding-box;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-decoration: none !important;
}
.leave-comment-title:hover {
  background-color: #f5f5f5;
  text-decoration: none !important;
}
/* sidebar */
#box2 {
  font-size: 85%;
  line-height: 1.5;
}
.hatena-module {
  margin-bottom: 60px;
}
.hatena-module-title {
  color:#202035;
    font-weight: bold;
    border-left: 10px #202035 solid;
    padding-left: 10px;
    margin-bottom: 15px;
    font-size: 150%;
    line-height: 1em;
    letter-spacing: 0.1em;
    font-family: 'Montserrat';
}
.hatena-module-title a {
  color: #454545;
  text-decoration: none;
}
.hatena-module-title a:hover {
  text-decoration: underline;
}
/* Profile module */
.hatena-module-profile .profile-icon {
  float: left;
  margin: 0 10px 10px 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-radius: 5px;
  background-clip: padding-box;
}
.hatena-module-profile .id {
  display: block;
  font-weight: bold;
  font-size: 110%;
  margin-bottom: 5px;
}
.hatena-module-profile .profile-description {
  font-size: 90%;
  line-height: 1.8em;
  letter-spacing: 0.1em;
}
.hatena-module-profile .profile-description p {
  margin-top: 0;
}
/* urllist module
    リンク・最新記事・最近のコメント・月別アーカイブ・カテゴリモジュールは .hatena-urllist という共通の class が振られます
*/
.hatena-urllist {
  list-style: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
.hatena-urllist li {
  padding: 8px 0;
  border-bottom: 1px solid #dddddd;
  line-height: 1.5;
}
.hatena-urllist li a {
  text-decoration: none;
}
/* Search module */


.hatena-module-search-box .search-form {
  border: 2px solid #6C9CCE;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-radius: 3px;
  background-clip: padding-box;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
/*
.hatena-module-search-box .search-module-input {
  padding: 5px;
  color: #454545;
  background: none;
  border: none;
  outline: none;
  height: 20px;
  width: 90%;
}*/
.search-result-form .search-result-input{height: 23px!important;}
.search-module-input {
    border: none!important;
    padding: 8px 32px 8px 8px;
    line-height: 20px;
    /* color: white!important; */}
.hatena-module-search-box .search-module-button {
  width: 20px;
  height: 20px;
  background: transparent url(https://cdn.blog.st-hatena.com/images/theme/search.png) no-repeat right center;
  border: none;
  outline: none;
  text-indent: -9999px;
  position: absolute;
  top: 9px;
  right: 5px;
  opacity: 0.5;
}
.hatena-module-search-box .search-module-button:hover {
  opacity: 0.85;
}
/* Pager */
.pager {
  margin: 1em 0;
  display: block;
  *zoom: 1;
}
.pager:after {
  display: block;
  visibility: hidden;
  font-size: 0;
  height: 0;
  clear: both;
  content: ".";
}
.pager .pager-prev {
  float: left;
  text-align: left;
  width: 45%;
}
.pager .pager-next {
  float: right;
  text-align: right;
  width: 45%;
}
/* Footer */
#footer {
  padding: 30px 0;
  text-align: center;
  color: #999999;
  line-height: 1.5;
  font-size: 80%;
}
#footer p {
  margin: 0;
}
#footer a {
  color: #999999;
}
/* About ページ */
.page-about dt {
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #dfdfdf;
  margin-bottom: 5px;
}
.page-about dd {
  margin-left: 0;
  margin-bottom: 30px;
}
/* archive ページ */
.archive-heading {    padding-left: 13px;
    color: #4A6AA5;
    border-left: 9px solid #4A6AA5;} 
.page-archive .archive-entries .archive-entry {
  margin-bottom: 3em;
}
.page-archive .archive-entries .entry-title {
  font-size: 130%;
  margin: 0 0 .5em;
}
.page-archive .archive-entries .categories {
  margin: 0 0 .5em;
}
.page-archive .archive-entries .entry-description {
  margin: 0 0 1em;
  line-height: 1.7em;
  font-size: 95%;
}
.page-archive .categories a {
  color: black;
  font-size: 70%;
  background: #69B8D2;
  padding: 3px 5px;
  border-radius: 3px;
  text-decoration: none;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  margin-right: 2px;
}
/*  import media queries */
/* Media Queries - Retina Display */
@media (-webkit-min-device-pixel-ratio: 2) {
  .hatena-module-search-box .search-module-button {
    background: transparent url(https://cdn.blog.st-hatena.com/images/theme/search@2x.png) no-repeat right center;
    background-size: 20px 20px;
  }
}
/* Media Queries - Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  /*#container {
    width: 724px;
  }
  #main {
    width: 460px;
  }*/
#content {margin-left: 5%!important;
margin-right:5%!important;
width:90%!important;}

#blog-title-content{padding-left: 5%;
padding-right:5%;
width:90%!important;}
#main {width:60%}
  #box2 {
   /* width: 245px;*/
   width: 30%;
  }
  /* 1カラムにしたい場合は下記のコメントアウトを外してください ----
      #main,
      #box2 {
          width: 100%;
      }
  
      #box2-inner {
          width: 744px;
  
      }
  
      .hatena-module {
          width: 228px;
      }
  ---- END 1カラム */
}
/* Media Queries - Small Tablet & Smartphone */
@media (max-width: 767px) {
  #globalheader-container {
    position: static;
  }
  #container {
   /* width: 93.75%;*/
    word-wrap: break-word;
    overflow: hidden;
  }
  #main {
    width: 100%;
    float: none;
  }
  #box2 {
    width: 100%;
    float: none;
  }
  #box2-inner {
    width: 100%;
  }
  .hatena-module {
    width: 100%;
    float: none;
  }
  .entry-header-menu {
    top: -30px;
    left: 0px;
  }
  #content {margin-left: 15px!important;
margin-right:15px!important;
width:auto;}
#blog-title-content{    margin-left: 5%;
    margin-right: 5%;}
}
/* Media Queries - Smartphone */
@media (max-width: 480px) {
  
}


/*テーマインストール後のカスタマイズ用CSS*/


/*ABOUT下のThis Theme is by...*/
.authorname {
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    letter-spacing: 0.13em;
    font-size: 80%;
    color: gray;
    border-bottom: 1px solid gray;
}
.authorname a {text-decoration: none;
  font-family: 'Nothing You Could Do', cursive; font-size:20px; color:#4E4E4E; padding-left: 4px;}
  .authorname a:hover {color:silver;}



  /* サイドバー人気記事表示用　Chiroruさんのものを参考
  http://chiroru.hatenablog.com/entry/2013/10/11/192601
  ----- POPULAR_ENTRY ----- */
.htbl_popular_entries {
    height: 100%;
    width: 100%;
    border: 2px solid black;
    border-bottom: 0px;
}
.htbl_popular_entry {
  position: relative;
  background: #ddd;
  width: 100%;
  height: 100px;
  overflow: hidden;
border-bottom: 2px solid black;  border-radius: 1px;
}
.htbl_popular_entry_img { position: relative; top: -9px; min-height: 118px;}
.htbl_popular_entry_text {
  position: absolute;
  top: 0px;
  word-break: break-all;
  overflow: hidden;
  background: rgba(77, 77, 77, 0.62);
  width: 90%;
  height: 100px;
  margin-top: 0px;
  padding: 0 5%;
  color: rgba(255, 255, 255, 0.985);
  -webkit-transition: all 0.35s ease-out;
  -moz-transition: all 0.35s ease-out;
  -o-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
}
.htbl_popular_entry_text:hover {
  background: rgba(255, 255, 255, 0.05);
  color: transparent;
  text-shadow: none;
  padding-top: 100px;
}
.htbl_popular_entry_text span.entry_title {
      display: table-cell;
    vertical-align: middle;
    text-align: left;
    height: 100px;
    font-size: 11px;
    font-weight: bold;
}
.htbl_popular_entry_text span.entry_date {
  position: absolute;
  bottom: 0;
  right: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-shadow: none;
}
.htbl_popular_entry_text span.entry_hatebu { position: absolute; left: 14px; bottom: 0px; }

 /*ここまで ----- サイドバーPOPULAR_ENTRY ----- */

  /* サイドバー人気記事表示用　Chiroruさんのものを参考
  http://chiroru.hatenablog.com/entry/2013/10/11/192601
  ----- POPULAR_ENTRY ----- */
.htbl_popular_entries {
    height: 100%;
    width: 100%;
    border: 2px solid black;
    border-bottom: 0px;
}
.htbl_popular_entry {
  position: relative;
  background: #ddd;
  width: 100%;
  height: 100px;
  overflow: hidden;
border-bottom: 2px solid black;  border-radius: 1px;
}
.htbl_popular_entry_img { position: relative; top: -9px; min-height: 118px;}
.htbl_popular_entry_text {
  position: absolute;
  top: 0px;
  word-break: break-all;
  overflow: hidden;
  background: rgba(77, 77, 77, 0.62);
  width: 90%;
  height: 100px;
  margin-top: 0px;
  padding: 0 5%;
  color: rgba(255, 255, 255, 0.985);
  -webkit-transition: all 0.35s ease-out;
  -moz-transition: all 0.35s ease-out;
  -o-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
}
.htbl_popular_entry_text:hover {
  background: rgba(255, 255, 255, 0.05);
  color: transparent;
  text-shadow: none;
  padding-top: 100px;
}
.htbl_popular_entry_text span.entry_title {
      display: table-cell;
    vertical-align: middle;
    text-align: left;
    height: 100px;
    font-size: 11px;
    font-weight: bold;
}
.htbl_popular_entry_text span.entry_date {
  position: absolute;
  bottom: 0;
  right: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-shadow: none;
}
.htbl_popular_entry_text span.entry_hatebu { position: absolute; left: 14px; bottom: 0px; }

 /*ここまで ----- サイドバーPOPULAR_ENTRY ----- */

 /*ここからサイドバーのソーシャル購読*/

.sidesocial {width:100%;}
.sidesocial h4 {font-size:120%;
    color: #5880AD;}
.socialbtn {float: left;
    margin-right: 15px;
    font-size: 32px;}
.blogicon-subscribe {
    top: 2px;
    position: relative;
}
 /*ツイッターぷかぷか*/
.twitterfollow {
    animation: 5s bounce ease infinite;
    
}
@keyframes bounce {  
    50% {
        transform: translateY(-40px);
    }
}

@keyframes pulsate {
    0% {
        opacity: 0;
    }
    50% {
        transform: scale(0.5);
        opacity: 0.2;
    }
    
    100% {
        opacity: 0;
    }
}
.fbfollow a {color: #1487bd;}
.fbfollow a:hover {color: #489DC5;}
.twitterfollow a {font-size:0.9em; margin-right:5px; color:#5EC9DC;}
.twitterfollow a:hover {color:#62E6FD;}
.hatenafollow a {color:#9E9E9E; }
.hatenafollow a:hover {color:silver;}
.feedly a {font-size:0.8em; color:#99D279}
.feedly a:hover {color:#C7DCBB;}
 /*ここまでサイドバーのソーシャル購読*/
/*ヘッダー下の特大画像とおすすめ記事紹介など*/
.headimg {
    min-height: 200px;
    margin-bottom: 0;
    padding: 60px 10px;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/t/tsukuruiroiro/20160117/20160117093059.jpg?1452990730?changed=1452990730");
    background-size: cover;
    text-align: center;
}
.headimg 
.headimg h3 {color: white;}
.headimg h4 {
    color: white;
    margin: 0;
    padding: 0;
    font-size: 3.5em;
    letter-spacing: 0.1em;
    font-family: quicksand;
}
.headimg h5 {
    color: white;
    font-size: 1.3em;
    letter-spacing: 0.1em;
    margin: 10px 20px;
    font-weight: normal;
    font-family: quicksand;
}
.headimg h6 {
    padding: 7px 8px;
    margin: 5px 5px;
    border: solid 1px white;
    width: 194px;
    height: 39px;
    display: inline-block;
       background: rgba(50,50,50,0.2);
    overflow: hidden;
}
.headimg h6 a {color:white;}
.headimg a:hover {color:silver;}
.recommendlist {
    margin: 18px 0 0 0;
}

/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

/* PC版のレイアウト調整 - スライダー下の余白を広げ、記事カードを小さく */
@media screen and (min-width: 768px) {
  /* スライダーを中央揃えにして、下の余白を広げる */
  .bx-top, .bx-wrapper {
    max-width: 100% !important;
    margin: 0 auto 40px !important;
  }
  
  /* スライダーの表示調整 */
  .bx-viewport {
    overflow: visible !important;
  }
  
  .bxslider {
    text-align: center !important;
    margin: 0 auto !important;
  }
  
  /* コンテンツエリア全体の幅を調整 */
  #content {
    width: 80% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 0 30px !important;
  }
  
  /* メインコンテンツとサイドバーの幅・余白調整 */
  #main {
    width: 68% !important;
    padding-right: 3% !important; /* サイドバーとの間隔 */
    box-sizing: border-box !important;
  }
  
  #box2 {
    width: 29% !important; /* メイン領域との間隔を考慮した幅 */
  }
  
  /* 記事カードのサイズを小さく */
  .entry {
    margin-bottom: 25px !important;
    padding: 0 !important; /* パディングをリセット */
  }
  
  /* 記事カード内の余白調整 */
  .entry-header-content {
    padding: 10px 15px 0 !important;
  }
  
  .entry-inner {
    padding: 0 15px 15px !important;
  }
  
  /* 記事タイトルのサイズ調整 */
  .entry-title {
    font-size: 18px !important;
    margin: 5px 0 8px !important;
    line-height: 1.4 !important;
  }
  
  /* 記事本文部分の余白調整 */
  .entry-content {
    margin-top: 10px !important;
    line-height: 1.7 !important;
  }
  
  /* カテゴリーラベルのサイズ調整 */
  .entry-categories a {
    font-size: 11px !important;
    padding: 2px 8px !important;
  }
  
  /* サムネイル画像の高さ調整 */
  .entry-header-image {
    max-height: 200px !important;
    overflow: hidden !important;
  }
  
  /* サイドバーモジュールの余白調整 */
  .hatena-module {
    margin-bottom: 25px !important;
    padding: 15px !important;
  }
  
  /* トップページからの余白調整 */
  #container {
    padding-top: 20px !important;
  }
}

/* サイドバーとコンテンツの間隔調整 */
@media screen and (min-width: 1024px) {
  #main {
    width: 67% !important;
    padding-right: 4% !important; /* サイドバーとの間隔をさらに広く */
  }
  
  #box2 {
    width: 29% !important;
  }
}


/* 全体の背景色 */
body {
  background-color: #f6f6f6; /* 淡いグレーの背景 */
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 全体のフォント */
body, 
input, 
button, 
textarea, 
select {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
  color: #333;
}

/* リンクスタイル */
a {
  color: #333;
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: #75B798; /* 緑色のホバー */
  text-decoration: none;
}

/* 見出しスタイル */
h1, h2, h3, h4, h5, h6, 
.entry-title, 
#blog-title, 
.hatena-module-title {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
  font-weight: 600;
  color: #333;
}

/* コンテンツエリア幅の調整 */
#content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

#main {
  width: 70%;
  float: left;
}

#box2 {
  width: 28%;
  float: right;
}

/* カードスタイル - 記事とサイドバーの共通スタイル */
.entry, .hatena-module {
  background: #fff;
  border-radius: 12px; /* 丸みを増やす */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 20px;
  margin-bottom: 25px;
  overflow: hidden;
}
/* フォントと見出しスタイルの調整 */
.hatena-module-title {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
  color: #2d4654 !important; /* 濃い青緑色 - 1枚目の写真に合わせる */
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Profile/ABOUTのスタイル調整 */
.hatena-module-profile .hatena-module-title {
  color: #2d4654 !important;
  text-transform: capitalize !important;
  border-bottom-color: #75B798 !important; /* 緑色のボーダー */
}

.hatena-module-profile {
  text-align: center !important;
}

.hatena-module-profile .profile-icon {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  border: 3px solid #75B798 !important; /* 緑色の枠 */
  margin: 0 auto 15px !important;
  display: block !important;
}

.hatena-module-profile .profile-description {
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* SNSボタンのスタイル */
.hatena-module-profile .profile-follows {
  display: flex !important;
  justify-content: center !important;
  margin-top: 20px !important;
}

.hatena-module-profile .profile-follows a {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background-color: #f5f5f5 !important;
  margin: 0 5px !important;
  line-height: 40px !important;
  text-align: center !important;
}

/* 検索フォームのスタイル */
.search-module-input {
  border-radius: 20px !important;
  font-size: 14px !important;
}

/* 記事カードスタイル */
.entry {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.entry:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 記事タイトル */
.entry-title {
  font-size: 22px;
  margin-bottom: 15px;
  line-height: 1.4;
}

.entry-title a {
  color: #333;
  text-decoration: none;
}

.entry-title a:hover {
  color: #75B798;
}

/* カテゴリーバッジ */
.entry-category-label {
  background-color: #75B798; /* 緑色バッジ */
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 15px;
  display: inline-block;
  margin-bottom: 10px;
  font-weight: normal;
}

/* 記事メタデータ */
.entry-date, .entry-categories, .entry-footer {
  color: #888;
  font-size: 13px;
  margin-bottom: 10px;
}

/* 記事の本文 */
.entry-content {
  margin-top: 15px;
  line-height: 1.8;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* 画像に丸み */
  margin-bottom: 10px;
}

/* アイキャッチ画像 */
.entry-thumb {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
}

.entry-thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.entry-thumb:hover img {
  transform: scale(1.03);
}

/* サイドバータイトル */
.hatena-module-title {
  border-bottom: 2px solid #75B798;
  padding-bottom: 8px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* サイドバー内リスト */
.hatena-module ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.hatena-module ul li {
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 0;
}

.hatena-module ul li:last-child {
  border-bottom: none;
}

/* プロフィールモジュール */
.hatena-module-profile {
  text-align: center;
}

.hatena-module-profile .profile-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 15px;
  border: 3px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 検索ボックス */
.search-form {
  position: relative;
  margin-top: 10px;
}

.search-module-input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  font-size: 14px;
  box-sizing: border-box;
}

.search-module-button {
  display: none !important;
}

@media screen and (max-width: 767px) {
  /* サイドバー全体の余白を記事一覧と一致させる */
  #box2 {
    padding: 0 !important; /* サイドバーの親には余白なし */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* サイドバーモジュール（カード）の横幅を記事一覧カードに揃える */
  .hatena-module,
  .hatena-module-profile,
  .hatena-module-search-box,
  .hatena-module-category,
  .hatena-module-archive,
  .hatena-module-related-entries {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* サイドバーモジュール内の余白 */
  .hatena-module-body {
    padding: 15px 0 !important; /* 左右余白はモジュール自体で確保 */
  }

  /* 検索ボックスの幅 */
  .search-module-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}



/* カテゴリー一覧 */
.hatena-module-category .hatena-module-body {
  padding: 0;
}

.hatena-module-category .hatena-module-body a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.hatena-module-category .hatena-module-body a:hover {
  background-color: #f9f9f9;
  padding-left: 5px;
}

/* アーカイブ一覧 */
.hatena-module-archive .hatena-module-body {
  padding: 0;
}

.hatena-module-archive .hatena-module-body ul {
  list-style-type: none;
  padding: 0;
}

.hatena-module-archive .hatena-module-body li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

/* フッターデザイン */
.footer {
  background-color: #003A4B;
  color: #fff;
  padding: 40px 0 20px;
  margin-top: 60px;
  clear: both;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-column {
  width: 30%;
  margin-bottom: 20px;
}

.footer-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #75B798;
  color: #fff;
}

/* カテゴリーのCSS-onlyアコーディオン */
.category-container, .archive-year-container {
  margin-bottom: 8px;
}

.category-checkbox, .archive-checkbox {
  display: none !important;
}

.category-label, .archive-year-label {
  cursor: pointer;
  display: block;
  padding: 5px 0 5px 20px;
  position: relative;
  color: #e0e0e0;
  font-weight: normal;
}

.category-label:before, .archive-year-label:before {
  content: "+";
  position: absolute;
  left: 0;
  top: 5px;
}

.category-checkbox:checked + .category-label:before,
.archive-checkbox:checked + .archive-year-label:before {
  content: "-";
}

.subcategories, .archive-months {
  display: none !important;
  padding: 5px 0 5px 20px;
}

.category-checkbox:checked ~ .subcategories,
.archive-checkbox:checked ~ .archive-months {
  display: block !important;
}

.subcategories a, .archive-months a {
  display: block;
  color: #e0e0e0;
  margin-bottom: 6px;
  text-decoration: none;
  font-size: 13px;
}

.subcategories a:hover, .archive-months a:hover {
  color: #75B798;
}

.category-direct {
  display: block;
  color: #e0e0e0;
  padding: 5px 0 5px 20px;
  text-decoration: none;
}

.category-direct:hover {
  color: #75B798;
}

/* フォローボタンエリア */
.footer-social {
  margin-top: 20px;
  text-align: center;
}

.footer-social .center {
  margin-bottom: 10px;
  color: #e0e0e0;
}

.footer-social .follow-buttons {
  display: flex;
  justify-content: center;
}

.footer-social .follow-buttons a {
  display: inline-block;
  margin: 0 5px;
  padding: 8px 15px;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer-social .instagram {
  background: linear-gradient(125deg, #427eff 0%, #f13f79 70%) no-repeat;
}

.footer-social .hatena {
  background: #38393C;
}

.footer-social .follow-buttons a:hover {
  opacity: 0.8;
}

/* コピーライト */
.copyright {
  text-align: center;
  color: #e0e0e0;
  font-size: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 記事内のリスト */
.entry-content ul, .entry-content ol {
  padding-left: 20px;
  margin-bottom: 20px;
}

.entry-content li {
  margin-bottom: 8px;
}

/* 記事内の見出し */
.entry-content h2 {
  font-size: 20px;
  margin: 30px 0 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #75B798;
}

.entry-content h3 {
  font-size: 18px;
  margin: 25px 0 15px;
  padding-left: 10px;
  border-left: 4px solid #75B798;
}

/* 記事内のコード */
.entry-content pre {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 20px;
}

/* レスポンシブ対応 */
@media screen and (max-width: 1024px) {
  #main {
    width: 65%;
  }
  
  #box2 {
    width: 32%;
  }
}

@media screen and (max-width: 767px) {
  #main, #box2 {
    width: 100%;
    float: none;
  }
  
  .entry, .hatena-module {
    padding: 15px;
  }
  
  .entry-title {
    font-size: 18px;
  }
  
  .footer-column {
    width: 100%;
  }
  
  .archive-months {
    display: flex !important;
    flex-wrap: wrap;
  }
  
  .archive-checkbox:checked ~ .archive-months {
    display: flex !important;
  }
  
  .archive-months a {
    width: 45%;
  }
}

/* サイドバーのヘッダースタイルをリセット - DUDEテーマの上書き */
.hatena-module-title {
  background: none !important;
  color: #333 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 15px !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 2px solid #75B798 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  position: relative !important;
}

/* DUDEの装飾要素を全て非表示に */
.hatena-module-title:before,
.hatena-module-title:after {
  display: none !important;
}

/* ABOUT/Profileのスタイル */
.hatena-module-profile .hatena-module-title {
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: bold !important;
}

/* サイドバーコンテンツスタイルのリセット */
.hatena-module-body {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* 検索ボックスのスタイル調整 */
.search-module-input {
  width: 100% !important;
  padding: 10px 15px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

/* プロフィールモジュールの調整 */
.hatena-module-profile {
  text-align: center !important;
}

.hatena-module-profile .profile-icon {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  margin: 0 auto 15px !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
}

/* フォローボタンエリア */
.hatena-module-profile .profile-follows {
  margin-top: 15px !important;
  display: flex !important;
  justify-content: center !important;
}

/* カテゴリーリスト */
.hatena-module-category .hatena-module-body,
.hatena-module-archive .hatena-module-body {
  padding: 0 !important;
}

.hatena-module-category .hatena-module-body a,
.hatena-module-archive .hatena-module-body a {
  padding: 8px 0 !important;
  display: block !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.hatena-module-category .hatena-module-body a:hover,
.hatena-module-archive .hatena-module-body a:hover {
  padding-left: 5px !important;
  background-color: #f9f9f9 !important;
}

/* 検索モジュールの調整 */
.hatena-module-search-box {
  padding: 0 !important;
}

/* スマホ用メニューのリセット */
@media screen and (max-width: 767px) {
  .drawer-title {
    text-align: left !important;
    background: none !important;
    padding: 0 0 8px 0 !important;
    height: auto !important;
    line-height: normal !important;
    color: #333 !important;
    border-bottom: 2px solid #75B798 !important;
  }
}


/* DUDEテーマの上書きのための強力なリセット */
.hatena-module-title,
#box2-inner .hatena-module-title,
#box2 .hatena-module-title,
.hatena-module > .hatena-module-title,
body .hatena-module > .hatena-module-title,
body #box2 .hatena-module-title {
  display: block !important;
  background: none !important;
  background-color: transparent !important;
  color: #333 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 0 15px 0 !important;
  padding: 0 0 8px 0 !important;
  border: none !important;
  border-bottom: 2px solid #75B798 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
  height: auto !important;
}

/* ABOUTタイトルの特別なスタイリング */
.hatena-module-profile .hatena-module-title,
#box2 .hatena-module-profile .hatena-module-title,
body #box2 .hatena-module-profile .hatena-module-title {
  font-weight: bold !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* 黒バーを完全に取り除く */
.hatena-module-title::before,
.hatena-module-title::after,
#box2 .hatena-module-title::before,
#box2 .hatena-module-title::after,
.hatena-module > .hatena-module-title::before,
.hatena-module > .hatena-module-title::after,
body .hatena-module-title::before,
body .hatena-module-title::after {
  display: none !important;
  content: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* タイトルの上下の余白調整 */
.hatena-module-title + .hatena-module-body {
  padding-top: 0 !important;
}

/* モジュール本体の調整 */
.hatena-module-body,
#box2 .hatena-module-body,
body .hatena-module-body {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* 検索モジュール */
.hatena-module-search-box .hatena-module-body {
  padding: 0 !important;
}

.search-module-input {
  width: 100% !important;
  padding: 10px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

/* サイドバーモジュールの全体調整 */
.hatena-module {
  background-color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  overflow: hidden !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

/* ABOUTモジュール特有のスタイル */
.hatena-module-profile {
  background-color: #fff !important;
}

/* スマホでのドロワーメニュータイトル調整 */
@media screen and (max-width: 767px) {
  .drawer-title {
    background: transparent !important;
    color: #333 !important;
    border-bottom: 2px solid #75B798 !important;
    text-align: left !important;
    height: auto !important;
    line-height: normal !important;
    padding: 0 0 8px 0 !important;
    margin-bottom: 15px !important;
  }
}


/***  プロフィールのこのブログについてを消す  ***/
div.profile-about {
  display: none;
}

/***  トップ画像のサイズ設定  ***/
.entry-content img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: auto; /* もしくはこの行を削除 */
}




/***  サイドバー注目記事ランキング表示  ***/
.entries-access-ranking{
    counter-reset: rank 0;
}

.entries-access-ranking-item::before {
    padding-top: 1px;
    padding-right: 10px;
    padding-bottom: 1px;
    padding-left: 10px;
    background-color: #4169e1;
    color: #ffffff;
    counter-increment: rank 1;
    content: counter(rank) " ";
}

.entries-access-ranking-item-inner {
    margin-top: -22px;
}

.rank-1::before{
    background-color: #dbb400;
}

.rank-2::before{
    background-color: #c9caca;
}

.rank-3::before{
    background-color: #c47022;
}






/* Responsive: yes */
@media (max-width: 767px) {
    /* グローバルヘッダとの隙間をなくす */
    #container {
        padding-top: 0;
    }

    /* 左右のマージンを相対指定に */
    #content {
        margin-left: 3.125% !important;
        margin-right: 3.125% !important;
    }

    /* 横幅の調整 */
    #container #content {
        width: auto;
    }
    #blog-title-content {
        width: auto;
        text-align: center;  /* ブログタイトルを中央揃えに */
    }
}




/*関連記事 見出し*/
.hatena-module-related-entries .hatena-module-title {
    padding: 7px;
    text-align: center;
    color: #75bda2;
    border-bottom: solid 2px #75bda2;
    font-size: 19px;
    margin-bottom: 3px;
}

/*1枚のカードの背景など*/
li.urllist-item.related-entries-item {
    margin: 12px 0;
    padding: 0 10px 0 0;
    background: #f4f4f4;
    border-radius: 2px;
    box-shadow: 0 2px 3px rgba(3, 3, 3, 0.18);
    border-bottom: none;
}

/*関連記事の画像まわり余白調整*/
.urllist-with-thumbnails li .urllist-image {
    margin: 0 10px 0 0;
}

/*関連記事のタイトル*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
    padding-top: 9px;
    text-decoration: none;
    color: #525252;
    font-weight: bold;
    display: block;
    font-size: 15px;
}

/*関連記事のタイトルホバー*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover {
    color: silver;
}

/*関連記事の説明*/
.urllist-entry-body.related-entries-entry-body {
    color: #8f8f8f;
    font-size: 13px;
    margin-top: 3px;
}

.urllist-date-link.related-entries-date-link {
    position: relative;
}

/*関連記事の日付*/
.hatena-urllist .urllist-date-link a {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    background: #75bda2;
    color: #fff;
    line-height: 1;
    padding: 4px 5px;
    margin-bottom: 3px;
    font-size: 10px;
    font-style: normal;
   	text-decoration: none;
}

/*関連きじの説明文を非表示に*/
.urllist-entry-body.related-entries-entry-body {
    display: none;
}




/*スライダーの画像比率*/
.slider-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  display: block;
}
.bxslider img {
  width: 100%;
  height: auto;
  display: block;
}
.bxslider img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}


/*プレースホルダーのサイズ*/
.bx-placeholder {
  width: 100%;
  aspect-ratio: 5 / 2; /* 横:縦（例：250x100なら5:2） */
  background-color: #ffffff; /* 一時的な背景色 */
}



/******** もしもアフィリエイトかんたんリンク *******/
/* 全体 */
div.easyLink-box {
    box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25); /* 影 */
     transform: scale(0.8, 0.8); /* 全体を小さく表示 */
}
/* 商品タイトル */
p.easyLink-info-name a {
    color: #3296d2 !important; /* 文字色 */
    font-weight:bold; /* 太文字 */
}
/* 商品ボタン */
.easyLink-info-btn a{
    margin: 5px 10px 5px 0!important;
    padding: 0 12px!important;
    line-height: 35px!important;
    display: inline-block!important;
    width: 100%!important; /* 幅広 */
    box-shadow: 0 8px 15px -5px rgba(0,0,0,.25)!important; /* 影 */
    font-size: 1em!important;
}
/* ボタン色 */
a.easyLink-info-btn-amazon {
    background: #ffb442 !important; /* 背景色 */
    border: 2px solid #ffb442 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-rakuten {
    background: #f76d65 !important; /* 背景色 */
    border: 2px solid #f76d65 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-yahoo {
    background: #34a3c2 !important; /* 背景色 */
    border: 2px solid #34a3c2 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
/* ボタン色_マウスオーバー時 */
a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度 */
    background: #fff !important; /* 背景色 */
    color: #f6a306 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度 */
    background: #fff !important; /* 背景色 */
    color: #cf4944 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度 */
    background: #fff !important; /* 背景色 */
    color: #51a7e8 !important; /* 文字色 */
}
/* メーカーと型番非表示 */
.easyLink-info-maker { /* メーカー非表示 */
 display: none;
 }
.easyLink-info-model { /* 型番非表示 */
 display: none;
 }
/* --- 画像サイズ --- */
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht{
  max-width: 160px !important; /*(画像小を使う場合は140px以下）*/
  max-height: 160px !important; /*(画像小を使う場合は140px以下）*/
  margin: auto;
}
/* 最後のボタン下の空白を削除 */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
    margin-bottom: 0 !important;
}
/* PC以外の時 */
@media screen and (max-width: 767px) {
/* 全体 */
div.easyLink-box {
    box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25); /* 影 */
     transform: scale(0.9, 0.9); /* 全体を小さく表示 */
}
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht{
  max-width: 120px !important; /*(画像をPCより小さく調整）*/
  max-height: 120px !important; /*(画像をPCより小さく調整）*/
  margin: auto;
}}
/******** もしもアフィリエイトかんたんリンクここまで *******/






/***  オーソドックスなカード型デザイン  ***/

/* 記事カードの丸み付け */
.entry,
.page-index .entry,
.page-archive .archive-entry {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
  margin-bottom: 25px !important;
  background-color: #fff !important;
}

/* カードのホバーエフェクト */
.entry:hover,
.page-archive .archive-entry:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
  transition: all 0.3s ease !important;
}

/* 記事サムネイルの角丸設定 */
.entry-header-image,
.entry-header-image img,
.archive-entry-header-image,
.archive-entry-header-image img,
.archive-entry-thumb,
.entry-thumb {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

/* 記事タイトルと内容の調整 */
.entry-title,
.archive-entry-title {
  padding: 15px 15px 5px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.entry-description,
.archive-entry-description {
  padding: 0 15px 15px !important;
}

/* 日付スタイル */
.entry-date,
.archive-entry-date {
  padding: 0 15px 15px !important;
  color: #999 !important;
  font-size: 12px !important;
}

/* モバイル調整 */
@media screen and (max-width: 767px) {
  .entry-title,
  .archive-entry-title {
    font-size: 16px !important;
  }
  
  .hatena-module-profile .profile-icon {
    width: 100px !important;
    height: 100px !important;
  }
}

.page-archive .archive-entries {
    display: flex;
    flex-wrap: wrap;
}

.page-archive .archive-entries .archive-entry {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 0 0 5px;
    margin-bottom: 1.5em;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 0;
    transition: .25s ease-in-out;
}

.page-archive .archive-entries .archive-entry:hover {
    transform: translateY(-4px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

@media (min-width: 481px) {
    .page-archive .archive-entries .archive-entry {
         width: calc(50% - 10px);
}
    .page-archive .archive-entries .archive-entry:nth-child(odd) {
        margin-right: 20px
    } 
}

.archive-entry-header {
    display: flex;
    flex-direction: column-reverse;
    order: 2;
    padding: 10px 16px 0;
    width: calc(100% - 32px);
}

.page-archive .archive-entries .entry-title {
    line-height: 1.5;
    font-size: 18px;
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.page-archive .entry-title a {
    font-size: 18px;
}

.page-archive .archive-entries .entry-thumb-link {
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    width: 100%;
    height: auto;
}

.page-archive .entry-thumb {
    background-size: cover;
    background-position: 50%;
    border-radius: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.page-archive .archive-entries .categories {
    order: 3;
    margin: 0;
    padding: 0 16px;
}

.page-archive .entry-thumb::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.1);
    opacity: 0;
    transition: .25s ease-in-out;
}

.page-archive .archive-entries .archive-entry:hover .entry-thumb::before {
    opacity: 1;
}

.archive-entry-body {
    display: none;
}




/***カテゴリー非表示***/
.page-index .categories{
    display:none;
}






/***フォローボタンラベル部分***/
.follow-label {
    font-weight: bold;
    font-size: 1em;
    text-align: start;
    line-height: 1.5;
}
/***ここからフォローボタンカラー***/
.follow-btn-list {
    list-style: none;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0 0 1em;
}
.follow-btn-item a {
    display: inline-block;
    text-align: center;
    width: 40px;
    height: 40px;
    margin: .15em;
    padding: .1em;
    color: #fff;
    font-size: 26px;
    line-height: 40px;
    border-radius: 9px;
    box-sizing: border-box;
    transition: .2s;
}
.follow-btn-item a:hover {
    transform: translateY(-4px);
    box-shadow: 1px 10px 8px -4px rgba(0,0,0,.2);
    opacity: .8;
    color: #fff;
}
/*** 読者登録 ***/
.follow-btn-item .hatena {
    background: #333;
}
/*** ツイッター ***/
.follow-btn-item .twitter {
    background: #1da1f2;
}
/*** instagram ***/
.follow-btn-item .instagram {
    background: linear-gradient(125deg, #427eff 0%, #f13f79 70%) no-repeat;
    position: relative;
    overflow: hidden;
}
.follow-btn-item .instagram::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -14px;
    width: 53px;
    height: 53px;
    background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
.blogicon-instagram {
    position: relative;
    z-index: 1;
}
/*** instagramここまで ***/
.follow-btn-item i {
    vertical-align: 7%;
}




/*ヘッド画像の表示領域変更*/
.headimg {
-moz-background-size:cover;
background-size:cover;
padding: 0px 0px; /*上下、左右の余白調整*/
}








/*****グローバルメニュー****/
/*
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office
Customized by minimalgreen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.drawer_menu a {
	color: inherit;
	text-decoration: none;
}

.drawer_menu a:visited {
	color: inherit;
}


/* PC用ナビゲーション */

.drawer_menu .drawer_nav_wrapper {
	transform: translate(0);
	width: 100%;
	height: 50px;
	/* PC用メニュー高さ */
	position: relative;
	top: auto;
	right: auto;
	z-index: 100;
	background-color: #064b69;
	/* PC用メニュー背景色 */
	font-weight: 600;
}

.drawer_menu .drawer_nav {
	max-width: 1000px;
	/* コンテンツ幅に合わせる */
	padding: 0;
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	list-style-type: none;
}

.drawer_menu .drawer_nav li {
	font-size: 16px;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 50px;
	/* PC用メニュー高さ */
	line-height: 50px;
	/* PC用メニュー高さ */
	background-color: #064b69;
	/* PC用メニューボタン背景色 */
	text-align: center;
	list-style-type: none;
}

.drawer_menu .drawer_nav li:hover {
	background-color: #90AFC5;
	/* PC用メニューボタンマウスオーバー背景色 */
}

.drawer_menu .drawer_nav li a {
	color: #fff;
	/* PC用メニューボタン文字色 */
}


/* PC非表示 */
@media screen and (min-width:1001px) {
	.pc-hidden {
		display: none;
		text-align: center;
	}
}

@media screen and (min-width: 1001px) {

	/* ドロップダウンメニュー2階層目 */
	.drawer_menu .drawer_nav li ul.second-level {
		visibility: hidden;
		list-style-type: none;
		position: absolute;
		z-index: -1;
		top: 50%;
		margin: 0;
		padding-left: 0;
		opacity: 0;
		transition: .5s;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level {
		visibility: visible;
		z-index: 1;
		/* PC用メニューの高さに合わせる */
		top: 100%;
		opacity: 1;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li {
		width: 200px;
		/* ドロップダウンメニューボタン横幅 */
		height: 50px;
		/* Pドロップダウンメニューボタン高さ */
		text-align: center;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li a {
		display: block;
		background-color: #336B87;
		/* ドロップダウンメニューの文字の背景色 */
		color: #fff;
		/* ドロップダウンメニューの文字色 */
		font-size: 100%;
		text-decoration: none;
		line-height: 50px;
		/* Pドロップダウンメニューボタン高さ */
		text-align: center;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li a:hover {
		background-color: #90AFC5;
		/* ドロップダウンメニューマウスホバー背景色 */
	}

	.touch-btn {
		color: #fff;
		margin-left: 5px;
	}
}

/*+++ Default Button Color +++*/

.drawer_menu .drawer_button {
	color: #EE592E;
	/* ハンバーガーメニュー文字色 */
	display: none;
}

.drawer_menu .drawer_button .drawer_bar {
	background-color: #064b69;
	/* ハンバーガーメニュー三本線の色 */
}



/* フッターデザイン */
.footer {
  background-color: #003A4B;
  color: #fff;
  padding: 40px 0 20px;
  margin-top: 60px;
  font-size: 14px;
  line-height: 1.6;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

.footer-column {
  width: 30%;
  margin-bottom: 20px;
}

/* カテゴリー列とアーカイブ列のスタイル調整 */
.category-column,
.archive-column {
  width: 35%;
}

.footer-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* カテゴリーのCSS-onlyアコーディオン */
.category-container {
  margin-bottom: 8px;
  position: relative;
}

/* チェックボックスは非表示 */
.category-checkbox {
  display: none !important;
}

/* カテゴリーラベルのスタイル */
.category-label {
  cursor: pointer;
  display: block;
  padding: 5px 0 5px 20px;
  position: relative;
  color: #fff;
  font-weight: bold;
}

/* + アイコンの追加 */
.category-label:before {
  content: "+";
  position: absolute;
  left: 0;
  top: 5px;
  font-weight: bold;
}

/* チェックされたときにアイコンを - に変更 */
.category-checkbox:checked + .category-label:before {
  content: "-";
}

/* サブカテゴリーリストは初期状態で非表示 */
.subcategories {
  display: none;
  padding: 5px 0 5px 20px;
}

/* チェックされたときのみサブカテゴリーリストを表示 */
.category-checkbox:checked ~ .subcategories {
  display: block;
}

/* サブカテゴリーリンクのスタイル */
.subcategories a {
  display: block;
  color: #e0e0e0;
  margin-bottom: 6px;
  text-decoration: none;
  font-size: 13px;
}

.subcategories a:hover {
  color: #90AFC5;
  text-decoration: underline;
}

/* サブカテゴリーがないカテゴリー用のスタイル */
.category-direct {
  display: block;
  color: #fff;
  padding: 5px 0 5px 20px;
  text-decoration: none;
  font-weight: bold;
}

.category-direct:hover {
  color: #90AFC5;
}

/* アーカイブのCSS-onlyアコーディオン */
.archive-year-container {
  margin-bottom: 8px;
  position: relative;
}

/* チェックボックスは非表示 */
.archive-checkbox {
  display: none !important;
}

/* 年ラベルのスタイル */
.archive-year-label {
  cursor: pointer;
  display: block;
  padding: 5px 0 5px 20px;
  position: relative;
  color: #fff;
  font-weight: bold;
}

/* + アイコンの追加 */
.archive-year-label:before {
  content: "+";
  position: absolute;
  left: 0;
  top: 5px;
  font-weight: bold;
}

/* チェックされたときにアイコンを - に変更 */
.archive-checkbox:checked + .archive-year-label:before {
  content: "-";
}

/* 月リストは初期状態で非表示 */
.archive-months {
  display: none !important; /* 強制的に非表示に */
  padding: 5px 0 5px 20px;
}

/* チェックされたときのみ月リストを表示 */
.archive-checkbox:checked ~ .archive-months {
  display: block !important; /* チェック時のみ表示 */
}

/* 月リンクのスタイル */
.archive-months a {
  display: inline-block;
  color: #e0e0e0;
  margin-right: 10px;
  margin-bottom: 6px;
  text-decoration: none;
  font-size: 13px;
}

.archive-months a:hover {
  color: #90AFC5;
  text-decoration: underline;
}

/* プロフィール部分 */
.footer-profile {
  margin-bottom: 20px;
}

.footer-profile-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
}

.footer-profile p {
  margin: 0;
  color: #e0e0e0;
  font-size: 13px;
  line-height: 1.5;
}

/* フォローボタン */
.footer-social {
  margin-top: 20px;
  text-align: center;
}

.footer-social .center {
  font-size: 13px;
  margin-bottom: 10px;
  color: #e0e0e0;
}

.footer-social .follow-buttons {
  display: flex;
  justify-content: center;
}

.footer-social .follow-buttons a {
  display: inline-block;
  margin: 0 5px;
  padding: 8px 15px;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  transition: background-color 0.3s;
}

.footer-social .instagram {
  background: linear-gradient(125deg, #427eff 0%, #f13f79 70%) no-repeat;
}

.footer-social .hatena {
  background: #38393C;
}

.footer-social .follow-buttons a:hover {
  opacity: 0.8;
}

.footer-social .follow-buttons .inner-text {
  margin-left: 5px;
  vertical-align: middle;
}

/* フッターの下部 */
.footer-bottom {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.copyright {
  color: #e0e0e0;
  font-size: 12px;
  margin: 0;
}

.copyright a {
  color: #90AFC5;
  text-decoration: none;
}

/* モバイル対応 */
@media screen and (max-width: 767px) {
  .footer-row {
    flex-direction: column;
  }
  
  .footer-column,
  .category-column,
  .archive-column {
    width: 100%;
    margin-bottom: 30px;
  }
  
  .footer-profile-icon {
    width: 50px;
    height: 50px;
  }
  
  /* モバイルでの表示調整 - 初期状態では閉じた状態を維持 */
  .subcategories {
    display: none !important; /* モバイルでも強制的に非表示 */
  }
  
  .category-checkbox:checked ~ .subcategories {
    display: block !important; /* チェック時のみ表示 */
  }
  
  .archive-months {
    display: none !important; /* モバイルでも強制的に非表示 */
    flex-wrap: wrap;
  }
  
  .archive-checkbox:checked ~ .archive-months {
    display: flex !important; /* チェック時のみ表示、flexレイアウト */
  }
  
  .archive-months a {
    width: 45%; /* モバイルでは2列に */
  }
}




/* 1000px以下 */

@media screen and (max-width: 1000px) {
	.drawer_menu .drawer_bg {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		background-color: rgba(51, 51, 51, 0.5);
		display: none;
		top: 0;
		left: 0;
	}

	.drawer_menu .drawer_button {
		display: block;
		background-color: transparent;
		color: #064b69;
		border: none;
		padding: 5px;
		width: 50px;
		height: 60px;
	    font-weight: 700;			
		letter-spacing: 0.1em;
		cursor: pointer;
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 1001;
		text-align: center;
		outline: none;
	}

	.drawer_menu .drawer_button.active .drawer_bar {
		width: 40px;
　　}        

	.drawer_menu .drawer_button.active .drawer_bar1 {
		transform: rotate(30deg);
	}

	.drawer_menu .drawer_button.active .drawer_bar2 {
		opacity: 0;
	}

	.drawer_menu .drawer_button.active .drawer_bar3 {
		transform: rotate(-30deg);
	}

	.drawer_menu .drawer_button.active .drawer_menu_text {
		display: none;
	}

	.drawer_menu .drawer_button.active .drawer_close {
		display: block;
	}

	.drawer_menu .drawer_bar {
		display: block;
		height: 2px;
		margin: 8px 2px;
		transition: all 0.2s;
		transform-origin: 0 0;
	}

	.drawer_menu .drawer_text {
		text-align: center;
		font-size: 10px;
	}

	.drawer_menu .drawer_close {
		letter-spacing: 0.08em;
		display: none;
	}

	.drawer_menu .drawer_menu_text {
		display: block;
	}

	.drawer_menu .drawer_nav_wrapper {
		width: 250px;
		height: 100%;
		transition: all 0.2s;
		transform: translate(250px);
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1000;
		background-color: #FFF;
		/* ドロワーメニュー内背景色 */
		overflow-x: hidden;
		overflow-y: auto;
	}

	.drawer_menu .drawer_nav {
		display: block;
		position: relative;
		margin-top: 40px;
	}

	.drawer_menu .drawer_nav li {
		background-color: #fff;
		height: auto;
		line-height: 50px;
		/*  ドロワーメニューリスト項目高さ */
		position: relative;
		border-bottom: 1px solid #eee;
	}

	.drawer_menu .drawer_nav li a {
		background-color: #fff;
		/* ドロワーメニューリスト背景色 */
		color: #555;
		/* ドロワーメニューリスト文字色 */
		display: block;
		text-align: left;
		padding-left: 20px;
	}

	/* スマートフォン2階層目 */
	.drawer_menu .drawer_nav li:hover ul.second-level {
		display: block;
	}

	.drawer_menu .drawer_nav li ul.second-level {
		display: none;
		position: relative;
		padding: 0;
		z-index: 1001;
	}

	.drawer_menu .drawer_nav li ul.second-level li a {
		padding-left: 40px;
	}

	.drawer_menu .drawer_nav_wrapper.open {
		transform: translate(0);
	}

	.drawer_menu.left .drawer_button {
		right: auto;
		left: 32px;
	}

	.drawer_menu.left .drawer_nav_wrapper {
		transform: translate(-250px);
		right: auto;
		left: 0;
	}

	.drawer_menu.left .drawer_nav_wrapper.open {
		transform: translate(0);
	}

	.pc-hidden {
		text-align: center;
		font-size: 14px;
	}

	.touch-btn {
		color: #555;
		position: absolute;
		top: .25rem;
		right: 2%;
		display: block;
		z-index: 10;
		width: 50px;
		height: 50px;
		text-align: center;
		vertical-align: middle;
}

/*  ウィジェットタイトル */
.drawer-title {
	text-align: center;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: #064b69;
	/* ドロワーメニュー内タイトルライン背景色 */
	color: #fff;
}

/* フォローボタン */

.follow-buttons {
	text-align: center;
	margin-top: 0;
	width: 100%;
}

.follow-buttons a {
	display: inline-block;
	width: 60px;
	text-align: center;
	text-decoration: none;
	margin: 5px;
}

.follow-buttons .inner-text {
	font-size: 10px;
	display: block;
}

.follow-buttons .lg,
.content-inner-follow-buttons .fa {
	padding: 15px;
	border-radius: 5px;
	margin: 2px auto;
}

.follow-buttons .hatena {
	color: #38393C;
	background-color: transparent;
}

.follow-buttons .blogicon-hatenablog {
	background: #38393C;
	color: #ffffff;
}

.follow-buttons .blogicon-hatenablog:hover {
	background: #5F6063;
}

.follow-buttons .facebook {
	color: #305097;
	background-color: transparent;
}

.follow-buttons .blogicon-facebook {
	background: #305097;
	color: #ffffff;
}

.follow-buttons .blogicon-facebook:hover {
	background: #5A77B7;
}

.follow-buttons .twitter {
	color: #55acee;
	background-color: transparent;
}

.follow-buttons .blogicon-twitter {
	background: #55acee;
	color: #ffffff;
}

.follow-buttons .blogicon-twitter:hover {
	background: #89C7F7;
}

.follow-buttons .instagram {
	color: #D93177;
	background-color: transparent;
}

.follow-buttons .blogicon-instagram {
	background: #D93177;
	color: #ffffff;
}

.follow-buttons .blogicon-instagram:hover {
	background: #df528d;
}

.follow-buttons .feedly {
	color: #6cc655;
	background-color: transparent;
}

.follow-buttons .blogicon-rss {
	background: #6cc655;
	color: #ffffff;
}

.pc-hidden .profile-icon {
	float: none;
	width:100%;
	height:auto;
}









/* 検索結果ページの検索窓を非表示にする */
.search-result-form {
    display: none;
    }




/*トップページのタグ非表示*/
.archive-entry-tags-wrapper {
display:none;
}





.entry-content {

    font-size:17px;

}






/* ヘッダーテキストリンク */
.header-info {
  position: relative;
  max-width: 100%;
}
.header-info a {
  font-weight: bold;
	display: block;
	font-size: .9em;
	text-decoration: none;
	text-align: center;
	color: #fff;/* 文字色 */
	background: #44617b;/* 背景色 */
	padding: 0.5em 1em;
	border-radius: 0px;
}
</style>