/* =========================================================
   モバイルファースト構成
   ベース(無条件) = SP(〜568px)
   min-width: 569px  = 〜960px 相当
   min-width: 961px  = 〜1024px 相当
   min-width: 1025px = 1025px〜(PC)
   ========================================================= */

#sub_main_service .sub_main_content::before {
  background: url("../img/objective/objective_top.jpg") no-repeat top right;
  background-size: cover;
}

#intro .intro_box .ttl {
  font-size: 32px;
}

.flow_list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flow_list li .bg_gray {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.flow_list li .bg_gray .txt_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 15px 5px 13px;
}

.flow_list li .ttl_flow {
  font-size: 19px;
  line-height: 1.55;
}

.sell_points {
  gap: 20px 0;
}

.sell_points li {
  width: 100%;
  position: relative;
}

.sell_points li::before {
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.sell_points li:nth-child(1)::before {
  background: url("../img/common/num_circle_lightblue01.svg") no-repeat;
  background-size: contain;
}

.sell_points li:nth-child(2)::before {
  background: url("../img/common/num_circle_lightblue02.svg") no-repeat;
  background-size: contain;
}

.sell_points li:nth-child(3)::before {
  background: url("../img/common/num_circle_lightblue03.svg") no-repeat;
  background-size: contain;
}

.sell_points li:nth-child(4)::before {
  background: url("../img/common/num_circle_lightblue04.svg") no-repeat;
  background-size: contain;
}

.sell_points .txt_box {
  padding: 20px 38px 30px;
}

.sell_points .txt_box .ttl {
  font-size: 26px;
  margin-bottom: 10px;
}

#purchase_list .purchase_items li {
  padding: 0;
}

@media screen and (min-width: 569px) {
  .flow_list li .bg_gray .txt_box {
    padding: 20px 5px 15px;
  }
  .flow_list li .ttl_flow {
    font-size: 16px;
    line-height: 1.5;
  }
  .sell_points {
    gap: 40px 0;
  }
  .sell_points li {
    width: 48.2%;
  }
  .sell_points li::before {
    top: 15px;
    left: 15px;
  }
  #purchase_list .purchase_items li {
    padding-bottom: 15px;
  }
}

@media screen and (min-width: 961px) {
  .flow_list li .bg_gray .txt_box {
    padding: 25px 10px 20px;
  }
  .flow_list li .ttl_flow {
    font-size: 19px;
  }
  .sell_points li::before {
    width: 80px;
    height: 80px;
  }
}

@media screen and (min-width: 1025px) {
  .flow_list li .bg_gray .txt_box {
    padding: 35px 25px 30px;
  }
  /* objective.css自体はこの幅で.ttl_flowのfont-sizeを指定していないため、
     common.css側のカスケード値(.flow_list li .ttl_flow の min-width:961相当、21px)に戻す */
  .flow_list li .ttl_flow {
    font-size: 21px;
  }
  .sell_points .txt_box {
    padding: 30px 50px 42px;
  }
  .sell_points .txt_box .ttl {
    font-size: 30px;
    margin-bottom: 15px;
  }
}

/* 詳細度の罠: #intro .intro_box .half_box .ttl は汎用の #intro .intro_box .ttl より詳細度が高く、
   小さい画面向けメディアクエリ内だけで上書きするための記述のため、min-width へ反転せず元のまま維持 */
@media screen and (max-width: 1024px) {
  #intro .intro_box .half_box .ttl {
    font-size: 28px;
  }
}

@media screen and (max-width: 960px) {
  #intro .intro_box .half_box .ttl {
    font-size: 23px;
  }
}

@media screen and (max-width: 568px) {
  #intro .intro_box .half_box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  #intro .intro_box .half_box .ttl {
    font-size: 21px;
    margin-bottom: 10px;
  }
  #intro .intro_box .half_box .photo {
    margin-bottom: 20px;
  }
}

/* 詳細度の罠: .sell_points li .txt_box (及び .ttl) は汎用の .sell_points .txt_box より
   詳細度が高く(li要素セレクタの分)、小さい画面向けメディアクエリ内だけで上書きするための記述のため、
   min-width へ反転せず元のまま維持 */
@media screen and (max-width: 960px) {
  .sell_points li .txt_box {
    padding: 2vw 4vw 4vw;
  }
  .sell_points li .txt_box .ttl {
    font-size: 21px;
    margin-bottom: 6px;
  }
}

@media screen and (max-width: 568px) {
  .sell_points li .txt_box {
    padding: 13px 20px 22px;
  }
  .sell_points li .txt_box .ttl {
    margin-bottom: 6px;
  }
}

/*===============================================
 *	買取ページ リニューアル 202606
===============================================*/
/* MV */
.objective_mv {
  background: url("../img/objective/mv_bg_sp.jpg") no-repeat top center;
  background-size: cover;
}
.objective_mv__inner {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  gap: 0 3%;
  flex-direction: column;
  align-items: center;
  padding: 13% 0 25%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.objective_mv .txt_area {
  width: 100%;
  padding: 0;
}
.objective_mv .staff_photo {
  width: 80%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: absolute;
  left: 50%;
  bottom: 20vw;
  transform: translateX(-50%);
  z-index: -1;
}
.objective_mv__ribbon {
  font-size: 4.5vw;
  font-weight: bold;
  background: #004ca2;
  padding: 0.1em 0 0.15em;
  width: 90%;
  margin: 0 auto;
  border-radius: 34px;
}
.objective_mv__ribbon span {
  position: relative;
}
.objective_mv__ribbon span::before,
.objective_mv__ribbon span::after {
  content: '';
  width: 0.82em;
  height: 26px;
  position: absolute;
  bottom: 0.2em;
}
.objective_mv__ribbon span::before {
  background: url("../img/common/line_left_yellow.png") no-repeat right bottom;
  background-size: contain;
  left: -0.5em;
}
.objective_mv__ribbon span::after {
  background: url("../img/common/line_right_yellow.png") no-repeat left bottom;
  background-size: contain;
  right: -1.25em;
}
.objective_mv__ttl {
  font-size: 8.8vw;
  font-family: 'GenEiMGothic';
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: #161616;
  margin-top: 0;
  text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}
.objective_mv__ttl .txt_keycolor {
  font-size: 1.1em;
  line-height: 1.2;
  letter-spacing: 0.05em;
  display: inline-block;
  transform: skewX(-10deg);
}
.objective_mv__ttl .txt_keycolor .txt_size {
  font-size: 1.2em;
}
.objective_mv__medals {
  gap: 0 2.5%;
  width: 85%;
  margin: 40% auto 0;
}

@media screen and (min-width: 569px) {
  .objective_mv {
    background: url("../img/objective/mv_bg_pc.jpg") no-repeat center;
  }
  .objective_mv__inner {
    width: 90%;
    /* 元のPC版はflex-direction/align-items/position/z-index/overflow/paddingを指定していないため、
       CSS初期値相当に戻す */
    flex-direction: row;
    align-items: normal;
    padding: 0;
    overflow: visible;
    position: static;
    z-index: auto;
  }
  .objective_mv .txt_area {
    width: 50%;
    padding: 1% 0;
  }
  .objective_mv .staff_photo {
    width: 45%;
    position: static;
    transform: none;
    z-index: auto;
  }
  .objective_mv__ribbon {
    font-size: clamp(15px, 2.4vw, 24px);
  }
  .objective_mv__ttl {
    font-size: clamp(30px, 4.5vw, 46px);
    text-shadow: rgb(255, 255, 255) 5px 0px 0px, rgb(255, 255, 255) 4.90033px 0.993347px 0px, rgb(255, 255, 255) 4.60531px 1.94709px 0px, rgb(255, 255, 255) 4.12668px 2.82321px 0px, rgb(255, 255, 255) 3.48353px 3.58678px 0px, rgb(255, 255, 255) 2.70151px 4.20736px 0px, rgb(255, 255, 255) 1.81179px 4.6602px 0px, rgb(255, 255, 255) 0.849836px 4.92725px 0px, rgb(255, 255, 255) -0.145998px 4.99787px 0px, rgb(255, 255, 255) -1.13601px 4.86924px 0px, rgb(255, 255, 255) -2.08073px 4.54649px 0px, rgb(255, 255, 255) -2.94251px 4.04248px 0px, rgb(255, 255, 255) -3.68697px 3.37732px 0px, rgb(255, 255, 255) -4.28444px 2.57751px 0px, rgb(255, 255, 255) -4.71111px 1.67494px 0px, rgb(255, 255, 255) -4.94996px 0.7056px 0px, rgb(255, 255, 255) -4.99147px -0.291871px 0px, rgb(255, 255, 255) -4.83399px -1.27771px 0px, rgb(255, 255, 255) -4.48379px -2.2126px 0px, rgb(255, 255, 255) -3.95484px -3.05929px 0px, rgb(255, 255, 255) -3.26822px -3.78401px 0px, rgb(255, 255, 255) -2.4513px -4.35788px 0px, rgb(255, 255, 255) -1.53666px -4.75801px 0px, rgb(255, 255, 255) -0.560763px -4.96845px 0px, rgb(255, 255, 255) 0.437495px -4.98082px 0px, rgb(255, 255, 255) 1.41831px -4.79462px 0px, rgb(255, 255, 255) 2.34258px -4.41727px 0px, rgb(255, 255, 255) 3.17346px -3.86382px 0px, rgb(255, 255, 255) 3.87783px -3.15633px 0px, rgb(255, 255, 255) 4.4276px -2.32301px 0px, rgb(255, 255, 255) 4.80085px -1.39708px 0px, rgb(255, 255, 255) 4.98271px -0.415447px 0px;
  }
  .objective_mv__ttl .txt_keycolor {
    font-size: 1.42em;
  }
  .objective_mv__ttl .txt_keycolor .txt_size {
    font-size: 1.26em;
  }
  .objective_mv__medals {
    margin-top: 2%;
  }
}

/* Google口コミ */
.google_contents {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 94%;
  flex-direction: column;
}

.google_contents::before,
.google_contents::after {
  content: '';
  width: 1.5em;
  height: 70px;
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.google_contents::before {
  background: url("../img/top/leaf_left_yellow.png") no-repeat;
  background-size: contain;
  left: 0;
}

.google_contents::after {
  background: url("../img/top/leaf_right_yellow.png") no-repeat;
  background-size: contain;
  right: 0;
}

.google_txt {
  width: 100%;
}

.google_txt p {
  font-size: 6.0vw;
  line-height: 1.25;
  font-weight: bold;
  text-shadow: 2px 4px 0 #425fa8;
  text-align: center;
}

.google_txt small {
  font-size: 0.75em;
  margin: 0 -0.35em;
}

.google_txt .star {
  color: #ffde28;
  font-size: 1.25em;
  margin-right: 0.2em;
}

.google_evidence {
  width: auto;
  margin: 0 0 0.35em;
}

.google_warap {
  padding: 10px 0 3px;
}

@media screen and (min-width: 569px) {
  .google_contents {
    align-items: flex-end;
    width: fit-content;
    flex-direction: row;
  }
  .google_contents::before {
    left: -4%;
  }
  .google_contents::after {
    right: -4%;
  }
  .google_txt {
    width: auto;
  }
  .google_txt p {
    font-size: 3.2vw;
    line-height: 1.5;
    text-align: left;
  }
  .google_warap {
    padding: 18px 0 13px;
  }
}

@media screen and (min-width: 961px) {
  /* objective.css自体はこの幅で.google_warapのpaddingを指定していないため、
     common.cssのカスケード値(min-width:961相当)に戻す */
  .google_warap {
    padding: 20px 0;
  }
}

@media screen and (min-width: 1025px) {
  .google_txt p {
    font-size: clamp(22px, 3.8vw, 44px);
  }
}

/* 買取事例 */
#purchase_example .desc {
  margin: -1% 0 7%;
}
#purchase_example .purchase_exmaple_list {
  flex-direction: row;
  gap: 18px 0;
}
#purchase_example .purchase_exmaple_list li {
  background: #fff;
  width: 48.7%;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
#purchase_example .purchase_exmaple_list li .txt_box {
  padding: 10px 2% 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
#purchase_example .purchase_exmaple_list li .price_name {
  font-size: 15px;
  margin-bottom: 10px;
  flex: 1;
  align-content: center;
}
#purchase_example .purchase_exmaple_list li dt {
  font-size: 14px;
}
#purchase_example .purchase_exmaple_list li dd {
  font-size: 22px;
}
#purchase_example .purchase_exmaple_list li dl {
  flex-direction: column;
  gap: 10px 0;
}

@media screen and (min-width: 569px) {
  #purchase_example .desc {
    margin: 3% 0 2%;
  }
  #purchase_example .purchase_exmaple_list {
    gap: 35px 0;
  }
  #purchase_example .purchase_exmaple_list li {
    /* objective.css自体はこの幅でwidthを指定していないため、common.cssのカスケード値(min-width:569相当)に戻す */
    width: 31.8%;
    border-radius: 0;
    display: block;
    flex-direction: row;
  }
  #purchase_example .purchase_exmaple_list li .txt_box {
    padding: 20px 25px 30px;
    display: block;
    flex-direction: row;
    flex: initial;
  }
  #purchase_example .purchase_exmaple_list li .price_name {
    font-size: 18px;
    flex: initial;
    align-content: normal;
  }
  /* objective.css自体の無条件宣言(568px以下でのみ上書きされていた値)を復元 */
  #purchase_example .purchase_exmaple_list li dt {
    font-size: 18px;
  }
  #purchase_example .purchase_exmaple_list li dd {
    font-size: 30px;
  }
}

@media screen and (min-width: 961px) {
  #purchase_example .purchase_exmaple_list li .price_name {
    font-size: 20px;
    /* objective.css自体はこの幅でmargin-bottomを指定していないため、common.cssのカスケード値(min-width:961相当)に戻す */
    margin-bottom: 28px;
  }
  #purchase_example .purchase_exmaple_list li dl {
    /* 元CSSがこの幅でdl自体のdisplay/flex-directionを指定していないため初期値に戻す */
    flex-direction: row;
    gap: 0;
  }
}

/* このようなお悩みありませんか？ */
.trouble-section {
  position: relative;
  /* 背景画像は適宜パスを変更してください */
  background: url('../img/objective/trouble_sec_bg.jpg') no-repeat center center;
  background-size: cover;
  background-color: #f4f9ff;
  padding: 25px 0 25px;
  overflow: hidden;
}
.trouble-section::after {

}

.trouble-section .inner {
  height: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

/* --- 中央タイトル --- */
.trouble-center {
  width: 250px;
  height: 250px;
  margin-bottom: -22px;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  background-color: rgba(216, 234, 255, 0.9); /* 薄い青色 */
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  outline: 2px solid #fff;
  outline-offset: -12px;
}


.trouble-center-icon {
  position: absolute;
  top: -14px;
  width: 50px;
  height: 50px;
  font-size: 22px;
}

.trouble-center h2 {
  font-size: 22px;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  position: relative;
  top: -0.15em;
}

.trouble-center h2 span {
  display: inline-block;
  border-bottom: 2px solid var(--site-primary);
  margin-bottom: 6px;
}

.trouble-center h2 .size {
  font-size: 1.25em;
}

/* --- リストアイテム共通 --- */
.trouble-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 30px 0;
}

.trouble-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 10;
}

.trouble-img {
  width: 11vw;
  height: 11vw;
  max-width: 140px;
  max-height: 140px;
  border-radius: 50%;
  border: 4px solid #fff;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  z-index: 2;
  position: absolute;
}

.trouble-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trouble-box {
  background-color: #fff;
  border: 2px solid var(--site-primary);
  border-radius: 8px;
  padding: 12px 15px;
  width: calc(100% - 50px); /* スマホでテキストがはみ出さないよう幅を計算 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  z-index: 1;
}

.trouble-box p {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.6;
  text-align: left;
}

/* 写真とテキストボックスの重なり調整 (PC・スマホ共通のベース) */
.dir-left { flex-direction: row; }
.dir-left .trouble-img { margin-right: -35px; margin-left: -10px; margin-top: -34px; }
.dir-left .trouble-box { padding-left: 45px; }

.dir-right { flex-direction: row-reverse; }
.dir-right .trouble-img { margin-left: -35px; margin-right: -10px; margin-top: -34px; }
.dir-right .trouble-box { padding-right: 45px; }


/* --- PC版：各アイテムの配置 (％指定で画面幅にある程度追従) --- */
.item-audio  { top: 1%;  left: 55%; }
.item-audio .trouble-img {left: -25%; top: 29%;}
.item-moving { top: 30%; left: 0; }
.item-moving .trouble-img {right: -26%; top: 7%;}
.item-brand  { top: 30%; right: 0%; }
.item-brand .trouble-img {left: -26%; top: 7%;}
.item-endlife{ top: 74%; left: 0; }
.item-endlife .trouble-img {right: -26%; top: -58%;}
.item-flea   { top: 74%; right: -2%; }
.item-flea .trouble-img {left: -26%; top: -58%;}


/* --- 下部テキスト --- */
.trouble-bottom {
  position: relative;
  text-align: center;
  z-index: 1;
  margin-top: 8px;
}

.trouble-bottom-txt {
  margin: 0;
  font-size: 5.3vw;
  font-weight: bold;
  line-height: 1.5;
  padding: 20px 0 0;
  text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83487px 0.981584px 0px, rgb(255, 255, 255) 2.35766px 1.85511px 0px, rgb(255, 255, 255) 1.62091px 2.52441px 0px, rgb(255, 255, 255) 0.705713px 2.91581px 0px, rgb(255, 255, 255) -0.287171px 2.98622px 0px, rgb(255, 255, 255) -1.24844px 2.72789px 0px, rgb(255, 255, 255) -2.07227px 2.16926px 0px, rgb(255, 255, 255) -2.66798px 1.37182px 0px, rgb(255, 255, 255) -2.96998px 0.42336px 0px, rgb(255, 255, 255) -2.94502px -0.571704px 0px, rgb(255, 255, 255) -2.59586px -1.50383px 0px, rgb(255, 255, 255) -1.96093px -2.27041px 0px, rgb(255, 255, 255) -1.11013px -2.78704px 0px, rgb(255, 255, 255) -0.137119px -2.99686px 0px, rgb(255, 255, 255) 0.850987px -2.87677px 0px, rgb(255, 255, 255) 1.74541px -2.43999px 0px, rgb(255, 255, 255) 2.44769px -1.73459px 0px, rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}

.trouble-bottom .trouble-bottom-txt span {
  font-size: 1.25em
}

/* SP限定で追加されたtxt_keycolor/txt_primarycolorのfont-size指定。
   元CSSは569px以上でこのプロパティを指定していないため、継承値に戻す(親.trouble-bottom-txtのfont-sizeを継承) */
@media screen and (max-width: 568px) {
  .trouble-bottom .txt_keycolor,
  .trouble-bottom .txt_primarycolor {
    font-size: 24px;
  }
}

@media screen and (min-width: 569px) {
  .trouble-section {
    padding: 40px 0 40px;
  }
  .trouble-section .inner {
    padding: 0 20px;
  }
  .trouble-center h2 {
    font-size: 3.5vw;
    line-height: 1.6;
    position: static;
    top: auto;
  }
  .trouble-list {
    gap: 10px;
  }
  .trouble-box p {
    font-size: 18px;
    text-align: center;
  }
  .dir-left .trouble-img { margin-left: 0; margin-top: 0; }
  .dir-right .trouble-img { margin-right: 0; margin-top: 0; }
  .dir-left .trouble-box { padding-left: 2.5em; }
  .dir-right .trouble-box { padding-right: 2.5em; }
  .trouble-box {
    border-width: 3px;
    padding: 1.2em 2.0em;
    width: auto;
  }
  .trouble-bottom {
    margin-top: 0;
  }
  .trouble-bottom-txt {
    font-size: clamp(20px, 2.6vw, 32px);
    padding: 0;
  }
  .trouble-center-icon {
    top: 50px;
    width: 44px;
    height: 44px;
    /* 元のPC版はfont-sizeを指定しておらず、他に同一セレクタ+プロパティを対象とするルールも
       存在しないため revert で無指定状態(継承値)に戻す */
    font-size: revert;
  }
  .trouble-center {
    width: 360px;
    height: 360px;
    margin-bottom: -75px;
  }
}

@media screen and (min-width: 961px) {
  .trouble-section {
    padding: 80px 0 60px;
  }
  .trouble-section .inner {
    height: 600px;
    /* 元のPC版はdisplay/flex-direction/align-items/paddingを指定していないため初期値に戻す */
    display: block;
    flex-direction: row;
    align-items: normal;
    padding: 0;
  }
  .trouble-center {
    margin-bottom: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .trouble-center h2 {
    font-size: clamp(20px, 2.2vw, 26px);
  }
  .trouble-box p {
    font-size: clamp(15px, 1.5vw, 17px);
  }
  .trouble-list {
    width: auto;
    max-width: none;
    display: block;
    flex-direction: row;
    gap: 0;
  }
  .trouble-item {
    position: absolute;
    width: auto;
  }
}

@media screen and (min-width: 1025px) {
  .item-audio { top: -2%; left: 54%; }
}

/* !important指定の例外: 元CSSが960px以下限定で top/left/right/bottom(及び left/right の initial) に
   !important を使用しているため、min-width の昇順だけでは打ち消せない。元の max-width スコープのまま維持 */
@media screen and (max-width: 960px) {
  .trouble-item {
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
}

/* 詳細度の罠 + !important指定の例外: .trouble-item .trouble-img は汎用の .trouble-img より
   詳細度が高く(2クラス分)、960px以下・568px以下限定で上書きするための記述であり(かつ left/right には
   !important も使用されている)、対応する無条件宣言が存在しない。min-width へ反転すると、この詳細度の
   高いセレクタが全幅で汎用の .trouble-img を上書きしてしまうため、元の max-width スコープのまま維持 */
@media screen and (max-width: 960px) {
  .trouble-item .trouble-img {
    position: relative;
    left: initial !important;
    right: initial !important;
    width: 15vw;
    height: 15vw;
    max-width: 200px;
    max-height: 200px;
  }
}

@media screen and (max-width: 568px) {
  .trouble-item .trouble-img {
    width: 28vw;
    height: 28vw;
    border-width: 3px;
  }
}

/* .item-audio の top:1%/left:55% はベース(無条件)宣言で既に <=1024px 相当の値になっており、
   min-width:1025px で -2%/54% に上書きされるため、ここでの追加指定は不要 */

/* 5つの強み ナビ */
#advantage {
  position: relative;
}
#advantage::before {
  content: '';
  background: url("../img/objective/sankaku_grad.png") no-repeat center bottom;
  background-size: contain;
  width: 90%;
  max-width: 856px;
  height: 125px;
  position: absolute;
  left: 50%;
  top: -1.1%;
  transform: translateX(-50%);
}
#advantage .advantage_nav_wrap {
  background: #b4e4ff;
  padding: 20px 0;
}
#advantage .advantage_nav {
  gap: 14px 0;
}
#advantage .advantage_nav li {
  width: 100%;
  background: var(--site-primary);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
#advantage .advantage_nav li::after {
  content: '';
  background: url("../img/common/icon_arrow-down_circle_white.svg") no-repeat;
  background-size: contain;
  width: 15px;
  height: 15px;
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
}
#advantage .advantage_nav li a {
  display: flex;
}
#advantage .advantage_nav li .num {
  color: #fff;
  background: #2667d1;
  font-size: 25px;
  font-family: 'Robot';
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5em;
}
#advantage .advantage_nav li div {
  width: 100%;
}
#advantage .advantage_nav li .icon {
  width: 10%;
  margin: 0 2%;
}
#advantage .advantage_nav li .txt_white {
  font-size: 4.4vw;
  font-weight: bold;
  padding: 0.8em 0 0.9em;
  width: 71%;
}

@media screen and (min-width: 569px) {
  #advantage::before {
    width: 65%;
    top: -1%;
  }
  #advantage .advantage_nav_wrap {
    padding: 3% 0;
  }
  #advantage .advantage_nav {
    gap: 30px 3%;
  }
  #advantage .advantage_nav li {
    width: 36.5%;
    border-radius: 10px;
  }
  #advantage .advantage_nav li::after {
    width: 20px;
    height: 20px;
  }
  #advantage .advantage_nav li .num {
    font-size: clamp(20px, 3.1vw, 36px);
  }
  #advantage .advantage_nav li .icon {
    width: 19%;
    margin: 0 3%;
  }
  #advantage .advantage_nav li .txt_white {
    font-size: clamp(18px, 2.0vw, 23px);
    padding: 0.35em 0 0.4em;
  }
}

@media screen and (min-width: 961px) {
  #advantage .advantage_nav li {
    width: 29.5%;
  }
}

/* SP専用の例外: 元CSSが#advantageのoverflowを1024px以下でだけvisibleに指定しているが、
   >1024pxでの正しいデフォルト値(common.css/underlayer.css側の祖先要素が影響している可能性)を
   確認できないため、min-widthへ反転せず元のmax-widthスコープのまま維持 */
@media screen and (max-width: 1024px) {
  #advantage {
    overflow: visible;
  }
}

/* 5つの強み　コンテンツ */
.advantage_content {
  padding: 3.5% 0 0;
}
.advantage_box {
  position: relative;
  margin-bottom: 35px;
}
.advantage_box::before {
  content: '1';
  font-family: 'Robot';
  font-size: clamp(28px, 4.8vw, 50px);
  color: #fff;
  background: var(--site-primary);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  display: inline-block;
  padding: 0.4em 1.55em 1.3em 0.45em;
  line-height: 1.0;
  position: absolute;
  left: 0;
  top: 0;
}
.advantage_box.box_02::before {
  content: '2';
}
.advantage_box.box_03::before {
  content: '3';
}
.advantage_box.box_04::before {
  content: '4';
}
.advantage_box.box_05 {
  margin-bottom: 0;
}
.advantage_box.box_05::before {
  content: '5';
}
.advantage_box .advantage_ttl {
  font-size: clamp(24px, 3.5vw, 40px);
  width: fit-content;
  margin: 0 auto;
}
.advantage_box .advantage_ttl .underline {
  background: linear-gradient(transparent 85%, #c4defd 0%);
  background-position-y: -0.15em;
}
.advantage_box .desc {
  font-size: 16px;
  font-weight: bold;
  margin: 12px 0 22px;
}

@media screen and (min-width: 569px) {
  .advantage_box {
    margin-bottom: 6%;
  }
  .advantage_box .desc {
    font-size: 18px;
    margin: 1.5% 0 3%;
  }
}


.advantage_box .item_list {
  gap: 15px 4.4%;
}
.advantage_box .item_list li {
  width: 47.8%;
}
.advantage_box .item_list .name_box {
  font-size: 15px;
  padding: 0.45em 0 0.55em;
  position: relative;
}
.advantage_box .item_list li .name_box img {
  width: 1.5em;
  position: absolute;
  left: 7%;
  top: 50%;
  transform: translateY(-50%);
}
.advantage_box .item_list .name_box .size_small {
  font-size: 0.9em;
}

@media screen and (min-width: 569px) {
  .advantage_box .item_list {
    gap: 30px 2.6%;
  }
  .advantage_box .item_list li {
    width: 23%;
  }
  .advantage_box .item_list .name_box {
    font-size: clamp(16px, 1.8vw, 20px);
  }
  .advantage_box .item_list .name_box .size_small {
    /* 元CSSは569px以上でこのプロパティを指定していないため、継承値に戻す */
    font-size: inherit;
  }
}


.advantage_box .border_box {
  border: 3px solid var(--site-primary);
  background: #ecf4ff;
  padding: 8.5% 5.5% 6.5%;
}
.advantage_box .ttl_sideline {
  font-size: clamp(19px, 2.5vw, 29px);
  position: relative;
  width: fit-content;
  margin: 0 auto 0.65em;
}
.advantage_box .ttl_sideline em {
  font-size: 1.35em;
}
.advantage_box .ttl_sideline::before, .advantage_box .ttl_sideline::after {
  content: '';
  width: 1.28em;
  height: 1.45em;
  position: absolute;
  top: 0.15em;
}
.advantage_box .ttl_sideline::before {
  background: url("../img/common/line_left_blue.png") no-repeat top right;
  background-size: contain;
  left: -1.35em;
}
.advantage_box .ttl_sideline::after {
  background: url("../img/common/line_right_blue.png") no-repeat top left;
  background-size: contain;
  right: -1.35em;
}

@media screen and (min-width: 569px) {
  .advantage_box .border_box {
    padding: 3.5% 3.5%;
  }
  .advantage_box .ttl_sideline::before {
    left: -1.8em;
  }
  .advantage_box .ttl_sideline::after {
    right: -1.8em;
  }
}


.advantage_box .damaged_item {
  margin: 30px 0 0;
}
.advantage_box .damaged_item .box_wrapper {
  gap: 25px 0;
  margin-top: 5%;
}
.advantage_box .damaged_item .box {
  width: 100%;
  border-radius: 6px;
  position: relative;
  padding: 4.5% 4.5% 4.5%;
}
.advantage_box .damaged_item .box::before {
  content: '';
  background: url("../img/objective/icon_ok.png") no-repeat bottom left;
  background-size: contain;
  width: 44px;
  height: 44px;
  position: absolute;
  top: -18px;
  right: initial;
  left: -10px;
  z-index: 1;
}
.advantage_box .damaged_item .photo {
  width: 40%;
  margin: 0;
}
.advantage_box .damaged_item dl {
  width: 56%;
  position: relative;
}
.advantage_box .damaged_item dl dt {
  font-size: 1.075em;
  font-weight: bold;
  margin-bottom: 0;
}
.advantage_box .damaged_item dl dd {
  font-size: 0.92em;
}
.advantage_box .damaged_item dl .etc {
  position: absolute;
  right: 0;
  bottom: 0;
}

@media screen and (min-width: 569px) {
  .advantage_box .damaged_item {
    margin-top: 4.5%;
  }
  .advantage_box .damaged_item .box_wrapper {
    gap: 40px 0;
  }
  .advantage_box .damaged_item .box {
    width: 48.7%;
    border-radius: 8px;
    padding: 2.5% 2.5% 2.5%;
  }
  .advantage_box .damaged_item .box::before {
    width: 14%;
    height: 58px;
    top: -17%;
    right: 8%;
    left: auto;
    z-index: auto;
  }
  .advantage_box .damaged_item .photo {
    width: 42%;
  }
  .advantage_box .damaged_item dl {
    width: 52%;
  }
  .advantage_box .damaged_item dl dt {
    font-size: 1.2em;
    margin-bottom: 0.35em;
  }
  .advantage_box .damaged_item dl dd {
    /* 元CSSは569px以上でこのプロパティを指定していないため、継承値に戻す */
    font-size: inherit;
  }
}

/* 詳細度の罠: .advantage_box .damaged_item .box.box_04 .etc は汎用の
   .advantage_box .damaged_item dl .etc より詳細度が高く、小さい画面向けメディアクエリ内だけで
   上書きするための記述のため、min-width へ反転せず元のまま維持 */
@media screen and (max-width: 568px) {
  .advantage_box .damaged_item .box.box_04 .etc {
    position: relative;
    display: block;
    text-align: right;
  }
}

/* 各ボックス内の強みポイント */
.advantage_box .ad_point {
  flex-direction: column;
  gap: 15px 0;
  margin-top: 25px;
}
.advantage_box .ad_point li {
  width: 100%;
  background: #60a5ff;
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: bold;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  padding: 0.65em 0 0.75em;
  gap: 0 0.35em;
}
.advantage_box .ad_point li img {
  width: 1.65em;
}
.advantage_box .ad_point li::before {
  content: '';
  background: url("../img/objective/point_label.svg") no-repeat top left;
  background-size: contain;
  width: 12%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}
.advantage_box .ad_point li::after {
  content: '';
  width: 97%;
  height: 83%;
  border: 1px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  pointer-events: none;
}

@media screen and (min-width: 569px) {
  .advantage_box .ad_point {
    flex-direction: row;
    gap: 0;
    margin-top: 4.5%;
  }
  .advantage_box .ad_point li {
    width: 48.7%;
    border-radius: 10px;
    padding: 0.55em 0;
    gap: 0 0.5em;
  }
  .advantage_box .ad_point li img {
    width: 2.1em;
  }
  .advantage_box .ad_point li::after {
    border-radius: 8px;
  }
}

/* よくあるご相談 */
.advantage_box .faq_container {
  /*
  background: #BEDBFF;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 7px, #BCDAFF 7px, #BCDAFF 15px);
  */
  padding: 14px 20px 20px;
  margin-top: 30px;
}
.advantage_box .faq_title {
  font-size: clamp(20px, 2.6vw, 30px);
  background: #2667d1;
  border-radius: 5px;
  padding: 0.35em 2.5em 0.45em;
  margin: -36px auto 25px;
  gap: 0.5em;
}
.advantage_box .faq_title .icon {
  width: 1.45em;
}
.advantage_box .chat_row {
  gap: 20px;
  margin-bottom: 2.5%;
}
.advantage_box .chat_row img {
  width: 31.5%;
}
/* ===========================
  吹き出しのベーススタイル
=========================== */
.advantage_box .bubble {
  position: relative;
  background-color: #ffffff; /* 吹き出しの背景色 */
  padding: 3% 4%;
  flex-grow: 1; /* 余ったスペースを埋める */
}
.advantage_box .bubble p {
  font-size: 15px;
  font-weight: bold;
  text-align: left;
}

/* ===========================
左側（青色枠）の吹き出し
=========================== */
.advantage_box .bubble_blue {
  border: 2px solid #58b0f9; /* 青色の枠線 */
}

/* 左向きのしっぽ */
.advantage_box .bubble_blue::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -9px; /* しっぽの位置を左にはみ出させる */
  width: 12px;
  height: 12px;
  background-color: #ffffff; /* 本体と同じ背景色にして重なりを隠す */
  border-left: 2px solid #58b0f9; /* 左と下の枠線をつける */
  border-bottom: 2px solid #58b0f9;
  transform: translateY(-50%) rotate(45deg); /* ひし形にして位置調整 */
}

/* ===========================
  右側（ピンク色枠）の吹き出し
=========================== */
.advantage_box .bubble_pink {
  border: 2px solid #ff9fa0; /* ピンク色の枠線 */
}

/* 右向きのしっぽ */
.advantage_box .bubble_pink::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -9px; /* しっぽの位置を右にはみ出させる */
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  border-top: 2px solid #ff9fa0; /* 上と右の枠線をつける */
  border-right: 2px solid #ff9fa0;
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (min-width: 569px) {
  .advantage_box .faq_container {
    margin-top: 3%;
    padding: 4% 7%;
  }
  .advantage_box .faq_title {
    padding: 0.25em 3.5em 0.35em;
    margin: -7.5% auto 1.0em;
  }
  .advantage_box .chat_row {
    gap: 30px;
    max-width: 780px;
  }
  .advantage_box .chat_row img {
    width: 130px;
  }
  .advantage_box .bubble {
    padding: 3% 5%;
    border-radius: 10px;
  }
  .advantage_box .bubble p {
    font-size: clamp(18px, 1.8vw, 20px);
    /* 元CSSは569px以上でこのプロパティを指定していないため、継承値に戻す */
    /*text-align: inherit;*/
  }
  .advantage_box .bubble_blue {
    border-width: 3px;
  }
  .advantage_box .bubble_blue::before {
    border-width: 3px;
    left: -10px;
  }
  .advantage_box .bubble_pink {
    border-width: 3px;
  }
  .advantage_box .bubble_pink::before {
    border-width: 3px;
    right: -10px;
  }
}

@media screen and (min-width: 961px) {
  .advantage_box .chat_row img {
    width: 158px;
  }
}

/* 詳細度の罠: .advantage_box .chat_row.left は汎用の .advantage_box .chat_row より詳細度が高く、
   小さい画面向けメディアクエリ内だけで上書きするための記述のため、min-width へ反転せず元のまま維持 */
@media screen and (max-width: 568px) {
  .advantage_box .chat_row.left {
    margin-bottom: 25px;
  }
}


.advantage_box .ad_content_wrap {
  flex-direction: column;
  gap: 16px;
  margin-bottom: 25px;
}
.advantage_box .ad_content_wrap .photo {
  width: 100%;
  margin: 0;
}
.advantage_box .ad_content_wrap .txt_area {
  width: 100%;
}

@media screen and (min-width: 569px) {
  .advantage_box .ad_content_wrap {
    flex-direction: row;
    gap: 0;
    margin-bottom: 0;
  }
  .advantage_box .ad_content_wrap .photo {
    width: 38%;
  }
  .advantage_box .ad_content_wrap .txt_area {
    width: 57%;
  }
}


.advantage_box.box_03 .ad_content_wrap .txt_area img {
  width: 100%;
  margin-top: 15px;
}

@media screen and (min-width: 569px) {
  .advantage_box.box_03 .ad_content_wrap .txt_area img {
    width: 65%;
    margin: 1.5% 0 0;
  }
}

/* 詳細度の罠: .advantage_box.box_03 .ttl_sideline::before/::after は汎用の
   .advantage_box .ttl_sideline::before/::after より詳細度が高く、小さい画面向けメディアクエリ内だけで
   上書きするための記述のため、min-width へ反転せず元のまま維持 */
@media screen and (max-width: 568px) {
  .advantage_box.box_03 .ttl_sideline::before {
    top: initial;
    bottom: 0;
    left: -1.65em;
  }
  .advantage_box.box_03 .ttl_sideline::after {
    top: initial;
    bottom: 0;
    right: -1.5em;
  }
}

.advantage_box.box_04 .ad_content_wrap .txt_area img {
  width: 100%;
  margin-top: 15px;
}

@media screen and (min-width: 569px) {
  .advantage_box.box_04 .ad_content_wrap .txt_area img {
    width: 70%;
    margin: 1.5% 0 0;
  }
}


.advantage_box .appraiser_box {
  margin-top: 25px;
}
.advantage_box .appraiser_list {
  gap: 15px 0;
  margin-top: 16px;
}
.advantage_box .appraiser_list li {
  width: 48%;
  background: #fff;
  border-radius: 5px;
  padding: 4% 4%;
  flex-direction: column;
}
.advantage_box .appraiser_list li img {
  width: 100%;
}
.advantage_box .appraiser_list li .info_area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.advantage_box .appraiser_list li .name {
  font-size: 1.15em;
  font-weight: bold;
  margin: 0.35em 0;
}
.advantage_box .appraiser_list li dt {
  color: var(--site-primary);
  font-size: 13px;
  border: 1px solid var(--site-primary);
  padding: 0 0.5em;
  margin-bottom: 0.5em;
}
.advantage_box .appraiser_list li dd {
  font-size: 13px;
  text-align: center;
}

@media screen and (min-width: 569px) {
  .advantage_box .appraiser_box {
    margin-top: 4.5%;
  }
  .advantage_box .appraiser_list {
    gap: 25px 0;
    margin-top: 3%;
  }
  .advantage_box .appraiser_list li {
    width: 31.3%;
    border-radius: 8px;
    padding: 3% 3%;
  }
  .advantage_box .appraiser_list li .name {
    margin: 0.5em 0;
  }
  .advantage_box .appraiser_list li dt {
    font-size: 14px;
    margin-bottom: 0.25em;
  }
  .advantage_box .appraiser_list li dd {
    font-size: 15px;
  }
}

@media screen and (min-width: 961px) {
  .advantage_box .appraiser_list li {
    padding: 2% 2%;
    flex-direction: row;
  }
  .advantage_box .appraiser_list li img {
    width: 48%;
  }
  .advantage_box .appraiser_list li .info_area {
    width: 48%;
  }
}


.advantage_box .notice_box {
  border: 3px solid #f1b7bd;
  background: #fdf6f7;
  flex-direction: column;
  align-items: center;
  padding: 5% 5.5% 6%;
  margin-top: 4%;
}
.advantage_box .notice_box .icon {
  width: 40px;
}
.advantage_box .notice_box p {
  width: 100%;
  margin-top: 5px;
}
.advantage_box .notice_box picture {
  width: 100%;
  margin-top: 10px;
}
.advantage_box .btn_area {
  padding: 6% 0 7.5%;
}
.advantage_box .btn_area .btn a::after {
  transform: rotate(90deg);
  top: 43%;

}

@media screen and (min-width: 569px) {
  .advantage_box .notice_box {
    flex-direction: row;
    align-items: normal;
    padding: 2% 4.5%;
  }
  .advantage_box .notice_box p {
    width: 65%;
    margin-top: 0;
  }
  .advantage_box .notice_box picture {
    width: 20.5%;
    margin-top: 0;
  }
  .advantage_box .btn_area {
    padding: 3% 0 3.5%;
  }
}

@media screen and (min-width: 961px) {
  .advantage_box .notice_box .icon {
    width: 60px;
  }
}

/* 詳細度の罠: .advantage_box .btn_area .btn は汎用の .btn(common.css)より詳細度が高く、
   小さい画面向けメディアクエリ内だけで上書きするための記述のため、min-width へ反転せず元のまま維持 */
@media screen and (max-width: 568px) {
  .advantage_box .btn_area .btn {
    width: 80vw;
  }
}


/* 高価買取できる理由 */
.reason_sec .ttl_section_top {
  line-height: 1.3;
  position: relative;
  z-index: 1;
}
.reason_sec .ttl_section_top .bg_circle {
  font-family: 'Robot', sans-serif;
  color: var(--site-primary);
  font-size: 1.8em;
  margin: 0 0.35em;
  position: relative;
}
.reason_sec .ttl_section_top .bg_circle::before {
  content: "●";
  color: #fff;
  position: absolute;
  font-size: 1.3em;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.reason_sec .desc {
  margin: 0 auto 20px;
}
.reason_sec .reason_box_wrap {
  flex-direction: column;
  gap: 25px 0;
}
.reason_sec .reason_box {
  width: 100%;
}
.reason_sec .reason_box .ttl {
  font-size: 5.3vw;
  background: var(--site-primary);
  display: flex;
  align-items: center;
  padding: 0.4em 0.5em 0.45em;
  gap: 0.65em;
}
.reason_sec .reason_box .ttl .num {
  font-size: 1.15em;
  font-family: 'Robot', sans-serif;
  width: 1.75em;
  height: 1.75em;
  background: #ffd800;
  line-height: 1.0;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.reason_sec .reason_box .box_content {
  padding: 6% 7%;
}
.reason_sec .reason_box img {
  margin-bottom: 15px;
}

/* .ttl_section_top .size_small(共通クラス)は元CSSで569px以上のline-heightを指定していないため、継承値に戻す */
.ttl_section_top .size_small {
  line-height: 1.8;
}

@media screen and (min-width: 569px) {
  .reason_sec .ttl_section_top {
    line-height: 1.5;
  }
  .ttl_section_top .size_small {
    line-height: inherit;
  }
  .reason_sec .ttl_section_top .bg_circle {
    margin: 0 0.45em;
  }
  .reason_sec .ttl_section_top .bg_circle::before {
    font-size: 1.5em;
    top: 53%;
  }
  .reason_sec .desc {
    margin-bottom: 4%;
  }
  .reason_sec .reason_box_wrap {
    flex-direction: row;
    gap: 0;
  }
  .reason_sec .reason_box {
    width: 31.8%;
  }
  .reason_sec .reason_box .ttl {
    font-size: clamp(20px, 2.0vw, 24px);
  }
}

/* 事例とお客様の声 */
.purcase_case_sec {

}
.purcase_case_sec .desc {
  margin: 0 auto 20px;
}
.purcase_case_list {
  flex-direction: column;
  gap: 25px;
}
.purcase_case_list li {
  background: var(--site-secondary);
  box-shadow: 0 5px 0 #77bbe0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.purcase_case_list li .case_ttl {
  font-size: 18px;
  padding: 0.65em 0 0.75em;
  flex: 1;
  align-content: center;
}
.purcase_case_list li .content_area {
  padding: 4% 6% 6%;
}
.purcase_case_list li dl {
  gap: 0.5em;
}
.purcase_case_list li dt {
  color: #fff;
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: bold;
  background: var(--site-keycolor);
  padding: 0.25em 0.5em 0.35em;
}
.purcase_case_list li dd {
  font-size: 28px;
  font-weight: bold;
  color: var(--site-keycolor);
}
.purcase_case_list li dd small {
  font-size: 0.75em;
}
.purcase_case_list li .txt_box {
  margin-top: 12px;
}
.purcase_case_list li .txt_box img {
  width: 75px;
  float: left;
  margin-right: 10px;
  margin-bottom: 5px;
}
.purcase_case_sec .annotation_txt {
  color: #9a9a9a;
  margin-top: 1.5em;
}

@media screen and (min-width: 569px) {
  .purcase_case_sec .desc {
    margin-bottom: 4%;
  }
  .purcase_case_list {
    flex-direction: row;
    gap: 0;
  }
  .purcase_case_list li {
    width: 31.3%;
  }
  .purcase_case_list li .case_ttl {
    font-size: 16px;
  }
  .purcase_case_list li dd {
    font-size: clamp(20px, 2.7vw, 32px);
  }
  .purcase_case_list li .content_area {
    padding: 5% 7% 7%;
  }
  .purcase_case_list li .txt_box {
    margin-top: 5%;
  }
  .purcase_case_list li .txt_box img {
    width: 86px;
    margin-right: 16px;
    margin-bottom: 10px;
  }
  .purcase_case_sec .annotation_txt {
    margin-top: 2.0em;
  }
}

@media screen and (min-width: 961px) {
  .purcase_case_list li .case_ttl {
    font-size: clamp(18px, 1.8vw, 22px);
  }
}

.faq_list {
  display: flex;
  flex-direction: column;
  gap: 15px 0;
  grid-template-columns: 48.7% 48.7%;
  grid-template-rows: 1fr 1fr auto;
}
.faq_list li {
  width: 100%;
  padding: 20px 20px;
}
.faq_list li:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.faq_list li:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.faq_list li:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}
.faq_list li:nth-child(4) {
  grid-column: 1;
  grid-row: 3;
}
.faq_list li:nth-child(5) {
  grid-column: 2;
  grid-row: 2 / -1;
}
.faq_list li .bg_box {
  font-size: 0.95em;
  background: #c8e6ff;
  padding: 1.0em 1.2em;
  border-radius: 8px;
  margin-top: 4%;
}

@media screen and (min-width: 569px) {
  .faq_list {
    display: grid;
    /* objective.css自体はこの幅でgapを指定していないため、common.cssのカスケード値(min-width:569相当)に戻す */
    gap: 30px 0;
  }
  .faq_list li {
    padding: 40px 35px 40px;
  }
  .faq_list li .bg_box {
    padding: 1.0em 1.5em;
  }
}

/* クーリングオフ制度について */
.cooling_box {
  margin-top: 45px;
}
.cooling_box .ttl_stripe span {
  position: relative;
}
.cooling_box .ttl_stripe span::before {
  content: '';
  background: url("../img/objective/icon_checklist.png") no-repeat;
  background-size: contain;
  width: 40px;
  height: 50px;
  position: absolute;
  left: -52px;
  top: 35px;
  transform: translateY(-50%);
}
.cooling_box .content_area {
  border: 3px solid var(--site-primary);
  border-radius: 0 0 10px 10px;
  flex-direction: column;
  gap: 15px;
}
.cooling_box .content_area img {
  width: 100%;
}
.cooling_box .content_area .txt_area {
  width: 100%;
}
.cooling_box .content_area .txt_area p:first-of-type {
  margin-bottom: 1.0em;
}
.cooling_box .content_area .txt_area a {
  color: var(--site-primary);
  word-break: break-all;
}

@media screen and (min-width: 569px) {
  .cooling_box {
    margin-top: 7%;
  }
  .cooling_box .ttl_stripe span::before {
    width: 1.3em;
    height: 1.6em;
    left: -1.9em;
    top: 57%;
  }
  .cooling_box .content_area {
    border-radius: 0 0 20px 20px;
    flex-direction: row;
    gap: 0;
  }
  .cooling_box .content_area img {
    width: 45%;
  }
  .cooling_box .content_area .txt_area {
    width: 50%;
  }
}

/* 詳細度の罠: .cooling_box .ttl_stripe.top_radius は汎用の .ttl_stripe より詳細度が高く、
   小さい画面向けメディアクエリ内だけで上書きするための記述のため、min-width へ反転せず元のまま維持 */
@media screen and (max-width: 568px) {
  .cooling_box .ttl_stripe.top_radius {
    border-radius: 10px 10px 0 0;
    text-align: left;
    padding-left: 70px;
  }
}