.container a {
  background-color: transparent;

  -webkit-text-decoration-skip: objects;
}

.container a:active,
.container a:hover {
  outline-width: 0;
}

.container a {
  position: relative;
  outline: none;
  color: #222;
  text-decoration: none;

  -webkit-touch-callout: none;
}

.container a:hover {
  text-decoration: none;
}

.container a:hover img {
  opacity: 1 !important;
}

.message-box__button {
  font-weight: inherit;
  background: transparent;
  border: none;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline;
  text-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-family: inherit;
  width: 100%;
  cursor: pointer;
  line-height: inherit;
  text-align: inherit;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes scale-in {
  from {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scale-in {
  from {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes scale {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scale {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes scale-out {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes scale-out {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@-webkit-keyframes left-to-normal {
  from {
    -webkit-transform: translateX(calc(var(--base-size) * (-50 / 16)));
    transform: translateX(calc(var(--base-size) * (-50 / 16)));
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes left-to-normal {
  from {
    -webkit-transform: translateX(calc(var(--base-size) * (-50 / 16)));
    transform: translateX(calc(var(--base-size) * (-50 / 16)));
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes right-to-normal {
  from {
    -webkit-transform: translateX(calc(var(--base-size) * (50 / 16)));
    transform: translateX(calc(var(--base-size) * (50 / 16)));
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes right-to-normal {
  from {
    -webkit-transform: translateX(calc(var(--base-size) * (50 / 16)));
    transform: translateX(calc(var(--base-size) * (50 / 16)));
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes bottom-to-top {
  from {
    -webkit-transform: translateY(calc(var(--base-size) * (50 / 16)));
    transform: translateY(calc(var(--base-size) * (50 / 16)));
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bottom-to-top {
  from {
    -webkit-transform: translateY(calc(var(--base-size) * (50 / 16)));
    transform: translateY(calc(var(--base-size) * (50 / 16)));
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes css-slider {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes css-slider {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@-webkit-keyframes slide-in {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes slide-in {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(101%);
    transform: translateX(101%);
  }
}

@keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(101%);
    transform: translateX(101%);
  }
}

@-webkit-keyframes pop-up {
  from {
    visibility: visible;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  to {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pop-up {
  from {
    visibility: visible;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  to {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

:root {
  --base-size: 16px;
  --inner-padding: calc(var(--base-size) * (40 / 16));
}

@media screen and (max-width: 1024px) {
  :root {
    --base-size: 1.56vw;
    --inner-padding: calc(var(--base-size) * (40 / 16));
  }
}

@media screen and (max-width: 767px) {
  :root {
    --base-size: 4.26vw;
  }
}

.mt-80-60 {
  margin-top: calc(var(--base-size) * (80 / 16));
}

@media screen and (max-width: 767px) {
  .mt-80-60 {
    margin-top: calc(var(--base-size) * (60 / 16));
  }
}

@media screen and (min-width: 767.1px) {
  .visible-sp {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .hidden-sp {
    display: none !important;
  }
}

.container {
    background-color: #fff;
  font-size: calc(var(--base-size) * (16 / 16));
  font-weight: 300;
  line-height: 1.8;
  padding-bottom: calc(var(--base-size) * (100 / 16));
}

@media screen and (max-width: 767px) {
  .container {
    font-size: calc(var(--base-size) * (13 / 16));
    padding-top: 0;
  }
}

.container img {
  display: block;
  width: 100%;
  height: auto;
}

.inner {
  margin-top: calc(var(--base-size) * (60 / 16));
  max-width: calc(var(--base-size) * (1000 / 16));
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  padding-left: var(--inner-padding);
  padding-right: var(--inner-padding);
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .inner {
    margin-top: calc(var(--base-size) * (30 / 16));
  }  
}

.mainvisual {
  position: relative;
}

.mainvisual__copy {
  position: absolute;
  left: calc(var(--base-size) * (140 / 16));
  top: calc(var(--base-size) * (50 / 16));
  color: #fff;
  z-index: 1;
  font-size: calc(var(--base-size) * (48 / 16));
  font-weight: 300;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .mainvisual__copy {
    top: calc(var(--base-size) * (20 / 16));
    left: calc(var(--base-size) * (20 / 16));
    font-size: calc(var(--base-size) * (22 / 16));
    line-height: 1.4;
  }
}

.mainvisual-copy__headline {
  max-width: calc(var(--base-size) * (1000 / 16));
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  padding-inline: var(--inner-padding);
  margin-inline: auto;
  margin-top: calc(var(--base-size) * (40 / 16));
  font-size: calc(var(--base-size) * (48 / 16));
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .mainvisual-copy__headline {
    font-size: calc(var(--base-size) * (22 / 16));
    margin-top: calc(var(--base-size) * (30 / 16));
  }  
}

.lead-area {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr calc(var(--base-size) * (305 / 16));
  grid-template-columns: 1fr calc(var(--base-size) * (305 / 16));
  gap: calc(var(--base-size) * (40 / 16)) calc(var(--base-size) * (30 / 16));
}

@media screen and (max-width: 767px) {
  .lead-area {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.lead-area__box {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

.lead-area__text2 {
  margin-top: calc(var(--base-size) * (15 / 16));
  font-size: calc(var(--base-size) * (30 / 16));
}

@media screen and (max-width: 767px) {
  .lead-area__text2 {
    font-size: calc(var(--base-size) * (20 / 16));
  }
}

.anchor-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[5];
  grid-template-columns: repeat(5, 1fr);
  gap: calc(var(--base-size) * (15 / 16));
  margin-top: calc(var(--base-size) * (60 / 16));
}

@media screen and (max-width: 767px) {
  .anchor-list {
    margin-left: calc(var(--base-size) * (-15 / 16));
    margin-right: calc(var(--base-size) * (-15 / 16));
    margin-top: calc(var(--base-size) * (80 / 16));
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--base-size) * (10 / 16));
  }
}

.anchor-list__link {
  color: var(--color);
  border: solid 1px var(--color);
  font-size: calc(var(--base-size) * (14 / 16));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(var(--base-size) * (52 / 16));
  padding-top: calc(var(--base-size) * (5 / 16));
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 600;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (min-width: 1024.1px) {
  .anchor-list__link:hover {
    -webkit-transition: opacity 0.1s ease;
    -o-transition: opacity 0.1s ease;
    transition: opacity 0.1s ease;
  }
  .anchor-list__link:hover:hover {
    opacity: 0.4;
  }
}

.anchor-list__link::after {
  content: '';
  display: block;
  width: calc(var(--base-size) * (10 / 16));
  height: calc(var(--base-size) * (10 / 16));
  border-bottom: solid 2px var(--color);
  border-right: solid 2px var(--color);
  position: absolute;
  right: 50%;
  bottom: calc(var(--base-size) * (10 / 16));
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.anchor-list__link.-navy {
  --color: #003F99;color: #003F99;
}

.anchor-list__link.-magenta {
  --color: #E63178;color: #E63178;
}

.anchor-list__link.-orange {
  --color: #EA5519;color: #EA5519;
}

.anchor-list__link.-green {
  --color: #0E913F;color: #0E913F;
}

.anchor-list__link.-gray {
  --color: #747373;color: #747373;
}

.anchor-point {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  background: transparent;
  position: absolute;
  padding-bottom: calc(var(--base-size) * (100 / 16));
  width: 0px;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.visual {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% calc 1fr;
  grid-template-columns: 50% 1fr;
  gap: calc(var(--base-size) * (40 / 16)) calc(var(--base-size) * (60 / 16));
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  grid-template-areas: 'image body';
}

@media screen and (max-width: 767px) {
  .visual {
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    grid-template-areas: 'body' 'image';
    margin-left: calc(var(--base-size) * (-40 / 16));
    margin-right: calc(var(--base-size) * (-40 / 16));
  }
}

.visual__body {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: body;
}

@media screen and (max-width: 767px) {
  .visual__body {
    margin-left: calc(var(--base-size) * (20 / 16));
    margin-right: calc(var(--base-size) * (20 / 16));
  }
}

.visual__title {
  font-size: calc(var(--base-size) * (56 / 16));
  font-weight: 600;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .visual__title {
    font-size: calc(var(--base-size) * (38 / 16));
  }
}

.visual__title.-navy {
  color: #003F99;
}

.visual__title.-magenta {
  color: #E63178;
}

.visual__title.-orange {
  color: #EA5519;
}

.visual__title.-green {
  color: #0E913F;
}

.visual__title.-gray {
  color: #747373;
}

.visual__copy {
  font-size: calc(var(--base-size) * (14 / 16));
}

@media screen and (max-width: 767px) {
  .visual__copy {
    font-size: calc(var(--base-size) * (12 / 16));
  }
}

.visual__image {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: image;
  position: relative;
}

@media screen and (max-width: 767px) {
  .visual__body {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .visual__image {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
}

@media screen and (max-width: 767px) {
  .visual__image {
    padding-right: calc(var(--base-size) * (55 / 16));
  }
}

.visual__text {
  position: absolute;
  font-size: calc(var(--base-size) * (14 / 16));
  font-weight: 600;
}

@media screen and (max-width: 767px) {
  .visual__text {
    font-size: calc(var(--base-size) * (12 / 16));
  }
}

.visual__text.-text-1 {
  top: calc(var(--base-size) * (80 / 16));
  right: calc(var(--base-size) * (20 / 16));
}

@media screen and (max-width: 767px) {
  .visual__text.-text-1 {
    top: calc(var(--base-size) * (60 / 16));
  }
}

.visual__text.-text-2 {
  color: #fff;
  left: calc(var(--base-size) * (50 / 16));
  bottom: calc(var(--base-size) * (140 / 16));
}

@media screen and (max-width: 767px) {
  .visual__text.-text-2 {
    left: calc(var(--base-size) * (25 / 16));
    bottom: calc(var(--base-size) * (60 / 16));
  }
}

.visual__text.-text-3 {
  top: calc(var(--base-size) * (260 / 16));
  right: calc(var(--base-size) * (40 / 16));
}

@media screen and (max-width: 767px) {
  .visual__text.-text-3 {
    top: calc(var(--base-size) * (155 / 16));
    right: calc(var(--base-size) * (20 / 16));
  }
}

.visual__text.-text-4 {
  color: #fff;
  left: calc(var(--base-size) * (40 / 16));
  bottom: calc(var(--base-size) * (30 / 16));
}

@media screen and (max-width: 767px) {
  .visual__text.-text-4 {
    left: calc(var(--base-size) * (20 / 16));
    bottom: calc(var(--base-size) * (20 / 16));
  }
}

.visual__text.-text-5 {
  color: #fff;
  top: calc(var(--base-size) * (115 / 16));
  left: calc(var(--base-size) * (50 / 16));
}

@media screen and (max-width: 767px) {
  .visual__text.-text-5 {
    top: calc(var(--base-size) * (70 / 16));
    left: calc(var(--base-size) * (20 / 16));
  }
}

.visual__text.-text-6 {
  top: calc(var(--base-size) * (60 / 16));
  left: calc(var(--base-size) * (55 / 16));
}

@media screen and (max-width: 767px) {
  .visual__text.-text-6 {
    top: calc(var(--base-size) * (40 / 16));
    left: calc(var(--base-size) * (20 / 16));
  }
}

.section {
  margin-top: calc(var(--base-size) * (80 / 16));
}

.section + .section {
  margin-top: calc(var(--base-size) * (150 / 16));
}

@media screen and (max-width: 767px) {
  .section + .section {
    margin-top: calc(var(--base-size) * (120 / 16));
  }
}

.section__message {
  max-width: calc(var(--base-size) * (800 / 16));
  margin-left: auto;
  margin-right: auto;
}

.section__photos {
  margin-top: calc(var(--base-size) * (70 / 16));
}

@media screen and (max-width: 767px) {
  .section__photos {
    margin-top: calc(var(--base-size) * (50 / 16));
    max-width: calc(var(--base-size) * (230 / 16));
    margin-left: auto;
    margin-right: auto;
  }
}

.headline {
  font-size: calc(var(--base-size) * (24 / 16));
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: calc(var(--base-size) * (40 / 16));
}

@media screen and (max-width: 767px) {
  .headline {
    font-size: calc(var(--base-size) * (16 / 16));
    margin-bottom: calc(var(--base-size) * (30 / 16));
  }
}

.headline.-center {
  text-align: center;
}

.message-box__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.message-box.is-active .message-box__text {
  -webkit-line-clamp: initial;
}

.message-box__more {
  margin-top: calc(var(--base-size) * (20 / 16));
}

.message-box__button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: calc(var(--base-size) * (13 / 16));
  padding: 5px;
}

.message-box__button::before {
  content: 'READ MORE';
}

.message-box.is-active .message-box__button::before {
  content: 'CLOSE';
}

.message-box__button::after {
  content: '+';
  margin-left: calc(var(--base-size) * (10 / 16));
}

.message-box.is-active .message-box__button::after {
  content: '-';
}

.flow-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--base-size) * (50 / 16));
}

@media screen and (max-width: 767px) {
  .flow-list {
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
  }
}

.flow-list__item + .flow-list__item {
  position: relative;
}

.flow-list__item + .flow-list__item::before {
  content: '';
  display: block;
  width: calc(var(--base-size) * (15 / 16));
  height: calc(var(--base-size) * (15 / 16));
  border-top: solid 2px #222222;
  border-right: solid 2px #222222;
  position: absolute;
  right: calc(100% + calc(var(--base-size) * (17 / 16)));
  top: calc(var(--base-size) * (108 / 16));
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media screen and (max-width: 767px) {
  .flow-list__item + .flow-list__item::before {
    right: 50%;
    top: auto;
    bottom: calc(100% + calc(var(--base-size) * (20 / 16)));
    border-top: none;
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    border-bottom: solid 2px #222222;
  }
}

.flow-list__item.-split {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--base-size) * (10 / 16));
}

.photo-list {
  --column: repeat(3, 1fr);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: var(--column);
  grid-template-columns: var(--column);
  gap: calc(var(--base-size) * (30 / 16)) calc(var(--base-size) * (50 / 16));
  max-width: var(--max-width);
}

@media screen and (max-width: 767px) {
  .photo-list {
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    max-width: none;
  }
}

.photo-list.-column2 {
  --column: repeat(2, 1fr);
  --max-width: calc(var(--base-size) * (650 / 16));
  margin-left: auto;
  margin-right: auto;
}

.figure {
  display: block;
  position: relative;
}

.figure__icon {
  background: #fff;
  border: solid 1px #003F99;
  color: #003F99;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  padding: calc(var(--base-size) * (5 / 16)) calc(var(--base-size) * (10 / 16));
  line-height: 1;
  font-size: calc(var(--base-size) * (14 / 16));
}

@media screen and (max-width: 767px) {
  .figure__icon {
    font-size: calc(var(--base-size) * (12 / 16));
  }
}

.figure__caption {
  margin-top: calc(var(--base-size) * (10 / 16));
  font-size: calc(var(--base-size) * (14 / 16));
  font-weight: 600;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .figure__caption {
    font-size: calc(var(--base-size) * (12 / 16));
  }
}

.image-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr calc(var(--base-size) * (300 / 16));
  grid-template-columns: 1fr calc(var(--base-size) * (300 / 16));
  gap: calc(var(--base-size) * (20 / 16)) calc(var(--base-size) * (40 / 16));
  grid-auto-flow: dense;
  margin-left: calc(var(--base-size) * (100 / 16));
}

@media screen and (max-width: 767px) {
  .image-container {
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    margin-left: 0;
  }
}

.image-container__body {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

@media screen and (max-width: 767px) {
  .image-container__body {
    -ms-grid-row: 2;
    grid-row: 2;
  }
}

.image-container-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr calc(var(--base-size) * (300 / 16));
  grid-template-columns: 1fr calc(var(--base-size) * (300 / 16));
  gap: calc(var(--base-size) * (60 / 16)) calc(var(--base-size) * (80 / 16));
}

@media screen and (max-width: 767px) {
  .image-container-2 {
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
  }
}

@media screen and (max-width: 767px) {
  .image-container-2__right {
    max-width: calc(var(--base-size) * (230 / 16));
    margin-left: auto;
    margin-right: auto;
  }
}

/*20240209アクセシビリティ改修*/
*:focus-visible{
  outline: #000 3px solid !important;
  outline-offset:-5px !important;
  border: 4px solid #fff !important;
}