@charset "UTF-8";
 /* ========================================
   @media screen and (min-width: 768px), print
 ======================================== */
@media screen and (min-width: 768px),print {
  /* fv
  -------------------------------------*/
  .fv {
    background: url(../images/after/fv.jpg) no-repeat center center/cover;
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
    text-align: center;
    margin-top: 2.2rem;
    padding: 10.9rem 0 8.55rem;
    position: relative;
  }
  .fv h2 {
    position: relative;
    display: inline-block;
    z-index: 3;
  }
  .fv h2::before {
    content: "";
    position: absolute;
    top: -5.9rem;
    left: -5.7rem;
    width: 8.125rem;
    height: 8.125rem;
    background: url(../images/after/fv-num.svg) no-repeat;
    background-size: contain;
  }
  .fv h2 img {
    width: 10.25rem;
  }
  .fv .enttl {
    position: absolute;
    bottom: -0.15em;
    left: 50%;
    transform: translateX(-50%);
  }
  .fv .enttl img {width: 82.563rem;}

  /* section-wrap
  -------------------------------------*/
  .section-wrap {
    padding: 4.66rem 0 0;
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
    padding-bottom: 25.8rem;
    background: transparent linear-gradient(180deg, #F4F1E966 0%, #EBE5D5 100%) 0% 0% no-repeat padding-box;
  }
  .section-wrap .lead {
    font-size: 24px;
    line-height: 2.0833333333;
    letter-spacing: 0.075em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5.75rem;
  }
  .section-wrap .lead span {
    background: linear-gradient(transparent 75%, #FFF46C 30%);
  }
  .section-wrap .ttl-box {
    width: min(95%, 1400px);
    margin-inline: auto;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 7.9rem;
  }
  .section-wrap .ttl-box li{
    position: relative;
    height: 8.7rem;
  }
  .section-wrap .ttl-box li a {
    color: #FFFFFF;
    padding: 1.9rem 0;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.05em;
    font-weight: 700;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
  }
  .section-wrap .ttl-box li:first-child {
    background: #A78F43;
  }
  .section-wrap .ttl-box li:first-child img {
    width: 3.625rem;
    margin: 0 0.8rem 0 0;
  }
  .section-wrap .ttl-box li:last-child  {
    background: #5E8958;
  }
  .section-wrap .ttl-box li:last-child img {
    width: 4.7rem;
    margin: 0 0.8rem 0 0;
  }
  .section-wrap .ttl-box li::after {
    position: absolute;
    content: "";
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 1.563rem;
    background-size: contain;
  }
  .section-wrap .ttl-box li:first-child::after {
    background: url(../images/after/guarantee-arrow.svg) no-repeat;
    background-size: contain;
  }
  .section-wrap .ttl-box li:last-child::after {
    background: url(../images/after/after-arrow.svg) no-repeat;
    background-size: contain;
    bottom: -1.5rem;
  }

  /* section共通
  -------------------------------------*/
  .section {
    width: min(95%, 1400px);
    margin-inline: auto;
    background: #fff;
  }
  .section .inner {
    padding: 8.3rem 3.5rem 4.5rem;
    position: relative;
  }
  .section h2 {
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #A78F43;
    text-align: center;
    margin-bottom: 2.2rem;
    position: relative;
    z-index: 2;
  }
  .section .ttl-box {
    position: absolute;
    display: flex;
    top: 2rem;
    left: 15.4rem;
    gap: 3.2rem;
    width: fit-content;
    margin: 0;
  }
  .section .lead {
    font-size: 20px;
    line-height: 1.9;
    letter-spacing: 0em;
    font-weight: 700;
    margin-bottom: 4.2rem;
  }


  /* guarantee
  -------------------------------------*/
  .guarantee {
    border: 5px solid #a78f43;
    margin-bottom: 6.3rem;
  }
  .guarantee .content {
    display: grid;
    grid-template-columns: 31.40625% 62.5%;
    gap: 2.5rem;
    margin-bottom: 3.75rem;
  }
  .guarantee .content:last-child {
    margin-bottom: 0;
  }
  .guarantee .content h3 {
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #FFFFFF;
    background: #A78F43;
    margin-bottom: 1.25rem;
    display: inline-block;
    padding: 0.3rem 0.6rem 0.7rem;
  }
  .guarantee .content .txt {
    font-size: 16px;
    line-height: 2.125;
    letter-spacing: 0.05em;
    font-weight: 500;
  }
  .guarantee .content .photo img {
    width: 100%;
    height: auto;
  }

  /* after
  -------------------------------------*/
  .after {
    border: 5px solid #5e8958;
  }
  .after h2 {
    color: #5E8958;
  }
  .after .inner {
    padding: 8.3rem 3.5rem 4.2rem;
  }
  .after .ttl-box {
    top: 1.9rem;
    gap: 0;
    left: 26.2rem;
  }
  .after .ttl-box .num {
    position: absolute;
    top: 0.6rem;
    left: -10.6rem;
  }
  .after .lead {  
    margin-bottom: 3.8rem;
  }
  .after .content {
    display: grid;
    grid-template-columns: 52.57% 37.85%;
    margin: 0 0 1.4rem 5.5rem;
    gap: 1.85rem;
  }
  .after .content .txt {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2.125;
    margin-bottom: 2.1rem;
  }
  .after .content .txt:nth-child(2) {
    margin-bottom: 1.2rem;
  }
  .after .content .repair-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 31.5rem;
    gap: 0.1rem 0;
    margin-bottom: 1.1rem;
  }
  .after .content .repair-list li {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.6;
    color: #5e8958;
    position: relative;
    padding: 0 0 0 1.5rem;
    letter-spacing: 0;
  }
  .after .content .repair-list li::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0rem;
    width: 0.85rem;
    height: 0.85rem;
    background: url(../images/after/dots-list.svg) no-repeat;
    background-size: contain;
  }
  .after .content .photo {
    margin: 0.4rem 0 0;
  }
  .after .content .photo img {
    width: 100%;
    height: auto;
  }
  .after .img {
    width: min(95%, 1200px);
    margin-inline: auto;
    margin-bottom: 2.8rem;
  }
  .after .img img {
    width: 100%;
    height: auto;
  }
  .after .bottom-txt .txt {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2.125;
    text-align: center;
    margin-bottom: 2.1rem;
  }
  .after .bottom-txt .txt:nth-child(2) {
    margin-bottom: 1.4rem;
  }
  .after .bottom-txt .lead {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.9;
    text-align: center;
    color: #5e8958;
    margin-bottom: 0;
  }
  .after .deco {
    position: absolute;
    bottom: 0;
    right: 16.6rem;
  }

  /* link
  -------------------------------------*/
  .link {
    background: #436788;
    padding: 0 0 1em;
    height: 20.6rem;
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
  }
  .link .link-box {
    background: #FFFFFF;
    top: -13.2rem;
    padding: 3.2rem 3.8rem 3rem;
    width: min(95%, 1100px);
    margin-inline: auto;
    position: relative;
  }
  .link .link-box .logo {
    text-align: center;
    margin-bottom: 1.9rem;
    width: 241px;
    margin-inline: auto;
  }
  .link .link-box .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
  .link .link-box img {
    width: 100%;
    height: auto;
  }
}



/* ========================================
@media screen and (min-width:768px) and (max-width:1440px)
======================================== */
@media screen and (min-width:768px) and (max-width:1440px) {
  .fv .enttl img{
    width: 91.736vw;
  }
  .section .ttl-box .num img {
    width: 10.069vw;
  }
  .after .ttl-box .num img {
    width: 12.639vw;
  }
  .section .ttl-box .enttl img {
    width: 33.611vw;
  }
  .after .ttl-box .enttl img {
    width: 36.25vw;
  }
  .after .deco {
    right: 18.403vw;
  }
  .after .deco img {
    width: 10.833vw;
  }
  .after .content {
    margin: 0 0 1.528vw 4.111vw;
  }
  .after .content .repair-list li {
    font-size: clamp(1.125rem, 0.982rem + 0.3vw, 1.25rem);
  }
  .after .bottom-txt .lead {
    font-size: clamp(1.125rem, 0.982rem + 0.3vw, 1.25rem);
  }
}


/* ========================================
@media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
  .main-title {
    margin-bottom: 0;
  }
    /* fv
  -------------------------------------*/
  .fv {
    background: url(../images/after/fv_sp.jpg) no-repeat center center/cover;
    max-width: 100vw;
    width: 100%;
    margin-inline: auto;
    text-align: center;
    padding: 16vw 0 1vw;
    position: relative;
  }
  .fv h2 {
    margin-bottom: 6vw;
    position: relative;
    display: inline-block;
    z-index: 3;
  }
  .fv h2::before {
    content: "";
    position: absolute;
    top: -10vw;
    left: -10vw;
    width: 14.495vw;
    height: 14.495vw;
    background: url(../images/after/fv-num_sp.svg) no-repeat;
    background-size: contain;
  }
  .fv h2 img {
    width: 30.92vw;
  }
  .fv .enttl {
    position: absolute;
    bottom: -0.2vw;
    left: 50%;
    transform: translateX(-50%);
    width: 101vw;
  }
  .fv .enttl img {width: 100%;}

  /* section-wrap
  -------------------------------------*/
  .section-wrap {
    padding: 9vw 0 73vw;
    max-width: 100vw;
    width: 100%;
    margin-inline: auto;
    background: transparent linear-gradient(180deg, #F4F1E966 0%, #EBE5D5 100%) 0% 0% no-repeat padding-box;
  }
  .section-wrap .lead {
    font-size:4.348vw;
    line-height: 1.66666;
    letter-spacing: 0.075em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 11.4vw;
  }
  .section-wrap .lead span {
    background: linear-gradient(transparent 75%, #FFF46C 30%);
  }

  .section-wrap .ttl-box {
    width: 89.375vw;
    margin-inline: auto;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 13.2vw;
  }
  .section-wrap .ttl-box li{
    position: relative;
    height: 33.7vw;
  }
  .section-wrap .ttl-box li a {
    color: #FFFFFF;
    padding: 3.6vw 0;
    font-size:4.831vw;
    line-height: 1.5;
    letter-spacing: 0.05em;
    font-weight: 700;
    display: grid;
    gap: 4.8vw;
    align-items: center;
    justify-content: center;
  }
  .section-wrap .ttl-box li:last-child a {gap: 1.4vw;}
  .section-wrap .ttl-box li:first-child {
    background: #A78F43;
  }
  .section-wrap .ttl-box li:first-child img {
    width: 8vw;
    margin-inline: auto;
  }
  .section-wrap .ttl-box li:last-child  {
    background: #5E8958;
  }
  .section-wrap .ttl-box li:last-child img {
    width: 10vw;
    margin-inline: auto;
  }
  .section-wrap .ttl-box li::after {
    position: absolute;
    content: "";
    bottom: -5vw;
    left: 50%;
    transform: translateX(-50%);
    width: 9.2vw;
    height: 5vw;
    background-size: contain;
  }
  .section-wrap .ttl-box li:first-child::after {
    background: url(../images/after/guarantee-arrow.svg) no-repeat;
    background-size: contain;
  }
  .section-wrap .ttl-box li:last-child::after {
    background: url(../images/after/after-arrow.svg) no-repeat;
    background-size: contain;
  }

   /* section共通
  -------------------------------------*/
  .section {
    width: 91.789vw;
    margin-inline: auto;
    background: #fff;
  }
  .section .inner {
    padding: 21vw 4.3vw 8.2vw;
    position: relative;
  }
  .section h2 {
    font-size:5.314vw;
    line-height: 1.63636;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #A78F43;
    margin-bottom: 5.4vw;
    position: relative;
    z-index: 2;
    text-align: left;
    margin-inline: auto;
    width: 45vw;
  }
  .section .ttl-box {
    position: absolute;
    display: flex;
    top: 7vw;
    left: 7vw;
    gap: 4vw;
    width: fit-content;
    margin: 0;
  }
  .section .lead {
    font-size:3.865vw;
    line-height: 1.875;
    letter-spacing: 0em;
    font-weight: 700;
    margin-bottom: 9vw;
    text-align: left;
  }

    /* guarantee
  -------------------------------------*/
  .guarantee {
    border: 0.5vw solid #a78f43;
    margin-bottom: 12vw;
  }
  .guarantee .content h3 {
    font-size:5.314vw;
    line-height: 1;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #FFFFFF;
    background: #A78F43;
    display: inline-block;
    padding: 1.7vw 2.4vw;
    position: relative;
    top: -4.6vw;
    margin-bottom: -1.2vw;
  }
  .guarantee .content02 h3 {padding: 1.7vw 1.9vw;}
  .guarantee .content03 h3 {padding: 1.7vw 1.7vw;}
  .guarantee .content .txt {
    font-size:3.382vw;
    line-height: 2;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 11vw;
  }
  .guarantee .content03 .txt {
    margin-bottom: 0;
  }
  .guarantee .content .photo img {
    width: 100%;
    height: auto;
  }

   /* after
  -------------------------------------*/
  .after {
    border: 0.5vw solid #5e8958;
  }
  .after h2 {
    color: #5E8958;
    width: 80vw;
    text-align: center;
  }
  .after .inner {padding: 21vw 4.3vw 33.2vw;}
  .after .ttl-box {gap: 0;left: 24vw;width: 82vw;}
  .after .ttl-box .num {position: absolute;top: 1vw;left: -17vw;}
  .after .content {display: grid;}
  .after .content .txt-box {
    order: 2;
  }
  .after .content .txt {
    font-weight: 500;
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 2;
    margin-bottom: 6.8vw;
  }
  .after .content .txt:nth-child(2) {
    margin-bottom: 2.4vw;
  }
  .after .content .repair-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4.6vw;
    margin-bottom: 4vw;
  }
  .after .content .repair-list li {
    font-weight: bold;
    font-size:3.865vw;
    line-height: 1.8;
    color: #5e8958;
    position: relative;
    letter-spacing: 0;
    padding: 0 0 0 5vw;
  }
  .after .content .repair-list li::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0rem;
    width: 3.2vw;
    height: 3.2vw;
    background: url(../images/after/dots-list.svg) no-repeat;
    background-size: contain;
  }
  .after .content .photo {order: 1;margin-bottom: 6.4vw;}
  .after .content .photo img {
    width: 100%;
    height: auto;
  }
  .after .img {
    margin-left: calc(50% - 50vw);
    width: 100vw;
    margin-bottom: 6vw;
  }
  .after .img img {
    width: 100%;
    height: auto;
  }
  .after .bottom-txt .txt {
    font-weight: 500;
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: left;
    margin-bottom: 6.2vw;
  }
  .after .bottom-txt .lead {
    font-weight: bold;
    font-size:4.348vw;
    line-height: 1.8888;
    text-align: left;
    color: #5e8958;
    margin-bottom: 0;
  }
  .after .deco {
    position: absolute;
    bottom: 0;
    left: 52.1%;
    transform: translateX(-50%);
    width: 31vw;
  }

  /* link
  -------------------------------------*/
  .link {
    background: #436788;
    padding: 0 0 6vw;
    height: 68vw;
  }
  .link .link-box {
    background: #FFFFFF;
    top: -53.8vw;
    padding: 7.2vw 6.5vw 7.2vw;
    width: 90.34vw;
    margin-inline: auto;
    position: relative;
  }
  .link .link-box .logo {
    text-align: center;
    margin-bottom: 7.2vw;
    width: 40.1vw;
    margin-inline: auto;
  }
  .link .link-box .list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5vw;
  }
  .link .link-box img {
    width: 100%;
    height: auto;
  }

}