p,span,h1,h2,h3,a {
    letter-spacing: 0.1em;
    color: #656565;
}
img {
    width: auto; height: auto;
}
body {
    background-color: #fff;
}
input {
    border: 1px solid #3f3b3a;
}
main {
    background-color: #F2F0EA;
}

/*=====header=======================*/
.swiper1 {
    padding: 9px 0;
    border-bottom: 1px solid #969696;
}
.swiper1 p {
    text-align: center;
    color: #969696;
    font-size: 12px;
}
.swiper-button-next,
.swiper-button-prev {
    color: #969696;
}
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1rem;
}
.fl2__header {
    display: flex;
    gap: 20px;
}
.header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-wrapper {
    width: 95%;
    margin: 0 auto;
    padding: 14px 0;
}
.serch-box {
    width: 20px;
}
.left__fl2-header,
.right-fl2__header {
    width: 25px;
}
.rogo__header {
    width: 50px;
}
.swiper1 .swiper-button-next {
    right: 2%;
}
.swiper1 .swiper-button-prev {
    left: 2%;
}
.fl1__header {
    display: flex;
    gap: 18px;
}

/*=====FV slider=======================*/
.swiper2 {
    width: 100%;
    height: 700px;
}
.swiper2 .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fv-slider .swiper-pagination-bullets {
    margin-top: 16px;
}
.fv-slider .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    margin: 0 0 0 20px !important;
    background: #696969 !important;
}
.fv-slider .swiper-pagination-bullet:first-child {
    margin: 0 !important;
}
.fv-slider {
    margin-bottom: 40px;
}
.topics-area {
    margin-bottom: 50px;
}
/*=====アイテムゾーン1=======================*/
.topics-area h2,
.new-area h2,
.sale-area h2,
.brand-h2 {
    font-size: 12px;
    text-align: center;
    margin-bottom: 28px;
    font-weight: 300;
}
.gr-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    max-width: 990px;
    margin: 0 auto;
}
.gr1-box img {
    margin-bottom: 15px;
    height: 230px;
    object-fit: cover;
    width: 100%;
}
.gr1-box a {
    border-bottom: 1px solid #656565;
    font-size: 14px;
}
.gr1-box {
    text-align: center;
}
.gr-wrapper2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 7px;
    max-width: 990px;
    margin: 0 auto 45px;
}
.new-box,
.sale-box {
    text-align: left;
}
.new-box p,
.sale-box p {
    font-size: 11px;
    margin-bottom: 5px;
    color: #656565;
}
.img-box-gr img {
    margin-bottom: 8px;
}
.all-button {
    text-align: center;
    margin-bottom: 85px;
}
.all-button a {
    color: #AC968A;
    font-size: 14px;
    border: 1px solid #AC968A;
    padding: 10px 12px;
    border-radius: 8px;
}
.off-fl {
    display: flex;
    gap: 15px;
}
.off-fl p:first-child {
    color: #bfbfbf;
    position: relative;
}
.off-fl p:first-child::before {
    content: "";
    background-color: #bfbfbf;
    height: 1px;
    width: 45px;
    display: inline-block;
    position: absolute;
    top: 55%;
    left: -3px;
}
.gr-wrapper-sale .img-box-gr {
    position: relative;
}
.gr-wrapper-sale .img-box-gr::after {
    content: "セール";
    font-size: 11px;
    background-color: #F79E0B;
    color: #fff;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 1px 10px 3px;
    border-radius: 50px;
    border: 1px solid;
}

/*=====アイテムゾーン2=======================*/
.swiper3 {
    height: 430px;
    margin-bottom: 100px;
}
.swiper3 .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.category-h2,
.collections-h2 {
    font-size: 12px;
    text-align: center;
    margin-bottom: 28px;
    font-weight: 300;
}
.gr1__items-area2 {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    max-width: 990px;
    margin: 0 auto 100px;
    column-gap: 7px;
    row-gap: 15px;
}
.image-wrapper {
    position: relative;
    z-index: 1;
    overflow:hidden;
    height: 100%;
}
.image-wrapper img {
    transition:0.2s all;
    height: 100%;
    object-fit: cover;
    filter: brightness(80%);
}
.image-wrapper::before {
    color: #fff;
    position: absolute;
    bottom: 33%;
    right: 0;
    left: 0;
    font-size: 15px;
    z-index: 2;
}
.c-1::before {
    content: "TOPS";
}
.c-2::before {
    content: "BOTTOMS";
}
.c-3::before {
    content: "ALL IN ONE /ONEPIECE";
}
.c-4::before {
    content: "OUTER";
}
.c-5::before {
    content: "ACCESSORY";
}
.c-6::before {
    content: "SALE";
}
.c-7::before {
    content: "BEBE";
}
.c-8::before {
    content: "Adult";
}
.c-9::before {
    content: "DENIM";
}
.image-wrapper:hover img {
    transform: scale(1.09);
}
/*=====コレクションゾーン=======================*/
.fl-1__items-area2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 7px;
    max-width: 990px;
    margin: 0 auto 100px;
    text-align: center;
}
.cl-1::before {
    content: "2024\ASPRING/SUMMER";
}
.cl-2::before {
    content: "2023\A AUTUMN/WINTER";
}
.cl-3::before {
    content: "2023\ASPRING/SUMMER";
}
.cl-4::before {
    content: "即納";
}
/*=====ブランドーゾーン=======================*/
.gr-brand-area {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.br-wrapper img {
    width: 100%;
    height: 130px;
}
.br-1::before {
    content: "GO.U";
}
.br-2::before {
    content: "navi";
}
.br-3::before {
    content: "HEI";
}
.br-4::before {
    content: "BONEOUNE";
}
.br-5::before {
    content: "ramijini";
}
.br-6::before {
    content: "finr studio";
}
.br-7::before {
    content: "andbutter";
}
.br-8::before {
    content: "cocobeige (little colli) ";
}
.br-9::before {
    content: "nightbebe";
}

/*=======スクロールパララックス==============*/
.scroll-area3 h2,
.scroll-area3 p,
.scroll-area3 a {
    color: #fff;
    position: relative;
    z-index: 2;
    font-weight: 200;
}
.scroll {
    background-image: url(../img/raon.jpeg);
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    padding: 190px 0;
    transition: background-size 0.1s ease-out;
    text-align: center;
    position: relative;
}
.scroll::after {
    content: "";
    background: rgba(0,0,0,.4);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.scroll-area3 h2 {
    font-weight: 300;
    margin-bottom: 8px;
}
.scroll-area3 p {
    margin-bottom: 24px;
}
.scroll-area3 a {
    border: 1px solid #fff;
    padding: 6px 16px 8px;
}
.scroll-area3 a:hover {
    border: 2px solid #fff;
}
.scroll-area3 {
    margin-bottom: 30px;
}
/*=======インフォゾーン====================*/
.info-area4 {
    text-align: center;
    margin-bottom: 60px;
}
.info-area4 h2 {
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 8px;
}
.info-area4 a {
    font-size: 14px;
    font-weight: 400;
    color: #c19871;
}
.swiper4 .swiper-button-next,
.swiper4 .swiper-button-prev {
    z-index: 100;
    top: 50%;
}
.swiper4 .swiper-button-next {
    right: 2%;
}
.swiper4 .swiper-button-prev {
    left: 2%;
}
.swiper4 img {
    height: 200px;
    object-fit: cover;
}
.swiper4 {
    width: 1000px;
    margin: 0 auto;
    margin-top: 24px;
}


/*=======メールゾーン====================*/
.mail-area {
    text-align: center;
    padding-bottom: 100px;
}
.mail-area h2 {
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 12px;
}
.mail-area p {
    margin-bottom: 20px;
    font-size: 14px;
}
input {
    padding: 12px 16px 11px;
    width: 20em;
}
/*=======footer====================*/
footer {
    background-color: #F2F0EA;
    padding-bottom: 40px;
}
.fl-wrapper {
    width: 75%;
    margin: 0 auto;
    max-width: 990px;
}
.left__fl-footer li {
    margin-bottom: 8px;
}
.fl-footer {
    display: flex;
    margin-bottom: 35px;
    gap: 350px;
}
.fl-footer h3 {
    font-size: 15px;
    margin-bottom: 20px;
}
.fl-footer a,
.fl-footer p {
    font-size: 12px;
}
.mb8 {
    margin-bottom: 12px;
}
.fl-footer p {
    margin-bottom: 8px;
}
.insta-box {
    padding-bottom: 50px;
    border-bottom: 1px solid #d1d1d1;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}
.credit-box {
    width: 400px;
    margin: 0 auto;
    padding: 40px 0 15px;
}
.copy-right {
    font-size: 10px;
}
.insta-box img {
    width: 24px;
    margin: 0 auto;
}

/*=====スクロールアニメーション==============*/
.gr1-box {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.gr1-box.active {
    opacity: 1;
    transform: translateY(0);
}
.image-wrapper {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.image-wrapper.active {
    opacity: 1;
    transform: translateY(0);
}

.gr1-box.content2,
.c-2,
.cl-2,
.br-2{
    transition-delay: 0.1s;
}
.gr1-box.content3,
.c-3,
.cl-3,
.br-3 {
    transition-delay: 0.2s;
}
.gr1-box.content4,
.c-4,
.cl-4,
.br-4 {
    transition-delay: 0.3s;
}
.c-5,
.br-5 {
    transition-delay: 0.4s;
}
.c-6,
.br-6 {
    transition-delay: 0.5s;
}
.c-7,
.br-7 {
    transition-delay: 0.6s;
}
.c-8,
.br-8 {
    transition-delay: 0.7s;
}
.c-9,
.br-9 {
    transition-delay: 0.8s;
}

/*==============スライダー調整CSS============================*/
.swiper-button-next {
    right: 42%;
    top: 680px;
}
.swiper-button-prev {
    left: 42%;
    top: 680px;
}
.swiper-container {
    position: relative; /* スライダーの相対位置を指定 */
    overflow: visible;  /* コンテンツが隠れないように */
}
.swiper-container2 {
    position: relative;
}
.swiper-container2 .swiper-button-next {
    right: 43%;
    top: 410px;
}
.swiper-container2 .swiper-button-prev {
    left: 43%;
    top: 410px;
}
.swiper-container2 .swiper-pagination-bullet-active {
    background: #696969;
}
.swiper-pagination {
    position: absolute; /* 絶対位置で配置 */
    bottom: 20px; /* スライドの下に配置（必要に応じて調整） */
    left: 50%; /* 中央寄せ */
    transform: translateX(-50%); /* ページネーションを中央に配置 */
    display: flex; /* フレックスボックスで整列 */
    justify-content: center; /* 中央に配置 */
    z-index: 10; /* 他の要素に隠れないように前面に表示 */
}
.fv-slider .swiper-pagination-bullets,
.swiper-container2 .swiper-pagination-bullets {
    bottom: -3px;
    background: #F2F0EA;
    width: 100%;
    left: 50%;
    padding: 20px 0;
}
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 0.7rem;
}
.swiper4 .swiper-button-next::after,
.swiper4 .swiper-button-prev::after {
    background-color: #fff;
    padding: 7px 12px;
    border-radius: 100%;
    top: 50%;
}
/*========追従ボタン======================================*/
.raon-point {
    position: fixed;
    bottom: 0;
    right: 20px;
    z-index: 999;
    font-size: 1rem;
    background-color: #F08C26;
    color: #fff;
    padding: 5px 15px;
    letter-spacing: 0.01em;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    border: none;
}
.raon-point:hover {
    opacity: .6;
}
.chat-btn {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 999;
    background-color: #AC968A;
    padding: 9px;
    border-radius: 100%;
}
.chat-btn img {
    width: 40px;
}
/*モーダルエリア*/
.point-mordal-area {
    position: relative;
}
body.modal-open {
    overflow: hidden; /* スクロールを無効にする */
    height: 100%; /* 高さを100%にする */
}
.modal {
    display: none; /* 最初は非表示 */
    position: fixed; /* 固定位置 */
    z-index: 1000; /* 他の要素の上に表示 */
    left: 0;
    top: 0;
    width: 100%; /* 画面全体 */
    height: 100%; /* 画面全体 */
    overflow: auto; /* スクロール可能 */
    background-color: rgba(0, 0, 0, 0.5); /* 背景を半透明に */
    opacity: 0;
    transition: opacity 0.5s ease; /* フェード効果 */
}

.modal-content {
    background-color: #fff;
    margin: 15% auto; /* 縦位置を中央に */
    margin-top: 5%;
    padding: 25px 40px 15px;
    border: 20px solid orange;
    width: 500px;
    max-width: 600px; /* 最大幅を600pxに */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modalClose {
    cursor: pointer; /* カーソルをポインターに */
    font-size: 24px; /* フォントサイズ */
}
.is-open {
    display: block;
    opacity: 1;
}
/*モーダル内、タブメニュー*/
.tab-group {
    margin-top: 20px;
    width: 100%;
    list-style: none;
    text-align: center;
    margin-bottom: 20px;
}
.tab-button {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    cursor: pointer;
    color: #F08C26;
    margin-bottom: 8px;
    gap: 12px;

}
.tab-button .is-active {
    border-bottom: 5px solid #F08C26;
    color: #656565;
}
.tab-button .tab {
    font-size: 11px;
    text-align: left;
}
.tab {
    /*width: calc(100% / 3);*/
    border-bottom: none;
    padding-bottom: 8px;
}
.tab-contents {
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding-top: 6px;
    height: 200px;
}
.tab-contents .content {
    display: none;
    padding: 8px 0;
    text-align: left;
}
.content.is-display {
    display: block;
}
.modal-body {
    text-align: center;
}
.fl-content2 {
    display: flex;
    justify-content: space-between;
}
.fl-content2 p {
    width: 44%;
}
.tab-o2__content {
    margin-bottom: 12px;
    padding-left: 48px;
    position: relative;
}
.tab-o2__content h3 {
    font-size: 17px;
}
.tab-o2__content p {
    font-size: 12px;
}
.s-text p,.fl-modal2 a,.fl-modal2 p {
    font-size: 11px;
}
.point-t {
    color: #F08C26;
    font-size: 11px;
}
.touroku-btn {
    background-color: orange;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 20px 6px;
    border-radius: 3px;
}
.t-300 {
    margin-bottom: 12px;
}
.s-text {
    margin-top: 10px;
}
.fl-modal2 {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.fl-modal2 a {
    color: #F08C26;
}
.teikyou {
    text-align: left;
}
.tab2-1::before {
    content: "";
    background-image: url(../img/pen.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
}
.tab2-2::before {
    content: "";
    background-image: url(../img/cart.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 37px;
    height: 40px;
}
.tab-03__scroll-area {
    max-height: 283px; /* お好みの高さに調整 */
    overflow-y: auto; /* 縦方向のスクロールを可能に */
    padding-right: 15px; /* スクロールバーがコンテンツに重ならないようにパディングを追加 */
}
/*=====ハンバーガーメニュー==============*/
header {
    position: fixed;
    z-index: 120;
    width: 100%;
    background-color: #fff;
    top: 0;
    left: 0;
    transition: transform 0.3s ease;
}
header.hide {
    transform: translateY(-100%);
}
.hamburger {
    width: 25px;
    height: 18px;
    position: relative;
    z-index: 11;
}
.hamburger span {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #3f3b3a;
    transition: all 0.3s ease;
}
.hamburger span:first-child {
    top: 0;
}
.hamburger span:nth-child(2) {
    top: 50%;
}
.hamburger span:nth-child(3) {
    top: 100%;
}
.slide-menu {
    background-color: rgba(255, 255, 255, .9);
    position: fixed;
    width: 30%;
    height: 100svh;
    top: 89px;
    left: 0;
    z-index: 10;
    transform: translateX(-100%); /*追記*/
    transition: all 0.3s ease;
}
.slide-menu li {
    color: #3f3b3a;
    line-height: 400%;
    text-align: left;
    padding-left: 10%;
    transition: all 0.1s ease;
}
.slide-menu li:hover {
    background-color: #bfbfbf;
}
body {
    overflow-x: hidden;
}
.active {
    transform: translateX(0);
}
.hamburger.active-mark span:first-child {
    top: 50%;
    transform: rotate(45deg);
}
.hamburger.active-mark span:nth-child(2) {
    opacity: 0;
}
.hamburger.active-mark span:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg);
}
.no-scroll {
    overflow: hidden;
}
.ham-arrow {
    position: relative;
}
.ham-arrow::after {
    content: "→";
    position: absolute;
    font-size: 18px;
    top: 2px;
    right: 10%;
}