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

/************************************
** 子テーマ用のスタイルを書く
************************************/
a:hover {
    color: #80a7ed;
}
body{
 overflow-x: hidden;
}
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #46d1c6;
}
.spinner {
  width: 100px;
  height: 100px;
  margin: 200px auto;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
/* ローディングアニメーション */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}
/* コンテンツ部分の装飾 */
.header-container {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #0bd;
 
/* 以下のコードを追加 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.loaded {
  opacity: 0;
  visibility: hidden;
}


.search-results h1 {
}

.search-results main{
	background-color:#E3EDFC;
	padding: 3%;
    margin-top: 55px;
}



.header {
background-size: cover;
}


article.type-post{
	background-color:#E3EDFC;
	margin-top: 8%;
	padding: 3%;
}

.category article.entry-card{
	margin-top: 0%;
}

.category article.entry-card h2{
    margin-top: 0;
    background: #E3EDFC;
}

.category main {
    background-color: #E3EDFC;
	padding: 3%;
	
    margin-top: 54px;
}

p {
    padding: 2%;
}

.new-entry-cards{
	display: grid;
    grid-template-columns: repeat(2, 1fr); /* 横2列に設定 */
    gap: 3%; /* アイテム間のスペース */
}

/*必要ならばここにコードを書く*/
/*【確認】ヘッダーの下の「ヘッダー」の文字を削除*/
.item-label{
  display: none;
}
/*背景色の設定*/
.main {
	background-color:#46d1c6;
}

#header {
	min-height: 1200px;
}
.content{
	max-width: 1300px;
    margin: auto;
}
/*タイトルの設定*/
#header h1,.site-name-text {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin-top:-20%;
	margin-left:300px;
	background: #f4f5ef; /* 文字に白背景をつける */
	height:20%;
	width: 800px;
	font-weight:700;
	font-size: 44pt;
	color: #16366f;
	border: solid 10px  #f4f5ef;
	line-height:120%; /* 文字の位置（高さ） */
	vertical-align:top;
	text-decoration: none;
}
/*キャッチコピーの設定*/
.tagline{
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: 300px;
    writing-mode: vertical-rl;
    text-align: left;
    background: #f4f5ef;
    height: 40%;
    font-weight: bold;
    font-size: 16.5pt;
    color: #16366f;
    line-height: 1.5em;
    width: fit-content;
    padding: 10px;
}
.article h2.back-image2{
    padding-top: 100px;
    padding-bottom: 95px;
}

/*etcを横向きに*/
#header-in > div{
	font-weight: bold;
	writing-mode: horizontal-tb;
	text-align:center;
	background: #f4f5ef; /* 文字に白背景をつける */
	margin-bottom:0%;
	margin-left:300px;
    width: 86px;
}
.date-tags{
	display: none;
}
/*段落の書式設定*/
p{
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
font-weight:bold;
font-size: 14pt;
color: #16366f;
}

/*h2見出し設定用書式*/
h2 {
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
vertical-align:middle!important;
text-align:center;
content: 100%;
font-size: 20pt;
font-weight: bold;
color: #16366f;
}

section{
    padding-left: 5%;
    padding-right: 5%;
}

.color-area-5{
    padding-left: 0;
    padding-right: 0;
}

.color-area-5 .is-layout-flex {
    gap: 0;
}

.article h2, .type-post h1, h2.related-entry-heading {
    padding-top: 100px;
    padding-bottom: 95px;
	background-color:unset;
    margin-bottom: 35px;
}

.under-entry-content{
	background-color:#E3EDFC;
}

.type-post h2 {
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: white;/*背景色*/
	opacity: 0.8;
  border-bottom: solid 3px #516ab6;/*下線*/
	text-align: left;
	margin-top: 2.5em;
}

article.type-post h3 {
  padding: 0.4em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  border-bottom: solid 3px #516ab6;/*下線*/
	text-align: left;
	margin-bottom: 1em;
	margin-top: 2em;
}

article.type-post h4 {
  padding: 0.3em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  border-bottom: solid 3px #516ab6;/*下線*/
	text-align: left;
	margin-bottom: 1em;
	margin-top: 2em;
}

article.type-post h5 {
  padding: 0.2em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  border-bottom: solid 3px #516ab6;/*下線*/
	text-align: left;
	margin-bottom: 1em;
	margin-top: 2em;
}

article .entry-content{
	margin-bottom: 3em;
}
.color-area-1 ,.color-area-5{
	background-color: #e2edfb;
}
.color-area-3 ,.color-area-4{
    background-color: #FEEEF3;
}
/*h3見出し（2行）設定用書式*/
/*見出し初期化*/
.article h3{
padding: 0;
margin: 0;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}
/*見出し設定*/
h3 {
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
vertical-align:middle!important;
text-align:center;
content: 100%;
font-size: 20pt;
font-weight: bold;
}
.article h3 {
    padding:8%;
    padding-top:12%;
}
/*h4見出し（3行）設定用書式*/
/*見出し初期化*/
.article h4{
padding: 0;
margin: 0;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}
/*見出し設定*/
h4 {
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
vertical-align:middle!important;
text-align:center;
content: 100%;
font-size: 20pt;
font-weight: bold;
}
.article h4 {
    padding:6%;
    padding-top:10%;
}
/*h5見出し（1行）設定用書式*/
/*見出し初期化*/
.article h5{
padding: 0;
margin: 0;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
background-color:#FEEEF3;
}
/*見出し設定*/
h5 {
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
vertical-align:middle!important;
text-align:center;
content: 100px;
font-size: 20pt;
font-weight: bold;
}
.article h5 {
    padding-top: 11%;
    padding-bottom: 11%;
}
/*【要確認】セクションの背景(追加CSSクラスへ転記した内容)*/
/*薄いブルーに星の背景*/
.blue-1{
background-image:url(https://aoeblog.jp/wp-content/uploads/2024/09/3a41f1dab95a2997e6e4308304d62d31.png);
margin:0;
padding:0;
height: 500%;
}
/*薄いピンク色の背景*/
.pink-section{
background-color:#FEEEF3;
margin:0;
padding:0;
height: 500%;
}
/*薄いピンクに星の背景*/
.pinkstar-section{
background-image:url(https://aoeblog.jp/wp-content/uploads/2024/09/d8030ec72a11c11965deb7103b5a4ad6.png);
margin:0;
padding:0;
height: 500%;
}
	
/*セクション背景設定*/
/*背景が薄いブルーに沢山の星の画像*/
.color-area-1{
	background-image:url(https://aoeblog.jp/wp-content/uploads/2024/11/インナーチャイルドHPデザイン-1.png);
	margin-bottom:0%;
	padding-top: 50px;
}
/*背景薄いブルー*/
.color-area-2{
	background-color:#E3EDFC;
}
/*背景が薄いピンクに星の画像*/
.color-area-3{
	background-image:url(https://aoeblog.jp/wp-content/uploads/2024/11/インナーチャイルドHPデザイン-1.png);
}
/*背景薄いピンク*/
.color-area-4{
	background-color:#FEEEF3;
	padding-top: 50px;
}
/*背景が薄いブルーに沢山の星の画像2*/
.color-area-5{
	background-image:url(https://aoeblog.jp/wp-content/uploads/2024/11/インナーチャイルドHPデザイン-1.png);
	margin-bottom:0%;
}
/*背景が薄いピンクに沢山の星の画像2*/
.color-area-6{
	background-image:url(https://aoeblog.jp/wp-content/uploads/2024/11/インナーチャイルドHPデザイン-1.png);
}


.widget-entry-cards.card-large-image .a-wrap {
    max-width: initial;
}

/*画像は中央へ*/
.wp-block-image figcaption {
    text-align: center;
}
.wrap {
  padding: 0%;
}
.editor-styles-wrapper, .entry-content {
    margin-bottom: 0%;
    margin-top: 0%;
}

/*画像を中央に*/
.wp-block-media-text{
	text-align:center;
}
.wp-block-media-text__media{
	text-align:center;
}
/* 画像のキャプションを中央揃えにする */
.wp-block-image figcaption {
	text-align: center;
}

/* ヘッダー下余白、ナビブロック、固定ページタイトルTOP非表示 */
.header-container{
    background-color: #46d1c6;
}
.main {
    margin-top: 0%;
	padding-top: 0;
	padding-left: 0%;
	padding-right: 0%;
	
}
.wrap {
	margin-top:0%;
    padding: 0%;
}
.entry-content>*, .mce-content-body>*, .article p, .demo .entry-content p, .article dl, .article ul, .article ol, .article blockquote, .article pre, .article table, .article .toc, .body .article, .body .column-wrap, .body .new-entry-cards, .body .popular-entry-cards, .body .navi-entry-cards, .body .box-menus, .body .ranking-item, .body .rss-entry-cards, .body .widget, .body .author-box, .body .blogcard-wrap, .body .login-user-only, .body .information-box, .body .question-box, .body .alert-box, .body .information, .body .question, .body .alert, .body .memo-box, .body .comment-box, .body .common-icon-box, .body .blank-box, .body .button-block, .body .micro-bottom, .body .caption-box, .body .tab-caption-box, .body .label-box, .body .toggle-wrap, .body .wp-block-image, .body .booklink-box, .body .kaerebalink-box, .body .tomarebalink-box, .body .product-item-box, .body .speech-wrap, .body .wp-block-categories, .body .wp-block-archives, .body .wp-block-archives-dropdown, .body .wp-block-calendar, .body .ad-area, .body .wp-block-gallery, .body .wp-block-audio, .body .wp-block-cover, .body .wp-block-file, .body .wp-block-media-text, .body .wp-block-video, .body .wp-block-buttons, .body .wp-block-columns, .body .wp-block-separator, .body .components-placeholder, .body .wp-block-search, .body .wp-block-social-links, .body .timeline-box, .body .blogcard-type, .body .btn-wrap, .body .btn-wrap a, .body .block-box, .body .wp-block-embed, .body .wp-block-group, .body .wp-block-table, .body .scrollable-table, .body .wp-block-separator, .body .wp-block, .body .video-container, .comment-area, .related-entries, .pager-post-navi, .comment-respond {
margin-bottom:0%;
}
.wp-block-buttons>.wp-block-button {
    display: inline-block;
    margin: 5%;
}
/* 画像中央配置 */
.wp-block-media-text {
    text-align: center;
    max-width: 50% !important;
    display: block;
    margin: auto;
}


/* マルシェ画像右の余白の削除 */
.color-area-5 .wp-block-columns {
    padding-bottom: 0%;
    padding-left: 0%!important;
	padding-right: 0%!important;
}

p {
    padding-left: 2%;
}
/* 全画面表示*/
.wrap {
    width: 100%;
	margin: 0 auto;align-content
}
/* メインコンテンツの左右余白調整*/
.editor-styles-wrapper, .entry-content {
    margin-bottom: 0%;
    margin-top: 0%;
}
/* 【確認】サイドバー余白*/


.color-area-5 > p{
	margin-left:3%;
	margin-right:3%;
}

.color-area-1 > .wp-block-buttons{
margin-left:0%;
}
.color-area-3 > .wp-block-buttons{
margin-left:0%;
}
.color-area-1 > .wp-block-buttons{
margin-left:0%;
}
.color-area-5 > .wp-block-buttons{
margin-left:0%;
}


.article h6 {
	background-color: #FEEEF3;
}

/*投稿ページの設定*/


/*検索ボックス色の設定*/
.wp-block-search__input{
  background-color:#fff;
}
#wp-block-search__input-1{
	border: solid 2px;
	border-color:#16366F;
}
/*追加(投稿ページ)*/
.article h6 {
    padding-top: 15%;
    padding-bottom: 15%;
	margin-bottom:-1%;
}
.color-area-3 > p{
	padding:4%;
	text-align: left;
}
.color-area-5 > p{
	padding:4%;
	text-align: left;
}



/*タグに余白*/
.entry-categories-tags{
margin-left: 5%;
}
.breadcrumb {
    margin-left: 5%;align-content
}
.blue2{
background-image:url(https://aoeblog.jp/wp-content/uploads/2024/10/ee96360b5b5879f2ce4bb4b7db193da5.png);
}
.pink2{
background-image:url(https://aoeblog.jp/wp-content/uploads/2024/10/ef9f6d1cf435dddc47f7cbf1754a9d28.png);
}
/************************************
** ■サイドバー カスタマイズ
************************************/
.sidebar .widget{
  line-height: 120%; /*行の高さ指定*/
}
  .sidebar .widget,
  .sidebar .ad-area {
    background: #E3EDFC;
    margin: 0;
    padding: 6% 9%;
  }
 /*サイドバー30％へ指定*/
.sidebar {
    width: 30%;
	padding: 2%;
}
 /*検索ラベル、「プロフ」「新着情報」のタイトルを削除*/
.widget-title{
  display: none;
}

 /*背景色*/
#sidebar{
background-color:#E3EDFC;
}
#block-2{
background-color:#E3EDFC;
}
#custom_html-3{
background-color:#E3EDFC;
}
#block-7{
background-color:#E3EDFC;
}
/*検索ボタン色の設定*/
.wp-block-search__button {
  background-color:#16366f;background:radial-gradient(rgb(250,242,91) 0%,rgb(255,175,46) 100%); /* 検索ボタンの色 */
  color:#16366F;
	font-weight:bold;
}
/*検索ボタンホバー時の薄くする設定*/
.wp-block-search__button:hover{
	opacity: 0.7;
}
/*他のリンクボタン色の設定*/
.wp-element-button {
  background-color:#16366f;background:radial-gradient(rgb(250,242,91) 0%,rgb(255,175,46) 100%); /* 検索ボタンの色 */
  color:#16366F;
	font-weight:bold;
}
/*プロフ下「私のインスタ」ボタン色の設定*/
.wp-element-button2 {
  background-color:#16366f;background:radial-gradient(rgb(250,242,91) 0%,rgb(255,175,46) 100%); /* 検索ボタンの色 */
  color:#16366F;
	font-weight:bold;
		width: 11em;
}
/*ボタンホバー時色薄く*/
.wp-element-button:hover{
	opacity: 0.7!important;
	color:#16366F;
}
.wp-element-button2:hover{
	opacity: 0.7;!important;
	color:#16366F;
}

/************************************
 *  カスタムプロフィール
************************************/

.side-author {
	border: solid 1px #16366F; /*プロフィールBOXボーダーカラー*/
	border-radius: 2px; /*ボックスに丸みを付ける*/
}

.side-author .author-img {
	text-align: center;
}

.side-author .author-img img{
	width: 50%; /*プロフィール画像サイズ横幅*/
	height: 50%; /*プロフィール画像サイズ縦幅*/
	display: inline-block;
	border-radius: 50%; /*プロフィール画像を丸くする*/
	margin-top: -25%; /*背景画像の上にプロフィール画像を配置*/
}
.side-author .author-background>img{
	width: 100%; /*プロフィール背景画像サイズ横幅*/
	margin: 0%; /*背景画像の上にプロフィール画像を配置*/
}		

.side-author .author-name {
	text-align: center; /*名前をセンタリング*/
	font-size: 20px; /*名前の文字サイズ*/
	font-weight: bold; /*名前を太字*/
	margin: 10% 0;
}

.side-author p {
	font-size: 14px; /*プロフィール文・文字サイズ*/
	padding: 0%;
	color: #7b7b7b; /*プロフィール文・文字カラー*/
	margin-bottom: 10%;
	margin-left: 3%;
    margin-right: 1%;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
.navi-footer-in > .menu-footer li {/*フッターの線消す*/
    border-left: 0% solid var(--cocoon-thin-color);
}
.navi-footer-in > .menu-footer li:last-child {
    border-right: 0% solid var(--cocoon-thin-color);
}
.navi-in{
	display:none;
}
.entry-content {
    margin-top: 7%;
}
#sidebar {
    margin-top: 5%;
}



/*1280px以下*/
@media screen and (max-width: 1600px){
	/*タイトルの設定*/
	#header h1,.site-name-text {
		margin-left:8%;
	}
	/*キャッチコピーの設定*/
	.tagline{
		margin-left: 8%;
	}
	/*etcを横向きに*/
	#header-in > div{
		margin-left:8%;
	}
}

/*1280px以下*/
@media screen and (max-width: 1400px){
	.content {
		padding-left: 1%;
		padding-right: 1%;
	}

}
/*1280px以下*/
@media screen and (max-width: 1280px){
	section {
		padding-left: 3%;
		padding-right: 3%;
	}
	
	.container {
		overflow: hidden;
	}
  /*必要ならばここにコードを書く*/
		/*タイトルの設定*/
	.wp-element-button2 {
		font-size: 14pt;
		width:auto;
	}
	.wp-element-button {
		font-size: 14pt;
	}

	.mobile-footer-menu-buttons {
			display: none;
	}
	.color-area-3 > .wp-block-columns > .wp-block-column {
	padding-left: 2% !important;
	padding-right: 2% !important;
	}
	.header .header-in{
		margin-top: 170px;
	}
}

/*834px以下*/
@media screen and (max-width:834px){

	.new-entry-cards{
		display: grid;
		grid-template-columns: repeat(1, 1fr); /* 横2列に設定 */
		gap: 2%; /* アイテム間のスペース */
	}
	
	#header h1,a.site-name-text{
		font-size: 30pt;
		width: 600px;
	}
	
	#header {
		min-height: 100vh;
	}
	.tagline {
    	line-height: 1.3em;
		font-size: 13.5pt;
    	padding: 8px;
    	height: 240px;
	}
	#header-in > div{
		width: 62px;
    	font-size: 15px;
	}
	
	.header .header-in{
		margin-top: 100px;
	}
	.type-post h2 {
		margin-top: 0em;
	}
}
@media screen and (max-width: 670px) {
	article.type-post{
		padding: 1%;
	}
	main.main, div.sidebar {
        padding: 1%;
    }
    #header h1,a.site-name-text {
		font-size: 25pt;
        width: 450px;
    }
	    .tagline {
        line-height: 1.3em;
        font-size: 10.5pt;
        padding: 8px;
        height: 190px;
    }
	    #header-in > div {
        width: 52px;
        font-size: 15px;
    }
	p {
		font-size: 12pt;
	}
}
/*480px以下*/
@media screen and (max-width:550px){
	.tagline {
        margin-left: 3%;
    }
	#header h1,a.site-name-text{
		font-size: 20pt;
        margin-left: 3%;
    }
	#header-in > div {
        margin-left: 3%;
    }
	
	.entry-content {
		padding-left: 0%;
		padding-right: 0%;
		margin-top: -2%;
	}
	.tagline{
			font-size: 10pt;
	}
	#header-in > div {
	font-size: 8pt;
	}
	#header-in > .test {
			font-size: 8pt;
		
        width: 50px;
		}
	#header h1,a.site-name-text {
        width: 400px;
	}
}

/*430px以下*/
@media screen and (max-width:480px){
	
	h1.entry-title{
    	padding-top: 125px;
    	padding-bottom: 95px;
	}
	#header h1,a.site-name-text {
		font-size: 17pt;
        width: 350px;
    }
	.tagline {
		font-size:9pt;
    }
	.header .header-in {
        margin-top: 0px;
    }
	#header-in > .test {
        font-size: 8pt;
        width: 47px;
    }
#header-in > div {
    }
	    .article h3 {
        padding-top: 29%;
        padding-bottom: 20%;
    }
	    .article h4 {
        padding-top: 31%;
        padding-bottom: 20%;
    }
		.article h6 {
    padding-top: 25%;
    padding-bottom: 25%;
}
	.tagline {
        height: 180px;

    }
}