@charset "UTF-8";

/* =========================================================
   法人概要ページ（company.html）専用
   ========================================================= */

:root {
  --cmax: calc(100vw - 60px);
}

/* =========================================================
   法人概要
   ========================================================= */
.cprofile {
  padding-top: calc(7.2917 * var(--u));
  background: #fff;
}

.cprofile__title {
  width: 14.1146%;
  margin: 0 auto;
}

.cprofile__table {
  width: 37.8854%;
  margin: calc(2.4479 * var(--u)) auto 0;
}

/* =========================================================
   東京オフィス所在地
   ========================================================= */
.caccess {
  padding: calc(7.2917 * var(--u)) 0 calc(6.7188 * var(--u));
  background: #fff;
}

.caccess__title {
  width: 32.1875%;
  margin: 0 auto;
}

.caccess__btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(.625 * var(--u));
  margin-top: calc(2.8125 * var(--u));
}

.caccess__btn {
  display: block;
  transition: opacity .2s ease, transform .2s ease;
}

.caccess__btn:hover {
  opacity: .85;
  transform: translateY(calc(-.1 * var(--u)));
}

.caccess__btn--map {
  width: 14.6875%;
}

.caccess__btn--pdf {
  width: 19%;
}

.caccess__map {
  position: relative;
  width: min(61.4063%, var(--cmax));
  margin: calc(2.1875 * var(--u)) auto 0;
}

.caccess__guide {
  position: absolute;
  top: 92.588%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  line-height: 1.2;
}

.caccess__guide a {
  font-size: min(calc(1.1458 * var(--u)), calc(var(--cmax) * .0187));
  font-weight: 700;
  color: #222;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.caccess__guide a:hover {
  color: #14a2e4;
  border-bottom-color: #14a2e4;
}

.caccess__guide--1 {
  left: 15.14%;
}

.caccess__guide--2 {
  left: 47.286%;
}

.caccess__guide--3 {
  left: 82.146%;
}

.cphoto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(.6771 * var(--u));
  row-gap: calc(1.625 * var(--u));
  width: min(61.6667%, var(--cmax));
  margin: calc(3.6458 * var(--u)) auto 0;
}

.cphoto__btn {
  display: block;
  width: 100%;
  aspect-ratio: 386 / 291;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity .2s ease, transform .2s ease;
}

.cphoto__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cphoto__btn:hover {
  opacity: .85;
  transform: translateY(calc(-.15 * var(--u)));
}

.cphoto__btn:focus-visible {
  outline: 2px solid #14a2e4;
  outline-offset: 2px;
}

.cphoto__caption {
  margin-top: calc(.625 * var(--u));
  font-size: calc(1.0417 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* .cback（トップページへ戻るボタン）は privacy.html でも使うので style.css 側に置いている */

/* =========================================================
   お問い合わせフォーム（index.html と共通）
   ========================================================= */
.form {
  padding-bottom: 0;
}

/* =========================================================
   個人情報保護方針
   ========================================================= */
.cpolicy {
  padding: calc(6.1979 * var(--u)) 0 calc(6.0938 * var(--u));
  background: #14a2e4;
}

.cpolicy__title {
  width: 45.6771%;
  margin: 0 auto;
}

.cpolicy__content {
  width: 44.4583%;
  margin: calc(2.6042 * var(--u)) auto 0;
}

/* =========================================================
   オフィス写真の拡大ポップアップ
   ========================================================= */
.pmodal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pmodal[hidden] {
  display: none;
}

.pmodal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .75);
  animation: modalFade .25s ease;
}

.pmodal__box {
  position: relative;
  width: min(720px, 100%);
  animation: modalUp .28s ease;
}

.pmodal__img {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 6px;
}

.pmodal__caption {
  margin-top: 14px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.pmodal__close {
  position: absolute;
  right: -6px;
  top: -44px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}

.pmodal__close:hover {
  background: #e0e8ec;
}

.pmodal__close::before,
.pmodal__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: #555;
}

.pmodal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.pmodal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* =========================================================
   SP （750px以下 / デザイン基準幅 750px）
   `03_sp_260904.psd`（アートボード 750 × 6886）の実測値。
   --u = 1vw ＝ デザイン7.5px。CSS値は「デザインpx ÷ 7.5」で算出。
   ========================================================= */
@media screen and (max-width: 750px) {

  /* ---------- 法人概要 ---------- */
  .cprofile {
    padding-top: calc(8.8 * var(--u));
  }

  .cprofile__title {
    width: 36.1333%;
  }

  .cprofile__table {
    width: 89.4667%;
    margin-top: calc(4.8 * var(--u));
  }

  /* ---------- 東京オフィス所在地 ---------- */
  .caccess {
    padding: calc(12.1333 * var(--u)) 0 calc(12.4 * var(--u));
  }

  .caccess__title {
    width: 82.4%;
  }

  /* SPではボタンを縦積みにする */
  .caccess__btns {
    flex-direction: column;
    gap: calc(2.5333 * var(--u));
    margin-top: calc(4.9333 * var(--u));
  }

  .caccess__btn--map {
    width: 50.4%;
  }

  .caccess__btn--pdf {
    width: 64.9333%;
  }

  .caccess__map {
    width: 89.4667%;
    margin-top: calc(3.3333 * var(--u));
  }

  /* SPの「写真による詳しい道案内はこちら」は company_office_content_sp.jpg に焼き込まれているので、
     その文字（671×836 の画像で 377,540 / 377,630 / 444,726 に 227×48）へ透明なタップ領域を重ねる。
     リンク先を自前の道案内ページに差し替えたので有効にした
     （旧リンク先 oc-tax.biz/guide-lp-* はスマホだと旧SPサイトのトップへ強制リダイレクトされるため、白で塗りつぶして隠していた） */
  .caccess__guide {
    top: auto;
    transform: none;
    width: 33.8301%;
    height: 5.7416%;
    font-size: 0;
    color: transparent;
  }

  .caccess__guide a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 0;
    color: transparent;
    border-bottom: 0;
  }

  .caccess__guide--1 {
    left: 56.4829%;
    top: 64.5933%;
  }

  .caccess__guide--2 {
    left: 56.4829%;
    top: 75.3589%;
  }

  .caccess__guide--3 {
    left: 66.1699%;
    top: 86.8421%;
  }

  /* ---------- オフィス写真（SPは2列・キャプションなし） ---------- */
  .cphoto {
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(2.6667 * var(--u));
    row-gap: calc(3.7333 * var(--u));
    width: 90.9333%;
    margin-top: calc(8.2667 * var(--u));
  }

  /* SPデザインにはキャプションが無いが、PCと同じく写真の下に入れる */
  .cphoto__caption {
    margin-top: calc(1.6 * var(--u));
    font-size: calc(3.2 * var(--u));
  }

  /* ---------- お問い合わせフォーム ---------- */
  .form {
    padding-top: calc(14.1333 * var(--u));
  }

  /* ---------- 個人情報保護方針 ---------- */
  .cpolicy {
    padding: calc(13.2 * var(--u)) 0 calc(11.4667 * var(--u));
  }

  .cpolicy__title {
    width: 89.8667%;
  }

  .cpolicy__content {
    width: 89.0667%;
    margin-top: calc(4.1333 * var(--u));
  }

  /* ---------- オフィス写真の拡大ポップアップ ---------- */
  .pmodal {
    padding: calc(2.6667 * var(--u));
  }

  .pmodal__close {
    right: 0;
    top: calc(-6.4 * var(--u));
    width: calc(6.4 * var(--u));
    height: calc(6.4 * var(--u));
  }

  .pmodal__close::before,
  .pmodal__close::after {
    width: calc(3.0667 * var(--u));
    height: calc(.4 * var(--u));
  }

  .pmodal__caption {
    margin-top: calc(1.8667 * var(--u));
    font-size: calc(3.7333 * var(--u));
  }
}