/* ========================================
   リセット & ベーススタイル
   ======================================== */
@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap");
html {
    font-size: 62.5%;
}
body {
    font-family: "Jost", "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
}
img {
    width: 100%;

    vertical-align: bottom;
}

/* ========================================
   SPベースのスタイル（モバイルファースト）
   ======================================== */
.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;

    background-color: #BD1E06;
}

/* SPではサイドバーを非表示 */
.sidebar {
    display: none;
}

/* メインコンテンツ（SP用） */
.main-content {
    width: 100%;
}

/* フォントサイズをPC用にこぴーする。SP用に設定しなおす。 */
/* ==============================
    ヘッダー
============================== */
.header {
    position: relative;

    overflow: hidden;

    color: #FFFFFF;
}
.header .logo-text {
    position: absolute;
    z-index: 1;
    top: 2.9%;
    left: 0;

    font-size: 27.1vw;
    font-weight: 400;

    writing-mode: vertical-rl;
}
.header .logo-text h1 {

    font-family: "Alexandria", sans-serif;
    letter-spacing: 0.04em;

    line-height: 1;
    line-height: 0.85;
}
.header .logo-text h2 {
    padding-top: 0.5em;

    letter-spacing: 0.23em;

    font-size: 4.7vw;
    font-weight: 400;
}

.header p {
    /* width: 12em; */
    width: 13.5em;
    margin: 0 6.7% 1.5em auto;
    padding-top: 7.5%;

    font-size: 4vw;
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0.1em;
}

@media (min-width: 768px) {
    .header .logo-text {
        font-size: 10.1rem;
    }
    .header .logo-text h2 {
        font-size: 1.75rem;
    }
    .header p {
        font-size: 1.5rem;
    }
}
/* ==============================
    ヘッダーアニメーション
============================== */
/* グリッチエフェクト */
.animate-glitch {
    opacity: 0;
}

.animate-glitch.active {
    animation: glitch-appear 1.5s ease-out forwards;
}

.animate-glitch h1 span {
    position: relative;

    display: inline-block;
}

@keyframes glitch-appear {
    0% {
        transform: translateY(-20px);

        opacity: 0;
    }
    20% {
        transform: translateY(0);

        opacity: 1;
    }
    25% {
        transform: translateX(-2px);
    }
    30% {
        transform: translateX(2px);
    }
    35% {
        transform: translateX(-1px);
    }
    40% {
        transform: translateX(1px);
    }
    45% {
        transform: translateX(0);
    }
    50% {
        transform: skew(-1deg);
    }
    55% {
        transform: skew(1deg);
    }
    60% {
        transform: skew(0);
    }
    100% {
        transform: translateY(0);

        opacity: 1;
    }
}

.animate-glitch.active h1 span:nth-child(1) {
    animation: glitch-letter 1.5s ease-out 0.1s forwards;
}

.animate-glitch.active h1 span:nth-child(2) {
    animation: glitch-letter 1.5s ease-out 0.2s forwards;
}

.animate-glitch.active h1 span:nth-child(3) {
    animation: glitch-letter 1.5s ease-out 0.3s forwards;
}

.animate-glitch.active h1 span:nth-child(4) {
    animation: glitch-letter 1.5s ease-out 0.4s forwards;
}

.animate-glitch.active h1 span:nth-child(5) {
    animation: glitch-letter 1.5s ease-out 0.5s forwards;
}

@keyframes glitch-letter {
    0% {
        transform: translateY(-10px) scale(0.8);

        opacity: 0;
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    30% {
        transform: translateY(0) scale(1);

        opacity: 1;
        text-shadow: -2px 0 0 rgba(255, 0, 0, 0.5),
        2px 0 0 rgba(0, 255, 255, 0.5);
    }
    35% {
        transform: translateX(-1px);

        text-shadow: -1px 0 0 rgba(255, 0, 0, 0.3),
        1px 0 0 rgba(0, 255, 255, 0.3);
    }
    40% {
        transform: translateX(1px);
    }
    45% {
        transform: translateX(0);
    }
    100% {
        transform: translateY(0) scale(1);

        opacity: 1;
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* 右から左へのフェードイン */
.animate-fade-in-right {
    transform: translateX(50px);

    opacity: 0;
}

.animate-fade-in-right.active {
    animation: fade-in-right 1s ease-out 1.5s forwards;
}

@keyframes fade-in-right {
    0% {
        transform: translateX(50px);

        opacity: 0;
    }
    100% {
        transform: translateX(0);

        opacity: 1;
    }
}

/* 画像のフェードイン */
.animate-fade-in-right-image {
    transform: translateX(50px);

    opacity: 0;
}

.animate-fade-in-right-image.active {
    animation: fade-in-right-image 1s ease-out 2.5s forwards;
}

@keyframes fade-in-right-image {
    0% {
        transform: translateX(50px);

        opacity: 0;
    }
    100% {
        transform: translateX(0);

        opacity: 1;
    }
}

.animate-fade-in-right-delay {
    transform: translateX(50px);

    opacity: 0;
}

.animate-fade-in-right-delay.active {
    animation: fade-in-right-image 1s ease-out 3.5s forwards;
}

.header .image {
    position: relative;
}

.header .image img {
    position: relative;
    z-index: 2;
}

.header .image .image-background {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

.header .image .image-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* ==============================
    オープニングメッセージ
============================== */
#opening-message {
    overflow: hidden;

    padding: 13.4% 0;

    color: #FFFFFF;
    background-color: #FFFFFF;
}

#opening-message .message-box {
    position: relative;
}

#opening-message .message {
    position: relative;
    z-index: 1;

    box-sizing: border-box;
    /* padding-top: 0.2em; */
    padding-left: 0.8em;

    /* letter-spacing: 0.05em; */

    font-size: 4.8vw;
    font-weight: 700;
    /* line-height: 1.7; */
    line-height: 2;
    letter-spacing: 0.1em;
}
#opening-message .message02,
#opening-message .message04 {
    margin: 0 0 0 auto;
    padding-right: 0.3em;

    text-align: right;
}
#opening-message .message02 {
    padding-top: 0.1em;

    font-size: 5.6vw;
    line-height: 1.7;
    padding-right: 0.4em;
    letter-spacing: 0.12em;
}
#opening-message .message02 span.letter-spacing {
    letter-spacing: 0.08em;
}
#opening-message .message04 {
    padding-top: 0em;

    font-size: 6.4vw;
    line-height: 1.7;
}
#opening-message .message img {
    position: absolute;
    z-index: 0;
    top: 0;
    left: -4.3%;

    transform: scaleX(0);
    transform-origin: left center;
}
#opening-message .message02 img,
#opening-message .message04 img {
    right: -5.1%;
    left: auto;

    transform-origin: right center;
}
#opening-message .message span {
    position: relative;
    z-index: 1;

    opacity: 0;
}
@media (min-width: 768px) {
    #opening-message .message {
        font-size: 1.8rem;
    }
    #opening-message .message02 {
        font-size: 2.1rem;
    }
    #opening-message .message04 {
        font-size: 2.4rem;
    }
}

/* ==============================
    メッセージアニメーション
============================== */
/* 背景画像のアニメーション（左から右） */
#opening-message .message.animate-message img {
    animation: slide-background-left-to-right 0.8s ease-out forwards;
}

/* 背景画像のアニメーション（右から左 - message02, message04用） */
#opening-message .message02.animate-message img,
#opening-message .message04.animate-message img {
    animation: slide-background-right-to-left 0.8s ease-out forwards;
}

/* テキストのフェードイン */
#opening-message .message.animate-message span {
    animation: fade-in-text 0.6s ease-out 0.8s forwards;
}

@keyframes slide-background-left-to-right {
    0% {
        transform: scaleX(0);

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

        opacity: 1;
    }
}

@keyframes slide-background-right-to-left {
    0% {
        transform: scaleX(0);
        transform-origin: right center;

        opacity: 1;
    }
    100% {
        transform: scaleX(1);
        transform-origin: right center;

        opacity: 1;
    }
}

@keyframes fade-in-text {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#opening-message .message01 {
    width: 73.1%;
    margin-bottom: 13.4%;
}
#opening-message .message02 {
    width: 95.4%;
}
#opening-message .message03 {
    width: 84.6%;
}
#opening-message .message04 {
    width: 73.1%;
}

#opening-message .item {
    position: absolute;
    z-index: 1;
}
#opening-message .item01 {
    top: -98%;
    right: 0;

    width: 44.7%;
}
#opening-message .item02 {
    top: 26%;
    left: 0;

    width: 36.2%;
}
#opening-message .item03 {
    top: 22%;
    right: 6.5%;

    width: 30.6%;
}
#opening-message .item04 {
    top: 55%;
    left: 0;

    width: 32.5%;
}
#opening-message .item05 {
    right: 0;
    bottom: -8.5%;

    width: 46.2%;
}

#opening-message .photo01 {
    position: relative;

    width: 52.1%;
    margin: 8.8% 8% 8% auto;
}
#opening-message .photo01 img {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    transition: opacity 1000ms ease-out;

    opacity: 0;

    object-fit: cover;
}
#opening-message .photo01 img:first-child {
    position: relative;

    opacity: 1;
}
#opening-message .photo01 img.show {
    opacity: 1;
}
#opening-message .photo02 {
    position: relative;

    width: 58.6%;
    margin: 10.4% 0 -1.3em;
}
#opening-message .photo02 img {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    transition: opacity 1000ms ease-out;

    opacity: 0;

    object-fit: cover;
}
#opening-message .photo02 img:first-child {
    position: relative;

    opacity: 1;
}
#opening-message .photo02 img.show {
    opacity: 1;
}
#opening-message .photo03 {
    position: relative;

    width: 65%;
    margin: -0.1em auto 0;
}
#opening-message .photo03 img {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    transition: opacity 1000ms ease-out;

    opacity: 0;

    object-fit: cover;
}
#opening-message .photo03 img:first-child {
    position: relative;

    opacity: 1;
}
#opening-message .photo03 img.show {
    opacity: 1;
}

#opening-message .carousel01 {
    overflow: hidden;

    margin: 13.7% 0 10.4%;
}
#opening-message .carousel01 .carousel-inner {
    display: flex;

    width: fit-content;
}
#opening-message .carousel01 .carousel-item {
    flex-shrink: 0;

    width: 56.4%;
    margin-right: 5.3%;
}
#opening-message .carousel01 .carousel-item img {
    display: block;

    width: 100%;
    height: auto;
}
@keyframes carousel-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--carousel-translate, -50%));
    }
}
#opening-message .carousel01 .carousel-inner {
    animation-timing-function: linear;
    animation-delay: 1ms;
}
#opening-message .carousel02 {
    overflow: hidden;

    margin: 11.5% 0 0;
}
#opening-message .carousel02 .carousel-inner {
    display: flex;
    flex-direction: row-reverse;

    width: fit-content;
}
#opening-message .carousel02 .carousel-item {
    flex-shrink: 0;

    width: 56.4%;
    margin-right: 5.3%;
}
#opening-message .carousel02 .carousel-item img {
    display: block;

    width: 100%;
    height: auto;
}
@keyframes carousel-scroll-reverse {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--carousel-translate, 50%));
    }
}
#opening-message .carousel02 .carousel-inner {
    animation-timing-function: linear;
    animation-delay: 1ms;
}

#opening-message h2 {
    position: relative;

    padding: 6.1% 0 8%;

    text-align: center;
    letter-spacing: 0.05em;

    font-size: 5.3vw;
    font-weight: 700;
    line-height: 1.85;
}
@media (min-width: 768px) {
    #opening-message h2 {
        font-size: 2rem;
    }
}

/* h2背景のアニメーション用 */
#opening-message h2::before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: "";
    transform: scaleX(0);
    transform-origin: left center;

    background-color: #BD1E06;
    box-shadow: 0px 4px 0px 0px #000000;
}

#opening-message h2.animate-h2-text.active::before {
    animation: slide-h2-background 0.8s ease-out forwards;
}

/* テキストの一文字ずつアニメーション */
#opening-message h2.animate-h2-text {
    text-align: center;
}

#opening-message h2.animate-h2-text .char {
    display: inline-block;

    opacity: 0;
}

#opening-message h2.animate-h2-text.active .char {
    animation: fade-in-char 0.3s ease-out forwards;
}

/* KANBI spanのアニメーション */
#opening-message h2 span.animate-kanbi {
    opacity: 0;
}

#opening-message h2 span.animate-kanbi.active {
    opacity: 1;
}

#opening-message h2 span.animate-kanbi {
    position: relative;
    z-index: 1;

    display: inline-block;

    width: 4.79em;
    margin: 0 0.5em;
    padding: 0;

    letter-spacing: 0.13em;

    color: #BD1E06;

    font-size: 6.4vw;
    font-weight: 700;
    font-family: "Alexandria", sans-serif;
}
@media (min-width: 768px) {
    #opening-message h2 span.animate-kanbi {
        font-size: 2.4rem;
    }
}

#opening-message h2 span.animate-kanbi::after {
    position: absolute;
    z-index: -1;
    top: 10%;
    right: 0;
    bottom: 0;
    left: 0;

    height: 80%;

    content: "";
    transform: skew(-10deg) scaleX(0);
    transform-origin: left center;

    background-color: inherit;
    background-color: #FFFFFF;
    box-shadow: 4px 4px 0px 0px #000000;
}

#opening-message h2 span.animate-kanbi.active::after {
    animation: slide-kanbi-background 0.8s ease-out 0.3s forwards;
}

@keyframes slide-h2-background {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes fade-in-char {
    0% {
        transform: translateY(10px);

        opacity: 0;
    }
    100% {
        transform: translateY(0);

        opacity: 1;
    }
}

@keyframes slide-kanbi-background {
    0% {
        transform: skew(-10deg) scaleX(0);
    }
    100% {
        transform: skew(-10deg) scaleX(1);
    }
}

/* ==============================
    セクション
============================== */
.section {
    display: flex;
    justify-content: center;

    padding: 8% 0;

    background-color: #FFFFFF;
}
#before-school.section {
    background-color: #069353;
}
#during-school.section {
    background-color: #BD1E06;
}
#after-school.section {
    background-color: #2F41A7;
}
#after-opening.section {
    background-color: #F3C716 ;
}

.section .side-text {
    display: flex;
    align-items: center;

    width: 8%;

    letter-spacing: 0.3em;

    color: #FFFFFF;

    font-size: 3.2vw;
    font-weight: 500;

    writing-mode: vertical-rl;
}
.section .side-text.left {
    text-align: left;
}
.section .side-text.right {
    transform: rotate(180deg);
}

.section .section-wrapper {
    width: 83.8%;
}

.section .section-inner {
    padding: 9% 0 0;

    background-color: #FFFFFF;
}

.section h2 {
    position: relative;
    z-index: 1;

    width: 5.83em;
    margin: 0 auto;
    /* padding: 0.29em 0 0.2em; */
    padding: 0.24em 0 0.25em;

    text-align: center;

    color: #FFFFFF;

    font-size: 6.4vw;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.section h2::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    content: "";
    transform: skew(-10deg);

    background-color: inherit;
    box-shadow: 3.08px 3.08px 0px 0px #000000;
}

/* セクションh2アニメーション */
.section h2.animate-section-h2::before {
    transform: skew(-10deg) scaleX(0);
    transform-origin: left center;
    animation: slide-section-h2-bg 0.8s ease-out forwards;
}

.section h2.animate-section-h2 .char {
    display: inline-block;

    transform: rotateX(90deg);
    transform-origin: bottom;

    opacity: 0;
}

.section h2.animate-section-h2.active .char {
    animation: domino-char 0.5s ease-out forwards;
}

.section .section-inner p.animate-section-p {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.section .section-inner p.animate-section-p.active {
    opacity: 1;
}

#before-school.section .section-inner .anime {
    margin-top: -8.8%;;
}

#during-school.section .section-inner .anime {
    margin-top: -9.1%;;
}

#after-opening.section .section-inner .anime {
    margin-top: -12%;;
}

.section .movie.animate-section-movie {
    opacity: 0;
}
.section .movie.animate-section-movie.active {
    -webkit-animation: fade-in-section-movie 0.6s ease-out forwards, shadow-pop-br 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.6s both;
            animation: fade-in-section-movie 0.6s ease-out forwards, shadow-pop-br 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.6s both;
}
@keyframes fade-in-section-movie {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@media (min-width: 768px) {
    .section .side-text {
        font-size: 1.2rem;
    }
    .section h2 {
        font-size: 2.4rem;
    }
}

@keyframes slide-section-h2-bg {
    0% {
        transform: skew(-10deg) scaleX(0);
    }
    100% {
        transform: skew(-10deg) scaleX(1);
    }
}

@keyframes domino-char {
    0% {
        transform: rotateX(90deg);

        opacity: 0;
    }
    100% {
        transform: rotateX(0deg);

        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-50px);

        opacity: 0;
    }
    100% {
        transform: translateX(0);

        opacity: 1;
    }
}

@-webkit-keyframes shadow-pop-br {
    0% {
        -webkit-transform: translateX(0) translateY(0);
                transform: translateX(0) translateY(0);

        -webkit-box-shadow: 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF;
                box-shadow: 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF;
    }
    100% {
        -webkit-transform: translateX(-5px) translateY(-5px);
                transform: translateX(-5px) translateY(-5px);

/* -webkit-box-shadow: 1px 1px #FFF, 2px 2px #FFF, 3px 3px #FFF, 4px 4px #FFF, 5px 5px #FFF;
              box-shadow: 1px 1px #FFF, 2px 2px #FFF, 3px 3px #FFF, 4px 4px #FFF, 5px 5px #FFF; */box-shadow: 5px 5px 0px 0px #FFFFFF;
    }
}
@keyframes shadow-pop-br {
    0% {
        -webkit-transform: translateX(0) translateY(0);
                transform: translateX(0) translateY(0);

        -webkit-box-shadow: 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF;
                box-shadow: 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF, 0 0 #FFFFFF;
    }
    100% {
        -webkit-transform: translateX(-5px) translateY(-5px);
                transform: translateX(-5px) translateY(-5px);

/* -webkit-box-shadow: 1px 1px #FFF, 2px 2px #FFF, 3px 3px #FFF, 4px 4px #FFF, 5px 5px #FFF;
              box-shadow: 1px 1px #FFF, 2px 2px #FFF, 3px 3px #FFF, 4px 4px #FFF, 5px 5px #FFF; */box-shadow: 5px 5px 0px 0px #FFFFFF;
    }
}


#before-school.section h2::before {
    background-color: #069353;
}

#during-school.section h2::before {
    background-color: #BD1E06;
}

#after-school.section h2::before {
    background-color: #2F41A7;
}

#after-opening.section h2::before {
    background-color: #F3C716;
}

.section .section-inner p {
    margin-top: 6.7%;

    text-align: center;

    font-size: 4vw;
    font-weight: 700;
    line-height: 1.8;
    position: relative;
    z-index: 1;
}
@media (min-width: 768px) {
    .section .section-inner p {
        font-size: 1.5rem;
    }
}

.section .movie {
    position: relative;

    width: 98.7%;
    margin: 8% 0 0 5px;

    cursor: pointer;
}
.section .movie video {
    width: 100%;
    height: auto;

/* box-shadow: 5px 5px 0px 0px #FFFFFF; */

    vertical-align: bottom;
}
.section .movie .play-button {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    align-items: center;

    width: 100%;
    height: 100%;
}

#start-beauty-life {
    position: relative;

    text-align: center;

    color: #FFFFFF;

/* background-image: url(../images/start-beauty-life-background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; */

    font-size: 7.2vw;
    font-weight: 700;
}
#start-beauty-life .background-wrapper {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;

    overflow: hidden;

    width: 100%;
    height: 100%;
}
#start-beauty-life .background-wrapper::after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: "";
    pointer-events: none;

    background-image: url(../images/start-beauty-life-image-over.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#start-beauty-life .background-wrapper .carousel-row {
    overflow: hidden;

    width: 100%;
}
#start-beauty-life .background-wrapper .carousel-row .carousel-inner {
    display: flex;

    width: fit-content;
}
#start-beauty-life .background-wrapper .carousel-row.row-01 .carousel-inner,
#start-beauty-life .background-wrapper .carousel-row.row-03 .carousel-inner,
#start-beauty-life .background-wrapper .carousel-row.row-05 .carousel-inner {
    flex-direction: row-reverse;
}
#start-beauty-life .background-wrapper .carousel-row .carousel-item {
    flex-shrink: 0;

    width: 47.8%;
}
#start-beauty-life .background-wrapper .carousel-row .carousel-item img {
    display: block;

    width: 100%;
    height: auto;
}
@media (min-width: 768px) {
    #start-beauty-life {
        font-size: 2.7rem;
    }
}

@keyframes carousel-scroll-left-to-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--carousel-translate, 50%));
    }
}
@keyframes carousel-scroll-right-to-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--carousel-translate, -50%));
    }
}
#start-beauty-life p {
    position: absolute;
    z-index: 0;
    top: 13.1%;
    left: 0;

    overflow: hidden;

    width: 100%;

/* background-color: #BD1E06; */
    padding: 5.6% 0 6.4%;

    letter-spacing: 0.1em;

    line-height: 1;
}

/* さあ、一緒にアニメーション */
#start-beauty-life p.animate-start-beauty-life-p {
    overflow: hidden;

    color: transparent;
}

#start-beauty-life p.animate-start-beauty-life-p::before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: "";
    transform: scaleX(0);
    transform-origin: left center;

    background-color: #BD1E06;
}

#start-beauty-life p.animate-start-beauty-life-p.active::before {
    animation: slide-start-beauty-life-bg 0.8s ease-out forwards;
}

#start-beauty-life p.animate-start-beauty-life-p.active {
    animation: fade-in-start-beauty-life-text 0.6s ease-out 0.8s forwards;
}

@keyframes slide-start-beauty-life-bg {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes fade-in-start-beauty-life-text {
    0% {
        color: transparent;
    }
    100% {
        color: #FFFFFF;
    }
}
#start-beauty-life h3 {
    position: absolute;
    z-index: 1;
    top: 33.5%;
    left: 0;

    box-sizing: border-box;
    width: 100%;
    padding: 7.2% 0 10.7%;
    padding-left: 0.1em;

    letter-spacing: 0.08em;

    opacity: 0;

    font-size: 15.5vw;
    font-weight: 700;
}
#start-beauty-life h3.active {
    opacity: 1;
}
#start-beauty-life .h3-background {
    position: absolute;
    z-index: 0;
    top: 33.5%;
    left: 0;

    display: block;
    overflow: hidden;

    width: 100%;
    height: 3.7em;

    background-color: #BD1E06;

    font-size: 15.5vw;
}
@media (min-width: 768px) {
    #start-beauty-life h3 {
        font-size: 5.8rem;
    }
    #start-beauty-life .h3-background {
        font-size: 5.8rem;
    }
}

/* h3-backgroundアニメーション */
#start-beauty-life .h3-background {
    background-color: transparent;
}

#start-beauty-life .h3-background::before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: "";
    transform: scaleX(0);
    transform-origin: left center;

    background-color: #BD1E06;
}

#start-beauty-life .h3-background.active::before {
    animation: slide-h3-background 0.8s ease-out forwards;
}

@keyframes slide-h3-background {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
#start-beauty-life h3 span.small-text {
    font-size: 5.3vw;
}
@media (min-width: 768px) {
    #start-beauty-life h3 span.small-text {
        font-size: 2rem;
    }
}

/* 美容人生をはじめよう！アニメーション */
#start-beauty-life h3.animate-beauty-life-text .char {
    display: inline-block;

    transform: scale(2.0);

    opacity: 0;
}

#start-beauty-life h3.animate-beauty-life-text.active .char {
    animation: stomp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes stomp {
    0% {
        transform: scale(2.0);

        opacity: 0;

/* 【中抜き状態】 */
        color: transparent;           /* 中身は透明 */

        -webkit-text-stroke: 2px #FFFFFF; /* 白い縁取り線 */
    }
    60% {
        transform: scale(0.9);

        opacity: 1;

/* 【まだ中抜き状態】着地の瞬間までは線のまま */
        color: transparent;

        -webkit-text-stroke: 2px #FFFFFF;
    }
    100% {
        transform: scale(1.0);

        opacity: 1;

/* 【塗りつぶし状態】最後に色がつく */
        color: #FFFFFF;                  /* 白で塗りつぶす */

        -webkit-text-stroke: 0px transparent; /* 線は消す（または色と同化させる） */
    }
}


#start-beauty-life .image {
    position: relative;
    z-index: 1;

    opacity: 0;
}

#start-beauty-life .image.active {
    animation: fade-in-image 0.6s ease-out forwards;
}

@keyframes fade-in-image {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ==============================
    フッター
============================== */
.footer {
    position: relative;
    padding: 11.8% 0 12.6%;
}
.footer h3 {
    text-align: center;

    color: #FFFFFF;

    font-size: 5.3vw;
    font-weight: 700;
}
.footer nav ul {
    margin-top: 10.4%;
}
.footer nav ul li + li {
    margin-top: 6.7%;
}
.footer nav ul li a {
    position: relative;
    z-index: 1;

    display: block;

    width: 15.3em;
    margin: 0 auto;
    padding: 0.8em 0 0.86em;

    transition: color 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.01em;

    color: #000000;

    font-size: 4vw;
    font-weight: 700;
    line-height: 2;
}
.footer nav ul li a::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    content: "";
    transition: background-color 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    box-shadow 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: skew(-10deg);

    background-color: #FFFFFF;
    box-shadow: 4px 4px 0px 0px #000000;
}
.footer nav ul li a:hover {
    color: #FFFFFF;
}
.footer nav ul li a:hover::before {
    background-color: #000000;
    box-shadow: 4px 4px 0px 0px #FFFFFF;
}

.footer h2 {
    width: 42.7%;
    margin: 12% auto 0;
}
.footer p {
    margin-top: 5.6%;

    text-align: center;
    letter-spacing: 0.01em;

    font-size: 3.7vw;
    font-weight: 400;
    line-height: 1.9;
}
.footer ul.sns {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 67.2%;
    margin: 9.6% auto 0;
}
.footer ul.sns li.instagram {
    width: 19.2%;
}
.footer ul.sns li.youtube {
    width: 18.8%;
}
.footer ul.sns li.tiktok {
    width: 17.6%;
}
.footer ul.sns li.line {
    width: 18.4%;
}
.footer ul.sns a {
    display: block;
    transition: transform 0.3s ease-out;
}
.footer ul.sns a img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-out;
}
.footer ul.sns a:hover img {
    transform: scale(0.9);
}

.footer-recruit {
    position: relative;
    margin: 0 auto;
    padding:  12.6% 0 0;
    text-align: center;
}
.footer-recruit img {
    width: auto;
}

@media (min-width: 768px) {
    .footer h3 {
        font-size: 2rem;
    }
    .footer nav ul li a {
        font-size: 1.5rem;
    }
    .footer p {
        font-size: 1.4rem;
    }

    .footer-recruit {
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 30px 2.3% 20px;
    }
}
/* ========================================
   PC用スタイル（768px以上）
   ======================================== */

@media (min-width: 768px) {
    /* メインコンテンツ */
    .main-content {
        max-width: 100%;

        grid-area: main-content;
    }
}

/* ========================================
   PC用スタイル（768px以上） サイド
   ======================================== */
@media (min-width: 768px) {
    .container {
        display: grid;

        max-width: 100vw;
        min-height: 100vh;
        margin: 0 auto;

/* grid-template-columns: 33.4% 2.2% 20.5% 2.4% 41.5%; */
/* grid-template-columns: 3.34fr 0.22fr 372px 0.24fr 4.15fr; */
        grid-template-columns: 3.745fr 0.22fr 372px 0.24fr 3.745fr;
        grid-template-areas: "sidebar-left . main-content . sidebar-right";
    }

    /* 左サイドバー */
    .sidebar-left {
        position: sticky;
        top: 0;

        display: block;
        overflow-y: auto;

        box-sizing: border-box;
        height: 100vh;
        padding-left: 6.3%;

        grid-area: sidebar-left;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .sidebar-left .background-image {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;

        overflow: hidden;

        width: 100%;
        height: 100%;
    }
    .sidebar-left .background-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .sidebar-left .logo-wrapper {
        width: 20%;
        margin: 6.5vh 0 auto;
    }

    .sidebar-left .side-nav ul {
        /* margin: 18.7vh 0 0; */
        margin: auto 0 0;
    }
    .sidebar-left .side-nav li {
        margin-bottom: 15px;
    }
    /* アイコンの出現アニメーション */
    .sidebar-left .side-nav li img {
        width: 6%;
        margin-right: 1.2vw;

        animation: fade-in-icon 0.6s ease-out forwards;
        animation-delay: 0.1s;

        opacity: 0;
    }
    .sidebar-left .side-nav a {
        position: relative;

        display: flex;
        align-items: center;

        text-decoration: none;

        color: #FFFFFF;

        /* font-size: min(2.8rem, 1.5vw); */
        font-size: min(2.6rem, 1.4vw);
        font-weight: 700;
    }

    /* テキストのhoverアニメーション */
    .sidebar-left .side-nav a span.text {
        position: relative;

        transition: background-position 0.3s;
        animation: fade-in-text 0.6s ease-out forwards;

        opacity: 0;

/* 文字色は透明にして背景が見えるようにする */
        color: transparent;

/* 白と黒が50%の位置で切り替わるグラデーション */
        background: linear-gradient(to right, #000000 50%, #FFFFFF 50%) 100%;

/* 背景をテキストで切り抜く */
        background-clip: text;

/* 横幅は200%にしてグラデーションの青部分は見えないようにする */
        background-size: 200% 100%;
    }
    .sidebar-left .side-nav a:hover span.text {
        /* グラデーションの位置を移動して、オレンジ部分を見せる */
        background-position: 0 100%;
    }
    /* 下線のhoverアニメーション */
    .sidebar-left .side-nav a span.line {
        position: absolute;
        bottom: 0;
        left: 0;

        display: inline-block;

        width: 100%;
        height: 1px;

        content: "";
        transition: background-position 0.3s;

        background: linear-gradient(to right, #000000 50%, #FFFFFF 50%) 100%;
        background-position: bottom right; /* 下線の初期位置 */

/* 横幅は200%にしてグラデーションの青部分は見えないようにする */
        background-size: 200% 100%;
    }
    /* ホバー時のアニメーション */
    .sidebar-left .side-nav a:hover span.line {
        height: 2px;

/* グラデーションの位置を移動して、オレンジ部分を見せる */

        background-position: 0 100%;
    }


    /* aタグの出現遅延アニメーション
    .sidebar-left .side-nav a span.text {
        animation-delay: 1s;
    } */

    @keyframes fade-in-icon {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes fade-in-text {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes slide-line {
        0% {
            width: 0;
        }
        100% {
            width: 100%;
        }
    }
    @keyframes fade-in-sns {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes fade-in-about {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes fade-in-from-top {
        0% {
            transform: translateY(-30px);

            opacity: 0;
        }
        100% {
            transform: translateY(0);

            opacity: 1;
        }
    }

    .sidebar-left .sns {
        display: flex;
        align-items: center;

        margin: 9.1vh 0 0;

        animation: fade-in-sns 0.6s ease-out 0.7s forwards;

        opacity: 0;
    }
    .sidebar-left .sns li {
        /* width: 8.2%; */
        width: 7.6%;
        margin-right: 1.7vw;
    }
    .sidebar-left .sns li:last-of-type {
        margin-right: 0;
    }
    .sidebar-left .sns a {
        display: block;
        transition: transform 0.3s ease-out;
    }
    .sidebar-left .sns a img {
        display: block;
        width: 100%;
        height: auto;
        transition: transform 0.3s ease-out;
    }
    .sidebar-left .sns a:hover img {
        transform: scale(0.9);
    }

    .sidebar-left .about-wrapper {
        margin: 5.3vh 0 8vh;

        animation: fade-in-about 0.6s ease-out 0.9s forwards;

        opacity: 0;

        /* font-size: min(2rem, 1.1vw); */
        font-size: min(1.8rem, 0.9vw);
        font-weight: 700;
        line-height: 2;
    }

    .sidebar-left .about-wrapper h6 {
        /* font-size: min(2.5rem, 1.38vw); */
        font-size: min(2.3rem, 1.27vw);
        font-weight: 700;
    }

    /* 右サイドバー */
    .sidebar-right {
        position: sticky;
        top: 0;

        display: block;
        overflow: hidden;

        height: 100vh;

        background-color: #FFFFFF;

        grid-area: sidebar-right;
    }
    .sidebar-right .background-image {
        position: absolute;
        z-index: -1;
        top: 0;
        left: -0.5%;

        overflow: hidden;

        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .sidebar-right .background-image img {
        width: auto;
        height: 94.8%;
        object-fit: cover;
    }

    .sidebar-right h3 {
        width: 38.2%;
        margin: 6.6% 14.5% auto auto;

        animation: fade-in-from-top 0.6s ease-out 0.3s forwards;

        opacity: 0;
    }

    .sidebar-right .logo-text {
        position: absolute;
        right: 6.8%;
        bottom: 6.4%;

        color: #BD1E06;

        font-family: "Alexandria", sans-serif;
        /* font-size: min(17.6rem, 9.7vw); */
        font-size: min(17.6rem, 8.2vw);
        font-weight: 500;

        writing-mode: vertical-rl;
    }
    .sidebar-right .logo-text.animate-glitch {
        color: #BD1E06;
    }
    .sidebar-right .logo-text.animate-glitch h1,
    .sidebar-right .logo-text.animate-glitch h2 {
        color: #BD1E06;
    }
    .sidebar-right .logo-text h1 {
        display: flex;
        justify-content: space-between;
        line-height: 1;
    }
    .sidebar-right .logo-text h2 {
        padding-top: 0.5em;

        letter-spacing: 0.23em;

        /* font-size: min(3.55rem, 1.96vw); */
        font-size: min(3.55rem, 1.46vw);
    }
}
@media print, screen and (min-width: 1230px) {
    .sidebar-right .background-image {
        justify-content: flex-start;
    }
}

/* ========================================
   iPadなど縦向きの場合（768px以上、縦向き）
   ======================================== */
@media (min-width: 768px) and (orientation: portrait) {
    .container {
        grid-template-columns: 3.745fr 0.22fr 372px 0.24fr;
        grid-template-areas: "sidebar-left . main-content .";
    }

    .sidebar-right {
        display: none;
    }
}