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

/************************************
** 子テーマ用のスタイルを書く
************************************/

.home .entry-title {
display: none;
}

cssにbox-sizingを追加
―――――――――――――――――
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

hover画像 textリンク
―――――――――――――――――
a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}
a{
margin:0;
padding:0;
text-decoration:underline;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;
color:#0066ff;
}

.clearfix:after{
content:"";
display:block;
clear:both;
}


/*背景の幅を100％にする*/

.home #content .wrap {
    width: 100%;}
.home #content .wrap .main {
 padding: 0;}


#content .wrap .main section {
padding:100px 0;
}
#content .wrap .main section:first-child {
padding: 0 0;
}
#content .wrap .main section .inner{
width: 1000px;
margin:0 auto;}
.main-img {
	text-align:center;
	background: url(images/main-bg.jpg) center bottom repeat-x;
}


.article h2 {
    padding: 0;
	text-align:center;
    background-color: transparent;
    border-radius: 0;
}
.article h3 {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
}


/* ===== クリニックAI窓口 グロナビ(PC) ===== */

/* Cocoon標準の固定サイズを解除 */
.navi-in > .menu-pc.menu-top > li{
  display:flex !important;
  align-items:center !important;
  justify-content:center;
  width:auto !important;
  height:auto !important;
  margin:0;
  padding:0;
}

.menu-pc.menu-top{
  display:flex;
  align-items:center;
justify-content:flex-end; 
  list-style:none;
  margin:0;
  padding:0;
}

.menu-pc.menu-top > li > a{
  display:inline-flex !important;
  align-items:center;
  text-decoration:none;
  padding:0 !important;
  height:auto !important;
  line-height:1 !important;
}
.menu-pc.menu-top .caption-wrap{
  line-height:1;
  padding:0 !important;
  margin:0 !important;
  display:flex;
  align-items:center;
}
.menu-pc.menu-top .item-label{
  display:inline-block;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1 !important;
}
/* 通常リンク(最後の1つ以外) */
.menu-pc.menu-top > li:not(:last-child) > a{
  margin-left:20px;
}
.menu-pc.menu-top > li:not(:last-child) .item-label{
  color:#444;
  transition:.2s;
}
.menu-pc.menu-top > li:not(:last-child) > a:hover .item-label{
  color:#1471f6;
}

/* 最後の1つ＝ボタン化(無料導入相談のみ) */
.menu-pc.menu-top > li:last-child > a{
  margin-left:20px;
  padding:10px 25px !important;
  min-height:50px;
  border-radius:999px;
  white-space:nowrap;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  font-weight:800;
  line-height:1.3;
  background:linear-gradient(135deg, #00a04c, #007d3d);
  box-shadow:0 12px 28px rgba(0,126,126,.24);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.menu-pc.menu-top > li:last-child .item-label{
  color:#fff !important;
  font-weight:700 !important;
  font-size:16px !important;
  line-height:1 !important;
}
.menu-pc.menu-top > li:last-child > a:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(0,126,126,.32);
}
.tab-img { display:none;}
.tabsmt-img { display:none;}
.smt-img { display:none;}

/************************************
** ブログ投稿ページ 本文デザイン
** クリニックAI窓口
************************************/

/*
  メインカラー
  サイトに合わせたグリーン・青緑系
*/
.single-post {
  --blog-main: #16a085;
  --blog-main-dark: #117a68;
  --blog-main-light: #edf9f6;
  --blog-border: #d7ebe6;
  --blog-text: #333333;
}


/* =========================
   投稿本文の基本
========================= */

.single-post .article {
  color: var(--blog-text);
  line-height: 1.9;
}

.single-post .article p {
  margin: 0 0 1.6em;
}


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

.single-post .article h2 {
  margin: 3em 0 1.4em;
  padding: 18px 22px;

  text-align: left;
  color: #263b37;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;

  background: var(--blog-main-light);
  border: none;
  border-left: 6px solid var(--blog-main);
  border-radius: 6px;
}


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

.single-post .article h3 {
  margin: 2.5em 0 1.2em;
  padding: 0 0 10px 14px;

  color: #263b37;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;

  background: transparent;
  border: none;
  border-left: 4px solid var(--blog-main);
  border-bottom: 1px solid var(--blog-border);
}


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

.single-post .article h4 {
  margin: 2em 0 1em;
  padding: 0 0 7px;

  color: #333;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;

  background: transparent;
  border: none;
  border-bottom: 2px solid var(--blog-main);
}


/* =========================
   通常の UL / OL
   ※目次内は除外
========================= */

.single-post .article ul:not(.toc-list),
.single-post .article ol:not(.toc-list) {
  margin: 1.5em 0 2em;
  padding: 20px 25px 20px 45px;

  background: #f7fbfa;
  border: 1px solid var(--blog-border);
  border-radius: 8px;
}


/*
  Cocoon目次内のリストには
  上記のボックスデザインを適用しない
*/

.single-post .article .toc ul,
.single-post .article .toc ol,
.single-post .article #toc ul,
.single-post .article #toc ol {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
}


/* 通常本文リスト */

.single-post .article ul:not(.toc-list) > li,
.single-post .article ol:not(.toc-list) > li {
  margin: 7px 0;
  line-height: 1.8;
}


/* 通常リストのマーカー */

.single-post .article ul:not(.toc-list) > li::marker {
  color: var(--blog-main);
}

.single-post .article ol:not(.toc-list) > li::marker {
  color: var(--blog-main);
  font-weight: 700;
}


/* =========================
   目次を完全に保護
========================= */

/*
  以前のCSSの影響を目次から解除
*/

.single-post .article .toc ul,
.single-post .article .toc ol,
.single-post .article .toc li,
.single-post .article #toc ul,
.single-post .article #toc ol,
.single-post .article #toc li {
  box-shadow: none;
}


/* 目次のリンクはCocoon側の表示を優先 */

.single-post .article .toc a,
.single-post .article #toc a {
  text-decoration: none;
}


/* =========================
   TABLE
========================= */

.single-post .article table {
  width: 100%;
  margin: 2em 0;

  border-collapse: collapse;
  border-spacing: 0;

  font-size: 15px;
}

.single-post .article table th,
.single-post .article table td {
  padding: 14px 16px;

  border: 1px solid #d7e5e1;

  vertical-align: top;
  line-height: 1.7;
}

.single-post .article table th {
  background: var(--blog-main);
  color: #fff;

  font-weight: 700;
  text-align: left;
}

.single-post .article table td {
  background: #fff;
}

.single-post .article table tr:nth-child(even) td {
  background: #f7fbfa;
}


/* =========================
   引用
========================= */

.single-post .article blockquote {
  position: relative;

  margin: 2em 0;
  padding: 22px 25px;

  background: #f7fbfa;

  border: none;
  border-left: 5px solid var(--blog-main);
  border-radius: 4px;

  color: #4b5563;
}


/* =========================
   strong
========================= */

.single-post .article strong {
  font-weight: 700;
}


/* =========================
   本文リンク
   ※目次リンクは除外
========================= */

.single-post .article a {
  color: var(--blog-main-dark);

  text-decoration: underline;
  text-underline-offset: 3px;
}

.single-post .article a:hover {
  color: #0b6556;
}


/* 目次リンクは下線なし */

.single-post .article .toc a,
.single-post .article #toc a {
  text-decoration: none;
}


/* =========================
   画像
========================= */

.single-post .article img {
  max-width: 100%;
  height: auto;
}


/* =========================
   スマートフォン
========================= */

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

  .single-post .article h2 {
    margin: 2.5em 0 1.2em;
    padding: 15px 16px;

    font-size: 22px;
    border-left-width: 5px;
  }

  .single-post .article h3 {
    margin: 2em 0 1em;
    padding-left: 11px;

    font-size: 20px;
  }

  .single-post .article h4 {
    font-size: 18px;
  }


  /* 通常本文リストのみ */

  .single-post .article ul:not(.toc-list),
  .single-post .article ol:not(.toc-list) {
    padding: 16px 16px 16px 38px;
  }


  /* 目次は除外 */

  .single-post .article .toc ul,
  .single-post .article .toc ol,
  .single-post .article #toc ul,
  .single-post .article #toc ol {
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
    border: none;
  }


  .single-post .article table {
    font-size: 14px;
  }

  .single-post .article table th,
  .single-post .article table td {
    padding: 10px;
  }
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
.pc-img { display:none;}
.tab-img {display:inline;}
.tabsmt-img {display:inline;}
#header-container {display:none;}
}

/*834px以下*/
@media screen and (max-width: 834px){
.pctab-img { display:none;}
.tab-img { display:none;}
.smt-img { display:inline;}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ===== 記事カードのホバー色を薄いグリーンに変更 ===== */
.entry-card-wrap.border-element:hover,
.new-entry-card-link:hover,
.popular-entry-card-link:hover{
  border-color:#00a04c;
  box-shadow:0 4px 14px rgba(0,160,76,.18);
  background-color:#f0faf4;
  transition:.2s;
}
.entry-card-wrap:hover .entry-card-title,
.new-entry-card-link:hover .new-entry-card-title,
.popular-entry-card-link:hover .popular-entry-card-title{
  color:#00a04c;
}
 
/* ===== サイドバー見出し(新着記事・人気記事・カテゴリ)を背景グリーン+白抜きに ===== */
.widget-title{
  background:#00a04c !important;
  color:#fff !important;
  padding:10px 16px;
  border-radius:4px;
  border:none !important;
}

/*スライドインメニューを右から*/
.navi-menu-content{
	left: auto;
	right: 0;
	transform: translateX(101%);
}
.logo-menu-button img {
    max-height: 44px;
    display: block;
    margin: 0;
}	

.ai-cta-banner-toc {
    display: block;
    max-width: 500px !important;
    margin: 25px auto;
}

.ai-cta-banner-toc img {
    display: block;
    width: 100% !important;
    height: auto;
}

/* =========================================================
   固定ページ 見出しデザイン
   クリニックAI窓口
   ※トップページには適用しない
========================================================= */


/* =========================================================
   ページタイトル
========================================================= */


body.page:not(.home):not(.front-page) .entry-title {
  position: relative;

  /* 文字幅だけにするのがポイント */
  width: fit-content;
  max-width: 100%;

  margin: 0 auto 60px;
  padding: 25px 15px 38px;

  font-size: 38px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;

  border: none !important;

  /* グリーン → 青緑 → ブルー */
  background: linear-gradient(
    90deg,
    #00a44b 0%,
    #009f72 42%,
    #008ca5 65%,
    #087be5 100%
  ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;

  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}



body.page:not(.home):not(.front-page) .entry-title::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 12px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  /* 中央：グリーン */
  background: #00a44b;

  /* 左：淡いグリーン / 右：淡いブルー */
  box-shadow:
    -15px 0 0 rgba(0, 164, 75, 0.25),
     15px 0 0 rgba(8, 123, 229, 0.25);

  transform: translateX(-50%);
}


/* 以前の上側装飾を消す */
body.page:not(.home):not(.front-page) .entry-title::before {
  display: none;
}


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

  body.page:not(.home):not(.front-page) .entry-title {
    margin-bottom: 45px;
    padding: 20px 10px 34px;

    font-size: 28px;
    letter-spacing: 0.03em;
  }

  body.page:not(.home):not(.front-page) .entry-title::after {
    bottom: 10px;

    width: 6px;
    height: 6px;

    box-shadow:
      -13px 0 0 rgba(0, 164, 75, 0.25),
       13px 0 0 rgba(8, 123, 229, 0.25);
  }

}

/* =========================================================
   H1
========================================================= */

body.page:not(.home):not(.front-page) .entry-content h1 {
  position: relative;

  margin: 70px 0 32px;
  padding: 0 0 18px;

  color: #071c3d;

  font-size: 32px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: 0.02em;

  border: none;
  background: none;
}


/* H1 下線 */
body.page:not(.home):not(.front-page) .entry-content h1::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    #00a44b 0,
    #00a44b 65px,
    #e2eaf1 65px,
    #e2eaf1 100%
  );
	  text-align: left;
}


/* =========================================================
   H2
   メインのセクション見出し
========================================================= */

body.page:not(.home):not(.front-page) .entry-content h2 {
  position: relative;

  margin: 72px 0 32px;
  padding: 22px 26px 22px 32px;

  color: #071c3d;

  font-size: 27px;
  line-height: 1.55;
  font-weight: 800;
  letter-spacing: 0.02em;

  border: 1px solid #e2eee9;
  border-radius: 12px;

  background:
    linear-gradient(
      105deg,
      #f0faf6 0%,
      #f7fbfd 68%,
      #ffffff 100%
    );

  box-shadow:
    0 5px 18px rgba(7, 28, 61, 0.035);
	  text-align: left;
}


/* 左のアクセント */
body.page:not(.home):not(.front-page) .entry-content h2::before {
  content: "";

  position: absolute;

  left: 0;
  top: 17px;
  bottom: 17px;

  width: 5px;

  border-radius: 0 6px 6px 0;

  background: #00a44b;
}


/* H2右上に小さな装飾 */
body.page:not(.home):not(.front-page) .entry-content h2::after {
  content: "";

  position: absolute;

  top: 16px;
  right: 18px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #087be5;

  box-shadow:
    -12px 0 0 rgba(0, 164, 75, 0.18);
}


/* Cocoonのspan対策 */
body.page:not(.home):not(.front-page) .entry-content h2 span {
  color: inherit;
}


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

body.page:not(.home):not(.front-page) .entry-content h3 {
  position: relative;

  margin: 52px 0 26px;
  padding: 0 0 14px 22px;

  color: #071c3d;

  font-size: 22px;
  line-height: 1.6;
  font-weight: 750;
  letter-spacing: 0.02em;

  border: none;
  border-bottom: 1px solid #dfe8ee;

  background: none;
	  text-align: left;
}


/* 左の小さいマーク */
body.page:not(.home):not(.front-page) .entry-content h3::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.65em;

  width: 9px;
  height: 9px;

  border-radius: 3px;

  background: #00a44b;

  transform: rotate(45deg);
}


/* 下線の一部をグリーン */
body.page:not(.home):not(.front-page) .entry-content h3::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -1px;

  width: 48px;
  height: 2px;

  background: #00a44b;
}


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

body.page:not(.home):not(.front-page) .entry-content h4 {
  position: relative;

  margin: 42px 0 22px;
  padding: 10px 16px 10px 18px;

  color: #071c3d;

  font-size: 19px;
  line-height: 1.6;
  font-weight: 700;

  border: none;
  border-left: 4px solid #00a44b;

  border-radius: 0 7px 7px 0;

  background: #f5faf8;
	  text-align: left;
}


/* =========================================================
   H5
========================================================= */

body.page:not(.home):not(.front-page) .entry-content h5 {
  position: relative;

  margin: 36px 0 18px;
  padding: 0 0 8px 18px;

  color: #16304e;

  font-size: 17px;
  line-height: 1.65;
  font-weight: 700;

  border: none;

  background: none;
	  text-align: left;
}


body.page:not(.home):not(.front-page) .entry-content h5::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.65em;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #00a44b;
}


/* =========================================================
   H6
========================================================= */

body.page:not(.home):not(.front-page) .entry-content h6 {
  position: relative;

  margin: 30px 0 16px;
  padding: 0;

  color: #008e42;

  font-size: 15px;
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: 0.04em;

  border: none;
  background: none;
	  text-align: left;
}


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

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

  /* ページタイトル */
  body.page:not(.home):not(.front-page) .entry-title {
    margin-bottom: 42px;
    padding-bottom: 18px;

    font-size: 28px;
  }


  /* H1 */
  body.page:not(.home):not(.front-page) .entry-content h1 {
    margin: 52px 0 27px;

    font-size: 26px;
  }


  /* H2 */
  body.page:not(.home):not(.front-page) .entry-content h2 {
    margin: 52px 0 26px;

    padding: 17px 18px 17px 23px;

    font-size: 22px;

    border-radius: 9px;
  }

  body.page:not(.home):not(.front-page) .entry-content h2::before {
    top: 13px;
    bottom: 13px;

    width: 4px;
  }

  body.page:not(.home):not(.front-page) .entry-content h2::after {
    top: 13px;
    right: 13px;
  }


  /* H3 */
  body.page:not(.home):not(.front-page) .entry-content h3 {
    margin: 42px 0 22px;

    padding-left: 19px;

    font-size: 19px;
  }


  /* H4 */
  body.page:not(.home):not(.front-page) .entry-content h4 {
    margin: 34px 0 20px;

    padding: 8px 12px 8px 14px;

    font-size: 17px;
  }


  /* H5 */
  body.page:not(.home):not(.front-page) .entry-content h5 {
    font-size: 16px;
  }


  /* H6 */
  body.page:not(.home):not(.front-page) .entry-content h6 {
    font-size: 14px;
  }

}