@charset "utf-8";

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

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

}

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

.onlife__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);
  

}


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

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

.onlife__pc {
    display: none;
}

/* -- main visual pc -- */

@media screen and (min-width: 769px) {
    .header--onlife {
        padding: 120px 0;
        gap: 7%;
    }
    .onlife__sp {
        display: none;
    }   
    .onlife__pc {
        width: 50%;
        height: auto;
        display: block;
    }

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