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

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

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

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

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

/************************************
** メニュー部分のスタイル
************************************/

/* 縦棒だけ残す */
.menu-header.menu-pc > li {
  border-left: 1px solid #ccc;
  padding: 0px; /* ← 8px → 4px に！ */
}

.menu-header.menu-pc > li:first-child {
  border-left: none;
}

/* メニューボタンを右側に配置 */
.navi-menu-button.menu-button {
  margin-left: auto; /* 右寄せにする */
  order: 2; /* モバイルボタン内での表示順序を変更 */
}

/* モバイルメニューボタン全体の配置調整（必要に応じて） */
.mobile-menu-buttons {
  justify-content: flex-end; /* ボタンを右寄せに */
}

/* スライドインメニューを右から出すようにする */
.navi-menu-content {
  left: auto; /* 左からの配置を解除 */
  right: 0; /* 右側に配置 */
  transform: translateX(105%); /* 初期状態では右側に隠す */
}

/* チェックボックスがチェックされた時のアニメーション */
#navi-menu-input:checked ~ .navi-menu-content {
  transform: translateX(0%); /* メニュー表示時は元の位置に戻す */
  transition: transform 0.3s ease-out; /* スムーズなアニメーション */
}

/* メニュー閉じる時のアニメーション */
.navi-menu-content {
  transition: transform 0.3s ease-in; /* 閉じる時もスムーズに */
}

/* メニューの見た目をカスタマイズ（オプション） */
.navi-menu-content {
  /* background-color: #1e7cd1; /* 背景色の変更 */
  /* または半透明にする場合 */
  background-color: rgba(240, 240, 240); */}

.menu-drawer a {
  color: #333333; /* メニュー項目のテキスト色 */
  font-size: 1.1em; /* 文字サイズ */
  height: 3em; /* 行の高さ */
}

.menu-drawer a:hover {
  color: rgba(255, 255, 255, 0.7); /* ホバー時の色 */
  background-color: rgba(30, 124, 209, 0); /* ホバー時の背景色 */
}

/************************************
** ボトムシェアボタン
************************************/

@media screen and (min-width:481px) {
  .sns-share, .sns-follow {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
  }
}
.sns-share-buttons {
  justify-content: space-evenly;
}
.sns-share-buttons a {
  font-size: 1.25em;
  border-radius: 50%;
  width: 50px!important;
  height: 50px;
}
.sns-share-buttons a:hover {
	opacity: 0.6;
}
@media screen and (max-width:834px) {
  .ss-bottom .sns-share-buttons a {
    font-size: 1.3em;
  }
}
.sns-share-buttons a .button-caption {
  display: none!important;
}
.sns-share-message, .sns-follow-message {
  color: #bbb;
  margin-bottom: 30px;
  position: relative;
}
.sns-share-message:before, .sns-follow-message:before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 2px;
  left: 50%;
  bottom: -5px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 3px;
  background-color: #c0c0c0;
}

/************************************
** アピールエリア
************************************/

/*アピールエリアの高さ設定　PC*/
#appeal { 
height: calc(100vw * calc(800 / 1920)); 
}

/*アピールエリアの高さ設定　スマホ*/
@media (max-width: 767px){ 
  #appeal { 
    height: 100vw; 
  }
}


/************************************
** サイトタイトルを黒に固定
************************************/
.header .site-name-text,
.header .site-name-text a {
    color: #000 !important;
}

/* スマホでサイト名が消える場合の保険 */
@media (max-width: 1023px){
  .site-name-text{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}