@charset "utf-8";
/* CSS Document */


/*------------------------------------------------
 contents common
------------------------------------------------*/

section{
	padding:30px 0 0;
	position: relative;
	text-align: center;
}

section h3{
	margin:0 auto 20px;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	color:#2b84d2;
}

/* -------------------- smart phone  -------------------- */

@media screen and (max-width:767px) {

section h3{
	font-size: 1.16em;
}
}

/*------------------------------------------------
 lifeStyleTop
------------------------------------------------*/

/* mainHdImg ------------------------------------------*/
#mainHdImg{
	width:100%;
	padding:0;
	box-sizing: border-box;
	background-size:cover;
	    min-width: 980px;
    max-width: 1440px;
    height: 300px;
    margin: 0 auto;

	padding-top:123px;
	background-color: #2b84d2;
	position: relative;
}

#mainHdImg .titleArea {
    position: absolute;
    top: 32%;
    left: 0;
    display: block;
    width: 100%;
    text-align: center;
    z-index: 2;
}

#mainHdImg .logoMark{
	display: block;
	height:1.4em;
	color:#fff;
	font-size: 1.2em;
	font-weight: 700;
}
#mainHdImg .logoMark::before{
	font-family: 'marurino';
	content:'\e920';
	font-size:1.3em;
	margin-right:8px;
	vertical-align: -0.1em;
}
.newoffice #mainHdImg h2{
	width:85%;
	margin:0.3em auto 15px;
	padding:0.3em 0 0.3em;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	color:#000;
	border-top:solid 1px #000;
	border-bottom:solid 1px #000;
}
#mainHdImg h2 span{
	display:block;
	padding:0.3em 1em 0;
	font-size: 0.7em;
}
.newoffice #mainHdImg h2 + p{
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	color:#fff;
}


/* -------------------- tablet  -------------------- */

@media screen and (max-width:969px) {

#mainHdImg{
	min-width: 0;
}
}

/* -------------------- smart phone  -------------------- */

@media screen and (max-width:767px) {

#mainHdImg{
	height: 212px;
	}
	
#mainHdImg .titleArea {
    top: 28%;

}
}


/* contents ------------------------------------------*/

section.contents{
	padding-top: 0;
}

.newoffice .co {
    min-width: 980px;
    max-width: 1200px;
    margin: 0 auto 0;
    text-align: center;
    position: relative;
    padding: 0;
}



.contents p{
	line-height: 1.7em;
	padding-bottom:1em;
	text-align: left;
}
.contents h3{
}
.contents h3 + p{
	text-align: center;
	padding-bottom:2em;
}

/* -------------------- tablet  -------------------- */

@media screen and (max-width:969px) {

	.newoffice .co{
		min-width: 0;
		width: 96%;		
	}
}

/* -------------------- smart phone  -------------------- */

@media screen and (max-width:767px) {

.newoffice .co{

		width: 90%;		
	}

}


/* intro ------------------------------------------*/

#intro {
	padding: 30px 0;
}

#intro .co > div{
	display: flex;
	justify-content: space-between;
}

#intro .co div{
	margin-top: 2em;
}
#intro .co #voice1,
#intro .co #voice2,
#intro .co #voice3{
	width: 31.6%;
	vertical-align: top;

}
#intro h4{
	width: 100%;
	font-size: 1.1em;
	line-height: 3em;
	color: #fff;
	background-color: #614336;
	border-radius: 7px;
	position: relative;
	font-weight: bold;
}
#intro h4::before{
	font-family: 'marurino';
	font-size: 1.5em;
	font-weight: normal;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 3%;
}
#intro #voice1 h4::before{
	content:'\e911';
}
#intro #voice2 h4::before{
	content:'\e90d';
}
#intro #voice3 h4::before{
	content:'\e917';
}
#intro h4::after{
	content: "";
	position: absolute;
	bottom: -1.4em;
	left: 50%;
	margin-left: -0.65em;
	border: 12px solid transparent;
	border-top: 12px solid #614336;
}
#intro img{
	width: 80%;
	margin: 1em auto 0;
}
#intro p{
	text-align: center;
	line-height: 1.8em;
}

/* -------------------- tablet  -------------------- */

@media screen and (max-width:969px) {

	#intro h4{
		font-size: 0.85em;
		padding-left: 0.5em;
	}
}

/* -------------------- smart phone  -------------------- */

@media screen and (max-width:767px) {

#intro .co > div{
	display: block;
}
	
#intro .co #voice1, #intro .co #voice2, #intro .co #voice3 {
    width: 100%;
}
	

	#intro h4{
		font-size: 1.1em;
		padding-left: 0;
	}

}

/* officeInfo ------------------------------------------*/

#officeInfo{
	padding: 0 0 30px;
	background-color: #2b84d2;
	position: relative;
}
#officeInfo #officeImg{
    min-width: 980px;
    max-width: 1200px;
    margin: 0 auto 4em;
	height: 20vh;
	background-image: url(../images/office_info_img.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#officeInfo .co{
	padding-top: 30px;
}
#officeInfo span{
	font-weight: 700;
	color: #fff;
	font-size: 1.2em;
}
#officeInfo h3{
	margin-top: 0.5em;
	padding-top: 0.5em;
	width: 85%;
	font-size: 1.5em;
	color: #000;
	border-top: 1px solid #fff;
}



#officeInfo .iconArea {
	width: 85%;
	margin: 4.5em auto 0;
}
#officeInfo .iconArea li{
	width: 33%;
	margin-top: 2em;
	font-size: 1.4em;
	font-weight: 700;
	text-align: center;
	color: #fff;
	position: relative;
}
#officeInfo .iconArea li::before{
	font-family: 'marurino';
	content:'\e91c';
	font-size:3em;
	position: absolute;
	top: -1.2em;
	left:40%;
/*	left: 50%;
	margin-left: -6vw;*/
}
#officeInfo .iconArea li:nth-child(2)::before{
	content:'\e911';
}
#officeInfo .iconArea li:last-child::before{
	content:'\e91a';
}

#officeInfo .co > div {
	display: flex;
	margin-top: 4em;
	width: 85%;
	margin: 4em auto;
}

#infomArea{
	margin: 0 auto 0;
	padding: 150px 5% 0;
	border: 2px solid #fff;
	background-color: #2b84d2;
	width: 40%;
}

#infomArea p:first-child{
	font-size: 1.3em;
	font-weight: 700;
	text-align: center;
	color: #fff;
}
#infomArea p:last-child{
	padding-bottom: 0;
	font-size: 0.9em;
	line-height: 1.6em;
}

#mapArea{
	margin: 0 auto;
	padding: 5%;
	background-color: #fff;
	width: 55%;
}
#mapArea img{
	width: 100%;
}
#mapArea p{
	margin-top: 1em;
	padding-bottom: 0;
	font-size: 0.8em;
	font-weight: 700;
}

/* -------------------- tablet  -------------------- */

@media screen and (max-width:969px) {

#officeInfo #officeImg{	
	min-width: 0;
}
	
#infomArea {

    padding: 50px 5% 0;

}
}

/* -------------------- smart phone  -------------------- */

@media screen and (max-width:767px) {

#officeInfo #officeImg{	
	margin-bottom: 0;
	}
	
#officeInfo span {
    font-size: 1em;
}

	#officeInfo h3 {
		font-size: 1.35em;
	}
	
#officeInfo .iconArea li::before {
    font-size: 12vw;
    position: absolute;
    top: -1.2em;
    left: 50%;
    margin-left: -6vw;
}
	
	#officeInfo .iconArea li{
		font-size: 0.8em;
	}
	
#officeInfo .co > div {
    display:block;
    width: 100%;
    margin: 2.5em auto;
}
	
#infomArea {
	width: auto;
    padding:5%;
}
	
	#mapArea {
	width: auto;
	}
#infomArea p:first-child {
    font-size: 1.1em;
}
}