@keyframes animation_fade_lineup {
    0% {
        opacity: 0
    }

    15% {
        opacity: 1
    }

    60% {
        opacity: 1
    }

    75% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

.throughTheRain html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    word-break: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4
}

.throughTheRain *,
.throughTheRain ::before,
.throughTheRain ::after {
    background-repeat: no-repeat;
    box-sizing: inherit
}

.throughTheRain ::before,
.throughTheRain ::after {
    text-decoration: inherit;
    vertical-align: inherit
}

.throughTheRain * {
    padding: 0;
    margin: 0
}

.throughTheRain hr {
    overflow: visible;
    height: 0;
    color: inherit
}

.throughTheRain details,
.throughTheRain main {
    display: block
}

.throughTheRain summary {
    display: list-item
}

.throughTheRain [hidden] {
    display: none
}

.throughTheRain abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

.throughTheRain a {
    background-color: rgba(0, 0, 0, 0)
}

.throughTheRain a:active,
.throughTheRain a:hover {
    outline-width: 0
}

.throughTheRain code,
.throughTheRain kbd,
.throughTheRain pre,
.throughTheRain samp {
    font-family: monospace, monospace
}

.throughTheRain pre {
    font-size: 1em
}

.throughTheRain b,
.throughTheRain strong {
}

.throughTheRain sub,
.throughTheRain sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

.throughTheRain sub {
    bottom: -0.25em
}

.throughTheRain sup {
    top: -0.5em
}

.throughTheRain table {
    border-color: inherit;
    text-indent: 0
}

.throughTheRain iframe {
    border-style: none
}

.throughTheRain input {
    border-radius: 0
}

.throughTheRain [type=number]::-webkit-inner-spin-button,
.throughTheRain [type=number]::-webkit-outer-spin-button {
    height: auto
}

.throughTheRain [type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

.throughTheRain [type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

.throughTheRain textarea {
    overflow: auto;
    resize: vertical
}

.throughTheRain button,
.throughTheRain input,
.throughTheRain optgroup,
.throughTheRain select,
.throughTheRain textarea {
    font: inherit
}

.throughTheRain optgroup {
    font-weight: bold
}

.throughTheRain button {
    overflow: visible
}

.throughTheRain button,
.throughTheRain select {
    text-transform: none
}

.throughTheRain button,
.throughTheRain [type=button],
.throughTheRain [type=reset],
.throughTheRain [type=submit],
.throughTheRain [role=button] {
    cursor: pointer
}

.throughTheRain button::-moz-focus-inner,
.throughTheRain [type=button]::-moz-focus-inner,
.throughTheRain [type=reset]::-moz-focus-inner,
.throughTheRain [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

.throughTheRain button:-moz-focusring,
.throughTheRain [type=button]::-moz-focus-inner,
.throughTheRain [type=reset]::-moz-focus-inner,
.throughTheRain [type=submit]::-moz-focus-inner {
    outline: 1px dotted ButtonText
}

.throughTheRain button,
.throughTheRain html [type=button],
.throughTheRain [type=reset],
.throughTheRain [type=submit] {
    -webkit-appearance: button
}

.throughTheRain button,
.throughTheRain input,
.throughTheRain select,
.throughTheRain textarea {
    background-color: rgba(0, 0, 0, 0);
    border-style: none
}

.throughTheRain a:focus,
.throughTheRain button:focus,
.throughTheRain input:focus,
.throughTheRain select:focus,
.throughTheRain textarea:focus {
    outline-width: 0
}

.throughTheRain select {
    -moz-appearance: none;
    -webkit-appearance: none
}

.throughTheRain select::-ms-expand {
    display: none
}

.throughTheRain select::-ms-value {
    color: currentColor
}

.throughTheRain legend {
    border: 0;
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal;
    max-width: 100%
}

.throughTheRain ::-webkit-file-upload-button {
    -webkit-appearance: button;
    color: inherit;
    font: inherit
}

.throughTheRain [disabled] {
    cursor: default
}

.throughTheRain img {
    border-style: none
}

.throughTheRain progress {
    vertical-align: baseline
}

.throughTheRain [aria-busy=true] {
    cursor: progress
}

.throughTheRain [aria-controls] {
    cursor: pointer
}

.throughTheRain [aria-disabled=true] {
    cursor: default
}

.throughTheRain ol,
.throughTheRain ul,
.throughTheRain li {
    list-style-type: none
}

.throughTheRain a {
    text-decoration: none
}

.throughTheRain a,
.throughTheRain abbr,
.throughTheRain acronym,
.throughTheRain address,
.throughTheRain applet,
.throughTheRain article,
.throughTheRain aside,
.throughTheRain audio,
.throughTheRain b,
.throughTheRain big,
.throughTheRain blockquote,
.throughTheRain body,
.throughTheRain canvas,
.throughTheRain caption,
.throughTheRain cite,
.throughTheRain code,
.throughTheRain dd,
.throughTheRain del,
.throughTheRain details,
.throughTheRain dfn,
.throughTheRain div,
.throughTheRain dl,
.throughTheRain dt,
.throughTheRain em,
.throughTheRain embed,
.throughTheRain fieldset,
.throughTheRain figcaption,
.throughTheRain figure,
.throughTheRain footer,
.throughTheRain form,
.throughTheRain h1,
.throughTheRain h2,
.throughTheRain h3,
.throughTheRain h4,
.throughTheRain h5,
.throughTheRain h6,
.throughTheRain header,
.throughTheRain hgroup,
.throughTheRain html,
.throughTheRain i,
.throughTheRain iframe,
.throughTheRain img,
.throughTheRain ins,
.throughTheRain kbd,
.throughTheRain label,
.throughTheRain legend,
.throughTheRain li,
.throughTheRain mark,
.throughTheRain menu,
.throughTheRain nav,
.throughTheRain object,
.throughTheRain ol,
.throughTheRain output,
.throughTheRain p,
.throughTheRain pre,
.throughTheRain q,
.throughTheRain ruby,
.throughTheRain s,
.throughTheRain samp,
.throughTheRain section,
.throughTheRain small,
.throughTheRain span,
.throughTheRain strike,
.throughTheRain strong,
.throughTheRain sub,
.throughTheRain summary,
.throughTheRain sup,
.throughTheRain table,
.throughTheRain tbody,
.throughTheRain td,
.throughTheRain tfoot,
.throughTheRain th,
.throughTheRain thead,
.throughTheRain time,
.throughTheRain tr,
.throughTheRain tt,
.throughTheRain ul,
.throughTheRain var,
.throughTheRain video {
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
    color: inherit
}

.throughTheRain img {
    width: 100%
}

.throughTheRain svg {
    overflow: hidden
}

.throughTheRain h1,
.throughTheRain h2,
.throughTheRain h3,
.throughTheRain h4,
.throughTheRain h5,
.throughTheRain h6 {
    font-weight: normal
}

.throughTheRain *:focus {
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.throughTheRain * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.throughTheRain {
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .06em;
    color: #231815
}

@media screen and (min-width: 769px) {
    .throughTheRain a:hover {
        opacity: 1
    }
}

button {
    color: inherit
}

.throughTheRain .mv {
    width: 100%;
    position: relative;
    overflow: hidden
}

@media screen and (max-width: 768px) {
    .throughTheRain .mv {
        padding: 20px 20px 40px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv {
        padding: 60px 0
    }
}

.throughTheRain .mv__inner {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0 auto
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__inner {
        max-width: 80.4387569%
    }
}

.throughTheRain .mv__pc {
    line-height: 1;
    font-size: 0
}

@media screen and (max-width: 768px) {
    .throughTheRain .mv__pc {
        display: none
    }
}

.throughTheRain .mv__pc__box__img {
    opacity: 0;
    opacity: 0;
    translate: 0 0;
    filter: brightness(1.1) blur(1px);
    transition: opacity .8s ease, translate .8s ease, filter .8s ease;
    transition-delay: .8s;
    position: relative;
    font-size: 0;
    line-height: 1;
    width: 45.4545455%;
    margin: 0 auto 0 0
}

.throughTheRain .mv__pc__box__img_1 {
    width: 100%;
    display: block
}

.throughTheRain .mv__pc__box__img_2 {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation-fill-mode: forwards
}

.throughTheRain .mv__sp {
    line-height: 1;
    font-size: 0
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__sp {
        display: none
    }
}

.throughTheRain .mv__sp__box__img {
    opacity: 0;
    opacity: 0;
    translate: 0 0;
    filter: brightness(1.1) blur(1px);
    transition: opacity .8s ease, translate .8s ease, filter .8s ease;
    transition-delay: .8s;
    position: relative;
    font-size: 0;
    line-height: 1
}

.throughTheRain .mv__sp__box__img_1 {
    width: 100%;
    display: block
}

.throughTheRain .mv__sp__box__img_2 {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.throughTheRain .mv__pc,
.throughTheRain .mv__sp {
    opacity: 0;
    transition: opacity 1.2s ease
}

.throughTheRain .mv__ttl .mv__ttl__logo,
.throughTheRain .mv__ttl .mv__ttl__text--1,
.throughTheRain .mv__ttl .mv__ttl__en,
.throughTheRain .mv__ttl .mv__ttl__sub__1,
.throughTheRain .mv__ttl .mv__ttl__sub__2 {
    opacity: 0;
    translate: 0 15px;
    transition: opacity 2s ease, translate .8s ease, filter 1.2s ease
}

@media screen and (max-width: 768px) {
    .throughTheRain .mv__ttl .mv__ttl__text--1 {
        transition-delay: .4s
    }

    .throughTheRain .mv__ttl .mv__ttl__sub__1 {
        transition-delay: 1.2s
    }

    .throughTheRain .mv__ttl .mv__ttl__sub__2 {
        transition-delay: 1.4s
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl .mv__ttl__logo {
        transition-delay: .4s
    }

    .throughTheRain .mv__ttl .mv__ttl__text--1 {
        transition-delay: .6s
    }

    .throughTheRain .mv__ttl .mv__ttl__en {
        transition-delay: .8s
    }

    .throughTheRain .mv__ttl .mv__ttl__sub__1 {
        transition-delay: 1.2s
    }

    .throughTheRain .mv__ttl .mv__ttl__sub__2 {
        transition-delay: 1.4s
    }
}

.throughTheRain .mv.is-animation .mv__sp,
.throughTheRain .mv.is-animation .mv__pc {
    opacity: 1
}

.throughTheRain .mv.is-animation .mv__ttl__logo,
.throughTheRain .mv.is-animation .mv__ttl__text--1,
.throughTheRain .mv.is-animation .mv__ttl__en,
.throughTheRain .mv.is-animation .mv__ttl__sub__1,
.throughTheRain .mv.is-animation .mv__ttl__sub__2 {
    opacity: 1;
    translate: 0 0px;
}

.throughTheRain .mv.is-animation .mv__pc__box__img,
.throughTheRain .mv.is-animation .mv__sp__box__img {
    opacity: 1;
    translate: 0 0;
    filter: none;
    transition: opacity .8s ease, translate .8s ease, filter .8s ease
}

.throughTheRain .mv.is-animation .mv__pc__box__img_1,
.throughTheRain .mv.is-animation .mv__sp__box__img_1 {
    animation: animation_fade_mv 12s infinite
}

.throughTheRain .mv.is-animation .mv__pc__box__img_2,
.throughTheRain .mv.is-animation .mv__sp__box__img_2 {
    opacity: 0;
    animation: animation_fade_mv 12s infinite;
    animation-delay: 6s
}

@keyframes animation_fade_mv {
    0% {
        opacity: 0
    }

    15% {
        opacity: 1
    }

    60% {
        opacity: 1
    }

    75% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

.throughTheRain .mv__ttl {
    z-index: 9
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl {
        position: absolute;
        width: 50%;
        height: -moz-fit-content;
        height: fit-content;
        top: 0;
        bottom: 0;
        right: 0;
        left: auto;
        margin: auto;
        padding-left: 6.4090909%;
        padding-right: 6.4090909%
    }
}

.throughTheRain .mv__ttl__logo {
    font-size: 0;
    line-height: 1;
    vertical-align: middle
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__logo {
        width: 82.425%
    }
}

.throughTheRain .mv__ttl__text {
    margin-top: 7.465%
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__text {
        margin-top: 6.225%
    }
}

.throughTheRain .mv__ttl__text span {
    display: block
}

.throughTheRain .mv__ttl__text--1 {
    letter-spacing: .09em;
    line-height: 1.5;
    white-space: nowrap
}

@media screen and (max-width: 768px) {
    .throughTheRain .mv__ttl__text--1 {
        font-size: 18px;
        font-size: 4.8vw
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__text--1 {
        font-size: 18px;
        font-size: 1.3vw
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__text--1 {
        font-size: 1.5837481698vw
    }
}

.throughTheRain .mv__ttl__en {
    margin-top: 5%;
    font-size: 1.3713030747vw;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: 1.5;
    letter-spacing: .06em;
}

.throughTheRain .mv__ttl__sub {
    width: 100%;
    white-space: nowrap
}

@media screen and (max-width: 768px) {
    .throughTheRain .mv__ttl__sub {
        position: relative;
        width: 100% !important
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__sub {
        margin-top: 8.45%
    }
}

@media screen and (max-width: 768px) {
    .throughTheRain .mv__ttl__sub {
        margin-top: 7.5%
    }
}

.throughTheRain .mv__ttl__sub p {
    display: flex;
    align-items: center;
    letter-spacing: .05em
}

.throughTheRain .mv__ttl__sub__1 {
    line-height: 1;
    position: relative
}

@media screen and (max-width: 768px) {
    .throughTheRain .mv__ttl__sub__1 {
        font-size: 15px;
        font-size: 4vw
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__sub__1 {
        font-size: 15px;
        font-size: 1.1vw
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__sub__1 {
        font-size: 1.2445095168vw;
        border-bottom: 1px solid;
        padding-bottom: 6px;
        width: fit-content;
    }
}

.throughTheRain .mv__ttl__sub__2 {
    line-height: 1;
    letter-spacing: 0
}

@media screen and (max-width: 768px) {
    .throughTheRain .mv__ttl__sub__2 {
        font-size: 12px;
        font-size: 3.2vw
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__sub__2 {
        font-size: 12px;
        font-size: .9vw
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__sub__2 {
        font-size: .9516837482vw
    }
}

.throughTheRain .mv__ttl__sub__2--1 {
    margin-top: 6%
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__sub__2--1 {
        margin-top: 4%
    }
}

.throughTheRain .mv__ttl__sub__2--2 {
    margin-top: 3%
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__sub__2--2 {
        margin-top: 2.5%
    }
}

@media screen and (max-width: 768px) {
    .throughTheRain .mv__ttl__sub__small {
        font-size: 11px;
        font-size: 2.9vw
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__sub__small {
        font-size: 11px;
        font-size: .8vw
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__sub__small {
        font-size: .8052708638vw
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__sub__small-pc {
        font-size: .8052708638vw
    }
}

@media screen and (max-width: 768px) {
    .throughTheRain .mv__ttl__sub__text-margin {
        padding-left: 4.5333333333vw
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__sub__text-margin {
        padding-left: 1.317715959vw
    }
}

@media screen and (max-width: 768px) {
    .throughTheRain .mv__ttl__sub__text-margin-l {
        padding-right: 2.6666666667vw
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .mv__ttl__sub__text-margin-l {
        padding-right: .7320644217vw
    }
}

.throughTheRain .menu {
    z-index: 99;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    opacity: 0;
    translate: 0 5px;
    transition: opacity .5s ease, translate .5s ease;
    pointer-events: none
}

@media screen and (min-width: 769px) {
    .throughTheRain .menu {
        padding: 0 50px
    }
}

.throughTheRain .menu.has-sticky.active {
    opacity: 1;
    translate: 0 0px;
    pointer-events: auto
}

.throughTheRain .menu__list {
    display: flex;
    justify-content: center;
    width: 100%
}

.throughTheRain .menu__list>li {
    position: relative
}

.throughTheRain .menu__list>li .menu__list__link {
    padding: 26px 0 24px
}

@media screen and (max-width: 768px) {
    .throughTheRain .menu__list>li .menu__list__link {
        padding: 29px 0 27px
    }
}

@media screen and (max-width: 768px) {
    .throughTheRain .menu__list>li:not(:last-child) {
        margin-right: 16px
    }
}

.throughTheRain .menu__list>li:not(:last-child) {
    margin-right: 15px;
    padding-right: 15px
}

.throughTheRain .menu__list>li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -40%;
    width: 1px;
    height: 10px;
    background-color: #595757
}

.throughTheRain .menu__list__link {
    color: #595757;
    height: 100%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0;
    opacity: 1;
    transition: opacity .3s ease
}

@media screen and (min-width: 769px) {
    .throughTheRain .menu__list__link {
        font-size: 14px
    }
}

.throughTheRain .menu__list__link:hover {
    opacity: .7
}

.throughTheRain .intro {
    color: #fff;
    position: relative;
    padding: 60px 20px 120px;
    text-shadow: 0px 0px 4px rgb(39 70 125 / 42%);
}

@media screen and (min-width: 769px) {
    .throughTheRain .intro {
        padding: 100px 20px 140px
    }
}

.throughTheRain .intro.has-animation .intro__head,
.throughTheRain .intro.has-animation .intro__middle,
.throughTheRain .intro.has-animation .intro__bottom {
    opacity: 0;
    translate: 0 15px;
    transition: opacity 2s ease, translate .8s ease, filter 1.2s ease
}

.throughTheRain .intro.has-animation.is-animated .intro__head,
.throughTheRain .intro.has-animation.is-animated .intro__middle,
.throughTheRain .intro.has-animation.is-animated .intro__bottom {
    opacity: 1;
    translate: 0 0px;
}

.throughTheRain .intro.has-animation.is-animated .intro__middle {
    transition-delay: .3s
}

.throughTheRain .intro.has-animation.is-animated .intro__bottom {
    transition-delay: .6s
}

.throughTheRain .intro__inner {
    z-index: 9;
    position: relative;
    text-align: center
}

@media screen and (min-width: 769px) {
    .throughTheRain .intro__inner {
        max-width: 700px;
        margin: auto
    }
}

.throughTheRain .intro__head {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 20px
}

@media screen and (min-width: 769px) {
    .throughTheRain .intro__head {
        font-size: 20px;
        margin-bottom: 20px
    }
}

.throughTheRain .intro__middle {
    font-size: 15px;
    text-align: center;
    line-height: 1;
    letter-spacing: .06em;
    margin-bottom: 30px
}

@media screen and (min-width: 769px) {
    .throughTheRain .intro__middle {
        font-size: 15px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .intro__middle {
        margin-bottom: 40px
    }
}

.throughTheRain .intro__bottom {
    letter-spacing: 0
}

.throughTheRain .intro__bottom p {
    font-size: 13px;
    letter-spacing: 0em;
    line-height: 2;
    white-space: nowrap
}

@media screen and (min-width: 769px) {
    .throughTheRain .intro__bottom p {
        font-size: 14px
    }
}

.throughTheRain .intro__bottom p.intro__bottom__subTtl {
    font-size: 14px
}

.throughTheRain .intro__bottom p.intro__bottom__lead {
    font-size: 11px
}

.throughTheRain .intro__bottom>p.has-margin-b {
    margin-bottom: 30px
}

.throughTheRain .intro__bottom__sp-has-toggle {
    height: 0;
    overflow: hidden;
    transition: height .6s ease
}

.throughTheRain .intro__bottom__sp-has-toggle>p {
    padding-bottom: 30px
}

.throughTheRain .intro__bottom__sp-has-toggle>p:last-child {
    padding-bottom: 0
}

.throughTheRain .intro__bottom__sp-has-toggle>p.intro__top__has-m30 {
    padding-top: 30px
}

.throughTheRain .intro__bottom__sp-has-toggle>p.intro__bottom__has-m40 {
    padding-bottom: 40px
}

.throughTheRain .intro__bottom__sp-has-toggle>p.intro__bottom__subTtl {
    padding-top: 40px;
    padding-bottom: 20px;
    border-top: 1px solid #fff;
    line-height: 1
}

@media screen and (min-width: 769px) {
    .throughTheRain .intro__bottom__sp-has-toggle>p.intro__bottom__subTtl {
        font-size: 15px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .intro__bottom__sp-has-toggle>p.intro__bottom__lead {
        font-size: 12px
    }
}

/* --- フィルター --- */

.throughTheRain .intro__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0f172a !important; /* 💡1. 土台の背景を敷く */
}

.throughTheRain .intro__bg img {
    width: 100%;
    height: auto;
    opacity: 0.70 !important;
}

@media screen and (min-width: 769px)and (max-width: 1000px) {
    .throughTheRain .intro__bg img {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: top center;
        object-position: top center
    }
.throughTheRain .parallax-overlay__ttl {
    font-size: 14px;}
}

.throughTheRain .intro__opener {
    z-index: 9;
    position: absolute;
    bottom: -50px;
    left: 50%;
    translate: -50% 0;
    line-height: 1;
    text-align: center
}

.throughTheRain .intro__opener.active .intro__opener__text {
    transition: opacity .3s ease
}

.throughTheRain .intro__opener.active .intro__opener__text--open {
    opacity: 0
}

.throughTheRain .intro__opener.active .intro__opener__text--close {
    opacity: 1
}

.throughTheRain .intro__opener__text {
    display: inline-block;
    white-space: nowrap;
    text-decoration: underline
}

.throughTheRain .intro__opener__text__icon {
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%
}

.throughTheRain .intro__opener__text--open {
    opacity: 1;
    position: relative
}

.throughTheRain .intro__opener__text--open .intro__opener__text__icon {
    width: 10px;
    left: -13px
}

.throughTheRain .intro__opener__text--close {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    opacity: 0
}

.throughTheRain .intro__opener__text--close .intro__opener__text__icon {
    width: 9px;
    left: -13px
}

.throughTheRain .looks {
    position: relative;
    background: linear-gradient(to bottom, #646164 0%, #9C9C9C 100%);
    color: #fff
}

.throughTheRain .looks.has-animation .look__thumb {
    opacity: 0;
    translate: 0 10px;
    transition: opacity 2s ease, translate .8s ease
}

.throughTheRain .looks.has-animation.is-animated .look__thumb {
    opacity: 1;
    translate: 0 0px
}

.throughTheRain .looks__bg {
    position: absolute;
    width: 100%;
    height: 100%
}

.throughTheRain .looks__bg>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

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

@media screen and (min-width: 769px) {
    .throughTheRain .looks__header {
        color: #231815;
        margin-bottom: 50px
    }
}

.throughTheRain .looks__header__ttl {
    font-size: 20px;
    letter-spacing: .1em;
    line-height: 1;
    margin-bottom: 20px
}

@media screen and (min-width: 769px) {
    .throughTheRain .looks__header__ttl {
        margin-bottom: 30px
    }
}

.throughTheRain .looks__header__lead {
    font-size: 16px
}

@media screen and (min-width: 769px) {
    .throughTheRain .looks__header__lead {
        font-size: 18px;
        line-height: 1.7;
        letter-spacing: .1em
    }
}

@media screen and (max-width: 768px) {
    .throughTheRain .looks__carousel {
        overflow: hidden
    }
}

.throughTheRain .looks__carousel__container {
    display: flex
}

@media screen and (min-width: 769px) {
    .throughTheRain .looks__carousel__container {
        justify-content: space-between;
        max-width: 975px;
        margin: auto;
        padding: 0 20px
    }
}

@media screen and (max-width: 768px) {
    .throughTheRain .looks__carousel__slide {
        flex: 0 0 100%;
        min-width: 0
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .looks__carousel__slide {
        width: 45.5%
    }
}

.throughTheRain .looks__button {
    z-index: 10;
    position: absolute;
    top: 0;
    width: 30px;
    height: 40px;
    background-color: #231815;
    line-height: 1;
    font-size: 0
}

.throughTheRain .looks__button img {
    width: 7px
}

.throughTheRain .looks__button--prev {
    left: 0
}

.throughTheRain .looks__button--next {
    right: 0
}

@media screen and (min-width: 769px) {
    .throughTheRain .looks__button {
        display: none
    }
}

.throughTheRain .looks__container {
    z-index: 1;
    position: relative;
    padding: 60px 0
}

@media screen and (min-width: 769px) {
    .throughTheRain .looks__container {
        padding: 100px 0
    }
}

.throughTheRain .look {
    display: flex;
    flex-wrap: wrap;
    color: #231815
}

.throughTheRain .look>* {
    width: 100%
}

@media screen and (max-width: 768px) {
    .throughTheRain .look {
        padding: 0 20px
    }
}

.throughTheRain .look__header {
    margin-bottom: 25px
}

.throughTheRain .look__header>h3 {
    text-align: center;
    font-size: 15px;
    letter-spacing: .1em;
    margin-bottom: 10px;
    line-height: 1
}

.throughTheRain .look__header>p {
    font-size: 13px;
    letter-spacing: .1em;
    display: flex;
    justify-content: center
}

@media screen and (min-width: 769px) {
    .throughTheRain .look__header>p {
        font-size: 14px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .look__header {
        order: 1;
        margin-bottom: 20px
    }
}

.throughTheRain .look__thumb {
    font-size: 0;
    line-height: 1;
    margin-bottom: 20px
}

@media screen and (min-width: 769px) {
    .throughTheRain .look__thumb {
        order: 0;
        margin-bottom: 25px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .look__info {
        order: 2
    }
}

.throughTheRain .look__info__ttl {
    text-align: center;
    font-size: 12px;
    letter-spacing: .1em;
    line-height: 1;
    margin-bottom: 15px
}

@media screen and (min-width: 769px) {
    .throughTheRain .look__info__ttl {
        margin-bottom: 20px
    }
}

.throughTheRain .look__info__list-container {
    display: flex;
    justify-content: center
}

.throughTheRain .look__info__item {
    display: flex;
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.4
}

@media screen and (max-width: 768px) {
    .throughTheRain .look__info__item {
        line-height: 1.5
    }
}

.throughTheRain .look__info__item:not(:last-child) {
    margin-bottom: 15px
}

@media screen and (max-width: 768px) {
    .throughTheRain .look__info__item:not(:last-child) {
        margin-bottom: 10px
    }
}

.throughTheRain .look__info__item dt {
    width: 94px
}

.throughTheRain .look__info__item dd {
    width: calc(100% - 94px)
}

.throughTheRain .look__info__item dd a {
    text-decoration: underline
}

@media screen and (min-width: 769px) {
    .throughTheRain .look__info__item dd a:hover {
        text-decoration: none
    }
}

.throughTheRain .page-in-link {
    display: flex;
    justify-content: center;
    padding: 40px 0 60px
}

@media screen and (min-width: 769px) {
    .throughTheRain .page-in-link {
        padding: 100px 0
    }
}

.throughTheRain .page-in-link>li:not(:last-child) {
    position: relative
}

@media screen and (max-width: 768px) {
    .throughTheRain .page-in-link>li:not(:last-child) {
        padding-right: 55px;
        margin-right: 44px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .page-in-link>li:not(:last-child) {
        margin-right: 100px
    }
}

.throughTheRain .page-in-link>li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: #231815
}

@media screen and (min-width: 769px) {
    .throughTheRain .page-in-link>li:not(:last-child)::after {
        display: none
    }
}

.throughTheRain .page-in-link__item {
    text-align: center;
    line-height: 1
}

@media screen and (min-width: 769px) {
    .throughTheRain .page-in-link__item {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #231815;
        padding-bottom: 10px;
        padding-left: 45px
    }

    .throughTheRain .page-in-link__item .page-in-link__item__arrow {
        transition: translate .5s ease-in-out;
        translate: 0 0
    }

    .throughTheRain .page-in-link__item:hover .page-in-link__item__arrow {
        translate: 0 8px
    }
}

.throughTheRain .page-in-link__item__ttl {
    font-size: 14px;
    line-height: 1
}

@media screen and (max-width: 768px) {
    .throughTheRain .page-in-link__item__ttl {
        margin-bottom: 5px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .page-in-link__item__ttl {
        font-size: 17px;
        margin-right: 10px
    }
}

.throughTheRain .page-in-link__item__img {
    width: 70px
}

@media screen and (max-width: 768px) {
    .throughTheRain .page-in-link__item__img {
        margin-bottom: 15px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .page-in-link__item__img {
        margin-right: 30px
    }
}

.throughTheRain .page-in-link__item__img--2 {
    position: relative;
    right: -9px
}

.throughTheRain .page-in-link__item__arrow {
    width: 14px;
    margin: auto;
    display: block
}

.throughTheRain .item-container {
    z-index: 1;
    position: relative;
    background-color: #fff
}

.throughTheRain .item-container--1 {
    margin-bottom: 60px
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-container--1 {
        margin-bottom: 100px
    }
}

.throughTheRain .item-container__parallax {
    overflow: hidden;
    height: 150px;
    position: relative;
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-container__parallax {
        height: 200px;
    }
}

.throughTheRain .item-container__parallax__img {
    position: absolute;
    top: -50px;
    left: 0
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-container__parallax__img {
        top: -80px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-section {
        max-width: 965px;
        padding: 80px 20px 0;
        margin: auto
    }
}

.throughTheRain .item-ttl {
    text-align: center;
    font-size: 18px;
    letter-spacing: .08em;
    line-height: 1;
    margin-bottom: 40px
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-ttl {
        margin-bottom: 80px
    }
}

.throughTheRain .item-ttl--mb30 {
    margin-bottom: 30px
}

.throughTheRain .item-lead {
    font-size: 13px;
    text-align: center;
    margin-bottom: 30px
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-lead {
        font-size: 14px;
        margin-bottom: 60px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-layout {
        display: flex;
        justify-content: space-around;
        align-items: center
    }
}

.throughTheRain .item-layout .item-thumb {
    opacity: 0;
    translate: 0 10px;
    transition: opacity 2s ease, translate .8s ease
}

.throughTheRain .item-layout.is-animated .item-thumb {
    opacity: 1;
    translate: 0 0px
}

.throughTheRain .item-layout.is-animated .item-thumb__1 {
    animation: animation_fade_lineup 8s infinite
}

.throughTheRain .item-layout.is-animated .item-thumb__2 {
    animation: animation_fade_lineup 8s infinite;
    animation-delay: 4s;
}

/* キーフレームの％を調整して、フェード時間を長く（じわっと）する */
@keyframes animation_fade_lineup {
    0% {
        opacity: 0;
    }
    25% { /* 2秒かけて、じわ〜っと優しくフェードイン */
        opacity: 1;
    }
    50% { /* 2秒間、画像をしっかり表示キープ */
        opacity: 1;
    }
    75% { /* 2秒かけて、じわ〜っと滑らかにフェードアウト */
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-layout--pc-reverce .item-thumb {
        order: 1
    }

    .throughTheRain .item-layout--pc-reverce .item-info {
        order: 0
    }
}

.throughTheRain .item-layout--has-margin-b {
    margin-bottom: 40px
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-layout--has-margin-b {
        margin-bottom: 100px
    }
}

.throughTheRain .item-thumb {
    font-size: 0;
    line-height: 1;
    overflow: hidden;
    display: block;
    position: relative
}

@media screen and (max-width: 768px) {
    .throughTheRain .item-thumb {
        width: calc(100% - 40px);
        margin: 0 auto 20px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-thumb {
        width: 400px
    }
}

.throughTheRain .item-thumb__2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0
}

@media screen and (max-width: 768px) {
    .throughTheRain .item-info {
        padding: 0 20px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-info {
        max-width: 470px;
        padding-left: 15px
    }
}

.throughTheRain .item-info__subTtl {
    font-size: 16px;
    margin-bottom: 30px
}

.throughTheRain .item-info__lead {
    font-size: 14px;
    margin-bottom: 20px;
    letter-spacing: .03em
}

/* .throughTheRain .item-info__header {
    margin-bottom: 30px
} */

.throughTheRain .item-info__header__tag {
    border: 1px solid #221815;
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    padding: 5px 10px;
    margin-bottom: 10px
}

.throughTheRain .item-info__header__ttl {
    font-size: 15px;
    letter-spacing: .02em;
    margin-bottom: 10px
}

.throughTheRain .item-info__header__price {
    font-size: 12px
    margin-bottom: 10px;
}

.throughTheRain .item-info__header__price--mb10 {
    margin-bottom: 10px
}

.throughTheRain .item-catch {
    font-feature-settings: "palt";
    letter-spacing: .07em
}

.throughTheRain .item-catch--1 {
    font-size: 16px;
    margin-bottom: 20px
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-catch--1 {
        margin-bottom: 30px
    }
}

.throughTheRain .item-catch--2 {
    font-size: 16px;
    margin-bottom: 30px
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-catch--2 {
        font-size: 16px
    }
}

.throughTheRain .item-header {
    margin-bottom: 30px
}

.throughTheRain .item-header__name {
    font-size: 15px;
    line-height: 1;
    margin-bottom: 15px;
    letter-spacing: .03em
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-header__name {
        margin-bottom: 10px
    }
}

.throughTheRain .item-header__info {
    font-size: 12px
}

.throughTheRain .item-pallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px
}

.throughTheRain .item-pallet__img {
    width: 54px;
    font-size: 0;
    line-height: 1
}

.throughTheRain .item-pallet__list {
    width: calc(100% - 55px);
    padding-left: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.throughTheRain .item-pallet__list__item {
    font-size: 10px;
    letter-spacing: 0;
    width: 50%
}

.throughTheRain .item-pallet__list__item:not(:nth-child(n+3)) {
    margin-bottom: 15px
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-pallet__list__item:not(:nth-child(n+3)) {
        margin-bottom: 10px
    }
}

.throughTheRain .item-pallet__list__item:nth-child(2n) {
    padding-left: 10px
}

.throughTheRain .item-colors {
    margin-top: 20px
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-colors {
        margin-top: 30px
    }
}

.throughTheRain .item-colors__color {
    display: flex;
    align-items: center
}

.throughTheRain .item-colors__color:not(:last-child) {
    margin-bottom: 10px
}

.throughTheRain .item-colors__color>img {
    width: 30px
}

.throughTheRain .item-colors__color>p {
    width: calc(100% - 30px);
    padding-left: 15px;
    font-size: 11px
}

.throughTheRain .item-select {
    margin-bottom: 30px
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-select__item {
        display: flex
    }
}

.throughTheRain .item-select__item:not(:last-child) {
    margin-bottom: 20px
}

.throughTheRain .item-select__item__ttl {
    font-size: 12px
}

@media screen and (max-width: 768px) {
    .throughTheRain .item-select__item__ttl {
        margin-bottom: 10px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-select__item__ttl {
        width: 165px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-select__item__info {
        padding-left: 10px;
        width: calc(100% - 165px)
    }
}

.throughTheRain .item-select__label {
    font-size: 11px;
    color: #fff;
    background-color: #8d8d8d;
    padding: 5px 10px;
    line-height: 1
}

.throughTheRain .item-select__label>span {
    position: relative;
    top: -1px
}

.throughTheRain .item-select__price {
    font-size: 12px;
    line-height: 1;
    margin-left: 15px
}

.throughTheRain .item-select__lead {
    margin-top: 10px;
    letter-spacing: 0
}

.throughTheRain .item-box {
    margin-top: 30px;
    border-top: 1px solid #231815;
    border-bottom: 1px solid #231815;
    padding: 15px 0
}

@media screen and (min-width: 769px) {
    .throughTheRain .item-box {
        margin-top: 40px
    }
}

.throughTheRain .item-box__ttl {
    font-size: 13px;
    line-height: 1;
    margin-bottom: 10px
}

.throughTheRain .item-box__lead {
    font-size: 12px;
    letter-spacing: .03em
}

.throughTheRain .e-sents {
    margin-bottom: 60px
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents {
        margin-bottom: 100px
    }
}

.throughTheRain .e-sents__inner {
    padding: 0 20px
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents__inner {
        max-width: 1000px;
        margin: auto
    }
}

.throughTheRain .e-sents__ttl {
    font-size: 15px;
    text-align: center;
    line-height: 1;
    background-color: #f6f6f6;
    padding: 10px 0;
    margin-bottom: 20px
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents__ttl {
        margin-bottom: 30px
    }
}

.throughTheRain .e-sents__lead {
    font-size: 13px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 20px
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents__lead {
        font-size: 14px;
        margin-bottom: 50px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents__devided {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 60px
    }
}

@media screen and (max-width: 768px) {
    .throughTheRain .e-sents__devided__left {
        border-bottom: 1px solid #000;
        padding-bottom: 30px;
        margin-bottom: 20px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents__devided__left {
        width: 307px;
        border-right: 1px solid #231815;
        padding-right: 40px
    }
}

@media screen and (max-width: 768px) {
    .throughTheRain .e-sents__devided__right {
        border-bottom: 1px solid #000;
        padding-bottom: 20px;
        margin-bottom: 30px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents__devided__right {
        width: 340px;
        padding-left: 40px
    }
}

.throughTheRain .e-sents__panels {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

@media screen and (max-width: 768px) {
    .throughTheRain .e-sents__panels {
        padding: 0 15px
    }
}

.throughTheRain .e-sents__panels>li {
    width: 50%;
    text-align: center
}

.throughTheRain .e-sents__panels>li:not(:nth-child(n+3)) {
    margin-bottom: 20px
}

.throughTheRain .e-sents__panels img {
    width: 100px
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents__panels img {
        width: 90px
    }
}

.throughTheRain .e-sents__panels__name {
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 0;
    line-height: 1.5
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents__panels__name {
        font-size: 10px
    }
}

.throughTheRain .e-sents__panels__name__small {
    font-size: 9px
}

.throughTheRain .e-sents__reaf__img {
    line-height: 1;
    font-size: 0;
    margin-bottom: 20px
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents__reaf__img {
        max-width: 218px;
        margin: 0 auto 20px
    }
}

.throughTheRain .e-sents__reaf__ttl {
    font-size: 14px;
    line-height: 1;
    margin-bottom: 20px;
    text-align: center
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents__reaf__ttl {
        font-size: 13px;
        margin-bottom: 10px
    }
}

.throughTheRain .e-sents__reaf__lead {
    font-size: 13px
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents__reaf__lead {
        font-size: 12px
    }
}

.throughTheRain .e-sents__banner {
    display: block;
    line-height: 1;
    font-size: 0
}

@media screen and (min-width: 769px) {
    .throughTheRain .e-sents__banner {
        max-width: 600px;
        margin: auto;
        opacity: 1;
        transition: opacity .3s ease
    }

    .throughTheRain .e-sents__banner:hover {
        opacity: .7
    }
}

.throughTheRain .video {
    position: relative;
    font-size: 0;
    margin-bottom: 60px;
    overflow: hidden
}

@media screen and (min-width: 769px) {
    .throughTheRain .video {
        max-width: 1040px;
        padding: 0 20px;
        margin: 0 auto 100px
    }
}

.throughTheRain .video__display {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9
}

.throughTheRain .btn {
    display: block;
    text-align: center;
    position: relative;
    background-color: #4a4a4a;
    line-height: 1.4;
    color: #fff;
    letter-spacing: .07em;
    font-size: 14px;
    padding: 15px 3px;
    border: 1px solid #fff
}

@media screen and (min-width: 769px) {
    .throughTheRain .btn {
        max-width: 300px;
        transition: opacity .3s ease;
        opacity: 1
    }

    .throughTheRain .btn:hover {
        opacity: .7
    }

    .throughTheRain .btn:hover .btn__icon {
        right: 8px
    }
}

.throughTheRain .btn__inner {
    z-index: 10;
    position: relative;
    width: 100%;
    display: block
}

.throughTheRain .btn__icon {
    position: absolute;
    top: 50%;
    right: 15px;
    height: 8px;
    translate: 0 -50%
}

@media screen and (max-width: 768px) {
    .throughTheRain .btn__icon {
        right: 14px;
        height: 6px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .btn__icon {
        transition: right .5s ease
    }
}

.throughTheRain .btn--transparent {
    background-color: rgba(0, 0, 0, 0)
}

.throughTheRain .link-btn {
    display: block;
    text-align: center;
    position: relative;
    background-color: #5F6075;
    line-height: 1;
    color: #fff;
    letter-spacing: .07em;
    font-size: 14px;
    padding: 15px 3px 14px
}

@media screen and (min-width: 769px) {
    .throughTheRain .link-btn {
        width: 100%;
        transition: opacity .3s ease;
        opacity: 1
    }

    .throughTheRain .link-btn:hover {
        opacity: .7
    }

    .throughTheRain .link-btn:hover .link-btn__icon {
        right: 8px
    }
}

.throughTheRain .link-btn__inner {
    z-index: 10;
    position: relative;
    width: 100%;
    display: block
}

.throughTheRain .link-btn__icon {
    position: absolute;
    top: 50%;
    right: 15px;
    height: 8px;
    translate: 0 -50%
}

@media screen and (max-width: 768px) {
    .throughTheRain .link-btn__icon {
        right: 14px;
        height: 6px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .link-btn__icon {
        transition: right .5s ease
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .link-btn--wide {
        max-width: 285px;
        margin: auto
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .link-btn--item {
        max-width: 300px
    }
}

.throughTheRain .link-btn--transparent {
    background-color: rgba(0, 0, 0, 0);
    border: #231815 1px solid;
    color: #231815
}

.throughTheRain .link-btn--transparent .link-btn__icon path {
    fill: #231815
}

.throughTheRain .link-btn--beige {
    color: #fff;
    background-color: #9992A0;
    max-width: 300px;
}

.throughTheRain .link-btn--beige .link-btn__icon path {
    fill: #fff
}

.throughTheRain .link-btn--gray {
    color: #fff;
    background-color: #5f5f5f;
    max-width: 300px;
    margin: 0 auto;
}

.throughTheRain .link-btn--beige .link-btn__icon path {
    fill: #fff
}


.throughTheRain .event {
    z-index: 1;
    position: relative
}

.throughTheRain .event--bg-brown {
    background-color: #F8F8F8
}

@media screen and (min-width: 769px) {
    .throughTheRain .event--reverce .event__box .event__box__img {
        order: 1
    }

    .throughTheRain .event--reverce .event__box .event__box__text {
        order: 0
    }
}

.throughTheRain .event.has-animation .event__box__img {
    opacity: 0;
    translate: 0 10px;
    transition: opacity 2s ease, translate .8s ease
}

.throughTheRain .event.has-animation.is-animated .event__box__img {
    opacity: 1;
    translate: 0 0px;
    margin-right: 50px;
}

.throughTheRain .event__inner {
    padding: 60px 20px
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__inner {
        padding: 40px 0 120px;
        max-width: 100%;
        margin: auto
    }
}

.throughTheRain .event__ttl-box {
    margin-bottom: 30px
}

.throughTheRain .event__ttl {
    font-size: 20px;
    line-height: 1;
    letter-spacing: .08em;
    text-align: center;
    margin-bottom: 20px
}

.throughTheRain .event__lead {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.6em;
}

@media screen and (max-width: 768px) {
    .throughTheRain .event__ttl--mb20 {
        margin-bottom: 20px
    }
}

.throughTheRain .event__ttl-ja {
    font-size: 13px;
    line-height: 1.5;
    text-align: center
}

.throughTheRain .event__desc {
    font-size: 13px;
    margin-bottom: 30px;
    text-align: center
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__desc {
        margin-bottom: 60px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__box {
        display: flex;
        align-items: center;
        justify-content: space-between
    }
}

.throughTheRain .event__box__img {
    line-height: 1;
    font-size: 0
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__box__img {
        width: 360px
    }
}

@media screen and (max-width: 768px) {
    .throughTheRain .event__box__img {
        margin-bottom: 30px
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__box__text {
        width: 360px
    }
}

.throughTheRain .event__box__text__ttl {
    font-size: 16px;
    letter-spacing: .09em;
    line-height: 1.5;
    margin-bottom: 15px
}

.throughTheRain .event__box__text__sub {
    margin-bottom: 20px;
    line-height: 1
}

.throughTheRain .event__box__text__sub__1 {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.4em;
}

.throughTheRain .event__box__text__sub__2 {
    font-size: 14px;
    letter-spacing: .03em
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__box__text__sub__2 {
        font-size: 12px
    }
}

.throughTheRain .event__box__text__date {
    font-size: 13px;
    line-height: 1;
    margin-bottom: 30px
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__box__text__date {
        font-size: 12px
    }
}

.throughTheRain .event__box__text__lead {
    font-size: 13px;
    letter-spacing: .07em;
    line-height: 1.7;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #231815
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__box__text__lead {
        font-size: 12px
    }
}

.throughTheRain .event__box__text__lead--border-none {
    padding-bottom: 0px;
    border-bottom-width: 0px
}

.throughTheRain .event__box__text__lead--mb10 {
    margin-bottom: 10px
}

.throughTheRain .event__box__text__link {
    display: inline-block;
    position: relative;
    line-height: 1.2;
    position: relative;
    font-size: 12px
}

.throughTheRain .event__box__text__link::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #231815
}

.throughTheRain .event__box__text__link svg {
    position: absolute;
    top: 50%;
    right: -14px;
    width: 6px;
    height: 8px;
    translate: 0 -50%
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__box__text__link svg {
        transition: right .3s ease
    }

    .throughTheRain .event__box__text__link:hover svg {
        right: -17px
    }
}

.throughTheRain .event__box__text__note {
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .07em;
    margin-bottom: 30px
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__box__text__note {
        font-size: 11px
    }
}

.throughTheRain .event__box__text__note--small {
    font-size: 11px
}

.throughTheRain .event__with-border {
    border-left: 3px solid #4b4b4b;
    padding-left: 10px;
    line-height: 1.1;
    margin-bottom: 15px
}

.throughTheRain .event__with-border__sub {
    font-size: 13px;
    margin-bottom: 10px
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__with-border__sub {
        font-size: 12px
    }
}

.throughTheRain .event__with-border__ttl {
    font-size: 16px
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__with-border__ttl {
        font-size: 14px
    }
}

.throughTheRain .event__text-link {
    font-size: 13px;
    display: inline-block;
    border-bottom: 1px solid #231815;
    position: relative
}

@media screen and (min-width: 769px) {
    .throughTheRain .event__text-link {
        font-size: 12px;
        transition: opacity .3s ease;
        opacity: 1
    }

    .throughTheRain .event__text-link .event__text-link__icon {
        translate: 0 0;
        transition: translate .3s ease
    }

    .throughTheRain .event__text-link:hover {
        opacity: .7
    }

    .throughTheRain .event__text-link:hover .event__text-link__icon {
        translate: 3px 0
    }
}

.throughTheRain .event__text-link__icon {
    position: absolute;
    top: 11%;
    right: -20px;
    width: 6px;
    line-height: 1;
    font-size: 0
}

.throughTheRain .banner-area {
    z-index: 1;
    position: relative;
    background-color: #fff;
    font-size: 0;
    padding: 60px 20px
}

@media screen and (min-width: 769px) {
    .throughTheRain .banner-area {
        padding: 100px 20px
    }
}

.throughTheRain .banner-area .banner {
    display: block
}

@media screen and (min-width: 769px) {
    .throughTheRain .banner-area .banner {
        width: 600px;
        margin: auto;
        transition: opacity .3s ease;
        opacity: 1
    }

    .throughTheRain .banner-area .banner:hover {
        opacity: .7
    }
}

.throughTheRain .banner-area .banner:not(:last-child) {
    margin-bottom: 30px
}

@media screen and (max-width: 768px) {
    .throughTheRain .banner-area .banner:not(:last-child) {
        margin-bottom: 10px
    }
}

.font-en {
    font-family: "akzidenz-grotesk", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", arial, YuGothic, 游ゴシック, Meiryo, メイリオ, sans-serif
}

@media screen and (max-width: 768px) {
    .throughTheRain .is-pc {
        display: none !important
    }
}

@media screen and (min-width: 769px) {
    .throughTheRain .is-sp {
        display: none !important
    }
}

.throughTheRain .text-space-zero {
    letter-spacing: -0.1em
}

/* --- パララックス上のテキスト重ねる設定 --- */

/* 既存のパララックスの高さを、文字が収まるように少し拡張 */
.throughTheRain .item-container__parallax--2 {
    position: relative;
    height: 220px !important; /* SP時：150pxから220pxに広げて文字枠を確保 */
}

/* 画像の上に被せる透明なレイヤー */
.throughTheRain .parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* 上下中央揃え */
    justify-content: center;
    color: #fff; /* 文字色（画像が白っぽい場合は #231815 に変えてください） */
    padding: 25px 20px;
    box-sizing: border-box;
    z-index: 2;
}

/* テキストのインナー（SPは標準で1カラム） */
.throughTheRain .parallax-overlay__inner {
    width: 100%;
    max-width: 965px; /* 他のコンテンツの横幅と統一 */
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* スマホは1カラム */
    gap: 12px; /* 上下の文字の隙間 */
}

/* 左側のタイトル（Scenes & Senses） */
.throughTheRain .parallax-overlay__ttl {
    font-size: 14px;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

/* 右側：おすすめのシーン・マインド */
.throughTheRain .parallax-overlay__sub-ttl {
    font-size: 11px;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
    font-feature-settings: "palt";
}

/* 右側：本文テキスト */
.throughTheRain .parallax-overlay__txt {
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.04em;
}

/* ─── PC環境の設定（769px以上で2カラム化） ─── */
@media screen and (min-width: 769px) {
    .throughTheRain .parallax-overlay__inner {
        flex-direction: row; /* 横並び（2カラム）にする */
        justify-content: space-between;
        align-items: center;
        gap: 50px;
    }

    .throughTheRain .parallax-overlay__left {
        flex: 0 0 35%; /* 左側の横幅を35%に */
    }

    .throughTheRain .parallax-overlay__right {
        flex: 0 0 60%; /* 右側の横幅を60%に */
    }

    .throughTheRain .parallax-overlay__ttl {
        font-size: 20px;
        letter-spacing: .1em;
    }

    .throughTheRain .parallax-overlay__sub-ttl {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .throughTheRain .parallax-overlay__txt {
        font-size: 13px;
    }
}

/* --- イベント画像のフェード切り替え設定 --- */

/* 画像を重ねるためのコンテナ設定 */
.throughTheRain .event__box__img {
    position: relative;
    overflow: hidden; /* 画像がはみ出さないように */
}

/* 画像共通のスタイル */
.throughTheRain .event__box__img .event__img {
    display: block;
    width: 100%;
    height: auto;
}

/* 2枚目の画像の初期状態 */
.throughTheRain .event__box__img .event__img--2 {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- TOP画像と同じ切り替えアニメーション（12秒サイクル）を適用 --- */

/* スクロールして表示されたらアニメーション開始 */
.throughTheRain .event.is-animated .event__img--1 {
    animation: animation_fade_mv 12s infinite;
}

.throughTheRain .event.is-animated .event__img--2 {
    animation: animation_fade_mv 12s infinite;
    animation-delay: 6s; /* 全体の半分の秒数（12s / 2）遅らせる */
}

/* 以前調整した「ぼかしなし」のフェードアニメーション（全体12秒周期用） */
@keyframes animation_fade_mv {
    0% {
        opacity: 0;
    }
    10% { /* 開始から約1.2秒でパッと綺麗に表示完了 */
        opacity: 1;
    }
    60% { /* 7.2秒時点まで、画像をしっかりキープ */
        opacity: 1;
    }
    70% { /* 約1.2秒かけてスッとフェードアウト */
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* ========================================================
   10mL / 30mL ボタンを綺麗に横並びにする設定
   ======================================================== */

/* ボタン2つを包む枠を横並び（flex）にする */
.throughTheRain .item-btn-flex {
    display: flex !important;
    flex-direction: row !important; /* 絶対に横並び */
    gap: 10px !important;           /* ボタン同士のすき間 */
    width: 100% !important;
    max-width: 300px !important;    /* ボタン2つを合わせた全体の最大幅 */
    margin: 20px 0 0 0 !important;  /* 上に少しすき間をあける */
}

/* 横並び枠の中にあるグレーボタンの設定 */
.throughTheRain .item-btn-flex .link-btn {
    flex: 1 !important;             /* 2つのボタンを50%ずつに均等割り */
    width: auto !important;         /* 元の「width: 100%」の設定をここでリセット！ */
}

/* スマホ（SP）のときだけボタン全体を中央に寄せる設定 */
@media screen and (max-width: 768px) {
    .throughTheRain .item-btn-flex {
        margin: 20px auto 0 auto !important;
    }
}

/* ========================================================
   商品紹介の発売日の上部に1000px幅の#CCCの線を引く
   ======================================================== */
.throughTheRain .item-ttl {
    border-top: 1px solid #CCC !important; /* 上側に#CCCの線を引くよ */
    max-width: 1000px !important;           /* PCでの線の最大幅を1000pxに制限 */
    width: 100% !important;
    margin-left: auto !important;           /* 線を中央に寄せる */
    margin-right: auto !important;          /* 線を中央に寄せる */
    padding-top: 40px !important;           /* 線から文字までのすき間（数値は好みで調整してね） */
    margin-top: 20px !important;            /* 上の画像やコンテンツからのすき間 */
}

/* ==========================================================================
   14. New Custom Components / Scences of mind
   ========================================================================== */

/* ─── 💻 PC環境設定（769px以上） ─── */
@media screen and (min-width: 769px) {
  .throughTheRain #scent-by-scene {
    background: #efefef;
    margin: 40px auto 0;
    padding: 40px 0 0;
    text-align: center;
  }
  .throughTheRain #scent-by-scene .event__ttl {
        font-size: 17px;
        letter-spacing: 0.08em;
        color: #333;
        margin-bottom: 5px;
        line-height: 1.6em;
  }
  .throughTheRain #scent-by-scene .event__box.scent-by-scene-v3 {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .throughTheRain #scent-by-scene .event__box__img.scent-grid-v3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 50px;
    width: 100%;
  }
  .throughTheRain #scent-by-scene .scent-card-v3 {
    position: relative;
  }
  .throughTheRain #scent-by-scene .scent-card-v3 .img-mono {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
  }
  .throughTheRain #scent-by-scene .scent-card-v3 .img-color {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
  }

  @keyframes scentRealColorLoopV3 {
    0% { opacity: 0; }
    12.5% { opacity: 1; }
    25% { opacity: 1; }
    37.5% { opacity: 0; }
    100% { opacity: 0; }
  }

  .throughTheRain #scent-by-scene.is-animated .scent-card-v3 .img-color {
    animation: scentRealColorLoopV3 16s ease infinite;
  }
  .throughTheRain #scent-by-scene.is-animated .scent-card-v3:nth-child(1) .img-color { animation-delay: 0s; }
  .throughTheRain #scent-by-scene.is-animated .scent-card-v3:nth-child(3) .img-color { animation-delay: 4s; }
  .throughTheRain #scent-by-scene.is-animated .scent-card-v3:nth-child(2) .img-color { animation-delay: 8s; }
  .throughTheRain #scent-by-scene.is-animated .scent-card-v3:nth-child(4) .img-color { animation-delay: 12s; }

  .throughTheRain #scent-by-scene .event__box__text.scent-meta-v3 {
    width: 100%;
    margin: 40px auto 0;
    text-align: center;
  }
  .throughTheRain #scent-by-scene .event__box__text__sub__1 {
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.08em;
    color: #333;
    margin-bottom: 20px;
  }
  .throughTheRain #scent-by-scene a.link-btn {
    display: inline-flex;
    margin: 0 auto;
  }
  .throughTheRain #scent-by-scene a.link-btn .link-btn__icon {
    position: relative;
    right: -60px;
    transition: right 0.3s ease;
  }
  .throughTheRain #scent-by-scene a.link-btn:hover .link-btn__icon {
    right: -64px;
  }
}

/* ─── 14-B. SUMMER GIFTセクション：商品紹介と100%完全同期（維持） ─── */
@media screen and (min-width: 769px) {
  .throughTheRain .event.summer-gift-layout .event__inner {
    max-width: 965px !important;
    padding: 100px 20px !important;
    margin: auto !important;
  }
  .throughTheRain .event.summer-gift-layout .event__box {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }
  .throughTheRain .event.summer-gift-layout .event__box__img {
    width: 400px !important;
    max-width: 400px !important;
    margin: 0 !important;
    float: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .throughTheRain .event.summer-gift-layout .event__box__text {
    max-width: 470px !important;
    width: 100% !important;
    padding-left: 15px !important;
    text-align: left !important;
    margin: 0 !important;
  }
}

/* ─── 📱 SP環境設定（768px以下） ─── */
@media screen and (max-width: 768px) {
  /* 全体のラッパー */
  .throughTheRain .sp-scene-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  
  /* 大画像枠 */
  .throughTheRain .sp-prlx-wrap-1 {
    width: 80%;
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin: 0 auto;
  }
  .throughTheRain .sp-prlx-img-1 {
    width: 100%;
    height: 130%; /* パララックスで動くための余白 */
    position: absolute;
    top: -15%;
    left: 0;
  }

  /* 小画像枠（枠線・影なし） */
  .throughTheRain .sp-prlx-wrap-2 {
    width: 42%;
    position: absolute;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    z-index: 2;
    bottom: -30px;
    right: -28px;
  }
  .throughTheRain .sp-prlx-img-2 {
    width: 100%;
    height: 130%;
    position: absolute;
    top: -15%;
    left: 0;
  }

  /* 画像の重ね合わせ */
  .throughTheRain .sp-prlx-img-1 img,
  .throughTheRain .sp-prlx-img-2 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation-duration: 16s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  /* キーフレームの割り当て */
  .throughTheRain .sp-kf-mono1 { animation-name: kfSpMono1; }
  .throughTheRain .sp-kf-col1  { animation-name: kfSpCol1; }
  .throughTheRain .sp-kf-img2  { animation-name: kfSpImg2; }
  .throughTheRain .sp-kf-img3  { animation-name: kfSpImg3; }
  .throughTheRain .sp-kf-img4  { animation-name: kfSpImg4; }

  /* アニメーションの定義 */
  @keyframes kfSpMono1 {
    0%, 25% { opacity: 1; }
    31.25%, 93.75% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes kfSpCol1 {
    0%, 6.25% { opacity: 0; }
    18.75%, 25% { opacity: 1; }
    31.25%, 100% { opacity: 0; }
  }
  @keyframes kfSpImg2 {
    0%, 18.75% { opacity: 0; }
    25%, 50% { opacity: 1; }
    56.25%, 100% { opacity: 0; }
  }
  @keyframes kfSpImg3 {
    0%, 43.75% { opacity: 0; }
    50%, 75% { opacity: 1; }
    81.25%, 100% { opacity: 0; }
  }
  @keyframes kfSpImg4 {
    0% { opacity: 1; }
    6.25%, 68.75% { opacity: 0; }
    75%, 100% { opacity: 1; }
  }

  /* SPテキスト・ボタン */
  .throughTheRain .scent-meta-sp-v3 {
    text-align: center;
    margin-top: 20px;
  }
  .throughTheRain .scent-meta-sp-v3 .event__box__text__sub__1 {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: #333;
  }
  .throughTheRain .scent-meta-sp-v3 a.link-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 15px 3px 14px;
    box-sizing: border-box;
    position: relative;
  }
  .throughTheRain .scent-meta-sp-v3 a.link-btn .link-btn__inner {
    display: block;
    width: 100%;
  }
  .throughTheRain .scent-meta-sp-v3 a.link-btn .link-btn__icon {
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
  }
}

/* ==========================================================================
   15. SP環境限定：メインビジュアル（TOP画像）の上にテキストを重ねる調整
   ========================================================================== */
@media screen and (max-width: 768px) {
  /* 1. 元々SP時に入っていた周りの余白（パディング）を消して、画像を画面いっぱいに広げます */
  .throughTheRain .mv {
    padding: 0 !important;
  }

  /* 2. 画像の枠（.mv__inner）を基準値にして重ね合わせる準備 */
  .throughTheRain .mv__inner {
    position: relative !important;
    width: 100% !important;
  }

  /* 3. テキスト配置 */
.throughTheRain .mv__ttl {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* 💡centerからflex-endに変えて、テキストを一番下に寄せるにょ！ */
    align-items: center !important;
    padding: 0 20px 20px 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    z-index: 10 !important;
}

  /* 4. 左右中央に並ぶように、テキストのレイアウトを調整 */
  .throughTheRain .mv__ttl__text--1 {
    text-align: center !important;
  }
  .throughTheRain .mv__ttl__sub p {
    justify-content: center !important; /* 発売日などの並びを中央に */
  }
  .throughTheRain .mv__ttl__text--1 {
    line-height: 1.3;
  }
    .throughTheRain .mv__ttl__sub {
        margin-top: 3.5%;
    }
  .throughTheRain .mv__ttl__sub__2--1 {
    margin-top: 2.2%;
}
}
/* ==========================================================================
   15. SP環境限定：メインビジュアル（TOP画像）の切り替えループを止めて1枚に固定
   ========================================================================== */
@media screen and (max-width: 768px) {
  
  /* 🚨 2枚目の画像（切り替わり後のカラー画像など）を完全に非表示にして、その場でのループを強制停止 */
  .throughTheRain .mv img:nth-child(2),
  .throughTheRain .mv__inner img:nth-child(2),
  .throughTheRain .mv__img--2,
  .throughTheRain .mv__bg--2 {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
  }

  /* 💡 1枚目の画像が確実に100%くっきり常時表示されるように固定し、アニメーションの動きをストップ */
  .throughTheRain .mv img:nth-child(1),
  .throughTheRain .mv__inner img:nth-child(1),
  .throughTheRain .mv__img--1,
  .throughTheRain .mv__bg--1 {
    opacity: 1 !important;
    display: block !important;
    animation: none !important; /* ループや切り替えの命令を完全に持ち込ませないお！ */
  }

  .throughTheRain .item-ttl {
    border-top: 0px !important}
.throughTheRain #scent-by-scene {
    margin: 0 auto !important;}
.throughTheRain .item-info__lead {
    font-size: 14px;
    margin: 10px 0 20px;}
.throughTheRain .event__box__text__lead {
    text-align: left;}
}

    .sp {
        display: none !important
    }
@media screen and (max-width: 768px) {
    .pc {
        display: none !important
    }
    .sp {
        display: block !important
    }
.throughTheRain .event.has-animation.is-animated .event__box__img {
    margin-right: 0;}
.throughTheRain .event__box__text__sub__1 {
    text-align: center;
        font-size: 13px;
        margin-bottom: 10px;
        line-height: 1.6em;
}
.throughTheRain .event__box__text__sub__2 {
    text-align: center;
}
.throughTheRain .link-btn--beige {
    margin: 0 auto;
}
.throughTheRain .event__box__text__sub {
    margin-bottom: 20px;
}
.throughTheRain .event__ttl{
    margin-bottom: 10px !important;
    font-size: 16px;
    line-height: 1.4em;}
.throughTheRain .item-layout--has-margin-b {
    margin-top: 60px;
}
.throughTheRain .item-container__parallax--2 {
    height: 160px !important;
}
.throughTheRain .event__ttl-box {
    margin-bottom: 0;
}
}
.font-small {    
    font-size: 12px !important;
    line-height: 1.8em;
    border-top: 1px solid #fff !important;
    padding-top: 25px !important;
    display: block;}

@media screen and (max-width: 768px) {

.font-small {    
    font-size: 11px !important;
}
}