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

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

/************************************
** 全体共通
************************************/
/*全体*/
body{
	overflow: scroll;
	overflow-x: hidden;
}

/*画像リンクのホバー*/
a img:hover {
	transition: all .3s ;
	opacity:0.5;
}

/*フッター直前にある、記事記載者消す*/
.page .article-footer{
	display:none;
}

/*余白設定*/
.section01{
	padding-bottom:50px!important;
}

/*ボタン*/
.wp-block-button{
	min-width:180px;
}


/*
 * 各種フォントに関する設定*
 * ----------------------------------------------------*/
/*基本フォント（Klee Oneだった場所）*/
.logo-text, .logo-menu-button, .appeal-title, .entry-title, .list-title, .entry-card-title, .pagination .page-numbers, .article h2, .article h3, .article h4, .article h5, .article h6, .widget h2, .widget-title, .related-entry-main-heading, .comment-title, .footer-title {
	font-family: 'Zen Kaku Gothic New', sans-serif!important;
}

/*見出し*/
.article h2.midashi2{
	border: solid 0px #fff;
}
.page h2.midashi2 {
	font-size: 20px !important;
    border-left: 5px solid #da6997;
    border-bottom: 2px solid #da6997;
    color: #da6997;
    margin-bottom: 15px;
    border-top: none;
    background-color: transparent!important;
    padding: 10px!important;
    border-radius: 0px!important;
    background: none;
    box-shadow: none;
}
.page h2.midashi2:before,.page h2.midashi2:after{
    transform: none;
    border-radius: 0px;
    border: solid 0px #777;
}
.page h3.midashi3 {
	border: 0px solid #888;
	border-bottom: 1px solid #ddd;
}
.article h3.midashi3:before{
	display:none;
}

/*文字サイズ変更*/
.fs_80p{font-size:80%;}

/*
 * ボタンに関する設定（子テーマからのコピペ）*
 * ----------------------------------------------------*/
.btn01 a,.btn01 a:before{
    border-top-left-radius: 170px 180px;
    border-top-right-radius: 230px 150px;
    border-bottom-right-radius: 160px 200px;
    border-bottom-left-radius: 180px 150px;
}
.btn01 a {
    position: relative;
    background: none;
    padding: 12px 22px;
    margin: 0 10px;
    box-sizing: border-box;
    text-transform: uppercase;
    border: 2px solid rgba(var(--gray-color), 1);
}
.btn01 a:before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    background-color: rgba(var(--secondary-color), 1);
    transition: all .3s ease;
    z-index: -1;
}

.btn01 a:hover {
    background: rgba(var(--white-color), 1);
    background-color: rgba(var(--white-color), 1)!important;
    color: rgba(var(--primary-color), 1);
    border-color: rgba(var(--primary-color), 1)!important;
    transition: all 0.3s ease-in-out;
}

.btn01 a:hover:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/************************************
** 固定ページ共通
************************************/

/*
 * 各種固定ページのヘッダー画像指定*
 * ----------------------------------------------------*/
.page.page-id-25 .content,
.page.page-id-97 .content,
.page.page-id-104 .content,
.page.page-id-134 .content,
.page.page-id-1425 .content {
    margin-top: 0px;
}

.page.page-id-25 .content:before,
.page.page-id-97 .content:before,
.page.page-id-104 .content:before,
.page.page-id-134 .content:before,
.page.page-id-1425 .content:before{
    content: "";
    display: block;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 300px;
    background-position: center!important;
    background-size: cover!important;
}

.page.page-id-25 .content-in,
.page.page-id-97 .content-in,
.page.page-id-104 .content-in,
.page.page-id-134 .content-in,
.page.page-id-1425 .content-in{
    padding-top: 30px;
}
.page.page-id-25 .article-header,
.page.page-id-97 .article-header,
.page.page-id-104 .article-header,
.page.page-id-134 .article-header,
.page.page-id-1425 .article-header{
    position: absolute;
    top: -150px;
    color: #fff;
    text-shadow: 3px 3px 10px #000;
}
.page .article-header  h1{
    border-top: 0px solid;
    border-bottom: 0px solid;
}
.page .article-header .date-tags{
    display: none;
}

/*ほいくのたねについて*/
.page.page-id-25 .container .content:before{background: url(/wp-content/uploads/fv-about.jpg);}
/*モンテッソーリ教育とは？*/
.page.page-id-97 .content:before{background: url(/wp-content/uploads/fv-montessori_1.jpg);}
/*研修依頼はこちら*/
.page.page-id-104 .content:before{background: url(/wp-content/uploads/fv-service.jpg);}
/*問い合わせ*/
.page.page-id-134 .content:before{background: url(/wp-content/uploads/fv-contact.jpg);}
/*自己紹介*/
.page.page-id-1425 .content:before{background: url(/wp-content/uploads/fv-profile.jpg);}

/*topページだけに適用*/
.home .article-header  h1{
	display:none;
}
/*プライバシーポリシーページだけに適用*/
.privacy-policy  .article-header  h1{
	text-align:center;
	margin:20px 0px 30px 0px;
}
/*
.privacy-policy .article h2{
	margin: initial;
	box-shadow:initial;
	font-weight: initial;
    border: none;
}
.privacy-policy .article h2:before,
.privacy-policy .article h2:after{
    transform: initial;
    border-radius: initial;
	border: solid 0px #777;
}
*/



/************************************
** フッター
************************************/
/*背景に星画像を入れる*/
.footer{
    background: url(/wp-content/uploads/f-bg.jpg);
    background-position: center;
    background-size: cover;
}
/*左と中央は2カラム設定にする*/
.footer-left,
.footer-center{
	display: flex;
	justify-content: center;
}
/*左と中央のh3のフォントサイズ*/
.footer-left h3,
.footer-center h3{
	font-size: 1em;
}
/*フッターのフォントサイズと行の高さ変更*/
.footer-left ul li,
.footer-center ul li{
		font-size: 14px;
	  line-height: 1.0;
}
.footer-left .widget_nav_menu > div > ul > li,
.footer-center .widget_nav_menu > div > ul > li{
		padding-left: 0%;
}

/*フッターメニュー...PCの場合は非表示*/
@media screen and (min-width: 835px){
	.pc-none{
		display:none;
	}
}

/*スマホの場合*/
@media screen and (max-width: 834px){
	.navi-footer-in > .menu-footer li.menu-item {
		width: 48%;
		margin: 1px;
		font-size:13px;
	}
}
	
/************************************
** ウィジェット
************************************/
.widget_categories li > ul > li > a:before,
.widget_nav_menu ul li ul a:before,
.widget_categories > ul > .cat-item > a:before, .widget_nav_menu > div > ul > li > a:before, .widget_categories li > ul > li > a:before{
	display:none;
}
.widget_categories ul li a{
	padding: 5px 0;
}
.widget-banner{text-align:center;}

@media (min-width: 480px){
	.textwidget #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3, .sb_instagram_header.sbi_medium .sbi_header_text h3 {
		margin-right: 0!important;
		overflow-wrap: anywhere;
		text-align: left;
	}
}

/************************************
** TOPページ
************************************/
/*TOPページヘッダー画像*/
.appeal {
    background-position: bottom;
}
.appeal-content {
	padding: 3em 4em 1em;
	margin-left: 0;
	margin-top: 10px;
}
@media screen and (max-width: 480px){
	.appeal .appeal-in {min-height: 400px;}
	.appeal-content {display:none;}
}


/*about*/
.img-radius1{
	max-width:80%;
	margin:0 auto;
}
.img-radius1 img{
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}

/*円形画像の3つボックス*/
.img-circle img{
    width: 100%;
	 max-width:300px;
    aspect-ratio: 1;
	border-radius:50%;
	object-fit: cover;
}

.img-circle img {
    transition: all .6s ease-out 0.1s;
}
.img-circle img:hover {
    transform: scale(1.1);
    transition: all .6s ease-out 0.1s;
	opacity:0.8;
}

/*TOPページのブログ一覧*/
.top-bloglist{	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.top-bloglist a{	
	width:calc( 100% / 4);
}
.top-bloglist .new-entry-card-link {
	max-width:300px!important;
	margin:0 auto;
}
.top-bloglist .new-entry-card-thumb img{
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;	
}
@media screen and (max-width: 834px){
	.top-bloglist a{	
		width:calc( 100% / 2);
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	.top-bloglist a{	
		width:calc( 100% / 1);
	}
}

/************************************
** サービスページ
************************************/
/*1023px以下*/
.service-box01{
	width: 90%;
	margin: 0 auto;
	max-width: 600px;
}

/************************************
**プロフィール＆ほいくのたねについて
************************************/
@media screen and (min-width: 768px){
	.wp-block-image .alignright {
		max-width: 50%;
	}
}
@media screen and (max-width: 767px){
	.profile-col,
	.hoikunotane-col{
		display: flex;
		flex-direction: column-reverse;
	}
	.profile-img,
	.hoikunotane-img,
	.montessori-img{
		margin-top: 30px;
	}
	.profile-img .alignright,
	.hoikunotane-img .alignright,
	.montessori-img .alignright{
		float: unset;
		margin: 0 auto;
	}
}


/************************************
** 問い合わせページ
************************************/
.contact-tab ul{
    justify-content: center;
	display:flex;
}
.contact-tab ul li:first-child{
	display:none;
}

.advgb-tab-body-wrapper {
	border: 0px solid #ccc!important;
}

/*フォーム*/
input[type="text"],input[type="email"],input[type="tel"],textarea{
	padding: 5px;
	border-radius: 3px;
	border: 1px solid rgba(var(--gray-color), .7);
	background-color: #fff;
}

::placeholder {font-size: 14px; }

table th, table td {
    border: 1px solid #ccc;
}

table th {
    background-color: #fafbf6;
}

table th p, table td p{
	margin-bottom: 0!important;
}

/*ボタン*/
.con-btn{
	text-align:center;
}
.con-btn input{
	width:180px;
}

/*「ありがとうございました」の枠*/
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #d46997;
}

.wpcf7 form .wpcf7-response-output {
    border: 2px solid #00a0d2;
}


/************************************
** Blogページ用
************************************/
/*タブの追加*/
#index-tab-5:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-5"] {
  background: none #404453;
  border: 0px solid #404453;
  color: #fff;
  font-weight: 700;
}
#index-tab-5:checked ~ .tab-cont.tb5 {
  display: block;
  animation: tab-index-show .3s ease-in;
}
#index-tab-5:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-5"] {
    border-bottom: 12px solid rgba(var(--secondary-color), 1);
    color: rgba(var(--black-color), 1);
    background-color: rgba(var(--white-color), 1);
    font-weight: normal;
}
/*カテゴリー一覧の場合はタブを表示しない*/
/*
.category .index-tab-buttons{
	display:none;
}
*/

.ect-vertical-card {
	justify-content: flex-start!important;
}
@media screen and (max-width: 1023px){
	#navi .navi-in > .menu-mobile li {
		width: calc(100% /6 );
		background: #fff;
		background-image: none!important;
		background-color: #fff!important;
	}
}
@media screen and (max-width: 834px){
	#navi .navi-in > .menu-mobile li {
		min-width: 150px;
		width: 150px;
		border: none;
	}
}

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

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

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



.footer-widgets-mobile #custom_html-7 {
	margin-bottom: 0;
}
.footer-widgets-mobile #custom_html-7 p {
	margin-top: 10px;
}
.footer-widgets-mobile .footer-mobile {
	padding: 10px 8px 0;
}
.footer-widgets-mobile + .footer-bottom {
	margin-top: 0;
}
.footer-bottom .footer-bottom-logo {
	display: none;
}
.footer-widgets-mobile {
    margin: 10px auto 0;
}
.breadcrumb + .wp-block-button {
	margin-top: 30px;
}

#sb_instagram #sbi_load .sbi_load_btn {font-size: 12px;}

/* recptcha */
.grecaptcha-badge{visibility: hidden;}