@charset "UTF-8";

body{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

/* ------------------------------
  ベース変数（色・影・角丸）
------------------------------ */
:root{
  --map-bg: #fff;
  --map-text-muted: #7A7A7A;
  --brand: #DFBE92;
  --brand-strong: #CD9A55;
  --ink: #222;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --border: 1px solid rgba(0,0,0,.06);
}

/* ------------------------------
  セクション全体
------------------------------ */
.map{
  max-width: 960px;
  margin: 32px auto;
  padding: 20px;
  background: var(--map-bg);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* タイトルがある場合の余白（任意） */
.map h2{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
}

/* ------------------------------
  埋め込みマップ（アスペクト比で高さ調整）
------------------------------ */
.map-iframe{
  position: relative;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: #f6f6f6;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}

/* 近年のブラウザは aspect-ratio が使えます */
.map-iframe iframe{
  width: 100%;
  aspect-ratio: 16 / 10; /* 画面比に応じて自動で高さ決定 */
  border: 0;
  display: block;
}

/* ------------------------------
  ボタン
------------------------------ */
#openMap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  width: 100%;
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(205,154,85,.25);
  cursor: pointer;
  transition: transform .08s ease-out, box-shadow .2s ease, background .2s ease;
}

#openMap:hover{
  background: var(--brand-strong);
  box-shadow: 0 10px 24px rgba(205,154,85,.32);
}

#openMap:active{
  transform: translateY(1px);
}

#openMap:focus{
  outline: 2px solid rgba(205,154,85,.55);
  outline-offset: 2px;
}

/* 説明文 */
.map p{
  text-align: center;
  color: var(--map-text-muted);
  font-size: 14px;
  margin: 10px 0 0;
}


/* 結果表示用 */
#nearestSalon {
  text-align: center;
  font-size: 16px;     /* ちょっと大きめ */
  font-weight: 600;    /* 少し太字 */
  color: #333;         /* 濃いめの文字色 */
  margin-top: 12px;
}
#nearestSalon strong {
  color: #CD9A55;      /* ブランドカラーでサロン名を強調 */
  font-weight: 700;    /* より太字 */
}

/* 入力欄全体 */
#addressInput {
  width: 80%;           /* 横幅を広めに */
  max-width: 400px;
  padding: 10px 14px;   /* 内側余白を広めに */
  font-size: 16px;      /* 文字大きめ */
  border: 2px solid #ccc;
  border-radius: 8px;   /* 角丸 */
  margin: 10px auto;
  display: block;
}

/* フォーカス時（クリックしたとき） */
#addressInput:focus {
  border-color: #CD9A55;   /* ブランドカラーで枠を強調 */
  outline: none;           /* デフォルトの青枠を消す */
  box-shadow: 0 0 5px rgba(205, 154, 85, 0.5);
}


.map-list{
	margin: 0 25%;
}

h1{
	color: #D6883A;
	text-align: center;
	margin:5% 0 3%;
}

.ken {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ★3カラムに変更★ */
  gap:20px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px; /* 必要に応じて幅を広げる */
}

.ken-inner {
  background-color: #f9f9f9;
  padding: 12px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
}
.ken-inner:hover{
  background-color:#D9D9D9;
  cursor: pointer;          /* カーソルをポインターに */
}

.ken-inner a{
	text-decoration: none;
	color:#383838;
}

.map-inner-p a{
	text-decoration: none;
	word-wrap: break-word;
	color: #3A3A3A;
	display: block;
}


.map-inner h2{
	background-color: #e6c097;
	margin-top: 5%;
	padding:1% 2%;
	color: #ffffff;	
}
.todohuken{
	margin-left: 2%;
	color: #e6c097;
	border-bottom: solid 2px #e6c097;
}


.map-inner-p{
	padding-left: 2%;
  border: 1px solid #ccc;
}

.map-inner-p{
	line-height: 1.5;
}

.map-inner-p p{
	color: #4E4E4E;
	font-size: 14px;
}


.map-inner-p a{
	color: #008FFF;
}

@media screen and (max-width: 786px){
	.map,.map-iframe,#openMap,.map-list{
		margin: 0 auto;
		padding-bottom: 5%;
	}
	.ken {
    grid-template-columns: repeat(2, 1fr);
  }  
}

#salon-list {
  margin-top: 20px;
  padding: 12px;
  background-color: #f2f2f2;
  border-left: 4px solid #e6c097;
  font-weight: bold;
}