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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/************************************
** ●見出しカスタマイズ(h1-6)
************************************/
.article h1,{ /*見出し初期化*/
padding: 0;
margin: 0;
font-size: medium;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}
.article h1{ /*見出し１（タイトル）カスタマイズ*/
background: #b99d9a; /*背景カラー*/
font-size: 24px; /*フォントサイズ*/	
letter-spacing: 2px; /*文字間隔*/
margin: 20px 20px 10px 20px;
padding: 10px 7px 10px 10px;	
border-left: 10px solid #b99d9a; /*左ラインの太さとカラー*/
color: #fff;
line-height: 35px; /*高さ*/
border-radius: 6px;	/*角の丸み*/ 
box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}
@media screen and (max-width: 480px){
.article h1{ /*見出し１（タイトル）カスタマイズ*/
font-size: 16px;
margin: 5px 5px 5px 5px;		
}
}

.article h3 {
    border-left: 7px solid var(--cocoon-middle-thickness-color);
    border-left: 7px solid #b99d9a;
    border-right: 1px solid var(--cocoon-thin-color);
    border-top: 1px solid var(--cocoon-thin-color);
    border-bottom: 1px solid var(--cocoon-thin-color);
    font-size: 22px;
    padding: 8px 20px;
	margin-bottom: 1.5em;
	background: #ede5e4; /*背景カラー*/
	border-radius: 0 4px 4px 0 ;	/*角の丸み*/ 
	box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}

/************************************
** ●表紙固定ページ　2カラム
************************************/
.column-wrap > div {
width: 48.5%;
}	
.aligncenter {
    display: table;
    margin-right: auto;
    margin-left: auto;
}
/************************************
** ●表紙固定ページ　カスタマイズ
************************************/

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}

/*フロント固定ページの投稿日を非表示*/
.page .post-date{
  display: none;
}

/*フロント固定ページの更新日を非表示*/
.page .post-update{
  display: none;
}

/*フロント固定ページの投稿者名を非表示*/
.page .author-info{
  display: none;
}
/************************************
** ●ヘッダーとグローバルメニュー間余白
************************************/
.logo-image {
  padding: 0;
}
.logo-image * {
display: block;
margin: auto;
}

/************************************
** ●Topページ　スタイルbox
************************************/
.secondary-box {
    color: #383d41;
    background-color: #ede5e4;
    border-color: #d6d8db;
    padding: 30px;
    border-radius: 4px;
    margin-bottom: 10px;
}
/************************************
** ●SNSボタンコンパクト　カスタマイズ　
************************************/
#main .button-caption {
  display: none;
}
#main .sns-share a {
  width: 2.5em;
  margin-left: 0.2em;
}
.sns-share-buttons {
  justify-content: center;
}
#main .social-icon {
  font-size: 25px;
}


/************************************
** ●モバイルメニューカスタマイズ
　　（メニューバーに表示）
************************************/
@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: 0em 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: 53px;
}
}
/************************************
** ● お問い合わせフォーム　カスタマイズ
************************************/
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
textarea,
.field {
  display: block;
  width: 100%; 
  height: 45px;
  margin-bottom: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 3px;
  background-color: #eff1f5;
  box-shadow: none;
  color: #5c6b80;
  font-size: 1em;
  vertical-align: middle;
  line-height: 45px;
  transition: background-color 0.24s ease-in-out;
}
textarea {
  max-width: 100%;
  min-height: 120px;
  line-height: 1.5em;
  padding: 0.5em;
  overflow: auto;
}
@media(max-width:500px) {
    .inquiry td,
    .inquiry th {
        display: block !important;
        width: 100% !important;
        border-top: none !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important
    }
    .inquiry tr:first-child th {
        border-top: 1px solid #d7d7d7 !important
    }
    .inquiry .any,
    .inquiry .haveto {
        font-size: 10px
    }
}
.inquiry th {
    text-align: left;
    font-size: 14px;
    color: #444;
    padding-right: 5px;
    width: 30%;
    background: #f7f7f7;
    border: solid 1px #d7d7d7
}
.inquiry td {
    font-size: 13px;
    border: solid 1px #d7d7d7
}
.entry-content .inquiry tr,
.entry-content table {
    border: solid 1px #d7d7d7
}
.haveto {
    font-size: 7px;
    padding: 5px;
    background: #ff9393;
    color: #fff;
    border-radius: 2px;
    margin-right: 5px;
    position: relative;
    bottom: 1px
}
.any {
    font-size: 7px;
    padding: 5px;
    background: #93c9ff;
    color: #fff;
    border-radius: 2px;
    margin-right: 5px;
    position: relative;
    bottom: 1px
}
.verticallist .wpcf7-list-item {
    display: block
}
#formbtn {
    display: block;
    padding: 15px;
    width: 350px;
    background: #ffaa56;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 2px;
    margin: 25px auto 0
}
#formbtn:hover {
    background: #fff;
    color: #ffaa56;
    border: 2px solid #ffaa56
}
th {
    font-weight: 700;
    text-transform: uppercase;
    padding: 13px
}
td {
    border-top: 1px solid #ededed;
    padding: 12px
}
input,
select,
textarea {
    border: 1px solid #dfdfdf;
    letter-spacing: 1px;
    margin: 0;
    max-width: 100%;
    resize: none
}
/************************************
** ●投稿記事一覧（インデックス）のカスタマイズ
************************************/
.entry-card-wrap{ /*エントリーカード設定*/
transition: all 0.5s ease; 
margin-bottom: 0.0em!important;	
margin-left: 0.7em!important; 
margin-right: 0.7em!important;
padding-top: 0.7em; /*エントリーカード上マージン*/
padding-bottom: 0.7em; /*エントリーカード下マージン*/
padding-left: 0.7em; /*エントリーカード左マージン*/		
padding-right: 0.7em; /*エントリーカード右マージン*/

border-radius: 4px;
box-shadow: 0px 0px 0px 1px rgba(148,148,148,0);　/*エントリーカード 枠非表示*/	
}
@media screen and (max-width: 768px){ /*エントリーカード スマホ表示設定*/
.home main, .archive main{
background-color: #fff;	
}
}	
@media screen and (max-width: 480px){ /*エントリーカード スマホ表示設定*/
.entry-card-wrap{ /*エントリーカード設定*/
padding-left: 0.5em; /*エントリーカード左マージン*/	
padding-right: 0.5em; /*エントリーカード右マージン*/	
margin-left: 0em!important; 
margin-right: 0em!important;
/* background-color: #eeeeee80; */
}
}		
.entry-card-thumb-image.card-thumb-image.wp-post-image{ /*サムネイル画像設定*/
border-radius: 4px;

}

background-color:  white;
}*/
.entry-card-wrap.a-wrap:hover{ /*エントリーカード ホバー時設定*/
background-color: #eaeaea;
}
.entry-card:hover{ /*エントリーカード ホバー時設定*/
background-color: #eaeaea;
}
.entry-card-snippet.card-snippet.e-card-snippet{
font-size: 14px; /*フォントサイズ★*/
margin-bottom:2px; /*説明文と日付間の余白*/
color: #333;
}
.entry-card-title{ /*タイトル設定*/

margin-top: 2px; /*サムネイルとタイトル間の余白*/
margin-bottom: 6px; /*タイトルと説明間の余白*/
line-height: 1.4; /*行間設定*/
color: #666; /*タイトルの色*/
padding: 3px 3px 3px 3px; /*上下左右空白*/

border-radius: 3px; /*角丸コーナー*/
font-size: 17px;

font-family: "Noto Sans JP" ,sans-serif;

}
@media screen and  (max-width: 480px){
.entry-card-title{ /*タイトル設定*/
color: #333; /*タイトルの色*/
	
margin-left: 51px;	
}
}
.entry-card-title:hover{ /*タイトル ホバー時設定*/
color: #333; /*マウスホバー時の色*/
}
@media screen and (max-width: 1030px){ /*タイトル スマホ表示設定*/
.entry-card-title{
font-size: 14px; /*スマホでのフォントサイズ*/
margin-top: 6px; /*サムネイルとタイトル間の余白*/
line-height: 1.4; /*スマホでの行間*/
}
}
.e-card-info{ /*日付表示設定*/
color: #666; /*日付の色*/
}
/************************************
** ●インデックスのサムネイル画像のサイズを変更
************************************/
.entry-card-thumb { /*エントリーカードのサムネイル画像のサイズを変更 */
  width: 22%;

}
.entry-card-content {
/* margin-left: 65px; */
margin-left: 55px;
margin-bottom: 0.3em;
}	
 @media screen and  (max-width: 480px){
.entry-card-thumb { /*エントリーカードのサムネイル画像のサイズを変更 */
/* width: 16%; */
width: 42%;
}
}	 
/************************************
** ●インデックスの日付サイズを変更
************************************/
.post-date, .post-update {
font-size: 12px;
}
/************************************
** ●インデックスのスニペット（説明文）をカスタマイズ
************************************/
.entry-card-snippet.card-snippet.e-card-snippet {
font-size: 12px;	
margin-bottom: 1px;
color: #888;
padding-left: 10px;
}
/************************************
** ●インデックスのスニペット（説明文）をカスタマイズ
************************************/
.widget-entry-card-snippet {
color: #888;
}
/************************************
** ●エントリーカードラベル
************************************/
.entry-card .cat-label{
color: #fff; /*フォントカラー*/
background-color: #696969; /*背景色*/
}
.related-entry-card .cat-label{
color: #fff; /*フォントカラー*/
background-color: #696969; /*背景色*/
}
.entry-card, .related-entry-card {
 border-bottom: 2px dotted #ddd;/* 投稿下に下線 */
 position:relative;/* 位置の指定 */
}
@media screen and (max-width: 768px){
.entry-card {
 border-bottom: 2px dotted #ccc;/* 投稿下に下線 */
}
} 
/************************************
** ●カテゴリーラベルのカスタマイズ
************************************/
.cat-link{ /*カテゴリーラベル*/
text-decoration: none; /*テキスト初期化*/
color: #fff; /*フォントカラー*/
font-size: 12px; /*フォントサイズ*/
background-color: #949494; /*背景色*/
display: inline-block; /*横並びで上下左右空白有り*/
margin-right: 5px; /*内側右余白*/
padding: 2px 6px 0px 6px; /*外側余白*/
border-radius: 9px 3px; /*カテゴリ背景デザイン*/
border: 0px; /*枠線無し*/
word-break: break-all; /*テキストの途中で改行させない*/
}
.cat-link:hover{ /*カテゴリーラベル マウスホバー時*/
transition: all 0.8s ease; /*アニメーション*/
opacity: 0.6; /*不透明度*/
color: #fff; /*フォントカラー*/
background-color: #949494; /*背景色*/
}
/************************************
** ●タグラベルのカスタマイズ
************************************/
.tag-link{ /*タグラベル*/
text-decoration: none; /*テキスト初期化*/
color: #fff; /*フォントカラー*/
font-size: 12px; /*フォントサイズ*/
background-color: #949494; /*背景色*/
display: inline-block; /*横並びで上下左右空白有り*/
margin-right: 5px; /*内側右余白*/
padding: 2px 6px 0px 6px; /*外側余白*/
border-radius: 9px 3px; /*カテゴリ背景デザイン*/
border: 0px; /*枠線無し*/
word-break: break-all; /*テキストの途中で改行させない*/
}
.tag-link:hover{ /*タグラベル マウスホバー時*/
transition: all 0.8s ease; /*アニメーション*/
opacity: 0.6; /*不透明度*/
color: #fff; /*フォントカラー*/
background-color: #949494; /*背景色*/
}
/************************************
** ●日付のカスタマイズ
************************************/
.date-tags{
line-height: 1.4; /*行間設定*/
color: #333; /*文字色*/
}
.post-date, .post-update{
font-size: 14px; /*フォントサイズ*/
padding-right: 4px; /*右余白*/
display: inline; /*横並びで縦中央揃え*/
}
@media screen and (max-width: 480px){
.post-date, .post-update{
font-size: 13px; /*フォントサイズ*/
}
}
.post-date::before{ /*アイコンの変更*/
font-family: FontAwesome;
content: "\f093"; /*fa-uploadアイコン*/
padding-right: 4px; /*右余白*/
}
.post-update::before{ /*アイコンの変更*/
font-family: FontAwesome;
content: "\f148"; /*fa-level-upアイコン*/
padding-right: 4px; /*右余白*/
}
/************************************
** ●ページ送りボタン／戻りボタンのカスタマイズ
************************************/
.pagination-next,
.pager-prev-next{ /*次のページ*/
border: solid 1px #45546c; /*枠線*/
border-radius: 6px; /*角丸コーナー*/
transition: all 0.8s ease; /*アニメーション*/
background-color: #ffffff; /*背景色*/
width: 80%;	/*次のページ小表示*/
margin-left : auto;
margin-right: auto;
}
.page-numbers{ /*現ページ以外のページ番号*/
background-color: #ffffff; /*背景色*/
border: solid 2px #45546c; /*枠線*/	
border-radius: 6px; /*角丸コーナー*/
font-family: sans-serif; /*フォントゴシック指定*/
font-size: 120%; /*フォントサイズ*/
color: #949494; /*文字色*/
font-weight: bold; /*文字強調*/
box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
transition: all 0.8s ease; /*アニメーション*/
}
.pagination a.page-numbers:hover { /*現ページ以外のページ番号のホバー時*/
background-color: #45546c; /*マウスオーバー時の背景色*/
color: #ffffff; /*マウスオーバー時の文字色*/
}
.pagination .current { /*現ページ番号*/
background-color: #45546c; /*背景色*/	
border: solid 2px #45546c; /*枠線*/
border-radius: 6px; /*角丸コーナー*/
font-family: sans-serif; /*フォントゴシック指定*/
font-size: 120%; /*フォントサイズ*/
color: #fff; /*文字色*/
font-weight: bold; /*文字強調*/
box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}
.pagination-next-link.key-btn { /*次のページ★*/
padding: 0px;	
font-size: 1em;
color: #fff;
}
 .key-btn {
background-color: #45546c; 
border-color: #45546c; 
} 
.page-numbers.dots {
  opacity: 1;
	border-color: #45546c; 
}
.pagination {
    margin: 10px 0;
}
.page-numbers {  /*ページナンバー小表示*/
height: 30px;
line-height: 30px;
}
/************************************
** ●サムネイル画像のホバー時エフェクト処理
************************************/
/*記事一覧の画像*/
.entry-card:hover figure img{
opacity: 0.6;
transition: all 0.8s ease;
}
/*記事一覧画像の画像*/
.entry-card-wrap.a-wrap:hover figure img{
opacity: 0.6;
transition: all 0.8s ease;
}
/*人気記事の画像*/
.popular-entry-card-link.a-wrap:hover figure img{
opacity: 0.6;
transition: all 0.8s ease;
}
/*関連記事の画像*/
.related-entry-card-wrap.a-wrap.cf:hover figure img{
opacity: 0.6;
transition: all 0.8s ease;
}
/*次の記事の画像*/
.prev-post.a-wrap.cf:hover figure img{
opacity: 0.6;
transition: all 0.8s ease;
}
/*前の記事の画像*/
.next-post.a-wrap.cf:hover figure img{
opacity: 0.6;
transition: all 0.8s ease;
}
/*ブログカードの画像*/
.blogcard:hover figure img{
opacity: 0.6;
transition: all 0.8s ease;
}
/*ブログカード画像の画像*/
.blogcard-thumbnail:hover figure img{
opacity: 0.6;
transition: all 0.8s ease;
}
/*タイトル画像*/
.site-name-text:hover img{
opacity: 0.6;
transition: all 0.8s ease;
}
/************************************
** ●広告ラベルカスタマイズ
************************************/
.ad-label {
background-color: #b99d9a;
color: white;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
padding: 4px 8px;
border-radius: 4px;
	width: 345px;
}	
/************************************
** ●インデックス新しい記事に「new」表示カスタマイズ
Cocoon Child tmp entry-card.phpに（ 新しい記事に「NEW」表示カスタマイズ）追加  20241008 削除
************************************/
/* .new{ 
 position:absolute;
}
.new{ 
    white-space: nowrap;
    display: inline-block;
    padding: 1px 0px 1px 0px;
    margin: 30px 5px 5px 3px;	
    width: 40px;
	text-align: center;
    font-size: 65%;
	line-height: 1.2;
    font-weight: bold;
    background: #dc143c;
    color: #fff;
    z-index: 2;
	border-radius: 4px; 
}
@media screen and  (max-width: 480px){
.new{
margin: 25px 5px 5px 0px;	
}
} */
/************************************
** ●新着記事　タイトルへNEW!マーク表示
************************************/
.new-txt { /* newマーク */
    background: #dc143c;
    border-radius: 4px;
    /* color: #fff; */
	color: #f5f4f3;
	display: inline;
    font-size: 80%;
	font-size: 75%;
    font-weight: bold;
    /* line-height: 1.2; */
	line-height: 2.0;
	margin: 4px 7px 0 0;
	padding: 2px 4px 2px 4px;
    text-align: center;
    white-space: nowrap;
    z-index: 2;
	height: 19px;
}
/************************************
** ●ヘッダーメニューカスタマイズ
************************************/
.caption-wrap{
/* height: 44px!important; /*メニュー縦幅設定*/
/* height: 25px!important; /*メニュー縦幅設定*/	
display: flex; /*並列スタイル指定*/
align-items: center; /*縦中央寄せ*/
justify-content: center; /*横中央寄せ*/
font-weight: bold; /*文字強調*/
}
/************************************
** ●フッターメニューカスタマイズ
************************************/
.footer.footer-container.nwa,
.footer-in.wrap.cf,
.footer-bottom.fdt-up-and-down.fnm-text-width.cf
{
display: flex; /*並列スタイル指定*/
align-items: flex-end; /*縦中央寄せ*/
justify-content: center; /*横中央寄せ*/
}
.footer-bottom {
margin-bottom: 25px; */
}
@media screen and (max-width: 834px){
.navi-footer-in > .menu-footer li.menu-item {
    display:none; /*フッターメニュー非表示*/
}
}
/************************************
** ●Googleカレンダー埋め込みカスタマイズ
************************************/
.googleCalendar iframe {
  width: 80%;
  height: 400px;
}
@media all and (min-width: 768px) {
  .googleCalendar iframe {
	height: 600px;
  }
}


@media screen and  (max-width: 480px){
#table.style {
    width: auto;
}
}
/************************************
** ●Adsenseレスポンシブ広告のモバイル表示はみ出し修正
************************************/
.ad-area {
	overflow: visible;
}
/************************************
** ● サイドバー（wp_statisticsカウンター）　カスタマイズ
************************************/
.widget_wp_statistics_widget li{
    font-size: 14px;
	line-height: 1.3;
    list-style: none;
    /* border-bottom: solid 1px #dcdddd; */
    text-align:right;
    padding-right:40px;
	margin: 10px 10px 10px auto;
	width: 30%;
}
@media screen and  (max-width: 480px){
.widget_wp_statistics_widget li{
width: 100%;
}
}	
.widget_wp_statistics_widget label{
    float:left;
    padding-left:20px;
}
/************************************
** ●右下のreCAPTCHAのバッチを削除
************************************/
.grecaptcha-badge {
visibility: hidden;
}
/************************************
** ● slick スライダー （スライドではなくフェード表示にするためCocoonカルーセル未使用）
************************************/
.slick-slide img {
  border-radius: 0;
  box-shadow: none;
  width: 100vw;
}
 .slick-dots {
  bottom: 3px;
  position: absolute;
} 
.slick-dotted.slick-slider {
  margin-bottom: 0;
}

/* 画像重ね表示 */
.slick-slide img {
  position: relative;
}
/* コメント */
.slick-slide .slide-title {
  /* background: rgba(255, 255, 255, .4); */
  border-radius: 6px;
  color: #fe9800;
  font-size: 2.2em;
  font-weight: 900;
  left: 50%;
  letter-spacing: .2em;
  line-height: 1.0;
  margin: 2px 2px 2px auto;
  padding: 4px 5px 5px 5px;
  position: initial; /* position リセット */
  position: absolute;
  text-indent: .0em;	/* テキスト前スペース*/
  text-shadow: -1px -1px 4px #fff, -1px 0 4px #fff, -1px 1px 4px #fff,
  0 -1px 4px #fff,                  0 1px 4px #fff,
  1px -1px 4px #fff,  1px 0 4px #fff,  1px 1px 4px #fff;
  top: 90%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 1030px) {
  .slick-slide .slide-title {
    font-size: 2.0em;
  }
}	
@media screen and  (max-width: 845px) {
  .slick-slide .slide-title {
    font-size: 1.5em;
    left: 50%;
    position: absolute;
    top: 90%;
  }
}
@media screen and (max-width: 480px) {
  .slick-slide .slide-title {
    font-size: 1.0em;
letter-spacing: normal; 
	  left: 50%;
      top: 90%;
  }
}