@charset "UTF-8";
/* !_breakpoint.scss */
:root {
  --bp-pcMax: 1360px;
  --bp-spMax: 743px;
}

.remote-support {
  /* !_reset.scss */
  padding-block-end: 8rem;
  overflow-wrap: anywhere;
  font-size: 1.4rem;
  line-height: 1.7142857143;
  word-break: normal;
  line-break: strict;
  /* !_remote-support */
}
.remote-support *, .remote-support *::before, .remote-support *::after {
  box-sizing: border-box;
}
.remote-support p, .remote-support figure, .remote-support blockquote, .remote-support dl, .remote-support dd {
  margin: 0;
}
.remote-support :where(ul[class], ol[class]) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.remote-support img, .remote-support picture, .remote-support video {
  display: block;
  width: 100%;
  max-width: fit-content;
  height: auto;
}
.remote-support small {
  font-size: 1.4rem;
  line-height: 1.7142857143;
}
.remote-support .mod-headingLv2 {
  margin-block: 0 4rem;
  padding-block-end: 1rem;
  border-bottom: solid 1px #d9d9d9;
}
.remote-support .mod-headingLv2 h2 {
  font-size: 2rem;
}
.remote-support .mod-headingLv3 h3 {
  font-size: 1.6rem;
}
.remote-support > section[class^=sec]:first-of-type {
  margin-block-start: 4rem;
}
.remote-support > section[class^=sec]:not(:first-of-type) {
  margin-block-start: 8rem;
}
.remote-support > section[class^=sec] .sec__container {
  padding-inline: 1rem;
}
.remote-support .sec01 .sec01__text {
  margin-block-start: 4rem;
}
.remote-support .sec01 .sec01__image {
  margin-block-start: 3.2rem;
}
.remote-support .sec01 .mod-headingLv3 {
  margin-block: 3.2rem 1.6rem;
}
.remote-support .sec01 .sec01__dest:not(:first-of-type) {
  margin-block-start: 2.4rem;
}
.remote-support .sec01 .sec01__destRow:has(.sec01__destItem) {
  display: grid;
  gap: 0.8rem;
  margin-block-start: 0.8rem;
}
.remote-support .sec01 .sec01__destTitle {
  display: flex;
  column-gap: 0.8rem;
  align-items: center;
  color: #0d2ea0;
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.6875;
  letter-spacing: 0.08em;
}
.remote-support .sec01 .sec01__destTitle::before {
  content: "";
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  background-image: url(/-/media/cojp/product/machine/remote-support/img/ico_check.png);
  background-size: cover;
}
.remote-support .sec01 .sec01__destItem {
  display: grid;
  place-content: center;
  padding-block: 2.4rem;
  border-radius: 0.4rem;
  background-color: #f2f2f2;
  font-weight: bold;
  letter-spacing: 0.08em;
}
.remote-support .sec02 .sec02__list {
  display: flex;
  flex-direction: column;
  row-gap: 3.2rem;
}
.remote-support .sec02 .sec02__listDesc {
  display: flex;
  height: calc(2lh + 3.2rem);
  column-gap: 0.8rem;
  align-items: center;
  position: relative;
  padding: 1.6rem;
  border-radius: 0.6rem;
  background-color: #797979;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.5714285714;
  letter-spacing: 0.06em;
}
.remote-support .sec02 .sec02__listDesc::before {
  content: "";
  display: inline-block;
  width: 4.5rem;
  height: 3.9rem;
  flex-shrink: 0;
  background-image: url(/-/media/cojp/product/machine/remote-support/img/ico_desc.png);
  background-size: cover;
}
.remote-support .sec02 .sec02__listDesc::after {
  content: "";
  width: 2.2rem;
  height: 2.1rem;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #797979;
}
.remote-support .sec02 .sec02__listTitle {
  display: flex;
  height: 6.2rem;
  column-gap: 1.6rem;
  align-items: center;
  margin-block-start: 0.4rem;
  background-color: #0d2ea0;
  color: #fff;
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
}
.remote-support .sec02 .sec02__listTitle::before {
  content: attr(data-num);
  display: grid;
  height: 100%;
  aspect-ratio: 1;
  place-content: center;
  background-color: #4863c1;
}
.remote-support .sec02 .sec02__listText {
  margin-block-start: 1.2rem;
}
.remote-support .sec02 .sec02__listImage {
  margin-block-start: 1.2rem;
}
.remote-support .sec02 .sec02__listInner {
  margin-block-start: 1.2rem;
}
.remote-support .sec02 .sec02__listInnerItem {
  margin-inline-start: 0.5em;
  text-indent: -0.5em;
}
.remote-support .sec02 .sec02__listInnerItem::before {
  content: "・";
  margin-inline-start: -0.5em;
}
.remote-support .sec02 .sec02__text {
  position: relative;
  margin-block-start: 4.4rem;
  padding-block-start: 1.6rem;
  color: #0d2ea0;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.6666666667;
  letter-spacing: 0.06em;
  text-align: center;
}
.remote-support .sec02 .sec02__text::before {
  content: "";
  width: 9rem;
  height: 2rem;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: currentColor;
}
.remote-support .sec03 .sec03__list {
  margin-block-start: 1.6rem;
}
.remote-support .sec03 .sec03__block {
  margin-block-start: 1.2rem;
  padding: 2rem;
  border: 1px solid #666;
}
.remote-support .sec03 .sec03__blockTitle {
  color: #0d2ea0;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.7222222222;
  letter-spacing: 0.08em;
}
.remote-support .sec03 .sec03__blockText {
	margin-block-start: 1.6rem;
}

.remote-support .sec04 h2 span {/*20250820 西岡追加*/
	color: #0d2ea0;
}

.remote-support .sec04 .sec04__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.remote-support .sec04 .sec04__listInner {
  display: grid;
  align-items: center;
  margin-block-start: 1.6rem;
  text-align: center;
}
.remote-support .sec04 .sec04__listInner.-col2 {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1.6rem;
}
.remote-support .sec04 .sec04__listInnerItem {
  line-height: 1.5;
}
.remote-support .sec04 .sec04__listNote,
.remote-support .sec04 .sec04__listNote-02 {
  display: block;
  text-align: center;
}
.remote-support .sec04 .sec04__note {
  display: block;
  margin-block-start: 3.2rem;
}
.remote-support .sec05 .sec05__table {
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.2857142857;
  text-align: center;
}
.remote-support .sec05 .sec05__table th, .remote-support .sec05 .sec05__table td {
  padding-block: 1rem;
}
.remote-support .sec05 .sec05__table th {
  background-color: #cdd4ec;
}
.remote-support .sec05 .sec05__table th:nth-of-type(2) {
  width: 25%;
}
.remote-support .sec05 .sec05__table td {
  background-color: #f2f2f2;
}
.remote-support .sec05 .sec05__table tr > td:not(:last-of-type) {
  padding-inline: 1rem;
}
.remote-support .sec05 .sec05__table tr > td:nth-last-of-type(2) {
  text-align: left;
}
.remote-support .sec05 .sec05__table tr:has(td:nth-of-type(3)) td:first-of-type {
  width: 20%;
}
.remote-support .sec05 .sec05__list {
  padding-block-start: 1.2rem;
}
.remote-support .sec06 .sec06__image:not(:first-of-type) {
  margin-block-start: 2rem;
}
.remote-support .sec06 .sec06__list {
  margin-block-start: 2rem;
}
.remote-support .sec06 .sec06__listItem small {
  font-size: 1.4rem;
  line-height: 1.5714285714;
}
@media (min-width: 744px) {
  .remote-support {
    line-height: 1.2857142857;
    /* !_remote-support */
  }
  .remote-support small {
    line-height: 1.2857142857;
  }
  .remote-support > section[class^=sec] .sec__container {
    padding-inline: 0;
  }
  .remote-support .sec01 .sec01__image {
    max-width: 71.9rem;
    margin-inline: auto;
    margin-block-start: 1.6rem;
  }
  .remote-support .sec01 .sec01__image > img {
    margin-inline: auto;
  }
  .remote-support .sec01 .mod-headingLv3 {
    margin-block: 1.6rem;
  }
  .remote-support .sec01 .sec01__destWrap {
    display: grid;
    grid-template-columns: 2fr 3fr;
    column-gap: min((64 - 16) * (var(--100vw) - 744px) / (1052 - 744) + 16px, 64px);
  }
  .remote-support .sec01 .sec01__dest:not(:first-of-type) {
    margin-block-start: 0;
  }
  .remote-support .sec01 .sec01__destRow:has(.sec01__destItem) {
    grid-auto-flow: column;
    gap: min((8 - 4) * (var(--100vw) - 744px) / (1052 - 744) + 4px, 8px);
  }
  .remote-support .sec01 .sec01__destRow:has(:not(:nth-of-type(3))) {
    grid-template-columns: 1fr 1fr;
  }
  .remote-support .sec01 .sec01__destRow:has(:nth-of-type(3)) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .remote-support .sec01 .sec01__destItem {
    height: 7.6rem;
    padding-inline: min(8 / 1052 * var(--100vw), 0.8rem);
    font-size: min((14 - 12) * (var(--100vw) - 744px) / (1052 - 744) + 12px, 14px);
    text-align: center;
  }
  .remote-support .sec02 .sec02__list {
    flex-direction: row;
    column-gap: min((24 - 8) * (var(--100vw) - 744px) / (1052 - 744) + 8px, 24px);
  }
  .remote-support .sec02 .sec02__listDesc {
    height: calc(2lh + 1.6rem);
    column-gap: 0.8rem;
    padding-inline: min(8 / 1052 * var(--100vw), 0.8rem) 0;
    padding-block: 0.8rem;
    font-size: clamp(1rem, 14 / 1052 * var(--100vw), 1.4rem);
  }
  .remote-support .sec02 .sec02__listDesc::before {
    width: min(45 / 1052 * var(--100vw), 4.5rem);
    height: min(39 / 1052 * var(--100vw), 3.9rem);
  }
  .remote-support .sec02 .sec02__listDesc::after {
    width: min(22 / 1052 * var(--100vw), 2.2rem);
    height: min(21 / 1052 * var(--100vw), 2.1rem);
    bottom: max(-2rem, -20 / 1052 * var(--100vw));
  }
  .remote-support .sec02 .sec02__listTitle {
    height: min(62 / 1052 * var(--100vw), 6.2rem);
    column-gap: min(16 / 1052 * var(--100vw), 1.6rem);
    font-size: clamp(1rem, 20 / 1052 * var(--100vw), 2rem);
  }
  .remote-support .sec02 .sec02__listText {
    margin-block-start: min(12 / 1052 * var(--100vw), 1.2rem);
    font-size: clamp(1rem, 14 / 1052 * var(--100vw), 1.4rem);
  }
  .remote-support .sec02 .sec02__listImage {
    margin-block-start: min(12 / 1052 * var(--100vw), 1.2rem);
  }
  .remote-support .sec02 .sec02__listInner {
    margin-block-start: min(12 / 1052 * var(--100vw), 1.2rem);
  }
  .remote-support .sec02 .sec02__listInnerItem {
    font-size: clamp(1rem, 14 / 1052 * var(--100vw), 1.4rem);
  }
  .remote-support .sec02 .sec02__text {
    margin-block-start: 4.2rem;
    padding-block-start: 1.8rem;
    font-size: 0;
  }
  .remote-support .sec02 .sec02__text > * {
    font-size: 2rem;
    line-height: 1.6;
  }
  .remote-support .sec02 .sec02__text::before {
    width: 8.6rem;
    height: 1.8rem;
  }
  .remote-support .sec03 .sec03__image {
    margin-block-start: 2.4rem;
  }
  .remote-support .sec03 .sec03__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: min(16 / 1052 * var(--100vw), 1.6rem);
  }
  .remote-support .sec03 .sec03__block {
    margin-block-start: 1.6rem;
    padding-inline: min(24 / 1052 * var(--100vw), 2.4rem);
    padding-block: 2rem;
  }
  .remote-support .sec04 .sec04__list {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: column;
    gap: min((32 - 0) * (var(--100vw) - 744px) / (1052 - 744) + 0px, 32px);
  }
  .remote-support .sec04 .sec04__listInner {
    row-gap: 0.4rem;
  }
  .remote-support .sec04 .sec04__listInner.-col2 {
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    column-gap: min((16 - 4) * (var(--100vw) - 744px) / (1052 - 744) + 4px, 16px);
    white-space: nowrap;
  }
  .remote-support .sec04 .sec04__listNote {
    margin-block-start: 0.4rem;
  }
  .remote-support .sec04 .sec04__listNote-02 {
    margin-block-start: 0.8rem;
  }
  .remote-support .sec04 .sec04__note {
    margin-block-start: 2.4rem;
  }
  .remote-support .sec05 .sec05__table th, .remote-support .sec05 .sec05__table td {
    padding-block: 1.6rem;
  }
  .remote-support .sec05 .sec05__table th {
    font-size: 1.6rem;
    line-height: 1.125;
  }
  .remote-support .sec05 .sec05__table tr > td:not(:last-of-type) {
    padding-inline: 1.6rem;
  }
  .remote-support .sec05 .sec05__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: min(16 / 1052 * var(--100vw), 1.6rem);
    padding-block-start: 1.6rem;
  }
  .remote-support .sec06 .sec06__image:not(:first-of-type) {
    margin-block-start: 0.8rem;
  }
  .remote-support .sec06 .sec06__list {
    margin-block-start: 1.6rem;
  }
  .remote-support .sec06 .sec06__listItem small {
    line-height: 0.7142857143;
  }
}
.main-img {
  margin: 0;
  background-color: #0d2ea0;
  text-align: center;
}

.st-contents {
  padding-inline: 1.6rem;
}

/*20250820 西岡追加　新規テーブルスタイル（マシナビ参考）-------------------------------------*/
.contents-bg .contents-box .head-text .table-area01 td {
  font-size: 14px;
  font-weight: 500;
}
.contents-bg .contents-box .head-text .table-area01 th {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}
.contents-bg .contents-box .head-text .table-area01 thead th {
  font-size: 14px;
  color: #FFF;
  line-height: 1.6;
}
.table-area01 {
  width: 100%;
  margin: 24px 0 10px 0;
}
.table-area01 h3 {
  margin-bottom: 20px !important;
  margin-top: 0 !important;
  padding: 0px !important;
  font-size: 20px;
  color: #59a1d9 !important;
  line-height: 1.5;
  border: none !important;
}
.table-area01 table {
  width: 100%;
  table-layout: auto;
}
.table-area01 tr th:first-child {
  width: auto;
}
.table-area01 tr {
  border-bottom: none;
}
.table-area01 thead th {
  text-align: center;
  background: #CDD4EC;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  white-space: nowrap;
}
.table-area01 tbody th {
  white-space: nowrap;
}

.table-area01 tr th:last-child, .table-area01 tr td:last-child {
  border-right: none;
}
.table-area01 th, .table-area01 td {
  padding: 8px 12px;
  text-align: left;
  background: #CDD4EC;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.table-area01 td {
  background: #F2F2F2;
  line-height: 1.6;
	font-size: 1.1em;
}
.table-area01 td div {
  font-size: 12px;
  color: #666;
  text-align: justify;
}
.table-area01 td a {
  color: #2282cc;
}
.table-area01 th span, .table-area01 td span {
  font-size: 12px;
  color: #59a1d9;
}


th.img-th {
	text-align: center;
	background: #F2F2F2;
}
th.img-th img {
    width: 80px;
    display: inline;
}

th.img-th span{
    padding:5px 5px 0 0;
    display:inline-block;
    color: #000 !important;
    font-size:2em !important;
}
.table-area01 table tr th:nth-of-type(3){
	background: #003988;
	color: #fff;
}
.table-area01 table tr td:nth-of-type(2){
	border-right: #003988 solid 2px;
	border-left: #003988 solid 2px;
	font-weight:bold;
}
.table-area01 table tr:last-of-type td:nth-of-type(2){
	border-bottom: #003988 solid 2px;
}

@media (min-width: 390px) and (max-width: 743px), not all and (min-width: 744px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
/* !_common.scss */
:root {
  --1vw: 1vw;
  --50vw: 50vw;
  --100vw: 100vw;
}

html {
  padding-bottom: env(safe-area-inset-bottom);
  font-size: 62.5%;
}
@media (min-width: 390px) and (max-width: 743px), not all and (min-width: 744px) {
  html {
    font-size: calc(10 / 390 * var(--100vw));
  }
}

body {
  font-size: 1.4em;
}

.dsp_ib {
  display: inline-block;
  font: inherit;
}

@media (min-width: 390px) and (max-width: 743px), not all and (min-width: 744px) {
  .dsp_pc {
    display: none !important;
  }
}

@media (min-width: 744px) {
  .dsp_sp {
    display: none !important;
  }
}

.fw-bold {
  font-weight: bold;
}/*# sourceMappingURL=remote-support.css.map */



/*20250820 西岡追加　新規テーブルスタイル（マシナビ参考）スマホ表現-------------------------------------*/
@media screen and (max-width: 900px) {
  .contents-bg .contents-box .head-text .table-area01 tbody th {
    font-size: 14px;
    color: #FFF;
    line-height: 1.6;
  }
  .table-area01 thead {
    display: none;
  }
	
  .table-area01 td{
	font-size: 1.1em;
	}
	
	
  .table-area01 td.nobr {
    white-space: wrap !important;
  }
  .table-area01 tr {
    background-color: unset;
    border-bottom: 6px solid #FFFFFF;
  }
  .table-area01 tr th:first-child {
    width: 100%;
    /* border-bottom: 1px solid #fff; */
  }
  .table-area01 th {
    background: #CDD4EC;
    padding: 8px 16px;
  }
	.table-area01 tbody th {
    white-space: normal;
  }
  .table-area01 th span {
    font-size: 12px;
    color: #bdd9f0;
  }
  /*　display: block;でテーブル要素の横並びを解除　*/
  .table-area01 th, .table-area01 td {
    display: block;
    width: 100%;
    border: 0;
  }

  .table-area01 td {
    border-bottom: 1px solid #fff;
  }

	
	.table-area01 td dl{
	white-space: wrap;
	display: grid;
    grid-template-columns: auto 1fr; /* 2カラムに分ける */
    gap:  0 0; /* カラム間のスペース */
}
  /*　縦に並べる　*/
  .table-area01 tbody tr td {
    display: flex;
    flex-direction: column;
  }
  .table-area01 td {
    padding: 16px;
    font-size: 14px;
  }
  /*　tdにつけている「data-label」の値を表示（ちなみに、data-以降は任意の名前です）*/
  .table-area01 tbody tr td::before {
    content: attr(data-label);
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 4px 0;
  }
  /*　thにつけている「data-label」の値を表示　*/
  .table-area01 tbody tr th::before {
    content: attr(data-label);
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    display: block;
  }
  .table-area01 tbody tr th::before {
    content: attr(data-title);
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    line-height: 2.4;
  }
  .table-area01 td div.table-list-box tr {
    border: none;
  }
  .table-area01 td div.table-list-box th {
    display: table-cell;
    padding: 4px 0 4px 4px;
    width: auto;
    white-space: normal;
  }
  .table-area01 td div.table-list-box td {
    display: table-cell;
    padding: 4px 4px 4px 0;
  }
  .table-area01 div.table-list-box02 tr {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: none;
    background: #ddd;
  }
  .table-area01 div.table-list-box02 th {
    border: none;
    padding: 4px 0 0 14px !important;
  }
  .table-area01 div.table-list-box02 td {
    border: none !important;
    padding: 0 0 4px 14px !important;
  }
  /*　縦に並べる　*/
  .table-area01 div.table-list-box02 tbody tr td {
    display: flex;
    flex-direction: column;
  }
	
	/* テーブル内でのリストを表的なレイアウトに */
.table-area01 td dl{
	white-space: normal;
	display: grid;
    grid-template-columns: auto 1fr; /* 2カラムに分ける */
    gap:  0 0; /* カラム間のスペース */
	margin: 8px 0 0 0;
}
.table-area01 td dl dt:first-child,
.table-area01 td dl dd:nth-child(2){
	border-top: none;
}
.table-area01 td dl dt,
.table-area01 td dl dd{
	border-top: 1px solid #ccc;
}
.table-area01 td dl dt{
	padding:  4px 8px 4px 0;
	border-left: none;
}
.table-area01 td dl dd{
	padding:  4px 0 4px 8px;
}
.table-area01 td dl dd.in-dl{
	padding: 0 0 0 8px;
}
	.table-area01 td dl dd.in-dl dl{
	white-space: normal;
	display: grid;
    grid-template-columns: auto; 
    gap: 0; /* カラム間のスペース */
		margin: 0;
}
	.table-area01 td dl dd.in-dl dl dt,
	.table-area01 td dl dd.in-dl dl dd{
	padding: 0;
}
	.table-area01 td dl dd.in-dl dl dt{
		padding: 4px 0 0 0;
	}
	.table-area01 td dl dd.in-dl dl dd{
	border: none;
		padding: 0 0 4px 0;
}

	

.table-area01 table tr td:nth-of-type(2){
	/* margin-bottom:30px; */
	border: none;
	/* font-weight: normal; */
}
.table-area01 tbody tr td:nth-of-type(2)::before{
	color:#0d2ea0;
	font-size: 1.15em;
}
.table-area01 tr th:first-child {display: table;width:100%;font-size: 14px;}

.table-area01 tr th:first-child img{
    padding:5px;
    max-width: 60px;
    display:table-cell;
}
.table-area01 tr th:first-child p{
    padding-left: 1em;
    width: 100%;
    display:table-cell;
    text-align: left;
    vertical-align:middle;
}
.table-area01 tr th.img-th{
	margin-top: 25px;
	padding-top:5px!important;
	padding-bottom:5px!important;
}
.table-area01 tr:first-child th.img-th{
	margin-top:0;

}

.table-area01 tbody tr td.sp-hidden{
    display:none; 
}
.table-area01 tbody tr td.sp-hidden::before{
    display:none; 
}

.table-area01 table tr:last-of-type td:nth-of-type(2){
    border:none;
}
}