@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/*
|---------------------------------------------------------------
| 包装梱包資材と工業用副資材の無料相談
|---------------------------------------------------------------
*/
.page-consulting {
  --color-primary: #015EAE;
  --container-padding-x: 20px;
}
@media (min-width: 767.02px) { /* PC */
  .page-consulting {
    --container-padding-x: 0px;
  }
}

/* reset */
.main.main--page-detail > .__content {
  margin: 0 !important;
}
@media screen and (min-width: 960px) {
  .wrapper.wrapper--column-2 .__inner .main {
    padding-left: 2.57em;
  }
}
@media screen and (max-width: 959px) {
  .wrapper .__inner .main,
  .main.main--page-detail > .__content {
    padding: 0 !important;
  }
}

/* 既存の要素を非表示 */
.main--page-detail .__heading,
.main--page-detail .__to-home,
.footer .conceptE {
  display: none;
}

/*
 * デバイス別
------------------------------------------------*/
@media (min-width: 767.02px) { /* PC */
  .page-consulting *[data-device=SP] {
    display: none !important;
  }
}

@media (max-width: 767px) { /* SP */
  .page-consulting *[data-device=PC] {
    display: none !important;
  }
}

/*
 * ページ
------------------------------------------------*/
.page-consulting {
  display: block;
  width: 100%;
  max-width: 914px;
  margin: 0 auto 70px;
}
@media (min-width: 767.02px) { /* PC */
  .page-consulting {
    padding: 30px 0;
  }
}
.page-consulting__header {
  display: block;
  width: 100%;
}
.page-consulting__body {
  display: block;
  width: 100%;
}

/*
 * ヒーロバナー
------------------------------------------------*/
.page-consulting-hero {
  list-style: none;
  display: block;
}
.page-consulting-hero > li {
  display: block;
}
.page-consulting-hero a {
  display: block;
}
.page-consulting-hero a[href=""] {
  pointer-events: none;
}
.page-consulting-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * セクション
------------------------------------------------*/
.page-consulting-section {
  display: block;
  width: 100%;
}
.main--page-detail section.page-consulting-section:not(.__heading) {
  margin: 0;
  padding: clamp(30px, 3.125vw, 40px) 0;
}
.page-consulting-section__header {
  display: block;
  width: 100%;
  margin: 0 0 clamp(40px, 4.167vw, 50px);
}
.page-consulting-section__body {
  display: block;
  width: 100%;
  padding: 0 var(--container-padding-x, 0px);
}

.page-consulting-section-title {
  --title-gap: 1em;
  display: block;
  width: 100%;
  margin: 0 0 0.5em;
  padding: 0.75em 0;
  border-width: 1px 0;
  border-style: solid;
  border-color: var(--color-primary);
  font-size: 19px;
  font-weight: 700;
  text-align: center;
}
@media (min-width: 767.02px) { /* PC */
  .page-consulting-section-title {
    --title-gap: 0.75em;
    font-size: 22px;
  }
}
.page-consulting-section-title small {
  display: block;
  width: 100%;
  margin: 0 0 var(--title-gap);
  color: var(--color-primary);
  font-size: calc(22px / 38px * 1em);
  font-weight: inherit;
}
.page-consulting-section-title b {
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: inherit;
}

/*
 * FLOW / 相談〜購入までの流れ
------------------------------------------------*/
.page-consulting-flows {
  --flow-gap-y: 30px;
  --flow-gap-x: 17.5px;
  --flow-border-color: #CCCCCC;
  --flow-width: 100px;
  --flow-arrow-size: 8px;
  --flow-font-size: 13px;
}
@media (min-width: 767.02px) { /* PC */
  .page-consulting-flows {
    --flow-gap-y: 50px;
    --flow-gap-x: 32.25px;
    --flow-width: 157px;
    --flow-arrow-size: 12px;
    --flow-font-size: 15px;
    --flow-note-font-size: 12px;
  }
}
.page-consulting-flows {
  width: 100%;
  overflow: hidden;
}
.page-consulting-flows > ol {
  list-style: none;
  width: auto;
  margin: calc(-1 * var(--flow-gap-y, 0px)) calc(-1 * var(--flow-gap-x, 0px)) 0 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.page-consulting-flows > ol > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  flex: 0 0 var(--flow-width);
  max-width: var(--flow-width);
  margin: var(--flow-gap-y, 0px) var(--flow-gap-x, 0px) 0 0;
  /* border: 1px solid var(--flow-border-color); */
  position: relative;
  font-size: var(--flow-font-size, 1em);
}
.page-consulting-flows > ol > li:not(:last-child)::after {
  content: "";
  width: var(--flow-arrow-size);
  height: var(--flow-arrow-size);
  border-color: var(--flow-border-color);
  border-width: 2px 2px 0 0;
  border-style: solid;
  transform: translateX(-75%) rotate(45deg);
  position: absolute;
  top: 0;
  left: calc(100% + var(--flow-gap-x, 0px) / 2);
  right: auto;
  bottom: 0;
  z-index: 2;
  margin: auto;
}
.page-consulting-flows > ol > li > picture {
  display: block;
  width: 100%;
  background: #ffffff;
}
.page-consulting-flows > ol > li > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

/*
 * VOICE / お客様の声
------------------------------------------------*/
.page-consulting-voices {
  --voice-gap: 20px;
  --voice-padding: 35px 20px;
  --voice-content-gap: 20px;
  --voice-image-size: 74px;
  --voice-title-gap: 10px;
  --voice-title-color: #01519D;
  --voice-title-main-font-size: 16px;
  --voice-title-sub-font-size: 12px;
  --voice-paragraph-font-size: 1em;
}
@media (min-width: 767.02px) { /* PC */
  .page-consulting-voices {
    --voice-gap: 35px 34px;
    --voice-padding: 26px;
    --voice-content-gap: 25px;
    --voice-image-size: 96px;
    --voice-image-negative-gap: 1em;
    --voice-title-gap: 10px;
    --voice-title-main-font-size: 20px;
    --voice-title-sub-font-size: 14px;
  }
}
.page-consulting-voices {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: var(--voice-gap);
}
.page-consulting-voices > article {
  width: 100%;
  padding: var(--voice-padding);
  display: grid;
  grid-template-areas: "heading picture" "paragraph paragraph";
  grid-template-columns: minmax(0, 1fr) calc(var(--voice-image-size) - var(--voice-image-negative-gap, 0px));
  grid-auto-rows: max-content;
  gap: var(--voice-content-gap) 0;
  color: #000000;
  background: linear-gradient(306.21deg, #EFFAFF 7.48%, #DAF3FF 92.52%);
}
.page-consulting-voices > article > picture {
  grid-area: picture;
  margin-left: calc(-1 * var(--voice-image-negative-gap, 0px));
}
.page-consulting-voices > article > picture > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;

}
.page-consulting-voices > article > h4 {
  grid-area: heading;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: var(--voice-title-gap);
  color: var(--voice-title-color);
  font-size: var(--voice-title-main-font-size);
}
.page-consulting-voices > article > h4 > b {
  display: block;
  font-size: 1em;
  font-weight: var(--voice-title-main-font-weight, 800);
  line-height: 1.5;
}
.page-consulting-voices > article > h4 > small {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: var(--voice-title-sub-font-size);
  font-weight: var(--voice-title-sub-font-weight, 600);
  line-height: 1.5;
}
.page-consulting-voices > article > h4 > small > span {
  display: block;
}
.page-consulting-voices > article > h4 > small > span:not(:last-child)::after {
  content: "／";
}
.page-consulting-voices > article > p {
  grid-area: paragraph;
  display: block;
  font-size: var(--voice-paragraph-font-size, 1em);
  font-weight: var(--voice-paragraph-font-weight, 500);
  line-height: 2;
}

/*
 * FAQ / よくある質問
------------------------------------------------*/
.page-consulting-faqs {
  --faq-mark-size: 24px;
  --faq-mark-font-size: 14px;
  --faq-mark-gap: 10px;
  --faq-qa-gap: 12.5px;
  --faq-q-font-size: 16px;
  --faq-q-line-height: 1.5;
  --faq-a-font-size: 14px;
  --faq-a-line-height: 1.5;
  --faq-small-font-size: 12px;
}
@media (min-width: 767.02px) { /* PC */
  .page-consulting-faqs {
    --faq-mark-size: 34px;
    --faq-mark-font-size: 16px;
    --faq-mark-gap: 15px;
    --faq-q-font-size: 18px;
    --faq-a-font-size: 15px;
    --faq-small-font-size: 12px;
  }
}
.page-consulting-faqs {
  display: block;
  width: 100%;
}
.page-consulting-faqs > dl {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--faq-qa-gap, 0px);
  margin: 0;
  padding: 30px 20px;
  border: 1px solid #CCCCCC;
  font-size: 14px;
}
@media (min-width: 767.02px) { /* PC */
  .page-consulting-faqs > dl {
    padding: 30px 40px;
    font-size: 15px;
  }
}
.page-consulting-faqs > dl + dl {
  margin-top: -1px;
}
.page-consulting-faqs > dl > dt {
  --faq-mark-text: "Q";
  --faq-mark-color: #ffffff;
  --faq-mark-bgcolor: var(--color-primary);
  --faq-mark-border-color: var(--color-primary);
  display: block;
  width: 100%;
  margin: 0;
  padding: calc((var(--faq-mark-size, 2em) - var(--faq-q-font-size, 1em) * var(--faq-q-line-height, 1.5)) / 2) 0;
  font-size: var(--faq-q-font-size, 1em);
  font-weight: 600;
  line-height: var(--faq-q-line-height, 1.5);
}
.page-consulting-faqs > dl > dd {
  --faq-mark-text: "A";
  --faq-mark-color: var(--color-primary);
  --faq-mark-bgcolor: #ffffff;
  --faq-mark-border-color: var(--color-primary);
  display: block;
  width: 100%;
  margin: 0;
  padding: calc((var(--faq-mark-size, 2em) - var(--faq-a-font-size, 1em) * var(--faq-a-line-height, 1.5)) / 2) 0;
  font-size: var(--faq-a-font-size, 1em);
  font-weight: 400;
  line-height: var(--faq-a-line-height, 1.5);
}
.page-consulting-faqs > dl > dd small {
  display: block;
  width: 100%;
  margin: 0.5em 0 0;
  font-size: var(--faq-small-font-size, 0.85em);
}

.page-consulting-faqs > dl > dt,
.page-consulting-faqs > dl > dd {
  padding-left: calc(var(--faq-mark-size, 2em) + var(--faq-mark-gap, 0px));
  position: relative;
}
.page-consulting-faqs > dl > dt::before,
.page-consulting-faqs > dl > dd::before {
  content: var(--faq-mark-text, "");
  width: var(--faq-mark-size, 2em);
  height: var(--faq-mark-size, 2em);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--faq-mark-font-size, 1em);
  font-weight: 700;
  text-align: center;
  color: var(--faq-mark-color);
  background-color: var(--faq-mark-bgcolor);
  border-width: 1px;
  border-style: solid;
  border-color: var(--faq-mark-border-color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin: auto;
}

/*
 * STAFF / 私たちが対応します
------------------------------------------------*/
.page-consulting-staffs {
  --staff-gap: 20px;
  --staff-article-padding-y: 40px;
  --staff-article-padding-x: 20px;
  --staff-article-gap: 20px;
  --staff-image-width: 200px;
  --staff-image-margin: 17.5px;
  --staff-name-font-size: 21px;
  --staff-role-font-size: 16px;
}
@media (min-width: 767.02px) { /* PC */
  .page-consulting-staffs {
    --staff-gap: 35px;
    --staff-article-padding-y: 50px;
    --staff-article-padding-x: 40px;
    --staff-article-gap: 20px 40px;
    --staff-image-width: 190px;
    --staff-image-margin: 0;
    --staff-name-font-size: 24px;
    --staff-role-font-size: 16px;
  }
}
.page-consulting-staffs {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--staff-gap);
}
.page-consulting-staffs > article {
  --theme-color: var(--color, var(--color-primary));
  width: 100%;
  display: grid;
  gap: var(--staff-article-gap);
  grid-template-areas: "picture" "heading" "paragraph";
  margin: 0 !important;
  padding: var(--staff-article-padding-y) var(--staff-article-padding-x) !important;
  color: var(--text-color, #000000);
  background-color: color-mix(in srgb, var(--theme-color), #ffffff 92%);
}
@media (min-width: 767.02px) { /* PC */
  .page-consulting-staffs > article:nth-of-type(odd) {
    grid-template-columns: var(--staff-image-width) minmax(0, 1fr);
    grid-template-areas: "picture heading" "picture paragraph";
  }
  .page-consulting-staffs > article:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr) var(--staff-image-width);
    grid-template-areas: "heading picture" "paragraph picture";
  }
}
.page-consulting-staffs > article > picture {
  grid-area: picture;
  display: block;
  width: 100%;
  margin: 0 0 var(--staff-image-margin, 0);
}
.page-consulting-staffs > article > picture img {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--staff-image-width, 200px);
  margin: 0 auto;
}
.page-consulting-staffs > article > h4 {
  grid-area: heading;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: var(--staff-name-font-size);
  font-weight: var(--staff-name-font-weight, 800);
}
.page-consulting-staffs > article > h4::before {
  content: "";
  align-self: center;
  display: block;
  width: 0.381em;
  height: 1.167em;
  background: var(--theme-color);
  flex-shrink: 0;
  margin-right: 0.5em;
}
.page-consulting-staffs > article > h4 > b {
  font-size: 1em;
  font-weight: inherit;
}
.page-consulting-staffs > article > h4 > small {
  font-size: var(--staff-role-font-size);
  font-weight: var(--staff-role-font-weight, 600);
}
.page-consulting-staffs > article > h4 > b + small::before {
  content: "／";
  margin: 0 0.5em;
}
.page-consulting-staffs > article > p {
  grid-area: paragraph;
  font-size: var(--staff-text-font-size, 1em);
  font-weight: var(--staff-text-font-weight, 500);
  line-height: var(--staff-text-line-height, 2);
}

/*
 * CTA
------------------------------------------------*/
.page-consulting-cta {
  --cta-margin-y: 45px;
  --cta-title-font-size: 14px;
}
@media (min-width: 767.02px) { /* PC */
  .page-consulting-cta {
    --cta-title-font-size: 18px;
  }
}
.page-consulting-cta {
  display: block;
  width: 100%;
  margin: var(--cta-margin-y) 0;
}
.page-consulting-cta > dt {
  display: block;
  width: 100%;
  margin: 0 0 1em;
  padding: 0 4px;
  font-size: var(--cta-title-font-size);
  font-weight: var(--cta-title-font-weight, 500);
  line-height: 1.5;
  text-align: center;
}
.page-consulting-cta > dd {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 var(--container-padding-x, 0px);
}
.page-consulting-cta > dd > a {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}
.page-consulting-cta > dd > a > img {
  display: block;
  width: 100%;
  height: auto;
}