@charset "utf-8";
/* CSS Document */

/*＝＝タグリセット＝＝*/
*,
::before,
::after{
	margin:0px;
 	padding:0px;
	box-sizing:border-box;
}

ul,
ol{
	list-style:none;
}

a {
	color:inherit;
	text-decoration:none;
}

body{
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	font-size:18px;
	color:#333333;
	line-height:1.5;
	background-color:#EFECE8;
	background-image: linear-gradient(#fdf6eecf, #fdf6eecf),url(./img/noise.png);
	background-repeat: repeat;
	background-size: 100px;
}

/*ヘッダー*/
.header{
  background-color:#FDFAF5;
  padding-top: 20px;
  padding-bottom: 50px;
}
.header-inner{
	max-width: 1200px;
	height:110px;
	margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-menu{
  max-width: 1200px;
  height:30px;
  margin:0 auto;
  align-items: center;
}

.site-menu ul{
  display: flex;
  justify-content:space-around;
}

.site-menu ul li{
  font-size: 24px;
}

.menu-toggle {
  display: none;           /* PCでは三本線はいらないので隠す */
}

/* 通常の状態 */
.site-menu ul li a {
  display: block; /* リンクの反応範囲を広げる */
  transition: color 0.3s; /* 0.3秒かけて色を変化させる（アニメーション） */
}

/* マウスを乗せた時 */
.site-menu ul li a:hover {
  color: #cda06d; /* お好みのアクセントカラーに（例：ゴールド系） */
  text-decoration: underline; /* 下線を引く（お好みで） */
}

/*トップページ*/
.first-view{
  max-width: 1200px;
  height:600px;
  background-image: url(./img/bg-main.jpg);
  margin: 50px auto 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

.lead{
  max-width: 1200px;
  margin: 30px auto;
  text-align: center;
}

.contents h2{
  text-align: center;
  position: relative; /* 疑似要素の位置基準にする */
  padding-top: 20px; /* 英語を入れるスペースを空ける */
  padding-bottom: 15px; 
  font-size: 1.8rem;
  margin-bottom: 40px;
}

h2::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 中央寄せ */
  
  /* 画像の雰囲気に合わせたデザイン（例） */
  color: #CA726E;       /* ボタンと同じ赤色 */
  font-size: 0.9rem;   /* 少し小さく */
  font-family: 'Montserrat', sans-serif; /* 英語用のフォントを指定するとカッコいい */
  font-weight: bold;
  text-transform: uppercase; /* すべて大文字にする */
  letter-spacing: 0.1em;     /* 文字間隔を広げてオシャレに */
}

.news h2::before {
  content: "NEWS";
}

.about h2::before { 
  content: "ABOUT"; 
}

.search h2::before { 
  content: "SEARCH"; 
}

.retailer h2::before { 
  content: "RETAILER"; 
}

.area h2::before { 
  content: "AREA"; 
}

.map h2::before { 
  content: "MAP"; 
}

.contact h2::before { 
  content: "CONTACT"; 
}

h2 {
  position: relative;
  text-align: center;
  padding-bottom: 25px; /* 下の丸を入れるスペースを空ける */
  /* ...今の設定... */
}

/* 疑似要素（::after）で丸を作る */
h2::after {
  content: "● ● ● ● ●";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* 中央寄せ */
  
  color: #CA726E;       /* 丸の色（赤） */
  font-size: 10px;      /* 丸の大きさ */
  letter-spacing: 0.5em; /* 丸と丸の間の隙間 */
  font-family: Arial, sans-serif; /* 綺麗な丸になるようにフォントを指定 */
}

section {
  max-width: 1200px;
  width:95%;
  margin: 50px auto;
  padding: 50px;
  background-color: #FDFAF5;
}

.button{
  display: block;
  align-items: center;
  justify-content: center;
  
  width: 450px; 
  max-width: 90%;
  line-height: 50px;
  margin: 30px auto;

  background-color: #CA726E;
  color:#ffffff;
  text-align: center;
  border-radius: 25px;

  transition: transform 0.2s, background-color 0.2s;
}

.button:hover {
  background-color: #d18581; /* 少しだけ明るく */
  transform: translateY(-2px); /* 2pxだけ上に浮かす */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 軽い影をつける */
}


/* 外側の枠を整える */
.news .news {
  max-width: 1000px;
  margin: 0 auto;
}

/* 各ニュースの塊（dlを囲っているdiv）に線を引く */
.news .news > div {
  border-bottom: 1px dashed #ccc;
  padding: 10px 0; /* 線と文字の間に少しゆとりを */
}

/* 一番最後だけ線を消す */
.news .news > div:last-child {
  border-bottom: none;
}

/* dlの中身を横並びにする */
.news dl {
  display: flex;
  margin: 0;
}

.news dt {
  flex: 0 0 150px;
  font-weight: bold;
}

.news dd {
  flex: 1;
  min-width: 0; /* はみ出し防止！ */
  margin: 0;
}

.about dl {
  max-width: 700px;
  margin: 40px auto;
}

.about dt {
  font-weight: bold;
  color: #CA726E; /* ボタンと同じアクセントカラー */
  margin-bottom: 5px;
}

.about dd {
  margin-left: 20px;         /* デフォルトのインデントを消す */
  margin-bottom: 25px;    /* 項目ごとの間隔をあける */
  padding-bottom: 15px;
  border-bottom: 1px dashed #ccc; /* 下線を点線にして区切る */
}

.about dd:last-child {
  border-bottom: none;    /* 最後の下線は消す */
}
/*エリア・地図の切り替えボタン*/

.search-mode-switcher {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.mode-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  border: 2px solid #CA726E; /* メインカラーの枠 */
  color: #CA726E;
  background-color: #fff;
  transition: 0.3s;
}


/*リセットボタン*/
.reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  max-width:200px;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  border: 2px solid #CA726E; /* メインカラーの枠 */
  color: #CA726E;
  background-color: #fff;
  transition: 0.3s;
}

/* 現在のページのボタンだけ色を塗る */
.mode-btn.active {
  background-color: #CA726E;
  color: #fff;
}

.mode-btn:hover {
  opacity: 0.7;
}
/* 事業者のページ */
.retailer > div{
  max-width: 900px;
  margin: 0 auto;
}

.retailer > div >p{
  margin-bottom: 25px;
}

.retailer-btngr{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.button-m{
  display: flex;
  align-items: center;
  justify-content: center;
 
  flex: 1;
  max-width:300px;
  line-height: 50px;
  margin: 30px auto;

  background-color: #CA726E;
  color:#ffffff;
  text-align: center;
  border-radius: 25px;

  transition: transform 0.2s, background-color 0.2s;
}

.no-active{
 background-color: #fff;
 border: 2px solid #CA726E; /* メインカラーの枠 */
 color: #CA726E;
}

.button-m.no-active:hover {
  background-color: #fff; /* 白のまま */
  transform: translateY(-2px); /* 2pxだけ上に浮かす */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 軽い影をつける */
}

/*商品券ページの表*/
/* テーブル全体のスタイル */
.design-table {
  width: 85%;
  border-collapse: collapse; /* 境界線を重ねてスッキリさせる */
  margin: 20px auto;
  table-layout: fixed; /* 列の幅を固定しやすくする */
}

/* 見出し（左側の列） */
.design-table th {
  width: 17%; /* 項目名の幅を調整 */
  padding: 15px 18px;
  border: 1px solid #e0e0e0;
  text-align: left;
  vertical-align: top;
  padding-top: 20px;
  font-weight: bold;
  color: #333;
}

/* 内容（右側の列） */
.design-table td {
  padding: 15px 20px;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
  line-height: 1.6;
}
/* お問い合わせのページ */
.contact > div{
  max-width: 650px;
  margin: 0 auto;
}
.contact > div >p{
  line-height: 1.6;
  overflow-wrap: break-word;
}
.contact h3{
  display: inline-block;
  background-color: #a7bf4e;
  font-size: 24px;
  color:fff;
  padding:3px;
  margin:15px 0;
}
.contact > div > div >p{
  margin-left :30px;
  padding-left :10px;
  overflow-wrap: break-word;
}

.contact > div > div > p> a{
  color:1a3873;
}
.date{
  color:d90718;
  font-weight: bold;
  font-size: 22px;
  line-height: 1.6;
  border:2px solid #d90718;
  width: fit-content; /* 幅を文字の長さに合わせる */
  padding: 0 15px;
  margin:10px 0 10px -25px;
}
.name{
  font-weight: bold;
  font-size: 20px;
}


/*フッター*/
.footer{
  background-color: #8FA63A;
  color:#ffffff;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 70px;
}

.footer-name{
  font-size: 24px;
}

.footer-inner p {
  line-height: 1.5; /* 行間を広げて読みやすく */
  margin-bottom: 0.3em;
}


@media screen and (max-width: 800px) {
  .first-view {
  width: 100%;           /* 箱の幅をいっぱいにする */
  max-width: 100%; /* PC版の1200pxを解除 */
  /* 重要：高さを「固定の600px」から「比率」に変更 */
  height: auto;
  aspect-ratio: 4 / 3;   /* 800:600（4:3）の比率で高さを自動生成する */
  background-image: url(./img/bg-main-sp.jpg);
  background-size: cover; /* 箱を画像で埋め尽くす */
  background-position: center; /* 位置も中央に直すと綺麗です */
  margin: 0; /* ← 左右の余白を一度リセットしてみる */
}
/*最新情報ブログ*/
.news .news {
  max-width: 95％;
  margin: 0 auto;
}
/* dlの中身を縦並びにする */
.news dl {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.news dt {
  flex: 0 0 40px;
}

/*ボタンの文字小さく */
.button{
  font-size:16px;
}

/*事業者ページ*/
.retailer {
	width:95%;
	padding:50px 10px;
}

.retailer > div >p{
  margin-top: 25px;
}
.retailer-btngr {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center;    /* 中央寄せ */
    gap: 30px;
  }

.button-m{
  max-width:70%;
  width:400px;
  font-size:16px;
  /* 余白を上書き：上下の 30px を小さくします */
  margin: 0 auto;
}

/*お問い合わせ先ページ*/
.contact {
	width:95%;
	padding:50px 10px;
}
/* 1. ヘッダー全体：中身がはみ出しても隠さない */
  .header {
    overflow: visible !important;
    position: relative !important;
  }

  .header-inner {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    padding: 10px 15px !important;
    background-color: #FDFAF5 !important;
    position: relative;
    z-index: 1000; /* ヘッダー自体の重なり */
  }

  /* 2. 上段：言語バーとボタン（ここを絶対に見せる） */
  .header-controls {
    order: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    height: 50px !important; /* 高さを確保 */
    position: relative;
    z-index: 10001 !important; /* ボタンと言語バーを最前面へ */
  }

  /* 3. ハンバーガーボタン：透明化を強制解除 */
  .menu-toggle {
    display: block !important;
    width: 40px !important;
    height: 35px !important;
    background-color: #FDFAF5 !important; /*  確認のため、一旦「黒」にします */
    border: 1px solid #fff !important;
    border-radius: 4px;
    position: relative !important;
    z-index: 10002 !important; /* 他の何よりも上に置く */
    cursor: pointer;
  }

  /* 三本線（白） */
  .menu-toggle span {
    display: block !important;
    position: absolute;
    left: 7px;
    width: 26px !important;
    height: 2px !important;
    background-color: #333 !important;
  }
  .menu-toggle span:nth-child(1) { top: 9px; }
  .menu-toggle span:nth-child(2) { top: 16px; }
  .menu-toggle span:nth-child(3) { top: 23px; }

  /* 4. タイトル（下段） */
  .header-inner h1 {
    order: 2 !important;
    width: 100% !important;
    text-align: center !important;
    margin: 10px 0 0 0 !important;
    font-size: 16px !important;
  }

 /* 5. 開くメニュー本体（外枠） */
.site-menu {
  display: none; /* 通常は隠す */
  width: 100% !important;
  background-color: #FDFAF5 !important;
  position: absolute !important;
  top: 100%;
  left: 0;
  z-index: 9999 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ボタンを押した時に表示させる設定 */
.site-menu.is-active {
  display: block !important; /* 外枠を表示 */
}

/* メニュー内のリスト（縦並びを強制） */
.site-menu ul {
  display: flex !important;
  flex-direction: column !important; /*  これで縦に並ぶ */
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* メニューの各項目（文字を中央に） */
.site-menu li a {
  display: flex !important;          /*  blockからflexに変更 */
  justify-content: center !important; /* 左右中央 */
  align-items: center !important;     /* 上下中央 */
  
  width: 100% !important;
  min-height: 60px !important;        /* 指で押しやすい高さ */
  padding: 10px 20px !important;
  background-color: #FDFAF5 !important;
  border-bottom: 1px solid #eee;
  color: #333 !important;
  text-decoration: none !important;
  font-size: 18px !important;
}
#google_translate_element {
  display: block !important;
  min-width: 160px !important;
  min-height: 26px !important; /* Safariに場所を認識させる最低限の高さ */
  background-color: rgba(255,255,255,0.01) !important; /* ほぼ透明な色をつけて「存在」させる */
  border: 1px solid transparent !important;
}

/*商品券ページの表*/
/* テーブル全体を画面幅いっぱい（または指定幅）にする */
  .design-table {
    width: 100%; /* スマホでは少し広めにするのがおすすめ */
    display: block;
  }

  /* <thead>, <tbody>, <tr>, <th>, <td> すべてをブロック要素にする */
  .design-table thead, 
  .design-table tbody, 
  .design-table tr, 
  .design-table th, 
  .design-table td {
    display: block;
    width: 100%;
  }

  /* 見出し（th）のスタイル調整 */
  .design-table th {
    background-color: #EFECE8; /* 見出しらしく色をつける */
    border-bottom: none;       /* 下のtdと繋がって見えるように */
    padding: 10px;
    box-sizing: border-box;
  }

  /* 内容（td）のスタイル調整 */
  .design-table td {
    border-top: 1px solid #ddd;
    margin-bottom: 20px;       /* 次の項目との間に隙間を作る */
    padding: 10px 15px;
    box-sizing: border-box;
  }
.footer{
  padding-top: 30px;
  padding-bottom: 50px;
}

.footer-name{
  font-size: 20px;
}

.footer-inner p {
  font-size: 16px;
  line-height: 1.2; /* 行間を広げて読みやすく */
  margin-bottom: 0.3em;
}
}