@charset 'utf-8';
/* 変数
*****************************************/
  :root {
    /* waveの高さ */
    --wave-height: 13.3vw;

    /* Spacing */
    --spacing-unit: 30px;
    --spacing-unit-sm: calc(var(--spacing-unit) * 2/3); /* 20px */
    --spacing-unit-lg: calc(var(--spacing-unit) * 2); /* 60px */

    --spacing-vertical: 90px;
    --spacing-vertical-sm: calc(var(--spacing-vertical) * 1/2); /* 45px */
    --spacing-vertical-lg: calc(var(--spacing-vertical) * 4/3); /* 120px */

    /* Fontsize */
    --font-size-12: 1.2rem;
    --font-size-14: 1.4rem;
    --font-size-16: 1.6rem; /* body */
    --font-size-18: 1.8rem;
    --font-size-20: 2.0rem;
    --font-size-22: 2.2rem;

    --font-size-28: 2.8rem; /* h3 */
    --font-size-30: 3.0rem; /* number */
    --font-size-32: 3.2rem; /* contTtl */
    --font-size-36: 3.6rem; /* h2 */
    --font-size-44: 4.4rem; /* h1 */
  }
  @media screen and (max-width: 2000px) and (min-width: 1200px) {
    :root {
      /* waveの高さ */
      --wave-height: 266px;
    }
  }
  @media screen and (max-width: 1199px) and (min-width: 768px) {
    :root {
      /* waveの高さ */
      --wave-height: 22.2vw;
    }
  }

/* 共通
*****************************************/
  html {
    visibility: hidden;
    overflow-x: hidden;
    font-size: 62.5%;
  }
  html.wf-active,
  html.loading-delay {
    visibility: visible;
  }
  body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", "Hiragino Sans",
      "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: var(--font-size-16);
    color: #38393c;
    font-weight: 400;
    overflow-y: auto;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  figure {
    margin: 0;
    padding: 0;
  }
  ul,
  ol {
    list-style: none;
  }
  img {
    vertical-align: bottom;
    width: 100%;
    height: auto;
  }
  svg {
    vertical-align: bottom;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  a.txt_link {
    text-decoration: underline;
    word-break: break-all;
    color: #0070bd;
  }
  .sp_only {
    display: none;
  }
  .fw_medium {
    font-weight: 500;
  }
  .fw_bold {
    font-weight: 700;
  }
  small, .f_small {
    font-size: 75%;
  }
  .txt_indent {
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.75;
  }
  .txt_indent::before,
  .txt_indent::after {
    display: none !important;
  }
  a.img_hover img {
    transition: all 0.3s;
  }
  .pdf_mark {
    position: relative;
  }
  .pdf_mark::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 26px;
    background-image: url('./../img/common/img_pdf.svg');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0px;
    right: -29px;
  }
  .btn {
    border-radius: 100vh;
    padding: 30px 15%;
    display: block;
    position: relative;
    text-align: center;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .btn, .btn span, .btn svg {
    transition: 0.6s;
  }
  .btn_arrow {
    position: absolute;
    display: block;
    width: 1em;
    height: 100%;
    top: 50%;
    right: 6.5%;
    transform: translateY(-50%);
  }
  .arrow_circle {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    display: inline-block;
    line-height: 1;
    text-align: center;
    margin-right: 10px;
    flex-shrink: 0;
    transition: all 0.6s;
  }
  .arrow_circle::before,
  .arrow_circle::after {
    display: none;
  }
  .arrow_in_circle {
    width: 45%;
    height: 100%;
  }
  .red_txt {
    color: #c30d23;
  }
  .-inBlock {
    display: inline-block;
  }

  @keyframes swingHorizontal {
    15% {
      transform: translateX(5px);
    }
    30% {
      transform: translateX(-5px);
    }
    50% {
      transform: translateX(3px);
    }
    65% {
      transform: translateX(-3px);
    }
    80% {
      transform: translateX(2px);
    }
    100% {
      transform: translateX(0);
    }
  }
  /* hover */
  @media screen and (min-width: 769px) {
    a.txt_link:hover {
      text-decoration: none;
    }
    a.img_hover:hover img {
      opacity: 0.7;
    }
    a.btn:hover {
      background: #999999;
    }
    a.btn:hover .btn_txt {
      color: #fff;
    }
    a.btn:hover .btn_arrow {
      fill: #fff;
    }
    .link_txt_box:hover .arrow_circle,
    .g_list_txt_box:hover .arrow_circle {
      animation: swingHorizontal 1s ease;
      animation-iteration-count: 1;
      background: #a2a2a2;
    }
    .link_txt_box:hover .arrow_in_circle,
    .g_list_txt_box:hover .arrow_in_circle {
      fill: #fff;
    }
  }
  /* 印刷用 */
  @media print {
    body {
      width: 1350px;
      -webkit-print-color-adjust: exact;
      transform: scale(0.8);
      -moz-transform: scale(0.8);
      -webkit-transform: scale(0.8);
      transform-origin: 0 0;
    }
    :root {
      /* waveの高さ */
      --wave-height: 230px;
     }
  }

/* 色
*****************************************/
  .bg_corp_blu {
    background: #0070bd;
  }
  .bg_wht {
    background: #fff;
  }
  .corp_blu {
    fill: #0070bd;
    color: #0070bd;
  }
  .wht {
    fill: #fff;
    color: #fff;
  }
  .pnk {
    fill: #EB79A2;
    color: #EB79A2;
  }
  .blu {
    fill: #2199DE;
    color: #2199DE;
  }
  .grn {
    fill: #1FB088;
    color: #1FB088;
  }

/* header
*****************************************/
  .header-ttl-warp {
    background: #C50D31;
    height: 24px;
  }
  .header-ttl {
    font-size: 0;
    display: block;
  }
  .header-ttl__img {
    display: block;
    max-width: 152px;
    margin-left: 16px;
    padding: 4px 0;
  }
  .header_area {
    position: relative;
    z-index: 10;
  }
  .header_inner {
    display: flex;
    height: 80px;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    width: 100%;
  }
  .global_nav {
    height: 100%;
  }
  .g_nav {
    display: flex;
    height: 100%;
  }
  .header_logo {
    line-height: 1;
    display: block;
    max-width: 150px;
    margin-left: 16px;
  }
  .g_nav_item::before,
  .g_nav_item::after {
    margin: 0;
  }
  .g_nav_item_link {
    --item_link--padding: 15px;
    font-size: 1.4rem;
    font-weight: 500;
    position: relative;
    display: flex;
    height: 100%;
    padding: 0 var(--item_link--padding);
    text-align: center;

    align-items: center;
    justify-content: center;
  }
  .g_nav_item:nth-last-child(3) .g_nav_item_link {
    padding-right: calc(var(--item_link--padding) * 2);
  }
  .g_nav_member,
  .g_nav_contact {
    position: relative;
    z-index: 1;
    padding: 0 calc(var(--item_link--padding) * 2);
    color: #fff;
    min-width: calc(6em + calc(var(--item_link--padding) * 4));
  }
  .g_nav_member {
    background: #c50d31;
  }
  .g_nav_contact {
    background: #0070bd;
  }
  .g_nav_item_link span,
  .nav_main_detail_item span,
  .nav_detail_list_item span {
    position: relative;
  }
  .g_nav_item_link span::after,
  .nav_main_detail_item span::after,
  .nav_detail_list_item span::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    content: '';
    transition: transform .3s;
    transform: scale(0, 1);
    transform-origin: center top;
    background: #0070bd;
  }
  .nav_main_detail_item span::after,
  .nav_detail_list_item span::after {
    background: #fff;
  }
  .g_nav_item_link span::after {
    bottom: -12px;
  }
  .nav_main_detail_item span::after {
    bottom: -5px;
  }
  .nav_detail_list_item span::after {
    bottom: -6px;
  }
  .g_nav_member::before,
  .g_nav_contact::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    transition: transform .5s;
    transform: scale(0, 1);
    transform-origin: left top;
  }
  .g_nav_contact::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    transition: transform .5s;
    transform: scale(0, 1);
    transform-origin: left top;
  }
  .item_detail {
    position: absolute;
    z-index: 10;
    top: 100%;
    right: 288px;
    visibility: hidden;
    width: 50%;
    min-width: 640px;
    padding: 40px 40px 60px;
    transition: opacity .5s ease;
    pointer-events: none;
    opacity: 0;
    color: #fff;
    background: #0070bd;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.15);

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .g_nav_item .overlay {
    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    pointer-events: none;
  }
  .item_detail .nav_main_ttl,
  .item_detail .nav_detail_list_item {
    position: relative;
    display: flex;

    align-items: center;
  }
  .item_detail .nav_main_ttl {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 45px;
  }
  .item_detail .nav_detail_list_item {
    font-size: 1.3rem;
  }
  .item_detail .nav_detail_list_item::before {
    margin: 0 8px 0 0;
    content: '\30fb';
  }
  .item_detail .sub_ttl {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    padding: 0 0 10px;
    color: #fff;
    border-bottom: 2px solid #fff;
  }
  .item_detail_list li + li {
    margin-top: 16px;
  }
  .item_detail_box + .item_detail_box {
    margin-top: 40px;
  }
  .item_detail_wrap {
    display: flex;

    justify-content: space-between;
  }
  .item_detail_block {
    width: 45%;
  }
  .g_nav_item_br {
    display: none;
  }
  @media screen and (max-width: 1350px) and (min-width: 1024px) {
    .g_nav_item_br {
      display: block;
    }
  }
  @media screen and (max-width: 1180px) {
    .g_nav_item_link {
      --item_link--padding: .84vw;
    }
    .item_detail {
      right: 237px;
    }
  }

  /* hover */
  @media screen and (min-width: 1024px) {
    a.g_nav_item_link:hover span::after,
    a.nav_main_detail_item span:hover::after,
    a.nav_detail_list_item span:hover::after {
      transform: scale(1, 1);
    }
    a.g_nav_member:hover::before,
    a.g_nav_contact:hover::before {
      transform: scale(1, 1);
      transform-origin: left top;
    }
    .g_nav_member::before,
    .g_nav_contact::before {
      background: #999;
    }
    .g_nav_item:hover .item_detail {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      z-index: 20;
    }
    .g_nav_item:hover .overlay {
      visibility: visible;
      opacity: 1;
    }
    a.g_nav_item_link:hover span {
      color: #0070bd;
    }
  }

  /* ハンバーガーメニュー */
  @media screen and (max-width: 1023px) {
    .g_nav_member_br {
      display: none;
    }
    .header_logo_wrap {
      width: 100%;
    }
    .main_area,
    .header_logo_wrap {
      transition: all .5s;
    }
    .main_area.open,
    .header_logo_wrap.open {
      transform: translateX(-70%);
    }
    .header_inner {
      height: 60px;
    }
    .header_logo {
      width: 28%;
      max-width: 120px;
      margin: 4px 0 0 10px;
    }
    .header-ttl__img {
      margin-left: 10px;
    }

    .global_nav {
      position: fixed;
      z-index: 10;
      top: 0;
      right: 0;
      right: -100%;
      visibility: hidden;
      overflow-y: auto;
      width: 70%;
      height: 100vh;
      transition: all .5s;
      opacity: 0;
      color: #fff;
      background: #0070bd;
    }
    .global_nav.open {
      right: 0;
      visibility: visible;
      transition-delay: 0s;
      opacity: 1;
    }
    .nav_overlay {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      display: block;
      width: 0;
      height: 0;
      content: '';
      transition: opacity .5s;
      opacity: 0;
      background-color: rgba(0, 0, 0, .5);
    }
    .nav_overlay.open {
      width: 100%;
      height: 100vh;
      opacity: 1;
    }
    .g_nav {
      display: block;
      margin-top: 84px;
    }
    .g_nav_item {
      border-top: 1px solid #b8d0e0;
    }
    .g_nav_item_link {
      font-size: 1.5rem;
      padding: 17px;
      text-align: left;

      justify-content: flex-start;
    }
    .g_nav_contact {
      color: #0070bd;
      background: #fff !important;
    }
    .g_nav_member_item,
    .g_nav_contact_item {
      border: none !important;
    }
    .nav_toggle {
      position: fixed;
      z-index: 20;
      top: 24px;
      right: 0;
      display: flex !important;
      width: 60px;
      height: 100%;
      height: 60px;
      background: #0070bd;

      justify-content: center;
      align-items: center;
    }
    .nav_toggle.menu_open {
      top: 0;
      width: 84px;
      height: 84px;
    }
    .nav_toggle.top-fixed {
      top: 0;
    }
    .burger_btn {
      position: relative;
      width: 15px;
      height: 15px;
    }
    .burger_line,
    .burger_btn::before,
    .burger_btn::after {
      position: absolute;
      display: block;
      width: 100%;
      height: 2px;
      content: '';
      transition: .3s ease-in-out;
      background: #fff;
    }
    .burger_line {
      top: 50%;
      transform: translateY(-50%);
    }
    .burger_btn::before {
      top: 0;
    }
    .burger_btn::after {
      bottom: 0;
    }
    .nav_toggle.menu_open {.
      background: transparent;
    }
    .nav_toggle.menu_open .burger_line {
      opacity: 0;
    }
    .nav_toggle.menu_open .burger_btn::before,
    .nav_toggle.menu_open .burger_btn::after {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    .nav_toggle.menu_open .burger_btn::before {
      transform: rotate(-45deg);
    }
    .nav_toggle.menu_open .burger_btn::after {
      transform: rotate(45deg);
    }

    .item_detail {
      position: static;
      visibility: visible;
      width: 100%;
      min-width: auto;
      padding: 0;
      pointer-events: auto;
      opacity: 1;
      background: rgba(11,21,59,.2);
      -webkit-box-shadow: none;
              box-shadow: none;
    }
    .item_detail .nav_main_ttl {
      display: none;
    }
    .item_detail_wrap {
      display: block;
      padding: 20px 20px 20px 17px;
    }
    .item_detail .sub_ttl {
      font-size: 1.5rem;
      font-weight: 500;
      margin-bottom: 10px;
      padding: 0 0 5px;
      border-width: 1px;
    }
    .item_detail_list li + li {
      margin-top: 8px;
    }
    .item_detail_block {
      width: 100%;
    }
    .item_detail_box + .item_detail_box {
      margin-top: 20px;
    }
    .item_detail_block + .item_detail_block {
      margin-top: 10px;
    }
    .item_detail .nav_detail_list_item {
      font-size: 1.4rem;
    }

  }

/* footer
*****************************************/
  .footer_area {
    position: relative;
  }
  .footer_area::before {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    content: '';
    width: 100%;
    padding-top: var(--wave-height);
    background-image: url('./../img/common/footer_pc.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: calc(var(--wave-height) * -1 + 1px);
  }
  .footer_con {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    background-color: #0070bd;
    padding: 20px 10px;
  }
  .footer_logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    max-width: 100px;
    width: 9%;
    margin: auto;
  }
  .f_copy {
    background: #38393c;
    padding: 10px;
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
  }
  .f_copy span {
    display: inline-block;
    padding: 0 10px;
  }
  .footer_nav {
    display: flex;
    justify-content: center;
    margin-top: 1%;
  }
  .footer_nav li {
    color: #d6e2ed;
    font-size: 1.4rem;
    position: relative;
  }
  .footer_nav li a {
    transition: 0.3s;
  }
  .footer_nav li a:hover {
    color: #fff;
  }
  .footer_nav li + li {
    margin-left: 25px;
    padding-left: 28px;
  }
  .footer_nav li + li::before {
    content: '\007C';
    display: block;
    position: absolute;
    left: 0;
  }

/* footer_nav 調整
*****************************************/
  @media screen and (max-width: 1099px) {
    .footer_nav {
      margin: auto;
      flex-wrap: wrap;
      max-width: 650px;
    }
    .footer_nav li {
      margin-top: 10px;
    }
  }
  @media screen and (max-width: 1099px) and (min-width: 768px) {
    .footer_nav li:nth-of-type(-n + 4) {
      margin-top: 0;
    }
    .footer_nav li:nth-of-type(5) {
      margin-left: 0;
      padding-left: 0;
    }
    .footer_nav li:nth-of-type(5)::before {
      display: none;
    }
  }
  @media screen and (max-width: 767px) {
    .footer_nav {
      line-height: 1.5;
    }
    .footer_nav li {
      font-size: 1.2rem;
      margin-top: 6px;
    }
    .footer_nav li:nth-of-type(-n + 2) {
      margin-top: 0;
    }
    .footer_nav li + li {
      margin-left: 14px;
      padding-left: 16px;
    }
    .footer_logo {
      width: 14%;
      top: 39%;
    }
  }
  @media screen and (max-width: 767px) and (min-width: 425px) {
    .footer_nav {
      max-width: 320px;
    }
    .footer_nav li:nth-of-type(3),
    .footer_nav li:nth-of-type(6) {
      margin-left: 0;
      padding-left: 0;
    }
    .footer_nav li:nth-of-type(3)::before,
    .footer_nav li:nth-of-type(6)::before {
      display: none;
    }
  }
  @media screen and (max-width: 424px) {
    .footer_nav {
      max-width: 260px;
    }
    .footer_nav li:nth-of-type(3),
    .footer_nav li:nth-of-type(5),
    .footer_nav li:nth-of-type(7) {
      margin-left: 0;
      padding-left: 0;
    }
    .footer_nav li:nth-of-type(3)::before,
    .footer_nav li:nth-of-type(5)::before,
    .footer_nav li:nth-of-type(7)::before {
      display: none;
    }
    .footer_logo {
      top: 29%;
    }
  }

/* section
*****************************************/
  @media screen and (min-width: 768px) {
    .main_area > :not(.wave_sec):first-child {
      margin-top: calc(var(--spacing-vertical) * 1/9);
    }
  }
  .sec {
    margin-top: calc(var(--spacing-vertical) * 1/3);
    margin-bottom: calc(var(--spacing-vertical) * 1/3);
    padding-top: var(--spacing-vertical);
    padding-bottom: var(--spacing-vertical);
  }
  .space_footer {
    margin-bottom: 0!important;
    padding-bottom: calc(var(--wave-height) + var(--spacing-vertical-lg) + var(--spacing-unit-sm))!important;
  }
  .wave_sec.space_footer::after {
    display: none;
  }
  .sec > :not(.wave_sec):first-child {
    margin-top: 0;
    padding-top: 0;
  }
  .main_area > :not(.wave_sec):last-child,
  .sec > :not(.wave_sec):last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .sec_inner {
    width: 90%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }
  .sec_vertical_inner {
    padding-top: var(--spacing-vertical);
    padding-bottom: var(--spacing-vertical);
  }
  .sec_cont_wrap {
    margin-top: var(--spacing-vertical);
    margin-bottom: var(--spacing-vertical);
  }
  .sec_vertical_inner + .sec_cont_wrap {
    margin-top: 0;
  }
  .sec_cont_wrap + .sec_vertical_inner {
    padding-top: 0;
  }
  .sec_cont_wrap > *:first-child,
  * > .sec_cont_wrap:first-child {
    margin-top: 0;
  }
  .sec_cont_wrap > *:last-child,
  * > .sec_cont_wrap:last-child {
    margin-bottom: 0;
  }
  .sec_top_ttl_box p {
    font-size: var(--font-size-20);
    font-weight: 500;
    padding-top: 2.2em;
  }
  .sec_ttl.h1 + p,
  .sec_ttl.h2 + p {
    padding-top: var(--spacing-vertical);
  }
  .sec_ttl {
    font-size: var(--font-size-44);
    font-weight: 700;
    text-align: center;
  }
  .sec_ttl .en {
    font-size: var(--font-size-16);
    display: block;
    font-weight: 500;
    margin-top: calc(var(--spacing-unit) * 1/4);
    color: #0070BD;
  }
  .bgclr_pnk .sec_ttl .en,
  .bgclr_blu .sec_ttl .en,
  .bgclr_grn .sec_ttl .en {
    color: #FFF;
  }
  .sec_ttl.h2 {
    font-size: var(--font-size-36);
  }
  .sec_ttl.h3 {
    font-size: var(--font-size-28);
  }
  .sec_ttl.contTtl {
    font-size: var(--font-size-32);
  }
  .sec_txt_box {
    margin: var(--spacing-vertical-sm) auto;
  }
  .sec_txt_box p {
    padding-top: 2.2em;
  }
  .sec_txt_box p:first-child {
    padding-top: 0;
  }
  .sec_img_box {
    margin: var(--spacing-vertical-sm) auto;
  }
  .sec_ttl + .sec_txt_box,
  .sec_ttl + .sec_img_box,
  .sec_ttl + .sec_table_box {
    padding-top: var(--spacing-unit);
    margin-top: 0;
  }
  .sec_btn_box {
    margin: auto;
    max-width: 460px;
  }

/* wave_sec
*****************************************/
  .wave_sec {
    position: relative;
    margin-top: var(--wave-height);
    margin-bottom: var(--wave-height);
    padding-top: var(--spacing-vertical);
    padding-bottom: var(--spacing-vertical);
  }
  .wave_sec::before,
  .wave_sec::after {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    content: '';
    width: 100%;
    padding-top: var(--wave-height);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .wave_sec::before {
    top: calc((var(--wave-height) * -1) + (var(--wave-height) * 23/133));
  }
  .wave_sec::after {
    bottom: calc(var(--wave-height) * -1 + (var(--wave-height) * 13/133));
  }
  .bgclr_pnk {
    background-color: #EB79A2;
    color: #fff;
  }
  .wave_sec.bgclr_pnk::before {
    background-image: url('./../img/common/sec_01_up_pc.svg');
  }
  .wave_sec.bgclr_pnk::after {
    background-image: url('./../img/common/sec_01_down_pc.svg');
  }
  .bgclr_blu {
    background-color: #2199DE;
    color: #fff;
  }
  .wave_sec.bgclr_blu::before {
    background-image: url('./../img/common/sec_02_up_pc.svg');
  }
  .wave_sec.bgclr_blu::after {
    background-image: url('./../img/common/sec_02_down_pc.svg');
  }
  .bgclr_grn {
    background-color: #1FB088;
    color: #fff;
  }
  .wave_sec.bgclr_grn::before {
    background-image: url('./../img/common/sec_03_up_pc.svg');
  }
  .wave_sec.bgclr_grn::after {
    background-image: url('./../img/common/sec_03_down_pc.svg');
  }
  .bgclr_gry {
    background-color: #E9EFF2;
  }
  .wave_sec.bgclr_gry::before {
    background-image: url('./../img/common/sec_04_up_pc.svg');
  }
  .wave_sec.bgclr_gry::after {
    background-image: url('./../img/common/sec_04_down_pc.svg');
  }
  @media screen and (max-width: 767px) {
    .wave_sec.bgclr_pnk::before {
      background-image: url('./../img/common/sec_01_up_sp.svg');
    }
    .wave_sec.bgclr_pnk::after {
      background-image: url('./../img/common/sec_01_down_sp.svg');
    }
    .wave_sec.bgclr_blu::before {
      background-image: url('./../img/common/sec_02_up_sp.svg');
    }
    .wave_sec.bgclr_blu::after {
      background-image: url('./../img/common/sec_02_down_sp.svg');
    }
    .wave_sec.bgclr_grn::before {
      background-image: url('./../img/common/sec_03_up_sp.svg');
    }
    .wave_sec.bgclr_grn::after {
      background-image: url('./../img/common/sec_03_down_sp.svg');
    }
    .wave_sec.bgclr_gry::before {
      background-image: url('./../img/common/sec_04_up_sp.svg');
    }
    .wave_sec.bgclr_gry::after {
      background-image: url('./../img/common/sec_04_down_sp.svg');
    }
  }

/* 下層ページ
*****************************************/
  .main_ttl_area {
    padding: var(--spacing-vertical) 0 calc(var(--spacing-vertical) * 7/9);
  }

/* SP
---------------------------------------------------------*/
@media screen and (max-width: 767px) {
/* 共通
*****************************************/
  .pc_only {
    display: none;
  }
  .sp_only {
    display: block;
  }
  .pdf_mark::after {
    width: 16px;
    height: 21px;
    right: -24px;
  }
  .btn {
    font-size: 1.5rem;
    padding: 22px 15%;
  }

/* footer
*****************************************/
  .footer_area::before {
    background-image: url('./../img/common/footer_sp.svg');
  }
  .footer_con {
    padding: 19% 10px 15px
  }
  .f_copy {
    line-height: 1.5;
    font-size: 1.1rem;
  }

/* 変数
*****************************************/
  :root {
    /* waveの高さ */
    --wave-height: 18.7vw;

    /* Spacing */
    --spacing-unit: 20px;
    --spacing-vertical: 52.5px;

    /* Fontsize */
    --font-size-12: 1.2rem;
    --font-size-14: 1.2rem;
    --font-size-16: 1.4rem;
    --font-size-18: 1.6rem;
    --font-size-20: 1.8rem;
    --font-size-22: 1.8rem;

    --font-size-28: 2.0rem;
    --font-size-30: 2.4rem;
    --font-size-32: 2.4rem;
    --font-size-36: 3.0rem;
    --font-size-44: 3.6rem;
  }

/* section
*****************************************/
  .sec {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--spacing-vertical-lg);
    padding-bottom: var(--spacing-vertical-sm);
  }
  .space_footer {
    padding-bottom: calc(var(--wave-height) + var(--spacing-vertical-lg) + var(--spacing-vertical-sm))!important;
  }
  .wave_sec {
    margin-top: calc(var(--wave-height));
    margin-bottom: calc(calc(var(--wave-height) - var(--spacing-vertical-sm)));
    padding-top: var(--spacing-vertical-lg);
    padding-bottom: var(--spacing-vertical);
  }
  .wave_sec::before {
    top: calc(var(--wave-height) * -1 + (var(--wave-height) * 50/133));
  }
  .sec_inner {
    width: 82vw;
  }

/* 下層ページ
*****************************************/
  .main_ttl_area {
    padding-top: var(--spacing-vertical-lg);
  }

}

/* スライド
*****************************************/
  .slick-slider {
    opacity: 0;
    transition: opacity .5s;
  }
  .slick-initialized {
    opacity: 1;
  }
  .slider .slick-slide {
    width: calc((980px - var(--spacing-unit-sm) * 2) / 2.5);
    transition: transform .8s;
    transform: scale(.75);
    transform-origin: 80% 50%;
    background: #fff;
  }
  .slider .slick-slide * {
    transition: opacity .8s;
    opacity: .5;
  }
  .slider .slick-center {
    transform: scale(1);
    transform-origin: 50% 50%;
  }
  .slider .slick-center * {
    opacity: 1;
  }
  .slider .slick-center + .slick-slide {
    transform-origin: 20% 50%;
  }
  .slider .slick-prev,
  .slider .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 17px;
    height: 17px;
    padding: 0;
    cursor: pointer;
    transform: translateY(-50%) rotate(45deg);
    border: solid #0070bd;
    border-width: 0 0 3px 3px;
    color: transparent;
    outline: none;
    background: transparent;
  }
  .slider .slick-prev {
    left: -25px;
  }
  .slider .slick-next {
    right: -25px;
    transform: translateY(-50%) rotate(225deg);
  }
  .slider .slick-prev:hover,
  .slider .slick-prev:focus,
  .slider .slick-next:hover,
  .slider .slick-next:focus {
    transition: opacity .6s;
    color: transparent;
    outline: none;
    background: transparent;
  }
  @media screen and (min-width: 768px) {
    .slider .slick-prev:hover,
    .slider .slick-next:hover {
      opacity: .7;
    }
  }
  @media screen and (max-width: 767px) {
    .slider .slick-slide {
      width: 60vw;
      max-width: 370px;
    }
    .slider .slick-prev,
    .slider .slick-next {
      width: 12px;
      height: 12px;
    }
    .slider .slick-prev {
      left: -17px;
    }
    .slider .slick-next {
      right: -17px;
    }
  }