[2set] anytime logo zip parka /white + [LADIES] waist logo jogger pants

docka Verified independent store

→

docka - Setup Collection /* docka風セットアップページ CSS */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Ari al, sans-serif; background-color: #0a0a0a; color: #e8e8e8; line-height: 1.4; letter-spacing: -0.02em; } /* 商品セクション全体 */ .product-content { max-width: 900px; margin: 0 auto; padding: 40px 20px; } /* セクション共通スタイル */ .product-section { margin-bottom: 60px; border-bottom: 1px solid #2a2a2a; padding-bottom: 40px; } .product-section:last-child { border-bottom: none; margin-bottom: 0; } /* セクションタイトル */ .section-title { font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: #999; margin-bottom: 20px; opacity: 0.8; } /* セットアップ紹介セクション */ .setup-intro { font-size: 13px; line-height: 1.7; color: #ccc; font-weight: 300; } .setup-intro p { margin-bottom: 16px; } .setup-intro p:last-child { margin-bottom: 0; } /* セットアップ構成 */ .setup-composition { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; } .item-card { background-color: #111; border: 1px solid #2a2a2a; padding: 20px; } .item-title { font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: #999; margin-bottom: 12px; } .item-name { font-size: 14px; font-weight: 300; color: #e8e8e8; margin-bottom: 8px; } .item-description { font-size: 11px; line-height: 1.5; color: #aaa; font-weight: 300; margin-bottom: 15px; } /* カラーリンクセクション */ .color-links { display: flex; gap: 12px; flex-wrap: wrap; } .color-link { display: inline-block; padding: 6px 12px; background-color: #1a1a1a; border: 1px solid #3a3a3a; color: #ccc; text-decoration: none; font-size: 9px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; transition: all 0.2s ease; border-radius: 2px; } .color-link:hover { background-color: #2a2a2a; border-color: #4a4a4a; color: #e8e8e8; transform: translateY(-1px); } /* サイズスペック - セットアップ用 */ .setup-size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; } .size-category { background-color: #111; border: 1px solid #2a2a2a; padding: 20px; } .size-category-title { font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: #999; margin-bottom: 15px; } .size-spec-table { width: 100%; font-size: 10px; border-collapse: collapse; } .size-spec-table th, .size-spec-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #2a2a2a; font-weight: 300; } .size-spec-table th { background-color: #151515; color: #999; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; } .size-spec-table td { color: #ccc; } .size-spec-table tr:last-child th, .size-spec-table tr:last-child td { border-bottom: none; } /* マテリアル情報 */ .material-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; } .material-card { background-color: #111; border: 1px solid #2a2a2a; padding: 20px; } .material-category-title { font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: #999; margin-bottom: 15px; } .material-info { font-size: 11px; line-height: 1.6; color: #ccc; font-weight: 300; } .material-info p { margin-bottom: 8px; } /* セットアップフィット感 */ .setup-fit-guide { margin-top: 30px; } .fit-grid { display: flex; justify-content: center; margin-top: 20px; } .fit-item { text-align: center; padding: 0; background-color: #111; border: 1px solid #2a2a2a; transition: background-color 0.2s ease; overflow: hidden; max-width: 350px; width: 100%; } .fit-item:hover { background-color: #1a1a1a; } .fit-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .fit-photos::-webkit-scrollbar { display: none; } .fit-photo { flex: 0 0 100%; width: 100%; height: 200px; object-fit: cover; scroll-snap-align: start; filter: grayscale(30%) contrast(0.8) brightness(0.7); transition: filter 0.3s ease; } .fit-photo:hover { filter: grayscale(10%) contrast(0.9) brightness(0.8); } .fit-info { padding: 20px; } .fit-height { font-size: 11px; font-weight: 400; color: #999; margin-bottom: 8px; letter-spacing: 0.05em; text-transform: uppercase; } .fit-description { font-size: 11px; line-height: 1.5; color: #aaa; font-weight: 300; } .photo-indicator { display: flex; justify-content: center; gap: 4px; margin-top: 12px; opacity: 0.6; } .photo-dot { width: 4px; height: 4px; border-radius: 50%; background-color: #444; transition: background-color 0.2s ease; } .photo-dot.active { background-color: #999; } /* レスポンシブ対応 */ @media (max-width: 768px) { .product-content { padding: 30px 16px; max-width: 100%; } .setup-composition, .setup-size-grid, .material-grid { grid-template-columns: 1fr; gap: 20px; } .fit-photo { height: 160px; } .fit-info { padding: 16px; } .color-links { flex-direction: column; gap: 8px; } .color-link { padding: 8px 12px; font-size: 10px; text-align: center; } } /* docka風アニメーション */ .product-section { opacity: 0; transform: translateY(10px); animation: fadeInUp 0.8s ease forwards; } .product-section:nth-child(1) { animation-delay: 0.1s; } .product-section:nth-child(2) { animation-delay: 0.2s; } .product-section:nth-child(3) { animation-delay: 0.3s; } .product-section:nth-child(4) { animation-delay: 0.4s; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } /* JavaScript用のスタイル */ .slide-info { transition: opacity 0.3s ease; } .slide-info.hidden { opacity: 0; } Setup Collection 都市の静寂に溶け込むミニマルなセットアップ。パーカーとパンツが織りなす統一感は、着る人の内面を静かに映し出す鏡のような存在。 日常の中に潜む詩的な瞬間を、シルエットという言語で表現したコレクション。個々のアイテムが調和し、新たな物語を紡ぎます。 Top anytime logo zip parka トレンド感で差をつける、ショート丈ジップパーカー。しっかりした重みもありながらツルっと滑らかな裏毛素材で着心地は抜群。フロントに立体感あるロゴプリントをONし、さりげなくもこだわりのディティールで主張。バックにはワイドなリブ切替を効かせて、カジュアルに。コンパクトな丈感でワイドパンツやローライズとも好相性。ストリートを軽やかに遊ぶ、新定番の1着。 Black White Bottom waist logo jogger pants 重厚感を保ちつつも滑らかな裏毛素材で仕立てた、着心地のよいロングスウェットパンツ。左脚に配した縦ロゴと、ウエストにぐるりと施された反転ロゴ入りのオリジナルゴムが、さりげないアクセントに。太ももからふくらはぎにゆとりをもたせたトレンドシルエット。 Black White Size Specification Hoodie Spec (cm) Size 着丈 バスト 桁丈 袖ぐりの深さ F 45 61 82 35 Pants Spec (cm) Size ウエスト ヒップ 股上 股下 ワタリ S-M 63 103 32.5 70 31 M-L 67 109 33.5 75 33 Material Composition Hoodie Material 本体 綿 84%、ポリエステル 16% リブ部分 綿 100% 透け感：無し 重厚感と軽量性の絶妙なバランス 【お取り扱いのご注意】 洗濯の際は、中性洗剤を使用して下さい。 移染しやすいので他の物と分けて洗って下さい。 濃色は移染しやすいので単独で洗って下さい。 蛍光増白剤入り洗剤はお避け下さい。 クリーニングの際はクリーニングネットをご使用下さい。 洗濯後はすぐに干してください。 アイロンはあて布をし、裏からあてて下さい。プリント部分は避けてください。 プリント部分は、使用を繰り返すことで剥離していく恐れがありますので、強い摩擦にご注意ください。 プリント部分のもみ洗いはお避け下さい。 Pants Material 本体 綿 95%、ポリウレタン 5% 透け感：無し ストレッチ性：有り しなやかな着心地とシルエットキープ 【お取り扱いのご注意】 洗濯の際は、中性洗剤を使用して下さい。 移染しやすいので他の物と分けて洗って下さい。 濃色は移染しやすいので単独で洗って下さい。 蛍光増白剤入り洗剤はお避け下さい。 クリーニングの際はクリーニングネットをご使用下さい。 洗濯後はすぐに干してください。 アイロンはあて布をし、裏からあてて下さい。プリント部分は避けてください。 プリント部分は、使用を繰り返すことで剥離していく恐れがありますので、強い摩擦にご注意ください。 プリント部分のもみ洗いはお避け下さい。 Setup Fit Guide 157cm パンツS-Mサイズ着用。 document.addEventListener('DOMContentLoaded', function() { const fitPhotos = document.querySelector('.fit-photos'); const photoDots = document.querySelectorAll('.photo-dot'); const fitHeight = document.querySelector('.fit-height'); const fitDescription = document.querySelector('.fit-description'); // スライドごとの情報 const slideData = [ { title: "157cm", description: "パンツS-Mサイズ着用。" }, { title: "157cm", description: "パンツM-Lサイズ着用。" }, { title: "160cm", description: "パンツS-Mサイズ着用。" }, { title: "170cm", description: "パンツM-Lサイズ着用。" } ]; let currentSlide = 0; function updateSlideInfo(index) { fitHeight.style.opacity = '0'; fitDescription.style.opacity = '0'; setTimeout(() => { fitHeight.textContent = slideData[index].title; fitDescription.textContent = slideData[index].description; fitHeight.style.opacity = '1'; fitDescription.style.opacity = '1'; }, 150); // ドットの更新 photoDots.forEach((dot, i) => { dot.classList.toggle('active', i === index); }); } if (fitPhotos) { fitPhotos.addEventListener('scroll', function() { const scrollLeft = fitPhotos.scrollLeft; const slideWidth = fitPhotos.querySelector('.fit-photo').offsetWidth; const newSlide = Math.round(scrollLeft / slideWidth); if (newSlide !== currentSlide && newSlide >= 0 && newSlide < slideData.length) { currentSlide = newSlide; updateSlideInfo(currentSlide); } }); } }); Show more