@charset "utf-8";

/* ======================================================
	共通設定
====================================================== */

/* レイアウト
------------------------------------------------------ */
/* sticky footer */
html,
body {
	height: 100%;
}
#global-wrapper {
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 100%;
}

/* 内枠 */
.w-container {
	position: relative;
	margin: auto;
	width: 92%;
}
@media (min-width: 768px) {
	.w-container {
		max-width: 1160px;
	}
}


/* 基本設定
------------------------------------------------------ */
body {
	background: #fff url(img/wrinkled-wall.jpg) center repeat;
	color: #222;
}
h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}
p {
	line-height: 1.8;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
	pointer-events: none;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
	touch-callout:none;
	user-select:none;
}
figure {
	margin: 0;
}
figcaption {
	margin-top: 1em;
	margin-bottom: .5em;
	color: #707070;
	font-size: .75rem;
	text-align: center;
}

hr {
	box-sizing: content-box;
	margin-top: 1rem;
	margin-bottom: 0;
	height: 0;
	overflow: visible;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, .2);
}
a {
	color: inherit;
	color: #e2474d;
}
a:hover {
	filter: brightness(90%) contrast(120%);
}
em {
	font-style: normal;
	font-weight: 700;
}
mark {
	background: #c5f2f9;
}
strong {
	color: #bf282d;
	font-size: 1.125em;
}

.marker {
	background: linear-gradient(transparent 50%, #9ff 0%);
}

/* webフォント　さわらび明朝 */
.wf-sawarabimincho {
	font-family: "Sawarabi Mincho";
}



/* ======================================================
	ヘッダー
====================================================== */
.title {
	padding: 60px 0;
	background: #fff;
	/*background: url(img/komako-sakai-logo-bg3.svg) left top/auto 95% no-repeat;*/
}
.title-container {
	display: flex;
	flex-direction: column;
}
.title-text {
	margin-bottom: 2em;
}
.title-logo {
	width: 80%;
	font-size: 0;
}
@media (min-width: 768px) {
	.title {
		padding: 120px 0;
		/*background: url(img/komako-sakai-logo-bg3.svg) 51% center/auto 85% no-repeat;*/
	}
	.title-container {
		display: flex;
		flex-direction: row-reverse;
		justify-content: center;
		align-items: center;
	}
	.title-container > .title-text {
		flex: 1;
		margin-bottom: 0;
	}
	.title-container > .title-img {
		flex: 1;
	}
	.title-logo {
		margin: auto;
		width: 70%;
	}
}



/* ======================================================
	メイン
====================================================== */

/* entry
------------------------------------------------------ */
.entry {
	padding: 80px 0;
	/*border-top: 1px solid #e2474d;*/
}
.entry-h2 {
	margin-bottom: 2em;
	color: #e2474d;
	font-size: 30px;
	font-weight: 400;
	text-align: center;
}

.entry-container {
	margin: 0 auto;
	max-width: 610px;
	font-size: 16px;
}
.entry-container p {
	margin: 1.8em 0;
}
.entry-container > :first-child {
	margin-top: 0;
}
.entry-container > :last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.entry {
		padding: 120px 0;
	}
	.entry-h2 {
		font-size: calc(1.875rem + ((1vw - 7.68px) * 2.551));
		min-height: 0vw; /* safari */
	}
	.entry-h2 br {
		display: none;
	}
	.entry-container {
		font-size: 18px;
	}
}
@media (min-width: 1160px) {
	.entry-h2 {
		font-size: 40px;
	}
}


/* slide swiper
------------------------------------------------------ */
.slide {
	padding-bottom: 80px;
}
@media (min-width: 768px) {
	.slide {
		padding-bottom: 120px;
	}
}

.slide-container {
	margin: 0 auto;
	min-height: 0;
}

:root {
	--swiper-pagination-color: #e2474d;
}

.swiper {
	width: 320px;
	width: max(320px, min(78vw, 600px));
	min-height: 0vw; /* safari */
}
@media (min-width: 768px) {
	.swiper {
		width: 630px;
	}
}
.swiper-slide {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	padding: 1em;
	background: #fff;
}
.swiper-slide img {
	align-self: center;
}
.swiper-slide figcaption {
	margin: .5em 0 4em;
	color: #707070;
	text-align: center;
}


/* 概要
------------------------------------------------------ */
.summary {
	padding: 80px 0;
	background: #fff;
}
.summary-container {
	margin-top: 0;
}
@media (min-width: 768px) {
	.summary {
		padding: 120px 0;
	}
	.summary-container {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: auto auto;
		grid-gap: 45px;
	}
	.col-1 {
		grid-row: 1 / 3;
		grid-column: 1;
		padding-right: 3em;
	}
}
@media (min-width: 980px) {
	.summary-container {
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr 1fr;
		grid-row-gap: 0;
		grid-column-gap: 60px;
		font-size: 15px;
	}
}

.summary-h2 {
	position: absolute;
	top: calc((80px + .7em) * -1);
	color: #e2474d;
	font-size: 24px;
	font-weight: 400;
}
.summary-h2 span {
	padding-left: .5em;
	font-size: 80%;
}
.summary-h3 {
	margin-top: 2em;
	margin-bottom: .5em;
	color: #00a6ba;
	font-size: 18px;
}
@media (min-width: 768px) {
	.summary-h2 {
		position: relative;
		top: 0;
		margin-bottom: 1.5em;
		font-size: 30px;
	}
	.summary-h2 br {
		display: none;
	}
	.summary-h3:first-child {
		margin-top: 0;
	}
}

.summary-img {
	padding: 1em 2em;
}
@media (min-width: 768px) {
	.summary-img {
		padding: .4em 0 2em;
	}
}

.dl-list {
	margin-top: 0;
}
.dl-list dt {
	margin-top: .8em;
	font-weight: 700;
}
.dl-list dd {
	margin-left: 0;
}
@media (min-width: 768px) {
	.dl-list dt:first-child {
		margin-top: 0;
	}
}

.link-icon {
	border-bottom: 1px dotted #e2474d;
	font-size: 1.125em;
}
.link-icon::after {
	content: "\f0c1";
	padding-left: .2em;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

.table {
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	width: 300px;
}
.table td {
	padding: .5em;
	border: 1px solid #ccc;
}
.table td:nth-child(even) {
	text-align: right;
}

.ul-list {
	padding-left: 1.5em;
}
.ul-list li + li {
	margin-top: .5em;
}

.ul-list.map {
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

.ul-list.map li {
	padding-left: .5em;
	text-indent: -1em;
}



/* ======================================================
	フッター
====================================================== */
.global-footer {
	padding: 50px 0 30px;
	background-color: #eee;
	color: #707070;
	font-size: .8125rem;
}
.footer-container {
	display: grid;
	justify-items: center;
}
.footer-menu {
	margin: 0;
	margin-bottom: 50px;
	padding: 0;
	list-style: none;
}
.footer-menu a {
	display: inline-block;
	margin-right: 1em;
	color: #707070;
}
.copyright {
	margin: 0 auto;
	font-size: .8125rem;
	text-align: center;
}