/* ============================================================
swiper-common.css ver.2
農業する八百屋 alphar-net.com
【レイアウト構造】
.alphar-slider-wrap ← 全体ラッパー（左右にボタン分の余白）
.alphar-slider-inner ← ボタン＋画像の横並び行
.swiper-button-prev ← 左ボタン（画像の外）
.alphar-main-swiper ← 画像エリア
.swiper-button-next ← 右ボタン（画像の外）
.alphar-caption-area ← キャプション（画像の外・下）
.alphar-pagination-area ← ドット（キャプションの下）
.alphar-thumb-swiper ← サムネイル
【読み込み方】
各HTMLの 内：
直前：
============================================================ */
/* ============================================================
全体ラッパー
============================================================ */
.alphar-slider-wrap {
display: inline-block; /* 元ページのレイアウトに合わせてinline-block */
width: 560px; /* 画像幅＋左右ボタン幅を含む */
max-width: 100%;
margin: 0 auto 12px;
text-align: left;
}
/* ============================================================
ボタン＋画像を横並びにする行
============================================================ */
.alphar-slider-inner {
display: flex;
align-items: center;
gap: 0;
}
/* ============================================================
画像エリア（メインSwiper）
overflow:hidden が必要 → 親の .alphar-slider-inner には不要
============================================================ */
.alphar-main-swiper {
flex: 1; /* 残りの幅をすべて使う */
min-width: 0;
overflow: hidden;
background: #f0f0f0;
border: 1px solid #dddddd;
}
.alphar-main-swiper .swiper-slide {
position: relative;
display: block;
background: #f0f0f0;
line-height: 0;
height: 360px;
overflow: hidden;
}
.alphar-main-swiper .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #f0f0f0;
}
/* スライド内にリンクがある場合（syouhintop等）も高さを引き継ぐ */
.alphar-main-swiper .swiper-slide a {
display: block;
width: 100%;
height: 100%;
}
.alphar-main-swiper .swiper-slide a img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* ============================================================
前後ボタン（画像の左右外側に配置）
Swiperデフォルトのabsolute配置を無効にして
flexboxで横並びにする
============================================================ */
.alphar-slider-wrap .swiper-button-prev,
.alphar-slider-wrap .swiper-button-next {
/* absoluteを無効化してflexアイテムとして配置 */
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
margin: 0 !important;
/* ボタンのサイズ・デザイン */
flex-shrink: 0;
width: 32px !important;
height: 32px !important;
background: #888888;
border-radius: 3px;
transition: background 0.2s;
cursor: pointer;
}
.alphar-slider-wrap .swiper-button-prev:hover,
.alphar-slider-wrap .swiper-button-next:hover {
background: #336600;
}
.alphar-slider-wrap .swiper-button-prev::after,
.alphar-slider-wrap .swiper-button-next::after {
font-size: 13px !important;
color: #ffffff;
}
/* ============================================================
キャプションエリア（画像の下・外側）
============================================================ */
.alphar-caption-area {
min-height: 44px; /* 2行分の高さで全ページそろえる */
background: #808080;
color: #ffffff;
font-size: 12px;
line-height: 1.5;
padding: 5px 10px;
text-align: center;
display: flex;
align-items: center; /* テキストを縦中央に */
justify-content: center;
/* ボタン分の幅を除いた画像幅に合わせる */
margin: 0 32px; /* 左右ボタン幅(32px)分のインデント */
}
/* キャプションがない場合は非表示 */
.alphar-caption-area:empty {
display: none;
}
/* ============================================================
ドットページネーション（キャプションの下・外側）
============================================================ */
.alphar-pagination-area {
margin: 6px 32px 6px; /* 左右ボタン幅分インデント */
text-align: center;
min-height: 20px;
}
/* Swiperのデフォルトpaginationをpagination-areaに移す */
.alphar-main-swiper .swiper-pagination {
/* absoluteを無効化 */
position: static !important;
bottom: auto !important;
display: block;
}
.alphar-main-swiper .swiper-pagination-bullet {
width: 9px !important;
height: 9px !important;
background: #aaaaaa !important;
opacity: 1 !important;
margin: 0 3px !important;
}
.alphar-main-swiper .swiper-pagination-bullet-active {
background: #336600 !important;
}
/* ============================================================
サムネイルSwiper
============================================================ */
.alphar-thumb-swiper {
margin: 4px 32px 0; /* 左右ボタン幅分インデント */
}
.alphar-thumb-swiper,
.alphar-thumb-swiper .swiper-wrapper {
height: auto !important; /* メインスライダーの高さを引き継がないよう強制 */
}
.alphar-thumb-swiper .swiper-slide {
width: auto !important;
height: auto !important;
cursor: pointer;
opacity: 0.5;
border: 2px solid transparent;
border-radius: 2px;
overflow: hidden;
transition: opacity 0.25s, border-color 0.25s;
line-height: 0;
}
.alphar-thumb-swiper .swiper-slide:hover { opacity: 0.8; }
.alphar-thumb-swiper .swiper-slide-thumb-active {
opacity: 1;
border-color: #336600;
}
.alphar-thumb-swiper .swiper-slide img {
display: block;
width: auto;
height: 60px; /* 固定高さで統一 */
max-width: 100px;
object-fit: cover;
}
/* ============================================================
syouhintop.htm 用（幅広スライダー）
data-wide="true" を .alphar-slider-wrap に付けると適用
============================================================ */
.alphar-slider-wrap[data-wide="true"] {
display: block; /* table内でもブロック表示 */
width: 100%;
max-width: 900px;
}
.alphar-slider-wrap[data-wide="true"] .alphar-main-swiper .swiper-slide {
height: 420px;
}
.alphar-slider-wrap[data-wide="true"] .alphar-caption-area,
.alphar-slider-wrap[data-wide="true"] .alphar-pagination-area,
.alphar-slider-wrap[data-wide="true"] .alphar-thumb-swiper {
margin-left: 36px;
margin-right: 36px;
}
/* ============================================================
レスポンシブ
============================================================ */
@media (max-width: 640px) {
.alphar-slider-wrap {
width: 100% !important;
}
.alphar-slider-wrap .swiper-button-prev,
.alphar-slider-wrap .swiper-button-next {
width: 24px !important;
height: 24px !important;
}
.alphar-slider-wrap .swiper-button-prev::after,
.alphar-slider-wrap .swiper-button-next::after {
font-size: 10px !important;
}
.alphar-caption-area,
.alphar-pagination-area,
.alphar-thumb-swiper {
margin-left: 24px;
margin-right: 24px;
}
.alphar-main-swiper .swiper-slide {
height: 220px;
}
}