@charset "UTF-8";

/**************************************************
フッター
**************************************************/

/* スペース */
footer {
	margin: 0 -5vw;
	padding: 8vw 5vw;
	position: relative;
}
footer ,
footer .flex {
	display: flex;
	flex-direction: column;
	gap: 5vw;
	text-align: center;
}

/* ロゴ */
footer .logo {
	line-height: 0;
}
footer .logo img {
	width: 33.3vw;
	height: auto;
}

/* wrap */
footer .wrap {
	display: flex;
	flex-direction: column;
	gap: 5vw 0;
}

/* メニュー */
footer .main ul {
	display: inline-block;
	margin: 0 auto;
}
footer .main li {
	text-align: left;
	margin: 0.25rem 0;
	padding-left: 1rem;
	position: relative;
	line-height: 1.4;
}
footer .main li:before {
	content: "-";
	position: absolute;
	left: 0;
	top: 0;
}

/* SNS */
footer .sns ul {
	display: flex;
	justify-content: center;
	gap: 1rem;
}
footer .sns li {
	font-size: 2.5rem;
}
footer .sns i {
	margin: 0;
}

/* テキスト */
footer .google ,
footer .copy {
	line-height: 1.6;
}

/* Google文言 */
footer .google a {
	text-decoration: underline;
}

/* バナー */
#bana {
  margin: 0 -5vw;
  padding: 2rem 5vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 1vw;
  line-height: 0;
}
#bana li img {
  max-width: 21.75vw;
  height: auto;
}

/**************************************************
タブレットの時
**************************************************/

@media only screen and (min-width: 768px) {

	/* 横並び */
	footer .flex {
		flex-direction: row;
 		align-items: flex-start;
	}
	footer .flex logo ,
	footer .flex table {
		flex-basis: auto;
	}
	footer .flex .wrap {
		text-align: left;
		flex-basis: 100%;
	}

	/* ロゴ */
	footer .logo img {
		width: 	130px;
	}

	/* リスト */
	footer ul {
		margin: 0;
	}

	/* wrap */
	footer .wrap {
		gap: 2rem 0;
	}

	/* SNS */
	footer .sns ul {
		justify-content: flex-start;
	}

	/* テーブル */
	th {
		padding-left: 4vw;
	}
	td {
		padding-right: 4vw;
	}

	/* 改行コントロール */
	footer li ,
	footer td {
		white-space: nowrap;
	}
	footer br.sp {
		display: block;
	}

	/* バナー */
	#bana {
		flex-wrap: nowrap;
  		gap: 2rem 1rem;
	}
	#bana li img {
	  max-width: initial;
	  width: auto;
	  max-height: 80px;
	}

}

/**************************************************
パソコンの時
**************************************************/

@media only screen and (min-width: 1000px) {

	/* 改行コントロール */
	footer li br {
		display: none;
	}
	footer br.sp:nth-of-type(1) {
		display: none;
	}
	/* ロゴ */
	footer .logo img {
		width: 	200px;
	}
	/* テーブル */
	th {
		padding-left: 5vw;
	}
	td {
		padding-right: 5vw;
	}

}