@charset "utf-8";


/* -----------------------------------------------------------
   aloha
   ----------------------------------------------------------- */

#hawaii-senmon .aloha .box_aloha{
    width: 1000px;
       margin: 0px auto 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#hawaii-senmon .aloha .box_aloha .box-photo{
    width: 45%;
    background: url(../images/aloha_ph_01.jpg);
    background-position: 20% 50%;
    height: 650px;
    display: block;
    background-size: cover;
}
#hawaii-senmon .aloha .box_aloha .box-txt{
    width: 50%;
    position: relative;
    top: 50px;
}
#hawaii-senmon .aloha .box_aloha .box-txt .sub{
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 40px;
}
#hawaii-senmon .aloha .box_aloha .box-txt .dtl .txt{
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
}
#hawaii-senmon .aloha .box_aloha .box-txt .dtl .logo{
    width: 35%;
}
#hawaii-senmon .aloha .wrap-box-staff{
        margin: 200px auto 0px;
    text-align: center;
    padding: 70px 0px;
    background: #5ec1c9;
    color: #fff;
}
#hawaii-senmon .aloha .wrap-box-staff .sub{
    font-size: 22px;
    font-weight: bold;
	     margin: 0px auto 50px;
	    width: 80%;
}
#hawaii-senmon .aloha .wrap-box-staff .box-flex{
display: flex;
    flex-wrap: wrap;
    /*justify-content: space-evenly;*/
    width: 1000px;
    margin: auto;
	grid-row-gap: 45px;
}
#hawaii-senmon .aloha .wrap-box-staff .box-flex.three{
    justify-content: space-evenly;
}
#hawaii-senmon .aloha .wrap-box-staff .box-flex .box-staff{
    width: 23%;
	    position: relative;
	    margin: 0% 1%;
}
#hawaii-senmon .aloha .wrap-box-staff .box-flex .box-staff.a-hover .name{
  color: #fcff36;
  transition: all .5s ease;
}
#hawaii-senmon .aloha .wrap-box-staff .box-flex .box-staff .name{
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
}
#hawaii-senmon .aloha .wrap-box-staff .box-flex .box-staff .area-link{
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 1100px) {
#hawaii-senmon .aloha .box_aloha {
    width: 80%;
}
#hawaii-senmon .aloha .wrap-box-staff .box-flex {
    width: 90%;
}
}
@media screen and (max-width: 767px) {
#hawaii-senmon .aloha .box_aloha {
    width: 100%;
    margin: 8% auto;
    display: block;
}
#hawaii-senmon .aloha .box_aloha .box-photo {
    width: 100%;
    background: url(../images/aloha_ph_01.jpg);
    background-position: 50% 40%;
    height: 45vh;
}
#hawaii-senmon .aloha .box_aloha .box-txt {
    width: 90%;
    position: static;
    margin: 10% auto;
}
#hawaii-senmon .aloha .wrap-box-staff {
    margin: 12% auto 0px;
    padding: 8% 0px 5%;
}
#hawaii-senmon .aloha .box_aloha .box-txt .sub {
    font-size: 4vw;
    margin: 0px auto 5%;
}
#hawaii-senmon .aloha .box_aloha .box-txt .dtl .txt {
    font-size: 2.8vw;
}
#hawaii-senmon .aloha .wrap-box-staff .sub {
    font-size: 4vw;
	    margin: 0px auto 5%;
}
#hawaii-senmon .aloha .wrap-box-staff .box-flex {
    width: 80%;
	grid-row-gap: 25px;
	justify-content: space-evenly;
}
#hawaii-senmon .aloha .wrap-box-staff .box-flex .box-staff {
    width: 45%;
	    margin-bottom: 5%;
}
#hawaii-senmon .aloha .wrap-box-staff .box-flex .box-staff .name {
    margin-top: 5%;
	font-size: 2.8vw;
}
}
@media screen and (max-width: 481px) {
#hawaii-senmon .aloha .box_aloha .box-photo {
    width: 100%;
    background: url(../images/aloha_ph_01.jpg);
    background-position: 25% 35%;
    height: 30vh;
}
#hawaii-senmon .aloha .box_aloha .box-txt .sub {
    font-size: 4vw;
}
}