@charset "utf-8";
/*--------------------------------------------------------------------------------
  特徴
--------------------------------------------------------------------------------*/
.feature {
  padding: var(--space-s) var(--side-space) 0 var(--side-space);
}
.feature_item {
  padding-bottom: var(--space-m);
}
.feature_item .ttl {
  margin-bottom: var(--space-2s);
}
.feature_item .ttl-s {
  margin-top: var(--space-s);
  margin-bottom: var(--space-2s);
}
.feature_item .bnr {
  display: inline-block;
}
.feature_item .photo,
.feature_item .bnr {
  margin-top: var(--space-2s);
}
.feature_item .photo,
.feature_item .bnr img {
  border-radius: 0.75rem;
}

/*--------------------------------------------------------------------------------
  5つの魅力バナー
--------------------------------------------------------------------------------*/
.charm {
  text-align: center;
  padding-top: var(--space-2s);
  padding-bottom: var(--space-m);
}
.charm_bnr {
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: var(--bblue70);
  position: relative;
  padding: var(--space-2s) var(--space-3s);
}
.charm_bnr:before {
  content: "";
  width: 100%;
  height: 100%;
  background: url("../../image/pattern-rhombus.svg") repeat center center;
  background-size: auto 110%;
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
}
.charm_bnr * {
  position: relative;
  z-index: 1;
}
@media (hover: hover) {
  .charm a {
    transition: opacity 0.2s ease-in-out;
  }
  .charm a:hover {
    opacity: 0.6;
  }
}