/** Shopify CDN: Minification failed Line 479:0 Unexpected "}" **/ /* ======================================== ナナ文具 共通カスタムスタイル ファイル名: assets/nana-common.css 用途: 複数セクションで共通して使うデザインパーツ （カード、グリッド、ボタン、数量セレクター等） ⚠️ 読み込み箇所 ⚠️ layout/theme.liquid の 内に記述済み： {{ 'nana-common.css' | asset_url | stylesheet_tag }} → テーマ更新で theme.liquid が上書きされた場合は 上記1行を 内に再追加してください ======================================== */ /* ---------------------------------------- カード共通（Dawnにないデザイン） ---------------------------------------- */ .nana-card { background: rgb(var(--color-background)); border: 1px solid rgba(var(--color-foreground), 0.1); border-radius: 8px; overflow: hidden; transition: box-shadow 0.3s ease; display: flex; flex-direction: column; } .nana-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .nana-card__content { padding: 1.6rem; /* Dawnの基本単位に合わせる */ display: flex; flex-direction: column; gap: 1.2rem; flex: 1; } @media screen and (min-width: 750px) { .nana-card__content { padding: 2.4rem; } } /* 横並びカード（ブログ用） */ @media screen and (min-width: 750px) { .nana-card--horizontal { flex-direction: row; } .nana-card--horizontal .nana-card__content { justify-content: space-between; } } /* ---------------------------------------- 画像エリア（Dawnにないアスペクト比管理） ---------------------------------------- */ .nana-image { width: 100%; overflow: hidden; position: relative; } .nana-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .nana-image--square { aspect-ratio: 1 / 1; } .nana-image--landscape { aspect-ratio: 1.31 / 1; } @media screen and (min-width: 750px) { .nana-card--horizontal .nana-image { width: 50%; min-width: 50%; } } /* ---------------------------------------- ボタン：黒丸+黄色矢印（独自デザイン） ---------------------------------------- */ .nana-button { display: inline-flex; align-items: center; gap: 10px; padding: 0.8rem 2rem; background: rgb(var(--color-button)); color: rgb(var(--color-button-text)); text-decoration: none; border-radius: 6px; font-size: 1.4rem; /* Dawnの基本単位 */ transition: opacity 0.3s ease; align-self: flex-end; } .nana-button:hover { opacity: 0.8; } .nana-button::after { content: ''; display: inline-block; width: 16px; height: 16px; background-color: #000000; border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7D917' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E"); background-size: 12px 12px; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } /* ---------------------------------------- カテゴリアイテム（小画像+テキスト） ---------------------------------------- */ .nana-category-item { display: flex; align-items: center; text-decoration: none; color: rgb(var(--color-foreground)); gap: 1.2rem; padding: 1rem; background: rgb(var(--color-button));; transition: opacity 0.3s ease; } .nana-category-item:hover { opacity: 0.7; } .nana-category-item__image { width: 20px; height: 20px; object-fit: cover; flex-shrink: 0; border-radius: 4px; } .nana-category-item__name { font-size: 1.8rem; line-height: 1.5; } @media screen and (min-width: 750px) { .nana-category-item__image { width: 50px; height: 50px; } } .nana-category-item__name__s { font-size: 1.5rem; } /* ---------------------------------------- グリッド（Dawnの.gridを補完） ---------------------------------------- */ .nana-grid { display: grid; gap: 1.2rem; list-style: none; margin: 0; padding: 0; } @media screen and (min-width: 750px) { .nana-grid { gap: 2.4rem; } } .nana-grid--2col { grid-template-columns: repeat(2, 1fr); } @media screen and (min-width: 750px) { .nana-grid--3col-tablet { grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width: 990px) { .nana-grid--4col-desktop { grid-template-columns: repeat(4, 1fr); } } /* ---------------------------------------- 商品説明・仕様セクション ---------------------------------------- */ /* 共通見出しスタイル */ .nana-section-heading { font-size: 20px; font-weight: bold; margin-bottom: 1.5rem; padding-bottom: 0.8rem; border-bottom: 3px solid #F7D917; /* 黄色の太いボーダー */ color: rgb(var(--color-foreground)); } /* 商品概要セクション */ .nana-description-section { background: rgb(var(--color-background)); padding: 2rem 0; margin-bottom: 2rem; } @media screen and (max-width: 749px) { .nana-description-section { padding: 1.5rem 0; } } .nana-description-content { line-height: 1.8; color: rgb(var(--color-foreground)); } /* ---------------------------------------- 仕様テーブル ---------------------------------------- */ .nana-specs-section { margin-bottom: 2rem; } .nana-specs-table { width: 100%; border-collapse: collapse; border-top: 1px solid #333; /* 一番上の線（濃いグレー） */ border-bottom: 1px solid #333; /* 一番下の線（濃いグレー） */ } .nana-specs-table tr { border-bottom: 1px solid #E5E5E5; /* 行間の線（薄いグレー） */ } .nana-specs-table tr:last-child { border-bottom: none; /* 最終行の線は消す（テーブル全体の下線があるため） */ } .nana-specs-table th { background: #F5F5F5; padding: 1.2rem 1.5rem; text-align: left; font-weight: 600; width: 20%; color: rgb(var(--color-foreground)); font-size: 1.4rem; } .nana-specs-table td { background: rgb(var(--color-background)); padding: 1.2rem 1.5rem; text-align: left; color: rgb(var(--color-foreground)); font-size: 1.4rem; } @media screen and (max-width: 749px) { .nana-specs-table th { width: 30%; padding: 1rem; font-size: 1.2rem; } .nana-specs-table td { padding: 1rem; font-size: 1.2rem; } } /* PCだけカート＆今すぐ購入ボタンを横並び・同じ幅に */ @media (min-width: 990px) { .product-form__buttons { display: flex; gap: 1rem; /* ボタン間の余白。お好みで */ } .product-form__buttons .product-form__submit, .product-form__buttons .shopify-payment-button { width: 50%; } /* 動的チェックアウトボタンの中身も100%で広げる */ .product-form__buttons .shopify-payment-button__button, .product-form__buttons .shopify-payment-button__more-options { width: 100%; } } /* ---------------------------------------- Q&Aアコーディオン共通スタイル 使用箇所: よくある質問ページ、固定ページ内FAQ 配色スキーム対応: rgb(var(--color-button))を使用 ---------------------------------------- */ .nana-faq-list { max-width: 800px; margin: 0 auto; } .nana-faq-accordion { border: 2px solid rgba(var(--color-button), 1); border-radius: 5px; margin-bottom: 20px; } .nana-faq-accordion__summary { background-color: rgb(var(--color-button)); border: 2px solid rgba(var(--color-button), 1); padding: 20px 10px 20px 50px; position: relative; cursor: pointer; list-style: none; } /* ブラウザデフォルトの三角マークを削除 */ .nana-faq-accordion__summary::-webkit-details-marker { display: none; } /* 「Q」アイコン */ .nana-faq-accordion__summary::before { content: "Ｑ"; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 20px; color: rgb(var(--color-button-text)); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } /* 「+」アイコン（閉じている時） */ .nana-faq-accordion__summary::after { content: "＋"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 24px; color: rgb(var(--color-button-text)); line-height: 1; } /* 「-」アイコン（開いている時） */ .nana-faq-accordion[open] .nana-faq-accordion__summary::after { content: "ー"; } /* 回答エリア */ .nana-faq-accordion__content { padding: 20px 10px; margin: 0; background-color: rgb(var(--color-background)); color: rgb(var(--color-foreground)); } /* スマホ対応 */ @media screen and (max-width: 749px) { .nana-faq-accordion__summary { padding: 15px 10px 15px 45px; } .nana-faq-accordion__summary::before { left: 10px; font-size: 18px; width: 28px; height: 28px; } .nana-faq-accordion__summary::after { right: 15px; font-size: 22px; } } /* ======================================== ヘッダー検索窓（PC表示） ======================================== */ /* スマホ: 検索窓を非表示、アイコンのみ表示 */ .nana-header-search-form { display: none; } .nana-header-search-icon-mobile { display: block; } /* PC: 検索窓を表示、アイコンを非表示 */ @media screen and (min-width: 990px) { .nana-header-search-form { display: flex; align-items: center; border: 1px solid rgba(var(--color-foreground), 0.2); border-radius: 999px; max-width: 320px; width: 100%; background: #ffffff; transition: border-color 0.3s ease; margin-right:2rem; } .nana-header-search-form:hover, .nana-header-search-form:focus-within { border-color: rgb(var(--color-button)); } .nana-header-search-input { flex: 1; border: none; padding: 8px 12px 8px 18px; font-size: 14px; outline: none; background: transparent; color: rgb(var(--color-foreground)); } } /* フォーカス時の枠線を確実に消す */ .nana-header-search-input:focus { outline: none; box-shadow: none; border: none; } .nana-header-search-input::placeholder { color: rgba(var(--color-foreground), 0.5); } .nana-header-search-submit { border: none; background: none; padding: 0 12px 0 0; cursor: pointer; display: flex; align-items: center; color: rgb(var(--color-foreground)); } .nana-header-search-submit:hover { opacity: 0.7; } .nana-header-search-submit .svg-wrapper { width: 20px; height: 20px; } .nana-header-search-icon-mobile { display: none; } } /* ---------------------------------------- お問い合わせアイコン専用wrapper 使用箇所: ヘッダー ---------------------------------------- */ .nana-icon-wrapper { display: inline-flex; align-items: center; justify-content: right; } .header__icon--contact { width: 3rem; /* 固定幅にする */ } .nana-icon-wrapper--contact { width: 2.7rem; height: 2.7rem; } .nana-icon-wrapper--contact svg { width: 100%; height: 100%; } /* スマホ用の微調整*/ @media screen and (max-width: 749px) { .header__icon--contact { width: 4rem; /* 固定幅にする */ margin-right:0.7rem; } } /* ======================================== ヘッダーメニュー ホバーエフェクト ======================================== */ @media screen and (min-width: 990px) { /* サブメニューのスムーズな表示 */ header-menu details .header__submenu { transition: opacity 0.2s ease, visibility 0.2s ease; } /* 閉じている時は非表示 */ header-menu details:not([open]) .header__submenu { opacity: 0; visibility: hidden; } /* 開いている時は表示 */ header-menu details[open] .header__submenu { opacity: 1; visibility: visible; animation: fadeInMenu 0.2s ease; } @keyframes fadeInMenu { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* メニュー項目のホバー時の下線 */ .header__menu-item:hover > span { text-decoration: underline; text-underline-offset: 0.4rem; } } /* ---------------------------------------- ホバーメニュー（仮想リンク）のカーソル変更 使用箇所: PCヘッダーメニュー ---------------------------------------- */ @media screen and (min-width: 990px) { header-menu details.nana-hover-ready > summary { cursor: default !important; } } /* ---------------------------------------- ブログ記事h１をスマホで小さく ---------------------------------------- */ @media screen and (max-width: 749px) { .article-template__title { font-size: 2.4rem; padding-top:0px; } } /* ---------------------------------------- 数量セレクター（ドロップダウン形式） 使用箇所: sections/main-product.liquid（quantity_selectorブロック） ---------------------------------------- */ .nana-quantity-selector { display: flex; align-items: center; gap: 12px; } .nana-quantity-selector .quantity__label { margin-bottom: 0; font-size: 14px; font-weight: 500; } .nana-quantity-selector .quantity__select-wrapper { position: relative; display: inline-block; } .nana-quantity-selector .quantity__input { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 10px 40px 10px 16px; border: 1px solid rgba(var(--color-foreground), 0.2); border-radius: 4px; font-size: 16px; font-family: inherit; background-color: rgb(var(--color-background)); color: rgb(var(--color-foreground)); cursor: pointer; min-width: 80px; line-height: 1.5; background-image: none; } /* 下矢印アイコン */ .nana-quantity-selector .quantity__select-wrapper::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid rgb(var(--color-foreground)); pointer-events: none; opacity: 0.7; } .nana-quantity-selector .quantity__input:hover { border-color: rgba(var(--color-foreground), 0.4); } .nana-quantity-selector .quantity__input:focus { outline: 2px solid rgb(var(--color-button)); outline-offset: 2px; border-color: rgb(var(--color-button)); } .nana-quantity-selector .quantity__input:disabled { opacity: 0.5; cursor: not-allowed; } .nana-quantity-selector .quantity__input option { padding: 8px 16px; font-size: 16px; background-color: rgb(var(--color-background)); color: rgb(var(--color-foreground)); } @media screen and (max-width: 749px) { .nana-quantity-selector { flex-direction: column; align-items: flex-start; gap: 8px; } .nana-quantity-selector .quantity__label { font-size: 13px; } .nana-quantity-selector .quantity__input { font-size: 14px; padding: 8px 36px 8px 12px; } .nana-quantity-selector .quantity__select-wrapper::after { right: 12px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgb(var(--color-foreground)); } } .shopify-section-group-header-group { position: relative; z-index: 10 !important; }