@charset "utf-8";

/*-----------------------------------------------------------------------------------------------*/
/* 会社概要 -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.main .contents { margin-top: var(--margin-30); }


/* 代表よりご挨拶 -------------------------------------------------------------------------------*/
.main #greeting .comment { margin-top: var(--margin-30); }
.main #greeting .image {
	margin-top: var(--margin-30);
	text-align: center;
}
.main #greeting .com {
	font-size: var(--font-s);
	line-height: var(--line-m);
	margin: var(--margin-10) 0;
}
.main #greeting .img img { max-width: 240px; }
.main #greeting .name img {
	mix-blend-mode: darken;
	max-width: 170px;
}


/* 企業理念 -------------------------------------------------------------------------------------*/
.main #philosophy .read,
.main #philosophy .comment {
	font-weight: var(--weight-m);
	line-height: var(--line-m);
}
.main #philosophy .read { font-size: 2.8rem;/*3.2rem;/*4.0rem;*/ }
.main #philosophy .read br { display: none; }
.main #philosophy .comment {
	font-size: var(--font-xl);/*2.2rem;/*2.5rem;/*3.2rem;*/
	margin-top: var(--margin-30);
}


/* 基本情報 -------------------------------------------------------------------------------------*/
.main #information .contents {
	border-top: var(--color-black) solid 1px;
	display: table;
	width: 100%;
}
.main #information dl { display: table-row; }
.main #information dt,
.main #information dd {
	border-bottom: var(--color-black) solid 1px;
	display: table-cell;
	font-size: var(--font-m);
	line-height: var(--line-m);
	padding: 15px 0 17px;
}
.main #information dt {
	padding-right: 1em;
	white-space: nowrap;
}


/* 直島文化村の歩み -----------------------------------------------------------------------------*/
.main #history .contents {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-20);
}
.main #history dl {
	background-color: var(--color-white);
	border-radius: 10px;
	display: flex;
	align-items: center;
	padding: 20px var(--margin-20) 22px;
}
.main #history dt,
.main #history dd { line-height: var(--line-m); }
.main #history dt {
	font-size: var(--font-l);
	font-weight: var(--weight-b);
	width: 90px;
}
.main #history dd {
	flex: 1;
	font-size: var(--font-m);
}


/* アクセス -------------------------------------------------------------------------------------*/
.main #access .contents { margin-top: 0; }
.main #access .contents:not(:first-of-type) { margin-top: var(--margin-60); }

.main #access .googlemap {
	height: 90vw;
	max-height: 540px;
	position: relative;
	width: 100%;
}
.main #access .googlemap iframe {
	filter: grayscale(100%);
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
.main #access .comment { margin-top: var(--margin-5); }
.main #access .comment + h3 { margin-top: var(--margin-20); }
.main #access .button { margin-top: var(--margin-20); }
/*-----------------------------------------------------------------------------------------------*/





@media(min-width: 640px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 会社概要 -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 基本情報 -------------------------------------------------------------------------------------*/
	.main #information .button { text-align: right; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 768px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 会社概要 -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 代表よりご挨拶 -------------------------------------------------------------------------------*/
	.main #greeting .contents {
		display: flex;
		column-gap: var(--margin-60);
	}
	.main #greeting .text { flex: 1; }
	.main #greeting .image {
		margin-top: 0;
		width: 200px;
	}
	.main #greeting .name img { width: 140px; }
	/* 企業理念 -------------------------------------------------------------------------------------*/
	.main #philosophy .read,
	.main #philosophy .comment { text-align: center; }
	.main #philosophy .read br { display: inline; }
	/* 基本情報 -------------------------------------------------------------------------------------*/
	.main #information dt { padding-right: var(--margin-60); }
	/* 直島文化村の歩み -----------------------------------------------------------------------------*/
	.main #history dl {
		padding-right: var(--margin-30);
		padding-left: var(--margin-30);
	}
	/* アクセス -------------------------------------------------------------------------------------*/
	.main #access .contents {
		display: flex;
		column-gap: var(--margin-60);
	}
	.main #access .text { flex: 1; }
	.main #access .button {
		margin-top: 0;
		width: 200px;
	}
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1024px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* 会社概要 -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.main .contents { margin-top: var(--margin-60); }
	/* 代表よりご挨拶 -------------------------------------------------------------------------------*/
	.main #greeting .contents { column-gap: 0; }
	.main #greeting .image {
		width: 40%;
		max-width: 480px;
	}
	.main #greeting .img img { width: 50%; }
	/* 基本情報 -------------------------------------------------------------------------------------*/
	.main #information dt,
	.main #information dd {
		padding-right: var(--margin-20);
		padding-left: var(--margin-20);
	}
	.main #information dt { padding-right: 80px; }
	/* 直島文化村の歩み -----------------------------------------------------------------------------*/
	.main #history dl {
		column-gap: var(--margin-30);
		padding-right: var(--margin-20);
		padding-left: var(--margin-20);
	}
	.main #history dt {
		text-align: center;
		width: 120px;
	}
	/*-----------------------------------------------------------------------------------------------*/
}