メニューを切り替える
個人設定メニューを切り替える
個人メニューを切り替える
ログインしていません
編集を行うと、IPアドレスが公開されます。

「テンプレート:飲食店」の版間の差分

提供: 川西図鑑
編集の要約なし
編集の要約なし
280行目: 280行目:


<html><style>
<html><style>
.wikitable th{
/* ========================================
   min-width: 94px;
  無料版図鑑ページ 全体スタイル
======================================== */
 
/* 基本リセット */
.template-tenpo * {
   box-sizing: border-box;
}
}
/* ========================================
  上部メインビジュアル
======================================== */
.img-crop {
.img-crop {
   width: 342px;
   width: 100%;
   height: 244px;
  max-width: 800px;
   height: 400px;
   overflow: hidden;
   overflow: hidden;
   position: relative;
   position: relative;
   margin: 0 auto; /* 中央寄せ(任意) */
   margin: 0 auto 30px;
   border-radius: 24px;
   border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
}
.img-crop p,
.img-crop p,
.img-crop span,
.img-crop span,
299行目: 311行目:
   line-height: 0 !important;
   line-height: 0 !important;
}
}
.crop-img img {
.crop-img img {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
   object-fit: cover; /* ← これが「クロップ風拡大」 */
   object-fit: cover;
   object-position: center; /* 中心に寄せる */
   object-position: center;
   display: block;
   display: block;
}
}
/* ========================================
  基本情報ヘッダー(最寄り・ジャンル・予算)
======================================== */
.info-header {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
  padding: 20px 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  border-left: 4px solid #4CAF50;
}
.info-header > div {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #333;
}
.info-header strong {
  color: #2e7d32;
  font-weight: 600;
}
/* ========================================
  説明文エリア
======================================== */
.description-text {
  background: #fff;
  padding: 20px 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  line-height: 1.8;
  color: #555;
  border: 1px solid #e0e0e0;
}
/* ========================================
  セクション見出し
======================================== */
h4 {
  font-size: 1.4rem;
  color: #2e7d32;
  margin: 40px 0 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid #4CAF50;
  font-weight: 600;
}
/* ========================================
  テーブルスタイル(基本情報)
======================================== */
.wikitable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 30px;
}
.wikitable th {
  background: #f5f5f5;
  color: #333;
  font-weight: 600;
  text-align: left;
  padding: 15px 20px;
  min-width: 120px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.95rem;
}
.wikitable td {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  color: #555;
  line-height: 1.7;
}
.wikitable tr:last-child th,
.wikitable tr:last-child td {
  border-bottom: none;
}
/* ========================================
  2カラムレイアウト(画像+テーブル)
======================================== */
.flex-box {
.flex-box {
   display: flex;
   display: flex;
   align-items: flex-start;
   align-items: flex-start;
   gap: 20px;
   gap: 30px;
  margin-bottom: 30px;
}
}


/* 左がテーブル、右が画像 */
.flex-left {
.flex-left {
   flex: 1;
   flex: 1;
318行目: 419行目:
   max-width: 100%;
   max-width: 100%;
}
}
.flex-right {
.flex-right {
   flex: 1;
   flex: 0 0 400px;
   order: 2;
   order: 2;
}
}
.flex-right .img-crop {
  width: 100%;
  height: 280px;
  margin: 0;
}
/* スマホ表示では縦並び&画像を上へ */
/* スマホ表示では縦並び&画像を上へ */
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {
328行目: 437行目:
   }
   }
   .flex-left {
   .flex-left {
     order: 2; /* テーブルを下へ */
     order: 2;
   }
   }
   .flex-right {
   .flex-right {
     order: 1; /* 画像を上へ */
     order: 1;
     display: none;
    flex: 1;
    width: 100%;
     display: none; /* スマホでは画像非表示 */
   }
   }
}
}


/* ========================================
  マップ埋め込みエリア
======================================== */
.map-embed {
.map-embed {
    position: relative;
  position: relative;
    background: #dfe3e8;     /* これが読み込み中の背景 */
  background: #dfe3e8;
    border-radius: 8px;
  border-radius: 12px;
    overflow: hidden;
  overflow: hidden;
  margin: 30px auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
}
/* 読み込み中のアニメーション */
/* 読み込み中のアニメーション */
.map-embed::before {
.map-embed::before {
    content: "";
  content: "";
    position: absolute;
  position: absolute;
    top: 0; left: 0;
  top: 0;
    width: 100%; height: 100%;
  left: 0;
    background: linear-gradient(
  width: 100%;
        90deg,
  height: 100%;
        #dfe3e8 0%,
  background: linear-gradient(
        #f5f5f5 50%,
    90deg,
        #dfe3e8 100%
    #dfe3e8 0%,
    );
    #f5f5f5 50%,
    animation: shimmer 1.6s infinite;
    #dfe3e8 100%
  );
  animation: shimmer 1.6s infinite;
}
}
@keyframes shimmer {
@keyframes shimmer {
    0% { transform: translateX(-100%); }
  0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
}


/* iframe が入ったら Skeleton 非表示 */
.map-embed.loaded {
.map-embed.loaded {
    background: none;
  background: none;
}
}
.map-embed.loaded::before {
.map-embed.loaded::before {
    display: none;
  display: none;
}
 
/* ========================================
  CTAボタン
======================================== */
.cta {
  margin: 30px 0;
  text-align: center;
}
}


.cta a {
.cta a {
   display: inline-block;
   display: inline-block;
   padding: 12px 20px;
   padding: 14px 30px;
   border-radius: 6px;
   border-radius: 50px;
   font-weight: 600;
   font-weight: 600;
   text-decoration: none;
   text-decoration: none;
   background: #2563eb;
   background: #4CAF50;
   color: #fff;
   color: #fff;
  transition: all 0.3s;
  box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
  font-size: 0.95rem;
}
}


/* hover */
.cta a:hover {
.cta a:hover {
   background: #1d4ed8;
   background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}
}


/* visitedで色が変わらないように */
.cta a:visited {
.cta a:visited {
   color: #fff;
   color: #fff;
}
/* ========================================
  セクション別スタイル
======================================== */
/* たばこ・お席・設備・その他のテーブル */
.section-table {
  margin-bottom: 20px;
}
/* SNSアイコンエリア */
.sns-links {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sns-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f5f5f5;
  border-radius: 20px;
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
  transition: background 0.3s;
}
.sns-links a:hover {
  background: #e0e0e0;
}
/* リンクエリア */
.external-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.external-links a {
  color: #4CAF50;
  text-decoration: none;
  font-weight: 500;
}
.external-links a:hover {
  text-decoration: underline;
}
/* ========================================
  レスポンシブ調整
======================================== */
@media screen and (max-width: 768px) {
  .img-crop {
    height: 250px;
  }
 
  .wikitable th {
    min-width: 90px;
    font-size: 0.9rem;
    padding: 12px 15px;
  }
 
  .wikitable td {
    padding: 12px 15px;
    font-size: 0.9rem;
  }
 
  h4 {
    font-size: 1.2rem;
  }
 
  .info-header {
    padding: 15px 20px;
  }
}
/* ========================================
  StreetView / Placeholder
======================================== */
.streetview-placeholder,
.streetview-api-placeholder {
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.9rem;
}
}



2026年1月20日 (火) 10:55時点における版



昼: - ~-  夜: - ~-

川西市にあるは、のお店です。

基本情報

店名 不明
ジャンル 不明
郵便番号 不明
住所 不明
営業時間






平均予算 昼:-~-

夜:-~-

支払い方法 カード 不明

電子マネー 不明

QR決済 不明

その他 なし

テイクアウト あり
SNS
リンク


たばこ

禁煙・喫煙 不明
喫煙専用室 不明

お席

総席数 不明
個室 不明
貸切 不明

設備

Wi-Fi 不明
バリアフリー 不明
駐車場 不明
その他設備 不明

その他

飲み放題 不明
食べ放題 不明
お子様連れ


お店のオーナー様へ

情報の修正や、写真・メニューの追加、公式図鑑ページとしての掲載が可能です。


市民の皆さんへ 情報提供のお願い

営業時間や定休日の変更、新店舗情報など、市民の皆さんからの情報提供を受け付けています。

このテンプレートはテーブル「飲食店情報」を定義しています。 このテーブルはまだ作成されていません。