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

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

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}

/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
  display: none;
}

/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
  display: none;
}

/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
  display: none;
}

/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
  display: none;
}

/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
  display: none;
}

.date-tags {
	display: none;
}
.author-info {
	display: none;
}

.main {
	padding: 0px 29px;
}



/* Full画面幅 */
.full-width {
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	padding-top: 10px; /* 不要なら削除または、任意の数値を設定してください */
	padding-bottom: 10px; /* 不要なら削除または、任意の数値を設定してください */
}

.entry-content {
    margin-top: 0px;

}
.content {
    margin-top: 0px;
}

.article h3.oki-h3-style {
  border: none;
	margin-bottom: 0;
}

.oki-h3-style {
	position: relative;
    padding-top: 1.5em;
    color: #333333;
}

.oki-h3-style::before {
    content: attr(data-number);
	display: inline-block;
	margin-right: 20px;
	color: #498ee0;
	font-size: 30px;
	border-bottom: 1px solid #498ee0;
}





/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1100px以下*/
@media screen and (max-width: 1100px){
  .table-scroll.wp-block-table.alignwide {
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
  }

  .table-scroll.wp-block-table.alignwide table {
    min-width: 1000px; /* 必要に応じて調整 */
  }
}

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

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



.follow-banner-group {
  writing-mode: vertical-rl;
  text-orientation: upright;
  position: fixed;
  top: 50%;
  right: 0; /* 端にぴったり */
  transform: translateY(-50%);
  z-index: 9999;
  background-color: rgba(0, 172, 193, 0.7) !important; /* 強制的に透明に */
  color: #ffffff;
  padding: 10px;
  border-radius: 8px 0 0 8px; /* 左側だけ角丸 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-size: 1.2rem;
  cursor: pointer;
  text-decoration: none; /* 下線を消す */
}

/* 追加：リンクの場合はhover時の下線も防ぐ */
.follow-banner-group a {
  text-decoration: none;
  color: inherit;
}

/* ここから新しいカスタム */

/* ===== top-slide-style をグリッドから横スクロール（スライダー）に強制変更 ===== */

/* 親要素が is-layout-grid になっているケースを確実に上書き */
.top-slide-style.is-layout-grid,
.top-slide-style.wp-block-group.is-layout-grid,
.wp-block-group.top-slide-style.is-layout-grid {
  display: flex !important;         /* 横並び */
  flex-wrap: nowrap !important;     /* 折り返さない */
  overflow-x: auto !important;      /* 横スクロールを許可 */
  -webkit-overflow-scrolling: touch;/* スムーズスクロール（iOS） */
  scroll-snap-type: x mandatory;     /* スナップ（任意） */
  gap: 20px !important;             /* アイテム間の隙間 */
  padding: 16px 12px !important;    /* 上下余白（必要に応じ調整） */
  align-items: flex-start !important;
  /* grid の定義が残る場合に備え */
  grid-template-columns: none !important;
}

/* 親の特定クラスで grid-template-columns 指定がある場合も解除 */
.top-slide-style.wp-container-core-group-is-layout-0e82c502 {
  grid-template-columns: none !important;
}

/* ===== スライドするアイテム（子要素） ===== */
/* マークアップ上の直接の子: .wp-block-group.is-layout-constrained を想定 */
.top-slide-style > .wp-block-group.is-layout-constrained,
.top-slide-style > .wp-block-group.wp-block-group-is-layout-constrained {
  flex: 0 0 320px !important;      /* アイテムの幅（PCの目安） */
  width: 320px !important;
  box-sizing: border-box !important;
  scroll-snap-align: start !important; /* スナップ位置 */
  margin: 0 !important;             /* テーマの余白を打ち消す */
}

/* 最後の要素の右余白を少し確保（任意） */
.top-slide-style > .wp-block-group.is-layout-constrained:last-child {
  margin-right: 12px !important;
}

/* ===== レスポンシブ: モバイルでは横幅を広く（1枚分を見せる） ===== */
@media (max-width: 767px) {
  .top-slide-style > .wp-block-group.is-layout-constrained {
    flex: 0 0 85% !important;   /* モバイルで1枚表示寄せに（調整可） */
    width: 85% !important;
  }
}

/* ===== 埋め込み（iframe / video）をアイテム幅に合わせてレスポンシブ化 ===== */
.top-slide-style iframe,
.top-slide-style .wp-block-embed__wrapper,
.top-slide-style .video-container,
.top-slide-style .video {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* YouTube iframe の縦横比を維持 */
.top-slide-style iframe {
  aspect-ratio: 16/9;
  display: block;
  border: 0;
}

/* ===== スクロールバー非表示（任意） ===== */
.top-slide-style {
  -ms-overflow-style: none; /* IE11 */
  scrollbar-width: none;    /* Firefox */
}
.top-slide-style::-webkit-scrollbar {
  display: none;            /* WebKit */
}

/* ===== 微調整（必要なら） ===== */
/* アイテムの最小幅を確保したい場合 */
.top-slide-style > .wp-block-group.is-layout-constrained {
  min-width: 280px !important;
}

/* 任意：カード風に見せたい場合 */
.top-slide-style > .wp-block-group.is-layout-constrained {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
  padding: 12px !important;
}