@charset "UTF-8";
/*--------------------------------------------
MAIN VISUAL
---------------------------------------------*/
#mv{
  line-height: 1;
  color:#333;
  p{
    line-height: 1;
  }
  box-sizing: border-box;
  * , *:before , *:after{
    box-sizing: border-box;
  }
}

#mv{
  text-align: left;
  position: relative;
  overflow: clip;
  z-index: 0;
  > picture{
    position: absolute;
    z-index: -1;
    top: 0;
    height: 100%;
    width: auto;
    img{
      height: 100%;
      width: auto;
    }
  }
  header{
    > p{
      width : fit-content;
      position: relative;
      z-index: 0;
      text-box: trim-both cap alphabetic;
      outline : solid calc( 2 * var(--remBase ) ) #1A2761;
      outline-offset : calc(  -2 * var(--remBase ) );
      border-radius : calc( 4 * var(--remBase ) );
      background-color: color-mix( in srgb , white 50% , transparent );
      > span{
        display: block;
        align-content: center;
        color:#1A2761;
        font-weight: 700;
        width: 100%;
        height: 100%;
        text-align: center;
      }
      picture{
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        z-index: -1;
        font-size: 0;
        width: auto;
        aspect-ratio: 1;
        img{
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center;
          filter: invert(10%) sepia(23%) saturate(6663%) hue-rotate(221deg) brightness(106%) contrast(94%);
        }
      }
    }
  }
  hgroup{
    [data-text]{
      position: relative;
      display: inline-block;
      z-index: 0;
      &:before{
        content:attr(data-text);
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        z-index: -1;
        color: white;
        white-space: pre;
        paint-order: stroke fill;
      }
    }
    h1{
      span{
        font-weight: 800;
        letter-spacing: 0.08em;
      }
      .l{
        color:#213489;
      }
    }
    p{
      font-weight: 700;
      span{
        letter-spacing: 0.08em;
      }
      .l{
        color:#FF3C40;
      }
    }
  }
  .box{
    > p{
      position: relative;
      z-index: 0;
      font-weight: 600;
      align-content: center;
      &:before{
        content:"";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        filter:blur( calc( 4 * var(--remBase) ) );
      }
    }
  }
  .merits{
    display: grid;
    border-radius : calc( 10 * var(--remBase ) );
    background-color: white;
    position: relative;
    z-index: 1;
    img{
      filter: invert(20%) sepia(19%) saturate(7495%) hue-rotate(220deg) brightness(80%) contrast(97%);
    }
    > li{
      + li{
        position: relative;
        &:before{
          content:"";
          display: block;
          font-size: 0;
          width: 1px;
          background-color: #D9D9D9;
          position: absolute;
        }
      }
      > span{
        font-weight: 800;
        > span{
          &:nth-of-type(1){
            background-color: #213489;
            color:#FFFCDB;
            &:has(span){
              display: grid;
              align-content: center;
              align-items: baseline;
              justify-content: center;
              grid-auto-flow: column;
              letter-spacing: 0.08em;
              span{
                letter-spacing: 0.08em;
              }
            }
            &:not(:has(span)){
              display: block;
              text-align: center;
              align-content: center;
              text-box: trim-both cap alphabetic;
              text-align: center;
              letter-spacing: .08em;
              text-indent: .08em;
            }
          }
          &:nth-of-type(2){
            letter-spacing: 0.08em;
            display: block;
          }
        }
      }
    }
  }
  .contacts{
    > p{
      display: grid;
      grid-auto-flow: column;
      align-items: start;
      justify-content: center;
      &:before , &:after{
        content:"";
        display: block;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        font-size: 0;
        background-color: #FF3C40;
      }
      > span{
        color:white;
        font-weight: 600;
      }
      .l{
        color:#F1FF32;
        font-weight: 800;
      }
    }
  }
  .line{
    display: grid;
    grid-template-columns: calc( 69 * 100% / 350 ) calc( 232 * 100% / 350 ) calc( 49 * 100% / 350 );
    > span{
      &:nth-of-type(1){
        grid-column: 2;
        grid-row: 1/3;
        border-radius: 100vmax;
        background-color: white;
        font-weight: 800;
        position: relative;
        z-index: 1;
        display: block;
        text-align: center;
        align-content: center;
        text-box: trim-both cap alphabetic;
        font-size : calc( 13 * var(--remBase ) );
        text-align: center;
        letter-spacing: .08em;
        text-indent: .08em;
        &:before{
          content:"";
          display: block;
          position: absolute;
          left: 50%;
          translate: -50% 0;
          background-color: white;
          clip-path: polygon(0 0, 100% 0, 50% 100%);
          aspect-ratio: 1;
          height : calc( 12 * var(--remBase ) );
          bottom : calc( -10 * var(--remBase ) );
        }
        > span + span{
          color:#FF3C40
        }
      }
      &:nth-of-type(2){
        outline : solid calc( 2 * var(--remBase ) ) white;
        background-color: #06C755;
        outline-offset : calc(  -2 * var(--remBase ) );
        box-shadow: 0 calc( 4 * var(--remBase) ) 0 0 #10321E;
        position: relative;
        grid-row: 2/-1;
        grid-column: 1/-1;
        border-radius : calc( 10 * var(--remBase ) );
        img{
          position: absolute;
          font-size: 0;
          filter:invert(99%) sepia(28%) saturate(2%) hue-rotate(3deg) brightness(108%) contrast(100%);
          &:nth-of-type(1){
            height : calc( 36.85 * var(--remBase ) );
            top : calc( 19.57 * var(--remBase ) );
            left : calc( 14.66 * 100% / 350 );
          }
          &:nth-of-type(2){
            top: 50%;
            translate: 0 -50%;
            height : calc( 13.69 * var(--remBase ) );
          }
        }
        > span{
          color:#F1FF32;
          font-weight: 800;
          font-size : calc( 24 * var(--remBase ) );
          .s{
            font-size : calc( 20 * var(--remBase ) );
          }
        }
      }
    }
  }
  .tel{
    height : calc( 70 * var(--remBase ) );
    outline : solid calc( 2 * var(--remBase ) ) white;
    outline-offset : calc(  -2 * var(--remBase ) );
    box-shadow: 0 calc( 4 * var(--remBase) ) 0 0 #10321E;
    position: relative;
    border-radius : calc( 10 * var(--remBase ) );
    display: block;
    background-color: #F96519;
    img{
      position: absolute;
      font-size: 0;
      filter:invert(99%) sepia(28%) saturate(2%) hue-rotate(3deg) brightness(108%) contrast(100%);
      &:nth-of-type(1){
        top : calc( 14 * var(--remBase ) );
        left : calc( 13 * 100% / 350 );
        height : calc( 41 * var(--remBase ) );
      }
      &:nth-of-type(2){
        top: 50%;
        translate: 0 -50%;
        height : calc( 13.69 * var(--remBase ) );
      }
    }
    > span{
      &:nth-of-type(1){
        display: grid;
        grid-auto-flow: column;
        align-items: end;
        justify-content: start;
        > span{
          &:nth-of-type(1){
            color:#F1FF32;
            font-weight: 800;
            letter-spacing: 0.05em;
            font-size : calc( 14 * var(--remBase ) );
          }
          + span{
            background-color: white;
            color:#F96519;
            font-weight: 800;
            display: grid;
            align-items: baseline;
            align-content: center;
            justify-content: center;
            grid-auto-flow: column;
            > span{
              font-size : calc( 11 * var(--remBase ) );
            }
            .l{
              font-size : calc( 14 * var(--remBase ) );
            }
          }
        }
      }
      &:nth-of-type(2){
        display: grid;
        align-items: center;
        justify-content: start;
        grid-auto-flow: column;
        color:white;
        font-weight: 800;
        font-size : calc( 24 * var(--remBase ) );
      }
    }
  }
  @media screen and ( width <= 768px ){
    height : calc( 599 * var(--remBase ) );
    padding-top : calc( 16 * var(--remBase ) );
    > picture{
      left: 0;
    }
    header{
      > p{
        padding-inline : calc( 24 * var(--remBase ) );
        height : calc( 36 * var(--remBase ) );
        margin-left : calc( 18 * var(--viewportBase ) );
        > span{
          font-size : calc( 16 * var(--remBase ) );
        }
      }
    }
    hgroup{
      margin-top : calc( 10 * var(--remBase ) );
      margin-left : calc( 18 * var(--viewportBase ) );
      [data-text]:before{
        -webkit-text-stroke: calc( 8 * var(--remBase ) ) #fff;
        filter: blur( calc( 4 * var(--remBase ) ) );
      }
      h1{
        > span{
          font-size : calc( 32 * var(--remBase ) );
        }
        .s{
          font-size : calc( 26 * var(--remBase ) );
        }
        .l{
          font-size : calc( 50 * var(--remBase ) );
          display: block;
          width: fit-content;
          margin-top : calc( 6 * var(--remBase ) );
        }
      }
      p{
        margin-top : calc( 20 * var(--remBase ) );
        > span{
          font-size : calc( 18 * var(--remBase ) );
        }
        .l{
          display: block;
          width: fit-content;
          margin-top : calc( 5 * var(--remBase ) );
          font-size : calc( 30 * var(--remBase ) );
        }
      }
    }
    .box{
      margin-top : calc( 15 * var(--remBase ) );
      position: relative;
      z-index: 0;
      &:before{
        content:"";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height : calc( 312 * var(--remBase ) );
        background: linear-gradient( to bottom, transparent , #063371 40.48%);
        z-index: -1;
      }
      > p{
        position: relative;
        z-index: 0;
        width : calc( 250 * var(--viewportBase ) );
        margin-left : calc( 18 * var(--viewportBase ) );
        height : calc( 50 * var(--remBase ) );
        background: linear-gradient( to right, rgba( 255, 252, 219, 0.5) 74.26%, transparent 100%);
        padding-left : calc( 8 * var(--viewportBase ) );
        font-size: calc( 13 * var(--remBase ) );;
        line-height: calc( 18 / 13 );;
      }
    }
    .merits{
      width : calc( 355 * var(--viewportBase ) );
      margin-inline : auto;
      margin-top : calc( 14 * var(--remBase ) );
      height : calc( 94 * var(--remBase ) );
      padding-inline : calc( 14 * var(--viewportBase ) );
      grid-template-columns: repeat( 3 , calc( 97 * 100% / 327 ) );
      justify-content: space-between;
      > li{
        img{
          margin-inline : auto;
          display: block;
        }
        > span{
          > span{
            &:nth-of-type(1){
              height : calc( 18 * var(--remBase ) );
            }
            &:nth-of-type(2){
              font-size : calc( 12 * var(--remBase ) );
              margin-top : calc( 3 * var(--remBase ) );
              text-align: center;
              text-shadow: -0.08em;
            }
          }
        }
        + li:before{
          height : calc( 79 * var(--remBase ) );
          top: 50%;
          translate: 0 -50%;
          left : calc( -9 * 100% / 97 );
        }
        &:nth-child(1){
          padding-top : calc( 7 * var(--remBase ) );
          img{
            height : calc( 35.43 * var(--remBase ) );
            margin-bottom : calc( 10.57 * var(--remBase ) );
          }
          > span{
            > span{
              &:nth-of-type(1){
                span{
                  font-size : calc( 14 * var(--remBase ) );
                }
                s{
                  font-size : calc( 12 * var(--remBase ) );
                }
              }
            }
          }
        }
        &:nth-child(2){
          padding-top : calc( 7 * var(--remBase ) );
          img{
            height : calc( 37 * var(--remBase ) );
            margin-bottom : calc( 9 * var(--remBase ) );
          }
          > span{
            > span{
              &:nth-of-type(1){
                font-size : calc( 14 * var(--remBase ) );
              }
            }
          }
        }
        &:nth-child(3){
          padding-top : calc( 13 * var(--remBase ) );
          img{
            height : calc( 24.99 * var(--remBase ) );
            margin-bottom : calc( 15.01 * var(--remBase ) );
          }
          > span{
            > span{
              &:nth-of-type(1){
                font-size : calc( 14 * var(--remBase ) );
              }
            }
          }
        }
      }
    }
    .contacts{
      margin-top : calc( 12 * var(--remBase ) );
      > p{
        column-gap : calc( 8 * var(--viewportBase) );
       &:before , &:after{
          aspect-ratio: 1;
          height : calc( 15 * var(--remBase ) );
        }
        > span{
          span{
            font-size : calc( 14 * var(--remBase ) );
          }
          .l{
            font-size : calc( 16 * var(--remBase ) );
          }
        }
      }
      > ul{
        margin-top : calc( 14 * var(--remBase ) );
        padding-inline : calc( 12.5 * var(--viewportBase ) );
      }
      li + li{
        margin-top : calc( 7 * var(--remBase ) );
      }
    }
    .line{
      grid-template-rows: calc( 7 * var(--remBase) ) calc( 15 * var(--remBase) ) calc( 55 * var(--remBase) );
      > span{
        &:nth-of-type(2){
          padding-top : calc( 28 * var(--remBase ) );
          padding-left : calc( 67 * 100% / 350 );
          img:nth-of-type(2){
            right : calc( 16.71 * 100% / 350 );
          }
        }
      }
    }
    .tel{
      padding-top : calc( 8 * var(--remBase ) );
      padding-left : calc( 67 * 100% / 350 );
      > img{
         &:nth-of-type(2){
          right : calc( 16.71 * 100% / 350 );
        }
      }
      > span{
        &:nth-of-type(1){
          column-gap : calc( 3 * 100% / 283 );
          grid-template-columns: calc( 143 * 100% / 283 ) repeat( 2 , calc( 52 * 100% / 283 ) );
          > span{
            + span{
              height : calc( 18 * var(--remBase ) );
            }
          }
        }
        &:nth-of-type(2){
          margin-top : calc( 8 * var(--remBase ) );
          .sp-r{
            font-size : calc( 22 * var(--remBase ) );
          }
          .s{
            font-size : calc( 20 * var(--remBase ) );
          }
        }
      }
    }
  }
  @media print,screen and ( width > 768px ){
    --remBase : 100vw / 1440;
    padding-inline : calc( 180 * 100% / 1440 );
    height : calc( 476 * var(--remBase ) );
    padding-top : calc( 31 * var(--remBase ) );
    > picture{
      left: 50%;
      translate: -50% 0;
      aspect-ratio: 1440/476;
    }
    header{
      > p{
        height : calc( 40 * var(--remBase ) );
        margin-left : calc( 69.17 * var(--contentBase ) );
        > span{
          font-size : calc( 20 * var(--remBase ) );
          padding-inline : calc( 28 * var(--remBase ) );
        }
        picture{
          height : calc( 40 * var(--remBase ) );
          left : calc( 12 * 100% / 343 );
        }
      }
    }
    hgroup{
      margin-top : calc( 18 * var(--remBase ) );
      margin-left : calc( 72 * var(--contentBase ) );
      display: grid;
      grid-auto-flow: row;
      [data-text]:before{
        -webkit-text-stroke: calc( 12 * var(--remBase ) ) #fff;
        filter: blur( calc( 8 * var(--remBase ) ) );
      }
      p{
        grid-row: 1;
        > span{
          font-size : calc( 30 * var(--remBase ) );
        }
        .s{
          font-size : calc( 28 * var(--remBase ) );
        }
        .l{
          font-size : calc( 36 * var(--remBase ) );
        }
      }
      h1{
        margin-top : calc( 10 * var(--remBase ) );
        font-size : calc( 50 * var(--remBase ) );
        grid-row: 2;
        > span{
          font-size : calc( 50 * var(--remBase ) );
        }
        .s{
          font-size : calc( 36 * var(--remBase ) );
        }
        .l{
          font-size : calc( 90 * var(--remBase ) );
        }
      }
    }
    .box{
      margin-top : calc( 37 * var(--remBase ) );
      display: grid;
      grid-template-rows: calc( 44 * var(--remBase) ) calc( 24 * var(--remBase) ) calc( 46 * var(--remBase) ) calc( 83 * var(--remBase) ) calc( 17 * var(--remBase) );
      grid-template-columns: calc( 40 * var(--contentBase) ) calc( 670 * var(--contentBase) ) calc( 29 * var(--contentBase) ) calc( 11 * var(--contentBase) ) calc( 317 * var(--contentBase) );
    }
    .merits{
      grid-column: 2;
      grid-row: 1/3;
      grid-auto-flow: column;
      justify-content: space-between;
      padding-left : calc( 41 * var(--contentBase ) );
      padding-right : calc( 45.74 * var(--contentBase ) );
      padding-top : calc( 11 * var(--remBase ) );
      column-gap : calc( 37 * 100% / 583.26 );
      > li{
        display: grid;
        grid-template-columns: auto auto;
        align-items: start;
        > span{
          >span{
            &:nth-of-type(1){
              height : calc( 26 * var(--remBase ) );
            }
            &:nth-of-type(2){
              font-size : calc( 16 * var(--remBase ) );
              margin-top : calc( 4 * var(--remBase ) );
            }
          }
        }
        + li{
          &:before{
            height : calc( 45 * var(--remBase ) );
            left : calc( -19 * var(--remBase ) );
            top : calc( 1 * var(--remBase ) );
          }
        }
        &:nth-child(1){
          column-gap : calc( 11.64 * var(--remBase ) );
          img{
            height : calc( 35.43 * var(--remBase ) );
            margin-top : calc( 3.96 * var(--remBase ) );
          }
          > span{
            > span{
              &:nth-of-type(1){
                padding-inline : calc( 3 * var(--remBase ) );
                span{
                  font-size : calc( 20 * var(--remBase ) );
                }
                .s{
                  font-size : calc( 16 * var(--remBase ) );
                }
              }
            }
          }
        }
        &:nth-child(2){
          column-gap : calc( 12.55 * var(--remBase ) );
          img{
            height : calc( 37 * var(--remBase ) );
            margin-top : calc( 4 * var(--remBase ) );
          }
          > span{
            > span{
              &:nth-of-type(1){
                padding-inline : calc( 4.5 * var(--remBase ) );
                font-size : calc( 20 * var(--remBase ) );
              }
            }
          }
        }
        &:nth-child(3){
          column-gap : calc( 11.46 * var(--remBase ) );
          img{
            height : calc( 24.99 * var(--remBase ) );
            margin-top : calc( 11 * var(--remBase ) );
          }
          > span{
            > span{
              &:nth-of-type(1){
                padding-inline : calc( 4.5 * var(--remBase ) );
                font-size : calc( 18 * var(--remBase ) );
              }
            }
          }
        }
      }
    }
    .box{
      > p{
        grid-column: 4/-1;
        grid-row: 4;
        text-align: right;
        padding-right : calc( 14 * 100% / 328 );
        font-size: calc( 18 * var(--remBase ) );;
        line-height: calc( 26 / 18 );;
        width: 100%;
        height: 100%;
        &:before{
          background: linear-gradient( to left, #FCF9D8 74.26% , transparent 100% );
        }
      }
    }
    .contacts{
      grid-column: 1/5;
      grid-row: 2/-1;
      border-radius : calc( 70 * var(--remBase ) ) calc( 70 * var(--remBase ) ) 0 0;
      position: relative;
      background: linear-gradient( to bottom , #002FFF 0%, #213489 35.58%);
      grid-template-rows: 1/-1;
      padding-top : calc( 39 * var(--remBase ) );
      > p{
        column-gap : calc( 29 * 100% / 750 );
       &:before , &:after{
          aspect-ratio: 21/15;
          height : calc( 15 * var(--remBase ) );
          margin-top : calc( 5 * var(--remBase ) );
        }
        > span{
          span{
            font-size : calc( 18 * var(--remBase ) );
          }
          .s{
            font-optical-sizing: 16;
          }
          .l{
            font-size : calc( 20 * var(--remBase ) );
          }
        }
      }
      > ul{
        display: grid;
        margin-top : calc( 15 * var(--remBase ) );
        grid-template-columns: repeat( 2 , calc( 350 * 100% / 750 ) );
        justify-content: center;
        column-gap : calc( 17 * 100% / 750 );
        align-items: start;
      }
    }
    .line{
      grid-template-rows: calc( 5 * var(--remBase) ) calc( 17 * var(--remBase) ) calc( 53 * var(--remBase) );
      > span{
        &:nth-of-type(2){
          padding-top : calc( 30 * var(--remBase ) );
          padding-left : calc( 65 * 100% / 350 );
          img:nth-of-type(2){
            right : calc( 17.71 * 100% / 350 );
          }
        }
      }
    }
    .tel{
      margin-top : calc( 5 * var(--remBase ) );
      padding-top : calc( 7 * var(--remBase ) );
      padding-left : calc( 64 * 100% / 350 );
      > img{
        &:nth-of-type(2){
          right : calc( 17.71 * 100% / 350 );
        }
      }
      > span{
        &:nth-of-type(1){
          column-gap : calc( 3 * 100% / 286 );
          grid-template-columns: calc( 143 * 100% / 286 ) repeat( 2 , calc( 52 * 100% / 286 ) );
          > span{
            + span{
              height : calc( 20 * var(--remBase ) );
            }
          }
        }
        &:nth-of-type(2){
          margin-top : calc( 5 * var(--remBase ) );
          .s{
            font-size : calc( 20 * var(--remBase ) );
          }
        }
      }
    }
  }
}