@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){
  /*必要ならばここにコードを書く*/
}
/* スマホの三本線を右側・大型・ピンクにする */
@media screen and (max-width: 834px) {

  .mobile-header-menu-buttons.mobile-menu-buttons {
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 72px !important;
    padding: 0 18px !important;
    background: #fff !important;
  }

  .mobile-header-menu-buttons .navi-menu-button {
    width: 72px !important;
    flex: 0 0 72px !important;
    margin-left: auto !important;
  }

  .mobile-header-menu-buttons #navi-menu-open {
    width: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-header-menu-buttons #navi-menu-open .menu-icon,
  .mobile-header-menu-buttons #navi-menu-open .menu-icon > span {
    color: #ef7f9f !important;
    font-size: 40px !important;
    line-height: 1 !important;
  }

  .mobile-header-menu-buttons .navi-menu-caption {
    display: none !important;
  }
}
/* スマホヘッダー完成版：屋号・電話・三本線 */
@media screen and (max-width: 834px) {

  .mobile-header-menu-buttons.mobile-menu-buttons {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 86px !important;
    padding: 0 12px 0 16px !important;
    background: #fff !important;
  }

  /* スマホ婚活倶楽部 */
  .mobile-header-menu-buttons .logo-menu-button {
    order: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .mobile-header-menu-buttons .logo-menu-button > a {
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    color: #34445a !important;
    white-space: nowrap !important;
    font-family:
      "Klee",
      "YuKyokasho",
      "Hiragino Maru Gothic ProN",
      "Yu Mincho",
      serif !important;
    font-size: clamp(15px, 4.2vw, 20px) !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
  }

  /* 電話マーク・受付時間 */
  .mobile-header-menu-buttons .custom-menu-button {
    order: 2 !important;
    width: 88px !important;
    flex: 0 0 88px !important;
  }

  .mobile-header-menu-buttons a[href="#phone"] {
    height: 82px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #444 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    pointer-events: none !important;
  }

  .mobile-header-menu-buttons a[href="#phone"]::before {
    content: "\f095";
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    color: #ef7f9f !important;
    font-size: 34px !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
  }

  .mobile-header-menu-buttons a[href="#phone"] .custom-menu-icon {
    display: none !important;
  }

  /* 右側の三本線 */
  .mobile-header-menu-buttons .navi-menu-button {
    order: 3 !important;
    width: 64px !important;
    flex: 0 0 64px !important;
    margin-left: 0 !important;
  }

  .mobile-header-menu-buttons #navi-menu-open {
    width: 64px !important;
    min-height: 82px !important;
  }

  .mobile-header-menu-buttons #navi-menu-open .menu-icon,
  .mobile-header-menu-buttons #navi-menu-open .menu-icon > span {
    color: #ef7f9f !important;
    font-size: 40px !important;
  }

  .mobile-header-menu-buttons .navi-menu-caption {
    display: none !important;
  }
}
/* スマホ：旧タイトルと日付を消して画像を上へ */
@media screen and (max-width: 834px) {

  /* 「出会い倶楽部」を含む旧ヘッダーを削除 */
  #header {
    display: none !important;
  }

  /* 公開日・更新日を削除 */
  body.page .date-tags {
    display: none !important;
  }

  /* 上部の余白を詰める */
  body.page #content {
    margin-top: 0 !important;
  }

  body.page #main {
    padding-top: 0 !important;
  }

  body.page .entry-content {
    margin-top: 0 !important;
  }

  body.page .sk-top {
    margin-top: 0 !important;
  }
}
/* トップ画像がヘッダーに隠れないよう補正 */
@media screen and (max-width: 834px) {
  body.page #content {
    margin-top: 86px !important;
  }
}
/* 大きくした固定ヘッダーの高さに合わせる */
@media screen and (max-width: 834px) {

  body.mblt-header-mobile-buttons,
  body.mblt-header-and-footer-mobile-buttons {
    margin-top: 86px !important;
  }

  body.page #content {
    margin-top: 0 !important;
  }
}
/* ヘッダーの屋号を少し大きくする */
@media screen and (max-width: 834px) {
  .mobile-header-menu-buttons .logo-menu-button > a {
    font-size: clamp(17px, 4.8vw, 21px) !important;
  }
}
/* 屋号をはっきり大きくする */
@media screen and (max-width: 834px) {
  .mobile-header-menu-buttons .logo-menu-button > a {
    font-size: 19px !important;
  }
}
/* トップ画像をスマホ画面いっぱいに広げる */
@media screen and (max-width: 834px) {
  body.page .sk-top {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}
/* トップ画像右下の丸いバッジを削除 */
@media screen and (max-width: 834px) {
  .sk-badge {
    display: none !important;
  }
}
/* 入会金0円を最初の画面内で目立たせる */
@media screen and (max-width: 834px) {

  .sk-zero {
    left: 0 !important;
    right: 0 !important;
    bottom: 20% !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;

    color: #f36aa9 !important;
    font-size: clamp(44px, 12vw, 64px) !important;
    font-weight: 900 !important;

    text-shadow:
      3px 0 #fff,
      -3px 0 #fff,
      0 3px #fff,
      0 -3px #fff,
      2px 2px #fff,
      -2px -2px #fff,
      0 7px 18px rgba(0,0,0,.20) !important;
  }

  .sk-zero small {
    display: block !important;
    width: max-content !important;
    margin: 10px auto 0 !important;
    padding: 6px 20px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.92) !important;

    color: #34445a !important;
    font-size: clamp(21px, 6vw, 30px) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
  }
}
/* 料金表示を控えめにして、手元より下へ移動 */
@media screen and (max-width: 834px) {

  .sk-zero {
    bottom: 14% !important;
    font-size: clamp(32px, 9vw, 44px) !important;

    text-shadow:
      2px 0 #fff,
      -2px 0 #fff,
      0 2px #fff,
      0 -2px #fff,
      0 5px 12px rgba(0,0,0,.18) !important;
  }

  .sk-zero small {
    margin-top: 5px !important;
    padding: 4px 14px !important;
    font-size: clamp(16px, 4.5vw, 20px) !important;
  }
}
/* 三本線メニューの移動先を固定ヘッダーより下に表示 */
@media screen and (max-width: 834px) {
  #flow,
  #support,
  #faq {
    scroll-margin-top: 105px !important;
  }
}
/* =====================================
   パソコン表示専用
   835px以上にだけ適用
===================================== */
@media screen and (min-width: 835px) {

/* Cocoon標準ヘッダーを非表示 */
#header-container,
#header-container-in,
#header,
#navi {
  display: none !important;
}

/* スマホ婚活倶楽部の共通ヘッダーをPCにも表示 */
.mobile-header-menu-buttons.mobile-menu-buttons {
  display: flex !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: 1000 !important;

  width: 100% !important;
  height: 112px !important;
  min-height: 112px !important;
  margin: 0 !important;
  padding: 0 max(36px, calc((100% - 1120px) / 2)) !important;

  align-items: center !important;
  justify-content: flex-start !important;

  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 15px rgba(0,0,0,.08) !important;
}

/* 各ボタンの共通設定 */
.mobile-header-menu-buttons.mobile-menu-buttons > li {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: 112px !important;
  min-height: 112px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* スマホ婚活倶楽部 */
.mobile-header-menu-buttons > li.logo-menu-button {
  margin-right: auto !important;
}

.mobile-header-menu-buttons > li.logo-menu-button .menu-button-in {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: 112px !important;
  padding: 0 !important;

  color: #34445a !important;
  font-family:
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    "Hiragino Sans",
    sans-serif !important;
  font-size: clamp(28px,2.5vw,38px) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* 電話マークと営業時間 */
.mobile-header-menu-buttons > li:nth-child(2) {
  margin-left: auto !important;
  margin-right: 38px !important;
}

.mobile-header-menu-buttons > li:nth-child(2) .menu-button-in {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 130px !important;
  height: 112px !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.mobile-header-menu-buttons > li:nth-child(2) .fa-star::before {
  content: "\f095" !important;
}

.mobile-header-menu-buttons > li:nth-child(2) .menu-icon {
  display: block !important;
  color: #ef7fa4 !important;
  font-size: 45px !important;
  line-height: 1 !important;
}

.mobile-header-menu-buttons > li:nth-child(2) .menu-caption {
  display: block !important;
  margin-top: 7px !important;
  color: #777 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* 三本線 */
.mobile-header-menu-buttons > li:last-child {
  width: 90px !important;
}

.mobile-header-menu-buttons > li:last-child #navi-menu-open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 90px !important;
  height: 112px !important;
  min-height: 112px !important;
  padding: 0 !important;
}

.mobile-header-menu-buttons > li:last-child .menu-icon {
  display: block !important;
  color: #ef7fa4 !important;
  font-size: 54px !important;
  line-height: 1 !important;
}

.mobile-header-menu-buttons > li:last-child .menu-caption {
  display: none !important;
}

/* ページタイトル・日付・パンくずを削除 */
.article-header,
.entry-title,
.date-tags,
.post-date,
.post-update,
.breadcrumb {
  display: none !important;
}

/* 右側の検索・投稿・カテゴリーを削除 */
#sidebar,
.sidebar,
.sidebar-scroll {
  display: none !important;
}

/* 本文を1列・中央・大きくする */
#content,
#content-in,
.content-in {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#main,
.main {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.article,
.entry-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* トップ画像を大きく中央表示 */
.sk-top {
  width: calc(100% - 48px) !important;
  max-width: 1000px !important;
  margin: 0 auto 60px !important;
}

/* 丸いバッジはPCでも非表示 */
.sk-badge {
  display: none !important;
}

/* PC版「入会金0円」 */
.sk-zero {
  left: 7% !important;
  bottom: 8% !important;
  color: #ec6599 !important;
  font-size: clamp(42px,4.3vw,62px) !important;
  text-shadow:
    3px 0 #fff,
    -3px 0 #fff,
    0 3px #fff,
    0 -3px #fff,
    0 7px 18px rgba(0,0,0,.18) !important;
}

.sk-zero small {
  display: block !important;
  width: fit-content !important;
  margin-top: 9px !important;
  padding: 7px 24px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.94) !important;
  color: #34445a !important;
  font-size: 21px !important;
  text-shadow: none !important;
}

/* 各セクションの横幅を整える */
.ibj-story,
.sk-support,
.price-pop,
.rcp-wrap,
.voice-wrap,
.sk-faq {
  width: calc(100% - 48px) !important;
  max-width: 1100px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

}
/* PCヘッダーを表示するための修正 */
@media screen and (min-width: 835px) {

  #header-container,
  #header-container-in {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  #header,
  #navi {
    display: none !important;
  }

  .mobile-header-menu-buttons.mobile-menu-buttons {
    display: flex !important;
  }

}
/* PCトップ画像の大きさと料金位置を修正 */
@media screen and (min-width: 835px) {

  .sk-top {
    width: calc(100% - 48px) !important;
    max-width: 760px !important;
    margin: 24px auto 60px !important;
  }

  .sk-zero {
    left: 50% !important;
    right: auto !important;
    bottom: 8% !important;
    width: max-content !important;
    max-width: 90% !important;
    text-align: center !important;
    transform: translateX(-50%) !important;
    font-size: 46px !important;
  }

  .sk-zero small {
    margin: 9px auto 0 !important;
    font-size: 19px !important;
  }

}
/* PCトップ画像を横長にして全要素を見せる */
@media screen and (min-width: 835px) {

  .sk-top {
    width: calc(100% - 48px) !important;
    max-width: 1000px !important;
    height: 620px !important;
    margin: 24px auto 60px !important;
    overflow: hidden !important;
    border-radius: 28px !important;
  }

  .sk-top > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 63% !important;
  }

  .sk-copy {
    top: 3% !important;
  }

  .sk-zero {
    left: 50% !important;
    right: auto !important;
    bottom: 5% !important;
    width: max-content !important;
    max-width: 90% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    font-size: 44px !important;
  }

  .sk-zero small {
    margin: 8px auto 0 !important;
    font-size: 18px !important;
  }
}

/* パソコン用ヘッダーを画面上部に固定 */
@media screen and (min-width: 835px) {

  #header-container,
  #header-container-in,
  #header,
  #navi {
    display: none !important;
  }

  body {
    padding-top: 112px !important;
  }

  .mobile-header-menu-buttons.mobile-menu-buttons {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
  }

  body.admin-bar .mobile-header-menu-buttons.mobile-menu-buttons {
    top: 32px !important;
  }
}