@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:#eaa7bf;}
a{
	text-decoration: none;
}

#main{
background-color: transparent;
}

body.page-id-33 {
    background-image: url('img/top_bg.webp');
	background-size: cover;
}



/*文字色がかぶって見えづらいところは見やすいように修正*/
#sidebar{
  padding: 5px;
  background-color: #fff;
  opacity: 0.9;
}
/*video*/

.content{
	margin-top: 1vw;
}


/*2事業カラム*/
.top-message{
background-color: rgba(255,255,255,0.8);
box-shadow: 0px 0px 10px 0px #dcdcdc;
padding: 20px;
border-radius: 10px;
}

.top-message>.wp-block-columns>a{
	display: block;
	width:50%;
}
.wp-block-columns {
	disp: flex;
	}
.wp-block-columns>a{
	flex:2;
}

.wp-block-column,.is-layout-flow{
	position: relative;
background-color: #fff;
padding: 0px 20px 20px 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px #dcdcdc;
}


.top-haruka,.top-hinata{
position:relative;
transition:0.3s;
}
.top-haruka:hover,.top-hinata:hover{
opacity:0.9;
}

.top-haruka>a,.top-hinata>a{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-indent: 0;
white-space: nowrap;
overflow: hidden;
margin-top:0;
text-decoration: none;
}


.top-column-logo{
display: block;
padding-top: 20px;
}
.top-haruka{
background-color:#f5dad2;
}
/*.top-haruka:hover{
background-color:rgba(245,218,210,0.5);
}*/

.top-hinata{
background-color:#fcdebe;
}
/*.top-hinata:hover{
background-color:rgba(252,222,190,0.5);
}*/

 /*main*/
/*.no-sidebar .content .main{
width:70%;
}*/

body .is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull) {
    max-width: 100%;
}



.page-id-13 h1.entry-title {
	font-size:0.8rem;
	font-weight: 300;
	border-bottom: 2px solid #f88fa7;
}

.page-id-218 h1.entry-title{
	font-size:0.8rem;
	font-weight: 300;
	border-bottom: 2px solid #ff961f;
}

.page-id-18 h1.entry-title,#archive-title,.page-id-24 h1.entry-title,.page-id-20 h1.entry-title{
	font-size:0.8rem;
	font-weight: 300;
	border-bottom: 2px solid #d53880;
}

.category-3 .eye-catch{
	margin: auto;	
}

.category-3 img.eye-catch-image{
max-width: 240px;
}

.category-3 .archive-title span{
	margin-right: 0;
}

.archive.category #archive-title .fa-folder-open::before {
  content: none;
}

/*h2*/
.article h2 {
margin: 5px 0 30px 0;
padding: 10px 16px 7px 16px;
background-color: #f88fa7;
color: #fff;
font-size: 22px;
border-radius: 10px;
}

.entry-content .h2-hinata{
background-color: #ff961f;
}

.article h3{
background-color: transparent !important;
padding: 10px 20px 10px 0px;
border-color: #f4476e;
border-top: none;
border-right: none;
border-left: none;
border-bottom: solid 2px;
color: #f4476e;
margin-bottom: 1em;
}

.page-id-218 h3{
border-color: #ff8629;
color: #ff8629;
}



.wpcf7-form-control-wrap {
display: block;
}
span.wpcf7-list-item {
margin: 0 30px 0 0; /* 項目右側の余白設定と、デフォルトの左側の余白を打ち消す */
position: relative;
}
.wpcf7-list-item-label {
cursor: pointer; /* labelにhoverした時にカーソルを表示させる */
font-size: 16px; /* 項目のフォントサイズ */
}
input[type="checkbox"] {
opacity: 0; /* デフォルトのチェックボックスを見えなくする */
position: absolute;
}
.wpcf7-list-item-label::before {
  /* チェックボックスのデザイン */
border: 1px solid #333;
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-right: 10px;
position: relative;
top: -1px;
vertical-align: middle;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  /* チェックアイコン */
content: "";
display: block;
position: absolute;
left: 1px;
top: 9px;
width: 15px;
height: 15px;
background-size: contain;
background-image: url("./img/check.svg");
background-repeat: no-repeat;
}

.cat-label {
display: none;
}

.prev-post-thumb,.next-post-thumb{
	display: none;
}


/*投稿ページ*/
.single h1{
font-size: 1.5rem;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 2px solid #d53880;
	color: #d53880;
}

.related-entry-main-heading{
	font-size: 1.25rem;
	color: #555555;
}

/************************************
** ボトムシェアボタンのみ丸くする
************************************/

/*ボトムシェアボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons {
	justify-content: center; /*中央に寄せる*/
}

/*ボトムシェアボタンのリンク*/
.sns-share.ss-bottom .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 50%!important; /*丸み*/
}

/*ボトムシェアボタンのアイコン*/
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 18px; /*アイコンの大きさ*/
}

/*ボトムシェアボタンのキャプション*/
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*ボトムシェアボタンのシェア数*/
.sns-share.ss-bottom .sns-buttons a .share-count {
	right: -2px; /*右側からの距離*/
	bottom: -2px; /*下側からの距離*/
	padding: 2px; /*内側の余白*/
	font-size: 10px; /*文字の大きさ*/
	border: solid 1px; /*線*/
	border-radius: 3px; /*丸み*/
	background-color: inherit; /*背景色*/
}

/*シェア数の表示が必要ないボトムシェアボタン*/
.sns-share.ss-bottom .sns-buttons a .share-count:empty {
	padding: 0; /*内側の余白*/
	border: 0; /*線*/
}

/*表組*/

.baby-table{
	border: 1px solid #b0b0b0;
	width: 100%;
}


.baby-table tr td{
	border: 1px solid #b0b0b0;
}

table tr td:nth-of-type(1){
	background:#fcf0f3;
		width:20%;
}

.hinata-td:nth-of-type(1){
	background:#fcf7f0;
		width:20%;
}

.orange-link{
	color: darkorange;
}

table tr td:nth-of-type(2){
	background:#ffffff;
	width:80%;
}

.baby-table-title{
	width:20%;
}

.baby-table-contents{
	width:80%;
}


.wpcf7-submit:disabled {
background-color: #d1d1d1;
}

.menu-footer li{
	padding: 0 10px 0 10px;
}

.navi-footer-in > .menu-footer li, .navi-footer-in > .menu-footer li:last-child {
	border: 0px;
}

.copyright {
margin-top: 24px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
	#menu-mobile-menu{
		background-color: #f88fa7;
	}
	
	.entry-title{
		padding: 0.6em 0.6em 0.6em 0;
	}
	.site-logo-image{
		visibility: hidden;
}
	.logo-menu-button.menu-button{
		background-image: url("./img/BABY'S_BREATH_W.png");
		background-position: left;
		background-repeat: no-repeat;
        background-size: auto 35px;
		margin-left: 5%;
}
	.fa-bars{
		color: #fff;
	}
	.mobile-menu-buttons .menu-caption{
		color: #fff;
	}
	.menu-close-button{
		text-align: right;
	}
	 .mobile-menu-buttons .menu-caption{
    display: none;
  }
  .mobile-menu-buttons{
    align-items: center;
  }
	
	#navi-menu-content{
		background-color: #ffebef;
	}
	.menu-drawer a .fas, .menu-drawer a .far,.menu-drawer a .fa,.menu-drawer a .fab {
		width:1.25rem;
		margin-right: 10px;
		color:#d6387f;
}
	.menu-drawer li{
		padding-bottom: 5px;
	}

	.entry-content{
	width: 100%;
	margin: auto;
}
	
	.article h3{
		width: 100%;
padding: 0 0 8px 0;
	}
	
	.wp-block-media-text>.wp-block-media-text__content {
		padding:0;
	}
	
	.article ul, .article ol {
		padding-left: 24px;
	}
	
	main.main, div.sidebar{
		padding: 0px 16px;
	}
}

/*834px以下→タブレットに修正*/
@media screen and (min-width: 481px) and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	#menu-mobile-menu{
		background-color: #f88fa7;
	}
	
	.entry-title{
		padding: 0.6em 0.6em 0.6em 0;
	}
	.site-logo-image{
		visibility: hidden;
}
	.logo-menu-button.menu-button{
		background-image: url("./img/BABY'S_BREATH_W.png");
		background-position: left;
		background-repeat: no-repeat;
        background-size: auto 35px;
		margin-left: 5%;
}
	.fa-bars{
		color: #fff;
	}
	.mobile-menu-buttons .menu-caption{
		color: #fff;
	}
	.menu-close-button{
		text-align: right;
	}
	
	#header-container-in{
		display: block;
		
	}
	#navi-menu-content{
		background-color: #ffebef;
	}
	.menu-drawer a .fas, .menu-drawer a .far,.menu-drawer a .fa,.menu-drawer a .fab {
		width:1.25rem;
		margin-right: 10px;
		color:#d6387f;
}
	.menu-drawer li{
		padding-bottom: 5px;
	}
	
	 .mobile-menu-buttons .menu-caption{
    display: none;
  }
  .mobile-menu-buttons{
    align-items: center;
  }
	
	
	.entry-content{
	width: 70%;
	margin: auto;
}
	
}


/*1023px以上*/
@media screen and (min-width: 1024px){
  /*必要ならばここにコードを書く*/
	/*header*/
/*logo*/
.header-container-in.hlt-top-menu .tagline{
display: block;
font-size: 12px;
}

.header-container-in.hlt-top-menu.hlt-tm-small .site-name-text-link{
margin:0;
}

.header-container-in.hlt-top-menu.hlt-tm-small .logo-header img{
max-height: 70px;
}

.header-container-in.hlt-top-menu.hlt-tm-small .logo-header{
max-height:100px;
}

.hlt-tm-right .navi-in > ul{
justify-content:space-between;
}
	
#navi .navi-in>ul>li{
width:10%;
}
.menu-header .item-label{
font-size: 17px;
}
.hlt-tm-small .navi-in > ul li.menu-item-has-description > a > .caption-wrap, .cl-slim .navi-in > ul li.menu-item-has-description > a > .caption-wrap{
line-height:18px;
}

	
	.item-description,.sub-caption{
		font-weight: 200;
		opacity: 0.8;		
	}
	#menu-item-385 .caption-wrap .sub-caption{
		letter-spacing: -0.1rem;
	}
	


#navi .navi-in a:hover{
background-color:#f88fa7;
color:#f3cdda;
transition: all 0.2s ease-in-out;
}

/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #d6387f;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

#page_top{
display:none;
}

	.content-in{
		width: 70%;
	}
	.entry-content{
		width:100%;
		margin: auto;
	}

	.page-id-33 .entry-content{
	width: 70%;
}
	
}