/* //////////////////// CSSルール //////////////////// */
/* - SP→PCで記述（min-widthメイン） */

/* ==========変数========== */
/* 命名規則例：--[種別-種別]-[色]:カラーコード */

/* color（色） */
:root {
    /* c：文字色 */
    --c-black: #030303;
    --c-white: #ffffff;
    --c-gray: #bfbfbf;
    /* bg：背景色 */
    --bg-color-black: #000000;
    --bg-color-white: #ffffff;
    --bg-color-gray: #bfbfbf;
    --bg-color-darkgray: #333333;
    /* border：線 */
    --border-gray: #bfbfbf;
    --border-black: #000000;
    /* その他 */
    --shadow-black: #000000;
    --shadow-gray: #eae8ea;
}

/* z-index（表示優先度） */

:root {
    --z-index-none: -10;
    --z-index-primary: 1;
    --z-index-secondary: 10;
    --z-index-infinity: calc(infinity);
}

/* font-size（フォントサイズ） */
/* 8/19川端 本当はemのほうがアクセシビリティ対応的には良いけど一旦置き */

:root {
    --fz-small_sp: 10px;
    --fz-small_pc: 20px;
    --fz-primary_sp: 16px;
    --fz-primary_pc: 22px;
    --fz-card_sp: 12px;
    --fz-card_pc: 24px;
    --fz-second_sp: 20px;
    --fz-second_pc: 36px;
    --fz-large_sp: 25px;
    --fz-large_pc: 50px;
    --fz-title_sp: 37px;
    --fz-title_pc: 74px;
}

/* 余白 */

:root {
    --section-padding-top_sp: 100px;
    --section-padding-top_pc: 200px;
}

/* その他 */
:root {
    /* footerの高さ */
    --footer-height_sp: 375px;
    --footer-height_pc: 600px;
    /* FVの高さ */
    --fv-height_sp: 600px;
    --fv-height_pc: 880px;
    /* 角丸（100%） */
    --border-radius-infinity: calc(infinity * 1px);
    /* カードの大きさ */
    --card-max-width: 300px;
    /* 商品個別ページのインライン */
    --product-section-inline: 300px;
}

/* ==================== 共通 ==================== */

@font-face {
    font-family: "Trade Gothic LT Std Condensed No. 18 Oblique";
    src: url("/wp-content/themes/beaxis-2024/assets/fonts/Trade Gothic LT Std Condensed No. 18 Oblique file/Trade Gothic LT Std Condensed No. 18 Oblique.otf") format("opentype");
    font-style: oblique;
    font-weight: normal;
}

*:focus {
    outline: none;
    box-shadow: none;
}

a,
button {
    cursor: pointer;
}

html {
    color: var(--c-black);
    font-size: var(--fz-primary_sp);
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
}
@media (min-width: 768px) {
    html {
        font-size: var(--fz-primary_pc);
    }
}

.section {
    width: 100%;
    padding-top: var(--section-padding-top_sp);
}
@media (min-width: 768px) {
    .section {
        padding-top: var(--section-padding-top_pc);
    }
}

.section-title {
    text-align: center;
    font-size: var(--fz-title_sp);
    font-family: "Trade Gothic LT Std Condensed No. 18 Oblique", "Noto Sans JP", sans-serif;
    font-weight: bold;
    font-style: italic;
}
@media (min-width: 768px) {
    .section-title {
        font-size: var(--fz-title_pc);
    }
}

.section-description {
    text-align: center;
    margin-top: 20px;
}

.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

.card_hover {
    transition: 0.5s ease;
}
.card_hover:hover {
    box-shadow: 20px -20px 20px 0px rgba(0, 0, 0, 0.2);
    translate: -5px 5px;
    transition: 0.5s ease;
}

/* ========== header ========== */

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    z-index: var(--z-index-infinity);
}

header.fixed-position {
    position: fixed;
    animation: slideIn 0.5s ease-in-out forwards;
}
@keyframes slideIn {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

.header-wrapper {
    padding: 30px 30px 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media (min-width: 1080px) {
    .header-wrapper {
        padding: 30px 120px 10px 80px;
    }
}

.header-logo {
    text-align: center;
    color: var(--c-white);
    position: relative;
}

.header-logo_after::after {
    content: "目覚めろ、体幹。";
    font-size: 14px;
    color: var(--c-white);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 55%;
    bottom: -30px;
    translate: -50% 0;
    text-wrap: nowrap;
}
@media (min-width: 768px) {
    .header-logo_after::after {
        font-size: 18px;
    }
}

.header-logo a {
    display: block;
    width: fit-content;
    height: 100%;
    max-height: 40px;
    width: 130px;
    aspect-ratio: 5/13;
}
@media (min-width: 768px) {
    .header-logo a {
        max-height: 60px;
        width: 200px;
    }
}

.header-logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5));
}

.header-right_wrapper {
    display: flex;
    gap: 20px;
}
@media (min-width: px) {
    .header-right_wrapper {
        gap: 30px;
    }
}

.header-icon_cart {
    height: 20px;
    max-width: 20px;
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.6));
}
@media (min-width: 768px) {
    .header-icon_cart {
        height: 40px;
        max-width: 40px;
        filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.6));
    }
}

.header-icon_cart > img {
    height: 100%;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.header-hamburger {
    z-index: var(--z-index-infinity);
    display: flex;
}

.header-hamburger .hamburger-border_wrapper {
    height: 25px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 768px) {
    .header-hamburger .hamburger-border_wrapper {
        height: 36px;
        gap: 18px;
    }
}

.header-hamburger .hamburger-border {
    display: block;
    background-color: var(--bg-color-white);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    height: 2px;
    width: 25px;
    border-radius: var(--border-radius-infinity);
    transition: ease 0.5s;
}
@media (min-width: 768px) {
    .header-hamburger .hamburger-border {
        width: 50px;
    }
}

.header-hamburger.active .hamburger-border:nth-child(1) {
    translate: 0 10px;
    rotate: -35deg;
}
.header-hamburger.active .hamburger-border:nth-child(2) {
    display: none;
}
.header-hamburger.active .hamburger-border:nth-child(3) {
    translate: 0 -6px;
    rotate: 35deg;
}
@media (min-width: 768px) {
    .header-hamburger.active .hamburger-border:nth-child(1) {
        translate: 0 20px;
    }
}

.header-navigation {
    background-color: var(--bg-color-black);
    color: var(--c-white);
    max-height: 100svh;
    width: 220px;
    font-size: var(--fz-second_sp);
    letter-spacing: 0.1em;
    line-height: 2.2;
    overflow: scroll;
    position: fixed;
    top: 0;
    right: -220px;
    z-index: var(--z-index-none);
    translate: 220px 0px;
    transition: 1s ease, visibility 0s 1s;
    visibility: hidden;
    pointer-events: none;
}
@media (min-width: 768px) {
    .header-navigation {
        right: -440px;
        height: fit-content;
        width: 440px;
        translate: 440px 0px;
        font-size: var(--fz-second_pc);
    }
}
.header-navigation.active {
    right: 0;
    translate: 0px 0px;
    transition: 1s ease, visibility 0s;
    visibility: visible;
    z-index: var(--z-index-secondary);
    pointer-events: auto;
}

.header-navigation .navigation-list {
    margin: 75px 25px 20px;
}
@media (min-width: 768px) {
    .header-navigation .navigation-list {
        margin: 150px 50px 40px;
    }
}

.header-navigation .navigation-list span {
    display: inline-block;
    margin-left: 10px;
    text-wrap: nowrap;
}
@media (min-width: 768px) {
    .header-navigation .navigation-list span {
        margin-left: 20px;
    }
}

/* header-black（常時fixed） */

.header_black {
    background-image: linear-gradient(rgb(85, 85, 85) 10%, rgb(0, 0, 0));
    position: fixed;
}

.header-wrapper_black {
    padding: 10px 30px 10px 10px;
}
@media (min-width: 1080px) {
    .header-wrapper_black {
        padding: 10px 80px 10px 20px;
    }
}

/* ========== footer ========== */

.footer-wrapper {
    position: relative;
}

.footer-img_bg img {
    height: var(--footer-height_sp);
    width: 100%;
    object-fit: cover;
    object-position: top;
}
@media (min-width: 768px) {
    .footer-img_bg img {
        height: var(--footer-height_pc);
    }
}

.footer-logo {
    width: fit-content;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr;
    gap: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    color: var(--c-white);
}

.footer-logo > img {
    width: 240px;
    height: auto;
    object-fit: contain;
}
@media (min-width: 768px) {
    .footer-logo > img {
        width: 470px;
    }
}

.footer-logo_text {
    font-size: var(--fz-large_sp);
    width: fit-content;
    margin-inline: auto;
    translate: 10px 0px;
}
@media (min-width: 768px) {
    .footer-logo_text {
        font-size: var(--fz-large_pc);
    }
}

.footer-support {
    background-color: var(--bg-color-white);
    color: var(--c-black);
    height: 100px;
    aspect-ratio: 1/1;
    border-radius: var(--border-radius-infinity);
    display: grid;
    place-content: center;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
@media (min-width: 768px) {
    .footer-support {
        height: 140px;
        right: 50px;
        bottom: 50px;
    }
}

.footer-copyright {
    font-size: min(8px, 10px);
    color: var(--c-white);
    font-weight: 100;
    position: absolute;
    bottom: 5px;
    left: 5px;
}
@media (min-width: 768px) {
    .footer-copyright {
        font-size: 10px;
    }
}

/* ==================== トップページ（front-page.php） ==================== */

/* ========== FV（top-fv） ========== */

.top-fv {
    position: relative;
}

.fv-item {
    width: 100%;
    position: relative;
}

.fv_img {
    width: 100%;
    aspect-ratio: 5 / 8;
}
@media (min-width: 1080px) {
    .fv_img {
        aspect-ratio: 512 / 265;
    }
}

.fv_img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.fv_text {
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    font-size: var(--fz-second_sp);
    color: var(--c-white);
    font-weight: bold;
}
.fv_button {
    height: 25px;
    width: 100%;
    max-width: 75px;
    aspect-ratio: 1/3;
    filter: drop-shadow(0px 0px 5px var(--shadow-black));
}
@media (min-width: 768px) {
    .fv_text {
        bottom: 40px;
        left: 60px;
        gap: 24px;
        font-size: var(--fz-second_pc);
    }
    .fv_button {
        height: 40px;
        max-width: 120px;
    }
}
@media (min-width: 1900px) {
    .fv_text {
        left: 100px;
    }
}

.fv_button > img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    filter: invert(100%) brightness(100%);
}

/* swiper調整用 */
.top-fv .swiper-pagination {
    position: absolute;
    left: 0;
    bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
@media (min-width: 768px) {
    .top-fv .swiper-pagination {
        bottom: 50px;
        gap: 40px;
    }
}

.top-fv .swiper-pagination-bullet {
    background-color: var(--bg-color-white);
    opacity: 0.5;
    width: 5px;
    height: 5px;
    border-radius: var(--border-radius-infinity);
    box-shadow: 0px 0px 15px 0.5px rgba(0, 0, 0, 1);
}
@media (min-width: 768px) {
    .top-fv .swiper-pagination-bullet {
        width: 15px;
        height: 15px;
    }
}

.top-fv .swiper-pagination-bullet-active {
    opacity: 1;
}

/* ========== ABOUT（about-section） ========== */

.about-section {
    padding-top: 40px;
}
@media (min-width: 768px) {
    .about-section {
        padding-top: var(--section-padding-top_sp);
    }
}

.about-section_description {
    margin-top: 30px;
    text-align: center;
    width: fit-content;
    line-height: 2.5em;
    margin-inline: auto;
}

.about-section_mark-design {
    margin-top: 50px;
    margin-inline: auto;
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}
@media (min-width: 768px) {
    .about-section_mark-design {
        margin-top: 100px;
        grid-column-gap: 60px;
        grid-row-gap: 30px;
    }
}

.mark-design_img {
    grid-area: 1 / 1 / 3 / 2;
    width: fit-content;
    max-width: 100px;
}
@media (min-width: 768px) {
    .mark-design_img {
        max-width: 250px;
    }
}

.mark-design_img > img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
@media (min-width: 768px) {
    .mark-design_img > img {
        height: 210px;
        width: 240px;
    }
}

.mark-design_title {
    grid-area: 1 / 2 / 2 / 4;
    font-size: 30px;
    font-family: "Trade Gothic LT Std Condensed No. 18 Oblique", "Noto Sans JP", sans-serif;
    font-weight: bold;
    font-style: italic;
}
@media (min-width: 768px) {
    .mark-design_title {
        font-size: 40px;
    }
}

.mark-design_text {
    grid-area: 2 / 2 / 3 / 4;
    /* font-size: var(--fz-small_sp); */
    line-height: 1.8em;
    letter-spacing: 1.5px;
    text-wrap: nowrap;
}
@media (min-width: 768px) {
    .mark-design_text {
        font-size: var(--fz-small_pc);
    }
}

/* ========== Instagram（instagram-section） ========== */

.instagram-section {
    margin-inline: auto;
    max-width: 1200px;
}

.instagram-list-wrapper {
    margin-top: 40px;
    margin-inline: auto;
    width: fit-content;
    max-width: 100%;
    overflow-x: scroll;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion) {
    .instagram-list-wrapper {
        scroll-behavior: auto;
    }
}
@media (min-width: 768px) {
    .instagram-list-wrapper {
        margin-top: 120px;
        max-width: 100%;
    }
}

.instagram-list {
    display: flex;
    gap: 15px;
    width: max-content;
}
@media (min-width: 768px) {
    .instagram-list {
        gap: 30px;
    }
}

.instagram-list-item a {
    display: block;
    height: 200px;
    aspect-ratio: 1/1;
}
@media (min-width: 768px) {
    .instagram-list-item a {
        height: 400px;
    }
}

.instagram-list-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* ========== Product Pickup（product_pickup-section） ========== */
/* 一部BEAXIS SALON個別ページ（single-beaxis_salon.php）でも流用 */

.product_pickup-list {
    margin-top: 30px;
    margin-inline: auto;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 25px;
}
@media (min-width: 768px) {
    .product_pickup-list {
        margin-top: 60px;
        grid-template-columns: repeat(2, auto);
        grid-row-gap: 90px;
    }
}
@media (min-width: 1536px) {
    .product_pickup-list {
        grid-template-columns: repeat(3, auto);
        grid-column-gap: 50px;
    }
}

.product_pickup-list-item {
    width: 100%;
    position: relative;
}

.product_pickup-section .product_pickup-list-item:nth-child(n + 5) {
    display: none;
}
@media (min-width: 1224px) {
    .product_pickup-section .product_pickup-list-item:nth-child(n + 5) {
        display: block;
    }
}

.product_pickup-list-item .item-img {
    width: 100%;
    aspect-ratio: 1/1;
}

.product_pickup-list-item .item-img > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.product_pickup-list-item .item-text {
    min-height: 60px;
    padding: 10px 10px 0;
}
@media (min-width: 768px) {
    .product_pickup-list-item .item-text {
        min-height: 120px;
        padding: 20px 20px 0;
    }
}

.product_pickup-list-item h3,
.product_pickup-list-item p {
    line-height: 1.6;
    letter-spacing: 0.1em;
}
@media (min-width: 1080px) {
    .product_pickup-list-item h3,
    .product_pickup-list-item p {
        font-size: var(--fz-card_pc);
    }
}

.product_pickup-list-item .item-button,
.product .product-button {
    height: 30px;
    width: 100%;
    max-width: 90px;
    aspect-ratio: 1 / 3;
    position: absolute;
    right: 0;
    bottom: 0;
}
@media (min-width: 768px) {
    .product_pickup-list-item .item-button,
    .product .product-button {
        height: 40px;
        width: 120px;
    }
}

.product_pickup-list-item .item-button > img,
.product .product-button > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product_pickup-list-item .item-price > span {
    font-size: var(--fz-card_sp);
    margin-left: 2px;
}
@media (min-width: 768px) {
    .product_pickup-list-item .item-price > span {
        font-size: 16px;
    }
}

/* ========== ALL ITEMS（all_items-section） ========== */

.all_items-list-wrapper {
    margin-top: 50px;
}
@media (min-width: 768px) {
    .all_items-list-wrapper {
        margin-top: 100px;
    }
}

.all_items-category-list {
    margin-inline: auto;
    max-width: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-style: italic;
}

.all_items-category-list:nth-child(1) {
    margin-bottom: 25px;
    font-size: var(--fz-second_sp);
}
@media (min-width: 768px) {
    .all_items-category-list:nth-child(1) {
        font-size: var(--fz-second_pc);
        gap: 60px;
    }
}

.all_items-category-list.accent-toggle {
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    padding: 15px 20px;
    width: fit-content;
    border-radius: 10px;
    position: relative;
    gap: 20px;
}
@media (min-width: 768px) {
    .all_items-category-list.accent-toggle {
        padding: 20px;
        font-size: var(--fz-small_pc);
        gap: 30px;
    }
    .all_items-category-list br {
        display: none;
    }
}

.all_items-category-list.accent-toggle::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid white;
    z-index: 1;
}
@media (min-width: 768px) {
    .all_items-category-list.accent-toggle::before {
        left: 30px;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 30px solid white;
    }
}

.all_items-category-list.accent-toggle::after {
    content: "";
    position: absolute;
    top: -20px;
    left: 35px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid rgba(0, 0, 0, 0.2);
    z-index: 0;
    filter: blur(3px);
}
@media (min-width: 768px) {
    .all_items-category-list.accent-toggle::after {
        top: -27px;
        left: 35px;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 25px solid rgba(0, 0, 0, 0.1);
    }
}
/* ========== BEAXIS SALON（beaxis_salon-section） ========== */

.beaxis_salon-section {
    padding-bottom: 100px;
    overflow-x: hidden;
}
@media (min-width: 768px) {
    .beaxis_salon-section {
        padding-top: 100px;
        padding-bottom: 200px;
    }
}

.beaxis_salon-list-wrapper {
    margin-top: 50px;
    margin-inline: auto;
    width: 100%;
    max-width: 1260px;
    overflow-x: scroll;
    scroll-behavior: smooth;
}
@media (min-width: 768px) {
    .beaxis_salon-list-wrapper {
        margin-top: 100px;
    }
}
@media (prefers-reduced-motion) {
    .beaxis_salon-list-wrapper {
        scroll-behavior: auto;
    }
}

.beaxis_salon-list {
    margin-inline: auto;
    width: max-content;
    display: flex;
    overflow: hidden;
}
@media (min-width: 1536px) {
    .beaxis_salon-list {
        gap: 30px;
    }
}

.beaxis_salon-list-item {
    width: fit-content;
}

.beaxis_salon-list-item a {
    display: block;
    height: 200px;
    aspect-ratio: 1/1;
}
@media (min-width: 768px) {
    .beaxis_salon-list-item a {
        height: 350px;
    }
}
@media (min-width: 1024px) {
    .beaxis_salon-list-item a {
        height: 400px;
    }
}

.beaxis_salon-list-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.beaxis_salon-next_button {
    margin-top: 50px;
    margin-inline: auto;
    display: block;
    height: 50px;
    aspect-ratio: 118/39;
    max-width: 300px;
    transition: ease 0.5s;
}
@media (min-width: 768px) {
    .beaxis_salon-next_button {
        height: 80px;
    }
}

.beaxis_salon-next_button:hover {
    translate: 5px -5px;
    transition: ease 0.5s;
    box-shadow: -5px 5px 5px 0px rgba(0, 0, 0, 0.2);
}

.beaxis_salon-next_button > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================== 商品一覧ページ（archive-product-item.php） ==================== */
/* ※商品カテゴリー別一覧（taxonomy-product-item_cat.php）にも反映 */
/* ※一部、商品カスタム投稿個別ページ（single-product-item.php）にも反映 */

.product_item-fv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 11/16;
}

.product_item-section {
    padding: 100px 0 70px;
}
@media (min-width: 768px) {
    .product_item-section {
        padding: 150px 0 100px;
    }
}

.product_item-section .section-title_wrapper {
    width: fit-content;
    margin-inline: auto;
    padding-bottom: 60px;
}

.product_item-section .section-description {
    margin-top: 10px;
}

.product_item-list_wrapper {
    margin-inline: auto;
    width: fit-content;
    max-width: calc(var(--card-max-width) * 5 + 60px);
}
.product_item-list {
    margin-inline: auto;
    width: 100%;
    max-width: 100vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--card-max-width));
    gap: 15px;
}

.product {
    line-height: 1.8em;
    letter-spacing: 0.1em;
    position: relative;
}
@media (min-width: 768px) {
    .product {
        font-size: var(--fz-small_pc);
    }
}

.product-img {
    width: var(--card-max-width);
    max-height: var(--card-max-width);
    aspect-ratio: 1/1;
}

.product-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.product-text {
    padding: 5px;
    position: relative;
}

.product-price span {
    margin-left: 5px;
    font-size: 14px;
}
@media (min-width: 768px) {
    .product-price span {
        font-size: var(--fz-small_pc);
    }
}

/* ==================== 商品カテゴリー別一覧（taxonomy-product-item_cat.php） ==================== */

/* ==================== 商品個別ページ（single-product-item.php） ==================== */

.single_product-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* image-rendering: ; */
}

.single_product-main {
    padding-bottom: 150px;
}

@media (min-width: 768px) {
    .single_product-main .product-img {
        width: calc(var(--card-max-width) * 2);
        max-height: calc(var(--card-max-width) * 2);
    }
}

.title-section {
    margin-top: 100px;
}
@media (min-width: 768px) {
    .title-section {
        margin-top: 150px;
    }
}

.title-section .product-page_title {
    font-size: var(--fz-second_sp);
}
@media (min-width: 768px) {
    .title-section .product-page_title {
        font-size: clamp(var(--fz-title_sp), 3vw, var(--fz-title_pc));
    }
}

.pr-section {
    margin-inline: auto;
}

.pr-section-title {
    margin: 150px 0 50px;
    font-size: var(--fz-title_sp);
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
@media (min-width: 768px) {
    .pr-section-title {
        margin: 70px 0 25px;
        font-size: var(--fz-title_pc);
    }
}

.pr-section-title .section-title_img {
    width: 70px;
    max-height: 70px;
    aspect-ratio: 1/1;
}

.pr-section-title .section-title_img > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pr-section .product-series_title {
    margin: 150px 0 0;
}
@media (min-width: 768px) {
    .pr-section .product-series_title {
        font-size: 50px;
    }
}

.product-fv {
    position: relative;
}

.product-fv_img {
    width: 100%;
    aspect-ratio: 5 / 8;
}
@media (min-width: 1080px) {
    .product-fv_img {
        aspect-ratio: 512 / 265;
    }
}

.product-fv_text {
    position: absolute;
    bottom: 10px;
    left: 15px;
    height: 25vw;
    aspect-ratio: 12/7;
}
@media (min-width: 1080px) {
    .product-fv_text {
        left: 60px;
        height: min(300px, 15vw);
        max-width: 600px;
    }
}

.product-fv_text > img {
    object-fit: contain;
}

.pr-section_inner,
.product-common {
    margin-inline: auto;
}
@media (min-width: 768px) {
    .pr-section_inner,
    .product-common {
        max-width: calc(var(--product-section-inline) * 2);
    }
}

.product-lp_img {
    width: 100%;
    height: auto;
    margin-inline: auto;
}

.product-movie_mv {
    margin-top: 80px;
    margin-inline: auto;
    width: 90%;
    aspect-ratio: 1/1;
}

.product-movie_mv video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-supplement_img {
    margin-top: 40px;
}
@media (min-width: 768px) {
    .product-supplement_img {
        margin-top: 150px;
    }
}

.product-instagram {
    margin-top: 50px;
}
@media (min-width: 768px) {
    .product-instagram {
        margin-top: 200px;
    }
}

.product-instagram .instagram-list_wrapper {
    max-width: 100%;
    width: fit-content;
    margin-inline: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion) {
    .product-instagram .instagram-list-wrapper {
        scroll-behavior: auto;
    }
}
@media (min-width: 1080px) {
    .product-instagram .instagram-list_wrapper {
        max-width: calc(var(--card-max-width) * 3 + 30px * 2);
    }
}

.product-instagram .instagram-list .list-item {
    width: var(--card-max-width);
    aspect-ratio: 1/1;
}

.product-common {
    width: 100%;
    height: auto;
}

.product-common > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media_banner {
    margin-top: 75px;
}
@media (min-width: 768px) {
    .media_banner {
        margin-top: 130px;
    }
}

.ec_banner-img {
    margin-top: 75px;
}
@media (min-width: 768px) {
    .ec_banner-img {
        margin-top: 130px;
    }
}

.total_sales_banner {
    margin-top: 30px;
}
@media (min-width: 768px) {
    .total_sales_banner {
        margin-top: 60px;
    }
}

.product-section_inner {
    margin-top: 50px;
}
@media (min-width: 768px) {
    .product-section_inner {
        margin-top: 100px;
    }
}

.product-section_inner,
.ec_banner-img {
    margin-inline: auto;
    max-width: var(--card-max-width);
}
@media (min-width: 768px) {
    .product-section_inner,
    .ec_banner-img {
        max-width: calc(var(--card-max-width) * 2);
    }
}

.product-img_slider-wrapper,
.product-supplement-img_slider-wrapper {
    position: relative;
}

.product-img_slider,
.product-supplement-img_slider {
    overflow-x: hidden;
}

.product-img_slider-wrapper :is(.swiper-button-prev, .swiper-button-next),
.product-supplement-img_slider-wrapper :is(.swiper-button-prev, .swiper-button-next) {
    display: none;
}
@media (min-width: 768px) {
    .product-img_slider-wrapper :is(.swiper-button-prev, .swiper-button-next),
    .product-supplement-img_slider-wrapper :is(.swiper-button-prev, .swiper-button-next) {
        display: block;
        color: #000;
    }
    .product-img_slider-wrapper .swiper-button-prev,
    .product-supplement-img_slider-wrapper .swiper-button-prev {
        left: -30px;
    }
    .product-img_slider-wrapper .swiper-button-next,
    .product-supplement-img_slider-wrapper .swiper-button-next {
        right: -40px;
    }
}

.product-img_slider-wrapper .swiper-pagination,
.product-supplement-img_slider-wrapper .swiper-pagination {
    bottom: -20px;
}
@media (min-width: 768px) {
    .product-img_slider-wrapper .swiper-pagination,
    .product-supplement-img_slider-wrapper .swiper-pagination {
        bottom: -30px;
    }
}

.product-img_slider-wrapper .swiper-pagination span,
.product-supplement-img_slider-wrapper .swiper-pagination span {
    background: #000;
    margin: 0 10px !important;
}

.pr-section .product-slogan {
    margin-top: 50px;
}

.product-section .product-img {
    aspect-ratio: 65 / 61;
}

.product-detail,
.product-cart,
.product-slogan,
.product-spec {
    margin-inline: auto;
    width: 90%;
}

.product-detail {
    margin-top: 40px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.01em;
    line-height: 1.8;
}
@media (min-width: 768px) {
    .product-detail {
        margin-top: 60px;
        font-size: var(--fz-card_pc);
        font-weight: bold;
    }
}

.product-slogan {
    margin-top: 10px;
    letter-spacing: 0.01em;
    line-height: 1.5;
}

.product-spec {
    margin-top: 50px;
    letter-spacing: 0.005em;
    line-height: 1.5;
}

.product-spec .spec-list {
    display: grid;
    row-gap: 5px;
    font-size: 14px;
}

.product-spec .spec-item {
    display: grid;
    grid-template-columns: 2fr 3fr;
}
@media (min-width: 768px) {
    .product-spec .spec-item {
        grid-template-columns: 2fr 7fr;
    }
}

.product-spec .spec-item_title {
    text-align-last: justify;
}

.product-spec .spec-item_title::before {
    content: "【";
    top: 0;
    left: 0;
}

.product-spec .spec-item_title::after {
    content: "】";
    top: 0;
    right: 0;
}

.product-cart {
    margin-top: 30px;
}
@media (min-width: 768px) {
    .product-cart {
        margin-top: 60px;
    }
}

.variation-item {
    margin-top: 60px;
}
@media (min-width: 768px) {
    .variation-item {
        margin-top: 120px;
    }
}

/* サイズ・数量ドロップダウンカスタム */
.dropdown_wrapper {
    max-width: 200px;
    height: 30px;
    display: flex;
    border: 2px solid var(--border-gray);
}
@media (min-width: 768px) {
    .dropdown_wrapper {
        max-width: 100%;
        height: 50px;
    }
}

.size-dropdown {
    margin-bottom: 10px;
    min-width: 250px;
}
@media (min-width: 768px) {
    .size-dropdown {
        max-width: 500px;
    }

    .quantity-dropdown {
        max-width: 380px;
    }
}

.dropdown_text {
    width: 80px;
    background-color: var(--bg-color-gray);
    display: grid;
    place-items: center;
    font-size: var(--fz-card_sp);
}
@media (min-width: 768px) {
    .dropdown_text {
        width: 150px;
        min-width: 150px;
        font-size: var(--fz-card_pc);
    }
}

.dropdown {
    width: 100%;
    display: inline-block;
    background-color: #fff;
    transition: all 0.5s ease;
    position: relative;
    color: #474747;
    height: 100%;
    text-align: left;
}

.dropdown_icon {
    height: 100%;
    aspect-ratio: 1/1;
    position: absolute;
    top: 0;
    right: 0;
    transition: transform 0.3s ease;
    transform: scaleY(1);
}
.dropdown_icon::before {
    content: url(../img/single-product-item/doropdown_arrow.svg);
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    transform: scale(0.6);
}
@media (min-width: 768px) {
    .dropdown_icon::before {
        transform: scale(0.8);
    }
}

.dropdown .select {
    cursor: pointer;
    display: grid;
    height: 100%;
    align-items: center;
    padding: 0 8px;
}
@media (min-width: 768px) {
    .dropdown .select {
        padding: 0 16px;
    }
}

.dropdown:active {
    background-color: #f8f8f8;
}

.dropdown.active .dropdown_icon {
    transform: scaleY(-1);
}

.dropdown.active:hover,
.dropdown.active {
    background-color: #f8f8f8;
}

.dropdown.active .select > i {
    transform: rotate(-90deg);
}

.dropdown .dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: 100%;
    top: calc(100% + 3px);
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    overflow: hidden;
    display: block;
    max-height: 144px;
    overflow-y: auto;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.dropdown .dropdown-menu li {
    padding: 10px;
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
}

.dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2;
}

.dropdown .dropdown-menu li:active {
    background-color: #e2e2e2;
}

.product-cart .cart-submit {
    margin-top: 30px;
    margin-inline: auto;
    background: linear-gradient(-90deg, #f8b62d 0%, #f39800 100%);
    color: var(--c-white);
    width: 100%;
    display: grid;
    place-items: center;
    height: 50px;
    border-radius: 10px;
}
@media (min-width: 768px) {
    .product-cart .cart-submit {
        margin-top: 60px;
        height: 100px;
        border-radius: 20px;
        max-width: 560px;
    }
}

/* ==================== BEAXIS SALON一覧ページ（archive-beaxis_salon.php） ==================== */
/* 一部 BEAXIS SALON（slug:user-story）で表示している記事にも適応 */

/* 固有の変数 */
:root {
    --archive-beaxis_salon-col-gap: 20px;
}

.archive-beaxis_salon-section {
    padding-top: 80px;
}
@media (min-width: 768px) {
    .archive-beaxis_salon-section {
        padding-top: 220px;
    }
}

.archive-beaxis_salon-section img,
.user_story-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.archive-beaxis_salon-list,
.user_story-list {
    margin-inline: auto;
    padding: 40px 0 100px;
    width: 80%;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    column-gap: var(--archive-beaxis_salon-col-gap);
    row-gap: 30px;
    text-align: center;
}
@media (min-width: 768px) {
    .archive-beaxis_salon-list,
    .user_story-list {
        padding: 80px 0 100px;
        grid-template-columns: repeat(auto-fit, calc((100% / 2) - var(--archive-beaxis_salon-col-gap)));
        row-gap: 60px;
    }
}

.archive-beaxis_salon-list .post,
.user_story-post {
    width: 100%;
    height: fit-content;
}

.archive-beaxis_salon-list .post-img,
.user_story-list .user_story-img {
    width: 100%;
    aspect-ratio: 1/1;
}

.archive-beaxis_salon-list .post-text,
.user_story-list .user_story-title {
    margin-top: 10px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    font-size: var(--fz-second_sp);
}
@media (min-width: 768px) {
    .archive-beaxis_salon-list .post-text,
    .user_story-list .user_story-title {
        font-size: var(--fz-large_sp);
    }
}

/* ==================== BEAXIS SALON記事個別ページ（single-beaxis_salon.php） ==================== */

.post-section {
    padding: 80px 20px 0;
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    line-height: 1.6;
}
@media (min-width: 768px) {
    .post-section {
        padding: 170px 20px 0;
    }
}

.post-section .section-title,
.another-post-section .section-title,
.more_items-section .section-title {
    font-size: var(--fz-large_sp);
}
@media (min-width: 768px) {
    .post-section .section-title,
    .another-post-section .section-title,
    .more_items-section .section-title {
        font-size: var(--fz-large_pc);
    }
}

.single-section .post-title_text {
    text-align: center;
    margin-bottom: 40px;
}

.single-section .section-title {
    margin-bottom: 20px;
}

.post-section .post-img {
    width: 100%;
    margin-bottom: 60px;
}

.post-section .post-img > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.post-section .post-text > p {
    margin-bottom: 30px;
    line-height: 1.7;
    letter-spacing: 0.1em;
}

.post-section .profile-img {
    width: var(--card-max-width);
    max-height: var(--card-max-width);
    aspect-ratio: 1/1;
    margin-bottom: 15px;
}
@media (min-width: 768px) {
    .post-section .profile-img {
        margin-bottom: 30px;
    }
}

.post-section .profile-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.post-section .post-movie {
    width: 100%;
    max-height: 490px;
    margin-bottom: 60px;
}

.post-section .post-movie > video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.user-profile {
    width: var(--card-max-width);
    margin-inline: auto;
}
@media (min-width: 768px) {
    .post-section .user-profile {
        width: auto;
        margin-inline: unset;
        display: flex;
        column-gap: 50px;
    }
}

.profile-img_wrapper {
    min-width: fit-content;
}

.post-media_article {
    display: grid;
    gap: 30px;
}
@media (min-width: 768px) {
    .post-media_article {
        gap: 60px;
    }
}

.post-media_post {
    display: grid;
    gap: 10px;
}
.post-media_text {
    letter-spacing: 0.1em;
    line-height: 1.5;
}

.user_story-post img {
    width: 100%;
    aspect-ratio: 1/1;
}

.post-media_img > img {
    width: 100%;
}
.post-media_img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.another-post-section {
    margin: 100px 0 80px;
}
@media (min-width: 768px) {
    .another-post-section {
        margin: 200px 0 120px;
    }
}

.another-post-section .post {
    width: 80vw;
    max-width: 500px;
    height: fit-content;
    text-align: center;
    line-height: 1.8;
}
@media (min-width: 768px) {
    .another-post-section .post {
        width: calc(80vw / 2);
    }
}
@media (min-width: 1024px) {
    .another-post-section .post {
        width: calc(80vw / 3);
    }
}

.another-post-section .post-list {
    margin-inline: auto;
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(1, auto);
    column-gap: 10px;
    row-gap: 10px;
}
@media (min-width: 768px) {
    .another-post-section .post-list {
        grid-template-columns: repeat(2, auto);
    }
}
@media (min-width: 1024px) {
    .another-post-section .post-list {
        grid-template-columns: repeat(3, auto);
    }
}

.another-post-section .post-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    margin-bottom: 10px;
}

.another-post-section .post-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.another-post-section .post-title_main {
    font-size: var(--fz-second_sp);
}
.another-post-section .post-title_sub {
    font-size: 16px;
}

.more_items-section {
    margin-bottom: 100px;
}
@media (min-width: 768px) {
    .more_items-section {
        margin-bottom: 200px;
    }
}

.more_items-section .product-list {
    width: 90%;
    margin-inline: auto;
    display: grid;
    row-gap: 20px;
}
@media (min-width: 768px) {
    .more_items-section .product-list {
        display: flex;
        justify-content: center;
        column-gap: 20px;
    }
}

.more_items-section .product_pickup-list-item {
    width: 100%;
}
@media (min-width: 768px) {
    .more_items-section .product_pickup-list-item {
        max-width: 300px;
    }
}

.more_items-section .product_pickup-list-item .item-img {
    width: 100%;
    height: fit-content;
}
@media (min-width: 768px) {
    .more_items-section .product_pickup-list-item .item-img {
        max-height: 300px;
    }
}

.more_items-section .item-text {
    min-height: unset;
}

.more_items-section .item-title,
.more_items-section .item-type,
.more_items-section .item-price {
    font-size: var(--fz-primary_pc);
}

.more_items-button {
    margin-inline: auto;
    display: block;
    width: fit-content;
    height: 50px;
    margin-bottom: 30px;
}
@media (min-width: 768px) {
    .more_items-button {
        height: 80px;
    }
}

.more_items-button:hover {
    translate: 5px -5px;
    transition: ease 0.5s;
    filter: drop-shadow(-5px 5px 3px rgba(0, 0, 0, 0.4));
    /* box-shadow: -5px 5px 5px 0px rgba(0, 0, 0, 0.4); */
}

.more_items-button > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================== 404エラーページ（404.php） ==================== */

.main.error-page {
    margin: 100px auto 40px;
}
@media (min-width: 768px) {
    .main.error-page {
        margin: 200px auto 50px;
    }
}

.error-message {
    width: fit-content;
    margin-inline: auto;
    text-align: center;
    line-height: 1.8;
}

.error-message_en {
    font-size: var(--fz-second_sp);
}
@media (min-width: 768px) {
    .error-message_en {
        font-size: var(--fz-second_pc);
    }
}

.error-message_title {
    font-size: var(--fz-primary_sp);
}
@media (min-width: 768px) {
    .error-message_title {
        font-size: var(--fz-primary_pc);
    }
}

.top-return-button {
    margin-inline: auto;
    margin-top: 20px;
    padding: 15px 10px;
    display: block;
    width: fit-content;
    border: 1px solid var(--bg-color-black);
    translate: 0px 0px;
    transition: ease 0.5s;
}

.top-return-button:hover {
    translate: 5px -5px;
    transition: ease 0.5s;
    box-shadow: -5px 5px 5px 0px rgba(0, 0, 0, 0.4);
}