に class="u-responsiveTable" を追加
2. 色を変えたい場合は、既存クラス側で --rt-* 変数を上書き
3. 各 | に data-label="見出し名" を付与（済んでいればそのまま）
======================================== */
.u-responsiveTable {
--rt-border-color: #d0d0d0;
--rt-header-bg: #b5a96a;
--rt-header-color: #ffffff;
--rt-row-bg: transparent;
--rt-label-color: #444;
}
@media (max-width: 768px) {
.u-responsiveTable,
.u-responsiveTable thead,
.u-responsiveTable tbody,
.u-responsiveTable tr,
.u-responsiveTable th,
.u-responsiveTable td {
display: block;
width: 100%;
}
.u-responsiveTable thead {
display: none;
}
.u-responsiveTable tbody tr {
border: 1px solid var(--rt-border-color);
margin-bottom: 12px;
overflow: hidden;
background-color: var(--rt-row-bg);
}
.u-responsiveTable tbody tr th {
background-color: var(--rt-header-bg);
color: var(--rt-header-color);
font-weight: 600;
padding: 0.4rem 1.4rem;
text-align: left;
border: none;
}
.u-responsiveTable tbody tr td {
display: grid;
grid-template-columns: 5em 1fr;
align-items: center;
padding: 8px 14px;
border: none;
border-top: 1px solid var(--rt-border-color);
font-size: 10px;
}
.u-responsiveTable tbody tr td::before {
content: attr(data-label);
font-size: 11px;
color: var(--rt-label-color);
font-weight: bold;
}
}
.trays-table {
--rt-border-color: #d3cbad;
--rt-header-bg: #b5a96a;
--rt-label-color: #444;
}
/* ========================================
会社概要・フリーページ
======================================== */
/* テーブル基本スタイル */
.companyprofile .fs-c-table > tbody > tr > td {
background: none !important;
}
.companyprofile .fs-c-table {
width: 100%;
border-collapse: collapse;
}
.companyprofile .fs-c-table th,
.companyprofile .fs-c-table td {
padding: 0.8em 1em;
vertical-align: top;
}
/*
.companyprofile .fs-c-table th {
background: #d0c9b8;
white-space: nowrap;
}
*/
.companyprofile .fs-c-table td {
background: none;
}
/* hover時カラーなし */
.companyprofile .fs-c-table tr:hover th,
.companyprofile .fs-c-table tr:hover td {
background: #f5f3ee;
}
/* レスポンシブ */
@media screen and (max-width: 768px) {
.companyprofile .fs-c-documentArticle table tr {
margin-bottom: 0;
border-bottom: 0;
}
.companyprofile .fs-c-table th,
.companyprofile .fs-c-table td {
display: block;
width: 100%;
padding: 0.4rem 1.2rem;
}
}
/* ========================================
FAQ・フリーページ
======================================== */
/* コンテナ */
.faq-container {
width: 90%;
margin: 0 auto;
padding: 0px 24px 64px;
font-size: 15px;
line-height: 1.8;
}
/* =============================================
質問一覧ボックス（アンカーリンク）
============================================= */
.question-list-box {
background-color: #f5f3ee;
border: 1px solid #d0d0d0;
padding: 28px 32px;
margin-bottom: 56px;
}
.question-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.question-list__item {
padding: 0.6rem 0;
border-bottom: 1px solid rgba(84, 58, 67, 0.2);
}
/* アンカー位置調整 */
#qa_flow, #qa_guest, #qa_personal,
#qa01, #qa02, #qa03, #qa04, #qa05,
#qa06, #qa07, #qa08, #qa09 {
scroll-margin-top: 260px;
}
.question-list__item:nth-last-child(1),
.question-list__item:nth-last-child(2):nth-child(odd) {
border-bottom: none;
}
.question-list__itemLink {
display: block;
padding: 10px 8px 10px 18px;
color: #666666;
text-decoration: none;
font-size: 13.5px;
line-height: 1.55;
position: relative;
transition: color 0.2s, background-color 0.2s;
}
.question-list__itemLink::before {
content: "";
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-top: 1.5px solid #666666;
border-right: 1.5px solid #666666;
transform: translateY(-50%) rotate(45deg);
}
.question-list__itemLink:hover {
text-decoration: underline;
}
/* =============================================
Q&A 詳細セクション
============================================= */
.faq-details {
display: flex;
flex-direction: column;
gap: 0;
}
.faq-item {
border-bottom: 1px solid #e0ddd6;
padding: 28px 0;
}
.faq-item:first-child {
border-top: 1px solid #e0ddd6;
}
/* Q */
.faq-q {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 15.5px;
font-weight: 600;
margin-bottom: 14px;
line-height: 1.65;
}
.tl-q {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 30px;
height: 30px;
background-color: #2d6e75;
color: #fff;
font-size: 14px;
font-weight: 700;
border-radius: 50%;
letter-spacing: 0;
margin-top: 1px;
}
/* A */
.faq-a {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 14.5px;
color: #666666;
line-height: 1.85;
}
.tl-a {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 30px;
height: 30px;
background-color: #fff;
color: #32545f;
font-size: 14px;
font-weight: 700;
border-radius: 50%;
border: 1.5px solid #32545f;
letter-spacing: 0;
margin-top: 1px;
}
/* 強調テキスト（赤） */
.u-red {
color: #c0392b;
font-weight: 600;
}
/* リンク */
.u-link,
.faq-a a {
color: #a08060;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s;
}
.u-link:hover,
.faq-a a:hover {
color: #7a5e42;
}
/* =============================================
お問い合わせボックス
============================================= */
.contact-box {
margin-top: 56px;
padding: 32px;
background-color: rgba(136, 175, 187, 0.1);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.contact-btn {
display: inline-block;
padding: 13px 40px;
background-color: #2c2c2c;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.06em;
border-radius: 3px;
transition: background-color 0.2s;
}
.contact-btn:hover {
background-color: #555;
color: #fff;
text-decoration: none;
}
/* =============================================
レスポンシブ（スマートフォン）
============================================= */
@media (max-width: 768px) {
.faq-container {
padding: 0 8px 0;
width: 100%;
}
.faq-title {
font-size: 20px;
margin-bottom: 28px;
}
.question-list-box {
padding: 20px 16px;
}
.question-list {
grid-template-columns: 1fr;
}
.question-list__item:last-child {
border-bottom: none;
}
.question-list__item:nth-last-child(2):nth-child(odd) {
border-bottom: 1px solid #e0ddd6;
}
.question-list__item:nth-last-child(2) {
border-bottom: none;
}
.faq-item {
padding: 20px 0;
}
.faq-q,
.faq-a {
gap: 10px;
}
.tl-q,
.tl-a {
width: 26px;
height: 26px;
font-size: 13px;
}
.contact-box {
padding: 24px 16px;
margin-top: 40px;
}
.contact-btn {
width: 100%;
text-align: center;
padding: 14px 20px;
}
}
/* ========================================
Object
======================================== */
/* utility
----------------- */
.font_bold {
font-weight: bold;
}
.text_red {
color: #FA0015;
}
/* component
----------------- */
/* =========================== */
/* component btn */
/* =========================== */
.header_but_icon {
margin-bottom: 1rem;
margin-top: 1rem;
margin-right: 3rem;
margin-left: 3rem;
position: relative;
}
/* =========================== */
/* price */
/* =========================== */
.fs-c-productPrice__main__price.fs-c-price {
font-weight: bold;
font-size: 1.6rem;
}
.fs-c-productPrice.fs-c-productPrice--listed,
.fs-c-productPrice.fs-c-productPrice--selling,
.fs-c-productPrice.fs-c-productPrice--member {
margin:0;
}
.fs-c-productMembersLoginLink {
text-align: center;
}
/* 税抜きテキスト調整 */
.fs-c-productPrice__addon {
font-size: 1rem;
margin-left: 5px;
}
span.fs-c-productPrice__addon__label {
font-size: 1rem;
}
.fs-c-productListItem__notice {
padding: 8px 8px;
border: 1px solid currentColor;
background: #F4F4F4;
}
/* =========================== */
/* 画像noimage */
/* =========================== */
.fs-c-noImage {
width: 100%;
aspect-ratio: 1 / 1;
background: #ccc;
}
/* ========================================
header
======================================== */
/* ==＝headerデフォルト設定のリセット== */
.fs-l-header {
padding-top: 0px;
}
.fs-preview-header,
.fs-trial-header {
margin-bottom: 0px;
}
/* ==＝headerデフォルト設定のリセット== */
.header_topbar{
background-color: #88AFBB;
}
.header_topbar p {
color : #fff;
text-align: left;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 2.6%;
padding-left: 2.6%;
}
.logo_descript {
display: flex;
align-items: center;
margin-right: auto;
margin-left:20px;
}
.logo__lead {
display: flex;
flex-direction: row;
margin: auto 16px;
font-size: 1.6rem;
}
.header_but_area {
display: flex;
flex-direction: row-reverse;
}
.header_icon_text {
font-size: 1.2rem;
font-weight: bold;
text-align: center;
}
.header_logo_area {
display: flex;
padding-top: 1rem;
padding-bottom: 1rem;
justify-content :start;
padding-left: 2.5%;
padding-right: 2.5%;
}
.header_logo_area :last-child {
margin-left: auto;
}
.header_logo_area .nav-text {
margin: auto 0;
}
.logo__lead p {
font-weight: bold;
color : #8E8E8E;
font-size: 1.5rem;
}
.header_inner {
background: #F4F4F4;
width: 100%;
z-index: 10;
/* ==position: fixed;== */
top: 0;
left: 0;
}
.fs-p-dateList {
margin: 8px;
background: #ffffff;
padding: 32px;
border: 1px solid #e0e0e0;
}
.fs-p-dateList > li {
border: none;
border-width: 1px 0 0 0;
padding: 0;
}
.fs-p-dateList > li time:first-child {
background: none;
color: #88AFBB;
padding: 2px 20px 2px;
}
/* ========================================
header TOPヘッドラインテキスト
======================================== */
.heading-with-icon {
align-items: center;
gap: 10px;
}
.heading-icon {
width: 28px;
height: 28px;
object-fit: contain;
flex-shrink: 0;
}
.fs-p-phoneOrder__phoneNum {
font-size: 3.5rem;
color: #ff1493;
}
.fs-p-phoneOrder__addition {
font-size: 1.6rem;
color: #ff1493;
}
/* ヘッダーナビゲーションリスト */
.header_nav_list {
display: flex;
margin: auto 0;
}
.header-nav-item {
position: relative;
}
.header-nav-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
color: #333;
transition: all 0.3s ease;
border-radius: 4px;
min-width: 105px;
background-color: transparent;
max-height: 74px;
}
/* リンク全体ではなく、中のアイコンとテキストだけを動かす */
.header-nav-link:hover .nav-icon,
.header-nav-link:hover .nav-text {
transform: translateY(-2px);
}
/* ========================================
.header_nav_list（共通 + sticky）
======================================== */
.header_nav_list {
display: flex;
align-items: center;
margin: auto 8px;
padding: 0;
gap: 1.5rem;
}
.fs-l-header.is-sticky .header_nav_list {
order: 3;
}
/* ========================================
.header_logo_img（共通 + sticky）
======================================== */
.header_logo_img,
.fs-l-header.is-sticky .header_logo_img {
margin: auto 0 auto 2rem;
display: flex;
}
/* ========================================
.nav-icon / .nav-text
======================================== */
.nav-icon {
width: 4rem;
height: 4rem;
object-fit: contain;
padding-bottom: 2px;
}
.nav-text {
font-size: 1.2rem;
font-weight: 500;
color: #444;
text-align: center;
white-space: nowrap;
}
@media (max-width: 480px) {
.nav-text {
display: none;
}
.header_nav_list {
gap: 0.8rem;
}
}
/* ========================================
スマホ・タブレット：縦向き（Portrait）
======================================== */
@media (orientation: portrait) and (max-width: 1023px) {
/* 【カートの数字調整】縦向き時のアイコン右上位置 */
.fs-p-cartItemNumber {
top: -46px;
right: -24px;
}
.header-nav-link {
margin: 10px 0;
min-width: 0;
}
}
/* ========================================
共通・デフォルト設定（縦向き基準）
======================================== */
.header-nav-link {
flex-direction: column;
}
/* ========================================
スマホ・タブレット：横向き（Landscape）
※PC（1024px以上）には影響しないよう上限を設定
======================================== */
@media (orientation: landscape) and (max-width: 1023px) {
/* ナビゲーションを横並び（row）に変更 */
.header-nav-link {
flex-direction: row;
min-width: 0;
}
.fs-p-headerNavigation__link {
flex-direction: row;
}
/* ナビゲーションアイコンの余白調整 */
.nav-icon {
padding-top: 4px;
padding-bottom: 4px;
}
/* 【カートの数字調整】横向き時のアイコン右上位置 */
.fs-p-cartItemNumber {
top: -28px;
right: -10px;
}
/* 【メインページのヘッドライン調整】横向き時の余白 */
.item-heading {
padding: 0px 0px;
}
}
/* ========================================
PC設定（1024px以上は常に縦配置に固定）
======================================== */
@media screen and (min-width: 1024px) {
/* ナビゲーションを縦並び（column）に戻す */
.header-nav-link {
flex-direction: column;
}
.fs-p-headerNavigation__link {
flex-direction: column;
}
/* 【カートの数字調整】PCでのアイコン右上位置 */
.fs-p-cartItemNumber {
top: -46px;
right: -24px;
}
/* 【メインページのヘッドライン調整】PCでの余白 */
.item-heading {
padding: 0px 0px;
}
}
/* ========================================
Sticky（画面スクロール追従）時の設定
======================================== */
/* スクロール追従時の基本余白リセット */
.is-sticky .header-nav-link {
padding: 0;
}
/* ========================================
navigation
======================================== */
/*navi
----------------- */
/* --- 通常（未ログイン） --- */
#nav-item-logout {
display: none !important;
}
#nav-item-login {
display: block !important;
}
/* --- ログイン中（body.is-logged-in） --- */
body.is-logged-in #nav-item-logout {
display: block !important; /* 何が何でも出す */
}
body.is-logged-in #nav-item-login {
display: none !important; /* 何が何でも消す */
}
/* 会員登録ボタンはログイン中も消さない（ご要望通り）
#nav-item-register {
display: block;
}
*/
.fs-p-headerNavBar {
border-bottom: solid 0.5px #8E8E8E;
background: none;
width: 100%;
display: flex;
flex-direction: row;
padding-bottom: 10px;
padding-right: 2.6%;
padding-left: 2.6%;
color: #444;
}
.fs-p-searchForm {
flex-grow: 1;
}
.fs-p-headerNavigation__link:link {
color: #444444;
}
.fs-p-headerNavigation__link:visited {
color: #444444;
}
.fs-p-headerNavigation__link:hover {
color: #444444;
transform: translateY(-2px);
background: rgba(255, 255, 255, 0);
}
.fs-p-headerNavigation__link:active {
color: #444444;
}
/* アイコン画像 */
.fs-p-headerNavigation__icon {
width: 20px;
height: 20px;
object-fit: contain;
display: block;
margin-right: 4px;
}
.fs-p-headerNavigation__listItem {
display: flex;
margin-left: 20px;
margin: 0px 10px;
}
/*
.fs-p-headerNavigation__list > li:last-child {
display: block;
}
*/
/* ========================================
search-form
======================================== */
/*検索フォーム
----------------- */
.c-search-flex-container {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
margin: auto 0.8rem;
flex-wrap: nowrap;
}
.fs-p-headerNavigation__search.fs-p-searchForm {
display:flex;
background: #f4f4f4;
padding: 10px 10px;
}
.c-search-input-group {
flex: 1; /* 可能な限り横幅を広げる */
min-width: 200px; /* 極端に小さくなるのを防ぐ */
display: flex;
position: relative;
}
.c-search-input {
width: 100%;
height: 100%;
padding: 8px 40px 8px 15px;
border: 1px solid #ccc;
line-height: normal;
border-radius: 50px;
box-sizing: border-box;
}
@media (max-width: 768px) {
/* スマホ版の入力されるテキスト自体のスタイル */
.c-search-input {
font-size: 16px; /* 例：スマホで文字が大きすぎる場合に小さくする */
color: #111111; /* 例：文字色を変更する */
}
/* （おまけ）スマホ版のプレースホルダーのスタイルを変えたい場合 */
.c-search-input::placeholder {
font-size: 16px; /* プレースホルダーの文字サイズを調整 */
color: #888888; /* プレースホルダーの色を調整 */
}
}
.c-search-submit-icon {
position: absolute;
right: 15px; /* 右端からの距離 */
top: 50%;
transform: translateY(-50%); /* 上下中央に配置 */
/* ボタンの見た目を消してアイコンだけにする */
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 20px;
height: 20px;
/* アイコン画像を入れる（SVGの例） */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* 検索ボタン */
.c-btn-filter {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 20px; /* 左右の余白だけで調整 */
/* 構造の維持 */
flex-shrink: 0;
white-space: nowrap;
/* 見た目 */
appearance: none; /* デバイス固有のスタイルをリセット */
border: 1px solid #88AFBB;
border-radius: 50px;
background-color: #88AFBB;
color: #fff;
/* インタラクション */
text-decoration: none;
transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.c-btn-filter:hover {
background-color: #7a9aaa;
border-color: #f9f9f9;
color: #fff;
}
.fs-c-inputTable__headerCell {
margin-bottom: 1rem;
}
.fs-p-inputGroup {
border: 1px solid #8E8E8E;
background: none;
border-radius: 100px;
height: 100%;
background: #fff;
}
/* 1行に強制 */
.fs-p-headerNavigation__list {
display: flex;
flex-wrap: nowrap;
width: 100%;
justify-content: space-between;
}
label.fs-c-productImageModal__close {
color: #666666;
}
.fs-p-productSearch__closeBtn::after,
.fs-p-productSearch__closeBtn:hover {
color: #888; /* hover時は色変化のみ */
background: none;
}
/* ============================================================
スクロール100px検知後の「Header small版」レイアウト
============================================================ */
/* 1. ヘッダー全体の固定 */
.fs-l-header.is-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
background: #ffffff;
animation: stickySlideDown 0.3s ease-out;
}
/* 2. 内側の3カラム並列レイアウト */
.fs-l-header.is-sticky .header_inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 2.5%;
border-bottom: solid 0.5px #8E8E8E;
}
/* 3. 親要素の枠を解除（並列化） */
.fs-l-header.is-sticky .header_logo_area {
display: contents;
justify-content: flex-start;
align-items: center;
width: 100%;
padding-left: 0;
padding-right: 0;
}
/* 4. 各要素の並び順とサイズ */
/*検索窓 */
.fs-l-header.is-sticky .fs-p-headerNavBar {
order: 2;
flex: 1;
border-bottom: none;
margin-bottom: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
/*border-bottom: 1px solid #444;*/
}
/*ナビ */
.fs-l-header.is-sticky .header_nav_list {
/* order: 3; */
display: flex;
align-items: center;
padding: 0 15px;
margin-left: auto;
}
/* 5. 非表示指定 */
.fs-l-header.is-sticky .header_topbar,
.fs-l-header.is-sticky .logo__lead,
.fs-l-header.is-sticky .logo_descript,
.fs-l-header.is-sticky .fs-p-headerNavigation__list,
.fs-l-header.is-sticky .sub_navimenu,
.fs-l-header.is-sticky .logo__lead p {
display: none !important;
}
/* ========================================
カートアイコン 数字バッジ
======================================== */
/* バッジの基準点となるwrapper */
.p-header_btnIcon {
position: relative;
width: 0;
height: 0;
}
/* バッジ共通 */
.fs-p-cartItemNumber {
position: absolute;
background: #e05a5a;
color: #fff;
border-radius: 50%;
font-size: 1rem;
font-weight: bold;
min-width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
padding: 0;
justify-content: center;
}
/* ========================================
main-contents
======================================== */
/*main
----------------- */
.fs-l-main {
justify-content: center;
max-width:1600px;
padding-right: 2%;
padding-left: 2%;
}
.fs-l-pageMain,
/* 会員登録のフォーム */
.register_form {
padding:0 1.8rem;
}
@media (max-width: 480px) {
.fs-l-pageMain,
/* 会員登録のフォーム */
.register_form {
padding:0 1rem;
}
}
/* トップバナーエリア */
.banner_container {
padding: 0 8px 28px 8px;
box-sizing: border-box;
}
@media (max-width: 767px) {
.banner_container {
padding: 0;
}
}
@media (max-width: 480px) {
.banner_container {
padding: 0 10px 20px;
}
}
/* カテゴリエリア */
.category-section {
margin-bottom: 40px;
}
/* カテゴリーグリッド - レスポンシブ対応 */
.category-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* モバイル: 2列 */
gap: 8px;
padding: 0 16px;
max-width: 1144px;
margin: 0 auto;
}
/* カテゴリーアイテム - レスポンシブ対応 */
.category-item {
display: flex;
align-items: center;
width: 100%;
text-decoration: none;
transition: all 0.2s ease;
overflow: hidden;
}
.category-item:hover {
background-color: none;
border-color: #ccc;
transform: translateY(-2px);
}
/* カテゴリー画像 - 左端に70px×70px */
.category-image {
width: 80px;
height: 80px;
flex-shrink: 0;
overflow: hidden;
border: 1px solid #e0e0e0;
}
.category-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* カテゴリー名 - 画像の右側 */
.category-name {
flex: 1;
font-size: 1.4rem;
font-weight: bold;
color: #666666;
padding: 0 12px;
margin: 0;
text-align: left;
}
/* タブレット: 3列 */
@media (min-width: 600px) {
.category-grid {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 0 20px;
}
.category-name {
padding: 0 14px;
}
}
/* PC: 4列 (元のデザイン) */
@media (min-width: 960px) {
.category-grid {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
justify-content: center;
padding: 0;
}
.category-name {
padding: 0 16px;
}
}
/* モバイル小画面: セクションのパディング調整 */
@media (max-width: 599px) {
.category-section {
padding: 40px 0;
}
.section-title {
font-size: 18px;
margin-bottom: 30px;
}
}
.carousel-inner {
padding:10px;
margin-bottom: 4px;
background: #ffffff;
}
.fs-pt-carousel-wrap {
max-width:100%;
}
.fs-pt-carousel__slide__caption {
background: rgba(30, 30, 30, 0.4);
color: #fff;
padding: 8px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
.info {
padding: 12px;
background: none;
text-align: center;
font-weight: bold;
color: #ae1356;
}
.fs-pt-column--2 {
display: grid;
align-items: flex-start;
column-gap: 4px;
row-gap :4px;
}
/*
.fs-pt-column__item {
background: #ffffff;
grid-template-rows: subgrid;
grid-row: span 4;
}
*/
.fs-pt-column__heading {
font-size: 1.6rem;
}
/*
.fs-c-productListCarousel__list__item {
flex-basis: auto;
max-width: 254px;
min-width: 254px;
}
*/
/* 商品カルーセルの高さ揃え + 背景色 + 余白 */
.fs-c-productListCarousel__list__itemTrack .slick-slide {
display: flex;
height: inherit;
padding: 0 4px; /* カード間隔の半分(8px ÷ 2) */
}
.fs-c-productListCarousel__list__itemTrack .slick-slide > div {
display: flex;
width: 100%;
height: 100%;
}
.fs-c-productListCarousel__list__item.fs-c-productListItem {
display: flex !important;
flex-direction: column;
width: 100%;
margin: 0px; /* デフォルトマージンの打消し */
min-height: 370px; /* 固定の最小高さ */
padding: 8px; /* カード内の余白 */
box-sizing: border-box;
border: 1px solid #88AFBB;
}
/* カルーセル全体を中央揃え */
.fs-c-productListCarousel {
/* max-width: 1144px; */
margin: 0 auto;
margin-bottom: 40px;
width: 100%;
}
.fs-c-productListCarousel__list {
margin: 0 -4px; /* padding分を相殺 */
}
.fs-c-productListItem__imageContainer {
flex-shrink: 0;
}
.fs-c-productListItem__productName {
font-size: 1.4rem;
font-weight: bold;
margin: 1rem 0;
}
.fs-c-productListItem__prices {
margin-top: auto;
}
.fs-c-productListItem__control {
display:none;
}
.inner-wrap {
padding: 10px;
}
.maintopic {
text-align: center;
margin-bottom: 10px;
}
.image-container {
width: 100%;
height: 172px;
overflow: hidden;
margin-bottom: 4px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.fs-p-heading--lv2 {
font-size: 1.6rem;
border-bottom: 0px;
padding: 8px;
color: #444444;
margin: auto;
font-weight: bold;
}
.fs-p-heading--lv3 {
padding: 8px;
font-weight: bold;
color: #7faabc;
letter-spacing: 0.02em;
}
.fs-p-sideMenu .fs-pt-menu__item + .fs-pt-menu__item {/* =上部の不要なmarginを打消し= */
margin-top: 0px;
}
.fs-p-sideMenu .fs-pt-menu__heading--lv1 {
border: none;
border-bottom: 1px solid #C5C5C5;
font-weight: bold;
}
.fs-p-sideMenu .fs-pt-menu__heading--lv2 {
border-bottom: none;
border: none;
background-color: rgba(136, 175, 187, 0.1);
padding-left: 35px;
}
.fs-p-sideMenu .fs-pt-menu__heading--lv1:hover,
.fs-pt-menu__item.fs-pt-menu__item--lv2:hover {
color: #ffffff;
/* transition: color 0.1s ease;*/
background: #88afbb;
}
/* =================================================
ドロワー（sub_menu）の成形について
================================================= */
/* ログインのボタン welcome部分を非表示 */
.fs-p-drawer.fs-l-sideArea .fs-clientInfo.is-ready,
.fs-p-drawer__welcomeMsg {
display: none;
}
/* 共通設定 */
.fs-p-drawer__loginLogout a::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 8px;
border-radius: 50%; /* 丸くする */
}
/* ログイン：緑色の丸 */
.fs-p-drawer__loginLogout__login::before {
background-color: #4CAF50;
border: 2px solid #2E7D32;
}
/* ログアウト：赤色の丸 */
.fs-p-drawer__loginLogout__logout::before {
background-color: #F44336;
border: 2px solid #C62828;
}
/* サブメニューのcloseボタン*/
.fs-p-drawer__buttonContainer {
justify-content: flex-start;
}
/* サブメニューのヘッドライン*/
h2.fs-p-drawer__heading {
color: #ffffff;
font-size: 1.2rem;
background: #88AFBB;
text-align: left;
padding-left: 8px;
line-height: 38px;
height: 38px;
}
/* サブメニューアコーディオン動きの設定 */
.fs-pt-menu__submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out, opacity 0.3s;
opacity: 0;
}
.fs-pt-menu__submenu.is-open {
max-height: 1000px;
opacity: 1;
}
.fs-pt-menu__submenu.no-transition {
transition: none;
}
.fs-p-sideMenu * {
transition-duration: 0.1s;
}
.fs-p-sideMenu a {
padding: 15px 20px;
}
.fs-p-sideMenu a:hover{
background: none;
color: #ffffff;
}
.fs-pt-menu__link--lv1 {
position: relative;
display: block;
padding-right: 40px; /* 右端にアイコン用スペースを確保 */
}
/* サブメニューのカテゴリ名横icon通常時カラー */
ul.fs-pt-menu--lv1 li.fs-pt-menu__item--lv1 .fs-pt-menu__link--lv1::after {
color: #333;
}
/* hover時 */
ul.fs-pt-menu--lv1 li.fs-pt-menu__item--lv1 .fs-pt-menu__link--lv1:hover::after {
color: #fff;
transition: opacity 0.1s ease-in-out;
}
/* アコーディオンが開いている（active）状態 */
/* ＋ を隠し、－ を表示する */
.fs-pt-menu__link--lv1.active::before {
opacity: 0;
}
.fs-pt-menu__link--lv1.active::after {
opacity: 1;
}
/* 【hover時】 アイコンの色を白にする */
.fs-pt-menu__link--lv1:hover::before,
.fs-pt-menu__link--lv1:hover::after {
color: #fff;
}
/* =================================================
アコーディオンアイコン（＋ / －）の制御（子なし非表示版）
================================================= */
/* 共通設定：初期状態はすべて非表示（contentを空に） */
.fs-pt-menu__link--lv1::before,
.fs-pt-menu__link--lv1::after {
position: absolute;
right: 15px !important;
top: 50% !important;
transform: translateY(-50%);
font-size: 18px;
font-weight: bold;
transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
display: inline-block;
pointer-events: none;
content: "" !important; /* 初期値は空にする */
}
/* -------------------------------------------------
【子カテゴリがある場合のみ】アイコンを設定
------------------------------------------------- */
/* 通常時：＋ を表示 / － を隠す */
.fs-pt-menu__heading--lv1:has(+ .fs-pt-menu__submenu) .fs-pt-menu__link--lv1::before,
.fs-pt-menu__link--lv1:has(~ .fs-pt-menu__submenu)::before {
content: "＋" !important;
opacity: 1;
}
.fs-pt-menu__heading--lv1:has(+ .fs-pt-menu__submenu) .fs-pt-menu__link--lv1::after,
.fs-pt-menu__link--lv1:has(~ .fs-pt-menu__submenu)::after {
content: "－" !important;
opacity: 0;
}
/* 開いている（active）状態：＋ を隠し、－ を表示する */
.fs-pt-menu__link--lv1.active::before {
opacity: 0 !important;
}
.fs-pt-menu__link--lv1.active::after {
opacity: 1 !important;
}
/* 子カテゴリのアイコンを非表示 */
.fs-p-sideMenu .fs-pt-menu__link--lv2::before {
content: "";
}
/* -------------------------------------------------
【hover時】
------------------------------------------------- */
/* hoverした時に アイコンを白にする */
.fs-pt-menu__link--lv1:hover::before,
.fs-pt-menu__link--lv1:hover::after {
color: #fff;
}
/* =================================================
5. 「〇〇 一覧へ」専用スタイル
================================================= */
.category_sub_all .fs-pt-menu__link--lv2 {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 「一覧へ」の末尾にだけ▷ */
.category_sub_all .fs-pt-menu__link--lv2::after {
content: "\e90c" !important; /* 元のアイコンコード */
font-family: "fs-icon";
display: inline-block;
font-weight: normal;
padding-left: 15px;
transition: transform 0.3s ease; /* 0.3秒かけて滑らかに動かす */
}
.category_sub_all .fs-pt-menu__link--lv2:hover::after {
transform: translateX(8px);
}
/* ========================================
aside-contents
======================================== */
.fs-l-sideArea {
min-width: 240px;
}
/* ========================================
item-group
======================================== */
/*Itempage
----------------- */
.fs-c-heading--page {
border-bottom: none;
font-size: 2rem;
padding: 0;
line-height: 1.5;
color: #444;
font-weight: 500;
}
.heading-sub {
margin: 1.2rem auto;
font-size: 2rem;
font-weight: bold;
letter-spacing: .1em;
text-indent: .1em;
line-height: 1.2;
}
.item-heading {
text-align: center;
padding: 32px 32px ;
}
.fs-c-breadcrumb {
padding: 0px 35px;
background-color: #ffffff;
}
.fs-c-breadcrumb__listItem + .fs-c-breadcrumb__listItem::before {
margin: 8px;
}
.fs-c-sortItems__list__item.is-active {
background: #999F9F;
}
.fs-c-productList {
margin: 0;
}
.fs-c-productList__list {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 8px;
row-gap: 8px;
width: 100%;
box-sizing: border-box;
}
.fs-c-productList__list__item {
border-bottom: none;
padding: 10px;
background: #f7f7f7;
border: 1px solid #88AFBB;
min-width: 0;
}
.fs-c-productName__name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 2行まで表示して3行目で「...」 */
overflow: hidden;
word-break: break-all;
order: 1;
margin-bottom: 1rem;
font-size: 1.2rem;
}
.fs-c-productName__name:hover {
text-decoration: underline;
}
.fs-c-productListItem__productName a {
display: flex;
flex-direction: column;
}
/* 商品番号と商品名位置入れ替え */
.fs-c-productPrice {
display: flex;
justify-content: flex-end;
align-items: baseline;
}
/* 通常価格（定価）・販売価格表示設定 */
/* 「定価がある場合」の定価表示部分 */
.fs-c-productPrice--listed{
font-size: 8px;
color: #666666;
}
/*「定価がある場合」の販売価格表示部分 */
.fs-c-productPrice--listed + .fs-c-productPrice--selling * {
color: #f00 !important;
}
.fs-c-productImageModal {
z-index: 100000000 !important;
}
.fs-c-productImageModalCarousel__figure img {
width: auto;
overflow: hidden;
}
.fs-c-productImageModalCarousel__figure {
height: 100vh;
}
.fs-l-productLayout__item.fs-l-productLayout__item--1,
.fs-l-productLayout__item.fs-l-productLayout__item--2 {
padding: 16px;
}
.fs-l-product4 .fs-l-productLayout {
grid-gap: 16px;
grid-template-columns: calc(60%) calc(40%);
}
.fs-c-productNameHeading.fs-c-heading {
margin-bottom: 2rem;
color: #444444;
}
.fs-c-productNameHeading__copy {
display: block;
}
.product_listItem {
font-size: 1.2rem;
padding: 7px 15px;
}
.product_listItem:nth-child(odd) {
background-color: #fafafa;
}
/* ==＝品質表示タグのスタイル== */
.fs-c-productMark__mark {
border-radius: 3px;
font-weight: 500;
padding: 4px;
margin: 0 5px 5px 0;
}
/* ==＝品質表示テキスト== */
span.fs-c-productMark__label {
font-size: 1.2rem;
}
@media (max-width: 480px) {
.fs-c-productMark__mark {
border-radius: 3px;
font-weight: 500;
padding: 4px;
margin: 0 2px 2px 0;
}
.fs-c-heading--page {
font-size: 1.6rem;
}
/* ==＝品質表示テキスト== */
span.fs-c-productMark__label {
font-size: 1rem;
}
}
.fs-c-productNotice--outOfStock,
.fs-c-productNotice--subscriptionOutOfStock{
padding:16px;
}
.spec-table-wrapper {
background: rgba(126, 126, 126, 0);
border-radius: 4px;
margin: auto;
}
.spec-table-inner {
padding: 2rem;
}
.spec-title {
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #d0d0d0;
}
.spec-row {
display: flex;
margin-bottom: 1rem;
margin-top: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
line-height: 1.6;
border-bottom: 1px solid #d0d0d0;
}
.spec-label {
font-weight: bold;
min-width: 80px;
flex-shrink: 0;
}
.spec-value {
flex: 1;
color: #333;
}
.spec-row:last-child {
margin-bottom: 0;
}
.fs-p-card {
border: none;
background-color: none;
}
.fs-p-card__title {
border-bottom: 1px solid #D9D9D9;
}
/* ===返品交換について== */
.fs-p-card__message {
padding: 16px 8px;
}
.fs-l-product4 .fs-l-productLayout .fs-l-productLayout__item--3 {
padding: 16px;
}
/* ===バリエーション表示のサムネイル設定== */
.fs-c-variationPanelList__panel__image {
display: flex;
justify-content: center;
align-items: center;
height:120px;
max-height:120px;
max-width: 100%;
padding-bottom: 8px;
/* text-alignはFlexbox環境では不要ですが、あっても害はありません */
}
/* 画像自体の設定を追加 */
.fs-c-variationPanelList__panel__image img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain; /* これが重要：枠内に収まるように比率を維持 */
}
/* ========================================
Member registration form 会員登録フォーム
=========================================== */
/* --- 全体のスタイル調整 --- */
.fs-p-announcement_wrap.signup {
width: 100%;
max-width: 900px; /* 全体の最大幅（デザインに合わせて調整してください） */
margin: 0 auto;
padding: 0px;
box-sizing: border-box;
}
.fs-p-announcement {
display: flex;
flex-direction: column; /* スマホでは縦並び */
align-items: center;
background-color: #fcfbf9; /* 画像の背景（和紙風）に合わせた薄いベージュ */
border: 1px solid #b2d6cd; /* 画像の枠線に合わせたティールグリーン */
padding: 24px;
margin: 10px auto;
}
/* --- 画像部分のスタイル --- */
.fs-p-announcement__image-box {
width: 100%;
max-width: 400px; /* 画像が大きくなりすぎないように制限 */
}
.fs-p-announcement__img {
width: 100%;
height: auto;
display: block;
}
/* --- テキスト部分のスタイル --- */
.fs-p-announcement__content {
width: 100%;
}
.fs-p-announcement__title {
font-size: 1.25rem;
color: #666666;
margin-top: 0;
margin-bottom: 16px;
line-height: 1.4;
border-bottom: 2px solid #b2d6cd; /* タイトルの下にアクセント線 */
padding-bottom: 8px;
}
.fs-p-announcement__body {
font-size: 1.2rem;
color: #555;
line-height: 1.6;
}
.fs-c-orderedList li {
margin-bottom: 8px;
}
/* --- レスポンシブ対応（PCサイズ：画面幅768px以上） --- */
@media (min-width: 768px) {
.fs-p-announcement {
flex-direction: row; /* PCでは横並びにする */
align-items: center;
padding: 32px;
gap: 32px;
}
.fs-p-announcement__image-box {
flex: 1; /* 横並び時の比率調整 */
max-width: 350px;
}
.fs-p-announcement__content {
flex: 1.2; /* 横並び時の比率調整 */
}
.fs-p-announcement__title {
font-size: 1.4rem;
}
}
.fs-c-specTable {
margin: 0 auto;
}
.fs-p-announcement {
width: 100%;
}
.fs-p-announcement_wrap.signup .fs-p-announcement {
width: auto;
}
.fs-c-orderedList {
text-align: left;
padding: 2rem 1rem;
background: rgba(136, 175, 187, 0.1);
margin:2rem 0;
margin-top: 12px;
padding-left: 20px;
}
.fs-p-announcement__body {
display: flex;
flex-direction: column;
}
.fs-c-heading .fs-c-heading--page {
text-align: left;
}
/* フォームの入力情報を左詰めに */
.fs-c-inputTable input[type="text"],
.fs-c-inputTable input[type="tel"],
.fs-c-inputTable input[type="password"] {
text-align: left;
}
/* 会員ステージ特典 */
.fs-c-specTableContainer {
width: 100%;
overflow-x: auto;
}
.fs-c-specTable {
width: 100%;
border-collapse: collapse;
}
.fs-c-specTable thead .fs-c-specTable__headerCell,
.fs-c-specTable tbody .fs-c-specTable__dataCell,
.fs-c-specTable tbody .fs-c-specTable__headerCell {
border: 1px solid #ccc;
padding: 8px 12px;
text-align: center;
vertical-align: middle;
}
.fs-c-specTable,
.fs-c-specTable thead,
.fs-c-specTable tbody,
.fs-c-specTable tr,
.fs-c-specTable th,
.fs-c-specTable td {
display: block;
width: 100%;
box-sizing: border-box;
}
.fs-c-specTable,
.fs-c-specTable__headerCell,
.fs-c-specTable__dataCell {
border: none;
}
.fs-c-specTable thead {
display: none;
}
.fs-c-specTable tbody tr {
margin-bottom: 0.8rem;
border: 1px solid #ccc;
overflow: hidden;
}
.fs-c-specTable tbody th.fs-c-specTable__headerCell,
.fs-c-specTable tbody td.fs-c-specTable__dataCell {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
border: none;
border-bottom: 1px solid #eee;
text-align: right;
}
.fs-c-specTable tbody th.fs-c-specTable__headerCell {
background-color: #f5f5f5;
font-weight: bold;
text-align: left;
justify-content: flex-start;
font-size: 15px;
background: rgba(126, 126, 126, 0.08);
}
.fs-c-specTable tbody td.fs-c-specTable__dataCell::before {
content: attr(data-label);
font-weight: bold;
color: #555;
text-align: left;
white-space: nowrap;
margin-right: 12px;
flex-shrink: 0;
}
.fs-c-specTable tbody tr:last-child td:last-child,
.fs-c-specTable tbody tr:last-child th:last-child {
border-bottom: none;
}
.fs-c-specTable tbody td[rowspan] {
display: block;
}
}
/* ========================================
会員登録完了ページ
======================================== */
/*completion
----------------- */
.compleat_register > p {
font-size: 1.6rem;
}
.Compleat_thank {
font-size: 2.0rem;
font-weight: bold;
}
.compleat_register {
text-align: center;
line-height: 1.8;
color: #333;
padding: 40px 20px;
}
.compleat_register_desc {
margin-bottom: 30px;
font-size: 1.6rem;
}
/* グレーのボックス設定 */
.service-box {
display: inline-block; /* 中身の幅に合わせる */
text-align: left; /* ボックス内は左揃え */
background-color: #e0e0e0;
padding: 20px 40px;
margin-bottom: 30px;
border-radius: 4px;
}
.service-title {
font-weight: bold;
margin-bottom: 10px;
margin-top: 0;
}
/* リストのデザイン */
.service-list {
padding: 0;
margin: 0;
}
.service-list li {
position: relative;
padding-left: 1.5em; /* チェックマーク分の余白 */
margin-bottom: 5px;
}
/* チェックマーク（擬似要素） */
.service-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #555;
font-weight: bold;
}
/* ========================================
ログイン・新規登録
======================================== */
/*login forgotPassword ----------------- */
.fs-body-forgotPassword .fs-c-inputInformation__field,
.fs-body-login .fs-c-inputInformation__field {
padding: 16px 32px;
background: rgba(136, 175, 187, 0.1);
}
.fs-body-login .fs-c-loginForm {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
max-width: 1062px;
margin: auto;
}
.fs-c-subSection__title,
.fs-c-linkedServiceLogin__title {
font-weight: bold;
color: #666666;
font-size: 1.6rem;
margin-top: 20px;
border-bottom: 2px solid #b2d6cd;
margin-bottom: 20px;
padding-bottom: 10px;
}
.fs-c-newUsers__message {
margin-top: 24px;
margin-bottom: 24px;
padding: 20px;
height: 204px;
}
.fs-c-inputInformation__link {
text-align: center;
}
.fs-c-buttonContainer.fs-c-buttonContainer--memberRegister {
margin-top: 32px;
}
/* ========================================
マイページ
======================================== */
/*my page
----------------- */
/* ログアウトボタン */
.fs-p-drawer__loginLogout__logout, .fs-p-drawer__loginLogout__login {
max-width: 240px;
margin: 0 auto;
height: 42px;
}
.fs-p-drawer__loginLogout__logout:hover, .fs-p-drawer__loginLogout__login:hover {
background: #7198a3;
border: 1px solid #7198a3;
}
.fs-body-my-top .fs-l-account {
max-width: 1120px;
margin: 0 auto;
align-items: flex-start;
display: block;
}
.fs-c-accountService__page:not(.fs-c-accountService__page--accountDelete) .fs-c-accountService__pageLink {
box-shadow: none;
transition: all 0.3s ease;
background: rgba(136, 175, 187, 0.2);
width: 100%;
height: 100%;
border: 1px solid #88AFBB;
border-radius: 10px;
}
.fs-c-accountService__page:not(.fs-c-accountService__page--accountDelete) .fs-c-accountService__pageLink:hover {
background-color: #FBFBFB;
transform: translateY(-2px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.fs-c-accountService {
justify-content: start!important;
}
/* 親要素（ulなど）への指定 */
.fs-c-accountService__page {
flex-wrap: wrap;
flex-basis: calc((100% - (16px * 3)) / 4);
height: calc((100% - (16px * 3)) / 4);
padding: 0;
list-style: none;
margin: 6px;
aspect-ratio: 1 / 1;
}
.fs-c-wishlistProduct__header {
margin-bottom: 40px;
}
.fs-c-wishlistProduct {
margin-top: 80px;
}
/*お気に入りライン-- */
.fs-c-wishlistProduct__title,
.fs-c-featuredProduct__title {
border-top: solid 0.5px #88AFBB;
border-bottom: none;
padding-top: 4rem;
padding-bottom: 2rem;
font-weight: bold;
font-size: 1.6rem;
}
/*--アイコン--- */
.fs-c-accountService__page:not(.fs-c-accountService__page--accountDelete) .fs-c-accountService__pageLink__label::before {
/* 最小32px 〜 画面幅の4.5% 〜 最大80px の間で可変 */
font-size: clamp(32px, 5vw, 80px);
width: auto;
height: auto;
}
/*--マイページのトップにある退会手続きを非表示--- */
ul.fs-c-accountService > li.fs-c-accountService__page.fs-c-accountService__page--accountDelete {
display: none ;
}
/* 1. 元のテキスト（会員登録内容変更）が書かれている最内要素を非表示にする */
li.fs-c-accountService__page--accountSettingsModify
.fs-c-accountService__pageLink__label
.fs-c-string--label {
display: none !important;
}
/* 2. 親のlabel要素の ::afterに新しい文言を表示させる（元のまま） */
li.fs-c-accountService__page--accountSettingsModify
.fs-c-accountService__pageLink__label:after {
content: "登録変更/退会";
display: block; /* 複数行にする場合はblockにする */
color: #495057; /* サイトのテキスト色に合わせて調整 */
white-space: pre-wrap; /* \n で改行を有効にする場合に必要 */
}
/*--マイページからのリンク-- */
.fs-c-wishlistProduct__footer {
text-align: left;
}
.fs-c-accountService {
justify-content: start !important;
margin-bottom: 24px;
}
/* アカウント名 */
.fs-p-accountInfo__body {
margin-top: 8px;
}
.fs-p-accountInfo__header {
font-weight: bold;
justify-content: center;
font-size: 1.6rem;
}
/* カード外枠 */
.fs-p-accountInfo {
position: relative;
border: 1.5px solid #b0c8cc;
border-radius: 4px;
background: #fff;
display: flex;
align-items: stretch;
overflow: hidden;
min-height: 120px;
}
.fs-clientInfo.is-ready {
display: flex;
}
/* 台形装飾 */
.fs-p-accountInfo__deco {
flex-shrink: 0;
width: 20%;
background: #afc8cc;
clip-path: polygon(0 0, 60% 0, 100% 100%, 0% 100%);
}
.fs-p-accountInfo__deco--right {
clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%);
}
/* 中央コンテンツ */
.fs-p-accountInfo__content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 1rem 1rem;
text-align: center;
}
/* ポイント数字下の区切り線 */
.fs-p-accountInfo__point__point {
border-bottom: 1.5px solid #ccc;
padding-bottom: 6px;
margin-bottom: 6px;
}
/* ポイント履歴 */
.fs-c-history__info {
background-color: rgba(136, 175, 187, 0.1)
}
/* ===== レスポンシブ：スマホ（～480px） ===== */
@media (max-width: 480px) {
/* 親要素（ulなど）への指定 */
.fs-c-accountService__page {
flex-basis: calc((100% - (16px * 2)) / 3);
height: calc((100% - (16px * 2)) / 3);
margin: 5px;
}
.item-heading {
padding:0px;
}
.fs-p-accountInfo__point__point {
flex-direction: column; /* 付与率を改行 */
align-items: center;
}
}
/* ========================================
company会社情報
======================================== */
/* ===== Wave Section ===== */
.about-section {
position: relative;
background: #ffffff;
}
.about-section > svg {
display: block;
width: 100%;
height: 40px;
}
@media (max-width: 768px) {
.about-section > svg {
height: 24px; /* スマホでは波を低く */
}
}
/* 上部の波形（黒背景から白へ） */
.wave-top {
display: block;
width: 100%;
overflow: hidden;
line-height: 0;
}
.wave-top svg {
display: block;
width: 100%;
height: 60px;
}
/* コンテンツエリア */
.about-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px 80px 60px 80px;
max-width: 1400px;
margin: 0 auto;
gap: 40px;
}
/* ロゴ */
.about-logo {
flex: 0 0 auto;
max-width: 200px;
}
/* 会社情報 */
.about-info {
flex: 1;
padding-left: 60px;
}
.company-name {
font-size: 14px;
font-weight: 700;
color: #666666;
margin-bottom: 16px;
letter-spacing: 0.05em;
}
.office-block {
margin-bottom: 14px;
}
.office-label {
font-size: 12px;
font-weight: 700;
color: #666666;
margin-bottom: 3px;
display: flex;
align-items: center;
gap: 4px;
}
.office-label::before {
content: "■";
font-size: 10px;
color: #666666;
}
.office-address {
font-size: 12px;
color: #555555;
padding-left: 16px;
line-height: 1.6;
}
/* ホームボタン */
.about-cta {
flex: 0 0 auto;
}
.home-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border: none;
color: #ffffff!important;
background: #88AFBB;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.home-btn:hover {
background: #7a9aaa;
color: #ffffff;
}
.home-btn .arrow {
font-size: 14px;
}
/* ===== レスポンシブ：タブレット（～1024px） ===== */
@media (max-width: 1024px) {
.about-inner {
padding: 32px 40px 48px 40px;
gap: 28px;
}
.about-logo .logo-text {
font-size: 42px;
}
.about-info {
padding-left: 32px;
}
}
/* ===== レスポンシブ：スマートフォン（～768px） ===== */
@media (max-width: 768px) {
.wave-top svg {
height: 40px;
}
.about-inner {
flex-direction: column;
align-items: center;
text-align: center;
padding: 28px 24px 44px 24px;
gap: 24px;
}
.about-logo {
max-width:180px;
}
.about-logo .logo-text {
font-size: 48px;
}
.about-info {
padding-left: 0;
width: 100%;
}
.company-name {
font-size: 15px;
margin-bottom: 14px;
}
.office-label {
justify-content: center;
}
.office-address {
padding-left: 0;
text-align: center;
}
.about-cta {
width: 100%;
display: flex;
justify-content: center;
}
.home-btn {
width: 100%;
max-width: 280px;
justify-content: center;
padding: 14px 24px;
}
}
/* ===== レスポンシブ：スマホ（～480px） ===== */
@media (max-width: 480px) {
.about-logo .logo-text {
font-size: 40px;
}
.about-inner {
padding: 24px 16px 36px 16px;
}
.company-name {
font-size: 14px;
}
.office-label,
.office-address {
font-size: 12px;
}
}
/* ============================================
フッター情報グリッドエリア（3カラム）footer contents
============================================ */
.fs-l-footer {
background-color: #828282;
margin: 0px;
}
.fs-l-footer__contents {
max-width: 100vw;
}
.footer-grid {
color: #fff;
padding-left: 2.5%;
padding-right: 2.5%;
max-width: 1920px;
margin: auto;
}
.footer-grid_inner {
margin: 0 auto;
}
/* ── 3カラムグリッド ── */
.footer-grid_cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid rgba(255,255,255,0.2);
padding-top: 40px;
}
.footer-grid_col {
padding-left: 1.8vw;
padding-right: 1.8vw;
box-sizing: border-box;
padding-top: 46px;
padding-bottom: 46px;
}
/* ── ブロックタイトル ── */
.footer-grid_title {
display: flex;
align-items: center;
gap: 10px;
font-weight: bold;
letter-spacing: 0.04em;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.3);
margin: 0 0 16px;
}
.footer-grid_title svg {
width: 18px;
height: 18px;
flex-shrink: 0;
stroke: #fff;
}
/* ── 本文・共通 ── */
.footer-grid_block {
margin-bottom: 50px;
}
.footer-grid_body {
line-height: 1.4;
color: rgba(255,255,255,0.82);
}
.footer-grid_body a {
color: #f9d05a;
text-decoration: none;
}
.footer-grid_body a:hover {
text-decoration: underline;
}
.footer-grid_title::before {
content: "";
display: inline-block;
width: 28px; /* アイコンの幅 */
height: 28px; /* アイコンの高さ */
margin-right: 8px;
vertical-align: middle;
background-size: contain;
background-repeat: no-repeat;
}
/* 各アイコン個別設定 */
.icon-shippingfee::before {
background-image: url('https://yoshiyo.itembox.cloud/item/icon-shippingfee.png?t=20260915145427');
}
.icon-delivery::before {
background-image: url('https://yoshiyo.itembox.cloud/item/icon-delivery.png?t=20260915145427');
}
.icon-point::before {
background-image: url('https://yoshiyo.itembox.cloud/item/icon-point.png?t=20260915145427');
}
.icon-payment::before {
background-image: url('https://yoshiyo.itembox.cloud/item/icon-payment.png?t=20260915145427');
}
.icon-return::before {
background-image: url('https://yoshiyo.itembox.cloud/item/icon-return.png?t=20260915145427');
}
.icon-mail::before {
background-image: url('https://yoshiyo.itembox.cloud/item/icon-mail.png?t=20260915145427');
}
.icon-tel::before {
background-image: url('https://yoshiyo.itembox.cloud/item/icon-tel.png?t=20260915145427');
}
/* ── 送料テーブル ── */
.footer-grid_table {
width: 100%;
font-size: 12px;
border-collapse: collapse;
margin-bottom: 12px;
}
.footer-grid_table th,
.footer-grid_table td {
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.82);
vertical-align: top;
text-align: left;
}
.footer-grid_table th {
font-weight: bold;
width: 40%;
color: #fff;
align-items: center;
vertical-align: middle;
}
.footer-grid_emphasis {
color: #f9d05a;
font-weight: bold;
}
/* ── お問い合わせ行 ── */
.footer-grid_contact-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
gap: 8px;
text-align: center;
vertical-align: middle;
}
.footer-grid_name {
font-size: 14px;
font-weight: bold;
}
.footer-grid_contact-row:last-of-type { border-bottom: none; }
.footer-grid_contact-name {
font-weight: bold;
color: #fff;
flex-shrink: 0;
}
.footer-grid_contact-btn {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 160px;
height: 34px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 2px;
background: rgba(255,255,255,0.15);
color: #fff!important;
font-size: 1.2rem;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s;
padding: 1rem 1rem;
}
.footer-grid_contact-btn:hover {
background: rgba(255,255,255,0.0);
color: #fff;
text-decoration: none;
}
/* ── クレジットカードアイコン ── */
.footer-grid_payment-logos img {
max-width : 56px;
margin: 16px 8px;
}
.footer-grid_payment-label {
font-weight: bold;
margin-top: 16px;
}
.footer-grid_payment-sub {
margin-top: 8px;
}
/* ── 電話番号ブロック ── */
.footer-grid_tel-block {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.2);
}
.footer-grid_tel-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: bold;
margin-bottom: 12px;
}
.footer-grid_tel-title svg {
width: 16px;
height: 16px;
stroke: #fff;
flex-shrink: 0;
}
.footer-grid_tel-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
margin-bottom: 8px;
font-size: 12px;
color: rgba(255,255,255,0.82);
}
.footer-grid_tel-name {
display: flex;
font-weight: bold;
align-items: center;
}
.footer-grid_tel-icon {
width: 24px; /* アイコンのサイズに合わせて調整 */
height: auto;
vertical-align: middle;
align-items: center;
flex-shrink: 0;
}
.footer-grid_tel-number {
font-size: 1.6rem;
font-weight: bold;
color: #fff;
letter-spacing: 0.05em;
}
.footer-grid_tel-hours {
font-size: 1.2rem;
color: rgba(255,255,255,0.6);
}
/* ──footreナビ── */
.fs-l-footer__utility {
margin:0 auto;
justify-content: center;
font-size: 1.2rem;
}
.fs-p-footerUtilityMenu__list.fs-pt-menu.fs-pt-menu--lv1 > li {
padding: 10px;
}
.fs-p-footerUtilityMenu__list a::before {
content: none;
}
.fs-p-footerUtilityMenu__list a {
color: rgba(255,255,255,0.75);
margin:10px auto;
}
/* ── コピーライト ── */
.fs-p-footerCopyright {
padding: 5px 8px;
}
/* ── SP：1カラム ── */
@media (max-width: 768px) {
.footer-grid_cols {
grid-template-columns: 1fr;
}
.footer-grid_col {
padding: 0 0 28px;
border-right: none;
margin-bottom: 28px;
}
.footer-grid_col:last-child {
border-bottom: none;
margin-bottom: 0;
}
.footer-grid_block {
margin-bottom: 3rem;
}
.footer-grid_title {
gap: 0;
}
/*アイコン固定ヘッダーの高さに合わせて変更 */
.footer-grid_title::before {
width: 20px;
height: 20px;
}
/* ── クレジットカードアイコン ── */
.footer-grid_payment-logos img {
max-width : 48px;
margin: 6px 4px;
}
}
/* ============================================
フッターカテゴリアコーディオン
PC（1280px以上）は非表示
============================================ */
.footer_nav-search.category {
display: none;
}
#link-footer-nav {
scroll-margin-top: 420px;
}
@media screen and (max-width: 1279px) {
.footer_nav-search.category {
display: block;
}
}
/* ============================================
見出し（カテゴリから探す）
============================================ */
.footer_nav-searchheading.category_accordion {
background-color: #88AFBB;
color: #fff;
font-weight: 700;
letter-spacing: 0.06em;
padding: 13px 18px;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
/* 見出し左の縦線アクセント */
.footer_nav-searchheading.category_accordion::before {
content: "";
display: inline-block;
width: 3px;
height: 16px;
background: rgba(255, 255, 255, 0.65);
border-radius: 2px;
flex-shrink: 0;
}
/* ============================================
リストwrapper
============================================ */
.footer_nav-searchlist {
list-style: none;
margin: 0;
padding: 0;
background-color: #828282;
border-left: 1px solid rgba(255, 255, 255, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
/* ============================================
各アイテム（区切り線）
============================================ */
.footer_nav-searchlist-item {
background-color: #646464;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
/* ============================================
トリガーボタン行
============================================ */
.footer_nav-searchlistBtn {
display: flex;
align-items: stretch;
width: 100%;
min-height: 52px;
background-color: #828282;
cursor: pointer;
transition: background 0.2s ease;
text-decoration: none;
border: none;
padding: 0;
}
/* ホバー時 */
.footer_nav-searchlistBtn:hover {
background-color: #717171;
}
/* アコーディオンが開いている時 */
.footer_nav-searchlist-item.is-open > .footer_nav-searchlistBtn {
background-color: #999999;
}
/* ============================================
サムネイル（左端）
============================================ */
.footer_nav-searchlist-img {
width: 52px;
flex-shrink: 0;
background-color: none;
display: flex;
align-items: center;
justify-content: center;
}
.footer_nav-searchlist-img img {
width: 42px;
height: 42px;
object-fit: cover;
display: block;
}
/* ============================================
テキストエリア（中央）
============================================ */
.footer_nav-searchlist-textwrap {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
padding: 0 12px;
}
/* リンクの全状態（未訪問・訪問済み・ホバー・タップ）を白に固定 */
.footer_nav-search.category .footer_nav-searchlist-textwrap a:link,
.footer_nav-search.category .footer_nav-searchlist-textwrap a:visited,
.footer_nav-search.category .footer_nav-searchlist-textwrap a:hover,
.footer_nav-search.category .footer_nav-searchlist-textwrap a:active {
display: block;
width: 100%;
color: #fff;
text-decoration: none;
}
/* カテゴリ名テキスト */
.footer_nav-search.category .footer_nav-searchlist-text {
font-weight: 600;
color: #fff;
margin: 0;
line-height: 1.4;
letter-spacing: 0.02em;
transition: color 0.2s ease;
}
/* ホバー時のテキスト色 */
.footer_nav-search.category .footer_nav-searchlistBtn:hover .footer_nav-searchlist-text {
color: #fff;
}
/* ============================================
右端アイコンエリア（＋／－）
============================================ */
.footer_nav-searchlist-icon {
width: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: background 0.2s ease, color 0.2s ease;
}
/* ホバー・開いている時のアイコンエリア */
.footer_nav-searchlistBtn:hover .footer_nav-searchlist-icon,
.footer_nav-searchlist-item.is-open .footer_nav-searchlist-icon {
background-color: #999999;
color: #fff;
}
/* SVGアイコンのサイズ */
.icon-plus,
.icon-minus {
width: 18px;
height: 18px;
stroke: #fff;
}
/* 閉じている時：＋ 表示 / － 非表示 */
.icon-plus { display: block; }
.icon-minus { display: none; }
/* 開いている時：＋ 非表示 / － 表示 */
.footer_nav-searchlist-item.is-open .icon-plus { display: none; }
.footer_nav-searchlist-item.is-open .icon-minus { display: block; }
/* ============================================
子カテゴリリスト（アコーディオン中身）
============================================ */
.footer_nav-childlist {
list-style: none;
margin: 0;
padding: 0;
background-color: #999999;
max-height: 0;
overflow: hidden;
transition: max-height 0.32s ease;
}
/* 子カテゴリリンク */
.footer_nav-search.category .footer_nav-childlist-item a:link,
.footer_nav-search.category .footer_nav-childlist-item a:visited,
.footer_nav-search.category .footer_nav-childlist-item a:hover,
.footer_nav-search.category .footer_nav-childlist-item a:active {
display: flex;
align-items: center;
padding: 11px 16px 11px 65px;
font-weight: 500;
color: #fff;
text-decoration: none;
position: relative;
transition: background 0.2s ease, padding-left 0.2s ease;
}
/* 子カテゴリの左の横線アクセント */
.footer_nav-childlist-item a::before {
content: "";
position: absolute;
left: 53px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 1px;
background: rgba(255, 255, 255, 0.5);
transition: width 0.2s ease;
}
/* ホバー時に横線を伸ばす */
.footer_nav-childlist-item a:hover::before {
width: 10px;
}
/* ==========================================
Footer Utility Menu (共通・PCサイズスタイル)
========================================== */
/* 1. リンク（a要素）の基本スタイルと余白・カラー設定 */
.fs-p-footerUtilityMenu__list.fs-pt-menu.fs-pt-menu--lv1 > li a {
display: block;
padding: 16px;
color: #fff;
}
/* 2. リンクの後ろの擬似要素（矢印など）のカラーを白に */
.fs-p-footerUtilityMenu ul.fs-pt-menu--lv1 li.fs-pt-menu__item--lv1 .fs-pt-menu__link--lv1::after {
color: #fff;
}
/* ==========================================
Responsive Styles (画面幅 1279px 以下)
========================================== */
@media screen and (max-width: 1279px) {
/* 3. リストアイテム（li）のpaddingリセット */
.fs-p-footerUtilityMenu__list.fs-pt-menu.fs-pt-menu--lv1 > li {
padding: 0;
}
/* 4. 各メニューの区切り線（ボーダー）の設定 */
.fs-p-footerUtilityMenu__list > li:not(:first-child) a,
.fs-l-footer__utility .fs-p-footerUtilityMenu__list li:first-child a {
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
}
/* ========================================
1280px以上： PCレイアウト サイドメニュー、ドロワー
======================================== */
@media screen and (max-width: 1279px) {
body .fs-l-header__drawerOpener {
display: none;
}
body .fs-l-sideArea {
position: static;
transform: none;
transition: none;
}
}
@media screen and (min-width: 768px) {
.fs-p-logo__image {
max-height: 6rem;
padding-right: 1rem;
}
}
/* ============================================================
1280px未満（スマホ・タブレット版）
============================================================ */
@media screen and (max-width: 1279px) {
/* ハンバーガーボタン（ドロワー）の表示と位置 */
body .fs-l-header__drawerOpener,
body .fs-p-drawerButton {
display: flex;
visibility: visible;
align-items: center;
flex-direction: column;
justify-content: center;
padding-right: 10px;
}
/* サイドエリア（ドロワーの中身）の設定 */
body .fs-l-sideArea {
position: fixed !important;
top: 0;
left: 0;
width: 280px;
height: 100vh;
z-index: 99999;
background: #F4F4F4;
box-shadow: 2px 0 10px rgba(0,0,0,0.1); /* 影をつけて重なりを分かりやすく */
transform: translateX(-100%);
transition: transform 0.3s ease;
}
/* ドロワーが開いた時の動き（チェックボックス連動） */
#fs_p_ctrlDrawer:checked ~ .fs-l-sideArea,
.fs-p-ctrlDrawer:checked ~ .fs-l-sideArea {
transform: translateX(0);
}
}
/* ========================================
1280px未満 スクロール100px検知後の「Header small版」スマホタブレット版
======================================== */
@media only screen and (max-width: 1279px) {
.fs-l-header.is-sticky .header_inner {
flex-wrap: wrap;
}
.fs-l-header.is-sticky .fs-p-headerNavBar {
width: 100%;
flex: 0 0 100%;
order: 99;
/* margin-top: 8px; */
background: #f4f4f4;
/* border-bottom: 1px solid #444; */
}
.fs-l-header.is-sticky .header_logo_area {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.fs-l-header.is-sticky .header_logo_area ul:last-of-type {
margin-left: auto;
}
/*
.fs-l-header.is-sticky .header_logo_img {
width: auto;
display: flex;
flex-shrink: 0;
}
*/
.logo_descript {
display:none;
}
}
/* ========================================
770px未満 スクロール100px検知後の「Header small版」スマホ版
======================================== */
@media only screen and (max-width: 768px) {
.fs-l-header.is-sticky .header_nav_list {
padding: 0 0;
gap: 1.5rem;
}
.fs-l-header.is-sticky .fs-p-drawerButton{
padding: 0px;
}
}
@media screen and (min-width: 1279px) {
.fs-l-sideArea + .fs-l-pageMain, .fs-l-pageMain + .fs-l-sideArea {
flex: 1;
max-width:100%;
}
}
/* ========================================
navigation スマホ/タブレット版 (max-width: 1280px)
======================================== */
@media screen and (max-width: 1279px) {
.fs-p-headerNavBar {
display: flex;
flex-direction: column;
padding-bottom: 0px;
}
.fs-p-headerNavigation__search .fs-p-searchForm {
order: 1;
}
.fs-p-headerNavigation {
max-width: 100%;
order: 2;
margin: 0;
justify-content: space-around;
}
.fs-p-headerNavigation__listItem {
justify-content: center;
}
/*ロゴ*/
.fs-p-logo__image {
width: 70%;
}
/*ロゴ横のテキスト非表示 */
.logo_descript {
display:none;
padding-top: 0;
padding-bottom: 0;
}
.header_logo_area{
justify-content: space-between;
padding-bottom: 0;
}
/* トップバーを非表示
.header_topbar {
display: none;
}
*/
}
/* ご利用ガイド表示 */
#header-nav-item {
display: block !important;
}
/* --- スマホ：A B C を表示、D を非表示 --- */
.fs-p-headerNavigation__list > li:nth-child(4) {
display: none;
}
/* --- PC：B C D を表示、A を非表示 --- */
@media screen and (min-width: 1279px) {
.fs-p-headerNavigation__list > li:first-child {
display: none;
}
.fs-p-headerNavigation__list > li:nth-child(4) {
display: block; /* スマホで消したDを復活 */
}
.fs-p-headerNavigation {
max-width: 100%;
order: 2;
margin: 0;
}
.fs-p-headerNavigation__listItem {
justify-content: center;
}
}
/* 1279px以下の時、特定のページでドロワーボタンを隠す */
@media screen and (max-width: 1279px) {
/* 会員登録、ログイン、マイページトップ、お気に入り、注文履歴のIDを指定 */
#fs_Login .fs-l-header__drawerOpener,
#fs_Wishlist .fs-l-header__drawerOpener,
#fs_MyAccountSettings .fs-l-header__drawerOpener,
#fs_Register .fs-l-header__drawerOpener,
#fs_CheckoutV2 .fs-l-header__drawerOpener {
display: none !important;
}
}
/* ========================================
カテゴリセクション スマホ版 (max-width: 768px)
======================================== */
@media screen and (max-width: 768px) {
.category-section {
display:none;
}
}
/* ===================================================
1. 【PCサイズ専用】 (1280px以上)
=================================================== */
@media screen and (min-width: 1279px) {
.fs-c-productListCarousel__list__item.fs-c-productListItem {
max-width: 200px;
min-width: 200px;
}
}
/* ===================================================
2. 【タブレット〜中間サイズ】 (768pxから600pxの間だけ)
=================================================== */
@media screen and (max-width: 768px) and (min-width: 600px) {
.fs-c-productListCarousel__list__item.fs-c-productListItem {
flex-basis: auto !important;
max-width: 160px !important;
min-width: 160px !important;
min-height: 324px;
}
}
/* ===================================================
3. 【スマホサイズ】 (599px以下 〜 小さなスマホまで)
★システムの「600px以上」の対応
=================================================== */
@media screen and (max-width: 599px) {
.fs-c-productListCarousel__list__item.fs-c-productListItem {
max-width: 140px;
min-width: 140px;
min-height: 310px;
}
}
@media screen and (max-width: 480px) {
.fs-c-productListCarousel__list__item.fs-c-productListItem {
max-width: 132px;
min-width: 132px;
min-height: 258px;
}
}
/* ========================================
PC版商品グループレイアウト
======================================== */
/* 商品グループ、カテゴリ表示数パーツ */
.fs-c-subgroup .fs-c-listControl {
display:none;
}
/* 商品グループ、カテゴリリンク */
.fs-c-subgroupList__link {
background: rgba(136, 175, 187, 0.1);
border: none;
padding : 8px 20px;
}
.fs-c-subgroup {
margin-bottom: 40px;
}
.fs-c-productListItem {
display: flex;
flex-direction: column;
opacity: 1.0;
transition: opacity 0.3s ease;
}
/* formタグが直接の子要素の場合 */
.fs-c-productListItem > form {
display: flex;
flex-direction: column;
flex: 1;
}
.fs-c-productListItem__prices.fs-c-productPrices {
margin-top: auto;
}
.fs-c-productName__copy {
order: 2;
color: #7c8790;
font-size: 1.2rem;
}
/* 商品詳細ページ */
/* キャッチコピーの位置タイトルと入れ替え*/
/* 商品一覧ページ */
.fs-c-productNameHeading,
.fs-c-productName a {
display: flex;
flex-direction: column;
}
.fs-c-productNameHeading__copy {
order: 2;
color: #444;
align-self: flex-start;
border: 1px solid #cccccc;
padding: 4px 8px;
font-size: 1.2rem;
}
.fs-c-productNameHeading__name {
order: 1;
margin-bottom: 2rem;
font-size: 1.6rem;
}
/* タブレット〜1279px：5列 */
@media (max-width: 1279px) {
.fs-c-productList__list {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
}
/* タブレット縦向き：4列 */
@media (max-width: 1024px) {
.fs-c-productList__list {
grid-template-columns: repeat(4, 1fr);
}
}
/* スマホ：3列 */
@media (max-width: 768px) {
.fs-c-productList__list {
grid-template-columns: repeat(3, 1fr);
}
}
/* スマホ：2列 */
@media (max-width: 480px) {
.fs-c-productList__list {
grid-template-columns: repeat(2, 1fr);
}
/* 商品番号*/
.fs-c-productName__copy {
font-size: 1rem;
}
}
/* ========================================
商品グループ（一覧）
======================================== */
@media (max-width: 1279px) {
.fs-c-productListItem .fs-c-productName__name {
font-size: 1.2rem;
}
}
@media (max-width: 768px) {
/* 商品グループ（一覧）の商品名と金額 */
.fs-c-productPrice__main__price.fs-c-price .fs-c-price__value {
font-size: 1.4rem;
}
}
/* ========================================
商品詳細ページ
======================================== */
.fs-c-cartTableContainer {
border: none;
padding: 0;
}
#returnexchange {
scroll-margin-top: 300px;
}
.fs-c-productSelection__name.shippingnotice {
display:block;
margin-bottom:2rem;
}
/* PC・タブレット：481px以上 */
@media (min-width: 481px) {
.fs-l-product4 .fs-l-productLayout {
display: flex;
flex-wrap: wrap;
grid-template-columns: none;
grid-gap: 0;
}
.fs-l-product4 .fs-l-productLayout .fs-l-productLayout__item--1,
.fs-l-product4 .fs-l-productLayout .fs-l-productLayout__item--2 {
width: 50%;
flex: 0 0 50%;
box-sizing: border-box;
}
.fs-l-product4 .fs-l-productLayout .fs-l-productLayout__item--3 {
width: 100%;
flex: 0 0 100%;
}
}
@media (min-width: 481px) and (max-width: 959px) {
.fs-l-product4 .fs-l-productLayout .fs-l-productLayout__item--3 {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important; /* ← gridのmax-width対策 */
grid-column: 1 / -1 !important; /* ← grid使用時の対策 */
box-sizing: border-box;
}
}
/* --- PC（960px以上）のときだけ 2列(50%) にする --- */
@media (min-width: 960px) {
.fs-l-product4 .fs-l-productLayout .fs-l-productLayout__item--1,
.fs-l-product4 .fs-l-productLayout .fs-l-productLayout__item--2 {
width: 50%;
flex: 0 0 50%;
}
}
/* スマホ：480px以下 */
@media (max-width: 480px) {
.fs-l-product4 .fs-l-productLayout {
display: flex;
flex-wrap: wrap;
grid-template-columns: unset;
grid-gap: 0;
}
.fs-l-product4 .fs-l-productLayout .fs-l-productLayout__item--1,
.fs-l-product4 .fs-l-productLayout .fs-l-productLayout__item--2,
.fs-l-product4 .fs-l-productLayout .fs-l-productLayout__item--3 {
width: 100%;
flex: 0 0 100%;
box-sizing: border-box;
}
}
/*お気に入り*/
/* タブレット（768px以下） */
@media screen and (max-width: 768px) {
.fs-c-productQuantityAndWishlist {
display: block;
}
}
/* スマホ（480px以下） */
@media screen and (max-width: 480px) {
.fs-c-productQuantityAndWishlist {
margin-top: 15px;
}
.fs-c-productQuantityAndWishlist__quantity {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: none;
position: relative;
}
.fs-c-returnedSpecialContract {
font-size: 1.2rem;
padding-top:2rem;
}
}
/* ========================================
ショッピングカート
======================================== */
/* 商品の金額表示箇所 */
.fs-c-cartPayment,
.fs-c-payWithAmazon {
margin-top: 6rem;
font-size: 1.4rem;
}
.fs-p-announcement__title {
font-size: 1.6rem;
font-weight: bold;
padding-bottom: 1rem;
}
@media screen and (max-width: 600px) {
.fs-c-cartTable__dataCell--subtotal,
.fs-c-cartTable__dataCell--unitPrice {
grid-column: 2/4; /* 1/3 → 2/3 に変更（右カラムのみ） */
grid-row: 3;
display: flex;
justify-content: flex-end;
align-items: baseline;
font-size: 1.8rem;
}
/* 表の最後のライン非表示 */
.fs-c-cartTable__row:last-child {
border-bottom: none;
}
/* 数量・小計 ポイント */
.fs-c-cartTable__dataCell--point::before, .fs-c-cartTable__dataCell--quantity::before, .fs-c-cartTable__dataCell--subtotal::before {
font-size:1.0rem;
}
}
/* =======================================
TOP headline
======================================== */
.topdatelist {
padding: 16px 0;
margin-bottom: 24px;
}
.section-header__inner {
display: flex;
align-items: center;
gap: 24px;
}
.fs-p-heading--lv2-top {
display: flex;
align-items: center;
gap: 0;
font-size: 2.4rem;
font-weight: bold;
color: #333;
margin: 0;
font-family: serif;
letter-spacing: 0.12em;
}
/* ヘッドラインアイコン */
.section-header__icon {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
width: 42px;
height: 58px;
margin-right: 2rem;
}
.section-header__icon span {
background-color: #333;
border-radius: 2px;
}
@media (max-width: 480px) {
.section-header__icon{
gap: 3px;
width: 33.6px;
height: 46.4px;
}
.topdatelist {
margin-bottom: 0;
}
.fs-l-main {
margin: 0 auto;
}
}
/* =======================================
Newsエリア
======================================== */
.news-wrapper {
max-width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.list_news-wrapper {
background: rgba(219, 219, 219, 0.4);
border-radius: 60px;
border: 0.5px solid var(--color-border-tertiary);
overflow: hidden;
padding: 4rem;
}
.list_news-footer {
padding:0;
}
.topdatelist {
flex-shrink: 0;
}
/* スクロールエリア */
.fs-p-dateList {
max-height: 200px;
overflow-y: auto;
border-radius: var(--border-radius-md);
border: 0.5px solid var(--color-border-tertiary);
scrollbar-width: thin;
scrollbar-color: var(--color-border-secondary) transparent;
}
.fs-p-dateList::-webkit-scrollbar {
width: 4px;
}
.fs-p-dateList::-webkit-scrollbar-thumb {
background: var(--color-border-secondary);
border-radius: 2px;
}
/* リストのリセット（fs-pt-list--noMarker） */
.fs-pt-list {
list-style: none;
}
/* 各行 */
.fs-pt-list__item {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 24px;
border-bottom: 0.5px solid var(--color-border-tertiary);
font-size: 14px;
color: var(--color-text-primary);
line-height: 1.5;
}
.fs-pt-list__item:last-child {
border-bottom: none;
}
/* リンクあり行 */
.fs-pt-list__link {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
color: var(--color-text-primary);
text-decoration: none;
transition: color 0.15s;
}
.fs-pt-list__link:hover {
color: #4a8fa0;
}
/* 日付 */
.fs-pt-list__item time,
.fs-pt-list__link time {
font-size: 13px;
color: #5b9aad;
white-space: nowrap;
min-width: 80px;
font-weight: 400;
}
.news-tag {
display: inline-block;
font-size: 11px;
font-weight: 500;
padding: 3px 10px;
border-radius: 3px;
background: #5f9ea8;
color: #dff0f4;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: 0.03em;
}
.news-tag.tag-info {
background: #4a8fa0;
color: #d8eff5;
}
.news-tag.tag-important {
background: #5a8fa8;
color: #daeef5;
}
.news-tag.tag-news {
background: #7a9e6a;
color: #dff0d8;
}
.news-tag.tag-notice {
background: #8a7ea0;
color: #e8e0f5;
}
.news-title {
font-size: 14px;
color: var(--color-text-primary);
font-weight: 400;
flex: 1;
line-height: 1.5;
}
/* =======================================
Newsエリア レスポンシブ
======================================== */
@media (max-width: 1279px) {
.news-wrapper {
width: 100%;
height: auto;
}
}
@media (max-width: 768px) {
.news-wrapper {
padding: 0;
}
.list_news-wrapper {
border-radius: 20px;
padding: 20px;
}
.fs-p-dateList {
max-height: 240px;
}
.fs-pt-list__item {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 12px 16px;
}
.fs-pt-list__link {
display: block;
}
.fs-pt-list__item time,
.fs-pt-list__link time {
display: inline-block;
min-width: auto;
}
.fs-p-dateList > li time:first-child {
padding-right: 0;
padding-left: 0;
padding-bottom :1rem;
}
.news-tag {
display: block;
width: fit-content;
margin-top: 2px;
}
.news-title {
display: block;
margin-top: 2px;
}
}
@media (max-width: 480px) {
.list_news-wrapper {
border-radius: 12px;
padding: 16px;
}
.fs-pt-list__item {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 12px;
}
.fs-pt-list__link {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.fs-pt-list__item time,
.fs-pt-list__link time {
font-size: 12px;
}
.news-tag {
font-size: 10px;
padding: 2px 8px;
}
.news-title {
font-size: 13px;
}
.fs-p-dateList {
padding: 12px;
}
}
/* =======================================
Newsエリア 個別ページバナーサイズ
======================================== */
/* スマホ・タブレット（デフォルト）は width: 100% */
.news_banner_image {
width: 100%;
height: auto;
}
/* PCサイズ（画面幅が768px以上）の時は width: 80% にする */
@media (min-width: 768px) {
.news_banner_image {
width: 80%;
}
}
/* ==============================================
FEATURED ITEMS
============================================== */
.toparticle-wrapper {
position: relative;
width: 100%;
margin: 4rem 0;
}
.toparticle-bg-layer {
position: absolute;
top: 0;
/* 中央配置の設定 */
left: 50%;
transform: translateX(-50%);
/* 任意の幅を指定（例: 1200px や 90% など） */
width: 1234px;
max-width: 100%; /* 画面幅が狭い時ははみ出さないように */
height: 100%;
z-index: 1;
pointer-events: none;
}
/* 山の画像部分 */
.bg-mountain {
width: 100%;
height: 128px;
background-image: url(https://yoshiyo.itembox.cloud/item/panel00_image.png?d=20260826125930);
background-repeat: no-repeat;
background-position: center top;
background-size: 532px 129px;
}
/* 下の塗りつぶし背景 */
.bg-body {
width: 100%;
height: calc(100% - 128px); /* 山の高さに合わせて調整 */
background-color: rgba(136, 175, 187, 0.4);
/* 山に食い込ませる設定 */
margin-top: 0;
}
/* コンテンツ本体のレイヤー */
.toparticle-inner {
position: relative;
z-index: 2; /* 背景より前面に出す */
width: 100%;
max-width: 1144px;
margin: 0 auto;
/* アイコンの位置を調整するための余白 */
padding-top: 80px;
padding-bottom: 16px; /* 一覧へのボタンを非表示 */
padding-left: 2rem;
padding-right: 2rem;
}
.section-header__inner.toparticle {
display: block;
text-align: center;
padding: 0 0 28px;
}
.section-header__inner.toparticle .section-header__icon {
display: block;
margin: 0 auto;
margin-bottom: 12px;
}
.fs-p-heading--lv2-top.heading-main {
display: block;
font-size: 24px;
font-weight: bold;
letter-spacing: 0.12em;
color: var(--fi-text);
margin: 0 0 6px;
line-height: 1.2;
}
.fs-p-heading--lv3.fi-heading-sub {
letter-spacing: 0.08em;
margin: 0 0 16px;
font-size: 14px;
color: #88AFBB;
font-weight: bold;
}
/* ============================================================
おすすめ記事続きめを見るボタン
============================================================ */
.more-wrap {
display: flex;
justify-content: center;
padding: 4rem;
}
.more-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
padding: 1.2rem 3rem;
font-size: 1.2rem;
font-weight: bold;
color: #444;
text-decoration: none;
border: none;
background: #F4F4F4;
cursor: pointer;
position: relative;
transition: background 0.3s ease, color 0.3s ease;
min-width: 300px;
text-align: center;
}
.more-btn__arrow {
display: block;
position: relative;
width: 80%;
height: 8px;
}
/* 横ライン */
.more-btn__arrow::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background: currentColor;
transform: translateY(-50%);
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 斜めライン（上側のみ） */
.more-btn__arrow::after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 12px;
height: 1px;
background: currentColor;
transform-origin: right center;
transform: translateY(-50%) skewY(45deg);
transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* hover: 色反転 */
.more-btn:hover {
background: #88AFBB;
color: #fff;
}
/* hover: 矢印が右へ伸びる */
.more-btn:hover .more-btn__arrow::before {
width: calc(100% + 24px);
}
.more-btn:hover .more-btn__arrow::after {
right: -24px;
}
/* ============================================================
セクションヘッダー
============================================================ */
.section-header__inner.toparticle {
text-align: center;
}
.heading-main {
font-size: 28px;
font-weight: bold;
letter-spacing: 0.1em;
margin: 0 0 8px;
}
.fs-p-heading--lv3.heading-sub {
letter-spacing: 0.08em;
font-size: 14px;
color: #88AFBB;
margin: 0;
font-weight: bold;
}
/* ============================================================
繰り返しブロック群
============================================================ */
.blocks {
flex: 1;
}
/* ============================================================
グリッド：上段2カラム（大）
============================================================ */
.grid--top {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 8px;
}
/* ============================================================
FEATURED ITEMS 下段：全幅1カード（東京ショールーム）
============================================================ */
.grid--wide {
display: grid;
grid-template-columns: 1fr;
margin-bottom: 8px;
}
.card--wide {
background: #fff;
overflow: hidden;
}
.card--wide__link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.card--wide__link:hover .card--wide__img {
transform: scale(1.01);
}
/* 上段：写真＋カラー装飾を横並び */
.card--wide__toprow {
display: flex;
align-items: stretch;
}
.card--wide__imgwrap {
flex: 0 0 45%;
overflow: hidden;
padding: 8px;
}
.card--wide__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.card--wide__deco {
flex: 1;
overflow: hidden;
}
.card--wide__decoImg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── レスポンシブ ── /*
@media (max-width: 768px) {
.card--wide__toprow {
flex-direction: column;
}
.card--wide__imgwrap,
.card--wide__deco {
/* aspect-ratio: 16 / 9;/*
}
}
/* ============================================================
グリッド：下段4カラム（小）
============================================================ */
.grid--bottom {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 8px;
}
/* ============================================================
カード共通
============================================================ */
.card {
background: #fff;
overflow: hidden;
}
.card__link {
display: block;
text-decoration: none;
color: inherit;
}
.card__link:hover .card__img {
transform: scale(1.02);
}
.card__img-wrap {
overflow: hidden;
width: 100%;
padding: 8px;
}
.card__img {
display: block;
transition: transform 0.3s ease;
}
.card__body {
padding: 12px;
}
.card__cat {
display: block;
font-size: 11px;
letter-spacing: 0.08em;
color: #999;
margin-bottom: 6px;
}
.card__title {
display: flex;
align-items: flex-start;
gap: 5px;
font-size: 1.2rem;
line-height: 1.55;
color: var(--fi-text);
margin: 0;
font-weight: bold;
/* 三点リーダー*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 表示したい行数*/
overflow: hidden;
}
.card__sub {
font-size: 1.2rem;
}
.card__title-icon {
flex-shrink: 0;
display: inline-block;
width: 12px;
height: 12px;
background: #888;
margin-top: 3px;;
}
/* ============================================================
カード：大（上段）
============================================================ */
.card--large .card__img-wrap {
aspect-ratio: 4 / 3;
}
/* ============================================================
カード：小（下段）
============================================================ */
.card--small .card__img-wrap {
aspect-ratio: 4 / 3;
}
.card--small .card__title {
font-size: 1.2rem;
}
.card--small {
width: 100%;
}
/* ============================================================
レスポンシブ
============================================================ */
@media (max-width: 768px) {
.toparticle-wrapper {
padding: 2.4%;
}
.section-header__inner.toparticle {
margin-bottom: 10px;
}
/* 上段：1列に */
.grid--top {
grid-template-columns: 1fr;
}
/* 下段：2列に */
.grid--bottom {
grid-template-columns: repeat(2, 1fr);
}
.fs-p-heading--lv2-top.heading-main {
display: block;
font-size: 2.4rem;
}
/*商品ご紹介・特集のコンテンツ幅 */
.toparticle-inner {
padding-top: 70px;
padding-left: 0.8rem;
padding-right: 0.8rem;
padding-bottom: 0rem;
}
}
@media (max-width: 480px) {
.fs-p-heading--lv2-top,
.fs-p-heading--lv2-top.heading-main {
font-size: 1.8rem;
letter-spacing: 0em;
}
.top_itemarticle {
padding-bottom: 32px;
}
/* 下段：2列維持 */
.grid--bottom {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.card__body {
padding: 8px 8px 10px;
}
.card--small .card__title {
font-size: 1.2rem;
}
.more-btn {
padding: 10px 28px;
font-size: 12px;
}
.section-header__inner.toparticle {
margin-bottom: 0px;
}
}
.step-list { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 2rem; }
.step-item { display: flex; align-items: center; gap: 12px; }
.step-badge {
flex-shrink: 0;
width: 56px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.step-list-wrap {
width: 96%;
margin: 0 auto;
}
.step-circle {
position: relative;
width: 56px;
height: 56px;
background: #c06a88;
color: #fff;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1.1;
}
.step-circle::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #c06a88;
}
.step-label { font-size: 9px; font-weight: 500; letter-spacing: 0.06em; opacity: 0.85; }
.step-num { font-size: 22px; font-weight: 500; }
.step-arrow-wrap {
flex: 1;
position: relative;
min-height: 52px;
display: flex;
align-items: center;
}
.step-arrow-wrap .step-body {
position: absolute;
inset: 0;
background-color: rgba(228, 218, 218, 0.8);
}
.step-arrow-wrap .step-body::before {
content: '';
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid var(--color-background-secondary);
}
.step-arrow-wrap .step-text-wrap {
position: relative;
z-index: 1;
padding: 12px 20px 12px 20px;
font-size: 13px;
color: var(--color-text-primary);
line-height: 1.4;
}
@media (max-width: 480px) {
.step-item { flex-direction: column; gap: 8px; align-items: flex-start; }
.step-circle { width: 44px; height: 44px; }
.step-num { font-size: 18px; }
.step-arrow-wrap { width: 100%; min-height: 44px; }
.step-arrow-wrap .step-text-wrap { padding: 10px 16px; }
}
/* ========================================
共通スタイル（ベース）
======================================== */
.c-search-input-group {
flex: 1;
min-width: 0;
}
/* 詳細検索ブロック */
.fs-p-productSearch {
flex-shrink: 0;
position: relative;
border-bottom: none;
padding: 0;
}
/* 詳細検索切り替えラベル（ボタン外観） */
.fs-p-productSearch__formSwitch {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
border: 1px solid #88AFBB;
border-radius: 50px;
background: #fff;
color: #444;
cursor: pointer;
white-space: nowrap;
position: relative;
transition: all 0.2s;
padding: 8px 16px;
}
.fs-p-productSearch__formSwitch:hover {
background-color: #f8f8f8;
}
/* 商品一覧ページの詳細検索ボタン 幅をautoに */
.fs-l-pageMain .fs-p-productSearch__formSwitch {
width: fit-content;
}
/* 詳細検索パネル（共通設定） */
.fs-p-productSearch__search {
background: #fff;
box-sizing: border-box;
}
/* フォーム内パーツの文字色 */
.fs-p-productSearch__search .fs-c-inputTable__headerCell label,
.fs-p-productSearch__search .fs-c-inputTable__headerCell,
.fs-p-productSearch__search .fs-c-checkbox__labelText,
.fs-p-productSearch__search .fs-c-radio__radioLabelText {
color: #333333 !important;
}
/* ========================================
PCサイズ（1024px以上）：ドロップダウン
======================================== */
@media screen and (min-width: 1024px) {
.fs-p-productSearch__search {
display: none;
/* position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 1000;
border: 1px solid #ddd;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
padding: 20px;
width: 800px; */
}
/* チェックボックスによる開閉（PC） */
#fs_p__ctrlSeachForm:checked ~ .fs-p-productSearch__search {
display: block;
position: fixed;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
z-index:1000;
}
/* ヘッダー固定時の制御 */
.fs-l-header.is-sticky .fs-p-productSearch__search {
display: none;
}
}
/* ========================================
スマホ・タブレットサイズ（1023px以下）：アコーディオン
======================================== */
@media screen and (max-width: 1023px) {
.c-search-flex-container {
flex-wrap: wrap; /* ボタンが入り切らない場合に折り返し */
}
.fs-p-productSearch {
/* flex: 0 0 100%;/*
order: 3; /* 検索窓・検索ボタンの下に配置 /*
margin-top: 8px;
position: static; /* 画面幅いっぱいにするため解除 */
}
/* パネルのアコーディオン化 */
/* パネルをfixedで画面上部に固定 */
.fs-p-productSearch__search {
display: none;
position: fixed !important;
/* top: 110px; ヘッダーの高さに合わせて調整 */
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border-top: 1px solid #ddd;
background: #fff;
padding: 20px 16px;
box-sizing: border-box;
z-index: 9998 !important; /* ヘッダーより手前 */
}
/* チェックボックス、またはJSのクラス付与で表示 */
#fs_p__ctrlSeachForm:checked ~ .fs-p-productSearch__search,
.fs-p-productSearch__search.is-open {
display: block;
}
/* ボタンサイズをスマホ向けに調整 */
.fs-p-productSearch__formSwitch {
padding: 0 12px;
font-size: 13px;
}
}
/* ========================================
ご注文完了ページ CSS
======================================== */
/* --- 中央表示 --- */
.fs-c-checkoutSuccess.fs-c-subSection {
margin :0 auto;
max-width: 100%;
}
/* --- ラッパー全体 --- */
.fs-c-checkoutSuccess__wrapper {
max-width: 800px;
margin: 0 auto;
padding: 48px 24px 64px;
text-align: center;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
color: #333;
}
/* --- お客様名 --- */
.fs-c-checkoutSuccess__customerName {
font-size: 14px;
color: #444;
margin: 0 0 12px;
letter-spacing: 0.05em;
}
/* --- メインタイトル「ご注文ありがとうございます。」 --- */
.fs-c-checkoutSuccess__title {
font-size: 2.2rem;
font-weight: 600;
color: #c8505a;
margin: 0 0 32px;
letter-spacing: 0.04em;
}
/* --- アイコンエリア --- */
.fs-c-checkoutSuccess__icon {
margin: 0 auto 32px;
display: flex;
justify-content: center;
align-items: center;
}
.fs-c-checkoutSuccess__icon img {
width: 72px;
height: auto;
display: block;
margin: 0 auto; /* 中央揃えにする場合 */
}
/* --- 注文番号ブロック --- */
.fs-c-checkoutSuccess__orderNumber {
display: inline-block;
margin: 0 auto 32px;
padding: 16px 40px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fafafa;
}
.fs-c-checkoutSuccess__orderNumber__label {
font-size: 1.2rem;
color: #888;
margin: 0 0 6px;
letter-spacing: 0.06em;
}
.fs-c-checkoutSuccess__orderNumber__value {
font-size: 1.4rem;
font-weight: bold;
color: #444;
letter-spacing: 0.08em;
margin: 0;
}
/* --- メッセージ本文 --- */
.fs-c-checkoutSuccess__message {
margin: 0 auto 40px;
padding: 24px 32px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
max-width: 480px;
}
.fs-c-checkoutSuccess__message p {
font-size: 1.4rem;
line-height: 2;
color: #444;
margin: 0;
}
.fs-c-checkoutSuccess__code {
font-weight: 600;
color: #333;
}
/* --- お届けまでのご案内セクション --- */
.fs-c-checkoutSuccess__wrapper .fs-p-announcement .fs-p-announcement {
margin: 0 auto 48px;
max-width: 480px;
text-align: left;
}
.fs-c-checkoutSuccess__wrapper .fs-p-announcement .fs-p-announcement__title {
font-size: 1.4rem;
font-weight: 600;
color: #444;
text-align: center;
margin: 0 0 20px;
padding-bottom: 12px;
letter-spacing: 0.04em;
}
/* --- リスト --- */
.fs-c-list {
list-style: none!important;
padding: 0;
margin: 0;
}
.fs-c-list li {
line-height: 1.9;
color: #444;
padding: 8px 0 8px 8px;
border-bottom: 1px dashed #b2d6cd;
position: relative;
text-align: left;
margin-left: 0px;
}
/*
.fs-c-list li:last-child {
border-bottom: none;
}
*/
/* ========================================
リストの前にオリジナルの記号を入れる
======================================== */
.fs-c-list li::before,
.fs-c-localNavigation__list li::before {
content: "●";
position: absolute;
left: 0;
color: #666;
font-size: 0.8rem;
top: 1.5em; /* 記号と文字の間の隙間 */
border: none;
}
/* --- サブセクション共通 --- */
.fs-c-subSection__title {
/* .fs-c-checkoutSuccess__title と統合 */
}
.fs-c-subSection__message {
/* .fs-c-checkoutSuccess__message と統合 */
}
/* ===== レスポンシブ：スマホ（～480px） ===== */
@media (max-width: 480px) {
.fs-c-checkoutSuccess__wrapper {
padding: 0 8px 24px;
}
.fs-c-checkoutSuccess__message {
padding: 12px 0;
}
.fs-c-checkoutSuccess__message p {
font-size: 1.2rem;
}
.fs-c-checkoutSuccess__orderNumber {
margin: 0 auto 16px;
}
.fs-c-checkoutSuccess__title {
font-size: 1.6rem;
padding: 4px 40px;
margin: 0 0 10px;
}
.fs-c-checkoutSuccess__icon {
margin: 0 auto 8px;
}
}
/* ============================================
サイトマップページ専用スタイル
対象: .fs-c-documentArticle.sitemap 配下のみ
============================================ */
/* ------------------------------
既存CSSのリセット
（list-style-type: decimal / margin-left / li::before の上書き）
------------------------------ */
.fs-c-documentArticle.sitemap .fs-c-list {
list-style: none;
margin-left: 0;
padding-left: 0;
margin-bottom: 0;
}
/* 既存の ● 擬似要素を打ち消す */
.fs-c-documentArticle.sitemap .fs-c-list li::before {
content: none;
}
/* ------------------------------
リンクのスタイル
左端に緑のボーダーラインを表示
------------------------------ */
.fs-c-documentArticle.sitemap .fs-c-list > li > a {
display: block;
padding: 6px 8px 6px 14px;
border-left: 3px solid #2d6e75;
color: #333;
text-decoration: none;
line-height: 1.6;
}
.fs-c-documentArticle.sitemap .fs-c-list > li > a:hover {
color: #2d6e75;
}
/* ------------------------------
サブリスト（カテゴリ階層用）
------------------------------ */
.fs-c-documentArticle.sitemap .fs-c-list .fs-c-list {
margin: 0 0 4px 20px;
}
.fs-c-documentArticle.sitemap .fs-c-list .fs-c-list > li:first-child {
border-top: none;
}
/* 子階層は薄い緑のボーダーで区別 */
.fs-c-documentArticle.sitemap .fs-c-list .fs-c-list > li > a {
border-left: 3px solid #a8cbc8;
padding-left: 12px;
}
/* =====================================================
タグバッジ共通
===================================================== */
.tag-badge {
display: inline-block;
padding: 5px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
margin: 2px;
color: #fff;
}
.tag-badge.tag-text {
color: #666;
}
/* =====================================================
Responsive: tablet
max-width: 768px
===================================================== */
@media (max-width: 768px) {
/* バッジを少し小さく */
.tag-badge {
font-size: 11px;
padding: 4px 10px;
}
}
/* =====================================================
Responsive: mobile
max-width: 480px
===================================================== */
@media (max-width: 480px) {
.instruction-grid {
padding: 1rem 0;
}
/* バッジをさらに小さく */
.tag-badge {
font-size: 11px;
padding: 3px 9px;
}
}
/* ========================================
ご利用ガイド・フリーページ
======================================== */
/* ================================================
yoshiyo.shop トンマナ準拠 CSS
カラーパレット:
メインティール: #2d6e75
ライトティール: #4a8f97
テキスト濃: #333333
テキスト中: #555555
テキスト薄: #777777
ボーダー: #d0d0d0
背景ライト: #f5f5f5
背景白: #ffffff
================================================ */
/* ---------- コンテナ ---------- */
.fs-c-documentArticle {
max-width: 100%;
margin: 0 auto;
padding: 10px 30px 30px;
}
/* ---------- セクション ---------- */
.fs-c-documentArticle__section {
margin-bottom: 6rem;
}
/* ---------- サブ見出し（ダークティール帯：重要セクション） ---------- */
.fs-c-subHeading {
font-size: 14px;
font-weight: 700;
color: #ffffff;
background-color: #2d6e75;
padding: 10px 16px;
margin-bottom: 20px;
margin-top: 0;
letter-spacing: 0.05em;
border: none;
}
/* ---------- サブ見出し（左ボーダー線：一般セクション） ---------- */
.fs-c-subHeading--small {
font-size: 15px;
font-weight: 700;
color: #333333;
border-left: 4px solid #2d6e75;
border-bottom: 1px solid #d0d0d0;
padding: 4px 0 10px 12px;
margin-top: 30px;
margin-bottom: 15px;
background-color: transparent;
}
.fs-c-documentArticle__heading--small {
margin-bottom: 15px;
font-weight: 700;
}
/* ---------- 本文テキスト ---------- */
.fs-c-text {
line-height: 1.9;
margin-bottom: 1.4rem;
}
/* ---------- リスト ---------- */
.fs-c-list {
list-style-type: decimal;
margin-left: 20px;
margin-bottom: 20px;
padding-left: 5px;
list-style: none!important;
}
/* ---------- ボタン ---------- */
.fs-c-buttonContainer {
text-align: center;
}
.fs-c-button {
display: inline-block;
background-color: #2d6e75;
color: #ffffff;
padding: 10px 32px;
text-decoration: none;
font-weight: 700;
font-size: 14px;
border-radius: 2px;
transition: background-color 0.2s ease, opacity 0.2s ease;
letter-spacing: 0.05em;
border: none;
cursor: pointer;
}
.fs-c-button:hover {
background-color: #235960;
color: #ffffff;
text-decoration: none;
opacity: 0.9;
}
/* ---------- テーブル ---------- */
.fs-c-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 25px;
margin-top: 15px;
}
.fs-c-table.guid_payment {
background-color: none;
}
.fs-c-table th,
.fs-c-table td {
border: 1px solid #d0d0d0;
padding: 10px 15px;
vertical-align: middle;
line-height: 1.7;
}
.fs-c-table th {
background-color: #f5f5f5;
font-weight: 700;
text-align: left;
white-space: nowrap;
width: 160px;
}
.fs-c-table td {
background-color: #ffffff;
}
/* ---------- お知らせ・注意ボックス ---------- */
.fs-c-notice {
background-color: #f5f3ee;
border: 1px solid #ccc;
padding: 1rem 1.25rem;
margin: 20px auto;
line-height: 1.9;
width: calc(100% - 50px);
}
.fs-c-notice--danger {
background-color: rgba(228, 218, 218, 0.4);
border-left: 4px solid #c0392b;
padding: 16px 20px;
margin: 20px 0;
font-size: 14px;
line-height: 1.9;
}
.fs-c-notice--danger .fs-c-documentArticle__heading--small {
color: #c0392b;
}
.fs-c-notice--info {
background-color: rgba(136, 175, 187, 0.1);
padding: 16px 20px;
margin: 20px 0;
line-height: 1.9;
}
/* ---------- 強調テキスト ---------- */
.fs-u-text-highlight {
color: #c0392b;
font-weight: 700;
}
.fs-u-text-bold {
font-weight: 700;
}
/* ---------- 注記・補足 ---------- */
.fs-c-note {
font-size: 12px;
color: #777777;
margin-top: 6px;
line-height: 1.7;
}
/* ---------- ステップフロー ---------- */
.fs-c-stepList {
list-style: none;
padding: 0;
margin: 20px 0;
}
.fs-c-stepList__item {
display: flex;
align-items: flex-start;
background: #f5f3ee;
padding: 18px 20px;
border: 1px solid #d0d0d0;
position: relative;
width: calc(100% - 50px);
margin: 0 auto;
margin-bottom: 2.2rem;
}
.fs-c-stepList__item::after {
content: "▼";
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
color: #2d6e75;
font-size: 12px;
}
.fs-c-stepList__item:last-child::after {
display: none;
}
.fs-c-stepList__number {
background-color: #2d6e75;
color: #ffffff;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
margin-right: 18px;
flex-shrink: 0;
}
.fs-c-stepList__content {
flex: 1;
}
.fs-c-stepList__title {
font-weight: 700;
margin-bottom: 4px;
margin-top: 0;
}
.payment-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 10px;
}
/* ---------- アイコン ---------- */
.payment-logos img {
display: block;
width: 60px;
object-fit: contain;
border: 1px solid #e0e0e0;
border-radius: 5px;
}
/* ---------- リンク ---------- */
#guid-shipping,
#guid-payment {
scroll-margin-top: 300px;
}
/* ---------- レスポンシブ ---------- */
@media (max-width: 768px) {
.fs-c-documentArticle {
padding: 20px 15px 40px;
}
.fs-c-heading {
font-size: 1.4rem;
font-weight: bold;
border-bottom: 1px solid #b2b2b2;
padding-bottom: 8px;
}
.heading-sub {
font-size: 1.6rem;
}
.fs-c-table th,
.fs-c-table td {
display: block;
width: 100%;
}
.fs-c-table th {
border-bottom: none;
background-color: #f5f5f5;
white-space: normal;
width: auto;
}
.fs-c-stepList__item {
flex-direction: column;
width: 100%;
padding: 12px 12px;
}
.fs-c-stepList__number {
margin-bottom: 10px;
margin-right: 0;
width: 28px;
height: 28px;
}
.fs-c-table thead {
display:none;
}
}
/* 編み直し対象商品 */
.ami-naoshi-title {
font-weight: bold;
margin: 0 0 12px;
font-size: 15px;
}
.ami-naoshi-gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: end;
gap: 24px;
margin: 0 0 24px;
}
.ami-naoshi-item {
margin: 0;
flex: 1 1 200px; /* 最小幅200pxで可変、狭くなると折り返す */
max-width: 200px;
text-align: center;
}
.ami-naoshi-item img {
width: 100%;
height: auto;
display: block;
}
.ami-naoshi-item figcaption {
margin-top: 8px;
font-weight: bold;
color: #2a6ebb;
font-size: 14px;
}
/* タブレット以下：2列表示 */
@media screen and (max-width: 768px) {
.ami-naoshi-item {
flex: 1 1 45%;
max-width: 45%;
}
}
/* =============================================
返品・交換ページ スタイル
============================================= */
/* --- h3 小見出し: 左ボーダーアクセント --- */
.fs-c-documentArticle__heading--small {
font-weight: 700;
padding: 5px 0 5px 10px;
border-left: 4px solid #3a6b66;
margin: 1.25rem 0 0.5rem;
line-height: 1.6;
}
/* --- 注記テキスト（小さめ・グレー） --- */
.fs-c-note {
color: #666;
font-size: 12px;
margin: 0.25rem 0;
}
/* --- ユーティリティ: 太字 --- */
.fs-u-text-bold {
font-weight: 700;
}
/* =============================================
返品特約ページ スタイル
============================================= */
/* --- テーブル全体 --- */
.fs-c-table {
width: 100%;
border-collapse: collapse;
margin: 0.75rem 0;
font-size: 13px;
}
/* --- テーブル: セル共通 --- */
.fs-c-table th,
.fs-c-table td {
border: 1px solid #ccc;
padding: 8px 12px;
vertical-align: top;
text-align: left;
}
/* --- テーブル: 見出しセル（薄いグリーン背景） --- */
.fs-c-table th {
background: #e8f0ef;
font-weight: 700;
width: 30%;
}
/* --- 注記テキスト（小さめ・グレー） --- */
.fs-c-note {
color: #666;
font-size: 12px;
margin: 0.25rem 0;
}
/* --- ユーティリティ: 太字 --- */
.fs-u-text-bold {
font-weight: 700;
}
.fs-pt-column--3.fs-pt-column {
margin-bottom: 40px;
}
/* =============================================
タブレット以上 (768px〜)
============================================= */
@media (max-width: 768px) {
/* ラッパー: 横幅広がるので余白を増やす */
.fs-c-documentArticle {
padding: 0 8px;
}
/* h2: フォントサイズをPC相当に戻す */
.fs-c-documentArticle__heading {
padding: 0.5rem 0.8rem;
font-size: 1.4rem;
margin: 0 0 2rem;
}
/* h3: フォントサイズをPC相当に */
.fs-c-documentArticle__heading--small {
padding: 6px 0 6px 10px;
margin: 1.5rem 0 0.6rem;
font-size: 1.4rem;
}
/* 注記: 12pxに戻す */
.fs-c-note {
font-size: 12px;
}
/* 規定テーブル: フォントサイズPC相当に */
.return-policy-table {
font-size: 14px;
}
.return-policy-table th {
font-size: 14px;
padding: 14px 0 4px;
}
.return-policy-table td {
padding: 0 0 14px;
}
.fs-pt-column {
display: grid;
gap: 1.6rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
justify-content: center;
justify-items: center;
padding: 12px;
}
}
/* ========================================
カタログリスト コンテナ
========================================
増えることを想定したリスト構成
width: 50% / センター表示
======================================== */
.cataloglist-container {
width: 50%;
margin: 0 auto;
padding: 40px 0;
}
/* アナウンスラッパー（カタログが増えた場合のリスト親） */
.fs-p-announcement_wrap.catalog {
display: flex;
flex-direction: column;
gap: 24px; /* カタログが増えたときの間隔 */
}
/* ===== Section wrapper ===== */
.product-display {
max-width: 1100px;
margin: 4rem auto;
background: #f7f7f7;
border: 4px solid #88AFBB;
}
.section-title {
font-size: 1.6rem;
font-weight: 700;
color: #88AFBB;
margin: 16px;
display: inline-block;
padding: 0.3em 0.5em;
border-left: 4px double #88AFBB;
}
.section-subtitle {
font-weight: 800;
color: #666666;
padding: 4px 20px 0;
line-height: 1.6;
}
/* ===== 3-column grid ===== */
.product-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
padding: 16px;
}
/* ===== Column shared ===== */
.col-example,
.col-main,
.col-combo {
padding: 20px;
}
/* ===== Left: 完成例 ===== */
.col-example .col-label {
font-size: 12px;
font-weight: 700;
color: #666666;
margin-bottom: 10px;
text-align: center;
}
.example-photo {
width: 100%;
aspect-ratio: 4 / 4;
object-fit: cover;
border-radius: 6px;
display: block;
}
/* 画像がない場合のプレースホルダー */
.example-photo-placeholder {
width: 100%;
aspect-ratio: 4 / 4;
border-radius: 6px;
background: #e8e5e0;
display: flex;
align-items: center;
justify-content: center;
color: #9c9a92;
font-size: 12px;
}
.example-caption {
font-size: 11px;
color: #6b6860;
line-height: 1.7;
margin-top: 10px;
display: inline-block;
border-left: 2px solid #88afbb;
padding-left: 10px;
}
.sku-list {
font-size: 11px;
color: #6b6860;
line-height: 1.8;
margin-top: 8px;
list-style: none;
}
.sku-list li { display: inline; }
.sku-list .sku-code {
font-weight: 700;
color: #2d6e75;
}
/* ===== Center: メイン商品 ===== */
.col-main {
display: flex;
align-items: center;
}
/* 画像とバッジをまとめる位置基準ラッパー */
.product-main-wrap {
position: relative;
width: 100%;
border: 1px solid #f09961;
background: #fff;
}
/* バッジを画像上部に重ねる */
.badge-current {
position: absolute;
top: 0px;
left: -1px; /* 左端に配置 */
background: #f09961;
color: #fff;
font-size: 12px;
font-weight: 500;
padding: 6px 22px 6px 14px; /* 右側を広めに */
clip-path: polygon(
0 0, /* 左上 */
calc(100% - 12px) 0, /* 右上（V字の上端） */
100% 50%, /* 右中央（V字の頂点） */
calc(100% - 12px) 100%, /* 右下（V字の下端） */
0 100% /* 左下 */
);
letter-spacing: 0.04em;
white-space: nowrap;
z-index: 1;
}
.product-main-img {
width: 100%;
aspect-ratio: 4 / 4;
object-fit: contain;
border-radius: 6px;
background: #f3f1ee;
display: block;
}
.product-main-placeholder {
width: 100%;
aspect-ratio: 4 / 4;
border-radius: 6px;
background: #f3f1ee;
display: flex;
align-items: center;
justify-content: center;
color: #9c9a92;
font-size: 12px;
}
/* ===== Right: 組み合わせ ===== */
.col-combo .combo-heading {
font-size: 14px;
font-weight: 700;
color: #666666;
letter-spacing: .05em;
display: inline-block;
background: #f7f7f7;
padding: 4px 16px 4px 16px;
border-radius: 50px;
}
.combo-items {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.combo-img {
width: 100%;
border-radius: 6px;
object-fit: contain;
display: block;
}
.combo-img-placeholder {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 6px;
background: #e8e5e0;
}
/* タブレット専用ブロックはデフォルト非表示 */
.col-main-img-tablet { display: none; }
/* ===== Tablet (〜900px) ===== */
@media (max-width: 900px) {
.product-grid {
grid-template-columns: 1fr 1fr;
}
/* 左：完成例（全高）、右上：バッジ＋商品画像、右下：組み合わせ */
.col-example {
grid-column: 1;
grid-row: 1 / 3; /* 2行分を占有 */
border-bottom: none;
}
.col-main {
grid-column: 2;
grid-row: 1;
border-right: none;
border-bottom: none;
align-items: stretch;
}
/* バッジ＋画像をそのまま表示 */
.product-main-wrap {
flex: initial;
}
.product-main-img,
.product-main-placeholder {
display: block;
aspect-ratio: 4 / 4;
}
/* タブレット専用ブロックは非表示 */
.col-main-img-tablet {
display: none;
}
.col-combo {
grid-column: 2;
grid-row: 2;
border-right: none;
}
}
/* ===== SP (〜600px) ===== */
@media (max-width: 600px) {
.product-grid {
grid-template-columns: 1fr;
}
/* タブレットのgrid-row指定をリセットして縦積みに */
.col-example {
grid-column: 1;
grid-row: auto;
border-right: none;
order: 1;
}
.col-main {
grid-column: 1;
grid-row: auto;
flex-direction: column;
align-items: stretch;
border-right: none;
order: 2;
}
.product-main-img,
.product-main-placeholder {
display: block;
max-width: 100%;
aspect-ratio: 4 / 4;
}
.col-main-img-tablet {
display: none;
}
.col-combo {
grid-column: 1;
grid-row: auto;
border-right: none;
order: 3;
}
.section-title {
font-size: 1.4rem;
}
}
.baloon01 {
position: relative;
display: block;
padding: 12px 32px;
border: double 4px #88afbb;
border-radius: 48px;
margin: 0px;
margin-inline: auto;
width: fit-content;
margin-bottom: 10px;
}
.baloon01::before {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
width: 18px;
height: 18px;
box-sizing: border-box;
background-color: #f4f4f4; /*背景と同じ色に変更してください*/
rotate: 135deg;
translate: -50%;
}
.baloon01::after {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
width: 15px;
height: 15px;
box-sizing: border-box;
border: double 4px;
border-color: #88afbb #88afbb transparent transparent;
rotate: 135deg;
translate: -50%;
}
/* ---------- 帯バナー ---------- */
.recommend-banner {
position: relative; /* ::after の基準 */
display: flex;
align-items: center;
justify-content: flex-end; /* テキスト右詰め */
background-color: #88AFBB;
padding: 8px 20px;
margin-top: 0;
}
/* 帯の下から突き出る三角形 */
.recommend-banner::after {
content: "";
position: absolute;
bottom: -14px; /* 帯の下へ突き出す量 */
left: auto;
right: 20px; /* 右端に配置 */
transform: none;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 14px solid #88AFBB; /* 帯と同色で三角を描画 */
}
.recommend-banner__text {
color: #fff;
font-weight: bold;
letter-spacing: 0.05em;
white-space: nowrap;
}
/* ============================================================
商品一覧グリッド CSS
スコープ: article.product-display.itemparts
============================================================ */
.product-display.itemparts {
border: none;
background: none;
}
/* ─── グリッドコンテナ ─── */
article.product-display.itemparts .fs-c-productList {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
/* 3列: ~960px */
@media (max-width: 960px) {
article.product-display.itemparts .fs-c-productList {
grid-template-columns: repeat(3, 1fr);
}
}
/* 2列: ~768px */
@media (max-width: 768px) {
article.product-display.itemparts .fs-c-productList {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
/* 1列: ~480px */
@media (max-width: 480px) {
article.product-display.itemparts .fs-c-productList {
grid-template-columns: 1fr;
}
}
/* カード */
article.product-display.itemparts .fs-c-productListItem {
border: 1px solid #88AFBB;
background: #f7f7f7;
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
}
/* ::after でカード全体をリンク化（pointer-eventsはデフォルトのautoのままにする） */
article.product-display.itemparts .fs-c-productListItem__productName a::after {
content: "";
position: absolute;
inset: 0;
/* pointer-events: none は削除 */
}
/* hover時にアンダーライン */
article.product-display.itemparts .fs-c-productListItem:hover .fs-c-productName__name {
text-decoration: underline;
}
/* ─── 画像エリア ─── */
article.product-display.itemparts .fs-c-productListItem__image {
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
article.product-display.itemparts .fs-c-productListItem__image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* ─── 情報エリア ─── */
article.product-display.itemparts .fs-c-productListItem__info {
padding: 10px 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
/* ─── 価格エリア ─── */
article.product-display.itemparts .fs-c-productListItem__prices {
margin-top: auto;
}
article.product-display.itemparts .fs-c-productPrice__main {
display: inline-flex;
align-items: baseline;
}
article.product-display.itemparts .fs-c-productPrice__main__price.fs-c-price {
display: inline-flex;
align-items: baseline;
gap: 1px;
}
article.product-display.itemparts .fs-c-productPrice__addon {
display: inline-flex;
align-items: baseline;
}
article.product-display.itemparts .fs-c-productPrice__addon__label {
font-size: 0.68rem;
color: #888;
}
/* ==========================================================
会員登録エントリー（一般 / 業者）
========================================================== */
.member-entry-wrap {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 900px;
padding: 0;
margin: 0 auto 40px;
}
.member-entry {
display: flex;
flex-direction: column;
flex: 1 1 320px;
box-sizing: border-box;
background-color: #fcfbf9;
border: 1px solid #b2d6cd;
padding: 28px 32px 32px;
}
.member-entry__title {
margin: 0 0 20px;
padding-bottom: 18px;
border-bottom: 1px solid #cbd5d8;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.08em;
color: #333333;
text-align: center;
}
.member-entry__lead {
flex: 1 0 auto;
margin: 0 0 28px;
line-height: 1.9;
color: #666666;
text-align: left;
}
.member-entry__note {
display: block;
margin-top: 4px;
font-size: 10px;
color: #666666;
text-align: center;
}
.member-entry__button {
display: block;
width: 58%;
margin: 0 auto;
padding: 16px 0;
background-color: #e2967f;
border: none;
border-radius: 0;
color: #ffffff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.15em;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: opacity 0.2s ease;
}
.member-entry__button:hover,
.member-entry__button:focus {
opacity: 0.85;
}
@media (max-width: 768px) {
.member-entry-wrap {
flex-direction: column;
}
.member-entry {
flex: 1 1 auto;
}
.member-entry__button {
width: 100%;
}
}
/* ==========================================================
登録までの流れ（業者会員登録ページ）
========================================================== */
.registration-flow {
max-width: 940px;
margin: 40px auto 0;
}
.registration-flow__title {
margin: 0 0 16px;
padding: 14px 20px;
background-color: #2f6b68;
color: #ffffff;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.08em;
box-sizing: border-box;
}
.registration-flow__lead {
margin: 0 0 24px;
line-height: 1.9;
color: #444444;
}
.registration-flow__columns {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
.registration-flow__arrow--between {
width: 0;
height: 0;
margin: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 9px solid #2f6b68;
}
@media (max-width: 697px) {
.registration-flow__arrow--between {
visibility: visible;
}
}
.registration-flow__column {
display: flex;
flex-direction: column;
}
.registration-flow__step {
display: flex;
align-items: flex-start;
gap: 16px;
background-color: rgba(228, 218, 218, 0.4);
border-radius: 4px;
padding: 20px 24px;
min-height: 110px;
}
.registration-flow__number {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #2f6b68;
color: #ffffff;
font-size: 14px;
font-weight: 700;
}
.registration-flow__step-title {
margin: 0 0 6px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #333333;
}
.registration-flow__step-text {
margin: 0;
line-height: 1.8;
color: #555555;
}
.registration-flow__arrow {
visibility: hidden;
width: 0;
height: 0;
margin: 8px auto;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 9px solid #2f6b68;
}
@media (max-width: 697px) {
.registration-flow__columns {
grid-template-columns: 1fr;
}
.registration-flow__arrow,
.registration-flow__arrow--between {
visibility: visible;
}
}
/* ==========================================
2. 特定の範囲だけ上書き（698px 〜 899px の間だけ150px）
========================================== */
@media (min-width: 698px) and (max-width: 899px) {
.registration-flow__step {
min-height: 130px;
}
}
/* 親要素をテーブルのような構造にする */
.item-heading {
display: table !important;
width: 100%;
}
/* ========================================
デザインルームページ 専用CSS
スコープ: article.designroom
======================================== */
.designroom {
max-width: 1180px;
margin: 0 auto;
padding: 16px;
}
/* 共通：セクション見出し（SHOP LAYOUT / ORIGINAL GOODS） */
.designroom-sectionHeading {
margin-bottom: 20px;
}
.designroom-sectionHeading__label {
display: inline-block;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.1em;
color: #e2967f;
border-bottom: 2px solid #e2967f;
padding-bottom: 6px;
margin-bottom: 16px;
}
.designroom-sectionHeading__title {
font-size: 2.2rem;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 0 0 16px;
}
/* ----------------------------------------
HERO：地図 + 連絡先
---------------------------------------- */
.designroom-hero {
display: flex;
gap: 40px;
}
.designroom-hero__visual {
position: relative;
flex: 1 1 55%;
min-height: 340px;
overflow: hidden;
background-color: #e2967f;
}
.designroom-hero__mapImg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.designroom-hero__overlay {
position: absolute;
top: 32px;
left: 32px;
max-width: 66%;
color: #ffffff;
}
.designroom-hero__title {
font-size: 2.8rem;
font-weight: 700;
letter-spacing: 0.04em;
margin: 0;
line-height: 1.2;
}
.designroom-hero__subtitle {
font-size: 1.2rem;
letter-spacing: 0.1em;
margin: 4px 0 20px;
}
.designroom-hero__list {
list-style: none;
margin: 0;
padding: 0;
font-size: 1.2rem;
line-height: 1.9;
}
.designroom-hero__contact {
flex: 1 1 45%;
}
.designroom-hero__lead {
margin-bottom: 24px;
}
.designroom-hero__contactList {
margin: 0 0 20px;
}
.designroom-hero__contactRow {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.designroom-hero__contactLabel {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 74px;
padding: 4px 10px;
background-color: #2d6e75;
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.05em;
margin: 0;
}
.designroom-hero__contactValue {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
color: #333333;
}
.designroom-hero__contactValue a {
color: #333333;
text-decoration: none;
}
.designroom-hero__contactValue a:hover {
text-decoration: underline;
}
.designroom-hero__address {
font-style: normal;
font-size: 1.4rem;
line-height: 1.8;
color: #555555;
}
.designroom-hero__addressNote {
display: inline-block;
margin-top: 6px;
font-size: 1.2rem;
color: #777777;
}
/* ----------------------------------------
SHOP LAYOUT
---------------------------------------- */
.designroom-layout__inner {
display: flex;
gap: 48px;
align-items: flex-start;
}
.designroom-layout__text {
flex: 1 1 45%;
}
.designroom-layout__lead {
font-weight: 700;
margin-bottom: 16px;
}
.designroom-layout__photo {
margin: 0;
overflow: hidden;
}
.designroom-layout__photo img {
width: 80%;
object-fit: cover;
display: block;
margin: 0 auto;
}
.designroom-layout__gallery .designroom-layout__photo:nth-child(2) {
grid-column: 2;
grid-row: 1;
}
.designroom-layout__gallery .designroom-layout__photo:nth-child(3) {
grid-column: 2;
grid-row: 2;
}
/* ----------------------------------------
ORIGINAL GOODS 全体
---------------------------------------- */
.designroom-goods {
margin-bottom: 40px;
}
/* --- 商品アイテム共通 --- */
.designroom-goods__item {
display: flex;
gap: 32px;
align-items: center;
margin-bottom: 56px;
padding-left: 32px;
}
.designroom-goods__item .designroom-goods__item--trays {
flex-direction: column-reverse;
}
.designroom-goods__image {
margin: 0;
flex-shrink: 0;
}
.designroom-goods__image img {
width: 100%;
height: auto;
display: block;
}
/* --- 見出し（番号＋タイトル＋バッジ） --- */
.designroom-goods__heading {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.designroom-goods__num {
font-size: 3.2rem;
font-weight: 700;
font-family: serif;
color: #e2967f;
line-height: 1;
}
.designroom-goods__titles {
display: flex;
align-items: baseline;
gap: 10px;
}
.designroom-goods__en {
font-size: 1.8rem;
font-weight: 700;
color: #333333;
margin: 0;
}
.designroom-goods__ja {
font-size: 1.2rem;
color: #777777;
margin: 0;
}
.designroom-goods__badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 50px;
padding: 0 16px;
border-radius: 50vh; /* 50% から 50vh（または20px以上）にすることで綺麗なカプセル型を維持 */
white-space: nowrap;
background-color: #e2967f;
color: #ffffff;
font-size: 1.3rem;
font-weight: 700;
margin-left: auto;
}
.lotnum {
font-size: 2rem;
padding: 8px;
line-height: 1;
}
.designroom-goods__desc {
margin-bottom: 12px;
}
/* --- 納期タグ --- */
.designroom-tag {
display: inline-block;
padding: 6px 16px;
border: 1px solid #e2967f;
border-radius: 20px;
color: #e2967f;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 16px;
}
/* --- 価格表 --- */
.designroom-price {
margin: 0 0 12px;
border-left: 4px solid #e2967f;
}
.designroom-price__group {
margin-bottom: 10px;
padding-left: 32px;
}
.designroom-price__groupLabel {
display: block;
font-size: 1.2rem;
font-weight: 700;
color: #444444;
margin-bottom: 4px;
}
.designroom-price__groupLabel::before {
content: "■";
font-size: 0.9rem;
color: #88AFBB;
margin-right: 6px;
}
.designroom-price__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 4px 0;
border-bottom: 1px dotted #d0d0d0;
font-size: 1.2rem;
color: #555555;
margin: 0;
}
.designroom-price__row:last-child {
border-bottom: none;
}
.designroom-price__value {
font-weight: 700;
color: #333333;
white-space: nowrap;
}
.designroom-price__value small {
font-weight: 500;
font-size: 1rem;
color: #888888;
margin-left: 4px;
}
/* --- POINT / トレーの横並び行 --- */
.designroom-goods__row {
display: flex;
gap: 32px;
align-items: flex-start;
margin-bottom: 56px;
}
.designroom-goods__row .designroom-goods__item {
margin-bottom: 0;
flex-direction: column;
padding: 16px;
}
.designroom-goods__row--pair .designroom-goods__item {
flex: 1 1 50%;
flex-direction: column;
align-items: stretch;
}
.designroom-goods__item .designroom-goods__image {
order: 1;
}
.designroom-goods__row .designroom-goods__image,
.designroom-goods__row--pair .designroom-goods__image {
order: -1;
margin: 0 auto;
}
/* --- POINT ボックス --- */
.designroom-point {
flex: 0 0 50%;
background-color: #fcfbf9;
border: 1px solid #b2d6cd;
padding: 20px;
}
.designroom-point__label {
display: inline-block;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.1em;
color: #2d6e75;
border-bottom: 2px solid #2d6e75;
padding-bottom: 4px;
margin-bottom: 12px;
}
.designroom-point__title {
font-size: 1.3rem;
font-weight: 700;
color: #333333;
margin-bottom: 10px;
}
.designroom-point__text {
margin-bottom: 16px;
}
.designroom-point__gallery {
list-style: none;
display: flex;
gap: 8px;
margin: 0;
padding: 0;
align-items: center;
}
.designroom-point__gallery li {
flex: 1;
}
.designroom-point__gallery img {
width: 100%;
height: auto;
display: block;
}
/* ========================================
デザインルーム レスポンシブ
======================================== */
/* ===== タブレット：〜900px ===== */
@media (max-width: 1024px) {
.designroom-hero {
flex-direction: column;
}
.designroom-hero__visual {
min-height: 280px;
}
.designroom-layout__inner {
flex-direction: column;
}
.designroom-layout__gallery {
width: 100%;
}
.designroom-goods__row {
flex-direction: column;
}
.designroom-point {
flex: 1 1 auto;
width: 100%;
}
.designroom-goods__row--pair {
flex-direction: column;
}
.designroom-layout__photo img {
width: 60%;
}
.designroom-layout__inner {
gap: 0;
}
}
/* ===== スマホ：〜768px ===== */
@media (max-width: 768px) {
.designroom {
padding: 1rem;
}
.designroom-goods__item {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.designroom-goods__row .designroom-goods__item {
flex-direction: column;
padding: 0px;
}
.designroom-goods__image {
order: -1;
}
.designroom-sectionHeading__title {
font-size: 1.8rem;
}
.designroom-hero__overlay {
max-width: 80%;
}
.designroom-goods__image {
max-width: 40%;
margin: 0 auto;
}
.designroom-goods__badge {
}
}
/* ===== スマホ小：〜480px ===== */
@media (max-width: 480px) {
.designroom-hero__visual {
min-height: 220px;
}
.designroom-hero__title {
font-size: 2.0rem;
}
.designroom-hero__list {
font-size: 1.1rem;
line-height: 1.7;
}
.designroom-hero__contactLabel {
min-width: 60px;
font-size: 1rem;
}
.designroom-hero__contactValue {
font-size: 1.3rem;
}
.designroom-layout__gallery {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.designroom-layout__photo--tall {
grid-column: 1;
grid-row: auto;
}
.designroom-layout__gallery .designroom-layout__photo:nth-child(2),
.designroom-layout__gallery .designroom-layout__photo:nth-child(3) {
grid-column: 1;
grid-row: auto;
}
.designroom-goods__num {
font-size: 2.4rem;
}
.designroom-goods__en {
font-size: 1.5rem;
}
.designroom-point__gallery {
flex-wrap: wrap;
}
.designroom-point__gallery li {
flex: 1 1 30%;
}
.designroom-goods__image {
max-width: 50%;
}
}
/* ----------------------------------------
アイキャッチギャラリー（1+3構成）
---------------------------------------- */
.showroom,
.showroom-intro,
.showroom-contact {
padding: 8px;
}
.showroom-hero__gallery {
display: grid;
grid-template-columns: 2.2fr 1fr;
grid-template-rows: repeat(3, 1fr);
gap: 8px;
margin-bottom: 40px;
}
.showroom-hero__main {
grid-column: 1;
grid-row: 1 / 4; /* subの3行分に合わせて縦に跨がせる */
margin: 0;
overflow: hidden;
height: 100%;
}
.showroom-hero__main img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.showroom-hero__sub {
grid-column: 2;
grid-row: 1 / 4;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 8px;
height: 100%;
}
.showroom-hero__subItem {
overflow: hidden;
height: 100%;
}
.showroom-hero__subItem img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* SHOW ROOM CTAバナー */
.showroom-hero__subItem--cta {
background-color: #e2967f;
}
.showroom-hero__ctaLink {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 60px;
text-decoration: none;
}
.showroom-hero__ctaText {
color: #ffffff;
font-weight: 700;
font-size: 2.6rem;
letter-spacing: 0.08em;
white-space: nowrap;
}
/* ----------------------------------------
見出し・本文
---------------------------------------- */
.showroom-intro {
margin-bottom: 40px;
}
/* ----------------------------------------
連絡先 + マップ（横2列）
---------------------------------------- */
.showroom-contact__grid {
display: flex;
gap: 32px;
align-items: stretch;
border: 1px solid #d0d0d0;
padding: 24px;
}
.showroom-contact__info {
flex: 1 1 50%;
}
.showroom-contact__map {
flex: 1 1 10%;
}
.showroom-contact__map img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ========================================
レスポンシブ
======================================== */
/* ===== タブレット：〜900px ===== */
@media (max-width: 900px) {
.showroom-hero__gallery {
grid-template-columns: 1.8fr 1fr;
}
.showroom-hero__ctaText {
font-size: 1.2rem;
}
.showroom-contact__grid {
gap: 20px;
padding: 20px;
}
.showroom-intro__title {
font-size: 1.8rem;
}
}
/* ===== スマホ：〜768px ===== */
@media (max-width: 768px) {
.showroom-hero__gallery {
grid-template-columns: 1fr 1fr;
grid-template-rows: none;
}
.showroom-hero__main {
grid-column: 1 / 3;
grid-row: auto;
aspect-ratio: 4 / 3;
height: auto;
}
.showroom-hero__sub {
grid-column: 1 / 3;
grid-row: auto;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: none;
height: auto;
}
.showroom-hero__subItem {
aspect-ratio: 1 / 1;
height: auto;
}
.showroom-hero__ctaLink {
min-height: auto;
}
.showroom-hero__ctaText {
font-size: 1.1rem;
}
.showroom-contact__grid {
display: flex;
flex-direction: column !important;
gap: 16px;
padding: 16px;
}
.showroom-contact__info,
.showroom-contact__map {
flex: 1 1 auto;
}
.showroom-contact__map {
order: -1; /* マップを上に表示 */
}
.showroom-contact__info {
order: 1;
}
.showroom-contact__map img {
aspect-ratio: 4 / 3;
object-fit: cover;
}
}
/* ===== スマホ小：〜480px ===== */
@media (max-width: 480px) {
.showroom-hero__sub {
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.showroom-hero__gallery {
gap: 6px;
}
.showroom-hero__ctaText {
font-size: 0.9rem;
letter-spacing: 0.04em;
}
.showroom-contact__grid {
padding: 12px;
}
}
/* 1. 基本設定：PC用 (800px以上は固定) */
.fs-pt-carousel img {
width: 100% !important;
max-width: 800px !important; /* PCでは最大800px */
height: auto !important;
display: block;
margin: 0 auto;
}
/* 2. タブレット用：768px以下になったら500pxに制限 */
@media screen and (max-width: 768px) {
.fs-pt-carousel img {
max-width: 500px !important;
}
}
@media screen and (max-width: 480px) {
.fs-pt-carousel img {
width: 100vw !important;
max-width: 100vw !important;
}
}
.mail-icon-link {
display: inline-flex;
vertical-align: middle;
margin-left: 5px; /* 文章とアイコンの間に少し隙間を作る */
transition: opacity 0.3s ease;
}
.mail-icon-link:hover {
opacity: 0.7;
}
.mail-icon {
width: 24px;
height: 24px;
display: block;
}
/* ------------------------------------------------------------------
fs-p-announcement__title / fs-p-announcement__body は
既存サイトのグローバルCSSで装飾済みのため上書きしません。
配置に必要な最小限の余白のみ指定しています。
------------------------------------------------------------------ */
.fs-p-announcement__title{
margin-bottom:20px;
}
.fs-p-announcement__body{
max-width:820px;
}
.fs-c-couponList{
list-style:none;
margin:0 auto;
padding:0;
width:100%;
display:flex;
flex-direction:column;
gap:32px;
}
.fs-c-coupon__info{
display:grid;
padding:26px 28px;
gap:0 28px;
}
/* ---- 1カラム目：クーポン画像（JPG配置。装飾はJPG側で完結） ---- */
.fs-c-coupon__image{
grid-column:1;
min-width:0;
display:flex;
align-items:center;
}
.fs-c-couponImage__image{
width:100%;
display:block;
border-radius:6px;
aspect-ratio: 1 / 1;
max-height: unset;
}
/* ---- 2カラム目：クーポン名・割引額 ---- */
.fs-c-coupon__name{
grid-column:2;
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
padding:4px 8px;
}
.fs-c-couponName__explain{
line-height:1.75;
color:var(--muted);
margin-bottom:40px;
}
.fs-c-couponName__name{
margin:0 0 40px;
font-weight:700;
letter-spacing:.02em;
line-height:1.4;
}
.fs-c-couponName__discount{
display:block;
border-radius:8px;
}
.fs-c-couponName__discount__value{
display:flex;
align-items:baseline;
justify-content:center;
gap:4px;
background:var(--rose);
color:#fff;
font-weight:700;
}
.fs-c-price--inline .fs-c-price__currencyMark{ font-size:14px; }
.fs-c-price--inline .fs-c-price__value{ font-size:20px; font-weight:800; }
.fs-c-couponName__discount__offLabel{
font-size:13px;
font-weight:700;
margin-left:2px;
}
/* ---- 3カラム目：有効期限・注意事項（点線の縦罫で区切る） ---- */
.fs-c-coupon__description{
grid-column:3;
min-width:0;
position:relative;
overflow-wrap:break-word;
}
.fs-c-coupon__description::before{
content:"";
position:absolute;
left:0; top:4px; bottom:4px;
border-left:1px dashed var(--rule);
}
.fs-c-couponAppliedCondition__title,
.fs-c-couponExpiration__title{
margin:0 0 20px;
}
.fs-c-couponExpiration__list{
list-style:none;
margin:0 0 10px;
padding:0;
display:flex;
flex-direction:column;
gap:8px;
}
.fs-c-couponExpiration__list__item{
display:flex;
flex-wrap:wrap;
gap:8px;
font-size:12.5px;
}
.fs-c-couponExpiration__list__item--available {
flex-direction: row;
}
.fs-c-couponExpiration__list__item__title{
display:inline-block;
border: 1px solid #88afbb;
background-color: #88afbb;
color: #fff;
border-radius:4px;
padding:2px 8px;
font-size:11px;
font-weight:600;
white-space:nowrap;
}
.fs-c-couponExpiration__expiration{
display:inline-flex;
flex-wrap:wrap;
align-items:baseline;
gap:4px 6px;
font-variant-numeric:tabular-nums;
}
.fs-c-time{ font-weight:600; }
.fs-c-timeJoint{ color:var(--muted); }
.fs-c-couponExpiration__comment{
font-size:13px;
}
.fs-c-couponExpiration__notice{
font-weight:800;
margin:0 2px;
}
.fs-c-coupon__description > p{
line-height:1.8;
color:var(--ink);
white-space:pre-line;
margin:14px 0;
}
.fs-c-couponAppliedCondition__list{
list-style: disc;
list-style-position: inside;
margin:0;
padding:0;
}
.fs-c-couponAppliedCondition__list__item{
position:relative;
padding:0 0 10px 16px;
margin-bottom:10px;
font-size:12.5px;
line-height:1.7;
border-bottom: 2px dotted #88afbb;
}
.fs-c-couponAppliedCondition__list__item:last-child{
border-bottom:none;
margin-bottom:0;
}
.fs-c-couponAppliedCondition__list__item::before{
content:"";
position:absolute;
left:0; top:7px;
width:6px; height:6px;
border-radius:50%;
background:var(--bullet);
}
.fs-c-couponAppliedCondition__notice{
color:var(--rose-text);
font-weight:700;
}
.fs-c-couponAppliedCondition .fs-c-price--inline{
display:inline-flex;
align-items:baseline;
color:var(--rose-text);
font-weight:700;
}
.fs-c-couponList__item {
padding: 32px 16px;
}
/* ============ レスポンシブ ============ */
@media (max-width:790px){
.fs-c-coupon__info{
grid-template-columns:1fr;
padding:22px;
gap:20px 0;
}
.fs-c-coupon__image{ grid-column:1; }
.fs-c-coupon__name{
grid-column:1;
padding-bottom:20px;
border-bottom:1px dashed var(--rule);
}
.fs-c-coupon__description{
grid-column:1;
padding-left:0;
}
.fs-c-coupon__description::before{ display:none; }
}
/* ------------------------------------------------------------------
注文手続きページのヘッダーの表示設定
------------------------------------------------------------------ */
body.fs-body-checkout .header_nav_list,
body.fs-body-checkout .fs-p-headerNavBar,
body.fs-body-checkout .fs-p-headerNavBar {
display: none !important;
}
body.fs-body-checkout .fs-l-header.is-sticky .logo_descript {
display: block;
align-items: center;
}
body.fs-body-checkout .fs-l-header.is-sticky .header_inner {
justify-content: flex-start;
}
/* ============ レスポンシブ ============ */
@media screen and (max-width: 1279px) {
body.fs-body-checkout .header_logo_area {
justify-content: flex-start;
padding-bottom: 1rem;
}
}
/* ------------------------------------------------------------------
注文手続きページのステータス表示
------------------------------------------------------------------ */
/* ステップ全体のコンテナ */
.step ul {
display: flex;
flex-direction: row-reverse; /* 右から順に並べる */
justify-content: center;
align-items: center;
list-style: none;
margin-bottom: 2rem;
padding: 0;
}
/* 各ステップの基本スタイル */
.step li {
display: flex;
align-items: center;
opacity: 0.3; /* 未完了の状態（全体を薄くする） */
}
/* アクティブ（現在または完了）なステップ */
.step li.is-active {
opacity: 1;
}
/* ステップ間の横線 */
.step li:not(:last-child)::before {
content: "";
width: 40px; /* お好みに合わせて調整してください */
height: 1px;
background-color: #333; /* 線の色 */
margin: 0 15px;
}
/* アイコンとテキストを縦並びにするラッパー */
.step span[class^="step__icon--"] {
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
color: #333;
}
/* 円形のアイコン部分（共通設定） */
.step span[class^="step__icon--"]::before {
content: "";
display: flex;
justify-content: center;
align-items: center;
width: 38px; /* 円のサイズ */
height: 38px; /* 円のサイズ */
border-radius: 50%;
margin-bottom: 8px;
background-repeat: no-repeat;
background-position: center;
background-size: 38px; /* アイコンの大きさに合わせて調整 */
}
/* 1. カートアイコン（画像に合わせてパスや背景を指定してください） */
.step__icon--cart::before {
background-image: url('https://yoshiyo.itembox.cloud/item/icon_Cart_status.png?d=20260806184422');
}
/* 2. 注文手続きアイコン */
.step__icon--confirm::before {
background-image: url('https://yoshiyo.itembox.cloud/item/icon_Checkout_status.png?d=20260806183413');
}
/* 3. 注文完了アイコン */
.step__icon--thanks::before {
background-image: url('https://yoshiyo.itembox.cloud/item/icon_Complete_status.png?d=20260806183408');
}
/* ============ レスポンシブ ============ */
@media (max-width: 769px) {
/* 例1：全体の余白や円のサイズを少し小さくする場合 */
.step span[class^="step__icon--"]::before {
width: 36px; /* 円のサイズを縮小 */
height: 36px;
background-size: 36px; /* アイコンのサイズも縮小 */
}
/* 例2：ステップ間の横線を短くする場合 */
.step li:not(:last-child)::before {
width: 20px;
margin: 0 8px;
}
/* 例3：文字サイズを調整する場合 */
.step span[class^="step__icon--"] {
font-size: 10px;
}
}
/* ------------------------------------------------------------------
注文手続きページの戻るリンク
------------------------------------------------------------------ */
/* 「戻る」テキストのスタイル */
.link--prev {
display: inline-flex;
align-items: center;
font-size: 14px; /* 文字サイズ */
color: inherit;
}
/* 「<」の矢印部分を疑似要素で作成 */
.link--prev::before {
content: "<";
display: inline-block;
margin-right: 6px; /* 文字との間の余白 */
font-weight: bold;
}
/* ------------------------------------------------------------------
再購入フローティングバナー
------------------------------------------------------------------ */
/* --- 購入履歴フローティングバナー全体のスタイル --- */
.history-banner-fixed {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 60px;
height: auto;
padding: 20px 0;
background-color: #666666;
border: solid 1px #B2DFDB;
border-radius: 45px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
/* --- 追従（固定）の設定：アニメーション準備 --- */
position: fixed;
right: 8px; /* 画面右からの距離 */
z-index: 1000;
/* スクロール前の初期状態：画面下に隠して透明にする */
bottom: -300px; /* バナーの高さ分、画面下に隠す */
opacity: 0;
/* ふわっと出てくるアニメーションの設定 */
transition: bottom 0.5s ease-out, opacity 0.5s ease-out;
}
/* JSで「is-show」クラスがついた時の状態（表示） */
.history-banner-fixed.is-show {
bottom: 30px; /* 画面右下に出てくる */
opacity: 1; /* 不透明にして表示 */
}
/* --- アイコンのスタイル (共通) --- */
.history-banner-fixed img {
display: block;
max-width: 100%;
height: auto;
}
/* --- 購入履歴アイコン --- */
.history-banner-icon-main {
width: 50px;
margin-bottom: 20px;
}
/* --- 下矢印アイコンの個別調整 --- */
.history-banner-icon-arrow {
width: 20px;
margin-top: 15px;
}
/* --- 縦書きテキストのスタイル --- */
.history-banner-text {
writing-mode: vertical-rl; /* 縦書きを有効化 */
font-family: "Noto Sans JP", sans-serif; /* futureshopの標準フォントに合わせる */
font-size: 16px;
color: #B2DFDB;
letter-spacing: 0.1em;
line-height: 1.6;
text-align: center;
}
/* ここから追加：スマホサイズ（ブレイクポイント：767px）の指定 */
@media screen and (max-width: 768px) {
/* バナー全体をコンパクトな円形ボタンに切り替える */
.history-banner-fixed {
width: 60px;
height: 60px;
padding: 0;
border-radius: 50%;
/* 位置を微調整（右下に小さく配置） */
right: 20px;
bottom: 20px;
}
/* 表示状態（is-showクラスがついた時）の位置もスマホ用に調整 */
.history-banner-fixed.is-show {
bottom: 20px;
}
/* ★縦書きテキストを非表示にする★ */
.history-banner-text {
display: none !important; /* display: noneで完全に消す */
}
/* 下矢印アイコンもスマホでは不要なので非表示にする */
.history-banner-icon-arrow {
display: none !important;
}
/* 購入履歴アイコンを中央に配置し、サイズを調整 */
.history-banner-icon-main {
width: 35px; /* アイコンを少し小さく */
margin-bottom: 0; /* マージンをリセット */
/* Flexboxで中央配置を維持 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/* スライダー両端の矢印の位置調整 */
.fs-c-productListGroup .slick-prev {
left: -25px;
z-index: 10;
}
.fs-c-productListGroup .slick-next {
right: -25px;
z-index: 10;
}
/* 矢印の色（デフォルトが白い場合があるので見えやすい色に変更） */
.fs-c-productListGroup .slick-prev:before,
.fs-c-productListGroup .slick-next:before {
color: #333;
}
/* 商品要素間の余白調整 */
.fs-c-productListGroup .slick-slide {
padding: 0 10px;
} |