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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*H1見出し*/
.article h1{
	border-color:#fff;
    background-image: repeating-linear-gradient(-45deg, #4E3B3180, #4E3B3180 1px, transparent 1px, transparent 5px);
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: auto 0.75em;
padding-bottom: 1em;}

/*H2見出し*/
.article h2{
	font-size:1.2rem; text-align:center;
background-color: white;
border-style: solid;
border-width: 1px 0 1px;
padding: 0.5rem 0 0.5rem;
}

/*H3見出し*/
.article h3{
	color:#4e3b31; font-size:1rem; text-align:center;line-height: 1;
	height:40px; display: grid;place-items: center;
background-color: white;
border-style: dotted;
border-width: 0 0 1px;
padding: 0 0.5rem; margin:0;
}
/*H4見出し*/
.article h4{
	color:#4e3b31; font-size:1rem; font-weight: normal; text-align:center;
background-color: white;
	border:none;
padding: 1rem 0.5rem;
}

/* ボタンブロック一括*/
.wp-block-button__link {
	width:100%;
  display: inline-block;
  padding: 0.5em;
  color: #4e3b31;
	background-color:white;
  font-weight: bold;
  font-size: 1rem;
  border: solid 1px #4e3b31;
}
.is-layout-flex {
    gap: 0.5rem;
}

/* ボタンブロック・ホバー時 */
.wp-block-button__link:hover {
  background-color: #FAF4E6;
}

/*記事ヘッダーの枠組み*/
.article-header {
	display: flex; /*フレックスボックスレイアウト*/
	flex-direction: column; /*ブロック要素を縦に並べる*/
}

/*アイキャッチの枠組み*/
.eye-catch-wrap {
	order: -1; /*順番*/
	overflow: hidden; /*はみ出した部分を非表示 ※IE対策*/
}

/*アイキャッチ*/
.eye-catch {
	margin-bottom: 0; /*下の余白*/
}

.eye-catch img{
	aspect-ratio: 16 / 9;
	object-fit: cover;
}


/* モバイルヘッダー */
/* 電話ボタン全体の縦並びレイアウト  */
.navi-menu-button .menu-button-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* アイコンとテキストを縦に並べる  */
.menu-button-in .custom-menu-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* アイコンのサイズ＆余白  */
.menu-button-in .fa-phone, .fa-envelope, .fa-utensils, .fa-store {
  font-size: 1.2rem;
  margin-bottom: 0.2em;
}

/* 元の星アイコンを非表示  */
.navi-menu-button .custom-menu-icon .fas {
  display: none !important;
}


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


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

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