@charset "UTF-8";
/*
 * Dotcon+ | A&G 下層ページ専用
 * 共通CSSはそのまま使用し、.dotcon-page の内側だけを調整します。
 * 既存SPのremスケールを維持するため、htmlのfont-sizeは変更しません。
 */
body.dotcon-page {
  min-width: 0;
  height: auto;
  color: #181800;
  background: #fff;
}
.dotcon-page *, .dotcon-page *::before, .dotcon-page *::after {
  box-sizing: border-box;
  font-family: 'Noto Serif JP', 'Noto Serif CJK JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
}
.dotcon-page .next.dotcon { min-width: 0; overflow: hidden; }
.dotcon-page .dotcon img { display: block; width: 100%; max-width: 100%; height: auto; }
.dotcon-page .dotcon figure { margin: 0; }
.dotcon-page .dotcon p { font-size: 16px; font-weight: 400; letter-spacing: .1em; line-height: 2; }
.dotcon-page .dc-shell { width: 100%; max-width: 1360px; padding: 0 80px; margin: 0 auto; }
.dotcon-page .dc-section { margin-top: 96px; scroll-margin-top: 150px; }
.dotcon-page .dc-heading {
  margin: 0 0 40px; padding: 0 0 14px; border-bottom: 1px solid #181800;
  font-size: 22px; font-weight: 600; letter-spacing: .18em; line-height: 1.65;
}
.dotcon-page .dc-subheading {
  margin: 0 0 20px; font-size: 20px; font-weight: 600; letter-spacing: .12em; line-height: 1.8;
}
.dotcon-page .dotcon .dc-note,
.dotcon-page .dotcon figcaption {
  font-size: 12px; font-weight: 400; line-height: 1.9; letter-spacing: .055em; color: #5b5b54;
}
.dotcon-page .dc-note { margin-top: 20px; }
.dotcon-page .dc-en, .dotcon-page .dc-feature-no,
.dotcon-page .dc-load-value, .dotcon-page .dc-load-value * {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
}
.dotcon-page .dc-intro::after, .dotcon-page .dc-nav ul::after,
.dotcon-page .dc-features::after, .dotcon-page .dc-feature::after,
.dotcon-page .dc-comparison::after, .dotcon-page .dc-why::after,
.dotcon-page .dc-mechanism::after, .dotcon-page .dc-tech::after,
.dotcon-page .dc-steps::after, .dotcon-page .dc-steps li::after { content: none; }

/* 既存の写真＋白いタイトルボックスを流用 */
.dotcon-page .dotcon .title_box::before {
  background: url('../image/dotcon-plus/title.webp') no-repeat center 69%;
  background-size: cover;
}
.dotcon-page .dotcon .title_box h2 { overflow-wrap: anywhere; }
.dotcon-page .dotcon .title_box h2::after { font-family: 'EB Garamond', Georgia, serif; }
.dotcon-page .dotcon .title_box h2.dc-title-logo {
  width: 390px; padding: 68px 34px 68px 0; display: flex; align-items: center;
}
.dotcon-page .dotcon .title_box h2.dc-title-logo::after { display: none; }
.dotcon-page .dotcon .title_box h2.dc-title-logo img {
  width: 100%; max-width: 350px; height: auto; margin: 0; object-fit: contain;
}
.dotcon-page .dotcon .dc-title-caption {
  position: absolute; top: 488px; right: 0; margin: 0;
  font-size: 11px; line-height: 1.5; color: #66665e; letter-spacing: .04em;
}

/* 導入 */
.dotcon-page .dc-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; }
.dotcon-page .dotcon .dc-kicker { margin-bottom: 20px; font-size: 14px; font-weight: 500; letter-spacing: .16em; }
.dotcon-page .dc-intro h3 { margin-bottom: 26px; font-size: 32px; font-weight: 600; letter-spacing: .12em; line-height: 1.9; }
.dotcon-page .dc-intro h3 span { white-space: nowrap; }
.dotcon-page .dc-intro .dc-lead { margin-bottom: 14px; font-size: 18px; font-weight: 500; }
.dotcon-page .dc-intro figure { padding: 4px 8px; }
.dotcon-page .dc-intro figcaption { margin-top: 12px; text-align: right; }
.dotcon-page .dc-nav { margin-top: 64px; }
.dotcon-page .dc-nav ul { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid #181800; }
.dotcon-page .dc-nav li { min-width: 0; border-left: 1px solid #181800; }
.dotcon-page .dc-nav li:first-child { border-left: 0; }
.dotcon-page .dc-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px;
  padding: 16px 24px; color: #181800; font-size: 14px; font-weight: 500;
  line-height: 1.5; letter-spacing: .08em; text-decoration: none; transition: background .2s;
}
.dotcon-page .dc-nav a::after {
  content: ''; flex-shrink: 0; width: 7px; height: 7px; margin-top: -4px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg);
}
.dotcon-page .dc-nav a:hover { background: #f2f2f2; }

/* 施工事例：A1パネル3Pの8点を既存ページの余白・罫線に合わせて整理 */
.dotcon-page .dc-case-grid {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 34px 24px;
}
.dotcon-page .dc-case-card { min-width: 0; }
.dotcon-page .dc-case-image { overflow: hidden; background: #f2f2f2; aspect-ratio: 4 / 3; }
.dotcon-page .dc-case-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.dotcon-page .dc-case-card:hover .dc-case-image img { transform: scale(1.025); }
.dotcon-page .dotcon .dc-case-card figcaption {
  margin-top: 12px; color: #181800; font-size: 14px; font-weight: 500; letter-spacing: .08em; line-height: 1.7;
}
.dotcon-page .dc-cases-note { margin-top: 24px; }

/* 5つの特徴：既存と同じ黒い罫線と淡いグレー */
.dotcon-page .dc-features { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 34px 0; background: #f2f2f2; }
.dotcon-page .dc-feature { min-width: 0; padding: 0 25px; border-left: 1px solid #ccc; }
.dotcon-page .dc-feature:first-child { border-left: 0; }
.dotcon-page .dc-feature-no { display: block; margin-bottom: 16px; font-size: 24px; line-height: 1; color: #676760; }
.dotcon-page .dc-feature dt { margin-bottom: 12px; font-size: 20px; font-weight: 600; letter-spacing: .08em; line-height: 1.5; }
.dotcon-page .dc-feature dd { font-size: 14px; font-weight: 400; letter-spacing: .06em; line-height: 1.95; }
.dotcon-page .dc-features-note { margin-top: 14px; }

/* 排水との比較：自社の施工前後写真として扱わない */
.dotcon-page .dc-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; }
.dotcon-page .dc-comparison figure { min-width: 0; }
.dotcon-page .dc-comparison h4 { margin: 0 0 20px; font-size: 18px; font-weight: 500; line-height: 1.8; letter-spacing: .1em; }
.dotcon-page .dc-comparison h4::before { content: ''; display: inline-block; width: 16px; height: 1px; background: #181800; vertical-align: middle; margin: 0 12px 5px 0; }
.dotcon-page .dc-comparison img { width: 100%; aspect-ratio: 1.92; object-fit: cover; }
.dotcon-page .dc-comparison figcaption { padding: 20px 22px; background: #f2f2f2; color: #181800; font-size: 14px; font-weight: 500; line-height: 1.9; text-align: center; }
.dotcon-page .dc-comparison figcaption span { display: inline-block; }
.dotcon-page .dc-comparison figcaption span + span::before { content: '／'; padding: 0 .25em; font-weight: 400; }

/* 雨水を地中へ還す仕組み */
.dotcon-page .dc-band { margin-top: 100px; padding: 72px 0 80px; background: #f2f2f2; scroll-margin-top: 120px; }
.dotcon-page .dc-why { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; margin-bottom: 68px; }
.dotcon-page .dc-why h3 { font-size: 27px; font-weight: 600; letter-spacing: .14em; line-height: 2; }
.dotcon-page .dc-why figure { padding: 28px 34px 20px; background: #fff; }
.dotcon-page .dc-why figcaption { margin-top: 14px; text-align: center; }
.dotcon-page .dc-mechanism { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.dotcon-page .dc-mechanism figure { padding: 28px; background: #fff; }
.dotcon-page .dc-mechanism figcaption { text-align: center; margin-top: 20px; }
.dotcon-page .dc-steps { margin: 0; padding: 0; }
.dotcon-page .dc-steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 16px; margin: 0 0 26px; }
.dotcon-page .dc-steps li:last-child { margin-bottom: 0; }
.dotcon-page .dc-step-no { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 5px; background: #181800; color: #fff; font-size: 14px; font-weight: 500; line-height: 1; }
.dotcon-page .dc-steps h5 { margin-bottom: 8px; font-size: 20px; font-weight: 600; line-height: 1.7; letter-spacing: .1em; }
.dotcon-page .dc-steps p { font-size: 15px; }
.dotcon-page .dc-tech { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 24px; margin-top: 40px; }
.dotcon-page .dc-tech article { min-width: 0; padding: 28px; background: #fff; }
.dotcon-page .dc-tech h5 { margin-bottom: 14px; font-size: 17px; font-weight: 600; letter-spacing: .07em; line-height: 1.8; }
.dotcon-page .dc-tech p { font-size: 14px; }
.dotcon-page .dc-storage { width: 100%; margin-top: 20px; border-collapse: collapse; }
.dotcon-page .dc-storage caption { padding-bottom: 8px; text-align: left; font-size: 12px; line-height: 1.6; letter-spacing: .04em; color: #5b5b54; }
.dotcon-page .dc-storage th, .dotcon-page .dc-storage td { padding: 7px 0; border-bottom: 1px solid #ddd; font-size: 14px; font-weight: 400; line-height: 1.6; }
.dotcon-page .dc-storage td { text-align: right; font-weight: 500; }
.dotcon-page .dc-tech .dc-tech-value { margin: 8px 0 14px; font-size: 27px; line-height: 1.6; letter-spacing: .08em; font-weight: 500; }

/* 耐荷重性能：メーカー提供資料にある数値と説明のみ */
.dotcon-page .dc-performance { padding: 44px 36px; border: 1px solid #cfcfca; text-align: center; }
.dotcon-page .dc-performance h4 { margin-bottom: 12px; font-size: 22px; font-weight: 500; letter-spacing: .14em; line-height: 1.7; text-align: center; }
.dotcon-page .dotcon .dc-load-value { margin: 4px 0 10px; font-size: 70px; font-weight: 400; letter-spacing: .02em; line-height: 1.25; white-space: nowrap; text-align: center; }
.dotcon-page .dc-load-value small { margin-left: 2px; font-size: .48em; }
.dotcon-page .dc-load-value .dc-load-dash { display: inline-block; margin: 0 12px; font-size: .63em; vertical-align: .08em; }
.dotcon-page .dotcon .dc-load-caption { margin-bottom: 24px; font-size: 22px; font-weight: 600; letter-spacing: .18em; text-align: center; }
.dotcon-page .dc-performance .dc-load-text { text-align: center; }
.dotcon-page .dc-performance .dc-note { text-align: center; }

/* この段落のみA&G向けの追加原稿 */
.dotcon-page .dc-consult { margin-top: 96px; padding: 56px 36px; background: #f2f2f2; text-align: center; scroll-margin-top: 145px; }
.dotcon-page .dc-consult h3 { margin-bottom: 24px; font-size: 24px; font-weight: 600; letter-spacing: .14em; line-height: 1.8; text-align: center; }
.dotcon-page .dc-consult p { text-align: center; }
.dotcon-page .dc-button {
  display: flex; align-items: center; justify-content: center; gap: 24px; width: 340px; max-width: 100%; min-height: 60px;
  margin: 28px auto 0; padding: 16px 22px; border: 1px solid #181800; background: transparent;
  color: #181800; font-size: 15px; font-weight: 500; letter-spacing: .12em; line-height: 1.6; text-align: center; text-decoration: none;
  transition: color .2s, background .2s;
}
.dotcon-page .dc-button::after { content: ''; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.dotcon-page .dc-button:hover { color: #fff; background: #181800; }
.dotcon-page .dc-sources { margin-top: 24px; }


.dotcon-page footer .contact_box img { width: 100%; height: auto; }
.dotcon-page footer .bottom_box .inner { max-width: 1360px; padding-left: 0; padding-right: 0; }
.dotcon-page footer .bottom_box .inner .info_box .title span { display: block; margin: 14px 0 0; }
.dotcon-page header .sp_btn { appearance: none; -webkit-appearance: none; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.dotcon-page .dc-skip { position: fixed; top: 8px; left: 12px; z-index: 10001; padding: 12px 18px; transform: translateY(-180%); background: #fff; border: 1px solid #181800; color: #181800; font-size: 14px; line-height: 1.5; text-decoration: none; }
.dotcon-page .dc-skip:focus { transform: translateY(0); }
.dotcon-page a:focus-visible, .dotcon-page button:focus-visible { outline: 2px solid #181800; outline-offset: 5px; }
.dotcon-page footer .bottom_box a:focus-visible { outline-color: #fff; }
.dotcon-page.dc-menu-open { overflow: hidden; }

@media screen and (min-width:768px) and (max-width:1550px) {
  .dotcon-page header nav { height: calc(100vh - 120px); height: calc(100dvh - 120px); }
}
@media screen and (max-width:1550px) {
  .dotcon-page header nav { visibility: hidden; }
  .dotcon-page header nav.on { visibility: visible; }
}
@media screen and (min-width:768px) and (max-width:1359px) {
  .dotcon-page .dc-shell { padding-left: 60px; padding-right: 60px; }
  .dotcon-page .dotcon .title_box { max-width: calc(100% - 120px); }
  .dotcon-page .dc-intro { gap: 40px; }
  .dotcon-page .dc-intro h3 { font-size: 28px; }
  .dotcon-page .dc-case-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 22px; }
  .dotcon-page .dc-feature { padding-left: 20px; padding-right: 20px; }
 
}
@media screen and (min-width:768px) and (max-width:1099px) {
  .dotcon-page header { padding-left: 40px; padding-right: 40px; }
  .dotcon-page .dc-shell { padding-left: 40px; padding-right: 40px; }
  .dotcon-page .dotcon .title_box { max-width: calc(100% - 80px); }
  .dotcon-page .dc-intro { gap: 24px; }
  .dotcon-page .dc-intro h3 { font-size: 24px; letter-spacing: .07em; }
  .dotcon-page .dc-intro .dc-lead { font-size: 16px; }
  .dotcon-page .dc-nav a { padding: 16px; font-size: 13px; }
  .dotcon-page .dc-features { grid-template-columns: repeat(6,minmax(0,1fr)); padding: 28px; gap: 28px 0; }
  .dotcon-page .dc-feature { grid-column: span 2; padding: 0 20px; }
  .dotcon-page .dc-feature:nth-child(4) { border-left: 0; grid-column: span 3; }
  .dotcon-page .dc-feature:nth-child(5) { grid-column: span 3; }
  .dotcon-page .dc-why, .dotcon-page .dc-mechanism { gap: 32px; }
  .dotcon-page .dc-why h3 { font-size: 24px; letter-spacing: .08em; }
  .dotcon-page .dc-tech { gap: 16px; }
  .dotcon-page .dc-tech article { padding: 22px 18px; }
  .dotcon-page .dc-tech h5 { font-size: 16px; }
 
  .dotcon-page footer .contact_box { padding-left: 40px; padding-right: 40px; }
  .dotcon-page footer .contact_box ul li { padding-left: 30px; padding-right: 30px; }
  .dotcon-page footer .bottom_box { padding: 60px 40px 10px; }
  .dotcon-page footer .bottom_box .inner .info_box { float: none; width: 100%; }
  .dotcon-page footer .bottom_box .inner nav { float: none; width: 100%; margin-top: 40px; }
}
@media screen and (max-width:767px) {
  .dotcon-page .dc-shell { max-width: 600px; padding: 0 20px; }
  .dotcon-page .dc-section { margin-top: 56px; scroll-margin-top: calc(.54rem + 24px); }
  .dotcon-page .dc-heading { margin-bottom: 28px; padding-bottom: 12px; font-size: 20px; letter-spacing: .12em; line-height: 1.8; }
  .dotcon-page .dotcon p { font-size: 15px; line-height: 2; letter-spacing: .07em; }
  .dotcon-page .dotcon .title_box { margin-bottom: 24px; }
  .dotcon-page .dotcon .title_box h2.dc-title-logo { width: auto; margin-left: 20px; margin-right: 20px; padding: 34px 34px; justify-content: center; }
  .dotcon-page .dotcon .title_box h2.dc-title-logo img { max-width: 330px; margin: 0 auto; }
  .dotcon-page .dc-case-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 12px; }
  .dotcon-page .dotcon .dc-case-card figcaption { margin-top: 8px; font-size: 12px; letter-spacing: .05em; }
  .dotcon-page .dc-cases-note { margin-top: 18px; }
  .dotcon-page .dotcon .title_box::before { background-position: 63% 68%; }
  .dotcon-page .dotcon .dc-title-caption { position: static; margin: 0 20px; padding-bottom: 12px; text-align: center; font-size: 10px; }
  .dotcon-page .dc-intro { display: block; }
  .dotcon-page .dotcon .dc-kicker { margin-bottom: 14px; font-size: 12px; letter-spacing: .07em; }
  .dotcon-page .dc-intro h3 { margin-bottom: 20px; font-size: clamp(22px,6.1vw,29px); letter-spacing: .07em; line-height: 1.9; }
  .dotcon-page .dc-intro .dc-lead { margin-bottom: 12px; font-size: 16px; }
  .dotcon-page .dc-intro figure { max-width: 390px; padding: 0 8px; margin: 28px auto 0; }
  .dotcon-page .dc-intro figcaption { margin-top: 8px; text-align: center; }
  .dotcon-page .dc-nav { margin-top: 32px; }
  .dotcon-page .dc-nav ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dotcon-page .dc-nav li:nth-child(3) { border-left: 0; }
  .dotcon-page .dc-nav li:nth-child(n+3) { border-top: 1px solid #181800; }
  .dotcon-page .dc-nav a { min-height: 51px; padding: 14px; font-size: 13px; }
  .dotcon-page .dc-features { display: block; padding: 4px 22px; }
  .dotcon-page .dc-feature { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 14px; margin: 0; padding: 21px 0; border-left: 0; border-top: 1px solid #ccc; }
  .dotcon-page .dc-feature:first-child { border-top: 0; }
  .dotcon-page .dc-feature-no { grid-column: 1; grid-row: 1 / span 2; margin: 1px 0 0; font-size: 24px; line-height: 1.25; }
  .dotcon-page .dc-feature dt { grid-column: 2; margin-bottom: 5px; font-size: 18px; }
  .dotcon-page .dc-feature dd { grid-column: 2; font-size: 14px; }
  .dotcon-page .dc-comparison { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .dotcon-page .dc-comparison h4 { margin-bottom: 12px; font-size: 16px; letter-spacing: .06em; }
  .dotcon-page .dc-comparison figcaption { padding: 16px 10px; font-size: 13px; line-height: 1.9; }
  .dotcon-page .dc-comparison figcaption span + span::before { padding: 0 .1em; }
  .dotcon-page .dc-band { margin-top: 56px; padding: 44px 0; scroll-margin-top: calc(.54rem + 18px); }
  .dotcon-page .dc-why { display: block; margin-bottom: 40px; }
  .dotcon-page .dc-why h3 { margin-bottom: 28px; font-size: 23px; letter-spacing: .08em; line-height: 1.9; }
  .dotcon-page .dc-why figure { max-width: 460px; margin: 0 auto; padding: 24px 28px 18px; }
  .dotcon-page .dc-mechanism { display: block; }
  .dotcon-page .dc-mechanism figure { max-width: 460px; margin: 0 auto 32px; padding: 20px; }
  .dotcon-page .dc-mechanism figcaption { margin-top: 16px; }
  .dotcon-page .dc-steps li { grid-template-columns: 28px minmax(0,1fr); gap: 16px; margin-bottom: 22px; }
  .dotcon-page .dc-steps h5 { font-size: 18px; margin-bottom: 5px; }
  .dotcon-page .dc-steps p { font-size: 14px; }
  .dotcon-page .dc-tech { grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 32px; }
  .dotcon-page .dc-tech article { padding: 24px; }
  .dotcon-page .dc-tech h5 { margin-bottom: 10px; font-size: 17px; }
  .dotcon-page .dc-tech p { font-size: 14px; }
  .dotcon-page .dc-tech .dc-tech-value { font-size: 25px; }
  .dotcon-page .dc-storage { margin-top: 18px; }
  .dotcon-page .dc-storage th, .dotcon-page .dc-storage td { padding: 8px 0; }
  .dotcon-page .dc-performance { padding: 30px 18px; }
  .dotcon-page .dc-performance h4 { font-size: 19px; letter-spacing: .07em; }
  .dotcon-page .dotcon .dc-load-value { font-size: clamp(40px,11.8vw,60px); }
  .dotcon-page .dc-load-value .dc-load-dash { margin: 0 5px; }
  .dotcon-page .dotcon .dc-load-caption { font-size: 20px; margin-bottom: 20px; }
  .dotcon-page .dc-performance .dc-load-text { font-size: 14px; text-align: left; }
  .dotcon-page .dc-performance .dc-note { text-align: left; }
  .dotcon-page .dc-consult { margin-top: 56px; padding: 32px 22px; scroll-margin-top: calc(.54rem + 24px); }
  .dotcon-page .dc-consult h3 { font-size: 20px; letter-spacing: .08em; }
  .dotcon-page .dc-consult p { font-size: 14px; text-align: left; }
  .dotcon-page .dc-consult br.pc { display: none; }
  .dotcon-page .dc-button { font-size: 14px; letter-spacing: .06em; padding: 14px; gap: 14px; }
  .dotcon-page .dotcon .dc-note, .dotcon-page .dotcon figcaption { font-size: 11px; }
  .dotcon-page .dc-comparison figcaption { font-size: 13px; }
  
  .dotcon-page footer .bottom_box .inner { padding: 0; }
  .dotcon-page footer .bottom_box .inner .info_box .title span { margin: .12rem 0 0; }
}
@media screen and (max-width:359px) {
  .dotcon-page .dc-shell { padding-left: 16px; padding-right: 16px; }
  .dotcon-page .dc-intro h3 { font-size: 21px; letter-spacing: .045em; }
  .dotcon-page .dc-why h3 { font-size: 21px; letter-spacing: .05em; }
  .dotcon-page .dc-nav a { padding-left: 12px; padding-right: 12px; font-size: 12px; }
  .dotcon-page .dotcon .title_box h2.dc-title-logo { padding-left: 24px; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .dotcon-page *, .dotcon-page *::before, .dotcon-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  
  .dotcon-page .dotcon .title_box { padding-top: 0; margin-bottom: 28px; }
  .dotcon-page .dotcon .title_box::before { top: 0; height: 180px; }
  .dotcon-page .dotcon .title_box h2 { margin-top: 90px; padding-top: 40px; padding-bottom: 40px; }
  .dotcon-page .dotcon .dc-title-caption { display: none; }
  .dotcon-page .dc-shell { padding-left: 24px; padding-right: 24px; }
  .dotcon-page .dc-heading { break-after: avoid; }
  .dotcon-page figure, .dotcon-page .dc-performance, .dotcon-page .dc-tech article { break-inside: avoid; }
}
@media screen and (max-width:767px) {
  .dotcon-page .dc-feature { position: relative; display: block; padding: 21px 0 21px 44px; }
  .dotcon-page .dc-feature-no { position: absolute; top: 21px; left: 0; margin: 1px 0 0; }
}

.dotcon-page .dotcon .dc-vision { margin-top: 24px; font-size: 14px; letter-spacing: .12em; line-height: 1.9; }
.dotcon-page .dc-consult h3 span { white-space: nowrap; line-height: inherit; }
@media screen and (max-width:767px) {
  .dotcon-page .dotcon .dc-vision { margin-top: 20px; font-size: 13px; }
}
@media screen and (max-width:359px) {
  .dotcon-page .dc-consult h3 { font-size: 18px; letter-spacing: .02em; }
}