/* ========================================
Base
======================================== */

body{

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-weight:400;

  line-height:1.9;

  letter-spacing:.03em;

}

/* ========================================
Headings
======================================== */

.section-title,
.hero-title,
.content-title,
.service-title,
.price-title{

  font-family:
    "Cormorant Garamond",
    "Noto Serif JP",
    serif;

  letter-spacing:.12em;

}

/* ========================================
Section
======================================== */

.section-label{

  font-size:12px;

  font-weight:500;

  letter-spacing:.3em;

  text-transform:uppercase;

}

.section-title{

  font-size:clamp(
    28px,
    3vw,
    48px
  );

  font-weight:300;

  line-height:1.4;

}

/* ========================================
Hero
======================================== */

.hero-subtitle{

  font-size:13px;

  font-weight:500;

  letter-spacing:.35em;

  text-transform:uppercase;

}

.hero-title{

  font-size:clamp(
    36px,
    4vw,
    60px
  );

	
  font-weight:300;

  line-height:1.3;

}

.hero-template-card_left .hero-title,
.hero-template-card_center .hero-title,
.hero-template-card_right .hero-title{

  font-size:clamp(
    25px,
    3vw,
    38px
  );

  line-height:1.4;

}


.hero-text{

  font-size:15px;

  line-height:2.2;

}

/* ========================================
Hero Button
======================================== */

.hero-btn{

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:13px;

  font-weight:500;

  letter-spacing:.15em;

  text-transform:uppercase;

}

/* ========================================
Hero Mobile
======================================== */

@media(max-width:768px){

 .hero-title{

    font-size:clamp(
      28px,
      8vw,
      42px
    );

    line-height:1.4;

  }

  .hero-text{

    font-size:16px;

    line-height:1.8;

  }

}

/* ========================================
Content
======================================== */

.content-title{

  font-size:clamp(
    26px,
    2.5vw,
    40px
  );

  font-weight:300;

  line-height:1.5;

}

.content-text{

  font-size:16px;

  line-height:2.2;

}

/* ========================================
Feature
======================================== */

.feature-title{

  font-size:22px;

  font-weight:400;

  line-height:1.6;

}

.feature-text{

  font-size:15px;

  line-height:2;

}

/* ========================================
Service
======================================== */

.service-title{

  font-size:clamp(
    24px,
    2.5vw,
    36px
  );

  font-weight:300;

  line-height:1.5;

}

.service-text{

  line-height:2.1;

}

/* ========================================
Flow
======================================== */

.flow-step{

  font-size:11px;

  font-weight:600;

  letter-spacing:.25em;

}

.flow-item-title{

  font-size:22px;

  font-weight:400;

}

.flow-item-text{

  line-height:2;

}

/* ========================================
Price
======================================== */

.price-title{

  font-size:28px;

  font-weight:300;

  line-height:1.5;

}

.price-amount{

  font-size:42px;

  font-weight:400;

}

.price-description{

  line-height:2;

}

/* ========================================
News
======================================== */

.news-title{

  font-size:22px;

  font-weight:400;

  line-height:1.7;

}

.news-text{

  line-height:2;

}

/* ========================================
Gallery
======================================== */

.gallery-card-body h3{

  font-size:1.3rem;

  font-weight:600;

  letter-spacing:.08em;

}

.gallery-card-body p{

  font-size:.95rem;

  line-height:2;

}

.gallery-card-body a{

  font-size:.9rem;

  letter-spacing:.08em;

  text-transform:uppercase;

}

/* ========================================
Table
======================================== */

.content-table{

  font-family:
    "Noto Sans JP",
    sans-serif;

}

.content-table th{

  font-weight:500;

}

.content-table td{

  line-height:2;

}

/* ========================================
Button
======================================== */

.btn-main,
.hero-btn,
.content-btn{

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:13px;

  font-weight:500;

  letter-spacing:.15em;

  text-transform:uppercase;

}

/* ========================================
SP
======================================== */

@media(max-width:768px){

  .section-title{

    font-size:28px;

  }

  .hero-title{

    font-size:40px;

  }

  .content-title{

    font-size:24px;

  }

  .service-title{

    font-size:24px;

  }

  .price-title{

    font-size:24px;

  }

  .price-amount{

    font-size:36px;

  }

  .feature-title{

    font-size:20px;

  }

  .news-title{

    font-size:20px;

  }

}

/* ========================================
FAQ
======================================== */

.faq-question{

  font-size:18px;

  font-weight:500;

  line-height:1.6;

}

.faq-answer-text{

  font-size:15px;

  line-height:2;

}

.team-card{

  background:#fff;

  border:
    1px solid
    rgba(
      0,
      0,
      0,
      .08
    );

  box-shadow:none;

}

.team-name{

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:30px;

  font-weight:500;

}

.team-position{

  letter-spacing:.2em;

  color:#8a7556;

}

.team-card img{

  border-radius:0;

}

/* ========================================
Voice
======================================== */

.voice-name{

  font-size:18px;

  font-weight:500;

  letter-spacing:.05em;

}

.voice-company{

  font-size:14px;

  line-height:1.8;

}

.voice-stars{

  font-size:18px;

}

.voice-comment{

  font-size:15px;

  line-height:2.1;

}

/* ========================================
CTA
======================================== */

.section-title{

  font-size:clamp(
    36px,
    4vw,
    56px
  );

  font-weight:300;

  line-height:1.2;

  letter-spacing:.08em;

}

.section-text{

  font-size:16px;

  line-height:2.2;
	
	margin-top:20px;

}

@media(max-width:991px){

  .secion-title{

    font-size:32px;

  }

}

/* ========================================
Logo
======================================== */

.logo-grid.grayscale img{

  filter:grayscale(100%);

  opacity:.7;

  transition:.3s;

}

.logo-grid.grayscale img:hover{

  filter:none;

  opacity:1;

}

/* ========================================
Fixed Footer
======================================== */

.fixed-footer-btn span{

  font-size:.75rem;

  letter-spacing:.08em;

  font-weight:500;

  text-transform:uppercase;

}

.fixed-footer-btn i{

  font-size:1rem;

}

/* ========================================
Contact
======================================== */

.contact-form{

  background:#fff;

  padding:48px;

  border-radius:0;

  border:1px solid rgba(0,0,0,.08);

}

.contact-form .form-label{

  letter-spacing:.08em;

}

.required{

  color:#a67c52;

}

.modal-content{

  border-radius:0;

}