@charset "utf-8";

/* ------ main_visual ---------- */
.main_visual { position:relative; height:650px; /*height:100vh;*/ min-height:650px;
 background:url(../img/top/main_visual.jpg) no-repeat center top / cover; }
.main_visual .inner { height:100%; -webkit-align-items:center; align-items:center; }
.main_visual .lead { margin-left:auto; }

.mv_area { height:100%; }

/* ------ info ---------- */
.info_area { position:relative; z-index:2; }
.info_box { margin-top:-11em; padding:2em 2.4em; border-bottom:2px solid #e6e6e6; background:#fff; }
.info_box .ttl { font-size:1.25em; font-weight:bold; line-height:1.6; }
.info_box .ttl span { color:#49bc9d; font-size:.65em; }

  .info_list { overflow-y:auto; overflow-x:hidden; max-height:20em; -webkit-flex:1; flex:1; -webkit-overflow-scrolling:touch; }
  .info_list li { padding:.6em 0; border-bottom:1px solid #eee;
   display:-webkit-flex; display:flex;
   -webkit-align-items:baseline; align-items:baseline; }
  .info_list .date { margin:0 1em; font-weight:bold; font-size:.9em; }

  .info_list .cat { display:inline-block; min-width:5.2em;  padding:.35em .5em;
   color:#fff; font-size:.875em; font-weight:bold; line-height:1; text-align:center; letter-spacing:0; }
  .info_list .news { background:#7ac676; }
  .info_list .important { background:#e66060; }
  .info_list .service { background:#5aa7e1; }

/* ------ service ---------- */
#service { border-bottom:1px solid #e8e8e8; }
.service_list { padding-bottom:10px; }
.service_list li { width:31.5%; border-bottom:2px solid #e6e6e6; background:#fff no-repeat top right / cover; }
.service_list li a { position:relative; z-index:2; height:100%; padding:23% 1.5em; color:#333; text-align:center;
 font-size:1.375em; font-weight:bold; line-height:1.5;
 display:-webkit-flex; display:flex;
 -webkit-flex-direction:column; flex-direction:column;
 -webkit-justify-content:center; justify-content:center;
 -webkit-align-items:center; align-items:center;
}
.service_list li a span { display:block; margin-top:.3em; font-weight:500; font-size:.727em; letter-spacing:.05em; line-height:1.5; }
.service_list li a:before { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; width:100%; height:8px;
-webkit-transition:all .5s ease-out; transition:all .5s ease-out; }

.service_list li.nagare a:before { background-color:#81c57e; }
.service_list li.maebarai a:before { background-color:#79c5a4; }
.service_list li.keiyaku a:before { background-color:#7dc4c3; }
.service_list li.kei_yoyaku a:before { background-color:#7fabc4; }
.service_list li.chukan a:before { background-color:#7f91c5; }
.service_list li.moshikomi a:before { background-color:#a286c4; }

.service_list li.nagare { background-image:url(../img/top/bg_ser_nagare.svg); }
.service_list li.maebarai { background-image:url(../img/top/bg_ser_maebarai.svg); }
.service_list li.keiyaku { background-image:url(../img/top/bg_ser_keiyaku.svg); }
.service_list li.kei_yoyaku { background-image:url(../img/top/bg_ser_kei_yoyaku.svg); }
.service_list li.chukan { background-image:url(../img/top/bg_ser_chukan.svg); }
.service_list li.moshikomi { background-image:url(../img/top/bg_ser_moshikomi.svg); }

/* ------ various ---------- */
.various_list li a { position:relative; z-index:2; display:block; overflow:hidden;
 padding:7.5em 1.5em 2.3em; color:#333; text-align:center; border-bottom:2px solid #e6e6e6; background:#fff; }
.various_list li a:before, .various_list li a:after {
 content:""; position:absolute; top:2em; right:0; left:0;
  width:4.375em; height:4.375em; margin:0 auto; border-radius:50%; }
.various_list li a:before { z-index:2; background:no-repeat center / 60%; }
.various_list li a:after { z-index:-1; -webkit-transition:all .3s ease-out; transition:all .3s ease-out; }

.various_list a.room:before { background-image:url(../img/common/ico_room.svg); }
.various_list a.library:before { background-image:url(../img/common/ico_library.svg); }
.various_list a.dvd:before { background-image:url(../img/common/ico_dvd.svg); }

.various_list a.room:before, .various_list li a.room:after { background-color:#335577; }
.various_list a.library:before, .various_list li a.library:after { background-color:#e5b13c; }
.various_list a.dvd:before, .various_list li a.dvd:after { background-color:#b3cf66; }

.various_list li a.ul { margin-top:.5em; padding:0; color:#0ba279; text-align:left; text-decoration:underline; background:none; border-bottom:none; }
.various_list .txt { font-size:.875em; }

/* ------ company ---------- */
#company { background:#fff; }
.con_bnr a { position:relative; z-index:2; display:block; overflow:hidden; height:100%; padding:1.8em 1.6em 44%; }
.con_bnr .ttl { color:#333; font-size:1.5em; font-weight:bold; line-height:1.5; letter-spacing:.1em; }
.con_bnr .ttl span { display:block; color:#49bc9d; font-size:.542em; letter-spacing:.1em; }

.con_bnr .bg_img { position:absolute; z-index:-1; top:0; right:0; bottom:0; left:0;
 width:100%; height:100%; background:no-repeat center / cover; }
.con_bnr .company .bg_img { background-image:url(../img/top/bnr_bg_company.jpg); }
.con_bnr .recruit .bg_img { background-image:url(../img/top/bnr_bg_recruit.jpg); }

/* ------ group ---------- */
.group_box > li { position:relative; width:48.5%; padding:1.5em 1.5em 5.5em; border-bottom:2px solid #e6e6e6; background:#fff; }
.group_box .ttl { margin-bottom:1.2em; padding-bottom:.5em; border-bottom:1px solid #eee; }
.group_box .ttl a[target="_blank"]:after { content:url(../img/common/ico_link_bk.svg); margin-left: .5em; }
.group_box .ttl img { max-width:90%; max-height:33px; }
.group_box .lead { margin:0 0 .6em; line-height:1.6; font-weight:bold; }
.group_box .txt { margin:0; font-size:.938em; letter-spacing:0; }
.group_box .btn { position:absolute; left:0; right:0; bottom:1.5em; margin:1em 0 0; }
.group_box .button { font-size:.875em; }
.group_box .button.icon:before { background-image:url(../img/common/ico_link.svg); }

.group_box .kss .ttl{font-weight: bold; font-size: 110%; }
.group_box .kss .ttl a{color:#425695; }
.group_box .kss .lead { color:#4568b7; }
.group_box .seiwa .lead { color:#0b92cc; }
.group_box .ndn .lead { color:#cbb501; }

.group_box .kss .button { border-bottom-color:#2f477e; background:#526aa3; }
.group_box .seiwa .button { border-bottom-color:#57a2c1; background:#69c0e4; }
.group_box .ndn .button { border-bottom-color:#c5b000; background:#dec600; }

.group_box .seiwa figure { width:35%; margin-right:1em; }
.group_box .seiwa figcaption { text-align:center; font-size:.85em; }
.group_box .seiwa .flex > div { flex:1; -webkit-flex:1; }

.group_service li { border-bottom:1px solid #eee; }
.group_service li + li { margin-top:1em; }
.group_service li figure { width:100px; margin-right:1em; }
.group_service li .ser_detail { -webkit-flex:1; flex:1; }
.group_service li .ser_detail p { margin-top:.5em; font-size:.95em; }
.group_service li .name { font-weight:bold; }
.group_box .group_bnr li ul li { width: 100%; margin-top: 0;}
.group_box .group_bnr li ul li+li { margin-top: 2%;}

.group_box .group_bnr li { margin-top:1.2em; width:48%; }

/* IE10以降 */
@media all and (-ms-high-contrast:none){
  .info_list .cat { padding-top:.5em; padding-bottom:.1em; }

  .various_list li a:after {  top:0; width:100%; height:100%; border-radius:0; opacity:0; }
  .various_list li a:hover:after { opacity:1; }
}

@media screen and (min-width: 960px) {

  /* info */
  .info_list .title { -webkit-flex:1; flex:1; }

  /* service */
  .service_list li a:hover:before { height:100%; opacity:.6; }

  /* various */
  .various_list li a:hover:after { top:0; width:100%; height:100%; border-radius:0; }
  .various_list a.room:hover:after { background-color:#dce8f5; }
  .various_list a.library:hover:after { background-color:#ffe8b4; }
  .various_list a.dvd:hover:after { background-color:#e4f1c2; }

  /* group */
  .group_box .kss .button:hover { background:#41588e; }
  .group_box .seiwa .button:hover { background:#5eaed0; }
  .group_box .ndn .button:hover { background:#c5b000; }




}


@media screen and (min-width: 600px) {

  /* info */
  .info_box .ttl { margin-right:1.8em; padding-right:2.8em; border-right:1px solid #eee; }
  .info_box .ttl span { display:block; }

  /* service */
  .service_list li:nth-child(n + 4) { margin-top:20px; }

  /* rental */
  .various_list li { width:31.5%; margin-right:2.5%; }
  .various_list li { }
  .various_list li:nth-child(3n) { margin-right:0; }

  /* company*/
  .con_bnr li { width:48.5%; }

  /* group */
  .group_box > li:nth-child(n + 3) { margin-top:2em; }

}


/*----------------------------------------------------
タブレット
-----------------------------------------------------*/

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

  /* service*/
  .service_list li a { font-size:1.2em; }

  /* various */
  .various_list li { width:45%; }

  /* company */
  .con_bnr .ttl { font-size:1.2em; }

}

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

  /* info */
  .info_list li { -webkit-flex-wrap:wrap; flex-wrap:wrap; }
  .info_list li .title { display:block; width:100%; margin-top:.2em; }


}

@media screen and (max-width: 768px) {
  .main_visual { height:600px; min-height:0; }
}


/*----------------------------------------------------
スマホ
-----------------------------------------------------*/
@media screen and (max-width: 599px) {

  .main_visual { height:300px; }
  .main_visual .inner { -webkit-align-items:flex-end; align-items:flex-end; }
  .main_visual .lead { width:60%; margin-left:0; padding-bottom:10%; }


  /* info */
  .info_box { margin-top:-2em; padding:1.5em; display:block; }
  .info_box .ttl { margin-bottom:.5em; padding-bottom:.2em; border-bottom:2px solid #37a888; }
  .info_box .ttl span { margin-left:1em; }

  .info_list { max-height:28em; }
  .info_list li { -webkit-flex-wrap:wrap; flex-wrap:wrap; }

  /* service */
  .service_list { padding-bottom:5px; }
  .service_list li { width:49%; margin-bottom:8px; }
  .service_list li:nth-child(n + 3) { margin-top:8px; }

  /* various */
  .various_list li { width:100%; margin-bottom:1.5em; }

  /* company .relation */
  .con_bnr li { width:100%; }
  .con_bnr li + li { margin-top:1em; }

  .group_box li { width:100%; margin-bottom:10px; }
  .group_box li ul li{ margin-bottom:0; }
  .group_box .kss .ttl{font-size: 120%; }

}