@charset "utf-8";
/* CSS Document */
/* hover */
.arrowOrigin:hover .arrow {
	-webkit-animation-name: arrow;
	animation-name: arrow;
	-webkit-animation-duration: .4s;
	animation-duration: .4s;
	-webkit-animation-timing-function: cubic-bezier(0.65, 0.01, 0.3, 0.97);
	animation-timing-function: cubic-bezier(0.65, 0.01, 0.3, 0.97);
}
.arrowOrigin:hover .arrow-rev {
	-webkit-animation-name: arrow-rev;
	animation-name: arrow-rev;
}
/* keyframes */
@-webkit-keyframes arrow {
 0% {
 opacity:1;
 -webkit-transform:translateX(0);
 transform:translateX(0);
}
 40% {
 opacity:0;
}
 49.9% {
 -webkit-transform:translateX(50%);
 transform:translateX(50%);
opacity:0
}
 50% {
 -webkit-transform:translateX(-50%);
 transform:translateX(-50%);
opacity:0
}
 100% {
 opacity:1;
 -webkit-transform:translateX(0);
 transform:translateX(0);
}
}
@keyframes arrow {
 0% {
 opacity:1;
 -webkit-transform:translateX(0);
 transform:translateX(0);
}
 40% {
 opacity:0;
}
 49.9% {
 -webkit-transform:translateX(50%);
 transform:translateX(50%);
opacity:0
}
 50% {
 -webkit-transform:translateX(-50%);
 transform:translateX(-50%);
opacity:0
}
 100% {
 opacity:1;
 -webkit-transform:translateX(0);
 transform:translateX(0);
}
}
@-webkit-keyframes arrow-rev {
 0% {
 opacity:1;
 -webkit-transform:translateX(0) rotate(180deg);
 transform:translateX(0) rotate(180deg);
}
 40% {
 opacity:0;
}
 49.9% {
 -webkit-transform:translateX(-50%) rotate(180deg);
 transform:translateX(-50%) rotate(180deg);
opacity:0
}
 50% {
 -webkit-transform:translateX(50%) rotate(180deg);
 transform:translateX(50%) rotate(180deg);
opacity:0
}
 100% {
 opacity:1;
 -webkit-transform:translateX(0) rotate(180deg);
 transform:translateX(0) rotate(180deg);
}
}
@keyframes arrow-rev {
 0% {
 opacity:1;
 -webkit-transform:translateX(0) rotate(180deg);
 transform:translateX(0) rotate(180deg);
}
 40% {
 opacity:0;
}
 49.9% {
 -webkit-transform:translateX(-50%) rotate(180deg);
 transform:translateX(-50%) rotate(180deg);
opacity:0
}
 50% {
 -webkit-transform:translateX(50%) rotate(180deg);
 transform:translateX(50%) rotate(180deg);
opacity:0
}
 100% {
 opacity:1;
 -webkit-transform:translateX(0) rotate(180deg);
 transform:translateX(0) rotate(180deg);
}
}
span.arrow { width: 34px; height: 1px; background: #005993; position: relative;  bottom: 0; margin: auto; display: inline-block; -webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
span.arrow::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 3.5px 0 3.5px 5px;
border-color: transparent transparent transparent #005993;
position: absolute;
right: -2px;
top: -3px;
}
/*PC*/
@media print, screen and (min-width: 768px) {

.logo_Hed_index { display: none; }

#contents { overflow: visible!important; }
.com_txt { text-align: center; }
/*---------------------------*/
.company_list { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: -160px; position: relative; }
.company_list li { flex-basis: 48%; max-width: 48%; margin-right: 4%; }
.company_list li:nth-child(n+3) { margin-top: 50px; }
.company_list li:nth-child(2n+2) { margin-right: 0px; }

.company_list_imgbox { width: 100%; margin: 0 auto; }
.company_list_img { width: 100%; margin: 0 auto; }
.company_list_img img { width: 100%; height: auto; }

.company_list_txtbox { width: 90%; box-sizing: border-box; padding: 30px; background: #fff; margin: 0 auto; margin-top: -50px; position: relative; z-index: 10; box-shadow: 0 0.5rem 3rem rgba(0,0,0,0.15); text-align: center; }

.company_list_tit {  font-size: 18px; font-weight: bold; color: #005993; margin-bottom: 10px; }

.photo_hover_wrap img {
width: 100%;
height: auto;
}

.photo_hover_wrap {
display: block;
height: 380px;
overflow: hidden;
position: relative;
text-decoration: none;
z-index: 0;
margin-bottom: 10px;
}
.photo_hover_wrap .photo {
display: block;
height: auto;
left: 0;
position: absolute;
top: 0;
transition: all 0.2s linear 0s;
width: 100%;
}
.company_list li a:hover .photo_hover_wrap {
text-decoration: none;
cursor: pointer;
}
.company_list li a:hover .photo_hover_wrap .photo {
transform: scale(1.1);
transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
#com_btn_list { margin-top: 100px; }

.com_btn_list { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; }
.com_btn_list li { flex-basis: 23.5%; max-width: 23.5%; margin-right: 2%; }
.com_btn_list li:nth-child(4n+4) { margin-right: 0px; }

.com_btn_list_link { opacity: .4; }

.photo_hover_wrap2 img {
width: 100%;
height: auto;
}

.photo_hover_wrap2 {
display: block;
height: 190px;
overflow: hidden;
position: relative;
text-decoration: none;
z-index: 0;
margin-bottom: 10px;
}
.photo_hover_wrap2 .photo2 {
display: block;
height: auto;
left: 0;
position: absolute;
top: 0;
transition: all 0.2s linear 0s;
width: 100%;
}
.com_btn_list li a:hover .photo_hover_wrap2 {
text-decoration: none;
cursor: pointer;
}
.com_btn_list li a:hover .photo_hover_wrap2 .photo2 {
transform: scale(1.1);
transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

/*-----------代表挨拶----------*/
.message_tit::before {
content: "";
display: block;
background: url(../images/com/icon_tit.png) 0 0 no-repeat;
width: 30px;
height: 25px;
position: absolute;
left: 10px;
top: -10px;
background-size: 100%;
}
.message_tit { font-size: 25px; font-weight: bold; position: relative; color: #005993; padding-top: 30px; padding-left: 10px;  }

#message .main_hed_box { margin-bottom: 50px!important; }

.message_txt { text-align: left; line-height: 1.8em; }
.message_name { font-weight: bold; margin-top: 30px; text-align: right; }
.message_name span { display: block; color: #005993; font-size: 16px; }

/*-------概要-----*/

.main_bg_box { width: 100%; box-sizing: border-box; padding: 50px; background: #fff; position: relative; margin-top: -160px; box-shadow: 0 0.5rem 3rem rgba(0,0,0,0.10);  }

/*------アクセス----*/

.facility_tit { font-size: 20px; font-weight: bold; margin-bottom: 15px; position: relative; padding-bottom: 20px; }
.facility_tit::before { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 20px; height: 1px; background: #005993; }

.access_box { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 100px; }
.access_txtbox { flex-basis: 48%; max-width: 48%; }
.access_imgbox { flex-basis: 48%; max-width: 48%; }

#access .main_hed_box { margin-bottom: 30px; }
.access_table { width: 100%; margin: 0 auto;margin-top: 30px;  }
.access_table dl { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; }
.access_table dt { flex-basis: 30%; max-width: 30%; margin-right: 5%;  border-top: 1px solid #005993; padding: 30px 0; line-height: 1.6; font-size: 16px; color: #005993; font-weight: 700; }
.access_table dd { flex-basis: 65%; max-width: 65%; border-top: 1px solid #d0d0d0; padding: 30px 0; line-height: 2.14; font-size: 14px; }


.access_list { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.access_list li { flex-basis: 48%; max-width: 48%; margin-right: 4%; }
.access_list li:nth-child(2n+2) { margin-right: 0px; }

.access_list_box { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 30px;  }
.access_list_box_L { flex-basis: 48%; max-width: 48%; }
.access_list_box_R { flex-basis: 48%; max-width: 48%; }

.access_list_box_img { width: 100%; margin: 0 auto; }
.access_list_box_img img { width: 100%; height: auto; }

.access_map { width: 100%; margin: 0 auto; }
.access_map iframe { width: 100%; }

}




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




/*sp*/
@media only screen and (max-width: 767px) {
#contents { overflow: visible!important; }
/*---------------------------*/

.company_list { width: 100%; margin: 0 auto; margin-top: -160px; position: relative; margin-top: -100px; }
.company_list li { flex-basis: 100%; max-width: 100%; }
.company_list li:nth-child(n+2) { margin-top: 50px; }

.company_list_imgbox { width: 100%; margin: 0 auto; }
.company_list_img { width: 100%; margin: 0 auto; }
.company_list_img img { width: 100%; height: auto; }

.company_list_txtbox { width: 90%; box-sizing: border-box; padding: 30px; background: #fff; margin: 0 auto; margin-top: -50px; position: relative; z-index: 10; box-shadow: 0 0.5rem 3rem rgba(0,0,0,0.15); text-align: center; }

.company_list_tit {  font-size: 18px; font-weight: bold; color: #005993; margin-bottom: 10px; }

.photo_hover_wrap3 img {
width: 100%;
height: auto;
}

.photo_hover_wrap {
display: block;
height: 50vw;
overflow: hidden;
position: relative;
text-decoration: none;
z-index: 0;
margin-bottom: 10px;
}
.photo_hover_wrap .photo {
display: block;
height: auto;
left: 0;
position: absolute;
top: 0;
transition: all 0.2s linear 0s;
width: 100%;
}
.company_list li a:hover .photo_hover_wrap {
text-decoration: none;
cursor: pointer;
}
.company_list li a:hover .photo_hover_wrap .photo {
transform: scale(1.1);
transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
#com_btn_list { margin-top: 70px; }

.com_btn_list { width: 100%; margin: 0 auto; }
.com_btn_list li { width: 100%; margin: 0 auto; }
.com_btn_list li:nth-child(n+2) { margin-top: 30px;  }

.com_btn_list_link { opacity: .4; }

.photo_hover_wrap2 img {
width: 100%;
height: auto;
}

.photo_hover_wrap2 {
display: block;
height: 50vw;
overflow: hidden;
position: relative;
text-decoration: none;
z-index: 0;
margin-bottom: 10px;
}
.photo_hover_wrap2 .photo2 {
display: block;
height: auto;
left: 0;
position: absolute;
top: 0;
transition: all 0.2s linear 0s;
width: 100%;
}
.com_btn_list li a:hover .photo_hover_wrap2 {
text-decoration: none;
cursor: pointer;
}
.com_btn_list li a:hover .photo_hover_wrap2 .photo2 {
transform: scale(1.1);
transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

/*-----------代表挨拶----------*/
.message_tit::before {
content: "";
display: block;
background: url(../images/com/icon_tit.png) 0 0 no-repeat;
width: 30px;
height: 25px;
position: absolute;
left: 10px;
top: -10px;
background-size: 100%;
}
.message_tit { font-size: 20px; font-weight: bold; position: relative; color: #005993; padding-top: 30px; padding-left: 10px;  }

#message .main_hed_box { margin-bottom: 30px!important; }

.message_txt { text-align: left; line-height: 1.8em; }
.message_name { font-weight: bold; margin-top: 30px; text-align: right; }
.message_name span { display: block; color: #005993; font-size: 16px; }

/*-------概要-----*/

.main_bg_box { width: 100%; box-sizing: border-box; padding: 30px; background: #fff; position: relative; margin-top: -100px; box-shadow: 0 0.5rem 3rem rgba(0,0,0,0.10);  }


/*------アクセス----*/
.facility_tit { font-size: 18px; font-weight: bold; margin-bottom: 15px; position: relative; padding-bottom: 20px; }
.facility_tit::before { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 20px; height: 1px; background: #005993; }

.access_box { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 70px; }
.access_txtbox { width: 100%; margin: 0 auto; margin-bottom: 30px; }
.access_imgbox { width: 100%; margin: 0 auto; }

#access .main_hed_box { margin-bottom: 30px; }
.access_table { width: 100%; margin: 0 auto;margin-top: 30px;  }
.access_table dl { width: 100%;  }
.access_table dt { width: 100%;  border-top: 1px solid #005993; padding: 15px; line-height: 1.6; font-size: 16px; color: #005993; font-weight: 700; box-sizing: border-box; }
.access_table dd { width: 100%;  border-top: 1px solid #d0d0d0; padding: 15px; line-height: 2.14; font-size: 14px; box-sizing: border-box; }


.access_list { width: 100%; margin: 0 auto;  }
.access_list li { width: 100%; margin: 0 auto; }
.access_list li:nth-child(n+2) { margin-top: 50px;  }

.access_list_box { width: 100%; margin: 0 auto; margin-top: 30px;  }
.access_list_box_L { width: 100%; margin: 0 auto; margin-bottom: 30px;}
.access_list_box_R { width: 100%; margin: 0 auto; }

.access_list_box_img { width: 100%; margin: 0 auto; }
.access_list_box_img img { width: 100%; height: auto; }

.access_map { width: 100%; margin: 0 auto; }
.access_map iframe { width: 100%; }
}
