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

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


/************************************
** フォントインポート
************************************/
/* New+Tegomin */
@import url('https://fonts.googleapis.com/css2?family=New+Tegomin:wght@400;500;700&display=swap');

/* Noto+Sans+JP */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Zen+Maru+Gothic&display=swap');

/* M+PLUS+Rounded+1c 本文 */
/* Kiwi+Maru h4 */
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Zen+Maru+Gothic&display=swap');


/************************************
** ページ全体のフォント設定と本文のスタイル
************************************/

/* 全体のフォントを 'New Tegomin', sans-serif に設定 */
body {
    font-family: 'New Tegomin', sans-serif;
}

/* 特定のクラスに対してフォントを 'M PLUS Rounded 1c', sans-serif に変更 */
p.m-plus-rounded-1c-regular {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400; /* フォントのウェイトを通常（400）に設定 */
    font-style: normal; /* フォントのスタイルを通常に設定 */
    font-size: 0.8em; /* フォントサイズを0.8emに設定 */
    color: #666; /* 文字色を灰色（#666）に設定 */
	margin-bottom:unset!important;
}

/* 段落、リスト、見出し、その他の要素に共通のスタイル */
p, ul, ol, dl, table, h3 {
    margin-bottom: 20px; /* 下の余白を20pxに設定 */
    font-weight: 700; /* フォントのウェイトを太字（700）に設定 */
}

.your-image-class:hover::after {
    content: none;
}

/************************************
** 画像要素のスタイル
************************************/
img {
  max-width: 100%; /* 画像の幅を親要素に合わせて最大100%までに制限 */
  height: auto; /* 高さは自動で調整され、アスペクト比が維持される */
  display: block; /* インライン要素からブロック要素に変更され、他の要素との間に余白が作られる */
  margin: 0 auto; /* 左右の余白を自動で設定し、画像を水平中央に配置 */
}

/************************************
** リスト要素のスタイル
************************************/
ul {
  list-style: none; /* リストのマーカー（●、・など）を非表示にする */
  padding: 0 !important; /* リストの内側の余白をゼロに設定（!importantは優先度を高めるために使用） */
}


/************************************
** グローバルメニューのスタイル
************************************/

/* ロゴの上下のパディングを追加 */
.header-container-in.hlt-top-menu .logo-header img {
	 padding: 10px 0;
}

/* メインメニューのリストアイテムに右側の境界線を追加 */
#navi .navi-in > ul > li{
  border-right: 1px solid #eee;
}
/* メインメニューの最後のリストアイテムの右側の境界線を削除 */
#navi .navi-in > ul > li:last-child{
  border-right-width: 0;
}
/* メインメニューのサブメニューの矢印の位置を調整 */
.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
} 

/* メインメニューのホバー時の背景色を変更 */
#navi .navi-in a:hover {
    background-color: #4f4f4f;
    transition: all 0.3s ease-in-out; /* 全ての変化をスムーズにするトランジションを追加 */
    color: #ffffff; /* テキスト色を白色に変更 */
}

/* メインメニューのリストアイテムにホバー時にサブメニューを表示 */
.fixed-header .navi-in > ul li:hover > ul {
display: block;
}

/* サブメニューの背景色を変更 */
.navi-in .sub-menu a {
    background-color: #f0ece2 !important;
    border: 1px solid #ccc; /* 囲み線のスタイルを指定 */
    box-sizing: border-box; /* パディングとボーダーを含むボックスサイズを指定 */
}

/* サブメニューのホバー時の背景色を変更 */
.navi-in .sub-menu a:hover {
    background-color: #333 !important;
}

/* フッターナビゲーションのリストアイテムの境界線を削除 */
#navi-footer li {
    border: none;
}


/************************************
** エントリータイトルのスタイル
************************************/

/* ホームページのエントリータイトル非表示 */
.home .entry-title {
    display: none;
}

/* エントリータイトル全般 */
.entry-title {
    position: relative; /* 親要素に対して相対位置を設定 */
    color: white; /* テキストの色を白に設定 */
}

/* h1タグのエントリータイトル */
h1.entry-title {
    font-size: 1.8rem; /* フォントサイズを1.8remに設定 */
    position: relative; /* 疑似要素との重なりを設定 */
    padding: 0 55px; /* 左右に55pxのパディングを設定 */
    display: flex; /* フレックスボックスを使用して中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    justify-content: center; /* 水平方向に中央揃え */
    text-align: center; /* テキストを中央揃え */
    z-index: 1; /* テキストが背景画像の上に表示されるように設定 */
    height: 550px; /* 必要に応じて高さを調整 */
}

/* h1タグのエントリータイトルの疑似要素 */
h1.entry-title::before {
    content: ""; /* 疑似要素の内容を空に設定 */
    position: absolute; /* 絶対位置に設定 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://coyoten0a.stars.ne.jp/wp-content/uploads/2024/05/cropped-expansion_20240531203800902-1-e1717315326246.jpg'); /* 背景画像のURLを設定 */
    background-position: center; /* 画像の位置を中央に設定 */
    background-size: cover; /* 画像をコンテナ全体にフィットさせる */
    z-index: -1; /* 背景画像がテキストの下に表示されるように設定 */
}

/* モバイル版のエントリータイトルのスタイル */
@media (max-width: 768px) {
    h1.entry-title {
        height: 300px; /* モバイル表示時の高さを300pxに設定 */
    }
}




/************************************
** h2要素のスタイル
************************************/

h2 {
    text-align: center; /* テキストを中央揃えにする */
}


/************************************
** ローディングアニメーション
************************************/

/* ローディング画面全体のスタイル */
.loading-screen {
  position: fixed; /* ページ全体を覆う */
  top: 0;
  left: 0;
  width: 100%; /* 全幅 */
  height: 100%; /* 全高 */
  background-color: #ffffff; /* 背景色を白に設定 */
  display: flex; /* フレックスボックスレイアウトを使用 */
  justify-content: center; /* 水平方向に中央揃え */
  align-items: center; /* 垂直方向に中央揃え */
  z-index: 1000; /* 他の要素の上に表示 */
  opacity: 1; /* 初期状態は不透明 */
  transition: opacity 1s ease-in-out; /* フェードアウトアニメーション */
}

/* ローディング画面のコンテンツのスタイル */
.loading-content {
  text-align: center; /* 中央揃え */
}

/* 実際のコンテンツのスタイル */
.actual-content {
  visibility: hidden; /* 初期状態で非表示にする */
  opacity: 0; /* 初期状態で透明にする */
  transition: opacity 1s ease-in-out; /* フェードインアニメーションを追加 */
}

/************************************
** タイプライターアニメーション
************************************/

/* タイプライターアニメーションのスタイル */
.typeWriter {
  font-size: 1.2rem; /* フォントサイズ */
  color: #313131; /* テキスト色 */
  text-align: center; /* 中央揃え */
  margin: 0 !important; /* 余白をリセット */
  min-height: 120px; /* 最小高さを設定 */
}

/* タイプライターアニメーション内のスパン要素とcoyotenoa要素のスタイル */
.typeWriter > span,
.coyotenoa > span {
  text-decoration: underline; /* 下線を追加 */
  text-decoration-color: #313131; /* 下線の色 */
  animation: caret 1s steps(1) infinite; /* キャレットアニメーションを適用 */
}

/* キャレットアニメーションのキーフレーム */
@keyframes caret {
  50% {
    text-decoration-color: transparent; /* 50%の時点で下線を透明にする */
  }
}

/************************************
**  topページcoyotenoaの文字のスタイル
************************************/	
span.coyotenoa {
  text-align: center; /* 中央揃え */
  font-size: 1.6em; /* フォントサイズを大きくする */
  visibility: hidden; /* 最初は非表示にする */
}


/************************************
** フェードインアニメーション
************************************/

.fade-in {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

/************************************
** h4要素のスタイル
************************************/

/* h4要素の囲みとフォントのスタイル */
h4 {
    font-size: 100px; /* フォントサイズを100pxに設定 */
    padding: 1rem 2rem; /* 上下に1rem、左右に2remのパディングを設定 */
    border-left: 6px double #000; /* 左側に太い二重線の黒色ボーダーを設定 */
    background: #f4f4f4; /* 背景色を灰色に設定 */
    font-family: "Kiwi Maru", serif; /* フォントを"Kiwi Maru"に設定 */
    font-weight: 400; /* フォントの太さを普通（400）に設定 */
    font-style: normal; /* フォントスタイルを通常に設定 */
}


/************************************
** カスタムセクションスタイル(home)
************************************/

/* カスタムセクション全体のスタイル */
.custom-section {
    padding: 60px 20px; /* 上下に60px、左右に20pxのパディングを設定 */
    margin: 0 auto; /* 中央揃えにするために左右のマージンを自動に設定 */
    max-width: 1200px; /* 最大幅を1200pxに制限 */
    background-color: #F4F4F4; /* 背景色設定 */
    margin-bottom: 30px; /* 下の余白を30pxに設定 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ボックスシャドウを設定 */
    border-radius: 8px; /* 角丸を8pxに設定 */
}

/* トップセクションのスタイル */
.custom-top-section {
    position: relative; /* 相対位置を設定 */
    text-align: center; /* 中央揃えにするためにテキストを中央に配置 */
    color: white; /* テキスト色を白に設定 */
    padding: 60px 20px; /* 上下に60px、左右に20pxのパディングを設定 */
    margin-bottom: 30px; /* 下の余白を30pxに設定 */
}

.custom-top-section h2 {
    font-size: 2.5rem; /* 見出しのフォントサイズを2.5remに設定 */
    padding: 0 20px; /* 左右に20pxのパディングを設定 */
}

/* セクション見出しのスタイル */
.custom-section-heading {
    text-align: center; /* 中央揃えにするためにテキストを中央に配置 */  
    border-bottom: 2px solid #e5e5e5; /* 下線を2pxの灰色で設定 */
    display: inline-block; /* ブロックレベル要素をインラインブロック要素に変更 */
	background-color: #F4F4F4 !important; /* 背景色設定 */
}

/* カスタムセクション内のリンクのスタイル */
.custom-section a {
    color: #007bff; /* リンクの色を青に設定 */
    text-decoration: none; /* リンクの下線をなしに設定 */
    position: relative; /* 相対位置を設定 */
    padding-bottom: 2px; /* 下線のスペースを確保 */
}

.custom-section a::after {
    content: ''; /* 疑似要素の内容を空に設定 */
    position: absolute; /* 絶対位置を設定 */
    bottom: 0; /* 下端に配置 */
    left: 0; /* 左端に配置 */
    width: 100%; /* 幅を100%に設定 */
    height: 2px; /* 高さを2pxに設定 */
    background-image: linear-gradient(to right, #007bff 0%, #007bff 100%); /* グラデーションの背景を設定 */
    background-repeat: no-repeat; /* 背景の繰り返しをなしに設定 */
    background-size: 0% 2px; /* 背景の初期サイズを設定 */
    transition: background-size 0.3s ease; /* グラデーションの変化をスムーズにするトランジションを設定 */
}

.custom-section a:hover::after {
    background-size: 100% 2px; /* ホバー時のグラデーションのサイズを100%に変更 */
    color: #0056b3; /* ホバー時のテキスト色を変更 */
}

/* モバイル向けのスタイル */
@media (max-width: 768px) {
    .custom-top-section h2 {
        font-size: 1.8rem; /* モバイル端末での見出しのフォントサイズを小さくする */
    }
    .custom-section {
        padding: 40px 10px; /* モバイル端末でのパディングを調整 */
    }
    .custom-section-heading {
        font-size: 2.0rem; /* モバイル端末での見出しのフォントサイズを調整 */
    }
    .m-plus-rounded-1c-regular {
        font-size: 0.9rem; /* モバイル端末での特定のフォントのサイズを調整 */
    }
}

/************************************
** home作品への思い下コンテンツ
************************************/
/* item-titleを正円のボタンにする */
.item-title {
  display: inline-flex; /* Flexboxを使用して中央揃えに */
  align-items: center; /* 中央揃え */
  justify-content: center; /* 中央揃え */
  width: 100px; /* ボタンの大きさ */
  height: 100px; /* ボタンの大きさ */
  border-radius: 50%; /* 正円にする */
  color: #333; /* テキストの色 */
  text-align: center; /* テキストを中央に配置 */
  font-size: 16px; /* テキストの大きさ */
  cursor: pointer; /* カーソルをポインタに変更 */
  margin: 10px; /* マージンを追加 */
  border: double 4px #333; /* ボーダー */
  position: relative; /* 相対位置指定 */
  overflow: hidden; /* 内部要素のオーバーフローを隠す */
  transition: .3s; /* 変化のスムーズさ */
}
.item-title::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #333;
  z-index: -1;
  transition: height 0.3s ease;
}

.item-title:hover::before {
  height: 100%;
}
.item-title:hover {
  color: #fff; /* ホバー時のテキスト色 */
}

.item-title.active {
  color: #fff; /* ホバー時のテキスト色 */
}

/* アイコンのスタイルを調整 */
.item-title .fas.fa-angle-down {
  position: absolute; /* 絶対位置指定 */
  bottom: 10px; /* 下からの位置調整 */
  left: 50%; /* 左揃え */
  transform: translateX(-50%); /* 水平中央揃え */
  font-size: 16px; /* アイコンの大きさ */
  pointer-events: none; /* クリックイベントを無効化 */
}

/* 説明文を初期非表示から初期は折りたたむように変更 */
.description {
  height: 0; /* 高さを0にして隠す */
  overflow: hidden; /* 内容がはみ出さないように */
  transition: height 0.3s ease; /* 高さの変化をスムーズに */
	  text-align: left; /* 文章を左揃えに */
}

/* ボタンがアクティブ（クリックされたとき）のときの説明文の表示 */
.item-title.active + .description {
  height: auto; /* 高さを自動にして内容を表示 */
}

/* ボタンが非アクティブ（クリックされていない状態）のときの説明文の非表示 */
.item-title:not(.active) + .description {
  height: 0; /* 高さを0にして内容を非表示 */
}

/* 3つのitem-titleを横並びにする */
.items-container {
  display: flex;
  justify-content: space-around; /* アイテムを均等に配置 */
  text-align: center;
}

.items-container li {
  flex: 1; /* 各アイテムが均等にスペースを取る */
  max-width: 300px; /* 必要に応じて最大幅を調整 */
  margin: 10px; /* 必要に応じてマージンを調整 */
}


/* 一定のサイズでitem-titleを縦に中央揃えにする */
@media (max-width: 1024px) {
  .items-container {
    flex-direction: column; /* 縦並びに */
    align-items: center; /* 中央揃え */
  }
}





/************************************
** ふるさと納税のバナー
************************************/

/* トップバナー全体のスタイル */
.top-banner {
    display: flex; /* フレックスコンテナとして要素を並べる */
    flex-wrap: wrap; /* 要素が行をまたぐように折り返す */
}

.top-banner li {
    box-sizing: border-box; /* ボックスサイズをボーダーボックスに設定 */
}

.top-banner li img {
    max-width: 100%; /* 画像の幅を最大100%までに制限 */
    height: auto; /* 画像の縦横比を維持して自動的に高さを調整 */
}


/************************************
** news
************************************/

/* ニュースリスト全体のスタイル */
.news-list {
    list-style: none; /* リストのデフォルトのマーカーを削除 */
    margin: 0;
    padding: 0; 
}

/* 各ニュースアイテムのスタイル */
.news-list .item a {
    display: flex; /* リンク内の要素をフレックスコンテナとして並べる */
    flex-wrap: nowrap; /* 要素がはみ出した場合に折り返さないようにする */
    color: #333; /* テキストカラーを設定 */
    border-bottom: 1px solid #CCC; /* 下線を設定 */
    padding: 20px; /* パディングを設定 */
}

/* 最初のニュースアイテムに上部のボーダーを追加 */
.news-list .item:first-child a {
    border-top: 1px solid #CCC; /* 上部のボーダーを設定 */
}

/* 日付のスタイル */
.news-list .item .date {
    margin: 0; /* マージンを0に設定 */
    min-width: 140px; /* 最小幅を設定 */
    font-size: 16px; /* フォントサイズを設定 */
    padding-right: 20px; /* 右側のパディングを設定 */
}

/* カテゴリのスタイル */
.news-list .item .category {
    margin: 0; /* マージンを0に設定 */
    min-width: 140px; /* 最小幅を設定 */
    padding-right: 20px; /* 右側のパディングを設定 */
}

.news-list .item .category span {
    background: #999; /* 背景色を設定 */
    color: #FFF; /* テキストカラーを設定 */
    text-align: center; /* テキストを中央揃え */
    display: inline-block; /* インラインブロック要素として表示 */
    padding: 5px 20px; /* パディングを設定 */
    font-size: 12px; /* フォントサイズを設定 */
    line-height: 1; /* 行の高さを設定 */
}

/* タイトルのスタイル */
.news-list .item .title {
    margin: 0; /* マージンを0に設定 */
    width: 100%; /* 幅を100%に設定 */
}

/* ホバー時のタイトルの色を変更 */
.news-list .item a:hover .title {
    color: #00F; /* テキストカラーを変更 */
}

/* レスポンシブデザイン（768px以下の画面幅） */
@media screen and (max-width: 767px) {
    .news-list .item a {
        flex-wrap: wrap; /* 要素がはみ出した場合に折り返す */
    }
    .news-list .item .date {
        min-width: 100px; /* 最小幅を調整 */
    }
    .news-list .item .title {
        margin-top: 10px; /* 上部のマージンを追加 */
    }
}


/************************************
** gallery
************************************/

/* ギャラリーグリッドのスタイル */
.gallery {
    display: grid; /* グリッドレイアウトを使用 */
    grid-template-columns: repeat(4, 1fr); /* 列を4分割 */
    gap: 32px; /* グリッド間の間隔を設定 */
    margin-top: 10px; /* 上部のマージンを設定 */
}



/* レスポンシブデザイン（720px以下の画面幅） */
@media screen and (max-width: 720px) {
    .gallery {
		grid-template-columns: repeat(2, 1fr); /* 列を2分割に変更 */
        grid-gap: 24px; /* グリッド間の間隔を調整 */
        gap: 24px; /* 兼用の gap プロパティを設定 */
    }
}

/* レスポンシブデザイン（720px以下の画面幅） */
@media screen and (max-width: 720px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* 列を2分割に変更 */
        gap: 24px; /* グリッド間の間隔を調整 */
    }
}

/* レスポンシブデザイン（640px以下の画面幅） */
@media screen and (max-width: 640px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* 列を2分割に変更 */
        gap: 10px; /* グリッド間の間隔を調整 */
    }
}


/* ギャラリー内テキストのスタイル */
.gallery_text {
    padding: 0 5px 10px 5px; /* 上右下左のパディングを設定 */
    width: 100%; /* 幅を100%に設定 */
    box-sizing: border-box; /* ボックスサイズを指定 */
    text-align: center; /* テキストを中央揃え */
	height: 100%;
}

/* ギャラリー内の画像スタイル */
.gallery_image {
    width: 100%; /* 幅を100%に設定 */
    height: auto; /* 高さを自動調整 */
    display: block; /* ブロック要素として表示 */
    box-sizing: border-box; /* ボックスサイズを指定 */
}

/* ギャラリー内色情報のスタイル */
.gallery_color {
    display: block; /* ブロック要素として配置 */
    text-align: center; /* テキストを中央揃え */
}

/* ギャラリー内リストのスタイル */
.gallery_list {
    list-style-type: none; /* リストのデフォルトのマーカーを削除 */
    padding: 0; /* パディングを0に設定 */
    display: flex; /* フレックスレイアウトを使用 */
    margin: 0 -5px 0 -5px; /* マージンを0に設定 */
    flex-wrap: wrap; /* 要素がはみ出した場合に折り返す */
    justify-content: center; /* 要素を中央揃え */
}

/* ギャラリー内リストアイテムのスタイル */
.gallery_list li {
    width: 20px; /* 幅を指定 */
    height: 20px; /* 高さを指定 */
    border-radius: 50%; /* 円形に設定 */
    margin: 5px; /* マージンを設定 */
}

/* ギャラリー内リンクのスタイル */
.gallery_link {
    text-decoration: none; /* 下線を削除 */
    border: 1px solid #ddd; /* ボーダーを設定 */
    display: grid; /* フレックスレイアウトを使用 */
    grid-template-rows: max-content;
    align-items: center; /* アイテムを中央揃え */
    background-image: url('https://coyoten0a.stars.ne.jp/wp-content/uploads/2024/06/a331c065b7a488a7dd8bdf0df77760df.png'); /* 背景画像を設定 */
    background-size: cover; /* 背景をコンテナにフィットさせる */
    background-repeat: no-repeat; /* 背景を繰り返さない */
    padding: 6px; /* パディングを設定 */
    transition: transform 0.3s ease; /* アニメーションを設定 */
	height: 100%;
}

/* ホバー時のリンクのスタイル */
.gallery_link:hover {
    transform: scale(1.05); /* ホバー時に拡大 */
}

/* ギャラリー内見出しのスタイル */
.gallery .gallery_h2 {
    font-size: 0.8em !important; /* フォントサイズを設定 */
    background-color: transparent; /* 背景色を透明に設定 */
    color: #333333; /* テキストの色を設定 */
	height: 35%;
}

/* ギャラリー内テキストのスタイル */
.gallery .gallery_p {
    margin-bottom: 0 !important; /* 下部のマージンを設定 */
    font-size: 0.8em !important; /* フォントサイズを設定 */
    color: #333333; /* テキストの色を設定 */
}

/* ギャラリー内テキストのスタイル */
.gallery .gallery_p,
.gallery ul {
    margin-bottom: 0 !important; /* 下部のマージンを設定 */
    font-size: 0.8em !important; /* フォントサイズを設定 */
    color: #333333; /* テキストの色を設定 */
}

/************************************
** ギャラリーの作品紹介テキスト
************************************/

/* アコーディオンブロックのスタイル */
.accordion {
    display: flex; /* フレックスレイアウトを使用 */
    flex-direction: column; /* 縦方向のコンテンツ配置 */
    min-width: 200px; /* 最小幅を設定 */
}

/* アコーディオンアイテムのスタイル */
.accordion__item {
    display: block; /* ブロック要素として表示 */
}

/* アコーディオンヘッダーのスタイル */
.accordion__trigger {
    position: relative; /* 相対位置を設定 */
    text-align: left; /* テキストを左寄せ */
    padding: 10px; /* パディングを設定 */
    border-radius: 8px 8px 0 0; /* ボーダーの角を設定 */
    border: none; /* ボーダーを削除 */
    background: #e9e1d3; /* 背景色を設定 */
    color: #4e4e4e; /* テキストの色を設定 */
    width: 100%; /* 幅を100%に設定 */
    font-family: 'New Tegomin', sans-serif; /* フォントファミリーを指定 */
    font-size: 1.3em; /* フォントサイズを設定 */
    cursor: pointer; /* カーソルをポインターに変更 */
}

/* アコーディオンヘッダーの矢印スタイル */
.accordion__trigger:after {
    content: ""; /* コンテンツを追加 */
    border-top: 1px solid #4e4e4e; /* 上側のボーダーを設定 */
    border-left: 1px solid #4e4e4e; /* 左側のボーダーを設定 */
    display: inline-block; /* インラインブロック要素として表示 */
    width: 10px; /* 幅を設定 */
    height: 10px; /* 高さを設定 */
    transform: rotate(-135deg) translateY(9px); /* 回転と移動を設定 */
    position: absolute; /* 絶対位置を設定 */
    right: 20px; /* 右からの位置を設定 */
    top: 50%; /* 上からの位置を設定 */
    transition: transform .4s; /* 変化のアニメーションを設定 */
}

/* アコーディオンコンテンツのスタイル */
.accordion__content {
    position: relative; /* 相対位置を設定 */
    border-radius: 0 0 8px 8px; /* ボーダーの角を設定 */
    background: #f0ece2; /* 背景色を設定 */
    color: #4e4e4e; /* テキストの色を設定 */
    border: transparent; /* ボーダーを設定 */
    padding: 0 20px; /* パディングを設定 */
    line-height: 1.5; /* 行の高さを設定 */
    opacity: 0; /* 透明度を設定 */
    transition: padding 0.4s, opacity 0.4s; /* 変化のアニメーションを設定 */
}

/* 開かれた状態のアコーディオンコンテンツのスタイル */
.accordion__content.is-open {
    padding: 20px; /* パディングを設定 */
    opacity: 1; /* 透明度を設定 */
    border: none; /* ボーダーを削除 */
}

/* 開かれた状態のアコーディオンヘッダーの矢印スタイル */
.accordion__trigger.is-open:after {
    transform: rotate(45deg) translateY(-10px); /* 回転と移動を設定 */
}


/* アコーディオンアイテムの最初以外のマージン */
.accordion__item:not(:first-child) {
    margin-top: 16px; /* 上側のマージンを設定 */
}

/************************************
** 投稿ページのInstagram用
************************************/
.responsive-instagram {
    display: flex;
    flex-wrap: wrap;
}

.responsive-instagram div {
    flex: 1 0 21%; /* 画面幅に応じて調整 */
    margin: 5px;
    max-width: 300px; /* 最大幅を設定 */
}

/************************************
** SNSページのFacebook用
************************************/

/* フェイスブック用 */
.fb_wrap{
	text-align:center;
}

/************************************
** インデックスページのエントリーカードのPV数を非表示
************************************/

.entry-card .admin-pv {
	display: none;
}

/************************************
** 以下、親テーマの上書き
************************************/
.main {
    padding-top: unset !important;
	border:  unset !important;
}

.article h2 {
	padding: 10px !important;
	border-color: unset !important; 
	margin-bottom: 1.0em !important;
}


.article h3,
.article h4,
.article h5,
.article h6 {
    margin-bottom: unset !important;
	border-color: unset !important;
	 
}
.article h3{
	 border-top:unset !important;
    border-bottom: unset !important;
	border-left: unset !important;
   border-right:unset !important;
}

.article h4{
	 border-top:unset !important;
    border-bottom: unset !important;
}

/************************************
** プラグイン　MetaSlider
************************************/
.ms-theme-cubic {
    padding-bottom: 0px !important;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/





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

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

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