/* ==========================================================
   中国輸入代行 + EC物流（/import/）専用スタイル
   帯の見出し・角丸の箱・ベージュ地の文章・写真に説明を重ねたカードで、実務的で落ち着いた見た目にする
   見出しは太字にしすぎず、写真と余白で見せる
   ========================================================== */
.im {
  --im-deep: #1c3a30;
  --im-band: #2b5143;
  --im-beige: #ede4d3;
  --im-gray: #ebebe9;
  --im-accent: #b4621c;
  --im-tab: #8a6b52;
  --im-ink: #222;
  --im-text: #3d3d3d;
  color: var(--im-text);
}
.im p { margin: 0; }
.im-wrap { width: 100%; max-width: 98rem; margin: 0 auto; padding: 0 2.4rem; box-sizing: border-box; }
.im-wrap--narrow { max-width: 82rem; }

/* ---------- ヒーロー ---------- */
.im-hero { position: relative; background-size: cover; background-position: right center; padding: 13rem 0 8rem; }
.im-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 46%, rgba(255,255,255,.5) 66%, rgba(255,255,255,0) 86%);
}
.im-hero__inner { position: relative; }
.im-hero__sub { font-size: 2rem; letter-spacing: .1em; color: #333; }
.im-hero__title { font-size: 4.4rem; font-weight: 400; letter-spacing: .1em; line-height: 1.4; color: var(--im-deep); margin: 1.2rem 0 2.4rem; }
.im-hero__lead { font-size: 1.5rem; line-height: 2; color: #333; max-width: 60rem; }
.im-hero__note { font-size: 1.35rem; line-height: 1.8; color: #555; margin-top: .6rem !important; }
.im-hero__circles { display: flex; gap: 2.8rem; margin-top: 3.6rem; }
.im-circle {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 15.6rem; height: 15.6rem; border-radius: 50%; background: var(--im-deep); color: #fff !important;
  font-size: 1.5rem; line-height: 1.85; letter-spacing: .06em; text-decoration: none; transition: background-color .2s ease;
}
.im-circle:hover { background: var(--im-accent); text-decoration: none; }
.im-strip { display: grid; grid-template-columns: repeat(6, 1fr); }
.im-strip img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- 当社の強み ---------- */
.im-strong { background: var(--im-band); padding: 6.4rem 0 7.2rem; }
.im-strong__title { text-align: center; color: #fff; font-size: 2.8rem; font-weight: 700; letter-spacing: .14em; margin: 0 0 4rem; }
.im-strong__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.im-box { background: #e8ebe9; border-radius: 18px; padding: 2.8rem 3rem 3rem; }
.im-box h3 { font-size: 1.7rem; font-weight: 700; line-height: 1.75; color: var(--im-accent); margin: 0 0 1.2rem; }
.im-box p { font-size: 1.45rem; line-height: 1.95; }

/* ---------- 当社について（ベージュ地の文章） ---------- */
.im-about { background: var(--im-beige); padding: 7.2rem 0 8rem; }
.im-marker {
  display: inline-block; background: #fffbe8; padding: 1.4rem 2rem; margin: 0 0 2.4rem;
  font-size: 1.9rem; font-weight: 700; line-height: 1.7; color: var(--im-ink);
}
.im-about p { font-size: 1.5rem; line-height: 2.05; }
.im-about p + p { margin-top: 1.4rem; }
.im-about p + .im-marker { margin-top: 6.4rem; }
.im-about strong { font-weight: 700; color: var(--im-ink); }

/* ---------- 帯の見出し ---------- */
.im-band { margin: 0; padding: 2.4rem 1.6rem; background: var(--im-band); color: #fff; text-align: center; font-size: 2.6rem; font-weight: 400; letter-spacing: .14em; }

/* ---------- サービス内容（写真の上に説明を重ねたカード） ---------- */
.im-services { background: var(--im-gray); padding: 3.2rem 0 6.4rem; }
.im-card { background: #fff; padding: 3.6rem 2.4rem 2.4rem; margin-top: 3.2rem; }
.im-card__title { text-align: center; font-size: 2.6rem; font-weight: 400; letter-spacing: .08em; line-height: 1.5; color: var(--im-ink); margin: 0 0 2.8rem; }
.im-card__photo { position: relative; min-height: 44rem; background-size: cover; background-position: center; padding: 1.6rem 1.6rem 7.2rem; box-sizing: border-box; }
.im-card__note { width: 48%; background: rgba(255,255,255,.9); padding: 2.4rem 2.4rem 2.6rem; box-sizing: border-box; }
.im-card__note p { font-size: 1.4rem; line-height: 1.95; color: #333; }
.im-card__note p + p { margin-top: 1rem; }
.im-card__note .im-card__lead { font-size: 1.7rem; font-weight: 700; line-height: 1.75; color: var(--im-accent); margin-bottom: 1.4rem; }
.im-card__more {
  position: absolute; right: 0; bottom: 0; background: var(--im-tab); color: #fff !important;
  font-size: 1.7rem; letter-spacing: .08em; padding: 1.8rem 3.6rem; text-decoration: none; transition: background-color .2s ease;
}
.im-card__more:hover { background: var(--im-accent); text-decoration: none; }

/* ---------- 白地・グレー地のセクション ---------- */
.im-plain { background: #fff; padding: 5.6rem 0 7.2rem; }
.im-plain--gray { background: var(--im-gray); }
.im-plain__lead { font-size: 1.5rem; line-height: 2; margin-bottom: 3.6rem !important; }
.im-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem 2.4rem; }
.im-item { margin: 0; }
.im-item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.im-item figcaption { text-align: center; font-size: 1.45rem; color: #444; margin-top: 1.2rem; }

.im-wh { background: #fff; padding: 2.4rem; }
.im-wh__photo { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; }
.im-wh__body { padding: 3.2rem 1.6rem 1.6rem; }
.im-wh__body p { font-size: 1.5rem; line-height: 2; margin-bottom: 2.8rem; }
.im-table { width: 100%; border-collapse: collapse; font-size: 1.5rem; background: #fff; }
.im-table th, .im-table td { border: 1px solid #d6d6d2; padding: 1.4rem 1.8rem; text-align: left; line-height: 1.7; }
.im-table thead th { background: var(--im-band); border-color: var(--im-band); color: #fff; font-weight: 400; letter-spacing: .06em; }
.im-table tbody th { background: #f5f5f3; font-weight: 700; color: #333; width: 26%; }
.im-scroll { overflow-x: auto; }
.im-table--cases { min-width: 64rem; }

.im-faq { margin: 0; background: #fff; padding: 1.2rem 3.2rem; }
.im-faq dt { position: relative; font-size: 1.6rem; font-weight: 700; color: var(--im-ink); line-height: 1.7; padding: 2.4rem 0 .8rem 3.6rem; border-top: 1px solid #e2e2df; }
.im-faq dt:first-child { border-top: 0; }
.im-faq dt::before { content: "Q."; position: absolute; left: 0; color: var(--im-band); }
.im-faq dd { position: relative; margin: 0; font-size: 1.5rem; line-height: 1.95; padding: 0 0 2.4rem 3.6rem; }
.im-faq dd::before { content: "A."; position: absolute; left: 0; font-weight: 700; color: var(--im-accent); }

/* ---------- お問い合わせ ---------- */
.im-contact { background: var(--im-deep); padding: 7.2rem 0; text-align: center; color: #fff; }
.im-contact__sub { font-size: 1.6rem; letter-spacing: .1em; color: rgba(255,255,255,.8); }
.im-contact__title { font-size: 3rem; font-weight: 400; letter-spacing: .1em; line-height: 1.5; color: #fff; margin: 1.2rem 0 2rem; }
.im-contact p { font-size: 1.5rem; line-height: 2; }
.im-contact__btn {
  display: inline-block; margin-top: 3.6rem; background: var(--im-tab); color: #fff !important;
  font-size: 1.8rem; letter-spacing: .08em; padding: 2rem 5.6rem; text-decoration: none; transition: background-color .2s ease;
}
.im-contact__btn:hover { background: var(--im-accent); text-decoration: none; }

@media (max-width: 900px) {
  .im-strong__grid { grid-template-columns: 1fr; }
  .im-card__photo { min-height: 0; background-size: 100% auto; background-position: center top; background-repeat: no-repeat; background-color: #fff; padding: 56% 0 6.4rem; }
  .im-card__note { width: auto; background: #fff; padding: 2.4rem .4rem 2rem; }
}
@media (max-width: 767px) {
  .im-wrap { padding: 0 1.6rem; }
  .im-hero { padding: 9.6rem 0 5.6rem; background-position: 70% center; }
  .im-hero::before { background: rgba(255,255,255,.84); }
  .im-hero__sub { font-size: 1.5rem; }
  .im-hero__title { font-size: 2.6rem; letter-spacing: .06em; }
  .im-hero__lead { font-size: 1.4rem; }
  .im-hero__note { font-size: 1.2rem; }
  .im-hero__circles { gap: 1.6rem; justify-content: center; }
  .im-circle { width: 13.6rem; height: 13.6rem; font-size: 1.35rem; }
  .im-strip { grid-template-columns: repeat(3, 1fr); }
  .im-strong { padding: 4.8rem 0 5.6rem; }
  .im-strong__title, .im-band { font-size: 2.1rem; }
  .im-box { padding: 2.4rem 2rem; border-radius: 14px; }
  .im-box h3 { font-size: 1.55rem; }
  .im-about { padding: 5.6rem 0 6.4rem; }
  .im-marker { font-size: 1.6rem; padding: 1.2rem 1.4rem; }
  .im-about p { font-size: 1.45rem; }
  .im-card { padding: 2.8rem 1.6rem 1.6rem; margin-top: 2rem; }
  .im-card__title { font-size: 1.9rem; margin-bottom: 2rem; }
  .im-card__more { font-size: 1.45rem; padding: 1.4rem 2.4rem; }
  .im-items { grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; }
  .im-wh { padding: 1.2rem; }
  .im-wh__body { padding: 2.4rem .4rem .4rem; }
  .im-table { font-size: 1.35rem; }
  .im-table th, .im-table td { padding: 1.2rem 1rem; }
  .im-faq { padding: .4rem 1.6rem; }
  .im-contact__title { font-size: 2.2rem; }
  .im-contact__btn { display: block; padding: 2rem 1.6rem; }
}