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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.logo-image{
	padding-bottom:0;
}
.tagline {
    margin: 0 auto;
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    width: 320px;
    background-color: #f4c01e;
	border-radius: 50%;
	padding: 1em;
}
/* .tagline::after{
	content:"【子育て】【健康】【メタバース（ゲーム開発等）】について情報発信をしています♪簡単なゲーム開発を学び、お子さんにドヤ顔で教えてあげて下さい♪";
	width:280px;
	display:block;
	margin: 10px auto;
	color: #333;
    font-size: 0.9rem;
	font-weight:400;
} */
.header-in{
	justify-content: space-evenly;
}
#navi .navi-in a:hover{
	background-color:#abc2ff;
}

.navi .item-label{
	transition:all ease .3s;
	color:#333;
}

#navi .navi-in a:hover .item-label{
	transform:translatey(-5px);
	font-size: 1.1em;
}

.widget-entry-cards.card-large-image .a-wrap {
    max-width: 280px;
}
.recommended.rcs-card-margin a {
    margin: 1% 1%;
}

.widget-entry-cards.large-thumb-on .a-wrap:hover{
	opacity:1;
	overflow:inherit;
}

.widget-entry-cards.large-thumb-on .a-wrap:hover .e-card{
	transform:scale(1.2);
}

.widget-entry-cards.large-thumb-on .e-card{
	transition:all ease .3s
}

body.page {
	background-color: #fff;
}
body.page .main{
	    padding: 20px 60px;
}
body.page .main .article .entry-title{
	text-align: center;
}
body.page .article h2{
	color:#333;
}
body.single .article h2{
	color:#333;
}
body.single .main .article .entry-title{
	text-align: center;
}
body.single {
	background-color: #fff;
	background-image: none;
}

.main{
	background-color: transparent;
}

.wrap{
	max-width: 100%;
}

.list-new-entries .ecb-entry-border .entry-card-wrap{
    border: 3px solid #f4c01e;
	background-color: #ffffff;
	transition: all ease .3s;
	border-radius: 5px;
}

.ecb-entry-border .entry-card-wrap:hover {
    transform: translateY(3px);
    box-shadow: 0 3px 15px 3px rgb(255 248 30 / 96%);
}

.sidebar{
	background-color:transparent;
}

.sidebar .widget_author_box {
    background-color: #fff;
	border: 3px solid #f4c01e;
    border-radius: 5px;
}

.sidebar .widget_author_box .author-box{
	border:none;
}

.sidebar h2, .sidebar h3 {
    text-align: center;
	color:#333;
	margin-top:0;
}

.sidebar .widget_popular_entries {
    background-color: #fff;
}

.widget-entry-cards .a-wrap {
    border-bottom: 2px dotted #f4c01e;
}

.widget-entry-cards .a-wrap:last-child{
	border-bottom: none;
}

.widget-entry-cards .a-wrap:hover{
	background-color:#f4c01e;
}

.sidebar-scroll .widget-sidebar-scroll.widget_block {
    background-color: #fff;
}

.wp-block-search__label {
    color: #333;
}

.footer-bottom-logo {
    float: none;
    top: 0;
    position: absolute;
}

.footer-bottom-content {
    float: none;
    text-align: center;
}
.eye-catch{
	flex: 1;
}
.eye-catch img{
	width: 100%;
}

.mobile-menu-buttons{
	background-color: transparent;
	box-shadow:none;
}

.key-btn {
    background-color: #ffffff;
    border: 3px solid #f4c01e;
}

.key-btn:hover{
	background-color:#f4c01e;
}

.page-numbers{
    background-color:#ffffff;
    border:3px solid #f4c01e;
}

.pagination .current{
	background-color:#ffffff;
    border:3px solid #f4c01e;
}

.pagination a:hover{
	background-color:#f4c01e;
}

.cat-label{
    background-color:#060558;
    font-size:12px;
}

.list-title {
    font-size: 1.8rem;
    color: #333;
	margin-top: 0;
}
.list-title-in {
    padding: 0 40px;
}
.list-title-in:before, .list-title-in:after {
    content: '\f005';
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: auto;
    height: auto;
    color: #333;
    background-color:transparent;
}

.wp-element-button{
    color: #333;
    font-weight: bold;
    background-color: #f4c01e;
    transition: all ease .3s;
}

.wp-element-button:hover{
    transform: translateY(5px);
}

.widget_block ul li a:hover{
    background-color: #f4c01e;
}

.list-new-entries {
    margin-bottom: 4em;
}

.list-more-button{
    background-color: #f4c01e;
    font-weight: bold;
    transition: all ease .3s;
}
.list-more-button:hover{
    background-color: #f4c01e;
    transform: translateY(5px);
}

.new-entry-card-title{
    color:#333;
}

.list-column {
    border: 5px solid #f4c01e;
    border-top: none;
    border-radius: 30px;
    margin-bottom: 5rem;
}
.list-column .list-title {
    margin-top: -1.5rem;
}
.list .widget-entry-cards .a-wrap {
    border-bottom: 1px dashed #f4c01e;
	transition: all ease .3s;
}
.list .widget-entry-cards .a-wrap:hover{
    background-color: #f4c01e;
}

.appeal {
    margin-bottom: 0;
}
#appeal-in {
    width: 50%;
    margin: 0 0 0 auto;
    padding: 0 5%;
}
.appeal-content {
    background-color: #f4c01e;
    height: 180px;
    color: #1f1f1f;
    padding: 0.5em;
    border-radius: 5%;
    font-weight:bold;
	margin: 0;
	position: relative;
}
.appeal-content::after{
    content: "";
    width: 30px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
    border-right: 15px solid #f4c01e;
    position: absolute;
    top: 20px;
    left: -58px;
}

.mobile-menu-buttons .menu-icon {
    color: #000;
}
.mobile-menu-buttons .menu-caption {
    color: #000;
}

.appeal-message {
    text-align: left;
	font-size: 0.9rem;
}

body.page-id-38{
    background-color: #060558;
}
.page-id-38 .entry-title{
    color: #fff;
}
.page-id-38 .card-title{
    color: #fff;
}
.page-id-38 .sns-share-message{
    color: #fff;
}
.page-id-38 .sns-follow-message{
    color: #fff;
}
.page-id-38 .fa-pencil-alt:before{
    color: #fff;
}
.page-id-38 .breadcrumb-home{
    color: #fff;
}
.page-id-38 .breadcrumb-caption{
    color: #fff;
}
.page-id-38 .date-tags {
    color: #fff;
}

body.page-id-32{
    background-color: #060558;
}
.page-id-32 .entry-title{
	color: #fff;
}
.page-id-32 .sns-share-message{
    color: #fff;
}
.page-id-32 .sns-follow-message{
    color: #fff;
}
.page-id-32 .fa-pencil-alt:before{
    color: #fff;
}
.page-id-32 .breadcrumb-home{
    color: #fff;
}
.page-id-32 .breadcrumb-caption{
    color: #fff;
}
.page-id-32 .date-tags {
    color: #fff;
}
.page-id-32 form{
    color: #fff;
}

.archive-title{
	color: #fff;
}

.breadcrumb{
	color: #fff;
}
.breadcrumb-caption{
	color: #fff;
}

@keyframes star {
    0% {
        background-position: 0 0;
    }
    100%{
		background-position: 0 100%;
    }
}


body.public-page {
    background-size: inherit;
    background-repeat: repeat;
	background-attachment: inherit;
	background-position: 0 0;
    animation : star 14s infinite linear;
}

.ss-top {
    margin-top: 40px;
    margin-bottom: 40px;
}
.date-tags {
    margin-bottom: 2em;
    padding-bottom: 1.5em;
    border-bottom: 15px dotted　#f4c01e;
    font-size: 1.5rem;
}

#toc{
    margin: 1em auto 6em;
}

.sidebar .widget_info_list{
    background-color: #fff;
}

/************************************
**自作レスポンシブ
************************************/
/*1023px以上*/
@media screen and (min-width: 1023px){
  .appeal-in {
    display: none;
    }
}

/*950px以下*/
@media screen and (max-width: 950px){
	.footer-bottom-logo{
		display: none;
	}
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	.no-mobile-header-logo .header .header-in {
    min-height: 300px;
	}
	.mobile-header-menu-buttons {
		display: none;
	}
	.no-mobile-header-logo #header .logo-header {
		display: block;
	}
	.appeal{
		display: none;
	}
	.navi-in .menu-pc {
		display: flex;
	}
	.mobile-header-menu-buttons {
		display: none;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	html #wpadminbar{
		display:none;
	}
	.header-container{
		margin-top:-50px;
	}
	.search-edit{
		background-color: #ededa1;
	}
	.search-submit{
		color:#818181;
	}
	.menu-content{
		background-color: #ededa1;
	}
	.menu-content .menu-drawer:before{
		content:"MENU";
		font-size:2rem;
		font-weight: bold;
		color:#f4c01e;
		display: block;
		text-align: center;
		background-color: #060558;
		margin-bottom: 30px;
    	margin-top: 30px;
	}
	.menu-drawer li {
		margin-bottom: 15px;
		border-bottom: 2px dotted #f4c01e;
	}
	.menu-drawer i.fas {
		margin-right: 10px;
	}
	.menu-drawer a {
		color: #f4c01e;
	}
	.entry-content>p {
    	line-height: 1.8;
		margin-bottom: 2.8em;
	}
	.mobile-menu-buttons{
	   line-height: 1.3;
	   min-height: 60px;
	}
	.fa-bars:before {
		transform: scale(1.6);
		display: block;
		margin-top: 10px;
	}
	.fa-search:before {
		display: block;
		transform: scale(1.4);
		margin-top: 10px;
	}
	.logo-menu-button img {
		max-height: 50px;
	}
	main.main{
		padding:5px;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.header{
		min-height: 60px;
		background-image: none;
	}
	.header-container {
        position: relative;
    }
	.tagline {
		font-size: 15px;
		position: absolute;
		bottom: -5px;
		left: 0;
		right: 0;
		margin: 0;
		color: #ff4e4e;
		display: none;
    }
	.body.home {
		background-color: #fff;
	}
	body.single .main{
		padding:0 10px;
	}
	body.page .main{
		padding:0 10px;
	}
	 .footer-bottom-logo img{
		display:none;
	}
	 #footer a{
		white-space: nowrap;
	}
	.widget-entry-cards .a-wrap{
		border-bottom: none;
	}
	.ecb-entry-border .entry-card-wrap{
		border: 2px solid #f4c01e;
		border-radius: 5px;
	}
	.entry-card-content {
		padding-bottom: 50px;
	}
	.entry-card-meta{
		bottom: -5px;
	}
	.e-card-title{
		margin-top: 40px;
		margin-bottom: 5px;
		text-align: center;
	}
	.ect-vertical-card.sp-entry-card-1-column .entry-card-wrap{
		border-radius: 5px;
   		box-shadow: 0 3px 5px #a9a9a9;
		padding: 0 0 10px 0;
		overflow: hidden;
		margin-bottom: 50px;
	}
	.e-card-meta{
		margin-top: 8px;
	}
	.key-btn:hover{
	    color:#333;
    }
	.pagination a:hover{
	    color:#333;
    }
	.cat-label{
		font-size:15px;
	}
	.mobile-header-menu-buttons {
    display: flex;
}
	.navi-in .menu-pc {
		display: none;
	}
	.appeal {
		padding-top: 10px;
		display: block;
		min-height: 400px;
	}
	.no-mobile-header-logo #header .logo-header {
		display: none;
	}
	.no-mobile-header-logo .header .header-in {
		min-height: 50px;
	}
	.recommended {
		margin: 1em 0 6em 0;
	}
	@keyframes rocket{
		0%{
			background-position: 110% 200%;
		}
		100%{
			background-position: 110% -150%;
		}
	}
	.menu-content {
		background-color: #060558;
		background-image: url(https://nattspapa.com/wp-content/uploads/2022/12/7966bae78213db11914ad7af893f8431-1.jpg);
		background-size: 200px;
		background-repeat: no-repeat;
		background-position: 110% 200%;
		animation: rocket 5s infinite linear;
	}

	.menu-close-button{
		color: #f4c01e;
	}
	body.public-page {
		background-size: 100% auto;
		animation: star 45s infinite linear;
	}
	.date-tags {
		border-bottom: 6px dotted #f4c01e;
	}
}