/*------------------------------------------------------------
common
------------------------------------------------------------*/
#correlation {
  font-size: 13px;
  overflow: hidden;
  background-color: #E8F8FE;
}

#correlation .pc-br {
  display: none;
}

#correlation .js-fadein {
  opacity: 0;
  transform: translate(0, 20px);
  transition-property: opacity, transform;
  transition-duration: 1s;
}

#correlation .scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

#correlation .text {
  margin-bottom: 2em;
}

#correlation .text:last-of-type {
  margin-bottom: 0;
}

#correlation .notes {
  display: inline-block;
  position: relative;
  margin-left: 1em;
}

#correlation .notes::before {
  content: '\0203B';
  display: block;
  position: absolute;
  top: 0;
  left: -1em;
}

#correlation .page-common {
  position: relative;
  padding-top: 100px;
}

#correlation .inner {
  width: calc(100% - 24px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0 25px;
}

@media print, screen and (min-width: 768px) {/* ---------- タブレット・PC以上 ---------- */
  #correlation {
    font-size: 16px;
  }
  
  #correlation .sp-br {
    display: none;
  }
  
  #correlation .pc-br {
    display: inline;
  }
  
  #correlation .page-common {
    padding-top: 200px;
  }
  
  #correlation .inner {
    padding: 80px 0 40px;
  }
}

/*------------------------------------------------------------
font
------------------------------------------------------------*/
#correlation .futura-medium,
#correlation .futura-demi {
  font-family: futura-pt, sans-serif;
  font-style: normal;
}

#correlation .futura-medium {
  font-weight: 500;
}

#correlation .futura-demi {
  font-weight: 600;
}

#correlation .color-blue {
  color: #0A4D98;
}

#correlation .color-navy {
  color: #0E3962;
}

#correlation .color-turquoise {
  color: #46ABBA;
}

#correlation .color-lime {
  color: #9FC150;
}

#correlation .color-cyan {
  color: #2781CC;
}

#correlation .color-green {
  color: #7FBD98;
}

#correlation .color-orange {
  color: #F37E5F;
}

/*------------------------------------------------------------
page title
------------------------------------------------------------*/
#correlation .page-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(450px / 2);
  padding: 0 12px;
  background: url("../images/correlation/page_title_bg_sp.jpg") no-repeat center center / cover;
  color: #ffffff;
}

#correlation .page-title [class*="letter"] {
  min-height: 0%;
  letter-spacing: .1em;
}

#correlation .page-title .letter-top {
  margin-bottom: 5px;
  font-family: futura-pt, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.3;
}

#correlation .page-title .letter-bottom {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

@media print, screen and (min-width: 768px) {/* ---------- タブレット・PC以上 ---------- */
  #correlation .page-title {
    height: 400px;
    background-image: url("../images/correlation/page_title_bg_pc.jpg");
  }
  
  #correlation .page-title .letter-top {
    margin-bottom: 10px;
    font-size: 20px;
  }
  
  #correlation .page-title .letter-bottom {
    font-size: 30px;
  }
}

/*------------------------------------------------------------
heading
------------------------------------------------------------*/
#correlation [class*="heading-style"] {
  position: relative;
}

#correlation [class*="heading-style"]::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 2px;
  transform: translateY(-50%);
  z-index: 0;
}

#correlation [class*="heading-style"].color-blue::before {
  background-color: #0A4D98;
}

#correlation [class*="heading-style"].color-navy::before {
  background-color: #0E3962;
}

#correlation [class*="heading-style"].color-turquoise::before {
  background-color: #46ABBA;
}

#correlation [class*="heading-style"].color-lime::before {
  background-color: #9FC150;
}

#correlation [class*="heading-style"].color-cyan::before {
  background-color: #2781CC;
}

#correlation [class*="heading-style"].color-green::before {
  background-color: #7FBD98;
}

#correlation [class*="heading-style"].color-orange::before {
  background-color: #F37E5F;
}

#correlation [class*="heading-style"] .letter {
  display: block;
  width: calc(100% - 90px);
  margin: 0 auto;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.33;
}

#correlation .heading-style01 {
  margin-bottom: 80px;
  opacity: 1;
  transform: translateX(-100%);
  transition: transform 1s;
}

#correlation .heading-style01.scroll-in {
  transform: translateX(0);
}

#correlation .heading-style02 {
  margin-bottom: 15px;
}

#correlation .correlation-heading {
  display: flex;
  flex-direction: column;
  width: calc(100% - 30px);
  margin: 0 auto;
}

#correlation .correlation-heading [class*="letter"] {
  display: inline-block;
}

#correlation .correlation-heading .letter-top {
  margin-bottom: -.5em;
  color: #E8F8FE;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .1em;
}

#correlation .correlation-heading .letter-bottom {
  position: relative;
  color: #0A4D98;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  z-index: 1;
}

@media print, screen and (min-width: 768px) {/* ---------- タブレット・PC以上 ---------- */
  #correlation .heading-style01 {
    margin-bottom: 160px;
  }
  
  #correlation .heading-style01::before {
    width: calc(((100% - 1200px) / 2) - 30px);
  }
  
  #correlation .heading-style01 .letter {
    width: calc(100% - 24px);
    max-width: 1200px;
    font-size: 40px;
  }
  
  #correlation .heading-style02 {
    margin-bottom: 30px;
  }
  
  #correlation .heading-style02::before {
    width: 50px;
  }
  
  #correlation .heading-style02 .letter {
    width: auto;
    padding-left: 70px;
    font-size: 28px;
  }
  
  #correlation .correlation-heading {
    width: calc(100% - 60px);
  }
  
  #correlation .correlation-heading .letter-top {
    font-size: 40px;
  }

  #correlation .correlation-heading .letter-bottom {
    font-size: 30px;
  }
}

/*------------------------------------------------------------
background
------------------------------------------------------------*/
#correlation [class*="page-bg-pattern"] {
  position: relative;
  opacity: 1;
  transform: translate(0, 0);
}

#correlation [class*="page-bg-pattern"]::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  transform: translate(0, 0);
  transition: opacity 1s;
  z-index: -1;
}

#correlation [class*="page-bg-pattern"].js-fadein::before {
  opacity: 0;
}

#correlation [class*="page-bg-pattern"].scroll-in::before {
  opacity: 1;
}

#correlation .page-bg-pattern01::before {
  width: 100%;
  background: #F7FBFD radial-gradient(#DCEAF3 12%, transparent 12%) repeat left top / 10px 10px;
}

#correlation .page-bg-pattern02::before {
  width: calc((460 / 750) * 100%);
  height: calc(330px / 2);
  background: #ffffff radial-gradient(#9EC5DE 12%, transparent 12%) repeat left top / 10px 10px;
}

@media print, screen and (min-width: 768px) {/* ---------- タブレット・PC以上 ---------- */
  #correlation .page-bg-pattern01::before {
    background: #F7FBFD radial-gradient(#DCEAF3 12%, transparent 12%) repeat left top / 20px 20px;
  }
  
  #correlation .page-bg-pattern02::before {
    width: calc((1230 / 1920) * 100%);
    height: 370px;
    background: #ffffff radial-gradient(#9EC5DE 12%, transparent 12%) repeat left top / 20px 20px;
  }
}

/*------------------------------------------------------------
button
------------------------------------------------------------*/
#correlation .page-big-button01 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 380px;
  padding: 20px 55px 20px 20px;
  border: solid 2px #32A1E8;
  box-shadow: 5px 5px 11px 0px rgba(50, 161, 232, .45);
  color: #32A1E8;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.33;
  text-align: center;
}

#correlation .page-big-button01::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  transition: background-color .3s;
  z-index: -1;
}

#correlation .page-big-button01:hover {
  text-decoration: none;
}

#correlation .page-big-button01 .arrow-icon {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 15px;
  height: 10px;
  fill: #32A1E8;
  transform: translate(0, -50%);
  z-index: 1;
}

#correlation .page-small-button01 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 3px 15px;
  box-shadow: 5px 5px 11px 0px rgba(153, 203, 235, .5);
  color: #ffffff;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
}

#correlation .page-small-button01::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #32A1E8;
  transition: background-color .3s;
  z-index: -1;
}

#correlation .page-small-button01:hover {
  text-decoration: none;
}

#correlation .page-small-button01[target="_blank"]::after {
  display: inline-block;
  margin-left: 5px;
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-size: 10px;
  font-weight: 600;
}

#correlation [class*="correlation-button"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: calc((150 / 700) * 100%);
  height: calc((150 / 1060) * 100%);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 5px;
  outline: none;
  background: none;
  font-family: 'Noto Sans JP', futura-pt, 'Century Gothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック体, YuGothic,"Yu Gothic Medium", 游ゴシック, 'Yu Gothic', メイリオ, Meiryo, sans-serif;
  text-align: center;
  cursor: pointer;
}

#correlation [class*="correlation-button"]::before,
#correlation [class*="correlation-button"]::after {
  content: "";
  display: block;
  position: absolute;
}

#correlation [class*="correlation-button"]::before {
  right: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  border-bottom-right-radius: 5px;
  background-color: #ffffff;
  opacity: .3;
  z-index: 0;
}

#correlation [class*="correlation-button"]::after {
  right: 5px;
  bottom: 5px;
  width: 5px;
  height: 5px;
  background: url("../images/correlation/correlation_icon_plus.svg") no-repeat left top / contain;
  z-index: 1;
}

#correlation .correlation-button01 {
  background-color: #E9A774;
}

#correlation .correlation-button02 {
  background-color: #9FC150;
}

#correlation .correlation-button03 {
  background-color: #32A1E8;
}

#correlation .correlation-button04 {
  background-color: #6DB48A;
}

#correlation .correlation-button05 {
  background-color: #46ABBA;
}

#correlation .correlation-button06 {
  background-color: #147CBF;
}

#correlation .correlation-button07 {
  background-color: #6372BF;
}

@media print, screen and (min-width: 768px) {/* ---------- タブレット・PC以上 ---------- */
  #correlation .page-big-button01 {
    padding-right: 90px;
    box-shadow: 10px 10px 22px 0px rgba(50, 161, 232, .45);
    font-size: 20px;
  }
  
  #correlation .page-big-button01:hover::before {
    background-color: #E8F8FE;
  }

  #correlation .page-big-button01:hover .arrow-icon {
    animation: button-item .5s cubic-bezier(.33, 1, .68, 1);
  }
  
  #correlation .page-small-button01 {
    padding: 5px 25px;
    box-shadow: 10px 10px 22px 0px rgba(153, 203, 235, .5);
    font-size: 18px;
  }

  #correlation .page-small-button01:hover::before {
    background-color: #147CBF;
  }
  
  #correlation [class*="correlation-button"]::before {
    width: 20px;
    height: 20px;
    border-bottom-right-radius: 10px;
  }
  
  #correlation [class*="correlation-button"]::after {
    right: 6px;
    bottom: 6px;
    width: 8px;
    height: 8px;
  }
}

@keyframes button-item {
  0% {
    transform: translate(0, -50%);
    opacity: 1
  }
  50% {
    transform: translate(1rem, -50%);
    opacity: 0
  }
  51% {
    transform: translate(-1rem, -50%);
    opacity: 0
  }
  100% {
    transform: translate(0, -50%);
    opacity: 1
  }
}

/*------------------------------------------------------------
tabular
------------------------------------------------------------*/
#correlation .page-tabular-title,
#correlation .page-tabular-text {
  position: relative;
  padding: 0 12px;
  line-height: 1.66;
}

#correlation .page-tabular-title::before,
#correlation .page-tabular-text::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 20px;
  height: 1px;
  background-color: #0A4D98;
  z-index: 0;
}

#correlation .page-tabular-title {
  margin-bottom: 10px;
  padding-top: 15px;
  font-weight: 700;
}

#correlation .page-tabular-title::before {
  display: none;
}

#correlation .page-tabular-title:first-of-type {
  padding-top: 0;
}

#correlation .page-tabular-text {
  padding-bottom: 10px;
  border-bottom: solid 1px #F5F5F5;
  font-weight: 500;
}

@media print, screen and (min-width: 768px) {/* ---------- タブレット・PC以上 ---------- */
  #correlation .page-tabular {
    display: flex;
    flex-wrap: wrap;
  }
  
  #correlation .page-tabular-title,
  #correlation .page-tabular-text {
    padding: 36px 48px 24px 48px;
    font-size: 18px;
  }
  
  #correlation .page-tabular-title {
    width: 210px;
    margin-bottom: 0;
    border-bottom: solid 2px #F5F5F5;
    font-weight: 500;
  }
  
  #correlation .page-tabular-title::before {
    display: block;
    bottom: -2px;
    width: 40px;
    height: 2px;
  }

  #correlation .page-tabular-text {
    width: calc(100% - 210px);
    padding-left: 0;
    border-bottom-width: 2px;
  }

  #correlation .page-tabular-text::before {
    display: none;
  }
  
  #correlation .page-tabular-title:first-of-type + .page-tabular-text {
    padding-top: 0;
  }
}

/*------------------------------------------------------------
path
------------------------------------------------------------*/
#correlation [class*="page-path"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 1s;
  z-index: 1;
}

#correlation [class*="page-path"] .path-inner {
  display: flex;
}

#correlation [class*="page-path"] .path-item {
  position: relative;
  width: 100%;
  height: auto;
  padding-right: 100px;
}

#correlation [class*="page-path"] .path-item.active {
  animation-name: path-item-loop;
  animation-duration: 60s;
  animation-delay: -40s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#correlation [class*="page-path"] .path-item.active:first-of-type {
  animation-name: path-item-loop-first;
  animation-delay: 0s;
}

#correlation [class*="page-path"] .path-item.active:last-of-type {
  animation-name: path-item-loop-last;
  animation-delay: -20s;
}

#correlation [class*="page-path"] svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: #F5F5F5;
  stroke-width: 2px;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  z-index: 1;
}

#correlation [class*="page-path"].scroll-in svg {
  animation: line-animation 3s ease-in 0s forwards;
}

@media print, screen and (min-width: 768px) {/* ---------- タブレット・PC以上 ---------- */
  #correlation [class*="page-path"] {
    width: 100%;
  }
  
  #correlation [class*="page-path"] .path-inner {
    display: block;
  }
  
  #correlation [class*="page-path"] .path-item {
    height: 0;
    padding-right: 0;
  }
  
  #correlation [class*="page-path"] .path-item.active {
    animation: none;
  }
  
  #correlation [class*="page-path"] svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
}

@media all and (-ms-high-contrast:none) {/* ---------- only IE ---------- */
  #correlation [class*="page-path"] {
    opacity: 0;
  }
  
  #correlation [class*="page-path"].scroll-in {
    opacity: 1;
  }
  
  #correlation [class*="page-path"] svg {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
  }
  
  #correlation [class*="page-path"].scroll-in svg {
    animation: none;
  }
  
  #correlation .path-item {
    opacity: 1;
  }
}

@keyframes line-animation {
  0% {
    stroke-dashoffset: 3000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes path-item-loop {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-200%);
  }
}

@keyframes path-item-loop-first {
  0% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes path-item-loop-last {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-300%);
  }
}

/*------------------------------------------------------------
page style
------------------------------------------------------------*/
#correlation .correlation-overview {
  max-width: 640px;
  margin: 0 auto 40px;
  font-weight: 700;
  line-height: 1.7;
}

#correlation .correlation-figure {
  position: relative;
  margin-bottom: 30px;
}

#correlation .correlation-figure .correlation-heading {
  position: absolute;
  top: 4vw;/* 15px */
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  z-index: 1;
}

#correlation .correlation-figure [class*="correlation-button"] {
  position: absolute;
  transform: scale(1) rotate(.1deg);
  transform-origin: center center;
  transition: transform .3s;
  z-index: 1;
}

#correlation .correlation-figure .correlation-button01 {
  top: 15%;
  left: 23.5%;
}

#correlation .correlation-figure .correlation-button02 {
  top: 15%;
  left: 46.25%;
}

#correlation .correlation-figure .correlation-button03 {
  top: 15%;
  left: 69%;
}

#correlation .correlation-figure .correlation-button04 {
  top: 61%;
  left: 23.5%;
}

#correlation .correlation-figure .correlation-button05 {
  top: 61%;
  left: 46.25%;
}

#correlation .correlation-figure .correlation-button06 {
  top: 61%;
  left: 69%;
}

#correlation .correlation-figure .correlation-button07 {
  top: 77.5%;
  left: 46.25%;
}

#correlation .correlation-figure .letter {
  display: inline-block;
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 3.2vw;/* 12px */
  font-weight: 500;
  line-height: 1.08;
}

#correlation .correlation-figure-bg {
  text-align: center;
}

#correlation .correlation-figure-bg img {
  width: 100%;
}

#correlation .correlation-flow .correlation-heading {
  margin-bottom: 10px;
}

#correlation .correlation-flow-list {
  position: relative;
  padding: 20px 0 10px;
}

#correlation .correlation-flow-list::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 23px;
  width: 2px;
  height: 100%;
  background-color: #000000;
  z-index: 0;
}

#correlation .correlation-flow-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 10px;
}

#correlation .correlation-flow-item:last-of-type {
  margin-bottom: 0;
}

#correlation .correlation-flow-item.button-null {
  margin-top: -4em;
  margin-bottom: 2em;
}

#correlation .correlation-flow-title {
  width: calc(100% - ((400px / 2) + 12px));
  max-width: calc(280px / 2);
  min-width: 124px;
  margin: 6px 12px 0 0;
  padding-left: 40px;
  color: #4B4B4B;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: .1em;
}

#correlation .correlation-flow-title::before {
  content: "";
  display: block;
  position: absolute;
  top: 7px;
  left: 16px;
  width: 10px;
  height: 10px;
  border: solid 3px #E8F8FE;
  border-radius: 50%;
  background-color: #0A4D98;
  box-sizing: content-box;
  z-index: 1;
}

#correlation .correlation-flow-title .letter {
  display: inline-block;
}

#correlation .correlation-flow-title .annotation {
  position: relative;
}

#correlation .correlation-flow-title .annotation::after {
  content: '\0203B';
  position: absolute;
  top: -.5em;
  right: -.75em;
  font-size: 10px;
  line-height: 1;
}

#correlation .correlation-flow-box {
  display: flex;
  flex-wrap: wrap;
  width: calc(400px / 2);
}

#correlation .correlation-flow [class*="correlation-button"] {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 10px 10px 0;
  z-index: 1;
}

#correlation .correlation-flow [class*="correlation-button"]::before {
  width: 10px;
  height: 10px;
}

#correlation .correlation-flow [class*="correlation-button"]::after {
  right: 3px;
  bottom: 3px;
}

#correlation .correlation-flow [class*="correlation-button"]:last-of-type {
  margin-right: 0;
}

#correlation [class*="correlation-box"] {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
}

#correlation .correlation-box-bg {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(10, 77, 152, .75);
  z-index: -1;
}

#correlation .correlation-popup {
  position: relative;
  top: 50%;
  width: calc(100% - 24px);
  max-width: 960px;
  height: calc(100% - 80px);
  margin: 0 auto;
  background-color: #ffffff;
  transform: translateY(-50%);
}

#correlation .correlation-popup .inner {
  position: relative;
  width: auto;
  max-width: inherit;
  height: 100%;
  margin: 0;
  padding: 24px 3.2vw;/* 12px */
  overflow-y: auto;
}

#correlation .correlation-popup .inner::before {
  content: "";
  display: block;
  position: absolute;
  top: 50px;
  right: 30px;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  z-index: -1;
}

#correlation .correlation-department {
  position: relative;
  margin-bottom: 10px;
  padding-left: 35px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.07;
}

#correlation .correlation-department::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 25px;
  height: 1px;
  background-color: #4B4B4B;
  transform: translateY(-50%);
  z-index: 0;
}

#correlation .correlation-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background-color: #32A1E8;
  cursor: pointer;
  transition: background-color .3s;
  z-index: 1;
}

#correlation .correlation-close-button svg {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  transition: stroke .3s;
}

#correlation .correlation-title {
  margin: 24px 0 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

#correlation .correlation-title:first-of-type {
  margin-top: 0;
}

#correlation .correlation-text {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
}

#correlation .correlation-job {
  margin-top: 30px;
}

#correlation .correlation-job-title {
  margin-bottom: 10px;
}

#correlation .correlation-job-title .letter {
  display: inline-block;
  padding: 2px 10px;
  border: solid 1px #4B4B4B;
  color: #4B4B4B;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .1em;
}

#correlation .correlation-job-list {
  counter-reset: number;
  padding: 0 6px;
}

#correlation .correlation-job-item {
  position: relative;
  margin-bottom: .5em;
  padding-left: 30px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.66;
}

#correlation .correlation-job-item:last-of-type {
  margin-bottom: 0;
}

#correlation .correlation-job-item::before {
  counter-increment: number;
  content: counter(number);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: .25em;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  z-index: 0;
}

#correlation .correlation-image {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 30px;
}

#correlation .correlation-image img {
  width: calc((100% - 10px) / 2);
  margin-right: 10px;
  box-shadow: 5px 5px 5px 0px rgba(153, 203, 235, .5);
}

#correlation .correlation-image img:nth-of-type(n+3) {
  margin-top: 10px;
}

#correlation .correlation-image img:nth-of-type(even),
#correlation .correlation-image img:last-of-type {
  margin-right: 0;
}

#correlation .correlation-link-button {
  width: 250px;
  margin: 24px auto 0;
  box-shadow: 5px 5px 10px 0px rgba(50, 161, 232, .45);
}

#correlation .correlation-link-button .letter {
  letter-spacing: .15em;
}

#correlation-box01 .correlation-popup .inner::before {
  width: calc(240px / 2);
  height: calc(206px / 2);
  background-image: url("../images/correlation/correlation_popup01_illust.svg");
}

#correlation-box01 .correlation-title {
  color: #E9A774;
}

#correlation-box01 .correlation-job-item::before {
  background-color: #E9A774;
}

#correlation-box02 .correlation-popup .inner::before {
  width: calc(240px / 2);
  height: calc(208px / 2);
  background-image: url("../images/correlation/correlation_popup02_illust.svg");
}

#correlation-box02 .correlation-title {
  color: #9FC150;
}

#correlation-box02 .correlation-job-item::before {
  background-color: #9FC150;
}

#correlation-box03 .correlation-popup .inner::before {
  width: calc(240px / 2);
  height: calc(234px / 2);
  background-image: url("../images/correlation/correlation_popup03_illust.svg");
}

#correlation-box03 .correlation-title {
  color: #32A1E8;
}

#correlation-box03 .correlation-job-item::before {
  background-color: #32A1E8;
}

#correlation-box04 .correlation-popup .inner::before {
  width: calc(240px / 2);
  height: calc(242px / 2);
  background-image: url("../images/correlation/correlation_popup04_illust.svg");
}

#correlation-box04 .correlation-title {
  color: #7FBD98;
}

#correlation-box04 .correlation-job-item::before {
  background-color: #7FBD98;
}

#correlation-box05 .correlation-popup .inner::before {
  width: calc(240px / 2);
  height: calc(236px / 2);
  background-image: url("../images/correlation/correlation_popup05_illust.svg");
}

#correlation-box05 .correlation-title {
  color: #46ABBA;
}

#correlation-box05 .correlation-job-item::before {
  background-color: #46ABBA;
}

#correlation-box06 .correlation-popup .inner::before {
  width: calc(240px / 2);
  height: calc(240px / 2);
  background-image: url("../images/correlation/correlation_popup06_illust.svg");
}

#correlation-box06 .correlation-title {
  color: #147CBF;
}

#correlation-box06 .correlation-job-item::before {
  background-color: #147CBF;
}

#correlation-box07 .correlation-popup .inner::before {
  width: calc(240px / 2);
  height: calc(210px / 2);
  background-image: url("../images/correlation/correlation_popup07_illust.svg");
}

#correlation-box07 .correlation-title {
  color: #6372BF;
}

#correlation-box07 .correlation-job-item::before {
  background-color: #6372BF;
}

#correlation .correlation-annotation {
  padding: 5px 0 55px;
  background-color: #ffffff;
}

#correlation .correlation-annotation .inner {
  max-width: 960px;
  padding: 0;
}

#correlation .correlation-annotation .text-box {
  font-size: 12px;
  text-align: right;
}

#correlation .page-path-data {
  width: calc(((980 / 750) * 100%) * 3);/* calc(((svgの幅 / デザインカンプの幅) x 100%) x 3) */
}

#correlation .page-path-data .path-item {
  width: calc((980 / 750) * 100%);/* calc((svgの幅 / デザインカンプの幅) x 100%) */
}

@media print, screen and (min-width: 768px) {/* ---------- タブレット・PC以上 ---------- */
  #correlation .correlation-overview {
    margin-bottom: 80px;
    font-size: 18px;
    line-height: 2.4;
  }
  
  #correlation .correlation-figure {
    margin-bottom: 60px;
  }
  
  #correlation .correlation-figure .correlation-heading {
    top: 30px;
  }
  
  #correlation .correlation-figure [class*="correlation-button"] {
    width: calc((120 / 1200) * 100%);
    height: calc((120 / 700) * 100%);
    border-radius: 10px;
  }
  
  #correlation .correlation-figure [class*="correlation-button"]:hover,
  #correlation .correlation-figure [class*="correlation-button"].hover {
    transform: scale(1.2) rotate(.1deg);
  }
  
  #correlation .correlation-figure .correlation-button01 {
    top: 13%;
    left: 31%;
  }

  #correlation .correlation-figure .correlation-button02 {
    top: 13%;
    left: 45%;
  }

  #correlation .correlation-figure .correlation-button03 {
    top: 13%;
    left: 59%;
  }

  #correlation .correlation-figure .correlation-button04 {
    top: 78%;
    left: 31%;
  }

  #correlation .correlation-figure .correlation-button05 {
    top: 78%;
    left: 45%;
  }

  #correlation .correlation-figure .correlation-button06 {
    top: 78%;
    left: 59%;
  }

  #correlation .correlation-figure .correlation-button07 {
    top: 78%;
    left: 78%;
  }
  
  #correlation .correlation-figure .letter {
    margin-bottom: 10px;
    font-size: calc(.75rem + ((1vw - 10.24px) * .4464));
  }
  
  #correlation .correlation-figure .illust {
    max-width: 75%;
  }
  
  #correlation .correlation-figure-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  #correlation .correlation-flow .correlation-heading {
    margin-bottom: 20px;
  }
  
  #correlation .correlation-flow-list {
    display: flex;
    justify-content: center;
    padding: 0;
  }
  
  #correlation .correlation-flow-list::before {
    top: 20px;
    left: 0;
    width: 100%;
    height: 2px;
  }
  
  #correlation .correlation-flow-item {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: auto;
    margin: 0 100px 0 0;
  }
  
  #correlation .correlation-flow-item:last-of-type {
    margin-right: 0;
  }
  
  #correlation .correlation-flow-item.button-null {
    margin: 0 6.5em 0 -8.5em;
  }
  
  #correlation .correlation-flow-item.active {
    align-items: flex-start;
  }
  
  #correlation .correlation-flow-title,
  #correlation .correlation-flow-box {
    width: auto;
  }
  
  #correlation .correlation-flow-title {
    max-width: inherit;
    min-width: inherit;
    margin: 40px 0 20px;
    padding: 0;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
  }
  
  #correlation .correlation-flow-item.active .correlation-flow-title {
    margin-left: -6%;
  }
  
  #correlation .correlation-flow-title::before {
    top: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    border-width: 10px;
    transform: translateX(-50%);
  }
  
  #correlation .correlation-flow-item.active .correlation-flow-title::before {
    left: 0;
    transform: translateX(0);
  }
  
  #correlation .correlation-flow-title .annotation::after {
    font-size: 12px;
  }
  
  #correlation .correlation-flow-box {
    margin-top: auto;
  }
  
  #correlation .correlation-flow [class*="correlation-button"] {
    margin: 0 20px 20px 0;
  }
  
  #correlation .correlation-flow [class*="correlation-button"]::before,
  #correlation .correlation-flow [class*="correlation-button"]::after {
    display: none;
  }
  
  #correlation .correlation-flow [class*="correlation-button"] .illust {
    transform: scale(.75);
  }
  
  #correlation .correlation-popup {
    max-height: 830px;
  }
  
  #correlation .correlation-popup .inner {
    padding: 30px 40px;
  }
  
  #correlation .correlation-popup .inner::before {
    top: 70px;
    right: 60px;
  }
  
  #correlation .correlation-department {
    margin-bottom: 15px;
    padding-left: 60px;
    font-size: 18px;
    line-height: 1.66;
  }
  
  #correlation .correlation-department::before {
    width: 50px;
    height: 2px;
  }
  
  #correlation .correlation-close-button {
    width: 60px;
    height: 60px;
  }
  
  #correlation .correlation-close-button:hover {
    background-color: #D6ECFB;
  }
  
  #correlation .correlation-close-button svg {
    width: 26px;
    height: 26px;
  }
  
  #correlation .correlation-close-button:hover svg {
    stroke: #32A1E8;
  }
  
  #correlation .correlation-title {
    margin: 40px 0 20px;
    font-size: 24px;
    line-height: 1.66;
  }
  
  #correlation .correlation-text {
    font-size: 16px;
    line-height: 1.875;
  }
  
  #correlation .correlation-job {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
  }
  
  #correlation .correlation-job-title {
    width: 140px;
    margin-bottom: 0;
  }
  
  #correlation .correlation-job-title .letter {
    padding: 2px 20px;
    border-width: 2px;
    font-size: 14px;
  }
  
  #correlation .correlation-job-text {
    width: calc(100% - (140px + 20px));
  }
  
  #correlation .correlation-job-list {
    padding: 0;
  }
  
  #correlation .correlation-job-item {
    font-size: 16px;
  }
  
  #correlation .correlation-job-item::before {
    width: 22px;
    height: 22px;
    font-size: 14px;
  }
  
  #correlation .correlation-image img {
    width: calc((100% - 40px) / 2);
    margin-right: 40px;
    box-shadow: 10px 5px 10px 0px rgba(153, 203, 235, .5);
  }

  #correlation .correlation-image img:nth-of-type(n+3) {
    margin-top: 40px;
  }
  
  #correlation .correlation-link-button {
    width: 400px;
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  #correlation .correlation-link-button .letter {
    letter-spacing: normal;
  }
  
  #correlation-box01 .correlation-popup .inner::before {
    width: 240px;
    height: 206px;
  }
  
  #correlation-box02 .correlation-popup .inner::before {
    width: 240px;
    height: 208px;
  }
  
  #correlation-box03 .correlation-popup .inner::before {
    width: 240px;
    height: 234px;
  }
  
  #correlation-box04 .correlation-popup .inner::before {
    width: 240px;
    height: 242px;
  }
  
  #correlation-box05 .correlation-popup .inner::before {
    width: 240px;
    height: 236px;
  }
  
  #correlation-box06 .correlation-popup .inner::before {
    width: 240px;
    height: 240px;
  }
  
  #correlation-box07 .correlation-popup .inner::before {
    width: 240px;
    height: 210px;
  }
  
  #correlation .correlation-annotation {
    padding: 10px 0 160px;
  }
  
  #correlation .correlation-annotation .text-box {
    font-size: 13px;
  }
  
  #correlation .page-path-data {
    width: 100%;
  }
  
  #correlation .page-path-data .path-item {
    width: calc((980 / 1920) * 100%);/* calc((svgの幅 / デザインカンプの幅) x 100%) */
    padding-top: calc(242 / 980 * ((980 / 1920) * 100%));/* アスペクト比の計算 calc(svgの高さ / svgの幅 x 要素の幅) */
  }
}