湿気も暑さもさらっと解消空調家電

2026/06/22

/* =========================================== 空調家電特集ページスタイル prefix: ac- (air conditioning lp) ※ 管理画面のCSS入稿欄にそのまま貼り付け。 ※ GREEN ITEM ページのタイポグラフィに準拠。 =========================================== */ /* === CLAS テンプレート上書き ================================= */ body.content2 .TitleComponent h1, .TitleComponent, .TitleComponent__title { display: none !important; } p.datetime { display: none !important; } .SectionComponent { margin-top: 0 !important; } .HtmlComponent { margin-top: 0 !important; } .BlockComponent { margin: 0 !important; border-radius: 0 !important; padding: 16px 0 !important; background-color: #ffffff !important; } /* CLAS グローバル h2/h3 装飾をリセット */ .ac-lp h1, .ac-lp h2, .ac-lp h3 { border: none !important; border-bottom: none !important; padding-bottom: 0 !important; padding-left: 0 !important; margin-bottom: 0 !important; } .ac-lp h1::before, .ac-lp h1::after, .ac-lp h2::before, .ac-lp h2::after, .ac-lp h3::before, .ac-lp h3::after { display: none !important; content: none !important; } /* === 変数 / ベース =========================================== */ .ac-lp { --ac-deep: #1C3828; --ac-mid: #3B6347; --ac-accent: #5b8878; --ac-light: #edf4f2; --ac-pale: #f5faf6; --ac-text: #1a1a1a; --ac-sub: #4a4a4a; --ac-muted: #767676; --ac-border: #c8ddd8; --ac-white: #ffffff; font-family: futura-pt, arial, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif; font-weight: 300; font-size: 16px; /* ベースサイズ（PC）*/ color: var(--ac-text); line-height: 1.9; letter-spacing: calc(1em * 3 / 100); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ac-lp * { box-sizing: border-box; margin: 0; padding: 0; } .ac-lp img { display: block; width: 100%; height: auto; } .ac-lp a { text-decoration: none; color: inherit; } /* === 共通パーツ ============================================== */ /* Eyebrow ラベル */ .ac-label { display: block; font-size: 13px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; color: var(--ac-accent) !important; margin: 0 0 12px; } /* セクション見出し */ .ac-section-title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 200; color: var(--ac-deep) !important; line-height: 1.7; letter-spacing: calc(1em * 10 / 100); text-align: center; margin: 0 0 20px; } /* 本文テキスト */ .ac-text { font-size: 15px; font-weight: 300; color: var(--ac-sub); line-height: 2.1; letter-spacing: calc(1em * 4 / 100); margin: 0 0 16px; } .ac-text--center { text-align: center; max-width: 680px; margin-left: auto; margin-right: auto; } /* === ① HERO ================================================= */ .ac-hero { line-height: 0; } .ac-hero picture, .ac-hero img { width: 100%; height: auto; display: block; } /* === ② アンカーナビ（丸マスク + オーバーレイ型）============== */ .ac-anchors { padding: 36px 40px 40px; text-align: center; background: var(--ac-white); border-top: 1px solid var(--ac-border); border-bottom: 1px solid var(--ac-border); } .ac-anchor-section { margin-bottom: 32px; } .ac-anchor-section:last-child { margin-bottom: 0; } /* グループ見出し — 視認性を高める */ .ac-anchor-group-label { font-size: 13px; font-weight: 500; letter-spacing: calc(1em * 12 / 100); color: var(--ac-accent); margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--ac-border); } /* 4列グリッド — PC では少し大きめに */ .ac-anchor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 640px; margin: 0 auto; } /* リンク本体 */ .ac-anchor-item { display: block; text-decoration: none; transition: opacity 0.2s; } .ac-anchor-item:hover { opacity: 0.82; text-decoration: none; } /* 丸マスク画像 */ .ac-anchor-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; border: 2px solid var(--ac-accent); background: var(--ac-light); } .ac-anchor-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; margin: 0; } /* 画像上オーバーレイ */ .ac-anchor-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 55%; background: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 100% ); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 13%; } /* カテゴリラベル（画像上・白文字） — PC 向けに大きく */ .ac-anchor-label { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.96) !important; text-align: center; letter-spacing: calc(1em * 4 / 100); line-height: 1.4; margin: 0 0 6px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); } /* CSS chevron（白・画像上） */ .ac-anchor-arrow { display: block; width: 16px; height: 16px; font-size: 0; flex-shrink: 0; } .ac-anchor-arrow::after { content: ''; display: block; width: 7px; height: 7px; border-right: 1.5px solid rgba(255, 255, 255, 0.88); border-bottom: 1.5px solid rgba(255, 255, 255, 0.88); transform: rotate(45deg) translateY(-2px); margin: 2px auto 0; } @media (max-width: 768px) { .ac-anchors { padding: 24px 16px 28px; } .ac-anchor-grid { gap: 10px; max-width: 400px; } .ac-anchor-group-label { font-size: 12px; } .ac-anchor-label { font-size: 10px; } } /* === ③ イントロ ============================================= */ .ac-intro { padding: 64px 40px 0; text-align: center; } .ac-intro-text { font-size: 15px; font-weight: 300; color: var(--ac-sub); line-height: 2.2; letter-spacing: calc(1em * 4 / 100); max-width: 680px; margin: 0 auto 28px; } @media (max-width: 768px) { .ac-intro { padding: 40px 20px 0; } .ac-intro-text { font-size: 14px; } } /* === CLASメリットブロック ==================================== */ .ac-merit { background: var(--ac-pale); border: 1px solid var(--ac-border); border-radius: 2px; padding: 32px 40px; margin: 8px auto 64px; max-width: 760px; } .ac-merit-title { font-size: 12px; letter-spacing: calc(1em * 28 / 100); color: var(--ac-accent); font-weight: 500; text-align: center; margin: 0 0 24px; text-transform: uppercase; } .ac-merit-items { display: flex; justify-content: space-around; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .ac-merit-item { text-align: center; flex: 1; min-width: 160px; padding: 0 8px; } .ac-merit-icon { font-size: 24px; margin-bottom: 10px; } .ac-merit-text { font-size: 14px; font-weight: 300; color: var(--ac-sub); line-height: 1.85; letter-spacing: calc(1em * 2 / 100); } .ac-merit-text strong { display: block; font-size: 15px; color: var(--ac-deep); font-weight: 600; margin-bottom: 4px; letter-spacing: calc(1em * 4 / 100); } @media (max-width: 768px) { .ac-merit { padding: 24px 16px; margin-bottom: 40px; } .ac-merit-items { gap: 24px; } .ac-merit-item { min-width: 120px; } } /* === グループ区切り見出し ==================================== */ .ac-group-divider { padding: 52px 40px 16px; text-align: center; border-top: 1px solid var(--ac-border); margin-top: 40px; } .ac-group-divider-title { font-size: clamp(18px, 2vw, 22px); font-weight: 300; color: var(--ac-accent) !important; /* グリーンに変更 */ letter-spacing: calc(1em * 10 / 100); margin: 0; } .ac-group-divider-sub { font-size: 12px; font-weight: 500; letter-spacing: calc(1em * 20 / 100); color: var(--ac-accent); margin: 8px 0 0; text-transform: uppercase; } /* === カテゴリセクション共通 ================================= */ .ac-cat { padding: 64px 40px 32px; /* 余白感を保つ */ border-top: 1px solid #ddd; /* 明確な罫線でカテゴリを区切る */ margin-top: 8px; } /* カテゴリタイトル */ .ac-cat-title { font-size: clamp(19px, 2.2vw, 24px); font-weight: 200; color: var(--ac-deep) !important; text-align: center; letter-spacing: calc(1em * 10 / 100); margin: 0 0 28px; padding-bottom: 16px; border-bottom: 0.5px solid var(--ac-border); } /* カテゴリメイン画像 */ .ac-cat-image { line-height: 0; margin: 0 -40px 28px; /* 左右余白を打ち消して画像を広げる */ } .ac-cat-image img { width: 100%; height: auto; display: block; } /* フック文 */ .ac-cat-hook { font-size: 15px; font-weight: 300; color: var(--ac-sub); line-height: 2.1; letter-spacing: calc(1em * 4 / 100); margin: 0 0 24px; } /* 選ぶポイント — 枠線＋アイテム間ボーダー CMS上書き対策: .ac-lp prefix + !important + 直値で指定 */ .ac-lp .ac-feature-box { background: #f5faf6 !important; border: 1px solid #c8ddd8 !important; border-radius: 2px !important; padding: 0 !important; margin: 0 0 20px !important; overflow: hidden !important; display: block !important; } .ac-lp .ac-feature-box-title { display: block !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: #5b8878 !important; margin: 0 !important; padding: 14px 22px !important; background: #edf4f2 !important; border-bottom: 1px solid #c8ddd8 !important; border-left: none !important; border-right: none !important; border-top: none !important; line-height: 1.5 !important; } .ac-lp .ac-feature-item { display: block !important; font-size: 14px !important; font-weight: 300 !important; color: #4a4a4a !important; margin: 0 !important; padding: 14px 22px 14px 40px !important; position: relative !important; line-height: 1.85 !important; letter-spacing: 0.02em !important; border-bottom: 1px solid #c8ddd8 !important; border-left: none !important; border-right: none !important; border-top: none !important; background: transparent !important; } .ac-lp .ac-feature-item::before { content: '—' !important; position: absolute !important; left: 20px !important; top: 14px !important; color: #5b8878 !important; font-size: 14px !important; } .ac-lp .ac-feature-item:last-child { border-bottom: none !important; } /* CLASヒント */ .ac-tip-box { background: var(--ac-white); border: 1px solid var(--ac-border); border-radius: 2px; padding: 16px 20px; margin: 0 0 32px; font-size: 14px; font-weight: 300; color: var(--ac-sub); line-height: 2.0; letter-spacing: calc(1em * 2 / 100); } .ac-tip-label { display: inline-block; background: var(--ac-accent); color: #fff; font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 10 / 100); text-transform: uppercase; padding: 2px 9px; border-radius: 2px; margin-right: 8px; vertical-align: middle; } /* もっとみるボタン — シンプルピル型（アイテム一覧へと同スタイル） */ .ac-more-btn-wrap { padding: 16px 0 56px; text-align: center; } .ac-more-btn { display: inline-block; background: #ffffff; color: #2a2a2a !important; border: 0.5px solid #c0bbb4; padding: 16px 56px; border-radius: 40px; font-size: 14px; font-weight: 400; text-decoration: none; letter-spacing: calc(1em * 8 / 100); min-width: 220px; transition: border-color 0.2s, box-shadow 0.2s; } .ac-more-btn::after { content: none; /* 矢印なし・シンプルに */ } .ac-more-btn:hover { border-color: var(--ac-accent); box-shadow: 0 0 0 0.5px var(--ac-accent); color: var(--ac-accent) !important; text-decoration: none; background: #ffffff; } /* === SP（〜768px）========================================== */ @media (max-width: 768px) { .ac-lp { font-size: 15px; } .ac-group-divider { padding: 36px 20px 10px; } .ac-cat { padding: 48px 20px 20px; } /* SP では画像の打ち消しも調整 */ .ac-cat-image { margin: 0 -20px 24px; } .ac-cat-title { font-size: 17px; } .ac-cat-hook { font-size: 14px; } .ac-feature-item { font-size: 13px; padding: 12px 16px 12px 32px; } .ac-feature-item::before { left: 14px; top: 12px; } .ac-feature-box-title { padding: 12px 16px; } .ac-tip-box { font-size: 13px; } .ac-more-btn-wrap { padding: 12px 0 40px; } .ac-more-btn { font-size: 13px; padding: 14px 32px; width: 100%; max-width: 280px; min-width: unset; } }