@charset "UTF-8";
/*--------------------------------------------
MAIN VISUAL
---------------------------------------------*/
#mv{
  position: relative;
  overflow-x: clip;
  z-index: 0;
  .box{
    background-color: white;
  }
  hgroup{
    p{
      color:var(--pink03);
      font-weight: 700;
      border-bottom : solid 1px currentColor;
      width: fit-content;
      position: relative;
      &:after{
        content:"";
        display:block;
        font-size:0;
        display:block;
        width:auto;
        background : url( "../images/top/mv/accent.svg" ) left top / contain no-repeat;
        aspect-ratio : 8.8 / 18.78;
        background-color: white;
        position: absolute;
        left: 50%;
        translate: -50% 0;
      }
    }
    h1{
      font-weight: 700;
      line-height: 1.4;
    }
  }
  .box > p{
    font-weight: 500;
    line-height: 1.8;
  }
  @media screen and ( width <= 750px ){
    picture{
      text-align: center;
      img{
        height : calc( 220 * var(--remBase ) );
      }
    }
    .box{
      z-index: 1;
      position: relative;
      width : calc( 305 * var(--contentBase ) );
      margin-inline : auto;
      margin-top : calc( -15 * var(--remBase ) );
      border-radius : calc( 12 * var(--remBase ) );
      padding-inline : calc( 20 * var(--contentBase ) );
      padding-block : calc( 20 * var(--remBase ) );
    }
    hgroup{
      p{
        margin-inline : auto;
        font-size: calc( 16.46 * var(--remBase ) );;
        line-height: calc( 24 / 16.46 );;
        padding-bottom : calc( 4 * var(--remBase ) );
        &:after{
          height : calc( 11.89 * var(--remBase ) );
          bottom : calc( -9.4 * var(--remBase ) );
        }
        span{
          font-size: calc( 15.2 * var(--remBase ) );;
          line-height: calc( 22 / 15.2 );;
        }
      }
      h1{
        font-size : calc( 40.53 * var(--remBase ) );
        margin-top : calc( 10 * var(--remBase ) );
      }
    }
    .box > p{
      font-size : calc( 13 * var(--remBase ) );
      text-align: center;
      margin-top : calc( 5 * var(--remBase ) );
    }
    a{
      margin-top : calc( 12 * var(--remBase ) );
      width : calc( 252 * 100% / 265 );
      margin-inline : auto;
      height : calc( 44 * var(--remBase ) );
      column-gap : calc( 13 * 100% / 265 );
      font-size : calc( 14 * var(--remBase ) );
      &:after{
        height : calc( 3.8 * var(--remBase ) );
      }
    }
  }
  @media print,screen and ( width > 750px ){
    position: relative;
    overflow-x: clip;
    height : calc( 663 * var(--remBase ) );
    align-content: center;
    img{
      position: absolute;
      top: 0;
      left: 50%;
      translate: -50% 0;
      height: 100%;
      z-index: -1;
    }
    .box{
      border-radius : calc( 20 * var(--remBase ) );
      width : calc( 674 * var(--contentBase ) );
      padding-block : calc( 36 * var(--remBase ) );
      padding-inline : calc( 40 * var(--contentBase ) );
    }
    hgroup{
      p{
        font-size: calc( 26 * var(--remBase ) );;
        line-height: calc( 38 / 26 );;
        padding-bottom : calc( 6 * var(--remBase ) );
        &:after{
          height : calc( 18.78 * var(--remBase ) );
          bottom : calc( -14.18 * var(--remBase ) );
        }
        span{
          font-size: calc( 24 * var(--remBase ) );;
          line-height: 1.5;
        }
      }
      h1{
        font-size : calc( 64 * var(--remBase ) );
        margin-top : calc( 20 * var(--remBase ) );
      }
    }
    .box > p{
      font-size : calc( 22 * var(--remBase ) );
      margin-top : calc( 10 * var(--remBase ) );
    }
    a{
      margin-top : calc( 20 * var(--remBase ) );
      width : calc( 370 * 100% / 594 );
      height : calc( 70 * var(--remBase ) );
      column-gap : calc( 20 * 100% / 594 );
      font-size : calc( 20 * var(--remBase ) );
      &:after{
        height : calc( 6 * var(--remBase ) );
      }
    }
  }
}