@charset "utf-8";

:root {
  /* 1300px基準でのvw指定 ベースサイズは17px */
  --size-10: min(0.769vw, 10px);
  --size-12: min(0.923vw, 12px);
  --size-13: min(1vw, 13px);
  --size-14: min(1.077vw, 14px);
  --size-15: min(1.176vw, 15px);
  --size-16: min(1.231vw, 16px);
  --size-18: min(1.385vw, 18px);
  --size-base: min(1.307vw, 17px);
  --size-20: min(1.538vw, 20px);
  --size-22: min(1.692vw, 22px);
  --size-24: min(1.846vw, 24px);
  --size-25: min(1.923vw, 25px);
  --size-28: min(2.154vw, 28px);
  --size-30: min(2.308vw, 30px);
  --size-32: min(2.462vw, 32px);
  --size-35: min(2.692vw, 35px);
  --size-36: min(2.769vw, 36px);
  --size-40: min(3.077vw, 40px);
  --size-44: min(3.385vw, 44px);
  --size-48: min(3.692vw, 48px);
  --size-55: min(4.231vw, 55px);
  --size-60: min(4.615vw, 60px);
  --size-90: min(6.923vw, 90px);
  --size-100: min(7.692vw, 100px);

  @media (max-width: 767px) {
    /* 400px機銃でのvw指定 ベースサイズは17px */
    --size-10: max(2.5vw, 10px);
    --size-12: max(3vw, 12px);
    --size-13: max(3.25vw, 13px);
    --size-14: max(3.5vw, 14px);
    --size-15: max(3.75vw, 15px);
    --size-16: max(4vw, 16px);
    --size-18: max(4.5vw, 18px);
    --size-base: max(4.25vw, 17px);
    --size-20: max(5vw, 20px);
    --size-22: max(5.5vw, 22px);
    --size-24: max(6vw, 24px);
    --size-25: max(6.25vw, 25px);
    --size-28: max(7vw, 28px);
    --size-30: max(7.5vw, 30px);
    --size-32: max(8vw, 32px);
    --size-35: max(8.75vw, 35px);
    --size-36: max(9vw, 36px);
    --size-40: max(10vw, 40px);
    --size-44: max(11vw, 44px);
    --size-48: max(12vw, 48px);
    --size-55: max(13.75vw, 55px);
    --size-60: max(15vw, 60px);
    --size-90: max(22.5vw, 90px);
    --size-100: max(25vw, 100px);
  }

  --color-blue-btn: #1d78b7;
  --color-blue-message: #0556cc;
  --color-blue-title: #0556cc;
  --color-blue-mission: #236ad2;
  --color-white: #fff;
  --color-black: #282727;
  --color-gray: #edeeef;
  --color-gray-text: #6e716e;
  --bg-gray: #f6f6f7;

  --gradient-diagonal: linear-gradient(-114deg, #69bd83, #187fc4 55%);
  --gradient-horizontal: linear-gradient(to left, #69bd83, #187fc4 55%);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: var(--size-base);
  line-height: 1.647;
  color: var(--color-black);
  background-color: var(--color-white);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
img {
  inline-size: 100%;
  block-size: auto;
}
summary,
ul,
ol {
  list-style: none;
}
ul {
  margin: 0;
  padding: 0;
}
button {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.common-btn {
  display: flex;
  align-items: center;
  inline-size: min(21.538vw, 280px);
  padding-block: var(--size-12);
  padding-inline: var(--size-15);
  font-size: var(--size-16);
  font-weight: 700;
  line-height: 1.375;
  letter-spacing: 0.08em;
  border-radius: 100vmax;
  background-color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.common-btn:hover {
  background-color: var(--color-blue-message);
  color: var(--color-white);
}
.sp-only {
  display: none;
}

.fade-in {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}
.fade-in.is-show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {
  html,
  body {
    font-size: var(--size-base);
  }
  .common-btn {
    inline-size: max(75vw, 300px);
    padding-block: var(--size-16);
    padding-inline: var(--size-12);
    font-size: var(--size-base);
  }
  .sp-only {
    display: block;
  }
  .pc-only {
    display: none;
  }
}

/* ================================== 
  header
================================== */
header {
  max-inline-size: 1300px;
  margin-inline: auto;
  padding-inline: var(--size-20);
}
.header-inner {
  padding-block: var(--size-16) var(--size-12);
  border-bottom: 1px solid var(--color-blue-message);
}
.header-logo {
  inline-size: min(14.615vw, 190px);
}

@media (max-width: 767px) {
  .header-logo {
    inline-size: max(47.5vw, 190px);
  }
}

/* ================================== 
  fv
================================== */
.fv {
  display: grid;
  max-block-size: 560px;
  block-size: calc((100dvh - 70px) - 100px);
  inline-size: 100%;
  margin-inline: auto;
  overflow: hidden;
  animation: open-fade 1s ease-in-out 0.6s both;
}
.fv > * {
  grid-area: 1 / 1;
}
.fv img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.fv-text {
  position: relative;
  aspect-ratio: 1300 / 560;
  block-size: 100%;
  overflow: hidden;
}
.fv h1 {
  position: absolute;
  inset-block-start: min(13.603vw, 225px);
  inset-inline-start: 13.846vw;
  aspect-ratio: 346 / 91;
  inline-size: min(26.844vw, 444px);
  background-image: url(../images/top/text-fv.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left top;
  animation: fv-blur 1s ease-in-out 1.3s both;
}

@media (max-width: 767px) {
  .fv {
    max-block-size: none;
    aspect-ratio: 400 / 660;
  }
  .fv h1 {
    aspect-ratio: 226 / 158;
    inset-block-start: max(43.75vw, 175px);
    inset-inline-start: var(--size-30);
    inline-size: max(56.5vw, 226px);
    background-image: url(../images/top/text-fv_sp.svg);
  }
}

/* ================================== 
  report
================================== */
.report {
  max-inline-size: 1300px;
  margin-inline: auto;
  padding-inline: var(--size-30);
  padding-block: var(--size-30);
}
.report .container-inner {
  padding-block: var(--size-60) var(--size-55);
  padding-inline: var(--size-100);
  border-radius: var(--size-30);
  background-image: var(--gradient-diagonal);
}
.report h2 {
  aspect-ratio: 264 / 32;
  max-inline-size: 264px;
  background-image: url(../images/top/text-report.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left top;
}

.report .embla {
  position: relative;
  margin-block-start: var(--size-20);
}
.embla__viewport {
  overflow: hidden;
}
.report-list.embla__container {
  display: flex;
  gap: var(--size-40);
}
.report-item {
  display: flex;
  flex-direction: column;
  gap: var(--size-10);
  flex: 0 0 min(17.692vw, 230px);
  min-inline-size: 0;
}
.report-thumbnail {
  display: grid;
  aspect-ratio: 1 / 1;
  border-radius: var(--size-14);
  overflow: hidden;
}
.report-thumbnail > * {
  grid-area: 1 / 1;
}
.report-thumbnail img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.report-thumbnail p {
  max-inline-size: fit-content;
  inline-size: min(11.846vw, 154px);
  align-self: flex-end;
  margin: var(--size-20);
  padding: var(--size-10);
  font-size: var(--size-15);
  font-weight: 500;
  line-height: 1.333;
  letter-spacing: 0.03em;
  background-color: var(--color-white);
}
.report-thumbnail p span {
  overflow: hidden;
  display: -webkit-box;
  color: var(--color-black);
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.report-content {
  display: flex;
  flex-direction: column;
  gap: min(0.384vw, 5px);
  color: var(--color-white);
  font-weight: 300;
}
.report-content .title {
  font-size: var(--size-16);
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: 0.05em;
}

.embla__button {
  position: absolute;
  inset-block-start: 33%;
  inset-inline-start: calc(min(5.384vw, 70px) * -1);
  inline-size: min(3.538vw, 46px);
  block-size: min(3.538vw, 46px);
  background-image: url(../images/common/icon-slideArrow.svg);
  transform: translateY(-50%);
}
.embla__button.embla__next {
  inset-inline-start: auto;
  inset-inline-end: calc(min(5.384vw, 70px) * -1);
  transform: translateY(-50%) rotate(180deg);
}
.embla__dots {
  display: flex;
  justify-content: center;
  gap: var(--size-10);
  margin-block-start: var(--size-30);
}
.embla__dot {
  aspect-ratio: 1 / 1;
  inline-size: var(--size-10);
  block-size: var(--size-10);
  border: 1px solid var(--color-white);
  border-radius: 50%;
  cursor: pointer;
}
.embla__dot.is-selected {
  background-color: var(--color-white);
}

.more-link {
  display: table;
  margin-inline: auto;
  margin-block-start: var(--size-40);
}
.more-link a {
  justify-content: flex-end;
  gap: var(--size-10);
  color: var(--color-blue-mission);
}
.more-link a img {
  inline-size: min(3vw, 39px);
  block-size: auto;
}

@media (max-width: 767px) {
  .report {
    padding: var(--size-20);
  }
  .report .container-inner {
    padding-block: max(18.75vw, 75px) max(17.5vw, 70px);
    padding-inline: var(--size-30);
  }
  .report h2 {
    aspect-ratio: 152 / 57;
    inline-size: max(38vw, 152px);
    margin-inline: var(--size-10);
    background-image: url(../images/top/text-report_sp.svg);
  }

  .report .embla {
    margin-inline: var(--size-10);
  }
  .embla__viewport {
    overflow: visible;
  }
  .report-list.embla__container {
    gap: var(--size-20);
  }
  .embla__button {
    inset-inline-start: calc(max(13vw, 52px) * -1);
    inline-size: max(10.5vw, 42px);
    block-size: max(10.5vw, 42px);
  }
  .embla__button.embla__next {
    inset-inline-end: calc(max(13vw, 52px) * -1);
  }
  .report-item {
    flex: 0 0 max(70vw, 280px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform-origin: center center;
  }
  .report-item:not(.is-selected) {
    transform: scale(0.92);
  }
  .report-item .report-content {
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .report-item:not(.is-selected) .report-content {
    opacity: 0;
    visibility: hidden;
  }
  .report-thumbnail p {
    inline-size: max(38.5vw, 154px);
    font-size: var(--size-15);
  }

  .more-link {
    margin-block-start: var(--size-30);
  }
  .more-link a {
    gap: var(--size-15);
  }
  .more-link a img {
    inline-size: max(9.75vw, 39px);
  }
}

/* ================================== 
  message
================================== */
.message {
  position: relative;
  max-inline-size: 1300px;
  margin-inline: auto;
  padding-block: var(--size-30) 9.23vw;
  text-align: center;
}
.message .container-inner {
  padding-block-start: var(--size-55);
}
.message h2 {
  margin-block-end: var(--size-40);
  color: var(--color-blue-mission);
  font-size: var(--size-28);
  font-weight: 500;
  line-height: 1.78;
  letter-spacing: 0.1em;
}
.message p {
  line-height: 2.529;
  letter-spacing: 0.05em;
}

.bg-image {
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: var(--size-10);
  overflow: hidden;
}
.bg-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.article01-01 {
  inset-block-start: var(--size-30);
  inset-inline-end: var(--size-24);
  inline-size: min(24.615vw, 320px);
}
.article01-02 {
  inset-block-start: min(8.846vw, 115px);
  inset-inline-start: var(--size-55);
  inline-size: min(13.846vw, 180px);
}
.article01-03 {
  inset-block-end: calc(var(--size-40) * -1);
  inset-inline-start: min(9.23vw, 120px);
  inline-size: min(20.769vw, 275px);
}
.article01-04 {
  inset-block-end: calc(var(--size-55) * -1);
  inset-inline-end: min(17.461vw, 228px);
  inline-size: min(15.384vw, 200px);
}

@media (max-width: 767px) {
  .message {
    padding-block: max(6.25vw, 25px) max(50vw, 200px);
    text-align: left;
  }
  .message .container-inner {
    padding-block-start: max(60vw, 240px);
    padding-inline: var(--size-30);
  }
  .message h2 {
    margin-block-end: var(--size-40);
    font-size: var(--size-30);
    line-height: 1.66;
  }
  .message p {
    font-size: var(--size-base);
    line-height: 2.23;
  }

  .article01-01 {
    inset-block-start: var(--size-24);
    inset-inline-end: var(--size-20);
    inline-size: max(42.5vw, 170px);
  }
  .article01-02 {
    inset-block-start: max(27.5vw, 110px);
    inset-inline-start: var(--size-18);
    inline-size: max(28.75vw, 115px);
  }
  .article01-03 {
    inset-block-end: calc(var(--size-24) * -1);
    inset-inline-start: var(--size-20);
    inline-size: max(39vw, 156px);
  }
  .article01-04 {
    inset-block-end: max(11vw, 44px);
    inset-inline-end: var(--size-40);
    inline-size: max(32.5vw, 130px);
  }
}

/* ================================== 
  mission
================================== */
.mission .missions-container {
  text-align: center;
  background-image: var(--gradient-diagonal);
}
.missions-container .container-inner {
  position: relative;
  max-inline-size: 1300px;
  margin-inline: auto;
  padding-block: var(--size-60) var(--size-90);
}
.missions-container h2 {
  position: relative;
  aspect-ratio: 181 / 109;
  max-inline-size: 181px;
  margin-inline: auto;
  background-image: url(../images/top/text-3mission.svg);
  background-size: 169px 84px;
  background-repeat: no-repeat;
  background-position: center top;
  overflow: hidden;
}
.missions-container h2::before {
  position: absolute;
  content: "";
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 12px;
  transform: translateX(-100%);
  transition: transform 0.6s ease-in-out;
  background-color: #fff;
}
.missions-container h2.is-show::before {
  transform: translateX(0px);
}
.mission-list img {
  inline-size: min(4vw, 24px);
  block-size: auto;
}
.mission-list {
  display: flex;
  flex-direction: column;
  gap: var(--size-20);
  max-inline-size: 465px;
  margin-inline: auto;
  margin-block-start: var(--size-40);
}
.mission-list a {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--size-20);
  inline-size: 100%;
  padding-block-end: var(--size-20);
  padding-inline: var(--size-20) min(0.384vw, 5px);
  text-align: left;
  font-size: var(--size-24);
  font-weight: 500;
  line-height: 1.458;
  letter-spacing: 0.17em;
  color: var(--color-white);
  overflow: hidden;
}
.mission-list a::before {
  position: absolute;
  content: "";
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  transform: translateX(-100%);
  background-color: rgba(255, 255, 255, 0.3);
}
.mission-list a::before {
  transition: transform 0.3s ease-in-out;
}
.mission-list a:hover::before {
  transform: translateX(0px);
  transition-delay: 0s;
}
.mission-list a .title {
  inline-size: 100%;
  transition: color 0.3s ease-in-out;
}
.mission-list a:hover .title {
  color: #fcffd9;
}
.mission-list a .number {
  display: block;
  aspect-ratio: 11 / 37;
  inline-size: min(0.846vw, 11px);
  background-image: url(../images/top/text-one.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.mission-list a:nth-of-type(2) .number {
  aspect-ratio: 16 / 37;
  inline-size: var(--size-16);
  background-image: url(../images/top/text-two.svg);
}
.mission-list a:nth-of-type(3) .number {
  aspect-ratio: 16 / 38;
  inline-size: var(--size-16);
  background-image: url(../images/top/text-three.svg);
}

.article02-01 {
  inset-block-start: min(8.84vw, 115px);
  inset-inline-end: min(3.846vw, 50px);
  inline-size: min(17.692vw, 220px);
}
.article02-02 {
  inset-block-start: min(10.769vw, 140px);
  inset-inline-start: min(3.846vw, 50px);
  inline-size: min(17.692vw, 220px);
}

@media (max-width: 767px) {
  .missions-container .container-inner {
    padding-block: var(--size-60);
  }
  .mission-list {
    max-inline-size: max(82.5vw, 330px);
    margin-block-start: var(--size-40);
  }
  .mission-list a {
    justify-content: space-between;
    gap: 0;
    font-size: var(--size-22);
    letter-spacing: 0.18em;
  }
  .mission-list a .number {
    inline-size: max(2.75vw, 11px);
    margin-inline-end: var(--size-28);
  }
  .mission-list img {
    inline-size: var(--size-24);
  }

  .missions-container .bg-image {
    display: none;
  }
}

/* ================================== 
  common-mission
================================== */
.common-mission {
  padding-block-end: var(--size-100);
  background-image: url(../images/top/bg-mission.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
}
.common-mission .container-inner {
  max-inline-size: 1300px;
  margin-inline: auto;
  padding-inline-start: var(--size-100);
}
.mission-summary {
  display: flex;
  align-items: end;
  justify-content: end;
  gap: min(5.3846vw, 70px);
}
.mission-summary .summary-text {
  max-inline-size: min(40.769vw, 530px);
  inline-size: 100%;
}
.mission-summary .summary-text .label {
  display: grid;
  place-items: center;
  aspect-ratio: 222 / 66;
  max-inline-size: 222px;
  background-image: var(--gradient-horizontal);
}
.mission-summary .summary-text .label .label-text {
  aspect-ratio: 132 / 32;
  max-inline-size: 132px;
  inline-size: 100%;
  background-image: url(../images/top/text-mission1.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.mission-summary .summary-text h3 {
  margin-block: var(--size-36) var(--size-20);
  color: var(--color-blue-mission);
  font-size: var(--size-36);
  font-weight: 700;
  line-height: 1.527;
  letter-spacing: 0.11em;
}
.mission-summary .summary-text p {
  text-align: justify;
  line-height: 2;
  letter-spacing: 0.05em;
}
.mission-summary .mission-image {
  aspect-ratio: 620 / 470;
  max-inline-size: 620px;
  inline-size: 100%;
  overflow: hidden;
}

@media (max-width: 767px) {
  .common-mission {
    padding-block-end: max(20.5vw, 82px);
    background-image: url(../images/top/bg-mission_sp.png);
    background-size: contain;
  }
  .common-mission .container-inner {
    padding: 0;
  }
  .mission-summary {
    flex-direction: column;
    padding-block-start: var(--size-60);
  }
  .mission-summary .summary-text {
    max-inline-size: none;
  }
  .mission-summary .summary-text .label {
    margin-inline: auto;
    max-inline-size: max(47.5vw, 190px);
  }
  .mission-summary .summary-text .label .label-text {
    max-inline-size: max(31.25vw, 125px);
  }
  .mission-summary .summary-text h3 {
    display: table;
    margin-block: var(--size-30) var(--size-40);
    margin-inline: auto;
    font-size: var(--size-25);
    line-height: 1.571;
    letter-spacing: 0.1em;
  }
  .mission-summary .summary-text .sp-img {
    aspect-ratio: 1 / 1;
    inline-size: 100%;
    margin-block-end: var(--size-40);
  }
  .mission-summary .summary-text .sp-img img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .mission-summary .summary-text p {
    padding-inline: var(--size-35);
    font-size: var(--size-base);
  }
  .mission-summary .mission-image {
    display: none;
  }
}

/* ================================== 
  second-mission
================================== */
.second-mission .container-inner {
  padding-inline: 0 var(--size-100);
}
.second-mission .mission-summary {
  flex-direction: row-reverse;
}
.second-mission .summary-text .label .label-text {
  background-image: url(../images/top/text-mission2.svg);
}

@media (max-width: 767px) {
  .second-mission .container-inner {
    padding-inline: 0;
  }
}

/* ================================== 
  third-mission
================================== */
.third-mission .summary-text .label .label-text {
  background-image: url(../images/top/text-mission3.svg);
}

/* ================================== 
  accordion
================================== */
.accordion-container {
  padding-inline-end: var(--size-100);
}
.second-mission .accordion-container {
  padding-inline: var(--size-100) 0;
}
.accordion-wrapper {
  margin-block-start: var(--size-100);
}
.accordion-wrapper > button {
  justify-content: center;
  gap: min(0.538vw, 7px);
  inline-size: 280px;
  margin-inline: auto;
  color: var(--color-blue-message);
  font-family: Zen Kaku Gothic New;
  font-weight: 500;
  font-size: var(--size-16);
  border: 1px solid var(--color-blue-message);
}
.accordion-wrapper > button img {
  inline-size: var(--size-24);
  transform: rotate(90deg);
}

.accordion-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.35s ease;
}
.accordion-wrapper.is-open .js-open {
  opacity: 0;
  visibility: hidden;
}
.accordion-inner {
  padding-block: min(6.153vw, 80px) var(--size-40);
  padding-inline: min(11.538vw, 150px);
  background-color: var(--color-white);
}
.first-mission .accordion-image {
  text-align: center;
}
.common-mission:not(.first-mission) .accordion-image {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--size-100);
  overflow: hidden;
}
.accordion-image p {
  position: relative;
  inline-size: min(23.076vw, 300px);
  padding-block: var(--size-30) var(--size-20);
  color: var(--color-blue-mission);
  font-size: var(--size-23);
  font-weight: 700;
  line-height: 1.304;
  text-align: center;
}
.accordion-image p::before,
.accordion-image p::after {
  position: absolute;
  content: "";
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 4px;
  background-image: var(--gradient-horizontal);
}
.accordion-image p::after {
  inset-block: auto 0;
}
.accordion-image p strong {
  display: block;
  font-size: var(--size-35);
  font-weight: 900;
  line-height: 2;
  background-image: var(--gradient-horizontal);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.third-mission .accordion-image p {
  padding-block-end: var(--size-24);
}
.accordion-image p .img-text {
  display: block;
  aspect-ratio: 102 / 58;
  inline-size: min(7.846vw, 102px);
  margin-inline: auto;
  margin-block-start: var(--size-16);
  background-image: url(../images/top/text-60year.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.accordion-image img {
  inline-size: min(30.769vw, 400px);
}
.accordion-text {
  text-align: justify;
  font-size: var(--size-16);
  line-height: 1.75;
  letter-spacing: 0.03em;
}
.accordion-text h4 {
  margin-block: var(--size-40) var(--size-20);
  font-size: var(--size-24);
  font-weight: 500;
  line-height: 1.625;
  letter-spacing: 0.04em;
  color: var(--color-blue-mission);
}
.accordion-wrapper .close-btn {
  position: relative;
  display: block;
  inline-size: 260px;
  margin-inline: auto;
  margin-block-start: var(--size-25);
  padding-block: var(--size-15);
  text-align: center;
  color: #5e5d5d;
  font-size: var(--size-16);
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: 0.21em;
  border: none;
  border-radius: 100vmax;
  background: #eeebee;
  cursor: pointer;
}
.accordion-wrapper .close-btn img {
  position: absolute;
  inset-block-end: 50%;
  inset-inline-end: var(--size-20);
  transform: translateY(50%);
  inline-size: var(--size-24);
}
@media (max-width: 767px) {
  .accordion-container {
    padding-inline-end: 0;
  }
  .accordion-wrapper {
    margin-block-start: max(11vw, 44px);
  }
  .second-mission .accordion-container {
    padding-inline: 0;
  }
  .accordion-inner {
    padding: 0 var(--size-35);
  }
  .accordion-image img {
    inline-size: 100%;
  }
  .accordion-text h4 {
    margin-block: var(--size-30) var(--size-20);
    font-size: var(--size-20);
  }
  .common-mission:not(.first-mission) .accordion-image {
    flex-direction: column;
    gap: var(--size-30);
  }
  .accordion-image p {
    inline-size: 100%;
    padding-block: var(--size-16) var(--size-13);
    font-size: var(--size-20);
  }
  .accordion-image p strong {
    font-size: var(--size-32);
    line-height: 1.3125;
  }
  .third-mission .accordion-image p {
    display: flex;
    justify-content: center;
    gap: var(--size-20);
    text-align: left;
  }
  .accordion-image p .img-text {
    inline-size: max(19.75vw, 79px);
    margin: 0;
  }
  .accordion-wrapper .close-btn {
    inline-size: max(65vw, 260px);
  }
  .accordion-wrapper .close-btn img {
    inline-size: var(--size-24);
    font-size: var(--size-16);
  }
}

/* ================================== 
  our-vision
================================== */
.our-vision {
  position: relative;
  max-inline-size: 1300px;
  margin-inline: auto;
  padding-block: min(5.384vw, 70px) var(--size-100);
}
.our-vision::before {
  position: absolute;
  content: "";
  inset-block-start: 0;
  inset-inline-start: var(--size-25);
  inline-size: calc(100% - min(3.846vw, 50px));
  block-size: 8px;
  background-image: var(--gradient-horizontal);
}
.our-vision .container-inner {
  padding-inline: min(15vw, 195px);
}
.our-vision h2 {
  aspect-ratio: 303 / 62;
  max-inline-size: 303px;
  margin-inline: auto;
  margin-block-end: var(--size-60);
  background-image: url(../images/top/text-ourvision.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.vision-summary {
  display: flex;
  gap: var(--size-60);
}
.vision-summary .vision-image {
  aspect-ratio: 376 / 235;
  max-inline-size: 376px;
  inline-size: 100%;
  overflow: hidden;
}
.vision-summary .vision-text {
  max-inline-size: min(28.307vw, 368px);
  inline-size: 100%;
  font-size: var(--size-16);
  line-height: 2;
  letter-spacing: 0.03em;
}

@media (max-width: 767px) {
  .our-vision {
    padding-block: var(--size-55);
  }
  .our-vision::before {
    inline-size: calc(100% - var(--size-40));
    inset-inline-start: var(--size-20);
  }
  .our-vision .container-inner {
    padding-inline: var(--size-35);
  }
  .our-vision h2 {
    max-inline-size: max(51.5vw, 206px);
    margin-block-end: var(--size-48);
  }
  .vision-summary {
    flex-direction: column;
    gap: var(--size-40);
  }
  .vision-summary .vision-text {
    max-inline-size: 100%;
  }
}

/* ================================== 
  footer
================================== */
footer .page-top {
  margin-inline: var(--size-20);
}
footer .page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--size-20);
  padding-block: min(1.923vw, 25px);
  background: var(--bg-gray);
  transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
}
footer .page-top a:hover {
  color: var(--color-white);
  background: var(--color-blue-message);
}
footer .text-top {
  display: block;
  aspect-ratio: 60 / 14;
  max-inline-size: 60px;
  inline-size: 100%;
  background-image: url(../images/top/text-pagetop.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.3s ease-in-out;
}
footer .page-top a:hover .text-top {
  background-image: url(../images/top/text-pagetop_active.svg);
}
footer .page-top img {
  inline-size: var(--size-24);
  block-size: auto;
  transform: rotate(180deg);
}

footer .container-inner {
  margin-block-start: var(--size-60);
}
.footer-items {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: min(10vw, 130px);
}
.footer-logo {
  inline-size: min(10.769vw, 140px);
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--size-40);
}
.footer-nav .inner-link,
.footer-nav .outer-link {
  display: flex;
}
.footer-nav ul li a {
  color: var(--color-black);
  font-size: var(--size-14);
  font-weight: 400;
}
.footer-nav .inner-link {
  gap: var(--size-20);
}
.footer-nav .inner-link a {
  justify-content: space-between;
  gap: min(0.6153vw, 8px);
  inline-size: min(16.153vw, 210px);
  padding-inline: var(--size-30) var(--size-12);
  border: 1px solid var(--color-blue-message);
}
.footer-nav .inner-link img {
  inline-size: var(--size-20);
}

.footer-nav .outer-link {
  gap: var(--size-40);
}
.footer-nav .outer-link a {
  position: relative;
  display: flex;
  align-items: center;
  gap: min(0.6153vw, 8px);
  overflow: hidden;
}
.footer-nav .outer-link a::before {
  position: absolute;
  content: "";
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: calc(100% - var(--size-24));
  block-size: 1px;
  background-color: var(--color-blue-message);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out,
    visibility 0.3s ease-in-out;
}
.footer-nav .outer-link a:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.footer-nav .outer-link a img {
  inline-size: var(--size-15);
}

.other-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(4.23vw, 55px);
  margin-block: var(--size-60) var(--size-20);
}
.other-link li a {
  color: var(--color-gray-text);
  font-size: var(--size-13);
  font-weight: 400;
}

.footer-copyright {
  padding-block: var(--size-15);
  text-align: center;
  color: var(--color-white);
  font-family: "Oswald", sans-serif;
  font-size: var(--size-14);
  font-weight: 300;
  line-height: 1.785;
  letter-spacing: 0.08em;
  background-image: var(--gradient-horizontal);
}

@media (max-width: 767px) {
  footer .page-top {
    margin: 0;
  }
  footer .page-top a {
    gap: var(--size-15);
    padding-block: var(--size-35);
  }
  footer .text-top {
    max-inline-size: max(16.5vw, 66px);
  }
  footer .page-top img {
    inline-size: var(--size-18);
  }
  footer .container-inner {
    margin-block-start: var(--size-60);
  }
  .footer-items {
    flex-direction: column;
    align-items: center;
    gap: var(--size-30);
  }
  .footer-logo {
    inline-size: max(27vw, 108px);
  }
  .footer-nav {
    gap: var(--size-44);
  }
  .footer-nav .inner-link,
  .footer-nav .outer-link {
    flex-direction: column;
  }
  .footer-nav .inner-link {
    gap: var(--size-10);
  }
  .footer-nav .inner-link a {
    position: relative;
    justify-content: center;
    gap: 0;
    inline-size: max(57.5vw, 230px);
    padding-block: var(--size-12);
    padding-inline: 0;
    font-size: var(--size-15);
  }
  .footer-nav .inner-link img {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--size-12);
    transform: translateY(-50%);
    inline-size: var(--size-20);
  }
  .footer-nav .outer-link {
    align-items: center;
    gap: var(--size-24);
  }
  .footer-nav .outer-link a {
    gap: var(--size-10);
    font-size: var(--size-14);
  }
  .other-link {
    margin-block: var(--size-48) var(--size-28);
  }
  .other-link li a {
    font-size: var(--size-13);
  }
  .footer-copyright {
    padding-block: var(--size-12);
    font-size: var(--size-13);
  }
}

/* ================================== 
  keyframe
================================== */
@keyframes open-fade {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fv-blur {
  0% {
    filter: blur(15px);
    opacity: 0;
    visibility: hidden;
  }
  100% {
    filter: blur(0);
    opacity: 1;
    visibility: visibility;
  }
}