@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/************************************
****　ヘッダーロゴ
************************************/
@media screen and (max-width: 1023px){
.container {
margin-top:-3px;
}
}
.logo-image {
padding:0;
margin-left:1em;/*ロゴ画像が左に詰まってしまう場合は、ここの数字を0.1刻みで大きくしてみてください*/
margin-top:1em;
margin-bottom:1em;
max-height:60px;/*大きなロゴ画像を使いたい方は、ここの数字を大きくしてみてください*/
}
.logo {/*ロゴ画像を中央に配置したい方は、以下3行を削除*/
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}

/*グローバルメニューのフォントサイズ等変更*/
.navi-in .menu-header .item-label{
font-size: 14px;
}

/************************************
**ヘッダー　モバイル表示
************************************/
@media (max-width:1023px){
.header-container {
margin-top:80px;
}
img.site-logo-image{
max-height:80px;
padding:2px 0 0 5px;
box-shadow:none;
}
.mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/
height:78px;
background: #fff;
border-top:5px solid;
border-color:#cc002c;
}
}

/*480以下でロゴの大きさ変更*/
@media screen and (max-width: 480px){
.logo-menu-button img {
	width: 240px;
    　　max-height: none;
	margin: 2px auto 0;
}
}


/************************************
****　モバイル表示　ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
box-shadow:5px ;
font-size: 1.5em;
}

.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fas.fa-search::before{
color:#90C31F;/*検索マーク色変更はこちら*/
margin-left:1em;
}
span.fas.fa-bars::before{
color:#90C31F;/*ハンバーガーメニュー色変更はこちら*/
margin-right:1em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}

/*スマホのサイドバーメニューを左から右に表示*/
.sidebar-menu-content {
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
  right: auto;
  left: 0;
} 

/************************************
**　トップ新着・人気・関連記事ウィジェット 投稿日・更新日表示
************************************/
/*新着記事に日付を表示*/
	.widget-entry-card-date {
	display: block;
	color:#999999;
	text-align: right
}

.widget-entry-card-date::before{ /*投稿日のアイコンの変更*/
	font-family: "Font Awesome 5 Free";
	content: "\f017"; /*fa-clockアイコン*/
	font-weight: 400; /*アイコンの種類regular*/
	padding-right: 0px; /*右余白*/
	font-size: 12px; /*フォントサイズ*/
}

.widget-entry-card-update-date::before{ /*更新日のアイコンの変更*/
	font-family: "Font Awesome 5 Free";
	content: "\f1da"; /*fa-historyアイコン*/
	font-weight: 900; /*アイコンの種類solid*/
	padding-right: 5px; /*右余白*/
	font-size: 12px; /*フォントサイズ*/
}

/************************************
****　ブログカードの文字数制限
************************************/
.blogcard-content {
  max-height: 30em;
}

/************************************
****　トップ新着・人気・関連記事ウィジェット タイトル文字数、フォントサイズ
************************************/
.widget-entry-card-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.widget-entry-card-title{
  font-size: 16px;
}

.widget-entry-card-content{
  font-size: 16px;
}

/************************************
****　本文アイキャッチ画像の縦横比
************************************/
.eye-catch-wrap .eye-catch img{
	width:600px;
	height:400px;
	object-fit:cover;
	object-position: center center;
}
/*横幅 834px 以下に適用*/
@media screen and (max-width: 834px){
.eye-catch-wrap .eye-catch img{
	width:100%;
	height:200px;
	}
}

/************************************
****　新着一覧アイキャッチのサイズ、タイトル、説明文
************************************/
.large-thumb .new-entry-card-thumb {
  position: relative;
  padding-top: 66.66%; /*3:2の比率*/
  margin-bottom:8px;
}

.large-thumb .new-entry-card-thumb img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.large-thumb .widget-entry-card-title{
  font-size: 20px;
}

.large-thumb .widget-entry-card-snippet{
  font-size: 14px;
	color:black;
}

/************************************
****　エントリーカードのサムネイルサイズ
************************************/

.entry-card-thumb {
  width: 200px;
	margin-right:20px;
}
.entry-card-content {
  margin-left: 2px;
}

.entry-card-thumb.card-thumb{
  position: relative;
  padding-top: 25%; /*16:9の比率*/
  margin-bottom:8px;
}

.entry-card-thumb.card-thumb img{
  position: absolute;
  top: 0;
  left: 0px;
	right: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/*横幅 834px 以下に適用*/
@media screen and (max-width: 834px){
.entry-card-thumb {
  width: 180px;
	margin-right:15px;
}
.entry-card-content {
  margin-left: 2px;
}
	
.entry-card-thumb.card-thumb{
  position: relative;
  padding-top: 30%; /*16:9の比率*/
  margin-bottom:8px;
}
}

@media screen and (max-width: 480px){

.entry-card-content {
  margin-left: 5px;
}
	
.entry-card-thumb.card-thumb{
  position: relative;

  margin-bottom:8px;
		  width: 120px;
	height:120px;
}
}

/************************************
****　フッタ　マウスホバー背景色変更
************************************/
.navi-footer-in a:hover {
  background-color: #cc002c;
}

/************************************
****　フッタメニュー　非表示
************************************/
@media screen and (max-width: 834px){ /*834px以下*/
	#navi-footer-in ul li {
		display:none;
		}
	}

/************************************
****　アンカーリンクの移動位置調整
************************************/
:target{
	margin-top: -5em;
	padding-top: 5em;
}

/************************************
****　グローバルメニューデザイン
************************************/

#navi .navi-in > ul > li{
  border-right: 1px solid #dc143c  ;
}

#navi .navi-in > ul > li:last-child{
  border-right-width: 0;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
} 

#navi .navi-in>ul>li>a {
padding: 0.10em;
}

nav#navi, .menu-header .sub-menu{
     border-bottom:3px solid;
		border-color:#4C4C4C;
}

.header-container-in.hlt-top-menu .logo-header{
display:none;
}

.tagline,
.logo {
	text-align: left;
}
.navi-in > ul {
	justify-content: left;
}

/************************************
****　カテゴリ一覧　タイトル前アイコン非表示
************************************/
.archive-title .fa-folder-open:before { 
	display:none;
}

/************************************
****　プロフィールボックスデザイン
************************************/
    .author-name {
        font-size: 1.1em;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .author-box .author-name a {
        text-decoration: none;
        color: #333;
    }
    .author-box p {
        margin-top: 0.3em;
        line-height: 1.6;
    }
    .author-box p a {
        text-decoration: none;
        color: #008cee;
    }
    .author-box p a:hover {
        text-decoration: underline;
        color: #008cee;
    }
    .author-box .sns-follow-buttons a.follow-button {
        font-size: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        margin-bottom: 4px;
        margin-right: 8px;
        background: none;
        color: #fff;
    }
    .author-box a.follow-button span {
        line-height: 40px;
    }
    .author-box a.follow-button span::before {
        font-size: 22px;
    }
    .author-box .icon-twitter-logo::before {
        font-family: FontAwesome;
        content: "\f099"
    }
    .author-box .icon-facebook-logo::before {
        font-family: FontAwesome;
        content: "\f09a";
    }
    .author-box .icon-instagram-new::before {
        font-family: FontAwesome;
        content: "\f16d";
    }
    .author-box .icon-hatebu-logo::before {
        font-family: Verdana;
        content: 'B!';
        font-weight: bold;
    }
    .author-box .icon-google-plus-logo::before {
        font-family: FontAwesome;
        content: "\f0d5";
    }
    .author-box .icon-youtube-logo::before {
        font-family: FontAwesome;
        content: "\f167";
    }
    .author-box .icon-pinterest-logo::before {
        font-family: FontAwesome;
        content: "\f231";
    }
    .author-box .icon-amazon-logo::before {
        font-family: FontAwesome;
        content: "\f270";
    }
    .author-box .icon-github-logo::before {
        font-family: FontAwesome;
        content: "\f09b";
    }
    .author-box .website-button { background-color: #47555c !important; }
    .author-box .twitter-button { background-color: #1da1f2 !important; }
    .author-box .facebook-button { background-color: #3b5998 !important; }
    .author-box .hatebu-button { background-color: #2c6ebd !important; }
    .author-box .google-plus-button { background-color: #dd4b39 !important; }
    .author-box .instagram-button { background: #e1306c !important; }
    .author-box .youtube-button { background-color: #ef1515 !important; }
    .author-box .flickr-button { background-color: #0063dc !important; }
    .author-box .pinterest-button { background-color: #bd081c !important; }
    .author-box .line-button { background-color: #00c300 !important; }
    .author-box .amazon-button { background-color: #ff9900 !important; }
    .author-box .rakuten-room-button { background-color: #c42e7f !important; }
    .author-box .github-button { background-color: #333 !important; }
    .author-box .feedly-button { background-color: #2bb24c !important; }
    .author-box .rss-button { background-color: #f26522 !important; }
    .author-box .soundcloud-button { background-color: #ff7700 !important; }
    #main .author-box {
        border: none;
        border-radius: 3px;
        margin: 1em 0;
        line-height: 1.4;
        position: relative;
        padding: 1.4% 2% 1.8% 0;
        box-shadow: 0 5px 20px -5px rgba(105,115,131,.35);
    }
    #main .author-widget-name {
        display: inline-block;
        position: relative;
        margin: 10px 0 0 -170px;
        padding: 6px 12px;
        border-radius: 20px;
        background: #eaedf2;
        color: #555;
        font-size: 14px;
        font-weight: 700;
        z-index: 1;
    }
    #main .author-widget-name::before {
        position: absolute;
        content: '';
        z-index: -1;
        bottom: -30px;
        left: 60px;
        border: 15px solid transparent;
        border-top: solid 30px #eaedf2;
        transform: rotate(-40deg);
    }
    #main .author-thumb {
        float: left;
        margin: 0;
        padding-top: 70px;
        width: 200px;
        text-align: center;
    }
    #main .author-thumb img {
        border: solid 5px #dfe2e8;
        width: 130px;
		border-radius: 50%;
    }
    #main .author-content {
        margin: -30px 0 0 200px;
        padding-left: 30px;
        border-left: 2px #eaedf2 dashed;
    }
    #main .author-box .author-name {
        line-height: 1;
    }
    #main .author-box p {
        font-size: .95em;
    }
    @media screen and (max-width: 480px){
    #main .author-box {
        margin: 1em 10px;
        padding: 16px;
        text-align: center;
    }
    #main .author-widget-name {
        margin: 0;
    }
    #main .author-widget-name::before {
        left: 50px;
    }
    #main .author-thumb {
        float: none;
        margin: 0;
        padding-top: 20px;
        width: 100%;
    }
    #main .author-box .author-name {
        font-size: 14px;
    }
    #main .author-content {
        margin: 10px 0 0 0;
        padding-left: 0;
        border: none;
    }
    #main .author-box p {
        font-size: 14px;
        text-align: left;
    }
    #main .author-box .sns-follow-buttons {
        justify-content: center;
    }
    }

.author-box .feedly-button, .author-box .rss-button {
    display: none!important;
}

/************************************
****　目次
************************************/
/* 目次全体デザイン */
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#cc002c;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #cc002c; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#cc002c; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}

.toc-list > li a {
font-weight: bold;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content : "\f144";
margin-right: 7px;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
margin-top:0;
margin-left: 2em;
}
.toc-list > li li a::before {
content: "";
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #cc002c;/*こちらで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}

.toc-list > li li li a {
font-weight: normal;
font-size: 95%;
margin-top:0;
margin-left: 2em;
}
.toc-list > li li li a::before {
content: "";
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 0%;
background: black;/*こちらで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}
@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -1em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
.toc-list > li li li a {
margin-left: -1em;
}
.toc-list > li li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc a:hover {
color: #333333;
text-decoration: underline;
}

/************************************
****　serch & filterデザイン
************************************/

/* Search & Filter Styles */
body
{
	display:block;
}
.searchandfilter p
{
	margin-top: 1em;
	display:inline-block;
}
.searchandfilter ul
{
	display:inline-block;
}
.searchandfilter li
{
	list-style: none;
	display:inline-block;
	padding-right:10px;
}

.searchandfilter .postform{
		font-size:12px;
}

.searchandfilter input[name="ofsearch"] {
		font-size:12px;
}

/* If in a widget area make a single column by adding display block  */
.widget-area .searchandfilter li, .widget-area .searchandfilter p
{
	display:block;
}
.searchandfilter label
{
	display:block;
}
.searchandfilter h4
{
	margin:15px 0;
	font-size:16px;
}

.searchandfilter ul > li > ul:not(.children)
{
	margin-left:0;
}

/************************************
****　ヘッダー検索窓デザイン
************************************/
.header-in {
  position: relative;
}

.header-in .search-box {
  position: absolute;
  top: 50%;
  right: 16px;
  margin: 0;
  width: 280px;
  transform: translateY(-50%);
}

.header-in input[type="text"] {
  padding: 8px 14px 8px 40px;
  font-size: 14px;
  background: #FFE5CC;
  border: 1px solid  #cc002c;
  border-radius: 16px 16px 16px 16px / 50% 50% 50% 50%;
}

.header-in .search-submit {
  left: 3px;
  right: auto;
  color: #cc002c;
}

.header-container-in.hlt-top-menu .search-box{
display:none;
}

/*1023px以下*/
@media screen and (max-width: 1023px) {
  .header-in .search-box {
    display: none;
  }
}

/************************************
****　サイドバー見出しデザイン
************************************/

.sidebar h3 {
    background-color: #cc002c;
    padding: 7px 20px;
    margin: 40px 0 20px;
color: #fff;
	 text-align: center;
 border-radius: 0px ;
	font-size: 1em;
}

/************************************
****　ボックスメニューデザイン
************************************/

/*アイコンフォント色・サイズ変更*/
.box-menu-icon {
	color: #7F7F7F;　
	font-size: 50px;  
}


/*タイトルのサイズ・色変更*/
.box-menu-label{
	color: #656565;　
	font-size: 16px; 
}

/*サブキャプションのサイズ・色変更*/
.box-menu-description {
	color: #ff0000;
    font-size: 12px;
}


/*マウスオーバー時の枠線*/
.box-menu:hover{
	box-shadow: inset 2px 2px 0 0 #cc002c,
	2px 2px 0 0 #cc002c,
	2px 0 0 0 #cc002c,
	0 2px 0 0 #cc002c;
}

/*アイコンのサイズ*/
.box-menu-icon *{
max-width: 100%;
}

/************************************
****　ヘッダーモバイルメニュー横スクロール
************************************/

    @media screen and (max-width: 1030px){
      #header-container .menu-mobile{
        display:none;
		}


		
      .navi-in > .menu-mobile{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;

      }
		
      #header-container #navi a{
        font-size:0.8em;
        padding: 0.5em 1.2em;
      }
	
		
      #header-container .navi-in > ul > .menu-item-has-children > a::after{
        display:none;
      }
      #navi .navi-in > .menu-mobile li {
        height: auto;
        line-height: 1.8;
      }

		
      .mblt-header-mobile-buttons {
        margin-top: 50px;
      }
    }

/************************************
****　言語スイッチャー横並び
************************************/
.widget_polylang ul li { display: inline-block; }

/* ------------------------------------- */
/*          Rinker カスタマイズ          */
/* ------------------------------------- */

/* 商品タイトルリンク色変更 */
div.yyi-rinker-title a {
color: #cc002c !important;/* 通常時 */
font-weight: normal;/* 太字にしない */
}
/* ホバー時 */
div.yyi-rinker-title a:hover {
text-decoration: underline !important;
}

div.yyi-rinker-contents div.yyi-rinker-title p{
	line-height: 1.4;
}

/* ------- 画像 ------- */
div.yyi-rinker-contents div.yyi-rinker-image {
    width: 30%;
}

/* ------- 商品情報 全体 ------- */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    margin-top: 0; /* 上の余白 */
}

/* --- クレジット＆価格 --- */
div.yyi-rinker-contents div.yyi-rinker-detail {
    margin-top: 0; /* 上の余白 */
}

/* ------- クレジット ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .credit {
    margin-bottom: 0px;!important /* 下スペース */
    color: #999; /* 文字色 */
}
div.yyi-rinker-contents div.yyi-rinker-detail .credit a{
    /*text-decoration: none;*/ /* リンクの下線 */
    color: #2581B3; /* リンクの文字色 */
}


/* ------- ブランド ------- */
div.yyi-rinker-contents div.yyi-rinker-detail .brand {
	display:none;
}