@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
*/

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

/* =========================
   リンクの下線を消す
   ========================= */

/* 全体のリンク */


/* === 景品表示法対応 === */
/* Cocoon設定本文上のPR表記 */
.pr-label-l {
    border-top: 1px dotted #333; /* 上の点線 */
    border-bottom: 1px dotted #333; /* テキスト下の点線 */
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 13px; /* 文字サイズ */
    color: #333; /* 文字の色 */
    text-align: center; /* テキスト中央揃え */
    background: #fff;
    padding: 3px 0;
    margin-bottom: 2em;
}

/***メインにある次のページ中央よせ***/
.pagination-next-link{
	margin:0px;
}
/***変なところで改行しない様にするcss***/
.entry-title, .entry-card-title.card-title.e-card-title, .new-entry-card-title.widget-entry-card-title.card-title, .popular-entry-card-content.widget-entry-card-content.card-content, .related-entry-card-title.card-title.e-card-title {
word-break: break-all;
}




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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.body {
  font-size: 15px !important;
		font-weight:500;!important;
}
}


/*********スマホメニューを横スクロール
#header-container .navi-in > ul li {
   height: auto;
   font-size: 16px;
}
#header-container #navi a{
   color:#fff; 
   padding:0.3em 2em;
}
#header-container #navi a:hover{
   color:#fff; 
	background:none;
	border-bottom:2px solid #fff;
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@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.8em 1.0em;
  }
  #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: 53px;
  }
}
ここまでしばらくオフ***********/








/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	/*おすすめカードの*タイトル文字サイズ*/

}

/***ここから追記したもの・おそらくずっと変えなそうなcss****/



/***全体****************/
#body {
-webkit-text-size-adjust: 100%;
	word-break: break-all; /*テキストの途中で改行させない*/
	letter-spacing: 0.7em;}
/* Cocoon Ad Label */
.ad-area .ad-label {
	font-size: 70% !important;
}
/*スマイルマークを非表示*/	
#wpstats{
display:none;
}
	
	

	
	

/*おすすめカード*************/
/*タイトル文字背景*/
.recommended.rcs-center-label-title .card-content .card-title {
  padding: 6px 1.2em;
  background-color: rgba(255, 255, 255, 0.8);
border-radius:0px;
  font-size: 0.9em;
}

/*---折り畳みアーカイブウィジェット---*/
/*jQueryコード貼ってる*/
.widget_archive a.year{ /*各年*/
	cursor: pointer;
	border-bottom: 1px dotted #ccc; /*各年に下線を引く*/
	padding-left:25px;
	font-size:1.0em;
}
.widget_archive a.year::before{ /*各年横のアイコン*/
	position: relative; /* 相対配置 */
	font-family: "Font Awesome 5 Free";
content: "\f138";
	color:#ceaaa9;
	font-weight:bold;
	padding-right:8px;
}
.widget_archive .years ul { /*各月*/
	display: flex;
	flex-flow: row wrap;
	margin-left: 25px; /*インデント*/
	color:#777;!important
}
.widget_archive ul.years li {
	padding: 0px; /*各月の間隔*/
}
#sidebar .widget_archive ul.years li :hover { /*マウスホバー時*/
	background: none;
	transition: 0.1s;
	color: #ceaaa9;
}
.widget_archive ul.years .hide { /*各年をクリックすると開閉*/
	margin: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}
/* 通知エリアの流れるテキスト */
.notice-area {
	overflow: hidden; /* はみ出た部分を隠す */
	white-space: nowrap; /* 文字を折り返さず1行で表示 */
}

/* 通知メッセージのスタイル */
.notice-area-message {
	display: inline-block;
	padding-left: 100%; /* 初期位置を画面の右端に設定 */
	animation: slideMessage 12s linear infinite; /* アニメーション適用 */
}

/* スライドアニメーションの定義 */
@keyframes slideMessage {
	to {
		transform: translateX(-100%); /* 左へ移動 */
	}
}

/* 1023px以上（PC） */
@media screen and (min-width: 1023px) {
	.notice-area-message {
		animation-duration: 24s; /* PCでのスライド速度 */
	}
}

/* 矢印----------
これで使うやつ<p class="arrowbtn"><a href="#">テキストリンク</a></p>------------------------------------ */
.arrowbtn a {
	--arrow-color:#333; /* 矢印の色を設定 */
	position: relative; /* 疑似要素を位置指定するための基準 */
	padding: 0 2.5em .5em .5em; /* 内側の余白（右に矢印部分を空ける） */
	color: var(--arrow-color); /* 文字色を矢印の色と統一 */
	text-decoration: none; /* 下線を非表示 */
}

.arrowbtn a::before {
	border-bottom: 1px solid var(--arrow-color); /* 下線としての矢印部分 */
	border-right: 1px solid var(--arrow-color); /* 右線としての矢印部分 */
	bottom: 0; /* 矢印をボタン下部に配置 */
	content: ''; /* 疑似要素でコンテンツを空に設定 */
	height: 12px; /* 矢印の高さ */
	position: absolute; /* 親要素から相対的に配置 */
	left: 0; /* 矢印の位置を左端に */
	transform: skewX(50deg); /* 矢印の形状を傾けてデザイン */
	width: 100%; /* ボタン全体の幅に矢印を合わせる */
	transition: all .3s; /* なめらかな動き（ホバー時） */
text-align:right;
}

/* マウスオーバー時の動き */
.arrowbtn a:hover::before {
	left: 10%; /* ホバー時、矢印が右に10%ずれる */
}
	
	
	/* ↓↓モバイルナビゲーションメニュー、サイドバーの×ボタン */
.menu-close-button {
  margin-right: 8%;
  text-align: right;
  color: #727272;
}
	.navi-menu-content{
		background:#727272;
	}