@charset "Shift_JIS";

.mt-50{
	margin-top: 50px;
}

h3{
	color: #000;
	background-color:transparent;
	border: none;
}

/* 
=========================================================
   ページ全体の余白リセット
========================================================= 
*/
html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* 
=========================================================
   CSSの隔離・初期化
========================================================= 
*/
/*
#nail-wagon-lp,
#nail-wagon-lp * {
    box-sizing: border-box !important;
}
*/

/* 
=========================================================
   ベーススタイル
========================================================= 
*/
#nail-wagon-lp {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif !important;
    color: #333 !important;
    line-height: 1.6 !important;
    font-size: clamp(12px, 1.5vw, 16px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 1000px !important;
    display: block !important;
}

#nail-wagon-lp img {
    max-width: 100% !important;
    height: auto !important;
    vertical-align: bottom !important;
}

#nail-wagon-lp p {
    margin: 0 0 1em !important;
}

#nail-wagon-lp a {
    text-decoration: none !important;
/*    color: inherit ;*/
}

#nail-wagon-lp .serif-text {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif !important;
    font-size: 1.1em !important;
}

/* 
=========================================================
   レイアウト・コンポーネント
========================================================= 
*/
#nail-wagon-lp .section {
    padding: 4% 4% !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}

#nail-wagon-lp .section-bg-gray {
    background-color: #f5f5f5 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    display: block !important;
}

#nail-wagon-lp .section-inner {
    max-width: 1000px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 4% !important;
    display: block !important;
}

/* --- 見出しの横線 --- */
#nail-wagon-lp .line-heading {
    text-align: center !important;
    margin: 0 0 30px !important;
    font-size: 1.4em !important;
    letter-spacing: 0.1em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    font-weight: bold !important;
}

#nail-wagon-lp .line-heading::before,
#nail-wagon-lp .line-heading::after {
    content: "" !important;
    flex-grow: 1 !important;
    height: 1px !important;
    background-color: #333 !important;
}

#nail-wagon-lp .line-heading::before {
    margin-right: 15px !important;
}

#nail-wagon-lp .line-heading::after {
    margin-left: 15px !important;
}

/* --- TOP画像 --- */
#nail-wagon-lp .top-image-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 20px !important;
    display: block !important;
}

#nail-wagon-lp .top-image-wrapper img {
    width: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

#nail-wagon-lp .intro {
    text-align: center !important;
    margin-top: 30px !important;
    margin-bottom: 40px !important;
}

#nail-wagon-lp .intro h2 {
    font-size: 1.6em !important;
    font-weight: normal !important;
    margin: 0 0 20px !important;
}

/* --- ボタン --- */
#nail-wagon-lp .btn-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4vw !important;
    margin-top: 30px !important;
    margin-bottom: 40px !important;
}

#nail-wagon-lp .btn-smart {
    display: block !important;
    padding: 12px 20px !important;
    background-color: #b3b3b3 !important;
    color: #fff !important;
    font-size: 1em !important;
    letter-spacing: 0.1em !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 250px !important;
}

#nail-wagon-lp .btn-smart::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

#nail-wagon-lp .btn-smart:hover {
    background-color: #999 !important;
}

#nail-wagon-lp .btn-smart:hover::before {
    left: 0 !important;
}

/* --- 商品リスト --- */
#nail-wagon-lp .product-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 2% !important;
    margin-bottom: 40px !important;
}

#nail-wagon-lp .product-item {
    width: 32% !important;
    margin-bottom: 20px !important;
    display: block !important;
}

#nail-wagon-lp .product-item a {
    display: block !important;
    transition: opacity 0.3s, transform 0.3s ease !important;
}

#nail-wagon-lp .product-item a:hover {
    opacity: 0.8 !important;
    transform: translateY(-3px) !important;
}

#nail-wagon-lp .product-item img {
    width: 100% !important;
    background-color: #ddd !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

#nail-wagon-lp .product-info {
    margin-top: 10px !important;
    display: block !important;
}

#nail-wagon-lp .product-info p {
    margin: 0 !important;
    font-size: 0.9em !important; 
    line-height: 1.4 !important;
}

/* --- カラー表示 --- */
#nail-wagon-lp .color-showcase {
    margin-top: 20px !important;
    margin-bottom: 40px !important;
    display: block !important;
}

#nail-wagon-lp .showcase-images {
    display: flex !important;
    flex-direction: row !important;
    gap: 3% !important;
    margin-bottom: 20px !important;
}

#nail-wagon-lp .showcase-images .img-box {
    width: 100% !important;
    flex: 1 !important;
    background-color: #eee !important;
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
}

#nail-wagon-lp .showcase-images .img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: opacity 0.5s ease !important;
}

#nail-wagon-lp .color-selectors {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
}

#nail-wagon-lp .color-dot {
    width: 25px !important;
    height: 25px !important;
    border-radius: 50% !important;
    border: 2px solid #ccc !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    display: block !important;
}

#nail-wagon-lp .color-dot:hover,
#nail-wagon-lp .color-dot.active {
    transform: scale(1.15) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

#nail-wagon-lp .dot-white { background-color: #fff !important; }
#nail-wagon-lp .dot-gray { background-color: #999 !important; }
#nail-wagon-lp .dot-black { background-color: #000 !important; }

/* 
=========================================================
   POINT セクション (表示123)
========================================================= 
*/
#point-section {
    background-color: #f5f5f5 !important;
    padding: 4% 0 !important;
    margin-bottom: 40px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    display: block !important;
    overflow: hidden !important;
}

#point-section .line-heading-wrap {
    max-width: 1000px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 4% !important;
    display: block !important;
}

#point-slider-track {
    display: flex !important;
    width: 100% !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#point-slider-track::-webkit-scrollbar {
    display: none !important;
}

#nail-wagon-lp .slide-item {
    width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 4% !important;
    scroll-snap-align: center !important;
    box-sizing: border-box !important;
}

#nail-wagon-lp .slide-inner {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 4% !important;
    align-items: center !important;
    text-align: left !important;
    box-sizing: border-box !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

#nail-wagon-lp .slide-text, 
#nail-wagon-lp .slide-img {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: block !important;
}

#nail-wagon-lp .slide-item.is-visible .slide-text,
#nail-wagon-lp .slide-item.is-visible .slide-img {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#nail-wagon-lp .slide-item.is-visible .slide-img {
    transition-delay: 0.2s !important;
}

#nail-wagon-lp .slide-text {
    width: 100% !important;
    text-align: left !important;
    flex: 1 !important;
}

#nail-wagon-lp .slide-text h3 {
    font-size: 1.8em !important;
    font-style: italic !important;
    margin: 0 0 10px !important;
    font-family: serif !important;
}

#nail-wagon-lp .slide-img {
    width: 100% !important;
    flex: 1 !important;
    background-color: #ddd !important;
    aspect-ratio: 1 / 1 !important;
}

#nail-wagon-lp .slide-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#nail-wagon-lp .slider-nav {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

#nail-wagon-lp .slider-nav-dot {
    width: 10px !important;
    height: 10px !important;
    background-color: #ccc !important;
    border-radius: 50% !important;
    transition: background-color 0.3s, transform 0.3s !important;
    display: block !important;
    cursor: pointer !important;
}

#nail-wagon-lp .slider-nav-dot.active {
    background-color: #666 !important;
    transform: scale(1.3) !important;
}

/* 
=========================================================
   その他コンテンツ
========================================================= 
*/
#nail-wagon-lp .flex-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4% !important;
    margin-bottom: 40px !important;
}

#nail-wagon-lp .flex-row > div {
    width: 100% !important;
    flex: 1 !important;
    display: block !important;
}

#nail-wagon-lp .flex-row-reverse {
    flex-direction: row-reverse !important;
}

/* --- ギャラリー（使い方いろいろ）--- */
#nail-wagon-lp .gallery-grid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 2% !important;
    margin-bottom: 40px !important;
}

#nail-wagon-lp .gallery-item {
    width: 32% !important; 
    background-color: #ddd !important;
    aspect-ratio: 1 / 1 !important;
    cursor: pointer !important;
    overflow: hidden !important;
    display: block !important;
}

#nail-wagon-lp .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease, opacity 0.3s ease !important;
}

#nail-wagon-lp .gallery-item:hover img {
    transform: scale(1.05) !important;
    opacity: 0.8 !important;
}

#nail-wagon-lp .video-wrapper {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important;
    background-color: #000 !important;
    margin-bottom: 40px !important;
    display: block !important;
}

#nail-wagon-lp .video-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
}

/* --- タップ拡大のヒント文字 --- */
#nail-wagon-lp .tap-hint {
    text-align: center !important;
    font-size: 0.85em !important; 
    color: #ff7675 !important; 
    font-weight: bold !important;
    margin: -15px auto 20px !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    animation: popBounce 2.5s infinite !important; 
}


/* 
=========================================================
   メディアクエリ (レスポンシブ対応)
========================================================= 
*/

/* --- PC表示の調整 (769px以上) --- */
@media screen and (min-width: 769px) {
    /* カラーショーケース：PCのみ幅を30%ほど縮める(70%にする) */
    #nail-wagon-lp .color-showcase {
        max-width: 70% !important; 
        margin-left: auto !important; 
        margin-right: auto !important; 
    }
}

/* --- スマホ表示の調整 (768px以下) --- */
@media screen and (max-width: 768px) {
    /* 商品リスト（product-grid）：スマホ時は上に2商品、下に1商品 */
    #nail-wagon-lp .product-item {
        width: 49% !important; /* 横に2つ並べる */
    }
    
    /* 3つ目のアイテムを1段目の左の商品画像の下に配置（左寄せ） */
    #nail-wagon-lp .product-item:nth-child(3) {
        margin-right: auto !important;
        margin-left: 0 !important;
    }
}

/* 
=========================================================
   モーダルとアニメーション用キーフレーム
========================================================= 
*/
#nail-wagon-lp-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.85) !important;
    z-index: 9999 !important;
    justify-content: center !important;
    align-items: center !important;
    animation: fadeInBg 0.3s ease-out forwards !important; 
}

#nail-wagon-lp-modal.active {
    display: flex !important;
}

#nail-wagon-lp-modal .modal-content {
    position: relative !important;
    max-width: 90% !important;
    max-height: 90% !important;
    display: block !important;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

#nail-wagon-lp-modal img {
    max-width: 100% !important;
    max-height: 90vh !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

#nail-wagon-lp-modal .close-btn {
    position: absolute !important;
    right: 0 !important;
    top: -40px !important;
    color: #fff !important;
    font-size: 35px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    line-height: 1 !important;
    display: block !important;
    transition: transform 0.2s ease !important;
}

#nail-wagon-lp-modal .close-btn:hover {
    transform: scale(1.2) !important;
}

@keyframes fadeInBg {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes popBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) !important;
    }
    40% {
        transform: translateY(-6px) !important;
    }
    60% {
        transform: translateY(-3px) !important;
    }
}

/* 
=========================================================
   PC/SP 表示切り替えクラス
========================================================= 
*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
#nail-wagon-lp .pc { 
    display: block !important; 
    margin: 0 auto !important; 
}
#nail-wagon-lp .sp { 
    display: none !important; 
    margin: 0 auto !important; 
}
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    #nail-wagon-lp .pc { 
        display: none !important; 
        margin: 0 auto !important; 
    }
    
    #nail-wagon-lp .sp { 
        display: block !important; 
        margin: 0 auto !important; 
    }
    
    /* トップ画像のスマホ版のみ上に100pxの余白を追加 */
    #nail-wagon-lp .top-image-wrapper .sp {
        margin-top: 20px !important;
    }
}