@keyframes blink {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes zoomOut {
    0% {
        transform: scale(1.2);
        opacity: 0
    }

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

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

[data-mss-fade-up] {
    opacity: 0
}

[data-mss-fade-up=true] {
    animation: fadeUp .6s ease-out forwards
}

.s5-returnToTop {
    margin: 0
}

html {
    scroll-behavior: smooth
}

@media(min-width: 768px) {
    .mssBr-small {
        display: none
    }
}

@media(max-width: 767px) {
    .mssBr-large {
        display: none
    }
}

.mssButton {
    color: #fff;
    text-decoration: underline;
    display: inline-block;
    padding: 1.1em 1.2em 1em;
    border-radius: .5em;
    background-color: #000;
}

.mssButton:hover,
.mssButton:focus {
    text-decoration: none;
    color: #fff;
    opacity: .8
}

.mssButton[target=_blank]::after {
    content: "";
    display: inline-block;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="%23fff" d="M119.81 18.87h-90.57c-1.76 0-3.19 1.43-3.19 3.19v62.67c0 1.76 1.43 3.19 3.19 3.19h90.57c1.76 0 3.19-1.43 3.19-3.19v-62.67c0-1.76-1.43-3.19-3.19-3.19zm-9.73 56.13h-71.12v-43.05h71.12v43.05zM17.6 91.27v-58.2h-9.41c-1.76-.01-3.19 1.42-3.19 3.18v69.68c0 1.76 1.43 3.19 3.19 3.19h97.43c1.76 0 3.19-1.43 3.19-3.19v-9.89h-86.43c-2.64.01-4.78-2.13-4.78-4.77z" /></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.2em;
    height: 1.2em;
    margin-right: .4em;
    margin-left: .4em
}

.mssButton:after {
    vertical-align: middle;
    margin-bottom: .1em
}

.mssButtonSquare {
    display: inline-block;
    padding: 1.1em 1.2em 1em;
    border-style: solid;
    border-width: 2px;
    border-color: #2d75c7;
    background-color: #2d75c7;
    color: #fff
}

.mssButtonSquare.-mstColor--white {
    background-color: #fff;
    color: #2d75c7
}

.mssTextLink {
    color: #806943;
    text-decoration: underline
}

.mssTextLink:hover,
.mssTextLink:focus {
    text-decoration: none
}

.mssTextLink[target=_blank]::after {
    content: "";
    display: inline-block;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="%23806943" d="M119.81 18.87h-90.57c-1.76 0-3.19 1.43-3.19 3.19v62.67c0 1.76 1.43 3.19 3.19 3.19h90.57c1.76 0 3.19-1.43 3.19-3.19v-62.67c0-1.76-1.43-3.19-3.19-3.19zm-9.73 56.13h-71.12v-43.05h71.12v43.05zM17.6 91.27v-58.2h-9.41c-1.76-.01-3.19 1.42-3.19 3.18v69.68c0 1.76 1.43 3.19 3.19 3.19h97.43c1.76 0 3.19-1.43 3.19-3.19v-9.89h-86.43c-2.64.01-4.78-2.13-4.78-4.77z" /></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.2em;
    height: 1.2em;
    margin-right: .4em;
    margin-left: .4em
}

.mssTextLink::after {
    vertical-align: middle;
    margin-bottom: .13em
}

.mssContainer__inner {
    background-image: url("/feature/mysony/story/assets/images/mss-back-large.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    background-color: #f2f2f2
}

@media(max-width: 767px) {
    .mssContainer__inner {
        background-image: url("/feature/mysony/story/assets/images/mss-back-small.svg")
    }
}

.mssContainer__contents {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px
}

@media(max-width: 767px) {
    .mssContainer__contents {
        padding-left: 20px;
        padding-right: 20px
    }
}

.mssContainer__contentsHeading {
    text-align: center;
    line-height: 0;
    padding: 7.4666666667vw 0 4.2666666667vw;
    margin: auto
}

@media(min-width: 768px) {
    .mssContainer__contentsHeading {
        padding: 36px 0 30px
    }
}

.mssContainer__contentsHeading figure {
    display: block;
    margin: 0 auto
}

.mssContainer__contentsHeading picture {
    display: block;
    margin: 0 auto
}

@media(max-width: 767px) {
    .mssContainer__contentsHeading img {
        max-width: 47.7333333333vw
    }
}

.mssKeyVisual__tags {
    font-size: 2.6666666667vw
}

@media(min-width: 768px) {
    .mssKeyVisual__tags {
        font-size: 10px
    }
}

.mssKeyVisual__tag {
    display: inline-block;
    padding: .3em 1em .4em;
    border-radius: 100em;
    background-color: #ccc
}

.mssKeyVisual__tag.-mstColor--yellow {
    background-color: #fff8a5
}

.mssKeyVisual__tag.-mstColor--blue {
    background-color: #c8e4f8
}

.mssKeyVisual__tag.-mstColor--green {
    background-color: #bfdeae
}

@media(max-width: 767px) {
    .mssKeyVisual__image {
        margin-left: -20px;
        margin-right: -20px
    }
}

.mssKeyVisual__image figure {
    display: block;
    margin: 0 auto
}

.mssKeyVisual__image picture {
    display: block;
    margin: 0 auto
}

.mssKeyVisual__image img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: auto;
    overflow: hidden;
    border-radius: 10px
}

.mssKeyVisual__text {
    position: relative;
    border: solid 3px #cdb182;
    border-radius: 10px;
    padding: 5.3333333333vw 8vw 10.6666666667vw;
    margin: -6.6666666667vw auto 0;
    background-color: #fff;
    z-index: 1;
    max-width: 89.3333333333vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 13.3333333333vw;
    box-sizing: border-box
}

.mssKeyVisual__text>* {
    width: 100%
}

@media(min-width: 768px) {
    .mssKeyVisual__text {
        padding: 40px 40px 44px;
        margin-top: -30px;
        max-width: 1040px;
        text-align: left;
        flex-direction: row;
        justify-content: space-between;
        gap: 5vw
    }
}

.mssKeyVisual__twoUp {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    margin-right: 0
}

@media(min-width: 768px) {
    .mssKeyVisual__twoUp {
        flex-direction: row;
        margin-left: -2.5vw;
        margin-right: -2.5vw
    }
}

.mssKeyVisual__twoUpItem {
    width: 100%;
    position: relative
}

@media(min-width: 768px) {
    .mssKeyVisual__twoUpItem {
        padding: 0 2.5vw
    }
}

@media(min-width: 768px) {
    .mssKeyVisual__twoUpItem+.mssKeyVisual__twoUpItem {
        border-left: solid 1px #cdb182
    }
}

@media(max-width: 767px) {
    .mssKeyVisual__twoUpItem+.mssKeyVisual__twoUpItem {
        border-top: solid 1px #cdb182;
        padding-top: 8vw;
        margin-top: 8vw
    }
}

.mssKeyVisual__heading {
    font-size: 6.6666666667vw;
    line-height: 1.5;
    letter-spacing: .04em;
    margin: .4em 0 0
}

@media(min-width: 768px) {
    .mssKeyVisual__heading {
        font-size: 30px
    }
}

@media(min-width: 768px) {
    .mssKeyVisual__heading {
        line-height: 1.5
    }
}

.-isAdditionalLogo .mssKeyVisual__heading {
    text-align: left
}

.mssKeyVisual__heading.-isMarginBottom-1line {
    margin-bottom: 1.5em
}

@media(max-width: 767px) {
    .mssKeyVisual__heading.-isMarginBottom-1line--forSmall {
        margin-bottom: 1.5em
    }
}

@media(min-width: 768px) {
    .mssKeyVisual__heading.-isMarginBottom-1line--forLarge {
        margin-bottom: 1.5em
    }
}

.mssKeyVisual__logo {
    position: absolute;
    bottom: -4.7vw;
    right: 0;
    max-width: 32.4vw;
    width: 100%;
    height: auto
}

@media(min-width: 768px) {
    .mssKeyVisual__logo {
        max-width: 164px;
        bottom: -7px;
        right: 30px
    }
}

.mssKeyVisual__sub {
    font-size: 3.4666666667vw;
    line-height: 1.8571428571
}

.mssKeyVisual__sub>*:first-child {
    margin-top: 0
}

.mssKeyVisual__sub>*:last-child {
    margin-bottom: 0
}

@media(min-width: 768px) {
    .mssKeyVisual__sub {
        font-size: 14px
    }
}

@media(max-width: 767px) {
    .mssKeyVisual__sub {
        text-align: left
    }
}

.mssArticle {
    margin-top: 43.7333333333vw;
    padding-bottom: 16vw
}

@media(min-width: 768px) {
    .mssArticle {
        margin-top: 230px;
        padding: 20px 20px 60px;
        background: #f2f2f2
    }
}

@media(min-width: 768px) {
    .mssSection+.mssSection {
        margin-top: 120px
    }
}

@media(max-width: 767px) {
    .mssSection+.mssSection {
        margin-top: 24vw
    }
}

.mssSection__inner {
    overflow: hidden
}

@media(min-width: 768px) {
    .mssSection__flex {
        display: flex;
        margin-left: -4.1666666667vw;
        margin-right: -4.1666666667vw
    }
}

@media(min-width: 768px) {
    .-is-reverse .mssSection__flex {
        flex-direction: row-reverse
    }
}

@media(min-width: 768px) {
    .mssSection__item {
        width: 100%;
        padding: 0 4.1666666667vw
    }
}

.mssSection__notes {
    font-size: 2.9333333333vw;
    margin: 1em auto
}

@media(min-width: 768px) {
    .mssSection__notes {
        font-size: 11px
    }
}

.mssSection__notes>ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.mssSection__notes>ul>li {
    display: flex;
    gap: .3em
}

.mssSection__notes>ul>li>*:first-child {
    flex-shrink: 0;
    white-space: nowrap
}

.mssSection__image img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: auto
}

.mssSection__image figcaption {
    font-size: 2.9333333333vw;
    margin-top: 1em
}

@media(min-width: 768px) {
    .mssSection__image figcaption {
        font-size: 11px
    }
}

.mssSection__header,
.mssSection__heading {
    font-size: 5.6vw
}

@media(min-width: 768px) {

    .mssSection__header,
    .mssSection__heading {
        font-size: 24px
    }
}

.mssSection__header {
    margin-bottom: 1em
}

@media(max-width: 767px) {
    .mssSection__header {
        text-align: center
    }
}

.mssSection__heading {
    margin: auto;
    padding-bottom: .4em;
    border-bottom: solid 1px #cdb182
}

.mssSection__bodycopy {
    font-size: 3.4666666667vw;
    margin: 1em auto
}

@media(min-width: 768px) {
    .mssSection__bodycopy {
        font-size: 14px
    }
}

.mssSection__bodycopy>*:first-child {
    margin-top: 0
}

.mssSection__bodycopy>*:last-child {
    margin-bottom: 0
}

.mssRelated {
    margin-top: 24vw
}

@media(min-width: 768px) {
    .mssRelated {
        margin-top: 135px
    }
}

.mssRelated__inner {
    position: relative;
    background-color: #fff;
    padding: 8vw 5.3333333333vw 4.8vw;
    border-radius: 10px;
    max-width: 820px;
    margin: 0 auto
}

@media(min-width: 768px) {
    .mssRelated__inner {
        padding: 40px
    }
}

.mssRelated__label {
    font-size: 3.2vw;
    font-weight: bold;
    display: inline-block;
    padding: .3em 1em .4em;
    border-radius: 100em;
    background-color: #cdb182;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media(min-width: 768px) {
    .mssRelated__label {
        font-size: 12px
    }
}

@media(min-width: 768px) {
    .mssRelated__flex {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 2.5vw
    }
}

.mssRelated__image figure {
    display: block;
    margin: 0 auto
}

.mssRelated__image picture {
    display: block;
    margin: 0 auto
}

.mssRelated__image img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: auto
}

.mssRelated__text {
    font-size: 2.9333333333vw
}

@media(min-width: 768px) {
    .mssRelated__text {
        font-size: 12px
    }
}

@media(max-width: 767px) {
    .mssRelated__text {
        margin-top: 1em
    }
}

.mssRelated__heading {
    font-size: 3.4666666667vw;
    margin: 0 auto 1em
}

@media(min-width: 768px) {
    .mssRelated__heading {
        font-size: 16px
    }
}

.mssRelated__bodycopy {
    font-size: 2.9333333333vw;
    margin: 1.6em auto
}

@media(min-width: 768px) {
    .mssRelated__bodycopy {
        font-size: 12px
    }
}

.mssRelated__bodycopy>*:first-child {
    margin-top: 0
}

.mssRelated__bodycopy>*:last-child {
    margin-bottom: 0
}

.mssRelated__links {
    font-size: 2.6666666667vw
}

@media(min-width: 768px) {
    .mssRelated__links {
        font-size: 11px
    }
}

.mssRelated__links>ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.mssSurvey {
    margin: 18.6666666667vw auto 10.6666666667vw
}

@media(min-width: 768px) {
    .mssSurvey {
        margin: 90px auto 40px
    }
}

.mssSurvey__header,
.mssSurvey__heading {
    font-size: 4vw;
    line-height: 1.6;
    letter-spacing: -0.025em
}

@media(min-width: 768px) {

    .mssSurvey__header,
    .mssSurvey__heading {
        font-size: 16px
    }
}

.mssSurvey__header {
    margin-bottom: 1em
}

.mssSurvey__inner {
    text-align: center;
    background-image: url("/feature/mysony/story/assets/images/survey-back-top.svg"), url("/feature/mysony/story/assets/images/survey-back-bottom.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center, bottom center;
    background-color: #fff;
    padding: 13.3333333333vw 5.3333333333vw;
    margin: -20px
}

@media(min-width: 768px) {
    .mssSurvey__inner {
        padding: 4.1666666667vw;
        margin: 0 auto
    }
}

@media screen and (min-width: 1200px) {
    .mssSurvey__inner {
        padding: 50px
    }
}

@media screen and (min-width: 980px) {
    .mssSurvey__twoUp {
        display: flex;
        align-items: center;
        justify-content: center
    }
}

@media screen and (max-width: 767px) {
    .mssSurvey__twoUpItem+.mssSurvey__twoUpItem {
        border-top: solid 1px #cdb182;
        padding-top: 9.3333333333vw;
        margin-top: 9.3333333333vw
    }
}

@media screen and (min-width: 768px)and (max-width: 979px) {
    .mssSurvey__twoUpItem+.mssSurvey__twoUpItem {
        border-top: solid 1px #cdb182;
        padding-top: 4.6666666667vw;
        margin-top: 4.6666666667vw
    }
}

@media screen and (min-width: 980px) {
    .mssSurvey__twoUpItem+.mssSurvey__twoUpItem {
        border-left: solid 1px #cdb182;
        padding-left: 4.75vw;
        margin-left: 4.75vw
    }
}

.mssSurvey__notes {
    font-size: 2.4vw;
    margin: 1em auto
}

@media(min-width: 768px) {
    .mssSurvey__notes {
        font-size: 10px
    }
}

.mssSurvey__notes>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center
}

.mssSurvey__notes>ul>li {
    display: inline-flex;
    text-align: left;
    gap: .3em
}

.mssSurvey__notes>ul>li>*:first-child {
    flex-shrink: 0;
    white-space: nowrap
}

.mssSurvey__buttons>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 1.3333333333vw
}

@media(min-width: 768px) {
    .mssSurvey__buttons>ul {
        gap: .8333333333vw
    }
}

.mssSurvey__button {
    background: none;
    border: 0;
    cursor: pointer;
    outline: none;
    font: inherit;
    appearance: none;
    display: inline-block;
    padding: .5em 1em .4em;
    border-radius: 100em;
    background-color: #000;
    color: #fff;
    transition-property: background-color;
    transition-duration: .2s
}

.mssSurvey__button:hover,
.mssSurvey__button:focus {
    background-color: #cdb182;
    text-decoration: none
}

.mssSurvey__button.-isCustomQuestionnaire {
    color: #fff;
    min-width: 14em;
    position: relative
}

@media screen and (min-width: 980px)and (max-width: 1199px) {
    .mssSurvey__button.-isCustomQuestionnaire {
        min-width: 23.9166666667vw
    }
}

@media screen and (min-width: 1200px) {
    .mssSurvey__button.-isCustomQuestionnaire {
        min-width: 287px
    }
}

.mssSurvey__button.-isCustomQuestionnaire::after {
    content: "";
    display: inline-block;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22 22"><circle fill="%23fff" cx="11" cy="11" r="11" /><polygon fill="%23000" points="10 15.5 8.6 14.1 11.9 10.8 8.6 7.5 10 6.1 14.8 10.8 10 15.5" /></svg>');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 1.38em;
    height: 1.38em;
    margin-right: .4em;
    margin-left: .4em;
    position: absolute;
    top: 50%;
    right: .4em;
    transform: translateY(-50%)
}

.mssSurvey__button.-isCustomQuestionnaire:hover::after,
.mssSurvey__button.-isCustomQuestionnaire:focus::after {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 22 22"><circle fill="%23fff" cx="11" cy="11" r="11" /><polygon fill="%23CDB182" points="10 15.5 8.6 14.1 11.9 10.8 8.6 7.5 10 6.1 14.8 10.8 10 15.5" /></svg>')
}

[data-mss-survey-button-reaction][disabled] {
    pointer-events: none;
    background-color: #636363
}

.mssShare {
    margin: 10.6666666667vw auto
}

@media(min-width: 768px) {
    .mssShare {
        margin: 40px auto
    }
}

.mssShare__header,
.mssShare__heading {
    font-size: 3.2vw
}

@media(min-width: 768px) {

    .mssShare__header,
    .mssShare__heading {
        font-size: 11px
    }
}

.mssShare__header {
    margin-bottom: 1em;
    text-align: center
}

.mssShare__header>*:first-child {
    margin-top: 0
}

.mssShare__header>*:last-child {
    margin-bottom: 0
}

.mssShare__heading {
    font-weight: normal;
    display: inline-block;
    padding: .3em 3.2em .4em;
    border-radius: 100em;
    background-color: #fff
}

.mssShare__links {
    max-width: 44.5333333333vw;
    margin: auto;
    text-align: center
}

.mssShare__links>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-grid;
    place-items: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 8vw
}

@media(min-width: 768px) {
    .mssShare__links>ul {
        gap: 2.5vw
    }
}

@media(min-width: 768px) {
    .mssShare__links a[data-mss-share=x] img {
        min-width: 25px
    }
}

@media(max-width: 767px) {
    .mssShare__links a[data-mss-share=x] img {
        min-width: 7.2vw
    }
}

@media(min-width: 768px) {

    .mssShare__links a[data-mss-share=line] img,
    .mssShare__links a[data-mss-share=facebook] img {
        min-width: 40px
    }
}

@media(max-width: 767px) {

    .mssShare__links a[data-mss-share=line] img,
    .mssShare__links a[data-mss-share=facebook] img {
        min-width: 10.6666666667vw
    }
}

.mssShare__links img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: auto
}

@media(min-width: 768px) {
    .mssBanners {
        max-width: 710px;
        margin: 0 auto
    }
}

.mssBanners>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5.3333333333vw
}

@media(min-width: 768px) {
    .mssBanners>ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 3.3333333333vw
    }
}

.mssBanners img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: auto
}