@charset "UTF-8";
/* CSS Document */
/* mainArea */
.mainArea {
	background-image: url("../img/dx/main_bg.webp");
}
.mainArea .inner h1:before {
    content: "DX Policy";
}

/*dxArea01*/
.dxArea01 {
  background-color: #f0eeee;
  margin-top: 60px;
  .inner {
    padding: 80px 20px;
    h2 {
      font-size: 26px;
      font-weight: 700;
      line-height: 1.5;
      text-align: center;
    }
  }
}
  .dxArea01 .inner .txtBox {
    padding-top: 30px;
    text-align: center;
    font-size: 18px;
    p {
      line-height: 2;
    }
    ul {
      padding: 26px 0;
      li {
        font-weight: 700;
      }
    }
  }
.dxArea01 .inner .txtBox .dxBox	{
	max-width: 800px;
	margin: 20px auto;
	padding: 5px 1.5em;
	background-color: #FFF;
	border-radius: 10px;
}
/*dxArea02*/
.dxArea02 .inner {
	max-width: 800px;
	margin: 20px auto;
  padding: 80px 20px 60px;
  .h2Area {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    &::after {
      content: "Reason";
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      line-height: 1;
      color: #baa58c;
      font-weight: 700;
    }
    h2 {
      display: inline-block;
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
      padding: 0 20px 20px;
      position: relative;
      &::before {
        content: "/";
        position: absolute;
        top: 0;
        left: 0;
      }
      &::after {
        content: "/";
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
}
.dxArea02 .inner p {
  padding-top: 30px;
}
.dxArea02 .inner ul {
  padding: 40px 30px 20px;
  li {
    font-size: 16px;
    font-weight: 700;
    padding-left: 30px;
    line-height: 2;
    position: relative;
    &::before {
      content: "■";
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

/*dxArea03*/
.dxArea03 {
    background-color: #f7f7f7;
}
.dxArea03 .inner {
  padding: 60px 20px;
  .h2Area {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    &::after {
      content: "Policy";
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      line-height: 1;
      color: #baa58c;
      font-weight: 700;
    }
    h2 {
      display: inline-block;
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
      padding: 0 20px 20px;
      position: relative;
      &::before {
        content: "/";
        position: absolute;
        top: 0;
        left: 0;
      }
      &::after {
        content: "/";
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
}
.dxArea03 .inner ul {
  padding: 30px 0 50px;
  text-align: center;
  li {
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
  }
}
.dxArea03 .inner h3 {
  padding: 5px 10px;
  margin: 0 auto;
  text-align: center;
  background-color: #534741;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.dxArea03 .inner dl {
 	max-width: 900px;
	margin: 20px auto;
 padding-top: 30px;
  div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    padding: 20px 0;
    border-bottom: 1px dotted #baa58c;
    dt {
	background-color: #b59b8e;
	font-size: min(4vw, 16px);
	font-weight: 700;
	color: #FFF;
	padding: 10px;
    }
    dd {
		padding: 10px 15px;
      grid-column: span 3 / span 3;
      .txt {
        display: block;
      }
      .arrow {
        display: block;
        padding: 10px 0;
        font-weight: 700;
        font-size: 20px;
      }
    }
  }
}

/*dxArea04*/
.dxArea04 .inner {
	max-width: 900px;
	margin: 20px auto;
  padding: 60px 20px 120px;
  .h2Area {
    position: relative;
    text-align: center;
    &::after {
      content: "Prospect";
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      line-height: 1;
      color: #baa58c;
      font-weight: 700;
    }
    h2 {
      display: inline-block;
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
      padding: 0 20px 20px;
      position: relative;
      &::before {
        content: "/";
        position: absolute;
        top: 0;
        left: 0;
      }
      &::after {
        content: "/";
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
}
.dxArea04 .inner p {
	font-size: 16px;
    padding-top: 30px;
    span {
    display: block;
    padding-top: 10px;
  }
}

/*dxArea05*/
.dxArea05 .inner {
	max-width: 900px;
	margin: 20px auto;
  padding: 60px 20px 120px;
  .h2Area {
    position: relative;
    text-align: center;
    &::after {
      content: "Message";
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      line-height: 1;
      color: #baa58c;
      font-weight: 700;
    }
    h2 {
      display: inline-block;
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
      padding: 0 20px 20px;
      position: relative;
      &::before {
        content: "/";
        position: absolute;
        top: 0;
        left: 0;
      }
      &::after {
        content: "/";
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
}
.dxArea05 .inner p {
	font-size: 16px;
    padding-top: 30px;
    span {
    display: block;
    padding-top: 10px;
  }
}
.dxArea05 .inner p.txtRight {
	font-size: 16px;
    padding-top: 30px;
	text-align: right;
	display: block;
}


@media screen and (max-width: 1000px) {
/*dxArea01*/
  .dxArea01 {
    margin-top: 40px;
    .inner {
      padding: 60px 6vw;
      h2 {
        font-size: clamp(1.375rem, 1.257rem + 0.59vw, 1.625rem);
      }
    }
  }
  .dxArea01 .inner .txtBox {
    padding-top: 20px;
    font-size: clamp(0.875rem, 0.787rem + 0.44vw, 1.063rem);
    p {
      line-height: 1.6;
    }
    ul {
      padding: 18px 0;
    }
  }

/*dxArea02*/
  .dxArea02 .inner {
    padding: 60px 6vw 40px;
    p {
      padding-top: 20px;
    }
    ul {
      padding-top: 20px;
    }
  }

/*dxArea03*/
  .dxArea03 .inner {
    padding: 40px 6vw;
    ul {
      padding: 10px 0 30px;
      li {
        font-size: clamp(0.875rem, 0.846rem + 0.15vw, 0.938rem);
      }
    }
  }
  .dxArea03 .inner h3 {
    font-size: clamp(1.063rem, 1.033rem + 0.15vw, 1.125rem);
  }
  .dxArea03 .inner dl {
    padding-top: 10px;
    div {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(1, 1fr);
      padding: 10px 0;
      dd {
        grid-column: span 2 / span 2;
      }
    }
  }

/*dxArea04*/
  .dxArea04 .inner {
    padding: 40px 6vw 80px;
    p {
      padding-top: 20px;
    }
  }

/*dxArea05*/
  .dxArea05 .inner {
    padding: 40px 6vw 80px;
    p {
      padding-top: 20px;
    }
  }
}

@media screen and (max-width: 767px) {
/*dxArea01*/
  .dxArea01 .inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .dxArea01 .inner .txtBox {
    text-align: left;
    ul {
      padding: 18px 0;
    }
  }
  .dxArea01 .inner .txtBox .dxBox ul li {
	font-size: 16px;
	  padding: 5px 0;
  }

/*dxArea02*/
  .dxArea02 .inner {
    padding-top: 50px;
    padding-bottom: 30px;
    ul {
      padding-top: 10px;
      li {
      font-size: 16px;
      line-height: 1.2;
      margin-top: 10px;
      padding-left: 20px;
      }
    }
  }

/*dxArea03*/
  .dxArea03 .inner {
    padding-top: 30px;
    padding-bottom: 30px;
    ul {
      padding-bottom: 20px;
      text-align: left;
      li {
        line-height: 1.2;
        padding-bottom: 10px;
      }
    }
  }
  .dxArea03 .inner dl {
    padding-top: 10px;
    div {
      padding: 16px 0;
      display: block;
		text-align: center;
      dd {
        padding-top: 30px;
        width: 100%;
        .arrow {
          font-size: 14px;
        }
      }
    }
  }
	.dxArea03 .inner dl dt {
		border-radius: 25px;
	}
/*dxArea04*/
  .dxArea04 .inner {
    padding-top: 30px;
    padding-bottom: 60px;
  }
/*dxArea05*/
  .dxArea05 .inner {
    padding-top: 30px;
    padding-bottom: 60px;
  }
}