@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20161002
*/

/* Simplicity子テーマ用のスタイルを書く */

/* モバイル表示の文字を小さく
@media (max-width: 767px) {
.entry-content {
font-size: 12px;
}
}
*/



/*標題画像を正方形から縮小*/
.eye-catch img {
  height: 12rem;　/* 任意の高さ */
  object-fit: cover;
  width: 100%;
}

/* サムネイル画像サイズ変更
.entry-thumb img {
    width:320px;
    height:180px;
}

 /* スマホサムネイルサイズ変更
.entry-card .entry-thumb img{
    width:134px;
    height:75px;
    margin-bottom: 10px;
}
/* 概要のズレ調整
.entry-card-content,
.related-entry-content {
   margin-left: 140px;
}
*/


/* モバイル時に背景は白にする*/
@media screen and (max-width: 500px){
	body {
		background-color: #FFFFFF !important; 
	}
}

/* モバイルメニュー非表示 */#mobile-menu {
	display: none !important;
}

/* 記事背景の色変更 */
#main {
    background-color: #FDFDFD;
}

/* 記事と記事の間に線を引く */
#main .entry {
    border-bottom: 1px solid #b8ccab;
    padding-bottom: 15px;
}

/* 関連記事と関連記事の間に線を引く */
#main .related-entry {
    border-bottom: 1px solid #b8ccab;
    padding-bottom: 15px;
}

/* 「記事を読む」ボタンの装飾 */
.entry-read a{
 color:#000000;
 font-size:12px;
 background-color:#b8ccab;
 border:1px solid #b8ccab;
 border-radius:2px;
 padding:3px 7px 3px 5px;
 text-decoration:none;
 }
 
.entry-read a:hover{
 color:#fff;
 background-color:#9fd2c3;
 border:1px solid #9fd2c3;
}

/* ==========================================================================
スマホ用タイトル小さく
========================================================================== */
@media only screen and (max-width: 480px) {
.entry h2 a{
 font-weight: 700;
 font-size: 0.9rem;
 }
}

/*---------------------------------
記事を読むと記事本文の抜粋なし
--------------------------------*/
@media only screen and (max-width: 480px) {
.entry-snippet{
  display:none;
 }
}

/*---------------------------------
記事タイトルを小さく
--------------------------------*/
.entry h2 a{
 font-size: 19px;
 line-height: 1.0;
}

/*---------------------------------
抜粋記事本文を小さく
--------------------------------*/
.entry-snippet{
        font-size:85%
}

/*---------------------------------
メタ情報の日付を小さく
--------------------------------*/
.post-meta,.entry .post-meta a  {
    font-size: 12px;
    line-height: 160%;
}


/* 見出しタグの変更（h2） */
.article h2 {
    background-color: #4c8e77;
    border-left: 0 none;
    color: #fff;
    padding: 15px 30px;
}

/* 見出しタグの変更（h3） */
.article h3 {
  font-size:23px;
  border-bottom:5px solid #b8ccab;
  padding:10px 0;
}

/* サイドバーの見出しの装飾 */
#sidebar h3 {
  font-size:20px;
  border-bottom:5px solid #b8ccab;
  padding:10px 0;
}



/* 表示枠の装飾 */

.entry-content ul {
  border: solid 2px #4c8e77;
  padding: 0.5em;
  position: relative;
  margin-top: 2em;
}
.entry-content ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}
.entry-content ul li:last-of-type {
  border-bottom: none;
}
.entry-content ul li:after {
  /*タイトルタブ*/
  background: #4c8e77;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: "POINT";/*タブの文字*/
  letter-spacing: 0.05em;/*字間*/
}


.entry-content ol {
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
}

.entry-content ol li {
  line-height: 1.5; /*文の行高*/
  padding: 0.5em 0; /*前後の文との余白*/
}

/*文字の大きさ変更*/
.article{
 font-size:18px;
 line-height:170%;
}

/*サイドバーの色変更*/
/*.widget-area .widget a {
/*  color: #086000; /* リンク部分の文字色 */
/*  text-decoration: underline; /* リンク部分にアンダーライン */
/*  font-weight: normal; /* 文字の太さはノーマル */
/*}

/*.widget-area .widget a:visited {color: #dd3333;}
/*.widget-area .widget a:hover{color: #086000;}

/* サイドバーのリンク色変更？ */
/*#sidebar a {
/*  color: #086000;
/*    word-wrap: break-word;
/*}

/*#sidebar　a:hover {
/*  color: #dd3333;
/*}
*/

/*スマホ用記事文字サイズ変更*/
@media only screen and (max-width: 480px) {
 .page-title{  
  font-weight: bold; 
  line-height: 100%; 
  font-size: 22px; 
 } 

 .entry-content p{ 
  line-height: 190%; 
  font-size: 12px; 
 } 

/* 表示枠の装飾 */

.entry-content ul {
  border: solid 2px #4c8e77;
  padding: 0.5em;
  position: relative;
  margin-top: 2em;
 }
.entry-content ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
 }
.entry-content ul li:last-of-type {
  border-bottom: none;
 }
.entry-content ul li:after {
  /*タイトルタブ*/
  background: #4c8e77;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: "POINT";/*タブの文字*/
  letter-spacing: 0.05em;/*字間*/
 }

.entry-content ol {
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
 }

.entry-content ol li {
  line-height: 1.5; /*文の行高*/
  padding: 0.5em 0; /*前後の文との余白*/
 }
	/*文字の大きさ変更*/
.article{
 font-size:14px;
 line-height:130%;
 }
/* 見出しタグの変更（h2） */
.article h2 {
    background-color: #4c8e77;
    border-left: 0 none;
    color: #fff;
    padding: 15px 30px;
  font-weight: bold; 
  line-height: 120%; 
  font-size: 20px; 
 }

/* 見出しタグの変更（h3） */
.article h3 {
  border-bottom:5px solid #b8ccab;
  padding:10px 0;
  line-height: 120%; 
  font-size: 20px; 
 }
	
.article h4 {
  line-height: 120%; 
  font-size: 20px; 
 }
	
.post-meta,.entry .post-meta a  {
    font-size: 12px;
    line-height: 160%;
}

} 

/* ==========================================================================
   AI執筆用：箇条書きと枠の使い分け設定
   ========================================================================== */

/* 1. 蛍光ペン（マーカー） */
.marker-yellow {
    background: linear-gradient(transparent 60%, #ffff66 60%);
    font-weight: bold;
}

/* 2. メリット（おすすめポイント）用：緑色の枠 */
.entry-content ul.merit-list {
    border-color: #4c8e77; /* テーマ色の濃い緑 */
    background: #fafff9; /* 薄い緑の背景 */
}
.entry-content ul.merit-list li:after {
    content: "MERIT"; /* ラベルをMERITに変更 */
    background: #4c8e77;
}

/* 3. デメリット（注意点・失敗）用：赤色の枠 */
.entry-content ul.demerit-list {
    border-color: #d9534f; /* 注意を促す赤色 */
    background: #fffaf9; /* 薄い赤の背景 */
}
.entry-content ul.demerit-list li:after {
    content: "CAUTION"; /* ラベルをCAUTIONに変更 */
    background: #d9534f;
}

/* 4. 体験談・メモ用の囲み枠 */
.experience-box {
    background: #fefefe;
    border: 2px dashed #666;
    padding: 20px;
    margin: 2em 0;
    position: relative;
}
.experience-box::before {
    content: "私の体験メモ";
    font-weight: bold;
    color: #666;
    background: #eee;
    padding: 2px 10px;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 10px;
}