@charset "utf-8";


/* ===============
main visual
=============== */
.header--contact {
     position: relative;
    text-align: center;
  
    padding: 60px 10%;
    z-index: 2;
    color: #7a5c42;
}

.contact__title{
  display: flex;
  align-items: center; 
  gap: 5%;   
  padding: 0px 10% !important; 

}

.contact__sp{
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 240px;
}

.contact__pc {
    display: none;
}

.contact__titletxt{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.1em;
  font-weight: 300;
  color: var(--primary-black);
  margin: 20px 0 0;


}


.fade-in span {
  display: inline-block;
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}



/* -- main visual pc -- */

@media screen and (min-width: 769px) {
    .header--contact  {
        padding: 120px 0;
        gap: 2.3%;
    }
    
    .contact__pc {
        width: 50%;
        height: auto;
        display: block;
    }
    .contact__sp {
        display: none;
    }
    .contact__title{
      gap: 7%;   
      padding: 0px 10%;
    }

    .contact__titletxt{
        writing-mode: horizontal-tb;
        font-size: 1.8rem;
        line-height: 2;
        margin: 145px 0 0 ;
    }

    
}



    /* Keep this small: only what your existing CSS likely doesn’t define */
    .embedFrame {
      width: 100%;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }

    .embedFrame iframe {
      width: 100%;
      height: 80vh;
      min-height: 700px;
      border: 0;
      display: block;
    }

    .mapFrame {
      width: 100%;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      background: #eaeaea;
      aspect-ratio: 16 / 9;
      min-height: 260px;
    }

    #map {
      width: 100%;
      height: 100%;
    }

    /* optional: tighten spacing to match your sections */
    .section--contactpage .section__lead {
      margin-top: 8px;
      margin-bottom: 18px;
    }