:root {
  --gap: 50px; /* 要素間の溝 */
  --space-x: 100px; /* 左右の余白 */
  --space-item-y: 100px;
  --space-list-y: 86px;
  --font-xx-large: 34px;
  --font-base: 16px;
  --font-size-title-category: 54px;
  --title-category-left: 100px;
  --font-size-header-title: 34px;
  --title-line-height: 1.6;
}


/* ===============================
   Product (single-product) — tidy
   =============================== */

#single_service_main_content {
  padding: 0 !important;
}

.p-serviceDetail--layout {
  padding-left: var(--space-x);
  padding-right: var(--space-x);
}

body.single-product #main_content {
  max-width: none !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
}
body.single-product #main_col {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
}
body.single-product #side_col {
  display: none !important;
}
body.single-product .p-serviceDetail {
  max-width: inherit !important;
}

/* = Scope reset */
.p-serviceDetail * {
  box-sizing: border-box;
}
.p-serviceDetail ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-serviceDetail figure {
  margin: 0;
}
.p-serviceDetail img {
  display: block;
  max-width: 100%;
  height: auto;
}

#bread_crumb {
  padding: 0 var(--space-x) !important;
}

.title-categoryWrap {
  position: absolute;
  left: var(--title-category-left);
  top: 50%;
  z-index: 3;
  transform: translateY(-70%);
}

.title-category {
  font-size: var(--font-size-title-category);
  color: #fff;
  margin-bottom: 8px;
}

.title-category__subText {
  font-size: var(--font-base);
  color: #fff;
}

#single_service_header .title {
  font-size: var(--font-size-header-title);
}

#single_service_header .title span {
  padding: 0 var(--space-x);
}


/* = Intro */
.p-serviceDetail__intro {
  padding: 50px var(--space-x);
}
.p-serviceDetail__features {
  padding: 20px var(--space-x) var(--space-item-y);
}
.p-serviceDetail__value {
  padding: var(--space-item-y) var(--space-x);
}
.p-serviceDetail__title,
.p-serviceDetail__valueTitle {
  margin: 0 0 12px;
  font-size: var(--font-xx-large);
  font-weight: 700;
  line-height: 1.3;
}
.p-serviceDetail__lead,
.p-serviceDetail__valueText {
  color: #333;
  line-height: 1.9 !important;
}

.p-serviceDetail__business {
  padding: 0 var(--space-x);
}

.p-serviceDetail__business li:first-child {
  border-top: solid 1px #333;
}
.p-serviceDetail__business li {
  display: flex;
  gap: var(--gap);
  border-bottom: solid 1px #333;
  padding: var(--space-list-y) 0;
  min-height: 430px;
}
.p-serviceDetail__buisinessTitle {
  font-size: var(--font-xx-large);
  font-weight: 700;
  line-height: var(--title-line-height);
  width: 45%;
}
.p-serviceDetail__buisinessText {
  flex: 1;
  color: #333;
  line-height: 1.9 !important;
  width: 55%;
}
.p-serviceDetail__buisinessText p:not(:last-of-type) {
  margin-bottom: 16px;
}

/* ===============================
  Breakpoints
  =============================== */
/* <=1392 */
@media (max-width: 1392px) {
  :root {
    --space-x: 60px;
    --title-category-left: 60px;
  }
}

/* <=1100 */
@media (max-width: 1100px) {
  :root {
    --gap: 20px;
    --space-x: 40px;
    --title-category-left: 40px;
  }

  .p-serviceDetail__intro,
  .p-serviceDetail--layout {
    padding-left: var(--space-x);
    padding-right: var(--space-x);
  }
}

/* <=950 */
@media (max-width: 950px) {
  :root {
    --gap: 20px;
  }
}

/* <=800 */
@media (max-width: 800px) {
  :root {
    --gap: 20px;
    --gap-column: 30px;
    --space-x: 20px;
  }

  .p-serviceDetail__title {
   margin-bottom: 4px;
  }

  .p-serviceDetail__business li {
    flex-direction: column;
    min-height: auto;
  }
  .p-serviceDetail__buisinessTitle {
    width: 100%;
  }
  .p-serviceDetail__buisinessText {
    width: 100%;
  }

}

/* <=650 */
@media (max-width: 650px) {
:root {
  --cols: 3;
  --gap: 20px;
  --font-xx-large: 28px;
  --font-base: 12px;
}
}

/* <=600 */
@media (max-width: 600px) {
  :root {
   --space-x: 20px;
   --title-category-left: 20px;
   --font-size-title-category: 46px;
   --font-size-header-title: 24px;
   --space-list-y: 46px;
   --space-item-y: 50px;
   --title-line-height: 1.2;
  }
  .p-serviceDetail__intro {
   padding: 0 20px 20px;
  }
}