@charset "utf-8";

/*============================　
　既存スタイル上書き及び追加
=============================*/
.p-contetns-contact:has(+ .p-contents) {
  padding-bottom: 0;
}

.p-top+.p-contetns-contact {
  padding-top: 32px;
}

.p-contents--top+.p-contents {
  margin-top: clamp(2.5rem, 1.0987rem + 5.9791vw, 5rem);
}

.l-contact__wrap:not(:root) {
  margin-top: 0;
}

@media not (min-width: 768px) {
  .l-contents__inner {
    padding-inline: 2%;
  }
}

/* メインビジュアル */
.p-top {
  position: relative;
  background-image: url("../images/mv.webp");
  background-position: center;
  background-color: #f0f0f0;
}

@media (min-width: 768px) {
  .p-top {
    padding: 140px 0 160px;
    border-radius: 15px;
    background-attachment: fixed;
  }
}

@media not (min-width: 768px) {
  .p-top {
    padding: 80px 0 60px;
    border-radius: 10px;
    background-position: center;
  }
}

/*============================　
　個別 s-xx
=============================*/

/* Tab */
/* ------------------- */
.s-tab {
  margin-top: clamp(2rem, 0.8789rem + 4.7833vw, 4rem);
}

.s-tab__lists {
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  border-radius: 12px;
  overflow: hidden;
}

.s-tab__button {
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 0.6099rem + 0.5979vw, 1rem) 12px;
  background-color: #ebebeb;
  font-size: clamp(0.875rem, 0.7349rem + 0.5979vw, 1.125rem);
  font-weight: bold;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition-duration: 0.3s;
  transition-property: background-color, opacity;
}

.s-tab__button[aria-selected="true"] {
  color: #fff;
  background-color: #003366;
  pointer-events: none;
}

.s-tabpanel__inner {
  padding: clamp(1.5rem, 1.2197rem + 1.1958vw, 2rem) clamp(1rem, 0.5455rem + 1.9394vw, 2rem);
  background-color: #fff;
  border-radius: 12px;
}

@media (any-hover: hover) {
  .s-tab__button:not([aria-selected="true"]):hover {
    opacity: 0.75;
  }
}

@media screen and (min-width: 768px) {
  .s-tab__lists {
    max-width: calc(100% - 80px);
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Other */
/* ------------------- */
.s-content {
  position: relative;
  margin-top: clamp(1.5rem, 0.9395rem + 2.3916vw, 2.5rem);
  padding-block: clamp(1.5rem, 0.9395rem + 2.3916vw, 2.5rem);
}

.s-content::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  content: "";
  display: block;
  background-color: #e9ecf2;
  border-radius: 12px;
  height: 100%;
}


.s-block:first-of-type {
  margin-top: clamp(2.5rem, 1.9395rem + 2.3916vw, 3.5rem);
}

.s-block:not(:first-of-type) {
  margin-top: clamp(3rem, 2.4395rem + 2.3916vw, 4rem);
}

.s-avatar {
  margin-top: clamp(2rem, 1.7197rem + 1.1958vw, 2.5rem);
  padding-inline-start: 12px;
}

.s-avatar>.s-avatar {
  margin-top: 28px;
}

/* テキスト */
/* ------------------- */

/* 見出し */
.s-heading {
  font-weight: 600;
  line-height: 1.3;
}

.s-heading--level2 {
  max-width: fit-content;
  margin-inline: auto;
  font-size: clamp(1.5rem, 1.2197rem + 1.1958vw, 2rem);
  text-align: center;
}

.s-heading--level3 {
  font-size: clamp(1.25rem, 1.0398rem + 0.8969vw, 1.625rem);
}

.s-heading--level4 {
  font-size: clamp(1.125rem, 0.9849rem + 0.5979vw, 1.375rem);
}

.s-heading--level5 {
  font-size: clamp(1rem, 0.9299rem + 0.299vw, 1.125rem);
}

.s-heading--level6 {
  font-size: 16px;
}

.s-heading[data-line] {
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
}

.s-heading[data-line]::after {
  content: "";
  display: block;
  position: absolute;
  width: 10%;
  padding-top: 8px;
  border-bottom: 1px solid #003366;
}

.s-heading__link {
  max-width: fit-content;
  display: grid;
  column-gap: 8px;
  align-items: center;
  grid-template-columns: auto 1fr;
}

.s-heading__link::before {
  content: "";
  display: block;
  width: 40px;
  aspect-ratio: 1;
  padding: 8px;
  background-color: #fff;
  background-image: url("../images/icn_arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #dfe2e5;
  border-radius: calc(infinity * 1px);
  transition: border-color 0.3s, color 0.3s;
}

.s-heading--level3 .s-heading__link:is(.s-heading--level3 > *)::before {
  width: 34px;
  padding: 10px;
}

.s-heading--level4 .s-heading__link:is(.s-heading--level4 > *)::before {
  width: 20px;
  padding: 14px;
}

.s-heading--level5 .s-heading__link:is(.s-heading--level5 > *)::before {
  width: 16px;
  padding: 14px;
}

.s-text {
  font-size: 16px;
}

@media (any-hover: hover) {
  .s-heading__link:hover {
    color: #003366;
  }

  .s-heading__link:hover::before {
    border-color: #003366;
  }
}

/* lists */
.s-textLists {
  display: grid;
  gap: 12px 24px;
}

.s-textLists:is(.s-heading--level3 + *) {
  margin-top: clamp(1.5rem, 0.9395rem + 2.3916vw, 2.5rem);
}

.s-textLists:is(.s-heading--level4 + *) {
  margin-top: clamp(1rem, 0.8599rem + 0.5979vw, 1.25rem);
}

.s-textLists:is(.s-heading--level5 + *) {
  margin-top: clamp(0.875rem, calc(0.804932735426009rem + 0.29895366218236175vw), 1rem);
}

.s-textLists:is(.s-heading--level6 + *) {
  margin-top: 12px;
}

.s-textLists:is(.s-text + *) {
  margin-top: 8px;
}

.s-text:has(+ .s-textLists) {
  padding-inline-start: 4px;
}

.s-textItem__link {
  max-width: fit-content;
  display: grid;
  column-gap: 8px;
  align-items: center;
  grid-template-columns: auto 1fr;
  padding-inline: 4px;
  font-size: 14px;
  /* text-decoration: underline; */
  transition: opacity 0.3s
}

.s-textItem__link::before {
  content: "";
  justify-self: end;
  inline-size: 8px;
  aspect-ratio: 1;
  margin-top: 1.5px;
  border-block-start: 2px solid #003366;
  border-inline-end: 2px solid #003366;
  rotate: 45deg;
}

@media (any-hover: hover) {
  .s-textItem__link:hover {
    opacity: 0.75;
  }
}

@media screen and (min-width: 768px) {
  .s-textLists {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .s-textLists {
    grid-template-columns: repeat(3, 1fr);
  }

  .s-textLists[data-column="pc:2"] {
    grid-template-columns: repeat(2, 1fr);
  }
}