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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* 1.0rem:10pxに設定 */
html{
	font-size:62.5%
}

/* site表示時の編集ボタン非表示 */
#wpadminbar,
#admin-panel{
	display:none;
}

/* コンテンツ背景色・ボーダー */
#main{
	background-color:transparent;
	border:none;
}

/* プレースホルダ色設定 */
::placeholder{
	color:#cccccc;
}

/* 固定ページの日付非表示 */
.page .date-tags,
.page .author-info{
	display: none;
}

/* アーカイブページのアイキャッチ画像カテゴリーラベルを非表示 */
.cat-label{
	display:none
}

/* ヘッダ */
#header-container{
	background-color:transparent;
}
#header-container>#header-container-in{
	background-image:url('https://withmich.com/wp-content/uploads/2023/10/5bad496bff6b7099e2e2abe6a18c7fce.png');
	background-repeat:no-repeat;
	background-size:100% calc(100% - 60px);
}
#header-container>#header-container-in>header#header>div#header-in{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:stretch;
}
#header-container>#header-container-in>header#header>div#header-in div.logo-image{
	width:480px;
	margin:20px 0px 0px 30px;
	padding:0;
	display:flex;
	align-items:center;
}
#header-container>#header-container-in>header#header>div#header-in div.logo-image a{
	padding:0;
}
#header-container>#header-container-in>header#header>div#header-in div.tagline{
	font-size:18px;
	font-size:1.8rem;
	width:calc(100% - 540px);
	margin:20px 30px 0px 0px;
	padding:0;
	display:flex;
	align-items:center;
}
@media screen and (max-width: 1023px){
	#header-container>#header-container-in{
		background-size:100% 100%;
	}
	#header-container>#header-container-in>header#header>div#header-in div.logo-image{
		width:360px;
	}
	#header-container>#header-container-in>header#header>div#header-in div.tagline{
		font-size:16px;
		font-size:1.6rem;
		width:calc(100% - 420px);
	}
}
@media screen and (max-width: 834px){
	#header-container>#header-container-in>header#header>div#header-in{
		flex-direction:column;
	}
	#header-container>#header-container-in>header#header>div#header-in div.logo-image{
		margin:20px calc((100% - 360px) / 2) 0px;
	}
	#header-container>#header-container-in>header#header>div#header-in div.tagline{
		width:calc(100% - 60px);
		margin:0px 30px 20px;
	}
}
@media screen and (max-width: 480px){
	#header-container>#header-container-in>header#header>div#header-in div.logo-image{
		width:300px;
		margin:20px calc((100% - 300px) / 2) 0px;
	}
}

/* スライダー */
#header-container>#header-container-in>div.slider{
	width:calc(100% - 60px);
	height:auto;
	margin:20px 30px;
	padding:0;
}
#header-container>#header-container-in>div.slider #wpsisac-slick-carousal-1{
	margin-bottom:24px;
}
#header-container>#header-container-in>div.slider #wpsisac-slick-carousal-1 .wpsisac-image-slide{
	margin:0 5px;
}
#header-container>#header-container-in>div.slider #wpsisac-slick-carousal-1 .wpsisac-image-slide .wpsisac-image-slide-wrap{
	width:auto; height:250px;
}
@media screen and (max-width: 834px){
	#header-container>#header-container-in>div.slider{
		width:calc(100% - 32px);
		height:auto;
		margin:0 16px;
		padding:0;
	}
}
@media screen and (orientation: landscape) and (max-height: 499px){
	#header-container>#header-container-in>div.slider #wpsisac-slick-carousal-1 .wpsisac-image-slide .wpsisac-image-slide-wrap{
		width:auto; height:180px;
	}
}

/* ヘッダメニュー */
#header-container>#header-container-in>nav#navi>div#navi-in>ul>li.menu-item{
	width:20%;
	max-width:250px;
	margin-bottom:2px;
	padding:0px 0px 1px 1px;
}
#header-container>#header-container-in>nav#navi>div#navi-in>ul>li.menu-item>a{
	border-radius:5px;
	border:outset 1px #808080;
}
#header-container>#header-container-in>nav#navi>div#navi-in>ul>li.menu-item>a>div.has-icon{
	right:18px;
	font-size:18px;
}
#header-container>#header-container-in>nav#navi>div#navi-in>ul>li.menu-item>ul.sub-menu{
	width:100%;
	min-width:initial;
	border-radius:5px;
	border:outset 1px #808080;
	background-color:#5cb01e;
}

/* モバイルフッターボタン */
ul.mobile-footer-menu-buttons{
	background-color:#2ea027;
}
ul.mobile-footer-menu-buttons>li span{
	color:#f7f7f7;
}

/* モバイルメニュー */
ul.mobile-footer-menu-buttons>li>div#navi-menu-content{
	overflow:hidden;
}
ul.mobile-footer-menu-buttons>li>div#navi-menu-content>label.menu-close-button>span.fa-close{
	color:#2ea027;
}
ul.mobile-footer-menu-buttons>li>div#navi-menu-content>label.menu-close-button>span.fa-close:before{
	display:inline-block;
}
ul.mobile-footer-menu-buttons>li>div#navi-menu-content>label.menu-close-button>span.fa-close:after{
	content:"閉じる";
	font-size:20px;
	font-size:2.0rem;
	margin-left:5px;
	vertical-align:5px;
	display:inline-block;
}
ul.mobile-footer-menu-buttons>li>div#navi-menu-content>ul.menu-drawer a{
	border-radius:5px;
}
ul.mobile-footer-menu-buttons>li>div#navi-menu-content>ul.menu-drawer a:hover{
	color:#f7f7f7;
	background-color:#2ea027;
}

/* 見出し */
article.article h2.withmih2{
	padding:20px 10px 20px 70px;
	border-radius:3px;
	box-shadow:2px 2px 2px rgba(34,34,34,0.6);
	position:relative;
}
article.article h2.withmih2:before{
	content:"";
	top:-5px;
	left:10px;
	width:50px;
	height:100%;
	background-image:url('https://withmich.com/wp-content/uploads/2023/10/cropped-994398d2f2c8c24ab190ef2a6e994b71.png');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	position:absolute;
}
article.article h3.withmih3{
	border-width:1px 1px 1px 10px;
	border-radius:3px;
	box-shadow:2px 2px 2px rgba(34,34,34,0.6);
}

/* メディアとテキスト */
article.article div.wp-block-media-text{
	grid-template-columns:auto auto!important;
}
article.article div.wp-block-media-text img{
	width:320px;
}
article.article div.wp-block-smallmedia-text img{
	width:240px;
}
@media screen and (max-width: 1023px){
	article.article div.wp-block-media-text img{
		width:calc(240px + 80 * (100vw - 835px) / 188);
	}
	article.article div.wp-block-smallmedia-text img{
		width:calc(180px + 60 * (100vw - 835px) / 188);
	}
}
@media screen and (max-width: 834px){
	article.article div.wp-block-media-text img{
		width:240px;
	}
	article.article div.wp-block-smallmedia-text img{
		width:180px;
	}
}
@media (max-width: 600px){
	article.article div.wp-block-media-text{
		grid-template-columns:100%!important;
	}
	article.article div.wp-block-media-text:nth-child(1){
		grid-column:1;
    	grid-row:1;
	}
	article.article div.wp-block-media-text:nth-child(2){
		grid-column:1;
	 	grid-row:2;
	}
	article.article div.wp-block-media-text img{
		width:60%;
		margin:0px 20% 20px;
	}
	article.article div.wp-block-smallmedia-text img{
		width:50%;
		margin:0px 25% 20px;
	}
}

/* 画像 */
article.article img{
	box-shadow:2px 2px 2px rgba(34,34,34,0.6);
}

/* リンクボタン */
article.article div.wp-block-buttons>div.withmia>a{
	color:#100800!important;
	font-size:18px!important;
	font-size:1.8rem!important;
	min-width:200px;
	margin:0;
	padding:10px 30px 10px 10px;
	border-radius:3px!important;
	background-color:#ff9600!important;
	box-shadow:2px 2px 2px rgba(34,34,34,0.6);
	position:relative;
	display:inline-block;
	transition:0.25s linear;
}
article.article div.wp-block-buttons>div.withmia>a:after{
	content:"";
	top:0px;
	bottom:0px;
	right:13px;
	width:10px;
	height:10px;
	margin:auto;
	border-top:solid 2px #100800;
	border-right:solid 2px #100800;
	transform:rotate(45deg);
	position:absolute;
	display:block;
}
article.article div.wp-block-buttons>div.withmia>a:hover{
	background-color:#ffd298!important;
}

/* 埋め込みYouTube */
article.article iframe.youtubelist{
	width:100%;
	height:100%;
	border:none;
}

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

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

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