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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 見出しデザインのリセット */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
    background-color: transparent; /* 背景色を透明に */
    border: none; /* 枠線なし */
    border-radius: 0; /* 角の丸みなし */
}

/*見出しh2のカスタマイズ*/
.article h2{
  padding: 0.5em;/*文字周りの余白*/
  color: #505050;/*文字色*/
  background: #d3c3af;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
}

/*見出しh4のカスタマイズ(下線)*/
.article h4 {
	padding: 0.3em 0;/*内側余白調整*/
        border-bottom: solid 3px #a5c9c1;/*下線：実線・太さ・色*/
        color:#067E7A;/*文字色*/
	    font-size:18px;
}

/*見出しh5のカスタマイズ(先頭に四角のアクセント)*/
.article h5 {
	background:none;
	color: #351904;
	position: relative;
	padding: .3em 1em 1em 40px;
	font-size:17px;
  }

h5::before,
h5::after{
	position: absolute;
	content: '';
}

h5::before {
	top: .6em;
	left: .2em;
	z-index: 2;
	width: 22px;
	height: 22px;
	background: #EB7912;
	opacity: .5;
}
h5::after{
	top: 1.1em;
	left: .8em;
	width: 15px;
	height: 15px;
	background: #067E7A;
	opacity: .5;
}

/*見出しh3のカスタマイズ（左側に２色の線）*/
.article h3{
    position: relative;
    border-left: 8px solid #eee;
	padding: 0.5em;/*文字周りの余白*/
}
h3::before{
	position: absolute;
    content: '';
    left: -8px;
    bottom: 0;
    width: 8px;
    height: 50%;
    background-color: #067E7A;
	font-size: 18px;
	color: #EB7912
}

/*見出しh6のカスタマイズ*/
.article h6{
  color: #505050;/*文字色*/
  font-size: 18px;
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

h6:before {
  content: '●';
  color: white;
  margin-right: 8px;
}

/*ヘッダーモバイルボタンの文字と背景の色を変える（背景白）*/
.mobile-header-menu-buttons.mobile-menu-buttons .menu-button {
  color: #067E7A!important;
  background-color: #FBEFDD;
}

/*ヘッダーモバイルボタン（メニュー）*/
.menu-button .fa-reorder:before {
	background-image: url(http://nextdesk.willowk.jp/wp-content/uploads/2025/04/menu.png);
	background-position: center -2px;
	background-size: cover;
	content: '';
	display: block;
	height: 30px; /*アイコンの高さを指定*/
	width: 30px; /*アイコンの横幅を指定*/
}

/*フッターモバイルボタン（予約・問い合わせ）*/
.menu-button .fa-envelope-o:before {
	background-image: url(http://nextdesk.willowk.jp/wp-content/uploads/2025/04/mail.png);
	background-position: center -2px;
	background-size: cover;
	content: '';
	display: block;
	height: 50px; /*アイコンの高さを指定*/
	width: 50px; /*アイコンの横幅を指定*/
}

/*フッターモバイルボタン（サイドバー）*/
.menu-button .fa-dedent:before {
	background-image: url(http://nextdesk.willowk.jp/wp-content/uploads/2025/04/side-2.png);
	background-position: center -2px;
	background-size: cover;
	content: '';
	display: block;
	height: 50px; /*アイコンの高さを指定*/
	width: 50px; /*アイコンの横幅を指定*/
}

/*フッターモバイルボタン（ホーム）*/
.menu-button .fa-home:before {
	background-image: url(http://nextdesk.willowk.jp/wp-content/uploads/2025/04/home.png);
	background-position: center -2px;
	background-size: cover;
	content: '';
	display: block;
	height: 50px; /*アイコンの高さを指定*/
	width: 50px; /*アイコンの横幅を指定*/
}

/*ヘッダーモバイルボタン（キャプション位置）*/
.menu-button .menu-caption {
	margin-top: -9px;
}

/*フッターモバイルボタン（文字色・背景色変更）*/
.mobile-footer-menu-buttons .menu-button,
.mobile-footer-menu-buttons .menu-button:hover,
.mobile-footer-menu-buttons .menu-button a,
.navi-menu-content,
.menu-drawer a,
.menu-drawer a:hover{
  background-color: #FBEFDD;
  color: #067E7A;
}


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

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

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