@charset "UTF-8";


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*========= レイアウトのためのCSS ===============*/
body {
  background:#fdf5e6;
}

main div.ric1 {				/*div内の余白と文字サイズ*/
	padding-top: 40px;
	font-size: 1.2rem;
}


main div.ric2 {				/*div内の余白と文字サイズ*/
	padding-top: 40px;
	font-size: 1.0rem;
}

.image-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px; /* 親要素の幅 */
	height: 200px; /* 親要素の高さ */
	border: none; /* 可視化のために追加 */
	background-color: #ffffff;
}

.centered-image {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}


/*テーブル
---------------------------------------------------------------------------*/
/*recruit用(ta-r)テーブルブロック設定*/
.ta-r {
	padding-top: 40px;
	border-top: none;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	font-size: 1.0rem;
}

/*tr（１行分）タグ設定*/
.ta-r tr {
	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
	margin-top: 20px
	margin-bottom: 20px
}


/*th（左側）、td（右側）の共通設定*/
.ta-r th,
.ta-r td {
    border-bottom: 1px solid #ccc;
	margin-top: 20px
	margin-bottom: 20px
}


/*th（左側）のみの設定*/
.ta-r th {
	width: 15%;			/*幅*/
	text-align: center;	/*中央にする*/
}


/*========= イベント告知のCSS ===============*/
.box-design24 {
  margin: 20px auto 20px 20px;
  padding: 20px;
  border: 2px solid #434343;
}

.box-design24-ttl {
  position: relative;
  left: -40px;
  background-color: #98fb98;
  color: #fff;
  padding: 0.5em 1.2em;
  margin: 10;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}

/*========= お問い合わせボタン ===============*/

.image-entry {
	display: inline-block;
	cursor: pointer;
	margin-top: 1em;
	border-radius: 8px;
	background: url(../image/entry-b_over.png) center / cover no-repeat;
}
.image-entry img {
	border-radius: inherit;
	vertical-align: middle;
	transition: opacity .3s;
  max-width: 40%;
  max-height: 40%;

	object-fit: contain;

}
.image-entry:hover img {
	opacity: 0;
}