@charset "utf-8";

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/* 画像ロゴがあるときだけ、直後のテキスト版ロゴを隠す */
#logo + #logo-text { display: none; }

/* GoogleMap等のiframeの枠線を消す */
iframe { border: 0; }

/*contact_form.html*/
.contact-alert{
    background:#f0fff2;border:1px solid #bde5c8;color:#1c6b2a;
    padding:.8rem 1rem;border-radius:6px;margin:0 0 1rem;
}
.contact-alert.error{background: #fffbda;border: 1px solid #f3c4c4;color:#b00020;}

input[type=text], input[type=email], input[type=tel],textarea {
    width:100%;
    max-width:100%;
}
input, select, textarea, button[type=submit] {font-size: 1rem;}

/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）*/
.pr a {
	text-decoration: none;display: block;
	background: rgba(0,0,0,0.8);
	color: #ccc;
	text-align: right;
	padding: 0.2rem 1rem;
	font-size: 0.8rem;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: bold;
	margin-right: 0.5em;
}


/*以下、mix1専用*/

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
#logo-text {
	margin: 0;padding: 0;
	font-size: 1.4rem;
}
#logo-text a {
	text-decoration: none;
}

/*「グルメランキング（３列ブロック）」
---------------------------------------------------------------------------*/
.rank-flag4,.rank-flag5,.rank-flag6 {
	position: absolute;
	left: -5px;	/*左からの配置場所*/
	top: -5px;	/*上からの配置場所*/
	width: 3rem;	/*幅*/
	height: 3rem;	/*高さ*/
	font-weight: bold;	/*太字に*/
	background: #fff; /*背景色*/
	color: #333;	/*文字色*/
  
  /* マスクの設定 */
  --mask-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,100 L50,70 L0,100 Z' fill='%23000000'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/*近くの観光地（イメージマップ風）
---------------------------------------------------------------------------*/
.image-map-container i {
	color: #ff0000;
}

/*grid-box（色々なレイアウト用）
---------------------------------------------------------------------------*/
.grid-box > div {
	display: grid;
	grid-template-columns: repeat(12, 1fr); /* 12等分 */
	gap: 5vw; /* 要素間の隙間 */
	margin-left: calc(-1 * var(--content-space));
	margin-right: calc(-1 * var(--content-space));
	margin-bottom: 5vw;	/*下に空けるスペース*/
	grid-auto-flow: dense;
}
.grid-box > div:last-child {
  margin-bottom: 0;	/*最後のブロックの下マージンをなくす*/
}
/*image-01（左右入れ替え用）*/
.grid-box div.reverse .image-01 {
	grid-column: 2 / 6;
}
/*text-01（左右入れ替え用）*/
.grid-box div.reverse .text-01 {
	grid-column: 6 / 12;
}
/*image-02（左右入れ替え用）*/
.grid-box div.reverse .image-02 {
	grid-column: 4 / -1;
}
/*text-02（左右入れ替え用）*/
.grid-box div.reverse .text-02 {
	grid-column: 4 / 12;
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {

	/*画像と文字を囲むブロック*/
	.grid-box > div {
		margin-left: var(--content-space);
		margin-right: var(--content-space);
		display: block;
		margin-bottom: 60px;
	}
	
	}/*追加指定ここまで*/