@charset "UTF-8";
/* CSS Document */
/*============================================
responsive
============================================*/
.dx-wrap {
  font-size: 1.75rem;
  line-height: 1.65;
  max-width: 840px;
  margin: auto; }
  @media screen and (max-width: 767px) {
    .dx-wrap {
      font-size: 1.55rem;
      line-height: 1.5; } }
  .dx-wrap .inner {
    width: auto; }
    @media screen and (max-width: 767px) {
      .dx-wrap .inner {
        padding: 0 20px; } }
  .dx-wrap h2 {
    padding: 0;
    margin: 0;
    letter-spacing: 0; }
  .dx-wrap .dx-headline__txt {
    text-align: left;
    padding: 0 0 15px 0;
    margin: 0 0 30px 0;
    border-bottom: 3px solid #eee;
    position: relative;
    font-size: 2.8rem; }
    @media screen and (max-width: 767px) {
      .dx-wrap .dx-headline__txt {
        padding: 0 0 7px 0;
        margin: 0 0 15px 0;
        font-size: 2.0rem; } }
    .dx-wrap .dx-headline__txt::before {
      position: absolute;
      content: "";
      width: 120px;
      height: 3px;
      background: #5392b0;
      left: 0;
      bottom: -3px; }
      @media screen and (max-width: 767px) {
        .dx-wrap .dx-headline__txt::before {
          width: 60px; } }
  .dx-wrap .dx-headline {
    padding: 0 0 60px 0; }
    @media screen and (max-width: 767px) {
      .dx-wrap .dx-headline {
        padding: 0 0 40px 0; } }
    .dx-wrap .dx-headline .inbox {
      background: #f2f6fa;
      padding: 30px;
      max-width: 1200px !important;
      margin-left: -180px;
      margin-right: -180px; }
      @media screen and (max-width: 767px) {
        .dx-wrap .dx-headline .inbox {
          padding: 15px;
          margin-left: -20px;
          margin-right: -20px; } }
    .dx-wrap .dx-headline__btn {
      text-align: center;
      /* 中央寄せ */ }
      .dx-wrap .dx-headline__btn a {
        display: inline-block;
        position: relative;
        /* 疑似要素を配置するため */
        max-width: 840px;
        /* 横幅の最大値 */
        width: 100%;
        /* 親要素幅に応じて広がる */
        padding: 15px 20px;
        /* ボタン内の余白 */
        border-radius: 9999px;
        /* 角丸（円形に近い） */
        background-color: #F08B33;
        /* 背景色 */
        color: #fff;
        /* 文字色 */
        font-size: 1.8rem;
        /* 文字サイズ */
        font-weight: 600;
        /* 太字 */
        text-decoration: none;
        /* 下線削除 */
        text-align: center;
        /* テキスト中央寄せ */
        transition: background-color 0.3s;
        opacity: 1;
        /* 初期状態 */
        transition: opacity 0.6s ease;
        /* ゆっくり透過 */ }
        .dx-wrap .dx-headline__btn a:hover {
          opacity: 0.7;
          /* hover時に少し透過 */ }
        .dx-wrap .dx-headline__btn a::after {
          content: "➔";
          /* 好みで → ▶ ➡ などに変更可 */
          position: absolute;
          right: 20px;
          /* 右端からの余白 */
          top: 50%;
          transform: translateY(-50%);
          font-size: 1.4rem; }
        @media screen and (max-width: 767px) {
          .dx-wrap .dx-headline__btn a {
            font-size: 1.5rem; } }
    .dx-wrap .dx-headline__img {
      max-width: 1200px !important;
      margin-left: -180px;
      margin-right: -180px; }
      @media screen and (max-width: 767px) {
        .dx-wrap .dx-headline__img {
          margin-left: -20px;
          margin-right: -20px; } }
  .dx-wrap .dx-summary {
    padding: 0 0 60px 0; }
    @media screen and (max-width: 767px) {
      .dx-wrap .dx-summary {
        padding: 0 0 20px 0; } }
    .dx-wrap .dx-summary__box dl div {
      display: flex;
      justify-content: space-between;
      padding: 0 0 20px 0;
      margin: 0 0 20px 0;
      border-bottom: 1px dotted #ccc; }
      @media screen and (max-width: 767px) {
        .dx-wrap .dx-summary__box dl div {
          display: block;
          padding: 0 0 10px 0;
          margin: 0;
          border-bottom: none; } }
      .dx-wrap .dx-summary__box dl div dt {
        font-weight: 700;
        width: 10%; }
        @media screen and (max-width: 767px) {
          .dx-wrap .dx-summary__box dl div dt {
            width: 100%;
            padding: 10px;
            background: #f7f7f7; } }
      .dx-wrap .dx-summary__box dl div dd {
        width: 86%;
        padding: 0 0 0 4%;
        border-left: 1px dotted #e4e4e4; }
        @media screen and (max-width: 767px) {
          .dx-wrap .dx-summary__box dl div dd {
            width: 100%;
            padding: 10px;
            border-left: none; } }
        .dx-wrap .dx-summary__box dl div dd a {
          color: #253DCD; }
          .dx-wrap .dx-summary__box dl div dd a:hover {
            opacity: 0.7; }
      .dx-wrap .dx-summary__box dl div:last-of-type {
        margin: 0; }

.dx-feature {
  padding: 0 0 60px 0; }
  @media screen and (max-width: 767px) {
    .dx-feature {
      padding: 40px 0;
      background: rgba(247, 247, 247, 0.5); } }
  .dx-feature__box ul li {
    font-size: 1.75rem;
    line-height: 1.65;
    letter-spacing: 0;
    padding: 15px;
    margin: 0;
    border-bottom: 1px dotted #ccc;
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    @media screen and (max-width: 767px) {
      .dx-feature__box ul li {
        font-size: 1.55rem;
        line-height: 1.5;
        padding: 10px 5px;
        align-items: flex-start; } }
    .dx-feature__box ul li img {
      margin: 2px 8px 0 0; }
      @media screen and (max-width: 767px) {
        .dx-feature__box ul li img {
          margin: 0px 8px 0 0; } }
    .dx-feature__box ul li:nth-child(even) {
      background: rgba(247, 247, 247, 0.5); }
      @media screen and (max-width: 767px) {
        .dx-feature__box ul li:nth-child(even) {
          background: #fff; } }
    .dx-feature__box ul li:first-of-type {
      padding: 0 15px 20px 15px; }
      @media screen and (max-width: 767px) {
        .dx-feature__box ul li:first-of-type {
          padding: 0 5px 10px 5px; } }
    @media screen and (max-width: 767px) {
      .dx-feature__box ul li span:first-of-type {
        width: 10%; } }
    @media screen and (max-width: 767px) {
      .dx-feature__box ul li span:last-of-type {
        width: 90%; } }

.dx-effect {
  padding: 0 0 60px 0; }
  @media screen and (max-width: 767px) {
    .dx-effect {
      padding: 40px 0; } }
  .dx-effect__box ul li {
    font-size: 1.75rem;
    line-height: 1.65;
    letter-spacing: 0;
    padding: 15px;
    margin: 0;
    border-bottom: 1px dotted #ccc;
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    @media screen and (max-width: 767px) {
      .dx-effect__box ul li {
        font-size: 1.55rem;
        line-height: 1.5;
        padding: 10px 5px;
        align-items: flex-start; } }
    .dx-effect__box ul li img {
      margin: 2px 8px 0 0; }
      @media screen and (max-width: 767px) {
        .dx-effect__box ul li img {
          margin: 0px 8px 0 0; } }
    .dx-effect__box ul li:nth-child(even) {
      background: rgba(247, 247, 247, 0.5); }
    .dx-effect__box ul li:first-of-type {
      padding: 0 15px 20px 15px; }
      @media screen and (max-width: 767px) {
        .dx-effect__box ul li:first-of-type {
          padding: 0 5px 10px 5px; } }
    @media screen and (max-width: 767px) {
      .dx-effect__box ul li span:first-of-type {
        width: 10%; } }
    @media screen and (max-width: 767px) {
      .dx-effect__box ul li span:last-of-type {
        width: 90%; } }

.dx-program {
  padding: 0 0 30px 0; }
  @media screen and (max-width: 767px) {
    .dx-program {
      padding: 40px 0;
      background: rgba(247, 247, 247, 0.5); } }
  .dx-program__box__item {
    border: 1px solid #eee; }
    @media screen and (max-width: 767px) {
      .dx-program__box__item {
        background: #fff; } }
    .dx-program__box__item:not(:last-of-type) {
      margin: 0 0 30px 0; }
      @media screen and (max-width: 767px) {
        .dx-program__box__item:not(:last-of-type) {
          margin: 0 0 20px 0; } }
    .dx-program__box__item:last-of-type {
      position: relative; }
    .dx-program__box__item .inbox {
      position: absolute;
      right: 0;
      top: 0;
      background: #66B3C3;
      padding: 7px 15px; }
      @media screen and (max-width: 767px) {
        .dx-program__box__item .inbox {
          position: inherit;
          border-bottom: 1px solid #eee; } }
      .dx-program__box__item .inbox p {
        font-size: 1.75rem;
        color: #fff !important; }
        @media screen and (max-width: 767px) {
          .dx-program__box__item .inbox p {
            font-size: 1.4rem;
            text-align: center;
            font-weight: 700; } }
    .dx-program__box__item dl dt {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 1px solid #eee; }
      .dx-program__box__item dl dt span {
        box-sizing: content-box; }
        .dx-program__box__item dl dt span:first-of-type {
          padding: 7px 15px;
          width: 10%;
          background: #00437c;
          color: #fff;
          text-align: center; }
          @media screen and (max-width: 767px) {
            .dx-program__box__item dl dt span:first-of-type {
              width: 15%; } }
        .dx-program__box__item dl dt span:last-of-type {
          padding: 7px 15px;
          width: 90%;
          font-weight: 700;
          background: #f7f7f7; }
          @media screen and (max-width: 767px) {
            .dx-program__box__item dl dt span:last-of-type {
              width: 75%; } }
    .dx-program__box__item dl dd {
      text-align: center;
      font-size: 2.3rem;
      padding: 40px 20px;
      font-weight: 500; }
      @media screen and (max-width: 767px) {
        .dx-program__box__item dl dd {
          font-size: 1.7rem;
          padding: 20px 0; } }

.dx-copy {
  padding: 0 0 60px 0; }
  @media screen and (max-width: 767px) {
    .dx-copy {
      padding: 40px 0 20px 0; } }
  .dx-copy__box {
    background: url("../img/bg.jpg");
    padding: 30px;
    border: 1px solid #eee; }
    @media screen and (max-width: 767px) {
      .dx-copy__box {
        padding: 20px; } }
    .dx-copy__box p {
      font-size: 1.75rem;
      line-height: 1.9; }
      @media screen and (max-width: 767px) {
        .dx-copy__box p {
          font-size: 1.55rem;
          line-height: 1.8;
          text-align: justify; } }
      .dx-copy__box p:not(:last-of-type) {
        padding: 0 0 15px 0; }
      .dx-copy__box p strong {
        font-weight: 700; }

.dx-contact {
  padding: 0 0 60px 0; }
  @media screen and (max-width: 767px) {
    .dx-contact {
      padding: 0 0 40px 0; } }
  .dx-contact .inbox {
    background: #f2f6fa;
    padding: 30px; }
    @media screen and (max-width: 767px) {
      .dx-contact .inbox {
        padding: 15px; } }
  .dx-contact__btn {
    text-align: center;
    /* 中央寄せ */ }
    .dx-contact__btn a {
      display: inline-block;
      position: relative;
      /* 疑似要素を配置するため */
      max-width: 540px;
      /* 横幅の最大値 */
      width: 100%;
      /* 親要素幅に応じて広がる */
      padding: 15px 20px;
      /* ボタン内の余白 */
      border-radius: 9999px;
      /* 角丸（円形に近い） */
      background-color: #F08B33;
      /* 背景色 */
      color: #fff;
      /* 文字色 */
      font-size: 1.8rem;
      /* 文字サイズ */
      font-weight: 600;
      /* 太字 */
      text-decoration: none;
      /* 下線削除 */
      text-align: center;
      /* テキスト中央寄せ */
      transition: background-color 0.3s;
      opacity: 1;
      /* 初期状態 */
      transition: opacity 0.6s ease;
      /* ゆっくり透過 */ }
      .dx-contact__btn a:hover {
        opacity: 0.7;
        /* hover時に少し透過 */ }
      .dx-contact__btn a::after {
        content: "➔";
        /* 好みで → ▶ ➡ などに変更可 */
        position: absolute;
        right: 20px;
        /* 右端からの余白 */
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.4rem; }
      @media screen and (max-width: 767px) {
        .dx-contact__btn a {
          font-size: 1.5rem; } }
  .dx-contact__txt {
    padding: 30px 0 0 0;
    text-align: center; }
    @media screen and (max-width: 767px) {
      .dx-contact__txt {
        padding: 15px 0 0 0; } }
    .dx-contact__txt h3 {
      font-size: 2.0rem;
      letter-spacing: 0;
      padding: 15px 0;
      border-top: 1px solid #8FA6B9; }
      @media screen and (max-width: 767px) {
        .dx-contact__txt h3 {
          padding: 8px 0; } }
    .dx-contact__txt h4 {
      letter-spacing: 0;
      padding: 0;
      margin: 0; }
    .dx-contact__txt p:first-of-type {
      font-size: 4.2rem;
      font-weight: 900;
      line-height: 1.2; }
      @media screen and (max-width: 767px) {
        .dx-contact__txt p:first-of-type {
          font-size: 2.4rem; } }
      .dx-contact__txt p:first-of-type span {
        font-size: 1.7rem; }