*,
*::before,
*::after {
  box-sizing: border-box;
  min-height: 0vw;
}

header *,
header *::before,
header *::after {
  box-sizing: content-box;
}

body {
  background-color: #5acae8;
  font-family: 'Noto Sans JP', sans-serif;
}

a {
  text-decoration: none;
}

p {
  margin: 0 !important;
  padding: 0;
}

ul {
  padding: 0;
}

h2 {
  font-family: 'Noto Sans JP', sans-serif;
  padding: 0;
}

.WBR { word-break: keep-all; overflow-wrap: anywhere; } 

.contactWrap {
  background-color: transparent;
}

@media screen and (max-width: 767px) {
  .contactWrap {
    text-align: center;
  }
}

.contactWrap--pb0 {
  padding-bottom: 0;
}

.contactWrap--pt20 {
  padding-top: 20px;
}

.contactWrap h2 {
  padding: 10px 0 20px;
  font-family: 'Abel', sans-serif;
}

.borderdBtn {
  background-color: #fff;
}

footer {
  margin: 0;
  padding: 10px 0;
  background-color: #000;
  color: #fff;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}

.container {
  max-width: 1140px;
  width: 100%;
  margin: auto;
  padding: 0 70px;
}
@media screen and (max-width: 767px) {
  .container {

  padding: 0 20px;
  }
}

.top {
  width: 100%;
  /* min-width: 1000px; */
}
@media screen and (max-width: 767px) {
  .top {
    min-width: auto;
  }
}

.contact-sec {
  background-color: #fff;
  padding: 77px 0 110px;
} 
@media screen and (max-width: 767px) {
  .contact-sec {
    padding: 56px 0 60px;
  } 
}

.contact {
  display: block;
  position: relative;
  padding: 4px;
  border-radius: 15px;
  width: 100%;
  height: 112px;
  box-shadow: 0 13px 9px rgba(0, 0, 0, .2);
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .contact {
    border-radius: 6px;
    height: 84px;
    box-shadow: 0 9px 7px rgba(0, 0, 0, .2);
  }
}

.contact:hover {
  text-decoration: none;
  box-shadow: 0 5px 9px rgba(0, 0, 0, .2);
  transform: translateY(8px);
}
@media screen and (max-width: 767px) {
  .contact:hover {
    text-decoration: none;
    box-shadow: 0 5px 7px rgba(0, 0, 0, .2);
    transform: translateY(4px);
  }
}

.contact::before,
.contact::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
@media screen and (max-width: 767px) {
  .contact::before,
  .contact::after {
    border-radius: 6px;
  }
}

.contact::before {
  top: 0;
  background: linear-gradient(to top, #ff2a24, #ff7470, #ffb3b0);
  z-index: -1;
}

.contact::after {
  bottom: -8px;
  background-color: #a11a16;
  z-index: -2;
}
@media screen and (max-width: 767px) {
  .contact::after {
    bottom: -4px;
  }
}

.contact:hover::after {
  bottom: 0;
}

.contact__text {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 103px;
  border-radius: 15px;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #ff2a24, #ff2a24 40%, #ff726e 93%, #ff726e);
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .contact__text {
    padding: 0 24px 0 37px;
    border-radius: 6px;
    font-size: min(calc(19vw / 3.75),19px);
    letter-spacing: -.07em;
  }
}

.contact__text::before,
.contact__text::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.contact__text::before {
  left: 62px;
  width: 31px;
  height: 40px;
  background: url(../images/lottery/contact.svg) no-repeat center / contain;
}
@media screen and (max-width: 767px) {
  .contact__text::before {
    left: 12px;
    width: 20px;
    height: 26px;
  }
}

.contact__text::after {
  right: 31px;
  width: 21px;
  height: 21px;
  background: url(../images/lottery/contact-arrow.svg) no-repeat center / contain;
}
@media screen and (max-width: 767px) {
  .contact__text::after {
    right: 4px;
    width: 15px;
    height: 15px;
  }
}

.type {
  position: relative;
  background-color: #ffd900;
  padding: 100px 0;
  /* z-index: -2; */
}
@media screen and (max-width: 767px) {
  .type {
    padding: 40px 0;
  }
}

.copy__wrapper {
  text-align: center;
  margin: 0 0 50px;
}
@media screen and (max-width: 767px) {
  .copy__wrapper {
    margin: 0 0 30px;
  }
}

.copy {
  display: inline;
  font-size: 30px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.05em;
  line-height: 1.8;
  margin: 0;
  background: linear-gradient(transparent 60%,#fff 60%);
}
@media screen and (max-width: 767px) {
  .copy {
    font-size: 18px;
  }
}
@media screen and (max-width: 360px) {
  .copy {
    font-size: 15px;
  }
}

.type__wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  display: grid;
  grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
  width: 100%;
  max-width: 1318px;
  margin: 20px auto 0;
  padding-left: 70px;
  padding-right: 70px;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  .type__wrapper {
    margin: 10px auto 0;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.type__btn {
  position: relative;
  background-color: #fff;
  /* max-width: 183px; */
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
@media screen and (max-width: 767px) {
  .type__btn {
    /* width: 29%; */
    border-radius: 10px;
    margin: 0 5px;
  }
}

.type__btn:hover {
  background-color: #daf1f7;
  text-decoration: none;
}

/* @media screen and (max-width: 767px) {
  .type__btn--mb {
    margin-bottom: 15px;
  }
} */

.btn__text {
  font-size: clamp(13px,calc(13vw / 14),16px);
  color: #000;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
  padding: 30px 0;
  min-height: 0vw;
}
@media screen and (max-width: 767px) {
  .btn__text {
    font-size: 13px;
    letter-spacing: 0;
  }
}

.caption {
  position: relative;
}

.caption--production {
  margin-top: 100px;
  text-align: center;
  overflow: clip;
}
@media screen and (max-width: 767px) {
  .caption--production {
    margin-top: 40px;
  }
}

#type.caption,
#question.caption {
  padding-top: 100px;
}
@media screen and (max-width: 767px) {
  #type.caption,
  #question.caption {
    padding-top: 50px;
  }
}

.text {
  font-size: 34px;
  color: #000;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.6;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .text {
    font-size: 20px;
  }
}

.caption--production .text {
  display: inline-block;
  position: relative;
}

.caption--production .text::before, .caption--production .text::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  width: 48px;
  height: 61px;
  background-image: url(../images/lottery/hukidashi.png);
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .caption--production .text::before, .caption--production .text::after {
    width: 27px;
    height: 34px;
  }
}

.caption--production .text::before {
  left: -90px;
}
@media screen and (max-width: 767px) {
  .caption--production .text::before {
    left: -40px;
  }
}

.caption--production .text::after {
  right: -90px;
  transform: scale(-1, 1);
}
@media screen and (max-width: 767px) {
  .caption--production .text::after {
    right: -40px;
  }
}

@media screen and (max-width: 360px) {
  .text__design {
    font-size: 17px;
  }
}

.balloon {
  display: block;
  width: 700px;
  margin: -10px auto 0;
}
@media screen and (max-width: 767px) {
  .balloon {
    width: 100%;
    margin-top: -26px;
  }
}

.type__design {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  margin-top: 50px;
  gap: 0 20px;
}
@media screen and (max-width: 767px) {
  .type__design {
    margin-top: 20px;
  }
}

.type__design--new {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(clamp(150px,calc(250vw / 10),250px),1fr));
  grid-auto-rows: auto;
  gap: 30px;
}

.type__design-item {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 20px;
  background-color: #fff;
  display: grid;
  align-items: flex-end;
  justify-content: center;
  grid-auto-flow: column;
  grid-template-rows: subgrid;
  grid-row: span 2;
  padding: 20px 0;
  text-align: center;
  gap: 20px;
}
@media screen and (max-width: 767px) {
.type__design-item {
  gap: 10px;
}
}

.type__image--new {
  display: grid;
  place-items: center;
}

.type__design-item img {
  width: 50%;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
.type__design-item--max img {
  width: 75%;
}

.type__design-item p {
  font-weight: 700;
  font-size: 20px;
}
@media screen and (max-width: 767px) {
.type__design-item p {
  font-size: 12px;
}
}

.type__image {
  width: 305px;
}
@media screen and (max-width: 767px) {
  .type__image {
    width: 49%;
  }
}

.type__image--pb {
  padding-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .type__image--pb {
    padding-bottom: 10px;
  }
}

.supplement {
  width: 100%;
  border: 4px solid #fff;
  border-radius: 20px;
  padding: 30px 140px 40px 120px;
  margin-top: 85px;
}
@media screen and (max-width: 767px) {
  .supplement {
    border: 2px solid #fff;
    border-radius: 20px;
    padding: 30px 0;
    margin-top: 43px;
  }
}

.supplement__wrapper {
  display: flex;
  width: 100%;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .supplement__wrapper {
    display: block;
    padding: 0 18px;
  }
}

.type__logo {
  width: 224px;
}
@media screen and (max-width: 767px) {
  .type__logo {
    width: 62%;
    vertical-align: top;
    margin-left: 29px;
  }
}

.supplement__redbg {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e62e28;
  width: 100%;
  height: 40px;
  margin-top: 12px;
}
@media screen and (max-width: 767px) {
  .supplement__redbg {
    width: 100%;
    height: 10%;
    margin-top: 0;
  }
}

.supplement__text {
  font-size: 22px;
  color: #000;
  font-weight: bold;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  .supplement__text {
    font-size: 14px;
  }
}

.supplement__text span {
  color: #e62e28;
}

.supplement__text--top {
  font-size: 24px;
  color: #fff;
  white-space: nowrap;
  padding: 0 14px;
}
@media screen and (max-width: 767px) {
  .supplement__text--top {
    font-size: 15px;
    letter-spacing: 0;
    white-space: normal;
    padding: 0 5px;
  }
}

.supplement__text--center {
  padding: 22px 0;
}
@media screen and (max-width: 767px) {
  .supplement__text--center {
    padding: 12px 0;
  }
}

.supplement__text--attention {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .supplement__text--attention {
    font-size: 13px;
    line-height: 1.6;
  }
}

.coupon {
  width: 100%;
  padding: 115px 0 95px;
}
@media screen and (max-width: 767px) {
  .coupon {
    padding: 50px 0 45px;
  }
}

.step {
  position: relative;
  background-color: #fff;
  border-radius: 20px;
  width: 100%;
  margin-top: 65px;
  padding: 20px;
}
@media screen and (max-width: 767px) {
  .step {
    margin-top: 20px;
  }
}

.step-item__icon {
  min-height: 0vw;
  width: clamp(55px,calc(70vw / 14),70px);
}
@media screen and (max-width: 1000px) {
  .step-item__icon {
    width: 55px;
  }
}

.step-flow {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  margin-bottom: 50px;
  overflow: clip;
}
@media screen and (max-width: 1000px) {
  .step-flow {
    display: block;
    max-width: 335px;
    margin: 0 auto 35px;
  }
}

.step-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0vw;
}

.step-item:not(:last-child) {
  margin-right: clamp(20px,calc(54vw / 14),54px);
}
@media screen and (max-width: 1000px) {
  .step-item:not(:last-child) {
    margin: 0 0 54px;
  }
}

.step-item__wrapper {
  display: flex;
  align-items: flex-start;
}

.step-item02 {
  padding-right: 10px;
}
@media screen and (max-width: 1000px) {
  .step-item02 {
    padding-right: 0;
  }
}

.step-item__detail {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  margin: 52.5px 0 0 10px;
}
@media screen and (max-width: 1000px) {
  .step-item__detail {
    flex-direction: column;
    align-items: flex-start;
    margin: 15px 0 0 15px;
  }
}

.step-item__detail--03 {
  margin-left: -15px;
  padding-top: 20px;
}
@media screen and (max-width: 1000px) {
  .step-item__detail--03 {
    margin-left: 15px;
    padding-top: 0;
  }
}

.step-item__txt-wrapper {
  flex-direction: column;
}

.step-item__txt {
  font-size: clamp(13px,calc(16vw / 14),16px);
  text-align: center;
  min-height: 0vw;
}
@media screen and (max-width: 1000px) {
  .step-item__txt {
    font-size: 14px;
    text-align: left;
  }
}

.step-item__txt--red {
  color: #e62e28;
  font-size: clamp(15px,calc(18vw / 14),18px);
  font-weight: bold;
  min-height: 0vw;
}
@media screen and (max-width: 1000px) {
  .step-item__txt--red {
    font-size: 16px;
  }
}

.step-item__image-wrapper {
  position: relative;
}
@media screen and (max-width: 1000px) {
  .step-item__image-wrapper {
    display: none;
  }
}

.step-item__image-wrapper--sp {
  position: relative;
  text-align: center;
  margin: auto;
}
@media screen and (min-width: 1001px) {
  .step-item__image-wrapper--sp {
    display: none;
  }
}

.step-item__image {
  margin-bottom: 27px;
}
@media screen and (max-width: 1000px) {
  .step-item__image {
    margin: 25px 0 0;
  }
}

@media screen and (max-width: 1000px) {
  .step-item__image--01 {
    width: 72.5px;
    margin-top: 5px;
  }
}

@media screen and (max-width: 1000px) {
  .step-item__image--02 {
    width: 166px;
  }
}

@media screen and (max-width: 1000px) {
  .step-item__image--03 {
    width: 140px;
    padding-top: 35px;
  }
}

.step-item__sub-image {
  position: absolute;
  top: -55px;
  right: -100px;
  width: 132px;
  min-height: 0vw;
}
.step-item:nth-of-type(3) .step-item__sub-image {
  right: auto;
  left: 100%;
  width: clamp(105px,calc(132vw / 14),132px);
  transform: translateX(calc(-100% + clamp(10px, calc(30vw / 14), 30px)));
}
@media screen and (max-width: 1000px) {
  .step-item__sub-image {
    position: absolute;
    top: 15px;
    right: -80px;
    width: 105px;
  }
  .step-item:nth-of-type(3) .step-item__sub-image {
    transform: translateX(calc(-100% + clamp(10px, calc(30vw / 3.75), 30px)));
  }
}
@media all and (max-width: 1000px) and (-ms-high-contrast: none){
  .step-item__sub-image {
    right: 15px;
  }
}

.step-item__sub-image--02 {
  top: -12px;
  right: 46px;
  width: 53px;
}
@media screen and (max-width: 1000px) {
  .step-item__sub-image--02 {
    top: 18px;
    right: 35px;
    width: 45px;
  }
}

.step-item__arrow {
  position: absolute;
  top: 142px;
  right: -62px;
  width: 26px;
}
@media screen and (max-width: 1000px) {
  .step-item__arrow {
    top: auto;
    left: 50%;
    right: auto;
    bottom: -60px;
    -webkit-transform: translateX(-50%) rotate(90deg);
    -ms-transform: translateX(-50%) rotate(90deg);
    transform: translateX(-50%) rotate(90deg);
  }
}

.step-link__container {
  max-width: 800px;
  margin: auto;
}
@media screen and (max-width: 1000px) {
  .step-link__container {
    max-width: 335px;
  }
}

.step-link {
  position: relative;
  background-color: #ffd900;
  border-radius: 20px;
  width: 100%;
  margin-bottom: 20px;
  padding: 30px 65px;
}
@media screen and (max-width: 1000px) {
  .step-link {
    text-align: center;
    margin-bottom: 10px;
    padding: 20px;
  }
}

.step-link__icon {
  position: absolute;
  top: -22.5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 45px;
}
@media screen and (max-width: 1000px) {
  .step-link__icon {
    top: -17.5px;
    width: 35px;
  }
}

.step-link__image {
  position: absolute;
  left: 75.5px;
  bottom: 0;
}
@media screen and (max-width: 1000px) {
  .step-link__image {
    position: static;
  }
}

.step-link__detail {
  max-width: 450px;
  margin-left: auto;
}
@media screen and (max-width: 1000px) {
  .step-link__detail {
    margin: auto;
  }
}

.step-link__txt {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.75;
  padding: 30px 0 25px;
}
@media screen and (max-width: 1000px) {
  .step-link__txt {
    font-size: 16px;
    padding: 10px 0;
  }
}

.step-link-report {
  position: relative;
  background-color: #5acae8;
  border-radius: 10px;
  width: 100%;
  padding: 25px;
}
@media screen and (max-width: 1000px) {
  .step-link-report {
    padding: 15px;
  }
}

.step-link-report__txt {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding-left: 3.5em;
}
@media screen and (max-width: 1000px) {
  .step-link-report__txt {
    font-size: 14px;
    text-align: left;
    padding-left: 35%;
  }
}

.step-link-report__icon {
  position: absolute;
  top: 50%;
  left: 78px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 38px;
}
@media screen and (max-width: 1000px) {
  .step-link-report__icon {
    left: 32px;
    width: 38px;
  }
}

.result {
  position: relative;
  background-color: #ffd900;
  padding: 100px 0;
  z-index: -2;
}
@media screen and (max-width: 767px) {
  .result {
    padding: 50px 0;
  }
}

.result__text {
  font-size: 28px;
  color: #000;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
  margin: 90px 0 50px;
}
@media screen and (max-width: 767px) {
  .result__text {
    font-size: 18px;
    margin: 35px 0 20px;
  }
}

.result__text--top {
  margin-top: 75px;
}
@media screen and (max-width: 767px) {
  .result__text--top {
    margin-top: 15px;
  }
}

.result__text--mt0 {
  margin-top: 0;
}

.result__pattern {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px 20px;
  width: 100%;
}
/* @media screen and (max-width: 767px) {
  .result__pattern {
    justify-content: space-around;
  }
} */

.result__image {
  width: 305px;
}
@media screen and (max-width: 767px) {
  .result__image {
    width: 47%;
  }
}

@media screen and (max-width: 767px) {
  .result__image--mb {
    margin-bottom: 10px;
  }
}

.cost {
  position: relative;
  width: 100%;
  padding: 100px 0;
}
@media screen and (max-width: 767px) {
  .cost {
    padding: 50px 0;
  }
}

.cost-plun {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 70px 0 40px;
}
@media screen and (max-width: 767px) {
  .cost-plun {
    display: block;
    margin: 20px 0 30px;
  }
}

.cost-bg {
  position: relative;
  background-color: #fff;
  border-radius: 20px;
  width: 46.5%;
  padding: 43px 0;
}
@media screen and (max-width: 767px) {
  .cost-bg {
    width: 100%;
    padding: 23px 0;
  }
}

.cost-txt {
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .cost-txt {
    font-size: 25px;
  }
}

.cost-txt span {
  font-size: 25px;
}
@media screen and (max-width: 767px) {
  .cost-txt span {
    font-size: 18px;
  }
}

.cost-read {
  text-align: center;
}

.cost-read-attention {
  font-size: 16px;
  padding-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .cost-read-attention {
    font-size: 13px;
  }
}

.cost-read-coment {
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  .cost-read-coment {
    font-size: 20px;
  }
}

.cost__icon {
  position: absolute;
  top: 50%;
  left: 50.5%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 45px;
}
@media screen and (max-width: 767px) {
  .cost__icon {
    position: static;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    display: block;
    width: 35px;
    margin: 15px auto 10px;
  }
}

.question {
  position: relative;
  background-color: #ffd900;
  padding: 70px 0 100px;
  /* z-index: -2; */
}
@media screen and (max-width: 767px) {
  .question {
    padding: 40px 0;
  }
}

.question__wrapper {
  position: relative;
  margin-top: 55px;
}
@media screen and (max-width: 767px) {
  .question__wrapper {
    margin-top: 20px;
  }
}

.question__bg {
  width: 100%;
}

.question__list {
  background-color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  padding: 70px 100px;
}
@media screen and (max-width: 767px) {
  .question__list {
    /* width: 100%; */
    padding: 30px 20px;
  }
}

.question__line {
  margin-top: 20px;
}
@media screen and (max-width: 767px) {
  .question__line {
    margin-top: 30px;
  }
}

.question__line--top {
  margin-top: 0;
}

.questioner {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.respondent {
  display: flex;
  align-items: flex-start;
  padding-bottom: 40px;
  border-bottom: 2px dashed #5acae8;
}
@media screen and (max-width: 767px) {
  .respondent {
    padding-bottom: 25px;
  }
}

.respondent__1line {
  padding-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .respondent__1line {
    padding-bottom: 25px;
  }
}

.respondent__last {
  border-bottom: none;
  padding-bottom: 0;
}

.respondent__top {
  padding: 40px 0 0;
  border-bottom: none;
  border-top: 2px dashed #5acae8;
}

.respondent__1line__top {
  padding: 25px 0 0;
}

.question__icon,.answer__icon {
  width: 50px;
  margin-right: 20px;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  .question__icon,.answer__icon {
    width: 35px;
    margin-right: 10px;
  }
}

.question__text {
  font-size: 20px;
  color: #000;
  font-weight: bold;
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.025em;
  width: 100%;
  padding-top: 10px;
}
@media screen and (max-width: 767px) {
  .question__text {
    font-size: 14px;
    text-align: justify;
    line-height: 1.8;
    letter-spacing: 0;
    padding-top: 5px;
  }
}

.answer__text {
  font-size: 16px;
  color: #000;
  font-weight: normal;
  text-align: left;
  line-height: 1.75;
  letter-spacing: 0.025em;
  width: 100%;
  padding-top: 10px;
}
@media screen and (max-width: 767px) {
  .answer__text {
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0;
    width: calc(100% - 45px);
    padding-top: 5px;
  }
}

.answer__note {
  display: block;
  padding-left: 1em;
  font-size: 14px;
  text-indent: -1em;
}
@media screen and (max-width: 767px) {
  .answer__note {
    font-size: 11px;
  }
}

.answer__text .answer__note:first-of-type {
  margin-top: 1em;
}

.border__bg {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 20px;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(-45deg,#fff,#fff 2px,#5acae8 3px,#5acae8 6px);
  opacity: 0.5;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .border__bg {
    top: 5px;
    left: 5px;
  }
}

.border__bg--yel {
  background: repeating-linear-gradient(-45deg,#fff,#fff 2px,#ffd900 3px,#ffd900 6px);
}

.topics {
  background: transparent;
}

.topics ul {
  padding: 0;
}

@media screen and (max-width: 767px) {
  .topics ul {
    margin-bottom: 13.4%;
  }
}

.case-wrap {
  padding-top: 100px;
  margin-top: -100px;
}
@media screen and (max-width: 767px) {
  .case-wrap {
    padding-top: 50px;
    margin-top: -50px;
  }
}

.case {
  position: relative;
  padding: 30px;
  margin:0 auto 70px;
  max-width: 600px;
  background-color: #fff;
  border-radius: 20px;
  color: #e62e28;
}

@media screen and (max-width: 767px) {
  .case {
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
  }
}

.case-title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
}

.case-text {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .case-text {
    display: block;
    margin-top: 20px;
  }
}

.case-list {
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 16px;
  font-weight: bolder;
}

@media screen and (max-width: 767px) {
  .case-list {
    font-size: 14px;
  }
}

.case-item:not(:last-child) {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px dashed #e62e28;
}

@media screen and (max-width: 767px) {
  .case-item:not(:last-child) {
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
}

.case-content {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
	-ms-flex-align: center;
  align-items: center;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .case-content {
    display: block;
  }
}

.case-term {
  margin-right: 20px;
  min-width: 10em;
}

@media screen and (max-width: 767px) {
  .case-term {
    margin-right: 0;
    margin-bottom: 15px;
    min-width: auto;
  }
}

.case-description-wpapper {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.case-description {
  margin: 0;
}

.case-description--location {
  padding: 5px;
  margin-right: 10px;
  background-color: #e62e28;
  color: #fff;
}

.youtube-wrapper {
  position: relative;
  margin: 0 auto 120px;
  width: 60%;
}

@media screen and (max-width: 767px) {
  .youtube-wrapper {
    margin-bottom: 50px;
    width: 100%;
  }
}

.youtube {
  display: block;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.youtube img {
  width: 100%;
}

.qa-image {
  display: inline-block;
  margin-top: 30px;
  width: 100%;
}

.qa-image img {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .qa-image img {
    width: 584px;
  }
}

.dl-btn {
  position: fixed;
  right: 0;
  top: calc(86px + 1.857vw);
  min-width: 70px;
  z-index: 1000;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
@media screen and (max-width: 767px) {
  .dl-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    right: auto;
    left: 0;
    top: auto;
    bottom: 0;
    padding: 4vw 5.3vw;
    width: 100%;
    min-width: auto;
    height: 90px;
    background-color: #fff;
    border-radius: 0;
    opacity: 0;
    pointer-events: none;
  }

  .dl-btn.fadeIn {
    opacity: 1;
    pointer-events:all;
  }
}

.dl-btn__text {
  margin-bottom: 10px !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.36;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .dl-btn__text {
    margin-bottom: 0 !important;
    font-size: 13px;
  }
}

.dl-btn__text--decration {
  position: relative;
}
@media screen and (max-width: 767px) {
  .dl-btn__text--decration {
    margin-bottom: 10px !important;
  }
}

.dl-btn__text--decration::before, .dl-btn__text--decration::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  width: 17px;
  height: 22px;
  background-image: url(../images/lottery/img_hukidashi.png);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .dl-btn__text--decration::before, .dl-btn__text--decration::after {
    width: 15px;
    height: 20px;
  }
}

.dl-btn__text--decration::before {
  left: 9px;
}
@media screen and (max-width: 767px) {
  .dl-btn__text--decration::before {
    left: 12px;
  }
}

.dl-btn__text--decration::after {
  right: 9px;
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
@media screen and (max-width: 767px) {
  .dl-btn__text--decration::after {
    right: 12px;
  }
}

.dl-btn__text em {
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
}

.dl-btn__link-wrapper {
  width: 70px;
  height: 611px;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column;
  border-radius: 20px 0 0 20px;
}
@media screen and (max-width: 767px) {
  .dl-btn__link-wrapper {
    width: 100%;
    height: auto;
  }
}

.dl-btn__link {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
  justify-content: flex-start;
  padding-top: 24px;
	align-items: center;
  background-color: #e62e28;
  border-radius: 15px 0 0 15px;
  width: 100%;
  height: 300px;
  text-decoration: none !important;
  writing-mode: vertical-lr;
}
@media screen and (max-width: 767px) {
  .dl-btn__link {
    border-radius: 13.5px;
    writing-mode: horizontal-tb;
    padding-top: 0;
    justify-content: center;
  }
}
.dl-btn__link:hover {
  -webkit-transform: scale(0.98);
  transform: scale(0.98);
}

.dl-btn__link--c {
  padding-top: 48px;
  background-color: #4057B3;
}

.dl-btn__link span {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 2.5;
  text-align: center;
  letter-spacing: 0.15rem;
}
@media screen and (max-width: 767px) {
  .dl-btn__link span {
    font-size: 18px;
    display: flex;
    align-items: center;
  }
}

.dl-btn__link span::after {
  content: "";
  position: absolute;
  bottom: 26px;
  right: 50%;
  transform: translateX(50%);
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(../images/lottery/mail2024.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .dl-btn__link span::after {
    width: 21px;
    height: 21px;
    position: static;
    transform: translateX(0);
    margin-left: 10.5px;
  }
}

.dl-btn__link--c span::after {
  background-image: url(../images/lottery/download2024.svg);
}

.qr-attention {
  margin-top: 20px !important;
  font-size: 14px;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .qr-attention {
    font-size: 12px;
  }
}

.flex-parent {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 70px 0 0;
}
@media screen and (max-width: 767px) {
  .flex-parent {
    display: block;
    margin-top: 35px;
  }

  .voice .flex-parent {
    margin-top: 25px;
  }
}

.question .flex-parent {
  margin-top: 50px;
}
@media screen and (max-width: 767px) {
  .question .flex-parent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
  }
}

.flex-child {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .flex-child {
    padding: 30px;
  }
}

.flow {
  position: relative;
  padding: 100px 0;
  background-color: #ffd900;
  z-index: -2;
}
@media screen and (max-width: 767px) {
  .flow {
    padding: 40px 0 50px;
  }
}

.flow-child {
  width: 21.5%;
}
@media screen and (max-width: 767px) {
  .flow-child {
    width: 100%;
  }

  .flow-child:not(:last-child) {
    margin-bottom: 60px;
  }
}

.flow-child:not(:last-child)::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: -37px;
  border-top: 17.5px solid transparent;
  border-bottom: 17.5px solid transparent;
  border-left: 22px solid #e62e28;
  width: 0;
  height: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .flow-child:not(:last-child)::after {
    top: auto;
    left: 50%;
    right: auto;
    bottom: -40px;
    border-top: 22px solid #e62e28;
    border-bottom: none;
    border-left: 17.5px solid transparent;
    border-right: 17.5px solid transparent;
    transform: translateX(-50%) translateY(0);
  }
}

.flow-head {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 18px !important;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.flow-head::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 50px;
  height: 1px;
  background-color: #e62e28;
  transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .flow-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: auto;
    max-width: 280px;
  }
}

.flow-image {
  display: block;
  margin: 0 auto 20px;
  width: 90px;
}
@media screen and (max-width: 767px) {
  .flow-image {
    margin: 0 20px 0 0;
  }
}

.flow-text {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -0.03em;
}
@media screen and (max-width: 767px) {
  .flow-text {
    font-size: 14px;
  }
}

.flow-text--break {
  text-indent: -1em;
  padding-left: 1em;
}

.voice {
  padding: 100px 0 108px;
}
@media screen and (max-width: 767px) {
  .voice {
    padding: 35px 0;
  }
}

.voice-child {
  padding: 30px;
  width: 30.6%;
}
@media screen and (max-width: 767px) {
  .voice-child {
    margin: auto;
    width: 91.343284%;
  }

  .voice-child:not(:last-child) {
    margin-bottom: 30px;
  }
}

.voice-image {
  width: 100%;
}

.voice-name {
  border-bottom: 2px dashed #5acae8;
  margin: 20px 0 15px !important;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .voice-name {
    font-size: 16px;
  }
}

.voice-text {
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .voice-name {
    font-size: 14px;
  }
}

.voice-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 10px;
  padding: 0 50px;
  margin-top: 20px;
  width: 100%;
  height: 46px;
  background-color: #e62e28;
  text-align: center;
}
.voice-btn:hover {
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .voice-btn {
    border-radius: 20px;
  }
}

.voice-btn::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 25px;
  width: 24px;
  height: 18px;
  background-image: url(../images/lottery/magnifier.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-50%);
}

.voice-btn span {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .voice-btn span {
    font-size: 15px;
  }
}

.modal-wrap {
  position: relative;
  padding: 100px;
  margin: 209px auto 337px;
  max-width: 900px;
  background-color: #fff;
  border: 2px solid #5acae8;
  border-radius: 50px;
}
@media screen and (max-width: 767px) {
  .modal-wrap {
    padding: 40px 25px 35px;
    margin: auto;
    width: 89%;
    border-radius: 30px;
  }
}

.modal-image {
  display: block;
  margin: 40px auto 50px;
  max-width: 550px;
}
@media screen and (max-width: 767px) {
  .modal-image {
    margin: 20px auto;
    width: 100%;
  }
}

.modal-image img {
  width: 100%;
}

.modal-text {
  margin: 0;
  color: #5acae8;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .modal-text {
    font-size: 18px;
    text-align: left;
  }
}

.modal-date {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  margin: 0 0 5px;
  font-size: 16px;
  line-height: 1.75;
}
@media screen and (max-width: 767px) {
  .modal-date {
    display: block;
    margin: 0 0 10px;
    text-align: center;
  }
}

.modal-date dt {
  flex-shrink: 0;
  padding: 15px 0 15px 25px;
  margin-right: 25px;
  width: 220px;
  background-color: #5acae8;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .modal-date dt {
    padding: 15px 0;
    margin-right: 0;
    width: 100%;
  }
}

.modal-date dd {
  padding: 15px 0;
  margin: 0;
}

.modal-date--detail dd {
  text-align: justify;
}

.modal-pic {
  display: block;
  width: 64.3%;
  margin: 0 auto 10px 0;
}
@media screen and (max-width: 767px) {
  .modal-pic {
    width: 100%;
    margin: 15px 0;
  }
}

.modal-pic img {
  width: 100%;
}

.close-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 60px;
  height: 60px;
  background-color: #5acae8;
  border-radius: 50%;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .close-btn {
    width: 40px;
    height: 40px;
  }
}

.close-btn span {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 2px;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .close-btn span {
    width: 16.7px;
    height: 1px;
  }
}

.close-btn span:nth-child(1) {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.close-btn span:nth-child(2) {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.production-child {
  padding: 30px 0;
  width: 21.5%;
}
@media screen and (max-width: 767px) {
  .production-child {
    margin-bottom: 15px;
    width: 48%;
  }
}

.production-image {
  width: 100%;
}

.production-text {
  margin-top: 20px !important;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .production-text {
    font-size: 14px;
  }
}

.production-attention {
  margin: 40px 0 !important;
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .production-attention {
    margin: 20px 0 !important;
    font-size: 14px;
    text-align: justify;
  }
}

.tegarufont {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin: 76px 0 20px;
}
@media screen and (max-width: 767px) {
  .tegarufont {
    font-size: 18px;
    margin: 27px 0 20px;
  }
}

.tegarufont span {
  position: relative;
  display: inline-block;
}

.tegarufont span::before, .tegarufont span::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 36px;
  display: inline-block;
  background-image: url(../images/lottery/hukidashi.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  bottom: -9px;
}
@media screen and (max-width: 767px) {
  .tegarufont span::before, .tegarufont span::after {
    width: 18px;
    height: 23px;
    bottom: -6px;
  }
}

.tegarufont span::before {
  left: -47px;
}
@media screen and (max-width: 767px) {
  .tegarufont span::before {
    left: -33px;
  }
}

.tegarufont span::after {
  right: -47px;
  transform: scale(-1, 1);
}
@media screen and (max-width: 767px) {
  .tegarufont span::after {
    right: -33px;
  }
}

.otameshiQR {
  background-color: #fff;
  border-radius: 20px;
  padding: 30px 100px 45px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .otameshiQR {
    border-radius: 15px;
    padding: 20px;
  }
}

.otameshiQRimage {
  width: 100%;
}

.raitensokushin_ivent {
font-size: 20px;
font-weight: 700;
border-bottom: #5acae8 2px dashed;
padding-bottom: 9px;
margin-bottom: 15px !important;
}
@media screen and (max-width: 767px) {
.raitensokushin_ivent {
  font-size: 15px;
  border-bottom: #5acae8 1px dashed;
  margin-top: 10px !important;
  }
}

.raitensokushin_ivent span{
  color: #e62e28;
}

.raitensokushin_list {
  font-size: 16px;
  line-height: 1.75;
  position: relative;
}
@media screen and (max-width: 767px) {
  .raitensokushin_list {
    font-size: 14px;
  }
}

.raitensokushin_list li:not(:last-child) {
  margin-bottom: 16px;
}

.raitensokushin_ivent_tyuuki {
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  .raitensokushin_ivent_tyuuki {
    font-size: 13px;
  }
}

.raitensokushin_list_image {
  position: absolute;
  top: 10px;
  right: 30px;
  width: 223px;
}
@media screen and (max-width: 767px) {
  .raitensokushin_list_image {
    position: static;
    width: 190px;
    margin: 0 auto;
  } 
}

.raitensokushin_list_image img {
  width: 100%;
}

@media screen and (min-width: 768px) {
.raitensokushin_list_wbr {
  padding-right: 200px;
  word-break: keep-all; overflow-wrap: anywhere; 
}
}

.raitensokushin_list_text {
  letter-spacing: -0.03em;
}

.raitensokushin_list_text span {
  letter-spacing: -0.5em;
}

@media screen and (max-width: 767px) {
.goTop {
  bottom: 7em;
  }
}
@media screen and (max-width: 360px) {
.goTop {
  bottom: 8em;
  }
}

.introduction {
  margin: 25px 0 100px !important;
  font-size: 25px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: .1em;
  text-align: center;
  max-width: 1400px;
  padding: 0 70px;
}
@media screen and (max-width: 767px) {
  .introduction {
    margin: 10px 0 35px !important;
    font-size: 16px;
    padding: 0 10px;
  }
}

.introduction span {
  padding: 0 .1em .1em; 
  background-color: #ff2a24;
  color: #fff;
  font-size: 30px;
}
@media screen and (max-width: 767px) {
  .introduction span {
    font-size: 18px;
  }
}

.fv {
  padding-top: 86px;
  background-color: #5acae8;
}
@media screen and (max-width: 767px) {
.fv {
  padding-top: 44px;
}
}

.fv-contents {
  width: 100%;
  height: calc(670vw / 14);
  background-image: url(../images/lottery/top.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (max-width: 767px) {
.fv-contents {
  height: calc(875.8663vw / 3.75);
  background-image: url(../images/lottery/top_sp.jpg);
  }
}

.fv-contents img {
  width: 100%;
  object-fit: contain;
}

.fv-contents-bg {
  width: 100%;
  height: 100%;
  background-color: #5acae8;
}

.fv-contents-wrapper {
  width: calc(1035% / 14);
  height: 100%;
  padding-top: calc(75vw / 14);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr calc(328.0098% / 10.35);
  grid-auto-rows: auto;
  gap: 0 calc(40vw / 14);
}
@media screen and (max-width: 767px) {
  .fv-contents-wrapper {
    display: block;
    width: 100%;
    padding-top: calc(30vw / 3.75);
    text-align: center;
  }
}

.fv-contents-title {
  width: 100%;
  text-align: center;
}

.fv-contents-title h1 {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
.fv-contents-title h1 {
  max-width: 97%;
  padding-bottom: calc(15vw / 3.75);
}
}

.fv-contents-head {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(30vw / 14);
}
@media screen and (max-width: 767px) {
.fv-contents-head {
  padding-bottom: calc(15vw / 3.75);
}
}

.fv-contents-head p {
  position: relative;
  font-size: calc(33vw / 14);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-color: white;
  text-underline-offset: 10px;
  padding: 0 calc(20vw / 14);
}
@media screen and (max-width: 767px) {
.fv-contents-head p {
  font-size: calc(18vw / 3.75);
  padding: 0 calc(20vw / 14);
}
}

.fv-contents-head span {
  width: calc(40vw / 14);
}
.fv-contents-head span:first-of-type {
 transform: scaleX(-1);
}
@media screen and (max-width: 767px) {
.fv-contents-head span {
  width: calc(21.611vw / 3.75);
}
}

.fv-contents-description {
    font-size: calc(20vw / 14);
    font-weight: 700;
    line-height: calc(35.9246 / 20);
    padding: calc(15vw / 14) 0;
}
@media screen and (max-width: 767px) {
.fv-contents-description {
    font-size: calc(15vw / 3.75);
    padding: calc(15vw / 3.75) 0 calc(20vw / 3.75);
}
}

.fv-contents-phone ,.fv-contents-phone.anime1 {
  width: 100%;
  z-index: 1;
  position: relative;
  grid-area: 1 / 2 / 3 / 3;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .fv-contents-phone {
      width: calc(190vw / 3.75);
      height: calc(300vw / 3.75);
      margin: 0 auto;
  }
}

.fv-contents-phone * {
  pointer-events: none;
}

.bg-stripe::after {
  content: "";
  z-index: -1;
  position: absolute;
  bottom:calc(-10vw / 14);
  left: calc(10vw / 14);
  width: 100%;
  height: 100%;
  border-radius: calc(20vw / 14);
  background: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(255,255,255,.5) 3px, rgba(255,255,255,.5) 6px);
}
@media screen and (max-width: 767px) {
  .bg-stripe::after {
    border-radius: calc(20vw / 3.75);
    bottom:calc(-8vw / 3.75);
    left: calc(8vw / 3.75);
  }
}

.fv-contents-phone.bg-stripe::after {
  border-radius: calc(40vw / 14) calc(40vw / 14) 0 0;
}
@media screen and (max-width: 767px) {
  .fv-contents-phone.bg-stripe::after {
    border-radius: calc(20vw / 3.75) calc(20vw / 3.75) 0 0;
    bottom: 0;
    height: calc(100% - calc(10vw / 3.75));
  }
}

@media screen and (max-width: 767px) {
  .fv-contents-phone::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-image: linear-gradient(to bottom, transparent, #5acae8);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100%;
    z-index: 1;
  }
}

.fv-contents-phone-bg {
  z-index: 0;
  position: relative;
  width: 100%;
  height: 100%;
}

.fv-contents-phone-bg * {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  cursor: pointer;
  pointer-events: none;
  outline: 0;
}


.fv-contents-phone-bg::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(467.3598% / 3.28);
  height: auto;
  aspect-ratio: 467 / 310;
  background-image: url(../images/lottery/fv-phone-stars.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}

.fv-contents-phone-anime {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: calc( 233.7256% / 3.280098);
  height: auto;
  pointer-events: none;
}

.fv-contents-phone-anime--1 ,.fv-contents-phone-anime--2 ,.fv-contents-phone-anime--3 {
  display: none;  
}
.phone-anime-1 .fv-contents-phone-anime--1 ,.phone-anime-2 .fv-contents-phone-anime--2 ,.phone-anime-3 .fv-contents-phone-anime--3 {
  display: block;
}

.fv-contents-phone-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, calc(100% + 1px) 0, calc(100% + 1px) 100%, 0% 100%);
}

.fv-contents-phone-text {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #5acae8;
    width: 70%;
    height: calc(70vw / 14);
    display: grid;
    place-items: center;
    transition: .2s;
}
@media screen and (max-width: 767px) {
  .fv-contents-phone-text {
    top: 78%;
    height: calc(30vw / 3.75);
  }
}
.fv-contents-phone:hover .fv-contents-phone-text {
    transform: translateX(-50%) scale(1.02 ,1.01);
}

.fv-contents-phone-text p {
    color: #fff;
    font-weight: 700;
    font-size: calc(24vw / 14);
    letter-spacing: .05rem;
}    
@media screen and (max-width: 767px) {
.fv-contents-phone-text p {
    font-size: calc(13vw / 3.75);
  }
}

.fv-contents-phone-text--1 ,.fv-contents-phone-text--2 ,.fv-contents-phone-text--3 {
  opacity: 0;
  transition: .1s;
  position: absolute;
}
.phone-anime-1 .fv-contents-phone-text--1 ,.phone-anime-2 .fv-contents-phone-text--2 ,.phone-anime-3 .fv-contents-phone-text--3 {
  opacity: 1;
  height: auto;
  position: static;
}

.fv-contents-points {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, calc(143.636vw / 14));
  grid-auto-rows: calc(143.636vw / 14);
  gap: calc(20vw / 14);
  margin: 0 auto auto;
  padding-bottom: calc(70vw / 14);
}
@media screen and (max-width: 767px) {
.fv-contents-points {
  width: calc(289.75vw / 3.75);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: calc(135vw / 3.75);
  gap: calc(20vw / 3.75);
  padding-bottom: calc(20vw / 3.75);
}
}

.fv-contents-points li {
  z-index: 1;
  position: relative;
  width: 100%;
  background-color: #fff;
  display: grid;
  grid-template-columns: auto;
  place-items: center;
  border-radius: calc(20vw / 14);
}
@media screen and (max-width: 767px) {
.fv-contents-points li {
  border-radius: calc(20vw / 3.75);
}
}

/* .fv-contents-points li::after {
  content: "";
  z-index: -1;
  position: absolute;
  bottom:calc(-10vw / 14);
  left: calc(10vw / 14);
  width: 100%;
  height: 100%;
  border-radius: calc(20vw / 14);
  background: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(255,255,255,.5) 3px, rgba(255,255,255,.5) 6px);
}
@media screen and (max-width: 767px) {
.fv-contents-points li::after {
  border-radius: calc(20vw / 3.75);
    bottom:calc(-8vw / 3.75);
  left: calc(8vw / 3.75);
}
} */

.fv-contents-points li span {
  width: calc(66.5401% / 1.43636);
  margin-top: auto;
}

.fv-contents-points li p {
  font-size: calc(15vw / 14);
  font-weight: 700;
}
@media screen and (max-width: 767px) {
.fv-contents-points li p {
  font-size: calc(14vw / 3.75);
}
}