@charset "utf-8";

.inner {
	width: 960px;
	margin: 0 auto;
}

h1 {
	font-size: 24px;
	text-align: center;
	margin: 20px 0;
}

dl {
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
}

dt {
	float: left;
	clear: left;
	width: 12em;
	font-weight: bold;
}

dd {
	margin: 0 0 0.5rem 14em;
	line-height: 2;
}

.youtube-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	/* 16:9 */
	height: 0;
}

.youtube-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

article p {
	font-size: 16px;
	color: #333;
}

article ul li {
	font-size: 16px;
}

.bk-white {
	background: #fff;
	padding: 20px;
}
.bk-gray{
	background: #eee;
	padding: 20px;
	margin: 20px;
}
.hgray {
background: #f2f2f2;
    padding: 10px;
    margin: 10px 0;
}

/*------------------------
  company
-------------------------*/
dl.company > dt {
	color: #1400ff;
}

/*------------------------
  branch
-------------------------*/
.branch dl {
	margin: 0 auto;
	font-size: 16px;
	display: block;
	width: 70%;
}

.branch dl dt {
	width: 6em;
	float: left;
}

.branch dl dd {
	margin: 0 0 0.5rem 7em
}

.branch h2 {
	font-size: 18px;
	text-align: center;
	margin: 60px 0 20px;
	background: #eee;
	padding: 10px;
}

.branch a {
	text-align: center;
}

.branch-table table {
	background: none;
}

.branch-table table th,
.branch-table table td {
	border: none;
	font-weight: bold;
	text-align: center;
}

.branch-table table td:first-child {
	width: 20%;
}

.branch-table table td {
	width: 40%;
}

.branch-table table tr img {
	height: 240px;
	object-fit: cover;
}

/*------------------------
  suggestion
-------------------------*/
.suggestion {
	border: 2px solid #07338c;
	padding: 0;
	background: #fff;
}

.suggestion p {
	margin: 20px 40px;
}

.suggestion h2 {
	border: #07338c 2px solid;
	margin: 60px 40px 20px;
	padding: 20px;
	border-radius: 10px;
	font-size: 24px;
}

.suggestion > h3:not([class]) {
	margin: 20px 40px;
	color: #07338c;
	font-size: 20px;
	background: #eee;
	padding: 20px;
}

.shinei {
	background: #07338c;
	color: yellow;
	font-weight: bold;
	text-align: center;
	font-size: 28px;
	padding: 20px;
	margin: 0 0 20px;
}

.col-box p {
	color: #666;
}

.suggestion > .col2 {
	margin: 0 40px;
}

/*------------------------
  property
-------------------------*/
.property ul li {
	font-size: 0.9rem;
	line-height: 2rem;
	text-align: left;
}

.property h2 {
	margin-top: 2rem;
}

/*------------------------
  property
-------------------------*/
.green-box {
	position: relative;
	padding: 20px;
	background: #fff;
	border: 1px solid #000;
}

.green-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	background: #8CFF8C;
}

/*------------------------
  service
-------------------------*/
.service h2 {
	margin: 0 0 20px;
}

.service p {
	font-size: 0.9rem;
	text-align: justify;
}

.service .col2 {
	gap: 80px;
	margin: 40px 0;
}

.philosophy p {
	font-size: 1.4rem;
	margin: 0 0 20px;
	letter-spacing: 2px;
}

.philosophy p a {
	text-decoration: underline;
}

/*------------------------
  home
-------------------------*/
.post-list li {
	font-size: 16px;
	margin: 0 0 20px;
}

.post-list li .date {
	margin-right: 2em;
}

.single-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 24px 0;
}

.single-item {
	width: calc(25% - 12px);
	/* PCで4列 */
}

.single-item a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.single-item img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.single-item h3 {
	font-size: 1rem;
	margin: 8px 0 0;
	text-align: center;
}

@media screen and (max-width: 780px) {
	.shinei {
		padding: 10px;
		font-size: 24px;
	}

	.suggestion h2 {
		margin: 40px 20px;
		border-radius: 10px;
		font-size: 20px;
	}

	.suggestion p {
		margin: 20px;
	}

	.suggestion > .col2 {
		margin: 0 20px;
	}

	.branch h2 {
		margin: 40px 0 20px;
	}

	.branch dl {
		width: 100%;
	}

	.branch dl dt {
		width: 6em;
	}

	.branch dl dd {
		margin: 0 0 0.5rem 7em
	}

	.post-list li .date {
		display: block;
	}

	/*------------------------
  footer
-------------------------*/
	.inner {
		width: 95%;
	}

	dt {
		float: none;
		width: auto;
		font-weight: bold;
	}

	dd {
		margin: 10px 0;
	}
}