@charset "UTF-8";



/*GREETING
---------------------------------------------------------*/
#greet .bg {
	background: rgba(126,198,244,0.13);
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding: 70px 0 120px;
}
#greet .bg::before {
	content: "";	/*背景画像*/
	position: absolute;
	width: 72%;
	max-width: 1070px;
	height: 100%;
	background: url("../images/staff/bg1@2x.png") no-repeat right top;
	background-size: contain;
	right: 0;
	top: 0;
}
#greet .bg .w1220 {
	position: relative;
	z-index: 1;
}

#greet h2 {
	color: #fff;
	font-size: min(940%,10vw);
	letter-spacing: .15em;
	line-height: 1.2em;
	margin-bottom: .3em;
}

#greet .flex_box {
	width: 100%;
	max-width: 1160px;
	margin-left: auto;
	margin-right: 0;
	display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#greet .flex_box .box_l {
	width: 34%;
	max-width: 389px;
	position: relative;
	z-index: 1;
}
#greet .flex_box .box_r {
	width: 60%;
	max-width: 670px;
	position: relative;
	z-index: 2;
	padding-top: 12%;
}

#greet .flex_box .box_l .photo {
	position: relative;
	z-index: 0;
}
#greet .flex_box .box_l dl {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 310px;
	margin: 30px auto 0;
}
#greet .flex_box .box_l dt {
	font-size: 125%;
	letter-spacing: .2em;
	line-height: 1.2em;
	margin-bottom: .8em;
}
#greet .flex_box .box_l dt span {
	font-size: 85%;
	letter-spacing: .2em;
	line-height: 1.2em;
}
#greet .flex_box .box_l dd:not(.img_txt) {
	font-size: 220%;
	letter-spacing: .15em;
	line-height: 1.2em;
	margin-bottom: .5em;
}
#greet .flex_box .box_l dd.img_txt {
	border-bottom: solid 1px #294c7f;
}
#greet .flex_box .box_l dd.img_txt img {
	margin-left: 0;
	width: 55%;
	max-width: 160px;
}
#greet .flex_box .box_l .abs {
	width: 120vw;
	max-width: 1820px;
	position: absolute;
	z-index: 1;
	left: -80px;
	top: 33%;
}

#greet .flex_box .box_r dt {
	font-size: min(260%,4.0vw);
	letter-spacing: .15em;
	line-height: 1.5em;
	margin-bottom: 1.0em;
}

#greet .profile {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1020px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
    justify-content: space-between;
}
#greet .profile > dl {
	width: 48%;
	max-width: 474px;
}
#greet .profile dt {
	background: #4493b8;
	color: #fff;
	font-size: 115%;
	letter-spacing: .2em;
	line-height: 1.4em;
	padding: .3em 1.5em;
	margin-bottom: 1.5em;
}
#greet .profile dd {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	font-size: 95%;
	letter-spacing: .15em;
	line-height: 1.4em;
}
#greet .profile dd li {
	box-sizing: border-box;
	padding-left: 1.0em;
	position: relative;
	margin-bottom: .8em;
}
#greet .profile dd li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}
#greet .profile dd li:last-child {
	margin-bottom: 0;
}
#greet .profile dd li.no_dot {
	padding-left: 0;
}
#greet .profile dd li.no_dot::before {
	display: none;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#greet .bg {
	padding: 6% 0 10%;
}
#greet h2 {
	font-size: 10vw;
	letter-spacing: .1em;
}
#greet .flex_box .box_l dl {
	margin-top: 10%;
	font-size: 90%;
}	
#greet .flex_box .box_l dt {
	letter-spacing: .1em;
}
#greet .flex_box .box_l dt span {
	letter-spacing: .1em;
}
#greet .flex_box .box_l dd:not(.img_txt) {
	letter-spacing: .1em;
}
#greet .flex_box .box_l .abs {
	left: -5vw;
	top: 33%;
}
#greet .flex_box .box_r dt {
	font-size: 4.0vw;
	margin-bottom: .6em;
}

#greet .profile dt {
	letter-spacing: .1em;
}
#greet .profile dd {
	letter-spacing: .05em;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#greet .bg {
	padding: 12% 0 14%;
}
#greet .bg::before {
	width: 72%;	/*背景画像*/
	transform: translateX(5%);
}

#greet h2 {
	font-size: 250%;
	letter-spacing: .05em;
	margin-bottom: 1.0em;
}

#greet .flex_box {
	display: block;
}
#greet .flex_box .box_l {
	width: 100%;
	max-width: 100%;
}
#greet .flex_box .box_r {
	width: 100%;
	max-width: 100%;
	padding-top: 8%;
}

#greet .flex_box .box_l .photo {
	width: 60%;
	margin: 0 auto;
}
#greet .flex_box .box_l dl {
	width: 100%;
	max-width: 100%;
	margin: 4% 0 0;
	text-align: center;
}
#greet .flex_box .box_l dt {
	font-size: 110%;
	letter-spacing: .1em;
	margin-bottom: .5em;
}
#greet .flex_box .box_l dt span {
	letter-spacing: .1em;
}
#greet .flex_box .box_l dd:not(.img_txt) {
	font-size: 180%;
	letter-spacing: .15em;
	margin-bottom: .3em;
}
#greet .flex_box .box_l dd.img_txt {
	width: 65%;
	margin: 0 auto;
}
#greet .flex_box .box_l dd.img_txt img {
	margin-left: auto;
}
#greet .flex_box .box_l .abs {
	width: 140vw;
	left: 0;
	top: 33%;
}

#greet .flex_box .box_r dt {
	font-size: 140%;
	letter-spacing: .1em;
	margin-bottom: .8em;
}

#greet .profile {
	display: block;
}
#greet .profile > dl {
	width: 100%;
	max-width: 100%;
	margin-bottom: 5%;
	font-size: 90%;
}
#greet .profile > dl:last-child {
	margin-bottom: 0;
}
#greet .profile dt {
	letter-spacing: .1em;
	margin-bottom: .8em;
}
#greet .profile dd {
	width: 90%;
	max-width: 100%;
	letter-spacing: normal;
}
#greet .profile dd li {
	margin-bottom: .4em;
}
}



/*HISTORY
---------------------------------------------------------*/
#history .bg_box {
	background: rgba(207,207,208,0.13);
	padding: 80px 0 100px;
}
#history .bg_box .img_item {
	width: 39%;
	max-width: 425px;
	position: relative;
	margin-bottom: 2.0em;
}
#history .bg_box .img_item::before {
	content: "";
	display: block;
	padding-top: 63.5%;	/*高さ*/
}
#history .bg_box .img_item.flt_l {
	margin-right: 7%;
}
#history .bg_box .img_item.flt_r {
	margin-left: 7%;
}
#history .bg_box .img_item span {
	display: block;
	position: absolute;
	bottom: 0;
	width: 147%;
	max-width: 623px;
}
#history .bg_box .img_item.flt_l span {
	right: 0;
}
#history .bg_box .img_item.flt_r span {
	left: 0;
}
#history .box2 .com_style1 {
	width: 54%;
	float: right;
}

#history .ci {
	font-size: 80%;
	color: #1980be;
	padding: 0 .2em;
	vertical-align: super;
}
#history .box1_list {
	position: relative;
}
#history .box1_list li {
	width: 100%;
	box-sizing: border-box;
	position: relative;
	padding-left: 1.8em;
	text-align: justify;
	font-size: 85%;
	line-height: 1.8em;
}
#history .box1_list li::before {
	display: block;
	content: "1.";
	color: #1980be;
	position: absolute;
	left: 0;
	top: 0;
}
#history .box1_list li:nth-child(2)::before {content: "2.";}
#history .box1_list li:nth-child(3)::before {content: "3.";}
#history .box1_list li:nth-child(4)::before {content: "4.";}
#history .box1_list li:nth-child(5)::before {content: "5.";}
#history .box1_list li:nth-child(6)::before {content: "6.";}
#history .box1_list li:nth-child(7)::before {content: "7.";}
#history .box1_list li:nth-child(8)::before {content: "8.";}
#history .box1_list li:nth-child(9)::before {content: "9.";}
#history .box1_list li:nth-child(10)::before {content: "10.";}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#history .bg_box {
	padding: 7% 0 8%;
}
#history .bg_box .img_item {
	width: 42%;
}
#history .bg_box .img_item.flt_l {
	margin-right: 5%;
}
#history .bg_box .img_item.flt_r {
	margin-left: 5%;
}
#history .bg_box .img_item span {
	width: 110%;
}
#history .box2 .com_style1 {
	width: 100%;
	float: none;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#history .bg_box {
	padding: 0 0 13%;
}
#history .bg_box .img_item {
	width: 80%;
	margin: 0 auto !important;
	float: none !important;
	transform: translateY(-1.5em);
}
#history .bg_box .img_item::before {
	display: none;
}
#history .bg_box .img_item span {
	position: relative;
	bottom: auto;
	width: 100%;
}
#history .bg_box .img_item.flt_l span {
	right: auto;
}
#history .bg_box .img_item.flt_r span {
	left: auto;
}
#history .box2 .com_style1 {
	width: 100%;
	float: none;
}
}



/*
---------------------------------------------------------*/

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
}