@charset "UTF-8";

/* ============================================================
1. SVGアイコン巨大化防止ルール（全画面共通）
============================================================ */
svg {
max-width: 100%;
height: auto;
}

.c-icon,
svg.c-icon,
.ec-icon,
.ec-headerNaviRole svg,
.ec-headerRole svg,
.ec-footerRole svg,
.ec-cartNavi svg,
.ec-closeBtn svg {
width: 20px !important;
height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
display: inline-block !important;
vertical-align: middle !important;
}

.ec-loginIcon,
.ec-loginRole svg,
.ec-loginRole .c-icon,
.ec-login .c-icon,
.ec-login svg,
.ec-mypageRole svg,
.ec-userRole svg {
width: 64px !important;
height: 64px !important;
max-width: 64px !important;
max-height: 64px !important;
margin: 0 auto 1.5rem auto !important;
display: block !important;
}

/* ============================================================
2. EC-CUBE標準の追従ページトップボタン（.ec-blockTopBtn）のスタイリング
============================================================ */
.ec-blockTopBtn,
.pagetop {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: fixed !important;
bottom: 20px !important;
right: 20px !important;
z-index: 999 !important;
background-color: #0f172a !important;
color: #38bdf8 !important;
border: 1px solid #334155 !important;
border-radius: 0.375rem !important;
padding: 0.5rem 1rem !important;
font-size: 0.85rem !important;
font-weight: bold !important;
cursor: pointer !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
transition: all 0.2s ease-in-out !important;
width: auto !important;
min-width: max-content !important;
white-space: nowrap !important;
}

.ec-blockTopBtn:hover,
.pagetop:hover {
background-color: #1e293b !important;
color: #7dd3fc !important;
border-color: #0e7490 !important;
}

/* ============================================================
3. ヘッダー構造・位置ズレ補正 ＆ 検索フォーム完全四角化（直線）補正
============================================================ */
.ionwave-header {
background-color: #020617 !important;
border-bottom: 1px solid #1e293b !important;
position: relative;
z-index: 1000;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}

.ionwave-header-top {
padding: 0.6rem 0;
border-bottom: 1px solid #1e293b;
}

.ionwave-header-bottom {
background-color: #0b1120;
padding: 0.5rem 0;
margin-bottom: 0 !important;
}

/* ロゴ & 公式ショップバッジ */
.ionwave-logo-text {
font-size: 30px !important;
font-weight: 900;
letter-spacing: 0.05em;
line-height: 1.1;
background: linear-gradient(90deg, #22d3ee, #34d399);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
white-space: nowrap;
}

.ionwave-badge {
font-size: 0.75rem !important;
padding: 3px 10px;
border-radius: 9999px;
background-color: #0f172a;
border: 1px solid #0e7490;
color: #22d3ee;
white-space: nowrap;
}

@media (max-width: 767.98px) {
.ionwave-header-logo-area {
padding-left: 48px !important;
}
}

/* 検索フォーム全体 */
.ionwave-search-wrap {
max-width: 540px;
}

.ec-headerSearch {
display: flex !important;
align-items: center !important;
width: 100% !important;
}

/* カテゴリ選択プルダウン */
.ec-headerSearch__category select,
.ionwave-search-wrap select {
background-color: #0f172a !important;
color: #f8fafc !important;
border: 1px solid #334155 !important;
border-radius: 0.375rem !important;
height: 40px !important;
padding: 0 0.5rem !important;
max-width: 130px !important;
font-size: 0.875rem !important;
cursor: pointer !important;
box-shadow: none !important;
outline: none !important;
}

/* キーワード入力エリア（完全四角・直線固定） */
.ec-headerSearch__keyword,
.ec-headerSearch__keyword form,
.ec-headerSearch__keyword .ec-input,
.ionwave-search-wrap .ec-headerSearch__keyword,
.ionwave-search-wrap .ec-input {
background-color: #0f172a !important;
border: 1px solid #334155 !important;
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
height: 40px !important;
}

/* キーワード入力インプット */
.ec-headerSearch__keyword input[type="search"],
.ec-headerSearch__keyword input[type="text"],
.ionwave-search-wrap input[type="search"],
.ionwave-search-wrap input[type="text"] {
background-color: transparent !important;
color: #f8fafc !important;
border: none !important;
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
height: 100% !important;
padding: 0 0.75rem !important;
flex: 1 1 auto !important;
font-size: 0.95rem !important;
box-shadow: none !important;
outline: none !important;
}

/* 虫眼鏡検索ボタン */
.ec-headerSearch__keywordBtn,
.ionwave-search-wrap button {
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
color: #38bdf8 !important;
height: 100% !important;
padding: 0 0.85rem !important;
cursor: pointer !important;
box-shadow: none !important;
outline: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

select option,
.ec-headerSearch__category select option,
.ionwave-search-wrap select option {
background-color: #0f172a !important;
color: #f8fafc !important;
padding: 0.5rem !important;
font-size: 0.9rem !important;
}

/* 会員ナビ・ログインナビ */
.ionwave-user-nav,
.ec-headerNav {
display: inline-flex !important;
align-items: center !important;
gap: 0.85rem !important;
margin: 0 !important;
padding: 0 !important;
}

.ec-headerNav__item {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}

.ionwave-user-nav,
.ionwave-user-nav *,
.ec-headerNav,
.ec-headerNav *,
.ec-headerNaviRole__nav,
.ec-headerNaviRole__nav * {
color: #e0ffff !important;
font-size: 0.875rem !important;
text-decoration: none !important;
}

.ionwave-user-nav a:hover,
.ionwave-user-nav a:hover *,
.ec-headerNav a:hover,
.ec-headerNav a:hover *,
.ec-headerNaviRole__nav a:hover,
.ec-headerNaviRole__nav a:hover * {
color: #38bdf8 !important;
}

/* カートボタン */
.ionwave-cart-wrap {
position: relative !important;
float: none !important;
}

.ionwave-cart-wrap .ec-cartNavi {
display: inline-flex !important;
align-items: center !important;
background-color: #0f172a !important;
border: 1px solid #334155 !important;
border-radius: 9999px !important;
padding: 0.35rem 0.75rem !important;
color: #f8fafc !important;
text-decoration: none !important;
font-size: 0.9rem !important;
}

.ionwave-cart-wrap .ec-cartNavi .ec-cartNavi__badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 1.4rem !important;
    height: 1.4rem !important;
    padding: 0 0.4rem !important;
    margin-left: 0.4rem !important;
    background-color: #10b981 !important;
    color: #020617 !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    border-radius: 9999px !important;
}

/* サブナビゲーションボタン */
.ionwave-header-bottom a {
font-size: 0.95rem !important;
}

.nav-link-b2b {
background: #083344 !important;
border: 1px solid #0e7490 !important;
color: #22d3ee !important;
}

.nav-link-b2c {
background: #064e3b !important;
border: 1px solid #047857 !important;
color: #34d399 !important;
}

.nav-link-sub {
background: #020617 !important;
border: 1px solid #1e293b !important;
color: #e0ffff !important;
}

/* ナビボタン：ホバー時に文字を青に */
.ionwave-header-bottom a.nav-link-b2b:hover,
.ionwave-header-bottom a.nav-link-b2c:hover,
.ionwave-header-bottom a.nav-link-sub:hover {
    color: #7dd3fc !important;
}
.ionwave-header-bottom a.nav-link-b2b,
.ionwave-header-bottom a.nav-link-b2c,
.ionwave-header-bottom a.nav-link-sub {
    transition: color 0.2s ease-in-out;
}

/* ============================================================
4. カテゴリナビ (PC/メイン領域) ダークテーマ化・スマホ縦並び制御
============================================================ */
.ec-categoryNaviRole,
.ec-itemNav {
background-color: #0b1120 !important;
border-bottom: 1px solid #1e293b !important;
padding: 0.5rem 0 !important;
margin: 0 !important;
}

.ec-categoryNaviRole .ec-itemNav__nav,
.ec-itemNav .ec-itemNav__nav {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
list-style: none !important;
margin: 0 !important;
padding: 0 1rem !important;
background-color: transparent !important;
}

@media (max-width: 767.98px) {
.ec-categoryNaviRole .ec-itemNav__nav,
.ec-itemNav .ec-itemNav__nav {
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
padding: 0 0.5rem !important;
}

.ec-categoryNaviRole .ec-itemNav__nav > li,
.ec-itemNav .ec-itemNav__nav > li {
width: 100% !important;
}

.ec-categoryNaviRole a,
.ec-itemNav a {
display: block !important;
width: 100% !important;
text-align: left !important;
}
}

.ec-categoryNaviRole .ec-itemNav__nav > li,
.ec-itemNav .ec-itemNav__nav > li {
position: relative !important;
background-color: transparent !important;
}

.ec-categoryNaviRole a,
.ec-itemNav a {
display: inline-block !important;
padding: 0.5rem 0.9rem !important;
background-color: #0f172a !important;
border: 1px solid #334155 !important;
border-radius: 0.375rem !important;
color: #e0ffff !important;
font-size: 0.95rem !important;
font-weight: bold !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}

.ec-categoryNaviRole a:hover,
.ec-itemNav a:hover {
color: #38bdf8 !important;
border-color: #06b6d4 !important;
background-color: #1e293b !important;
}

/* ============================================================
5. ドロワー（ハンバーガーメニューSP）内の各ブロック色調補正
============================================================ */
.ec-drawerRole {
background-color: #020617 !important;
color: #f1f5f9 !important;
}

.ec-headerCategoryArea {
background-color: #020617 !important;
border-bottom: 1px solid #1e293b !important;
padding: 1rem !important;
}

.ec-headerCategoryArea__heading {
background-color: #020617 !important;
border-bottom: 1px solid #1e293b !important;
padding-bottom: 0.5rem !important;
margin-bottom: 0.5rem !important;
}

.ec-headerCategoryArea__heading p {
color: #e0ffff !important;
font-size: 0.85rem !important;
font-weight: bold !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
margin: 0 !important;
}

.ec-headerCategoryArea .ec-itemNav__nav,
.ec-headerCategoryArea .ec-itemNav__nav ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
background-color: #020617 !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}

.ec-headerCategoryArea .ec-itemNav__nav li {
border-bottom: 1px solid #0f172a !important;
background-color: #020617 !important;
width: 100% !important;
}

.ec-headerCategoryArea .ec-itemNav__nav a {
display: block !important;
width: 100% !important;
padding: 0.7rem 0.5rem !important;
color: #f1f5f9 !important;
font-size: 0.95rem !important;
text-decoration: none !important;
background-color: #020617 !important;
border: none !important;
}

.ec-headerCategoryArea .ec-itemNav__nav a:hover {
color: #38bdf8 !important;
background-color: #0f172a !important;
}

.ec-headerLinkArea {
background-color: #020617 !important;
padding: 0.5rem 1rem 1.5rem 1rem !important;
}

.ec-headerLink__list {
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
background-color: #020617 !important;
}

.ec-headerLink__item {
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
padding: 0.75rem 0.85rem !important;
color: #f1f5f9 !important;
background-color: #0f172a !important;
border: 1px solid #1e293b !important;
border-radius: 0.375rem !important;
text-decoration: none !important;
font-size: 0.95rem !important;
font-weight: bold !important;
}

.ec-headerLink__item:hover {
background-color: #1e293b !important;
color: #38bdf8 !important;
border-color: #0e7490 !important;
}

.ec-headerLink__icon {
color: #38bdf8 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}

.ec-headerLink__icon i {
color: #38bdf8 !important;
}

/* ============================================================
6. 商品一覧ページ（list.twig）ダークテーマ化
============================================================ */
.ec-searchnavRole {
background-color: #020617 !important;
border: 1px solid #1e293b !important;
border-radius: 0.5rem !important;
padding: 1rem !important;
margin-bottom: 1.5rem !important;
}

.ec-topicpath,
.ec-topicpath__item,
.ec-topicpath__item a,
.ec-topicpath__divider {
color: #e0ffff !important;
background-color: transparent !important;
font-size: 0.9rem !important;
}

.ec-topicpath__item--active,
.ec-topicpath__item a:hover {
color: #38bdf8 !important;
}

.ec-searchnavRole__counter {
color: #f8fafc !important;
}

.ec-searchnavRole__counter span {
color: #e0ffff !important;
}

.ec-shelfRole,
.ec-shelfGrid {
background-color: transparent !important;
}

.ec-shelfGrid__item {
background-color: #020617 !important;
border: 1px solid #1e293b !important;
border-radius: 0.75rem !important;
padding: 1.25rem !important;
transition: border-color 0.2s ease !important;
}

.ec-shelfGrid__item:hover {
border-color: #0e7490 !important;
}

.ec-shelfGrid__item a {
color: #f8fafc !important;
text-decoration: none !important;
font-size: 1rem !important;
}

.ec-shelfGrid__item p {
color: #e0ffff !important;
font-size: 0.95rem !important;
}

.ec-shelfGrid__item .price02-default {
color: #38bdf8 !important;
font-weight: bold !important;
font-size: 1.2rem !important;
}

/* ============================================================
7. 商品詳細ページ（detail.twig）ダークテーマ化
============================================================ */
.ec-productRole,
.ec-grid2__cell {
background-color: transparent !important;
}

.ec-productRole__profile {
background-color: #020617 !important;
border: 1px solid #1e293b !important;
border-radius: 0.75rem !important;
padding: 1.5rem !important;
}

.ec-headingTitle {
color: #f8fafc !important;
border-bottom: 1px solid #1e293b !important;
padding-bottom: 0.5rem !important;
}

.ec-productRole__tag {
background-color: #0f172a !important;
border: 1px solid #334155 !important;
color: #38bdf8 !important;
border-radius: 0.25rem !important;
padding: 0.25rem 0.6rem !important;
font-size: 0.85rem !important;
}

.ec-productRole__priceRegularPrice,
.ec-productRole__priceRegularTax,
.ec-price__tax,
.ec-productRole__code {
color: #e0ffff !important;
font-size: 0.95rem !important;
}

.ec-price__price,
.price02-default {
color: #38bdf8 !important;
font-weight: bold !important;
}

.ec-productRole__category,
.ec-productRole__category a {
color: #e0ffff !important;
font-size: 0.95rem !important;
}

.ec-productRole__category a:hover {
color: #38bdf8 !important;
}

.ec-productRole__description {
color: #e0ffff !important;
border-top: 1px solid #1e293b !important;
padding-top: 1rem !important;
margin-top: 1rem !important;
font-size: 1rem !important;
line-height: 1.8 !important;
}

.slideThumb img {
border: 1px solid #334155 !important;
border-radius: 0.25rem !important;
background-color: #020617 !important;
}

.ec-modal-wrap {
background-color: #020617 !important;
border: 1px solid #334155 !important;
color: #f8fafc !important;
border-radius: 0.75rem !important;
}

.ec-pagerRole .ec-pager {
display: flex !important;
justify-content: center !important;
gap: 0.25rem !important;
}

.ec-pagerRole .ec-pager li a,
.ec-pagerRole .ec-pager li span {
background-color: #020617 !important;
border: 1px solid #334155 !important;
color: #f8fafc !important;
padding: 0.45rem 0.9rem !important;
border-radius: 0.375rem !important;
font-size: 0.95rem !important;
}

.ec-pagerRole .ec-pager li.active span {
background-color: #06b6d4 !important;
color: #020617 !important;
font-weight: bold !important;
border-color: #06b6d4 !important;
}

/* ============================================================
8. ショッピングカートページ（Cart_index.twig）ダークテーマ化
============================================================ */
.ec-cartRole {
background-color: transparent !important;
}

.ec-cartHeader {
background-color: #020617 !important;
border-bottom: 1px solid #1e293b !important;
}

.ec-cartHeader__label {
background-color: #020617 !important;
color: #38bdf8 !important;
font-weight: bold !important;
}

.ec-cartRow {
background-color: #020617 !important;
border-bottom: 1px solid #1e293b !important;
}

.ec-cartRow__name a {
color: #f8fafc !important;
font-size: 1rem !important;
}

.ec-cartRow__unitPrice,
.ec-cartRow__sutbtotal,
.ec-cartRow__sutbtotalSP,
.ec-cartRow__amount,
.ec-cartRole__totalAmount {
color: #38bdf8 !important;
}

/* ============================================================
9. 購入ログイン（Shopping/login.twig）および注文フロー全般
============================================================ */
.ec-login__icon {
display: none !important;
}

.ec-guest {
background-color: #020617 !important;
border: 1px solid #0e7490 !important;
border-radius: 0.75rem !important;
padding: 2rem !important;
}

.ec-guest p {
color: #e0ffff !important;
font-size: 1rem !important;
}

.ec-orderRole,
.ec-orderAccount,
.ec-orderDelivery,
.ec-orderPayment,
.ec-orderConfirm,
.ec-totalBox {
background-color: #020617 !important;
border: 1px solid #1e293b !important;
border-radius: 0.75rem !important;
color: #f8fafc !important;
}

.ec-rectHeading h2,
.ec-orderDelivery__title {
color: #38bdf8 !important;
background-color: #020617 !important;
border-bottom: 1px solid #1e293b !important;
}

.ec-totalBox__spec,
.ec-totalBox__total,
.ec-totalBox__paymentTotal,
.ec-totalBox__taxRate {
border-color: #1e293b !important;
color: #e0ffff !important;
}

.ec-totalBox__price {
color: #38bdf8 !important;
}

.ec-inlineBtn {
background-color: transparent !important;
border: 1px solid #06b6d4 !important;
color: #06b6d4 !important;
border-radius: 0.375rem !important;
}

.ec-inlineBtn:hover {
background-color: #06b6d4 !important;
color: #020617 !important;
}

/* ============================================================
10. フォーム・入力枠
============================================================ */
.form-control,
.form-select,
.ec-input select,
.ec-input textarea,
.ec-select select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
background-color: #020617 !important;
color: #f8fafc !important;
border: 1px solid #334155 !important;
border-radius: 0.375rem !important;
font-size: 1rem !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
background-color: #0f172a !important;
border-color: #06b6d4 !important;
outline: none !important;
box-shadow: 0 0 0 0.25rem rgba(6, 182, 212, 0.25) !important;
}

/* ============================================================
11. 全体背景・文字サイズ（16px基準化）・共通見出し統合初期化
============================================================ */
body {
background-color: #0f172a !important;
color: #e0ffff !important;
font-size: 16px !important;
line-height: 1.7 !important;
}

.ec-layoutRole,
.ec-layoutRole__contents,
.ec-layoutRole__main,
.ec-layoutRole__mainWithColumn,
.ec-layoutRole__mainBetweenColumn {
background-color: #0f172a !important;
color: #e0ffff !important;
padding-top: 0 !important;
margin-top: 0 !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: #f8fafc !important;
}

.ec-heading-bold,
.fw-bold {
color: #f8fafc !important;
}

/* 本文・説明文全般：商品詳細ページと同じ16px・読みやすい行間に統一 */
p, label, dt, dd, li {
color: #e0ffff !important;
font-size: 16px !important;
line-height: 1.75 !important;
}

a {
color: #38bdf8 !important;
text-decoration: none !important;
}

a:hover {
color: #7dd3fc !important;
text-decoration: underline !important;
}

.ec-footerRole {
background-color: #020617 !important;
border-top: 1px solid #1e293b !important;
color: #e0ffff !important;
}

.ec-login,
.ec-borderedDefs,
.ec-orderAccount,
.ec-orderDelivery,
.ec-orderConfirm {
background: #020617 !important;
border: 1px solid #1e293b !important;
border-radius: 0.75rem !important;
padding: 2rem !important;
color: #f8fafc !important;
}

.btn-primary,
.ec-blockBtn--action,
.ec-inlineBtn--action,
.ec-inlineBtn--primary,
.ec-blockBtn--primary {
background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
border: none !important;
color: #020617 !important;
font-weight: bold !important;
}

.btn-secondary,
.ec-blockBtn--cancel,
.ec-inlineBtn--cancel {
background: #1e293b !important;
border: 1px solid #334155 !important;
color: #e0ffff !important;
}

/* ============================================================
12. トップページ独自ブロック（文字色#e0ffff・16px最適化）
============================================================ */
.ionwave-card-b2b,
.ionwave-card-b2c,
.roi-panel {
border-radius: 0.75rem;
background-color: #020617;
}

.roi-panel {
border: 1px solid #1e293b;
}

.roi-result-card {
background-color: #0f172a;
border: 1px solid #0e7490;
border-radius: 0.5rem;
}

/* TOPページ各カード・枠内の説明文・補足テキスト（#e0ffffへ統一） */
.front_page .card-text,
.front_page .ionwave-card-b2b p,
.front_page .ionwave-card-b2c p,
.front_page p.small,
.front_page .text-secondary,
.front_page .text-secondary.small,
.front_page .roi-panel label,
.front_page .roi-result-card .text-secondary,
.front_page .card .small {
font-size: 16px !important;
line-height: 1.75 !important;
color: #e0ffff !important;
}

/* 税込表示・単位などの極小補足ラベル */
.front_page .card span.small,
.front_page .roi-panel label.small,
.front_page .roi-result-card .small {
font-size: 0.85rem !important;
color: #e0ffff !important;
}

/* TOPページ見出し直下のサブラベル（サイズ指定） */
.front_page .text-secondary.small,
.front_page .text-success.small,
.front_page .text-info.small {
font-size: 0.95rem !important;
}

/* 極小タグ・バッジ */
.front_page .badge {
font-size: 0.8rem !important;
padding: 0.35rem 0.65rem !important;
}

/* ============================================================
13. 「デザイン CSS.pdf」に基づく個別デザイン調整
============================================================ */

/* ------------------------------------------------------------
1-1. 利用規約ページ（Help/agreement.twig）条文文字色補正
------------------------------------------------------------ */
.ec-off1Grid__cell,
.ec-off1Grid__cell *,
.ec-role,
.ec-role *,
.ec-helpRole,
.ec-helpRole *,
.ec-helpRole__description,
.ec-helpRole__description *,
.ec-borderedDefs dt,
.ec-borderedDefs dd {
color: #e0ffff !important;
}

/* ------------------------------------------------------------
1-2. マイページ/お届け先一覧（Mypage/delivery.twig）登録情報文字色補正
------------------------------------------------------------ */
.ec-deliveryRole,
.ec-deliveryRole *,
.ec-addressRole,
.ec-addressRole *,
.ec-addressList,
.ec-addressList *,
.ec-deliveryList,
.ec-deliveryList * {
color: #e0ffff !important;
}

/* ------------------------------------------------------------
3. 本会員登録完了ページ（Entry/activate.twig）改行不自然さ防止
------------------------------------------------------------ */
.ec-activateRole p,
.ec-conversionRole p {
letter-spacing: -0.01em !important;
word-break: normal !important;
overflow-wrap: break-word !important;
line-height: 1.8 !important;
}

/* ------------------------------------------------------------
4. 退会手続きページ（Mypage/withdraw.twig）注意マーク・文字かぶり補正
------------------------------------------------------------ */
.ec-withdrawRole .ec-reportRole__icon,
.ec-withdrawRole .ec-icon,
.ec-withdrawRole svg,
.ec-withdrawRole .c-icon,
.ec-withdrawRole i {
margin-right: 0.75rem !important;
vertical-align: middle !important;
display: inline-block !important;
flex-shrink: 0 !important;
}

.ec-withdrawRole .ec-reportRole,
.ec-withdrawRole p {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
}

/* ------------------------------------------------------------
5. 注文手続き・確認画面（Shopping/index.twig, confirm.twig）
   ご利用ポイント欄背景ダークトーン補正（文字色はそのまま）
------------------------------------------------------------ */
.ec-point,
.ec-totalBox__point,
.ec-inputPoint,
.ec-usePointRole,
.ec-pointBlock,
.ec-totalBox .ec-point,
.ec-totalBox .ec-pointBlock,
div[class*="point"] {
background-color: #020617 !important;
border: 1px solid #1e293b !important;
border-radius: 0.5rem !important;
}

/* 内部子要素の背景白指定を透過上書き */
.ec-point *,
.ec-totalBox__point *,
.ec-usePointRole *,
.ec-pointBlock * {
background-color: transparent !important;
}

/* ============================================================
14. 商品詳細ページ（画像レイアウト・サムネイル位置・スマホ表示の完全補正）
============================================================ */
/* PC表示時：左右カラムの高さを揃えず、左側（画像側）を自立させて上詰めに配置 */
@media (min-width: 768px) {
  .ec-productRole .ec-grid2 {
    display: flex !important;
    align-items: flex-start !important;
  }
  .ec-productRole .ec-grid2__cell:first-child {
    align-self: flex-start !important;
    height: auto !important;
  }
  .ec-productRole .ec-sliderItemRole {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .ec-productRole .item_visual,
  .ec-productRole .item_visual.slick-slider,
  .ec-productRole .slick-slider {
    margin-bottom: 0 !important;
    height: auto !important;
  }
  .ec-productRole .item_visual .slick-list,
  .ec-productRole .item_visual .slick-track,
  .ec-productRole .item_visual .slide-item {
    height: auto !important;
    min-height: 0 !important;
  }
  .ec-productRole .item_visual .slide-item img {
    display: block !important;
    margin: 0 auto !important;
    height: auto !important;
    max-height: 550px !important;
  }
  /* サムネイルをメイン画像直下に密着（間隔8px・均等3列並び） */
  .ec-productRole .item_nav {
    margin-top: 8px !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .ec-productRole .item_nav .slideThumb {
    margin: 0 !important;
    cursor: pointer;
    width: calc((100% - 16px) / 3) !important;
    max-width: calc((100% - 16px) / 3) !important;
    box-sizing: border-box !important;
  }
  .ec-productRole .item_nav .slideThumb img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* スマホ表示時（767px以下）：画像の縦伸び・余計な余白をリセットして通常フローで表示 */
@media (max-width: 767.98px) {
  .ec-productRole .ec-grid2 {
    display: block !important;
  }
  .ec-productRole .ec-grid2__cell {
    width: 100% !important;
    display: block !important;
    height: auto !important;
  }
  .ec-productRole .ec-sliderItemRole {
    height: auto !important;
    min-height: 0 !important;
  }
  .ec-productRole .item_visual,
  .ec-productRole .item_visual.slick-slider {
    margin-bottom: 1rem !important;
    height: auto !important;
  }
  .ec-productRole .item_visual .slick-list,
  .ec-productRole .item_visual .slick-track,
  .ec-productRole .item_visual .slide-item {
    height: auto !important;
    min-height: 0 !important;
  }
  .ec-productRole .item_visual .slide-item img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .ec-productRole__profile {
    margin-top: 1rem !important;
  }
}

/* ===== ミニカート（PC・スマホ共通）ダークテーマ ===== */
.ionwave-cart-wrap .ec-cartNaviIsset {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.ionwave-cart-wrap .ec-cartNaviIsset::before,
.ionwave-cart-wrap .ec-cartNaviIsset::after {
    display: none !important;
}
.ionwave-cart-wrap .ec-cartNaviIsset,
.ionwave-cart-wrap .ec-cartNaviIsset * {
    color: #f8fafc !important;
}
.ionwave-cart-wrap .ec-cartNaviIsset__cart,
.ionwave-cart-wrap .ec-cartNaviIsset__cartContents {
    background: transparent !important;
    border-color: #334155 !important;
}

/* 「キャンセル」：クラス名に依存せず、ボタン・cancelを含むクラスを指定 */
.ionwave-cart-wrap .ec-cartNaviIsset button,
.ionwave-cart-wrap .ec-cartNaviIsset [class*="cancel"],
.ionwave-cart-wrap .ec-cartNaviIsset__action > :not(.ec-blockBtn--action) {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #38bdf8 !important;
    color: #38bdf8 !important;
    font-weight: 700 !important;
}
.ionwave-cart-wrap .ec-cartNaviIsset button:hover,
.ionwave-cart-wrap .ec-cartNaviIsset [class*="cancel"]:hover {
    background-color: rgba(56, 189, 248, 0.15) !important;
    color: #ffffff !important;
}

/* ===== スマホのみ：画面幅いっぱいに表示 ===== */
@media (max-width: 767.98px) {
    .ionwave-cart-wrap .ec-cartNaviIsset {
        position: fixed !important;
        top: 7rem !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1050 !important;
    }
}

/* ============================================================
15. メンテナンスモード警告バー（重なり・ヘッダー隠れ防止）
============================================================ */
.ec-maintenanceAlert {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    z-index: 1001 !important;
    margin: 0 !important;
}

/* ============================================================
16. フッター表示統一（全ページで TOP ページと同じ見た目に）
   - グレー文字(text-secondary)を #e0ffff / 16px に統一
   - 既存ルールは変更せず、フッター内に限定して追記
   - footer.twig 最上位の .ionwave-footer を基点にする
============================================================ */
.ionwave-footer .text-secondary,
.ionwave-footer .text-secondary.small,
.ionwave-footer p.text-secondary,
.ionwave-footer li a.text-secondary,
.ec-footerRole .ionwave-footer .text-secondary {
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: #e0ffff !important;
}

/* 住所（インライン style の 0.7rem を上書き） */
.ionwave-footer p.text-secondary.mb-0 {
    font-size: 16px !important;
}

/* お問い合わせ（text-info）は水色のまま維持 */
.ionwave-footer li a.text-info {
    color: #38bdf8 !important;
}

/* フッター：メインメニューの商品リンク（業務用・一般向け）を他項目と同じ16pxに */
.ionwave-footer a[href*="category_id"] {
    font-size: 16px !important;
    line-height: 1.75 !important;
}


/* ============================================================
17. ヘッダー下段ナビ：TOPページ以外もTOPページと同じ大きさに
   - TOPページだけ `.front_page .text-secondary`（16px / line-height 1.75）が
     「実証データ・公的認証」「溶媒和電子とは」に当たっていたため、全ページで同じ指定にする
============================================================ */
.ionwave-header-bottom a.nav-link-sub.text-secondary {
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: #e0ffff !important;
}


/* ============================================================
18. ロゴテキスト：ページ固有のフォント指定に影響されないよう固定
   - 実証データ等の独自ページ側で body のフォントが変わっても、
     ロゴは商品一覧などと同じ標準フォントで表示する
============================================================ */
.ionwave-header .ionwave-logo-text {
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif) !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.1 !important;
}


/* ============================================================
19. 「公式ショップ」バッジ：ページ固有のフォント指定に影響されないよう固定
============================================================ */
.ionwave-header .ionwave-badge {
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: 1.5 !important;
}


/* ============================================================
20. ヘッダー会員ナビ（新規会員登録・お気に入り・ログイン）の文字を固定
   - 対象は文字部分の span.ec-headerNav__itemLink のみ
   - アイコン（<i class="fas ...">：Font Awesome）には触れない
============================================================ */
.ionwave-header .ec-headerNav__itemLink {
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
}


/* ============================================================
21. ヘッダー下段ナビ：「実証データ・公的認証」「溶媒和電子とは」のホバー色
   - セクション17の color 指定がホバー色(#7dd3fc)より優先されていたため、
     ホバー時にも他のボタンと同じ青になるよう上書き
============================================================ */
.ionwave-header-bottom a.nav-link-sub.text-secondary:hover,
.ionwave-header-bottom a.nav-link-sub.text-secondary:focus {
    color: #7dd3fc !important;
}


/* ============================================================
22. ヘッダー全体のフォントを固定（ページ固有の本文フォントの影響を遮断）
   - 親要素 .ionwave-header に1か所だけ指定する
   - 子要素へは継承で伝わる（検索のselect/inputは font-family: inherit のため追従）
   - `*` は使わない：Font Awesome のアイコン(.fas)は自身の font-family を
     持つので、継承なら壊れない
   - 元に戻したいときはこのセクション22を丸ごと削除
============================================================ */
.ionwave-header {
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif) !important;
}


/* ============================================================
23. ヘッダー内の入力部品（検索欄のselect/input/button）のフォントを直接固定
   - reboot.scss の `font-family: inherit` に頼らず、親(.ionwave-header)と
     同じフォントを明示する
   - 対象はフォーム部品のみ。アイコン(<i class="fas">・svg)には触れない
============================================================ */
.ionwave-header input,
.ionwave-header select,
.ionwave-header button,
.ionwave-header textarea {
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif) !important;
}


/* ============================================================
24. フッター：ホバー時に青くする
   - 色はヘッダー下段ナビのホバー色(#7dd3fc)と統一
   - セクション16の color 指定(!important)より優先されるよう、詳細度を上げている
============================================================ */
.ionwave-footer a.text-secondary,
.ionwave-footer button.text-secondary {
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.ionwave-footer a.text-secondary:hover,
.ionwave-footer a.text-secondary:focus {
    color: #7dd3fc !important;
}

/* ▲ページトップへ（ボタン）：文字と枠線を青に */
.ionwave-footer button.text-secondary:hover,
.ionwave-footer button.text-secondary:focus {
    color: #7dd3fc !important;
    border-color: #7dd3fc !important;
}


/* ============================================================
25. ボタンの視認性向上（カートに入れる・お問い合わせ等）
   (1) ホバーで「押せる」と分かる動き（浮き上がり・影・明るさ）
   (2) 商品一覧カード内のリンク型ボタン（購入希望の方はお問い合わせへ）を
       「カートに入れる」と同じボタン形状に統一（文字はみ出し・白文字を解消）
============================================================ */

/* (1) ホバー／フォーカス／クリックの動き */
.btn-primary,
.ec-blockBtn--action,
.ec-inlineBtn--action,
.ec-inlineBtn--primary,
.ec-blockBtn--primary {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-primary:hover,
.ec-blockBtn--action:hover,
.ec-inlineBtn--action:hover,
.ec-inlineBtn--primary:hover,
.ec-blockBtn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.45);
    filter: brightness(1.12);
}

.btn-primary:active,
.ec-blockBtn--action:active,
.ec-inlineBtn--action:active,
.ec-inlineBtn--primary:active,
.ec-blockBtn--primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(6, 182, 212, 0.35);
    filter: brightness(0.98);
}

.btn-primary:focus-visible,
.ec-blockBtn--action:focus-visible,
.ec-inlineBtn--action:focus-visible,
.ec-inlineBtn--primary:focus-visible,
.ec-blockBtn--primary:focus-visible {
    outline: 2px solid #7dd3fc !important;
    outline-offset: 2px;
}

/* リンク(<a>)型ボタンは、全体の a:hover（水色文字＋下線）に負けないようにする */
a.btn-primary:hover,
a.ec-blockBtn--action:hover,
a.ec-inlineBtn--action:hover,
a.ec-inlineBtn--primary:hover,
a.ec-blockBtn--primary:hover {
    color: #020617 !important;
    text-decoration: none !important;
}

/* (2) 商品一覧カード内のリンク型ボタンを、ボタンとして整える */
.ec-shelfGrid__item a.btn,
.ec-shelfGrid__item a.btn-primary,
.ec-shelfGrid__item a.ec-blockBtn--action,
.ec-shelfGrid__item a.ec-blockBtn--primary,
.ec-shelfGrid__item a.ec-inlineBtn--action,
.ec-shelfGrid__item a.ec-inlineBtn--primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    box-sizing: border-box;
    padding: 0.5rem;
    text-align: center;
    white-space: normal;
    line-height: 1.4;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    color: #020617 !important;
    border-radius: 0.375rem;
}


/* ============================================================
26. サブボタン（お気に入りに追加 等）のホバー表示
   - .ec-blockBtn--cancel 等は、元テーマのホバー色が既存CSSの !important で
     打ち消されていたため、触れても変化がなかった
   - 枠線をシアンに、文字を水色に、背景をわずかに明るくして「押せる」と分かるようにする
============================================================ */
.btn-secondary,
.ec-blockBtn--cancel,
.ec-inlineBtn--cancel {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-secondary:hover,
.btn-secondary:focus,
.ec-blockBtn--cancel:hover,
.ec-blockBtn--cancel:focus,
.ec-inlineBtn--cancel:hover,
.ec-inlineBtn--cancel:focus {
    background: #0c2a3b !important;
    border-color: #06b6d4 !important;
    color: #7dd3fc !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.25);
}

.btn-secondary:active,
.ec-blockBtn--cancel:active,
.ec-inlineBtn--cancel:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-secondary:focus-visible,
.ec-blockBtn--cancel:focus-visible,
.ec-inlineBtn--cancel:focus-visible {
    outline: 2px solid #7dd3fc !important;
    outline-offset: 2px;
}


/* ============================================================
27. ミニカート：削除ボタン（×）を押しやすい大きさ・見た目にする（PC・スマホ共通）
   - 削除リンクは URL に /cart/remove を含むため、クラス名に依存せず指定
   - 幅は親の列いっぱい(100%)、高さは最低40px、枠線つきのボタン形状にする
   - 「×」の横に「削除」の文字を付ける
============================================================ */
.ionwave-cart-wrap .ec-cartNaviIsset a[href*="/cart/remove"],
.ionwave-cart-wrap .ec-cartNaviIsset a[href*="operation=remove"],
.ionwave-cart-wrap .ec-cartNaviIsset .ec-cartNaviIsset__delete a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 88px;
    min-height: 40px;
    margin: 0.5rem 0 0 !important;
    padding: 0.4rem 0.75rem !important;
    border: 1px solid #f87171 !important;
    border-radius: 0.375rem;
    background: transparent !important;
    color: #fca5a5 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ionwave-cart-wrap .ec-cartNaviIsset a[href*="/cart/remove"]::after,
.ionwave-cart-wrap .ec-cartNaviIsset a[href*="operation=remove"]::after,
.ionwave-cart-wrap .ec-cartNaviIsset .ec-cartNaviIsset__delete a::after {
    content: "削除";
}

.ionwave-cart-wrap .ec-cartNaviIsset a[href*="/cart/remove"]:hover,
.ionwave-cart-wrap .ec-cartNaviIsset a[href*="/cart/remove"]:focus,
.ionwave-cart-wrap .ec-cartNaviIsset a[href*="operation=remove"]:hover,
.ionwave-cart-wrap .ec-cartNaviIsset a[href*="operation=remove"]:focus,
.ionwave-cart-wrap .ec-cartNaviIsset .ec-cartNaviIsset__delete a:hover,
.ionwave-cart-wrap .ec-cartNaviIsset .ec-cartNaviIsset__delete a:focus {
    background-color: rgba(248, 113, 113, 0.18) !important;
    border-color: #f87171 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}


/* ============================================================
28. ミニカート：削除ボタンの上に余白を確保（PC・スマホ共通）
   - 画像・商品情報と削除ボタンがくっついていたため、上に1remの余白を追加
============================================================ */
.ionwave-cart-wrap .ec-cartNaviIsset a[href*="/cart/remove"],
.ionwave-cart-wrap .ec-cartNaviIsset a[href*="operation=remove"],
.ionwave-cart-wrap .ec-cartNaviIsset .ec-cartNaviIsset__delete a {
    margin-top: 1rem !important;
}

.ionwave-cart-wrap .ec-cartNaviIsset .ec-cartNaviIsset__delete {
    padding-top: 0.5rem !important;
}


/* ============================================================
29. 注文画面（shopping/index.twig）：枠のデザインに余裕を持たせる
   - 「お支払方法」「利用ポイント」(.ec-orderPayment) だけ内側の余白(padding)が
     なく、文字が枠に接していたため、他の枠(2rem)と同じ余白を付ける
   - 枠どうしがくっついていたため、枠の下に余白を追加
============================================================ */
.ec-orderPayment {
    padding: 2rem !important;
}

.ec-orderAccount,
.ec-orderDelivery,
.ec-orderPayment,
.ec-orderConfirm {
    margin-bottom: 1.5rem !important;
}

/* 枠の中の見出しと内容の間・各項目の間にも余白 */
.ec-orderPayment .ec-rectHeading {
    margin-bottom: 1rem !important;
}

.ec-orderPayment .ec-radio > div {
    padding: 0.4rem 0 !important;
}

.ec-orderPayment .ec-input p {
    margin: 0 0 0.75rem !important;
}

.ec-orderPayment .ec-input .ec-errorMessage {
    margin-top: 0.5rem !important;
}


/* ============================================================
30. 注文画面：外枠の上と、お客様情報・合計欄の枠の間に余白を作る
   - 外枠(.ec-orderRole)の上端と内側の枠がくっついていたため、上に余白を追加
   - 左右の枠（お客様情報側・合計金額側）は同じ外枠の内側にあるので、
     まとめて同じ分だけ下がる
============================================================ */
.ec-orderRole {
    padding-top: 1.5rem !important;
}


/* ============================================================
31. 注文画面：見出し（お客様情報・配送情報など）の左端を本文・「お届け先」に揃える
   - 見出し(h2)だけが左に約12pxインデントされていたため、インデントを解除
============================================================ */
.ec-orderRole .ec-rectHeading h2 {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}