@charset "UTF-8";
/* =============================================
header
============================================= */
.common-header {
  display: flex;
  position: fixed;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  top: 0;
  left: 0;
  z-index: var(--z-900);
  background-color: var(--color-white);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
}
@media (min-width: 1024px) {
  .common-header {
    height: 96px;
  }
}

.common-header_logo {
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .common-header_logo {
    display: flex;
    gap: 20px;
    align-items: center;
  }
}
@media (min-width: 1440px) {
  .common-header_logo {
    gap: 28px;
  }
}
.common-header_logo .relocation {
  display: block;
}
.common-header_logo .relocation img {
  display: block;
  height: 38px;
  width: auto;
}
@media (min-width: 1024px) {
  .common-header_logo .relocation img {
    height: 45px;
    width: 100%;
  }
}
@media (min-width: 1440px) {
  .common-header_logo .relocation img {
    height: 56px;
  }
}
@media (min-width: 1024px) {
  .common-header_logo .bar {
    display: block;
    width: 2px;
    height: 40px;
    background-color: var(--color-gray);
  }
}
.common-header_logo .corporate {
  display: none;
}
@media (min-width: 1024px) {
  .common-header_logo .corporate {
    display: block;
  }
}
.common-header_logo .corporate img {
  display: block;
}
@media (min-width: 1024px) {
  .common-header_logo .corporate img {
    height: 20px;
  }
}
@media (min-width: 1440px) {
  .common-header_logo .corporate img {
    height: 28px;
  }
}
.common-header_logo a {
  transition: opacity 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .common-header_logo a:hover {
    opacity: 0.7;
  }
}

.common-header_inner {
  display: flex;
  align-items: center;
  padding: 13px 12px;
  width: 100%;
}
@media (min-width: 1024px) {
  .common-header_inner {
    padding: 18px 16px 18px 12px;
    justify-content: space-between;
  }
}
@media (min-width: 1200px) {
  .common-header_inner {
    padding: 18px 32px 18px 24px;
  }
}
@media (min-width: 1440px) {
  .common-header_inner {
    padding: 18px 32px 18px 24px;
  }
}

.common-header_menu {
  display: none;
}
@media (min-width: 1024px) {
  .common-header_menu {
    display: block;
  }
}

.common-header_tool {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.common-header_tool .bar {
  display: block;
  margin: 0 20px;
  width: 2px;
  height: 20px;
  background-color: var(--color-gray);
}

.common-header_search {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.common-header_search::before, .common-header_search::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: contain;
}
.common-header_search::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_search.svg");
  transition: opacity 0.2s ease-out;
}
.common-header_search::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_search_green.svg");
  transition: opacity 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .common-header_search:hover::before {
    opacity: 0;
  }
  .common-header_search:hover::after {
    opacity: 1;
  }
}

.common-header_language {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  margin-left: 20px;
  font-family: "Hind", sans-serif;
}
.common-header_language .arrow {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  bottom: 2px;
}
.common-header_language .arrow::before, .common-header_language .arrow::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}
.common-header_language .arrow::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_arrow.svg");
  transition: opacity 0.2s ease-out;
}
.common-header_language .arrow::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_arrow_green.svg");
  transition: opacity 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .common-header_language:hover .arrow::before {
    opacity: 0;
  }
  .common-header_language:hover .arrow::after {
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .common-header_list {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 4px;
  }
}
@media (min-width: 1024px) {
  .common-header_list {
    gap: 12px;
  }
}
@media (min-width: 1200px) {
  .common-header_list {
    gap: 32px;
  }
}
@media (min-width: 1440px) {
  .common-header_list {
    gap: 40px;
  }
}

.common-header_link {
  display: flex;
  gap: 4px;
  padding: 5px 0;
  align-items: center;
  color: var(--color-black);
  font-weight: bold;
  font-size: var(--font-size-14);
  transition: color 0.2s ease-out;
}
.common-header_link .chevron {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}
.common-header_link .chevron::before, .common-header_link .chevron::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(90deg);
}
.common-header_link .chevron::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_chevron.svg");
  transition: opacity 0.2s ease-out;
}
.common-header_link .chevron::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_chevron_purple.svg");
  transition: opacity 0.2s ease-out;
}
.common-header_link span:first-child {
  background: linear-gradient(var(--color-navy), var(--color-navy)) 0 100%/0 1px no-repeat;
  transition: background 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .common-header_link:hover {
    color: var(--color-navy);
  }
  .common-header_link:hover span:first-child {
    background-size: 100% 1px;
  }
  .common-header_link:hover .chevron::before {
    opacity: 0;
  }
  .common-header_link:hover .chevron::after {
    opacity: 1;
  }
}
@media (min-width: 1024px) {
  .common-header_link {
    font-size: var(--font-size-12);
  }
}
@media (min-width: 1200px) {
  .common-header_link {
    font-size: var(--font-size-14);
  }
}

.common-header_contact {
  display: none;
  transition: background-color 0.2s ease-out;
}
@media (min-width: 1024px) {
  .common-header_contact {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 90px;
    height: 100%;
    background-color: var(--color-yellow);
    flex-shrink: 0;
  }
}
@media (min-width: 1440px) {
  .common-header_contact {
    width: 140px;
  }
}
.common-header_contact img {
  width: 24px;
  height: 24px;
}
.common-header_contact span {
  display: block;
  margin-top: 4px;
  font-weight: bold;
  font-size: var(--font-size-12);
  color: var(--color-primary);
}
@media (min-width: 1440px) {
  .common-header_contact span {
    font-size: var(--font-size-14);
  }
}
@media (hover: hover) and (pointer: fine) {
  .common-header_contact:hover {
    background-color: var(--color-yellow02);
  }
}

.common-header_lang{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-right: 1vw;
}
@media (min-width: 1024px) {
  .common-header_lang{
    display: none;
  }
}
.common-header_lang li{
  position: relative;
}
.common-header_lang li:first-child{
  padding: 0px 10px 0 0;
  margin: 0 4px 0 0 ;
}
.common-header_lang li:first-child:after{
  content: "/";
  display: block;
  position: absolute;
  top: 0;
  font-weight: bold;
  right: 0;
}
.common-header_lang .common-header_langActive a{
  font-weight: bold;
}


.common-header_hamburger {
  display: block;
  position: relative;
  height: 100%;
}
@media (min-width: 1024px) {
  .common-header_hamburger {
    display: none;
  }
}
.common-header_hamburger[aria-expanded=false] .box::after {
  color: var(--color-primary);
  font-weight: bold;
  content: "メニュー";
}
.common-header_hamburger.common-header_hamburgerEn[aria-expanded=false] .box::after {
  content: "menu";
}
.common-header_hamburger[aria-expanded=true] .box::after {
  color: var(--color-primary);
  font-weight: bold;
  content: "閉じる";
}
.common-header_hamburger.common-header_hamburgerEn[aria-expanded=true] .box::after {
  content: "close";
}
.common-header_hamburger .box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 64px;
  height: 100%;
}
.common-header_hamburger .box::after {
  display: inline;
  width: 100%;
  font-size: var(--font-size-10);
}

.common-header_bars {
  display: block;
  position: relative;
  width: 23px;
  height: 18px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .common-header_bars {
    width: 32px;
    height: 24px;
  }
}
.common-header_bars span {
  display: block;
  position: absolute;
  left: 50%;
  width: 23px;
  height: 2px;
  transform: translate(-50%, 0);
  transition: transform 0.2s ease-out;
}
@media (min-width: 768px) {
  .common-header_bars span {
    width: 32px;
  }
}
.common-header_bars span:first-child {
  top: 4px;
  background-color: var(--color-primary);
}
@media (min-width: 768px) {
  .common-header_bars span:first-child {
    top: 6px;
  }
}
.common-header_bars span:last-child {
  bottom: 4px;
  background-color: var(--color-green);
}
@media (min-width: 768px) {
  .common-header_bars span:last-child {
    bottom: 6px;
  }
}
.common-header_hamburger[aria-expanded=true] .common-header_bars span:first-child {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.common-header_hamburger[aria-expanded=true] .common-header_bars span:last-child {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* =============================================
footer
============================================= */
.common-footer {
  background-color: var(--color-gray02);
}
@media (hover: hover) and (pointer: fine) {
  .common-footer a:hover {
    color: var(--color-navy);
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
}

.common-footer_pcMenu {
  display: none;
}
@media (min-width: 768px) {
  .common-footer_pcMenu {
    display: none;
    margin: 32px auto 0;
    max-width: 590px;
  }
}
@media (min-width: 1024px) {
  .common-footer_pcMenu {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    max-width: none;
    margin: 0;
  }
}

.common-footer_pcItem {
  display: flex;
  flex-direction: column;
}
.common-footer_pcItem:nth-child(3) {
  min-width: 195px;
}

.common-footer_links {
  margin-top: 12px;
}
.common-footer_links li:not(:first-child) {
  margin-top: 8px;
}
.common-footer_links a {
  color: var(--color-black);
  font-size: var(--font-size-14);
}
@media (hover: hover) and (pointer: fine) {
  .common-footer_links a:hover {
    color: var(--color-navy);
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
}

.common-footer_heading {
  font-weight: bold;
  color: var(--color-black);
}
.common-footer_heading:not(:first-child) {
  margin-top: 8px;
}

.common-footer_spMenu a .arrow {
  position: relative;
  width: 24px;
  height: 24px;
}
.common-footer_spMenu a .arrow::before, .common-footer_spMenu a .arrow::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 0.2s ease-out;
}
.common-footer_spMenu a .arrow::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_arrow.svg");
}
.common-footer_spMenu a .arrow::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_arrow_purple.svg");
}
@media (hover: hover) and (pointer: fine) {
  .common-footer_spMenu a:hover {
    color: var(--color-navy);
  }
  .common-footer_spMenu a:hover .arrow::before {
    opacity: 0;
  }
  .common-footer_spMenu a:hover .arrow::after {
    opacity: 1;
  }
}
@media (min-width: 1024px) {
  .common-footer_spMenu {
    display: none;
  }
}

.common-footer_spItem {
  border-bottom: 1px solid var(--color-gray03);
}

@media (min-width: 1024px) {
  .common-footer_container {
    border-bottom: 1px solid var(--color-gray03);
  }
}

@media (min-width: 1024px) {
  .common-footer_contents {
    padding: 64px 16px 48px;
  }
}

.common-footer_contentsInner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .common-footer_contentsInner {
    display: flex;
  }
}

.common-footer_logoBox {
  text-align: center;
  margin: 0 auto;
  padding: 48px 16px 24px;
  border-bottom: 1px solid var(--color-gray03);
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .common-footer_logoBox {
    text-align: left;
    margin: 0 20px 0 0;
    padding: 0;
    border-bottom: none;
    width: 22.3333333333%;
  }
}
.common-footer_logoBox a {
  transition: opacity 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .common-footer_logoBox a:hover {
    opacity: 0.7;
  }
}
.common-footer_logoBox img {
  max-width: 240px;
}

.common-footer_accordion {
  overflow: hidden;
}

.common-footer_bannerBox {
  text-align: center;
  padding: 32px 16px;
  border-bottom: 1px solid var(--color-gray03);
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .common-footer_bannerBox {
    margin: 0;
    border: none;
    padding: 0;
  }
}
.common-footer_bannerBox img {
  max-width: 220px;
}
.common-footer_bannerBox a {
  transition: opacity 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .common-footer_bannerBox a:hover {
    opacity: 0.7;
  }
}

.common-footer_info {
  position: relative;
}

.common-footer_infoList {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.common-footer_infoList a {
  color: var(--color-black);
  font-size: var(--font-size-12);
  font-weight: bold;
}
@media (hover: hover) and (pointer: fine) {
  .common-footer_infoList a:hover {
    color: var(--color-navy);
  }
}

.common-footer_infoInner {
  padding: 32px 16px 75px;
}

.common-footer_infoContents {
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .common-footer_infoContents {
    display: flex;
    justify-content: space-between;
  }
}

.common-footer_copyright {
  margin-top: 16px;
  text-align: center;
  color: var(--color-gray04);
  font-size: var(--font-size-12);
}
@media (min-width: 1024px) {
  .common-footer_copyright {
    margin-top: 0;
  }
}

.common-footer_spLink {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 24px 20px 16px;
  color: var(--color-primary);
  line-height: 1;
  font-weight: bold;
  background-color: var(--color-gray02);
  transition: color 0.2s ease-out;
}
details .common-footer_spLink::after {
  display: none;
}
details .common-footer_spLink .expand {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
}
details .common-footer_spLink .expand::before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background-color: var(--color-green);
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease-out;
}
details .common-footer_spLink .expand::after {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  left: 50%;
  width: 2px;
  height: 16px;
  background-color: var(--color-primary);
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out, background-color 0.2s ease-out;
}
details.is-opened > .common-footer_spLink .expand::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .common-footer_spLink:hover {
    color: var(--color-navy);
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
  .common-footer_spLink:hover .expand::after,
  .common-footer_spLink:hover .expand::before {
    background-color: var(--color-navy);
  }
}

.common-footer_accordionInner {
  padding-bottom: 20px;
}

.common-footer_spContainer {
  background-color: var(--color-white);
}
.common-footer_spContainer li {
  position: relative;
}
.common-footer_spContainer li a {
  position: relative;
}
.common-footer_spContainer li a::before {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% - 32px);
  height: 1px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-gray03);
}
.common-footer_spContainer li.-no-border a::before {
  display: none;
}
.common-footer_spContainer .common-footer_spLink::before {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% - 32px);
  height: 1px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-gray03);
}
.common-footer_spContainer .common-footer_spLink.-no-border::before {
  display: none;
}
.common-footer_spContainer a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 24px 13px 16px;
  color: var(--color-primary);
  line-height: 1;
  font-size: var(--font-size-14);
  font-weight: bold;
}
.common-footer_spContainer .common-footer_topLink {
  padding: 18px 24px 18px 16px;
}

.common-footer_box01 {
  padding: 0 16px;
}
.common-footer_box01 a {
  padding: 13px 8px 13px 16px;
}
.common-footer_box01 .common-footer_spLink {
  font-size: var(--font-size-14);
  padding: 13px 8px 13px 16px;
  background-color: var(--color-white);
}
.common-footer_box01 .common-footer_spLink::before {
  width: 100%;
}

.common-footer_box02 {
  position: relative;
  background-color: var(--color-gray06);
}
.common-footer_box02::before {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-purple02);
}
.common-footer_box02 li a {
  position: relative;
  font-weight: normal;
  padding: 13px 8px 13px 32px;
}
.common-footer_box02 li a::before {
  width: 100%;
}
.common-footer_box02 > li > a {
  padding: 13px 8px 13px 16px;
}
.common-footer_box02.-no-border::before {
  display: none;
}

.common-footer_box03 {
  background-color: var(--color-gray06);
}
.common-footer_box03 > li a {
  font-weight: normal;
  padding: 13px 8px 13px 48px;
}
.common-footer_box03 > li span:first-of-type {
  display: flex;
  align-items: center;
  gap: 8px;
}
.common-footer_box03 > li span:first-of-type::before {
  display: block;
  content: "";
  width: 8px;
  height: 1px;
  background-color: var(--color-primary);
}
.common-footer_box03.-mb-16 {
  margin-bottom: 16px;
}

/* =============================================
gloNav
============================================= */
.common-gloNav {
  position: fixed;
  top: 60px;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100 - 60px);
  height: calc(100svh - 60px);
  background-color: var(--color-purple);
  overflow-y: auto;
  transition: transform 0.2s ease-out;
  z-index: var(--z-800);
}
.common-gloNav[aria-hidden=true] {
  transform: translateY(-100%);
}
@media (min-width: 1024px) {
  .common-gloNav {
    display: none;
  }
}
.common-gloNav a {
  transition: color 0.2s ease-out;
}
.common-gloNav a .arrow {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}
.common-gloNav a .arrow::before, .common-gloNav a .arrow::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}
.common-gloNav a .arrow::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_arrow.svg");
  transition: opacity 0.2s ease-out;
}
.common-gloNav a .arrow::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_arrow_purple.svg");
  transition: opacity 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .common-gloNav a:hover {
    color: var(--color-navy);
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
  .common-gloNav a:hover .arrow::before {
    opacity: 0;
  }
  .common-gloNav a:hover .arrow::after {
    opacity: 1;
  }
}
.common-gloNav summary {
  transition: color 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .common-gloNav summary:hover {
    color: var(--color-navy);
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
}

.common-gloNav_searchBox {
  display: flex;
  justify-content: center;
  padding: 32px 16px;
  border-bottom: 1px solid var(--color-purple02);
}

.common-gloNav_search {
  display: flex;
  justify-content: center;
  width: 100%;
}
.common-gloNav_search input {
  border: none;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  font-size: var(--font-size-14);
  border-radius: 4px 0 0 4px;
}
.common-gloNav_search .gloNav_submit {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: var(--color-primary);
  border-radius: 0 4px 4px 0;
  transition: background-color 0.2s ease-out;
}
.common-gloNav_search .gloNav_submit::before, .common-gloNav_search .gloNav_submit::after {
  position: absolute;
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}
.common-gloNav_search .gloNav_submit::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_search_white.svg");
}
.common-gloNav_search .gloNav_submit::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_search_navy.svg");
}
@media (hover: hover) and (pointer: fine) {
  .common-gloNav_search .gloNav_submit:hover {
    background-color: var(--color-green);
  }
  .common-gloNav_search .gloNav_submit:hover::before {
    opacity: 0;
  }
  .common-gloNav_search .gloNav_submit:hover::after {
    opacity: 1;
  }
}

.common-gloNav_item {
  border-bottom: 1px solid var(--color-purple02);
}

.common-gloNav_link {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 24px 20px 16px;
  color: var(--color-primary);
  line-height: 1;
  font-weight: bold;
  background-color: var(--color-purple);
}
@media (hover: hover) and (pointer: fine) {
  .common-gloNav_link:hover .arrow::after {
    opacity: 1;
  }
}
details .common-gloNav_link::after {
  display: none;
}
details .common-gloNav_link .expand {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
}
details .common-gloNav_link .expand::before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background-color: var(--color-green);
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease-out;
}
details .common-gloNav_link .expand::after {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  left: 50%;
  width: 2px;
  height: 16px;
  background-color: var(--color-primary);
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out, background-color 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  details .common-gloNav_link:hover .expand::after,
  details .common-gloNav_link:hover .expand::before {
    background-color: var(--color-navy);
  }
}
details.is-opened > .common-gloNav_link .expand::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.common-gloNav_accordion {
  overflow: hidden;
}

.common-gloNav_accordionInner {
  padding-bottom: 20px;
}

.common-gloNav_container {
  background-color: var(--color-white);
}
.common-gloNav_container li {
  position: relative;
}
.common-gloNav_container li a {
  position: relative;
}
.common-gloNav_container li a::before {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% - 32px);
  height: 1px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-purple02);
}
.common-gloNav_container li.-no-border a::before {
  display: none;
}
.common-gloNav_container .common-gloNav_link::before {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% - 32px);
  height: 1px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-purple02);
}
.common-gloNav_container .common-gloNav_link.-no-border::before {
  display: none;
}
.common-gloNav_container a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 24px 13px 16px;
  color: var(--color-primary);
  line-height: 1;
  font-size: var(--font-size-14);
  font-weight: bold;
}
.common-gloNav_container .common-gloNav_topLink {
  padding: 18px 24px 18px 16px;
}

.common-gloNav_box01 {
  padding: 0 16px;
}
.common-gloNav_box01 a {
  padding: 13px 8px 13px 16px;
}
.common-gloNav_box01 .common-gloNav_link {
  font-size: var(--font-size-14);
  padding: 13px 8px 13px 16px;
  background-color: var(--color-white);
}
.common-gloNav_box01 .common-gloNav_link::before {
  width: 100%;
}
.common-gloNav_box01 .common-gloNav_link .spOnly{
 display: none;
}
@media screen and (max-width:480px){
.common-gloNav_box01 .onestop{
 line-height: 1.5;
}
.common-gloNav_box01 .common-gloNav_link .spOnly{
 display: block;
}
}

.common-gloNav_box02 {
  position: relative;
  background-color: var(--color-gray06);
}
.common-gloNav_box02::before {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-purple02);
}
.common-gloNav_box02 li a {
  font-weight: normal;
  padding: 13px 8px 13px 32px;
}
.common-gloNav_box02 > li > a {
  padding: 13px 8px 13px 16px;
}
.common-gloNav_box02 li a {
  position: relative;
}
.common-gloNav_box02 li a::before {
  width: 100%;
}
.common-gloNav_box02.-no-border::before {
  display: none;
}

.common-gloNav_box03 {
  background-color: var(--color-gray06);
}
.common-gloNav_box03 > li a {
  font-weight: normal;
  padding: 13px 8px 13px 48px;
}
.common-gloNav_box03 > li a span:first-of-type {
  display: flex;
  align-items: center;
  gap: 8px;
}
.common-gloNav_box03 > li a span:first-of-type::before {
  display: block;
  content: "";
  width: 8px;
  height: 1px;
  background-color: var(--color-primary);
  transition: background-color 0.2s ease-out;
}
.common-gloNav_box03.-mb-16 {
  margin-bottom: 16px;
}

.common-gloNav_footer {
  padding: 32px 16px 48px;
  text-align: center;
}

.common-gloNav_banner {
  display: block;
  max-width: 220px;
  margin: 0 auto;
}

.common-gloNav_language {
  margin-top: 24px;
}

/* =============================================
heading01
============================================= */
.common-heading01 {
  position: relative;
  font-size: var(--font-size-24);
  font-weight: bold;
  color: var(--color-primary);
  text-align: center;
  padding-top: 40px;
}
@media (min-width: 768px) {
  .common-heading01 {
    font-size: var(--font-size-40);
    padding-top: 76px;
  }
}
.common-heading01 > span {
  display: block;
}
.common-heading01 .bar {
  display: block;
  position: absolute;
  width: 86px;
  height: 4px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--color-green) 0%, var(--color-green) 33%, var(--color-primary) 33%, var(--color-primary) 100%);
}
.common-heading01 .green {
  display: inline-block;
  padding: 8px 16px;
  background-color: var(--color-green);
  border-radius: 4px;
  font-size: var(--font-size-28);
}
@media (min-width: 768px) {
  .common-heading01 .green {
    font-size: var(--font-size-40);
  }
}
@media (min-width: 768px) {
  .common-heading01 .mr-6 {
    margin-right: 6px;
  }
}
.common-heading01 .mt-8 {
  display: block;
  margin-top: 8px;
}
@media (min-width: 768px) {
  .common-heading01 .mt-8 {
    display: inline;
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .common-heading01 .mt-10 {
    display: block;
    margin-top: 10px;
  }
}
.common-heading01.-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 100vw;
  height: 2px;
  transform: translateX(-50%);
  background-color: var(--color-gray);
}
@media (min-width: 768px) {
  .common-heading01.-border {
    font-size: var(--font-size-36);
  }
}

/* =============================================
heading02
============================================= */
.common-heading02 {
  position: relative;
  font-size: var(--font-size-20);
  font-weight: bold;
  padding-left: 16px;
  color: var(--color-primary);
  line-height: 1.5;
}
@media (min-width: 768px) {
  .common-heading02 {
    font-size: var(--font-size-24);
  }
}
.common-heading02::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: calc(100% - 12px);
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--color-green) 0%, var(--color-green) 50%, var(--color-primary) 50%, var(--color-primary) 100%);
}
.common-heading02.-no-marker {
  padding: 0;
}
.common-heading02.-no-marker::before {
  display: none;
}
.common-heading02.-small {
  font-size: var(--font-size-18);
}
@media (min-width: 768px) {
  .common-heading02.-small {
    font-size: var(--font-size-20);
  }
}
.common-heading02.-x-small {
  font-size: var(--font-size-16);
}
@media (min-width: 768px) {
  .common-heading02.-x-small {
    font-size: var(--font-size-18);
  }
}

/* =============================================
button
============================================= */
.common-button {
  position: relative;
  display: inline-flex;
  width: 100%;
  height: 64px;
  max-width: 310px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: bold;
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .common-button {
    max-width: 420px;
  }
}
.common-button.-large {
  max-width: 343px;
  height: 80px;
  font-size: var(--font-size-18);
}
@media (min-width: 768px) {
  .common-button.-large {
    height: 96px;
    font-size: var(--font-size-20);
    max-width: 400px;
  }
}
.common-button.-large::after {
  width: 72px;
}
.common-button.-x-large {
  max-width: 440px;
  height: 80px;
  font-size: var(--font-size-18);
}
@media (min-width: 768px) {
  .common-button.-x-large {
    font-size: var(--font-size-20);
    height: 96px;
  }
}
.common-button.-yellow {
  color: var(--color-primary);
  background-color: var(--color-yellow);
  transition: background-color 0.2s ease-out;
}
.common-button.-yellow .common-button_ico {
  width: 48px;
  background-color: transparent;
}
.common-button.-yellow .common-button_ico::before, .common-button.-yellow .common-button_ico::after {
  left: 0;
  transform: translate(0, -50%);
}
.common-button.-yellow .common-button_ico::before {
  background-image: url("/relocation/images/common/ico_arrow_navy.svg");
}
.common-button.-yellow::before {
  background-color: var(--color-yellow02);
}
@media (hover: hover) and (pointer: fine) {
  .common-button.-yellow:hover::before {
    width: 100%;
  }
}
.common-button.-yellow .common-button_text::before {
  display: none;
}
.common-button.-white {
  color: var(--color-primary);
  background-color: var(--color-white);
}
.common-button.-white .common-button_ico {
  width: 48px;
  background-color: transparent;
}
.common-button.-white .common-button_ico::before, .common-button.-white .common-button_ico::after {
  left: 0;
  transform: translate(0, -50%);
}
.common-button.-white .common-button_ico::before {
  background-image: url("/relocation/images/common/ico_arrow.svg");
}
.common-button.-white::before {
  background-color: var(--color-purple05);
}
@media (hover: hover) and (pointer: fine) {
  .common-button.-white:hover {
    border-color: var(--color-green);
  }
  .common-button.-white:hover::before {
    width: 100%;
  }
}
.common-button.-white .common-button_text::before {
  display: none;
}
.common-button.-wire {
  color: var(--color-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  transition: border-color 0.2s ease-out;
}
.common-button.-wire .common-button_ico {
  background-color: transparent;
}
.common-button.-wire .common-button_ico::before {
  background-image: url("/relocation/images/common/ico_arrow.svg");
}
@media (hover: hover) and (pointer: fine) {
  .common-button.-wire:hover {
    border-color: var(--color-green);
  }
  .common-button.-wire:hover::before {
    width: 100%;
  }
}
.common-button.-wire .common-button_text::before {
  display: none;
}
.common-button:disabled {
  pointer-events: none;
  background-color: var(--color-gray08);
  color: var(--color-white);
}
.common-button:disabled .common-button_ico {
  background-color: transparent;
}
.common-button:disabled .common-button_ico::before, .common-button:disabled .common-button_ico::after {
  background-image: url("/relocation/images/common/ico_arrow_white.svg");
}
.common-button.-left {
  flex-direction: row-reverse;
  max-width: 220px;
}
@media (min-width: 768px) {
  .common-button.-left {
    max-width: 320px;
  }
}
.common-button.-left .common-button_ico {
  transform: rotate(180deg);
}
.common-button.-small {
  max-width: 252px;
  height: 56px;
  font-size: var(--font-size-14);
}
.common-button.-movie .common-button_ico {
  width: 56px;
  background-color: transparent;
}
.common-button.-movie .common-button_ico::before {
  background-image: url("/relocation/images/common/ico_window.svg");
}
.common-button.-movie .common-button_ico::after {
  background-image: url("/relocation/images/common/ico_window_navy.svg");
}
.common-button.-agree .common-button_ico {
  background-color: transparent;
}
.common-button.-agree .common-button_ico::before {
  background-image: url("/relocation/images/common/ico_agree_gray.svg");
}
.common-button.-agree .common-button_ico::after {
  background-image: url("/relocation/images/common/ico_agree.svg");
}
.common-button.-agree.is-active {
  border: 1px solid var(--color-green);
}
.common-button.-agree.is-active::before {
  width: 100%;
}
.common-button.-agree.is-active .common-button_ico {
  background-color: transparent;
}
.common-button.-agree.is-active .common-button_ico::before {
  opacity: 0;
}
.common-button.-agree.is-active .common-button_ico::after {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .common-button.-agree.is-active:hover .common-button_ico::before {
    opacity: 0;
  }
  .common-button.-agree.is-active:hover .common-button_ico::after {
    opacity: 1;
  }
}
@media (hover: hover) and (pointer: fine) {
  .common-button.-agree:hover .common-button_ico::before {
    opacity: 1;
  }
  .common-button.-agree:hover .common-button_ico::after {
    opacity: 0;
  }
}
.common-button .common-button_ico {
  position: relative;
  flex-shrink: 0;
  display: block;
  content: "";
  width: 52px;
  height: 100%;
  background-color: var(--color-green);
}
.common-button .common-button_ico::before, .common-button .common-button_ico::after {
  position: absolute;
  top: 50%;
  content: "";
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: opacity 0.2s ease-out;
}
.common-button .common-button_ico::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_arrow_white.svg");
}
.common-button .common-button_ico::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_arrow_navy.svg");
}
.common-button::before {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 0;
  height: 100%;
  background-color: var(--color-green);
  transition: width 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .common-button:hover .common-button_text {
    color: var(--color-primary);
  }
  .common-button:hover .common-button_text::before {
    width: 100%;
  }
  .common-button:hover .common-button_ico::before {
    opacity: 0;
  }
  .common-button:hover .common-button_ico::after {
    opacity: 1;
  }
  .common-button:hover .common-button_text span::before {
    opacity: 0;
  }
  .common-button:hover .common-button_text span::after {
    opacity: 1;
  }
}

.common-button_text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  line-height: 1.5;
  transition: color 0.2s ease-out;
}
.common-button_text span {
  position: relative;
}
.common-button_text span::before, .common-button_text span::after {
  display: none;
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 0.2s ease-out;
}
.common-button_text span::before {
  opacity: 1;
}
.common-button_text span::after {
  opacity: 0;
}
.common-button_text::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 0;
  height: 100%;
  transition: width 0.2s ease-out;
  background-color: var(--color-green);
}
.common-button.-mail .common-button_text span {
  padding-left: 32px;
}
.common-button.-mail .common-button_text span::before {
  display: block;
  background-image: url("/relocation/images/common/ico_mail.svg");
}
.common-button.-mail .common-button_text span::after {
  display: block;
  background-image: url("/relocation/images/common/ico_mail.svg");
}
.common-button.-mail.-large .common-button_text span, .common-button.-mail.-x-large .common-button_text span {
  padding-left: 40px;
}
.common-button.-mail.-large .common-button_text span::before, .common-button.-mail.-x-large .common-button_text span::before {
  display: block;
  width: 32px;
  height: 32px;
  background-image: url("/relocation/images/common/ico_mail.svg");
}
.common-button.-mail.-large .common-button_text span::after, .common-button.-mail.-x-large .common-button_text span::after {
  display: block;
  width: 32px;
  height: 32px;
  background-image: url("/relocation/images/common/ico_mail.svg");
}
.common-button.-mail.-white .common-button_text span::before {
  display: block;
  background-image: url("/relocation/images/common/ico_mail02.svg");
}
.common-button.-mail.-white .common-button_text span::after {
  display: block;
  background-image: url("/relocation/images/common/ico_mail.svg");
}
.common-button.-doc .common-button_text span {
  padding-left: 32px;
}
.common-button.-doc .common-button_text span::before {
  display: block;
  background-image: url("/relocation/images/common/ico_doc.svg");
}
.common-button.-doc .common-button_text span::after {
  display: block;
  background-image: url("/relocation/images/common/ico_doc_navy.svg");
}
.common-button.-doc.-large .common-button_text span, .common-button.-doc.-x-large .common-button_text span {
  padding-left: 40px;
}
.common-button.-doc.-large .common-button_text span::before, .common-button.-doc.-x-large .common-button_text span::before {
  display: block;
  width: 32px;
  height: 32px;
  background-image: url("/relocation/images/common/ico_doc.svg");
}
.common-button.-doc.-large .common-button_text span::after, .common-button.-doc.-x-large .common-button_text span::after {
  display: block;
  width: 32px;
  height: 32px;
  background-image: url("/relocation/images/common/ico_doc_navy.svg");
}
.common-button.-pen .common-button_text span {
  padding-left: 32px;
}
.common-button.-pen .common-button_text span::before {
  display: block;
  background-image: url("/relocation/images/common/ico_pen.svg");
}
.common-button.-pen .common-button_text span::after {
  display: block;
  background-image: url("/relocation/images/common/ico_pen.svg");
}
.common-button.-movie .common-button_text span {
  padding-left: 32px;
}
.common-button.-movie .common-button_text span::before {
  display: block;
  background-image: url("/relocation/images/common/ico_play.svg");
}
.common-button.-movie .common-button_text span::after {
  display: block;
  background-image: url("/relocation/images/common/ico_play.svg");
}

/* =============================================
bubble
============================================= */
.common-bubble {
  width: 100%;
  text-align: center;
  max-width: 310px;
}
@media (min-width: 768px) {
  .common-bubble {
    max-width: 420px;
  }
}
.common-bubble .bubble {
  display: inline-block;
  position: relative;
  line-height: 1;
  padding: 16px 16px 11px 16px;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  border-top: 1px solid var(--color-black);
  border-right: 1px solid var(--color-black);
  border-left: 1px solid var(--color-black);
  margin-bottom: 30px;
}
.common-bubble .bubble::before {
  display: block;
  position: absolute;
  content: "";
  bottom: -5px;
  left: -1px;
  width: calc(50% - 9px);
  height: 5px;
  border-radius: 0 0 0 4px;
  border-bottom: 1px solid var(--color-black);
  border-left: 1px solid var(--color-black);
}
.common-bubble .bubble::after {
  display: block;
  position: absolute;
  content: "";
  bottom: -5px;
  right: -1px;
  width: calc(50% - 9px);
  height: 5px;
  border-radius: 0 0 4px 0;
  border-bottom: 1px solid var(--color-black);
  border-right: 1px solid var(--color-black);
}
.common-bubble .bubble .arrow {
  position: absolute;
  bottom: -14px;
  left: 50%;
  width: 22px;
  height: 10px;
  background-image: url("/relocation/images/common/ico_bubble_arrow.svg");
  transform: translateX(-50%);
  background-size: contain;
  background-repeat: no-repeat;
}
.common-bubble.-large {
  max-width: 343px;
}
@media (min-width: 768px) {
  .common-bubble.-large {
    max-width: 400px;
  }
}
.common-bubble.-white .bubble {
  border-color: var(--color-white);
  color: var(--color-white);
}
.common-bubble.-white .bubble::before, .common-bubble.-white .bubble::after {
  border-color: var(--color-white);
}
.common-bubble.-white .bubble .arrow {
  background-image: url("/relocation/images/common/ico_bubble_arrow_white.svg");
}

/* =============================================
kv01
============================================= */
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showAndUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.common-kv01 {
  position: relative;
  height: 300px;
  background-repeat: no-repeat;
  animation: show 1s ease-out forwards;
}
@media (min-width: 768px) {
  .common-kv01 {
    height: 400px;
  }
}

.common-kv01_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.common-kv01_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: right top;
     object-position: right top;
}

.common-kv01_inner {
  padding: 64px 16px;
  height: 100%;
}
@media (min-width: 768px) {
  .common-kv01_inner {
    padding: 0 16px 0 120px;
    display: flex;
    align-items: center;
  }
}

.common-kv01_heading {
  color: var(--color-white);
  font-size: var(--font-size-32);
  opacity: 0;
  transform: translateY(30px);
  text-align: center;
  animation: showAndUp 0.6s ease-out forwards 1s;
}
@media (min-width: 768px) {
  .common-kv01_heading {
    text-align: left;
    font-size: var(--font-size-40);
  }
}

/* =============================================
kv02
============================================= */
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showAndUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.common-kv02 {
  position: relative;
  padding: 32px 24px;
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  color: var(--color-primary);
  height: 380px;
  animation: show 1s ease-out forwards;
}
@media (min-width: 768px) {
  .common-kv02 {
    display: flex;
    align-items: center;
    padding: 0;
  }
}

.common-kv02_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.common-kv02_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom;
     object-position: bottom;
}
@media (min-width: 768px) {
  .common-kv02_img img {
    -o-object-position: 70% bottom;
       object-position: 70% bottom;
  }
}
@media (min-width: 1024px) {
  .common-kv02_img img {
    -o-object-position: right top;
       object-position: right top;
  }
}

@media (min-width: 768px) {
  .common-kv02_inner {
    padding-left: 60px;
  }
}
@media (min-width: 1024px) {
  .common-kv02_inner {
    padding-left: 120px;
  }
}

.common-kv02_box {
  opacity: 0;
  transform: translateY(30px);
  animation: showAndUp 0.6s ease-out forwards 1s;
}

.common-kv02_heading .small {
  font-size: var(--font-size-12);
  line-height: 1;
  padding: 10px 14px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .common-kv02_heading .small {
    font-size: var(--font-size-14);
  }
}
.common-kv02_heading .small + .big {
  margin-top: 16px;
}
.common-kv02_heading .big {
  display: block;
  font-size: var(--font-size-32);
}
@media (min-width: 768px) {
  .common-kv02_heading .big {
    font-size: var(--font-size-40);
  }
}

.common-kv02_message {
  margin-top: 16px;
  font-weight: bold;
  text-shadow: 
    #fff 1px 1px 2px, #fff -1px 1px 2px,
    #fff 1px -1px 2px, #fff -1px -1px 2px;
}
@media (min-width: 768px) {
  .common-kv02_message {
    font-size: var(--font-size-20);
    margin-top: 28px;
  }
}
.common-kv02_message span {
  display: block;
}
.common-kv02_message span:last-child {
  margin-top: 8px;
}
@media (min-width: 768px) {
  .common-kv02_message span:last-child {
    margin-top: 12px;
  }
}

/* =============================================
kv03
============================================= */
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showAndUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.common-kv03 {
  position: relative;
  opacity: 0;
  animation: show 1s ease-out forwards;
}

.common-kv03_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.common-kv03_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media (min-width: 768px) {
  .common-kv03_img img {
    -o-object-position: right top;
       object-position: right top;
  }
}

.common-kv03_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 280px;
  padding: 0 16px;
}

.common-kv03_heading {
  text-align: center;
  color: var(--color-white);
  opacity: 0;
  transform: translateY(30px);
  animation: showAndUp 0.6s ease-out forwards 1s;
}
.common-kv03_heading .small {
  line-height: 1;
  font-size: var(--font-size-12);
  padding: 10px 14px;
  border: 1px solid var(--color-white);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .common-kv03_heading .small {
    font-size: var(--font-size-14);
  }
}
.common-kv03_heading .big {
  display: block;
  margin-top: 16px;
  font-size: var(--font-size-32);
  line-height: 1.25;
}
@media (min-width: 768px) {
  .common-kv03_heading .big {
    font-size: var(--font-size-40);
  }
}

/* =============================================
kv04
============================================= */
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showAndUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.common-kv04 {
  opacity: 0;
  animation: show 1s ease-out forwards;
}

@media (min-width: 768px) {
  .common-kv04_inner {
    display: flex;
  }
}

.common-kv04_heading {
  text-align: center;
  color: var(--color-primary);
  padding: 40px 16px 28px;
  opacity: 0;
  transform: translateY(30px);
  animation: showAndUp 0.6s ease-out forwards 1s;
}
@media (min-width: 768px) {
  .common-kv04_heading {
    padding: 68px 16px 68px;
    width: 50%;
  }
}
.common-kv04_heading .small {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-14);
}
@media (min-width: 1024px) {
  .common-kv04_heading .small {
    font-size: var(--font-size-16);
  }
}
.common-kv04_heading .small::before, .common-kv04_heading .small::after {
  display: block;
  content: "";
  width: 2px;
  height: 19px;
  background-color: var(--color-primary);
  border-radius: 2px;
}
.common-kv04_heading .small::before {
  transform: rotate(-30deg);
}
.common-kv04_heading .small::after {
  transform: rotate(30deg);
}
.common-kv04_heading .big {
  margin-top: 4px;
  font-size: var(--font-size-32);
}
@media (min-width: 1024px) {
  .common-kv04_heading .big {
    font-size: var(--font-size-40);
  }
}

.common-kv04_img {
  position: relative;
  height: 126px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .common-kv04_img {
    width: 50%;
    height: auto;
    border-radius: 0 0 0 16px;
  }
}
.common-kv04_img .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.common-kv04_img .img img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}

/* =============================================
kv05
============================================= */
.common-kv05 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-primary);
  font-size: var(--font-size-28);
  height: 160px;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .common-kv05 {
    font-size: var(--font-size-36);
  }
}
.common-kv05 span {
  display: inline-block;
}

/* =============================================
news
============================================= */
.common-news_item {
  display: block;
  padding: 32px 16px;
  border-bottom: 1px solid var(--color-gray);
}
.common-news_item:first-child {
  border-top: 1px solid var(--color-gray);
}
@media (min-width: 768px) {
  .common-news_item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 27px 24px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .common-news_item:hover .common-news_text {
    color: var(--color-navy);
  }
  .common-news_item:hover .common-news_text .text {
    display: inline;
    background: linear-gradient(var(--color-navy), var(--color-navy)) 0 100%/100% 1px no-repeat;
  }
  .common-news_item:hover .common-news_text .arrow::before {
    opacity: 0;
  }
  .common-news_item:hover .common-news_text .arrow::after {
    opacity: 1;
  }
}

.common-news_info {
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (min-width: 768px) {
  .common-news_info {
    gap: 24px;
  }
}

.common-news_date {
  color: var(--color-gray04);
  letter-spacing: 0.03em;
  font-family: "Hind", sans-serif;
}
@media (min-width: 768px) {
  .common-news_date {
    font-size: var(--font-size-18);
  }
}

.common-news_label {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  color: var(--color-primary);
  font-size: var(--font-size-12);
  font-weight: bold;
  padding: 8px 16px;
  min-width: 108px;
  border: 1px solid var(--color-gray07);
}

.common-news_text {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  line-height: 1.8;
  color: var(--color-black);
  transition: color 0.2s ease-out;
  font-size: var(--font-size-14);
  font-weight: bold;
}
@media (min-width: 768px) {
  .common-news_text {
    width: 100%;
    justify-content: space-between;
    gap: 24px;
    font-size: var(--font-size-16);
    margin-top: 0;
    overflow: hidden;
  }
}
.common-news_text .arrow {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.common-news_text .arrow::before, .common-news_text .arrow::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 0.2s ease-out;
}
.common-news_text .arrow::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_arrow.svg");
}
.common-news_text .arrow::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_arrow_purple.svg");
}
.common-news_text span:first-child {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media (min-width: 768px) {
  .common-news_text span:first-child {
    -webkit-line-clamp: 1;
  }
}

/* =============================================
contactArea
============================================= */
.common-contactArea {
  padding: 48px 16px;
  background-color: var(--color-primary);
  background-image: url("/relocation/images/common/bg_contact_s.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .common-contactArea {
    padding: 40px 16px;
    background-image: url("/relocation/images/common/bg_contact_l.png");
  }
}
.common-contactArea .text {
  display: block;
}

.common-contactArea_heading {
  text-align: center;
  font-size: var(--font-size-20);
  font-weight: bold;
  color: var(--color-white);
}
@media (min-width: 768px) {
  .common-contactArea_heading {
    font-size: var(--font-size-24);
  }
}

.common-contactArea_buttonGroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
@media (min-width: 768px) {
  .common-contactArea_buttonGroup {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
}
.common-contactArea.-bubble .common-contactArea_buttonGroup {
  gap: 32px;
}
@media (min-width: 768px) {
  .common-contactArea.-bubble .common-contactArea_buttonGroup {
    gap: 24px;
  }
}

.common-nxLogoArea{
	padding: 24px 16px;
	background-color: #f9f2fc;
}
.common-nxLogoArea .common-contactArea_heading{
	color: var(--color-black);
}
.common-nxLogoArea_innner{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
.common-nxLogoArea_bannerBox {
	margin-left: 30px;
    text-align: center;
    flex-shrink: 0;
}
.common-nxLogoArea_bannerBox img {
	width: 200px;
}
@media (max-width: 600px) {
	.common-nxLogoArea_innner{
		display: block;
		text-align: center;
	}
	.common-nxLogoArea_bannerBox {
		margin-left: 0;
		margin-top: 20px;
	}
}


/* =============================================
tab
============================================= */
.common-tab {
  background-color: var(--color-primary);
}

.common-tab_inner {
  padding: 8px 8px 0;
}

.common-tab_group {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 8px;
}

.common-tab_button {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  width: 100%;
  padding: 12px 4px 16px;
  font-size: var(--font-size-14);
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  color: var(--color-white);
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  background-color: rgba(255, 255, 255, 0.2);
}
@media (min-width: 768px) {
  .common-tab_button {
    flex-direction: row;
    justify-content: center;
    font-size: var(--font-size-16);
    padding: 20px 4px;
  }
}
.common-tab_button::before {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
}
.common-tab_button:first-child::before {
  background-image: url("/relocation/images/common/ico_japan.svg");
  transition: background-image 0.2s ease-out;
}
.common-tab_button:last-child::before {
  background-image: url("/relocation/images/common/ico_earth.svg");
  transition: background-image 0.2s ease-out;
}
.common-tab_button.is-active {
  color: var(--color-black);
  background-color: var(--color-white);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .common-tab_button:hover {
    background-color: var(--color-green);
    color: var(--color-primary);
  }
  .common-tab_button:hover:first-child::before {
    background-image: url("/relocation/images/common/ico_japan_navy.svg");
  }
  .common-tab_button:hover:last-child::before {
    background-image: url("/relocation/images/common/ico_earth_navy.svg");
  }
}

/* =============================================
link
============================================= */
.common-link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--color-primary);
  gap: 12px;
  transition: color 0.2s ease-out, background 0.2s ease-out;
}
.common-link .arrow ,.common-link .window {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.common-link .arrow::before, .common-link .arrow::after ,
.common-link .window::before, .common-link .window:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}
.common-link .arrow::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_arrow.svg");
  transition: opacity 0.2s ease-out;
}
.common-link .arrow::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_arrow_purple.svg");
  transition: opacity 0.2s ease-out;
}
.common-link .window::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_window.svg");
  transition: opacity 0.2s ease-out;
}
.common-link .window::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_window_navy.svg");
  transition: opacity 0.2s ease-out;
}
.common-link span:first-child {
  transition: background 0.2s ease-out;
  background: linear-gradient(var(--color-navy), var(--color-navy)) 0 100%/0 1px no-repeat;
}
.common-link.-small {
  font-size: var(--font-size-14);
}
.common-link.-medium {
  font-size: var(--font-size-18);
}
.common-link.-large {
  font-size: var(--font-size-20);
}
.common-link.-x-large {
  font-size: var(--font-size-24);
}
.common-link.-thin {
  font-weight: normal;
}
.common-link.-en {
  gap: 4px;
  font-family: "Hind", sans-serif;
}
.common-link.-en .arrow {
  bottom: 2px;
  width: 20px;
  height: 20px;
}
@media (hover: hover) and (pointer: fine) {
  .common-link:hover .arrow::before ,.common-link:hover .window::before {
    opacity: 0;
  }
  .common-link:hover .arrow::after ,.common-link:hover .window::after {
    opacity: 1;
  }
  .common-link:hover span:first-child {
    background-size: 100% 1px;
  }
}

/* =============================================
icoLink
============================================= */
.common-icoLink {
  display: inline-flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  color: var(--color-primary);
  background-color: var(--color-white);
  font-size: var(--font-size-14);
  border-radius: 4px;
  padding: 8px 16px 8px 8px;
  font-weight: bold;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s ease-out;
  max-width: 584px;
}
@media (min-width: 768px) {
  .common-icoLink {
    gap: 24px;
    font-size: var(--font-size-16);
  }
}
.common-icoLink .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 67px;
  height: 64px;
  border-radius: 4px;
  background-color: var(--color-purple);
  flex-shrink: 0;
}
.common-icoLink .ico img {
  width: 48px;
}
.common-icoLink .common-icoLink_text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  transition: color 0.2s ease-out;
}
.common-icoLink .common-icoLink_text .arrow {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.common-icoLink .common-icoLink_text .arrow::before, .common-icoLink .common-icoLink_text .arrow::after {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 0.2s ease-out;
}
.common-icoLink .common-icoLink_text .arrow::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_arrow.svg");
}
.common-icoLink .common-icoLink_text .arrow::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_arrow_purple.svg");
}
@media (hover: hover) and (pointer: fine) {
  .common-icoLink:hover {
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);
  }
  .common-icoLink:hover .common-icoLink_text .arrow::before {
    opacity: 0;
  }
  .common-icoLink:hover .common-icoLink_text .arrow::after {
    opacity: 1;
  }
  .common-icoLink:hover .common-icoLink_text span {
    color: var(--color-navy);
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
}

/* =============================================
option
============================================= */
.common-option {
  padding: 64px 16px;
  background-color: var(--color-gray09);
}
@media (min-width: 768px) {
  .common-option {
    padding: 80px 16px;
  }
}

.common-option_contents {
  max-width: 1200px;
  margin: 0 auto;
}

.common-option_list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .common-option_list {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .common-option_item {
    width: calc((100% - 32px) / 2);
  }
}
.common-option_item .description {
  font-weight: bold;
  margin-top: 12px;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .common-option_item .description {
    margin-top: 18px;
  }
}

.common-option_box:not(:first-child) {
  margin-top: 64px;
}
@media (min-width: 768px) {
  .common-option_box:not(:first-child) {
    margin-top: 80px;
  }
}

/* =============================================
flow
============================================= */
@keyframes lineAnimation {
  0% {
    height: calc(100% + 12px);
  }
  100% {
    height: 0;
  }
}
.common-flow_inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media (min-width: 768px) {
  .common-flow_inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 56px;
  }
}

.common-flow_box {
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: relative;
}
@media (min-width: 768px) {
  .common-flow_box {
    width: calc((100% - 56px) / 2);
  }
}
.common-flow_box::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 48px;
  width: 2px;
  height: 100%;
  background-color: var(--color-gray03);
}
@media (min-width: 768px) {
  .common-flow_box::before {
    top: 0;
  }
}
.common-flow_box::after {
  display: block;
  content: "";
  position: absolute;
  width: 2px;
  bottom: -24px;
  left: 0;
  height: calc(100% + 12px);
  background-color: var(--color-white);
  animation: lineAnimation 0.8s forwards 0.6s;
  animation-timing-function: linear;
}
@media (min-width: 768px) {
  .common-flow_box::after {
    animation-timing-function: ease-out;
  }
}
.common-flow_box:last-child {
  padding-bottom: 48px;
}
@media (min-width: 768px) {
  .common-flow_box:last-child {
    padding-bottom: 88px;
  }
}
.common-flow_box:last-child::before {
  top: 0;
}
.common-flow_box:last-child::after {
  bottom: 12px;
  animation: lineAnimation 0.8s forwards 1.4s;
}
.common-contents.is-hidden .common-flow_box::after {
  animation: none;
}

.common-flow_item {
  position: relative;
  padding: 20px 0 0 24px;
}
@media (min-width: 768px) {
  .common-flow_item {
    padding: 26px 0 0 32px;
  }
}
.common-flow_item::before {
  display: block;
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  left: 0;
  top: 0;
  background-color: var(--color-primary);
}
.common-flow_box:first-child .common-flow_item:first-child::after {
  display: block;
  position: absolute;
  content: "";
  left: -5px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-primary);
}
.common-flow_box:last-child .common-flow_item:last-child::after {
  display: block;
  position: absolute;
  content: "";
  left: -5px;
  bottom: -48px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-primary);
}
@media (min-width: 768px) {
  .common-flow_box:last-child .common-flow_item:last-child::after {
    bottom: -88px;
  }
}

@media (min-width: 768px) {
  .common-flow_detail {
    display: flex;
    gap: 48px;
  }
}

.common-flow_step {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  font-family: "Hind", sans-serif;
}
.common-flow_step .num {
  font-size: var(--font-size-40);
  letter-spacing: 0.03em;
}

.common-flow_contents {
  margin-top: 12px;
}
@media (min-width: 768px) {
  .common-flow_contents {
    margin: 0;
  }
}
.common-flow_contents .description {
  margin-top: 6px;
  font-weight: bold;
  line-height: 1.8;
}

.common-flow_button {
  margin-top: 20px;
}
.common-flow_contents .common-flow_button img {
  border: 1px solid var(--color-primary);
  transition: opacity 0.2s ease-out;
}
.common-flow_contents .common-flow_button:hover img {
  opacity: 0.7;
}

.common-flow_accordion {
  position: relative;
  margin-top: 24px;
}
.common-flow_accordion details {
  position: relative;
  background-color: var(--color-gray09);
  border-radius: 4px;
}
.common-flow_accordion details::before {
  display: block;
  content: "";
  position: absolute;
  left: -24px;
  top: 72px;
  width: 2px;
  height: calc(100% - 72px);
  background-color: var(--color-gray03);
}
@media (min-width: 768px) {
  .common-flow_accordion details::before {
    left: -32px;
  }
}
.common-flow_accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  gap: 16px;
  width: 100%;
  padding: 24px 16px 24px 24px;
  transition: color 0.2s ease-out;
}
.common-flow_accordion summary .expand {
  display: block;
  position: relative;
  width: 16px;
  height: 16px;
}
.common-flow_accordion summary .expand::before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background-color: var(--color-green);
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease-out;
}
.common-flow_accordion summary .expand::after {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  left: 50%;
  width: 2px;
  height: 16px;
  background-color: var(--color-primary);
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: background-color 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .common-flow_accordion summary:hover {
    color: var(--color-navy);
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
  .common-flow_accordion summary:hover .expand::after, .common-flow_accordion summary:hover .expand::before {
    background-color: var(--color-navy);
  }
}
.common-flow_accordion .panel {
  overflow: hidden;
}
.common-flow_accordion .contents {
  padding: 12px 24px 32px;
}
.common-flow_accordion .box:not(:first-child) {
  margin-top: 30px;
}
.common-flow_accordion .description {
  margin-top: 6px;
  font-weight: bold;
}
.common-flow_accordion .common-accordion_mvButton {
  margin-top: 20px;
}
.common-flow_accordion details.is-opened .expand::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* =============================================
price
============================================= */
.common-price {
  padding: 64px 16px;
}

.common-price_heading {
  text-align: center;
  color: var(--color-primary);
}
.common-price_heading .sub {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-14);
}
@media (min-width: 768px) {
  .common-price_heading .sub {
    font-size: var(--font-size-16);
  }
}
.common-price_heading .sub::before, .common-price_heading .sub::after {
  display: block;
  content: "";
  width: 8px;
  height: 2px;
  background-color: var(--color-primary);
}
.common-price_heading .main {
  font-size: var(--font-size-20);
  margin-top: 4px;
}
@media (min-width: 768px) {
  .common-price_heading .main {
    font-size: var(--font-size-24);
  }
}

.common-price_buttonGroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
@media (min-width: 768px) {
  .common-price_buttonGroup {
    gap: 24px;
    margin-top: 36px;
  }
}

/* =============================================
anker
============================================= */
.common-anker {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .common-anker {
    flex-direction: row;
    justify-content: center;
  }
}

.common-anker_link {
  display: block;
  padding: 20px 0;
  font-weight: bold;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .common-anker_link {
    width: 24.5%;
  }
}
.common-anker_link .common-anker_text {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: space-between;
  border-right: 1px solid var(--color-gray03);
  border-left: 1px solid var(--color-gray03);
  padding: 0 16px 0 24px;
}
@media (min-width: 768px) {
  .common-anker_link .common-anker_text {
    justify-content: center;
    padding: 0 8px;
    border-right: 0;
  }
}
.common-anker_link .common-anker_text .chevron {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}
.common-anker_link .common-anker_text .chevron::before, .common-anker_link .common-anker_text .chevron::after {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(90deg);
  transition: opacity 0.2s ease-out;
}
.common-anker_link .common-anker_text .chevron::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_chevron.svg");
}
.common-anker_link .common-anker_text .chevron::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_chevron_purple.svg");
}
@media (min-width: 768px) {
  .common-anker_link:last-child .common-anker_text {
    border-right: 1px solid var(--color-gray03);
  }
}
@media (hover: hover) and (pointer: fine) {
  .common-anker_link:hover .common-anker_text span:first-child {
    color: var(--color-navy);
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
  .common-anker_link:hover .chevron::before {
    opacity: 0;
  }
  .common-anker_link:hover .chevron::after {
    opacity: 1;
  }
}

/* =============================================
table
============================================= */
.common-table {
  overflow-x: auto;
  padding: 0 16px;
}
.common-table table {
  min-width: 596px;
}
@media (min-width: 768px) {
  .common-table table {
    min-width: 800px;
  }
}
table tr,.common-table tr,
table th,.common-table th,
table td ,.common-table td {
  border-collapse: collapse;
  border: 1px solid var(--color-gray10);
  font-size: var(--font-size-14);
}
@media (min-width: 768px) {
  table tr,.common-table tr,
  table th,.common-table th,
  table td ,.common-table td {
    font-size: var(--font-size-16);
  }
}
table th ,.common-table th {
  background-color: var(--color-gray);
}
table th,.common-table th,
table td ,.common-table td {
  padding: 16px;
  line-height: 1.8;
}
table td[colspan] ,.common-table td[colspan] {
  text-align: center;
}
table tbody th ,.common-table tbody th {
  text-align: left;
}
.common-table.-center table {
  margin: 0 auto;
}

/* =============================================
accordion
============================================= */
.common-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  line-height: 1.8;
}

.common-accordion_button {
  display: flex;
  gap: 12px;
  background-color: var(--color-gray09);
  padding: 20px 16px;
  transition: color 0.2s ease-out;
  border-radius: 4px;
}
@media (min-width: 768px) {
  .common-accordion_button {
    gap: 16px;
    align-items: center;
    padding: 24px 32px;
  }
}
.common-accordion_button .ico {
  position: relative;
  top: 4px;
  font-size: var(--font-size-24);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
  transition: color 0.2s ease-out;
  font-family: "Hind", sans-serif;
}
@media (min-width: 768px) {
  .common-accordion_button .ico {
    top: 0;
  }
}
.common-accordion_button > .box {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: 16px;
}
.common-accordion_button .text {
  font-weight: bold;
}
.common-accordion_button .expand {
  display: block;
  position: relative;
  width: 16px;
  height: 16px;
}
.common-accordion_button .expand::before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background-color: var(--color-green);
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease-out;
}
.common-accordion_button .expand::after {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  left: 50%;
  width: 2px;
  height: 16px;
  background-color: var(--color-primary);
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: background-color 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out;
}
details.is-opened .common-accordion_button {
  border-radius: 4px 4px 0 0;
}
details.is-opened .common-accordion_button .expand::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .common-accordion_button:hover {
    color: var(--color-navy);
  }
  .common-accordion_button:hover .text {
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
  .common-accordion_button:hover .ico {
    color: var(--color-navy);
  }
  .common-accordion_button:hover .expand::after, .common-accordion_button:hover .expand::before {
    background-color: var(--color-navy);
  }
}

.common-accordion_panelWrapper {
  overflow: hidden;
}

.common-accordion_panel {
  margin-top: 4px;
  overflow: hidden;
  background-color: var(--color-green02);
  border-radius: 0 0 4px 4px;
  font-weight: bold;
}
.common-accordion_panel .ico {
  position: relative;
  top: 4px;
  font-size: var(--font-size-24);
  font-weight: 600;
  color: var(--color-green);
  line-height: 1;
  font-family: "Hind", sans-serif;
}
@media (min-width: 768px) {
  .common-accordion_panel .ico {
    top: 0;
  }
}
.common-accordion_panel .box {
  display: flex;
  gap: 12px;
  padding: 20px 16px;
}
@media (min-width: 768px) {
  .common-accordion_panel .box {
    gap: 16px;
    align-items: center;
    padding: 28px 32px;
  }
}

/* =============================================
sideMenu
============================================= */
.common-sideMenu {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-700);
  transition: opacity 0.2s ease-out;
}
@media (min-width: 768px) {
  .common-sideMenu {
    display: block;
    right: 0;
    left: auto;
    bottom: 80px;
    width: 112px;
  }
}
.common-sideMenu.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.common-sideMenu_link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 50%;
  padding: 16px 8px;
  align-items: center;
  font-size: var(--font-size-13);
  font-weight: bold;
  line-height: 1;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
@media (min-width: 768px) {
  .common-sideMenu_link {
    width: 100%;
    padding: 22px 8px;
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  .common-sideMenu_link span {
    font-size: var(--font-size-14);
  }
}
.common-sideMenu_link:first-child {
  color: var(--color-primary);
  background-color: var(--color-yellow);
}
@media (min-width: 768px) {
  .common-sideMenu_link:first-child {
    border-radius: 4px 0 0 0;
  }
}
.common-sideMenu_link:first-child .ico::before {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .common-sideMenu_link:first-child:hover {
    background-color: var(--color-yellow02);
  }
}
.common-sideMenu_link:last-child {
  color: var(--color-white);
  background-color: var(--color-primary);
}
@media (min-width: 768px) {
  .common-sideMenu_link:last-child {
    border-radius: 0 0 0 4px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .common-sideMenu_link:last-child:hover {
    background-color: var(--color-navy02);
  }
}
.common-sideMenu_link.-mail .ico {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}
.common-sideMenu_link.-mail .ico::before, .common-sideMenu_link.-mail .ico::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}
.common-sideMenu_link.-mail .ico::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_mail.svg");
  transition: opacity 0.2s ease-out;
}
.common-sideMenu_link.-doc .ico {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}
.common-sideMenu_link.-doc .ico::before, .common-sideMenu_link.-doc .ico::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 0.2s ease-out;
}
.common-sideMenu_link.-doc .ico::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_doc_white.svg");
}
.common-sideMenu_link.-doc .ico::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_doc_white02.svg");
}
@media (hover: hover) and (pointer: fine) {
  .common-sideMenu_link.-doc:hover .ico::before {
    opacity: 0;
  }
  .common-sideMenu_link.-doc:hover .ico::after {
    opacity: 1;
  }
}

/* =============================================
contents
============================================= */
.common-contents {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.common-contents.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(50px);
}

/* =============================================
modal
============================================= */
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}
.common-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-1100);
}
.common-modal.is-open {
  display: block;
}

.common-modal_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.common-modal[aria-hidden=false] .common-modal_bg {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.common-modal[aria-hidden=true] .common-modal_bg {
  animation: mmfadeOut 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.common-modal_container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 40px);
  max-width: 800px;
  transform: translate(-50%, -50%);
  background-color: var(--color-purple);
  border-radius: 4px;
  text-align: right;
  padding: 77px 24px;
}
@media (min-width: 768px) {
  .common-modal_container {
    padding: 64px 24px;
  }
}
.common-modal[aria-hidden=false] .common-modal_container {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.common-modal[aria-hidden=true] .common-modal_container {
  animation: mmfadeOut 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.common-modal_button {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: var(--color-white);
  right: 8px;
  top: 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease-out;
}
@media (min-width: 768px) {
  .common-modal_button {
    top: 16px;
    right: 16px;
  }
}
.common-modal_button span {
  position: relative;
  display: block;
  height: 100%;
}
.common-modal_button span::before {
  position: absolute;
  display: block;
  content: "";
  width: 16px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: var(--color-green);
  transition: background-color 0.2s ease-out;
}
.common-modal_button span::after {
  position: absolute;
  display: block;
  content: "";
  width: 16px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background-color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {
  .common-modal_button:hover {
    background-color: var(--color-green);
  }
  .common-modal_button:hover span::before {
    background-color: var(--color-primary);
  }
}

.common-modal_contents {
  width: 100%;
}
.common-modal_contents .movie {
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 295/166;
  margin: 0 auto;
  max-width: 600px;
}
.common-modal_contents .movie iframe {
  width: 100%;
  height: 100%;
}

/* =============================================
trail
============================================= */
.common-trail {
  font-size: var(--font-size-12);
  line-height: 1;
  overflow-x: auto;
  white-space: nowrap;
}

ol {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1024px) {
  ol {
    padding: 12px 16px 12px 120px;
  }
}
ol li {
  display: flex;
  align-items: center;
  gap: 8px;
}
ol li:not(:last-child)::after {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("/relocation/images/common/ico_chevron_gray.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
ol a {
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-color: var(--color-black);
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease-out, color 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  ol a:hover {
    text-decoration-color: var(--color-navy);
  }
}

/* =============================================
search
============================================= */
.common-search {
  position: fixed;
  width: 100%;
  top: 96px;
  background-color: var(--color-purple);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 48px 16px;
  z-index: var(--z-850);
  transform: translateY(0);
  transition: transform 0.2s ease-out;
}
@media (min-width: 1024px) {
  .common-search {
    display: flex;
  }
}
.common-search form {
  display: flex;
  max-width: 500px;
  width: 100%;
  height: 56px;
}
.common-search input {
  border: none;
  width: 100%;
  height: 100%;
  padding: 0 24px;
  font-size: var(--font-size-14);
  border-radius: 4px 0 0 4px;
}
.common-search .submit {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background-color: var(--color-primary);
  border-radius: 0 4px 4px 0;
  transition: background-color 0.2s ease-out;
}
.common-search .submit {
     height: 100%;
}
.common-search .submit::before, .common-search .submit::after {
  position: absolute;
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}
.common-search .submit::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_search_white.svg");
}
.common-search .submit::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_search_navy.svg");
}
@media (hover: hover) and (pointer: fine) {
  .common-search .submit:hover {
    background-color: var(--color-green);
  }
  .common-search .submit:hover::before {
    opacity: 0;
  }
  .common-search .submit:hover::after {
    opacity: 1;
  }
}
.common-search .close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: var(--color-white);
  transition: background-color 0.2s ease-out;
}
.common-search .close span {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.common-search .close span::before {
  position: absolute;
  display: block;
  content: "";
  width: 16px;
  height: 2px;
  background-color: var(--color-green);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: background-color 0.2s ease-out;
}
.common-search .close span::after {
  position: absolute;
  display: block;
  content: "";
  width: 16px;
  height: 2px;
  background-color: var(--color-primary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
  .common-search .close:hover {
    background-color: var(--color-green);
  }
  .common-search .close:hover span::before {
    background-color: var(--color-primary);
  }
}
.common-search[aria-hidden=true] {
  transform: translateY(-101%);
  pointer-events: none;
}

/* =============================================
goTop
============================================= */
.common-goTop {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 48px;
  height: 48px;
  background-color: var(--color-green);
  border-radius: 4px;
}
.common-goTop::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("/relocation/images/common/ico_chevron_white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
  transition: transform 0.2s ease-out, background-image 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .common-goTop:hover::before {
    transform: rotate(-90deg) translateX(3px);
    background-image: url("/relocation/images/common/ico_chevron.svg");
  }
}

/* =============================================
ankerTarget
============================================= */
.common-ankerTarget {
  position: absolute;
  top: -60px;
}
@media (min-width: 768px) {
  .common-ankerTarget {
    top: -80px;
  }
}

/* =============================================
progress
============================================= */
.common-progress {
  max-width: 560px;
}

.common-progress_list {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.common-progress_item {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.common-progress_item::before {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-gray03);
  height: 2px;
  width: 100%;
  bottom: 5px;
}
.common-progress_item:not(:last-child) {
  padding-right: 32px;
}
@media (min-width: 768px) {
  .common-progress_item:not(:last-child) {
    padding-right: 48px;
  }
}
.common-progress_item:first-child::before {
  left: calc((100% - 36px) / 2);
  transform: translateX(0);
}
.common-progress_item:first-child.is-active::before {
  left: calc((100% - 24px) / 2);
}
.common-progress_item:last-child::before {
  left: auto;
  transform: translateX(0);
  right: calc((100% - 12px) / 2);
}
.common-progress_item:last-child.is-active::before {
  right: calc((100% - 24px) / 2);
}
.common-progress_item.is-done .common-progress_text {
  color: var(--color-gray08);
}

.common-progress_text {
  color: var(--color-gray04);
  text-align: center;
}
.common-progress_text .en {
  display: block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  font-family: "Hind", sans-serif;
}
.common-progress_text .jp {
  display: block;
  font-weight: bold;
  font-size: var(--font-size-12);
}
@media (min-width: 768px) {
  .common-progress_text .jp {
    display: flex;
    align-items: center;
    font-size: var(--font-size-16);
    min-height: 3em;
  }
}
.common-progress_text .jp .text {
  display: block;
}
.common-progress_text .jp .text span {
  display: none;
}
@media (min-width: 768px) {
  .common-progress_text .jp .text span {
    display: inline;
  }
}
.common-progress_item.is-active .common-progress_text {
  color: var(--color-primary);
}

.common-progress_marker {
  position: relative;
  width: 12px;
  height: 12px;
}
.common-progress_marker::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  background-color: var(--color-gray03);
  transform: translate(-50%, -50%);
}
.common-progress_item.is-active .common-progress_marker::after {
  background-color: var(--color-primary);
}
.common-progress_item.is-active .common-progress_marker::before {
  position: absolute;
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  background-color: var(--color-purple04);
  transform: translate(-50%, -50%);
}

/* =============================================
megaMenu
============================================= */
.common-megaMenu {
  display: none;
  position: fixed;
  top: 96px;
  left: 0;
  width: 100%;
  height: calc(100vh - 96px);
  background-color: var(--color-purple);
  overflow-y: scroll;
  z-index: var(--z-875);
  transition: transform 0.3s ease-out;
}
.common-megaMenu[aria-hidden=true] {
  transform: translateY(-101%);
}
@media (min-width: 1024px) {
  .common-megaMenu {
    display: block;
  }
}

.common-megaMenu_inner {
  padding: 40px 16px 16px;
}

.common-megaMenu_contents {
  position: relative;
  max-width: 1072px;
  margin: 0 auto;
  pointer-events: none;
  display: none;
}
.common-megaMenu_contents[aria-hidden=false] {
  display: block;
  pointer-events: auto;
}

.common-megaMenu_list {
  display: flex;
  gap: 64px;
  margin-top: 20px;
}

.common-megaMenu_item {
  width: calc((100% - 64px) / 2);
}

.common-megaMenu_box01 .link {
  padding: 18px 0 12px;
}
.common-megaMenu_box01 img {
  border-radius: 4px;
}

.common-megaMenu_box02 {
  padding: 12px 0;
  border-bottom: 2px solid var(--color-purple02);
}
.common-megaMenu_box02:nth-child(2) {
  border-top: 2px solid var(--color-purple02);
}

.common-megaMenu_box03 {
  display: flex;
  flex-wrap: wrap;
  padding: 16px 0 24px;
  gap: 10px 0;
}
.common-megaMenu_box03 .link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 50%;
}
.common-megaMenu_box03 .link::before {
  display: block;
  content: "";
  width: 8px;
  height: 1px;
  background-color: var(--color-primary);
}
.common-megaMenu_box03:not(:last-child) {
  border-bottom: 2px solid var(--color-purple02);
}

/* =============================================
agreement
============================================= */
.common-agreement {
  text-align: center;
}

.common-agreement_description {
  font-weight: bold;
  text-align: left;
  margin: 0 10px;
}
@media (min-width: 768px) {
  .common-agreement_description {
    text-align: center;
  }
}

.common-agreement_button {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
@media (min-width: 768px) {
  .common-agreement_button {
    margin-top: 32px;
  }
}

.common-agreement_contents {
  max-width: 720px;
  margin: 0 auto;
}

.common-agreement_deny {
  font-weight: bold;
  font-size: var(--font-size-14);
  margin-top: 24px;
}
@media (min-width: 768px) {
  .common-agreement_deny {
    margin-top: 32px;
  }
}
.common-agreement_deny a {
  color: var(--color-black);
  border-bottom: 1px solid var(--color-black);
  padding-bottom: 2px;
  transition: border-color 0.2s ease-out, color 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .common-agreement_deny a:hover {
    color: var(--color-navy);
    border-color: var(--color-navy);
  }
}

/* =============================================
icoAnker
============================================= */
.common-icoAnker_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .common-icoAnker_list {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.common-icoAnker_item a {
  display: flex;
  align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .common-icoAnker_item a:hover .common-icoAnker_text {
    color: var(--color-navy);
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
  .common-icoAnker_item a:hover .common-icoAnker_arrow::before {
    opacity: 0;
  }
  .common-icoAnker_item a:hover .common-icoAnker_arrow::after {
    opacity: 1;
  }
}
@media (min-width: 768px) {
  .common-icoAnker_item {
    width: calc((100% - 24px) / 2);
  }
}
@media (min-width: 1024px) {
  .common-icoAnker_item {
    width: calc((100% - 72px) / 4);
  }
}

.common-icoAnker_ico {
  width: 96px;
  border-radius: 4px;
}

.common-icoAnker_text {
  padding: 0 8px 0 16px;
  color: var(--color-primary);
  font-weight: bold;
  transition: color 0.2s ease-out;
}

.common-icoAnker_arrow {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
}
.common-icoAnker_arrow::before, .common-icoAnker_arrow::after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
  transition: opacity 0.2s ease-out;
  background-size: contain;
  background-repeat: no-repeat;
}
.common-icoAnker_arrow::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_chevron.svg");
}
.common-icoAnker_arrow::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_chevron_purple.svg");
}

/* =============================================
boxAnker
============================================= */
.common-boxAnker{
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .common-boxAnker{
    padding: 20px 40px;
  }
}
.common-boxAnker ul.common-boxAnker_list ul.common-boxAnker_list{
  margin-left: 24px;
}
.common-boxAnker_item a{
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.common-boxAnker_item p{
  color: var(--color-primary);
  font-weight: bold;
  transition: color 0.2s ease-out;
}
.common-boxAnker_arrow {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
}
.common-boxAnker_arrow::before, .common-boxAnker_arrow::after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
  transition: opacity 0.2s ease-out;
  background-size: contain;
  background-repeat: no-repeat;
}
.common-boxAnker_arrow::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_chevron.svg");
}
.common-boxAnker_arrow::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_chevron_purple.svg");
}
@media (hover: hover) and (pointer: fine) {
  .common-boxAnker_item a:hover p {
    color: var(--color-navy);
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
  .common-boxAnker_item a:hover .common-boxAnker_arrow::before {
    opacity: 0;
  }
  .common-boxAnker_item a:hover .common-boxAnker_arrow::after {
    opacity: 1;
  }
}

/* =============================================
tips
============================================= */
.common-tips {
  background-color: var(--color-gray09);
  padding: 48px 16px;
}
@media (min-width: 768px) {
  .common-tips {
    padding: 64px 16px;
  }
}

.common-tips_contents {
  max-width: 1200px;
  margin: 0 auto;
}

.common-tips_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
@media (min-width: 768px) {
  .common-tips_list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px 32px;
  }
}
@media (min-width: 768px) {
  .common-tips_list .common-icoLink {
    width: calc((100% - 32px) / 2);
  }
}

/* =============================================
case
============================================= */
.common-case {
  position: relative;
  padding: 60px 16px 16px;
  border: 2px solid var(--color-gray);
  border-radius: 4px;
  max-width: 520px;
}
@media (min-width: 768px) {
  .common-case {
    padding: 60px 32px 32px;
  }
}

.common-case_label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  padding: 10px 16px 6px;
  border-radius: 4px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-18);
  font-weight: 600;
  font-family: "Hind", sans-serif;
}
.common-case_label .num {
  font-size: var(--font-size-24);
}

.common-case_flow {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.common-case_problem {
  position: relative;
  padding: 32px 24px 32px;
  border-radius: 4px;
  background-color: var(--color-gray06);
  font-weight: bold;
  line-height: 1.8;
}
.common-case_problem .label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  top: 0;
  left: 16px;
  transform: translateY(-50%);
  font-size: var(--font-size-20);
}
.common-case_problem .label::before {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("/relocation/images/top/case_attention.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.common-case_problem .arrow {
  position: absolute;
  display: block;
  left: 50%;
  bottom: -28px;
  width: 48px;
  height: 48px;
  background-image: url("/relocation/images/top/case_arrow.svg");
  background-size: 12px 19px;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: var(--color-green);
}

.common-case_solve {
  position: relative;
  padding: 32px 24px 32px;
  border-radius: 4px;
  background-color: var(--color-purple);
  font-weight: bold;
  line-height: 1.8;
}
.common-case_solve .label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  top: 0;
  left: 16px;
  transform: translateY(-50%);
  font-size: var(--font-size-20);
  font-weight: bold;
  color: var(--color-primary);
}
.common-case_solve .label::before {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("/relocation/images/top/case_check.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/* =============================================
card01
============================================= */
.common-card01 {
  padding: 8px 8px 24px;
  background-color: var(--color-white);
  border-radius: 4px;
  max-width: 500px;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.12);
}
@media (min-width: 768px) {
  .common-card01 {
    display: flex;
    flex-direction: column;
    padding: 8px 8px 32px;
    max-width: 584px;
  }
}
.common-card01 .imgLink {
  transition: opacity 0.2s ease-out;
}
.common-card01 .imgLink .img {
  border-radius: 4px;
  overflow: hidden;
}
.common-card01 .imgLink img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (hover: hover) and (pointer: fine) {
  .common-card01 .imgLink:hover {
    opacity: 0.7;
  }
}
.common-card01 .contents {
  margin-top: 26px;
  height: 100%;
}
@media (min-width: 1024px) {
  .common-card01 .contents {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 32px;
  }
}
.common-card01 .description {
  margin-top: 16px;
  padding: 0 16px;
  font-weight: bold;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .common-card01 .description {
    padding: 0 24px;
  }
}
.common-card01 .buttonGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  margin-top: 24px;
}
@media (min-width: 768px) {
  .common-card01 .buttonGroup {
    flex-direction: row;
    padding: 0 24px;
    margin-top: 32px;
  }
}
.common-card01:last-child .imgLink {
  display: flex;
  gap: 4px;
}
.common-card01 .common-button {
  max-width: 310px;
}

.common-card01_link {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}
.common-card01_link::before {
  position: relative;
  top: 2px;
}
@media (min-width: 768px) {
  .common-card01_link::before {
    top: 6px;
  }
}
.common-card01_link .ico {
  position: relative;
  top: 2px;
  display: block;
  width: 24px;
  height: 24px;
}
@media (min-width: 768px) {
  .common-card01_link .ico {
    top: 6px;
  }
}
.common-card01_link .common-link {
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: var(--font-size-18);
}
@media (min-width: 768px) {
  .common-card01_link .common-link {
    font-size: var(--font-size-24);
    flex-wrap: nowrap;
    gap: 12px;
  }
}
.common-card01_link .common-link .arrow {
  position: relative;
  left: -20px;
  width: 100%;
}
.common-card01_link .common-link .arrow::before, .common-card01_link .common-link .arrow::after {
  background-position: center;
}
@media (min-width: 768px) {
  .common-card01_link .common-link .arrow {
    left: auto;
    width: 24px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .common-card01_link .common-link:hover::after {
    background-image: url("/relocation/images/common/ico_arrow_green.svg");
  }
}

/* =============================================
card02
============================================= */
.common-card02 {
  padding: 8px 8px 24px;
  background-color: var(--color-white);
  border-radius: 4px;
  max-width: 500px;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.12);
}
@media (min-width: 768px) {
  .common-card02 {
    display: flex;
    flex-direction: column;
    padding: 8px 8px 32px;
    max-width: 584px;
  }
}
.common-card02 .imgLink {
  transition: opacity 0.2s ease-out;
}
.common-card02 .imgLink .img {
  border-radius: 4px;
  overflow: hidden;
}
.common-card02 .imgLink img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (hover: hover) and (pointer: fine) {
  .common-card02 .imgLink:hover {
    opacity: 0.7;
  }
}
.common-card02 .contents {
  margin-top: 26px;
  height: 100%;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .common-card02 .contents {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 32px;
    padding: 0 24px;
  }
}
.common-card02 .description {
  margin-top: 8px;
  font-weight: bold;
  line-height: 1.8;
}
.common-card02:last-child .imgLink {
  display: flex;
  gap: 4px;
}
.common-card02 .common-button {
  max-width: 310px;
}

.common-card02_link {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.common-card02_link::before {
  position: relative;
  top: 2px;
}
@media (min-width: 768px) {
  .common-card02_link::before {
    top: 6px;
  }
}
.common-card02_link .ico {
  position: relative;
  top: 2px;
  display: block;
  width: 24px;
  height: 24px;
}
@media (min-width: 768px) {
  .common-card02_link .ico {
    top: 6px;
  }
}
.common-card02_link .common-link {
  font-size: var(--font-size-20);
}
@media (min-width: 768px) {
  .common-card02_link .common-link {
    font-size: var(--font-size-20);
  }
}

/* =============================================
card03
============================================= */
.common-card03 {
  display: block;
  width: 100%;
  border-radius: 4px;
  padding: 8px 8px 24px;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.12);
  background-color: var(--color-white);
  max-width: 700px;
  transition: box-shadow 0.2s ease-out;
}
@media (min-width: 1024px) {
  .common-card03 {
    max-width: 380px;
  }
}
.common-card03 .bubble {
  position: relative;
  text-align: center;
  background-color: var(--color-purple03);
  color: var(--color-black);
  font-weight: bold;
  padding: 18px 8px 20px;
  border-radius: 4px 4px 0 0;
}
.common-card03 .bubble::before {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 12px;
  border-color: var(--color-purple03) transparent transparent transparent;
  transform: translateX(-50%);
}
.common-card03 .box {
  margin: 18px auto;
  width: calc(100% - 32px);
}
@media (min-width: 1024px) {
  .common-card03 .box {
    min-width: 274px;
  }
}
.common-card03 .description {
  margin-top: 6px;
  color: var(--color-black);
  font-weight: bold;
  line-height: 1.8;
}
@media (hover: hover) and (pointer: fine) {
  .common-card03:hover {
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);
  }
  .common-card03:hover .common-link span:first-child {
    background-size: 100% 1px;
  }
  .common-card03:hover .common-link .arrow::before {
    opacity: 0;
  }
  .common-card03:hover .common-link .arrow::after {
    opacity: 1;
  }
}

.common-card03_chart {
  width: 100%;
  margin-top: 24px;
  line-height: 1.3333333333;
}
.common-card03_chart dl {
  display: flex;
  text-align: center;
  width: 100%;
  border: 1px solid var(--color-gray10);
  border-radius: 4px;
  height: 56px;
}
.common-card03_chart dl:not(:first-child) {
  margin-top: 8px;
}
.common-card03_chart dl:first-child dd {
  width: calc((100% - 80px) / 3);
}
.common-card03_chart dt {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  width: 80px;
  border-right: 1px solid var(--color-gray10);
  background-color: var(--color-gray06);
  font-size: var(--font-size-14);
  color: var(--color-black);
  border-radius: 4px 0 0 4px;
}
.common-card03_chart dd {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-12);
  color: var(--color-gray08);
  font-weight: bold;
  width: calc((100% - 80px) / 2);
}
.common-card03_chart dd:not(:last-of-type) {
  border-right: 1px solid var(--color-gray10);
}
.common-card03_chart dd.-active {
  color: var(--color-primary);
  background-color: var(--color-green);
}

/* =============================================
voice
============================================= */
.common-voice {
  max-width: 600px;
}
@media (min-width: 1024px) {
  .common-voice {
    max-width: 378px;
  }
}
.common-voice .description {
  font-weight: bold;
}

.common-voice_bubble {
  position: relative;
  padding: 42px 24px 28px;
  border-radius: 4px;
  background-color: var(--color-purple);
}
@media (min-width: 768px) {
  .common-voice_bubble {
    padding: 50px 32px 28px;
  }
}
@media (min-width: 768px) {
  .common-voice_bubble {
    height: calc(100% - 80px);
  }
}
.common-voice_bubble .label {
  position: absolute;
  left: 16px;
  top: -16px;
  padding: 9px 12px;
  font-size: var(--font-size-14);
  font-weight: bold;
  line-height: 1;
  color: var(--color-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
}
.common-voice_bubble .title {
  font-weight: bold;
  font-size: var(--font-size-20);
}
.common-voice_bubble .description {
  margin-top: 12px;
  line-height: 1.8;
}
.common-voice_bubble::before {
  display: block;
  position: absolute;
  content: "";
  width: 40px;
  height: 28px;
  top: 28px;
  left: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/relocation/images/lineup/ico_voice_quot.svg");
}
@media (min-width: 768px) {
  .common-voice_bubble::before {
    width: 40px;
    height: 28px;
    top: 36px;
    left: 20px;
  }
}
.common-voice_bubble::after {
  display: block;
  position: absolute;
  bottom: -22px;
  left: 74px;
  content: "";
  width: 54px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/relocation/images/lineup/ico_voice_arrow.svg");
}

.common-voice_person {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: bold;
  margin-top: 18px;
}
.common-voice_person .ico {
  width: 56px;
  height: 62px;
  background-size: contain;
  background-repeat: no-repeat;
}
.common-voice_person .text {
  display: flex;
  gap: 1em;
}

/* =============================================
column01
============================================= */
.common-column01 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0 auto;
  max-width: 600px;
}
@media (min-width: 1024px) {
  .common-column01 {
    flex-direction: row;
    max-width: 1200px;
  }
}

.common-column01_item {
  padding: 8px;
  background-color: var(--color-white);
  border-radius: 4px;
  line-height: 1.8;
}
.common-column01_item .box {
  display: flex;
  gap: 14px;
}
.common-column01_item .heading {
  display: flex;
  align-items: center;
  font-size: var(--font-size-20);
  font-weight: bold;
  padding: 10px 16px 10px 0;
}
.common-column01_item .description {
  font-weight: bold;
  padding: 24px 16px 16px;
}

.common-column01_label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 14px 14px 8px;
  font-size: var(--color-green);
  font-weight: 600;
  line-height: 1;
  color: var(--color-green);
  background-color: var(--color-primary);
  border-radius: 4px;
  font-family: "Hind", sans-serif;
}
.common-column01_label .text {
  display: block;
  font-size: var(--font-size-15);
  margin-bottom: 2px;
}
.common-column01_label .num {
  font-size: var(--font-size-36);
}

/* =============================================
column02
============================================= */
.common-column02 {
  display: flex;
  flex-direction: column;
  gap: 48px;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 500px;
}
@media (min-width: 1024px) {
  .common-column02 {
    gap: 24px;
    flex-direction: row;
    max-width: 1200px;
  }
}

.common-column02_item {
  position: relative;
  background-color: var(--color-white);
  border-radius: 4px;
  padding: 42px 24px 32px;
  text-align: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .common-column02_item {
    width: calc((100% - 48px) / 3);
  }
}
.common-column02_item .title {
  display: inline-block;
  text-align: center;
  font-size: var(--font-size-20);
  font-weight: bold;
  border-bottom: 2px solid var(--color-green);
}
.common-column02_item .description {
  text-align: left;
  margin-top: 20px;
  font-weight: bold;
  line-height: 1.8;
}
.common-column02_item::before {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("/relocation/images/common/ico_check.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/* =============================================
column03
============================================= */
.common-column03 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 500px;
}
@media (min-width: 1024px) {
  .common-column03 {
    gap: 24px;
    flex-direction: row;
    max-width: 1200px;
  }
}

.common-column03_item {
  position: relative;
  background-color: var(--color-white);
  border-radius: 4px;
  padding: 32px 24px;
  text-align: center;
  width: 100%;
  border: 1px solid var(--color-gray10);
}
@media (min-width: 1024px) {
  .common-column03_item {
    width: calc((100% - 48px) / 3);
  }
}
.common-column03_item .title {
  display: inline-block;
  text-align: center;
  font-size: var(--font-size-20);
  font-weight: bold;
  border-bottom: 2px solid var(--color-green);
}
.common-column03_item .description {
  text-align: left;
  margin-top: 20px;
  font-weight: bold;
  line-height: 1.8;
}

/* =============================================
column04
============================================= */
.common-column04 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0 auto;
  max-width: 600px;
}
@media (min-width: 768px) {
  .common-column04 {
    gap: 32px;
  }
}
@media (min-width: 1024px) {
  .common-column04 {
    max-width: 1072px;
    flex-direction: row;
  }
}

.common-column04_item {
  display: block;
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.12);
  padding: 8px 8px 36px;
  transition: box-shadow 0.2s ease-out;
  border-radius: 4px;
}
@media (min-width: 1024px) {
  .common-column04_item {
    width: calc((100% - 64px) / 3);
  }
}
.common-column04_item .title {
  font-weight: bold;
  padding: 32px 16px 0;
  color: var(--color-black);
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.8;
  transition: color 0.2s ease-out;
}
@media (min-width: 768px) {
  .common-column04_item .title {
    padding: 30px 24px 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .common-column04_item:hover {
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);
  }
  .common-column04_item:hover .title {
    color: var(--color-navy);
  }
  .common-column04_item:hover .title span {
    background: linear-gradient(var(--color-navy), var(--color-navy)) 0 100%/100% 1px no-repeat;
  }
  .common-column04_item:hover .common-link {
    color: var(--color-navy);
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
  .common-column04_item:hover .common-link span:first-child {
    background-size: 0;
  }
  .common-column04_item:hover .common-link .arrow::before {
    opacity: 0;
  }
  .common-column04_item:hover .common-link .arrow::after {
    opacity: 1;
  }
}

.common-column04_img {
  border-radius: 4px 4px 0 0;
}

.common-column04_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 16px 0;
}
@media (min-width: 768px) {
  .common-column04_info {
    padding: 24px 24px 0;
  }
}
.common-column04_info .date {
  font-size: var(--font-size-18);
  color: var(--color-gray04);
  font-family: "Hind", sans-serif;
}

/* =============================================
media01
============================================= */
.common-media01 {
  padding: 64px 16px;
  background-color: var(--color-primary);
  color: var(--color-white);
}
@media (min-width: 768px) {
  .common-media01 {
    padding: 80px 16px;
  }
}

.common-media01_contents {
  margin: 0 auto;
  max-width: 600px;
}
@media (min-width: 1024px) {
  .common-media01_contents {
    display: flex;
    align-items: center;
    gap: 64px;
    max-width: 1200px;
  }
}
@media (min-width: 1024px) {
  .common-media01.-reverse .common-media01_contents {
    flex-direction: row-reverse;
  }
}

.common-media01_img {
  border-radius: 4px;
}
@media (min-width: 1024px) {
  .common-media01_img {
    width: calc((100% - 64px) / 2);
  }
}

.common-media01_text {
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .common-media01_text {
    width: calc((100% - 64px) / 2);
    margin: 0;
  }
}

.common-media01_title {
  font-size: var(--font-size-24);
}
@media (min-width: 768px) {
  .common-media01_title {
    font-size: var(--font-size-36);
  }
}

.common-media01_description {
  margin-top: 20px;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .common-media01_description {
    margin-top: 28px;
  }
}

.common-media01_button {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .common-media01_button {
    justify-content: flex-start;
    margin-top: 60px;
  }
}

/* =============================================
media02
============================================= */
.common-media02 {
  padding: 60px 16px;
}

.common-media02_contents {
  margin: 0 auto;
  max-width: 600px;
}
@media (min-width: 1024px) {
  .common-media02_contents {
    display: flex;
    align-items: center;
    gap: 64px;
    max-width: 1200px;
  }
}
@media (min-width: 1024px) {
  .common-media02.-reverse .common-media02_contents {
    flex-direction: row-reverse;
  }
}

.common-media02_img {
  border-radius: 4px;
}
@media (min-width: 1024px) {
  .common-media02_img {
    width: calc((100% - 64px) / 2);
  }
}

.common-media02_text {
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .common-media02_text {
    width: calc((100% - 64px) / 2);
    margin: 0;
  }
}

.common-media02_title {
  font-size: var(--font-size-20);
  display: flex;
  gap: 16px;
}
@media (min-width: 1024px) {
  .common-media02_title {
    gap: 24px;
  }
}
.common-media02_title .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.common-media02_title .title .small {
  font-size: var(--font-size-16);
  font-weight: normal;
  margin-top: 12px;
}
.common-media02_title .num {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: 84px;
  padding: 0 26px;
  border-radius: 4px;
  background-color: var(--color-primary);
  color: var(--color-green);
  font-weight: 600;
  font-size: var(--font-size-36);
  font-family: "Hind", sans-serif;
}

.common-media02_description {
  margin-top: 20px;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .common-media02_description {
    margin-top: 28px;
  }
}
.common-media02_description .text {
  display: block;
  margin: 12px 0 0 1em;
  text-indent: -1em;
}

.common-media02_button {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .common-media02_button {
    justify-content: flex-start;
    margin-top: 60px;
  }
}
/* =============================================
media03
============================================= */
.common-media03 {
  padding: 60px 16px 30px;
}
@media (min-width: 1024px) {
  .common-media03 {
    padding: 60px 16px;
  }
}

.common-media03_contents {
  margin: 0 auto;
  max-width: 600px;
}
@media (min-width: 1024px) {
  .common-media03_contents {
    display: flex;
    align-items: center;
    gap: 64px;
    max-width: 1200px;
  }
}
@media (min-width: 1024px) {
  .common-media03.-reverse .common-media03_contents {
    flex-direction: row-reverse;
  }
}

.common-media03_img {
  border-radius: 4px;
}
@media (min-width: 1024px) {
  .common-media03_img {
    width: calc((100% - 64px) / 3);
  }
}

.common-media03_text {
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .common-media03_text {
    width: 100%;
    margin: 0;
  }
}

.common-media03_title {
  font-size: var(--font-size-20);
  display: flex;
  gap: 16px;
}
@media (min-width: 1024px) {
  .common-media03_title {
    gap: 24px;
  }
}
.common-media03_title .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.common-media03_title .title .small {
  font-size: var(--font-size-16);
  font-weight: normal;
  margin-top: 12px;
}
.common-media03_title .num {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: 84px;
  padding: 0 26px;
  border-radius: 4px;
  background-color: var(--color-primary);
  color: var(--color-green);
  font-weight: 600;
  font-size: var(--font-size-36);
  font-family: "Hind", sans-serif;
}

.common-media03_description {
  margin-top: 20px;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .common-media03_description {
    margin-top: 28px;
  }
}
.common-media03_description .text {
  display: block;
  margin: 12px 0 0 1em;
  text-indent: -1em;
}

.common-media03_button {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .common-media03_button {
    justify-content: flex-start;
    margin-top: 60px;
  }
}

/* =============================================
icoArea
============================================= */
.common-icoArea {
  padding: 48px 16px;
  background-color: var(--color-gray09);
}

.common-icoArea_contents {
  background-color: var(--color-white);
  border-radius: 4px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}
@media (min-width: 768px) {
  .common-icoArea_contents {
    padding: 48px;
  }
}

.common-icoArea_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 768px) {
  .common-icoArea_list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 32px;
  }
}
@media (min-width: 768px) {
  .common-icoArea_list li {
    width: calc((100% - 32px) / 2);
  }
}
@media (min-width: 1024px) {
  .common-icoArea_list li {
    width: calc((100% - 64px) / 3);
  }
}

.common-icoArea_item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--font-size-14);
  font-weight: bold;
}
@media (min-width: 768px) {
  .common-icoArea_item {
    font-size: var(--font-size-16);
  }
}
.common-icoArea_item[href] {
  color: var(--color-primary);
}
.common-icoArea_item .text {
  display: flex;
  align-items: center;
  gap: 8px;
}
.common-icoArea_item .text .arrow {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.common-icoArea_item .text .arrow::before, .common-icoArea_item .text .arrow::after {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 0.2s ease-out;
}
.common-icoArea_item .text .arrow::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_arrow.svg");
}
.common-icoArea_item .text .arrow::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_arrow_purple.svg");
}
@media (hover: hover) and (pointer: fine) {
  .common-icoArea_item:hover[href] {
    color: var(--color-navy);
  }
  .common-icoArea_item:hover[href] .text span {
    text-decoration: underline;
    text-decoration-color: var(--color-navy);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
  .common-icoArea_item:hover[href] .arrow::before {
    opacity: 0;
  }
  .common-icoArea_item:hover[href] .arrow::after {
    opacity: 1;
  }
}

.common-icoArea_ico {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

/* =============================================
plus
============================================= */
.common-plus {
  max-width: 600px;
  margin: 0 auto;
}

.common-plus_ico {
  position: relative;
  height: 20px;
}
.common-plus_ico::before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 20px;
  background-color: var(--color-primary);
}
.common-plus_ico::after {
  display: block;
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 2px;
  background-color: var(--color-primary);
}

.common-plus_contents {
  padding: 32px 24px;
  margin-top: 18px;
  border-radius: 4px;
  border: 1px solid var(--color-gray10);
}

.common-plus_heading {
  text-align: center;
  font-weight: bold;
  font-size: var(--font-size-20);
}

.common-plus_description {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  line-height: 1.8;
}

/* =============================================
attract
============================================= */
.common-attract {
  margin-top: 42px;
}
.common-attract.-small {
  max-width: 600px;
}

.common-attract_title {
  display: flex;
  justify-content: center;
  font-weight: bold;
}
@media (min-width: 768px) {
  .common-attract_title {
    justify-content: flex-start;
    padding-left: 32px;
  }
}
.common-attract_title span {
  padding: 8px 32px;
  border-radius: 4px 4px 0 0;
  background-color: var(--color-gray);
}
@media (min-width: 768px) {
  .common-attract.-small .common-attract_title {
    justify-content: center;
    padding: 0;
  }
}

.common-attract_contents {
  border-radius: 4px;
  border: 1px solid var(--color-gray10);
  padding: 24px;
}
@media (min-width: 768px) {
  .common-attract_contents {
    padding: 32px;
  }
}
.common-attract.-caution .common-attract_contents {
  border: 1px solid rgba(204, 26, 3, 0.6);
}

.common-attract_heading {
  text-align: center;
  font-size: var(--font-size-20);
  font-weight: bold;
  color: var(--color-red);
}
@media (min-width: 768px) {
  .common-attract_heading {
    text-align: left;
  }
}

.common-attract_description {
  line-height: 1.8;
}
.common-attract_description .text {
  display: block;
  margin-left: 1em;
  text-indent: -1em;
}
.common-attract.-caution .common-attract_description {
  margin-top: 18px;
}

/* =============================================
flowChart
============================================= */
.common-flowChart {
  background-color: var(--color-gray09);
  padding: 0 16px 56px 16px;
}
@media (min-width: 768px) {
  .common-flowChart {
    padding: 64px 16px;
  }
}

.common-flowChart_contents {
  display: flex;
  max-width: 247px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .common-flowChart_contents {
    display: block;
    max-width: 1040px;
  }
}

.common-flowChart_arrows {
  width: 88px;
  flex-shrink: 0;
  color: var(--color-white);
}
@media (min-width: 1024px) {
  .common-flowChart_arrows {
    display: flex;
    width: auto;
    height: 80px;
  }
}

.common-flowChart_arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background-color: var(--color-navy03);
}
.common-flowChart_arrow .duration {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  right: 7px;
}
@media (min-width: 1024px) {
  .common-flowChart_arrow .duration {
    flex-direction: row;
    justify-content: center;
    gap: 4px;
    top: -7px;
    right: auto;
  }
}
.common-flowChart_arrow .num {
  font-size: var(--font-size-28);
  font-weight: 600;
  font-family: "Hind", sans-serif;
}
.common-flowChart_arrow .text {
  display: block;
}
.common-flowChart_arrow .text:nth-child(2) {
  writing-mode: vertical-lr;
}
@media (min-width: 1024px) {
  .common-flowChart_arrow .text:nth-child(2) {
    writing-mode: horizontal-tb;
  }
}
.common-flowChart_arrow:first-child {
  height: 325px;
  z-index: 1;
}
@media (min-width: 1024px) {
  .common-flowChart_arrow:first-child {
    width: 47.1153846154%;
    height: 100%;
  }
}
.common-flowChart_arrow:first-child .arrow {
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  background-color: var(--color-white);
  bottom: 0;
}
@media (min-width: 1024px) {
  .common-flowChart_arrow:first-child .arrow {
    bottom: auto;
    top: 0;
    width: 4px;
    height: 100%;
    right: -32px;
  }
}
.common-flowChart_arrow:first-child .arrow::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  bottom: -29px;
  border-style: solid;
  border-width: 29px 44px 0 44px;
  border-color: var(--color-white) transparent transparent transparent;
}
@media (min-width: 1024px) {
  .common-flowChart_arrow:first-child .arrow::before {
    border-width: 40px 0 40px 32px;
    border-color: transparent transparent transparent var(--color-white);
    right: -32px;
    bottom: auto;
  }
}
.common-flowChart_arrow:first-child .arrow::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  bottom: -25px;
  border-style: solid;
  border-width: 29px 44px 0 44px;
  border-color: var(--color-navy03) transparent transparent transparent;
}
@media (min-width: 1024px) {
  .common-flowChart_arrow:first-child .arrow::after {
    border-width: 40px 0 40px 32px;
    border-color: transparent transparent transparent var(--color-navy03);
    right: -28px;
    bottom: auto;
  }
}
.common-flowChart_arrow:last-child {
  height: 341px;
}
@media (min-width: 1024px) {
  .common-flowChart_arrow:last-child {
    width: 52.8846153846%;
    height: 100%;
  }
}
.common-flowChart_arrow:last-child::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  bottom: -29px;
  border-style: solid;
  border-width: 29px 44px 0 44px;
  border-color: var(--color-navy03) transparent transparent transparent;
}
@media (min-width: 1024px) {
  .common-flowChart_arrow:last-child::before {
    width: 32px;
    height: 100%;
    background-color: var(--color-gray09);
    border: none;
    top: 0;
    bottom: auto;
    right: 0;
  }
}
@media (min-width: 1024px) {
  .common-flowChart_arrow:last-child::after {
    position: absolute;
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0 40px 32px;
    border-color: transparent transparent transparent var(--color-navy03);
    right: 0;
  }
}
/*common-flowChart_free*/
.common-flowChart_arrows.common-flowChart_free .common-flowChart_arrow {
  height: inherit;
  z-index: 1;
  padding: 10px 0 30px;
}
.common-flowChart_arrows.common-flowChart_free .common-flowChart_arrow:last-of-type {
  padding: 10px 0 10px;
}
.common-flowChart_arrows.common-flowChart_free .common-flowChart_arrow .arrow {
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  background-color: var(--color-white);
  bottom: 32px;
  right: 0;
  z-index: 1;
}
@media (min-width: 1024px) {
  .common-flowChart_arrows.common-flowChart_free .common-flowChart_arrow{
    width: inherit;
    padding: 0 30px 0 60px;
    flex: 1;
    z-index: inherit;
  }
  .common-flowChart_arrows.common-flowChart_free .common-flowChart_arrow .arrow {
    bottom: auto;
    top: 0;
    width: 4px;
    height: 100%;
    right: 0px;
    z-index: 1;
  }
  .common-flowChart_arrows.common-flowChart_free .common-flowChart_arrow:first-of-type{
    padding: 0 30px 0 30px;
  }
  .common-flowChart_arrows.common-flowChart_free .common-flowChart_arrow:last-of-type{
    padding: 0 30px 0 60px;
  }
}
.common-flowChart_arrows.common-flowChart_free .common-flowChart_arrow .arrow::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  bottom: -29px;
  border-style: solid;
  border-width: 29px 44px 0 44px;
  border-color: var(--color-white) transparent transparent transparent;
}
@media (min-width: 1024px) {
  .common-flowChart_arrows.common-flowChart_free .common-flowChart_arrow .arrow::before {
    border-width: 40px 0 40px 32px;
    border-color: transparent transparent transparent var(--color-white);
    right: -32px;
    bottom: auto;
  }
}
.common-flowChart_arrows.common-flowChart_free .common-flowChart_arrow .arrow::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  bottom: -25px;
  border-style: solid;
  border-width: 29px 44px 0 44px;
  border-color: var(--color-navy03) transparent transparent transparent;
}
@media (min-width: 1024px) {
  .common-flowChart_arrows.common-flowChart_free .common-flowChart_arrow .arrow::after {
    border-width: 40px 0 40px 32px;
    border-color: transparent transparent transparent var(--color-navy03);
    right: -28px;
    bottom: auto;
  }
}
/*common-flowChart_moji*/
.common-flowChart_contents{
  height: 100%;
}
.common-flowChart_arrows.common-flowChart_moji{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.common-flowChart_arrows.common-flowChart_moji .common-flowChart_arrow{
  block-size: auto;
}
.common-flowChart_arrows.common-flowChart_moji .common-flowChart_arrow .duration{
  right: 0px;
  padding: 150% 10px 150% 6px;
}
@media (min-width: 1024px) {
  .common-flowChart_arrows.common-flowChart_moji{
    flex-direction: row;
  }
  .common-flowChart_arrows.common-flowChart_moji .common-flowChart_arrow{
    height: 80px;
  }
  .common-flowChart_arrows.common-flowChart_moji .common-flowChart_arrow .duration{
      right: auto;
      padding: 0 30px ;
  }
}
/*common-flowChart_pointsMax*/
.common-flowChart_pointsMax .common-flowChart_point{
  width: 176px;
  height: inherit;
  padding: 16px 0px 16px 8px;
}
.common-flowChart_pointsMax .common-flowChart_point ul{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.common-flowChart_pointsMax .common-flowChart_point ul li a {
  display: flex;
  align-items: center;
}
.common-flowChart_pointsMax .common-flowChart_point ul li a p {
  display: flex;
  align-items: center;
  color: var(--color-navy);
  padding: 0;
  margin: 0 0 0 5px!important;
}
.common-flowChart_pointsMax .common-flowChart_point ul li a img{
  width: 50px;
}
.common-flowChart_pointsMax .common-flowChart_point ul li a span {
    /*transition: all 3s ease-out;*/
    line-height: 1.2;
}
.common-flowChart_pointsMax .common-flowChart_point ul li a:hover span {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: var(--color-navy);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.common-flowChart_pointsMax .common-flowChart_point ul li a p span {
    width: 80px;
}
@media (min-width: 1024px) {
  .common-flowChart_pointsMax .common-flowChart_arrows.common-flowChart_moji .common-flowChart_arrow .duration{
    padding: 0 30px;
  }
  .common-flowChart_pointsMax .common-flowChart_point{
    width: 320px;
  }
  .common-flowChart_pointsMax .common-flowChart_point ul{
    display: flex;
    flex-wrap: wrap;
    gap: 16px 6px;
    width: 100%;
    align-self: start;
  }
  .common-flowChart_pointsMax .common-flowChart_point ul li{
    display: flex;
    width: 48%;
  }
  .common-flowChart_pointsMax .common-flowChart_point ul li a img{
    width: 40px;
  }
}
.common-flowChart_pointsMax .common-flowChart_point ul li p .arrow {
  position: relative;
  display: block;
  width: 20px;
  height: 24px;
  flex-shrink: 0;
}
.common-flowChart_pointsMax .common-flowChart_point ul li p .arrow::before, .common-flowChart_pointsMax .common-flowChart_point ul li p .arrow::after{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}
.common-flowChart_pointsMax .common-flowChart_point ul li p .arrow::before {
  opacity: 1;
  background-image: url("/relocation/images/common/ico_chevron.svg");
  transition: opacity 0.2s ease-out;
}
.common-flowChart_pointsMax .common-flowChart_point ul li p .arrow::after {
  opacity: 0;
  background-image: url("/relocation/images/common/ico_chevron_purple.svg");
  transition: opacity 0.2s ease-out;
}
.common-flowChart_pointsMax .common-flowChart_point ul li a:hover .arrow::before {
  opacity: 0;
}
.common-flowChart_pointsMax .common-flowChart_point ul li a:hover .arrow::after {
  opacity: 1;
}

.common-flowChart_points {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  right: 16px;
  margin-top: 48px;
  z-index: 1;
}
@media (min-width: 1024px) {
  .common-flowChart_points {
    flex-direction: row;
    justify-content: center;
    right: auto;
    margin-top: -20px;
  }
}

.common-flowChart_point {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 176px;
  height: 101px;
  background-color: var(--color-white);
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
}