.col2{
  justify-content: space-between;
  flex-wrap: wrap;
}

.col2 .side{
  display: flex;
  flex-direction: column;
  border-top: 1px solid #111;
}
.col2 .side .tit{
  font-size: 1.7rem;
  font-weight: var(--font-weight);
  font-family: var(--font-mix);
  line-height: 1.44;
}
.col2 .side .red{
  color: #df0018;
}
.col2 .side .back{
  margin-top: auto;
}
.col2 .side .back a {
  display: block;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid #ccc;
}
.col2 .side .back a span{
  display: inline-block;
  width: .9em;
  height: 1em;
  margin-right: .5em;
  transform: rotate(180deg);
  background-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20version%3D%221.1%22%20viewBox%3D%220%200%2018%2018%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23111111%3B%20fill-rule%3A%20evenodd%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.3%2C1.9l6.4%2C6.4c.4.4.4%2C1%2C0%2C1.4h0s-6.4%2C6.4-6.4%2C6.4c-.4.4-1%2C.4-1.4%2C0s-.4-1%2C0-1.4l4.7-4.7H1c-.6%2C0-1-.4-1-1s.4-1%2C1-1h13.6l-4.7-4.7c-.4-.4-.4-1%2C0-1.4.4-.4%2C1-.4%2C1.4%2C0Z%22%2F%3E%3C%2Fsvg%3E);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  vertical-align: middle;
}
.col2 .side .lists.cats:has(.current) li:not(.current) a{
  color: #ccc;
}
.col2 .main > p{
  font-size: 1.5rem;
}
.col2 .main .lead{
  font-size: 1.5rem;
  margin-bottom: 8rem;
}
.col2 .main:not(:has(.case)) .tit{
  font-weight: 700;
  line-height: 1.66;
}
.col2 .main p + p{
  margin-top: 2em;
}
@media screen and (min-width:769px) {
  .col2 > *{
    padding-top: 8rem;
  }
  .col2 .side{
    width: 15rem;
    height: fit-content;
    position: sticky;
    top: 100px;
    left: 0;
  }
  .col2 .side:has( .back){
    min-height: calc(100vh - 19.2rem);
  }
  .col2 .side .item + .item{
    margin-top: 4.8rem;
  }
  .col2 .side .lists.mt48{
    margin-top: 4.8rem;
  }
  .single .col2 .side .tit{
    margin-bottom: 1.8rem;
  }
  .single .col2 .side .tit_wrap + *{
    font-weight: 400;
  }
  .col2 .main{
    border-top: 1px solid #ccc;
    width: calc(100% - 21rem);
  }
  .col2 .main:not(:has(.case)) .tit{
    margin-bottom: 2.4rem;
    font-size: 1.7rem;
  }
  
}
@media screen and (max-width:768px) {
  body:not(#front_page) section + section{
    margin-top: 8rem;
  }
  .pagettl_wrap .inner{
    padding-top: 10rem;
    padding-bottom: 6.9rem;
    gap: 1rem ;
  }
  .pagettl_wrap .tit {
    font-size: 2.0rem;
  }
  .pagettl_wrap p{
    font-size: 100%;
  }
  .col2 .side{
    width: 100%;
    padding-top: 2.8rem;
    margin-bottom: 4.15rem;
  }
  .col2 .side .item{
    display: flex;
    align-items: start;
    -moz-column-gap: 0rem;
    column-gap: 0rem;
  }
  .col2 .side .item .tit_wrap{
    min-width: 10.5rem;
  }
  .col2 .side .tit{
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1.8;
  }
  .col2 .side .item:has(.tit) p{
    line-height: 2;
  }
  .col2 .side .lists.cats{
    flex-grow: 1;
    display: flex;
    align-items: start;
    gap: .5rem 1.6rem;
    flex-wrap: wrap;
  }
  .col2 .main {
    width: 100%;
  }
  .col2 .main > p,
  .col2 .main .lead{
    font-size: 1.5rem;
  }
  .col2 .main:not(:has(.case)) .tit{
    margin-bottom: 1.6rem;
    font-size: 1.7rem;
  }
}
/* company ----------------------------------------------------------------- */

.lists.service{
  gap: 3rem;
  flex-wrap: wrap;
}
.lists.service li{
  width: calc(50% - 1.5rem);
}
.lists.service a{
  width: 100%;
  display: block;
  border-bottom: 1px solid #ccc;
  text-decoration: none;
  transition: all .6s cubic-bezier(0.55, 0.05, 0.22, 0.99);
  transition-property: opacity;
}
.lists.service .visual{
  text-align: center;
}
.lists.service .visual img{
  height: 10rem;
  width: auto;
}
.lists.service .txt_wrap{
  margin-top: 3.2rem;
  text-align: center;
  position: relative;
  padding-right: 1.5rem;
}
.lists.service .txt_wrap .icon{
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: -1.1rem;
  text-indent: 1.8rem;
}

.lists.info{
  flex-wrap: wrap;
  gap: 4.8rem 3rem;
}
.lists.info li{
  width: calc(50% - 1.5rem);
  padding-bottom: 4.8rem;
  border-bottom: 1px solid #ccc;
}
.lists.info .tit {
  font-size: 1.5rem;
  margin-bottom: 3.2rem;
}
.lists.info p {
  color: #666;
  font-size: 1.5rem;
}
.lists.info p:empty{
  display: none;
}
@media screen and (max-width:768px) {
  .lists.service li {
    width: 100%;
  }
  .lists.service li + li {
    margin-top: 4.8rem;
  }
  .lists.info li {
    width: 100%;
    padding-bottom: 2.2rem;
  }
  .lists.info .tit {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
  }
}