@charset "UTF-8";
/*--------------------------------------------
MAIN VISUAL
---------------------------------------------*/
#mv{
  overflow-x: clip;
  position: relative;
}
#mv :where( h2 , p ){
    text-align: center;
    letter-spacing: .2em;
    text-indent: .2em;
  }
#mv h2{
    font-weight: 500;
    line-height: 1.2;
  }
#mv h2:before{
      position: absolute;
      left: 0;
      width: 100%;
      top: 0;
      content:"";
      display: block;
      background:image-set( url( "../images/home/mv/hero.avif" ) type( "image/avif" ) , url( "../images/home/mv/hero.webp" ) type( "image/webp" ) ) center top / auto 100% no-repeat;
      z-index: -1;
    }
@media screen and ( width <= 750px ){
#mv{
    padding-top: calc( ( 811 - 4 ) var(--remBase) );
    padding-bottom: calc( 45 var(--remBase) )
}
    #mv h2{
      font-size : clamp( var(--min) , 4rem , var(--max) );
    }
      #mv h2:before{
        height: calc( 820 var(--remBase) );
      }
    #mv p{
      margin-top: calc( ( 69 - 4 - 12 ) var(--remBase) );
      font-size: clamp( var(--min) , 2.6rem , var(--max) );;
      line-height: calc( 50 / 26 );;
    }
    #mv .link01{
      margin-top: calc( ( 65 - 12 ) var(--remBase) );
    }
  }
@media print,screen and ( width > 750px ){
#mv{
    padding-top: calc( ( 814 - 3.6 ) var(--remBase) );
    padding-bottom: calc( 8 var(--remBase) )
}
    #mv:before, #mv:after{
      content:"";
      display: block;
      position: absolute;
      content: "";;
      display: block;;
      font-size: 0;;
      width: auto;;
      background-position: left center;;
      background-repeat: no-repeat;;
      background-size: contain;;
      z-index: 2;
      pointer-events: none;
      width: auto;
    }
    #mv:before{
      background-image: image-set( url( "../images/home/mv/parts01_pc.avif" ) type( "image/avif" ) , url( "../images/home/mv/parts01_pc.webp" ) type( "image/webp" ) );
      aspect-ratio: 400/365;
      height: calc( 365 var(--remBase) );
      filter:drop-shadow( calc( 12 var(--remBase) * cos(119deg)) calc( 12 var(--remBase) * sin(119deg)) calc( 30 var(--remBase) ) color-mix( in srgb , black 15% , transparent  ) );
      bottom: calc( -190 var(--remBase) );
      left:max( calc( -118 var(--viewportBase) ) , calc( 50% - 638px ) );
    }
    #mv:after{
      background-image: image-set( url( "../images/home/mv/parts02_pc.avif" ) type( "image/avif" ) , url( "../images/home/mv/parts02_pc.webp" ) type( "image/webp" ) );
      aspect-ratio: 1032/892;
      height: calc( 393 var(--remBase) );
      bottom: calc( 12 var(--remBase) );
      left:min( calc( 887 var(--viewportBase) ) , calc( 50% + 367px ) );
    }
    #mv h2{
      font-size : clamp( var(--min) , 3.6rem , var(--max) );
    }
      #mv h2:before{
        height: calc( 700 var(--remBase) );
      }
    #mv p{
      margin-top: calc( ( 76 - 3.6 - 16 ) var(--remBase) );
      font-size: clamp( var(--min) , 1.8rem , var(--max) );;
      line-height: calc( 50 / 18 );;
    }
    #mv .link01{
      margin-top: calc( ( 53 - 16 ) var(--remBase) );
    }
  }