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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* =========================================================
   Cocoon EC向け 整理済み完成版CSS
   - 商品一覧をカード化
   - ブログ感を弱める
   - サイドバーを下部へ移動
   - スマホ2列対応
   - ボタン・見出しをEC向けに調整
   - タイトルは自然折り返し
   - スマホの画像欠け対策
   ========================================================= */

/* -------------------------
   0. 基本調整
------------------------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  line-height:1.6;
  overflow-x:hidden;
}

img{
  max-width:100%;
  height:auto;
  border:0;
}

a{
  text-decoration:none;
}

a:hover,
a:focus{
  text-decoration:none;
}

/* -------------------------
   1. レイアウト全体
------------------------- */
.content,
.main{
  width:100%;
}

.container,
.content-in,
.main,
.wrap,
.main-scroll{
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
}

.content{
  float:none;
  margin:0 auto;
  width:100%;
}

.main{
  width:100%;
  float:none;
  order:1;
}

/* サイドバーはコンテンツ下部へ */
.content-in{
  display:flex;
  flex-direction:column;
}

.sidebar{
  order:2;
  width:100%;
  float:none;
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:20px;
}

/* 記事余白 */
.article,
.entry-content,
.post,
.page{
  word-break:break-word;
}

/* -------------------------
   2. ブログ感を弱める
------------------------- */
.entry-title,
.archive-title,
.page-title{
  border:none !important;
  background:none !important;
  box-shadow:none !important;
  padding:0 0 12px !important;
  margin:0 0 18px !important;
  font-weight:700;
  line-height:1.4;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:1.4em 0 0.7em !important;
  line-height:1.5;
}

.entry-content h2,
.article h2{
  font-size:1.6em;
  font-weight:700;
}

.entry-content h3,
.article h3{
  font-size:1.3em;
  font-weight:700;
}

.article h2::before,
.article h2::after,
.article h3::before,
.article h3::after,
.entry-content h2::before,
.entry-content h2::after,
.entry-content h3::before,
.entry-content h3::after{
  display:none !important;
  content:none !important;
}

/* -------------------------
   3. 商品一覧・記事一覧をカード化
------------------------- */
.list-wrap,
.entry-card-wrap,
.related-entry-card-wrap,
.new-entry-card-wrap,
.popular-entry-card-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
  align-items:stretch;
}

/* 幅計算の安定化 */
.entry-card-wrap,
.related-entry-card-wrap,
.new-entry-card-wrap,
.popular-entry-card-wrap,
.list-wrap,
.a-wrap,
.entry-card-e,
.entry-card-content,
.related-entry-card-content,
.new-entry-card-content,
.popular-entry-card-content,
.entry-card-title,
.related-entry-card-title,
.new-entry-card-title,
.popular-entry-card-title,
.entry-card-snippet,
.related-entry-card-snippet,
.new-entry-card-snippet,
.popular-entry-card-snippet{
  min-width:0;
  box-sizing:border-box;
}

/* カード本体 */
.a-wrap,
.entry-card-e,
.related-entry-card-wrap .a-wrap,
.new-entry-card-wrap .a-wrap,
.popular-entry-card-wrap .a-wrap{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:100%;
  width:100%;
  max-width:100%;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration:none !important;
  color:inherit;
}

.a-wrap:hover,
.entry-card-e:hover,
.related-entry-card-wrap .a-wrap:hover,
.new-entry-card-wrap .a-wrap:hover,
.popular-entry-card-wrap .a-wrap:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,0.10);
  border-color:#d8dbe2;
}

/* サムネイル領域 */
.entry-card-thumb,
.related-entry-card-thumb,
.widget-entry-card-thumb,
.blogcard-thumbnail,
.card-thumb{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  background:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  border-bottom:1px solid #f1f1f1;
}

/* 画像 */
.entry-card-thumb img,
.related-entry-card-thumb img,
.widget-entry-card-thumb img,
.blogcard-thumbnail img,
.card-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  transition:transform .25s ease;
  display:block;
}

.a-wrap:hover .entry-card-thumb img,
.a-wrap:hover .related-entry-card-thumb img,
.a-wrap:hover .widget-entry-card-thumb img,
.a-wrap:hover .blogcard-thumbnail img{
  transform:scale(1.04);
}

/* 本文 */
.entry-card-content,
.related-entry-card-content,
.new-entry-card-content,
.popular-entry-card-content{
  display:flex;
  flex-direction:column;
  flex:1;
  width:100%;
  max-width:100%;
  padding:14px;
  overflow:hidden;
}

/* カテゴリラベル */
.cat-label,
.entry-card .cat-label,
.archive .cat-label{
  display:inline-block;
  align-self:flex-start;
  max-width:100%;
  font-size:11px;
  line-height:1.3;
  font-weight:700;
  color:#444;
  background:#f3f4f6;
  border-radius:999px;
  padding:5px 9px;
  margin:0 0 10px;
}

/* タイトル：自然折り返し */
.entry-card-title,
.related-entry-card-title,
.new-entry-card-title,
.popular-entry-card-title{
  display:block;
  width:100%;
  max-width:100%;
  min-height:0;
  height:auto;
  font-size:15px;
  line-height:1.5;
  font-weight:700;
  color:#222;
  margin:0 0 8px;
  padding-right:0;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  overflow:visible;
}

/* 抜粋 */
.entry-card-snippet,
.related-entry-card-snippet,
.new-entry-card-snippet,
.popular-entry-card-snippet{
  font-size:13px;
  line-height:1.7;
  color:#666;
  margin:0 0 12px;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* メタ */
.entry-card-meta,
.related-entry-card-meta,
.new-entry-card-meta,
.popular-entry-card-meta,
.post-date,
.post-author{
  margin-top:auto;
  font-size:12px;
  line-height:1.5;
  color:#888;
}

/* -------------------------
   4. ボタンをEC向けに強化
------------------------- */
input[type="submit"],
input[type="button"],
button,
.btn,
.button,
.wp-block-button__link,
a.wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border:1px solid #f0c14b;
  border-radius:999px;
  background:#ffd814;
  color:#111 !important;
  font-weight:700;
  line-height:1.4;
  text-align:center;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.btn:hover,
.button:hover,
.wp-block-button__link:hover,
a.wp-block-button__link:hover{
  opacity:0.95;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,0.10);
  text-decoration:none;
}

.btn-secondary,
.button-secondary{
  background:#f7f7f7;
  border-color:#d5d9d9;
  color:#222 !important;
}

/* -------------------------
   5. 検索結果・カテゴリページ
------------------------- */
.archive .a-wrap,
.search .a-wrap{
  height:100%;
}

.archive .entry-card-wrap,
.search .entry-card-wrap,
.archive .list-wrap,
.search .list-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
}

.breadcrumb{
  font-size:12px;
  color:#666;
  margin-bottom:14px;
}

.breadcrumb a{
  color:#555;
}

/* -------------------------
   6. 商品詳細ページ風の調整
------------------------- */
.eye-catch,
.entry-content .wp-post-image,
.singular .entry-content img{
  border-radius:8px;
}

.singular .entry-content{
  font-size:15px;
  line-height:1.9;
  color:#222;
}

.entry-content table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  margin:1em 0 1.4em;
}

.entry-content th,
.entry-content td{
  border:1px solid #e5e7eb;
  padding:10px 12px;
  vertical-align:top;
  word-break:break-word;
}

.entry-content th{
  width:28%;
  background:#f9fafb;
  font-weight:700;
}

/* -------------------------
   7. ウィジェット
------------------------- */
.widget{
  border:1px solid #e5e5e5;
  padding:16px;
  border-radius:8px;
  background:#fff;
  box-shadow:none;
}

.widget-title{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin-bottom:10px;
  font-size:16px;
  font-weight:700;
}

/* -------------------------
   8. フォーム
------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea{
  width:100%;
  max-width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:8px;
  background:#fff;
  font-size:16px;
  line-height:1.5;
}

textarea{
  min-height:120px;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:#999;
  box-shadow:0 0 0 3px rgba(0,0,0,0.06);
}

/* -------------------------
   9. ページネーション
------------------------- */
.pagination,
.pager-links{
  margin:28px 0;
  text-align:center;
}

.page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  min-height:40px;
  margin:0 4px;
  padding:0 10px;
  border:1px solid #ddd;
  border-radius:999px;
  background:#fff;
  color:#333;
}

.page-numbers.current{
  background:#222;
  color:#fff;
  border-color:#222;
}

/* -------------------------
   10. タブレット以下
------------------------- */
@media screen and (max-width: 1023px){
  .container,
  .content-in,
  .main,
  .wrap,
  .main-scroll{
    max-width:100%;
    padding-left:14px;
    padding-right:14px;
  }
}

/* -------------------------
   11. スマホ最適化
------------------------- */
@media screen and (max-width: 834px){
  html,
  body{
    overflow-x:hidden;
  }

  body{
    font-size:14px;
  }

  .container,
  .content-in,
  .main,
  .wrap,
  .main-scroll,
  .content{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-left:10px;
    padding-right:10px;
    box-sizing:border-box;
  }

  .entry-title,
  .archive-title,
  .page-title{
    font-size:24px;
    margin-bottom:14px !important;
  }

  .entry-card-wrap,
  .related-entry-card-wrap,
  .new-entry-card-wrap,
  .popular-entry-card-wrap,
  .list-wrap{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    width:100%;
    max-width:100%;
  }

  .entry-card-thumb,
  .related-entry-card-thumb,
  .widget-entry-card-thumb,
  .blogcard-thumbnail,
  .card-thumb{
    padding:4px;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:#fff;
  }

  .entry-card-thumb img,
  .related-entry-card-thumb img,
  .widget-entry-card-thumb img,
  .blogcard-thumbnail img,
  .card-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    display:block;
  }

  .entry-card-content,
  .related-entry-card-content,
  .new-entry-card-content,
  .popular-entry-card-content{
    padding:8px;
  }

  /* タイトル：自然折り返し */
  .entry-card-title,
  .related-entry-card-title,
  .new-entry-card-title,
  .popular-entry-card-title{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    height:auto !important;
    font-size:12px !important;
    line-height:1.5 !important;
    margin:0 0 6px !important;
    padding-right:0 !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    overflow:visible !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:unset !important;
  }

  .entry-card-snippet,
  .related-entry-card-snippet,
  .new-entry-card-snippet,
  .popular-entry-card-snippet{
    font-size:11px;
    line-height:1.5;
    margin-bottom:8px;
    word-break:break-word;
    overflow-wrap:anywhere;
  }

  .entry-content img,
  .entry-content a img{
    display:block;
    max-width:100%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
  }

  .entry-content table{
    width:100%;
    max-width:100%;
    table-layout:fixed;
  }

  .entry-content th,
  .entry-content td{
    display:block;
    width:100%;
  }

  .entry-content th{
    border-bottom:none;
  }

  .sidebar{
    display:block;
  }

  .widget{
    margin-bottom:16px;
  }
}

/* -------------------------
   12. 極小端末対策
------------------------- */
@media screen and (max-width: 480px){
  .entry-card-wrap,
  .related-entry-card-wrap,
  .new-entry-card-wrap,
  .popular-entry-card-wrap,
  .list-wrap{
    grid-template-columns:1fr;
  }

  .entry-card-title,
  .related-entry-card-title,
  .new-entry-card-title,
  .popular-entry-card-title{
    font-size:13px !important;
    line-height:1.55 !important;
  }

  .entry-card-snippet,
  .related-entry-card-snippet,
  .new-entry-card-snippet,
  .popular-entry-card-snippet{
    font-size:12px;
  }

  .page-numbers{
    min-width:36px;
    min-height:36px;
    margin:0 2px;
  }

  input[type="submit"],
  input[type="button"],
  button,
  .btn,
  .button,
  .wp-block-button__link,
  a.wp-block-button__link{
    width:100%;
  }

  .content,
  .content-in,
  .main,
  .container,
  .wrap,
  .main-scroll,
  .article,
  .entry-content{
    padding-left:6px;
    padding-right:6px;
  }
}

/* =========================================
   入荷・更新カテゴリ本文のタイトル文字切れ対策
   ========================================= */
@media screen and (max-width: 834px){
  .entry-content a{
    display:inline-block !important;
    max-width:100% !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    line-height:1.5 !important;
    vertical-align:top !important;
  }

  .entry-content{
    overflow:visible !important;
  }

  .entry-content p,
  .entry-content div,
  .entry-content li,
  .entry-content span{
    overflow:visible !important;
  }

  .entry-content a img{
    margin-bottom:6px !important;
  }
}

@media screen and (max-width: 480px){
  .entry-content a{
    font-size:12px !important;
    line-height:1.55 !important;
  }
}