@charset "UTF-8";


@media all and (min-width: 768px), print {
  .shindan-container{
    padding-top: calc(45 / var(--page-font) * 1rem);
  }

  .top-box{
    max-width:calc(930 / var(--page-font) * 1rem);
    width:100%;
    height:calc(623 / var(--page-font) * 1rem);
    position: relative;
    z-index:10;
    margin-left: auto;
    margin-right: auto;
  }

  .top-box__body{
    background-image: url(../img/top/bg_top_02_pc.png);
    background-size:contain;
    background-position:top center;
    background-repeat:no-repeat;
    padding:calc(65 / var(--page-font) * 1rem) calc(38 / var(--page-font) * 1rem) calc(59 / var(--page-font) * 1rem) calc(38 / var(--page-font) * 1rem);
  }

  .top-box__header{
    background-image: url(../img/top/bg_top_01_pc.png);
    background-size:contain;
    background-position:top center;
    background-repeat:no-repeat;
    padding:calc(47 / var(--page-font) * 1rem) calc(8 / var(--page-font) * 1rem) calc(51 / var(--page-font) * 1rem) calc(8 / var(--page-font) * 1rem);
    position: relative;
  }

  .top-box__title .label-01{
    max-width:calc(442 / var(--page-font) * 1rem);
    width:100%;
    display: block;
    position: absolute;
    top: calc(-87 / var(--page-font) * 1rem);
    left: calc(-82 / var(--page-font) * 1rem);
  }

  .top-box__title .label-02{
    max-width:calc(540 / var(--page-font) * 1rem);
    width:100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .top-box__copy{
    font-size:calc(30 / var(--page-font) * 1rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    color:var(--color-green);
    text-align: center;
    position: relative;
    max-width:calc(750 / var(--page-font) * 1rem);
    width:100%;
    left:calc(8 / var(--page-font) * 1rem);
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .top-box__copy:before{
    content:"";
    background-image: url(../img/common/ico_kirakira.svg);
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    max-width:calc(50 / var(--page-font) * 1rem);
    width:100%;
    height:calc(42 / var(--page-font) * 1rem);
    display: block;
    position: absolute;
    top:calc(-15 / var(--page-font) * 1rem);
    right:calc(-8 / var(--page-font) * 1rem);
  }

  .top-box__copy .copy-01{
    font-size:calc(62 / var(--page-font) * 1rem);
  }

  .top-box__copy .copy-02{
    font-size:calc(40 / var(--page-font) * 1rem);
    font-feature-settings: "palt";
  }

  .top-box__contents__text{
    max-width:calc(515 / var(--page-font) * 1rem);
    width:100%;
    display: block;
    margin-top: calc(26 / var(--page-font) * 1rem);
    margin-left: auto;
    margin-right: auto;
  }

  .top-box__contents__button{
    max-width:calc(525 / var(--page-font) * 1rem);
    width:100%;
    display: block;
    margin-top: calc(0 / var(--page-font) * 1rem);
    margin-left: auto;
    margin-right: auto;
  }

  .top-box__contents__button__link{
    transition:0.3s ease;
  }

  .top-box__contents__button__link:hover{
    opacity:0.7;
  }

  .top-image{
    max-width:calc(1330 / var(--page-font) * 1rem);
    width:100%;
    position: relative;
    left:calc(8 / var(--page-font) * 1rem);
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media all and (max-width: 767px) {

  .l-bg-bottom{
    padding-top: calc(240 / 750 * 100vw);
    padding-bottom: calc(170 / 750 * 100vw);
    min-height:calc(467 / 750 * 100vw);
    margin-top: calc(-120 / 750 * 100vw);
  }

  .shindan-container{
    padding-top: calc(45 / 750 * 100vw);
  }

  .top-box{
    max-width:calc(647 / 750 * 100vw);
    width:100%;
    height:calc(511 / 750 * 100vw);
    position: relative;
    z-index:10;
    margin-left: auto;
    margin-right: auto;
  }

  .top-box__body{
    background-image: url(../img/top/bg_top_02_sp.png);
    background-size:contain;
    background-position:top center;
    background-repeat:no-repeat;
    padding:calc(52 / 750 * 100vw) calc(38 / 750 * 100vw) calc(54 / 750 * 100vw) calc(32 / 750 * 100vw);
  }

  .top-box__header{
    background-image: url(../img/top/bg_top_01_sp.png);
    background-size:contain;
    background-position:top center;
    background-repeat:no-repeat;
    padding:calc(42 / 750 * 100vw) calc(22 / 750 * 100vw) calc(34 / 750 * 100vw) calc(22 / 750 * 100vw);
    position: relative;
  }

  .top-box__title .label-01{
    max-width:calc(381 / 750 * 100vw);
    width:100%;
    display: block;
    position: absolute;
    top: calc(-79 / 750 * 100vw);
    left: calc(-84 / 750 * 100vw);
  }

  .top-box__title .label-02{
    max-width:calc(439 / 750 * 100vw);
    width:100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .top-box__copy{
    font-size:calc(20 / 750 * 100vw);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color:var(--color-green);
    text-align: center;
    position: relative;
    max-width:calc(750 / 750 * 100vw);
    width:100%;
    left:calc(8 / 750 * 100vw);
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .top-box__copy:before{
    content:"";
    background-image: url(../img/common/ico_kirakira.svg);
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    max-width:calc(35 / 750 * 100vw);
    width:100%;
    height:calc(29 / 750 * 100vw);
    display: block;
    position: absolute;
    top: calc(43 / 750 * 100vw);
    left: 0;
    right: calc(-341 / 750 * 100vw);
    margin:0 auto;
  }

  .top-box__copy .copy-01{
    font-size:calc(45 / 750 * 100vw);
  }

  .top-box__copy .copy-02{
    font-size:calc(29 / 750 * 100vw);
    letter-spacing: -0.025em;
    font-feature-settings: "palt";
  }

  .top-box__contents__text{
    max-width:calc(456 / 750 * 100vw);
    width:100%;
    display: block;
    margin-top: calc(26 / 750 * 100vw);
    margin-left: auto;
    margin-right: auto;
  }

  .top-box__contents__button{
    max-width:calc(424 / 750 * 100vw);
    width:100%;
    display: block;
    margin-top: calc(5 / 750 * 100vw);
    margin-left: auto;
    margin-right: auto;
  }

  .top-box__contents__button__link{
    transition:0.3s ease;
  }

  .top-box__contents__button__link:hover{
    opacity:0.7;
  }

  .top-image{
    max-width:calc(728 / 750 * 100vw);
    width:100%;
    position: relative;
    left:calc(3 / 750 * 100vw);
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}