@charset "UTF-8";
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
}

.content-header {
  flex-direction: column;
  width: 100%;
  background: url("../images/header_bg-sp.png") no-repeat center center/cover;
  min-height: 208px;
}
@media (min-width: 47.9375em) {
  .content-header {
    min-height: 240px;
    background: url("../images/header_bg.png") no-repeat center center/cover;
  }
}
.content-header h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: bold;
  line-height: 1.4;
  font-size: 30px;
  gap: 4px;
}
@media (min-width: 47.9375em) {
  .content-header h1 {
    font-size: calc(30px + 10 * (100vw - 768px) / 392);
  }
}
@media (min-width: 72.5em) {
  .content-header h1 {
    font-size: 40px;
  }
}
.content-header p {
  text-align: center;
  line-height: 1.5;
  font-weight: 400;
  color: white;
  margin: 0;
  font-size: 14px;
  margin-top: 12px;
}
@media (min-width: 47.9375em) {
  .content-header p {
    font-size: 16px;
    margin-top: 16px;
  }
}

@media (min-width: 47.9375em) {
  #overview {
    padding-bottom: 64px !important;
  }
}
@media (min-width: 47.9375em) {
  #overview .container {
    max-width: 736px;
  }
}
#overview .container h3 {
  text-align: center;
  font-weight: bold;
  line-height: 1.5;
  font-size: 18px;
  margin-bottom: 24px;
}
@media (min-width: 47.9375em) {
  #overview .container h3 {
    font-size: 22px;
    margin-bottom: 40px;
  }
}
#overview .container .overview__subtitle {
  font-weight: 400;
  line-height: 1.5;
  font-size: 16px;
  margin-bottom: 40px;
  text-align: center;
}
#overview .container .overview__image {
  width: 100%;
  overflow: hidden;
  margin-bottom: 12px;
}
@media (min-width: 47.9375em) {
  #overview .container .overview__image {
    margin-bottom: 16px;
  }
}
#overview .container .overview__image.radius {
  border-radius: 20px;
}
#overview .container .overview__image img {
  width: 100%;
  height: auto;
}
#overview .container .overview__note {
  line-height: 1.5;
  font-size: 16px;
  margin-bottom: 40px;
}
@media (min-width: 47.9375em) {
  #overview .container .overview__note {
    margin-bottom: 48px;
  }
}
#overview .container .overview__text {
  background-color: #f2f2f2;
  border-radius: 32px;
  padding: 32px 16px;
  line-height: 1.5;
  font-size: 16px;
}
@media (min-width: 47.9375em) {
  #overview .container .overview__text {
    padding: 40px;
  }
}

#contents {
  padding-bottom: 40px !important;
}
@media (min-width: 47.9375em) {
  #contents {
    padding-bottom: 80px !important;
  }
}
#contents .container {
  max-width: 736px;
}
#contents .container h4 {
  font-weight: bold;
  line-height: 1.5;
  font-size: 22px;
  padding-bottom: 8px;
  margin: 0;
  margin: 40px 0 32px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
@media (min-width: 47.9375em) {
  #contents .container h4 {
    font-size: 26px;
    margin: 64px 0 32px;
  }
}
#contents .container .contents-item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}
@media (min-width: 47.9375em) {
  #contents .container .contents-item {
    flex-direction: row;
    gap: 40px;
  }
}
#contents .container .contents-item__textarea h5 {
  text-align: left;
  font-weight: bold;
  line-height: 1.5;
  font-size: 16px;
  margin: 0;
  margin-bottom: 24px;
  color: #0c0b86;
}
#contents .container .contents-item__textarea p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
#contents .container .contents-item__textarea ul {
  margin: 0;
}
#contents .container .contents-item__textarea ul li {
  position: relative;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  padding-left: 1.4em;
}
#contents .container .contents-item__textarea ul li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  content: "・";
  margin: 0 0.2em;
}
#contents .container .contents-item__textarea ul li span {
  font-weight: bold;
}
#contents .container .contents-item__image {
  margin: 0;
  width: 100%;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
}
@media (min-width: 47.9375em) {
  #contents .container .contents-item__image {
    width: 50%;
  }
}
#contents .container .contents-item__image img {
  width: 100%;
  height: auto;
}
#contents .container .contents-item__imagearea {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
#contents .container .contents-item__imagearea img {
  width: 100%;
  height: auto;
}
#contents .container .contents__excerpt {
  background-color: #f2f2f2;
  border-radius: 32px;
  margin: 40px 0 20px;
  line-height: 1.5;
  font-size: 16px;
  padding: 32px 16px;
}
@media (min-width: 47.9375em) {
  #contents .container .contents__excerpt {
    padding: 40px;
    margin: 64px 0 20px;
  }
}
#contents .container .contents__note {
  text-align: right;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
#contents .container .contents__link {
  margin: 40px 0 0;
  font-size: 16px;
  line-height: 1.5;
}
@media (min-width: 47.9375em) {
  #contents .container .contents__link {
    margin: 63px 0 0;
  }
}
#contents .container .contents__link a {
  color: #406faf;
  text-decoration: underline;
}
#contents .container .contents__link a:after {
  display: inline-block;
  content: "";
  width: 14px;
  margin-left: 4px;
  aspect-ratio: 1/1;
  background: url("../jirei-001/images/external-icon.svg") no-repeat center center/cover;
}

/* 画像キャプション（jirei-009用・新規） */
#contents .container .contents-item__imagearea .contents-item__caption {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  text-align: left;
}
@media (min-width: 47.9375em) {
  #contents .container .contents-item__imagearea .contents-item__caption {
    font-size: 15px;
    text-align: center;
  }
}
/* キャプション付き画像エリア：ラッパーの角丸ではなく画像自体を四隅角丸に */
#contents .container .contents-item__imagearea:has(> .contents-item__caption) {
  border-radius: 0;
  overflow: visible;
}
#contents .container .contents-item__imagearea:has(> .contents-item__caption) > img {
  border-radius: 20px;
  display: block;
}
/* 1つの画像エリアに画像を2枚並べる場合の間隔（jirei-010用・新規） */
#contents .container .contents-item__imagearea > img + img {
  margin-top: 16px;
}
/* 縦長画像を長辺700px程度に抑えて中央寄せ（jirei-010用・新規） */
#contents .container .contents-item__imagearea--portrait > img {
  max-width: 341px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/* 2枚並び画像：PCは横並び・SPは縦並び（jirei-010用・新規） */
@media (min-width: 47.9375em) {
  #contents .container .contents-item__imagearea--2col {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
  }
  #contents .container .contents-item__imagearea--2col > img {
    width: calc((100% - 16px) / 2);
    margin-top: 0;
  }
  #contents .container .contents-item__imagearea--2col > .contents-item__caption {
    width: 100%;
  }
}

/* インタビュアーカード（jirei-009用・新規） */
#contents .container .interviewer {
  margin-top: 48px;
}
@media (min-width: 47.9375em) {
  #contents .container .interviewer {
    margin-top: 64px;
  }
}
#contents .container .interviewer__title {
  font-size: 22px;
  font-weight: 700;
  color: #000;
  line-height: 1.4;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  text-align: left;
}
@media (min-width: 47.9375em) {
  #contents .container .interviewer__title {
    font-size: 26px;
    margin: 0 0 24px;
  }
}
#contents .container .interviewer__card {
  border: 1px solid #000;
  border-radius: 20px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
@media (min-width: 47.9375em) {
  #contents .container .interviewer__card {
    flex-direction: row;
    align-items: flex-start;
    padding: 32px 36px;
    gap: 32px;
  }
}
#contents .container .interviewer__profile {
  text-align: center;
  flex-shrink: 0;
}
@media (min-width: 47.9375em) {
  #contents .container .interviewer__profile {
    width: 178px;
  }
}
#contents .container .interviewer__photo {
  width: 140px;
  height: 140px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}
@media (min-width: 47.9375em) {
  #contents .container .interviewer__photo {
    width: 178px;
    height: 178px;
  }
}
#contents .container .interviewer__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#contents .container .interviewer__name {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  text-align: center;
}
#contents .container .interviewer__text {
  flex: 1;
  width: 100%;
}
#contents .container .interviewer__text p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
}
#contents .container .interviewer__text p:last-child {
  margin-bottom: 0;
}
/* ============================================================
   BIZ_PH2-205  smb/interview/01.html 用 追加スタイル
   ============================================================ */

/* 画像列のキャプション（テキスト横並び時） */
#contents .container .contents-item__image .contents-item__caption {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  text-align: center;
}

/* 横2列レイアウトの画像幅バリエーション（PCのみ・SPは縦積み） */
@media (min-width: 47.9375em) {
  #contents .container .contents-item__image--30 { width: 30%; }
  #contents .container .contents-item__image--40 { width: 40%; }
}

/* 導入前の課題 → 導入後の効果 フロー */
#contents .container .kadai-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 8px 0 36px;
}
@media (min-width: 47.9375em) {
  #contents .container .kadai-flow {
    flex-direction: row;
    align-items: stretch; /* 導入前の課題／導入後の効果の高さを揃える */
    gap: 0;
  }
}
#contents .container .kadai-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e2e2;
  border-radius: 16px;
  overflow: hidden;
}
#contents .container .kadai-box--before { border-color: #dcdcdc; }
#contents .container .kadai-box--after  { border-color: #ffd8d8; }
/* 塗り帯の見出し（ピクトグラム付き） */
#contents .container .kadai-box__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 13px 18px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}
#contents .container .kadai-box--before .kadai-box__title { background-color: #8a8a8a; }
#contents .container .kadai-box--after .kadai-box__title  { background-color: #e93817; }
#contents .container .kadai-box__title svg {
  flex: none;
  display: block;
  width: 20px;
  height: 20px;
}
/* 本文エリア（帯と地続きになる淡色背景） */
#contents .container .kadai-box__body {
  flex: 1;
  padding: 16px 20px 18px;
}
#contents .container .kadai-box--before .kadai-box__body {
  background-color: #f2f2f2;
  color: #555555;
}
#contents .container .kadai-box--after .kadai-box__body { background-color: #fff2f0; }
#contents .container .kadai-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#contents .container .kadai-box ul li {
  position: relative;
  margin: 8px 0;
  padding-left: 15px;
  font-size: 15px;
  line-height: 1.6;
}
#contents .container .kadai-box ul li:before {
  position: absolute;
  top: 9px;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.5;
  content: "";
}
#contents .container .kadai-box ul li b { color: #e93817; }
/* 中央の矢印（SP=下向き / PC=右向き） */
#contents .container .kadai-arrow {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: rotate(90deg);
}
#contents .container .kadai-arrow svg {
  display: block;
  width: 42px;
  height: 42px;
}
@media (min-width: 47.9375em) {
  #contents .container .kadai-arrow {
    width: 60px;
    transform: none;
  }
}

/* 選定理由ボックス */
#contents .container .reason-box {
  border: 1px solid #e93817;
  border-radius: 16px;
  overflow: hidden;
  background-color: #fff;
  margin: 0 0 40px; /* 次の設問との間隔を確保 */
}
@media (min-width: 47.9375em) {
  #contents .container .reason-box { margin-bottom: 64px; }
}
#contents .container .reason-box__title {
  margin: 0;
  padding: 14px;
  background-color: #e93817;
  color: #fff;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.5;
}
@media (min-width: 47.9375em) {
  #contents .container .reason-box__title { font-size: 18px; }
}
#contents .container .reason-list {
  margin: 0;
  padding: 14px 24px;
  list-style: none;
}
@media (min-width: 47.9375em) {
  #contents .container .reason-list { padding: 16px 56px; }
}
#contents .container .reason-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0; /* 共通CSSのli余白を打ち消して行間を詰める（指示v05 #1） */
  padding: 5px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
#contents .container .reason-list__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #e93817;
}
#contents .container .reason-list__check svg {
  display: block;
  width: 12px;
  height: 12px;
}

/* 会社情報カード（インタビュアーカードを流用／ロゴは矩形のまま） */
#contents .container .company__logo {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
}
#contents .container .company__logo img {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 47.9375em) {
  #contents .container .company .interviewer__profile {
    width: 220px;
    align-self: center;
  }
}
#contents .container .company__data dl { margin: 0; }
#contents .container .company__data dl > div {
  display: flex;
  gap: 0.5em 1.2em;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 10px;
}
/* PCでは事業内容など長文でも dt の右側に配置（SPは折り返し） */
@media (min-width: 47.9375em) {
  #contents .container .company__data dl > div {
    flex-wrap: nowrap;
  }
}
#contents .container .company__data dl > div:last-child { margin-bottom: 0; }
#contents .container .company__data dt {
  flex-shrink: 0;
  min-width: 5em;
  font-weight: bold;
}
#contents .container .company__data dd {
  margin: 0;
  flex: 1;
  min-width: 0;
}
#contents .container .company__data a {
  color: #406faf;
  text-decoration: underline;
  word-break: break-all;
}

/* --- v02 追加：回り込み画像（画像の下にもテキストを流し込む） --- */
#contents .container .contents-item--block {
  display: block;
}
#contents .container .contents-item--block .contents-item__textarea::after {
  content: "";
  display: block;
  clear: both;
}
#contents .container .floatimg {
  border-radius: 20px;
  overflow: hidden;
  margin: 0 0 16px;
}
#contents .container .floatimg img {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 47.9375em) {
  #contents .container .floatimg--left {
    float: left;
    width: 40%;
    margin: 4px 32px 16px 0;
  }
}

/* --- v02 追加：メッセージの結び（横いっぱい） --- */
#contents .container .message-catch {
  clear: both;
  margin: 40px 0 0;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.8;
}
@media (min-width: 47.9375em) {
  #contents .container .message-catch {
    font-size: 18px;
    margin-top: 56px;
  }
}

/* --- v03 追加：キャプション付き画像列は画像自体を四隅角丸に --- */
#contents .container .contents-item__image:has(> .contents-item__caption) {
  border-radius: 0;
  overflow: visible;
}
#contents .container .contents-item__image:has(> .contents-item__caption) > img {
  border-radius: 20px;
  display: block;
}

/* --- v04 追加：取材時期の注記の上に余白を確保 --- */
#contents .container .contents__note {
  margin-top: 40px;
}
@media (min-width: 47.9375em) {
  #contents .container .contents__note {
    margin-top: 56px;
  }
}