@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){
  /*必要ならばここにコードを書く*/
}



/*↑↑↑↑↑↑↑↑↑↑↑デフォルトで記載されていたコード↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓自分で記載したコード↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/



/************************************
** ■背景をGIFにする設定　　20230818 追記　背景をGIFにして、速さ、サイズ、表示位置、終了位置を設定する
************************************/
body {
  background: url("https://tayupi-land.com/wp-content/uploads/2023/08/cbcee7a4740cb5fbdbd79dfaac3864dc.gif");
  animation: bgiLoop 10s linear infinite;
	background-size: 1500px;	
}

@keyframes bgiLoop {
    0% { background-position: 0 0;}
  100% { background-position: -100px 200px;}
}

/************************************
■ヘッダーの設定
************************************/

/*　20230818　追記　ヘッダーのタイトルを消す。*/
.site-name-text {
	display: none;
}

/*　20230820　追記　ヘッダー背景透明化する*/
#header-container {
	/*　background-color: transparent;*/
	background: rgba(255,255,255,0.5);
}

/*　20230820　追記　モバイルメニュー背景透明化*/
.mobile-header-menu-buttons {
	  background: rgba(255,255,255,0.5);
}


/************************************
■検索フォームの設定　　20230822 追記　検索フォームのいろいろを設定。基本はウィジェット内の検索ボックスに対して変更を加えるもの。CSSのみ。
************************************/

/* 検索ボックス全体のスタイル */
.search-box {
    display: flex; /* 要素を横並びに配置 */
    align-items: center; /* 要素を縦方向中央揃え */
   /* max-width: 25px;  最大幅を設定 */
    margin-left: 0; /* 左寄せに配置 */
}

/* 入力フィールドのスタイル */
.search-box .search-edit {
    font-size: 14px;
  /*  padding: 10px 20px;  上下に10px、左右に20pxのパディング */
    border: 2px solid #EE817B; /* 枠線を2pxの実線で表示 */
    border-radius: 30px; /* 角の丸さを30pxに設定 */
    height: 50px; /* 高さを50pxに設定 */
    width: 100%; /* 幅を100%に設定 */
    transition: border-color 0.3s ease; /* 枠線の色変化に0.3秒のトランジションを適用 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 1); /* 黒い影を追加 */
    background-color: #f5f5f5; /* 背景色を設定 */
}

/* プレースホルダーテキストのスタイル (「サイト内を検索」の文字色) */
.search-box .search-edit::placeholder {
    color: #3f3f3f; /* プレースホルダーテキストの文字色を設定 */
}

/* 検索ボタンのスタイル */
.search-box .search-submit {
    top: 0; /* 上端に配置 */
	right: 0; /* 右位置を0に移動 */
    height: 100%; /* 高さを100%に設定 */
    width: 60px; /* 幅を60pxに設定 */
    color: #fff; /* テキストの色を設定 */
    background-color: #7a2eb5; /* 背景色を設定 */
    border-radius: 30px; /* すべての角を丸くする */
    border: none; /* 枠線を削除 */
    cursor: pointer; /* マウスがポインターに変わることを示す */
}

/* ホバーエフェクト */
.search-box .search-submit:hover {
    background-color: #b864f7; /* ホバー時の背景色を変更 */
    transform: scale(1.1); /* ホバー時に少し拡大するアニメーションを追加 */
}

/* アニメーション */
.search-box:hover .search-submit {
    right: 0; /* 右位置を0に移動 */
    animation: heartbeat 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); /* アニメーションの追加 */
}

/* 心臓の鼓動アニメーション */
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1); /* 初期サイズ */
    }
    50% {
        transform: scale(1.3); /* 中間で少し拡大 */
    }
}


/************************************
 ** グローバルメニュー PC　　　
 ** メニュー機能を利用して、サブメニュー追走を考えたが仕様で追走時にサブメニューが表示できないらしい。
 ** 実装するのであれば、「男の退職」のようにしたいが、実力が伴わないので、お蔵入り。
 ** アイコンを表示するまでは行けたが、細かいとこの調整がつかなかった。。 
************************************/

/* ロゴのスタイル */
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 100%; /* ロゴの高さを最大100%に設定 */
  height: auto; /* 高さを自動調整 */
  max-width: 100px; /* ロゴの幅を最大100pxに設定 */
  vertical-align: middle; /* 縦方向の中央揃え */
  margin: 5px 0; /* 上下に5pxのマージン */
}

/* サイト名テキストのスタイル */
.site-name-text-link {
  color: #fff; /* テキスト色を白に設定 */
}

/* ナビゲーションメニューのスタイル */
.navi {
  background: none; /* 背景を透明に */
}

/* サブメニューのスタイル */
.navi-in > ul .sub-menu {
  background: #fff; /* 背景色を白に設定 */
  box-shadow: 0 0 10px rgba(30, 30, 30, .1); /* ボックスシャドウ */
}

/* ナビゲーションメニュー項目のスタイル */
.navi-in > ul li {
  width: auto; /* 幅を自動調整 */
}

/* ナビゲーションメニューリンクのスタイル */
.navi-in a {
  font-size: 13px; /* ナビ文字のフォントサイズ */
  font-weight: bold; /* 太字 */
  position: relative;
  color: #fff; /* テキスト色を白に設定 */
  padding: 0 20px; /* 左右に20pxのパディング */
  display: block;
  text-decoration: none; /* 下線をなしに設定 */
}

/* ナビゲーションメニューホバー時のスタイル */
.navi-in a:hover {
  background: none; /* 背景を透明に */
}

/* ナビゲーションメニューリンク下線のスタイル */
.navi-in a:before {
  position: absolute;
  left: 0;
  bottom: 6px;
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #660099; /* ホバー時の下線色 */
  transform: scale(0, 1);
  transition: 0.4s;
}

/* ナビゲーションメニューホバー時の下線アニメーション */
.navi-in a:hover:before {
  transform: scale(1);
}

/* サブメニューリンクのスタイル */
.navi-in > ul .sub-menu a {
  color: #666; /* サブメニューテキスト色 */
  font-size: 12px; /* サブメニュー文字のフォントサイズ */
}

/* サブメニューリンク下線のスタイル */
.navi-in > ul .sub-menu a:before {
  background: #660099; /* ホバー時の下線色 */
}

/* ヘッダーロゴのスタイル */
.header-container-in.hlt-top-menu .logo-header {
  max-height: 100%; /* ロゴの高さを最大100%に設定 */
}

/* 小さなヘッダーのスタイル */
.header-small {
  opacity: 0.9; /* 透明度を90%に設定 */
}

/* 小さなヘッダーのロゴスタイル */
.header-small .header-container-in.hlt-top-menu .logo-header img {
  max-width: 80px; /* ロゴの幅を最大130pxに設定 */
  margin: 10px 0; /* 上下に10pxのマージン */
}

/* ターゲットIDが"toc"である要素のスタイル */
[id^="toc"]:target {
  padding-top: 85px; /* 上側のパディングを85pxに設定 */
  margin-top: -85px; /* マージンを-85pxに設定 */
}

/*スマホサイズのウィンドウ画面のときにのみ適応する設定*/
@media (max-width: 1000px){
	/*アピールエリアの高さ*/
	#appeal {
		width: 100vw; /* 画面の幅に合わせる */
		height: 10vh; /* 適切な高さに調整 (vh 単位を使用) */
		background-size: contain; /* 画像を縦横比を保ちつつ内側に収める */
		position: relative; /* 今の位置を基準 */
		top: 10px; /* 適切な位置に調整 */	
	}
}


/************************************
** プロフィール-サイドバー
https://ponhiro.com/cocoon-profile-customize/
************************************/

/* サイドバー内のウィジェットのデザイン */
.sidebar .widget_author_box {
  background: #fff; /* 背景色を白に設定 */
  padding-top: 1.2m; /* 上部の余白を追加 */
  border-radius: 3px 3px 0 0; /* 角丸の設定 */
  max-width: 360px; /* 最大幅を360pxに制限 */
  margin: 0 auto; /* 横方向の中央配置 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2); /* 軽い影を追加 */
}

/* ウィジェット内の著者情報ボックスのデザイン */
.sidebar .author-box {
  padding: 120px 0 0; /* 上部の余白を追加 */
  border: none; /* 枠線を削除 */
  position: relative; /* 相対的な位置指定 */
  margin: 0 0 3em; /* 下方向の余白を追加 */
  max-width: 100%; /* 最大幅を100%に設定 */
  overflow:hidden; /* 内容がはみ出した場合に隠す */
}

/* 著者情報コンテンツのデザイン */
.sidebar .author-content {
  background-image: linear-gradient(45deg, #7a2eb5 0%, #ffe4c4 99%, #ffdab9 100%); /* グラデーション背景 */
 
  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px; /* 上部の角を丸く */
  color: #fff; /* テキスト色を白に設定 */
  padding: 20px; /* 内部の余白を追加 */
  width:110%; /* 幅を110%に広げる */
  margin-left:-5% !important; /* 左マージンを調整 */
}

/* 著者名のスタイル */
.sidebar .author-box .author-name a {
  color: #7a2eb5; /* リンクの色を紫に設定 */
  text-decoration: none; /* 下線を削除 */
  letter-spacing: 1px; /* 文字間隔を拡大 */
  font-size: 18px; /* フォントサイズを18pxに設定 */
}

/* 著者の説明文スタイル */
.sidebar .author-box .author-description {
  padding: 45px 25px 0px; /* 内部の余白を追加 */
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph; /* テキストの整形方法を指定 */
}

/* その他のテキストスタイル */
.sidebar .author-box p {
  line-height: 1.8; /* 行の高さを調整 */
  font-size: 14px; /* フォントサイズを14pxに設定 */
}

/* 著者のサムネイル画像スタイル */
.sidebar .author-box .author-thumb {
  width: 120px; /* 幅を指定 */
  margin: 0 auto; /* 横方向の中央配置 */
  position: absolute; /* 絶対的な位置指定 */
  top: 50px; /* 上方向からの位置指定 */
  right: 0; /* 右からの位置指定 */
  left: 0; /* 左からの位置指定 */
  bottom: 0; /* 下からの位置指定 */
}

/* 著者名のスタイル */
.sidebar .author-box .author-name {
  font-size: 1.1em; /* フォントサイズを1.1emに設定 */
  font-weight: bold; /* 太字に設定 */
  position: absolute; /* 絶対的な位置指定 */
  margin-bottom: 0.4em; /* 下方向のマージン追加 */
  top: 23px; /* 上方向からの位置指定 */
  bottom: 0; /* 下方向からの位置指定 */
  right: 0; /* 右からの位置指定 */
  left: 0; /* 左からの位置指定 */
}

/* 著者ウィジェット名のスタイル */
.sidebar .author-box .author-widget-name {
  position: absolute; /* 絶対的な位置指定 */
  top: 3px; /* 上方向からの位置指定 */
  bottom: 0; /* 下方向からの位置指定 */
  right: 0; /* 右からの位置指定 */
  left: 0; /* 左からの位置指定 */
  font-size: 0.7em; /* フォントサイズを0.7emに設定 */
  color: #bbb; /* グレーのテキスト色 */
}

/* SNSフォローボタンのスタイル */
.sidebar .author-box .sns-follow {
  padding: 15px 10px; /* 内部の余白を追加 */
}

/* SNSフォローボタンの配置スタイル */
.sidebar .author-box .sns-follow-buttons {
  display: flex; /* 要素を横並びに配置 */
  justify-content: space-evenly; /* 要素間のスペースを均等に配置 */
}

/* 各SNSフォローボタンのスタイル */
.sidebar .author-box .sns-follow-buttons a {
  border-radius: 50%; /* 角丸を追加 */
  border: none; /* 境界線を削除 */
  width: 45px; /* 幅を指定 */
  height: 45px; /* 高さを指定 */
  line-height: 45px; /* 行の高さを指定 */
  font-size: 30px; /* フォントサイズを30pxに設定 */
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231); /* 軽い影を追加 */
  background:#fff; /* 背景色を白に設定 */
}

/* ホバー時のスタイル */
.sidebar .author-box .sns-follow-buttons a:hover {
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2); /* より強い影を追加 */
  opacity: 1; /* 不透明度を設定 */
}

/* フォローボタン内のアイコンのスタイル */
.sidebar .author-box .sns-follow-buttons .follow-button span:before {
  color: #7a2eb5; /* アイコンの色を青に設定 */
}


/* プロフィールへのリンクボタンのスタイル */
.sidebar .author-box .to-profile {
  position: absolute; /* 絶対的な位置指定 */
  background: #fff; /* 背景色を白に設定 */
  border-radius: 50%; /* 角丸を追加 */
  width: 50px; /* 幅を指定 */
  height: 50px; /* 高さを指定 */
  line-height: 50px; /* 行の高さを指定 */
  text-align: center; /* テキストを中央寄せ */
  text-decoration: none; /* 下線を削除 */
  color: #46CDFF; /* テキスト色を青に設定 */
  box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231); /* 軽い影を追加 */
  top: 105px; /* 上方向からの位置指定 */
  right: 45px; /* 右からの位置指定 */
  font-size: 0.9em; /* フォントサイズを0.9emに設定 */
  font-weight: bold; /* 太字に設定 */
}

/* プロフィールへのリンクボタンのホバー時のスタイル */
.sidebar .author-box .to-profile:hover {
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2); /* より強い影を追加 */
}

/* SNSフォローメッセージのスタイル */
.sidebar .author-box .sns-follow-message {
  margin-bottom: 10px; /* 下方向のマージンを追加 */
  font-size: 13px; /* フォントサイズを13pxに設定 */
}

/* SNSフォローメッセージの前後に追加する要素のスタイル */
.sidebar .author-box .sns-follow-message:before {
  content: "＼"; /* メッセージの前に追加する内容を指定 */
  margin-right: 5px; /* 右方向のマージンを追加 */
}
.sidebar .author-box .sns-follow-message:after {
  content: "／"; /* メッセージの後に追加する内容を指定 */
  margin-left: 5px; /* 左方向のマージンを追加 */
}

/* 各SNSアイコンのスタイル */
.sidebar .icon-twitter-logo:before {
  position: absolute; /* 絶対的な位置指定 */
  top: 8px; /* 上方向からの位置指定 */
  right: 0; /* 右からの位置指定 */
  bottom: 0; /* 下方向からの位置指定 */
  left: 0; /* 左からの位置指定 */
}
.sidebar .icon-facebook-logo:before {
  position: absolute; /* 絶対的な位置指定 */
  top: 6px; /* 上方向からの位置指定 */
  bottom: 0; /* 下方向からの位置指定 */
  right: 8px; /* 右からの位置指定 */
  left: 0; /* 左からの位置指定 */
}
.sidebar .icon-hatebu-logo:before {
  position: absolute; /* 絶対的な位置指定 */
  top: 8px; /* 上方向からの位置指定 */
  bottom: 0; /* 下方向からの位置指定 */
  right: 0; /* 右からの位置指定 */
  left: 0; /* 左からの位置指定 */
}
.sidebar .icon-feedly-logo:before {
  position: absolute; /* 絶対的な位置指定 */
  top: 8px; /* 上方向からの位置指定 */
  right: 0; /* 右からの位置指定 */
  bottom: 0; /* 下方向からの位置指定 */
  left: 0; /* 左からの位置指定 */
}
.sidebar .icon-rss-logo:before {
  position: absolute; /* 絶対的な位置指定 */
  top: 8px; /* 上方向からの位置指定 */
  right: 0; /* 右からの位置指定 */
  bottom: 0; /* 下方向からの位置指定 */
  left: 0; /* 左からの位置指定 */
}