/********************************************
  ▼ メインカラム
*********************************************/
.keySection {
  width:100%;
  max-width:1200px;
  margin:3em auto 0;
}
@media screen and (max-width: 768px) {
  .keySection {
    max-width: 100%;
  }
}

h3.heading-gradient {
  font-size: clamp(2em, 4.5vw, 3.5em);
  font-weight: bold;
  background: linear-gradient(to bottom, #af2c10, #554202);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
  margin:1em 0 0;
  padding:0;
  text-align:center;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}

/********************************************
  ▼ メインビジュアル
*********************************************/
/* メインスライダー */
.slid_main {
  width: 100%;

  /* ▼ 初期表示チラつき防止（追加） */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* slick初期化後に表示 */
.slid_main.is-ready,
.slid_main.slick-initialized {
  visibility: visible;
  opacity: 1;
}

/* スライド要素 */
.slid_main .slide,
.slid_main picture {
  display: block;
}

/* 画像共通 */
.slid_main img {
  width: 100%;
  height: auto;
  display: block;
}

/* ▼ スマホ調整 */
@media screen and (max-width: 768px) {

  .main_img {
    max-height: auto;      /* ← 好みで調整 */
    overflow: hidden;
  }

  .slid_main img {
    height: auto;          /* ← 上と揃える */
    object-fit: cover;     /* トリミング */
  }
}

/* ==========================
   slick ドット（サイバー脈動）
========================== */
.slick-dotted.slick-slider {
    margin-bottom: 50px;
}

/* ドット全体位置 */
.slick-dots {
  bottom: -40px;
  display:none;
}

/* クリック領域 */
.slick-dots li {
  width: 20px;
  height: 20px;
  margin: 0 0.5em;
}

/* ボタン */
.slick-dots li button {
  width: 20px;
  height: 20px;
  padding: 0;
  position: relative;
}

/* 通常ドット */
.slick-dots li button:before {
  content: "";
  display: block;
  margin: auto;

  width: 10px;
  height: 10px;
  border-radius: 50%;

  background: rgba(76, 22, 0, 1);


  transition: all 0.3s ease;
}

/* アクティブドット：脈動 */
.slick-dots li.slick-active button:before {
  background: rgba(76, 22, 0, 1);

  animation: cyberPulse 1.8s ease-in-out infinite;
}

/* hover（PC） */
.slick-dots li button:hover:before {
  transform: scale(1.3);
  box-shadow:
    0 0 10px rgba(255, 255, 0, 1),
    0 0 20px rgba(255, 255, 0, 0.9);
}


/* ==========================
   脈動アニメーション
========================== */
@keyframes cyberPulse {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 6px rgba(255, 255, 0, 0.6),
      0 0 10px rgba(255, 255, 0, 0.4);
    opacity: 1;
  }

  50% {
    transform: scale(1.6);
    box-shadow:
      0 0 12px rgba(255, 255, 0, 1),
      0 0 24px rgba(255, 255, 0, 0.9),
      0 0 30px rgba(255, 255, 0, 0.7);
    opacity: 0.9;
  }

  100% {
    transform: scale(1);
    box-shadow:
      0 0 6px rgba(255, 255, 0, 0.6),
      0 0 10px rgba(255, 255, 0, 0.4);
    opacity: 1;
  }
}

/* タッチデバイスでは hover を無効化 */
@media (hover: none) {
  .slick-dots li button:hover:before {
    transform: none;
    box-shadow: none;
    opacity:0.3;
  }
}


/* フォーカスでは光らせない
.slick-dots li button:focus:before {
  opacity: 0.4;
  
} */


/* slick ドットここまで */
/********************************************
  ▼ 買取実績一覧（スライド＋成形）
*********************************************/
.p-record{
max-width:1000px;
margin:0 auto;
padding:0;
text-align:center;
}

/* タイトル */

.p-record h3{
display: inline-block;
position:relative;
width:100%;
max-width:500px;
text-align:center;
color:#461900;
font-size: clamp(1.2em, 4.5vw, 1.7em);
font-weight:700;
letter-spacing:0.1em;
font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
padding:0.2em;
margin:3em 0 0.5em;
box-sizing:border-box;

/* 楕円グラデーション */

background:
radial-gradient(ellipse at center,#f9eac4 0%,#af8006 100%);

/* 左右装飾 */

background-image:
url("../img/top/bg_p-record-title01.png"),
url("../img/top/bg_p-record-title02.png"),
radial-gradient(ellipse at center,#f9eac4 0%,#af8006 100%);

background-repeat:no-repeat,no-repeat,no-repeat;

background-position:
left center,
right center,
center;

background-size:
auto 100%,
auto 100%,
cover;
}

.btn_list {
  position: relative;
  background:#df590d;
  color:#fff;
  height:auto;
  display:inline-block;
  text-align:center;
  min-width:250px;
  padding: 0.5em 0;
  margin:0 auto;
  text-decoration: none;
  border-radius: 0.5em;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  border: 2px solid #fff;
}
.btn_list p{
  font-weight:bold;
  margin: 0;
  padding: 0;
}
.btn_list::after{
  content: "\e06c";
  font-family: "Phosphor";
  font-size: 20px;
  font-weight:normal;
  position: absolute;
  right: 0.2em;
  top: 50%;
  transform: translateY(-50%);
}

.listbox {
  text-align:center;
  margin:3em 0 5em;
}

/* 買取実績スライダー */
.post-slider{
position:relative;
width:100%;
margin:0 auto;
}

.post-slider-window{
overflow:hidden;
padding:1em 0;
}

.wp-post-list{
display:flex;
gap:20px;
padding:0;
margin:0;
list-style:none;
transition:transform .6s ease;
}

.wp-post-list li{
flex: 0 0 calc(100% / 6);
background:#fff;
box-shadow:0 5px 5px rgba(0,0,0,.15);
transition:.3s;
}

.wp-post-list li:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.post-img img{
width:100%;
height:auto;
display:block;
}

.post-meta{
display:flex;
justify-content:space-between;
padding:10px 12px 0;
font-size:12px;
color:#777;
}

.post-cat{
background:#461900;
color:#fff;
padding:2px 6px;
font-size:11px;
}

.post-title{
display:block;
padding:8px 12px 14px;
font-size:14px;
text-decoration:none;
color:#222;
line-height:1.4;
}

.post-title:hover{
color:#461900;
}

/* ボタン */

.slide-btn{
position:absolute;
top:40%;
transform:translateY(-50%);
width:40px;
height:40px;
background:#000;
color:#fff;
border:none;
font-size:22px;
cursor:pointer;
z-index:10;
opacity:.8;
}

.slide-btn:hover{
opacity:1;
}

.prev{
left:0.5em;
}

.next{
right:0.5em;
}

/* スマホ */
@media (max-width:768px){

  .wp-post-list li{
    flex:0 0 80%;
  }

}

/********************************************
  ▼ トップ3点ボックス
*********************************************/

.main_up {
  width:100%;
  height:auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2em;
  margin: 0 auto;
  padding: 0;
  text-align:center;
  background:
    url("../img/common/bg_3box.png") top center / 600px auto repeat;
}

.box3{
  width:100%;
  margin:0 auto;
  padding:0 0 5em;
  box-sizing:border-box;
}


/* ===============================
   各カラム
================================ */
.box3-inner {
  display:flex;
  flex-wrap:wrap;
  gap:1.5em;
  align-items:stretch;

  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
}
.box3-inner > div{
  display: flex;
  flex-direction: column;
  flex: 1 1 calc((100% - 3em) / 3);

  overflow: hidden;
  /* background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease; */
}

/* ホバー効果 */
.box3-inner a{
  display:block;
  width:100%;
  height:100%;
  color:#461900;
  text-decoration:none;
  transition: transform 0.3s ease;
}
.box3-inner a:hover{
  transform: translateY(-5px);
}

/* ===============================
   見出し部分
================================ */
.box3-inner h4{
  margin: 0;
  padding: 1em;
  color: #fff;
  display: flex;
  flex-direction: column;   /* img → テキスト縦並び */
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.1rem;
  line-height: 1.4;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

/* アイコン画像 */
.box3-inner h4 img{
  display: block;
  width: auto;
  height: 80px;
  padding:0 0 0.3em;
}

/* 1つ目 */
.box3-inner > div:nth-child(1) h4 {
  background: #CA0201;
}

/* 2つ目 */
.box3-inner > div:nth-child(2) h4 {
  background: #09204A;
}

/* 3つ目 */
.box3-inner > div:nth-child(3) h4 {
  background: #461900;
}

/* ===============================
   本文
================================ */
.box3-inner p{
  margin: 0;
  padding: 1em 0;
  line-height: 1.5;
  font-size: 0.95em;
  flex: 1;                 /* 高さ揃え用 */
  text-align:justify;
  word-break:break-all;
  text-justify:inter-character;
}

/* span強調 */
.box3 p span{
  font-weight: bold;
  color: #CD4C3B;
}

/* ===============================
   タブレット（2カラム）
================================ 
@media (max-width: 900px){
  .box3 > div{
    flex: 1 1 calc((100% - 24px) / 2);
  }
}*/

/* ===============================
   スマホ
================================ */
@media (max-width: 768px){
  .main_up {
    gap: 2em;
  }
  .box3{
    gap: 16px;
    padding:0 0.5em 5em;
    background: none;
  }
  .box3-inner {
    gap:1em;
  }
  .box3-inner p {
    font-size: 0.8em;
  }
  .box3-inner h4 img{
  height: 50px;
}
}

/* ===============================
   国内最大級の専門店
================================ */
.top_contents {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: linear-gradient(
    to bottom,
    #FFF8F2 0%,
    #FFFEFD 100%
  );
}

/* ===============================
   初めての方へ
================================ */
.top_problem {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;

  background:
    linear-gradient(
      to bottom,
      #504624 0%,
      #816505 100%
    ) top / 100% 769px no-repeat,
    #fff;
}
.top_Pinner {
  position:relative;
  width: 1000px;
  height: auto;
  margin: 0 auto;
  padding:0;
  box-sizing:border-box;
}
.top_Pinner img{
  width: 100%;
  height: auto;
  margin: 0;
  padding:0;
  z-index:1;
}

.top_Pinner h3{
  position: absolute;
  top:2em;
  left:50%;
  transform: translateX(-50%);
  font-size: clamp(1.5em, 4.5vw, 2em);
  color: #fff;
  display: inline-block;
  letter-spacing: 0.2em;
  padding: 0 0 0 36px;
  margin:0;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
  z-index:2;
}

/* 左アイコン */
.top_Pinner h3::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 36px;
  background: url("../img/common/icon-bnr01.png") center / contain no-repeat;
  z-index:5;
}

/* 下線 */
.top_Pinner h3::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.45);
}

.top_Pinner h4 {
  position: absolute;
  top:10%;
  left:1em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin:0;
  padding:0;
  font-size: clamp(1.5em, 4.5vw, 2em);
  color: #fff;
  line-height:1.2;
  letter-spacing:0.2em;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}

@media (min-width:769px){
  .top_Pinner .indent{
    margin-top:1.5em;
    display:inline-block;
  }
}

.top_Pinner .problem_catch {
  width:90%;
  position: absolute;
  bottom:-80px;
  left: 50%;
  transform: translateX(-50%);
  box-sizing:border-box;
  margin:0;
  padding:0;
}
	
	
.top_Pinner h5 {
  width:100%;
  text-align:center;
  font-size: clamp(1.2em, 4.5vw, 1.6em);
  color: #fff;
  margin:0 0 0.3em;
  padding:0.2em 0;
  line-height:1.2;
  letter-spacing:0.2em;
  background: rgba(9,32,74,0.8);
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}
.top_Pinner h6 {
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:0.2em 0;
  text-align:center;
  font-size: clamp(1.5em, 4.5vw, 2em);
  color: #461900;
  line-height:1.2;
  letter-spacing:0.2em;
  background: rgba(255,255,255,0.8);
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}
.top_Pinner h6 span{
  font-size: clamp(0.6em, 4.5vw, 0.8em);
}
.top_Pinner p{
  position: absolute;
  color: #54481D;
  line-height:1.5;
  padding: 0;
  margin:0;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
  z-index:2;
}
.top_Pinner p.txt01{
  top:25%;
  right:15%;
}
.top_Pinner p.txt02{
  top:32%;
  left:25%;
}
.top_Pinner p.txt03{
  top:53%;
  right:33%;
}


@media (max-width: 1000px){
  .top_Pinner{
  width:100%;
  }
  .top_Pinner h3{
  top:1em;
  letter-spacing: 0.1em;
  }
  .top_Pinner h3::before{
  width: 20px;
  height: 31px;
  }
  .top_Pinner h3::after{
  bottom: 5px;
  }
  .top_Pinner h4 {
  top:15%;
  left:0.5em;
}
  .top_Pinner p.txt01{
  top:16%;
  right:33%;
  }
  .top_Pinner p.txt02{
  top:36%;
  left:34%;
  }
  .top_Pinner p.txt03{
  top:53%;
  right:30%;
  }
}

@media (max-width: 768px){
  .top_Pinner p.txt01{
  top:15%;
  right:14%;
  }
  .top_Pinner p.txt02{
  top:35%;
  left:25%;
  }
  .top_Pinner p.txt03{
  top:51%;
  right:11%;
  }
}
/* ===============================
   お任せください
================================ */
.top_solution{
  width:100%;
  margin:0;
  padding:150px 0 3em;

  background:
		url("../img/top/bg_solution.png") repeat;
  background-size:100px auto;
}

.top_Sinner{
  max-width:1000px;
  margin:0 auto 5em;

  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  box-sizing:border-box;
}

/* ===============================
ボックス
=============================== */

.top_Sinner > div{

  background:#fff;
  padding:1em;
  display:flex;
  align-items:center;
  justify-content:space-around;

  transform:skewX(12deg);
  position:relative;

  box-shadow:
  5px 5px 0 rgba(167,131,37,0.85);

}

/* 中身の歪みを戻す */
.top_Sinner > div > *{
  transform:skewX(-12deg);
}

/* ===============================
テキスト
=============================== */

.top_Sinner p{
  margin:0;
  padding:0;
}

.top_solution img{
  width:500px;
  height:auto;
}

.top_Sinner h5{
  margin:0;
  padding:0;
  font-size:1.6rem;
  font-weight:700;
  color:#c40000;
  text-align:center;
}

.top_Sinner > div{
  display:flex;
  align-items:center;
  gap:20px;
}

/* pから始まる場合 → 6:4 */
.top_Sinner > div p:first-child{
  flex:5.5;
}
.top_Sinner > div p:first-child + h5{
  flex:4.5;
}

/* h5から始まる場合 → 4:6 */
.top_Sinner > div h5:first-child{
  flex:4;
  letter-spacing: 1em;
}
.top_Sinner > div h5:first-child + p{
  flex:6;
}

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

@media (max-width:768px){
.top_Sinner{
  grid-template-columns:1fr;
  gap:24px;
  padding:0 1.5em;
  }
.top_Sinner > div{
  transform:skewX(6deg);
  }

.top_Sinner > div > *{
  transform:skewX(-6deg);
  }
  .top_solution img{
  width:90%;
  }

}

/* =========================================
  ▼ topGreeting
========================================= */
.topGreeting,
.topNo1 {
  display: flex;
  gap: 2em;
  align-items: flex-start;
}
/* contents_inner 内で水平中央 */
.contents_inner,
.contents_inner02 {
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding: 0 0.5em 2em;
  text-align: center;
  box-sizing: border-box;
}
.contents_inner {
  background: url("../img/top/bg_Cinner.png") top left  / 300px auto no-repeat;
}
.contents_inner02 {
  background: url("../img/top/bg_Cinner02.png") top right  / 400px auto no-repeat;
}
.topNo1 {
  margin:3em 0 0;
}
/* 文字は単色、背景は中央から左右へ透過 */
.contents_inner h3.heading-gradient{
  display: inline-block; /* 背景を文字幅に合わせる */
  color: #461900;
  -webkit-text-fill-color: #461900;
  -webkit-background-clip: initial;
  font-size: clamp(1.2em, 4.5vw, 2em);
  font-weight: bold;
  margin: 3em 0 2em;
  padding: 0.25em 3em;  /* 帯の太さ・左右幅 */
  /* 中央#ecc801 → 左右に透過 */
  background: linear-gradient(
    90deg,
    rgba(236, 200, 1, 0) 0%,
    #ecc801 50%,
    rgba(236, 200, 1, 0) 100%
  );
  box-shadow: none;
  filter: none;
}
.contents_inner02 h3.heading-gradient{
  color: #461900;
  -webkit-text-fill-color: #461900;
  -webkit-background-clip: initial;
  font-size: clamp(1.2em, 4.5vw, 2em);
  margin: 3em 0 2em;
  background: none;
  box-shadow: none;
  filter: none;
}

/* 6:4 */
.topGreeting .topGbox01{ flex: 6; text-align:left; box-sizing:border-box; }
.topGreeting .topGbox02{ flex: 4; text-align:left; box-sizing:border-box; }
/* 4:6 */
.topNo1 .topNbox01{ flex: 4; text-align:left; box-sizing:border-box; }
.topNo1 .topNbox02{ flex: 6; text-align:center; box-sizing:border-box; }

/* 見出し */
.topGreeting h5{
  font-size: clamp(1.3em, 4.5vw, 2.1em);
  color: #461900;
  margin: 0 0 1em;
  line-height: 1.5;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}
/* span：薄いピンクのライン（文字に少し被る / 高さ1/3程度） */
.topGreeting h5 span{
  position: relative;
  display: inline-block;
  z-index: 0;
}

.topGreeting h5 span::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 33%;                 /* テキストの約1/3 */
  bottom: 0.08em;              /* 少し文字に被せる */
  background: rgba(255, 182, 193, 0.55); /* 薄いピンク */
  z-index: -1;                 /* 文字の背面へ */
}

.topNo1 h5{
  font-size: 1.7em;
  color: #461900;
  margin: 0 0 0.1em;
  line-height: 1.5;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}

.topGreeting h6,
.topNo1 h6 {
  font-size: 1.1em;
  margin:0.5em 0;
  line-height: 1.2;
}
.topNo1 h6 {
  color: #461900;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}

.contents_inner p,
.contents_inner02 p{
  line-height:1.8;
}
.topGbox02 img,
.topNo1 img{
  width:100%;
  height:auto;
}
.topGbox02 p {
  font-size:0.9em;
}
.topNbox02 p {
  font-size:0.7em;
  text-align:center;
}

/* =========================================
  ▼ No.1 seal
========================================= */
.no1_seal{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 3em;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* ← 行全体を中央寄せ（2列目も中央） */
  gap: 1.2em;
  box-sizing: border-box;
}

/* 2カラム同幅 */
.no1_seal .no1_Sinner{
  flex: 0 0 calc((100% - 1.2em) / 2); /* ← 2列で同じ幅 */
  background-color: #FFEFEC;
  color:#461900;
  font-weight:bold;
  text-align:center;
  display: flex;
  align-items: center;
  gap: 0.8em;

  padding: 1em;
  box-sizing: border-box;
}

/* 文章（1つ目のp）＝画像幅を引いた残りを全て使う */
.no1_seal .no1_Sinner > p:first-child{
  flex: 1;                 /* ← 残り幅を全部使う */
  margin: 0;
}

/* 画像側（2つ目のp）＝右端固定 */
.no1_seal .no1_Sinner > p:last-child{
  margin: 0;
  flex: 0 0 auto;
  margin-left: auto;       /* ← 右端へ押し出す */
  display: flex;
  justify-content: flex-end;
}

/* imgは全体の2割くらい（ただし上限も付けると安定） */
.no1_seal .no1_Sinner img{
  width: 100%;
  max-width: 80px;         /* 任意：大きくなりすぎ防止 */
  height: auto;
  display: block;
}

/* =========================================
  ▼ 買取品目
========================================= */
.top_item{
  width:100%;
  height:auto;
  margin:0;
  padding:3em 0;
  background: url("../img/top/bg_item.png") repeat;
  background-size:100px auto;
}

.top_Iinner{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
  padding:0 0 5em;
  background-image:
    url("../img/top/bg_item01.png"),
    url("../img/top/bg_item02.png"),
	url("../img/top/bg_item03.png"),
    url("../img/top/bg_item04.png");

  background-repeat:
    no-repeat,
    no-repeat,
	no-repeat,
    no-repeat;

  background-position:
    right top,
    left bottom,
	right center,
    left top;

  background-size:
    300px auto,
    320px auto,
	500px auto,
    500px auto;
}

/* 見出し */
.top_Iinner h4{
  margin: 0 0 2em;
  font-size: clamp(1.2em, 4.5vw, 1.5em);
  text-align: left;
  color:#461900;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}
.top_Iinner h4 span{
  font-size: clamp(0.6em, 4.5vw, 0.8em);
}

/* ===============================
  4つのカードを2列
=============================== */
.top_Iinner .itembox{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* 各カード */
.top_Iinner .itembox > div{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  box-sizing: border-box;
}

/* 画像側 / テキスト側を 5:5 */
.top_Iinner .itembox > div > div{
  width: 50%;
  box-sizing: border-box;
}

/* テキスト側は縦並び */
.top_Iinner .itembox > div > div:last-child{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 画像 */
.top_Iinner .itembox img{
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid #BFA936;
  box-sizing: border-box;
}

/* タイトル */
.top_Iinner .itembox h5{
  margin: 0 ;
  padding: 0;
  color: #461900;
  font-size:1em;
}

/* 説明文 */
.top_Iinner .itembox p{
  margin: 0;
  padding: 0;
  line-height: 1.5;
}
.info_item {
  text-align:center;
  margin:3em 0;
}
.info_item h6 {
  text-align:center;
  display:inline-block;
  color:#C3451B;
  background-color:#FDFF9EE5;
  padding:0.3em 2em;
  font-size: 1em;
  margin: 2em 0 0;
}

/* ===============================
  スマホ
=============================== */
@media (max-width: 768px){
  .top_Iinner .itembox{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .top_Iinner .itembox > div{
    gap: 16px;
  }
  .top_Iinner{
  padding:3em 0.5em;
  background-size:
    150px auto,
    150px auto,
	250px auto,
    250px auto;
}
  .top_Iinner p{
  font-size: 0.8em;
  }
}

/* =========================================
  ▼ 選ばれる9の理由
========================================= */
.top_reason{
  width: 100%;
  margin: 0;
  padding: 3em 0;
  background: url(../img/top/bg_reason.jpg) repeat;
  background-size: 1000px auto;
  box-sizing: border-box;
}
.catch_reason {
  text-align:center;
  padding:0;
  margin:0 0 -1em;
}

.catch_reason > span{
  display: inline-block;
  position: relative;
  padding: 0 1em;          /* ← 戻す（左右に余白が必要） */
  overflow: visible;
  color:#461900;
  letter-spacing:0.5em;
  text-indent: 0.5em;
  font-weight:bold;
}
.catch_reason > span::before,
.catch_reason > span::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 1px;
  background: #461900;
}

.catch_reason > span::before{
  left:0;
  transform:translateY(-50%) rotate(60deg);
}

.catch_reason > span::after{
  right:0;
  transform:translateY(-50%) rotate(-60deg);
}

.top_reason h3.heading-gradient {
  margin:0 0 0.3em;
}

/* ===============================
  9つの理由カード
=============================== */
.top_Rinner{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 各カード */
.top_Rinner > div{
  background: #fff;
  padding: 24px 20px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ===============================
  見出し
=============================== */

/* 数字 */
.top_Rinner h4{
  margin: 0 0 0.4em;
  padding: 0;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;

  background: linear-gradient(to bottom, #B7000B, #D7DB00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* 小見出し */
.top_Rinner h5{
  margin: 0 0 0.4em;
  padding: 0;
  text-align: center;
  color: #461900;
  font-size: 1rem;
  line-height: 1.5;
}

/* メイン見出し */
.top_Rinner h6{
  margin: 0 0 1em;
  padding: 0;
  text-align: center;
  color: #B7000B;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ===============================
  画像・本文
=============================== */
.top_Rinner img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 1em;
  padding: 0;
}

.top_Rinner p{
  margin: 0;
  padding: 0;
  line-height: 1.6;
  text-align:justify;
  word-break:break-all; 
  text-justify:inter-ideograph;
  text-justify:inter-character;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/* ===============================
  スマホ
=============================== */
@media (max-width: 768px){
  .top_reason{
    padding:3em 0.5em;
  }
  .top_Rinner{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* 最後の9番目だけ2列分 */
  .top_Rinner > div:last-child{
    grid-column: 1 / -1;
  }

  .top_Rinner > div{
    padding: 18px 14px;
  }

  .top_Rinner h4{
    font-size: 1.7rem;
  }

  .top_Rinner h5{
    font-size: 0.95rem;
  }

  .top_Rinner h6{
    font-size: 1.05rem;
  }

  .top_Rinner p{
    font-size: 0.85em;
  }
}

/* ===============================
   査定から買取までの流れ
=============================== */
.top_flow{
  width: 100%;
  margin: 0;
  padding: 5em 0;
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;

  background: linear-gradient(to bottom, #A79300, #9F5A00);
}

.top_Finner{
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 2em;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2em;

  background: url("../img/top/bg_flow.jpg") center top / cover no-repeat;
}

/* ===============================
   タイトル
=============================== */

.flow-title{
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 1.2;
  font-weight: 700;
  color:#fff;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}

.flow-title span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin:0 0.08em 0 0;
  background: #fff;
  font-size: clamp(1.5em, 4.5vw, 2em);
}

.flow-title--top{
  margin-left:-7em;
}
.flow-title--bottom{
  margin-top:-0.8em;
}

.flow-title--top span{
  color: #461900;
}

.flow-title--bottom span{
  color: #B7000B;
}

/* ===============================
   各ステップ
=============================== */

.flow-step{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1em 1.1em;
  box-sizing: border-box;
  position: relative;
  background: rgba(255, 255, 255, 0.8);
}

.flow-step__num{
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 2.2em;
  height: 2.2em;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 100vh;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

/* 番号ごとの色 */
.flow-step:nth-of-type(1) .flow-step__num{
  background: #6A6402;
}

.flow-step:nth-of-type(2) .flow-step__num{
  background: #886A00;
}

.flow-step:nth-of-type(3) .flow-step__num{
  background: #783900;
}

.flow-step:nth-of-type(4) .flow-step__num{
  background: #8A1100;
}

.flow-step__body{
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.flow-step__body h4{
  margin: 0;
  padding: 0;
  color: #461900;
  line-height: 1.4;
  text-align:left;
}

.flow-step__body p{
  margin: 0;
  padding: 0;
  line-height: 1.6;
  text-align:left;
}

/* 縦ライン */
.flow-step__num::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  height:6em;
  background:#fff;
  opacity:0.7;
}

/* 最後だけ線を消す */
.flow-step:last-child .flow-step__num::after{
  display:none;
}

/* ===============================
   スマホ微調整
=============================== */

@media (max-width: 640px){
  .top_flow{
    padding: 3em 0;
  }

  .top_Finner{
    padding: 2em 0;
    background-size: cover;
  }

  .flow-step{
    padding: 0.9em;
    gap: 10px;
  }

  .flow-step__num{
    width: 2em;
    height: 2em;
    font-size: 0.95rem;
  }
}

/* =========================================
  ▼ 簡単・便利！3ステップ LINE査定
========================================= */

.top_line{
  width:100%;
  border-top:10px solid #06C755;

  background:
  linear-gradient(
    to bottom,
    #DAF8E6CC 0%,
    rgba(218,248,230,0) 200px
  );
}

.top_Linner{
  width:100%;
  max-width:800px;
  margin:0 auto;
  padding:3em 0.5em;
  box-sizing: border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}


/* タイトル */
.line-catch{
  position:relative;
  display:inline-block;
  margin: 0 0 -3em;
  padding: 0;
  color:#fff;
}

.line-catch img{
  display:block;
  max-width:150px;
  height:auto;
}

.line-catch span{
  position:absolute;
  top:45%;
  left:52%;
  transform:translate(-50%, -50%);
  white-space:nowrap;
}


.line-step-title{
  color:#189020;
  display:flex;
  align-items:center;
  font-size:1.5em;
}

.line-step-title span {
  font-size:3em;
  font-weight:bold;
  padding:0;
  color:#189020;

  -webkit-text-stroke:2px #fff;

  text-shadow:
  0 4px 0 rgba(0,0,0,.15),
  0 3px 5px rgba(0,0,0,.25);
}

.line-main-title {
  color:#06C755;
  font-size: 3em;
  margin: -1.7em 0 0;
  padding: 0;
}
.line-main-title span {
  font-size:1.3em;
}


/* =========================
   3ステップ
========================= */

.line-steps{
  width:100%;
  margin:2em auto 0.5em;
  padding:0;
  list-style:none;
  display:flex;
  overflow:visible;
  border: 1px solid #404638;
}

.line-steps li{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:bold;
  padding:1em 0;
  text-align:center;
  font-size:0.8em;
}

/* 幅 3:4:3 */
.line-steps li:nth-child(1){ flex:3; }
.line-steps li:nth-child(2){ flex:3.3; }
.line-steps li:nth-child(3){ flex:3; }

/* 色 */
.line-steps li:nth-child(1),
.line-steps li:nth-child(3){
  background:#06C755;
  z-index:1;
}

.line-steps li:nth-child(2){
  background:#404638;
  z-index:2;
}

/* 左の斜め */
.line-steps li:nth-child(2)::before{
  content:"";
  position:absolute;
  top:0;
  left:-30px;
  width:30px;
  height:100%;
  background:#404638;
  clip-path: polygon(100% 0, 20% 0, 100% 100%);
}

/* 右の斜め ＝ before と同じ形 */
.line-steps li:nth-child(2)::after{
  content:"";
  position:absolute;
  top:0;
  right:-30px;
  width:30px;
  height:100%;
  background:#404638;
  clip-path: polygon(100% 0, 20% 0, 100% 100%);
  transform: scaleX(-1) scaleY(-1);
}

/* =========================
   ステップ画像
========================= */

.line-images{
  display:flex;
  justify-content:space-between;
  gap:15px;
  width:100%;
}

.line-images img{
  width:30%;
  height:auto;
  display:block;
}


/* =========================
   メッセージボックス
========================= */

.line-message{
  width:400px;
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 1em;
  margin:5em 0 0;
  background:rgba(242,255,94,.7);
  border-top:3px solid #F4E08E;
  border-bottom:3px solid #F4E08E;
  box-sizing: border-box;
}

.line-message-text{
  flex:7;
  text-align:left;
}

.line-message-text span{
  color:#C3451B;
  font-weight:bold;
}

.line-message-img{
  flex:3;
}

.line-message-img img{
  width:100%;
}


/* 下の説明 */
.line-note{
  color:#461900;
  text-align:left;
  max-width:700px;
  margin:5em 0 1em;
}

.top_Linner .btn_line {
  width:50%;
  text-decoration: none;
  border-radius: 0.5em;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  border: 2px solid #fff;
}

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

@media (max-width:768px){
  .line-steps li:nth-child(1){ flex:3; }
  .line-steps li:nth-child(2){ flex:3; }
  .line-steps li:nth-child(3){ flex:3.3; }

.line-message{
  width:100%;
  }

.line-message-text,
.line-message-img{
  width:100%;
  }

.top_Linner .btn_line {
  width:100%;
  }
}

/* =========================================
  ▼ 全国各地から査定・買取（お客様の声）
========================================= */

.top_customer{
  width: 100%;
  border-top: 10px solid #09204A;

  background:
    url(../img/top/bg_customer.png) right center no-repeat,
    url(../img/top/bg_reason.jpg) repeat;

  background-size:
    500px auto,
    1000px auto;

  box-sizing: border-box;
}

.top_Cinner{
  max-width:1000px;
  margin:0 auto;
  padding:3em 0.5em;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  box-sizing: border-box;
}

/* タイトルは2列使用 */

.customer_title,
.customer_subtitle{
  grid-column:1 / -1;
  text-align:center;
  font-size: clamp(1.2em, 4.5vw, 1.6em);
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
	margin:0 auto;
  box-sizing:border-box;
}

.customer_title {
  display:flex;
  align-items:center;
  color:#461900;
  padding:0;
  
}
.customer_title img {
  max-width:250px;
  padding:0;
  margin:0 0.3em 0 0;
}
.customer_subtitle {
  background-color:#461900;
  color:#fff;
  width:100%;
  max-width:700px;
  padding:0.2em 0;
  margin-bottom:2em;
}

/* =========================
   customerbox
========================= */
.customer_info{
  padding: 0;
  margin:0;
}

.customerbox{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  background-color: #fff;
  padding: 0.5em;
  box-sizing: border-box;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .15);
}

.customerbox_head{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.customerbox_img img{
  width:100%;
  height:auto;
  display:block;
}
.customer_attr {
  margin:1em 0 0;
  padding:0;
}

.customerbox h5 {
  font-size:1.2em;
  color:#461900;
  margin:1em 0;
  padding:0;
}

/* =========================
   タグ
========================= */

.customer_tags{
  display:flex;
  gap:5px;
  padding:0;
  margin:0;
  list-style:none;
}

.customer_tags li{
  color:#fff;
  padding:0.1em 1em;
  font-size:0.8em;
}

.customer_tags li.line{
  background:#06C755;
}

.customer_tags li.bring{
  background:#09204A;
}

.customer_tags li.delivery{
  background:#CA0201;
}

.customer_tags li.null{
  background:#A8A8A8;
}


/* =========================
   金額
========================= */

.customerbox dl{
  display:flex;
  gap:10px;
  margin:0;
}

.customerbox dt{
  font-weight:bold;
}

.customerbox dd{
  margin:0;
  color:#461900;
}

.customerbox dl:first-of-type dt{
  color:#06C755;
  font-size:0.9em;
}
.customerbox dl:first-of-type dd{
  font-size:0.9em;
}

.customerbox dl:last-of-type dt{
  color:#CD4C3B;
}

/* =========================
   コメント
========================= */
/* 吹き出し共通 */
.customer_voice{
  position: relative;
  background: rgba(242,255,94,0.8);
  padding: 0;
  margin:0.2em 0;
  line-height: 1.5;
  box-sizing: border-box;
  grid-column: 1 / -1;
}


/* 左アイコン（before） */
.Pvoice01::before,
.Pvoice03::before{
  content: "";
  position: absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  width: 90px;
  height: 90px;
  background-size: contain;
  background-repeat: no-repeat;
}
.Pvoice01,
.Pvoice03 {
  padding:0.5em 0.5em 0.5em 100px;
  border-radius: 100vh 0 0 100vh;
}

/* 個別画像 */

.Pvoice01::before{
  background-image: url("../img/top/icon_customer01.png");
}

.Pvoice03::before{
  background-image: url("../img/top/icon_customer03.png");
}


/* 右アイコン（after） */
.Pvoice02::after,
.Pvoice04::after{
  content: "";
  position: absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
  width: 90px;
  height: 90px;
  background-size: contain;
  background-repeat: no-repeat;
}

.Pvoice02,
.Pvoice04 {
  padding:0.5em 100px 0.5em 0.5em;
  border-radius:  0 100vh 100vh 0;
}

/* 個別画像 */

.Pvoice02::after{
  background-image: url("../img/top/icon_customer02.png");
}

.Pvoice04::after{
  background-image: url("../img/top/icon_customer04.png");
}

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

@media (max-width:768px){
  .top_customer {
    background-position:
    right top,
    left top;
    background-size:
    375px auto,
    1000px auto;
  }
  
  .customer_info {
    margin: 3em 0 0;
  }

.top_Cinner{
  grid-template-columns:1fr;
  }
  .customer_title img {
    max-width: 180px;
  }
  .customerbox {
    grid-template-columns: 6fr 4fr;
  }
  .customer_voice{
    font-size:0.9em;
  }
}

/* =========================================
  ▼ よくいただくご質問
========================================= */
.top_faq{
  width: 100%;
  background: url(../img/top/bg_solution.png) repeat;
  background-size: 100px auto;
}

.top_FAinner{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 3em 0.5em;
  box-sizing: border-box;
}

.faq_grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin-top: 2em;
  align-items: start;
}

.faq_item{
  background: #fff;
  border: 1px solid #DED4BE;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
  transition: box-shadow .35s ease, transform .35s ease;
  align-self: start;
}

.faq_item:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,.1);
  transform: translateY(-2px);
}

.faq_item.is-open{
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* 質問ボタン */
.faq_question{
  width: 100%;
  min-height:80px;
  border: none;
  background: transparent;
  padding: 0.8em 2em 0.8em 0.8em;
  text-align: left;
  cursor: pointer;
  position: relative;
  color: #461900;
  display: block;
  font: inherit;
}

/* 左アイコン＋テキスト */
.faq_qtext{
  position: relative;
  display: block;
  line-height: 1.5;
  font-weight: 700;
  padding-left: 2.2em;
}

.faq_qtext::before{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 1.5em;
  height: 1.5em;
  background: url("../img/common/icon_question.png") center / contain no-repeat;
}

/* 右端中央の開閉アイコン */
.faq_question::after{
  content: "\e136";
  font-family: "Phosphor";
  position: absolute;
  top: 50%;
  right: 0.5em;
  transform: translateY(-50%);
  color: #461900;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform .35s ease, opacity .35s ease;
}

.faq_item.is-open .faq_question::after{
  content: "\e13c";
}

/* 回答ラッパー */
.faq_answer_wrap{
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s cubic-bezier(.22,1,.36,1);
}

/* 回答本体 */
.faq_answer{
  padding: 0 1em 1.2em;
  font-size:0.9em;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
}

.faq_item.is-open .faq_answer{
  opacity: 1;
  transform: translateY(0);
}

.faq_answer p{
  margin: 0;
  color: #461900;
  line-height: 1.9;
}

/* スマホ */
@media (max-width: 768px){
  .faq_grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ===============================
   アクセス
=============================== */

.top_access{
  width: 100%;
  background: #fff;
}

.top_Ainner{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 3em 0.5em;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.access-label,
.access-logo,
.access-address,
.top_Ainner h4 {
  color:#461900;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}

.access-label,
.access-logo {
  font-size:1.2em;
  letter-spacing:0.1em;
  margin:0;
  padding:0;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}

.top_Ainner h4,
.top_Ainner h5 {
  padding:0;
  margin:0 0 0.5em;
}


.access-logo img{
  display: block;
  max-width: 300px;
  height: auto;
}

.accessbox{
  width: 100%;
  margin-top: 2em;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.accessbox_col{
  width: 100%;
  box-sizing: border-box;
}

.accessbox_col--info{
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

.accessbox_col--image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.accessbox_col--image img{
  width: 100%;
  height: auto;
  display: block;
}

/* 来店予約案内 */
.access-contact-lead{
  margin: 0 auto;
  padding: 0.8em 1em;
  max-width:90%;
  background: #BF0000;
  color: #fff;
  text-align: center;
  font-weight: 700;
  box-sizing:border-box;
}

/* 電話ボタン */
.access-contact-btn{
  display: grid;
  grid-template-columns: 3fr 7fr;
  align-items: center;
  padding:1.5em 0.5em;
  text-decoration: none;
  background: #faebc5;
  color: #461900;
  box-sizing:border-box;
}

.access-contact-btn p{
  margin: 0;
  padding: 0.5em;
  color: #461900;
  box-sizing: border-box;
}

.access-contact-btn p:first-child{
  text-align: center;
  line-height: 1.5;
}
.access-contact-btn p span{
  font-size:0.8em;
}

.access-contact-btn p:last-child{
  text-align: center;
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.2;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}

.top_Ainner .btn_mail {
  text-decoration: none;
  border-radius: 0.5em;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  border: 2px solid #fff;
  margin:1.5em auto 0;
}

/* スマホ */
@media (max-width: 768px){
  .accessbox{
    grid-template-columns: 1fr;
  }

  .access-contact-btn{
    grid-template-columns: 4fr 6fr;
	padding: 1em 0.5em;
  }

  .access-contact-btn p:first-child{
    border-right: none;
  }

  .access-contact-btn p:last-child{
    font-size: 1.5rem;
  }
  
  .top_Ainner .btn_mail {
  width:100%;
  }
}



/* 東京商工リサーチバナーエリア */
.top_Bninner{
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 0.5em 5em;
  box-sizing: border-box;
}
.top_Bninner img{
  width: 100%;
  height:auto;
  margin: 0 0 1em;
  padding: 0;
}



/* =========================================
  ▼ 鑑定士について / 所属する組合・協会
========================================= */

.top_appraiser{
  width: 100%;
  background: linear-gradient(to bottom, #F6F5EE, #FAFAFA);
}

.top_APinner{
  max-width: 1000px;
  margin: 0 auto;
  padding: 3em 1em;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(../img/top/bg_Cinner.png), url(../img/top/bg_Cinner02.png), url(../img/top/bg_appraiser01.png), url(../img/top/bg_appraiser02.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, left center, right bottom;
  background-size: 300px auto, 400px auto, 400px auto, 350px auto;
}

.top_APinner h3.heading-gradient {
    color: #461900;
    -webkit-text-fill-color: #461900;
    -webkit-background-clip: initial;
    font-size: clamp(1.2em, 4.5vw, 2em);
    margin: 2em 0 0.5em;
    background: none;
    box-shadow: none;
    filter: none;
}

.top_APinner h5{
  margin: 0 0 2em;
  color: #461900;
  font-size: 1em;
}

/* 画像 */
.top_APinner img{
  width:100%;
  max-width: 500px;
  height: auto;
  display: block;
  border:1px solid #ddd;
}
.appraiser_name {
  paddin:0;
  margin:0;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}
.appraiser_name span {
  font-size:0.8em;
}

/* ===============================
   鑑定士紹介
=============================== */

.appraiser_info{
  width: 100%;
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 30px;
  align-items: center;
  margin:2em 0;
}

.appraiser_info p{
  margin: 0 0 1em;
  line-height: 1.9;
  color: #461900;
}

/* ===============================
   所属組合
=============================== */

.appraiser_note{
  width: 100%;
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 30px;
  align-items: start;
}



.appraiser_note ul{
  margin: 0;
  padding-left: 1.2em;
}

.appraiser_note li{
  margin-bottom: .6em;
  line-height: 1.7;
  color: #461900;
  font-size:0.8em;
}

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

@media (max-width: 768px){
  .top_APinner {
    background-size: 40% auto, 40% auto, 60% auto, 50% auto;
	background-position: top left, top right, left 68%, right bottom;
  }
  .appraiser_info{
    grid-template-columns: 1fr;
  }

  .appraiser_note{
    grid-template-columns: 1fr;
  }

}


/* =========================================
  ▼ コラム
  「サラリーマンが買える “刀屋さん”を目指して」
========================================= */

.top_column{
  width: 100%;
  background: #fff;
  padding:5em 1em;
  background: url(../img/top/bg_item.png) repeat;
  background-size: 100px auto;
  box-sizing:border-box;
}

.top_COinner{
  max-width: 900px;
  margin: 0 auto;
  padding: 3em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  background-color:#fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing:border-box;
}

.top_COinner h3.heading-gradient {
    color: #461900;
    -webkit-text-fill-color: #461900;
    -webkit-background-clip: initial;
    font-size: clamp(1.2em, 4.5vw, 2em);
    margin: 0 0 1em;
    background: none;
    box-shadow: none;
    filter: none;
}

/* コラムタイトル */
.column_title{
  margin: 0;
  padding:0;
  font-size: 0.9rem;
  letter-spacing: .2em;
  color: #736C68;
}

/* ===============================
   コラム本文
=============================== */

.columnbox{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

/* 画像 */
.columnbox img{
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト */
.columnbox p{
  margin: 0 0 1em;
  line-height: 1.9;
  color: #461900;
}
.column_whats{
  margin: 2em 0 1em;
  padding:0;
  letter-spacing: .2em;
  color: #461900;
}

.top_COinner .listbox {
    margin: 0;
}

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

@media (max-width:768px){
  .top_COinner {
    padding:2em;
  }
  
  .columnbox{
    grid-template-columns: 1fr;
    gap: 20px;
  }

}



/* =========================================
  ▼ お知らせ・メディア出演
========================================= */
.top_news{
  width: 100%;
  background-color:#FFF8F2;
}

.top_Ninner{
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 3em 0.5em;
  box-sizing: border-box;
}

/* 一覧全体は縦並び */
.news_cards{
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top:3em;
}

/* 各記事は2列 */
.news_card{
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 24px;
  align-items: start;

  padding: 2em 2em 0;
  box-sizing: border-box;
  border-top: 1px dashed #D2B567;
}
.news_cards .news_card:last-child{
  border-bottom: 1px dashed #D2B567;
  padding-bottom:2em;
}

/* 画像 */
.news_card_img{
  display: block;
}

.news_card_img img{
  width: 100%;
  height: auto;
  display: block;
}

/* 右側テキスト */
.news_card_body{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news_card_date{
  margin: 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}

.news_card_title{
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.7;
}

.news_card_title a{
  color: #461900;
  text-decoration: none;
}

.news_card_title a:hover{
  text-decoration: underline;
}

.news_card_excerpt{
  margin: 0;
  color: #461900;
  line-height: 1.9;
  font-size: 0.95rem;
}

/* スマホ */
@media (max-width: 768px){
  .news_card{
    grid-template-columns: 3fr 7fr;
	align-items: center;
	padding: 1em 1em 0;
  }
  .news_cards .news_card:last-child{
  padding-bottom:1em;
  }

  .news_card_title{
    font-size: 1rem;
  }
}






/* =========================================
  ▼ スマホ：縦並び＆幅100%
========================================= */
@media (max-width: 768px){
  .no1_seal{
    flex-direction: column;
    align-items: center;
  }

  .no1_seal .no1_Sinner{
    flex: none;
    width: 100%;
  }

  .no1_seal .no1_Sinner img{
    width: 56px;           /* 任意：スマホは固定の方が安定 */
    max-width: none;
  }
}

@media (max-width: 768px){
  .topGreeting,
  .topNo1{
    flex-direction: column; /* ← 縦並び */
  }
  .topGreeting .topGbox02{ display:flex; gap:1em; }
  .topGbox02 .topGinner01{ flex: 4; box-sizing:border-box; }
  .topGbox02 .topGinner02{ flex: 6;}
  .topGreeting h6 {
    margin: 0 0 0.3em;
  }
  .contents_inner02 h3.heading-gradient {
    margin: 1em 0 2em;
  }
.contents_inner02 p{
    text-align:left;
  }
  .topNbox02 p {
  text-align:center;
  }
  
  /* 幅制御をリセット（念のため） */
  .topGreeting .topGbox01,
  .topGreeting .topGbox02,
  .topNo1 .topNbox01,
  .topNo1 .topNbox02{
    flex: none;
    width: 100%;
  }
  .contents_inner {
    background: url("../img/top/bg_Cinner.png") top left  / 50% auto no-repeat;
  }
  .contents_inner02 {
    background: url("../img/top/bg_Cinner02.png") top right  / 50% auto no-repeat;
  }
}