@charset "UTF-8";

/*-- 770px Over landscape --*/
@media screen and (min-aspect-ratio: 127000/100000) and (min-width: 770px){
  .diary-title{
    font-size: 18px;
    margin-top: 4svh;
    line-height: 1.1;
    padding-bottom: 1.1svh;
    border-bottom: 1px dashed #999999;
  }

  .diary-text{
    font-size: 14px;
    margin-top: 4svh;
    margin-bottom: 4svh;
    text-align: justify;
  }

  .photo-vertical img{
    margin-top: 0.7svh;
    width: 67.5svh;
  }

  .photo-flex{
    display: flex;
    gap: 0.7svh;
  }

  .photo-flex img{
    width: 33.4svh;
  }

  .photo{
    margin-bottom: 5svh;
  }

  .fade-in{
    margin-bottom: 5svh;
    /* border-bottom: 1px dashed #999999; */
    opacity: 0;
    transition-duration: 3s;
    transform: translate(0, 0)
  }
  
  .scroll-in{
    opacity: 1;
    transform: translate(0, 0);
  }
  
  .right-rising{
    height: 8.89svh;
    margin-bottom: 5svh;
  }

  .right-rising hr{
    transform: rotate(-7.5deg);
    border-bottom: 1px solid #999999;
    transform-origin: 0% 100%;
    height: 8.89svh;
    width: 68.08svh;
  }

  .left-rising{
    height: 8.89svh;
    margin-bottom: 5svh;
  }

  .left-rising hr{
    transform: rotate(7.5deg);
    border-bottom: 1px solid #999999;
    transform-origin: 0% 0%;
    width: 68.08svh;
  }
}

/*-- 770px Over portrait --*//*-- 770px Under --*/
@media screen and (max-aspect-ratio: 126999/100000) and (min-width: 770px),(max-width: 769.8px) {
  .diary-section-1{
    margin-bottom: 38px;
    border-bottom: 1px dashed #999999;
  }

  .diary-title{
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 1.1;
  }

  .diary-text{
    font-size: 14px;
    margin-top: 30px;
    padding-right: 14px;
    margin-bottom: 30px;
    text-align: justify;
  }

  .photo-vertical img{
    margin-top: 0.97vw;
  }

  .photo-flex{
    display: flex;
    gap: 1%;
  }

  .photo-flex img{
    width: 49.5%;
  }

  .photo{
    margin-bottom: 35px;
  }

  .fade-in{
    margin-bottom: 38px;
    border-bottom: 1px dashed #999999;
    opacity: 0;
    transition-duration: 3s;
    transform: translate(0, 0)
  }
  
  .scroll-in{
    opacity: 1;
    transform: translate(0, 0);
  }  
}