@charset "utf-8";


/*----------------------------------

header.contents

----------------------------------*/
header.contents {
  background: #e82400;
  color: #fff;
  text-align: center;
  padding: 18px 0;
}

header.contents h1 {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  align-items: center;
}

header.contents h1 img {
  width: 274px;
  display: inline-block;
}

header.contents h1 span {
  font-size: 3.8rem;
  font-weight: 700;
  padding: 2px 0 0 20px;
}




@media screen and (max-width: 768px) {

header.contents {
  padding: 2.3vw 0;
}

header.contents h1 img {
  width: 34vw;
}

header.contents h1 span {
  font-size: 5vw;
  padding-left: 10px;
}



}




/*----------------------------------

.main

----------------------------------*/
.main {
  background: #f0f0f0 url(../img/main_confetti.png) no-repeat center 30px;
}

.main .txt {
  padding: 60px 0 40px;
  margin: 0 40px;
  text-align: center;
}

.main .txt .shoulder {
  max-width: 1020px;
  margin: 0 auto;
  text-align: left;
  display: block;
  font-size: min(2.4vw, 2.4rem);
  line-height: 1.6;
  font-weight: 700;
  color: #e82400;
  position: relative;
  padding-right: 130px;
}

.main .txt .shoulder::after {
  position: absolute;
  content: "";
  background: url(../img/main_app.png) no-repeat right center;
  background-size: 110px;
  width: 110px;
  height: 110px;
  top: -17px;
  right: 0;
  margin-left: 30px;
}

.main .txt .ttl {
  margin-top: 30px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  align-items: center;
}

.main .txt .sub {
  max-width: 500px;
  width: 44vw;
  margin-top: 20px;
  padding-right: 5px;
}

.main .txt h1 {
  max-width: 520px;
  width: 48vw;
}

.main .txt .term {
  display: inline-block;
  margin: 40px auto 0;
  padding: 16px 30px;
  background: #fff;
  color: #e82400;
  font-size: 1.6rem;
  border-radius: 100px;
}

.main .txt .term em {
  font-size: 2.8rem;
  vertical-align: -2px;
}

.main .txt .term span {
  background: #e82400;
  color: #fff;
  font-size: 1.2rem;
  width: 24px;
  height: 24px;
  line-height: 24px;
  display: inline-block;
  border-radius: 12px;
  vertical-align: 2px;
  margin-left: 5px;
  padding-left: 1.5px;
}

.main .note {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  margin-top: 20px;
}



@media screen and (max-width: 768px) {

.main {
  background: #f0f0f0 url(../img/main_confetti_sp.png) no-repeat center 14px;
  background-size: contain;
  background-size: 98%;
}

.main .fig {
  order: 2;
  height: 52vw;
  width: 100%;
}

.main .txt {
  order: 1;
  padding: 8vw 4vw 6vw;
  margin: 0;
  background-position: center 10%;
}

.main .txt .shoulder {
  font-size: min(3.2vw, 2rem);
  padding-right: 20vw;
}

.main .txt .shoulder::after {
  background-size: 18vw;
  width: 18vw;
  height: 18vw;
  top: -4.6vw;
  right: 8px;
}

.main .txt .ttl {
  flex-direction: column;
  margin-top: 0;
}

.main .txt .sub {
  width: 70vw;
  margin-top: 4vw;
  padding-right: 0;
}

.main .txt h1 {
  width: 80vw;
  min-width: 200px;
  margin: 4vw auto 0;
}

.main .txt .term {
  font-size: 2.6vw;
  padding: 3vw 0;
  width: 100%;
  margin-top: 6vw;
}

.main .txt .term em {
  font-size: 4vw;
  vertical-align: -1px;
}

.main .txt .term span {
  font-size: 2vw;
  vertical-align: 1px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin-left: 1vw;
}

.main .note {
  padding: 0 4vw;
  margin-top: 4vw;
}


}



/*----------------------------------

.present

----------------------------------*/
.present {
  background: #f0f0f0;
  padding-top: 70px;
}

.present .content {
  background: #fff;
  text-align: center;
  border-radius: 4px;
  border: solid 1px #ffeba9;
  padding: 60px 6% 80px;
}

.present .content > header {
  text-align: center;
}

.present .content > header .pre {
  color: #e82400;
  font-size: 1.3rem;
  display: inline-block;
}

.present .content > header .pre em {
  display: block;
  color: #fff;
  font-size: 2.4rem;
  background: #e82400;
  border-radius: 35px;
  width: 70px;
  height: 70px;
  line-height: 70px;
  margin-top: 10px;
}

.present .content > header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-top: 20px;
}

.present .content > header h2 img {
  display: inline;
}

.pre1 h2 img {
  width: 96px;
  padding-right: 6px;
}

.present .content > header .read {
  font-size: 1.5rem;
  line-height: 1.8;
  margin-top: 40px;
}

.present .content > header .read em {
  color: #e82400;
  background: linear-gradient(transparent 70%, #ffeba9 0%);
  display: inline-block;
  line-height: 1.2;
  font-weight: 700;
}

.pre1 .setmenu {
  text-align: left;
  margin-top: 30px;
}

.pre1 .setmenu h3 {
  color: #fff;
  background: #111;
  border-radius: 90px;
  font-size: 1.4rem;
  text-align: center;
  padding: 8px 16px;
  display: inline-block;
}

.pre1 .setmenu .set {
  margin-top: 20px;
  display: -webkit-box;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: max(5%, 25px);
}

.pre1 .setmenu .set figure img {
  border-radius: 4px;
}

.pre1 .setmenu .set h4 {
  margin-top: 8px;
  color: #e82400;
  font-weight: 700;
  text-align: center;
  font-size: 2rem;
  line-height: 1.4;
  height: 4em;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  align-items: center;
}

.pre1 .setmenu .set p {
  font-size: 1.4rem;
  line-height: 1.6;
}

.pre1 .setmenu .note {
  margin-top: 80px;
}

.pre2 {
  padding-top: 40px;
}

.pre2 h2 img {
  width: 195px;
  margin-bottom: -7px;
}

.pre2 h2 span {
  font-size: 1.5rem;
  vertical-align: middle;
  font-weight: 700;
}

.pre2 .online h3 {
  font-size: 2rem;
  font-weight: 700;
  color: #e82400;
  border-radius: 90px;
  border: solid 1px #e82400;
  padding: 15px 30px;
  display: inline-block;
  margin-top: 60px;
}

.pre2 .online h3 em {
  font-size: 3rem;
  font-weight: 700;
  padding-right: .1em;
}

.pre2 .online .screen {
  margin: 40px 6% 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  align-items: center;
}

.pre2 .online .screen > figure {
  width: 47%;
}

.pre2 .online .balloon {
  width: 48%;
  background: #ffeba9;
  border-radius: 4px;
  padding: 20px;
  position: relative;
}

.pre2 .online .balloon::before {
  position: absolute;
  left: -20px;
  top: 20%;
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 30px solid #ffeba9;
  border-bottom: 20px solid transparent;
}

.pre2 .online .balloon p {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 20px;
}

.pre2 .online .balloon p span {
  color: #e82400;
  font-weight: 700;
}
.pre2 .online .balloon p span em {
  font-size: 2.2rem;
  font-weight: 700;
}

.pre2 .support {
  margin-top: 70px;
}

.pre2 .support h3 {
  font-weight: 700;
  font-size: 1.8rem;
}

.pre2 .support .read {
  font-size: 1.5rem;
  line-height: 1.6;
  margin-top: 20px;
}

.pre2 .external {
  margin-top: 40px;
}

.pre2 .external a img {
  width: 115px;
  display: inline-block;
  margin-bottom: -4px;
  padding-right: 5px;
}





@media screen and (max-width: 768px) {


.present {
  padding-top: 10vw;
}

.present .content {
  padding: 10vw 4vw 12vw;
}

.present .content > header h2 {
  font-size: 5.6vw;
  line-height: 1.5;
}

.present .content > header .pre em {
  width: 14vw;
  height: 14vw;
  line-height: 14vw;
  border-radius: 7vw;
  font-size: 5vw;
  margin: 2vw auto 0;
}

.pre1 h2 img {
  width: 17vw;
  padding-right: 1vw;
}

.present .content > header .read {
  font-size: 3vw;
  margin-top: 4vw;
}

.pre1 .setmenu h3 {
  font-size: 2.6vw;
}

.pre1 .setmenu .set {
  grid-template-columns: 1fr 1fr;
  gap: max(6vw, 5vw) max(4vw, 3vw);
}

.pre1 .setmenu .set h4{
  font-size: min(3.8vw, 2rem);
  height: 4.2em;
  margin-top: 1vw;
}

.pre1 .setmenu .set p {
  font-size: 3vw;
}

.pre1 .setmenu .note {
  margin-top: 10vw;
}

.pre2 {
  padding-top: 5vw;
}

.pre2 h2 img {
  width: 35vw;
}

.pre2 .online h3 {
  margin-top: 8vw;
  font-size: min(4vw, 2rem);
  padding: 2vw 5vw;
  line-height: 1.2;
}

.pre2 .online h3 em {
  font-size: 6vw;
}

.pre2 .online .screen {
  flex-direction: column;
  margin: 6vw 0 0;
}

.pre2 .online .screen > figure {
  width: 60vw;
}

.pre2 .online .balloon {
  width: 100%;
  margin-top: 30px;
}

.pre2 .online .balloon::before {
  left: calc(50% - 10px);
  top: -40px;
  border-left: 10px solid transparent;
  border-bottom: 20px solid #ffeba9;
  border-right: 10px solid transparent;
}

.pre2 .online .balloon p {
  font-size: 3.6vw;
}

.pre2 .support {
  margin-top: 12vw;
}

.pre2 .support h3 {
  font-size: 4vw;
}

.pre2 .support .read {
  font-size: 3vw;
  text-align: justify;
  text-justify: inter-ideograph;
}

.pre2 .external a img {
  width: 25vw;
}

.external a::after {
  margin-bottom: -2px;
}



}




/*----------------------------------

.target

----------------------------------*/
.target {
  background: #f0f0f0;
  padding: 90px 0 120px;
}

.target .inner {
  text-align: center;
}

.target .inner > .note {
  padding-top: 20px;
  text-align: left;
}

.target .btn {
  margin-bottom: 90px;
}

.target .exclusive {
  background: #fff;
  border-radius: 4px;
  padding: 60px 6% 80px;
}

.target .exclusive h2 {
  color: #e82400;
  font-size: 2rem;
  font-weight: 700;
  line-height: 32px;
  position: relative;
  display: inline-block;
  padding: 0 0 20px 50px;
  border-bottom: solid 1px #ddd;
}

.target .exclusive h2:before {
  content: "";
  background: url(../img/ico_att.png) no-repeat left center;
  background-size: contain;
  width: 32px;
  height: 32px;
  display: inline-block;
  position: absolute;
  left: 0;
}

.target .exclusive ul {
  display: -webkit-box;
  display: flex;
  gap: max(5%, 25px);
  -webkit-box-pack: center;
  justify-content: center;
  margin: 50px auto 60px;
}

.target .exclusive ul figure img {
  border-radius: 4px;
}

.target .exclusive li:nth-of-type(1) h3 {
  width: 110px;
  margin: 22px auto 0;
}

.target .exclusive li:nth-of-type(2) h3 {
  width: 99px;
  margin: 20px auto 0;
}

.target .exclusive li:nth-of-type(3) h3 {
  width: 58px;
  margin: 16px auto 0;
}

.target .exclusive li .note {
  padding-top: 10px;
}

.target .exclusive li .note:before {
  content: "（";
}

.target .exclusive li .note:after {
  content: "）";
}

.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.modal_bg {
  background: rgba(0,0,0,0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}

.modal_content {
  padding: 60px 80px 80px;
  border-radius: 4px;
  background: #fff;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  max-width: 1280px;
  margin: 0 auto;
  max-height: 80%;
  width: 80%;
  text-align: left;
  overflow-y: scroll;
}

.modal_content p {
  line-height: 1.8;
  font-size: 1.5rem;
  text-align: center;
}

.modal_content h3 {
  background: #f0f0f0;
  font-size: 1.3rem;
  border-radius: 30px;
  padding: 13px 35px;
  display: inline-block;
  margin: 30px 0 20px;
}

.modal-close {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 32px;
  right: 48px;
}

.modal-close::before,
.modal-close::after {
  content: "";
  display: block;
  width: 1px;
  height: 24px;
  background: #e82400;
  transform: rotate(45deg);
  transform-origin:0% 50%;
  position: absolute;
  top: -3px;
  left: 50%;
}

.modal-close::after {
  transform: rotate(-45deg);
  transform-origin:100% 50%;
  left: auto;
  right: 50%;
}


@media all and (-ms-high-contrast: none) { /*IE*/

.modal_content p:last-of-type {
  margin-bottom: 80px;
}


}





@media screen and (max-width: 768px) {

.target {
  padding: 12vw 0 15vw;
}

.target .inner > .note {
  padding-top: 4vw;
}

.target .btn {
  margin: 0 4vw 12vw;
}

.target .exclusive {
  padding: 8vw 4vw;
}

.target .exclusive h2:before {
  width: 5vw;
  height: 5vw;
}

.target .exclusive h2 {
  font-size: 3.2vw;
  padding: 0 0 2.6vw 5.8vw;
  line-height: 5.6vw;
}

.target .exclusive li .note:before,
.target .exclusive li .note:after {
  display: none;
}

.target .exclusive ul {
  margin: 8vw auto 7vw;
  gap: 20px 4%;
  flex-wrap: wrap;
}

.target .exclusive ul li {
  margin: 0;
  width: 48%;
}

.target .exclusive li:nth-of-type(1) h3 {
  width: 20vw;
  margin: 4vw auto 0;
}

.target .exclusive li:nth-of-type(2) h3 {
  width: 19vw;
  margin: 3.6vw auto 0;
}

.target .exclusive li:nth-of-type(3) h3 {
  width: 11vw;
  margin: 3vw auto 0;
}

.modal_content {
  padding: 12vw 4vw 8vw 4vw;
  width: 90vw;
}

.modal_content p {
  font-size: 3vw;
  text-align: justify;
  text-justify: inter-ideograph;
}

.modal_content h3 {
  font-size: 3vw;
  padding: 3vw 6vw;
  margin: 6vw 0 3vw;
}

.modal-close {
  width: 5vw;
  height: 5vw;
  top: 4vw;
  right: 5vw;
}

.modal-close::before,
.modal-close::after {
  height: 6vw;
}


}




/*----------------------------------

.tabarea

----------------------------------*/
.tabwrap > input[type="radio"] {
  display: none;
}

.tab {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}

.tab label {
  display: block;
  cursor: pointer;
  font-size: 1.4rem;
  color: #111;
  font-weight: 700;
  border-radius: 4px;
  background: #f0f0f0;
  padding: 22px 50px;
  margin: 0 8px;
  height: 90%;
}

.tabpanel {
  width: 100%;
  display: none;
}

#tab1:checked ~ .tab .tab1_label,
#tab2:checked ~ .tab .tab2_label {
  font-size: 1.6rem;
  color: #e82400;
  font-weight: 700;
  border-left: solid 1px #ddd;
  border-top: solid 1px #ddd;
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #fff;
  border-radius: 4px 4px 0 0;
  padding: 26px 50px;
  background: #fff;
  height: 100%;
  pointer-events: none;
}


#tab1:checked ~ .panel #panel1,
#tab2:checked ~ .panel #panel2 {
  display: block;
}

.tabarea {
  text-align: center;
  padding: 100px 0;
}

.tabarea > p {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
}

.tabwrap {
  margin-top: 60px;
}

.panel {
  border: solid 1px #ddd;
  border-radius: 4px;
  max-width: 1200px;
  margin: -1px auto 0;
  padding: 70px 6% 100px;
}

.panel header p {
  background: #ffeba9;
  border-radius: 30px;
  color: #e82400;
  font-weight: 700;
  font-size: 1.5rem;
  display: inline-block;
  padding: 14px 30px 11px;
  line-height: 1.5;
}

.panel header h3 {
  font-size: 3rem;
  font-weight: 700;
  margin-top: 25px;
}

.panel .attention {
  color: #e82400;
  font-size: 1.4rem;
  text-align: center;
  background: #fff;
  border-radius: 100px;
  border: solid 1px #e82400;
  padding: 20px 30px;
  line-height: 1.6;
}

.panel .step {
  border: solid 1px #e82400;
  border-radius: 4px;
  padding: 80px 7% 70px;
  margin-top: 50px;
  position: relative;
}

.panel .step h4 {
  color: #e82400;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.6;
}

.panel .step h4 span {
  font-size: 1.6rem;
  font-weight: 700;
}

.panel .step::before {
  display: inline-block;
  position: absolute;
  left: 40px;
  top: 40px;
  color: #e82400;
  font-size: 1.8rem;
}

.panel .s01::before {
  content: "01";
}

.panel .s02::before {
  content: "02";
}

.panel .s03::before {
  content: "03";
}

.panel .s04::before {
  content: "04";
}

.panel .pairing .read {
  font-size: 1.5rem;
  line-height: 1.8;
  margin: 20px 0 30px;
}

.panel .login .scr {
  margin-top: 60px;
}

.panel .login .scr ul {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.panel .login .scr ul figure img {
  border-radius: 4px;
  border: solid 1px #ddd;
}

.panel .login .scr li {
  max-width: 29%;
  width: 20vw;
  position: relative;
}

.panel .login .scr li figure {
  position: relative;
}

.panel .login .scr li:nth-of-type(n + 2) figure::before,
.panel .login .scr li:nth-of-type(n + 2) figure::after {
  position: absolute;
  top: calc(50% - 4px);
  right: 50%;
  margin: auto;
  content: "";
  vertical-align: middle;
  transition: all .3s;
}

.panel .login .scr li:nth-of-type(n + 2) figure::before {
  left: -74%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: #e82400;
}

.panel .login .scr li:nth-of-type(n + 2) figure::after {
  left: calc(-74% + 6px);
  width: 8px;
  height: 8px;
  border-top: 2px solid #e82400;
  border-right: 2px solid #e82400;
  transform: rotate(45deg);
}

.panel .login .scr li p {
  font-size: 1.3rem;
  margin-top: 20px;
  line-height: 1.6;
}

.panel .login .scr li p img {
  display: inline;
  width: 18px;
  padding: 0 4px 0 2px;
  vertical-align: middle;
}

.panel .login .scr li span {
  background: rgba(255, 235, 169, 0.6);
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  z-index: 10;
}

.panel .login .scr li:nth-of-type(1) span {
  top: calc(6% - 3vw);
  left: calc(9% - 3vw);
}

.panel .login .scr li:nth-of-type(2) span {
  top: calc(21% - 3vw);
  left: calc(57% - 3vw);
}

.panel .apply .btn {
  margin: 30px 0 20px;
}

.panel .final {
  border: solid 1px #fedf78;
  background: #fffbee;
  border-radius: 4px;
  padding: 80px 7% 70px;
  margin-top: 50px;
  position: relative;
}

.panel .final h4 {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.4;
  color: #e82400;
}

.panel .final .read {
  font-size: 1.5rem;
  line-height: 1.8;
  margin: 30px 0 10px;
}

.panel .final .read em {
  font-weight: 700;
  color: #e82400;
}

.panel .final .review {
  border-top: solid 1px #fedf78;
  margin-top: 70px;
  padding-top: 70px;
}

.panel .final .review h5 {
  font-size: 2rem;
  font-weight: 700;
  position: relative;
  color: #e82400;
  display: inline-block;
}

.panel .final .review h5:before,
.panel .final .review h5:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 40px;
  height: 1px;
  background-color: #e82400;
  transform: rotate(-60deg);
}

.panel .final .review h5:before {
  left: -50px;
  transform: rotate(60deg);
}

.panel .final .review h5:after {
  right: -50px;
  transform: rotate(-60deg);
}

.panel .final .review p {
  font-size: 1.4rem;
  margin-top: 20px;
}

.panel .final .review .image {
  margin-top: 40px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.panel .final .review .image li {
  width: 30%;
}

.panel .final .review .image img {
  border-radius: 50%;
}

.panel .regist .read {
  font-size: 1.5rem;
  line-height: 1.8;
  margin: 20px 0 10px;
}

.panel .regist .logo {
  width: 160px;
  margin: 40px auto 20px;
} 

.panel .regist .btn a {
  padding: 15px 65px 15px 55px;
  font-size: 1.6rem;
}

.panel .regist .btn a::before,
.panel .regist .btn a::after {
  right: 30px;
}

#panel2 .apply .attention {
  margin: 30px 0 40px;
}

#panel2 .apply .attention em {
  background: linear-gradient(transparent 70%, #ffeba9 0%);
  display: inline-block;
}



@media screen and (max-width: 768px) {

.tabarea {
  padding: 12vw 0;
}

.tabwrap {
  margin-top: 8vw;
}

.tab {
  padding: 0 3vw;
}

.tab label {
  font-size: 3vw;
  padding: 5.6vw 4vw;
  margin: 0 1vw;
  width: 50%;
}

#tab1:checked ~ .tab .tab1_label,
#tab2:checked ~ .tab .tab2_label {
  font-size: 3.4vw;
  padding: 6vw 2vw;
}

.tabarea .inner {
  padding: 0;
}

.tabarea > p {
  font-size: 3.6vw;
  line-height: 1.6;
}

.panel {
  border: none;
  border-top: solid 1px #ddd;
  border-radius: 0;
  margin: -1px auto 0;
  padding: 10vw 4vw 0;
}

.panel header p {
  font-size: 2.7vw;
  padding: 2.8vw 4.5vw 2.4vw;
}

#panel2 header p {
  font-size: 2.6vw;
}

.panel header h3 {
  font-size: 5.6vw;
  margin-top: 4vw;
}

.panel .attention {
  font-size: 3vw;
  border-radius: 8px;
  padding: 4vw;
}

.panel .step {
  padding: 12vw 4vw 10vw;
  margin-top: 8vw;
}

.panel .step::before {
  font-size: 4.5vw;
  top: 5vw;
  left: 4vw;
}

.panel .step h4 {
  font-size: 3.6vw;
}

.panel .step h4 span {
  font-size: 3.2vw;
}

.panel .pairing .read {
  font-size: 3vw;
  margin: 4vw 0 5vw;
}

.panel .pairing div.sp {
  margin-top: 8vw;
}

.panel .pairing div.sp h5 {
  font-size: 3.2vw;
  font-weight: 700;
  color: #e82400;
  position: relative;
}

.panel .pairing div.sp h5:before,
.panel .pairing div.sp h5:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 5vw;
  height: 1px;
  background-color: #e82400;
  transform: rotate(-60deg);
}

.panel .pairing div.sp h5:before {
  left: 8vw;
  transform: rotate(60deg);
}

.panel .pairing div.sp h5:after {
  right: 8vw;
  transform: rotate(-60deg);
}

.panel .pairing div.sp dl {
  margin: 4vw auto 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}

.panel .pairing div.sp dt {
  margin-right: 3vw;
  height: 14.4vw;
  width: 14.4vw;
}

.panel .pairing div.sp dt img {
  border: solid 1px #ddd;
  border-radius: 12px;
  height: 100%;
}

.panel .pairing div.sp .and {
  margin: -2.3vw 0;
}

.panel .pairing div.sp .and img {
  height: 19vw;
  width: auto;
}

.panel .pairing div.sp .ios {
  margin: 0;
}

.panel .pairing div.sp .ios img {
  height: 14.4vw;
  width: auto;
}

.panel .login .scr {
  margin-top: 8vw;
}

.panel .login .scr ul {
  flex-direction: column;
}

.panel .login .scr li {
  max-width: 100%;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  align-items: center;
}

.panel .login .scr li figure {
  width: 60vw;
  margin-right: 4vw;
}

.panel .login .scr li span {
  width: 12vw;
  height: 12vw;
}

.panel .login .scr li:nth-of-type(1) span {
  top: -3vw;
  left: -2.8vw;
}

.panel .login .scr li:nth-of-type(2) span {
  top: 4vw;
  left: 14vw;
}

.panel .login .scr li:nth-of-type(n + 2) {
  margin-top: 12vw;
}

.panel .login .scr li p {
  width: 80vw;
  font-size: 3vw;
  margin: 0;
}

.panel .login .scr li:nth-of-type(n + 2) figure::before,
.panel .login .scr li:nth-of-type(n + 2) figure::after {
  bottom: 14vw;
}

.panel .login .scr li:nth-of-type(n + 2) figure::before {
  height: 3.6vw;
  top: -44vw;
  left: 50%;
  width: 1px;
}

.panel .login .scr li:nth-of-type(n + 2) figure::after {
  width: 1.6vw;
  height: 1.6vw;
  top: -42.5vw;
  border-top: 1px solid #e82400;
  border-right: 1px solid #e82400;
  transform: rotate(135deg);
  left: calc(50% - 0.8vw);
}

.panel .apply .btn {
  margin: 5vw 0 2vw;
}

.panel .final {
  padding: 12vw 4vw 10vw;
  margin-top: 8vw;
}

.panel .final h4 {
  font-size: 4.2vw;
}

.panel .final .read {
  font-size: 3vw;
  margin: 5vw 0 3vw;
}

.panel .final .review {
  padding-top: 10vw;
  margin-top: 10vw;
}

.panel .final .review h5 {
  font-size: 3.2vw;
}

.panel .final .review h5:before,
.panel .final .review h5:after {
  width: 5vw;
}

.panel .final .review h5:before {
  left: -6vw;
}

.panel .final .review h5:after {
  right: -6vw;
}

.panel .final .review p {
  font-size: 2.6vw;
  margin-top: 4vw;
}

.panel .final .review .image {
  margin-top: 6vw;
}

.panel .regist .read {
  font-size: 3vw;
  margin: 4vw 0 2vw;
}

.panel .regist .btn a {
  padding: 3.8vw 7vw 3.8vw 3vw;
  width: 100%;
  font-size: 3.6vw;
}

#panel2 .apply .attention {
  margin: 6vw 0 6vw;
}

.panel .regist .attention {
  margin-top: 6vw;
}

.panel .regist .logo {
  margin: 6vw auto 3vw;
}



}




/*----------------------------------

.requirements

----------------------------------*/
.requirements .inner > section:not(:first-of-type) {
  margin-top: 35px;
}

.requirements h2 {
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.requirements .read {
  font-size: 1.3rem;
  line-height: 1.8;
  text-align: justify;
  text-justify: inter-ideograph;
}

.requirements h3 {
  margin-top: 15px;
}


@media screen and (max-width: 768px) {

.requirements h2 {
  font-size: 3.2vw;
  margin-bottom: 3vw;
}

.requirements .read {
  font-size: 2.6vw;
}

.requirements .inner > section:not(:first-of-type) {
  margin-top: 6vw;
}


}




/*----------------------------------

.contact

----------------------------------*/
.contact {
  background: #f0f0f0;
  margin-top: 120px;
  padding: 50px 0;
}

.contact h2 {
  font-size: 1.3rem;
  font-weight: 700;
  border-right: solid 1px #ddd;
  padding-right: 25px;
  margin-right: 25px;
  display: inline-block;
  line-height: 1.8;
}

.contact .inner > div {
  margin-bottom: 10px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  align-items: center;
}

.contact .inner > div dl {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  align-items: center;
}

.contact .inner > div dt {
  font-size: 1.3rem;
  font-weight: 700;
}

.contact .inner > div dd {
  padding: 10px 0 10px 38px;
  margin-left: 20px;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  position: relative;
}

.contact .inner > div dd a {
  color: #111;
  text-decoration: none;
}

.contact .inner > div dd:before {
  content: "";
  width: 30px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../img/ico_freecall.svg) no-repeat left center;
  background-size: contain;
}

.contact .inner > dl {
  line-height: 1.8;
  font-size: 1.2rem;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
}

.contact .inner > dl dt {
  margin-right: 10px;
}




@media screen and (max-width: 768px) {

.contact {
  margin-top: 15vw;
  padding: 8vw 0;
}

.contact .inner > div {
  flex-direction: column;
  align-items: unset;
  margin-bottom: 1vw;
}

.contact h2 {
  border: none;
  padding: 0;
  margin: 0;
  font-size: 3vw;
}

.contact .inner > div dt {
  font-size: 2.8vw;
}

.contact .inner > div dd {
  padding: 1vw 0 1vw 9vw;
  margin-left: 5vw;
  font-size:4vw;
}

.contact .inner > div dd:before {
  width: 7vw;
}

.contact .inner > dl {
  font-size: 2.6vw;
}


}