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

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

.body {
  letter-spacing: 0.12rem;
}

/* トップページ */
/* メインビジュアル */

.skin-grayish.front-top-page .container .header-container .header {
  height: 70svh;
  min-height: 320px;
  background-position: 50% 30%;
}


.top-title {
  text-align: center;
}

.top-title--logo {
  font-size: 36px;
  font-style: italic;
  line-height: 1em;
}


.btn-top-tlp-link a {
    padding: 14px 20px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-top-tlp-link .btn {
  background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
  color: #666;
  font-weight: 400;
}


.top-video .video-container,
.top-video .video-container .video {
  margin-top: 0;
}

/* ウィジェットカード */
.widget-entry-cards.card-large-image {
  display: flex;
  flex-wrap: wrap;
}

.new-entry-cards.large-thumb a {
  width: 33.333%;
}

/* 記事・固定ページ */
.txt-smaller-gray, .txt-smaller-gray a {
  color: var(--LtGray_S30);
  font-size: .8em;
}

.skin-grayish :is(.toc-list li, .toc-list li a, .toc-title) {
  color: var(--skin-grayish-cat-back);
}

.skin-grayish .tnt-number .toc-list>li {
  padding: .1em 0 .2em 2em;
}



/* YouTube */
.video-container {
  margin-left: auto;
  margin-right: auto;
}

.body .video-container {
  margin-bottom: 0;
}

.wp-block-embed.wp-block-embed-youtube>.wp-element-caption {
  max-width: 640px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* YouTubeサムネイル画像＞クリックで読み込み再生 */
.yt-sec {
  margin: 12px 0 6px;
  font-weight: 600;
  line-height: 1.5;
}
.yt-lite {
  position: relative;
  max-width: 70%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer
}
.yt-lite img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.8)
}

.yt-lite .yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 1.4em 1.8em 1.4em 2em;
  background-color: rgba(255, 255, 255, .8);
  border: 0;
  border-radius: 999px;
  font-weight: 600
}

.yt-lite[data-loading="1"] .yt-play {
  display: none
}


/* twitter */
.twitter-tweet {
  margin-left: auto;
  margin-right: auto;
}

/* FAQ */
.faq-question-label {
    color: var(--Blk_Red_T0);
}
.faq-item-label {
    font-size: 16px;
}


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






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

  .skin-grayish.front-top-page .container .header-container .header {
    height: 60svh;
    background-size: 120%;
  }

  /* ブログカード */
  /* .skin-grayish .wp-block-cocoon-blocks-blogcard .blogcard-snippet { 
    display:none !important; 
  }
  .skin-grayish .wp-block-cocoon-blocks-blogcard .blogcard-footer  { 
    display:none !important; 
  } */

}

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

  .body,
  .menu-content {
    font-size: 15px;
  }

  .skin-grayish.front-top-page .container .header-container .header {
    background-size: 150%;
  }

  .top-title--logo {
    font-size: 24px;
  }

  .widget-entry-cards.card-large-image {
    flex-wrap: wrap;
    justify-content: center;
  }

  .new-entry-cards.large-thumb a {
    width: 90%;
  }

  .yt-lite {
    max-width: 95%;
  }

}