@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:initial;/*背景色リセット*/
	border:initial;/*上下左右の枠線リセット*/
	border-radius:initial;/*角の丸みリセット*/
}


/*画像を画面いっぱいにする*/
.image-max {
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

.image img {
	display: block;
	width: 100%;
	height: auto;
}

.article h2 {
	padding-bottom: 10px;
	font-size: 20px;
	background-image: repeating-linear-gradient(90deg, #b4a983 0, #b4a983 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
	background-size: 4px 4px;
	background-repeat: repeat-x;
	background-position: center bottom;
}

.article h3 {
	position: relative;
	padding-bottom: 20px;
	font-size: 20px;
	text-align: center;
}

.article h3::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 6px 0 6px;
	border-color: #b99a00 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
}



/*リンク下線なし*/
a{
text-decoration: none;
}

/*メイン背景カラー*/
.header-container, .main, .sidebar, .footer {
    background-color: #d0d8e2;
}

.navi {
   background-color: #d0d8e2;
}

.breadcrumb.sbp-main-before, .breadcrumb.sbp-footer-before, .breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-before {
    background-color: #d0d8e2;
    margin: 12px auto 0;
    padding: 0.6em 1em;
}

/*アピールエリア画像*/
#appeal {
    height: calc(100vw * calc(920 / 1920));/* アピールエリア画像高さ変更 */
}

/*アピールエリアの高さ設定　スマホ*/
@media (max-width: 769px){
#appeal {
height: 650px; 
}
	
/* アピールエリア モバイル別画像にする */
@media screen and (max-width: 769px) {
.appeal {
background-image: url(https://premiere-sakura.net/wp-content/uploads/2024/01/demosite-mobile-header-2024012101.png);
height: 650px;
}
}
	

/*　Youtube 動画を真ん中にする　*/
.video-container {
margin: 0px auto;
}
	
/*　モバイル背景　*/
.mobile-menu-buttons {
    background: #fff0f5;
}

/*　モバイルメニュー背景　*/
.menu-content {
    background: #fff8dc;
}


/* モバイルフッターボタンの色 */
.menu-button,
.mobile-menu-buttons .menu-button > a {
  color: #5C5C5C;
 background: #E5E27F;
}
	
/*スライドインメニューを右から*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: #1e7cd1;
	transform: translateX(101%);
}

/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: rgba(34,139,34,0.5);
	transform: translateX(101%);
}

.menu-drawer a{
	font-size: 1em;/*文字の大きさ*/
	color: #fff;/*文字の色*/
	height: 2.5em;/*行の高さ*/
}

.cat-link {
    color: var(--cocoon-white-color);
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    padding: 2px 6px;
    font-size: 12px;
    background-color: #f3dede;
    border-radius: var(--cocoon-badge-border-radius);
    word-break: break-all;
}
	

/*ここまで*/

.header, .header .site-name-text, #navi .navi-in a, #navi .navi-in a:hover {
    color: #b96767;
}

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

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

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