@charset "UTF-8";
/* main visual slide desolve
-----------------------*/
/*
dissolve:動画右上原点、拡大→等倍→拡大→等倍
dissolve2:動画中央原点、等倍→拡大1.5→拡大1.2→拡大1.5
dissolve3:動画中央原点、等倍→拡大2
*/
/* smart phone
-------------------------------------------------*/
@media screen and (max-width: 768px) {
  /* font
  -------------------------------------------------*/
  .base_text {
    font-size: max(14px, 4.13vw);
    line-height: 1.4;
    letter-spacing: min(1.8px, 0.23vw);
  }
  /* element
-------------------------------------------------*/
  .generator {
    padding-bottom: 6em;
  }
  /* btn
-------------------------------------------------*/
  .btn {
    position: relative;
    text-align: center;
    -webkit-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
  }
  ._btn1:after {
    background-image: url("../image/img_btnhv1_sp.png");
  }
  ._btn2:after {
    background-image: url("../image/img_btnhv1_sp.png");
  }
}

@media screen and (max-width: 768px) {
  /* #contents_area
-------------------------------------------------*/
  #contents_area {
    min-width: unset;
  }
  /* .content_wrapper
-------------------------------------------------*/
  .content_wrapper_item {
    padding-left: min(20px, 2.6vw);
    padding-right: min(20px, 2.6vw);
  }
  .content_item_wrapper {
    padding-left: min(35px, 4.55vw);
    padding-right: min(35px, 4.55vw);
  }
  /* main_visual
-------------------------------------------------*/
  .mv {
    padding-bottom: min(140px, 18.22vw);
  }
  .mv_loop_wrapper {
    padding-top: min(222px, 28.9vw);
    min-width: unset;
  }
  .mv_loop_item {
    width: min(446px, 58.07vw);
    min-width: 300px;
    height: min(251px, 32.68vw);
    min-height: 168px;
    margin-right: min(48px, 6.25vw);
    margin-bottom: min(64px, 8.33vw);
  }
  .mv_loop._first .mv_loop_item:nth-child(even) {
    margin-top: min(64px, 8.33vw);
  }
  .mv_loop._second .mv_loop_item:nth-child(odd) {
    margin-top: min(64px, 8.33vw);
  }
  .mv_catch {
    max-width: unset;
    min-width: unset;
    width: 100vw;
  }
  .mv_catch1 {
    margin-top: min(98px, 12.76vw);
    margin-left: min(56px, 7.29vw);
    margin-right: min(58px, 7.55vw);
  }
  .mv_catch2 {
    margin-bottom: max(-157px, -20.44vw);
    margin-right: min(58px, 7.55vw);
    width: min(357px, 46.48vw);
    min-width: 200px;
  }
  /* mv movie bg image
-----------------------*/
  /* mv movie
-----------------------*/
  /* special_movie slide loop
-----------------------*/
  /* special_movie
-------------------------------------------------*/
  .sm_lead {
    padding-top: min(144px, 18.75vw);
  }
  .sm_lead::before {
    bottom: max(-90px, -11.71vw);
    -webkit-transform: skewY(6deg) translateY(36px);
            transform: skewY(6deg) translateY(36px);
  }
  .sm_lead::after {
    bottom: max(-90px, -11.71vw);
    -webkit-transform: skewY(-6deg) translateY(-2px);
            transform: skewY(-6deg) translateY(-2px);
  }
  .sm_lead_content {
    position: relative;
    padding-bottom: min(44px, 5.72vw);
  }
  .sm_lead_content::after {
    left: calc(50% - 1px);
    width: 2px;
  }
  .sm_lead_title {
    margin-bottom: min(44px, 5.72vw);
    padding-left: min(40px, 5.2vw);
    padding-right: min(40px, 5.2vw);
  }
  .sm_lead_title img {
    width: min(401px, 52.21vw);
    height: auto;
  }
  .sm_lead_text {
    padding-bottom: min(44px, 5.72vw);
  }
  .sm_content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: min(18px, 2.34vw) min(18px, 2.34vw) min(22px, 2.86vw);
    border-right: 2px solid #b8151c;
    border-bottom: 2px solid #b8151c;
    border-left: 2px solid #b8151c;
  }
  .sm_content_video {
    width: 100%;
  }
  .sm_content_video_btn {
    width: min(80px, 10.41vw);
    height: min(80px, 10.41vw);
  }
  .sm_content_video_btn::before {
    content: "";
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 1 / 1 / 2 / 2;
    position: relative;
    display: block;
    margin-left: min(4px, 1.95vw);
    border-top: min(15px, 1.95vw) solid transparent;
    border-right: none;
    border-bottom: min(15px, 1.95vw) solid transparent;
    border-left: min(27px, 3.51vw) solid #fff;
    z-index: 1;
  }
  .sm_content_btn {
    max-width: 220px;
    min-width: 100px;
    width: min(220px, 28.64vw);
    margin-top: min(15px, 1.95vw);
    height: auto;
  }
  /* step
-------------------------------------------------*/
  .step_lead._next::before {
    left: calc(50% - 1px);
    width: 2px;
  }
  .step_lead_txt {
    font-size: max(16px, 5vw);
    line-height: 1.45;
    letter-spacing: min(1.5px, 0.19vw);
  }
  .step_btns {
    position: relative;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    justify-items: center;
    margin-top: min(36px, 3.9vw);
  }
  .step_btns .btn {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 76.82vw;
            flex: 0 1 76.82vw;
  }
  .step_btns .btn + .btn {
    margin-top: min(36px, 3.9vw);
    margin-left: 0;
  }
  /* step01
-------------------------------------------------*/
  .step01_lead {
    padding-top: min(189px, 25.78vw);
    padding-bottom: min(79px, 10.28vw);
    margin-bottom: max(-20px, -2.6vw);
  }
  .step01_lead .step_lead_title {
    padding-top: min(16px, 2.08vw);
    padding-bottom: min(13px, 1.69vw);
  }
  .step01_lead .step_lead_img {
    padding-bottom: min(25px, 3.25vw);
  }
  .step01_lead .step_lead_img img {
    width: min(592px, 77.08vw);
    height: auto;
  }
  .step01 .step {
    padding-bottom: 0;
  }
  .step01 .step::before {
    top: max(-348px, -50vw);
    bottom: max(-103px, -13.41vw);
  }
  .step01_content {
    padding: min(20px, 2.6vw);
  }
  /* step01 corner
-----------------------*/
  .corner [class^="corner"] {
    width: min(86px, 11.19vw);
    height: min(86px, 11.19vw);
    overflow: hidden;
  }
  .corner [class^="corner"]::before {
    width: min(76px, 9.89vw);
    height: min(76px, 9.89vw);
  }
  .corner [class^="corner_top"] {
    top: 0;
    border-top: 2px solid #b8151c;
  }
  .corner [class^="corner_top"]::before {
    top: min(6px, 0.78vw);
    border-top: 2px solid #b8151c;
  }
  .corner [class^="corner_bottom"] {
    bottom: 0;
    border-bottom: 2px solid #b8151c;
  }
  .corner [class^="corner_bottom"]::before {
    bottom: min(6px, 0.78vw);
    border-bottom: 2px solid #b8151c;
  }
  .corner [class$="left"] {
    left: 0;
    border-left: 2px solid #b8151c;
  }
  .corner [class$="left"]::before {
    left: min(6px, 0.78vw);
    border-left: 2px solid #b8151c;
  }
  .corner [class$="right"] {
    right: 0;
    border-right: 2px solid #b8151c;
  }
  .corner [class$="right"]::before {
    right: min(6px, 0.78vw);
    border-right: 2px solid #b8151c;
  }
  /* step02
-------------------------------------------------*/
  .step02_lead {
    padding-top: min(233px, 30.33vw);
    padding-bottom: min(44px, 5.72vw);
  }
  .step02_lead .step_lead_title {
    padding-top: min(20px, 2.6vw);
    padding-bottom: min(10px, 1.3vw);
    background-color: #0f0f0f;
    background: -webkit-gradient(linear, left top, right top, color-stop(45%, transparent), color-stop(45%, #0f0f0f), color-stop(55%, #0f0f0f), to(transparent));
    background: linear-gradient(to right, transparent 45%, #0f0f0f 45%, #0f0f0f 55%, transparent 100%);
  }
  .step02_lead .step_lead_img {
    padding-bottom: min(26px, 3.38vw);
  }
  .step02_lead .step_lead_img img {
    width: min(572px, 74.47vw);
    height: auto;
  }
  .step02_content {
    width: 100%;
  }
  .step02_content_title {
    bottom: 100%;
    left: 0;
    top: unset;
    right: unset;
    width: 100%;
    height: min(40px, 5.72vw);
  }
  .step02_content_item {
    width: 100%;
  }
  .step02_content .step_btns {
    margin-top: 20px;
  }
  .step02_title {
    position: relative;
  }
  .step02_title_wrapper {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .step02_title_img {
    display: none;
  }
  .step02_title_text {
    display: block;
    font-size: min(32px, 4.16vw);
    color: #fff;
  }
  .step02_template_wrapper {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: min(18px, 2.34vw) 0 min(13px, 1.69vw);
  }
  .step02_template_item {
    width: min(210px + 4px, 27.34vw + 4px);
    padding: 2px 2px 1px 2px;
    margin: 0 min(14px, 1.82vw);
  }
  .step02_template_item_title {
    margin-top: 5px;
    font-size: max(10px, 2.6vw);
  }
  .step02_title._out_up {
    -webkit-animation-name: _up;
            animation-name: _up;
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
            animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-direction: normal;
            animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  .step02_title._out_down {
    -webkit-animation-name: _down;
            animation-name: _down;
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
            animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-direction: normal;
            animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  .step02_title._in_up {
    -webkit-animation-name: _down;
            animation-name: _down;
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    animation-direction: reverse;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  .step02_title._in_down {
    -webkit-animation-name: _up;
            animation-name: _up;
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    animation-direction: reverse;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  @-webkit-keyframes _up {
    0% {
      top: 0;
    }
    100% {
      top: -100%;
    }
  }
  @keyframes _up {
    0% {
      top: 0;
    }
    100% {
      top: -100%;
    }
  }
  @-webkit-keyframes _down {
    0% {
      top: 0;
    }
    100% {
      top: 100%;
    }
  }
  @keyframes _down {
    0% {
      top: 0;
    }
    100% {
      top: 100%;
    }
  }
  .template_canvases {
    width: min(210px, 27.34vw);
  }
  /* step02 angle_brackets
-----------------------*/
  .angle_brackets {
    left: unset;
    top: 50%;
    -webkit-transform-origin: center center;
            transform-origin: center center;
    width: min(28px, 3.64vw);
    height: min(28px, 3.64vw);
    opacity: 1;
    z-index: 10;
  }
  .angle_brackets::before {
    width: min(24px, 3.125vw);
    height: min(24px, 3.125vw);
  }
  .angle_brackets._left {
    left: min(40px, 5.2vw);
    margin-bottom: min(10px, 1.3vw);
    border-top: 3px solid #b8151c;
    border-left: 3px solid #b8151c;
    -webkit-transform: rotate(-45deg) translateY(-50%);
            transform: rotate(-45deg) translateY(-50%);
    -webkit-transition: opacity z-index 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: opacity z-index 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .angle_brackets._left::before {
    top: 6px;
    left: 6px;
    border-top: 3px solid #b8151c;
    border-left: 3px solid #b8151c;
  }
  .angle_brackets._left._off {
    opacity: 0;
    z-index: -1;
    pointer-events: none;
  }
  .angle_brackets._right {
    right: min(40px, 5.2vw);
    margin-bottom: min(10px, 1.3vw);
    border-top: 3px solid #b8151c;
    border-right: 3px solid #b8151c;
    -webkit-transform: rotate(45deg) translateY(-50%);
            transform: rotate(45deg) translateY(-50%);
    -webkit-transition: opacity z-index 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: opacity z-index 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .angle_brackets._right::before {
    top: 6px;
    right: 6px;
    border-top: 3px solid #b8151c;
    border-right: 3px solid #b8151c;
  }
  .angle_brackets._right._off {
    opacity: 0;
    z-index: -1;
    pointer-events: none;
  }
  .angle_brackets._before {
    display: none;
  }
  .angle_brackets._after {
    display: none;
  }
  /* to complete
-------------------------------------------------*/
  .to_complete {
    height: min(460px, 59.89vw);
    max-height: min(115px, 14.97vw);
  }
  .to_complete::before {
    width: 2px;
  }
  @-webkit-keyframes lineToNext2 {
    0% {
      max-height: 0;
    }
    50% {
      max-height: min(460px, 59.89vw);
    }
    100% {
      max-height: min(115px, 14.97vw);
    }
  }
  @keyframes lineToNext2 {
    0% {
      max-height: 0;
    }
    50% {
      max-height: min(460px, 59.89vw);
    }
    100% {
      max-height: min(115px, 14.97vw);
    }
  }
  /* complete
-------------------------------------------------*/
  .complete_lead_item {
    padding-top: min(84px, 10.93vw);
    padding-bottom: min(44px, 5.75vw);
  }
  .complete_lead_item::before {
    left: calc(50% - 1px);
    width: 2px;
    height: min(84px, 10.93vw);
  }
  .complete_lead_item::after {
    left: calc(50% - 1px);
    width: 2px;
    height: min(44px, 5.75vw);
  }
  .complete_lead_title {
    padding-top: min(17px, 2.21vw);
    padding-bottom: min(14px, 1.82vw);
    padding-left: min(20px, 2.6vw);
    padding-right: min(20px, 2.6vw);
  }
  .complete_lead_title img {
    width: min(676px, 88.02vw);
    height: auto;
  }
  .complete_lead_txt {
    margin-top: min(4px, 0.52vw);
    font-size: max(14px, 5vw);
    margin-bottom: 0;
  }
  .complete_lead::before {
    height: min(384px, 50vw);
    -webkit-transform: skewY(6deg) translateY(min(40px, 5.2vw));
            transform: skewY(6deg) translateY(min(40px, 5.2vw));
  }
  .complete_bg {
    width: 100vw;
    height: min(384px, 50vw);
    overflow: hidden;
  }
  .complete_bg::before {
    background-image: url("../image/bg_comp_sp.jpg");
    background-position: center top max(-25px, -3.25vw);
  }
  .complete {
    position: relative;
  }
  .complete .step_complete::before {
    top: max(-253px, -32.94vw);
    height: min(332px, 43.22vw);
  }
  .complete_content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: min(38px, 4.94vw);
    border: 2px solid #fff;
  }
  .complete_content_item {
    width: 100%;
  }
  .complete_content_item + .complete_content_item {
    margin-left: 0;
    margin-top: min(38px, 4.94vw);
  }
  .complete_content_item_btn {
    margin-top: min(24px, 3.12vw);
  }
  .complete_content_text {
    margin-top: min(39px, 5.07vw);
    margin-bottom: min(45px, 5.85vw);
    margin-left: max(-38px, -4.94vw);
    margin-right: max(-38px, -4.94vw);
    color: #fff;
    line-height: 1.75;
    font-size: max(14px, 4vw);
  }
  .complete_content_text .strong {
    display: inline-block;
    font-size: 1.1em;
    line-height: 1;
  }
  .complete_canvas {
    max-width: unset;
  }
  /* .banner
-------------------------------------------------*/
  .banner_wrapper {
    width: calc(100% - 1em);
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    padding-top: 6em;
    padding-left: 0;
    padding-right: 0;
  }
  .banner_contents {
    display: block;
    width: 48%;
    padding: 0;
  }

  .explanation_wrap{
    margin: 20px 0;
    padding: 0 1.5em 1.5em;
    background: #fff;
    box-sizing: border-box;
  }
  
  /**/
  .explanation_wrap{
  margin: 20px 0;
  padding: 1.5em;
  background: #fff;
  box-sizing: border-box;
  }
  
  .explanation_wrap .explanation_tl{
    font-size: 15px;
    font-family: var(--hgf-bold);
    font-weight: normal;
    text-align: center;
  }
  
  .explanation_wrap p{
    font-size: 15px;
    line-height: 1.5em;
    margin-bottom: 1em;
    color: #444;
  }
  
  .explanation_wrap p:last-child{
    margin-bottom: 0;
  }
  
  .explanation_wrap ul{
  font-size: 15px;
  padding: 0 0.5em;
  margin-bottom: 1em;
  }
  
  .explanation_wrap ul li{
  text-indent: -1em;
  line-height: 1.25em;
  color: #444;
  padding-left: 1em;
  }
}

@media screen and (max-width: 590px) {
  /* loading
-------------------------------------------------*/
  #loading_main {
    width: 340px;
    height: 130px;
  }
  #loading_main .loading_img {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 440px) {
  /* loading
-------------------------------------------------*/
  #loading_main {
    width: 240px;
    height: 84px;
  }
  #loading_main .loading_img {
    margin-bottom: 13px;
  }
}
/*# sourceMappingURL=index_sp.css.map */