/* 全体設定 */
body {font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;color:#333;margin:0;padding:0 20px;}
:root{
--gold:#a68b5b;
}
        a {
            position: relative;
            display: inline-block;
            text-decoration: none;
            /*overflow: hidden;  楕円形が要素をはみ出さないようにする */
            padding:2px 5px;; /* サイズ */
        }
		        a::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background-color: var(--gold); /* ホバー時に表示する背景色 */
            border-radius: 50%; /* 楕円形を作る */
            transition: all 0.3s ease-out; /* アニメーションのスムーズ化 */
            transform: translate(-50%, -50%);
            z-index: -1;opacity: 0.4;
        }
a:hover::before {
    width: 100%;
    height: 143%;
    max-width: 10em;
    min-width: 5em;
}        a:hover {
            color: #fff; /* ホバー時の文字色 */
        }
/* ヘッダー */
.site-header {border-bottom:1px solid #eee;padding:15px 0;position:sticky;top:0;background:#fff;z-index:1000;}
.header-container {max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 20px;flex-wrap: wrap;}
.logo a {text-decoration:none;color:#000;font-size:24px;font-weight:bold;letter-spacing:1px;}
.logo span {font-size:12px;color:#888;}
.main-nav ul {display:flex;list-style:none;gap:20px;flex-wrap: wrap;}
.main-nav a {text-decoration:none;color:#555;font-size:14px;}

/* ボタン・アクション */
.header-actions {display:flex;align-items:center;gap:15px;}
.btn-login {border:1px solid #333;padding:8px 16px;text-decoration:none;color:#333;font-size:13px;transition:0.3s;}
.btn-login:hover {background:#333;color:#fff;}

/* フッター */
.site-footer {background:#f8f8f8;padding:60px 0 20px;margin-top:50px;border-top:1px solid #eee;}
.footer-container {max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;padding:0 20px;flex-wrap: wrap;}
.footer-links {display:flex;gap:50px;}
.company-address{text-align:right;}
.company-address a {color: #000;z-index: 0;margin-top: 9px;font-size: 18px;}
.link-group h3 {font-size:14px;margin-bottom:15px;}
.link-group ul {list-style:none;padding:0;}
.link-group li {margin-bottom:8px;position: relative;z-index: 1;}
.link-group a {color:#666;font-size:13px;}
.footer-bottom {text-align:center;margin-top:40px;padding-top:20px;border-top:1px solid #ddd;font-size:12px;color:#999;}

/* タイトル：モデル画像販売 */
h1 {text-align:center;font-size:1.8rem;letter-spacing:0.1em;margin-bottom:40px;color:#444;position:relative;padding-bottom:15px;}
h1::after {content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:2px;background-color:var(--gold);}


/* 各項目のスタイル */
.announce span {display:block; /* 縦に並べる */margin-bottom:12px;font-size:0.95rem;border-bottom:1px dotted #ddd;padding-bottom:8px;}
.announce .spec {display:flex;gap:1em;align-items:center;justify-content:space-between;}
.announce span:last-child {border-bottom:none;margin-bottom:0;}

/* 注意書き（無断転用禁止など）を小さく赤っぽく */
.announce span:last-child {color:#999;font-size:0.85rem;text-align:center;margin-top:10px;}
.carousel-container { margin-bottom:60px; padding:10px; border-bottom:2px solid #eee; }
.carousel-container:last-child{margin-bottom:50px;}
.folder-title { font-family:sans-serif; color:#333; border-left:5px solid #007bff; padding-left:15px; }
.f-carousel__slide img { width:100%; height:100%; object-fit:cover; border-radius:12px;box-shadow:1px 2px 9px #ccc;}
.f-carousel {
--f-arrow-pos:10px;
--f-arrow-width:38px;
--f-arrow-height:38px;
--f-arrow-svg-width:16px;
--f-arrow-svg-height:16px;
--f-arrow-svg-stroke-width:2.5;
--f-arrow-color:#475569;
--f-arrow-shadow:0 6px 12px -2px rgb(50 50 93 / 25%), 0 3px 7px -3px rgb(0 0 0 / 30%);
--f-arrow-border-radius:50%;
--f-arrow-bg:#ffffff6b;
--f-arrow-hover-bg:#fffcfc91;
--f-arrow-active-bg:#f0f0f091;
--f-carousel-slide-width:width:450px; max-height:450px;
/*--f-carousel-slide-padding:10px*/
}
.f-thumbs {
--f-thumb-selected-shadow:0px 0px 0px 3px #7396fc;
--f-thumbs-gap:2px;
--f-thumb-transform:scale(0.86);
--f-thumb-hover-transform:scale(0.86);
--f-thumb-selected-transform:scale(1);
}
/* ツールバーのカスタムボタン用スタイル */
.f-toolbar__button.custom-cart-btn {color:#8aa6f4;transition:0.6s;border:0;background:transparent;}
.f-toolbar__button.custom-cart-btn:hover {color:#3767eb;}

/* カートに追加されたときのアニメーション用クラス（任意） */
.cart-added-animation {animation:cartShimble 0.5s ease-in-out;color:#28a745 !important; /* 成功色 */}
@keyframes cartShimble {0% { transform:scale(1); }50% { transform:scale(1.4); }100% { transform:scale(1); }}

/* カート*/
.cart-floating-bar {position:fixed;bottom:0;left:0;width:100%;background:rgba(255, 255, 255, 0.95);backdrop-filter:blur(10px);box-shadow:0 -5px 20px rgba(0, 0, 0, 0.1);z-index:2000;
transform:translateY(100%);transition:transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);border-radius:20px 20px 0 0;}

/* 表示状態のクラス */
.cart-floating-bar.is-active {transform:translateY(0);}
.cart-inner {padding:15px 20px;max-width:800px;margin:0 auto;}
.cart-header {display:flex;justify-content:space-between;font-weight:bold;margin-bottom:10px;font-size:0.9rem;}

/* 画像が横に流れるエリア */
.cart-items-wrapper {display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;padding:10px 0;scrollbar-width:thin; /* Firefox */}
.cart-items-wrapper::-webkit-scrollbar {height:6px;}/*  Chrome, Safari */
.cart-items-wrapper::-webkit-scrollbar-thumb {background:#ccc;border-radius:10px;}
.cart-item {position:relative;flex:0 0 70px; /* 横幅固定 */height:70px;}
.cart-item img {width:100%;height:100%;object-fit:cover;border-radius:6px;}

/* 削除ボタン */
.remove-btn {position:absolute;top:-10px;right:-8px;background:#000000a6;color:#fff;border-radius:50%;width:18px;height:18px;font-size:12px;border:none;cursor:pointer;}
.counter {position:absolute;top:-10px;right:5px;font-size:10px;width:13px;height:13px;}
.cart-footer,.submit-btn-footer{display:flex;justify-content:center;padding:10px 0;}
.checkout-btn,#submit-btn {width:18em;padding:12px;background:#333;color:#fff;border:none;border-radius:8px;font-weight:bold;cursor:pointer;margin-top:5px;}
.inquiry-section-form{width:100%;height:100%;position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;z-index:-1;
	#inquiry-section{opacity:0;max-width:300px;font-size:12px;padding:20px;border:1px solid #ccc;
	background:antiquewhite;border-radius:8px;box-shadow:0px 0px 10px;transition:opacity 0.3s ease;}
}

.inquiry-section-form.is-active {background:#000000ad;z-index:3000;
	#inquiry-section {opacity:1;transition:opacity 1s ease;}
}
/* 特商法ページ全体のレイアウト */
.legal-page {padding:60px 20px;background-color:#fff;line-height:1.8;}
.container {max-width:800px;margin:0 auto;}

.page-title {text-align:center;font-size:24px;margin-bottom:40px;letter-spacing:0.1em;border-bottom:2px solid #333;display:inline-block;padding-bottom:10px;width:100%;}

/* テーブルデザイン */
.legal-table {width:100%;border-collapse:collapse;border-top:1px solid #eee;}
.legal-table th, .legal-table td {padding:20px;border-bottom:1px solid #eee;text-align:left;}
.legal-table th {width:30%;background-color:#fafafa;font-weight:bold;font-size:14px;color:#444;}
.legal-table td {width:70%;font-size:15px;color:#333;}
.legal-table ul {margin:0;padding-left:1.2em;}
.legal-table strong {color:#d9534f; /* 返品不可などの強調用 */}

/* モーダル背景（オーバーレイ） */
.modal-overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.6);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:0.3s;z-index:9999;}
.modal-overlay.is-active {opacity:1;visibility:visible;}
.announce {padding:20px;}

/* モーダルウィンドウ本体 */
.modal-window {background:#fff;width:90%;max-width:800px;max-height:80vh;border-radius:10px;position:relative;padding:40px;overflow-y:auto;box-shadow:0 10px 25px rgb(226 144 0 / 12%);border:1px solid var(--gold);}

/* 閉じるボタン */
.modal-close-btn {position:sticky;top:0px;left:100%;;background:none;border:none;font-size:30px;cursor:pointer;color:#999;}

.modal-close-btn:hover {color:#333;}

/* 読み込み中の装飾 */
.loading {text-align:center;color:#888;padding:50px;}

/* 規約文の装飾 */
.terms-body ul {font-size:14px;color:#555;padding-left:20px;}
.terms-content h3 {font-size:16px;margin-top:25px;color:#333;display:flex;align-items:center;}
.terms-content h3::before {content:"";display:inline-block;width:4px;height:18px;background-color:var(--gold);margin-right:10px;}

/* Aboutページ専用スタイル */
.about-body {
    line-height: 1.8;
    color: #444;
}

.about-hero {
    background-color: #fdfdfd;
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 30px;
}

.about-hero h3,.announce h3{
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--gold);
}

.about-message {
    margin-bottom: 40px;
}

.about-message p {
    margin-bottom: 20px;
    font-size: 15px;
}

.about-features {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 5px;
}

.feature-item {
    margin-bottom: 25px;
}

.feature-item h4 {
    font-size: 16px;
    color: #000;
    border-bottom: 1px solid #ddd;
    display: inline-block;
    margin-bottom: 10px;
}

.feature-item p {
    font-size: 14px;
    margin: 0;
}

.about-notice {
    margin-top: 30px;
    font-size: 12px;
    color: #888;
    border: 1px solid #eee;
    padding: 15px;
    text-align: center;
}

.about-closing {
    margin-top: 40px;
    text-align: center;
    font-weight: bold;
    color: #333;
    font-size: 16px;
}

/* ご利用ガイドの装飾 */
.guide-steps {
    margin-bottom: 40px;
}

.step-item {
    position: relative;
    padding-left: 60px;
    margin-bottom: 30px;
}

.step-number {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    font-weight: bold;
    color: var(--gold);
    font-family: serif;
    border-bottom: 2px solid #eee;
}

.step-item h4 {
    font-size: 16px;
    margin: 0 0 10px 0;
    color: #333;
}

.step-item p {
    font-size: 14px;
    margin: 0;
    color: #666;
}

.guide-note {
    background: #f8f8f8;
    padding: 20px;
    border-left: 4px solid #333;
    font-size: 14px;
}

/* よくある質問の装飾 */
.faq-list {
    margin-top: 20px;
}

.faq-item {
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.faq-q {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 10px;
    display: flex;
    color: #333;
}

.faq-q span {
    color: var(--gold);
    margin-right: 10px;
}

.faq-a {
    margin-left: 25px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

/* スマホ対応（レスポンシブ） */
@media (max-width:600px) {
.site-header{top: -79px;
	.main-nav ul:first-child{position: relative;}
	}
.header-container{padding:0;
	h1{margin-bottom:0;width:100%;}
	li.title{margin-left: -25px;
		ul{margin-left: -35px;}}
	}
.carousel-container {
    padding: 3px;
}
.legal-table th, .legal-table td {display:block;width:100%;padding:15px;box-sizing:border-box}
.legal-table th {background-color:#f0f0f0;border-bottom:none;padding-bottom:5px;}
.legal-table td {padding-top:5px;}
.about-hero h3,.announce h3 {font-size: 18px;text-align: left;}
.about-hero {padding: 40px 10px;}

.footer-container {flex-direction: column-reverse;}
}