Spaces:
Sleeping
Sleeping
| export const baseCSS = `/* ================================= | |
| ベースCSS - commonCSSから:rootブロックを削除 | |
| 色とフォントはThemeCustomizerが生成する変数を使用 | |
| ================================= */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: | |
| "YuGothic", "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Meiryo", sans-serif; | |
| line-height: 1.6; | |
| color: var(--text-primary, #222222); | |
| background-color: var(--background-tertiary, #f5f5f5); | |
| } | |
| .container { | |
| font-family: "YuGothic", "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Meiryo", sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| overflow-x: hidden; | |
| } | |
| /* セクション背景色を順番に応じて設定 */ | |
| /* 重要: .container直下のsectionタグのみを対象とする */ | |
| /* 1番目、4番目、7番目... - 白背景 */ | |
| .section-base:nth-of-type(3n+1) { | |
| background: white; | |
| padding: 80px 40px; | |
| color: #333; | |
| } | |
| /* 2番目、5番目、8番目... - グレー背景 */ | |
| .section-base:nth-of-type(3n+2) { | |
| background: var(--background-secondary, #f8f9fa); | |
| padding: 80px 40px; | |
| color: #333; | |
| } | |
| /* 3番目、6番目、9番目... - 黒背景 */ | |
| .section-base:nth-of-type(3n) { | |
| background: var(--theme-tertiary-bg, #222222); | |
| padding: 80px 40px; | |
| color: var(--theme-tertiary-text, white); | |
| } | |
| /* セクション背景色ごとのテキスト色設定 */ | |
| /* 白背景セクション（1番目、4番目、7番目...）のテキスト色 */ | |
| .section-base:nth-of-type(3n+1) { | |
| color: var(--text-primary, #222222); | |
| } | |
| /* グレー背景セクション（2番目、5番目、8番目...）のテキスト色 */ | |
| .section-base:nth-of-type(3n+2) { | |
| color: var(--text-primary, #222222); | |
| } | |
| /* 黒背景セクション（3番目、6番目、9番目...）のテキスト色 */ | |
| .section-base:nth-of-type(3n) { | |
| color: var(--theme-tertiary-text, white); | |
| } | |
| /* 黒背景セクション内の見出しやセクション直下要素は白文字を維持 */ | |
| .section-base:nth-of-type(3n) h1, | |
| .section-base:nth-of-type(3n) h2, | |
| .section-base:nth-of-type(3n) h3, | |
| .section-base:nth-of-type(3n) h4, | |
| .section-base:nth-of-type(3n) h5, | |
| .section-base:nth-of-type(3n) h6 { | |
| color: var(--theme-tertiary-text, white); | |
| } | |
| /* 黒背景セクション内の白・明るい背景カードのテキスト色を黒に設定 */ | |
| /* 注意: #5a6c7d背景の要素は除外して、それらは白文字を維持 */ | |
| .section-base:nth-of-type(3n) .innovation__item, | |
| .section-base:nth-of-type(3n) .strategy-card, | |
| .section-base:nth-of-type(3n) .pricing-card, | |
| .section-base:nth-of-type(3n) .award-item, | |
| .section-base:nth-of-type(3n) .store-content, | |
| .section-base:nth-of-type(3n) .use-case-content, | |
| .section-base:nth-of-type(3n) .comparison-item, | |
| .section-base:nth-of-type(3n) .staff-member, | |
| .section-base:nth-of-type(3n) .store-info-item, | |
| .section-base:nth-of-type(3n) .solution-benefits-section__item, | |
| .section-base:nth-of-type(3n) .special-offer-card, | |
| .section-base:nth-of-type(3n) .review-card, | |
| .section-base:nth-of-type(3n) .comparison-content, | |
| .section-base:nth-of-type(3n) .staff-content, | |
| .section-base:nth-of-type(3n) .store-item { | |
| color: var(--text-primary, #222222); | |
| } | |
| /* カード内の見出しと一般テキストを黒文字に（ただし#5a6c7d背景要素は除く） */ | |
| .section-base:nth-of-type(3n) .innovation__item h1, | |
| .section-base:nth-of-type(3n) .innovation__item h2, | |
| .section-base:nth-of-type(3n) .innovation__item h3, | |
| .section-base:nth-of-type(3n) .innovation__item h4, | |
| .section-base:nth-of-type(3n) .innovation__item h5, | |
| .section-base:nth-of-type(3n) .innovation__item h6, | |
| .section-base:nth-of-type(3n) .innovation__item p, | |
| .section-base:nth-of-type(3n) .strategy-card h1, | |
| .section-base:nth-of-type(3n) .strategy-card h2, | |
| .section-base:nth-of-type(3n) .strategy-card h3, | |
| .section-base:nth-of-type(3n) .strategy-card h4, | |
| .section-base:nth-of-type(3n) .strategy-card h5, | |
| .section-base:nth-of-type(3n) .strategy-card h6, | |
| .section-base:nth-of-type(3n) .strategy-card p, | |
| .section-base:nth-of-type(3n) .pricing-card h1, | |
| .section-base:nth-of-type(3n) .pricing-card h2, | |
| .section-base:nth-of-type(3n) .pricing-card h3, | |
| .section-base:nth-of-type(3n) .pricing-card h4, | |
| .section-base:nth-of-type(3n) .pricing-card h5, | |
| .section-base:nth-of-type(3n) .pricing-card h6, | |
| .section-base:nth-of-type(3n) .pricing-card p, | |
| .section-base:nth-of-type(3n) .award-item h1, | |
| .section-base:nth-of-type(3n) .award-item h2, | |
| .section-base:nth-of-type(3n) .award-item h3, | |
| .section-base:nth-of-type(3n) .award-item h4, | |
| .section-base:nth-of-type(3n) .award-item h5, | |
| .section-base:nth-of-type(3n) .award-item h6, | |
| .section-base:nth-of-type(3n) .award-item p, | |
| .section-base:nth-of-type(3n) .store-content h1, | |
| .section-base:nth-of-type(3n) .store-content h2, | |
| .section-base:nth-of-type(3n) .store-content h3, | |
| .section-base:nth-of-type(3n) .store-content h4, | |
| .section-base:nth-of-type(3n) .store-content h5, | |
| .section-base:nth-of-type(3n) .store-content h6, | |
| .section-base:nth-of-type(3n) .store-content p, | |
| .section-base:nth-of-type(3n) .use-case-content h1, | |
| .section-base:nth-of-type(3n) .use-case-content h2, | |
| .section-base:nth-of-type(3n) .use-case-content h3, | |
| .section-base:nth-of-type(3n) .use-case-content h4, | |
| .section-base:nth-of-type(3n) .use-case-content h5, | |
| .section-base:nth-of-type(3n) .use-case-content h6, | |
| .section-base:nth-of-type(3n) .use-case-content p, | |
| .section-base:nth-of-type(3n) .comparison-item h1, | |
| .section-base:nth-of-type(3n) .comparison-item h2, | |
| .section-base:nth-of-type(3n) .comparison-item h3, | |
| .section-base:nth-of-type(3n) .comparison-item h4, | |
| .section-base:nth-of-type(3n) .comparison-item h5, | |
| .section-base:nth-of-type(3n) .comparison-item h6, | |
| .section-base:nth-of-type(3n) .comparison-item p, | |
| .section-base:nth-of-type(3n) .staff-member h1, | |
| .section-base:nth-of-type(3n) .staff-member h2, | |
| .section-base:nth-of-type(3n) .staff-member h3, | |
| .section-base:nth-of-type(3n) .staff-member h4, | |
| .section-base:nth-of-type(3n) .staff-member h5, | |
| .section-base:nth-of-type(3n) .staff-member h6, | |
| .section-base:nth-of-type(3n) .staff-member p, | |
| .section-base:nth-of-type(3n) .store-info-item h1, | |
| .section-base:nth-of-type(3n) .store-info-item h2, | |
| .section-base:nth-of-type(3n) .store-info-item h3, | |
| .section-base:nth-of-type(3n) .store-info-item h4, | |
| .section-base:nth-of-type(3n) .store-info-item h5, | |
| .section-base:nth-of-type(3n) .store-info-item h6, | |
| .section-base:nth-of-type(3n) .store-info-item p, | |
| .section-base:nth-of-type(3n) .solution-benefits-section__item h1, | |
| .section-base:nth-of-type(3n) .solution-benefits-section__item h2, | |
| .section-base:nth-of-type(3n) .solution-benefits-section__item h3, | |
| .section-base:nth-of-type(3n) .solution-benefits-section__item h4, | |
| .section-base:nth-of-type(3n) .solution-benefits-section__item h5, | |
| .section-base:nth-of-type(3n) .solution-benefits-section__item h6, | |
| .section-base:nth-of-type(3n) .solution-benefits-section__item p, | |
| .section-base:nth-of-type(3n) .special-offer-card h1, | |
| .section-base:nth-of-type(3n) .special-offer-card h2, | |
| .section-base:nth-of-type(3n) .special-offer-card h3, | |
| .section-base:nth-of-type(3n) .special-offer-card h4, | |
| .section-base:nth-of-type(3n) .special-offer-card h5, | |
| .section-base:nth-of-type(3n) .special-offer-card h6, | |
| .section-base:nth-of-type(3n) .special-offer-card p, | |
| .section-base:nth-of-type(3n) .review-card h1, | |
| .section-base:nth-of-type(3n) .review-card h2, | |
| .section-base:nth-of-type(3n) .review-card h3, | |
| .section-base:nth-of-type(3n) .review-card h4, | |
| .section-base:nth-of-type(3n) .review-card h5, | |
| .section-base:nth-of-type(3n) .review-card h6, | |
| .section-base:nth-of-type(3n) .review-card p, | |
| .section-base:nth-of-type(3n) .comparison-content h1, | |
| .section-base:nth-of-type(3n) .comparison-content h2, | |
| .section-base:nth-of-type(3n) .comparison-content h3, | |
| .section-base:nth-of-type(3n) .comparison-content h4, | |
| .section-base:nth-of-type(3n) .comparison-content h5, | |
| .section-base:nth-of-type(3n) .comparison-content h6, | |
| .section-base:nth-of-type(3n) .comparison-content p, | |
| .section-base:nth-of-type(3n) .staff-content h1, | |
| .section-base:nth-of-type(3n) .staff-content h2, | |
| .section-base:nth-of-type(3n) .staff-content h3, | |
| .section-base:nth-of-type(3n) .staff-content h4, | |
| .section-base:nth-of-type(3n) .staff-content h5, | |
| .section-base:nth-of-type(3n) .staff-content h6, | |
| .section-base:nth-of-type(3n) .staff-content p, | |
| .section-base:nth-of-type(3n) .store-item h1, | |
| .section-base:nth-of-type(3n) .store-item h2, | |
| .section-base:nth-of-type(3n) .store-item h3, | |
| .section-base:nth-of-type(3n) .store-item h4, | |
| .section-base:nth-of-type(3n) .store-item h5, | |
| .section-base:nth-of-type(3n) .store-item h6, | |
| .section-base:nth-of-type(3n) .store-item p { | |
| color: var(--text-primary, #222222); | |
| } | |
| /* 白背景セクション内のカードの背景を白にして可読性確保 */ | |
| .section-base:nth-of-type(3n+1) .flow-step, | |
| .section-base:nth-of-type(3n+1) .product-detail-item, | |
| .section-base:nth-of-type(3n+1) .faq-item, | |
| .section-base:nth-of-type(3n+1) .media-item, | |
| .section-base:nth-of-type(3n+1) .news-item, | |
| .section-base:nth-of-type(3n+1) .simulation-card { | |
| background: white; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| } | |
| /* グレー背景セクション内のカードの背景を白にして可読性確保 */ | |
| .section-base:nth-of-type(3n+2) .flow-step, | |
| .section-base:nth-of-type(3n+2) .product-detail-item, | |
| .section-base:nth-of-type(3n+2) .faq-item, | |
| .section-base:nth-of-type(3n+2) .media-item, | |
| .section-base:nth-of-type(3n+2) .news-item, | |
| .section-base:nth-of-type(3n+2) .simulation-card { | |
| background: white; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| } | |
| /* 黒背景セクション内のカードの背景を白にして可読性確保 */ | |
| .section-base:nth-of-type(3n) .flow-step, | |
| .section-base:nth-of-type(3n) .product-detail-item, | |
| .section-base:nth-of-type(3n) .faq-item, | |
| .section-base:nth-of-type(3n) .media-item, | |
| .section-base:nth-of-type(3n) .news-item { | |
| background: white; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| } | |
| /* 白・グレー背景セクション内のカードのテキスト色を黒に設定 */ | |
| .section-base:nth-of-type(3n+1) .flow-step *, | |
| .section-base:nth-of-type(3n+1) .product-detail-item *, | |
| .section-base:nth-of-type(3n+1) .faq-item *, | |
| .section-base:nth-of-type(3n+1) .media-item *, | |
| .section-base:nth-of-type(3n+1) .news-item *, | |
| .section-base:nth-of-type(3n+1) .simulation-card *, | |
| .section-base:nth-of-type(3n+2) .flow-step *, | |
| .section-base:nth-of-type(3n+2) .product-detail-item *, | |
| .section-base:nth-of-type(3n+2) .faq-item *, | |
| .section-base:nth-of-type(3n+2) .media-item *, | |
| .section-base:nth-of-type(3n+2) .news-item *, | |
| .section-base:nth-of-type(3n+2) .simulation-card * { | |
| color: var(--text-primary, #222222); | |
| } | |
| /* 黒背景セクション内のカードのテキスト色を黒に設定 */ | |
| .section-base:nth-of-type(3n) .flow-step *, | |
| .section-base:nth-of-type(3n) .product-detail-item *, | |
| .section-base:nth-of-type(3n) .faq-item *, | |
| .section-base:nth-of-type(3n) .media-item *, | |
| .section-base:nth-of-type(3n) .news-item *, | |
| .section-base:nth-of-type(3n) .simulation-card * { | |
| color: var(--text-primary, #222222); | |
| } | |
| /* 白・グレー背景セクションのタイトル色を明示的に設定 */ | |
| .section-base:nth-of-type(3n+1) h1, | |
| .section-base:nth-of-type(3n+1) h2, | |
| .section-base:nth-of-type(3n+1) h3, | |
| .section-base:nth-of-type(3n+2) h1, | |
| .section-base:nth-of-type(3n+2) h2, | |
| .section-base:nth-of-type(3n+2) h3 { | |
| color: var(--text-primary, #222222); | |
| } | |
| /* グレー背景セクション内のグレー背景カードでテキストが見えない問題を修正 */ | |
| .section-base:nth-of-type(3n+2) .solution-benefits-section__item *, | |
| .section-base:nth-of-type(3n+2) .special-offer-card *, | |
| .section-base:nth-of-type(3n+2) .review-card *, | |
| .section-base:nth-of-type(3n+2) .comparison-content *, | |
| .section-base:nth-of-type(3n+2) .staff-content *, | |
| .section-base:nth-of-type(3n+2) .store-item * { | |
| color: var(--text-primary, #222222); | |
| } | |
| /* Global Strategy Section */ | |
| .global-strategy { | |
| padding: 80px 40px; | |
| } | |
| .global-strategy-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .global-strategy-title { | |
| font-size: 32px; | |
| font-weight: 700; | |
| margin-bottom: 40px; | |
| color: var(--text-primary, #222222); | |
| text-align: center; | |
| } | |
| .strategy-card { | |
| max-width: 800px; | |
| margin: 0 auto 40px; | |
| background: white; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| } | |
| .strategy-image { | |
| width: 100%; | |
| height: 300px; | |
| object-fit: cover; | |
| margin-bottom: 8px; | |
| } | |
| .strategy-content { | |
| padding: 30px; | |
| } | |
| .strategy-subtitle { | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| color: var(--text-secondary, #34495e); | |
| } | |
| .strategy-text { | |
| font-size: 16px; | |
| line-height: 1.6; | |
| margin-bottom: 15px; | |
| color: #555; | |
| } | |
| .strategy-note { | |
| font-size: 12px; | |
| color: #999; | |
| margin-top: 10px; | |
| } | |
| /* Simulation Section */ | |
| .simulation-section { | |
| padding: 80px 40px; | |
| } | |
| .simulation-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .simulation-title { | |
| color: white; | |
| font-size: 28px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 40px; | |
| } | |
| .simulation-card { | |
| background: white; | |
| border-radius: 4px; | |
| padding: 30px; | |
| margin-bottom: 30px; | |
| text-align: center; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| } | |
| .simulation-intro { | |
| color: white; | |
| font-size: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .simulation-content { | |
| color: rgba(255, 255, 255, 0.9); | |
| font-size: 14px; | |
| line-height: 1.6; | |
| margin-bottom: 20px; | |
| text-align: left; | |
| } | |
| .simulation-button { | |
| width: 100%; | |
| background: var(--primary-color, #5a6c7d); | |
| color: white; | |
| padding: 15px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| margin-bottom: 15px; | |
| } | |
| .simulation-notes { | |
| font-size: 12px; | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| /* Innovation Section - BEM命名規則準拠 */ | |
| .innovation { | |
| padding: 80px 40px; | |
| } | |
| .innovation__container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .innovation__title { | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| color: #222; | |
| } | |
| .innovation__item { | |
| max-width: 800px; | |
| margin: 0 auto 40px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| background: #fff; | |
| border-radius: 4px; | |
| padding: 30px; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| } | |
| .innovation__number { | |
| font-size: 48px; | |
| font-weight: 900; | |
| color: var(--primary-color, #5a6c7d); | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .innovation__content { | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .innovation__image { | |
| width: 100%; | |
| margin-bottom: 8px; | |
| } | |
| .innovation__subtitle { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| color: var(--text-secondary, #34495e); | |
| } | |
| .innovation__text { | |
| font-size: 14px; | |
| line-height: 1.6; | |
| color: #555; | |
| } | |
| /* Content Image - Generic image class */ | |
| .content-image { | |
| width: 100%; | |
| margin-bottom: 8px; | |
| } | |
| /* Product Details Section */ | |
| .product-details-section { | |
| padding: 80px 40px; | |
| } | |
| .product-details-container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .product-details-title { | |
| color: white; | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .product-details-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .product-detail-item { | |
| margin-bottom: 40px; | |
| background: white; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| border-radius: 4px; | |
| padding: 25px; | |
| } | |
| .product-detail-image { | |
| width: 100%; | |
| height: 240px; | |
| object-fit: cover; | |
| border-radius: 4px; | |
| margin-bottom: 50px; | |
| } | |
| .product-detail-subtitle { | |
| color: white; | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| } | |
| .product-detail-text { | |
| color: rgba(255, 255, 255, 0.9); | |
| font-size: 14px; | |
| line-height: 1.6; | |
| } | |
| /* Special Offer Section */ | |
| .special-offer-section { | |
| padding: 80px 40px; | |
| } | |
| .special-offer-container { | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .special-offer-title { | |
| font-size: 28px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 40px; | |
| color: var(--text-primary, #222222); | |
| } | |
| .special-offer-card { | |
| background: var(--background-secondary, #f8f9fa); | |
| border-radius: 4px; | |
| padding: 40px; | |
| text-align: center; | |
| border: 2px solid var(--primary-color, #5a6c7d); | |
| color: #333; | |
| } | |
| .special-offer-intro { | |
| font-size: 16px; | |
| margin-bottom: 25px; | |
| line-height: 1.6; | |
| color: #555; | |
| } | |
| .special-offer-content { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 25px; | |
| color: var(--text-primary, #222222); | |
| } | |
| .special-offer-button { | |
| width: 100%; | |
| background: var(--primary-color, #5a6c7d); | |
| color: white; | |
| padding: 18px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| margin-bottom: 20px; | |
| } | |
| .micro-copy { | |
| font-size: 12px; | |
| font-weight: 400; | |
| opacity: 0.8; | |
| } | |
| .special-offer-notes { | |
| font-size: 12px; | |
| color: #999; | |
| text-align: center; | |
| } | |
| /* Pricing Section */ | |
| .pricing-section { | |
| padding: 80px 40px; | |
| } | |
| .pricing-container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .pricing-title { | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| color: var(--text-primary, #222222); | |
| } | |
| .pricing-cards { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .pricing-card { | |
| background: white; | |
| border-radius: 4px; | |
| padding: 30px; | |
| text-align: center; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| } | |
| .pricing-card-title { | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin-bottom: 20px; | |
| color: var(--text-secondary, #34495e); | |
| } | |
| .pricing-card-price { | |
| font-size: 32px; | |
| font-weight: 700; | |
| margin-bottom: 20px; | |
| color: var(--text-primary, #222222); | |
| } | |
| .pricing-card-description { | |
| font-size: 14px; | |
| line-height: 1.6; | |
| color: #555; | |
| } | |
| /* Usage Flow Section */ | |
| .usage-flow-section { | |
| padding: 80px 40px; | |
| } | |
| .usage-flow-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .usage-flow-title { | |
| color: white; | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .usage-flow-content { | |
| position: relative; | |
| } | |
| .flow-step { | |
| margin-bottom: 60px; | |
| position: relative; | |
| background: white; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| border-radius: 4px; | |
| padding: 25px; | |
| } | |
| .flow-step:not(:last-child)::after { | |
| content: "▼"; | |
| position: absolute; | |
| bottom: -45px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 16px; | |
| color: var(--primary-color, #5a6c7d); | |
| background: rgba(90, 108, 125, 0.2); | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .flow-number { | |
| color: white; | |
| font-size: 36px; | |
| font-weight: 700; | |
| margin-bottom: 15px; | |
| text-align: center; | |
| } | |
| .flow-image { | |
| width: 100%; | |
| height: 240px; | |
| object-fit: cover; | |
| border-radius: 4px; | |
| margin-bottom: 50px; | |
| } | |
| .flow-subtitle { | |
| color: white; | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| text-align: center; | |
| } | |
| .flow-text { | |
| color: rgba(255, 255, 255, 0.9); | |
| font-size: 14px; | |
| line-height: 1.6; | |
| margin-bottom: 10px; | |
| text-align: center; | |
| } | |
| .flow-note { | |
| color: rgba(255, 255, 255, 0.6); | |
| font-size: 12px; | |
| text-align: center; | |
| } | |
| /* Success Stories Section */ | |
| .success-stories-section { | |
| padding: 80px 40px; | |
| } | |
| .success-stories-container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .success-stories-title { | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| color: var(--text-primary, #222222); | |
| } | |
| .success-stories-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| display: grid; | |
| gap: 30px; | |
| } | |
| .review-card { | |
| background: var(--background-secondary, #f8f9fa); | |
| border-radius: 4px; | |
| padding: 25px; | |
| margin-bottom: 25px; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| color: #333; | |
| } | |
| .review-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .review-avatar { | |
| width: 50px; | |
| height: 50px; | |
| background: var(--primary-color, #5a6c7d); | |
| color: white; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| } | |
| .review-headline { | |
| font-size: 16px; | |
| font-weight: 600; | |
| flex: 1; | |
| color: var(--text-secondary, #34495e); | |
| } | |
| .review-text { | |
| font-size: 14px; | |
| line-height: 1.6; | |
| margin-bottom: 15px; | |
| color: #555; | |
| } | |
| .review-attribution { | |
| text-align: right; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--primary-color, #5a6c7d); | |
| } | |
| /* Use Cases Section */ | |
| .use-cases-section { | |
| padding: 80px 40px; | |
| } | |
| .use-cases-container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .use-cases-title { | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| color: var(--text-primary, #222222); | |
| } | |
| .use-cases-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .use-case-item { | |
| margin-bottom: 30px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| } | |
| .use-case-header { | |
| background: var(--primary-color, #5a6c7d); | |
| color: white; | |
| padding: 20px 25px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .use-case-content { | |
| background: white; | |
| padding: 25px; | |
| } | |
| .use-case-text { | |
| font-size: 14px; | |
| line-height: 1.6; | |
| margin-bottom: 15px; | |
| color: #555; | |
| } | |
| .use-case-notes { | |
| font-size: 12px; | |
| color: #999; | |
| } | |
| /* Solution Benefits Section */ | |
| .solution-benefits-section { | |
| padding: 80px 40px; | |
| } | |
| .solution-benefits-section__container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .solution-benefits-section__title { | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| color: #222; | |
| } | |
| .solution-benefits-section__items { | |
| max-width: 800px; | |
| margin: 0 auto 40px; | |
| display: grid; | |
| gap: 30px; | |
| } | |
| .solution-benefits-section__item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| padding: 25px; | |
| background: var(--background-secondary, #f8f9fa); | |
| border-radius: 4px; | |
| margin-bottom: 20px; | |
| color: #333; | |
| } | |
| .solution-benefits-section__header { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .solution-benefits-section__icon { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--primary-color, #5a6c7d); | |
| color: #fff; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| font-size: 18px; | |
| } | |
| .solution-benefits-section__item-title { | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin: 0; | |
| color: #222222; | |
| line-height: 1.3; | |
| flex: 1; | |
| text-align: left; | |
| } | |
| .solution-benefits-section__text { | |
| font-size: 15px; | |
| line-height: 1.6; | |
| color: #555; | |
| } | |
| .solution-benefits-section__note { | |
| font-size: 12px; | |
| color: #999; | |
| display: block; | |
| margin-top: 8px; | |
| } | |
| /* FAQ Section */ | |
| .faq-section { | |
| padding: 80px 40px; | |
| } | |
| .faq-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .faq-title { | |
| color: white; | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .faq-content { | |
| display: grid; | |
| gap: 20px; | |
| } | |
| .faq-item { | |
| background: white; | |
| border-radius: 4px; | |
| padding: 25px; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| } | |
| .faq-question { | |
| color: white; | |
| font-size: 16px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| cursor: pointer; | |
| } | |
| .faq-answer { | |
| display: none; | |
| } | |
| .faq-answer-text { | |
| color: rgba(255, 255, 255, 0.8); | |
| font-size: 14px; | |
| line-height: 1.6; | |
| } | |
| /* Comparison Section */ | |
| .comparison-section { | |
| padding: 80px 40px; | |
| } | |
| .comparison-container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .comparison-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| background: var(--background-secondary, #f8f9fa); | |
| border-radius: 4px; | |
| padding: 40px; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| color: #333; | |
| } | |
| .comparison-title { | |
| font-size: 28px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 40px; | |
| color: var(--text-primary, #222222); | |
| } | |
| .comparison-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| padding: 20px; | |
| background: white; | |
| border-radius: 4px; | |
| } | |
| .comparison-item:nth-child(even) { | |
| flex-direction: row-reverse; | |
| } | |
| .comparison-icon { | |
| width: 50px; | |
| height: 50px; | |
| background: var(--primary-color, #5a6c7d); | |
| color: white; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| font-size: 20px; | |
| color: white; | |
| } | |
| .comparison-item-content { | |
| flex: 1; | |
| } | |
| .comparison-subtitle { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: var(--text-secondary, #34495e); | |
| } | |
| .comparison-text { | |
| font-size: 14px; | |
| line-height: 1.6; | |
| color: #555; | |
| } | |
| /* Awards Section */ | |
| .awards-section { | |
| padding: 80px 40px; | |
| } | |
| .awards-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .awards-main-title { | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| color: var(--text-primary, #222222); | |
| } | |
| .awards-content { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .award-item { | |
| margin-bottom: 40px; | |
| text-align: center; | |
| background: white; | |
| border-radius: 4px; | |
| padding: 30px; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| } | |
| .award-wreath { | |
| position: relative; | |
| display: inline-block; | |
| margin-bottom: 20px; | |
| } | |
| .award-title { | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| color: var(--text-primary, #222222); | |
| } | |
| .award-description { | |
| font-size: 14px; | |
| line-height: 1.6; | |
| color: #555; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| /* Media Section */ | |
| .media-section { | |
| padding: 80px 40px; | |
| } | |
| .media-container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .media-title { | |
| color: white; | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .media-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .media-item { | |
| margin-bottom: 40px; | |
| padding: 25px; | |
| background: white; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| border-radius: 4px; | |
| } | |
| .media-subtitle { | |
| color: white; | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| } | |
| .media-text { | |
| color: rgba(255, 255, 255, 0.8); | |
| font-size: 14px; | |
| line-height: 1.6; | |
| } | |
| /* Staff Section */ | |
| .staff-section { | |
| padding: 80px 40px; | |
| } | |
| .staff-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .staff-title { | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| color: var(--text-primary, #222222); | |
| } | |
| .staff-content { | |
| background: var(--background-secondary, #f8f9fa); | |
| border-radius: 4px; | |
| padding: 30px; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| color: #333; | |
| } | |
| .staff-member { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| padding: 25px; | |
| background: white; | |
| border-radius: 4px; | |
| } | |
| .staff-member:last-child { | |
| margin-bottom: 0; | |
| } | |
| .staff-avatar { | |
| width: 80px; | |
| height: 80px; | |
| background: var(--primary-color, #5a6c7d); | |
| color: white; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 32px; | |
| color: white; | |
| margin: 0 auto 20px; | |
| } | |
| .staff-name { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: var(--text-secondary, #34495e); | |
| } | |
| .staff-intro { | |
| font-size: 14px; | |
| font-weight: 500; | |
| margin-bottom: 15px; | |
| color: #666; | |
| } | |
| .staff-bio { | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: #555; | |
| text-align: left; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| /* Store Section */ | |
| .store-section { | |
| padding: 80px 40px; | |
| } | |
| .store-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .store-title { | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| color: var(--text-primary, #222222); | |
| } | |
| .store-content { | |
| background: white; | |
| border-radius: 4px; | |
| padding: 30px; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| } | |
| .store-item { | |
| margin-bottom: 40px; | |
| padding: 25px; | |
| background: var(--background-tertiary, #f9fafb); | |
| border-radius: 4px; | |
| color: #333; | |
| } | |
| .store-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .store-map { | |
| width: 100%; | |
| height: 200px; | |
| background: var(--primary-color, #5a6c7d); | |
| color: white; | |
| border-radius: 4px; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 14px; | |
| font-weight: 500; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .store-map::before { | |
| content: "📍"; | |
| font-size: 40px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| opacity: 0.7; | |
| } | |
| .store-name { | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| color: var(--text-primary, #222222); | |
| } | |
| .store-intro { | |
| font-size: 14px; | |
| line-height: 1.6; | |
| margin-bottom: 20px; | |
| color: #555; | |
| } | |
| .store-info { | |
| border-top: 1px solid var(--border-secondary, #e5e7eb); | |
| padding-top: 20px; | |
| } | |
| .store-info-item { | |
| margin-bottom: 15px; | |
| padding: 15px; | |
| background: white; | |
| border-radius: 4px; | |
| border-left: 3px solid var(--primary-color, #5a6c7d); | |
| } | |
| .store-info-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .store-info-label { | |
| font-size: 12px; | |
| color: #666; | |
| margin-bottom: 5px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: 600; | |
| } | |
| .store-info-value { | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--text-primary, #222222); | |
| line-height: 1.6; | |
| } | |
| /* News Section */ | |
| .news-section { | |
| padding: 80px 40px; | |
| } | |
| .news-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .news-title { | |
| color: white; | |
| font-size: 32px; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .news-content { | |
| display: grid; | |
| gap: 20px; | |
| } | |
| .news-item { | |
| background: white; | |
| border: 1px solid var(--border-primary, #e9ecef); | |
| border-radius: 4px; | |
| padding: 25px; | |
| } | |
| .news-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| margin-bottom: 15px; | |
| flex-wrap: wrap; | |
| } | |
| .news-date { | |
| background: var(--primary-color, #5a6c7d); | |
| color: white; | |
| padding: 6px 12px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .news-category { | |
| background: var(--theme-category-tag-bg, #f59e0b); | |
| color: var(--theme-category-tag-text, white); | |
| padding: 6px 12px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .news-title-text { | |
| color: white; | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| line-height: 1.4; | |
| } | |
| .news-summary { | |
| color: rgba(255, 255, 255, 0.8); | |
| font-size: 14px; | |
| line-height: 1.6; | |
| } | |
| .news-more { | |
| text-align: center; | |
| margin-top: 40px; | |
| } | |
| .news-more-button { | |
| background: var(--primary-color, #5a6c7d); | |
| color: white; | |
| padding: 12px 25px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| .news-more-button::after { | |
| content: " →"; | |
| font-size: 14px; | |
| } | |
| /* Footer */ | |
| .footer { | |
| background: var(--theme-primary-color, #34495e); | |
| color: var(--theme-inverse-text, white); | |
| padding: 60px 40px 30px; | |
| position: relative; | |
| } | |
| .back-to-top { | |
| position: absolute; | |
| top: -20px; | |
| right: 40px; | |
| } | |
| .back-to-top button { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--primary-color, #5a6c7d); | |
| border: none; | |
| color: white; | |
| font-size: 16px; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .footer-content { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .social-icons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-bottom: 40px; | |
| } | |
| .social-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 16px; | |
| font-weight: bold; | |
| text-decoration: none; | |
| } | |
| .footer-nav { | |
| max-width: 600px; | |
| margin: 0 auto 40px; | |
| } | |
| .footer-nav-item { | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .footer-nav-link { | |
| color: white; | |
| text-decoration: none; | |
| padding: 15px 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .arrow { | |
| font-size: 14px; | |
| } | |
| .footer-links { | |
| max-width: 600px; | |
| margin: 0 auto 40px; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 10px; | |
| } | |
| .footer-link { | |
| color: rgba(255, 255, 255, 0.7); | |
| text-decoration: none; | |
| font-size: 13px; | |
| padding: 8px 0; | |
| } | |
| .copyright { | |
| text-align: center; | |
| font-size: 12px; | |
| color: rgba(255, 255, 255, 0.5); | |
| padding-top: 30px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 1024px) { | |
| .global-strategy, | |
| .simulation-section, | |
| .solution-benefits-section, | |
| .innovation, | |
| .product-details-section, | |
| .special-offer-section, | |
| .pricing-section, | |
| .usage-flow-section, | |
| .success-stories-section, | |
| .use-cases-section, | |
| .faq-section, | |
| .comparison-section, | |
| .awards-section, | |
| .media-section, | |
| .staff-section, | |
| .store-section, | |
| .news-section { | |
| padding: 60px 20px; | |
| } | |
| .innovation__item, | |
| .comparison-item, | |
| .solution-benefits-section__item { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .pricing-cards { | |
| grid-template-columns: 1fr; | |
| } | |
| .footer { | |
| padding: 40px 20px 20px; | |
| } | |
| .back-to-top { | |
| right: 20px; | |
| } | |
| .footer-links { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .global-strategy, | |
| .simulation-section, | |
| .solution-benefits-section, | |
| .innovation, | |
| .product-details-section, | |
| .special-offer-section, | |
| .pricing-section, | |
| .usage-flow-section, | |
| .success-stories-section, | |
| .use-cases-section, | |
| .faq-section, | |
| .comparison-section, | |
| .awards-section, | |
| .media-section, | |
| .staff-section, | |
| .store-section, | |
| .news-section { | |
| padding: 60px 15px; | |
| } | |
| .solution-benefits-section__item { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .footer { | |
| padding: 40px 15px 20px; | |
| } | |
| .back-to-top { | |
| right: 15px; | |
| } | |
| .back-to-top button { | |
| width: 30px; | |
| height: 30px; | |
| font-size: 14px; | |
| } | |
| .social-icon { | |
| width: 30px; | |
| height: 30px; | |
| font-size: 14px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .innovation__number { | |
| font-size: 36px; | |
| } | |
| .simulation-card, | |
| .special-offer-card { | |
| padding: 20px; | |
| } | |
| .staff-avatar { | |
| width: 60px; | |
| height: 60px; | |
| font-size: 24px; | |
| } | |
| } | |
| /* JavaScript for interactive elements */ | |
| .faq-item.open .faq-answer { | |
| display: block; | |
| } | |
| /* scroll to top function styles */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* #5a6c7d背景の要素は必ず白文字にする - セクションルールより優先 */ | |
| /* 高い特異性で全セクションに対応 */ | |
| .section-base .simulation-button, | |
| .section-base:nth-of-type(3n+1) .simulation-button, | |
| .section-base:nth-of-type(3n+2) .simulation-button, | |
| .section-base:nth-of-type(3n) .simulation-button { | |
| color: white; | |
| } | |
| .section-base .solution-benefits-section__icon, | |
| .section-base:nth-of-type(3n+1) .solution-benefits-section__icon, | |
| .section-base:nth-of-type(3n+2) .solution-benefits-section__icon, | |
| .section-base:nth-of-type(3n) .solution-benefits-section__icon { | |
| color: white; | |
| } | |
| .section-base .special-offer-button, | |
| .section-base:nth-of-type(3n+1) .special-offer-button, | |
| .section-base:nth-of-type(3n+2) .special-offer-button, | |
| .section-base:nth-of-type(3n) .special-offer-button { | |
| color: white; | |
| } | |
| .section-base .review-avatar, | |
| .section-base:nth-of-type(3n+1) .review-avatar, | |
| .section-base:nth-of-type(3n+2) .review-avatar, | |
| .section-base:nth-of-type(3n) .review-avatar { | |
| color: white; | |
| } | |
| .section-base .faq-q-mark, | |
| .section-base:nth-of-type(3n+1) .faq-q-mark, | |
| .section-base:nth-of-type(3n+2) .faq-q-mark, | |
| .section-base:nth-of-type(3n) .faq-q-mark, | |
| .section-base .faq-a-mark, | |
| .section-base:nth-of-type(3n+1) .faq-a-mark, | |
| .section-base:nth-of-type(3n+2) .faq-a-mark, | |
| .section-base:nth-of-type(3n) .faq-a-mark { | |
| color: white; | |
| } | |
| .section-base .comparison-icon, | |
| .section-base:nth-of-type(3n+1) .comparison-icon, | |
| .section-base:nth-of-type(3n+2) .comparison-icon, | |
| .section-base:nth-of-type(3n) .comparison-icon { | |
| color: white; | |
| } | |
| .section-base .staff-avatar, | |
| .section-base:nth-of-type(3n+1) .staff-avatar, | |
| .section-base:nth-of-type(3n+2) .staff-avatar, | |
| .section-base:nth-of-type(3n) .staff-avatar { | |
| color: white; | |
| } | |
| .section-base .news-date, | |
| .section-base:nth-of-type(3n+1) .news-date, | |
| .section-base:nth-of-type(3n+2) .news-date, | |
| .section-base:nth-of-type(3n) .news-date { | |
| color: white; | |
| } | |
| .section-base .use-case-header, | |
| .section-base:nth-of-type(3n+1) .use-case-header, | |
| .section-base:nth-of-type(3n+2) .use-case-header, | |
| .section-base:nth-of-type(3n) .use-case-header { | |
| color: white; | |
| } | |
| .section-base .news-more-button, | |
| .section-base:nth-of-type(3n+1) .news-more-button, | |
| .section-base:nth-of-type(3n+2) .news-more-button, | |
| .section-base:nth-of-type(3n) .news-more-button { | |
| color: white; | |
| } | |
| /* ボタンホバーステート */ | |
| .section-base .back-to-top button, | |
| .section-base:nth-of-type(3n+1) .back-to-top button, | |
| .section-base:nth-of-type(3n+2) .back-to-top button, | |
| .section-base:nth-of-type(3n) .back-to-top button { | |
| color: white; | |
| } | |
| /* Screen reader only */ | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border: 0; | |
| } | |
| `; | |