@charset "UTF-8";
/*
Theme Name: ehime_mikan_theme2
Theme URI:https://ameblo.jp/miho4581/
Description:Mikan's theme for WordPress
Version: 1.0
Author: Ehime Mikan
Author URI:https://ameblo.jp/miho4581/
*/


html {
  margin-top: 0px !important;
}

/* bodyの設定 */

  /*基本色*/
:root {　　　　　　　　　　　
  --main-color: #3F3C7C;  /* sea cave　深いブルー*/
  --sub-color: #E1A7CA;  /* future pink　ピンク*/
  --accent-color: #D8E072;  /* neo yellow　黄みどり色*/
　--visited-color: #5e5c5c; /* 濃いグレー　*/

  --hover-color: #eef2c6; /* 黄みどり色の薄いバージョン*/
  --gray-color: #4B4C4C; /* 基本文字のグレー　タイトルなど*/
  --circle-color: #f0f8ff; /* アリスブルー：囲み枠の背景色*/
}

body {
  margin: 0;
  padding: 0;
  color: #414242; /* 全体の文字色 濃いグレー*/
  font-size: 14px; /* 全体の文字サイズ */
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; /* フォントの種類 */
  /* font-family: 'ヒラギノ角ゴ ProN W3', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif; */
  /* font-family: 'Rounded Mplus 1c',sans-serif; JINサンプル*/
  list-style: none;
}

/* リンクテキストの設定 */
a {
  color: #5e5c5c; /* 濃いグレー*/
  /* color: #3F3C7C; 深いブルー　 */
  text-decoration: none ;
}

a:visited {
  color: #5e5c5c; /* 濃いグレー　*/
}

a:hover {
  color: #D8E072; /*きみどり*/
  font-weight: 500;
  text-decoration: none;
}

/* h1〜h6の設定 */
h1,h2,h3,h4,h5,h6 {
  margin-top: 0; /* h1〜h6にもdefault値がブラウザにより存在するためリセット */
}

/* p要素の設定 */
p {
  margin-top: 0;
  line-height: 1.0; /* 行間に適度な間を開けさせる */
}

/* 画像要素の設定 */
img {
  vertical-align: bottom; /* 余白（画像下）をリセットするため */
}

ul {
  list-style: none;
}

.sidebar li { /*サイドバーのli~行間調整(アーカイブ）*/
  margin: 10px 0 0 0;
}

/************************************
** レスポンシブページネーション　共通
************************************/
.pagination{
  list-style-type: none;
  padding-left: 0;
  margin: 30px 0;
}

.pagination,
.pagination li a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.pagination a {
  font-weight: 300;
  padding-top: 1px;
  text-decoration:none;
  border: 1px solid #ddd;
  border-left-width: 0;
  min-width:36px;
  min-height:36px;
  color: #333;
}

.pagination li:not([class*="current"]) a:hover {
  background-color: #eee;
}

.pagination li:first-of-type a {
  border-left-width: 1px;
}

.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span {
  /* screen readers only */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.pagination li.first a::before,
.pagination li.last a::after,
.pagination li.previous a::before,
.pagination li.next a::after {
  display: inline-block;
  font-family: Fontawesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

.pagination li.first a::before { content: "\f100"; }
.pagination li.last a::after { content: "\f101"; }

.pagination li.previous a::before { content: "\f104"; }
.pagination li.next a::after { content: "\f105"; }

.pagination li.current a {
  background-color: #ddd;
  cursor: default;
  pointer-events: none;
}

.pagination > li:first-child > a {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.pagination > li:last-child > a {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
/*ここまでページネーション共通*/

/*--------------------------------------
  TOC+　目次〜共通　https://naifix.com/table-of-contents-plus-design/
--------------------------------------*/

#toc_container {
  display: block !important;
  width: 75% !important;
  background: #fff; /* 背景色 */
  border: 2px solid #3F3C7C; /* 枠 */
  border-radius: 5px;
  font-size: 100%; /* フォントサイズ */
  color: #5e5c5c; /*文字濃グレー*/
  box-sizing: border-box; /* スマホの横揺れ防止 */
  line-height: 1.4; /* 行間 */
  margin: 36px auto; /* 外側の余白 */
  padding: 1em 1.5em; /* 内側の余白 */
}

#toc_container .toc_title {
  text-align: center;
  /* background: #eee; */
  /* border-bottom: 2px solid #ddd; */
  padding: 0.4em 0;
  font-weight: bold;
}

#toc_container .toc_title .toc_toggle {
  font-size: 85%;
}

#toc_container ul {
  list-style: none;
  margin-bottom: 0;
  padding: 0 0 0 0.5em;
}

#toc_container ul li {
  margin: 0;
  padding-left: 0;
  text-indent: 0;
}

#toc_container ul a {
display: block;
text-decoration: none;
color: #444;
border-bottom: 1px dotted #3F3C7C;
padding: 0.5em 0 0 0;
}

#toc_container .toc_list > li > a {
border-bottom: 1px solid #3F3C7C;
font-size: 115%;
font-weight: bold; /*見出し１のみ太字に*/
}

#toc_container ul ul {
padding: 1em 0 1em 1em;
}

#toc_container li {
margin-bottom: 0.8em;
padding-bottom: 0.2em;
}

/*目次のul/liともにhoverで黄緑に変わる*/
/* #toc_container a:hover {
  color: #D8E072;
} */

/*--------------------------------------
囲み枠　さるわかくん https://saruwakakun.com/html-css/reference/box
--------------------------------------*/

.box6 { /*背景薄いムラサキ点線枠　タイトルなし*/
  padding: 30px 35px 0 35px; 
  margin: 20px 20px 40px 20px;
  background: #f7f7fb; 
  border: dashed 1.5px #5652AA;/*外枠の点線*/
  line-height: 1.8;
  font-size: 16px;
}

.box6 p {
    margin: 0;
    padding: 0;
}

.box6 a {
  color: #007BBB;
  text-decoration-style: solid;
  text-decoration-line: underline;
}

.box26 {　/*きみどり点線：タイトル付き*/
  position: relative;
  margin: 2em 0;
  padding: 30px 35px; 
  border: dotted 3px #D8E072;
  border-radius: 8px;
  line-height: 1.8;
  font-size: 17px;
  background: #fdfdf1;
}

.box26 .box-title {
  position: relative;
  display: inline-block;
  top: -38px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 22px;
  background: #FFF;
  color: #adb728;
  font-weight: bold;
}

.box26 p:first-child {
  display: none;
}
.box26 p {
  margin: 0;
  padding: 0 25px;
}

/* .box26 p:first-child {
  display: none;
} */

.box26 a {
  color: #007BBB;
  text-decoration-style: solid;
  text-decoration-line: underline;
}

.box28 {　/*ピンク枠：ボックス内にタイトル付き*/
  position: relative;
  margin: 2em 0;
  border: solid 2px #E1A7CA;
  border-radius: 5px;
  background-color: #fcf6f9;
  padding: 1.5em 2.0em;
  font-size: 17px;
  /* line-height: 2; */
  background-color: #fbf5f9;
}

.box28 .box-title {
    position: relative;
    display: inline-block;
    top: -27px;
    left: -35px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #E1A7CA;
    color: #ffffff;
    font-weight: bold;
    border-radius: 3px;
}

.box28 p:first-child {/*効いてない*/
  display: none;
}

.box28 > p:first-child; { /*効いてない*/
    margin: 0;
    padding: 0;
}

.box28 a {
  color: #007BBB;
  text-decoration-style: solid;
  text-decoration-line: underline;
}



/*折り紙風、グリーンの引用枠*/
blockquote {
  position: relative;
  padding: 20px 20px 0 20px;
  margin: 20px 20px 40px 20px;
  box-sizing: border-box;
  font-style: italic;
  background: #f3f3f3;
}

blockquote:before{
  display: inline-block;
  position: absolute;
  top: -8px;
  left: 9px;
  width: 55px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  content: "\f10d";
  font-family: FontAwesome;
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  background: #d8e072;
  font-weight: 900;
}

blockquote:after{
  position: absolute;
  content: '';
  top: -8px;
  left: 64px;
  border: none;
  border-bottom: solid 8px #9CA361;
  border-right: solid 9px transparent;
}

blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}

blockquote p:first-child {
  /* padding: 7px 0 18px 15px; */
  padding: 13px 15px
}

.wp-block-quote a {
  color: #007BBB;
  text-decoration-style: solid;
  text-decoration-line: underline;
}


blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/*--------------------------------------
下線マーカーのCSS　
〜https://miiko315.net/4223.html　を参照
プラグイン『AddQuicktag』と連携
--------------------------------------*/
/* ピンクのマーカー*/
.marker-pink {
background: linear-gradient(transparent 60%, #f1d7e7 50%);
/* background: linear-gradient(transparent 60%, #E1A7CA 50%); */
}
/* きみどりのマーカー*/
.marker-kimidori {
background: linear-gradient(transparent 60%, #e4e9a1 50%);
}
/* ブルーのマーカー*/
.marker-blue {
background: linear-gradient(transparent 60%, #c8eaee 50%);
}
/* 黄色のマーカー*/
.marker-yellow {
  background: linear-gradient(transparent 60%, #fffe6a 50%);
}

/************************************
** パンくずリスト（Breadcrumb）
************************************/
#breadcrumb{
  margin-bottom: 0;
  color:#777;
  font-size:13px;
  display: flex;
}

div#breadcrumb div {
  display: inline;
}

#breadcrumb span.sp{
  margin:0 10px;
}

#breadcrumb a{
  text-decoration:none;
  color:#777;
}

#breadcrumb div:first-child a:before {
  /*家アイコン サルワカくん参照　https://saruwakakun.com/html-css/basic/breadcrumb */
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
  color: #777;
  margin-right: 3px;
}

#breadcrumb div a:hover {
  text-decoration: underline;
}

.wp-block-code { 
  background-color: #faf0f6; /*ソースコードの背景色*/
  white-space: pre-wrap; /*中身の文字折り返す*/
  word-wrap: break-word;　/*後の記事ではみ出しエラーあり、追加*/
}

.wp-block-code { /*ソースコード*/
  padding: 20px;
  font-size: 17px;
  line-height: 2;
}

.wpp-thumbnail { /*人気記事のサムネイル*/
  width: 80px;
}

/***** ここからメディアクエリ *****/

@media (min-width: 320px) {
/*iphone5/SEに適用*/
  .wrapper {
    width: 320px;
    /* height: 17206px; */
  }
  /* ヘッダー */
  header {
    width: 320px;
    position: relative;
  }

  /* header a {
    color: #3f3c7c;
  } */

  /*1:タイトル部 */
   .logo-set {
    height: 140px;
    text-align: center;
    padding: 0;
    /* font-family: 'Courgette', cursive;  */
    font-family: 'Julius Sans One', sans-serif;/* https://frontendlifeinde.com/　と同じに　*/
    margin: 15px 0 60px 0;
   }

   /* .logo-set a:hover{
    color: #D8E072;
    transition: .4s;
   } */

   .logo-set h1 {
    font-size: 44px;
    font-weight: 700;
    margin: 0 80px;
    padding: 4px;
    color: #3f3c7c; /*題字ブルーにするとなぜかホバーで色変わらず*/
    border-bottom: 1px solid #3f3c7c;
    border-top: 1px solid #3f3c7c;
   }

   .logo-set h1:hover {
     color: #D8E072;
     transition: .5s;
     padding: 0.1em 0;
   }

   .logo-set p {
    margin-top: 15px;
    font-size: 15px;
    /* color: #3f3c7c; */
   }

   .logo-set p:hover {
     color: #D8E072;
     transition: .5s;
   }

  /*2: 右上　SNSボタン,検索マーク */
  .header-menu {
    display: none;
    /* position: absolute;
    top:0;
    right: 50px; */
  }

  .header-menu ul {
    font-size: 18px;
    display: flex;
    margin: 0;
    padding: 0;
  }

  .header-menu a {
    display: block;
    margin-right: 12px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
  }

  .header-menu a:hover {
    color: #D8E072; /*カーソル載せるとで黄みどりになる設定*/
  }

  /* nav */
  nav {　　
    width: 320px;
    height: 65px;
    color: #335cbb;
    background-color: #3F3C7C;
  }

  .menu-item a { /*ホバーしやすく大きくした*/
    width: 83px;
    height: 23px;
    color: white;
    display: inline-block;
  }

  .navi-in a:hover {
    opacity: 0.8;
    margin-top: 1.5px;
    border-top: 1.5px solid #3F3C7C; /*上に青ラインがつく→同色なので下に文字だけ移動して見える*/
    /* background-color: #5753AB;　背景を薄いブルーに */
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .navi-in ul {
    height: 50px;
    margin: 0 10px 0 -20px;
    padding-left: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .navi-in li {
    width: 62px;
    height: 0;
    margin: 12px 10px;
    text-align: center;
    font-size: 11px;
  }

  .menu-item {　
    width: 93px;
    height: 20px;
    margin: 15px 30px;
    text-align: center;
    font-size: 15.5px;
  }

  /* メイン */
  main {
    /* float: left; */
  }

  section {
    width: 320px;
  }

  .item a {
    /* display: block; タグチップ横並び*/
    color: white;
  }

  .item a:hover {
    opacity: 0.8;
  }

  /*　 画像と内容のカード　*/
  .item-inner {
    width: 300px;
    max-height: 385px;
    margin: 33px 25px 30px 12px;
    border: solid 0.1px lightgray;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  /*カードの記事画像*/
  .eyecatch {
    min-height: 220px;
    background-position: center;
    background-size: cover;
    border: solid 0.1px lightgray;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  .eyecatch.eye1 img { /*記事ページのアイキャッチと区別*/
    height: 220px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0px; /*記事ページのアイキャッチと連想しないよう指定*/
  }

  .eyecatch img {
    width: 300px;
    height: 220px;
    object-fit: cover;
  }

  .tag-tips {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .under-title {
    display: flex;
    justify-content: space-between;
  }

  .tip {
    display: flex;
    flex-wrap: wrap;
  }

  .tip a {
    width: auto;
    height: 18px;
    margin: 2px 2px 2px 3px;
    padding: 0 7px 0 7px;
    font-size: 11px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px #C0C0C0;
    border-radius: 3px;
    background-color: #C0C0C0;
  }

  .detail {
    height: 130px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0px 20px 0 20px;
    overflow: hidden;
    position: relative;
  }

  .category-tip {
    max-width: 105px;
    height: 20px;
    margin: 5px;
    padding: 0 8px 0 8px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid 0.1px pink;
    border-radius: 10px;
    position: relative;
    top: 0;
    left: 0;
  }

  .category-tip a {
    color: white;
  }

  .detail h3 {
    color: #3F3C7C;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 550;
    overflow: hidden;
    height: 47px;
  }

  .item-date {
    width: 192px;
    padding-top: 5px;
    font-size: 10px;
    text-align: right;
  }

  /*ページャー */
   .wp-pagenavi {
     text-align: center;
   }

   .wp-pagenavi span.current {
     font-weight: bold;
     border-radius: 5px;
     border-color: #3F3C7C;
     color: #3F3C7C;
     font-size: 15px;
 }

   .pages {
     border-radius: 3px;
   }

  /* サイドバー */
  .sidebar {
    width: 300px;
    margin-right: 5px;
    margin-left: 10px;
  }

  .plofile-wrapper,.side-twitter,.side-instaglam {
    border: solid 0.1px lightgray;
    border: 1px solid #ecf0f1;
    margin: 20px;
    text-align: center;
    height: 500px;
  }

  /*　プロフィール欄　*/
  .plofile-wrapper {
    width: 250px;
    height: 745px;
    margin-top: 0;
    margin-bottom: 55px;
    margin-left: 0;
    margin-right: 15px;
    padding: 0 25px;
  }

  .popular-entry {
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .side-twitter,.side-instaglam {
    height: 200px;
  }

  .profile-photo {
    border-radius: 50%;
    padding-left: 60px;
  }

  .my-face {
    width: 120px;
    height: 115px;
    border-radius: 7%;
    text-align: center;
    margin: 15px 70px 15px 0;
  }

  .myjob {
    font-size: 14px;
    margin-top: 15px;
    padding: 0 0;
    line-height: 1.8;
    text-align: left;
  }

  .my-profile a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .my-profile a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 12.5px;　/*文字少し小さく*/
  }

  /*アメブロへのリンクボタン*/
  .ameblo-rink a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .ameblo-rink a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 12.5px;　/*文字少し小さく*/
  }

  .profile-sns-menu {
    height: 90px;
    background-color: #e1A7CA;/* pink　*/
  }

  /* aside-SNSボタン */
  .profile-sns {
    color: #fff;
    font-size: 17px;
    height: 20px;
    position: relative;
    bottom: 13px;
  }

  .profile-sns-menu ul {
    display: flex;
    justify-content: center;
    padding: 0 0 8px 14px;
    margin: 0 0;
  }

  .profile-sns-menu a {
    display: block;
    color: #fff;
    margin-right: 15px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    font-size: 20px;
  }

  .profile-sns-menu a:hover {
    color: #3F3C7C;/*濃いブルー*/
  }

    /* 人気の記事　*/
  #popular-entries {
    width: 205px;
  }

  .popular-entry {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .popular-entry-content a:hover {
    color: #D8E072;　/*黄みどり*/
  }

  .popular-entry-title  { /*各記事タイトルのグレー下線など*/
    display: inline-block;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  /* カテゴリー　*/
  .category {
    width: 320px;
    height: 700px;
    margin-top: 20px;
    padding-top: 20px;
  }

  .category-list  {
    height: 300px;
    padding-left: 15px;
  }

  .list-first a {
    display: inline-block;
    margin-top: 10px;
    flex-direction: column;
  }

  .list-first {
    padding-left: 13px;
  }

  li .list-first ul {
    font-size: 15px;
  }

  .list-first ul {
    padding-left: 15px;
  }

  .first-child {
    padding-left: 30px;
  }

  .list-second {
    margin-top: 15px;
    padding-left: 20px;
  }

  .children li {
     margin-left: 0; /*カテゴリー用に変更 */
     list-style: none;
     margin-top: 15px;
   }

  .widget_title {
    margin-top: 55px;
    font-weight: 500;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .cat-item  {
    margin-top: 12px;
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.05); /*カテゴリーのグレー下線*/
  }

  .cat-item a {
    display: inline-block;
    margin: 6px 0;
  }

  /*アーカイブ　月ごと*/
    #archives-dropdown-2 {
      color: #4B4C4C;
      border-radius: 6px;
      border: 1px solid #ddd;
      width: 240px;
      height: 30px;
      font-size: 14px;
      margin-right: 0px;
      background-color: white;
    }

  /*カテゴリーのデザイン*/
  .children {
   padding-left: 0;
  }

  ul .children li {
   /* line-height: 1.5; */
   padding: 0.5em 0;
   list-style-type: none;
   margin-top: 2px;
   padding: 5px 0 0 0;
  }

  .sidebar ul {
    /* padding-left: 36px; */
    padding-left: 18px;
    font-size: 14px;
  }

  /*　カテゴリーのデザインここまで　*/


  .twitter-wrapper {
    padding-top: 35px;
    /* margin-left: 25px; */
  }

  .twitter-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .instagram-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  /*　検索　*/
 .s {
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 240px;
    height: 24px;
    font-size: 14px;
    margin-right: 0px;
  }

  #searchform {
    margin-left: 3px;
  }

  .screen-reader-text {
    display: none;
  }

  .searchsubmit {
    color: #555555;
    font-size: 13px;
    background: #D8E072;
    border-radius: 6px;
    border: 3px double #fff;
  }

  /*関連記事 プラグイン*/
  ul.related_post {
    text-align: center;
  }

  /*SNSシェアボタン　モバイル用 https://plusers.net/wordpress_sns_button*/
  .fa-hatena:before {
   font-family: Verdana;
   font-weight: bold;
   content: 'B!';
  }

  .share {
   margin-top: 10px;
   margin-bottom: 0px;
  }

  .share ul {
   margin: 0;
   padding: 0;
   list-style: none;
  }

  .share ul:after {
   display: block;
   clear: both;
   content: '';
  }

  .share li {
   float: left;
   width: 25%;
   margin: 0;
   margin-top: 15px;
  }

  .share li a {
   font-size: 14px;
   display: block;
   padding: 10px;
   text-align: center;
   text-decoration: none;
   color: #fff;
  }

  .share li a:hover {
   opacity: .8;
  }

  .share li a:visited {
   color: #fff;
  }

  .tweet a {
   background-color: #55acee;
  }

  .facebook a {
   background-color: #315096;
  }

  .line a {
   background-color: #06c755;
  }

  .hatena a {
   background-color: #008fde;
  }
  /*モバイル用　ロゴのみにする*/
  .share li {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 3px;
  }
  .share li i {
   font-size: 1.3em;
   padding-top: 3px;
  }
  .share li span {
   display: none;
  }

  /*　footer　*/
  footer {
    width: 320px;
    height: 145px;
    background-color: #D8E072;
    clear: both;
    position: relative;
    top: 21px;
  }

  footer p {
    font-size: 18px;
    padding-top: 75px;
    text-align: center;
    color: gray;
  }

  /*　以下、投稿ページ用　*/

  .eye1 img {　　/* ①　backgroundで画像を最適化 */
    width: 100%;　　/*高さと幅の指定は必須*/
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .eye1 img { /* 縦横比をあわせてサイズが変更されるように調整 */
      height: 12vw;
  }

  .eye1 img { /* ②　object-fitを使ってimgタグの画像を最適化 https://plusers.net/wordpress_img_responsive*/
    height: 210px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 25px;
  }

  .content {　/*投稿記事の枠*/
    float: none;
    width: 290px;
    padding: 0 15px 30px 15px;
    margin: 0 0 0 0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 0 0 rgba(0,0,0,.18);
  }

  .content .category-tip {
    margin-top: 0;
  }

  .content .title-nonstyle { /*投稿記事のタイトル用h２ */
    font-size: 20px;
    font-weight: 300;
    margin: 25px 0 25px 0;
    border-bottom: none;
    color: #4B4C4C;
  }

  .content .title-nonstyle:after{ /*.content h2:afterの打ち消し*/
    position: static;
    content: " ";
    display: inline;
    border-bottom: none;
    bottom: 0;
    width: 0;
  }

  /*日付関連*/

  .content_date_items {
    display: flex;
    justify-content: flex-end;
  }

  .content_date_items { /*記事カードの日付と区別*/
    padding-top: 0px;
    font-size: 12px;
    color: #777777; /*#555555の薄い色*/
  }

  　.update_post_day { /*リライト日*/
    font-size: 12px;
    color: #777777;
  }

  .content p {
    font-size: 16px;
    padding-bottom: 2rem;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    line-height: 1.8em;
        /* font-size: 1em; */
  }

  /* 記事内アンカータグの設定 */
  .content p a {
    color: #007BBB; /* 通常リンクのブルー*/
    /* color: #3F3C7C; 深いブルー　 */
    text-decoration-color: #007BBB;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .content p a:visited {
    color: #007BBB; /* 同色のまま　*/
  }

  .content p a:hover {
    color: #D8E072; /*きみどり*/
    font-weight: 500;
    text-decoration: underline;
  }

  .alignnone { /*　記事内の画像設定〜縦長と横長に対応　*/
    max-width: 100%;
    height: auto;
    /* min-height: 400px;
    width: auto; */
  }

  /*見出しのデザイン*/

  .content h2 {
    margin: 20px 0 30px 0;
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    /* color: #3F3C7C;　濃いブルー*/
    color: #4B4C4C; /*文字色 濃いグレー*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #3F3C7C;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
    font-size: 20px;
    font-weight: bold;
  }

  .content h3 {
    margin: 0 0 30px 13px;
    border-bottom: solid 3px #D8E072;/*黄緑*/
    position: relative;
    font-size: 18px;
    /* color: #3F3C7C;　文字色ブルー */
    color: #4B4C4C; /*文字色 濃いグレー*/
    font-weight: 700;
  }

  .content h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #E1A7CA;/*pink*/
    bottom: -3px;
    width: 30%;
  }

  .content h4 {
    position: relative;/*相対位置*/
    padding: 0.5em 0.5em 0.5em 2.0em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
    font-size: 17px;
    color: #3F3C7C;　/*文字色ブルー*/
    /* color: black;/*文字色*/
  }

  .content h4:before { font-family: "Font Awesome 5 Free";/*忘れずに*/
    content: "\f138";/*アイコンのユニコード*/
    position: absolute;/*絶対位置*/
    font-size: 1.4em;/*サイズ*/
    left: 0.1em;/*アイコンの位置*/
    top: 0.15em;/*アイコンの位置*/
    color: #E1A7CA; /*アイコン色*/
  }

  .content h5 {
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
    background: #e8edae; /*より薄い黄緑色に変更*/
    border-radius: 15px;
    font-size: 15px; /*fontをpより小さく*/
  }

  .content h5:before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
  }

  .content h5:after {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
  }

  /*記事内ボタン：さるわかくん　https://saruwakakun.com/html-css/reference/buttons　*/
  .btn1 a {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    color: #FFF;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 5px #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    border: dashed 1px #FFF;
    font-size: 1rem;　/*フォント*/
  }

  a.btn-stitch {
    width: 220px; /*ボタンの幅はここで指定*/
  }

  .btn1 {
    margin: 25px 0 60px 0;
    text-align: center;
  }

  .content p .btn-stitch:hover {
    opacity: 0.9;
    transition: .3s;
  }


  .btn-stitch:hover {
    opacity: 0.8;
    transition: .3s;
    border: dotted 1px #FFF;
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

    /****************************************
            関連記事（Relation）寝ログより
  *****************************************/
  #related-entries h3{
    font-size:24px;
    background-color: #f7f7f7;/*追加*/
    border-radius: 5px;
    margin: 75px 0 45px 0;/*追加*/
  }

  #related-entries .related-entry{
    line-height:150%;
    margin-bottom: 27px;
    clear: both;
    border-bottom: 1px solid #e7e7e7;/*追加*/
    height: 155px;/*修正*/
  }

  #related-entries .related-entry-thumb {
    float: left;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  #related-entries .related-entry-content {
    margin-left: 120px;
  }

  .related-entry-title{
      margin-bottom:5px;
  }

  .related-entry-snippet{
    margin:0 0 5px 0;
  }

  .related-entry-read{
    margin:0;
    font-size:12px;
  }

  p.related-entry-read {
    font-size: 13px;
    padding: 5px 0 0 10px;
  }

  p.related-entry-read a {
    border-bottom: solid 1px;/*「続きを読む→」の下線 追加*/
  }

  p.related-entry-snippet {/*追加*/
    display: none; /*　リード文を320pxのみ非表示に*/
    font-size: 13.5px;
    padding: 4px 0 3px 10px;
  }

  p.related-entry-snippet {/*追加*/
    display: none; /*リード文表示*/
    font-size: 13.5px;
    padding: 10px 0 3px 10px;
  }

  h4.related-entry-title {
    font-size: 15px;
    background: #eef2c6;
    border-radius: 10px;
    position: relative;
    padding: 3px 12px;
    margin-left: 0;
  }

  h4.related-entry-title a:hover {
    color: #8e8c8c;
    font-weight: 500;
  }

  .related-entries h3 {
    background-color: #f4f4f4;/*追加*/
  }

  h4.related-entry-title:before { /*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
    display: none;
  }

  h4.related-entry-title:after {　/*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
    display: none;
  }
  /*関連記事　ここまで*/

  /*次の記事ー前の記事*/
  .content.prev-next-link {
   display: block;
  }

  .prev-next-link {
   display: block;
   margin: 0 0 0 0
  }

  .prev-next-link a {
   flex: 1;
  }

  .thumb-wrap {
   display: flex;
  }

   /* Images */
  .thumb-wrap {
   display: flex;
  }

  .thumb-wrap p {
   margin: 0 0 0 16px;
   font-size: 14px;
  }

  .thumb-wrap img {
   width: 80px;
   height: 100%;
  }

  .second-wrap {
    flex-direction: row; /*反転打ち消す*/
  }

  .thumb-wrap.second-wrap p {
    margin: 0 0 0 16px;
    font-size: 14px;
  }

  .prev-next-link a {
  /* border-bottom: 1px #ddd solid; */
  display: block;
  text-decoration: none;
  padding: 20px 15px;
  }

  .prev-next-link a:hover {
   background-color: #f6f6f6;
  }

  .prev-next-link a:first-child {
   border-bottom: dashed 1px lightgray;
  }

  .prev-next-label {
   font-size: .825rem;
   color: #000;
   margin-bottom: 10px;
  }

  p.prev-next-label {
   color: #3F3C7C;
   font-weight: 600;
   font-size: 14px;
   padding-bottom: 15px;
  }

  .next-label {
    text-align: left;
  }
   /*ここまで、次の記事ー前の記事*/

   /*ページネーション*/
   .pagination li.first,
   .pagination li.last {
     /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
   }

   .pagination li.previous a {
     border-left-width: 1px;
   }
   /*ここまでページネーション*/

}


@media (min-width: 360px) {
  /*GalaxyS5に適用*/
  .wrapper {
    width: 360px;
    /* height: 17206px; */
  }
  /* ヘッダー */
  header {
    width: 360px;
    position: relative;
  }

  /* header a {
    color: #3f3c7c;
  } */

     /*1:タイトル部 */
   .logo-set {
    height: 140px;
    text-align: center;
    padding: 0;
    /* font-family: 'Courgette', cursive;  */
    font-family: 'Julius Sans One', sans-serif;/* https://frontendlifeinde.com/　と同じに　*/
    margin: 15px 0 60px 0;
   }

   /* .logo-set a:hover{
    color: #D8E072;
    transition: .4s;
   } */

   .logo-set h1 {
    font-size: 44px;
    font-weight: 700;
    margin: 0 95px;
    padding: 4px;
    color: #3f3c7c; /*題字ブルーにするとなぜかホバーで色変わらず*/
    border-bottom: 1px solid #3f3c7c;
    border-top: 1px solid #3f3c7c;
   }

   .logo-set h1:hover {
     color: #D8E072;
     transition: .5s;
     padding: 0.1em 0;
   }

   .logo-set p {
    margin-top: 15px;
    font-size: 15px;
    /* color: #3f3c7c; */
   }

   .logo-set p:hover {
     color: #D8E072;
     transition: .5s;
   }

  /*2: 右上　SNSボタン,検索マーク */
  .header-menu {
    display: none;
    /* position: absolute;
    top:0;
    right: 50px; */
  }

  .header-menu ul {
    font-size: 18px;
    display: flex;
    margin: 0;
    padding: 0;
  }

  .header-menu a {
    display: block;
    margin-right: 12px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
  }

  .header-menu a:hover {
    color: #D8E072; /*カーソル載せるとで黄みどりになる設定*/
  }

  /* nav */
  nav {　　
    width: 360px;
    height: 70px;
    color: #335cbb;
    background-color: #3F3C7C;
  }

  .menu-item a { /*ホバーしやすく大きくした*/
    width: 93px;
    height: 23px;
    color: white;
    display: inline-block;
  }

  .navi-in a:hover {
    opacity: 0.8;
    margin-top: 1.5px;
    border-top: 1.5px solid #3F3C7C; /*上に青ラインがつく→同色なので下に文字だけ移動して見える*/
    /* background-color: #5753AB;　背景を薄いブルーに */
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .navi-in ul {
    height: 50px;
    margin: 0 10px 0 -20px;
    padding-left: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .navi-in li {
    width: 70px;
    height: 0;
    margin: 12px 10px;
    text-align: center;
    font-size: 13px;
  }

  .menu-item {　
    width: 93px;
    height: 20px;
    margin: 15px 30px;
    text-align: center;
    font-size: 15.5px;
  }

  /* メイン */
  main {
    /* float: left; */
  }

  section {
    width: 360px;
  }

  .item a { /* display: block; タグチップ横並び*/
    color: white;
  }

  .item a:hover {
    opacity: 0.8;
  }

  /*　 画像と内容のカード　*/
  .item-inner {
    width: 340px;
    max-height: 385px;
    margin: 33px 25px 30px 10px;
    border: solid 0.1px lightgray;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  /*カードの記事画像*/
  .eyecatch {
    min-height: 220px;
    background-position: center;
    background-size: cover;
    border: solid 0.1px lightgray;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  .eyecatch.eye1 img { /*記事ページのアイキャッチと区別*/
    height: 220px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0px; /*記事ページのアイキャッチと連想しないよう指定*/
  }

  .eyecatch img {
    width: 340px;
    height: 220px;
    object-fit: cover;
  }

  .tag-tips {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .under-title {
    display: flex;
    justify-content: space-between;
  }

  .tip {
    display: flex;
    flex-wrap: wrap;
 }

  .tip a {
    width: auto;
    height: 17px;
    margin: 2px 2px 2px 3px;
    padding: 0 7px 0 7px;
    font-size: 11px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px #C0C0C0;
    border-radius: 3px;
    background-color: #C0C0C0;
  }

  .detail {
    height: 125px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0px 20px 0 20px;
    overflow: hidden;
    position: relative;
  }

  .category-tip {
    max-width: 100px;
    height: 18px;
    margin: 5px;
    padding: 0 8px 0 8px;
    font-size: 13px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid 0.1px pink;
    border-radius: 10px;
    position: relative;
    top: 0;
    left: 0;
  }

  .category-tip a {
    color: white;
  }

  .detail h3 {
    color: #3F3C7C;
    margin-top: 8px;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 550;
    overflow: hidden;
    height: 47px;
  }

  .item-date {
    width: 181px;
    padding-top: 5px;
    font-size: 11px;
    text-align: right;
  }

  /*ページャー */
   .wp-pagenavi {
     text-align: center;
   }

   .wp-pagenavi span.current {
     font-weight: bold;
     border-radius: 5px;
     border-color: #3F3C7C;
     color: #3F3C7C;
     font-size: 15px;
 }

   .pages {
     border-radius: 3px;
   }

  /* サイドバー */
  .sidebar {
    width: 330px;
    margin-right: 5px;
    margin-left: 20px;
  }

  .plofile-wrapper,.side-twitter,.side-instaglam {
    border: solid 0.1px lightgray;
    border: 1px solid #ecf0f1;
    margin: 20px;
    text-align: center;
    height: 500px;
  }

  /*　プロフィール欄　*/
  .plofile-wrapper {
    width: 270px;
    height: 745px;
    margin-top: 0;
    margin-bottom: 55px;
    margin-left: 0;
    margin-right: 15px;
    padding: 0 25px;
  }

  .popular-entry {
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .side-twitter,.side-instaglam {
    height: 200px;
  }

  .profile-photo {
    border-radius: 50%;
    padding-left: 60px;
  }

  .my-face {
    width: 120px;
    height: 115px;
    border-radius: 7%;
    text-align: center;
    margin: 15px 70px 15px 0;
  }

  .myjob {
    font-size: 14px;
    margin-top: 15px;
    padding: 0 0;
    line-height: 1.8;
    text-align: left;
  }

  .my-profile a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .my-profile a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 14.5px;　/*文字少し小さく*/
  }

  /*アメブロへのリンクボタン*/
  .ameblo-rink a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .ameblo-rink a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 14.5px;　/*文字少し小さく*/
  }

  .profile-sns-menu {
    height: 90px;
    background-color: #e1A7CA;/* pink　*/
  }

  /* aside-SNSボタン */
  .profile-sns {
    color: #fff;
    font-size: 17px;
    height: 20px;
    position: relative;
    bottom: 13px;
  }

  .profile-sns-menu ul {
    display: flex;
    justify-content: center;
    padding: 0 0 8px 14px;
    margin: 0 0;
  }

  .profile-sns-menu a {
    display: block;
    color: #fff;
    margin-right: 15px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    font-size: 21px;
  }

  .profile-sns-menu a:hover {
  　color: #3F3C7C;/*濃いブルー*/
  }

    /* 人気の記事　*/
  #popular-entries {
    width: 205px;
  }

  .popular-entry {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .popular-entry-content a:hover {
    color: #D8E072;　/*黄みどり*/
  }

  .popular-entry-title  { /*各記事タイトルのグレー下線など*/
    display: inline-block;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  /* カテゴリー　*/
  .category {
    width: 320px;
    height: 700px;
    margin-top: 20px;
    padding-top: 20px;
  }

  .category-list  {
    height: 300px;
    padding-left: 15px;
  }

  .list-first a {
    display: inline-block;
    margin-top: 10px;
    flex-direction: column;
  }

  .list-first {
    padding-left: 13px;
  }

  li .list-first ul {
    font-size: 15px;
  }

  .list-first ul {
    padding-left: 15px;
  }

  .first-child {
    padding-left: 30px;
  }

  .list-second {
    margin-top: 15px;
    padding-left: 20px;
  }

  .children li {
     margin-left: 0; /*カテゴリー用に変更 */
     list-style: none;
     margin-top: 15px;
   }

  .widget_title {
    margin-top: 55px;
    font-weight: 500;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .cat-item  {
    margin-top: 12px;
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.05); /*カテゴリーのグレー下線*/
  }

  .cat-item a {
    display: inline-block;
    margin: 6px 0;
  }

  /*アーカイブ　月ごと*/
    #archives-dropdown-2 {
      color: #4B4C4C;
      border-radius: 6px;
      border: 1px solid #ddd;
      width: 240px;
      height:30px;
      font-size: 14px;
      margin-right: 0px;
      background-color: white;
    }

  /*カテゴリーのデザイン*/
  .children {
   padding-left: 0;
  }

  ul .children li {
   /* line-height: 1.5; */
   padding: 0.5em 0;
   list-style-type: none;
   margin-top: 2px;
   padding: 5px 0 0 0;
  }

  .sidebar ul {
    /* padding-left: 37px; */
    padding-left: 20px;
    font-size: 14px;
  }

  /*　カテゴリーのデザインここまで　*/

  .twitter-wrapper {
    padding-top: 35px;
    /* margin-left: 25px; */
  }

  .twitter-wrapper h2 {
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .instagram-wrapper h2 {
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  /*　検索　*/
 .s {
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 255px;
    height: 25px;
    font-size: 14px;
    margin-right: 0px;
  }

  #searchform {
    margin-left: 5px;
  }

  .screen-reader-text {
    display: none;
  }

  .searchsubmit {
    color: #555555;
    font-size: 13px;
    background: #D8E072;
    border-radius: 6px;
    border: 3px double #fff;
  }

  /*関連記事 プラグイン*/
  ul.related_post {
    text-align: center;
  }

  /*SNSシェアボタン　モバイル用*/
  .fa-hatena:before {
   font-family: Verdana;
   font-weight: bold;
   content: 'B!';
  }

  .share {
   margin-top: 10px;
   margin-bottom: 0px;
  }

  .share ul {
   margin: 0;
   padding: 0;
   list-style: none;
  }

  .share ul:after {
   display: block;
   clear: both;
   content: '';
  }

  .share li {
   float: left;
   width: 25%;
   margin: 0;
   margin-top: 15px;
  }

  .share li a {
   font-size: 14px;
   display: block;
   padding: 10px;
   text-align: center;
   text-decoration: none;
   color: #fff;
  }

  .share li a:hover {
   opacity: .8;
  }

  .share li a:visited {
   color: #fff;
  }

  .tweet a {
   background-color: #55acee;
  }

  .facebook a {
   background-color: #315096;
  }

  .line a {
   background-color: #06c755;
  }

  .hatena a {
   background-color: #008fde;
  }
  /*モバイル用　ロゴのみにする*/
  .share li {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 3px;
  }
  .share li i {
   font-size: 1.3em;
   padding-top: 3px;
  }
  .share li span {
   display: none;
  }

  /*　footer　*/
  footer {
    width: 360px;
    height: 145px;
    background-color: #D8E072;
    clear: both;
    position: relative;
    top: 21px;
  }

  footer p {
    font-size: 18px;
    padding-top: 75px;
    text-align: center;
    color: gray;
  }

  /*　以下、投稿ページ用　*/

  .eye1 img {　　/* ①　backgroundで画像を最適化 */
    width: 100%;　　/*高さと幅の指定は必須*/
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .eye1 img { /* 縦横比をあわせてサイズが変更されるように調整 */
      height: 12vw;
  }

  .eye1 img { /* ②　object-fitを使ってimgタグの画像を最適化 https://plusers.net/wordpress_img_responsive*/
    height: 210px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 25px;
  }

  .content {　/*投稿記事の枠*/
    float: none;
    width: 330px;
    padding: 0 15px 30px 15px;
    margin: 0 0 0 0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 0 0 rgba(0,0,0,.18);
  }

  .content .category-tip {
    margin-top: 0;
  }

  .content .title-nonstyle { /*投稿記事のタイトル用h２ */
    font-size: 21px;
    font-weight: 300;
    margin: 25px 0 25px 0;
    border-bottom: none;
    color: #4B4C4C;
  }

  .content .title-nonstyle:after{ /*.content h2:afterの打ち消し*/
    position: static;
    content: " ";
    display: inline;
    border-bottom: none;
    bottom: 0;
    width: 0;
  }

  /*日付関連*/

  .content_date_items {
    display: flex;
    justify-content: flex-end;
  }

  .content_date_items { /*記事カードの日付と区別*/
    padding-top: 0px;
    font-size: 12px;
    color: #777777; /*#555555の薄い色*/
  }

  　.update_post_day { /*リライト日*/
    font-size: 12px;
    color: #777777;
  }

  .content p {
    font-size: 16px;
    padding-bottom: 2rem;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    line-height: 1.8em;
        /* font-size: 1em; */
  }

  /* 記事内アンカータグの設定 */
  .content p a {
    color: #007BBB; /* 通常リンクのブルー*/
    /* color: #3F3C7C; 深いブルー　 */
    text-decoration-color: #007BBB;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .content p a:visited {
    color: #007BBB; /* 同色のまま　*/
  }

  .content p a:hover {
    color: #D8E072; /*きみどり*/
    font-weight: 500;
    text-decoration: underline;
  }

  .alignnone { /*　記事内の画像設定〜縦長と横長に対応　*/
    max-width: 100%;
    height: auto;
    /* min-height: 400px;
    width: auto; */
  }

  /*見出しのデザイン*/
  .content h2 {
    margin: 20px 0 30px 0;
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    /* color: #3F3C7C;　濃いブルー*/
    color: #4B4C4C; /*文字色 濃いグレー*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #3F3C7C;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
    font-size: 20px;
    font-weight: bold;
  }

  .content h3 {
    margin: 0 0 30px 13px;
    border-bottom: solid 3px #D8E072;/*黄緑*/
    position: relative;
    font-size: 18px;
    /* color: #3F3C7C;　文字色ブルー */
    color: #4B4C4C; /*文字色 濃いグレー*/
    font-weight: 700;
  }

  .content h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #E1A7CA;/*pink*/
    bottom: -3px;
    width: 30%;
  }

  .content h4 {
    position: relative;/*相対位置*/
    padding: 0.5em 0.5em 0.5em 2.0em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
    font-size: 17px;
    color: #3F3C7C;　/*文字色ブルー*/
    /* color: black;/*文字色*/
  }

  .content h4:before { font-family: "Font Awesome 5 Free";/*忘れずに*/
    content: "\f138";/*アイコンのユニコード*/
    position: absolute;/*絶対位置*/
    font-size: 1.4em;/*サイズ*/
    left: 0.1em;/*アイコンの位置*/
    top: 0.15em;/*アイコンの位置*/
    color: #E1A7CA; /*アイコン色*/
  }

  .content h5 {
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
    background: #e8edae; /*より薄い黄緑色に変更*/
    border-radius: 15px;
    font-size: 15px; /*fontをpより小さく*/
  }

  .content h5:before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
  }

  .content h5:after {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
  }

  /*記事内ボタン：さるわかくん　https://saruwakakun.com/html-css/reference/buttons　*/
  .btn1 a {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    color: #FFF;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 5px #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    border: dashed 1px #FFF;
    font-size: 1rem;　/*フォント*/
  }

  a.btn-stitch {
    width: 230px; /*ボタンの幅はここで指定*/
  }

  .btn1 {
    margin: 30px 0 60px 0;
    text-align: center;
  }

  .content p .btn-stitch:hover {
    opacity: 0.9;
    transition: .3s;
  }


  .btn-stitch:hover {
    opacity: 0.8;
    transition: .3s;
    border: dotted 1px #FFF;
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

    /****************************************
            関連記事（Relation）寝ログより
  *****************************************/
  #related-entries h3{
    font-size:24px;
    background-color: #f7f7f7;/*追加*/
    border-radius: 5px;
    margin: 75px 0 45px 0;/*追加*/
  }

  #related-entries .related-entry{
    line-height:150%;
    margin-bottom: 27px;
    clear: both;
    border-bottom: 1px solid #e7e7e7;/*追加*/
    height: 255px;/*修正*/
  }

  #related-entries .related-entry-thumb {
    float: left;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  #related-entries .related-entry-content {
    margin-left: 120px;
  }

  .related-entry-title{
      margin-bottom:5px;
  }

  .related-entry-snippet{
    margin:0 0 5px 0;
  }

  .related-entry-read{
    margin:0;
    font-size:12px;
  }

  p.related-entry-read {
    font-size: 13px;
    padding: 3px 0 0 10px;
  }

  p.related-entry-read a {
    border-bottom: solid 1px;/*「続きを読む→」の下線 追加*/
  }

  p.related-entry-snippet {/*追加*/
    display: inherit; /*リード文表示*/
    font-size: 13.5px;
    padding: 10px 0 3px 10px;
  }

  h4.related-entry-title {
    font-size: 15px;
    background: #eef2c6;
    border-radius: 10px;
    position: relative;
    padding: 3px 10px;
    margin-left: 0;
  }

  h4.related-entry-title a:hover {
    color: #8e8c8c;
    font-weight: 500;
  }

  .related-entries h3 {
    background-color: #f4f4f4;/*追加*/
  }

  h4.related-entry-title:before { /*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
    display: none;
  }

  h4.related-entry-title:after {　/*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
    display: none;
  }
  /*関連記事　ここまで*/

  /*次の記事ー前の記事*/
  .content.prev-next-link {
   display: block;
  }

  .prev-next-link {
   display: block;
   margin: 0 0 0 0
  }

  .prev-next-link a {
   flex: 1;
  }

  .thumb-wrap {
   display: flex;
  }

   /* Images */
  .thumb-wrap {
   display: flex;
  }

  .thumb-wrap p {
   margin: 0 0 0 16px;
   font-size: 14px;
  }

  .thumb-wrap img {
   width: 80px;
   height: 100%;
  }

  .second-wrap {
    flex-direction: row; /*反転打ち消す*/
  }

  .thumb-wrap.second-wrap p {
    margin: 0 0 0 16px;
    font-size: 14px;
  }

  .prev-next-link a {
  /* border-bottom: 1px #ddd solid; */
  display: block;
  text-decoration: none;
  padding: 20px 15px;
  }

  .prev-next-link a:hover {
   background-color: #f6f6f6;
  }

  .prev-next-link a:first-child {
   border-bottom: dashed 1px lightgray;
  }

  .prev-next-label {
   font-size: .825rem;
   color: #000;
   margin-bottom: 10px;
  }

  p.prev-next-label {
   color: #3F3C7C;
   font-weight: 600;
   font-size: 14px;
   padding-bottom: 15px;
  }

  .next-label {
    text-align: left;
  }
   /*ここまで、次の記事ー前の記事*/

   /*ページネーション*/
   .pagination li.first,
   .pagination li.last {
     /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
   }

   .pagination li.previous a {
     border-left-width: 1px;
   }
   /*ここまでページネーション*/

}


@media (min-width: 375px) {
/*iphoneⅹ、iphone8、iphone7*/
  .wrapper {
    width: 375px;
  }
  /* ヘッダー */
  header {
    width: 375px;
    position: relative;
  }

  /* header a {
    color: #3f3c7c;
  } */

  /*1:タイトル部 */
   .logo-set {
    height: 140px;
    text-align: center;
    padding: 0;
    /* font-family: 'Courgette', cursive;  */
    font-family: 'Julius Sans One', sans-serif;/* https://frontendlifeinde.com/　と同じに　*/
    margin: 15px 0 60px 0;
   }

   /* .logo-set a:hover{
    color: #D8E072;
    transition: .4s;
   } */

   .logo-set h1 {
    font-size: 45px;
    font-weight: 700;
    margin: 0 95px;
    padding: 4px;
    color: #3f3c7c; /*題字ブルーにするとなぜかホバーで色変わらず*/
    border-bottom: 1px solid #3f3c7c;
    border-top: 1px solid #3f3c7c;
   }

   .logo-set h1:hover {
     color: #D8E072;
     transition: .5s;
     padding: 0.1em 0;
   }

   .logo-set p {
    margin-top: 15px;
    font-size: 15px;
    /* color: #3f3c7c; */
   }

   .logo-set p:hover {
     color: #D8E072;
     transition: .5s;
   }

  /*2: 右上　SNSボタン,検索マーク */
  .header-menu {
    display: none;
    /* position: absolute;
    top:0;
    right: 50px; */
  }

  .header-menu ul {
    font-size: 18px;
    display: flex;
    margin: 0;
    padding: 0;
  }

  .header-menu a {
    display: block;
    margin-right: 12px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
  }

  .header-menu a:hover {
    color: #D8E072; /*カーソル載せるとで黄みどりになる設定*/
  }

  /* nav */
  nav {　　
    width: 375px;
    height: 70px;
    color: #335cbb;
    background-color: #3F3C7C;
  }

  .menu-item a { /*ホバーしやすく大きくした*/
    width: 93px;
    height: 23px;
    color: white;
    display: inline-block;
  }

  .navi-in a:hover {
    opacity: 0.8;
    margin-top: 1.5px;
    border-top: 1.5px solid #3F3C7C; /*上に青ラインがつく→同色なので下に文字だけ移動して見える*/
    /* background-color: #5753AB;　背景を薄いブルーに */
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .navi-in ul {
    height: 50px;
    margin: 0 15px 0 0;
    padding-left: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .navi-in li {
    width: 70px;
    height: 0;
    margin: 12px 10px;
    text-align: center;
    font-size: 13px;
  }

  .menu-item {　
    width: 93px;
    height: 20px;
    margin: 15px 30px;
    text-align: center;
    font-size: 15.5px;
  }

  /* メイン */
  main {
    /* float: left; */
  }

  section {
    width: 375px;
  }

  .item a {
    /* display: block; タグチップ横並び*/
    color: white;
  }

  .item a:hover {
    opacity: 0.8;
  }

  /*　 画像と内容のカード　*/
  .item-inner {
    width: 350px;
    max-height: 385px;
    margin: 33px 25px 30px 13px;
    border: solid 0.1px lightgray;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  /*カードの記事画像*/
  .eyecatch {
    min-height: 220px;
    background-position: center;
    background-size: cover;
    border: solid 0.1px lightgray;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  .eyecatch.eye1 img { /*記事ページのアイキャッチと区別*/
    height: 220px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0px; /*記事ページのアイキャッチと連想しないよう指定*/
  }

  .eyecatch img {
    width: 350px;
    height: 220px;
    object-fit: cover;
  }

  .tag-tips {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .under-title {
    display: flex;
    justify-content: space-between;
  }

  .tip {
    display: flex;
    flex-wrap: wrap;
 }

  .tip a {
    width: auto;
    height: 18px;
    margin: 2px 2px 2px 3px;
    padding: 0 7px 0 7px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px #C0C0C0;
    border-radius: 3px;
    background-color: #C0C0C0;
  }

  .detail {
    height: 130px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0px 20px 0 20px;
    overflow: hidden;
    position: relative;
  }

  .category-tip {
    max-width: 105px;
    height: 20px;
    margin: 5px;
    padding: 0 8px 0 8px;
    font-size: 13px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid 0.1px pink;
    border-radius: 10px;
    position: relative;
    top: 0;
    left: 0;
  }

  .category-tip a {
    color: white;
  }

  .detail h3 {
    color: #3F3C7C;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 550;
    overflow: hidden;
    height: 47px;
  }

  .item-date {
    width: 184px;
    padding-top: 5px;
    font-size: 11px;
    text-align: right;
  }

  /*ページャー */
   .wp-pagenavi {
     text-align: center;
   }

   .wp-pagenavi span.current {
     font-weight: bold;
     border-radius: 5px;
     border-color: #3F3C7C;
     color: #3F3C7C;
     font-size: 15px;
 }

   .pages {
     border-radius: 3px;
   }

  /* サイドバー */
  .sidebar {
    /* width: 350px; */
    width: 335px;
    margin-right: 0;
    margin-left: 17px;
  }

  .plofile-wrapper,.side-twitter,.side-instaglam {
    border: solid 0.1px lightgray;
    border: 1px solid #ecf0f1;
    margin: 20px;
    text-align: center;
    height: 500px;
  }

  /*　プロフィール欄　*/
  .plofile-wrapper {
    width: 275px;
    height: 725px;
    margin-top: 0;
    margin-bottom: 55px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0 25px;
  }

  .popular-entry {
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .side-twitter,.side-instaglam {
    height: 200px;
  }

  .profile-photo {
    border-radius: 50%;
    padding-left: 66px;
  }

  .my-face {
    width: 120px;
    height: 120px;
    border-radius: 7%;
    text-align: center;
    margin: 15px 70px 15px 0;
  }

  .myjob {
    font-size: 14px;
    margin-top: 15px;
    padding: 0 0;
    line-height: 1.8;
    text-align: left;
  }

  .my-profile a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .my-profile a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 14.5px;　/*文字少し小さく*/
  }

  /*アメブロへのリンクボタン*/
  .ameblo-rink a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .ameblo-rink a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 14.5px;　/*文字少し小さく*/
  }

  .profile-sns-menu {
    height: 90px;
    background-color: #e1A7CA;/* pink　*/
  }

  /* aside-SNSボタン */
  .profile-sns {
    color: #fff;
    font-size: 17px;
    height: 20px;
    position: relative;
    bottom: 13px;
  }

  .profile-sns-menu ul {
    display: flex;
    justify-content: center;
    padding: 0 0 8px 14px;
    margin: 0 0;
  }

  .profile-sns-menu a {
    display: block;
    color: #fff;
    margin-right: 15px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    font-size: 21px;
  }

  .profile-sns-menu a:hover {
  　color: #3F3C7C;/*濃いブルー*/
  }

    /* 人気の記事　*/
  #popular-entries {
    width: 205px;
  }

  .popular-entry {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .popular-entry-content a:hover {
    color: #D8E072;　/*黄みどり*/
  }

  .popular-entry-title  { /*各記事タイトルのグレー下線など*/
    display: inline-block;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  /* カテゴリー　*/
  .category {
    width: 320px;
    height: 700px;
    margin-top: 20px;
    padding-top: 20px;
  }

  .category-list  {
    height: 300px;
    padding-left: 15px;
  }

  .list-first a {
    display: inline-block;
    margin-top: 10px;
    flex-direction: column;
  }

  .list-first {
    padding-left: 13px;
  }

  li .list-first ul {
    font-size: 15px;
  }

  .list-first ul {
    padding-left: 15px;
  }

  .first-child {
    padding-left: 30px;
  }

  .list-second {
    margin-top: 15px;
    padding-left: 20px;
  }

  .children li {
     margin-left: 0; /*カテゴリー用に変更 */
     list-style: none;
     margin-top: 15px;
   }

  .widget_title {
    margin-top: 55px;
    font-weight: 500;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .cat-item  {
    margin-top: 12px;
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.05); /*カテゴリーのグレー下線*/
  }

  .cat-item a {
    display: inline-block;
    margin: 6px 0;
  }

  /*アーカイブ　月ごと*/
    #archives-dropdown-2 {
      color: #4B4C4C;
      border-radius: 6px;
      border: 1px solid #ddd;
      width: 240px;
      height: 30px;
      font-size: 14px;
      margin-right: 0px;
      background-color: white;
    }

  /*カテゴリーのデザイン*/
  .children {
   padding-left: 0;
  }

  ul .children li {
   /* line-height: 1.5; */
   padding: 0.5em 0;
   list-style-type: none;
   margin-top: 2px;
   padding: 5px 0 0 0;
  }

  .sidebar ul {
    /* padding-left: 37px; */
    padding-left: 25px;
    font-size: 14px;
  }

  /*　カテゴリーのデザインここまで　*/

  .twitter-wrapper {
    padding-top: 35px;
    /* margin-left: 25px; */
  }

  .twitter-wrapper h2 {
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .instagram-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  /*　検索　*/
 .s {
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 260px;
    height: 25px;
    font-size: 14px;
    margin-right: 0px;
  }

  #searchform {
    margin-left: 20px;
  }

  .screen-reader-text {
    display: none;
  }

  .searchsubmit {
    color: #555555;
    font-size: 13px;
    background: #D8E072;
    border-radius: 6px;
    border: 3px double #fff;
  }

  /*関連記事 プラグイン*/
  ul.related_post {
    text-align: center;
  }

  /*SNSシェアボタン*/
  .fa-hatena:before {
   font-family: Verdana;
   font-weight: bold;
   content: 'B!';
  }

  .share {
   margin-top: 10px;
   margin-bottom: 0px;
  }

  .share ul {
   margin: 0;
   padding: 0;
   list-style: none;
  }

  .share ul:after {
   display: block;
   clear: both;
   content: '';
  }

  .share li {
   float: left;
   width: 25%;
   margin: 0;
   margin-top: 15px;
  }

  .share li a {
   font-size: 14px;
   display: block;
   padding: 10px;
   text-align: center;
   text-decoration: none;
   color: #fff;
  }

  .share li a:hover {
   opacity: .8;
  }

  .share li a:visited {
   color: #fff;
  }

  .tweet a {
   background-color: #55acee;
  }

  .facebook a {
   background-color: #315096;
  }

  .line a {
   background-color: #06c755;
  }

  .hatena a {
   background-color: #008fde;
  }
  /*モバイル用　ロゴのみにする*/
  .share li {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 3px;
  }
  .share li i {
   font-size: 1.3em;
   padding-top: 3px;
  }
  .share li span {
   display: none;
}

  /*　footer　*/
  footer {
    width: 375px;
    height: 145px;
    background-color: #D8E072;
    clear: both;
    position: relative;
    top: 21px;
  }

  footer p {
    font-size: 18px;
    padding-top: 75px;
    text-align: center;
    color: gray;
  }

  /*　以下、投稿ページ用　*/

  .eye1 img {　　/* ①　backgroundで画像を最適化 */
    width: 100%;　　/*高さと幅の指定は必須*/
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .eye1 img { /* 縦横比をあわせてサイズが変更されるように調整 */
      height: 12vw;
  }

  .eye1 img { /* ②　object-fitを使ってimgタグの画像を最適化 https://plusers.net/wordpress_img_responsive*/
    height: 210px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 25px;
  }

  .content {　/*投稿記事の枠*/
    float: none;
    width: 345px;
    padding: 0 15px 30px 15px;
    margin: 0 0 0 0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 0 0 rgba(0,0,0,.18);
  }

  .content .category-tip {
    margin-top: 0;
  }

  /* .content h2 {
    font-size: 24px;
    font-weight: 300;
  } */

  .content .item-date {
    margin-left: 160px;
    margin-bottom: 5px;
  }

  .content p {
    font-size: 16px;
    padding-bottom: 2rem;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    line-height: 1.8em;
        /* font-size: 1em; */
  }

  /* 記事内アンカータグの設定 */
  .content p a {
    color: #007BBB; /* 通常リンクのブルー*/
    /* color: #3F3C7C; 深いブルー　 */
    text-decoration-color: #007BBB;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .content p a:visited {
    color: #007BBB; /* 同色のまま　*/
  }

  .content p a:hover {
    color: #D8E072; /*きみどり*/
    font-weight: 500;
    text-decoration: underline;
  }

  .alignnone { /*　記事内の画像設定〜縦長と横長に対応　*/
    max-width: 100%;
    height: auto;
    /* min-height: 400px;
    width: auto; */
  }

  .content .title-nonstyle { /*投稿記事のタイトル用h２ */
    font-size: 24px;
    font-weight: 300;
    margin: 25px 0 25px 0;
    border-bottom: none;
    color: #4B4C4C;
  }

  .content .title-nonstyle:after{ /*.content h2:afterの打ち消し*/
    position: static;
    content: " ";
    display: inline;
    border-bottom: none;
    bottom: 0;
    width: 0;
  }

  /*日付関連*/

  .content_date_items {
    display: flex;
    justify-content: flex-end;
  }

  .content_date_items { /*記事カードの日付と区別*/
    padding-top: 0px;
    font-size: 12px;
    color: #777777; /*#555555の薄い色*/
  }

  　.update_post_day { /*リライト日*/
    font-size: 12px;
    color: #777777;
  }

  .content p {
    font-size: 16px;
    padding-bottom: 2rem;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    line-height: 1.8em;
        /* font-size: 1em; */
  }

  .alignnone { /*　記事内の画像設定〜縦長と横長に対応　*/
    max-width: 100%;
    height: auto;
    /* min-height: 400px;
    width: auto; */
  }

  /*見出しのデザイン*/

  .content h2 {
    margin: 20px 0 30px 0;
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    /* color: #3F3C7C;　濃いブルー*/
    color: #4B4C4C; /*文字色 濃いグレー*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #3F3C7C;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
    font-size: 21px;
    font-weight: bold;
  }

  .content h3 {
    margin: 0 0 30px 13px;
    border-bottom: solid 3px #D8E072;/*黄緑*/
    position: relative;
    font-size: 19px;
    /* color: #3F3C7C;　文字色ブルー */
    color: #4B4C4C; /*文字色 濃いグレー*/
    font-weight: 700;
  }

  .content h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #E1A7CA;/*pink*/
    bottom: -3px;
    width: 30%;
  }

  .content h4 {
    position: relative;/*相対位置*/
    padding: 0.5em 0.5em 0.5em 2.0em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
    font-size: 18px;
    color: #3F3C7C;　/*文字色ブルー*/
    /* color: black;/*文字色*/
  }

  .content h4:before { font-family: "Font Awesome 5 Free";/*忘れずに*/
    content: "\f138";/*アイコンのユニコード*/
    position: absolute;/*絶対位置*/
    font-size: 1.4em;/*サイズ*/
    left: 0.1em;/*アイコンの位置*/
    top: 0.15em;/*アイコンの位置*/
    color: #E1A7CA; /*アイコン色*/
  }

  .content h5 {
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
    background: #e8edae; /*より薄い黄緑色に変更*/
    border-radius: 15px;
    font-size: 16px; /*fontをpと同じに*/
  }

  .content h5:before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
  }

  .content h5:after {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
  }

  /*記事内ボタン：さるわかくん　https://saruwakakun.com/html-css/reference/buttons　*/
  .btn1 a {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    color: #FFF;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 5px #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    border: dashed 1px #FFF;
    font-size: 1rem;　/*フォント*/
  }

  a.btn-stitch {
    width: 240px; /*ボタンの幅はここで指定*/
  }

  .btn1 {
    margin: 30px 0 60px 0;
    text-align: center;
  }

  .content p .btn-stitch:hover {
    opacity: 0.9;
    transition: .3s;
  }


  .btn-stitch:hover {
    opacity: 0.8;
    transition: .3s;
    border: dotted 1px #FFF;
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  /****************************************
          関連記事（Relation）寝ログより
  *****************************************/
  #related-entries h3{
    font-size:24px;
    background-color: #f7f7f7;/*追加*/
    border-radius: 5px;
    margin: 75px 0 45px 0;/*追加*/
  }

  #related-entries .related-entry{
    line-height:150%;
    margin-bottom: 27px;
    clear: both;
    border-bottom: 1px solid #e7e7e7;/*追加*/
    height: 230px;/*修正*/
  }

  #related-entries .related-entry-thumb {
    float: left;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  #related-entries .related-entry-content {
    margin-left: 120px;
  }

  .related-entry-title{
    margin-bottom:5px;
  }

  .related-entry-snippet{
    margin:0 0 5px 0;
  }

  .related-entry-read{
    margin:0;
    font-size:12px;
  }

  p.related-entry-read {
    font-size: 13px;
    padding: 0 0 0 10px;
  }

  p.related-entry-read a {
    border-bottom: solid 1px;/*「続きを読む→」の下線 追加*/
  }

  p.related-entry-snippet {/*追加*/
    display: inherit; /*360pxの影響でpが消えないよう追加*/
    font-size: 13.5px;
    padding: 3px 0 3px 10px;
  }

  h4.related-entry-title {
    font-size: 15px;
    background: #eef2c6;
    border-radius: 10px;
    position: relative;
    padding: 3px 15px;
    margin-left: 0;
  }

  h4.related-entry-title a:hover {
    color: #8e8c8c;
    font-weight: 500;
  }

  .related-entries h3 {
    background-color: #f4f4f4;/*追加*/
  }

  h4.related-entry-title:before { /*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
    display: none;
  }

  h4.related-entry-title:after {　/*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
    display: none;
  }
  /*関連記事　ここまで*/


  /*次の記事ー前の記事*/
  .content.prev-next-link {
   display: block;
  }

  .prev-next-link {
   display: block;
   margin: 0 0 0 0
  }

  .prev-next-link a {
   flex: 1;
  }

  .thumb-wrap {
   display: flex;
  }

   /* Images */
  .thumb-wrap {
   display: flex;
  }

  .thumb-wrap p {
   margin: 0 0 0 16px;
   font-size: 14px;
  }

  .thumb-wrap img {
   width: 80px;
   height: 100%;
  }

  .second-wrap {
    flex-direction: row; /*反転打ち消す*/
  }

  .thumb-wrap.second-wrap p {
    margin: 0 0 0 16px;
    font-size: 14px;
  }

  .prev-next-link a {
  /* border-bottom: 1px #ddd solid; */
  display: block;
  text-decoration: none;
  padding: 20px 15px;
  }

  .prev-next-link a:hover {
   background-color: #f6f6f6;
  }

  .prev-next-link a:first-child {
   border-bottom: dashed 1px lightgray;
  }

  .prev-next-label {
   font-size: .825rem;
   color: #000;
   margin-bottom: 10px;
  }

  p.prev-next-label {
   color: #3F3C7C;
   font-weight: 600;
   font-size: 14px;
   padding-bottom: 15px;
  }

  .next-label {
    text-align: left;
  }
   /*ここまで、次の記事ー前の記事*/

   /*ページネーション*/
  .pagination li.first,
  .pagination li.last {
     /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
   }

   .pagination li.previous a {
     border-left-width: 1px;
   }
   /*ここまでページネーション*/

}


@media (min-width: 411px) {
/*Pixel2/2XL に対応*/
  .wrapper {
    width: 411px;
  }
  /* ヘッダー */
  header {
    width: 411px;
    position: relative;
  }

  /* header a {
    color: #3f3c7c;
  } */

   /*1:タイトル部 */
   .logo-set {
    height: 140px;
    text-align: center;
    padding: 0;
    /* font-family: 'Courgette', cursive;  */
    font-family: 'Julius Sans One', sans-serif;/* https://frontendlifeinde.com/　と同じに　 */
    margin: 15px 0 65px 0;
   }

   /* .logo-set a:hover{
    color: #D8E072;
    transition: .4s;
   } */

   .logo-set h1 {
    font-size: 45px;
    font-weight: 700;
    margin: 0 110px;
    padding: 4px;
    color: #3f3c7c; /*題字ブルーにするとなぜかホバーで色変わらず*/
    border-bottom: 1px solid #3f3c7c;
    border-top: 1px solid #3f3c7c;
   }

   .logo-set h1:hover {
     color: #D8E072;
     transition: .5s;
     padding: 0.1em 0;
   }

   .logo-set p {
    margin-top: 15px;
    font-size: 15px;
    /* color: #3f3c7c; */
   }

   .logo-set p:hover {
     color: #D8E072;
     transition: .5s;
   }

  /*2: 右上　SNSボタン,検索マーク */
  .header-menu {
    display: none;
    /* position: absolute;
    top:0;
    right: 50px; */
  }

  .header-menu ul {
    font-size: 18px;
    display: flex;
    margin: 0;
    padding: 0;
  }

  .header-menu a {
    display: block;
    margin-right: 12px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
  }

  .header-menu a:hover {
    color: #D8E072; /*カーソル載せるとで黄みどりになる設定*/
  }

  /* nav */
  nav {　　
    width: 411px;
    height: 70px;
    color: #335cbb;
    background-color: #3F3C7C;
  }

  .menu-item a { /*ホバーしやすく大きくした*/
    width: 93px;
    height: 23px;
    color: white;
    display: inline-block;
  }

  .navi-in a:hover {
    opacity: 0.8;
    margin-top: 1.5px;
    border-top: 1.5px solid #3F3C7C; /*上に青ラインがつく→同色なので下に文字だけ移動して見える*/
    /* background-color: #5753AB;　背景を薄いブルーに */
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .navi-in ul {
    height: 50px;
    margin: 0 0 0 0;
    padding-left: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .navi-in li {
    width: 80px;
    height: 0;
    margin: 12px 10px;
    text-align: center;
    font-size: 13px;
  }

  .menu-item {　
    width: 93px;
    height: 20px;
    margin: 15px 30px;
    text-align: center;
    font-size: 15.5px;
  }

  /* メイン */
  main {
    /* float: left; */
  }

  section {
    width: 411px;
  }

  .item a {
    /* display: block; タグチップ横並び*/
    color: white;
  }

  .item a:hover {
    opacity: 0.8;
  }

  /*　 画像と内容のカード　*/
  .item-inner {
    width: 380px;
    max-height: 385px;
    margin: 33px 25px 30px 20px;
    border: solid 0.1px lightgray;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  /*カードの記事画像*/
  .eyecatch {
    min-height: 220px;
    background-position: center;
    background-size: cover;
    border: solid 0.1px lightgray;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  .eyecatch.eye1 img { /*記事ページのアイキャッチと区別*/
    height: 220px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0px; /*記事ページのアイキャッチと連想しないよう指定*/
  }

  .eyecatch img {
    width: 380px;
    height: 220px;
    object-fit: cover;
  }

  .tag-tips {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .under-title {
    display: flex;
    justify-content: space-between;
  }

  .tip {
    display: flex;
    flex-wrap: wrap;
 }

  .tip a {
    width: auto;
    height: 19px;
    margin: 2px 2px 2px 3px;
    padding: 0 7px 0 7px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px #C0C0C0;
    border-radius: 3px;
    background-color: #C0C0C0;
  }

  .detail {
    height: 130px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 5px 20px 0 20px;
    overflow: hidden;
    position: relative;
  }

  .category-tip {
    max-width: 110px;
    height: 21px;
    margin: 5px;
    padding: 0 8px 0 8px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px pink;
    border-radius: 10px;
    position: relative;
    top: 0;
    left: 0;
  }

  .category-tip a {
    color: white;
  }

  .detail h3 {
    color: #3F3C7C;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 550;
    overflow: hidden;
    height: 48px;
  }

  .item-date {
    width: 181px;
    padding-top: 5px;
    font-size: 12px;
    text-align: right;
  }

  /*ページャー */
   .wp-pagenavi {
     text-align: center;
   }

   .wp-pagenavi span.current {
     font-weight: bold;
     border-radius: 5px;
     border-color: #3F3C7C;
     color: #3F3C7C;
     font-size: 15px;
 }

   .pages {
     border-radius: 3px;
   }

  /* サイドバー */
  .sidebar {
    /* width: 380px; */
    width: 365px;
    margin-right: 0;
    margin-left: 17px;
  }

  .plofile-wrapper,.side-twitter,.side-instaglam {
    border: solid 0.1px lightgray;
    border: 1px solid #ecf0f1;
    margin: 20px;
    text-align: center;
    height: 500px;
  }

  /*　プロフィール欄　*/
  .plofile-wrapper {
    width: 300px;
    height: 685px;
    margin-top: 0;
    margin-bottom: 55px;
    margin-left: 15px;
    margin-right: 15px;
    padding: 0 25px;
  }

  .popular-entry {
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .side-twitter,.side-instaglam {
    height: 200px;
  }

  .profile-photo {
    border-radius: 50%;
    padding-left: 10px;
  }

  .my-face {
    width: 120px;
    height: 120px;
    border-radius: 7%;
    text-align: center;
    margin: 15px 70px 15px 0;
  }

  .myjob {
    font-size: 14px;
    margin-top: 15px;
    padding: 0 0;
    line-height: 1.8;
    text-align: left;
  }

  .my-profile a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .my-profile a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 14.5px;　/*文字少し小さく*/
  }

  /*アメブロへのリンクボタン*/
  .ameblo-rink a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .ameblo-rink a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 14.5px;　/*文字少し小さく*/
  }

  .profile-sns-menu {
    height: 90px;
    background-color: #e1A7CA;/* pink　*/
  }

  /* aside-SNSボタン */
  .profile-sns {
    color: #fff;
    font-size: 17px;
    height: 20px;
    position: relative;
    bottom: 13px;
  }

  .profile-sns-menu ul {
    display: flex;
    justify-content: center;
    padding: 0 0 8px 14px;
    margin: 0 0;
  }

  .profile-sns-menu a {
    display: block;
    color: #fff;
    margin-right: 15px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    font-size: 21px;
  }

  .profile-sns-menu a:hover {
  　color: #3F3C7C;/*濃いブルー*/
  }

    /* 人気の記事　*/
  #popular-entries {
    width: 205px;
  }

  .popular-entry {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .popular-entry-content a:hover {
    color: #D8E072;　/*黄みどり*/
  }

  .popular-entry-title  { /*各記事タイトルのグレー下線など*/
    display: inline-block;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  /* カテゴリー　*/
  .category {
    width: 320px;
    height: 700px;
    margin-top: 20px;
    padding-top: 20px;
  }

  .category-list  {
    height: 300px;
    padding-left: 15px;
  }

  .list-first a {
    display: inline-block;
    margin-top: 10px;
    flex-direction: column;
  }

  .list-first {
    padding-left: 13px;
  }

  li .list-first ul {
    font-size: 15px;
  }

  .list-first ul {
    padding-left: 15px;
  }

  .first-child {
    padding-left: 30px;
  }

  .list-second {
    margin-top: 15px;
    padding-left: 20px;
  }

  .children li {
     margin-left: 0; /*カテゴリー用に変更 */
     list-style: none;
     margin-top: 15px;
   }

  .widget_title {
    margin-top: 55px;
    font-weight: 500;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .cat-item  {
    margin-top: 12px;
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.05); /*カテゴリーのグレー下線*/
  }

  .cat-item a {
    display: inline-block;
    margin: 6px 0;
  }

  /*アーカイブ　月ごと*/
    #archives-dropdown-2 {
      color: #4B4C4C;
      border-radius: 6px;
      border: 1px solid #ddd;
      width: 240px;
      height: 30px;
      font-size: 14px;
      margin-right: 0px;
      background-color: white;
    }

  /*カテゴリーのデザイン*/
  .children {
   padding-left: 0;
  }

  ul .children li {
   line-height: 1.5;
   /* padding: 0.5em 0; */
   list-style-type: none;
   margin-top: 2px;
   padding: 5px 0 0 0;
  }

  .sidebar ul {
    padding-left: 25px;
    font-size: 14px;
  }

  /*　カテゴリーのデザインここまで　*/

  .twitter-wrapper {
    padding-top: 35px;
    /* margin-left: 25px; */
  }

  .twitter-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .instagram-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  /*　検索　*/
 .s {
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 265px;
    height: 25px;
    font-size: 14px;
    margin-right: 15px;
  }

  #searchform {
    margin-left: 20px;
  }

  .screen-reader-text {
    display: none;
  }

  .searchsubmit {
    color: #555555;
    font-size: 13px;
    background: #D8E072;
    border-radius: 6px;
    border: 3px double #fff;
  }

  /*関連記事 プラグイン*/
  ul.related_post {
    text-align: center;
  }

  /*SNSシェアボタン*/
  .fa-hatena:before {
     font-family: Verdana;
     font-weight: bold;
     content: 'B!';
   }

   .share {
     margin-top: 10px;
     margin-bottom: 0px;
   }

   .share ul {
     margin: 0;
     padding: 0;
     list-style: none;
   }

   .share ul:after {
     display: block;
     clear: both;
     content: '';
   }

   .share li {
     float: left;
     width: 25%;
     margin: 0;
     margin-top: 15px;
   }

   .share li a {
     font-size: 14px;
     display: block;
     padding: 10px;
     text-align: center;
     text-decoration: none;
     color: #fff;
   }

   .share li a:hover {
     opacity: .8;
   }

   .share li a:visited {
     color: #fff;
   }

   .tweet a {
     background-color: #55acee;
   }

   .facebook a {
     background-color: #315096;
   }

   .line a {
    background-color: #06c755;
   }

   .hatena a {
     background-color: #008fde;
   }
   /*モバイル用　ロゴのみにする*/
   .share li {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     padding: 3px;
   }

   .share li i {
     font-size: 1.3em;
     padding-top: 3px;
   }
   .share li span {
     display: none;
   }

  /*　footer　*/
  footer {
    width: 411px;
    height: 145px;
    background-color: #D8E072;
    clear: both;
    position: relative;
    top: 21px;
  }

  footer p {
    font-size: 18px;
    padding-top: 75px;
    text-align: center;
    color: gray;
  }

    /*　以下、投稿ページ用　*/

  .eye1 img {　　/* ①　backgroundで画像を最適化 */
    width: 100%;　　/*高さと幅の指定は必須*/
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .eye1 img { /* 縦横比をあわせてサイズが変更されるように調整 */
      height: 12vw;
  }

  .eye1 img { /* ②　object-fitを使ってimgタグの画像を最適化 https://plusers.net/wordpress_img_responsive*/
    height: 210px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 25px;
  }

  .content {　/*投稿記事の枠*/
    float: none;
    width: 372px;
    padding: 0 20px 30px 20px;
    margin: 0 0 0 0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 0 0 rgba(0,0,0,.18);
  }

  .content .category-tip {
    margin-top: 0;
  }

  .content .title-nonstyle { /*投稿記事のタイトル用h２ */
    font-size: 24px;
    font-weight: 300;
    margin: 25px 0 25px 0;
    border-bottom: none;
    color: #4B4C4C;
  }

  .content .title-nonstyle:after{ /*.content h2:afterの打ち消し*/
    position: static;
    content: " ";
    display: inline;
    border-bottom: none;
    bottom: 0;
    width: 0;
  }

  /*日付関連*/

  .content_date_items {
    display: flex;
    justify-content: flex-end;
  }

  .content_date_items { /*記事カードの日付と区別*/
    padding-top: 0px;
    font-size: 12px;
    color: #777777; /*#555555の薄い色*/
  }

　.update_post_day { /*リライト日*/
    font-size: 12px;
    color: #777777;
  }

  .content p {
    font-size: 16px;
    padding-bottom: 2rem;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    line-height: 1.8em;
        /* font-size: 1em; */
  }

  /* 記事内アンカータグの設定 */
  .content p a {
    color: #007BBB; /* 通常リンクのブルー*/
    /* color: #3F3C7C; 深いブルー　 */
    text-decoration-color: #007BBB;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .content p a:visited {
    color: #007BBB; /* 同色のまま　*/
  }

  .content p a:hover {
    color: #D8E072; /*きみどり*/
    font-weight: 500;
    text-decoration: underline;
  }

  .alignnone { /*　記事内の画像設定〜縦長と横長に対応　*/
    max-width: 100%;
    height: auto;
    /* min-height: 400px;
    width: auto; */
  }

  /*見出しのデザイン*/

  .content h2 {
    margin: 20px 0 30px 0;
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    /* color: #3F3C7C;　濃いブルー*/
    color: #4B4C4C; /*文字色 濃いグレー*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #3F3C7C;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
    font-size: 20px;
    font-weight: bold;
  }

  .content h3 {
    margin: 0 0 30px 13px;
    border-bottom: solid 3px #D8E072;/*黄緑*/
    position: relative;
    font-size: 19px;
    /* color: #3F3C7C;　文字色ブルー */
    color: #4B4C4C; /*文字色 濃いグレー*/
    font-weight: 700;
  }

  .content h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #E1A7CA;/*pink*/
    bottom: -3px;
    width: 30%;
  }

  .content h4 {
    position: relative;/*相対位置*/
    padding: 0.5em 0.5em 0.5em 2.0em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
    font-size: 18px;
    color: #3F3C7C;　/*文字色ブルー*/
    /* color: black;/*文字色*/
  }

  .content h4:before { font-family: "Font Awesome 5 Free";/*忘れずに*/
    content: "\f138";/*アイコンのユニコード*/
    position: absolute;/*絶対位置*/
    font-size: 1.4em;/*サイズ*/
    left: 0.1em;/*アイコンの位置*/
    top: 0.15em;/*アイコンの位置*/
    color: #E1A7CA; /*アイコン色*/
  }

  .content h5 {
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
    background: #e8edae; /*より薄い黄緑色に変更*/
    border-radius: 15px;
    font-size: 16px; /*fontをpと同じに*/
  }

  .content h5:before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
  }

  .content h5:after {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
  }

  /*記事内ボタン：さるわかくん　https://saruwakakun.com/html-css/reference/buttons　*/
  .btn1 a {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    color: #FFF;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 5px #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    border: dashed 1px #FFF;
    font-size: 1rem;　/*フォント*/
  }

  a.btn-stitch {
    width: 250px; /*ボタンの幅はここで指定*/
  }

  .btn1 {
    margin: 30px 0 60px 0;
    text-align: center;
  }

  .content p .btn-stitch:hover {
    opacity: 0.9;
    transition: .3s;
  }


  .btn-stitch:hover {
    opacity: 0.8;
    transition: .3s;
    border: dotted 1px #FFF;
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

    /****************************************
            関連記事（Relation）寝ログより
  *****************************************/
  #related-entries h3{
    font-size:24px;
    background-color: #f7f7f7;/*追加*/
    border-radius: 5px;
    margin: 75px 0 45px 0;/*追加*/
  }

  #related-entries .related-entry{
    line-height:150%;
    margin-bottom: 27px;
    clear: both;
    border-bottom: 1px solid #e7e7e7;/*追加*/
    height: 205px;/*修正*/
  }

  #related-entries .related-entry-thumb {
    float: left;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  #related-entries .related-entry-content {
    margin-left: 120px;
  }

  .related-entry-title{
      margin-bottom:5px;
  }

  .related-entry-snippet{
    margin:0 0 5px 0;
  }

  .related-entry-read{
    margin:0;
    font-size:12px;
  }

  p.related-entry-read {
    font-size: 13px;
    padding: 0 0 0 10px;
  }

  p.related-entry-read a {
    border-bottom: solid 1px;/*「続きを読む→」の下線 追加*/
  }

  p.related-entry-snippet {/*追加*/
    display: inherit; /*360pxの影響でpが消えないよう追加*/
    font-size: 13.5px;
    padding: 3px 0 3px 10px;
  }

  h4.related-entry-title {
    font-size: 15px;
    background: #eef2c6;
    border-radius: 10px;
    position: relative;
    padding: 3px 15px;
    margin-left: 0;
  }

  h4.related-entry-title a:hover {
    color: #8e8c8c;
    font-weight: 500;
  }

  .related-entries h3 {
    background-color: #f4f4f4;/*追加*/
  }

  h4.related-entry-title:before { /*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
    display: none;
  }

  h4.related-entry-title:after {　/*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
    display: none;
  }
  /*関連記事　ここまで*/

  /*次の記事ー前の記事*/
  .content.prev-next-link {
   display: flex;
  }

  .prev-next-link {
   display: block;
   margin: 0 0 0 0
  }

  .prev-next-link a {
   flex: 1;
  }

  .thumb-wrap {
   display: flex;
  }

   /* Images */
  .thumb-wrap {
   display: flex;
  }

  .thumb-wrap p {
   margin: 0 0 0 16px;
   font-size: 14px;
  }

  .thumb-wrap img {
   width: 80px;
   height: 100%;
  }

  .second-wrap {
    flex-direction: row; /*反転打ち消す*/
  }

  .thumb-wrap.second-wrap p {
    margin: 0 0 0 16px;
    font-size: 14px;
  }

  .prev-next-link a {
  /* border-bottom: 1px #ddd solid; */
  display: block;
  text-decoration: none;
  padding: 20px 20px;
  }

  .prev-next-link a:hover {
   background-color: #f6f6f6;
  }

  .prev-next-link a:first-child {
   border-bottom: dashed 1px lightgray;
  }

  .prev-next-label {
   font-size: .825rem;
   color: #000;
   margin-bottom: 10px;
  }

  p.prev-next-label {
   color: #3F3C7C;
   font-weight: 600;
   font-size: 14px;
   padding-bottom: 15px;
  }

  .next-label {
    text-align: left;
  }
   /*ここまで、次の記事ー前の記事*/

   /*ページネーション*/
  .pagination li {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .pagination li.current,
  .pagination li.first,
  .pagination li.last,
  .pagination li.previous,
  .pagination li.next{
    position: initial;
    top: initial;
    left: initial;
   }

   .pagination li.previous a {
    border-left-width: 0;
   }
   /*ここまでページネーション*/

}


@media (min-width: 414px) {
/*iPhone 8 Plus, iPhone 7 Plus*/
  .wrapper {
    width: 414px;
  }
  /* ヘッダー */
  header {
    width: 414px;
    position: relative;
  }

  /* header a {
    color: #3f3c7c;
  } */

  /*1:タイトル部 */
  .logo-set {
   height: 140px;
   text-align: center;
   padding: 0;
   /* font-family: 'Courgette', cursive;  */
   font-family: 'Julius Sans One', sans-serif;/* https://frontendlifeinde.com/　と同じに　 */
   margin: 15px 0 65px 0;
  }

  /* .logo-set a:hover{
   color: #D8E072;
   transition: .4s;
  } */

  .logo-set h1 {
   font-size: 48px;
   font-weight: 700;
   margin: 0 110px;
   padding: 4px;
   color: #3f3c7c; /*題字ブルーにするとなぜかホバーで色変わらず*/
   border-bottom: 1px solid #3f3c7c;
   border-top: 1px solid #3f3c7c;
  }

  .logo-set h1:hover {
    color: #D8E072;
    transition: .5s;
    padding: 0.1em 0;
  }

  .logo-set p {
   margin-top: 12px;
   font-size: 15px;
   /* color: #3f3c7c; */
  }

  .logo-set p:hover {
    color: #D8E072;
    transition: .5s;
  }

  /*2: 右上　SNSボタン,検索マーク */
  .header-menu {
    display: none;
    /* position: absolute;
    top:0;
    right: 50px; */
    /* position: absolute;
    top: -30px;
    left: 280px; SNSボタン表示するなら*/
  }

  .header-menu ul {
    font-size: 18px;
    display: flex;
    margin: 0;
    padding: 0;
  }

  .header-menu a {
    display: block;
    margin-right: 12px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
  }

  .header-menu a:hover {
    color: #D8E072; /*カーソル載せるとで黄みどりになる設定*/
  }

  /* nav */
  nav {　　
    width: 414px;
    height: 70px;
    color: #335cbb;
    background-color: #3F3C7C;
  }

  .menu-item a { /*ホバーしやすく大きくした*/
    width: 93px;
    height: 23px;
    color: white;
    display: inline-block;
  }

  .navi-in a:hover {
    opacity: 0.8;
    margin-top: 1.5px;
    border-top: 1.5px solid #3F3C7C; /*上に青ラインがつく→同色なので下に文字だけ移動して見える*/
    /* background-color: #5753AB;　背景を薄いブルーに */
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .navi-in ul {
    height: 50px;
    margin: 0 0 0 0;
    padding-left: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .navi-in li {
    width: 72px;
    height: 0;
    margin: 12px 10px;
    text-align: center;
    font-size: 12px;
  }

  .menu-item {　
    width: 93px;
    height: 20px;
    margin: 15px 30px;
    text-align: center;
    font-size: 15.5px;
  }

  /* メイン */
  main {
    /* float: left; */
  }

  section {
    width: 414px;
  }

  .item a {
    /* display: block; タグチップ横並び*/
    color: white;
  }

  .item a:hover {
    opacity: 0.8;
  }

  /*　 画像と内容のカード　*/
  .item-inner {
    width: 380px;
    max-height: 387px;
    margin: 33px 25px 30px 20px;
    border: solid 0.1px lightgray;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  /*カードの記事画像*/
  .eyecatch {
    min-height: 220px;
    background-position: center;
    background-size: cover;
    border: solid 0.1px lightgray;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  .eyecatch.eye1 img { /*記事ページのアイキャッチと区別*/
    height: 220px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0px; /*記事ページのアイキャッチと連想しないよう指定*/
  }

  .eyecatch img {
    width: 380px;
    height: 220px;
    object-fit: cover;
  }

  .tag-tips {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .under-title {
    display: flex;
    justify-content: space-between;
  }

  .tip {
    display: flex;
    flex-wrap: wrap;
 }

  .tip a {
    width: auto;
    height: 18px;
    margin: 2px 2px 2px 3px;
    padding: 0 7px 0 7px;
    font-size: 11px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px #C0C0C0;
    border-radius: 3px;
    background-color: #C0C0C0;
  }

  .detail {
    height: 125px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 5px 20px 0 20px;
    overflow: hidden;
    position: relative;
  }

  .category-tip {
    max-width: 110px;
    height: 21px;
    margin: 5px;
    padding: 0 8px 0 8px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px pink;
    border-radius: 10px;
    position: relative;
    top: 0;
    left: 0;
  }

  .category-tip a {
    color: white;
  }

  .detail h3 {
    color: #3F3C7C;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 550;
    overflow: hidden;
    height: 48px;
}

  .item-date {
    width: 181px;
    padding-top: 5px;
    font-size: 12px;
    text-align: right;
  }

  /*ページャー */
   .wp-pagenavi {
     text-align: center;
   }

   .wp-pagenavi span.current {
     font-weight: bold;
     border-radius: 5px;
     border-color: #3F3C7C;
     color: #3F3C7C;
     font-size: 15px;
 }

   .pages {
     border-radius: 3px;
   }

  /* サイドバー */
  .sidebar {
    /* width: 380px; ?*/
    width: 365px;
    margin-right: 0;
    margin-left: 17px;
  }

  .plofile-wrapper,.side-twitter,.side-instaglam {
    border: solid 0.1px lightgray;
    border: 1px solid #ecf0f1;
    margin: 20px;
    text-align: center;
    height: 500px;
  }

  /*　プロフィール欄　*/
  .plofile-wrapper {
    width: 300px;
    height: 705px;
    margin-top: 0;
    margin-bottom: 55px;
    margin-left: 15px;
    margin-right: 15px;
    padding: 0 25px;
  }

  .popular-entry {
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .side-twitter,.side-instaglam {
    height: 200px;
  }

  .profile-photo {
    border-radius: 50%;
    padding-left: 10px;
  }

  .my-face {
    width: 120px;
    height: 120px;
    border-radius: 7%;
    text-align: center;
    margin: 15px 70px 15px 0;
  }

  .myjob {
    font-size: 14px;
    margin-top: 15px;
    padding: 0 8px;
    line-height: 1.8;
    text-align: left;
  }

  .my-profile a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .my-profile a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 14.5px;　/*文字少し小さく*/
  }

  /*アメブロへのリンクボタン*/
  .ameblo-rink a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .ameblo-rink a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 14.5px;　/*文字少し小さく*/
  }

  .profile-sns-menu {
    height: 78px;
    background-color: #e1A7CA;/* pink　*/
  }

  .profile-sns-menu {
    height: 90px;
    background-color: #e1A7CA;/* pink　*/
  }

  /* aside-SNSボタン */
  .profile-sns {
    color: #fff;
    font-size: 17px;
    height: 21px;
    position: relative;
    bottom: 10px;
  }

  .profile-sns-menu ul {
    display: flex;
    justify-content: center;
    padding: 0 0 8px 14px;
    margin: 0 0;
  }

  .profile-sns-menu a {
    display: block;
    color: #fff;
    margin-right: 15px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    font-size: 20px;
  }

  .profile-sns-menu a:hover {
  　color: #3F3C7C;/*濃いブルー*/
  }

    /* 人気の記事　*/
  #popular-entries {
    width: 205px;
  }

  .popular-entry {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .popular-entry-content a:hover {
    color: #D8E072;　/*黄みどり*/
  }

  .popular-entry-title  { /*各記事タイトルのグレー下線など*/
    display: inline-block;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  /* カテゴリー　*/
  .category {
    width: 320px;
    height: 700px;
    margin-top: 20px;
    padding-top: 20px;
  }

  .category-list  {
    height: 300px;
    padding-left: 15px;
  }

  .list-first a {
    display: inline-block;
    margin-top: 10px;
    flex-direction: column;
  }

  .list-first {
    padding-left: 13px;
  }

  li .list-first ul {
    font-size: 15px;
  }

  .list-first ul {
    padding-left: 15px;
  }

  .first-child {
    padding-left: 30px;
  }

  .list-second {
    margin-top: 15px;
    padding-left: 20px;
  }

  .children li {
     margin-left: 0; /*カテゴリー用に変更 */
     list-style: none;
     margin-top: 15px;
   }

  .widget_title {
    margin-top: 55px;
    font-weight: 500;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .cat-item  {
    margin-top: 10px;
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.05); /*カテゴリーのグレー下線*/
  }

  .cat-item a {
    display: inline-block;
    margin: 6px 0;
  }

  /*アーカイブ　月ごと*/
  #archives-dropdown-2 {
    color: #4B4C4C;
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 250px;
    height: 30px;
    font-size: 14px;
    margin-right: 0px;
    background-color: white;
  }

  /*カテゴリーのデザイン*/
  .children {
   padding-left: 0;
 }

 ul .children li {
   line-height: 1.5;
   padding: 0.5em 0;
   list-style-type: none;
    margin-top: 2px;
    padding: 5px 0 0 0;
 }

  .sidebar ul {
    /* padding-left: 36px; */
    padding-left: 25px;
    font-size: 14px;
  }

  /*　カテゴリーのデザインここまで　*/

  .twitter-wrapper {
    padding-top: 35px;
    /* margin-left: 25px; */
  }

  .twitter-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .instagram-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  /*　検索　*/
 .s {
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 265px;
    height: 25px;
    font-size: 14px;
    margin-right: 17px;
  }

  #searchform {
    margin-left: 20px;
  }

  .screen-reader-text {
    display: none;
  }

  .searchsubmit {
    color: #555555;
    font-size: 13px;
    background: #D8E072;
    border-radius: 6px;
    border: 3px double #fff;
  }

  /*関連記事 プラグイン*/
  ul.related_post {
    text-align: center;
  }

 /*SNSシェアボタン　モバイル用*/
   .fa-hatena:before {
    font-family: Verdana;
    font-weight: bold;
    content: 'B!';
  }

  .share {
    margin-top: 10px;
    margin-bottom: 0px;
  }

  .share ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .share ul:after {
    display: block;
    clear: both;
    content: '';
  }

  .share li {
    float: left;
    width: 25%;
    margin: 0;
    margin-top: 15px;
  }

  .share li a {
    font-size: 14px;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
  }

  .share li a:hover {
    opacity: .8;
  }

  .share li a:visited {
    color: #fff;
  }

  .tweet a {
    background-color: #55acee;
  }

  .facebook a {
    background-color: #315096;
  }

  .line a {
   background-color: #06c755;
  }

  .hatena a {
    background-color: #008fde;
  }
  /*モバイル用　ロゴのみにする*/
  .share li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px;
  }
  .share li i {
    font-size: 1.3em;
    padding-top: 3px;
  }
  .share li span {
    display: none;
  }

  /*　footer　*/
  footer {
    width: 414px;
    height: 145px;
    background-color: #D8E072;
    clear: both;
    position: relative;
    top: 21px;
  }

  footer p {
    font-size: 18px;
    padding-top: 75px;
    text-align: center;
    color: gray;
  }

  /*　以下、投稿ページ用　*/

  .eye1 img {　　/* ①　backgroundで画像を最適化 */
    width: 100%;　　/*高さと幅の指定は必須*/
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .eye1 img { /* 縦横比をあわせてサイズが変更されるように調整 */
      height: 12vw;
  }

  .eye1 img { /* ②　object-fitを使ってimgタグの画像を最適化 https://plusers.net/wordpress_img_responsive*/
    height: 210px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 25px;
  }

  .content {　/*投稿記事の枠*/
    float: none;
    width: 375px;
    padding: 0 20px 30px 20px;
    margin: 0 0 0 0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 0 0 rgba(0,0,0,.18);
  }

  .content .category-tip {
    margin-top: 0;
  }

  .content .title-nonstyle { /*投稿記事のタイトル用h２ */
    font-size: 24px;
    font-weight: 300;
    margin: 25px 0 25px 0;
    border-bottom: none;
    color: #4B4C4C;
  }

  .content .title-nonstyle:after{ /*.content h2:afterの打ち消し*/
    position: static;
    content: " ";
    display: inline;
    border-bottom: none;
    bottom: 0;
    width: 0;
  }

  /*日付関連*/

  .content_date_items {
    display: flex;
    justify-content: flex-end;
  }

  .content_date_items { /*記事カードの日付と区別*/
    padding-top: 0px;
    font-size: 12px;
    color: #777777; /*#555555の薄い色*/
  }

　.update_post_day { /*リライト日*/
    font-size: 12px;
    color: #777777;
  }

  .content p {
    font-size: 16px;
    padding-bottom: 2rem;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    line-height: 1.8em;
        /* font-size: 1em; */
  }

  /* 記事内アンカータグの設定 */
  .content p a {
    color: #007BBB; /* 通常リンクのブルー*/
    /* color: #3F3C7C; 深いブルー　 */
    text-decoration-color: #007BBB;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .content p a:visited {
    color: #007BBB; /* 同色のまま　*/
  }

  .content p a:hover {
    color: #D8E072; /*きみどり*/
    font-weight: 500;
    text-decoration: underline;
  }

  .alignnone { /*　記事内の画像設定〜縦長と横長に対応　*/
    max-width: 100%;
    height: auto;
    /* min-height: 400px;
    width: auto; */
  }

  /*見出しのデザイン*/

  .content h2 {
    margin: 25px 0 30px 0;
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    /* color: #3F3C7C;　濃いブルー*/
    color: #4B4C4C; /*文字色 濃いグレー*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #3F3C7C;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
    font-size: 20px;
    font-weight: bold;
  }

  .content h3 {
    margin: 0 0 30px 13px;
    border-bottom: solid 3px #D8E072;/*黄緑*/
    position: relative;
    font-size: 19px;
    /* color: #3F3C7C;　文字色ブルー */
    color: #4B4C4C; /*文字色 濃いグレー*/
    font-weight: 700;
  }

  .content h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #E1A7CA;/*pink*/
    bottom: -3px;
    width: 30%;
  }

  .content h4 {
    position: relative;/*相対位置*/
    padding: 0.5em 0.5em 0.5em 2.0em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
    font-size: 18px;
    color: #3F3C7C;　/*文字色ブルー*/
    /* color: black;/*文字色*/
  }

  .content h4:before { font-family: "Font Awesome 5 Free";/*忘れずに*/
    content: "\f138";/*アイコンのユニコード*/
    position: absolute;/*絶対位置*/
    font-size: 1.4em;/*サイズ*/
    left: 0.1em;/*アイコンの位置*/
    top: 0.15em;/*アイコンの位置*/
    color: #E1A7CA; /*アイコン色*/
  }

  .content h5 {
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
    background: #e8edae; /*より薄い黄緑色に変更*/
    border-radius: 15px;
    font-size: 16px; /*fontをpと同じに*/
  }

  .content h5:before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
  }

  .content h5:after {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
  }

  /*記事内ボタン：さるわかくん　https://saruwakakun.com/html-css/reference/buttons　*/
  .btn1 a {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    color: #FFF;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 5px #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    border: dashed 1px #FFF;
    font-size: 1rem;　/*フォント*/
  }

  a.btn-stitch {
    width: 250px; /*ボタンの幅はここで指定*/
  }

  .btn1 {
    margin: 30px 0 60px 0;
    text-align: center;
  }

  .content p .btn-stitch:hover {
    opacity: 0.9;
    transition: .3s;
  }


  .btn-stitch:hover {
    opacity: 0.8;
    transition: .3s;
    border: dotted 1px #FFF;
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

    /****************************************
            関連記事（Relation）寝ログより
  *****************************************/
  #related-entries h3{
    font-size:24px;
    background-color: #f7f7f7;/*追加*/
    border-radius: 5px;
    margin: 75px 0 45px 0;/*追加*/
  }

  #related-entries .related-entry{
    line-height:150%;
    margin-bottom: 27px;
    clear: both;
    border-bottom: 1px solid #e7e7e7;/*追加*/
    height: 205px;/*修正*/
  }

  #related-entries .related-entry-thumb {
    float: left;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  #related-entries .related-entry-content {
    margin-left: 120px;
  }

  .related-entry-title{
      margin-bottom:5px;
  }

  .related-entry-snippet{
    margin:0 0 5px 0;
  }

  .related-entry-read{
    margin:0;
    font-size:12px;
  }

  p.related-entry-read {
    font-size: 13px;
    padding: 0 0 0 10px;
  }

  p.related-entry-read a {
    border-bottom: solid 1px;/*「続きを読む→」の下線 追加*/
  }

  p.related-entry-snippet {/*追加*/
    display: inherit; /*360pxの影響でpが消えないよう追加*/
    font-size: 13.5px;
    padding: 3px 0 3px 10px;
  }

  h4.related-entry-title {
    font-size: 15px;
    background: #eef2c6;
    border-radius: 10px;
    position: relative;
    padding: 3px 15px;
    margin-left: 0;
  }

  h4.related-entry-title a:hover {
    color: #8e8c8c;
    font-weight: 500;
  }

  .related-entries h3 {
    background-color: #f4f4f4;/*追加*/
  }

  h4.related-entry-title:before { /*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
    display: none;
  }

  h4.related-entry-title:after {　/*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
    display: none;
  }
  /*関連記事　ここまで*/

  /*次の記事ー前の記事*/
  .content.prev-next-link {
   display: flex;
  }

  .prev-next-link {
   display: block;
   margin: 0 0 0 0
  }

  .prev-next-link a {
   flex: 1;
  }

  .thumb-wrap {
   display: flex;
  }

   /* Images */
  .thumb-wrap {
   display: flex;
  }

  .thumb-wrap p {
   margin: 0 0 0 16px;
   font-size: 14px;
  }

  .thumb-wrap img {
   width: 80px;
   height: 100%;
  }

  .second-wrap {
    flex-direction: row; /*反転打ち消す*/
  }

  .thumb-wrap.second-wrap p {
    margin: 0 0 0 16px;
    font-size: 14px;
  }

  .prev-next-link a {
  /* border-bottom: 1px #ddd solid; */
  display: block;
  text-decoration: none;
  padding: 20px 25px;
  }

  .prev-next-link a:hover {
   background-color: #f6f6f6;
  }

  .prev-next-link a:first-child {
   border-bottom: dashed 1px lightgray;
  }

  .prev-next-label {
   font-size: .825rem;
   color: #000;
   margin-bottom: 10px;
  }

  p.prev-next-label {
   color: #3F3C7C;
   font-weight: 600;
   font-size: 14px;
   padding-bottom: 18px;
  }

  .next-label {
    text-align: left;
  }
   /*ここまで、次の記事ー前の記事*/

   /*ページネーション*/
  .pagination li {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .pagination li.current,
  .pagination li.first,
  .pagination li.last,
  .pagination li.previous,
  .pagination li.next{
    position: initial;
    top: initial;
    left: initial;
  }

  .pagination li.previous a {
    border-left-width: 0;
  }
   /*ここまでページネーション*/

}


@media (min-width: 768px) {
/*タブレット: iPad*/
  .wrapper {
    width: 768px;
  }
/* ヘッダー */
  header {
    width: 768px;
    height: 145px;
    position: relative;
  }

  /* header a {
    color: #3f3c7c;
  } */

  /*1:タイトル部 */
   .logo-set {
    height: 140px;
    text-align: center;
    padding: 0;
    /* font-family: 'Courgette', cursive;  */
    font-family: 'Julius Sans One', sans-serif;/* https://frontendlifeinde.com/　と同じに　 */
    margin: 17px 0 0 0;
   }

   /* .logo-set a:hover{
    color: #D8E072;
    transition: .4s;
   } */

   .logo-set h1 {
    font-size: 33px;
    font-weight: 700;
    margin: 0 235px;
    padding: 4px;
    color: #3f3c7c; /*題字ブルーにするとなぜかホバーで色変わらず*/
    border-bottom: 1px solid #3f3c7c;
    border-top: 1px solid #3f3c7c;
   }

   .logo-set h1:hover {
     color: #D8E072;
     transition: .5s;
     padding: 0.1em 0;
   }

   .logo-set p {
    margin-top: 10px;
    font-size: 13px;
    /* color: #3f3c7c; */
   }

   .logo-set p:hover {
     color: #D8E072;
     transition: .5s;
   }

  /*2: 右上　SNSボタン,検索マーク */
  .header-menu {
    display: inline;
    position: absolute;
    top: -20px;
    right: 25px;
  }

  .header-menu ul {
    font-size: 18px;
    display: flex;
    margin: 0;
    padding: 0;
  }

  .header-menu a {
    display: block;
    margin-right: 12px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    color: #3F3C7C;
  }

  .header-menu a:hover {
    color: #D8E072; /*カーソル載せるとで黄みどりになる設定*/
  }

  /* nav */
  nav {　　
    width: 765px;
    height: 50px;color: #335cbb;
    background-color: #3F3C7C;　/* 深いブルー*/
  }

  .menu-item a { /*ホバーしやすく大きくした*/
    width: 93px;
    height: 35px;
    color: white;
    display: inline-block;
  }

  .navi-in a:hover {
    opacity: 0.8;
    margin-top: 1.5px;
    border-top: 1.5px solid #3F3C7C; /*上に青ラインがつく→同色なので下に文字だけ移動して見える*/
    /* background-color: #5753AB;　背景を薄いブルーに */
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .navi-in ul {
    height: 50px;
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    justify-content: center;
  }

  .navi-in li {
    width: 72px;
    height: 5px;
    margin: 15px 10px;
    text-align: center;
    font-size: 12px;
  }

  .menu-item {　
    width: 93px;
    height: 20px;
    margin: 15px 30px;
    text-align: center;
    font-size: 15.5px;
  }

  /* メイン */
  main {
    float: left;
  }

  section {
    width: 510px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    padding-left: 0;
  }

  .item a {
    /* display: block; タグチップ横並び*/
    color: white;
  }

  .item a:hover {
    opacity: 0.8;
  }

  /*　 画像と内容のカード　*/
  .item-inner {
    width: 440px;
    max-height: 365px;
    margin: 45px 25px 30px 25px;
    border: solid 0.1px lightgray;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  /*カードの記事画像*/
  .eyecatch {
    min-height: 220px;
    background-position: center;
    background-size: cover;
    border: solid 0.1px lightgray;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  .eyecatch.eye1 img { /*記事ページのアイキャッチと区別*/
    height: 220px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0px; /*投稿ページのアイキャッチと連想しないよう指定*/
  }

  .eyecatch img {
    width: 440px;
    height: 220px;
    object-fit: cover;
  }

  .tag-tips {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .under-title {
    display: flex;
    justify-content: space-between;
  }

  .tip {
    display: flex;
    flex-wrap: wrap;
 }

  .tip a {
    width: auto;
    height: 18px;
    margin: 2px 2px 2px 3px;
    padding: 0 7px 0 7px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px #C0C0C0;
    border-radius: 3px;
    background-color: #C0C0C0;
  }

  .detail {
    height: 125px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 5px 20px 0 20px;
    overflow: hidden;
    position: relative;
  }

  .category-tip {
    max-width: 110px;
    height: 21px;
    margin: 5px;
    padding: 0 8px 0 8px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px pink;
    border-radius: 10px;
    position: relative;
    top: 0;
    left: 0;
  }

  .category-tip a {
    color: white;
  }

  .detail h3 {
    color: #3F3C7C; /*メインカラー*/
    margin-top: 0px;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: 550;
    overflow: hidden;
    height: 55px;
  }

  .item-date {
    width: 181px;
    padding-top: 5px;
    font-size: 12px;
    text-align: right;
  }

  /*ページャー */
   .wp-pagenavi {
     text-align: center;
   }

   .wp-pagenavi span.current {
     font-weight: bold;
     border-radius: 5px;
     border-color: #3F3C7C;
     color: #3F3C7C;
     font-size: 15px;
 }

   .pages {
     border-radius: 3px;
   }

  /* サイドバー */
  .sidebar {
    width: 228px; /*親カテゴリーの崩れでsectiinの幅と調整した*/
    margin-top: 30px;
    margin-right: 20px;
    margin-left: 10px;
    float: right;
  }

  .plofile-wrapper,.side-twitter,.side-instaglam {
    border: solid 0.1px lightgray;
    border: 1px solid #ecf0f1;
    margin: 20px;
    text-align: center;
    height: 500px;
  }

  /*　プロフィール欄　*/
  .plofile-wrapper {
    width: 199px;
    padding: 0 10px;
    height: 855px;
    margin: 0 0 50px 0;
  }

  .popular-entry {
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .side-twitter,.side-instaglam {
    height: 200px;
  }

  .profile-photo {
    border-radius: 50%;
    padding-left: 40px;
  }

  .my-face {
    width: 120px;
    height: 120px;
    border-radius: 7%;
    text-align: center;
    margin: 15px 70px 15px 0;
  }

  .myjob {
    font-size: 14px;
    margin-top: 15px;
    padding: 0 15px;
    line-height: 1.8;
    text-align: left;
  }

  .my-profile a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .my-profile a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 14.5px;　/*文字少し小さく*/
  }

  /*アメブロへのリンクボタン*/
  .ameblo-rink a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .ameblo-rink a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 14.5px;　/*文字少し小さく*/
  }

  .profile-sns-menu {
    height: 90px;
    background-color: #e1A7CA;/* pink　*/
  }

  /* aside-SNSボタン */
  .profile-sns {
    color: #fff;
    font-size: 16px;
    height: 20px;
    position: relative;
    bottom: 13px;
  }

  .profile-sns-menu ul {
    display: flex;
    justify-content: center;
    padding: 0 0 8px 14px;
    margin: 0 0;
  }

  .profile-sns-menu a {
    display: block;
    color: #fff;
    margin-right: 15px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    font-size: 21px;
  }

  .profile-sns-menu a:hover {
    color: #3F3C7C;/*濃いブルー*/
  }

    /* 人気の記事　*/
  #popular-entries {
    width: 205px;
  }

  .popular-entry {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .popular-entry-content a:hover {
    color: #D8E072;　/*黄みどり*/
  }

  .popular-entry-title  { /*各記事タイトルのグレー下線など*/
    display: inline-block;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  /* カテゴリー　*/
  .category {
    width: 320px;
    height: 700px;
    margin-top: 20px;
    padding-top: 20px;
  }

  .category-list  {
    height: 300px;
    padding-left: 15px;
  }

  .list-first a {
    display: inline-block;
    margin-top: 10px;
    flex-direction: column;
  }

  .list-first {
    padding-left: 13px;
  }

  li .list-first ul {
    font-size: 15px;
  }

  .list-first ul {
    padding-left: 15px;
  }

  .first-child {
    padding-left: 30px;
  }

  .list-second {
    margin-top: 15px;
    padding-left: 20px;
  }

  .children li {
     margin-left: 0; /*カテゴリー用に変更 */
     list-style: none;
     margin-top: 15px;
   }

  .widget_title {
    margin-top: 50px;
    font-weight: 500;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .cat-item  {
    margin-top: 7px;
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.05); /*カテゴリーのグレー下線*/
  }

  .cat-item a {
    display: inline-block;
    margin: 6px 0;
  }

  /*アーカイブ　月ごと*/
    #archives-dropdown-2 {
      color: #4B4C4C;
      border-radius: 6px;
      border: 1px solid #ddd;
      width: 210px;
      height: 25px;
      font-size: 13px;
      margin-right: 0px;
      background-color: white;
    }

  /*カテゴリーのデザイン*/
  .children {
   padding-left: 0;
 }

 ul .children li {
   line-height: 1.5;
   /* padding: 0.5em 0; */
   list-style-type: none;
    margin-top: 2px;
    padding: 5px 0 0 0;
 }

  .sidebar ul {
    padding-left: 18px;
    font-size: 14px;
  }

  /*　カテゴリーのデザインここまで　*/

  .twitter-wrapper {
    padding-top: 35px;
    /* margin-left: 25px; */
  }

  .twitter-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .instagram-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  /*　検索　*/
 .s {
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 145px;
    height: 22px;
    font-size: 11px;
    margin-right: 0px;
  }

  #searchform {
    margin-left: 5px;
  }

  .screen-reader-text {
    display: none;
  }

  .searchsubmit {
    color: #555555;
    font-size: 12px;
    background: #D8E072;
    border-radius: 6px;
    border: 3px double #fff;
  }

  /*関連記事 プラグイン*/
  ul.related_post {
    text-align: center;
  }

  /*SNSボタンのデザイン https://plusers.net/wordpress_sns_button*/
  .fa-hatena:before {
    font-family: Verdana;
    font-weight: bold;
    content: 'B!';
  }

  .share {
    margin-top: 35px;
    margin-bottom: 10px;
  }

  .share ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .share ul:after {
    display: block;
    clear: both;
    content: '';
  }

  .share li {
    float: left;
    width: 25%;
    margin: 0;
    margin-top: 15px;
  }

  .share li a {
    font-size: 14px;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
  }

  .share li a:hover {
    opacity: .8;
  }

  .share li a:visited {
    color: #fff;
  }

  .tweet a {
    background-color: #55acee;
  }

  .facebook a {
    background-color: #315096;
  }

  .line a {
   background-color: #06c755;
  }

  .hatena a {
    background-color: #008fde;
  }

  .share li span {
    /* display: none; */
    display: initial;
  }

  /*　footer　*/
  footer {
    width: 768px;
    height: 145px;
    background-color: #D8E072;
    clear: both;
    position: relative;
    top: 21px;
  }

  footer p {
    font-size: 18px;
    padding-top: 80px;
    text-align: center;
    color: gray;
  }

  /*　以下、投稿ページ用　*/

  .eye1 img {　　/* ①　backgroundで画像を最適化 */
    width: 100%;　　/*高さと幅の指定は必須*/
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .eye1 img { /* 縦横比をあわせてサイズが変更されるように調整 */
      height: 12vw;
  }

  .eye1 img { /* ②　object-fitを使ってimgタグの画像を最適化 https://plusers.net/wordpress_img_responsive*/
    height: 255px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 40px;
  }

  .content {　/*投稿記事の枠*/
    float: left;
    width: 450px;
    padding: 0 20px 30px 20px;
    margin: 50px 0px 70px 20px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.18);
  }

  .content .category-tip {
    margin-top: 0;
  }

  .content .title-nonstyle { /*投稿記事のタイトル用h２ */
    font-size: 24px;
    font-weight: 300;
    margin: 25px 0 25px 0;
    border-bottom: none;
    color: #4B4C4C;
  }

  .content .title-nonstyle:after{ /*.content h2:afterの打ち消し*/
    position: static;
    content: " ";
    display: inline;
    border-bottom: none;
    bottom: 0;
    width: 0;
  }

  /*日付関連*/

  .content_date_items {
    display: flex;
    justify-content: flex-end;
  }

  .content_date_items { /*記事カードの日付と区別*/
    padding-top: 0px;
    font-size: 13px;
    color: #777777; /*#555555の薄い色*/
  }

　.update_post_day { /*リライト日*/
    font-size: 12px;
    color: #777777;
  }

  .content p {
    font-size: 16px;
    padding-bottom: 2rem;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    line-height: 1.8em;
        /* font-size: 1em; */
  }

  /* 記事内アンカータグの設定 */
  .content p a {
    color: #007BBB; /* 通常リンクのブルー*/
    /* color: #3F3C7C; 深いブルー　 */
    text-decoration-color: #007BBB;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .content p a:visited {
    color: #007BBB; /* 同色のまま　*/
  }

  .content p a:hover {
    color: #D8E072; /*きみどり*/
    font-weight: 500;
    text-decoration: underline;
  }

  .alignnone { /*　記事内の画像設定〜縦長と横長に対応　*/
    max-width: 100%;
    height: auto;
    /* min-height: 400px;
    width: auto; */
  }

  /*見出しのデザイン*/

  .content h2 {
    margin: 25px 0 30px 0;
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    /* color: #3F3C7C;　濃いブルー*/
    color: #4B4C4C; /*文字色 濃いグレー*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #3F3C7C;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
    font-size: 22px;
    font-weight: bold;
  }

  .content h3 {
    margin: 0 0 30px 13px;
    border-bottom: solid 4px #D8E072;/*黄緑*/
    position: relative;
    font-size: 20px;
    /* color: #3F3C7C;　文字色ブルー */
    color: #4B4C4C; /*文字色 濃いグレー*/
    font-weight: 700;
  }

  .content h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 4px #E1A7CA;/*pink*/
    bottom: -4px;
    width: 30%;
  }

  .content h4 {
    position: relative;/*相対位置*/
    padding: 0.5em 0.5em 0.5em 2.0em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
    font-size: 19px;
    color: #3F3C7C;　/*文字色ブルー*/
    /* color: black;/*文字色*/
  }

  .content h4:before { font-family: "Font Awesome 5 Free";/*忘れずに*/
    content: "\f138";/*アイコンのユニコード*/
    position: absolute;/*絶対位置*/
    font-size: 1.4em;/*サイズ*/
    left: 0.1em;/*アイコンの位置*/
    top: 0.15em;/*アイコンの位置*/
    color: #E1A7CA; /*アイコン色*/
  }

  .content h5 {
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
    background: #e8edae; /*より薄い黄緑色に変更*/
    border-radius: 15px;
    font-size: 16px; /*fontをpと同じに*/
  }

  .content h5:before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
  }

  .content h5:after {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
  }

  /*記事内ボタン：さるわかくん　https://saruwakakun.com/html-css/reference/buttons　*/
  .btn1 a {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    color: #FFF;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 5px #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    border: dashed 1px #FFF;
    font-size: 1rem;　/*フォント*/
  }

  a.btn-stitch {
    width: 260px; /*ボタンの幅はここで指定*/
  }

  .btn1 {
    margin: 30px 0 60px 0;
    text-align: center;
  }

  .content p .btn-stitch:hover {
    opacity: 0.9;
    transition: .3s;
  }


  .btn-stitch:hover {
    opacity: 0.8;
    transition: .3s;
    border: dotted 1px #FFF;
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

    /****************************************
            関連記事（Relation）寝ログより
  *****************************************/
  #related-entries h3{
    font-size:24px;
    background-color: #f7f7f7;/*追加*/
    border-radius: 5px;
    margin: 75px 0 45px 0;/*追加*/
  }

  #related-entries .related-entry{
    line-height:150%;
    margin-bottom: 27px;
    clear: both;
    border-bottom: 1px solid #e7e7e7;/*追加*/
    height: 180px;/*追加*/
  }

  #related-entries .related-entry-thumb {
    float: left;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  #related-entries .related-entry-content {
    margin-left: 120px;
  }

  .related-entry-title{
      margin-bottom:5px;
  }

  .related-entry-snippet{
    margin:0 0 5px 0;
  }

  .related-entry-read{
    margin:0;
    font-size:12px;
  }

  p.related-entry-read {
    font-size: 13px;
    padding: 0 0 0 10px;
  }

  p.related-entry-read a {
    border-bottom: solid 1px;/*「続きを読む→」の下線 追加*/
  }

  p.related-entry-snippet {/*追加*/
    display: inherit; /*360pxの影響でpが消えないよう追加*/
    font-size: 13.5px;
    padding: 3px 0 3px 10px;
  }

  h4.related-entry-title {
    font-size: 15px;
    background: #eef2c6;
    border-radius: 10px;
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
  }

  h4.related-entry-title a:hover {
    color: #8e8c8c;
    font-weight: 500;
  }

  .related-entries h3 {
    background-color: #f4f4f4;/*追加*/
  }

  h4.related-entry-title:before { /*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
    display: inline-block;
  }

  h4.related-entry-title:after {　/*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
    display: inline-block;
  }
  /*関連記事　ここまで*/

  /*次の記事ー前の記事*/
  .content.prev-next-link {
   display: block;
  }

  .prev-next-link {
   display: block;
   margin: 0 0 25px 0
  }

  .prev-next-link a {
   flex: 1;
  }

  .thumb-wrap {
   display: flex;
  }

   /* Images */
  .thumb-wrap {
   display: flex;
  }

  .thumb-wrap p {
   margin: 0 0 0 16px;
   font-size: 14px;
  }

  .thumb-wrap img {
   width: 80px;
   height: 100%;
  }

  .second-wrap {
    flex-direction: row; /*反転打ち消す*/
  }

  .thumb-wrap.second-wrap p {
    margin: 0 0 0 16px;
    font-size: 14px;
  }

  .prev-next-link a {
  /* border-bottom: 1px #ddd solid; */
  display: block;
  text-decoration: none;
  padding: 21px 30px;
  }

  .prev-next-link a:hover {
   background-color: #f6f6f6;
  }

  .prev-next-link a:first-child {
   border-bottom: dashed 1px lightgray;
  }

  .prev-next-label {
   font-size: .825rem;
   color: #000;
   margin-bottom: 10px;
  }

  p.prev-next-label {
   color: #3F3C7C;
   font-weight: 600;
   font-size: 14px;
   padding-bottom: 15px;
  }

  .next-label {
    text-align: left;
  }
   /*ここまで、次の記事ー前の記事*/

  /*ページネーション*/
  .pagination li.first,
  .pagination li.last {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .pagination li.previous a {
    border-left-width: 1px; }
  /*ここまでページネーション*/

}


@media (min-width: 1024px) {
/*デスクトップ：小 iPad pro*/
  .wrapper {
    width: 1024px;
    /* height: 11780px; */
  }
  /* ヘッダー */
  header {
    width: 1024px;
    height: 160px;
    position: relative;
  }

  /* header a {
    color: #3f3c7c;
  } */

     /*1:タイトル部 */
  .logo-set {
   height: 140px;
   text-align: center;
   padding: 0;
   /* font-family: 'Courgette', cursive;  */
   font-family: 'Julius Sans One', sans-serif;/* https://frontendlifeinde.com/　と同じに　*/
   margin: 25px 0 0 0;
  }

  /* .logo-set a:hover{
   color: #D8E072;
   transition: .4s;
  } */

  .logo-set h1 {
   font-size: 39px;
   font-weight: 700;
   margin: 0 340px;
   padding: 4px;
   color: #3f3c7c; /*題字ブルーにするとなぜかホバーで色変わらず*/
   border-bottom: 1px solid #3f3c7c;
   border-top: 1px solid #3f3c7c;
  }

  .logo-set h1:hover {
    color: #D8E072;
    transition: .5s;
    padding: 0.1em 0;
  }

  .logo-set p {
   margin-top: 12px;
   font-size: 15px;
   /* color: #3f3c7c; */
  }

  .logo-set p:hover {
    color: #D8E072;
    transition: .5s;
  }

  /*2: 右上　SNSボタン,検索マーク */
  .header-menu {
    display: inline;
    position: absolute;
    top: -15px;
    right: 35px;
  }

  .header-menu ul {
    font-size: 19px;
    display: flex;
    margin: 0;
    padding: 0;
  }

  .header-menu a {
    display: block;
    margin-right: 12px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    color: #3F3C7C;
  }

  .header-menu a:hover {
    color: #D8E072; /*カーソル載せるとで黄みどりになる設定*/
  }

  /* nav */
  nav {　　
    width: 1024px;
    height: 50px;color: #335cbb;
    background-color: #3F3C7C;　/* 深いブルー*/
  }

  .menu-item a { /*ホバーしやすく大きくした*/
    width: 93px;
    height: 35px;
    color: white;
    display: inline-block;
  }

  .navi-in a:hover {
    opacity: 0.8;
    margin-top: 1.5px;
    border-top: 1.5px solid #3F3C7C; /*上に青ラインがつく→同色なので下に文字だけ移動して見える*/
    /* background-color: #5753AB;　背景を薄いブルーに */
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .navi-in ul {
    height: 50px;
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    justify-content: center;
  }

  .navi-in li {
    width: 93px;
    height: 20px;
    margin: 15px 30px;
    text-align: center;
    font-size: 15.5px;
  }

  .menu-item {　
    width: 93px;
    height: 20px;
    margin: 15px 30px;
    text-align: center;
    font-size: 15.5px;
  }


  /* メイン */
  main {
    float: left;
  }

  section {
    width: 716px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 35px;
    padding-left: 25px;
  }

  .item a {
    /* display: block; タグチップ横並び*/
    color: white;
  }

  .item a:hover {
    opacity: 0.8;
  }

  /*　 画像と内容のカード　*/
  .item-inner {
    width: 305px;
    max-height: 390px;
    margin: 33px 25px 30px 25px;
    border: solid 0.1px lightgray;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  /*カードの記事画像*/
  .eyecatch {
    min-height: 210px;
    background-position: center;
    background-size: cover;
    border: solid 0.1px lightgray;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  .eyecatch.eye1 img { /*記事ページのアイキャッチと区別*/
    height: 210px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0px; /*投稿ページのアイキャッチと連想しないよう指定*/
  }

  .eyecatch img {
    width: 307px;
    height: 210px;
    object-fit: cover;
  }

  .tag-tips {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .under-title {
    display: flex;
    justify-content: space-between;
  }

  .tip {
    display: flex;
    flex-wrap: wrap;
}

  .tip a {
    width: auto;
    height: 15px;
    margin: 2px 2px 2px 3px;
    padding: 0 7px 0 7px;
    font-size: 11px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px #C0C0C0;
    border-radius: 3px;
    background-color: #C0C0C0;
  }

  .detail {
    height: 125px;
    margin-top: 15px;
    margin-bottom: 0;
    padding: 5px 20px 0 20px;
    overflow: hidden;
    position: relative;
  }

  .category-tip {
    max-width: 110px;
    height: 21px;
    margin: 7px;
    padding: 0 8px 0 8px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px pink;
    border-radius: 10px;
    position: relative;
    top: 0;
    left: 0;
  }

  .category-tip a {
    color: white;
  }

  .detail h3 {
    color: #3F3C7C; /*メインカラー*/
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: 550;
    overflow: hidden;
    height: 55px;
  }

  .item-date {
    width: 181px;
    padding-top: 5px;
    font-size: 12px;
    text-align: right;
  }

  /*ページャー */
   .wp-pagenavi {
     text-align: center;
   }

   .wp-pagenavi span.current {
     font-weight: bold;
     border-radius: 5px;
     border-color: #3F3C7C;
     color: #3F3C7C;
     font-size: 15px;
 }

   .pages {
     border-radius: 3px;
   }

  /* サイドバー */
  .sidebar {
    width: 250px;
    margin-top: 40px;
    margin-right: 25px;
    margin-left: 0px;
    float: right;
  }

  .plofile-wrapper,.side-twitter,.side-instaglam {
    border: solid 0.1px lightgray;
    border: 1px solid #ecf0f1;
    margin: 20px;
    text-align: center;
    height: 500px;
  }

  /*　プロフィール欄　*/
  .plofile-wrapper {
    width: 200px;
    height: 780px;
    padding: 0 20px;
    /* margin-bottom: 60px;
    margin-top: 25px;
    margin-left: 5px;
    margin-right: 5px; */
    margin: 7px 5px 60px 5px;
  }

  .popular-entry {
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .side-twitter,.side-instaglam {
    height: 200px;
  }

  .profile-photo {
    border-radius: 50%;
    padding-left: 40px;
  }

  .my-face {
    width: 120px;
    height: 120px;
    border-radius: 7%;
    text-align: center;
    margin: 15px 70px 15px 0;
  }

  .myjob {
    font-size: 14px;
    margin-top: 15px;
    padding: 0 2px;
    line-height: 1.8;
    text-align: left;
  }

  .my-profile a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .my-profile a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 14.5px;　/*文字少し小さく*/
  }

  /*アメブロへのリンクボタン*/
  .ameblo-rink a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 15px;
    text-decoration: none;
  }

  .ameblo-rink a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 14.5px;　/*文字少し小さく*/
  }

  .profile-sns-menu {
    height: 90px;
    background-color: #e1A7CA;/* pink　*/
  }

  /* aside-SNSボタン */
  .profile-sns {
    color: #fff;
    font-size: 16px;
    height: 20px;
    position: relative;
    bottom: 10px;
  }

  .profile-sns-menu ul {
    display: flex;
    justify-content: center;
    padding: 0 0 8px 14px;
    margin: 0 0;
  }

  .profile-sns-menu a {
    display: block;
    color: #fff;
    margin-right: 15px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    font-size: 21px;
  }

  .profile-sns-menu a:hover {
  　color: #3F3C7C;/*濃いブルー*/
  }

    /* 人気の記事　*/
    #popular-entries {
      width: 285px;
    }

    .popular-entry {
      padding-bottom: 13px;
      border-bottom: 1px solid rgba(0,0,0,.05);
    }

    .popular-entry-content a:hover {
      color: #D8E072;　/*黄みどり*/
    }

    .popular-entry-title  { /*各記事タイトルのグレー下線など*/
      display: inline-block;
      width: 100%;
      padding-top: 13px;
      padding-bottom: 13px;
      border-bottom: 1px solid rgba(0,0,0,.05);
    }

  /* カテゴリー　*/
  .category {
    width: 320px;
    height: 700px;
    margin-top: 20px;
    padding-top: 20px;
  }

  .category-list  {
    height: 300px;
    padding-left: 15px;
  }

  .list-first a {
    display: inline-block;
    margin-top: 10px;
    flex-direction: column;
  }

  .list-first {
    padding-left: 13px;
  }

  li .list-first ul {
    font-size: 15px;
  }

  .list-first ul {
    padding-left: 15px;
  }

  .first-child {
    padding-left: 30px;
  }

  .list-second {
    margin-top: 15px;
    padding-left: 20px;
  }

  .children li {
     margin-left: 0; /*カテゴリー用に変更 */
     list-style: none;
     margin-top: 15px;
   }

  .widget_title{
    margin-top: 55px;
    font-weight: 500;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .cat-item  {
    margin-top: 10px;
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.05); /*カテゴリーのグレー下線*/
  }

  .cat-item a {
    display: inline-block;
    margin: 6px 0;
  }

  .sidebar ul {
    padding-left: 23px;
    font-size: 14px;
  }

  /*アーカイブ　月ごと*/
  #archives-dropdown-2 {
    color: #4B4C4C;
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 235px;
    height: 25px;
    font-size: 14px;
    margin-right: 0px;
    background-color: white;
  }

  /*カテゴリーのデザイン*/
  .children {
   padding-left: 0;
 }

 ul .children li {
   line-height: 1.5;
   /* padding: 0.5em 0; */
   list-style-type: none;
    margin-top: 2px;
    padding: 5px 0 0 0;
 }

  /*　カテゴリーのデザインここまで　*/

  .twitter-wrapper {
    padding-top: 35px;
    /* margin-left: 25px; */
  }

  .twitter-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .instagram-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  /*　検索　*/
 .s {
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 182px;
    height: 22px;
    font-size: 13px;
    margin-right: 0px;
  }

  #searchform {
    margin-left: 5px;
  }

  .screen-reader-text {
    display: none;
  }

  .searchsubmit {
    color: #555555;
    font-size: 14px;
    background: #D8E072;
    border-radius: 6px;
    border: 3px double #fff;
  }

  /*関連記事 プラグイン*/
  ul.related_post {
    text-align: center;
  }

  /*SNSボタンのデザイン https://plusers.net/wordpress_sns_button*/
  .fa-hatena:before {
    font-family: Verdana;
    font-weight: bold;
    content: 'B!';
  }

  .share {
    margin-top: 55px;
    margin-bottom: 50px;
  }

  .share ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .share ul:after {
    display: block;
    clear: both;
    content: '';
  }

  .share li {
    float: left;
    width: 25%;
    margin: 0;
    margin-top: 15px;
  }

  .share li a {
    font-size: 14px;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
  }

  .share li a:hover {
    opacity: .8;
  }

  .share li a:visited {
    color: #fff;
  }

  .tweet a {
    background-color: #55acee;
  }

  .facebook a {
    background-color: #315096;
  }

  .line a {
   background-color: #06c755;
  }

  .hatena a {
    background-color: #008fde;
  }

  .share li span {
    /* display: none; */
    display: initial;
  }

  /*　footer　*/
  footer {
    width: 1024px;
    height: 145px;
    background-color: #D8E072;
    clear: both;
    position: relative;
    top: 21px;
  }

  footer p {
    font-size: 18px;
    padding-top: 80px;
    text-align: center;
    color: gray;
  }


  /*　以下、投稿ページ用　*/

  .eye1 img {　　/* ①　backgroundで画像を最適化 */
    width: 100%;　　/*高さと幅の指定は必須*/
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .eye1 img { /* 縦横比をあわせてサイズが変更されるように調整 */
      height: 12vw;
  }

  .eye1 img { /* ②　object-fitを使ってimgタグの画像を最適化 https://plusers.net/wordpress_img_responsive*/
    height: 325px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 40px;
  }

  .content {　/*投稿記事の枠*/
    float: left;
    width: 580px;
    padding: 0 40px 30px 40px;
    margin: 70px 30px 70px 50px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.18);
  }

  .content .category-tip {
    margin-top: 0;
  }

  .content .title-nonstyle { /*投稿記事のタイトル用h２ */
    font-size: 28px;
    font-weight: 300;
    margin: 25px 0 25px 0;
    border-bottom: none;
    color: #4B4C4C;
  }

  .content .title-nonstyle:after{ /*.content h2:afterの打ち消し*/
    position: static;
    content: " ";
    display: inline;
    border-bottom: none;
    bottom: 0;
    width: 0;
  }

  /*日付関連*/

  .content_date_items {
    display: flex;
    justify-content: flex-end;
  }

  .content_date_items { /*記事カードの日付と区別*/
    padding-top: 0px;
    font-size: 14px;
    color: #777777; /*#555555の薄い色*/
  }

　.update_post_day { /*リライト日*/
    font-size: 13px;
    color: #777777;
  }

  .content p {
    font-size: 16px;
    padding-bottom: 2rem;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    line-height: 1.8em;
        /* font-size: 1em; */
  }

  /* 記事内アンカータグの設定 */
  .content p a {
    color: #007BBB; /* 通常リンクのブルー*/
    /* color: #3F3C7C; 深いブルー　 */
    text-decoration-color: #007BBB;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .content p a:visited {
    color: #007BBB; /* 同色のまま　*/
  }

  .content p a:hover {
    color: #D8E072; /*きみどり*/
    font-weight: 500;
    text-decoration: underline;
  }

  .alignnone { /*　記事内の画像設定〜縦長と横長に対応　*/
    max-width: 100%;
    height: auto;
    /* min-height: 420px;
    width: auto; */
  }

  /*見出しのデザイン*/

  .content h2 {
    margin: 30px 0 30px 0;
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    /* color: #3F3C7C;　濃いブルー*/
    color: #4B4C4C; /*文字色 濃いグレー*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #3F3C7C;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
    font-size: 24px;
    font-weight: bold;
  }

  .content h3 {
    margin: 0 0 35px 13px;
    border-bottom: solid 4px #D8E072;/*黄緑*/
    position: relative;
    font-size: 21px;
    /* color: #3F3C7C;　文字色ブルー */
    color: #4B4C4C; /*文字色 濃いグレー*/
    font-weight: 700;
  }

  .content h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 4px #E1A7CA;/*pink*/
    bottom: -4px;
    width: 30%;
  }

  .content h4 {
    position: relative;/*相対位置*/
    padding: 0.5em 0.5em 0.5em 2.0em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
    font-size: 20px;
    color: #3F3C7C;　/*文字色ブルー*/
    /* color: black;/*文字色*/
  }

  .content h4:before { font-family: "Font Awesome 5 Free";/*忘れずに*/
    content: "\f138";/*アイコンのユニコード*/
    position: absolute;/*絶対位置*/
    font-size: 1.4em;/*サイズ*/
    left: 0.1em;/*アイコンの位置*/
    top: 0.15em;/*アイコンの位置*/
    color: #E1A7CA; /*アイコン色*/
  }

  .content h5 {
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
    background: #e8edae; /*より薄い黄緑色に変更*/
    border-radius: 15px;
    font-size: 18px; /*fontをpと同じに*/
  }

  .content h5:before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
  }

  .content h5:after {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
  }

  /*記事内ボタン：さるわかくん　https://saruwakakun.com/html-css/reference/buttons　*/
  .btn1 a {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    color: #FFF;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 5px #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    border: dashed 1px #FFF;
    font-size: 1.2rem;　/*フォント大きく*/
  }

  a.btn-stitch {
    width: 350px; /*ボタンの幅はここで指定*/
  }

  .btn1 {
    margin: 30px 0 60px 0;
    text-align: center;
  }

  .content p .btn-stitch:hover {
    opacity: 0.9;
    transition: .3s;
  }


  .btn-stitch:hover {
    opacity: 0.8;
    transition: .3s;
    border: dotted 1px #FFF;
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

    /****************************************
            関連記事（Relation）寝ログより
  *****************************************/
  #related-entries h3{
    font-size:24px;
    background-color: #f7f7f7;/*追加*/
    border-radius: 5px;
    margin: 75px 0 45px 0;/*追加*/
  }

  #related-entries .related-entry{
    line-height:150%;
    margin-bottom: 27px;
    clear: both;
    border-bottom: 1px solid #e7e7e7;/*追加*/
    height: 160px;/*追加*/
  }

  #related-entries .related-entry-thumb {
    float: left;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  #related-entries .related-entry-content {
    margin-left: 120px;
  }

  .related-entry-title{
      margin-bottom:5px;
  }

  .related-entry-snippet{
    margin:0 0 5px 0;
  }

  .related-entry-read{
    margin:0;
    font-size:12px;
  }

  p.related-entry-read {
    font-size: 13px;
    padding: 0 0 0 10px;
  }

  p.related-entry-read a {
    border-bottom: solid 1px;/*「続きを読む→」の下線 追加*/
  }

  p.related-entry-snippet {/*追加*/
    display: inherit; /*360pxの影響でpが消えないよう追加*/
    font-size: 13.5px;
    padding: 3px 0 3px 10px;
  }

  h4.related-entry-title {
    font-size: 15px;
    background: #eef2c6;
    border-radius: 10px;
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
  }

  h4.related-entry-title a:hover {
    color: #8e8c8c;
    font-weight: 500;
  }

  .related-entries h3 {
    background-color: #f4f4f4;/*追加*/
  }

  h4.related-entry-title:before { /*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
    display: inline-block;
  }

  h4.related-entry-title:after {　/*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
    display: inline-block;
  }
  /*関連記事　ここまで*/

  /*次の記事ー前の記事*/
  .content.prev-next-link {
   display: flex;
  }

  .prev-next-link {
   display: flex;
   margin: 0 0 25px 0
  }

  .prev-next-link a {
   flex: 1;
  }

  .thumb-wrap {
   display: flex;
  }

   /* Images */
  .thumb-wrap {
   display: flex;
  }

  .thumb-wrap p {
   margin: 0 0 0 16px;
   font-size: 14px;
  }
  .thumb-wrap img {
   width: 80px;
   height: 100%;
  }

  .second-wrap {
    flex-direction: row-reverse; /*NEXTは反転させる*/
  }

  .thumb-wrap.second-wrap p {
    margin: 0 16px 0 0;
  }

  .prev-next-link a {
  /* border-bottom: 1px #ddd solid; */
  display: block;
  text-decoration: none;
  padding: 14px 40px;
  }

  .prev-next-link a:hover {
   background-color: #f6f6f6;
  }

  .prev-next-link a:first-child {
   border-bottom: none;
  }

  .prev-next-label {
   font-size: .825rem;
   color: #000;
   margin-bottom: 10px;
  }

  p.prev-next-label {
   color: #3F3C7C;
   font-weight: 600;
   font-size: 14px;
   padding-bottom: 32px;
  }

  .next-label {
    text-align: right;
  }
   /*ここまで、次の記事ー前の記事*/

   /*ページネーション*/
   .pagination li.first,.pagination li.last,.pagination li {
     position: static;
   }

}


@media (min-width: 1280px) {
/*デスクトップ：中*/
  .wrapper {
    width: 1280px;
    /* height: 11618px; */
  }
 /* ヘッダー */
  header {
    width: 1280px;
    height: 195px;
    position: relative;
  }

  /* header a {
    color: #3f3c7c;
  } */

     /*1:タイトル部 */
  .logo-set {
    height: 140px;
    text-align: center;
    padding: 0;
    /* font-family: 'Courgette', cursive;  */
    font-family: 'Julius Sans One', sans-serif;/* https://frontendlifeinde.com/　と同じに　*/
    margin: 35px 0 0 0;
  }

  /* .logo-set a:hover{
    color: #D8E072;
    transition: .4s;
  } */

  .logo-set h1 {
    font-size: 47px;
    font-weight: 700;
    margin: 0 420px;
    padding: 4px;
    color: #3f3c7c; /*題字ブルーにするとなぜかホバーで色変わらず*/
    border-bottom: 1px solid #3f3c7c;
    border-top: 1px solid #3f3c7c;
  }

  .logo-set h1:hover {
    color: #D8E072;
    transition: .5s;
    padding: 0.1em 0;
  }

  .logo-set p {
    margin-top: 13px;
    font-size: 18px;
    /* color: #3f3c7c; */
  }

  .logo-set p:hover {
    color: #D8E072;
    transition: .5s;
  }

  /*2: 右上　SNSボタン,検索マーク */
  .header-menu {
    display: inline;
    position: absolute;
    top: -20px;
    right: 50px;
  }

  .header-menu ul {
    font-size: 19px;
    display: flex;
    margin: 0;
    padding: 0;
  }

  .header-menu a {
    display: block;
    margin-right: 12px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    color: #3F3C7C;
  }

  .header-menu a:hover {
    color: #D8E072; /*カーソル載せるとで黄みどりになる設定*/
  }

  /* nav */
  nav {　　
  width: 1280px;
  height: 50px;color: #335cbb;
  background-color: #3F3C7C;　/* 深いブルー*/
  }

  .menu-item a { /*ホバーしやすく大きくした*/
    width: 93px;
    height: 35px;
    color: white;
    display: inline-block;
  }

  .navi-in a:hover {
    opacity: 0.8;
    margin-top: 1.5px;
    border-top: 1.5px solid #3F3C7C; /*上に青ラインがつく→同色なので下に文字だけ移動して見える*/
    /* background-color: #5753AB;　背景を薄いブルーに */
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .navi-in ul {
    height: 50px;
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    justify-content: center;
  }

  .navi-in li {
    width: 93px;
    height: 20px;
    margin: 15px 30px;
    text-align: center;
    font-size: 15.5px;
}

  .menu-item {　
    width: 93px;
    height: 20px;
    margin: 15px 30px;
    text-align: center;
    font-size: 15.5px;
  }


  /* メイン */
  main {
    float: left;
  }

  section {
    width: 880px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 35px;
    padding-left: 75px;
  }

  .item a {
    /* display: block; タグチップ横並び*/
    color: white;
  }

  .item a:hover {
    opacity: 0.8;/*カードのホバー時の薄*/
  }

  /*　 画像と内容のカード　*/
  .item-inner {
    width: 386px;
    max-height: 420px;
    margin: 33px 25px 30px 25px;
    border: solid 0.1px lightgray;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  /*カードの記事画像*/
  .eyecatch {
    min-height: 240px;
    background-position: center;
    background-size: cover;
    border: solid 0.1px lightgray;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  .eyecatch.eye1 img { /*記事ページのアイキャッチと区別*/
    height: 240px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0px; /*投稿ページのアイキャッチと連想しないよう指定*/
  }

  .eyecatch img {
    width: 385px;
    height: 240px;
    object-fit: cover;
  }

  .tag-tips {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .under-title {
    display: flex;
    justify-content: space-between;
  }

  .tip {
    display: flex;
    flex-wrap: wrap;
  }

  .tip a {
    width: auto;
    height: 18px;
    margin: 2px 2px 2px 3px;
    padding: 0 7px 0 7px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px #C0C0C0;
    border-radius: 3px;
    background-color: #C0C0C0;
  }

  .detail {
    height: 128px;
    margin-top: 15px;
    margin-bottom: 0;
    padding: 5px 20px 0 20px;
    overflow: hidden;
    position: relative;
  }

  .category-tip {
    max-width: 110px;
    height: 21px;
    margin: 10px;
    padding: 0 8px 0 8px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px pink;
    border-radius: 10px;
    position: relative;
    top: 0;
    left: 0;
  }

  .category-tip a {
    color: white;
  }

  .detail h3 {
    color: #3F3C7C; /*メインカラー*/
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: 550;
    overflow: hidden;
    height: 55px;
  }

  .item-date {
    width: 181px;
    padding-top: 5px;
    font-size: 12px;
    text-align: right;
  }

  /*ページャー */
   .wp-pagenavi {
     text-align: center;
   }

   .wp-pagenavi span.current {
     font-weight: bold;
     border-radius: 5px;
     border-color: #3F3C7C;
     color: #3F3C7C;
     font-size: 15px;
  }

   .pages {
     border-radius: 3px;
   }

  /* サイドバー */
  .sidebar {
    width: 268px;
    margin-top: 5px;
    margin-right: 45px;
    margin-left: 10px;
    float: right;
  }

  .plofile-wrapper,.side-twitter,.side-instaglam {
    border: solid 0.1px lightgray;
    border: 1px solid #ecf0f1;
    margin: 20px;
    text-align: center;
    height: 500px;
  }

  /*　プロフィール欄　*/
  .plofile-wrapper {
    width: 215px;
    height: 785px;
    padding: 0 20px;
    margin: 45px 5px 60px 5px;
  }

  .side-twitter,.side-instaglam {
    height: 200px;
  }

  .profile-photo {
    border-radius: 50%;
    padding-left: 45px;
  }

  .my-face {
    width: 120px;
    height: 120px;
    border-radius: 7%;
    text-align: center;
    margin: 15px 70px 15px 0;
  }

  .myjob {
    font-size: 14px;
    margin-top: 15px;
    line-height: 1.8;
    padding: 0 3px 0 10px;
    text-align: left;
  }

  .my-profile a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 16px;
    text-decoration: none;
  }

  .my-profile a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 15.5px;　/*文字少し小さく*/
  }

  /*アメブロへのリンクボタン*/
  .ameblo-rink a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 16px;
    text-decoration: none;
  }

  .ameblo-rink a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 15.5px;　/*文字少し小さく*/
  }

  .profile-sns-menu {
    height: 90px;
    background-color: #e1A7CA;/* pink　*/
  }

  /* aside-SNSボタン */
  .profile-sns {
    color: #fff;
    font-size: 17px;
    height: 20px;
    position: relative;
    bottom: 9px;
  }

  .profile-sns-menu ul {
    display: flex;
    justify-content: center;
    padding: 0 0 8px 14px;
    margin: 0 0;
  }

  .profile-sns-menu a {
    display: block;
    color: #fff;
    margin-right: 15px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    font-size: 21px;
  }

  .profile-sns-menu a:hover {
  　color: #3F3C7C;　/*濃いブルー*/
  }

  /* 人気の記事　*/
  #popular-entries {
    width: 285px;
  }

  .popular-entry {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .popular-entry-content a:hover {
    color: #D8E072;　/*黄みどり*/
  }

  .popular-entry-title  { /*各記事タイトルのグレー下線など*/
    display: inline-block;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  /* カテゴリー　*/
  .category {
    width: 320px;
    height: 700px;
    margin-top: 20px;
    padding-top: 20px;
  }

  .category-list  {
    height: 300px;
    padding-left: 15px;
  }

  .list-first a {
    display: inline-block;
    margin-top: 10px;
    flex-direction: column;
  }

  .list-first {
    padding-left: 13px;
  }

  li .list-first ul {
    font-size: 15px;
  }

  .list-first ul {
    padding-left: 15px;
  }

  .first-child {
    padding-left: 30px;
  }

  .list-second {
    margin-top: 15px;
    padding-left: 20px;
  }

  .children li {
     margin-left: 0; /*カテゴリー用に変更 */
     list-style: none;
     margin-top: 15px;
   }

  .widget_title{
    margin-top: 60px;
    font-weight: 500;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .cat-item  {
    margin-top: 9px;
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.05); /*カテゴリーのグレー下線*/
  }

  .cat-item a {
    display: inline-block;
    margin: 8px 0;
  }

  /*アーカイブ　月ごと*/
    #archives-dropdown-2 {
      color: #4B4C4C;
      border-radius: 6px;
      border: 1px solid #ddd;
      width: 240px;
      height: 25px;
      font-size: 14px;
      margin-right: 0px;
      background-color: white;
    }

  /*カテゴリーのデザイン*/
  .children {
   padding-left: 0;
 }

 ul .children li {
   line-height: 1.5;
   /* padding: 0.5em 0; */
   list-style-type: none;/*!importantは削除、ポチ消す*/
   margin-top: 2px;
   padding: 5px 0 0 0;
 }

  .sidebar ul {
    padding-left: 23px;
    font-size: 15px;
  }

  /*　カテゴリーのデザインここまで　*/

  .twitter-wrapper {
    padding-top: 35px;
    /* margin-left: 25px; */
  }

  .twitter-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .instagram-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  /*　検索　*/
 .s {
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 200px;
    height: 25px;
    font-size: 14px;
    margin-right: 0px;
  }

  #searchform {
    margin-left: 10px;
  }

  .screen-reader-text {
    display: none;
  }

  .searchsubmit {
    color: #555555;
    font-size: 14px;
    background: #D8E072;
    border-radius: 6px;
    border: 3px double #fff;
  }

  /*関連記事 プラグイン*/
  ul.related_post {
    text-align: center;
  }

  /*SNSボタンのデザイン https://plusers.net/wordpress_sns_button*/
  .fa-hatena:before {
    font-family: Verdana;
    font-weight: bold;
    content: 'B!';
  }

  .share {
    margin-top: 55px;
    margin-bottom: 50px;
  }

  .share ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .share ul:after {
    display: block;
    clear: both;
    content: '';
  }

  .share li {
    float: left;
    width: 25%;
    margin: 0;
    margin-top: 15px;
  }

  .share li a {
    font-size: 14px;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
  }

  .share li a:hover {
    opacity: .8;
  }

  .share li a:visited {
    color: #fff;
  }

  .tweet a {
    background-color: #55acee;
  }

  .facebook a {
    background-color: #315096;
  }

  .line a {
   background-color: #06c755;
  }

  .hatena a {
    background-color: #008fde;
  }

  .share li span {
    /* display: none; */
    display: initial;
  }

  /*　footer　*/
  footer {
    width: 1280px;
    height: 145px;
    background-color: #D8E072;
    clear: both;
    position: relative;
    top: 21px;
  }

  footer p {
    font-size: 18px;
    padding-top: 75px;
    text-align: center;
    color: gray;
  }

  /*　以下、投稿ページ用　*/

  .eye1 img {　　/* ①　backgroundで画像を最適化 */
    width: 100%;　　/*高さと幅の指定は必須*/
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .eye1 img { /* 縦横比をあわせてサイズが変更されるように調整 */
      height: 12vw;
  }

  .eye1 img { /* ②　object-fitを使ってimgタグの画像を最適化 https://plusers.net/wordpress_img_responsive*/
    height: 400px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 40px;
  }

  .content {　/*投稿記事の枠*/
    float: left;
    width: 700px;
    padding: 0 65px 30px 65px;
    margin: 70px 30px 70px 80px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.18);
  }

  .content .category-tip {
    margin-top: 0;
  }

  .content .title-nonstyle { /*投稿記事のタイトル用h２ */
    font-size: 28px;
    font-weight: 300;
    margin: 25px 0 25px 0;
    border-bottom: none;
    color: #4B4C4C;
  }

  .content .title-nonstyle:after{ /*.content h2:afterの打ち消し*/
    position: static;
    content: " ";
    display: inline;
    border-bottom: none;
    bottom: 0;
    width: 0;
  }

  /*日付関連*/

  .content_date_items {
    display: flex;
    justify-content: flex-end;
  }

  .content_date_items { /*記事カードの日付と区別*/
    padding-top: 0px;
    font-size: 15px;
    color: #777777; /*#555555の薄い色*/
  }

　.update_post_day { /*リライト日*/
    font-size: 13px;
    color: #777777;
  }

  .content p {
    font-size: 16px;
    padding-bottom: 2rem;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    line-height: 1.8em;
        /* font-size: 1em; */
  }

  /* 記事内アンカータグの設定 */
  .content p a {
    color: #007BBB; /* 通常リンクのブルー*/
    /* color: #3F3C7C; 深いブルー　 */
    text-decoration-color: #007BBB;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .content p a:visited {
    color: #007BBB; /* 同色のまま　*/
  }

  .content p a:hover {
    color: #D8E072; /*きみどり*/
    font-weight: 500;
    text-decoration: underline;
  }

  .alignnone { /*　記事内の画像設定〜縦長と横長に対応　*/
    max-width: 100%;
    height: auto;
    /* min-height: 450px;
    width: auto; */
  }

  /*見出しのデザイン*/
  .content h2 {
    margin: 35px 0 35px 0;
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    /* color: #3F3C7C;　濃いブルー*/
    color: #4B4C4C; /*文字色 濃いグレー*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #3F3C7C;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
    font-size: 26px;
    font-weight: bold;
  }

  .content h3 {
    margin: 0 0 35px 13px;
    border-bottom: solid 4px #D8E072;/*黄緑*/
    position: relative;
    font-size: 21px;
    /* color: #3F3C7C;　文字色ブルー */
    color: #4B4C4C; /*文字色 濃いグレー*/
    font-weight: 700;
  }

  .content h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 4px #E1A7CA;/*pink*/
    bottom: -4px;
    width: 30%;
  }

  .content h4 {
    position: relative;/*相対位置*/
    padding: 0.5em 0.5em 0.5em 2.0em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
    font-size: 20px;
    color: #3F3C7C;　/*文字色ブルー*/
    /* color: black;/*文字色*/
  }

  .content h4:before { font-family: "Font Awesome 5 Free";/*忘れずに*/
    content: "\f138";/*アイコンのユニコード*/
    position: absolute;/*絶対位置*/
    font-size: 1.4em;/*サイズ*/
    left: 0.1em;/*アイコンの位置*/
    top: 0.15em;/*アイコンの位置*/
    color: #E1A7CA; /*アイコン色*/
  }

  .content h5 {
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
    background: #e8edae; /*より薄い黄緑色に変更*/
    border-radius: 15px;
    font-size: 18px; /*fontをpと同じに*/
  }

  .content h5:before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
  }

  .content h5:after {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
  }

  /*記事内ボタン：さるわかくん　https://saruwakakun.com/html-css/reference/buttons　*/
  .btn1 a {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    color: #FFF;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 5px #534fa4;/*メインカラー#3F3C7Cを薄くした色*/
    border: dashed 1px #FFF;
    font-size: 1.2rem;　/*フォント大きく*/
  }

  a.btn-stitch {
    width: 380px; /*ボタンの幅はここで指定*/
  }

  .btn1 {
    margin: 45px 0 55px 0;
    text-align: center;
  }

  .content p .btn-stitch:hover {
    opacity: 0.9;
    transition: .3s;
  }


  .btn-stitch:hover {
    opacity: 0.8;
    transition: .3s;
    border: dotted 1px #FFF;
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

    /****************************************
            関連記事（Relation）寝ログより
  *****************************************/
  #related-entries h3{
    font-size:24px;
    background-color: #f7f7f7;/*追加*/
    border-radius: 5px;
    margin: 75px 0 45px 0;/*追加*/
  }

  #related-entries .related-entry{
    line-height:150%;
    margin-bottom: 30px;
    clear: both;
    border-bottom: 1px solid #e7e7e7;/*追加*/
    height: 155px;/*追加*/
  }

  #related-entries .related-entry-thumb {
    float: left;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  #related-entries .related-entry-content {
    margin-left: 120px;
  }

  .related-entry-title{
      margin-bottom:5px;
  }

  .related-entry-snippet{
    margin:0 0 5px 0;
  }

  .related-entry-read{
    margin:0;
    font-size:12px;
  }

  p.related-entry-read {
    font-size: 14px;
    padding: 0 0 0 10px;
  }

  p.related-entry-read a {
    border-bottom: solid 1px;/*「続きを読む→」の下線 追加*/
  }

  p.related-entry-snippet {/*追加*/
    display: inherit; /*360pxの影響でpが消えないよう追加*/
    font-size: 14px;
    padding: 10px 0 3px 10px;
  }

  h4.related-entry-title {
    font-size: 17.5px;
    background: #eef2c6;
    border-radius: 10px;
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
  }

  h4.related-entry-title a:hover {
    color: #8e8c8c;
    font-weight: 500;
  }

  .related-entries h3 {
    background-color: #f4f4f4;/*追加*/
  }

  h4.related-entry-title:before { /*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
    display: inline-block;
  }

  h4.related-entry-title:after {　/*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
    display: inline-block;
  }
  /*関連記事　ここまで*/

  /*次の記事ー前の記事*/
  .content.prev-next-link {
   display: flex;
  }

  .prev-next-link {
   display: flex;
   margin: 0 0 25px 0
  }

  .prev-next-link a {
   flex: 1;
  }

  .thumb-wrap {
   display: flex;
  }

   /* Images */
  .thumb-wrap {
   display: flex;
  }

  .thumb-wrap p {
   margin: 0 0 0 16px;
   font-size: 15px;
  }

  .thumb-wrap img {
   width: 80px;
   height: 100%;
  }

  .second-wrap {
    flex-direction: row-reverse; /*NEXTは反転させる*/
  }

  .thumb-wrap.second-wrap p {
    margin: 0 16px 0 0;
  }

  .prev-next-link a {
  /* border-bottom: 1px #ddd solid; */
  display: block;
  text-decoration: none;
  padding: 14px 40px;
  }

  .prev-next-link a:hover {
   background-color: #f6f6f6;
  }

  .prev-next-link a:first-child {
   border-bottom: none;
  }

  .prev-next-label {
   font-size: .825rem;
   color: #000;
   margin-bottom: 10px;
  }

  p.prev-next-label {
   color: #3F3C7C;
   font-weight: 600;
   font-size: 16px;
   padding-bottom: 32px;
  }

  .next-label {
    text-align: right;
  }
   /*ここまで、次の記事ー前の記事*/

   /*ページネーション*/
   .pagination li.first,.pagination li.last,.pagination li {
     position: static;
   }

}


@media (min-width: 1440px) {
/*デスクトップ：大*/
  .wrapper {
    width: 1440px;
    /* height: auto; */
    /* height: 11819px; */
    /* height: 8695.270px; */
  }
  /* ヘッダー */
  header {
    width: 1440px;
    height: 195px;
    position: relative;
  }

  /* header a {
    color: #3f3c7c;
  } */

     /*1:タイトル部 */
  .logo-set {
    height: 140px;
    text-align: center;
    padding: 0;
    /* font-family: 'Courgette', cursive;  */
    font-family: 'Julius Sans One', sans-serif;/* https://frontendlifeinde.com/　と同じに　*/
    margin: 30px 0 0 0;
  }

  /* .logo-set a:hover{
    color: #D8E072;
    transition: .4s;
  } */

  .logo-set h1 {
    font-size: 52px;
    font-weight: 700;
    margin: 0 480px;
    padding: 4px;
    color: #3f3c7c;
    border-bottom: 1px solid #3f3c7c;
    border-top: 1px solid #3f3c7c;
  }

  .logo-set h1:hover {
    color: #D8E072;
    transition: .5s;
    padding: 0.1em 0;
  }

  .logo-set p {
    margin-top: 13px;
    font-size: 18px;
    /* color: #3f3c7c; */
  }

  .logo-set p:hover {
    color: #D8E072;
    transition: .5s;
  }

  /*2: 右上　SNSボタン,検索マーク */
  .header-menu {
    display: inline;
    position: absolute;
    top: -25px;
    right: 40px;
  }

  .header-menu ul {
    font-size: 19px;
    display: flex;
    margin: 0;
    padding: 0;
  }

  .header-menu a {
    display: block;
    margin-right: 12px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    color: #3F3C7C;
    /* color: #5e5c5c; グレー*/
  }

  .header-menu a:hover {
    color: #D8E072; /*カーソル載せるとで黄みどりになる設定*/
    /* transition: .3s; */
  }

  /* nav */
  nav {　　
    width: 1440px;
    height: 50px;color: #335cbb;
    background-color: #3F3C7C;　/* 深いブルー*/
  }

  .menu-item a { /*ホバーしやすく大きくした*/
    width: 93px;
    height: 35px;
    color: white;
    display: inline-block;
  }

    /*  旧デザイン　
  .navi-in a:hover {
    opacity: 0.8;
　/* background-color: #5753AB;　背景を薄いブルーに */

  .navi-in a:hover {
    opacity: 0.8;
    margin-top: 1.5px;
    border-top: 1.5px solid #3F3C7C; /*上に青ラインがつく→同色なので下に文字だけ移動して見える*/
    /* background-color: #5753AB;　背景を薄いブルーに */
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .navi-in ul {
    height: 50px;
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    justify-content: center;
  }

  .menu-item {　
    width: 93px;
    height: 20px;
    margin: 15px 30px;
    text-align: center;
    font-size: 15.5px;
  }

  /* メイン */
  main {
    float: left;
  }

  article {
    float: left;
    width: 800px;
    padding: 30px;
    margin: 60px 30px 0 120px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.18);
  }


  section {
    width: 975px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 35px;
    padding-left: 70px;
  }

  .item a {
    /* display: block; タグチップ横並び*/
    color: white;
  }

  .item a:hover {
    opacity: 0.8;
  }

  /*　 画像と内容のカード　*/
  .item-inner {
    width: 434px;
    max-height: 440px;
    margin: 33px 25px 30px 25px;
    border: solid 0.1px lightgray;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  /*カードの記事画像*/
  .eyecatch {
    min-height: 250px;
    background-position: center;
    background-size: cover;
    border: solid 0.1px lightgray;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }

  .eyecatch.eye1 img { /*記事ページのアイキャッチと区別*/
    height: 250px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 0px; /*投稿ページのアイキャッチと連想しないよう指定*/
  }

  /* .eyecatch img {
    width: 435px;
    height: 250px;
    object-fit: cover;
  } */

  .eyecatch img:hover {  /*アイキャッチにhoverすると透過させる*/
    opacity: 0.8;
    transition: .3s;
  }

  .tag-tips a {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .under-title {
    display: flex;
    justify-content: space-between;
  }

  .tip {
    display: flex;
    flex-wrap: wrap;
  }

  .tip a {
    width: auto;
    height: 20px;
    margin: 2px 2px 2px 3px;
    padding: 0 7px 0 7px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px #C0C0C0;
    border-radius: 3px;
    background-color: #C0C0C0;
  }

  .detail {
    height: 115px;
    margin-top: -10px;
    margin-bottom: 0;
    padding: 25px 20px 0 20px;
    overflow: hidden;
    position: relative;
  }

  .category-tip {
    max-width: 110px;
    height: 21px;
    margin: 10px;
    padding: 0 8px 0 8px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background-color: #e1A7CA;
    border: solid  0.1px pink;
    border-radius: 10px;
    position: relative;
    top: 0;
    left: -2px;
  }

  .category-tip a {
    color: white;
  }

  .detail h3.title { /*投稿ページのh３と区別*/
    color: #3F3C7C; /*メインカラー*/
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: 550;
    overflow: hidden;
    height: 55px;
  }

  .detail h3.title:hover {
    opacity: 0.8;
 }

  .item-date {
    width: 181px;
    padding-top: 5px;
    font-size: 12px;
    text-align: right;
  }

 /*ページャー */
  /* .wp-pagenavi {
    text-align: center;
  }

  .wp-pagenavi span.current {
    font-weight: bold;
    border-radius: 5px;
    border-color: #3F3C7C;
    color: #3F3C7C;
    font-size: 15px;
}

  .pages {
    border-radius: 3px;
  } */

  /* サイドバー */
  .sidebar {
    width: 315px;
    margin-top: 5px;
    margin-right: 60px;
    margin-left: 20px;
    float: right;
  }

  .plofile-wrapper,.side-twitter,.side-instaglam {
    border: solid 0.1px lightgray;
    border: 1px solid #ecf0f1;
    margin: 20px;
    text-align: center;
    height: 500px;
  }

  /*　プロフィール欄　*/
  .plofile-wrapper {
    width: 265px;
    height: 810px;
    padding: 0 20px;
    margin: 45px 5px 60px 5px;
  }

  .side-twitter,.side-instaglam {
    height: 200px;
  }

  .profile-photo {
    border-radius: 50%;
    padding-left: 70px;
  }

  .my-face { /* プロフィール写真 */
    width: 120px;
    height: 120px;
    border-radius: 7%;
    text-align: center;
    margin: 15px 70px 15px 0;
  }

  .myjob {
    font-size: 15px;
    margin-top: 15px;
    line-height: 1.8;
    padding: 0 10px 0 25px;
    text-align: left;
  }

  .my-profile a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 16px;
    text-decoration: none;
  }

  .my-profile a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 15.5px;　/*文字少し小さく*/
  }

/*アメブロへのリンクボタン*/
  .ameblo-rink a {
    display: inline-block;
    margin-bottom: 20px;
    padding: 3px 13px;
    border: 3px double #fff;
    border-radius: 15px;
    background-color: #d8e072; /* 黄みどり色*/
    font-size: 16px;
    text-decoration: none;
  }

  .ameblo-rink a:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2),rgba(255, 255, 255, 0.2));
    color: #414242; /*文字色グレー*/
    background-color: : #eef2c6;/*背景を明るくする*/
    font-size: 15.5px;　/*文字少し小さく*/
  }

  .profile-sns-menu {
    height: 95px;
    background-color: #e1A7CA;/* pink　*/
  }

  /* aside-SNSボタン */
  .profile-sns {
    color: #fff;
    font-size: 18px;
    height: 20px;
    position: relative;
    bottom: 10px;
  }

  .profile-sns-menu ul {
    display: flex;
    justify-content: center;
    padding: 0 0 8px 14px;
    margin: 0 0;
  }

  .profile-sns-menu a {
    display: block;
    color: #fff;
    margin-right: 15px;
    border: solid 1px currentColor;
    border-radius: 50%;
    text-align: center;
    width: 1.5em;
    font-size: 21px;
  }

  .profile-sns-menu a:hover {
  　color: #3F3C7C;/*濃いブルー*/
  }

  /* 人気の記事　*/
  #popular-entries {
    width: 320px;
  }

  .popular-entry {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .popular-entry-content a:hover {
    color: #D8E072;　/*黄みどり*/
  }

  .popular-entry-title  { /*各記事タイトルのグレー下線など*/
    display: inline-block;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }

  .sidekiji ul {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  /* カテゴリー　*/
  .category {
    width: 320px;
    height: 700px;
    margin-top: 20px;
    padding-top: 20px;
  }

  .category-list  {
    height: 300px;
    padding-left: 15px;
  }

  .list-first a {
    display: inline-block;
    margin-top: 10px;
    flex-direction: column;
  }

  .list-first {
    padding-left: 13px;
  }

  li .list-first ul {
    font-size: 15px;
  }

  .list-first ul {
    padding-left: 15px;
  }

  .first-child {
    padding-left: 30px;
  }

  .list-second {
    margin-top: 15px;
    padding-left: 20px;
  }

 .children li {
    margin-left: 0; /*カテゴリー用に変更 */
    list-style: none;
    margin-top: 15px;
  }

  .widget_title {　/*サイドバーの各タイトル*/
    font-weight: 500;
    margin-top: 50px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .children li {
    /* list-style: circle; */
  }

  .cat-item  {
    margin-top: 10px;
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.05); /*カテゴリーのグレー下線*/
  }

  .cat-item a {
    display: inline-block;
    margin: 10px 0;
  }

/*アーカイブ　月ごと*/
  #archives-dropdown-2 {
    width: 240px;
    height: 25px;
    font-size: 14px;
    color: #4B4C4C;
  }

  /*アーカイブ　月ごと*/
  #archives-dropdown-2 {
    color: #4B4C4C;
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 240px;
    height: 25px;
    font-size: 14px;
    margin-right: 0px;
    background-color: white;
  }

  /*カテゴリーのデザイン*/
  .children {
   padding-left: 0;
 }

 ul .children li {
   line-height: 1.5;
   /* padding: 0.5em 0; */
   list-style-type: none;/*!importantは削除、ポチ消す*/
   margin-top: 3px;
   padding: 5px 0 0 0;
 }

 /* 以下、フォントファミリーで上手くいかなかった*/
  /* ul .children li:before { /*疑似要素*/
     /* font-family: "Font Awesome 5 Free";
     content: "\f105";
     position: absolute; */
     /* left : 1em; /*左端からのアイコンまで: */
     /* color: #E1A7CA;
     margin: 7px; */
   /* } */

  .sidebar ul {
    padding-left: 23px;
    font-size: 15px;
  }

  /*　カテゴリーのデザインここまで　*/

  .twitter-wrapper {
    padding-top: 35px;
    /* margin-left: 25px; */
  }

  .twitter-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .instagram-wrapper h2{
    font-weight: 500;
    width: 320px;
    padding-left: 10px;
    border-bottom: 3px double #3F3C7C;
  }

  .screen-reader-text {
    font-size: 14px;
  }

  /*　検索　*/
 .s {
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 240px;
    height: 25px;
    font-size: 14px;
    margin-right: 0px;
  }

  #searchform {
    margin-left: 10px;
  }

  .screen-reader-text {
    display: none;
  }

  .searchsubmit {
    color: #555555;
    font-size: 15px;
    background: #D8E072;
    border-radius: 6px;
    border: 3px double #fff;
  }

  /*関連記事 プラグイン*/
  ul.related_post {
    text-align: center;
  }

  /*SNSボタンのデザイン https://plusers.net/wordpress_sns_button*/
  .fa-hatena:before {
    font-family: Verdana;
    font-weight: bold;
    content: 'B!';
  }

  .share {
    margin-top: 55px;
    margin-bottom: 50px;
  }

  .share ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .share ul:after {
    display: block;
    clear: both;
    content: '';
  }

  .share li {
    float: left;
    width: 25%;
    margin: 0;
    margin-top: 15px;
  }

  .share li a {
    font-size: 14px;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
  }

  .share li a:hover {
    opacity: .8;
  }

  .share li a:visited {
    color: #fff;
  }

  .tweet a {
    background-color: #55acee;
  }

  .facebook a {
    background-color: #315096;
  }

  .line a {
   background-color: #06c755;
  }

  .hatena a {
    background-color: #008fde;
  }

  /*　footer　*/
  footer {
    width: 1440px;
    height: 145px;
    background-color: #D8E072;
    clear: both;
    position: relative;
    top: 21px;
  }

  footer p {
    font-size: 18px;
    padding-top: 70px;
    text-align: center;
    color: gray;
  }

  /*　以下、投稿ページ用　*/

  .eye1 img {　　/* ①　backgroundで画像を最適化 */
    width: 100%;　　/*高さと幅の指定は必須*/
    height: 120px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .eye1 img { /* 縦横比をあわせてサイズが変更されるように調整 */
      height: 12vw;
  }

  .eye1 img { /* ②　object-fitを使ってimgタグの画像を最適化 https://plusers.net/wordpress_img_responsive*/
    height: 400px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 40px;
  }

  .content {　/*投稿記事の枠*/
    float: left;
    width: 720px;
    padding: 0 70px 30px 70px;
    margin: 70px 30px 70px 90px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.18);
  }

  .content .category-tip {
    margin-top: 0;
  }

  .content .title-nonstyle { /*投稿記事のタイトル用h２ */
    font-size: 28px;
    font-weight: 300;
    margin: 25px 0 25px 0;
    border-bottom: none;
    color: #4B4C4C;
  }

  .content .title-nonstyle:after{ /*.content h2:afterの打ち消し*/
    position: static;
    content: " ";
    display: inline;
    border-bottom: none;
    bottom: 0;
    width: 0;
  }

/*日付関連*/

  .content_date_items {
    display: flex;
    justify-content: flex-end;
  }

  .content_date_items { /*記事カードの日付と区別*/
    padding-top: 0px;
    font-size: 15px;
    color: #777777; /*#555555の薄い色*/
  }

　.update_post_day { /*リライト日*/
    font-size: 13px;
    color: #777777;
  }

  .content p {
    font-size: 17px;
    padding-bottom: 2rem;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    line-height: 1.8em;
        /* font-size: 1em; */
  }

  /* 記事内アンカータグの設定 */
  .content p a {
    color: #007BBB; /* 通常リンクのブルー*/
    /* color: #3F3C7C; 深いブルー　 */
    text-decoration-color: #007BBB;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

  .content p a:visited {
    color: #007BBB; /* 同色のまま　*/
  }

  .content p a:hover {
    color: #D8E072; /*きみどり*/
    font-weight: 500;
    text-decoration: underline;
  }

  .alignnone { /*　記事内の画像設定〜縦長と横長に対応　*/
    max-width: 100%;
    height: auto;
    /* min-height: 450px;
    width: auto; */
  }

/*見出しのデザイン*/
  .content h2 {
    margin: 35px 0 35px 0;
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    /* color: #3F3C7C;　濃いブルー*/
    color: #4B4C4C; /*文字色 濃いグレー*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #3F3C7C;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
    font-size: 26px;
    font-weight: bold;
  }

  .content h3 {
    margin: 25px 0 35px 13px;
    border-bottom: solid 4px #D8E072;/*黄緑*/
    position: relative;
    font-size: 22px;
    /* color: #3F3C7C;　文字色ブルー */
    color: #4B4C4C; /*文字色 濃いグレー*/
    font-weight: 700;
  }

  .content h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 4px #E1A7CA;/*pink*/
    bottom: -4px;
    width: 30%;
  }

  .content h4 {
    position: relative;/*相対位置*/
    padding: 0.5em 0.5em 0.5em 2.0em;/*アイコン分のスペース*/
    line-height: 1.4;/*行高*/
    font-size: 20px;
    color: #3F3C7C;　/*文字色ブルー*/
    /* color: black;/*文字色*/
  }

  .content h4:before { font-family: "Font Awesome 5 Free";/*忘れずに*/
    content: "\f138";/*アイコンのユニコード*/
    position: absolute;/*絶対位置*/
    font-size: 1.4em;/*サイズ*/
    left: 0.1em;/*アイコンの位置*/
    top: 0.15em;/*アイコンの位置*/
    color: #E1A7CA; /*アイコン色*/
  }

  .content h5 {
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
    background: #e8edae; /*より薄い黄緑色に変更*/
    border-radius: 15px;
    font-size: 18px; /*fontをpより大きく*/
  }

  .content h5:before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
  }

  .content h5:after {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
  }

  /*記事内ボタン：さるわかくん　https://saruwakakun.com/html-css/reference/buttons　*/
  .btn1 a {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #534fa4;/*メインカラーを薄くした色→さらに薄く#605CB0 */
    color: #FFF;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 5px #534fa4;/*メインカラーを薄くした色→さらに薄く#605CB0 */
    border: dashed 1px #FFF;
    font-size: 1.2rem;　/*フォント大きく*/
  }

  a.btn-stitch {
    width: 400px; /*ボタンの幅はここで指定*/
  }

  .btn1 {
    margin: 45px 0 55px 0;
    text-align: center;
  }

  .content p .btn-stitch:hover {
    opacity: 0.9;
    transition: .3s;
  }

  .btn-stitch:hover {
    opacity: 0.8;
    transition: .3s;
    border: dotted 1px #FFF;
    text-decoration-color: #FFF;
    text-decoration-style: solid;
    text-decoration-line: underline;
  }

    /****************************************
            関連記事（Relation）寝ログより
  *****************************************/
  #related-entries h3{
    font-size:24px;
    background-color: #f7f7f7;/*追加*/
    border-radius: 5px;
    margin: 75px 0 45px 0;/*追加*/
  }

  #related-entries .related-entry{
    line-height:150%;
    margin-bottom: 30px;
    clear: both;
    border-bottom: 1px solid #e7e7e7;/*追加*/
    height: 160px;/*追加*/
  }

  #related-entries .related-entry-thumb {
    float: left;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  #related-entries .related-entry-content {
    margin-left: 120px;
  }

  .related-entry-title{
      margin-bottom:5px;
  }

  .related-entry-snippet{
    margin:0 0 5px 0;
  }

  .related-entry-read{
    margin:0;
    font-size:12px;
  }

  p.related-entry-read {
    font-size: 14px;
    padding: 0 0 0 10px;
  }

  p.related-entry-read a {
    border-bottom: solid 1px;/*「続きを読む→」の下線 追加*/
  }

  p.related-entry-snippet {/*追加*/
    display: inherit; /*360pxの影響でpが消えないよう追加*/
    font-size: 14px;
    padding: 10px 0 3px 10px;
  }

  h4.related-entry-title {
    font-size: 17.5px;
    background: #eef2c6;
    border-radius: 10px;
    position: relative;
    padding: 3px 15px;
    margin-left: 45px;
  }

  h4.related-entry-title a:hover {
    color: #8e8c8c;
    font-weight: 500;
  }

  .related-entries h3 {
    background-color: #f4f4f4;/*追加*/
  }

  h4.related-entry-title:before { /*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 11px;
    left: -40px;
    bottom: 0;
    color: #e8edae;
    display: inline-block;
  }

  h4.related-entry-title:after {　/*黄緑のマル*/
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    position: absolute;
    font-size: 17px;
    left: -22px;
    bottom: 0;
    color: #e8edae;
    display: inline-block;
  }
  /*関連記事　ここまで*/

  /*次の記事ー前の記事*/
  .content.prev-next-link {
   display: flex;
  }

  .prev-next-link {
   display: flex;
   margin: 0 0 30px 0
  }

  .prev-next-link a {
   flex: 1;
  }

  .thumb-wrap {
   display: flex;
  }

   /* Images */
  .thumb-wrap {
   display: flex;
  }

  .thumb-wrap p {
   margin: 0 0 0 16px;
   font-size: 16px;
  }

  .thumb-wrap img {
   width: 80px;
   height: 100%;
  }

  .second-wrap {
    flex-direction: row-reverse; /*NEXTは反転させる*/
  }

  .thumb-wrap.second-wrap p {
    margin: 0 16px 0 0;
  }

  .prev-next-link a {
  /* border-bottom: 1px #ddd solid; */
  display: block;
  text-decoration: none;
  padding: 14px 40px;
  }

  .prev-next-link a:hover {
   background-color: #f6f6f6;
  }

  .prev-next-link a:first-child {
   /* border-top: 1px #ddd solid; */
   border-bottom: none;
  }

  .prev-next-label {
   font-size: .825rem;
   color: #000;
   margin-bottom: 10px;
  }

  p.prev-next-label {
   color: #3F3C7C;
   font-weight: 600;
   font-size: 16px;
   padding-bottom: 32px;

  }

  .next-label {
    text-align: right;
  }
   /*ここまで、次の記事ー前の記事*/

   /*ページネーション*/
  .pagination li.first,.pagination li.last,.pagination li {
    position: static;
  }



  /*アンダーライン　さるわかくん https://saruwakakun.com/html-css/reference/border*/
    /*蛍光ペン*/

　.under {　/*太い*/
    background: linear-gradient(transparent 0, #8effa1 0);
　}


  /* LINE */
  .sns .line a {
  background:#25af00;
  box-shadow:0 3px 0 #219900;
  }
  .sns .line a:hover {
  background:#219900;
  }

} /*@1440px　閉じカッコ*/