/*
Theme Name: AIR BRIDGE Cosmic Vape Theme v37.8.9.12.12
Theme URI: https://example.com/
Author: APPTUNE TRADE
Description: AIR BRIDGE用の宇宙感・黒基調・ネオンデザイン対応ECテーマ。v37.8.8.1ではスマホTOPラベルの見切れを修正したテーマ改良版。
Version: 37.8.9.12.12
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: airbridge-btoc
*/
:root{
--bg:#fbfaf7; --ink:#161616; --muted:#6f6a62; --line:#e7e1d7; --gold:#c6a45d; --gold2:#f1d99c;
--dark:#11110f; --cream:#fff8e9; --soft:#f4efe4; --green:#879b78; --berry:#b76580;
--shadow: 0 22px 70px rgba(20,20,20,.09); --radius:28px; --max:1180px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic","YuGothic",Meiryo,sans-serif;letter-spacing:.04em;line-height:1.85} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto}.ab-container{max-width:var(--max);margin:0 auto;padding:0 22px}.ab-header{position:sticky;top:0;z-index:80;background:rgba(251,250,247,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(231,225,215,.7)}.ab-nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.ab-logo{font-size:20px;font-weight:800;letter-spacing:.16em}.ab-logo span{display:block;font-size:10px;font-weight:600;color:var(--gold);letter-spacing:.22em;margin-top:-4px}.ab-menu{display:flex;align-items:center;gap:24px;font-size:13px;color:#292724}.ab-menu-list{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}.ab-menu-list li{margin:0;padding:0}.ab-menu a,.ab-menu-list a{opacity:.85}.ab-menu a:hover,.ab-menu-list a:hover{opacity:1;color:#9b7b36}.ab-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--dark);color:#fff;font-weight:700;font-size:13px;border:1px solid var(--dark);box-shadow:0 12px 34px rgba(17,17,15,.16);transition:.2s}.ab-btn:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(17,17,15,.2)}.ab-btn.gold{background:linear-gradient(135deg,var(--gold),#96722d);border-color:#b08b3c}.ab-btn.light{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:none}.ab-btn.ghost{background:transparent;color:var(--ink);border-color:rgba(22,22,22,.18);box-shadow:none}.ab-mobile{display:none}.ab-hero{position:relative;overflow:hidden;min-height:820px;padding:92px 0 70px;background:radial-gradient(circle at 70% 18%,#f9e7b6 0,#fbfaf7 31%,transparent 48%),linear-gradient(180deg,#fffdf8 0,#f4efe4 100%)}.ab-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:38px}.ab-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.68);font-size:12px;font-weight:700;color:#7a5d20}.ab-kicker:before{content:"";width:8px;height:8px;border-radius:99px;background:var(--gold);box-shadow:0 0 0 7px rgba(198,164,93,.14)}.ab-hero h1{font-size:clamp(46px,7vw,92px);line-height:1.02;margin:26px 0 20px;letter-spacing:.01em}.ab-hero h1 em{font-style:normal;background:linear-gradient(90deg,#151515,#ae883a);-webkit-background-clip:text;background-clip:text;color:transparent}.ab-lead{font-size:clamp(16px,2vw,21px);color:#4c4841;max-width:620px;margin:0 0 30px}.ab-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}.ab-notes{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.ab-note{padding:7px 10px;background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:999px}.ab-device-wrap{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center}.ab-glow{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,#ffe2a0 0,#f1d99c 23%,rgba(241,217,156,.24) 50%,transparent 72%);filter:blur(4px);animation:pulse 4.5s ease-in-out infinite}.ab-device{position:relative;width:min(78vw,410px);height:520px;border-radius:180px 180px 130px 130px;background:linear-gradient(145deg,#fff,#d7d1c4 28%,#151515 29%,#2b2925 74%,#0f0f0e 100%);box-shadow:inset -22px -28px 42px rgba(0,0,0,.34),inset 18px 22px 26px rgba(255,255,255,.18),0 46px 120px rgba(0,0,0,.25);transform:rotate(-9deg)}.ab-device:before{content:"AIR BRIDGE";position:absolute;top:118px;left:50%;transform:translateX(-50%) rotate(90deg);letter-spacing:.22em;color:#f3d897;font-size:15px;font-weight:800;white-space:nowrap}.ab-device:after{content:"";position:absolute;top:32px;left:50%;transform:translateX(-50%);width:124px;height:92px;border-radius:56px;background:linear-gradient(180deg,#faf7ee,#8c867a);box-shadow:inset 0 -12px 20px rgba(0,0,0,.18)}.ab-float{position:absolute;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:22px;padding:14px 16px;box-shadow:var(--shadow);font-size:13px;font-weight:700}.ab-float small{display:block;color:var(--muted);font-size:11px;font-weight:600}.ab-float.one{left:0;top:80px}.ab-float.two{right:0;bottom:92px}.ab-section{padding:92px 0}.ab-section.dark{background:#11110f;color:#fff}.ab-section.soft{background:var(--soft)}.ab-title{text-align:center;margin:0 auto 48px;max-width:760px}.ab-title .en{display:block;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.24em;margin-bottom:10px}.ab-title h2{font-size:clamp(32px,4.8vw,58px);line-height:1.15;margin:0 0 14px}.ab-title p{margin:0;color:var(--muted);font-size:16px}.dark .ab-title p{color:#cfc7b7}.ab-scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.ab-scene{min-height:270px;border-radius:var(--radius);padding:28px;position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 12px 40px rgba(20,20,20,.05)}.ab-
/* Single product title mobile */
@media (max-width: 768px) {
body.postid-13 .ab-single-product-title, body.postid-14 .ab-single-product-title, body.postid-15 .ab-single-product-title, body.postid-16 .ab-single-product-title, body.postid-17 .ab-single-product-title {font-size:22px !important;line-height:1.35 !important;}
}scene:after{content:"";position:absolute;right:-44px;bottom:-54px;width:170px;height:170px;border-radius:50%;background:linear-gradient(135deg,rgba(198,164,93,.18),rgba(135,155,120,.18))}.ab-scene:nth-child(2n):after{background:linear-gradient(135deg,rgba(183,101,128,.18),rgba(198,164,93,.13))}.ab-scene strong{display:block;font-size:26px;line-height:1.35;margin-bottom:12px;letter-spacing:.02em}.ab-scene p{margin:0;color:var(--muted);font-size:14px}.ab-products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.ab-product{background:#fff;border:1px solid var(--line);border-radius:32px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}.ab-product-visual{height:250px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#fff 0,#fbf0cf 34%,#efe7d7 100%)}.ab-pod{width:80px;height:220px;border-radius:44px;background:linear-gradient(160deg,#fff,#ddd 20%,#222 21%,#0c0c0b 100%);box-shadow:inset -11px -18px 25px rgba(0,0,0,.35),0 28px 50px rgba(0,0,0,.18);transform:rotate(7deg)}.ab-product:nth-child(2) .ab-product-visual{background:radial-gradient(circle,#fff 0,#f6dde5 36%,#eee3e6 100%)}.ab-product:nth-child(3) .ab-product-visual{background:radial-gradient(circle,#fff 0,#dcf1dc 36%,#e9eee1 100%)}.ab-product:nth-child(4) .ab-product-visual{background:radial-gradient(circle,#fff 0,#ffe0b1 36%,#efe2cb 100%)}.ab-product:nth-child(5) .ab-product-visual{background:radial-gradient(circle,#fff 0,#d7f1ff 36%,#e3eaf0 100%)}.ab-product:nth-child(6) .ab-product-visual{background:radial-gradient(circle,#fff 0,#ded5ca 36%,#eee8de 100%)}.ab-product-body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}.ab-product h3{font-size:21px;margin:0;line-height:1.35}.ab-product .price{font-size:22px;font-weight:900;color:#9b7b36}.ab-product p{margin:0;color:var(--muted);font-size:14px}.ab-cart-html{margin-top:auto}.ab-cart-html:empty:before{content:"e-shopsカートHTMLを商品編集画面に貼り付け";display:block;padding:12px;border:1px dashed #cdbb93;border-radius:14px;color:#8a6d31;font-size:12px;text-align:center;background:#fff9ea}.ab-feature-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:center}.ab-feature-visual{min-height:520px;border-radius:42px;background:linear-gradient(135deg,#fcf7e8,#11110f);position:relative;overflow:hidden;box-shadow:var(--shadow)}.ab-feature-visual:before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;background:rgba(255,255,255,.35);left:50%;top:50%;transform:translate(-50%,-50%)}.ab-feature-visual .ab-device{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(12deg) scale(.78)}.ab-feature-list{display:grid;gap:14px}.ab-feature{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 10px 32px rgba(20,20,20,.04)}.ab-num{width:38px;height:38px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none}.ab-feature h3{margin:0 0 4px;font-size:20px}.ab-feature p{margin:0;color:var(--muted);font-size:14px}.ab-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.ab-step{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px}.ab-step b{display:inline-flex;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;background:var(--gold);color:#fff;margin-bottom:14px}.ab-step h3{margin:0 0 8px;font-size:18px}.ab-step p{margin:0;color:var(--muted);font-size:13px}.ab-cta{margin:88px auto 0;border-radius:42px;background:linear-gradient(135deg,#11110f,#2b2517 62%,#c6a45d);color:#fff;padding:56px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;box-shadow:var(--shadow)}.ab-cta h2{margin:0 0 10px;font-size:clamp(28px,4vw,48px);line-height:1.1}.ab-cta p{margin:0;color:#ece4d4}.ab-faq{max-width:900px;margin:0 auto;display:grid;gap:12px}.ab-faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 22px}.ab-faq summary{cursor:pointer;font-weight:800}.ab-faq p{margin:10px 0 0;color:var(--muted)}.ab-footer{background:#090908;color:#fff;padding:58px 0 30px}.ab-footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.ab-footer h2{margin:0 0 12px;letter-spacing:.16em}.ab-footer p,.ab-footer li{color:#cfc7b7;font-size:13px}.ab-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.ab-copy{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;color:#978f82;font-size:12px}.ab-age{position:fixed;inset:0;background:rgba(8,8,7,.78);z-index:999;display:none;align-items:center;justify-content:center;padding:20px}.ab-age.show{display:flex}.ab-age-box{max-width:520px;background:#fff;border-radius:30px;padding:34px;text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.35)}.ab-age-box h2{font-size:28px;margin:0 0 12px}.ab-age-box p{color:var(--muted);margin:0 0 22px}.ab-age-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}@media(max-width:920px){.ab-menu{display:none}.ab-mobile{display:flex}.ab-hero{min-height:auto;padding-top:54px}.ab-hero-grid,.ab-feature-wrap,.ab-footer-grid{grid-template-columns:1fr}.ab-device-wrap{min-height:430px}.ab-device{height:430px;width:310px}.ab-scene-grid,.ab-products{grid-template-columns:1fr 1fr}.ab-steps{grid-template-columns:1fr 1fr}.ab-cta{grid-template-columns:1fr;padding:34px}}@media(max-width:620px){.ab-container{padding:0 16px}.ab-nav{height:64px}.ab-logo{font-size:16px}.ab-hero h1{font-size:44px}.ab-scene-grid,.ab-products,.ab-steps{grid-template-columns:1fr}.ab-section{padding:64px 0}.ab-float{display:none}.ab-hero-actions .ab-btn{width:100%}.ab-cta{border-radius:28px}.ab-product-visual{height:210px}}
/* Customizer support */
.ab-hero{background-size:cover;background-position:center;background-repeat:no-repeat}
.ab-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ab-news-card{background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);transition:.2s}
.ab-news-card:hover{transform:translateY(-3px)}
.ab-news-thumb{height:190px;background:linear-gradient(135deg,#11110f,#c6a45d);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;letter-spacing:.18em}
.ab-news-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ab-news-body{padding:22px}
.ab-news-body time{display:block;color:#9b7b36;font-size:12px;font-weight:800;letter-spacing:.12em;margin-bottom:8px}
.ab-news-body h3{font-size:20px;line-height:1.45;margin:0 0 8px}
.ab-news-body p{margin:0;color:var(--muted);font-size:14px}
.ab-news-empty{grid-column:1/-1;text-align:center;background:#fff;border:1px dashed #cdbb93;border-radius:22px;padding:28px;color:#8a6d31}
@media(max-width:920px){.ab-news-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ab-news-grid{grid-template-columns:1fr}.ab-news-thumb{height:160px}}
.ab-feature-visual.has-image{
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.ab-feature-visual.has-image:after{
display:none;
}
/* v10 category display */
.ab-cat-badges{display:flex;flex-wrap:wrap;gap:7px;margin:7px 0 10px}
.ab-cat-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border-radius:999px;background:#f7efd9;border:1px solid #e4d2a2;color:#8a6d31;font-size:11px;font-weight:800;letter-spacing:.08em;line-height:1.4}
.ab-news-card .ab-cat-badge:hover{background:#fff8e9;color:#6f511c}
.ab-pagination{margin-top:36px;text-align:center}
.ab-pagination .nav-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.ab-pagination a,.ab-pagination span{display:inline-flex;min-width:38px;height:38px;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--line);background:#fff;padding:0 12px;font-weight:700}
.ab-pagination .current{background:var(--dark);color:#fff;border-color:var(--dark)}
.ab-single{max-width:920px}
.ab-single-thumb{border-radius:28px;overflow:hidden;margin:0 0 30px;box-shadow:var(--shadow)}
.ab-single-thumb img{width:100%;display:block}
.ab-single-content{background:#fff;border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:0 12px 40px rgba(20,20,20,.05)}
.ab-single-content p{color:var(--muted)}
/* v13 fix: HOW TO BUY card text visibility */
.ab-step{color:var(--ink);}
.ab-step h3{color:var(--ink);display:block;font-weight:800;}
.ab-step p{color:var(--muted);}
/* v14: Japanese menu defaults */
@media(min-width:921px){.ab-menu-list{gap:22px}.ab-menu-list a{white-space:nowrap}}
/* v15 Mobile header menu */
.ab-menu-toggle{display:none;align-items:center;justify-content:center;gap:6px;width:52px;height:44px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 10px 26px rgba(20,20,20,.08);cursor:pointer;position:relative;z-index:120}
.ab-menu-toggle span{display:block;width:17px;height:2px;background:var(--ink);border-radius:99px;transition:.2s;position:absolute;left:14px}
.ab-menu-toggle span:nth-child(1){top:14px}.ab-menu-toggle span:nth-child(2){top:21px}.ab-menu-toggle span:nth-child(3){top:28px}
.ab-menu-toggle em{font-style:normal;font-size:0}
.ab-menu-toggle.is-open span:nth-child(1){top:21px;transform:rotate(45deg)}
.ab-menu-toggle.is-open span:nth-child(2){opacity:0}
.ab-menu-toggle.is-open span:nth-child(3){top:21px;transform:rotate(-45deg)}
@media(max-width:920px){
.ab-nav{position:relative}
.ab-menu-toggle{display:inline-flex;margin-left:auto;flex:none}
.ab-menu{display:none;position:absolute;left:16px;right:16px;top:calc(100% + 10px);z-index:110;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 26px 70px rgba(20,20,20,.18);color:var(--ink)}
.ab-menu.is-open{display:block}
.ab-menu-list{display:grid;grid-template-columns:1fr;gap:0;width:100%}
.ab-menu-list li{border-bottom:1px solid var(--line)}
.ab-menu-list li:last-child{border-bottom:none}
.ab-menu-list a{display:block;padding:14px 6px;font-size:15px;font-weight:800;letter-spacing:.08em;color:var(--ink);opacity:1}
.ab-menu .ab-btn{width:100%;margin-top:14px;padding:14px 18px}
body.ab-menu-open{overflow:hidden}
}
@media(max-width:620px){
.ab-logo{font-size:15px;max-width:calc(100% - 66px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-logo span{font-size:9px}
}
/* v16: Custom logo support */
.ab-logo{display:inline-flex;align-items:center;min-height:44px}
.ab-logo .ab-logo-image{display:inline-flex;align-items:center}
.ab-logo .custom-logo-link{display:inline-flex;align-items:center}
.ab-logo img.custom-logo{display:block;width:auto;max-width:260px;max-height:54px;height:auto;object-fit:contain}
@media(max-width:620px){.ab-logo img.custom-logo{max-width:190px;max-height:44px}}
/* v17 custom logo fix */
.ab-logo-wrap{display:flex;align-items:center;min-height:44px;flex:0 0 auto}
.ab-logo-wrap .custom-logo-link{display:inline-flex;align-items:center;line-height:1}
.ab-logo-wrap img.custom-logo{display:block;width:auto;max-width:280px;max-height:58px;height:auto;object-fit:contain}
@media(max-width:920px){.ab-logo-wrap img.custom-logo{max-width:220px;max-height:48px}}
@media(max-width:620px){.ab-logo-wrap img.custom-logo{max-width:180px;max-height:42px}.ab-logo-wrap{max-width:calc(100% - 66px);overflow:hidden}}
/* v18: header logo + site title/tagline */
.ab-logo-wrap{display:flex;align-items:center;min-height:44px;flex:0 0 auto}
.ab-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--ink);text-decoration:none;line-height:1}
.ab-brand-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ab-brand-mark img,.ab-custom-logo{display:block;width:auto;max-width:58px;max-height:54px;height:auto;object-fit:contain}
.ab-brand-text{display:flex;align-items:baseline;gap:8px;white-space:nowrap;min-width:0}
.ab-brand-text strong{display:inline-block;font-size:20px;font-weight:900;letter-spacing:.18em;color:#161616;line-height:1}
.ab-brand-text em{display:inline-block;font-style:normal;font-size:11px;font-weight:800;color:var(--gold);letter-spacing:.28em;line-height:1.1;white-space:nowrap}
@media(max-width:920px){.ab-brand{gap:9px}.ab-brand-mark img,.ab-custom-logo{max-width:46px;max-height:42px}.ab-brand-text{flex-direction:column;align-items:flex-start;gap:3px}.ab-brand-text strong{font-size:16px;letter-spacing:.14em}.ab-brand-text em{font-size:8px;letter-spacing:.20em}.ab-logo-wrap{max-width:calc(100% - 74px);overflow:hidden}.ab-brand-text{overflow:hidden}.ab-brand-text strong,.ab-brand-text em{max-width:220px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:420px){.ab-brand-text strong{font-size:14px}.ab-brand-text em{font-size:7px}.ab-brand-mark img,.ab-custom-logo{max-width:40px;max-height:38px}}
/* v19: header logo two-line title/tagline layout */
.ab-brand{display:inline-flex;align-items:center;gap:12px;min-height:48px;color:var(--ink);text-decoration:none;line-height:1}
.ab-brand-text{display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:center;gap:5px !important;white-space:nowrap;min-width:0}
.ab-brand-text strong{display:block;font-size:20px;font-weight:900;letter-spacing:.18em;color:#161616;line-height:1}
.ab-brand-text em{display:block;font-style:normal;font-size:11px;font-weight:800;color:var(--gold);letter-spacing:.28em;line-height:1.1;white-space:nowrap}
@media(max-width:920px){.ab-brand{gap:9px}.ab-brand-mark img,.ab-custom-logo{max-width:46px;max-height:42px}.ab-brand-text strong{font-size:16px;letter-spacing:.14em}.ab-brand-text em{font-size:8px;letter-spacing:.20em}.ab-logo-wrap{max-width:calc(100% - 74px);overflow:hidden}.ab-brand-text{overflow:hidden}.ab-brand-text strong,.ab-brand-text em{max-width:220px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:420px){.ab-brand-text strong{font-size:14px}.ab-brand-text em{font-size:7px}.ab-brand-mark img,.ab-custom-logo{max-width:40px;max-height:38px}}
/* v20 e-shops cart output fix */
.ab-cart-html{overflow-wrap:anywhere;word-break:break-word}
.ab-cart-html input,.ab-cart-html button,.ab-cart-html a{max-width:100%}
/* SNS follow links */
.ab-follow-section{background:#e6e6e4;}
.ab-follow-section .ab-title h2{font-size:clamp(34px,5vw,58px);letter-spacing:.03em;}
.ab-follow-icons{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap;margin-top:26px;}
.ab-follow-icon{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:#667b8a;color:#fff;font-weight:900;box-shadow:0 16px 40px rgba(20,20,20,.12);transition:.22s;}
.ab-follow-icon span{font-size:24px;line-height:1;letter-spacing:.02em;}
.ab-follow-icon small{font-size:10px;letter-spacing:.12em;opacity:.9;}
.ab-follow-icon:hover{transform:translateY(-4px);box-shadow:0 22px 54px rgba(20,20,20,.18);color:#fff;}
.ab-follow-line span{font-size:15px;background:#fff;color:#667b8a;border-radius:999px;padding:7px 8px;}
.ab-follow-x span{font-size:34px;font-weight:400;}
.ab-follow-instagram span{font-size:50px;font-weight:500;line-height:.74;}
@media(max-width:620px){.ab-follow-icons{gap:16px}.ab-follow-icon{width:76px;height:76px}.ab-follow-icon span{font-size:19px}.ab-follow-x span{font-size:28px}.ab-follow-instagram span{font-size:42px}}
/* v22: SNS follow links inside footer */
.ab-footer-follow{
margin-top:42px;
padding-top:34px;
border-top:1px solid rgba(255,255,255,.12);
display:grid;
grid-template-columns:1fr auto;
gap:28px;
align-items:center;
}
.ab-footer-follow-text span{
display:block;
color:var(--gold);
font-size:12px;
font-weight:900;
letter-spacing:.22em;
margin-bottom:8px;
}
.ab-footer-follow-text h3{
margin:0 0 8px;
font-size:clamp(24px,3vw,38px);
line-height:1.2;
color:#fff;
}
.ab-footer-follow-text p{
margin:0;
color:#cfc7b7;
}
.ab-footer .ab-follow-icons{
justify-content:flex-end;
margin-top:0;
}
.ab-footer .ab-follow-icon{
background:#607385;
color:#fff;
border-color:rgba(255,255,255,.18);
box-shadow:none;
}
.ab-footer .ab-follow-icon small{
color:#fff;
opacity:.85;
}
@media(max-width:760px){
.ab-footer-follow{grid-template-columns:1fr;text-align:left}
.ab-footer .ab-follow-icons{justify-content:flex-start}
.ab-footer .ab-follow-icon{width:78px;height:78px}
}
/* Video section */
.ab-video-section{background:#fffdf8}
.ab-video-box{max-width:980px;margin:0 auto;border-radius:36px;overflow:hidden;background:#11110f;box-shadow:0 26px 80px rgba(20,20,20,.14);border:1px solid var(--line)}
.ab-video{display:block;width:100%;height:auto;max-height:620px;background:#000;object-fit:cover}
.ab-video-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.ab-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ab-video-fallback{min-height:360px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#11110f,#c6a45d)}
@media(max-width:620px){.ab-video-box{border-radius:24px}.ab-video-fallback{min-height:220px}}
/* Ambassador */
.ab-ambassador-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ab-ambassador-card{background:#fff;border:1px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.ab-ambassador-photo{height:240px;background:linear-gradient(135deg,#11110f,#c6a45d);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;letter-spacing:.18em;text-align:center}
.ab-ambassador-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ab-ambassador-body{padding:22px;display:grid;gap:12px}
.ab-ambassador-body h2,.ab-ambassador-body h3{margin:0;line-height:1.35;font-size:22px}
.ab-ambassador-body p{margin:0;color:var(--muted);font-size:14px}
.ab-coupon{display:inline-flex;align-items:center;gap:9px;border:1px solid #dec88e;background:#fff8e3;color:#8a6d31;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;letter-spacing:.08em;width:max-content;max-width:100%}
.ab-coupon strong{color:#111;font-size:14px;letter-spacing:.08em}
.ab-coupon.large{font-size:14px;padding:12px 18px;margin:10px 0 18px}.ab-coupon.large strong{font-size:22px}
.ab-ambassador-sns{display:flex;flex-wrap:wrap;gap:8px}.ab-ambassador-sns a{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#111;color:#fff;font-weight:800;font-size:12px;padding:8px 12px}.ab-ambassador-sns.large a{font-size:14px;padding:10px 16px}
.ab-ambassador-single{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:center}.ab-ambassador-hero-photo{min-height:520px;border-radius:42px;overflow:hidden;background:linear-gradient(135deg,#11110f,#c6a45d);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;letter-spacing:.18em}.ab-ambassador-hero-photo img{width:100%;height:100%;object-fit:cover;display:block}.ab-entry-content{color:#4c4841}.ab-entry-content p{margin:0 0 1em}
@media(max-width:920px){.ab-ambassador-grid{grid-template-columns:repeat(2,1fr)}.ab-ambassador-single{grid-template-columns:1fr}.ab-ambassador-hero-photo{min-height:360px}}
@media(max-width:620px){.ab-ambassador-grid{grid-template-columns:1fr}.ab-ambassador-photo{height:220px}}
.ab-ambassador-card.is-pickup{border-color:rgba(198,164,93,.55);box-shadow:0 26px 80px rgba(198,164,93,.18)}
.ab-pickup-label{display:inline-flex;align-items:center;width:max-content;border-radius:999px;background:#111;color:#fff;font-size:11px;font-weight:900;letter-spacing:.14em;padding:5px 10px;margin-bottom:2px}
/* v31: product order consistency */
.ab-products{direction:ltr;}
.ab-products .ab-product{order:initial;}
@media(max-width:620px){.ab-products{display:grid!important;grid-auto-flow:row!important;direction:ltr!important;}.ab-products .ab-product{order:initial!important;}}
/* v32 cart display support */
.ab-cart-button{
display:inline-flex;align-items:center;justify-content:center;width:100%;
min-height:48px;padding:13px 18px;border-radius:999px;
background:linear-gradient(135deg,var(--gold),#96722d);color:#fff!important;
font-weight:900;letter-spacing:.06em;text-align:center;box-shadow:0 12px 30px rgba(150,114,45,.22);
}
.ab-cart-button:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(150,114,45,.28)}
.ab-cart-embed form,.ab-cart-embed table{max-width:100%}
.ab-cart-embed input[type="submit"],.ab-cart-embed button{
max-width:100%;border:0;border-radius:999px;background:#111;color:#fff;
padding:12px 18px;font-weight:800;cursor:pointer;
}
.ab-cart-nav{background:linear-gradient(135deg,var(--gold),#96722d);border-color:#b08b3c}
.ab-floating-cart{position:fixed;right:18px;bottom:18px;z-index:120;display:inline-flex;align-items:center;justify-content:center;min-width:112px;height:54px;padding:0 18px;border-radius:999px;background:linear-gradient(135deg,var(--gold),#96722d);color:#fff;text-decoration:none;font-weight:900;box-shadow:0 18px 46px rgba(0,0,0,.22)}
.ab-floating-cart:hover{transform:translateY(-2px)}
@media(max-width:620px){.ab-floating-cart{right:14px;bottom:14px;min-width:96px;height:48px;font-size:13px}.ab-cart-nav{width:100%;margin-top:6px}}
/* v33 cart auto display support */
.ab-cart-nav,.ab-floating-cart{white-space:nowrap}
@media(max-width:920px){.ab-menu.active .ab-cart-nav{display:inline-flex}}
/* v34: PRODUCT DESIGN画像差し替え時の中央白丸を非表示 */
.ab-feature-visual.has-image:before{
display:none !important;
}
.ab-feature-visual.has-image{
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
/* v36: メインビジュアル右側画像の差し替え対応 */
.ab-hero-main-image {
position: relative;
width: min(82vw, 520px);
height: 560px;
border-radius: 46px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 0 46px 120px rgba(0,0,0,.16);
overflow: hidden;
}
.ab-hero-main-image:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
pointer-events: none;
}
.ab-device-wrap.has-custom-hero-image .ab-glow,
.ab-device-wrap.has-custom-hero-image .ab-device {
display: none !important;
}
@media (max-width: 920px) {
.ab-hero-main-image {
width: min(92vw, 420px);
height: 420px;
border-radius: 34px;
}
}
/* v37: スマートフォンでもTOP右側画像の補助ラベルを表示 */
@media (max-width: 620px) {
.ab-device-wrap.has-custom-hero-image .ab-float {
display: block !important;
position: absolute;
z-index: 5;
max-width: 160px;
padding: 10px 12px;
border-radius: 18px;
font-size: 12px;
line-height: 1.35;
white-space: normal;
}
.ab-device-wrap.has-custom-hero-image .ab-float small {
font-size: 10px;
line-height: 1.45;
}
.ab-device-wrap.has-custom-hero-image .ab-float.one {
left: 10px;
top: 34px;
}
.ab-device-wrap.has-custom-hero-image .ab-float.two {
right: 10px;
bottom: 34px;
}
}
@media (max-width: 420px) {
.ab-device-wrap.has-custom-hero-image .ab-float {
max-width: 140px;
padding: 9px 10px;
font-size: 11px;
}
.ab-device-wrap.has-custom-hero-image .ab-float small {
font-size: 9px;
}
.ab-device-wrap.has-custom-hero-image .ab-float.one {
left: 4px;
top: 24px;
}
.ab-device-wrap.has-custom-hero-image .ab-float.two {
right: 4px;
bottom: 24px;
}
}
/* v38: 商品詳細ページの画像表示修正（白丸・黒背景を除去） */
.ab-product-detail-wrap {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 40px;
align-items: center;
}
.ab-single-product-visual {
min-height: 520px;
border-radius: 42px;
background: #fff;
position: relative;
overflow: hidden;
box-shadow: var(--shadow);
display: flex;
align-items: center;
justify-content: center;
}
.ab-single-product-visual:before,
.ab-single-product-visual:after {
display: none !important;
content: none !important;
}
.ab-single-product-visual img {
width: 100%;
height: 100%;
min-height: 520px;
object-fit: contain;
object-position: center center;
display: block;
background: #fff;
}
.ab-single-product-title {
font-size: clamp(36px,5vw,64px);
line-height: 1.12;
margin: 22px 0 12px;
}
.ab-single-product-price {
font-size: 30px;
font-weight: 900;
color: #9b7b36;
margin-bottom: 18px;
}
.ab-single-product-cart {
margin-top: 24px;
}
.ab-single-product-note {
font-size: 12px;
color: #777;
margin-top: 24px;
}
@media (max-width: 920px) {
.ab-product-detail-wrap {
grid-template-columns: 1fr;
}
.ab-single-product-visual {
min-height: 360px;
border-radius: 32px;
}
.ab-single-product-visual img {
min-height: 360px;
}
}
@media (max-width: 620px) {
.ab-single-product-visual {
min-height: 300px;
}
.ab-single-product-visual img {
min-height: 300px;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v1
v38機能統合済み / 宇宙感強め / 黒基調ネオンデザイン
========================================================= */
:root{
--cosmic-bg:#02030b;
--cosmic-bg2:#080a18;
--cosmic-panel:rgba(10,13,28,.86);
--cosmic-glass:rgba(255,255,255,.085);
--cosmic-line:rgba(255,255,255,.16);
--cosmic-text:#ffffff;
--cosmic-sub:#d8dbea;
--cosmic-muted:#b1b8ce;
--cosmic-gold:#d6ad4b;
--cosmic-pink:#ff4fb3;
--cosmic-purple:#8b5cf6;
--cosmic-blue:#38bdf8;
--cosmic-cyan:#67e8f9;
--cosmic-shadow:0 28px 90px rgba(0,0,0,.48);
}
/* 全体背景 */
body{
background:
radial-gradient(circle at 82% 7%, rgba(56,189,248,.24), transparent 26%),
radial-gradient(circle at 18% 14%, rgba(255,79,179,.20), transparent 30%),
radial-gradient(circle at 52% 38%, rgba(139,92,246,.17), transparent 36%),
radial-gradient(circle at 84% 72%, rgba(214,173,75,.09), transparent 30%),
linear-gradient(180deg,var(--cosmic-bg) 0%,var(--cosmic-bg2) 48%,var(--cosmic-bg) 100%) !important;
color:var(--cosmic-text) !important;
}
body::before{
content:"";
position:fixed;
inset:0;
z-index:-2;
pointer-events:none;
background:
radial-gradient(circle at 12% 18%, rgba(255,255,255,.85) 0 1px, transparent 2px),
radial-gradient(circle at 78% 22%, rgba(255,255,255,.55) 0 1px, transparent 2px),
radial-gradient(circle at 46% 12%, rgba(255,255,255,.45) 0 1px, transparent 2px),
radial-gradient(circle at 66% 68%, rgba(255,255,255,.42) 0 1px, transparent 2px),
radial-gradient(circle at 28% 74%, rgba(255,255,255,.50) 0 1px, transparent 2px),
linear-gradient(90deg, transparent 0 96%, rgba(255,255,255,.028) 97% 100%),
linear-gradient(0deg, transparent 0 96%, rgba(255,255,255,.022) 97% 100%);
background-size:360px 360px,430px 430px,520px 520px,470px 470px,560px 560px,56px 56px,56px 56px;
opacity:.62;
-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.94),transparent 90%);
mask-image:linear-gradient(to bottom,rgba(0,0,0,.94),transparent 90%);
}
body::after{
content:"";
position:fixed;
inset:-20%;
z-index:-1;
pointer-events:none;
background:
conic-gradient(from 220deg at 62% 30%, transparent 0deg, rgba(255,79,179,.18) 24deg, rgba(56,189,248,.16) 58deg, transparent 95deg),
conic-gradient(from 40deg at 35% 60%, transparent 0deg, rgba(139,92,246,.15) 30deg, rgba(214,173,75,.08) 70deg, transparent 115deg);
filter:blur(38px);
opacity:.80;
}
/* ヘッダー */
.ab-header,
.site-header{
background:rgba(2,3,10,.92) !important;
border-bottom:1px solid rgba(255,255,255,.14) !important;
box-shadow:0 10px 44px rgba(0,0,0,.42) !important;
backdrop-filter:blur(18px);
}
.ab-header .ab-container,
.site-header .ab-container{
background:transparent !important;
}
.ab-brand,
.ab-brand *,
.ab-logo,
.ab-logo *,
.site-title,
.site-title a,
.custom-logo-link{
color:#fff !important;
}
.ab-brand .tagline,
.ab-site-tagline,
.ab-logo-sub,
.site-description{
color:var(--cosmic-gold) !important;
}
/* メニュー崩れ対策 */
.ab-header nav ul,
.ab-nav ul,
.ab-menu ul,
.primary-menu,
.menu{
list-style:none !important;
margin:0 !important;
padding:0 !important;
}
@media (min-width: 921px){
.ab-header nav ul,
.ab-nav ul,
.ab-menu ul,
.primary-menu,
.menu{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:24px !important;
flex-wrap:nowrap !important;
}
.ab-header nav li,
.ab-nav li,
.ab-menu li,
.primary-menu li,
.menu li{
display:inline-flex !important;
margin:0 !important;
padding:0 !important;
}
.ab-header nav a,
.ab-nav a,
.ab-menu a,
.primary-menu a,
.menu a{
display:inline-flex !important;
align-items:center !important;
color:rgba(255,255,255,.88) !important;
text-decoration:none !important;
font-weight:700;
white-space:nowrap;
}
.ab-header nav a:hover,
.ab-nav a:hover,
.ab-menu a:hover{
color:#fff !important;
text-shadow:0 0 16px rgba(56,189,248,.45);
}
}
/* 共通文字 */
.ab-section,
.ab-section.soft,
main,
.site-main{
background:transparent !important;
color:#fff !important;
}
.ab-section h1,
.ab-section h2,
.ab-section h3,
.ab-section h4,
.ab-heading,
.ab-title{
color:#fff !important;
text-shadow:0 0 36px rgba(139,92,246,.22);
}
.ab-section p,
.ab-section li,
.ab-text,
.ab-muted{
color:var(--cosmic-sub) !important;
}
.ab-kicker,
.ab-section .ab-kicker{
color:var(--cosmic-gold) !important;
letter-spacing:.24em;
text-shadow:0 0 18px rgba(214,173,75,.28);
}
/* TOPヒーロー */
.ab-hero{
background:
radial-gradient(circle at 78% 30%, rgba(56,189,248,.26), transparent 28%),
radial-gradient(circle at 28% 38%, rgba(255,79,179,.23), transparent 36%),
radial-gradient(circle at 54% 55%, rgba(139,92,246,.16), transparent 42%),
linear-gradient(135deg,#02030a 0%,#080b18 58%,#03040a 100%) !important;
color:#fff !important;
position:relative;
overflow:hidden;
}
.ab-hero::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 70% 26%, rgba(255,255,255,.08) 0 1px, transparent 2px),
radial-gradient(circle at 86% 52%, rgba(255,255,255,.08) 0 1px, transparent 2px),
linear-gradient(105deg, transparent 8%, rgba(255,79,179,.21), rgba(56,189,248,.19), transparent 72%);
background-size:260px 260px,340px 340px,auto;
opacity:.96;
}
.ab-hero::after{
content:"";
position:absolute;
left:-18%;
right:-18%;
top:36%;
height:190px;
pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,79,179,.55),rgba(56,189,248,.47),rgba(214,173,75,.24),transparent);
transform:rotate(-4deg);
filter:blur(30px);
opacity:.58;
}
.ab-hero .ab-container,
.ab-hero-grid{
position:relative;
z-index:1;
}
.ab-hero h1{
color:#fff !important;
text-shadow:0 0 42px rgba(255,79,179,.22),0 0 62px rgba(56,189,248,.14);
}
.ab-hero p{
color:rgba(255,255,255,.84) !important;
}
/* TOPラベル */
.ab-pill,
.ab-badge,
.ab-tag,
.ab-hero .ab-tag,
.ab-hero .ab-pill,
.ab-hero .ab-badge{
background:rgba(255,255,255,.92) !important;
color:#a8791d !important;
border:1px solid rgba(255,255,255,.72) !important;
box-shadow:0 12px 32px rgba(0,0,0,.24),0 0 28px rgba(214,173,75,.16) !important;
}
.ab-pill *,
.ab-badge *,
.ab-tag *{
color:#a8791d !important;
}
/* 吹き出し */
.ab-float,
.ab-floating-note,
.ab-hero-note,
.ab-hero-bubble,
.ab-hero-card{
background:rgba(255,255,255,.92) !important;
color:#1d1d1d !important;
border:1px solid rgba(255,255,255,.72) !important;
box-shadow:0 18px 40px rgba(0,0,0,.26),0 0 22px rgba(255,255,255,.10) !important;
}
.ab-float *,
.ab-floating-note *,
.ab-hero-note *,
.ab-hero-bubble *,
.ab-hero-card *{
color:#1d1d1d !important;
}
/* TOP右側画像 */
.ab-hero-main-image{
border:1px solid rgba(255,255,255,.16) !important;
box-shadow:
0 40px 110px rgba(0,0,0,.62),
0 0 70px rgba(255,79,179,.20),
0 0 42px rgba(56,189,248,.14) !important;
}
/* ボタン */
.ab-btn,
.ab-cart-fixed,
.ab-cart-btn,
.wp-block-button__link,
button,
input[type="submit"]{
border-radius:999px !important;
}
.ab-btn:not(.secondary),
.ab-cart-fixed,
.ab-cart-btn,
.wp-block-button__link,
button:not(.menu-toggle),
input[type="submit"]{
background:linear-gradient(135deg,var(--cosmic-pink) 0%,var(--cosmic-purple) 50%,var(--cosmic-blue) 100%) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.22) !important;
box-shadow:
0 14px 38px rgba(124,58,237,.34),
0 0 28px rgba(56,189,248,.16) !important;
}
.ab-btn.secondary{
color:#fff !important;
background:rgba(255,255,255,.09) !important;
border:1px solid rgba(255,255,255,.22) !important;
}
/* カード */
.ab-card,
.ab-product,
.ab-product-card,
.ab-scene,
.ab-feature,
.ab-step,
.ab-faq-item,
.ab-news-card,
.ab-ambassador-card{
background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045)) !important;
color:#fff !important;
border:1px solid var(--cosmic-line) !important;
box-shadow:var(--cosmic-shadow) !important;
backdrop-filter:blur(12px);
}
.ab-card *,
.ab-product *,
.ab-product-card *,
.ab-scene *,
.ab-feature *,
.ab-step *,
.ab-faq-item *,
.ab-news-card *,
.ab-ambassador-card *{
color:inherit;
}
.ab-card p,
.ab-product p,
.ab-product-card p,
.ab-scene p,
.ab-feature p,
.ab-step p,
.ab-faq-item p,
.ab-news-card p,
.ab-ambassador-card p{
color:var(--cosmic-sub) !important;
}
/* 商品カード */
.ab-product h3,
.ab-product-card h3,
.ab-products h3,
.ab-product-title{
color:#fff !important;
}
.ab-product .price,
.ab-product-price,
.price{
color:var(--cosmic-gold) !important;
font-weight:900 !important;
}
.ab-product-meta,
.ab-product-meta *,
.ab-product small,
.ab-product .meta,
.ab-product .product-code,
.ab-product .product-name,
.ab-product .product-sku,
.ab-product .product-extra,
.ab-product form,
.ab-product form *,
.ab-product .cart,
.ab-product .cart *{
color:rgba(255,255,255,.90) !important;
}
.ab-product input,
.ab-product select,
.ab-product textarea{
background:#fff !important;
color:#111 !important;
border:1px solid rgba(255,255,255,.45) !important;
}
.ab-product-visual,
.ab-product-image{
background:
radial-gradient(circle at 50% 20%,rgba(255,255,255,.98),rgba(255,255,255,.34) 30%,rgba(56,189,248,.17) 56%,rgba(255,79,179,.12) 100%) !important;
}
/* PRODUCT DESIGN */
.ab-feature-visual{
background:
radial-gradient(circle at 30% 20%,rgba(255,79,179,.20),transparent 30%),
radial-gradient(circle at 78% 35%,rgba(56,189,248,.19),transparent 32%),
radial-gradient(circle at 52% 65%,rgba(139,92,246,.12),transparent 36%),
linear-gradient(145deg,#080a14,#101522) !important;
border:1px solid rgba(255,255,255,.15) !important;
box-shadow:0 28px 84px rgba(0,0,0,.46),0 0 34px rgba(139,92,246,.14) !important;
}
/* CTA */
.ab-cta,
.ab-cta-banner,
.ab-cta-box,
.ab-callout,
.ab-bottom-cta{
background:
radial-gradient(circle at 78% 50%,rgba(56,189,248,.18),transparent 26%),
radial-gradient(circle at 30% 50%,rgba(255,79,179,.16),transparent 30%),
linear-gradient(90deg,#07070a 0%,#17130a 45%,#b99745 100%) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:0 26px 84px rgba(0,0,0,.36) !important;
}
.ab-cta *,
.ab-cta-banner *,
.ab-cta-box *,
.ab-callout *,
.ab-bottom-cta *{
color:#fff !important;
}
/* NEWS */
.ab-news-card{
background:linear-gradient(180deg,#111526 0%,#080a14 100%) !important;
border:1px solid rgba(255,255,255,.14) !important;
overflow:hidden;
}
.ab-news-card *,
.ab-news-card h3,
.ab-news-card h2{
color:#fff !important;
}
.ab-news-card p{
color:rgba(255,255,255,.82) !important;
}
.ab-news-card .ab-news-visual,
.ab-news-card header,
.ab-news-image{
background:
radial-gradient(circle at 74% 24%,rgba(255,255,255,.20),transparent 30%),
radial-gradient(circle at 30% 20%,rgba(255,79,179,.14),transparent 32%),
linear-gradient(135deg,#111 0%,#3d2f16 48%,#c8a04a 100%) !important;
color:#fff !important;
}
.ab-news-card .cat,
.ab-news-card .category,
.ab-category{
color:#9b7430 !important;
background:#fff7dc !important;
border:1px solid rgba(214,173,75,.42) !important;
}
/* FAQ */
.ab-faq-item,
.ab-faq-item details,
.ab-faq-item summary,
.ab-faq-item .faq-question,
.ab-faq-item .faq-answer{
background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055)) !important;
color:#fff !important;
border-color:rgba(255,255,255,.16) !important;
}
.ab-faq-item summary,
.ab-faq-item h3,
.ab-faq-item .faq-question{
color:#fff !important;
}
.ab-faq-item p,
.ab-faq-item .faq-answer,
.ab-faq-item .faq-answer *{
color:rgba(255,255,255,.84) !important;
}
/* フッター */
.ab-footer{
background:
radial-gradient(circle at 20% 20%,rgba(255,79,179,.16),transparent 30%),
radial-gradient(circle at 80% 20%,rgba(56,189,248,.14),transparent 28%),
#02030a !important;
color:#fff !important;
border-top:1px solid rgba(255,255,255,.12) !important;
}
.ab-footer *,
.ab-footer a{
color:#fff !important;
}
/* 商品詳細 */
.ab-single-product-visual{
background:#050711 !important;
border:1px solid rgba(255,255,255,.14) !important;
}
.ab-single-product-visual::before{
display:none !important;
content:none !important;
}
.ab-single-product-info,
.ab-single-product-info *{
color:#fff !important;
}
.ab-single-product-info p{
color:rgba(255,255,255,.84) !important;
}
.ab-single-product-note{
display:none !important;
}
/* フォーム */
input,
textarea,
select{
background:rgba(255,255,255,.10) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.18) !important;
}
input::placeholder,
textarea::placeholder{
color:rgba(255,255,255,.55) !important;
}
input[type="number"]{
background:#fff !important;
color:#111 !important;
}
/* スマホ */
@media (max-width: 920px){
.ab-header{
background:rgba(2,3,10,.96) !important;
}
.ab-header nav,
.ab-nav,
.ab-menu{
background:#050711 !important;
}
}
@media (max-width: 620px){
.ab-container{
width:min(100% - 28px,1180px) !important;
}
.ab-cart-fixed{
right:14px !important;
bottom:14px !important;
}
.ab-news-card,
.ab-product,
.ab-product-card{
border-radius:28px !important;
}
}
/* =========================================================
指定CSS：v38親テーマに統合済み
========================================================= */
@media (max-width: 620px) {
.ab-device-wrap.has-custom-hero-image .ab-float {
display: block !important;
position: absolute;
z-index: 5;
max-width: 160px;
padding: 10px 12px;
border-radius: 18px;
font-size: 12px;
line-height: 1.35;
}
.ab-device-wrap.has-custom-hero-image .ab-float small {
font-size: 10px;
line-height: 1.45;
}
.ab-device-wrap.has-custom-hero-image .ab-float.one {
left: 10px;
top: 34px;
}
.ab-device-wrap.has-custom-hero-image .ab-float.two {
right: 10px;
bottom: 34px;
}
}
.ab-feature-visual.has-image:before {
display: none !important;
}
.ab-feature-visual.has-image .ab-device {
display: none !important;
}
.ab-feature-visual:has(img):before {
display: none !important;
}
.ab-feature-visual:has(img) {
background: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.ab-feature-visual:has(img) img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v2
宇宙感強化 / Gold依存を低減 / 視認性改善
========================================================= */
:root{
--cosmic-gold:#7dd3fc !important;
--cosmic-accent:#38bdf8;
--cosmic-accent2:#ff4fb3;
--cosmic-accent3:#a78bfa;
--cosmic-bright:#ffffff;
--cosmic-readable:#eaf2ff;
--cosmic-card:#080d20;
}
/* 全体をより宇宙寄りに */
body{
background:
radial-gradient(circle at 82% 8%, rgba(56,189,248,.30), transparent 24%),
radial-gradient(circle at 16% 16%, rgba(255,79,179,.25), transparent 28%),
radial-gradient(circle at 54% 38%, rgba(167,139,250,.22), transparent 36%),
radial-gradient(circle at 22% 72%, rgba(103,232,249,.12), transparent 32%),
radial-gradient(circle at 86% 78%, rgba(255,79,179,.12), transparent 30%),
linear-gradient(180deg,#01020a 0%,#050817 42%,#01020a 100%) !important;
}
/* 星空密度を強める */
body::before{
background:
radial-gradient(circle at 8% 10%, rgba(255,255,255,.95) 0 1px, transparent 2px),
radial-gradient(circle at 24% 18%, rgba(255,255,255,.70) 0 1px, transparent 2px),
radial-gradient(circle at 78% 22%, rgba(255,255,255,.68) 0 1px, transparent 2px),
radial-gradient(circle at 48% 12%, rgba(255,255,255,.58) 0 1px, transparent 2px),
radial-gradient(circle at 66% 68%, rgba(255,255,255,.54) 0 1px, transparent 2px),
radial-gradient(circle at 28% 74%, rgba(255,255,255,.62) 0 1px, transparent 2px),
radial-gradient(circle at 92% 44%, rgba(103,232,249,.70) 0 1px, transparent 2px),
radial-gradient(circle at 38% 54%, rgba(255,79,179,.62) 0 1px, transparent 2px),
linear-gradient(90deg, transparent 0 97%, rgba(255,255,255,.025) 98% 100%),
linear-gradient(0deg, transparent 0 97%, rgba(255,255,255,.020) 98% 100%) !important;
background-size:240px 240px,310px 310px,390px 390px,460px 460px,520px 520px,570px 570px,430px 430px,360px 360px,64px 64px,64px 64px !important;
opacity:.82 !important;
}
/* 星雲の色味をより強く */
body::after{
background:
conic-gradient(from 220deg at 62% 30%, transparent 0deg, rgba(255,79,179,.24) 24deg, rgba(56,189,248,.22) 58deg, transparent 105deg),
conic-gradient(from 40deg at 35% 62%, transparent 0deg, rgba(167,139,250,.20) 32deg, rgba(103,232,249,.12) 75deg, transparent 125deg),
radial-gradient(ellipse at 78% 34%, rgba(56,189,248,.18), transparent 40%),
radial-gradient(ellipse at 28% 30%, rgba(255,79,179,.15), transparent 42%) !important;
filter:blur(42px) !important;
opacity:.90 !important;
}
/* Gold部分を青紫ネオンへ寄せる */
.ab-kicker,
.ab-section .ab-kicker,
.ab-brand .tagline,
.ab-site-tagline,
.ab-logo-sub,
.site-description,
.price,
.ab-product .price,
.ab-product-price{
color:var(--cosmic-accent) !important;
text-shadow:0 0 18px rgba(56,189,248,.42) !important;
}
/* TOP白ラベルはGoldではなく濃紺＋シアン文字に */
.ab-pill,
.ab-badge,
.ab-tag,
.ab-hero .ab-tag,
.ab-hero .ab-pill,
.ab-hero .ab-badge{
background:linear-gradient(135deg,rgba(8,13,32,.94),rgba(18,25,48,.90)) !important;
color:#eafaff !important;
border:1px solid rgba(103,232,249,.34) !important;
box-shadow:0 12px 32px rgba(0,0,0,.30),0 0 28px rgba(56,189,248,.18) !important;
}
.ab-pill *,
.ab-badge *,
.ab-tag *{
color:#eafaff !important;
}
/* 吹き出しも宇宙グラス系に変更 */
.ab-float,
.ab-floating-note,
.ab-hero-note,
.ab-hero-bubble,
.ab-hero-card{
background:linear-gradient(135deg,rgba(8,13,32,.96),rgba(20,15,46,.92)) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.20) !important;
box-shadow:0 18px 42px rgba(0,0,0,.32),0 0 24px rgba(255,79,179,.16),0 0 22px rgba(56,189,248,.12) !important;
}
.ab-float *,
.ab-floating-note *,
.ab-hero-note *,
.ab-hero-bubble *,
.ab-hero-card *{
color:#fff !important;
}
.ab-float small,
.ab-floating-note small{
color:rgba(255,255,255,.78) !important;
}
/* ヒーローをさらに宇宙感強め */
.ab-hero{
background:
radial-gradient(circle at 78% 30%, rgba(56,189,248,.34), transparent 28%),
radial-gradient(circle at 26% 36%, rgba(255,79,179,.28), transparent 36%),
radial-gradient(circle at 54% 56%, rgba(167,139,250,.22), transparent 42%),
linear-gradient(135deg,#01020a 0%,#071026 58%,#03040a 100%) !important;
}
.ab-hero::before{
background:
radial-gradient(circle at 20% 22%, rgba(255,255,255,.20) 0 1px, transparent 2px),
radial-gradient(circle at 70% 26%, rgba(255,255,255,.14) 0 1px, transparent 2px),
radial-gradient(circle at 86% 52%, rgba(255,255,255,.16) 0 1px, transparent 2px),
linear-gradient(105deg, transparent 8%, rgba(255,79,179,.25), rgba(56,189,248,.22), transparent 72%) !important;
opacity:1 !important;
}
.ab-hero::after{
background:linear-gradient(90deg,transparent,rgba(255,79,179,.66),rgba(56,189,248,.56),rgba(167,139,250,.40),transparent) !important;
opacity:.72 !important;
}
/* 商品カード・NEWS・FAQをより読みやすく */
.ab-card,
.ab-product,
.ab-product-card,
.ab-scene,
.ab-feature,
.ab-step,
.ab-faq-item,
.ab-news-card,
.ab-ambassador-card{
background:
radial-gradient(circle at 80% 12%, rgba(56,189,248,.08), transparent 28%),
radial-gradient(circle at 10% 20%, rgba(255,79,179,.07), transparent 30%),
linear-gradient(180deg,rgba(10,14,31,.94),rgba(5,8,20,.96)) !important;
border:1px solid rgba(103,232,249,.16) !important;
box-shadow:0 28px 90px rgba(0,0,0,.50),0 0 28px rgba(56,189,248,.06) !important;
}
.ab-card *,
.ab-product *,
.ab-product-card *,
.ab-scene *,
.ab-feature *,
.ab-step *,
.ab-faq-item *,
.ab-news-card *,
.ab-ambassador-card *{
color:#fff !important;
}
.ab-card p,
.ab-product p,
.ab-product-card p,
.ab-scene p,
.ab-feature p,
.ab-step p,
.ab-faq-item p,
.ab-news-card p,
.ab-ambassador-card p{
color:rgba(234,242,255,.82) !important;
}
/* 商品画像枠も宇宙風グロー */
.ab-product-visual,
.ab-product-image{
background:
radial-gradient(circle at 50% 18%,rgba(255,255,255,.92),rgba(255,255,255,.28) 28%,rgba(56,189,248,.20) 52%,rgba(255,79,179,.14) 78%,rgba(7,10,24,.80) 100%) !important;
}
/* PRODUCT DESIGNは画像が入っていない時だけ宇宙背景 */
.ab-feature-visual:not(:has(img)){
background:
radial-gradient(circle at 30% 20%,rgba(255,79,179,.24),transparent 30%),
radial-gradient(circle at 78% 35%,rgba(56,189,248,.24),transparent 32%),
radial-gradient(circle at 52% 65%,rgba(167,139,250,.18),transparent 36%),
linear-gradient(145deg,#050817,#101833) !important;
}
/* NEWSのGold帯をネオンに変更 */
.ab-news-card .ab-news-visual,
.ab-news-card header,
.ab-news-image{
background:
radial-gradient(circle at 74% 24%,rgba(255,255,255,.20),transparent 30%),
radial-gradient(circle at 30% 20%,rgba(255,79,179,.22),transparent 32%),
linear-gradient(135deg,#050817 0%,#172554 48%,#0ea5e9 100%) !important;
color:#fff !important;
}
.ab-news-card .cat,
.ab-news-card .category,
.ab-category{
color:#06111f !important;
background:#bff4ff !important;
border:1px solid rgba(103,232,249,.65) !important;
}
/* CTAのGold基調を宇宙ネオンに */
.ab-cta,
.ab-cta-banner,
.ab-cta-box,
.ab-callout,
.ab-bottom-cta{
background:
radial-gradient(circle at 78% 50%,rgba(56,189,248,.24),transparent 26%),
radial-gradient(circle at 30% 50%,rgba(255,79,179,.22),transparent 30%),
linear-gradient(90deg,#050817 0%,#20104a 45%,#075985 100%) !important;
color:#fff !important;
border:1px solid rgba(103,232,249,.20) !important;
}
/* フッターも星雲 */
.ab-footer{
background:
radial-gradient(circle at 18% 18%,rgba(255,79,179,.20),transparent 30%),
radial-gradient(circle at 82% 24%,rgba(56,189,248,.18),transparent 28%),
radial-gradient(circle at 50% 70%,rgba(167,139,250,.10),transparent 34%),
#01020a !important;
}
/* 入力フォーム・カート周りの見えない文字対策 */
input,
textarea,
select{
background:rgba(255,255,255,.12) !important;
color:#fff !important;
border:1px solid rgba(103,232,249,.22) !important;
}
input[type="number"],
.ab-product input[type="number"]{
background:#fff !important;
color:#111 !important;
}
.ab-product button,
.ab-product input[type="submit"],
.ab-product .ab-btn{
color:#fff !important;
}
/* 強制的な黒文字残り対策 */
.ab-section [style*="color:#111"],
.ab-section [style*="color: #111"],
.ab-section [style*="color:#000"],
.ab-section [style*="color: #000"],
.ab-section [style*="color: rgb(0"],
.ab-section [style*="color:rgb(0"]{
color:#fff !important;
}
/* スマホ */
@media (max-width: 620px){
.ab-hero::after{
opacity:.46 !important;
}
.ab-float{
background:linear-gradient(135deg,rgba(8,13,32,.96),rgba(20,15,46,.92)) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v3
NEWSタブ色・カテゴリ種別色を宇宙ネオン系へ変更
========================================================= */
/* NEWSカード上部タブ/サムネイル部分：Goldから宇宙ネオンへ */
.ab-news-card .ab-news-visual,
.ab-news-card header,
.ab-news-image,
.ab-news-card .news-thumb,
.ab-news-card .post-thumb,
.ab-news-card .entry-thumb {
background:
radial-gradient(circle at 72% 22%, rgba(103,232,249,.28), transparent 30%),
radial-gradient(circle at 24% 24%, rgba(255,79,179,.26), transparent 34%),
radial-gradient(circle at 50% 82%, rgba(167,139,250,.20), transparent 38%),
linear-gradient(135deg,#050817 0%,#111a3a 46%,#0f2f66 100%) !important;
color:#ffffff !important;
border-bottom:1px solid rgba(103,232,249,.18) !important;
box-shadow: inset 0 0 42px rgba(56,189,248,.10), inset 0 0 54px rgba(255,79,179,.08) !important;
}
/* NEWS文字も少しネオン感 */
.ab-news-card .ab-news-visual *,
.ab-news-card header *,
.ab-news-image *,
.ab-news-card .news-thumb *,
.ab-news-card .post-thumb *,
.ab-news-card .entry-thumb * {
color:#ffffff !important;
text-shadow:0 0 16px rgba(103,232,249,.28) !important;
}
/* NEWSという固定ラベルがある場合 */
.ab-news-card .ab-news-visual::before,
.ab-news-card header::before,
.ab-news-image::before {
color:#ffffff !important;
text-shadow:0 0 18px rgba(103,232,249,.35),0 0 22px rgba(255,79,179,.24) !important;
}
/* カテゴリ/種別ラベル：白金からネオンピルへ */
.ab-news-card .cat,
.ab-news-card .category,
.ab-category,
.ab-news-category,
.post-category,
.entry-category,
.cat-links a,
.ab-news-card .tag,
.ab-news-card .label {
background:
linear-gradient(135deg, rgba(255,79,179,.95) 0%, rgba(139,92,246,.95) 52%, rgba(56,189,248,.95) 100%) !important;
color:#ffffff !important;
border:1px solid rgba(255,255,255,.30) !important;
box-shadow:0 10px 28px rgba(139,92,246,.28),0 0 18px rgba(56,189,248,.18) !important;
text-shadow:none !important;
}
/* カテゴリ内テキストの強制白 */
.ab-news-card .cat *,
.ab-news-card .category *,
.ab-category *,
.ab-news-category *,
.post-category *,
.entry-category *,
.cat-links a *,
.ab-news-card .tag *,
.ab-news-card .label * {
color:#ffffff !important;
}
/* カテゴリがボタン/リンクの場合のホバー */
.ab-news-card .cat:hover,
.ab-news-card .category:hover,
.ab-category:hover,
.ab-news-category:hover,
.post-category:hover,
.entry-category:hover,
.cat-links a:hover {
filter:brightness(1.12);
transform:translateY(-1px);
}
/* 日付も視認性UP */
.ab-news-card time,
.ab-news-card .date,
.ab-news-date,
.entry-date,
.post-date {
color:#eafaff !important;
text-shadow:0 0 14px rgba(56,189,248,.26) !important;
}
/* NEWSカード枠を宇宙感強めに */
.ab-news-card {
background:
radial-gradient(circle at 80% 10%, rgba(56,189,248,.10), transparent 32%),
radial-gradient(circle at 10% 18%, rgba(255,79,179,.09), transparent 34%),
linear-gradient(180deg,#0c1125 0%,#050817 100%) !important;
border:1px solid rgba(103,232,249,.18) !important;
box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 28px rgba(56,189,248,.08) !important;
}
/* タブ色がインラインや別クラスで残る場合の広め救済 */
[class*="news"] [class*="visual"],
[class*="news"] [class*="thumb"] {
border-color:rgba(103,232,249,.18) !important;
}
/* Gold系背景がNEWS内部に残る場合 */
.ab-news-card [style*="background"] {
color:#fff !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v4
NEWSタブ色と種別バッジ色の直接修正版
========================================================= */
/* NEWSカード上部タブ背景（実クラス .ab-news-thumb を直接変更） */
.ab-news-thumb,
.ab-news-card .ab-news-thumb,
.ab-news-card > .ab-news-thumb {
background:
radial-gradient(circle at 18% 18%, rgba(255, 76, 172, .32), transparent 28%),
radial-gradient(circle at 82% 24%, rgba(94, 234, 255, .24), transparent 28%),
radial-gradient(circle at 55% 80%, rgba(157, 78, 221, .18), transparent 34%),
linear-gradient(135deg, #060816 0%, #1a1236 42%, #0a2f55 100%) !important;
color: #ffffff !important;
border-bottom: 1px solid rgba(94, 234, 255, .24) !important;
box-shadow: inset 0 0 50px rgba(71, 180, 255, .10), inset 0 0 65px rgba(255, 76, 172, .10) !important;
}
.ab-news-thumb span,
.ab-news-card .ab-news-thumb span,
.ab-news-card .ab-news-thumb * {
color: #ffffff !important;
text-shadow: 0 0 18px rgba(94,234,255,.28), 0 0 18px rgba(255,76,172,.18) !important;
}
/* 種別バッジ（実クラス .ab-cat-badge を直接変更） */
.ab-cat-badge,
.ab-news-card .ab-cat-badge,
.ab-news-body .ab-cat-badge,
.ab-cat-badges a.ab-cat-badge {
background: linear-gradient(135deg, #ff4cac 0%, #8b5cf6 55%, #38bdf8 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.34) !important;
box-shadow: 0 10px 24px rgba(139,92,246,.28), 0 0 18px rgba(56,189,248,.20) !important;
text-shadow: none !important;
}
.ab-cat-badge:hover,
.ab-news-card .ab-cat-badge:hover,
.ab-cat-badges a.ab-cat-badge:hover {
filter: brightness(1.10);
color:#ffffff !important;
transform: translateY(-1px);
}
/* バッジ内テキスト強制白 */
.ab-cat-badge *,
.ab-news-card .ab-cat-badge * {
color:#ffffff !important;
}
/* 日付色もタブ色に合わせて微調整 */
.ab-news-body time,
.ab-news-card .ab-news-body time {
color: #dff7ff !important;
text-shadow: 0 0 12px rgba(56,189,248,.18);
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v5
視認性改善・宇宙感強化・Gold残り除去
========================================================= */
/* -----------------------------------------
1. TOP小ラベルを見やすい濃紺ネオンに変更
----------------------------------------- */
.ab-pill,
.ab-badge,
.ab-tag,
.ab-hero .ab-tag,
.ab-hero .ab-pill,
.ab-hero .ab-badge {
background:
radial-gradient(circle at 8% 50%, rgba(255,190,76,.85) 0 8px, transparent 9px),
linear-gradient(135deg, rgba(5,9,26,.96) 0%, rgba(14,19,46,.96) 56%, rgba(10,30,58,.94) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.52) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.06) inset,
0 12px 32px rgba(0,0,0,.34),
0 0 24px rgba(56,189,248,.22),
0 0 28px rgba(255,79,179,.12) !important;
text-shadow: 0 0 12px rgba(255,255,255,.22) !important;
}
.ab-pill *,
.ab-badge *,
.ab-tag *,
.ab-hero .ab-tag *,
.ab-hero .ab-pill *,
.ab-hero .ab-badge * {
color: #ffffff !important;
}
/* 小ラベル内の丸アイコンが別要素の場合 */
.ab-pill::before,
.ab-badge::before,
.ab-tag::before {
background: #f7b94a !important;
box-shadow: 0 0 16px rgba(247,185,74,.75) !important;
}
/* -----------------------------------------
2. ヒーロー背景を少し暗くして文字視認性UP
----------------------------------------- */
.ab-hero {
background:
radial-gradient(circle at 76% 28%, rgba(56,189,248,.28), transparent 28%),
radial-gradient(circle at 30% 36%, rgba(255,79,179,.24), transparent 36%),
radial-gradient(circle at 54% 58%, rgba(167,139,250,.18), transparent 42%),
linear-gradient(135deg,#01020a 0%,#071026 56%,#02030a 100%) !important;
}
.ab-hero::before {
background:
radial-gradient(circle at 18% 24%, rgba(255,255,255,.16) 0 1px, transparent 2px),
radial-gradient(circle at 72% 24%, rgba(255,255,255,.14) 0 1px, transparent 2px),
radial-gradient(circle at 86% 54%, rgba(255,255,255,.14) 0 1px, transparent 2px),
linear-gradient(105deg, rgba(0,0,0,.18) 0%, rgba(255,79,179,.18) 30%, rgba(56,189,248,.16) 58%, rgba(0,0,0,.10) 100%) !important;
}
.ab-hero h1 {
color: #ffffff !important;
text-shadow:
0 4px 18px rgba(0,0,0,.45),
0 0 32px rgba(255,79,179,.22),
0 0 42px rgba(56,189,248,.12) !important;
}
.ab-hero p {
color: rgba(255,255,255,.90) !important;
text-shadow: 0 3px 12px rgba(0,0,0,.35) !important;
}
/* -----------------------------------------
3. Aroma / Easy Charge 吹き出し視認性UP
----------------------------------------- */
.ab-float,
.ab-floating-note,
.ab-hero-note,
.ab-hero-bubble,
.ab-hero-card {
background:
linear-gradient(135deg, rgba(4,8,25,.96) 0%, rgba(18,18,50,.94) 60%, rgba(10,31,58,.92) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.30) !important;
box-shadow:
0 18px 42px rgba(0,0,0,.38),
0 0 24px rgba(56,189,248,.16),
0 0 20px rgba(255,79,179,.12) !important;
}
.ab-float *,
.ab-floating-note *,
.ab-hero-note *,
.ab-hero-bubble *,
.ab-hero-card * {
color: #ffffff !important;
}
.ab-float small,
.ab-floating-note small,
.ab-hero-note small,
.ab-hero-bubble small,
.ab-hero-card small {
color: rgba(255,255,255,.82) !important;
}
/* -----------------------------------------
4. NEWSタブ色を完全にGoldから変更
----------------------------------------- */
.ab-news-thumb,
.ab-news-card .ab-news-thumb,
.ab-news-card > .ab-news-thumb {
background:
radial-gradient(circle at 18% 18%, rgba(255, 76, 172, .34), transparent 28%),
radial-gradient(circle at 82% 24%, rgba(94, 234, 255, .30), transparent 28%),
radial-gradient(circle at 55% 82%, rgba(157, 78, 221, .22), transparent 34%),
linear-gradient(135deg, #050817 0%, #15143a 46%, #082f5f 100%) !important;
color: #ffffff !important;
border-bottom: 1px solid rgba(94, 234, 255, .26) !important;
box-shadow:
inset 0 0 55px rgba(71, 180, 255, .13),
inset 0 0 70px rgba(255, 76, 172, .12),
0 0 22px rgba(56,189,248,.08) !important;
}
.ab-news-thumb span,
.ab-news-card .ab-news-thumb span,
.ab-news-card .ab-news-thumb * {
color: #ffffff !important;
text-shadow: 0 0 18px rgba(94,234,255,.30), 0 0 18px rgba(255,76,172,.20) !important;
}
/* NEWS文字がspanではなく直接の場合も */
.ab-news-thumb {
text-shadow: 0 0 18px rgba(94,234,255,.30), 0 0 18px rgba(255,76,172,.20) !important;
}
/* -----------------------------------------
5. 種別/カテゴリバッジを濃色ネオンに変更
----------------------------------------- */
.ab-cat-badge,
.ab-news-card .ab-cat-badge,
.ab-news-body .ab-cat-badge,
.ab-cat-badges a.ab-cat-badge,
.ab-news-card .cat,
.ab-news-card .category,
.ab-category,
.ab-news-category,
.post-category,
.entry-category,
.cat-links a {
background:
linear-gradient(135deg, rgba(255,76,172,.96) 0%, rgba(139,92,246,.96) 54%, rgba(56,189,248,.96) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.34) !important;
box-shadow:
0 10px 24px rgba(139,92,246,.28),
0 0 18px rgba(56,189,248,.22),
0 0 14px rgba(255,76,172,.16) !important;
text-shadow: none !important;
}
.ab-cat-badge *,
.ab-news-card .ab-cat-badge *,
.ab-news-card .cat *,
.ab-news-card .category *,
.ab-category *,
.ab-news-category *,
.post-category *,
.entry-category *,
.cat-links a * {
color: #ffffff !important;
}
.ab-cat-badge:hover,
.ab-news-card .ab-cat-badge:hover,
.ab-cat-badges a.ab-cat-badge:hover,
.ab-news-card .cat:hover,
.ab-news-card .category:hover,
.ab-category:hover {
filter: brightness(1.12);
color:#ffffff !important;
transform: translateY(-1px);
}
/* 日付も白系に */
.ab-news-body time,
.ab-news-card .ab-news-body time,
.ab-news-card time,
.ab-news-card .date,
.ab-news-date,
.entry-date,
.post-date {
color: #eafaff !important;
text-shadow: 0 0 12px rgba(56,189,248,.22) !important;
}
/* -----------------------------------------
6. Gold系CTA/帯の残りを宇宙ネオンに
----------------------------------------- */
.ab-cta,
.ab-cta-banner,
.ab-cta-box,
.ab-callout,
.ab-bottom-cta {
background:
radial-gradient(circle at 78% 50%, rgba(56,189,248,.26), transparent 26%),
radial-gradient(circle at 28% 50%, rgba(255,79,179,.24), transparent 30%),
radial-gradient(circle at 50% 100%, rgba(167,139,250,.20), transparent 36%),
linear-gradient(90deg,#050817 0%,#20104a 45%,#075985 100%) !important;
color:#fff !important;
border:1px solid rgba(103,232,249,.22) !important;
box-shadow: 0 26px 84px rgba(0,0,0,.42), 0 0 28px rgba(56,189,248,.10) !important;
}
.ab-cta *,
.ab-cta-banner *,
.ab-cta-box *,
.ab-callout *,
.ab-bottom-cta * {
color:#fff !important;
}
/* -----------------------------------------
7. カード類の文字が消えないよう最終補正
----------------------------------------- */
.ab-card,
.ab-product,
.ab-product-card,
.ab-scene,
.ab-feature,
.ab-step,
.ab-faq-item,
.ab-news-card,
.ab-ambassador-card {
background:
radial-gradient(circle at 82% 12%, rgba(56,189,248,.10), transparent 32%),
radial-gradient(circle at 10% 18%, rgba(255,79,179,.09), transparent 34%),
linear-gradient(180deg, rgba(10,14,31,.96), rgba(5,8,20,.98)) !important;
border: 1px solid rgba(103,232,249,.18) !important;
}
.ab-card *,
.ab-product *,
.ab-product-card *,
.ab-scene *,
.ab-feature *,
.ab-step *,
.ab-faq-item *,
.ab-news-card *,
.ab-ambassador-card * {
color:#ffffff !important;
}
.ab-card p,
.ab-product p,
.ab-product-card p,
.ab-scene p,
.ab-feature p,
.ab-step p,
.ab-faq-item p,
.ab-news-card p,
.ab-ambassador-card p {
color: rgba(234,242,255,.84) !important;
}
/* -----------------------------------------
8. 旧Gold色の残りをシアン系に置換
----------------------------------------- */
[style*="#c6a45d"],
[style*="#c8a04a"],
[style*="#d6ad4b"],
[style*="#9b7b36"],
[style*="#8a6d31"] {
color: #eafaff !important;
}
/* 価格だけはややシアンゴールド */
.price,
.ab-product .price,
.ab-product-price {
color: #7dd3fc !important;
text-shadow: 0 0 14px rgba(125,211,252,.26) !important;
}
/* -----------------------------------------
9. スマホ用
----------------------------------------- */
@media (max-width: 620px) {
.ab-pill,
.ab-badge,
.ab-tag,
.ab-hero .ab-tag,
.ab-hero .ab-pill,
.ab-hero .ab-badge {
padding-left: 42px !important;
}
.ab-float,
.ab-floating-note,
.ab-hero-note,
.ab-hero-bubble,
.ab-hero-card {
background: linear-gradient(135deg, rgba(4,8,25,.96), rgba(18,18,50,.94)) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v6
特徴セクション番号部分をHTML構造側に合わせて強制修正
========================================================= */
/* v38/v5系の特徴カード実クラス対策 */
.ab-feature-list,
.ab-features-list,
.ab-point-list,
.ab-benefit-list,
.ab-feature-points {
position: relative;
}
/* 特徴カード本体を横並びカードとして安定化 */
.ab-feature-list > *,
.ab-features-list > *,
.ab-point-list > *,
.ab-benefit-list > *,
.ab-feature-points > *,
.ab-feature-card,
.ab-feature-item,
.ab-point-card,
.ab-benefit-card {
position: relative !important;
overflow: hidden !important;
background:
radial-gradient(circle at 82% 12%, rgba(56,189,248,.12), transparent 32%),
radial-gradient(circle at 8% 18%, rgba(255,79,179,.10), transparent 34%),
linear-gradient(180deg, rgba(8,13,31,.98), rgba(3,7,18,.98)) !important;
border: 1px solid rgba(103,232,249,.20) !important;
box-shadow: 0 26px 80px rgba(0,0,0,.48), 0 0 28px rgba(56,189,248,.08) !important;
}
/* 左の暗い帯を無効化 */
.ab-feature-list > *::before,
.ab-features-list > *::before,
.ab-point-list > *::before,
.ab-benefit-list > *::before,
.ab-feature-points > *::before,
.ab-feature-card::before,
.ab-feature-item::before,
.ab-point-card::before,
.ab-benefit-card::before {
display: none !important;
content: none !important;
}
/* 番号丸：考えられる全クラスに対応 */
.ab-feature-list > * > :first-child,
.ab-features-list > * > :first-child,
.ab-point-list > * > :first-child,
.ab-benefit-list > * > :first-child,
.ab-feature-points > * > :first-child,
.ab-feature-card > :first-child,
.ab-feature-item > :first-child,
.ab-point-card > :first-child,
.ab-benefit-card > :first-child,
.ab-step-num,
.ab-step-number,
.ab-feature-num,
.ab-feature-number,
.ab-feature-index,
.ab-feature-no,
.ab-num,
.ab-number,
.ab-index,
.ab-no {
background: linear-gradient(135deg, #ff4fac 0%, #8b5cf6 52%, #38bdf8 100%) !important;
color: #ffffff !important;
border: 2px solid rgba(255,255,255,.26) !important;
box-shadow:
0 12px 26px rgba(0,0,0,.38),
0 0 20px rgba(139,92,246,.34),
0 0 18px rgba(56,189,248,.22) !important;
text-shadow: none !important;
}
/* ただし first-child が本文ラッパーの場合でも中の番号だけ補正 */
.ab-feature-list > * > :first-child span:first-child,
.ab-features-list > * > :first-child span:first-child,
.ab-point-list > * > :first-child span:first-child,
.ab-benefit-list > * > :first-child span:first-child,
.ab-feature-points > * > :first-child span:first-child,
.ab-feature-card > :first-child span:first-child,
.ab-feature-item > :first-child span:first-child,
.ab-point-card > :first-child span:first-child,
.ab-benefit-card > :first-child span:first-child {
color:#ffffff !important;
}
/* 番号内の文字 */
.ab-step-num *,
.ab-step-number *,
.ab-feature-num *,
.ab-feature-number *,
.ab-feature-index *,
.ab-feature-no *,
.ab-num *,
.ab-number *,
.ab-index *,
.ab-no * {
color: #ffffff !important;
opacity: 1 !important;
}
/* カード内の見出し・説明 */
.ab-feature-list h3,
.ab-features-list h3,
.ab-point-list h3,
.ab-benefit-list h3,
.ab-feature-points h3,
.ab-feature-card h3,
.ab-feature-item h3,
.ab-point-card h3,
.ab-benefit-card h3 {
color: #ffffff !important;
text-shadow: 0 2px 12px rgba(0,0,0,.28), 0 0 16px rgba(56,189,248,.08) !important;
}
.ab-feature-list p,
.ab-features-list p,
.ab-point-list p,
.ab-benefit-list p,
.ab-feature-points p,
.ab-feature-card p,
.ab-feature-item p,
.ab-point-card p,
.ab-benefit-card p {
color: rgba(234,242,255,.86) !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-step-num,
.ab-step-number,
.ab-feature-num,
.ab-feature-number,
.ab-feature-index,
.ab-feature-no,
.ab-num,
.ab-number,
.ab-index,
.ab-no {
width: 62px !important;
height: 62px !important;
min-width: 62px !important;
font-size: 24px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v7
TOP左上メインラベルをHTML構造に合わせて直接修正
========================================================= */
/* まず専用クラスを最優先で強制変更 */
.ab-hero-main-pill,
.ab-hero .ab-hero-main-pill {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
width: auto !important;
max-width: none !important;
padding: 14px 26px 14px 42px !important;
border-radius: 999px !important;
background:
radial-gradient(circle at 20px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, rgba(4,8,24,.98) 0%, rgba(13,22,50,.98) 54%, rgba(7,43,74,.96) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.58) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.07) inset,
0 10px 28px rgba(0,0,0,.38),
0 0 24px rgba(56,189,248,.25),
0 0 26px rgba(255,79,179,.13) !important;
text-shadow: 0 0 10px rgba(255,255,255,.26) !important;
opacity: 1 !important;
}
.ab-hero-main-pill *,
.ab-hero .ab-hero-main-pill * {
color:#ffffff !important;
opacity:1 !important;
}
/* v38の元クラスに直接対応：対象を広めに上書き */
.ab-hero .ab-copy > .ab-pill:first-child,
.ab-hero .ab-copy > .ab-badge:first-child,
.ab-hero .ab-copy > .ab-tag:first-child,
.ab-hero .ab-hero-copy > .ab-pill:first-child,
.ab-hero .ab-hero-copy > .ab-badge:first-child,
.ab-hero .ab-hero-copy > .ab-tag:first-child,
.ab-hero .ab-hero-text > .ab-pill:first-child,
.ab-hero .ab-hero-text > .ab-badge:first-child,
.ab-hero .ab-hero-text > .ab-tag:first-child,
.ab-hero .ab-content > .ab-pill:first-child,
.ab-hero .ab-content > .ab-badge:first-child,
.ab-hero .ab-content > .ab-tag:first-child,
.ab-hero .ab-container .ab-pill:first-of-type,
.ab-hero .ab-container .ab-badge:first-of-type,
.ab-hero .ab-container .ab-tag:first-of-type {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
max-width: none !important;
padding: 14px 26px 14px 42px !important;
border-radius: 999px !important;
background:
radial-gradient(circle at 20px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, rgba(4,8,24,.98) 0%, rgba(13,22,50,.98) 54%, rgba(7,43,74,.96) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.58) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.07) inset,
0 10px 28px rgba(0,0,0,.38),
0 0 24px rgba(56,189,248,.25),
0 0 26px rgba(255,79,179,.13) !important;
text-shadow: 0 0 10px rgba(255,255,255,.26) !important;
opacity: 1 !important;
}
.ab-hero .ab-copy > .ab-pill:first-child *,
.ab-hero .ab-copy > .ab-badge:first-child *,
.ab-hero .ab-copy > .ab-tag:first-child *,
.ab-hero .ab-hero-copy > .ab-pill:first-child *,
.ab-hero .ab-hero-copy > .ab-badge:first-child *,
.ab-hero .ab-hero-copy > .ab-tag:first-child *,
.ab-hero .ab-hero-text > .ab-pill:first-child *,
.ab-hero .ab-hero-text > .ab-badge:first-child *,
.ab-hero .ab-hero-text > .ab-tag:first-child *,
.ab-hero .ab-content > .ab-pill:first-child *,
.ab-hero .ab-content > .ab-badge:first-child *,
.ab-hero .ab-content > .ab-tag:first-child *,
.ab-hero .ab-container .ab-pill:first-of-type *,
.ab-hero .ab-container .ab-badge:first-of-type *,
.ab-hero .ab-container .ab-tag:first-of-type * {
color:#ffffff !important;
opacity:1 !important;
}
/* 擬似要素の金丸が残る場合は非表示化。背景側の丸に置き換え済み */
.ab-hero-main-pill::before,
.ab-hero .ab-hero-main-pill::before,
.ab-hero .ab-container .ab-pill:first-of-type::before,
.ab-hero .ab-container .ab-badge:first-of-type::before,
.ab-hero .ab-container .ab-tag:first-of-type::before {
display:none !important;
content:none !important;
}
/* カスタマイザー編集用の青い鉛筆アイコンが近い時も文字に被らないよう調整 */
.ab-hero .customize-partial-edit-shortcut {
z-index: 20 !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-hero-main-pill,
.ab-hero .ab-hero-main-pill,
.ab-hero .ab-container .ab-pill:first-of-type,
.ab-hero .ab-container .ab-badge:first-of-type,
.ab-hero .ab-container .ab-tag:first-of-type {
padding: 11px 18px 11px 38px !important;
font-size: 13px !important;
line-height: 1.4 !important;
background:
radial-gradient(circle at 18px 50%, #f7b94a 0 5px, transparent 6px),
linear-gradient(135deg, rgba(4,8,24,.98) 0%, rgba(13,22,50,.98) 54%, rgba(7,43,74,.96) 100%) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v9
v8で発生した崩れの復旧版
- JS強制変更を廃止
- ヒーロー全体への広すぎる指定を廃止
- TOP左上ラベルだけを安全に変更
========================================================= */
/* ヒーローレイアウト復旧 */
.ab-hero,
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-copy,
.ab-hero-text,
.ab-copy,
.ab-content {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
.ab-hero h1,
.ab-hero p,
.ab-hero .ab-btn,
.ab-hero .ab-btns,
.ab-hero .ab-actions {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
}
/* カラム崩れ復旧 */
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr) !important;
align-items: center !important;
gap: clamp(32px, 5vw, 80px) !important;
}
@media (max-width: 920px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
}
/* TOP左上のラベルだけ安全に変更 */
.ab-hero-main-pill,
.ab-hero .ab-hero-main-pill {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
width: auto !important;
max-width: 100% !important;
padding: 13px 26px 13px 44px !important;
line-height: 1.35 !important;
white-space: nowrap !important;
border-radius: 999px !important;
background:
radial-gradient(circle at 21px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, rgba(4,8,24,.98) 0%, rgba(13,22,50,.98) 54%, rgba(7,43,74,.96) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.58) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.07) inset,
0 10px 28px rgba(0,0,0,.38),
0 0 24px rgba(56,189,248,.25),
0 0 26px rgba(255,79,179,.13) !important;
text-shadow: 0 0 10px rgba(255,255,255,.28) !important;
opacity: 1 !important;
}
.ab-hero-main-pill *,
.ab-hero .ab-hero-main-pill * {
color:#ffffff !important;
opacity:1 !important;
}
/* 元の丸アイコンが残る場合は非表示。背景側で再現済み */
.ab-hero-main-pill::before,
.ab-hero-main-pill::after,
.ab-hero .ab-hero-main-pill::before,
.ab-hero .ab-hero-main-pill::after {
display:none !important;
content:none !important;
}
/* TOPラベルが専用クラス未付与でも最低限文字色だけ改善 */
.ab-hero .ab-pill,
.ab-hero .ab-badge,
.ab-hero .ab-tag,
.ab-hero .ab-hero-badge,
.ab-hero .ab-hero-kicker,
.ab-hero .ab-eyebrow {
color:#ffffff !important;
}
.ab-hero .ab-pill *,
.ab-hero .ab-badge *,
.ab-hero .ab-tag *,
.ab-hero .ab-hero-badge *,
.ab-hero .ab-hero-kicker *,
.ab-hero .ab-eyebrow * {
color:#ffffff !important;
}
/* 小さいラベルだけに濃色背景を適用。ヒーロー全体には絶対に当てない */
.ab-hero .ab-pill:not(.ab-float),
.ab-hero .ab-badge:not(.ab-float),
.ab-hero .ab-tag:not(.ab-float),
.ab-hero .ab-hero-badge,
.ab-hero .ab-hero-kicker,
.ab-hero .ab-eyebrow {
background:
radial-gradient(circle at 21px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, rgba(4,8,24,.98) 0%, rgba(13,22,50,.98) 54%, rgba(7,43,74,.96) 100%) !important;
border: 1px solid rgba(103,232,249,.50) !important;
}
/* ヒーロー説明文・ボタン復旧 */
.ab-hero .ab-btn,
.ab-hero .ab-btns a,
.ab-hero .ab-actions a {
writing-mode: horizontal-tb !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-hero-main-pill,
.ab-hero .ab-hero-main-pill {
white-space: normal !important;
padding: 11px 18px 11px 40px !important;
font-size: 13px !important;
background:
radial-gradient(circle at 19px 50%, #f7b94a 0 5px, transparent 6px),
linear-gradient(135deg, rgba(4,8,24,.98) 0%, rgba(13,22,50,.98) 54%, rgba(7,43,74,.96) 100%) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v10
TOP左上ラベル：原因対策版
WordPressカスタマイザーの「追加CSS/テーマ側CSSの順序」で負けないよう、
head末尾に専用CSSも出力します。
========================================================= */
/* レイアウト保護 */
.ab-hero,
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-copy,
.ab-hero-text,
.ab-copy,
.ab-content {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
word-break: normal !important;
}
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr) !important;
align-items: center !important;
gap: clamp(32px, 5vw, 80px) !important;
}
@media (max-width: 920px) {
.ab-hero-grid { grid-template-columns: 1fr !important; }
}
/* 専用クラス */
.ab-hero-main-pill {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
max-width: 100% !important;
padding: 13px 26px 13px 44px !important;
border-radius: 999px !important;
white-space: nowrap !important;
line-height: 1.35 !important;
background:
radial-gradient(circle at 21px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, #040818 0%, #0d1632 54%, #072b4a 100%) !important;
color: #fff !important;
border: 1px solid rgba(103,232,249,.62) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 10px 28px rgba(0,0,0,.38),
0 0 24px rgba(56,189,248,.25),
0 0 26px rgba(255,79,179,.13) !important;
text-shadow: 0 0 10px rgba(255,255,255,.28) !important;
opacity: 1 !important;
}
.ab-hero-main-pill *,
.ab-hero .ab-hero-main-pill * {
color:#fff !important;
opacity:1 !important;
}
.ab-hero-main-pill::before,
.ab-hero-main-pill::after {
display:none !important;
content:none !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v11
大きな楕円ライン削除 / 白丸・白背景ラベルの視認性改善
========================================================= */
/* TOPヒーローの大きな楕円ラインを削除 */
.ab-hero::before,
.ab-hero::after,
.ab-hero-grid::before,
.ab-hero-grid::after,
.ab-hero .ab-container::before,
.ab-hero .ab-container::after,
.ab-hero-visual::before,
.ab-hero-visual::after,
.ab-device-wrap::before,
.ab-device-wrap::after,
.ab-device-wrap.has-custom-hero-image::before,
.ab-device-wrap.has-custom-hero-image::after {
border: none !important;
outline: none !important;
}
.ab-hero::after,
.ab-hero-grid::after,
.ab-hero .ab-container::after,
.ab-hero-visual::after,
.ab-device-wrap::after,
.ab-device-wrap.has-custom-hero-image::after {
display: none !important;
content: none !important;
}
/* 宇宙背景は残し、楕円線だけ消す */
.ab-hero {
background:
radial-gradient(circle at 76% 30%, rgba(56,189,248,.20), transparent 30%),
radial-gradient(circle at 28% 38%, rgba(255,79,179,.19), transparent 36%),
radial-gradient(circle at 54% 58%, rgba(167,139,250,.13), transparent 42%),
linear-gradient(135deg,#01020a 0%,#071026 56%,#02030a 100%) !important;
overflow: hidden !important;
}
/* 下部の白丸・白ラベルを濃色ネオンへ変更 */
.ab-hero .ab-chip,
.ab-hero .ab-mini-badge,
.ab-hero .ab-badge-small,
.ab-hero .ab-feature-badge,
.ab-hero .ab-trust-badge,
.ab-hero .ab-tagline-badge,
.ab-hero .ab-label,
.ab-hero .ab-note,
.ab-hero .ab-badge:not(.ab-hero-main-pill),
.ab-hero .ab-pill:not(.ab-hero-main-pill),
.ab-hero .ab-tag:not(.ab-hero-main-pill) {
background:
linear-gradient(135deg, rgba(7,13,32,.94) 0%, rgba(14,22,50,.92) 58%, rgba(7,43,74,.90) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.32) !important;
box-shadow:
0 8px 22px rgba(0,0,0,.30),
0 0 16px rgba(56,189,248,.14) !important;
text-shadow: none !important;
}
/* ラベル内文字も強制白 */
.ab-hero .ab-chip *,
.ab-hero .ab-mini-badge *,
.ab-hero .ab-badge-small *,
.ab-hero .ab-feature-badge *,
.ab-hero .ab-trust-badge *,
.ab-hero .ab-tagline-badge *,
.ab-hero .ab-label *,
.ab-hero .ab-note *,
.ab-hero .ab-badge:not(.ab-hero-main-pill) *,
.ab-hero .ab-pill:not(.ab-hero-main-pill) *,
.ab-hero .ab-tag:not(.ab-hero-main-pill) * {
color: #ffffff !important;
opacity: 1 !important;
}
/* 左上メインラベルは濃紺維持・見やすく */
.ab-hero .ab-hero-main-pill,
.ab-hero [data-hero-badge="main"] {
background:
radial-gradient(circle at 21px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, #071122 0%, #101d3d 55%, #0b3a63 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.58) !important;
}
.ab-hero .ab-hero-main-pill *,
.ab-hero [data-hero-badge="main"] * {
color: #ffffff !important;
}
/* 左側に残る黄色ドット装飾を非表示 */
.ab-hero > .ab-dot,
.ab-hero .ab-dotline,
.ab-hero .ab-deco-dot,
.ab-hero .hero-dot {
display: none !important;
}
.ab-hero h1::before,
.ab-hero .ab-hero-title::before,
.ab-hero-copy::before,
.ab-copy::before,
.ab-hero-text::before {
display: none !important;
content: none !important;
}
/* ヒーローの余白整理 */
.ab-hero-grid {
grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr) !important;
gap: 48px !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
max-width: 700px !important;
}
.ab-hero p {
max-width: 680px !important;
white-space: normal !important;
}
/* スマホ対応 */
@media (max-width: 920px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
max-width: 100% !important;
}
.ab-hero p {
max-width: 100% !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v12
楕円ライン完全削除版
========================================================= */
/*
スクショの大きな楕円は疑似要素ではなく、
ヒーロー内の装飾/画像ラッパーに border / outline / box-shadow が残っている可能性が高いため、
ヒーロー周辺の装飾線を直接リセットします。
*/
/* 1. ヒーロー内の大きな装飾枠をすべて解除 */
.ab-hero .ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image,
.ab-hero .ab-device-frame,
.ab-hero .ab-device-card,
.ab-hero .ab-device,
.ab-hero .ab-visual,
.ab-hero .ab-visual-frame,
.ab-hero .hero-visual,
.ab-hero .hero-device,
.ab-hero .hero-image,
.ab-hero .hero-image-wrap,
.ab-hero .ab-orbit,
.ab-hero .orbit,
.ab-hero .cosmic-orbit,
.ab-hero [class*="orbit"],
.ab-hero [class*="device-wrap"],
.ab-hero [class*="hero-visual"] {
border: none !important;
outline: none !important;
}
/* 2. 楕円ラインの原因になりやすい疑似要素を完全非表示 */
.ab-hero .ab-hero-visual::before,
.ab-hero .ab-hero-visual::after,
.ab-hero .ab-device-wrap::before,
.ab-hero .ab-device-wrap::after,
.ab-hero .ab-device-wrap.has-custom-hero-image::before,
.ab-hero .ab-device-wrap.has-custom-hero-image::after,
.ab-hero .ab-device-frame::before,
.ab-hero .ab-device-frame::after,
.ab-hero .ab-device-card::before,
.ab-hero .ab-device-card::after,
.ab-hero .ab-device::before,
.ab-hero .ab-device::after,
.ab-hero .ab-visual::before,
.ab-hero .ab-visual::after,
.ab-hero .ab-visual-frame::before,
.ab-hero .ab-visual-frame::after,
.ab-hero .hero-visual::before,
.ab-hero .hero-visual::after,
.ab-hero .hero-device::before,
.ab-hero .hero-device::after,
.ab-hero .hero-image::before,
.ab-hero .hero-image::after,
.ab-hero .hero-image-wrap::before,
.ab-hero .hero-image-wrap::after,
.ab-hero .ab-orbit::before,
.ab-hero .ab-orbit::after,
.ab-hero .orbit::before,
.ab-hero .orbit::after,
.ab-hero .cosmic-orbit::before,
.ab-hero .cosmic-orbit::after,
.ab-hero [class*="orbit"]::before,
.ab-hero [class*="orbit"]::after {
display: none !important;
content: none !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* 3. box-shadowで楕円線を描いている場合の解除 */
.ab-hero .ab-device-wrap.has-custom-hero-image,
.ab-hero .ab-device-wrap,
.ab-hero .ab-hero-visual,
.ab-hero .ab-visual,
.ab-hero .hero-visual,
.ab-hero [class*="orbit"] {
box-shadow: none !important;
}
/* 4. ヒーロー背景の疑似要素は使わず、背景本体だけで宇宙感を維持 */
.ab-hero::before,
.ab-hero::after {
display: none !important;
content: none !important;
}
.ab-hero {
background:
radial-gradient(circle at 78% 28%, rgba(56,189,248,.20), transparent 30%),
radial-gradient(circle at 26% 36%, rgba(255,79,179,.18), transparent 36%),
radial-gradient(circle at 56% 58%, rgba(167,139,250,.13), transparent 42%),
linear-gradient(135deg,#01020a 0%,#071026 56%,#02030a 100%) !important;
overflow: hidden !important;
}
/* 5. 画像自体には影だけ残し、枠線は付けない */
.ab-hero .ab-device-wrap img,
.ab-hero .ab-hero-visual img,
.ab-hero .hero-visual img {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* 6. 下部の白ラベルは濃色へ */
.ab-hero .ab-chip,
.ab-hero .ab-mini-badge,
.ab-hero .ab-badge-small,
.ab-hero .ab-feature-badge,
.ab-hero .ab-trust-badge,
.ab-hero .ab-tagline-badge {
background: linear-gradient(135deg, rgba(7,13,32,.94), rgba(7,43,74,.90)) !important;
color:#fff !important;
border:1px solid rgba(103,232,249,.32) !important;
}
.ab-hero .ab-chip *,
.ab-hero .ab-mini-badge *,
.ab-hero .ab-badge-small *,
.ab-hero .ab-feature-badge *,
.ab-hero .ab-trust-badge *,
.ab-hero .ab-tagline-badge * {
color:#fff !important;
}
/* 7. 黄色ドットだけの装飾も非表示 */
.ab-hero .ab-dot,
.ab-hero .ab-dotline,
.ab-hero .ab-deco-dot,
.ab-hero .hero-dot,
.ab-hero h1::before,
.ab-hero .ab-hero-title::before,
.ab-hero-copy::before,
.ab-copy::before,
.ab-hero-text::before {
display:none !important;
content:none !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v13
楕円ライン原因：.ab-hero-main-image の枠線/疑似要素を直接削除
========================================================= */
/*
楕円が残る原因は、v36以降の右側メイン画像枠
.ab-hero-main-image に残っている border / radius / after の可能性が高いです。
ここを直接リセットします。
*/
.ab-hero .ab-hero-main-image,
.ab-hero-main-image {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background-color: transparent !important;
}
/* .ab-hero-main-image の上に乗る疑似要素を停止 */
.ab-hero .ab-hero-main-image::before,
.ab-hero .ab-hero-main-image::after,
.ab-hero-main-image::before,
.ab-hero-main-image::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* 右側ビジュアルの親要素に残る枠線を直接削除 */
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image,
.ab-hero .ab-hero-visual,
.ab-hero .ab-visual,
.ab-hero .hero-visual,
.ab-hero [class*="main-image"],
.ab-hero [class*="device-wrap"],
.ab-hero [class*="hero-image"] {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* 楕円ラインがborder-radius付きの親枠として出る場合 */
.ab-hero .ab-device-wrap *,
.ab-hero .ab-hero-visual * {
outline: 0 !important;
}
/* 大きな楕円の線だけを消すため、ヒーロー直下の巨大な角丸枠を無効化 */
.ab-hero .ab-container,
.ab-hero-grid {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.ab-hero .ab-container::before,
.ab-hero .ab-container::after,
.ab-hero-grid::before,
.ab-hero-grid::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* ヒーローの装飾線は完全停止。背景だけで宇宙感を維持 */
.ab-hero::before,
.ab-hero::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.ab-hero {
background:
radial-gradient(circle at 78% 28%, rgba(56,189,248,.20), transparent 30%),
radial-gradient(circle at 26% 36%, rgba(255,79,179,.18), transparent 36%),
radial-gradient(circle at 56% 58%, rgba(167,139,250,.13), transparent 42%),
linear-gradient(135deg,#01020a 0%,#071026 56%,#02030a 100%) !important;
}
/* 下部チップを濃色に */
.ab-hero .ab-note,
.ab-hero .ab-chip,
.ab-hero .ab-mini-badge,
.ab-hero .ab-badge-small {
background: linear-gradient(135deg, rgba(7,13,32,.94), rgba(7,43,74,.90)) !important;
color:#fff !important;
border:1px solid rgba(103,232,249,.32) !important;
}
.ab-hero .ab-note *,
.ab-hero .ab-chip *,
.ab-hero .ab-mini-badge *,
.ab-hero .ab-badge-small * {
color:#fff !important;
}
/* 追加CSS側で楕円線が復活している場合でも勝つため、head末尾にも出します */
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v14
TOP背景：完成度優先の宇宙背景画像版
========================================================= */
.ab-hero {
background:
linear-gradient(90deg, rgba(1,2,10,.88) 0%, rgba(3,6,18,.78) 38%, rgba(3,8,22,.54) 64%, rgba(1,2,10,.42) 100%),
radial-gradient(circle at 28% 42%, rgba(255,79,179,.18), transparent 36%),
radial-gradient(circle at 78% 34%, rgba(56,189,248,.20), transparent 34%),
url("assets/images/cosmic-hero-bg.png") center center / cover no-repeat !important;
position: relative !important;
overflow: hidden !important;
}
/* 楕円・装飾ライン削除 */
.ab-hero::before,
.ab-hero::after,
.ab-hero .ab-container::before,
.ab-hero .ab-container::after,
.ab-hero-grid::before,
.ab-hero-grid::after,
.ab-hero-visual::before,
.ab-hero-visual::after,
.ab-device-wrap::before,
.ab-device-wrap::after,
.ab-hero-main-image::before,
.ab-hero-main-image::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.ab-hero h1,
.ab-hero .ab-hero-title {
color: #ffffff !important;
text-shadow:
0 4px 18px rgba(0,0,0,.50),
0 0 24px rgba(255,255,255,.12),
0 0 36px rgba(56,189,248,.10) !important;
}
.ab-hero p {
color: rgba(255,255,255,.92) !important;
text-shadow: 0 3px 14px rgba(0,0,0,.45) !important;
}
/* TOP左上ラベル */
.ab-hero .ab-hero-main-pill,
.ab-hero [data-hero-badge="main"],
.ab-hero .ab-pill:first-of-type,
.ab-hero .ab-badge:first-of-type,
.ab-hero .ab-tag:first-of-type {
background:
radial-gradient(circle at 21px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, rgba(4,8,24,.96) 0%, rgba(13,22,50,.96) 55%, rgba(7,43,74,.94) 100%) !important;
color: #fff !important;
border: 1px solid rgba(103,232,249,.58) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 10px 28px rgba(0,0,0,.36),
0 0 24px rgba(56,189,248,.22),
0 0 22px rgba(255,79,179,.13) !important;
}
.ab-hero .ab-hero-main-pill *,
.ab-hero [data-hero-badge="main"] *,
.ab-hero .ab-pill:first-of-type *,
.ab-hero .ab-badge:first-of-type *,
.ab-hero .ab-tag:first-of-type * {
color: #fff !important;
}
/* 下部の小ラベル */
.ab-hero .ab-chip,
.ab-hero .ab-mini-badge,
.ab-hero .ab-badge-small,
.ab-hero .ab-feature-badge,
.ab-hero .ab-trust-badge,
.ab-hero .ab-tagline-badge {
background: linear-gradient(135deg, rgba(7,13,32,.92), rgba(7,43,74,.88)) !important;
color:#fff !important;
border:1px solid rgba(103,232,249,.34) !important;
box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 14px rgba(56,189,248,.14) !important;
}
.ab-hero .ab-chip *,
.ab-hero .ab-mini-badge *,
.ab-hero .ab-badge-small *,
.ab-hero .ab-feature-badge *,
.ab-hero .ab-trust-badge *,
.ab-hero .ab-tagline-badge * {
color:#fff !important;
}
/* 右側商品に軽い立体感 */
.ab-hero .ab-device-wrap img,
.ab-hero .ab-hero-visual img {
filter: drop-shadow(0 34px 52px rgba(0,0,0,.38)) !important;
}
/* スマホは文字優先 */
@media (max-width: 920px) {
.ab-hero {
background:
linear-gradient(180deg, rgba(1,2,10,.90) 0%, rgba(3,6,18,.80) 58%, rgba(1,2,10,.64) 100%),
url("assets/images/cosmic-hero-bg.png") center top / cover no-repeat !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v15
商品カード内CART表示修正
- 白い横長ボタンで文字が消える問題を修正
- 数量入力/カートボタン/問い合わせボタンを見やすく
- 商品名・商品コード・価格の黒文字残りも修正
========================================================= */
/* 商品カード内の黒文字残りを修正 */
.ab-product .ab-cart-area,
.ab-product .ab-cart-area *,
.ab-product .ab-product-cart,
.ab-product .ab-product-cart *,
.ab-product .cart,
.ab-product .cart *,
.ab-product form,
.ab-product form *,
.ab-product .product-meta,
.ab-product .product-extra,
.ab-product .product-code,
.ab-product .product-name,
.ab-product .product-sku,
.ab-product .product-price-text,
.ab-product .ab-product-meta,
.ab-product .ab-product-meta *,
.ab-product-card .ab-cart-area,
.ab-product-card .ab-cart-area *,
.ab-product-card .cart,
.ab-product-card .cart *,
.ab-product-card form,
.ab-product-card form *,
.ab-product-card .product-meta,
.ab-product-card .product-extra,
.ab-product-card .product-code,
.ab-product-card .product-name,
.ab-product-card .product-sku,
.ab-product-card .product-price-text,
.ab-product-card .ab-product-meta,
.ab-product-card .ab-product-meta * {
color: rgba(255,255,255,.92) !important;
}
/* 商品カード内の価格だけ視認性を上げる */
.ab-product .price,
.ab-product-price,
.ab-product-card .price,
.ab-product-card .ab-product-price {
color: #7dd3fc !important;
text-shadow: 0 0 12px rgba(125,211,252,.24) !important;
}
/* カートフォーム全体 */
.ab-product form,
.ab-product-card form,
.ab-product .cart,
.ab-product-card .cart,
.ab-cart-area,
.ab-product-cart {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
margin-top: 14px !important;
}
/* 数量入力 */
.ab-product input[type="number"],
.ab-product-card input[type="number"],
.ab-product .quantity input,
.ab-product-card .quantity input,
.ab-product input[name*="quantity"],
.ab-product-card input[name*="quantity"],
.ab-product input[name*="kosu"],
.ab-product-card input[name*="kosu"] {
width: 64px !important;
min-width: 64px !important;
height: 54px !important;
padding: 0 10px !important;
border-radius: 12px !important;
background: rgba(255,255,255,.96) !important;
color: #0b1020 !important;
border: 1px solid rgba(103,232,249,.28) !important;
font-size: 22px !important;
font-weight: 800 !important;
text-align: center !important;
box-shadow: 0 8px 20px rgba(0,0,0,.24) !important;
}
/* カートボタン本体：白ボタンをネオンボタンへ */
.ab-product button,
.ab-product-card button,
.ab-product input[type="submit"],
.ab-product-card input[type="submit"],
.ab-product .cart-button,
.ab-product-card .cart-button,
.ab-product .cart-btn,
.ab-product-card .cart-btn,
.ab-product .ab-cart-button,
.ab-product-card .ab-cart-button,
.ab-product a[href*="kago"],
.ab-product-card a[href*="kago"],
.ab-product a[href*="cart"],
.ab-product-card a[href*="cart"] {
min-height: 54px !important;
padding: 14px 30px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #ff4fb3 0%, #8b5cf6 52%, #38bdf8 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.30) !important;
font-size: 18px !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
text-align: center !important;
box-shadow:
0 12px 28px rgba(0,0,0,.32),
0 0 22px rgba(139,92,246,.26),
0 0 18px rgba(56,189,248,.18) !important;
text-shadow: none !important;
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
}
/* ボタン内文字を強制白 */
.ab-product button *,
.ab-product-card button *,
.ab-product .cart-button *,
.ab-product-card .cart-button *,
.ab-product .cart-btn *,
.ab-product-card .cart-btn *,
.ab-product .ab-cart-button *,
.ab-product-card .ab-cart-button *,
.ab-product a[href*="kago"] *,
.ab-product-card a[href*="kago"] *,
.ab-product a[href*="cart"] *,
.ab-product-card a[href*="cart"] * {
color: #ffffff !important;
opacity: 1 !important;
}
/* e-shopsカートHTML内でinput imageや無名submitが白くなる対策 */
.ab-product input[type="button"],
.ab-product-card input[type="button"],
.ab-product input[type="submit"],
.ab-product-card input[type="submit"] {
background: linear-gradient(135deg, #ff4fb3 0%, #8b5cf6 52%, #38bdf8 100%) !important;
color: #ffffff !important;
}
/* 問い合わせボタン */
.ab-product .contact-button,
.ab-product-card .contact-button,
.ab-product .inquiry-button,
.ab-product-card .inquiry-button,
.ab-product .ab-contact-btn,
.ab-product-card .ab-contact-btn,
.ab-product a[href*="contact"],
.ab-product-card a[href*="contact"],
.ab-product a[href*="inquiry"],
.ab-product-card a[href*="inquiry"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 46px !important;
padding: 12px 24px !important;
border-radius: 999px !important;
background: rgba(103,232,249,.14) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.32) !important;
font-weight: 800 !important;
box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 0 14px rgba(56,189,248,.12) !important;
}
/* iframeや外部カートパーツが白い横長だけ出る場合の見た目補正 */
.ab-product iframe,
.ab-product-card iframe {
background: transparent !important;
border: 0 !important;
max-width: 100% !important;
}
/* カード下部の余白 */
.ab-product,
.ab-product-card {
overflow: hidden !important;
}
.ab-product .ab-product-body,
.ab-product-card .ab-product-body,
.ab-product .card-body,
.ab-product-card .card-body {
padding-bottom: 28px !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-product form,
.ab-product-card form,
.ab-product .cart,
.ab-product-card .cart,
.ab-cart-area,
.ab-product-cart {
gap: 8px !important;
}
.ab-product input[type="number"],
.ab-product-card input[type="number"],
.ab-product .quantity input,
.ab-product-card .quantity input {
width: 58px !important;
min-width: 58px !important;
height: 50px !important;
font-size: 20px !important;
}
.ab-product button,
.ab-product-card button,
.ab-product input[type="submit"],
.ab-product-card input[type="submit"],
.ab-product .cart-button,
.ab-product-card .cart-button,
.ab-product .cart-btn,
.ab-product-card .cart-btn,
.ab-product .ab-cart-button,
.ab-product-card .ab-cart-button {
flex: 1 1 180px !important;
min-height: 50px !important;
padding: 12px 20px !important;
font-size: 16px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v18
v17崩れ復旧 / JSなし安全版 / 商品個別ページ背景修正
========================================================= */
/* v17のように検索フォームへ当てないため、カート補正は商品カード内の専用エリアだけに限定 */
/* =========================
1. 商品個別ページ 背景を宇宙系へ
========================= */
body.single,
body.single-post,
body[class*="single"],
body[class*="product"] {
background:
radial-gradient(circle at 18% 18%, rgba(255,79,179,.20), transparent 30%),
radial-gradient(circle at 82% 20%, rgba(56,189,248,.18), transparent 30%),
radial-gradient(circle at 70% 78%, rgba(139,92,246,.16), transparent 34%),
linear-gradient(135deg, #02030b 0%, #071026 48%, #02030b 100%) !important;
color:#ffffff !important;
}
/* main/記事背景が白で残る場合 */
.single .site,
.single .site-main,
.single main,
.single article,
.single .entry-content,
.single .content-area,
.single .page-content,
.single-post .site-main,
.single-post main,
.single-post article,
.single-post .entry-content {
background: transparent !important;
color:#ffffff !important;
}
/* 商品詳細らしき全体ラッパー */
.ab-single-product,
.ab-product-single,
.ab-product-detail,
.ab-product-page,
.product-single-wrap,
.product-detail-wrap,
.single-product-wrap,
.single .ab-section,
.single-post .ab-section {
background:
radial-gradient(circle at 24% 18%, rgba(255,79,179,.10), transparent 34%),
radial-gradient(circle at 86% 20%, rgba(56,189,248,.10), transparent 30%),
linear-gradient(135deg, rgba(5,8,20,.94), rgba(7,13,32,.94)) !important;
color:#ffffff !important;
}
/* =========================
2. 商品個別ページ 画像枠/説明枠
========================= */
.single .ab-product-visual,
.single .ab-product-image,
.single .product-image,
.single .wp-post-image,
.single-post .ab-product-visual,
.single-post .ab-product-image,
.single-post .product-image {
border-radius: 28px !important;
}
.single .ab-product-visual,
.single .ab-product-image,
.single .product-image,
.single-post .ab-product-visual,
.single-post .ab-product-image,
.single-post .product-image {
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 34%),
linear-gradient(135deg, rgba(8,13,32,.86), rgba(4,8,22,.94)) !important;
border:1px solid rgba(103,232,249,.18) !important;
box-shadow:0 24px 70px rgba(0,0,0,.34), 0 0 28px rgba(56,189,248,.08) !important;
}
.single .ab-product-summary,
.single .product-summary,
.single .entry-content,
.single-post .ab-product-summary,
.single-post .product-summary,
.single-post .entry-content {
color:#ffffff !important;
}
.single h1,
.single h2,
.single h3,
.single h4,
.single-post h1,
.single-post h2,
.single-post h3,
.single-post h4 {
color:#ffffff !important;
}
.single p,
.single li,
.single-post p,
.single-post li {
color:rgba(234,242,255,.90) !important;
line-height:1.9 !important;
}
/* =========================
3. 商品一覧/カード内 CART表示安全補正
========================= */
/* 検索フォームには当てない。商品カード内だけ */
.ab-product-card .ab-product-meta,
.ab-product-card .ab-product-meta *,
.ab-product-card .product-meta,
.ab-product-card .product-meta *,
.ab-product .ab-product-meta,
.ab-product .ab-product-meta *,
.ab-product .product-meta,
.ab-product .product-meta * {
color: rgba(255,255,255,.92) !important;
}
.ab-product-card .price,
.ab-product .price,
.ab-product-price {
color:#7dd3fc !important;
font-weight:900 !important;
text-shadow:0 0 14px rgba(125,211,252,.26) !important;
}
/* カートフォームの横並び */
.ab-product-card form,
.ab-product form,
.ab-product-card .cart,
.ab-product .cart,
.ab-product-card .ab-cart-area,
.ab-product .ab-cart-area,
.ab-product-card .ab-product-cart,
.ab-product .ab-product-cart {
display:flex !important;
align-items:center !important;
gap:12px !important;
flex-wrap:wrap !important;
margin-top:16px !important;
}
/* 数量欄：商品カード内に限定 */
.ab-product-card form input[type="number"],
.ab-product form input[type="number"],
.ab-product-card form input[name*="qty"],
.ab-product form input[name*="qty"],
.ab-product-card form input[name*="quantity"],
.ab-product form input[name*="quantity"],
.ab-product-card form input[name*="kosu"],
.ab-product form input[name*="kosu"],
.ab-product-card .cart input[type="number"],
.ab-product .cart input[type="number"] {
width:72px !important;
min-width:72px !important;
max-width:72px !important;
height:58px !important;
padding:0 !important;
margin:0 !important;
border-radius:12px !important;
background:#ffffff !important;
color:#111111 !important;
-webkit-text-fill-color:#111111 !important;
border:2px solid rgba(103,232,249,.45) !important;
font-size:28px !important;
font-weight:900 !important;
line-height:58px !important;
text-align:center !important;
text-indent:0 !important;
opacity:1 !important;
visibility:visible !important;
box-shadow:0 8px 22px rgba(0,0,0,.30),0 0 16px rgba(56,189,248,.16) !important;
}
/* type=textは検索と誤爆しやすいため、カート内だけ */
.ab-product-card .cart input[type="text"],
.ab-product .cart input[type="text"],
.ab-product-card .ab-cart-area input[type="text"],
.ab-product .ab-cart-area input[type="text"],
.ab-product-card .ab-product-cart input[type="text"],
.ab-product .ab-product-cart input[type="text"] {
width:72px !important;
min-width:72px !important;
max-width:72px !important;
height:58px !important;
padding:0 !important;
border-radius:12px !important;
background:#ffffff !important;
color:#111111 !important;
-webkit-text-fill-color:#111111 !important;
border:2px solid rgba(103,232,249,.45) !important;
font-size:28px !important;
font-weight:900 !important;
line-height:58px !important;
text-align:center !important;
}
/* カートボタン：商品カード内だけ */
.ab-product-card form button,
.ab-product form button,
.ab-product-card form input[type="submit"],
.ab-product form input[type="submit"],
.ab-product-card .cart button,
.ab-product .cart button,
.ab-product-card .cart input[type="submit"],
.ab-product .cart input[type="submit"],
.ab-product-card a[href*="kago"],
.ab-product a[href*="kago"],
.ab-product-card a[href*="cart"],
.ab-product a[href*="cart"] {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:240px !important;
min-height:58px !important;
padding:15px 34px !important;
border-radius:999px !important;
background:linear-gradient(135deg,#ff4fb3 0%,#8b5cf6 52%,#38bdf8 100%) !important;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
border:1px solid rgba(255,255,255,.32) !important;
font-size:18px !important;
font-weight:900 !important;
letter-spacing:.04em !important;
text-align:center !important;
box-shadow:0 12px 30px rgba(0,0,0,.32),0 0 22px rgba(139,92,246,.28),0 0 18px rgba(56,189,248,.20) !important;
opacity:1 !important;
visibility:visible !important;
}
/* 問い合わせボタン */
.ab-product-card a[href*="contact"],
.ab-product a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product a[href*="inquiry"],
.ab-product-card .ab-contact-btn,
.ab-product .ab-contact-btn {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:50px !important;
padding:13px 28px !important;
border-radius:999px !important;
background:rgba(103,232,249,.16) !important;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
border:1px solid rgba(103,232,249,.36) !important;
font-size:16px !important;
font-weight:900 !important;
}
/* 検索フォームは絶対に触らない */
.search-form input,
.wp-block-search input,
input[type="search"],
.header-search input,
.site-header input,
.ab-header input,
.ab-nav input {
width:auto !important;
max-width:none !important;
height:auto !important;
min-height:0 !important;
color:inherit !important;
-webkit-text-fill-color:inherit !important;
}
/* =========================
4. スマホ
========================= */
@media (max-width:620px){
.ab-product-card form input[type="number"],
.ab-product form input[type="number"],
.ab-product-card .cart input[type="text"],
.ab-product .cart input[type="text"] {
width:62px !important;
min-width:62px !important;
max-width:62px !important;
height:52px !important;
font-size:22px !important;
line-height:52px !important;
}
.ab-product-card form button,
.ab-product form button,
.ab-product-card form input[type="submit"],
.ab-product form input[type="submit"] {
min-width:180px !important;
min-height:52px !important;
padding:12px 22px !important;
font-size:16px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v19
商品個別ページ 白背景完全除去版
========================================================= */
/*
商品個別ページの白背景が残る原因：
画像エリアや詳細エリアに background:#fff / background-color:white が
個別クラスまたはインラインに近い形で残っている可能性が高いため、
body.single 配下の主要ラッパー・画像枠・カード枠をまとめて透明/ダーク化します。
*/
/* =========================
1. 個別ページ全体背景
========================= */
body.single,
body.single-post,
body.single-product,
body[class*="single"] {
background:
radial-gradient(circle at 20% 16%, rgba(255,79,179,.20), transparent 30%),
radial-gradient(circle at 84% 20%, rgba(56,189,248,.18), transparent 30%),
radial-gradient(circle at 70% 82%, rgba(139,92,246,.16), transparent 34%),
linear-gradient(135deg,#02030b 0%,#071026 48%,#02030b 100%) !important;
color:#ffffff !important;
}
/* =========================
2. WordPress標準白背景の除去
========================= */
body.single .site,
body.single .site-content,
body.single .content-area,
body.single .site-main,
body.single main,
body.single article,
body.single .hentry,
body.single .entry,
body.single .entry-content,
body.single .post,
body.single .page,
body.single .wrap,
body.single .container,
body.single .main,
body.single #main,
body.single #content,
body.single #primary {
background: transparent !important;
background-color: transparent !important;
color:#ffffff !important;
}
/* =========================
3. 商品詳細系ラッパーの白背景除去
========================= */
body.single [class*="single"],
body.single [class*="product"],
body.single [class*="detail"],
body.single [class*="summary"],
body.single [class*="visual"],
body.single [class*="image"],
body.single [class*="gallery"],
body.single [class*="photo"],
body.single [class*="media"],
body.single [class*="card"],
body.single [class*="box"],
body.single [class*="panel"] {
background-color: transparent !important;
}
/* ただし本文やカードは完全透明よりダークガラスにする */
body.single .ab-product-detail,
body.single .ab-product-single,
body.single .ab-single-product,
body.single .ab-product-page,
body.single .product-detail,
body.single .product-single,
body.single .product-summary,
body.single .ab-product-summary,
body.single .entry-content {
background:
radial-gradient(circle at 90% 8%, rgba(56,189,248,.08), transparent 30%),
linear-gradient(180deg, rgba(8,13,32,.68), rgba(4,8,22,.58)) !important;
background-color: rgba(4,8,22,.58) !important;
border: 1px solid rgba(103,232,249,.12) !important;
border-radius: 28px !important;
color:#ffffff !important;
}
/* =========================
4. 左の商品画像の白い箱をダーク化
========================= */
body.single .ab-product-image,
body.single .ab-product-visual,
body.single .ab-single-product-visual,
body.single .product-image,
body.single .product-gallery,
body.single .product-photo,
body.single .product-media,
body.single .wp-post-image-wrap,
body.single .featured-image,
body.single .post-thumbnail,
body.single .thumbnail,
body.single figure,
body.single .entry-content figure {
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 34%),
radial-gradient(circle at 78% 70%, rgba(56,189,248,.10), transparent 34%),
linear-gradient(135deg, rgba(8,13,32,.88), rgba(4,8,22,.96)) !important;
background-color: rgba(4,8,22,.96) !important;
border: 1px solid rgba(103,232,249,.18) !important;
border-radius: 32px !important;
box-shadow:
0 24px 70px rgba(0,0,0,.34),
0 0 28px rgba(56,189,248,.08) !important;
overflow: hidden !important;
}
/* 画像そのものは白背景を持つ画像の場合はCSSでは消せませんが、枠は暗くする */
body.single img.wp-post-image,
body.single .ab-product-image img,
body.single .ab-product-visual img,
body.single .product-image img,
body.single .product-gallery img,
body.single figure img {
background: transparent !important;
border: none !important;
box-shadow: none !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
filter: drop-shadow(0 24px 36px rgba(0,0,0,.28)) !important;
}
/* =========================
5. インラインstyle風の白背景対策
========================= */
body.single [style*="background:#fff"],
body.single [style*="background: #fff"],
body.single [style*="background-color:#fff"],
body.single [style*="background-color: #fff"],
body.single [style*="background:white"],
body.single [style*="background: white"],
body.single [style*="background-color:white"],
body.single [style*="background-color: white"],
body.single [style*="background:#ffffff"],
body.single [style*="background: #ffffff"],
body.single [style*="background-color:#ffffff"],
body.single [style*="background-color: #ffffff"] {
background:
linear-gradient(135deg, rgba(8,13,32,.88), rgba(4,8,22,.96)) !important;
background-color: rgba(4,8,22,.96) !important;
}
/* =========================
6. 文字色
========================= */
body.single h1,
body.single h2,
body.single h3,
body.single h4,
body.single h5,
body.single h6 {
color:#ffffff !important;
text-shadow:0 2px 14px rgba(0,0,0,.32) !important;
}
body.single p,
body.single li,
body.single td,
body.single th,
body.single span,
body.single div {
color: inherit;
}
body.single .entry-content p,
body.single .entry-content li,
body.single .product-summary p,
body.single .product-summary li,
body.single .ab-product-summary p,
body.single .ab-product-summary li {
color: rgba(234,242,255,.90) !important;
line-height: 1.9 !important;
}
body.single strong,
body.single b {
color:#ffffff !important;
}
/* =========================
7. 価格・商品コード
========================= */
body.single .price,
body.single [class*="price"] {
color:#7dd3fc !important;
font-weight:900 !important;
text-shadow:0 0 14px rgba(125,211,252,.26) !important;
}
body.single [class*="code"],
body.single [class*="sku"],
body.single [class*="meta"] {
color:rgba(255,255,255,.90) !important;
}
/* =========================
8. head末尾でも同じ内容を出す前提
========================= */
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v20
商品個別ページ：価格/定価表示の視認性修正
========================================================= */
/* 商品詳細・商品カード内の価格系テキストを強制的に明るく */
body.single [class*="price"],
body.single [class*="Price"],
body.single [class*="kakaku"],
body.single [class*="teika"],
body.single [class*="amount"],
body.single .price,
body.single .regular-price,
body.single .sale-price,
body.single .product-price,
body.single .ab-product-price,
body.single .ab-price,
body.single .ab-regular-price,
body.single .ab-product-meta .price,
body.single .product-meta .price,
body.single .entry-content .price,
body.single-product [class*="price"],
body.single-product [class*="Price"],
body.single-product [class*="amount"],
body.single-product .price,
body.single-product .regular-price,
body.single-product .sale-price,
body.single-product .product-price,
body.single-product .ab-product-price,
body.single-product .ab-price,
.ab-product [class*="price"],
.ab-product-card [class*="price"],
.ab-product .price,
.ab-product-card .price,
.ab-product-price,
.ab-price {
color: #7dd3fc !important;
-webkit-text-fill-color: #7dd3fc !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 900 !important;
text-shadow:
0 0 12px rgba(125,211,252,.32),
0 2px 10px rgba(0,0,0,.40) !important;
}
/* 「価格：」「定価：」の行全体を見やすく */
body.single .ab-product-meta,
body.single .product-meta,
body.single .product-extra,
body.single .ab-product-info,
body.single .product-info,
body.single .entry-content,
.ab-product .ab-product-meta,
.ab-product-card .ab-product-meta,
.ab-product .product-meta,
.ab-product-card .product-meta {
color: rgba(255,255,255,.92) !important;
}
/* 価格ラベルがp/div/span直書きで黒になる場合の対策 */
body.single .ab-product-meta *,
body.single .product-meta *,
body.single .product-extra *,
body.single .ab-product-info *,
body.single .product-info *,
.ab-product .ab-product-meta *,
.ab-product-card .ab-product-meta *,
.ab-product .product-meta *,
.ab-product-card .product-meta * {
color: rgba(255,255,255,.92) !important;
opacity: 1 !important;
}
/* 価格を含む文字列だけを包む要素に色が残る場合 */
body.single span,
body.single div,
body.single p,
.ab-product span,
.ab-product div,
.ab-product p,
.ab-product-card span,
.ab-product-card div,
.ab-product-card p {
text-shadow: none;
}
/* 価格の数字・円だけは水色で強調 */
body.single .price *,
body.single .regular-price *,
body.single .sale-price *,
body.single .product-price *,
body.single .ab-product-price *,
body.single .ab-price *,
.ab-product .price *,
.ab-product-card .price *,
.ab-product-price *,
.ab-price * {
color: #7dd3fc !important;
-webkit-text-fill-color: #7dd3fc !important;
opacity: 1 !important;
}
/* 黒文字がインライン指定されている場合の対策 */
body.single [style*="color:#000"],
body.single [style*="color: #000"],
body.single [style*="color:black"],
body.single [style*="color: black"],
body.single [style*="color:#111"],
body.single [style*="color: #111"],
body.single [style*="color:#000000"],
body.single [style*="color: #000000"],
.ab-product [style*="color:#000"],
.ab-product [style*="color: #000"],
.ab-product [style*="color:black"],
.ab-product [style*="color: black"],
.ab-product-card [style*="color:#000"],
.ab-product-card [style*="color: #000"],
.ab-product-card [style*="color:black"],
.ab-product-card [style*="color: black"] {
color: rgba(255,255,255,.92) !important;
-webkit-text-fill-color: rgba(255,255,255,.92) !important;
}
/* 商品コード等は白、価格は水色に見せる */
body.single .entry-content strong,
body.single .entry-content b,
body.single .product-meta strong,
body.single .product-meta b,
body.single .ab-product-meta strong,
body.single .ab-product-meta b {
color: #ffffff !important;
}
/* 価格行専用の見やすさ補正 */
body.single .entry-content p:has(.price),
body.single .product-meta p:has(.price),
body.single .ab-product-meta p:has(.price) {
color: #7dd3fc !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v21
FAQ表示修正：白背景＋薄文字を修正
========================================================= */
/* FAQセクション背景 */
.ab-faq,
.ab-faq-section,
#faq,
section[id*="faq"],
section[class*="faq"] {
background:
radial-gradient(circle at 18% 20%, rgba(255,79,179,.14), transparent 32%),
radial-gradient(circle at 82% 18%, rgba(56,189,248,.12), transparent 30%),
linear-gradient(135deg, #060817 0%, #0a1532 48%, #050714 100%) !important;
color: #ffffff !important;
}
/* FAQカード/アコーディオン本体 */
.ab-faq-item,
.ab-faq-card,
.ab-faq-box,
.ab-accordion,
.ab-accordion-item,
.faq-item,
.faq-card,
.faq-box,
.accordion,
.accordion-item,
.wp-block-details,
details {
background:
radial-gradient(circle at 90% 20%, rgba(56,189,248,.08), transparent 30%),
linear-gradient(135deg, rgba(7,13,32,.94), rgba(4,8,22,.96)) !important;
background-color: rgba(4,8,22,.96) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.20) !important;
border-radius: 24px !important;
box-shadow:
0 18px 48px rgba(0,0,0,.28),
0 0 20px rgba(56,189,248,.08) !important;
}
/* 白背景がクラス違いで残る場合 */
.ab-faq [class*="item"],
.ab-faq [class*="card"],
.ab-faq [class*="box"],
.ab-faq [class*="accordion"],
.ab-faq-section [class*="item"],
.ab-faq-section [class*="card"],
.ab-faq-section [class*="box"],
.ab-faq-section [class*="accordion"],
#faq [class*="item"],
#faq [class*="card"],
#faq [class*="box"],
#faq [class*="accordion"],
section[id*="faq"] [class*="item"],
section[id*="faq"] [class*="card"],
section[id*="faq"] [class*="box"],
section[id*="faq"] [class*="accordion"] {
background:
radial-gradient(circle at 90% 20%, rgba(56,189,248,.08), transparent 30%),
linear-gradient(135deg, rgba(7,13,32,.94), rgba(4,8,22,.96)) !important;
background-color: rgba(4,8,22,.96) !important;
color: #ffffff !important;
border-color: rgba(103,232,249,.20) !important;
}
/* FAQの質問文 */
.ab-faq h3,
.ab-faq h4,
.ab-faq summary,
.ab-faq .question,
.ab-faq .faq-question,
.ab-faq .ab-faq-question,
.ab-faq-title,
.ab-faq-item h3,
.ab-faq-item summary,
.faq-question,
.faq-item h3,
.faq-item summary,
details summary {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
font-weight: 900 !important;
text-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
}
/* FAQの回答文 */
.ab-faq p,
.ab-faq li,
.ab-faq span,
.ab-faq div,
.ab-faq .answer,
.ab-faq .faq-answer,
.ab-faq .ab-faq-answer,
.ab-faq-body,
.ab-faq-item p,
.ab-faq-item li,
.faq-answer,
.faq-item p,
.faq-item li,
details p,
details li {
color: rgba(234,242,255,.92) !important;
-webkit-text-fill-color: rgba(234,242,255,.92) !important;
opacity: 1 !important;
line-height: 1.9 !important;
}
/* FAQ内の薄いテキストを強制的に見える色へ */
.ab-faq [style*="color"],
.ab-faq-section [style*="color"],
#faq [style*="color"],
section[id*="faq"] [style*="color"],
section[class*="faq"] [style*="color"] {
color: rgba(234,242,255,.92) !important;
-webkit-text-fill-color: rgba(234,242,255,.92) !important;
}
/* FAQ内の白背景インライン指定を無効化 */
.ab-faq [style*="background:#fff"],
.ab-faq [style*="background: #fff"],
.ab-faq [style*="background-color:#fff"],
.ab-faq [style*="background-color: #fff"],
.ab-faq [style*="background:white"],
.ab-faq [style*="background: white"],
.ab-faq [style*="background-color:white"],
.ab-faq [style*="background-color: white"],
.ab-faq [style*="background:#ffffff"],
.ab-faq [style*="background: #ffffff"],
.ab-faq [style*="background-color:#ffffff"],
.ab-faq [style*="background-color: #ffffff"],
#faq [style*="background:#fff"],
#faq [style*="background: #fff"],
#faq [style*="background-color:#fff"],
#faq [style*="background-color: #fff"],
#faq [style*="background:white"],
#faq [style*="background: white"],
#faq [style*="background-color:white"],
#faq [style*="background-color: white"] {
background:
linear-gradient(135deg, rgba(7,13,32,.94), rgba(4,8,22,.96)) !important;
background-color: rgba(4,8,22,.96) !important;
}
/* アコーディオンの開閉アイコン */
.ab-faq summary::marker,
.faq-item summary::marker,
details summary::marker {
color: #7dd3fc !important;
}
/* FAQカード同士の余白 */
.ab-faq-item,
.ab-faq-card,
.faq-item,
.faq-card,
details {
margin-bottom: 18px !important;
padding: 24px 28px !important;
}
/* FAQの中でリンクがある場合 */
.ab-faq a,
#faq a,
section[id*="faq"] a {
color: #7dd3fc !important;
text-decoration: underline;
text-underline-offset: 4px;
}
/* スマホ */
@media (max-width: 620px) {
.ab-faq-item,
.ab-faq-card,
.faq-item,
.faq-card,
details {
padding: 18px 20px !important;
border-radius: 18px !important;
}
.ab-faq h3,
.ab-faq summary,
.faq-question,
details summary {
font-size: 18px !important;
}
.ab-faq p,
.faq-answer,
details p {
font-size: 15px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v24
TOP上部ラベル安全版
- JS不使用
- front-page.php の span.ab-kicker にだけ ab-hero-kicker-v24 を付与
- 親divを拾わないため巨大楕円が出ません
========================================================= */
/* =========================
1. TOPの巨大楕円・装飾枠を削除
========================= */
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-copy,
.ab-copy,
.ab-hero-text,
.ab-hero-visual,
.ab-device-wrap,
.ab-device-wrap.has-custom-hero-image,
.ab-hero-main-image {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.ab-hero::before,
.ab-hero::after,
.ab-hero .ab-container::before,
.ab-hero .ab-container::after,
.ab-hero-grid::before,
.ab-hero-grid::after,
.ab-hero-copy::before,
.ab-hero-copy::after,
.ab-copy::before,
.ab-copy::after,
.ab-hero-text::before,
.ab-hero-text::after,
.ab-hero-visual::before,
.ab-hero-visual::after,
.ab-device-wrap::before,
.ab-device-wrap::after,
.ab-device-wrap.has-custom-hero-image::before,
.ab-device-wrap.has-custom-hero-image::after,
.ab-hero-main-image::before,
.ab-hero-main-image::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* orbit/frame/ellipse系だけ削除。circleは商品デザインに干渉するため対象外 */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"] {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.ab-hero [class*="orbit"]::before,
.ab-hero [class*="orbit"]::after,
.ab-hero [class*="ellipse"]::before,
.ab-hero [class*="ellipse"]::after,
.ab-hero [class*="frame"]::before,
.ab-hero [class*="frame"]::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* =========================
2. キャッチ上部テキスト専用デザイン
実際の span.ab-kicker だけに当てる
========================= */
.ab-hero .ab-kicker.ab-hero-kicker-v24 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
width: auto !important;
max-width: 100% !important;
min-height: 50px !important;
padding: 13px 28px 13px 24px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .09em !important;
line-height: 1.35 !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
opacity: 1 !important;
overflow: hidden !important;
margin-bottom: 28px !important;
}
/* 既存の .ab-kicker:before をゴールドドットとして整える */
.ab-hero .ab-kicker.ab-hero-kicker-v24::before {
content: "" !important;
display: inline-block !important;
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
border-radius: 999px !important;
background: #d6a648 !important;
box-shadow:
0 0 0 7px rgba(214,166,72,.12),
0 0 18px rgba(214,166,72,.44) !important;
}
/* 余計なafterだけ削除 */
.ab-hero .ab-kicker.ab-hero-kicker-v24::after {
display: none !important;
content: none !important;
}
.ab-hero .ab-kicker.ab-hero-kicker-v24 *,
.ab-hero .ab-kicker.ab-hero-kicker-v24 span,
.ab-hero .ab-kicker.ab-hero-kicker-v24 strong {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
opacity: 1 !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
}
/* =========================
3. 万一旧クラスが残った場合は巨大化しないよう無効化
========================= */
.ab-hero-label-v23 {
display: initial !important;
padding: initial !important;
border: 0 !important;
border-radius: initial !important;
background: transparent !important;
box-shadow: none !important;
}
/* =========================
4. スマホ
========================= */
@media (max-width: 620px) {
.ab-hero .ab-kicker.ab-hero-kicker-v24 {
min-height: 44px !important;
padding: 11px 18px 11px 16px !important;
gap: 10px !important;
font-size: 13px !important;
letter-spacing: .05em !important;
}
.ab-hero .ab-kicker.ab-hero-kicker-v24::before {
width: 11px !important;
height: 11px !important;
min-width: 11px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v25
小見出しラベル視認性改善
- AIR BRIDGE PRODUCT / FAQ / NEWS などのラベルだけを改善
- 親divに当たらない安全設計
========================================================= */
/* JSで付与する小見出しラベル専用クラス */
.ab-small-label-v25 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
width: auto !important;
max-width: 100% !important;
min-height: 54px !important;
padding: 15px 34px 15px 28px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .18em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
opacity: 1 !important;
overflow: hidden !important;
}
/* 左の光るドット */
.ab-small-label-v25::before {
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
border-radius: 999px !important;
background: #f2bf55 !important;
box-shadow:
0 0 0 9px rgba(242,191,85,.12),
0 0 18px rgba(242,191,85,.56),
0 0 28px rgba(242,191,85,.28) !important;
}
/* 余計なafterは消す */
.ab-small-label-v25::after {
display: none !important;
content: none !important;
}
.ab-small-label-v25 *,
.ab-small-label-v25 span,
.ab-small-label-v25 strong {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
opacity: 1 !important;
}
/* 青文字で薄くなっている既存ラベルの補助 */
.ab-products .ab-small-label-v25,
.ab-product-section .ab-small-label-v25,
.ab-section .ab-small-label-v25,
#products .ab-small-label-v25 {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
}
/* 既存の薄グレー背景・水色文字を無効化 */
.ab-small-label-v25[style],
.ab-small-label-v25 *[style] {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-small-label-v25 {
min-height: 44px !important;
padding: 11px 20px 11px 18px !important;
gap: 11px !important;
font-size: 13px !important;
letter-spacing: .12em !important;
}
.ab-small-label-v25::before {
width: 11px !important;
height: 11px !important;
min-width: 11px !important;
box-shadow:
0 0 0 7px rgba(242,191,85,.12),
0 0 14px rgba(242,191,85,.50) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v26
TOPページ 楕円完全削除版
========================================================= */
/*
TOPの大きな楕円は、ヒーロー領域の疑似要素・orbit/frame系・
border-radius付きの装飾枠・box-shadowが原因で再発しやすいため、
TOPヒーローの大枠だけを狙って完全に停止します。
小さなラベルやボタンには影響しないよう、対象を.hero大枠に限定します。
*/
/* =========================
1. TOPヒーロー大枠の楕円・枠線を完全停止
========================= */
.home .ab-hero,
.front-page .ab-hero,
body.home .ab-hero,
body.front-page .ab-hero,
.ab-hero {
overflow: hidden !important;
}
/* ヒーロー内部の大枠に付いた枠線/影を削除 */
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-wrap,
.ab-hero-copy,
.ab-copy,
.ab-hero-text,
.ab-hero-visual,
.ab-device-wrap,
.ab-device-wrap.has-custom-hero-image,
.ab-hero-main-image,
.ab-hero-figure,
.ab-hero-media {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* 大楕円を作りやすい疑似要素を削除 */
.ab-hero::before,
.ab-hero::after,
.ab-hero .ab-container::before,
.ab-hero .ab-container::after,
.ab-hero-grid::before,
.ab-hero-grid::after,
.ab-hero-inner::before,
.ab-hero-inner::after,
.ab-hero-wrap::before,
.ab-hero-wrap::after,
.ab-hero-copy::before,
.ab-hero-copy::after,
.ab-copy::before,
.ab-copy::after,
.ab-hero-text::before,
.ab-hero-text::after,
.ab-hero-visual::before,
.ab-hero-visual::after,
.ab-device-wrap::before,
.ab-device-wrap::after,
.ab-device-wrap.has-custom-hero-image::before,
.ab-device-wrap.has-custom-hero-image::after,
.ab-hero-main-image::before,
.ab-hero-main-image::after,
.ab-hero-figure::before,
.ab-hero-figure::after,
.ab-hero-media::before,
.ab-hero-media::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* orbit / ellipse / frame / ring 系の装飾を削除 */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"],
.ab-hero [class*="ring"],
.ab-hero [class*="halo"],
.ab-hero [class*="outline"] {
display: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.ab-hero [class*="orbit"]::before,
.ab-hero [class*="orbit"]::after,
.ab-hero [class*="ellipse"]::before,
.ab-hero [class*="ellipse"]::after,
.ab-hero [class*="frame"]::before,
.ab-hero [class*="frame"]::after,
.ab-hero [class*="ring"]::before,
.ab-hero [class*="ring"]::after,
.ab-hero [class*="halo"]::before,
.ab-hero [class*="halo"]::after,
.ab-hero [class*="outline"]::before,
.ab-hero [class*="outline"]::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* =========================
2. ただし小さいラベル/ボタンは消さない
========================= */
.ab-hero .ab-kicker,
.ab-hero .ab-hero-kicker-v24,
.ab-hero .ab-small-label-v25,
.ab-hero .ab-float,
.ab-hero .ab-btn,
.ab-hero a,
.ab-hero button {
display: inline-flex;
}
/* 小さいラベルのデザインは維持 */
.ab-hero .ab-kicker.ab-hero-kicker-v24,
.ab-small-label-v25 {
border-radius: 999px !important;
}
/* =========================
3. 楕円が border-radius で付いている場合の最終対策
ヒーロー大枠だけ角丸を消す
========================= */
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-wrap,
.ab-hero-visual,
.ab-device-wrap,
.ab-device-wrap.has-custom-hero-image,
.ab-hero-main-image {
border-radius: 0 !important;
}
/* =========================
4. TOP背景は宇宙感を維持
========================= */
.ab-hero {
background:
linear-gradient(90deg, rgba(1,2,10,.88) 0%, rgba(3,6,18,.78) 38%, rgba(3,8,22,.54) 64%, rgba(1,2,10,.42) 100%),
radial-gradient(circle at 28% 42%, rgba(255,79,179,.18), transparent 36%),
radial-gradient(circle at 78% 34%, rgba(56,189,248,.20), transparent 34%),
linear-gradient(135deg,#01020a 0%,#071026 56%,#02030a 100%) !important;
}
/* =========================
5. もし追加CSSに古い .ab-hero-label-v23 が残っていても無効化
========================= */
.ab-hero-label-v23 {
display: initial !important;
padding: initial !important;
border: 0 !important;
border-radius: initial !important;
background: transparent !important;
box-shadow: none !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v27
楕円削除 + TOP宇宙背景復活版
========================================================= */
/*
V26で楕円は消えたが、宇宙背景が弱くなったため、
v27ではTOPヒーロー本体に cosmic-hero-bg.png を復活。
ただし、楕円・orbit・frame・ring系の装飾は引き続き無効化。
*/
/* =========================
1. TOP宇宙背景を復活
========================= */
body.home .ab-hero,
body.front-page .ab-hero,
.home .ab-hero,
.front-page .ab-hero,
.ab-hero {
position: relative !important;
overflow: hidden !important;
background:
linear-gradient(90deg, rgba(1,2,10,.78) 0%, rgba(3,6,18,.62) 38%, rgba(3,8,22,.42) 64%, rgba(1,2,10,.32) 100%),
radial-gradient(circle at 20% 42%, rgba(255,79,179,.18), transparent 32%),
radial-gradient(circle at 80% 30%, rgba(56,189,248,.18), transparent 34%),
url("assets/images/cosmic-hero-bg.png") center center / cover no-repeat !important;
background-color: #02030b !important;
}
/* =========================
2. ヒーロー内の矩形背景を透明化
宇宙背景が見えるようにする
========================= */
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-wrap,
.ab-hero-copy,
.ab-copy,
.ab-hero-text,
.ab-hero-visual,
.ab-device-wrap,
.ab-device-wrap.has-custom-hero-image,
.ab-hero-main-image,
.ab-hero-figure,
.ab-hero-media {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* =========================
3. TOPの大きな楕円・装飾枠を完全停止
========================= */
.ab-hero::before,
.ab-hero::after,
.ab-hero .ab-container::before,
.ab-hero .ab-container::after,
.ab-hero-grid::before,
.ab-hero-grid::after,
.ab-hero-inner::before,
.ab-hero-inner::after,
.ab-hero-wrap::before,
.ab-hero-wrap::after,
.ab-hero-copy::before,
.ab-hero-copy::after,
.ab-copy::before,
.ab-copy::after,
.ab-hero-text::before,
.ab-hero-text::after,
.ab-hero-visual::before,
.ab-hero-visual::after,
.ab-device-wrap::before,
.ab-device-wrap::after,
.ab-device-wrap.has-custom-hero-image::before,
.ab-device-wrap.has-custom-hero-image::after,
.ab-hero-main-image::before,
.ab-hero-main-image::after,
.ab-hero-figure::before,
.ab-hero-figure::after,
.ab-hero-media::before,
.ab-hero-media::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* orbit / ellipse / frame / ring / halo / outline 系の楕円装飾を停止 */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"],
.ab-hero [class*="ring"],
.ab-hero [class*="halo"],
.ab-hero [class*="outline"] {
display: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.ab-hero [class*="orbit"]::before,
.ab-hero [class*="orbit"]::after,
.ab-hero [class*="ellipse"]::before,
.ab-hero [class*="ellipse"]::after,
.ab-hero [class*="frame"]::before,
.ab-hero [class*="frame"]::after,
.ab-hero [class*="ring"]::before,
.ab-hero [class*="ring"]::after,
.ab-hero [class*="halo"]::before,
.ab-hero [class*="halo"]::after,
.ab-hero [class*="outline"]::before,
.ab-hero [class*="outline"]::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* =========================
4. 商品画像・文字は背景より前面へ
========================= */
.ab-hero .ab-hero-copy,
.ab-hero .ab-copy,
.ab-hero .ab-hero-text,
.ab-hero .ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image,
.ab-hero .ab-hero-main-image {
position: relative !important;
z-index: 2 !important;
}
/* 文字の視認性 */
.ab-hero h1,
.ab-hero .ab-hero-title {
color: #ffffff !important;
text-shadow:
0 4px 18px rgba(0,0,0,.58),
0 0 24px rgba(255,255,255,.12),
0 0 36px rgba(56,189,248,.10) !important;
}
.ab-hero p {
color: rgba(255,255,255,.92) !important;
text-shadow: 0 3px 14px rgba(0,0,0,.45) !important;
}
/* =========================
5. 小ラベル・ボタンは維持
========================= */
.ab-hero .ab-kicker,
.ab-hero .ab-hero-kicker-v24,
.ab-hero .ab-small-label-v25,
.ab-hero .ab-float,
.ab-hero .ab-btn,
.ab-hero a,
.ab-hero button {
position: relative !important;
z-index: 3 !important;
}
/* V23由来の巨大化対策 */
.ab-hero-label-v23 {
display: initial !important;
padding: initial !important;
border: 0 !important;
border-radius: initial !important;
background: transparent !important;
box-shadow: none !important;
}
/* =========================
6. スマホ背景
========================= */
@media (max-width: 920px) {
body.home .ab-hero,
body.front-page .ab-hero,
.home .ab-hero,
.front-page .ab-hero,
.ab-hero {
background:
linear-gradient(180deg, rgba(1,2,10,.88) 0%, rgba(3,6,18,.78) 56%, rgba(1,2,10,.60) 100%),
radial-gradient(circle at 35% 28%, rgba(255,79,179,.16), transparent 34%),
radial-gradient(circle at 70% 25%, rgba(56,189,248,.14), transparent 34%),
url("assets/images/cosmic-hero-bg.png") center top / cover no-repeat !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v28
小見出しラベル統一版
LIFE SCENE / ONLINE STORE / AIR BRIDGE PRODUCT / FAQ / NEWS を同一デザインへ
========================================================= */
/* 小見出しラベル共通デザイン */
.ab-small-label-v25,
.ab-small-label-v28,
.ab-section-label,
.ab-section-kicker,
.ab-section-eyebrow,
.ab-lifestyle .ab-kicker,
.ab-products .ab-kicker,
.ab-products .ab-section-kicker,
.ab-products .ab-section-label,
.ab-products .ab-eyebrow,
#products .ab-kicker,
#products .ab-section-kicker,
#products .ab-section-label,
#products .ab-eyebrow,
section[id*="products"] .ab-kicker,
section[id*="products"] .ab-section-kicker,
section[id*="products"] .ab-section-label,
section[id*="products"] .ab-eyebrow,
section[id*="scene"] .ab-kicker,
section[id*="scene"] .ab-section-kicker,
section[id*="scene"] .ab-section-label,
section[id*="scene"] .ab-eyebrow {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
width: auto !important;
max-width: 100% !important;
min-height: 54px !important;
padding: 15px 34px 15px 28px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .18em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
opacity: 1 !important;
overflow: hidden !important;
margin: 0 auto 32px !important;
}
/* 左の光るゴールドドット */
.ab-small-label-v25::before,
.ab-small-label-v28::before,
.ab-section-label::before,
.ab-section-kicker::before,
.ab-section-eyebrow::before,
.ab-lifestyle .ab-kicker::before,
.ab-products .ab-kicker::before,
.ab-products .ab-section-kicker::before,
.ab-products .ab-section-label::before,
.ab-products .ab-eyebrow::before,
#products .ab-kicker::before,
#products .ab-section-kicker::before,
#products .ab-section-label::before,
#products .ab-eyebrow::before,
section[id*="products"] .ab-kicker::before,
section[id*="products"] .ab-section-kicker::before,
section[id*="products"] .ab-section-label::before,
section[id*="products"] .ab-eyebrow::before,
section[id*="scene"] .ab-kicker::before,
section[id*="scene"] .ab-section-kicker::before,
section[id*="scene"] .ab-section-label::before,
section[id*="scene"] .ab-eyebrow::before {
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
border-radius: 999px !important;
background: #f2bf55 !important;
box-shadow:
0 0 0 9px rgba(242,191,85,.12),
0 0 18px rgba(242,191,85,.56),
0 0 28px rgba(242,191,85,.28) !important;
}
/* 余計なafter非表示 */
.ab-small-label-v25::after,
.ab-small-label-v28::after,
.ab-section-label::after,
.ab-section-kicker::after,
.ab-section-eyebrow::after,
.ab-lifestyle .ab-kicker::after,
.ab-products .ab-kicker::after,
.ab-products .ab-section-kicker::after,
.ab-products .ab-section-label::after,
.ab-products .ab-eyebrow::after,
#products .ab-kicker::after,
#products .ab-section-kicker::after,
#products .ab-section-label::after,
#products .ab-eyebrow::after,
section[id*="products"] .ab-kicker::after,
section[id*="products"] .ab-section-kicker::after,
section[id*="products"] .ab-section-label::after,
section[id*="products"] .ab-eyebrow::after,
section[id*="scene"] .ab-kicker::after,
section[id*="scene"] .ab-section-kicker::after,
section[id*="scene"] .ab-section-label::after,
section[id*="scene"] .ab-eyebrow::after {
display: none !important;
content: none !important;
}
/* ラベル内文字 */
.ab-small-label-v25 *,
.ab-small-label-v28 *,
.ab-section-label *,
.ab-section-kicker *,
.ab-section-eyebrow *,
.ab-lifestyle .ab-kicker *,
.ab-products .ab-kicker *,
.ab-products .ab-section-kicker *,
.ab-products .ab-section-label *,
.ab-products .ab-eyebrow *,
#products .ab-kicker *,
#products .ab-section-kicker *,
#products .ab-section-label *,
#products .ab-eyebrow *,
section[id*="products"] .ab-kicker *,
section[id*="products"] .ab-section-kicker *,
section[id*="products"] .ab-section-label *,
section[id*="products"] .ab-eyebrow *,
section[id*="scene"] .ab-kicker *,
section[id*="scene"] .ab-section-kicker *,
section[id*="scene"] .ab-section-label *,
section[id*="scene"] .ab-eyebrow * {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
opacity: 1 !important;
}
/* ONLINE STORE が単なるテキスト要素の場合、JSで付く専用クラス */
.ab-online-store-label-v28 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
width: auto !important;
max-width: 100% !important;
min-height: 54px !important;
padding: 15px 34px 15px 28px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .18em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
opacity: 1 !important;
overflow: hidden !important;
margin: 0 auto 32px !important;
}
.ab-online-store-label-v28::before {
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
border-radius: 999px !important;
background: #f2bf55 !important;
box-shadow:
0 0 0 9px rgba(242,191,85,.12),
0 0 18px rgba(242,191,85,.56),
0 0 28px rgba(242,191,85,.28) !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-small-label-v25,
.ab-small-label-v28,
.ab-section-label,
.ab-section-kicker,
.ab-section-eyebrow,
.ab-online-store-label-v28,
.ab-lifestyle .ab-kicker,
.ab-products .ab-kicker,
.ab-products .ab-section-kicker,
.ab-products .ab-section-label,
.ab-products .ab-eyebrow,
#products .ab-kicker,
#products .ab-section-kicker,
#products .ab-section-label,
#products .ab-eyebrow,
section[id*="products"] .ab-kicker,
section[id*="products"] .ab-section-kicker,
section[id*="products"] .ab-section-label,
section[id*="products"] .ab-eyebrow,
section[id*="scene"] .ab-kicker,
section[id*="scene"] .ab-section-kicker,
section[id*="scene"] .ab-section-label,
section[id*="scene"] .ab-eyebrow {
min-height: 44px !important;
padding: 11px 20px 11px 18px !important;
gap: 11px !important;
font-size: 13px !important;
letter-spacing: .12em !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v29
PRODUCT DESIGN ラベル統一追加版
========================================================= */
/* PRODUCT DESIGNもLIFE SCENEと同じピル型に統一 */
.ab-product-design-label-v29,
.ab-small-label-v29 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
width: auto !important;
max-width: 100% !important;
min-height: 54px !important;
padding: 15px 34px 15px 28px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .18em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
opacity: 1 !important;
overflow: hidden !important;
margin: 0 auto 32px !important;
}
.ab-product-design-label-v29::before,
.ab-small-label-v29::before {
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
border-radius: 999px !important;
background: #f2bf55 !important;
box-shadow:
0 0 0 9px rgba(242,191,85,.12),
0 0 18px rgba(242,191,85,.56),
0 0 28px rgba(242,191,85,.28) !important;
}
.ab-product-design-label-v29::after,
.ab-small-label-v29::after {
display: none !important;
content: none !important;
}
/* 念のためPRODUCT DESIGNを含む短いラベル要素の色を統一 */
.ab-product-design-label-v29 *,
.ab-small-label-v29 * {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
opacity: 1 !important;
}
/* 既存のPRODUCT DESIGNが金文字だけの場合も最低限見やすく */
section span,
section small,
section strong,
.ab-section span,
.ab-section small,
.ab-section strong {
text-rendering: optimizeLegibility;
}
/* スマホ */
@media (max-width: 620px) {
.ab-product-design-label-v29,
.ab-small-label-v29 {
min-height: 44px !important;
padding: 11px 20px 11px 18px !important;
gap: 11px !important;
font-size: 13px !important;
letter-spacing: .12em !important;
}
.ab-product-design-label-v29::before,
.ab-small-label-v29::before {
width: 11px !important;
height: 11px !important;
min-width: 11px !important;
box-shadow:
0 0 0 7px rgba(242,191,85,.12),
0 0 14px rgba(242,191,85,.50) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v30
HOW TO BUY / AMBASSADOR ラベル統一追加版
========================================================= */
/* HOW TO BUY / AMBASSADOR も共通ピル型に統一 */
.ab-howto-label-v30,
.ab-ambassador-label-v30,
.ab-small-label-v30 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
width: auto !important;
max-width: 100% !important;
min-height: 54px !important;
padding: 15px 34px 15px 28px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .18em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
opacity: 1 !important;
overflow: hidden !important;
margin: 0 auto 32px !important;
}
/* 左ドット */
.ab-howto-label-v30::before,
.ab-ambassador-label-v30::before,
.ab-small-label-v30::before {
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
border-radius: 999px !important;
background: #f2bf55 !important;
box-shadow:
0 0 0 9px rgba(242,191,85,.12),
0 0 18px rgba(242,191,85,.56),
0 0 28px rgba(242,191,85,.28) !important;
}
/* 余計なafter削除 */
.ab-howto-label-v30::after,
.ab-ambassador-label-v30::after,
.ab-small-label-v30::after {
display: none !important;
content: none !important;
}
.ab-howto-label-v30 *,
.ab-ambassador-label-v30 *,
.ab-small-label-v30 * {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
opacity: 1 !important;
}
/* 既存v28/v29ラベルとも完全統一 */
.ab-small-label-v25,
.ab-small-label-v28,
.ab-small-label-v29,
.ab-product-design-label-v29,
.ab-online-store-label-v28 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
min-height: 54px !important;
padding: 15px 34px 15px 28px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-howto-label-v30,
.ab-ambassador-label-v30,
.ab-small-label-v30,
.ab-small-label-v25,
.ab-small-label-v28,
.ab-small-label-v29,
.ab-product-design-label-v29,
.ab-online-store-label-v28 {
min-height: 44px !important;
padding: 11px 20px 11px 18px !important;
gap: 11px !important;
font-size: 13px !important;
letter-spacing: .12em !important;
}
.ab-howto-label-v30::before,
.ab-ambassador-label-v30::before,
.ab-small-label-v30::before {
width: 11px !important;
height: 11px !important;
min-width: 11px !important;
box-shadow:
0 0 0 7px rgba(242,191,85,.12),
0 0 14px rgba(242,191,85,.50) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v31
NEWSラベルだけ前のシンプル表示へ戻す
========================================================= */
/*
V30で NEWS まで大型ピル型になったため、
NEWS部分だけ小さめの金文字ラベルへ戻します。
HOW TO BUY / AMBASSADOR / PRODUCT DESIGN / LIFE SCENE / ONLINE STORE は
ピル型のまま維持します。
*/
/* NEWSカード上部のNEWSラベルだけ、ピル型解除 */
.ab-news .ab-small-label-v25,
.ab-news .ab-small-label-v28,
.ab-news .ab-small-label-v29,
.ab-news .ab-small-label-v30,
.ab-news .ab-section-label,
.ab-news .ab-section-kicker,
.ab-news .ab-section-eyebrow,
#news .ab-small-label-v25,
#news .ab-small-label-v28,
#news .ab-small-label-v29,
#news .ab-small-label-v30,
#news .ab-section-label,
#news .ab-section-kicker,
#news .ab-section-eyebrow,
section[id*="news"] .ab-small-label-v25,
section[id*="news"] .ab-small-label-v28,
section[id*="news"] .ab-small-label-v29,
section[id*="news"] .ab-small-label-v30,
section[id*="news"] .ab-section-label,
section[id*="news"] .ab-section-kicker,
section[id*="news"] .ab-section-eyebrow,
.ab-news-card .ab-small-label-v25,
.ab-news-card .ab-small-label-v28,
.ab-news-card .ab-small-label-v29,
.ab-news-card .ab-small-label-v30,
.news-card .ab-small-label-v25,
.news-card .ab-small-label-v28,
.news-card .ab-small-label-v29,
.news-card .ab-small-label-v30 {
display: block !important;
width: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #d8b75d !important;
-webkit-text-fill-color: #d8b75d !important;
font-size: 18px !important;
font-weight: 900 !important;
letter-spacing: .28em !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
text-shadow: 0 0 10px rgba(216,183,93,.24) !important;
}
/* NEWSの左ドットを消す */
.ab-news .ab-small-label-v25::before,
.ab-news .ab-small-label-v28::before,
.ab-news .ab-small-label-v29::before,
.ab-news .ab-small-label-v30::before,
.ab-news .ab-section-label::before,
.ab-news .ab-section-kicker::before,
.ab-news .ab-section-eyebrow::before,
#news .ab-small-label-v25::before,
#news .ab-small-label-v28::before,
#news .ab-small-label-v29::before,
#news .ab-small-label-v30::before,
#news .ab-section-label::before,
#news .ab-section-kicker::before,
#news .ab-section-eyebrow::before,
section[id*="news"] .ab-small-label-v25::before,
section[id*="news"] .ab-small-label-v28::before,
section[id*="news"] .ab-small-label-v29::before,
section[id*="news"] .ab-small-label-v30::before,
section[id*="news"] .ab-section-label::before,
section[id*="news"] .ab-section-kicker::before,
section[id*="news"] .ab-section-eyebrow::before,
.ab-news-card .ab-small-label-v25::before,
.ab-news-card .ab-small-label-v28::before,
.ab-news-card .ab-small-label-v29::before,
.ab-news-card .ab-small-label-v30::before,
.news-card .ab-small-label-v25::before,
.news-card .ab-small-label-v28::before,
.news-card .ab-small-label-v29::before,
.news-card .ab-small-label-v30::before {
display: none !important;
content: none !important;
}
/* NEWSラベル内の文字色 */
.ab-news .ab-small-label-v25 *,
.ab-news .ab-small-label-v28 *,
.ab-news .ab-small-label-v29 *,
.ab-news .ab-small-label-v30 *,
#news .ab-small-label-v25 *,
#news .ab-small-label-v28 *,
#news .ab-small-label-v29 *,
#news .ab-small-label-v30 *,
section[id*="news"] .ab-small-label-v25 *,
section[id*="news"] .ab-small-label-v28 *,
section[id*="news"] .ab-small-label-v29 *,
section[id*="news"] .ab-small-label-v30 *,
.ab-news-card .ab-small-label-v25 *,
.ab-news-card .ab-small-label-v28 *,
.ab-news-card .ab-small-label-v29 *,
.ab-news-card .ab-small-label-v30 *,
.news-card .ab-small-label-v25 *,
.news-card .ab-small-label-v28 *,
.news-card .ab-small-label-v29 *,
.news-card .ab-small-label-v30 * {
color: #d8b75d !important;
-webkit-text-fill-color: #d8b75d !important;
}
/* NEWS画像プレースホルダー内のNEWSも中央小さめに戻す */
.ab-news-card .ab-thumb .ab-small-label-v25,
.ab-news-card .ab-thumb .ab-small-label-v28,
.ab-news-card .ab-thumb .ab-small-label-v29,
.ab-news-card .ab-thumb .ab-small-label-v30,
.news-card .news-thumb .ab-small-label-v25,
.news-card .news-thumb .ab-small-label-v28,
.news-card .news-thumb .ab-small-label-v29,
.news-card .news-thumb .ab-small-label-v30,
.ab-news-card [class*="thumb"] .ab-small-label-v25,
.ab-news-card [class*="thumb"] .ab-small-label-v28,
.ab-news-card [class*="thumb"] .ab-small-label-v29,
.ab-news-card [class*="thumb"] .ab-small-label-v30,
.news-card [class*="thumb"] .ab-small-label-v25,
.news-card [class*="thumb"] .ab-small-label-v28,
.news-card [class*="thumb"] .ab-small-label-v29,
.news-card [class*="thumb"] .ab-small-label-v30 {
display: block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 22px !important;
font-weight: 900 !important;
letter-spacing: .28em !important;
text-align: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* JSでNEWSにクラスが付いても最終的に解除 */
.ab-small-label-v30[data-label="NEWS"],
.ab-small-label-v29[data-label="NEWS"],
.ab-small-label-v28[data-label="NEWS"] {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v33
右側メイン画像：写真カード収め版
- V32のように画像は表示する
- ただしTOPヒーロー内に収めて崩れないようにする
- 浮遊ラベルは写真に被らないよう非表示/整理
========================================================= */
/* =========================
1. TOPヒーローの2カラムを安定化
========================= */
.ab-hero {
position: relative !important;
overflow: hidden !important;
}
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-wrap {
width: min(1440px, calc(100% - 56px)) !important;
max-width: 1440px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, .78fr) !important;
gap: clamp(28px, 4vw, 72px) !important;
align-items: center !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
position: relative !important;
z-index: 3 !important;
max-width: 760px !important;
min-width: 0 !important;
}
.ab-hero h1,
.ab-hero .ab-hero-title {
max-width: 820px !important;
overflow-wrap: normal !important;
word-break: keep-all !important;
}
/* =========================
2. 右側画像を写真カードとして収める
========================= */
.ab-hero-visual,
.ab-hero .ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: 560px !important;
min-width: 0 !important;
justify-self: end !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* カスタム右側画像本体 */
.ab-hero .ab-hero-main-image {
display: block !important;
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: 560px !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 4 / 3 !important;
margin: 0 auto !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: rgba(5,10,28,.70) !important;
border-radius: 30px !important;
border: 1px solid rgba(103,232,249,.22) !important;
box-shadow:
0 24px 70px rgba(0,0,0,.38),
0 0 34px rgba(56,189,248,.12) !important;
overflow: hidden !important;
}
/* 余計なオーバーレイや楕円を出さない */
.ab-hero .ab-hero-main-image::before,
.ab-hero .ab-hero-main-image::after,
.ab-hero .ab-device-wrap::before,
.ab-hero .ab-device-wrap::after,
.ab-hero .ab-device-wrap.has-custom-hero-image::before,
.ab-hero .ab-device-wrap.has-custom-hero-image::after,
.ab-hero-visual::before,
.ab-hero-visual::after {
display: none !important;
content: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* =========================
3. 右側画像用の浮遊ラベルは非表示
写真自体に文字が入っているため被り防止
========================= */
.ab-hero .ab-float,
.ab-hero .ab-float.one,
.ab-hero .ab-float.two,
.ab-hero .ab-device-wrap .ab-float,
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float {
display: none !important;
visibility: hidden !important;
}
/* =========================
4. 楕円装飾は引き続き削除
========================= */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"],
.ab-hero [class*="ring"],
.ab-hero [class*="halo"],
.ab-hero [class*="outline"] {
display: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.ab-hero [class*="orbit"]::before,
.ab-hero [class*="orbit"]::after,
.ab-hero [class*="ellipse"]::before,
.ab-hero [class*="ellipse"]::after,
.ab-hero [class*="frame"]::before,
.ab-hero [class*="frame"]::after,
.ab-hero [class*="ring"]::before,
.ab-hero [class*="ring"]::after,
.ab-hero [class*="halo"]::before,
.ab-hero [class*="halo"]::after,
.ab-hero [class*="outline"]::before,
.ab-hero [class*="outline"]::after {
display: none !important;
content: none !important;
}
/* =========================
5. 背景宇宙感は維持
========================= */
.ab-hero {
background:
linear-gradient(90deg, rgba(1,2,10,.78) 0%, rgba(3,6,18,.58) 38%, rgba(3,8,22,.35) 64%, rgba(1,2,10,.30) 100%),
radial-gradient(circle at 22% 42%, rgba(255,79,179,.16), transparent 32%),
radial-gradient(circle at 78% 30%, rgba(56,189,248,.16), transparent 34%),
url("assets/images/cosmic-hero-bg.png") center center / cover no-repeat !important;
background-color: #02030b !important;
}
/* =========================
6. 文字が左に切れないよう補正
========================= */
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
padding-left: clamp(8px, 2vw, 28px) !important;
}
.ab-hero .ab-hero-title,
.ab-hero h1 {
line-height: 1.08 !important;
}
/* =========================
7. タブレット/スマホ
========================= */
@media (max-width: 1100px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
justify-self: center !important;
max-width: 560px !important;
margin-top: 32px !important;
}
.ab-hero .ab-hero-main-image {
max-width: 560px !important;
aspect-ratio: 4 / 3 !important;
}
}
@media (max-width: 620px) {
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-wrap {
width: min(100% - 28px, 100%) !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
padding-left: 0 !important;
}
.ab-hero .ab-hero-main-image {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 4 / 3 !important;
border-radius: 22px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v34
右側メイン画像 強制復元版
- 過去CSSの background: transparent !important に負けないよう
JSで background-image を inline !important 復元します
========================================================= */
/* 右側画像枠を表示状態に固定 */
.ab-hero .ab-device-wrap.has-custom-hero-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: 560px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* 右側メイン画像本体 */
.ab-hero .ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34 {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 3 !important;
width: 100% !important;
max-width: 560px !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 4 / 3 !important;
margin: 0 auto !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: rgba(5,10,28,.72) !important;
border-radius: 30px !important;
border: 1px solid rgba(103,232,249,.22) !important;
box-shadow:
0 24px 70px rgba(0,0,0,.38),
0 0 34px rgba(56,189,248,.12) !important;
overflow: hidden !important;
}
/* 背景画像を持っている時だけ写真カード表示を安定 */
.ab-hero-main-image.ab-right-hero-image-v34.has-bg-v34 {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* 右側写真と被る浮遊ラベルは非表示 */
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float,
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float.one,
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float.two,
.ab-hero .ab-hero-visual .ab-float {
display: none !important;
visibility: hidden !important;
}
/* 疑似要素による上書きを停止 */
.ab-hero .ab-hero-main-image::before,
.ab-hero .ab-hero-main-image::after,
.ab-hero-main-image.ab-right-hero-image-v34::before,
.ab-hero-main-image.ab-right-hero-image-v34::after {
display: none !important;
content: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* ヒーロー2カラム配置 */
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, .78fr) !important;
gap: clamp(28px, 4vw, 72px) !important;
align-items: center !important;
}
/* 左テキストが切れないように */
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
position: relative !important;
z-index: 3 !important;
max-width: 760px !important;
min-width: 0 !important;
}
/* スマホ */
@media (max-width: 1100px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero .ab-device-wrap.has-custom-hero-image {
justify-self: center !important;
max-width: 560px !important;
margin-top: 32px !important;
}
}
@media (max-width: 620px) {
.ab-hero .ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34 {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 4 / 3 !important;
border-radius: 22px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v35
右側メイン画像 ![]()
直接出力版
- background-image方式をやめ、カスタマイザー画像をimgタグで表示
- これでCSS上書きに負けず画像が出ます
========================================================= */
/* 旧background画像枠は隠す。v35のimgカードだけ使う */
.ab-hero .ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34 {
display: none !important;
}
/* v35右側画像カード */
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card {
display: block !important;
position: relative !important;
z-index: 5 !important;
width: 100% !important;
max-width: 560px !important;
margin: 0 auto !important;
padding: 0 !important;
border-radius: 30px !important;
overflow: hidden !important;
background: rgba(5,10,28,.72) !important;
border: 1px solid rgba(103,232,249,.22) !important;
box-shadow:
0 24px 70px rgba(0,0,0,.38),
0 0 34px rgba(56,189,248,.12) !important;
}
/* v35画像本体 */
.ab-hero .ab-v35-right-image,
.ab-v35-right-image {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 3 !important;
object-fit: cover !important;
object-position: center center !important;
visibility: visible !important;
opacity: 1 !important;
max-width: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 右側エリア */
.ab-hero-visual,
.ab-hero .ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 4 !important;
width: 100% !important;
max-width: 580px !important;
justify-self: end !important;
align-self: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* 写真に被る浮遊ラベルは非表示 */
.ab-hero .ab-float,
.ab-hero .ab-float.one,
.ab-hero .ab-float.two,
.ab-hero .ab-device-wrap .ab-float,
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float,
.ab-hero .ab-hero-visual .ab-float {
display: none !important;
visibility: hidden !important;
}
/* 2カラム安定 */
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, .78fr) !important;
gap: clamp(28px, 4vw, 72px) !important;
align-items: center !important;
}
/* 左テキストが切れないように */
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
position: relative !important;
z-index: 6 !important;
max-width: 780px !important;
min-width: 0 !important;
padding-left: clamp(8px, 2vw, 28px) !important;
}
/* 楕円装飾は維持して削除 */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"],
.ab-hero [class*="ring"],
.ab-hero [class*="halo"],
.ab-hero [class*="outline"] {
display: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* スマホ */
@media (max-width: 1100px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
justify-self: center !important;
max-width: 560px !important;
margin-top: 32px !important;
}
}
@media (max-width: 620px) {
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card {
max-width: 100% !important;
border-radius: 22px !important;
}
.ab-hero .ab-v35-right-image,
.ab-v35-right-image {
aspect-ratio: 4 / 3 !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
padding-left: 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v36
右側メイン画像 修正版
- カスタマイザー保存キー ab_hero_device_image に対応
- 画像を ![]()
直接表示
========================================================= */
/* 旧background画像枠は非表示、v36カードを使用 */
.ab-hero .ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34 {
display: none !important;
}
/* v36右側画像カード */
.ab-hero .ab-v36-right-image-card,
.ab-v36-right-image-card,
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card {
display: block !important;
position: relative !important;
z-index: 5 !important;
width: 100% !important;
max-width: 560px !important;
margin: 0 auto !important;
padding: 0 !important;
border-radius: 30px !important;
overflow: hidden !important;
background: rgba(5,10,28,.72) !important;
border: 1px solid rgba(103,232,249,.22) !important;
box-shadow:
0 24px 70px rgba(0,0,0,.38),
0 0 34px rgba(56,189,248,.12) !important;
}
/* v36画像本体 */
.ab-hero .ab-v36-right-image,
.ab-v36-right-image,
.ab-hero .ab-v35-right-image,
.ab-v35-right-image {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 3 !important;
object-fit: cover !important;
object-position: center center !important;
visibility: visible !important;
opacity: 1 !important;
max-width: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 右側エリア */
.ab-hero-visual,
.ab-hero .ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 4 !important;
width: 100% !important;
max-width: 580px !important;
justify-self: end !important;
align-self: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* 写真に被る浮遊ラベルは非表示 */
.ab-hero .ab-float,
.ab-hero .ab-float.one,
.ab-hero .ab-float.two,
.ab-hero .ab-device-wrap .ab-float,
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float,
.ab-hero .ab-hero-visual .ab-float {
display: none !important;
visibility: hidden !important;
}
/* 2カラム安定 */
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, .78fr) !important;
gap: clamp(28px, 4vw, 72px) !important;
align-items: center !important;
}
/* 左テキストが切れないように */
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
position: relative !important;
z-index: 6 !important;
max-width: 780px !important;
min-width: 0 !important;
padding-left: clamp(8px, 2vw, 28px) !important;
}
/* スマホ */
@media (max-width: 1100px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
justify-self: center !important;
max-width: 560px !important;
margin-top: 32px !important;
}
}
@media (max-width: 620px) {
.ab-hero .ab-v36-right-image-card,
.ab-v36-right-image-card,
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card {
max-width: 100% !important;
border-radius: 22px !important;
}
.ab-hero .ab-v36-right-image,
.ab-v36-right-image,
.ab-hero .ab-v35-right-image,
.ab-v35-right-image {
aspect-ratio: 4 / 3 !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
padding-left: 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37
透過PNG対応版
- 右側メイン画像を透過PNGとして1枚だけ表示
- 旧background-image方式・写真カード方式を非表示
- object-fit: contain で宇宙背景になじませる
========================================================= */
/* 旧方式の右側画像を完全に非表示：二重表示防止 */
.ab-hero .ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34,
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card,
.ab-hero .ab-v36-right-image-card,
.ab-v36-right-image-card {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 右側ビジュアル領域 */
.ab-hero-visual,
.ab-hero .ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 4 !important;
width: 100% !important;
max-width: 620px !important;
justify-self: end !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* 透過PNGラッパー */
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 8 !important;
width: min(42vw, 620px) !important;
max-width: 620px !important;
min-width: 320px !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* 透過PNG本体 */
.ab-hero .ab-v37-device-png,
.ab-v37-device-png {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 620px !important;
max-height: 620px !important;
object-fit: contain !important;
object-position: center center !important;
visibility: visible !important;
opacity: 1 !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
filter:
drop-shadow(0 28px 46px rgba(0,0,0,.42))
drop-shadow(0 0 24px rgba(56,189,248,.14)) !important;
}
/* 写真用の浮遊ラベルは非表示 */
.ab-hero .ab-float,
.ab-hero .ab-float.one,
.ab-hero .ab-float.two,
.ab-hero .ab-device-wrap .ab-float,
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float,
.ab-hero .ab-hero-visual .ab-float {
display: none !important;
visibility: hidden !important;
}
/* ヒーロー2カラム配置 */
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.02fr) minmax(360px, .86fr) !important;
gap: clamp(28px, 4vw, 76px) !important;
align-items: center !important;
}
/* 左テキスト */
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
position: relative !important;
z-index: 9 !important;
max-width: 780px !important;
min-width: 0 !important;
padding-left: clamp(8px, 2vw, 28px) !important;
}
/* 楕円装飾は出さない */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"],
.ab-hero [class*="ring"],
.ab-hero [class*="halo"],
.ab-hero [class*="outline"] {
display: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* スマホ・タブレット */
@media (max-width: 1100px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
justify-self: center !important;
max-width: 620px !important;
margin-top: 34px !important;
}
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
width: min(78vw, 560px) !important;
min-width: 0 !important;
}
}
@media (max-width: 620px) {
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
width: min(92vw, 430px) !important;
}
.ab-hero .ab-v37-device-png,
.ab-v37-device-png {
max-height: 430px !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
padding-left: 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.1
二重表示完全停止版
- 透過PNGだけを1枚表示
- 旧右画像カード / background画像 / floating label を停止
========================================================= */
/* 旧右側画像表示を完全停止 */
.ab-hero .ab-hero-main-image,
.ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34,
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card,
.ab-hero .ab-v36-right-image-card,
.ab-v36-right-image-card,
.ab-hero .ab-v35-right-image,
.ab-v35-right-image,
.ab-hero .ab-v36-right-image,
.ab-v36-right-image,
.ab-hero .ab-glow,
.ab-hero .ab-device,
.ab-hero .ab-float,
.ab-hero .ab-float.one,
.ab-hero .ab-float.two {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* 右カラム */
.ab-hero .ab-device-wrap-v371,
.ab-device-wrap-v371,
.ab-hero .ab-device-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 620px !important;
min-height: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
position: relative !important;
z-index: 8 !important;
overflow: visible !important;
justify-self: end !important;
}
/* V37.1 PNGラッパー */
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: min(42vw, 620px) !important;
max-width: 620px !important;
min-width: 280px !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
position: relative !important;
z-index: 10 !important;
}
/* 透過PNG本体 */
.ab-hero .ab-v37-device-png,
.ab-v37-device-png {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 620px !important;
max-height: none !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
visibility: visible !important;
opacity: 1 !important;
filter:
drop-shadow(0 24px 44px rgba(0,0,0,.38))
drop-shadow(0 0 24px rgba(56,189,248,.12)) !important;
}
/* 右側はV37 PNG以外を出さない */
.ab-hero .ab-device-wrap-v371 > *:not(.ab-v37-device-png-wrap) {
display: none !important;
}
/* 2カラム安定化 */
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.02fr) minmax(360px, .86fr) !important;
gap: clamp(28px, 4vw, 76px) !important;
align-items: center !important;
}
/* 左テキスト */
.ab-hero-copy,
.ab-copy,
.ab-hero-text,
.ab-hero .ab-container > div:first-child {
position: relative !important;
z-index: 9 !important;
min-width: 0 !important;
}
/* 楕円装飾は出さない */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"],
.ab-hero [class*="ring"],
.ab-hero [class*="halo"],
.ab-hero [class*="outline"] {
display: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* タブレット */
@media (max-width: 1100px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero .ab-device-wrap-v371,
.ab-device-wrap-v371,
.ab-hero .ab-device-wrap {
justify-self: center !important;
max-width: 620px !important;
margin-top: 34px !important;
}
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
width: min(70vw, 520px) !important;
min-width: 0 !important;
}
}
/* スマホ */
@media (max-width: 768px) {
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
width: min(88vw, 420px) !important;
min-width: 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.2
画像エリア透明背景拡張版
- V37.1の右側PNG 1枚表示を維持
- PRODUCT DESIGN / FEATURE 周辺の画像カード背景を透明化
- 透過PNG / 透過WebP が宇宙背景になじむように調整
========================================================= */
/* =========================
1. TOP右側画像はV37.1と同じく1枚だけ
========================= */
.ab-hero .ab-hero-main-image,
.ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34,
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card,
.ab-hero .ab-v36-right-image-card,
.ab-v36-right-image-card,
.ab-hero .ab-v35-right-image,
.ab-v35-right-image,
.ab-hero .ab-v36-right-image,
.ab-v36-right-image,
.ab-hero .ab-glow,
.ab-hero .ab-device,
.ab-hero .ab-float,
.ab-hero .ab-float.one,
.ab-hero .ab-float.two {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: min(42vw, 620px) !important;
max-width: 620px !important;
min-width: 280px !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
position: relative !important;
z-index: 10 !important;
}
.ab-hero .ab-v37-device-png,
.ab-v37-device-png {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 620px !important;
max-height: none !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
visibility: visible !important;
opacity: 1 !important;
filter:
drop-shadow(0 24px 44px rgba(0,0,0,.38))
drop-shadow(0 0 24px rgba(56,189,248,.12)) !important;
}
/* =========================
2. PRODUCT DESIGN / FEATURE系の画像カード背景を透明化
スクショの濃紺四角カードを消す
========================= */
.ab-feature-visual,
.ab-feature-visual.has-image,
.ab-feature-wrap .ab-feature-visual,
.ab-feature-wrap .ab-feature-visual.has-image,
#feature .ab-feature-visual,
#feature .ab-feature-visual.has-image,
section[id*="feature"] .ab-feature-visual,
section[id*="feature"] .ab-feature-visual.has-image,
.ab-design-visual,
.ab-product-design-visual,
.ab-visual-card,
.ab-visual-panel,
.ab-image-card,
.ab-image-panel {
background-color: transparent !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center center !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible !important;
}
/* 背景画像指定がある場合、画像そのものは消さずにcontain表示 */
.ab-feature-visual.has-image,
.ab-feature-wrap .ab-feature-visual.has-image,
#feature .ab-feature-visual.has-image,
section[id*="feature"] .ab-feature-visual.has-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: clamp(320px, 42vw, 620px) !important;
background-size: contain !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
filter:
drop-shadow(0 24px 44px rgba(0,0,0,.34))
drop-shadow(0 0 22px rgba(56,189,248,.10)) !important;
}
/* 画像カードの疑似要素背景を停止 */
.ab-feature-visual::before,
.ab-feature-visual::after,
.ab-feature-visual.has-image::before,
.ab-feature-visual.has-image::after,
.ab-feature-wrap .ab-feature-visual::before,
.ab-feature-wrap .ab-feature-visual::after,
#feature .ab-feature-visual::before,
#feature .ab-feature-visual::after,
.ab-design-visual::before,
.ab-design-visual::after,
.ab-product-design-visual::before,
.ab-product-design-visual::after,
.ab-visual-card::before,
.ab-visual-card::after,
.ab-visual-panel::before,
.ab-visual-panel::after,
.ab-image-card::before,
.ab-image-card::after,
.ab-image-panel::before,
.ab-image-panel::after {
display: none !important;
content: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* デフォルト疑似デバイスを非表示 */
.ab-feature-visual .ab-device,
.ab-feature-visual .ab-glow,
#feature .ab-device,
#feature .ab-glow,
section[id*="feature"] .ab-device,
section[id*="feature"] .ab-glow {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* =========================
3. feature画像がimgタグ出力の場合も透明対応
========================= */
.ab-feature-visual img,
.ab-feature-wrap .ab-feature-visual img,
#feature .ab-feature-visual img,
section[id*="feature"] .ab-feature-visual img,
.ab-design-visual img,
.ab-product-design-visual img,
.ab-visual-card img,
.ab-visual-panel img,
.ab-image-card img,
.ab-image-panel img {
display: block !important;
width: 100% !important;
max-width: 620px !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter:
drop-shadow(0 24px 44px rgba(0,0,0,.34))
drop-shadow(0 0 22px rgba(56,189,248,.10)) !important;
}
/* =========================
4. featureセクション全体は宇宙背景を維持
========================= */
#feature,
section[id*="feature"],
.ab-section:has(.ab-feature-wrap) {
background:
linear-gradient(90deg, rgba(1,2,10,.56), rgba(8,18,42,.30)),
radial-gradient(circle at 18% 35%, rgba(236,72,153,.14), transparent 30%),
radial-gradient(circle at 78% 30%, rgba(56,189,248,.12), transparent 34%) !important;
background-color: transparent !important;
}
/* 古い大きい角丸パネルが残る場合は透明化 */
.ab-feature-wrap,
#feature .ab-feature-wrap,
section[id*="feature"] .ab-feature-wrap {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* =========================
5. スマホ調整
========================= */
@media (max-width: 900px) {
.ab-feature-visual.has-image,
.ab-feature-wrap .ab-feature-visual.has-image,
#feature .ab-feature-visual.has-image,
section[id*="feature"] .ab-feature-visual.has-image {
min-height: clamp(260px, 78vw, 480px) !important;
background-size: contain !important;
}
}
@media (max-width: 768px) {
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
width: min(88vw, 420px) !important;
min-width: 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.3
商品カード：数量・カゴ・お問い合わせボタン配置修正版
========================================================= */
/* 商品カード内のフォーム・購入エリア */
.ab-product-card form,
.ab-product-card .cart,
.ab-product-card .ab-cart-form,
.ab-product-card form[action],
.ab-product-card .eshop-cart-area,
.ab-product-card .eshop-cart-area form,
.ab-products form,
.ab-products .cart,
.ab-products .eshop-cart-area,
.ab-products .eshop-cart-area form,
#products form,
#products .cart,
#products .eshop-cart-area,
#products .eshop-cart-area form {
display: grid !important;
grid-template-columns: 78px minmax(260px, 500px) !important;
column-gap: 28px !important;
row-gap: 26px !important;
align-items: center !important;
justify-content: start !important;
width: 100% !important;
}
/* 数量ラッパー */
.ab-product-card .quantity,
.ab-product-card p.quantity,
.ab-product-card .cart_quantity,
.ab-product-card td.quantity,
.ab-products .quantity,
.ab-products p.quantity,
.ab-products .cart_quantity,
.ab-products td.quantity,
#products .quantity,
#products p.quantity,
#products .cart_quantity,
#products td.quantity {
grid-column: 1 !important;
grid-row: 1 !important;
width: 78px !important;
min-width: 78px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
/* 数量入力欄 */
.ab-product-card input[type="number"],
.ab-product-card input.qty,
.ab-product-card input[name*="quantity"],
.ab-product-card input[name*="qty"],
.ab-products input[type="number"],
.ab-products input.qty,
.ab-products input[name*="quantity"],
.ab-products input[name*="qty"],
#products input[type="number"],
#products input.qty,
#products input[name*="quantity"],
#products input[name*="qty"] {
width: 78px !important;
height: 66px !important;
min-width: 78px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
font-size: 34px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: rgba(255,255,255,.08) !important;
border: 2px solid rgba(120,180,255,.55) !important;
border-radius: 6px !important;
box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset,0 0 18px rgba(56,189,248,.10) !important;
}
/* カゴに入れるボタン */
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"],
.ab-products .single_add_to_cart_button,
.ab-products .add_to_cart_button,
.ab-products button[type="submit"],
.ab-products input[type="submit"],
#products .single_add_to_cart_button,
#products .add_to_cart_button,
#products button[type="submit"],
#products input[type="submit"] {
grid-column: 2 !important;
grid-row: 1 !important;
width: min(100%, 500px) !important;
min-width: 260px !important;
height: 72px !important;
margin: 0 !important;
padding: 0 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
}
/* お問い合わせボタン */
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product-card a[href*="mail"],
.ab-products .ab-contact-button,
.ab-products .ab-inquiry-button,
.ab-products .ab-item-contact,
.ab-products a[href*="contact"],
.ab-products a[href*="inquiry"],
.ab-products a[href*="mail"],
#products .ab-contact-button,
#products .ab-inquiry-button,
#products .ab-item-contact,
#products a[href*="contact"],
#products a[href*="inquiry"],
#products a[href*="mail"] {
grid-column: 1 / 3 !important;
grid-row: 2 !important;
width: min(100%, 430px) !important;
min-width: 260px !important;
height: 64px !important;
margin: 4px 0 0 78px !important;
padding: 0 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
}
/* 旧inline-block配置・絶対配置の残りを解除 */
.ab-product-card .quantity,
.ab-product-card button,
.ab-product-card input,
.ab-product-card a,
.ab-products .quantity,
.ab-products button,
.ab-products input,
.ab-products a,
#products .quantity,
#products button,
#products input,
#products a {
position: relative !important;
box-sizing: border-box !important;
}
@media (max-width: 620px) {
.ab-product-card form,
.ab-product-card .cart,
.ab-product-card .ab-cart-form,
.ab-product-card form[action],
.ab-product-card .eshop-cart-area,
.ab-product-card .eshop-cart-area form,
.ab-products form,
.ab-products .cart,
.ab-products .eshop-cart-area,
.ab-products .eshop-cart-area form,
#products form,
#products .cart,
#products .eshop-cart-area,
#products .eshop-cart-area form {
grid-template-columns: 64px 1fr !important;
column-gap: 16px !important;
row-gap: 20px !important;
}
.ab-product-card .quantity,
.ab-product-card p.quantity,
.ab-product-card .cart_quantity,
.ab-product-card td.quantity,
.ab-products .quantity,
.ab-products p.quantity,
.ab-products .cart_quantity,
.ab-products td.quantity,
#products .quantity,
#products p.quantity,
#products .cart_quantity,
#products td.quantity {
width: 64px !important;
min-width: 64px !important;
}
.ab-product-card input[type="number"],
.ab-product-card input.qty,
.ab-product-card input[name*="quantity"],
.ab-product-card input[name*="qty"],
.ab-products input[type="number"],
.ab-products input.qty,
.ab-products input[name*="quantity"],
.ab-products input[name*="qty"],
#products input[type="number"],
#products input.qty,
#products input[name*="quantity"],
#products input[name*="qty"] {
width: 64px !important;
height: 58px !important;
min-width: 64px !important;
font-size: 30px !important;
}
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"],
.ab-products .single_add_to_cart_button,
.ab-products .add_to_cart_button,
.ab-products button[type="submit"],
.ab-products input[type="submit"],
#products .single_add_to_cart_button,
#products .add_to_cart_button,
#products button[type="submit"],
#products input[type="submit"] {
width: 100% !important;
min-width: 0 !important;
height: 64px !important;
padding: 0 18px !important;
}
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product-card a[href*="mail"],
.ab-products .ab-contact-button,
.ab-products .ab-inquiry-button,
.ab-products .ab-item-contact,
.ab-products a[href*="contact"],
.ab-products a[href*="inquiry"],
.ab-products a[href*="mail"],
#products .ab-contact-button,
#products .ab-inquiry-button,
#products .ab-item-contact,
#products a[href*="contact"],
#products a[href*="inquiry"],
#products a[href*="mail"] {
width: 100% !important;
min-width: 0 !important;
height: 60px !important;
margin: 4px 0 0 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.4
商品カード：ボタンはみ出し修正版
========================================================= */
/*
V37.3で間隔は確保できたが、商品カード幅に対して
カゴボタン・問い合わせボタンが大きすぎて右側が切れるため、
カード内に収まるよう幅・grid・余白を再調整。
*/
/* 商品カードの中身が横にはみ出ないように */
.ab-product-card,
.ab-products .ab-product-card,
#products .ab-product-card,
.ab-product-item,
.ab-products .ab-product-item,
#products .ab-product-item {
overflow: hidden !important;
box-sizing: border-box !important;
}
/* 商品カード内のフォーム・購入エリアをカード幅に固定 */
.ab-product-card form,
.ab-product-card .cart,
.ab-product-card .ab-cart-form,
.ab-product-card form[action],
.ab-product-card .eshop-cart-area,
.ab-product-card .eshop-cart-area form,
.ab-products .ab-product-card form,
.ab-products .ab-product-card .cart,
.ab-products .ab-product-card .eshop-cart-area,
.ab-products .ab-product-card .eshop-cart-area form,
#products .ab-product-card form,
#products .ab-product-card .cart,
#products .ab-product-card .eshop-cart-area,
#products .ab-product-card .eshop-cart-area form {
display: grid ![Truncated]
/* Mobile spacing and product-title refinement — 2026-08-12 */
@media (max-width: 620px) {
.ab-section {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
#scene .ab-title,
#products .ab-title,
#ambassador .ab-title,
#news .ab-title {
margin-bottom: 24px !important;
}
#scene .ab-scene {
min-height: 0 !important;
padding: 22px !important;
}
#scene .ab-scene strong {
margin-bottom: 8px !important;
}
#products .ab-product-body {
gap: 8px !important;
padding: 20px !important;
}
#products .ab-cart-html {
margin-top: 12px !important;
}
#products .ab-product h3 {
line-height: 1.3 !important;
}
#feature + .ab-section,
#news {
scroll-margin-top: 70px;
}
.ab-cta {
margin-top: 36px !important;
padding: 28px 22px !important;
}
}
/*
Theme Name: AIR BRIDGE Cosmic Vape Theme v37.8.9.12.12
Theme URI: https://example.com/
Author: APPTUNE TRADE
Description: AIR BRIDGE用の宇宙感・黒基調・ネオンデザイン対応ECテーマ。v37.8.8.1ではスマホTOPラベルの見切れを修正したテーマ改良版。
Version: 37.8.9.12.12
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: airbridge-btoc
*/
:root{
--bg:#fbfaf7; --ink:#161616; --muted:#6f6a62; --line:#e7e1d7; --gold:#c6a45d; --gold2:#f1d99c;
--dark:#11110f; --cream:#fff8e9; --soft:#f4efe4; --green:#879b78; --berry:#b76580;
--shadow: 0 22px 70px rgba(20,20,20,.09); --radius:28px; --max:1180px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic","YuGothic",Meiryo,sans-serif;letter-spacing:.04em;line-height:1.85} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto}.ab-container{max-width:var(--max);margin:0 auto;padding:0 22px}.ab-header{position:sticky;top:0;z-index:80;background:rgba(251,250,247,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(231,225,215,.7)}.ab-nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.ab-logo{font-size:20px;font-weight:800;letter-spacing:.16em}.ab-logo span{display:block;font-size:10px;font-weight:600;color:var(--gold);letter-spacing:.22em;margin-top:-4px}.ab-menu{display:flex;align-items:center;gap:24px;font-size:13px;color:#292724}.ab-menu-list{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}.ab-menu-list li{margin:0;padding:0}.ab-menu a,.ab-menu-list a{opacity:.85}.ab-menu a:hover,.ab-menu-list a:hover{opacity:1;color:#9b7b36}.ab-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--dark);color:#fff;font-weight:700;font-size:13px;border:1px solid var(--dark);box-shadow:0 12px 34px rgba(17,17,15,.16);transition:.2s}.ab-btn:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(17,17,15,.2)}.ab-btn.gold{background:linear-gradient(135deg,var(--gold),#96722d);border-color:#b08b3c}.ab-btn.light{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:none}.ab-btn.ghost{background:transparent;color:var(--ink);border-color:rgba(22,22,22,.18);box-shadow:none}.ab-mobile{display:none}.ab-hero{position:relative;overflow:hidden;min-height:820px;padding:92px 0 70px;background:radial-gradient(circle at 70% 18%,#f9e7b6 0,#fbfaf7 31%,transparent 48%),linear-gradient(180deg,#fffdf8 0,#f4efe4 100%)}.ab-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:38px}.ab-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.68);font-size:12px;font-weight:700;color:#7a5d20}.ab-kicker:before{content:"";width:8px;height:8px;border-radius:99px;background:var(--gold);box-shadow:0 0 0 7px rgba(198,164,93,.14)}.ab-hero h1{font-size:clamp(46px,7vw,92px);line-height:1.02;margin:26px 0 20px;letter-spacing:.01em}.ab-hero h1 em{font-style:normal;background:linear-gradient(90deg,#151515,#ae883a);-webkit-background-clip:text;background-clip:text;color:transparent}.ab-lead{font-size:clamp(16px,2vw,21px);color:#4c4841;max-width:620px;margin:0 0 30px}.ab-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}.ab-notes{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.ab-note{padding:7px 10px;background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:999px}.ab-device-wrap{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center}.ab-glow{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,#ffe2a0 0,#f1d99c 23%,rgba(241,217,156,.24) 50%,transparent 72%);filter:blur(4px);animation:pulse 4.5s ease-in-out infinite}.ab-device{position:relative;width:min(78vw,410px);height:520px;border-radius:180px 180px 130px 130px;background:linear-gradient(145deg,#fff,#d7d1c4 28%,#151515 29%,#2b2925 74%,#0f0f0e 100%);box-shadow:inset -22px -28px 42px rgba(0,0,0,.34),inset 18px 22px 26px rgba(255,255,255,.18),0 46px 120px rgba(0,0,0,.25);transform:rotate(-9deg)}.ab-device:before{content:"AIR BRIDGE";position:absolute;top:118px;left:50%;transform:translateX(-50%) rotate(90deg);letter-spacing:.22em;color:#f3d897;font-size:15px;font-weight:800;white-space:nowrap}.ab-device:after{content:"";position:absolute;top:32px;left:50%;transform:translateX(-50%);width:124px;height:92px;border-radius:56px;background:linear-gradient(180deg,#faf7ee,#8c867a);box-shadow:inset 0 -12px 20px rgba(0,0,0,.18)}.ab-float{position:absolute;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:22px;padding:14px 16px;box-shadow:var(--shadow);font-size:13px;font-weight:700}.ab-float small{display:block;color:var(--muted);font-size:11px;font-weight:600}.ab-float.one{left:0;top:80px}.ab-float.two{right:0;bottom:92px}.ab-section{padding:92px 0}.ab-section.dark{background:#11110f;color:#fff}.ab-section.soft{background:var(--soft)}.ab-title{text-align:center;margin:0 auto 48px;max-width:760px}.ab-title .en{display:block;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.24em;margin-bottom:10px}.ab-title h2{font-size:clamp(32px,4.8vw,58px);line-height:1.15;margin:0 0 14px}.ab-title p{margin:0;color:var(--muted);font-size:16px}.dark .ab-title p{color:#cfc7b7}.ab-scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.ab-scene{min-height:270px;border-radius:var(--radius);padding:28px;position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 12px 40px rgba(20,20,20,.05)}.ab-scene:after{content:"";position:absolute;right:-44px;bottom:-54px;width:170px;height:170px;border-radius:50%;background:linear-gradient(135deg,rgba(198,164,93,.18),rgba(135,155,120,.18))}.ab-scene:nth-child(2n):after{background:linear-gradient(135deg,rgba(183,101,128,.18),rgba(198,164,93,.13))}.ab-scene strong{display:block;font-size:26px;line-height:1.35;margin-bottom:12px;letter-spacing:.02em}.ab-scene p{margin:0;color:var(--muted);font-size:14px}.ab-products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.ab-product{background:#fff;border:1px solid var(--line);border-radius:32px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}.ab-product-visual{height:250px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#fff 0,#fbf0cf 34%,#efe7d7 100%)}.ab-pod{width:80px;height:220px;border-radius:44px;background:linear-gradient(160deg,#fff,#ddd 20%,#222 21%,#0c0c0b 100%);box-shadow:inset -11px -18px 25px rgba(0,0,0,.35),0 28px 50px rgba(0,0,0,.18);transform:rotate(7deg)}.ab-product:nth-child(2) .ab-product-visual{background:radial-gradient(circle,#fff 0,#f6dde5 36%,#eee3e6 100%)}.ab-product:nth-child(3) .ab-product-visual{background:radial-gradient(circle,#fff 0,#dcf1dc 36%,#e9eee1 100%)}.ab-product:nth-child(4) .ab-product-visual{background:radial-gradient(circle,#fff 0,#ffe0b1 36%,#efe2cb 100%)}.ab-product:nth-child(5) .ab-product-visual{background:radial-gradient(circle,#fff 0,#d7f1ff 36%,#e3eaf0 100%)}.ab-product:nth-child(6) .ab-product-visual{background:radial-gradient(circle,#fff 0,#ded5ca 36%,#eee8de 100%)}.ab-product-body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}.ab-product h3{font-size:21px;margin:0;line-height:1.35}.ab-product .price{font-size:22px;font-weight:900;color:#9b7b36}.ab-product p{margin:0;color:var(--muted);font-size:14px}.ab-cart-html{margin-top:auto}.ab-cart-html:empty:before{content:"e-shopsカートHTMLを商品編集画面に貼り付け";display:block;padding:12px;border:1px dashed #cdbb93;border-radius:14px;color:#8a6d31;font-size:12px;text-align:center;background:#fff9ea}.ab-feature-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:center}.ab-feature-visual{min-height:520px;border-radius:42px;background:linear-gradient(135deg,#fcf7e8,#11110f);position:relative;overflow:hidden;box-shadow:var(--shadow)}.ab-feature-visual:before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;background:rgba(255,255,255,.35);left:50%;top:50%;transform:translate(-50%,-50%)}.ab-feature-visual .ab-device{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(12deg) scale(.78)}.ab-feature-list{display:grid;gap:14px}.ab-feature{display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 10px 32px rgba(20,20,20,.04)}.ab-num{width:38px;height:38px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none}.ab-feature h3{margin:0 0 4px;font-size:20px}.ab-feature p{margin:0;color:var(--muted);font-size:14px}.ab-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.ab-step{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px}.ab-step b{display:inline-flex;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;background:var(--gold);color:#fff;margin-bottom:14px}.ab-step h3{margin:0 0 8px;font-size:18px}.ab-step p{margin:0;color:var(--muted);font-size:13px}.ab-cta{margin:88px auto 0;border-radius:42px;background:linear-gradient(135deg,#11110f,#2b2517 62%,#c6a45d);color:#fff;padding:56px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;box-shadow:var(--shadow)}.ab-cta h2{margin:0 0 10px;font-size:clamp(28px,4vw,48px);line-height:1.1}.ab-cta p{margin:0;color:#ece4d4}.ab-faq{max-width:900px;margin:0 auto;display:grid;gap:12px}.ab-faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 22px}.ab-faq summary{cursor:pointer;font-weight:800}.ab-faq p{margin:10px 0 0;color:var(--muted)}.ab-footer{background:#090908;color:#fff;padding:58px 0 30px}.ab-footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.ab-footer h2{margin:0 0 12px;letter-spacing:.16em}.ab-footer p,.ab-footer li{color:#cfc7b7;font-size:13px}.ab-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.ab-copy{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;color:#978f82;font-size:12px}.ab-age{position:fixed;inset:0;background:rgba(8,8,7,.78);z-index:999;display:none;align-items:center;justify-content:center;padding:20px}.ab-age.show{display:flex}.ab-age-box{max-width:520px;background:#fff;border-radius:30px;padding:34px;text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.35)}.ab-age-box h2{font-size:28px;margin:0 0 12px}.ab-age-box p{color:var(--muted);margin:0 0 22px}.ab-age-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}@media(max-width:920px){.ab-menu{display:none}.ab-mobile{display:flex}.ab-hero{min-height:auto;padding-top:54px}.ab-hero-grid,.ab-feature-wrap,.ab-footer-grid{grid-template-columns:1fr}.ab-device-wrap{min-height:430px}.ab-device{height:430px;width:310px}.ab-scene-grid,.ab-products{grid-template-columns:1fr 1fr}.ab-steps{grid-template-columns:1fr 1fr}.ab-cta{grid-template-columns:1fr;padding:34px}}@media(max-width:620px){.ab-container{padding:0 16px}.ab-nav{height:64px}.ab-logo{font-size:16px}.ab-hero h1{font-size:44px}.ab-scene-grid,.ab-products,.ab-steps{grid-template-columns:1fr}.ab-section{padding:64px 0}.ab-float{display:none}.ab-hero-actions .ab-btn{width:100%}.ab-cta{border-radius:28px}.ab-product-visual{height:210px}}
/* Customizer support */
.ab-hero{background-size:cover;background-position:center;background-repeat:no-repeat}
.ab-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ab-news-card{background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);transition:.2s}
.ab-news-card:hover{transform:translateY(-3px)}
.ab-news-thumb{height:190px;background:linear-gradient(135deg,#11110f,#c6a45d);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;letter-spacing:.18em}
.ab-news-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ab-news-body{padding:22px}
.ab-news-body time{display:block;color:#9b7b36;font-size:12px;font-weight:800;letter-spacing:.12em;margin-bottom:8px}
.ab-news-body h3{font-size:20px;line-height:1.45;margin:0 0 8px}
.ab-news-body p{margin:0;color:var(--muted);font-size:14px}
.ab-news-empty{grid-column:1/-1;text-align:center;background:#fff;border:1px dashed #cdbb93;border-radius:22px;padding:28px;color:#8a6d31}
@media(max-width:920px){.ab-news-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ab-news-grid{grid-template-columns:1fr}.ab-news-thumb{height:160px}}
.ab-feature-visual.has-image{
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.ab-feature-visual.has-image:after{
display:none;
}
/* v10 category display */
.ab-cat-badges{display:flex;flex-wrap:wrap;gap:7px;margin:7px 0 10px}
.ab-cat-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border-radius:999px;background:#f7efd9;border:1px solid #e4d2a2;color:#8a6d31;font-size:11px;font-weight:800;letter-spacing:.08em;line-height:1.4}
.ab-news-card .ab-cat-badge:hover{background:#fff8e9;color:#6f511c}
.ab-pagination{margin-top:36px;text-align:center}
.ab-pagination .nav-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.ab-pagination a,.ab-pagination span{display:inline-flex;min-width:38px;height:38px;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--line);background:#fff;padding:0 12px;font-weight:700}
.ab-pagination .current{background:var(--dark);color:#fff;border-color:var(--dark)}
.ab-single{max-width:920px}
.ab-single-thumb{border-radius:28px;overflow:hidden;margin:0 0 30px;box-shadow:var(--shadow)}
.ab-single-thumb img{width:100%;display:block}
.ab-single-content{background:#fff;border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:0 12px 40px rgba(20,20,20,.05)}
.ab-single-content p{color:var(--muted)}
/* v13 fix: HOW TO BUY card text visibility */
.ab-step{color:var(--ink);}
.ab-step h3{color:var(--ink);display:block;font-weight:800;}
.ab-step p{color:var(--muted);}
/* v14: Japanese menu defaults */
@media(min-width:921px){.ab-menu-list{gap:22px}.ab-menu-list a{white-space:nowrap}}
/* v15 Mobile header menu */
.ab-menu-toggle{display:none;align-items:center;justify-content:center;gap:6px;width:52px;height:44px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 10px 26px rgba(20,20,20,.08);cursor:pointer;position:relative;z-index:120}
.ab-menu-toggle span{display:block;width:17px;height:2px;background:var(--ink);border-radius:99px;transition:.2s;position:absolute;left:14px}
.ab-menu-toggle span:nth-child(1){top:14px}.ab-menu-toggle span:nth-child(2){top:21px}.ab-menu-toggle span:nth-child(3){top:28px}
.ab-menu-toggle em{font-style:normal;font-size:0}
.ab-menu-toggle.is-open span:nth-child(1){top:21px;transform:rotate(45deg)}
.ab-menu-toggle.is-open span:nth-child(2){opacity:0}
.ab-menu-toggle.is-open span:nth-child(3){top:21px;transform:rotate(-45deg)}
@media(max-width:920px){
.ab-nav{position:relative}
.ab-menu-toggle{display:inline-flex;margin-left:auto;flex:none}
.ab-menu{display:none;position:absolute;left:16px;right:16px;top:calc(100% + 10px);z-index:110;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 26px 70px rgba(20,20,20,.18);color:var(--ink)}
.ab-menu.is-open{display:block}
.ab-menu-list{display:grid;grid-template-columns:1fr;gap:0;width:100%}
.ab-menu-list li{border-bottom:1px solid var(--line)}
.ab-menu-list li:last-child{border-bottom:none}
.ab-menu-list a{display:block;padding:14px 6px;font-size:15px;font-weight:800;letter-spacing:.08em;color:var(--ink);opacity:1}
.ab-menu .ab-btn{width:100%;margin-top:14px;padding:14px 18px}
body.ab-menu-open{overflow:hidden}
}
@media(max-width:620px){
.ab-logo{font-size:15px;max-width:calc(100% - 66px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-logo span{font-size:9px}
}
/* v16: Custom logo support */
.ab-logo{display:inline-flex;align-items:center;min-height:44px}
.ab-logo .ab-logo-image{display:inline-flex;align-items:center}
.ab-logo .custom-logo-link{display:inline-flex;align-items:center}
.ab-logo img.custom-logo{display:block;width:auto;max-width:260px;max-height:54px;height:auto;object-fit:contain}
@media(max-width:620px){.ab-logo img.custom-logo{max-width:190px;max-height:44px}}
/* v17 custom logo fix */
.ab-logo-wrap{display:flex;align-items:center;min-height:44px;flex:0 0 auto}
.ab-logo-wrap .custom-logo-link{display:inline-flex;align-items:center;line-height:1}
.ab-logo-wrap img.custom-logo{display:block;width:auto;max-width:280px;max-height:58px;height:auto;object-fit:contain}
@media(max-width:920px){.ab-logo-wrap img.custom-logo{max-width:220px;max-height:48px}}
@media(max-width:620px){.ab-logo-wrap img.custom-logo{max-width:180px;max-height:42px}.ab-logo-wrap{max-width:calc(100% - 66px);overflow:hidden}}
/* v18: header logo + site title/tagline */
.ab-logo-wrap{display:flex;align-items:center;min-height:44px;flex:0 0 auto}
.ab-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--ink);text-decoration:none;line-height:1}
.ab-brand-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ab-brand-mark img,.ab-custom-logo{display:block;width:auto;max-width:58px;max-height:54px;height:auto;object-fit:contain}
.ab-brand-text{display:flex;align-items:baseline;gap:8px;white-space:nowrap;min-width:0}
.ab-brand-text strong{display:inline-block;font-size:20px;font-weight:900;letter-spacing:.18em;color:#161616;line-height:1}
.ab-brand-text em{display:inline-block;font-style:normal;font-size:11px;font-weight:800;color:var(--gold);letter-spacing:.28em;line-height:1.1;white-space:nowrap}
@media(max-width:920px){.ab-brand{gap:9px}.ab-brand-mark img,.ab-custom-logo{max-width:46px;max-height:42px}.ab-brand-text{flex-direction:column;align-items:flex-start;gap:3px}.ab-brand-text strong{font-size:16px;letter-spacing:.14em}.ab-brand-text em{font-size:8px;letter-spacing:.20em}.ab-logo-wrap{max-width:calc(100% - 74px);overflow:hidden}.ab-brand-text{overflow:hidden}.ab-brand-text strong,.ab-brand-text em{max-width:220px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:420px){.ab-brand-text strong{font-size:14px}.ab-brand-text em{font-size:7px}.ab-brand-mark img,.ab-custom-logo{max-width:40px;max-height:38px}}
/* v19: header logo two-line title/tagline layout */
.ab-brand{display:inline-flex;align-items:center;gap:12px;min-height:48px;color:var(--ink);text-decoration:none;line-height:1}
.ab-brand-text{display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:center;gap:5px !important;white-space:nowrap;min-width:0}
.ab-brand-text strong{display:block;font-size:20px;font-weight:900;letter-spacing:.18em;color:#161616;line-height:1}
.ab-brand-text em{display:block;font-style:normal;font-size:11px;font-weight:800;color:var(--gold);letter-spacing:.28em;line-height:1.1;white-space:nowrap}
@media(max-width:920px){.ab-brand{gap:9px}.ab-brand-mark img,.ab-custom-logo{max-width:46px;max-height:42px}.ab-brand-text strong{font-size:16px;letter-spacing:.14em}.ab-brand-text em{font-size:8px;letter-spacing:.20em}.ab-logo-wrap{max-width:calc(100% - 74px);overflow:hidden}.ab-brand-text{overflow:hidden}.ab-brand-text strong,.ab-brand-text em{max-width:220px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:420px){.ab-brand-text strong{font-size:14px}.ab-brand-text em{font-size:7px}.ab-brand-mark img,.ab-custom-logo{max-width:40px;max-height:38px}}
/* v20 e-shops cart output fix */
.ab-cart-html{overflow-wrap:anywhere;word-break:break-word}
.ab-cart-html input,.ab-cart-html button,.ab-cart-html a{max-width:100%}
/* SNS follow links */
.ab-follow-section{background:#e6e6e4;}
.ab-follow-section .ab-title h2{font-size:clamp(34px,5vw,58px);letter-spacing:.03em;}
.ab-follow-icons{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap;margin-top:26px;}
.ab-follow-icon{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:#667b8a;color:#fff;font-weight:900;box-shadow:0 16px 40px rgba(20,20,20,.12);transition:.22s;}
.ab-follow-icon span{font-size:24px;line-height:1;letter-spacing:.02em;}
.ab-follow-icon small{font-size:10px;letter-spacing:.12em;opacity:.9;}
.ab-follow-icon:hover{transform:translateY(-4px);box-shadow:0 22px 54px rgba(20,20,20,.18);color:#fff;}
.ab-follow-line span{font-size:15px;background:#fff;color:#667b8a;border-radius:999px;padding:7px 8px;}
.ab-follow-x span{font-size:34px;font-weight:400;}
.ab-follow-instagram span{font-size:50px;font-weight:500;line-height:.74;}
@media(max-width:620px){.ab-follow-icons{gap:16px}.ab-follow-icon{width:76px;height:76px}.ab-follow-icon span{font-size:19px}.ab-follow-x span{font-size:28px}.ab-follow-instagram span{font-size:42px}}
/* v22: SNS follow links inside footer */
.ab-footer-follow{
margin-top:42px;
padding-top:34px;
border-top:1px solid rgba(255,255,255,.12);
display:grid;
grid-template-columns:1fr auto;
gap:28px;
align-items:center;
}
.ab-footer-follow-text span{
display:block;
color:var(--gold);
font-size:12px;
font-weight:900;
letter-spacing:.22em;
margin-bottom:8px;
}
.ab-footer-follow-text h3{
margin:0 0 8px;
font-size:clamp(24px,3vw,38px);
line-height:1.2;
color:#fff;
}
.ab-footer-follow-text p{
margin:0;
color:#cfc7b7;
}
.ab-footer .ab-follow-icons{
justify-content:flex-end;
margin-top:0;
}
.ab-footer .ab-follow-icon{
background:#607385;
color:#fff;
border-color:rgba(255,255,255,.18);
box-shadow:none;
}
.ab-footer .ab-follow-icon small{
color:#fff;
opacity:.85;
}
@media(max-width:760px){
.ab-footer-follow{grid-template-columns:1fr;text-align:left}
.ab-footer .ab-follow-icons{justify-content:flex-start}
.ab-footer .ab-follow-icon{width:78px;height:78px}
}
/* Video section */
.ab-video-section{background:#fffdf8}
.ab-video-box{max-width:980px;margin:0 auto;border-radius:36px;overflow:hidden;background:#11110f;box-shadow:0 26px 80px rgba(20,20,20,.14);border:1px solid var(--line)}
.ab-video{display:block;width:100%;height:auto;max-height:620px;background:#000;object-fit:cover}
.ab-video-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.ab-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ab-video-fallback{min-height:360px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#11110f,#c6a45d)}
@media(max-width:620px){.ab-video-box{border-radius:24px}.ab-video-fallback{min-height:220px}}
/* Ambassador */
.ab-ambassador-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ab-ambassador-card{background:#fff;border:1px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.ab-ambassador-photo{height:240px;background:linear-gradient(135deg,#11110f,#c6a45d);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;letter-spacing:.18em;text-align:center}
.ab-ambassador-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ab-ambassador-body{padding:22px;display:grid;gap:12px}
.ab-ambassador-body h2,.ab-ambassador-body h3{margin:0;line-height:1.35;font-size:22px}
.ab-ambassador-body p{margin:0;color:var(--muted);font-size:14px}
.ab-coupon{display:inline-flex;align-items:center;gap:9px;border:1px solid #dec88e;background:#fff8e3;color:#8a6d31;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;letter-spacing:.08em;width:max-content;max-width:100%}
.ab-coupon strong{color:#111;font-size:14px;letter-spacing:.08em}
.ab-coupon.large{font-size:14px;padding:12px 18px;margin:10px 0 18px}.ab-coupon.large strong{font-size:22px}
.ab-ambassador-sns{display:flex;flex-wrap:wrap;gap:8px}.ab-ambassador-sns a{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#111;color:#fff;font-weight:800;font-size:12px;padding:8px 12px}.ab-ambassador-sns.large a{font-size:14px;padding:10px 16px}
.ab-ambassador-single{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:center}.ab-ambassador-hero-photo{min-height:520px;border-radius:42px;overflow:hidden;background:linear-gradient(135deg,#11110f,#c6a45d);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;letter-spacing:.18em}.ab-ambassador-hero-photo img{width:100%;height:100%;object-fit:cover;display:block}.ab-entry-content{color:#4c4841}.ab-entry-content p{margin:0 0 1em}
@media(max-width:920px){.ab-ambassador-grid{grid-template-columns:repeat(2,1fr)}.ab-ambassador-single{grid-template-columns:1fr}.ab-ambassador-hero-photo{min-height:360px}}
@media(max-width:620px){.ab-ambassador-grid{grid-template-columns:1fr}.ab-ambassador-photo{height:220px}}
.ab-ambassador-card.is-pickup{border-color:rgba(198,164,93,.55);box-shadow:0 26px 80px rgba(198,164,93,.18)}
.ab-pickup-label{display:inline-flex;align-items:center;width:max-content;border-radius:999px;background:#111;color:#fff;font-size:11px;font-weight:900;letter-spacing:.14em;padding:5px 10px;margin-bottom:2px}
/* v31: product order consistency */
.ab-products{direction:ltr;}
.ab-products .ab-product{order:initial;}
@media(max-width:620px){.ab-products{display:grid!important;grid-auto-flow:row!important;direction:ltr!important;}.ab-products .ab-product{order:initial!important;}}
/* v32 cart display support */
.ab-cart-button{
display:inline-flex;align-items:center;justify-content:center;width:100%;
min-height:48px;padding:13px 18px;border-radius:999px;
background:linear-gradient(135deg,var(--gold),#96722d);color:#fff!important;
font-weight:900;letter-spacing:.06em;text-align:center;box-shadow:0 12px 30px rgba(150,114,45,.22);
}
.ab-cart-button:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(150,114,45,.28)}
.ab-cart-embed form,.ab-cart-embed table{max-width:100%}
.ab-cart-embed input[type="submit"],.ab-cart-embed button{
max-width:100%;border:0;border-radius:999px;background:#111;color:#fff;
padding:12px 18px;font-weight:800;cursor:pointer;
}
.ab-cart-nav{background:linear-gradient(135deg,var(--gold),#96722d);border-color:#b08b3c}
.ab-floating-cart{position:fixed;right:18px;bottom:18px;z-index:120;display:inline-flex;align-items:center;justify-content:center;min-width:112px;height:54px;padding:0 18px;border-radius:999px;background:linear-gradient(135deg,var(--gold),#96722d);color:#fff;text-decoration:none;font-weight:900;box-shadow:0 18px 46px rgba(0,0,0,.22)}
.ab-floating-cart:hover{transform:translateY(-2px)}
@media(max-width:620px){.ab-floating-cart{right:14px;bottom:14px;min-width:96px;height:48px;font-size:13px}.ab-cart-nav{width:100%;margin-top:6px}}
/* v33 cart auto display support */
.ab-cart-nav,.ab-floating-cart{white-space:nowrap}
@media(max-width:920px){.ab-menu.active .ab-cart-nav{display:inline-flex}}
/* v34: PRODUCT DESIGN画像差し替え時の中央白丸を非表示 */
.ab-feature-visual.has-image:before{
display:none !important;
}
.ab-feature-visual.has-image{
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
/* v36: メインビジュアル右側画像の差し替え対応 */
.ab-hero-main-image {
position: relative;
width: min(82vw, 520px);
height: 560px;
border-radius: 46px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 0 46px 120px rgba(0,0,0,.16);
overflow: hidden;
}
.ab-hero-main-image:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
pointer-events: none;
}
.ab-device-wrap.has-custom-hero-image .ab-glow,
.ab-device-wrap.has-custom-hero-image .ab-device {
display: none !important;
}
@media (max-width: 920px) {
.ab-hero-main-image {
width: min(92vw, 420px);
height: 420px;
border-radius: 34px;
}
}
/* v37: スマートフォンでもTOP右側画像の補助ラベルを表示 */
@media (max-width: 620px) {
.ab-device-wrap.has-custom-hero-image .ab-float {
display: block !important;
position: absolute;
z-index: 5;
max-width: 160px;
padding: 10px 12px;
border-radius: 18px;
font-size: 12px;
line-height: 1.35;
white-space: normal;
}
.ab-device-wrap.has-custom-hero-image .ab-float small {
font-size: 10px;
line-height: 1.45;
}
.ab-device-wrap.has-custom-hero-image .ab-float.one {
left: 10px;
top: 34px;
}
.ab-device-wrap.has-custom-hero-image .ab-float.two {
right: 10px;
bottom: 34px;
}
}
@media (max-width: 420px) {
.ab-device-wrap.has-custom-hero-image .ab-float {
max-width: 140px;
padding: 9px 10px;
font-size: 11px;
}
.ab-device-wrap.has-custom-hero-image .ab-float small {
font-size: 9px;
}
.ab-device-wrap.has-custom-hero-image .ab-float.one {
left: 4px;
top: 24px;
}
.ab-device-wrap.has-custom-hero-image .ab-float.two {
right: 4px;
bottom: 24px;
}
}
/* v38: 商品詳細ページの画像表示修正（白丸・黒背景を除去） */
.ab-product-detail-wrap {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: 40px;
align-items: center;
}
.ab-single-product-visual {
min-height: 520px;
border-radius: 42px;
background: #fff;
position: relative;
overflow: hidden;
box-shadow: var(--shadow);
display: flex;
align-items: center;
justify-content: center;
}
.ab-single-product-visual:before,
.ab-single-product-visual:after {
display: none !important;
content: none !important;
}
.ab-single-product-visual img {
width: 100%;
height: 100%;
min-height: 520px;
object-fit: contain;
object-position: center center;
display: block;
background: #fff;
}
.ab-single-product-title {
font-size: clamp(36px,5vw,64px);
line-height: 1.12;
margin: 22px 0 12px;
}
.ab-single-product-price {
font-size: 30px;
font-weight: 900;
color: #9b7b36;
margin-bottom: 18px;
}
.ab-single-product-cart {
margin-top: 24px;
}
.ab-single-product-note {
font-size: 12px;
color: #777;
margin-top: 24px;
}
@media (max-width: 920px) {
.ab-product-detail-wrap {
grid-template-columns: 1fr;
}
.ab-single-product-visual {
min-height: 360px;
border-radius: 32px;
}
.ab-single-product-visual img {
min-height: 360px;
}
}
@media (max-width: 620px) {
.ab-single-product-visual {
min-height: 300px;
}
.ab-single-product-visual img {
min-height: 300px;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v1
v38機能統合済み / 宇宙感強め / 黒基調ネオンデザイン
========================================================= */
:root{
--cosmic-bg:#02030b;
--cosmic-bg2:#080a18;
--cosmic-panel:rgba(10,13,28,.86);
--cosmic-glass:rgba(255,255,255,.085);
--cosmic-line:rgba(255,255,255,.16);
--cosmic-text:#ffffff;
--cosmic-sub:#d8dbea;
--cosmic-muted:#b1b8ce;
--cosmic-gold:#d6ad4b;
--cosmic-pink:#ff4fb3;
--cosmic-purple:#8b5cf6;
--cosmic-blue:#38bdf8;
--cosmic-cyan:#67e8f9;
--cosmic-shadow:0 28px 90px rgba(0,0,0,.48);
}
/* 全体背景 */
body{
background:
radial-gradient(circle at 82% 7%, rgba(56,189,248,.24), transparent 26%),
radial-gradient(circle at 18% 14%, rgba(255,79,179,.20), transparent 30%),
radial-gradient(circle at 52% 38%, rgba(139,92,246,.17), transparent 36%),
radial-gradient(circle at 84% 72%, rgba(214,173,75,.09), transparent 30%),
linear-gradient(180deg,var(--cosmic-bg) 0%,var(--cosmic-bg2) 48%,var(--cosmic-bg) 100%) !important;
color:var(--cosmic-text) !important;
}
body::before{
content:"";
position:fixed;
inset:0;
z-index:-2;
pointer-events:none;
background:
radial-gradient(circle at 12% 18%, rgba(255,255,255,.85) 0 1px, transparent 2px),
radial-gradient(circle at 78% 22%, rgba(255,255,255,.55) 0 1px, transparent 2px),
radial-gradient(circle at 46% 12%, rgba(255,255,255,.45) 0 1px, transparent 2px),
radial-gradient(circle at 66% 68%, rgba(255,255,255,.42) 0 1px, transparent 2px),
radial-gradient(circle at 28% 74%, rgba(255,255,255,.50) 0 1px, transparent 2px),
linear-gradient(90deg, transparent 0 96%, rgba(255,255,255,.028) 97% 100%),
linear-gradient(0deg, transparent 0 96%, rgba(255,255,255,.022) 97% 100%);
background-size:360px 360px,430px 430px,520px 520px,470px 470px,560px 560px,56px 56px,56px 56px;
opacity:.62;
-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.94),transparent 90%);
mask-image:linear-gradient(to bottom,rgba(0,0,0,.94),transparent 90%);
}
body::after{
content:"";
position:fixed;
inset:-20%;
z-index:-1;
pointer-events:none;
background:
conic-gradient(from 220deg at 62% 30%, transparent 0deg, rgba(255,79,179,.18) 24deg, rgba(56,189,248,.16) 58deg, transparent 95deg),
conic-gradient(from 40deg at 35% 60%, transparent 0deg, rgba(139,92,246,.15) 30deg, rgba(214,173,75,.08) 70deg, transparent 115deg);
filter:blur(38px);
opacity:.80;
}
/* ヘッダー */
.ab-header,
.site-header{
background:rgba(2,3,10,.92) !important;
border-bottom:1px solid rgba(255,255,255,.14) !important;
box-shadow:0 10px 44px rgba(0,0,0,.42) !important;
backdrop-filter:blur(18px);
}
.ab-header .ab-container,
.site-header .ab-container{
background:transparent !important;
}
.ab-brand,
.ab-brand *,
.ab-logo,
.ab-logo *,
.site-title,
.site-title a,
.custom-logo-link{
color:#fff !important;
}
.ab-brand .tagline,
.ab-site-tagline,
.ab-logo-sub,
.site-description{
color:var(--cosmic-gold) !important;
}
/* メニュー崩れ対策 */
.ab-header nav ul,
.ab-nav ul,
.ab-menu ul,
.primary-menu,
.menu{
list-style:none !important;
margin:0 !important;
padding:0 !important;
}
@media (min-width: 921px){
.ab-header nav ul,
.ab-nav ul,
.ab-menu ul,
.primary-menu,
.menu{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:24px !important;
flex-wrap:nowrap !important;
}
.ab-header nav li,
.ab-nav li,
.ab-menu li,
.primary-menu li,
.menu li{
display:inline-flex !important;
margin:0 !important;
padding:0 !important;
}
.ab-header nav a,
.ab-nav a,
.ab-menu a,
.primary-menu a,
.menu a{
display:inline-flex !important;
align-items:center !important;
color:rgba(255,255,255,.88) !important;
text-decoration:none !important;
font-weight:700;
white-space:nowrap;
}
.ab-header nav a:hover,
.ab-nav a:hover,
.ab-menu a:hover{
color:#fff !important;
text-shadow:0 0 16px rgba(56,189,248,.45);
}
}
/* 共通文字 */
.ab-section,
.ab-section.soft,
main,
.site-main{
background:transparent !important;
color:#fff !important;
}
.ab-section h1,
.ab-section h2,
.ab-section h3,
.ab-section h4,
.ab-heading,
.ab-title{
color:#fff !important;
text-shadow:0 0 36px rgba(139,92,246,.22);
}
.ab-section p,
.ab-section li,
.ab-text,
.ab-muted{
color:var(--cosmic-sub) !important;
}
.ab-kicker,
.ab-section .ab-kicker{
color:var(--cosmic-gold) !important;
letter-spacing:.24em;
text-shadow:0 0 18px rgba(214,173,75,.28);
}
/* TOPヒーロー */
.ab-hero{
background:
radial-gradient(circle at 78% 30%, rgba(56,189,248,.26), transparent 28%),
radial-gradient(circle at 28% 38%, rgba(255,79,179,.23), transparent 36%),
radial-gradient(circle at 54% 55%, rgba(139,92,246,.16), transparent 42%),
linear-gradient(135deg,#02030a 0%,#080b18 58%,#03040a 100%) !important;
color:#fff !important;
position:relative;
overflow:hidden;
}
.ab-hero::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 70% 26%, rgba(255,255,255,.08) 0 1px, transparent 2px),
radial-gradient(circle at 86% 52%, rgba(255,255,255,.08) 0 1px, transparent 2px),
linear-gradient(105deg, transparent 8%, rgba(255,79,179,.21), rgba(56,189,248,.19), transparent 72%);
background-size:260px 260px,340px 340px,auto;
opacity:.96;
}
.ab-hero::after{
content:"";
position:absolute;
left:-18%;
right:-18%;
top:36%;
height:190px;
pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,79,179,.55),rgba(56,189,248,.47),rgba(214,173,75,.24),transparent);
transform:rotate(-4deg);
filter:blur(30px);
opacity:.58;
}
.ab-hero .ab-container,
.ab-hero-grid{
position:relative;
z-index:1;
}
.ab-hero h1{
color:#fff !important;
text-shadow:0 0 42px rgba(255,79,179,.22),0 0 62px rgba(56,189,248,.14);
}
.ab-hero p{
color:rgba(255,255,255,.84) !important;
}
/* TOPラベル */
.ab-pill,
.ab-badge,
.ab-tag,
.ab-hero .ab-tag,
.ab-hero .ab-pill,
.ab-hero .ab-badge{
background:rgba(255,255,255,.92) !important;
color:#a8791d !important;
border:1px solid rgba(255,255,255,.72) !important;
box-shadow:0 12px 32px rgba(0,0,0,.24),0 0 28px rgba(214,173,75,.16) !important;
}
.ab-pill *,
.ab-badge *,
.ab-tag *{
color:#a8791d !important;
}
/* 吹き出し */
.ab-float,
.ab-floating-note,
.ab-hero-note,
.ab-hero-bubble,
.ab-hero-card{
background:rgba(255,255,255,.92) !important;
color:#1d1d1d !important;
border:1px solid rgba(255,255,255,.72) !important;
box-shadow:0 18px 40px rgba(0,0,0,.26),0 0 22px rgba(255,255,255,.10) !important;
}
.ab-float *,
.ab-floating-note *,
.ab-hero-note *,
.ab-hero-bubble *,
.ab-hero-card *{
color:#1d1d1d !important;
}
/* TOP右側画像 */
.ab-hero-main-image{
border:1px solid rgba(255,255,255,.16) !important;
box-shadow:
0 40px 110px rgba(0,0,0,.62),
0 0 70px rgba(255,79,179,.20),
0 0 42px rgba(56,189,248,.14) !important;
}
/* ボタン */
.ab-btn,
.ab-cart-fixed,
.ab-cart-btn,
.wp-block-button__link,
button,
input[type="submit"]{
border-radius:999px !important;
}
.ab-btn:not(.secondary),
.ab-cart-fixed,
.ab-cart-btn,
.wp-block-button__link,
button:not(.menu-toggle),
input[type="submit"]{
background:linear-gradient(135deg,var(--cosmic-pink) 0%,var(--cosmic-purple) 50%,var(--cosmic-blue) 100%) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.22) !important;
box-shadow:
0 14px 38px rgba(124,58,237,.34),
0 0 28px rgba(56,189,248,.16) !important;
}
.ab-btn.secondary{
color:#fff !important;
background:rgba(255,255,255,.09) !important;
border:1px solid rgba(255,255,255,.22) !important;
}
/* カード */
.ab-card,
.ab-product,
.ab-product-card,
.ab-scene,
.ab-feature,
.ab-step,
.ab-faq-item,
.ab-news-card,
.ab-ambassador-card{
background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045)) !important;
color:#fff !important;
border:1px solid var(--cosmic-line) !important;
box-shadow:var(--cosmic-shadow) !important;
backdrop-filter:blur(12px);
}
.ab-card *,
.ab-product *,
.ab-product-card *,
.ab-scene *,
.ab-feature *,
.ab-step *,
.ab-faq-item *,
.ab-news-card *,
.ab-ambassador-card *{
color:inherit;
}
.ab-card p,
.ab-product p,
.ab-product-card p,
.ab-scene p,
.ab-feature p,
.ab-step p,
.ab-faq-item p,
.ab-news-card p,
.ab-ambassador-card p{
color:var(--cosmic-sub) !important;
}
/* 商品カード */
.ab-product h3,
.ab-product-card h3,
.ab-products h3,
.ab-product-title{
color:#fff !important;
}
.ab-product .price,
.ab-product-price,
.price{
color:var(--cosmic-gold) !important;
font-weight:900 !important;
}
.ab-product-meta,
.ab-product-meta *,
.ab-product small,
.ab-product .meta,
.ab-product .product-code,
.ab-product .product-name,
.ab-product .product-sku,
.ab-product .product-extra,
.ab-product form,
.ab-product form *,
.ab-product .cart,
.ab-product .cart *{
color:rgba(255,255,255,.90) !important;
}
.ab-product input,
.ab-product select,
.ab-product textarea{
background:#fff !important;
color:#111 !important;
border:1px solid rgba(255,255,255,.45) !important;
}
.ab-product-visual,
.ab-product-image{
background:
radial-gradient(circle at 50% 20%,rgba(255,255,255,.98),rgba(255,255,255,.34) 30%,rgba(56,189,248,.17) 56%,rgba(255,79,179,.12) 100%) !important;
}
/* PRODUCT DESIGN */
.ab-feature-visual{
background:
radial-gradient(circle at 30% 20%,rgba(255,79,179,.20),transparent 30%),
radial-gradient(circle at 78% 35%,rgba(56,189,248,.19),transparent 32%),
radial-gradient(circle at 52% 65%,rgba(139,92,246,.12),transparent 36%),
linear-gradient(145deg,#080a14,#101522) !important;
border:1px solid rgba(255,255,255,.15) !important;
box-shadow:0 28px 84px rgba(0,0,0,.46),0 0 34px rgba(139,92,246,.14) !important;
}
/* CTA */
.ab-cta,
.ab-cta-banner,
.ab-cta-box,
.ab-callout,
.ab-bottom-cta{
background:
radial-gradient(circle at 78% 50%,rgba(56,189,248,.18),transparent 26%),
radial-gradient(circle at 30% 50%,rgba(255,79,179,.16),transparent 30%),
linear-gradient(90deg,#07070a 0%,#17130a 45%,#b99745 100%) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.14) !important;
box-shadow:0 26px 84px rgba(0,0,0,.36) !important;
}
.ab-cta *,
.ab-cta-banner *,
.ab-cta-box *,
.ab-callout *,
.ab-bottom-cta *{
color:#fff !important;
}
/* NEWS */
.ab-news-card{
background:linear-gradient(180deg,#111526 0%,#080a14 100%) !important;
border:1px solid rgba(255,255,255,.14) !important;
overflow:hidden;
}
.ab-news-card *,
.ab-news-card h3,
.ab-news-card h2{
color:#fff !important;
}
.ab-news-card p{
color:rgba(255,255,255,.82) !important;
}
.ab-news-card .ab-news-visual,
.ab-news-card header,
.ab-news-image{
background:
radial-gradient(circle at 74% 24%,rgba(255,255,255,.20),transparent 30%),
radial-gradient(circle at 30% 20%,rgba(255,79,179,.14),transparent 32%),
linear-gradient(135deg,#111 0%,#3d2f16 48%,#c8a04a 100%) !important;
color:#fff !important;
}
.ab-news-card .cat,
.ab-news-card .category,
.ab-category{
color:#9b7430 !important;
background:#fff7dc !important;
border:1px solid rgba(214,173,75,.42) !important;
}
/* FAQ */
.ab-faq-item,
.ab-faq-item details,
.ab-faq-item summary,
.ab-faq-item .faq-question,
.ab-faq-item .faq-answer{
background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055)) !important;
color:#fff !important;
border-color:rgba(255,255,255,.16) !important;
}
.ab-faq-item summary,
.ab-faq-item h3,
.ab-faq-item .faq-question{
color:#fff !important;
}
.ab-faq-item p,
.ab-faq-item .faq-answer,
.ab-faq-item .faq-answer *{
color:rgba(255,255,255,.84) !important;
}
/* フッター */
.ab-footer{
background:
radial-gradient(circle at 20% 20%,rgba(255,79,179,.16),transparent 30%),
radial-gradient(circle at 80% 20%,rgba(56,189,248,.14),transparent 28%),
#02030a !important;
color:#fff !important;
border-top:1px solid rgba(255,255,255,.12) !important;
}
.ab-footer *,
.ab-footer a{
color:#fff !important;
}
/* 商品詳細 */
.ab-single-product-visual{
background:#050711 !important;
border:1px solid rgba(255,255,255,.14) !important;
}
.ab-single-product-visual::before{
display:none !important;
content:none !important;
}
.ab-single-product-info,
.ab-single-product-info *{
color:#fff !important;
}
.ab-single-product-info p{
color:rgba(255,255,255,.84) !important;
}
.ab-single-product-note{
display:none !important;
}
/* フォーム */
input,
textarea,
select{
background:rgba(255,255,255,.10) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.18) !important;
}
input::placeholder,
textarea::placeholder{
color:rgba(255,255,255,.55) !important;
}
input[type="number"]{
background:#fff !important;
color:#111 !important;
}
/* スマホ */
@media (max-width: 920px){
.ab-header{
background:rgba(2,3,10,.96) !important;
}
.ab-header nav,
.ab-nav,
.ab-menu{
background:#050711 !important;
}
}
@media (max-width: 620px){
.ab-container{
width:min(100% - 28px,1180px) !important;
}
.ab-cart-fixed{
right:14px !important;
bottom:14px !important;
}
.ab-news-card,
.ab-product,
.ab-product-card{
border-radius:28px !important;
}
}
/* =========================================================
指定CSS：v38親テーマに統合済み
========================================================= */
@media (max-width: 620px) {
.ab-device-wrap.has-custom-hero-image .ab-float {
display: block !important;
position: absolute;
z-index: 5;
max-width: 160px;
padding: 10px 12px;
border-radius: 18px;
font-size: 12px;
line-height: 1.35;
}
.ab-device-wrap.has-custom-hero-image .ab-float small {
font-size: 10px;
line-height: 1.45;
}
.ab-device-wrap.has-custom-hero-image .ab-float.one {
left: 10px;
top: 34px;
}
.ab-device-wrap.has-custom-hero-image .ab-float.two {
right: 10px;
bottom: 34px;
}
}
.ab-feature-visual.has-image:before {
display: none !important;
}
.ab-feature-visual.has-image .ab-device {
display: none !important;
}
.ab-feature-visual:has(img):before {
display: none !important;
}
.ab-feature-visual:has(img) {
background: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.ab-feature-visual:has(img) img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v2
宇宙感強化 / Gold依存を低減 / 視認性改善
========================================================= */
:root{
--cosmic-gold:#7dd3fc !important;
--cosmic-accent:#38bdf8;
--cosmic-accent2:#ff4fb3;
--cosmic-accent3:#a78bfa;
--cosmic-bright:#ffffff;
--cosmic-readable:#eaf2ff;
--cosmic-card:#080d20;
}
/* 全体をより宇宙寄りに */
body{
background:
radial-gradient(circle at 82% 8%, rgba(56,189,248,.30), transparent 24%),
radial-gradient(circle at 16% 16%, rgba(255,79,179,.25), transparent 28%),
radial-gradient(circle at 54% 38%, rgba(167,139,250,.22), transparent 36%),
radial-gradient(circle at 22% 72%, rgba(103,232,249,.12), transparent 32%),
radial-gradient(circle at 86% 78%, rgba(255,79,179,.12), transparent 30%),
linear-gradient(180deg,#01020a 0%,#050817 42%,#01020a 100%) !important;
}
/* 星空密度を強める */
body::before{
background:
radial-gradient(circle at 8% 10%, rgba(255,255,255,.95) 0 1px, transparent 2px),
radial-gradient(circle at 24% 18%, rgba(255,255,255,.70) 0 1px, transparent 2px),
radial-gradient(circle at 78% 22%, rgba(255,255,255,.68) 0 1px, transparent 2px),
radial-gradient(circle at 48% 12%, rgba(255,255,255,.58) 0 1px, transparent 2px),
radial-gradient(circle at 66% 68%, rgba(255,255,255,.54) 0 1px, transparent 2px),
radial-gradient(circle at 28% 74%, rgba(255,255,255,.62) 0 1px, transparent 2px),
radial-gradient(circle at 92% 44%, rgba(103,232,249,.70) 0 1px, transparent 2px),
radial-gradient(circle at 38% 54%, rgba(255,79,179,.62) 0 1px, transparent 2px),
linear-gradient(90deg, transparent 0 97%, rgba(255,255,255,.025) 98% 100%),
linear-gradient(0deg, transparent 0 97%, rgba(255,255,255,.020) 98% 100%) !important;
background-size:240px 240px,310px 310px,390px 390px,460px 460px,520px 520px,570px 570px,430px 430px,360px 360px,64px 64px,64px 64px !important;
opacity:.82 !important;
}
/* 星雲の色味をより強く */
body::after{
background:
conic-gradient(from 220deg at 62% 30%, transparent 0deg, rgba(255,79,179,.24) 24deg, rgba(56,189,248,.22) 58deg, transparent 105deg),
conic-gradient(from 40deg at 35% 62%, transparent 0deg, rgba(167,139,250,.20) 32deg, rgba(103,232,249,.12) 75deg, transparent 125deg),
radial-gradient(ellipse at 78% 34%, rgba(56,189,248,.18), transparent 40%),
radial-gradient(ellipse at 28% 30%, rgba(255,79,179,.15), transparent 42%) !important;
filter:blur(42px) !important;
opacity:.90 !important;
}
/* Gold部分を青紫ネオンへ寄せる */
.ab-kicker,
.ab-section .ab-kicker,
.ab-brand .tagline,
.ab-site-tagline,
.ab-logo-sub,
.site-description,
.price,
.ab-product .price,
.ab-product-price{
color:var(--cosmic-accent) !important;
text-shadow:0 0 18px rgba(56,189,248,.42) !important;
}
/* TOP白ラベルはGoldではなく濃紺＋シアン文字に */
.ab-pill,
.ab-badge,
.ab-tag,
.ab-hero .ab-tag,
.ab-hero .ab-pill,
.ab-hero .ab-badge{
background:linear-gradient(135deg,rgba(8,13,32,.94),rgba(18,25,48,.90)) !important;
color:#eafaff !important;
border:1px solid rgba(103,232,249,.34) !important;
box-shadow:0 12px 32px rgba(0,0,0,.30),0 0 28px rgba(56,189,248,.18) !important;
}
.ab-pill *,
.ab-badge *,
.ab-tag *{
color:#eafaff !important;
}
/* 吹き出しも宇宙グラス系に変更 */
.ab-float,
.ab-floating-note,
.ab-hero-note,
.ab-hero-bubble,
.ab-hero-card{
background:linear-gradient(135deg,rgba(8,13,32,.96),rgba(20,15,46,.92)) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.20) !important;
box-shadow:0 18px 42px rgba(0,0,0,.32),0 0 24px rgba(255,79,179,.16),0 0 22px rgba(56,189,248,.12) !important;
}
.ab-float *,
.ab-floating-note *,
.ab-hero-note *,
.ab-hero-bubble *,
.ab-hero-card *{
color:#fff !important;
}
.ab-float small,
.ab-floating-note small{
color:rgba(255,255,255,.78) !important;
}
/* ヒーローをさらに宇宙感強め */
.ab-hero{
background:
radial-gradient(circle at 78% 30%, rgba(56,189,248,.34), transparent 28%),
radial-gradient(circle at 26% 36%, rgba(255,79,179,.28), transparent 36%),
radial-gradient(circle at 54% 56%, rgba(167,139,250,.22), transparent 42%),
linear-gradient(135deg,#01020a 0%,#071026 58%,#03040a 100%) !important;
}
.ab-hero::before{
background:
radial-gradient(circle at 20% 22%, rgba(255,255,255,.20) 0 1px, transparent 2px),
radial-gradient(circle at 70% 26%, rgba(255,255,255,.14) 0 1px, transparent 2px),
radial-gradient(circle at 86% 52%, rgba(255,255,255,.16) 0 1px, transparent 2px),
linear-gradient(105deg, transparent 8%, rgba(255,79,179,.25), rgba(56,189,248,.22), transparent 72%) !important;
opacity:1 !important;
}
.ab-hero::after{
background:linear-gradient(90deg,transparent,rgba(255,79,179,.66),rgba(56,189,248,.56),rgba(167,139,250,.40),transparent) !important;
opacity:.72 !important;
}
/* 商品カード・NEWS・FAQをより読みやすく */
.ab-card,
.ab-product,
.ab-product-card,
.ab-scene,
.ab-feature,
.ab-step,
.ab-faq-item,
.ab-news-card,
.ab-ambassador-card{
background:
radial-gradient(circle at 80% 12%, rgba(56,189,248,.08), transparent 28%),
radial-gradient(circle at 10% 20%, rgba(255,79,179,.07), transparent 30%),
linear-gradient(180deg,rgba(10,14,31,.94),rgba(5,8,20,.96)) !important;
border:1px solid rgba(103,232,249,.16) !important;
box-shadow:0 28px 90px rgba(0,0,0,.50),0 0 28px rgba(56,189,248,.06) !important;
}
.ab-card *,
.ab-product *,
.ab-product-card *,
.ab-scene *,
.ab-feature *,
.ab-step *,
.ab-faq-item *,
.ab-news-card *,
.ab-ambassador-card *{
color:#fff !important;
}
.ab-card p,
.ab-product p,
.ab-product-card p,
.ab-scene p,
.ab-feature p,
.ab-step p,
.ab-faq-item p,
.ab-news-card p,
.ab-ambassador-card p{
color:rgba(234,242,255,.82) !important;
}
/* 商品画像枠も宇宙風グロー */
.ab-product-visual,
.ab-product-image{
background:
radial-gradient(circle at 50% 18%,rgba(255,255,255,.92),rgba(255,255,255,.28) 28%,rgba(56,189,248,.20) 52%,rgba(255,79,179,.14) 78%,rgba(7,10,24,.80) 100%) !important;
}
/* PRODUCT DESIGNは画像が入っていない時だけ宇宙背景 */
.ab-feature-visual:not(:has(img)){
background:
radial-gradient(circle at 30% 20%,rgba(255,79,179,.24),transparent 30%),
radial-gradient(circle at 78% 35%,rgba(56,189,248,.24),transparent 32%),
radial-gradient(circle at 52% 65%,rgba(167,139,250,.18),transparent 36%),
linear-gradient(145deg,#050817,#101833) !important;
}
/* NEWSのGold帯をネオンに変更 */
.ab-news-card .ab-news-visual,
.ab-news-card header,
.ab-news-image{
background:
radial-gradient(circle at 74% 24%,rgba(255,255,255,.20),transparent 30%),
radial-gradient(circle at 30% 20%,rgba(255,79,179,.22),transparent 32%),
linear-gradient(135deg,#050817 0%,#172554 48%,#0ea5e9 100%) !important;
color:#fff !important;
}
.ab-news-card .cat,
.ab-news-card .category,
.ab-category{
color:#06111f !important;
background:#bff4ff !important;
border:1px solid rgba(103,232,249,.65) !important;
}
/* CTAのGold基調を宇宙ネオンに */
.ab-cta,
.ab-cta-banner,
.ab-cta-box,
.ab-callout,
.ab-bottom-cta{
background:
radial-gradient(circle at 78% 50%,rgba(56,189,248,.24),transparent 26%),
radial-gradient(circle at 30% 50%,rgba(255,79,179,.22),transparent 30%),
linear-gradient(90deg,#050817 0%,#20104a 45%,#075985 100%) !important;
color:#fff !important;
border:1px solid rgba(103,232,249,.20) !important;
}
/* フッターも星雲 */
.ab-footer{
background:
radial-gradient(circle at 18% 18%,rgba(255,79,179,.20),transparent 30%),
radial-gradient(circle at 82% 24%,rgba(56,189,248,.18),transparent 28%),
radial-gradient(circle at 50% 70%,rgba(167,139,250,.10),transparent 34%),
#01020a !important;
}
/* 入力フォーム・カート周りの見えない文字対策 */
input,
textarea,
select{
background:rgba(255,255,255,.12) !important;
color:#fff !important;
border:1px solid rgba(103,232,249,.22) !important;
}
input[type="number"],
.ab-product input[type="number"]{
background:#fff !important;
color:#111 !important;
}
.ab-product button,
.ab-product input[type="submit"],
.ab-product .ab-btn{
color:#fff !important;
}
/* 強制的な黒文字残り対策 */
.ab-section [style*="color:#111"],
.ab-section [style*="color: #111"],
.ab-section [style*="color:#000"],
.ab-section [style*="color: #000"],
.ab-section [style*="color: rgb(0"],
.ab-section [style*="color:rgb(0"]{
color:#fff !important;
}
/* スマホ */
@media (max-width: 620px){
.ab-hero::after{
opacity:.46 !important;
}
.ab-float{
background:linear-gradient(135deg,rgba(8,13,32,.96),rgba(20,15,46,.92)) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v3
NEWSタブ色・カテゴリ種別色を宇宙ネオン系へ変更
========================================================= */
/* NEWSカード上部タブ/サムネイル部分：Goldから宇宙ネオンへ */
.ab-news-card .ab-news-visual,
.ab-news-card header,
.ab-news-image,
.ab-news-card .news-thumb,
.ab-news-card .post-thumb,
.ab-news-card .entry-thumb {
background:
radial-gradient(circle at 72% 22%, rgba(103,232,249,.28), transparent 30%),
radial-gradient(circle at 24% 24%, rgba(255,79,179,.26), transparent 34%),
radial-gradient(circle at 50% 82%, rgba(167,139,250,.20), transparent 38%),
linear-gradient(135deg,#050817 0%,#111a3a 46%,#0f2f66 100%) !important;
color:#ffffff !important;
border-bottom:1px solid rgba(103,232,249,.18) !important;
box-shadow: inset 0 0 42px rgba(56,189,248,.10), inset 0 0 54px rgba(255,79,179,.08) !important;
}
/* NEWS文字も少しネオン感 */
.ab-news-card .ab-news-visual *,
.ab-news-card header *,
.ab-news-image *,
.ab-news-card .news-thumb *,
.ab-news-card .post-thumb *,
.ab-news-card .entry-thumb * {
color:#ffffff !important;
text-shadow:0 0 16px rgba(103,232,249,.28) !important;
}
/* NEWSという固定ラベルがある場合 */
.ab-news-card .ab-news-visual::before,
.ab-news-card header::before,
.ab-news-image::before {
color:#ffffff !important;
text-shadow:0 0 18px rgba(103,232,249,.35),0 0 22px rgba(255,79,179,.24) !important;
}
/* カテゴリ/種別ラベル：白金からネオンピルへ */
.ab-news-card .cat,
.ab-news-card .category,
.ab-category,
.ab-news-category,
.post-category,
.entry-category,
.cat-links a,
.ab-news-card .tag,
.ab-news-card .label {
background:
linear-gradient(135deg, rgba(255,79,179,.95) 0%, rgba(139,92,246,.95) 52%, rgba(56,189,248,.95) 100%) !important;
color:#ffffff !important;
border:1px solid rgba(255,255,255,.30) !important;
box-shadow:0 10px 28px rgba(139,92,246,.28),0 0 18px rgba(56,189,248,.18) !important;
text-shadow:none !important;
}
/* カテゴリ内テキストの強制白 */
.ab-news-card .cat *,
.ab-news-card .category *,
.ab-category *,
.ab-news-category *,
.post-category *,
.entry-category *,
.cat-links a *,
.ab-news-card .tag *,
.ab-news-card .label * {
color:#ffffff !important;
}
/* カテゴリがボタン/リンクの場合のホバー */
.ab-news-card .cat:hover,
.ab-news-card .category:hover,
.ab-category:hover,
.ab-news-category:hover,
.post-category:hover,
.entry-category:hover,
.cat-links a:hover {
filter:brightness(1.12);
transform:translateY(-1px);
}
/* 日付も視認性UP */
.ab-news-card time,
.ab-news-card .date,
.ab-news-date,
.entry-date,
.post-date {
color:#eafaff !important;
text-shadow:0 0 14px rgba(56,189,248,.26) !important;
}
/* NEWSカード枠を宇宙感強めに */
.ab-news-card {
background:
radial-gradient(circle at 80% 10%, rgba(56,189,248,.10), transparent 32%),
radial-gradient(circle at 10% 18%, rgba(255,79,179,.09), transparent 34%),
linear-gradient(180deg,#0c1125 0%,#050817 100%) !important;
border:1px solid rgba(103,232,249,.18) !important;
box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 28px rgba(56,189,248,.08) !important;
}
/* タブ色がインラインや別クラスで残る場合の広め救済 */
[class*="news"] [class*="visual"],
[class*="news"] [class*="thumb"] {
border-color:rgba(103,232,249,.18) !important;
}
/* Gold系背景がNEWS内部に残る場合 */
.ab-news-card [style*="background"] {
color:#fff !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v4
NEWSタブ色と種別バッジ色の直接修正版
========================================================= */
/* NEWSカード上部タブ背景（実クラス .ab-news-thumb を直接変更） */
.ab-news-thumb,
.ab-news-card .ab-news-thumb,
.ab-news-card > .ab-news-thumb {
background:
radial-gradient(circle at 18% 18%, rgba(255, 76, 172, .32), transparent 28%),
radial-gradient(circle at 82% 24%, rgba(94, 234, 255, .24), transparent 28%),
radial-gradient(circle at 55% 80%, rgba(157, 78, 221, .18), transparent 34%),
linear-gradient(135deg, #060816 0%, #1a1236 42%, #0a2f55 100%) !important;
color: #ffffff !important;
border-bottom: 1px solid rgba(94, 234, 255, .24) !important;
box-shadow: inset 0 0 50px rgba(71, 180, 255, .10), inset 0 0 65px rgba(255, 76, 172, .10) !important;
}
.ab-news-thumb span,
.ab-news-card .ab-news-thumb span,
.ab-news-card .ab-news-thumb * {
color: #ffffff !important;
text-shadow: 0 0 18px rgba(94,234,255,.28), 0 0 18px rgba(255,76,172,.18) !important;
}
/* 種別バッジ（実クラス .ab-cat-badge を直接変更） */
.ab-cat-badge,
.ab-news-card .ab-cat-badge,
.ab-news-body .ab-cat-badge,
.ab-cat-badges a.ab-cat-badge {
background: linear-gradient(135deg, #ff4cac 0%, #8b5cf6 55%, #38bdf8 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.34) !important;
box-shadow: 0 10px 24px rgba(139,92,246,.28), 0 0 18px rgba(56,189,248,.20) !important;
text-shadow: none !important;
}
.ab-cat-badge:hover,
.ab-news-card .ab-cat-badge:hover,
.ab-cat-badges a.ab-cat-badge:hover {
filter: brightness(1.10);
color:#ffffff !important;
transform: translateY(-1px);
}
/* バッジ内テキスト強制白 */
.ab-cat-badge *,
.ab-news-card .ab-cat-badge * {
color:#ffffff !important;
}
/* 日付色もタブ色に合わせて微調整 */
.ab-news-body time,
.ab-news-card .ab-news-body time {
color: #dff7ff !important;
text-shadow: 0 0 12px rgba(56,189,248,.18);
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v5
視認性改善・宇宙感強化・Gold残り除去
========================================================= */
/* -----------------------------------------
1. TOP小ラベルを見やすい濃紺ネオンに変更
----------------------------------------- */
.ab-pill,
.ab-badge,
.ab-tag,
.ab-hero .ab-tag,
.ab-hero .ab-pill,
.ab-hero .ab-badge {
background:
radial-gradient(circle at 8% 50%, rgba(255,190,76,.85) 0 8px, transparent 9px),
linear-gradient(135deg, rgba(5,9,26,.96) 0%, rgba(14,19,46,.96) 56%, rgba(10,30,58,.94) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.52) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.06) inset,
0 12px 32px rgba(0,0,0,.34),
0 0 24px rgba(56,189,248,.22),
0 0 28px rgba(255,79,179,.12) !important;
text-shadow: 0 0 12px rgba(255,255,255,.22) !important;
}
.ab-pill *,
.ab-badge *,
.ab-tag *,
.ab-hero .ab-tag *,
.ab-hero .ab-pill *,
.ab-hero .ab-badge * {
color: #ffffff !important;
}
/* 小ラベル内の丸アイコンが別要素の場合 */
.ab-pill::before,
.ab-badge::before,
.ab-tag::before {
background: #f7b94a !important;
box-shadow: 0 0 16px rgba(247,185,74,.75) !important;
}
/* -----------------------------------------
2. ヒーロー背景を少し暗くして文字視認性UP
----------------------------------------- */
.ab-hero {
background:
radial-gradient(circle at 76% 28%, rgba(56,189,248,.28), transparent 28%),
radial-gradient(circle at 30% 36%, rgba(255,79,179,.24), transparent 36%),
radial-gradient(circle at 54% 58%, rgba(167,139,250,.18), transparent 42%),
linear-gradient(135deg,#01020a 0%,#071026 56%,#02030a 100%) !important;
}
.ab-hero::before {
background:
radial-gradient(circle at 18% 24%, rgba(255,255,255,.16) 0 1px, transparent 2px),
radial-gradient(circle at 72% 24%, rgba(255,255,255,.14) 0 1px, transparent 2px),
radial-gradient(circle at 86% 54%, rgba(255,255,255,.14) 0 1px, transparent 2px),
linear-gradient(105deg, rgba(0,0,0,.18) 0%, rgba(255,79,179,.18) 30%, rgba(56,189,248,.16) 58%, rgba(0,0,0,.10) 100%) !important;
}
.ab-hero h1 {
color: #ffffff !important;
text-shadow:
0 4px 18px rgba(0,0,0,.45),
0 0 32px rgba(255,79,179,.22),
0 0 42px rgba(56,189,248,.12) !important;
}
.ab-hero p {
color: rgba(255,255,255,.90) !important;
text-shadow: 0 3px 12px rgba(0,0,0,.35) !important;
}
/* -----------------------------------------
3. Aroma / Easy Charge 吹き出し視認性UP
----------------------------------------- */
.ab-float,
.ab-floating-note,
.ab-hero-note,
.ab-hero-bubble,
.ab-hero-card {
background:
linear-gradient(135deg, rgba(4,8,25,.96) 0%, rgba(18,18,50,.94) 60%, rgba(10,31,58,.92) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.30) !important;
box-shadow:
0 18px 42px rgba(0,0,0,.38),
0 0 24px rgba(56,189,248,.16),
0 0 20px rgba(255,79,179,.12) !important;
}
.ab-float *,
.ab-floating-note *,
.ab-hero-note *,
.ab-hero-bubble *,
.ab-hero-card * {
color: #ffffff !important;
}
.ab-float small,
.ab-floating-note small,
.ab-hero-note small,
.ab-hero-bubble small,
.ab-hero-card small {
color: rgba(255,255,255,.82) !important;
}
/* -----------------------------------------
4. NEWSタブ色を完全にGoldから変更
----------------------------------------- */
.ab-news-thumb,
.ab-news-card .ab-news-thumb,
.ab-news-card > .ab-news-thumb {
background:
radial-gradient(circle at 18% 18%, rgba(255, 76, 172, .34), transparent 28%),
radial-gradient(circle at 82% 24%, rgba(94, 234, 255, .30), transparent 28%),
radial-gradient(circle at 55% 82%, rgba(157, 78, 221, .22), transparent 34%),
linear-gradient(135deg, #050817 0%, #15143a 46%, #082f5f 100%) !important;
color: #ffffff !important;
border-bottom: 1px solid rgba(94, 234, 255, .26) !important;
box-shadow:
inset 0 0 55px rgba(71, 180, 255, .13),
inset 0 0 70px rgba(255, 76, 172, .12),
0 0 22px rgba(56,189,248,.08) !important;
}
.ab-news-thumb span,
.ab-news-card .ab-news-thumb span,
.ab-news-card .ab-news-thumb * {
color: #ffffff !important;
text-shadow: 0 0 18px rgba(94,234,255,.30), 0 0 18px rgba(255,76,172,.20) !important;
}
/* NEWS文字がspanではなく直接の場合も */
.ab-news-thumb {
text-shadow: 0 0 18px rgba(94,234,255,.30), 0 0 18px rgba(255,76,172,.20) !important;
}
/* -----------------------------------------
5. 種別/カテゴリバッジを濃色ネオンに変更
----------------------------------------- */
.ab-cat-badge,
.ab-news-card .ab-cat-badge,
.ab-news-body .ab-cat-badge,
.ab-cat-badges a.ab-cat-badge,
.ab-news-card .cat,
.ab-news-card .category,
.ab-category,
.ab-news-category,
.post-category,
.entry-category,
.cat-links a {
background:
linear-gradient(135deg, rgba(255,76,172,.96) 0%, rgba(139,92,246,.96) 54%, rgba(56,189,248,.96) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.34) !important;
box-shadow:
0 10px 24px rgba(139,92,246,.28),
0 0 18px rgba(56,189,248,.22),
0 0 14px rgba(255,76,172,.16) !important;
text-shadow: none !important;
}
.ab-cat-badge *,
.ab-news-card .ab-cat-badge *,
.ab-news-card .cat *,
.ab-news-card .category *,
.ab-category *,
.ab-news-category *,
.post-category *,
.entry-category *,
.cat-links a * {
color: #ffffff !important;
}
.ab-cat-badge:hover,
.ab-news-card .ab-cat-badge:hover,
.ab-cat-badges a.ab-cat-badge:hover,
.ab-news-card .cat:hover,
.ab-news-card .category:hover,
.ab-category:hover {
filter: brightness(1.12);
color:#ffffff !important;
transform: translateY(-1px);
}
/* 日付も白系に */
.ab-news-body time,
.ab-news-card .ab-news-body time,
.ab-news-card time,
.ab-news-card .date,
.ab-news-date,
.entry-date,
.post-date {
color: #eafaff !important;
text-shadow: 0 0 12px rgba(56,189,248,.22) !important;
}
/* -----------------------------------------
6. Gold系CTA/帯の残りを宇宙ネオンに
----------------------------------------- */
.ab-cta,
.ab-cta-banner,
.ab-cta-box,
.ab-callout,
.ab-bottom-cta {
background:
radial-gradient(circle at 78% 50%, rgba(56,189,248,.26), transparent 26%),
radial-gradient(circle at 28% 50%, rgba(255,79,179,.24), transparent 30%),
radial-gradient(circle at 50% 100%, rgba(167,139,250,.20), transparent 36%),
linear-gradient(90deg,#050817 0%,#20104a 45%,#075985 100%) !important;
color:#fff !important;
border:1px solid rgba(103,232,249,.22) !important;
box-shadow: 0 26px 84px rgba(0,0,0,.42), 0 0 28px rgba(56,189,248,.10) !important;
}
.ab-cta *,
.ab-cta-banner *,
.ab-cta-box *,
.ab-callout *,
.ab-bottom-cta * {
color:#fff !important;
}
/* -----------------------------------------
7. カード類の文字が消えないよう最終補正
----------------------------------------- */
.ab-card,
.ab-product,
.ab-product-card,
.ab-scene,
.ab-feature,
.ab-step,
.ab-faq-item,
.ab-news-card,
.ab-ambassador-card {
background:
radial-gradient(circle at 82% 12%, rgba(56,189,248,.10), transparent 32%),
radial-gradient(circle at 10% 18%, rgba(255,79,179,.09), transparent 34%),
linear-gradient(180deg, rgba(10,14,31,.96), rgba(5,8,20,.98)) !important;
border: 1px solid rgba(103,232,249,.18) !important;
}
.ab-card *,
.ab-product *,
.ab-product-card *,
.ab-scene *,
.ab-feature *,
.ab-step *,
.ab-faq-item *,
.ab-news-card *,
.ab-ambassador-card * {
color:#ffffff !important;
}
.ab-card p,
.ab-product p,
.ab-product-card p,
.ab-scene p,
.ab-feature p,
.ab-step p,
.ab-faq-item p,
.ab-news-card p,
.ab-ambassador-card p {
color: rgba(234,242,255,.84) !important;
}
/* -----------------------------------------
8. 旧Gold色の残りをシアン系に置換
----------------------------------------- */
[style*="#c6a45d"],
[style*="#c8a04a"],
[style*="#d6ad4b"],
[style*="#9b7b36"],
[style*="#8a6d31"] {
color: #eafaff !important;
}
/* 価格だけはややシアンゴールド */
.price,
.ab-product .price,
.ab-product-price {
color: #7dd3fc !important;
text-shadow: 0 0 14px rgba(125,211,252,.26) !important;
}
/* -----------------------------------------
9. スマホ用
----------------------------------------- */
@media (max-width: 620px) {
.ab-pill,
.ab-badge,
.ab-tag,
.ab-hero .ab-tag,
.ab-hero .ab-pill,
.ab-hero .ab-badge {
padding-left: 42px !important;
}
.ab-float,
.ab-floating-note,
.ab-hero-note,
.ab-hero-bubble,
.ab-hero-card {
background: linear-gradient(135deg, rgba(4,8,25,.96), rgba(18,18,50,.94)) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v6
特徴セクション番号部分をHTML構造側に合わせて強制修正
========================================================= */
/* v38/v5系の特徴カード実クラス対策 */
.ab-feature-list,
.ab-features-list,
.ab-point-list,
.ab-benefit-list,
.ab-feature-points {
position: relative;
}
/* 特徴カード本体を横並びカードとして安定化 */
.ab-feature-list > *,
.ab-features-list > *,
.ab-point-list > *,
.ab-benefit-list > *,
.ab-feature-points > *,
.ab-feature-card,
.ab-feature-item,
.ab-point-card,
.ab-benefit-card {
position: relative !important;
overflow: hidden !important;
background:
radial-gradient(circle at 82% 12%, rgba(56,189,248,.12), transparent 32%),
radial-gradient(circle at 8% 18%, rgba(255,79,179,.10), transparent 34%),
linear-gradient(180deg, rgba(8,13,31,.98), rgba(3,7,18,.98)) !important;
border: 1px solid rgba(103,232,249,.20) !important;
box-shadow: 0 26px 80px rgba(0,0,0,.48), 0 0 28px rgba(56,189,248,.08) !important;
}
/* 左の暗い帯を無効化 */
.ab-feature-list > *::before,
.ab-features-list > *::before,
.ab-point-list > *::before,
.ab-benefit-list > *::before,
.ab-feature-points > *::before,
.ab-feature-card::before,
.ab-feature-item::before,
.ab-point-card::before,
.ab-benefit-card::before {
display: none !important;
content: none !important;
}
/* 番号丸：考えられる全クラスに対応 */
.ab-feature-list > * > :first-child,
.ab-features-list > * > :first-child,
.ab-point-list > * > :first-child,
.ab-benefit-list > * > :first-child,
.ab-feature-points > * > :first-child,
.ab-feature-card > :first-child,
.ab-feature-item > :first-child,
.ab-point-card > :first-child,
.ab-benefit-card > :first-child,
.ab-step-num,
.ab-step-number,
.ab-feature-num,
.ab-feature-number,
.ab-feature-index,
.ab-feature-no,
.ab-num,
.ab-number,
.ab-index,
.ab-no {
background: linear-gradient(135deg, #ff4fac 0%, #8b5cf6 52%, #38bdf8 100%) !important;
color: #ffffff !important;
border: 2px solid rgba(255,255,255,.26) !important;
box-shadow:
0 12px 26px rgba(0,0,0,.38),
0 0 20px rgba(139,92,246,.34),
0 0 18px rgba(56,189,248,.22) !important;
text-shadow: none !important;
}
/* ただし first-child が本文ラッパーの場合でも中の番号だけ補正 */
.ab-feature-list > * > :first-child span:first-child,
.ab-features-list > * > :first-child span:first-child,
.ab-point-list > * > :first-child span:first-child,
.ab-benefit-list > * > :first-child span:first-child,
.ab-feature-points > * > :first-child span:first-child,
.ab-feature-card > :first-child span:first-child,
.ab-feature-item > :first-child span:first-child,
.ab-point-card > :first-child span:first-child,
.ab-benefit-card > :first-child span:first-child {
color:#ffffff !important;
}
/* 番号内の文字 */
.ab-step-num *,
.ab-step-number *,
.ab-feature-num *,
.ab-feature-number *,
.ab-feature-index *,
.ab-feature-no *,
.ab-num *,
.ab-number *,
.ab-index *,
.ab-no * {
color: #ffffff !important;
opacity: 1 !important;
}
/* カード内の見出し・説明 */
.ab-feature-list h3,
.ab-features-list h3,
.ab-point-list h3,
.ab-benefit-list h3,
.ab-feature-points h3,
.ab-feature-card h3,
.ab-feature-item h3,
.ab-point-card h3,
.ab-benefit-card h3 {
color: #ffffff !important;
text-shadow: 0 2px 12px rgba(0,0,0,.28), 0 0 16px rgba(56,189,248,.08) !important;
}
.ab-feature-list p,
.ab-features-list p,
.ab-point-list p,
.ab-benefit-list p,
.ab-feature-points p,
.ab-feature-card p,
.ab-feature-item p,
.ab-point-card p,
.ab-benefit-card p {
color: rgba(234,242,255,.86) !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-step-num,
.ab-step-number,
.ab-feature-num,
.ab-feature-number,
.ab-feature-index,
.ab-feature-no,
.ab-num,
.ab-number,
.ab-index,
.ab-no {
width: 62px !important;
height: 62px !important;
min-width: 62px !important;
font-size: 24px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v7
TOP左上メインラベルをHTML構造に合わせて直接修正
========================================================= */
/* まず専用クラスを最優先で強制変更 */
.ab-hero-main-pill,
.ab-hero .ab-hero-main-pill {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
width: auto !important;
max-width: none !important;
padding: 14px 26px 14px 42px !important;
border-radius: 999px !important;
background:
radial-gradient(circle at 20px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, rgba(4,8,24,.98) 0%, rgba(13,22,50,.98) 54%, rgba(7,43,74,.96) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.58) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.07) inset,
0 10px 28px rgba(0,0,0,.38),
0 0 24px rgba(56,189,248,.25),
0 0 26px rgba(255,79,179,.13) !important;
text-shadow: 0 0 10px rgba(255,255,255,.26) !important;
opacity: 1 !important;
}
.ab-hero-main-pill *,
.ab-hero .ab-hero-main-pill * {
color:#ffffff !important;
opacity:1 !important;
}
/* v38の元クラスに直接対応：対象を広めに上書き */
.ab-hero .ab-copy > .ab-pill:first-child,
.ab-hero .ab-copy > .ab-badge:first-child,
.ab-hero .ab-copy > .ab-tag:first-child,
.ab-hero .ab-hero-copy > .ab-pill:first-child,
.ab-hero .ab-hero-copy > .ab-badge:first-child,
.ab-hero .ab-hero-copy > .ab-tag:first-child,
.ab-hero .ab-hero-text > .ab-pill:first-child,
.ab-hero .ab-hero-text > .ab-badge:first-child,
.ab-hero .ab-hero-text > .ab-tag:first-child,
.ab-hero .ab-content > .ab-pill:first-child,
.ab-hero .ab-content > .ab-badge:first-child,
.ab-hero .ab-content > .ab-tag:first-child,
.ab-hero .ab-container .ab-pill:first-of-type,
.ab-hero .ab-container .ab-badge:first-of-type,
.ab-hero .ab-container .ab-tag:first-of-type {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
max-width: none !important;
padding: 14px 26px 14px 42px !important;
border-radius: 999px !important;
background:
radial-gradient(circle at 20px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, rgba(4,8,24,.98) 0%, rgba(13,22,50,.98) 54%, rgba(7,43,74,.96) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.58) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.07) inset,
0 10px 28px rgba(0,0,0,.38),
0 0 24px rgba(56,189,248,.25),
0 0 26px rgba(255,79,179,.13) !important;
text-shadow: 0 0 10px rgba(255,255,255,.26) !important;
opacity: 1 !important;
}
.ab-hero .ab-copy > .ab-pill:first-child *,
.ab-hero .ab-copy > .ab-badge:first-child *,
.ab-hero .ab-copy > .ab-tag:first-child *,
.ab-hero .ab-hero-copy > .ab-pill:first-child *,
.ab-hero .ab-hero-copy > .ab-badge:first-child *,
.ab-hero .ab-hero-copy > .ab-tag:first-child *,
.ab-hero .ab-hero-text > .ab-pill:first-child *,
.ab-hero .ab-hero-text > .ab-badge:first-child *,
.ab-hero .ab-hero-text > .ab-tag:first-child *,
.ab-hero .ab-content > .ab-pill:first-child *,
.ab-hero .ab-content > .ab-badge:first-child *,
.ab-hero .ab-content > .ab-tag:first-child *,
.ab-hero .ab-container .ab-pill:first-of-type *,
.ab-hero .ab-container .ab-badge:first-of-type *,
.ab-hero .ab-container .ab-tag:first-of-type * {
color:#ffffff !important;
opacity:1 !important;
}
/* 擬似要素の金丸が残る場合は非表示化。背景側の丸に置き換え済み */
.ab-hero-main-pill::before,
.ab-hero .ab-hero-main-pill::before,
.ab-hero .ab-container .ab-pill:first-of-type::before,
.ab-hero .ab-container .ab-badge:first-of-type::before,
.ab-hero .ab-container .ab-tag:first-of-type::before {
display:none !important;
content:none !important;
}
/* カスタマイザー編集用の青い鉛筆アイコンが近い時も文字に被らないよう調整 */
.ab-hero .customize-partial-edit-shortcut {
z-index: 20 !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-hero-main-pill,
.ab-hero .ab-hero-main-pill,
.ab-hero .ab-container .ab-pill:first-of-type,
.ab-hero .ab-container .ab-badge:first-of-type,
.ab-hero .ab-container .ab-tag:first-of-type {
padding: 11px 18px 11px 38px !important;
font-size: 13px !important;
line-height: 1.4 !important;
background:
radial-gradient(circle at 18px 50%, #f7b94a 0 5px, transparent 6px),
linear-gradient(135deg, rgba(4,8,24,.98) 0%, rgba(13,22,50,.98) 54%, rgba(7,43,74,.96) 100%) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v9
v8で発生した崩れの復旧版
- JS強制変更を廃止
- ヒーロー全体への広すぎる指定を廃止
- TOP左上ラベルだけを安全に変更
========================================================= */
/* ヒーローレイアウト復旧 */
.ab-hero,
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-copy,
.ab-hero-text,
.ab-copy,
.ab-content {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
.ab-hero h1,
.ab-hero p,
.ab-hero .ab-btn,
.ab-hero .ab-btns,
.ab-hero .ab-actions {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
}
/* カラム崩れ復旧 */
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr) !important;
align-items: center !important;
gap: clamp(32px, 5vw, 80px) !important;
}
@media (max-width: 920px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
}
/* TOP左上のラベルだけ安全に変更 */
.ab-hero-main-pill,
.ab-hero .ab-hero-main-pill {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
width: auto !important;
max-width: 100% !important;
padding: 13px 26px 13px 44px !important;
line-height: 1.35 !important;
white-space: nowrap !important;
border-radius: 999px !important;
background:
radial-gradient(circle at 21px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, rgba(4,8,24,.98) 0%, rgba(13,22,50,.98) 54%, rgba(7,43,74,.96) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.58) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.07) inset,
0 10px 28px rgba(0,0,0,.38),
0 0 24px rgba(56,189,248,.25),
0 0 26px rgba(255,79,179,.13) !important;
text-shadow: 0 0 10px rgba(255,255,255,.28) !important;
opacity: 1 !important;
}
.ab-hero-main-pill *,
.ab-hero .ab-hero-main-pill * {
color:#ffffff !important;
opacity:1 !important;
}
/* 元の丸アイコンが残る場合は非表示。背景側で再現済み */
.ab-hero-main-pill::before,
.ab-hero-main-pill::after,
.ab-hero .ab-hero-main-pill::before,
.ab-hero .ab-hero-main-pill::after {
display:none !important;
content:none !important;
}
/* TOPラベルが専用クラス未付与でも最低限文字色だけ改善 */
.ab-hero .ab-pill,
.ab-hero .ab-badge,
.ab-hero .ab-tag,
.ab-hero .ab-hero-badge,
.ab-hero .ab-hero-kicker,
.ab-hero .ab-eyebrow {
color:#ffffff !important;
}
.ab-hero .ab-pill *,
.ab-hero .ab-badge *,
.ab-hero .ab-tag *,
.ab-hero .ab-hero-badge *,
.ab-hero .ab-hero-kicker *,
.ab-hero .ab-eyebrow * {
color:#ffffff !important;
}
/* 小さいラベルだけに濃色背景を適用。ヒーロー全体には絶対に当てない */
.ab-hero .ab-pill:not(.ab-float),
.ab-hero .ab-badge:not(.ab-float),
.ab-hero .ab-tag:not(.ab-float),
.ab-hero .ab-hero-badge,
.ab-hero .ab-hero-kicker,
.ab-hero .ab-eyebrow {
background:
radial-gradient(circle at 21px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, rgba(4,8,24,.98) 0%, rgba(13,22,50,.98) 54%, rgba(7,43,74,.96) 100%) !important;
border: 1px solid rgba(103,232,249,.50) !important;
}
/* ヒーロー説明文・ボタン復旧 */
.ab-hero .ab-btn,
.ab-hero .ab-btns a,
.ab-hero .ab-actions a {
writing-mode: horizontal-tb !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-hero-main-pill,
.ab-hero .ab-hero-main-pill {
white-space: normal !important;
padding: 11px 18px 11px 40px !important;
font-size: 13px !important;
background:
radial-gradient(circle at 19px 50%, #f7b94a 0 5px, transparent 6px),
linear-gradient(135deg, rgba(4,8,24,.98) 0%, rgba(13,22,50,.98) 54%, rgba(7,43,74,.96) 100%) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v10
TOP左上ラベル：原因対策版
WordPressカスタマイザーの「追加CSS/テーマ側CSSの順序」で負けないよう、
head末尾に専用CSSも出力します。
========================================================= */
/* レイアウト保護 */
.ab-hero,
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-copy,
.ab-hero-text,
.ab-copy,
.ab-content {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
word-break: normal !important;
}
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr) !important;
align-items: center !important;
gap: clamp(32px, 5vw, 80px) !important;
}
@media (max-width: 920px) {
.ab-hero-grid { grid-template-columns: 1fr !important; }
}
/* 専用クラス */
.ab-hero-main-pill {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
max-width: 100% !important;
padding: 13px 26px 13px 44px !important;
border-radius: 999px !important;
white-space: nowrap !important;
line-height: 1.35 !important;
background:
radial-gradient(circle at 21px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, #040818 0%, #0d1632 54%, #072b4a 100%) !important;
color: #fff !important;
border: 1px solid rgba(103,232,249,.62) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 10px 28px rgba(0,0,0,.38),
0 0 24px rgba(56,189,248,.25),
0 0 26px rgba(255,79,179,.13) !important;
text-shadow: 0 0 10px rgba(255,255,255,.28) !important;
opacity: 1 !important;
}
.ab-hero-main-pill *,
.ab-hero .ab-hero-main-pill * {
color:#fff !important;
opacity:1 !important;
}
.ab-hero-main-pill::before,
.ab-hero-main-pill::after {
display:none !important;
content:none !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v11
大きな楕円ライン削除 / 白丸・白背景ラベルの視認性改善
========================================================= */
/* TOPヒーローの大きな楕円ラインを削除 */
.ab-hero::before,
.ab-hero::after,
.ab-hero-grid::before,
.ab-hero-grid::after,
.ab-hero .ab-container::before,
.ab-hero .ab-container::after,
.ab-hero-visual::before,
.ab-hero-visual::after,
.ab-device-wrap::before,
.ab-device-wrap::after,
.ab-device-wrap.has-custom-hero-image::before,
.ab-device-wrap.has-custom-hero-image::after {
border: none !important;
outline: none !important;
}
.ab-hero::after,
.ab-hero-grid::after,
.ab-hero .ab-container::after,
.ab-hero-visual::after,
.ab-device-wrap::after,
.ab-device-wrap.has-custom-hero-image::after {
display: none !important;
content: none !important;
}
/* 宇宙背景は残し、楕円線だけ消す */
.ab-hero {
background:
radial-gradient(circle at 76% 30%, rgba(56,189,248,.20), transparent 30%),
radial-gradient(circle at 28% 38%, rgba(255,79,179,.19), transparent 36%),
radial-gradient(circle at 54% 58%, rgba(167,139,250,.13), transparent 42%),
linear-gradient(135deg,#01020a 0%,#071026 56%,#02030a 100%) !important;
overflow: hidden !important;
}
/* 下部の白丸・白ラベルを濃色ネオンへ変更 */
.ab-hero .ab-chip,
.ab-hero .ab-mini-badge,
.ab-hero .ab-badge-small,
.ab-hero .ab-feature-badge,
.ab-hero .ab-trust-badge,
.ab-hero .ab-tagline-badge,
.ab-hero .ab-label,
.ab-hero .ab-note,
.ab-hero .ab-badge:not(.ab-hero-main-pill),
.ab-hero .ab-pill:not(.ab-hero-main-pill),
.ab-hero .ab-tag:not(.ab-hero-main-pill) {
background:
linear-gradient(135deg, rgba(7,13,32,.94) 0%, rgba(14,22,50,.92) 58%, rgba(7,43,74,.90) 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.32) !important;
box-shadow:
0 8px 22px rgba(0,0,0,.30),
0 0 16px rgba(56,189,248,.14) !important;
text-shadow: none !important;
}
/* ラベル内文字も強制白 */
.ab-hero .ab-chip *,
.ab-hero .ab-mini-badge *,
.ab-hero .ab-badge-small *,
.ab-hero .ab-feature-badge *,
.ab-hero .ab-trust-badge *,
.ab-hero .ab-tagline-badge *,
.ab-hero .ab-label *,
.ab-hero .ab-note *,
.ab-hero .ab-badge:not(.ab-hero-main-pill) *,
.ab-hero .ab-pill:not(.ab-hero-main-pill) *,
.ab-hero .ab-tag:not(.ab-hero-main-pill) * {
color: #ffffff !important;
opacity: 1 !important;
}
/* 左上メインラベルは濃紺維持・見やすく */
.ab-hero .ab-hero-main-pill,
.ab-hero [data-hero-badge="main"] {
background:
radial-gradient(circle at 21px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, #071122 0%, #101d3d 55%, #0b3a63 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.58) !important;
}
.ab-hero .ab-hero-main-pill *,
.ab-hero [data-hero-badge="main"] * {
color: #ffffff !important;
}
/* 左側に残る黄色ドット装飾を非表示 */
.ab-hero > .ab-dot,
.ab-hero .ab-dotline,
.ab-hero .ab-deco-dot,
.ab-hero .hero-dot {
display: none !important;
}
.ab-hero h1::before,
.ab-hero .ab-hero-title::before,
.ab-hero-copy::before,
.ab-copy::before,
.ab-hero-text::before {
display: none !important;
content: none !important;
}
/* ヒーローの余白整理 */
.ab-hero-grid {
grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr) !important;
gap: 48px !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
max-width: 700px !important;
}
.ab-hero p {
max-width: 680px !important;
white-space: normal !important;
}
/* スマホ対応 */
@media (max-width: 920px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
max-width: 100% !important;
}
.ab-hero p {
max-width: 100% !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v12
楕円ライン完全削除版
========================================================= */
/*
スクショの大きな楕円は疑似要素ではなく、
ヒーロー内の装飾/画像ラッパーに border / outline / box-shadow が残っている可能性が高いため、
ヒーロー周辺の装飾線を直接リセットします。
*/
/* 1. ヒーロー内の大きな装飾枠をすべて解除 */
.ab-hero .ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image,
.ab-hero .ab-device-frame,
.ab-hero .ab-device-card,
.ab-hero .ab-device,
.ab-hero .ab-visual,
.ab-hero .ab-visual-frame,
.ab-hero .hero-visual,
.ab-hero .hero-device,
.ab-hero .hero-image,
.ab-hero .hero-image-wrap,
.ab-hero .ab-orbit,
.ab-hero .orbit,
.ab-hero .cosmic-orbit,
.ab-hero [class*="orbit"],
.ab-hero [class*="device-wrap"],
.ab-hero [class*="hero-visual"] {
border: none !important;
outline: none !important;
}
/* 2. 楕円ラインの原因になりやすい疑似要素を完全非表示 */
.ab-hero .ab-hero-visual::before,
.ab-hero .ab-hero-visual::after,
.ab-hero .ab-device-wrap::before,
.ab-hero .ab-device-wrap::after,
.ab-hero .ab-device-wrap.has-custom-hero-image::before,
.ab-hero .ab-device-wrap.has-custom-hero-image::after,
.ab-hero .ab-device-frame::before,
.ab-hero .ab-device-frame::after,
.ab-hero .ab-device-card::before,
.ab-hero .ab-device-card::after,
.ab-hero .ab-device::before,
.ab-hero .ab-device::after,
.ab-hero .ab-visual::before,
.ab-hero .ab-visual::after,
.ab-hero .ab-visual-frame::before,
.ab-hero .ab-visual-frame::after,
.ab-hero .hero-visual::before,
.ab-hero .hero-visual::after,
.ab-hero .hero-device::before,
.ab-hero .hero-device::after,
.ab-hero .hero-image::before,
.ab-hero .hero-image::after,
.ab-hero .hero-image-wrap::before,
.ab-hero .hero-image-wrap::after,
.ab-hero .ab-orbit::before,
.ab-hero .ab-orbit::after,
.ab-hero .orbit::before,
.ab-hero .orbit::after,
.ab-hero .cosmic-orbit::before,
.ab-hero .cosmic-orbit::after,
.ab-hero [class*="orbit"]::before,
.ab-hero [class*="orbit"]::after {
display: none !important;
content: none !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* 3. box-shadowで楕円線を描いている場合の解除 */
.ab-hero .ab-device-wrap.has-custom-hero-image,
.ab-hero .ab-device-wrap,
.ab-hero .ab-hero-visual,
.ab-hero .ab-visual,
.ab-hero .hero-visual,
.ab-hero [class*="orbit"] {
box-shadow: none !important;
}
/* 4. ヒーロー背景の疑似要素は使わず、背景本体だけで宇宙感を維持 */
.ab-hero::before,
.ab-hero::after {
display: none !important;
content: none !important;
}
.ab-hero {
background:
radial-gradient(circle at 78% 28%, rgba(56,189,248,.20), transparent 30%),
radial-gradient(circle at 26% 36%, rgba(255,79,179,.18), transparent 36%),
radial-gradient(circle at 56% 58%, rgba(167,139,250,.13), transparent 42%),
linear-gradient(135deg,#01020a 0%,#071026 56%,#02030a 100%) !important;
overflow: hidden !important;
}
/* 5. 画像自体には影だけ残し、枠線は付けない */
.ab-hero .ab-device-wrap img,
.ab-hero .ab-hero-visual img,
.ab-hero .hero-visual img {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* 6. 下部の白ラベルは濃色へ */
.ab-hero .ab-chip,
.ab-hero .ab-mini-badge,
.ab-hero .ab-badge-small,
.ab-hero .ab-feature-badge,
.ab-hero .ab-trust-badge,
.ab-hero .ab-tagline-badge {
background: linear-gradient(135deg, rgba(7,13,32,.94), rgba(7,43,74,.90)) !important;
color:#fff !important;
border:1px solid rgba(103,232,249,.32) !important;
}
.ab-hero .ab-chip *,
.ab-hero .ab-mini-badge *,
.ab-hero .ab-badge-small *,
.ab-hero .ab-feature-badge *,
.ab-hero .ab-trust-badge *,
.ab-hero .ab-tagline-badge * {
color:#fff !important;
}
/* 7. 黄色ドットだけの装飾も非表示 */
.ab-hero .ab-dot,
.ab-hero .ab-dotline,
.ab-hero .ab-deco-dot,
.ab-hero .hero-dot,
.ab-hero h1::before,
.ab-hero .ab-hero-title::before,
.ab-hero-copy::before,
.ab-copy::before,
.ab-hero-text::before {
display:none !important;
content:none !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v13
楕円ライン原因：.ab-hero-main-image の枠線/疑似要素を直接削除
========================================================= */
/*
楕円が残る原因は、v36以降の右側メイン画像枠
.ab-hero-main-image に残っている border / radius / after の可能性が高いです。
ここを直接リセットします。
*/
.ab-hero .ab-hero-main-image,
.ab-hero-main-image {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background-color: transparent !important;
}
/* .ab-hero-main-image の上に乗る疑似要素を停止 */
.ab-hero .ab-hero-main-image::before,
.ab-hero .ab-hero-main-image::after,
.ab-hero-main-image::before,
.ab-hero-main-image::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* 右側ビジュアルの親要素に残る枠線を直接削除 */
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image,
.ab-hero .ab-hero-visual,
.ab-hero .ab-visual,
.ab-hero .hero-visual,
.ab-hero [class*="main-image"],
.ab-hero [class*="device-wrap"],
.ab-hero [class*="hero-image"] {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* 楕円ラインがborder-radius付きの親枠として出る場合 */
.ab-hero .ab-device-wrap *,
.ab-hero .ab-hero-visual * {
outline: 0 !important;
}
/* 大きな楕円の線だけを消すため、ヒーロー直下の巨大な角丸枠を無効化 */
.ab-hero .ab-container,
.ab-hero-grid {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.ab-hero .ab-container::before,
.ab-hero .ab-container::after,
.ab-hero-grid::before,
.ab-hero-grid::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* ヒーローの装飾線は完全停止。背景だけで宇宙感を維持 */
.ab-hero::before,
.ab-hero::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.ab-hero {
background:
radial-gradient(circle at 78% 28%, rgba(56,189,248,.20), transparent 30%),
radial-gradient(circle at 26% 36%, rgba(255,79,179,.18), transparent 36%),
radial-gradient(circle at 56% 58%, rgba(167,139,250,.13), transparent 42%),
linear-gradient(135deg,#01020a 0%,#071026 56%,#02030a 100%) !important;
}
/* 下部チップを濃色に */
.ab-hero .ab-note,
.ab-hero .ab-chip,
.ab-hero .ab-mini-badge,
.ab-hero .ab-badge-small {
background: linear-gradient(135deg, rgba(7,13,32,.94), rgba(7,43,74,.90)) !important;
color:#fff !important;
border:1px solid rgba(103,232,249,.32) !important;
}
.ab-hero .ab-note *,
.ab-hero .ab-chip *,
.ab-hero .ab-mini-badge *,
.ab-hero .ab-badge-small * {
color:#fff !important;
}
/* 追加CSS側で楕円線が復活している場合でも勝つため、head末尾にも出します */
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v14
TOP背景：完成度優先の宇宙背景画像版
========================================================= */
.ab-hero {
background:
linear-gradient(90deg, rgba(1,2,10,.88) 0%, rgba(3,6,18,.78) 38%, rgba(3,8,22,.54) 64%, rgba(1,2,10,.42) 100%),
radial-gradient(circle at 28% 42%, rgba(255,79,179,.18), transparent 36%),
radial-gradient(circle at 78% 34%, rgba(56,189,248,.20), transparent 34%),
url("assets/images/cosmic-hero-bg.png") center center / cover no-repeat !important;
position: relative !important;
overflow: hidden !important;
}
/* 楕円・装飾ライン削除 */
.ab-hero::before,
.ab-hero::after,
.ab-hero .ab-container::before,
.ab-hero .ab-container::after,
.ab-hero-grid::before,
.ab-hero-grid::after,
.ab-hero-visual::before,
.ab-hero-visual::after,
.ab-device-wrap::before,
.ab-device-wrap::after,
.ab-hero-main-image::before,
.ab-hero-main-image::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.ab-hero h1,
.ab-hero .ab-hero-title {
color: #ffffff !important;
text-shadow:
0 4px 18px rgba(0,0,0,.50),
0 0 24px rgba(255,255,255,.12),
0 0 36px rgba(56,189,248,.10) !important;
}
.ab-hero p {
color: rgba(255,255,255,.92) !important;
text-shadow: 0 3px 14px rgba(0,0,0,.45) !important;
}
/* TOP左上ラベル */
.ab-hero .ab-hero-main-pill,
.ab-hero [data-hero-badge="main"],
.ab-hero .ab-pill:first-of-type,
.ab-hero .ab-badge:first-of-type,
.ab-hero .ab-tag:first-of-type {
background:
radial-gradient(circle at 21px 50%, #f7b94a 0 6px, transparent 7px),
linear-gradient(135deg, rgba(4,8,24,.96) 0%, rgba(13,22,50,.96) 55%, rgba(7,43,74,.94) 100%) !important;
color: #fff !important;
border: 1px solid rgba(103,232,249,.58) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 10px 28px rgba(0,0,0,.36),
0 0 24px rgba(56,189,248,.22),
0 0 22px rgba(255,79,179,.13) !important;
}
.ab-hero .ab-hero-main-pill *,
.ab-hero [data-hero-badge="main"] *,
.ab-hero .ab-pill:first-of-type *,
.ab-hero .ab-badge:first-of-type *,
.ab-hero .ab-tag:first-of-type * {
color: #fff !important;
}
/* 下部の小ラベル */
.ab-hero .ab-chip,
.ab-hero .ab-mini-badge,
.ab-hero .ab-badge-small,
.ab-hero .ab-feature-badge,
.ab-hero .ab-trust-badge,
.ab-hero .ab-tagline-badge {
background: linear-gradient(135deg, rgba(7,13,32,.92), rgba(7,43,74,.88)) !important;
color:#fff !important;
border:1px solid rgba(103,232,249,.34) !important;
box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 14px rgba(56,189,248,.14) !important;
}
.ab-hero .ab-chip *,
.ab-hero .ab-mini-badge *,
.ab-hero .ab-badge-small *,
.ab-hero .ab-feature-badge *,
.ab-hero .ab-trust-badge *,
.ab-hero .ab-tagline-badge * {
color:#fff !important;
}
/* 右側商品に軽い立体感 */
.ab-hero .ab-device-wrap img,
.ab-hero .ab-hero-visual img {
filter: drop-shadow(0 34px 52px rgba(0,0,0,.38)) !important;
}
/* スマホは文字優先 */
@media (max-width: 920px) {
.ab-hero {
background:
linear-gradient(180deg, rgba(1,2,10,.90) 0%, rgba(3,6,18,.80) 58%, rgba(1,2,10,.64) 100%),
url("assets/images/cosmic-hero-bg.png") center top / cover no-repeat !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v15
商品カード内CART表示修正
- 白い横長ボタンで文字が消える問題を修正
- 数量入力/カートボタン/問い合わせボタンを見やすく
- 商品名・商品コード・価格の黒文字残りも修正
========================================================= */
/* 商品カード内の黒文字残りを修正 */
.ab-product .ab-cart-area,
.ab-product .ab-cart-area *,
.ab-product .ab-product-cart,
.ab-product .ab-product-cart *,
.ab-product .cart,
.ab-product .cart *,
.ab-product form,
.ab-product form *,
.ab-product .product-meta,
.ab-product .product-extra,
.ab-product .product-code,
.ab-product .product-name,
.ab-product .product-sku,
.ab-product .product-price-text,
.ab-product .ab-product-meta,
.ab-product .ab-product-meta *,
.ab-product-card .ab-cart-area,
.ab-product-card .ab-cart-area *,
.ab-product-card .cart,
.ab-product-card .cart *,
.ab-product-card form,
.ab-product-card form *,
.ab-product-card .product-meta,
.ab-product-card .product-extra,
.ab-product-card .product-code,
.ab-product-card .product-name,
.ab-product-card .product-sku,
.ab-product-card .product-price-text,
.ab-product-card .ab-product-meta,
.ab-product-card .ab-product-meta * {
color: rgba(255,255,255,.92) !important;
}
/* 商品カード内の価格だけ視認性を上げる */
.ab-product .price,
.ab-product-price,
.ab-product-card .price,
.ab-product-card .ab-product-price {
color: #7dd3fc !important;
text-shadow: 0 0 12px rgba(125,211,252,.24) !important;
}
/* カートフォーム全体 */
.ab-product form,
.ab-product-card form,
.ab-product .cart,
.ab-product-card .cart,
.ab-cart-area,
.ab-product-cart {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
margin-top: 14px !important;
}
/* 数量入力 */
.ab-product input[type="number"],
.ab-product-card input[type="number"],
.ab-product .quantity input,
.ab-product-card .quantity input,
.ab-product input[name*="quantity"],
.ab-product-card input[name*="quantity"],
.ab-product input[name*="kosu"],
.ab-product-card input[name*="kosu"] {
width: 64px !important;
min-width: 64px !important;
height: 54px !important;
padding: 0 10px !important;
border-radius: 12px !important;
background: rgba(255,255,255,.96) !important;
color: #0b1020 !important;
border: 1px solid rgba(103,232,249,.28) !important;
font-size: 22px !important;
font-weight: 800 !important;
text-align: center !important;
box-shadow: 0 8px 20px rgba(0,0,0,.24) !important;
}
/* カートボタン本体：白ボタンをネオンボタンへ */
.ab-product button,
.ab-product-card button,
.ab-product input[type="submit"],
.ab-product-card input[type="submit"],
.ab-product .cart-button,
.ab-product-card .cart-button,
.ab-product .cart-btn,
.ab-product-card .cart-btn,
.ab-product .ab-cart-button,
.ab-product-card .ab-cart-button,
.ab-product a[href*="kago"],
.ab-product-card a[href*="kago"],
.ab-product a[href*="cart"],
.ab-product-card a[href*="cart"] {
min-height: 54px !important;
padding: 14px 30px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #ff4fb3 0%, #8b5cf6 52%, #38bdf8 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.30) !important;
font-size: 18px !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
text-align: center !important;
box-shadow:
0 12px 28px rgba(0,0,0,.32),
0 0 22px rgba(139,92,246,.26),
0 0 18px rgba(56,189,248,.18) !important;
text-shadow: none !important;
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
}
/* ボタン内文字を強制白 */
.ab-product button *,
.ab-product-card button *,
.ab-product .cart-button *,
.ab-product-card .cart-button *,
.ab-product .cart-btn *,
.ab-product-card .cart-btn *,
.ab-product .ab-cart-button *,
.ab-product-card .ab-cart-button *,
.ab-product a[href*="kago"] *,
.ab-product-card a[href*="kago"] *,
.ab-product a[href*="cart"] *,
.ab-product-card a[href*="cart"] * {
color: #ffffff !important;
opacity: 1 !important;
}
/* e-shopsカートHTML内でinput imageや無名submitが白くなる対策 */
.ab-product input[type="button"],
.ab-product-card input[type="button"],
.ab-product input[type="submit"],
.ab-product-card input[type="submit"] {
background: linear-gradient(135deg, #ff4fb3 0%, #8b5cf6 52%, #38bdf8 100%) !important;
color: #ffffff !important;
}
/* 問い合わせボタン */
.ab-product .contact-button,
.ab-product-card .contact-button,
.ab-product .inquiry-button,
.ab-product-card .inquiry-button,
.ab-product .ab-contact-btn,
.ab-product-card .ab-contact-btn,
.ab-product a[href*="contact"],
.ab-product-card a[href*="contact"],
.ab-product a[href*="inquiry"],
.ab-product-card a[href*="inquiry"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 46px !important;
padding: 12px 24px !important;
border-radius: 999px !important;
background: rgba(103,232,249,.14) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.32) !important;
font-weight: 800 !important;
box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 0 14px rgba(56,189,248,.12) !important;
}
/* iframeや外部カートパーツが白い横長だけ出る場合の見た目補正 */
.ab-product iframe,
.ab-product-card iframe {
background: transparent !important;
border: 0 !important;
max-width: 100% !important;
}
/* カード下部の余白 */
.ab-product,
.ab-product-card {
overflow: hidden !important;
}
.ab-product .ab-product-body,
.ab-product-card .ab-product-body,
.ab-product .card-body,
.ab-product-card .card-body {
padding-bottom: 28px !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-product form,
.ab-product-card form,
.ab-product .cart,
.ab-product-card .cart,
.ab-cart-area,
.ab-product-cart {
gap: 8px !important;
}
.ab-product input[type="number"],
.ab-product-card input[type="number"],
.ab-product .quantity input,
.ab-product-card .quantity input {
width: 58px !important;
min-width: 58px !important;
height: 50px !important;
font-size: 20px !important;
}
.ab-product button,
.ab-product-card button,
.ab-product input[type="submit"],
.ab-product-card input[type="submit"],
.ab-product .cart-button,
.ab-product-card .cart-button,
.ab-product .cart-btn,
.ab-product-card .cart-btn,
.ab-product .ab-cart-button,
.ab-product-card .ab-cart-button {
flex: 1 1 180px !important;
min-height: 50px !important;
padding: 12px 20px !important;
font-size: 16px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v18
v17崩れ復旧 / JSなし安全版 / 商品個別ページ背景修正
========================================================= */
/* v17のように検索フォームへ当てないため、カート補正は商品カード内の専用エリアだけに限定 */
/* =========================
1. 商品個別ページ 背景を宇宙系へ
========================= */
body.single,
body.single-post,
body[class*="single"],
body[class*="product"] {
background:
radial-gradient(circle at 18% 18%, rgba(255,79,179,.20), transparent 30%),
radial-gradient(circle at 82% 20%, rgba(56,189,248,.18), transparent 30%),
radial-gradient(circle at 70% 78%, rgba(139,92,246,.16), transparent 34%),
linear-gradient(135deg, #02030b 0%, #071026 48%, #02030b 100%) !important;
color:#ffffff !important;
}
/* main/記事背景が白で残る場合 */
.single .site,
.single .site-main,
.single main,
.single article,
.single .entry-content,
.single .content-area,
.single .page-content,
.single-post .site-main,
.single-post main,
.single-post article,
.single-post .entry-content {
background: transparent !important;
color:#ffffff !important;
}
/* 商品詳細らしき全体ラッパー */
.ab-single-product,
.ab-product-single,
.ab-product-detail,
.ab-product-page,
.product-single-wrap,
.product-detail-wrap,
.single-product-wrap,
.single .ab-section,
.single-post .ab-section {
background:
radial-gradient(circle at 24% 18%, rgba(255,79,179,.10), transparent 34%),
radial-gradient(circle at 86% 20%, rgba(56,189,248,.10), transparent 30%),
linear-gradient(135deg, rgba(5,8,20,.94), rgba(7,13,32,.94)) !important;
color:#ffffff !important;
}
/* =========================
2. 商品個別ページ 画像枠/説明枠
========================= */
.single .ab-product-visual,
.single .ab-product-image,
.single .product-image,
.single .wp-post-image,
.single-post .ab-product-visual,
.single-post .ab-product-image,
.single-post .product-image {
border-radius: 28px !important;
}
.single .ab-product-visual,
.single .ab-product-image,
.single .product-image,
.single-post .ab-product-visual,
.single-post .ab-product-image,
.single-post .product-image {
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 34%),
linear-gradient(135deg, rgba(8,13,32,.86), rgba(4,8,22,.94)) !important;
border:1px solid rgba(103,232,249,.18) !important;
box-shadow:0 24px 70px rgba(0,0,0,.34), 0 0 28px rgba(56,189,248,.08) !important;
}
.single .ab-product-summary,
.single .product-summary,
.single .entry-content,
.single-post .ab-product-summary,
.single-post .product-summary,
.single-post .entry-content {
color:#ffffff !important;
}
.single h1,
.single h2,
.single h3,
.single h4,
.single-post h1,
.single-post h2,
.single-post h3,
.single-post h4 {
color:#ffffff !important;
}
.single p,
.single li,
.single-post p,
.single-post li {
color:rgba(234,242,255,.90) !important;
line-height:1.9 !important;
}
/* =========================
3. 商品一覧/カード内 CART表示安全補正
========================= */
/* 検索フォームには当てない。商品カード内だけ */
.ab-product-card .ab-product-meta,
.ab-product-card .ab-product-meta *,
.ab-product-card .product-meta,
.ab-product-card .product-meta *,
.ab-product .ab-product-meta,
.ab-product .ab-product-meta *,
.ab-product .product-meta,
.ab-product .product-meta * {
color: rgba(255,255,255,.92) !important;
}
.ab-product-card .price,
.ab-product .price,
.ab-product-price {
color:#7dd3fc !important;
font-weight:900 !important;
text-shadow:0 0 14px rgba(125,211,252,.26) !important;
}
/* カートフォームの横並び */
.ab-product-card form,
.ab-product form,
.ab-product-card .cart,
.ab-product .cart,
.ab-product-card .ab-cart-area,
.ab-product .ab-cart-area,
.ab-product-card .ab-product-cart,
.ab-product .ab-product-cart {
display:flex !important;
align-items:center !important;
gap:12px !important;
flex-wrap:wrap !important;
margin-top:16px !important;
}
/* 数量欄：商品カード内に限定 */
.ab-product-card form input[type="number"],
.ab-product form input[type="number"],
.ab-product-card form input[name*="qty"],
.ab-product form input[name*="qty"],
.ab-product-card form input[name*="quantity"],
.ab-product form input[name*="quantity"],
.ab-product-card form input[name*="kosu"],
.ab-product form input[name*="kosu"],
.ab-product-card .cart input[type="number"],
.ab-product .cart input[type="number"] {
width:72px !important;
min-width:72px !important;
max-width:72px !important;
height:58px !important;
padding:0 !important;
margin:0 !important;
border-radius:12px !important;
background:#ffffff !important;
color:#111111 !important;
-webkit-text-fill-color:#111111 !important;
border:2px solid rgba(103,232,249,.45) !important;
font-size:28px !important;
font-weight:900 !important;
line-height:58px !important;
text-align:center !important;
text-indent:0 !important;
opacity:1 !important;
visibility:visible !important;
box-shadow:0 8px 22px rgba(0,0,0,.30),0 0 16px rgba(56,189,248,.16) !important;
}
/* type=textは検索と誤爆しやすいため、カート内だけ */
.ab-product-card .cart input[type="text"],
.ab-product .cart input[type="text"],
.ab-product-card .ab-cart-area input[type="text"],
.ab-product .ab-cart-area input[type="text"],
.ab-product-card .ab-product-cart input[type="text"],
.ab-product .ab-product-cart input[type="text"] {
width:72px !important;
min-width:72px !important;
max-width:72px !important;
height:58px !important;
padding:0 !important;
border-radius:12px !important;
background:#ffffff !important;
color:#111111 !important;
-webkit-text-fill-color:#111111 !important;
border:2px solid rgba(103,232,249,.45) !important;
font-size:28px !important;
font-weight:900 !important;
line-height:58px !important;
text-align:center !important;
}
/* カートボタン：商品カード内だけ */
.ab-product-card form button,
.ab-product form button,
.ab-product-card form input[type="submit"],
.ab-product form input[type="submit"],
.ab-product-card .cart button,
.ab-product .cart button,
.ab-product-card .cart input[type="submit"],
.ab-product .cart input[type="submit"],
.ab-product-card a[href*="kago"],
.ab-product a[href*="kago"],
.ab-product-card a[href*="cart"],
.ab-product a[href*="cart"] {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:240px !important;
min-height:58px !important;
padding:15px 34px !important;
border-radius:999px !important;
background:linear-gradient(135deg,#ff4fb3 0%,#8b5cf6 52%,#38bdf8 100%) !important;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
border:1px solid rgba(255,255,255,.32) !important;
font-size:18px !important;
font-weight:900 !important;
letter-spacing:.04em !important;
text-align:center !important;
box-shadow:0 12px 30px rgba(0,0,0,.32),0 0 22px rgba(139,92,246,.28),0 0 18px rgba(56,189,248,.20) !important;
opacity:1 !important;
visibility:visible !important;
}
/* 問い合わせボタン */
.ab-product-card a[href*="contact"],
.ab-product a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product a[href*="inquiry"],
.ab-product-card .ab-contact-btn,
.ab-product .ab-contact-btn {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:50px !important;
padding:13px 28px !important;
border-radius:999px !important;
background:rgba(103,232,249,.16) !important;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
border:1px solid rgba(103,232,249,.36) !important;
font-size:16px !important;
font-weight:900 !important;
}
/* 検索フォームは絶対に触らない */
.search-form input,
.wp-block-search input,
input[type="search"],
.header-search input,
.site-header input,
.ab-header input,
.ab-nav input {
width:auto !important;
max-width:none !important;
height:auto !important;
min-height:0 !important;
color:inherit !important;
-webkit-text-fill-color:inherit !important;
}
/* =========================
4. スマホ
========================= */
@media (max-width:620px){
.ab-product-card form input[type="number"],
.ab-product form input[type="number"],
.ab-product-card .cart input[type="text"],
.ab-product .cart input[type="text"] {
width:62px !important;
min-width:62px !important;
max-width:62px !important;
height:52px !important;
font-size:22px !important;
line-height:52px !important;
}
.ab-product-card form button,
.ab-product form button,
.ab-product-card form input[type="submit"],
.ab-product form input[type="submit"] {
min-width:180px !important;
min-height:52px !important;
padding:12px 22px !important;
font-size:16px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v19
商品個別ページ 白背景完全除去版
========================================================= */
/*
商品個別ページの白背景が残る原因：
画像エリアや詳細エリアに background:#fff / background-color:white が
個別クラスまたはインラインに近い形で残っている可能性が高いため、
body.single 配下の主要ラッパー・画像枠・カード枠をまとめて透明/ダーク化します。
*/
/* =========================
1. 個別ページ全体背景
========================= */
body.single,
body.single-post,
body.single-product,
body[class*="single"] {
background:
radial-gradient(circle at 20% 16%, rgba(255,79,179,.20), transparent 30%),
radial-gradient(circle at 84% 20%, rgba(56,189,248,.18), transparent 30%),
radial-gradient(circle at 70% 82%, rgba(139,92,246,.16), transparent 34%),
linear-gradient(135deg,#02030b 0%,#071026 48%,#02030b 100%) !important;
color:#ffffff !important;
}
/* =========================
2. WordPress標準白背景の除去
========================= */
body.single .site,
body.single .site-content,
body.single .content-area,
body.single .site-main,
body.single main,
body.single article,
body.single .hentry,
body.single .entry,
body.single .entry-content,
body.single .post,
body.single .page,
body.single .wrap,
body.single .container,
body.single .main,
body.single #main,
body.single #content,
body.single #primary {
background: transparent !important;
background-color: transparent !important;
color:#ffffff !important;
}
/* =========================
3. 商品詳細系ラッパーの白背景除去
========================= */
body.single [class*="single"],
body.single [class*="product"],
body.single [class*="detail"],
body.single [class*="summary"],
body.single [class*="visual"],
body.single [class*="image"],
body.single [class*="gallery"],
body.single [class*="photo"],
body.single [class*="media"],
body.single [class*="card"],
body.single [class*="box"],
body.single [class*="panel"] {
background-color: transparent !important;
}
/* ただし本文やカードは完全透明よりダークガラスにする */
body.single .ab-product-detail,
body.single .ab-product-single,
body.single .ab-single-product,
body.single .ab-product-page,
body.single .product-detail,
body.single .product-single,
body.single .product-summary,
body.single .ab-product-summary,
body.single .entry-content {
background:
radial-gradient(circle at 90% 8%, rgba(56,189,248,.08), transparent 30%),
linear-gradient(180deg, rgba(8,13,32,.68), rgba(4,8,22,.58)) !important;
background-color: rgba(4,8,22,.58) !important;
border: 1px solid rgba(103,232,249,.12) !important;
border-radius: 28px !important;
color:#ffffff !important;
}
/* =========================
4. 左の商品画像の白い箱をダーク化
========================= */
body.single .ab-product-image,
body.single .ab-product-visual,
body.single .ab-single-product-visual,
body.single .product-image,
body.single .product-gallery,
body.single .product-photo,
body.single .product-media,
body.single .wp-post-image-wrap,
body.single .featured-image,
body.single .post-thumbnail,
body.single .thumbnail,
body.single figure,
body.single .entry-content figure {
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 34%),
radial-gradient(circle at 78% 70%, rgba(56,189,248,.10), transparent 34%),
linear-gradient(135deg, rgba(8,13,32,.88), rgba(4,8,22,.96)) !important;
background-color: rgba(4,8,22,.96) !important;
border: 1px solid rgba(103,232,249,.18) !important;
border-radius: 32px !important;
box-shadow:
0 24px 70px rgba(0,0,0,.34),
0 0 28px rgba(56,189,248,.08) !important;
overflow: hidden !important;
}
/* 画像そのものは白背景を持つ画像の場合はCSSでは消せませんが、枠は暗くする */
body.single img.wp-post-image,
body.single .ab-product-image img,
body.single .ab-product-visual img,
body.single .product-image img,
body.single .product-gallery img,
body.single figure img {
background: transparent !important;
border: none !important;
box-shadow: none !important;
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
filter: drop-shadow(0 24px 36px rgba(0,0,0,.28)) !important;
}
/* =========================
5. インラインstyle風の白背景対策
========================= */
body.single [style*="background:#fff"],
body.single [style*="background: #fff"],
body.single [style*="background-color:#fff"],
body.single [style*="background-color: #fff"],
body.single [style*="background:white"],
body.single [style*="background: white"],
body.single [style*="background-color:white"],
body.single [style*="background-color: white"],
body.single [style*="background:#ffffff"],
body.single [style*="background: #ffffff"],
body.single [style*="background-color:#ffffff"],
body.single [style*="background-color: #ffffff"] {
background:
linear-gradient(135deg, rgba(8,13,32,.88), rgba(4,8,22,.96)) !important;
background-color: rgba(4,8,22,.96) !important;
}
/* =========================
6. 文字色
========================= */
body.single h1,
body.single h2,
body.single h3,
body.single h4,
body.single h5,
body.single h6 {
color:#ffffff !important;
text-shadow:0 2px 14px rgba(0,0,0,.32) !important;
}
body.single p,
body.single li,
body.single td,
body.single th,
body.single span,
body.single div {
color: inherit;
}
body.single .entry-content p,
body.single .entry-content li,
body.single .product-summary p,
body.single .product-summary li,
body.single .ab-product-summary p,
body.single .ab-product-summary li {
color: rgba(234,242,255,.90) !important;
line-height: 1.9 !important;
}
body.single strong,
body.single b {
color:#ffffff !important;
}
/* =========================
7. 価格・商品コード
========================= */
body.single .price,
body.single [class*="price"] {
color:#7dd3fc !important;
font-weight:900 !important;
text-shadow:0 0 14px rgba(125,211,252,.26) !important;
}
body.single [class*="code"],
body.single [class*="sku"],
body.single [class*="meta"] {
color:rgba(255,255,255,.90) !important;
}
/* =========================
8. head末尾でも同じ内容を出す前提
========================= */
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v20
商品個別ページ：価格/定価表示の視認性修正
========================================================= */
/* 商品詳細・商品カード内の価格系テキストを強制的に明るく */
body.single [class*="price"],
body.single [class*="Price"],
body.single [class*="kakaku"],
body.single [class*="teika"],
body.single [class*="amount"],
body.single .price,
body.single .regular-price,
body.single .sale-price,
body.single .product-price,
body.single .ab-product-price,
body.single .ab-price,
body.single .ab-regular-price,
body.single .ab-product-meta .price,
body.single .product-meta .price,
body.single .entry-content .price,
body.single-product [class*="price"],
body.single-product [class*="Price"],
body.single-product [class*="amount"],
body.single-product .price,
body.single-product .regular-price,
body.single-product .sale-price,
body.single-product .product-price,
body.single-product .ab-product-price,
body.single-product .ab-price,
.ab-product [class*="price"],
.ab-product-card [class*="price"],
.ab-product .price,
.ab-product-card .price,
.ab-product-price,
.ab-price {
color: #7dd3fc !important;
-webkit-text-fill-color: #7dd3fc !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 900 !important;
text-shadow:
0 0 12px rgba(125,211,252,.32),
0 2px 10px rgba(0,0,0,.40) !important;
}
/* 「価格：」「定価：」の行全体を見やすく */
body.single .ab-product-meta,
body.single .product-meta,
body.single .product-extra,
body.single .ab-product-info,
body.single .product-info,
body.single .entry-content,
.ab-product .ab-product-meta,
.ab-product-card .ab-product-meta,
.ab-product .product-meta,
.ab-product-card .product-meta {
color: rgba(255,255,255,.92) !important;
}
/* 価格ラベルがp/div/span直書きで黒になる場合の対策 */
body.single .ab-product-meta *,
body.single .product-meta *,
body.single .product-extra *,
body.single .ab-product-info *,
body.single .product-info *,
.ab-product .ab-product-meta *,
.ab-product-card .ab-product-meta *,
.ab-product .product-meta *,
.ab-product-card .product-meta * {
color: rgba(255,255,255,.92) !important;
opacity: 1 !important;
}
/* 価格を含む文字列だけを包む要素に色が残る場合 */
body.single span,
body.single div,
body.single p,
.ab-product span,
.ab-product div,
.ab-product p,
.ab-product-card span,
.ab-product-card div,
.ab-product-card p {
text-shadow: none;
}
/* 価格の数字・円だけは水色で強調 */
body.single .price *,
body.single .regular-price *,
body.single .sale-price *,
body.single .product-price *,
body.single .ab-product-price *,
body.single .ab-price *,
.ab-product .price *,
.ab-product-card .price *,
.ab-product-price *,
.ab-price * {
color: #7dd3fc !important;
-webkit-text-fill-color: #7dd3fc !important;
opacity: 1 !important;
}
/* 黒文字がインライン指定されている場合の対策 */
body.single [style*="color:#000"],
body.single [style*="color: #000"],
body.single [style*="color:black"],
body.single [style*="color: black"],
body.single [style*="color:#111"],
body.single [style*="color: #111"],
body.single [style*="color:#000000"],
body.single [style*="color: #000000"],
.ab-product [style*="color:#000"],
.ab-product [style*="color: #000"],
.ab-product [style*="color:black"],
.ab-product [style*="color: black"],
.ab-product-card [style*="color:#000"],
.ab-product-card [style*="color: #000"],
.ab-product-card [style*="color:black"],
.ab-product-card [style*="color: black"] {
color: rgba(255,255,255,.92) !important;
-webkit-text-fill-color: rgba(255,255,255,.92) !important;
}
/* 商品コード等は白、価格は水色に見せる */
body.single .entry-content strong,
body.single .entry-content b,
body.single .product-meta strong,
body.single .product-meta b,
body.single .ab-product-meta strong,
body.single .ab-product-meta b {
color: #ffffff !important;
}
/* 価格行専用の見やすさ補正 */
body.single .entry-content p:has(.price),
body.single .product-meta p:has(.price),
body.single .ab-product-meta p:has(.price) {
color: #7dd3fc !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v21
FAQ表示修正：白背景＋薄文字を修正
========================================================= */
/* FAQセクション背景 */
.ab-faq,
.ab-faq-section,
#faq,
section[id*="faq"],
section[class*="faq"] {
background:
radial-gradient(circle at 18% 20%, rgba(255,79,179,.14), transparent 32%),
radial-gradient(circle at 82% 18%, rgba(56,189,248,.12), transparent 30%),
linear-gradient(135deg, #060817 0%, #0a1532 48%, #050714 100%) !important;
color: #ffffff !important;
}
/* FAQカード/アコーディオン本体 */
.ab-faq-item,
.ab-faq-card,
.ab-faq-box,
.ab-accordion,
.ab-accordion-item,
.faq-item,
.faq-card,
.faq-box,
.accordion,
.accordion-item,
.wp-block-details,
details {
background:
radial-gradient(circle at 90% 20%, rgba(56,189,248,.08), transparent 30%),
linear-gradient(135deg, rgba(7,13,32,.94), rgba(4,8,22,.96)) !important;
background-color: rgba(4,8,22,.96) !important;
color: #ffffff !important;
border: 1px solid rgba(103,232,249,.20) !important;
border-radius: 24px !important;
box-shadow:
0 18px 48px rgba(0,0,0,.28),
0 0 20px rgba(56,189,248,.08) !important;
}
/* 白背景がクラス違いで残る場合 */
.ab-faq [class*="item"],
.ab-faq [class*="card"],
.ab-faq [class*="box"],
.ab-faq [class*="accordion"],
.ab-faq-section [class*="item"],
.ab-faq-section [class*="card"],
.ab-faq-section [class*="box"],
.ab-faq-section [class*="accordion"],
#faq [class*="item"],
#faq [class*="card"],
#faq [class*="box"],
#faq [class*="accordion"],
section[id*="faq"] [class*="item"],
section[id*="faq"] [class*="card"],
section[id*="faq"] [class*="box"],
section[id*="faq"] [class*="accordion"] {
background:
radial-gradient(circle at 90% 20%, rgba(56,189,248,.08), transparent 30%),
linear-gradient(135deg, rgba(7,13,32,.94), rgba(4,8,22,.96)) !important;
background-color: rgba(4,8,22,.96) !important;
color: #ffffff !important;
border-color: rgba(103,232,249,.20) !important;
}
/* FAQの質問文 */
.ab-faq h3,
.ab-faq h4,
.ab-faq summary,
.ab-faq .question,
.ab-faq .faq-question,
.ab-faq .ab-faq-question,
.ab-faq-title,
.ab-faq-item h3,
.ab-faq-item summary,
.faq-question,
.faq-item h3,
.faq-item summary,
details summary {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
font-weight: 900 !important;
text-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
}
/* FAQの回答文 */
.ab-faq p,
.ab-faq li,
.ab-faq span,
.ab-faq div,
.ab-faq .answer,
.ab-faq .faq-answer,
.ab-faq .ab-faq-answer,
.ab-faq-body,
.ab-faq-item p,
.ab-faq-item li,
.faq-answer,
.faq-item p,
.faq-item li,
details p,
details li {
color: rgba(234,242,255,.92) !important;
-webkit-text-fill-color: rgba(234,242,255,.92) !important;
opacity: 1 !important;
line-height: 1.9 !important;
}
/* FAQ内の薄いテキストを強制的に見える色へ */
.ab-faq [style*="color"],
.ab-faq-section [style*="color"],
#faq [style*="color"],
section[id*="faq"] [style*="color"],
section[class*="faq"] [style*="color"] {
color: rgba(234,242,255,.92) !important;
-webkit-text-fill-color: rgba(234,242,255,.92) !important;
}
/* FAQ内の白背景インライン指定を無効化 */
.ab-faq [style*="background:#fff"],
.ab-faq [style*="background: #fff"],
.ab-faq [style*="background-color:#fff"],
.ab-faq [style*="background-color: #fff"],
.ab-faq [style*="background:white"],
.ab-faq [style*="background: white"],
.ab-faq [style*="background-color:white"],
.ab-faq [style*="background-color: white"],
.ab-faq [style*="background:#ffffff"],
.ab-faq [style*="background: #ffffff"],
.ab-faq [style*="background-color:#ffffff"],
.ab-faq [style*="background-color: #ffffff"],
#faq [style*="background:#fff"],
#faq [style*="background: #fff"],
#faq [style*="background-color:#fff"],
#faq [style*="background-color: #fff"],
#faq [style*="background:white"],
#faq [style*="background: white"],
#faq [style*="background-color:white"],
#faq [style*="background-color: white"] {
background:
linear-gradient(135deg, rgba(7,13,32,.94), rgba(4,8,22,.96)) !important;
background-color: rgba(4,8,22,.96) !important;
}
/* アコーディオンの開閉アイコン */
.ab-faq summary::marker,
.faq-item summary::marker,
details summary::marker {
color: #7dd3fc !important;
}
/* FAQカード同士の余白 */
.ab-faq-item,
.ab-faq-card,
.faq-item,
.faq-card,
details {
margin-bottom: 18px !important;
padding: 24px 28px !important;
}
/* FAQの中でリンクがある場合 */
.ab-faq a,
#faq a,
section[id*="faq"] a {
color: #7dd3fc !important;
text-decoration: underline;
text-underline-offset: 4px;
}
/* スマホ */
@media (max-width: 620px) {
.ab-faq-item,
.ab-faq-card,
.faq-item,
.faq-card,
details {
padding: 18px 20px !important;
border-radius: 18px !important;
}
.ab-faq h3,
.ab-faq summary,
.faq-question,
details summary {
font-size: 18px !important;
}
.ab-faq p,
.faq-answer,
details p {
font-size: 15px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v24
TOP上部ラベル安全版
- JS不使用
- front-page.php の span.ab-kicker にだけ ab-hero-kicker-v24 を付与
- 親divを拾わないため巨大楕円が出ません
========================================================= */
/* =========================
1. TOPの巨大楕円・装飾枠を削除
========================= */
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-copy,
.ab-copy,
.ab-hero-text,
.ab-hero-visual,
.ab-device-wrap,
.ab-device-wrap.has-custom-hero-image,
.ab-hero-main-image {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.ab-hero::before,
.ab-hero::after,
.ab-hero .ab-container::before,
.ab-hero .ab-container::after,
.ab-hero-grid::before,
.ab-hero-grid::after,
.ab-hero-copy::before,
.ab-hero-copy::after,
.ab-copy::before,
.ab-copy::after,
.ab-hero-text::before,
.ab-hero-text::after,
.ab-hero-visual::before,
.ab-hero-visual::after,
.ab-device-wrap::before,
.ab-device-wrap::after,
.ab-device-wrap.has-custom-hero-image::before,
.ab-device-wrap.has-custom-hero-image::after,
.ab-hero-main-image::before,
.ab-hero-main-image::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* orbit/frame/ellipse系だけ削除。circleは商品デザインに干渉するため対象外 */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"] {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.ab-hero [class*="orbit"]::before,
.ab-hero [class*="orbit"]::after,
.ab-hero [class*="ellipse"]::before,
.ab-hero [class*="ellipse"]::after,
.ab-hero [class*="frame"]::before,
.ab-hero [class*="frame"]::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* =========================
2. キャッチ上部テキスト専用デザイン
実際の span.ab-kicker だけに当てる
========================= */
.ab-hero .ab-kicker.ab-hero-kicker-v24 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
width: auto !important;
max-width: 100% !important;
min-height: 50px !important;
padding: 13px 28px 13px 24px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .09em !important;
line-height: 1.35 !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
opacity: 1 !important;
overflow: hidden !important;
margin-bottom: 28px !important;
}
/* 既存の .ab-kicker:before をゴールドドットとして整える */
.ab-hero .ab-kicker.ab-hero-kicker-v24::before {
content: "" !important;
display: inline-block !important;
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
border-radius: 999px !important;
background: #d6a648 !important;
box-shadow:
0 0 0 7px rgba(214,166,72,.12),
0 0 18px rgba(214,166,72,.44) !important;
}
/* 余計なafterだけ削除 */
.ab-hero .ab-kicker.ab-hero-kicker-v24::after {
display: none !important;
content: none !important;
}
.ab-hero .ab-kicker.ab-hero-kicker-v24 *,
.ab-hero .ab-kicker.ab-hero-kicker-v24 span,
.ab-hero .ab-kicker.ab-hero-kicker-v24 strong {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
opacity: 1 !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
}
/* =========================
3. 万一旧クラスが残った場合は巨大化しないよう無効化
========================= */
.ab-hero-label-v23 {
display: initial !important;
padding: initial !important;
border: 0 !important;
border-radius: initial !important;
background: transparent !important;
box-shadow: none !important;
}
/* =========================
4. スマホ
========================= */
@media (max-width: 620px) {
.ab-hero .ab-kicker.ab-hero-kicker-v24 {
min-height: 44px !important;
padding: 11px 18px 11px 16px !important;
gap: 10px !important;
font-size: 13px !important;
letter-spacing: .05em !important;
}
.ab-hero .ab-kicker.ab-hero-kicker-v24::before {
width: 11px !important;
height: 11px !important;
min-width: 11px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v25
小見出しラベル視認性改善
- AIR BRIDGE PRODUCT / FAQ / NEWS などのラベルだけを改善
- 親divに当たらない安全設計
========================================================= */
/* JSで付与する小見出しラベル専用クラス */
.ab-small-label-v25 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
width: auto !important;
max-width: 100% !important;
min-height: 54px !important;
padding: 15px 34px 15px 28px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .18em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
opacity: 1 !important;
overflow: hidden !important;
}
/* 左の光るドット */
.ab-small-label-v25::before {
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
border-radius: 999px !important;
background: #f2bf55 !important;
box-shadow:
0 0 0 9px rgba(242,191,85,.12),
0 0 18px rgba(242,191,85,.56),
0 0 28px rgba(242,191,85,.28) !important;
}
/* 余計なafterは消す */
.ab-small-label-v25::after {
display: none !important;
content: none !important;
}
.ab-small-label-v25 *,
.ab-small-label-v25 span,
.ab-small-label-v25 strong {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
opacity: 1 !important;
}
/* 青文字で薄くなっている既存ラベルの補助 */
.ab-products .ab-small-label-v25,
.ab-product-section .ab-small-label-v25,
.ab-section .ab-small-label-v25,
#products .ab-small-label-v25 {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
}
/* 既存の薄グレー背景・水色文字を無効化 */
.ab-small-label-v25[style],
.ab-small-label-v25 *[style] {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-small-label-v25 {
min-height: 44px !important;
padding: 11px 20px 11px 18px !important;
gap: 11px !important;
font-size: 13px !important;
letter-spacing: .12em !important;
}
.ab-small-label-v25::before {
width: 11px !important;
height: 11px !important;
min-width: 11px !important;
box-shadow:
0 0 0 7px rgba(242,191,85,.12),
0 0 14px rgba(242,191,85,.50) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v26
TOPページ 楕円完全削除版
========================================================= */
/*
TOPの大きな楕円は、ヒーロー領域の疑似要素・orbit/frame系・
border-radius付きの装飾枠・box-shadowが原因で再発しやすいため、
TOPヒーローの大枠だけを狙って完全に停止します。
小さなラベルやボタンには影響しないよう、対象を.hero大枠に限定します。
*/
/* =========================
1. TOPヒーロー大枠の楕円・枠線を完全停止
========================= */
.home .ab-hero,
.front-page .ab-hero,
body.home .ab-hero,
body.front-page .ab-hero,
.ab-hero {
overflow: hidden !important;
}
/* ヒーロー内部の大枠に付いた枠線/影を削除 */
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-wrap,
.ab-hero-copy,
.ab-copy,
.ab-hero-text,
.ab-hero-visual,
.ab-device-wrap,
.ab-device-wrap.has-custom-hero-image,
.ab-hero-main-image,
.ab-hero-figure,
.ab-hero-media {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* 大楕円を作りやすい疑似要素を削除 */
.ab-hero::before,
.ab-hero::after,
.ab-hero .ab-container::before,
.ab-hero .ab-container::after,
.ab-hero-grid::before,
.ab-hero-grid::after,
.ab-hero-inner::before,
.ab-hero-inner::after,
.ab-hero-wrap::before,
.ab-hero-wrap::after,
.ab-hero-copy::before,
.ab-hero-copy::after,
.ab-copy::before,
.ab-copy::after,
.ab-hero-text::before,
.ab-hero-text::after,
.ab-hero-visual::before,
.ab-hero-visual::after,
.ab-device-wrap::before,
.ab-device-wrap::after,
.ab-device-wrap.has-custom-hero-image::before,
.ab-device-wrap.has-custom-hero-image::after,
.ab-hero-main-image::before,
.ab-hero-main-image::after,
.ab-hero-figure::before,
.ab-hero-figure::after,
.ab-hero-media::before,
.ab-hero-media::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* orbit / ellipse / frame / ring 系の装飾を削除 */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"],
.ab-hero [class*="ring"],
.ab-hero [class*="halo"],
.ab-hero [class*="outline"] {
display: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.ab-hero [class*="orbit"]::before,
.ab-hero [class*="orbit"]::after,
.ab-hero [class*="ellipse"]::before,
.ab-hero [class*="ellipse"]::after,
.ab-hero [class*="frame"]::before,
.ab-hero [class*="frame"]::after,
.ab-hero [class*="ring"]::before,
.ab-hero [class*="ring"]::after,
.ab-hero [class*="halo"]::before,
.ab-hero [class*="halo"]::after,
.ab-hero [class*="outline"]::before,
.ab-hero [class*="outline"]::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* =========================
2. ただし小さいラベル/ボタンは消さない
========================= */
.ab-hero .ab-kicker,
.ab-hero .ab-hero-kicker-v24,
.ab-hero .ab-small-label-v25,
.ab-hero .ab-float,
.ab-hero .ab-btn,
.ab-hero a,
.ab-hero button {
display: inline-flex;
}
/* 小さいラベルのデザインは維持 */
.ab-hero .ab-kicker.ab-hero-kicker-v24,
.ab-small-label-v25 {
border-radius: 999px !important;
}
/* =========================
3. 楕円が border-radius で付いている場合の最終対策
ヒーロー大枠だけ角丸を消す
========================= */
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-wrap,
.ab-hero-visual,
.ab-device-wrap,
.ab-device-wrap.has-custom-hero-image,
.ab-hero-main-image {
border-radius: 0 !important;
}
/* =========================
4. TOP背景は宇宙感を維持
========================= */
.ab-hero {
background:
linear-gradient(90deg, rgba(1,2,10,.88) 0%, rgba(3,6,18,.78) 38%, rgba(3,8,22,.54) 64%, rgba(1,2,10,.42) 100%),
radial-gradient(circle at 28% 42%, rgba(255,79,179,.18), transparent 36%),
radial-gradient(circle at 78% 34%, rgba(56,189,248,.20), transparent 34%),
linear-gradient(135deg,#01020a 0%,#071026 56%,#02030a 100%) !important;
}
/* =========================
5. もし追加CSSに古い .ab-hero-label-v23 が残っていても無効化
========================= */
.ab-hero-label-v23 {
display: initial !important;
padding: initial !important;
border: 0 !important;
border-radius: initial !important;
background: transparent !important;
box-shadow: none !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v27
楕円削除 + TOP宇宙背景復活版
========================================================= */
/*
V26で楕円は消えたが、宇宙背景が弱くなったため、
v27ではTOPヒーロー本体に cosmic-hero-bg.png を復活。
ただし、楕円・orbit・frame・ring系の装飾は引き続き無効化。
*/
/* =========================
1. TOP宇宙背景を復活
========================= */
body.home .ab-hero,
body.front-page .ab-hero,
.home .ab-hero,
.front-page .ab-hero,
.ab-hero {
position: relative !important;
overflow: hidden !important;
background:
linear-gradient(90deg, rgba(1,2,10,.78) 0%, rgba(3,6,18,.62) 38%, rgba(3,8,22,.42) 64%, rgba(1,2,10,.32) 100%),
radial-gradient(circle at 20% 42%, rgba(255,79,179,.18), transparent 32%),
radial-gradient(circle at 80% 30%, rgba(56,189,248,.18), transparent 34%),
url("assets/images/cosmic-hero-bg.png") center center / cover no-repeat !important;
background-color: #02030b !important;
}
/* =========================
2. ヒーロー内の矩形背景を透明化
宇宙背景が見えるようにする
========================= */
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-wrap,
.ab-hero-copy,
.ab-copy,
.ab-hero-text,
.ab-hero-visual,
.ab-device-wrap,
.ab-device-wrap.has-custom-hero-image,
.ab-hero-main-image,
.ab-hero-figure,
.ab-hero-media {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* =========================
3. TOPの大きな楕円・装飾枠を完全停止
========================= */
.ab-hero::before,
.ab-hero::after,
.ab-hero .ab-container::before,
.ab-hero .ab-container::after,
.ab-hero-grid::before,
.ab-hero-grid::after,
.ab-hero-inner::before,
.ab-hero-inner::after,
.ab-hero-wrap::before,
.ab-hero-wrap::after,
.ab-hero-copy::before,
.ab-hero-copy::after,
.ab-copy::before,
.ab-copy::after,
.ab-hero-text::before,
.ab-hero-text::after,
.ab-hero-visual::before,
.ab-hero-visual::after,
.ab-device-wrap::before,
.ab-device-wrap::after,
.ab-device-wrap.has-custom-hero-image::before,
.ab-device-wrap.has-custom-hero-image::after,
.ab-hero-main-image::before,
.ab-hero-main-image::after,
.ab-hero-figure::before,
.ab-hero-figure::after,
.ab-hero-media::before,
.ab-hero-media::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* orbit / ellipse / frame / ring / halo / outline 系の楕円装飾を停止 */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"],
.ab-hero [class*="ring"],
.ab-hero [class*="halo"],
.ab-hero [class*="outline"] {
display: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.ab-hero [class*="orbit"]::before,
.ab-hero [class*="orbit"]::after,
.ab-hero [class*="ellipse"]::before,
.ab-hero [class*="ellipse"]::after,
.ab-hero [class*="frame"]::before,
.ab-hero [class*="frame"]::after,
.ab-hero [class*="ring"]::before,
.ab-hero [class*="ring"]::after,
.ab-hero [class*="halo"]::before,
.ab-hero [class*="halo"]::after,
.ab-hero [class*="outline"]::before,
.ab-hero [class*="outline"]::after {
display: none !important;
content: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* =========================
4. 商品画像・文字は背景より前面へ
========================= */
.ab-hero .ab-hero-copy,
.ab-hero .ab-copy,
.ab-hero .ab-hero-text,
.ab-hero .ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image,
.ab-hero .ab-hero-main-image {
position: relative !important;
z-index: 2 !important;
}
/* 文字の視認性 */
.ab-hero h1,
.ab-hero .ab-hero-title {
color: #ffffff !important;
text-shadow:
0 4px 18px rgba(0,0,0,.58),
0 0 24px rgba(255,255,255,.12),
0 0 36px rgba(56,189,248,.10) !important;
}
.ab-hero p {
color: rgba(255,255,255,.92) !important;
text-shadow: 0 3px 14px rgba(0,0,0,.45) !important;
}
/* =========================
5. 小ラベル・ボタンは維持
========================= */
.ab-hero .ab-kicker,
.ab-hero .ab-hero-kicker-v24,
.ab-hero .ab-small-label-v25,
.ab-hero .ab-float,
.ab-hero .ab-btn,
.ab-hero a,
.ab-hero button {
position: relative !important;
z-index: 3 !important;
}
/* V23由来の巨大化対策 */
.ab-hero-label-v23 {
display: initial !important;
padding: initial !important;
border: 0 !important;
border-radius: initial !important;
background: transparent !important;
box-shadow: none !important;
}
/* =========================
6. スマホ背景
========================= */
@media (max-width: 920px) {
body.home .ab-hero,
body.front-page .ab-hero,
.home .ab-hero,
.front-page .ab-hero,
.ab-hero {
background:
linear-gradient(180deg, rgba(1,2,10,.88) 0%, rgba(3,6,18,.78) 56%, rgba(1,2,10,.60) 100%),
radial-gradient(circle at 35% 28%, rgba(255,79,179,.16), transparent 34%),
radial-gradient(circle at 70% 25%, rgba(56,189,248,.14), transparent 34%),
url("assets/images/cosmic-hero-bg.png") center top / cover no-repeat !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v28
小見出しラベル統一版
LIFE SCENE / ONLINE STORE / AIR BRIDGE PRODUCT / FAQ / NEWS を同一デザインへ
========================================================= */
/* 小見出しラベル共通デザイン */
.ab-small-label-v25,
.ab-small-label-v28,
.ab-section-label,
.ab-section-kicker,
.ab-section-eyebrow,
.ab-lifestyle .ab-kicker,
.ab-products .ab-kicker,
.ab-products .ab-section-kicker,
.ab-products .ab-section-label,
.ab-products .ab-eyebrow,
#products .ab-kicker,
#products .ab-section-kicker,
#products .ab-section-label,
#products .ab-eyebrow,
section[id*="products"] .ab-kicker,
section[id*="products"] .ab-section-kicker,
section[id*="products"] .ab-section-label,
section[id*="products"] .ab-eyebrow,
section[id*="scene"] .ab-kicker,
section[id*="scene"] .ab-section-kicker,
section[id*="scene"] .ab-section-label,
section[id*="scene"] .ab-eyebrow {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
width: auto !important;
max-width: 100% !important;
min-height: 54px !important;
padding: 15px 34px 15px 28px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .18em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
opacity: 1 !important;
overflow: hidden !important;
margin: 0 auto 32px !important;
}
/* 左の光るゴールドドット */
.ab-small-label-v25::before,
.ab-small-label-v28::before,
.ab-section-label::before,
.ab-section-kicker::before,
.ab-section-eyebrow::before,
.ab-lifestyle .ab-kicker::before,
.ab-products .ab-kicker::before,
.ab-products .ab-section-kicker::before,
.ab-products .ab-section-label::before,
.ab-products .ab-eyebrow::before,
#products .ab-kicker::before,
#products .ab-section-kicker::before,
#products .ab-section-label::before,
#products .ab-eyebrow::before,
section[id*="products"] .ab-kicker::before,
section[id*="products"] .ab-section-kicker::before,
section[id*="products"] .ab-section-label::before,
section[id*="products"] .ab-eyebrow::before,
section[id*="scene"] .ab-kicker::before,
section[id*="scene"] .ab-section-kicker::before,
section[id*="scene"] .ab-section-label::before,
section[id*="scene"] .ab-eyebrow::before {
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
border-radius: 999px !important;
background: #f2bf55 !important;
box-shadow:
0 0 0 9px rgba(242,191,85,.12),
0 0 18px rgba(242,191,85,.56),
0 0 28px rgba(242,191,85,.28) !important;
}
/* 余計なafter非表示 */
.ab-small-label-v25::after,
.ab-small-label-v28::after,
.ab-section-label::after,
.ab-section-kicker::after,
.ab-section-eyebrow::after,
.ab-lifestyle .ab-kicker::after,
.ab-products .ab-kicker::after,
.ab-products .ab-section-kicker::after,
.ab-products .ab-section-label::after,
.ab-products .ab-eyebrow::after,
#products .ab-kicker::after,
#products .ab-section-kicker::after,
#products .ab-section-label::after,
#products .ab-eyebrow::after,
section[id*="products"] .ab-kicker::after,
section[id*="products"] .ab-section-kicker::after,
section[id*="products"] .ab-section-label::after,
section[id*="products"] .ab-eyebrow::after,
section[id*="scene"] .ab-kicker::after,
section[id*="scene"] .ab-section-kicker::after,
section[id*="scene"] .ab-section-label::after,
section[id*="scene"] .ab-eyebrow::after {
display: none !important;
content: none !important;
}
/* ラベル内文字 */
.ab-small-label-v25 *,
.ab-small-label-v28 *,
.ab-section-label *,
.ab-section-kicker *,
.ab-section-eyebrow *,
.ab-lifestyle .ab-kicker *,
.ab-products .ab-kicker *,
.ab-products .ab-section-kicker *,
.ab-products .ab-section-label *,
.ab-products .ab-eyebrow *,
#products .ab-kicker *,
#products .ab-section-kicker *,
#products .ab-section-label *,
#products .ab-eyebrow *,
section[id*="products"] .ab-kicker *,
section[id*="products"] .ab-section-kicker *,
section[id*="products"] .ab-section-label *,
section[id*="products"] .ab-eyebrow *,
section[id*="scene"] .ab-kicker *,
section[id*="scene"] .ab-section-kicker *,
section[id*="scene"] .ab-section-label *,
section[id*="scene"] .ab-eyebrow * {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
opacity: 1 !important;
}
/* ONLINE STORE が単なるテキスト要素の場合、JSで付く専用クラス */
.ab-online-store-label-v28 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
width: auto !important;
max-width: 100% !important;
min-height: 54px !important;
padding: 15px 34px 15px 28px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .18em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
opacity: 1 !important;
overflow: hidden !important;
margin: 0 auto 32px !important;
}
.ab-online-store-label-v28::before {
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
border-radius: 999px !important;
background: #f2bf55 !important;
box-shadow:
0 0 0 9px rgba(242,191,85,.12),
0 0 18px rgba(242,191,85,.56),
0 0 28px rgba(242,191,85,.28) !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-small-label-v25,
.ab-small-label-v28,
.ab-section-label,
.ab-section-kicker,
.ab-section-eyebrow,
.ab-online-store-label-v28,
.ab-lifestyle .ab-kicker,
.ab-products .ab-kicker,
.ab-products .ab-section-kicker,
.ab-products .ab-section-label,
.ab-products .ab-eyebrow,
#products .ab-kicker,
#products .ab-section-kicker,
#products .ab-section-label,
#products .ab-eyebrow,
section[id*="products"] .ab-kicker,
section[id*="products"] .ab-section-kicker,
section[id*="products"] .ab-section-label,
section[id*="products"] .ab-eyebrow,
section[id*="scene"] .ab-kicker,
section[id*="scene"] .ab-section-kicker,
section[id*="scene"] .ab-section-label,
section[id*="scene"] .ab-eyebrow {
min-height: 44px !important;
padding: 11px 20px 11px 18px !important;
gap: 11px !important;
font-size: 13px !important;
letter-spacing: .12em !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v29
PRODUCT DESIGN ラベル統一追加版
========================================================= */
/* PRODUCT DESIGNもLIFE SCENEと同じピル型に統一 */
.ab-product-design-label-v29,
.ab-small-label-v29 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
width: auto !important;
max-width: 100% !important;
min-height: 54px !important;
padding: 15px 34px 15px 28px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .18em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
opacity: 1 !important;
overflow: hidden !important;
margin: 0 auto 32px !important;
}
.ab-product-design-label-v29::before,
.ab-small-label-v29::before {
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
border-radius: 999px !important;
background: #f2bf55 !important;
box-shadow:
0 0 0 9px rgba(242,191,85,.12),
0 0 18px rgba(242,191,85,.56),
0 0 28px rgba(242,191,85,.28) !important;
}
.ab-product-design-label-v29::after,
.ab-small-label-v29::after {
display: none !important;
content: none !important;
}
/* 念のためPRODUCT DESIGNを含む短いラベル要素の色を統一 */
.ab-product-design-label-v29 *,
.ab-small-label-v29 * {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
opacity: 1 !important;
}
/* 既存のPRODUCT DESIGNが金文字だけの場合も最低限見やすく */
section span,
section small,
section strong,
.ab-section span,
.ab-section small,
.ab-section strong {
text-rendering: optimizeLegibility;
}
/* スマホ */
@media (max-width: 620px) {
.ab-product-design-label-v29,
.ab-small-label-v29 {
min-height: 44px !important;
padding: 11px 20px 11px 18px !important;
gap: 11px !important;
font-size: 13px !important;
letter-spacing: .12em !important;
}
.ab-product-design-label-v29::before,
.ab-small-label-v29::before {
width: 11px !important;
height: 11px !important;
min-width: 11px !important;
box-shadow:
0 0 0 7px rgba(242,191,85,.12),
0 0 14px rgba(242,191,85,.50) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v30
HOW TO BUY / AMBASSADOR ラベル統一追加版
========================================================= */
/* HOW TO BUY / AMBASSADOR も共通ピル型に統一 */
.ab-howto-label-v30,
.ab-ambassador-label-v30,
.ab-small-label-v30 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
width: auto !important;
max-width: 100% !important;
min-height: 54px !important;
padding: 15px 34px 15px 28px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .18em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
text-shadow:
0 0 10px rgba(255,235,180,.42),
0 2px 8px rgba(0,0,0,.45) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
opacity: 1 !important;
overflow: hidden !important;
margin: 0 auto 32px !important;
}
/* 左ドット */
.ab-howto-label-v30::before,
.ab-ambassador-label-v30::before,
.ab-small-label-v30::before {
content: "" !important;
display: inline-block !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
border-radius: 999px !important;
background: #f2bf55 !important;
box-shadow:
0 0 0 9px rgba(242,191,85,.12),
0 0 18px rgba(242,191,85,.56),
0 0 28px rgba(242,191,85,.28) !important;
}
/* 余計なafter削除 */
.ab-howto-label-v30::after,
.ab-ambassador-label-v30::after,
.ab-small-label-v30::after {
display: none !important;
content: none !important;
}
.ab-howto-label-v30 *,
.ab-ambassador-label-v30 *,
.ab-small-label-v30 * {
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
opacity: 1 !important;
}
/* 既存v28/v29ラベルとも完全統一 */
.ab-small-label-v25,
.ab-small-label-v28,
.ab-small-label-v29,
.ab-product-design-label-v29,
.ab-online-store-label-v28 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
min-height: 54px !important;
padding: 15px 34px 15px 28px !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(5,10,28,.98) 0%, rgba(10,22,52,.98) 58%, rgba(6,28,52,.96) 100%) !important;
color: #fff7df !important;
-webkit-text-fill-color: #fff7df !important;
border: 2px solid rgba(220,176,82,.88) !important;
font-weight: 900 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 0 22px rgba(220,176,82,.30),
0 12px 34px rgba(0,0,0,.38),
0 0 28px rgba(56,189,248,.10) !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-howto-label-v30,
.ab-ambassador-label-v30,
.ab-small-label-v30,
.ab-small-label-v25,
.ab-small-label-v28,
.ab-small-label-v29,
.ab-product-design-label-v29,
.ab-online-store-label-v28 {
min-height: 44px !important;
padding: 11px 20px 11px 18px !important;
gap: 11px !important;
font-size: 13px !important;
letter-spacing: .12em !important;
}
.ab-howto-label-v30::before,
.ab-ambassador-label-v30::before,
.ab-small-label-v30::before {
width: 11px !important;
height: 11px !important;
min-width: 11px !important;
box-shadow:
0 0 0 7px rgba(242,191,85,.12),
0 0 14px rgba(242,191,85,.50) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v31
NEWSラベルだけ前のシンプル表示へ戻す
========================================================= */
/*
V30で NEWS まで大型ピル型になったため、
NEWS部分だけ小さめの金文字ラベルへ戻します。
HOW TO BUY / AMBASSADOR / PRODUCT DESIGN / LIFE SCENE / ONLINE STORE は
ピル型のまま維持します。
*/
/* NEWSカード上部のNEWSラベルだけ、ピル型解除 */
.ab-news .ab-small-label-v25,
.ab-news .ab-small-label-v28,
.ab-news .ab-small-label-v29,
.ab-news .ab-small-label-v30,
.ab-news .ab-section-label,
.ab-news .ab-section-kicker,
.ab-news .ab-section-eyebrow,
#news .ab-small-label-v25,
#news .ab-small-label-v28,
#news .ab-small-label-v29,
#news .ab-small-label-v30,
#news .ab-section-label,
#news .ab-section-kicker,
#news .ab-section-eyebrow,
section[id*="news"] .ab-small-label-v25,
section[id*="news"] .ab-small-label-v28,
section[id*="news"] .ab-small-label-v29,
section[id*="news"] .ab-small-label-v30,
section[id*="news"] .ab-section-label,
section[id*="news"] .ab-section-kicker,
section[id*="news"] .ab-section-eyebrow,
.ab-news-card .ab-small-label-v25,
.ab-news-card .ab-small-label-v28,
.ab-news-card .ab-small-label-v29,
.ab-news-card .ab-small-label-v30,
.news-card .ab-small-label-v25,
.news-card .ab-small-label-v28,
.news-card .ab-small-label-v29,
.news-card .ab-small-label-v30 {
display: block !important;
width: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #d8b75d !important;
-webkit-text-fill-color: #d8b75d !important;
font-size: 18px !important;
font-weight: 900 !important;
letter-spacing: .28em !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
text-shadow: 0 0 10px rgba(216,183,93,.24) !important;
}
/* NEWSの左ドットを消す */
.ab-news .ab-small-label-v25::before,
.ab-news .ab-small-label-v28::before,
.ab-news .ab-small-label-v29::before,
.ab-news .ab-small-label-v30::before,
.ab-news .ab-section-label::before,
.ab-news .ab-section-kicker::before,
.ab-news .ab-section-eyebrow::before,
#news .ab-small-label-v25::before,
#news .ab-small-label-v28::before,
#news .ab-small-label-v29::before,
#news .ab-small-label-v30::before,
#news .ab-section-label::before,
#news .ab-section-kicker::before,
#news .ab-section-eyebrow::before,
section[id*="news"] .ab-small-label-v25::before,
section[id*="news"] .ab-small-label-v28::before,
section[id*="news"] .ab-small-label-v29::before,
section[id*="news"] .ab-small-label-v30::before,
section[id*="news"] .ab-section-label::before,
section[id*="news"] .ab-section-kicker::before,
section[id*="news"] .ab-section-eyebrow::before,
.ab-news-card .ab-small-label-v25::before,
.ab-news-card .ab-small-label-v28::before,
.ab-news-card .ab-small-label-v29::before,
.ab-news-card .ab-small-label-v30::before,
.news-card .ab-small-label-v25::before,
.news-card .ab-small-label-v28::before,
.news-card .ab-small-label-v29::before,
.news-card .ab-small-label-v30::before {
display: none !important;
content: none !important;
}
/* NEWSラベル内の文字色 */
.ab-news .ab-small-label-v25 *,
.ab-news .ab-small-label-v28 *,
.ab-news .ab-small-label-v29 *,
.ab-news .ab-small-label-v30 *,
#news .ab-small-label-v25 *,
#news .ab-small-label-v28 *,
#news .ab-small-label-v29 *,
#news .ab-small-label-v30 *,
section[id*="news"] .ab-small-label-v25 *,
section[id*="news"] .ab-small-label-v28 *,
section[id*="news"] .ab-small-label-v29 *,
section[id*="news"] .ab-small-label-v30 *,
.ab-news-card .ab-small-label-v25 *,
.ab-news-card .ab-small-label-v28 *,
.ab-news-card .ab-small-label-v29 *,
.ab-news-card .ab-small-label-v30 *,
.news-card .ab-small-label-v25 *,
.news-card .ab-small-label-v28 *,
.news-card .ab-small-label-v29 *,
.news-card .ab-small-label-v30 * {
color: #d8b75d !important;
-webkit-text-fill-color: #d8b75d !important;
}
/* NEWS画像プレースホルダー内のNEWSも中央小さめに戻す */
.ab-news-card .ab-thumb .ab-small-label-v25,
.ab-news-card .ab-thumb .ab-small-label-v28,
.ab-news-card .ab-thumb .ab-small-label-v29,
.ab-news-card .ab-thumb .ab-small-label-v30,
.news-card .news-thumb .ab-small-label-v25,
.news-card .news-thumb .ab-small-label-v28,
.news-card .news-thumb .ab-small-label-v29,
.news-card .news-thumb .ab-small-label-v30,
.ab-news-card [class*="thumb"] .ab-small-label-v25,
.ab-news-card [class*="thumb"] .ab-small-label-v28,
.ab-news-card [class*="thumb"] .ab-small-label-v29,
.ab-news-card [class*="thumb"] .ab-small-label-v30,
.news-card [class*="thumb"] .ab-small-label-v25,
.news-card [class*="thumb"] .ab-small-label-v28,
.news-card [class*="thumb"] .ab-small-label-v29,
.news-card [class*="thumb"] .ab-small-label-v30 {
display: block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 22px !important;
font-weight: 900 !important;
letter-spacing: .28em !important;
text-align: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* JSでNEWSにクラスが付いても最終的に解除 */
.ab-small-label-v30[data-label="NEWS"],
.ab-small-label-v29[data-label="NEWS"],
.ab-small-label-v28[data-label="NEWS"] {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v33
右側メイン画像：写真カード収め版
- V32のように画像は表示する
- ただしTOPヒーロー内に収めて崩れないようにする
- 浮遊ラベルは写真に被らないよう非表示/整理
========================================================= */
/* =========================
1. TOPヒーローの2カラムを安定化
========================= */
.ab-hero {
position: relative !important;
overflow: hidden !important;
}
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-wrap {
width: min(1440px, calc(100% - 56px)) !important;
max-width: 1440px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, .78fr) !important;
gap: clamp(28px, 4vw, 72px) !important;
align-items: center !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
position: relative !important;
z-index: 3 !important;
max-width: 760px !important;
min-width: 0 !important;
}
.ab-hero h1,
.ab-hero .ab-hero-title {
max-width: 820px !important;
overflow-wrap: normal !important;
word-break: keep-all !important;
}
/* =========================
2. 右側画像を写真カードとして収める
========================= */
.ab-hero-visual,
.ab-hero .ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: 560px !important;
min-width: 0 !important;
justify-self: end !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* カスタム右側画像本体 */
.ab-hero .ab-hero-main-image {
display: block !important;
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: 560px !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 4 / 3 !important;
margin: 0 auto !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: rgba(5,10,28,.70) !important;
border-radius: 30px !important;
border: 1px solid rgba(103,232,249,.22) !important;
box-shadow:
0 24px 70px rgba(0,0,0,.38),
0 0 34px rgba(56,189,248,.12) !important;
overflow: hidden !important;
}
/* 余計なオーバーレイや楕円を出さない */
.ab-hero .ab-hero-main-image::before,
.ab-hero .ab-hero-main-image::after,
.ab-hero .ab-device-wrap::before,
.ab-hero .ab-device-wrap::after,
.ab-hero .ab-device-wrap.has-custom-hero-image::before,
.ab-hero .ab-device-wrap.has-custom-hero-image::after,
.ab-hero-visual::before,
.ab-hero-visual::after {
display: none !important;
content: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* =========================
3. 右側画像用の浮遊ラベルは非表示
写真自体に文字が入っているため被り防止
========================= */
.ab-hero .ab-float,
.ab-hero .ab-float.one,
.ab-hero .ab-float.two,
.ab-hero .ab-device-wrap .ab-float,
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float {
display: none !important;
visibility: hidden !important;
}
/* =========================
4. 楕円装飾は引き続き削除
========================= */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"],
.ab-hero [class*="ring"],
.ab-hero [class*="halo"],
.ab-hero [class*="outline"] {
display: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.ab-hero [class*="orbit"]::before,
.ab-hero [class*="orbit"]::after,
.ab-hero [class*="ellipse"]::before,
.ab-hero [class*="ellipse"]::after,
.ab-hero [class*="frame"]::before,
.ab-hero [class*="frame"]::after,
.ab-hero [class*="ring"]::before,
.ab-hero [class*="ring"]::after,
.ab-hero [class*="halo"]::before,
.ab-hero [class*="halo"]::after,
.ab-hero [class*="outline"]::before,
.ab-hero [class*="outline"]::after {
display: none !important;
content: none !important;
}
/* =========================
5. 背景宇宙感は維持
========================= */
.ab-hero {
background:
linear-gradient(90deg, rgba(1,2,10,.78) 0%, rgba(3,6,18,.58) 38%, rgba(3,8,22,.35) 64%, rgba(1,2,10,.30) 100%),
radial-gradient(circle at 22% 42%, rgba(255,79,179,.16), transparent 32%),
radial-gradient(circle at 78% 30%, rgba(56,189,248,.16), transparent 34%),
url("assets/images/cosmic-hero-bg.png") center center / cover no-repeat !important;
background-color: #02030b !important;
}
/* =========================
6. 文字が左に切れないよう補正
========================= */
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
padding-left: clamp(8px, 2vw, 28px) !important;
}
.ab-hero .ab-hero-title,
.ab-hero h1 {
line-height: 1.08 !important;
}
/* =========================
7. タブレット/スマホ
========================= */
@media (max-width: 1100px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
justify-self: center !important;
max-width: 560px !important;
margin-top: 32px !important;
}
.ab-hero .ab-hero-main-image {
max-width: 560px !important;
aspect-ratio: 4 / 3 !important;
}
}
@media (max-width: 620px) {
.ab-hero .ab-container,
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-wrap {
width: min(100% - 28px, 100%) !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
padding-left: 0 !important;
}
.ab-hero .ab-hero-main-image {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 4 / 3 !important;
border-radius: 22px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v34
右側メイン画像 強制復元版
- 過去CSSの background: transparent !important に負けないよう
JSで background-image を inline !important 復元します
========================================================= */
/* 右側画像枠を表示状態に固定 */
.ab-hero .ab-device-wrap.has-custom-hero-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: 560px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* 右側メイン画像本体 */
.ab-hero .ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34 {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 3 !important;
width: 100% !important;
max-width: 560px !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 4 / 3 !important;
margin: 0 auto !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: rgba(5,10,28,.72) !important;
border-radius: 30px !important;
border: 1px solid rgba(103,232,249,.22) !important;
box-shadow:
0 24px 70px rgba(0,0,0,.38),
0 0 34px rgba(56,189,248,.12) !important;
overflow: hidden !important;
}
/* 背景画像を持っている時だけ写真カード表示を安定 */
.ab-hero-main-image.ab-right-hero-image-v34.has-bg-v34 {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* 右側写真と被る浮遊ラベルは非表示 */
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float,
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float.one,
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float.two,
.ab-hero .ab-hero-visual .ab-float {
display: none !important;
visibility: hidden !important;
}
/* 疑似要素による上書きを停止 */
.ab-hero .ab-hero-main-image::before,
.ab-hero .ab-hero-main-image::after,
.ab-hero-main-image.ab-right-hero-image-v34::before,
.ab-hero-main-image.ab-right-hero-image-v34::after {
display: none !important;
content: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* ヒーロー2カラム配置 */
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, .78fr) !important;
gap: clamp(28px, 4vw, 72px) !important;
align-items: center !important;
}
/* 左テキストが切れないように */
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
position: relative !important;
z-index: 3 !important;
max-width: 760px !important;
min-width: 0 !important;
}
/* スマホ */
@media (max-width: 1100px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero .ab-device-wrap.has-custom-hero-image {
justify-self: center !important;
max-width: 560px !important;
margin-top: 32px !important;
}
}
@media (max-width: 620px) {
.ab-hero .ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34 {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 4 / 3 !important;
border-radius: 22px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v35
右側メイン画像 ![]()
直接出力版
- background-image方式をやめ、カスタマイザー画像をimgタグで表示
- これでCSS上書きに負けず画像が出ます
========================================================= */
/* 旧background画像枠は隠す。v35のimgカードだけ使う */
.ab-hero .ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34 {
display: none !important;
}
/* v35右側画像カード */
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card {
display: block !important;
position: relative !important;
z-index: 5 !important;
width: 100% !important;
max-width: 560px !important;
margin: 0 auto !important;
padding: 0 !important;
border-radius: 30px !important;
overflow: hidden !important;
background: rgba(5,10,28,.72) !important;
border: 1px solid rgba(103,232,249,.22) !important;
box-shadow:
0 24px 70px rgba(0,0,0,.38),
0 0 34px rgba(56,189,248,.12) !important;
}
/* v35画像本体 */
.ab-hero .ab-v35-right-image,
.ab-v35-right-image {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 3 !important;
object-fit: cover !important;
object-position: center center !important;
visibility: visible !important;
opacity: 1 !important;
max-width: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 右側エリア */
.ab-hero-visual,
.ab-hero .ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 4 !important;
width: 100% !important;
max-width: 580px !important;
justify-self: end !important;
align-self: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* 写真に被る浮遊ラベルは非表示 */
.ab-hero .ab-float,
.ab-hero .ab-float.one,
.ab-hero .ab-float.two,
.ab-hero .ab-device-wrap .ab-float,
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float,
.ab-hero .ab-hero-visual .ab-float {
display: none !important;
visibility: hidden !important;
}
/* 2カラム安定 */
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, .78fr) !important;
gap: clamp(28px, 4vw, 72px) !important;
align-items: center !important;
}
/* 左テキストが切れないように */
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
position: relative !important;
z-index: 6 !important;
max-width: 780px !important;
min-width: 0 !important;
padding-left: clamp(8px, 2vw, 28px) !important;
}
/* 楕円装飾は維持して削除 */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"],
.ab-hero [class*="ring"],
.ab-hero [class*="halo"],
.ab-hero [class*="outline"] {
display: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* スマホ */
@media (max-width: 1100px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
justify-self: center !important;
max-width: 560px !important;
margin-top: 32px !important;
}
}
@media (max-width: 620px) {
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card {
max-width: 100% !important;
border-radius: 22px !important;
}
.ab-hero .ab-v35-right-image,
.ab-v35-right-image {
aspect-ratio: 4 / 3 !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
padding-left: 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v36
右側メイン画像 修正版
- カスタマイザー保存キー ab_hero_device_image に対応
- 画像を ![]()
直接表示
========================================================= */
/* 旧background画像枠は非表示、v36カードを使用 */
.ab-hero .ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34 {
display: none !important;
}
/* v36右側画像カード */
.ab-hero .ab-v36-right-image-card,
.ab-v36-right-image-card,
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card {
display: block !important;
position: relative !important;
z-index: 5 !important;
width: 100% !important;
max-width: 560px !important;
margin: 0 auto !important;
padding: 0 !important;
border-radius: 30px !important;
overflow: hidden !important;
background: rgba(5,10,28,.72) !important;
border: 1px solid rgba(103,232,249,.22) !important;
box-shadow:
0 24px 70px rgba(0,0,0,.38),
0 0 34px rgba(56,189,248,.12) !important;
}
/* v36画像本体 */
.ab-hero .ab-v36-right-image,
.ab-v36-right-image,
.ab-hero .ab-v35-right-image,
.ab-v35-right-image {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 3 !important;
object-fit: cover !important;
object-position: center center !important;
visibility: visible !important;
opacity: 1 !important;
max-width: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 右側エリア */
.ab-hero-visual,
.ab-hero .ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 4 !important;
width: 100% !important;
max-width: 580px !important;
justify-self: end !important;
align-self: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* 写真に被る浮遊ラベルは非表示 */
.ab-hero .ab-float,
.ab-hero .ab-float.one,
.ab-hero .ab-float.two,
.ab-hero .ab-device-wrap .ab-float,
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float,
.ab-hero .ab-hero-visual .ab-float {
display: none !important;
visibility: hidden !important;
}
/* 2カラム安定 */
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, .78fr) !important;
gap: clamp(28px, 4vw, 72px) !important;
align-items: center !important;
}
/* 左テキストが切れないように */
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
position: relative !important;
z-index: 6 !important;
max-width: 780px !important;
min-width: 0 !important;
padding-left: clamp(8px, 2vw, 28px) !important;
}
/* スマホ */
@media (max-width: 1100px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
justify-self: center !important;
max-width: 560px !important;
margin-top: 32px !important;
}
}
@media (max-width: 620px) {
.ab-hero .ab-v36-right-image-card,
.ab-v36-right-image-card,
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card {
max-width: 100% !important;
border-radius: 22px !important;
}
.ab-hero .ab-v36-right-image,
.ab-v36-right-image,
.ab-hero .ab-v35-right-image,
.ab-v35-right-image {
aspect-ratio: 4 / 3 !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
padding-left: 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37
透過PNG対応版
- 右側メイン画像を透過PNGとして1枚だけ表示
- 旧background-image方式・写真カード方式を非表示
- object-fit: contain で宇宙背景になじませる
========================================================= */
/* 旧方式の右側画像を完全に非表示：二重表示防止 */
.ab-hero .ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34,
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card,
.ab-hero .ab-v36-right-image-card,
.ab-v36-right-image-card {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 右側ビジュアル領域 */
.ab-hero-visual,
.ab-hero .ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 4 !important;
width: 100% !important;
max-width: 620px !important;
justify-self: end !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* 透過PNGラッパー */
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 8 !important;
width: min(42vw, 620px) !important;
max-width: 620px !important;
min-width: 320px !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* 透過PNG本体 */
.ab-hero .ab-v37-device-png,
.ab-v37-device-png {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 620px !important;
max-height: 620px !important;
object-fit: contain !important;
object-position: center center !important;
visibility: visible !important;
opacity: 1 !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
filter:
drop-shadow(0 28px 46px rgba(0,0,0,.42))
drop-shadow(0 0 24px rgba(56,189,248,.14)) !important;
}
/* 写真用の浮遊ラベルは非表示 */
.ab-hero .ab-float,
.ab-hero .ab-float.one,
.ab-hero .ab-float.two,
.ab-hero .ab-device-wrap .ab-float,
.ab-hero .ab-device-wrap.has-custom-hero-image .ab-float,
.ab-hero .ab-hero-visual .ab-float {
display: none !important;
visibility: hidden !important;
}
/* ヒーロー2カラム配置 */
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.02fr) minmax(360px, .86fr) !important;
gap: clamp(28px, 4vw, 76px) !important;
align-items: center !important;
}
/* 左テキスト */
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
position: relative !important;
z-index: 9 !important;
max-width: 780px !important;
min-width: 0 !important;
padding-left: clamp(8px, 2vw, 28px) !important;
}
/* 楕円装飾は出さない */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"],
.ab-hero [class*="ring"],
.ab-hero [class*="halo"],
.ab-hero [class*="outline"] {
display: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* スマホ・タブレット */
@media (max-width: 1100px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero-visual,
.ab-hero .ab-device-wrap,
.ab-hero .ab-device-wrap.has-custom-hero-image {
justify-self: center !important;
max-width: 620px !important;
margin-top: 34px !important;
}
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
width: min(78vw, 560px) !important;
min-width: 0 !important;
}
}
@media (max-width: 620px) {
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
width: min(92vw, 430px) !important;
}
.ab-hero .ab-v37-device-png,
.ab-v37-device-png {
max-height: 430px !important;
}
.ab-hero-copy,
.ab-copy,
.ab-hero-text {
padding-left: 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.1
二重表示完全停止版
- 透過PNGだけを1枚表示
- 旧右画像カード / background画像 / floating label を停止
========================================================= */
/* 旧右側画像表示を完全停止 */
.ab-hero .ab-hero-main-image,
.ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34,
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card,
.ab-hero .ab-v36-right-image-card,
.ab-v36-right-image-card,
.ab-hero .ab-v35-right-image,
.ab-v35-right-image,
.ab-hero .ab-v36-right-image,
.ab-v36-right-image,
.ab-hero .ab-glow,
.ab-hero .ab-device,
.ab-hero .ab-float,
.ab-hero .ab-float.one,
.ab-hero .ab-float.two {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* 右カラム */
.ab-hero .ab-device-wrap-v371,
.ab-device-wrap-v371,
.ab-hero .ab-device-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 620px !important;
min-height: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
position: relative !important;
z-index: 8 !important;
overflow: visible !important;
justify-self: end !important;
}
/* V37.1 PNGラッパー */
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: min(42vw, 620px) !important;
max-width: 620px !important;
min-width: 280px !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
position: relative !important;
z-index: 10 !important;
}
/* 透過PNG本体 */
.ab-hero .ab-v37-device-png,
.ab-v37-device-png {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 620px !important;
max-height: none !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
visibility: visible !important;
opacity: 1 !important;
filter:
drop-shadow(0 24px 44px rgba(0,0,0,.38))
drop-shadow(0 0 24px rgba(56,189,248,.12)) !important;
}
/* 右側はV37 PNG以外を出さない */
.ab-hero .ab-device-wrap-v371 > *:not(.ab-v37-device-png-wrap) {
display: none !important;
}
/* 2カラム安定化 */
.ab-hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.02fr) minmax(360px, .86fr) !important;
gap: clamp(28px, 4vw, 76px) !important;
align-items: center !important;
}
/* 左テキスト */
.ab-hero-copy,
.ab-copy,
.ab-hero-text,
.ab-hero .ab-container > div:first-child {
position: relative !important;
z-index: 9 !important;
min-width: 0 !important;
}
/* 楕円装飾は出さない */
.ab-hero [class*="orbit"],
.ab-hero [class*="ellipse"],
.ab-hero [class*="frame"],
.ab-hero [class*="ring"],
.ab-hero [class*="halo"],
.ab-hero [class*="outline"] {
display: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* タブレット */
@media (max-width: 1100px) {
.ab-hero-grid {
grid-template-columns: 1fr !important;
}
.ab-hero .ab-device-wrap-v371,
.ab-device-wrap-v371,
.ab-hero .ab-device-wrap {
justify-self: center !important;
max-width: 620px !important;
margin-top: 34px !important;
}
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
width: min(70vw, 520px) !important;
min-width: 0 !important;
}
}
/* スマホ */
@media (max-width: 768px) {
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
width: min(88vw, 420px) !important;
min-width: 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.2
画像エリア透明背景拡張版
- V37.1の右側PNG 1枚表示を維持
- PRODUCT DESIGN / FEATURE 周辺の画像カード背景を透明化
- 透過PNG / 透過WebP が宇宙背景になじむように調整
========================================================= */
/* =========================
1. TOP右側画像はV37.1と同じく1枚だけ
========================= */
.ab-hero .ab-hero-main-image,
.ab-hero-main-image,
.ab-hero-main-image.ab-right-hero-image-v34,
.ab-hero .ab-v35-right-image-card,
.ab-v35-right-image-card,
.ab-hero .ab-v36-right-image-card,
.ab-v36-right-image-card,
.ab-hero .ab-v35-right-image,
.ab-v35-right-image,
.ab-hero .ab-v36-right-image,
.ab-v36-right-image,
.ab-hero .ab-glow,
.ab-hero .ab-device,
.ab-hero .ab-float,
.ab-hero .ab-float.one,
.ab-hero .ab-float.two {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: min(42vw, 620px) !important;
max-width: 620px !important;
min-width: 280px !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
position: relative !important;
z-index: 10 !important;
}
.ab-hero .ab-v37-device-png,
.ab-v37-device-png {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 620px !important;
max-height: none !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
visibility: visible !important;
opacity: 1 !important;
filter:
drop-shadow(0 24px 44px rgba(0,0,0,.38))
drop-shadow(0 0 24px rgba(56,189,248,.12)) !important;
}
/* =========================
2. PRODUCT DESIGN / FEATURE系の画像カード背景を透明化
スクショの濃紺四角カードを消す
========================= */
.ab-feature-visual,
.ab-feature-visual.has-image,
.ab-feature-wrap .ab-feature-visual,
.ab-feature-wrap .ab-feature-visual.has-image,
#feature .ab-feature-visual,
#feature .ab-feature-visual.has-image,
section[id*="feature"] .ab-feature-visual,
section[id*="feature"] .ab-feature-visual.has-image,
.ab-design-visual,
.ab-product-design-visual,
.ab-visual-card,
.ab-visual-panel,
.ab-image-card,
.ab-image-panel {
background-color: transparent !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center center !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible !important;
}
/* 背景画像指定がある場合、画像そのものは消さずにcontain表示 */
.ab-feature-visual.has-image,
.ab-feature-wrap .ab-feature-visual.has-image,
#feature .ab-feature-visual.has-image,
section[id*="feature"] .ab-feature-visual.has-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: clamp(320px, 42vw, 620px) !important;
background-size: contain !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
filter:
drop-shadow(0 24px 44px rgba(0,0,0,.34))
drop-shadow(0 0 22px rgba(56,189,248,.10)) !important;
}
/* 画像カードの疑似要素背景を停止 */
.ab-feature-visual::before,
.ab-feature-visual::after,
.ab-feature-visual.has-image::before,
.ab-feature-visual.has-image::after,
.ab-feature-wrap .ab-feature-visual::before,
.ab-feature-wrap .ab-feature-visual::after,
#feature .ab-feature-visual::before,
#feature .ab-feature-visual::after,
.ab-design-visual::before,
.ab-design-visual::after,
.ab-product-design-visual::before,
.ab-product-design-visual::after,
.ab-visual-card::before,
.ab-visual-card::after,
.ab-visual-panel::before,
.ab-visual-panel::after,
.ab-image-card::before,
.ab-image-card::after,
.ab-image-panel::before,
.ab-image-panel::after {
display: none !important;
content: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* デフォルト疑似デバイスを非表示 */
.ab-feature-visual .ab-device,
.ab-feature-visual .ab-glow,
#feature .ab-device,
#feature .ab-glow,
section[id*="feature"] .ab-device,
section[id*="feature"] .ab-glow {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* =========================
3. feature画像がimgタグ出力の場合も透明対応
========================= */
.ab-feature-visual img,
.ab-feature-wrap .ab-feature-visual img,
#feature .ab-feature-visual img,
section[id*="feature"] .ab-feature-visual img,
.ab-design-visual img,
.ab-product-design-visual img,
.ab-visual-card img,
.ab-visual-panel img,
.ab-image-card img,
.ab-image-panel img {
display: block !important;
width: 100% !important;
max-width: 620px !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter:
drop-shadow(0 24px 44px rgba(0,0,0,.34))
drop-shadow(0 0 22px rgba(56,189,248,.10)) !important;
}
/* =========================
4. featureセクション全体は宇宙背景を維持
========================= */
#feature,
section[id*="feature"],
.ab-section:has(.ab-feature-wrap) {
background:
linear-gradient(90deg, rgba(1,2,10,.56), rgba(8,18,42,.30)),
radial-gradient(circle at 18% 35%, rgba(236,72,153,.14), transparent 30%),
radial-gradient(circle at 78% 30%, rgba(56,189,248,.12), transparent 34%) !important;
background-color: transparent !important;
}
/* 古い大きい角丸パネルが残る場合は透明化 */
.ab-feature-wrap,
#feature .ab-feature-wrap,
section[id*="feature"] .ab-feature-wrap {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* =========================
5. スマホ調整
========================= */
@media (max-width: 900px) {
.ab-feature-visual.has-image,
.ab-feature-wrap .ab-feature-visual.has-image,
#feature .ab-feature-visual.has-image,
section[id*="feature"] .ab-feature-visual.has-image {
min-height: clamp(260px, 78vw, 480px) !important;
background-size: contain !important;
}
}
@media (max-width: 768px) {
.ab-hero .ab-v37-device-png-wrap,
.ab-v37-device-png-wrap {
width: min(88vw, 420px) !important;
min-width: 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.3
商品カード：数量・カゴ・お問い合わせボタン配置修正版
========================================================= */
/* 商品カード内のフォーム・購入エリア */
.ab-product-card form,
.ab-product-card .cart,
.ab-product-card .ab-cart-form,
.ab-product-card form[action],
.ab-product-card .eshop-cart-area,
.ab-product-card .eshop-cart-area form,
.ab-products form,
.ab-products .cart,
.ab-products .eshop-cart-area,
.ab-products .eshop-cart-area form,
#products form,
#products .cart,
#products .eshop-cart-area,
#products .eshop-cart-area form {
display: grid !important;
grid-template-columns: 78px minmax(260px, 500px) !important;
column-gap: 28px !important;
row-gap: 26px !important;
align-items: center !important;
justify-content: start !important;
width: 100% !important;
}
/* 数量ラッパー */
.ab-product-card .quantity,
.ab-product-card p.quantity,
.ab-product-card .cart_quantity,
.ab-product-card td.quantity,
.ab-products .quantity,
.ab-products p.quantity,
.ab-products .cart_quantity,
.ab-products td.quantity,
#products .quantity,
#products p.quantity,
#products .cart_quantity,
#products td.quantity {
grid-column: 1 !important;
grid-row: 1 !important;
width: 78px !important;
min-width: 78px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
/* 数量入力欄 */
.ab-product-card input[type="number"],
.ab-product-card input.qty,
.ab-product-card input[name*="quantity"],
.ab-product-card input[name*="qty"],
.ab-products input[type="number"],
.ab-products input.qty,
.ab-products input[name*="quantity"],
.ab-products input[name*="qty"],
#products input[type="number"],
#products input.qty,
#products input[name*="quantity"],
#products input[name*="qty"] {
width: 78px !important;
height: 66px !important;
min-width: 78px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
font-size: 34px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: rgba(255,255,255,.08) !important;
border: 2px solid rgba(120,180,255,.55) !important;
border-radius: 6px !important;
box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset,0 0 18px rgba(56,189,248,.10) !important;
}
/* カゴに入れるボタン */
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"],
.ab-products .single_add_to_cart_button,
.ab-products .add_to_cart_button,
.ab-products button[type="submit"],
.ab-products input[type="submit"],
#products .single_add_to_cart_button,
#products .add_to_cart_button,
#products button[type="submit"],
#products input[type="submit"] {
grid-column: 2 !important;
grid-row: 1 !important;
width: min(100%, 500px) !important;
min-width: 260px !important;
height: 72px !important;
margin: 0 !important;
padding: 0 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
}
/* お問い合わせボタン */
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product-card a[href*="mail"],
.ab-products .ab-contact-button,
.ab-products .ab-inquiry-button,
.ab-products .ab-item-contact,
.ab-products a[href*="contact"],
.ab-products a[href*="inquiry"],
.ab-products a[href*="mail"],
#products .ab-contact-button,
#products .ab-inquiry-button,
#products .ab-item-contact,
#products a[href*="contact"],
#products a[href*="inquiry"],
#products a[href*="mail"] {
grid-column: 1 / 3 !important;
grid-row: 2 !important;
width: min(100%, 430px) !important;
min-width: 260px !important;
height: 64px !important;
margin: 4px 0 0 78px !important;
padding: 0 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
}
/* 旧inline-block配置・絶対配置の残りを解除 */
.ab-product-card .quantity,
.ab-product-card button,
.ab-product-card input,
.ab-product-card a,
.ab-products .quantity,
.ab-products button,
.ab-products input,
.ab-products a,
#products .quantity,
#products button,
#products input,
#products a {
position: relative !important;
box-sizing: border-box !important;
}
@media (max-width: 620px) {
.ab-product-card form,
.ab-product-card .cart,
.ab-product-card .ab-cart-form,
.ab-product-card form[action],
.ab-product-card .eshop-cart-area,
.ab-product-card .eshop-cart-area form,
.ab-products form,
.ab-products .cart,
.ab-products .eshop-cart-area,
.ab-products .eshop-cart-area form,
#products form,
#products .cart,
#products .eshop-cart-area,
#products .eshop-cart-area form {
grid-template-columns: 64px 1fr !important;
column-gap: 16px !important;
row-gap: 20px !important;
}
.ab-product-card .quantity,
.ab-product-card p.quantity,
.ab-product-card .cart_quantity,
.ab-product-card td.quantity,
.ab-products .quantity,
.ab-products p.quantity,
.ab-products .cart_quantity,
.ab-products td.quantity,
#products .quantity,
#products p.quantity,
#products .cart_quantity,
#products td.quantity {
width: 64px !important;
min-width: 64px !important;
}
.ab-product-card input[type="number"],
.ab-product-card input.qty,
.ab-product-card input[name*="quantity"],
.ab-product-card input[name*="qty"],
.ab-products input[type="number"],
.ab-products input.qty,
.ab-products input[name*="quantity"],
.ab-products input[name*="qty"],
#products input[type="number"],
#products input.qty,
#products input[name*="quantity"],
#products input[name*="qty"] {
width: 64px !important;
height: 58px !important;
min-width: 64px !important;
font-size: 30px !important;
}
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"],
.ab-products .single_add_to_cart_button,
.ab-products .add_to_cart_button,
.ab-products button[type="submit"],
.ab-products input[type="submit"],
#products .single_add_to_cart_button,
#products .add_to_cart_button,
#products button[type="submit"],
#products input[type="submit"] {
width: 100% !important;
min-width: 0 !important;
height: 64px !important;
padding: 0 18px !important;
}
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product-card a[href*="mail"],
.ab-products .ab-contact-button,
.ab-products .ab-inquiry-button,
.ab-products .ab-item-contact,
.ab-products a[href*="contact"],
.ab-products a[href*="inquiry"],
.ab-products a[href*="mail"],
#products .ab-contact-button,
#products .ab-inquiry-button,
#products .ab-item-contact,
#products a[href*="contact"],
#products a[href*="inquiry"],
#products a[href*="mail"] {
width: 100% !important;
min-width: 0 !important;
height: 60px !important;
margin: 4px 0 0 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.4
商品カード：ボタンはみ出し修正版
========================================================= */
/*
V37.3で間隔は確保できたが、商品カード幅に対して
カゴボタン・問い合わせボタンが大きすぎて右側が切れるため、
カード内に収まるよう幅・grid・余白を再調整。
*/
/* 商品カードの中身が横にはみ出ないように */
.ab-product-card,
.ab-products .ab-product-card,
#products .ab-product-card,
.ab-product-item,
.ab-products .ab-product-item,
#products .ab-product-item {
overflow: hidden !important;
box-sizing: border-box !important;
}
/* 商品カード内のフォーム・購入エリアをカード幅に固定 */
.ab-product-card form,
.ab-product-card .cart,
.ab-product-card .ab-cart-form,
.ab-product-card form[action],
.ab-product-card .eshop-cart-area,
.ab-product-card .eshop-cart-area form,
.ab-products .ab-product-card form,
.ab-products .ab-product-card .cart,
.ab-products .ab-product-card .eshop-cart-area,
.ab-products .ab-product-card .eshop-cart-area form,
#products .ab-product-card form,
#products .ab-product-card .cart,
#products .ab-product-card .eshop-cart-area,
#products .ab-product-card .eshop-cart-area form {
display: grid !important;
grid-template-columns: 70px minmax(0, 1fr) !important;
column-gap: 20px !important;
row-gap: 24px !important;
align-items: center !important;
justify-content: stretch !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 24px 0 0 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* 数量ラッパー */
.ab-product-card .quantity,
.ab-product-card p.quantity,
.ab-product-card .cart_quantity,
.ab-product-card td.quantity,
.ab-products .ab-product-card .quantity,
.ab-products .ab-product-card p.quantity,
#products .ab-product-card .quantity,
#products .ab-product-card p.quantity {
grid-column: 1 !important;
grid-row: 1 !important;
width: 70px !important;
min-width: 70px !important;
max-width: 70px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
box-sizing: border-box !important;
}
/* 数字入力 */
.ab-product-card input[type="number"],
.ab-product-card input.qty,
.ab-product-card input[name*="quantity"],
.ab-product-card input[name*="qty"],
.ab-products .ab-product-card input[type="number"],
.ab-products .ab-product-card input.qty,
#products .ab-product-card input[type="number"],
#products .ab-product-card input.qty {
width: 70px !important;
min-width: 70px !important;
max-width: 70px !important;
height: 66px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
box-sizing: border-box !important;
font-size: 34px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: rgba(255,255,255,0.08) !important;
border: 2px solid rgba(120,180,255,0.55) !important;
border-radius: 6px !important;
box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 18px rgba(56,189,248,.10) !important;
}
/* カゴに入れるボタン：カード内に収める */
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"],
.ab-products .ab-product-card .single_add_to_cart_button,
.ab-products .ab-product-card .add_to_cart_button,
.ab-products .ab-product-card button[type="submit"],
.ab-products .ab-product-card input[type="submit"],
#products .ab-product-card .single_add_to_cart_button,
#products .ab-product-card .add_to_cart_button,
#products .ab-product-card button[type="submit"],
#products .ab-product-card input[type="submit"] {
grid-column: 2 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 68px !important;
margin: 0 !important;
padding: 0 22px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* お問い合わせボタン：カード内に収める */
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product-card a[href*="mail"],
.ab-products .ab-product-card .ab-contact-button,
.ab-products .ab-product-card .ab-inquiry-button,
.ab-products .ab-product-card .ab-item-contact,
.ab-products .ab-product-card a[href*="contact"],
.ab-products .ab-product-card a[href*="inquiry"],
.ab-products .ab-product-card a[href*="mail"],
#products .ab-product-card .ab-contact-button,
#products .ab-product-card .ab-inquiry-button,
#products .ab-product-card .ab-item-contact,
#products .ab-product-card a[href*="contact"],
#products .ab-product-card a[href*="inquiry"],
#products .ab-product-card a[href*="mail"] {
grid-column: 2 !important;
grid-row: 2 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 60px !important;
margin: 0 !important;
padding: 0 20px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 価格・商品情報と購入エリアの余白 */
.ab-product-card .ab-product-meta,
.ab-product-card .product-meta,
.ab-product-card .price,
.ab-product-card .ab-price {
margin-bottom: 18px !important;
}
/* e-shopsのiframeや埋め込みがある場合 */
.ab-product-card iframe,
.ab-products .ab-product-card iframe,
#products .ab-product-card iframe {
max-width: 100% !important;
}
/* スマホ */
@media (max-width: 620px) {
.ab-product-card form,
.ab-product-card .cart,
.ab-product-card .ab-cart-form,
.ab-product-card form[action],
.ab-product-card .eshop-cart-area,
.ab-product-card .eshop-cart-area form,
.ab-products .ab-product-card form,
.ab-products .ab-product-card .cart,
.ab-products .ab-product-card .eshop-cart-area,
.ab-products .ab-product-card .eshop-cart-area form,
#products .ab-product-card form,
#products .ab-product-card .cart,
#products .ab-product-card .eshop-cart-area,
#products .ab-product-card .eshop-cart-area form {
grid-template-columns: 60px minmax(0, 1fr) !important;
column-gap: 14px !important;
row-gap: 18px !important;
}
.ab-product-card .quantity,
.ab-product-card p.quantity,
.ab-product-card .cart_quantity,
.ab-products .ab-product-card .quantity,
#products .ab-product-card .quantity {
width: 60px !important;
min-width: 60px !important;
max-width: 60px !important;
}
.ab-product-card input[type="number"],
.ab-product-card input.qty,
.ab-products .ab-product-card input[type="number"],
.ab-products .ab-product-card input.qty,
#products .ab-product-card input[type="number"],
#products .ab-product-card input.qty {
width: 60px !important;
min-width: 60px !important;
max-width: 60px !important;
height: 56px !important;
font-size: 28px !important;
}
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"],
.ab-products .ab-product-card .single_add_to_cart_button,
.ab-products .ab-product-card .add_to_cart_button,
.ab-products .ab-product-card button[type="submit"],
.ab-products .ab-product-card input[type="submit"],
#products .ab-product-card .single_add_to_cart_button,
#products .ab-product-card .add_to_cart_button,
#products .ab-product-card button[type="submit"],
#products .ab-product-card input[type="submit"] {
height: 60px !important;
padding: 0 14px !important;
font-size: 16px !important;
}
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product-card a[href*="mail"],
.ab-products .ab-product-card .ab-contact-button,
.ab-products .ab-product-card .ab-inquiry-button,
.ab-products .ab-product-card .ab-item-contact,
.ab-products .ab-product-card a[href*="contact"],
.ab-products .ab-product-card a[href*="inquiry"],
.ab-products .ab-product-card a[href*="mail"],
#products .ab-product-card .ab-contact-button,
#products .ab-product-card .ab-inquiry-button,
#products .ab-product-card .ab-item-contact,
#products .ab-product-card a[href*="contact"],
#products .ab-product-card a[href*="inquiry"],
#products .ab-product-card a[href*="mail"] {
height: 56px !important;
padding: 0 14px !important;
font-size: 15px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.5
商品カード ボタン崩れ完全修正版
- 数量欄
- カゴに入れる
- 商品に関するお問い合わせ
をカード幅内に収める
========================================================= */
/* 商品カード全体 */
.ab-product-card,
.ab-product-item,
#products .ab-product-card,
#products .ab-product-item,
.ab-products .ab-product-card,
.ab-products .ab-product-item {
overflow: hidden !important;
box-sizing: border-box !important;
}
/* カートフォーム */
.ab-product-card form.cart,
.ab-product-card form,
.ab-product-card .cart,
.ab-product-card .ab-cart-form,
#products .ab-product-card form.cart,
#products .ab-product-card form,
#products .ab-product-card .cart,
.ab-products .ab-product-card form.cart,
.ab-products .ab-product-card form,
.ab-products .ab-product-card .cart {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 18px !important;
margin-top: 24px !important;
box-sizing: border-box !important;
}
/* 数量欄 */
.ab-product-card .quantity,
#products .ab-product-card .quantity,
.ab-products .ab-product-card .quantity {
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
flex: 0 0 72px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.ab-product-card input.qty,
.ab-product-card input[type="number"],
#products .ab-product-card input.qty,
#products .ab-product-card input[type="number"],
.ab-products .ab-product-card input.qty,
.ab-products .ab-product-card input[type="number"] {
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
height: 72px !important;
font-size: 38px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: rgba(255,255,255,0.08) !important;
border: 2px solid rgba(120,180,255,.45) !important;
border-radius: 10px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* カゴに入れる */
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
#products .ab-product-card .single_add_to_cart_button,
#products .ab-product-card .add_to_cart_button,
#products .ab-product-card button[type="submit"],
.ab-products .ab-product-card .single_add_to_cart_button,
.ab-products .ab-product-card .add_to_cart_button,
.ab-products .ab-product-card button[type="submit"] {
flex: 1 1 calc(100% - 100px) !important;
width: auto !important;
max-width: calc(100% - 100px) !important;
min-width: 0 !important;
height: 72px !important;
margin: 0 !important;
padding: 0 24px !important;
border-radius: 999px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
box-sizing: border-box !important;
}
/* お問い合わせボタン */
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="mail"],
#products .ab-product-card .ab-contact-button,
#products .ab-product-card .ab-inquiry-button,
#products .ab-product-card .ab-item-contact,
#products .ab-product-card a[href*="contact"],
#products .ab-product-card a[href*="mail"],
.ab-products .ab-product-card .ab-contact-button,
.ab-products .ab-product-card .ab-inquiry-button,
.ab-products .ab-product-card .ab-item-contact,
.ab-products .ab-product-card a[href*="contact"],
.ab-products .ab-product-card a[href*="mail"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 10px !important;
margin-left: 90px !important;
width: calc(100% - 90px) !important;
max-width: calc(100% - 90px) !important;
min-width: 0 !important;
height: 64px !important;
padding: 0 20px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
box-sizing: border-box !important;
}
/* 価格文字 */
.ab-product-card .price,
.ab-product-card .ab-price,
.ab-product-card .woocommerce-Price-amount,
#products .ab-product-card .price,
#products .ab-product-card .ab-price,
.ab-products .ab-product-card .price,
.ab-products .ab-product-card .ab-price {
color: #7fd3ff !important;
font-weight: 700 !important;
}
/* スマホ */
@media (max-width: 768px) {
.ab-product-card form.cart,
.ab-product-card form,
.ab-product-card .cart,
.ab-product-card .ab-cart-form {
gap: 14px !important;
}
.ab-product-card .quantity,
#products .ab-product-card .quantity,
.ab-products .ab-product-card .quantity {
width: 58px !important;
min-width: 58px !important;
max-width: 58px !important;
flex: 0 0 58px !important;
}
.ab-product-card input.qty,
.ab-product-card input[type="number"],
#products .ab-product-card input.qty,
#products .ab-product-card input[type="number"],
.ab-products .ab-product-card input.qty,
.ab-products .ab-product-card input[type="number"] {
width: 58px !important;
min-width: 58px !important;
max-width: 58px !important;
height: 58px !important;
font-size: 28px !important;
}
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
#products .ab-product-card .single_add_to_cart_button,
#products .ab-product-card .add_to_cart_button,
#products .ab-product-card button[type="submit"],
.ab-products .ab-product-card .single_add_to_cart_button,
.ab-products .ab-product-card .add_to_cart_button,
.ab-products .ab-product-card button[type="submit"] {
max-width: calc(100% - 72px) !important;
height: 60px !important;
font-size: 18px !important;
padding: 0 16px !important;
}
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="mail"],
#products .ab-product-card .ab-contact-button,
#products .ab-product-card .ab-inquiry-button,
#products .ab-product-card .ab-item-contact,
#products .ab-product-card a[href*="contact"],
#products .ab-product-card a[href*="mail"],
.ab-products .ab-product-card .ab-contact-button,
.ab-products .ab-product-card .ab-inquiry-button,
.ab-products .ab-product-card .ab-item-contact,
.ab-products .ab-product-card a[href*="contact"],
.ab-products .ab-product-card a[href*="mail"] {
margin-left: 72px !important;
width: calc(100% - 72px) !important;
max-width: calc(100% - 72px) !important;
height: 56px !important;
font-size: 16px !important;
padding: 0 14px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.6
商品カード カートUI JS補助対応版
========================================================= */
/* v37.6 JSが付与するクラスに対して最終整形 */
.ab-v376-card {
overflow: hidden !important;
box-sizing: border-box !important;
}
.ab-v376-cart-row {
display: grid !important;
grid-template-columns: 72px minmax(0, 1fr) !important;
column-gap: 20px !important;
row-gap: 22px !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-top: 24px !important;
}
.ab-v376-qty {
grid-column: 1 !important;
grid-row: 1 !important;
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
height: 72px !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.ab-v376-qty input,
input.ab-v376-qty-input {
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
height: 72px !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
font-size: 38px !important;
font-weight: 700 !important;
line-height: 1 !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: rgba(255,255,255,.08) !important;
border: 2px solid rgba(120,180,255,.55) !important;
border-radius: 10px !important;
}
.ab-v376-cart-button {
grid-column: 2 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 72px !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 22px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.ab-v376-inquiry {
grid-column: 2 !important;
grid-row: 2 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 62px !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 通常セレクタでも保険として広めに指定 */
#products .ab-product-card button,
#products .ab-product-card a,
#products .ab-product-card input,
.ab-products .ab-product-card button,
.ab-products .ab-product-card a,
.ab-products .ab-product-card input {
box-sizing: border-box !important;
}
@media (max-width: 768px) {
.ab-v376-cart-row {
grid-template-columns: 58px minmax(0, 1fr) !important;
column-gap: 14px !important;
row-gap: 16px !important;
}
.ab-v376-qty,
.ab-v376-qty input,
input.ab-v376-qty-input {
width: 58px !important;
min-width: 58px !important;
max-width: 58px !important;
height: 58px !important;
font-size: 28px !important;
}
.ab-v376-cart-button {
height: 60px !important;
font-size: 17px !important;
padding: 0 14px !important;
}
.ab-v376-inquiry {
height: 56px !important;
font-size: 15px !important;
padding: 0 14px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.7
商品カード カートボタン重なり解消版
- 数量・カゴ・問い合わせを専用ラッパーで縦整理
========================================================= */
.ab-v377-card {
overflow: hidden !important;
box-sizing: border-box !important;
}
.ab-v377-cart-layout {
display: grid !important;
grid-template-columns: 72px minmax(0, 1fr) !important;
column-gap: 18px !important;
row-gap: 18px !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 24px 0 0 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
clear: both !important;
}
.ab-v377-qty-wrap {
grid-column: 1 !important;
grid-row: 1 !important;
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
height: 72px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
display: block !important;
}
.ab-v377-qty-wrap input,
input.ab-v377-qty-input {
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
height: 72px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
box-sizing: border-box !important;
font-size: 38px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: rgba(255,255,255,.08) !important;
border: 2px solid rgba(120,180,255,.55) !important;
border-radius: 10px !important;
box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 18px rgba(56,189,248,.10) !important;
}
.ab-v377-cart-button {
grid-column: 2 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 68px !important;
margin: 0 !important;
padding: 0 20px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
position: relative !important;
z-index: 2 !important;
}
.ab-v377-inquiry {
grid-column: 2 !important;
grid-row: 2 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 60px !important;
margin: 0 !important;
padding: 0 18px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
position: relative !important;
z-index: 1 !important;
}
/* 旧レイアウトクラスを無効化 */
.ab-v376-cart-row:not(.ab-v377-cart-layout) {
display: block !important;
}
/* 商品カード内でのはみ出し抑制 */
.ab-product-card,
.ab-product-item,
#products .ab-product-card,
#products .ab-product-item,
.ab-products .ab-product-card,
.ab-products .ab-product-item {
overflow: hidden !important;
box-sizing: border-box !important;
}
.ab-product-card button,
.ab-product-card a,
.ab-product-card input,
#products .ab-product-card button,
#products .ab-product-card a,
#products .ab-product-card input,
.ab-products .ab-product-card button,
.ab-products .ab-product-card a,
.ab-products .ab-product-card input {
box-sizing: border-box !important;
}
/* 念のため、問い合わせボタンの絶対配置・浮き指定を解除 */
.ab-v377-inquiry,
.ab-v377-cart-button,
.ab-v377-qty-wrap,
.ab-v377-qty-input {
float: none !important;
transform: none !important;
}
/* スマホ */
@media (max-width: 768px) {
.ab-v377-cart-layout {
grid-template-columns: 58px minmax(0, 1fr) !important;
column-gap: 14px !important;
row-gap: 16px !important;
}
.ab-v377-qty-wrap,
.ab-v377-qty-wrap input,
input.ab-v377-qty-input {
width: 58px !important;
min-width: 58px !important;
max-width: 58px !important;
height: 58px !important;
font-size: 28px !important;
}
.ab-v377-cart-button {
height: 60px !important;
padding: 0 14px !important;
font-size: 16px !important;
}
.ab-v377-inquiry {
height: 56px !important;
padding: 0 14px !important;
font-size: 15px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8
実商品カード .ab-product 対応版
========================================================= */
/* 実際の商品カードクラス */
#products .ab-product,
.ab-products .ab-product,
.ab-product {
overflow: hidden !important;
box-sizing: border-box !important;
}
/* e-shops埋め込みエリア */
#products .ab-product .ab-cart-html,
.ab-products .ab-product .ab-cart-html,
.ab-product .ab-cart-html,
#products .ab-product .ab-cart-embed,
.ab-products .ab-product .ab-cart-embed,
.ab-product .ab-cart-embed {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
margin-top: 24px !important;
}
/* V37.8 JSが作るレイアウト */
.ab-v378-cart-layout {
display: grid !important;
grid-template-columns: 72px minmax(0, 1fr) !important;
column-gap: 18px !important;
row-gap: 18px !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 24px 0 0 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
clear: both !important;
}
.ab-v378-qty-wrap {
grid-column: 1 !important;
grid-row: 1 !important;
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
height: 72px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.ab-v378-qty-wrap input,
input.ab-v378-qty-input {
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
height: 72px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
box-sizing: border-box !important;
font-size: 38px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: rgba(255,255,255,.08) !important;
border: 2px solid rgba(120,180,255,.55) !important;
border-radius: 10px !important;
}
.ab-v378-cart-button {
grid-column: 2 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 68px !important;
margin: 0 !important;
padding: 0 20px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
position: relative !important;
z-index: 2 !important;
}
.ab-v378-inquiry {
grid-column: 2 !important;
grid-row: 2 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 60px !important;
margin: 0 !important;
padding: 0 18px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
position: relative !important;
z-index: 1 !important;
}
/* 旧クラスを弱める */
.ab-v376-cart-row:not(.ab-v378-cart-layout),
.ab-v377-cart-layout:not(.ab-v378-cart-layout) {
display: block !important;
}
/* e-shops側で固定幅が入る場合の解除 */
#products .ab-product .ab-cart-html button,
#products .ab-product .ab-cart-html a,
#products .ab-product .ab-cart-html input,
#products .ab-product .ab-cart-embed button,
#products .ab-product .ab-cart-embed a,
#products .ab-product .ab-cart-embed input,
.ab-products .ab-product .ab-cart-html button,
.ab-products .ab-product .ab-cart-html a,
.ab-products .ab-product .ab-cart-html input,
.ab-product .ab-cart-html button,
.ab-product .ab-cart-html a,
.ab-product .ab-cart-html input {
box-sizing: border-box !important;
float: none !important;
transform: none !important;
}
/* スマホ */
@media (max-width: 768px) {
.ab-v378-cart-layout {
grid-template-columns: 58px minmax(0, 1fr) !important;
column-gap: 14px !important;
row-gap: 16px !important;
}
.ab-v378-qty-wrap,
.ab-v378-qty-wrap input,
input.ab-v378-qty-input {
width: 58px !important;
min-width: 58px !important;
max-width: 58px !important;
height: 58px !important;
font-size: 28px !important;
}
.ab-v378-cart-button {
height: 60px !important;
padding: 0 14px !important;
font-size: 16px !important;
}
.ab-v378-inquiry {
height: 56px !important;
padding: 0 14px !important;
font-size: 15px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.1
商品ボタン重なり完全停止版
- 商品カード内の数量・カゴ・問い合わせを縦並び固定
- absolute / transform / float を強制解除
========================================================= */
/* 商品カード */
.ab-product,
.ab-product-card,
.ab-product-item,
#products .ab-product,
#products .ab-product-card,
#products .ab-product-item,
.ab-products .ab-product,
.ab-products .ab-product-card,
.ab-products .ab-product-item {
position: relative !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* フォーム・カートHTML全体 */
.ab-product form,
.ab-product .cart,
.ab-product .ab-cart-html,
.ab-product .ab-cart-embed,
.ab-product-card form,
.ab-product-card .cart,
.ab-product-card .ab-cart-html,
.ab-product-card .ab-cart-embed,
#products .ab-product form,
#products .ab-product .cart,
#products .ab-product .ab-cart-html,
#products .ab-product .ab-cart-embed,
.ab-products .ab-product form,
.ab-products .ab-product .cart,
.ab-products .ab-product .ab-cart-html,
.ab-products .ab-product .ab-cart-embed {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 18px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-top: 20px !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* 数量 */
.ab-product .quantity,
.ab-product-card .quantity,
#products .ab-product .quantity,
.ab-products .ab-product .quantity {
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
float: none !important;
order: 1 !important;
z-index: 1 !important;
}
.ab-product input.qty,
.ab-product input[type="number"],
.ab-product-card input.qty,
.ab-product-card input[type="number"],
#products .ab-product input.qty,
#products .ab-product input[type="number"],
.ab-products .ab-product input.qty,
.ab-products .ab-product input[type="number"] {
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
height: 72px !important;
margin: 0 !important;
padding: 0 !important;
order: 1 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
float: none !important;
z-index: 1 !important;
display: block !important;
box-sizing: border-box !important;
font-size: 38px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: rgba(255,255,255,0.08) !important;
border: 2px solid rgba(120,180,255,.45) !important;
border-radius: 10px !important;
}
/* カゴボタン */
.ab-product .single_add_to_cart_button,
.ab-product .add_to_cart_button,
.ab-product button[type="submit"],
.ab-product input[type="submit"],
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"],
#products .ab-product .single_add_to_cart_button,
#products .ab-product .add_to_cart_button,
#products .ab-product button[type="submit"],
#products .ab-product input[type="submit"],
.ab-products .ab-product .single_add_to_cart_button,
.ab-products .ab-product .add_to_cart_button,
.ab-products .ab-product button[type="submit"],
.ab-products .ab-product input[type="submit"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 68px !important;
margin: 0 !important;
padding: 0 22px !important;
order: 2 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
float: none !important;
z-index: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* お問い合わせ */
.ab-product .ab-contact-button,
.ab-product .ab-inquiry-button,
.ab-product .ab-item-contact,
.ab-product a[href*="contact"],
.ab-product a[href*="inquiry"],
.ab-product a[href*="mail"],
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product-card a[href*="mail"],
#products .ab-product .ab-contact-button,
#products .ab-product .ab-inquiry-button,
#products .ab-product .ab-item-contact,
#products .ab-product a[href*="contact"],
#products .ab-product a[href*="inquiry"],
#products .ab-product a[href*="mail"],
.ab-products .ab-product .ab-contact-button,
.ab-products .ab-product .ab-inquiry-button,
.ab-products .ab-product .ab-item-contact,
.ab-products .ab-product a[href*="contact"],
.ab-products .ab-product a[href*="inquiry"],
.ab-products .ab-product a[href*="mail"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 60px !important;
margin: 12px 0 0 0 !important;
padding: 0 20px !important;
order: 3 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
float: none !important;
z-index: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 旧JS付与クラスを無効化 */
.ab-v376-cart-row,
.ab-v377-cart-layout,
.ab-v378-cart-layout {
display: contents !important;
}
.ab-v376-cart-button,
.ab-v377-cart-button,
.ab-v378-cart-button,
.ab-v376-inquiry,
.ab-v377-inquiry,
.ab-v378-inquiry {
position: relative !important;
transform: none !important;
float: none !important;
}
/* 商品カード内の全要素のbox-sizing */
.ab-product *,
.ab-product-card *,
.ab-product-item * {
box-sizing: border-box !important;
}
/* スマホ */
@media (max-width: 768px) {
.ab-product input.qty,
.ab-product input[type="number"],
.ab-product-card input.qty,
.ab-product-card input[type="number"] {
width: 58px !important;
min-width: 58px !important;
max-width: 58px !important;
height: 58px !important;
font-size: 28px !important;
}
.ab-product .single_add_to_cart_button,
.ab-product .add_to_cart_button,
.ab-product button[type="submit"],
.ab-product input[type="submit"],
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"] {
height: 60px !important;
font-size: 17px !important;
padding: 0 16px !important;
}
.ab-product .ab-contact-button,
.ab-product .ab-inquiry-button,
.ab-product .ab-item-contact,
.ab-product a[href*="contact"],
.ab-product a[href*="inquiry"],
.ab-product a[href*="mail"],
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product-card a[href*="mail"] {
height: 56px !important;
font-size: 15px !important;
padding: 0 14px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.2
商品ボタン小さめ調整版
- V37.8.1の縦並びは維持
- ボタン幅・高さ・文字サイズをコンパクト化
========================================================= */
/* カートHTML全体の余白を少し詰める */
.ab-product form,
.ab-product .cart,
.ab-product .ab-cart-html,
.ab-product .ab-cart-embed,
.ab-product-card form,
.ab-product-card .cart,
.ab-product-card .ab-cart-html,
.ab-product-card .ab-cart-embed,
#products .ab-product form,
#products .ab-product .cart,
#products .ab-product .ab-cart-html,
#products .ab-product .ab-cart-embed,
.ab-products .ab-product form,
.ab-products .ab-product .cart,
.ab-products .ab-product .ab-cart-html,
.ab-products .ab-product .ab-cart-embed {
gap: 14px !important;
margin-top: 18px !important;
}
/* 数量欄を少し小さく */
.ab-product .quantity,
.ab-product-card .quantity,
#products .ab-product .quantity,
.ab-products .ab-product .quantity {
width: 58px !important;
min-width: 58px !important;
max-width: 58px !important;
}
.ab-product input.qty,
.ab-product input[type="number"],
.ab-product-card input.qty,
.ab-product-card input[type="number"],
#products .ab-product input.qty,
#products .ab-product input[type="number"],
.ab-products .ab-product input.qty,
.ab-products .ab-product input[type="number"] {
width: 58px !important;
min-width: 58px !important;
max-width: 58px !important;
height: 58px !important;
font-size: 28px !important;
border-radius: 8px !important;
}
/* カゴボタンを小さく・短く */
.ab-product .single_add_to_cart_button,
.ab-product .add_to_cart_button,
.ab-product button[type="submit"],
.ab-product input[type="submit"],
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"],
#products .ab-product .single_add_to_cart_button,
#products .ab-product .add_to_cart_button,
#products .ab-product button[type="submit"],
#products .ab-product input[type="submit"],
.ab-products .ab-product .single_add_to_cart_button,
.ab-products .ab-product .add_to_cart_button,
.ab-products .ab-product button[type="submit"],
.ab-products .ab-product input[type="submit"] {
width: min(100%, 320px) !important;
max-width: 320px !important;
height: 54px !important;
padding: 0 18px !important;
font-size: 18px !important;
line-height: 1 !important;
align-self: flex-start !important;
}
/* お問い合わせボタンも小さく・短く */
.ab-product .ab-contact-button,
.ab-product .ab-inquiry-button,
.ab-product .ab-item-contact,
.ab-product a[href*="contact"],
.ab-product a[href*="inquiry"],
.ab-product a[href*="mail"],
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product-card a[href*="mail"],
#products .ab-product .ab-contact-button,
#products .ab-product .ab-inquiry-button,
#products .ab-product .ab-item-contact,
#products .ab-product a[href*="contact"],
#products .ab-product a[href*="inquiry"],
#products .ab-product a[href*="mail"],
.ab-products .ab-product .ab-contact-button,
.ab-products .ab-product .ab-inquiry-button,
.ab-products .ab-product .ab-item-contact,
.ab-products .ab-product a[href*="contact"],
.ab-products .ab-product a[href*="inquiry"],
.ab-products .ab-product a[href*="mail"] {
width: min(100%, 340px) !important;
max-width: 340px !important;
height: 52px !important;
margin: 4px 0 0 0 !important;
padding: 0 18px !important;
font-size: 16px !important;
line-height: 1 !important;
align-self: flex-start !important;
}
/* 旧JSクラスにも小さめ指定 */
.ab-v376-cart-button,
.ab-v377-cart-button,
.ab-v378-cart-button {
width: min(100%, 320px) !important;
max-width: 320px !important;
height: 54px !important;
font-size: 18px !important;
align-self: flex-start !important;
}
.ab-v376-inquiry,
.ab-v377-inquiry,
.ab-v378-inquiry {
width: min(100%, 340px) !important;
max-width: 340px !important;
height: 52px !important;
font-size: 16px !important;
align-self: flex-start !important;
}
/* スマホ */
@media (max-width: 768px) {
.ab-product .single_add_to_cart_button,
.ab-product .add_to_cart_button,
.ab-product button[type="submit"],
.ab-product input[type="submit"],
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"] {
width: min(100%, 280px) !important;
max-width: 280px !important;
height: 50px !important;
font-size: 16px !important;
}
.ab-product .ab-contact-button,
.ab-product .ab-inquiry-button,
.ab-product .ab-item-contact,
.ab-product a[href*="contact"],
.ab-product a[href*="inquiry"],
.ab-product a[href*="mail"],
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product-card a[href*="mail"] {
width: min(100%, 300px) !important;
max-width: 300px !important;
height: 48px !important;
font-size: 14px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.6
価格HTML専用化 + 紫星背景維持版
========================================================= */
/* 価格専用HTML */
.ab-cart-price-line,
.ab-product .ab-cart-price-line,
.ab-product-card .ab-cart-price-line,
#products .ab-product .ab-cart-price-line,
.ab-products .ab-product .ab-cart-price-line {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 30px !important;
line-height: 1.35 !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
color: #7fdcff !important;
-webkit-text-fill-color: #7fdcff !important;
text-shadow:
0 0 12px rgba(56,189,248,.60),
0 0 28px rgba(56,189,248,.28) !important;
margin: 20px 0 20px 0 !important;
padding: 0 !important;
}
.ab-cart-price-label,
.ab-cart-price-value {
font-size: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
color: inherit !important;
-webkit-text-fill-color: inherit !important;
}
/* 既存価格クラスにも対応 */
.ab-product .price,
.ab-product .ab-price,
.ab-product .product-price,
.ab-product-card .price,
.ab-product-card .ab-price,
.ab-product-card .product-price,
#products .ab-product .price,
#products .ab-product .ab-price,
#products .ab-product .product-price {
font-size: 30px !important;
line-height: 1.35 !important;
font-weight: 900 !important;
color: #7fdcff !important;
-webkit-text-fill-color: #7fdcff !important;
text-shadow:
0 0 12px rgba(56,189,248,.60),
0 0 28px rgba(56,189,248,.28) !important;
}
/* V37.8.5の白抜け防止CSSが残った場合でも、テーマ本来の宇宙背景を優先 */
body,
.site,
.site-main,
main,
#page,
.ab-site,
.ab-main,
section,
.ab-section,
.ab-products,
#products,
.ab-product-section {
background-color: transparent !important;
}
/* 商品カードの濃紺は維持 */
.ab-product,
.ab-product-card,
.ab-product-item {
background: rgba(3,7,24,.86) !important;
}
/* 商品カード内のボタンはV37.8.2の小さめ状態を維持 */
.ab-product .single_add_to_cart_button,
.ab-product .add_to_cart_button,
.ab-product button[type="submit"],
.ab-product input[type="submit"],
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"] {
width: min(100%, 320px) !important;
max-width: 320px !important;
height: 54px !important;
font-size: 18px !important;
align-self: flex-start !important;
}
.ab-product .ab-contact-button,
.ab-product .ab-inquiry-button,
.ab-product .ab-item-contact,
.ab-product a[href*="contact"],
.ab-product a[href*="inquiry"],
.ab-product a[href*="mail"],
.ab-product-card .ab-contact-button,
.ab-product-card .ab-inquiry-button,
.ab-product-card .ab-item-contact,
.ab-product-card a[href*="contact"],
.ab-product-card a[href*="inquiry"],
.ab-product-card a[href*="mail"] {
width: min(100%, 340px) !important;
max-width: 340px !important;
height: 52px !important;
font-size: 16px !important;
align-self: flex-start !important;
}
@media (max-width: 768px) {
.ab-cart-price-line,
.ab-product .price,
.ab-product .ab-price,
.ab-product .product-price {
font-size: 24px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.6.1
赤四角価格のみ拡大版
- 上段の「6980円(税込)」などの通常価格は通常サイズに戻す
- 下段の「価格：1,100円」だけ大きく表示
========================================================= */
/* 商品カード上段の価格（青四角側）は通常サイズに戻す */
.ab-product > .ab-product-body > .price,
.ab-product-card > .ab-product-body > .price,
#products .ab-product > .ab-product-body > .price,
.ab-products .ab-product > .ab-product-body > .price {
font-size: 22px !important;
line-height: 1.35 !important;
font-weight: 900 !important;
letter-spacing: .02em !important;
color: #7fdcff !important;
-webkit-text-fill-color: #7fdcff !important;
text-shadow:
0 0 10px rgba(56,189,248,.45),
0 0 22px rgba(56,189,248,.18) !important;
margin: 0 0 8px 0 !important;
}
/* 赤四角の価格だけを大きく強調 */
.ab-cart-price-line,
.ab-product .ab-cart-price-line,
.ab-product-card .ab-cart-price-line,
#products .ab-product .ab-cart-price-line,
.ab-products .ab-product .ab-cart-price-line {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 34px !important;
line-height: 1.35 !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
color: #7fdcff !important;
-webkit-text-fill-color: #7fdcff !important;
text-shadow:
0 0 14px rgba(56,189,248,.62),
0 0 30px rgba(56,189,248,.28) !important;
margin: 18px 0 18px 0 !important;
padding: 0 !important;
}
.ab-cart-price-line .ab-cart-price-label,
.ab-cart-price-line .ab-cart-price-value {
font-size: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
color: inherit !important;
-webkit-text-fill-color: inherit !important;
}
@media (max-width: 768px) {
.ab-product > .ab-product-body > .price,
.ab-product-card > .ab-product-body > .price,
#products .ab-product > .ab-product-body > .price,
.ab-products .ab-product > .ab-product-body > .price {
font-size: 20px !important;
}
.ab-cart-price-line,
.ab-product .ab-cart-price-line,
.ab-product-card .ab-cart-price-line,
#products .ab-product .ab-cart-price-line,
.ab-products .ab-product .ab-cart-price-line {
font-size: 28px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.6.2
CART側「価格：1,100円」だけ拡大表示
- 上段の「6980円(税込)」には影響させない
- CART埋め込みHTML内の「価格：1,100円」だけ専用HTML化
========================================================= */
/* 上段の商品価格は通常サイズを維持 */
.ab-product > .ab-product-body > .price,
.ab-product-card > .ab-product-body > .price,
#products .ab-product > .ab-product-body > .price,
.ab-products .ab-product > .ab-product-body > .price {
font-size: 22px !important;
line-height: 1.35 !important;
font-weight: 900 !important;
letter-spacing: .02em !important;
color: #7fdcff !important;
-webkit-text-fill-color: #7fdcff !important;
text-shadow:
0 0 10px rgba(56,189,248,.45),
0 0 22px rgba(56,189,248,.18) !important;
}
/* CART側の赤四角価格だけ拡大 */
.ab-cart-side-price-line,
.ab-product .ab-cart-side-price-line,
.ab-product-card .ab-cart-side-price-line,
#products .ab-product .ab-cart-side-price-line,
.ab-products .ab-product .ab-cart-side-price-line {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 34px !important;
line-height: 1.35 !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
color: #7fdcff !important;
-webkit-text-fill-color: #7fdcff !important;
text-shadow:
0 0 14px rgba(56,189,248,.62),
0 0 30px rgba(56,189,248,.28) !important;
margin: 18px 0 20px 0 !important;
padding: 0 !important;
}
.ab-cart-side-price-line .ab-cart-price-label,
.ab-cart-side-price-line .ab-cart-price-value {
font-size: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
color: inherit !important;
-webkit-text-fill-color: inherit !important;
}
/* 旧価格HTMLクラスが残っている場合も赤四角側として扱う */
.ab-cart-price-line,
.ab-product .ab-cart-price-line,
.ab-product-card .ab-cart-price-line,
#products .ab-product .ab-cart-price-line,
.ab-products .ab-product .ab-cart-price-line {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 34px !important;
line-height: 1.35 !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
color: #7fdcff !important;
-webkit-text-fill-color: #7fdcff !important;
text-shadow:
0 0 14px rgba(56,189,248,.62),
0 0 30px rgba(56,189,248,.28) !important;
margin: 18px 0 20px 0 !important;
padding: 0 !important;
}
/* 背景はテーマ本来の紫・星背景を維持 */
body,
.site,
.site-main,
main,
#page,
.ab-site,
.ab-main,
section,
.ab-section,
.ab-products,
#products,
.ab-product-section {
background-color: transparent !important;
}
@media (max-width: 768px) {
.ab-cart-side-price-line,
.ab-cart-price-line {
font-size: 28px !important;
}
.ab-product > .ab-product-body > .price,
.ab-product-card > .ab-product-body > .price,
#products .ab-product > .ab-product-body > .price,
.ab-products .ab-product > .ab-product-body > .price {
font-size: 20px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.6.3
上段商品価格 非表示版
- 画像上段の「6980円(税込)」「価格を入力」を非表示
- CART側の「価格：1,100円」は残す
========================================================= */
/* 商品カード上段の商品価格を非表示 */
.ab-product > .ab-product-body > .price,
.ab-product-card > .ab-product-body > .price,
.ab-product-item > .ab-product-body > .price,
#products .ab-product > .ab-product-body > .price,
#products .ab-product-card > .ab-product-body > .price,
#products .ab-product-item > .ab-product-body > .price,
.ab-products .ab-product > .ab-product-body > .price,
.ab-products .ab-product-card > .ab-product-body > .price,
.ab-products .ab-product-item > .ab-product-body > .price {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* 念のため、上段価格用クラスも非表示 */
.ab-product .ab-product-price,
.ab-product-card .ab-product-price,
.ab-product-item .ab-product-price,
.ab-product .product-list-price,
.ab-product-card .product-list-price,
.ab-product-item .product-list-price {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* CART側の価格表示は残して大きく表示 */
.ab-cart-side-price-line,
.ab-cart-price-line,
.ab-product .ab-cart-side-price-line,
.ab-product .ab-cart-price-line,
.ab-product-card .ab-cart-side-price-line,
.ab-product-card .ab-cart-price-line,
#products .ab-product .ab-cart-side-price-line,
#products .ab-product .ab-cart-price-line,
.ab-products .ab-product .ab-cart-side-price-line,
.ab-products .ab-product .ab-cart-price-line {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 34px !important;
line-height: 1.35 !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
color: #7fdcff !important;
-webkit-text-fill-color: #7fdcff !important;
text-shadow:
0 0 14px rgba(56,189,248,.62),
0 0 30px rgba(56,189,248,.28) !important;
margin: 18px 0 20px 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/* 紫背景・星デザインは維持 */
body,
.site,
.site-main,
main,
#page,
.ab-site,
.ab-main,
section,
.ab-section,
.ab-products,
#products,
.ab-product-section {
background-color: transparent !important;
}
@media (max-width: 768px) {
.ab-cart-side-price-line,
.ab-cart-price-line {
font-size: 28px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.6.4
PRODUCT DESIGN画像表示・背景透明化
========================================================= */
/* PRODUCT DESIGN左側の画像枠を透明化 */
.ab-design-visual,
.ab-design-image,
.ab-product-design-visual,
.ab-product-design-image,
.ab-feature-visual,
.ab-feature-image,
.ab-section-visual,
.ab-section-image,
[data-section="product-design"] .ab-visual,
[data-section="product-design"] .ab-image,
#product-design .ab-visual,
#product-design .ab-image,
.product-design .ab-visual,
.product-design .ab-image {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
/* 画像を確実に表示 */
.ab-design-visual img,
.ab-design-image img,
.ab-product-design-visual img,
.ab-product-design-image img,
.ab-feature-visual img,
.ab-feature-image img,
.ab-section-visual img,
.ab-section-image img,
[data-section="product-design"] img,
#product-design img,
.product-design img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: 620px !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
background-color: transparent !important;
filter: drop-shadow(0 24px 55px rgba(0,0,0,.42)) !important;
}
/* 画像を背景画像で出している場合の透明化・表示補正 */
.ab-design-visual[style*="background-image"],
.ab-product-design-visual[style*="background-image"],
.ab-feature-visual[style*="background-image"],
.ab-section-visual[style*="background-image"],
[data-section="product-design"] [style*="background-image"],
#product-design [style*="background-image"],
.product-design [style*="background-image"] {
background-color: transparent !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
/* 中の濃紺四角が残る場合だけ透明化 */
.ab-design-visual::before,
.ab-design-visual::after,
.ab-product-design-visual::before,
.ab-product-design-visual::after,
.ab-feature-visual::before,
.ab-feature-visual::after,
.ab-section-visual::before,
.ab-section-visual::after,
[data-section="product-design"] .ab-visual::before,
[data-section="product-design"] .ab-visual::after,
#product-design .ab-visual::before,
#product-design .ab-visual::after,
.product-design .ab-visual::before,
.product-design .ab-visual::after {
background: transparent !important;
background-color: transparent !important;
}
/* 空の濃紺プレースホルダーを透明化 */
.ab-design-placeholder,
.ab-product-design-placeholder,
.product-design-placeholder,
.ab-visual-placeholder {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* PRODUCT DESIGNセクション全体は紫星背景を維持 */
#product-design,
.product-design,
[data-section="product-design"],
.ab-product-design,
.ab-design-section {
background-color: transparent !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.6.5
PRODUCT DESIGN画像 直接出力対応版
========================================================= */
.airbridge-forced-product-design-image {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: 620px !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
background-color: transparent !important;
filter: drop-shadow(0 24px 55px rgba(0,0,0,.42)) !important;
margin: 0 auto !important;
}
.airbridge-forced-product-design-wrap {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
overflow: visible !important;
min-height: 260px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* PRODUCT DESIGNの画像枠を透明化 */
#product-design .ab-visual,
#product-design .ab-image,
.product-design .ab-visual,
.product-design .ab-image,
.ab-product-design .ab-visual,
.ab-product-design .ab-image,
.ab-design-section .ab-visual,
.ab-design-section .ab-image,
.ab-design-visual,
.ab-product-design-visual,
.ab-feature-visual {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
overflow: visible !important;
}
/* 中の濃紺四角を消す */
#product-design .ab-visual::before,
#product-design .ab-visual::after,
.product-design .ab-visual::before,
.product-design .ab-visual::after,
.ab-product-design .ab-visual::before,
.ab-product-design .ab-visual::after,
.ab-design-section .ab-visual::before,
.ab-design-section .ab-visual::after {
display: none !important;
background: transparent !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.6.6
PRODUCT DESIGN専用画像フィールド対応版
========================================================= */
.airbridge-product-design-direct-wrap {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
overflow: visible !important;
min-height: 320px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.airbridge-product-design-direct-img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: 620px !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
background-color: transparent !important;
filter: drop-shadow(0 24px 55px rgba(0,0,0,.42)) !important;
margin: 0 auto !important;
}
.airbridge-product-design-direct-placeholder {
display: none !important;
}
/* PRODUCT DESIGNの濃紺背景を透明化 */
#product-design .ab-visual,
#product-design .ab-image,
.product-design .ab-visual,
.product-design .ab-image,
.ab-product-design .ab-visual,
.ab-product-design .ab-image,
.ab-design-section .ab-visual,
.ab-design-section .ab-image,
.ab-design-visual,
.ab-product-design-visual,
.ab-feature-visual,
.ab-section-visual {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
overflow: visible !important;
}
/* セクション背景は維持 */
#product-design,
.product-design,
.ab-product-design,
.ab-design-section {
background-color: transparent !important;
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9
TOPスマホ表示 クリーン修正版
- キャッチと説明文を明確に分離
- 過去のp:first-of-type拡大を使わない
- 説明文は通常サイズ
========================================================= */
@media (max-width: 768px) {
html,
body {
overflow-x: hidden !important;
}
.ab-hero,
.ab-hero-section,
#hero,
.hero,
.fv,
.main-visual {
position: relative !important;
overflow: visible !important;
padding-top: 38px !important;
padding-bottom: 64px !important;
}
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-container,
.ab-hero-content,
.hero-inner,
.hero-container,
.fv-inner,
.main-visual-inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding-left: 20px !important;
padding-right: 20px !important;
gap: 0 !important;
overflow: visible !important;
}
/* 上部ラベル */
.ab-hero .ab-kicker.ab-hero-kicker-v24,
.ab-hero .ab-kicker,
.ab-hero .ab-hero-badge,
.ab-hero .ab-hero-main-pill,
.ab-hero [data-hero-badge],
.hero .ab-kicker,
.hero .ab-badge,
.hero .badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 48px !important;
max-height: none !important;
margin: 0 0 30px 0 !important;
padding: 12px 15px !important;
gap: 9px !important;
font-size: 12.5px !important;
line-height: 1.35 !important;
letter-spacing: .01em !important;
text-align: center !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* 新しい専用キャッチ */
.ab-hero-catch-clean {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 26px 0 !important;
padding: 0 !important;
text-align: left !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
overflow: visible !important;
}
.ab-hero-catch-clean span {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
overflow: visible !important;
text-overflow: clip !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.ab-hero-catch-clean-main {
font-size: clamp(58px, 16.6vw, 84px) !important;
line-height: 1.06 !important;
letter-spacing: .01em !important;
font-weight: 900 !important;
text-shadow:
0 0 20px rgba(255,255,255,.26),
0 5px 18px rgba(0,0,0,.45) !important;
}
.ab-hero-catch-clean-sub {
margin-top: 4px !important;
font-size: clamp(34px, 9.4vw, 50px) !important;
line-height: 1.16 !important;
letter-spacing: .01em !important;
font-weight: 900 !important;
text-shadow:
0 0 16px rgba(255,255,255,.20),
0 4px 14px rgba(0,0,0,.40) !important;
}
/*
* 旧h1は非表示。
* 新しい専用キャッチをPHPで出力するため、旧見出しと重複させない。
*/
.ab-hero-clean-fixed h1,
.ab-hero-clean-fixed .ab-hero-title,
.ab-hero-clean-fixed .ab-hero-main-copy {
display: none !important;
}
/* 説明文は通常サイズで固定 */
.ab-hero-desc-clean,
.ab-hero-clean-fixed p,
.ab-hero-clean-fixed .ab-lead,
.ab-hero-clean-fixed .ab-hero-text,
.ab-hero-clean-fixed .ab-hero-description {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 16px !important;
line-height: 1.72 !important;
font-weight: 600 !important;
max-width: 100% !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
overflow: visible !important;
text-overflow: clip !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: none !important;
}
/* CTA */
.ab-hero-actions,
.ab-hero-buttons,
.hero-actions,
.hero-buttons {
order: 4 !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
width: 100% !important;
max-width: 100% !important;
margin: 20px 0 0 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
position: relative !important;
z-index: 5 !important;
overflow: visible !important;
}
.ab-hero-actions a,
.ab-hero-buttons a,
.hero-actions a,
.hero-buttons a,
.ab-hero .ab-btn {
width: 100% !important;
max-width: 100% !important;
min-height: 58px !important;
height: auto !important;
padding: 14px 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
font-size: 16px !important;
line-height: 1.35 !important;
white-space: normal !important;
text-align: center !important;
overflow: visible !important;
}
/* 商品画像 */
.ab-device-wrap,
.ab-device-wrap-v371,
.ab-hero-visual,
.ab-hero-image,
.ab-device,
.hero-visual,
.hero-image,
.fv-visual,
.main-visual-image,
.main-visual-visual,
.airbridge-product-design-direct-wrap,
.airbridge-forced-product-design-wrap,
.airbridge-mobile-hero-product-wrap {
order: 5 !important;
position: relative !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
float: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 28px auto 0 auto !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
overflow: visible !important;
z-index: 4 !important;
}
.ab-device-wrap img,
.ab-device-wrap-v371 img,
.ab-hero-visual img,
.ab-hero-image img,
.ab-device img,
.hero-visual img,
.hero-image img,
.fv-visual img,
.main-visual-image img,
.main-visual-visual img,
.airbridge-product-design-direct-img,
.airbridge-forced-product-design-image,
.airbridge-mobile-hero-product-img,
.ab-v37-device-png {
position: relative !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
float: none !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: min(88vw, 380px) !important;
max-width: min(88vw, 380px) !important;
min-width: 250px !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
background: transparent !important;
background-color: transparent !important;
filter: drop-shadow(0 22px 42px rgba(0,0,0,.45)) !important;
}
.ab-glow,
.ab-float,
.float-label,
.floating-label {
display: none !important;
}
.ab-notes {
order: 6 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
margin-top: 24px !important;
overflow: visible !important;
}
}
@media (max-width: 430px) {
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-container,
.ab-hero-content,
.hero-inner,
.hero-container,
.fv-inner,
.main-visual-inner {
padding-left: 18px !important;
padding-right: 18px !important;
}
.ab-hero-catch-clean-main {
font-size: clamp(52px, 15.8vw, 72px) !important;
line-height: 1.07 !important;
}
.ab-hero-catch-clean-sub {
font-size: clamp(30px, 8.8vw, 42px) !important;
line-height: 1.18 !important;
}
.ab-hero-desc-clean,
.ab-hero-clean-fixed p,
.ab-hero-clean-fixed .ab-lead,
.ab-hero-clean-fixed .ab-hero-text,
.ab-hero-clean-fixed .ab-hero-description {
font-size: 15.5px !important;
line-height: 1.7 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.1
スマホメニュー表示修正版
- 黒背景に黒文字になる問題を修正
- メニュー文字・罫線・商品一覧ボタンを見やすく調整
========================================================= */
@media (max-width: 920px) {
.ab-menu,
.ab-header .ab-menu,
.site-header .ab-menu,
nav.ab-menu,
#abHeaderMenu {
display: none !important;
position: absolute !important;
left: 14px !important;
right: 14px !important;
top: calc(100% + 12px) !important;
z-index: 99999 !important;
background:
linear-gradient(180deg, rgba(5,7,17,.98), rgba(8,10,24,.98)) !important;
border: 1px solid rgba(255,255,255,.72) !important;
border-radius: 26px !important;
box-shadow:
0 28px 80px rgba(0,0,0,.68),
0 0 34px rgba(56,189,248,.16) !important;
backdrop-filter: blur(18px) !important;
padding: 26px 28px 28px !important;
overflow: hidden !important;
}
.ab-menu.is-open,
.ab-header .ab-menu.is-open,
.site-header .ab-menu.is-open,
nav.ab-menu.is-open,
#abHeaderMenu.is-open {
display: block !important;
}
.ab-menu ul,
.ab-menu-list,
#abHeaderMenu ul,
#abHeaderMenu .ab-menu-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
width: 100% !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
.ab-menu li,
.ab-menu-list li,
#abHeaderMenu li {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.78) !important;
background: transparent !important;
}
.ab-menu li:last-child,
.ab-menu-list li:last-child,
#abHeaderMenu li:last-child {
border-bottom: none !important;
}
.ab-menu a:not(.ab-btn),
.ab-menu-list a:not(.ab-btn),
#abHeaderMenu a:not(.ab-btn) {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
min-height: 68px !important;
padding: 18px 10px 18px 12px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-decoration: none !important;
font-size: 19px !important;
line-height: 1.35 !important;
font-weight: 900 !important;
letter-spacing: .06em !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow:
0 0 12px rgba(255,255,255,.16),
0 3px 12px rgba(0,0,0,.55) !important;
}
.ab-menu a:not(.ab-btn):hover,
.ab-menu-list a:not(.ab-btn):hover,
#abHeaderMenu a:not(.ab-btn):hover {
color: #7fdcff !important;
-webkit-text-fill-color: #7fdcff !important;
text-shadow:
0 0 14px rgba(56,189,248,.55),
0 3px 12px rgba(0,0,0,.55) !important;
}
/* 商品一覧ボタン */
.ab-menu .ab-btn,
.ab-menu .ab-cart-nav,
#abHeaderMenu .ab-btn,
#abHeaderMenu .ab-cart-nav {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 60px !important;
margin: 24px 0 0 0 !important;
padding: 16px 18px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.32) !important;
background: linear-gradient(135deg, #ec4ec4 0%, #8b5cf6 52%, #38bdf8 100%) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 18px !important;
line-height: 1.25 !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
text-decoration: none !important;
box-shadow:
0 14px 34px rgba(56,189,248,.22),
0 0 28px rgba(236,78,196,.18) !important;
}
/* メニューボタン */
.ab-menu-toggle,
.ab-menu-toggle.is-open {
position: relative !important;
z-index: 100000 !important;
}
.ab-menu-toggle span {
background: #06101f !important;
}
body.ab-menu-open {
overflow: hidden !important;
}
}
@media (max-width: 430px) {
.ab-menu,
.ab-header .ab-menu,
.site-header .ab-menu,
nav.ab-menu,
#abHeaderMenu {
left: 12px !important;
right: 12px !important;
padding: 24px 24px 26px !important;
border-radius: 24px !important;
}
.ab-menu a:not(.ab-btn),
.ab-menu-list a:not(.ab-btn),
#abHeaderMenu a:not(.ab-btn) {
min-height: 62px !important;
font-size: 17px !important;
padding: 16px 8px 16px 10px !important;
}
.ab-menu .ab-btn,
.ab-menu .ab-cart-nav,
#abHeaderMenu .ab-btn,
#abHeaderMenu .ab-cart-nav {
min-height: 58px !important;
font-size: 17px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.2
スマホ商品カード：カゴに入れるボタン縮小修正版
========================================================= */
@media (max-width: 620px) {
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"],
.ab-product .single_add_to_cart_button,
.ab-product .add_to_cart_button,
.ab-product button[type="submit"],
.ab-product input[type="submit"],
.ab-products .ab-product .single_add_to_cart_button,
.ab-products .ab-product .add_to_cart_button,
.ab-products .ab-product button[type="submit"],
.ab-products .ab-product input[type="submit"],
#products .ab-product .single_add_to_cart_button,
#products .ab-product .add_to_cart_button,
#products .ab-product button[type="submit"],
#products .ab-product input[type="submit"] {
width: 100% !important;
max-width: 320px !important;
min-width: 0 !important;
height: 58px !important;
min-height: 58px !important;
max-height: 58px !important;
margin: 10px auto 0 auto !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
border-radius: 999px !important;
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1.15 !important;
letter-spacing: .02em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
aspect-ratio: auto !important;
transform: none !important;
float: none !important;
}
}
@media (max-width: 430px) {
.ab-product-card .single_add_to_cart_button,
.ab-product-card .add_to_cart_button,
.ab-product-card button[type="submit"],
.ab-product-card input[type="submit"],
.ab-product .single_add_to_cart_button,
.ab-product .add_to_cart_button,
.ab-product button[type="submit"],
.ab-product input[type="submit"],
.ab-products .ab-product .single_add_to_cart_button,
.ab-products .ab-product .add_to_cart_button,
.ab-products .ab-product button[type="submit"],
.ab-products .ab-product input[type="submit"],
#products .ab-product .single_add_to_cart_button,
#products .ab-product .add_to_cart_button,
#products .ab-product button[type="submit"],
#products .ab-product input[type="submit"] {
max-width: 280px !important;
height: 56px !important;
min-height: 56px !important;
max-height: 56px !important;
font-size: 17px !important;
margin-top: 8px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.3
PRODUCT DESIGN画像をimgタグで確実表示（透明背景対応）
========================================================= */
.ab-feature-visual,
.ab-feature-visual.has-image,
#feature .ab-feature-visual,
#feature .ab-feature-visual.has-image {
position: relative !important;
}
.ab-feature-visual.has-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
background-image: none !important;
min-height: clamp(320px, 42vw, 620px) !important;
}
.ab-feature-visual.has-image .ab-feature-photo,
#feature .ab-feature-visual.has-image .ab-feature-photo {
display: block !important;
width: 100% !important;
max-width: 520px !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
background: transparent !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
visibility: visible !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
filter: drop-shadow(0 20px 40px rgba(0,0,0,.28)) !important;
}
.ab-feature-visual.has-image::before,
.ab-feature-visual.has-image::after {
display: none !important;
content: none !important;
}
@media (max-width: 920px) {
.ab-feature-visual.has-image .ab-feature-photo,
#feature .ab-feature-visual.has-image .ab-feature-photo {
max-width: 420px !important;
}
}
@media (max-width: 620px) {
.ab-feature-visual.has-image,
#feature .ab-feature-visual.has-image {
min-height: 260px !important;
}
.ab-feature-visual.has-image .ab-feature-photo,
#feature .ab-feature-visual.has-image .ab-feature-photo {
max-width: 82vw !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.4
スマートフォンTOP 宇宙観強化・力強いヒーロー版
========================================================= */
@media (max-width: 768px) {
body {
background:
radial-gradient(circle at 50% 10%, rgba(93, 92, 255, .18), transparent 38%),
radial-gradient(circle at 50% 72%, rgba(236, 72, 153, .12), transparent 34%),
#020411 !important;
}
.ab-hero,
.ab-hero.ab-hero-cosmic-mobile,
.ab-hero.has-custom-bg,
.ab-hero-section,
#hero,
.hero,
.fv,
.main-visual {
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
min-height: auto !important;
padding: 34px 0 56px !important;
background-color: #020411 !important;
background-size: cover !important;
background-position: center top !important;
background-repeat: no-repeat !important;
background-blend-mode: screen, normal !important;
}
.ab-hero::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -3 !important;
pointer-events: none !important;
background:
radial-gradient(circle at 78% 14%, rgba(186, 99, 255, .30), transparent 22%),
radial-gradient(circle at 58% 48%, rgba(56, 189, 248, .22), transparent 30%),
radial-gradient(circle at 36% 74%, rgba(236, 72, 153, .26), transparent 31%),
radial-gradient(circle at 74% 76%, rgba(112, 91, 255, .20), transparent 26%),
linear-gradient(180deg, rgba(2, 4, 17, .16), rgba(2, 4, 17, .48)) !important;
mix-blend-mode: screen !important;
opacity: 1 !important;
}
.ab-hero::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -2 !important;
pointer-events: none !important;
background:
radial-gradient(1px 1px at 12% 20%, rgba(255,255,255,.90), transparent 60%),
radial-gradient(1px 1px at 26% 38%, rgba(125,220,255,.70), transparent 60%),
radial-gradient(1.5px 1.5px at 72% 24%, rgba(255,255,255,.95), transparent 60%),
radial-gradient(1px 1px at 88% 45%, rgba(255,120,240,.80), transparent 60%),
radial-gradient(1px 1px at 42% 67%, rgba(255,255,255,.72), transparent 60%),
radial-gradient(1.5px 1.5px at 70% 80%, rgba(125,220,255,.80), transparent 60%),
radial-gradient(900px 440px at 54% 58%, rgba(56,189,248,.10), transparent 48%),
radial-gradient(760px 360px at 72% 65%, rgba(236,72,153,.11), transparent 48%) !important;
opacity: .92 !important;
}
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-container,
.ab-hero-content,
.hero-inner,
.hero-container,
.fv-inner,
.main-visual-inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
padding-left: 22px !important;
padding-right: 22px !important;
box-sizing: border-box !important;
gap: 0 !important;
overflow: visible !important;
}
.ab-hero .ab-kicker.ab-hero-kicker-v24,
.ab-hero .ab-kicker,
.ab-hero .ab-hero-badge,
.ab-hero .ab-hero-main-pill,
.ab-hero [data-hero-badge],
.hero .ab-kicker,
.hero .ab-badge,
.hero .badge {
width: fit-content !important;
max-width: 100% !important;
min-height: 44px !important;
margin: 0 0 26px 0 !important;
padding: 10px 17px !important;
border-radius: 999px !important;
border: 1px solid rgba(125, 220, 255, .68) !important;
background: linear-gradient(180deg, rgba(5, 13, 36, .78), rgba(5, 13, 36, .52)) !important;
box-shadow:
0 0 0 1px rgba(236, 72, 153, .28),
0 0 26px rgba(56, 189, 248, .22),
0 0 34px rgba(236, 72, 153, .16) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12.5px !important;
line-height: 1.35 !important;
letter-spacing: .02em !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
.ab-hero .ab-kicker::before,
.ab-hero .ab-kicker.ab-hero-kicker-v24::before {
background: #ffd166 !important;
box-shadow:
0 0 0 7px rgba(255, 209, 102, .16),
0 0 20px rgba(255, 209, 102, .56) !important;
}
.ab-hero-catch-clean,
.ab-hero h1,
.ab-hero-title,
.ab-hero-main-copy,
.hero h1,
.fv h1,
.main-visual h1 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 18px 0 !important;
padding: 0 !important;
text-align: left !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(52px, 15.2vw, 76px) !important;
line-height: 1.08 !important;
letter-spacing: .005em !important;
font-weight: 900 !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
overflow: visible !important;
text-overflow: clip !important;
text-shadow:
0 0 18px rgba(236, 72, 153, .28),
0 0 34px rgba(56, 189, 248, .30),
0 5px 18px rgba(0,0,0,.55) !important;
}
.ab-hero-catch-clean span,
.ab-hero-catch-clean-main {
display: block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(52px, 15.2vw, 76px) !important;
line-height: 1.08 !important;
font-weight: 900 !important;
}
.ab-hero-catch-clean-sub {
display: block !important;
margin-top: 4px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(39px, 10.6vw, 55px) !important;
line-height: 1.14 !important;
font-weight: 900 !important;
text-shadow:
0 0 20px rgba(56, 189, 248, .35),
0 0 30px rgba(236, 72, 153, .22),
0 4px 14px rgba(0,0,0,.48) !important;
}
.ab-hero-desc-clean,
.ab-lead,
.ab-hero p,
.ab-hero-clean-fixed p,
.ab-hero-clean-fixed .ab-lead,
.ab-hero-clean-fixed .ab-hero-text,
.ab-hero-clean-fixed .ab-hero-description {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 22px 0 !important;
padding: 0 !important;
color: rgba(255,255,255,.92) !important;
-webkit-text-fill-color: rgba(255,255,255,.92) !important;
font-size: 16px !important;
line-height: 1.78 !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
text-align: left !important;
text-shadow: 0 2px 14px rgba(0,0,0,.60) !important;
}
.ab-device-wrap,
.ab-device-wrap-v371,
.ab-hero-visual,
.ab-hero-image,
.ab-device,
.hero-visual,
.hero-image,
.fv-visual,
.main-visual-image,
.main-visual-visual,
.airbridge-product-design-direct-wrap,
.airbridge-forced-product-design-wrap,
.airbridge-mobile-hero-product-wrap {
order: 3 !important;
position: relative !important;
inset: auto !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 310px !important;
margin: 16px auto 22px auto !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
overflow: visible !important;
z-index: 2 !important;
}
.ab-device-wrap::before,
.ab-device-wrap-v371::before,
.ab-hero-visual::before,
.ab-hero-image::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
bottom: -20px !important;
transform: translateX(-50%) !important;
width: 118vw !important;
height: 260px !important;
border-radius: 50% !important;
background:
radial-gradient(ellipse at center, rgba(255,255,255,.34), rgba(56,189,248,.26) 22%, rgba(236,72,153,.18) 42%, transparent 68%) !important;
filter: blur(6px) !important;
opacity: .92 !important;
z-index: -1 !important;
pointer-events: none !important;
}
.ab-device-wrap img,
.ab-device-wrap-v371 img,
.ab-hero-visual img,
.ab-hero-image img,
.ab-device img,
.hero-visual img,
.hero-image img,
.fv-visual img,
.main-visual-image img,
.main-visual-visual img,
.airbridge-product-design-direct-img,
.airbridge-forced-product-design-image,
.airbridge-mobile-hero-product-img,
.ab-v37-device-png {
position: relative !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: min(94vw, 430px) !important;
max-width: min(94vw, 430px) !important;
min-width: 310px !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
background: transparent !important;
filter:
drop-shadow(0 26px 42px rgba(0,0,0,.48))
drop-shadow(0 0 24px rgba(56,189,248,.28))
drop-shadow(0 0 18px rgba(236,72,153,.18)) !important;
z-index: 2 !important;
}
.ab-hero-actions,
.ab-hero-buttons,
.hero-actions,
.hero-buttons {
order: 4 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 18px 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
position: relative !important;
z-index: 5 !important;
}
.ab-hero-actions a,
.ab-hero-buttons a,
.hero-actions a,
.hero-buttons a,
.ab-hero .ab-btn {
width: 100% !important;
min-height: 58px !important;
height: auto !important;
padding: 13px 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
font-size: 14.5px !important;
line-height: 1.25 !important;
font-weight: 900 !important;
letter-spacing: .02em !important;
white-space: normal !important;
text-align: center !important;
}
.ab-hero-actions a:first-child,
.ab-hero-buttons a:first-child {
background: linear-gradient(135deg, #ec4ec4 0%, #875cff 48%, #38bdf8 100%) !important;
border-color: rgba(255,255,255,.28) !important;
box-shadow:
0 18px 36px rgba(56,189,248,.22),
0 0 28px rgba(236,72,153,.24) !important;
}
.ab-hero-actions a:nth-child(2),
.ab-hero-buttons a:nth-child(2) {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border: 1px solid rgba(125,220,255,.56) !important;
background: rgba(4, 10, 26, .68) !important;
box-shadow:
inset 0 0 0 1px rgba(236,72,153,.28),
0 0 26px rgba(56,189,248,.18) !important;
}
.ab-notes {
order: 5 !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
width: 100% !important;
margin: 4px 0 0 0 !important;
}
.ab-note {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 42px !important;
padding: 10px 14px !important;
border-radius: 999px !important;
border: 1px solid rgba(125,220,255,.52) !important;
background: rgba(5, 13, 36, .56) !important;
color: rgba(255,255,255,.94) !important;
-webkit-text-fill-color: rgba(255,255,255,.94) !important;
font-size: 13px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
box-shadow:
inset 0 0 0 1px rgba(236,72,153,.12),
0 0 18px rgba(56,189,248,.12) !important;
}
}
@media (max-width: 430px) {
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-container,
.ab-hero-content,
.hero-inner,
.hero-container,
.fv-inner,
.main-visual-inner {
padding-left: 18px !important;
padding-right: 18px !important;
}
.ab-hero-catch-clean,
.ab-hero h1,
.ab-hero-title,
.ab-hero-main-copy,
.hero h1,
.fv h1,
.main-visual h1,
.ab-hero-catch-clean-main {
font-size: clamp(48px, 14.6vw, 66px) !important;
line-height: 1.08 !important;
}
.ab-hero-catch-clean-sub {
font-size: clamp(32px, 9.2vw, 43px) !important;
}
.ab-device-wrap,
.ab-device-wrap-v371 {
min-height: 290px !important;
}
.ab-device-wrap img,
.ab-device-wrap-v371 img,
.ab-hero-visual img,
.ab-hero-image img,
.ab-device img,
.hero-visual img,
.hero-image img,
.fv-visual img,
.main-visual-image img,
.main-visual-visual img,
.airbridge-product-design-direct-img,
.airbridge-forced-product-design-image,
.airbridge-mobile-hero-product-img,
.ab-v37-device-png {
width: min(96vw, 380px) !important;
max-width: min(96vw, 380px) !important;
min-width: 286px !important;
}
.ab-hero-actions,
.ab-hero-buttons,
.hero-actions,
.hero-buttons {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.5
スマホTOP 注意チップ表示をコンパクト版へ戻す
- 宇宙観強化は維持
- 赤枠部分の3つのチップを小さめ表示に戻す
========================================================= */
@media (max-width: 768px) {
.ab-hero .ab-notes,
.ab-notes {
order: 5 !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 10px 10px !important;
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 24px 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
.ab-hero .ab-note,
.ab-note {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 38px !important;
margin: 0 !important;
padding: 9px 16px !important;
border-radius: 999px !important;
border: 1px solid rgba(56, 189, 248, .58) !important;
background: rgba(4, 18, 38, .54) !important;
color: rgba(255,255,255,.95) !important;
-webkit-text-fill-color: rgba(255,255,255,.95) !important;
font-size: 13px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
letter-spacing: .02em !important;
white-space: nowrap !important;
text-align: center !important;
box-shadow:
inset 0 0 0 1px rgba(56,189,248,.12),
0 0 14px rgba(56,189,248,.12) !important;
}
.ab-hero .ab-note:hover,
.ab-note:hover {
border-color: rgba(125,220,255,.78) !important;
box-shadow:
inset 0 0 0 1px rgba(56,189,248,.20),
0 0 18px rgba(56,189,248,.18) !important;
}
}
@media (max-width: 430px) {
.ab-hero .ab-notes,
.ab-notes {
gap: 9px !important;
margin-top: 8px !important;
margin-bottom: 22px !important;
}
.ab-hero .ab-note,
.ab-note {
min-height: 37px !important;
padding: 8px 14px !important;
font-size: 12.5px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.6
商品詳細ページ 上部表示改善版
- 商品カテゴリラベルを見やすく
- 商品名の巨大化・不自然な改行を抑制
- 説明文・罫線・特徴リストを読みやすく
========================================================= */
/* 商品詳細ページ全体 */
.single-ab_product,
.single-product,
body[class*="single"] {
background:
radial-gradient(circle at 15% 20%, rgba(236,72,153,.10), transparent 28%),
radial-gradient(circle at 78% 18%, rgba(56,189,248,.12), transparent 32%),
linear-gradient(135deg, #050514 0%, #06152b 100%) !important;
}
/* 商品詳細のメインブロック候補 */
.single-ab_product .ab-product-detail,
.single-ab_product .ab-single-product,
.single-ab_product .ab-product-hero,
.single-product .ab-product-detail,
.single-product .ab-single-product,
.single-product .ab-product-hero,
.single .ab-product-detail,
.single .ab-single-product,
.single .ab-product-hero {
color: #ffffff !important;
}
/* 商品ページ上部ラベル：灰色をやめて黒×ネオン系へ */
.single-ab_product .ab-kicker,
.single-ab_product .ab-product-kicker,
.single-ab_product .ab-product-label,
.single-ab_product .ab-hero-kicker-v24,
.single-product .ab-kicker,
.single-product .ab-product-kicker,
.single-product .ab-product-label,
.single-product .ab-hero-kicker-v24,
.single .ab-product-kicker,
.single .ab-product-label {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: 100% !important;
min-height: 44px !important;
margin: 0 0 28px 0 !important;
padding: 10px 20px !important;
border-radius: 999px !important;
border: 1px solid rgba(125,220,255,.70) !important;
background:
linear-gradient(180deg, rgba(5,13,36,.86), rgba(5,13,36,.62)) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px !important;
line-height: 1.25 !important;
font-weight: 900 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
box-shadow:
0 0 0 1px rgba(236,72,153,.24),
0 0 24px rgba(56,189,248,.22),
0 0 26px rgba(236,72,153,.12) !important;
}
/* ラベル内の丸アイコン */
.single-ab_product .ab-kicker::before,
.single-ab_product .ab-product-kicker::before,
.single-ab_product .ab-product-label::before,
.single-product .ab-kicker::before,
.single-product .ab-product-kicker::before,
.single-product .ab-product-label::before {
background: #ffd166 !important;
box-shadow:
0 0 0 7px rgba(255,209,102,.16),
0 0 18px rgba(255,209,102,.48) !important;
}
/* 商品名：大きすぎ・改行崩れを抑制 */
.single-ab_product h1,
.single-ab_product .entry-title,
.single-ab_product .ab-product-title,
.single-product h1,
.single-product .entry-title,
.single-product .ab-product-title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(40px, 6.2vw, 82px) !important;
line-height: 1.14 !important;
font-weight: 900 !important;
letter-spacing: .02em !important;
max-width: 980px !important;
margin: 0 0 28px 0 !important;
padding: 0 !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
text-wrap: balance !important;
text-shadow:
0 0 18px rgba(255,255,255,.16),
0 6px 20px rgba(0,0,0,.50) !important;
}
/* 商品説明 */
.single-ab_product .entry-content > p,
.single-ab_product .ab-product-description,
.single-ab_product .ab-product-lead,
.single-product .entry-content > p,
.single-product .ab-product-description,
.single-product .ab-product-lead {
color: rgba(255,255,255,.88) !important;
-webkit-text-fill-color: rgba(255,255,255,.88) !important;
font-size: clamp(16px, 1.6vw, 22px) !important;
line-height: 1.85 !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
max-width: 980px !important;
margin: 0 0 42px 0 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* 区切り線 */
.single-ab_product hr,
.single-product hr,
.single .ab-product-detail hr,
.single .entry-content hr {
width: 100% !important;
max-width: 980px !important;
height: 1px !important;
margin: 44px 0 34px 0 !important;
border: 0 !important;
background:
linear-gradient(90deg,
transparent,
rgba(255,255,255,.18),
rgba(125,220,255,.80),
rgba(236,72,153,.36),
transparent
) !important;
box-shadow: 0 0 18px rgba(56,189,248,.18) !important;
}
/* 特徴リスト */
.single-ab_product ul,
.single-product ul,
.single .ab-product-detail ul {
max-width: 980px !important;
margin-top: 0 !important;
padding-left: 1.4em !important;
}
.single-ab_product li,
.single-product li,
.single .ab-product-detail li {
color: rgba(255,255,255,.90) !important;
-webkit-text-fill-color: rgba(255,255,255,.90) !important;
font-size: clamp(15px, 1.4vw, 19px) !important;
line-height: 1.8 !important;
letter-spacing: .04em !important;
margin-bottom: 10px !important;
}
.single-ab_product li::marker,
.single-product li::marker,
.single .ab-product-detail li::marker {
color: #7fdcff !important;
}
/* スマホ商品ページ */
@media (max-width: 768px) {
.single-ab_product .ab-kicker,
.single-ab_product .ab-product-kicker,
.single-ab_product .ab-product-label,
.single-ab_product .ab-hero-kicker-v24,
.single-product .ab-kicker,
.single-product .ab-product-kicker,
.single-product .ab-product-label,
.single-product .ab-hero-kicker-v24,
.single .ab-product-kicker,
.single .ab-product-label {
min-height: 40px !important;
margin-bottom: 22px !important;
padding: 9px 16px !important;
font-size: 12px !important;
letter-spacing: .12em !important;
white-space: normal !important;
text-align: center !important;
}
.single-ab_product h1,
.single-ab_product .entry-title,
.single-ab_product .ab-product-title,
.single-product h1,
.single-product .entry-title,
.single-product .ab-product-title {
font-size: clamp(34px, 9.8vw, 48px) !important;
line-height: 1.18 !important;
letter-spacing: .01em !important;
margin-bottom: 22px !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
text-align: left !important;
}
.single-ab_product .entry-content > p,
.single-ab_product .ab-product-description,
.single-ab_product .ab-product-lead,
.single-product .entry-content > p,
.single-product .ab-product-description,
.single-product .ab-product-lead {
font-size: 15.5px !important;
line-height: 1.78 !important;
letter-spacing: .03em !important;
margin-bottom: 30px !important;
}
.single-ab_product hr,
.single-product hr,
.single .ab-product-detail hr,
.single .entry-content hr {
margin: 32px 0 26px 0 !important;
}
.single-ab_product li,
.single-product li,
.single .ab-product-detail li {
font-size: 15px !important;
line-height: 1.75 !important;
}
}
@media (max-width: 430px) {
.single-ab_product h1,
.single-ab_product .entry-title,
.single-ab_product .ab-product-title,
.single-product h1,
.single-product .entry-title,
.single-product .ab-product-title {
font-size: clamp(31px, 9vw, 42px) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.7
PC商品詳細ページ バランス修正版
- スマホはV37.8.9.6の良い状態を維持
- PCのみタイトルを小さく
- PCのみ商品写真を大きく戻す
========================================================= */
/* PC商品詳細：タイトル巨大化を抑制 */
@media (min-width: 769px) {
.single-ab_product h1,
.single-ab_product .entry-title,
.single-ab_product .ab-product-title,
.single-product h1,
.single-product .entry-title,
.single-product .ab-product-title {
font-size: clamp(46px, 4.2vw, 68px) !important;
line-height: 1.16 !important;
letter-spacing: .015em !important;
max-width: 1040px !important;
margin: 0 0 26px 0 !important;
text-align: left !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
text-wrap: balance !important;
}
/* 商品詳細レイアウト候補：画像が小さくならないよう2カラム幅を再調整 */
.single-ab_product .ab-product-detail,
.single-ab_product .ab-single-product,
.single-ab_product .ab-product-hero,
.single-product .ab-product-detail,
.single-product .ab-single-product,
.single-product .ab-product-hero,
.single .ab-product-detail,
.single .ab-single-product,
.single .ab-product-hero {
display: grid !important;
grid-template-columns: minmax(430px, 0.95fr) minmax(520px, 1.05fr) !important;
gap: clamp(42px, 5vw, 88px) !important;
align-items: center !important;
}
/* 商品画像側を大きく戻す */
.single-ab_product .ab-product-visual,
.single-ab_product .ab-product-image,
.single-ab_product .ab-single-product-visual,
.single-ab_product .ab-product-gallery,
.single-product .ab-product-visual,
.single-product .ab-product-image,
.single-product .ab-single-product-visual,
.single-product .ab-product-gallery,
.single .ab-product-visual,
.single .ab-product-image,
.single .ab-single-product-visual,
.single .ab-product-gallery {
width: 100% !important;
max-width: 560px !important;
min-height: 560px !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background:
radial-gradient(circle at 50% 48%, rgba(56,189,248,.16), transparent 52%),
linear-gradient(145deg, rgba(5,13,36,.70), rgba(7,9,24,.52)) !important;
border: 1px solid rgba(56,189,248,.26) !important;
border-radius: 34px !important;
box-shadow:
0 24px 70px rgba(0,0,0,.34),
inset 0 0 0 1px rgba(255,255,255,.04) !important;
overflow: visible !important;
}
.single-ab_product .ab-product-visual img,
.single-ab_product .ab-product-image img,
.single-ab_product .ab-single-product-visual img,
.single-ab_product .ab-product-gallery img,
.single-product .ab-product-visual img,
.single-product .ab-product-image img,
.single-product .ab-single-product-visual img,
.single-product .ab-product-gallery img,
.single .ab-product-visual img,
.single .ab-product-image img,
.single .ab-single-product-visual img,
.single .ab-product-gallery img {
display: block !important;
width: auto !important;
max-width: 92% !important;
height: auto !important;
max-height: 620px !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
filter:
drop-shadow(0 24px 46px rgba(0,0,0,.42))
drop-shadow(0 0 18px rgba(56,189,248,.14)) !important;
}
/* 画像がPRODUCT DESIGNのab-feature系で出ている場合もPCでは大きく */
.single-ab_product .ab-feature-visual.has-image,
.single-product .ab-feature-visual.has-image,
.single .ab-feature-visual.has-image {
min-height: 560px !important;
max-width: 560px !important;
margin: 0 auto !important;
background:
radial-gradient(circle at 50% 48%, rgba(56,189,248,.16), transparent 52%),
linear-gradient(145deg, rgba(5,13,36,.70), rgba(7,9,24,.52)) !important;
}
.single-ab_product .ab-feature-visual.has-image .ab-feature-photo,
.single-product .ab-feature-visual.has-image .ab-feature-photo,
.single .ab-feature-visual.has-image .ab-feature-photo {
max-width: 92% !important;
max-height: 620px !important;
}
/* 商品説明側の幅と余白 */
.single-ab_product .entry-content,
.single-product .entry-content,
.single .ab-product-detail .entry-content {
max-width: 760px !important;
}
.single-ab_product .entry-content > p,
.single-ab_product .ab-product-description,
.single-ab_product .ab-product-lead,
.single-product .entry-content > p,
.single-product .ab-product-description,
.single-product .ab-product-lead {
font-size: clamp(16px, 1.2vw, 19px) !important;
line-height: 1.85 !important;
max-width: 760px !important;
}
.single-ab_product ul,
.single-product ul,
.single .ab-product-detail ul {
max-width: 760px !important;
}
}
/* 大きめPCではさらに余裕を持たせる */
@media (min-width: 1180px) {
.single-ab_product h1,
.single-ab_product .entry-title,
.single-ab_product .ab-product-title,
.single-product h1,
.single-product .entry-title,
.single-product .ab-product-title {
font-size: clamp(52px, 3.9vw, 72px) !important;
}
.single-ab_product .ab-product-visual,
.single-ab_product .ab-product-image,
.single-ab_product .ab-single-product-visual,
.single-ab_product .ab-product-gallery,
.single-product .ab-product-visual,
.single-product .ab-product-image,
.single-product .ab-single-product-visual,
.single-product .ab-product-gallery,
.single .ab-product-visual,
.single .ab-product-image,
.single .ab-single-product-visual,
.single .ab-product-gallery,
.single-ab_product .ab-feature-visual.has-image,
.single-product .ab-feature-visual.has-image,
.single .ab-feature-visual.has-image {
max-width: 620px !important;
min-height: 620px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.8
PC商品詳細ページ 写真をもう少し大きく表示
- スマホ表示は維持
- PCのみ写真サイズを一段大きく調整
========================================================= */
@media (min-width: 769px) {
.single-ab_product .ab-product-detail,
.single-ab_product .ab-single-product,
.single-ab_product .ab-product-hero,
.single-product .ab-product-detail,
.single-product .ab-single-product,
.single-product .ab-product-hero,
.single .ab-product-detail,
.single .ab-single-product,
.single .ab-product-hero {
grid-template-columns: minmax(520px, 1.08fr) minmax(420px, .92fr) !important;
gap: clamp(32px, 4vw, 64px) !important;
align-items: center !important;
}
.single-ab_product .ab-product-visual,
.single-ab_product .ab-product-image,
.single-ab_product .ab-single-product-visual,
.single-ab_product .ab-product-gallery,
.single-product .ab-product-visual,
.single-product .ab-product-image,
.single-product .ab-single-product-visual,
.single-product .ab-product-gallery,
.single .ab-product-visual,
.single .ab-product-image,
.single .ab-single-product-visual,
.single .ab-product-gallery,
.single-ab_product .ab-feature-visual.has-image,
.single-product .ab-feature-visual.has-image,
.single .ab-feature-visual.has-image {
max-width: 680px !important;
min-height: 680px !important;
width: 100% !important;
margin: 0 auto !important;
}
.single-ab_product .ab-product-visual img,
.single-ab_product .ab-product-image img,
.single-ab_product .ab-single-product-visual img,
.single-ab_product .ab-product-gallery img,
.single-product .ab-product-visual img,
.single-product .ab-product-image img,
.single-product .ab-single-product-visual img,
.single-product .ab-product-gallery img,
.single .ab-product-visual img,
.single .ab-product-image img,
.single .ab-single-product-visual img,
.single .ab-product-gallery img,
.single-ab_product .ab-feature-visual.has-image .ab-feature-photo,
.single-product .ab-feature-visual.has-image .ab-feature-photo,
.single .ab-feature-visual.has-image .ab-feature-photo {
max-width: 98% !important;
max-height: 740px !important;
transform: scale(1.06) !important;
transform-origin: center center !important;
}
}
@media (min-width: 1180px) {
.single-ab_product .ab-product-visual,
.single-ab_product .ab-product-image,
.single-ab_product .ab-single-product-visual,
.single-ab_product .ab-product-gallery,
.single-product .ab-product-visual,
.single-product .ab-product-image,
.single-product .ab-single-product-visual,
.single-product .ab-product-gallery,
.single .ab-product-visual,
.single .ab-product-image,
.single .ab-single-product-visual,
.single .ab-product-gallery,
.single-ab_product .ab-feature-visual.has-image,
.single-product .ab-feature-visual.has-image,
.single .ab-feature-visual.has-image {
max-width: 760px !important;
min-height: 760px !important;
}
.single-ab_product .ab-product-visual img,
.single-ab_product .ab-product-image img,
.single-ab_product .ab-single-product-visual img,
.single-ab_product .ab-product-gallery img,
.single-product .ab-product-visual img,
.single-product .ab-product-image img,
.single-product .ab-single-product-visual img,
.single-product .ab-product-gallery img,
.single .ab-product-visual img,
.single .ab-product-image img,
.single .ab-single-product-visual img,
.single .ab-product-gallery img,
.single-ab_product .ab-feature-visual.has-image .ab-feature-photo,
.single-product .ab-feature-visual.has-image .ab-feature-photo,
.single .ab-feature-visual.has-image .ab-feature-photo {
max-height: 820px !important;
transform: scale(1.1) !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.9
商品詳細ページ 上部デザイン再固定版
- V37.8.9.8の写真拡大は維持
- AIR BRIDGE PRODUCTラベルを黒×ネオンへ再固定
- PCタイトルの巨大化を再抑制
========================================================= */
/* 商品詳細ページの上部ラベルを黒×ネオンに強制固定 */
body.single-ab_product .ab-kicker,
body.single-ab_product .ab-product-kicker,
body.single-ab_product .ab-product-label,
body.single-ab_product .ab-hero-kicker-v24,
body.single-product .ab-kicker,
body.single-product .ab-product-kicker,
body.single-product .ab-product-label,
body.single-product .ab-hero-kicker-v24,
body.single .ab-product-kicker,
body.single .ab-product-label,
body.single .ab-kicker {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: 100% !important;
min-height: 44px !important;
margin: 0 0 28px 0 !important;
padding: 10px 20px !important;
border-radius: 999px !important;
border: 1px solid rgba(125,220,255,.72) !important;
background:
linear-gradient(180deg, rgba(5,13,36,.92), rgba(5,13,36,.68)) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px !important;
line-height: 1.25 !important;
font-weight: 900 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
box-shadow:
0 0 0 1px rgba(236,72,153,.25),
0 0 24px rgba(56,189,248,.24),
0 0 28px rgba(236,72,153,.14) !important;
}
/* ラベル内テキスト・疑似要素も白に固定 */
body.single-ab_product .ab-kicker *,
body.single-ab_product .ab-product-kicker *,
body.single-ab_product .ab-product-label *,
body.single-ab_product .ab-hero-kicker-v24 *,
body.single-product .ab-kicker *,
body.single-product .ab-product-kicker *,
body.single-product .ab-product-label *,
body.single-product .ab-hero-kicker-v24 *,
body.single .ab-product-kicker *,
body.single .ab-product-label *,
body.single .ab-kicker * {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* ラベルの丸アイコン */
body.single-ab_product .ab-kicker::before,
body.single-ab_product .ab-product-kicker::before,
body.single-ab_product .ab-product-label::before,
body.single-product .ab-kicker::before,
body.single-product .ab-product-kicker::before,
body.single-product .ab-product-label::before,
body.single .ab-kicker::before,
body.single .ab-product-kicker::before,
body.single .ab-product-label::before {
background: #ffd166 !important;
box-shadow:
0 0 0 7px rgba(255,209,102,.16),
0 0 18px rgba(255,209,102,.50) !important;
}
/* PCタイトルを再度適正サイズに固定 */
@media (min-width: 769px) {
body.single-ab_product h1,
body.single-ab_product .entry-title,
body.single-ab_product .ab-product-title,
body.single-product h1,
body.single-product .entry-title,
body.single-product .ab-product-title,
body.single h1.entry-title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(44px, 4vw, 66px) !important;
line-height: 1.16 !important;
font-weight: 900 !important;
letter-spacing: .015em !important;
max-width: 1040px !important;
margin: 0 0 26px 0 !important;
padding: 0 !important;
text-align: left !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
text-wrap: balance !important;
text-shadow:
0 0 18px rgba(255,255,255,.14),
0 6px 20px rgba(0,0,0,.52) !important;
}
/* 商品説明も大きくなりすぎないよう固定 */
body.single-ab_product .entry-content > p,
body.single-ab_product .ab-product-description,
body.single-ab_product .ab-product-lead,
body.single-product .entry-content > p,
body.single-product .ab-product-description,
body.single-product .ab-product-lead,
body.single .entry-content > p {
font-size: clamp(16px, 1.2vw, 19px) !important;
line-height: 1.85 !important;
font-weight: 600 !important;
color: rgba(255,255,255,.88) !important;
-webkit-text-fill-color: rgba(255,255,255,.88) !important;
max-width: 820px !important;
letter-spacing: .04em !important;
}
}
/* スマホ側は見やすさ維持 */
@media (max-width: 768px) {
body.single-ab_product .ab-kicker,
body.single-ab_product .ab-product-kicker,
body.single-ab_product .ab-product-label,
body.single-ab_product .ab-hero-kicker-v24,
body.single-product .ab-kicker,
body.single-product .ab-product-kicker,
body.single-product .ab-product-label,
body.single-product .ab-hero-kicker-v24,
body.single .ab-product-kicker,
body.single .ab-product-label,
body.single .ab-kicker {
min-height: 40px !important;
margin-bottom: 22px !important;
padding: 9px 16px !important;
font-size: 12px !important;
letter-spacing: .12em !important;
white-space: normal !important;
text-align: center !important;
}
body.single-ab_product h1,
body.single-ab_product .entry-title,
body.single-ab_product .ab-product-title,
body.single-product h1,
body.single-product .entry-title,
body.single-product .ab-product-title,
body.single h1.entry-title {
font-size: clamp(31px, 9vw, 42px) !important;
line-height: 1.18 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.10
商品詳細ページ：写真拡大＋上部デザイン同時固定版
- AIR BRIDGE PRODUCTラベル修正を維持
- 写真拡大を最終優先で再固定
- PCのみ写真を大きく、スマホは維持
========================================================= */
/* 商品詳細ラベル：黒×ネオン固定 */
body.single-ab_product .ab-kicker,
body.single-ab_product .ab-product-kicker,
body.single-ab_product .ab-product-label,
body.single-ab_product .ab-hero-kicker-v24,
body.single-product .ab-kicker,
body.single-product .ab-product-kicker,
body.single-product .ab-product-label,
body.single-product .ab-hero-kicker-v24,
body.single .ab-product-kicker,
body.single .ab-product-label,
body.single .ab-kicker {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: 100% !important;
min-height: 44px !important;
margin: 0 0 28px 0 !important;
padding: 10px 20px !important;
border-radius: 999px !important;
border: 1px solid rgba(125,220,255,.72) !important;
background: linear-gradient(180deg, rgba(5,13,36,.92), rgba(5,13,36,.68)) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px !important;
line-height: 1.25 !important;
font-weight: 900 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
box-shadow:
0 0 0 1px rgba(236,72,153,.25),
0 0 24px rgba(56,189,248,.24),
0 0 28px rgba(236,72,153,.14) !important;
}
/* PC商品詳細：写真を大きく再固定 */
@media (min-width: 769px) {
body.single-ab_product .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-detail,
body.single-product .ab-single-product,
body.single-product .ab-product-hero,
body.single .ab-product-detail,
body.single .ab-single-product,
body.single .ab-product-hero {
display: grid !important;
grid-template-columns: minmax(560px, 1.12fr) minmax(420px, .88fr) !important;
gap: clamp(32px, 4vw, 64px) !important;
align-items: center !important;
}
/* PCタイトルは大きすぎない範囲で固定 */
body.single-ab_product h1,
body.single-ab_product .entry-title,
body.single-ab_product .ab-product-title,
body.single-product h1,
body.single-product .entry-title,
body.single-product .ab-product-title,
body.single h1.entry-title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(44px, 4vw, 66px) !important;
line-height: 1.16 !important;
font-weight: 900 !important;
letter-spacing: .015em !important;
max-width: 1040px !important;
margin: 0 0 26px 0 !important;
padding: 0 !important;
text-align: left !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
text-wrap: balance !important;
text-shadow:
0 0 18px rgba(255,255,255,.14),
0 6px 20px rgba(0,0,0,.52) !important;
}
/* 写真枠をさらに大きく */
body.single-ab_product .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-ab_product .ab-single-product-visual,
body.single-ab_product .ab-product-gallery,
body.single-product .ab-product-visual,
body.single-product .ab-product-image,
body.single-product .ab-single-product-visual,
body.single-product .ab-product-gallery,
body.single .ab-product-visual,
body.single .ab-product-image,
body.single .ab-single-product-visual,
body.single .ab-product-gallery,
body.single-ab_product .ab-feature-visual.has-image,
body.single-product .ab-feature-visual.has-image,
body.single .ab-feature-visual.has-image {
width: 100% !important;
max-width: 760px !important;
min-height: 760px !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background:
radial-gradient(circle at 50% 48%, rgba(56,189,248,.18), transparent 52%),
linear-gradient(145deg, rgba(5,13,36,.70), rgba(7,9,24,.52)) !important;
border: 1px solid rgba(56,189,248,.26) !important;
border-radius: 34px !important;
box-shadow:
0 24px 70px rgba(0,0,0,.34),
inset 0 0 0 1px rgba(255,255,255,.04) !important;
overflow: visible !important;
}
/* 画像自体も大きく */
body.single-ab_product .ab-product-visual img,
body.single-ab_product .ab-product-image img,
body.single-ab_product .ab-single-product-visual img,
body.single-ab_product .ab-product-gallery img,
body.single-product .ab-product-visual img,
body.single-product .ab-product-image img,
body.single-product .ab-single-product-visual img,
body.single-product .ab-product-gallery img,
body.single .ab-product-visual img,
body.single .ab-product-image img,
body.single .ab-single-product-visual img,
body.single .ab-product-gallery img,
body.single-ab_product .ab-feature-visual.has-image .ab-feature-photo,
body.single-product .ab-feature-visual.has-image .ab-feature-photo,
body.single .ab-feature-visual.has-image .ab-feature-photo {
display: block !important;
width: auto !important;
max-width: 104% !important;
height: auto !important;
max-height: 840px !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
transform: scale(1.12) !important;
transform-origin: center center !important;
filter:
drop-shadow(0 28px 52px rgba(0,0,0,.44))
drop-shadow(0 0 22px rgba(56,189,248,.16)) !important;
}
body.single-ab_product .entry-content > p,
body.single-ab_product .ab-product-description,
body.single-ab_product .ab-product-lead,
body.single-product .entry-content > p,
body.single-product .ab-product-description,
body.single-product .ab-product-lead,
body.single .entry-content > p {
font-size: clamp(16px, 1.2vw, 19px) !important;
line-height: 1.85 !important;
font-weight: 600 !important;
color: rgba(255,255,255,.88) !important;
-webkit-text-fill-color: rgba(255,255,255,.88) !important;
max-width: 820px !important;
letter-spacing: .04em !important;
}
}
@media (min-width: 1280px) {
body.single-ab_product .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-ab_product .ab-single-product-visual,
body.single-ab_product .ab-product-gallery,
body.single-product .ab-product-visual,
body.single-product .ab-product-image,
body.single-product .ab-single-product-visual,
body.single-product .ab-product-gallery,
body.single .ab-product-visual,
body.single .ab-product-image,
body.single .ab-single-product-visual,
body.single .ab-product-gallery,
body.single-ab_product .ab-feature-visual.has-image,
body.single-product .ab-feature-visual.has-image,
body.single .ab-feature-visual.has-image {
max-width: 840px !important;
min-height: 800px !important;
}
body.single-ab_product .ab-product-visual img,
body.single-ab_product .ab-product-image img,
body.single-ab_product .ab-single-product-visual img,
body.single-ab_product .ab-product-gallery img,
body.single-product .ab-product-visual img,
body.single-product .ab-product-image img,
body.single-product .ab-single-product-visual img,
body.single-product .ab-product-gallery img,
body.single .ab-product-visual img,
body.single .ab-product-image img,
body.single .ab-single-product-visual img,
body.single .ab-product-gallery img,
body.single-ab_product .ab-feature-visual.has-image .ab-feature-photo,
body.single-product .ab-feature-visual.has-image .ab-feature-photo,
body.single .ab-feature-visual.has-image .ab-feature-photo {
max-height: 900px !important;
transform: scale(1.16) !important;
}
}
/* スマホ側は維持 */
@media (max-width: 768px) {
body.single-ab_product .ab-kicker,
body.single-ab_product .ab-product-kicker,
body.single-ab_product .ab-product-label,
body.single-ab_product .ab-hero-kicker-v24,
body.single-product .ab-kicker,
body.single-product .ab-product-kicker,
body.single-product .ab-product-label,
body.single-product .ab-hero-kicker-v24,
body.single .ab-product-kicker,
body.single .ab-product-label,
body.single .ab-kicker {
min-height: 40px !important;
margin-bottom: 22px !important;
padding: 9px 16px !important;
font-size: 12px !important;
letter-spacing: .12em !important;
white-space: normal !important;
text-align: center !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.11
商品写真サイズ統一版
- 商品ごとに写真表示サイズが変わる問題を抑制
- 商品詳細ページの写真フレームを固定化
- 画像を同一フレーム内でcontain表示
========================================================= */
/* PC：商品詳細写真フレームを統一 */
@media (min-width: 769px) {
body.single-ab_product .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-ab_product .ab-single-product-visual,
body.single-ab_product .ab-product-gallery,
body.single-product .ab-product-visual,
body.single-product .ab-product-image,
body.single-product .ab-single-product-visual,
body.single-product .ab-product-gallery,
body.single .ab-product-visual,
body.single .ab-product-image,
body.single .ab-single-product-visual,
body.single .ab-product-gallery,
body.single-ab_product .ab-feature-visual.has-image,
body.single-product .ab-feature-visual.has-image,
body.single .ab-feature-visual.has-image {
width: 720px !important;
max-width: 720px !important;
min-width: 720px !important;
height: 720px !important;
min-height: 720px !important;
max-height: 720px !important;
aspect-ratio: 1 / 1 !important;
margin: 0 auto !important;
padding: 44px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background:
radial-gradient(circle at 50% 48%, rgba(56,189,248,.18), transparent 52%),
linear-gradient(145deg, rgba(5,13,36,.70), rgba(7,9,24,.52)) !important;
border: 1px solid rgba(56,189,248,.26) !important;
border-radius: 34px !important;
box-shadow:
0 24px 70px rgba(0,0,0,.34),
inset 0 0 0 1px rgba(255,255,255,.04) !important;
overflow: visible !important;
}
/* 画像そのものを同一表示エリア内に統一 */
body.single-ab_product .ab-product-visual img,
body.single-ab_product .ab-product-image img,
body.single-ab_product .ab-single-product-visual img,
body.single-ab_product .ab-product-gallery img,
body.single-product .ab-product-visual img,
body.single-product .ab-product-image img,
body.single-product .ab-single-product-visual img,
body.single-product .ab-product-gallery img,
body.single .ab-product-visual img,
body.single .ab-product-image img,
body.single .ab-single-product-visual img,
body.single .ab-product-gallery img,
body.single-ab_product .ab-feature-visual.has-image .ab-feature-photo,
body.single-product .ab-feature-visual.has-image .ab-feature-photo,
body.single .ab-feature-visual.has-image .ab-feature-photo {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
padding: 0 !important;
transform: none !important;
transform-origin: center center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter:
drop-shadow(0 28px 52px rgba(0,0,0,.44))
drop-shadow(0 0 22px rgba(56,189,248,.16)) !important;
}
/* PCレイアウト側も固定フレームに合わせる */
body.single-ab_product .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-detail,
body.single-product .ab-single-product,
body.single-product .ab-product-hero,
body.single .ab-product-detail,
body.single .ab-single-product,
body.single .ab-product-hero {
display: grid !important;
grid-template-columns: 760px minmax(420px, 1fr) !important;
gap: clamp(36px, 4vw, 72px) !important;
align-items: center !important;
}
}
/* 大型PCでは少しだけ拡大 */
@media (min-width: 1440px) {
body.single-ab_product .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-ab_product .ab-single-product-visual,
body.single-ab_product .ab-product-gallery,
body.single-product .ab-product-visual,
body.single-product .ab-product-image,
body.single-product .ab-single-product-visual,
body.single-product .ab-product-gallery,
body.single .ab-product-visual,
body.single .ab-product-image,
body.single .ab-single-product-visual,
body.single .ab-product-gallery,
body.single-ab_product .ab-feature-visual.has-image,
body.single-product .ab-feature-visual.has-image,
body.single .ab-feature-visual.has-image {
width: 780px !important;
max-width: 780px !important;
min-width: 780px !important;
height: 780px !important;
min-height: 780px !important;
max-height: 780px !important;
padding: 48px !important;
}
body.single-ab_product .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-detail,
body.single-product .ab-single-product,
body.single-product .ab-product-hero,
body.single .ab-product-detail,
body.single .ab-single-product,
body.single .ab-product-hero {
grid-template-columns: 820px minmax(420px, 1fr) !important;
}
}
/* タブレット幅では画面幅に合わせる */
@media (min-width: 769px) and (max-width: 1120px) {
body.single-ab_product .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-ab_product .ab-single-product-visual,
body.single-ab_product .ab-product-gallery,
body.single-product .ab-product-visual,
body.single-product .ab-product-image,
body.single-product .ab-single-product-visual,
body.single-product .ab-product-gallery,
body.single .ab-product-visual,
body.single .ab-product-image,
body.single .ab-single-product-visual,
body.single .ab-product-gallery,
body.single-ab_product .ab-feature-visual.has-image,
body.single-product .ab-feature-visual.has-image,
body.single .ab-feature-visual.has-image {
width: min(68vw, 620px) !important;
min-width: 0 !important;
max-width: min(68vw, 620px) !important;
height: min(68vw, 620px) !important;
min-height: min(68vw, 620px) !important;
max-height: min(68vw, 620px) !important;
padding: 36px !important;
}
body.single-ab_product .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-detail,
body.single-product .ab-single-product,
body.single-product .ab-product-hero,
body.single .ab-product-detail,
body.single .ab-single-product,
body.single .ab-product-hero {
grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr) !important;
}
}
/* スマホ：商品写真の表示差を抑える */
@media (max-width: 768px) {
body.single-ab_product .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-ab_product .ab-single-product-visual,
body.single-ab_product .ab-product-gallery,
body.single-product .ab-product-visual,
body.single-product .ab-product-image,
body.single-product .ab-single-product-visual,
body.single-product .ab-product-gallery,
body.single .ab-product-visual,
body.single .ab-product-image,
body.single .ab-single-product-visual,
body.single .ab-product-gallery,
body.single-ab_product .ab-feature-visual.has-image,
body.single-product .ab-feature-visual.has-image,
body.single .ab-feature-visual.has-image {
width: min(92vw, 420px) !important;
max-width: min(92vw, 420px) !important;
min-width: 0 !important;
height: min(92vw, 420px) !important;
min-height: min(92vw, 420px) !important;
max-height: min(92vw, 420px) !important;
aspect-ratio: 1 / 1 !important;
margin: 0 auto 28px auto !important;
padding: 28px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
body.single-ab_product .ab-product-visual img,
body.single-ab_product .ab-product-image img,
body.single-ab_product .ab-single-product-visual img,
body.single-ab_product .ab-product-gallery img,
body.single-product .ab-product-visual img,
body.single-product .ab-product-image img,
body.single-product .ab-single-product-visual img,
body.single-product .ab-product-gallery img,
body.single .ab-product-visual img,
body.single .ab-product-image img,
body.single .ab-single-product-visual img,
body.single .ab-product-gallery img,
body.single-ab_product .ab-feature-visual.has-image .ab-feature-photo,
body.single-product .ab-feature-visual.has-image .ab-feature-photo,
body.single .ab-feature-visual.has-image .ab-feature-photo {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
}
}
/* =========================================================
v37.8.9.12 商品ページタイトル見切れ修正
- PCで商品タイトルが右側で見切れる問題を修正
- タイトルと説明文の表示幅を安定化
- 画像サイズ統一版を維持しつつ、レイアウトを柔軟化
========================================================= */
@media (min-width: 921px){
body.single-ab_product .ab-product-detail-wrap,
body.single-product .ab-product-detail-wrap,
body.single .ab-product-detail-wrap,
body.single-ab_product .ab-product-detail,
body.single-product .ab-product-detail,
body.single .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-product .ab-single-product,
body.single .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-hero,
body.single .ab-product-hero{
width:min(100%, 1520px) !important;
max-width:1520px !important;
margin-left:auto !important;
margin-right:auto !important;
display:grid !important;
grid-template-columns:minmax(420px, 46%) minmax(0, 54%) !important;
gap:clamp(28px, 3vw, 56px) !important;
align-items:center !important;
overflow:visible !important;
}
body.single-ab_product .ab-single-product-info,
body.single-product .ab-single-product-info,
body.single .ab-single-product-info,
body.single-ab_product .entry-content,
body.single-product .entry-content,
body.single .entry-content,
body.single-ab_product .ab-product-content,
body.single-product .ab-product-content,
body.single .ab-product-content{
min-width:0 !important;
width:100% !important;
max-width:100% !important;
overflow:visible !important;
}
body.single-ab_product h1,
body.single-ab_product .entry-title,
body.single-ab_product .ab-product-title,
body.single-ab_product .ab-single-product-title,
body.single-product h1,
body.single-product .entry-title,
body.single-product .ab-product-title,
body.single-product .ab-single-product-title,
body.single h1,
body.single .entry-title,
body.single .ab-product-title,
body.single .ab-single-product-title{
font-size:clamp(34px, 4vw, 66px) !important;
line-height:1.08 !important;
letter-spacing:.01em !important;
max-width:100% !important;
width:100% !important;
margin:0 0 22px 0 !important;
white-space:normal !important;
word-break:keep-all !important;
overflow-wrap:anywhere !important;
text-wrap:pretty !important;
text-align:left !important;
}
body.single-ab_product .ab-product-description,
body.single-ab_product .ab-product-lead,
body.single-ab_product .entry-content > p,
body.single-product .ab-product-description,
body.single-product .ab-product-lead,
body.single-product .entry-content > p,
body.single .ab-product-description,
body.single .ab-product-lead,
body.single .entry-content > p{
max-width:100% !important;
width:100% !important;
font-size:clamp(16px, 1.35vw, 22px) !important;
line-height:1.8 !important;
overflow-wrap:anywhere !important;
}
}
@media (min-width: 921px) and (max-width: 1280px){
body.single-ab_product .ab-product-detail-wrap,
body.single-product .ab-product-detail-wrap,
body.single .ab-product-detail-wrap,
body.single-ab_product .ab-product-detail,
body.single-product .ab-product-detail,
body.single .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-product .ab-single-product,
body.single .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-hero,
body.single .ab-product-hero{
grid-template-columns:minmax(360px, 44%) minmax(0, 56%) !important;
gap:28px !important;
}
body.single-ab_product h1,
body.single-ab_product .entry-title,
body.single-ab_product .ab-product-title,
body.single-ab_product .ab-single-product-title,
body.single-product h1,
body.single-product .entry-title,
body.single-product .ab-product-title,
body.single-product .ab-single-product-title,
body.single h1,
body.single .entry-title,
body.single .ab-product-title,
body.single .ab-single-product-title{
font-size:clamp(32px, 3.8vw, 54px) !important;
line-height:1.1 !important;
}
}
/* =========================================================
v37.8.9.12.1 商品ページ写真の軽微なかぶり修正
- PCで写真が説明文側へ少しかぶる現象を抑制
- 写真は大きめの印象を維持しつつ、列内に確実に収める
========================================================= */
@media (min-width: 921px){
body.single-ab_product .ab-product-detail-wrap,
body.single-product .ab-product-detail-wrap,
body.single .ab-product-detail-wrap,
body.single-ab_product .ab-product-detail,
body.single-product .ab-product-detail,
body.single .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-product .ab-single-product,
body.single .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-hero,
body.single .ab-product-hero{
grid-template-columns:minmax(400px, 45%) minmax(0, 55%) !important;
gap:clamp(44px, 4.2vw, 86px) !important;
}
body.single-ab_product .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-ab_product .ab-single-product-visual,
body.single-ab_product .ab-product-gallery,
body.single-product .ab-product-visual,
body.single-product .ab-product-image,
body.single-product .ab-single-product-visual,
body.single-product .ab-product-gallery,
body.single .ab-product-visual,
body.single .ab-product-image,
body.single .ab-single-product-visual,
body.single .ab-product-gallery,
body.single-ab_product .ab-feature-visual.has-image,
body.single-product .ab-feature-visual.has-image,
body.single .ab-feature-visual.has-image {
width:min(100%, 680px) !important;
max-width:min(100%, 680px) !important;
min-width:0 !important;
height:min(44vw, 680px) !important;
max-height:min(44vw, 680px) !important;
min-height:min(44vw, 680px) !important;
margin:0 auto 0 0 !important;
padding:40px !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
body.single-ab_product .ab-product-visual img,
body.single-ab_product .ab-product-image img,
body.single-ab_product .ab-single-product-visual img,
body.single-ab_product .ab-product-gallery img,
body.single-product .ab-product-visual img,
body.single-product .ab-product-image img,
body.single-product .ab-single-product-visual img,
body.single-product .ab-product-gallery img,
body.single .ab-product-visual img,
body.single .ab-product-image img,
body.single .ab-single-product-visual img,
body.single .ab-product-gallery img,
body.single-ab_product .ab-feature-visual.has-image .ab-feature-photo,
body.single-product .ab-feature-visual.has-image .ab-feature-photo,
body.single .ab-feature-visual.has-image .ab-feature-photo {
width:100% !important;
height:100% !important;
max-width:100% !important;
max-height:100% !important;
object-fit:contain !important;
object-position:center center !important;
}
}
@media (min-width: 921px) and (max-width: 1280px){
body.single-ab_product .ab-product-detail-wrap,
body.single-product .ab-product-detail-wrap,
body.single .ab-product-detail-wrap,
body.single-ab_product .ab-product-detail,
body.single-product .ab-product-detail,
body.single .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-product .ab-single-product,
body.single .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-hero,
body.single .ab-product-hero{
grid-template-columns:minmax(340px, 43%) minmax(0, 57%) !important;
gap:36px !important;
}
body.single-ab_product .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-ab_product .ab-single-product-visual,
body.single-ab_product .ab-product-gallery,
body.single-product .ab-product-visual,
body.single-product .ab-product-image,
body.single-product .ab-single-product-visual,
body.single-product .ab-product-gallery,
body.single .ab-product-visual,
body.single .ab-product-image,
body.single .ab-single-product-visual,
body.single .ab-product-gallery,
body.single-ab_product .ab-feature-visual.has-image,
body.single-product .ab-feature-visual.has-image,
body.single .ab-feature-visual.has-image {
width:min(100%, 560px) !important;
max-width:min(100%, 560px) !important;
height:min(42vw, 560px) !important;
max-height:min(42vw, 560px) !important;
min-height:min(42vw, 560px) !important;
padding:32px !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.12.2
PC商品ページ：テキスト側を少し右に逃がす版
- 写真サイズ・かぶり修正は維持
- 右側テキストカラムのみ少し右へ移動
- タイトル見切れ防止も維持
========================================================= */
@media (min-width: 921px) {
/* テキストカラム本体を少し右へ */
body.single-ab_product .ab-single-product-info,
body.single-product .ab-single-product-info,
body.single .ab-single-product-info,
body.single-ab_product .ab-product-content,
body.single-product .ab-product-content,
body.single .ab-product-content,
body.single-ab_product .entry-content,
body.single-product .entry-content,
body.single .entry-content {
padding-left: clamp(18px, 2.1vw, 42px) !important;
box-sizing: border-box !important;
}
/* h1やラベルが別ラッパーにある場合も右へ */
body.single-ab_product .ab-product-detail > :not(.ab-product-visual):not(.ab-product-image):not(.ab-single-product-visual):not(.ab-product-gallery),
body.single-product .ab-product-detail > :not(.ab-product-visual):not(.ab-product-image):not(.ab-single-product-visual):not(.ab-product-gallery),
body.single .ab-product-detail > :not(.ab-product-visual):not(.ab-product-image):not(.ab-single-product-visual):not(.ab-product-gallery),
body.single-ab_product .ab-single-product > :not(.ab-product-visual):not(.ab-product-image):not(.ab-single-product-visual):not(.ab-product-gallery),
body.single-product .ab-single-product > :not(.ab-product-visual):not(.ab-product-image):not(.ab-single-product-visual):not(.ab-product-gallery),
body.single .ab-single-product > :not(.ab-product-visual):not(.ab-product-image):not(.ab-single-product-visual):not(.ab-product-gallery),
body.single-ab_product .ab-product-hero > :not(.ab-product-visual):not(.ab-product-image):not(.ab-single-product-visual):not(.ab-product-gallery),
body.single-product .ab-product-hero > :not(.ab-product-visual):not(.ab-product-image):not(.ab-single-product-visual):not(.ab-product-gallery),
body.single .ab-product-hero > :not(.ab-product-visual):not(.ab-product-image):not(.ab-single-product-visual):not(.ab-product-gallery) {
padding-left: clamp(12px, 1.6vw, 30px) !important;
box-sizing: border-box !important;
}
/* 右へ逃がしても見切れないようにテキスト幅を安定化 */
body.single-ab_product h1,
body.single-ab_product .entry-title,
body.single-ab_product .ab-product-title,
body.single-ab_product .ab-single-product-title,
body.single-product h1,
body.single-product .entry-title,
body.single-product .ab-product-title,
body.single-product .ab-single-product-title,
body.single h1,
body.single .entry-title,
body.single .ab-product-title,
body.single .ab-single-product-title,
body.single-ab_product .ab-product-description,
body.single-ab_product .ab-product-lead,
body.single-ab_product .entry-content > p,
body.single-product .ab-product-description,
body.single-product .ab-product-lead,
body.single-product .entry-content > p,
body.single .ab-product-description,
body.single .ab-product-lead,
body.single .entry-content > p,
body.single-ab_product ul,
body.single-product ul,
body.single .ab-product-detail ul {
max-width: calc(100% - 8px) !important;
}
/* グリッドの間隔も少し広げて、写真との距離を確保 */
body.single-ab_product .ab-product-detail-wrap,
body.single-product .ab-product-detail-wrap,
body.single .ab-product-detail-wrap,
body.single-ab_product .ab-product-detail,
body.single-product .ab-product-detail,
body.single .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-product .ab-single-product,
body.single .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-hero,
body.single .ab-product-hero {
column-gap: clamp(52px, 5vw, 96px) !important;
}
}
/* 中間幅では右に逃がしすぎない */
@media (min-width: 921px) and (max-width: 1280px) {
body.single-ab_product .ab-single-product-info,
body.single-product .ab-single-product-info,
body.single .ab-single-product-info,
body.single-ab_product .ab-product-content,
body.single-product .ab-product-content,
body.single .ab-product-content,
body.single-ab_product .entry-content,
body.single-product .entry-content,
body.single .entry-content {
padding-left: clamp(12px, 1.4vw, 22px) !important;
}
body.single-ab_product .ab-product-detail-wrap,
body.single-product .ab-product-detail-wrap,
body.single .ab-product-detail-wrap,
body.single-ab_product .ab-product-detail,
body.single-product .ab-product-detail,
body.single .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-product .ab-single-product,
body.single .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-hero,
body.single .ab-product-hero {
column-gap: 44px !important;
}
}
/* スマホは現状維持 */
@media (max-width: 920px) {
body.single-ab_product .ab-single-product-info,
body.single-product .ab-single-product-info,
body.single .ab-single-product-info,
body.single-ab_product .ab-product-content,
body.single-product .ab-product-content,
body.single .ab-product-content,
body.single-ab_product .entry-content,
body.single-product .entry-content,
body.single .entry-content {
padding-left: 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.12.3
PC商品ページ：メインビジュアル全体表示修正版
- テキスト右逃がしは維持
- 写真が一部切れる/反映されない状態を抑制
- 商品画像をフレーム内で全体表示
========================================================= */
@media (min-width: 921px) {
/* 写真フレームは大きめを維持しつつ、画像を切らない */
body.single-ab_product .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-ab_product .ab-single-product-visual,
body.single-ab_product .ab-product-gallery,
body.single-product .ab-product-visual,
body.single-product .ab-product-image,
body.single-product .ab-single-product-visual,
body.single-product .ab-product-gallery,
body.single .ab-product-visual,
body.single .ab-product-image,
body.single .ab-single-product-visual,
body.single .ab-product-gallery,
body.single-ab_product .ab-feature-visual.has-image,
body.single-product .ab-feature-visual.has-image,
body.single .ab-feature-visual.has-image {
width: min(100%, 700px) !important;
max-width: min(100%, 700px) !important;
min-width: 0 !important;
height: min(46vw, 700px) !important;
min-height: min(46vw, 700px) !important;
max-height: min(46vw, 700px) !important;
aspect-ratio: 1 / 1 !important;
margin: 0 auto 0 0 !important;
padding: 34px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
isolation: isolate !important;
}
/* 画像本体を全体表示。拡大transformを解除して切れを防止 */
body.single-ab_product .ab-product-visual img,
body.single-ab_product .ab-product-image img,
body.single-ab_product .ab-single-product-visual img,
body.single-ab_product .ab-product-gallery img,
body.single-product .ab-product-visual img,
body.single-product .ab-product-image img,
body.single-product .ab-single-product-visual img,
body.single-product .ab-product-gallery img,
body.single .ab-product-visual img,
body.single .ab-product-image img,
body.single .ab-single-product-visual img,
body.single .ab-product-gallery img,
body.single-ab_product .ab-feature-visual.has-image .ab-feature-photo,
body.single-product .ab-feature-visual.has-image .ab-feature-photo,
body.single .ab-feature-visual.has-image .ab-feature-photo {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
padding: 0 !important;
transform: none !important;
transform-origin: center center !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter:
drop-shadow(0 24px 48px rgba(0,0,0,.42))
drop-shadow(0 0 20px rgba(56,189,248,.14)) !important;
}
/*
* フレーム内の画像が下に寄りすぎる場合の補正。
* 通常imgには効かせず、商品画像ラッパー側の余白で調整。
*/
body.single-ab_product .ab-product-visual,
body.single-product .ab-product-visual,
body.single .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-product .ab-product-image,
body.single .ab-product-image {
padding-top: 28px !important;
padding-bottom: 40px !important;
}
/* テキスト側は右へ逃がす状態を維持 */
body.single-ab_product .ab-single-product-info,
body.single-product .ab-single-product-info,
body.single .ab-single-product-info,
body.single-ab_product .ab-product-content,
body.single-product .ab-product-content,
body.single .ab-product-content,
body.single-ab_product .entry-content,
body.single-product .entry-content,
body.single .entry-content {
padding-left: clamp(22px, 2.4vw, 48px) !important;
box-sizing: border-box !important;
}
/* かぶり防止のため、列間を少しだけ広げる */
body.single-ab_product .ab-product-detail-wrap,
body.single-product .ab-product-detail-wrap,
body.single .ab-product-detail-wrap,
body.single-ab_product .ab-product-detail,
body.single-product .ab-product-detail,
body.single .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-product .ab-single-product,
body.single .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-hero,
body.single .ab-product-hero {
column-gap: clamp(58px, 5.3vw, 104px) !important;
}
}
/* 中間幅PCではフレームを少し抑えて全体表示を優先 */
@media (min-width: 921px) and (max-width: 1280px) {
body.single-ab_product .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single_ab_product .ab-single-product-visual,
body.single-ab_product .ab-product-gallery,
body.single-product .ab-product-visual,
body.single-product .ab-product-image,
body.single-product .ab-single-product-visual,
body.single-product .ab-product-gallery,
body.single .ab-product-visual,
body.single .ab-product-image,
body.single .ab-single-product-visual,
body.single .ab-product-gallery,
body.single-ab_product .ab-feature-visual.has-image,
body.single-product .ab-feature-visual.has-image,
body.single .ab-feature-visual.has-image {
width: min(100%, 570px) !important;
max-width: min(100%, 570px) !important;
height: min(43vw, 570px) !important;
min-height: min(43vw, 570px) !important;
max-height: min(43vw, 570px) !important;
padding: 30px !important;
}
body.single-ab_product .ab-single-product-info,
body.single-product .ab-single-product-info,
body.single .ab-single-product-info,
body.single-ab_product .ab-product-content,
body.single-product .ab-product-content,
body.single .ab-product-content,
body.single-ab_product .entry-content,
body.single-product .entry-content,
body.single .entry-content {
padding-left: clamp(14px, 1.7vw, 26px) !important;
}
body.single-ab_product .ab-product-detail-wrap,
body.single-product .ab-product-detail-wrap,
body.single .ab-product-detail-wrap,
body.single-ab_product .ab-product-detail,
body.single-product .ab-product-detail,
body.single .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-product .ab-single-product,
body.single .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-hero,
body.single .ab-product-hero {
column-gap: 46px !important;
}
}
/* 大型PCでは少し大きめにしながら全体表示 */
@media (min-width: 1440px) {
body.single-ab_product .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-ab_product .ab-single-product-visual,
body.single-ab_product .ab-product-gallery,
body.single-product .ab-product-visual,
body.single-product .ab-product-image,
body.single-product .ab-single-product-visual,
body.single-product .ab-product-gallery,
body.single .ab-product-visual,
body.single .ab-product-image,
body.single .ab-single-product-visual,
body.single .ab-product-gallery,
body.single-ab_product .ab-feature-visual.has-image,
body.single-product .ab-feature-visual.has-image,
body.single .ab-feature-visual.has-image {
width: min(100%, 760px) !important;
max-width: min(100%, 760px) !important;
height: 760px !important;
min-height: 760px !important;
max-height: 760px !important;
padding: 38px !important;
}
}
/* スマホは現状維持 */
@media (max-width: 920px) {
body.single-ab_product .ab-single-product-info,
body.single-product .ab-single-product-info,
body.single .ab-single-product-info,
body.single-ab_product .ab-product-content,
body.single-product .ab-product-content,
body.single .ab-product-content,
body.single-ab_product .entry-content,
body.single-product .entry-content,
body.single .entry-content {
padding-left: 0 !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.12.4
TOPメインビジュアル ラベル強制表示版
- 右上ラベル / 右下ラベルを表示
- Aroma Flavor / Easy Charge などの管理画面入力を反映
- PC / スマホ両対応
========================================================= */
/* メインビジュアル周辺の重なり順を整理 */
.ab-hero,
.ab-hero-cosmic-mobile,
.ab-hero.has-custom-bg,
.ab-hero-grid,
.ab-hero-inner,
.ab-hero-container,
.ab-hero-visual,
.ab-hero-image,
.ab-device-wrap,
.ab-device-wrap-v371,
.ab-device,
.hero-visual,
.hero-image,
.main-visual-image,
.main-visual-visual {
overflow: visible !important;
}
/* ラベル共通：隠れている場合も強制表示 */
.ab-float,
.ab-glow,
.float-label,
.floating-label,
.ab-hero-float,
.ab-hero-label,
.ab-device-label,
.ab-visual-label,
.ab-corner-label,
.ab-label-card,
.ab-label-top,
.ab-label-bottom,
.ab-label-right-top,
.ab-label-right-bottom,
.ab-aroma-label,
.ab-charge-label,
[class*="float-label"],
[class*="floating-label"],
[class*="hero-label"],
[class*="device-label"],
[class*="visual-label"],
[class*="corner-label"] {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: none !important;
z-index: 30 !important;
}
/* ラベルのデザイン */
.ab-float,
.float-label,
.floating-label,
.ab-hero-float,
.ab-hero-label,
.ab-device-label,
.ab-visual-label,
.ab-corner-label,
.ab-label-card,
.ab-label-top,
.ab-label-bottom,
.ab-label-right-top,
.ab-label-right-bottom,
.ab-aroma-label,
.ab-charge-label,
[class*="float-label"],
[class*="floating-label"],
[class*="hero-label"],
[class*="device-label"],
[class*="visual-label"],
[class*="corner-label"] {
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
min-height: 48px !important;
padding: 12px 22px !important;
border-radius: 999px !important;
border: 1px solid rgba(125,220,255,.58) !important;
background:
linear-gradient(180deg, rgba(5,13,36,.86), rgba(5,13,36,.62)) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px !important;
line-height: 1.25 !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
white-space: nowrap !important;
text-align: center !important;
text-decoration: none !important;
box-shadow:
0 0 0 1px rgba(236,72,153,.20),
0 0 22px rgba(56,189,248,.20),
0 12px 30px rgba(0,0,0,.30) !important;
}
/* ラベル内テキスト */
.ab-float *,
.float-label *,
.floating-label *,
.ab-hero-float *,
.ab-hero-label *,
.ab-device-label *,
.ab-visual-label *,
.ab-corner-label *,
.ab-label-card *,
.ab-label-top *,
.ab-label-bottom *,
.ab-label-right-top *,
.ab-label-right-bottom *,
.ab-aroma-label *,
.ab-charge-label *,
[class*="float-label"] *,
[class*="floating-label"] *,
[class*="hero-label"] *,
[class*="device-label"] *,
[class*="visual-label"] *,
[class*="corner-label"] * {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* 丸アイコンがある場合 */
.ab-float::before,
.float-label::before,
.floating-label::before,
.ab-hero-float::before,
.ab-hero-label::before,
.ab-device-label::before,
.ab-visual-label::before,
.ab-corner-label::before,
.ab-label-card::before,
.ab-label-top::before,
.ab-label-bottom::before,
.ab-label-right-top::before,
.ab-label-right-bottom::before,
.ab-aroma-label::before,
.ab-charge-label::before,
[class*="float-label"]::before,
[class*="floating-label"]::before,
[class*="hero-label"]::before,
[class*="device-label"]::before,
[class*="visual-label"]::before,
[class*="corner-label"]::before {
content: "" !important;
display: inline-block !important;
width: 10px !important;
height: 10px !important;
min-width: 10px !important;
border-radius: 50% !important;
background: #ffd166 !important;
box-shadow:
0 0 0 7px rgba(255,209,102,.16),
0 0 18px rgba(255,209,102,.50) !important;
}
/* PC：画像右側にラベル配置 */
@media (min-width: 769px) {
.ab-hero-visual,
.ab-hero-image,
.ab-device-wrap,
.ab-device-wrap-v371,
.ab-device,
.hero-visual,
.hero-image,
.main-visual-image,
.main-visual-visual {
position: relative !important;
}
.ab-label-right-top,
.ab-aroma-label,
.ab-hero-visual .ab-float:first-of-type,
.ab-hero-image .ab-float:first-of-type,
.ab-device-wrap .ab-float:first-of-type,
.ab-device-wrap-v371 .ab-float:first-of-type,
.hero-visual .ab-float:first-of-type,
.main-visual-image .ab-float:first-of-type {
position: absolute !important;
top: 12% !important;
right: 4% !important;
}
.ab-label-right-bottom,
.ab-charge-label,
.ab-hero-visual .ab-float:last-of-type,
.ab-hero-image .ab-float:last-of-type,
.ab-device-wrap .ab-float:last-of-type,
.ab-device-wrap-v371 .ab-float:last-of-type,
.hero-visual .ab-float:last-of-type,
.main-visual-image .ab-float:last-of-type {
position: absolute !important;
right: 4% !important;
bottom: 13% !important;
}
}
/* スマホ：ラベルを画像下にコンパクト表示 */
@media (max-width: 768px) {
.ab-float,
.float-label,
.floating-label,
.ab-hero-float,
.ab-hero-label,
.ab-device-label,
.ab-visual-label,
.ab-corner-label,
.ab-label-card,
.ab-label-top,
.ab-label-bottom,
.ab-label-right-top,
.ab-label-right-bottom,
.ab-aroma-label,
.ab-charge-label,
[class*="float-label"],
[class*="floating-label"],
[class*="hero-label"],
[class*="device-label"],
[class*="visual-label"],
[class*="corner-label"] {
position: relative !important;
inset: auto !important;
transform: none !important;
min-height: 38px !important;
padding: 9px 15px !important;
margin: 8px 8px 0 0 !important;
font-size: 12.5px !important;
line-height: 1.25 !important;
max-width: 100% !important;
}
.ab-hero-visual,
.ab-hero-image,
.ab-device-wrap,
.ab-device-wrap-v371,
.hero-visual,
.hero-image,
.main-visual-image,
.main-visual-visual {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
.ab-hero-visual img,
.ab-hero-image img,
.ab-device-wrap img,
.ab-device-wrap-v371 img,
.hero-visual img,
.hero-image img,
.main-visual-image img,
.main-visual-visual img {
flex: 0 0 100% !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.12.5
TOPメインビジュアル ラベルHTML出力対応版
- front-page.phpで出力した ab-float one/two を表示
========================================================= */
.ab-device-wrap-v371,
.ab-device-wrap {
position: relative !important;
overflow: visible !important;
}
.ab-device-wrap-v371 .ab-float,
.ab-device-wrap .ab-float,
.ab-label-right-top,
.ab-label-right-bottom {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: none !important;
z-index: 40 !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-height: 46px !important;
padding: 11px 19px !important;
border-radius: 999px !important;
border: 1px solid rgba(125,220,255,.64) !important;
background: linear-gradient(180deg, rgba(5,13,36,.88), rgba(5,13,36,.66)) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 13.5px !important;
line-height: 1.25 !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
white-space: nowrap !important;
text-align: center !important;
box-shadow:
0 0 0 1px rgba(236,72,153,.18),
0 0 22px rgba(56,189,248,.22),
0 12px 28px rgba(0,0,0,.30) !important;
}
.ab-device-wrap-v371 .ab-float::before,
.ab-device-wrap .ab-float::before,
.ab-label-right-top::before,
.ab-label-right-bottom::before {
content: "" !important;
display: inline-block !important;
width: 10px !important;
height: 10px !important;
min-width: 10px !important;
border-radius: 50% !important;
background: #ffd166 !important;
box-shadow:
0 0 0 7px rgba(255,209,102,.16),
0 0 18px rgba(255,209,102,.50) !important;
}
.ab-device-wrap-v371 .ab-float strong,
.ab-device-wrap .ab-float strong,
.ab-label-right-top strong,
.ab-label-right-bottom strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-weight: 900 !important;
}
.ab-device-wrap-v371 .ab-float span,
.ab-device-wrap .ab-float span,
.ab-label-right-top span,
.ab-label-right-bottom span {
color: rgba(255,255,255,.86) !important;
-webkit-text-fill-color: rgba(255,255,255,.86) !important;
font-weight: 700 !important;
font-size: .88em !important;
}
/* PC：商品画像の右側に表示 */
@media (min-width: 769px) {
.ab-device-wrap-v371 .ab-float.one,
.ab-device-wrap .ab-float.one,
.ab-label-right-top {
position: absolute !important;
top: 14% !important;
right: 2% !important;
}
.ab-device-wrap-v371 .ab-float.two,
.ab-device-wrap .ab-float.two,
.ab-label-right-bottom {
position: absolute !important;
right: 2% !important;
bottom: 14% !important;
}
}
/* スマホ：画像下にコンパクト表示 */
@media (max-width: 768px) {
.ab-device-wrap-v371,
.ab-device-wrap {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.ab-device-wrap-v371 .ab-v37-device-png-wrap,
.ab-device-wrap .ab-v37-device-png-wrap {
flex: 0 0 100% !important;
width: 100% !important;
}
.ab-device-wrap-v371 .ab-float,
.ab-device-wrap .ab-float,
.ab-label-right-top,
.ab-label-right-bottom {
position: relative !important;
inset: auto !important;
transform: none !important;
min-height: 38px !important;
padding: 9px 14px !important;
margin: 2px 3px 0 !important;
font-size: 12px !important;
line-height: 1.25 !important;
max-width: calc(50% - 8px) !important;
white-space: normal !important;
}
.ab-device-wrap-v371 .ab-float span,
.ab-device-wrap .ab-float span,
.ab-label-right-top span,
.ab-label-right-bottom span {
display: none !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.12.6
TOPラベル JS強制挿入版
- front-page.php差し替えが反映されない環境でも表示
- functions.phpからDOMへ直接ラベルを追加
========================================================= */
.ab-device-wrap-v371,
.ab-device-wrap,
.ab-hero-visual,
.ab-hero-image {
position: relative !important;
overflow: visible !important;
}
.ab-device-wrap-v371 .ab-float,
.ab-device-wrap .ab-float,
.ab-hero-visual .ab-float,
.ab-hero-image .ab-float,
.ab-label-right-top,
.ab-label-right-bottom,
.ab-js-hero-label {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: none !important;
z-index: 999 !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-height: 46px !important;
padding: 11px 19px !important;
border-radius: 999px !important;
border: 1px solid rgba(125,220,255,.68) !important;
background: linear-gradient(180deg, rgba(5,13,36,.92), rgba(5,13,36,.72)) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 13.5px !important;
line-height: 1.25 !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
white-space: nowrap !important;
text-align: center !important;
box-shadow:
0 0 0 1px rgba(236,72,153,.20),
0 0 22px rgba(56,189,248,.24),
0 12px 28px rgba(0,0,0,.32) !important;
}
.ab-device-wrap-v371 .ab-float::before,
.ab-device-wrap .ab-float::before,
.ab-hero-visual .ab-float::before,
.ab-hero-image .ab-float::before,
.ab-label-right-top::before,
.ab-label-right-bottom::before,
.ab-js-hero-label::before {
content: "" !important;
display: inline-block !important;
width: 10px !important;
height: 10px !important;
min-width: 10px !important;
border-radius: 50% !important;
background: #ffd166 !important;
box-shadow:
0 0 0 7px rgba(255,209,102,.16),
0 0 18px rgba(255,209,102,.50) !important;
}
.ab-device-wrap-v371 .ab-float strong,
.ab-device-wrap .ab-float strong,
.ab-hero-visual .ab-float strong,
.ab-hero-image .ab-float strong,
.ab-label-right-top strong,
.ab-label-right-bottom strong,
.ab-js-hero-label strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-weight: 900 !important;
}
.ab-device-wrap-v371 .ab-float span,
.ab-device-wrap .ab-float span,
.ab-hero-visual .ab-float span,
.ab-hero-image .ab-float span,
.ab-label-right-top span,
.ab-label-right-bottom span,
.ab-js-hero-label span {
color: rgba(255,255,255,.86) !important;
-webkit-text-fill-color: rgba(255,255,255,.86) !important;
font-weight: 700 !important;
font-size: .88em !important;
}
@media (min-width: 769px) {
.ab-device-wrap-v371 .ab-float.one,
.ab-device-wrap .ab-float.one,
.ab-hero-visual .ab-float.one,
.ab-hero-image .ab-float.one,
.ab-label-right-top {
position: absolute !important;
top: 14% !important;
right: 2% !important;
}
.ab-device-wrap-v371 .ab-float.two,
.ab-device-wrap .ab-float.two,
.ab-hero-visual .ab-float.two,
.ab-hero-image .ab-float.two,
.ab-label-right-bottom {
position: absolute !important;
right: 2% !important;
bottom: 14% !important;
}
}
@media (max-width: 768px) {
.ab-device-wrap-v371,
.ab-device-wrap,
.ab-hero-visual,
.ab-hero-image {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.ab-device-wrap-v371 .ab-v37-device-png-wrap,
.ab-device-wrap .ab-v37-device-png-wrap {
flex: 0 0 100% !important;
width: 100% !important;
}
.ab-device-wrap-v371 .ab-float,
.ab-device-wrap .ab-float,
.ab-hero-visual .ab-float,
.ab-hero-image .ab-float,
.ab-label-right-top,
.ab-label-right-bottom,
.ab-js-hero-label {
position: relative !important;
inset: auto !important;
transform: none !important;
min-height: 38px !important;
padding: 9px 14px !important;
margin: 2px 3px 0 !important;
font-size: 12px !important;
line-height: 1.25 !important;
max-width: calc(50% - 8px) !important;
white-space: normal !important;
}
.ab-device-wrap-v371 .ab-float span,
.ab-device-wrap .ab-float span,
.ab-hero-visual .ab-float span,
.ab-hero-image .ab-float span,
.ab-label-right-top span,
.ab-label-right-bottom span,
.ab-js-hero-label span {
display: none !important;
}
}
/* =========================================================
AIR BRIDGE Cosmic Vape Theme v37.8.9.12.7
リンク遷移時・スマホブラウザ動画再生安定版
========================================================= */
video,
.ab-hero video,
.hero video,
.main-visual video,
.fv video,
.ab-bg-video,
.hero-video,
.video-bg {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: none !important;
}
.ab-video-fallback,
.video-fallback {
background-size: cover !important;
background-position: center center !important;
}
/* v37.8.9.12.8 PC商品ページ：左右カラム分離・被り抑制 */
@media (min-width: 921px) {
body.single-ab_product .ab-product-detail-wrap,
body.single-product .ab-product-detail-wrap,
body.single .ab-product-detail-wrap,
body.single-ab_product .ab-product-detail,
body.single-product .ab-product-detail,
body.single .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-product .ab-single-product,
body.single .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-hero,
body.single .ab-product-hero {
display: grid !important;
grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
gap: clamp(60px, 5.5vw, 110px) !important;
align-items: start !important;
width: min(100%, 1480px) !important;
max-width: 1480px !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: visible !important;
}
body.single-ab_product .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-ab_product .ab-single-product-visual,
body.single-ab_product .ab-product-gallery,
body.single-product .ab-product-visual,
body.single-product .ab-product-image,
body.single-product .ab-single-product-visual,
body.single-product .ab-product-gallery,
body.single .ab-product-visual,
body.single .ab-product-image,
body.single .ab-single-product-visual,
body.single .ab-product-gallery,
body.single-ab_product .ab-feature-visual.has-image,
body.single-product .ab-feature-visual.has-image,
body.single .ab-feature-visual.has-image {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: clamp(500px, 40vw, 650px) !important;
aspect-ratio: 1 / 1 !important;
margin: 0 !important;
padding: clamp(26px, 3vw, 42px) !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
position: relative !important;
z-index: 1 !important;
}
body.single-ab_product .ab-product-visual img,
body.single-ab_product .ab-product-image img,
body.single-ab_product .ab-single-product-visual img,
body.single-ab_product .ab-product-gallery img,
body.single-product .ab-product-visual img,
body.single-product .ab-product-image img,
body.single-product .ab-single-product-visual img,
body.single-product .ab-product-gallery img,
body.single .ab-product-visual img,
body.single .ab-product-image img,
body.single .ab-single-product-visual img,
body.single .ab-product-gallery img,
body.single-ab_product .ab-feature-visual.has-image .ab-feature-photo,
body.single-product .ab-feature-visual.has-image .ab-feature-photo,
body.single .ab-feature-visual.has-image .ab-feature-photo {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
margin: 0 auto !important;
display: block !important;
}
body.single-ab_product .ab-single-product-info,
body.single-product .ab-single-product-info,
body.single .ab-single-product-info,
body.single-ab_product .ab-product-content,
body.single-product .ab-product-content,
body.single .ab-product-content,
body.single-ab_product .entry-content,
body.single-product .entry-content,
body.single .entry-content {
position: relative !important;
z-index: 5 !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
margin-left: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body.single-ab_product .ab-single-product-info *,
body.single-product .ab-single-product-info *,
body.single .ab-single-product-info *,
body.single-ab_product .ab-product-content *,
body.single-product .ab-product-content *,
body.single .ab-product-content *,
body.single-ab_product .entry-content *,
body.single-product .entry-content *,
body.single .entry-content * {
max-width: 100% !important;
overflow-wrap: anywhere !important;
}
body.single-ab_product h1,
body.single-ab_product .entry-title,
body.single-ab_product .ab-product-title,
body.single-product h1,
body.single-product .entry-title,
body.single-product .ab-product-title,
body.single h1.entry-title {
font-size: clamp(34px, 3.6vw, 62px) !important;
line-height: 1.12 !important;
max-width: 100% !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
}
}
@media (min-width: 921px) and (max-width: 1280px) {
body.single-ab_product .ab-product-detail-wrap,
body.single-product .ab-product-detail-wrap,
body.single .ab-product-detail-wrap,
body.single-ab_product .ab-product-detail,
body.single-product .ab-product-detail,
body.single .ab-product-detail,
body.single-ab_product .ab-single-product,
body.single-product .ab-single-product,
body.single .ab-single-product,
body.single-ab_product .ab-product-hero,
body.single-product .ab-product-hero,
body.single .ab-product-hero {
grid-template-columns: minmax(0, 43%) minmax(0, 57%) !important;
gap: 44px !important;
}
body.single-ab_product .ab-product-visual,
body.single-product .ab-product-visual,
body.single .ab-product-visual,
body.single-ab_product .ab-product-image,
body.single-product .ab-product-image,
body.single .ab-product-image {
min-height: clamp(400px, 38vw, 540px) !important;
}
}
/* Mobile spacing and product-title refinement — 2026-08-12 */
@media (max-width: 620px) {
.ab-section {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
#scene .ab-title,
#products .ab-title,
#ambassador .ab-title,
#news .ab-title {
margin-bottom: 24px !important;
}
#scene .ab-scene {
min-height: 0 !important;
padding: 22px !important;
}
#scene .ab-scene strong {
margin-bottom: 8px !important;
}
#products .ab-product-body {
gap: 8px !important;
padding: 20px !important;
}
#products .ab-cart-html {
margin-top: 12px !important;
}
#products .ab-product h3 {
line-height: 1.3 !important;
}
#feature + .ab-section,
#news {
scroll-margin-top: 70px;
}
.ab-cta {
margin-top: 36px !important;
padding: 28px 22px !important;
}
}
/* Mobile spacing and product-title refinement — 2026-08-12 */
@media (max-width: 620px) {
.ab-section {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
#scene .ab-title,
#products .ab-title,
#ambassador .ab-title,
#news .ab-title {
margin-bottom: 24px !important;
}
#scene .ab-scene {
min-height: 0 !important;
padding: 22px !important;
}
#scene .ab-scene strong {
margin-bottom: 8px !important;
}
#products .ab-product-body {
gap: 8px !important;
padding: 20px !important;
}
#products .ab-cart-html {
margin-top: 12px !important;
}
#products .ab-product h3 {
line-height: 1.3 !important;
}
#feature + .ab-section,
#news {
scroll-margin-top: 70px;
}
.ab-cta {
margin-top: 36px !important;
padding: 28px 22px !important;
}
}