@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){
  /*必要ならばここにコードを書く*/
}
/* TOPページランキングリンク */
.kani-ranking-box{
  background:#fffaf5;
  border:1px solid #e7d7c8;
  padding:22px 24px;
  margin:20px 0 30px;
  border-radius:6px;
}

.kani-ranking-title{
  font-size:20px;
  font-weight:bold;
  margin:0 0 10px;
}

.kani-ranking-link{
  margin:14px 0 0;
}

.kani-ranking-link a{
  display:inline-block;
  padding:10px 18px;
  border:1px solid #c88b6a;
  border-radius:4px;
  text-decoration:none;
}
/* =================================
   カニ通販おすすめTOP3
================================= */

.kani-top3{
  width:100%;
  max-width:960px;
  margin:30px auto;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  box-sizing:border-box;
}


/* ---------------------------------
   ヘッダー
--------------------------------- */

.kani-top3-header{
  background:linear-gradient(135deg,#e87522,#f39a35);
  padding:10px 10px 11px;
  text-align:center;
  color:#fff;
}

/* 旧2026年ラベルは使わない */
.kani-top3-year{
  display:none;
}

/* 2026年版・実際に食べて判定 */
.kani-top3-sub{
  margin:0 0 4px;
  padding:0;
  font-size:15px;
  line-height:1.3;
  font-weight:bold;
  color:#fff;
}

/* カニ通販おすすめTOP3 */
.kani-top3-title{
  margin:0;
  padding:0;
  font-size:20px;
  line-height:1.3;
  font-weight:bold;
  color:#fff;
}


/* ---------------------------------
   3列部分
--------------------------------- */

.kani-top3-list{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:10px;
  padding:10px 12px 16px;
  background:#fafafa;
  box-sizing:border-box;
}


/* ---------------------------------
   各カード
--------------------------------- */

.kani-top3-card{
  flex:1 1 0;
  width:0;
  min-width:0;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  overflow:hidden;
  padding:0 10px 12px;
  box-shadow:0 2px 5px rgba(0,0,0,.05);
  box-sizing:border-box;
}

/* 1位だけオレンジ枠 */
.kani-top3-first{
  border:2px solid #f39a20;
}


/* ---------------------------------
   店舗名
--------------------------------- */

.kani-top3-shop{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:15px;
  line-height:1.4;
  font-weight:bold;
  padding:8px 3px;
}


/* ---------------------------------
   商品画像
--------------------------------- */

.kani-top3-img{
  display:block;
  width:100%;
  height:140px;
  object-fit:cover;
  margin:0;
}


/* ---------------------------------
   特徴
--------------------------------- */

.kani-top3-point{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#62933f;
  font-weight:bold;
  font-size:13px;
  line-height:1.5;
  margin:0;
  padding:10px 3px;
}


/* ---------------------------------
   向く人
--------------------------------- */

.kani-top3-for{
  background:#f4f6f5;
  border-radius:7px;
  padding:8px 5px;
  margin-bottom:12px;
  text-align:center;
  font-size:13px;
  line-height:1.5;
}

.kani-top3-for span{
  display:block;
  margin-bottom:3px;
  font-size:12px;
  color:#666;
}


/* ---------------------------------
   公式サイトボタン
--------------------------------- */

.kani-top3-btn{
  display:block;
  background:#ff7428;
  color:#fff !important;
  text-align:center;
  text-decoration:none !important;
  font-weight:bold;
  font-size:14px;
  padding:12px 4px;
  border-radius:30px;
  box-shadow:0 4px 8px rgba(255,116,40,.25);
  transition:.2s;
}

.kani-top3-btn:hover{
  opacity:.85;
  transform:translateY(-1px);
}


/* =================================
   スマホ
================================= */

@media screen and (max-width:700px){

  .kani-top3{
    margin:20px 0;
    border-radius:10px;
  }

  .kani-top3-header{
    padding:9px 8px 10px;
  }

  .kani-top3-sub{
    font-size:14px;
    margin-bottom:3px;
  }

  .kani-top3-title{
    font-size:18px;
  }

  .kani-top3-list{
    display:block;
    padding:12px;
  }

  .kani-top3-card{
    width:100%;
    margin:0 0 14px;
  }

  .kani-top3-shop{
    min-height:auto;
  }

  .kani-top3-img{
    height:auto;
    max-height:260px;
  }

  .kani-top3-point{
    min-height:auto;
  }
}