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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*サイトタイトル*/
.site-name-text{
display:none;
}

/*レスポンシブのアイキャッチ*/
@media screen and (max-width: 768px) {

.home .eye-catch-wrap{
  margin-left:-16px;
  margin-right:-16px;
}
	
}



/* 広告（PR）ラベル */
.pr-label,
.pr-label-s {
    display: inline-block;
    font-size: 11px;
    color: #666666;
    background: #faf5f2;
    border: none;
    border-radius: 6px;
    padding: 3px 10px;
    font-weight: 400;
	 margin-left: 10px;
}


/* recaptcha非表示（問い合わせページに記載あり） */
.grecaptcha-badge{
    visibility:hidden;
}

/* Cocoon見出しデザインのリセット */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  background: none; /* 背景色なし */
  border: none;     /* 枠線なし */
  border-radius: 0; /* 丸みなし */
}

/* 表の幅を変更 */
.wp-block-table td:nth-child(1){
    width:48%;
}

.wp-block-table td:nth-child(2){
    width:14%;
    text-align:center;
}

.wp-block-table td:nth-child(3){
    width:38%;
}

/*スライドインメニューを右から出す*/
.navi-menu-content{
	left: auto;
	right: 0;
	transform: translateX(101%);
}


/*----------------------------------
スライドインメニュー本体
----------------------------------*/
#navi-menu-content{
    background:#FCFBFA;
    width:88%;
    max-width:360px;
    right:0;
    left:auto;
    box-shadow:-12px 0 32px rgba(0,0,0,.045);
    overflow-y:auto;
}

/*----------------------------------
閉じるボタン
----------------------------------*/
.menu-close-button{
    position:absolute;
    top:28px;
    right:28px;
    color:#9A8B84;
    z-index:100;
    transition:.25s;
}

.menu-close-button::before{
    font-size:22px;
    font-weight:300;
}

.menu-close-button:hover{
    color:#756A65;
}

/*----------------------------------
カテゴリー一覧
----------------------------------*/
.menu-drawer{
    margin:88px 0 50px;
    padding:0;
    list-style:none;
}

/* CATEGORY */
.menu-drawer::before{
    content:"CATEGORY";
    display:block;
    margin:0 34px 24px;
    font-size:11px;
    font-weight:500;
    letter-spacing:.28em;
    color:#A89D97;
}

/* 項目 */
.menu-drawer li{
    list-style:none;
    margin:0;
}

/* リンク */
.menu-drawer a{
    display:block;
    padding:18px 34px;
    font-size:16px;
    font-weight:400;
    line-height:2.1;
    color:#4F4A48;
    text-decoration:none;
    letter-spacing:.02em;
    transition:.25s ease;
}

/* ホバー */
.menu-drawer a:hover{
    color:#8F817A;
    background:transparent;
}

/* 現在のカテゴリー */
.menu-drawer .current-menu-item>a{
    color:#8F817A;
}

/*----------------------------------
スクロールバー
----------------------------------*/
#navi-menu-content::-webkit-scrollbar{
    width:5px;
}

#navi-menu-content::-webkit-scrollbar-thumb{
    background:#DDD5CF;
    border-radius:999px;
}

/*==================================================
モバイルヘッダー
==================================================*/

/* ヘッダー */
.mobile-menu-buttons{
    height:58px;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.03);
}

/* ボタン */
.mobile-menu-buttons .menu-button{
    background:transparent;
}

/* アイコン */
.mobile-menu-buttons .menu-button-icon{
    font-size:29px;
    font-weight:300;
}

span.fa.fa-search::before{
color:#857b76;/*検索マーク色*/
margin-left:1em;
}
span.fa.fa-bars::before{
color:#857b76;/*ハンバーガーメニュー色*/
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;
}

/* ボタン押下時 */
.mobile-menu-buttons .menu-button:hover{
    background:transparent;
}

/* アイコン押下時 */
.mobile-menu-buttons .menu-button:hover .menu-button-icon{
    color:#7C716B;
}

/*=========================================
  カテゴリーページ
==========================================*/

/* フォルダアイコン非表示 */
.archive-title i,
.archive-title .fa,
.archive-title .fas{
    display:none;
}

/* タイトル */
.archive-title{
    text-align:center;
    font-size:34px;
    font-weight:500;
    letter-spacing:.08em;
    color:#4f4743;
    margin:40px 0 10px;
    line-height:1.4;
}

/* CATEGORY文字 */
.archive-title::before{
    content:"CATEGORY";
    display:block;
    font-size:12px;
    letter-spacing:.35em;
    color:#b9aba4;
    margin-bottom:18px;
    font-weight:500;
}

/* タイトル下ライン */
.archive-title::after{
    content:"";
    display:block;
    width:60px;
    height:1px;
    background:#ebe3df;
    margin:20px auto 0;
}

/* タイトル下余白 */
.archive .list{
    margin-top:42px;
}

/* 記事カード */
.ect-entry-card{
    margin-bottom:38px;
    transition:.25s;
}

/* ホバー */
.ect-entry-card:hover{
    transform:translateY(-2px);
}

/* サムネ角丸 */
.entry-card-thumb,
.entry-card-thumb img{
    border-radius:8px;
}

/* カテゴリーラベル */
.cat-label{
    background:#B4A9A2;
    color:#fff;
    border:none;
	border-radius:3px 3px 3px 3px;

    font-size:10px;
    font-weight:500;
    letter-spacing:0;

    top:0;
    left:0;

    box-shadow:none;
}

/* パンくず */
.breadcrumb{
    margin-top:40px;
    margin-bottom:25px;
    color:#55504d;
    font-size:13px;
}

.breadcrumb a{
    color:#55504d;
}

/* 説明文 */
.archive-description{
    max-width:680px;
    margin:0 auto 38px;
    text-align:center;
    color:#7d736f;
    line-height:2;
    font-size:15px;
}

/* スマホ */
@media screen and (max-width:480px){

.archive-title{
    font-size:30px;
    margin-top:30px;
}

.archive-title::before{
    margin-bottom:15px;
}

.archive .list{
    margin-top:34px;
}

}

/* 記事下カテゴリー：色だけ変更 */
.entry-categories a,
.post-categories a,
.cat-links a{
    background-color:#B8ADA7 !important;
}

/* トップへ戻るボタン */
.go-to-top-button,
.go-to-top,
#go-to-top,
#page-top{

    right:20px;
    bottom:20px;

    width:52px;
    height:52px;

    background:rgba(255,255,255,.60) !important;

    border:none !important;

    box-shadow:0 3px 10px rgba(0,0,0,.06) !important;

    border-radius:50%;
}

.go-to-top-button i,
.go-to-top i,
#go-to-top i,
#page-top i{

    color:#B8ADA7 !important;
    font-size:18px;
}

/* 記事本文の横幅を狭くする */
.entry-content{
    max-width:680px;
    margin:0 auto;
}

/* PCだけ本文を少し細くする */
@media (min-width: 1024px){

  .content-in{
    max-width: 900px;
    margin: 0 auto;
  }

}

/* Cocoon標準マーカー */
.marker-red {
    background: linear-gradient(
    transparent 50%,
    #f4e7e2 50%
) !important;
	}


/* ==========================================
   見出しボックス
========================================== */

/* ボックス全体 */
.caption-box{
  border:1px solid #d7c8c2;
  border-radius:6px;
  overflow:hidden;
  box-shadow:none;
  background:#fff;
}

/* タイトル背景 */
.cocoon-block-caption-box.not-nested-style > .box-label,
.caption-box-label{
  background:#d7c8c2 !important;
  justify-content:center;
  align-items:center;
  padding:8px 16px;
  border-radius:6px 6px 0 0;
}

/* タイトル文字 */
.caption-box-label-text{
  color:#fff;
  font-size:17px;
  font-weight:500;
  line-height:1.35;
  text-align:center;
}

/* ボックス本文 */
.caption-box-content{
  padding:18px 16px !important;
}

/* リスト全体 */
.caption-box-content ul{
  list-style:none !important;
  margin:0;
  padding-left:8px !important;
}

/* 各項目 */
.caption-box-content li{
  position:relative;
  padding-left:1.55em !important;
  margin:0.9em 0;
  line-height:1.9;
}

/* ✓ */
.is-style-icon-list-check > li::before{
  content:"✓" !important;
  font-family:inherit !important;
  font-weight:400;
  font-size:16px;
  color:#9f9f9f;
  position:absolute;
  left:0;
  top: 0.04em;
　transform: none;
}

/* Cocoonのアイコンフォントを無効化 */
[class*="is-style-icon-list-"] > li::before{
  font-family:inherit !important;
}

/* 更新日 */
.post-date,
.entry-date,
.date-tags{

    color:#8e8883;

    font-size:13px;

    font-weight:400;

    letter-spacing:.08em;

    font-family:
    "Avenir Next",
    "Helvetica Neue",
    sans-serif;
}

/* アイコン非表示 */
.post-date::before,
.entry-date::before,
.date-tags .fa{

    display:none;
}

/* カテゴリーページの時計アイコンを消す */
.post-update .fa{
    display: none !important;
}


/*----------------------------------
クリニック比較まとめボックス
----------------------------------*/
.clinic-summary-box{
    border: 1px solid #d8ceca !important;
    border-radius: 3px !important;
    padding: 20px 18px !important;
    background: #fff;
}

/* リスト全体 */
.clinic-summary-box ul{
    padding-left: 0 !important;
    margin: 0 !important;
}

/* クリニックごとの項目 */
.clinic-summary-box li{
    padding: 14px 4px 18px 38px !important;
    margin: 0 !important;
    position: relative;
}

/* 繊細な点線 */
.clinic-summary-box li:not(:last-child){
    border-bottom: 1px dashed #ded5d1;
}

/* 最後の項目 */
.clinic-summary-box li:last-child{
    padding-bottom: 4px !important;
}

/* 最後のクリニックまとめボックスだけ✔︎位置調整 */
.clinic-summary-box
.wp-block-list.is-style-icon-list-check > li::before {
  top: 0.8em !important;
  transform: none !important;
  left: 0.7em !important;
}

/* ======================================================
01 フォント
====================================================== */

body,
.entry-content,
.article,
h1,
h2,
h3,
h4,
h5,
h6{

font-family:
-apple-system,
BlinkMacSystemFont,
"Hiragino Sans",
"Hiragino Kaku Gothic ProN",
"Yu Gothic",
"YuGothic",
Meiryo,
sans-serif;

-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;

}



/* ======================================================
02 本文
====================================================== */

.entry-content{

font-size:18px;

font-weight:400;

line-height:2.05;

letter-spacing:.015em;

color:#4f4f4f;

}

.entry-content p{

margin-bottom:2em;

}

.entry-content ul,
.entry-content ol{

line-height:2;

}



/* ======================================================
03 H2
====================================================== */

.article h2{

font-weight:550;

line-height:1.6;

letter-spacing:.02em;
	
background-color: #cdb7b2; /* 背景色 */
	
padding: .7em 1em; /* 余白 */
	
color: #fff; /* 文字色 */
	
margin-top:70px;
margin-bottom:35px;


}



/* ======================================================
04 H3
====================================================== */

.article h3{

font-weight:600;

line-height:1.65;

letter-spacing:.03em;

position: relative;
padding: .3em 0; /* 内側余白 */
border-bottom: solid 3px #eee; /* 下線1: 実線・太さ・色 */
color: #4f4a47; /* 文字色 */

}

h3::after {
  position: absolute;
  content: "";
  display: block;
  border-bottom: solid 3px #d8c6bf; /* 下線2: 実線・太さ・色 */
  bottom: -3px;
  width: 30%; /* 下線2の幅 */
}



/* ======================================================
05 H4
====================================================== */

.article h4{

font-weight:600;

line-height:1.65;

border-left: solid 3px #d8c6bf; /* 左線: 実線・太さ・色 */
color: #333; /* 文字色 */
padding: .5em 1em; /* 余白 */

}






/* ======================================================
10 スマホ
====================================================== */

@media(max-width:768px){

.entry-content{

font-size:16px;

line-height:2;

}

}

/*フッターメニューを一列にする*/
@media screen and (max-width: 834px){
.navi-footer-in>.menu-footer{
    flex-wrap: nowrap;  /*フッターメニューを一列に*/
    justify-content: center;
  }
.navi-footer-in a{
    font-size: 90%;  /*フッターメニューの文字の大きさを変更*/
  }
}

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

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

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