/*! Writen  by SCSS */
.inner_main .inner_main_bg {
  background-image: url("../images/main.jpg"); }

.inner {
  position: relative; }

.img_cap .cap.border {
  right: 5px;
  bottom: 5px;
  color: #333;
  text-shadow: none;
  background: rgba(255, 255, 255, 0.7);
  line-height: 1;
  padding: 5px 5px 3px;
  border: 1px solid #333; }
  @media screen and (max-width: 480px) {
    .img_cap .cap.border {
      padding: 3px 5px 5px; } }
.img_cap.left .cap.border {
  right: auto;
  left: 5px; }
.img_cap.bottom .cap {
  bottom: auto;
  top: 100%; }

.bg_texture {
  position: relative;
  clip-path: inset(0 0 0 0); }
  .bg_texture:before {
    content: "";
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../images/bg_quality.jpg");
    z-index: -1; }

.tab_group {
  margin-bottom: clamp(50px, 8.334vw, 100px); }
  @media screen and (max-width: 480px) {
    .tab_group {
      flex-wrap: wrap;
      gap: 12px 0; } }
  .tab_group.bottom {
    margin: clamp(80px, 13vw, 130px) 0 0; }
  .tab_group a {
    padding: 15px 5px;
    width: 23%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #00245a;
    font-size: clamp(12px, 1.231vw, 16px);
    line-height: 1.5;
    background: rgba(250, 250, 250, 0.6);
    transition: 0.3s all ease-in-out 0s; }
    .tab_group a:not(:nth-of-type(3)) {
      font-size: clamp(13px, 1.385vw, 18px); }
      @media screen and (max-width: 480px) {
        .tab_group a:not(:nth-of-type(3)) {
          font-size: 4vw; } }
    @media screen and (max-width: 480px) {
      .tab_group a {
        width: 48%;
        padding: 10px 5px;
        font-size: 3.2vw; } }
    body:not(.mobile) .tab_group a:hover {
      background: #00245a;
      color: #FFF; }
    .tab_group a.cr {
      background: #00245a;
      color: #FFF;
      pointer-events: none; }

.midashi_group {
  flex-direction: column;
  row-gap: 30px;
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 60px); }
  @media screen and (max-width: 480px) {
    .midashi_group {
      row-gap: 20px; } }
  .midashi_group .quality_ttl {
    font-size: clamp(24px, 3.401vw, 34px);
    color: #00245a; }
    @media screen and (max-width: 480px) {
      .midashi_group .quality_ttl {
        font-size: 4.8vw; } }
  @media screen and (max-width: 480px) {
    .midashi_group .read {
      text-align: left;
      line-break: anywhere; } }

.text_group.flex {
  flex-direction: column;
  row-gap: 20px;
  justify-content: flex-start; }
  @media screen and (max-width: 820px) {
    .text_group.flex {
      row-gap: 15px; } }

.item_ttl {
  font-size: clamp(15px, 1.9vw, 19px);
  color: #0d766e;
  letter-spacing: -0.05em; }
  @media screen and (max-width: 480px) {
    .item_ttl {
      font-size: 15px; } }
  .item_ttl .small {
    font-size: 60%; }
    @media screen and (max-width: 480px) {
      .item_ttl .small {
        font-size: 70%; } }
  .item_ttl.border {
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid currentColor; }
  .item_ttl.brown {
    font-size: clamp(12px, 1.8vw, 18px);
    color: #92762b !important; }
    @media screen and (max-width: 480px) {
      .item_ttl.brown {
        font-size: 14px; } }
    .item_ttl.brown .small {
      font-size: 70%; }
  .item_ttl.navy {
    color: #00245a; }

.item_read {
  font-size: clamp(11px, 1.4vw, 14px);
  line-height: 1.8; }
  @media screen and (max-width: 480px) {
    .item_read {
      font-size: 13px; } }

@media screen and (max-width: 480px) {
  .sp_fit {
    width: fit-content;
    margin: 0 auto; } }

.caption {
  font-size: clamp(10px, 1.167vw, 14px); }
  @media screen and (max-width: 480px) {
    .caption {
      font-size: 12px; } }

/*# sourceMappingURL=quality_common.css.map */