@charset "utf-8";

/* ==========================================================================
   1. 共通ベース・背景色調整
   ========================================================================== */
html { 
    scroll-behavior: smooth;
}

/* ページ全体・ヘッダー・商品一覧ナビ周りのピンク背景設定 */
body,
.container,
.container-fluid,
.mainframe_,
#main,
#contents,
#header-contents,
#header-contents header,
#header-contents .header-container,
.goods-list-sort-block,
.common-navipage--top,
.common-navipage--bottom,
.common-navipage,
.page-navi,
.page-navi-block,
.page-navi--sum,
.page-navi--sum span {
    background-color: #f5c8dc !important;
    background: #f5c8dc !important;
    border: none !important;
}

/* ★検索窓（フォーム）の背景・外枠もピンクに同期 */
#header-search-box,
.header-search-form,
.header-search,
.header-bottom,
.header-btn__search-line,
.search-form-container {
    background-color: #f5c8dc !important;
    background: #f5c8dc !important;
}

.optimaized-h1 {
    background-color: #f5c8dc !important;
    color: #333333 !important;
}

/* 下部ガイドエリアの濃いピンク */
.page-guide, 
.free-box01--container { 
    background-color: #e1a3bc !important; 
    color: #ffffff !important; 
}

.container-fluid {
    padding-bottom: 80px; 
}

/* LP内画像の共通レスポンシブ化 */
.mvArea img,
.side img,
.section-solution-bridge img,
.seo-text-box + img, 
.middle-direct-cta + img,
.point-section img,
.developer-section img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

.mvArea {
    max-width: 750px !important;
    margin: 0 auto 10px !important;
    padding-top: 0 !important;
}

.pd {
    padding-top: 13px;
    margin-top: 5px !important; 
    margin-bottom: 5px !important;
}

.heading_h1 {
    color: #333333 !important;
}

/* ★【ドロワー保護】共通CSS（feature.css）による横幅汚染をリセット */
.drawer-container li,
.navigation-drawer li,
#menu li,
[class*="drawer"] li {
    width: 100% !important;
    float: none !important;
}

/* ==========================================================================
   2. ページ最下部フッターの不要要素非表示（ドロワーには干渉させない）
   ========================================================================== */
#footer-contents .footer-category,
#footer-contents .footer-nav,
#footer-contents .footer-sns,
#footer-contents .footer-bottom-inner {
    display: none !important;
}

/* ==========================================================================
   3. LP独自コンテンツ（ファーストビュー・2連ナビカード）
   ========================================================================== */
/* LP内のコンテンツエリアに限定して適用 */
.container .side ul {
    display: flex;
    justify-content: center;
    gap: 12px; 
    padding: 0 10px;
    margin: 10px auto 18px !important; 
    list-style: none;
    max-width: 640px;
}
.container .side ul li { 
    width: 50% !important; 
    float: none !important;
}   
.container .side3 ul li { 
    width: 33.333% !important; 
    float: none !important;
}  

.nav-card-item {
    display: block;
    position: relative;
    overflow: hidden; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 6px; 
}
.nav-card-plain {
    background: linear-gradient(135deg, #e3ecef 0%, #bcd5db 100%);
    border: 1px solid #a3c2c9;
}
.nav-card-design {
    background: linear-gradient(135deg, #f3ebf0 0%, #e1ccd8 100%);
    border: 1px solid #d2b3c5;
}
.nav-card-item:active {
    transform: scale(0.97);
}

/* 光沢アニメーション */
.nav-card-item::after {
    content: '';
    position: absolute;
    top: 0; left: -150%; width: 60%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); 
    animation: shineEffect 3.5s infinite ease-in-out; 
}
.nav-card-design::after { animation-delay: 1.2s; }
@keyframes shineEffect {
    0% { left: -150%; }
    20% { left: 150%; } 
    100% { left: 150%; } 
}

/* 人気No.1ボタン */
.top-no1-btn {
    display: block;
    background-color: #4a4a4a;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    padding: 14px;
    border-radius: 50px;
    width: 85%;
    margin: 0 auto 35px !important; 
    letter-spacing: 0.8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ==========================================================================
   4. LP独自コンテンツ（お悩み・解説・理由・レビュー・開発者）
   ========================================================================== */
.insight-box {
    background-color: #f2f5f8;
    border: 1px solid #d1d9dd; 
    border-radius: 8px;
    padding: 20px;
    margin: 20px auto;
    text-align: left;
    max-width: 560px;
}
.insight-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
}
.insight-icon {
    color: #80161a; 
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
    flex-shrink: 0;
    line-height: 1.4;
}
.insight-text {
    font-size: 14px;
    color: #333333; 
    line-height: 1.5;
    margin: 0;
}

.section-solution-bridge {
    background-color: #fbf7f5 !important; 
    border-radius: 12px;
    padding: 30px 15px 10px 15px;
    margin: 30px auto;
    max-width: 600px; 
    box-shadow: 0 4px 15px rgba(74,46,43,0.08);
}

.arrow-down {
    width: 0; height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 26px solid #e1ccd8;
    margin: 25px auto;
}
.solution-main-copy {
    font-size: 24px;
    font-weight: bold;
    color: #80161a; 
    margin: 0 0 15px;
}
.solution-sub-copy {
    font-size: 15px;
    color: #333333; 
    line-height: 1.7;
    margin: 0 0 25px;
}

.bridge-text-top { margin: 10px auto 4px !important; line-height: 1.2 !important; color: #333333 !important; }
.bridge-img-middle { margin: 0 auto !important; }
.bridge-text-bottom { margin: 4px auto 25px !important; line-height: 1.2 !important; color: #333333 !important; }

/* SEO解説枠アニメーション */
.seo-explain-wancushion {
    font-size: 14px;
    color: #333333; 
    font-weight: bold;
    margin: 12px auto -5px !important; 
    opacity: 0;
    transform: translateY(25px) scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.heading_h1_bounce {
    font-size: 20px;
    color: #333333 !important;
    font-weight: bold;
    margin: 5px auto 0px !important; 
    opacity: 0;
    transform: translateY(30px) scale(0.93);
    transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

.seo-explain-wancushion.is-visible,
.heading_h1_bounce.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.seo-text-box {
    background-color: #fbf7f5 !important;
    border: 1px solid #ebdcd7; 
    padding: 20px;
    border-radius: 8px;
    text-align: left;
    max-width: 560px;
    margin: 15px auto;
}
.seo-text-box p {
    font-size: 13px;
    color: #333333; 
    line-height: 1.6;
    margin: 0 0 15px 0;
}
.seo-text-box p:last-child { margin-bottom: 0; }
.seo-text-box strong { color: #80161a !important; } 

.middle-direct-cta {
    display: block;
    background: linear-gradient(135deg, #e07b8b 0%, #80161a 100%); 
    color: #ffffff !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    padding: 15px;
    border-radius: 50px;
    width: 85%;
    max-width: 460px;
    margin: 25px auto 35px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(128,22,26,0.35);
    animation: pulseEffect 2.5s infinite ease-in-out; 
}
@keyframes pulseEffect {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* 選ばれる理由コンテナ */
.reasons-container {
    background-color: #fbf7f5 !important; 
    border: 1px solid #ebdcd7;
    border-radius: 12px;
    padding: 10px 15px;
    margin: 0 auto 30px; 
    max-width: 560px;
    text-align: center;
}
.point-section {
    padding: 24px 0;
}
.point-section:not(:last-child) {
    border-bottom: 2px dotted #ebdcd7;
}
.point-badge {
    display: inline-block;
    border: 1px solid #80161a; 
    color: #80161a !important;
    font-family: serif; 
    font-weight: bold;
    font-size: 13px;
    padding: 2px 14px;
    margin-bottom: 12px;
}
.point-sub-title {
    font-size: 12px;
    color: #333333;
    margin-bottom: 6px;
    font-weight: bold;
}
.point-title {
    display: inline-block;
    font-size: 19px !important;
    font-weight: bold;
    color: #333333;
    line-height: 1.4;
    margin: 0 auto 20px;
    background: linear-gradient(transparent 50%, #ffccd7 50%);
    padding: 0 6px;
}
.point-text {
    text-align: left;
    margin: 14px auto 0 !important;
    color: #333333;
    font-size: 13px;
    line-height: 1.5;
}

/* リアルレビュー */
.review-card {
    background: #ffffff;
    padding: 18px 15px;
    border-radius: 8px;
    margin: 0 auto 14px;
    border: 1px solid #ebdcd7;
    max-width: 560px;
}
.review-flex {
    display: flex;
    align-items: center; 
    justify-content: space-between;
}
.review-avatar-box {
    width: 75px; 
    flex-shrink: 0; 
    margin-right: 18px; 
}
.review-avatar-box img {
    width: 75px !important; 
    height: 75px !important;
    border-radius: 50% !important; 
    object-fit: cover !important;
    display: block;
    border: 1px solid #e8dfdb;
}
.review-content-box {
    flex-grow: 1;
    text-align: left; 
}
.review-stars { 
    color: #ffb400; 
    font-size: 13px; 
    margin-bottom: 5px; 
}
.review-text { 
    font-size: 12.5px; 
    color: #333333; 
    line-height: 1.5;
    margin: 0 0 6px 0 !important; 
}
.review-user { 
    font-size: 11px; 
    color: #888888; 
    text-align: right; 
    margin: 0;
}

/* 開発者コメント */
.developer-section {
    background-color: #fbf7f5 !important; 
    border: 1px solid #ebdcd7;
    border-radius: 12px;
    padding: 28px 18px 24px;
    margin: 30px auto 25px; 
    max-width: 560px;
    text-align: center;
}
.developer-section h1 {
    margin: 0 auto 8px !important; 
    font-size: 20px;
}
.developer-main-img {
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    margin: 0 auto 6px !important; 
    display: block;
}
.developer-text-inner {
    background-color: #ffffff; 
    border: 1px solid #e8dfdb;
    border-radius: 8px;
    padding: 20px 15px;
    text-align: left;
    margin-top: 12px;
}
.developer-text-inner p {
    font-size: 13px;
    color: #333333; 
    line-height: 1.6;
    margin: 0 0 14px 0;
}
.developer-text-inner p:last-child { margin-bottom: 0; }

/* ==========================================================================
   5. システム共通パーツ・商品並び替え調整
   ========================================================================== */
.goods-list-sort-block dt,
.goods-list-sort-block dd {
    background-color: #f5c8dc !important;
    background: #f5c8dc !important;
    border: none !important;
}
.goods-list-sort-block dt,
.goods-list-sort-block dd,
.goods-list-sort-block span,
.goods-list-sort-block {
    color: #333333 !important; 
    border: none !important;
}
.goods-list-sort-block dd ul li a {
    color: #333333 !important;
}

/* ページナビ・リンク関係 */
.mainframe_ .article-body--middle {
    margin: 0 0 0rem;
}
.goods-list-style-block dd ul li a {
    text-decoration: underline;
    color: #333333 !important;
}
.page-navi--sum span {
    color: #333333 !important;
    text-decoration: none;
}

/* ==========================================================================
   6. 固定フッターナビゲーション
   ========================================================================== */
#bulkbuying_035 {
    padding-top: 30px;
    text-align: center;
}
#bulkbuying_035 .navList {
    position: fixed;
    bottom: 0; left: 0; width: 100%; 
    z-index: 99999 !important; 
    display: flex;
    list-style: none;
    padding: 0; margin: 0;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.15); 
    background: #ffffff !important;
}
#bulkbuying_035 .navList li {
    width: 33.333% !important; 
    text-align: center;
}
#bulkbuying_035 .navList li a {
    display: block;
    padding: 14px 0; 
    font-weight: bold;
    font-size: 12px; 
    text-decoration: none;
}

#bulkbuying_035 .navList li.c01 a {
    background-color: #e3ecef !important; 
    color: #333333 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}
#bulkbuying_035 .navList li.c02 a {
    background-color: #E1CCD8 !important;
    color: #333333 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
}
#bulkbuying_035 .navList li.c_top a {
    background-color: #625959 !important;
    color: #fff !important;
}

/* PCビュー微調整 */
@media screen and (min-width: 767px) {
    .heading_h1 {
        font-size: 20px;
        margin: 20px auto 32px;
    }
}