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

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


/* エディター横幅を変える */
.wp-block {
    max-width: 900px!important;
    margin-left: 10px!important;
    margin-right: 10px!important;
}


/* メインカラム、サイドバー上下 */
.main {
   top: 58px;
   min-height: 900px;
   position: relative;
}

.sidebar {
   top: 58px;		
   position: relative;
}


/* ヘッダーロゴ */
.header-in .logo {
   text-align: left;
   margin-left: 57.5px; /* home側と異るので注意 */
}


/* キャッチフレーズ */
.textwidget {
   position: relative; display: flex;
   font-size: 14px;
   line-height: 1.5em;
   bottom: -5px;
   text-shadow:#66CCCC 0px 0px 10px; /* 影を付ける */
}


/* ヘッダー領域追加コンテンツの位置 */
.add-header-contents {
   position: relative;
   bottom: 80px;
   left: 770px;
   width: 255px;
}

.search-box input::placeholder { /*検索窓プレースホルダー */
   font-size: 15px;
   color: #494949;
   opacity: 1;
}

.search-edit,.search-box input[type="text"] {
   font-size: 15px;
   opacity: 0.5;
   height: 35px; /* 検索窓の高さ */ 
   border: 1px solid #494949;
   border-radius: 6px; /* 枠線（ボーダーの角）を丸く */
}

.search-submit {
   color: #494949; /* アイコンの色 */
   opacity: 0.7;
   position: absolute;
   margin: 2px 6px 6px;
   cursor: pointer;
   line-height: 0; /* 検索アイコンの高さや位置 */ 
   border: none;
   padding: 0;
}


/* グローバルナビメニュー */
#navi .navi-in a:hover{
   color: #00BFFF; /* ホーバー色 ブログ：この位置でないと機能しない */
   background: transparent;
}

#navi .navi, .navi-in{ /* グローバルナビの上下位置 */
   width: 1000px;
   margin: -72px auto -77px;
}

#navi .navi-in > .menu-header .item-label{
   font-size: 16px; /* フォントサイズ */
}

#navi .navi-in > .menu-header .sub-menu .item-label{
	font-size: 14px; /* サブメニューフォントサイズ */
	text-align: center;
}

#navi .navi-in .has-icon {
   display:none; /* サブメニューありのVを消す */
}


/* フッター */
.footer {
   padding: 5px 0 40px;
   top: 59px;
   position: relative;
}


/* 固定ページタイトル・投稿日・更新日・投稿者名非表示 */
.page .entry-title,
.page .post-date,
.page .post-update,
.page .author-info{
   display: none;
}

/* 固定ページRSSの投稿日を表示 */
.page .rss-entry-cards .post-date{
  display: contents;
}


/* サイドバー */
.widget_recent_entries ul li a{ /* 最近の投稿の行間・フォントサイズ */
   line-height: 1.4;
   font-size: 13px;
   margin-bottom: -16px;
}

.widget_categories ul li a{ /* カテゴリーの行間・フォントサイズ */
   line-height: 0.4;
   font-size: 13px;
}

.sidebar h3{
   color:#494949; /* 見出し */
   background-color: #bae3fc;
   padding:7px 20px;
}

#sidebar .toc { /* 目次 */
   font-size: 13px;
   width:100%;
   margin-top: 0;
   border-radius: 5px;
   padding: 10px 5px;
   border: 1px solid #ebebeb;
   box-shadow:0px 0px 10px #e2e2e2;
}


/* 本文の見出しの修飾 */
.article h2 {
   font-size:22px;	
   color: #494949;
   background: #bae3fc;
   padding:10px 0px 10px 20px;
   border-top:none;
   border-bottom:none;
   margin-top:60px;
   margin-bottom:30px;
   margin-left:-15px;
   margin-right:-15px;
}

.article h3 {
   font-size:18px;	
   color: #494949;
   padding: 0px 0px 0px 10px;
   border-left:20px solid #bae3fc;
   /*border-left:20px solid #D2F5F0;*/
   border-right:none;
   border-top:none;
   border-bottom:none;
   margin-top:35px;
   margin-bottom:20px;
   margin-left:-10px;
}

.article h4 {
   font-size:16px;	
   color: #494949;
   padding:0px 0px 0px 10px;
   margin-top:30px;
   margin-bottom:10px;
   margin-left:-18px;
   border-top:none;
   border-bottom:none;
}

h4:before {
   content: '● ';
   color: #bae3fc;
}

.article h5 {
   font-size: 15px;	
   text-align: right;
   margin-top: -68px;
   margin-left: 610px;
   border-bottom: none;
	}


/* 区切り線色、共通グレー */
.bar-gray-all {
   display: block;
   width: 90%;
   height: 1px;
   background-color: #D2D2D2;
   border: 0; /*デフォルトデザインでは線がある場合があるので、消しておく。*/
}


/* SNSボタンシェア */
.button-caption {
   display: none; /* キャプション非表示 */
}

.sns-share-buttons {
   flex-wrap: nowrap; /* 折り返さない */
   justify-content: center; /* 中央寄せ */
}

.sns-share-buttons a {
   font-size: 18px; /* アイコンのサイズ */
   margin: 0 3px!important; /* ボタン同士の間隔 */
}

.sns-share a {
   width: 160px!important; /* ボタンの横幅 */
   height: 32px; /* ボタンの高さ */
}

.sns-group-viral ul {
   display: flex; /* ボタン均等割り */
}


/* SNSフォローボタン */
.sns-follow-buttons {
   justify-content: center; /* 中央寄せ */
}
.sns-follow-buttons a {
   border-radius: 50%; /* 丸くする */
   font-size: 25px; /* アイコンのサイズ */
   margin: 0 10px!important; /* ボタン同士の間隔 */
}
.sns-follow a {
   width: 35px; /* ボタンの横幅 */
   height: 35px; /* ボタンの高さ */
}


/* トップへ戻るボタン */
.go-to-top {
   right: 40px;
   bottom: 35px;
}

.go-to-top-button {
   border-radius: 50%; /* 丸くする */
   width: 50px;
   height: 50px;
   font-size: 30px; /* アイコンフォントのサイズ */
   padding-bottom: 2px;
}


/* 最終更新日リンクカラー */
.link-color a {
   color:#ffff99;
}

.link-color a:hover {
   color:#ff0000;
}


/* 囲み枠角丸 */
.waku1{
   position: relative;
   padding:20px 25px 10px;
   border-radius:15px 0px 15px 0px / 15px 0px 15px 0px; /* 左上と右下 */
}

.waku1 .box-title {
   position: absolute;
   display: inline-block;
   top: -13px;
   left: 40px;
   padding: 0 10px;
   line-height: 1;
   font-size: 18px;
   background: #ffffff;
}

.waku1 p {
   margin: 0; 
   padding: 0;
}

.waku2{
   position: relative;
   padding:20px 25px 10px; /* 四隅角 */
}

.waku2 .box-title {
   position: absolute;
   display: inline-block;
   top: -13px;
   left: 40px;
   padding: 0 10px;
   line-height: 1;
   font-size: 18px;
   background: #ffffff;
}

.waku2 p {
   margin: 0; 
   padding: 0;
}

.waku3{
   position: relative;
   padding:20px 25px 10px;
   border-radius:0px 15px 0px 15px / 0px 15px 0px 15px; /* 左下と右上 */
}

.waku3 .box-title {
   position: absolute;
   display: inline-block;
   top: -13px;
   left: 40px;
   padding: 0 10px;
   line-height: 1;
   font-size: 18px;
   background: #ffffff;
}

.waku3 p {
   margin: 0; 
   padding: 0;
}

.waku-memo{
   position: relative;
   padding: 45px 55px 35px;
   border: 1px solid #66cccc;
   border-radius:15px / 15px; /* おぼえ書き */
}

.waku-memo::before {
   background-color: #fff;
   font-size: 18px;
   text-shadow: #00cccc 0px 0px 15px;
   content: "最新おぼえ書き";
   left: 40px;
   padding: 0 .5em;
   position: absolute;
   top: -20px;
}

.waku-memo p {
   margin: 0; 
   padding: 0;
}

.waku-blog{
   position: relative;
   padding: 60px 0 20px 80px;
   border: 1px solid #87cefa;
   border-radius:15px / 15px; /* ブログ */
}

.waku-blog::before {
   background-color: #fff;
   font-size: 18px;
   text-shadow: #00BFFF 0px 0px 15px;
   content: "最新ブログ";
   left: 40px;
   padding: 0 .5em;
   position: absolute;
   top: -20px;
}

.waku-blog p {
   margin: 0; 
   padding: 0;
}


/* 縦画像の切り取り表示 */
.img-box {
   margin: 0;
}
.img-box img {
   width: 300px;
   height: 225px;
   object-fit: cover;
}
.top {
   object-position: 0 0
}
.bottom {
   object-position: 100% 100%
}


/* 特定の画像の枠線を消す〜体重体組織計を買い替えた等 */
.waku-nasi img {border-style: none!important;}


/* 画像を4つ並べる */
.column4-wrap{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;
   margin-left: 35px;
}
.column4-inner{
   flex-basis:calc((100% - 28px) / 4);
   max-width:calc((100% - 28px) / 4);
   margin-top:20px;
   margin-bottom: -30px;
}
/* 1段目だけ上下マージンを無くす */
.column4-inner:nth-of-type(1),
.column4-inner:nth-of-type(2),
.column4-inner:nth-of-type(3),
.column4-inner:nth-of-type(4){
   margin-top:-10px;
}
/* 最終行のアイテム数が2つOR3つの時、左右に振り分けられるのを防ぐ */
.column4-inner:nth-of-type(4n-1):nth-last-of-type(1),
.column4-inner:nth-of-type(4n-2):nth-last-of-type(1){
   margin-right:auto;
   margin-left:20px;
}
.column4-inner:nth-of-type(4n-2):nth-last-of-type(2){
   margin-right:0;
   margin-left:20px;
}


/* ギャラリー */
.gallery { /** ギャラリーを囲むボックス **/
   width: 100%;
   overflow: hidden;
}

.gallery-item { /** 画像共通のスタイル **/
   margin-bottom: 5px!important;
}

.gallery-icon img {
   width: 100%;
   height: auto;
}

.gallery-caption { /** キャプション **/
   color: #494949!important;
   font-size: 14px!important;
   margin-top: -5px!important;
   margin-bottom: 5px!important;
}

.gallery-columns-2 .gallery-item { /** 2カラム **/
   width: 48%;
   margin: 0 5px;
}

.gallery-columns-3 .gallery-item { /** 3カラム **/
   width: 31.8%;
   margin: 0 5px;
}

.gallery-columns-4 .gallery-item { /** 4カラム **/
   width: 23.99%;
   margin: 0 5px;
}

.gallery-columns-5 .gallery-item { /** 5カラム **/
   width: 18.99%;
   margin: 0 5px;
}

.gallery-columns-8 .gallery-item { /** 8カラム **/
   width: 119.7px;
   margin: 0 3px;
}

.gallery-columns-8 .gallery-caption { /** 8カラム キャプション **/
   color: #494949!important;
   font-size: 12px!important;
   margin-top: -2px!important;
   line-height: 17px;
   margin-bottom: 10px!important;
}


/* メインカラム目次 */
.toc { /* 目次のエリア */
   margin-top: 40px;
   border-radius: 10px;
   padding: 15px 60px 15px 50px;
   border: 2px solid #ebebeb;
   box-shadow:0px 0px 10px #e2e2e2;
}

.toc-title{ /* 目次タイトル */
   font-size: 16px;
   position: relative;
   margin: 0 -20px;
   border-bottom: 1px solid #e2e2e2;
}

.toc-title::after { /* 閉じるの色 */
   color:#337ab7;
}

.toc-list > li a {
   font-weight: 400;
   display: block;
   margin-top: -3px;
   margin-left: 10px;
}

.toc-list > li a::before {
   font-family: "Font Awesome 5 Free";
   content: "\f0da";
   font-weight: 900;
   font-size: 17px;
   color: #87cefa;
   margin-right: 8px;
}

.toc-list > li li a {
   font-weight: normal;
   margin-top: -5px;
   margin-left: 5px;
}

.toc-list > li li a::before {
   content: "\f105";
   font-weight: 900;
   font-size: 15px;
   color: #87cefa;
   margin-right: 8px;
}

.toc a:hover {
   color: #333333;
   text-decoration: underline;
}


/* 番号付きリストの番号を丸数字に変更 */
ol.marumoji{
   counter-reset: my_counter;
   list-style: none;
}

ol.marumoji li{
   position: relative;
}

ol.marumoji li::before{
   position: absolute;
   top: 6px;
   content: counter(my_counter);
   counter-increment: my_counter;
   width: 15px;  height: 15px;
   line-height: 16px;
   margin-left: -25px;
   text-align: center;
   font-size: 12px;
   /*font-weight: bold;*/
   border: 1px solid black;
   border-radius: 50%;
}


/* 箇条書きリストを三角▷に変更 */
ul.sankaku{
   counter-reset: my_counter;
   list-style: none;
}
 
ul.sankaku li::before{
   font-family: "Font Awesome 5 Free";
   content: "\f0da";
   font-weight: 900;
   font-size: 18px;
   line-height: 0;
   color: #8a8a8a;
   margin-left: -15px;
   margin-right: 7px;
}

/* 箇条書きリストを矢印＞に変更 */
ul.yajirusi{
   counter-reset: my_counter;
   list-style: none;
}
 
ul.yajirusi li::before{
   font-family: "Font Awesome 5 Free";
   content: "\f105";
   font-weight: 900;
   font-size: 18px;
   line-height: 0;
   color: #8a8a8a;
   margin-left: -15px;
   margin-right: 7px;
}


/* ドロップダウンリスト */
summary {
   position: relative;
   display: block; /* 矢印を消す */
   padding: 10px 10px 10px 50px; /* アイコンの余白を開ける */
   cursor: pointer; /* カーソルをポインターに */
   color: #494949;
   background-color: #d2f5f0;
}
summary:hover {
   color: #00b3b3;
}

details[open] summary {
   color: #00b3b3;
}

summary::-webkit-details-marker {
   display: none;　/* 矢印を消す */
}

/** 疑似要素でアイコンを表示 **/
summary:before,
summary:after {
   content: "";
   margin: auto 0 auto 20px;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
}

summary:after {
   font-family: "Font Awesome 5 Free";
   content: "\f0da";
   font-weight: 900;
   font-size: 20px;
   top: 7px;
   left: 10px;
}

details[open] summary:after {
   transform: rotate(90deg); /* アイコンを回転 */
   left: 4px; /* 位置を調整 */
   top: 5px; /* 位置を調整 */
}


/* Cocoon カスタムテキスト */
.cocoon-custom-text-1{
	color: #0000ff; /* 濃い青 */
}

.cocoon-custom-text-2{
	color: #0066ff; /* 青 */
}

.cocoon-custom-text-3{
	color: #e93323; /* 赤 */
}


.cocoon-custom-text-4{
	color: #008080; /* 緑 */
}


/* 検索結果の各アイテムの間に下線を引く */
/*.search-results .hentry,
.search-results article {
    border-bottom: 1px solid #e3e3e3; /* 線の太さ、種類、色 */
/*    padding-bottom: 20px;          /* 線と下のコンテンツの余白 */
/*    margin-bottom: 20px;           /* 線と上のコンテンツの余白 */
/*}*/



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

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


/* フッター */
@media screen and (max-width: 834px) {
.footer {
	 padding: 0 0; /* レスポンシブサイズ用の余白 */
 }
}
.footer-bottom {
	margin-top: 0; /* 不要な余白をリセット */
}
.copyright {
	margin-top: 0; /* 不要な余白をリセット */
}
.content {
  margin-bottom: -16px; /*フッターとコンテンツ間の縦幅 */
}

/* 検索窓タブレット・スマホの時は非表示 768px以下 */
@media screen and (max-width: 768px){
.add-header-contents {display: none; }
}

/* メインカラム目次 */
@media (max-width:880px){
   .toc-list > li a {
      margin-left: -10px;
   }
   .toc-list > li li a {
      margin-left: -2em;
   }
   .toc-list > li li a::before {
      left: 3px;
   margin-bottom:1px;
   }
}

/* ギャラリー */
@media screen and (max-width: 640px) {
   .gallery-columns-3 .gallery-item {
      width: 48%;
      margin: 0 1%;
   }
}

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