:root {
    --about-border: rgba(206, 255, 161, 0.5);
}

.ff-0 {
    font-family: sans-serif;
}

.ff-1 {
    font-family: serif;
}

.vertical-text {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    /* すべて縦方向に表示 */
}

.text-shadow {
    text-shadow: 3px 3px 5px black;
}


body {
    overflow-x: hidden;
}

.load {
    position: absolute;
    z-index: 9099999;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    height: 100vh;
    width: 100vw;
    background: rgb(39, 52, 66);
    transition: 2s all cubic-bezier(.81, 0, .16, .76);
}

/* ロード画面 */
.load-text {
    transition: 1s all ease-in-out;
    color: white;
    font-family: serif;
}

.loaded {
    transform: translateX(-100%);
}

.fadeup {
    transform: translateY(30px);
    opacity: 0;
    transition: .7s all ease-in-out;
}

.fadeup.isPlay {
    transform: translateY(0%);
    opacity: 1;
}


.sec1-content {
    height: 100vh;
    width: 100%;
    display: flex;
}

/***QA**/
.qa.sec1 {
    background-image: url(../img/webp/sample3.webp);
    background-size: cover;
    background-position: center;
    height: 70vh;
}

.sec1-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 0% 100%);
    transition: .5s all ease-in-out;
    opacity: 0;
    filter: blur(10px);
}

.sec1-content::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 65%;
    height: 100%;
    background-size: cover;
    background-position: left;
    clip-path: polygon(45% 0%, 100% 0%, 100% 100%, 15% 100%);
    transition: .5s all ease-in-out;
    opacity: 0;
    filter: blur(10px);
}

.b1::before {
    background-image: url(../img/sample1.jpg);
}

.b1.b1-show::before {
    opacity: 1;
    filter: blur(0px);
}

.a1::after {
    background-image: url(../img/bridal-plan2.jpg);
    background-position: right;
}

.a1.a1-show::after {
    opacity: 1;
    filter: blur(0px);
}

.sec1-text {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    font-size: 1em;
    font-family: serif;
    width: 80%;
}

.img-toggler {
    background-size: cover;
    background-position: center;
}

.img-toggler.img1 {
    background-image: url(../img/webp/sample1.webp);
}

.img-toggler.img2 {
    background-image: url(../img/webp/sample2.webp);
}

.img-toggler.img3 {
    background-image: url(../img/webp/sample3.webp);
}

.img-toggler.img4 {
    background-image: url(../img/webp/sample4.webp);
}

.img-toggler.img5 {
    background-image: url(../img/webp/sample5.webp);
}

.img-toggler.img6 {
    background-image: url(../img/webp/sample6.webp);
}

.img-toggler.img7 {
    background-image: url(../img/webp/sample7.webp);
}

.img-toggler.img8 {
    background-image: url(../img/webp/sample8.webp);
}

.img-toggler-column>li {
    border-bottom: 1px solid white;
}

.more-btn-wrapper {
    height: 20vh;
}

.more-btn {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;

    /* 文字のサイズ → 1.2em */
    font-size: 1.2em;

    /* 文字の色 → 黒*/
    color: black;

    /* 枠の色 → 黒 */
    outline: 2px solid black;
    padding: 15px 40px;
    overflow: hidden;
    transition: color .4s ease-in;
    transform: translateX(-50%);
    display: inline;
    position: absolute;
    top: 50px;
    left: 50%;

}

/* カーソル(マウス)がボタンの上に来た時 */
.more-btn:hover {
    /* 文字の色 → 白 */
    color: white;
}

.more-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 100%;

    /* 背景の色 →　黒*/
    background-color: black;

    transform: skewX(35deg);
    z-index: -1;
    transition: .6s width ease;
}

.more-btn:hover::before {
    width: 150%;
}

/******about********/
.about-boxshadow {
    box-shadow: 10px 15px rgba(170, 170, 170, 0.498);
}

/* plan */
header.plan {
    height: 70vh;
    background-image: url(../img/plan-background.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.plan-nav {
    display: block;
    border: 1px solid rgba(128, 128, 128, 0.345);
    text-align: center;
}

.plan-btn {
    background: rgb(225, 175, 119);
    border: 3px solid beige;
    color: white;
    transition: .3s all ease-in-out;
    padding: 5% 10%;
    border-radius: 10px;
    font-size: 1.2em;
}

.plan-btn:hover {
    background: beige;
    border: 3px solid rgb(225, 175, 119);
    color: rgb(225, 175, 119);
}

.plan-list {
    margin-top: 13vh;
    border-radius: 10px;
    background: beige;
}

.plan-img-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.plan-index {
    color: rgb(148, 206, 106);
}

.plan-transform {
    transform: translateY(-80px);
}

.category-list {
    border: 1px solid rgb(225, 175, 119);
    border-radius: 10px;
}

/********footer**********/
footer {
    background-color: rgb(63, 63, 63);
    color: white;
    width: 100%;
}

.footer-link {
    margin-top: 20px;
    display: block;
}

/********SNS************/

.sns-wrapper {
    border-radius: 50%;
    padding: 7%;
}

.insta {
    border: 3px solid purple;
    transition: .3s all ease-in-out;
}

.youtube {
    border: 3px solid red;
}

.bi-instagram {
    transition: .3s all ease-in-out;
}

.bi-youtube {
    transition: .3s all ease-in-out;
}

.bi-instagram.active {
    transform: scale(1.2);
}

.bi-youtube.active {
    transform: scale(1.2);
}