@charset "UTF-8";
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Serif JP', 'Yu Mincho', serif;
color: #333;
line-height: 1.5;
overflow-x: hidden;
}
/* デフォルトは非表示 */
.only-top { display: none; }
/* JSが に is-top を付けたときだけ表示 */
html.is-top .only-top { display: block !important; }
/* Header */
header {
position: fixed;
top: 0;
width: 100%;
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 60px;
max-width: 1600px;
margin: 1em auto;
position: relative;
}
.hamburger {
width: 30px;
height: 20px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1001;
position: absolute;
left: 60px;
}
.hamburger span {
display: block;
height: 2px;
background: white;
transition: all 0.3s ease;
transform-origin: center;
}
.hamburger span:nth-child(1) {
width: 100%;
}
.hamburger span:nth-child(2) {
width: 100%;
}
.hamburger span:nth-child(3) {
width: 70%;
}
.hamburger.active span {
width: 100%;
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translateY(9px) translateX(7px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translateY(-7px) translateX(3px);
}
.logo {
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.logo h1 {
font-size: 24px;
font-weight: 300;
letter-spacing: 8px;
color: white;
margin-bottom: -6px;
}
.logo p {
font-size: 14px;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.7);
}
.logo h1 a {
color: #fff!important;
text-decoration: none!important;
}
.desktop-nav {
display: flex;
gap: 40px;
align-items: center;
position: absolute;
left: 40%;
transform: translateX(-50%);
margin-left: -250px;
}
.desktop-nav a {
text-decoration: none;
color: white;
font-size: 15px;
letter-spacing: 3px;
text-transform: uppercase;
transition: opacity 0.3s;
font-weight: 300;
}
.desktop-nav a:hover {
opacity: 0.7;
}
.header-divider {
color: rgba(255, 255, 255, 0.3);
margin: 0 15px;
}
.header-actions {
display: flex;
gap: 30px;
align-items: center;
position: absolute;
right: 15%;
}
.header-actions a {
text-decoration: none;
color: white;
font-size: 15px;
letter-spacing: 3px;
text-transform: uppercase;
transition: opacity 0.3s;
}
.header-actions a:hover {
opacity: 0.7;
}
/* Drawer Menu */
.drawer {
position: fixed;
top: 0;
left: -100%;
width: 100%;
max-width: 400px;
height: 100vh;
background: rgba(0, 0, 0, 0.98);
z-index: 999;
transition: left 0.4s ease;
overflow-y: auto;
}
.drawer.active {
left: 0;
}
.drawer-content {
padding: 100px 40px 40px;
}
.drawer-nav {
list-style: none;
}
.drawer-nav li {
margin-bottom: 30px;
opacity: 0;
transform: translateX(-20px);
transition: all 0.3s ease;
}
.drawer.active .drawer-nav li {
opacity: 1;
transform: translateX(0);
}
.drawer.active .drawer-nav li:nth-child(1) {
transition-delay: 0.1s;
}
.drawer.active .drawer-nav li:nth-child(2) {
transition-delay: 0.2s;
}
.drawer.active .drawer-nav li:nth-child(3) {
transition-delay: 0.3s;
}
.drawer.active .drawer-nav li:nth-child(4) {
transition-delay: 0.4s;
}
.drawer.active .drawer-nav li:nth-child(5) {
transition-delay: 0.5s;
}
.drawer-nav a {
color: white;
text-decoration: none;
font-size: 18px;
letter-spacing: 4px;
text-transform: uppercase;
display: block;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s;
}
.drawer-nav a:hover {
padding-left: 20px;
color: #d4af37;
}
.drawer-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.drawer-overlay.active {
opacity: 1;
pointer-events: all;
}
/* Hero Section */
.hero {
position: relative;
height: 122vh;
background: #000;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
}
.hero-texture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 2px, rgba(255,255,255,0.03) 3px), repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 2px, rgba(255,255,255,0.03) 3px);
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
}
.hero-image-container {
width: 600px;
height: 600px;
margin: 0 auto 50px;
position: relative;
animation: fadeIn 1.5s ease-out;
}
.hero-circle {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(212, 175, 55, 0.3);
box-shadow: 0 0 60px rgba(212, 175, 55, 0.2);
position: relative;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.3);
font-size: 14px;
background: url(https://www.ozu-shop.com/img/TOP_FV01.png);
background-position: center top;
background-size: contain;
}
.hero-text-right {
position: absolute;
right: -30%;
top: 38%;
transform: translateY(-50%);
/*text-align: right;*/
animation: slideInRight 1s ease-out 0.5s backwards;
}
.hero-text-right .main-title {
font-size: 37px;
letter-spacing: 24px;
writing-mode: vertical-rl;
line-height: 1.6;
font-weight: 300;
margin-bottom: 0;
}
.hero-text-right .sub-text {
font-size: 37px;
letter-spacing: 10px;
writing-mode: vertical-rl;
line-height: 1.8;
opacity: 0.9;
text-orientation: upright;
display: block;
padding-top: 7em;
}
.hero-text-right .main-title {
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 37px;
line-height: 1.6;
letter-spacing: 24px;
font-weight: 300;
margin: 0;
}
.hero-text-right .sub-text {
display: block;
/* 1行目 */
margin: -9em 0 0 0;
padding: 0;
}
.hero-text-right .tt-text {
display: block;
margin-top: 2em; /* ←「2〜3文字分」下げる（line-heightに応じて調整） */
padding-right:0; /* ←右方向へ（縦書きでいう「下げ」） */
text-indent: 1em; /* ←または段下げ的に左へ下げたい場合 */
}
.hero-text-left {
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%);
text-align: left;
animation: slideInLeft 1s ease-out 0.5s backwards;
z-index: 3;
}
.hero-text-left p {
font-size: 16px;
letter-spacing: 4px;
writing-mode: vertical-rl;
line-height: 2.2;
opacity: 0.9;
margin-bottom: 0;
font-weight: 300;
color: white;
}
.hero-tagline {
margin-top: 0;
animation: fadeIn 1.5s ease-out 1s backwards;
max-width: 1200px;
}
.hero-tagline h2 {
font-size: 34px;
letter-spacing: 20px;
font-weight: 300;
margin-bottom: 20px;
text-transform: uppercase;
}
.hero-tagline p {
font-size: 24px;
letter-spacing: 8px;
opacity: 0.9;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateY(-50%) translateX(30px);
}
to {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateY(-50%) translateX(-30px);
}
to {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}
/* About Section */
.about-section {
background: #f5f5f0;
padding: 150px 60px;
position: relative;
}
.about-container {
max-width: 1400px;
margin: 0 auto;
}
.about-header {
text-align: center;
margin-bottom: 100px;
}
.about-header h2 {
font-size: 48px;
letter-spacing: 12px;
margin-bottom: 30px;
color: #2c2c2c;
font-weight: 300;
}
.about-header p {
font-size: 18px;
letter-spacing: 4px;
color: #666;
line-height: 2;
}
.about-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px;
}
.about-card {
text-align: center;
padding: 40px;
background: white;
border: 1px solid #e0e0d8;
transition: all 0.4s ease;
}
.about-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.about-card h3 {
font-size: 32px;
letter-spacing: 8px;
margin-bottom: 20px;
color: #2c2c2c;
font-weight: 300;
}
.about-card .subtitle {
font-size: 14px;
letter-spacing: 4px;
color: #999;
margin-bottom: 30px;
}
.about-card p {
font-size: 15px;
line-height: 2;
color: #666;
}
/* Products Section */
.products-section {
background: #000;
padding: 50px 60px;
position: relative;
}
.products-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 2px, rgba(255,255,255,0.02) 3px), repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 2px, rgba(255,255,255,0.02) 3px);
opacity: 0.3;
}
.products-container {
max-width: 1600px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.section-title {
text-align: center;
font-size: 56px;
letter-spacing: 16px;
margin-bottom: 100px;
color: white;
font-weight: 400;
font-family: sans-serif;
}
.carousel-container {
position: relative;
}
.carousel-controls {
position: absolute;
top: -100px;
right: 0;
display: flex;
gap: 20px;
z-index: 10;
}
.carousel-btn {
width: 50px;
height: 50px;
background: transparent;
border: 0;
color: white;
cursor: pointer;
font-size: 20px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-btn:hover {
background: white;
color: #000;
}
.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.product-card {
background: transparent;
overflow: hidden;
transition: all 0.4s ease;
}
.product-card:hover {
transform: translateY(-10px);
}
.product-image {
width: 100%;
height: 290px;
background: #a8a8a8;
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.3);
font-size: 14px;
overflow: hidden;
position: relative;
margin-bottom: 30px;
}
.product-card:hover .product-image {
transform: scale(1.05);
}
.product-info {
padding: 0;
text-align: left;
}
.product-info h3 {
font-size: 18px;
letter-spacing: 4px;
margin-bottom: 20px;
color: white;
font-weight: 300;
}
.product-info .description {
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
line-height: 2;
margin-bottom: 25px;
letter-spacing: 1px;
}
.product-price {
font-size: 24px;
color: white;
margin-bottom: 25px;
letter-spacing: 2px;
}
.add-to-cart-btn {
width: 100%;
padding: 18px;
background: #c8102e;
color: white;
border: none;
font-size: 14px;
letter-spacing: 4px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.add-to-cart-btn:hover {
background: #a00d25;
}
.cart-icon {
font-size: 20px;
}
.view-all-link.reveal.active {
text-align: center;
padding-top: 3em;
}
.view-all-link.reveal.active a {
text-decoration: none;
color: #fff;
font-size: 44px;
font-family: sans-serif;
}
/* Footer */
footer {
/*background: #000;*/
/*color: white;*/
padding: 0;
position: relative;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 2px, rgba(255,255,255,0.02) 3px), repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 2px, rgba(255,255,255,0.02) 3px);
opacity: 0.3;
}
.footer-nav {
max-width: 1400px;
margin: 0 auto 60px;
display: flex;
justify-content: center;
gap: 80px;
padding-bottom: 60px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
z-index: 2;
}
.footer-nav a {
color: white;
text-decoration: none;
font-size: 14px;
letter-spacing: 4px;
text-transform: uppercase;
transition: opacity 0.3s;
font-weight: 300;
}
.footer-nav a:hover {
opacity: 0.6;
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.footer-bottom {
text-align: center;
padding-top: 0;
border-top: none;
}
.footer-company {
font-size: 16px;
letter-spacing: 4px;
margin-bottom: 15px;
color: white;
}
.footer-bottom p {
font-size: 11px;
color: #fff;
letter-spacing: 2px;
}
#copyright {
display: none;
}
/* Content Banners Section */
.content-banners {
background: #000;
padding: 100px 60px;
}
.banners-container {
max-width: 1600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 40px;
}
.content-banner {
display: grid;
grid-template-columns: 70% 30%;
height: 200px;
overflow: hidden;
transition: all 0.4s ease;
cursor: pointer;
}
.content-banner:hover {
transform: translateX(10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.banner-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 60px;
text-align: center;
}
.banner-1 .banner-text {
background: #7a6a55;
}
.banner-2 .banner-text {
background: #0b5793;
}
.banner-3 .banner-text {
background: #a50319;
}
.banner-4 .banner-text {
background: #607534;
}
.banner-text h3 {
font-size: 27px;
letter-spacing: normal;
margin-bottom: 15px;
color: white;
font-weight: 500;
}
.banner-text p {
font-size: 14px;
letter-spacing: 4px;
color: white;
text-transform: uppercase;
font-weight: 300;
}
.banner-image {
background-size: cover;
background-position: center;
transition: transform 0.4s ease;
}
.content-banner:hover .banner-image {
transform: scale(1.1);
}
.banner-1 .banner-image {
background: linear-gradient(135deg, #d4a574 0%, #c99660 100%);
background: url(https://www.ozu-shop.com/img/TOP_banner01.png);
}
.banner-2 .banner-image {
background: linear-gradient(135deg, #7dd3f0 0%, #5bc0de 100%);
background: url(https://www.ozu-shop.com/img/TOP_banner02.png);
}
.banner-3 .banner-image {
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
background: url(https://www.ozu-shop.com/img/TOP_banner03.png);
}
.banner-4 .banner-image {
background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
background: url(https://www.ozu-shop.com/img/TOP_banner04.png);
}
.news-section {
/*background: #000;*/
padding: 50px 60px;
}
.news-container {
max-width: 1400px;
margin: 0 auto;
}
.news-list {
list-style: none;
}
.news-item {
border-bottom: 1px solid #e8e8e0;
padding: 40px 0;
display: flex;
gap: 40px;
align-items: center;
transition: all 0.3s ease;
}
.news-item:hover {
padding-left: 20px;
background: #252525;
}
.news-date {
font-size: 14px;
letter-spacing: 2px;
color: #fff;
min-width: 120px;
}
.news-category {
font-size: 12px;
letter-spacing: 2px;
color: white;
background: #d4af37;
padding: 5px 15px;
min-width: 100px;
text-align: center;
}
.news-title {
font-size: 16px;
letter-spacing: 2px;
color: #fff;
flex-grow: 1;
}
.news-arrow {
font-size: 20px;
color: #999;
transition: transform 0.3s;
}
.news-item:hover .news-arrow {
transform: translateX(10px);
}
.desktop-nav a, .header-actions a, .logo h1, .hero-tagline h2, .banner-text p, .footer-nav a {
font-family: sans-serif;
}
.products-container, .banners-container, .news-container {
max-width: 960px;
}
.view-all-link.reveal.active a span {
font-size: 0.5em;
position: relative;
top: -10px;
}
.logo h1, .hero-tagline h2, .section-title, .footer-nav a, .desktop-nav a, .header-actions a, .view-all-link.reveal.active, .banner-text p {
transform: scaleY(0.8);
}
.view-all-link.reveal.active a:hover {
opacity: 0.8;
}
.hero-bg, .products-section, section.content-banners {
background: url(https://www.ozu-shop.com/img/bg_black.png);
}
.top_news_ft_wrap {
background: url(https://www.ozu-shop.com/img/TOP_news_bg.png), url(https://www.ozu-shop.com/img/bg_black.png);
background-position: center bottom, center;
background-size: 62%, cover;
background-repeat: no-repeat, repeat;
}
.news-container h2.section-title.reveal.active {
margin-bottom: 0;
}
/* アコーディオンのスタイル (再定義) */
.accordion-content {
color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.7s ease-in-out, padding 0.7s ease-in-out;
padding: 0 60px;
}
.accordion-content.open {
max-height: max-content; /* 開いた時の最大高さ (コンテンツに応じて調整) */
padding: 0; /* 開いた時のpadding */
}
.history-inner-flex {
max-width: 1400px; /* 全体の幅を広げます */
margin: 0 auto;
display: flex;
gap: 40px;
align-items: flex-start; /* 縦方向の揃えを調整 */
}
/* 縦中横のスタイル */
.tatechuyoko {
/* 縦書きの中で横向きに表示する */
text-orientation: upright;
writing-mode: horizontal-tb;
/* 縦中横（全角で4文字までが基準。それ以上は環境により調整が必要） */
-webkit-text-combine: horizontal;
-ms-text-combine-horizontal: all;
text-combine-upright: all;
/* 縦書きグリッドレイアウトの視覚調整 */
letter-spacing: normal;
/* 文字の幅が狭くなりすぎないよう調整 */
display: inline-block;
}
/* 左側の画像コンテナ */
.history-image-container {
flex-shrink: 0;
width: 288px; /* 画像の固定幅 */
height: 480px; /* 画像の高さ */
overflow: hidden;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.history-main-image {
width: 100%;
height: 100%;
/* アコーディオン1.jpgの画像を背景として設定 */
background: url(https://www.ozu-shop.com/img/ac_img01.jpg) no-repeat center center/cover;
transition: transform 0.5s ease;
}
/* 右側の縦書きテキストコンテナ */
.history-text-container {
flex-grow: 1;
display: flex;
justify-content: flex-end; /* テキストの塊を右寄せ */
gap: 40px; /* 縦書きの列間のスペース */
/* 縦書きの基本設定 */
writing-mode: vertical-rl;
font-family: 'Noto Serif JP', 'Yu Mincho', serif;
line-height: 2.2;
letter-spacing: 0.1em;
font-size: 16px;
padding-left: 20px; /* 画像とのスペース */
}
.history-text-col {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 40px; /* 各段落間のスペース */
min-height: 600px; /* 画像の高さに合わせる */
}
.history-text-container p {
margin: 0;
text-indent: 0;
padding-bottom: 25px;
font-weight: 300;
font-size: 14px;
}
.history-text-container p:last-child {
border-right: none;
}
.history-text-container p strong {
font-weight: 500;
color: #d4af37;
}
.history-text-container .spirit {
font-size: 18px;
font-weight: 500;
text-align: right; /* 縦書きでの中央寄せに近い効果 */
padding-top: 30px;
}
.history-image-container { display: none;}
.history-text-container {
writing-mode: horizontal-tb;
display: block;
}
.history-text-container p {
font-size: 16px;
}
.history-text-container p a {
color: #fff;
text-decoration: none;
}
.history-text-container p a:hover {
opacity: 0.8;
}
/* インティメイトケア用アコーディオンコンテンツのスタイル */
#careContent.accordion-content {
background: transparent;
}
#careContent.accordion-content.open {
max-height: 1800px; /* 開いた時の最大高さ (コンテンツに応じて調整) */
padding: 0; /* paddingは内側の要素で調整 */
}
.care-inner-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 60px 80px;
}
.care-top-image {
width: 100%;
height: 300px; /* 画像の高さ */
/* アコーディオン2.jpgのヘッダー部分を背景として設定 */
background: url(最先端インティメイトケア.jpg) no-repeat center top/cover; /* '最先端インティメイトケア.jpg'はアコーディオン2.jpgのファイル名を仮定 */
background-size: contain;
background-color: #0b5793; /* バナー2の色に合わせた背景色 */
margin-bottom: 50px;
}
.care-content-box {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.care-heading {
font-size: 28px;
font-weight: 500;
letter-spacing: 2px;
color: #fff;
margin: 60px 0 30px;
}
h3.care-heading.red-theme.odor-title-spacing {
margin-bottom: 0;
}
.care-subheading {
font-size: 16px;
font-weight: 300;
color: #ccc;
margin-bottom: 30px;
}
.care-text {
font-size: 15px;
line-height: 2;
color: #fff;
margin-bottom: 50px;
}
.care-text strong {
color: #0b5793; /* キーワード強調色 */
font-weight: 500;
}
/* 温泉文化サークル */
.care-circles {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 80px;
}
.circle-item {
width: 190px;
height: 190px;
border-radius: 50%;
border: 2px solid #ccc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
line-height: 1.5;
text-align: center;
padding: 10px;
}
.circle-item .small-text {
font-size: 14px;
color: #ccc;
display: block;
margin-top: 5px;
}
/* 成分リスト */
.ingredient-list {
text-align: left;
max-width: 600px;
margin: 40px auto;
}
.ingredient-item {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
padding-bottom: 20px;
}
.ingredient-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.ingredient-item .number {
width: 30px;
height: 30px;
background: #0b5793;
color: white;
font-size: 16px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.ingredient-info h4 {
font-size: 18px;
color: #fff;
font-weight: 500;
margin-bottom: 5px;
}
.ingredient-info p {
font-size: 13px;
color: #ccc;
line-height: 1.6;
}
/* 基本設計リスト */
.basic-design-title {
margin-top: 100px;
font-size: 24px;
}
.design-list {
list-style: none;
text-align: left;
max-width: 750px;
margin: 40px auto 0;
padding-left: 20px;
}
.design-list li {
font-size: 15px;
color: #fff;
margin-bottom: 20px;
line-height: 1.8;
}
.design-list li .dot {
color: #fff;
margin-right: 10px;
font-size: 1.2em;
}
.design-list li .text {
color: #ccc;
}
/* 日本史がひもとくインティメイトケア用 (banner-3, 赤テーマ) */
#historyCareContent.accordion-content {
background: transparent;
}
.history-care-wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 60px 80px;
text-align: center;
}
.history-care-header {
background: #a50319; /* バナー3の色 */
padding: 40px 20px;
margin: -80px -60px 50px; /* wrapのpaddingを打ち消し、全幅に近いデザイン */
}
.history-care-header h2 {
font-size: 32px;
font-weight: 500;
letter-spacing: 4px;
color: #fff;
margin-bottom: 5px;
}
.history-care-header p {
font-size: 14px;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.8);
font-weight: 300;
}
.history-care-text {
font-size: 15px;
line-height: 2;
color: #fff;
margin-bottom: 50px;
text-align: left;
}
.history-care-text strong {
color: #a50319;
font-weight: 500;
}
.red-theme {
color: #fff;
}
.red-list-container {
text-align: center;
margin-bottom: 50px;
}
.red-list {
list-style: none;
display: inline-block;
text-align: left;
color: #fff;
font-size: 15px;
line-height: 2.2;
}
.red-list li {
margin-bottom: 10px;
}
.dot-red {
color: #fff;
margin-right: 10px;
}
img.worldmap {
width: 100%;
max-width: 702px;
padding-bottom: 5%;
}
.map-placeholder, .diagram-placeholder {
/*width: 100%;
height: 300px;
background: #000;
border: 1px solid #a50319;
margin: 40px 0 80px;
display: flex;
align-items: center;
justify-content: center;
color: #a50319;
font-size: 14px; */
}
.odor-text-wrap {
text-align: left;
margin-top: 40px;
}
.odor-text-wrap p {
font-size: 15px;
color: #fff;
line-height: 2;
margin-bottom: 30px;
}
.odor-text-wrap p strong {
color: #a50319;
font-weight: 500;
display: block;
margin-bottom: 5px;
}
.history-care-text p {
text-align: center;
}
.odor-section p {
text-align: center;
}
/* ★★★ 温泉のメカニズム図のスタイルを更新 ★★★ */
.mechanism-container {
display: flex;
justify-content: center;
gap: 30px;
margin: 40px auto 80px;
max-width: 1000px;
}
.mechanism-item {
width: 33.33%;
text-align: center;
}
.mechanism-image-tag { /* ![]()
タグ用 */
width: 100%;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto 20px;
}
.mechanism-item p {
font-size: 13px;
color: #fff;
line-height: 1.8;
padding: 0 10px;
text-align: left;
}
/* フェムテック/フェムケアとは用 (banner-4, 緑テーマ) */
#femtechContent.accordion-content {
background: #607534; /* バナー4の色 */
color: #fff;
}
.femtech-wrap {
max-width: 900px;
margin: 0 auto;
padding: 80px 60px;
text-align: center;
}
.femtech-title {
font-size: 28px;
font-weight: 500;
letter-spacing: 2px;
color: #fff;
margin: 50px 0 30px;
padding-bottom: 10px;
}
.femtech-text, .ozucare-box p, .purpose-box p {
font-size: 15px;
line-height: 2;
color: #fff;
margin-bottom: 40px;
text-align: left;
}
.femtech-text strong, .ozucare-box strong, .purpose-box strong {
color: #000; /* 緑背景に黒の強調 */
background: #fff;
padding: 2px 5px;
font-weight: bold;
}
.data-image-placeholder, .chart-placeholder {
width: 100%;
height: 250px; /* 図の高さとして仮設定 */
background: #7a8d46;
margin: 40px 0 60px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
}
.ozucare-box, .purpose-box {
background: rgba(0, 0, 0, 0.1);
padding: 30px;
margin-bottom: 60px;
}
.products-grid {
grid-template-columns: repeat(2, 1fr);
}
.product-image img {
width: 100%;
}
a.add-to-cart-btn {
text-decoration: none;
font-size: 1.5em;
}
.footer_gnavi002 ul {
display: flex;
justify-content: center;
gap: 40px;
padding: 0 0 3em;
list-style: none;
}
.footer_gnavi002 ul li a {
color: #fff;
text-decoration: none;
}
.footer_gnavi002 ul li a:hover {
opacity: 0.5;
}
section#shopGuide_wrap {
background: #000;
color: #fff;
line-height:1.8;
padding-top: 10%;
}
section#shopGuide_wrap section {
max-width: 1000px;
margin: 0 auto;
}
p#page-top img {
width: 100%!important;
mix-blend-mode: difference!important;
}
#floating-menu {
bottom: 0;
}
/* レスポンシブ対応 (モバイル向け) */
@media (max-width: 968px) {
.accordion-content.open {
padding: 40px 30px;
max-height: fit-content; /* スクロール可能に */
}
.history-inner-flex {
flex-direction: column; /* 縦に並べる */
align-items: center;
gap: 30px;
}
.history-image-container {
width: 100%;
height: 350px;
}
.history-text-container {
writing-mode: horizontal-tb; /* 横書きに戻す */
line-height: 1.8;
letter-spacing: normal;
font-size: 14px;
padding-left: 0;
gap: 0;
flex-direction: column;
}
.history-text-col {
min-height: auto;
}
.history-text-container p {
text-indent: 0;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 20px;
margin-bottom: 20px;
}
.history-text-container .spirit {
text-align: left;
}
mechanism-container {
flex-direction: column;
gap: 40px;
}
.mechanism-item {
width: 100%;
}
.mechanism-image-tag {
max-height: 200px;
}
.mechanism-item p {
font-size: 14px;
}
}
.carousel-controls {
display: none;
}
.odor-title-spacing { /* 臭い原因に着目のタイトル上部の余白を調整 */
margin-top: 100px;
}
/* 臭い原因コンテンツのスタイル（新規追加） */
.odor-content-wrap {
display: flex;
max-width: 1200px;
margin: 50px auto 0;
text-align: left;
gap: 40px;
}
.odor-text-area {
width: 100%;
padding-right: 0;
}
.odor-section {
margin-bottom: 10%;
}
.odor-section h4 {
font-size: 22px;
font-weight: 500;
color: #fff;
padding-bottom: 10px;
margin-bottom: 20px;
text-align: center;
}
.odor-section h4 span {
display: inline-block;
border-bottom: 1px #fff solid;
width: 500px;
padding-bottom: 0.5em;
}
.odor-section p {
font-size: 15px;
line-height: 2;
color: #fff;
margin-bottom: 10px;
}
.odor-list {
list-style: none;
padding-left: 0;
margin-top: 20px;
}
.odor-list li {
font-size: 15px;
color: #fff;
line-height: 2;
}
/* femtechContent (アコーディオン4) のスタイル */
#femtechContent.accordion-content {
background: transparent;
color: #fff;
}
#femtechContent.accordion-content.open {
padding: 0;
}
.femtech-wrap {
max-width: 900px;
margin: 0 auto;
padding: 0 60px;
text-align: center;
}
.femtech-title {
font-size: 28px;
font-weight: 500;
letter-spacing: 2px;
color: #fff;
margin: 50px 0 30px;
padding-bottom: 10px;
}
.femtech-text {
font-size: 15px;
line-height: 2;
color: #fff;
margin-bottom: 40px;
text-align: left;
}
.femtech-text strong {
color: #000;
background: #fff;
padding: 2px 5px;
font-weight: bold;
}
.femtech-image-with-text {
display: flex;
gap: 30px;
margin-bottom: 50px;
align-items: center;
}
.femtech-image-left {
flex-shrink: 0;
width: 63%;
}
.femtech-image-left p {
text-align: left;
line-height: 2em;
}
.femtech-text-right {
flex-grow: 1;
width: 60%;
text-align: left;
}
.femtech-text-right p {
font-size: 15px;
line-height: 2;
color: #fff;
margin-bottom: 20px;
}
.full-width-image {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.full-width-image-spacing {
width: 100%;
height: auto;
display: block;
margin: 30px auto 1em;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.banner-link-box {
background: #7a8d46;
padding: 15px 20px;
}
.banner-link-box p {
font-size: 22px;
color: #fff;
letter-spacing: 1px;
margin: 0;
}
.ozucare-box {
background: rgba(0, 0, 0, 0.1);
padding: 30px;
border: 1px solid #fff;
margin-bottom: 60px;
text-align: left;
}
.ozucare-box p {
font-size: 15px;
line-height: 2;
color: #fff;
margin: 0;
}
.kadai_LR {
/*display: flex;*/
justify-content: space-between;
align-items: center;
padding-bottom: 3em;
}
.kadai_L {
width: 74%;
}
.chart-sub-text {
font-size: 14px;
color: #fff;
text-align: left;
margin-top: -20px;
margin-bottom: 20px;
}
.purpose-box-green {
background: rgb(122 141 70);
padding: 1em;
margin-bottom: 60px;
text-align: left;
}
.purpose-heading {
font-size: 18px;
font-weight: bold;
color: #fff;
margin-bottom: 15px;
}
.purpose-text {
font-size: 15px;
line-height: 2;
color: #fff;
margin: 0;
}
.company-final-text {
font-size: 26px;
line-height: 2.3;
margin-top: 50px;
margin-bottom: 0;
}
.final-text {
text-align: left;
}
p.company-final-text span {
font-size: 0.8em;
transform: scaleY(0.8);
display: block;
}
/* Responsive */
@media (max-width: 1200px) {
.hero-image-container {
width: 500px;
height: 500px;
}
.hero-text-right {
right: -120px;
}
.hero-text-right .main-title {
font-size: 42px;
letter-spacing: 18px;
}
.hero-text-right .sub-text {
font-size: 37px;
letter-spacing: 8px;
text-orientation: upright;
}
.hero-text-left {
right: 30px;
}
.hero-text-left p {
font-size: 13px;
letter-spacing: 3px;
}
.timeline::before {
left: 30px;
}
.timeline-item {
flex-direction: row !important;
}
.timeline-content {
width: calc(100% - 80px);
margin-left: 60px;
}
.timeline-item .timeline-content {
text-align: left !important;
}
.timeline-dot {
left: 30px;
}
}
@media (max-width: 968px) {
.header-container {
padding: 15px 30px;
}
.hamburger {
left: 30px;
}
.desktop-nav {
display: none;
}
.header-actions {
right: 30px;
gap: 15px;
}
.header-actions a {
font-size: 11px;
}
.logo {
position: static;
transform: none;
}
.hero-image-container {
width: 400px;
height: 400px;
}
.hero-text-right, .hero-text-left {
display: none;
}
.hero-tagline h2 {
font-size: 42px;
letter-spacing: 10px;
}
.hero-tagline p {
font-size: 18px;
}
.about-grid {
grid-template-columns: 1fr;
}
.products-grid {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
align-items: stretch;
}
.content-banner {
grid-template-columns: 1fr;
height: auto;
}
.banner-text {
padding: 40px 30px;
}
.banner-image {
height: 200px;
}
.footer-nav {
flex-direction: column;
gap: 20px;
align-items: center;
}
}
@media (max-width: 768px) {
.hero-image-container {
width: 300px;
height: 300px;
}
.hero-tagline h2 {
font-size: 32px;
letter-spacing: 6px;
}
.section-title {
font-size: 32px;
letter-spacing: 6px;
}
.products-section, .news-section, .content-banners {
padding: 80px 30px;
}
.header-actions {
gap: 15px;
}
.header-actions a {
font-size: 11px;
}
.hamburger {
left: 20px;
}
.header-actions {
right: 20px;
}
.history-header h2, .cta-container h2 {}
.carousel-controls {
top: -80px;
right: 10px;
}
.carousel-btn {
width: 40px;
height: 40px;
font-size: 16px;
}
.banner-text h3 {
font-size: 24px;
letter-spacing: 4px;
}
.banner-text p {
font-size: 11px;
letter-spacing: 2px;
}
/* femtechContent レスポンシブ */
.femtech-wrap {
padding: 0 30px;
}
.femtech-image-with-text {
flex-direction: column;
gap: 20px;
}
.femtech-image-left, .femtech-text-right {
width: 100%;
}
.femtech-image-left {
order: -1; /* 画像を上に移動 */
}
.banner-link-box {
margin-top: 20px;
margin-bottom: 40px;
}
}
/* Scroll Reveal */
.reveal {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* ---- 右側に白い隙間が出る問題の暫定パッチ ---- */
/* 横スクロールを全体で禁止 */
html, body {
width: 100%;
overflow-x: hidden;
}
/* 画像や動画・スライダー内のアイテムがはみ出さないように */
img, video, iframe {
max-width: 100%;
height: auto;
display: block;
}
/* 全ての要素の算出を安定させる */
*, *::before, *::after {
box-sizing: border-box;
}
/* 100vw の罠対策（スクロールバー幅を差し引いた “安全なvw” ）*/
:root { --safe-vw: calc(100vw - (100vw - 100%)); }
.full-bleed, .w-100vw, .kv, .hero, .swiper, .slick-slider, .slick-list {
width: var(--safe-vw) !important; /* もし100vwで指定している箇所があればこちらを適用 */
}
/* 横並び系がはみ出すのを抑止（スライダー/カルーセル/リスト等） */
.swiper, .swiper-wrapper, .slick-list, .slick-track, .carousel, .marquee {
overflow: hidden;
}
/* 位置固定UIが原因の場合（右にフローティングボタン等があるとき） */
.floating, .fix-right, .fixed-cta, .page-tools {
right: 0 !important;
max-width: 100%;
}
/* レイアウトコンテナの安全策 */
.container, .wrap, .inner {
max-width: 100%;
overflow-x: hidden;
}
#gnav {
display: none!important;
}
.footer_gnavi {
display: none!important;
}
#copyright {
display: none!important;
}
footer::before {
display: none!important;
}
footer {
padding: 0;
}
div#main-column {
background: #000;
}
header {
border-bottom: 0;
}
/* --- 特商法ページの table を見やすく（is-business フラグで限定） --- */
html.is-business section.chart table{
width:100%; border-collapse:collapse; margin-bottom:2.5em;
background:#fff; border:1px solid #e2e2e2; font-size:15px; line-height:1.6;
}
html.is-business section.chart th,
html.is-business section.chart td{
border:1px solid #e5e5e5; padding:12px 16px; vertical-align:top;
}
html.is-business section.chart th{
width:30%; background:#f9fafb; font-weight:600; color:#333; text-align:left; white-space:nowrap;
}
html.is-business section.chart td{ color:#222; }
html.is-business section.chart .ttlShop{
margin: 0 0 .8em;
padding-bottom:.3em;
border-bottom:2px solid #222;
font-size:1.2em;
font-weight:700;
padding-top: 2em;
}
/* スマホ */
/* --- 特商法ページの table を見やすく（is-business フラグで限定） --- */
@media (max-width:600px){
html.is-business section.chart table,
html.is-business section.chart tbody,
html.is-business section.chart tr,
html.is-business section.chart th,
html.is-business section.chart td{ display:block; width:100%; }
html.is-business section.chart th{
background:#f2f2f2; font-weight:700; border-bottom:none; padding:10px 12px 4px;
}
html.is-business section.chart td{
padding:6px 12px 14px; border-top:none;
}
html.is-business section.chart tr{
border:1px solid #e4e4e4; border-radius:6px; margin-bottom:14px; overflow:hidden; background:#fff;
}
}
/* ===========================
商品ページ共通スタイル
（/SHOP/～ にだけ適用）
=========================== */
html.is-product {
--gap: 16px;
--radius: 12px;
--line: 1.6;
--muted: #666;
}
/* 見出し・文字 */
html.is-product h1 {
font-size: 1.9em;
line-height: 1.3;
margin: 0 0 .6em;
font-weight: normal;
color: #fff;
}
html.is-product .price,
html.is-product [class*="price"] {
color: #c60000;
font-size: 1.1em;
font-weight: 700;
text-align: center;
}
/* レイアウト（画像と説明を横並び→SPは縦） */
@media (min-width: 900px){
html.is-product #wrapper .product-layout,
html.is-product #wrapper .item_layout,
html.is-product #wrapper .detail,
html.is-product #wrapper .itemDetail,
html.is-product #wrapper .item-detail {
display: grid;
grid-template-columns: 1.1fr .9fr; /* 画像：説明 */
gap: var(--gap);
align-items: start;
}
}
/* 画像ボックスをきれいに */
html.is-product .img_box,
html.is-product .mainimage,
html.is-product .item-photo,
html.is-product .itemPhoto {
border: 1px solid #e5e5e5;
border-radius: var(--radius);
overflow: hidden;
background: #fff;
}
html.is-product .img_box img,
html.is-product .itemPhoto img,
html.is-product .mainimage img { display:block; width:100%; height:auto; }
/* 情報ボックス */
html.is-product .info_box,
html.is-product .item-info,
html.is-product .product-info {
background: #fff;
border: 1px solid #ececec;
border-radius: var(--radius);
padding: 16px;
line-height: var(--line);
}
/* 購入ブロック（価格～カート）を目立たせる */
html.is-product .buy,
html.is-product .cart-area,
html.is-product .cartArea {
margin-top: var(--gap);
padding: 14px;
border: 1px dashed #ddd;
border-radius: var(--radius);
background: #fafafa;
margin: 2.3em 0;
}
/* カートボタン */
html.is-product input[type="submit"],
html.is-product .cart_btn,
html.is-product button[name="buy"]{
display: inline-block;
width: 100%;
padding: 14px 18px;
border: 0;
border-radius: 999px;
background: #222;
color: #fff;
font-weight: 700;
letter-spacing: .02em;
cursor: pointer;
transition: filter .2s ease;
}
html.is-product input[type="submit"]:hover,
html.is-product .cart_btn:hover { filter: brightness(1.1); }
/* 箇条書きや注意書きの読みやすさ */
html.is-product .desc,
html.is-product .explain,
html.is-product .product-detail,
html.is-product #explanation {
line-height: var(--line);
color: #222;
}
html.is-product .desc p,
html.is-product .explain p { margin: .8em 0; }
html.is-product .desc li,
html.is-product .explain li { margin: .4em 0 .4em 1.2em; }
/* 仕様テーブル整形（ある場合） */
html.is-product table {
width: 100%;
border-collapse: collapse;
margin: 1.2em 0;
font-size: 15px;
color: #fff;
}
html.is-product th, html.is-product td {
border: 1px solid #e6e6e6;
padding: 10px 14px;
vertical-align: top;
line-height: var(--line);
}
html.is-product th {
width: 40%!important;
background: #f8f8f8;
font-weight: 600;
text-align: center;
color: #000;
vertical-align: middle !important;
}
html.is-product th span.selling_price_str {
color: #333 !important;
}
/* 余白・はみ出し対策 */
html.is-product img, html.is-product video, html.is-product iframe { max-width:100%; height:auto; }
html.is-product #wrapper { overflow-x: hidden; }
.itemThumb-wrap {
}
section#itemDetail-wrap {
max-width: 600px;
margin: 0 auto;
}
ul.ico_itemType {
display: flex;
list-style: none;
padding: 1em 0;
gap: 20px;
}
.description {
color: #fff;
}
p.cancel a {
color: #fff;
margin: 1em 0;
display: block;
}
input[type="image"] {
width: 100%;
}
div#bread-crumb {
display: none;
}
html.is-product .header-container {
padding-bottom: 2em;
}
html.is-product #cartButton {
background: #962020;
}
html.is-product input[type="image"] {
mix-blend-mode: color-dodge;
}
html.is-product .cartArea:hover {
opacity: 0.7;
}
html.is-product span.sps-wishAddItem:hover {
opacity: 0.7;
}
/*TOPスマホ*/
@media (max-width: 768px) {
.header-actions {
display: none;
}
.header-container {
padding: 0;
justify-content: center;
}
.hero {
height: 90vh;
}
section#products {
padding: 0 1.4em;
}
.section-title {
margin-bottom: 15%;
}
.product-card.reveal.active {
margin-bottom: 15%;
}
.accordion-content.open {
padding: 0;
}
.care-inner-wrap {
padding: 0;
}
.care-circles {
flex-wrap: wrap;
}
.care-heading {
font-size: 1.5em;
}
p.care-text br {
display: none;
}
.history-text-col p br {
display: none;
}
.history-care-wrap {
padding: 0;
}
.mechanism-container {
flex-wrap: wrap;
}
img.mechanism-image-tag {
width: 100%;
max-height: 50vh;
}
.odor-section h4 span {
width: auto;
}
.odor-content-wrap {
gap: 0;
}
.femtech-wrap {
padding: 0;
}
.banner-link-box p {
font-size: 1em;
}
.kadai_LR {
flex-wrap: wrap;
}
.kadai_L {
width: 100%;
}
.kadai_R {
text-align: center;
margin: 0 auto;
}
span.news-date {
display: block;
}
li.news-item.reveal.active {
flex-wrap: wrap;
}
.footer_gnavi002 ul {
flex-wrap: wrap;
}
.top_news_ft_wrap {
background-size: initial;
}
.hero-bg, .products-section, section.content-banners {
background-size: cover;
background-color: #000;
}
.products-section::before {
background-color: #000;
}
section {
background-image: url("https://www.ozu-shop.com/img/lp/bg_black.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100%; /* vhではなく%に変更 */
}
html, body {
background: #000 url("https://www.ozu-shop.com/img/lp/bg_black.png") no-repeat center top;
background-size: cover;
overflow-x: hidden; /* 横スクロール防止のみに */
}
/*下層ページ*/
section#shopGuide_wrap {
padding: 1.4em;
}
/* policy.html のときだけ効く */
.is-policy section#shopGuide_wrap { padding: 21% 0; }
.is-policy section { padding: 0 1.4em; }
}
/*商品一覧ページ*/
html.is-product .column-set {
display: flex;
max-width: 1000px;
margin: 0 auto;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
html.is-product section.column4 {
max-width: 30%;
}
html.is-product span.sps-wishAddItem {
max-width: 20px;
display: none;
}
html.is-product span.badge {
display: none;
}
html.is-product section.column4:last-child {
margin-right: auto;
}
html.is-product .itemThumb-wrap-right h2 a {
font-size: 16px;
color: #fff!important;
text-decoration: none!important;
padding-bottom: 1em!important;
display: block;
}
html.is-product #itemList2 h1 {
text-align: center;
padding-top: 40px;
}
html.is-product .quantity {
color: #fff;
text-align: center;
}
.all_items {
text-align: right;
max-width: 1250px;
padding-top: 2%;
z-index: 9999;
position: relative;
}
.all_items a {
color: #fff;
font-size: 1.2em;
text-decoration: none;
}
.all_items a:hover {
opacity: 0.6!important;
}
/*ログイン*/
/* =========================
cart login.cgi styling
========================= */
@supports selector(body:has(*)) {
body:has(input[name="PWD"]) {
background: #000 url(https://www.ozu-shop.com/img/lp/bg_black.png)
no-repeat center top;
background-size: cover;
min-height: 100vh;
color: #fff;
}
/* 全テキストを白 */
body:has(input[name="PWD"]) *,
body:has(input[name="PWD"]) td,
body:has(input[name="PWD"]) th {
color: #fff;
}
/* リンクを白＋ホバー */
body:has(input[name="PWD"]) a {
color: #fff;
text-decoration: underline;
}
body:has(input[name="PWD"]) a:hover {
opacity: 0.8;
}
/* ログイン全体ブロック中央寄せ */
body:has(input[name="PWD"]) table {
margin: 0 auto;
}
/* 入力欄 */
body:has(input[name="PWD"]) input[type="text"],
body:has(input[name="PWD"]) input[type="password"] {
width: 100%;
max-width: 360px;
padding: 10px 12px;
font-size: 16px;
margin-bottom: 12px;
border-radius: 4px;
border: none;
color:#000;
}
/* ログインボタン */
body:has(input[name="PWD"]) input[type="submit"],
body:has(input[name="PWD"]) input[value="ログイン"] {
background: #fff;
color: #000;
padding: 10px 30px;
border-radius: 4px;
border: none;
cursor: pointer;
font-weight: bold;
}
body:has(input[name="PWD"]) input[value="ログイン"]:hover {
opacity: 0.85;
}
/* 下部リンク群の余白 */
body:has(input[name="PWD"]) a {
display: inline-block;
margin-top: 8px;
}
/* 閉じるボタン余白 */
body:has(input[name="PWD"]) input[value="閉じる"] {
margin-top: 24px;
color: #000;
}
}
/* ---------- Firefox fallback（title判定） ---------- */
@supports not selector(body:has(*)) {
body[title*="マイページログイン"],
body[title*="ログイン"] {
background: #000 url(https://www.ozu-shop.com/img/lp/bg_black.png)
no-repeat center top;
background-size: cover;
min-height: 100vh;
color: #fff;
}
/* 通常テキスト・リンクは白 */
body[title*="マイページログイン"] *,
body[title*="ログイン"] * {
color: #fff;
}
body[title*="マイページログイン"] a,
body[title*="ログイン"] a {
color: #fff;
text-decoration: underline;
}
/* 入力欄だけ黒文字 */
body[title*="マイページログイン"] input,
body[title*="ログイン"] input,
body[title*="マイページログイン"] textarea,
body[title*="ログイン"] textarea {
color: #000;
background: #fff;
}
}
/* =========================
CART member pages (ALL)
========================= */
@supports selector(body:has(*)) {
/* 会員系ページ共通判定 */
body:has(form[action*="newmem"]),
body:has(form[action*="forget"]) {
background: #000 url(https://www.ozu-shop.com/img/lp/bg_black.png)
no-repeat center top;
background-size: cover;
min-height: 100vh;
color: #fff;
}
/* テキスト */
body:has(form[action*="newmem"]) *,
body:has(form[action*="forget"]) * {
color: #fff;
}
/* リンク */
body:has(form[action*="newmem"]) a,
body:has(form[action*="forget"]) a {
color: #fff;
text-decoration: underline;
}
/* 入力欄だけ黒 */
body:has(input) textarea,
body:has(input) select {
color: #000!important;
background: #fff;
}
input.sps_forgetacc_confirm_button {
color: #000!important;
}
input.sps_forgetacc_login_button {
color: #000!important;
}
input {
color: #004!important;
}
}
@supports not selector(body:has(*)) {
body[title*="ログイン"],
body[title*="会員"],
body[title*="パスワード"],
body[title*="規約"] {
background: #000 url(https://www.ozu-shop.com/img/lp/bg_black.png)
no-repeat center top;
background-size: cover;
min-height: 100vh;
color: #fff;
}
body[title*="ログイン"] *,
body[title*="会員"] *,
body[title*="パスワード"] *,
body[title*="規約"] * {
color: #fff;
}
body[title*="ログイン"] a,
body[title*="会員"] a,
body[title*="パスワード"] a,
body[title*="規約"] a {
color: #fff;
text-decoration: underline;
}
body[title*="ログイン"] input,
body[title*="会員"] input,
body[title*="パスワード"] input,
body[title*="規約"] input,
body[title*="ログイン"] textarea,
body[title*="会員"] textarea {
color: #000;
background: #fff;
}
}
/* =========================================
CART member_agreement.php ONLY
（formがあっても判定できる版）
========================================= */
/* 背景＋全体文字色 */
body:has(#center3 .centerbox .mainCont) {
background: #000 url(https://www.ozu-shop.com/img/lp/bg_black.png) no-repeat center top;
background-size: cover;
color: #fff;
min-height: 100vh;
}
/* パンくず・見出し・本文 */
body:has(#center3 .centerbox .mainCont) #center3,
body:has(#center3 .centerbox .mainCont) #bread,
body:has(#center3 .centerbox .mainCont) .title1,
body:has(#center3 .centerbox .mainCont) .mainCont {
color: #fff;
}
/* リンク */
body:has(#center3 .centerbox .mainCont) a {
color: #fff;
text-decoration: underline;
}
body:has(#center3 .centerbox .mainCont) a:hover {
opacity: .85;
}
/* 余白・読みやすさ */
body:has(#center3 .centerbox .mainCont) .centerbox {
max-width: 980px;
margin: 24px auto;
padding: 0 16px;
}
body:has(#center3 .centerbox .mainCont) .mainCont {
line-height: 1.9;
font-size: 16px;
text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
/* ボタン周り */
body:has(#center3 .centerbox .mainCont) input[type="button"],
body:has(#center3 .centerbox .mainCont) input[type="submit"],
body:has(#center3 .centerbox .mainCont) button {
padding: 10px 20px;
border-radius: 6px;
border: 0;
cursor: pointer;
}
/* 入力欄は黒文字（要望） */
body:has(#center3 .centerbox .mainCont) input,
body:has(#center3 .centerbox .mainCont) textarea,
body:has(#center3 .centerbox .mainCont) select {
color: #000;
}
/* =========================================
Firefox fallback（title判定）
========================================= */
@supports not selector(body:has(*)) {
html:has(title:contains("会員規約")) body,
body {
background: #000 url(https://www.ozu-shop.com/img/lp/bg_black.png) no-repeat center top;
background-size: cover;
color:#fff;
min-height:100vh;
}
body #center3, body #bread, body .title1, body .mainCont { color:#fff; }
body a{ color:#fff; text-decoration:underline; }
body input, body textarea, body select{ color:#000; }
}
/* === おすすめ商品：見た目調整（文字は白、リンクも白） === */
#ss-recommend-anchor .pickup,
#ss-recommend-anchor .pickup * {
color: #fff;
}
#ss-recommend-anchor .pickup a {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
font-size: 18px;
letter-spacing: 4px;
margin-bottom: 20px;
font-weight: 300;
text-decoration: none;
}
#ss-recommend-anchor .pickup a:hover { opacity: .85; }
/* 見出し「おすすめ商品」は不要なら消す */
#ss-recommend-anchor .pickup > h2 { display:none; }
/* === スライダー本体 === */
#ss-recommend-anchor .pickup .column-set{
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding: 8px 0 16px;
margin: 0;
}
/* スクロールバーを薄く（好みで） */
#ss-recommend-anchor .pickup .column-set::-webkit-scrollbar{ height: 8px; }
#ss-recommend-anchor .pickup .column-set::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.25); border-radius: 999px; }
#ss-recommend-anchor .pickup .column-set::-webkit-scrollbar-track{ background: rgba(255,255,255,.08); }
/* 3枚表示：1枚の幅を「約1/3」に固定 */
#ss-recommend-anchor .pickup section.column5{
flex: 0 0 calc((100% - 48px) / 3); /* gap 24px×2 = 48px */
scroll-snap-align: start;
}
span.badge img {
display: none;
}
#ss-recommend-anchor {
padding: 3em 0;
background: url(https://www.ozu-shop.com/img/bg_black.png);
}
#ss-recommend-anchor .pickup, #ss-recommend-anchor .pickup * {
max-width: 1140px;
margin: 0 auto;
}
/* タブレット */
@media (max-width: 1024px){
#ss-recommend-anchor .pickup section.column5{
flex-basis: calc((100% - 24px) / 2);
}
}
/* スマホ */
@media (max-width: 600px){
#ss-recommend-anchor .pickup section.column5{
flex-basis: 85%;
}
}
/* 画像がでかすぎる場合の整え（必要なら） */
#ss-recommend-anchor .pickup .itemThumb img{
width: 100%;
height: auto;
display:block;
}
/* ===== おすすめ商品：3つ表示＋横スライド ===== */
#ss-recommend-anchor .pickup{
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0;
}
#ss-recommend-anchor .pickup .column-set{
display: flex;
gap: 28px;
overflow-x: auto; /* ←これが無いとscrollByが効かない */
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding-bottom: 12px;
}
/* 3枚見せ（PC） */
#ss-recommend-anchor .pickup section.column5{
flex: 0 0 calc((100% - 56px) / 3); /* gap 28px×2 = 56px */
scroll-snap-align: start;
}
/* スマホは1～2枚見せに */
@media (max-width: 900px){
#ss-recommend-anchor .pickup section.column5{ flex-basis: 80%; }
}
@media (max-width: 540px){
#ss-recommend-anchor .pickup section.column5{ flex-basis: 88%; }
}
/* ===== 右上の三角ボタンを“おすすめ商品に重ねて表示” ===== */
#ss-recommend-anchor .carousel-controls{
position: absolute;
top: 14px;
right: 14%;
z-index: 50;
display: flex;
gap: 8px;
}
#ss-recommend-anchor .carousel-btn{
width: 42px;
height: 34px;
border: 1px solid rgba(255,255,255,.35);
background: rgba(0,0,0,.35);
color: #fff;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
#ss-recommend-anchor .carousel-btn:hover{
background: rgba(0,0,0,.55);
}
/* 横スライド成立の必須 */
#ss-recommend-anchor .pickup .column-set{
display:flex;
gap:28px;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
}
/* 3枚見せ */
#ss-recommend-anchor .pickup section.column5{
flex:0 0 calc((100% - 56px)/3);
scroll-snap-align:start;
}
/* 右上ボタン（移動してきた controls に当たる） */
#ss-recommend-anchor{ position:relative; }
#ss-recommend-anchor .carousel-controls{
position:absolute;
top:14px;
right:0;
z-index:50;
display:flex;
gap:8px;
}
/* ===== おすすめ商品：スクロールバー非表示 ===== */
#ss-recommend-anchor .pickup .column-set {
-ms-overflow-style: none!important; /* IE / Edge */
scrollbar-width: none!important; /* Firefox */
}
#ss-recommend-anchor .pickup .column-set::-webkit-scrollbar {
display: none!important; /* Chrome / Safari */
}
/* =========================
ss-recommend（おすすめ商品）スマホ：1.2枚見せ（強制版）
========================= */
/* 横スクロールの入れ物 */
#ss-recommend-anchor .column-set{
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
gap: 14px !important;
padding: 0 16px !important;
scroll-snap-type: x mandatory;
}
/* 既存テーマの「float/width」などを無効化して、カード化 */
#ss-recommend-anchor .column-set > section.column5{
float: none !important;
display: block !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
scroll-snap-align: start;
}
/* 768px以下だけ 1.2枚見せ */
@media (max-width: 768px){
#ss-recommend-anchor .column-set > section.column5{
flex: 0 0 82% !important; /* ←ここで1.2枚 */
max-width: 82% !important;
}
}
/* 画像が崩れる保険 */
#ss-recommend-anchor .itemThumb img{
width: 100% !important;
height: auto !important;
display: block !important;
}
/* スクロールバー非表示（任意） */
#ss-recommend-anchor .column-set::-webkit-scrollbar{
height: 0;
}