@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
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
:root {
  --scrollbar: 0;
}

/* 見出しh2の共通設定 */
.article h2 {
  position: relative;
  margin: 0 auto;
  margin-bottom: 50px;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  background-color: transparent;
  font-size: 32px;
  /* H2見出しの下線 */
}
@media screen and (max-width: 834px) {
  .article h2 {
    margin-bottom: 32px;
  }
}
@media screen and (max-width: 480px) {
  .article h2 {
    margin-bottom: 24px;
    font-size: 24px;
  }
}
.article h2::after {
  content: "";
  width: 100%;
  height: 2px;
  display: inline-block;
  background-color: #6d4d0e;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 480px) {
  .article h2 .author-info {
    font-size: 24px;
  }
}

/* 見出しh3の共通設定 */
.article h3 {
  background-color: #d1de4c;
  border-bottom: none;
  text-align: center;
  border-radius: 9999px;
  border-left: none;
  /* 1200px以上 */
}
.article h3::before {
  display: none;
}
@media (min-width: 1200px) {
  .article h3 {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}
@media screen and (max-width: 480px) {
  .article h3 {
    font-size: 15px;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* 見出しh4の共通設定 */
.article h4 {
  border: none;
  background: linear-gradient(transparent 60%, #ffec47 30%);
  /* javascriptでdivで囲っている */
  display: inline;
}

/* スペーサー */
.wp-block-spacer {
  height: 30px !important;
}
@media screen and (max-width: 834px) {
  .wp-block-spacer {
    height: 5px !important;
  }
}
.wp-block-spacer.high-spacer {
  height: 80px !important;
}
@media screen and (max-width: 834px) {
  .wp-block-spacer.high-spacer {
    height: 30px !important;
  }
}

/* 固定ページのアイキャッチ画像 */
.page .article-header .eye-catch-wrap {
  aspect-ratio: 4/1;
}
@media screen and (max-width: 834px) {
  .page .article-header .eye-catch-wrap {
    aspect-ratio: 2/1;
  }
}
.page .article-header .eye-catch-wrap figure {
  width: 100%;
  height: 100%;
}
.page .article-header .eye-catch-wrap figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ボタンの共通設定 */
.wp-block-cocoon-blocks-button-1 {
  --cocoon-custom-background-color: #d1de4c;
  --cocoon-custom-text-color: #6d4d0e;
}

.has-bottom-margin.is-style-bottom-margin-8em {
  margin-bottom: 0 !important;
}

/* モバイルヘッダー */
#menu-mobile-header {
  background-color: var(--cocoon-white-color);
  box-shadow: 0px 4px 15px 1px #ffdc00;
  /* ロゴボタン */
  /* メニューボタン */
}
#menu-mobile-header .logo-menu-button {
  justify-content: left;
}
#menu-mobile-header .logo-menu-button img {
  padding: 3px 10px;
}
#menu-mobile-header .navi-menu-button {
  justify-content: right;
}
#menu-mobile-header .navi-menu-button label {
  padding: 0 10px;
}

/* モバイルヘッダーの下の余白 */
#menu-menus {
  display: none !important;
}

#container {
  position: relative;
  z-index: 3;
}

.entry-content {
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 834px) {
  .entry-content {
    width: 100%;
  }
}

/* ヘッダー */
#header-container-in {
  width: auto;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 15px 4px #ffdc00;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
          clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
  /* ヘッダーのロゴ */
  /* ヘッダーのメニュー */
}
@media screen and (max-width: 1023px) {
  #header-container-in {
    opacity: 0;
  }
}
@media screen and (max-width: 1200px) {
  #header-container-in #header {
    width: 350px;
  }
}
#header-container-in #header .site-name-text-link .site-name-text {
  display: flex;
  align-items: center;
}
#header-container-in #header .site-name-text-link .site-name-text img {
  max-height: 40px;
}
#header-container-in #navi-in li {
  width: auto;
}
#header-container-in #navi-in li .item-label {
  padding: 0 15px;
}
@media screen and (max-width: 1200px) {
  #header-container-in #navi-in li .item-label {
    padding: 0 12px;
    font-size: 14px;
  }
}

/* 固定ヘッダー */
.fixed-header .navi-in > ul li:hover > ul {
  /* 固定ヘッダーのサブメニューが表示されない仕様の対策 */
  display: block;
}
.fixed-header .has-sub {
  /* 固定ヘッダーのサブメニューが表示されない仕様の対策 */
  display: block;
}

/* コンテンツ */
#content.content.cf {
  margin-top: 0;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--wide-size);
}

/* 投稿者名 */
.author-info {
  /* 非表示 */
  display: none;
}

/* ページ下部左右リンク */
#pager-post-navi {
  /* リンクを左右に並べる（デフォルトは上下） */
  flex-direction: row;
  justify-content: space-between;
  /* 「前へボタン」がなく「次へボタン」がある場合 */
  /* 「前へボタン」「次へボタン」の両方がある場合 */
}
#pager-post-navi:has(.next-post):not(:has(.prev-post)) {
  justify-content: right;
}
#pager-post-navi:has(.next-post):has(.prev-post) a {
  width: 50%;
}
#pager-post-navi::after {
  /* 右側に空白ができるのを防ぐ */
  display: none;
}

/* フッター */
#footer {
  margin-top: 0;
  /* フッターの要素の配置 */
  /* フッターのロゴ */
  /* フッターのメイン要素 */
  /* フッターのコピーライト */
}
#footer .footer-bottom-logo,
#footer .footer-bottom-content {
  float: none;
  text-align: center;
}
#footer .footer-bottom-logo {
  position: static;
}
#footer .footer-bottom-logo span.site-name-text {
  width: 100%;
  height: 100%;
}
#footer .footer-bottom-logo span.site-name-text img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#footer .footer-bottom-content {
  margin-top: 20px;
  /* フッターのメニュー */
}
#footer .footer-bottom-content .menu-footer {
  justify-content: center;
}
@media screen and (max-width: 834px) {
  #footer .footer-bottom-content .menu-footer {
    /* メニューの要素を左寄せにする */
    justify-content: space-between;
  }
}
@media screen and (max-width: 834px) {
  #footer .footer-bottom-content .menu-footer li.menu-item {
    /* メニューの要素を左寄せにする */
    flex: none;
  }
}
#footer .source-org.copyright {
  margin-top: 30px;
  font-size: 12px;
}

/* シングルページ */
.single {
  /* single アイキャッチ画像 */
}
.single .eye-catch-wrap {
  aspect-ratio: 4/1;
}
@media screen and (max-width: 834px) {
  .single .eye-catch-wrap {
    aspect-ratio: 2/1;
  }
}
.single .eye-catch-wrap figure {
  width: 100%;
  height: 100%;
}
.single .eye-catch-wrap figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* トップページ */
.front-top-page {
  /* メインビジュアル */
  /* 説明エリア */
  /*-----記事一覧3列横並び-----*/
  /* 説明の横カラムの横幅を100%に設定する（指定したクラスの親要素を検索して、CSSを設定） */
  /* 会員の例 */
}
.front-top-page.home.page .entry-title {
  /*フロント固定ページのタイトルを非表示*/
  display: none;
}
.front-top-page.home.page .post-date {
  /*フロント固定ページの投稿日を非表示*/
  display: none;
}
.front-top-page.home.page .post-update {
  /*フロント固定ページの更新日を非表示*/
  display: none;
}
.front-top-page #main {
  /* トップページのヘッダーとメインコンテンツの隙間を削除 */
  margin-top: -1em;
  padding-top: 0;
}
.front-top-page .wp-block-cover.is-light.main-visual {
  position: relative;
  width: calc(100vw - var(--scrollbar));
  margin: 0 calc(50% - (50vw - var(--scrollbar) / 2));
  height: 520px;
  min-height: auto;
  /* キャッチコピーの親 */
}
@media screen and (max-width: 1300px) {
  .front-top-page .wp-block-cover.is-light.main-visual {
    height: 430px;
  }
}
@media screen and (max-width: 640px) {
  .front-top-page .wp-block-cover.is-light.main-visual {
    height: 320px;
  }
}
.front-top-page .wp-block-cover.is-light.main-visual div:has(> .main-visual-catch-copy) {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 1200px) {
  .front-top-page .wp-block-cover.is-light.main-visual div:has(> .main-visual-catch-copy) {
    top: 50px;
  }
}
.front-top-page .wp-block-cover.is-light.main-visual figure {
  width: 50%;
}
@media screen and (max-width: 834px) {
  .front-top-page .wp-block-cover.is-light.main-visual figure {
    width: 70%;
  }
}
@media screen and (max-width: 480px) {
  .front-top-page .wp-block-cover.is-light.main-visual figure {
    width: 95%;
  }
}
.front-top-page .wp-block-cover.is-light.main-visual figure img {
  margin: 0 auto;
  width: 100%;
}
@media screen and (max-width: 782px) {
  .front-top-page .explain-group figure {
    aspect-ratio: 2/1;
  }
}
@media screen and (max-width: 782px) {
  .front-top-page .explain-group figure img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.front-top-page .explain-group .explain-text-box {
  /* 説明テキスト */
  /* display: flexにすると、副題が２行になったときに崩れる */
  display: block !important;
}
.front-top-page .explain-group .explain-text-box .h4-wrap {
  margin-bottom: 30px;
}
.front-top-page .new-entry-cards.widget-entry-cards.no-icon.cf a {
  /* PCで3列 */
  width: 32%;
  display: inline-flex;
  /*タイトルを左寄せ*/
  text-align: left;
}
@media screen and (max-width: 834px) {
  .front-top-page .new-entry-cards.widget-entry-cards.no-icon.cf a {
    /* タブレットで1列 */
    width: 100%;
    display: inline-flex;
  }
}
.front-top-page .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow :has(.explain-text-box) {
  flex-basis: 100% !important;
}
.front-top-page .members-question {
  /* 会員についての質問 */
  align-items: center;
  justify-content: center;
  margin-bottom: 50px !important;
}
@media screen and (max-width: 480px) {
  .front-top-page .members-question {
    /* スマホ */
    margin-bottom: 50px !important;
  }
}
@media screen and (max-width: 480px) {
  .front-top-page .member-example {
    /* スマホ */
    display: block !important;
  }
}
.front-top-page .member-example figure {
  /* 会員の例の写真 */
  margin-bottom: 0 !important;
  max-width: 220px;
}
@media screen and (max-width: 1023px) {
  .front-top-page .member-example figure {
    /* 1023px以下 */
    width: 40%;
  }
}
@media screen and (max-width: 480px) {
  .front-top-page .member-example figure {
    /* スマホ */
    float: left;
    margin: 0 10px 10px 0;
  }
}
.front-top-page .member-example figure img {
  /* 説明の横カラムの写真幅を100%に指定 */
  width: 100%;
}
.front-top-page .member-example p {
  /* 会員の紹介の文字列 */
  flex: 1;
}

/* おしゃべり飲み会 */
.page-id-81 {
  /* 参加方法のQRコード */
}
.page-id-81 .participate-qr-code {
  /* InstagramのQRコード */
  /* 直下のdiv */
}
@media screen and (max-width: 640px) {
  .page-id-81 .participate-qr-code {
    flex-wrap: wrap !important;
    justify-content: center;
  }
}
@media screen and (min-width: 476px) {
  .page-id-81 .participate-qr-code > *:first-child {
    margin-bottom: 0;
  }
}
.page-id-81 .participate-qr-code > div {
  gap: 0;
  /* タイトル, QRコード */
}
.page-id-81 .participate-qr-code > div > figure {
  width: 150px;
  aspect-ratio: 1/1;
}
.page-id-81 .participate-qr-code > div > p,
.page-id-81 .participate-qr-code > div > figure {
  font-size: 32px;
  margin-bottom: 10px !important;
}
@media screen and (max-width: 640px) {
  .page-id-81 .participate-qr-code > div > p,
  .page-id-81 .participate-qr-code > div > figure {
    font-size: 24px;
    margin-bottom: 4px !important;
  }
}

/* ご寄付について */
.page-id-90 .donate-mail-area .owner-mail-address {
  display: flex;
  justify-content: start;
  flex-direction: column;
}
.page-id-90 .donate-mail-area .owner-mail-address > * {
  margin: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: -moz-fit-content;
  width: fit-content;
  align-items: baseline;
}
.page-id-90 .bank-details-table tr td:first-child {
  width: 150px;
}
@media screen and (max-width: 834px) {
  .page-id-90 .bank-details-table tr td:first-child {
    width: 30%;
  }
}

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