@charset "UTF-8";

/*!
Theme Name: Cocoon Child for staywithdog
Description: staywithdogサイトのためのCocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: staywithdog
Author URI: https://staywithdog.com/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 子テーマ専用のカラー追加 */
:root {

  --white_A60: rgba(255, 255, 255, 0.6);
}

/* not text overflow */
*, :after, :before {
  min-inline-size: 0
}

.skin-grayish #notice-area {
  background-color: var(--skin-grayish-gradient);
}

/* 投稿　画像hover */
/* 投稿　ボタン hover */
.child-post-img img,
.child-link-btn {
  translate: 0 0;
  transition: translate .2s;
}

.child-post-img img:hover,
.child-link-btn:hover {
  translate: 0 -10px;
}

/* -------------------------------------------------------------------- */
/* Front */
/* -------------------------------------------------------------------- */

/* 動画公開日新着順 下線消去 */
.skin-grayish #index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1], .skin-grayish #index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2], .skin-grayish #index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3], .skin-grayish #index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4] {
  border-bottom: none;
}

/* btn hover style */
.skin-grayish .list-new-entries .list-more-button:hover, .skin-grayish .list-columns .list-more-button:hover, .skin-grayish .pagination-next-link:hover, .skin-grayish .index-tab-wrap .list-more-button:hover, .skin-grayish .comment-btn:hover, .skin-grayish .pager-links .post-page-numbers .page-numbers.page-prev-next:hover {
  background-color: var(--white_erase);
  border: 1px solid var(--white_erase);
  color: var(--white);
}

.skin-grayish .pagination a:hover, .skin-grayish .pager-links.pager-numbers .post-page-numbers .page-numbers:not(.current):hover, .skin-grayish .widget_tag_cloud .tagcloud a:hover {
  color: var(--white);
}

.skin-grayish .pagination a:hover span::before {
  color: var(--white);
}

.skin-grayish .pagination {
  flex-wrap: wrap;
  row-gap: 1em;
}

/* -------------------------------------------------------------------- */
/* 検索 */
/* -------------------------------------------------------------------- */

/* 検索の背景ダークカラー時、テキストを白へ */
.mobile-menu-buttons .search-menu-content .search-results-count,
.searchMenuDialog .gnavi-search-menu-content .search-results-count {
  color: var(--white);
}

.wp-block-search__input,
.search-box.input-box,
.entry-content input,
.entry-content textarea {
  font-size: 16px !important;
}

/* -------------------------------------------------------------------- */
/* block */
/* -------------------------------------------------------------------- */

/* wp pre-block */
pre.wp-block-preformatted {
  border: 1px solid var(--cocoon-xx-thin-color);
}

/* -------------------------------------------------------------------- */
/* 閲覧履歴 */
/* -------------------------------------------------------------------- */

.cstm-history-blk {
  display: flex;
  flex-direction: column;
  row-gap: 0.4em;
  width: 100%;
}

/* -------------------------------------------------------------------- */
/* 広告パターン */
/* -------------------------------------------------------------------- */
/* コンテンツ上部・下部 */
:root {
  --swd-ad-content-width: 1312px;
  /* 広告パターン上下のmargin */
  --swd-ad-content-margin: 16px;
  /* 広告パターン内の行間のmargin */
  --swd-ad-content-row-margin: 8px;
  /* 広告パターン内の行間のmargin */
  --swd-ad-content-col-margin: 16px;
  /* pagination上下 */
  --swd-pagination-mbratio: 0.75;
  --swd-pagination-mb: 64px;
}

.content-top {
  margin: 0;
  margin-top: var(--swd-ad-content-margin);
}

.content-bottom {
  margin: 0;
  margin-bottom: var(--swd-ad-content-margin);
}

.child-grayish .content-bottom .content-bottom-in,
.child-grayish .content-top .content-top-in {
  padding: 0 0px;
}

.child-grayish .content-bottom .content-bottom-in.wrap,
.child-grayish .content-top .content-top-in.wrap {
  width: var(--swd-ad-content-width);
}

/* パンくずリストがあるページのコンテンツ上部 */
.child-grayish:has(.breadcrumb) .content-top {
  margin: 0;
}

.child-grayish .index-tab-wrap.list-wrap.index-tab-wrap.list-wrap.front-page-type-tab-index {
  margin-bottom: 0;
}

.child-grayish.front-top-page .content-bottom .content-bottom-in .widget-content-bottom:first-child:not(.widget_author_box) {
  padding-top: 0rem;
}

.cstm-adpat.wp-block-group.is-layout-grid {
  display: grid;
  place-content: center;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: var(--swd-ad-content-row-margin);
  -moz-column-gap: var(--swd-ad-content-col-margin);
       column-gap: var(--swd-ad-content-col-margin);
  margin-bottom: 0;
}

.cstm-adpat.wp-block-group.is-layout-grid .wp-block-image {
  margin-bottom: 0;
}

.cstm-adpat.wp-block-group.is-layout-grid .wp-block-image a:hover img {
  opacity: 0.8;
}


/* -------------------------------------------------------------------- */
/* for Front Design */
/* -------------------------------------------------------------------- */
:root {
  --swd-ftd-content-width: min(calc(343/375*100%), 908px);
  --swd-ftd-section-margin: 4rem;
  --swd-ftd-section-head-padding: 2.5rem;
  /* h2 dectxt-size 48px -> 32px*/
  --swd-section-head-dectxt-font-size: clamp(2rem, 0.6441rem + 4.5198vw, 3rem);
  /* h2 size 20px -> 16px */
  --swd-section-head-font-size: clamp(1rem, 0.661rem + 1.1299vw, 1.25rem);
  /* font size 24px -> 20px */
  --swd-ctatxt-font-size: clamp(1.25rem, 0.911rem + 1.1299vw, 1.5rem);
  /* img size */
  /* --swd-cstm-about-img: 535px; */
  --swd-cstm-about-img: 100%;
}

.cstm-section-blk {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  width: var(--swd-ftd-content-width);
  margin-inline: auto;
}

.cstm-section-blk .cstm-section-head {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 0px;
  padding-block: var(--swd-ftd-section-head-padding);
  margin-top: 2rem;
  margin-bottom: 0;
}

.cstm-section-head h2 {
  font-size: var(--swd-section-head-font-size);
  font-weight: 700;
  position: relative;
}

.cstm-section-head h2::before {
  content: "";
  background-color: var(--skin-grayish-site-main-hover);
  width: 2ch;
  height: 2px;
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

.cstm-section-head .cstm-section-head__dectxt {
  color: var(--skin-grayish-site-main-hover);
  font-size: var(--swd-section-head-dectxt-font-size);
  font-family: var(--skin-grayish-style-font);
  font-weight: 400;
  text-align: center;
  letter-spacing: .06em;
  margin-top: 0;
  margin-bottom: 0;

}

.cstm-section-blk .cstm-section-inner {
  width: 100%;
  max-width: unset;
}

.cstm-section-blk.cstm-ftd-about .cstm-section-inner {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  justify-items: center;
  row-gap: 2em;
}


.cstm-about-imggp {
  position: relative;
  display: flex;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
}


.cstm-section-blk .cstm-section-inner .cstm-about-img {
  width: var(--swd-cstm-about-img);
  max-width: unset;
  margin-bottom: 0;
  transform: rotate(-4deg);
  overflow: hidden;
}


.cstm-about-img__before,
.cstm-about-img__after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: var(--swd-cstm-about-img);
  max-width: unset;
  aspect-ratio: 1 / 0.6;
}

.cstm-about-img__before {
  background-color: var(--white_A60);
  z-index: 1;
  transform: rotate(-4deg);
}

.cstm-about-img__after {
  top: 4px;
  background-color: var(--skin-grayish-gradient);
  z-index: -1;
  transform: rotate(4deg);

}

.cstm-section-blk .cstm-section-inner .cstm-about-img img {
  aspect-ratio: 1 / 0.6;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  scale: 1.2;
}

.cstm-section-blk .cstm-section-inner .cstm-about-desc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  row-gap: 2em;
}


.cstm-section-blk .cstm-section-inner .cstm-about-desc .cstm-link-btn {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
}

.cstm-section-blk .cstm-section-inner .cstm-link-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background-color: var(--skin-grayish-site-main-hover);
  width: 204px;
  padding-inline: 1em;
  padding-block: 0.5em;
  text-decoration: none;
  transition: background-color .3s ease-in-out;
}

.cstm-section-blk .cstm-section-inner .cstm-link-btn a:hover {
  background-color: var(--skin-grayish-site-main-thin);
}

.cstm-section-blk.cstm-ftd-about {
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
}

.cstm-section-blk.cstm-ftd-about::before {
  content: "";
  background-color: var(--skin-grayish-site-main-hover);
  width: 100vw;
  height: 1px;
  margin: 0 calc(50% - 50vw);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.cstm-section-blk.cstm-ftd-feature {
  row-gap: 0rem;
  margin-bottom: calc(var(--swd-ftd-section-margin) + 0.5rem);
}

.cstm-ftd-feature .cstm-section-inner.--feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: space-around;
  row-gap: 0.5rem;
}

.cstm-ftd-feature .cstm-ftd-feature__sub {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: 1fr;
  grid-row: span 4;
  justify-items: center;
  row-gap: 1rem;
  padding-bottom: 40px;
  margin-bottom: 0;
  position: relative;
}

.cstm-ftd-feature .cstm-ftd-feature__sub::before {
  --icon-locate: 1.7rem;
  content: "";
  background-color: var(--skin-grayish-gradient);
  width: 100%;
  height: calc(100% - var(--icon-locate));
  position: absolute;
  top: var(--icon-locate);
  left: 0;
  z-index: -1;
}

.cstm-ftd-feature .cstm-ftd-feature__sub .--feature-title,
.cstm-ftd-stdog-cta .--cta-apltxt {
  font-size: var(--swd-section-head-font-size);
  font-weight: 700;
}

.cstm-ftd-feature .cstm-ftd-feature__sub .--feature-desc {
  padding-inline: 2rem;
}

.cstm-ftd-feature .cstm-ftd-feature__sub .cstm-feature-icon {
  display: flex;
  width: 4rem;
  height: 4rem;
  justify-content: center;
  align-items: center;
  color: var(--skin-grayish-site-main-hover);
  font-size: 2rem;
}

.cstm-ftd-feature .cstm-ftd-feature__sub .cstm-link-btn {
  padding-top: 0.5em;
}

/* cta */
.wp-block-group.cstm-ftd-stdog-cta {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  color: var(--white);
  position: relative;
  margin-bottom: 0;
  padding-block: 4rem;
  row-gap: 20px;
}

.wp-block-group.cstm-ftd-stdog-cta .--cta-apltxt-wrap {
  margin-bottom: 0;
}

.cstm-ftd-stdog-cta .--cta-apltxt {
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

.cstm-ftd-stdog-cta .--cta-apltxt::before,
.cstm-ftd-stdog-cta .--cta-apltxt::after {
  content: "";
  background-color: var(--white);
  width: 1px;
  height: 1.3em;
  position: absolute;
  top: 0.1em;
  left: -1.5em;
  rotate: -20deg;
  z-index: 1;
}

.cstm-ftd-stdog-cta .--cta-apltxt::after {
  left: unset;
  right: -1.5em;
  rotate: 20deg;
}


.cstm-ftd-stdog-cta .--cta-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--swd-ctatxt-font-size);
  font-weight: 700;
  border: 1px solid var(--white);
  background-color: var(--skin-grayish-site-main-hover);
  padding-inline: 1em;
  padding-block: 0.5em;
  text-decoration: none;
  transition: background-color .3s ease-in-out;
}

.cstm-ftd-stdog-cta .--cta-btn a:hover {
  background-color: var(--skin-grayish-site-main-thin);

}

.cstm-ftd-stdog-cta::before {
  content: "";
  background-color: var(--skin-grayish-site-main-hover);
  width: 100vw;
  height: 100%;
  margin: 0 calc(50% - 50vw);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

}

/* -------------------------------------------------------------------- */
/* 余白調整 */
/* -------------------------------------------------------------------- */
/* Frontのみ コンテンツ下部に広告があるとき Designとの間 */
.child-grayish.front-top-page .content-bottom .widget:has(.cstm-adpat) {
  margin-bottom: var(--swd-pagination-mb);
}

.child-grayish.front-top-page .content-bottom .widget {
  margin-bottom: 0;
}

.child-grayish:not(.front-top-page) .content-bottom {
  margin-bottom: var(--swd-ad-content-margin);
}

.child-grayish:not(.front-top-page) .content-bottom .widget:has(.cstm-adpat) {
  margin-bottom: 0;
}

.child-grayish .content-top .widget:has(.cstm-adpat) {
  margin-bottom: 0;
}

.child-grayish.front-top-page .content {
  margin-top: 0;
}

.child-grayish.front-top-page .content .main {
  padding-top: 7px;
}

/* 動画公開日新着順 タイトル上 64px px */
.child-grayish .index-tab-buttons {
  margin: 2em 0 0.5em;
}

.child-grayish .index-tab-buttons .index-tab-button {
  margin: 0;
}


.child-grayish .pagination-next-link {
  margin-bottom: 0;
}

.child-grayish .pagination {

  margin: calc(var(--swd-pagination-mb) * var(--swd-pagination-mbratio)) 0 var(--swd-pagination-mb) 0;
}

/* タイトル上　今の半分 */
.child-grayish .main {
  padding-top: 18px;
  padding-bottom: 0;
}

.child-grayish .content {
  margin-top: 12px;
}

/* 固定ページ */
.child-grayish.page .content {
  margin-top: 0px;
}

.child-grayish.page .main {
  padding-top: 0px;
  padding-bottom: 0;
}

.child-grayish.page.page-id-5580 .main-widget-label.widget-title {
  font-size: 16px;
  margin-top: 0;
  padding-top: 0;
}

.child-grayish.page.page-id-5580 .main {
  padding-top: 0px;
  padding-bottom: 0;
}

.child-grayish.page.page-id-5580 .article-header .entry-title {
  margin: 16px 0 0px;
}

/* 固定ページ　動画検索 */
.child-grayish.page.page-id-5576 .search-box {
  margin: 0;
  margin-top: 1em;
  margin-bottom: 1em;
}

.child-grayish.page.page-id-5576 .widget_search {
  margin-bottom: 0;
}

/* 固定ページ 広告ありの場合*/
.child-grayish.page:has(.content-top .cstm-adpat) .breadcrumb.sbp-main-before,
.child-grayish.page:has(.content-top .cstm-adpat) .breadcrumb.pbp-main-before {
  margin-top: 0px;
  padding: .6em 0px;
}


/* アーカイブページ(カテゴリー・タグ・日付) */
.child-grayish .content:has(.archive-title) {
  margin-top: 6px;
}

.child-grayish .content:has(.archive-title) .main {
  padding-top: 9px;
  padding-bottom: 0;
}

.child-grayish .content:has(.archive-title) .main .archive-title {
  margin-top: 8px;
  padding-top: 4px;
}

/* 投稿 */
.child-grayish.single-post .content {
  margin-top: 6px;
}

.child-grayish.single-post .content .main {
  padding-top: 9px;
  padding-bottom: 0;
}

.child-grayish.single-post .content .main .entry-title {
  margin-top: 8px;
}

/* 検索結果ページ */
.child-grayish.search-results .content:has(.archive-title) {
  margin-top: 0px;
}

.child-grayish.search-results .content:has(.archive-title) .main {
  padding-top: 0px;
  padding-bottom: 0;
}

.child-grayish.search-results .content:has(.archive-title) .main .archive-title {
  margin-top: 32px;
  padding-top: 0px;
}

/* タイトル上　今の半分 投稿又は固定ページ、カテゴリ上はパンくずあり　日付とタグはなし*/
/* 間にscriptが入り以下は無効になっている */
.breadcrumb.sbp-main-before+.content, .breadcrumb.pbp-main-before+.content {
  margin-top: 0px;
}

.breadcrumb.sbp-main-before, .breadcrumb.pbp-main-before {
  margin-top: 0px;
}

.child-grayish.page .breadcrumb.sbp-main-before,
.child-grayish.page .breadcrumb.pbp-main-before {
  margin-top: 0px;
  padding-bottom: 0px;
}

/* 投稿又は固定ページ h2の上　半分 */
.article h2 {
  margin-top: 2em;
}

.child-grayish .content .main .entry-content {
  margin-bottom: 1.5em;
}

/* 検索結果なしページ　＆　カテゴリーで件数ゼロの際の余白 */
.child-grayish.search-no-results .content:has(.archive-title) .main,
.child-grayish .content:has(.posts-not-found) .main {
  padding-bottom: 36px;
}

/* お気に入り */
.article .favorites-list,
.article .no-favorites {
  padding-left: 0px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1400px以下*/
@media screen and (max-width: 1400px) {

  .child-grayish.front-top-page .content-bottom .content-bottom-in.wrap,
  .child-grayish.front-top-page .content-top .content-top-in.wrap,
  .child-grayish:not(.front-top-page) .content-bottom .content-bottom-in.wrap,
  .child-grayish:not(.front-top-page) .content-top .content-top-in.wrap {
    width: auto !important;

  }

  .child-grayish .content-bottom .content-bottom-in, .child-grayish .content-top .content-top-in {
    padding: 0 28px;
  }
}

/*1023px以下*/
@media screen and (max-width: 1023px) {

  .child-grayish:not(.front-top-page) .content-bottom .content-bottom-in.wrap,
  .child-grayish:not(.front-top-page) .content-top .content-top-in.wrap {
    width: auto !important;
  }


  .child-grayish .content-bottom .content-bottom-in, .child-grayish .content-top .content-top-in {
    padding: 0 28px;
  }

  /* feature h2 */
  .child-grayish.front-top-page .p-gray-head-mid.p-gray-head-mid--feature {
    padding: 3em 0 0.6em 0;
    margin-bottom: 0;
  }

  .child-grayish.front-top-page .p-gray-head-mid>span {
    flex-direction: column;
    gap: 1.5em;
  }

  .child-grayish.front-top-page .p-gray-descbox.p-gray-descbox--feature {
    padding: 1em 0;
  }


}

/*834px以下*/
@media screen and (max-width: 834px) {
  :root {
    --swd-ftd-section-margin: 2rem;

  }

  /*必要ならばここにコードを書く*/
  .child-grayish .content-bottom .content-bottom-in, .child-grayish .content-top .content-top-in {
    padding: 0 16px;
  }

  /* -------------------------------------------------------------------- */
  /* Front */
  /* -------------------------------------------------------------------- */
  /* 動画公開日新着順 中央 */
  .index-tab-buttons {
    justify-content: center;
  }

  .index-tab-buttons .index-tab-button {
    width: 100%;
  }

  .cstm-adpat.wp-block-group.is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cstm-ftd-feature .cstm-section-inner.--feature-grid {
    grid-template-columns: repeat(1, minmax(0, 420px));
    justify-content: space-around;
    row-gap: .5rem;
  }

  .cstm-about-img__before {
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .cstm-about-img__after {
    top: 4px;
    left: 0;
    right: 0;
    margin: auto;
  }

  .cstm-section-blk .cstm-section-head {
    margin-top: 1rem;
  }

  .cstm-ftd-feature .cstm-ftd-feature__sub .cstm-feature-icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
  }

  .cstm-ftd-feature .cstm-ftd-feature__sub::before {
    --icon-locate: 1.3rem;
  }

  .cstm-section-blk.cstm-ftd-feature {
    margin-bottom: calc(var(--swd-ftd-section-margin) + 1.5rem);
  }


  /* -------------------------------------------------------------------- */
  /* 余白調整 */
  /* -------------------------------------------------------------------- */
  /* Frontのみ コンテンツ下部に広告があるとき Designとの間 */
  /* タイトル上　今の半分 */
  .child-grayish .main {
    padding-top: 16px;
  }

  .child-grayish .content {
    margin-top: 5px;
  }

  /* 検索結果なしページの余白 */
  .search-no-results .main {
    padding-bottom: 32px;
  }

  /* アーカイブページ(カテゴリー・タグ・日付) */
  .child-grayish .content:has(.archive-title) {
    margin-top: 2px;
  }

  .child-grayish .content:has(.archive-title) .main {
    padding-top: 8px;
    padding-bottom: 0;
  }

  /* 投稿 */
  .child-grayish.single-post .content {
    margin-top: 2px;
  }

  .child-grayish.single-post .content .main {
    padding-top: 8px;
    padding-bottom: 0;
  }

  /* カテゴリーで件数ゼロの際の余白 */
  .child-grayish .content:has(.posts-not-found) .main {
    padding-bottom: 36px;
  }


}

/* 600px以下　WordPressのAdminbar(#wpadminbar) */
@media screen and (max-width: 600px) {}

/*480px以下*/
@media screen and (max-width: 480px) {
  :root {
    --swd-ad-content-margin: 3px;
    --swd-pagination-mb: 48px;

  }

  .cstm-adpat.wp-block-group.is-layout-grid {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    margin-bottom: 0;
    row-gap: 1px;
    -moz-column-gap: 1px;
         column-gap: 1px;
  }

  .content-bottom .cstm-adpat.wp-block-group.is-layout-grid {
    margin-bottom: 0;
  }

  .skin-grayish .pagination {
    font-size: 14px;
  }


  .cstm-ftd-feature .cstm-ftd-feature__sub {
    padding-inline: 1em;
  }

  .cstm-ftd-feature .cstm-ftd-feature__sub .--feature-desc {
    padding-inline: 1rem;
  }

  /* -------------------------------------------------------------------- */
  /* 余白調整 */
  /* -------------------------------------------------------------------- */
  /* 動画公開日新着順 タイトル上 64px px */
  .child-grayish .content {
    margin-top: 5px;
  }


}

/*320px以下*/
@media screen and (max-width: 320px) {
  .cstm-section-blk .cstm-section-inner .cstm-link-btn a {
    width: 100%;
  }

}