@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){
  /*必要ならばここにコードを書く*/
}

/************************************
** プロフィール-サイドバー
************************************/
.sidebar .widget_author_box {
  background: #fff;
  padding-top: 1.2em;
  border-radius: 3px 3px 0 0;
  max-width: 360px;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.sidebar .author-box {
  padding: 120px 0 0;
  border: none;
  position: relative;
  margin: 0 0 3em;
  max-width: 100%;
  overflow:hidden;
}
.sidebar .author-content {
  background: #FEF4D6;
  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
  color: #807c78;
  padding: 20px;
  width:110%;
  margin-left:-5% !important;
}
.sidebar .author-box .author-name a {
  color: #807d78;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 18px;
}
.sidebar .author-box .author-description {
  padding: 45px 25px 0px;
  text-align: justify;
  text-justify: inter-ideograph;
}
.sidebar .author-box p {
  line-height: 1.8;
  font-size: 14px;
}
.sidebar .author-box .author-thumb {
  width: 120px;
  margin: 0 auto;
  position: absolute;
  top: 50px;
  right: 0;
  left: 0;
  bottom: 0;
}
.sidebar .author-box .author-name {
  font-size: 1.1em;
  font-weight: bold;
  position: absolute;
  margin-bottom: 0.4em;
  top: 23px;
  bottom: 0;
  right: 0;
  left: 0;
}
.sidebar .author-box .author-widget-name {
  position: absolute;
  top: 3px;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 0.7em;
  color: #bbb;
}
.sidebar .author-box .sns-follow {
  padding: 15px 10px;
}
.sidebar .author-box .sns-follow-buttons {
  display: flex;
  justify-content: space-evenly;
}
.sidebar .author-box .sns-follow-buttons a {
  border-radius: 50%;
  border: none;
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 30px;
  box-shadow: 0 0 10px rgba(192,192,192, .5), 0 0 5px -5px rgba(192,192,192);
  background:#fff;
}
.sidebar .author-box .sns-follow-buttons a:hover {
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
  opacity: 1;
}
.sidebar .author-box .sns-follow-buttons .follow-button span:before {
  color: #a9d8c8;
}
.sidebar .icon-instagram-new:before {
  content: "\ea92";
  font-size: 24px;
}
.sidebar .author-box .to-profile {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  color: #a9d8c8;
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
  top: 105px;
  right: 45px;
  font-size: 0.9em;
  font-weight: bold;
}
.sidebar .author-box .to-profile:hover {
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
}
.sidebar .author-box .sns-follow-message {
  margin-bottom: 10px;
  font-size: 13px;
}
.sidebar .author-box .sns-follow-message:before {
  content: "＼";
  margin-right: 5px;
}
.sidebar .author-box .sns-follow-message:after {
  content: "／";
  margin-left: 5px;
}
.sidebar .icon-twitter-logo:before {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
}
.sidebar .icon-facebook-logo:before {
  position: absolute;
  top: 6px;
  bottom: 0;
  right: 8px;
  left: 0;
}
.sidebar .icon-hatebu-logo:before {
  position: absolute;
  top: 8px;
  bottom: 0;
  right: 0;
  left: 0;
}
.sidebar .icon-feedly-logo:before {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
}
.sidebar .icon-rss-logo:before {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
}

#sidebar .author-box .sns-follow-message {
  display:block;
}

/************************************
** カルーセルカスタマイズ
************************************/
#carousel .a-wrap{
  margin-top:-6px !important;
  margin: initial;
  padding-top:-10px;
}
#carousel .carousel-entry-card-title{
  display: none;/*タイトル消す*/
}
#carousel .carousel-in {
  background-color: transparent;
}
#carousel .slick-dots{
  display:none!important;
}
.slick-slide img {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);/*お好みで*/
}
.carousel-entry-card-thumb {
  width: 95%;
}
.carousel .cat-label {
  display: none;/*カテゴリーを消す*/
}

/*【Table of Contents Plus中央表示/目次】*/

#toc_container {
margin-left: auto;
margin-right: auto;
}

/*スライダーの＜ ＞ボタンの色を茶色に*/
.carousel .slick-arrow:before {
    color: #5f4b3b;
}

/*ページネーション丸・次へ削除*/
.page-numbers {
 border-radius: 50%;
}

.pagination-next {
 display: none;
}

/* 見出しカスタマイズ */
/* H6 */
.article h6{
border-bottom:none;
padding: 0;
	border-bottom: solid 2px #d7d7d7;
  position: relative;
}

h6:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 2px #a6d3c8;
  bottom: -2px;
  width: 25%;
}

/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
	padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #fffef9;/*背景色*/
  border-left: solid 10px #a6d3c8;/*左線*/
  border-bottom: solid 1px #d7d7d7;/*下線*/
}

/*　テープ　枠　3 */
.kakomi-tape3 {
 position:relative;
 padding: 35px 20px 15px;
 margin: 2.5em auto;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #e8ddbd;
 box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 2px #ccc;
}
.title-tape3 {
 position: absolute;
 top: -15px;
 left: 30px;
 padding: 4px 20px;
 color: #555555; /*タイトル色*/
 font-weight: bold;
 background-color: rgba(255,255,255,.4);
 border-left: 2px dotted rgba(0,0,0,.1);
 border-right: 2px dotted rgba(0,0,0,.1);
 box-shadow: 0 0 5px rgba(0,0,0,0.2); 
 transform: rotate(-5deg);
}

/* メインのエントリー記事をフワッと浮かせる
-------------------------------------------------- */
#main #list .entry-card-wrap, #main .tab-cont .entry-card-wrap {
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1), 0 2px 3px 0 rgba(0, 0, 0, 0.2);
}

#main #list .entry-card-wrap:hover, #main .tab-cont .entry-card-wrap:hover {
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

/* 記事一覧カスタマイズ */
.ect-vertical-card .entry-card-wrap{
    max-width: 43%;
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
    border-radius: 3px;
    padding:0;
}
@media screen and (max-width:480px){
    .ect-vertical-card .entry-card-wrap{
        max-width: 46%;
    }
    .e-card-title {
        font-size: 13px;
    }
}
.entry-card-title{
    color: #5a5a5a; /*見出しの色*/
    line-height: 1.6;
}
.ect-vertical-card .entry-card-wrap .entry-card-content {
    margin: 8px 12px 9px 12px;
}
.entry-card-meta, .related-entry-card-meta {
    color: #b7b7b7;
    margin: 4px 8px;
}
.entry-card-wrap .cat-label{
    display: none; /*カテゴリを非表示に*/
}
.ect-vertical-card {
    justify-content: space-around;
}

/*メインカラム、カルーセル、サイドバーの背景色を白から透明に*/
.main, .carousel-in, .sidebar,　{
    background-color: transparent;
}

/* サイドバー文字サイズ */
.widget-entry-card {
    font-size: 14px;
}

.sidebar h3 {
	color: #5a5a5a;
	font-size: 1em;
	letter-spacing: 2px;/* 文字間隔 */
	text-align: center;/* 中央寄せ */
  border-bottom:2px dotted #a1d1d1;/*下線の太さ、種類、色*/
  background:transparent;/*背景を透明に*/
  padding:10px 0 5px 3px;
}

/*---cocoonモバイルメニューのカスタマイズ---*/
.mobile-menu-buttons {
  background: #a1d1d1;/* メニューの背景色 */
  box-shadow:0 -2px 6px gray;/* メニューに影をつける */
}
.navi-menu-button,
.mobile-menu-buttons .home-menu-button > a,
.search-menu-button,
.mobile-menu-buttons .top-menu-button > a,
.sidebar-menu-button{
  color: #ffffff;/* メニューのテキストの色 */
}
.mobile-menu-buttons .menu-button:hover {
  background: #c3e0dc;/* メニューの背景色(選択時) */
}
.top-menu-button a:hover,
.home-menu-button a:hover,
.mobile-menu-buttons :hover,
.menu-button:hover {
	color: #ffffff;/* メニューのテキストの色(選択時) */
}
.mobile-menu-buttons .menu-content{
  color: #333;/* サイドメニューの表示色が変わるのを防ぐ */
}
/*-------------------------------------*/

/****** 文字を点滅せさるアニメーション *******/
.blinktext{
-webkit-animation:blink 1.2s ease-in-out infinite alternate;
-moz-animation:blink 1.2s ease-in-out infinite alternate;
animation:blink 1.2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}

/* タブ一覧インデックス */
.index-tab-buttons .index-tab-button {
	background: #c7d8d6; /* 背景色 */
	border-color: #c7d8d6; /* 枠線の色 */
	color:  #ffffff;
}

/* チェック時 */
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"], #index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"], #index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"], #index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
    position: relative;
    background: #a1d1d1; /* 背景色 */
    border: 1px solid #a1d1d1; /* 枠線の色 */
}
/* 吹き出しの三角形の部分 */
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"]:before, #index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"]:before, #index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"]:before, #index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"]:before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -8px;
    opacity: 1;
    width: 0;
    height: 0;
    border-top: 8px solid #a1d1d1; /* 吹き出しの三角形の部分の色 */
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

/* Q＆A */
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa .cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 0 1em 0;
	color: #1b2538;
}
.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
	font-weight: bold;
	line-height: 1.6em;
	position: relative;
	display: block;
	margin: 0 0 0 0;
	padding: 1em 2em 1em 2.5em;
	cursor: pointer;
	text-indent: 1em;
	border-radius: 0.5em;
	background: rgba(27,37,56,0.1);
}
.cp_qa .cp_actab label::before {
	font-family: serif;
	font-size: 1.5em;
	margin-left: -2em;
	padding-right: 0.5em;
	content: 'Q';
}
.cp_qa .cp_actab label:hover {
	transition: all 0.3s;
	color: #00838f;
}
/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {
	font-size: 1.7em;
	font-weight: bold;
	line-height: 2em;
	position: absolute;
	top: 0;
	right: 0;
	content: '»';
	display: inline-block;
	width: 2em;
	height: 2em;
	-webkit-transition: transform 0.4s;
	        transition: transform 0.4s;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
	position: relative;
	overflow: hidden;
	max-height: 0;
	padding: 0 0 0 2.5em;
	-webkit-transition: max-height 0.2s;
	        transition: max-height 0.2s;
	border-radius: 0 0 0.5em 0.5em;
}
.cp_qa .cp_actab .cp_actab-content::before {
	font-family: serif;
	font-size: 1.5em;
	position: absolute;
	margin: 0.4em 0 0 -1em;
	padding: 0;
	content: 'A';
}
.cp_qa .cp_actab .cp_actab-content p {
	margin: 1em 1em 1em 0;
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
	max-height: 40em;
	border: 10px solid rgba(27,37,56,0.1);
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab input:checked ~ label {
	color: #00838f;
	border-radius: 0.5em 0.5em 0 0;
}
/* 質問をクリックした時の+の動き */
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

/************************************
**　ヘッダーメニュー
************************************/
header {
  position: relative;/*fixedの場合もありますね*/
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  /*以下色とかの装飾*/
  padding: 17px;
  color: #FFF;
  font-weight: bold;
  background: #a1d1d1;
}

/************************************
** ■おすすめカード カスタマイズ
************************************/
#recommended.recommended.cf.rcs-large-thumb-on.rcs-card-margin {
  margin-top: 30px; /*上マージン*/
  margin-bottom: -20px; /*下マージン*/
  transform: scale(0.92); /縮小表示*/
}

.navi-entry-card-link.widget-entry-card-link.a-wrap {
  border-radius: 10px; /*角丸コーナー*/
  -webkit-box-shadow: 0 9px 7px -6px #8d8c8c; /*シャドー（影）*/
  -moz-box-shadow: 0 9px 7px -6px #8d8c8c;
  box-shadow: 0 9px 7px -6px #8d8c8c;
}

.navi-entry-card-link.widget-entry-card-link.a-wrap:hover {
	transform: translateY(-4px);
}

/************************************
** ■ランクング
************************************/
.rank1, .rank2, .rank3 {
    font-size:18px;
    margin: 0;
    padding: 51px 0px 10px 100px;
    border-left: none;
    border-bottom: 0px;
	font-weight: bold;
	border-bottom: 1px dotted #ccc;
}

.rank1 {
    background-image: url(https://pnc-housing.com/wp-content/uploads/2022/10/1234.png);
    background-repeat: no-repeat;
    background-position: left center;
}

.rank2 {
    background-image: url(https://pnc-housing.com/wp-content/uploads/2022/10/234.png);
    background-repeat: no-repeat;
    background-position: left center;
}

.rank3 {
    background-image: url(https://pnc-housing.com/wp-content/uploads/2022/10/345.png);
    background-repeat: no-repeat;
    background-position: left center;
}

/* トップページのタイトル非表示 */
#post-4421 h1.entry-title {
    display: none;
}

/* スライド画像 */
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_cssslider {
	width: 730px;
	padding-top: 430px; /* 画像の高さ */
	position: relative;
	margin: 2em auto;
	text-align: center;
}
.cp_cssslider > img {
	position: absolute;
	left: 0;
	top: 0;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
}
.cp_cssslider input[name='cp_switch'] {
	display: none;
}
/* サムネイル */
.cp_cssslider label {
	margin: 15px 5px 0 5px;
	border: 2px solid #ffffff;
	display: inline-block;
	cursor: pointer;
	transition: all 0.5s ease;
	opacity: 0.6;
	border-radius: 3px;
}
.cp_cssslider label:hover {
	opacity: 0.9;
}
.cp_cssslider label img {
	display: block;
	width: 125px;
	border-radius: 2px;
}
.cp_cssslider input[name='cp_switch']:checked + label {
	border: 2px solid #FF7043;
	opacity: 1;
}
.cp_cssslider input[name='cp_switch'] ~ img {
	opacity: 0;
}
.cp_cssslider input[name='cp_switch']:checked + label + img {
	opacity: 1;
}

/* 見出しh2 */
.heading-019::before,
.heading-019::after {
    position: absolute;
    border: solid #333333;
    content: '';
}

/* 吹き出し影 */
.speech-balloon{
box-shadow: 2px 2px 3px darkgrey;
}
/* 吹き出し三角部分の影 */
.speech-balloon{
filter: drop-shadow(2px 3px 3px darkgrey);
}
/* 吹き出しマイクロバルーンの影 */
.micro-balloon {
filter: drop-shadow(2px 2px 2px darkgrey);
}

/*トップへ戻るボタンのサイズ変更*/
.go-to-top-button {
  width: 60px; /*横幅*/
  height: 60px; /*高さ*/
}

.go-to-top-button {
  font-size: 30px; /*アイコンフォントの大きさ*/
}

/* スマート　囲み枠　1 */
.kakomi-smart1 {
 position: relative;
 margin: 2em auto;
 padding: 2.5em 1em 1em;
 width: 90%; /* ボックス幅 */
 border-style: solid;
 border-color: #b6d8d6; /* 枠の色 */
 border-width: 5px 1px 1px;
 background-color: #f7f7f7; /* 背景色 */
 color: #666; /* テキスト色 */
 box-shadow: 1px 1px 3px #ccc; /* 影 */
}

.title-smart1 {
 position: absolute;
 top: 8px;
 left: 15px;
 background-color: #f7f7f7; /* タイトル背景色 */
 color: #939393; /* タイトル色 */
 font-size: 1.1em;
 font-weight: bold;
}

/************************************
** ■カード
************************************/
/* 📌 カード全体を包むコンテナ（グリッドレイアウト） */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 3カラム→2カラム→1カラム */
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 📌 カード本体 */
.l-wrapper_06 {
  background: white;
  width: 100%;
  max-width: 350px; /* 最大幅を設定 */
  height: 420px; /* 高さを固定 */
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 📌 ホバー時に浮く */
.l-wrapper_06:hover {
  transform: translateY(-5px);
  box-shadow: 0 7px 34px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* 📌 画像のサイズを統一 */
.card-img_06 {
  width: 100%;
  height: 150px; /* すべて同じ高さに固定 */
  object-fit: cover; /* 画像をトリミングして比率を保つ */
  border-radius: 8px 8px 0 0;
}

/* 📌 タイトル（折り返しあり・固定サイズ） */
.card-title_06 {
  font-size: 17px;
  font-weight: bold;
  color: #333;
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2行まで表示 */
  -webkit-box-orient: vertical;
  height: 3em; /* 高さを固定（1行=1.5em x 2行） */
}

/* 📌 説明文 */
.card-text_06 {
  color: #666;
  font-size: 12px;
  line-height: 1.5;
  flex-grow: 1;
}

/* 📌 リンクボタン */
.card-link_06 {
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid #eee;
}

.card-link_06 a {
  text-decoration: none;
  color: #4f96f6;
  font-weight: bold;
}

.card-link_06 a:hover {
  color: #6bb6ff;
}