/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
共通
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
:root { --main-width: 100vw; --device-width: 750; margin-top: 0 !important; }
html { scroll-behavior: smooth; }
main { font-family: "Noto Sans JP", sans-serif; font-family: "Zen Maru Gothic", sans-serif; margin-top: calc(-155 / var(--device-width) * var(--main-width)); padding-bottom: calc(100 / var(--device-width) * var(--main-width)); overflow: hidden; }
main img { width: 100%; height: auto; vertical-align: bottom; }
main a { text-decoration: none; }
main a:hover { opacity: 0.5; transition: 0.4s; }
main * { box-sizing: border-box; }

.js-fade { opacity: 0; visibility: hidden; transform: translateY(100px); transition: opacity 1s, visibility 1s, transform 1s; }
.inview { opacity: 1; visibility: visible; transform: translateY(0px); }

.spbr { display: block; }
.pcbr { display: none; }

@media screen and (min-width:750px) {
  :root { --main-width: 100vw; --device-width: 1280; }
  main { padding-bottom: calc(160 / var(--device-width) * var(--main-width)); }
  
  .spbr { display: none; }
  .pcbr { display: inline-block; }
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
MV
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
#mvSec { background: url("/app/_assets/images/mv_bg_sp.png") no-repeat left top 10vw / 100vw; height: 240vw; position: relative; }

#mvSec .catch,
#mvSec .mvImg1,
#mvSec .mvImg2,
#mvSec .mvImg3,
#mvSec .mvImg4,
#mvSec .mvImg5,
#mvSec .mvImg6,
#mvSec .mvImg7,
#mvSec .mvImg8,
#mvSec .infoArea { position: absolute; }

#mvSec .catch { 
  width: calc(500 / var(--device-width) * var(--main-width));
  left: 50%;
  transform: translateX(-50%);
  top: calc(237 / var(--device-width) * var(--main-width));
}

#mvSec .catch1,
#mvSec .catch2{
  opacity: 0;
}

#mvSec .catch1.bound,
#mvSec .catch2.bound {
  animation: bound 1s ease-in-out forwards;
}

#mvSec .mvImg1 {
  opacity: 0;
  width: calc(294 / var(--device-width) * var(--main-width));
  left: calc(52 / var(--device-width) * var(--main-width));
  top: calc(567 / var(--device-width) * var(--main-width));
}

#mvSec .mvImg1.zoomIn {
  animation: zoomIn 1.5s ease-in-out forwards;
}

#mvSec .mvImg2 {
  opacity: 0;
  width: calc(150 / var(--device-width) * var(--main-width));
  left: calc(28 / var(--device-width) * var(--main-width));
  top: calc(800 / var(--device-width) * var(--main-width));
}

#mvSec .mvImg2.yodomaru {
  animation: yodomaruSp 0.5s ease-in-out 1.5s forwards;
}

#mvSec .mvImg3 {
  opacity: 0;
  width: calc(136 / var(--device-width) * var(--main-width));
  left: calc(128 / var(--device-width) * var(--main-width));
  top: calc(925 / var(--device-width) * var(--main-width));
}

#mvSec .mvImg3.slideIn {
  animation: slideIn 0.5s ease-in-out 0.3s forwards;
}

#mvSec .mvImg4 {
  opacity: 0;
  width: calc(520 / var(--device-width) * var(--main-width));
  left: calc(240 / var(--device-width) * var(--main-width));
  top: calc(590 / var(--device-width) * var(--main-width));
}

#mvSec .mvImg4.slideIn {
  animation: slideIn 0.5s ease-in-out 0.7s forwards;
}

#mvSec .mvImg5 {
  opacity: 0;
  width: calc(190 / var(--device-width) * var(--main-width));
  left: calc(190 / var(--device-width) * var(--main-width));
  top: calc(824 / var(--device-width) * var(--main-width));
}

#mvSec .mvImg5.slideIn {
  animation: slideIn2 0.8s ease-in-out forwards;
}

#mvSec .mvImg6 {
  opacity: 0;
  width: calc(108 / var(--device-width) * var(--main-width));
  left: calc(96 / var(--device-width) * var(--main-width));
  top: calc(1127 / var(--device-width) * var(--main-width));
}

#mvSec .mvImg6.fadeIn {
  animation: fadeIn 0.5s ease-in-out forwards;
}

#mvSec .mvImg7 {
  opacity: 0;
  width: calc(108 / var(--device-width) * var(--main-width));
  left: calc(335 / var(--device-width) * var(--main-width));
  top: calc(1127 / var(--device-width) * var(--main-width));
}

#mvSec .mvImg7.fadeIn {
  animation: fadeIn 0.5s ease-in-out forwards;
}

#mvSec .mvImg8 {
  opacity: 0;
  width: calc(72 / var(--device-width) * var(--main-width));
  left: calc(594 / var(--device-width) * var(--main-width));
  top: calc(549 / var(--device-width) * var(--main-width));
}

#mvSec .mvImg8.fadeIn {
  animation: fadeIn 0.3s ease-in-out 1s forwards;
}

#mvSec .infoArea {
  left: 50%; transform: translateX(-50%);
  top: calc(1370 / var(--device-width) * var(--main-width));
  margin: auto;
  color: #3e3a39;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.4;
}

#mvSec .infoArea > p:first-of-type {
  font-size: calc(40 / var(--device-width) * var(--main-width));
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.4em;
}

#mvSec .infoArea .infoInner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: calc(612 / var(--device-width) * var(--main-width));
  margin: 0 auto 2.6%;
}

#mvSec .infoArea .infoInner div p {
  font-size: calc(30 / var(--device-width) * var(--main-width));
  font-weight: 500;
  text-align: center;
  margin-bottom: 0.5em;
}

#mvSec .infoArea .infoInner .apple img {
  display: block;
  width: calc(254 / var(--device-width) * var(--main-width));
  margin: auto;
}

#mvSec .infoArea .infoInner .google img {
  display: block;
  width: calc(315 / var(--device-width) * var(--main-width));
  margin: auto;
}

#mvSec .infoArea .attention {
  color: #3e3a39;
  font-size: calc(16 / var(--device-width) * var(--main-width));
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  width: 95%;
  margin: auto;
}

@media screen and (min-width:750px) {
  #mvSec { background: url("/app/_assets/images/mv_bg_pc.png") no-repeat left top 2.5vw / 100vw; height: 80.2vw; }

  #mvSec .catch { 
    text-align: center;
    width: calc(481 / var(--device-width) * var(--main-width));
    left: auto;
    transform: none;
    right: calc(100 / var(--device-width) * var(--main-width));
    top: calc(240 / var(--device-width) * var(--main-width));
  }

  #mvSec .mvImg1 {
    width: calc(256 / var(--device-width) * var(--main-width));
    left: calc(68 / var(--device-width) * var(--main-width));
    top: calc(200 / var(--device-width) * var(--main-width));
  }

  #mvSec .mvImg2 {
    width: calc(150 / var(--device-width) * var(--main-width));
    left: calc(72 / var(--device-width) * var(--main-width));
    top: calc(405 / var(--device-width) * var(--main-width));
  }
  
  #mvSec .mvImg2.yodomaru {
    animation: yodomaruPc 0.5s ease-in-out 1.5s forwards;
  }

  #mvSec .mvImg3 {
    width: calc(120 / var(--device-width) * var(--main-width));
    left: calc(164 / var(--device-width) * var(--main-width));
    top: calc(526 / var(--device-width) * var(--main-width));
  }

  #mvSec .mvImg4 {
    width: calc(450 / var(--device-width) * var(--main-width));
    left: calc(230 / var(--device-width) * var(--main-width));
    top: calc(254 / var(--device-width) * var(--main-width));
  }

  #mvSec .mvImg5 {
    width: calc(108 / var(--device-width) * var(--main-width));
    left: calc(238 / var(--device-width) * var(--main-width));
    top: calc(454 / var(--device-width) * var(--main-width));
  }

  #mvSec .mvImg6 {
    width: calc(94 / var(--device-width) * var(--main-width));
    left: calc(138 / var(--device-width) * var(--main-width));
    top: calc(706 / var(--device-width) * var(--main-width));
  }

  #mvSec .mvImg7 {
    width: calc(94 / var(--device-width) * var(--main-width));
    left: calc(325 / var(--device-width) * var(--main-width));
    top: calc(706 / var(--device-width) * var(--main-width));
  }

  #mvSec .mvImg8 {
    width: calc(56 / var(--device-width) * var(--main-width));
    left: calc(530 / var(--device-width) * var(--main-width));
    top: calc(215 / var(--device-width) * var(--main-width));
  }

  #mvSec .infoArea {
    top: calc(560 / var(--device-width) * var(--main-width));
    left: auto;  transform: none;
    right: calc(105 / var(--device-width) * var(--main-width));
  }

  #mvSec .infoArea > p:first-of-type {
    font-size: calc(26 / var(--device-width) * var(--main-width));
    margin-bottom: 0.4em;
  }

  #mvSec .infoArea .infoInner {
    width: calc(519 / var(--device-width) * var(--main-width));
    margin: 0 auto 1.9%;
  }

  #mvSec .infoArea .infoInner div p {
    font-size: calc(22 / var(--device-width) * var(--main-width));
    margin-bottom: 0.5em;
  }

  #mvSec .infoArea .infoInner .apple img {
    width: calc(218 / var(--device-width) * var(--main-width));
  }

  #mvSec .infoArea .infoInner .google img {
    width: calc(270 / var(--device-width) * var(--main-width));
  }

  #mvSec .infoArea .attention {
    font-size: calc(16 / var(--device-width) * var(--main-width));
  }  
  
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
背景柄
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
#pagebg {
  background: 
    url("/app/_assets/images/bg1_sp.png") no-repeat right top calc(40 / var(--device-width) * var(--main-width)) / 100vw,
    url("/app/_assets/images/bg2_sp.png") no-repeat right top calc(740 / var(--device-width) * var(--main-width)) / 100vw,
    url("/app/_assets/images/bg3_sp.png") no-repeat right top calc(2930 / var(--device-width) * var(--main-width)) / 100vw,
    url("/app/_assets/images/bg4_sp.png") no-repeat right top calc(5020 / var(--device-width) * var(--main-width)) / 100vw;
}

@media screen and (min-width:750px) {
  #pagebg {
  background: 
    url("/app/_assets/images/bg1_pc.png") no-repeat right top calc(-10 / var(--device-width) * var(--main-width)) / calc(400 / var(--device-width) * var(--main-width)),
    url("/app/_assets/images/bg2_pc.png") no-repeat left top calc(630 / var(--device-width) * var(--main-width)) / calc(400 / var(--device-width) * var(--main-width)),
    url("/app/_assets/images/bg3_pc.png") no-repeat right top calc(710 / var(--device-width) * var(--main-width)) / calc(400 / var(--device-width) * var(--main-width)),
    url("/app/_assets/images/bg4_pc.png") no-repeat left top calc(2160 / var(--device-width) * var(--main-width)) / calc(400 / var(--device-width) * var(--main-width)),
    url("/app/_assets/images/bg5_pc.png") no-repeat right top calc(2240 / var(--device-width) * var(--main-width)) / calc(400 / var(--device-width) * var(--main-width));
  }
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
主な機能
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
#functionSec .headArea { 
  background: #4fade1;
  position: relative;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  padding: 3vw 0;
  width: calc(660 / var(--device-width) * var(--main-width));
  border-radius: calc(20 / var(--device-width) * var(--main-width));
}

#functionSec .headArea h3 {
  font-weight: 500;
  font-size: calc(38 / var(--device-width) * var(--main-width));
}

#functionSec .headArea span { 
  color: #fff134; 
  font-size: calc(50 / var(--device-width) * var(--main-width));
}

#functionSec .headArea .charaInner {
  position: absolute;
  z-index: 5;
  width: calc(170 / var(--device-width) * var(--main-width));
  right: calc(-48 / var(--device-width) * var(--main-width));
  top: calc(57 / var(--device-width) * var(--main-width));
}

#functionSec .functionList {
  margin: 0 auto;
  margin-top: calc(65 / var(--device-width) * var(--main-width));
  width: calc(660 / var(--device-width) * var(--main-width));
}

#functionSec .functionList li {
  opacity: 0;
  box-shadow: 2px 2px 4px 2px rgba(15, 44, 86, .15);
  margin-top: calc(45 / var(--device-width) * var(--main-width));
  border-radius: calc(20 / var(--device-width) * var(--main-width));
  background: #fff;
}

#functionSec .functionList.scrollin li:nth-child(1) {
  animation: scrollin 0.7s ease-in-out forwards;
}

#functionSec .functionList.scrollin li:nth-child(2) {
  animation: scrollin 0.7s ease-in-out 0.2s forwards;
}

#functionSec .functionList.scrollin li:nth-child(3) {
  animation: scrollin 0.7s ease-in-out 0.3s forwards;
}

#functionSec .functionList.scrollin li:nth-child(4) {
  animation: scrollin 0.7s ease-in-out 0.4s forwards;
}

#functionSec .functionList li h4 {
  text-align: center;
  color: #4fade1;
  line-height: 1.4;
  padding-top: calc(50 / var(--device-width) * var(--main-width));
  font-size: calc(44 / var(--device-width) * var(--main-width));
}

#functionSec .functionList li h4 span {
  font-size: calc(40 / var(--device-width) * var(--main-width));
}

#functionSec .functionList p {
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(32 / var(--device-width) * var(--main-width));
  width: calc(560 / var(--device-width) * var(--main-width));
  margin-top: calc(10 / var(--device-width) * var(--main-width));
  margin-bottom: calc(20 / var(--device-width) * var(--main-width));
}

@media screen and (min-width:750px) {
  
  #functionSec .headArea { 
    padding: 1vw 0 1.5vw;
    width: calc(690 / var(--device-width) * var(--main-width));
  }

  #functionSec .headArea h3 {
    font-size: calc(32 / var(--device-width) * var(--main-width));
  }

  #functionSec .headArea span { 
    font-size: calc(44 / var(--device-width) * var(--main-width));
  }

  #functionSec .headArea .charaInner {
    position: absolute;
    width: calc(158 / var(--device-width) * var(--main-width));
    right: calc(-150 / var(--device-width) * var(--main-width));
    top: calc(-30 / var(--device-width) * var(--main-width));
    z-index: 10;
  }

  #functionSec .functionList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0;
    width: calc(1105 / var(--device-width) * var(--main-width));
  }

  #functionSec .functionList li {
    position: relative;
    width: calc(540 / var(--device-width) * var(--main-width));
    box-shadow: 2px 2px 10px 2px rgba(15, 44, 86, .15);
    margin-top: calc(43 / var(--device-width) * var(--main-width));
    height: calc(290 / var(--device-width) * var(--main-width));
    padding: calc(20 / var(--device-width) * var(--main-width)) calc(30 / var(--device-width) * var(--main-width)) 0 calc(270 / var(--device-width) * var(--main-width));
  }
  
  #functionSec .functionList li:nth-child(n+3) {
    margin-top: calc(28 / var(--device-width) * var(--main-width));
  }
  
  #functionSec .functionList .explanationImg {
    position: absolute;
    bottom: 0;
    left: calc(-45 / var(--device-width) * var(--main-width));
    width: calc(303 / var(--device-width) * var(--main-width));
  }

  #functionSec .functionList li h4 {
    text-align: left;
    line-height: 1.3;
    padding-top: 0;
    font-size: calc(28 / var(--device-width) * var(--main-width));
  }

  #functionSec .functionList li h4 span {
    font-size: calc(24 / var(--device-width) * var(--main-width));
  }

  #functionSec .functionList p {
    font-size: calc(20 / var(--device-width) * var(--main-width));
    width: 100%;
  }
  
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ご利用について
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
#howSec { 
  background: #fffcd6;
  font-family: "Noto Sans JP", sans-serif;
  margin-top: calc(220 / var(--device-width) * var(--main-width));
  padding: calc(30 / var(--device-width) * var(--main-width));
  border-radius: calc(30 / var(--device-width) * var(--main-width));
}

#howSec h3 {
  width: 100%;
  margin: auto;
  color: #3e3a39;
  font-weight: bold;
  padding-top: calc(60 / var(--device-width) * var(--main-width));
  font-size: calc(36 / var(--device-width) * var(--main-width));
  line-height: 1.6;
  text-align: center;
}

#howSec h3 .efriends {
  display: inline-block;
  vertical-align: text-bottom;
  width: calc(168 / var(--device-width) * var(--main-width));
  margin-right: calc(10 / var(--device-width) * var(--main-width));
}

/*枠線*/
#howSec #howDotLine { 
  position: relative;
  padding-bottom: calc(100 / var(--device-width) * var(--main-width));
}

#howSec #howDotLine::before {content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right, #4fade1 0 2px, transparent 2px 8px) top/100% 2px no-repeat,
    repeating-linear-gradient(to right, #4fade1 0 2px, transparent 2px 8px) bottom/100% 2px no-repeat,
    repeating-linear-gradient(to bottom, #4fade1 0 2px, transparent 2px 8px) left/2px 100% no-repeat,
    repeating-linear-gradient(to bottom, #4fade1 0 2px, transparent 2px 8px) right/2px 100% no-repeat;
}

#howSec #howDotLine .corner { 
  position: absolute; 
  width: calc(40 / var(--device-width) * var(--main-width));
}

#howSec #howDotLine .corner1  { 
  top: calc(-20 / var(--device-width) * var(--main-width));
  left: calc(-17 / var(--device-width) * var(--main-width)); 
}

#howSec #howDotLine .corner2  { 
  top: calc(-20 / var(--device-width) * var(--main-width));
  right: calc(-17 / var(--device-width) * var(--main-width)); 
}

#howSec #howDotLine .corner3  { 
  bottom: calc(-14 / var(--device-width) * var(--main-width));
  left: calc(-17 / var(--device-width) * var(--main-width)); 
}

#howSec #howDotLine .corner4  { 
  bottom: calc(-14 / var(--device-width) * var(--main-width));
  right: calc(-17 / var(--device-width) * var(--main-width)); 
}

#howSec #howTxtArea {
  position: relative;
  padding-left: calc(230 / var(--device-width) * var(--main-width));
  padding-top: calc(30 / var(--device-width) * var(--main-width));
  padding-right: calc(50 / var(--device-width) * var(--main-width));
  font-size: calc(29 / var(--device-width) * var(--main-width));
}

#howSec #howTxtArea .charaInner {
  position: absolute;
  width: calc(160 / var(--device-width) * var(--main-width)); 
  left: calc(50 / var(--device-width) * var(--main-width));
  top: 0;
}

#howSec #loginInfoArea {
  font-size: calc(25 / var(--device-width) * var(--main-width));
  background: #fff;
  display: flex;
  align-items: center;
  padding: calc(30 / var(--device-width) * var(--main-width));
  border-radius: calc(30 / var(--device-width) * var(--main-width));
  width: calc(560 / var(--device-width) * var(--main-width));
  margin: calc(30 / var(--device-width) * var(--main-width)) auto 0;
}

#howSec #loginInfoArea h4 {
  color: #4fade1;
  text-align: center;
  font-weight: 500;
  line-height: 1.4;
  padding-right: calc(26 / var(--device-width) * var(--main-width));

}

#howSec #loginInfoArea ol {
  border-left: 1px solid #4fade1;
  padding-left: calc(26 / var(--device-width) * var(--main-width));
}

#howSec #loginInfoArea ol li {
  align-items: flex-start;
  display: flex;
  line-height: calc(32 / var(--device-width) * var(--main-width));
}

#howSec #loginInfoArea ol li .noBox {
  margin-top: calc(2 / var(--device-width) * var(--main-width));
  margin-right: calc(6 / var(--device-width) * var(--main-width));
  font-size: calc(22 / var(--device-width) * var(--main-width));
  background: #4fade1;
  color: #fff;
  display: inline-block;
  width: calc(32 / var(--device-width) * var(--main-width));
  height: calc(32 / var(--device-width) * var(--main-width));
  line-height: calc(30 / var(--device-width) * var(--main-width));
  text-align: center;
  border-radius: 50%;
}

#howSec #loginInfoArea ol li:nth-child(2) {
  margin-top: calc(6 / var(--device-width) * var(--main-width));
}

#howSec #registrationImgArea {
  position: relative;
  width: calc(640 / var(--device-width) * var(--main-width));
  margin: calc(50 / var(--device-width) * var(--main-width)) auto 0;
}

#howSec #registrationImgArea .hukidashi1Box,
#howSec #registrationImgArea .hukidashi2Box {
  position: absolute;
}

#howSec #registrationImgArea .hukidashi1Box {
  width: calc(102 / var(--device-width) * var(--main-width));
  top: calc(390 / var(--device-width) * var(--main-width));
  left: calc(-32 / var(--device-width) * var(--main-width));
}

#howSec #registrationImgArea .hukidashi2Box {
  width: calc(190 / var(--device-width) * var(--main-width));
  top: calc(-30 / var(--device-width) * var(--main-width));
  right: calc(-40 / var(--device-width) * var(--main-width));
}

#howSec .linkList {
  margin-top: calc(50 / var(--device-width) * var(--main-width));
}

#howSec .linkList li {
  text-align: center;
  margin-top: calc(35 / var(--device-width) * var(--main-width));
}

#howSec .linkList li a {
  position: relative;
  color: #fff;
  font-size: calc(32 / var(--device-width) * var(--main-width));
  background: #4fade1;
  display: inline-block;
  width: calc(630 / var(--device-width) * var(--main-width));
  padding: calc(30 / var(--device-width) * var(--main-width));
  border-radius: calc(100 / var(--device-width) * var(--main-width));
  box-shadow: 3px 3px 0px 2px rgba(14, 120, 182, 1);
}

#howSec .linkList li a::before {
  content: "";
  position: absolute;
  right: calc(30 / var(--device-width) * var(--main-width));
  top: 50%;
  transform: translateY(-50%);
  width: calc(36 / var(--device-width) * var(--main-width));
  height: calc(36 / var(--device-width) * var(--main-width));
  background-color: #fff;
  border-radius: 50%;
}

#howSec .linkList li a::after {
  content: "";
  position: absolute;
  right: calc(calc(32 / var(--device-width) * var(--main-width)) + (calc(36 / var(--device-width) * var(--main-width)) / 2)); 
  top: 50%;
  width: calc(18 / var(--device-width) * var(--main-width));
  height: calc(18 / var(--device-width) * var(--main-width));
  border-top: 1px solid #4fade1;
  border-right: 1px solid #4fade1;
  transform: translate(35%, -50%) rotate(45deg); 
}

@media screen and (min-width:750px) {
  
  #howSec {
    width: calc(1160 / var(--device-width) * var(--main-width));
    margin: calc(180 / var(--device-width) * var(--main-width)) auto 0;
  }

  #howSec h3 {
    font-size: calc(43 / var(--device-width) * var(--main-width));
  }

  #howSec h3 .efriends {
    width: calc(172 / var(--device-width) * var(--main-width));
    margin-right: calc(15 / var(--device-width) * var(--main-width));
  }

  /*枠線*/
  #howSec #howDotLine { 
    padding-bottom: calc(80 / var(--device-width) * var(--main-width));
  }

  #howSec #howDotLine::before {content: "";
    background:
      repeating-linear-gradient(to right, #4fade1 0 3px, transparent 3px 12px) top/100% 3px no-repeat,
      repeating-linear-gradient(to right, #4fade1 0 3px, transparent 3px 12px) bottom/100% 3px no-repeat,
      repeating-linear-gradient(to bottom, #4fade1 0 3px, transparent 3px 12px) left/3px 100% no-repeat,
      repeating-linear-gradient(to bottom, #4fade1 0 3px, transparent 3px 12px) right/3px 100% no-repeat;
  }

  #howSec #howDotLine .corner { 
    width: calc(30 / var(--device-width) * var(--main-width));
  }

  #howSec #howDotLine .corner1  { 
    top: calc(-5 / var(--device-width) * var(--main-width));
    left: calc(-5 / var(--device-width) * var(--main-width)); 
  }

  #howSec #howDotLine .corner2  { 
    top: calc(-5 / var(--device-width) * var(--main-width));
    right: calc(-5 / var(--device-width) * var(--main-width)); 
  }
  
  #howSec #howDotLine .corner3  { 
    bottom: calc(-5 / var(--device-width) * var(--main-width));
    left: calc(-5 / var(--device-width) * var(--main-width)); 
  }

  #howSec #howDotLine .corner4  { 
    bottom: calc(-5 / var(--device-width) * var(--main-width));
    right: calc(-5 / var(--device-width) * var(--main-width)); 
  }

  #howSec #howTxtArea {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    font-size: calc(26 / var(--device-width) * var(--main-width));
  }

  #howSec #howTxtArea .charaInner {
    left: calc(105 / var(--device-width) * var(--main-width));
    top: calc(20 / var(--device-width) * var(--main-width));
  }

  #howSec #loginInfoArea {
    font-size: calc(22 / var(--device-width) * var(--main-width));
    padding: calc(20 / var(--device-width) * var(--main-width));
    border-radius: calc(20 / var(--device-width) * var(--main-width));
    width: calc(780 / var(--device-width) * var(--main-width));
    margin: calc(36 / var(--device-width) * var(--main-width)) auto 0;
  }

  #howSec #loginInfoArea h4 {
    padding-left: calc(20 / var(--device-width) * var(--main-width));
    padding-right: calc(40 / var(--device-width) * var(--main-width));
  }

  #howSec #loginInfoArea ol {
    display: flex;
    align-items: center;
    border-left: 2px solid #4fade1;
    padding-left: 0;
  }
  
  #howSec #loginInfoArea ol li {
    align-items: center;
    line-height: 1.4;
    font-size: calc(20 / var(--device-width) * var(--main-width));
    padding-left: calc(40 / var(--device-width) * var(--main-width));
  }

  #howSec #loginInfoArea ol li .noBox {
    margin-top: calc(2 / var(--device-width) * var(--main-width));
    margin-right: calc(10 / var(--device-width) * var(--main-width));
    font-size: calc(28 / var(--device-width) * var(--main-width));
    width: calc(38 / var(--device-width) * var(--main-width));
    height: calc(38 / var(--device-width) * var(--main-width));
    line-height: calc(34 / var(--device-width) * var(--main-width));
  }

  #howSec #loginInfoArea ol li:nth-child(2) {
    margin-top: 0;
  }

  #howSec #registrationImgArea {
    width: calc(1000 / var(--device-width) * var(--main-width));
    margin: calc(30 / var(--device-width) * var(--main-width)) auto 0;
  }
  
  #howSec #registrationImgArea img {
    display: block;
    width: calc(982 / var(--device-width) * var(--main-width));
    margin: 0 auto;
  }
  
  #howSec .linkList {
    display: flex;
    justify-content: space-between;
  }

  #howSec .linkList li {
    line-height: 1.4;
    margin-top: calc(5 / var(--device-width) * var(--main-width));
  }

  #howSec .linkList li a {
    text-align: left;
    font-size: calc(19 / var(--device-width) * var(--main-width));
    width: calc(315 / var(--device-width) * var(--main-width));
    padding: calc(10 / var(--device-width) * var(--main-width)) calc(60 / var(--device-width) * var(--main-width));
    box-shadow: 6px 6px 0px 1px rgba(14, 120, 182, 1);
  }
  
  #howSec .linkList li:nth-child(2) a {
    padding-left: calc(30 / var(--device-width) * var(--main-width));

  }

  #howSec .linkList li a::after {
    border-top: 2px solid #4fade1;
    border-right: 2px solid #4fade1;
  }
  
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
よくあるご質問
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#qaSec {
  width: calc(650 / var(--device-width) * var(--main-width));
  margin: calc(180 / var(--device-width) * var(--main-width)) auto 0;
}

#qaSec .headArea {
  position: relative;
}

#qaSec .headArea h3 {
  background: #4fade1;
  color: #fff;
  text-align: center;
  font-weight: bold;
  border-radius: calc(16 / var(--device-width) * var(--main-width));
  font-size: calc(42 / var(--device-width) * var(--main-width));
  padding: calc(10 / var(--device-width) * var(--main-width));
}

#qaSec .headArea .charaInner {
  position: absolute;
  width: calc(150 / var(--device-width) * var(--main-width));
  right: calc(-40 / var(--device-width) * var(--main-width));
  top: calc(-10 / var(--device-width) * var(--main-width));
}

#qaSec .qaList {
  margin-top: calc(60 / var(--device-width) * var(--main-width));
  margin-left: calc(90 / var(--device-width) * var(--main-width));
  font-family: "Noto Sans JP", sans-serif;
} 

#qaSec .qaList .qaQ {
  position: relative;
  font-size: calc(32 / var(--device-width) * var(--main-width));
}

#qaSec .qaList .qaA {
  position: relative;
  font-size: calc(26 / var(--device-width) * var(--main-width));
  margin-top: calc(18 / var(--device-width) * var(--main-width));
}

#qaSec .qaList .qaQ::before {
  position: absolute;
  content: "";
  display: block;
  width: calc(70 / var(--device-width) * var(--main-width));
  height: calc(70 / var(--device-width) * var(--main-width));
  background: url("/app/_assets/images/icon_qa_q.png") no-repeat center center / cover;
  left: calc(-80 / var(--device-width) * var(--main-width));
}

#qaSec .qaList .qaA::before {
  position: absolute;
  content: "";
  display: block;
  width: calc(70 / var(--device-width) * var(--main-width));
  height: calc(70 / var(--device-width) * var(--main-width));
  background: url("/app/_assets/images/icon_qa_a.png") no-repeat center center / cover;
  left: calc(-80 / var(--device-width) * var(--main-width));
}

#qaSec .btnArea {
  margin-top: calc(70 / var(--device-width) * var(--main-width));
}

#qaSec .btnArea a {
  text-align: center;
  position: relative;
  color: #0078b6;
  font-size: calc(32 / var(--device-width) * var(--main-width));
  font-weight: 600;
  background: #fff;
  display: inline-block;
  width: calc(630 / var(--device-width) * var(--main-width));
  padding: calc(30 / var(--device-width) * var(--main-width));
  border-radius: calc(100 / var(--device-width) * var(--main-width));
  box-shadow: 2px 2px 0px 4px rgba(14, 120, 182, 1);
  margin-left: calc(10 / var(--device-width) * var(--main-width));
}

#qaSec .btnArea a::after {
  content: "";
  position: absolute;
  right: calc(calc(32 / var(--device-width) * var(--main-width)) + (calc(36 / var(--device-width) * var(--main-width)) / 2)); 
  top: 50%;
  width: calc(22 / var(--device-width) * var(--main-width));
  height: calc(22 / var(--device-width) * var(--main-width));
  border-top: 1px solid #0078b6;
  border-right: 1px solid #0078b6;
  transform: translate(35%, -50%) rotate(45deg); 
}

@media screen and (min-width:750px) {
  
  #qaSec {
    width: calc(1000 / var(--device-width) * var(--main-width));
    margin: calc(140 / var(--device-width) * var(--main-width)) auto 0;
  }

  #qaSec .headArea h3 {
    width: calc(440 / var(--device-width) * var(--main-width));
    margin-left: auto;
    margin-right: auto;
  }

  #qaSec .headArea .charaInner {
    width: calc(170 / var(--device-width) * var(--main-width));
    right: calc(110 / var(--device-width) * var(--main-width));
    top: calc(-44 / var(--device-width) * var(--main-width));
  }

  #qaSec .qaList .qaQ {
    font-size: calc(28 / var(--device-width) * var(--main-width));
  }

  #qaSec .qaList .qaA {
    position: relative;
    font-size: calc(24 / var(--device-width) * var(--main-width));
    margin-top: calc(32 / var(--device-width) * var(--main-width));
  }

  #qaSec .qaList .qaQ::before {
    width: calc(60 / var(--device-width) * var(--main-width));
    height: calc(60 / var(--device-width) * var(--main-width));
    left: calc(-70 / var(--device-width) * var(--main-width));
    top: calc(-6 / var(--device-width) * var(--main-width));
  }

  #qaSec .qaList .qaA::before {
    width: calc(60 / var(--device-width) * var(--main-width));
    height: calc(60 / var(--device-width) * var(--main-width));
    left: calc(-70 / var(--device-width) * var(--main-width));
    top: calc(-6 / var(--device-width) * var(--main-width));
  }

  #qaSec .btnArea {
    text-align: center;
    margin-top: calc(60 / var(--device-width) * var(--main-width));
  }

  #qaSec .btnArea a {
    font-size: calc(25 / var(--device-width) * var(--main-width));
    width: calc(490 / var(--device-width) * var(--main-width));
    padding: calc(15 / var(--device-width) * var(--main-width));
    box-shadow: 3px 3px 0px 6px rgba(14, 120, 182, 1);
  }
  
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
アプリダウンロード
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
#dlSec {
  position: relative;
  margin-top: calc(130 / var(--device-width) * var(--main-width));
  font-family: "Noto Sans JP", sans-serif;
}

#dlSec #dlArea {
  background: #d8f2f7;
  border-radius: calc(30 / var(--device-width) * var(--main-width));
  width: 100vw;
  padding-top: calc(70 / var(--device-width) * var(--main-width));
  padding-bottom: calc(100 / var(--device-width) * var(--main-width));
}

#dlSec .infoBox {
  width: calc(630 / var(--device-width) * var(--main-width));
  margin: 0 auto;
}

#dlSec .infoBox .headInner {
  padding: 0 calc(20 / var(--device-width) * var(--main-width));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#dlSec .infoBox .headInner .iconImg {
  margin-right: calc(20 / var(--device-width) * var(--main-width));
  width: calc(139 / var(--device-width) * var(--main-width));
}

#dlSec .infoBox .headInner p {
  font-size: calc(42 / var(--device-width) * var(--main-width));
  line-height: 1.3;
  font-weight: 600;
}

#dlSec .infoBox .infoInner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: calc(612 / var(--device-width) * var(--main-width));
  margin: 3% auto 2.6%;
}

#dlSec .infoBox .infoInner div p {
  font-size: calc(30 / var(--device-width) * var(--main-width));
  font-weight: 500;
  text-align: center;
  margin-bottom: 0.5em;
}

#dlSec .infoBox .infoInner .apple img {
  display: block;
  width: calc(254 / var(--device-width) * var(--main-width));
  margin: auto;
}

#dlSec .infoBox .infoInner .google img {
  display: block;
  width: calc(315 / var(--device-width) * var(--main-width));
  margin: auto;
}

#dlSec .infoBox .attention,
#dlSec .attentionList {
  color: #3e3a39;
  font-size: calc(16 / var(--device-width) * var(--main-width));
  font-weight: 400;
  width: 100%;
  margin: auto;
  margin-top: calc(20 / var(--device-width) * var(--main-width));
}

#dlSec .attentionList {
  width: calc(630 / var(--device-width) * var(--main-width));
  margin-left: auto;
  margin-right: auto;
}

#dlSec .cloud1,
#dlSec .cloud2 { position: absolute; }

#dlSec .cloud1 {
  width: calc(280 / var(--device-width) * var(--main-width));
  bottom: calc(-100 / var(--device-width) * var(--main-width));
  left: 0;
}

#dlSec .cloud2 {
  width: calc(320 / var(--device-width) * var(--main-width));
  bottom: calc(-80 / var(--device-width) * var(--main-width));
  right: 0;
}

@media screen and (min-width:750px) {
  
  #dlSec #dlArea {
    width: calc(1040 / var(--device-width) * var(--main-width));
    padding-bottom: calc(90 / var(--device-width) * var(--main-width));
    padding-left: calc(100 / var(--device-width) * var(--main-width));
    margin-left: auto;
    margin-right: auto;
  }

  #dlSec #dlArea .infoBox {
    width: calc(650 / var(--device-width) * var(--main-width));
    padding-bottom: calc(20 / var(--device-width) * var(--main-width));
    margin-left: calc(290 / var(--device-width) * var(--main-width));
  }

  #dlSec .infoBox .headInner .iconImg {
    position: absolute;
    margin-right: 0;
    width: calc(236 / var(--device-width) * var(--main-width));
    left: calc(220 / var(--device-width) * var(--main-width));
    top: calc(75 / var(--device-width) * var(--main-width));
  }

  #dlSec .infoBox .headInner p {
    font-size: calc(27 / var(--device-width) * var(--main-width));
  }

  #dlSec .infoBox .infoInner {
    width: calc(525 / var(--device-width) * var(--main-width));
    margin: 2.5% 0 0;
  }

  #dlSec .infoBox .infoInner div p {
    font-size: calc(24 / var(--device-width) * var(--main-width));
    margin-bottom: 0.2em;
  }

  #dlSec .infoBox .infoInner .apple img {
    width: calc(220 / var(--device-width) * var(--main-width));
  }

  #dlSec .infoBox .infoInner .google img {
    width: calc(270 / var(--device-width) * var(--main-width));
  }
  
  #dlSec .infoBox .attention {
    margin-top: calc(16 / var(--device-width) * var(--main-width));
    margin-left: calc(6 / var(--device-width) * var(--main-width));
  }
  
  #dlSec .attentionList {
    margin-top: calc(26 / var(--device-width) * var(--main-width));
    margin-left: calc(6 / var(--device-width) * var(--main-width));
  }

  #dlSec .cloud1 {
    width: calc(400 / var(--device-width) * var(--main-width));
    bottom: calc(-160 / var(--device-width) * var(--main-width));
  }

  #dlSec .cloud2 {
    width: calc(400 / var(--device-width) * var(--main-width));
    bottom: calc(-100 / var(--device-width) * var(--main-width));
  }

}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
アニメーション
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

@keyframes bound {
  0% {
    transform: scale(1.0, 1.0) translate(0, 0);
    opacity: 0;
  }

  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
    opacity: 1;
  }

  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }

  50% {
    transform: scale(0.98, 1.05) translate(0, -8px);
  }

  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }

  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
    opacity: 1;
  }

}

@keyframes zoomIn {
  0% {
    transform: scale(0.9, 0.9);
    opacity: 0;
  }
  
  16% {
    transform: scale(1.15, 1.15);
    opacity: 1;
  }
  
  33% {
    transform: scale(1.0, 1.0);
  }
  
  50% {
    transform: scale(1.06, 1.06);
  }
  
  65% {
    transform: scale(1.0, 1.0);
  }
  
  82% {
    transform: scale(1.03, 1.03);
  }
  
  100% {
    transform: scale(1.0, 1.0);
    opacity: 1;
  }
}


@keyframes yodomaruPc {
  0% {
    transform: rotate(16deg);
    opacity: 0;
  }
  
  100% {
    transform: rotate(8deg);
    opacity: 1;
  }
}

@keyframes yodomaruSp {
  0% {
    transform: rotate(8deg);
    opacity: 0;
  }
  
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    transform: translate(-20px, 0);
    opacity: 0;
  }
  
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes slideIn2 {
  0% {
    transform: scale(0.1, 0.1) translate(-40px, 30px);
    opacity: 0;
  }
  
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    transform: scale(0.8, 0.8);
    opacity: 0;
  }
  
  100% {
    transform: scale(1.0, 1.0);
    opacity: 1;
  }
}

@keyframes scrollin {
  0% {
    transform: translate(0, 60px);
    opacity: 0;
  }
  
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}