@charset "UTF-8";

h2.manual-title {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 20px;
}

h2.manual-title:has( + .another-way) {
  margin-bottom: unset;
}

h3.os-title {
  color: var(--text-color-white);
  background-color: var(--primary-color);
  padding: 8px 16px;
}

h3.manual-title {
  position: relative;
  background: var(--bg-white-gray);
  padding: 0.5em 0em 0.5em 1em;
  line-height: 1.5;
}

/*
h3.manual-title::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 1.25em;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid currentColor;
    transition: transform .2s ease;
}
    */

h4.os-title {
  padding: 8px 16px 0;
}

:is(h4,h5).flow-title {
  border-left: 5px solid var(--primary-color);
  margin-top: 16px;
  padding-left: 8px;
  color: var(--primary-color);
}

h5.flow-title:has( + .paragraph) {
  margin-bottom: 0.75em;
}

#flow h5 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 60px 0 16px;
}

#flow h5#step1 {
  margin: 20px 0 16px;
}

#flow h5.flow-title.mt-30 {
  margin: 30px 0 16px;
}

.badge {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--secondary-color);
  color: var(--primary-color);
  font: normal 1.6rem/1 system-ui, -apple-system, "Noto Sans JP", sans-serif;
}

#flow ol:first-child {
  margin-top: 20px;
}

#flow ol li p.outlook-icon img {
  width: 86px;
  height: auto;
}

#flow ol li p.outlook2016-icon img {
  width: 500px;
  height: auto;
}

#flow ol li p.address-icon img {
  width: 400px;
  height: auto;
}

.another-way {
  background-color: var(--background-color);
  padding: 24px;
  margin-top: 8px;
}

.another-way ul li.another-way-title {
  color: #ff0000;
}

.another-way ul li.another-way-explanation {
  margin-bottom: 8px;
}

.another-way ul li img.capture02_1 {
  width: 500px;
}

.another-way ul li img.capture02_2 {
  width: 400px;
}

.another-way ul li.outlook-arrow {
  margin: 16px auto;
  text-align: center;
}

.wrapper-box {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--primary-color);
  background: var(--secondary-color);
}

.wrapper-box__title {
  color: var(--text-color-white);
  background: var(--primary-color);
  width: stretch;
  width: -moz-available; /* Firefox */
  width: -webkit-fill-available; /* Safari */
  text-align: center;
  padding: 1em 0;
}

.wrapper-box__inner {
  padding: 2em;
}

/* table */
/* First Column As Header Cell */

.dads-table__table {
  width: 660px;
}

@media screen and (min-width:768px){
  .another-way .dads-table__table {
    width: 100%;
  }
}

.dads-table__table tr:first-of-type:not(.txt-center)  > :is(th, td) {
  border-top: 1px solid var(--table-color-sell);
}

.dads-table__row-header {
  background-color: var(--table-color-bg);
  padding: 16px;
  border-left: 1px solid var(--table-color-sell);
}

.dads-table__row-data {
  padding: 16px;
}

.asterisk::before {
  content: "※";
  font-size: 1em;
}

/* First Row And Column As Header Cell */

.dads-table__col-empty {
  background-color: var(--table-color-bg);
  border-right: 1px solid var(--table-color-sell);
  border-left: 1px solid var(--table-color-sell);
}

.dads-table__col-header {
  padding: 16px 8px;
  background-color: var(--table-color-bg);
  border-right: 1px solid var(--table-color-sell);
  border-bottom: 1px solid var(--table-color-sell);
}

tr:first-of-type > :is(.dads-table__col-empty, .dads-table__col-header) {
  border-top: 1px solid var(--table-color-sell);
}

th {
  border-right: 1px solid var(--table-color-sell);
  border-bottom: 1px solid var(--table-color-sell);
}

td {
  padding: 16px 8px;
  border-right: 1px solid var(--table-color-sell);
  border-bottom: 1px solid var(--table-color-sell);
  background: var(--white);
}

.procedure {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  align-items: center;
  gap: 22px;
}

.rotate-90 {
  transform: rotate(0deg);
}

@media screen and (max-width: 768px) {
  .procedure {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .rotate-90 {
  transform: rotate(90deg);
  }

  img.mx-auto.my-8.rotate-90 {
    height: 40px;
    width: 24px;
  }
}