.no-webp .pagetitleBox {
  background: url("../images/office/pagetitle_bg_sp.jpg") no-repeat center bottom;
  background-size: cover; }
.webp .pagetitleBox {
  background: url("../images/office/pagetitle_bg_sp.webp") no-repeat center bottom;
  background-size: cover; }
@media (min-width: 669px) {
  .no-webp .pagetitleBox {
    background: url("../images/office/pagetitle_bg.jpg") no-repeat center bottom;
    background-size: cover; }
  .webp .pagetitleBox {
    background: url("../images/office/pagetitle_bg.webp") no-repeat center bottom;
    background-size: cover; } }

.introduction {
  padding: 40px 25px 0; }
  .introduction div:first-child::before {
    background: url("../images/common/introduction_coatation01_gray.png") no-repeat center center;
    background-size: cover; }
  .introduction div:first-child::after {
    background: url("../images/common/introduction_coatation02_gray.png") no-repeat center center;
    background-size: cover; }
  .introduction div:last-child {
    margin-top: -30px; }
  @media (min-width: 669px) {
    .introduction {
      padding: 100px 40px 0; } }

.localNav {
  margin: 0 25px 28px; }
  .localNav li {
    width: calc((100% - 12px) / 2);
    margin-bottom: 12px; }
    .localNav li a {
      display: block;
      border: 1px solid #999;
      padding: 14px;
      text-align: center;
      color: #1a1a1a;
      position: relative;
      border-radius: 100px; }
      .localNav li a::after {
        content: '';
        position: absolute;
        right: 17px;
        top: 50%;
        margin-top: -6px;
        width: 7px;
        height: 7px;
        border-top: 1px solid #999;
        border-right: 1px solid #999;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        -webkit-transition: all .2s;
        -moz-transition: all .2s;
        -ms-transition: all .2s;
        -o-transition: all .2s;
        transition: all .2s; }
      .localNav li a:hover {
        border: 1px solid #055482;
        color: #fff;
        background-color: #055482; }
        .localNav li a:hover::after {
          border-top: 1px solid #fff;
          border-right: 1px solid #fff; }
    @media (min-width: 669px) {
      .localNav li {
        width: calc((100% - 36px) / 4);
        margin-bottom: 0;
        font-size: 108%; } }
  @media (min-width: 669px) {
    .localNav {
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 120px; } }

.office__item {
  position: relative;
  background-color: #d9e5ec;
  padding: 40px 25px;
  text-align: center; }
  .office__item::before {
    content: '';
    width: 100px;
    height: 5px;
    background-color: #055482;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50px; }
    @media (min-width: 669px) {
      .office__item::before {
        width: 200px;
        margin-left: -100px; } }
  .office__item:last-child, .office__item:nth-last-child(5) {
    background-color: transparent; }
  .office__item-header {
    margin: 0 0 15px;
    font-weight: 500;
    font-size: 20px;
    font-size: clamp(18px, 5vw, 20px); }
    @media (min-width: 669px) {
      .office__item-header {
        font-size: 28px;
        font-size: clamp(20px, 3vw, 28px);
        margin-bottom: 65px;
        font-weight: normal; } }
  .office__item-map {
    height: 300px;
    margin-bottom: 20px; }
    @media (min-width: 669px) {
      .office__item-map {
        height: 450px;
        margin: 0 auto 50px;
        max-width: 1100px; } }
  .office__item-address {
    margin: 0; }
  @media (min-width: 669px) {
    .office__item {
      padding: 80px 40px 90px; } }