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

/* ----------------------------------------------
	メイン
---------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=Caveat&family=M+PLUS+1:wght@100..900&family=M+PLUS+1p&family=Nunito:wght@400;700&family=Noto+Sans+JP:wght@700&family=Poppins:wght@400;600&family=Kosugi+Maru&display=swap');

/* グローバル変数 */
:root {
	--primary-text-color: #FF9C47;
	--primary-back-color: #fff;
	
	--secondary-text-color: #000;
	--secondary-back-color: #000;
	
	--navi-base-text-color: #666; /* ナビゲーションの通常時背景カラー */
	--navi-base-back-color: #fff; /* ナビゲーションの通常背景カラー */

	--navi-select-text-color: #fff; /* ナビゲーションの選択時テキストカラー */
	--navi-select-back-color: #FF9C47; /* ナビゲーションの選択時背景カラー */
	
	--title-head-text-color: #482219; /* タイトルの上部分テキストカラー */
	--title-side-text-color: #E8C57C; /* タイトルのサイドカラー */
	--title-main-text-color: #E8C57C; /* タイトルのテキストカラー */

	--h1-font-color: #FF9C47; /* h1のテキストカラー */
	--h1-back-color: #FFE3C1; /* h1の背景カラー */

	--label-font-color: #666;
	--label-back-color: #eee;

}

/*
purple
#AE175D
#E58BAE
-------
green
#3d6a3f
#A3C6A5
-------
blue
#3e5166
#A6B4C5
brown
#482219
#AA6A56
*/

* {
	font-family: "BIZ UDPGothic", sans-serif;
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
	font-size: 16px; /* 基準サイズ */
}

body {
	font-size: 1rem; /* ベースフォントサイズ */
	line-height: 1.5;
	counter-reset: section; /* セクション番号のカウンターを初期化 */
	padding-bottom: 65px;
}

/* ----------------------------------------------
	ユーティリティクラス
---------------------------------------------- */

h1 {
	margin: -3px 0 0px 2px;
	font-size: 0.65rem;
	text-align: left;
	font-weight: normal;
	color: #B02703;
	padding: 8px;
	box-sizing: border-box;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 30px;
  width: 97%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 22px 4px 12px; /* 上下余白UP・左詰気味で安定感 */
  border-radius: 999px;
  font-size: 0.95rem;
  color: #333;
  text-decoration: none;
  background-color: #fdfdfd; /* 薄めの自然な背景色 */
  box-shadow: inset 0 0 0 1px #ddd; /* 外枠風だけど優しい見た目 */
  position: relative;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
  font-family: 'Kosugi Maru', 'Noto Sans JP', sans-serif;
}

.tag.plus {
  font-size: 1.2rem;
  }

/* 右矢印を小さく自然に表示 */
.tag::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-right: 2px solid #aaa;
  border-top: 2px solid #aaa;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* ホバー時：少し右へ動き、色を濃く */
.tag:hover::after {
  transform: translateY(-50%) translateX(2px) rotate(45deg);
  border-color: #555;
}

/* アイコン付き */
.tag i {
  margin-right: 6px;
  margin-top: 0px;
  font-size: 0.9em;
}



/* ハンバーガーメニュー内 */
.tag-list.hb {
  display: flex;
  flex-wrap: nowrap; /* 折り返させない */
  justify-content: center;
  gap: 6px; /* ボタン間の余白調整 */
  margin: 10px auto;
  width: 95%;
}

.tag.hb {
  flex: 0 0 calc(50% - 6px); /* 2個並べるための計算。gapの半分引く */
  padding: 8px 0;
  border-radius: 8px;
  box-sizing: border-box;
  text-align: center;
}





/* 特集ごとの色 */
.feature-white {
  background-color: #fff;
  border-color: #666;
}
.feature-hot {
  background-color: #f4d4d4; /* 柔らかく上品なローズ系ピンク */
  border-color: #c88c8c;     /* 落ち着いたローズブラウン */
  color: #5a2a2a;            /* 深みのあるブラウン系テキスト */
}

.feature-remote {
  background-color: #dae4f2; /* くすみブルーグレー */
  border-color: #92a3c2;     /* 落ち着いたブルーグレイッシュトーン */
  color: #2f3b52;            /* ダークネイビー系で引き締め */
}

.feature-trial {
  background-color: #f5e2cc; /* 上品なサンドベージュ */
  border-color: #d8b58b;     /* 落ち着いたキャラメルブラウン */
  color: #5a3c25;            /* 濃いめのブラウン文字 */
}

.feature-beginner {
  background-color: #e1f1e1; /* くすみグリーンホワイト */
  border-color: #9fc6a1;     /* モスグリーン系の引き締め色 */
  color: #314731;            /* 深みのあるフォレストグリーン */
}

.feature-age {
  background-color: #f3e1ec; /* くすみピンクラベンダー */
  border-color: #c69db7;     /* 落ち着いたローズグレー */
  color: #4b2e3e;            /* 深いローズブラウン */
}

.feature-safety {
  background-color: #f8efd5; /* ベージュイエロー系の優しい色 */
  border-color: #dbc18e;     /* ゴールド寄りで柔らかく */
  color: #5e4a1f;            /* クラシックなブラウン文字 */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {

	.tag {
	  font-size: 0.9rem;
	  }

	.tag.plus {
	  font-size: 0.9rem;
	  }

}

/* ----------------------------------------------
	ヘッダーフッター
---------------------------------------------- */

/* 固定ヘッダー */
.top-navi {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	margin: 0 auto;
	padding: 10px 0 6px 0;
	box-sizing: border-box;
	z-index: 9999;
	color: #B02703;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	font-family: 'Kosugi Maru', 'Noto Sans JP', sans-serif;
	font-size: 11px;
}

/* 左側ロゴ */
.top-navi .logo-left {
	height: 40px;
	margin-left: 60px;
}

/* 右側リンク全体 */
.nav-links {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-right: 16px;
}

/* 各リンク（アイコン＋テキスト） */
.nav-links a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: #333;
	line-height: 1.2;
	transition: opacity 0.2s;
}

.nav-links a:hover {
	opacity: 0.7;
}

/* アイコン部分 */
.nav-links a .icon img {
	width: 24px;
	height: 24px;
	margin-bottom: 4px;
}


/* スマホ対応 */
@media screen and (max-width: 768px) {
	.top-navi {
		padding: 12px 0px 8px 2px;
	}

	.top-navi .logo-left {
		height: 35px;
		margin-left: 10px;
	}

	.nav-links {
		gap: 12px;
	}

	.nav-links a {
		font-size: 0.6rem;
	}

	.nav-links a .icon img {
		width: 20px;
		height: 20px;
		margin-bottom: 3px;
	}
	h1 {
		width: 100%;
		margin: -5px auto 0px auto;
		font-size: 0.65rem;
		text-align: left;
		font-weight: normal;
		color: #B02703;
		padding: 8px;
	}
}

/* ヘッダー固定による隠れ防止用のマージンをbodyに追加 */
body {
	margin-top: 70px; /* .top-naviの高さ + 余白に合わせて調整 */
}



.arrow-link {
	text-decoration: none;
	color: inherit;
	display: block; /* ブロックにしてpを囲む */
}

.arrow-text {
	position: relative;
	padding-left: 20px;
	margin: 0;
	font-size: 14px;
	color: var(--background-color2);
	display: inline-block;
}

/* 左向き矢印（←） */
.arrow-text::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%) rotate(225deg);
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--background-color2);
	border-right: 2px solid var(--background-color2);
	pointer-events: none;
}

/* ヘッダーの基本設定 */
.header {
	display: flex;
	flex-wrap: wrap; /* スマホで折り返し可能に */
	width: 100%;
	box-sizing: border-box;
	background-color: #333; /* ヘッダー全体の背景色 */
	color: white;
}

/* 左側のスタイル */
.header-left {
	width: 70%; /* デスクトップ時の幅 */
	background-color: var(--background-color2); /* 左側の背景色 */
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
}

.header-left a {
	position: relative; /* a::after を相対位置に配置するため */
	display: inline-block;
	padding: 4px 8px 16px; /* 下に余白を確保 */
	margin: 3px;
	border: 1px #eee solid;
	text-decoration: none;
	color: var(--background-color2);
	border-radius: 8px;
	text-align: center;
	background-color: #fff; /* 任意（背景が暗いと矢印が見やすい） */
}

/* 下中央に矢印を表示 */
.header-left a::after {
	content: '';
	position: absolute;
	bottom: 8px; /* テキストの下ギリギリに配置（余白に注意） */
	left: 50%;
	transform: translateX(-50%) rotate(135deg); /* 真下向き矢印 */
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--background-color2); /* 矢印の色：白 */
	border-right: 2px solid var(--background-color2);
	pointer-events: none;
}


/* 右側のスタイル */
.header-right {
	width: 30%; /* デスクトップ時の幅 */
	background-color: #000000; /* 右側の背景色 */
	padding: 10px;
	box-sizing: border-box;
	color: white;
	text-align: center;
}

/* スマホ時のスタイル */
@media screen and (max-width: 768px) {
	.header-left,
	.header-right {
		width: 100%; /* 幅を100%に設定 */
	}
	.header-left {
		order: 1; /* 左側を上に配置 */
	}
	.header-right {
		order: 2; /* 右側を下に配置 */
	}
	.top-navi img{
		height: 26px;
	}
}

/* ----------------------------------------------
	メインフォト
---------------------------------------------- */

/* .main-photo のスタイル */
.main-photo {
	position: relative; /* テキストを画像の上に配置するために必要 */
	width: 100%;
	overflow: hidden; /* 必要に応じて画像のはみ出しを隠す */
	background: #FFDEAB;
}

.main-photo.index {
	background: none;
	margin-top: -20px;
	}

/* 画像のスタイル */
.photo-image {
	width: 96%; /* 幅いっぱいに表示 */
	height: auto; /* アスペクト比を維持 */
	max-width: 1200px;
	margin: 0 auto;
}

.photo-image.pc {
	display: block;
}

.photo-image.sp {
	display: none;
}

/* テキストのスタイル */
.photo-text {
	position: absolute; /* テキストを画像の上に配置 */
	top: 50%; /* 上から50%の位置に配置 */
	left: 15%; /* 左から5%の位置に配置 */
	transform: translateY(-50%); /* 垂直方向のみ中央揃え */
	color: var(--background-color2); /* テキストの色 */
	font-size: 20px; /* フォントサイズ */
	/*background-color: rgba(0, 0, 0, 0.5);	半透明の背景 */
	padding: 5px 10px; /* テキストの背景に余白を追加 */
	border-radius: 5px; /* 背景を角丸に */
	text-align: right; /* テキストを右揃え */
	text-shadow:	
		2px 2px 0 white,
		-2px 2px 0 white,
		2px -2px 0 white,
		-2px -2px 0 white,
		0px 0px 5px white; /* ぼかしを追加する */
}

/* スマホ時のスタイル */
@media screen and (max-width: 1000px) {

	.main-photo {
		background: none;
	}

	.main-photo.index {
		background: none;
		margin-top: 0px;
		}

	.photo-image {
		width:100%;
		}

	.photo-text {
		left: 5%; /* 左から5%の位置に配置 */
		font-size:14px;
	}
}

@media screen and (max-width: 768px) {
	.photo-image.pc {
		display: none;
	}

	.photo-image.sp {
		display: block;
	}
}

/* ----------------------------------------------
	メインブロック
---------------------------------------------- */

.back_wrap{
	background-color: #fff;
	padding: 10px 0px;
	width:100%;
	margin: 0px auto;
	text-align: center;
	}

.pref_wrapper{
	width:95%;
	max-width: 1000px;
	margin: 0px auto;
	}
	
.pref_wrapper p{
	width:80px;
	height:80px;
	border:1px #ccc solid;
	border-radius: 8px;
	margin: 3px;
	display: inline-block;
	font-size:0.8rem;
	}

.pref_wrapper p img{
	width:100%;
	height: auto;
	}

/* ----------------------------------------------
フッター前にお問い合わせボタン（店舗詳細ページのみ）
---------------------------------------------- */

.footer-banner {
	position: fixed;
	bottom: 45px; /* footer-nav の高さ分 */
	width: 100%;
	background-color: #f5f5f5;
	z-index: 998;
	font-size: 14px;
	text-align: center;
}

.footer-title {
	background-color: #fff;
	color: #3C4256;
	margin: 0;
	padding: 6px 0;
	font-weight: bold;
}

.footer-links {
	display: flex;
}

.footer-links a {
	flex: 1;
	display: block;
	padding: 10px 0;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}

.footer-links a:nth-child(1) {
	background-color: #e74c3c; /* 赤 */
}

.footer-links a:nth-child(2) {
	background-color: #27ae60; /* 緑 */
}

.footer-links a:nth-child(3) {
	background-color: #2980b9; /* 青 */
}

.footer-links a.grayout{
	background-color: #ccc;
	color:#eee;
	cursor: auto;
}

/* ----------------------------------------------
フッターの基本設定
---------------------------------------------- */

.footer-nav {
	position: fixed;
	bottom: 0;
	width: 100%;
	height:45px;
	background-color: #4A5067;
	color:#fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 1px 0;
	box-sizing: border-box;
	z-index: 999;
}

/* アイテム全体をリンクとして扱う */
.footer-item {
	flex: 1; /* 均等にスペースを割り当て */
}

.footer-item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #494949;
	text-decoration: none;
	padding: 0; /* クリック範囲を拡大 */
}

.footer-item a:hover {
	color: var(--background-color2); /* ホバー時の文字色 */
}

/* アイコンのサイズ */
.icon img {
	width: 20px;
}

/* テキストのスタイル */
.text {
	font-size: 12px;
	margin-top: -5px;
}

.footer-item.this {
	position: relative; /* 擬似要素の位置を調整するため */
}

.footer-item.this::before {
	content: ''; /* 擬似要素を生成 */
	position: absolute;
	top: -3px; /* ブロックの上部からの距離を調整 */
	left: 50%; /* 親要素の幅の中央に配置 */
	transform: translateX(-50%); /* 真ん中に揃える */
	border-width: 8px 8px 0; /* 三角形のサイズを調整 */
	border-style: solid;
	border-color: var(--background-color2) transparent transparent; /* 逆三角形の色 */
	width: 0;
	height: 0;
}

.search-title-container {
	text-align: center; /* 全体を中央揃え */
	padding: 0px;
	margin-top: 0px;
}

.search-title-container.top {
	margin-top: -15px;
}

.title-bottom{
	width:95%;
	max-width: 600px;
	margin: 20px auto 5px auto;
	text-align: center;
	font-size:0.8rem;
	font-family: 'Kosugi Maru', 'Noto Sans JP', sans-serif;
	}

.conditional-search {
	font-family: 'Caveat', cursive; /* 手書き風フォント */
	color: #A1CA2F; /* 画像の赤色に近い色 */
	font-size: 1.5em; /* フォントサイズ */
	margin-bottom: -8px; /* 下の要素との余白 */
}

.conditional-search.blue {
	color: #2980B9;
	background: none;
}

.conditional-search.purple {
	color: #C54B78;
	background: none;
}

.main-search-title {
	font-family: 'Noto Sans JP', sans-serif; /* 日本語フォント */
	font-weight: 700; /* 太字 */
	color: var(--title-main-text-color); /* 濃いめの灰色または黒 */
	font-size: 1.6em; /* 非常に大きく */
	display: flex; /* flexboxを使ってスラッシュとテキストを配置 */
	align-items: center; /* 垂直方向の中央揃え */
	justify-content: center; /* 水平方向の中央揃え */
	margin: 0;

}

.main-search-title.green{
	color: #A1C92F;
}

.main-search-title.blue{
	color: #2980B9;
	background: none;
}

.main-search-title.purple{
	color: #C54B78;
	background: none;
}

/*
#C0C0C0 (シルバーに近いライトグレー)
#F5DEB3 (小麦色に近いサンドベージュ)
#556B2F (ダークオリーブグリーンに近いカーキ)
#FFD700 (ゴールドに近いマスタードイエロー)
#800020 (深みのあるボルドー)
#87CEEB (スカイブルーに近いサックスブルー)
*/

.slash {
	color: var(--title-side-text-color); /* スラッシュの色 */
	font-size: 0.8em; /* スラッシュのサイズ調整 */
	display: inline-block; /* transformを適用するために必要 */
	transform: skewX(-15deg); /* スラッシュを傾ける */
	margin: 0 10px; /* スラッシュとテキストの間の余白 */
}

.slash.green{
	color: #A1C92F;
	background: none;
}

.slash.blue{
	color: #2980B9;
	background: none;
}

.slash.purple{
	color: #C54B78;
	background: none;
}


/* スマホ時のスタイル */
@media screen and (max-width: 768px) {
	.conditional-search {
		font-family: 'Caveat', cursive; /* 手書き風フォント */
		color: #A1CA2F; /* 画像の赤色に近い色 */
		font-size: 1.2em; /* フォントサイズ */
		margin-bottom: -8px; /* 下の要素との余白 */
	}
	.main-search-title {
		font-weight: 700; /* 太字 */
		font-size: 1.4em; /* 非常に大きく */
	}

}

/*---------------------------*/
/* 更新時のモーダルウィンドウ */
/*---------------------------*/
#hideMe {
	position: fixed;		/* ← relative を fixed に変更 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;			/* min-height → height に変更 */
	background: rgba(0, 0, 0, 0.6);	/* 背景の暗転が必要なら */
	z-index: 9999;
}

.hide_box {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size:22px;
	padding: 20px 8px 14px 8px;
	background: #2c3e50;
	color: #fff;
	text-align: center;
	width: 90%;
	line-height: 24px;
}

.hide_box.err{
	background: #ff0;
	color: #f00;
}

.hide_box p{
	margin-top: 5px;
	font-size:12px;
	}


.error_box {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size:22px;
	padding: 20px 8px 14px 8px;
	background: #ff0000;
	color: #fff;
	text-align: center;
	width: 90%;;
	line-height: 24px;
}

.error_box p{
	margin-top: 5px;
	font-size:12px;
	}


/* === 新フッター全体 === */
.footer-new {
  background-color: #fff;
  border-top: 5px solid #FFDEAB;
  font-size: 0.85rem;
  color: #333;
  padding: 20px 10px 30px 10px;
  text-align: center;
  position: relative;
  z-index: 100;
  margin-top: 30px;
}

/* ロゴ・リンク群 */
.footer-new-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.footer-new-logos.txt {
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 300px;
	text-align: left;
	justify-content: left;
	}

.footer-new-logos .logo-text {
  font-weight: bold;
  font-size: 1rem;
}

.footer-new-logos.txt p {
  margin: 0;
  line-height: 1.8;
  font-size: 0.9rem;
  color: #333;
}

.footer-new-logos.txt b {
  font-size: 1.2rem;
  font-weight: bold;
  display: inline; /* ←重要：inlineのままで */
}

.footer-new-logos.txt span {
  display: inline;
  color: #c00;
  background: linear-gradient(transparent 70%, rgba(255, 80, 80, 0.3) 0%);
}


/* テキストリンク群 */
.footer-new-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  margin-left: 10px;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.8rem;
}

.footer-new-nav a {
  color: #A1CA2F;
  text-decoration: none;
  border-right: 1px solid #999;
  padding-right: 8px;
}

.footer-new-nav a:last-child {
  border-right: none;
}

/* コピーライト */
.footer-new-copy {
  font-size: 0.75rem;
  color: #999;
  justify-content: left;
  margin-left: 10px;
  text-align: left;
}

/* 広告バナー部分 */
.footer-new-ad {
  position: absolute;
  right: 20px;
  top: 20px;
  max-width: 260px;
}

.footer-new-ad .ad-box {
  background: #FFF4E3;
  border: 1px solid #FFDEAB;
  border-radius: 8px;
  padding: 10px;
}

.footer-new-ad p {
  font-weight: bold;
  font-size: 0.95rem;
  color: #333;
  margin: 0;
}

.footer-new-ad a {
  display: block;
  text-align: center;
  font-weight: bold;
  padding: 6px 0;
  margin-bottom: 6px;
  border-radius: 6px;
  text-decoration: none;
}

.footer-new-ad a.yellow {
  background: #A1CA2F;
  color: #fff;
}

.footer-new-ad a.red {
  background: #E89338;
  color: #fff;
}

.footer-new-ad a.white-border {
  border: 1px solid #E89338;
  color: #E89338;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .footer-new {
    padding: 10px 10px 5px 10px;
  }

  .footer-new-logos {
    flex-direction: column;
    gap: 8px;
  }
  
  .footer-new-logos.txt {
  	padding-left: 0px;
	padding-right: 0px;
	}

	.footer-new-nav {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: left;
	  margin-left: 2px;
	  gap: 4px;
	  margin-bottom: 16px;
	  font-size: 0.8rem;
	}

  .footer-new-ad {
    position: static;
    margin-top: 20px;
    max-width: 100%;
  }

	.footer-new-copy {
	  justify-content: center;
	  text-align: center;
	}
  
}



.h-banner {
	width:100%;
	margin: 5px auto;
}

.h-banner .ad-box {
  padding: 0px 10px 4px 10px;
}

.h-banner img {
  width:100%;
  height: auto;
}

.h-banner a {
  display: block;
  text-align: center;
  font-weight: bold;
  padding: 8px 0;
  margin-bottom: 6px;
  border-radius: 6px;
  font-size: 1rem;
  text-decoration: none;
}

.h-banner a.yellow {
  background: #A1CA2F;
  color: #fff;
}

.h-banner a.red {
  background: #E89338;
  color: #fff;
}

.h-banner a.white-border {
  border: 1px solid #E89338;
  color: #E89338;
}