@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.comment-notes,
.comment-form-email,
.comment-form-url{
  display:none;
}

/* 見出しカスタマイズリセット */
/* H2 */
.article h2{
background:none;
padding: 0;
}

/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

.sidebar h3 {

background:none;  
border-top:none;
  border-bottom:none;
  border-left:none;
  border-right:none;
  padding: 0;
 
}


/************************************
** ■見出しのカスタマイズ
************************************/
.article h1{
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #FFA500;;/*上線*/
  border-bottom: solid 3px #FFA500;;/*下線*/
}


.article h2{
background-color: #FFA500;
    color: #000;
    border-left: 25px solid #FF0000;
    padding: 15px 30px;
}

.article h3{

   margin-top: 40px;
   background: linear-gradient(transparent 60%, #FFA500 90%);;

}

.sidebar h3 {

    /*線の種類（実線） 太さ 色*/
  border-bottom: solid 5px #FFA500;
 
}


/************************************
** ■目次のカスタマイズ
************************************/

.toc {
    border: 2px solid #FFA500; /*全体の枠線の色*/
    font-size: 0.9em;
    line-height: 1.5;
    padding: 0;
    margin-bottom: 1em;
   
}
.toc-title {
    background: #FFA500; /*目次タイトルの背景色*/
    color: #000; /*目次タイトルの文字色*/
    font-size: 1.1em;
    text-align: center;
    padding: 6px 16px;
}
.toc-title::before {
    font-family: FontAwesome;
    content: '\f0ca'; /*目次タイトルのアイコン*/
    margin-right: 0.5em;
}
.toc-content {
    padding: 8px;
}

.toc ul li a, .toc ol li a {
    display: block;
    border-bottom: 1px dashed #FF0000; /*h3以下の下側ボーダー*/
    margin-left: -20px;
    padding-left: 20px;
}
.toc ul.toc-list>li, .toc ol.toc-list>li {
    margin-top: 1em;
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
    border-bottom: 1px solid #FF0000; /*h2の下側ボーダー*/
    
}


span.black{
  color:#A9A9A9;
  font-weight:bold;
  font-size: 8px !important;
}



/**********************************
コメント投稿フォームカスタマイズ
**********************************/
/* コメントフォーム */
#commentform textarea, #commentform input{
border: 2px solid #FFA500; /* 枠線の色 */
border-radius: 0.3em; /*角丸 */
transition: all .2s ease;
font-size: 80%;
}
/* コメントフォーム選択時 */
#commentform textarea:focus, #commentform input:focus{
outline: none;
border: 4px solid #FFA500; /* 枠線の色 */
}
/* 送信ボタン */
#commentform #submit{
background-color: #FF0000; /* 送信ボタンの背景色 */
box-shadow:2px 2px #888888; /* 送信ボタンの影色 */
color: white;
border-radius: 0.5em; /*角丸 */
height: 40px;
width: 20em; /*ボタンの横幅をボタン内の文字数で指定 */
border: none;
padding: 0;
line-height: 40px;
vertical-align: middle;
text-align: center;
transition: all .2s ease;
}


/***コメント***/
.comment-body{
padding: 20px;
border: solid 2px #afbdce;
}


/**********************************
ヘッダ画像伸縮
**********************************/
@media screen and (max-width: 1023px) {
  .header {
    background-size: contain;
  }
}

/**********************************
ヘッダPCビュー
**********************************/


/* PCのヘッダー高さ */
.header div.header-in {
	min-height: 250px; /* 変更時：以下ほとんど微調整として変更しなきゃダメ */
}
/* サイト名・サイト説明 */
.logo-text,
.tagline {
	padding: 0;
	text-align: left; /* 文字左寄せ */
	position:absolute; /* 位置を強引に決める */
	left: 20px; /* 左から40pxの位置に */
	
}
/* サイト名の位置 */
#header-in {
	position: relative; /* サイト名・descriptionはメイン領域に合わた位置 */
}
.logo-text {
	bottom: 200px; /* ヘッダーの下から */
}
/* サイト説明の位置；微調整必要 */
.tagline {
	bottom: 175px; /* ヘッダの下から */
	padding-right: 1em; /* 右内側余白1文字分 */
	font-size: 0.8em;
	color: #fff;
}

/**********************************
ヘッダの余白設定
**********************************/
.content {
margin-top: 0;
}



/************************************
**グローバルメニュー
************************************/
.caption-wrap:hover {
    font-weight: bold;
    color: #ffaf00;
    border-bottom: 3px solid #FFA500;
}

/************************************
**サイドバーカテゴリ
************************************/
.sidebar{
	background:transparent;
}
.widget-sidebar h3{/*サイドウィジェットタイトル*/
	background:transparent;
	
	border-bottom:5px solid #FFA500;/*下線の太さ・色*/
	padding:5px 10px 0;
	margin-bottom:0;
}
.widget_popular_entries h3:before{/*人気記事タイトルアイコン*/
	font-family:Fontawesome;
	content:"\f06b";/*アイコン種類*/
	color:#FFC14D;/*アイコン色*/
	font-weight:normal;
	margin-right:6px;/*アイコンとタイトルの距離*/
}
.widget_categories h3:before{/*カテゴリータイトルアイコン*/
	font-family:Fontawesome;
	content:"\f0ca";/*アイコン種類*/
	color:#FF0000;/*アイコン色*/
	font-weight:normal;
	margin-right:6px;/*アイコンとタイトルの距離*/
}
.widget_archive h3:before{/*アーカイブタイトルアイコン*/
	font-family:Fontawesome;
	content:"\f274";/*アイコン種類*/
	color:#38b48b;/*アイコン色*/
	font-weight:normal;
	margin-right:6px;/*アイコンとタイトルの距離*/
}
.widget_categories ul li,
.widget_archive ul li{/*カテゴリ・アーカイブ下線*/
	padding-left:10px;
	border-bottom:1px dotted  rgba(125, 125, 125, 0.2);/*下線の種類*/
}
.widget_categories ul li a,
.widget_archive ul li a{/*親カテゴリ・アーカイブの文字サイズ*/
	font-size:.95rem;
}
.widget_categories ul li a:before,
.widget_archive ul li a:before{/*親カテゴリ・アーカイブアイコン*/
	font-family:Fontawesome;
	content:"\f138";/*アイコン種類*/
	color:#FFC14D;/*アイコン色*/
	margin-right:6px;/*アイコンと文字の距離*/
}
.widget_categories ul .children li a:before{/*子カテゴリアイコン*/
	font-family:Fontawesome;
	content:"\f105";/*アイコン種類*/
	color:#FFC14D;/*アイコン色*/
	font-weight:normal;
	margin-right:6px;/*アイコンと文字の距離*/
}
.widget_categories ul .children li{
	border-bottom:none;
}	
.widget_categories ul .children li a{/*子カテゴリ*/
	padding:3px 10px;
	font-size:.85rem;/*文字サイズ*/
}
.widget_categories ul li a:hover,
.widget_archive ul li a:hover{/*カテゴリ・アーカイブhover時*/
	background:transparent;
	color:#38b48b;/*hover時の文字色*/
	margin-left:5px;/*hover時動く幅*/
}
.widget_categories ul li a .post-count,
.widget_archive ul li a  .post-count{/*カテゴリ・アーカイブ記事数*/
	border:1px solid rgba(221, 221, 221, 0.867);/*囲線*/
	border-radius:5px;
	font-size:.8em;/*数字サイズ*/
	padding:1px 10px;/*囲いの大きさ*/
}
.widget_categories ul li a:hover .post-count,
.widget_archive ul li a:hover  .post-count{/*カテゴリ・アーカイブ記事数hover時*/
	border-color:#FFC14D;/*囲線色*/
	background:#FFC14D;/*背景色*/
	color:#fff;/*文字色*/
	transition:.4s;/*変化スピード*/
}
/*ここまで*/

/************************************
** 固定ページトップページカスタマイズ
************************************/
.home #main h1{
    font-size: 1em;
    color: #555;
    letter-spacing: 1px;
    margin: 1em 0 -2em;
    font-weight: 400;
    display: flex;
    align-items: center;
}
.home #main h1:before, .home #main h1:after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #aaa;
    display: block;
}
.home #main h1:before {
    margin-right: .4em;
}
.home #main h1:after {
    margin-left: .4em;
}
.home #main .large-thumb{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0.8em 0;
}

.home #main .large-thumb a{
    width: 50%;
    padding: 10px;
}

.home #main .large-thumb a:hover{
    background:unset;
}
.home .widget-entry-cards .e-card {
    font-size: 18px;
    box-shadow: 0 0 4px rgba(0,0,0,.15);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    height:100%;
}
.home .widget-entry-cards .e-card:hover {
    transform: translateY(-3px);
    box-shadow: 0px 3px 18px 3px rgba(0,0,0,.08);
}
.home .widget-entry-cards figure {
    float: none;
    width: 100%;
}
.home .widget-entry-cards figure img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 210px;
}
.home .widget-entry-cards .card-content {
    margin: 0 0 0.5em;
    padding:10px 3px;
    background:#fff;
}
.home #main .large-thumb .new-entry-card-title,.home #main .large-thumb .popular-entry-card-title {
    font-size: 0.9em;
    line-height: 1.5;
    font-weight: 600;
    color: #555;
    margin-top: 3px;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
    .home #main h1{
        margin: 1em 0 0;
        padding: 0;
        font-size:0.8em;
    }
    .home .widget-entry-cards .e-card {
        margin:0 5px;
    }
    .home #main .large-thumb a {
        width: 100%;
        padding: 0;
        margin:0 0 15px;
    }
    .home .mobile-2{
        justify-content:space-between;
    }
    .home .mobile-2 a{
        width:48% !important;
    }
    .home .mobile-2 figure img {
        object-fit: unset !important;
        height: auto !important;
    }
    .home #main .large-thumb .new-entry-card-title{
        line-height:1.3;
    }
}
/************************************
** ボタン
************************************/
.p-button {
    max-width: 300px;
    margin: 0 auto;
}
.p-button a {
    display: block;
    margin:25px 0;
    padding: 0.8em 1em;
    border-radius: 2em;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    background: #eba02f;
    box-shadow: 0 5px 20px rgba(235, 160, 47, .5);
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity:1;
}
.p-button a:hover{
    box-shadow:none;
    transform: translateY(3px);
    opacity:1;
}

.home header .sns-share,.home footer .sns-share,.home footer .sns-follow,.home header .post-date,.home .post-update,.home .author-info{
    display: none;
}


/************************************
** モバイルフッターボタンの色変更
************************************/

/*フッターモバイルメニュー変更*/
.mobile-menu-buttons {
	background:rgba(255, 128, 0,0.9);/*フッターメニューの背景を半透明化*/
	
}

/* ボタンhover時の文字・背景変更 */
.mobile-menu-buttons .menu-button:hover {
	background:rgba(255, 128, 0,0.9); /* 背景色 */
	
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
	
/* タブレットビュー */

/* タブレットのヘッダー高さ */
.header div.header-in {
	min-height: 100px; /* 変更時：以下ほとんど微調整として変更しなきゃダメ */
}
/* サイト名・サイト説明 */
.logo-text,
.tagline {
	padding: 0;
	text-align: left; /* 文字左寄せ */
	position:absolute; /* 位置を強引に決める */
	left: 30px; /* 左から40pxの位置に */
	
}
/* サイト名の位置 */
#header-in {
	position: relative; /* サイト名・descriptionはメイン領域に合わた位置 */
}
.logo-text {
	bottom: 65px; /* ヘッダーの下から40px */
}
/* サイト説明の位置；微調整必要 */
.tagline {
	bottom: 50px; /* 下から20px */
	padding-right: 1em; /* 右内側余白1文字分 */
	font-size: 0.5em;
	color: #fff;
}
	

	
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
/* スマホビュー */

/* スマホのヘッダー高さ */
.header div.header-in {
	min-height: 100px; /* 変更時：以下ほとんど微調整として変更しなきゃダメ */
}
/* サイト名・サイト説明 */
.logo-text,
.tagline {
	padding: 0;
	text-align: left; /* 文字左寄せ */
	position:absolute; /* 位置を強引に決める */
	left: 20px; /* 左から40pxの位置に */
	
}
/* サイト名の位置 */
#header-in {
	position: relative; /* サイト名・descriptionはメイン領域に合わた位置 */
}
.logo-text {
	bottom: 70px; /* ヘッダーの下から40px */
}
/* サイト説明の位置；微調整必要 */
.tagline {
	bottom: 55px; /* 下から20px */
	padding-right: 1em; /* 右内側余白1文字分 */
	font-size: 0.5em;
	color: #fff;
}


	
}