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

/**********************************************************
 * 20250529：設定もCSSもとなるとかなり時間がかかるため
 * 極力CSSとJSとfunctions.php制御に変更
 * ▼▼▼ ここからCSSスタート ▼▼▼
**********************************************************/
:root {
  --main-color: #f6efe5;
  --secondary-color: #e9d7bf;
  --accent-color: #f0620f;
  --font-size-24: 24px;
  --font-size-12: 12px;
  --size-16: 16px;
  --white-color: #fff;
  --black-color: #000;
}

/**********************************************************
 *  全体
**********************************************************/
/* CSSが効かない箇所への強制スタイリング */
body p {
  line-height: 1.55 !important;
}

body,
.header-container,
.main,
.sidebar,
.footer {
  margin: 0;
  padding: 0;
  background-color: var(--main-color);
}

/* リンク */
a {
  color: var(--accent-color);
  transition: all 0.3s ease-in-out;
}

a:hover {
  color: var(--black-color);
  transform: translate(8px, 8px);
}

.a-wrap:hover {
  background-color: transparent;
}

/* 例外：小さい文字 */
.small-font-size {
  font-size: var(--font-size-12);
}

/**********************************************************
 *  共通＿ヘッダー
**********************************************************/
.title-logo-box {
  padding: 100px 0;
	text-align: center;
}

/* デフォルトデザインのカスタム */
.navi {
    background-color: var(--black-color);
}

.navi-in a {
	color: var(--white-color);
}

.header-container-in.hlt-top-menu .logo-header img {
	max-height: 40px;
}

.logo-image {
	padding: 100px 0;
}

/* デザインリセット */
.fixed-header {
    box-shadow: none;
}

.navi-in a:hover {
    background-color: transparent !important;
}

/**********************************************************
 *  共通＿見出し
**********************************************************/
/* h2見出し */
.article h2:not(.nkb-carousel-link.small-font-size h2) {
  color: var(--black-color);
  font-size: var(--font-size-24) !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: center;
  background-color: transparent;
  border-radius: 0;
}

.article h2::after {
  content: '';
  display: block;
  background: var(--accent-color);
  border-radius: 4px;
  height: 5px;
  margin: 6px auto 0;
  width: 14px;
  max-width: 100%;
}

/**********************************************************
 * 共通＿SNS
**********************************************************/
/* フォローボタン */
.sns-follow-buttons.sns-buttons .feedly-button,
.sns-follow-buttons.sns-buttons .rss-button,
.index-tab-button,
.fa-tag:before,
.sns-share.ss-high-and-low-cl a .button-caption.button-caption,
.sns-share.ss-high-and-low-lc a .button-caption.button-caption {
  display: none;
}

.ss-top {
  margin-top: 3em;
}

.date-tags {
  margin-bottom: 4em;
}

.profile-follows,
.sns-follow-message {
  display: none;
}

.sns-buttons {
  margin-bottom: 0;
}

.sns-follow-buttons a {
  width: 40px;
  background: var(--cocoon-xx-thin-color);
  border-radius: 100%;
  color: var(--black-color);
}

/* シェアボタン */
.sns-share.ss-top.ss-col-6 a,
.sns-share.ss-bottom.ss-col-6 a,
.sns-share.ss-top.ss-col-5 a,
.sns-share.ss-bottom.ss-col-5 a {
  width: 40px;
  height: 40px;
  background: var(--black-color);
  border-radius: 100%;
  color: var(--white-color);
}

/**********************************************************
 * 共通_フッター
**********************************************************/
#footer {
  padding: 48px 48px 72px;
  color: var(--white-color);
  background: var(--black-color);
}

.footer-bottom-logo {
  display: none;
}

/* フッターのSNSボタン */
.widget-footer-left-title {
		margin-bottom: 1rem;
}

.widget-footer-left-title::before {
    content: '';
    display: inline-block;
    background: var(--accent-color);
    border-radius: 4px;
    height: 5px;
    width: 14px;
margin-right: 20px;
    vertical-align: middle; /* 文字と揃える */
}

.nwa .sns-follow-buttons {
    column-gap: 4%;
}

.nwa .sns-follow-buttons a {
    width: 54px;
    height: 54px;
}

/* トップへ戻る */
.go-to-top-button {
  background-color: var(--main-color);
}

/**********************************************************
 *  フロントページ＿レイアウト
**********************************************************/
.page-id-1037 .article,
.page-id-1037 .ect-vertical-card .entry-card-wrap {
  margin: 0;
  padding: 0;
  background: var(--main-color);
}

.page-id-1037 .is-list-horizontal.large-thumb .widget-entry-card-link,
.page-id-1037 .is-list-horizontal.large-thumb-on .widget-entry-card-link,
.page-id-1037 .widget-entry-cards.card-large-image .a-wrap,
.page-id-1037 .swiper-backface-hidden .swiper-slide,
.page-id-1037 .is-list-horizontal .widget-entry-card-link {
  max-width: 100%;
}

.page-id-1037 .front-contents-box {
  padding: 54px 0;
  border-top: 1px solid var(--secondary-color);
}

/* front-contents-boxのインナー */
.page-id-1037 .front-contents-inner {
  margin-inline: auto;
  width: 1180px;
  max-width: 100%;
}

/**********************************************************
 *  フロントページ＿不要な箇所の共通非表示
**********************************************************/
.page-id-1037 .entry-title,
.page-id-1037 .sns-share,
.page-id-1037 .date-tags,
.page-id-1037 #toc,
.page-id-1037 .sns-follow,
.page-id-1037 .footer-meta {
  display: none;
}

/* SNSフォローボタンのみ表示 */
.page-id-1037 #footer .sns-follow {
  display: block;
}

/**********************************************************
 *  フロントページ＿カルーセル
**********************************************************/
.nkb-carousel-content {
	margin-bottom: 6rem;
}

.nkb-carousel-link {
  display: flex;
  margin: 0 20px;
  width: 640px;
  color: var(--color-black);
  text-decoration: none;
  background: var(--white-color);
  border-radius: var(--size-16);
}

.nkb-carousel-link.small-font-size h2 {
	font-size: 18px;
    margin: 15px 0 0;
  text-align: left;
  background: none;
	line-height: 1.5em;
}

.nkb-carousel-link.small-font-size h2::after {
  display: none;
}

.nkb-carousel-link.small-font-size p {
	margin-top: 10px;
  font-size: var(--font-size-12);
}

.nkb-carousel-meta {
  width: 40%;
  padding: 24px;
}

.nkb-carousel-thumb {
  width: 60%;
}

.nkb-carousel-thumb img {
  margin: 0 !important;
  width: 100%;
  object-fit: cover; /* 画像を比率内に切り抜く */
  aspect-ratio: 1280 / 670;
  overflow: hidden;
  border-radius: 0 var(--size-16) var(--size-16) 0;
}

/* 既存デザインのカスタム */
.slick-arrow {
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
	bottom: -3rem;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: var(--black-color);
}

.slick-prev, .slick-next {
    width: 40px;
    height: 40px;
    background-color: black;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: none;
    cursor: pointer;
}

.slick-prev {
	margin-left: -35px;
}

.slick-next {
	    margin-left: 35px;
}

/* シェブロンの位置調整 */
.slick-prev::before, .slick-next::before {
    content: ""; /* もしくは、"\276E" (左) と "\276F" (右) */
    font-size: 20px;
    color: white;
}

/* デザインのリセット */
.slick-track {
  position: initial;
  display: flex;
  margin: 0 0 20px;
}

.slick-slide {
  float: initial;
}

.slick-initialized .slick-slide {
  display: initial;
}

.nkb-carousel-meta h2,
.nkb-carousel-meta p {
  margin: 0;
  padding: 0;
}

/**********************************************************
 *  フロントページ＿記事一覧レイアウト
**********************************************************/
.page-id-1037 .ex-class1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* デフォルト（PC）は3列 */
  gap: 16px;
}

/* タブレットサイズ（900px以下）は2列 */
@media (max-width: 900px) {
  .page-id-1037 .ex-class1 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホサイズ（600px以下）は1列 */
@media (max-width: 600px) {
  .page-id-1037 .ex-class1 {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* サムネイルの比率 */
.ex-class1 .card-thumb img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1024 / 536;
  overflow: hidden;
}

/* デザインのリセット */
.widget-entry-cards.card-large-image figure img {
	margin: 0;
}

/**********************************************************
 * フロントページ＿プロフィール
**********************************************************/
.author-box {
  display: flex;
  flex-direction: column-reverse; /* 画像を上、吹き出しを下に */
  align-items: center;
  padding: 0 !important;
  border: 0 !important;
}

/* 吹き出しのデザイン */
.author-content {
  position: relative;
  background-color: var(--white-color);
  padding: 25px 30px;
  border-radius: 20px;
  max-width: 54%;
  margin: 0 !important;
}

/* 吹き出しの三角形（下向き） */
.author-content::after {
  content: '';
  position: absolute;
  bottom: -15px; /* ここを修正 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid var(--white-color); /* ここも修正 */
}

/* 画像の調整（上に配置） */
.author-thumb {
  margin: 0 0 1rem !important;
  width: 180px;
  height: auto;
}

.author-name {
  text-align: center;
}

.author-name a {
margin-top: 2rem;
}

@media (max-width: 768px) {
  .author-box {
    align-items: center; /* 中央揃え */
  }

  .author-content {
    max-width: 90%; /* 幅を広めに設定 */
    margin-left: 0;
    text-align: center; /* テキストを中央揃え */
  }

  .author-content::after {
    left: 50%;
    transform: translateX(-50%);
    border-right: 10px solid transparent;
    border-bottom: 10px solid #f0f0f0;
  }

  .author-thumb {
    width: 60px;
    height: 60px;
  }
}

/**********************************************************
 * フロントページ＿カテゴリー・キーワード検索
**********************************************************/
.cat-search .wp-block-button__link {
  color: var(--black-color);
  background: var(--white-color);
}

.tag-search .wp-block-button__link {
  color: var(--black-color);
  background: var(--secondary-color);
}

/**********************************************************
 *  投稿＿一覧ページネーション
**********************************************************/
.pagination-next {
  display: none;
}

.pagination {
  margin: 24px 0 120px;
}

.page-numbers {
  color: var(--white-color);
  border: 1px solid var(--black-color);
  border-radius: var(--cocoon-basic-border-radius);
  background: var(--black-color);
}

.pagination .current {
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.page-numbers.dots {
  opacity: 1;
  color: var(--black-color);
  background-color: transparent;
  border: 0;
}

.pagination a:hover {
  transform: translate(0, 0);
}

/**********************************************************
 *  投稿＿個別ページ
**********************************************************/
.format-standard {
  margin-inline: auto;
  max-width: 1024px;
}

.article h3 {
  border: 0;
  border-left: 7px solid var(--black-color);
  font-size: 32px;
  margin-top: 3em;
  padding: 12px 20px;
}

.entry-title,
.archive-title {
  margin: 1em 0 1.3em;
}

.entry-content.cf p:not(.small-font-size p),
.entry-content > *,
.demo .entry-content p {
  font-size: 18px !important;
  line-height: 1.9 !important;
}

.entry-content.cf img {
  margin: 2em 0;
}

/**********************************************************
 *  投稿＿ボタンデザイン
**********************************************************/
body .wp-block-button__link {
  font-size: 16px !important;
}

.wp-block-button__link {
  color: var(--white-color);
  background: var(--black-color);
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
  display: inline-block;
  padding: 12px 48px;
  text-align: center;
  text-decoration: none;
}

.wp-block-button__link:hover {
	color: #666;
}

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

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

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

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

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

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