@charset "utf-8";

/* style.cssに追加 */
/*-------------------------------------------------------
RESETここから
-------------------------------------------------------*/
* {
    box-sizing: border-box;
    width: auto;
}

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td,
legend {
    margin: 0;
    padding: 0;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    border: 0 none;
    margin: 0;
    outline: 0 none;

}

/*-------------------------------------------------------
RESETここまで
-------------------------------------------------------*/

/*-------------------------------------------------------
STYLE_COMMONここから
-------------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Montserrat', 'Noto Sans JP', '游ゴシック体', YuGothic, sans-serif;
}

body {
    font-family: 'Montserrat', 'Noto Sans JP', '游ゴシック体', YuGothic, sans-serif;
    line-height: 1.2;
    letter-spacing: 0.2rem;
    color: #1a1a1a;
    width: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', 'Zen Kaku Gothic New', 'Noto Sans JP', '游ゴシック体', YuGothic, sans-serif;
}

html {
    font-size: 62.5%;
}


.s-txt {
    font-size: 11px;
    /*font-size: 1.1rem;*/
}

body p {
    margin: 0;
    padding: 0;
}

#wrapper {
    position: relative;
    height: auto;
    width: 100%;
    margin: 0 auto;
    display: block;
}

a {
    color: #1a1a1a;
    text-decoration: none;
}

a:hover {
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
}

.alpha a:hover {
    cursor: pointer;
    opacity: 0.8;
    filter: alpha(opacity=80);
    background: #ffffff;
    _zoom: 1
}

* html .alpha a:hover {
    filter: alpha(opacity=80);
    background: #ffffff;
}

.alpha a:hover img {
    cursor: pointer;
    opacity: 0.8;
    filter: alpha(opacity=80);
    background: #ffffff;
    _zoom: 1
}

* html .alpha a:hover img {
    filter: alpha(opacity=80);
    background: #ffffff;
}

input:hover.alpha {
    cursor: pointer;
    opacity: 0.8;
    filter: alpha(opacity=80);
    background: #ffffff;
}

* html input:hover.alpha {
    filter: alpha(opacity=80);
    background: #ffffff;
}

#content {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 50px;
}

#content-r {
    width: 818px;
    margin: 0 auto;
    float: right;
}

#content-l {
    width: 150px;
    margin: 0 auto;
    float: left;
}

.sp_display {
	display: none!important;
}

/*-------------------------------------------------------
STYLE_COMMONここまで
-------------------------------------------------------*/

/*-------------------------------------------------------
COMMON（問題なければ削除）
-------------------------------------------------------*/
.red {
    color: #ff6666;
}

.green {
    color: #99cc66;
}

.bold {
    font-weight: bold;
}

.no-b {
    border: 0px !important;
    border-top: 0px !important;
    border-bottom: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;
}

.no-b-t {
    border-top: 0px !important;
}

.no-b-b {
    border-bottom: 0px !important;
}

.no-b-r {
    border-right: 0px !important;
}

.no-b-l {
    border-left: 0px !important;
}

/*-------------------------------------------------------
COMMONここまで
-------------------------------------------------------*/

/*-------------------------------------------------------
検索結果デザイン変更　ここから
-------------------------------------------------------*/

#page-products-list .pager {
    background: #d2ac77 none repeat scroll 0 0;
    color: #fff;
    font-size: larger;
    font-weight: 600;
    margin: 0 0 10px;
    padding: 10px 12px;
}

.pager strong {
    color: #fff;
    font-size: larger;
    font-weight: 600;
    margin: 0 0 8px;
    padding: 0px;
}

.sort a {
    padding: 0 !important;
}

.pager a {
    border-bottom: 1px solid #fff;
    font-size: larger;
    font-weight: 600;
    margin: 0 0 8px;
    padding: 0 0 0 2px;
    text-decoration: none;
}

.pager a:hover {
    border-bottom: 1px solid #33cc00;

}

#product-list .list-item {
    height: 264px;
}

/*-------------------------------------------------------
検索結果デザイン変更ここまで
-------------------------------------------------------*/

/*-------------------------------------------------------
サイドナビ
-------------------------------------------------------*/

/*-------------------------------------------------------
右固定バナー
-------------------------------------------------------*/

/*-------------------------------------------------------
左固定バナー
-------------------------------------------------------*/
/* style.cssに追加　ここまで */


/* index.cssここから */

/* ■共通デザインここから */
#main-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3vw;
}

.topmv_pc_php {
    margin-bottom: 50px;
}

#index_wrapper .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ▼コンテンツ間 margin */
.important-news_php {
    margin-bottom: 50px;
}

.category-nav_pc_php,
.feature_pc_php,
.pickup_php,
.ranking_php,
.coupon_php,
.newitem_php,
.topic_php,
.contents_php,
.news_php {
    margin-bottom: 130px;
}

/* ▲コンテンツ間 margin */

/* ▼swiper矢印共通デザイン */
.arrow-prev,
.arrow-next {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.55);
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    z-index: 10;
    transition: opacity 0.2s ease;
}

.arrow-prev::after,
.arrow-next::after {
    font-size: 16px;
    color: #1a1a1a;
    font-weight: normal;
}

.arrow-prev.swiper-button-disabled,
.arrow-next.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* ▲swiper矢印共通デザイン */

/* ▼各タイトル */
.section-title {
    font-weight: 500;
    letter-spacing: 0.25rem;
    font-size: 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.section-title span {
    font-size: 15px;
    margin-left: 20px;
}

/* ▲各タイトル */

/* ▼「すべて見る」リンク */
.section-subttl {
    font-size: 15px;
    color: #55A5A3;
    font-weight: 500;
    margin-bottom: 30px;
}

.section-subttl a,
.section-subttl a:active,
.section-subttl a:visited {
    color: #55A5A3;
}

.allitem::after,
.allitem::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 1px solid #55A5A3;
    border-right: 1px solid #55A5A3;
    transform: rotate(45deg);
    margin-left: 15px;
    vertical-align: middle;
    position: relative;
    transition: transform 0.2s ease;
}

.allitem:hover::after {
    transform: translateX(6px) rotate(45deg);
}

/* ▲「すべて見る」リンク */

/* ▼split分割レイアウト */
.split_wrapper {
    gap: 30px;
    display: grid !important;
    grid-template-columns: 33% 1fr;
    align-items: center;
}

/* ▼split-mv */
.split-mv {
    flex: 0 0 auto;
    width: 100%;
    text-align: right;
    position: relative;
}

.split-mv .type-name {
    text-align: left;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.split-mv .name:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 1px solid #1a1a1a;
    border-right: 1px solid #1a1a1a;
    transform: rotate(45deg);
    margin-left: 5px;
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}

.split-mv img {
    aspect-ratio: 1/1.1;
    object-fit: cover;
    margin-bottom: 1rem;
}

.split-mv p {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
}

.split-mv span.eng-name {
    margin-right: 5px;
}

/* ▲split-mv */

/* ▼split-list */
.split-list {
    min-width: 0;
    position: relative;
}

.split-list .swiper {
    overflow: hidden;
    height: 700px; 
    width: 100%;
}

.split-list .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* .split-list .swiper-wrapper {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    gap: 15px;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
} */

.split-list .swiper-wrapper::-webkit-scrollbar {
    display: none;
}

.split-list .swiper-wrapper .swiper-slide {
    height: calc((100% - 15px) / 2);
    width: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-right: 0;

    scroll-snap-align: start;
    position: relative;
}

.split-list .swiper-wrapper .swiper-slide img {
    background: #FAF8F6;
    max-width: 100%;
    aspect-ratio: 1/1.1;
    object-fit: cover;
    margin-bottom: 1rem;
    border-radius: 5px;
}

.split-list .swiper-wrapper .swiper-slide p {
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 155px;
    line-height: 1.5;
}

.split-list .swiper-wrapper .swiper-slide .name {
    display: flex;
}

.split-list .swiper-wrapper .swiper-slide .eng-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.split-list .swiper-wrapper .swiper-slide .price {
    margin-left: 0.5rem;
    display: block;
}

/* ▲split-list */
/* ▲split分割レイアウト */

/* ▼MOREボタン */
.contents-button_wrapper {
    width: fit-content;
    margin: 4rem auto 0;
    color: #fff;
}

.contents-button_inner {
    background: #1a1a1a;
    padding: 0.5rem 4rem;
    border-radius: 100px;
    font-size: clamp(11px, 3.1vw, 13px);
}

/* ※MOREリンクボタン */
.btn-link::after {
    content: "";
    display: inline-block;
    width: clamp(4px, 1vw, 4px);
    height: clamp(4px, 1vw, 4px);
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
    margin-left: 0.5rem;
    vertical-align: middle;
    position: relative;
    bottom: 0.1rem;
    transition: transform 0.3s ease;
}

.btn-link:active::after,
.btn-link:hover::after {
    border-top: 1px solid #1a1a1a;
    border-right: 1px solid #1a1a1a;
    transform: translateX(8px) rotate(45deg);
}

.btn-link,
.btn-link:visited {
    color: #fff;
    border: #1a1a1a 1px solid;
}

.btn-link:active,
.btn-toggle:active,
.btn-link:hover {
    background-color: #fff;
    color: #1a1a1a;
    border: #1a1a1a 1px solid;
}

/* ▲MOREボタン */


/* ▼hover　img切り替え */
.hover-img {
    position: relative;
    width: 100%;
}

.hover-img img {
    background: #FAF8F6;
    border-radius: 5px;
}

.img-hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    border-radius: 5px;
        transition: opacity 0.2s ease;
}

a:hover .img-hover {
    opacity: 1;
}

/* ▲hover　img切り替え */


/* ▼タップアニメーション */
.tap-anime::before {
    content: '';
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: transparent;
    border: solid #fff;
    box-sizing: border-box;

    animation: expand-ring 1.45s ease-out infinite;
    pointer-events: none;
    z-index: 3;
}

/* キーフレーム */
@keyframes expand-ring {
    0% {
        width: 0px;
        height: 0px;
        opacity: 1;
        border-width: 0px;
    }

    15% {
        opacity: 1;
        border-width: 4px;
    }

    30% {
        opacity: 1;
    }

    50% {
        width: 35px;
        height: 35px;
        opacity: 0;
        border-width: 0px;
    }

    /* 50% 〜 100% は「1テンポ休み」の時間（透明のまま待機） */
    100% {
        width: 35px;
        height: 35px;
        opacity: 0;
        border-width: 0px;
    }
}
/* ▲タップアニメーション */


/* ■top MVここから
【/smaf/php/topmv_pc.php】 */
#index_wrapper .topmv_pc_wrapper {
    width: 100%;
    height: clamp(420px,
            calc(100vw * 670 / 1920),
            670px);
    max-height: 630px;
    position: relative;
    overflow: hidden;
}

#index_wrapper .topmv_pc_wrapper:after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
    pointer-events: none;
}

#index_wrapper .topmv-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
}

#index_wrapper .topmv-col {
    position: relative;
    overflow: hidden;
}

#index_wrapper .topmv-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#index_wrapper .topmv-logo {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
    pointer-events: none;
}

#index_wrapper .topmv-logo img {
    width: calc(100vw * 351 / 1920);
}


/* ■important-newsここから
【/smaf/php/important-news.php】 */
.important-news-list {
    margin-bottom: 10px;
}

.important-news-item {
    font-weight: 500;
    font-size: 14px;
    background: #f5f5f5;
    padding: 15px;
    margin-bottom: 10px;
}

.important-news-item a {
    display: flex;
    align-items: center;
    gap: 50px;
    width: 90%;
    margin: 0 auto;
    position: relative;
}

.important-news-item p {
    width: 68%;
}

.important-news-item span {
    display: block;
    font-size: 12px;
    color: #929292;
}

.important-news-item a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 1px solid #1a1a1a;
    border-right: 1px solid #1a1a1a;
    transform: rotate(45deg);
    vertical-align: middle;
    position: absolute;
    right: 0;
}


/* ■category ナビここから
【/smaf/php/category-nav_pc.php】 */

.category-list {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 35px 25px;
}

.category-list::-webkit-scrollbar {
    display: none;
}

.category-item.sale_coupon p.logo {
    background-color: #FAF8F6;
    width: 105px;
    aspect-ratio: 1 / 1.1;
    border-radius: 5px;
    font-size: 55px;
    font-weight: 400;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-item {
    scroll-snap-align: start;
    position: relative;
}

.category-item a {
    display: block;
}

.category-item img {
    background: #FAF8F6;
    aspect-ratio: 1 / 1.1;
    object-fit: contain;
    margin-bottom: 1rem;
    border-radius: 5px;
}

.category-item p {
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 500;
}


/* ■feature_pcここから
【/smaf/php/feature_pc.php】 */
.feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 10px;
}

.feature-item img {
    margin-bottom: 10px;
    aspect-ratio: 748/323;
    object-fit: cover;
}

.feature-item p {
    font-size: 14px;
}


/* ■coupon ここから
【/smaf/php/coupon.php】 */

/* ▼couponMV */
.coupon-list-mv:before {
    position: absolute;
    content: none;
    border-radius: 50%;
    background-color: transparent;
    border: solid #fff;
    box-sizing: border-box;
    animation: expand-ring 1.45s ease-out infinite;
    pointer-events: none;

    top: 52%;
    left: 65%;
    transform: translate(-50%, -50%);
}

/* ▼coupon 画像位置調整ここから */
.coupon_php .split-mv .img-main img {
        object-position: 75%;
}
/* ▲coupon 画像位置調整ここまで */


.coupon_php a:hover .tap-anime::before {
    content: none;
}

/* ▼coupon タップアニメ位置調整ここから */
.coupon_php .tap-anime.img-main::before {
    top: 49%;
    left: 55%;
}

.coupon_php a:hover .tap-anime.img-main:before {
    animation: none;
}
/* ▲coupon タップアニメ位置調整ここまで */


/* ▲couponMV */

.coupon_php .section-title span {
    position: relative;
    bottom: 5px;
}

.coupon_wrapper .contents-button_wrapper {
    display: none;
}

.coupon_php .swiper-slide::after,
.coupon-list-mv::after {
    content: var(--couponBadge, "5%OFF");
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    display: grid;
    place-items: center;
    background: #55A5A3;
    color: #fff;
    border-radius: 5px;
    font-weight: 500;
    font-size: 11px;
    padding: 3px 7px;
}

/* ▼coupon ページ送り位置調整（画面端に配置） */
.coupon_wrapper .arrow-prev {
    left: -3%;
    top: 50%;
    transform: translateY(-50%);
}

.coupon_wrapper .arrow-next {
    right: -3%;
    top: 50%;
    transform: translateY(-50%);
}

/* ▲coupon ページ送り位置調整（画面端に配置） */



/* ■ranking ここから
【/smaf/php/ranking.php】 */
#reco16>div::first-line {
    font-size: 0;
}

.ranking_wrapper {
    margin-right: 0;
}

.ranking_wrapper .list-tab {
    display: flex;
    overflow: visible;
    white-space: nowrap;
    margin-bottom: 3rem;
    scrollbar-width: none;
}

.ranking_wrapper .list-tab li {
    padding: 0 23px 10px;
    border-bottom: 3px solid #D9D9D9;
}

.ranking_wrapper .list-tab li.active {
    border-bottom: 3px solid #1a1a1a;
}

.ranking_wrapper .list-tab a {
    color: #1a1a1a;
    font-size: clamp(12px, 3.3vw, 14px);
    font-weight: 500;
    font-family: 'Montserrat', 'Noto Sans JP', '游ゴシック体', YuGothic, sans-serif;
}

.ranking_wrapper .review-count {
    display: none;
}

.ranking_wrapper .name {
    display: none;
}

.ranking_wrapper .recommend_item {
    display: flex;
    counter-reset: num;
    width: 100%;
    height: 100%;
}


.ranking_wrapper .recommend_item img {
    width: 200px;
    border-radius: 5px;
    aspect-ratio: 1/1.1;
    object-fit: cover;
    object-position: 25%;
}

.ranking_wrapper .historyItem {
    width: 200px;
    flex-shrink: 0;
    height: auto;
    position: relative;
    counter-increment: num;
    flex: 0 0 auto;
}

.ranking_wrapper .reommend_item::-webkit-scrollbar,
.ranking_wrapper .list-tab::-webkit-scrollbar {
    display: none;
}

.ranking_wrapper .recommend_item dt {
    margin-bottom: 0.7rem;
    position: relative;
}

.ranking_wrapper .recommend_item dt:after {
    content: counter(num);
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 2.8rem;
    height: 2rem;
    display: grid;
    place-items: center;
    background: #fff;
    color: #1a1a1a;
    border-radius: clamp(3px, 0.8vw, 3px);
    font-weight: 500;
    font-size: clamp(12px, 3.3vw, 14px);
}

.ranking_wrapper .recommend_item dd {
    font-size: clamp(12px, 3.3vw, 14px);
    color: #1a1a1a;
    font-weight: 500;
}

.ranking_wrapper #reco16 {
    min-height: 260px;
}

/* ▼タブスクロールの設定 */
.ranking_wrapper .tabs-carousel-top {
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;

    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ranking_wrapper .tabs-carousel-top::-webkit-scrollbar {
    display: none;
}

.ranking_wrapper .tabs-carousel-top.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

/* ▲タブスクロールの設定 */

/* ▼ランキングエリアのswiper設定 */
.ranking-swiper-area {
    position: relative;
}

#reco16 {
    overflow: hidden;
}

/* ▼ランキング ページ送り位置調整（画面端に配置） */
.ranking-swiper-area .arrow-prev {
    left: -2%;
    top: 45%;
    transform: translateY(-50%);
}

.ranking-swiper-area .arrow-next {
    right: -2%;
    top: 45%;
    transform: translateY(-50%);
}

/* ▲ランキング ページ送り位置調整（画面端に配置） */
/* ▲ランキングエリアのswiper設定 */


/* ■newitem ここから
【/php/sp-new.php】 */
.newitem_php {
    position: relative;
}

.newitem_wrapper .date-update {
    font-size: 15px;
    font-weight: 500;
    margin-right: 30px;
}

.newitem_wrapper .contents-button_wrapper {
    display: none;
}

.newitem_wrapper .date-all_wrapper {
    display: flex;
    position: absolute;
    z-index: 10;
    right: 0px;
    margin-top: -52.5px;
}

.newitem_php a:hover .tap-anime::before {
    content: none;
}

/* ▼newitem 画像位置調整ここから */
.newitem_php .img-hover img {
    object-position: 28%;
}
/* ▲newitem 画像位置調整ここまで */

/* ▼newitem ページ送り位置調整（画面端に配置） */
.newitem_wrapper .arrow-prev {
    left: -3%;
    top: 50%;
    transform: translateY(-50%);
}

.newitem_wrapper .arrow-next {
    right: -3%;
    top: 50%;
    transform: translateY(-50%);
}

/* ▲newitem ページ送り位置調整（画面端に配置） */

/* ▼newitem タップアニメ位置調整ここから */
.newitem_php .tap-anime.img-main::before {
    top: 49%;
    left: 55%;
}

.newitem_php a:hover .tap-anime.img-main:before {
    animation: none;
}
/* ▲newitem タップアニメ位置調整ここまで */



/* ■pickup ここから
【/smaf/php/pickup.php】 */
.pickup-list {
    display: flex;
    gap: 7px;
}

.pickup-list li.pickup-item {
    position: relative;
}

.pickup-item a {
    display: block;
    text-align: left;
}

.pickup-item p {
    display: block;
    color: #fff;
    letter-spacing: 0.08rem;
    font-weight: 400;
}

.pickup-item p.price {
    font-size: 16px;
}

.pickup-item p.link {
    font-size: 13px;
}

/* ▼pickup 各価格とリンク位置調整ここから */
.price-link_wrapper {
    position: absolute;
}

.pickup_wrapper .item_1st .price-link_wrapper {
    top: 26%;
    right: 51%;
}

.pickup_wrapper .item_2nd .price-link_wrapper {
    top: 30%;
    right: 26%;
}

.pickup_wrapper .item_3rd .price-link_wrapper {
    bottom: 73%;
    right: 61%;
}
/* ▲pickup 各価格とリンク位置調整ここまで */

/* ▼pickup タップアニメ位置調整ここから */
.pickup_wrapper .item_1st::before {
    top: 49%;
    left: 55%;
}

.pickup_wrapper .item_2nd::before {
    top: 59%;
    left: 33%;
}

.pickup_wrapper .item_3rd::before {
    top: 64%;
    left: 57%;
}
/* ▲pickup タップアニメ位置調整ここまで */

/* ■topic　ここから
【/smaf/php/topic.php】 */

/* --- ▼左側（画像エリア） --- */
.topic_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topic-mv {
    width: 56%;
    position: relative;
}

.topic-mv img {
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.topic-mv .topic-title {
    position: absolute;
    flex-direction: column;
    top: 17%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.topic-mv .topic-subttl {
    margin-top: 10px;
}


/* --- 右側（スライダーエリア） --- */
.topic-right {
    width: 34%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.topic-swiper {
    overflow: hidden;
}

.topic-item {
    flex: 0 0 auto;
}

/* --- スライド内のデザイン --- */
/* 円形フレーム */
.topic-item .circle-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FAF8F6;
}

.topic-item .circle-frame img {
    object-fit: cover;
    width: 75%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #fffbf8cf;
}

/* テキスト情報 */
.topic-info {
    text-align: left;
    padding-left: 10px;
}

.topic-info .type-name {
    font-size: 12px;
    color: #1a1a1a;
    line-height: 1.6;
    margin-bottom: 8px;
}

.topic-info .name {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}

.topic-info .price {
    font-size: 13px;
    font-weight: 500;
}

.topic-info .price:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 1px solid #1a1a1a;
    border-right: 1px solid #1a1a1a;
    transform: rotate(45deg);
    margin-left: 5px;
    vertical-align: middle;
    position: relative;
    bottom: 1px;
    right: 3px;
}

/* ▼topic ページ送り位置調整（画面端に配置） */
.topic_wrapper .arrow-prev {
    left: -3%;
    top: 50%;
    transform: translateY(-50%);
}

.topic_wrapper .arrow-next {
    right: -3%;
    top: 50%;
    transform: translateY(-50%);
}

/* ▲topic ページ送り位置調整（画面端に配置） */



/* ■recommend ここから
【/smaf/php/contents.php】 */
.contents_wrapper .split_wrapper {
    display: grid;
    grid-template-columns: 24% 1fr;
    gap: 40px;
    align-items: stretch;
    margin-bottom: 100px;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 60px;
}

.contents_wrapper .split-title {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
}

.contents_wrapper .vertical-decoration {
    writing-mode: vertical-rl;
    font-size: 60px;
    font-weight: 500;
    margin-right: 15px;
    letter-spacing: 0.4rem;
}

.contents_wrapper .split-text {
    display: block;
    width: 180px;
    padding-top: 5px;
}

.contents_wrapper .contents-title {
    font-size: 18px;
    font-family: 'Montserrat', 'Zen Kaku Gothic New', 'Noto Sans JP', '游ゴシック体', YuGothic, sans-serif;
    font-weight: 600;
    letter-spacing: 0.1rem;
    display: block;
}

.contents_wrapper .contents-title span {
    display: block;
    font-size: 10px;
    margin-left: 0;
}

#index_wrapper .contents_wrapper .flex {
    display: block;
    width: 70%;
}

.contents_wrapper .split-desc {
    font-size: 12px;
    color: #929292;
    margin-bottom: 50px;
}

.contents_wrapper .split-list {
    min-width: 0;
    position: relative;
}

.split-list .swiper-wrapper.pc-one-row {
    flex-wrap: nowrap;
}

.split-list .swiper-wrapper.pc-one-row .swiper-slide {
    height: 100% !important;
    margin-top: 0 !important;
}

/* ▼recommend ページ送り位置調整（画面端に配置） */
.contents_wrapper .arrow-prev {
    left: -3%;
    top: 50%;
    transform: translateY(-50%);
}

.contents_wrapper .arrow-next {
    right: -3%;
    top: 50%;
    transform: translateY(-50%);
}

/* ▲recommend ページ送り位置調整（画面端に配置） */


/* ■news ここから
【/smaf/php/news.php】 */
.news-item {
    padding: 20px 0;
    font-weight: 500;
    font-size: 14px;
    border-bottom: 1px solid #929292;
}

.news-item a,
.news-item a:active {
    color: #1a1a1a;
}

.news-item p {
    display: flex;
}

.news-item p span.title {
    order: 1;
}

.news-item p span.date {
    display: block;
    color: #929292;
    width: 89px;
    margin-right: 35px;
    letter-spacing: 0.08rem;
}

@media (max-width: 1800px) {
        .category-list {
        gap: clamp(28px, 7.7vw, 32px) clamp(12px, 3.3vw, 14px);
    }
}

/* index.cssここまで */


/* footer.cssに追加ここから */
#common_footer hr {
    display: none;
}

.common_footer_info {
    display: none !important;
}

.common_footer_info2_wrap {
    background: #262626 !important;
}

.common_footer_sns {
    background: transparent !important;
    margin: 15px 0 !important;
}

#common_cat_campany {
    background: #262626 !important;
}

#common_cat_campany p,
#common_cat_campany a {
    color: #fff !important;
}

.common_footer_about {
    background: #262626 !important;
}

.common_footer_about ul li+li {
    border-left: 1px solid #fff !important;
}

#common_footer .common_footer_about ul li a {
    color: #fff !important;
}

.common_footer_copyright {
    background: #262626 !important;
}

.common_footer_copyright p {
    color: #fff !important;
}


/* footer.cssに追加ここまで */



/* パララックスデザインテスト */
.parallax-img {
    will-change: transform;
}

#index_wrapper .topmv-col .parallax-img {
    height: 120%; /* 150%だと大きすぎる場合は120%~130%でもOKです */
    object-fit: cover;
}



/* ■フェードイン演出用 CSS */

/* 1. 初期状態：透明にして、少し下に配置 */
.fade-up {
    opacity: 0;
    transform: translateY(20px); /* 30px下にずらしておく */
    transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* ふわっとさせる設定 */
}

/* 2. 表示状態：不透明にして、元の位置に戻す */
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ■トップMV オープニング演出用 CSS（ズームなし版） */

/* 1. 白い幕（最初は真っ白で隠す） */
/* ここは変更なし */
.topmv-loading-mask {
    position: absolute;
    inset: 0;
    background-color: #fff;
    z-index: 10;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

/* 2. 画像のズーム設定（scale）は削除しました */

/* 3. 読み込み完了時（幕を消す） */
.topmv_pc_wrapper.is-loaded .topmv-loading-mask {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 画像を元に戻す記述も削除しました */