@charset "utf-8";

#col_main > section{
  max-width:1180px;
  margin:0 auto 86px;
  padding:0 24px;
  box-sizing:border-box;
}
#c3{clear:both;margin:0;padding:0}

#c4{
  clear:both;
  position:relative;
  margin:0 0 42px;
  padding:62px 38px 56px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(237,247,251,.96) 0%,rgba(255,255,255,.98) 58%,rgba(246,251,253,.96) 100%),
    repeating-linear-gradient(135deg,rgba(31,111,169,.08) 0 2px,transparent 2px 14px);
  border:1px solid #d8e9f2;
  box-sizing:border-box;
}
#c4:before{
  content:"SERVICE";
  position:absolute;
  right:34px;
  bottom:-10px;
  color:rgba(11,49,143,.07);
  font-size:96px;
  line-height:1;
  font-weight:800;
  letter-spacing:.04em;
  pointer-events:none;
}
#c4:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:7px;
  background:#d6001c;
}
#c4 article{position:relative;z-index:1;text-align:left}
#c4 h1{
  margin:0;
  color:#073d70;
  font-size:38px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:0;
  text-align:left;
}
#c4 h1:after{
  content:"";
  display:block;
  width:78px;
  height:4px;
  margin:22px 0 0;
  background:#d6001c;
}
#c4 div{text-align:left}

#c5{
  clear:both;
  margin:0 0 18px;
  padding:0;
  background:none;
  border:0;
}
#c5 h2{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  color:#073d70;
  font-size:28px;
  line-height:1.45;
  font-weight:800;
  text-align:left;
}
#c5 h2:before{
  content:"";
  flex:0 0 auto;
  width:46px;
  height:3px;
  background:#d6001c;
}
#c5 div{text-align:left}

#c6{
  clear:both;
  position:relative;
  margin:0 0 38px;
  padding:28px 34px 28px 38px;
  background:#fff;
  border:1px solid #dbe8ef;
  box-shadow:0 16px 34px rgba(7,61,112,.08);
  box-sizing:border-box;
}
#c6:before{
  content:"";
  position:absolute;
  left:0;
  top:28px;
  bottom:28px;
  width:5px;
  background:#1f6fa9;
}
#c6 div{
  color:#283f50;
  font-size:16px;
  line-height:2;
  text-align:left;
  letter-spacing:0;
}

#c7{
  clear:both;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:20px;
  margin:0;
  padding:0;
}
#c7>div.box{
  position:relative;
  grid-column:span 2;
  overflow:hidden;
  background:#fff;
  border:1px solid #dbe8ef;
  box-shadow:0 14px 30px rgba(7,61,112,.08);
  box-sizing:border-box;
  transition:transform .25s ease,box-shadow .25s ease;
}
#c7>div.box:nth-child(-n+3){
  grid-column:span 2;
}
#c7>div.box:nth-child(n+4){
  grid-column:span 2;
}
#c7>div.box:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(7,61,112,.14);
}
#c7 article{
  height:100%;
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
}
#c7 img{
  display:block;
  width:100%!important;
  max-width:none!important;
  height:218px;
  object-fit:cover;
}
#c7>div.box:nth-child(-n+3) img{
  height:240px;
}
#c7 h3{
  position:relative;
  margin:0;
  padding:20px 22px 12px;
  color:#073d70;
  font-size:21px;
  line-height:1.45;
  font-weight:800;
  text-align:left;
}
#c7 h3:before{
  content:"";
  display:block;
  width:46px;
  height:3px;
  margin:0 0 14px;
  background:#d6001c;
}
#c7 article>div{
  flex:1;
  margin:0;
  padding:0 22px 24px;
  color:#31495a;
  font-size:14px;
  line-height:1.9;
  text-align:left;
  letter-spacing:0;
}

@media screen and (min-width:641px) and (max-width:834px){
  #col_main>section{padding:0 20px}
  #c4{margin-bottom:34px;padding:50px 28px 46px}
  #c4 h1{font-size:32px}
  #c5 h2{font-size:25px}
  #c7{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  #c7>div.box,#c7>div.box:nth-child(-n+3),#c7>div.box:nth-child(n+4){grid-column:auto}
}
@media screen and (max-width:640px){
  #col_main>section{margin-bottom:58px;padding:0 16px}
  #c4{margin-bottom:28px;padding:38px 22px 36px}
  #c4:before{right:12px;bottom:-2px;font-size:56px}
  #c4 h1{font-size:28px}
  #c4 h1:after{width:58px;height:3px;margin-top:18px}
  #c5 h2{font-size:22px}
  #c5 h2:before{width:32px}
  #c6{padding:22px 22px 22px 28px}
  #c6:before{top:22px;bottom:22px}
  #c6 div{font-size:14px;line-height:1.9}
  #c7{display:block}
  #c7>div.box{margin-bottom:18px}
  #c7 img,#c7>div.box:nth-child(-n+3) img{height:200px}
  #c7 h3{font-size:20px}
}