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

/* =========================================================
   Responsive placeholders（必要ならここに追記）
========================================================= */
@media screen and (max-width: 1023px){}
@media screen and (max-width: 834px){}
@media screen and (max-width: 480px){}

/* =========================================================
   TOP：コンテナ・ヒーロー・5カード・6通りの注文方法
   ※既存仕様を維持
========================================================= */

/* コンテナ（共通で使う意図があるならこのままでOK） */
.kk-wrap{
  max-width:1100px;
  margin:auto;
  padding:24px;
}

/* ヒーロー */
.kk-hero{
  background:#fafafa;
  border-bottom:1px solid #eee;
}
.kk-hero h1{
  font-size:clamp(22px,4.2vw,36px);
  line-height:1.3;
  margin:0 0 8px;
  font-weight:700;
}
.kk-hero .kk-sub{
  font-weight:700;
  margin:0 0 12px;
}
.kk-hero .kk-lead{
  margin:0 0 16px;
  line-height:1.8;
}
.kk-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.kk-btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background:#111;
  color:#fff;
  text-decoration:none;
}
.kk-btn.ghost{
  background:#fff;
  color:#111;
  border:1px solid #111;
}

/* 5カード導線 */
.kk-why h2{
  font-size:clamp(18px,3.2vw,24px);
  margin:0 0 12px;
}
.kk-cards5{
  display:grid;
  grid-template-columns:repeat(1,1fr);
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}
.kk-cards5 a{
  display:block;
  padding:14px 16px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
  text-decoration:none;
}
.kk-cards5 strong{
  display:block;
  font-weight:700;
  margin:0 0 4px;
}
.kk-cards5 span{
  color:#555;
}
@media (min-width:720px){
  .kk-cards5{ grid-template-columns:repeat(5,1fr); }
}

/* 6通りの注文方法（基本） */
.kk-order-title{
  font-size:clamp(18px,3.2vw,24px);
  margin:0 0 12px;
}
.kk-order-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .kk-order-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:980px){
  .kk-order-grid{ grid-template-columns:repeat(3,1fr); }
}
.kk-order-card a{
  display:block;
  border:1px solid #eee;
  border-radius:14px;
  background:#fff;
  text-decoration:none;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kk-order-card a:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  border-color:#ddd;
}
.kk-order-fig{ margin:0; }
.kk-order-fig img{
  display:block;
  width:100%;
  height:auto;
}
.kk-order-text{ padding:12px 14px; }
.kk-order-text strong{
  display:block;
  font-weight:700;
  margin:0 0 4px;
  color:#111;
}
.kk-order-text span{
  color:#555;
  font-size:0.95em;
}

/* =========================================================
   トップページ側メニュー（tside）
========================================================= */
.tside nav > ul > li > ul a{
  display:inline-block;
  padding:4px 0;
  text-decoration:none;
}
.tside nav > ul > li > ul a:hover{
  text-decoration:underline;
}

/* =========================================================
   side-order（旧サイドメニュー）
   - トップページには当てない
   - それ以外の全ページのサイドバー（#sidebar）だけに当てる
   - 影響範囲は .side-order 内に閉じる
========================================================= */

/* コンテナ */
body:not(.home):not(.front-page) #sidebar .side-order{
  width:200px;
  margin:0 auto 20px;
  text-align:center;
  box-sizing:border-box;
}
body:not(.home):not(.front-page) #sidebar .side-order,
body:not(.home):not(.front-page) #sidebar .side-order *{
  box-sizing:border-box;
  font-family:inherit;
}
body:not(.home):not(.front-page) #sidebar .side-order a{
  color:#333;
  text-decoration:none;
}
body:not(.home):not(.front-page) #sidebar .side-order aside{ margin:0; }

/* パネル共通（accrd01〜05） */
body:not(.home):not(.front-page) #sidebar .side-order ul li ul{
  padding:.5em;
  border-width:3px;
  border-style:solid;
  background:#fff;
  display:none; /* 初期状態はJSで開くまで非表示 */
}

/* パネル枠色 */
body:not(.home):not(.front-page) #sidebar .side-order .accrd01{border-color:#f0b265;}
body:not(.home):not(.front-page) #sidebar .side-order .accrd02{border-color:#f49bbb;}
body:not(.home):not(.front-page) #sidebar .side-order .accrd03{border-color:#a5c98c;}
body:not(.home):not(.front-page) #sidebar .side-order .accrd04{border-color:#60afd6;}
body:not(.home):not(.front-page) #sidebar .side-order .accrd05{border-color:#9ca9c9;}

/* タブの帯色（下地） */
body:not(.home):not(.front-page) #sidebar .side-order ul li:nth-of-type(1) p{background:#f0b265;}
body:not(.home):not(.front-page) #sidebar .side-order ul li:nth-of-type(2) p{background:#f49bbb;}
body:not(.home):not(.front-page) #sidebar .side-order ul li:nth-of-type(3) p{background:#a5c98c;}
body:not(.home):not(.front-page) #sidebar .side-order ul li:nth-of-type(4) p{background:#60afd6;}
body:not(.home):not(.front-page) #sidebar .side-order ul li:nth-of-type(5) p{background:#9ca9c9;}

/* タブ（accord/accord2） */
body:not(.home):not(.front-page) #sidebar .side-order a.accord,
body:not(.home):not(.front-page) #sidebar .side-order a.accord2{
  display:block;
  width:100%;
  padding:0 !important;
  height:63px;
  line-height:63px;
  text-align:center;
  cursor:pointer;

  color:#fff !important;
  text-decoration:none;

  background:linear-gradient(to right, rgba(255,255,255,.7) 0%, rgba(255,255,255,.5) 25%, rgba(255,255,255,0) 100%);
}
body:not(.home):not(.front-page) #sidebar .side-order a.accord{  font-size:1.05em !important; }
body:not(.home):not(.front-page) #sidebar .side-order a.accord2{ font-size:0.90em !important; }

body:not(.home):not(.front-page) #sidebar .side-order a.accord:hover,
body:not(.home):not(.front-page) #sidebar .side-order a.accord2:hover{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:0.18em;
  text-shadow:1px 1px 1px rgba(0,0,0,.4);
}

/* 開いているタブを少し強調 */
body:not(.home):not(.front-page) #sidebar .side-order li.is-open > p a.accord,
body:not(.home):not(.front-page) #sidebar .side-order li.is-open > p a.accord2{
  text-shadow:1px 1px 2px rgba(0,0,0,.35);
}

/* Cocoon 側の「押し込み」演出を無効化 */
body:not(.home):not(.front-page) #sidebar .side-order ul[class^="accrd"] li a,
body:not(.home):not(.front-page) #sidebar .side-order .banner li a{
  position:static !important;
  top:auto !important;
}

/* サイドバーのバナー群 */
body:not(.home):not(.front-page) #sidebar .side-order ul.banner{
  margin:.5em auto;
  padding:0;
  list-style:none;
}
body:not(.home):not(.front-page) #sidebar .side-order ul.banner li{
  margin:2px auto;
  padding:0;
  line-height:0;
}
body:not(.home):not(.front-page) #sidebar .side-order ul.banner li a{ display:block; }
body:not(.home):not(.front-page) #sidebar .side-order ul.banner li img{
  display:block;
  max-width:100%;
  height:auto;
}

/* 上部バナー（1枚目）は200px固定 */
body:not(.home):not(.front-page) #sidebar .side-order ul.banner:first-of-type{
  width:200px;
  margin:.5em auto;
  padding:0;
}
body:not(.home):not(.front-page) #sidebar .side-order ul.banner:first-of-type li a{
  display:block;
  width:200px;
  margin:0 auto;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  overflow:visible !important;
}
body:not(.home):not(.front-page) #sidebar .side-order ul.banner:first-of-type li img{
  display:block;
  width:200px !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  transform:none !important;
  object-fit:initial !important;
}

/* 2個目以降の .banner にだけ枠線を付ける */
body:not(.home):not(.front-page) #sidebar .side-order ul.banner:not(:first-child) li{
  border:1px #999 solid;
}
body:not(.home):not(.front-page) #sidebar .side-order ul.banner:not(:first-child) li img{
  width:198px;
}

/* =========================================================
   accrd01（ブランドバナー）だけ固定170×30
   ※事故要因だった汎用指定をここへ隔離
========================================================= */
body:not(.home):not(.front-page) #sidebar .side-order ul.accrd01 li a{
  display:block;
  width:170px;
  height:30px;
  margin:0 auto;

  text-indent:-999em;

  background-repeat:no-repeat;
  background-position:center top !important;
  background-size:170px 60px !important;

  opacity:1 !important;
  transition:none !important;
  -webkit-transition:none !important;
}
body:not(.home):not(.front-page) #sidebar .side-order ul.accrd01 li a:hover,
body:not(.home):not(.front-page) #sidebar .side-order ul.accrd01 li a:focus{
  background-position:center bottom !important;
  box-shadow:1px 1px 2px #ccc,
             -1px 1px 2px #ccc,
             -1px -1px 2px #ccc,
              1px -1px 2px #ccc;
}

/* ブランド名ごとの画像（/com/img/sidenav/ 以下） */
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.canclini a     { background-image:url("/com/img/sidenav/bnr_canclini.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.albini a       { background-image:url("/com/img/sidenav/bnr_albini.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.tmason a       { background-image:url("/com/img/sidenav/bnr_thomasmason.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.tmjourney a    { background-image:url("/com/img/sidenav/bnr_tmjourney.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.tmgold a       { background-image:url("/com/img/sidenav/bnr_tmgold.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.alumo a        { background-image:url("/com/img/sidenav/bnr_alumo.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.albiate a      { background-image:url("/com/img/sidenav/bnr_albiate.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.anteks a       { background-image:url("/com/img/sidenav/bnr_anteks.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.soktas a       { background-image:url("/com/img/sidenav/bnr_soktas.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.testa a        { background-image:url("/com/img/sidenav/bnr_testa.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.somelos a      { background-image:url("/com/img/sidenav/bnr_somelos.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.oltolina a     { background-image:url("/com/img/sidenav/bnr_oltolina.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.texta a        { background-image:url("/com/img/sidenav/bnr_texta.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.getzner a      { background-image:url("/com/img/sidenav/bnr_getzner.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.honegger a     { background-image:url("/com/img/sidenav/bnr_honegger.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.acorn a        { background-image:url("/com/img/sidenav/bnr_acorn.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.djohn a        { background-image:url("/com/img/sidenav/bnr_djanderson.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.grandi a       { background-image:url("/com/img/sidenav/bnr_grandi.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.weba a         { background-image:url("/com/img/sidenav/bnr_weba.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.carlo a        { background-image:url("/com/img/sidenav/bnr_carloriva.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.seais a        { background-image:url("/com/img/sidenav/bnr_seaisland.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.oimport a      { background-image:url("/com/img/sidenav/bnr_others_import.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.giza a         { background-image:url("/com/img/sidenav/bnr_giza.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.others a       { background-image:url("/com/img/sidenav/bnr_others.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.brembana a     { background-image:url("/com/img/sidenav/bnr_brembana.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.carlobasetti a { background-image:url("/com/img/sidenav/bnr_carlobasetti.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.leggiuno a     { background-image:url("/com/img/sidenav/bnr_leggiuno.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.spence a       { background-image:url("/com/img/sidenav/bnr_spence.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.monti a        { background-image:url("/com/img/sidenav/bnr_monti.jpg"); }
body:not(.home):not(.front-page) #sidebar .side-order .accrd01 li.easycare a     { background-image:url("/com/img/sidenav/bnr_easycare.jpg"); }

/* accrd01（ブランドバナー）だけ行間を戻す：トップ以外＆#sidebar限定 */
body:not(.home):not(.front-page) #sidebar .side-order ul.accrd01 > li{
  margin:0 0 5px 0; /* ←旧仕様の“隙間”。必要なら 3〜8pxで調整 */
}
body:not(.home):not(.front-page) #sidebar .side-order ul.accrd01 > li:last-child{
  margin-bottom:0;
}

/* =========================================================
   accrd02/accrd03（カラー・柄：画像＋テキスト）
   - flexで安定
   - トリミングしない／角丸にしない
========================================================= */
body:not(.home):not(.front-page) #sidebar .side-order .accrd02 li a,
body:not(.home):not(.front-page) #sidebar .side-order .accrd03 li a{
  width:auto !important;
  height:auto !important;
  background:none !important;
  margin:0 !important;

  display:flex !important;
  align-items:center !important;
  gap:10px !important;

  padding:4px 6px;
  margin-bottom:2px;

  line-height:1.25;
  text-align:left;

  box-shadow:none !important;
  border:none !important;
}
body:not(.home):not(.front-page) #sidebar .side-order .accrd02 li a img,
body:not(.home):not(.front-page) #sidebar .side-order .accrd03 li a img{
  width:34px !important;
  height:auto !important;
  flex:0 0 34px !important;

  object-fit:initial !important;
  border-radius:0 !important;

  display:block !important;
  margin-right:0 !important;
  vertical-align:middle;
}

/* accrd05（秋冬など）も枠・影を消してずれ防止 */
body:not(.home):not(.front-page) #sidebar .side-order .accrd05 li a{
  box-shadow:none !important;
  border:none !important;
}

/* 価格帯（accrd04） */
body:not(.home):not(.front-page) #sidebar .side-order .accrd04 a{
  display:block;
  border-left:2px #666 solid;
  border-bottom:1px #666 solid;
  padding:4px 6px;
  text-align:left;
  white-space:nowrap;
  font-size:13px;
  line-height:1.4;
}
body:not(.home):not(.front-page) #sidebar .side-order .accrd04 a b{
  font-size:1.4em;
  font-family:"ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif;
  font-weight:bold;
}

/* リスト項目ホバー青＋下線 */
body:not(.home):not(.front-page) #sidebar .side-order .accrd02 li a:hover,
body:not(.home):not(.front-page) #sidebar .side-order .accrd03 li a:hover,
body:not(.home):not(.front-page) #sidebar .side-order .accrd04 li a:hover,
body:not(.home):not(.front-page) #sidebar .side-order .accrd05 li a:hover,
body:not(.home):not(.front-page) #sidebar .side-order .accrd02 li a:focus,
body:not(.home):not(.front-page) #sidebar .side-order .accrd03 li a:focus,
body:not(.home):not(.front-page) #sidebar .side-order .accrd04 li a:focus,
body:not(.home):not(.front-page) #sidebar .side-order .accrd05 li a:focus{
  color:#1e73be !important;
  text-decoration:underline !important;
  text-decoration-thickness:1px;
  text-underline-offset:0.18em;
}

/* =========================================================
   #fabric-accordion：上段5枚タブだけを全幅5等分（色は触らない）
========================================================= */
#fabric-accordion.fabric-accordion-top,
#fabric-accordion.fabric-accordion-top nav{
  width:100% !important;
  max-width:none !important;
}
#fabric-accordion.fabric-accordion-top nav{
  display:block !important;
  text-align:left !important;
}

/* accord.jsが nav直下 or nav > div > ul どちらでも */
#fabric-accordion.fabric-accordion-top nav > ul,
#fabric-accordion.fabric-accordion-top nav > div > ul{
  display:flex !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
#fabric-accordion.fabric-accordion-top nav > ul > li,
#fabric-accordion.fabric-accordion-top nav > div > ul > li{
  flex:1 1 0 !important;
  min-width:0 !important;
}
#fabric-accordion.fabric-accordion-top nav > ul > li > p,
#fabric-accordion.fabric-accordion-top nav > div > ul > li > p{
  margin:0 !important;
}
#fabric-accordion.fabric-accordion-top nav > ul > li > p > a.accord,
#fabric-accordion.fabric-accordion-top nav > ul > li > p > a.accord2,
#fabric-accordion.fabric-accordion-top nav > div > ul > li > p > a.accord,
#fabric-accordion.fabric-accordion-top nav > div > ul > li > p > a.accord2,
#fabric-accordion.fabric-accordion-top nav > ul > li > a.accord,
#fabric-accordion.fabric-accordion-top nav > ul > li > a.accord2,
#fabric-accordion.fabric-accordion-top nav > div > ul > li > a.accord,
#fabric-accordion.fabric-accordion-top nav > div > ul > li > a.accord2{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  text-align:center !important;
}

/* スマホだけ #fabric-accordion を縦積み */
@media (max-width: 834px){
  #fabric-accordion.fabric-accordion-top nav > ul,
  #fabric-accordion.fabric-accordion-top nav > div > ul{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
  }
  #fabric-accordion.fabric-accordion-top nav > ul > li,
  #fabric-accordion.fabric-accordion-top nav > div > ul > li{
    width:100% !important;
    flex:0 0 auto !important;
    min-width:0 !important;
  }
  #fabric-accordion.fabric-accordion-top nav > ul > li > p,
  #fabric-accordion.fabric-accordion-top nav > div > ul > li > p{
    margin:0 !important;
  }
  #fabric-accordion.fabric-accordion-top a.accord,
  #fabric-accordion.fabric-accordion-top a.accord2{
    display:block !important;
    width:100% !important;
  }
}

/* =========================================================
   TOP：6通りの注文方法（最終上書き）
   - 2列×3段に固定
   - .kk-wrap の 1100px 制限をこのブロックだけ解除
========================================================= */
.kk-order .kk-wrap{
  max-width:none !important;
  width:100% !important;
  margin:0 auto !important;
  padding:0 16px !important;
  box-sizing:border-box !important;
}
.kk-order .kk-order-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:20px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.kk-order .kk-order-card > a{
  display:flex !important;
  gap:16px;
  align-items:flex-start;
  min-width:0;
}
.kk-order .kk-order-fig{
  flex:0 0 200px;
  max-width:200px;
  margin:0;
}
.kk-order .kk-order-fig img{
  width:100%;
  height:auto;
  display:block;
}
@media (max-width: 768px){
  .kk-order .kk-order-grid{ grid-template-columns:1fr !important; }
  .kk-order .kk-order-card > a{
    flex-direction:column !important;
    align-items:center !important;
  }
  .kk-order .kk-order-fig{
    max-width:520px;
    width:100%;
    flex-basis:auto;
  }
  .kk-order .kk-order-text{
    width:100%;
    text-align:left;
  }
}

/* TOP：6通りの注文方法 画像ホバー */
.kk-order .kk-order-card > a{
  transition:transform .18s ease, box-shadow .18s ease;
  will-change:transform;
}
.kk-order .kk-order-card > a:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.kk-order .kk-order-fig{
  overflow:hidden;
  border-radius:12px;
}
.kk-order .kk-order-fig img{
  transition:transform .22s ease, opacity .22s ease, filter .22s ease;
  transform:translateZ(0);
  will-change:transform, opacity;
}
.kk-order .kk-order-card > a:hover .kk-order-fig img,
.kk-order .kk-order-fig img:hover{
  opacity:.86;
  transform:scale(1.03);
  filter:saturate(1.03);
}
.kk-order .kk-order-card > a,
.kk-order .kk-order-card > a *{
  cursor:pointer;
}
.kk-order .kk-order-card > a:focus-visible{
  outline:3px solid rgba(30,115,190,.35);
  outline-offset:3px;
}
.kk-order .kk-order-card > a:focus-visible .kk-order-fig img{
  opacity:.86;
  transform:scale(1.03);
}

/* =========================================================
   TOP用（旧 kk-front.css の内容）
========================================================= */
.home .article-header,
.home .entry-title,
.home .posted-on,
.home .author-info,
.home .entry-meta,
.home .date-tags,
.home .post-date,
.front-page .article-header,
.front-page .entry-title,
.front-page .posted-on,
.front-page .author-info,
.front-page .entry-meta,
.front-page .date-tags,
.front-page .post-date{
  display:none !important;
}
.home .entry-content,
.front-page .entry-content{
  margin-top:0 !important;
}

/* =========================================================
   スマホ：タイトルと検索を縦積みに統一（全ページ）
========================================================= */
@media (max-width: 834px){
  .kk-topbar__inner{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px;
  }
  .kk-topbar__inner > *{
    flex:1 1 100% !important;
    min-width:0 !important;
  }
  .kk-topbar__inner form{
    width:100% !important;
    max-width:100% !important;
  }
  .kk-topbar__inner input[type="search"],
  .kk-topbar__inner input[type="text"]{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    min-width:0 !important;
  }
}