@charset "utf-8";
* { box-sizing: border-box; }
html { background: #fae9e7; }
body { margin: 0; font-family: "Yu Gothic", Meiryo, sans-serif; }
/* 元画像と同じ最大750px。SPでは画面幅に合わせて全体を縮小します。 */
.brand-page { width: 100%; max-width: 750px; margin: 0 auto; }
.brand-visual { position: relative; }
.brand-visual__image { display: block; width: 100%; height: auto; }
/* 750×1308pxの元画像内にあるボタン位置を、比率で指定しています。 */
.product-link {
  position: absolute;
  top: 74.847095%; /* 元画像の上端から979px */
  width: 34.666667%; /* 元画像で260px */
  height: 3.899083%; /* 元画像で51px */
  border-radius: 4px;
  -webkit-tap-highlight-color: rgba(255, 255, 255, .25);
}
.product-link--soap { left: 3.6%; }
.product-link--gel { left: 63.066667%; }
.product-link:hover { background: rgba(255, 255, 255, .15); }
.product-link:focus-visible { outline: 3px solid #414048; outline-offset: 4px; background: rgba(255, 255, 255, .15); }
/* 狭い画面でもタップする範囲を確保。画像・ボタン本体の見た目は変えません。 */
.product-link::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: max(100%, 44px);
  transform: translateY(-50%);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* 会社HPへリンクするロゴヘッダー */
.company-header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.company-header__link {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 40px;
}
.company-header__logo {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  max-height: 40px;
  object-fit: contain;
}
.company-header__link:focus-visible {
  outline: 3px solid #414048;
  outline-offset: 4px;
}