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;
}

a.textLink {
    text-decoration: underline;
}

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

::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;
}

@media screen and (min-width: 768px) {
    .txtCenter-pc {
        text-align: center !important;
    }
}

@media screen and (max-width: 767px) {
    .txtCenter-sp {
        text-align: center !important;
    }
}

.widthFit {
    width: fit-content !important;
}

@media screen and (min-width: 768px) {
    .widthFit-pc {
        width: fit-content !important;
    }
}

@media screen and (max-width: 767px) {
    .widthFit-sp {
        width: fit-content !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;
}

.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;
}

.separator {
    padding: 120px 0px 240px;
    position: relative;
}
.separator_kv {
    padding: 0 0 136px;
    position: relative;
    background-color: #EFFAFF;
}
@media screen and (min-width: 1480px) {
    .separator_kv {
        padding: 0 0 calc(100vw *(136/1480));
        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/usj/img_separator2.png);
}

.separator_kv::after,.section.bgBlue.separator::after {
    background-image: url(/brand/touchhappy/img/usj/img_separator1.png);
    background-color: #fff;
}

.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: normal;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 136px;
    bottom: 0;
}
.separator_kv::after {
    content: "";
    position: absolute;
    min-width: 100%;
    background-blend-mode: normal;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 136px;
    bottom: 0;
}

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

.h2Bubble{
    text-align: center;
    margin-bottom: 40px;
}
.h2Bubble .h2BubbleInner{
    font-family: "Noto Sans JP";
    font-weight: 700;
    font-size: 26px;
    line-height: 114.99999999999999%;
    letter-spacing: 0.05em;
    text-align: center;
    border-radius: 100px;
    padding: 10px 22px 12px 26px;
    position: relative;
    display: inline-block;
    background-color: #54B0E9;
    color: #fff;
}
.h2Bubble .h2BubbleInner::after{
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    clip-path: polygon(0% 0%,100% 0%,50% 100%);
    background-color: #54B0E9;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
}
.h2Bubble .h2BubbleInner .space{
    margin-left: -6px;
}
@media screen and (max-width: 767px) {
    .h2Bubble{
        margin-bottom: 16px;
    }
    .h2Bubble .h2BubbleInner{
        font-size: 16px;
        padding: 6px 16px 8px 20px;
    }
    .h2Bubble .h2BubbleInner::after{
        width: 8px;
        height: 8px;
        bottom: -7px;
    }
}

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

.bgPink {
    background-color: #FFF6F5;
}

.bgWhite {
    background-color: #fff;
}

.bgBlue {
    background-color: #EFFAFF;
}

.header {
    height: 60px;
}

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

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

.headerBox .logoTh {
    width: 81px;
}

.firstView {
    position: relative;
    background-image: url(/brand/touchhappy/img/usj/img_mv_pc.jpg);
    background-color: rgba(255, 255, 255, 0.04);
    background-blend-mode: lighten;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 90vh;
    min-height: 800px;
    max-height: 1080px;
    color: #fff;
    z-index: 0;
}
.firstViewLogo{
    text-align: center;
    margin: 24px 0 60px;
    width: 100%;
}
.firstViewLogo img{
    max-width: 890px;
    width: 100%;
}
@media screen and (max-width: 767px) {
    .firstViewLogo img{
        max-width: 200px;
    }
}

.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-family: "Noto Sans JP";
    font-weight: 700;
    font-size: 55px;
    line-height: 130%;
    letter-spacing: 0.1em;
    margin-top: 11px;
    margin-bottom: 10px;
}

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

.titleArea .line {
    border-top: 2px solid #fff;
    max-width: 329px;
    width: 100%;
    margin: 32px 0;
}

.countArea {
    position: absolute;
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    right: 0;
    left: 0;
    top: 50%;
    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%;
    font-weight: 400;
}

.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 {
    margin-top: 32px;
}

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

.introduction .introMessageBox {
    margin-top: 32px;
}

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

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

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

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

.section.step h3,
.section.touchVisa 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.touchVisa h3 {
    margin: 70px auto 32px;
}
.section.step h3 .reduction,
.section.touchVisa h3 .reduction {
    font-size: 18px;
    letter-spacing: 0.9px;
}

.section.step h3 .dot,
.section.touchVisa h3 .dot {
    position: relative;
}
.section.touchVisa h3 .dot::before,
.section.step h3 .dot::before {
    position: absolute;
    display: inline-block;
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 10px;
    right: 9px;
    background-color: #54B0E9;
}
.section.touchVisa h3 .dot::before{
    background-color: #318C6C;
}

.section.step h3:before,
.section.step h3:after,
.section.touchVisa h3:before,
.section.touchVisa h3:after {
    position: relative;
    display: inline-block;
    content: "";
    background: #CBCBCB;
    width: 2px;
    height: 1.1em;
    vertical-align: bottom;
    border-radius: 1px;
    margin-bottom: 5px;
}
.section.touchVisa h3:before,
.section.step h3:before {
    transform: rotate(-30deg);
    margin-right: 24px;
}
.section.touchVisa h3:after,
.section.step h3:after {
    transform: rotate(30deg);
    margin-left: 24px;
}

.stepWrap {
    max-width: 1000px;
    width: 100%;
    margin-bottom: 16px;
    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;
    gap: 20px;
}

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

.stepWrap .stepItem .imgArea {
    max-width: 320px;
    margin-inline: auto;
}

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

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

.stepWrap .stepItem .textArea p {
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    margin-top: 16px;
    line-height: 1.3;
}

.stepWrap .stepItem .textArea p:first-child {
    margin-top: 24px;
}

#ceremony + .section {
    padding-bottom: 0;
}

#ceremony .txtArea {
    margin-bottom: 40px;
}

.ceremonyContainer {
    max-width: 960px;
    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;
    gap: 4.166666666%;
}

.ceremonyItem1 {
    width: 31.6666666%;
}

.ceremonyItem2 {
    width: 64.16666666%;
}

.ceremonyItem img {
    width: 100%;
}

.myprojectWrap {
    max-width: 960px;
    padding: 5.25%;
    border-radius: 15px;
    box-shadow: rgba(165, 149, 160, 0.1) 0px 5px 10px;
}
.myprojectWrap:last-of-type {
    margin-top: 60px;
}

#myproject h2 + .txtArea {
    margin-bottom: 60px;
}

.myprojectContainer1 {
    max-width: 960px;
    width: 100%;
    margin-bottom: 0px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.myprojectContainer1.column {
    flex-direction: column;
    align-items: center;
    margin: 40px 0;
}
@media screen and (max-width: 767px) {
    .myprojectContainer1.column {
        margin: 20px 0;
    }
}

.myprojectContainer2 {
    max-width: 960px;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.myprojectWrap .myprojectContainer1 .txtArea, .myprojectWrap .myprojectContainer2 .txtArea {
    max-width: 380px;
    text-align: start;
    margin: auto 0;
}

.myprojectWrap .myprojectContainer1 .txtArea {
    margin: auto 0 auto 3%;
}
.myprojectWrap .myprojectContainer2 .txtArea {
    margin: auto 3% auto 0;
}

.myprojectWrap .myprojectContainer2 + .txtArea {
    margin-top: 40px;
    margin-bottom: 0;
}
.myprojectContainer1.column + .txtArea {
    margin: 0;
}
.myprojectContainer1.column + .txtArea + .note {
    margin-top: 4px;
    text-align: center;
}
.txtArea:has(+ .myprojectContainer1.column) {
    margin-bottom: 40px;
}
@media screen and (max-width: 900px) {
    .txtArea:has(+ .myprojectContainer1.column) {
        text-align: left;
    }
    .myprojectContainer1.column + .txtArea {
        text-align: left;
    }
    .myprojectContainer1.column + .txtArea + .note {
        margin-top: 4px;
        text-align: left;
    }
}

.myprojectItem1{
    width: 50%;
}
.myprojectContainer1.column .myprojectItem1{
    width: 58%;
}
@media screen and (max-width: 767px) {
    .myprojectContainer1.column .myprojectItem1{
        width: 100%;
    }
}



.myprojectWrap img {
    width: 100%;
}

.textArea a.textLink {
    position: relative;
    line-height: 1.3;
    font-weight: 500;
    font-size: 13px;
    padding-right: 20px;
    text-decoration: underline;
}

@media screen and (max-width: 767px) {
    .textArea a.textLink {
        font-size: 14px;
    }
}


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

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

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

#myproject .txtArea a.textLink::after {
    background-image: url(/brand/touchhappy/img/common/icon_window_blank_on.svg);
    content: "";
    width: 17px;
    height: 17px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 10%;
    right: 0;
}

#myproject .txtArea 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;
}

.detailItem:nth-child(1) {
    background-image: url(/brand/touchhappy/img/no14/img_detail.png);
}

.detailItem .bottomArea {
    margin-top: 170px;
}
.detailItem.single .bottomArea {
    margin-top: 338px;
}
.detailItem .bottomArea .img {
    width: auto;
    height: max-content;
    margin: 0 auto;
    text-align: center;
}
.detailItem.single .bottomArea .img img{
    width: 240px;
    margin-top: 16px;
    margin-bottom: 16px;
}
.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.single .bottomArea h3 {
    color: #505050;
    margin-top: 16px;
    padding: 0 48px;
    display: grid;
    place-items: center center;
    font-size: 14px;
    font-weight: 500;
    line-height: 170%;
    letter-spacing: 0.7px;
}

.detailItem .btnWrap {
    margin-top: 40px;
}

.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: 330px;
    color: #54B0E9;
    background-color: #FFFFFF;
    border: 2px solid #54B0E9;
    padding: 22px 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 130%; /* 18.2px */
    letter-spacing: 0.05em;
    font-family: "Noto Sans JP";
}
@media screen and (max-width: 767px) {
    .detailItem a.btnDetail {
        width: 260px;
        font-size: 14px;
    }
}

.detailItem a.btnDetail::after {
    background-image: url(/brand/touchhappy/img/usj/icon_arrow_right_on.svg);
    content: "";
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 24px;
}

.detailItem a.btnDetail:focus,
.detailItem a.btnDetail:hover {
    background-color: #54B0E9;
    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(174, 174, 174, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modalContainer {
    position: relative;
    background-color: #fff;
    margin-right: 20px;
    margin-left: 20px;
    max-width: 640px;
    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: 640px;
}

.modalTextArea {
    padding: 24px;
}

.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: 20px 0;
}

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

#modal-1 .modalTextArea .imgBox img {
    width: 240px;
    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: 330px;
    margin: 30px auto 0;
}

.modalBtnArea.btnWrap a.btnNormal {
    text-decoration: none;
    padding: 0 56px 0 48px;
    height: 80px;
    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;
    font-size: 14px;
    font-weight: 400;

}

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

.modalClose:focus,
.modalClose:hover {
    background-image: url(/brand/touchhappy/img/usj/icon_close_on.svg);
}
.introduction .introMessageBox img {
            width: 100%;
            max-width: 1000px;
}
@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;
}
.detailItem + .txtArea{
    margin-top: 40px;
    margin-bottom: 0;
}
.txtArea .underline {
    background: linear-gradient(transparent 30%, #fff 30%);
}
.txtArea .touchCount {
    font-family: 'Manrope';
    font-weight: 700;
    font-size: 35px;
    line-height: 100%;
    letter-spacing: 0.01em;
    color: #54B0E9;
}
@media screen and (max-width: 767px) {
    .txtArea.txtleft_sp {
        text-align: left;
    }
}
.txtbr_pc{
    display: block;
}
@media screen and (max-width: 900px) {
    .txtbr_pc{
        display: none;
    }
}

.txtArea p:nth-child(n + 2) {
    margin-top: 10px;
}
.txtArea p.text {
    margin-top: 32px;
}
.txtArea p.text + p.text {
    margin-top: 20px;
}
.txtArea p.note {
    margin-top: 32px;
    max-width: 569px;
    text-indent: -1em;
    padding-left: 1em;
}
.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: 14px;
    line-height: 1.4em;
    color: #A1A1A1;
    font-weight: 400;
    max-width: 770px;
    margin: 32px auto 0;
}
@media screen and (max-width: 767px) {
    .note {
        font-size: 11px;
        letter-spacing: 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;
}

@media screen and (max-width: 767px) {
    .touchBox .touchNum {
        font-weight: 700;
        line-height: 115%;
        letter-spacing: 0.18px;
    }
}

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

.touchBox .updateDate {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: 0.33px;
    color: #A1A1A1;
}

.touchBox::after {
    content: "";
    background-image: url(/brand/touchhappy/img/usj/icon_arrow_triangle_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: 30px 70px 32px;
}

.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 {
    max-width: 710px;
}

.donationList .donationItem .icon {
}

.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;
}
.donationTxt{
    font-family: "Noto Sans JP";
    font-weight: 700;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0.01em;
    text-align: center;
    vertical-align: bottom;
    margin-top: 28px;
    color: #54B0E9;
}
.donationTxt.black{
    color: #505050;
    font-size: 20px;
    line-height: 160%;
}
.donationTxt + .donationTxt{
    margin-top: 16px;
}
.donationTxt span{
    font-family: 'Manrope';
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0.01em;
    text-align: center;
    vertical-align: bottom;
}

@media screen and (max-width: 767px) {
    .donationTxt {
        margin-top: 0;
        font-size: 11px;
        line-height: 110.00000000000001%;
        letter-spacing: 0;
    }
    .donationTxt span{
        font-size: 23px;
        line-height: 100%;
    }
    .donationTxt + .donationTxt{
        margin-top: 4px;
    }
    .donationTxt.black{
        font-size: 14px;
    }
}

.footer {
    padding: 92px 0 50px;
    text-align: center;
    background-color: #EFFAFF;
    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;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    gap: 24px;
}

.shareAreaBox li img {
    width: 42px;
}

.footerLogoArea {
    margin-bottom: 25px;
}
.footerLogoArea img{
    width: 261px;
}
@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;
    }

    .firstView {
        height: 80vh;
        min-height: calc(100vw*(523/375));
        background-position: center center;
        background-image: url(/brand/touchhappy/img/usj/img_mv_sp.jpg);
    }
    .firstViewLogo{
        margin: 10px 0 24px;
    }

    .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: 24px;
        font-weight: 700;
        letter-spacing: 0.1em;
    }

    .titleArea .line{
        max-width: 106px;
        margin: 14px 0 18px;
    }

    .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;
    }
    .detailItem.single .bottomArea .img img{
        width: 160px;
        height: auto;
        margin-top: 18px;
        margin-bottom: 19px;
    }
    .donationList .donationItem .icon {
        width: 97px;
        height: 82px;
    }
    .donationList .donationItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        gap: 12px;
    }
    .txtArea p.note{
        margin-top: 10px;
    }
    @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 259px;
        position: relative;
    }

    .sectionAward {
        position: relative;
    }

    .section.separator {
        padding: 40px 5vw 140px;
    }

    .section.separator.first {
        padding: 40px 20px 100px;
    }
    
    .separator_kv{
        padding: 0 0 100px;
    }

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

    .section.separator .txtArea {
        font-size: 14px;
        font-weight: 500;
        line-height: 200%;
        letter-spacing: 0.42px;
    }
    .detailItem + .txtArea {
        margin-top: 16px;
    }

    .section h2 {
        font-size: 30px;
        line-height: 1.5em;
        letter-spacing: 3px;
        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;
    }

    .introductionWrap {
        padding-inline: 0;
        padding-bottom: 70px;
    }

    .introduction {
        font-size: 15px;
        line-height: 2em;
        letter-spacing: 0.75px;
    }

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

    .introduction .touchImg {
        position: relative;
        text-align: center;
        margin-top: 24px;
    }

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

    .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;
        gap: 0;
    }

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

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

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

    .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.single .bottomArea {
        margin-top: 53.4%;
    }

    .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;
    }

    .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;
        font-weight: 900;
        line-height: 1.15;
        letter-spacing: 0.48px;
    }

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

    .countBox .donationBox {
        padding: 24px 5vw;
    }

    .touchBox .touchNum .num,
    .donationBox .donationNum .num {
        font-size: 34px;
        font-weight: 700;
        line-height: 100%;
        letter-spacing: 0.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;
    }

    .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;
        margin-top: 16px;
    }

    .introduction .introMessageBox img {
    }

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

    .touchVisa__img-pc {
        display: none;
    }

    .touchVisa__img-sp {
        display: block;
        margin: 0 auto;
        width: 225px;
    }

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

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

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

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

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

    .detailItem {
        height: 100%;
    }

    .detailItem .btnWrap {
        position: relative;
        margin: 40px 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;
    }

    #ceremony {
        padding: 70px 5vw;
    }

    .ceremonyContainer {
        gap: 20px;
        margin-bottom: 50px;
    }

    .myprojectContainer1, .myprojectContainer2 {
        gap: 10px;
    }

    .myprojectWrap {
        padding: 5.9880239520958085vw;
        margin-bottom: 40px;
    }

    #ceremony .txtArea, #myproject h2 + .txtArea {
        margin-bottom: 50px;
    }

    #myproject .myprojectWrap .txtArea {
        margin-bottom: 0;
    }

    .myprojectContainer1 {
        margin-bottom: 5.9880239520958085vw;
    }

    .myprojectContainer2 .txtArea {
        margin-top: 0px;
    }

    #myproject .txtArea a.textLink {
        font-size: 14px;
        padding-right: 18px;
    }
    
    #myproject .txtArea a.textLink::after {
        width: 15px;
        height: 15px;
    }
    .myprojectItem1 {
        width: 100%;
    }

    .myprojectWrap .myprojectContainer1 .txtArea, .myprojectWrap .myprojectContainer2 .txtArea {
        max-width: 100%;
    }

    .myprojectWrap .myprojectContainer1 .txtArea {
        margin: auto 0 auto 0;
    }

    .myprojectWrap .myprojectContainer2 .txtArea {
        margin: auto 0 auto 0;
    }

    .ceremonyItem1, .ceremonyItem2 {
        width:335px;
    }

    .myprojectWrap .myprojectContainer2 + .txtArea {
        margin-top: 5.9880239520958085vw;
    }
}



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

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

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

.visaApp {
    max-width: 1000px;
    margin: 0px auto 104px;
    padding: 0;
    background: #EFFAFF;
    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__googlePlay__imglink img,.visaApp__content__qr__app__imglink img {
    width: 100%;
}

.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: 24px;
    font-weight: 900;
    line-height: 150%;
    letter-spacing: 1.2px;
}

@media screen and (max-width: 767px) {
    .detailItem .name {
        font-size: 16px;
        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: 72px 0;
}

.bgGreen {
    background-color: #f2f9f4;
}

.section.touchSP h2 {
    line-height: 1.15;
    letter-spacing: 1.7px;
    color: #318C6C;
    margin-bottom: 70px;
}

@media screen and (max-width: 767px) {
    .section.touchSP h2 {
        line-height: 1.5;
        letter-spacing: 3px;
        margin-bottom: 40px;
    }
}

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

.textArea p {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 0.8px;
}

.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: 24px auto;
}

@media screen and (max-width: 767px) {
    .section.touchSP img {
        margin: 21px auto;
    }
}

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

.section.touchSP .annotation-list li {
    position: relative;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color:    #505050;
}

.section.touchSP .annotation-list li:first-child {
    margin-top: 0;
}

.section.touchSP .annotation-list li.annotation {
    padding-left: 15px;
}

.section.touchSP .annotation-list li.annotation::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "※"
}

.section.touchSP .annotation-list li.annotation-numbering {
    padding-left: 22px;
    counter-increment: container_counter;
}

.section.touchSP .annotation-list li.annotation-numbering::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "※" counter(container_counter);
}

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

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

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

.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;
}
.notes.usj{
    margin-top: 40px;
    max-width: 1000px;
    width: 100%;
}
@media screen and (max-width: 767px) {
    .notes.usj{
        margin-top: 16px;
    }
}

.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;
}
.notes.usj li {
    font-family: "Noto Sans JP";
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0;
    color: #A1A1A1;
}
.notes.usj li + li {
    margin-top: 4px;
}
@media screen and (max-width: 767px) {
    .notes.usj li {
        font-size: 11px;
    }
}

.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: 768px) {
    .stepWrap .stepItem .stepNum {
        display: block;
        margin: -44px auto 16px;
    }

    .touchVisa__img-pc {
        display: block;
        max-width: 525px;
        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;
    }

    .myprojectContainer2 .txtArea {
        margin-top: 40px;
    }
}

@media screen and (max-width: 959px) and (min-width: 768px) {
    .myprojectWrap .myprojectContainer1 img, .myprojectWrap .myprojectContainer2 img {
        width: 100%;
    }
    .myprojectWrap .myprojectContainer1 .txtArea, .myprojectWrap .myprojectContainer2 .txtArea {
        display: inline-block;
        width: 47%;
    }

}

@media screen and (max-width: 969px) and (min-width: 768px) {
    .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 40px;
        padding: 0;
        background: #EFFAFF;
        position: relative;
    }
    
    .section.step:has(+ .visaApp) {
        padding-bottom: 0;
    }
    
    .visaApp + .section.bgWhite.separator {
        padding: 104px 0 0 0;
    }
    
    .visaApp__content {
        margin: 0px auto 40px;
        padding: 32px 20px;
    }
    
    .visaApp__content__description {
        width: 100%;
    }

    .visaApp__content__description__img {
        margin-right: 16px;
    }
    
    .visaApp__content__qr {
        margin: 24px auto 0;
        justify-content: center;
        gap: 16px;
    }
    
    .visaApp__content__qr__app {
        width: fit-content;
    }
    
    .visaApp__content__qr__googlePlay {
        width: fit-content;
    }
}

@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__googlePlay__imglink {
        width: 152px;
        height: 45px;
    }
    
    .visaApp__content__qr__app__imglink {
        width: 123px;
        height: 45px;
    }
}

@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) {





}

@media screen and (max-width: 767px) {
    .section.touchVisa{
        padding: 40px 5vw 40px;
    }
    .section.touchVisa h3 {
        margin: 40px auto 16px;
        font-size: 18px;
        letter-spacing: 0.7px;
    }
    .section.touchVisa h3 .reduction{
        font-size: 14px;
    }
    .section.touchVisa h3:before {
        margin-right: 10px;
    }
    .section.touchVisa h3:after{
        margin-left: 10px;
    }
    .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;
    }
    .section.howToUse{
        padding: 40px 5vw 40px;
    }
    .section.separator h2{
        font-size: 30px;
        letter-spacing: 3px;
    }
    #archive.section{
        padding: 40px 5vw 70px;
    }
    #archive.section .txtArea {
        font-size: 14px;
        font-weight: 500;
        line-height: 2;
        letter-spacing: 0.42px;
    }

    .section.howToUse .note {
        margin-top: 35px;
    }
}

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

.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;
    }

}

.pointImg{
    text-align: center;
}
.pointImg img{
    width: 223px;
}

.textLinkBlankText{
    margin-top: 40px;
}
.textLinkBlank{
    margin-top: 16px;
}
.textLinkBlank a{
    font-family: "Noto Sans JP";
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0;
    text-decoration: underline;
    color: #54B0E9;
    position: relative;
}
.textLinkBlank a::after{
    position: absolute;
    content: '';
    background-image: url(/brand/touchhappy/img/usj/icon_arrow_blank.svg);
    width: 29px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -36px;
}
@media screen and (max-width: 767px) {
    .textLinkBlank{
        margin-top: 16px;
        padding-right: 36px;
    }
    .textLinkBlank a{
        font-size: 14px;
    }
}

.donation_prefecture{
    max-width: 520px;
    margin: 36px auto 0;
    font-size: 14px;
}

.modalTextArea p.modalHead{
    font-family: "Noto Sans JP";
    font-weight: 700;
    font-size: 20px;
    line-height: 170%;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 24px;
}

.modalList{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.modalList li{
    font-family: "Noto Sans JP";
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
    position: relative;
    padding-left: 20px;
    color: #505050;
}
.modalList li::before{
    position: absolute;
    content: '・';
    left: 0;
}
.modaNote{
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: test;
    margin-top: 16px;
}
.modaNote li{
    font-family: "Noto Sans JP";
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
    position: relative;
    padding-left: 26px;
    color: #B4B4B4;
}
.modaNote li::before{
    position: absolute;
    content: '';
    left: 0;
    counter-increment: test;
    content: "※"counter(test) ;
}

.section h2.sub {
    font-family: "Noto Sans JP";
    font-weight: 500;
    font-size: 30px;
    line-height: 130%;
    letter-spacing: 0.1em;
    text-align: center;
    color: #505050;
    margin-bottom: 12px;
}
.section h2.sub span {
    font-weight: 900;
    font-size: 40px;
    line-height: 130%;
    color: #54B0E9;
}
@media screen and (max-width: 767px) {
    .section h2.sub {
        font-size: 18px;
        line-height: 150%;
        margin-bottom: 3px;
    }
    .section h2.sub span {
        font-size: 18px;
        line-height: 150%;
    }
}

.h2Sub{
    font-family: "Noto Sans JP";
    line-height: 160%;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    text-align: center;
}
.h2Sub .marker{
    font-weight: 400;
    font-size: 24px;
    background:linear-gradient(transparent 70%, #E7F3F3 70%);
    padding-bottom: 4px;
}
.h2Sub .marker span{
    font-weight: 700;
    font-size: 28px;
}
@media screen and (max-width: 767px) {
    .h2Sub{
        margin-bottom: 8px;
    }
    .h2Sub .marker{
        font-size: 16px;
        padding-bottom: 2px;
    }
    .h2Sub .marker span{
        font-size: 20px;
    }
}


.donationArea{
    padding: 120px 5vw;
}
@media screen and (max-width: 767px) {
    .donationArea{
        padding: 70px 5vw;
    }
}

.footer-text-usj{
    font-weight: 400;
    font-size: 11px;
    line-height: 140%;
    letter-spacing: 0;
    max-width: 770px;
    margin: 0 auto 32px;
    text-align: left;
    color: #505050;
}
.footer-text-usj span{
    font-family: "Noto Sans JP";
}
@media screen and (max-width: 839px) {
    .footer-text-usj{
        width: 80%;
        margin-right: auto;
        margin-left: auto;
    }
}