@charset "UTF-8";

/* ==========================================================
   やるぞう・よむぞう・つくるぞうページ（PC）
   2026.10 せいさく事例スライダー調整版
   ・スライドの切替はSwiperのフェード（yaruzou_page.js）で制御
   ・商材一覧は4列で折り返し（5個目以降は下段）
   ・ドット位置はJSで作品画像の直下に自動配置
   ========================================================== */

/* ---------- ページ全体 ---------- */
.pane-contents-none {
  padding: 0 !important;
}

.content-none {
  width: 100% !important;
}

.pane-main-none {
  width: 100% !important;
}

.block-yaruzou h1 {
  background: none;
  margin: 0 auto;
  width: 100vw;
}

.block-yaruzou h1 img {
  width: 100vw;
  height: auto;
}

.block-yaruzou--container {
  width: 940px;
  margin: 0 auto;
}

.block-yaruzou-h1--text {
  text-align: center;
  line-height: 2;
  margin-bottom: 40px;
}

.block-yaruzou-h1--text h2 {
  font-size: 24px;
  font-weight: bold;
  color: #794C2B;
  border: none;
  margin: 0;
  padding: 0;
}

/* ---------- ハッシュタグの絞り込み ---------- */
.filter-buttons {
  text-align: center;
  margin-bottom: 30px;
}

.filter-btn {
  background: #fff;
  border: 1px solid #ccc;
  padding: 6px 15px;
  margin: 5px;
  cursor: pointer;
  border-radius: 20px;
  font-size: 14px;
}

.filter-btn.active {
  background: #A78948;
  color: #fff;
  border-color: #A78948;
}

/* ---------- 保育図書リスト ---------- */
.magazine-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.magazine-item {
  background: #fff;
  border: 1px solid #EEEEEE;
  width: 305px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.magazine-item-container {
  padding: 20px;
}

.magazine-item:hover {
  transform: translateY(-3px);
}

.magazine-item img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  margin-bottom: 10px;
  background: #eee;
}

.magazine-item h3 {
  font-size: 16px;
  margin: 0 0 5px 0;
  border: none;
}

.magazine-item .tags {
  font-size: 12px;
  color: #794C2B;
  margin: 0;
}

/* 絞り込みで非表示にするためのクラス */
.is-hidden {
  display: none;
}

.magazine-item-btn {
  text-align: center;
  padding: 20px;
}

.detail-btn {
  background: #A78948;
  border: 1px solid #A78948;
  margin: 5px;
  cursor: pointer;
  border-radius: 50px;
  font-size: 16px;
  font-weight: bold;
  width: 230px;
  color: #fff;
  padding: 13px 0;
}

.detail-btn:hover {
  opacity: 0.8;
}

.browsing-btn {
  background: #fff;
  border: 1px solid #A78948;
  margin: 5px;
  cursor: pointer;
  border-radius: 50px;
  font-size: 16px;
  font-weight: bold;
  width: 230px;
  color: #A78948;
  padding: 13px 0;
}

.browsing-btn:hover {
  opacity: 0.8;
}

/* リストのラッパー（閉じている状態） */
.magazine-list-wrapper {
  position: relative;
  max-height: 1730px;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

/* 下部にかけるグラデーション */
.magazine-list-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0));
  pointer-events: none;
  transition: opacity 0.3s;
}

/* 開かれた状態 */
.magazine-list-wrapper.is-open {
  max-height: 5000px;
}

.magazine-list-wrapper.is-open::after {
  opacity: 0;
}

/* もっと見るボタン */
.load-more-btn {
  position: relative;
  display: block;
  width: 210px;
  margin: 0 auto 86px;
  padding: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #A78948;
  background-color: #fff;
  border: 1px solid #A78948;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s;
}

.load-more-btn::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  width: 15px;
  height: 15px;
  margin: auto;
  z-index: 1;
  background: url(../../img/usr/common/icon_plus_15px.png) right center / 15px 15px no-repeat;
}

.load-more-btn:hover {
  background-color: #A78948;
  color: #fff;
}

.load-more-btn.is-hidden {
  display: none;
}

/* ---------- せいさく事例 ---------- */
.block-yaruzou-case {
  margin-bottom: 120px;
}

.block-yaruzou-case-text {
  text-align: center;
  margin-bottom: 80px;
  margin-top: 80px;
}

.block-yaruzou-case h2 {
  font-size: 24px;
  font-weight: bold;
  color: #794C2B;
  border: none;
  margin: 0 0 20px 0;
  padding: 0;
  text-align: center;
}

/* ---------- せいさく事例スライダー ---------- */
/* ※ 既存の pc_project.css より後に読み込まれなくても効くよう、
     先頭に .block-yaruzou を付けて優先度を上げています */

/* 切替はSwiperのフェードで制御するため、透明化・縮小・アニメーションは無効化 */
.block-yaruzou .category-swiper .swiper-slide {
  opacity: 1;
  transform: none;
  transition: none;
}

/* フェード中に下のスライドが透けないよう背景を敷く */
.block-yaruzou .category-swiper>.swiper-wrapper>.swiper-slide {
  background: #fff;
}

/* 保険：フェード以外（旧JSの横スライド）で動いた場合は、表示中以外のスライドを隠す */
.block-yaruzou .category-swiper:not(.swiper-fade)>.swiper-wrapper>.swiper-slide:not(.swiper-slide-active) {
  opacity: 0;
  visibility: hidden;
}

/* フェード切替時、Swiper標準CSS（.swiper-fade .swiper-slide .swiper-slide { pointer-events: none; }）が
   商材一覧の各商品（.swiper-slide）にも効いてリンクが押せなくなるため、表示中の事例だけ押せるように戻す */
.block-yaruzou .category-swiper .swiper-slide-active .thumbs-swiper .swiper-slide {
  pointer-events: auto;
}

/* 事例ごとに高さが変わる（autoHeight）ときの動きをなめらかに */
.block-yaruzou .category-swiper>.swiper-wrapper {
  transition-property: transform, height;
}

/* 商材一覧：スライドさせず4列・左詰めで折り返し（5個目以降は下段） */
.block-yaruzou .thumbs-swiper .swiper-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: calc(8% / 3);  /* 23% × 4 + 余白3つ = 100% */
  row-gap: 40px;
  width: 100%;
  opacity: 1;
  transform: none !important;
}

/* 商品名の行数が違っても「商品を見る」ボタンの高さをそろえる */
.block-yaruzou .thumbs-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 23%;
  height: auto;
  flex-shrink: 0;
  opacity: 1;
}

.block-yaruzou .thumbs-swiper .swiper-slide-link-btn {
  margin-top: auto;
}

/* 矢印ボタンは非表示 */
.block-yaruzou .block-yaruzou-case-swiper .swiper-button-next,
.block-yaruzou .block-yaruzou-case-swiper .swiper-button-prev {
  display: none !important;
}

/* スライダー本体が、はみ出したドットを隠さないようにする */
.block-yaruzou .block-yaruzou-case-swiper {
  overflow: visible !important;
  position: relative;
}

/* ドット：位置（top）はJSで作品画像の直下に自動設定。
   pc_project.css の bottom: 440px !important を打ち消す */
.block-yaruzou .block-yaruzou-case-swiper .swiper-pagination {
  position: absolute;
  bottom: auto !important;
  left: 0;
  width: 100%;
  z-index: 99;
}

.block-yaruzou .block-yaruzou-case-swiper .swiper-pagination-bullet {
  background: #fff;
  border: 1px solid #A78948;
  opacity: 1;
}

.block-yaruzou .block-yaruzou-case-swiper .swiper-pagination-bullet-active {
  background: #A78948;
}

/* 「せいさくには、メルパオのこの素材がぴったり！」 */
.block-yaruzou-case-container .swiper-text {
  font-size: 25px;
  font-weight: bold;
  color: #794C2B;
  margin-bottom: 25px;
  margin-top: 60px;
  text-align: center;
}

/* 商品名 */
.block-yaruzou-case-container .swiper-slide-product {
  font-size: 15px;
  padding: 10px 0;
  min-height: 60px;
}

/* 「購入はこちら」ボタン */
.block-yaruzou-case-container .swiper-slide-link-btn {
  display: inline-block;
  width: 218px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: #A78948;
  border-radius: 50px;
  text-decoration: none;
  transition: background-color 0.3s;
  text-align: center;
}

.block-yaruzou-case-container .swiper-slide-link-btn:hover {
  background-color: #8a6f3a;
}

/* ---------- 保育雑誌 ---------- */
.block-yaruzou-magazine-box {
  display: flex;
}

.block-yaruzou-magazine-left {
  width: 940px;
  margin-right: 60px;
}

.block-yaruzou-magazine-right h2 {
  color: var(--color-brown-dark);
  font-size: 30px;
  font-weight: bold;
  padding: 0 0 15px;
  margin: 0 0 28px;
  background: url(../../img/usr/yaruzou/yaruzou-magazine-h2.png) left bottom / 930px 10px repeat-x;
  border: none;
}

.block-yaruzou-magazine-right h3 {
  padding: 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-brown-dark);
  border: none;
  margin-bottom: 10px;
}

.block-yaruzou-magazine-right p {
  margin-bottom: 50px;
}

.block-yaruzou-magazine-right-box {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.block-yaruzou-magazine-right-box div {
  background-color: #F8F7F5;
  padding: 20px;
  width: 50%;
}

.block-yaruzou-magazine-right-box div:last-child {
  padding: 20px 20px 20px 40px;
}

.block-yaruzou-magazine-right-box div h4 {
  font-weight: bold;
  color: var(--color-brown-dark);
}

.block-yaruzou-magazine-right-box div li {
  list-style: inside;
  list-style-position: outside;
}

.block-yaruzou-magazine-right-text {
  text-align: center;
  margin: 80px auto;
}

.block-yaruzou-magazine-right-text span {
  font-size: 14px;
  color: #828282;
}

/* ---------- 指導計画テンプレートダウンロード（現在HTML側で非表示） ---------- */
.block-yaruzou-download h2 {
  font-size: 25px;
  font-weight: bold;
  border: none;
  text-align: center;
  color: #794C2B;
}

.block-yaruzou-download-text {
  text-align: center;
  margin: 80px 0 20px 0;
}

.block-yaruzou-download-text span {
  font-size: 14px;
  color: #828282;
}

.download-link-btn {
  position: relative;
  display: block;
  width: 300px;
  margin: 0 auto 86px;
  padding: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #A78948;
  background-color: #fff;
  border: 1px solid #A78948;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  text-align: center;
}

.download-link-btn::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  width: 15px;
  height: 15px;
  margin: auto;
  z-index: 1;
  background: url(../../img/usr/common/arrow_beige_15px.png) right center / 15px 15px no-repeat;
}

.download-link-btn:hover {
  background-color: #A78948;
  color: #fff;
}