/* ==============================

	その他装飾用css

==================================================*/
/* table
------------------------------------------*/
.table-std{
	width: 100%;
}

.table-std th,
.table-std td{
	padding: 0.5em;
	border: 1px solid #bbb;
}

.table-std th{
	background: #ededed;
}

/* 横並び・グリッド
------------------------------------------*/
.grid {
	display: grid;
	gap: 20px 40px;
}

/* 2分割 */
.grid.column2 {
	grid-template-columns: repeat(2, 1fr);
}

/* 3分割 */
.grid.column3 {
	grid-template-columns: repeat(3, 1fr);
}

/* 2:1 */
.grid.column2-1 {
	grid-template-columns: 2fr 1fr;
}

/* 3:1 */
.grid.column3-1 {
	grid-template-columns: 3fr 1fr;
}

/* 3:2 */
.grid.column3-2 {
	grid-template-columns: 3fr 2fr;
}

@media screen and (max-width: 768px) {
	.grid.column2,
	.grid.column3,
	.grid.column2-1,
	.grid.column3-1,
	.grid.column3-2{
		grid-template-columns: 1fr;
	}
}

/* 定義・DL
------------------------------------------*/
.dl-flex{
	display: flex;
	margin-bottom: 1em;
}

.dl-flex dt,
.dl-flex dd{
	padding: 0 1em;
}

@media screen and (max-width:768px){
	.dl-flex{
		flex-direction: column;
	}

	.dl-flex dt,
	.dl-flex dd{
		width: 100%;
	}
}

/* dtとddの間だけ線 */
.dl-flex-borderless{
	display: flex;
	margin-bottom: 1em;
}

.dl-flex-borderless dt,
.dl-flex-borderless dd{
	padding: 0 1em;
}

.dl-flex-borderless dt{
	border-right: 1px solid #ccc;
}

@media screen and (max-width:768px){
	.dl-flex-borderless{
		flex-direction: column;
	}

	.dl-flex-borderless dt,
	.dl-flex-borderless dd{
		width: 100%;
	}

	.dl-flex-borderless dt{
		border-right: none;
	}
}

/* 画像比率
------------------------------------------*/
.waku{
	padding: 1em;
	border: 1px solid #009d85;
}

.waku-rounded {
	padding: 1em;
	border-radius: 1em;
	border: 1px solid #009d85;
}

/* 画像比率
------------------------------------------*/
.img3-2{
	aspect-ratio: 3/2;
	object-fit: scale-down;
}

/* --------- ブロック --------- */
.ib {
	display: inline-block;
}

.flex{
	display: flex;
	gap: 1em;
}

.fwrap{
	flex-wrap: wrap;
}

.align_center{
	align-items: center;
}

.justify_center{
	justify-content: center;
}

.justify_between{
	justify-content: space-between;
}

.justify_evenly{
	justify-content: space-evenly;
}

@media screen and (max-width:960px) {
	.flex{
		flex-direction: column;
	}

	.justify_between{
		justify-content: space-evenly;
	}
}

/* --------- 横幅 --------- */
.w50p{
	width: calc(50% - 1em);
}

.w33p{
	width: calc(33% - 1em);
}

.w66p{
	width: calc(66% - 1em);
}

@media screen and (max-width:960px) {
	.w50p{
		width: 100%;
	}

	.w33p{
		width: 100%;
	}

	.w66p{
		width: 100%;
	}
}

/* 余白・マージン
------------------------------------------*/
.mt0{
	margin-top: 0 !important;
}

.mt10 {
	margin-top: 10px !important;
}

.mt20 {
	margin-top: 20px !important;
}

.mt30 {
	margin-top: 30px !important;
}

.mt50 {
	margin-top: 50px !important;
}

.mt70 {
	margin-top: 70px !important;
}

/* margin-bottom */
.mb0 {
	margin-bottom: 0px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.mb50 {
	margin-bottom: 50px !important;
}

.mb70 {
	margin-bottom: 70px !important;
}

/* padding-top */
.pt0{
	padding-top: 0;
}

.pt10{
	padding-top: 10px;
}

.pt20{
	padding-top: 20px;
}

.pt30{
	padding-top: 30px;
}

.pt50{
	padding-top: 50px;
}

/* padding-bottom */
.pb0{
	padding-bottom: 0;
}

.pb10{
	padding-bottom: 10px;
}

.pb20{
	padding-bottom: 20px;
}

.pb30{
	padding-bottom: 30px;
}

.pb50{
	padding-bottom: 50px;
}

/* 文字カラー
------------------------------------------*/
.color_red {
	color: #c00;
}

.color_blue{
	color: #004ea2;
}

/* --------- フォントサイズ --------- */
.font_28{
	font-size: 1.75em;
}

@media screen and (max-width:960px){
	.font_28{
		font-size: 1.5em;
	}
}

/* 文字太さ
------------------------------------------*/
.normal{
	font-weight: 400;
}

.bold {
	font-weight: 700;
}

/* 文字揃え
------------------------------------------*/
.tCenter{
	text-align: center;
}

.tRight{
	text-align: right;
}

.tLeft{
	text-align: Left;
}

/* --------- インデント --------- */
.indent10e {
	text-indent: -1em;
	padding-left: 1em;
}

/* 改行
------------------------------------------*/
@media screen and (max-width:1240px){
	br.pc{
		display: none;
	}
}

@media screen and (max-width:960px) {
	.for_pc {
		display: none;
	}
}

/* ==============================

	アニメーション

==================================================*/
.fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeInAnime {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.navi_menu.fadeIn {
	animation-duration: 0.5s;
}