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

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

/*ヘッダーモバイルボタンの文字色と背景色を変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background: #cc443a;
	color: #ffffff;
}

.logo-menu-button.menu-button{
	background: #cc443a;
}

.mobile-menu-buttons{
	background: #cc443a;
}

/*スライドインメニューを右から*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: #cc443a;
	transform: translateX(101%);
}

/*スライドインメニューをカスタマイズ*/
.menu-drawer a{
	background: #cc443a;/*背景色*/
	color: #ffffff;/*文字色*/
	font-size: 1.1em;/*文字の大きさ*/
	letter-spacing: 1.5px;/*文字間隔*/
	line-height: 1.5;  /* 行間を1.5倍に設定 */
	margin-top: 40px; /*上からの位置調整 */
}

/* スライドインメニューの閉じるボタンの位置固定 */
.menu-close-button {
  position: absolute;  /* 絶対位置指定で位置を調整 */
  top: 20px;           /* 上からの位置調整 */
  right: 20px;         /* 右からの位置調整 */
  left: unset;         /* 左位置を解除（デフォルトで中央配置されているため） */
  transform: unset;    /* transformでの位置調整を解除 */
}

/*下の記述【width: 100vw;】によってスクロールバーが出てしまうのでそれを消す処理*/
.container {
    position: relative;
    overflow: hidden;
    z-index:1;
}

/*画面横幅いっぱいになるように設定*/
.appeal, .appeal-in, .header-container {
    position: absolute;
    top: 0;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}

/*画面縦幅いっぱいになるように設定*/
.appeal, .appeal-in {
    height: 100vh;
    background-size: cover;
}

/* HOMEアピールエリアが表示されている場合、余白を100vhに設定 */
.home .content {
    margin-top: 100vh;
}

/* HOMEヘッダーの高さ分をコンテンツに追加 */
.home .content {
  padding-top: 20px;
}

/* デフォルトはモバイル用（例えば、モバイルの高さに合わせて調整） */
.content {
  padding-top: 40px; /* モバイル用の調整 */
}
.content {
  padding-top: 40px; /* モバイル用の調整 */
}




/* PC（画面幅が768px以上）の場合 */
@media (min-width: 768px) {
  .content {
    padding-top: 100px; /* PC用の調整 */
  }
}

/*ヘッダーを前面に*/
.header-container {
    z-index: 3;
}

.appeal {
    z-index: 2;
}
/*モバイル下の影削除*/
@media screen and (max-width: 1023px){
    .mobile-header-menu-buttons {
        box-shadow:none;
    }
}

/*グローバルメニューの高さを変更*/
#navi .navi-in > ul li{
	height: 48px;
	line-height: 24px;
}

/*グローバルメニュー 文字の大きさを変更*/
#navi .navi-in > .menu-header .item-label{
	font-size: 16px;
	letter-spacing: 2px;
}

/*グローバルナビメニュー説明*/
.sub-caption{
font-size:10px; /*文字サイズ*/
color:#ffffff; /*文字色*/
letter-spacing: 1px;
}


/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}

/* 見出しのデザイン設定 */
/* H2 */
.entry-content h2{
color: #ffffff; /* 文字色 */
letter-spacing: 2px;
text-align: center;
font-size: 18px; /* 文字サイズ */
background-color: #cc443a; /* 背景色 */
padding-top:10px; /* 文字と上部の間隔 */
padding-left:10px;/* 文字と左線の間隔 */
padding-bottom:10px;/* 文字と下部の間隔 */
}

/* H3 */
.entry-content h3{
color: #000; /* 文字色 */
font-size: 16px; /* 文字サイズ */
padding: 10px;
text-align: center;
border-top: solid 3px #cc443a;/* 上側に実線・色 */
border-bottom: solid 3px #cc443a;/* 下側に実線・色*/
}

/* 固定ページの日付削除 */
.page .date-tags {
display: none;
}

 /* プロフィールボックス 概要文字サイズ */
  .author-box .author-description {
    font-size: 14px; /* .9em; */
	letter-spacing: 1px; /* 文字間隔を広げる */
  }

/* プロフィールボックス 行ボックス高さ */
.author-box p {
  line-height: 1.5em; /* 1.5 */
}

/* サイドバーSNSボタンを丸く、色変換 */
.sidebar [class^=icon-], .sidebar [class*=" icon-"]{
    line-height: 40px;
	color: #cc443a; /* 文字色 */
    font-size: 23px;
}
#sidebar .widget_author_box .author-box .follow-button, #slide-in-sidebar .widget_author_box .author-box .follow-button{
    border-radius: 50%;
	border-color: #cc443a; /* 文字色 */
    width: 40px;
    height: 40px;
}

/* アーカイブタイトルのアイコン削除 */
.archive-title :before {
display: none;
}

.archive-title {
color: #ffffff; /* 文字色 */
letter-spacing: 1.5px;
text-align: center;
font-size: 18px; /* 文字サイズ */
background-color: #cc443a; /* 背景色 */
padding-top:10px; /* 文字と上部の間隔 */
padding-left:10px;/* 文字と左線の間隔 */
padding-bottom:10px;/* 文字と下部の間隔 */
    }

/************************************
** 人気記事 タイトル
************************************/
.widget-entry-card {
font-size: 14px;
line-height: 1.5em;
letter-spacing: 1px; /* 文字間隔を広げる */
}


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

}

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

a {
text-decoration: none;
}