/*
 * site.css — sottone.com 静的版の追加スタイル
 * （レイアウト本体のCSSは各HTML内の <style> に入っています）
 */

/* ------------------------------------------------------------------
 * フォント
 * Wix配信の「筑紫ゴシック」は持ち出せないため、端末に入っている
 * ゴシック体を同じ名前（tsukushigothic）で割り当てています。
 * Adobe Fonts などで筑紫ゴシックを契約した場合は、この @font-face を
 * 削除して、契約先の埋め込みコードを <head> に追加してください。
 * ------------------------------------------------------------------ */
@font-face {
  font-family: "tsukushigothic";
  font-weight: 100 500;
  src:
    local("Hiragino Sans W3"), local("HiraginoSans-W3"), local("Hiragino Kaku Gothic ProN W3"),
    local("HiraKakuProN-W3"), local("Yu Gothic Medium"), local("YuGothic-Medium"), local("Yu Gothic"), local("Meiryo"),
    local("Noto Sans JP"), local("Noto Sans CJK JP Regular"), local("NotoSansCJKjp-Regular");
}
@font-face {
  font-family: "tsukushigothic";
  font-weight: 600 900;
  src:
    local("Hiragino Sans W6"), local("HiraginoSans-W6"), local("Hiragino Kaku Gothic ProN W6"),
    local("HiraKakuProN-W6"), local("Yu Gothic Bold"), local("YuGothic-Bold"), local("Meiryo Bold"),
    local("Noto Sans JP Bold"), local("Noto Sans CJK JP Bold"), local("NotoSansCJKjp-Bold");
}

/* TOPのKV見出し：Notoの明朝体 */
#comp-mgb0an3z h2 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
#comp-mgb0an3z h2,
#comp-mgb0an3z h2 * {
  font-weight: 400 !important;
}

/* ------------------------------------------------------------------
 * 動き（計測値：1200ms / easeInOutSine）
 * ------------------------------------------------------------------ */
:root {
  --reveal-duration: 1200ms;
  --reveal-easing: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --s-navy: #002539;
}
.js-motion [data-reveal] {
  opacity: 0;
}
.js-motion [data-reveal].is-revealed {
  animation: sottone-fadeIn var(--reveal-duration) var(--reveal-easing) calc(1ms + var(--reveal-delay, 0ms)) both;
}
@keyframes sottone-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 背景だけを半透明にし、ロゴとナビゲーションの濃度は維持する。 */
#bgLayers_SITE_HEADER > [data-testid="colorUnderlay"] {
  background-color: transparent;
  background-image: linear-gradient(
    180deg,
    rgba(22, 29, 33, 0.94) 0%,
    rgba(22, 29, 33, 0.86) 55%,
    rgba(22, 29, 33, 0.76) 100%
  );
}

#SITE_HEADER #img_comp-mecaqnfr {
  filter: brightness(0) invert(1);
}
/* 既存のホバー濃度と速度に合わせ、画像・文字そのものに適用する。 */
#SITE_HEADER a {
  opacity: 1;
}
#SITE_HEADER #img_comp-mecaqnfr,
#SITE_HEADER .wixui-horizontal-menu__item-label,
#SITE_HEADER .wixui-vertical-menu__item-label {
  opacity: 1;
  transition: opacity 0.2s ease !important;
}
#SITE_HEADER #comp-mecaqnfr a:hover #img_comp-mecaqnfr,
#SITE_HEADER #comp-mecaqnfr a:focus-visible #img_comp-mecaqnfr,
#SITE_HEADER .wixui-horizontal-menu__item:hover .wixui-horizontal-menu__item-label,
#SITE_HEADER a:focus-visible .wixui-horizontal-menu__item-label,
#SITE_HEADER .wixui-vertical-menu__item-label:hover,
#SITE_HEADER .wixui-vertical-menu__item-label:focus-visible {
  opacity: 0.7 !important;
}
#SITE_HEADER .wixui-horizontal-menu__item-label,
#SITE_HEADER .wixui-vertical-menu__item-label {
  color: #fff !important;
}
#SITE_HEADER #MENU_AS_CONTAINER_TOGGLE .Z_qSkN {
  background-color: #fff;
}
#bgLayers_MENU_AS_CONTAINER > [data-testid="colorUnderlay"] {
  background-color: rgb(22, 29, 33);
  background-image: none;
}

/* ------------------------------------------------------------------
 * スマホメニュー（開いている間は背面をスクロールさせない）
 * ------------------------------------------------------------------ */
html.s-menu-open,
html.s-menu-open body {
  overflow: hidden;
}
#MENU_AS_CONTAINER.s-open #overlay-MENU_AS_CONTAINER {
  display: block;
  opacity: 1;
}
#MENU_AS_CONTAINER,
#overlay-MENU_AS_CONTAINER {
  transition: opacity 0.25s ease;
}

/* ------------------------------------------------------------------
 * 画像スライダー（TOP > Service）
 * ------------------------------------------------------------------ */
.gallery-horizontal-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.nav-arrows-container {
  cursor: pointer;
  border: 0;
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-arrows-container[hidden] {
  display: none;
}
.nav-arrows-container.s-prev {
  right: auto !important;
  left: 30.5px;
}
.nav-arrows-container.s-prev svg {
  transform: scaleX(-1) scale(0.4273504273504274) !important;
}

/* ------------------------------------------------------------------
 * お問い合わせフォーム
 * ------------------------------------------------------------------ */
.s-form {
  --f-label: 14px;
  --f-label-lh: 17px;
  --f-text: 14px;
  --f-input-h: 33px;
  --f-gap: 32px;
  --f-btn: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  text-align: left;
  font-family: arial, "ｍｓ ｐゴシック", "ms pgothic", "돋움", dotum, helvetica, sans-serif;
  font-size: var(--f-text);
  color: #000;
}
.s-form--sp {
  --f-label: 12px;
  --f-label-lh: 15px;
  --f-text: 11px;
  --f-input-h: 29px;
  --f-gap: 25px;
  --f-btn: 14px;
}
.s-form *,
.s-form *::before,
.s-form *::after {
  box-sizing: border-box;
}
.s-form fieldset {
  border: 0;
  margin: 0 0 var(--f-gap);
  padding: 0;
  min-width: 0;
}
.s-form legend,
.s-form__label {
  display: block;
  padding: 0;
  margin: 0 0 8px;
  font-size: var(--f-label);
  line-height: var(--f-label-lh);
  color: #000;
}
.s-form__req {
  margin-left: 4px;
}
.s-form__field {
  margin: 0 0 var(--f-gap);
}
.s-form input[type="text"],
.s-form input[type="tel"],
.s-form input[type="email"],
.s-form textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 2px 8px 12px;
  font: inherit;
  font-size: var(--f-text);
  line-height: 17px;
  color: #000;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--s-navy);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.s-form input[type="text"],
.s-form input[type="tel"],
.s-form input[type="email"] {
  height: calc(var(--f-input-h) + 2px);
}
.s-form textarea {
  height: 84px;
  padding-top: 8px;
  resize: none;
}
.s-form ::placeholder {
  color: #757575;
  opacity: 1;
}
.s-form input:focus-visible,
.s-form textarea:focus-visible {
  border-bottom-color: #000;
  background: rgba(255, 255, 255, 0.45);
}

/* ラジオ・チェックボックス */
.s-form__opt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 24px;
  margin: 0 0 12px;
  padding-left: 30px;
  line-height: 24px;
  cursor: pointer;
}
.s-form fieldset .s-form__opt:last-of-type {
  margin-bottom: 0;
}
.s-form__opt input {
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.s-form__opt span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--s-navy);
  background: transparent;
}
.s-form__opt input[type="radio"] + span::before {
  border-radius: 50%;
}
.s-form__opt input[type="radio"]:checked + span::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #444;
}
.s-form__opt input[type="checkbox"]:checked + span::before {
  background: var(--s-navy);
}
.s-form__opt input[type="checkbox"]:checked + span::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.s-form__opt input:focus-visible + span::before {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

/* エラー・完了表示 */
.s-form__error {
  display: block;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #c62828;
}
.s-form [aria-invalid="true"] {
  border-bottom-color: #c62828 !important;
}
.s-form__status {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.7;
  color: #c62828;
}
.s-form__status:empty {
  display: none;
}
.s-form__submit {
  display: block;
  width: 100%;
  min-height: 41px;
  margin: 10px 0 0;
  padding: 10px 15px;
  font: inherit;
  font-size: var(--f-btn);
  line-height: 1.3;
  color: #fff;
  text-align: center;
  background: #000;
  border: 0 solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}
.s-form__submit:hover,
.s-form__submit:focus-visible {
  background: #c7c7c7;
}
.s-form__submit[disabled] {
  opacity: 0.6;
  cursor: default;
}
.s-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.s-form__done {
  padding: 40px 0;
  font-size: 15px;
  line-height: 2;
  color: #000;
  text-align: center;
}
.s-form__done.s-form--sp {
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal] {
    opacity: 1;
    animation: none !important;
  }
  [data-site-header],
  .gallery-horizontal-scroll {
    transition: none;
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------------
 * 静的画像のサイズ・トリミング
 * Wixの実行時リサイズには依存せず、KVは各セクションを満たす。
 * object-positionと背景の濃度は各ページにある元の指定を使用する。
 * ------------------------------------------------------------------ */
.wixui-section .bgImage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 元のWix配信画像は正方形に加工済み。ローカルの原画像も同じ切り抜きにする。 */
.gallery-item-wrapper img[data-hook="gallery-item-image-img"] {
  object-fit: cover;
  object-position: center;
}

/* KVのタイトル：既存の縦位置と幅を保ち、配置枠と文字を中央に揃える。 */
#PAGES_CONTAINER .wixui-section .s-kv-title,
#PAGES_CONTAINER .wixui-section .s-kv-divider {
  margin-left: 0;
  margin-right: 0;
  left: 0;
  justify-self: center;
}
#PAGES_CONTAINER .s-kv-title,
#PAGES_CONTAINER .s-kv-title > :is(h2, h3, h5, p) {
  text-align: center;
}

/* フッター：全ページ共通の黒背景。 */
#bgLayers_SITE_FOOTER > [data-testid="colorUnderlay"] {
  background-color: #000;
  background-image: none;
}

/* 見出し下の装飾線を消し、既存のグリッドと余白を維持する。 */
#PAGES_CONTAINER .wixui-section .wixui-horizontal-line {
  visibility: hidden;
}
#PAGES_CONTAINER :is(h1, h2, h3, h4, h5, h6),
#PAGES_CONTAINER :is(h1, h2, h3, h4, h5, h6) * {
  text-decoration: none !important;
}

/* 追従するお問い合わせボタンだけに白い1pxの枠線。 */
#SITE_CONTAINER #comp-mcikkmbl .wixui-button {
  box-sizing: border-box;
  border: 1px solid #fff;
}


/* ヘッダー・フッターのメニュー：ゴシック体の通常ウェイト。 */
:is(#SITE_HEADER, #SITE_FOOTER) :is(.wixui-horizontal-menu__item-label, .wixui-vertical-menu__item-label) {
  font-family: Arial, "Hiragino Sans", "Yu Gothic", sans-serif !important;
  font-weight: 400 !important;
}

/* コピーライトは既存のゴシック体を使い、中央の一行表示にする。 */
#SITE_FOOTER #comp-mcijuv15 {
  width: max-content;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  left: 0;
  justify-self: center;
  white-space: nowrap;
}

/* PCフッターメニュー：配置枠は維持し、枠内の項目だけ左揃え。 */
#SITE_FOOTER #comp-mcijvu7y .StylableHorizontalMenu3372578893__menu,
#SITE_FOOTER #comp-mcijvu7y .itemDepth02233374943__container {
  justify-content: flex-start;
}
#SITE_FOOTER #comp-mcijvu7y .wixui-horizontal-menu__item-label {
  text-align: left;
}

/* TOPのKV：「外の豊かさ」だけを25%大きくする。 */
#comp-mgb0an3z .s-kv-emphasis {
  font-size: 1.25em;
}

/* TOP > Business：個人向けと法人向けのコンテンツ間にゆとりを持たせる。 */
body:not(.device-mobile-optimized) #comp-mcijo0wm #comp-mecdus62 {
  margin-bottom: 80px;
}
body:not(.device-mobile-optimized) #comp-mcijo0wm #comp-mecdx53f {
  margin-bottom: 110px;
}
body.device-mobile-optimized #comp-mcijo0wm #comp-mecdx53f {
  margin-bottom: 64px;
}

/* 見出しを通常ウェイトに。Arial Blackは通常のArialに置き換える。 */
#PAGES_CONTAINER :is(h1, h2, h3, h4, h5, h6),
#PAGES_CONTAINER :is(h1, h2, h3, h4, h5, h6) * {
  font-weight: 400 !important;
}
#PAGES_CONTAINER :is(h1, h2, h3, h4, h5, h6).font_3,
#PAGES_CONTAINER :is(h1, h2, h3, h4, h5, h6) [style*="arial black" i] {
  font-family: Arial, "Hiragino Sans", "Yu Gothic", sans-serif !important;
}

/* Business：本文と次のコンテンツ、セクション境界の余白。 */
#PAGES_CONTAINER .s-business-body {
  margin-bottom: 80px;
}
#PAGES_CONTAINER .s-business-body--last {
  margin-bottom: 120px;
}
body.device-mobile-optimized #PAGES_CONTAINER .s-business-body {
  margin-bottom: 48px;
}
body.device-mobile-optimized #PAGES_CONTAINER .s-business-body--last {
  margin-bottom: 72px;
}

/* セクション末尾の内容が次の背景に接しないよう、下余白を確保する。 */
#PAGES_CONTAINER .s-section-end {
  margin-bottom: 120px;
}
body.device-mobile-optimized #PAGES_CONTAINER .s-section-end {
  margin-bottom: 72px;
}

/* TOP > Service：画像のグリッド配分に左右されず、英日見出しを一組にする。 */
#comp-mdjr8z0v #comp-mdjrb4y7 h3 {
  line-height: 1.2;
}
#comp-mdjr8z0v #comp-mdjrb4ya {
  grid-area: 1 / 1 / 2 / 2;
  margin-top: 150px;
}
body.device-mobile-optimized #comp-mdjr8z0v #comp-mdjrb4ya {
  margin-top: 74px;
}

/* TOP以外のKV：PC 360px / スマホ 220px。固定ヘッダーの下でタイトルを中央に。 */
#PAGES_CONTAINER .s-page-kv [data-testid="mesh-container-content"] {
  box-sizing: border-box;
  min-height: 360px;
  padding-top: 87px;
  grid-template-rows: repeat(2, min-content);
  align-content: center;
}
#PAGES_CONTAINER .s-page-kv .s-kv-title {
  margin-top: 0;
  margin-bottom: 0;
}
body.device-mobile-optimized #PAGES_CONTAINER .s-page-kv [data-testid="mesh-container-content"] {
  min-height: 220px;
  padding-top: 60px;
}

/* TOP > Service：ANNEXメニューの前に余白を置き、区切り線のある一覧にする。 */
#comp-mdjr8z0v #comp-mer40j6e {
  margin-top: 40px;
  margin-bottom: 16px;
}
#comp-mer40j6e p {
  letter-spacing: 0.08em;
}
#comp-mer3z7ma .s-annex-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #d9d9dd;
  font-family: Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
}
#comp-mer3z7ma .s-annex-menu > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid #d9d9dd;
  line-height: 1.6;
}
.s-annex-menu__name,
.s-annex-menu__description {
  display: block;
  font-weight: 400;
}
.s-annex-menu__name {
  font-size: 16px;
  letter-spacing: 0.025em;
  color: #111;
}
.s-annex-menu__description {
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}
body.device-mobile-optimized #comp-mdjr8z0v #comp-mer40j6e {
  margin-top: 24px;
  margin-bottom: 12px;
}
body.device-mobile-optimized #comp-mer3z7ma .s-annex-menu > li {
  grid-template-columns: minmax(0, 1fr);
  padding: 12px 0;
}
body.device-mobile-optimized .s-annex-menu__name {
  font-size: 12px;
}
body.device-mobile-optimized .s-annex-menu__description {
  font-size: 10px;
}

/* 詳しいご提案へのボタン：他の「詳しくはこちら」ボタンと同じホバー。 */
#SITE_CONTAINER #comp-mdjrb4yh .wixui-button {
  transition: all 0.2s ease, visibility 0s;
}
#SITE_CONTAINER #comp-mdjrb4yh .wixui-button .wixui-button__label {
  color: #fff !important;
}
#SITE_CONTAINER #comp-mdjrb4yh .wixui-button .wixui-button__icon {
  fill: #fff;
}
#SITE_CONTAINER #comp-mdjrb4yh .wixui-button:is(:hover, :focus-visible) {
  background: #fff;
  border: 1px solid #000;
}
#SITE_CONTAINER #comp-mdjrb4yh .wixui-button:is(:hover, :focus-visible) .wixui-button__label {
  color: #000 !important;
}
#SITE_CONTAINER #comp-mdjrb4yh .wixui-button:is(:hover, :focus-visible) .wixui-button__icon {
  fill: #000;
}

/* Businessの番号付き見出し：細い縦線と文字サイズの差で本文と区別する。 */
#PAGES_CONTAINER .s-numbered-heading {
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 0 22px;
  border-left: 1px solid currentColor;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  line-height: 1.5;
  letter-spacing: 0.025em;
  color: #111;
}
#PAGES_CONTAINER .s-numbered-heading--light {
  color: #fff;
}
.s-numbered-heading__number,
.s-numbered-heading__title,
.s-numbered-heading__copy {
  display: block;
}
.s-numbered-heading__number {
  font-size: 28px;
  letter-spacing: 0.06em;
}
.s-numbered-heading__title {
  margin-top: 8px;
  font-size: 24px;
}
.s-numbered-heading__copy {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.8;
}
body.device-mobile-optimized #PAGES_CONTAINER .s-numbered-heading {
  padding-left: 14px;
}
body.device-mobile-optimized .s-numbered-heading__number {
  font-size: 20px;
}
body.device-mobile-optimized .s-numbered-heading__title {
  margin-top: 6px;
  font-size: 15px;
}
body.device-mobile-optimized .s-numbered-heading__copy {
  margin-top: 8px;
  font-size: 12px;
}

/* Business：対象顧客の英日見出しを画像の上で中央揃えにする。 */
#PAGES_CONTAINER :is(.s-business-audience-title, .s-business-audience-en) {
  width: 980px;
  max-width: calc(100% - 30px);
  left: 0;
  margin-left: 0;
  margin-right: 0;
  justify-self: center;
  text-align: center;
}
#PAGES_CONTAINER :is(.s-business-audience-title, .s-business-audience-en) h3 {
  text-align: center;
}
#PAGES_CONTAINER .s-business-audience-title {
  margin-top: 100px;
  margin-bottom: 10px;
}
#PAGES_CONTAINER .s-business-audience-en {
  margin-bottom: 48px;
}
body:not(.device-mobile-optimized) #comp-mdjsbtbg #comp-mdjsrwr0 {
  grid-area: 3 / 1 / 16 / 2;
  margin-top: 40px;
  margin-bottom: 0;
}
body:not(.device-mobile-optimized) #comp-mdjsqy1r #comp-mech5loo {
  grid-area: 3 / 1 / 12 / 2;
  margin-top: 0;
  margin-bottom: 0;
}

/* 番号付き見出しの幅を本文に合わせ、短い幅による不自然な折り返しを避ける。 */
body:not(.device-mobile-optimized) #PAGES_CONTAINER .wixui-rich-text:has(> .s-numbered-heading) {
  width: 653px;
}
body.device-mobile-optimized #PAGES_CONTAINER .s-business-audience-title {
  margin-top: 56px;
  margin-bottom: 8px;
}
body.device-mobile-optimized #PAGES_CONTAINER .s-business-audience-en {
  margin-bottom: 28px;
}

/* Works / About：日本語キャッチコピーを大きめの明朝体に。 */
#PAGES_CONTAINER .s-serif-catchcopy h3,
#PAGES_CONTAINER .s-serif-catchcopy h3 * {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
  font-weight: 400 !important;
}

/* Works：テキストの左端・右端を、それぞれの画像の幅に合わせる。 */
#PAGES_CONTAINER .s-work-copy {
  width: 471px;
  left: 12px;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
}
#PAGES_CONTAINER .s-work-copy--right {
  left: 496px;
}
#PAGES_CONTAINER .s-work-copy h3 {
  text-align: left;
  white-space: normal;
}
body.device-mobile-optimized #PAGES_CONTAINER .s-work-copy {
  width: 290px;
  left: 15px;
}