@charset "utf-8";

/* 倉庫・工場ページのレイアウトは他のリフォームページ(reform.css)と共通。
   ここには、このページだけの配色（ネイビー）・角のあるデザイン・文章量の違いによる調整を書く。
   ※以前の緑の配色は bk_warehouse-factory_green.css にバックアップ */

/* -----------------------------------------------------------
    配色：ページ全体をネイビー系にする
    （共通CSSが参照している色の変数を、このページの中だけネイビーに差し替える）
-------------------------------------------------------------- */
#reform.warehouse-factory {
  --wf-navy: #3b5b7b;
  --wf-navy-dark: #2c4560; /* 小さい文字用（読みやすい濃さ） */
  --wf-navy-bg: #eff2f5; /* セクション背景（他ページのベージュの代わり） */
  --main: var(--wf-navy);
  --orange: var(--wf-navy);
  --light-orange: color-mix(in srgb, var(--wf-navy) 16%, #fff);
  --grade-orange: linear-gradient(180deg, var(--light-orange) 0%, transparent 100%);
  --beige: var(--wf-navy-bg);
}
/* 全ページ共通のお問い合わせは、他ページと同じオレンジのまま */
#reform.warehouse-factory .top-contact {
  --main: #e97629;
}
/* メインビジュアル：背景の柄はそのまま、色味だけネイビーに寄せる */
#reform.warehouse-factory .subpage-header {
  background-color: color-mix(in srgb, var(--wf-navy) 16%, #fff);
  background-blend-mode: luminosity;
}
#reform.warehouse-factory .subpage-header::before {
  background-blend-mode: inherit;
}
/* about-areaのキャッチ前半 */
#reform.warehouse-factory .about-area .catch-l .color {
  color: var(--wf-navy);
}
/* about-area：図（左）と文章（右）を横に並べ、図は白いパネルに載せて後ろにネイビーの面をずらして敷く */
#reform.warehouse-factory .about-area {
  overflow-x: clip; /* 図が左からスライドしてくる間、横スクロールを出さない */
}
#reform.warehouse-factory .about-area > .inner3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
}
#reform.warehouse-factory .about-area-image {
  position: relative;
  margin: 0 0 24px 24px;
  /* 左から横にスライドして入る（表示の切り替えは script.js の .cmn-slidein） */
  transform: translateX(-140px);
  transition:
    transform 1.1s cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 0.8s ease-out;
}
#reform.warehouse-factory .about-area-image::before {
  content: "";
  position: absolute;
  inset: 24px 24px -24px -24px;
  z-index: -1;
  background: var(--wf-navy-bg);
}
#reform.warehouse-factory .about-area-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 6px;
  background: var(--wf-navy);
}
#reform.warehouse-factory .about-area-image img {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: auto;
  padding: 30px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--wf-navy) 25%, #fff);
}
#reform.warehouse-factory .about-area .txt-block {
  display: block;
}
#reform.warehouse-factory .about-area-label {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--wf-navy);
  font-family: var(--en);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
}
#reform.warehouse-factory .about-area-label::before {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
}
#reform.warehouse-factory .about-area .catch-l {
  padding: 20px 0 0;
  line-height: 1.5;
}
/* キャッチの前半は小さく1行に、後半を大きく見せる */
#reform.warehouse-factory .about-area .catch-l > span:first-child {
  display: block;
  padding: 0 0 6px;
  font-size: 2.2rem;
}
#reform.warehouse-factory .about-area .catch-l .color {
  background: linear-gradient(transparent 68%, color-mix(in srgb, var(--wf-navy) 20%, #fff) 68%);
}
#reform.warehouse-factory .about-area .basic-txt {
  width: auto;
  margin: 30px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--wf-navy) 25%, #fff);
}
@media screen and (max-width: 768px) {
  #reform.warehouse-factory .about-area > .inner3 {
    display: block;
  }
  #reform.warehouse-factory .about-area-image {
    margin: 0 0 14px 14px;
    transform: translateX(-60px);
  }
  #reform.warehouse-factory .about-area-image img {
    padding: 14px;
  }
  #reform.warehouse-factory .about-area-image::before {
    inset: 14px 14px -14px -14px;
  }
  #reform.warehouse-factory .about-area-image::after {
    width: 40px;
    height: 4px;
  }
  #reform.warehouse-factory .about-area .txt-block {
    margin: 40px 0 0;
  }
  #reform.warehouse-factory .about-area-label {
    font-size: 1.4rem;
  }
  #reform.warehouse-factory .about-area-label::before {
    width: 28px;
  }
  #reform.warehouse-factory .about-area .catch-l {
    padding: 14px 0 0;
  }
  #reform.warehouse-factory .about-area .catch-l > span:first-child {
    font-size: 1.6rem;
  }
  #reform.warehouse-factory .about-area .basic-txt {
    margin: 20px 0 0;
    padding: 20px 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #reform.warehouse-factory .about-area-image {
    transform: none;
    transition: none;
  }
}
/* 費用：オレンジの背景画像は使わず、ネイビーのべた塗りにする */
#reform.warehouse-factory .cost-area {
  background: var(--wf-navy);
}
/* 選ばれる理由：カードの影の茶色味をなくす */
#reform.warehouse-factory .reason-list-box {
  box-shadow: 0 10px 30px rgba(20, 40, 70, 0.08);
}
/* 選ばれる理由：横3列ではなく上から下に並べ、1件ごとに写真（左）と文章（右）を横に置く */
@media screen and (min-width: 769px) {
  #reform.warehouse-factory .reason-list {
    flex-direction: column;
    gap: 30px;
  }
  /* 高さを抑えるため、写真は小さめ・余白は控えめにする */
  #reform.warehouse-factory .reason-list-box {
    align-items: start;
    column-gap: 40px;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    padding: 36px 40px 30px;
  }
  #reform.warehouse-factory .reason-area .basic-txt {
    padding: 12px 0 0;
  }
  #reform.warehouse-factory .reason-list-image {
    grid-row: 1 / span 2;
  }
  #reform.warehouse-factory .reason-area .catch-s {
    padding: 0 0 10px;
    text-align: left;
  }
  #reform.warehouse-factory .reason-area .catch-s .pc-br {
    display: none;
  }
}
/* 流れ（flow.css の変数を差し替え） */
#reform.warehouse-factory .flow-area {
  --flow-accent: var(--wf-navy);
  --flow-accent-text: var(--wf-navy-dark);
  --flow-bg: var(--wf-navy-bg);
  --flow-placeholder: #dde3ea;
}
/* 流れ：画像なし（文章だけのカード） */
#reform.warehouse-factory .flow-list--noimg .flow-card {
  display: block;
  padding: 30px 40px;
}
@media (max-width: 640px) {
  #reform.warehouse-factory .flow-list--noimg .flow-card {
    padding: 18px 16px 20px;
  }
}

/* -----------------------------------------------------------
    角のあるデザイン：丸みをなくす
    （全ページ共通のページ内メニューとお問い合わせは対象外）
-------------------------------------------------------------- */
#reform.warehouse-factory .contents > :not(.top-contact, .nav-wrapper, .subpage-header, .sp-block),
#reform.warehouse-factory .contents > :not(.top-contact, .nav-wrapper, .subpage-header, .sp-block)::before,
#reform.warehouse-factory .contents > :not(.top-contact, .nav-wrapper, .subpage-header, .sp-block)::after,
#reform.warehouse-factory .contents > :not(.top-contact, .nav-wrapper, .subpage-header, .sp-block) *,
#reform.warehouse-factory .contents > :not(.top-contact, .nav-wrapper, .subpage-header, .sp-block) *::before,
#reform.warehouse-factory .contents > :not(.top-contact, .nav-wrapper, .subpage-header, .sp-block) *::after {
  border-radius: 0 !important;
}
/* 英字見出しの頭の飾り（丸い形）は小さな四角に */
#reform.warehouse-factory .ttl-l .en::before {
  width: 14px;
  height: 14px;
  margin: 0 12px 0 0;
  transform: translateY(-3px);
  -webkit-mask: none;
  mask: none;
}
/* サービス内容の見出し横の飾り（丸い形）は縦のラインに */
#reform.warehouse-factory .service-block .txt-box .ttl:before {
  top: 50%;
  width: 6px;
  height: 1.1em;
  background: var(--main);
}
/* メリットの番号：丸い吹き出しのしっぽは四角には合わないので消す */
#reform.warehouse-factory .charm-list-block .txt-box .num::before {
  display: none;
}
/* 選ばれる理由の背景：大きな丸の代わりに斜めに切った面を敷く */
#reform.warehouse-factory .reason-area::before {
  right: 0;
  width: 55%;
  height: 80%;
  clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%);
}
@media screen and (min-width: 769px) {
  /* メリット：上のアーチがなくなるぶん余白を詰め、背景の白い丸の代わりに白いカードにする */
  #reform.warehouse-factory .charm-area {
    padding: 100px 0 60px;
  }
  #reform.warehouse-factory .charm-list {
    margin: 60px 0 0;
  }
  #reform.warehouse-factory .charm-list-block::before {
    display: none;
  }
  #reform.warehouse-factory .charm-list-block:nth-child(even) {
    top: 0;
  }
  #reform.warehouse-factory .charm-list-block .txt-box {
    box-sizing: border-box;
    height: 100%;
    padding: 30px;
    background: #fff;
  }
}

/* -----------------------------------------------------------
    ページタイトル（他ページにない紹介文が入るぶんの調整）
-------------------------------------------------------------- */
@media screen and (min-width: 769px) {
  #reform.warehouse-factory .subpage-header {
    height: auto;
    min-height: 700px;
    padding: 90px 0 40px;
  }
  /* 紹介文が右半分の写真に被らないよう幅を抑える */
  #reform.warehouse-factory .subpage-header__inner > .basic-txt:not(.pc-display-b) {
    max-width: calc(50vw - 190px);
  }
}


.subpage-header__inner{
    padding: 0 0 0 150px;
}

@media screen and (max-width: 768px) {
    
    .subpage-header__inner{
        padding: 0 20px;
    }
    
    .subpage-header .basic-txt {
        font-weight: 500;
    }
}

/* -----------------------------------------------------------
    charm-area（番号はカードの左上の角に掛ける）
-------------------------------------------------------------- */
#reform.warehouse-factory .charm-list-block .txt-box .num {
  top: -30px;
  left: -10px;
}
@media screen and (min-width: 769px) {
  /* 小見出しが番号に被らないよう、番号の下から始める */
  #reform.warehouse-factory .charm-list-ttl {
    margin: 30px 0 0;
  }
}
@media screen and (max-width: 768px) {
  #reform.warehouse-factory .charm-list-block .txt-box .num {
    top: -10px;
  }
}

/* -----------------------------------------------------------
    cost-area（補助金名・金額が長く折り返すため行間を確保）
-------------------------------------------------------------- */
#reform.warehouse-factory .cost-ttl {
  line-height: 1.4;
}
#reform.warehouse-factory .cost-list-ttl {
  line-height: 1.6;
}
#reform.warehouse-factory .cost-list-price {
  line-height: 1.5;
  padding: 8px 0 0;
}