html {
  overflow-y: scroll;
  height: 100% !important;
  width: 100%
}

body {
  min-width: 800px;
  font-size: 16px;
  font-family: 'Noto Sans JP';
  font-weight: 500;
  color: #505050;
  letter-spacing: 0.05em;
  overflow: hidden;
}

a,
a::after,
img,
li::after {
  transition: 0.3s;
}

a img:focus,
a img:hover {
  opacity: 0.5;
}

::selection {
  background: rgb(156, 152, 153);
  color: #fff;
}

::-moz-selection {
  background: rgb(156, 152, 153);
  color: #fff;
}

.forSpBlock {
  display: none !important;
}

.shadow {
  box-shadow: rgba(165, 149, 160, 0.1) 0px 5px 20px;
}

.dispNone {
  display: none;
}

.txtCenter {
  text-align: center !important;
}

.maT0 {
  margin-top: 0px !important;
}

.maB20 {
  margin-bottom: 20px !important;
}

.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}

.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/* safariのヘッダー打消し用 */
.js-animation.is-show>div {
  top: 0 !important;
}

.header {
  height: 60px;
}

.headerBox {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  margin-left: 50px;
  margin-right: 50px;
}

.headerBox .logoSmbc {
  margin-top: 1px;
}

.firstView {
  position: relative;
  background-color: rgba(255, 255, 255, 0.04);
  background-blend-mode: lighten;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 94vh;
  min-height: 800px;
  max-height: 1080px;
  color: #fff;
  z-index: 0;
}

.mainVisual {
  padding: 50px;
  position: relative;
  height: 100%;
  z-index: 2;
}

.titleArea {
  text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
}

.titleArea .num {
  margin-left: 3px;
  font-family: 'Noto Sans JP';
  font-size: 27px;
  display: inline;
}

.titleArea .num .font {
  font-family: 'Manrope';
}

.titleArea .num::after {
  background-color: #fff;
  border-radius: 1px;
  content: "";
  display: block;
  height: 3px;
  width: 285px;
  margin-left: 2px;
  margin-top: 3px;
}

.titleArea .theme {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-top: 11px;
  margin-bottom: 10px;
}

.titleArea .period {
  margin-left: 2px;
  font-family: 'Manrope';
  font-size: 20px;
}

.countArea {
  position: absolute;
  text-align: center;
  display: flex;
  flex-flow: column;
  align-items: center;
  right: 0;
  left: 0;
  top: 39%;
  margin: auto;
  animation: zoomIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
}

.dispNone.countArea {
  display: none;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.countArea .goal {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  position: relative;
}

.countArea .goal::before,
.countArea .goal::after {
  position: absolute;
  display: inline-block;
  content: '';
  bottom: 8px;
  width: 22px;
  height: 3px;
  border-radius: 1px;
  background-color: #fff;
}

.countArea .goal::before {
  left: -35px;
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.countArea .goal::after {
  right: -35px;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.countArea .goal.close {
  font-size: 18px;
}

.countArea .goal.close::before,
.countArea .goal.close::after {
  bottom: 6px;
  width: 23px;
  height: 3px;
  border-radius: 1.5px;
  background-color: #fff;
}

.countArea .current {
  font-family: 'Manrope';
  font-size: 22px;
  margin-left: 10px;
  margin-bottom: 3px;
}

.countArea .current .subText {
  font-family: 'Noto Sans JP';
  font-weight: 700;
}

.countArea .current .currentNum {
  font-size: 50px;
  letter-spacing: -0.02em;
  display: inline-block;
  margin-right: 5px;
  margin-left: 5px;
}

.countArea .updateDate {
  margin-top: 5px;
  font-size: 14px;
  width: 100%;
}

.joinArea {
  text-align: center;
  position: absolute;
  bottom: 10vh;
  left: 0;
  right: 0;
}

.joinArea .daysLeft {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 17px;
  text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
}

.joinArea .daysLeft .daysNum {
  font-family: 'Manrope';
  font-size: 36px;
  font-weight: 700;
  margin: 0 3px
}

.btnWrap {
  text-align: center;
}

.btnWrap a {
  display: inline-block;
  max-width: 100%;
  font-weight: 700;
  border-radius: 100vh;
  line-height: 1.3;
}

.btnMv,
.btnDetail {
  position: relative;
  z-index: 2;
  backdrop-filter: blur(15px);
  background-color: rgba(255, 255, 255, 0.2);
}

a.btnMv {
  position: relative;
  width: 300px;
  font-size: 18px;
  padding: 11px 40px 14px;
}

.btnMv::after {
  background-image: url(/brand/touchhappy/img/common/icon_arrow_down.svg);
  content: "";
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 52%;
  transform: translateY(-52%);
  right: 20px;
}

.btnMv:focus,
.btnMv:hover {
  background-color: #fff;
  color: #ED859E;
}

.btnMv:focus::after,
.btnMv:hover::after {
  background-image: url(/brand/touchhappy/img/common/icon_arrow_down_on.svg);
}

a.btnDetail {
  position: relative;
  width: 200px;
  color: #fff;
  padding: 8px 40px 11px;
  font-size: 14px;
}

a.btnDetail::after {
  background-image: url(/brand/touchhappy/img/common/icon_arrow_right.svg);
  content: "";
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 24%;
  right: 18px;
}

a.btnDetail:focus,
a.btnDetail:hover {
  background-color: #fff;
  color: #ED859E;
}

a.btnDetail:hover::after {
  background-image: url(/brand/touchhappy/img/common/icon_arrow_right_on.svg);
}

a.btnNormal {
  position: relative;
  min-width: 330px;
  background-color: #ED859E;
  color: #fff;
  border: solid 2px #ED859E;
  padding: 20px 44px 21px;
}

a.btnNormal::after {
  background-image: url(/brand/touchhappy/img/common/icon_arrow_right.svg);
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  bottom: 35%;
  right: 35px;
}

a.btnNormal.blank::after {
  background-image: url(/brand/touchhappy/img/common/icon_window_blank.svg);
}

a.btnNormal.blank:focus::after,
a.btnNormal.blank:hover::after {
  background-image: url(/brand/touchhappy/img/common/icon_window_blank_on.svg);
}

a.btnNormal:focus,
a.btnNormal:hover {
  background-color: #fff;
  color: #ED859E;
}

a.btnNormal:focus::after,
a.btnNormal:hover::after {
  background-image: url(/brand/touchhappy/img/common/icon_arrow_right_on.svg);
}

.section {
  padding: 120px 0px;
  position: relative;
}

.sectionAward {
  padding: 20px 0;
  position: relative;
}

.separator {
  padding: 120px 0px 240px;
  position: relative;
}

.section.bgPink.separator::after {
  background-image: url(/brand/touchhappy/img/common/img_separator.png);
}

.section.bgWhite.separator::after {
  background-image: url(/brand/touchhappy/img/common/img_separator.png);
  transform: scale(-1, -1);
}

.section.bgWhite.separator.clear::after {
  background-image: url(/brand/touchhappy/img/common/img_separator_clear.png);
}

.section.separator::after {
  content: "";
  position: absolute;
  min-width: 100%;
  background-blend-mode: lighten;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 136px;
  bottom: 0;
}

.section h2 {
  color: #ED859E;
  font-weight: 900;
  font-size: 34px;
  text-align: center;
  margin-bottom: 70px;
  letter-spacing: 0.11em;
}

.content {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.bgPink {
  background-color: #FFF6F5;
}

.bgWhite {
  background-color: #fff;
}

.snsArea {
  position: relative;
}

.snsArea ul {
  text-align: center;
  list-style: none;
  overflow: hidden;
}

.snsArea li {
  display: inline-block;
  width: 162px;
  height: 23px;
  color: white;
  text-align: center;
  font-size: 12px;
  padding-top: 3px;
  padding-left: 16px;
  position: relative;
}

.snsArea li:first-child {
  margin-right: 11px;
}

.snsArea #faceB {
  background: #1877f2;
  border-radius: 3px;
}

.snsArea #faceB a:before {
  content: "";
  width: 16px;
  height: 16px;
  background: url(/brand/touchhappy/img/common/icon_button_fb.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 3px;
  left: 50px;
  align-items: center;
}

.snsArea #twiT {
  background: #1d9bf0;
  border-radius: 100px;
}

.snsArea #twiT a:before {
  content: "";
  width: 16px;
  height: 12px;
  background: url(/brand/touchhappy/img/common/icon_button_tw.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 5px;
  left: 40px;
  align-items: center;
}

.snsArea li a {
  display: block;
}

.snsArea li:hover {
  opacity: 0.5;
}

.introduction {
  font-weight: 700;
  line-height: 2;
  text-align: center;
  letter-spacing: 0.03em;
}

.introduction p:nth-child(n + 2) {
  margin-top: 40px;
}

.introduction .cardBox {
  position: relative;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
  border-radius: 15px;
  width: 600px;
  margin: 21px auto 0;
}

.introduction .cardBox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  display: block;
  border-top: 30px solid #ED859E;
  border-right: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #ED859E;
  border-radius: 15px 0 0 0;
  transform: rotate(0);
}

.introduction .cardBox .card {
  font-size: 18px;
  font-weight: bold;
  color: #ED859E;
  padding: 28px 112px;
  line-height: calc(31 / 18);
}

.introduction .touchImg img {
  max-width: 550px;
}

.section.step .content {
  padding: 0;
}

.section.bgPink.separator.first .content {
  padding: 0;
}

.section.step .content h2,
.section.step .content h3 {
  margin-left: 20px;
  margin-right: 20px;
}

.section.step h2 {
  margin-bottom: 70px;
}

.section.step h3 {
  color: #505050;
  font-family: Noto Sans JP;
  font-size: 22px;
  font-weight: 700;
  line-height: 180%; /* 39.6px */
  letter-spacing: 1.1px;
  position: relative;
  text-align: center;
  margin: 70px auto 74px;
}

.section.step h3 .reduction {
  font-size: 18px;
  letter-spacing: 0.9px;
}

.section.step h3 .dot {
  position: relative;
}

.section.step h3 .dot::before {
  position: absolute;
  display: inline-block;
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 10px;
  right: 9px;
  background-color: #ED859E;
}

.section.step h3:before,
.section.step h3:after {
  position: relative;
  display: inline-block;
  content: "";
  background: #505050;
  width: 2px;
  height: 1.1em;
  vertical-align: bottom;
  border-radius: 1px;
  margin-bottom: 5px;
}

.section.step h3:before {
  transform: rotate(-30deg);
  margin-right: 24px;
}

.section.step h3:after {
  transform: rotate(30deg);
  margin-left: 24px;
}

.stepWrap {
  max-width: 995px;
  width: 100%;
  margin-bottom: 40px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.stepWrap .stepItem {
  max-width: 320px;
  border-radius: 15px;
  padding: 0 0 24px;
  box-shadow: 0px 0px 5px 0px rgba(165, 149, 160, 0.2);
}

.stepWrap .stepItem .imgArea img {
  width: 100%;
}

.stepWrap .stepItem .numImgArea img {
  width: 100%;
}

.stepWrap .stepItem .textArea p {
  font-weight: bold;
  font-size: 19px;
  text-align: center;
  margin-top: 12px;
}

.textArea a.textLink {
  position: relative;
  line-height: 1.8em;
  font-weight: 400;
  font-size: 14px;
  padding-right: 20px;
  text-decoration: underline;
}

.textArea a.textLink::after {
  background-image: url(/brand/touchhappy/img/no12/icon_link.svg);
  content: "";
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 18%;
  right: 2px;
}

.textArea a.textLink:hover {
  opacity: 0.7;
  text-decoration: none;
}

.textLinkNormal{
  text-decoration: underline;
}

.howToUse .textLinkNormal{
  position: relative;
  padding-right: 20px;
}

.howToUse .textLinkNormal::after{
  background-image: url(/brand/touchhappy/img/common/icon_window_blank_on.svg);
  content: "";
  width: 17px;
  height: 19px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 10%;
  right: 0;
}
@media screen and (max-width: 767px) {
  .howToUse .textLinkNormal::after{
    height: 14px;
  }
}

.textLinkNormal:hover {
  opacity: 0.7;
  text-decoration: none;
}

.detailWrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: stretch;
  align-items: stretch;
  margin-bottom: 60px;
}

.detailItem {
  position: relative;
  width: 312px;
  height: 504px;
  border-radius: 15px;
  background-color: #ffffff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  background-size: 100% 170px;
  background-position: top;
  background-repeat: no-repeat;
}

.detailItem:nth-child(1) {
  background-image: url(/brand/touchhappy/img/no12/img_detail_01.jpg);
}

.detailItem:nth-child(2) {
  background-image: url(/brand/touchhappy/img/no12/img_detail_02.jpg);
}

.detailItem:nth-child(3) {
  background-image: url(/brand/touchhappy/img/no12/img_detail_03.jpg);
}

.detailItem .bottomArea {
  margin-top: 170px;
}

.detailItem .bottomArea .img {
  width: auto;
  height: max-content;
  margin: 0 auto;
  text-align: center;
}

.detailItem.secondHaverst .bottomArea .img img {
  height: 90px;
  width: 185px;
}

.detailItem.NPO .bottomArea .img img {
  height: 90px;
  width: 185px;
}

.detailItem.NPO .name {
  line-height: 300%;
}

.detailItem.OWS .bottomArea .img img {
  height: 90px;
  width: 185px;
}

.detailItem.OWS .name {
  line-height: 300%;
}

.detailItem .bottomArea h3 {
  color: #505050;
  margin-top: 8px;
  padding: 0 32px;
  display: grid;
  place-items: center center;
  font-size: 14px;
  font-weight: 500;
  line-height: 170%;
  letter-spacing: 0.7px;
}

.detailItem .btnWrap {
  position: absolute;
  bottom: 32px;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.detailItem .btnWrap a {
  display: inline-block;
  max-width: 100%;
  font-weight: 700;
  border-radius: 100vh;
  line-height: 1.3;
}

.detailItem .btnDetail {
  position: relative;
  z-index: 2;
  backdrop-filter: blur(15px);
  background-color: rgba(255, 255, 255, 0.2);
}

.detailItem a.btnDetail {
  position: relative;
  width: 220px;
  color: #ED859E;
  background-color: #FFFFFF;
  border: 2px solid #ED859E;
  padding: 22px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 130%; /* 18.2px */
  letter-spacing: 0.7px;
}

.detailItem a.btnDetail::after {
  background-image: url(/brand/touchhappy/img/common/icon_arrow_right_on.svg);
  content: "";
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 37%;
  right: 15px;
}

.detailItem a.btnDetail:focus,
.detailItem a.btnDetail:hover {
  background-color: #ED859E;
  color: #ffffff;
}

.detailItem a.btnDetail:hover::after {
  background-image: url(/brand/touchhappy/img/common/icon_arrow_right.svg);
}

#modal-1,
#modal-2,
#modal-3 {
  display: none;
}

#modal-1.is-open,
#modal-2.is-open,
#modal-3.is-open {
  display: block;
}

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modalContainer {
  position: relative;
  background-color: #fff;
  margin-right: 20px;
  margin-left: 20px;
  max-width: 500px;
  border-radius: 15px;
  box-sizing: border-box;
  box-shadow: rgba(165, 149, 160, 0.2) 0px 0px 20px;
}

.modalContent {
  overflow: scroll;
  max-height: 80vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.modalImgArea {
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modalImgArea img {
  max-width: 500px;
}

.modalTextArea {
  padding: 30px 45px 60px;
}

.modalTextArea h2 {
  font-size: 22px;
  color: #ED859E;
  font-weight: 800;
  margin-bottom: 15px;
  line-height: 1.6em;
}

.modalTextArea p {
  line-height: 1.8em;
  font-weight: 400;
  font-size: 14px;
}

.modalTextArea p .paragraph{
  display: block;
  content: "";
  height: 7px;
}

.modalTextArea p .bold{
  font-weight: bold;
}


.modalTextArea a:hover {
  color: #ED859E;
}

.modalTextArea a:focus {
  outline: none;
}

.modalTextArea a[target="_blank"]::after {
  content: '';
  display: inline-block;
  margin-left: 2px;
  margin-bottom: 2px;
  background-image: url(/brand/touchhappy/img/common/icon_window_blank_on.svg);
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  background-size: contain;
  vertical-align: middle;
}

.modalTextArea .imgBox {
  text-align: center;
  margin: 10px 0;
}

.modalTextArea .imgBox {
  height: 100%;
  width: auto;
}

#modal-1 .modalTextArea .imgBox img {
  width: 275px;
  height: auto;
}

#modal-2 .modalTextArea .imgBox img {
  width: 289px;
  height: auto;
}

#modal-3 .modalTextArea .imgBox img {
  width: 289px;
  height: auto;
}

#modal-4 .modalTextArea .imgBox img {
  width: 179px;
  height: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.modalBtnArea.btnWrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: stretch;
  align-items: stretch;
  max-width: 410px;
  margin: 30px auto 0;
}

.modalBtnArea.btnWrap a.btnNormal {
  text-decoration: none;
  padding: 0;
  height: 65px;
  display: table;
  text-align: center;
}

.modalBtnArea.btnWrap a.btnNormal:nth-child(1) {
  color: #ED859E;
  background-color: #ffffff;
}

.modalBtnArea.btnWrap a.btnNormal:nth-child(1):focus,
.modalBtnArea.btnWrap a.btnNormal:nth-child(1):hover {
  color: #ffffff;
  background-color: #ED859E;
}

.modalBtnArea.btnWrap a.btnNormal:nth-child(1):after,
.modalBtnArea.btnWrap a.btnNormal:nth-child(1):after {
  background-image: url(/brand/touchhappy/img/common/icon_window_blank_on.svg);
}

.modalBtnArea.btnWrap a.btnNormal:nth-child(1):focus::after,
.modalBtnArea.btnWrap a.btnNormal:nth-child(1):hover::after {
  background-image: url(/brand/touchhappy/img/common/icon_window_blank.svg);
}

.modalBtnArea.btnWrap a.btnNormal:nth-child(2) {
  margin-top: 15px;
  color: #ffffff;
  background-color: #ED859E;
}

.modalBtnArea.btnWrap a.btnNormal:nth-child(2):after,
.modalBtnArea.btnWrap a.btnNormal:nth-child(2):after {
  background-image: url(/brand/touchhappy/img/common/icon_window_blank.svg);
}

.modalBtnArea.btnWrap a.btnNormal:nth-child(2):focus,
.modalBtnArea.btnWrap a.btnNormal:nth-child(2):hover {
  color: #ED859E;
  background-color: #ffffff;
}

.modalBtnArea.btnWrap a.btnNormal:nth-child(2):focus::after,
.modalBtnArea.btnWrap a.btnNormal:nth-child(2):hover::after {
  background-image: url(/brand/touchhappy/img/common/icon_window_blank_on.svg);
}

.modalBtnArea.btnWrap a.btnNormal div {
  display: table-cell;
  vertical-align: middle;
}

.modalClose {
  position: absolute;
  width: 40px;
  height: 40px;
  right: 0;
  top: -50px;
  border-radius: 100vh;
  text-align: center;
  background-image: url(/brand/touchhappy/img/common/icon_close.svg);
}

.modalClose:focus,
.modalClose:hover {
  background-image: url(/brand/touchhappy/img/common/icon_close_on.svg);
}

@keyframes mmfadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(10%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10%);
  }
}

.micromodalSlide {
  display: none;
}

.micromodalSlide.is-open {
  display: block;
}

.micromodalSlide[aria-hidden="false"] .modalOverlay {
  animation: mmfadeIn 0.5s cubic-bezier(0.34, 0.07, 0.095, 0.995);
}

.micromodalSlide[aria-hidden="false"] .modalContainer {
  animation: mmslideIn 0.5s cubic-bezier(0.34, 0.07, 0.095, 0.995);
}

.micromodalSlide[aria-hidden="true"] .modalOverlay {
  animation: mmfadeOut 0.5s cubic-bezier(0.34, 0.07, 0.095, 0.995);
}

.micromodalSlide[aria-hidden="true"] .modalContainer {
  animation: mmslideOut 0.5s cubic-bezier(0.34, 0.07, 0.095, 0.995);
}

.micromodalSlide .modalContainer,
.micromodalSlide .modalOverlay {
  will-change: transform;
}

.txtArea {
  text-align: center;
  line-height: 2;
  margin-bottom: 50px;
  letter-spacing: 0.03em;
}

.txtArea p:nth-child(n + 2) {
  margin-top: 10px;
}

.methodWrap {
  max-width: 850px;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.methodWrap.close {
  justify-content: center;
}

.methodItem {
  width: 370px;
  border-radius: 15px;
  position: relative;
}

.methodItemAnime {
  max-width: 280px;
  width: 100%;
  margin-bottom: 25px;
}

.methodItem .num {
  font-family: 'Manrope';
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #fff;
  background-color: #ED859E;
  font-size: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 40px;
  top: 40px;
}

.methodItem h3 {
  font-size: 22px;
  font-weight: 800;
  color: #ED859E;
  margin-bottom: 20px;
}

.methodItem .imgWrap img {
  max-width: 100%;
}

.methodItem .top {
  padding-top: 30px;
}

.methodItem .top::after {
  margin-top: 30px;
  border-radius: 1px;
  content: "";
  display: block;
  height: 3px;
  border-bottom: 2px dotted #FFF6F5;
}

.methodItem h4 {
  color: #ED859E;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.6;
}

.methodItem h4:nth-child(n + 2) {
  margin-top: 20px;
}

.methodItem .bottom {
  padding: 30px 0px 30px;
}

.methodWrap.close .bottom {
  padding: 0;
}

.methodItem .speechBubble {
  position: relative;
  font-size: 13px;
  padding-bottom: 10px;
  font-weight: 500;
  color: #505050;
}

.methodItem .speechBubble::before,
.methodItem .speechBubble::after {
  position: absolute;
  display: inline-block;
  content: '';
  bottom: 15px;
  width: 15px;
  height: 1px;
  border-radius: 1px;
  background-color: #505050;
}

.methodItem .speechBubble::before {
  left: 58px;
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.methodItem .speechBubble::after {
  right: 58px;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.tabs {
  margin-top: 50px;
  margin-bottom: 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
}

.tabItem {
  width: calc(100%/3);
  height: 40px;
  line-height: 40px;
  background-color: #f1f1f1;
  font-size: 14px;
  text-align: center;
  color: #adadad;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  overflow: hidden;
  cursor: pointer;
}

.tabItem.start {
  border-radius: 10px 0 0 10px;
}

.tabItem.end {
  border-radius: 0 10px 10px 0;
}

.tabItem:hover {
  opacity: 0.75;
  background-color: #FFF6F5;
}

/*ラジオボタンを全て消す*/
input[name="tabItem"] {
  display: none;
}

.tabContent {
  display: none;
  clear: both;
  overflow: auto;
  max-height: 500px;
}

.tabContent#twitter_content {
  padding-top: 5px;
}

.tabContent#facebook_content {
  padding-top: 15px;
}

.tabContent#instagram_content {
  padding-top: 15px;
}

/*選択されているタブのコンテンツのみを表示*/
#twitter:checked~#twitter_content,
#facebook:checked~#facebook_content,
#instagram:checked~#instagram_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked+.tabItem {
  background-color: #FCE7EC;
  color: #ED859E;
}

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe {
  width: 100% !important;
}

.methodItemTxt {
  line-height: 1.7;
  font-weight: 700;
  margin-bottom: 30px;
  letter-spacing: 0.07em;
  font-size: 14px;
}

.note {
  text-align: left;
  font-size: 11px;
  line-height: 1.4em;
  color: #A1A1A1;
  font-weight: 400;
  max-width: 770px;
  margin: 20px auto 0;
}

.note li {
  margin-bottom: 7px;
  position: relative;
  padding-left: 18px;
  display: inline-block;
}

.note li::before {
  content: "※";
  display: block;
  position: absolute;
  left: 0;
}

/* 番号付き注釈リスト */
.note li {
  margin-bottom: 7px;
  position: relative;
  padding-left: 18px;
}

.note li::before {
  content: "※";
  display: block;
  position: absolute;
  left: 0;
}

.note li.numNote {
  position: relative;
  padding-left: 25px;
  text-indent: 0;
}

.note li.numNote .num {
  position: absolute;
  left: 12px;
}

.noteText {
  font-size: 11px;
  color: #A1A1A1;
  letter-spacing: 0.05;
  font-weight: 400;
}

.modalTextArea .note {
  margin-top: 15px;
}

.methodItem.first .note {
  margin-top: 30px;
}

.methodItem .list {
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 15px;
}

.methodItem .list li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 18px;
}

.methodItem .list li::before {
  content: "・";
  font-weight: 800;
  display: block;
  position: absolute;
  left: 0;
}

.snsBtnBox {
  display: flex;
  justify-content: space-between;
  width: 190px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

.snsBtnBox img {
  width: 42px;
}

@media all and (-ms-high-contrast: none) {
  .tweetArea {
    border: solid 2px;
    border-color: #CFD9DE;
    border-radius: 10px;
    padding-bottom: 10px;
  }
}

.countBox {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.countBox .touchBox,
.countBox .donationBox {
  text-align: center;
  background-color: #fff;
  border-radius: 15px;
}

.countBox h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

.countBox .note {
  margin: 20px 0 0;
}

.reportBox {
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 40px;
  background-color: #FFFFFF;
  border-radius: 15px;
}

.reportImgMain {
  text-align: center;
}

.reportImgMain img {
  margin-top: 40px;
}

.reportImgMain img,
.reportImgSub img {
  text-align: center;
  border-radius: 15px;
  margin-bottom: 25px;
}

.reportImgMain img {
  max-width: 700px;
}

.reportImgSub img {
  max-width: 500px;
  margin-top: 30px;
}

.reportBox .reportTxtArea {
  max-width: 500px;
  margin: 0 auto;
}

.reportBox .reportTxtArea .date {
  font-family: 'Manrope';
  font-size: 14px;
  color: #A1A1A1;
  margin-bottom: 5px;
  text-align: center;
  line-height: 1;
}

.reportBox .reportTxtArea .title {
  font-size: 20px;
  line-height: 33px;
  font-weight: 900;
  margin-top: 0px;
  margin-bottom: 30px;
  text-align: center;
}

.reportBox .reportTxtArea .subtitle {
  font-size: 18px;
  line-height: 27px;
  font-weight: 900;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 30px;
}

.reportBox .reportTxtArea .txt {
  text-align: left;
  font-size: 14px;
  line-height: 25px;
}

.accordionBox {
  display: none;
  margin-bottom: 40px;
}

.reportBox .openBtn,
.reportBox .closeBtn {
  position: relative;
  display: block;
  font-size: 14px;
  text-align: center;
  padding: 12px;
  width: 100%;
  font-weight: 700;
  border-radius: 0 0 15px 15px;
  transition: 0.3s;
}

.reportBox .openBtn:hover,
.reportBox .closeBtn:hover {
  opacity: 0.8;
}

.reportBox .openBtn {
  background-color: #ED859E;
  color: #FFFFFF;
}

.reportBox .openBtn::after {
  background-image: url(/brand/touchhappy/img/common/icon_arrow_down.svg);
  content: "";
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: 40%;
  top: 13px;
}

.reportBox .openBtn.is-active {
  display: none;
}

.reportBox .closeBtn {
  display: none;
  background-color: #FCE7EC;
  color: #ED859E;
}

.reportBox .closeBtn::after {
  background-image: url(/brand/touchhappy/img/common/icon_arrow_down_on.svg);
  content: "";
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: 43%;
  transform: rotateZ(180deg);
  top: 13px;
}

.reportBox .closeBtn.is-active {
  display: block;
}

.touchBox {
  position: relative;
  margin-bottom: 20px;
  padding: 30px 70px 30px;
}

.touchBox .touchNum {
  font-size: 18px;
}

.touchBox .touchNum .num {
  font-size: 40px;
  font-family: 'Manrope';
  color: #ED859E;
  font-weight: 700;
}

.touchBox .updateDate {
  margin-top: 5px;
  font-size: 11px;
  color: #A1A1A1;
}

.touchBox::after {
  content: "";
  background-image: url(/brand/touchhappy/img/common/icon_arrow_tryangle_down.svg);
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  left: 48%;
  bottom: -50px;
}

.donationBox {
  margin-top: 67px;
  margin-bottom: 20px;
  padding: 34px 4vw 40px;
}

.donationBox .donationNum {
  font-size: 20px;
  font-weight: 700;
}

.donationBox .num {
  font-size: 40px;
  font-family: 'Manrope';
  color: #ED859E;
  font-weight: 700;
}

.donationList {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-evenly;
  justify-content: space-evenly;
  -webkit-align-items: stretch;
  align-items: stretch;
  width: 100%;
}

.donationItem {
  width: 200px;
}

.donationList .donationItem .icon {
  width: 160px;
  height: 160px;
}

.donationList .donationItem .title {
  position: relative;
  z-index: 2;
  margin-bottom: 6px;
  color: #505050;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.48px;
}

.donationList .donationItem .title span {
  display: block;
  position: relative;
  z-index: 2;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.36px;
}

.donationList .donationItem .donationNum {
  position: relative;
  z-index: 2;
  font-family: 'Manrope';
  font-size: 40px;
  color: #ED859E;
  letter-spacing: -0.035em;
  line-height: calc(55 / 40);
}

.donationList .donationItem .unit {
  font-family: 'Noto Sans JP';
  font-size: 15px;
  font-weight: lighter;
  letter-spacing: 0;
  margin-left: 2px;
}

.footer {
  padding: 92px 0 50px;
  text-align: center;
  background-color: #FFF6F5;
  position: relative;
}

.footerCopyright {
  font-family: 'Manrope';
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.btnTop {
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
}

.shareArea {
  text-align: center;
  margin-bottom: 30px;
}

.shareAreaBox {
  display: flex;
  width: 180px;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
}

.shareAreaBox li img {
  width: 42px;
}

.footerLogoArea {
  margin-bottom: 25px;
}

@media screen and (max-width: 767px) {
  body {
    min-width: 320px;
    font-size: 14px;
    letter-spacing: 0.05em;
  }

  body .forSpBlock {
    display: block !important;
  }

  body .forPcBlock {
    display: none !important;
  }

  .header {
    height: 50px;
  }

  .headerBox {
    margin-left: 20px;
    margin-right: 20px;
  }

  .headerBox .logoSmbc {
    height: 26px;
  }

  .headerBox .logoTh {
    height: 33px;
  }

  .firstView {
    height: 88vh;
    min-height: 640px;
    background-position: center center;
  }

  .mainVisual {
    padding: 5vh 20px;
  }

  .titleArea {
    min-width: 335px;
  }

  .titleArea .num {
    margin-left: 3px;
    font-family: 'Noto Sans JP';
    font-size: 12px;
    display: inline;
    color: #FFF;
    font-weight: 700;
    line-height: 115%;
    letter-spacing: 0.6px;
  }

  .titleArea .num .font {
    font-family: 'Manrope';
  }

  .titleArea .num::after {
    border-radius: 1px;
    height: 2px;
    width: 133px;
    margin-left: 2px;
    margin-top: 2px;
  }

  .titleArea .theme {
    font-size: 26px;
    font-weight: 700;
    line-height: calc(47 / 35);
    letter-spacing: 2.6px;
  }

  .titleArea .period {
    font-size: 12px;
    letter-spacing: 0.15em;
  }

  .countArea .goal {
    font-size: 13px;
    margin-bottom: 7px;
    font-weight: 700;
    line-height: 100%;
  }

  .countArea .goal::before,
  .countArea .goal::after {
    content: '';
    bottom: 5px;
    width: 20px;
    height: 2px;
    border-radius: 1px;
  }

  .countArea .goal::before {
    left: -22px;
  }

  .countArea .goal::after {
    right: -22px;
  }

  .countArea .goal.close {
    font-size: 12px;
  }

  .countArea .goal.close::before,
  .countArea .goal.close::after {
    content: '';
    bottom: 5px;
    width: 16px;
    height: 1.5px;
    border-radius: 1px;
  }

  .countArea .current {
    font-size: 14px;
  }

  .countArea .current .currentNum {
    font-size: 32px;
    margin-right: 3px;
    font-weight: 700;
    line-height: 100%; /* 32px */
    letter-spacing: -0.32px;
  }

  .countArea .updateDate {
    font-size: 12px;
  }

  .joinArea .daysLeft {
    font-size: 14px;
  }

  .joinArea .daysLeft .daysNum {
    font-size: 24px;
  }

  a.btnMv {
    width: 275px;
    font-size: 14px;
  }

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

    .btnMv,
    .btnDetail {
      border: #fff solid 2px;
    }
  }

  @-moz-document url-prefix() {

    .btnMv,
    .btnDetail {
      border: #fff solid 2px;
    }
  }

  .btnMv::after {
    width: 13px;
  }

  .section {
    padding: 70px 5vw;
    position: relative;
  }

  .sectionAward {
    position: relative;
  }

  .section.separator {
    padding: 30px 5vw 100px;
  }

  .section.separator.first {
    padding: 60px 20px 150px;
  }

  .section.separator::after {
    position: absolute;
    min-width: 100%;
    background-position: 20%;
    height: 100px;
    left: 0;
    transform: scale(-1, 1);
  }

  .section h2 {
    font-size: 30px;
    line-height: 1.5em;
    margin-bottom: 40px;
  }

  .snsArea li {
    width: 40%;
  }

  .snsArea #faceB a:before {
    left: 25%;
  }

  .snsArea #twiT a:before {
    left: 25%;
  }

  .content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0;
  }

  .introduction {
    line-height: 2em;
    letter-spacing: 0.05em;
  }

  .introduction p:nth-child(n + 2) {
    margin-top: 2em;
  }

  .introduction .touchImg {
    position: relative;
    text-align: center;
    height: 200px;
  }

  .introduction .touchImg img {
    position: absolute;
    max-width: 550px;
    min-width: 250px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }

  .introduction .cardBox {
    max-width: 550px;
    min-width: 325px;
    width: 100%;
    margin: 47px auto 0;
  }

  .introduction .cardBox .card {
    font-size: 15px;
    padding: 27px 10px;
    line-height: calc(31 / 16);
    letter-spacing: 0.03em;
  }

  .introduction .cardBox::before {
    border-top: 20px solid #ED859E;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #ED859E;
  }

  .section.step h2 {
    margin-bottom: 50px;
  }

  .section.step h3 {
    font-size: 18px;
    margin: 50px auto 15px;
  }

  .section.step h3:before,
  .section.step h3:after {
    position: relative;
    display: inline-block;
    content: "";
    background: #505050;
    width: 1px;
    height: 1.6em;
    vertical-align: bottom;
    border-radius: 1px;
    margin-bottom: 0px;
  }

  .section.step h3:before {
    margin-right: 16px;
  }

  .section.step h3:after {
    margin-left: 16px;
  }

  .stepWrap {
    width: 100%;
    max-width: 336px;
    margin: 0 auto 30px;
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .stepWrap .stepItem {
    width: 100%;
    max-width: 335px;
    border-radius: 15px;
    padding: 30px 0 40px;
    box-shadow: 0px 0px 5px 0px rgba(165, 149, 160, 0.2);
  }

  .stepWrap .stepItem .imgArea {
    width: 100%;
    max-width: 335px;
    margin: 0 auto;
  }

  .stepWrap .stepItem .imgArea img {
    width: 100%;
  }

  .stepWrap .stepItem .textArea p {
    font-weight: bold;
    font-size: 16px;
    margin-top: 20px;
  }

  .first .detailWrap {
    width: 100%;
    flex-wrap: wrap;
    margin: 0 auto 40px;
  }

  .detailItem {
    max-width: 550px;
    width: 100%;
    background-size: 100% auto;
  }

  .detailItem:nth-child(2n) {
    margin-left: 0;
  }

  .detailItem:not(:first-child) {
    margin-top: 20px;
  }

  .detailItem .bottomArea {
    margin-top: 54.5%;
  }

  .detailItem .bottomArea .img {
    width: auto;
    height: max-content;
    margin: 0 auto;
    text-align: center;
  }

  .detailItem.uminari .bottomArea .img img {
    height: 69px;
  }

  .detailItem .bottomArea h3 {
    min-height: unset;
    font-size: 14px;
  }

  .detailItem a.btnDetail {
    width: 66%;
    min-width: 227px;
  }

  .modalOverlay {
    background: rgba(255, 255, 255, 0.7);
  }

  .modalContainer {
    margin-right: 5vw;
    margin-left: 5vw;
    box-shadow: rgba(165, 149, 160, 0.2) 0px 0px 20px;
  }

  .modalContent {
    max-height: 70vh;
  }

  .modalImgArea img {
    max-width: 100%;
  }

  .modalTextArea {
    padding: 30px 5vw 30px;
  }

  .modalTextArea h2 {
    margin-bottom: 15px;
  }

  .modalClose {
    right: 0px;
    top: -45px;
  }

  .txtArea {
    line-height: 1.9em;
  }

  .methodWrap {
    width: 100%;
    flex-wrap: wrap;
  }

  .methodItem {
    width: 100%;
    border-radius: 15px;
    position: relative;
    box-shadow: rgba(165, 149, 160, 0.2) 0px 0px 20px;
    margin-bottom: 20px;
    padding: 5vw;
  }

  .methodItem h4 {
    margin-bottom: 15px;
  }

  .methodItem h4:nth-child(n + 2) {
    margin-top: 20px;
  }

  .methodItemTxt {
    line-height: 1.5;
  }

  .methodItem .list {
    line-height: 1.5;
  }

  .methodItem .list li {
    margin-bottom: 5px;
  }

  .methodItem .num {
    width: 11vw;
    height: 11vw;
    font-size: 6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 44%;
    top: 35px;
  }

  .methodItem .speechBubble::before {
    left: 7%;
  }

  .methodItem .speechBubble::after {
    right: 7%;
  }

  .snsBtnBox {
    margin-bottom: 30px;
  }

  .reportBox {
    margin-bottom: 20px;
  }

  .reportBox .openBtn::after {
    right: 30%;
  }

  .reportBox .closeBtn::after {
    right: 35%;
  }

  .reportImgMain img {
    margin-top: 0;
    max-width: 100%;
    border-radius: 15px 15px 0 0;
  }

  .reportImgSub img {
    max-width: 100%;
  }

  .reportBox .reportTxtArea .title {
    margin-right: 5vw;
    margin-left: 5vw;
  }

  .accordionBox {
    padding: 0 5vw;
  }

  .countBox {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .countBox h3 {
    font-size: 16px;
  }

  .countBox .touchBox {
    padding: 20px 5vw;
  }

  .countBox .donationBox {
    padding: 10px 5vw 30px;
  }

  .touchBox .touchNum .num,
  .donationBox .donationNum .num {
    font-size: 34px;
  }

  .donationList {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    min-width: 301px;
  }

  .donationList .donationItem {
    width: auto;
    min-width: 47%;
    min-height: 130px;
  }

  .donationList .donationItem .title {
    color: #505050;
    font-family: Noto Sans JP;
    font-size: 14px;
    font-weight: 700;
    line-height: 150%; /* 21px */
    letter-spacing: 0.42px;
    margin-bottom: 3px;
  }

  .donationList .donationItem .donationNum {
    font-size: 34px;
    line-height: calc(46 / 34);
  }

  .donationList .donationItem .unit {
    font-family: 'Noto Sans JP';
    font-size: 12px;
    font-weight: lighter;
    letter-spacing: 0;
    margin-left: 2px;
  }

  a.btnNormal {
    min-width: 320px;
  }

  .introduction .introMessageBox {
    position: relative;
    text-align: center;
    height: 299px;
  }

  .introduction .introMessageBox img {
    position: absolute;
    max-width: 498px;
    min-width: 299px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }

  .section.touchVisa h2 {
    font-size: 30px;
  }

  .touchVisa__img-pc {
    display: none;
  }

  .touchVisa__img-sp {
    display: block;
    margin: 0 auto;
    height: 422px;
  }

  .section.touchSP.bgGreen {
    padding: 40px 0;
  }

  .touchSP .textArea p {
    font-size: 16px;
  }

  .section.touchSP .textArea p .lower{
    font-size: 14px;
  }

  .stepWrap .stepItem {
    margin-left: 0;
    margin-top: 64px;
  }

  .stepWrap .stepItem .stepNum {
    display: block;
    margin: -75px auto 16px;
  }

  .detailItem {
    height: 100%;
  }

  .detailItem .btnWrap {
    position: relative;
    margin: 48px auto 0;
  }

  .joinArea .firstViewBtn {
    width: 77%;
    margin: 0 auto;
    min-width: auto;
  }

  .section.step h3 .reduction {
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  .section.step h3 .dot::before {
    right: 8px;
  }
}

.introduction .introMessageBox img{
  max-width: 498px;
}

.completeTime {
  display: inline-block;
  position: relative;
  margin-bottom: -6px;
  z-index: 1;
}

.joinArea .firstViewBtn {
  padding: 30px 44px;
  opacity: 0.9;
}

.emphasis {
  display: block;
  color: #ED859E;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-top: 7px;
}

.visaApp {
  max-width: 1000px;
  margin: 0px auto 104px;
  padding: 0;
  background: #F8F8F8;
  position: relative;
}

.section.step:has(+ .visaApp) {
  padding-bottom: 60px;
}

.visaApp + .section.bgWhite.separator {
  padding: 104px 0 0 0;
}

.visaApp__content {
  margin: 0px auto 104px;
  padding: 40px 0;
}

.visaApp__content__description {
  max-width: 578px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.visaApp__content__description__img {
  width: 130px;
  height: 130px;
}

.visaApp__content__description__text {
  max-width: 424px;
  color: #505050;
  font-size: 15px;
  font-weight: 500;
  line-height: 170%; /* 25.5px */
  letter-spacing: 0.75px;
}

.visaApp__content__qr {
  max-width: 578px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px auto 0;
}

.visaApp__content__qr__app {
  width: 242px;
  display: flex;
  justify-content: space-between;
}

.visaApp__content__qr__googlePlay {
  width: 274px;
  display: flex;
  justify-content: space-between;
}

.visaApp__content__qr__googlePlay__imglink {
  display: inline-flex;
}

.visaApp__content__qr__app__imglink {
  display: inline-flex;
}

.visaApp__content__qr__app__qr {
  max-width: 90px;
  max-height: 90px;
}

.visaApp__content__qr__googlePlay__qr {
  max-width: 90px;
  max-height: 90px;
}

.detailItem .name {
  color: #ED859E;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  line-height: 150%;
  letter-spacing: 0.8px;
}

.touchVisa h2 {
  color: #318C6C;
  text-align: center;
  font-size: 34px;
  font-weight: 900;
  line-height: 115%; /* 39.1px */
  letter-spacing: 1.7px;
}

.touchVisa .content .note {
  margin-top: 32px;
}

.section.touchSP {
  padding: 100px 0 100px;
}

.bgGreen {
  background-color: #f2f9f4;
}

.section.touchSP h2 {
  color: #318C6C;
  margin-bottom: 45px;
  letter-spacing: normal;
}

.section.touchSP h2 span {
  color: #FE7409;
}

.textArea p {
  font-weight: bold;
  font-size: 19px;
  text-align: center;
  margin-top: 12px;
}

.touchSP .textArea p .green {
  color: #318C6C;
}

.touchSP .textArea p .lower{
  font-size: 16px;
}

.section.touchSP .content {
  margin: 0 auto;
  padding: 0 20px;
}

.section.touchSP img {
  display: block;
  width: 100%;
  max-width: 770px;
  margin: 32px auto 15px
}

.section.touchSP .annotation-list{
  max-width: 770px;
  margin: 20px auto;
}

.section.touchSP .annotation-list .annotation {
  color:  #505050;
  font-size: 11px;
  font-weight: 400;
  line-height: 140%;
  text-indent: -1em;
  padding-left: 1em;
}

.section.touchSP .annotation-list .annotation .annotation-numbering {
  color:  #505050;
  font-size: 11px;
  font-weight: 400;
  line-height: 140%;
  text-indent: -1em;
  padding-left: 1em;
}

.section.howToUse {
  max-width: 1000px;
  margin: 0 auto;
}

.section.howToUse h2 {
  color: #318C6C;
  text-align: center;
  font-size: 34px;
  font-weight: 900;
  line-height: 115%; /* 39.1px */
  letter-spacing: 1.7px;
}

.section.howToUse .annotation-list{
  max-width: 770px;
  margin: 20px auto;
}
@media screen and (max-width: 767px) {
  .section.howToUse .annotation-list li{
    font-size: 12px;
  }
}

.howToUse-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 42px;
}

.howToUse-tabs li {
  color: #318C6C;
  border: 3px solid #318C6C;
  line-height: 1.4;
  padding: 16px 0;
  border-radius: 100px;
  background-color: #FFF;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 115%;
  letter-spacing: 0.8px;
  max-width: 332px;
  height: 58px;
  position: relative;
}

.howToUse-tabs li .tm {
  font-size: 5px;
  vertical-align: top;
}

.howToUse-tabs li:first-child {
  margin-right: -48px;
}

.howToUse-tabs li.-current {
  color: #FFF;
  background-color: #318C6C;
  pointer-events: none;
  z-index: 1;
}

.howToUse-tabs li.-current::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 47%;
  width: 0;
  height: 0;
  border-top: 15px solid #318C6C;
  border-left: 8.5px solid transparent;
  border-right: 8.5px solid transparent;
}

.howToUse-tabContents {
  margin: 40px auto 35px;
}

.howToUse-tabContents > div.-current {
  display: block;
}

.howToUse-tabContents > div {
  display: none;
}

.howToUse-slider {
  padding-top: 10px;
  margin: 32px -20px 0;
}

.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-ios, .swiper-container-android {
  margin: 0 auto 40px;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  min-width: 1000px;
}

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}

.swiper-container-android .swiper-slide, .swiper-wrapper {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 567.21px;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  /* transition-property: transform; */
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  transform: translate3d(0px, 0px, 0px);
}

.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
  height: auto;
}

/* .swiper-container-ios .swiper-slide {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 220px;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  margin-right: 40px;
}

.swiper-container-android .swiper-slide {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 220px;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  margin-right: 40px;
} */

.swiper-slide {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 220px;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  margin-right: 40px;
}

.swiper-slide img {
  max-width: 220px;
  height: 444.21px;
  margin-bottom: 16px;
}

.howToUse .swiper-slide p {
  color: #505050;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  letter-spacing: 0.7px;
}

.howToUse .notes {
  margin-top: 16px;
}

.notes {
  margin-top: 8px;
}

.howToUse-slider .notes li {
  color:#A1A1A1;
  font-family: Noto Sans JP;
  font-size: 11px;
  font-weight: 400;
  line-height: 150%; /* 16.5px */
}

.notes li {
  text-indent: -1em;
  padding-left: 1em;
  font-size: 1.2rem;
}

.howToUse-swiper {
  max-width: 286px;
  height: 45px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.howToUse-swiper .swiper-button-ios-right {
  background-image: url(/brand/touchhappy/img/no12/icon_arrow_left_button_green.svg);
  width: 45px;
  height: 45px;
  cursor: pointer;
}

.howToUse-swiper .swiper-button-android-right {
  background-image: url(/brand/touchhappy/img/no12/icon_arrow_left_button_green.svg);
  width: 45px;
  height: 45px;
  cursor: pointer;
}

.howToUse-swiper .swiper-button-ios-left {
  background-image: url(/brand/touchhappy/img/no12/icon_arrow_right_button_green.svg);
  width: 45px;
  height: 45px;
  cursor: pointer;
}

.howToUse-swiper .swiper-button-android-left {
  background-image: url(/brand/touchhappy/img/no12/icon_arrow_right_button_green.svg);
  width: 45px;
  height: 45px;
  cursor: pointer;
}


.howToUse-swiper .swiper-ios-pagenation .swiper-pagination-bullet {
  background-color: #D9D9D9;
  width: 9px;
  height: 9px;
  border-radius: 10px;
  cursor: pointer;
}

.howToUse-swiper .swiper-ios-pagenation .swiper-pagination-bullet-active {
  background-color: #318C6C;
}

.howToUse-swiper .swiper-android-pagenation .swiper-pagination-bullet {
  background-color: #D9D9D9;
  width: 9px;
  height: 9px;
  border-radius: 10px;
  cursor: pointer;
}

.howToUse-swiper .swiper-android-pagenation .swiper-pagination-bullet-active {
  background-color: #318C6C;
}

@media screen and (min-width: 767px) {
  .stepWrap .stepItem .stepNum {
    display: block;
    margin: -44px auto 16px;
  }

  .touchVisa__img-pc {
    display: block;
    max-width: 748px;
    margin: 0 auto;
  }

  .touchVisa__img-sp {
    display: none;
  }

  .howToUse-tabs li {
    width: 100%;
    font-size: 14px;
  }

  .howToUse-tabs li {
    width: 100%;
  }

  .howToUse-slider {
    margin: 0 auto 40px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .howToUse .notes {
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
  }

  .howToUse-swiper .swiper-ios-pagenation {
    width: 84px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .howToUse-swiper .swiper-android-pagenation {
    width: 84px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

@media screen and (min-width: 979px) {
  .stepWrap .stepItem:not(:first-child) {
    margin-left: 10px;
  }
}

@media screen and (max-width: 969px) and (min-width: 767px) {
  .stepWrap .stepItem:nth-child(2) {
    margin-left: 10px;
  }

  .stepWrap .stepItem:nth-child(3) {
    margin-top: 67px;
  }
}

@media screen and (max-width: 643px) {
  .visaApp__content__qr__app__qr {
    display: none;
  }

  .visaApp__content__qr__googlePlay__qr {
    display: none;
  }

  .visaApp {
    max-width: 1000px;
    margin: 0px auto 104px;
    padding: 0;
    background: #F8F8F8;
    position: relative;
  }
  
  .section.step:has(+ .visaApp) {
    padding-bottom: 60px;
  }
  
  .visaApp + .section.bgWhite.separator {
    padding: 104px 0 0 0;
  }
  
  .visaApp__content {
    margin: 0px auto 104px;
    padding: 32px 20px;
  }
  
  .visaApp__content__description {
    width: 100%;
  }

  .visaApp__content__description__img {
    margin-right: 16px;
  }
  
  .visaApp__content__qr {
    width: 70%;
    margin: 24px auto 0;
  }
  
  .visaApp__content__qr__app {
    width: 137px;
    height: 50px;
  }
  
  .visaApp__content__qr__googlePlay {
    width: 170px;
    height: 50px;
  }
  
}

@media screen and (max-width: 517px) {
  .visaApp__content__description__img {
    width: 100px;
    height: 100px;
  }

  .visaApp__content__description__text {
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    letter-spacing: 0.7px;
  }

  .visaApp__content__qr__app {
    width: 137px;
    height: 50px;
    margin-right: 16px;
  }
  
  .visaApp__content__qr__googlePlay {
    width: 170px;
    height: 50px;
  }

  .visaApp__content__qr__googlePlay__imglink {
    width: 152px;
    height: 45px;
  }
  
  .visaApp__content__qr__app__imglink {
    width: 123px;
    height: 45px;
  }

  .visaApp__content__qr {
    width: 89%;
  }
}

@media screen and (min-width: 1000px) {
  .detailItem.NPO {
    margin-left: 32px;
  }
  
  .detailItem.OWS {
    margin-left: 32px;
  }
}

@media screen and (max-width: 935px) and (min-width: 768px) {
  .detailItem.NPO {
    margin-left: 32px;
  }

  .detailItem.OWS {
    margin-top: 40px;
    margin-left: 0;
  }
}

@media screen and (max-width: 499px) {
  .donationList .donationItem {
    display: flex;
    align-items: center;
    margin: 0 auto;
    min-width: 219px;
  }

  .donationList .donationItem .icon {
    width: 110px;
    height: 110px;
  }

  .donationItem-text {
    margin-right: 50px;
  }
}

@media screen and (max-width: 766px) {
  .howToUse-tabs li {
    width: 100%;
  }

  .howToUse-swiper {
    min-width: 265px;
  }

  .howToUse-swiper .swiper-ios-pagenation {
    width: 45%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .howToUse-swiper .swiper-android-pagenation {
    width: 45%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .swiper-container-ios, .swiper-container-android {
    min-width: auto;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    margin: 0 auto 16px;
  }

  .section.howToUse h2 {
    font-size: 30px;
    font-weight: 900;
    line-height: 150%; /* 45px */
    letter-spacing: 3px;
  }

  .howToUse .swiper-slide-text {
    width: 80%;
    margin: 0 auto;
  }

  .section.howToUse h2 span {
    display: block;
  }
}

.footer-notes {
  max-width: 770px;
  margin: 0 auto 75.65px;
}

.footer-notes .footer-notes-text {
  color:  #505050;
  font-size: 11px;
  font-weight: 400;
  line-height: 140%;
  text-align: left;
  text-indent: -1em;
  padding-left: 1em;
}

.footer-notes .footer-notes-text:not(:nth-child(4)) {
  margin-bottom: 4px;
}

@media screen and (max-width: 839px) {
  .footer-notes {
    width: 100%;
  }

  .footer-notes .footer-notes-text {
    display: block;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }


}