@import url("global.css");
.sectitle::before {
  content: "";
  width: 32px;
  height: 3px;
  display: block;
  border-radius: 10px;
  background-color: #F08300;
  margin-bottom: 20px; }
.sectitle span {
  display: block; }
.sectitle .ja {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px; }
.sectitle .en {
  font-size: 12px;
  font-family: "Overpass", "Zen Kaku Gothic New", sans-serif;
  color: #747474; }

#aftersupport {
  display: flex;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 40px 6%;
  margin-bottom: 130px; }
  #aftersupport .titlebox {
    width: 28%;
    flex-shrink: 0;
    min-width: 340px;
    padding-block: 30px; }
    #aftersupport .titlebox .sectitle {
      position: sticky;
      top: 120px; }
  #aftersupport .secmain {
    flex-grow: 1; }
    #aftersupport .secmain > li {
      display: flex;
      gap: 7%;
      padding: 60px 5px;
      border-top: #352F29 1px solid; }
      #aftersupport .secmain > li:first-child {
        border: none; }
    #aftersupport .secmain .image {
      width: 30%;
      flex-shrink: 0;
      height: auto; }
      #aftersupport .secmain .image img {
        mix-blend-mode: multiply; }
    #aftersupport .secmain .main .title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 20px; }

#warranty .sectitle {
  text-align: center;
  margin-bottom: 60px; }
  #warranty .sectitle::before {
    margin-inline: auto; }
#warranty .warranty dl {
  border-top: #352F29 1px solid;
  border-bottom: #352F29 1px solid;
  margin-bottom: -1px;
  padding: 20px 5px;
  display: flex; }
  #warranty .warranty dl dt {
    width: 37%;
    box-sizing: border-box;
    padding: 10px 30px 10px 0;
    border-right: #747474 1px solid;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700; }
    #warranty .warranty dl dt span {
      font-size: 16px;
      font-weight: 500; }
  #warranty .warranty dl dd {
    padding: 10px 0 10px 30px; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1300px)

------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint (1180px)

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1180px) {
  #aftersupport {
    display: block; }
    #aftersupport .titlebox {
      width: auto;
      min-width: inherit;
      margin-bottom: 30px; }
      #aftersupport .titlebox .sectitle {
        position: static;
        text-align: center; }
        #aftersupport .titlebox .sectitle br {
          display: none; }
        #aftersupport .titlebox .sectitle::before {
          margin-inline: auto; }
    #aftersupport .secmain > li:first-child {
      border-top: #352F29 1px solid; }

  #warranty .warranty dl dt span {
    display: block; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .topblock .top-catch br.pc {
    display: none; }

  .sectitle .ja {
    font-size: 24px;
    margin-bottom: 15px; }

  #aftersupport {
    margin-bottom: 100px; }
    #aftersupport .titlebox {
      padding-block: 20px; }
    #aftersupport .secmain > li {
      gap: 6%;
      padding: 50px 5px; }

  #warranty .sectitle {
    margin-bottom: 50px; }
  #warranty .warranty dl dt {
    width: 240px;
    padding: 10px 0;
    font-size: 16px; }
    #warranty .warranty dl dt span {
      font-size: 14px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #pagetitle .pagetitle .ja {
    display: block;
    margin-top: -5px; }

  .topblock .top-text br {
    display: none; }

  .sectitle::before {
    margin-bottom: 20px; }
  .sectitle .ja {
    font-size: 20px;
    margin-bottom: 10px; }

  #aftersupport {
    padding: 50px 6% 30px;
    margin-bottom: 70px; }
    #aftersupport .titlebox {
      margin-bottom: 40px;
      padding-block: 0; }
    #aftersupport .secmain > li {
      display: block;
      padding: 40px 5px; }
    #aftersupport .secmain .image {
      width: auto;
      max-width: 360px;
      margin: 30px auto 0; }
    #aftersupport .secmain .main .title {
      font-size: 16px;
      text-align: center;
      margin-bottom: 25px; }

  #warranty .sectitle {
    margin-bottom: 40px; }
  #warranty .warranty dl {
    padding: 30px 5px 35px;
    display: block; }
    #warranty .warranty dl dt {
      width: auto;
      padding: 0;
      border-right: none;
      text-align: center;
      margin-bottom: 20px; }
    #warranty .warranty dl dd {
      padding: 0; } }