@charset "utf-8";


/* Grid Area Property*/
.office-img-block{
	grid-area: office-img
}
#staff{
	grid-area: staff;
}
.president-left{
	grid-area: pre-l;
}
.president-right{
	grid-area: pre-r;
}
.company-info{
	grid-area: comp-i;
}


/* -------------------
	ABOUT */

.about-wrap{
	position: relative;
	max-width: var(--wide-wrap);
	width: 100%;
	margin-top: var(--base-top-margin);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--base-padding);
	padding-right: var(--base-padding);
}
.text-block{
	position: relative;
	min-width: 520px;
}
h1.category{
	max-width: 287px;
	width: 100%;
	margin-left: -2px;
	margin-bottom: 30px;
}
h1.category img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about-main{
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.text-block .catch{
	font-size: calc(var(--base-fontsize)*1.75);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.05em;
	margin-left: -3px;
	margin-bottom: 36px;
}
.text-block .main-text{
	font-size: var(--base-fontsize);
	margin-top: 3px;
	line-height: 1.9;
	letter-spacing: 0.01em;
	text-align: justify;
	word-break: break-all;
}
.text-block .main-text p {
	margin-bottom: 35px;
}


/* -------------------
	OUR TEAM */
	
.ourteam-wrap{
	position: relative;
	max-width: var(--wide-wrap);
	width: 100%;
	display: grid;
	grid-template-rows: auto ;
	grid-template-areas:
		"staff"
		"text";
	margin-top:83px;
	margin-left: auto;
	margin-right: auto;
}

#staff{
	max-width: var(--wide-wrapp);
	width: 100%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	row-gap: 12px ;
	grid-template-columns: repeat(6, 12.5%) ;
	justify-content: space-between;
	place-items: center;
	overflow: hidden;
}
.staff-thum{
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 135px;
	max-height: 216px;
	overflow: hidden;
}

.staff-thum img{
	width: 100%;
	height: 100%;
	opacity: 1.0;opacity: 1.0;
	object-fit: cover;
}

.staff-min-profile{
	display: grid;
	place-items: center;
	position: absolute;
	top: 216px;
	left: 0;
	right: 0;
	width: 100%;
	height: 120px;
	padding: 0.5em 0.5em;
	background-color: #fff;
}
.profile-wrap{
	display: block;
	width: 100%;
	/* height: auto; */
	text-align: center;
}

.staff-min-profile .name{
	font-size: 14px;
	margin-bottom: 0.3em;
}
.staff-min-profile .yomi{
	font-size: 12px;
	margin-bottom: 0.8em;
}

.staff-min-profile .position{
	font-size: 9px;
	color: #666;
}

.staff-caption{
	margin-top: 26px;
	text-align: center;
	font-size: calc(var(--base-fontsize)*0.94);
	line-height: 1.8;
	letter-spacing: 0.03em
}
.ourteam-wrap .text-block{
	padding-right: var(--base-padding);
	padding-left: var(--base-padding);

}
.president-wrap{
	position: relative;
	max-width: var(--wide-wrap);
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"pre-l pre-r";
	margin-top: 127px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--base-padding);
	padding-right: var(--base-padding);

}

.president-name{
	/* font-size: 17px; */
	font-size: calc(var(--base-fontsize)*1.01);
	margin-bottom: 5px;
}
.position-title{
	/* font-size: 13px; */
	font-size: calc(var(--base-fontsize)*0.834);
	margin-bottom: 24px;
	line-height: 1.5;
}

.president-box{
	display: block;
	width: 100%;
}
.president-box .main-text{
	font-size: calc(var(--base-fontsize)*0.834);
	letter-spacing: 0em;
	line-height: 1.65;
}
.president-left{
	padding-right: 17px;
}
.president-right{
	padding-left: 30px;
}


/* -------------------
COMPANY */


.company-wrap{
	position: relative;
	max-width: var(--wide-wrap);
	width: 100%;
	height: auto;
	display: grid;
	grid-template-rows: auto;
	grid-template-areas:
		"office-img"
		"comp-i";
	gap: 54px 0px;
	margin-top:110px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 131px;
}

.office-img-block{
	max-width: var(--wide-wrap);
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 48%);
	justify-content: space-between;
}
.office-img-block div{
	width: 100%;
}
.office-img-block div img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.company-info{
	display: grid;
	grid-template-columns: repeat(2, 48%);
	justify-content: space-between;
	padding-left: var(--base-padding);
}
.company-info iframe{
	width: 100%;
	height: 320px;
}

.gmap{
	display: grid;
	grid-template-columns: 1fr;
	justify-content: end;
}
.info-list {
  display: flex;
  flex-shrink: 0;
  margin-bottom: 10px;
}
.info-list dt,
.info-list dd{
	font-size: var(--base-fontsize);
	line-height: 1.6;
}
.info-list dt{
	display: block;
	width: 66px;
	text-align-last: justify;
	word-break:break-all;
	margin-right: 32px;
}

.info-list .tel, .info-list .email{
	letter-spacing: 0.1em;
}


/* ----------------------
  PC版 1300px 以下
---------------------- */
@media (width <=1300px) {


	
	/* -------------------
		COMPANY (PC <1300)*/

	.company-info{
		grid-template-columns: 48% 51.8%;
		padding-right: 0;
	}
	.info-list {
	  padding-right: 34px;
	}
}
/* ----------------------
  PC版 1000px 以下
---------------------- */
@media (width <=1100px) {
	/* -------------------
		OUR TEAM (PC <1100) */
	#staff{
		grid-template-columns: repeat(6, 14.5%) ;
	}
	.staff-min-profile{
		/* place-items: start; */
		padding: 0.2em 0.5em;
	}
}

/* ----------------------
  PC版 960px 以下
---------------------- */
@media (width <=960px) {
	
	/* -------------------
		ABOUT   (PC <960)*/
	.about-main{
		grid-template-columns: 1fr;
	}

	/* -------------------
		OUR TEAM (PC <960)*/
		
	#staff{
		grid-template-columns: repeat(4, 1fr);
		row-gap: 15px;
		place-items: center;
	}
	.president-wrap{
		grid-template-columns: 1fr;
		grid-template-areas:
		"pre-l"
		"pre-r"
		;
		gap: 30px 0px;
		max-width: 760px;
	}
	.president-left{
		padding-right: 0px;
	}
	.president-right{
		padding-left: 0px;
		margin-top: 30px;
	}
	
	/* -------------------
		COMPANY (PC <960)*/
		
	.office-img-block{
		gap:50px 10px;
	}
	.company-info{
		grid-template-columns: 1fr;
		padding-right: var(--base-padding);
	}
	
}

/* -------------------
  iPhone <767
------------------- */
@media (width <=767px) {
	/* -------------------
		OUR TEAM ( PC <=767)*/
	
	#staff{
		grid-template-columns: repeat(3, 1fr);
		row-gap: 15px;
		place-items: center;
	}
	
	/* -------------------
	COMPANY (iPhone <767) */
	
	.info-list {
	  padding-right: 0;
	}
	.info-list .tel, .info-list .email{
		letter-spacing: 0.05em;
	}
}


/* -------------------
  iPhone Setting
------------------- */
@media (min-width: 320px)
and (max-width: 499px) {
	
	/* Top  (iPhone)*/
	
	h1.category{
		max-width: 230px;
	}

	
	/* -------------------
	ABOUT  (iPhone) */
	
	.text-block{
		position: relative;
		min-width: auto;
	}

	.text-block .catch{
		font-size: calc(var(--base-fontsize)*1.3);
	}
	
	/* -------------------
		OUR TEAM (iPhone)*/
		
	.ourteam-wrap{
		margin-top: 20px;
	}
	#staff{
		grid-template-columns: repeat(2, 1fr);
		place-items: center;
		row-gap: 15px;
	}
	.staff-thum{
		max-width: 180px;
		max-height: 300px
	}
	.staff-thum img{
		object-fit: contain;
	}
	.staff-min-profile{
		place-items: start center;
		top: 200px;
		padding: 0.8em 0.5em;
	}

	/* -------------------
		COMPANY (iPhone) */
		
	.office-img-block{
		grid-template-columns: 1fr;
		gap:50px 50px;
		padding-right: var(--base-padding);
		padding-left: var(--base-padding);
	}
	.info-list dt{
		width: 60px;
		margin-right: 40px;
	}
	.gmap{
		margin-top: 50px;
	}
}