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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* video */
body{overflow-x: hidden;}
div.vid_contents {width: 100%;text-align: center;margin: auto;padding: 0;background: #F8EDE3;background-attachment:fixed;}
video.vid_main {width: 100%;max-width: 4000px;}
/*  */
/*.mobile-menu-buttons .menu-button {width:100%;}*/
.mobile-header-menu-buttons {display: flex;bottom: auto;top: 0;}
.header-container-in.hlt-top-menu,#navi-in,header{display:none;}
.mobile-header-menu-buttons {box-shadow: 0 0 0px white;background-color:#fffff9;}
.logo-menu-button menu-button
/*ハンバーガーメニューの文字を消す*/
span.navi-menu-caption.menu-caption {display: none;}
/*検索の文字を消す*/
span.search-menu-caption.menu-caption {display: none;}
/* title */
.site-name-text, {
font-size: 30px;
/* font-family: "Vollkorn", serif; */
font-weight: 600;
color:#596651;
}
.navi-in > ul li {
width: 150px;
}
.mobile-menu-buttons .menu-button > a{
font-size: 26px;
/* font-family: "Vollkorn", serif; */
font-weight: 600;
color:#596651;
}
.mobile-menu-buttons .menu-caption {display:none;}
.fa-bars, .fa-search, .mobile-menu-buttons .menu-caption {color:#596651;
}
.menu-drawer a {
color: #333;
text-decoration: none;
padding: 6px;
line-height:1.2em;
display: inline-block;
}
.fab, .far {
    font-weight: 900;
}
/*  
.box-menus {
flex-wrap: nowrap;
}*/

/*フロント固定ページのタイトル、投稿日、更新日、投稿者名を非表示*/
.home.page h1.entry-title,.home.page .post-date,.home.page .post-update,.home.page .author-info{display: none;}
/* フロントページのアイキャッチ削除 */
#post-2 > header > div.eye-catch-wrap{display:none;}
/* 固定ページの日付を消す */
.page .date-tags {display: none;}
/* 背景色透過…bodyはテーマで指定 */
.main, .sidebar, .footer {background-color: transparent;}
/* gmenu */
.navi {background-color: transparent;}
/* */
.author-info{display:none;}
/*  */
/* h2 */
.article h2 {
background-color:transparent;
position: relative;
/* color: #333; */
display: inline-block;
margin: 47px 25px;
text-shadow: 0 0 4px white;
}
.article h2::before {
content: "";
position: absolute;
background-image:url(//coconokaori.com/wp-content/uploads/2025/02/sunh2.png);
width: 75px;
height: 80px;
top: 50%;
left: 0%;

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: -1;
}

/* h3 メニュー */
.article h3 {
	border:none;
	color: #f77400; /* 文字色 */
	padding: 10px 10px 10px 60px; /* 上・右・下・左の余白 */
	position: relative;
}
.article h3:before {
	content: '＊*'; /*花に見せかけるためのアスタリスク*/
	color: #fff; /* アスタリスクの色 */
	display: inline-block;
	font-size: 30px; /* アスタリスクの大きさ */
	font-weight: bold;
	position: absolute;
	top: 0px;
	left: 0px;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	text-shadow: 0px 0px 6px #f9b78f, 0px 0px 4px #f9b78f, 0 0 0.5px #f9b78f; /* アスタリスク周りの影 */
}
.article h3:after {
	border-bottom: 2px dotted #f77400; /* 下線 */
	content: '';
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
}

/* h3t メニュー */
.h3t {
position: relative;
padding: 1.5rem .5rem;
text-align: center;
border: 2px solid #ff8400;
background: #fffff9;
font-size: 22px;
color: #ff8400;
font-weight: bold;
text-shadow: #FC0 1px 0 10px;
margin-top:50px;
}

.h3t:before,
.h3t:after {
position: absolute;
content: '';
}

.h3t:before {
top: -40px;
left: calc(50% - 43px);
width: 80px;
height: 80px;
border: 2px solid #ff8400;
border-radius: 50%;
background: #fffff9;
}

.h3t:after {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fffff9;
}

.h3t i {
font-size: 30px;
font-size: 3rem;
line-height: 60px;
position: absolute;
z-index: 1;
top: -40px;
left: calc(50% - 40px);
width: 80px;
height: 60px;
text-align: center;
}

.h3t span {
position: relative;
z-index: 1;
}
/* h1l */
.h1l{text-align:left;}
/* h4 */
.article h4 {
color: #f77400;
border-top: 2px solid #f77400;;
border-bottom: 2px solid #f77400;
background-color: #fff9f3;
}
/* hosoku1 */
.hosoku1{font-size:.8em;font-weight:600;border-left:3px solid #ff8400;padding-left:15px;}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/* BOXcc1 */
.boxcc1 {
font-size: 1.2em;
margin: 2em 0;
background: #fff9f3;
}
.boxcc1 .box-title {
font-size: 1.6em;
background: #f77400;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.boxcc1 p {
padding: 15px 20px;
margin: 0;
}
/* 目次toc */
.toc {
  /* 記事中の目次全体の枠線を設定 */
  border: 1px solid rgb(239 82 45);
  border-radius: 4px;
  padding: 0;
  display: block;
}
.nwa .toc {
  /* サイドバーの目次全体の枠線を設定 */
  border: 1px solid rgb(239 82 45);
  border-radius: 4px;
  padding: 0;
}
.toc-title {
  padding: 8px 16px;
  text-align: left;
  font-size: 24px;
  font-weight: bold;
}
.toc-title:before {
  /* 目次の前のアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f03a";
  margin-right: 8px;
  font-size: 20px;
  color: rgb(239 82 45);
}
.toc-content {
  padding: 8px 16px;
  /* 目次の下の区切り線を設定 */
  border-top: 1px solid rgb(239 82 45);
;
}
.sidebar .toc-content {
  /* サイドバーの目次をスクロール可能に変更 */
  overflow-y: auto;
  max-height: 390px;
}
.toc-content ol {
  position: relative;
}
.toc-content ol li {
  padding: 0em 0 0em 0.5em;
  list-style-type: none !important;
  /* 目次の全体的な余白を設定 */
  margin: 0.3em;
}
.sidebar .toc-content ol li {
  /* サイドバーの目次の全体的な余白を設定 */
  margin: 0.1em;
}
.toc-list>li>a::before {
  /* H2見出しの前のアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  position: absolute;
  left: 0;
  color: rgb(239 82 45);

  font-weight: bold;
}
.toc-list>li li a::before {
  /* H3以降の見出しの前のアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  position: absolute;
  left: 0.5em;
  color: rgb(239 82 45);
  font-weight: bold;
}
.toc-list li a {
  /* H2見出しを強調 */
  font-size: 1.1em;
  font-weight: 600;
}
.toc-list>li li a {
  /* H3以降の見出しを標準の見た目に変更 */
  font-size: 1em;
  font-weight: 600;
}
.toc-list>li li ol li a {
  /* H4以降の見出しを標準の見た目に変更 */
font-size: 1em;
font-weight: 500;
}
/* btn */
.btn-coco1{background-color: #596651;border-radius: 10px;}
/* parallax */
.parallax {min-height:450px;margin: 0 calc(50% - 50vw);width: 100vw;background-position: center bottom;background-repeat: no-repeat;
background-attachment:fixed;background-size:cover;}
.parallax.bg-01 {background-image:url(//coconokaori.com/wp-content/uploads/2025/02/px1.jpg);}
.parallax.bg-02 {background-image:url(//coconokaori.com/wp-content/uploads/2025/02/px2.jpg);}
.parallax.bg-03 {background-image:url(//coconokaori.com/wp-content/uploads/2025/02/px3.jpg);}
.parallax.bg-04 {background-image:url(//coconokaori.com/wp-content/uploads/2025/02/px4.jpg);}

.fix1{background-attachment:fixed;}

/*     */

/*     */

/*---SNSボタンを丸くする---*/
#main .button-caption {display: none;}
/*SNSシェアボタン*/
.sns-share-message{font-weight: bold;color: #875d5b;}
.sns-share-buttons {flex-wrap: nowrap;justify-content: center;}
.sns-share-buttons a {border-radius: 50%;font-size: 20px;margin: 0 10px;}
#main .sns-share a {width: 40px;height: 40px;}
/*SNSフォローボタン*/
.sns-follow-message{font-weight: bold;color: #875d5b;}
.sns-follow-buttons {justify-content: center;}
.sns-follow-buttons a {border-radius: 50%;font-size: 20px;margin: 0 10px;}
#main .sns-follow a {width: 40px;height: 40px;}
.sns-buttons a {background-color: #596651;}
/* Box-Menu */
.box-menu-icon, .box-menu-description, .box-menu-label{
	color: #ff8400;
}
.box-menu {
background: transparent;
box-shadow: inset 1px 1px 0 0 #ff840026, 1px 1px 0 0 #ff840026, 1px 0 0 0 #ff840026;
}
/* box menu
.box-menus {
flex-wrap: wrap;
} */
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (min-width: 1024px) {
    .mobile-menu-buttons .menu-button {
        width: 33%;
    }
}
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
#header .site-name-text {font-size: 28px;}
/*h3t*/
	.h3ts{display:block;}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
#header .site-name-text {font-size: 28px;}
}