@charset "utf-8";

/* ========================================================
   1. 基本設定・モダンリセット
   ======================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
	display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
    color: #333;
    background-color: #f0f0f0;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ========================================================
   2. メインレイアウト構造
   ======================================================== */

/* 全体コンテナ */
#container {
    width: 100%;
    max-width: 1000px; /* ファイル2の設定を優先 */
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
	position: relative;
	z-index: 1;
}

/* ヘッダーエリア */
#header {
    width: 100%;
    height: auto;
    padding-top: 0px;
	background: #fff;
    background-size: cover;
	/* --- ヘッダーロゴ固定 --- */
    position: -webkit-sticky; 
    position: sticky;         
    top: 0;                   
    z-index: 9999;            /* 最前面に */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* スクロール時に境界がわかるよう影を追加 */
}

#headerMain {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

#headerMain h1 {
    width: 100%;
    margin: 0 0 10px 0;
    font-size: 0.83em;
    font-weight: normal;
}

/* ヘッダー全体のテキストを細く、上品に */
#headerMain h4, 
.address {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300; /* 数字が小さいほど細くなります（100〜300がおすすめ） */
    letter-spacing: 0.08em; /* 字間を少し広げて読みやすく */
    color: #666; /* 真っ黒より少しグレーにするとより繊細に見えます */
}

/* キャッチコピーの調整 */
#headerMain h4 {
    font-size: 0.85em;
    margin-bottom: 2px;
}

.header-logo {
    width: 300px;
    max-width: 100%;
}

.header-logo a {
    display: block;
    width: 100%;
    height: 50px;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../image/logo_2A.png) no-repeat left center;
    background-size: contain;
}

#headerExtra1 {
    text-align: right;
}

#headerExtra1 p.tel, 
#headerExtra1 p.address {
    margin: 0;
    font-size: 1.08em;
    font-weight: bold;
}

/* 住所の調整 */
.address {
    font-size: 0.75em;
    margin-top: 5px;
    opacity: 0.8; /* 少し透かすことでさらに繊細な印象に */
}

/* 電話番号のラベル（TEL.）も細く */
.tel-label {
    font-weight: 300;
}

/* 電話番号をおしゃれなアンティークセリフ体に */
.tel {
    font-family: 'Playfair Display', serif; /* アンティーク風セリフ体 */
    font-size: 1.8rem !important; /* 少し大きめに */
    letter-spacing: 0.1em;        /* 字間を広げて優雅に */
    color: #956c46;               /* 深みのあるアンティークブラウン */
    font-weight: 600;
    margin: 0;
    line-height: 1;
}

/* 「TEL」の文字だけ少し小さく、横に添える演出 */
.tel span.tel-label {
    font-size: 0.5em;
    vertical-align: middle;
    margin-right: 8px;
    font-family: sans-serif; /* TELの文字はあえてスッキリと */
    letter-spacing: 0;
}
/* メインコンテンツエリア */
#inner {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0 40px;
	box-sizing: border-box;/*スマホでのメイン画像横ズレ回避　*/
}

/* メインカラム */
#wrapper, #main {
    flex: 1;
    min-width: 0;
}

/* サイドバー */
#aside {
    width: 200px;
    margin-left: 20px;
    /* 背景画像が必要な場合 */
    /* background: url("../top-index2022.2.jpg") no-repeat center top; */
    /* background-size: cover; */
}

/* フッター */
#footer {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    border-top: 1px solid #E6E6E6;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* ========================================================
   3. ナビゲーション（横3つずつ配置）
   ======================================================== */
#nav {
    /* 位置を最上部に固定（必要に応じてrelativeに変更してください） */
    width: 100%;
    max-width: 1000px; /* コンテナ幅に合わせる */
    margin: 0 auto;
    background: #fff;
    border: 1px dotted #666;
    z-index: 10;
}

#nav ul {
    display: flex;
    flex-wrap: wrap; /* 横3つで折り返すために必要 */
    margin: 0;
    padding: 0;
    list-style: none;
}

#nav li {
    /* 横3つの幅を指定（100% / 3） */
    flex: 0 0 calc(100% / 3);
    border-bottom: 1px dotted #eee; /* 行間の区切り線（任意） */
    border-right: 1px dotted #eee;  /* 列間の区切り線（任意） */
}

/* 右端の境界線を消す（3の倍数番目） */
#nav li:nth-child(3n) {
    border-right: none;
}

#nav li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px; /* 高さを固定せず余白で調整 */
    text-decoration: none;
    color: #999;
    transition: background 0.3s, color 0.3s;
    font-weight: bold;
}

#nav li a:hover {
	color: #000;
    background-color: #f9f9f9; /* 背景画像がない場合の予備色 */
    background-image: url("../images/navItemBg_2A_01-on.png");
    background-size: cover;
}

/* スマホ表示では2列にするなどの微調整（必要であれば） */
@media (max-width: 480px) {
    #nav li {
        flex: 0 0 50%; /* スマホでは横2つに */
    }
}
/* ========================================================
   4. パーツ・コンポーネント (ファイル3の内容)
   ======================================================== */

/* 汎用コンテナ */
[class^="parts-cnt-"] {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 10px;
}

.parts-cnt-01-060, .parts-cnt-02-060 { width: 60px; }
.parts-cnt-01-120, .parts-cnt-02-120 { width: 120px; }
.parts-cnt-01-180, .parts-cnt-02-180 { width: 180px; }
.parts-cnt-01-240, .parts-cnt-02-240 { width: 240px; }

/* 見出し */
[class^="parts-hl-"] {
    margin: 1em 0 0.5em 0;
    padding: 0.2em 0.5em;
    line-height: 1.4;
    word-break: break-all;
}

/* バナー・リスト */
#banner ul {
    width: 100%;
    margin: 0;
    padding: 10px;
    list-style: none;
    background-color: #E6E6E6;
}

#banner li {
    width: 180px;
    margin: 0 auto 5px auto;
}

#banner li a {
    display: block;
    width: 100%;
    height: 30px;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 商品リスト */
.itemlist {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 15px;
}

.item {
    flex: 0 1 calc(50% - 8px);
    padding: 20px;
    border: 1px solid #E6E6E6;
}

/* ========================================================
   5. ギャラリー・グリッド配置
   ======================================================== */

.photo-grid {
    display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
}

.photo-grid a {
    display: block;
    width: 100%;
}

.photo-grid img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    transition: opacity 0.3s;
    display: block;
}
/* ========================================================
   ６. 特殊エフェクト・その他
   ======================================================== */
.effect8 {
    position: relative;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.effect8::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    right: 10px;
    width: 50%;
    height: 20%;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    transform: rotate(3deg);
}

#shopinfo {
    width: 100%;
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #E6E6E6;
    background-color: #ede4d7;
	box-sizing: border-box; /* パディングによるはみ出しを防止 */
}

hr {
    height: 1px;
    background: #ccc;
    border: none;
    margin: 1.5em 0;
}

/* ========================================================
   ７. レスポンシブ (モバイル対応)
   ======================================================== */

/* 768px以下の設定 */
@media (max-width: 768px) {
    #headerMain {
        flex-direction: column;
        text-align: center;
    }
	.header-logo {
		max-width: 150px !important;
		width: 100%;
        margin: 0 auto 10px;
        height: auto !important;
    }
	.header-container {
        display: flex;
        flex-direction: row; /* 横並びを強制 */
        justify-content: space-between; /* 両端に寄せる */
        align-items: center; /* 上下中央を揃える */
        padding: 5px 10px;
    }
	/* ロゴエリアの調整 */
    .logo-area {
        flex: 0 0 45%; /* ロゴの幅を全体の45%に */
        text-align: left;
    }

    /* 電話番号・住所エリアの調整 */
    .info-area {
        flex: 0 0 60%; /* 電話番号側の幅を60%に */
        text-align: right;
    }

    /* キャッチコピーはスマホでは邪魔になるので非表示にする（推奨） */
    #headerMain h4 {
        display: none;
    }

    /* 電話番号のサイズをスマホ用に最適化 */
    .tel {
        font-size: 1.2rem !important; /* 少し小さくして1行に収める */
        white-space: nowrap; /* 改行させない */
    }

    .tel span.tel-label {
        font-size: 0.6em;
        margin-right: 3px;
    }

    /* 住所はスマホでは長すぎるので非表示、または極小に */
    .address {
        display: none; /* 住所を消すとスッキリします */
    }
    #headerExtra1 {
        text-align: center;
        width: 100%;
    }
    #inner {
        flex-direction: column;
    }
    #aside {
        width: 100%;
        margin-left: 0;
        margin-top: 30px;
    }
    #nav {
        position: static;
        width: 100%;
        transform: none;
    }
}

/* 640px以下の設定 */
@media screen and (max-width: 640px) {
    [class^="parts-cnt-"] {
        width: 100% !important;
    }
    .parts-img-01, .parts-img-02, .parts-img-03, .parts-img-04 {
        float: none !important;
        display: block;
        margin: 0 auto 10px auto;
        text-align: center;
    }
}

/* 480px以下の設定 */
@media (max-width: 480px) {
    /* 1. ヘッダー全体の上下余白を最小に */
    #headerMain {
        padding: 5px 10px !important; /* 20pxから5pxへ */
    }
	/* 2. ロゴの設定：下の余白（margin）を消す */
    .header-logo {
        max-width: 140px !important; /* 少し小さくして高さを抑える */
        margin-bottom: 0 !important; /* ロゴの下の隙間をゼロに */
    }
	/* 3. ロゴと電話番号をさらに密着させる */
    .info-area {
        margin-top: -5px !important; /* ネガティブマージンで少し上に引き上げる */
    }
	/* 4. 電話番号の上下余白もカット */
    .tel {
        font-size: 1.1rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
	.item {
        flex: 0 1 100%;
    }
    #main dt, #main dd {
        width: 100%;
    }
    #main dd {
        margin-bottom: 10px;
    }
}
html {
  scroll-behavior: smooth;
}

#shopinfo {
        padding: 15px;
        font-size: 0.9em;
    }

/* リンク（aタグ）の中にある画像が対象 */
a img {
    transition: opacity 0.3s ease; /* 変化を0.3秒かけて滑らかにする */
}

/* カーソルが乗った（hoverした）ときの設定 */
a img:hover {
    opacity: 0.6; /* 透明度を60%にする（0.0〜1.0で指定） */
}

/* 最初は隠しておく */
.fade-in {
  opacity: 0;
  transform: translateY(30px); /* 30px下に下げておく */
  transition: opacity 0.8s, transform 0.8s; /* 0.8秒かけて変化させる */
}

/* 画面に入った時に追加するクラス */
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻る */
}

/* 2番目の要素（pタグ）だけ少し遅らせる */
.intro-text p.fade-in {
    transition-delay: 0.3s;
}

/* 文字について */
.intro-text h1 {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.5rem; /* 大きさの調整 */
    letter-spacing: 0.1em; /* 字間を少し広げると高級感が出ます */
}

.intro-text h2 {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.0rem; /* 大きさの調整 */
    letter-spacing: 0.1em; /* 字間を少し広げると高級感が出ます */
}

.intro-text h3 {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.5rem; /* 大きさの調整 */
    letter-spacing: 0.1em; /* 字間を少し広げると高級感が出ます */
}

.intro-text h4 {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.0rem; /* 大きさの調整 */
    letter-spacing: 0.1em; /* 字間を少し広げると高級感が出ます */
}


/* ========================================================
   ８. アコーディオンの設定
   ======================================================== */
/* 最初は非表示にする */
.hide-content {
    display: none;
    padding: 20px;
    background: #f9f9f9;
}

/* ボタンのデザイン */
.open-button {
    background: #956c46; /* アンティークブラウン */
    color: #fff;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    margin: 20px auto;
    width: 250px;
    border-radius: 5px;
    transition: 0.3s;
}

.open-button:hover {
    opacity: 0.8;
}

/* ボタンが開いている時の印（任意） */
.open-button.active::after {
    content: " ▲";
}
.open-button::after {
    content: " ▼";
}

/* 開いている時のボタンの色を変える（例：少し暗くする） */
.open-button.active {
    background: #6d4c31; /* 濃いブラウン */
}

/* ついでに、マウスが乗った時に少し浮き上がる演出 */
.open-button {
    transition: all 0.3s ease;
    box-shadow: 0 4px 0 #6d4c31; /* ボタンの厚み（影） */
}

.open-button:active {
    transform: translateY(2px); /* 押した時に少し沈む */
    box-shadow: 0 2px 0 #6d4c31;
}

/* ========================================================
   9. ライトボックスの設定
   ======================================================== */
/* Lightboxの拡大画像が意図せず縮小されるのを防ぐ */
.lb-outerContainer .lb-image {
    max-width: none !important;
    width: auto !important;
    height: auto !important;
}

/* Lightboxの拡大画像に対するレスポンシブ設定 */
.lb-image {
    max-width: 95% !important;  /* スマホで左右に少しだけ余白を作る */
    height: auto !important;    /* 縦横比を維持 */
}

/* PCモニターなど大きな画面での調整 */
@media screen and (min-width: 1024px) {
    .lb-image {
        max-width: 1200px !important; /* PCではしっかり大きく表示 */
    }
}

/* 480px以下のスマホ専用の微調整 */
@media screen and (max-width: 480px) {
    .lb-outerContainer {
        width: 100% !important;
        height: auto !important;
    }
    .lb-container {
        padding: 0 !important;
    }
    .lb-dataContainer {
        width: 100% !important;
    }
}
/* ========================================================
   10. カルーセル演出の設定
   ======================================================== */
/* 格闘ゲーム風スライダーの調整 */
.hakama-slider {
    width: 90%;       /* 画面に対しての割合 */
	max-width: 400px; /* キャラクターが見やすいサイズに調整 */
    margin: 40px auto;
}

.hakama-slider img {
    width: 100%;
    height: auto;
    border: 3px solid #d4af37; /* 金色の枠線をつけるとより格ゲーっぽくなります */
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

/* スライダーの中の画像は、Slickの計算に任せる */
.hakama-slider .slick-slide img {
    max-width: 100% !important;
    display: block;
    margin: 0 auto;
}

/* 矢印（左右のボタン）を見やすくする */
.hakama-slider .slick-prev:before, 
.hakama-slider .slick-next:before {
    color: #956c46 !important; /* サイトの色に合わせる */
    font-size: 30px;
}
.hakama-slider .slick-prev { left: -35px; }
.hakama-slider .slick-next { right: -35px; }


/* 480px以下のレイアウト崩れ対策 */
@media screen and (max-width: 480px) {
    /* スライダーが横幅を突き破らないように固定 */
    .hakama-slider {
        max-width: 300px; /* スマホではさらに小さく（格ゲーの小窓風） */
    }
    
    /* 全体のレイアウト崩れ防止：横揺れを防ぐ */
    #inner, #wrapper, #main, #toppage {
        overflow: hidden; /* 子要素のはみ出しをカット */
        width: 100%;
    }