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

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

/* TOPページ専用 ここから */
#kaitori-top-page{
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
background:#faf7fb;
color:#333;
line-height:1.8;
}

/* コンテナ */

#kaitori-top-page .container{
max-width:1100px;
margin:auto;
padding:70px 20px;
}

/* hero */

#kaitori-top-page .hero{
background:linear-gradient(#f6eef7,#ffffff);
text-align:center;
padding:80px 20px;
}

#kaitori-top-page .hero img{
width:100%;
max-width:1200px;
border-radius:14px;
margin-bottom:30px;
}

#kaitori-top-page .hero h1{
font-size:36px;
margin-bottom:20px;
font-family:"Noto Serif JP",serif;
}

#kaitori-top-page .hero p{
font-size:18px;
margin-bottom:15px;
}

/* ボタン */

#kaitori-top-page .btn{
display:inline-block;
background:#c63b7c;
color:#fff;
padding:14px 30px;
border-radius:8px;
margin:10px;
text-decoration:none;
font-size:17px;
transition:.3s;
}

#kaitori-top-page .btn:hover{
opacity:.8;
}

/* 見出し */

#kaitori-top-page h2{
text-align:center;
font-size:28px;
margin-bottom:40px;
font-family:"Noto Serif JP",serif;
}

/* 3カラム */

#kaitori-top-page .grid3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

/* カード */

#kaitori-top-page .card{
background:#fff;
padding:25px;
border-radius:12px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
text-align:center;
}

#kaitori-top-page .card img{
width:70px;
margin-bottom:15px;
}

/* 商品グリッド */

#kaitori-top-page .items{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

#kaitori-top-page .items img{
width:100%;
border-radius:10px;
}

/* 実績 */

#kaitori-top-page .price{
font-size:22px;
color:#c63b7c;
font-weight:bold;
}

/* ステップ */

#kaitori-top-page .steps{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:15px;
text-align:center;
}

#kaitori-top-page .step{
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 3px 8px rgba(0,0,0,0.08);
}

#kaitori-top-page .step img{
width:60px;
margin-bottom:10px;
}

/* レビュー */

#kaitori-top-page .review{
background:#fff;
padding:25px;
border-radius:10px;
margin-bottom:20px;
box-shadow:0 3px 8px rgba(0,0,0,0.08);
}

/* CTA */

#kaitori-top-page .cta{
background:#2b1f2f;
color:#fff;
text-align:center;
padding:80px 20px;
}

#kaitori-top-page .cta h2{
color:#fff;
}
/* 買取ブランドセクション */
.top-kaitori-brand{
max-width:1100px;
margin:auto;
padding:60px 20px;
text-align:center;
}

.brand-title{
font-size:28px;
margin-bottom:10px;
}

.brand-lead{
margin-bottom:40px;
color:#666;
}

.brand-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:20px;
margin-bottom:40px;
}

.brand-card{
background:#fff;
border-radius:10px;
overflow:hidden;
text-decoration:none;
color:#333;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
transition:0.2s;
}

.brand-card:hover{
transform:translateY(-5px);
}

.brand-card img{
width:100%;
height:130px;
object-fit:cover;
}

.brand-card p{
padding:10px;
font-size:14px;
}

.brand-cta{
margin-top:20px;
}

.cta-btn{
display:inline-block;
background:#ff6fa5;
color:white;
padding:15px 35px;
border-radius:30px;
text-decoration:none;
}

/* フリマ疲れ共感セクション */

.furima-problem{
background:#faf7fb;
padding:70px 20px;
text-align:center;
}

.problem-title{
font-size:28px;
margin-bottom:40px;
}

.problem-grid{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:30px;
margin-bottom:50px;
}

.problem-card{
background:white;
border-radius:10px;
padding:30px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.problem-card img{
width:80px;
margin-bottom:15px;
}

.problem-card h3{
margin-bottom:10px;
font-size:18px;
}

.problem-card p{
line-height:1.7;
color:#666;
}

.solution-box{
background:white;
padding:40px;
border-radius:12px;
max-width:700px;
margin:auto;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.solution-box h2{
margin-bottom:15px;
}

.solution-box p{
margin-bottom:20px;
}

.cta-btn{
display:inline-block;
background:#ff6fa5;
color:white;
padding:15px 35px;
border-radius:30px;
text-decoration:none;
}

/* スマホ */

@media(max-width:768px){

#kaitori-top-page .grid3{
grid-template-columns:1fr;
}

#kaitori-top-page .items{
grid-template-columns:1fr 1fr;
}

#kaitori-top-page .steps{
grid-template-columns:1fr;
}

#kaitori-top-page .hero h1{
font-size:26px;
}

}
/* TOPページ専用 ここまで */

/* ブランド買取一覧ページ ここから*/
.brand-hub{
max-width:1100px;
margin:auto;
padding:40px 20px;
font-family:sans-serif;
}

.hub-lead{
margin-bottom:40px;
line-height:1.8;
}

.hub-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:20px;
margin-bottom:40px;
}

.hub-card{
background:#fff;
border-radius:10px;
overflow:hidden;
text-align:center;
text-decoration:none;
color:#333;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
transition:0.2s;
}

.hub-card:hover{
transform:translateY(-5px);
}

.hub-card img{
width:100%;
height:150px;
object-fit:cover;
}

.flow-list{
line-height:2;
margin-bottom:40px;
}

.hub-cta{
text-align:center;
padding:40px;
background:#fafafa;
border-radius:10px;
}

.cta-btn{
display:inline-block;
background:#ff6fa5;
color:white;
padding:15px 35px;
border-radius:30px;
text-decoration:none;
margin-top:15px;
}
/* ブランド買取一覧ページ ここまで*/

/* 買取実績 ここから */
.kaitori-results{
max-width:1100px;
margin:auto;
padding:40px 20px;
}

.results-lead{
margin-bottom:40px;
line-height:1.8;
}

.results-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:25px;
margin-bottom:50px;
}

.result-card{
background:#fff;
border-radius:10px;
overflow:hidden;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.result-card img{
width:100%;
height:200px;
object-fit:cover;
}

.result-content{
padding:20px;
}

.result-price span{
font-size:22px;
color:#ff4d7a;
font-weight:bold;
}

.genre-list{
columns:2;
line-height:2;
margin-bottom:40px;
}

.results-cta{
text-align:center;
background:#fafafa;
padding:40px;
border-radius:10px;
}

.cta-btn{
display:inline-block;
background:#ff6fa5;
color:white;
padding:15px 35px;
border-radius:30px;
text-decoration:none;
margin-top:15px;
}
/* 買取実績 ここまで */


/* 各ブランド買取ページ ここから*/

.brand-page{
max-width:1100px;
margin:auto;
padding:40px 20px;
font-family:"Noto Sans JP",sans-serif;
line-height:1.8;
}

.brand-page h1{
font-size:32px;
margin-bottom:20px;
}

.brand-page h2{
margin-top:50px;
font-size:26px;
border-left:6px solid #c63b7c;
padding-left:10px;
}

.brand-hero img{
width:100%;
border-radius:10px;
margin:20px 0;
}

.brand-price{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:20px;
}

.price-card{
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 3px 8px rgba(0,0,0,0.1);
text-align:center;
}

.price{
color:#c63b7c;
font-size:22px;
font-weight:bold;
}

.cta-box{
background:#f6eef7;
padding:30px;
text-align:center;
border-radius:10px;
margin:40px 0;
}

.cta-btn{
display:inline-block;
background:#c63b7c;
color:#fff;
padding:14px 30px;
border-radius:8px;
text-decoration:none;
margin-top:15px;
}

@media(max-width:768px){

.brand-price{
grid-template-columns:1fr;
}

}
/* 各ブランド買取ページ ここまで*/


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

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

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