@charset "utf-8";

/*----------------------------------------------------------------------
* common
--------------------------------------------------------------------- */
/* skip-link */
.skip-link {
    position: absolute;
    display: block;
    top: 0;
    left: -9999px;
    z-index: 20000;
    padding: 1rem;
    width: calc(100% - 2rem);
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    text-align: center;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
}


/* outer */
.outer {
    position: relative;
    background-color: #fbffe6;
    background-image: url(../img/body_bg_l.png), url(../img/body_bg_r.png);
    background-repeat: repeat-y, repeat-y;
    background-position: left top, right top;
    background-attachment: fixed;
}
@media (max-width: 1280px) {
    .outer {
        background-image: none;
    }
}

.container {
    position: relative;
    max-width: 750px;
    margin: 0 auto;
    background-color: #ff7400;
}


/* nav
========================================= */
/* btn-menu */
.btn-menu {
    display: flex;
    position: fixed;
    z-index: 10001;
    top: 0;
    right: calc(50% - 37.5rem);
    justify-content: center;
    align-items: center;
    width: 9rem;
    height: 9rem;
    font-size: 0;
    background-color: #fbffe6;
    cursor: pointer;
}
.btn-menu .menu-line,
.btn-menu .menu-line span {
    display: inline-block;
}
.btn-menu .menu-line {
    position: relative;
    display: block;
    width: 6rem;
    height: 4.5rem;
}
.btn-menu .menu-line span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.6rem;
    border-radius: 100vh;
    background-color: #ff6d00;
    transition: .3s;
}

.btn-menu .menu-line span:nth-of-type(1) {
    top: 0;
}
.btn-menu .menu-line span:nth-of-type(2) {
    top: calc(50% - 0.3rem);
}
.btn-menu .menu-line span:nth-of-type(3) {
    bottom: 0;
}
.btn-menu.open .menu-line span:nth-of-type(1) {
    top: calc(50% - 0.3rem);
    transform: rotate(-45deg);
}
.btn-menu.open .menu-line span:nth-of-type(2) {
    display: none;
}
.btn-menu.open .menu-line span:nth-of-type(3) {
    top: calc(50% - 0.3rem);
    transform: rotate(45deg);
}

/* drawerMenu */
.drawerMenu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3000;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
}
.drawerMenu.open {
    opacity: 1;
    visibility: visible;
}
.drawerMenu-wrapper {
    max-width: 75rem;
    padding: 12rem 0;
    margin: 0 auto;
    height: 100%;
    overflow: auto;
    background-color: #fbffe6;
} 
.drawerMenu-content {
    width: 100%;
}
.drawerMenu-txt {
    max-width: 57.6rem;
    margin: 0 auto 10rem;
}
.drawerMenu-ttl {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 6rem;
    color: #ff7400;
}
.drawerMenu-panjo {
    max-width: 31rem;
    margin: 4rem auto 0;
}
.drawerMenu-takashimaya {
    max-width: 41rem;
    margin: 6rem auto 0;
}
.drawerMenu-privacy {
    margin: 10rem 0 0;
    text-align: center;
    font-size: 2.5rem;
    color: #ff7400;
}
.drawerMenu-illust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
    padding: 10rem 0 0;
}
.drawerMenu-illust li {
    width: 9.5rem;
}
@media (min-width: 1280px) {
    .btn-menu {
        display: none;
    }
}


/* main
========================================= */


/* footer
========================================= */
footer .footer-logo {
    background-color: #fff;
}
footer .footer-privacy {
    height: 17rem;
    padding: 4rem 0 0;
    text-align: center;
}
footer .footer-privacy a {
    color: #fff;
    font-size: 2.2rem;
}


/*----------------------------------------------------------------------
* side
--------------------------------------------------------------------- */
.side-area {
    position: fixed;
    z-index: 100;
    top: 0;
    width: calc((100% - 750px) / 2);
    height: 100%;
    padding: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.side-area.side-R {
    right: 0;
}
.side-area.side-L {
    left: 0;
}
@media (max-width: 1280px) {
    .side-area {
        display: none;
    }
}

.side-menu-txt {
    max-width: 28.8rem;
    margin: 0 auto 6rem;
}
.side-menu-ttl {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 2rem;
    color: #ff7400;
}
.side-menu-panjo {
    max-width: 14.8rem;
    margin: 3rem auto 0;
}
.side-menu-takashimaya {
    max-width: 19.6rem;
    margin: 2.5rem auto 0;
}
.side-menu-privacy {
    margin: 5rem 0 0;
    text-align: center;
    font-size: 1.2rem;
    color: #ff7400;
}