@charset "UTF-8";

/* ==================================================================
    main layout
===================================================================== */

  /* ===== Main Grid ===== */
  .main {
    display: grid;
    grid-template-columns: 64rem 1fr 27rem;
    gap: 5rem;
    padding: 22rem 0 10rem;
  }
/* ===== left_wrap column ===== */
    .left_wrap {
      display: flex;
      flex-direction: column;
      gap: 4rem;
    }
  .card-image {
    position: relative;
    border-radius: 4px;
    /* background: #d8d8d8; */
  }
  .card-image .photo {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    img{
      display:block;
      width: 100%;
      height: auto;
    }
  }

  .badge {
    position: absolute;
    top: 3rem;
    left: -3rem;
    background: var(--point);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 2px;
    z-index: 2;
  }
  .card-caption {
    position: absolute;
    left: 5.4rem;
    bottom: 3.8rem;
    color: #fff;
    font-size: 4.8rem;
    font-weight: 700;
    /* text-shadow: 0 1px 8px rgba(0,0,0,.25); */
    line-height:  116.667%;
  }
  .card-caption small {
    display: block;
    font-weight: 400;
    opacity: .9;
    margin-top: 6px;
    text-shadow: none;
    font-size: 2.4rem;
  }

    .slider-dots {
    display: flex; gap: 7px;
    margin-bottom: 6px;
  }
  .slider-dots span {
    width: 8px; height: 8px; border-radius: 50%;
    background: #d0d0d0;
  }
  .slider-dots span.active { background: var(--point); width: 22px; border-radius: 4px; }




  .card-2 {background: #2a2a2a;}
  .card-2 .card-caption {
    font-size: 3.8rem;
    letter-spacing: -1.9px;
    color: #FFFFFF;
    line-height: normal;
    font-weight: 800;
  }
  .card-2 .photo {
   
  }
.card-2 .card-caption small {
    font-size: 2rem;
    /* letter-spacing: -1.4px; */
    /* font-weight: 800; */
}

.card-3 {background: #1c1c1c;}
  .card-3 .photo {

  }
  .stat-big {
    position: absolute;
    right: 5rem;
    bottom: 10rem;
    color: #fff;
    font-size: 16rem;
    letter-spacing: -0.08em;
    line-height: 1;
    font-family: "Barlow", sans-serif;
    font-weight: 500;

  }
  .stat-desc {
    position: absolute;
    right: 5rem;
    bottom: 3rem;
    color: var(--fff);
    font-size: 2.4rem;
    text-align: right;
    font-weight: 600;
  }

  /* ===== Center column ===== */
  .center_wrap {display: flex;flex-direction: column;/* gap: 28px; */}

  .hero {
    /* padding-top: 30px; */
    border-bottom: 1px solid var(--line);
  }
  .hero-title {
    font-size: 11rem;
    letter-spacing: -2px;
    color: #222;
    line-height: 1;
    margin-bottom: 18px;
    font-weight: 700;
    letter-spacing: 7%;
  }
  .hero-title span {color: var(--point);/* margin: 0 -2px; */}
  .hero-desc {
    font-size: 1.6rem;
    margin-bottom: 6.5rem;
    line-height: 137.5%;
    color: #656565;
  }
  .hero-desc b { color: var(--point); font-weight: 600; }

  .services { display: flex; flex-direction: column; }
  .service-item {
    padding: 3.8rem 0 4rem 0;
    border-bottom: 1px solid var(--line);
  }
  .service-tag {
    font-size: 2rem;
    color: var(--333);
    margin-bottom: 6px;
    font-weight: 600;
  }
  .service-title {
    font-size: 3.8rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -1px;
    margin-bottom: 8px;
  }
  .service-desc {font-size: 1.7rem;color: var(--333);font-weight: 500;}

  .section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 3.8rem 0  0;
    
    
    
    
    
    
    
    
    
    
    &.notice{
      h3{
        font-size: 1.8rem;
        color: #343434;
        font-weight: 600;
      }

    }
  }
  .section-title .sub {
    font-size: 2rem;
    color: var(--333);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
  }
  .section-title .sub::after {
    content: '\E8D1';
    color: var(--point);
    font-size: 10px;
    font-family: 'icon_font';
  }
  .section-title h3 {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: -1px;
    color: #1a1a1a;
  }
  .section-title .more {font-size: 1.4rem;color: #323232;font-weight: 600;}

  .col-list {border-top: 2px solid #323232;}
  .col-list li {
    padding: 1.5rem 0;
    border-bottom: 1px solid #ACACAC;
    font-size: 1.8rem;
    color: #373737;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color .15s;
    font-weight: 500;
    a{
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .col-list li:hover { color: var(--point); }
  .col-list li .date {color: #aaa;font-size: 1.5rem;color: #676767;font-weight: 500;}

  .map-block { margin-top: 8px; }
  .map-block .label {margin-bottom: 2rem;color: #343434;font-weight: 600;margin-top: 3rem;}
  .map-block .addr {
    font-size: 2rem;
    color: #373737;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
  }
  .map-block .pin {
    width: 16px; height: 16px;
    background: var(--point);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: inline-block;
  }

  /* ===== right_wrap column ===== */
  .right_wrap {
    display: flex;
    flex-direction: column;
    /* gap: 2rem; */
    
    
    
    
     
    > div{
      h4{
        margin-bottom: 1.5rem;
        font-weight: 600;
        color: #333;
      }
    }
   }


  /* Quick form */
  .quick {
    /* border-top: 1px solid #222; */
    padding-top: 18px;
  }
  .quick-title {
    font-weight: 700;
    margin-bottom: 12px;
  }
  .quick input[type="text"], 
  .quick input[type="tel"], 
  .quick textarea {
    width: calc(100% - 20px);
    border: 1px solid #e2e2e2;
    background: #fafafa;
    padding: 10px 12px;
    font-size: 1.4rem;
    margin-bottom: 6px;
    font-family: inherit;
    color: #333;
    font-weight: 500;
  }
  .quick textarea { resize: none; min-height: 60px; }
  .quick .agree {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 10px;
    font-weight: 600;
  }
  .quick .agree a {/* color: var(--point); *//* text-decoration: underline; */color: #333;}
  .btn-submit {
    width: 100%;
    border: 1px solid var(--point);
    color: var(--point);
    background: #fff;
    padding: 12px;
    font-size: 1.8rem;
    border-radius: 2px;
    transition: all .2s;
    display: block;
    font-weight: 600;
    cursor: pointer;
  }
  .btn-submit:hover {background: var(--point);color: #fff;}

  /* FAQ */
  .faq {/* border-top: 1px solid #222; */padding-top: 5.5rem;}
  .faq-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    border-bottom: 2px solid #323232;
    
    
    
    
    
    
    
    
    
    
    
    
    h4{
      margin-bottom: 0;
    }
  }
    .faq-head .more {font-size: 1.4rem;color: #323232;font-weight: 600;}
  .faq-list li {
    display: flex;
    gap: 8px;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--line-soft);
    /* font-size: 12.5px; */
    line-height: 122.222%;
    color: #373737;
    font-weight: 500;
    a{
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 2;
    }
  }
  .faq-list li::before {
    content: 'Q';
    width: 2.2rem;
    height: 2.2rem;
    background: #323232;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1rem;
    margin-top: .5rem;
  }

  /* Calendar */
  .calendar {/* border-top: 1px solid #222; */padding-top: 3rem;}
  .calendar h4 {font-weight: 700;/* margin-bottom: 10px; */}
 

  /* Contact */
  .contact {padding-top: 18px;}
  .contact h4 {font-weight: 700;margin-bottom: 6px;}
  .contact .tel {
    font-size: 4rem;
    color: #1a1a1a;
    margin-bottom: 12px;
    font-weight: 600;
    font-family: 'Barlow';
    letter-spacing: 0.2rem;
  }
  .hours {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    font-size: 1.4rem;
    color: #747474;
    font-family: Barlow;
    font-weight: 600;
    letter-spacing: 0;
    text-align: right;
  }
  .hours .day {color: #747474;text-align: left;}

  /* ===== Process ===== */
  .process {
    padding: 5rem 2.5rem;
    border-top: 1px solid var(--line);
    max-width:140rem;
    margin:0 auto;
  }
  .process h2 {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 36px;
    color: #000;
  }
  .steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    position: relative;
  }
  .step { text-align: center; position: relative; }
  .step:not(:last-child)::after {
    content: '▶';
    position: absolute;
    right: -14px;
    top: 42%;
    transform: translateY(-50%);
    color: #9D9D9D;
    font-size: 16px;
    z-index: 2;
  }
  .step .thumb {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 12px;
    img{
      display:block;
      margin:0 auto;
    }
   
  }

  .step .label {font-weight: 600;color: #343434;}

      /* ==================================================================
      Responsive
  ===================================================================== */

  /* Large desktop ~ 1440px : keep edge padding */
  /* @media screen and (max-width: 1440px) {
    .main {
      grid-template-columns: 52rem 1fr 26rem;
      gap: 4rem;
      padding: 18rem 2.5rem 8rem;
    }
    .hero-title { font-size: 9rem; }
    .stat-big { font-size: 12rem; right: 3rem; bottom: 8rem; }
    .stat-desc { right: 3rem; bottom: 2.5rem; }
    .card-caption { left: 4rem; bottom: 3rem; font-size: 4rem; }
    .badge { left: -2rem; }
  } */

  /* Small desktop / large tablet : narrower left column */
  /* @media screen and (max-width: 1280px) {
    .main {
      grid-template-columns: 38rem 1fr 24rem;
      gap: 3rem;
      padding: 16rem 2.5rem 7rem;
    }
    .hero-title { font-size: 7.5rem; }
    .service-title { font-size: 3.2rem; }
    .card-caption { font-size: 3.4rem; left: 3rem; bottom: 2.5rem; }
    .card-2 .card-caption { font-size: 3rem; }
    .card-2 .card-caption small { font-size: 1.6rem; }
    .stat-big { font-size: 9rem; bottom: 6rem; }
    .stat-desc { font-size: 1.8rem; }
    .contact .tel { font-size: 3rem; }
  } */

  /* Tablet : right column drops below center, left + center side-by-side */
  /* @media screen and (max-width: 1024px) {
    .main {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem 3rem;
      padding: 14rem 2.5rem 6rem;
    }
    .left_wrap  {grid-column: 1 / 2;}
    .center_wrap { grid-column: 2 / 3; }
    .right_wrap {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3rem 4rem;
      align-items: start;
      border-top: 1px solid var(--line-soft);
      padding-top: 4rem;
      margin-top: 2rem;
    }
    .right_wrap .brand { grid-column: 1 / -1; max-width: 24rem; }
    .right_wrap .brand img { width: 100%; height: auto; }

    .hero-title { font-size: 6.4rem; }
    .hero-desc { font-size: 1.5rem; margin-bottom: 4rem; }
    .service-item { padding: 2.8rem 0 3rem; }
    .service-title { font-size: 2.8rem; }
    .service-desc { font-size: 1.5rem; }
    .section-title h3 { font-size: 3rem; }
    .stat-big { font-size: 8rem; bottom: 5rem; right: 2.5rem; }
    .stat-desc { font-size: 1.6rem; right: 2.5rem; bottom: 2rem; }

    .steps { grid-template-columns: repeat(5, 1fr); gap: 8px; }
    .step:not(:last-child)::after { right: -10px; font-size: 12px; }
  } */

  /* Mobile */

    
  @media screen and (max-width: 768px) {
    .main {display: flex;gap: 4rem;padding: 10rem 2rem 5rem;flex-direction: column;}
  .left_wrap  {gap: 2.5rem;/* order: 2; */}
    .center_wrap { order: 1; gap: 0; }
    .right_wrap {
      order: 3;
      display: flex;
      flex-direction: column;
      gap: 3rem;
      grid-template-columns: none;
      border-top: 0;
      padding-top: 0;
      margin-top: 0;
    }
        .right_wrap .brand { display: none; }

    .badge {
      left: 2rem;
      /* top: 1.5rem; */
      /* font-size: 1.4rem; */
      padding: 5px 10px;
    }
    .card-caption {
      left: 2rem;
      bottom: 2rem;
      font-size: 3rem;
    }
    .card-2 .card-caption {font-size: 2.6rem;letter-spacing: -.5px;}
    .card-2 .card-caption small {/* font-size: 1.4rem; */}
    .stat-big {
      font-size: 10rem;
      right: 2rem;
      bottom: 8rem;
    }
    .stat-desc {
      font-size: 2.4rem;
      right: 2rem;
      bottom: 2rem;
    }

    .hero { padding-top: 1rem; }
    .hero-title {
      font-size: 5.2rem;
      /* letter-spacing: -1px; */
      margin-bottom: 1.4rem;
    }
    .hero-desc {
      /* font-size: 2rem; */
      margin-bottom: 3.5rem;
      /* line-height: 1.55; */
    }
    .hero-desc br { display: none; }

    .service-item { padding: 2.4rem 0 2.4rem; }
    .service-tag {/* font-size: 1.5rem; */}
    .service-title { font-size: 2.4rem; margin-bottom: 4px; }
    .service-desc {/* font-size: 1.4rem; */}

    .section-title {
      padding: 3rem 0 0;
      margin-bottom: 1.4rem;
    }
    .section-title h3 { font-size: 2.4rem; }
    .section-title .sub {/* font-size: 1.5rem; */}
    .section-title .more {/* font-size: 1.3rem; */}

    .col-list li {
      /* font-size: 1.5rem; */
      padding: 1.2rem 1rem;
      gap: 1rem;
    }
    .col-list li .date {/* font-size: 1.3rem; */}

    .map-block .addr {/* font-size: 1.6rem; */}
    .map-block .addr svg { width: 24px; height: 24px; flex-shrink: 0; }

    .quick { padding-top: 0; }
  .quick input[type="text"], 
  .quick input[type="tel"], 
  .quick textarea {
      width: 100%;
      box-sizing: border-box;
      font-size: 2rem;
    }
    .quick textarea { min-height: 8rem; }
    .quick .agree {/* font-size: 1.3rem; */flex-wrap: wrap;}
    .btn-submit {/* font-size: 1.6rem; *//* padding: 1.4rem; */}

    .faq {padding-top: 0;}
    .faq-list li {/* font-size: 1.4rem; */padding: 1.2rem 0;}
    .faq-list li::before {
      /* width: 2rem; */
      /* height: 2rem; */
      /* font-size: 1.3rem; */
    }

    .calendar { padding-top: 0; }
    .calendar img { width: 100%; height: auto; display: block; }

    .contact { padding-top: 0; }
    .contact .tel {font-size: 5rem;}
    .hours {font-size: 2rem;}

    .right_wrap > div h4 {/* font-size: 1.8rem; */margin-bottom: 1.2rem;}

    /* Process */
    .process { padding: 4rem 2rem; }
    .process h2 {
      /* font-size: 2.2rem; */
      margin-bottom: 2.4rem;
    }
    .steps {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem 1.6rem;
    }
    .step:not(:last-child)::after { display: none; }
    .step .label {/* font-size: 1.4rem; */}
    .step .thumb { margin-bottom: 8px; }
    .step .thumb img { width: 100%; }

      /* Small mobile */
  @media screen and (max-width: 480px) {
    .main {padding: 9rem 1.6rem 4rem;gap: 3rem;}
    .hero-title {/* font-size: 4.4rem; */}
    .service-title {/* font-size: 2.1rem; */}
    .section-title h3 {/* font-size: 2.1rem; */}
    .card-caption {/* font-size: 2.6rem; *//* left: 1.6rem; *//* bottom: 1.6rem; */}
    .card-2 .card-caption {/* font-size: 2.2rem; */}
    .stat-big {/* font-size: 5rem; *//* bottom: 3rem; *//* right: 1.6rem; */}
    .stat-desc {/* font-size: 1.3rem; *//* right: 1.6rem; *//* bottom: 1.2rem; */}
    .contact .tel {/* font-size: 2.8rem; */letter-spacing: .1rem;}
    .process { padding: 3rem 1.6rem; }

  }

    
  }