@charset "UTF-8";

/*--------------------------------------------
SWIPER
---------------------------------------------*/

.photo-section-text{
  flex-wrap: wrap;
  height: auto;
  padding-block : 12px;
  .photo-section-text-pn{
    align-items: end;
    margin-left: auto;
    p{
      padding-block: 7px;
    }
  }
  :is( .swiper-button-prev , .swiper-button-next ){
    margin-top: 0;
  }
  .swiper-button{
    justify-content: space-between;
    flex-shrink: 0;
  }
  .swiper-button-prev{
    left: 0;
  }
  .swiper-button-next{
    right: 0;
  }
  @media screen and ( width <= 450px ){
    .imageCounter{
      margin-right : calc( 25 * 100vw / 450 );
    }
  }
  @media screen and ( 450px < width <= 768px ){
    .swiper-button{
      width: calc( 244 * 100vw / 768 );
      :is( .swiper-button-prev , .swiper-button-next ){
        width: calc( 120 * 100% / 244 );
        height: calc( 50 * 100vw / 768 );
      }
    }
  }
  @media screen and ( width > 768px ){
    .swiper-button{
      width: 244px;
    }
  }
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
footer #links{
  ul{
    display: grid;
    grid-template-columns: repeat( 2 , auto );
    column-gap : 40px;
    row-gap: 24px;
  }
  li{
    a{
      display: grid;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      grid-template-columns: 1fr auto;
      line-height: 1;
      &:after{
        content:"";
        display: block;
        font-size: 0;
        background : url( "../img/ui/arrow/arrow01.svg" ) center / contain no-repeat;
        width: auto;
        aspect-ratio: 14/11;
        height: 11px;
        width: auto;
      }
    }
  }
  @media screen and ( width <= 768px ){
    display: block;
    height: auto;
    padding-block: 75px;
    > div{
      width: 100%;
    }
    p{font-size: 10px;
      line-height: 1;
    }
    h3{
      font-size: 22px;
      line-height: 1;
      margin-top: 10px;
    }
    ul{
      margin-top: 64px;
    }
    li{
      min-width: 100px;
    }
    .links-right{
      margin-top: 75px;
    }
    .button-like{
      width: 240px;
      margin-inline : auto;
    }
  }
  @media screen and ( width > 768px ){
    display: grid;
    grid-template-columns: repeat( 2 , 50% );
    padding-block: calc( ( 366px - 177px ) / 2 );
    > div{
      width: 100%;
      justify-content: stretch;
      height: 100%;
    }
    p{
      font-size: 12px;
      line-height : calc( 24 / 12 );
    }
    h3{
      margin-top: 1px;
      font-size: 24px;
      line-height : calc( 29 / 24 );
    }
    ul{
      margin-top: auto;
    }
    li{
      a{
        min-width: 120px;

      }
    }
    .button-like{
      margin-top: auto;
    }
  }
}