/*
 * インスペマート - オリジン準拠カスタムCSS
 */

:root {
  --color-black: #252525;
  --color-lower: #7e7e7e;
  --color-enabled: #b1b1b1;
  --color-disabled: #cbcbcb;
  --color-line: #e4e4e4;
  --color-bg: #f9f9f9;
  --color-primary: #2a7de1;
  --color-attention: #ff4438;
}

/* ベースリセット（オリジン準拠） */
html {
  font-size: 100%;
  line-height: 1.5;
  color: var(--color-black);
}
body {
  font-size: 1rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: var(--color-black);
  text-decoration: underline;
}
a:active, a:focus, a:hover {
  color: var(--color-black);
  text-decoration: none;
}

/* 共通タイポグラフィ: heading-sm (1.125rem/700/1.4 + レスポンシブ) */
.point-heading,
.faq-heading,
.about-inspection h4 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}
@media screen and (min-width: 480px) {
  .point-heading,
  .faq-heading,
  .about-inspection h4 {
    font-size: calc(1.125rem + ((1vw - 4.8px) * 0.4167));
  }
}
@media screen and (min-width: 960px) {
  .point-heading,
  .faq-heading,
  .about-inspection h4 {
    font-size: 1.25rem;
  }
}

/* 共通タイポグラフィ: heading-xs (1rem/700/1.5) */
.method-heading,
.flow-body h5,
.app-body h5,
.company-col .company-name,
.company-col .company-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ドロワーメニュー */
.drawer-nav {
  transform: translateX(100%);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body[data-drawer-open] .drawer-nav {
  transform: translateX(0);
  transition-duration: 235ms;
}

.drawer-cover {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transform: translateZ(0);
  transition: opacity 0.2s linear;
  visibility: hidden;
  opacity: 0;
  z-index: 20;
}
body[data-drawer-open] {
  overflow: hidden;
}

body[data-drawer-open] .drawer-cover {
  opacity: 1;
  visibility: visible;
}

/* 非表示 */
.hide {
  display: none;
}

/* アコーディオン */
.accordion-answer.hide {
  display: none;
}

/* セレクトボックス カスタムアイコン */
.custom-select {
  position: relative;
}
.custom-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background: white;
}
.custom-select .dropdown-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  fill: var(--color-black);
}

/* contentContainer見出し (heading3) */
.content-item-heading {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 24px;
  margin-bottom: 24px;
}
@media screen and (min-width: 480px) {
  .content-item-heading {
    font-size: calc(1.25rem + ((1vw - 4.8px) * 0.8333));
    margin-top: calc(24px + 8 * (100vw - 480px) / 480);
    margin-bottom: calc(24px + 8 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 600px) {
  .content-item-heading {
    margin-top: 0;
  }
}
@media screen and (min-width: 960px) {
  .content-item-heading {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 32px;
  }
}

/* contentContainer: @768px+ で2カラム（見出し左2/8, コンテンツ右6/8） */
@media screen and (min-width: 768px) {
  .content-container {
    display: flex;
    justify-content: space-between;
  }
  .content-item-heading {
    width: calc((100% - 40px) / 8 * 2 - 20px);
    flex-shrink: 0;
  }
  .content-item-body {
    width: calc((100% - 40px) / 8 * 6 + 20px);
  }
}

/* アンカーターゲット スクロールオフセット */
#company, #method, #flow, #faq, #topics {
  scroll-margin-top: 76px;
}

/* heading3下のSVGバー */
.heading-bar {
  display: block;
  margin-top: 16px;
  fill: var(--color-primary);
}
@media screen and (min-width: 480px) {
  .heading-bar {
    margin-top: calc(16px + 8 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .heading-bar {
    margin-top: 24px;
  }
}

/* ポイントアイコン */
.point-icon {
  max-width: 120px;
  max-height: 120px;
  width: 20%;
  height: 20%;
  fill: var(--color-black);
  display: block;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 600px) {
  .point-icon {
    width: 50%;
    height: 50%;
  }
}

/* ポイント番号 */
.point-num {
  display: block;
  fill: var(--color-disabled);
}

/* ポイント見出し */
.point-heading {
  margin-top: 24px;
  margin-bottom: 0;
  text-align: center;
}
.point-heading .tr {
  margin-right: -0.5em;
}
@media screen and (min-width: 480px) {
  .point-heading {
    margin-top: calc(24px + 8 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .point-heading {
    margin-top: 32px;
  }
}

/* 調査項目セクション heading */
.method-heading {
  margin-top: 0;
  margin-bottom: 0;
}
.method-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.method-header i {
  margin-right: 8px;
  position: relative;
  top: -2px;
}
.method-header svg {
  fill: var(--color-black);
}

/* 企業カード flex-row-reverse */
.company-card-inner {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-top: 16px;
}

/* 企業画像コンテナ */
.company-card-image {
  flex: 0 1 37.5%;
  max-width: 37.5%;
}
.company-card-image img {
  width: 100%;
  height: auto;
}

/* フローステップ */
.flow-step {
  display: flex;
  margin-top: 16px;
}
.flow-step:first-child {
  margin-top: 0;
}
.flow-num {
  flex: 0 0 auto;
  margin-right: 16px;
  font-weight: 700;
  color: var(--color-lower);
}
.flow-body h5 {
  margin-top: 0;
  margin-bottom: 0;
}
.flow-body p {
  margin-top: 0;
  margin-bottom: 0;
}
.flow-body p:first-child {
  margin-top: 0;
}
.flow-body p:last-child {
  margin-bottom: 0;
}
.flow-body .flow-caption {
  font-size: 0.875rem;
  line-height: 1.43;
  margin-top: 2px;
}

/* セクション マージン */
.home-main article,
.home-aside article {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 480px) {
  .home-main article,
  .home-aside article {
    margin-top: calc(48px + 16 * (100vw - 480px) / 480);
    margin-bottom: calc(48px + 16 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .home-main article,
  .home-aside article {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}
.home-main article:first-child {
  margin-top: 0;
}

/* SVGタイトルロゴ レスポンシブサイズ (オリジン: .home .about .catch 32→64px) */
.catch-svg {
  fill: var(--color-black);
  width: 100%;
  height: auto;
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (min-width: 480px) {
  .catch-svg {
    margin-top: 6.66667vw;
    margin-bottom: 6.66667vw;
  }
}
@media screen and (min-width: 960px) {
  .catch-svg {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}

/* 説明文 レスポンシブフォントサイズ (オリジン: display4 + .home .about .read) */
.read-text {
  font-size: 1rem;
  line-height: 1.5;
  text-align: justify;
  margin-top: 24px;
  margin-bottom: 32px;
}
@media screen and (min-width: 480px) {
  .read-text {
    font-size: calc(1rem + 1.66667vw - 8px);
    margin-top: calc(16px + 1.66667vw);
    margin-bottom: 6.66667vw;
  }
}
@media screen and (min-width: 960px) {
  .read-text {
    font-size: 1.5rem;
    margin-top: 32px;
    margin-bottom: 64px;
  }
}

/* グリッドレイアウト */
.grid-row2 {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 599px) {
  .grid-row2 .grid-col {
    width: 100%;
  }
  .grid-row2 .grid-col + .grid-col {
    margin-top: 24px;
  }
}
@media screen and (min-width: 600px) {
  .grid-row2 .grid-col {
    width: calc((100% - 40px) / 2);
    margin-right: 40px;
  }
  .grid-row2 .grid-col:nth-of-type(2n) {
    margin-right: 0;
  }
  .grid-row2 .grid-col:nth-of-type(1),
  .grid-row2 .grid-col:nth-of-type(2) {
    margin-top: 0;
  }
  .grid-row2 .grid-col:nth-of-type(n+3) {
    margin-top: 32px;
  }
}

/* 3列ポイントグリッド */
.grid-row3 {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 599px) {
  .grid-row3 .grid-col {
    width: 100%;
  }
  .grid-row3 .grid-col + .grid-col {
    margin-top: 24px;
  }
}
@media screen and (min-width: 600px) {
  .grid-row3 .grid-col {
    width: calc((100% - 80px) / 3);
    margin-right: 40px;
  }
  .grid-row3 .grid-col:nth-of-type(3n) {
    margin-right: 0;
  }
}
@media screen and (min-width: 768px) {
  .grid-row3 {
    flex-wrap: nowrap;
  }
  .grid-row3 .grid-col {
    margin-top: 0;
  }
}

/* contentInnerContainer: @768px+ で2カラム3/6のグリッド */
@media screen and (min-width: 768px) {
  .content-inner-row2 .grid-col {
    width: calc((100% - 40px) / 2);
    margin-right: 40px;
  }
  .content-inner-row2 .grid-col:nth-of-type(2n) {
    margin-right: 0;
  }
  .content-inner-row2 .grid-col:nth-of-type(1),
  .content-inner-row2 .grid-col:nth-of-type(2) {
    margin-top: 0;
  }
}

/* レスポンシブコンテナ幅 */
.site-container {
  margin-right: 16px;
  margin-left: 16px;
}
@media screen and (min-width: 600px) {
  .site-container {
    margin-right: 32px;
    margin-left: 32px;
  }
}
@media screen and (min-width: 1024px) {
  .site-container {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* 検索セクション レスポンシブ */
@media screen and (max-width: 599px) {
  .search-form-container {
    flex-wrap: wrap;
  }
  .search-form-container .search-btn {
    width: 100%;
    margin-top: 10px;
  }
}
@media screen and (min-width: 600px) {
  .search-form-container {
    flex-wrap: nowrap;
  }
  .search-form-container .custom-select:nth-of-type(2) {
    width: calc(100% - 236px);
  }
}

/* 検索セレクト border-radius・テキスト色 オリジン準拠 */
.custom-select select {
  border-radius: 2px;
  color: var(--color-brand-black);
}
.custom-select select.--placeholder {
  color: var(--color-disabled);
}
.custom-select select:hover,
.custom-select select:focus {
  border-color: var(--color-brand-black);
}
.custom-select select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-brand-black);
}

/* FAQ・ホームインスペクション共通マージン */
.faq-heading,
.about-inspection h4 {
  margin-top: 16px;
  margin-bottom: 16px;
}
@media screen and (min-width: 480px) {
  .faq-heading,
  .about-inspection h4 {
    margin-top: calc(8px + 1.66667vw);
    margin-bottom: calc(8px + 1.66667vw);
  }
}
@media screen and (min-width: 960px) {
  .faq-heading,
  .about-inspection h4 {
    margin-top: 24px;
    margin-bottom: 24px;
  }
}

/* FAQ accordion dt border */
.faq-dt {
  display: flex;
  align-items: flex-start;
  border-top: 1px solid var(--color-line);
  padding-top: 16px;
  margin-top: 16px;
  cursor: pointer;
}
.faq-dt:first-of-type {
  margin-top: 0;
}
.faq-dt-text {
  flex: 1 1 auto;
  margin-right: 16px;
}
.faq-dt-icon {
  flex: 0 0 24px;
}
.faq-dt-icon svg {
  fill: var(--color-black);
}
.faq-dd {
  margin-top: 16px;
  margin-right: 40px;
  margin-bottom: 16px;
  font-size: 0.875rem;
  line-height: 1.43;
}

/* ボタンスタイル */
.btn-contained {
  display: inline-block;
  border-radius: 2px;
  padding-right: 32px;
  padding-left: 32px;
  text-decoration: none;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-contained:hover,
.btn-contained:active,
.btn-contained:focus {
  opacity: 0.8;
}
.btn-contained.btn-medium {
  height: 48px;
  line-height: 48px;
}
.btn-contained.btn-primary {
  background: var(--color-primary);
  color: white;
}
.btn-contained.btn-primary:hover,
.btn-contained.btn-primary:active,
.btn-contained.btn-primary:focus {
  color: white;
}
.btn-contained.btn-black {
  background: var(--color-black);
  color: white;
}
.btn-contained.btn-black:hover,
.btn-contained.btn-black:active,
.btn-contained.btn-black:focus {
  color: white;
}
.btn-contained.btn-grey {
  background: var(--color-disabled);
  color: white;
}
.btn-contained.btn-grey:hover,
.btn-contained.btn-grey:active,
.btn-contained.btn-grey:focus {
  color: white;
}
.btn-contained:disabled {
  background: var(--color-disabled);
  color: white;
  pointer-events: none;
}

/* app紹介セクション */
.app-section {
  border-top: 1px solid var(--color-line);
  padding-top: 32px;
  padding-bottom: 32px;
  margin-bottom: 0 !important;
}
.app-container {
  display: flex;
}
.app-icon {
  flex: 0 0 80px;
  margin-right: 16px;
}
@media screen and (min-width: 600px) {
  .app-icon {
    margin-right: 32px;
  }
}
.app-body {
  flex: 1 1 auto;
}
.app-body h5 {
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--color-black);
}
.app-body p {
  margin-top: 0;
  margin-bottom: 0;
}

/* ホームインスペクションとは */
.about-inspection p {
  margin-top: 0;
  margin-bottom: 0;
}

/* moreLink */
.more-link {
  margin-top: 24px;
}
.more-link a {
  color: var(--color-enabled);
  text-decoration: none;
}
.more-link a:hover,
.more-link a:active,
.more-link a:focus {
  color: var(--color-black);
  text-decoration: none;
}

/* 企業カード col border-top */
.company-col {
  border-top: 1px solid var(--color-line);
  padding-top: 16px;
}
.company-col .company-name {
  color: var(--color-lower);
  margin-top: 0;
  margin-bottom: 8px;
}
.company-col .company-title {
  margin-top: 0;
  margin-bottom: 0;
}
.company-price {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.44;
  margin-top: 0;
  margin-bottom: 16px;
}
@media screen and (min-width: 480px) {
  .company-price {
    font-size: calc(1.5rem + ((1vw - 4.8px) * 2.5));
  }
}
@media screen and (min-width: 960px) {
  .company-price {
    font-size: 2.25rem;
  }
}
.company-price .price-unit {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.43;
  margin-left: 0.25em;
}

/* systemIcon */
.system-icon {
  fill: var(--color-black);
}
/* 検索ヘッダー・メソッドヘッダーのSVGはinline表示（オリジン準拠） */
.search-header-icon,
.method-header svg {
  display: inline;
}

/* リスト項目間のマージン */
.method-list li {
  margin-top: 4px;
}
.method-list li:first-child {
  margin-top: 0;
}

/* フッターリンク（グローバル a ルールのオーバーライド） */
footer a {
  color: white;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
/* フッター line-height オリジン準拠（text-sm の 1.25rem を上書き） */
footer p,
footer a {
  line-height: 1.5;
}

/* ========================================
   会社詳細ページ (CompanyDetail)
   ======================================== */

/* main/aside レイアウト */
.cd-main article,
.cd-aside article {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 480px) {
  .cd-main article,
  .cd-aside article {
    margin-top: calc(48px + 16 * (100vw - 480px) / 480);
    margin-bottom: calc(48px + 16 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 1024px) {
  .cd-main article,
  .cd-aside article {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}
.cd-main > article:first-child {
  margin-top: 0;
  margin-bottom: 0;
}
.cd-main > article:first-child > article:first-child {
  margin-top: 48px;
}
@media screen and (min-width: 480px) {
  .cd-main > article:first-child > article:first-child {
    margin-top: calc(48px + 16 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 1024px) {
  .cd-main > article:first-child > article:first-child {
    margin-top: 64px;
  }
}

/* catch セクション */
.cd-subtitle1 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-lower);
  margin-top: 0;
  margin-bottom: 8px;
}
.cd-heading2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.444;
  margin-top: 0;
  margin-bottom: 16px;
}
@media screen and (min-width: 480px) {
  .cd-heading2 {
    font-size: calc(1.5rem + ((1vw - 4.8px) * 2.5));
    margin-bottom: calc(16px + 8 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .cd-heading2 {
    font-size: 2.25rem;
    margin-bottom: 24px;
  }
}
.cd-heading4 {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0;
}
@media screen and (min-width: 480px) {
  .cd-heading4 {
    font-size: calc(1.125rem + ((1vw - 4.8px) * 0.4167));
  }
}
@media screen and (min-width: 960px) {
  .cd-heading4 {
    font-size: 1.25rem;
  }
}
.cd-cta-small-wrap {
  text-align: center;
}
.cd-btn-large {
  width: 100%;
  height: 60px;
  line-height: 60px;
  margin-top: 16px;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}
@media screen and (min-width: 600px) {
  .cd-general-container {
    display: flex;
  }
  .cd-heading4 {
    margin-right: 32px;
  }
  .cd-btn-large {
    margin-top: 0;
  }
  .cd-cta-small-wrap {
    flex-shrink: 0;
  }
}
@media screen and (min-width: 768px) {
  .cd-btn-large {
    width: auto;
  }
}

/* 写真グリッド (row4 gutter0) */
.cd-images {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
}
@media screen and (min-width: 480px) {
  .cd-images {
    margin-top: calc(16px + 8 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .cd-images {
    margin-top: 24px;
  }
}
.cd-image-col {
  margin-top: 0;
}
.cd-fit-image {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 599px) {
  .cd-image-col {
    width: 50%;
  }
  .cd-image-col:nth-child(n+5) {
    display: none;
  }
}
@media screen and (min-width: 600px) {
  .cd-image-col {
    width: 25%;
  }
}

/* 調査料金テーブル */
.cd-price-table {
  width: 100%;
}
.cd-price-table thead th {
  text-align: left;
  vertical-align: top;
  padding-top: 0;
  padding-bottom: 16px;
}
.cd-price-table thead th:nth-of-type(1) {
  width: 40%;
}
.cd-price-table thead th:nth-of-type(2) {
  width: 30%;
}
.cd-price-table thead th:nth-of-type(3) {
  text-align: right;
  width: 30%;
}
.cd-price-table tbody th,
.cd-price-table tbody td {
  border-top: 1px solid var(--color-line);
  padding-top: 16px;
  padding-bottom: 16px;
}
.cd-price-table tbody th {
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}
.cd-price-table tbody td:nth-of-type(2) {
  text-align: right;
}
@media screen and (min-width: 600px) {
  .cd-price-table thead th:nth-of-type(1) {
    width: 50%;
  }
  .cd-price-table thead th:nth-of-type(2) {
    width: 25%;
  }
  .cd-price-table thead th:nth-of-type(3) {
    width: 25%;
  }
}
.cd-small {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-black);
}
.cd-option {
  border-top: 1px solid var(--color-line);
  padding-top: 16px;
}
.cd-pre {
  white-space: pre-wrap;
  margin-top: 0;
  margin-bottom: 0;
}

/* 会社情報 dl/dt/dd */
.cd-dl {
  margin-top: 16px;
  margin-bottom: 16px;
}
.cd-dl:first-child {
  margin-top: 0;
}
.cd-dl dt {
  font-weight: 700;
}
.cd-dl dd p:first-child,
.cd-dl dd div:first-child {
  margin-top: 0;
}
.cd-dl dd p:last-child,
.cd-dl dd div:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 480px) {
  .cd-dl {
    display: flex;
  }
  .cd-dl dt {
    font-weight: 400;
    flex: 0 1 6em;
    margin-right: 2em;
    margin-bottom: 0;
  }
  .cd-dl dd {
    flex: 1 1 calc(100% - 8em);
  }
}

/* CTA xLargeボタン */
.cd-btn-xl-container {
  text-align: center;
}
.cd-btn-xl {
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
}
@media screen and (min-width: 480px) {
  .cd-btn-xl {
    font-size: calc(1.125rem + ((1vw - 4.8px) * 0.4167));
  }
}
@media screen and (min-width: 768px) {
  .cd-btn-xl {
    width: calc(((100% - 280px) / 8 * 4 + 120px) - 0.01px);
  }
}
@media screen and (min-width: 960px) {
  .cd-btn-xl {
    font-size: 1.25rem;
  }
}

/* aside セクション
   bodyがflex(sticky footer)のためasideはflex item=BFCとなり、
   子のmargin-topがasideを突き抜けて折り畳まれない。
   オリジン(非flex body)と一致させるため、first-childとh4のmargin-topを除去。
   font-size等は共通タイポグラフィ(.about-inspection h4)を継承。 */
.cd-aside > article:first-child {
  margin-top: 0;
}
.cd-aside .about-inspection h4,
.cl-aside .about-inspection h4 {
  margin-top: 0;
  margin-bottom: 16px;
}
@media screen and (min-width: 480px) {
  .cd-aside .about-inspection h4,
  .cl-aside .about-inspection h4 {
    margin-bottom: calc(8px + 1.66667vw);
  }
}
@media screen and (min-width: 960px) {
  .cd-aside .about-inspection h4,
  .cl-aside .about-inspection h4 {
    margin-bottom: 24px;
  }
}

/* ========================================
   企業検索ページ (CompanyList)
   ======================================== */

/* main article: オリジン _hack.scss 準拠
   - < 600px: margin-left/right: 16px (site-containerで対応済)
   - 600px+:  margin-left/right: 32px (site-containerで対応済)
   - 1024px+: width: 960px, margin: auto, margin-top: 64px
   flex bodyのためmargin collapseなし → 明示的に設定 */
.cl-company {
  margin-top: 48px;
  margin-bottom: 0;
}
@media screen and (min-width: 480px) {
  .cl-company {
    margin-top: calc(48px + 16 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .cl-company {
    margin-top: 64px;
  }
}

/* heading2: オリジン _hack.scss により margin-top: 0, margin-bottom は computed 64px */
.cl-heading2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.444;
  margin-top: 0;
  margin-bottom: 24px;
}
@media screen and (min-width: 480px) {
  .cl-heading2 {
    font-size: calc(1.5rem + ((1vw - 4.8px) * 2.5));
    margin-bottom: calc(24px + 40 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .cl-heading2 {
    font-size: 2.25rem;
    margin-bottom: 64px;
  }
}

.cl-heading3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 24px;
  margin-bottom: 24px;
}
@media screen and (min-width: 480px) {
  .cl-heading3 {
    font-size: calc(1.25rem + ((1vw - 4.8px) * 0.8333));
    margin-top: calc(24px + 8 * (100vw - 480px) / 480);
    margin-bottom: calc(24px + 8 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .cl-heading3 {
    font-size: 1.5rem;
    margin-top: 32px;
    margin-bottom: 32px;
  }
}

.cl-body p {
  margin-top: 0;
  margin-bottom: 0;
}

/* aside: オリジン aside article の responsive margin 準拠 */
.cl-aside article {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 480px) {
  .cl-aside article {
    margin-top: calc(48px + 16 * (100vw - 480px) / 480);
    margin-bottom: calc(48px + 16 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .cl-aside article {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}
/* ========================================
   利用規約ページ (Terms)
   ======================================== */

.terms article {
  margin-top: 48px;
  margin-bottom: 48px;
}
@media screen and (min-width: 480px) {
  .terms article {
    margin-top: calc(48px + 16 * (100vw - 480px) / 480);
    margin-bottom: calc(48px + 16 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .terms article {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}

.terms-heading2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.444;
  margin-bottom: 48px;
}
@media screen and (min-width: 480px) {
  .terms-heading2 {
    font-size: calc(1.5rem + ((1vw - 4.8px) * 2.5));
  }
}
@media screen and (min-width: 960px) {
  .terms-heading2 {
    font-size: 2.25rem;
  }
}

.terms-body p:first-child {
  margin-top: 0;
}
.terms-body p:last-child {
  margin-bottom: 0;
}

.terms dl {
  margin-top: 32px;
  margin-bottom: 32px;
}
.terms dt {
  margin-top: 16px;
  margin-bottom: 16px;
}
.terms ol {
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.terms dd > ol,
.terms ol > ol {
  margin-left: 32px;
}
.terms li {
  margin-top: 8px;
  margin-bottom: 8px;
}

.terms-list-decimal {
  list-style-type: decimal;
}

.terms-list-paren {
  list-style-type: none;
  counter-reset: paren;
}
.terms-list-paren li {
  display: flex;
  counter-increment: paren;
}
.terms-list-paren li::before {
  content: '(' counter(paren) ')';
  margin-right: 0.5em;
  flex-shrink: 0;
}

.terms-dates {
  list-style: none;
  padding: 0;
  margin-top: 64px;
  margin-bottom: 0;
}

/* ========================================
   申込フロー (Order Pages)
   ======================================== */

/* ステップインジケーター: Legacy .orderSteps 準拠 */
.orderSteps {
  margin-top: 32px;
  margin-right: 16px;
  margin-left: 16px;
}
@media screen and (min-width: 600px) {
  .orderSteps {
    margin-right: 32px;
    margin-left: 32px;
  }
}
@media screen and (min-width: 1024px) {
  .orderSteps {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
  }
}
.orderSteps .container {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}
.orderSteps .innerContainer {
  margin-right: 16px;
  color: var(--color-disabled);
}
.orderSteps .innerContainer:last-child {
  margin-right: 0;
}
.orderSteps .innerContainer.current,
.orderSteps .innerContainer.done {
  color: var(--color-lower);
}
.orderSteps .innerContainer .innerItem:nth-of-type(1) {
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .orderSteps .innerContainer {
    display: flex;
    align-items: center;
    margin-right: 0;
  }
  .orderSteps .innerContainer .innerItem:first-child {
    margin-right: 8px;
    margin-bottom: 0;
  }
  .orderSteps .innerContainer .innerItem:last-child {
    margin-right: 0;
  }
}

/* orderMain: Legacy main article + site-container準拠 */
.orderMain {
  margin-top: 48px;
  margin-bottom: 48px;
  margin-right: 16px;
  margin-left: 16px;
}
@media screen and (min-width: 480px) {
  .orderMain {
    margin-top: calc(48px + 16 * (100vw - 480px) / 480);
    margin-bottom: calc(48px + 16 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 600px) {
  .orderMain {
    margin-right: 32px;
    margin-left: 32px;
  }
}
@media screen and (min-width: 960px) {
  .orderMain {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}
@media screen and (min-width: 1024px) {
  .orderMain {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
  }
}

.orderMain section section {
  margin-top: 48px;
}
@media screen and (min-width: 480px) {
  .orderMain section section {
    margin-top: calc(48px + 16 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .orderMain section section {
    margin-top: 64px;
  }
}

/* heading2: レスポンシブフォントサイズ + マージン */
.orderMain .heading2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.444;
  margin-top: 24px;
  margin-bottom: 24px;
}
@media screen and (min-width: 480px) {
  .orderMain .heading2 {
    font-size: calc(1.5rem + ((1vw - 4.8px) * 2.5));
    margin-top: calc(24px + 8 * (100vw - 480px) / 480);
    margin-bottom: calc(24px + 8 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .orderMain .heading2 {
    font-size: 2.25rem;
    margin-top: 32px;
    margin-bottom: 32px;
  }
}

/* heading3 + SVGバー */
.orderMain .heading3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 24px;
  margin-bottom: 24px;
}
@media screen and (min-width: 480px) {
  .orderMain .heading3 {
    font-size: calc(1.25rem + ((1vw - 4.8px) * 0.8333));
    margin-top: calc(24px + 8 * (100vw - 480px) / 480);
    margin-bottom: calc(24px + 8 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .orderMain .heading3 {
    font-size: 1.5rem;
    margin-top: 32px;
    margin-bottom: 32px;
  }
}
.orderMain .heading3 svg {
  display: block;
  margin-top: 16px;
  fill: var(--color-primary);
}
@media screen and (min-width: 480px) {
  .orderMain .heading3 svg {
    margin-top: calc(16px + 8 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 600px) {
  .orderMain .heading3 {
    margin-top: 0;
  }
}
@media screen and (min-width: 960px) {
  .orderMain .heading3 svg {
    margin-top: 24px;
  }
}

/* generalContainer: フォーム行 */
.orderMain .generalContainer {
  margin-top: 16px;
}
.orderMain .generalContainer input,
.orderMain .generalContainer textarea,
.orderMain .generalContainer select {
  border: 1px solid var(--color-enabled);
  border-radius: 2px;
  padding: 0 16px;
  height: 48px;
  color: var(--color-black);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: white;
}
.orderMain .generalContainer textarea {
  height: auto;
  padding: 16px;
}
.orderMain .generalContainer input:hover,
.orderMain .generalContainer textarea:hover,
.orderMain .generalContainer select:hover {
  border-color: var(--color-black);
}
.orderMain .generalContainer input:focus,
.orderMain .generalContainer textarea:focus,
.orderMain .generalContainer select:focus {
  outline: none;
  border-color: var(--color-black);
  color: var(--color-black);
}
.orderMain .generalContainer input::placeholder {
  color: var(--color-disabled);
}

.orderMain .generalContainer .label,
.orderMain .generalContainer .empty {
  display: block;
}
.orderMain .generalContainer .label.must::after {
  content: '*';
  color: var(--color-attention);
  display: inline-block;
  margin-left: 4px;
}
.orderMain .generalContainer .label {
  margin-top: 32px;
  margin-bottom: 16px;
  font-weight: 700;
}
.orderMain .generalContainer .formSize1,
.orderMain .generalContainer .innerContainer {
  width: 100%;
  display: flex;
  align-items: center;
}
.orderMain .generalContainer .innerContainer.date {
  flex-wrap: wrap;
}
.orderMain .generalContainer .formSize2,
.orderMain .generalContainer .SingleDatePicker {
  width: calc(50% - 5px);
}
.orderMain .generalContainer .formSize2:first-child,
.orderMain .generalContainer .SingleDatePicker:first-child {
  margin-right: 10px;
}
.orderMain .generalContainer .selectContainer {
  position: relative;
}
.orderMain .generalContainer .selectContainer select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background: white;
  padding-right: 32px;
}
.orderMain .generalContainer .selectContainer .dropdownIcon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.orderMain .generalContainer .selectContainer .dropdownIcon svg {
  fill: var(--color-black);
}

/* radioContainer: ラジオボタン */
.orderMain .generalContainer .radioContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  align-items: center;
}
.orderMain .generalContainer .radioContainer label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 16px;
}
.orderMain .generalContainer .radioContainer input[type="radio"] {
  height: auto;
  padding: 0;
  margin-right: 4px;
  border: none;
}

/* checkboxContainer */
.orderMain .checkboxContainer {
  display: flex;
  align-items: center;
}
.orderMain .checkboxContainer input[type="checkbox"] {
  height: 24px;
  width: 24px;
  margin-right: 8px;
}
.orderMain .checkboxContainer .checkboxLabel {
  cursor: pointer;
}

/* sameCheckbox */
.orderMain .sameCheckbox {
  margin-top: 0;
  margin-bottom: 32px;
}

/* formSize3-6 */
.orderMain .formSize3 {
  width: calc(2em + 66px);
}
.orderMain .formSize4 {
  width: calc(1em + 66px);
}
.orderMain .between {
  margin-right: 8px;
  margin-left: 8px;
}

/* containedButtonContainer: ボタン行 */
.orderMain .containedButtonContainer {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
}
@media screen and (min-width: 480px) {
  .orderMain .containedButtonContainer {
    margin-top: calc(48px + 16 * (100vw - 480px) / 480);
  }
}
@media screen and (min-width: 960px) {
  .orderMain .containedButtonContainer {
    margin-top: 64px;
  }
}

/* containedButton: Legacy .button3.containedButton 準拠 */
.orderMain .containedButton {
  box-sizing: border-box;
  display: inline-block;
  border-radius: 2px;
  padding-right: 32px;
  padding-left: 32px;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}
.orderMain .containedButton:hover,
.orderMain .containedButton:active,
.orderMain .containedButton:focus {
  opacity: 0.8;
}
.orderMain .containedButton.xLarge {
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-size: 1.125rem;
}
@media screen and (min-width: 480px) {
  .orderMain .containedButton.xLarge {
    font-size: calc(1.125rem + ((1vw - 4.8px) * 0.4167));
  }
}
@media screen and (min-width: 960px) {
  .orderMain .containedButton.xLarge {
    font-size: 1.25rem;
  }
}
.orderMain .containedButton.primary {
  background: var(--color-primary);
  color: white;
}
.orderMain .containedButton.primary:hover,
.orderMain .containedButton.primary:active,
.orderMain .containedButton.primary:focus {
  color: white;
}
.orderMain .containedButton.enabled {
  background: var(--color-enabled);
  color: white;
}
.orderMain .containedButton.enabled:hover,
.orderMain .containedButton.enabled:active,
.orderMain .containedButton.enabled:focus {
  color: white;
}
.orderMain .containedButton.prevButton {
  width: calc(30% - 10px);
}
.orderMain .containedButton.nextButton {
  width: calc(70% - 10px);
}

/* totalPrice */
.orderMain .totalPrice {
  margin-top: 0;
}
.orderMain .totalPrice .innerContainer .innerItem:first-child {
  margin-top: 16px;
}

/* schedule */
.orderMain .schedule:nth-of-type(2) {
  margin-top: 32px;
}

/* consents */
.orderMain .consents {
  margin-top: 32px;
}
.orderMain .consents .checkbox {
  margin-top: 8px;
}
.orderMain .consents .checkboxContainer input[type='checkbox'] {
  height: 16px;
  width: 16px;
}
.orderMain .consents a {
  color: var(--color-black);
}

/* blockLevelElementContainer: pタグにブラウザデフォルト相当のマージンを復元 */
.orderMain .blockLevelElementContainer p {
  margin-top: 1em;
  margin-bottom: 1em;
}
.orderMain .blockLevelElementContainer p:first-child {
  margin-top: 0;
}
.orderMain .blockLevelElementContainer p:last-child {
  margin-bottom: 0;
}

/* ---- order2 固有 ---- */
.orderMain.order2 .section2,
.orderMain.order2 .section3 {
  border-top: 1px solid var(--color-line);
  padding-top: 16px;
  margin-top: 32px;
}

/* ---- order3 固有（確認画面）---- */
.orderMain.order3 .generalContainer {
  display: block;
}
.orderMain.order3 .generalContainer.containedButtonContainer {
  display: flex;
}
.orderMain.order3 .generalContainer dt {
  font-weight: 700;
  margin-top: 32px;
  margin-bottom: 16px;
}
.orderMain.order3 .schedule {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding-top: 32px;
  padding-bottom: 32px;
  margin-top: 32px;
  margin-bottom: 32px;
}
.orderMain.order3 .schedule .generalContainer:nth-of-type(1) {
  margin-top: 0;
  margin-bottom: 0;
}
.orderMain.order3 .schedule .generalContainer:nth-of-type(1) dt {
  margin-top: 0;
}
.orderMain.order3 .schedule .generalContainer:nth-of-type(2) {
  margin-top: 16px;
  margin-bottom: 0;
}

/* ---- order4 固有（完了画面）---- */
.orderMain.order4 .generalContainer {
  justify-content: center;
}
.orderMain.order4 .prevButton {
  width: 100%;
}

/* @600px+ デスクトップ: generalContainerが横並び */
@media screen and (min-width: 600px) {
  .orderMain .generalContainer {
    display: flex;
    align-items: center;
  }
  .orderMain .generalContainer .label,
  .orderMain .generalContainer .empty {
    width: 12em;
    flex-shrink: 0;
  }
  .orderMain .generalContainer .label {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
  }
  .orderMain .generalContainer .formSize1,
  .orderMain .generalContainer .innerContainer {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }
  .orderMain .containedButton,
  .orderMain .containedButton.prevButton,
  .orderMain .containedButton.nextButton {
    width: calc(50% - 10px);
  }

  /* order3 desktop */
  .orderMain.order3 .generalContainer {
    display: flex;
    align-items: flex-start;
  }
  .orderMain.order3 .generalContainer dt {
    font-weight: 400;
    flex: 0 1 8em;
    margin-top: 0;
    margin-right: 4em;
    margin-bottom: 0;
  }
  .orderMain.order3 .generalContainer dd {
    flex: 1 1 calc(100% - 12em);
  }

}