.top_contents {
    position: relative;
}

.top_contents::before {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    content: '';
    border: 7px solid #fff;
    outline: 2px solid #fff;
    outline-offset: -15px;
}

.page_container {
    position: relative;
    z-index: 1;
}

.pink_bg {
    padding: 100px 0;
    background-color: #f3e6e2;
}

.pink_bg .container {
    max-width: 1054px;
    width: 90%;
    margin: 0 auto;
    position: relative;
}

.page_ttl {
    position: absolute;
    width: 13%;
    right: -3%;
    bottom: 10%;
}

.page_lead {
    position: absolute;
    width: 18%;
    left: -2%;
    top: -3%;
}

.pink_bg .container .deco {
    position: absolute;
}

.pink_bg .container .deco01 {
    width: 13%;
    top: -5%;
    left: 18%;
}

.pink_bg .container .deco02 {
    width: 6%;
    top: -5%;
    left: 32%;
}

.pink_bg .container .deco03 {
    width: 12%;
    top: -8%;
    left: 81%;
}

.pink_bg .container .deco04 {
    width: 10%;
    top: 0%;
    left: 92%;
}

.pink_bg .container .deco05 {
    width: 9%;
    top: 26%;
    left: 6%;
}

.pink_bg .container .deco06 {
    width: 16%;
    top: 48%;
    left: -7%;
}

.pink_bg .container .deco07 {
    width: 12%;
    top: 86%;
    left: 13%;
}

.pink_bg .container .deco08 {
    width: 14%;
    top: 92%;
    left: 73%;
}

.pink_bg .container .deco09 {
    width: 9%;
    top: 100%;
    left: 3%;
}

.brown_bg {
    background-color: #ccc3b8;
    padding: 100px 0;
}

.brown_bg .container {
    max-width: 1054px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.brown_bg .container .box01 {
    width: 68%;
    display: flex;
    align-items: flex-end;
}

.brown_bg .container .box01 .image {
    width: 60%;
}

.brown_bg .container .box01 .image .deco {
    position: absolute;
}

.brown_bg .container .box01 .image .deco01 {
    width: 30%;
    top: -6%;
    right: -7%;
}

.brown_bg .container .box01 .image .deco02 {
    width: 34%;
    bottom: -5%;
    left: -14%;
}

.brown_bg .container .box01 .txt_wrap {
    width: 65%;
    margin-left: -25%;
    position: relative;
    z-index: 1;
    color: #fff;
    margin-bottom: 30px;
}

.brown_bg .container .box01 .about_lead {
    font-size: clamp(18px,2.3vw,28px);
    letter-spacing: 0.1em;
}

.brown_bg .container .box01 .about_txt {
    font-size: clamp(12px,1.3vw,16px);
    line-height: 2.2;
    margin-top: 20px;
}


.brown_bg .container .box02 {
    width: 30%;
}

.brown_bg .container .box02 .image .deco {
    position: absolute;
}

.brown_bg .container .box02 .image .deco01 {
    width: 32%;
    top: -6%;
    left: -14%;
}

.brown_bg .container .box02 .image .deco02 {
    width: 30%;
    bottom: -5%;
    right: -7%;
}


.brown_bg .container02 {
    width: calc(100% - 40px);
    margin: 100px auto 0;
}

.brown_bg .container02 .slide {
    margin: 0 1vw;
}



/* sp調整 */
@media screen and (max-width:730px) {
    
    .top_contents::before {
        top: 3px;
        left: 3px;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        border-width: 3px;
        outline-width: 1px;
        outline-offset: -7px;
    }

    .pink_bg {
        padding: 50px 0;
    }

    .page_ttl {
        width: 16%;
        right: -1%;
    }

    .page_lead {
        width: 24%;
        left: -1%;
        top: -9%;
    }

    .pink_bg .container .deco01 {
        width: 15%;
        left: 27%;
    }

    .pink_bg .container .deco02 {
        width: 7%;
        left: 43%;
    }

    .pink_bg .container .deco03 {
        width: 19%;
        top: -12%;
        left: 71%;
    }
    
    .pink_bg .container .deco04 {
        width: 17%;
        left: 85%;
    }

    .pink_bg .container .deco05 {
        width: 12%;
        top: 31%;
        left: 8%;
    }

    .pink_bg .container .deco06 {
        width: 19%;
        top: 58%;
        left: -8%;
    }

    .pink_bg .container .deco09 {
        width: 16%;
        top: 96%;
    }

    .pink_bg .container .deco07 {
        width: 14%;
        top: 85%;
        left: 20%;
    }

    .pink_bg .container .deco08 {
        width: 21%;
        top: 90%;
        left: 68%;
    }

    .brown_bg {
        padding: 50px 0;
    }

    .brown_bg .container {
        flex-direction: column;
        gap: 40px 0;
    }

    .brown_bg .container .box01 {
        width: 100%;
        flex-direction: column;
    }

    .brown_bg .container .box01 .image {
        width: 80%;
        margin: 0 auto 0 7%;
    }

    .brown_bg .container .box01 .txt_wrap {
        width: 77%;
        margin: -45% 0 0;
    }

    .brown_bg .container .box02 {
        width: 70%;
        margin: 0 auto;
    }

    .brown_bg .container02 {
        width: calc(100% - 20px);
        margin-top: 50px;
    }

    .brown_bg .container02 .slide {
        margin: 0 10px;
    }
}


.sec_ttl {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 20px;
    font-size: clamp(20px,2.5vw,28px);
    letter-spacing: 0.05em;
}

.sec_ttl::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(../images/index/lead_deco.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.sec_ttl::after {
    transform: scale(-1, 1);
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(../images/index/lead_deco.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.sec_info {
    padding: 80px 0;
}

.sec_info ul {
    max-width: 500px;
    width: 90%;
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    gap: 15px 0;
    font-size: clamp(14px,1.6vw,18px);
}

.sec_info ul li {
    display: flex;
    gap: 0 1em;
}

.sec_info ul li a {
    text-decoration: underline;
}

.insta_bnr {
    max-width: 600px;
    width: 90%;
    margin: 80px auto 0;
}

.insta_bnr .txt {
    width: 30%;
    margin: 0 auto 10px;
}

/* sp調整 */
@media screen and (max-width:730px) {

    .sec_ttl {
        gap: 0 0.5em;
    }

    .sec_ttl::before,
    .sec_ttl::after {
        width: 15px;
        height: 15px;
    }
    
    .sec_info {
        padding: 50px 0;
    }

    .sec_info ul {
        margin-top: 25px;
    }

    .insta_bnr {
        margin-top: 40px;
    }

    .insta_bnr .txt {
        width: 40%;
    }
}

.sec_shop {
    padding: 80px 0;
    background-image: url(../images/index/shop_bg.png);
}

.sec_shop .sec_ttl {
    font-weight: 500;
    letter-spacing: 0.1em;
    font-size: clamp(18px,2.5vw,25px);
}

.shop_list {
    max-width: 1054px;
    width: 90%;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.shop_list li {
    display: none;
    background-color: #fff;
}

.shop_list li a {
    display: block;
    height: 100%;
    padding: 25px 25px 15px;
    border: 2px solid #b1cfdd;
    background-color: #fff;
}

.shop_list li:nth-child(1),
.shop_list li:nth-child(2),
.shop_list li:nth-child(3),
.shop_list li:nth-child(4),
.shop_list li:nth-child(5),
.shop_list li:nth-child(6) {
    display: block;
}

.shop_list.active li:not(:nth-child(1),:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6)) {
    display: block;
    animation-name: displayAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime {
from {
    opacity: 0;
}

to {
    opacity: 1;
}
}

.shop_list li:nth-child(even) a {
    border: 2px solid #b1cfdd;
    background-color: #c2d9e4;
}

.shop_list li .ttl {
    font-weight: 500;
    font-size: clamp(15px,1.6vw,17px);
    margin: 5px 0;
}

.shop_list li .cate {
    color: #9e9e9f;
    font-size: clamp(11px,1.4vw,15px);
}

.more_btn .wp-block-button {
    width: 100%;
}

.more_btn a {
    display: block;
    max-width: 280px;
    margin: 50px auto 0;
    position: relative;
    text-decoration: none;
    text-align: center;
    background: transparent;
    border-radius: 25px;
    outline: none;
    transition: all 0.4s ease;
    padding: 0;
    cursor: pointer;
}

.more_btn a span {
    display: none;
    position: relative;
    transition: all 0.4s ease;
    z-index: 1;
    color: #5b3e30;
    background-color: #fff;
    border: 2px solid #c47b76;
    border-radius: 30px;
    padding: 13px 10px 15px;
    font-size: 18px;
    font-weight: bold;
}

.more_btn a span::after {
    position: absolute;
    translate: 0 -50%;
    top: 50%;
    right: 8%;
    content: '\0232A';
    color: #c47b76;
}

.more_btn a:before {
    content:"";
    position: absolute;
    top:4px;
    left:0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background-color: #c47b76;
}

.more_btn a span.active {
    display: block;
}

.more_btn a:hover {
    opacity: 1;
}

.more_btn a:hover span {
    transform: translateY(4px);
}



.mansion_bnr {
    max-width: 800px;
    width: 90%;
    margin: 80px auto 100px;
}

.mansion_bnr .txt {
    width: 23%;
    margin: 0 auto 20px;
}

.address_txt {

    text-align: center;
    font-size: clamp(13px,1.4vw,16px);
    margin-bottom: 50px;
}

/* sp調整 */
@media screen and (max-width:730px) {

    .sec_shop {
        padding: 40px 0;
        background-size: 7%;
    }

    .shop_list {
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
        margin-top: 20px;
    }

    .shop_list li a {
        padding: 10px 10px 10px;
    }

    .sec_shop .more_btn a {
        max-width: 220px;
        margin-top: 30px;
    }

    .sec_shop .more_btn a span {
        padding: 10px 10px 12px;
    }

    .mansion_bnr {
        margin: 40px auto 60px;
    }

    .mansion_bnr .txt {
        width: 30%;
        margin-bottom: 15px;
    }

    .address_txt {
        width: 90%;
        text-align: justify;
        margin: 0 auto 30px;
    }
}