ベース、WCAG対応）
* 外部ファイル : _variables.scss, _mixins.scss
* 使用方法 : .c-accordion > details.c-accordion__item
*/
.c-accordion {
display: grid;
gap: 1.6rem;
width: 100%;
}
.c-accordion__item {
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #fff;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, visibility 0.2s ease, max-height 0.2s ease;
}
.c-accordion__item[open] > .c-accordion__panel {
animation: accordion-open 0.25s ease-out;
}
.c-accordion__item.is-hidden {
opacity: 0;
visibility: hidden;
max-height: 0;
margin: 0;
padding: 0;
border: none;
}
.c-accordion__item:hover {
border-color: #bc008b;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.c-accordion__item[open] {
border-color: #bc008b;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.c-accordion__item[open] summary {
background: rgba(188, 0, 139, 0.05);
border-bottom: 1px solid #f0f0f0;
}
.c-accordion__item[open] summary::after {
transform: rotate(180deg);
color: #bc008b;
}
.c-accordion__item summary {
list-style: none;
cursor: pointer;
padding: 2.4rem 4rem;
font-weight: 700;
color: #232323;
display: flex;
align-items: center;
justify-content: space-between;
transition: background-color 0.2s ease, color 0.2s ease;
}
.c-accordion__item summary::-webkit-details-marker {
display: none;
}
.c-accordion__item summary::marker {
display: none;
}
.c-accordion__item summary::after {
content: "+";
font-size: 1.8rem;
font-weight: bold;
color: #969696;
transition: transform 0.2s ease, color 0.2s ease;
}
.c-accordion__item summary:hover {
background: rgba(188, 0, 139, 0.02);
color: #bc008b;
}
.c-accordion__item summary:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.c-accordion__panel {
padding: 0 4rem 2.4rem;
color: #232323;
line-height: 1.9;
}
.c-accordion__panel > *:first-child {
margin-top: 0;
}
.c-accordion__panel > *:last-child {
margin-bottom: 0;
}
.c-accordion__panel ul, .c-accordion__panel ol {
margin: 0.8rem 0;
padding-left: 2.4rem;
}
.c-accordion__panel a {
color: #bc008b;
text-decoration: underline;
}
.c-accordion__panel a:hover {
text-decoration: none;
}
.c-accordion--simple {
gap: 0.8rem;
}
.c-accordion--simple .c-accordion__item {
border-color: #f0f0f0;
box-shadow: none;
}
.c-accordion--simple .c-accordion__item:hover, .c-accordion--simple .c-accordion__item[open] {
box-shadow: none;
}
.c-accordion--simple .c-accordion__item summary {
padding: 1.6rem 2.4rem;
font-size: 1.6rem;
}
.c-accordion--simple .c-accordion__item .c-accordion__panel {
padding: 0 2.4rem 1.6rem;
}
.c-accordion--borderless .c-accordion__item {
border: none;
border-bottom: 1px solid #f0f0f0;
border-radius: 0;
box-shadow: none;
}
.c-accordion--borderless .c-accordion__item:last-child {
border-bottom: none;
}
.c-accordion--borderless .c-accordion__item:hover, .c-accordion--borderless .c-accordion__item[open] {
border-color: #f0f0f0;
box-shadow: none;
}
.c-accordion--borderless .c-accordion__item summary {
padding: 2.4rem 0;
}
.c-accordion--borderless .c-accordion__item .c-accordion__panel {
padding: 0 0 2.4rem;
}
@keyframes accordion-open {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.c-accordion__item {
transition: none;
}
.c-accordion__item[open] > .c-accordion__panel {
animation: none;
}
.c-accordion__item.is-hidden {
display: none;
opacity: 1;
visibility: visible;
max-height: none;
}
}
/*
* コンポーネント : パンくずリスト
* ファイル名 : /assets/scss/components/_c-breadcrumb.scss
* 説明 : パンくずナビゲーションのスタイル定義（現在は空ファイル、将来的な実装用）
* 外部ファイル : _variables.scss, _mixins.scss（将来使用予定）
* 使用方法 : Home > カテゴリ > ページ形式のナビゲーション表示
*/
.c-breadcrumb {
display: block;
padding: 1rem 1.5rem;
}
.c-breadcrumb__list {
list-style: none;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25em;
padding: 0;
margin: 0;
}
.c-breadcrumb__item {
display: flex;
align-items: center;
font-size: 1rem;
color: #808080;
}
.c-breadcrumb__item:not(:last-child)::after {
content: "/";
margin: 0 0.5em;
color: #b3b3b3;
}
.c-breadcrumb__link, .c-breadcrumb__home-link {
color: #8527d5;
text-decoration: none;
transition: color 0.2s ease-in-out;
}
.c-breadcrumb__link:hover, .c-breadcrumb__home-link:hover, .c-breadcrumb__link:focus, .c-breadcrumb__home-link:focus {
color: #cb6ce6;
text-decoration: underline;
}
.c-breadcrumb__home-link {
display: flex;
align-items: center;
}
.c-breadcrumb__home-link .c-breadcrumb__icon {
width: 2em;
height: 2em;
margin-right: 0.25em;
fill: currentColor;
}
.c-breadcrumb__home-link .c-breadcrumb__label {
display: inline-block;
}
.c-breadcrumb__current,
.c-breadcrumb .c-breadcrumb__link[aria-current=page],
.c-breadcrumb [aria-current=page].c-breadcrumb__home-link {
color: #bc008b;
font-weight: bold;
text-decoration: none;
cursor: default;
pointer-events: none;
}
@media (max-width: 600px) {
.c-breadcrumb {
margin-bottom: 1rem;
}
.c-breadcrumb__list {
flex-direction: column;
align-items: flex-start;
gap: 0.25em;
}
.c-breadcrumb__item:not(:last-child)::after {
content: none;
}
}
/*
* コンポーネント : ボタン（Single Source）
* ファイル名 : /assets/scss/components/_c-button.scss
* 説明 : 汎用ボタンコンポーネント。primary/secondary/outline、large/small、loading/disabled状態対応
* 外部ファイル : _variables.scss（色、余白、サイズ）, _mixins.scss（transition, animation-optimize, focus-visible）
* 使用方法 : サイト全体で使用。c-button c-button--primaryのようにモディファイアで装飾。ホバーで浮き上がりエフェクト
*
* ★ ボタンスタイル統合方針（P0-2）:
* - サイト内の全ボタンはこのファイルを Single Source とする
* - CTA/Sticky等のコンテキストでは親セレクタでサイズ調整のみ行う
* - 色・hover効果はこのファイルのmodifierで統一
*
* 使用例:
* - 通常: ボタン
* - CTA内: ボタン
* - Sticky内: .c-sticky-cta__buttons .c-button でサイズ調整済み
*/
.c-button, .c-compare-page__clear-btn {
display: inline-block;
padding: 0.8rem 2.4rem;
border: none;
border-radius: 4px;
font-weight: 700;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
will-change: transform, opacity;
transform: translateZ(0);
}
.c-button:focus-visible, .c-compare-page__clear-btn:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.c-button:hover, .c-compare-page__clear-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.c-button:active, .c-compare-page__clear-btn:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.c-button--primary {
background-color: #9c0071;
color: #fff;
}
.c-button--primary:hover {
background-color: #8527d5;
color: #fff;
}
.c-button--secondary, .c-compare-page__clear-btn {
background-color: #f0f0f0;
color: #232323;
}
.c-button--secondary:hover, .c-compare-page__clear-btn:hover {
background-color: #e0e0e0;
}
.c-button--outline {
background-color: transparent;
color: #bc008b;
border: 2px solid #bc008b;
}
.c-button--outline:hover {
background-color: #bc008b;
color: #fff;
}
.c-button--large {
padding: 1.6rem 4rem;
font-size: 1.8rem;
}
.c-button--small, .c-compare-page__clear-btn {
padding: 0.4rem 1.6rem;
font-size: 1.2rem;
}
.c-button--block {
display: block;
width: 100%;
}
.c-button--disabled, .c-button:disabled, .c-compare-page__clear-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.c-button--disabled:hover, .c-button:disabled:hover, .c-compare-page__clear-btn:disabled:hover {
transform: none;
box-shadow: none;
}
.c-button--loading {
position: relative;
color: transparent;
pointer-events: none;
}
.c-button--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid #fff;
border-radius: 50%;
border-top-color: transparent;
animation: rotate 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.c-button--loading::after {
animation: none;
border-color: rgba(255, 255, 255, 0.5);
border-top-color: #fff;
}
}
/*
* コンポーネント名：カテゴリーグリッド
* ファイル：assets/scss/components/_c-category-grid.scss
* 説明：製品カテゴリー一覧のスタイル定義
* 依存：foundation/_variables.scss, foundation/_mixins.scss
*/
.c-category-stats {
padding: 1.6rem;
position: relative;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(254, 246, 252, 0.95) 100%);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(188, 0, 139, 0.08);
}
.c-category-stats--cards {
background: transparent;
backdrop-filter: none;
border-bottom: none;
}
.c-category-stats__container {
max-width: 1280px;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: 2.4rem;
}
.c-category-stats__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
.c-category-stats__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.6rem;
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 480px) {
.c-category-stats__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.c-category-stats__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.c-category-stats__card {
display: flex;
flex-direction: column;
align-items: center;
padding: 2.4rem 1.6rem;
background: #ffffff;
border-radius: 32px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.c-category-stats__card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.c-category-stats__card:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 4px;
}
.c-category-stats__card--mint .c-category-stats__icon {
background: #e3f9f3;
color: #0d9488;
}
.c-category-stats__card--mint .c-category-stats__underline {
background: #0d9488;
}
.c-category-stats__card--beige .c-category-stats__icon {
background: #fdf6e3;
color: #b45309;
}
.c-category-stats__card--beige .c-category-stats__underline {
background: #b45309;
}
.c-category-stats__card--blue .c-category-stats__icon {
background: #e3f0fc;
color: #0369a1;
}
.c-category-stats__card--blue .c-category-stats__underline {
background: #0369a1;
}
.c-category-stats__card--lavender .c-category-stats__icon {
background: #f0e8f9;
color: #7c3aed;
}
.c-category-stats__card--lavender .c-category-stats__underline {
background: #7c3aed;
}
.c-category-stats__icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.6rem;
transition: transform 0.2s ease;
}
.c-category-stats__card:hover .c-category-stats__icon {
transform: scale(1.1);
}
.c-category-stats__icon-svg {
width: 40px;
height: 40px;
}
.c-category-stats__number {
font-size: 3.6rem;
font-weight: 800;
background: linear-gradient(135deg, #bc008b 0%, #8527d5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.c-category-stats__card .c-category-stats__number {
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
background-clip: unset;
color: #232323;
margin-bottom: 0.4rem;
font-variant-numeric: tabular-nums;
min-height: 1.2em;
}
.c-category-stats__label {
font-size: 1.4rem;
color: #969696;
font-weight: 500;
}
.c-category-stats__card .c-category-stats__label {
margin-bottom: 0.8rem;
text-align: center;
}
.c-category-stats__sublabel {
font-size: 1.2rem;
color: #cccccc;
}
.c-category-stats__underline {
width: 40px;
height: 4px;
border-radius: 2px;
margin-top: auto;
}
.c-category-stats__date {
position: absolute;
bottom: 0.4rem;
right: 1.6rem;
font-size: 1.2rem;
color: #cccccc;
font-style: italic;
}
.c-category-stats--cards .c-category-stats__date {
position: static;
text-align: center;
margin-top: 1.6rem;
}
@media (prefers-reduced-motion: reduce) {
.c-category-stats__card {
transition: none;
}
.c-category-stats__card:hover {
transform: none;
}
.c-category-stats__icon {
transition: none;
}
}
.c-category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.6rem;
margin-bottom: 4rem;
list-style: none;
padding: 0;
}
@media (min-width: 768px) {
.c-category-grid {
gap: 2.4rem;
}
}
.c-category-grid__item {
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
padding: 0.8rem;
border: 1px solid rgba(188, 0, 139, 0.08);
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}
.c-category-grid__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, #bc008b 0%, #8527d5 100%);
transform: translateX(-100%);
transition: transform 0.4s ease;
}
.c-category-grid__item:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(188, 0, 139, 0.15);
border-color: #e1a2ba;
}
.c-category-grid__item:hover::before {
transform: translateX(0);
}
.c-category-grid__item:hover .c-category-grid__icon-wrapper {
transform: scale(1.1) rotate(-5deg);
background: linear-gradient(135deg, rgba(188, 0, 139, 0.2) 0%, rgba(203, 108, 230, 0.2) 100%);
}
.c-category-grid__item:focus-within {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.c-category-grid__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.2rem;
}
.c-category-grid__icon-wrapper {
width: 100px;
height: 100px;
background: linear-gradient(135deg, rgba(188, 0, 139, 0.1) 0%, rgba(203, 108, 230, 0.1) 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.6s ease;
}
.c-category-grid__icon-wrapper svg,
.c-category-grid__icon-wrapper img {
width: 100px;
height: 100px;
object-fit: contain;
}
.c-category-grid__icon-wrapper svg {
color: #bc008b;
}
.c-category-grid__badges {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.4rem;
}
.c-category-grid__count {
background: linear-gradient(135deg, #bc008b 0%, #8527d5 100%);
color: white;
padding: 0.4rem 0.8rem;
border-radius: 9999px;
font-size: 1.2rem;
font-weight: 500;
}
.c-category-grid__new-badge {
display: inline-flex;
align-items: center;
gap: 2px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
padding: 2px 8px;
border-radius: 9999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
}
.c-category-grid__name {
font-size: 1.8rem;
font-weight: 700;
color: #232323;
margin-bottom: 0.8rem;
}
.c-category-grid__description {
color: #969696;
font-size: 1.4rem;
line-height: 1.6;
margin-bottom: 1.6rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.c-category-grid__footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.c-category-grid__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #bc008b;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.2s ease;
}
.c-category-grid__link:hover {
gap: 12px;
color: #8527d5;
}
.c-category-grid__link:focus {
outline: 2px solid #8527d5;
outline-offset: 2px;
border-radius: 4px;
}
.c-category-grid__link svg {
width: 16px;
height: 16px;
}
.c-category-grid__tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.c-category-grid__tag {
padding: 2px 8px;
background: rgba(188, 0, 139, 0.08);
border-radius: 4px;
font-size: 11px;
color: #808080;
}
.c-category-grid__item {
opacity: 0;
animation: fadeInUp 0.45s ease-out forwards;
}
.c-category-grid__item:nth-child(1) {
animation-delay: 0.06s;
}
.c-category-grid__item:nth-child(2) {
animation-delay: 0.12s;
}
.c-category-grid__item:nth-child(3) {
animation-delay: 0.18s;
}
.c-category-grid__item:nth-child(4) {
animation-delay: 0.24s;
}
.c-category-grid__item:nth-child(5) {
animation-delay: 0.3s;
}
.c-category-grid__item:nth-child(6) {
animation-delay: 0.36s;
}
.c-category-grid__item:nth-child(7) {
animation-delay: 0.42s;
}
.c-category-grid__item:nth-child(8) {
animation-delay: 0.48s;
}
.c-category-grid__item:nth-child(9) {
animation-delay: 0.54s;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(1.6rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/**
* 製品比較コンポーネント（P1-3）
*
* - 比較ボタン
* - 比較バッジ
* - 比較テーブル（横スクロール対応）
* - 比較フローティングバー
*/
.c-compare-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.8rem;
font-size: 1.2rem;
font-weight: 500;
color: #232323;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.c-compare-btn:hover {
background: #f9f9f9;
border-color: #b3b3b3;
}
.c-compare-btn:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.c-compare-btn.is-active, .c-compare-btn[aria-pressed=true] {
color: #fff;
background: #bc008b;
border-color: #bc008b;
}
.c-compare-btn.is-active:hover, .c-compare-btn[aria-pressed=true]:hover {
background: #9c0071;
border-color: #9c0071;
}
.c-compare-btn__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.c-compare-btn__icon--check {
display: none;
}
.c-compare-btn__text {
white-space: nowrap;
}
.c-compare-btn--small {
padding: 0.2rem 0.4rem;
font-size: 1rem;
}
.c-compare-btn--small .c-compare-btn__icon {
width: 14px;
height: 14px;
}
.c-compare-btn--icon-only {
padding: 0.4rem;
min-width: 32px;
min-height: 32px;
justify-content: center;
}
.c-compare-btn--icon-only .c-compare-btn__icon {
margin: 0;
}
.c-compare-btn--icon-only .c-compare-btn__icon--check {
display: none;
}
.c-compare-btn--icon-only.is-active .c-compare-btn__icon:not(.c-compare-btn__icon--check), .c-compare-btn--icon-only[aria-pressed=true] .c-compare-btn__icon:not(.c-compare-btn__icon--check) {
display: none;
}
.c-compare-btn--icon-only.is-active .c-compare-btn__icon--check, .c-compare-btn--icon-only[aria-pressed=true] .c-compare-btn__icon--check {
display: block;
}
.c-compare-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 0.2rem;
font-size: 1rem;
font-weight: 700;
color: #fff;
background: #bc008b;
border-radius: 9999px;
}
.c-compare-badge[hidden] {
display: none;
}
.c-compare-nav {
position: relative;
}
.c-compare-nav__badge {
position: absolute;
top: -4px;
right: -4px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 1rem;
font-weight: 700;
color: #fff;
background: #bc008b;
border-radius: 9999px;
}
.c-compare-nav__badge[hidden] {
display: none;
}
.c-compare-nav.has-items .l-header__button-icon {
color: #bc008b;
}
.c-compare-nav--floating {
position: fixed;
bottom: 2.4rem;
right: 2.4rem;
z-index: 99;
display: none;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.c-compare-nav--floating {
bottom: calc(2.4rem + env(safe-area-inset-bottom));
}
}
.c-compare-nav--floating.has-items {
display: block;
}
.c-compare-nav--floating .c-compare-nav__link {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.8rem 1.6rem;
color: #fff;
background: #bc008b;
border-radius: 9999px;
text-decoration: none;
box-shadow: 0 4px 12px rgba(188, 0, 139, 0.3);
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.c-compare-nav--floating .c-compare-nav__link:hover {
background: #9c0071;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(188, 0, 139, 0.4);
}
.c-compare-nav--floating .c-compare-nav__link:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.c-compare-nav--floating .c-compare-nav__icon {
width: 20px;
height: 20px;
}
.c-compare-nav--floating .c-compare-nav__text {
font-size: 1.2rem;
font-weight: 500;
}
.c-compare-table {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
position: relative;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
border: 1px solid #e2e8f0;
}
.c-compare-table__table {
width: 100%;
min-width: 700px;
border-collapse: collapse;
font-size: 1.4rem;
line-height: 1.6;
}
.c-compare-table__table th,
.c-compare-table__table td {
padding: 1.6rem;
text-align: left;
vertical-align: top;
}
.c-compare-table__table thead th {
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
color: #fff;
font-weight: 700;
font-size: 1.4rem;
padding: 1.6rem;
border-bottom: 3px solid #bc008b;
position: sticky;
top: 0;
z-index: 2;
}
.c-compare-table__table thead th:first-child {
background: #1a202c;
z-index: 3;
width: 140px;
min-width: 120px;
position: sticky;
left: 0;
}
.c-compare-table__table thead th:not(:first-child) {
min-width: 200px;
text-align: center;
}
.c-compare-table__table tbody th,
.c-compare-table__table tbody td {
border-bottom: 1px solid #e2e8f0;
}
.c-compare-table__table tbody th {
width: 140px;
min-width: 120px;
font-weight: 700;
font-size: 1.3rem;
background: #f7fafc;
color: #2d3748;
position: sticky;
left: 0;
z-index: 1;
border-right: 2px solid #e2e8f0;
}
.c-compare-table__table tbody th::after {
content: "";
position: absolute;
top: 0;
right: -6px;
bottom: 0;
width: 6px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent);
pointer-events: none;
}
.c-compare-table__table tbody td {
min-width: 200px;
background: #fff;
color: #4a5568;
font-size: 1.4rem;
word-break: break-word;
}
.c-compare-table__table tbody tr:nth-child(even) th {
background: #edf2f7;
}
.c-compare-table__table tbody tr:nth-child(even) td {
background: rgba(248, 250, 252, 0.7);
}
.c-compare-table__table tbody tr {
transition: all 0.15s ease;
}
.c-compare-table__table tbody tr:hover th {
background: #e2e8f0;
}
.c-compare-table__table tbody tr:hover td {
background: #edf2f7;
}
.c-compare-table__table tbody tr:last-child th,
.c-compare-table__table tbody tr:last-child td {
border-bottom: none;
}
.c-compare-table__table .c-compare-table__product-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 0;
}
.c-compare-table__table .c-compare-table__product-image {
width: 100px;
height: 100px;
object-fit: contain;
background: #fff;
border-radius: 8px;
padding: 0.4rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.c-compare-table__table .c-compare-table__product-name {
font-weight: 700;
font-size: 1.5rem;
color: #fff;
text-align: center;
line-height: 1.3;
}
.c-compare-table__table .c-compare-table__product-maker {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.c-compare-table__table .c-button--small.c-button--outline, .c-compare-table__table .c-button--outline.c-compare-page__clear-btn {
margin-top: 0.4rem;
color: #fff;
border-color: rgba(255, 255, 255, 0.5);
font-size: 1.2rem;
}
.c-compare-table__table .c-button--small.c-button--outline:hover, .c-compare-table__table .c-button--outline.c-compare-page__clear-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
}
.c-compare-table__table .c-compare-table__no-data {
color: #a0aec0;
font-style: italic;
}
.c-compare-table__table .c-compare-table__remove {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.2rem 0.8rem;
margin-top: 0.8rem;
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.c-compare-table__table .c-compare-table__remove:hover {
color: #fff;
background: #c62828;
border-color: #c62828;
}
.c-compare-table__caption {
caption-side: top;
padding: 0.8rem;
font-weight: 700;
text-align: left;
background: #f5f5f5;
}
.c-compare-page__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1.6rem;
margin-bottom: 2.4rem;
}
.c-compare-page__title {
margin: 0;
}
.c-compare-page__actions {
display: flex;
gap: 0.8rem;
}
.c-compare-page__empty {
text-align: center;
padding: 6.4rem;
color: #969696;
}
.c-compare-page__empty-icon {
width: 64px;
height: 64px;
margin-bottom: 1.6rem;
opacity: 0.5;
}
.c-compare-page__empty-text {
font-size: 1.8rem;
margin-bottom: 1.6rem;
}
.c-compare-page__empty-hint {
font-size: 1.2rem;
}
@media (max-width: 767px) {
.c-compare-nav--floating {
bottom: 1.6rem;
right: 1.6rem;
}
.c-compare-nav--floating .c-compare-nav__link {
padding: 0.4rem 0.8rem;
}
.c-compare-nav--floating .c-compare-nav__text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.c-compare-table {
border-radius: 8px;
}
.c-compare-table__table {
min-width: 500px;
font-size: 1.2rem;
}
.c-compare-table__table th,
.c-compare-table__table td {
padding: 0.8rem;
}
.c-compare-table__table thead th {
padding: 0.8rem;
font-size: 1.2rem;
}
.c-compare-table__table thead th:first-child {
width: 100px;
min-width: 80px;
}
.c-compare-table__table thead th:not(:first-child) {
min-width: 150px;
}
.c-compare-table__table tbody th {
width: 100px;
min-width: 80px;
font-size: 1.2rem;
}
.c-compare-table__table tbody td {
min-width: 150px;
font-size: 1.2rem;
}
.c-compare-table__table .c-compare-table__product-header {
gap: 0.4rem;
padding: 0.4rem 0;
}
.c-compare-table__table .c-compare-table__product-image {
width: 70px;
height: 70px;
}
.c-compare-table__table .c-compare-table__product-name {
font-size: 1.3rem;
}
.c-compare-table__table .c-compare-table__product-maker {
font-size: 1rem;
}
}
@media (prefers-reduced-motion: reduce) {
.c-compare-btn,
.c-compare-nav__link {
transition: none;
}
}
/*
* コンポーネント : コンテンツグリッド（汎用）
* ファイル名 : _c-content-grid.scss
* 説明 : テキストコンテンツを任意の列数でグリッド表示するコンポーネント
* 外部ファイル : _variables.scss, _mixins.scss
* 使用方法 :
*/
.c-content-grid {
display: grid;
gap: 1.6rem;
width: 100%;
--grid-columns: 1;
--grid-gap: 1.6rem;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}
.c-content-grid__item {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.c-content-grid__item:hover, .c-content-grid__item:focus-within {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
.c-content-grid__badge {
position: absolute;
top: 0.8rem;
right: 0.8rem;
background: #bc008b;
color: #fff;
font-size: 1rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 2;
}
.c-content-grid__icon {
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
margin: 0 auto 1.6rem;
border-radius: 8px;
background: rgba(188, 0, 139, 0.1);
color: #bc008b;
}
.c-content-grid__icon svg {
width: 24px;
height: 24px;
}
.c-content-grid__image {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 1.6rem;
overflow: hidden;
}
.c-content-grid__img {
max-width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.c-content-grid__header {
margin-bottom: 1.6rem;
}
.c-content-grid__title {
font-size: 1.8rem;
text-align: center;
font-weight: 700;
line-height: 1.3;
margin: 0 0 0.4rem;
color: #232323;
}
.c-content-grid__subtitle {
font-size: 1.2rem;
color: #969696;
margin: 0;
line-height: 1.6;
}
.c-content-grid__content {
font-size: 1.4rem;
line-height: 1.9;
color: #232323;
margin-bottom: 1.6rem;
}
.c-content-grid__content p {
margin: 0 0 1.6rem;
line-height: 2;
padding-bottom: 0.25rem;
}
.c-content-grid__content p:last-child {
margin-bottom: 1rem;
}
.c-content-grid__content ul,
.c-content-grid__content ol {
margin: 0 0 0.8rem;
padding-left: 2.4rem;
}
.c-content-grid__content ul li,
.c-content-grid__content ol li {
margin-bottom: 0.4rem;
}
.c-content-grid__content ul li:last-child,
.c-content-grid__content ol li:last-child {
margin-bottom: 0;
}
.c-content-grid__footer {
margin-top: auto;
}
.c-content-grid__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #bc008b;
text-decoration: none;
font-weight: 700;
font-size: 1.2rem;
transition: color 0.2s ease, transform 0.2s ease;
}
.c-content-grid__link:hover {
color: #9c0071;
}
.c-content-grid__link:hover .c-content-grid__arrow {
transform: translateX(2px);
}
.c-content-grid__link:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.c-content-grid__arrow {
transition: transform 0.2s ease;
}
/* ========================================
* バリエーション: カードスタイル
* ======================================== */
.c-content-grid--card .c-content-grid__item {
height: 100%;
}
.c-content-grid--card .c-content-grid__card {
position: relative;
height: 100%;
padding: 1.6rem;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.c-content-grid--card .c-content-grid__item:hover .c-content-grid__card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-color: #bc008b;
}
/* ========================================
* バリエーション: シンプルスタイル
* ======================================== */
.c-content-grid--simple {
gap: 2.4rem;
}
.c-content-grid--simple .c-content-grid__item {
height: 100%;
}
.c-content-grid--simple .c-content-grid__simple {
height: 100%;
display: flex;
flex-direction: column;
padding: 2.4rem;
background: rgba(188, 0, 139, 0.02);
border-radius: 5px;
border: 1px solid #f9f9f9;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.c-content-grid--simple .c-content-grid__simple:hover {
background: rgba(188, 0, 139, 0.05);
border-color: #e0e0e0;
}
.c-content-grid--simple .c-content-grid__title {
font-size: 1.8rem;
margin-bottom: 1.6rem;
color: #232323;
}
.c-content-grid--simple .c-content-grid__content {
flex: 1;
margin-bottom: 1.6rem;
color: #232323;
}
.c-content-grid--simple .c-content-grid__link {
font-size: 1.6rem;
margin-top: 1.6rem;
}
/* ========================================
* バリエーション: ミニマルスタイル
* ======================================== */
.c-content-grid--minimal {
gap: 4rem;
}
.c-content-grid--minimal .c-content-grid__item {
position: relative;
}
.c-content-grid--minimal .c-content-grid__item:hover {
transform: none;
box-shadow: none;
}
.c-content-grid--minimal .c-content-grid__minimal {
position: relative;
padding: 2.4rem 0;
border-bottom: 1px solid #f0f0f0;
transition: border-color 0.2s ease;
}
.c-content-grid--minimal .c-content-grid__minimal:hover {
border-bottom-color: #bc008b;
}
.c-content-grid--minimal .c-content-grid__minimal:hover .c-content-grid__title {
color: #bc008b;
}
.c-content-grid--minimal .c-content-grid__minimal:hover .c-content-grid__arrow {
transform: translateX(4px);
opacity: 1;
}
.c-content-grid--minimal .c-content-grid__minimal:last-child {
border-bottom: none;
}
.c-content-grid--minimal .c-content-grid__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.8rem;
}
.c-content-grid--minimal .c-content-grid__title {
font-size: 2.4rem;
font-weight: 700;
line-height: 1.3;
margin: 0;
color: #232323;
transition: color 0.2s ease;
letter-spacing: -0.01em;
}
.c-content-grid--minimal .c-content-grid__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(188, 0, 139, 0.1);
color: #bc008b;
opacity: 0.7;
transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.c-content-grid--minimal .c-content-grid__arrow svg {
width: 16px;
height: 16px;
}
.c-content-grid--minimal .c-content-grid__arrow:hover {
background: rgba(188, 0, 139, 0.15);
}
.c-content-grid--minimal .c-content-grid__content {
font-size: 1.6rem;
line-height: 1.9;
color: #969696;
margin: 0;
max-width: 85%;
}
.c-content-grid--minimal .c-content-grid__content p {
margin: 0 0 0.8rem;
}
.c-content-grid--minimal .c-content-grid__content p:last-child {
margin-bottom: 0;
}
.c-content-grid--minimal .c-content-grid__link {
display: block;
text-decoration: none;
color: inherit;
}
.c-content-grid--minimal .c-content-grid__link:hover {
text-decoration: none;
}
.c-content-grid--minimal .c-content-grid__link:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
border-radius: 4px;
}
.c-content-grid--minimal .c-content-grid__meta {
display: flex;
align-items: center;
gap: 0.8rem;
margin-top: 0.8rem;
font-size: 1rem;
color: #969696;
}
.c-content-grid--minimal .c-content-grid__meta .c-content-grid__tag {
padding: 0.2rem 0.5rem;
background: rgba(188, 0, 139, 0.1);
color: #bc008b;
border-radius: 4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.c-content-grid--minimal .c-content-grid__meta .c-content-grid__date {
font-variant-numeric: tabular-nums;
}
/* ========================================
* バリエーション: バッジスタイル
* ======================================== */
.c-content-grid--badge {
max-width: 80%;
margin-left: auto;
margin-right: auto;
gap: 0.8rem;
}
.c-content-grid--badge .c-content-grid__item {
position: relative;
position: relative;
}
.c-content-grid--badge .c-content-grid__item:hover, .c-content-grid--badge .c-content-grid__item:focus-within {
transform: none;
box-shadow: none;
}
.c-content-grid--badge .c-content-grid__badge-style {
padding: 1.6rem 2.4rem;
max-width: 200px;
margin: 2.4rem auto;
border: 2px solid #bc008b;
border-radius: 8px;
background: #fff;
text-align: center;
}
.c-content-grid--badge .c-content-grid__badge-label {
display: inline-block;
padding: 0.4rem 1rem;
margin-bottom: 1.6rem;
background: #bc008b;
color: #fff;
border-radius: 999px;
font-size: 1.2rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.c-content-grid--badge .c-content-grid__title {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.3;
margin: 0 0 0.8rem;
color: #232323;
}
.c-content-grid--badge .c-content-grid__subtitle {
font-size: 1.6rem;
line-height: 1.6;
color: #969696;
margin: 0 0 1.6rem;
}
.c-content-grid--badge .c-content-grid__content {
font-size: 1.2rem;
line-height: 1.9;
color: #232323;
margin: 0;
}
.c-content-grid--badge .c-content-grid__content p {
margin: 0 0 0.8rem;
}
.c-content-grid--badge .c-content-grid__content p:last-child {
margin-bottom: 0;
}
/* ========================================
* 列数指定
* ======================================== */
.c-content-grid--col-1 {
--grid-columns: 1;
}
@media (min-width: 768px) {
.c-content-grid--col-1 {
max-width: 900px;
margin: 0 auto;
}
}
@media (min-width: 768px) {
.c-content-grid--col-2 {
--grid-columns: 2;
}
}
@media (min-width: 768px) {
.c-content-grid--col-3 {
--grid-columns: 2;
}
}
@media (min-width: 992px) {
.c-content-grid--col-3 {
--grid-columns: 3;
}
}
@media (min-width: 480px) {
.c-content-grid--col-4 {
--grid-columns: 2;
}
}
@media (min-width: 768px) {
.c-content-grid--col-4 {
--grid-columns: 3;
}
}
@media (min-width: 992px) {
.c-content-grid--col-4 {
--grid-columns: 4;
}
}
@media (min-width: 480px) {
.c-content-grid--col-5 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.c-content-grid--col-5 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.c-content-grid--col-5 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1200px) {
.c-content-grid--col-5 {
grid-template-columns: repeat(5, 1fr);
}
}
@media (min-width: 480px) {
.c-content-grid--col-6 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.c-content-grid--col-6 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.c-content-grid--col-6 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1200px) {
.c-content-grid--col-6 {
grid-template-columns: repeat(6, 1fr);
}
}
/* ========================================
* 特殊レイアウト
* ======================================== */
@media (min-width: 768px) {
.c-content-grid--single {
max-width: 1000px;
margin: 0 auto;
}
}
@media (min-width: 768px) {
.c-content-grid--duo {
grid-template-columns: repeat(2, 1fr);
max-width: 1200px;
margin: 0 auto;
}
}
/* ========================================
* アクセシビリティ
* ======================================== */
.c-content-grid__card:focus-within,
.c-content-grid__simple:focus-within,
.c-content-grid__minimal:focus-within {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.c-content-grid__item {
transition: none;
}
.c-content-grid__item:hover,
.c-content-grid__item:focus-within {
transform: none;
}
.c-content-grid__arrow {
transition: none;
}
}
/* ========================================
* バリエーション: ハイライトスタイル（認定バッジ用）
* ======================================== */
.c-content-grid--highlight .c-content-grid__card {
background: #bc008b;
border-color: #bc008b;
color: #fff;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-content-grid--highlight .c-content-grid__title {
color: #fff;
}
.c-content-grid--highlight .c-content-grid__badge {
background: #8527d5;
color: #fff;
}
.c-content-grid--highlight .c-content-grid__item:hover .c-content-grid__card {
background: #bc008b;
border-color: #bc008b;
box-shadow: 0 8px 24px rgba(188, 0, 139, 0.3);
}
/* ========================================
* プリント対応
* ======================================== */
@media print {
.c-content-grid {
gap: 1.6rem;
}
.c-content-grid__card {
box-shadow: none;
border: 1px solid #ccc;
}
.c-content-grid__link {
color: #000;
}
.c-content-grid__link::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
}
/*
* コンポーネント : Cookie同意バナー
* ファイル名 : /assets/scss/components/_c-cookie-consent.scss
* 説明 : GDPR/個人情報保護法準拠のCookie同意管理UI。必須/分析/マーケティングCookieの個別制御、スイッチUI、詳細設定パネル対応
* 外部ファイル : _variables.scss（デザイントークン）, _mixins.scss（button-style, media-up, transition等）
* 使用方法 : cookie-consent.phpで使用。固定配置、スライドアップアニメーション、レスポンシブ対応
*/
.c-cookie-consent {
font-size: 1rem;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
font-family: "Noto Sans JP", sans-serif;
color: #232323;
z-index: 9999;
display: none;
animation: slideUp 0.5s ease-out;
will-change: transform, opacity;
transform: translateZ(0);
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.c-cookie-consent {
padding-bottom: env(safe-area-inset-bottom);
}
}
.c-cookie-consent.is-visible {
display: block;
}
.c-cookie-consent__container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
}
@media (min-width: 768px) {
.c-cookie-consent__container {
padding: 0.8rem;
}
}
.c-cookie-consent__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.c-cookie-consent__header h2 {
font-size: 1.2rem;
font-weight: 700;
margin: 0;
padding: 0;
}
.c-cookie-consent__header h2::after {
display: none;
}
.c-cookie-consent__close {
display: inline-block;
padding: 0.8rem 1.6rem;
background-color: transparent;
color: #232323;
border: none;
border-radius: 4px;
font-weight: 700;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
width: 24px;
height: 24px;
padding: 0;
position: relative;
transition: transform 0.2s ease;
}
.c-cookie-consent__close:hover {
background-color: hsla(0, 0%, -10%, 0);
transform: translateY(-2px);
}
.c-cookie-consent__close:hover {
background-color: transparent;
transform: rotate(90deg);
}
.c-cookie-consent__close span {
position: absolute;
width: 24px;
height: 2px;
background-color: #232323;
top: 50%;
left: 0;
}
.c-cookie-consent__close span:first-child {
transform: rotate(45deg);
}
.c-cookie-consent__close span:last-child {
transform: rotate(-45deg);
}
.c-cookie-consent__content {
margin-bottom: 0.4rem;
}
.c-cookie-consent__content p {
margin: 5px 0;
font-size: 1rem;
line-height: 1.6;
}
.c-cookie-consent__content a {
color: #0066cc;
text-decoration: none;
transition: color 0.2s ease, text-decoration 0.2s ease;
}
.c-cookie-consent__content a:hover {
text-decoration: underline;
color: #0055aa;
}
.c-cookie-consent__types {
display: flex;
flex-direction: column;
gap: 15px;
margin: 5px 0;
}
@media (min-width: 768px) {
.c-cookie-consent__types {
flex-direction: row;
gap: 1.6rem;
}
}
.c-cookie-consent__type {
flex: 1;
min-width: auto;
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 5px;
position: relative;
background-color: #f9f9f9;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (min-width: 768px) {
.c-cookie-consent__type {
min-width: 250px;
}
}
.c-cookie-consent__type:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.c-cookie-consent__type h3 {
font-size: 1rem;
margin: 0 0 10px 0;
}
.c-cookie-consent__type p {
margin: 0;
font-size: 0.9rem;
}
.c-cookie-consent__actions {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.c-cookie-consent__actions {
justify-content: flex-end;
gap: 12px;
}
}
.c-cookie-consent__btn {
display: inline-block;
padding: 0.8rem 1.6rem;
background-color: #9c0071;
color: #fff;
border: none;
border-radius: 4px;
font-weight: 700;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
width: 100%;
margin-bottom: 5px;
}
.c-cookie-consent__btn:hover {
background-color: rgb(105, 0, 76.0576923077);
transform: translateY(-2px);
}
@media (min-width: 768px) {
.c-cookie-consent__btn {
width: auto;
padding: 0.6rem 0.8rem;
font-size: 1rem;
margin-bottom: 0;
}
}
.c-cookie-consent__btn--primary {
background-color: #9c0071;
color: #fff;
}
.c-cookie-consent__btn--primary:hover {
background-color: #8527d5;
}
.c-cookie-consent__btn--secondary {
background-color: #f0f0f0;
color: #232323;
}
.c-cookie-consent__btn--secondary:hover {
background-color: #e0e0e0;
}
.c-cookie-consent__switch {
position: absolute;
top: 5px;
right: 15px;
display: inline-block;
width: 40px;
height: 22px;
}
.c-cookie-consent__switch input {
opacity: 0;
width: 0;
height: 0;
}
.c-cookie-consent__switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #b3b3b3;
transition: background-color 0.4s;
border-radius: 9999px;
}
.c-cookie-consent__switch-slider::before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 3px;
bottom: 3px;
background-color: #fff;
transition: transform 0.4s;
border-radius: 50%;
will-change: transform, opacity;
transform: translateZ(0);
}
input:checked + .c-cookie-consent__switch-slider {
background-color: #9c0071;
}
input:checked + .c-cookie-consent__switch-slider::before {
transform: translateX(18px);
}
.c-cookie-consent__switch--disabled {
opacity: 0.5;
cursor: not-allowed;
}
.c-cookie-consent__settings {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 95%;
max-width: 600px;
background-color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
border-radius: 8px;
z-index: 10000;
display: none;
animation: fadeIn 0.3s ease-out;
will-change: transform, opacity;
transform: translateZ(0);
}
.c-cookie-consent__settings.is-visible {
display: block;
}
.c-cookie-consent__settings-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #e0e0e0;
}
.c-cookie-consent__settings-content {
padding: 1.6rem;
max-height: 60vh;
overflow-y: auto;
}
.c-cookie-consent__settings-item {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 1.6rem;
padding-bottom: 1.6rem;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s ease;
}
.c-cookie-consent__settings-item:hover {
background-color: #f9f9f9;
}
.c-cookie-consent__settings-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.c-cookie-consent__settings-actions {
padding: 15px 20px;
border-top: 1px solid #e0e0e0;
text-align: right;
}
/*
* コンポーネント : CTA（Call to Action）
* ファイル名 : _c-cta.scss
* 説明 : 行動促進セクション用コンポーネント。背景色、配置、ボタン数に応じてレイアウトが変化
* 外部ファイル : _variables.scss, _mixins.scss
* 使用方法 :
*/
.c-cta {
text-align: center;
max-width: 960px;
margin: 4rem auto 0;
padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem);
/* ---------- 背景バリエーション ---------- */
/* ---------- 配置バリエーション ---------- */
/* ---------- ボタン数に応じたレイアウト ---------- */
/* ---------- レスポンシブ調整 ---------- */
/* ---------- プリント対応 ---------- */
}
.c-cta__title {
font-size: clamp(2rem, 3.5vw, 2.8rem);
font-weight: 700;
line-height: 1.3;
margin-bottom: 2.4rem;
color: inherit;
}
.c-cta__description {
font-size: clamp(1.4rem, 2vw, 1.6rem);
line-height: 1.6;
margin-bottom: 4rem;
color: inherit;
opacity: 0.9;
}
.c-cta__buttons {
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
justify-content: center;
align-items: stretch;
width: 100%;
margin: 0 auto;
}
@media (max-width: 767px) {
.c-cta__buttons {
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
}
.c-cta__buttons .c-button, .c-cta__buttons .c-compare-page__clear-btn {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
white-space: nowrap;
}
@media (max-width: 767px) {
.c-cta__buttons .c-button, .c-cta__buttons .c-compare-page__clear-btn {
flex: 0 0 auto;
width: 280px;
min-width: 280px;
max-width: 280px;
}
}
.c-cta--buttons-2 .c-cta__buttons {
display: flex;
justify-content: center;
gap: 1.6rem;
}
.c-cta--buttons-2 .c-cta__buttons .c-button, .c-cta--buttons-2 .c-cta__buttons .c-compare-page__clear-btn {
flex: 1 1 0;
min-width: 160px;
max-width: 240px;
}
.c-cta--buttons-2 .c-cta__buttons .c-button.c-button--long-text, .c-cta--buttons-2 .c-cta__buttons .c-button--long-text.c-compare-page__clear-btn {
min-width: 200px;
max-width: 280px;
}
@media (max-width: 767px) {
.c-cta--buttons-2 .c-cta__buttons .c-button, .c-cta--buttons-2 .c-cta__buttons .c-compare-page__clear-btn {
flex: 0 0 auto;
width: 100%;
max-width: none;
}
}
.c-cta--buttons-2 .c-cta__buttons .c-button--long-text + .c-button--long-text {
min-width: 220px;
max-width: 300px;
}
.c-cta--buttons-1 .c-cta__buttons .c-button, .c-cta--buttons-1 .c-cta__buttons .c-compare-page__clear-btn, .c-cta--buttons-3 .c-cta__buttons .c-button, .c-cta--buttons-3 .c-cta__buttons .c-compare-page__clear-btn {
flex: 0 0 auto;
min-width: 200px;
max-width: 300px;
}
.c-cta--light {
background: #f5f5f5;
color: #232323;
}
.c-cta--dark {
background: #05192d;
color: #fff;
}
.c-cta--dark .c-cta__description {
opacity: 0.8;
}
.c-cta--primary {
background: #fff;
color: #232323;
}
.c-cta--primary .c-cta__description {
opacity: 0.9;
}
.c-cta--transparent {
background: transparent;
color: #232323;
}
.c-cta--center {
text-align: center;
}
.c-cta--left {
text-align: left;
}
.c-cta--left .c-cta__buttons {
justify-content: flex-start;
}
.c-cta--right {
text-align: right;
}
.c-cta--right .c-cta__buttons {
justify-content: flex-end;
}
@media (max-width: 767px) {
.c-cta__title {
margin-bottom: 1.6rem;
}
.c-cta__description {
margin-bottom: 2.4rem;
}
}
@media print {
.c-cta {
background: white;
color: black;
}
.c-cta .c-cta__buttons {
display: none;
}
}
/*
* コンポーネント : ドロワーナビゲーション
* ファイル名 : /assets/scss/components/_c-drawer.scss
* 説明 : ハンバーガーメニューとスライドイン式ナビゲーション。モバイル専用、左から100%幅でスライド、3本線→×アニメーション対応
* 外部ファイル : _variables.scss（z-index, 色, サイズ）, _mixins.scss（transition, animation-optimize, media-up）
* 使用方法 : header.phpで使用。c-drawer__hamburgerクリックでis-drawer-openクラス切替、オーバーレイ表示
*/
.c-drawer__nav {
position: fixed;
z-index: 102;
top: 0;
left: -100%;
width: 100%;
/* 100vh問題対策：順次フォールバック */
height: 100vh;
height: 100svh;
height: 100dvh;
overflow: hidden;
color: #fff;
transition: left 0.2s ease;
will-change: transform, opacity;
transform: translateZ(0);
}
.is-drawer-open .c-drawer__nav {
left: 0;
}
.c-drawer__overlay {
position: fixed;
z-index: 100;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.is-drawer-open .c-drawer__overlay {
display: block;
animation: fadeIn 0.3s ease-out;
}
.c-drawer__hamburger {
position: fixed;
z-index: 104;
top: 10px;
left: 2%;
display: block;
width: 4rem;
padding: 13px 0.75rem 13px 0.75rem;
background-color: transparent;
border: 0;
cursor: pointer;
transition: all 0.2s ease;
transform: translate3d(0, 0, 0);
}
@media (min-width: 992px) {
.c-drawer__hamburger {
display: none !important;
}
}
@supports (top: env(safe-area-inset-top)) {
.c-drawer__hamburger {
top: calc(13px + env(safe-area-inset-top));
}
@media (min-width: 375px) and (max-width: 767px) {
.c-drawer__hamburger {
top: calc(10px + env(safe-area-inset-top));
}
}
}
.c-header.is-scrolled .c-drawer__hamburger {
top: 10px;
left: 2%;
}
@supports (top: env(safe-area-inset-top)) {
.c-header.is-scrolled .c-drawer__hamburger {
top: calc(13px + env(safe-area-inset-top));
}
@media (min-width: 375px) and (max-width: 767px) {
.c-header.is-scrolled .c-drawer__hamburger {
top: calc(10px + env(safe-area-inset-top));
}
}
}
.is-drawer-open .c-drawer__hamburger {
position: fixed;
top: 20px;
right: 20px;
left: auto;
transform: none;
z-index: 10000;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
padding: 12px;
}
@supports (top: env(safe-area-inset-top)) {
.is-drawer-open .c-drawer__hamburger {
top: calc(20px + env(safe-area-inset-top));
}
}
@supports (right: env(safe-area-inset-right)) {
.is-drawer-open .c-drawer__hamburger {
right: calc(20px + env(safe-area-inset-right));
}
}
.is-drawer-open .c-header.is-scrolled .c-drawer__hamburger {
position: fixed;
top: 20px;
right: 20px;
left: auto;
transform: none;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
padding: 12px;
}
@supports (top: env(safe-area-inset-top)) {
.is-drawer-open .c-header.is-scrolled .c-drawer__hamburger {
top: calc(20px + env(safe-area-inset-top));
}
}
@supports (right: env(safe-area-inset-right)) {
.is-drawer-open .c-header.is-scrolled .c-drawer__hamburger {
right: calc(20px + env(safe-area-inset-right));
}
}
.c-drawer__hamburger:hover {
background-color: transparent;
}
.is-drawer-open .c-drawer__hamburger:hover {
background-color: rgba(0, 0, 0, 0.9);
}
.c-drawer__hamburger:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
border-radius: 4px;
}
.c-drawer__icon {
position: relative;
display: block;
width: 100%;
height: 2px;
background-color: #fff;
border-radius: 2px;
transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
will-change: transform, opacity;
transform: translateZ(0);
}
.c-drawer__icon::before, .c-drawer__icon::after {
position: absolute;
left: 0;
display: block;
width: 100%;
height: 2px;
content: "";
background-color: #fff;
border-radius: 2px;
transition: transform 0.2s ease, background-color 0.2s ease, top 0.2s ease, opacity 0.2s ease;
}
.c-drawer__icon::before {
top: -8px;
}
.c-drawer__icon::after {
top: 8px;
}
.is-drawer-open .c-drawer__icon {
background-color: transparent;
}
.is-drawer-open .c-drawer__icon::before, .is-drawer-open .c-drawer__icon::after {
top: 0;
}
.is-drawer-open .c-drawer__icon::before {
transform: rotate(45deg);
}
.is-drawer-open .c-drawer__icon::after {
transform: rotate(-45deg);
}
.c-drawer__menu {
margin: 0;
padding: 0;
list-style: none;
}
.c-drawer__menu-item {
font-size: 1rem;
display: block;
padding: 0.75rem;
text-decoration: none;
color: #fff;
transition: color 0.2s ease, background-color 0.2s ease, text-decoration 0.2s ease;
}
.c-drawer__menu-item:hover {
text-decoration: underline;
color: #e68ce6;
background-color: rgba(255, 255, 255, 0.05);
}
.c-drawer__menu-item:focus-visible {
outline: 2px solid #fff;
outline-offset: -2px;
}
.c-drawer__container {
margin-right: auto;
margin-left: auto;
max-width: 100%;
padding: 0 1.6rem;
}
.c-drawer__close {
position: absolute;
top: 2rem;
right: 2rem;
background: none;
color: #fff;
border: none;
padding: 0.8rem;
cursor: pointer;
line-height: 1;
border-radius: 4px;
transition: background-color 0.2s ease, transform 0.2s ease;
}
@supports (top: env(safe-area-inset-top)) {
.c-drawer__close {
top: calc(2rem + env(safe-area-inset-top));
}
}
.c-drawer__close:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.c-drawer__close:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.c-drawer__close:active {
transform: scale(0.95);
}
.c-drawer__close svg {
width: 2.4rem;
height: 2.4rem;
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*
* コンポーネント : フィルター（再設計版）
* ファイル名 : _c-filter.scss
* 説明 : 1行レイアウトの検索・絞り込み・結果表示コンポーネント
* 外部ファイル : _variables.scss, _mixins.scss
*
* P2-9対応: フィルター機能の発見しやすさ改善
* - 視覚的なヒント（アイコン、パルスアニメーション）
* - フィルターヘッダーの追加
* - aria-expanded によるアクセシビリティ対応
*/
.c-filter {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
backdrop-filter: blur(12px);
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 16px;
padding: 20px;
margin-bottom: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.c-filter::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
}
.c-filter__header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}
.c-filter__title {
display: flex;
align-items: center;
gap: 8px;
font-size: 1.8rem;
font-weight: 700;
color: #232323;
margin: 0;
}
.c-filter__title::before {
content: "";
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22,3 2,3 10,12.46 10,19 14,21 14,12.46'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.c-filter__help {
font-size: 1.2rem;
color: #969696;
margin-left: auto;
}
.c-filter__toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(79, 70, 229, 0.04) 100%);
border: 1.5px solid rgba(99, 102, 241, 0.2);
border-radius: 12px;
font-size: 1.6rem;
font-weight: 500;
color: #6366f1;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-bottom: 16px;
}
.c-filter__toggle::before {
content: "";
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22,3 2,3 10,12.46 10,19 14,21 14,12.46'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.c-filter__toggle::after {
content: "";
width: 14px;
height: 14px;
margin-left: auto;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
transition: transform 0.3s ease;
}
.c-filter__toggle:hover {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(79, 70, 229, 0.08) 100%);
border-color: rgba(99, 102, 241, 0.4);
}
.c-filter__toggle:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 2px;
}
.c-filter__toggle[aria-expanded=true]::after {
transform: rotate(180deg);
}
.c-filter__toggle--attention {
animation: filter-pulse 2s ease-in-out 3;
}
.c-filter__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: #6366f1;
color: white;
font-size: 11px;
font-weight: 700;
border-radius: 10px;
margin-left: 8px;
}
.c-filter__search-row {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 16px;
align-items: center;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.c-filter__search-row {
grid-template-columns: 1fr;
gap: 12px;
}
}
.c-filter__search-group {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
}
.c-filter__search-input {
padding: 12px 16px 12px 50px;
border: 1.5px solid rgba(226, 232, 240, 0.8);
border-radius: 12px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.7) 100%);
backdrop-filter: blur(8px);
font-size: 1.6rem;
color: #232323;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.c-filter__search-input::placeholder {
color: #9ca3af;
font-size: 1.2rem;
}
.c-filter__search-input:hover {
border-color: rgba(99, 102, 241, 0.6);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
}
.c-filter__search-input:focus {
outline: none;
border-color: rgba(99, 102, 241, 0.8);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(99, 102, 241, 0.15);
transform: translateY(-1px);
}
.c-filter__search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
z-index: 2;
pointer-events: none;
}
.c-filter__search-button {
padding: 12px 20px;
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.c-filter__search-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.c-filter__search-button:hover {
background: linear-gradient(135deg, #5b5bf6 0%, #4338ca 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}
.c-filter__search-button:hover::before {
left: 100%;
}
.c-filter__search-button:active {
transform: translateY(0);
}
.c-filter__dropdown {
padding: 12px 16px;
border: 1.5px solid rgba(226, 232, 240, 0.8);
border-radius: 12px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.7) 100%);
backdrop-filter: blur(8px);
font-size: 1.6rem;
color: #232323;
cursor: pointer;
min-width: 160px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236366f1'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
padding-right: 40px;
}
.c-filter__dropdown:hover {
border-color: rgba(99, 102, 241, 0.6);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
}
.c-filter__dropdown:focus {
outline: none;
border-color: rgba(99, 102, 241, 0.8);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.c-filter__filter-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
@media (max-width: 768px) {
.c-filter__filter-row {
flex-direction: column;
align-items: stretch;
}
}
.c-filter__checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
@media (max-width: 768px) {
.c-filter__checkbox-group {
justify-content: center;
}
}
.c-filter__checkbox-item {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 8px 16px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(226, 232, 240, 0.6);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 1.2rem;
font-weight: 500;
color: #374151;
white-space: nowrap;
user-select: none;
min-height: 36px;
}
.c-filter__checkbox-item:hover {
background: rgba(99, 102, 241, 0.05);
border-color: rgba(99, 102, 241, 0.3);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}
.c-filter__checkbox-item--checked {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(79, 70, 229, 0.05) 100%);
border-color: rgba(99, 102, 241, 0.5);
color: #6366f1;
font-weight: 600;
}
.c-filter__checkbox-item--checked .c-filter__checkbox-icon {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
border-color: #6366f1;
}
.c-filter__checkbox-item--checked .c-filter__checkbox-icon::after {
opacity: 1;
transform: rotate(45deg) scale(1);
}
.c-filter__checkbox-input {
position: absolute;
opacity: 0;
width: 20px;
height: 20px;
margin: 0;
cursor: pointer;
}
.c-filter__checkbox-icon {
width: 20px;
height: 20px;
border: 2px solid rgba(203, 213, 225, 0.8);
border-radius: 6px;
background: rgba(255, 255, 255, 0.9);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
flex-shrink: 0;
}
.c-filter__checkbox-icon::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
opacity: 0;
transform: rotate(45deg) scale(0.8);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.c-filter__checkbox-label {
line-height: 1.2;
user-select: none;
}
.c-filter__checkbox-wrapper {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
width: 100%;
height: 100%;
}
.c-filter__result-info {
display: flex;
align-items: center;
gap: 16px;
}
@media (max-width: 768px) {
.c-filter__result-info {
justify-content: center;
width: 100%;
}
}
.c-filter__result-count {
font-size: 1.6rem;
font-weight: 600;
color: #232323;
padding: 8px 16px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(67, 56, 202, 0.04) 100%);
border-radius: 12px;
border-left: 3px solid #6366f1;
display: inline-flex;
align-items: center;
gap: 8px;
}
.c-filter__result-count::before {
content: "";
width: 8px;
height: 8px;
background: #6366f1;
border-radius: 50%;
opacity: 0.7;
flex-shrink: 0;
}
.c-filter__clear-button {
padding: 8px 16px;
background: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
color: #dc2626;
border: 1.5px solid rgba(248, 113, 113, 0.3);
border-radius: 12px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 6px;
}
.c-filter__clear-button:hover {
background: linear-gradient(135deg, rgba(248, 113, 113, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
border-color: rgba(248, 113, 113, 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(248, 113, 113, 0.2);
}
.c-filter__clear-button:active {
transform: translateY(0);
}
@keyframes filter-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
}
50% {
box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.2);
}
}
/* 低モーション設定のユーザー向けに動きを抑制 */
@media (prefers-reduced-motion: reduce) {
.c-filter, .c-filter * {
transition: none !important;
animation: none !important;
}
.c-filter__toggle[aria-expanded=true]::after {
transform: rotate(180deg);
}
}
/*
* ==================================================
* 画像グリッドコンポーネント
* ==================================================
* ファイル名 : _c-image-grid.scss
*
* 【機能概要】
* 複数の画像を美しいグリッドレイアウトで表示するためのコンポーネント。
* 商品一覧、ギャラリー、アイコングリッドなど様々な用途に対応。
* レスポンシブ対応で、画面サイズに応じて自動的に列数を調整します。
*
* 【主な特徴】
* - 自動レスポンシブ調整（アイテム数に応じた最適な列数）
* - 4つのスタイルバリエーション（default, box, border, shadow）
* - 見出しとキャプションの表示対応
* - ホバーエフェクト付き
* - アクセシビリティ対応
*
* ==================================================
* 使用方法
* ==================================================
*
* 【基本構造】
* 要素のクラス（レスポンシブ画像用）
* - WebP/AVIF等の新形式画像に対応
* - image-helper.phpが自動生成
*
* .c-image-grid__img : ![]()
要素のクラス
* - 実際の画像表示を制御
* - CSS変数による動的な表示調整が可能
*
* .c-image-grid__heading : 見出しテキスト（h4要素推奨）
* - SEO的に重要な画像タイトル
* - 中央寄せ、太字表示がデフォルト
*
* .c-image-grid__caption : 説明文（div要素）
* - HTML許可（strong, em, i, br タグ）
* - 複数行対応、中央寄せがデフォルト
*
* .c-image-grid__category: カテゴリ表示（オプション）
* - 主に製品一覧で使用
* - プライマリカラーで小さく表示
*
* .c-image-grid__maker : メーカー名表示（オプション）
* - 主に製品カテゴリページで使用
*
* .c-image-grid__model : モデル番号表示（メーカーページ用）
* - 主にメーカーページの製品一覧で使用
* - プライマリカラーで表示
*
* .c-image-grid__summary : 製品概要説明（日本語サマリー）
* - 製品の簡潔な説明テキスト
* - 1.4remサイズで表示
*
* .c-image-grid__filter-tags : フィルタータグコンテナ
* - filter_tags配列を表示するコンテナ
* - flexboxでタグを横並び表示
*
* .c-image-grid__filter-tag : 個別のフィルタータグ
* - 背景色付きの小さなタグ表示
* - 製品の特徴や分類を表示
* - 製品情報の補助的な表示用
* - グレーテキストで控えめに表示
*
* 【スタイルバリエーション（修飾子クラス）】
* 用途に応じて選択する表示スタイル
*
* --default : シンプルな標準スタイル
* - 背景: なし
* - ホバー: 効果なし
* - 用途: 基本的な画像一覧
*
* --box : グレー背景ボックススタイル
* - 背景: #f7f7f7
* - パディング: 20px
* - ホバー: 浮き上がり効果（translateY）+ 影
* - 用途: アプリケーション紹介、機能一覧
*
* --border : 枠線付きスタイル
* - 枠線: 1px solid #e0e0e0
* - パディング: 15px
* - ホバー: 枠線色変更（プライマリカラー）
* - 用途: 製品カタログ、ギャラリー
*
* --shadow : カード型スタイル（影付き）
* - 背景: 白
* - 角丸: 8px
* - 影: 0 2px 8px rgba(0,0,0,0.1)
* - ホバー: 浮き上がり強調 + 影拡大
* - 用途: モダンなUI、先進的なコンテンツ
*
* --product : 製品カード専用スタイル
* - 特殊なホバーアニメーション（四隅から枠線）
* - パディング: 25px
* - 角丸: 5px
* - 用途: 製品一覧ページ専用
*
* 【レスポンシブ設定（data-count属性）】
* アイテム数に応じた最適な列数を自動設定
*
* data-count="1" : 全画面サイズで1列
* - 画像を中央配置
* - アスペクト比自動
*
* data-count="2" : 全画面サイズで2列維持
* - モバイルでも2列表示
*
* data-count="3" : 標準的な3列グリッド
* - モバイル: 2列
* - タブレット: 2列
* - PC(992px〜): 3列
*
* data-count="4" : 4列グリッド
* - モバイル: 2列
* - タブレット: 2列
* - PC(992px〜): 4列
*
* data-count="5" : 大画面向け5列グリッド
* - モバイル: 2列
* - タブレット: 2列
* - PC(992px〜): 3列
* - 大画面(1200px〜): 5列
*
* data-count="6" : 大画面向け6列グリッド
* - モバイル: 2列
* - タブレット: 2列
* - PC(992px〜): 3列
* - 大画面(1200px〜): 6列
*
* data-count="7+" : 7個以上の場合
* - auto-fit による自動調整
* - 最小幅: モバイル200px / PC250px
*
* 【列数固定クラス（オプション）】
* data-countより優先される固定列数指定
*
* --col-3 : PC以上で3列固定
* - モバイル/タブレットは2列
* - 用途: 確実に3列表示したい場合
*
* --col-4 : PC以上で4列固定
* - モバイル/タブレットは2列
* - 用途: 商品一覧等で4列固定したい場合
*
* --col-5 : 大画面で5列固定
* - 1200px未満は3列
* - 用途: 多数のアイテムを効率的に表示
*
* --col-6 : 大画面で6列固定
* --col-7 : 大画面で7列固定
* --col-8 : 大画面で8列固定
* - 1200px未満は3列
* - 用途: アイコングリッド等の大量表示
*
* 【ブレークポイント】
* $breakpoint-sm : 576px （スマートフォン横向き）
* $breakpoint-md : 768px （タブレット）
* $breakpoint-lg : 992px （PC）
* $breakpoint-xl : 1200px （大画面）
*/
.c-image-grid {
display: grid;
gap: 2.4rem;
justify-content: center;
width: 100%;
}
.c-image-grid__item a {
display: block;
text-decoration: none;
}
.c-image-grid__img {
width: 100%;
max-width: var(--image-max-width, none);
height: var(--image-height, auto);
object-fit: var(--image-object-fit, cover);
display: block;
margin: 0 auto;
}
.c-image-grid__heading {
margin-top: 0.8rem;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.3;
color: #232323;
text-align: center;
}
.c-image-grid__caption {
margin-top: 0.4rem;
font-size: 1.6rem;
line-height: 1.5;
color: #333333;
text-align: center;
}
.c-image-grid__category {
color: #bc008b;
font-size: 1rem;
margin-top: 0.8rem;
text-align: center;
}
.c-image-grid__maker {
font-size: 1rem;
color: #969696;
margin-top: 0.4rem;
text-align: center;
}
.c-image-grid__summary {
font-size: 1.4rem;
color: #232323;
margin-top: 0.4rem;
text-align: center;
line-height: 1.6;
}
.c-image-grid__features {
font-size: 1rem;
color: #969696;
margin-top: 0.4rem;
text-align: center;
line-height: 1.5;
}
.c-image-grid__model {
font-size: 1.2rem;
font-weight: 500;
color: #bc008b;
margin-top: 0.4rem;
text-align: center;
}
.c-image-grid__slug {
font-size: 1.4rem;
color: #969696;
margin-top: 0.4rem;
text-align: center;
}
/* ========================================
* 自動列数調整（データ属性による制御）
* ======================================== */
.c-image-grid[data-count] {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.c-image-grid[data-count] {
grid-template-columns: repeat(2, 1fr);
}
}
.c-image-grid[data-count="1"] {
grid-template-columns: 1fr;
margin: 0 auto;
}
.c-image-grid[data-count="1"] .c-image-grid__img {
aspect-ratio: auto;
}
.c-image-grid[data-count="2"] {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.c-image-grid[data-count="2"] {
grid-template-columns: repeat(2, 1fr);
}
}
.c-image-grid[data-count="3"] {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.c-image-grid[data-count="3"] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.c-image-grid[data-count="3"] {
grid-template-columns: repeat(3, 1fr);
}
}
.c-image-grid[data-count="4"] {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.c-image-grid[data-count="4"] > .c-image-grid__item {
flex: 0 1 calc(50% - 1.2rem);
max-width: calc(50% - 1.2rem);
}
@media (min-width: 768px) {
.c-image-grid[data-count="4"] > .c-image-grid__item {
flex: 0 1 calc(50% - 1.2rem);
max-width: calc(50% - 1.2rem);
}
}
@media (min-width: 992px) {
.c-image-grid[data-count="4"] > .c-image-grid__item {
flex: 0 1 calc(25% - 1.8rem);
max-width: calc(25% - 1.8rem);
}
}
.c-image-grid[data-count="4"].c-image-grid--center {
justify-content: center;
}
.c-image-grid[data-count="5"] {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.c-image-grid[data-count="5"] > .c-image-grid__item {
flex: 0 1 calc(50% - 1.2rem);
max-width: calc(50% - 1.2rem);
}
@media (min-width: 768px) {
.c-image-grid[data-count="5"] > .c-image-grid__item {
flex: 0 1 calc(50% - 1.2rem);
max-width: calc(50% - 1.2rem);
}
}
@media (min-width: 992px) {
.c-image-grid[data-count="5"] > .c-image-grid__item {
flex: 0 1 calc(33.333% - 1.6rem);
max-width: calc(33.333% - 1.6rem);
}
}
@media (min-width: 1200px) {
.c-image-grid[data-count="5"] > .c-image-grid__item {
flex: 0 1 calc(20% - 1.92rem);
max-width: 200px;
}
}
.c-image-grid[data-count="5"].c-image-grid--center {
justify-content: center;
}
.c-image-grid[data-count="6"] {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.c-image-grid[data-count="6"] > .c-image-grid__item {
flex: 0 1 calc(50% - 1.2rem);
max-width: calc(50% - 1.2rem);
}
@media (min-width: 768px) {
.c-image-grid[data-count="6"] > .c-image-grid__item {
flex: 0 1 calc(50% - 1.2rem);
max-width: calc(50% - 1.2rem);
}
}
@media (min-width: 992px) {
.c-image-grid[data-count="6"] > .c-image-grid__item {
flex: 0 1 calc(33.333% - 1.6rem);
max-width: calc(33.333% - 1.6rem);
}
}
@media (min-width: 1200px) {
.c-image-grid[data-count="6"] > .c-image-grid__item {
flex: 0 1 calc(16.666% - 2rem);
max-width: 180px;
}
}
.c-image-grid[data-count="6"].c-image-grid--center {
justify-content: center;
}
.c-image-grid[data-count="7"] {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.c-image-grid[data-count="7"] > .c-image-grid__item {
flex: 0 1 calc(50% - 1.2rem);
max-width: calc(50% - 1.2rem);
}
@media (min-width: 768px) {
.c-image-grid[data-count="7"] > .c-image-grid__item {
flex: 0 1 calc(33.333% - 1.6rem);
max-width: calc(33.333% - 1.6rem);
}
}
@media (min-width: 992px) {
.c-image-grid[data-count="7"] > .c-image-grid__item {
flex: 0 1 calc(25% - 1.8rem);
max-width: calc(25% - 1.8rem);
}
}
@media (min-width: 1200px) {
.c-image-grid[data-count="7"] > .c-image-grid__item {
flex: 0 1 calc(14.285% - 2.0571428571rem);
max-width: 160px;
}
}
.c-image-grid[data-count="7"].c-image-grid--center {
justify-content: center;
}
.c-image-grid[data-count="8"] {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.c-image-grid[data-count="8"] > .c-image-grid__item {
flex: 0 1 calc(50% - 1.2rem);
max-width: calc(50% - 1.2rem);
}
@media (min-width: 768px) {
.c-image-grid[data-count="8"] > .c-image-grid__item {
flex: 0 1 calc(25% - 1.8rem);
max-width: calc(25% - 1.8rem);
}
}
@media (min-width: 992px) {
.c-image-grid[data-count="8"] > .c-image-grid__item {
flex: 0 1 calc(25% - 1.8rem);
max-width: calc(25% - 1.8rem);
}
}
@media (min-width: 1200px) {
.c-image-grid[data-count="8"] > .c-image-grid__item {
flex: 0 1 calc(12.5% - 2.1rem);
max-width: 150px;
}
}
.c-image-grid[data-count="8"].c-image-grid--center {
justify-content: center;
}
.c-image-grid[data-count]:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"]):not([data-count="5"]):not([data-count="6"]) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.c-image-grid[data-count]:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"]):not([data-count="5"]):not([data-count="6"]) {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
@media (min-width: 992px) {
.c-image-grid[data-count]:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"]):not([data-count="5"]):not([data-count="6"]) {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
/* ========================================
* スタイルバリエーション
* ======================================== */
.c-image-grid--default .c-image-grid__item {
background: #fff;
}
.c-image-grid--product {
gap: 25px;
}
.c-image-grid--product .c-image-grid__item {
background: #fff;
border-radius: 5px;
box-shadow: 0px 10px 10px -3px rgba(0, 0, 0, 0.1);
z-index: 10;
overflow: visible;
position: relative;
}
.c-image-grid--product .c-image-grid__item a {
position: relative;
padding: 25px 25px 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.c-image-grid--product .c-image-grid__item a:before, .c-image-grid--product .c-image-grid__item a:after {
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border: 3px solid transparent;
}
.c-image-grid--product .c-image-grid__item a:before {
top: -3px;
left: -3px;
}
.c-image-grid--product .c-image-grid__item a:after {
bottom: -3px;
right: -3px;
}
.c-image-grid--product .c-image-grid__item a:hover {
color: #bc008b;
}
.c-image-grid--product .c-image-grid__item a:hover::before, .c-image-grid--product .c-image-grid__item a:hover::after {
width: calc(100% + 6px);
height: calc(100% + 6px);
}
.c-image-grid--product .c-image-grid__item a:hover::before {
border-bottom-color: #bc008b;
border-left-color: #bc008b;
transition: height 0.2s, width 0.2s 0.2s;
}
.c-image-grid--product .c-image-grid__item a:hover::after {
border-top-color: #bc008b;
border-right-color: #bc008b;
transition: height 0.2s, width 0.2s 0.2s;
}
.c-image-grid--product .c-image-grid__img {
width: 100%;
max-width: var(--image-max-width, none);
height: var(--image-height, auto);
aspect-ratio: var(--image-aspect-ratio, 1/1);
object-fit: var(--image-object-fit, cover);
display: block;
margin: 0 auto;
}
.c-image-grid--product .c-image-grid__category {
text-align: left;
margin-top: 1.6rem;
padding: 0;
font-size: 1.35rem;
line-height: 1.7;
}
.c-image-grid--product .c-image-grid__maker {
text-align: left;
font-size: 1.1rem;
padding: 5px 0;
}
.c-image-grid--product .c-image-grid__heading {
font-size: 2.2rem;
text-align: left;
margin-top: 5px;
}
.c-image-grid--product .c-image-grid__caption {
font-size: 1.6rem;
text-align: left;
margin-top: 0.8rem;
padding-top: 10px;
}
.c-image-grid--product:not([class*="--col-"]) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 992px) {
.c-image-grid--product:not([class*="--col-"]) {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.c-image-grid--product:not([class*="--col-"]) {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.c-image-grid--product {
gap: 20px;
}
.c-image-grid--product .c-image-grid__item a {
padding: 15px 15px 10px;
}
.c-image-grid--product .c-image-grid__category {
font-size: 11px;
padding: 10px 0 0;
}
.c-image-grid--product .c-image-grid__maker {
font-size: 0.8rem;
}
.c-image-grid--product .c-image-grid__heading {
font-size: 1.3rem;
}
}
.c-image-grid--box {
gap: 20px;
}
.c-image-grid--box .c-image-grid__item {
background: #f7f7f7;
padding: 10px;
border-radius: 0;
}
.c-image-grid--box .c-image-grid__item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.c-image-grid--box .c-image-grid__item a {
padding: 0;
}
.c-image-grid--box .c-image-grid__img {
width: 100%;
max-width: var(--image-max-width, none);
height: var(--image-height, auto);
aspect-ratio: var(--image-aspect-ratio, 1/1);
object-fit: var(--image-object-fit, contain);
display: block;
margin: 0 auto;
}
.c-image-grid--box .c-image-grid__heading {
font-size: 2rem;
text-align: center;
}
.c-image-grid--box .c-image-grid__caption {
font-size: 1.4rem;
text-align: center;
color: #232323;
line-height: 1.6;
}
.c-image-grid--box .c-image-grid__caption strong {
font-weight: 700;
color: #9c0071;
}
.c-image-grid--box .c-image-grid__caption em, .c-image-grid--box .c-image-grid__caption i {
font-style: italic;
}
.c-image-grid--box:not([class*="--col-"]) {
grid-template-columns: 1fr;
}
@media (min-width: 992px) {
.c-image-grid--box:not([class*="--col-"]) {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.c-image-grid--box .c-image-grid__item {
padding: 15px;
}
}
.c-image-grid--shadow {
gap: 25px;
}
.c-image-grid--shadow .c-image-grid__item {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
}
.c-image-grid--shadow .c-image-grid__item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.c-image-grid--shadow .c-image-grid__item a {
display: block;
padding: 0;
}
.c-image-grid--shadow .c-image-grid__img {
width: 100%;
max-width: var(--image-max-width, none);
height: var(--image-height, 200px);
aspect-ratio: var(--image-aspect-ratio, 16/9);
object-fit: var(--image-object-fit, cover);
display: block;
}
.c-image-grid--shadow .c-image-grid__heading {
font-size: 1.8rem;
font-weight: 700;
padding: 15px 20px 5px;
text-align: left;
}
.c-image-grid--shadow .c-image-grid__caption {
font-size: 1.4rem;
padding: 5px 20px 20px;
text-align: left;
color: #969696;
line-height: 1.6;
}
.c-image-grid--shadow .c-image-grid__caption strong {
font-weight: 700;
color: #9c0071;
}
.c-image-grid--shadow .c-image-grid__caption em, .c-image-grid--shadow .c-image-grid__caption i {
font-style: italic;
}
.c-image-grid--shadow:not([class*="--col-"]) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 992px) {
.c-image-grid--shadow:not([class*="--col-"]) {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.c-image-grid--shadow {
gap: 15px;
}
.c-image-grid--shadow .c-image-grid__item {
border-radius: 4px;
}
.c-image-grid--shadow .c-image-grid__heading {
font-size: 1.5rem;
padding: 10px 15px 3px;
}
.c-image-grid--shadow .c-image-grid__caption {
font-size: 1.3rem;
padding: 3px 15px 15px;
}
}
.c-image-grid--border .c-image-grid__item {
border: 1px solid #eee;
padding: 15px;
background: #fff;
position: relative;
overflow: visible;
}
.c-image-grid--border .c-image-grid__item:before, .c-image-grid--border .c-image-grid__item:after {
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border: 3px solid transparent;
pointer-events: none;
}
.c-image-grid--border .c-image-grid__item:before {
top: 0;
left: 0;
}
.c-image-grid--border .c-image-grid__item:after {
bottom: 0;
right: 0;
}
.c-image-grid--border .c-image-grid__item:hover::before, .c-image-grid--border .c-image-grid__item:hover::after {
width: 100%;
height: 100%;
}
.c-image-grid--border .c-image-grid__item:hover::before {
border-bottom-color: #bc008b;
border-left-color: #bc008b;
transition: height 0.2s, width 0.2s 0.2s;
}
.c-image-grid--border .c-image-grid__item:hover::after {
border-top-color: #bc008b;
border-right-color: #bc008b;
transition: height 0.2s, width 0.2s 0.2s;
}
.c-image-grid--border .c-image-grid__item a {
display: block;
position: relative;
color: inherit;
text-decoration: none;
}
.c-image-grid--border .c-image-grid__item a:hover {
color: #bc008b;
}
.c-image-grid--border .c-image-grid__img {
width: 100%;
max-width: var(--image-max-width, none);
height: var(--image-height, auto);
aspect-ratio: var(--image-aspect-ratio, 3/2);
object-fit: var(--image-object-fit, contain);
display: block;
margin: 10px auto;
}
.c-image-grid--border .c-image-grid__heading {
font-size: 2rem;
}
.c-image-grid--border .c-image-grid__caption {
font-size: 1.4rem;
}
.c-image-grid--border:not([class*="--col-"]) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 992px) {
.c-image-grid--border:not([class*="--col-"]) {
grid-template-columns: repeat(4, 1fr);
}
}
.c-image-grid--border-static .c-image-grid__item {
border: 1px solid #eee;
padding: 15px;
background: #fff;
position: relative;
}
.c-image-grid--border-static .c-image-grid__item a {
display: block;
position: relative;
color: inherit;
text-decoration: none;
}
.c-image-grid--border-static .c-image-grid__img {
width: 100%;
max-width: var(--image-max-width, none);
height: var(--image-height, auto);
aspect-ratio: var(--image-aspect-ratio, 3/2);
object-fit: var(--image-object-fit, contain);
display: block;
margin: 10px auto;
}
.c-image-grid--border-static .c-image-grid__model {
font-size: 1.4rem;
font-weight: 500;
text-align: left;
margin-top: 8px;
margin-bottom: 4px;
color: #bc008b;
}
.c-image-grid--border-static .c-image-grid__heading {
font-size: 1.6rem;
font-weight: 700;
text-align: left;
margin-top: 10px;
color: #232323;
}
.c-image-grid--border-static .c-image-grid__caption {
font-size: 1.2rem;
}
.c-image-grid--border-static .c-image-grid__summary {
font-size: 1.4rem;
text-align: left;
margin-top: 8px;
color: #232323;
line-height: 1.6;
}
.c-image-grid--border-static .c-image-grid__filter-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
padding-top: 10px;
}
.c-image-grid--border-static .c-image-grid__filter-tag {
display: inline-block;
padding: 3px 8px;
font-size: 1.2rem;
background-color: #f0f0f0;
border-radius: 3px;
color: #969696;
white-space: nowrap;
}
.c-image-grid--border-static:not([class*="--col-"]) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 992px) {
.c-image-grid--border-static:not([class*="--col-"]) {
grid-template-columns: repeat(4, 1fr);
}
}
.c-image-grid--border-maker {
gap: 20px;
}
.c-image-grid--border-maker .c-image-grid__item {
border: 1px solid #eee;
padding: 15px;
background: #fff;
position: relative;
overflow: visible;
transition: all 0.3s ease;
}
.c-image-grid--border-maker .c-image-grid__item:before, .c-image-grid--border-maker .c-image-grid__item:after {
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border: 3px solid transparent;
pointer-events: none;
}
.c-image-grid--border-maker .c-image-grid__item:before {
top: 0;
left: 0;
}
.c-image-grid--border-maker .c-image-grid__item:after {
bottom: 0;
right: 0;
}
.c-image-grid--border-maker .c-image-grid__item:hover::before, .c-image-grid--border-maker .c-image-grid__item:hover::after {
width: 100%;
height: 100%;
}
.c-image-grid--border-maker .c-image-grid__item:hover::before {
border-bottom-color: #bc008b;
border-left-color: #bc008b;
transition: height 0.2s, width 0.2s 0.2s;
}
.c-image-grid--border-maker .c-image-grid__item:hover::after {
border-top-color: #bc008b;
border-right-color: #bc008b;
transition: height 0.2s, width 0.2s 0.2s;
}
.c-image-grid--border-maker .c-image-grid__item a {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
color: inherit;
text-decoration: none;
}
.c-image-grid--border-maker .c-image-grid__item a:hover {
color: #bc008b;
}
.c-image-grid--border-maker .c-image-grid__img {
width: 100%;
max-width: var(--image-max-width, none);
height: var(--image-height, auto);
aspect-ratio: var(--image-aspect-ratio, 1/1);
object-fit: var(--image-object-fit, contain);
display: block;
margin: 0 auto 15px;
}
.c-image-grid--border-maker .c-image-grid__maker {
font-size: 1.2rem;
text-align: left;
margin-top: 8px;
margin-bottom: 8px;
color: #969696;
}
.c-image-grid--border-maker .c-image-grid__heading {
font-size: 1.8rem;
font-weight: 700;
text-align: left;
margin-top: 10px;
color: #232323;
}
.c-image-grid--border-maker .c-image-grid__summary {
font-size: 1.4rem;
text-align: left;
margin-top: 8px;
color: #232323;
line-height: 1.6;
}
.c-image-grid--border-maker .c-image-grid__model {
font-size: 1.4rem;
font-weight: 500;
text-align: left;
margin-top: 8px;
margin-bottom: 4px;
color: #bc008b;
}
.c-image-grid--border-maker .c-image-grid__filter-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
padding-top: 10px;
}
.c-image-grid--border-maker .c-image-grid__filter-tag {
display: inline-block;
padding: 3px 8px;
font-size: 1.2rem;
background-color: #f0f0f0;
border-radius: 3px;
color: #969696;
white-space: nowrap;
}
.c-image-grid--border-maker .c-image-grid__features {
font-size: 1.3rem;
text-align: left;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid #f0f0f0;
color: #969696;
line-height: 1.5;
}
.c-image-grid--border-maker .c-compare-btn {
margin-top: 12px;
width: 100%;
justify-content: center;
}
.c-image-grid--border-maker:not([class*="--col-"]) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 992px) {
.c-image-grid--border-maker:not([class*="--col-"]) {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.c-image-grid--border-maker:not([class*="--col-"]) {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.c-image-grid--border-maker {
gap: 15px;
}
.c-image-grid--border-maker .c-image-grid__item {
padding: 15px;
}
.c-image-grid--border-maker .c-image-grid__item a {
padding: 8px;
margin: -8px;
}
.c-image-grid--border-maker .c-image-grid__heading {
font-size: 1.5rem;
margin-top: 8px;
}
.c-image-grid--border-maker .c-image-grid__summary {
font-size: 1.3rem;
margin-top: 6px;
}
.c-image-grid--border-maker .c-image-grid__features {
font-size: 1.2rem;
margin-top: 8px;
padding-top: 8px;
}
.c-image-grid--border-maker .c-compare-btn {
margin-top: 10px;
padding: 6px 10px;
}
}
/* ========================================
* 固定列数バリエーション
* ======================================== */
.c-image-grid--col-2 {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.c-image-grid--col-2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.c-image-grid--col-2 {
grid-template-columns: repeat(2, 1fr);
}
}
.c-image-grid--col-2.c-image-grid--center {
grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
}
@media (min-width: 992px) {
.c-image-grid--col-2.c-image-grid--center {
grid-template-columns: repeat(auto-fit, minmax(350px, 450px));
}
}
.c-image-grid--col-3 {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.c-image-grid--col-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.c-image-grid--col-3 {
grid-template-columns: repeat(3, 1fr);
}
}
.c-image-grid--col-4 {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.c-image-grid--col-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.c-image-grid--col-4 {
grid-template-columns: repeat(4, 1fr);
}
}
.c-image-grid--col-5 {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.c-image-grid--col-5 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.c-image-grid--col-5 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.c-image-grid--col-5 {
grid-template-columns: repeat(5, 1fr);
}
}
.c-image-grid--col-6 {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.c-image-grid--col-6 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.c-image-grid--col-6 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1200px) {
.c-image-grid--col-6 {
grid-template-columns: repeat(6, 1fr);
}
}
.c-image-grid--col-7 {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.c-image-grid--col-7 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.c-image-grid--col-7 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1200px) {
.c-image-grid--col-7 {
grid-template-columns: repeat(7, 1fr);
}
}
.c-image-grid--col-8 {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.c-image-grid--col-8 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 992px) {
.c-image-grid--col-8 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1200px) {
.c-image-grid--col-8 {
grid-template-columns: repeat(8, 1fr);
}
}
.c-image-grid--accessory .c-image-grid__model {
text-align: center;
font-weight: 700;
font-size: 1.8rem;
color: #bc008b;
}
.c-image-grid--accessory .c-image-grid__summary {
text-align: left;
font-size: 1.4rem;
color: #232323;
}
/* ========================================
* アクセシビリティ
* ======================================== */
.c-image-grid__item a:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.c-image-grid__item {
transition: none;
}
.c-image-grid__item:hover {
transform: none;
box-shadow: none;
}
}
.c-image-grid--center {
justify-content: center;
}
.c-image-grid--center[data-count="1"], .c-image-grid--center[data-count="3"] {
grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
}
@media (min-width: 992px) {
.c-image-grid--center[data-count="1"], .c-image-grid--center[data-count="3"] {
grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
}
}
/* ===================================
* コンポーネント : 画像テキスト組み合わせ表示（c-image-text）
* ファイル名 : _c-image-text.scss
* ===================================
*
* 【概要・目的】
* 企業サイト、サービス紹介、製品カタログ、記事ページなどで頻繁に使用される
* 「画像1枚 + テキストコンテンツ」の組み合わせ表示を美しく、アクセシブルに
* 実現するための汎用性の高いレスポンシブコンポーネントです。
*
* 単なるレイアウトコンポーネントではなく、以下の課題解決を目的として設計：
* ✓ レスポンシブ対応の煩雑さを解消
* ✓ 画像の歪み・切れの問題を解決
* ✓ アクセシビリティ要件への対応
* ✓ SEO最適化の自動化
* ✓ ブランド統一感のあるデザイン
*
* 【特徴・強み】
* ◆ 柔軟な比率設定（7パターン）
* 20:80, 30:70, 40:60, 50:50, 60:40, 70:30, 80:20
* コンテンツの性質に応じて最適な比率を選択可能
*
* ◆ 多様なアスペクト比対応（5パターン）
* 16:9（動画・ワイド画像）、3:2（写真）、4:3（標準）、1:1（アイコン）、9:16（縦長）
* メディアタイプに適した表示形式を自動選択
*
* ◆ 高度なレスポンシブ設計
* モバイルファースト思想で縦並び→横並びの自然な変化
* ブレークポイント768px（md）で自動切り替え
*
* ◆ アクセシビリティ完全対応
* WCAG 2.1 AA準拠、スクリーンリーダー最適化
* キーボードナビゲーション、高コントラストモード対応
* 前庭障害者向けのモーション制御機能
*
* ◆ SEO最適化機能
* セマンティックHTML、構造化データ対応
* 画像遅延読み込み、適切なalt属性管理
*
* 【技術仕様】
* ◆ 使用技術
* - CSS Flexbox: レイアウトの基礎
* - CSS aspect-ratio: 画像比率の制御
* - object-fit: contain: 画像歪み防止
* - CSS Custom Properties: テーマ対応
* - Media Queries: レスポンシブ対応
*
* ◆ 依存関係
* 必須: _variables.scss（カラー、スペーシング、フォント変数）
* 必須: _mixins.scss（media-up、transition ミックスイン）
* 推奨: image-helper.php（画像最適化ヘルパー）
* 互換: normalize.css、reset.css
*
* ◆ ブラウザサポート
* ✓ Chrome 88+ / Firefox 87+ / Safari 14+ / Edge 88+
* ✓ iOS Safari 14+ / Android Chrome 88+
* ⚠ IE11: 基本レイアウトのみ（aspect-ratio無効）
* ✗ IE10以下: 非対応
*
* ◆ パフォーマンス指標
* - CSS圧縮後: 約6KB
* - レンダリング: 60fps維持
* - CLS（Cumulative Layout Shift）: 0.1以下
* - 画像読み込み: WebP推奨、遅延読み込み対応
*
* 【セキュリティ・品質】
* ◆ XSS対策: HTMLインジェクション防止、適切なエスケープ処理
* ◆ CSP対応: Content Security Policy準拠
* ◆ 品質保証: コードレビュー済み、クロスブラウザ検証済み
* ◆ アクセシビリティ監査済み、WAI-ARIA準拠
*/
.c-image-text {
display: flex;
flex-direction: column;
gap: 4rem;
margin-bottom: 2.4rem;
}
.c-image-text[role=region] {
scroll-margin-top: 4rem;
}
.c-image-text__media {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 5px;
}
.c-image-text__media:focus-within {
outline: 3px solid #0066cc;
outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(0, 102, 204, 0.2);
}
@media (forced-colors: active) {
.c-image-text__media {
border: 2px solid ButtonText;
}
}
.c-image-text--ratio-16-9 .c-image-text__media {
aspect-ratio: 16/9;
}
.c-image-text--ratio-3-2 .c-image-text__media {
aspect-ratio: 3/2;
}
.c-image-text--ratio-1-1 .c-image-text__media {
aspect-ratio: 1/1;
}
.c-image-text--ratio-9-16 .c-image-text__media {
aspect-ratio: 9/16;
}
.c-image-text__img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform 0.2s ease;
}
.c-image-text__img:focus {
outline: 3px solid #0066cc;
outline-offset: -3px;
}
.c-image-text__img:hover, .c-image-text__img:focus {
transform: scale(1.02);
}
@media (forced-colors: active) {
.c-image-text__img {
outline: 1px solid ButtonText;
}
}
.c-image-text__link {
display: block;
text-decoration: none;
border-radius: 5px;
transition: box-shadow 0.2s ease;
}
.c-image-text__link:focus {
outline: 3px solid #0066cc;
outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(0, 102, 204, 0.2);
}
.c-image-text__link:active {
transform: scale(0.98);
}
.c-image-text__link[aria-describedby] {
position: relative;
}
.c-image-text__title {
font-size: 3.6rem;
font-weight: 700;
color: #232323;
margin: 0 0 1.6rem;
line-height: 1.3;
}
.c-image-text__title[tabindex="0"]:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
background-color: rgba(0, 102, 204, 0.1);
border-radius: 4px;
}
.c-image-text__content {
color: #232323;
line-height: 1.6;
}
.c-image-text__content p {
margin: 0 0 1.6rem;
}
.c-image-text__content h5 {
font-size: 1.8rem;
font-weight: 900;
margin: 1.6rem 0 0.8rem;
line-height: 1.3;
}
.c-image-text__content ul {
list-style: none;
padding: 0;
margin: 1.6rem 0;
}
.c-image-text__content ul li {
position: relative;
padding-left: 2.4rem;
margin-bottom: 1.6rem;
line-height: 1.9;
}
.c-image-text__content ul li::before {
content: "✓";
position: absolute;
left: 0;
top: 0.1em;
color: #bc008b;
font-weight: 700;
font-size: 1.1em;
}
@media (forced-colors: active) {
.c-image-text__content ul li::before {
color: GrayText;
content: "• ";
}
}
.c-image-text__body[role=article] {
position: relative;
}
.c-image-text__body h3,
.c-image-text__body h4 {
color: #232323;
line-height: 1.3;
}
.c-image-text__body h3[tabindex="0"]:focus,
.c-image-text__body h4[tabindex="0"]:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
background-color: rgba(0, 102, 204, 0.1);
border-radius: 4px;
}
.c-image-text__body h3 {
font-size: 2.4rem;
font-weight: 700;
margin: 0 0 1.6rem;
}
.c-image-text__body h3[data-level=primary]::before {
content: "●";
color: #bc008b;
margin-right: 0.4rem;
font-size: 0.8em;
vertical-align: middle;
}
.c-image-text__body h4 {
font-size: 2.4rem;
font-weight: 700;
color: #bc008b;
margin: 1.6rem 0 0.8rem;
}
.c-image-text__body ul {
list-style: none;
padding: 0;
margin: 1.6rem 0;
}
.c-image-text__body ul[role=list] {
position: relative;
}
.c-image-text__body ul li {
position: relative;
padding-left: 2.4rem;
margin-bottom: 1.6rem;
line-height: 1.9;
}
.c-image-text__body ul li::before {
content: "✓";
position: absolute;
left: 0;
top: 0.1em;
color: #bc008b;
font-weight: 700;
font-size: 1.1em;
}
@media (forced-colors: active) {
.c-image-text__body ul li::before {
color: GrayText;
content: "• ";
}
}
/* レスポンシブ */
@media (min-width: 768px) {
.c-image-text {
flex-direction: row;
align-items: center;
}
.c-image-text__media {
flex: 0 0 40%;
}
.c-image-text__body {
flex: 1;
}
.c-image-text--reverse {
flex-direction: row-reverse;
}
.c-image-text--20-80 .c-image-text__media {
flex: 0 0 20%;
}
.c-image-text--20-80 .c-image-text__body {
flex: 1;
}
.c-image-text--30-70 .c-image-text__media {
flex: 0 0 30%;
}
.c-image-text--30-70 .c-image-text__body {
flex: 1;
}
.c-image-text--40-60 .c-image-text__media {
flex: 0 0 40%;
}
.c-image-text--40-60 .c-image-text__body {
flex: 1;
}
.c-image-text--50-50 .c-image-text__media,
.c-image-text--50-50 .c-image-text__body {
flex: 1;
}
.c-image-text--60-40 .c-image-text__media {
flex: 0 0 60%;
}
.c-image-text--60-40 .c-image-text__body {
flex: 1;
}
.c-image-text--70-30 .c-image-text__media {
flex: 0 0 70%;
}
.c-image-text--70-30 .c-image-text__body {
flex: 1;
}
.c-image-text--80-20 .c-image-text__media {
flex: 0 0 80%;
}
.c-image-text--80-20 .c-image-text__body {
flex: 1;
}
}
/* ===================================
* アクセシビリティ：モーション設定への配慮
* ===================================
* ユーザーが動きを抑制したい場合の対応
* 前庭障害、乗り物酔い、注意力散漫の改善
*/
@media (prefers-reduced-motion: reduce) {
.c-image-text__img {
transition: none;
}
.c-image-text__img:hover {
transform: none;
}
.c-image-text__link:active {
transform: none;
}
}
/* ===================================
* 印刷スタイル
* ===================================
* 印刷時の最適化
*/
@media print {
.c-image-text {
flex-direction: column !important;
page-break-inside: avoid;
}
.c-image-text__img {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
.c-image-text__link[href]:after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
}
/*
* コンポーネント名：イントロテキスト
* ファイル：assets/scss/components/_c-intro-text.scss
* 説明：ページ冒頭のイントロダクションテキスト
* 用途：ハブページ、カテゴリページなどのリード文
* 依存：foundation/_variables.scss, foundation/_mixins.scss
*/
.c-intro-text {
max-width: 800px;
margin: 0 auto;
text-align: center;
padding: 1.6rem 0;
}
.c-intro-text__lead {
font-size: 1.8rem;
line-height: 1.8;
color: #333333;
margin-bottom: 1.6rem;
}
.c-intro-text__lead strong {
color: #d4009e;
font-weight: 700;
}
.c-intro-text__body {
font-size: 1.6rem;
line-height: 1.8;
color: #969696;
margin: 0;
}
.c-intro-text__body a {
color: #d4009e;
text-decoration: underline;
text-underline-offset: 2px;
}
.c-intro-text__body a:hover {
color: #bc008b;
}
@media (max-width: 767px) {
.c-intro-text {
padding: 0.8rem 0;
}
.c-intro-text__lead {
font-size: 1.6rem;
}
.c-intro-text__body {
font-size: 1.2rem;
}
}
/**
* ============================================================
* Key Takeaways コンポーネント スタイル
* ============================================================
*
* ファイル名: /assets/scss/components/_c-key-takeaways.scss
* バージョン: 1.0
* 作成日: 2025年12月
*
* 【概要】
* 記事中盤に配置する「この記事のポイント」ボックスのスタイル。
* BEM命名規則に準拠。
*
* 【デザイントークン】
* - 背景: $color-background-light-green
* - アクセント: $color-success
* - テキスト: $color-text
* - スペーシング: 8ptグリッド準拠
*
* ============================================================
*/
.c-key-takeaways {
margin: 4rem 0;
padding: 2.4rem;
background: linear-gradient(135deg, rgba(46, 125, 50, 0.08) 0%, rgba(46, 125, 50, 0.02) 100%);
border-left: 4px solid #2e7d32;
border-radius: 0 8px 8px 0;
}
.c-key-takeaways__title {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 0 0 1.6rem;
font-size: 1.6rem;
font-weight: 700;
color: rgb(32.2807017544, 87.7192982456, 35.0877192982);
line-height: 1.3;
}
.c-key-takeaways__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: #2e7d32;
}
.c-key-takeaways__list {
margin: 0;
padding: 0;
list-style: none;
}
.c-key-takeaways__item {
position: relative;
padding-left: 2.4rem;
margin-bottom: 0.8rem;
font-size: 1.6rem;
line-height: 1.7;
color: #232323;
}
.c-key-takeaways__item::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 8px;
height: 8px;
background: #2e7d32;
border-radius: 50%;
}
.c-key-takeaways__item:last-child {
margin-bottom: 0;
}
@media (min-width: 768px) {
.c-key-takeaways {
padding: 2.4rem 4rem;
}
.c-key-takeaways__title {
font-size: 1.8rem;
}
}
.p-article__body .c-key-takeaways {
margin-top: 4rem;
margin-bottom: 4rem;
}
/*
* コンポーネント : ナビゲーション
* ファイル名 : _c-nav.scss
* 説明 : モバイル専用ドロワーメニュー内のナビゲーション。言語切替、検索フォーム、メニューリストを含む。
* 外部ファイル : _variables.scss, _mixins.scss
* 使用方法 :
*/
.c-nav {
width: 100%;
padding: 0;
background-color: #000e28;
color: #fff;
--focus-ring-color: var(--focus-ring-on-dark);
/* 100vh問題対策：順次フォールバック */
height: 100vh;
height: 100svh;
height: 100dvh;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
will-change: transform, opacity;
transform: translateZ(0);
}
@supports (padding-top: env(safe-area-inset-top)) {
.c-nav {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
}
.c-nav__lang-dropdown {
margin: 1.6rem;
margin-top: calc(60px + 2.4rem);
margin-right: 2.4rem;
}
.c-nav__lang-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1.6rem;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 5px;
color: #fff;
font-size: 1.6rem;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.c-nav__lang-toggle:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.c-nav__lang-toggle:focus-visible {
/* キーボード操作で明確に見えるリング */
outline: none;
box-shadow: 0 0 0 3px rgba(188, 0, 139, 0.35), 0 0 0 1px #bc008b;
}
.c-nav__lang-toggle[aria-expanded=true] {
background-color: rgba(255, 255, 255, 0.1);
border-color: #bc008b;
border-radius: 5px 5px 0 0;
}
.c-nav__lang-icon {
width: 24px;
height: 24px;
}
.c-nav__lang-current {
font-weight: 700;
font-size: 1.8rem;
}
.c-nav__lang-menu {
display: none;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: none;
border-radius: 0 0 5px 5px;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.c-nav__lang-menu.is-open {
display: block;
}
.c-nav__lang-menu li {
margin: 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.c-nav__lang-menu li:first-child {
border-top: none;
}
.c-nav__lang-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.6rem 2.4rem;
color: #fff;
text-decoration: none;
transition: background-color 0.2s ease;
}
.c-nav__lang-option:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.c-nav__lang-option:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(188, 0, 139, 0.35), 0 0 0 1px #bc008b;
}
.c-nav__lang-option.is-active {
background-color: rgba(188, 0, 139, 0.2);
color: #e68ce6;
}
.c-nav__lang-option.is-active .c-nav__lang-name {
color: #e68ce6;
}
.c-nav__lang-code {
font-weight: 700;
font-size: 1.8rem;
}
.c-nav__lang-name {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
}
.c-nav__button-wrapper {
padding: 0 1.6rem;
margin-bottom: 1.6rem;
}
.c-nav__button {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
width: 100%;
padding: 1.6rem;
border-radius: 5px;
font-size: 1.6rem;
font-weight: 700;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.c-nav__button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(188, 0, 139, 0.35), 0 0 0 1px #bc008b;
}
.c-nav__button--mail {
background-color: #bc008b;
color: #fff;
}
.c-nav__button--mail:hover {
background-color: #9c0071;
transform: translateY(-2px);
}
.c-nav__button--cart {
background-color: #cb6ce6;
color: #fff;
}
.c-nav__button--cart:hover {
background-color: #8527d5;
transform: translateY(-2px);
}
.c-nav__button-icon {
width: 24px;
height: 24px;
}
.c-nav__button-text {
font-size: 1.6rem;
}
.c-nav__list {
padding: 0 1.6rem 6.4rem;
}
.c-nav__search {
margin: 0 1.6rem 2.4rem;
}
.c-nav__search-wrapper {
display: flex;
align-items: center;
background-color: #fff;
border-radius: 9999px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.c-nav__search-input {
flex: 1;
padding: 1.6rem 2.4rem;
border: none;
font-size: 1.6rem;
background: transparent;
color: #232323;
/* マウス操作の通常フォーカスはデフォルトのまま。キーボード操作に限定してリングを出す */
}
.c-nav__search-input:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(188, 0, 139, 0.35), 0 0 0 1px #bc008b;
}
.c-nav__search-input::placeholder {
color: #969696;
}
.c-nav__search-input:-webkit-autofill, .c-nav__search-input:-webkit-autofill:hover, .c-nav__search-input:-webkit-autofill:focus, .c-nav__search-input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 100px #fff inset !important;
box-shadow: 0 0 0 100px #fff inset !important;
-webkit-text-fill-color: #232323 !important;
color: #232323 !important;
font-size: 1.6rem !important;
transition: background-color 5000s ease-in-out 0s;
}
.c-nav__search-button {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: #bc008b;
color: #fff;
border-radius: 80%;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.c-nav__search-button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(188, 0, 139, 0.35), 0 0 0 1px #bc008b;
}
.c-nav__search-button:hover {
background-color: #9c0071;
}
.c-nav__search-button svg {
width: 24px;
height: 24px;
}
.c-nav__menu {
margin-bottom: 4rem;
}
.c-nav__menu-title {
font-size: 1.2rem;
font-family: "Roboto", sans-serif;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 1.6rem;
padding: 0.8rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.c-nav__menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.c-nav__menu li {
margin: 0;
}
.c-nav__menu a {
display: block;
padding: 0.8rem 0;
color: #fff;
font-size: 1.6rem;
text-decoration: none;
transition: color 0.2s ease, padding-left 0.2s ease;
}
.c-nav__menu a:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(188, 0, 139, 0.35), 0 0 0 1px #bc008b;
}
.c-nav__menu a:hover {
color: #e68ce6;
padding-left: 0.8rem;
}
.c-nav__menu a[aria-current=page], .c-nav__menu a.is-active {
color: #bc008b;
font-weight: 700;
}
/* 低モーション設定のユーザー向けに、ナビ周りの動きを抑制 */
@media (prefers-reduced-motion: reduce) {
.c-nav a,
.c-nav__lang-toggle,
.c-nav__lang-option,
.c-nav__button,
.c-nav__search-input,
.c-nav__search-button {
transition: none !important;
animation: none !important;
}
}
/*
* Component : ニュース・プレスリリース共通リスト
* File : _c-news-list.scss
* Purpose : NEWSとプレスリリースの一覧表示用スタイル
* Depends on : _variables.scss, _mixins.scss
*/
.c-news-list-group {
display: grid;
gap: 3rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.c-news-list-group {
grid-template-columns: repeat(2, 1fr);
}
}
.c-news-list {
display: flex;
flex-direction: column;
gap: 0;
height: 100%;
}
.p-news .c-news-list, .p-press .c-news-list {
display: grid;
gap: 2rem;
grid-template-columns: 1fr;
height: auto;
}
@media (min-width: 768px) {
.p-news .c-news-list, .p-press .c-news-list {
grid-template-columns: repeat(2, 1fr);
}
}
.c-news-list__content {
flex: 1;
display: flex;
flex-direction: column;
}
.c-news-list__item {
position: relative;
padding: 2rem 0;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s ease;
flex: 1;
}
.c-news-list__item:first-child {
padding-top: 0;
}
.c-news-list__item:last-child {
border-bottom: none;
}
.c-news-list__item:hover {
background-color: rgba(188, 0, 139, 0.02);
}
.c-news-list__item:hover .c-news-list__title a {
color: #9c0071;
}
.c-news-list__item:focus-within {
outline: 2px solid #bc008b;
outline-offset: -2px;
border-radius: 4px;
}
.c-news-list__meta {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 0.8rem;
font-size: 1.3rem;
color: #969696;
}
.c-news-list__meta span:first-child {
font-family: "Roboto", sans-serif;
letter-spacing: 0.05em;
position: relative;
padding-left: 2rem;
}
.c-news-list__meta span:first-child::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: url('data:image/svg+xml,') center/contain no-repeat;
}
.c-news-list__meta span:nth-child(2) {
display: inline-block;
padding: 0.3rem 1rem;
background: #f9f9f9;
border-radius: 9999px;
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #232323;
transition: background-color 0.2s ease, color 0.2s ease;
}
.c-news-list--news .c-news-list__meta span:nth-child(2):contains("NEWS") {
background: linear-gradient(135deg, #bc008b, #9c0071);
color: #fff;
}
.c-news-list--news .c-news-list__meta span:nth-child(2):contains("EOL") {
background: linear-gradient(135deg, #cb6ce6, #8527d5);
color: #fff;
}
.c-news-list--press .c-news-list__meta span:nth-child(2):contains("Business") {
background: linear-gradient(135deg, #bc008b, #9c0071);
color: #fff;
}
.c-news-list--press .c-news-list__meta span:nth-child(2):contains("New Product") {
background: linear-gradient(135deg, #cb6ce6, #8527d5);
color: #fff;
}
.c-news-list__title {
margin: 0;
font-size: 1.6rem;
line-height: 1.7;
}
.c-news-list__title a {
color: #bc008b;
text-decoration: none;
font-weight: 500;
display: inline-block;
position: relative;
padding-right: 2rem;
transition: color 0.2s ease;
}
.c-news-list__title a::after {
content: "→";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1.8rem;
color: #bc008b;
opacity: 1;
transition: transform 0.2s ease, color 0.2s ease;
}
.c-news-list__title a:hover {
color: #9c0071;
}
.c-news-list__title a:hover::after {
color: #9c0071;
transform: translateY(-50%) translateX(5px);
}
.c-news-list__title a:focus-visible {
outline: 2px solid #bc008b;
outline-offset: 4px;
border-radius: 4px;
}
.c-news-list__unlinked {
color: #232323;
cursor: default;
display: inline-block;
font-weight: 500;
}
.c-news-list__item:hover .c-news-list__unlinked {
color: #232323;
}
.c-news-list__more {
margin-top: 2rem;
text-align: center;
flex-shrink: 0;
}
.c-news-list__more .c-button, .c-news-list__more .c-compare-page__clear-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #bc008b;
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.c-news-list__more .c-button:hover, .c-news-list__more .c-compare-page__clear-btn:hover {
color: #9c0071;
}
.c-news-list:empty::before {
content: "現在、お知らせはありません。";
display: block;
text-align: center;
padding: 6rem 2rem;
color: #969696;
font-size: 1.6rem;
}
.c-heading {
font-size: 3.2rem;
font-weight: 700;
margin-bottom: 4rem;
text-align: center;
position: relative;
}
.c-heading::after {
content: "";
position: absolute;
bottom: -1.5rem;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, #bc008b, #e68ce6);
}
.c-heading--sub {
font-size: 2.4rem;
margin-bottom: 2rem;
text-align: left;
}
.c-heading--sub::after {
display: none;
}
@media (max-width: 767px) {
.c-news-list-group {
grid-template-columns: 1fr;
gap: 2rem;
}
.c-news-list__item {
padding: 1.5rem 0;
}
.c-news-list__meta {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
font-size: 1.2rem;
}
.c-news-list__meta span:first-child {
padding-left: 1.8rem;
}
.c-news-list__meta span:first-child::before {
width: 14px;
height: 14px;
}
.c-news-list__meta span:nth-child(2) {
font-size: 1rem;
padding: 0.2rem 0.8rem;
}
.c-news-list__title {
font-size: 1.5rem;
}
.c-news-list__title a {
padding-right: 0;
}
.c-news-list__title a::after {
display: none;
}
.c-heading {
font-size: 2.4rem;
margin-bottom: 3rem;
}
.c-heading--sub {
font-size: 2rem;
margin-bottom: 1.5rem;
}
}
.c-news-list__meta span:nth-child(2)[data-category=news] {
background: linear-gradient(135deg, #bc008b, #9c0071);
color: #fff;
}
.c-news-list__meta span:nth-child(2)[data-category=eol] {
background: linear-gradient(135deg, #cb6ce6, #8527d5);
color: #fff;
}
.c-news-list__meta span:nth-child(2)[data-category=business] {
background: linear-gradient(135deg, #bc008b, #9c0071);
color: #fff;
}
.c-news-list__meta span:nth-child(2)[data-category=new-product] {
background: linear-gradient(135deg, #cb6ce6, #8527d5);
color: #fff;
}
.c-news-list--loading .c-news-list__item {
pointer-events: none;
}
.c-news-list--loading .c-news-list__item .c-news-list__title,
.c-news-list--loading .c-news-list__item .c-news-list__meta span {
background: #f0f0f0;
color: transparent;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.c-news-list--loading .c-news-list__item .c-news-list__title::after,
.c-news-list--loading .c-news-list__item .c-news-list__meta span::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
@media (prefers-contrast: high) {
.c-news-list__item {
border-bottom-width: 2px;
}
.c-news-list__title a {
text-decoration: underline;
}
.c-news-list__title a:hover {
text-decoration-thickness: 3px;
}
}
@media (prefers-reduced-motion: reduce) {
.c-news-list__item, .c-news-list__title a, .c-news-list__meta span {
transition: none 0.2s ease;
}
}
/*
* コンポーネント名：ページネーション
* ファイル：assets/scss/components/_c-pagination.scss
* 説明：製品一覧等のページネーションスタイル
* 依存：foundation/_variables.scss, foundation/_mixins.scss
*/
.c-pagination {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
padding: 4rem 0;
margin-top: 2.4rem;
}
.c-pagination__info {
font-size: 1.4rem;
color: #969696;
}
.c-pagination__info strong {
color: #232323;
font-weight: 700;
}
.c-pagination__list {
display: flex;
align-items: center;
gap: 0.4rem;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
justify-content: center;
}
.c-pagination__item {
display: flex;
align-items: center;
justify-content: center;
}
.c-pagination__item--ellipsis {
padding: 0 0.4rem;
}
.c-pagination__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0.4rem 0.8rem;
border-radius: 5px;
font-size: 1.4rem;
font-weight: 500;
text-decoration: none;
color: #232323;
background: white;
border: 1px solid rgba(188, 0, 139, 0.15);
transition: all 0.2s ease;
cursor: pointer;
}
.c-pagination__link:hover:not(.c-pagination__link--disabled):not(.c-pagination__link--current) {
background: rgba(188, 0, 139, 0.08);
border-color: #e1a2ba;
color: #bc008b;
}
.c-pagination__link:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.c-pagination__link--current {
background: linear-gradient(135deg, #bc008b 0%, #8527d5 100%);
color: white;
border-color: transparent;
cursor: default;
font-weight: 700;
}
.c-pagination__link--disabled {
color: #cccccc;
border-color: rgba(224, 224, 224, 0.5);
background: #f9f9f9;
cursor: not-allowed;
opacity: 0.6;
}
.c-pagination__link svg {
flex-shrink: 0;
}
.c-pagination__item--prev .c-pagination__link, .c-pagination__item--next .c-pagination__link {
gap: 0.4rem;
padding: 0.4rem 1.6rem;
}
@media (max-width: 479px) {
.c-pagination__item--prev .c-pagination__link, .c-pagination__item--next .c-pagination__link {
min-width: auto;
padding: 0.4rem 0.8rem;
}
}
@media (max-width: 479px) {
.c-pagination__text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
}
.c-pagination__ellipsis {
color: #cccccc;
font-size: 1.4rem;
padding: 0 0.4rem;
}
@media (max-width: 479px) {
.c-pagination__list {
gap: 2px;
}
.c-pagination__link {
min-width: 36px;
height: 36px;
font-size: 1.2rem;
}
}
/*
* コンポーネント : ページトップボタン
* ファイル名 : _c-page-top.scss
* 説明 : スクロール時に表示されるページトップへ戻るボタン。固定配置でアニメーション付き
* 外部ファイル : _variables.scss, _mixins.scss
* 使用方法 :
*/
.c-page-top {
position: fixed;
bottom: 0.8rem;
right: 0.8rem;
z-index: 99;
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
@supports (bottom: env(safe-area-inset-bottom)) {
.c-page-top {
bottom: calc(10px + env(safe-area-inset-bottom));
}
}
.c-page-top__button {
display: block;
width: 6.4rem;
height: 6.4rem;
background-color: #bc008b;
border-radius: 50%;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
will-change: transform, opacity;
transform: translateZ(0);
}
@media (min-width: 768px) {
.c-page-top__button {
width: 64px;
height: 64px;
}
}
.c-page-top__button:hover {
opacity: 0.8;
transform: translateY(-5px);
background-color: #9c0071;
}
.c-page-top__button:active {
transform: translateY(-2px);
}
.c-page-top__button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.c-page-top__icon {
width: 100%;
height: 100%;
padding: 20%;
}
.c-page-top__icon svg {
width: 100%;
height: 100%;
fill: #fff;
}
.c-page-top--hidden {
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.c-page-top--visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.c-page-top .c-page-top {
transition: none 0.2s ease;
}
}
/**
* ============================================================
* Related Links コンポーネント スタイル
* ============================================================
*
* ファイル名: /assets/scss/components/_c-related-links.scss
* バージョン: 1.0
* 作成日: 2025年12月
*
* 【概要】
* 関連記事へのリンクカードセクションのスタイル。
* BEM命名規則に準拠。
*
* 【デザイントークン】
* - 背景: $color-background-light-blue
* - リンク色: $color-link
* - ホバー: $color-link-hover
* - スペーシング: 8ptグリッド準拠
*
* ============================================================
*/
.c-related-links {
margin: 4rem 0;
padding: 2.4rem;
background: #e3f0fc;
border-radius: 8px;
}
.c-related-links__title {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 0 0 1.6rem;
font-size: 1.6rem;
font-weight: 700;
color: #0066cc;
line-height: 1.3;
}
.c-related-links__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: #0066cc;
}
.c-related-links__list {
display: grid;
gap: 1.6rem;
margin: 0;
padding: 0;
list-style: none;
}
.c-related-links--col-1 .c-related-links__list {
grid-template-columns: 1fr;
}
.c-related-links--col-2 .c-related-links__list {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.c-related-links--col-2 .c-related-links__list {
grid-template-columns: repeat(2, 1fr);
}
}
.c-related-links--col-3 .c-related-links__list {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.c-related-links--col-3 .c-related-links__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.c-related-links--col-3 .c-related-links__list {
grid-template-columns: repeat(3, 1fr);
}
}
.c-related-links__item {
margin: 0;
padding-left: 0;
}
.c-related-links__item::before {
display: none;
}
.c-related-links__link {
display: flex;
flex-direction: column;
position: relative;
padding: 1.6rem;
padding-right: 4rem;
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
text-decoration: none;
color: #232323;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.c-related-links__link:hover, .c-related-links__link:focus {
border-color: #0066cc;
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
transform: translateY(-2px);
}
.c-related-links__link:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.c-related-links__link-title {
font-size: 1.6rem;
font-weight: 700;
color: #0066cc;
line-height: 1.6;
margin-bottom: 0.4rem;
}
.c-related-links__link-desc {
font-size: 1.2rem;
color: #969696;
line-height: 1.5;
}
.c-related-links__arrow {
position: absolute;
right: 1.6rem;
top: 50%;
transform: translateY(-50%);
color: #0066cc;
opacity: 0.6;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.c-related-links__arrow svg {
display: block;
}
.c-related-links__link:hover .c-related-links__arrow, .c-related-links__link:focus .c-related-links__arrow {
opacity: 1;
transform: translateY(-50%) translateX(3px);
}
@media (min-width: 768px) {
.c-related-links {
padding: 2.4rem 4rem;
}
.c-related-links__title {
font-size: 1.8rem;
}
}
.p-article__body .c-related-links {
margin-top: 4rem;
margin-bottom: 4rem;
}
/**
* ============================================================
* 関連サービスリンクコンポーネント
* ============================================================
*/
.c-related-services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
@media (min-width: 768px) {
.c-related-services {
gap: 1.5rem;
}
}
.c-related-services__item {
display: flex;
flex-direction: column;
padding: 1.25rem 1.5rem;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
}
.c-related-services__item:hover, .c-related-services__item:focus {
border-color: #bc008b;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.c-related-services__item:focus {
outline: 2px solid #bc008b;
outline-offset: 2px;
}
.c-related-services__title {
font-size: 1rem;
font-weight: 700;
color: #bc008b;
margin-bottom: 0.5rem;
}
.c-related-services__desc {
font-size: 0.875rem;
color: #232323;
line-height: 1.5;
}
/*
* コンポーネント名：サーバーサイドフィルター
* ファイル：assets/scss/components/_c-server-filter.scss
* 説明：URLベースのサーバーサイドフィルタリングUI（2カラムツールバー対応）
* 依存：foundation/_variables.scss, foundation/_mixins.scss
*
* P2-9対応: フィルター機能の発見しやすさ改善
* - 視覚的なヘッダー追加
* - フィルターアイコンによる明示
* - アクティブフィルター数バッジ
*/
.c-server-filter {
margin-bottom: 4rem;
padding: 1.6rem;
background: white;
border: 1px solid rgba(188, 0, 139, 0.1);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.c-server-filter__header {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1.6rem;
padding-bottom: 0.8rem;
border-bottom: 2px solid rgba(188, 0, 139, 0.1);
}
.c-server-filter__title {
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 1.8rem;
font-weight: 700;
color: #bc008b;
margin: 0;
}
.c-server-filter__title svg {
width: 20px;
height: 20px;
color: #e68ce6;
}
.c-server-filter__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: linear-gradient(135deg, #bc008b 0%, #8527d5 100%);
color: white;
font-size: 1rem;
font-weight: 700;
border-radius: 11px;
}
.c-server-filter__help {
font-size: 1.2rem;
color: #969696;
margin-left: auto;
}
.c-server-filter__toolbar {
display: grid;
grid-template-columns: 1fr auto;
gap: 2.4rem;
align-items: center;
padding-bottom: 0.8rem;
margin-bottom: 0.8rem;
border-bottom: 1px solid rgba(188, 0, 139, 0.1);
}
.c-server-filter__search {
display: flex;
gap: 0.8rem;
min-width: 0;
}
.c-server-filter__search-input {
flex: 1;
min-width: 200px;
padding: 0.8rem 1.6rem;
border: 2px solid rgba(188, 0, 139, 0.15);
border-radius: 5px;
font-size: 1.4rem;
transition: border-color 0.2s ease;
}
.c-server-filter__search-input:focus {
outline: none;
border-color: #e68ce6;
box-shadow: 0 0 0 3px rgba(230, 140, 230, 0.1);
}
.c-server-filter__search-input::placeholder {
color: #cccccc;
}
.c-server-filter__search-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: linear-gradient(135deg, #bc008b 0%, #8527d5 100%);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
flex-shrink: 0;
transition: opacity 0.2s ease;
}
.c-server-filter__search-btn:hover {
opacity: 0.9;
}
.c-server-filter__kpis {
display: flex;
gap: 1.6rem;
margin: 0;
}
.c-server-filter__kpi {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.8rem 1.6rem;
background: rgba(188, 0, 139, 0.03);
border-radius: 5px;
min-width: 72px;
}
.c-server-filter__kpi--highlight {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.08) 100%);
}
.c-server-filter__kpi--highlight .c-server-filter__kpi-value {
color: #059669;
}
.c-server-filter__kpi-label {
font-size: 1rem;
color: #969696;
font-weight: 500;
white-space: nowrap;
margin-bottom: 2px;
}
.c-server-filter__kpi-sublabel {
font-size: 10px;
opacity: 0.7;
margin-left: 2px;
}
.c-server-filter__kpi-value {
font-size: 2.4rem;
font-weight: 700;
color: #bc008b;
line-height: 1;
}
.c-server-filter__active {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.6rem;
padding: 1.6rem 2.4rem;
background: linear-gradient(135deg, rgba(188, 0, 139, 0.06) 0%, rgba(133, 39, 213, 0.04) 100%);
border-radius: 5px;
margin-bottom: 2.4rem;
}
.c-server-filter__active-label {
font-size: 1.4rem;
color: #969696;
font-weight: 700;
}
.c-server-filter__active-tags {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
flex: 1;
}
.c-server-filter__active-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0.4rem 0.8rem;
background: #bc008b;
color: white;
border-radius: 9999px;
font-size: 1.2rem;
font-weight: 500;
text-decoration: none;
transition: background 0.2s ease;
}
.c-server-filter__active-tag:hover {
background: #8527d5;
}
.c-server-filter__active-tag svg {
opacity: 0.8;
}
.c-server-filter__clear-all {
font-size: 1.2rem;
color: #bc008b;
text-decoration: underline;
font-weight: 500;
margin-left: 0.8rem;
}
.c-server-filter__clear-all:hover {
color: #8527d5;
}
.c-server-filter__count {
font-size: 1.2rem;
color: #969696;
margin-left: auto;
}
.c-server-filter__count strong {
color: #bc008b;
font-weight: 700;
}
.c-server-filter__groups {
display: flex;
flex-direction: column;
gap: 4px;
}
.c-server-filter__group {
border: none;
border-radius: 0;
overflow: visible;
}
.c-server-filter__group[open] .c-server-filter__group-icon {
transform: rotate(180deg);
}
.c-server-filter__group-header {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 0;
background: transparent;
font-weight: 700;
font-size: 1.8rem;
color: #bc008b;
cursor: pointer;
user-select: none;
list-style: none;
border-bottom: 2px solid rgba(188, 0, 139, 0.1);
}
.c-server-filter__group-header::-webkit-details-marker {
display: none;
}
.c-server-filter__group-header:hover {
color: #8527d5;
}
.c-server-filter__group-icon {
transition: transform 0.2s ease;
color: #969696;
margin-left: auto;
}
.c-server-filter__group-content {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
padding: 0.8rem 0;
}
.c-server-filter__item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 6px 0.8rem;
border: 1px solid rgba(188, 0, 139, 0.15);
border-radius: 9999px;
text-decoration: none;
color: #232323;
font-size: 1.2rem;
font-weight: 500;
background: white;
transition: all 0.2s ease;
}
.c-server-filter__item:hover {
border-color: #e68ce6;
background: rgba(188, 0, 139, 0.03);
color: #bc008b;
}
.c-server-filter__item--active {
background: #bc008b;
border-color: #bc008b;
color: white;
}
.c-server-filter__item--active:hover {
background: #8527d5;
border-color: #8527d5;
color: white;
}
.c-server-filter__checkbox {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-radius: 4px;
flex-shrink: 0;
opacity: 0.5;
}
.c-server-filter__item--active .c-server-filter__checkbox {
background: white;
border-color: white;
color: #bc008b;
opacity: 1;
}
@media (max-width: 991px) {
.c-server-filter__toolbar {
grid-template-columns: 1fr;
gap: 1.6rem;
}
.c-server-filter__kpis {
justify-content: flex-start;
}
}
@media (max-width: 767px) {
.c-server-filter {
padding: 1.6rem;
}
.c-server-filter__toolbar {
padding-bottom: 1.6rem;
margin-bottom: 1.6rem;
}
.c-server-filter__search-input {
min-width: 0;
padding: 0.4rem 0.8rem;
font-size: 1.2rem;
}
.c-server-filter__search-btn {
width: 40px;
height: 40px;
}
.c-server-filter__kpis {
gap: 0.8rem;
flex-wrap: wrap;
}
.c-server-filter__kpi {
padding: 0.4rem 0.8rem;
min-width: 60px;
}
.c-server-filter__kpi-label {
font-size: 10px;
}
.c-server-filter__kpi-value {
font-size: 1.8rem;
}
.c-server-filter__active {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
padding: 0.8rem 1.6rem;
}
.c-server-filter__count {
margin-left: 0;
margin-top: 0.4rem;
}
.c-server-filter__group-header {
font-size: 1.4rem;
}
.c-server-filter__item {
padding: 4px 8px;
font-size: 1rem;
}
}
/*
* コンポーネント : スキップリンク
* ファイル名 : _c-skip-link.scss
* 説明 : WCAG 2.2準拠のアクセシビリティ対応スキップリンク。キーボードナビゲーション向け
* 外部ファイル : _variables.scss（全般的な変数）
* 使用方法 :
*/
.c-skip-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
z-index: 10000;
}
.c-skip-nav:focus-within {
height: auto;
clip: auto;
clip-path: none;
overflow: visible;
}
.c-skip-nav__list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0;
padding: 1.6rem;
list-style: none;
background-color: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(8px);
border-bottom: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.c-skip-nav__item {
margin: 0;
}
.c-skip-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.8rem 1.6rem;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
white-space: nowrap;
background-color: #fff;
color: #232323;
border: 2px solid #232323;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
transform: translateZ(0);
will-change: transform, background-color, color, box-shadow;
}
.c-skip-link:focus {
outline: 3px solid #0066cc;
outline-offset: 2px;
background-color: #0066cc;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
z-index: 10001;
}
.c-skip-link:hover {
background-color: #232323;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.c-skip-link:hover .c-skip-link__icon {
transform: translateX(2px);
}
.c-skip-link:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.c-skip-link:visited {
color: #232323;
}
.c-skip-link--primary {
background-color: #bc008b;
color: #fff;
border-color: #bc008b;
}
.c-skip-link--primary:hover {
background-color: #9c0071;
border-color: #9c0071;
}
.c-skip-link--primary:focus {
outline-color: #bc008b;
background-color: #9c0071;
}
.c-skip-link--primary:visited {
color: #fff;
}
.c-skip-link--secondary {
background-color: #05192d;
color: #fff;
border-color: #05192d;
}
.c-skip-link--secondary:hover {
background-color: #020c16;
border-color: #020c16;
}
.c-skip-link--secondary:focus {
outline-color: #05192d;
background-color: #020c16;
}
.c-skip-link--secondary:visited {
color: #fff;
}
.c-skip-link__text {
font-size: inherit;
line-height: inherit;
}
.c-skip-link__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.c-skip-link__icon svg {
width: 100%;
height: 100%;
fill: currentColor;
}
@media (max-width: 767px) {
.c-skip-nav__list {
flex-direction: column;
padding: 0.8rem;
}
.c-skip-link {
width: 100%;
justify-content: flex-start;
font-size: 1rem;
padding: 0.4rem 0.8rem;
}
}
@media (min-width: 768px) {
.c-skip-nav__list {
justify-content: center;
padding: 1.6rem;
}
.c-skip-link {
min-width: 200px;
justify-content: center;
}
}
@media (prefers-contrast: high) {
.c-skip-link {
border-width: 3px;
font-weight: 900;
}
.c-skip-link:focus {
outline-width: 4px;
}
}
@media (prefers-reduced-motion: reduce) {
.c-skip-link,
.c-skip-link__icon,
.c-skip-nav__list {
transition: none !important;
transform: none !important;
}
.c-skip-link:hover, .c-skip-link:focus,
.c-skip-link__icon:hover,
.c-skip-link__icon:focus,
.c-skip-nav__list:hover,
.c-skip-nav__list:focus {
transform: none !important;
}
}
@media (prefers-color-scheme: dark) {
.c-skip-nav__list {
background-color: rgba(51, 51, 51, 0.98);
border-color: #666;
}
.c-skip-link {
background-color: #333;
color: #fff;
border-color: #666;
}
.c-skip-link:hover {
background-color: #fff;
color: #232323;
}
}
@media print {
.c-skip-nav {
display: none !important;
}
}
.c-skip-link[data-skip-target=main] {
order: 1;
}
.c-skip-link[data-skip-target=navigation] {
order: 2;
}
.c-skip-link[data-skip-target=search] {
order: 3;
}
.c-skip-link[data-skip-target=footer] {
order: 4;
}
/*
* コンポーネント : タブ・アコーディオン（2025年最新版）
* ファイル名 : _c-tabs-accordion.scss
* 説明 : PC/タブレット：タブUI、モバイル：アコーディオンUI
* 最新技術 : Container Queries, CSS Grid, Custom Properties, Logical Properties
* 外部ファイル : _variables.scss, _mixins.scss
* 使用方法 : render_tabs_accordion()関数から生成、検索・展開制御・ディープリンク対応
*/
.c-tabs-accordion {
--tabs-accent-color: #bc008b;
--tabs-background: #fff;
--tabs-border-radius: 8px;
--tabs-spacing: 2.4rem;
--tabs-transition: all 0.3s ease;
contain: layout style;
padding-block: var(--tabs-spacing);
padding-inline: 0;
inline-size: 100%;
container-type: inline-size;
container-name: tabs-accordion;
}
.c-tabs-accordion__header {
display: grid;
grid-template-columns: 1fr;
gap: var(--tabs-spacing);
margin-block-end: var(--tabs-spacing);
}
@container tabs-accordion (min-width: 48em) {
.c-tabs-accordion__header {
grid-template-columns: 1fr auto;
align-items: start;
}
}
.c-tabs-accordion__title {
font-size: clamp(2.4rem, 2.2vw, 2.8rem);
font-weight: 700;
color: var(--tabs-accent-color, #111111);
margin-block: 0;
margin-inline: 0;
line-height: 1.3;
grid-column: 1;
}
@container tabs-accordion (min-width: 48em) {
.c-tabs-accordion__title {
margin-block-end: 0;
}
}
.c-tabs-accordion__controls {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.8rem;
align-items: center;
margin-block-start: 0.8rem;
grid-column: 1/-1;
}
@container tabs-accordion (min-width: 48em) {
.c-tabs-accordion__controls {
grid-column: 2;
margin-block-start: 0;
grid-template-columns: 1fr auto;
}
}
@container tabs-accordion (min-width: 64em) {
.c-tabs-accordion__controls {
grid-template-columns: auto auto;
}
}
.c-tabs-accordion__search {
inline-size: 100%;
max-inline-size: 420px;
border: 1px solid #e0e0e0;
border-radius: var(--tabs-border-radius, 5px);
padding-block: 0.8rem;
padding-inline: 1.6rem;
font-family: "Noto Sans JP", sans-serif;
font-size: 1.6rem;
transition: var(--tabs-transition);
}
.c-tabs-accordion__search:focus {
outline: none;
border-color: var(--tabs-accent-color, #bc008b);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tabs-accent-color, #bc008b) 20%, transparent);
}
.c-tabs-accordion__search::placeholder {
color: #969696;
}
.c-tabs-accordion__expand {
border: 1px solid #e0e0e0;
background: var(--tabs-background, #fff);
color: #232323;
border-radius: 9999px;
padding-block: 0.8rem;
padding-inline: 1.6rem;
font-size: 1.2rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: var(--tabs-transition);
}
.c-tabs-accordion__expand:hover {
background: #f9f9f9;
border-color: var(--tabs-accent-color, #bc008b);
color: var(--tabs-accent-color, #bc008b);
}
.c-tabs-accordion__expand:focus {
outline: none;
border-color: var(--tabs-accent-color, #bc008b);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tabs-accent-color, #bc008b) 20%, transparent);
}
.c-tabs-accordion__tabs {
display: none;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.4rem;
overflow-x: auto;
padding-block: 0.4rem;
padding-inline: 0.4rem;
margin-block-end: 1.6rem;
border-block-end: 1px solid #f0f0f0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.c-tabs-accordion__tabs::-webkit-scrollbar {
display: none;
}
@container tabs-accordion (min-width: 48em) {
.c-tabs-accordion__tabs {
display: grid;
}
}
@container tabs-accordion (min-width: 64em) {
.c-tabs-accordion__tabs {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
}
.c-tabs-accordion__tabs--multiline {
overflow-x: visible;
overflow-y: visible;
}
.c-tabs-accordion__tabs--multiline[data-tabs-per-row="2"] {
grid-template-columns: repeat(2, 1fr);
}
.c-tabs-accordion__tabs--multiline[data-tabs-per-row="3"] {
grid-template-columns: repeat(3, 1fr);
}
.c-tabs-accordion__tabs--multiline[data-tabs-per-row="4"] {
grid-template-columns: repeat(4, 1fr);
}
.c-tabs-accordion__tabs--multiline[data-tabs-per-row="5"] {
grid-template-columns: repeat(5, 1fr);
}
.c-tabs-accordion__tabs--multiline[data-tabs-per-row="6"] {
grid-template-columns: repeat(6, 1fr);
}
@container tabs-accordion (max-width: 48em) {
.c-tabs-accordion__tabs--multiline {
grid-template-columns: repeat(2, 1fr);
}
.c-tabs-accordion__tabs--multiline[data-tabs-per-row] {
grid-template-columns: repeat(2, 1fr);
}
}
@container tabs-accordion (max-width: 32em) {
.c-tabs-accordion__tabs--multiline {
grid-template-columns: 1fr;
}
.c-tabs-accordion__tabs--multiline[data-tabs-per-row] {
grid-template-columns: 1fr;
}
}
.c-tabs-accordion__tab {
appearance: none;
border: 1px solid transparent;
border-radius: var(--tabs-border-radius, 9999px);
padding-block: 0.8rem;
padding-inline: 2.4rem;
background: transparent;
color: #232323;
scroll-snap-align: start;
font-size: 1.6rem;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
position: relative;
transition: all 0.2s ease;
}
.c-tabs-accordion__tab:hover {
background: #f9f9f9;
color: #bc008b;
}
.c-tabs-accordion__tab:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(188, 0, 139, 0.2);
}
.c-tabs-accordion__tab[aria-selected=true] {
background: #bc008b;
color: #fff;
border-color: #bc008b;
font-weight: 700;
}
.c-tabs-accordion__tab[aria-selected=true]:hover {
background: #9c0071;
border-color: #9c0071;
}
.c-tabs-accordion__panels {
width: 100%;
}
.c-tabs-accordion__panel {
border: 1px solid #f0f0f0;
border-radius: 8px;
background: #fff;
margin-bottom: 0.8rem;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-tabs-accordion__panel:last-child {
margin-bottom: 0;
}
.c-tabs-accordion__panel:hover {
border-color: #bc008b;
box-shadow: 0 2px 8px rgba(188, 0, 139, 0.1);
}
.c-tabs-accordion__panel[open] {
border-color: #bc008b;
box-shadow: 0 2px 8px rgba(188, 0, 139, 0.1);
}
.c-tabs-accordion__panel[open] .c-tabs-accordion__summary {
background: rgba(188, 0, 139, 0.05);
border-bottom: 1px solid #f0f0f0;
color: #bc008b;
}
.c-tabs-accordion__panel[open] .c-tabs-accordion__summary::after {
transform: rotate(45deg);
color: #bc008b;
}
@media (min-width: 768px) {
.c-tabs-accordion__panel {
border: none;
border-radius: 0;
margin-bottom: 0;
box-shadow: none;
}
.c-tabs-accordion__panel:hover {
border: none;
box-shadow: none;
}
.c-tabs-accordion__panel[open] {
border: none;
box-shadow: none;
}
.c-tabs-accordion__panel:not([open]) {
display: none;
}
}
.c-tabs-accordion__summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2.4rem;
cursor: pointer;
list-style: none;
background: transparent;
transition: background-color 0.2s ease, color 0.2s ease;
}
.c-tabs-accordion__summary::-webkit-details-marker {
display: none;
}
.c-tabs-accordion__summary::marker {
display: none;
}
.c-tabs-accordion__summary::after {
content: "+";
font-size: 1.8rem;
font-weight: 700;
color: #969696;
transition: transform 0.2s ease, color 0.2s ease;
}
.c-tabs-accordion__summary:hover {
background: rgba(188, 0, 139, 0.02);
color: #bc008b;
}
.c-tabs-accordion__summary:focus {
outline: none;
background: rgba(188, 0, 139, 0.05);
color: #bc008b;
}
@media (min-width: 768px) {
.c-tabs-accordion__summary {
display: none;
}
}
.c-tabs-accordion__summaryText {
font-weight: 700;
flex: 1;
}
.c-tabs-accordion__content {
padding: 2.4rem;
}
@media (min-width: 768px) {
.c-tabs-accordion__content {
padding: 4rem 0;
}
}
.c-tabs-accordion__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.4rem;
align-items: start;
}
@media (min-width: 992px) {
.c-tabs-accordion__grid {
grid-template-columns: 0.9fr 1.1fr;
gap: 4rem;
}
}
.c-tabs-accordion__media img {
width: 100%;
height: auto;
border-radius: 5px;
display: block;
}
.c-tabs-accordion__text > *:first-child {
margin-top: 0;
}
.c-tabs-accordion__text > *:last-child {
margin-bottom: 0;
}
.c-tabs-accordion__subtitle {
font-size: 1.8rem;
font-weight: 700;
color: #111111;
margin: 1.6rem 0 0.8rem;
}
.c-tabs-accordion__subtitle:first-child {
margin-top: 0;
}
.c-tabs-accordion__bullets {
margin: 0.8rem 0;
padding-left: 2.4rem;
}
.c-tabs-accordion__bullets li {
margin-bottom: 0.4rem;
line-height: 1.9;
}
.c-tabs-accordion__usecase {
margin: 1.6rem 0;
padding: 1.6rem;
background: #e3f0fc;
border-radius: 5px;
border-left: 4px solid #1565c0;
}
.c-tabs-accordion__cta {
margin-top: 2.4rem;
}
.c-tabs-accordion__cta .c-button + .c-button, .c-tabs-accordion__cta .c-compare-page__clear-btn + .c-button, .c-tabs-accordion__cta .c-button + .c-compare-page__clear-btn, .c-tabs-accordion__cta .c-compare-page__clear-btn + .c-compare-page__clear-btn {
margin-left: 0.8rem;
}
.c-tabs-accordion--borderless .c-tabs-accordion__panel {
border: none;
border-bottom: 1px solid #f0f0f0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.c-tabs-accordion--borderless .c-tabs-accordion__panel:last-child {
border-bottom: none;
}
.c-tabs-accordion--borderless .c-tabs-accordion__panel:hover, .c-tabs-accordion--borderless .c-tabs-accordion__panel[open] {
border-color: #f0f0f0;
box-shadow: none;
}
@media (min-width: 768px) {
.c-tabs-accordion--borderless .c-tabs-accordion__panel {
border: none;
}
.c-tabs-accordion--borderless .c-tabs-accordion__panel:hover {
border: none;
}
}
.c-tabs-accordion--borderless .c-tabs-accordion__summary {
padding: 2.4rem 0;
border-bottom: none;
}
.c-tabs-accordion--borderless .c-tabs-accordion__content {
padding: 0 0 2.4rem;
}
@media (min-width: 768px) {
.c-tabs-accordion--borderless .c-tabs-accordion__content {
padding: 4rem 0;
}
}
.c-tabs-accordion--borderless .c-tabs-accordion__tab {
border: none;
background: transparent;
border-bottom: 3px solid transparent;
border-radius: 0;
}
.c-tabs-accordion--borderless .c-tabs-accordion__tab[aria-selected=true] {
background: transparent;
border-bottom-color: #bc008b;
color: #bc008b;
}
.c-tabs-accordion--borderless .c-tabs-accordion__tab:hover {
background: rgba(188, 0, 139, 0.1);
border-bottom-color: rgba(188, 0, 139, 0.5);
}
.c-tabs-accordion--compact {
padding: 1.6rem 0;
}
.c-tabs-accordion--compact .c-tabs-accordion__title {
font-size: 2.4rem;
margin-bottom: 0.8rem;
}
.c-tabs-accordion--compact .c-tabs-accordion__summary {
padding: 1.6rem 2.4rem;
font-size: 1.6rem;
}
.c-tabs-accordion--compact .c-tabs-accordion__content {
padding: 1.6rem 2.4rem;
}
@media (min-width: 768px) {
.c-tabs-accordion--compact .c-tabs-accordion__content {
padding: 2.4rem 0;
}
}
/* ----------------------------------------------------------
* Component : Table
* File : _c-table.scss
* Purpose : 仕様表 / 通常表 / 画像入り表
* Depends on : variables, mixins
* -------------------------------------------------------- */
/* --- ラッパー：モバイルで横スクロールを許可 --- */
.c-table__wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 2.4rem;
}
/* --- ベーステーブル --- */
.c-table {
width: 100%;
border-collapse: collapse;
min-width: 320px;
font-size: 1.4rem;
line-height: 1.5;
/* 自動列幅モードは table-layout:fixed で%幅を尊重 */
/* 画像セル調整 */
}
.c-table--auto {
table-layout: fixed;
}
.c-table__caption {
caption-side: top;
font-weight: 700;
font-size: 1.6rem;
padding: 0.8rem 0;
text-align: left;
}
.c-table__th, .c-table__td {
border: 1px solid #b3b3b3;
padding: 0.8rem;
text-align: left;
vertical-align: top;
}
.c-table__th {
font-weight: 700;
background: #333333;
color: #fff;
}
.c-table__img {
display: block;
max-width: 160px;
margin: 0 auto;
}
.c-table__img img {
width: 100%;
height: auto;
display: block;
}
/* --- バリアント : 'spec' → モダンなスペック表スタイル --- */
.c-table--spec {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
border: 1px solid #e2e8f0;
}
.c-table--spec .c-table__th {
background: #bc008b;
color: #ffffff;
font-weight: 600;
font-size: 1.5rem;
padding: 1.6rem 0.8rem;
border: none;
position: relative;
}
.c-table--spec .c-table__th::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #4a5568;
}
.c-table--spec .c-table__td {
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
padding: 1.6rem 0.8rem;
font-size: 1.4rem;
line-height: 1.6;
}
.c-table--spec .c-table__td:first-child {
background: #f7fafc;
font-weight: 600;
color: #2d3748;
border-right: 2px solid #e2e8f0;
width: 20rem;
}
.c-table--spec .c-table__td:not(:first-child) {
color: #4a5568;
}
.c-table--spec tbody tr {
transition: all 0.2s ease;
}
.c-table--spec tbody tr:hover {
background: #edf2f7;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.c-table--spec tbody tr:nth-child(even) {
background: rgba(248, 250, 252, 0.5);
}
.c-table--spec tbody tr:last-child .c-table__td {
border-bottom: none;
}
/* --- バリアント : 'striped' (シマ模様) --- */
.c-table--striped tbody tr:nth-child(odd) {
background: rgba(179, 179, 179, 0.15);
}
/* --- バリアント : 'image' → 中央寄せ, Alt表示確認 --- */
.c-table--image .c-table__th,
.c-table--image .c-table__td {
text-align: center;
white-space: pre-wrap;
word-break: break-word;
}
/* --- バリアント : 'simple' → 横線のみ, 縦線なし --- */
.c-table--simple {
border-collapse: collapse;
width: 100%;
}
.c-table--simple .c-table__th,
.c-table--simple .c-table__td {
border-top: 1px solid rgba(179, 179, 179, 0.3);
border-bottom: 1px solid rgba(179, 179, 179, 0.3);
border-left: none;
border-right: none;
padding: 0.8rem;
text-align: left;
vertical-align: top;
}
.c-table--simple thead tr:first-child .c-table__th {
border-top: none;
}
.c-table--simple tbody tr td:first-child {
font-weight: bold;
white-space: nowrap;
width: 160px;
}
.c-table--simple .c-table__caption {
margin-bottom: 0.8rem;
font-weight: bold;
font-size: 1.4rem;
}
/* --- ホバー行ハイライト（キーボード操作も） --- */
.c-table tbody tr:hover,
.c-table tbody tr:focus-within {
background: rgba(203, 108, 230, 0.08);
}
/* --- スティッキーヘッダ（768px以上） --- */
@media (min-width: 768px) {
.c-table--spec thead th,
.c-table--striped thead th,
.c-table--image thead th {
position: sticky;
top: 0;
z-index: 2;
}
}
/* --- prefers‑reduced‑motion --- */
@media (prefers-reduced-motion: reduce) {
.c-table tbody tr:hover,
.c-table tbody tr:focus-within {
background: inherit;
}
}
/* --- グループ行スタイル --- */
/*
* コンポーネント : 動画コンテナ
* ファイル名 : _c-video.scss
* 説明 : レスポンシブ対応の動画表示コンポーネント。16:9のアスペクト比を維持し、キャプション表示に対応
* 外部ファイル : _variables.scss（$color-gray-500）, _mixins.scss
* 使用方法 :
*/
.c-video {
margin: 2rem auto 2rem;
max-width: 960px;
}
.c-video__media {
width: 100%;
aspect-ratio: 16/9;
background-color: #000;
}
@supports not (aspect-ratio: 16/9) {
.c-video__media {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.c-video__media > * {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
}
.c-video__caption {
margin-top: 0.5rem;
font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);
color: #808080;
line-height: 1.4;
}
.c-video__fallback {
font-size: 1rem;
color: #808080;
}
/**
* コンポーネント: 検索オートコンプリート
* ファイル: _c-search-autocomplete.scss
*
* ヘッダー検索フォームのオートコンプリートドロップダウン
*/
.c-search-autocomplete {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 50;
margin-top: 0.4rem;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 0.8rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
overflow: hidden;
animation: autocomplete-fade-in 0.15s ease-out;
}
@keyframes autocomplete-fade-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.c-search-autocomplete__list {
list-style: none;
margin: 0;
padding: 0.4rem 0;
max-height: 32rem;
overflow-y: auto;
}
.c-search-autocomplete__item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 1.6rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.c-search-autocomplete__item:hover, .c-search-autocomplete__item[aria-selected=true] {
background: #f5f5f5;
}
.c-search-autocomplete__item[aria-selected=true] {
background: #e3f0fc;
}
.c-search-autocomplete__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 2.8rem;
background: #f5f5f5;
border-radius: 0.6rem;
color: #969696;
}
.c-search-autocomplete__icon svg {
width: 1.6rem;
height: 1.6rem;
}
.c-search-autocomplete__content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.c-search-autocomplete__name {
font-size: 1.4rem;
font-weight: 500;
color: #232323;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.c-search-autocomplete__name mark {
background: transparent;
color: #bc008b;
font-weight: 700;
}
.c-search-autocomplete__maker {
font-size: 1.2rem;
color: #969696;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.c-search-autocomplete__type {
flex-shrink: 0;
font-size: 1.1rem;
color: #969696;
background: #f5f5f5;
padding: 0.2rem 0.4rem;
border-radius: 0.4rem;
}
.c-search-autocomplete__empty {
padding: 1.6rem;
font-size: 1.4rem;
color: #969696;
text-align: center;
}
.c-search-autocomplete__all {
display: block;
padding: 0.8rem 1.6rem;
font-size: 1.3rem;
color: #bc008b;
text-decoration: none;
text-align: center;
border-top: 1px solid #e0e0e0;
transition: background-color 0.2s ease;
}
.c-search-autocomplete__all:hover {
background: #f5f5f5;
text-decoration: none;
}
.l-header__search-wrapper,
.c-nav__search-wrapper {
position: relative;
}
@media (min-width: 992px) {
.l-header__search-input::placeholder {
transition: opacity 0.2s ease;
}
.l-header__search-input:focus::placeholder {
opacity: 0.5;
}
}
/**
* コンポーネント: フォーム
* ファイル: _c-form.scss
* 説明: お問い合わせ、見積依頼、テクニカルサポート等のフォームスタイル
*/
.c-form {
max-width: 100%;
}
.c-form__intro {
margin-bottom: 2.4rem;
padding: 1.6rem;
background: #f5f5f5;
border-radius: 5px;
}
.c-form__intro p {
margin: 0 0 0.4rem;
}
.c-form__intro p:last-child {
margin-bottom: 0;
}
.c-form__intro a {
color: #0066cc;
text-decoration: underline;
}
.c-form__intro a:hover {
color: #0055aa;
}
.c-form__group {
margin-bottom: 1.6rem;
}
.c-form__label {
display: block;
margin-bottom: 0.4rem;
font-weight: 500;
color: #232323;
}
.c-form__required {
display: inline-block;
padding: 0.1rem 0.4rem;
margin-left: 0.4rem;
font-size: 1rem;
font-weight: 700;
color: #fff;
background: #c62828;
border-radius: 4px;
}
.c-form__optional {
display: inline-block;
padding: 0.1rem 0.4rem;
margin-left: 0.4rem;
font-size: 1rem;
font-weight: 500;
color: #969696;
background: #f0f0f0;
border-radius: 4px;
}
.c-form__input, .c-form__select, .c-form__textarea {
display: block;
width: 100%;
padding: 0.8rem 1.6rem;
font-size: 1.4rem;
color: #232323;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 4px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-form__input:focus, .c-form__select:focus, .c-form__textarea:focus {
outline: none;
border-color: #bc008b;
box-shadow: 0 0 0 3px rgba(188, 0, 139, 0.15);
}
.c-form__input::placeholder, .c-form__select::placeholder, .c-form__textarea::placeholder {
color: #969696;
}
.c-form__input:disabled, .c-form__select:disabled, .c-form__textarea:disabled {
background: #f0f0f0;
cursor: not-allowed;
}
.c-form__textarea {
min-height: 150px;
resize: vertical;
}
.c-form__select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.6rem center;
padding-right: 4rem;
}
.c-form__checkbox, .c-form__radio {
display: flex;
align-items: flex-start;
gap: 0.8rem;
margin-bottom: 0.8rem;
cursor: pointer;
}
.c-form__checkbox input, .c-form__radio input {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.15rem;
accent-color: #bc008b;
cursor: pointer;
}
.c-form__checkbox span, .c-form__radio span {
flex: 1;
line-height: 1.5;
}
.c-form__submit {
display: inline-block;
padding: 1.6rem 6.4rem;
font-size: 1.8rem;
font-weight: 700;
color: #fff;
background: #9c0071;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.c-form__submit:hover {
background: #8527d5;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(156, 0, 113, 0.3);
}
.c-form__submit:active {
transform: translateY(0);
}
.c-form__submit:disabled {
background: #b3b3b3;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.c-form__actions {
margin-top: 2.4rem;
text-align: center;
}
.c-form__errors {
margin-bottom: 1.6rem;
padding: 1.6rem;
color: #c62828;
background: rgba(198, 40, 40, 0.1);
border: 1px solid #c62828;
border-radius: 4px;
}
.c-form__errors:not(.is-visible) {
display: none;
}
.c-form__errors[hidden] {
display: none;
}
.c-form__errors-title {
margin: 0 0 0.8rem;
font-size: 1.4rem;
font-weight: 700;
color: inherit;
}
.c-form__errors-list {
margin: 0;
padding-left: 1.6rem;
}
.c-form__errors-list li {
margin-bottom: 0.4rem;
}
.c-form__errors-list li:last-child {
margin-bottom: 0;
}
.c-form__errors ul {
margin: 0;
padding-left: 1.6rem;
}
.c-form__errors li {
margin-bottom: 0.4rem;
}
.c-form__errors li:last-child {
margin-bottom: 0;
}
.c-form__input--error, .c-form__select--error, .c-form__textarea--error {
border-color: #c62828;
}
.c-form__input--error:focus, .c-form__select--error:focus, .c-form__textarea--error:focus {
box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
}
.c-form__error {
margin-top: 0.4rem;
font-size: 1.2rem;
color: #c62828;
font-weight: 500;
}
.c-form__error-message {
margin-top: 0.4rem;
font-size: 1.2rem;
color: #c62828;
}
.c-form__errors-link {
color: #c62828;
text-decoration: underline;
font-weight: 500;
}
.c-form__errors-link:hover, .c-form__errors-link:focus {
color: rgb(155.5714285714, 31.4285714286, 31.4285714286);
text-decoration: none;
}
.c-form__errors-link:focus-visible {
outline: 2px solid #c62828;
outline-offset: 2px;
}
.c-form__honeypot {
position: absolute;
left: -9999px;
opacity: 0;
pointer-events: none;
}
.c-form__note {
margin-top: 0.4rem;
font-size: 1.2rem;
color: #969696;
}
.c-form__section {
margin-bottom: 4rem;
padding-bottom: 2.4rem;
border-bottom: 1px solid #e0e0e0;
}
.c-form__section:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.c-form__section-title {
margin-bottom: 1.6rem;
font-size: 1.8rem;
font-weight: 700;
color: #232323;
}
.c-form__row {
display: flex;
gap: 1.6rem;
}
@media (max-width: 767px) {
.c-form__row {
flex-direction: column;
}
}
.c-form__col {
flex: 1;
}
.c-form__col--half {
flex: 0 0 50%;
}
.c-form__inline {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.c-form__input--short {
width: 8rem;
flex: 0 0 auto;
}
.c-form__separator {
color: #969696;
font-size: 1.8rem;
}
.c-form__hint {
margin-bottom: 0.8rem;
font-size: 1.2rem;
color: #969696;
}
.c-form__group--highlight {
padding: 1.6rem;
background: #f5f5f5;
border-radius: 4px;
}
.c-alert {
padding: 1.6rem;
border-radius: 4px;
margin-bottom: 1.6rem;
}
.c-alert--info {
color: rgb(10.9436619718, 52.6338028169, 100.0563380282);
background: rgba(21, 101, 192, 0.1);
border: 1px solid #1565c0;
}
.c-alert--success {
color: rgb(18.5614035088, 50.4385964912, 20.1754385965);
background: rgba(46, 125, 50, 0.1);
border: 1px solid #2e7d32;
}
.c-alert--warning {
color: rgb(128, 45.0782608696, 0);
background: rgba(230, 81, 0, 0.1);
border: 1px solid #e65100;
}
.c-alert--error {
color: rgb(155.5714285714, 31.4285714286, 31.4285714286);
background: rgba(198, 40, 40, 0.1);
border: 1px solid #c62828;
}
.c-alert p {
margin: 0;
}
.c-text--warning {
color: #c62828;
}
/**
* コンポーネント: 最近見た製品
* ファイル: _c-recent-products.scss
*
* ヘッダーに表示する閲覧履歴ドロップダウン
*/
.c-recent-products {
position: relative;
z-index: 1;
display: inline-flex;
overflow: visible;
isolation: isolate;
}
.c-recent-products:has(.c-recent-products__dropdown) {
z-index: 10;
}
.c-recent-products__trigger {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
overflow: visible !important;
pointer-events: auto;
cursor: pointer;
}
.c-recent-products__badge {
position: absolute;
top: -0.2rem;
right: -0.2rem;
min-width: 1.6rem;
height: 1.6rem;
padding: 0 0.4rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.6rem;
color: #fff;
text-align: center;
white-space: nowrap;
background: #bc008b;
border-radius: 0.8rem;
pointer-events: none;
z-index: 5;
}
.c-recent-products__badge[hidden] {
display: none;
}
.c-recent-products__dropdown {
position: absolute;
top: 100%;
right: 0;
z-index: 50;
width: 32rem;
max-width: calc(100vw - 2rem);
margin-top: 0.8rem;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 0.8rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
overflow: hidden;
animation: recent-products-fade-in 0.15s ease-out;
}
@keyframes recent-products-fade-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.c-recent-products__list {
list-style: none;
margin: 0;
padding: 0.4rem 0;
max-height: 36rem;
overflow-y: auto;
}
.c-recent-products__item {
position: relative;
display: flex;
align-items: center;
}
.c-recent-products__item:not(:last-child) {
border-bottom: 1px solid #f0f0f0;
}
.c-recent-products__item:hover {
background: #f5f5f5;
}
.c-recent-products__link {
display: flex;
flex: 1;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 1.6rem;
padding-right: 0.4rem;
min-width: 0;
overflow: hidden;
text-decoration: none;
color: #232323;
transition: background-color 0.2s ease;
}
.c-recent-products__link:hover {
text-decoration: none;
}
.c-recent-products__remove {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-right: 0.4rem;
color: #808080;
cursor: pointer;
background: transparent;
border: none;
border-radius: 4px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.c-recent-products__remove:hover {
color: #c62828;
background: rgba(198, 40, 40, 0.1);
}
.c-recent-products__image {
flex-shrink: 0;
width: 4.8rem;
height: 4.8rem;
object-fit: contain;
background: #f5f5f5;
border-radius: 0.4rem;
}
.c-recent-products__image-placeholder {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 4.8rem;
height: 4.8rem;
background: #f5f5f5;
border-radius: 0.4rem;
color: #969696;
}
.c-recent-products__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.c-recent-products__name {
font-size: 1.4rem;
font-weight: 500;
color: #232323;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.c-recent-products__maker {
font-size: 1.2rem;
color: #969696;
}
.c-recent-products__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
padding: 4rem 1.6rem;
color: #969696;
text-align: center;
}
.c-recent-products__empty svg {
opacity: 0.5;
}
.c-recent-products__empty p {
margin: 0;
font-size: 1.4rem;
}
.c-recent-products__clear {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
padding: 0.8rem 1.6rem;
font-size: 1.2rem;
color: #969696;
background: transparent;
border: none;
border-top: 1px solid #e0e0e0;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.c-recent-products__clear:hover {
background: #f5f5f5;
color: #c62828;
}
/**
* お気に入りコンポーネント
* ヘッダーのお気に入りアイコン、ドロップダウン、製品ページの追加ボタン
*/
.c-favorites {
position: relative;
z-index: 1;
overflow: visible;
isolation: isolate;
}
.c-favorites:has(.c-favorites__dropdown) {
z-index: 10;
}
.c-favorites__trigger {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
overflow: visible !important;
cursor: pointer;
pointer-events: auto;
}
.c-favorites__badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 10px;
font-weight: 600;
line-height: 16px;
color: #fff;
text-align: center;
white-space: nowrap;
background: #c62828;
border-radius: 8px;
pointer-events: none;
z-index: 5;
}
.c-favorites__badge[hidden] {
display: none;
}
.c-favorites__dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 50;
width: 320px;
max-height: 400px;
overflow-y: auto;
background: #fff;
border-radius: 5px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.c-favorites__dropdown {
position: fixed;
top: auto;
right: 0.8rem;
bottom: 80px;
left: 0.8rem;
width: auto;
max-height: 60vh;
}
}
.c-favorites__empty {
display: flex;
flex-direction: column;
gap: 0.8rem;
align-items: center;
justify-content: center;
padding: 4rem;
color: #808080;
text-align: center;
}
.c-favorites__empty svg {
color: #b3b3b3;
}
.c-favorites__empty p {
margin: 0;
font-size: 1.2rem;
}
.c-favorites__list {
margin: 0;
padding: 0;
list-style: none;
}
.c-favorites__item {
position: relative;
display: flex;
align-items: center;
border-bottom: 1px solid #f0f0f0;
}
.c-favorites__item:last-child {
border-bottom: none;
}
.c-favorites__item:hover {
background: #f5f5f5;
}
.c-favorites__link {
display: flex;
flex: 1;
gap: 0.8rem;
align-items: center;
padding: 0.8rem;
min-width: 0;
overflow: hidden;
color: #232323;
text-decoration: none;
transition: background-color 0.2s ease;
}
.c-favorites__link:hover {
text-decoration: none;
}
.c-favorites__image {
flex-shrink: 0;
width: 48px;
height: 48px;
object-fit: contain;
background: #f5f5f5;
border-radius: 4px;
}
.c-favorites__image-placeholder {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: #b3b3b3;
background: #f5f5f5;
border-radius: 4px;
}
.c-favorites__info {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.c-favorites__name {
overflow: hidden;
font-size: 1.2rem;
font-weight: 500;
color: #232323;
text-overflow: ellipsis;
white-space: nowrap;
}
.c-favorites__maker {
font-size: 1rem;
color: #666;
}
.c-favorites__remove {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-right: 0.4rem;
color: #808080;
cursor: pointer;
background: transparent;
border: none;
border-radius: 4px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.c-favorites__remove:hover {
color: #c62828;
background: rgba(198, 40, 40, 0.1);
}
.c-favorites__clear {
display: flex;
gap: 0.4rem;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.8rem;
font-size: 1.2rem;
color: #666;
cursor: pointer;
background: transparent;
border: none;
border-top: 1px solid #e0e0e0;
transition: background-color 0.2s ease, color 0.2s ease;
}
.c-favorites__clear:hover {
color: #c62828;
background: #f5f5f5;
}
.c-favorites__add-btn {
display: inline-flex;
gap: 0.4rem;
align-items: center;
padding: 0.4rem 0.8rem;
font-size: 1.2rem;
color: #666;
cursor: pointer;
background: transparent;
border: 1px solid #e0e0e0;
border-radius: 5px;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.c-favorites__add-btn svg {
flex-shrink: 0;
}
.c-favorites__add-btn .c-favorites__icon-empty {
display: block;
}
.c-favorites__add-btn .c-favorites__icon-filled {
display: none;
}
.c-favorites__add-btn:hover {
color: #bc008b;
background: rgba(188, 0, 139, 0.05);
border-color: #bc008b;
}
.c-favorites__add-btn.is-active {
color: #c62828;
background: rgba(198, 40, 40, 0.05);
border-color: #c62828;
}
.c-favorites__add-btn.is-active .c-favorites__icon-empty {
display: none;
}
.c-favorites__add-btn.is-active .c-favorites__icon-filled {
display: block;
}
.c-favorites__add-label {
white-space: nowrap;
}
/**
* スティッキーCTAバー
* 製品ページでスクロール時に下部に固定表示されるCTAバー
*
* P2-7対応: モバイル最適化
* - WCAG 2.2 AA タッチターゲットサイズ 44x44px 確保
* - コンパクトな水平レイアウト（モバイル）
* - safe-area-inset-bottom対応（iPhone X以降）
* - prefers-reduced-motion対応
*
* ボタンスタイル統合（P0-2対応）:
* - ボタンは .c-button クラスを使用すること（Single Source）
* - .c-button--sticky で sticky専用の調整を適用
* - 旧 &__btn スタイルは後方互換性のため残すが、非推奨（deprecated）
*
* 推奨マークアップ:
* 見積依頼
* ショップ
* カタログ
*/
.c-sticky-cta {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
padding: 0.8rem 0;
background: #fff;
border-top: 1px solid #f0f0f0;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(100%);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.c-sticky-cta {
padding-bottom: calc(0.8rem + env(safe-area-inset-bottom));
}
}
@media (prefers-reduced-motion: reduce) {
.c-sticky-cta {
transition: none;
transform: translateY(0);
}
.c-sticky-cta:not(.is-visible) {
display: none;
}
}
.c-sticky-cta.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media print {
.c-sticky-cta {
display: none;
}
}
.c-sticky-cta__container {
display: flex;
gap: 1.6rem;
align-items: center;
justify-content: space-between;
max-width: 1200px;
padding: 0 1.6rem;
margin: 0 auto;
}
@media (max-width: 767px) {
.c-sticky-cta__container {
gap: 0.8rem;
padding: 0 0.8rem;
}
}
.c-sticky-cta__product-name {
flex: 1;
min-width: 0;
overflow: hidden;
font-size: 1.6rem;
font-weight: 700;
color: #232323;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 767px) {
.c-sticky-cta__product-name {
font-size: 1rem;
}
}
@media (max-width: 400px) {
.c-sticky-cta__product-name {
display: none;
}
}
.c-sticky-cta__buttons {
display: flex;
flex-shrink: 0;
gap: 0.8rem;
}
@media (max-width: 767px) {
.c-sticky-cta__buttons {
flex: 1;
justify-content: flex-end;
gap: 0.4rem;
}
}
@media (max-width: 400px) {
.c-sticky-cta__buttons {
width: 100%;
justify-content: center;
}
}
.c-sticky-cta__buttons .c-button, .c-sticky-cta__buttons .c-compare-page__clear-btn {
padding: 0.4rem 1.6rem;
font-size: 1.2rem;
min-height: 44px;
min-width: 44px;
}
@media (max-width: 767px) {
.c-sticky-cta__buttons .c-button, .c-sticky-cta__buttons .c-compare-page__clear-btn {
padding: 0.4rem 0.8rem;
font-size: 1rem;
min-height: 44px;
}
}
@media (max-width: 400px) {
.c-sticky-cta__buttons .c-button, .c-sticky-cta__buttons .c-compare-page__clear-btn {
flex: 1;
}
}
.c-sticky-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4rem 1.6rem;
font-size: 1.2rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
border-radius: 5px;
min-height: 44px;
min-width: 44px;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
@media (max-width: 767px) {
.c-sticky-cta__btn {
flex: 1;
padding: 0.4rem 0.8rem;
font-size: 1rem;
min-height: 44px;
}
}
.c-sticky-cta__btn--primary {
color: #fff;
background: #bc008b;
border: 1px solid #bc008b;
}
.c-sticky-cta__btn--primary:hover {
background: #9c0071;
border-color: #9c0071;
}
.c-sticky-cta__btn--secondary {
color: #fff;
background: #8527d5;
border: 1px solid #8527d5;
}
.c-sticky-cta__btn--secondary:hover {
background: rgb(111.4666666667, 32.6857142857, 178.5142857143);
border-color: rgb(111.4666666667, 32.6857142857, 178.5142857143);
}
.c-sticky-cta__btn--outline {
color: #333;
background: transparent;
border: 1px solid #b3b3b3;
}
.c-sticky-cta__btn--outline:hover {
color: #bc008b;
background: rgba(188, 0, 139, 0.05);
border-color: #bc008b;
}
/**
* 画像ズームモーダル
* 製品画像をクリックで拡大表示するモーダル
*/
.c-image-zoom-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.c-image-zoom-modal.is-open {
opacity: 1;
visibility: visible;
}
.c-image-zoom-modal.is-open .c-image-zoom-modal__content {
transform: scale(1);
}
.c-image-zoom-modal.is-open .c-image-zoom-modal__close {
opacity: 1;
visibility: visible;
}
.c-image-zoom-modal__backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.9);
cursor: pointer;
}
.c-image-zoom-modal__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
width: 90vw;
max-width: 1200px;
height: 90vh;
transform: scale(0.95);
transition: transform 0.2s ease;
}
.c-image-zoom-modal__close {
position: fixed;
top: 20px;
right: 20px;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
color: #fff;
cursor: pointer;
background: rgba(0, 0, 0, 0.8);
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.c-image-zoom-modal__close:hover {
background: rgba(0, 0, 0, 0.9);
border-color: rgba(255, 255, 255, 0.7);
transform: scale(1.1);
}
.c-image-zoom-modal__zoom-controls {
position: absolute;
bottom: 1.6rem;
left: 50%;
z-index: 10;
display: flex;
gap: 0.4rem;
align-items: center;
padding: 0.4rem 0.8rem;
background: rgba(0, 0, 0, 0.7);
border-radius: 9999px;
transform: translateX(-50%);
}
.c-image-zoom-modal__zoom-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: #fff;
cursor: pointer;
background: transparent;
border: none;
border-radius: 50%;
transition: background-color 0.2s ease;
}
.c-image-zoom-modal__zoom-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.c-image-zoom-modal__zoom-level {
min-width: 48px;
font-size: 1.2rem;
color: #fff;
text-align: center;
}
.c-image-zoom-modal__image-container {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
overflow: hidden;
}
.c-image-zoom-modal__image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.2s ease;
user-select: none;
}
.c-image-zoom,
[aria-labelledby=section-gallery] .c-image-grid__img {
cursor: zoom-in;
transition: transform 0.2s ease;
}
.c-image-zoom:hover,
[aria-labelledby=section-gallery] .c-image-grid__img:hover {
transform: scale(1.02);
}
/*
* コンポーネント : FAQアコーディオン
* ファイル名 : _c-faq.scss
* 説明 : よくあるご質問セクション用アコーディオン（details/summaryベース、WCAG 2.2 AA準拠）
* Version : 1.0
* 外部ファイル : _variables.scss, _mixins.scss
* 使用方法 : .c-faq > .c-faq__list > details.c-faq__item
*/
.c-faq {
background: #f9f9f9;
}
.c-faq__list {
display: grid;
gap: 1.6rem;
max-width: 900px;
margin: 0 auto;
}
.c-faq__item {
background: #fff;
border-radius: 8px;
border: 1px solid #f0f0f0;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-faq__item:hover {
border-color: #bc008b;
}
.c-faq__item[open] {
border-color: #bc008b;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.c-faq__item[open] .c-faq__question {
background: linear-gradient(135deg, rgba(188, 0, 139, 0.05), rgba(230, 140, 230, 0.03));
border-bottom: 1px solid #f0f0f0;
}
.c-faq__item[open] .c-faq__icon::before {
transform: rotate(90deg);
opacity: 0;
}
.c-faq__item[open] .c-faq__icon::after {
transform: rotate(0);
}
.c-faq__question {
list-style: none;
cursor: pointer;
padding: 2.4rem 4rem;
padding-right: calc(4rem + 32px);
font-weight: 700;
color: #232323;
display: flex;
align-items: center;
position: relative;
transition: background-color 0.2s ease, color 0.2s ease;
}
.c-faq__question::-webkit-details-marker {
display: none;
}
.c-faq__question::marker {
display: none;
}
.c-faq__question:hover {
background: rgba(188, 0, 139, 0.02);
color: #bc008b;
}
.c-faq__question:focus-visible {
outline: 2px solid #0066cc;
outline-offset: -2px;
border-radius: 8px;
}
.c-faq__question > span:first-child {
flex: 1;
line-height: 1.6;
}
.c-faq__question > span:first-child::before {
content: "Q. ";
color: #bc008b;
font-weight: 700;
}
.c-faq__icon {
position: absolute;
right: 4rem;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
}
.c-faq__icon::before, .c-faq__icon::after {
content: "";
position: absolute;
background: #bc008b;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.c-faq__icon::before {
width: 2px;
height: 14px;
left: 11px;
top: 5px;
}
.c-faq__icon::after {
width: 14px;
height: 2px;
left: 5px;
top: 11px;
}
.c-faq__answer {
padding: 2.4rem 4rem;
padding-top: 1.6rem;
color: #232323;
line-height: 1.9;
background: #fff;
}
.c-faq__answer p {
margin: 0;
}
.c-faq__answer p::before {
content: "A. ";
color: #e68ce6;
font-weight: 700;
}
@media (max-width: 767px) {
.c-faq__question {
padding: 1.6rem 2.4rem;
padding-right: calc(2.4rem + 28px);
font-size: 1.2rem;
}
.c-faq__icon {
right: 2.4rem;
width: 20px;
height: 20px;
}
.c-faq__icon::before {
height: 12px;
left: 9px;
top: 4px;
}
.c-faq__icon::after {
width: 12px;
left: 4px;
top: 9px;
}
.c-faq__answer {
padding: 1.6rem 2.4rem;
font-size: 1.2rem;
}
}
@media (prefers-reduced-motion: no-preference) {
.c-faq__item .c-faq__answer {
animation: faq-slide-down 0.25s ease-out;
}
@keyframes faq-slide-down {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
.p-case-study-nav {
background: linear-gradient(to bottom, #f8f8f8, #fff);
padding: 2rem 0;
border-bottom: 1px solid #e0e0e0;
position: sticky;
top: 60px;
z-index: 90;
}
@media (min-width: 768px) {
.p-case-study-nav {
top: 120px;
}
}
.p-case-study-nav__title {
font-size: 1.8rem;
font-weight: 700;
color: #333333;
margin-bottom: 2rem;
text-align: center;
}
.p-case-study-nav__list {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
.p-case-study-nav__item {
flex: 0 0 auto;
}
.p-case-study-nav__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
background: #fff;
border: 1px solid #ddd;
border-radius: 2rem;
color: #232323;
font-size: 1.1rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.p-case-study-nav__link:hover, .p-case-study-nav__link:focus {
background: #bc008b;
color: #fff;
border-color: #bc008b;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(188, 0, 139, 0.2);
}
.p-case-study-nav__link.is-active {
background: #bc008b;
color: #fff;
border-color: #bc008b;
}
.p-case-study-nav__link[data-category=marathon]:hover {
background: #e74c3c;
border-color: #e74c3c;
}
.p-case-study-nav__link[data-category=cold-chain]:hover {
background: #3498db;
border-color: #3498db;
}
.p-case-study-nav__link[data-category=linen]:hover {
background: #9b59b6;
border-color: #9b59b6;
}
.p-case-study-nav__link[data-category=jewelry]:hover {
background: #f39c12;
border-color: #f39c12;
}
.p-case-study-nav__link[data-category=library]:hover {
background: #2ecc71;
border-color: #2ecc71;
}
.p-case-study-nav__link[data-category=livestock]:hover {
background: #e67e22;
border-color: #e67e22;
}
.p-case-study-nav__link[data-category=school]:hover {
background: #1abc9c;
border-color: #1abc9c;
}
.p-case-study-nav__link[data-category=communication]:hover {
background: #34495e;
border-color: #34495e;
}
.p-case-study-nav__link[data-category=airplane]:hover {
background: #2c3e50;
border-color: #2c3e50;
}
.p-case-study-nav__link[data-category=rental]:hover {
background: #f39c12;
border-color: #f39c12;
}
.p-case-study-nav__link[data-category=railway]:hover {
background: #8e44ad;
border-color: #8e44ad;
}
.p-case-study-nav__link[data-category=tire]:hover {
background: #95a5a6;
border-color: #95a5a6;
}
.p-case-study-nav__link[data-category=ports]:hover {
background: #3498db;
border-color: #3498db;
}
.p-case-study-nav__link[data-category=automotive]:hover {
background: #e74c3c;
border-color: #e74c3c;
}
.p-case-study-nav__link[data-category=retail]:hover {
background: #e67e22;
border-color: #e67e22;
}
.p-case-study-nav__link[data-category=hotel]:hover {
background: #9b59b6;
border-color: #9b59b6;
}
.p-case-study-nav__link[data-category=restaurant]:hover {
background: #f39c12;
border-color: #f39c12;
}
.p-case-study-nav__link[data-category=warehouse]:hover {
background: #2ecc71;
border-color: #2ecc71;
}
.p-case-study-nav__link[data-category=pharmacy]:hover {
background: #1abc9c;
border-color: #1abc9c;
}
.p-case-study-nav__link[data-category=hospital]:hover {
background: #e74c3c;
border-color: #e74c3c;
}
.p-case-study-nav__link[data-category=specimen]:hover {
background: #3498db;
border-color: #3498db;
}
.p-case-study-nav__link[data-category=construction]:hover {
background: #95a5a6;
border-color: #95a5a6;
}
.p-case-study-nav__link[data-category=luxury_brand]:hover {
background: #9b59b6;
border-color: #9b59b6;
}
.p-case-study-nav__link[data-category=apparel]:hover {
background: #e67e22;
border-color: #e67e22;
}
.p-case-study-nav__link[data-category=convenience_store]:hover {
background: #2ecc71;
border-color: #2ecc71;
}
.p-case-study-nav__link[data-category=infrastructure]:hover {
background: #34495e;
border-color: #34495e;
}
.p-case-study-nav__link[data-category=manufacturing]:hover {
background: #2c3e50;
border-color: #2c3e50;
}
.p-case-study-nav__link[data-category=logistics]:hover {
background: #3498db;
border-color: #3498db;
}
.p-case-study-nav__icon {
display: inline-flex;
width: 16px;
height: 16px;
transform: rotate(-90deg);
transition: transform 0.2s ease;
}
.p-case-study-nav__link:hover .p-case-study-nav__icon {
transform: rotate(0);
}
.p-case-study-grid .c-case-study-card__category[id] {
scroll-margin-top: 280px;
}
@media (min-width: 768px) {
.p-case-study-grid .c-case-study-card__category[id] {
scroll-margin-top: 340px;
}
}
/* ========================================
* Page : FAQ
* File : /assets/scss/pages/_p-faq.scss
* Purpose : FAQページ専用のスタイル
* Depends on : デザイントークン
* ======================================== */
.faq-nav {
display: flex;
gap: 1rem;
margin: 2rem 0;
padding: 0;
list-style: none;
flex-wrap: wrap;
}
.faq-nav li {
flex: 1 1 calc(25% - 0.75rem);
min-width: 200px;
}
@media screen and (max-width: 768px) {
.faq-nav li {
flex: 1 1 100%;
}
}
.faq-nav a {
display: block;
padding: 1rem;
background: #222;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.faq-nav a::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.faq-nav a:hover, .faq-nav a:focus {
background: #444;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.faq-nav a:hover::before, .faq-nav a:focus::before {
left: 100%;
}
.faq-nav a:active {
transform: translateY(0);
}
.faqSection {
margin: 3rem 0;
padding: 2rem 0;
border-bottom: 1px solid #e0e0e0;
}
.faqSection:last-child {
border-bottom: none;
}
@media screen and (max-width: 768px) {
.faqSection {
margin: 2rem 0;
padding: 1.5rem 0;
}
}
.faqMenu__title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 2rem;
position: relative;
padding-bottom: 0.5rem;
}
.faqMenu__title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: var(--primary-color);
transition: width 0.3s ease;
}
.faqMenu__title:hover::after {
width: 100px;
}
@media screen and (max-width: 768px) {
.faqMenu__title {
font-size: 1.5rem;
}
}
.faqContent__qa {
margin: 2rem 0;
padding: 0;
transition: all 0.3s ease;
}
.faqContent__qa:hover dt {
background: #f9f9f9;
}
.faqContent__qa dt {
position: relative;
margin: 0 0 1rem 0;
padding: 1rem 1rem 1rem 3.5rem;
font-weight: 600;
font-size: 1.8rem;
line-height: 1.6;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 8px;
}
.faqContent__qa dt::before {
content: "Q";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 2.5rem;
height: 2.5rem;
background: #222;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.125rem;
transition: all 0.3s ease;
}
.faqContent__qa dt:hover::before {
background: var(--primary-color);
transform: translateY(-50%) scale(1.1);
}
.faqContent__qa dd {
margin: 0 0 2rem 0;
padding: 1rem 1rem 1rem 3.5rem;
position: relative;
line-height: 1.8;
color: #333;
}
.faqContent__qa dd::before {
content: "A";
position: absolute;
left: 0;
top: 1rem;
width: 2.5rem;
height: 2.5rem;
background: #fff;
color: #222;
border: 2px solid #222;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.125rem;
}
.faqContent__qa dd p {
margin: 0 0 1rem 0;
}
.faqContent__qa dd p:last-child {
margin-bottom: 0;
}
.faqContent__qa dd ul {
margin: 1rem 0;
padding-left: 1.5rem;
}
.faqContent__qa dd ul li {
margin: 0.5rem 0;
list-style-type: disc;
line-height: 1.6;
}
.faqContent__qa dd a {
color: var(--primary-color);
text-decoration: underline;
transition: all 0.2s ease;
}
.faqContent__qa dd a:hover {
text-decoration: none;
background: rgba(188, 0, 139, 0.1);
padding: 0 0.2em;
border-radius: 3px;
}
@media screen and (max-width: 768px) {
.faqContent__qa dt,
.faqContent__qa dd {
padding-left: 3rem;
}
.faqContent__qa dt::before,
.faqContent__qa dd::before {
width: 2rem;
height: 2rem;
font-size: 1rem;
}
.faqContent__qa dt {
font-size: 1.5rem;
}
}
.faqContent__notes {
margin: 3rem 0;
padding: 1.5rem;
background: #f8f8f8;
border-radius: 8px;
text-align: center;
font-size: 1.125rem;
border: 1px solid #e0e0e0;
}
.faqContent__notes p {
margin: 0;
}
@media screen and (max-width: 768px) {
.faqContent__notes {
font-size: 1rem;
padding: 1rem;
}
}
/*
* Component : Glossary Page Styles
* File : /assets/scss/pages/_p-glossary.scss
* Purpose : 索引グリッド（五十音/英字/記号）、検索ハイライト、表示/非表示制御
* Depends on : foundation/_variables.scss（$color-gray-400, $color-gray-500, $color-gray-900 など）
*/
.p-glossary {
padding: 32px 0;
}
.p-glossary__header {
margin-bottom: 12px;
}
.p-glossary__title {
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 700;
margin: 0 0 12px;
}
.p-glossary__search {
margin: 12px 0 16px;
}
.p-glossary__search-label {
display: block;
font-weight: 600;
margin-bottom: 6px;
}
.p-glossary__search-input {
width: 100%;
max-width: 520px;
height: 44px;
padding: 10px 14px;
border: 1px solid #b3b3b3;
border-radius: 8px;
font-size: 16px;
}
.p-glossary__search-hint {
color: #808080;
font-size: 13px;
margin: 6px 0 0;
}
/* ───────────────── 索引グリッド（五十音＋英字＋記号） */
.c-index-grid {
margin: 24px 0 32px;
/* タブレット幅では8列に */
/* スマホでは5列にして見やすく */
}
.c-index-grid__list {
/* 10列の等幅グリッド（五十音1行、英字3行、記号含む） */
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
grid-auto-rows: 44px;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #b3b3b3;
border-right: 0;
border-bottom: 0;
background-color: #f9fdfb;
}
.c-index-grid__item {
border-right: 1px solid #b3b3b3;
border-bottom: 1px solid #b3b3b3;
/* 空のセクションに対応する索引セルは薄く表示 */
}
.c-index-grid__item.is-disabled {
background-color: #f5f5f5;
}
.c-index-grid__item.is-disabled .c-index-grid__link {
color: #999;
cursor: default;
opacity: 0.5;
}
.c-index-grid__link {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
padding: 0.4rem 0.6rem;
text-decoration: none;
color: #333333;
font-weight: 600;
font-size: 14px;
border-radius: 0;
transition: background-color 0.2s ease;
/* 五十音の行は少し文字を小さく */
}
.c-index-grid__link:hover:not([aria-disabled=true]) {
background-color: rgba(0, 123, 255, 0.08);
text-decoration: none;
}
.c-index-grid__link:focus-visible {
outline: 2px solid #007bff;
outline-offset: -2px;
z-index: 1;
position: relative;
}
.c-index-grid__item:nth-child(-n+10) .c-index-grid__link {
font-size: 13px;
}
@media (max-width: 1024px) and (min-width: 769px) {
.c-index-grid__list {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.c-index-grid__list {
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-auto-rows: 40px;
}
.c-index-grid__link {
font-size: 12px;
padding: 0.3rem 0.4rem;
}
}
/* ───────────────── コンテンツの表示制御 */
.p-glossary__block {
margin: 32px 0;
padding-bottom: 24px;
border-bottom: 2px solid #e5e5e5;
/* 検索時に空になったブロックは非表示 */
}
.p-glossary__block:last-child {
border-bottom: none;
}
.p-glossary__block.is-empty {
display: none;
}
.p-glossary__block-title {
font-size: clamp(20px, 2.2vw, 24px);
font-weight: 700;
margin: 0 0 16px;
padding: 8px 12px;
background: linear-gradient(to right, #f0f8ff, transparent);
border-left: 4px solid #007bff;
}
.p-glossary__list {
margin: 0;
padding: 0;
list-style: none;
}
.p-glossary__item {
padding: 12px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
/* 検索時の非表示 */
}
.p-glossary__item:last-child {
border-bottom: none;
}
.p-glossary__item.is-hidden {
display: none;
}
.p-glossary__item-title {
margin: 0 0 8px;
font-weight: 700;
font-size: 16px;
color: #333;
}
.p-glossary__item-text {
margin: 0;
line-height: 1.75;
color: #555;
font-size: 14px;
/* リンクのスタイル */
}
.p-glossary__item-text a {
color: #007bff;
text-decoration: underline;
}
.p-glossary__item-text a:hover {
text-decoration: none;
}
/* ───────────────── 検索ハイライト */
mark.c-highlight {
background: linear-gradient(to bottom, transparent 30%, #fff2a8 30%, #fff2a8 80%, transparent 80%);
padding: 0 0.1em;
border-radius: 2px;
font-weight: 600;
}
/* ───────────────── 検索ボックススタイル */
.c-search {
position: sticky;
top: 80px;
z-index: 10;
background: white;
padding: 16px 0;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.c-search__hint {
display: inline-flex;
align-items: center;
gap: 6px;
color: #666;
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
}
.c-search__hint svg {
stroke-width: 2;
}
.c-search__label {
display: block;
}
.c-search__input {
width: 100%;
max-width: 600px;
height: 48px;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 24px;
font-size: 16px;
transition: border-color 0.3s ease;
}
.c-search__input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.c-search__input::placeholder {
color: #999;
}
/*
* コンポーネント : ホームページ共通スタイル
* ファイル名 : /assets/scss/pages/_p-home.scss
* 説明 : トップページ全体の共通スタイル定義（現在は空ファイル、セクション別ファイルに分割済み）
* 外部ファイル : 各p-home-*.scssファイルをインポート予定
* 使用方法 : index.phpで使用。将来的に各セクションファイルをまとめるハブファイルとして機能予定
*/
/*
* コンポーネント : ビジネス事業内容セクション
* ファイル名 : /assets/scss/pages/_p-home-business.scss
* 説明 : トップページの4事業紹介カードグリッドスタイル。アイコン付き2×2レイアウト、ホバーエフェクト対応
* 外部ファイル : _variables.scss（デザイントークン）, _mixins.scss
* 使用方法 : section-home-business.phpで使用。p-home-businessクラスで事業内容カードを表示
*/
.p-home-business {
padding: clamp(3rem, 6vw, 6rem) 0;
}
.p-home-business.p-home-business .l-container,
.p-home-business .l-container {
text-align: center;
}
.p-home-business__header {
text-align: center;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.p-home-business__eyebrow {
font-family: "Roboto", sans-serif;
font-size: clamp(1rem, 2vw, 1.4rem);
font-weight: 700;
letter-spacing: 0.15em;
color: #bc008b;
margin-bottom: 1rem;
text-transform: uppercase;
}
.p-home-business__title {
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 700;
line-height: 1.3;
color: #333333;
margin-bottom: 1.5rem;
}
.p-home-business__subtitle {
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
line-height: 1.6;
color: #808080;
max-width: 60ch;
margin: 0 auto;
}
.p-home-business__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 768px) {
.p-home-business__grid {
grid-template-columns: repeat(2, 1fr);
}
}
.p-home-business__card {
background: #fff;
border-radius: 1rem;
padding: clamp(2rem, 3vw, 3rem);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.p-home-business__card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.p-home-business__icon {
width: 4rem;
height: 4rem;
padding: 0.5rem;
background-color: rgba(188, 0, 139, 0.1);
border-radius: 0.75rem;
color: #bc008b;
}
.p-home-business__icon svg {
width: 100%;
height: 100%;
}
.p-home-business__title-card {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: #333333;
margin-bottom: 1rem;
line-height: 1.3;
}
.p-home-business__description {
color: #333;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.p-home-business__keywords {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-block-end: 1.5rem;
line-height: 1.6;
color: #666;
}
.p-home-business__keyword::after {
content: "/";
color: #b3b3b3;
}
.p-home-business__keyword:last-child::after {
display: none;
}
.p-home-business__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: #bc008b;
text-decoration: none;
transition: gap 0.2s ease;
}
.p-home-business__link:hover {
gap: 0.75rem;
text-decoration: underline;
}
.p-home-business__link svg {
width: 1rem;
height: 1rem;
}
/*
* コンポーネント : パートナーロゴセクション
* ファイル名 : /assets/scss/pages/_p-home-partners.scss
* 説明 : トップページのパートナー企業ロゴ一覧スタイル。グレースケール→カラーのホバーエフェクト付きグリッド
* 外部ファイル : _variables.scss（色・フォント変数）, _mixins.scss, _c-partner-logos.scss（ロゴグリッド）
* 使用方法 : section-home-partner.phpで使用。c-partner-logosで自動グリッドレイアウト、ホバーで彩度復活
*/
/* ---------- Section Wrapper ---------- */
.p-home-partners {
/* 余白は 8pt グリッド＋Fluid Type */
padding-block: clamp(4rem, 8vw, 8rem);
text-align: center;
}
.p-home-partners.p-home-partners .l-container,
.p-home-partners .l-container {
text-align: center;
}
.p-home-partners__header {
text-align: center;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.p-home-partners__eyebrow {
font-family: "Roboto", sans-serif;
font-size: clamp(1rem, 2vw, 1.4rem);
font-weight: 700;
letter-spacing: 0.15em;
color: #bc008b;
margin-bottom: 1rem;
text-transform: uppercase;
}
.p-home-partners__title {
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 700;
line-height: 1.3;
color: #333333;
margin-bottom: 1.5rem;
}
.p-home-partners__subtitle {
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
line-height: 1.6;
color: #808080;
max-width: 60ch;
margin: 0 auto;
}
.p-home-partners__action {
margin-block-start: clamp(3.2rem, 6vw, 4rem);
}
/* ---------- Logo Grid ---------- */
.c-partner-logos {
/* 自動折返しグリッド – min 120px, max 1fr でフル幅利用 */
display: grid;
gap: clamp(1rem, 1.5vw, 1.8rem);
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
justify-items: center;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.c-partner-logos__item {
/* ビジュアル調整 */
filter: grayscale(1);
opacity: 0.8;
transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
/* アクセシビリティ – キーボードフォーカス用 */
/* ロゴ画像 */
}
.c-partner-logos__item:focus-within {
outline: 2px solid #bc008b;
outline-offset: 2px;
}
.c-partner-logos__item:hover, .c-partner-logos__item:focus-within {
filter: grayscale(0);
opacity: 1;
transform: translateY(-4px);
}
.c-partner-logos__item img {
width: 100%;
height: auto;
object-fit: contain;
/* CLS対策 – サイズ固定 */
max-height: 80px;
}
/*
* コンポーネント : ソリューションカードセクション
* ファイル名 : /assets/scss/pages/_p-home-solution.scss
* 説明 : トップページ「ソリューション＆ナレッジ」セクションの6カードグリッドスタイル。カテゴリーバッジ付き
* 外部ファイル : _variables.scss（デザイントークン）, _mixins.scss（media-up）
* 使用方法 : section-home-solution.phpで使用。レスポンシブ3カラムグリッド、ホバーで画像拡大エフェクト
*/
.p-home-solution {
padding: clamp(3rem, 6vw, 6rem) 0;
}
.p-home-solution.p-home-solution .l-container,
.p-home-solution .l-container {
text-align: center;
}
.p-home-solution__header {
text-align: center;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.p-home-solution__eyebrow {
font-family: "Roboto", sans-serif;
font-size: clamp(1rem, 2vw, 1.4rem);
font-weight: 700;
letter-spacing: 0.15em;
color: #bc008b;
margin-bottom: 1rem;
text-transform: uppercase;
}
.p-home-solution__title {
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 700;
line-height: 1.3;
color: #333333;
margin-bottom: 1.5rem;
}
.p-home-solution__subtitle {
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
line-height: 1.6;
color: #808080;
max-width: 60ch;
margin: 0 auto;
}
.p-home-solution__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: clamp(2rem, 4vw, 3rem);
margin-bottom: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 768px) {
.p-home-solution__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.p-home-solution__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.p-home-solution__card {
background: #fff;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
}
.p-home-solution__card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.p-home-solution__card:hover .p-home-solution__thumbnail img {
transform: scale(1.05);
}
.p-home-solution__card:hover .p-home-solution__link {
gap: 0.75rem;
}
.p-home-solution__thumbnail {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
background-color: #f9f9f9;
}
.p-home-solution__thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.p-home-solution__category {
position: absolute;
top: 1rem;
left: 1rem;
padding: 0.25rem 0.75rem;
font-size: 1.1rem;
font-weight: 700;
font-family: "Roboto", sans-serif;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: 0.25rem;
background-color: #bc008b;
color: #fff;
}
.p-home-solution__category--primary {
background-color: #bc008b;
}
.p-home-solution__category--secondary {
background-color: #05192d;
}
.p-home-solution__category--accent {
background-color: #cb6ce6;
}
.p-home-solution__category--info {
background-color: #8527d5;
}
.p-home-solution__content {
padding: clamp(1.5rem, 3vw, 2rem);
flex: 1;
display: flex;
flex-direction: column;
}
.p-home-solution__title-card {
font-size: clamp(1.6rem, 2.5vw, 1.8rem);
font-weight: 700;
color: #333333;
margin-bottom: 0.75rem;
line-height: 1.3;
}
.p-home-solution__description {
font-size: 1.4rem;
color: #333;
line-height: 1.6;
margin-bottom: 1rem;
flex: 1;
}
.p-home-solution__tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.p-home-solution__tag {
font-size: 1.2rem;
color: #666;
}
.p-home-solution__tag::before {
content: "#";
color: #b3b3b3;
}
.p-home-solution__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: #bc008b;
text-decoration: none;
transition: gap 0.2s ease;
}
.p-home-solution__link:hover {
text-decoration: underline;
}
.p-home-solution__link svg {
width: 1.2rem;
height: 1.2rem;
}
/*
* コンポーネント : ニュースセクション
* ファイル名 : /assets/scss/pages/_p-home-news.scss
* 説明 : トップページ「最新情報とプレスリリース」セクションのヘッダースタイル
* 外部ファイル : _variables.scss（デザイントークン）, _mixins.scss（media-up）
* 使用方法 : section-home-news.phpで使用。ヘッダー部分の中央揃えを担当
*/
.p-home-news__header {
text-align: center;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.p-home-news__eyebrow {
font-family: "Roboto", sans-serif;
font-size: clamp(1rem, 2vw, 1.4rem);
font-weight: 700;
letter-spacing: 0.15em;
color: #bc008b;
margin-bottom: 1rem;
text-transform: uppercase;
}
.p-home-news__title {
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 700;
line-height: 1.3;
color: #333333;
margin-bottom: 1.5rem;
}
.p-home-news__subtitle {
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
line-height: 1.6;
color: #808080;
max-width: 60ch;
margin: 0 auto;
}
/*
* コンポーネント : 会社概要セクション（トップページ専用）
* ファイル名 : /assets/scss/pages/_p-home-company.scss
* 説明 : トップページ専用の会社概要セクションスタイル。黒背景に白文字、中央寄せレイアウト
* 外部ファイル : _variables.scss（色・フォント・余白変数）, _mixins.scss
* 使用方法 : section-home-company.phpで使用。index.phpでのみ表示、会社理念とビジョンを訴求
*/
.p-home-company {
padding-block: clamp(3rem, 6vw, 6rem);
text-align: center;
}
.p-home-company.p-home-company .l-container,
.p-home-company .l-container {
text-align: center;
}
.p-home-company__header {
text-align: center;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.p-home-company__eyebrow {
font-family: "Roboto", sans-serif;
font-size: clamp(1rem, 2vw, 1.4rem);
font-weight: 700;
letter-spacing: 0.15em;
color: #bc008b;
margin-bottom: 1rem;
text-transform: uppercase;
}
.p-home-company__title {
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 700;
line-height: 1.3;
color: #333333;
margin-bottom: 1.5rem;
}
.p-home-company__subtitle {
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
line-height: 1.6;
color: #808080;
max-width: 60ch;
margin: 0 auto;
}
.p-home-company__content {
display: flex;
flex-direction: column;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.p-home-company__text-wrapper {
flex: 1;
}
.p-home-company__text {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2.4rem;
font-size: clamp(1.4rem, 2vw, 1.8rem);
line-height: 1.9;
}
.p-home-company__text:last-of-type {
margin-bottom: 50px;
}
.p-home-company__action {
margin-top: clamp(2.4rem, 4vw, 4rem);
text-align: center;
}
/*
* コンポーネント : その他カードセクション
* ファイル名 : /assets/scss/pages/_p-home-other.scss
* 説明 : トップページ「その他」セクション（FAQ、用語集、ショップ案内）のカードグリッドスタイル定義
* 外部ファイル : _variables.scss（デザイントークン）, _mixins.scss（media-up）
* 使用方法 : section-home-other.phpで使用。p-home-otherクラスで3カラムカードレイアウトを実現
*/
.p-home-other {
padding: clamp(3rem, 6vw, 6rem) 0;
}
.p-home-other__header {
text-align: center;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.p-home-other__eyebrow {
font-family: "Roboto", sans-serif;
font-size: clamp(1rem, 2vw, 1.4rem);
font-weight: 700;
letter-spacing: 0.15em;
color: #bc008b;
margin-bottom: 1rem;
text-transform: uppercase;
}
.p-home-other__title {
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 700;
line-height: 1.3;
color: #333333;
margin-bottom: 1.5rem;
}
.p-home-other__subtitle {
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
line-height: 1.6;
color: #808080;
max-width: 60ch;
margin: 0 auto;
}
.p-home-other__grid {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.p-home-other__card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 0.5rem;
box-shadow: 0 10px 10px -3px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
}
.p-home-other__card:hover {
transform: translateY(-4px);
}
.p-home-other__thumbnail img {
width: 100%;
height: auto;
display: block;
}
.p-home-other__content {
padding: 1.25rem;
display: flex;
flex-direction: column;
}
.p-home-other__title-card {
font-size: 1.25rem;
margin: 0 0 0.5rem;
}
.p-home-other__description {
margin-bottom: auto;
color: #808080;
}
.p-home-other__link {
margin-top: 1rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
/* ==========================================================================
* Page : Legal Pages (Privacy Policy, Terms, etc.)
* File : _p-legal.scss
* Author : Sheng Hero Corp. Front-End Team
* Purpose : プライバシーポリシー・利用規約など法的ページのスタイル定義
* Depends on : foundation/_variables.scss, foundation/_mixins.scss
* ======================================================================= */
/* =============================================================
法的ページ共通スタイル
============================================================= */
.p-legal__section {
margin-bottom: clamp(3rem, 6vw, 6rem);
}
.p-legal__section:last-child {
margin-bottom: 0;
}
.p-legal__title {
position: relative;
margin-bottom: clamp(2rem, 4vw, 3rem);
padding: 1.5rem;
font-size: clamp(2rem, 3vw, 2.8rem);
font-weight: 700;
color: #232323;
}
.p-legal__title::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 4.2rem;
height: 4px;
background: #bc008b;
}
@media (min-width: 768px) {
.p-legal__title::after {
width: 5rem;
}
}
.p-legal__heading {
position: relative;
margin-top: 3rem;
margin-bottom: 1.5rem;
padding-left: 2rem;
font-size: clamp(1.6rem, 2.5vw, 2rem);
font-weight: 700;
color: #232323;
}
.p-legal__heading::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 1.8rem;
background: #bc008b;
}
.p-legal__text {
font-size: 1.6rem;
line-height: 1.9;
color: #232323;
margin-bottom: 2.4rem;
}
.p-legal__text:last-child {
margin-bottom: 2.4rem;
}
.p-legal__list {
margin: 1.6rem 0;
padding-left: 2rem;
list-style: none;
}
.p-legal__list li {
position: relative;
margin-bottom: 0.8rem;
padding-left: 1.5rem;
font-size: 1.6rem;
line-height: 1.9;
}
.p-legal__list li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: #bc008b;
font-size: 1.2rem;
}
.p-legal__definition-list {
margin: 1.6rem 0;
}
.p-legal__definition-list dt {
font-weight: 700;
color: #232323;
margin-bottom: 0.5rem;
font-size: 1.6rem;
}
.p-legal__definition-list dd {
margin-left: 2rem;
margin-bottom: 1.6rem;
color: #969696;
font-size: 1.6rem;
line-height: 1.9;
}
.p-legal__definition-list dd:last-child {
margin-bottom: 0;
}
.p-legal__link {
color: #bc008b;
text-decoration: underline;
transition: color 0.2s ease, opacity 0.2s ease;
}
.p-legal__link:hover {
color: #e68ce6;
text-decoration: none;
opacity: 0.8;
}
.p-legal__link:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.p-legal__notice {
padding: 20px;
margin-bottom: 30px;
border-radius: 8px;
border: 1px solid #ddd;
}
.p-legal__notice--important {
background-color: #fff3cd;
border-color: #ffeaa7;
color: #856404;
}
.p-legal__notice-title {
font-size: 18px;
font-weight: 600;
margin: 0 0 10px 0;
color: #856404;
}
.p-legal__notice-text {
font-size: 16px;
line-height: 1.6;
margin: 0;
color: #856404;
}
/* =============================================================
更新日情報
============================================================= */
.c-update-info {
text-align: right;
padding: 2.4rem 1.6rem;
}
.c-update-info__text {
font-size: 1.2rem;
color: #969696;
}
.c-update-info__date {
font-weight: 700;
color: #232323;
}
/* =============================================================
印刷用スタイル
============================================================= */
@media print {
.p-legal__section {
page-break-inside: avoid;
}
.p-legal__title::after, .p-legal__heading::before {
display: none;
}
.p-legal__link {
color: #000;
text-decoration: none;
}
.p-legal__link::after {
content: " (" attr(href) ")";
font-size: 0.8em;
}
.c-update-info {
border-top-color: #000;
}
}
/* =============================================================
モバイル対応調整
============================================================= */
@media (min-width: 768px) {
.p-legal__text, .p-legal__list li, .p-legal__definition-list dt, .p-legal__definition-list dd {
font-size: 1.6rem;
}
}
/*
* コンポーネント : 会社概要セクション（トップページ専用）
* ファイル名 : /assets/scss/pages/_p-home-company.scss
* 説明 : トップページ専用の会社概要セクションスタイル。黒背景に白文字、中央寄せレイアウト
* 外部ファイル : _variables.scss（色・フォント・余白変数）, _mixins.scss
* 使用方法 : section-home-company.phpで使用。index.phpでのみ表示、会社理念とビジョンを訴求
*/
.p-philosophy {
/* ▼ 補足説明ブロック（段落版） */
/* ▼ カード型説明ブロック（grid） */
}
.p-philosophy__content {
display: flex;
flex-wrap: wrap;
gap: 2.4rem;
align-items: center;
}
.p-philosophy__content--no-logo {
justify-content: center;
}
.p-philosophy__logo {
width: 200px;
flex-shrink: 0;
}
.p-philosophy__logo img {
width: 100%;
height: auto;
}
.p-philosophy__text {
flex: 1 1 600px;
max-width: 100%;
}
.p-philosophy__words {
font-family: "Roboto", sans-serif;
font-size: 3rem;
line-height: 1.6;
margin-bottom: 1.6rem;
}
.p-philosophy__words .char {
color: #bc008b;
font-weight: bold;
font-size: 4rem;
}
.p-philosophy__words p {
margin-bottom: 0.8em;
}
.p-philosophy__words__sheng {
white-space: nowrap;
flex-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.p-philosophy__desc {
font-size: 1.6rem;
line-height: 1.8;
color: #333333;
}
.p-philosophy__desc .char {
color: #bc008b;
font-weight: bold;
font-size: inherit;
}
.p-philosophy__note {
margin-top: 4rem;
padding-top: 1.6rem;
}
.p-philosophy__note .p-philosophy__desc {
margin-bottom: 1.6rem;
}
.p-philosophy__note-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.4rem;
margin-top: 0.4rem;
padding-top: 0.8rem;
}
.p-philosophy__card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
padding: 0.8rem;
}
.p-philosophy__card-title {
font-size: 1.8rem;
font-weight: bold;
color: #bc008b;
margin-bottom: 0.5em;
}
.p-philosophy__card-desc {
font-size: 1.6rem;
line-height: 1.8;
color: #333333;
}
@media (min-width: 768px) {
.p-philosophy__note-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.p-philosophy__content {
flex-direction: column;
align-items: center;
}
.p-philosophy__text {
flex: none;
width: 100%;
margin-bottom: 0;
}
.p-philosophy__words {
font-size: 1.4rem;
margin-bottom: 0.8rem;
}
.p-philosophy__words .char {
font-size: 1.8rem;
}
.p-philosophy__words .p-philosophy__sheng {
font-size: 1.2rem;
flex-wrap: wrap;
white-space: normal;
}
.p-philosophy__desc {
margin-bottom: 0;
font-size: 1.4rem;
}
.p-philosophy__desc .char {
color: #bc008b;
font-weight: bold;
font-size: inherit;
}
.p-philosophy__note {
margin-top: 2.4rem;
}
.p-philosophy__note .p-philosophy__desc {
font-size: 1.4rem;
}
.p-philosophy__card-title {
font-size: 1.5rem;
}
.p-philosophy__card-desc {
font-size: 1.3rem;
}
}
/* ==========================================================================
* Page : Press Contact Section
* File : _p-press-contact.scss
* Author : Sheng Hero Corp. Front-End Team
* Purpose : プレスリリースページの報道関係者向け問い合わせセクション
* Depends on : foundation/_variables.scss, foundation/_mixins.scss
* ======================================================================= */
/* =============================================================
プレス窓口セクション
============================================================= */
.p-press-contact {
display: grid;
gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 768px) {
.p-press-contact {
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 4vw, 4rem);
}
}
.p-press-contact__info {
background: #fff;
border-radius: 8px;
padding: clamp(1.5rem, 3vw, 2.5rem);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid #f0f0f0;
}
.p-press-contact__info h3 {
font-size: clamp(1.4rem, 2vw, 1.8rem);
font-weight: 700;
color: #bc008b;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #bc008b;
}
.p-press-contact__info > p {
font-size: 1.6rem;
line-height: 1.9;
color: #232323;
margin-bottom: 1.5rem;
}
.p-press-contact__details {
margin: 0;
}
.p-press-contact__details > div {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid #f0f0f0;
}
.p-press-contact__details > div:last-child {
border-bottom: none;
}
.p-press-contact__details dt {
flex: 0 0 auto;
min-width: 120px;
font-weight: 700;
color: #232323;
font-size: 1.2rem;
}
@media (min-width: 768px) {
.p-press-contact__details dt {
min-width: 140px;
font-size: 1.6rem;
}
}
.p-press-contact__details dd {
flex: 1;
margin: 0;
color: #232323;
font-size: 1.6rem;
}
.p-press-contact__details dd a {
color: #bc008b;
text-decoration: none;
transition: color 0.2s ease, opacity 0.2s ease;
}
.p-press-contact__details dd a:hover {
text-decoration: underline;
opacity: 0.8;
}
.p-press-contact__details dd a:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.p-press-contact__boilerplate {
background: linear-gradient(135deg, rgba(188, 0, 139, 0.03) 0%, rgba(188, 0, 139, 0.08) 100%);
border-radius: 8px;
padding: clamp(1.5rem, 3vw, 2.5rem);
border-left: 4px solid #bc008b;
}
.p-press-contact__boilerplate h3 {
font-size: clamp(1.4rem, 2vw, 1.8rem);
font-weight: 700;
color: #232323;
margin-bottom: 1rem;
}
.p-press-contact__boilerplate > p {
font-size: 1.6rem;
line-height: 1.9;
color: #232323;
margin-bottom: 1rem;
}
.p-press-contact__boilerplate > p:last-of-type:not(.p-press-contact__website) {
margin-bottom: 1.5rem;
}
.p-press-contact__boilerplate > p strong {
color: #bc008b;
}
.p-press-contact__website {
font-size: 1.2rem;
color: #969696;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(188, 0, 139, 0.2);
}
.p-press-contact__website a {
color: #bc008b;
text-decoration: none;
font-weight: 700;
transition: color 0.2s ease, opacity 0.2s ease;
}
.p-press-contact__website a:hover {
text-decoration: underline;
opacity: 0.8;
}
.p-press-contact__website a:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/* =============================================================
印刷用スタイル
============================================================= */
@media print {
.p-press-contact {
display: block;
page-break-inside: avoid;
}
.p-press-contact__info, .p-press-contact__boilerplate {
background: none !important;
border: 1pt solid #000;
padding: 1em;
margin-bottom: 1em;
box-shadow: none;
}
.p-press-contact__boilerplate {
border-left-width: 3pt;
}
.p-press-contact__details > div {
border-bottom-color: #ccc;
}
.p-press-contact__details a {
color: #000;
text-decoration: underline;
}
.p-press-contact__details a::after {
content: " [" attr(href) "]";
font-size: 8pt;
}
.p-press-contact__website a::after {
content: none;
}
}
/*
* Component : サービスカード（事業内容ページ専用）
* File : _p-service-card.scss
* Purpose : 4つの事業を2×2グリッドで表示。半透明画像ヘッダーと背景アイコン付き
* Depends on : _variables.scss, _mixins.scss
*/
.p-service-card__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 768px) {
.p-service-card__grid {
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
}
@media (min-width: 992px) {
.p-service-card__grid {
gap: 4rem;
}
}
.p-service-card__link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
grid-column: span 1;
}
.p-service-card__item {
position: relative;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
height: 100%;
display: flex;
flex-direction: column;
min-height: 450px;
}
.p-service-card__item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.p-service-card__item:hover .p-service-card__cta::after {
transform: translateX(4px);
}
.p-service-card__item:hover .p-service-card__header::after {
opacity: 0.9;
}
.p-service-card__item--product-sale .p-service-card__header::after {
background-color: #3355cc;
}
.p-service-card__item--product-sale .p-service-card__badge {
background-color: rgba(255, 255, 255, 0.2);
}
.p-service-card__item--product-sale .p-service-card__icon {
color: rgba(255, 255, 255, 0.15);
}
.p-service-card__item--product-sale .p-service-card__cta {
color: #3355cc;
}
.p-service-card__item--software .p-service-card__header::after {
background-color: #2e7d32;
}
.p-service-card__item--software .p-service-card__badge {
background-color: rgba(255, 255, 255, 0.2);
}
.p-service-card__item--software .p-service-card__icon {
color: rgba(255, 255, 255, 0.15);
}
.p-service-card__item--software .p-service-card__cta {
color: #2e7d32;
}
.p-service-card__item--hardware .p-service-card__header::after {
background-color: #d84315;
}
.p-service-card__item--hardware .p-service-card__badge {
background-color: rgba(255, 255, 255, 0.2);
}
.p-service-card__item--hardware .p-service-card__icon {
color: rgba(255, 255, 255, 0.15);
}
.p-service-card__item--hardware .p-service-card__cta {
color: #d84315;
}
.p-service-card__item--consulting .p-service-card__header::after {
background-color: #7b1fa2;
}
.p-service-card__item--consulting .p-service-card__badge {
background-color: rgba(255, 255, 255, 0.2);
}
.p-service-card__item--consulting .p-service-card__icon {
color: rgba(255, 255, 255, 0.15);
}
.p-service-card__item--consulting .p-service-card__cta {
color: #7b1fa2;
}
.p-service-card__header {
position: relative;
padding: 2.4rem 2.4rem 2rem;
color: #fff;
overflow: hidden;
min-height: 140px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
}
.p-service-card__header::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.85;
z-index: 1;
transition: opacity 0.2s ease;
}
.p-service-card__header--product-sale {
background-image: url("/assets/images/service/header-product-sale.jpg");
}
.p-service-card__header--software {
background-image: url("/assets/images/service/header-software.jpg");
}
.p-service-card__header--hardware {
background-image: url("/assets/images/service/header-hardware.jpg");
}
.p-service-card__header--consulting {
background-image: url("/assets/images/service/header-consulting.jpg");
}
.p-service-card__badge {
position: relative;
z-index: 2;
display: inline-block;
padding: 0.4rem 1rem;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 9999px;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.05em;
backdrop-filter: blur(10px);
margin-bottom: 0.8rem;
}
.p-service-card__icon {
position: absolute;
right: -20px;
bottom: -20px;
width: 120px;
height: 120px;
z-index: 2;
pointer-events: none;
}
.p-service-card__icon svg {
width: 100%;
height: 100%;
}
.p-service-card__title {
position: relative;
z-index: 2;
}
.p-service-card__title-main {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.2rem;
line-height: 1.2;
}
.p-service-card__title-sub {
font-size: 1.2rem;
font-family: "Roboto", sans-serif;
opacity: 0.9;
font-weight: 400;
}
.p-service-card__body {
padding: 2.4rem;
flex: 1;
display: flex;
flex-direction: column;
}
.p-service-card__description {
color: #232323;
line-height: 1.7;
margin-bottom: 1.6rem;
font-size: 1.4rem;
}
.p-service-card__features {
list-style: none;
margin: 0 0 2.4rem;
padding: 0;
flex: 1;
}
.p-service-card__features li {
position: relative;
padding-left: 2.4rem;
margin-bottom: 1rem;
color: #232323;
font-size: 1.3rem;
line-height: 1.6;
}
.p-service-card__features li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #2e7d32;
font-weight: 700;
font-size: 1.6rem;
}
.p-service-card__features li:last-child {
margin-bottom: 0;
}
.p-service-card__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
text-decoration: none;
margin-top: auto;
font-size: 1.5rem;
}
.p-service-card__cta::after {
content: "→";
font-size: 1.2em;
transition: transform 0.2s ease;
}
.p-service-card__link:focus-visible {
outline: none;
}
.p-service-card__link:focus-visible .p-service-card__item {
outline: 3px solid #0066cc;
outline-offset: 2px;
}
@media (max-width: 767px) {
.p-service-card__item {
min-height: auto;
}
.p-service-card__header {
padding: 2rem;
min-height: 120px;
}
.p-service-card__badge {
font-size: 1rem;
padding: 0.3rem 0.8rem;
}
.p-service-card__icon {
width: 100px;
height: 100px;
right: -15px;
bottom: -15px;
}
.p-service-card__title-main {
font-size: 1.8rem;
}
.p-service-card__title-sub {
font-size: 1.1rem;
}
.p-service-card__body {
padding: 2rem;
}
}
/*
* コンポーネント : お問い合わせページスタイル
* ファイル名 : /assets/scss/pages/_p-contact.scss
* 説明 : お問い合わせフォームページ専用スタイル定義（現在は空ファイル、将来的な拡張用）
* 外部ファイル : _variables.scss, _mixins.scss（将来使用予定）
* 使用方法 : /contact/index.phpで使用予定。フォーム要素、バリデーション表示等のスタイルを定義予定
*/
/* ==========================================================================
* Page : Article Pages
* File : _p-article.scss
* Author : Sheng Hero Corp. Front-End Team
* Purpose : 記事ページ専用スタイル定義（UX/UI改善版）
* Depends on : foundation/_variables.scss, foundation/_mixins.scss
* Reference : _p-legal.scss の構造を参考に作成
* ======================================================================= */
/* =============================================================
アンカーリンクのオフセット（固定ヘッダー対応）
============================================================= */
.p-article [id],
.p-article__body h2[id],
.p-article__body h3[id] {
scroll-margin-top: calc(var(--header-h) + 40px);
}
/* =============================================================
記事ページ共通レイアウト
============================================================= */
.p-article__container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.6rem;
}
@media (min-width: 768px) {
.p-article__container {
padding: 0 2.4rem;
}
}
.p-article--no-hero {
padding-top: calc(var(--header-h, 80px) + 2.4rem);
}
/* =============================================================
記事本文エリア
============================================================= */
.p-article__body {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.6rem;
font-size: 1.6rem;
line-height: 1.8;
color: #232323;
}
@media (min-width: 768px) {
.p-article__body {
padding: 0;
}
}
.p-article__body h2 {
margin-top: clamp(4rem, 8vw, 6rem);
margin-bottom: clamp(1.5rem, 3vw, 2rem);
font-size: clamp(2rem, 3vw, 2.6rem);
font-weight: 700;
color: #232323;
line-height: 1.4;
}
.p-article__body h2:first-child {
margin-top: 0;
}
.p-article__body h3 {
margin-top: clamp(2.5rem, 5vw, 4rem);
margin-bottom: clamp(1rem, 2vw, 1.5rem);
font-size: clamp(1.6rem, 2.5vw, 2rem);
font-weight: 700;
color: #232323;
line-height: 1.4;
}
.p-article__body h4 {
margin-top: clamp(2rem, 4vw, 3rem);
margin-bottom: clamp(0.8rem, 1.5vw, 1rem);
font-size: clamp(1.4rem, 2vw, 1.8rem);
font-weight: 700;
color: #232323;
line-height: 1.4;
}
.p-article__body p {
margin-bottom: clamp(1.5rem, 3vw, 2rem);
line-height: 1.8;
}
.p-article__body p:last-child {
margin-bottom: 0;
}
.p-article__body ul,
.p-article__body ol {
margin: 1.6rem 0 2.4rem;
padding-left: 2rem;
}
.p-article__body ul li,
.p-article__body ol li {
margin-bottom: 0.8rem;
line-height: 1.8;
}
.p-article__body ul li:last-child,
.p-article__body ol li:last-child {
margin-bottom: 0;
}
.p-article__body ul:not(.c-note__list) {
list-style: none;
}
.p-article__body ul:not(.c-note__list) > li {
position: relative;
padding-left: 1.5rem;
}
.p-article__body ul:not(.c-note__list) > li::before {
content: "";
position: absolute;
left: 0;
top: 0.7em;
width: 6px;
height: 6px;
background: #bc008b;
border-radius: 50%;
}
.p-article__body ol {
counter-reset: ol-counter;
list-style: none;
}
.p-article__body ol > li {
position: relative;
padding-left: 2rem;
counter-increment: ol-counter;
}
.p-article__body ol > li::before {
content: counter(ol-counter) ".";
position: absolute;
left: 0;
top: 0;
color: #bc008b;
font-weight: 700;
}
.p-article__body ul ul,
.p-article__body ol ol,
.p-article__body ul ol,
.p-article__body ol ul {
margin-top: 0.8rem;
margin-bottom: 0;
}
.p-article__body blockquote {
margin: 2.4rem 0;
padding: 1.6rem 2.4rem;
border-left: 4px solid #bc008b;
background: #f9f9f9;
border-radius: 0 8px 8px 0;
font-style: normal;
color: #232323;
}
.p-article__body blockquote p {
margin-bottom: 0.8rem;
}
.p-article__body blockquote p:last-child {
margin-bottom: 0;
}
.p-article__body blockquote footer {
margin-top: 0.8rem;
padding-top: 0.8rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
font-size: 1.2rem;
color: #969696;
}
.p-article__body blockquote footer::before {
content: "— ";
}
.p-article__body blockquote cite {
font-style: normal;
}
.p-article__body strong {
font-weight: 700;
color: #111111;
}
.p-article__body em {
font-style: italic;
}
.p-article__body a:not([class]) {
color: #bc008b;
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.2s ease, opacity 0.2s ease;
}
.p-article__body a:not([class]):hover {
color: #e68ce6;
opacity: 0.8;
}
.p-article__body a:not([class]):visited {
color: rgb(137, 0, 101.2925531915);
}
.p-article__body a:not([class]):focus-visible {
outline: 2px solid #bc008b;
outline-offset: 2px;
border-radius: 2px;
}
.p-article__body pre {
margin: 2.4rem 0;
padding: 1.6rem;
background: #333333;
color: #f8f8f2;
border-radius: 8px;
overflow-x: auto;
font-family: "Consolas", "Monaco", "Courier New", monospace;
font-size: 1.4rem;
line-height: 1.5;
-webkit-overflow-scrolling: touch;
}
.p-article__body pre code {
background: none;
padding: 0;
color: inherit;
font-size: inherit;
}
.p-article__body code {
background: #f9f9f9;
padding: 0.2em 0.4em;
border-radius: 4px;
font-family: "Consolas", "Monaco", "Courier New", monospace;
font-size: 0.9em;
color: #bc008b;
}
.p-article__body .box-note,
.p-article__body .box-note-grey {
margin: 2.4rem 0;
padding: 1.6rem 2.4rem;
border-radius: 8px;
font-size: 1.6rem;
line-height: 1.7;
}
.p-article__body .box-note {
background: linear-gradient(135deg, rgba(188, 0, 139, 0.08) 0%, rgba(188, 0, 139, 0.03) 100%);
border-left: 4px solid #bc008b;
}
.p-article__body .box-note-grey {
background: #f9f9f9;
border-left: 4px solid #b3b3b3;
}
.p-article__body .c-note {
margin: 2.4rem 0;
padding: 1.6rem 2.4rem;
background: #f9f9f9;
border-left: 4px solid #bc008b;
border-radius: 0 8px 8px 0;
font-size: 1.6rem;
line-height: 1.7;
}
.p-article__body .c-note__text {
margin: 0;
}
.p-article__body .c-note__list {
margin: 0.8rem 0 0;
padding-left: 1.5rem;
list-style: none;
}
.p-article__body .c-note__list > li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.4rem;
line-height: 1.7;
}
.p-article__body .c-note__list > li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
width: auto;
height: auto;
background: none;
border-radius: 0;
color: #bc008b;
font-weight: 700;
}
.p-article__body .c-note__list > li:last-child {
margin-bottom: 0;
}
.p-article__body img {
max-width: 100%;
height: auto;
display: block;
margin: 2.4rem auto;
border-radius: 8px;
}
.p-article__body figure {
margin: 2.4rem 0;
}
.p-article__body figure img {
margin: 0 auto 0.8rem;
}
.p-article__body figure figcaption {
text-align: center;
font-size: 1.2rem;
color: #969696;
line-height: 1.5;
}
.p-article__body table {
width: 100%;
margin: 2.4rem 0;
border-collapse: collapse;
font-size: 1.4rem;
}
.p-article__body table th,
.p-article__body table td {
padding: 0.8rem 1.6rem;
border: 1px solid #e0e0e0;
text-align: left;
vertical-align: top;
}
.p-article__body table th {
background: #333333;
color: #fff;
font-weight: 700;
}
.p-article__body table tbody tr:nth-child(odd) {
background: rgba(240, 240, 240, 0.3);
}
.p-article__body table tbody tr:hover {
background: rgba(188, 0, 139, 0.05);
}
.p-article__body table.js-sortable th, .p-article__body table#sort_table th {
cursor: pointer;
user-select: none;
position: relative;
padding-right: 2rem;
transition: background 0.2s ease;
}
.p-article__body table.js-sortable th::after, .p-article__body table#sort_table th::after {
content: "⇅";
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
opacity: 0.5;
font-size: 0.9em;
}
.p-article__body table.js-sortable th:hover, .p-article__body table#sort_table th:hover {
background: rgb(76.5, 76.5, 76.5);
}
.p-article__body table.js-sortable th:hover::after, .p-article__body table#sort_table th:hover::after {
opacity: 1;
}
.p-article__body table.js-sortable th[aria-sort=ascending]::after, .p-article__body table#sort_table th[aria-sort=ascending]::after {
content: "▲";
opacity: 1;
color: #bc008b;
}
.p-article__body table.js-sortable th[aria-sort=descending]::after, .p-article__body table#sort_table th[aria-sort=descending]::after {
content: "▼";
opacity: 1;
color: #bc008b;
}
/* =============================================================
注釈・ヒント・CTAボックス（インラインスタイル置換用）
============================================================= */
.p-article__note {
margin: 2.4rem 0;
padding: 1.6rem 2.4rem;
background: #e3f0fc;
border-left: 4px solid #1565c0;
border-radius: 0 8px 8px 0;
font-size: 1.6rem;
line-height: 1.7;
}
.p-article__note p {
margin: 0;
}
.p-article__note p:not(:last-child) {
margin-bottom: 0.8rem;
}
.p-article__note strong {
color: #1565c0;
}
.p-article__tips {
margin: 2.4rem 0;
padding: 2.4rem;
background: #e3f9e3;
border-left: 4px solid #2e7d32;
border-radius: 0 8px 8px 0;
font-size: 1.6rem;
line-height: 1.7;
}
.p-article__tips h4 {
margin: 0 0 1.6rem;
font-size: 1.6rem;
font-weight: 700;
color: #2e7d32;
}
.p-article__tips ul, .p-article__tips ol {
margin: 0.8rem 0;
padding-left: 2rem;
}
.p-article__tips ul li, .p-article__tips ol li {
margin-bottom: 0.4rem;
}
.p-article__tips p {
margin: 0;
}
.p-article__tips p:not(:last-child) {
margin-bottom: 0.8rem;
}
.p-article__highlight {
margin: 2.4rem 0;
padding: 1.6rem 2.4rem;
background: #f5f5f5;
border-radius: 8px;
font-size: 1.6rem;
line-height: 1.7;
}
.p-article__highlight p {
margin: 0;
}
.p-article__highlight p:not(:last-child) {
margin-bottom: 0.8rem;
}
.p-article__cta {
margin: 4rem 0;
padding: 2.4rem;
background: #f0f0f0;
border-radius: 8px;
text-align: center;
}
.p-article__cta p {
margin: 0 0 1.6rem;
font-size: 1.6rem;
line-height: 1.7;
}
.p-article__cta p:last-child {
margin-bottom: 0;
}
.p-article__cta a {
display: inline-block;
padding: 0.8rem 2.4rem;
background: #bc008b;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-weight: 700;
transition: background 0.2s ease, transform 0.2s ease;
}
.p-article__cta a:hover {
background: #9c0071;
transform: translateY(-2px);
}
.p-article__cta a:focus-visible {
outline: 2px solid #bc008b;
outline-offset: 2px;
}
/* =============================================================
表の横スクロールラッパー（モバイル対応）
============================================================= */
.p-article__table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 2.4rem 0;
}
@media (max-width: 767px) {
.p-article__table-wrap {
position: relative;
}
.p-article__table-wrap::after {
content: "← スクロールできます →";
display: block;
text-align: center;
font-size: 1.2rem;
color: #969696;
padding: 0.4rem 0;
}
}
.p-article__table-wrap table {
margin: 0;
min-width: 600px;
}
/* =============================================================
目次（TOC）
============================================================= */
.p-article__toc {
background: #f9f9f9;
border-radius: 8px;
padding: 2.4rem;
margin-bottom: 4rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.p-article__toc details[open] > summary {
cursor: default;
}
.p-article__toc details[open] > summary::marker, .p-article__toc details[open] > summary::-webkit-details-marker {
display: none;
}
}
@media (max-width: 767px) {
.p-article__toc {
padding: 1.6rem;
}
.p-article__toc summary {
cursor: pointer;
font-weight: 700;
list-style: none;
display: flex;
align-items: center;
gap: 0.4rem;
}
.p-article__toc summary::before {
content: "▶";
font-size: 0.8em;
color: #bc008b;
transition: transform 0.2s;
}
.p-article__toc summary::-webkit-details-marker {
display: none;
}
.p-article__toc details[open] summary::before {
transform: rotate(90deg);
}
}
.p-article__toc-title {
font-size: 1.6rem;
font-weight: 700;
color: #232323;
margin-bottom: 1.6rem;
display: flex;
align-items: center;
gap: 0.8rem;
}
@media (max-width: 767px) {
.p-article__toc-title {
margin-bottom: 0;
}
details[open] .p-article__toc-title {
margin-bottom: 1.6rem;
}
}
.p-article__toc-list {
margin: 0;
padding-left: 1.5rem;
counter-reset: toc-counter;
list-style: none;
}
.p-article__toc-list li {
position: relative;
margin-bottom: 0.8rem;
padding-left: 0.5rem;
counter-increment: toc-counter;
}
.p-article__toc-list li::before {
content: counter(toc-counter) ".";
position: absolute;
left: -1.5rem;
color: #bc008b;
font-weight: 700;
}
.p-article__toc-list li a {
color: #232323;
text-decoration: none;
display: block;
padding: 0.2rem 0;
transition: color 0.2s ease;
}
.p-article__toc-list li a:hover {
color: #bc008b;
text-decoration: underline;
}
.p-article__toc-list li a:focus-visible {
outline: 2px solid #bc008b;
outline-offset: 2px;
border-radius: 2px;
}
.p-article__toc-list li:last-child {
margin-bottom: 0;
}
.p-article__toc-list ol {
margin-top: 0.8rem;
margin-bottom: 0;
padding-left: 1.5rem;
counter-reset: toc-sub-counter;
}
.p-article__toc-list ol li {
counter-increment: toc-sub-counter;
}
.p-article__toc-list ol li::before {
content: counter(toc-counter) "-" counter(toc-sub-counter);
font-size: 0.9em;
}
/* =============================================================
タグセクション
============================================================= */
.p-article__tags {
border-top: 1px solid #e0e0e0;
padding-top: 2.4rem;
margin-top: 6.4rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.p-article__tags-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 1.6rem;
color: #232323;
}
.p-article__tags-list {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.p-article__tag {
display: inline-block;
background: #f9f9f9;
color: #232323;
padding: 0.4rem 1.6rem;
border-radius: 20px;
text-decoration: none;
font-size: 1.4rem;
border: 1px solid #e0e0e0;
transition: all 0.2s ease;
}
.p-article__tag:hover {
background: #bc008b;
color: #fff;
border-color: #bc008b;
}
.p-article__tag:focus-visible {
outline: 2px solid #bc008b;
outline-offset: 2px;
}
/* =============================================================
前後記事ナビゲーション
============================================================= */
.p-article__nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.6rem;
margin: 6.4rem 0;
padding: 2.4rem;
background: #f9f9f9;
border-radius: 8px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 479px) {
.p-article__nav {
grid-template-columns: 1fr;
gap: 0.8rem;
padding: 1.6rem;
}
}
.p-article__nav-item {
display: flex;
flex-direction: column;
background: #fff;
padding: 1.6rem;
border-radius: 8px;
border: 1px solid #e0e0e0;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.p-article__nav-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.p-article__nav-item:focus-visible {
outline: 2px solid #bc008b;
outline-offset: 2px;
}
.p-article__nav-item--next {
text-align: right;
}
.p-article__nav-item--prev {
text-align: left;
}
.p-article__nav-label {
font-size: 1.4rem;
color: #969696;
margin-bottom: 0.4rem;
display: block;
}
.p-article__nav-title {
font-weight: 700;
color: #232323;
font-size: 1.6rem;
line-height: 1.5;
}
/* =============================================================
関連記事セクション
============================================================= */
.p-article__related-title {
text-align: center;
font-size: clamp(1.8rem, 3vw, 2.4rem);
font-weight: 700;
margin-bottom: 4rem;
color: #232323;
}
/* =============================================================
メタ情報（公開日・更新日）
============================================================= */
.p-article__meta {
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
margin-bottom: 2.4rem;
font-size: 1.2rem;
color: #969696;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.p-article__meta time {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
/* =============================================================
印刷用スタイル
============================================================= */
@media print {
.p-article__body {
max-width: 100%;
font-size: 11pt;
line-height: 1.6;
}
.p-article__body h2,
.p-article__body h3,
.p-article__body h4 {
page-break-after: avoid;
}
.p-article__body h2::before,
.p-article__body h3 {
border-color: #000 !important;
background: #000 !important;
}
.p-article__body blockquote {
background: #f5f5f5 !important;
border-color: #000 !important;
}
.p-article__body a:not([class]) {
color: #000;
}
.p-article__body a:not([class])::after {
content: " [" attr(href) "]";
font-size: 9pt;
}
.p-article__body pre {
background: #f5f5f5 !important;
color: #000 !important;
border: 1px solid #000;
white-space: pre-wrap;
word-wrap: break-word;
}
.p-article__toc {
page-break-inside: avoid;
background: #f5f5f5 !important;
border: 1px solid #000;
}
.p-article__toc a {
color: #000;
}
.p-article__toc a::after {
content: none;
}
.p-article__tags, .p-article__nav, .p-article__related {
display: none !important;
}
}
/* =============================================================
アクセシビリティ強化
============================================================= */
@media (prefers-reduced-motion: reduce) {
.p-article__nav-item,
.p-article__tag,
.p-article__toc-list a {
transition: none;
}
.p-article__nav-item:hover {
transform: none;
}
}
/* =============================================================
記事ヘッダーセクション（section-article-header.php）
============================================================= */
.p-article-header {
max-width: 1200px;
margin: 0 auto 4rem;
padding: 0 1.6rem;
}
@media (min-width: 768px) {
.p-article-header {
padding: 0;
}
}
.p-article-header__inner {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.p-article-header__title-block {
text-align: center;
}
.p-article-header__title {
margin: 0 0 0.8rem;
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 700;
line-height: 1.3;
color: #232323;
padding-bottom: 0;
text-align: center;
}
.p-article-header__title::after {
display: none;
}
.p-article-header__subtitle {
margin: 0;
font-size: clamp(1.4rem, 2vw, 1.8rem);
color: #969696;
line-height: 1.5;
}
.p-article-header__meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.8rem 1.6rem;
font-size: 1.2rem;
color: #969696;
}
.p-article-header__category {
display: inline-block;
padding: 0.2rem 0.8rem;
background: #bc008b;
color: #fff;
border-radius: 4px;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.p-article-header__date, .p-article-header__reading-time {
display: inline-flex;
align-items: center;
gap: 0.2rem;
}
.p-article-header__date--updated {
color: #bc008b;
}
.p-article-header__icon {
flex-shrink: 0;
opacity: 0.7;
}
.p-article-header__icon--large {
opacity: 1;
}
.p-article-header__image {
margin: 0;
width: 100%;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.p-article-header__image img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.p-article-header__summary {
background: linear-gradient(135deg, rgba(188, 0, 139, 0.06) 0%, rgba(188, 0, 139, 0.02) 100%);
border: 1px solid rgba(188, 0, 139, 0.15);
border-radius: 8px;
padding: 2.4rem;
}
.p-article-header__summary-title {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 0 0 1.6rem;
padding-bottom: 0;
font-size: 1.4rem;
font-weight: 700;
color: #bc008b;
text-align: left;
}
.p-article-header__summary-title::after {
display: none;
}
.p-article-header__summary-text {
margin: 0;
font-size: 1.6rem;
line-height: 1.8;
color: #232323;
}
.p-article-header__highlights {
background: #f9f9f9;
border-radius: 8px;
padding: 2.4rem;
}
.p-article-header__highlights-title {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 0 0 1.6rem;
font-size: 1.4rem;
font-weight: 700;
color: #232323;
}
.p-article-header__highlights-list {
margin: 0;
padding: 0;
list-style: none;
}
.p-article-header__highlights-item {
position: relative;
padding-left: 2rem;
margin-bottom: 0.8rem;
font-size: 1.6rem;
line-height: 1.6;
color: #232323;
}
.p-article-header__highlights-item::before {
content: "";
position: absolute;
left: 0;
top: 0.5em;
width: 8px;
height: 8px;
background: #bc008b;
border-radius: 50%;
}
.p-article-header__highlights-item:last-child {
margin-bottom: 0;
}
/* =============================================================
目次コンポーネント（c-toc.php）
============================================================= */
.c-toc {
max-width: 1200px;
margin: 0 auto 4rem;
padding: 0 1.6rem;
}
@media (min-width: 768px) {
.c-toc {
padding: 0;
}
}
@media (min-width: 992px) {
.c-toc--sticky {
position: sticky;
top: calc(var(--header-h) + 24px);
max-height: calc(100vh - var(--header-h) - 48px);
overflow-y: auto;
}
}
.c-toc__details {
background: #f9f9f9;
border-radius: 8px;
overflow: hidden;
}
.c-toc__summary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.6rem 2.4rem;
cursor: pointer;
user-select: none;
list-style: none;
transition: background 0.2s ease;
}
.c-toc__summary::-webkit-details-marker {
display: none;
}
.c-toc__summary:hover {
background: rgba(188, 0, 139, 0.05);
}
.c-toc__summary:focus-visible {
outline: 2px solid #bc008b;
outline-offset: -2px;
}
.c-toc__title {
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 1.5rem;
font-weight: 700;
color: #232323;
}
.c-toc__icon {
color: #bc008b;
}
.c-toc__chevron {
color: #969696;
transition: transform 0.2s ease;
}
details[open] .c-toc__chevron {
transform: rotate(180deg);
}
@media (min-width: 768px) {
.c-toc__summary {
pointer-events: none;
}
.c-toc__chevron {
display: none;
}
.c-toc__details:not([open]) .c-toc__content {
display: block;
}
}
.c-toc__content {
padding: 0 2.4rem 2.4rem;
}
.c-toc__list {
margin: 0;
padding: 0;
list-style: none;
counter-reset: toc-h2;
}
.c-toc__sublist {
margin: 0.4rem 0 0 2.4rem;
padding: 0;
list-style: none;
counter-reset: toc-h3;
}
.c-toc__item {
margin-bottom: 0.4rem;
}
.c-toc__item:last-child {
margin-bottom: 0;
}
.c-toc__item--sub {
margin-bottom: 0.2rem;
}
.c-toc__link {
display: flex;
align-items: flex-start;
gap: 0.4rem;
padding: 0.4rem 0;
color: #232323;
text-decoration: none;
font-size: 1.6rem;
line-height: 1.5;
transition: color 0.2s ease;
}
.c-toc__link:hover {
color: #bc008b;
}
.c-toc__link:focus-visible {
outline: 2px solid #bc008b;
outline-offset: 2px;
border-radius: 2px;
}
.c-toc__link--sub {
font-size: 1.4rem;
color: #969696;
padding-left: 0.8rem;
}
.c-toc__link--sub:hover {
color: #bc008b;
}
.c-toc__number {
flex-shrink: 0;
font-weight: 700;
color: #bc008b;
min-width: 2.5rem;
}
.c-toc__text {
flex: 1;
}
.c-toc__link.is-active {
color: #bc008b;
font-weight: 700;
}
.c-toc__link.is-active .c-toc__number {
color: #bc008b;
}
/* =============================================================
インラインCTAコンポーネント（c-cta-inline.php）
============================================================= */
.c-cta-inline {
max-width: 1200px;
margin: 4rem auto;
padding: 0 1.6rem;
}
@media (min-width: 768px) {
.c-cta-inline {
padding: 0;
}
}
.c-cta-inline__inner {
display: flex;
align-items: flex-start;
gap: 1.6rem;
padding: 2.4rem;
border-radius: 8px;
background: #f9f9f9;
border-left: 4px solid #b3b3b3;
}
.c-cta-inline__icon {
flex-shrink: 0;
color: #969696;
}
.c-cta-inline__icon svg {
display: block;
}
.c-cta-inline__content {
flex: 1;
min-width: 0;
}
.c-cta-inline__text {
margin: 0 0 1.6rem;
font-size: 1.6rem;
line-height: 1.7;
color: #232323;
}
.c-cta-inline__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.6rem;
}
.c-cta-inline--light .c-cta-inline__inner {
background: #f9f9f9;
border-left-color: #b3b3b3;
}
.c-cta-inline--primary .c-cta-inline__inner {
background: linear-gradient(135deg, rgba(188, 0, 139, 0.08) 0%, rgba(188, 0, 139, 0.03) 100%);
border-left-color: #bc008b;
}
.c-cta-inline--primary .c-cta-inline__icon {
color: #bc008b;
}
.c-cta-inline--outline .c-cta-inline__inner {
background: transparent;
border: 2px solid #e0e0e0;
border-left-width: 4px;
border-left-color: #bc008b;
}
/* =============================================================
アクセシビリティ強化（追加）
============================================================= */
@media (prefers-reduced-motion: reduce) {
.c-toc__chevron {
transition: none;
}
}
/* =============================================================
記事一覧ページ（article/index.php）
============================================================= */
.p-article-list__header {
text-align: center;
margin-bottom: 4rem;
}
.p-article-list__title {
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 700;
color: #232323;
margin: 0 0 1.6rem;
line-height: 1.4;
}
.p-article-list__lead {
font-size: clamp(1.4rem, 2vw, 1.6rem);
color: #969696;
margin: 0;
line-height: 1.7;
}
.p-article-list__filter {
margin-bottom: 4rem;
}
.p-article-list__active-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem;
padding: 1.6rem 2.4rem;
margin-bottom: 2.4rem;
background: #e3f0fc;
border-radius: 5px;
border-left: 4px solid #bc008b;
}
.p-article-list__filter-label {
font-size: 1.2rem;
color: #969696;
}
.p-article-list__filter-tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 1.6rem;
background: #bc008b;
color: #fff;
border-radius: 9999px;
font-size: 1.2rem;
font-weight: 700;
}
.p-article-list__filter-icon {
flex-shrink: 0;
}
.p-article-list__filter-clear {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-left: auto;
padding: 0.4rem 0.8rem;
font-size: 1.2rem;
color: #969696;
text-decoration: none;
border-radius: 4px;
transition: color 0.2s ease, background-color 0.2s ease;
}
.p-article-list__filter-clear:hover {
color: #232323;
background: rgba(35, 35, 35, 0.08);
}
.p-article-list__filter-clear:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.p-article-list__filter-clear svg {
flex-shrink: 0;
}
.p-article-list__grid {
min-height: 200px;
}
.p-article-list__empty {
padding: 6.4rem 0;
}
.p-article-list__empty-inner {
max-width: 400px;
margin: 0 auto;
text-align: center;
padding: 4rem;
background: #f9f9f9;
border-radius: 12px;
}
.p-article-list__empty-icon {
color: #b3b3b3;
margin-bottom: 2.4rem;
}
.p-article-list__empty-title {
font-size: 1.8rem;
font-weight: 700;
color: #232323;
margin: 0 0 1.6rem;
}
.p-article-list__empty-text {
font-size: 1.6rem;
color: #969696;
line-height: 1.7;
margin: 0;
}
.p-article-list__empty-text a {
color: #bc008b;
text-decoration: underline;
text-underline-offset: 2px;
}
.p-article-list__empty-text a:hover {
color: #9c0071;
}
.p-article-list__empty-text a:focus-visible {
outline: 2px solid #bc008b;
outline-offset: 2px;
border-radius: 2px;
}
/*
* コンポーネント : 製品ページスタイル
* ファイル名 : /assets/scss/pages/_p-product.scss
* 説明 : 製品一覧・詳細ページ専用スタイル定義（現在は空ファイル、将来的な拡張用）
* 外部ファイル : _variables.scss, _mixins.scss（将来使用予定）
* 使用方法 : /product/配下のページで使用予定。製品グリッド、フィルター、詳細表示等のスタイルを定義予定
*/
/*
* モジュール : ユーティリティクラス集
* ファイル名 : /assets/scss/utilities/_utilities.scss
* 説明 : Tailwind風の即席ユーティリティクラス。表示制御、余白、フレックス、色、アニメーションなど汎用クラスを提供
* 外部ファイル : _variables.scss（デザイントークン）, _mixins.scss（clearfix, visually-hidden, media-up等）
* 使用方法 : HTML要素に直接付与。u-プレフィックス付き。例：u-mt-lg（上マージン大）、u-flex-center（中央配置）
* 更新履歴 : 実際の使用パターンに基づいて大幅改善。Gap、Alignment、Max-width、Borderなど追加
*/
/* ========================================
* アクセシビリティ・表示制御
* ======================================== */
.u-clearfix::after {
content: "";
display: table;
clear: both;
}
.u-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.u-hidden {
display: none !important;
}
.u-hidden-mobile {
display: none !important;
}
@media (min-width: 768px) {
.u-hidden-mobile {
display: block !important;
}
}
.u-visible-mobile {
display: block !important;
}
@media (min-width: 768px) {
.u-visible-mobile {
display: none !important;
}
}
.u-hidden-desktop {
display: block !important;
}
@media (min-width: 768px) {
.u-hidden-desktop {
display: none !important;
}
}
/* ========================================
* Flexbox レイアウト
* ======================================== */
.u-flex {
display: flex;
}
.u-flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.u-flex-wrap {
display: flex;
flex-wrap: wrap;
}
.u-flex-column {
display: flex;
flex-direction: column;
}
.u-flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.u-justify-start {
justify-content: flex-start;
}
.u-justify-end {
justify-content: flex-end;
}
.u-justify-center {
justify-content: center;
}
.u-items-start {
align-items: flex-start;
}
.u-items-center {
align-items: center;
}
.u-items-end {
align-items: flex-end;
}
.u-gap-xs {
gap: 0.4rem;
}
.u-gap-sm {
gap: 0.8rem;
}
.u-gap-md {
gap: 1.6rem;
}
.u-gap-lg {
gap: 2.4rem;
}
.u-gap-xl {
gap: 4rem;
}
/* ========================================
* スペーシング（マージン・パディング）
* ======================================== */
.u-m-0 {
margin: 0 !important;
}
.u-m-sm {
margin: 0.8rem !important;
}
.u-m-md {
margin: 1.6rem !important;
}
.u-m-lg {
margin: 2.4rem !important;
}
.u-m-xl {
margin: 4rem !important;
}
.u-mt-0 {
margin-top: 0 !important;
}
.u-mt-xs {
margin-top: 0.4rem !important;
}
.u-mt-sm {
margin-top: 0.8rem !important;
}
.u-mt-md {
margin-top: 1.6rem !important;
}
.u-mt-lg {
margin-top: 2.4rem !important;
}
.u-mt-xl {
margin-top: 4rem !important;
}
.u-mt-xxl {
margin-top: 6.4rem !important;
}
.u-mb-0 {
margin-bottom: 0 !important;
}
.u-mb-xs {
margin-bottom: 0.4rem !important;
}
.u-mb-sm {
margin-bottom: 0.8rem !important;
}
.u-mb-md {
margin-bottom: 1.6rem !important;
}
.u-mb-lg {
margin-bottom: 2.4rem !important;
}
.u-mb-xl {
margin-bottom: 4rem !important;
}
.u-mb-xxl {
margin-bottom: 6.4rem !important;
}
.u-ml-0 {
margin-left: 0 !important;
}
.u-ml-sm {
margin-left: 0.8rem !important;
}
.u-ml-md {
margin-left: 1.6rem !important;
}
.u-ml-auto {
margin-left: auto !important;
}
.u-mr-0 {
margin-right: 0 !important;
}
.u-mr-sm {
margin-right: 0.8rem !important;
}
.u-mr-md {
margin-right: 1.6rem !important;
}
.u-mr-auto {
margin-right: auto !important;
}
.u-mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.u-mx-sm {
margin-left: 0.8rem !important;
margin-right: 0.8rem !important;
}
.u-mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.u-p-0 {
padding: 0 !important;
}
.u-p-xs {
padding: 0.4rem !important;
}
.u-p-sm {
padding: 0.8rem !important;
}
.u-p-md {
padding: 1.6rem !important;
}
.u-p-lg {
padding: 2.4rem !important;
}
.u-p-xl {
padding: 4rem !important;
}
.u-pt-0 {
padding-top: 0 !important;
}
.u-pt-sm {
padding-top: 0.8rem !important;
}
.u-pt-md {
padding-top: 1.6rem !important;
}
.u-pt-lg {
padding-top: 2.4rem !important;
}
.u-pb-0 {
padding-bottom: 0 !important;
}
.u-pb-sm {
padding-bottom: 0.8rem !important;
}
.u-pb-md {
padding-bottom: 1.6rem !important;
}
.u-pb-lg {
padding-bottom: 2.4rem !important;
}
.u-px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.u-px-sm {
padding-left: 0.8rem !important;
padding-right: 0.8rem !important;
}
.u-px-md {
padding-left: 1.6rem !important;
padding-right: 1.6rem !important;
}
.u-px-lg {
padding-left: 2.4rem !important;
padding-right: 2.4rem !important;
}
/* ========================================
* サイジング（幅・高さ）
* ======================================== */
.u-w-auto {
width: auto !important;
}
.u-w-full {
width: 100% !important;
}
.u-w-1\/2 {
width: 50% !important;
}
.u-w-1\/3 {
width: 33.333333% !important;
}
.u-w-2\/3 {
width: 66.666667% !important;
}
.u-w-1\/4 {
width: 25% !important;
}
.u-w-3\/4 {
width: 75% !important;
}
.u-max-w-xs {
max-width: 20rem !important;
}
.u-max-w-sm {
max-width: 24rem !important;
}
.u-max-w-md {
max-width: 28rem !important;
}
.u-max-w-lg {
max-width: 32rem !important;
}
.u-max-w-xl {
max-width: 36rem !important;
}
.u-max-w-full {
max-width: 100% !important;
}
.u-max-w-none {
max-width: none !important;
}
.u-h-auto {
height: auto !important;
}
.u-h-full {
height: 100% !important;
}
.u-h-screen {
height: 100vh !important;
}
.u-min-h-0 {
min-height: 0 !important;
}
.u-min-h-full {
min-height: 100% !important;
}
.u-min-h-screen {
min-height: 100vh !important;
}
/* ========================================
* テキスト関連
* ======================================== */
.u-text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.u-text-nowrap {
white-space: nowrap !important;
}
.u-text-break {
word-break: break-word !important;
overflow-wrap: break-word !important;
}
.u-text-left {
text-align: left !important;
}
.u-text-center {
text-align: center !important;
}
.u-text-right {
text-align: right !important;
}
.u-text-xs {
font-size: 1rem !important;
}
.u-text-sm {
font-size: 1.2rem !important;
}
.u-text-base {
font-size: 1.6rem !important;
}
.u-text-lg {
font-size: 1.8rem !important;
}
.u-text-xl {
font-size: 2.4rem !important;
}
.u-font-normal {
font-weight: 400 !important;
}
.u-font-bold {
font-weight: 700 !important;
}
/* ========================================
* カラー
* ======================================== */
.u-color-primary {
color: #bc008b !important;
}
.u-color-secondary {
color: #05192d !important;
}
.u-color-white {
color: #fff !important;
}
.u-color-black {
color: #232323 !important;
}
.u-color-gray {
color: #969696 !important;
}
.u-color-muted {
color: #666 !important;
}
.u-bg-primary {
background-color: #bc008b !important;
}
.u-bg-secondary {
background-color: #05192d !important;
}
.u-bg-white {
background-color: #fff !important;
}
.u-bg-gray {
background-color: #f7f7f7 !important;
}
.u-bg-gray-50 {
background-color: #f9fafb !important;
}
.u-bg-gray-100 {
background-color: #f3f4f6 !important;
}
.u-bg-gray-200 {
background-color: #e5e7eb !important;
}
.u-bg-transparent {
background-color: transparent !important;
}
/* ========================================
* ボーダー・角丸
* ======================================== */
.u-border {
border: 1px solid #e0e0e0 !important;
}
.u-border-0 {
border: 0 !important;
}
.u-border-t {
border-top: 1px solid #e0e0e0 !important;
}
.u-border-b {
border-bottom: 1px solid #e0e0e0 !important;
}
.u-border-l {
border-left: 1px solid #e0e0e0 !important;
}
.u-border-r {
border-right: 1px solid #e0e0e0 !important;
}
.u-rounded-none {
border-radius: 0 !important;
}
.u-rounded-sm {
border-radius: 4px !important;
}
.u-rounded {
border-radius: 5px !important;
}
.u-rounded-lg {
border-radius: 8px !important;
}
.u-rounded-full {
border-radius: 9999px !important;
}
/* ========================================
* レイアウト・配置
* ======================================== */
.u-relative {
position: relative !important;
}
.u-absolute {
position: absolute !important;
}
.u-fixed {
position: fixed !important;
}
.u-sticky {
position: sticky !important;
}
.u-static {
position: static !important;
}
.u-z-0 {
z-index: 0 !important;
}
.u-z-10 {
z-index: 10 !important;
}
.u-z-20 {
z-index: 20 !important;
}
.u-z-30 {
z-index: 30 !important;
}
.u-z-40 {
z-index: 40 !important;
}
.u-z-50 {
z-index: 50 !important;
}
.u-overflow-visible {
overflow: visible !important;
}
.u-overflow-hidden {
overflow: hidden !important;
}
.u-overflow-scroll {
overflow: scroll !important;
}
.u-overflow-auto {
overflow: auto !important;
}
.u-overflow-x-auto {
overflow-x: auto !important;
}
.u-overflow-y-auto {
overflow-y: auto !important;
}
/* ========================================
* シャドウ・エフェクト
* ======================================== */
.u-shadow-none {
box-shadow: none !important;
}
.u-shadow-sm {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.u-shadow {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}
.u-shadow-md {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
.u-shadow-lg {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}
.u-opacity-0 {
opacity: 0 !important;
}
.u-opacity-25 {
opacity: 0.25 !important;
}
.u-opacity-50 {
opacity: 0.5 !important;
}
.u-opacity-75 {
opacity: 0.75 !important;
}
.u-opacity-100 {
opacity: 1 !important;
}
/* ========================================
* アニメーション
* ======================================== */
.u-fade-in {
animation: fadeIn 0.3s ease-out forwards;
}
.u-slide-up {
animation: slideUp 0.5s ease-out forwards;
}
.u-animated {
will-change: transform, opacity;
transform: translateZ(0);
}
.u-transition-none {
transition: none !important;
}
.u-transition-all {
transition: all 150ms ease-in-out !important;
}
.u-transition-colors {
transition: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out !important;
}
/* ========================================
* インタラクション
* ======================================== */
.u-cursor-auto {
cursor: auto !important;
}
.u-cursor-default {
cursor: default !important;
}
.u-cursor-pointer {
cursor: pointer !important;
}
.u-cursor-not-allowed {
cursor: not-allowed !important;
}
.u-select-none {
user-select: none !important;
}
.u-select-text {
user-select: text !important;
}
.u-select-all {
user-select: all !important;
}
/* ========================================
* アンカーリンク
* ======================================== */
.anchor-offset {
position: relative;
top: -100px;
visibility: hidden;
}
/* ========================================
* レスポンシブ表示制御
* ======================================== */
@media (min-width: 768px) {
.u-block-tablet {
display: block !important;
}
.u-flex-tablet {
display: flex !important;
}
.u-hidden-tablet {
display: none !important;
}
}
@media (min-width: 992px) {
.u-block-desktop {
display: block !important;
}
.u-flex-desktop {
display: flex !important;
}
.u-hidden-desktop {
display: none !important;
}
}
/*# sourceMappingURL=main.css.map */
*
*
*
* 【スタイルバリエーション（クラス追加で切替）】
* - （クラスなし） : シンプルな標準スタイル
* - c-image-grid--box : グレー背景のボックススタイル
* - c-image-grid--border : 枠線付きスタイル
* - c-image-grid--shadow : 影付きカードスタイル（PHPでのみ利用可）
* - c-image-grid--product: 製品カード用の特殊スタイル
*
* 【レスポンシブ列数（data-count属性で自動調整）】
* data-count="1" : 1列表示（中央配置）
* data-count="2" : モバイル2列 → タブレット2列 → PC2列
* data-count="3" : モバイル2列 → タブレット2列 → PC3列
* data-count="4" : モバイル2列 → タブレット2列 → PC4列
* data-count="5" : モバイル2列 → タブレット2列 → PC3列 → 大画面5列
* data-count="6" : モバイル2列 → タブレット2列 → PC3列 → 大画面6列
* data-count="7以上" : 自動調整（auto-fit）
*
* 【固定列数指定（レスポンシブを上書き）】
* - c-image-grid--col-3 : PC以上で3列固定
* - c-image-grid--col-4 : PC以上で4列固定
* - c-image-grid--col-5 : 大画面で5列固定
* - c-image-grid--col-6 : 大画面で6列固定
* - c-image-grid--col-7 : 大画面で7列固定
* - c-image-grid--col-8 : 大画面で8列固定
*
* 【PHPコンポーネントとの連携】
* PHPファイル: /include/components/ui/c-image-grid.php
* 変数設定: $images, $grid_style, $grid_columns
*
* 【依存ファイル】
* - _variables.scss : 色・余白の変数定義
* - _mixins.scss : レスポンシブ用のmixin
*/
/**
* ==================================================
* 定義項目の詳細説明
* ==================================================
*
* 【CSS カスタムプロパティ（CSS変数）】
* PHPやHTMLのstyle属性で動的に設定可能な変数
*
* --image-max-width : 画像の最大幅を制限（デフォルト: none）
* 用途: サムネイル表示時などに画像幅を制限
* 例: style="--image-max-width: 400px"
*
* --image-height : 画像の高さを指定（デフォルト: auto）
* 用途: 統一された高さの画像グリッドを作成
* 例: style="--image-height: 300px"
*
* --image-aspect-ratio : アスペクト比を指定（デフォルト: なし）
* 用途: 画像の縦横比を固定（CLSスコア改善にも有効）
* 例: style="--image-aspect-ratio: 16/9"
*
* --image-object-fit : 画像の表示方法（デフォルト: cover）
* 値の説明:
* - cover: 領域全体を覆うように拡大・切り抜き
* - contain: 画像全体が見えるように縮小
* - fill: 領域に合わせて引き伸ばし
* - scale-down: containと同様だが拡大はしない
*
* 【BEM要素クラス】
* コンポーネント内の各要素に適用されるクラス
*
* .c-image-grid__item : グリッドの各アイテムコンテナ
* - リンクやフィルタリング用のdata属性を持つ
* - ホバー効果のベースとなる要素
*
* .c-image-grid__picture : 
* 説明文