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

/* 以下は他ページ・underlayer.css/common.cssと共有する汎用クラス
   （`.row`系のflex-direction反転等）への小さい画面限定の上書き、
   または元コードで568px以下のブロック以外に対応する記述が存在しない
   プロパティのため、値を推測せず元のmax-widthスコープのまま維持する */
@media screen and (max-width: 568px) {
  #intro .intro_box .half_box {
    flex-direction: column;
  }
  #intro .intro_box .half_box .ttl {
    margin-bottom: 10px;
  }
  #intro .intro_box .half_box .photo {
    margin-bottom: 20px;
  }
  .full_wide_ttl {
    padding: 14px 0 16px;
  }
  .full_wide_ttl .txt_white {
    line-height: 1.4;
  }
  #sale_flow .ttl_under_bar {
    margin-bottom: 32px;
  }
}

#sub_other_service .sub_other_content::after {
  background: url("../img/sale_out/sale-out_top.jpg") no-repeat;
  background-size: cover;
}

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

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

@media screen and (min-width: 961px) {
  #intro .intro_box .half_box .ttl {
    font-size: 28px;
  }
}

@media screen and (min-width: 1025px) {
  #intro .intro_box .half_box .ttl {
    font-size: 32px;
  }
}

.full_wide_ttl .txt_white {
  padding-left: 4vw;
}

@media screen and (min-width: 961px) {
  .full_wide_ttl .txt_white {
    padding-left: 8.2%;
  }
}

.full_wide_ttl .txt_white .txt_yellow {
  position: relative;
}

.full_wide_ttl .txt_white .txt_yellow::before {
  content: none;
}

@media screen and (min-width: 569px) {
  .full_wide_ttl .txt_white .txt_yellow::before {
    content: '';
    background: url("../img/sale_out/items.png") no-repeat;
    background-size: contain;
    width: calc(109px * 0.7);
    height: calc(111px * 0.7);
    position: absolute;
    top: -20px;
    left: -88px;
  }
}

@media screen and (min-width: 961px) {
  .full_wide_ttl .txt_white .txt_yellow::before {
    width: 109px;
    height: 111px;
    top: -43px;
    left: -126px;
  }
}

#about .intro_txt {
  margin-top: -8px;
}

@media screen and (min-width: 569px) {
  #about .intro_txt {
    margin-top: 10px;
  }
}

@media screen and (min-width: 961px) {
  #about .intro_txt {
    margin-top: -16px;
  }
}

.about_list {
  gap: 20px 0;
  margin-top: 0;
}

@media screen and (min-width: 569px) {
  .about_list {
    gap: 30px 0;
    margin-top: 30px;
  }
}

@media screen and (min-width: 961px) {
  .about_list {
    margin-top: -10px;
  }
}

.about_list li {
  width: 100%;
}

@media screen and (min-width: 569px) {
  .about_list li {
    width: 31.8%;
  }
}

.about_list li .txt_box {
  padding: 16px 20px 20px;
}

@media screen and (min-width: 569px) {
  .about_list li .txt_box {
    padding: 2.5vw 3.5vw 3vw;
  }
}

@media screen and (min-width: 961px) {
  .about_list li .txt_box {
    padding: 30px 40px 40px;
  }
}

.about_list li .ttl {
  font-size: 21px;
  margin-bottom: 6px;
}

@media screen and (min-width: 569px) {
  .about_list li .ttl {
    font-size: 20px;
    margin-bottom: 15px;
  }
}

@media screen and (min-width: 961px) {
  .about_list li .ttl {
    font-size: 27px;
  }
}

.about_list li:nth-child(5) .ttl {
  margin: 0 -10px 15px;
}

#sale_flow ul {
  margin-top: 25px;
}

@media screen and (min-width: 569px) {
  #sale_flow ul {
    margin-top: 30px;
  }
}

@media screen and (min-width: 961px) {
  #sale_flow ul {
    margin-top: 42px;
  }
}

#sale_flow ul li.content {
  width: 100%;
  position: relative;
  flex-direction: column;
  padding: 20px 20px 25px;
}

@media screen and (min-width: 569px) {
  #sale_flow ul li.content {
    padding: 40px 40px;
  }
}

#sale_flow ul li.content .txt_box {
  width: 100%;
}

/* @media screen and (min-width: 569px) {
  #sale_flow ul li.content .txt_box {
    width: 62.5%;
  }
} */

#sale_flow ul li.content .ttl {
  font-size: 21px;
  margin: 0 0 8px;
}

@media screen and (min-width: 569px) {
  #sale_flow ul li.content .ttl {
    font-size: 22px;
    margin: -10px 0 6px;
  }
}

@media screen and (min-width: 961px) {
  #sale_flow ul li.content .ttl {
    font-size: 28px;
    margin-bottom: 14px;
  }
}

@media screen and (min-width: 1025px) {
  #sale_flow ul li.content .ttl {
    font-size: 32px;
  }
}

#sale_flow ul li.content picture {
  max-width: 356px;
  width: 100%;
  margin-top: 15px;
}

@media screen and (min-width: 569px) {
  #sale_flow ul li.content picture {
    width: 34.3%;
    margin: 20px auto 0;
  }
}

#sale_flow ul li.content::before {
  content: '';
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 569px) {
  #sale_flow ul li.content::before {
    width: 80px;
    height: 80px;
  }
}

@media screen and (min-width: 961px) {
  #sale_flow ul li.content::before {
    width: 100px;
    height: 100px;
  }
}

#sale_flow ul li.content:nth-child(1)::before {
  background: url("../img/common/label_num01_large.svg") no-repeat;
  background-size: contain;
}

#sale_flow ul li.content:nth-child(3)::before {
  background: url("../img/common/label_num02_large.svg") no-repeat;
  background-size: contain;
}

#sale_flow ul li.content:nth-child(5)::before {
  background: url("../img/common/label_num03_large.svg") no-repeat;
  background-size: contain;
}

#sale_flow ul li.content:nth-child(7)::before {
  background: url("../img/common/label_num04_large.svg") no-repeat;
  background-size: contain;
}

#sale_flow ul li.content:nth-child(9)::before {
  background: url("../img/common/label_num05_large.svg") no-repeat;
  background-size: contain;
}

@media screen and (min-width: 569px) {
  #sale_flow ul li.content:nth-child(1)::before {
    background: url("../img/common/label_num01.svg") no-repeat;
    background-size: contain;
  }
  #sale_flow ul li.content:nth-child(3)::before {
    background: url("../img/common/label_num02.svg") no-repeat;
    background-size: contain;
  }
  #sale_flow ul li.content:nth-child(5)::before {
    background: url("../img/common/label_num03.svg") no-repeat;
    background-size: contain;
  }
  #sale_flow ul li.content:nth-child(7)::before {
    background: url("../img/common/label_num04.svg") no-repeat;
    background-size: contain;
  }
  #sale_flow ul li.content:nth-child(9)::before {
    background: url("../img/common/label_num05.svg") no-repeat;
    background-size: contain;
  }
}

#sale_flow ul li.arrow img {
  width: 47px;
  display: block;
  margin: 5px auto;
}

@media screen and (min-width: 569px) {
  #sale_flow ul li.arrow img {
    width: 48px;
    margin: 10px auto;
  }
}

@media screen and (min-width: 961px) {
  #sale_flow ul li.arrow img {
    width: 65px;
  }
}