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

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

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

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

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


/************************************
** ▼ガンプラ共通グリッドスタイル（検索＋トップページ）▼
************************************/

/* グリッドレイアウト（PC5列・スマホ2列→1列） */
.gunpla-grid,
.gunpla-grid-home {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

@media (max-width: 768px) {
  .gunpla-grid,
  .gunpla-grid-home {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .gunpla-grid,
  .gunpla-grid-home {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 360px) {
  .gunpla-grid,
  .gunpla-grid-home {
    grid-template-columns: 1fr;
  }
}

/* 各アイテムのボックス全体 */
.gunpla-item {
  border: px solid #ccc;
  padding: px;
  background: #fff;
  text-align: center;
}

/* 再販日ラベル */
.resale-area {
  margin-bottom: 10px;
}

.resale-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.resale-label {
  width: 25%;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}

.resale-date {
  display: inline-block;
  padding: 2px 8px;
  background-color: #e0f0ff;
  border-radius: 4px;
  font-size: 10px;
  text-align: right;
}

/* アイキャッチ */
.gunpla-thumb {
  margin-bottom: 10px;
}

.gunpla-thumb img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* タイトル */
.gunpla-grid h2.gunpla-title,
.gunpla-grid-home h2.gunpla-title {
  all: unset !important;
  font-size: 12px !important;
  margin-bottom: 15px !important;
  height: 60px !important;
  overflow: hidden !important;
  line-height: 20px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  text-align: left !important;
  padding: 10px !important;
  background-color: var(--cocoon-xx-thin-color) !important;
  border-radius: var(--cocoon-badge-border-radius) !important;
}




/* ECバナー全体のスタイル */
.shop-links {
  border: 2px solid #000;
  padding: 10px;
  margin-bottom: 8px;
  background-color: #f5f5f5;
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto;
}

/* ECサイトで在庫を確認の文字 */
.shop-links .ec-banner-header span {
  font-size: 12px !important;
  font-weight: bold !important;
  text-align: center !important;
  display: block !important;
}

/* ECリンクバナー画像（共通） */
.gunpla-grid .shop-links img,
.gunpla-grid-home .shop-links img {
  height: 40px !important;
  width: auto !important;
  max-height: 40px !important;
  max-width: 100% !important;
  object-fit: contain;
  display: inline-block;

  /* 👇 ここから追加 */
  border-radius: 6px;     /* 角を少し丸める（数値はお好みで） */
  margin: 4px 6px;        /* 上下4px・左右6pxの余白を追加 */
}

/************************************
** ▲ガンプラ共通グリッドスタイルここまで▲
************************************/







// 
// 
// 詳細ページカラーガイドテーブルデザイン
// 
// 
/************************************
** ▼詳細ページカラーガイド表デザイン▼
************************************/

table.color-guide {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 14px;
}

.color-guide th,
.color-guide td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.color-guide thead th {
  background: #3a3a3a; !important;
  font-weight: bold;
  color: #ffffff;
}

.color-guide tbody tr:nth-child(odd) {
  background-color: #f0f0f0;
}
.color-guide tbody tr:nth-child(even) td {
  background-color: #fff
}

/************************************
** ▲詳細ページカラーガイド表デザイン▲
************************************/









/************************************
** ▼詳細ページギャラリーデザイン▼
************************************/
/* ギャラリー全体ラッパー */
.custom-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 各画像の枠 */
.gallery-item {
  flex: 0 0 calc(20% - 10px); /* PC時：5列 */
  box-sizing: border-box;
}

/* 最初の画像だけ特別に横幅100% */
.gallery-item.featured {
  flex: 0 0 100%;
}

/* 画像調整 */
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* スマホ時：3列 */
@media (max-width: 768px) {
  .gallery-item {
    flex: 0 0 calc(33.333% - 10px);
  }
  .gallery-item.featured {
    flex: 0 0 100%;
  }
}

/************************************
** ▲詳細ページギャラリーデザイン▲
************************************/


/************************************
** ▼ポチップリンクデザイン▼
************************************/
<style>
.paint-link-list {
  list-style: none;
  padding: 0;
}
.paint-link-list li {
  margin-bottom: 1em;
}
.paint-link-list li.checked .linker-area {
  display: none;
}
</style>

/************************************
** ▲ポチップリンクデザイン▲
************************************/



/************************************
** ▼詳細ページ用スライダー▼
************************************/
.related-gunpla-slider {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.related-gunpla-grid {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: max-content;
}

.related-gunpla-item {
  flex: 0 0 auto;
  width: 160px;
  text-align: left;
}

.related-thumb img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.related-title {
  font-size: 12px;
  margin-top: 6px;
}

/************************************
** ▲詳細ページ用スライダー▲
************************************/

/************************************
** ▼詳細Pスライダー用表示style▼
************************************/
.related-gunpla-box {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0;
  margin: 20px 0;
}

.related-gunpla-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  min-width: 100%;
}

.related-gunpla-item {
  flex: 0 0 auto;
  width: 160px;
  background: #f9f9f9;
  border-radius: 6px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.related-gunpla-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.related-title {
  font-size: 0.8rem;
  padding: 6px;
  color: #333;
  text-align: left;
}
/************************************
** ▲詳細Pスライダー用表示style▲
************************************/


/************************************
** ▼詳細P固定表style▼
************************************/
////ボックス
.gunpla-info-box {
  background-color: #f8fbf8;
  border: 1px solid #ddd;
  padding: 1em;
  margin: 1.5em 0;
  border-radius: 6px;
}

.gunpla-info-list {
  display: flex;
  flex-direction: column;
}

.gunpla-info-list .info-row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ddd;
}

.gunpla-info-list .info-row dt {
  width: 25%;
  font-weight: bold;
  background-color: #f0f0f0; 
  padding: 0.5em 0.75em;
  margin: 0;
  line-height: 1.7;
}

.gunpla-info-list .info-row dd {
  width: 75%;
  margin: 0;
  padding: 0.5em 0.75em;
  line-height: 1.7;
}




/************************************
** ▲詳細P固定表style▲
************************************/













/************************************
** ▼ガンプラ詳細ページ目次▼
************************************/

.gunpla-toc {
  background: #ffffff;
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
}

.gunpla-toc .toc-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #454545;
  font-size: 15px;
}

.gunpla-toc .toc-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.gunpla-toc .toc-list li {
  margin-bottom: 8px;
}

.gunpla-toc .toc-list a {
  text-decoration: none;
  color: #0066cc;
  display: inline-block;
  padding-left: 1em;
  position: relative;
  transition: color 0.2s;
}

.gunpla-toc .toc-list a::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: #999;
}

.gunpla-toc .toc-list a:hover {
  color: #003366;
}
.toc-toggle {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

.ec-banner img {
  border-radius: 8px;        /* ⬅️ 角を丸く（8px、お好みで調整可） */
  width: 80%;               /* ⬅️ 枠内で100%表示 */
  max-width: 300px;          /* ⬅️ 最大幅300px（バナーの基準サイズ） */
  height: auto;              /* ⬅️ 比率維持 */
  margin: 12px auto;
  display: block;
}

/************************************
** ▲ガンプラ詳細ページ目次▲
************************************/





/************************************
** ▼ガンプラ詳細ページECリンク▼
************************************/

.ec-box {
  border: 2px solid #ccc;
  border-radius: 6px;
  margin-bottom: 24px;
  position: relative;
  padding: 16px 16px 12px;
  background-color: #f9f9f9;
}

.ec-box-title {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #f9f9f9;
  padding: 0 8px;
  font-weight: bold;
  font-size: 18px;
  color: #333;
  white-space: nowrap;  /* ← 折り返し防止！ */
}


.ec-box-content {
  margin-top: 8px;
}



/************************************
** ▼ガンプラ詳細ページECリンク▼
************************************/

/* 投稿ページ（single）用のタイトル装飾 */
.single .entry-title {
  background: #505050 !important;
  color: #fff !important;
  padding: 2rem 2rem;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: left;
  box-sizing: border-box;
  margin-bottom: 1em;
}



/************************************
** ▼カラーDB検証エリアイメージ▼
************************************/
.colordb-image-item {
  text-align: center;
  margin-bottom: 20px;
}