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

section {
  margin:0;
  padding:0 1em;
  box-sizing:border-box;
}

h3.heading-gradient {
  font-size: clamp(1em, 5.8vw, 3.5em);
  font-weight: bold;
  color: #051e48;
  margin: 1em 0 0.5em;
  padding: 0;
  text-align: center;
  line-height: 1.3;
}

.top_problem h3.heading-gradient {
  color: #fff;
}

/* 各行が途中で折り返さないようにする */
h3.heading-gradient .line {
  display: block;
  white-space: nowrap;
}

h3.heading-gradient .gold {
  color: #d4af37;
}

h3.heading-gradient .mlr {
  display: inline-block;
  margin: 0 0.25em;
}
h3.heading-gradient .fs {
  display:block;
  font-size:60%;
  color:#777;
  margin:0 0 0.5em;
}


h6 {
  font-size: clamp(1.3em, 4.5vw, 2.1em);
  font-weight: bold;
  color: #051e48;
  margin: 1em 0;
  padding: 0;
  text-align: center;
  line-height: 1.6;
}
h6 span {
  color: #d4af37;
  font-size:130%;
}

@media screen and (max-width: 768px) {
  h6 {
  text-align: left;
  margin: 1em 1.5em;
  }
}

/********************************************
  ▼ メインビジュアル
*********************************************/
/* メインスライダー */
.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;     /* トリミング */
  }
}

/* ==========================
   説明会・資料DLボタン用
========================== */
/* ラッパー */
.main_btn {
  width:100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  gap: 1em;
  box-sizing:border-box;
}

/* スマホ：縦並び */
@media (max-width: 768px) {
  .main_btn {
    flex-direction: column;
  }
  li.display-sp .main_btn {
    padding:0 1em;
  }
}

/* ボタン共通 */
.main_btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  flex: 1;
  padding: 0.2em 1.2em;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  box-sizing: border-box;
  position:relative;
  letter-spacing: 0.2em;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .15);
}

.main_btn a::after {
  content: "\e06c";
  font-family: "Phosphor";
  position: absolute;
  right: 0.3em;
  top: 50%;
  transform: translateY(-50%);
}

.main_btn a:hover {
  opacity:1;
}

/* btn01 */
.main_btn .btn01 {
  background-color: #3a81c3;
  color: #fff;
  border: 2px solid #3a81c3;
}
.main_btn a.btn01:hover {
  background-color: #fff;
  color: #2d3a4d;
  border: 2px solid #2d3a4d;
}

/* btn02 */
.main_btn .btn02 {
  background-color: red;
  color: #fff;
  border: 2px solid red;
}
.main_btn a.btn02:hover {
  background-color: #fff;
  color: #2d3a4d;
  border: 2px solid #2d3a4d;
}




/* ==========================
   懸念セクション用
========================== */

/* 外側ラッパー：縦並び */
.concern-list {
  display: flex;
  flex-direction: column;
  gap: 1em;
  max-width: 750px;
  margin: 3em auto;
  padding: 0;
}

/* 各行：p・h4 横並び */
.concern-item {
  display: flex;
  align-items: center;
  gap: 1em;
  border:2px solid #2d3a4d;
  border-radius:100vh;
  padding:1em 1.5em 1em 1em;
}

/* アイコン側 */
.concern-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin: 0;
  background-color: #2d3a4d;
  color: #fff;
  font-size: 200%;
  border-radius: 50%;
  padding:0.3em;
}

/* テキスト側 */
.concern-text {
  margin: 0;
  font-weight: bold;
  line-height: 1.6;
  color: #051e48;
}

.appeal-block {
  max-width:1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #2d3a4d;
  padding: 2.5em 1.5em;
  margin:0 auto 5em;
  box-sizing: border-box;
  text-align: center;
}

/* このセクション内のh3にのみ適用 */
.appeal-block h3 {
  color: #d4af37;
  margin: 0 0 0.8em;
  font-size: clamp(1.2em, 4.5vw, 2em);
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}

.appeal-block p {
  color: #fff;
  line-height: 1.8;
  margin: 0;
}

/* ▼ スマホ調整 */
@media screen and (max-width: 768px) {
	.appeal-block p {
	  text-align:left;
	  }
	  .appeal-block {
	  padding: 1.5em;
	  }
}


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

.p-record p{
  margin:1em 0;
  padding:0 0.5em;
}


/* タイトル

.p-record h3{
display: inline-block;
position:relative;
width:100%;
max-width:500px;
text-align:center;
color:#1f3a5f;
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;
} */

.glass-heading{
  position: relative;
  display: inline-block;
  margin:3em 0 0.5em;
  padding: 0.5em 2em;
  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;
  text-align: center;

  color: #1f3a5f;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.55) 0%,
    rgba(210,240,248,0.5) 40%,
    rgba(173,223,235,0.35) 100%
  );
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 5px;

  box-shadow:
    0 10px 30px rgba(33,165,182,0.18),
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(255,255,255,0.2);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  overflow: hidden;
}

/* テキストを前面に */
.glass-heading span{
  position: relative;
  z-index: 2;
}

/* 上部の光 */
.glass-heading::before{
  content: "";
  position: absolute;
  width: 80%;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.55)
  );
  transform: rotate(-45deg);
  pointer-events: none;
  z-index: 1;
}

/* 斜めの反射ライン（メイン） */
.glass-heading::after{
  content: "";
  position: absolute;
  top: -50%;
  left: -30%;
  width: 60%;
  height: 200%;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0) 70%
  );

  transform: rotate(15deg);
  opacity: 0.6;
  pointer-events: none;
}

.btn_list {
  position: relative;
  background:#21a5b6;
  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 {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.post-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

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

.post-cat{
background:#1f3a5f;
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:#1f3a5f;
}

/* ボタン */

.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:1024px){
  .wp-post-list li{
    flex:0 0 25%;
  }
}

/* スマホ */
@media (max-width:768px){
  .wp-post-list li{
    flex:0 0 80%;
  }
}

/********************************************
  ▼ トップメインボックス
*********************************************/

.main_up {
  width:100%;
  max-width:1200px;
  height:auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2em;
  margin: 0 auto;
  padding: 0;
  text-align:center;
  box-sizing:border-box;
}

/* スマホ */
@media (max-width:768px){
  .main_up{
    padding:2em;
  }
  p.catch {
    text-align:left;
  }
}

/********************************************
  ▼ トップ4点ボックス
*********************************************/
.box4{
  width:100%;
  margin:0 auto;
  padding:0 0 5em;
  box-sizing:border-box;
}

.box4-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.box4-inner > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 calc((100% - 6px) / 4);
  background: #2d3a4d;
  overflow: hidden;
  padding: 1em 0.5em;
  box-sizing: border-box;
  gap:1em;
}


/* 見出し */
.box4-inner h4 {
  margin: 0;
  padding: 0;
  color: #d4af37;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 110%;
  line-height: 1.4;
  text-align: center;
  box-sizing: border-box;
}

/* アイコン画像 */
.box4-inner h4 i {
  display: block;
  font-size:300%;
}

/* 本文 */
.box4-inner p {
  margin: 0;
  padding: 0;
  color: #fff;
  line-height: 1.5;
  flex: 1;
  text-align: justify;
  word-break: break-all;
  text-justify: inter-character;
  box-sizing: border-box;
}

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

/* スマホ：2カラム */
@media (max-width: 768px) {
  .box4-inner > div {
    flex: 1 1 calc((100% - 2px) / 2);
  }
  .box4-inner h4 {
    font-size:95%;
  }
  .box4-inner p {
    font-size:80%;
  }
}

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

/* ===============================
   初めての方へ
================================ */
.top_problem {
  width: 100%;
  height: auto;
  background: linear-gradient(to bottom, #1f3a5f 0%, #5f6f84 100%) top / 100% 100% 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_problem p{
  color:#fff;
}

/* 左アイコン */
.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:768px){
  .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: #1f3a5f;
  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: #1f3a5f;
  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:24%;
}
.top_Pinner p.txt03{
  top:53%;
  right:35%;
}


@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:17%;
  }
  .top_problem p{
  text-align:left;
  }
}
/* ===============================
   30日間のプロ養成研修＆安心の環境
================================ */
.top_solution{
  width:100%;
  background: url(../img/top/bg_solution.jpg) repeat center center, #cfd0d1;
  background-size: 2000px auto;
}

.top_Sinner{
  max-width:1200px;
  margin:0 auto;
  padding:3em 0 5em;
  box-sizing:border-box;
  text-align:center;
}

/* 外側：2列横並び */
.top_Sbox {
  display: flex;
  gap: 2em;
  align-items: stretch;
  box-sizing: border-box;
  margin:3em 0;
}

/* 左カラム：カード2枚を縦並び */
.top_Sbox_inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

/* 右カラム */
.top_Sbox_main {
  flex: 1;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius:1em;
  background-color:#fff;
  overflow: hidden;
}

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

/* カード共通：ボーダーあり・縦並び */
.top_Sbox_card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius:1em;
  box-sizing: border-box;
  overflow: hidden;
  height: 100%; /* 親の高さに追従 */
  background-color:#fff;
}

/* 画像：左右paddingなし・幅100% */
.top_Sbox_card img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: auto; /* 画像を下に寄せる */
}

/* h4・p：左右paddingあり */
.top_Sbox_card h4 {
  margin: 0;
  padding: 1em 0.5em;
  font-size: 1rem;
  line-height: 1.5;
  color: #1f3a5f;
  font-size: clamp(1em, 4.5vw, 1.5em);
}

.top_Sbox_card p,
.top_Sbox_main p {
  flex: 1;
  margin: 0;
  padding: 0 2em 1em;
  line-height: 1.7;
  text-align:left;
}

.top_Sbox_main h3 {
  font-size: clamp(2em, 5.8vw, 5.5em);
  font-weight: bold;
  color: #051e48;
  margin: 1em 0 0.5em;
  padding: 0;
  text-align: center;
  line-height: 1.3;
}

.top_Sbox_main h3 .gold {
    color: #d4af37;
}

.top_Sbox_main h6 {
  margin: 0;
  padding: 0 0.5em 1.5em;
  text-align:center;
  font-size: clamp(1em, 4.5vw, 1.5em);
  line-height: 1.5;
  color: #051e48;
}

@media (min-width: 769px) {
  .top_Sbox_card img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    object-position: top; /* トリミング基準位置（任意で調整） */
  }
}

/* スマホ：縦並び */
@media (max-width: 768px) {
  .top_Sbox {
    flex-direction: column;
  }
}


/* =========================================
  ▼ なぜクロスリフォームか？
========================================= */
/* contents_inner 内で水平中央 */
.contents_inner {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding: 3em 0 5em;
  text-align: center;
  box-sizing: border-box;
}

.topWhat {
  display: flex;
  flex-direction: column;
  gap: 3em;
}

/* 各ペア行 */
.topWhat-row {
  display: flex;
  align-items: center;
  background: #2d3a4d;
  gap:2em;
  padding:2em;
}

/* 奇数行：画像左・テキスト右（デフォルト） */
.topWhat-row:nth-child(odd) .topWbox01 { order: 1; }
.topWhat-row:nth-child(odd) .topWbox02 { order: 2; }

/* 偶数行：テキスト左・画像右 */
.topWhat-row:nth-child(even) .topWbox01 { order: 2; }
.topWhat-row:nth-child(even) .topWbox02 { order: 1; }

/* 幅比率 4:6 */
.topWhat .topWbox01 {
  flex: 4;
  box-sizing: border-box;
}
.topWhat .topWbox02 {
  flex: 6;
  text-align: left;
  box-sizing: border-box;
}

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

/* スマホ：縦並び */
@media (max-width: 768px) {
  .topWhat-row {
    flex-direction: column;
  }
  /* スマホでは常に画像が上 */
  .topWhat-row .topWbox01 { order: 1 !important; }
  .topWhat-row .topWbox02 { order: 2 !important; }
}

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

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


.topWhat-row p{
  line-height:1.8;
  color:#fff;
  text-align: justify;
  word-break: break-all;
  text-justify: inter-character;
}
.topWbox01 img{
  width:100%;
  height:auto;
}


/* =========================================
  ▼ 買取品目
========================================= */
.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:#1f3a5f;
  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: #1f3a5f;
  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;
  }
}

/* =========================================
  ▼ あなたの経験に合わせて、選べる３プラン
========================================= */
.top_reason{
  width: 100%;
  margin: 5em 0;
  box-sizing: border-box;
  text-align:center;
}
.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:#1f3a5f;
  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: #1f3a5f;
}

.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: 1200px;
  margin: 3em auto;
  padding: 0;
  box-sizing: border-box;

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

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

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

/* PC：1つ目の右側にボーダー */
.top_Rinner > div:nth-child(1) {
  border-right: 1px solid #555;
}

/* PC：2つ目の右側にボーダー */
.top_Rinner > div:nth-child(2) {
  border-right: 1px solid #555;
}


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

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

  background: linear-gradient(to bottom, #21a5b6, #1f3a5f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.top_Rinner h4.bg,
.top_Rinner h4.bgc{
  margin: 0 auto 1em;
  padding: 0.3em 1.3em;
  text-align: center;
  font-size: 100%;
  font-weight: 700;
  line-height: 1;
  color:#333;
  background: #ddd;
  -webkit-text-fill-color: unset;
  border-radius:100vh;
  width: fit-content;
}
.top_Rinner h4.bgc{
  color:#fff;
  background: #e83f05;
}


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

/* メイン見出し */
.top_Rinner h6{
  margin: 0 0 1em;
  padding: 0;
  text-align: center;
  color: #000;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.5;
}
.top_Rinner h6 span{
  font-size:2em;
  color:#000;
  display:inline-block;
  margin:0 0.2em;
}

.check-list {
  list-style: none;
  margin: 2em 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.check-list li {
  position: relative;
  padding-left: 1.5em;
  line-height: 1.6;
  text-align:left;
}

.check-list li::before {
  content: "\e184";
  font-family: "Phosphor-Fill";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #2d3a4d;
}

/* ===============================
  画像・本文
=============================== */
.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;
  color:#333;
}
.top_Rinner p.ms{
  text-align:center;
}

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

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

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

  .top_Rinner p{
    font-size: 0.85em;
  }
  
   /* PC用の右ボーダーを解除 */
  .top_Rinner > div:nth-child(1),
  .top_Rinner > div:nth-child(2) {
    border-right: none;
  }

  /* 2つ目の上下にボーダー */
  .top_Rinner > div:nth-child(2) {
    border-top: 1px solid #555;
    border-bottom: 1px solid #555;
  }
}

/* ===============================
   最短3ヶ月でプロの職人として独立
=============================== */
.top_flow{
  width: 100%;
  margin: 0;
  padding: 5em 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

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

.top_Finner{
  width: 100%;
  max-width: 800px;
  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_flow01.jpg") center top / cover no-repeat;
}

.top_flow h3.heading-gradient {
    margin: 0 0 1em;
}

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

.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;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
}

.flow-title span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin:0 0.08em 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: #1f3a5f;
}

.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: #d4c439;
}

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

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

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

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

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

.flow-step__body h4{
  margin: 0;
  padding: 0;
  color: #1f3a5f;
  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:8em;
  background:#fff;
  opacity:0.7;
}

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

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

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

  .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;
  }
  
  .flow-step__num::after{
  height:13em;
}
}

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

.top_line{
  width:100%;
  border-top:10px solid #1f3a5f;

  background:#fff;
}

.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 {
  font-size: clamp(2em, 4.5vw, 3.5em);
  font-weight: bold;
  background: linear-gradient(to bottom, #284266, #1f3a5f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4));
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Yu Mincho", "游明朝", "MS PMincho", serif;
}
.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.5; }
.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:-40px;
  width:40px;
  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:-40px;
  width:40px;
  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:#1f3a5f;
  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-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.jpg) right center / cover no-repeat;
  overflow: hidden;
  box-sizing: border-box;
}

.top_Cinner {
  max-width: 1000px;
  margin: 2em auto;
  padding: 3em;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.4); /* 半透明の白ベース */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari対応 */
  border-radius: 12px; /* 任意：角丸 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 任意：縁取りで質感アップ */
}

.top_Cinner p {
  width:100%;
  max-width: 500px;
  display: block;
  margin:0 auto;
}

/* タイトルは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:#1f3a5f;
  padding:0;
  
}
.customer_title img {
  max-width:250px;
  padding:0;
  margin:0 0.3em 0 0;
}
.customer_subtitle {
  background-color:#1f3a5f;
  color:#fff;
  width:100%;
  max-width:700px;
  padding:0.2em 0;
}
.checkBox {
  width:100%;
  max-width: 500px;
  height:auto;
  margin:0 auto;
}

/* =========================
   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:0;
  padding:0;
}

.customerbox h5 {
  font-size:1.2em;
  color:#1f3a5f;
  margin: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;
}

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

@media (max-width:768px){
  
  .customer_info {
    margin: 3em 0 0;
  }

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

/* =========================================
  ▼ よくいただくご質問
========================================= */
.top_faq{
  width: 100%;
}

.top_FAinner{
  width: 100%;
  max-width: 1200px;
  margin: 5em auto;
  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 #21a5b6;
  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: #1f3a5f;
  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: #1f3a5f;
  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: #1f3a5f;
  line-height: 1.9;
}
.faq_answer p span{
  color: red;
  font-weight:bold;
}

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


/* ===============================
   バナーエリア
=============================== */

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

.top_Binner{
  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;
}

.banner-label,
.banner-logo,
.top_Binner h4 {
  color:#1f3a5f;
  font-family:
    "Hiragino Mincho ProN",
    "ヒラギノ明朝 ProN",
    "Yu Mincho",
    "游明朝",
    "MS PMincho",
    serif;
}

.banner-label,
.banner-logo {
  font-size:1.2em;
  letter-spacing:0.1em;
  margin:0;
  padding:0;
}

.top_Binner h4 {
  position: relative;
  margin: 3em 0 0;
  padding-bottom: 0.5em;
  color:#1f3a5f;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* 下線（細いライン） */
.top_Binner h4::after {
  content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 2px;
    background: linear-gradient(to right, transparent, #21a5b6, #a1e0e8, #21a5b6, transparent);
  );
}


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

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

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

.bannerbox_col{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
}

.bannerbox_col a:hover{
  opacity:0.7;
}

.bannerbox_col img{
  width: 100%;
  height: auto;
  display: block;
  border:1px solid #ccc;
  border-bottom:none;
  box-sizing:border-box;
}

.bannerbox_col p{
  padding:0.2em 0;
  margin:0;
  background:#1f3a5f;
  color:#fff;
}


/* スマホ */
@media (max-width: 768px){
  .bannerbox{
    grid-template-columns: 1fr;
  }
  .banner-txt {
    text-align:left;
  }
}


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

.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: #1f3a5f;
    -webkit-text-fill-color: #1f3a5f;
    -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: #1f3a5f;
  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: #1f3a5f;
}

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

.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: #1f3a5f;
  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_news{
  width: 100%;
}

.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;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.news_card_img img{
  width:100%;
  height:100%;
  object-fit: cover;
  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: #1f3a5f;
  text-decoration: none;
}

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

.news_card_excerpt{
  margin: 0;
  color: #1f3a5f;
  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){
  .topWhat,
  .topNo1{
    flex-direction: column; /* ← 縦並び */
  }
  .topWhat .topGbox02{ display:flex; flex-direction: column; gap:1em; }
  .topGbox02 .topGinner01{ flex: 4; box-sizing:border-box; }
  .topGbox02 .topGinner02{ flex: 6;}
  .topWhat 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;
  } */
  
  /* 幅制御をリセット（念のため） */
  .topWhat .topWbox01,
  .topWhat .topGbox02,
  .topNo1 .topNbox01,
  .topNo1 .topNbox02{
    flex: none;
    width: 100%;
  }
  .contents_inner02 {
    background: url("../img/top/bg_Cinner02.png") top right  / 50% auto no-repeat;
  }
}





.dl-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.dl-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 2em;
  border-radius: 8px;
  z-index: 101;
  text-align: center;
  min-width: 280px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.dl-modal_inner p {
  margin: 0 0 1.5em;
  font-weight: bold;
  color: #1f3a5f;
}
.dl-modal_btns {
  display: flex;
  gap: 1em;
  justify-content: center;
}
/* 表示状態 */
.dl-overlay.is-open,
.dl-modal.is-open {
  display: block;
}