@charset "UTF-8";
/* ===========================
about.css
1.目次＆ブレークポイント
============================== */
/*
1.目次＆ブレークポイント
2.ページ全体
3.ご挨拶
4.作品紹介
5.沿革
6.事務所概要
7.組織図
*/
@media screen and (min-width: 35.5em) { /* 568px sm */
}
@media screen and (min-width: 48em) { /* 768px md */
}
@media screen and (min-width: 64em) { /* 1024px lg */
}
@media screen and (min-width: 80em) { /* 1280px xl */
}

/* ===========================
2.ページ全体
============================== */
.about-inner-a {
	max-width: 1280px;
	width: 90%;
	margin: 80px auto 0;
}

/* ===========================
3.ご挨拶
============================== */
.greeting {
	margin: 80px 0 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.greeting.reverse {
	flex-direction: row-reverse;
}
.greeting p {
	width: 100%;
	margin: 0 0 20px;
	padding: 0.5em;
	font-size: 1rem;
	line-height: 1.75;
	background: rgba(255, 255, 255, 0.7);
}
.greeting p:last-child {
	padding: 0;
	text-align: center;
	background: transparent;
}
.greeting p:last-child img {
	width: 70%;
}
.greeting p .name {
	display: block;
	margin-top: 1em;
	text-align: right;
}
.greeting p .name span {
	display: inline-block;
	margin-left: 1em;
	font-family: var(--serif);
	font-size: 1.5rem;
}
@media screen and (min-width: 48em) { /* 768px md */
	.greeting {
		margin: 150px 0 80px;
	}
	.greeting p {
		width: 55%;
		padding: 1em;
	}
	.greeting p:last-child {
		width: 45%;
		padding: 0em;
	}
	.greeting p:last-child img {
		width: auto;
	}
}

/* ===========================
4.作品紹介
============================== */
.artwork-ttl {
	margin: 50px 0 0;
	text-align: center;
	font-size: 1rem;
}
.artwork {
	margin: 50px 0 0;
}
.artwork-list {
	margin: 50px 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.artwork-list > div {
	width: 47%;
	margin-bottom: 22px;
	position: relative;
	text-align: center;
}
.artwork-list > div.two-cells {
	width: 100%;
}
.artwork-list > div.right-cells {
	width: 100%;
}
.artwork-list > div img {
	vertical-align: top;
}
.artwork > p {
	margin: 40px 0 20px;
	font-size: 1rem;
}
.md-btn {
	width: 26px;
	height: 26px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 0;
	right: 0;
	transition: all 0.5s;
}
.md-btn:hover {
	filter: brightness(1.3);
}
@media screen and (min-width: 48em) { /* 768px md */
	.artwork-ttl {
		font-size: 1.25rem;
	}
	.artwork-list {
		justify-content: flex-start;
	}
	.artwork-list > div {
		width: 22.5%;
		margin-left: 3.33%;
		margin-bottom: 20px;
	}
	.artwork-list > div:first-child {
		margin-left: 0;
	}
	.artwork-list > div.two-cells {
		width: 48.33%;
	}
	.artwork-list > div.right-cells {
		width: 30%;
	}
	.artwork > p {
		margin: 50px 0 30px;
	}
	.md-btn {
		width: 52px;
		height: 52px;
	}
}

/* モーダル設定 */
.md-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .7;
	z-index: 9999;
}
.md-contents {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 96%;
	max-height: 80%;
	height: auto;
	overflow: auto;
	transform: translateY(-50%) translateX(-50%);
	z-index: 10000;
}
.md-inner {
	display: block;
	width: auto;
	margin: 0;
	padding: 40px 20px 24px;
	background: #fff;
	font-size: 1rem;
	line-height: 1.4;
}
.md-xmark {
	position: absolute;
	top: 10px;
	right: 20px;
	width: 25px;
	height: 22px;
	z-index: 9999;
	cursor: pointer;
}
.md-xmark span {
	height: auto;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #333;
	border-radius: 4px;
}
.md-xmark span:nth-of-type(1) {
	top: 0;
	transform: translateY(10px) rotate(-45deg);
}
.md-xmark span:nth-of-type(2) {
	bottom: 0;
	transform: translateY(-10px) rotate(45deg);
}
@media screen and (min-width: 48em) { /* 768px md */
	.md-contents {
		text-align: center;
	}
	.md-inner {
		padding: 24px 40px;
	}
	.md-inner img {
		max-height: 80vh;
	}
	.md-xmark {
		top: 24px;
		right: 10px;
	}
}
@media screen and (min-width: 64em) { /* 1024px lg */
	.md-contents {
		width: 80%;
		max-height: 100%;
	}
}
@media screen and (min-width: 80em) { /* 1280px xl */
	.md-contents {
		width: 70%;
	}
}

/* ===========================
5.沿革
============================== */
#history {
	padding: 60px 0;
	background: url(../images/common/paper-back.jpg) center top repeat;
	background-size: contain;
	position: relative;
}
#history::before {
	content: '';
	display: block;
	max-width: 600px;
	width: 90%;
	height: 482px;
	position: absolute;
	top: 20px;
	right: 5%;
	background: url(../images/common/taiyu-badge3.png) right top no-repeat;
	background-size: contain;
	pointer-events: none;
	z-index: 1;
}
#history h2 {
	z-index: 2;
}
.history-inner {
	max-width: 1280px;
	width: 90%;
	margin: 80px auto 0;
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.history-inner > p {
	width: 100%;
	margin-bottom: 1em;
	font-size: 1rem;
	line-height: 1.75;
	text-align: justify;
}
@media screen and (min-width: 48em) { /* 768px md */
	#history {
		padding: 120px 0;
	}
	#history::before {
		top: 40px;
		right: 2%;
	}
	.history-inner > p {
		width: 47.5%;
	}
}

/* ===========================
6.事務所概要
============================== */
#office {
	padding: 60px 0;
}
.office-inner {
	max-width: 1024px;
	width: 90%;
	margin: 80px auto 0;
	padding: 0;
	list-style: none;
}
.office-inner li {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border-bottom: #000 1px solid;
}
.office-inner li > p {
	width: 65%;
	margin: 0;
	padding: 1.5em 0;
	font-size: 1rem;
	line-height: 1.75;
}
.office-inner li > p:first-child {
	width: 30%;
	margin-right: 4%;
}
.office-inner li > p a {
	color: #000;
	text-decoration: none;
}
@media screen and (min-width: 48em) { /* 768px md */
	#office {
		padding: 120px 0;
		background: url(../images/about/office.jpg) center top no-repeat;
	}
	.office-inner li > p {
		width: 38%;
		text-align: center;
	}
	.office-inner li > p:first-child {
		width: 19%;
		margin-right: 0;
	}
}
@media screen and (min-width: 80em) { /* 1280px xl */
	#office {
		background-size: 100%;
	}
}

/* ===========================
7.組織図
============================== */
#organizational-chart {
	padding: 60px 0;
	background: url(../images/common/paper-back.jpg) center top repeat;
	background-size: contain;
	position: relative;
}
#organizational-chart .about-inner-a {
	position: relative;
	z-index: 2;
	padding: 0 0 0;
}
.swipe-area {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.swipe-contents {
	overflow-x: scroll;
	padding-bottom: 20px;
}
.swipe-contents img {
	max-width: none;
	width: 760px;
}
@keyframes swipe-icon {
	0% {transform: translateX(-35%);}
	50% {transform: translateX(-65%);}
	100% {transform: translateX(-35%);}
}
.swipe-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-35%) translateY(-50%);
	animation: swipe-icon 1.8s ease-in-out 0s infinite normal;
	pointer-events: none;
}
.organizational-list {
	width: 230px;
	margin: 30px auto 0;
}
.organizational-list a {
	display: block;
	width: 100%;
	margin: 0 0 20px;
	padding: 0.7em 1em;
	font-size: 1rem;
	text-decoration: none;
	text-align: left;
	color: #fff;
	border: #fff 3px solid;
	position: relative;
	background: #000;
	transition: all ease-in 0.5s;
}
.organizational-list a::after {
	content: '＞';
	position: absolute;
	top: 0.7em;
	right: 1em;
	font-size: 1rem;
	color: #fff;
}
.organizational-list a:hover {
	background-color: rgba(0,0,0,0.4);
	text-shadow: none;
}
@media screen and (min-width: 48em) { /* 768px md */
	#organizational-chart {
		padding: 120px 0;
	}
	#organizational-chart::before {
		content: '';
		width: 100%;
		height: 100%;
		background: url(../images/common/spotty03.png) left top no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	#organizational-chart::after {
		content: '';
		width: 100%;
		height: 100%;
		background: url(../images/common/stroke01.webp) right bottom no-repeat;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 1;
	}
	#organizational-chart .about-inner-a {
		padding: 70px 0 0;
	}
	.swipe-contents {
		overflow-x: hidden;
		padding-bottom: 0;
		text-align: center;
	}
	.swipe-contents img {
		max-width: 100%;
		width: auto;
	}
	.swipe-icon {
		display: none;
	}
}