@charset "utf-8";
/* support.css
++++++++++++++++++++++++++++++++++++++++
* NOTE
++++++++++++++++++++++++++++++++++++++++
- Charset: utf-8
- Return code: LF
++++++++++++++++++++++++++++++++++++++++ */
/* base
++++++++++++++++++++++++++++++++++++++++ */
/*! web font 
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/*!
 * variables */
:root {

  /* font-weight */
  --value-fw-normal: 350;
  --value-fw-medium: 500;
  --value-fw-bold: 700;

  /* letter-spacing 継承設定 */
  /* オーバーライド値 */
  --value-lts-normal: normal;
  --value-lts-default: 0.025em;
  --value-lts-loose: 0.05em;

  /* font-family  */
  --value-ff-default: "Roboto", "Noto Sans JP", sans-serif;
  --value-ff-robot: "Roboto", sans-serif;
  --value-ff-noto: "Noto Sans JP", sans-serif;

  /* 継承用*/
  --base-lts: var(--value-lts-default);
}

.support-main {
  font-family: var(--value-ff-default);
  font-optical-sizing: auto;
  font-weight: var(--value-fw-normal);
  font-style: normal;

  margin-top: 0;
}

@media (max-width: 767.98px) {
  .support-main {
    padding-top: 72px;
  }
}
@media (min-width: 768px) {
  .support-main {
    padding-top: 40px;
  }
}

:where(.support-main) * {
  letter-spacing: var(--base-lts);
}


/* override
++++++++++++++++++++++++++++++++++++++++ */

.m-callout.-gray {
  border-radius: 8px;
  background-color: var(--color-gray-primary);
  box-shadow: none;
}


/* common
++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++ */

.support-call_panel {
  position: relative;
  display: block;

  margin: 0;
  padding: 24px;
  border-radius: 8px;
  border: solid 1px var(--color-gray-tertiary);
  background-color: var(--color-ui-blue-pale);
  text-align: center;

  touch-action: manipulation;
}

.support-call_panel > ._tel {
  grid-column: 2;
  grid-row: 2;
  display: block;
  min-height: 36px;
  margin: 0;
  padding: 0;
  font-family: var(--value-ff-robot);
  font-weight: var(--value-fw-bold);
  font-size: 2.8rem;

  color: var(--color-gray-quinary);
  line-height: 1;
  text-decoration: none;
}

.support-call_panel > ._tel > b {
  font-size: 3.6rem;
}
.support-call_panel > ._note {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  color: var(--color-gray-quaternary);
  font-size: 1.2rem;
  line-height: 1.5;
}

@media (hover: hover) {
  .support-call_panel a {
    pointer-events: none;
  }
}


/* index
++++++++++++++++++++++++++++++++++++++++ */

/* ++++++++++++++++++++ */
.support-indexnav {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}
.support-indexnav > li {
  display: contents;
}
.support-indexnav > li > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 96px;
  border: 1px solid var(--color-gray-tertiary);
  border-radius: 8px;
  background-color: #fff;
  font-weight: var(--value-fw-medium);
  text-align: center;
  text-decoration: none;
}
.support-indexnav > li > a::before {
  position: absolute;
  top: 50%;
  left: 24px;
  display: block;
  aspect-ratio: 1/1;
  width: 56px;
  margin-top: calc(56px / -2);
  background: no-repeat center/contain;
  content: "";
}
.support-indexnav > li:where(._idpass) > a::before {
  background-image: url(/corp/support/assets-support/images/icon-support_idpass.svg);
}
.support-indexnav > li:where(._pinreset) > a::before {
  background-image: url(/corp/support/assets-support/images/icon-support_pinreset.svg);
}
.support-indexnav > li:where(._nskin) > a::before {
  background-image: url(/corp/support/assets-support/images/icon-support_nskin.svg);
}
.support-indexnav > li:where(._tax) > a::before {
  background-image: url(/corp/support/assets-support/images/icon-support_tax.svg);
}
.support-indexnav > li:where(._call) > a::before {
  background-image: url(/corp/support/assets-support/images/icon-support_call.svg);
}
.support-indexnav > li:where(._tfrom) > a::before {
  background-image: url(/corp/support/assets-support/images/icon-support_tfrom.svg);
}
.support-indexnav > li:where(._voice) > a::before {
  background-image: url(/corp/support/assets-support/images/icon-support_voice.svg);
}
.support-indexnav > li > a::after {
  position: absolute;
  top: 50%;
  transform: rotate(270deg);
  display: block;
  width: 24px;
  margin-top: calc(24px / -2);
  aspect-ratio: 1/1;
  background: no-repeat center/contain;
  background-image: url(/assets/images/icon/link/icon-link-pagelink.svg);
  content: "";
}

@media (hover: hover) {
  .support-indexnav > li > a {
    transition: background-color 0.3s ease;
  }
  .support-indexnav > li > a:hover {
    background-color: #fff;
  }
}
@media (max-width: 767.98px) {
  .support-indexnav {
    grid-template-columns: 1fr;
    gap: 8px;
    font-size: 1.6rem;
  }
  .support-indexnav > li > a {
    min-height: 94px;
    padding-right: 52px;
  }
  .support-indexnav > li > a::after {
    right: 12px;
  }
}
@media (min-width: 768px) {
  .support-indexnav {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    font-size: 2rem;
  }
  .support-indexnav > li > a {
    min-height: 112px;
    padding-right: 68px;
  }
  .support-indexnav > li > a::after {
    right: 20px;
  }
}

/* ++++++++++++++++++++ */
.support-search {
  display: block;
  background-color: #fffae9;
}
.support-search > ._btn {
  margin: 0 auto;
  max-width: 408px;
}
.support-search > ._field {
  position: relative;
  display: flex;
}
.support-search > ._field > input {
  --m-input_basic-bdc: var(--color-gray-quaternary);
  padding-right: 64px;
  height: 50px;
}
.support-search > ._field > button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  border: 0;
  border-radius: 0 4px 4px 0;
  background-color: var(--color-gray-quaternary);
  overflow: hidden;
  white-space: nowrap;
  text-indent: 200%;
}

.support-search > ._field > button > i::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (hover: hover) {
  .support-search > ._field > button {
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .support-search > ._field > button:hover {
    background-color: var(--color-blue-secondary);
  }
}
@media (max-width: 767.98px) {
  .support-search {
    padding: 32px 16px;
  }
}
@media (min-width: 768px) {
  .support-search {
    padding: 32px 124px;
  }
}



/* inquiry
++++++++++++++++++++++++++++++++++++++++ */

/* コールセンター着信状況 ++++++++++++++++++++ */
.inquiry-cc_rate .maru {
  background-color:#ffeeee;
}
.inquiry-cc_rate .sankaku {
  background-color: #fdd3d3;
}

/* status list */
.inquiry-cc_rate ul {
  display: block;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.inquiry-cc_rate ul > li {
  display: flex;
  align-items: center;
  justify-content: start;
  margin: 0;
  padding: 0;
}
.inquiry-cc_rate ul > li > b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-weight: normal;
}
.inquiry-cc_rate ul > li > b.maru {
  background-color:#ffeeee;
}
.inquiry-cc_rate ul > li > b.sankaku {
  background-color: #fdd3d3;
}

@media (max-width: 767.98px) {
  .inquiry-cc_rate ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
@media (min-width: 768px) {
  .inquiry-cc_rate ul {
    display: flex;
    gap: 24px;
  }
}

/* table */
[id="cctable"] {
  margin-top: 24px;
  text-align: center;
}

[id="cctable"] tr:first-child th {
  background-color: var(--color-ui-blue-pale);
}
[id="cctable"] td:first-child {
  background-color: var(--color-gray-primary);
}

/* ++++++++++ */
.inquiry-cc_average ._average {
  display: grid;
}
.inquiry-cc_average ._average > dl {
  display: grid;
  grid-template-columns: 1fr 40%;
  margin: 0;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;

  padding: 0;
  border: 1px solid var(--color-gray-secondary);
}
.inquiry-cc_average ._average > dl > dt,
.inquiry-cc_average ._average > dl > dd {
  margin: 0;
  padding: 8px 16px;
}
.inquiry-cc_average ._average > dl > dt {
  background-color: var(--color-gray-primary);
}

@media (max-width: 767.98px) {
  .inquiry-cc_average ._average {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
@media (min-width: 768px) {
  .inquiry-cc_average ._average {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
  }
}

/* ++++++++++++++++++++ */
.inquiry-guidancelist {
  display: grid;
  margin: 8px 0;
  padding: 0;
  counter-reset: number 0;
  list-style-position: inside;
}
.inquiry-guidancelist > li {
  position: relative;
  display: block;
  padding: 0;
  padding-left: 1.8em;
}

.inquiry-guidancelist > li::before {
  position: absolute;
  left: 0;
  color: var(--color-blue-primary);
  counter-increment: number;
  content: counter(number) ".";
}

@media (max-width: 767.98px) {
  .inquiry-guidancelist {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
@media (min-width: 768px) {
  .inquiry-guidancelist {
    grid-template-columns: repeat(6, auto);
    gap: 24px;
  }
}