@charset "UTF-8";
@media (min-width: 739px) {
  body { display: block; margin: 0; padding: 0; font-size: 1.42vw; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-style: normal; color: #000000;}

  .kv_area { background: #fff; padding: 5.0vw 0 0;}
  .kv_area .inner { width: 78.5vw; margin: 0 auto; padding: 0 0 5.3vw; position: relative;}
  .kv_area .inner .txt_cell { margin: 0 0 0 3.5vw;}
  .kv_area .inner .txt_cell .sub_ttl { font-size: 150%; font-weight: 900; margin: 0 0 1.0vw; line-height: 1;}
  .kv_area .inner .txt_cell h2 { width: 58.7vw; margin: 0 0 2.8vw;}
  .kv_area .inner .txt_cell .txt { font-size: 100%; font-weight: 900; margin: 0 0 0; line-height: 1.8;}
  .kv_area .inner .img_cell { position: absolute; bottom: 0; right: 0; width: 32.2vw;}
  .kv_area .inner .img_over { position: absolute; bottom: 0; right: 0; width: 32.2vw; z-index: 2;}

  .case { position: relative; padding: 7.5vw 0 8.0vw; }
  .case::before { display: block; position: absolute; z-index: 1; content: ""; background: url(../../img/difference/case_before.png) no-repeat; background-size: 100% 100%; width: 12.0vw; height: 34.7vw; left: 0; top: 15.8vw;}
  .case::after { display: block; position: absolute; z-index: 1; content: ""; background: url(../../img/difference/case_after.png) no-repeat; background-size: 100% 100%; width: 11.8vw; height: 34.8vw; right: 0; top: 15.8vw;}
  .case.case01 { background: #FF90E1;}
  .case.case02 { background: #41E8FF;}
  .case.case03 { background: #FFDB45;}
  .case.case04 { background: #55FF97;}
  .case.case05 { background: #E293FF;}
  .case.case06 { background: #FFF85A;}
  .case.case07 { background: #7EB4FF;}
  .case h2 { text-align: center; font-size: 120%; font-weight: 700; margin: 0 auto 0.7vw;}
  .case.case02 h2 { margin: 0 auto 3.7vw;}
  .case.case03 h2 { margin: 0 auto 1.4vw;}
  .case.case04 h2 { margin: 0 auto 3.0vw;}
  .case.case05 h2 { margin: 0 auto 5.5vw;}
  .case.case06 h2 { margin: 0 auto 5.2vw;}
  .case.case07 h2 { margin: 0 auto 2.6vw;}
  .case .inner { position: relative; z-index: 2; width: 78vw; margin: 0 auto;}
  .case.case02 .inner { width: 65.6vw;}
  .case.case03 .inner { width: 71.7vw;}
  .case.case05 .inner { width: 68.4vw;}
  .case.case06 .inner { width: 71.3vw;}
  .case.case07 .inner { width: 72.2vw;}
  .case .inner h3 { text-align: center; font-size: 295%; font-weight: 700; margin: 0 auto 2.5vw;}
  .case .inner p { text-align: left; width: 51.8vw; font-size: 90%; font-weight: 400; line-height: 1.66; margin: 0 auto 0vw;}
  .case .inner .flcell { display: flex; justify-content: space-between; margin: 0 auto 2.8vw;}
  .case.case03 .inner .flcell { margin: 0 auto 0vw;}
  .case.case04 .inner .flcell { width: 62.6vw;}
  .case.case05 .inner .flcell { margin: 0 auto 1.4vw;}
  .case .inner .flcell .box { position: relative; z-index: 1;}
  .case .inner .flcell .box .img_over { position: absolute; z-index: 2; top: 0; left: 0; width: 100%;}
  .case.case01 .inner .flcell .box01 { width: 43.9%;}
  .case.case01 .inner .flcell .box02 { width: 40%; margin-right: 6%;}
  .case.case02 .inner .flcell .box01 { width: 42.6%;}
  .case.case02 .inner .flcell .box02 { width: 46.1%;}
  .case.case03 .inner .flcell .box01 { width: 47%;}
  .case.case03 .inner .flcell .box02 { width: 42.7%;}
  .case.case04 .inner .flcell .box01 { width: 44.9%;}
  .case.case04 .inner .flcell .box02 { width: 40.5%; margin-right: 2%;}
  .case.case05 .inner .flcell .box01 { width: 47.9%;}
  .case.case05 .inner .flcell .box02 { width: 37.3%; margin-right: 4%;}
  .case.case06 .inner .flcell .box01 { width: 47.8%;}
  .case.case06 .inner .flcell .box02 { width: 29.2%; margin-right: 9.8%;}
  .case.case07 .inner .flcell .box01 { width: 45.7%;}
  .case.case07 .inner .flcell .box02 { width: 38.2%; margin-right: 7.8%;}

  .message { padding: 7.0vw 0 7.7vw; background: #fff;}
  .message h2 { display: block; width: 70.7vw; margin: 0 auto 2.8vw;}
  .message .lead { text-align: center; font-size: 100%; font-weight: 700; line-height: 1.8; margin: 0 auto 3.5vw;}
  .message ul { display: flex; justify-content: space-between; width: 85.7%; margin: 0 auto;}
  .message ul li { width: 31.25%; background: #FF90E1;}
  .message ul li:nth-child(2) { background: #FFDB45;}
  .message ul li:nth-child(3) { background: #7EB4FF;}
  .message ul li .ttl { font-size: 100%; font-weight: 700; line-height: 1.5; padding: 3.4vw 0vw 0vw; margin: 0 auto 1.7vw; text-align: center;}
  .message ul li .txt { font-size: 90%; line-height: 1.66; padding: 0 2.8vw 0vw; margin: 0 auto 1.0vw; text-align: left; min-height: 26vw;}
  .message ul li .name { font-size: 90%; line-height: 1.66; padding: 0 2.8vw 0vw; margin: 0 auto 0vw; text-align: center;}

  .movie { padding: 6.3vw 0 10.9vw; background: #F0F0F0;}
  .movie h2 { display: block; width: 37.5vw; margin: 0 auto 3.5vw;}
  .movie .flcell { display: flex; justify-content: space-between; width: 85.7%; margin: 0 auto;}
  .movie .flcell .box { width: 48.5%;}

  .bestchoice { background: #fff; padding: 10.3vw 0 12.1vw;}
  .bestchoice h2 { font-size: 200%; font-weight: 700; margin: 0 auto 4.2vw; text-align: center; line-height: 1;}
  .bestchoice .img { display: block; width: 50.7vw; margin: 0 auto;}
  .bestchoice .bestchoice_bnr { border: 5px solid #000; position: relative; display: flex; justify-content: center; align-items: center; width: 56.2vw; height: 5.7vw; background: #000; font-size: 180%; font-weight: 700; line-height: 1; color: #fff; margin: 0 auto 3.5vw; letter-spacing: 0.1em;}
  .bestchoice .bestchoice_bnr:nth-of-type(2) { margin: 0 auto 7.6vw;}
  .bestchoice .bestchoice_bnr::after { display: block; position: absolute; content: ""; background: url(../../img/difference/arrow_bestchoice.png) no-repeat; background-size: 100% 100%; width: 0.8vw; height: 1.4vw; top: 0; bottom: 0; right: 2.2vw; margin: auto;}
  .bestchoice .bestchoice_bnr:hover { color: #000; background: #f2ff5a;}
  .bestchoice .bestchoice_bnr:hover::after { background: url(../../img/difference/arrow_bestchoice_hover.png) no-repeat; background-size: 100% 100%; width: 0.8vw; height: 1.4vw;}
  .bestchoice ul { display: flex; justify-content: space-between; width: 85.7vw; margin: 0 auto;}
  .bestchoice ul li { width: 26.8vw;}
  .bestchoice ul li .bestchoice_bnr { width: 100%; height: 9.1vw; font-size: 100%; line-height: 1.4; margin: 0; text-align: center; letter-spacing: 0.1em;}


  /* modal */
  .modal{ display: none; height: 100vh; position: fixed; top: 0; width: 100%; z-index: 10;}
  .modal__bg{ height: 100vh; position: absolute; width: 100%; background: rgba(0,0,0,0.70);}
  .modal__content{ left: 50%; box-sizing: border-box; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 90%; max-width: 900px;}
  .modal__content .js-modal-close { width: 35px; height: 35px; background: url("https://www.syusei.ac.jp/wp-content/themes/syusei/assets/img/comparison/icon_close.png") no-repeat center top; background-size: contain; position: absolute; right: 20px; top: -1px;}
  .modal__content video { width: 100%; height: auto; display: block;}

/* ふわふわアニメーションここから */
.fuwafuwa_tate { animation: fuwafuwa_tate 2s infinite ease-in-out;}
.fuwafuwa_yoko { animation: fuwafuwa_yoko 2s infinite ease-in-out;}
.fuwafuwa_yoko02 { animation: fuwafuwa_yoko02 2s infinite ease-in-out;}
.fuwafuwa_naname01 { animation: fuwafuwa_naname01 2s infinite ease-in-out;}
.fuwafuwa_naname02 { animation: fuwafuwa_naname02 2s infinite ease-in-out;}
@keyframes fuwafuwa_tate {
    0%, 100% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(10px);
    }
}
@keyframes fuwafuwa_yoko {
    0%, 100% {
        transform: translateX(-10px);
    }
    50% {
        transform: translateX(10px);
    }
}
@keyframes fuwafuwa_yoko02 {
    0%, 100% {
        transform: translateX(10px);
    }
    50% {
        transform: translateX(-10px);
    }
}
@keyframes fuwafuwa_naname01 {
    0%, 100% {
        transform: translate(-10px,10px);
    }
    50% {
        transform: translate(10px,-10px);
    }
}
@keyframes fuwafuwa_naname02 {
    0%, 100% {
        transform: translate(0px,0px);
    }
    50% {
        transform: translate(20px,20px);
    }
}

  .pc_only { display: block !important;}
  .sp_only { display: none !important;}
}

@media (max-width: 738px) {
  body { display: block; margin: 0; padding: 0; font-size: 4.2vw; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-style: normal; color: #000000;}

  .difference { overflow-x: hidden;}

  .kv_area { background: #fff; padding: 6.6vw 0 0;}
  .kv_area .inner { width: 86%; margin: 0 auto; padding: 0 0 8.0vw; position: relative;}
  .kv_area .inner .txt_cell {}
  .kv_area .inner .txt_cell .sub_ttl { font-size: 112.5%; font-weight: 900; margin: 0 0 1.0vw; line-height: 1; letter-spacing: -0.05em;}
  .kv_area .inner .txt_cell h2 { width: 90%; margin: 0 0 5.3vw;}
  .kv_area .inner .txt_cell .txt { font-size: 87.5%; font-weight: 700; margin: 0 0 0; line-height: 1.8;}
  .kv_area .inner .img_cell { position: absolute; bottom: 0; right: 0; width: 47.8vw;}
  .kv_area .inner .img_over { position: absolute; bottom: 0; right: 0; width: 47.8vw; z-index: 2;}

  .case { position: relative; padding: 14.6vw 0 13.3vw; }
  .case::before { display: block; position: absolute; z-index: 1; content: ""; background: url(../../img/difference/case_before_sp.png) no-repeat; background-size: 100% 100%; width: 23.2vw; height: 66.4vw; left: 0;}
  .case.case01::before { top: 32.8vw;}
  .case.case02::before { top: 32vw;}
  .case.case03::before { top: 31.7vw;}
  .case.case04::before { top: 31.7vw;}
  .case.case05::before { top: 31.7vw;}
  .case.case06::before { top: 32.5vw;}
  .case.case07::before { top: 31.7vw;}
  .case::after { display: block; position: absolute; z-index: 1; content: ""; background: url(../../img/difference/case_after_sp.png) no-repeat; background-size: 100% 100%; width: 23.2vw; height: 68vw; right: 0;}
  .case.case01::after { top: 109.8vw;}
  .case.case02::after { top: 109.6vw;}
  .case.case03::after { top: 109vw;}
  .case.case04::after { top: 108.8vw;}
  .case.case05::after { top: 109.3vw;}
  .case.case06::after { top: 109.6vw;}
  .case.case07::after { top: 110.1vw;}
  .case.case01 { background: #FF90E1;}
  .case.case02 { background: #41E8FF;}
  .case.case03 { background: #FFDB45;}
  .case.case04 { background: #55FF97;}
  .case.case05 { background: #E293FF;}
  .case.case06 { background: #FFF85A;}
  .case.case07 { background: #7EB4FF;}
  .case h2 { text-align: center; font-size: 112.5%; font-weight: 700; margin: 0 auto 6.6vw;}
  .case.case02 h2 { margin: 0 auto 11.7vw;}
  .case.case03 h2 { margin: 0 auto 5.3vw;}
  .case.case04 h2 { margin: 0 auto 6.9vw;}
  .case.case05 h2 { margin: 0 auto 15.2vw;}
  .case.case06 h2 { margin: 0 auto 9.5vw;}
  .case.case07 h2 { margin: 0 auto 9.6vw;}
  .case .inner { position: relative; z-index: 2; width: 88%; margin: 0 auto;}
  .case .inner h3 { text-align: center; font-size: 212.5%; font-weight: 700; margin: 0 auto 5.3vw; letter-spacing: -0.03em;}
  .case .inner p { text-align: left; width: 100%; font-size: 87.5%; font-weight: 400; line-height: 1.7; margin: 0 auto 0vw;}
  .case .inner .flcell { display: flex; justify-content: space-between; flex-direction: column; margin: 0 auto 8.6vw;}
  .case .inner .flcell .box { position: relative; z-index: 1;}
  .case .inner .flcell .box .img_over { position: absolute; z-index: 2; top: 0; left: 0; width: 100%;}
  .case.case01 .inner .flcell .box01 { width: 95.5%; margin: 0 0 5.3vw 4.5%}
  .case.case01 .inner .flcell .box02 { width: 88%; margin-right: 12%;}
  .case.case02 .inner .flcell .box01 { width: 82%; margin: 0 0 15.4vw 18%;}
  .case.case02 .inner .flcell .box02 { width: 83.7%; margin-right: 16.3%;}
  .case.case03 .inner .flcell .box01 { width: 91%; margin: 0 -3.5% 0vw auto;}
  .case.case03 .inner .flcell .box02 { width: 86%;}
  .case.case04 .inner .flcell .box01 { width: 78.7%; margin: 0 -1.5% 19.2vw auto;}
  .case.case04 .inner .flcell .box02 { width: 73.6%;}
  .case.case05 .inner .flcell .box01 { width: 91%; margin: 0 -1.0% 21.3vw auto;}
  .case.case05 .inner .flcell .box02 { width: 75.6%;}
  .case.case06 .inner .flcell .box01 { width: 96%; margin: 0 -2.5% 26.6vw auto;}
  .case.case06 .inner .flcell .box02 { width: 58.4%; margin-left: 8.4%;}
  .case.case07 .inner .flcell .box01 { width: 93%; margin: 0 -5.0% 10.6vw auto;}
  .case.case07 .inner .flcell .box02 { width: 77.8%;}

  .message { padding: 10.6vw 0 14.9vw; width: 88%; margin: 0 auto; background: #fff;}
  .message h2 { display: block; width: 80%; margin: 0 auto 5.3vw;}
  .message .lead { text-align: center; font-size: 87.5%; font-weight: 700; line-height: 1.7; margin: 0 auto 9.3vw;}
  .message ul { display: flex; justify-content: space-between; flex-direction: column; width: 100%; margin: 0 auto;}
  .message ul li { width: 100%; background: #FF90E1; margin-bottom: 8.8vw;}
  .message ul li:nth-child(2) { background: #FFDB45; margin-bottom: 8.8vw;}
  .message ul li:nth-child(3) { background: #7EB4FF; margin-bottom: 0vw;}
  .message ul li .ttl { font-size: 112.5%; font-weight: 700; line-height: 1.5; padding: 11.4vw 0% 0vw; margin: 0 auto 5.3vw; text-align: center;}
  .message ul li .txt { font-size: 87.5%; line-height: 1.66; padding: 0 13% 0vw; margin: 0 auto 7.4vw; text-align: left;}
  .message ul li .name { font-size: 90%; line-height: 1.66; padding: 0 13% 0vw; margin: 0 auto 0vw; text-align: center;}

  .movie { padding: 10.6vw 0 16vw; background: #F0F0F0;}
  .movie h2 { display: block; width: 71.4%; margin: 0 auto 6.6vw;}
  .movie .flcell { display: flex; justify-content: space-between; flex-direction: column; width: 88%; margin: 0 auto;}
  .movie .flcell .box { width: 100%; margin-bottom: 6.4vw;}
  .movie .flcell .box:last-of-type { margin-bottom: 0vw;}

  /* modal */
  .modal{ display: none; height: 100vh; position: fixed; top: 0; width: 100%; z-index: 10;}
  .modal__bg{ height: 100vh; position: absolute; width: 100%; background: rgba(0,0,0,0.70);}
  .modal__content{ left: 50%; box-sizing: border-box; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 90%; max-width: 900px;}
  .modal__content .js-modal-close { width: 35px; height: 35px; background: url("https://www.syusei.ac.jp/wp-content/themes/syusei/assets/img/comparison/icon_close.png") no-repeat center top; background-size: contain; position: absolute; right: 20px; top: -1px;}
  .modal__content video { width: 100%; height: auto; display: block;}

  .bestchoice { background: #fff; padding: 14.4vw 0 14.6vw;}
  .bestchoice .inner { display: block; width: 88%; margin: 0 auto;}
  .bestchoice h2 { font-size: 125%; font-weight: 700; margin: 0 auto 4.0vw; text-align: center; line-height: 1.5;}
  .bestchoice .img { display: block; width: 100%; margin: 0 2% 0 auto;}
  .bestchoice .bestchoice_bnr { position: relative; display: flex; justify-content: center; align-items: center; width: calc(100% - 2vw); height: 13.3vw; background: #000; font-size: 100%; font-weight: 700; line-height: 1; color: #fff; margin: 0 auto 4vw; padding: 0 2.0vw 0 0; letter-spacing: 0.1em;}
  .bestchoice .bestchoice_bnr:nth-of-type(2) { margin: 0 auto 12vw;}
  .bestchoice .bestchoice_bnr::after { display: block; position: absolute; content: ""; background: url(../../img/difference/arrow_bestchoice.png) no-repeat; background-size: 100% 100%; width: 3.4vw; height: 5.8vw; top: 0; bottom: 0; right: 2.9vw; margin: auto;}
  .bestchoice ul { display: flex; justify-content: space-between; flex-direction: column; width: 100%; margin: 0 auto;}
  .bestchoice ul li { width: 100%; margin: 0 auto 4vw;}
  .bestchoice ul li:last-child { margin: 0 auto 0vw;}
  .bestchoice ul li .bestchoice_bnr { width: calc(100% - 2vw); height: 13.3vw; font-size: 100%; line-height: 1.25; margin: 0; text-align: center; letter-spacing: 0.1em;}

/* ふわふわアニメーションここから */
.fuwafuwa_tate { animation: fuwafuwa_tate 2s infinite ease-in-out;}
.fuwafuwa_yoko { animation: fuwafuwa_yoko 2s infinite ease-in-out;}
.fuwafuwa_yoko02 { animation: fuwafuwa_yoko02 2s infinite ease-in-out;}
.fuwafuwa_naname01 { animation: fuwafuwa_naname01 2s infinite ease-in-out;}
.fuwafuwa_naname02 { animation: fuwafuwa_naname02 2s infinite ease-in-out;}
@keyframes fuwafuwa_tate {
    0%, 100% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(10px);
    }
}
@keyframes fuwafuwa_yoko {
    0%, 100% {
        transform: translateX(-10px);
    }
    50% {
        transform: translateX(10px);
    }
}
@keyframes fuwafuwa_yoko02 {
    0%, 100% {
        transform: translateX(10px);
    }
    50% {
        transform: translateX(-10px);
    }
}
@keyframes fuwafuwa_naname01 {
    0%, 100% {
        transform: translate(-0px,0px);
    }
    50% {
        transform: translate(10px,-10px);
    }
}
@keyframes fuwafuwa_naname02 {
    0%, 100% {
        transform: translate(0px,0px);
    }
    50% {
        transform: translate(10px,10px);
    }
}

  .pc_only { display: none !important;}
  .sp_only { display: block !important;}
}