/* ======================
hero
====================== */

.hero {
  position: relative;
  height: 670px;
  overflow: hidden;
  margin-top: 100px;
}

@media screen and (max-width: 768px) {
  .hero{
    margin-top: 72px;
    overflow: inherit;
    min-height: 700px;
    height:inherit;
  }
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  background:
    url("../images/hero.jpg") center center / cover no-repeat;
}

@media screen and (max-width: 768px) {
  .hero::after {
    width: 100%;
  background:
    url("../images/hero_sp.jpg") center center / cover no-repeat;

  }
}

/* グラデーション */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 20%,
      rgba(255,255,255,0) 45%
    );

  z-index: 1;
}

@media screen and (max-width: 768px) {
  .hero::before {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 20%,
      rgba(255,255,255,0) 45%
    );

  }
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__bg img {
  height: 100%;
  object-fit: cover;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.hero__content .header__inner{
  position:relative;
}

@media screen and (max-width: 768px) {
  .hero__content {
    justify-content:center;
    margin: 0 10px;
  }
  .hero__content::after {
    content:"";
    display:block;
    position:absolute;
    bottom:-20px;
    right:0;
    left:0;
    margin:auto;
    width:100%;
    max-width: 280px;
    aspect-ratio: 5/3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background:
        url("../images/hero_desc.svg") center center / contain no-repeat;
  }
  .hero__content .header__inner{
    justify-content:center;
  }
}

.hero__text {
  max-width: 520px;
  margin-top:55px;
}

@media screen and (max-width: 768px) {
  .hero__text {
    max-width: inherit;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin-top:20px;
  }
}

.hero__text h2 {
  font-size: 43px;
  letter-spacing: -0.05em;
  line-height: 200%;
  margin-bottom: 32px;
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .hero__text h2 {
    font-size:32px;
    margin-bottom: 0.5em;
    line-height: 170%;
  }
}

.hero__text-link{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.hero__text-link .arrow{
  margin-left:20px;
}

.hero__text-link a:nth-child(2){
  text-decoration:underline;
}

.hero__text-link a:nth-child(2):hover{
  text-decoration:none;
  color: #C49700;
}

@media screen and (max-width: 768px) {
  .hero__text-link{
    width:100%;
  }
  .hero__text-link .master-btn__text, .hero__text-link a:nth-child(2){
    font-size:12px;
  }
}

.hero__sub {
  display:block;
  color: #C49700;
  font-size: 12px;
  line-height:1;
  letter-spacing: 0.15em;
  margin-bottom: 24px;
}

@media screen and (max-width: 768px) {
  .hero__sub {
    margin-bottom: 0px;
    text-align:left;
  }
}

.hero__desc {
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .hero__desc {
    font-size:12px;
    width:100%;
    margin-bottom: 20px;
  }
}

.hero__time{
  position:absolute;
  right:0;
  top:30px;
}

.hero__time img{
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 768px) {
  .hero__time{
    display:none;
  }
}

.btn--gold .arrow::before, .btn--gold .arrow::after,{
  background-color: #C49700;
}

/* ======================
problem
====================== */

@media screen and (max-width: 768px) {
  .problem.section{
    padding-top:70px;
  }
}

.problem__wrap {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 60px;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .problem__wrap {
    gap:40px;
  }
}

.problem-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 0;
}

@media screen and (max-width: 768px) {
  .problem-card {
    padding: 10px 15px;
  }
}

.problem-card:not(:nth-of-type(n+3)) {
  border-bottom: 1px solid #C49700;
}

.problem-card:nth-of-type(n+3) {
  margin-bottom:1.5em;
}

.problem-card p{
  font-size:20px;
}

@media screen and (max-width: 768px) {
  .problem-card p{
    font-size:18px;
  }
  .problem-card p br{
    display:none;
  }
}

.problem-card__icon {
  width: 70px;
  height: 70px;
  min-width: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .problem-card__icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }
}

.problem-note{
  font-size:16px;
  text-align:center;
}

@media screen and (max-width: 768px) {
  .problem-note{
    line-height:1.7;
  }
}

/* ======================
approach
====================== */

@media screen and (max-width: 768px) {
  .approach .section-heading h2 span{
    font-size:36px;
  }
}

.approach-card {
  background: #fff;
  border: 1px solid #d8c59a;
  padding: 40px;
  margin-bottom: 40px;
}

.approach-card__head {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}

.approach-card__head .num {
  color: #b08b33;
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
}

.approach-card__head h3 {
  font-size: 28px;
  margin-bottom: 8px;
}

.approach-card__body {
  padding: 24px;
}

.approach-card {
  border: 1px solid #c8a54b;
  background: #f8f6f1;
  border-radius: 10px;
  overflow: hidden;
}

.approach-card__content{
  margin-bottom:20px;
}

@media screen and (max-width: 768px) {
  .approach-card__content{
    border-radius: 5px;
    border: 1px solid #C49700;
    background: #FAF5EC;
  }
}

.approach-card__content.-ap1{
  background: url(./../images/approach01_bg.jpg) top right /contain no-repeat ;
}

.approach-card__content.-ap2{
  background: url(./../images/approach02_bg.jpg) top right / 70% auto no-repeat ;
}

@media screen and (max-width: 768px) {
  .approach-card__content.-ap1{
    background:#FAF5EC;
  }
  .approach-card__content.-ap2{
    background:#FAF5EC;
  }
}

.approach-card__top {
  display: grid;
  grid-template-columns: 1fr 52%;
  align-items: stretch;
}

.approach-card__heading {
  display: flex;
  gap: 32px;
  margin-bottom: 28px;
}

@media screen and (max-width: 768px) {
  .approach-card__heading {
    margin-bottom: 0;
  }
}

.approach-card__num {
  color: #C49700;
  font-size: 50px;
  line-height: 1;
  font-weight: 400;
  font-family: serif;
  padding: 10px 28px 10px 10px;
  border-right: 1px solid #C49700;
}

.approach-card__eyebrow {
  color: #C49700;
  font-size: 10px;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}

.approach-card__title {
  font-size: 26px;
  line-height: 1.35;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .approach-card__title-wrap{
    display:grid;
  }
  .approach-card__eyebrow{
    grid-row: 2 / 4;
    text-align:center;
     margin:10px auto 16px;
  }
  .approach-card__title {
    text-align:center;
  }
  .approach-card__title span{
    display:none;
  }
}

.approach-card__lead {
  color: #C49700;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  margin: 10px 0;
}

@media screen and (max-width: 768px) {
  .approach-card__lead {
    margin-bottom: 0;
    line-height:1.4;
    color:#000;
    font-weight: 500;
  }
}

.approach-card__text {
  font-size: 14px;
  line-height: 2;
}

@media screen and (max-width: 768px) {
  .approach-card__text {
    line-height: 1.4;
  }
}

.approach-card__visual {
  position: relative;
  overflow: hidden;
}

.approach-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.approach-card__02note{
  width:400px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-radius: 5px;
  border: 1px solid #C49700;
  margin-bottom:20px;
}
@media screen and (max-width: 768px) {
  .approach-card__02note{
    display:none;
  }
}
.approach-card__02note p{
  padding:0 10px 10px;
  font-size:14px;
}
.approach-card__02note__image{
  height:134px;
  width:100%;
  object-fit:cover;
  border-bottom:1px solid #C49700;
}

.approach-detail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  background: #FAF5EC;
}
@media screen and (max-width: 768px) {
  .approach-detail {
    display:none;
  }
}

.approach-detail__item:not(:last-child) {
  padding-right:20px;
  border-right: 1px solid #C49700;
}

.approach-detail__item h3 {
  color: #C49700;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 10px;
}

.-ap3 .approach-detail__item h3{
  color: #000;
  padding-bottom:10px;
  border-bottom:1px solid #C49700;
}

.close {
  display:inline-block;
  position: relative;
  width: 32px;
  height: 32px;
}

.close::before,
.close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 1px;
  background: #C49700;
  transform-origin: center;
}

.close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}


.approach-detail__image img {
  width: 100%;
  object-fit: contain;
}

.approach-detail__picup{
  width:100%;
  height:32px;
  line-height:32px;
  color:#fff;
  text-align:center;
  background: #C49700;
  margin-top:10px;
}

.approach-detail li{
  font-size:14px;
}

/* =========================================
responsive
========================================= */

@media screen and (max-width: 1024px) {

  .approach-card__top {
    grid-template-columns: 1fr;
  }

  .approach-card__title {
    font-size: 42px;
  }

  .approach-detail {
    grid-template-columns: 1fr;
  }

  .approach-detail__item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #c8a54b;
  }
}

@media screen and (max-width: 768px) {

  .approach-card__content {
    padding: 15px;
  }

  .approach-card__heading {
    flex-direction: column;
    gap: 20px;
  }

  .approach-card__num {
    border-right: none;
    padding: auto 0;
    font-size: 32px;
    text-align:center;
  }

  .approach-card__title {
    font-size: 26px;
  }

  .approach-card__text {
    font-size: 16px;
  }
}

/* ======================
philosophy
====================== */

.philosophy {
  padding: 60px 0;
  background: url(../images/philosophyBg.png) no-repeat top;
  background-size: cover;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .philosophy {
    padding:80px 0 60px;
  }
}

.philosophy h2{
  font-size:34px;
  margin-bottom: 32px;
}

@media screen and (max-width: 768px) {
  .philosophy h2{
    font-size:24px;
    text-align:center;
  }
}

.philosophy__wrap {
  display: grid;
  grid-template-columns:30% 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom:70px;
}

@media screen and (max-width: 768px) {
  .philosophy__wrap {
    gap:20px;
    margin-bottom:30px;
  }
}

.philosophy__sub {
  color: #C49700;
  margin-bottom: 8px;
  line-height:1;
}

@media screen and (max-width: 768px) {
  .philosophy__sub{
    text-align:center;
  }
}

@media screen and (max-width: 768px) {
.philosophy__p{
  line-height: 170%;
}
}

.philosophy__image{
  position: relative;
  height:100%;
}

.philosophy__image::before{
  content:"";
  display:inline-block;
  position: absolute;
  left:-20px;
  width:auto;
  height:100%;
  aspect-ratio:10 / 9;
  background:url("./../images/philosophyGlove.png") left /contain no-repeat;
}

@media screen and (max-width: 768px) {
  .philosophy__image::before{
    position:inherit;
    width:100%;
    height:auto;
    left:inherit;
  }
}

.philosophy__content{
  z-index: 1;
}

.philosophy__content p span{
  font-size:36px;
}

@media screen and (max-width: 768px) {
  .philosophy__content p span{
    font-size:16px;
  }
}

.philosophy-detail{
  position:relative;
  display:flex;
  gap:20px;
  z-index:1;
}

@media screen and (max-width: 768px) {
  .philosophy-detail{
    flex-direction:column;
  }
}

.philosophy-detail__item{
  display:flex;
  gap:16px;
}

.philosophy-detail__item h3{
  font-size:20px;
}

@media screen and (max-width: 768px) {
  .philosophy-detail__item h3{
    font-size:16px;
  }
}

.philosophy-detail__item:not(:last-child) {
  padding-right:20px;
  border-right: 1px solid #C49700;
}

@media screen and (max-width: 768px) {
  .philosophy-detail__item{
      padding: 0 20px;
  }

  .philosophy-detail__item:not(:last-child) {
    padding-right:0px;
    padding-bottom:20px;
    border-right:none;
    border-bottom: 1px solid #C49700;
  }
}

.philosophy-detail__image{
  width:60px;
  aspect-ratio:1 /1;
}

.philosophy-detail__image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* ======================
ad
====================== */
.ad{
  background:url(./../images/stoneboard.png) no-repeat;
  background-size:cover;
  padding: 5px;
  margin:50px auto;
  width:90%;
}

@media screen and (max-width: 768px) {
  .ad{
    margin-bottom:30px;
    background:url(./../images/stoneboard_sp.png) no-repeat;
    background-size:cover;
  }
}

.ad p{
  font-size: 20px;
  font-weight: bold;
  line-height: 140%;
}
.ad-wrapper{
  border: 1px solid #C49700;
  display:flex;
  justify-content: center;
  align-items:center;
  gap:50px;
  padding:30px 15px 20px;
}
@media screen and (max-width: 768px) {
  .ad-wrapper{
    flex-direction:column;
  }
}
.ad-box01{
  display:flex;
  gap:20px;
}

@media screen and (max-width: 768px) {
  .ad-box01{
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  .ad-box01 .c-gold{
    text-align:center;
  }
}

.ad-box01 img{
  width:108px;
  height:58px;
}

.ad-box02{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ad-box02 a {
  width: 300px;
  height: 60px;
  padding:3px;
  line-height: 60px;
  display: block;

  text-align: center;
  letter-spacing: 0.1em;
  overflow: hidden;
  transition: color 0.3s ease;
  font-weight:500;
}

.ad-box02 .ad-box02__inner {
  position: relative;
  z-index: 1;
  border: 1px solid #C49700;
  display: flex;
  align-items: center;
  justify-content: center;
  height:100%;

}

.ad-box02 .arrow::before, .ad-box02 .arrow::after{
  right:40px;
}

.ad-box02 span{
  text-align: center;
}


/* ======================
feature
====================== */

.feature__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.feature-card {
border-radius: 5px;
border: 1px solid #C49700;
}

.feature-card__body{
  padding:20px 0;
}

.feature-card__body p{
  padding:24px 20px;
}

.feature-card__body h3 {
  font-size: 30px;
  margin: 0 auto 10px;
  text-align:center;
}

@media screen and (max-width: 768px) {
  .feature-card__body h3 {
    font-size: 20px;
  }
}

.feature__grid a{
  display:block;
  text-align:center;
  text-decoration:underline;
  font-weight:500;
}

.feature__grid a:hover{
  text-decoration:none;
}

.feature__grid a .arrow::before, .feature__grid a  .arrow::after{
 background: #C49700;
 right:-20px;
}

/* ======================
plan
====================== */

.plan-box {
  border: 1px solid #C49700;
  border-radius: 5px;
  padding: 20px;
  display:flex;
  align-items:center;
  gap:60px;
}

@media screen and (max-width: 768px) {
  .plan-box {
    flex-direction: column;
    gap:30px;
  }
}

.plan-box__item{
  flex:1;
  ul{
    list-style:disc;
    list-style-position: inside;
  }
}

@media screen and (max-width: 768px) {
  .plan-box__item{
    width:100%;
  }
}

.plan-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #C49700;
}

.plan-row:last-child {
  border-bottom: none;
}

@media screen and (max-width: 768px) {
  .plan-row:last-child {
    border-bottom:1px solid #C49700;
  }
}

.plan-row__box01{
  display:flex;
  align-items:center;
  gap:24px;
  flex:1;
}

.plan-row__box02{
  flex:1;

}

@media screen and (max-width: 768px) {
  .plan-row__box02{
    width:100%;
  }
  .plan-row__box02 .txt-small{
    text-align:center;
    display:block;
  }
}

.planIcon{
  width:74px;
  height:50px;
  padding:6px;
  border-right: 1px solid #C49700;
}

.planIcon img{
  height:100%;
  width:auto;
  object-position:center;
  object-fit:contain;
}

.plan-row .label {
  font-size: 16px;
  font-weight: bold;
}

.plan-row .price {
  line-height:1;
  font-size: 42px;
  font-weight: 700;
  color: #C49700;
  text-align:left;
}

@media screen and (max-width: 768px) {
  .plan-row .price {
    text-align:center;
    margin-bottom:10px;
  }
}

.plan-row .price span {
  font-size: 20px;
}

.plan__note{
  display:flex;
  gap:20px;
  margin:20px auto;
}

.plan__note .border{
  padding:14px 20px;
}

@media screen and (max-width: 768px) {
  .plan__note{
    flex-direction:column;
  }
}

.plan__note li{
  font-size:16px;
}

.plan__note__img{
  flex:20%;
}

.plan__info{
  background: #F1F1F1;
  padding:8px 20px 10px;
  border-radius:5px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

@media screen and (max-width: 768px) {
  .plan__info{
    flex-direction:column;
    gap:20px;
  }
  .plan__info > div{
    width:100%;
  }
}

.plan__info h3{
  display:inline-block;
  line-height:1.3;
  margin-bottom:10px;
  border-bottom:1px solid #C49700;
}

.plan__info{
  font-size: 24px;
}

.plan__info .txt-normal{
}

.plan__info .txt-small{
  display:inline-block;
  line-height:1.5;
  margin:10px auto 0;
}

@media screen and (max-width: 768px) {
  .plan__info .master-btn{
    width:100%;
  }
}

/* ======================
message
====================== */

.message{
  background:#000;
}

.message h2, .message .section-heading p{
  color:#fff;
}

.message .section-heading{
  background:
  linear-gradient(
    270deg,
    rgba(0, 0, 0, 0) 36.37%,
    #000 57.94%
  ) right 30% / contain no-repeat,
   url(./../images/messageBg.jpg) right 30% / contain no-repeat;
}

@media screen and (max-width: 768px) {
  .message .section-heading{
    background:
     url(./../images/messageBg.jpg) bottom / contain no-repeat;
   padding-bottom:300px;
  }
}

.message .section-heading p{
  width:60%;
  margin-top:20px;
}

@media screen and (max-width: 768px) {
  .message .section-heading p{
    width:100%;
    line-height:240%;
  }
}

/* ======================
access
====================== */

.access__wrap {
  display: flex;
  gap: 40px;
}

@media screen and (max-width: 768px) {
  .access__wrap {
    flex-direction:column;
  }
}

.access__map {
  padding: 20px;
}

.access__info {
  border: 1px solid #ddd;
  padding: 40px;
}

.access__info dl {
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
}

.access__info dl:last-child {
  border-bottom: none;
}

.access__info dt {
  font-weight: 700;
  margin-bottom: 8px;
}

.access__img{
  display:flex;
  gap:20px;
  margin:20px auto;
}

@media screen and (max-width: 768px) {
  .access__img{
    flex-direction:column;
  }
}

@media screen and (min-width: 769px) {
  .access__img > div {
    width:50%;
  }
}

.access__img figure {
    width: 100%;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    border-radius: 5px;
}

.access__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.access-section {
  display: flex;
  gap: 40px;
  align-items: stretch;
  max-width: 1300px;
  margin: 0 auto;
}

.access-map {
  width: 48%;
  border-radius: 5px;
  border: 1px solid #C49700;
  overflow:hidden;
}

@media screen and (max-width: 768px) {
  .access-map {
    width:100%;
    aspect-ratio:1/1;
  }
}

.access-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid #c79a2b;
  border-radius: 8px;
}

.access-info {
  width: 52%;
  border-top: 1px solid #d8b04c;
}

.access-item {
  display: flex;
  align-items:center;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #d8b04c;
}

.access-item__min li{
  line-height:1.3;
}

.access-item__min span{
  font-size: 1.5em;
}

.access-item.no-border {
  border-bottom: none;
}

.access-icon {
  width: 26px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

@media screen and (max-width: 768px) {
  .access-icon {
    display:none;
  }
}

.access-icon img {
  width: 42px;
  height: auto;
  object-fit:contain;
}

.access-content {
  display: flex;
  align-items:center;
  gap: 40px;
  width: 100%;
}

.access-content h3 {
  min-width: 120px;
  font-size: 16px;
  font-weight: 700;
  color: #C49700;
  margin: 0;
  line-height: 1.6;
}

.access-content p, .access-content ul {
  position:relative;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.access-content p::before, .access-content ul::before{
  position:absolute;
  left:-20px;
  content:"";
  display:block;
  width: 1px;
  height:100%;
  background: #C49700;
}

@media screen and (max-width: 768px) {
  .access-content p::before, .access-content ul::before{
    display: none;
  }
}

/* レスポンシブ */
@media screen and (max-width: 900px) {
  .access-section {
    flex-direction: column;
  }

  .access-map,
  .access-info {
    width: 100%;
  }

  .access-content {
    flex-direction: column;
    gap: 10px;
  }

  .access-content h3 {
    min-width: auto;
    font-size: 16px;
    display:flex;
    align-items:center;
    gap:10px;
  }

  .access-content h3:before{
    content:"";
    display:inline-block;
    width: 28px;
    aspect-ratio:1 / 1;
  }

  .access-item:nth-of-type(1) .access-content h3:before{
    background:url(./../images/access01.svg) center /contain no-repeat;
  }
  .access-item:nth-of-type(2) .access-content h3:before{
    background:url(./../images/access02.svg) center /contain no-repeat;
  }
  .access-item:nth-of-type(3) .access-content h3:before{
    background:url(./../images/access03.svg) center /contain no-repeat;
  }

  .access-content p {
    font-size: 16px;
  }
}
/* ======================
responsive
====================== */

@media screen and (max-width: 768px) {

  .problem__wrap,
  .feature__grid,
  .access__wrap,
  .philosophy__wrap {
    grid-template-columns: 1fr;
  }

  .approach-card {
    padding: 24px;
  }

  .plan-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .header__inner {
    padding: 0 20px;
  }

  .header__right {
    gap: 12px;
  }

  .header__tel {
    font-size: 18px;
  }

}