@charset "UTF-8";
        /*==============
            header
        ===============*/
        header {
            position: absolute;
            z-index: 5;
            bottom: 5.56vh;
            width: 13.2%;
            padding: 0 20px;
            padding-top: 1.5rem;
            left: 3.3%;
        }
        header .menu {
            margin-bottom: 32px;
        }
        header .menu li {
            margin-bottom: 16px;
        }
        header .menu li a {
            font-size: 1.8rem;
            font-family: var(--en);
            font-weight: 700;
            color: #fff;
            transition: 0.4s all;
        }
        header .menu li a:hover {
            color: var(--color1);
        }
        header .button li a,
        footer .button li a {
            padding: 10px 16px;
            max-width: 173px;
            border: 1px solid #fff;
            border-radius: 999px;
            display: block;
            margin-top: 16px;
            font-size: 1.4rem;
            font-family: var(--en);
            font-weight: 700;
            color: #fff;
            transition: 0.4s all;
            position: relative;
        }
        header .button li a:hover,
        footer .button li a:hover {
            background: var(--color1);
        }
        header .button li a span,
        footer .button li a span {
            content: "";
            font-size: 1.4rem;
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transition: 0.4s all;
            color: #fff;
        }
        header .button li a:hover span,
        footer .button li a:hover span {
            right: 8px;
        }
        header .sns {
            display: flex;
            gap: 16px;
            margin-top: 24px;
        }
        header .sns li a {
            color: #fff;
            transition: 0.4s all;
        }
        header .sns li a:hover {
            color: var(--color1);
        }
        header .header__hamburger {
            display: none;
        }
        /* on */
        header.on {
            position: fixed;
            left: 3.3%;
            bottom: 5.56vh;
        }
        header.on .button li a,
        header.on .menu li a,
        header.on .sns li a {
            color: var(--black);
        }
        header.on .button li a {
            border: 1px solid var(--black);
        }
        header.on .button li a span {
            color: var(--black);
        }
        header.on .menu li a:hover,
        header.on .sns li a:hover {
            color: var(--color1);
        }
        header.on .button li a:hover,
        header.on .button li a:hover span {
            color: #fff;
        }
        header.on.white .menu li a:hover,
        header.on.white .sns li a:hover {
            color: #fff;
        }
        /* fade */
        header.on.scroll-switch {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        header.on.scroll-switch.on {
            opacity: 1;
            transform: translateY(0);
        }
        header.on.scroll-switch.fade-out {
            opacity: 0;
            transform: translateY(50px);
            display: none;
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        /*==============
            main
        ===============*/
        #main {
            background: url(../img/main.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }
        #main::before {
            content: "";
            background-image: url(../img/filter.png);
            background-size: cover;
            position: absolute;
            width: 100%;
            height: 100vh;
            z-index: 1;
            opacity: 0.3;
        }
        #main .scroll-switch .white{
            display: block;
        }
        #main .scroll-switch .black{
            display: none;
        }
        #main .scroll-switch.on .black{
            display: block;
        }
        #main .scroll-switch.on .white{
            display: none;
        }
        #main .logo {
            position: fixed;
            top: 50px;
            left: 40px;
            z-index: 10;
            padding-left: 20px;
        }
        #main .logo img {
            width: 100%;
            max-width: 212px;
        }
        #main .header_txt {
            position: absolute;
            bottom: 5.56vh;
            right: 3.3%;
            z-index: 1;
        }
        #main .header_txt h1 {
            font-family: var(--en);
            font-size: clamp(3rem, 8vw, 7.9rem);
            color: #fff;
            font-weight: 700;
            line-height: 1.3;
            text-align: right;
        }
        #main .header_txt h1 span {
            font-size: clamp(1.6rem, 4.26vw, 3rem);
            font-weight: 500;
            display: block;
            text-align: right;
        }
        #main .header_txt h1 img{
            max-width: clamp(300px, calc(300px + 350 * ((100vw - 320px) / 1120)), 650px);
            width: 90%;
        }
        #main .header_txt .head_news a {
            display: flex;
            margin-top: 56px;
            transition: 0.4s all;
            color: #fff;
            justify-content: flex-end;
        }
        #main .header_txt .head_news a:hover {
            color: var(--color1);
        }
        #main .header_txt .head_news .head_news_ttl,
        #main .header_txt .head_news .head_news_day {
            font-size: 1.4rem;
            font-family: var(--en);
            padding-right: 16px;
            line-height: 1.8;
        }
        #main .header_txt .head_news .head_news_txt.head_news_txt {
            font-size: 1.4rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            max-width: 366.73px;
            padding-left: 16px;
            position: relative;
        }
        #main .header_txt .head_news .head_news_txt.head_news_txt::before {
            content: "|";
            position: absolute;
            left: 0;
            z-index: 1;
        }
        #main .header_txt .head_news .icon-arrow {
            font-size: 1.4rem;
            line-height: 1.7;
        }
        @media screen and (max-width: 1100px) {
            #main .header_txt {
                bottom: 5.56vh;
                left: 50%;
                transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                width: max-content;
            }
            #main .header_txt h1,
            #main .header_txt h1 span {
                text-align: center;
            }
            #main .header_txt .head_news .head_news_txt.head_news_txt {
                max-width: 60vw;
                width: 80%;
            }
        }
        @media screen and (max-width: 768px) {
            #main {
                height: 100vh;
            }
            #main .header_txt .head_news {
                display: none;
            }
            #main .logo {
                top: 3.5vh;
                left: 1vw;
            }
            #main .logo img {
                width: 100%;
                max-width: 130px;
            }
            #main .header_txt h1 img{
                width: 100%;
            }
        }
        /*==============
            article-container
        ===============*/
        .container {
            display: flex;
        }
        #Leftcontainer {
            width: 16.67%;
        }
        #Rightcontainer {
            width: 83.33%;
        }
        @media screen and (max-width: 1100px) {
            .container {
                display: block;
            }
            #Leftcontainer,
            header.pc {
                display: none;
            }
            #Rightcontainer {
                width: 100%;
            }
        }
        /*==============
            event-bnr
        ===============*/
        #event-bnr {
            padding: 100px 68px 0 48px;
        }
        @media screen and (max-width: 1100px) {
            #event-bnr {
                padding: 80px 0 0;
                width: 90%;
                margin: 0 auto;
            }
        }
        /*==============
            news
        ===============*/
        #news {
            padding: 100px 68px 100px 48px;
        }
        @media screen and (max-width: 1100px) {
            #news {
                padding: 80px 0;
                width: 90%;
                margin: 0 auto;
            }
        }
        @media screen and (max-width: 500px) {
            #news {
                padding: 64px 0;
            }
            #news ul li {
                padding: 24px 10px;
            }
        }
        /*==============
            profile
        ===============*/
        #profile {
            padding: 0 68px 0 48px;
            position: relative;
        }
        #profile::after{
            content: "©AERA STYLE MAGAZINE";
            position: absolute;
            bottom: 2%;
            right: 5vw;
            font-size: 8px;
            color: #fff;
            z-index: 1;
        }
        #profile .inner {
            background: url(../img/top-profile.jpg);
            padding: 16.11vh 0;
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        #profile .inner::before {
            content: "";
            background-image: url(../img/filter.png);
            background-size: cover;
            position: absolute;
            width: 100%;
            height: 100vh;
            top: 0;
            z-index: -1;
            opacity: 0.3;
        }
        #profile .inner h2 {
            color: #fff;
            text-align: center;
        }
        #profile .more-wrap {
            margin: 0 auto;
            display: table;
        }
        @media screen and (max-width: 1100px) {
            #profile {
                padding: 0;
                width: 90%;
                margin: 0 auto;
            }
        #profile::after{
            right: 1.5vw;
        }
        }
        @media screen and (max-width: 500px) {
            #profile .inner {
                padding: 80px 0;
                background-position: left;
            }
            #profile .inner h2 {
                text-align: center;
                padding-left: 0;
            }
            #profile .more-wrap {
                padding-left: 0;
            }
            #profile .more-wrap a {
                margin: 0 auto;
            }
        }
        /*==============
            message
        ===============*/
        #message {
            padding: 0 68px 56px 48px;
            position: relative;
        }
        #message::after {
            content: "";
            width: 64.86%;
            height: 50%;
            background: var(--color1);
            position: absolute;
            right: 0;
            top: 0;
            z-index: -1;
        }
        #message .list{
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            row-gap: 6px;
        }
        #message .list li{
            width: calc((100% - 24px) / 4);
            position: relative;
        }
        #message .list li a .imgWrap{
            overflow: hidden;
        }
        #message .list li a .imgWrap img{
            object-position: 50% 50%;
            width: 100%;
            height: 100%;
            object-fit: cover;
            aspect-ratio: 1 / 1;
            transition: 0.8s all;
        }
        #message .list li a .imgWrap img:hover {
            -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform: scale(1.1);
        }
        /*#message .list li a:after {
            content: "";
            width: 25%;
            padding-top: 25%;
            background: url(../img/lock.png) no-repeat center / contain;
            position: absolute;
            inset: 0;
            margin: auto;
            z-index: 2;
        }*/
        @media screen and (max-width: 1100px) {
            #message {
                padding: 0 0 80px; 
                width: 90%;
                margin: 0 auto;
            }
            #message::after {
                height: 100%;
                max-height: 30vw;
                width: 74.86%;
                right: -4%;
            }
        }
        @media screen and (max-width: 500px) {
            #message::after {
                height: 100%;
                max-height: 50%;
                width: 50%;
            }
            #message .list li{
                width: calc((100% - 12px) / 3);
            }
            #message .list li:nth-child(4),
            #message .list li:nth-child(7),
            #message .list li:nth-child(8){
                display: none;
            }
        }
        /*==============
            gallery
        ===============*/
        #gallery {
            padding: 100px 0 0 48px;
        }
        #gallery h2 {
            margin-bottom: 24px;
        }
        #gallery .gallery-wrap {
            position: relative;
        }
        #gallery .gallery-wrap::after {
            content: "";
            width: 64.86%;
            height: 223px;
            background: var(--color1);
            position: absolute;
            right: 0;
            top: 0;
            z-index: -1;
        }
        #gallery .inner {
            padding: 0 68px 0 0;
        }
        #gallery .list {
            display: flex;
            gap: 20px;
        }
        #gallery .list li {
            width: calc(100% / 3);
        }
        #gallery .list li,
        #gallery .list li a img {
            width: 100%;
        }
        #gallery .list li a img {
            width: 100%;
            height: 100%;
            max-height: 15.5vw;
            min-width: 270px;
            object-fit: cover;
            object-position: center;
            aspect-ratio: 4 / 3;
            object-position: 50% 50%;
        }
        #gallery .gallery-wrap.movie {
            margin: 56px 0;
        }
        #gallery .gallery-wrap.movie ul li a .imgWrap {
            position: relative;
        }
        #gallery .gallery-wrap.movie ul li a .imgWrap::after {
            content: "";
            width: 3.47vw;
            height: 3.47vw;
            background-image: url(../img/play.png);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            background-size: cover;
        }
        @media screen and (max-width: 1100px) {
            #gallery {
                padding: 80px 0;
                width: 95%;
                margin: 0 0 0 auto;
            }
            #gallery .gallery-wrap::after {
                height: 100%;
                max-height: 21vw;
            }
            #gallery .inner {
                padding: 0 5% 0 0;
            }
            #gallery .inner .scroll {
                overflow-x: scroll;
                scrollbar-width: thin;
                scrollbar-color: var(--color1) #ccc;
                margin-bottom: 0;
                padding-bottom: 16px;
            }
            #gallery .list {
                width: fit-content;
                gap: 10px;
            }
            #gallery .inner .scroll ul li {
                width: 300px;
                max-width: 300px;
            }
            #gallery h2 {
                margin-bottom: 24px;
            }
            #gallery .list li a img {
                max-height: 180px;
            }
            #gallery .more-wrap {
                margin-top: 10px;
            }
            #gallery .gallery-wrap.movie ul li a .imgWrap::after{
                width: 8.5vw;
                height: 8.5vw;
            }
        }
        @media screen and (max-width: 500px) {
            #gallery {
                padding: 64px 0;
            }
            #gallery .gallery-wrap::after {
                height: 100%;
                max-height: 50%;
                width: 50%;
            }
        }
        /*==============
            video
        ===============*/
        #video {
            padding: 150px 68px 150px 48px;
        }
        #video .youtube {
            width: 100%;
        }
        #video .youtube img {
            transition: 0.8s all;
        }
        #video .youtube:hover img {
            -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform: scale(1.1);
        }
        #video .youtube a {
            position: relative;
            display: block;
        }
        #video .youtube a::after {
            content: "";
            background-image: url(../img/play.png);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            width: 8.68vw;
            height: 8.68vw;
            background-size: contain;
            background-repeat: no-repeat;
        }
        #video p {
            font-size: clamp(1.4rem, 3.73vw, 1.6rem);
            line-height: 1.5;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            transition: 0.4s all;
            margin-top: 16px;
        }
        #video .youtube:hover p {
            color: var(--color1);
        }
        @media screen and (max-width: 1100px) {
            #video {
                padding: 100px 0 100px 0;
                width: 90%;
                margin: 0 auto;
            }
        }
        @media screen and (max-width: 500px) {
            #video {
                padding: 64px 0 64px 0;
            }
        }
        /*==============
            footer
        ===============*/
        footer {
            background-image: url(../img/top-footer.jpg?2);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }
        #footer::after {
        content: "©AERA STYLE MAGAZINE";
        position: absolute;
        bottom: 2.5vw;
        right: 3%;
        font-size: 8px;
        color: #fff;
        z-index: 1;
        }
        footer::before {
            content: "";
            background-image: url(../img/filter.png);
            background-size: cover;
            position: absolute;
            width: 100%;
            height: 100vh;
            z-index: 1;
            opacity: 0.3;
        }
        footer .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            z-index: 1;
        }
        /*footer .center h1 {
            text-align: center;
            font-family: var(--en);
            font-size: clamp(3rem, 8vw, 7.9rem);
            color: #fff;
            font-weight: 700;
            line-height: 1.3;
            width: 80vw;
        }
        footer .center h1 span {
            text-align: center;
            font-size: clamp(1.6rem, 4.26vw, 3rem);
            font-weight: 500;
            display: block;
        }*/
        footer .center h1 img{
            max-width: clamp(300px, calc(300px + 300 * ((100vw - 320px) / 1120)), 600px);
            width: 100%;
        }
        footer .button {
            margin-top: 32px;
        }
        footer .button li a {
            padding: 16px 0;
            max-width: 16.67vw;
            width: 100%;
            font-size: 1.6rem;
            text-align: center;
            margin: 0 auto;
            color: #fff;
            border: 1px solid #fff;
        }
        footer .button li a span {
            content: "";
            font-size: 1.6rem;
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transition: 0.4s all;
            color: #fff;
        }
        footer .button li a:hover span {
            right: 8px;
        }
        footer .button li:last-child {
            margin-top: 16px;
        }
        footer .right-bottom {
            position: absolute;
            bottom: 5.56vw;
            right: 3.3%;
            z-index: 1;
        }
        footer .right-bottom .menu {
            display: flex;
            gap: 32px;
            margin-bottom: 20px;
        }
        footer .right-bottom .menu li a {
            color: #fff;
            transition: 0.4s all;
        }
        footer .right-bottom .menu li a:hover {
            color: var(--color1);
        }
        footer .right-bottom .inner {
            display: flex;
            gap: 20px;
            align-items: end;
            justify-content: end;
        }
        footer .right-bottom .inner .logo {
            display: flex;
            gap: 24px;
            align-items: flex-end;
        }
        footer .right-bottom .inner .logo li {
            transition: 0.4s all;
            max-width: 120px;
        }
        footer .right-bottom .inner .logo li:hover {
            opacity: 0.5;
        }
        footer .right-bottom .inner .logo li:first-child {
            max-width: 145px;
        }
        footer .right-bottom .inner .copy {
            color: #fff;
            font-size: 1rem;
            font-family: var(--en);
            text-align: right;
        }
        @media screen and (max-width: 1100px) {
            footer .center {
                left: 50%;
            }
            /*footer .center h1 {
                width: max-content;
            }*/
            footer .right-bottom .menu,
            footer .right-bottom .inner .logo {
                display: none;
            }
            footer .button li a {
                width: 60%;
                max-width: inherit;
            }
            footer .right-bottom {
                bottom: 5.56vw;
                left: 50%;
                transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                width: max-content;
            }
            footer .right-bottom .inner .copy {
                text-align: center;
            }
            footer {
                background-image: url(../img/top-footer-sp.jpg?2);
                background-size: cover;
                background-repeat: no-repeat;
                background-position: top;
                width: 100%;
                height: 100vh;
                position: relative;
                overflow: hidden;
            }
        }
        @media screen and (max-width: 500px) {
            footer .button li a {
                width: 100%;
            }
        }
        /* 240301 add */
        .wideBnr {
            padding: 100px 68px 0px 48px;
            background: #ffff;
        }
        .wideBnr .imgWrap img.pc {
            display: block;
        }
        .wideBnr .imgWrap img.sp {
            display: none;
        }
        @media screen and (max-width: 1100px) {
            .wideBnr {
                padding: 80px 0 0 !important;
                width: 90%;
                margin: 0 auto;
            }
        }
        @media screen and (max-width: 768px) {
            .wideBnr .imgWrap img.pc {
                display: none;
            }
            .wideBnr .imgWrap img.sp {
                display: block;
            }
            #gallery .gallery-wrap.movie {
                margin-bottom: 0;
            }
        }
        @media screen and (max-width: 500px) {
            .wideBnr {
                padding: 64px 0 0 !important;
            }
        }
        /*==============
            shop
        ===============*/
        #shop{
            padding: clamp(64px, calc(64px + 36 * ((100vw - 320px) / 1120)), 100px) 0;
            background: var(--color1);
        }
        #shop .wrapper{
            max-width: 1210px;
            width: 90%;
            margin: 0 auto;
            display: flex;
            align-items: center;
        }
        #shop .wrapper .left,
        #shop .wrapper .right{
            width: 50%;
        }
        #shop .wrapper .left h2{
            color: #fff;
            margin-bottom: clamp(16px, calc(16px + 8 * ((100vw - 320px) / 1120)), 24px);
        }
        #shop .wrapper .left p{
            color: #fff;
        }
        #shop .wrapper .left .more{
            border: 1px solid #fff;
            color: #fff;
            margin: clamp(24px, calc(24px + 16 * ((100vw - 320px) / 1120)), 40px) 0 0 0 ;
        }
        #shop .wrapper .left .more .icon-arrow:before{
            color: #fff;
        }
        #shop .wrapper .left .more:hover {
            background-color: #fff;
            color: var(--color1);
        }
        #shop .wrapper .left .more:hover .icon-arrow:before{
            color: var(--color1);
        }
        @media screen and (max-width: 768px) {
            #shop .wrapper{
                flex-wrap: wrap;
            }
            #shop .wrapper .left,
            #shop .wrapper .right{
                width: 100%;
            }
            #shop .wrapper .left{
                order: 2;
            }
            #shop .wrapper .right{
                order: 1;
                margin-bottom: 32px;
            }
            #shop .wrapper .left .more-wrap .more{
                margin: 0 auto;
            }
        }