@charset "utf-8";

/* すべての要素に適用される */
* {
    box-sizing: border-box; /* ボックスモデルの変更 */
    margin: 0; /* 要素外余白０ */
    padding: 0; /* 要素内余白０ */
}

/* --------------------------------------------------
    ★ 基本の文字設定
-------------------------------------------------- */
body {
    /* 書体 */
    font-family: "メイリオ", Meiryo, "游ゴシック","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

    /* 文字色 */
    color: #3f312b;

    /* 基本の文字サイズ */
    font-size: 16px;
}

/* テーブルの基本設定　セルの線を1重に */
table { border-collapse: collapse; }

/* リンク　スムーススクロール */
html,body{ scroll-behavior: smooth; }

/* ★ リンク　変化するまでの時間を設定（1sは1秒） */
a { transition:0.5s; }

/* 画像リンク　スマホで見たときに出る枠線を消す */
a img { border: none; }


/* 画像 最大横幅100% */
img {
    max-width: 100%;
}

/* 今回のレイアウト用 */
html, body {
    height: 100vh; /* 画面の高さ */
    overflow: hidden; /* ウィンドウ全体のスクロールを無効化 */
}

/* -------------------------------------------
  背景用
  <div class="background-image"></div>の部分
  装飾専用divでは、あえて中を空にしておく
---------------------------------------------- */
/* PC時の背景画像 */
.background-image {
    position: fixed; /* 固定配置 */
    top: 0; /* 上から */
    left: 0; /* 左から */
    width: 100%; /* 横幅 */
    height: 100%; /* 高さ */

    /* 背景画像を複数指定　先頭のものが一番上 */
    background-image:url(../img/fu-jin.png), url(../img/rai-jin.png), url(../img/fuji-w1600xh900.jpg);
    background-repeat: no-repeat;
    background-size: 25%, 25%, cover;
    background-position: left top, right bottom, center top;
    background-attachment: fixed; /* 固定 */
    z-index: -1; /* コンテンツより後ろに配置 */
}


/* 全体を囲む枠 */
.wrap {
    position: relative; /* ポジションを使いたいので */
    line-height: 1.7;
}


/* -------------------------------------------
  ヘッダー(nav-header)とコンテンツ(content)の囲み
---------------------------------------------- */
 .nav-header-to-content-kakomi {
    display: flex; /* メニューとコンテンツを横並び */
    justify-content: center;/* 全体を中央に寄せる */
    width: 100%; /* 横幅 */
    min-height: 100vh; /* コンテンツが少なくても画面全体を埋める */
 }


/* -------------------------------------------
  画面中央のコンテンツを囲む枠
---------------------------------------------- */
.content-kakomi {
    width: 700px; /* 横幅 */
    height: 90vh; /* 高さを画面の90%に固定 */
    overflow-y: auto; /* 中身だけスクロールさせる */

    /* box-shadow: 左右の向きpx  上下の向きpx ぼかしpx 広がりpx 色 内側指定; */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

    margin: 5vh auto; /* 上下5%のマージンで左右中央寄せ */
    border-radius: 8px; /* 角丸 */

    background-color: rgba(255, 255, 255, 0.9);
    padding: 4%; /* 要素内余白 */
    border: solid 3px rgb(136, 101, 20,0.8);
}

/* ロゴ（画面左上に配置） */
.logo {
    position: fixed; /* 固定配置 */
    left: 20px; /* 左から */
    top: 20px; /* 上から */
    color: #fff; /* 文字色 */

    /* text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色; */
    text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.8);

  /* Googleフォント */
  font-family: "Zen Antique Soft", serif;
  font-weight: 700;
  font-style: normal;

  font-size: 40px; /* 文字サイズ */
}

/* -------------------------------------------
   見出し
---------------------------------------------- */
h1 {
  /* Googleフォント */
  font-family: "Zen Antique Soft", serif;
  font-weight: 700;
  font-style: normal;

  font-size: 40px; /* 文字サイズ */
  color: #7b6c3e; /* 文字色 */
}

/* スマホでは.logoは非表示 */
@media (max-width: 767px) {
.logo {
    display: none; /* 非表示 */
}
}

h2 {
    color: #7b6c3e; /* 文字色 */
    margin-bottom: 1em; /* 見出しの下の余白 */
    padding: 5px; /* 文字と線のすきま */
    border-left: 10px #7b6c3e solid; /* 線 左 */
    border-right: 10px #7b6c3e solid; /* 線 右 */
    border-bottom: 1px #7b6c3e solid; /* 線 下 */
    border-top: 1px #7b6c3e solid; /* 線 上 */
    text-align: center; /*行そろええ */
}

/* 見出し：お知らせ */
h3 {
    color: #7b6c3e; /* 文字色 */
    border-left: 5px #7b6c3e solid; /* 線 左 */
    border-bottom: 1px #7b6c3e dotted; /* 線 下 */
    padding-left: 7px; /* 左線とのすきま */
    margin-bottom: 0.5rem; /* 見出しの下余白 */
}

/* リンク */
a {
    color: #3f312b; /* 文字色 */
}

a:hover {
    color: #7a4171; /* 文字色 */
}


/* -------------------------------------------
   グローバルナビゲーション
　　ヘッダー(nav-header)（右メニュー）
---------------------------------------------- */
.nav-header {
    width: 200px; /* ナビゲーションの幅 */
    flex-shrink: 0; /* フレックスボックスの子・縮まないように */
    padding: 50px 30px ; /* 要素内余白 */
    position: fixed; /* 固定 */
    right: 0; /* 右端に配置 */
    height: 100vh; /* 画面いっぱいの高さ */
    z-index: 10; /* 重ね順上に */
    background-color: rgba(255,255,255,0.7); /* 背景色 */
}

/* ヘッダー(nav-header)（右メニュー）メニュー個別 */
.nav-header ul li {
    list-style: none; /* 先頭の●出さない */
    margin-bottom: 1em; /* 要素外下余白 */
    text-align: left; /* 行そろえ */
}

/* グローバルメニューリンク文字 */
.nav-header ul li a {
    position: relative; /* 下線が横に伸びるアニメ使いたいので */
    text-decoration: none; /* リンク下線消す */
    font-weight: bold; /* 太字 */
    display: block;
    padding: 0.2em;
}

/* ホバーで下線が横に伸びるアニメ用 */
/* 下線アニメーション用の擬似要素 */
.nav-header ul li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%; /* 初期状態は0ホバー時に100% */
    height: 2px;
    background-color: #7a4171;
    transition: width 0.3s ease-in-out; /* アニメーション設定 */
}

/* グローバルメニューリンク文字 */
.nav-header ul li a:hover {
    color: #7a4171;
}

/* ホバー時に下線が伸びるアニメーション用の擬似要素 */
.nav-header ul li a:hover::after {
    width: 100%; /* 全体に広がる */
}

/* スマホ用 */
@media (max-width: 767px) {
/* ヘッダー(nav-header)（右メニュー）幅無 */
    .nav-header {
        width: 0; /* ナビゲーションの幅 */
        padding: 0; /* 要素内余白 */
    }

    /* 背景画像 */
    .background-image {
        display: none; /* 非表示 */
    }

     /* 画面中央のコンテンツを囲む枠 */
    .content-kakomi {
        width: 100%; /* 横幅 */
        margin: 0; /* 要素外余白 */
        border: none; /* 枠線無 */
        height: 100vh; /* 高さを画面の100%に固定 */
    }
}


/* -------------------------------------------
   お知らせ
---------------------------------------------- */
/* お知らせの小見出し */
dl span {
    font-size: 0.7rem;
    background-color: #fff;
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

/* 出店 */
.demise{
    border: solid 1px #7b6c3e;
    color: #7b6c3e;
}
/* イベント */
.event {
    border: solid 1px #bb5535;
    color: #bb5535;
}

/* お知らせ日付 */
dt {
    font-weight: bold; /* 太字 */
}

/* お知らせ区切り */
dd {
    padding-bottom: 0.5em; /* 一番下の文字と下線の間 */
    border-bottom: 1px #7b6c3e dotted; /* 線 下 */
    margin-bottom: 0.5em; /* 下線と次のお知らせの間 */
}

/* --------------------------------------------------------------------------
    クリックで画像拡大
---------------------------------------------------------------------------- */
/*  クリックで画像拡大　全体囲み */
.shohin-wrap {
	display: grid;  /* グリッドを使用 */
/* グリッドの横を何分割するか：繰り返し（繰り返す数, 要素の幅）； */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px 10px; /*　空き： 下　横 　*/
}
/* クリックで画像拡大 単体  */
.shohin-img {
/*	width: 100%; /* 横幅  */
	height: 180px; /* 高さ  */
	position: relative; /* 位置：下から出てくるキャプションのために指定  */
	overflow: hidden; /* はみ出たところ非表示  */
	border: solid 1px rgba(111,81,76,.3); /* 枠線  */
	margin-bottom: 20px; /* マージン下  */
}

/* 下から出てくるキャプション部分 */
.shohin-img a p {
	margin-bottom: 0; /* マージン下0  */
	/* ↓文字を上下左右中央に配置 */
	display: flex;/* フレックスボックス */
	align-items: center;/* 高さの中心 */
	justify-content: center;/* 左右中心 */
}

/* 文字部分 */
.shohin-img a{
	color: #FFF; /* 文字色 */
	display: block; /* ブロック要素にする */
}

/* 文字部分 */
.shohin-img a:hover{
	color: #FFF; /* 文字色 */
	text-shadow: 0px 0px 8px rgba(255,255,255,1); /* 横方向 下方向 ぼかし 色 */
}

/* 画像部分 */
.shohin-img img {
    /* width: 100%;
    height: auto; */
    display: block;
	object-position: 0% 0%; /* 左上に配置 */
	object-fit: cover; /* 縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分はトリミング */
}


/* 画像部分 */
.shohin-img img:hover {
	opacity: 0.7;  /* 画像半透明 */
}

/* ホバーで画像を大きくする */
.shohin-img a:hover img {
  transform: scale(1.3); /* 拡大 */
  transition: transform .6s ease; /* ゆっくり変化させる */
}

/* 下から出てくる部分 */
.shohin-img-caption {
  position: absolute; /* ポジション　絶対配置 */
  bottom: -60px; /* 下 */
  left: 0; /* 左 */
  z-index: 2; /* 重ね順 */
  width: 100%; /* 横幅 */
  height: 60px; /* 高さ */
  background-color: rgba(111,81,76,.6); /* 背景色 */
  -webkit-transition: .3s; /* 変化までの時間 */
  transition: .3s; /* 変化までの時間 */
}

/* 下から出てくる部分 */
.shohin-img-caption:hover{
	background-color: rgba(111,81,76,.8); /* 背景色半透明 */	
}

/* 下から出てくる部分 */
.shohin-img:hover .shohin-img-caption { 
	position: absolute; /* ポジション */
	bottom: 0; /* 下0 */
}

/* -------------------------------------------
　　マージン ・　パディング・行揃え
---------------------------------------------- */
/* マージン上 */
.margin-top-30 {
    margin-top: 30px;
}
.margin-top-50 {
    margin-top: 50px;
}

.padding-top-50 {
    padding-top: 50px;
}

/* 行揃え中央 */
.center {
    text-align: center;
}

/* -------------------------------------------
　　QRコード 
---------------------------------------------- */
.qr img {
    width: 40%; /* 横幅 */
}

/* スマホ用 */
@media (max-width: 767px) {
.qr img {
    width: 80%;
    }
}

/* -------------------------------------------
　　Googleマップ
---------------------------------------------- */
/* Googleマップ */
.map iframe {  /* 貼り込んだグーグルマップに対して */
  width: 100%; /* 横幅100％ */
  height: 240px; /* 高さ固定サイズ */
}
 
.map { /* マップのiframeを囲んでいる p に対して */
    line-height: 1; /* スキマが出ないように */
}