@charset "UTF-8";
:root {
  --blue: #0093ff;
  --white: #ffffff;
  --light-gray: #f3f5f7;
  --blue-gray: #f1fafe;
  --gray: #505050;
  --black: #000000;
}

@media screen and (min-width: 481px), print {
  :root {
    --width: 1200;
  }
}
@media (max-width: 480px) {
  :root {
    --width: 480;
  }
}
/* ---------- COMMON ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  line-height: 1.5;
  scroll-behavior: smooth;
}

body {
  color: var(--black);
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.8rem;
  font-feature-settings: "palt";
  line-height: 1.5;
  min-width: 1200px;
}

@media (max-width: 480px) {
  body {
    font-size: calc((14 / var(--width)) * 100vw);
    min-width: 100%;
  }
}
@media screen and (min-width: 481px), print {
  .sp-only {
    display: none;
  }
}
@media (max-width: 480px) {
  .pc-only {
    display: none;
  }
}
header, footer, section, article, aside, nav, pre {
  display: block;
}

button {
  border: 0;
}

ul, ol, dl {
  list-style: none;
}

a {
  color: var(--black);
  text-decoration: none;
  transition: ease 0.5s;
}
a:hover {
  color: var(--blue);
}

a[href^="tel:"] {
  color: var(--black);
  pointer-events: none;
}

@media (max-width: 480px) {
  a[href^="tel:"] {
    text-decoration: underline;
  }
}
img {
  width: 100%;
  height: auto;
  vertical-align: top;
  object-fit: contain;
  object-position: center center;
}

figure > img {
  text-align: center;
}
figure figcaption {
  color: var(--black);
  font-size: 90%;
  margin: 8px;
}
figure figcaption strong {
  font-size: 110%;
}

/* ---------- WEB FONTS ---------- */
.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-1p-medium {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.m-plus-1p-bold {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.m-plus-1p-extrabold {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 800;
  font-style: normal;
}

/* ---------- HEADER ---------- */
#header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  transition: background ease-out .3s;
}

@media (max-width: 480px) {
  #header {
    padding: calc((8 / var(--width)) * 100vw);
  }
  #header.sticky {
    background-color: #19aeff;
  }

  #header > .inner {
    display: flex;
    align-items: center;
    padding: 0;
  }
}
a.logo {
  display: block;
  width: 246px;
  height: auto;
}

@media (max-width: 480px) {
  a.logo {
    width: calc((108 / var(--width)) * 100vw);
  }
}
/* ---------- GNAV ---------- */
@media (max-width: 480px) {
  button.menu-btn {
    background-color: transparent;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    width: calc((44 / var(--width)) * 100vw);
    height: calc((44 / var(--width)) * 100vw);
    max-width: 44px;
    max-height: 44px;
    margin-left: auto;
    position: relative;
    z-index: 20;
  }

  .menu-btn__bars {
    width: calc((36 / var(--width)) * 100vw);
    height: calc((18 / var(--width)) * 100vw);
  }

  .menu-btn__bar {
    display: block;
    background-color: #fff;
    width: 100%;
    height: 2px;
    margin-bottom: 4px;
    transition: transform ease .3s, top ease .3s, left ease .3s;
  }
  .menu-btn__bar:nth-child(2) {
    width: 80%;
  }
  .menu-btn__bar:last-child {
    width: 60%;
    margin-bottom: 0;
  }

  /* is-active */
  button.menu-btn.is-active .menu-btn__bar:first-child {
    transform-origin: center center;
    transform: rotate(45deg) translate(4px, 0);
  }
  button.menu-btn.is-active .menu-btn__bar:nth-child(2) {
    opacity: 0;
  }
  button.menu-btn.is-active .menu-btn__bar:last-child {
    width: 100%;
    transform-origin: center center;
    transform: rotate(-45deg) translate(8px, -4px);
  }
}
/* PC - menu button */
@media screen and (min-width: 481px), print {
  button.menu-btn,
  nav#gnav {
    display: none;
  }
}
/* PHONE - grobal navigation */
@media (max-width: 480px) {
  nav#gnav {
    background: linear-gradient(to right, #19aeff 0%, #a7c9ff 100%);
    width: 100%;
    height: 100vh;
    padding: calc((88 / var(--width)) * 100vw) calc((20 / var(--width)) * 100vw) calc((20 / var(--width)) * 100vw) calc((20 / var(--width)) * 100vw);
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 10;
    overflow-y: auto;
    transition: right ease-out .275s;
  }
  nav#gnav.is-active {
    right: 0;
  }
  nav#gnav::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  nav#gnav::-webkit-scrollbar-track {
    background-color: #ccc;
    height: 6px;
  }
  nav#gnav::-webkit-scrollbar-thumb {
    background: #000;
    width: 6px;
    height: 6px;
    border-radius: 3px;
  }

  .gnav__list {
    list-style: none;
  }
  .gnav__item {
    border-top: 1px solid var(--white);
    font-size: calc((17 / var(--width)) * 100vw);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: calc(17px * 50 / 1000);
  }
  .gnav__item:last-child {
    border-bottom: 1px solid var(--white);
    margin-bottom: 0;
  }
  .gnav__item.has-nav {
    padding-right: 0;
  }
  .gnav__link {
    color: var(--white);
    display: block;
    padding: calc((20 / var(--width)) * 100vw) 0;
  }
  .gnav__link[href=""] {
    color: var(--white);
    opacity: 0.5;
    pointer-events: none;
    text-decoration: line-through;
  }
  .gnav__link.is-active {
    color: var(--blue);
    background-color: #fff;
    padding-left: calc((10 / var(--width)) * 100vw);
  }
}
/* ---------- CONAINER ---------- */
.inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc((20 / var(--width)) * 100vw);
  padding-right: calc((20 / var(--width)) * 100vw);
}

section {
  padding: 48px 0;
}

/* ---------- KV ---------- */
.kv {
  aspect-ratio: 1920 / 600;
  width: 100%;
  height: 600px;
  margin-bottom: 158px;
  position: relative;
  overflow: hidden;
}

.kv__ttl {
  color: var(--gray);
  font-size: 4.2rem;
  font-weight: 500;
  /* medium */
  letter-spacing: calc(42px * 100 / 1000);
  line-height: 1.38;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: fadeIn ease 1.25s forwards;
  animation-delay: 3s;
}
.kv__ttl--min {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 400;
  /* regular */
  letter-spacing: calc(25px * 20 / 1000);
  margin-bottom: 23px;
}

.kv__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  width: auto;
  height: 100%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: fadeIn ease 1.25s forwards;
  pointer-events: none;
}
.kv__bg.bg--back {
  z-index: -2;
  animation-delay: 1s;
}
.kv__bg.bg--front {
  z-index: -1;
  animation-delay: 2s;
}

.kv__bg img {
  width: auto;
  height: 100%;
}

@media (max-width: 480px) {
  .kv {
    height: 327px;
    aspect-ratio: 375 / 327;
    margin-bottom: calc((32 / var(--width)) * 100vw);
  }

  .kv__ttl {
    font-size: calc((22 / var(--width)) * 100vw);
    font-weight: 500;
    /* medium */
    letter-spacing: calc(22px * 100 / 1000);
    line-height: 1.36;
    width: 100%;
  }
  .kv__ttl > span:first-child {
    font-size: calc((14 / var(--width)) * 100vw);
    letter-spacing: calc(14px * 20 / 1000);
    margin-bottom: 10px;
  }
}
#news {
  margin-bottom: 80px;
}

.news__ttl {
  font-size: 3.2rem;
  font-weight: 800;
  /* demi bold */
  letter-spacing: calc(32px * 50 / 1000);
  line-height: 1.65;
  text-align: center;
}

.news__lists {
  border-top: 1px solid var(--blue);
  border-bottom: 1px solid var(--blue);
  font-size: 1.9rem;
  letter-spacing: calc(19px * 40 / 1000);
  line-height: 1.5;
  padding: 26px 137px 29px;
  margin-bottom: 8px;
}

.news__item {
  margin-bottom: 16px;
}
.news__item:last-child {
  margin-bottom: 0;
}
.news__item time {
  flex-shrink: 0;
}

.news__link {
  color: var(--black);
  display: flex;
  flex-direction: row;
  column-gap: 16px;
  transition: color ease .3s;
}

@media (hover: hover) {
  .news__link:hover {
    color: var(--blue);
  }
  .news__link[href=""]:hover {
    color: var(--black);
    pointer-events: none;
  }
}
p.news__more {
  text-align: right;
  font-size: 1.6rem;
}

@media (max-width: 480px) {
  #news {
    margin-bottom: 0;
  }

  .news__ttl {
    font-size: calc((18 / var(--width)) * 100vw);
  }

  .news__lists {
    font-size: calc((13 / var(--width)) * 100vw);
    letter-spacing: 0;
    padding: 14px 0;
  }

  .news__item time,
  .news__item p {
    width: 100%;
  }

  .news__link {
    flex-direction: column;
    row-gap: calc((8 / var(--width)) * 100vw);
  }

  p.news__more {
    font-size: 1.3rem;
  }
}
.figure--main {
  max-width: 1129px;
  margin-left: auto;
  margin-right: auto;
}

.bgc-box {
  padding: 48px 0;
  background-color: var(--blue-gray);
}

.box {
  padding: 48px 0;
}

#feature,
#award {
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- DX-field ---------- */
.dx-field {
  background-color: var(--blue-gray);
}
.dx-field .ttl::after {
  display: none;
}

.dx-field__contents {
  display: flex;
  flex-direction: row;
  column-gap: 47px;
}

.logo--dx-field {
  display: block;
  width: 338px;
  height: auto;
  margin-bottom: 60px;
}

.dx-field__txts p {
  font-size: 2.1rem;
  letter-spacing: calc(21px * 50  / 1000);
  line-height: 1.66;
  margin-bottom: 44px;
}
.dx-field__txts p:last-child {
  margin-bottom: 0;
}

.dx-field__imgs {
  width: 600px;
  margin-top: 19px;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 3.33%;
  row-gap: 3.33%;
}

.dx-field__img {
  width: 48%;
  height: auto;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  position: relative;
}
.dx-field__img > img {
  text-align: center;
  width: auto;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 480px) {
  .dx-field__contents {
    flex-direction: column;
  }

  .logo--dx-field {
    max-width: 200px;
    margin-bottom: calc((40 / var(--width)) * 100vw);
    margin-left: auto;
    margin-right: auto;
  }

  .dx-field__imgs {
    width: 100%;
    margin-top: calc((32 / var(--width)) * 100vw);
    flex-direction: column;
    row-gap: 5px;
  }

  .dx-field__img {
    width: 100%;
  }

  .dx-field__txts p {
    font-size: calc((15 / var(--width)) * 100vw);
  }
}
.entry__contents {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  column-gap: 8.4%;
}

.entry__content {
  font-size: 1.9rem;
  line-height: 1.63;
  width: 45.8%;
}

@media (max-width: 480px) {
  .entry__contents {
    flex-direction: column;
    row-gap: calc((16 / var(--width)) * 100vw);
  }

  .entry__content {
    font-size: calc((11 / var(--width)) * 100vw);
    line-height: 1.8;
    width: 100%;
  }
}
/* ---------- 過去のソイチャレ - archive-links ---------- */
.archive {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc((20 / var(--width)) * 100vw);
  padding-right: calc((20 / var(--width)) * 100vw);
}

.archive--label {
  font-size: 1.6rem;
  margin-bottom: 16px;
}

ul.archive-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 24px;
}
ul.archive-links li {
  max-width: 151px;
}

#news .archive {
  margin-top: 64px;
}

#news ul.archive-links {
  justify-content: center;
}

@media (max-width: 480px) {
  .archive--label {
    font-size: 1rem;
    margin-bottom: calc((8 / var(--width)) * 100vw);
  }

  ul.archive-links {
    flex-direction: column;
    row-gap: calc((16 / var(--width)) * 100vw);
  }
  ul.archive-links li {
    width: 100%;
    max-width: 100%;
  }
}
a.btn--soichalle {
  display: block;
  background-color: #00afec;
  border: 1px solid var(--black);
  color: var(--white);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.2rem;
  letter-spacing: calc(22px * 100  / 1000);
  line-height: 1;
  text-align: center;
  padding: 8px;
  position: relative;
}
a.btn--soichalle::after {
  content: '';
  display: block;
  background-color: var(--white);
  border: 1px solid var(--black);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 3px;
  left: 2px;
  z-index: -1;
}

@media (hover: hover) {
  a.btn--soichalle {
    transition: background ease .3s;
  }
  a.btn--soichalle::after {
    transition: top ease .3s, left ease .3s;
  }
  a.btn--soichalle:hover {
    background-color: var(--black);
  }
  a.btn--soichalle:hover::after {
    top: 0;
    left: 0;
  }
}
@media (max-width: 480px) {
  a.btn--soichalle {
    font-size: calc((17 / var(--width)) * 100vw);
    letter-spacing: calc(17px * 100  / 1000);
    padding: calc((8 / var(--width)) * 100vw);
  }
}
/* ---------- FOOTER ---------- */
.footer .archive {
  margin-bottom: 54px;
}
.footer .contact {
  background-color: var(--blue-gray);
  padding: 39px 0 51px;
}

dl.contacts {
  display: flex;
  flex-direction: row;
  column-gap: 46px;
}
dl.contacts dt {
  background-color: #fff;
  font-size: 2rem;
  padding: 18px 22px;
}
dl.contacts dd {
  font-size: 2.1rem;
}

.txt--email {
  font-size: 2.5rem;
  word-break: break-all;
}

@media (max-width: 480px) {
  dl.contacts {
    flex-direction: column;
    row-gap: calc((22 / var(--width)) * 100vw);
  }
  dl.contacts dt {
    font-size: calc((15 / var(--width)) * 100vw);
    font-weight: 500;
    text-align: center;
    padding: calc((8 / var(--width)) * 100vw);
  }
  dl.contacts dd {
    font-size: calc((15 / var(--width)) * 100vw);
    font-weight: 500;
    text-align: center;
  }

  .txt--email {
    font-size: calc((18 / var(--width)) * 100vw);
  }
}
ul.results {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4%;
  flex-direction: row;
}
ul.results li {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;
  width: 48%;
  overflow: hidden;
}

@media (max-width: 480px) {
  ul.results {
    flex-direction: column;
  }
  ul.results li {
    width: 100%;
    margin-bottom: 4%;
  }
}
.result {
  border: 2px solid var(--blue);
  position: relative;
}
.result .corner {
  content: '';
  display: block;
  width: min(calc((30 / var(--width)) * 100vw), 30px);
  height: min(calc((30 / var(--width)) * 100vw), 30px);
  border-bottom: 2px solid var(--blue);
  background-color: #fff;
  position: absolute;
}
.result .corner.corner-tl {
  top: -15px;
  left: -15px;
  transform: rotate(-45deg);
}
.result .corner.corner-tr {
  top: -15px;
  right: -15px;
  transform: rotate(45deg);
}
.result .corner.corner-bl {
  bottom: -15px;
  left: -15px;
  transform: rotate(-135deg);
}
.result .corner.corner-br {
  bottom: -15px;
  right: -15px;
  transform: rotate(135deg);
}

details.result__details {
  cursor: pointer;
  height: 100%;
  position: relative;
}
details.result__details > div {
  padding: 24px 16px 48px;
  opacity: 0;
  transition: opacity ease-out .3s;
}
details.result__details[open] {
  height: auto;
}
details.result__details[open] summary {
  border-bottom: 2px solid var(--blue);
  padding-bottom: 24px;
}
details.result__details[open] > div {
  opacity: 1;
}

details.result__details summary.result__summary {
  list-style: none;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  padding: 24px 48px 48px;
}

details.result__details p {
  font-size: 1.8rem;
  line-height: 1.3;
}

.result__img {
  margin-bottom: 8px;
}

@media (hover: hover) {
  details.result__details summary.result__summary {
    transition: color ease .3s;
  }
  details.result__details summary.result__summary:hover {
    color: var(--blue);
  }
}
@media screen and (min-width: 481px), print {
  details.result__details::after {
    content: '';
    display: block;
    width: 30px;
    height: 23px;
    background: url("../img/arrow-bottom.webp") center center no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    margin: auto;
  }
  details.result__details[open]::after {
    transform: rotate(180deg);
  }
}
@media (max-width: 480px) {
  details.result__details summary.result__summary {
    font-size: calc((15 / var(--width)) * 100vw);
    text-align: left;
    min-height: 80px;
    display: flex;
    align-items: center;
    padding: calc((12 / var(--width)) * 100vw) calc((48 / var(--width)) * 100vw) calc((12 / var(--width)) * 100vw) calc((24 / var(--width)) * 100vw);
    position: relative;
  }
  details.result__details summary.result__summary::after {
    content: '';
    display: block;
    width: calc((30 / var(--width)) * 100vw);
    height: calc((23 / var(--width)) * 100vw);
    background: url("../img/arrow-bottom.webp") center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: calc((12 / var(--width)) * 100vw);
    transform-origin: center center;
    transform: rotate(0deg) translateY(-50%);
    transition: transform ease .3s;
  }

  details.result__details[open] summary.result__summary::after {
    transform: rotate(180deg) translateY(50%);
  }

  details.result__details > div {
    padding: 24px 16px;
  }

  details.result__details p {
    font-size: calc((11 / var(--width)) * 100vw);
    line-height: 1.3;
  }
}
/* ---------- ANIMATION ---------- */
/*.toT { opacity: 0; }*/
.toT.is-active {
  animation: slideT ease 0.5s forwards;
}

@keyframes slideT {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/*.toR { opacity: 0; }*/
.toR.is-active {
  animation: toR ease 0.75s forwards;
}

@keyframes toR {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/*.toB { opacity: 0; }*/
.toB.is-active {
  animation: toB ease-in-out 0.75s forwards;
}

@keyframes toB {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/*.toL { opacity: 0; }*/
.toL.is-active {
  animation: toL ease 0.75s forwards;
}

@keyframes toL {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/*.fadeIn { opacity: 0; }*/
.fadeIn.is-active {
  animation: fadeIn ease-in-out 0.75s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*.fadeOut { opacity: 0; }*/
.fadeOut.is-active {
  animation: fadeOut ease-in-out 0.75s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* ---------- TABLE ---------- */
.table-scroll {
  width: 100%;
  overflow-x: auto;
}

table.table--basic {
  border-collapse: collapse;
}
table.table--basic caption {
  font-size: 1.8rem;
  font-weight: 400;
  /* regular */
  letter-spacing: calc(18px * 50  / 1000);
}
table.table--basic tr {
  background-color: var(--white);
  border-top: 1px solid #818181;
}
table.table--basic tr:last-child {
  border-bottom: 1px solid #818181;
}
table.table--basic th,
table.table--basic td {
  padding: 24px 30px 16px;
}
table.table--basic th {
  font-size: 2.3rem;
  font-weight: 500;
  /* medium */
  letter-spacing: calc(23px * 50  / 1000);
  text-align: left;
  width: 27%;
}
table.table--basic td {
  font-size: 2.1rem;
  font-weight: 400;
  /* regular */
  letter-spacing: calc(21px * 50  / 1000);
  width: calc(100% - 27%);
}

table.bgc--odd tr:nth-child(odd) {
  background-color: var(--blue-gray);
}

table.bgc--even tr:nth-child(even) {
  background-color: var(--blue-gray);
}

@media (max-width: 480px) {
  table.table--basic,
  table.table--basic tr,
  table.table--basic th,
  table.table--basic td {
    display: block;
  }

  table.table--basic caption {
    font-size: 1rem;
    letter-spacing: calc(10px * 100  / 1000);
  }
  table.table--basic th, table.table--basic td {
    width: 100%;
  }
  table.table--basic th {
    font-size: calc((12 / var(--width)) * 100vw);
    letter-spacing: 0;
    padding: calc((12 / var(--width)) * 100vw) calc((12 / var(--width)) * 100vw) 0 calc((12 / var(--width)) * 100vw);
  }
  table.table--basic td {
    font-size: calc((11 / var(--width)) * 100vw);
    letter-spacing: 0;
    padding: calc((12 / var(--width)) * 100vw);
  }
}
/* ---------- TEXT - customized ---------- */
/* font-size */
.fs16,
p.fs16 {
  font-size: 1.6rem;
  font-weight: 400;
  /* regular */
  letter-spacing: calc(16px * 40 / 1000);
  line-height: 1.3;
}

.fs17,
p.fs17 {
  font-size: 1.7rem;
  font-weight: 400;
  /* regular */
  letter-spacing: calc(17px * 50 / 1000);
  line-height: 1.3;
}

.fs26,
p.fs26 {
  font-size: 2.6rem;
  font-weight: 400;
  /* regular */
  letter-spacing: calc(26px * 50 / 1000);
  line-height: 1.96;
}

@media (max-width: 480px) {
  .fs16,
  p.fs16 {
    font-size: calc((16 / var(--width)) * 100vw);
  }

  .fs17,
  p.fs17 {
    font-size: calc((17 / var(--width)) * 100vw);
  }

  .fs26,
  p.fs26 {
    font-size: calc((26 / var(--width)) * 100vw);
  }
}
.ttl {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  /* bold */
  letter-spacing: calc(30px * 50 / 1000);
  line-height: 1.76;
  text-align: center;
  margin-bottom: 52px;
  position: relative;
}
.ttl::after {
  content: '';
  display: block;
  width: 65px;
  height: 3px;
  background-color: var(--blue);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

@media (max-width: 480px) {
  .ttl {
    font-size: calc((17 / var(--width)) * 100vw);
    letter-spacing: calc(17px * 50 / 1000);
    line-height: 1.47;
    margin-bottom: calc((32 / var(--width)) * 100vw);
    padding-bottom: calc((8 / var(--width)) * 100vw);
  }
  .ttl::after {
    width: calc((174 / var(--width)) * 100vw);
    height: 1px;
  }
}
.txt {
  font-size: 2.6rem;
  font-weight: 400;
  /* regular */
  letter-spacing: calc(26px * 50 / 1000);
  line-height: 1.96;
}

@media (max-width: 480px) {
  .txt {
    font-size: calc((13 / var(--width)) * 100vw);
    letter-spacing: 0;
    line-height: 1.84;
  }
}
.ttl--br-b {
  border-bottom: 1px solid var(--blue);
  font-size: 2.7rem;
  font-weight: 700;
  /* bold */
  letter-spacing: calc(27px * 50 / 1000);
  line-height: 1.44;
  padding-bottom: 30px;
  margin-bottom: 36px;
}

@media (max-width: 480px) {
  .ttl--br-b {
    font-size: calc((15 / var(--width)) * 100vw);
    letter-spacing: calc(15px * 50 / 1000);
    padding-bottom: calc((12 / var(--width)) * 100vw);
    margin-bottom: calc((18 / var(--width)) * 100vw);
  }
}
/* ---------- LIST ---------- */
ol.list--num {
  list-style: none;
  font-size: 1.9rem;
  font-weight: 400;
  /* regular */
}

ol.list--num > li {
  counter-increment: cnt;
}

ol.list--num > li::before {
  content: counter(cnt) ".";
}

@media (max-width: 480px) {
  ol.list--num {
    font-size: calc((11 / var(--width)) * 100vw);
  }
}
ul.list--dot {
  list-style: disc;
  padding-left: 2rem;
}

/* ---------- BACKGROUND ---------- */
.bgc--blue-gray {
  background-color: var(--blue-gray);
}

/* ---------- TEXT - basic ---------- */
.wrap-txt > span {
  display: inline-block;
}

/* text-transform */
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

/* text-align */
.txt--left {
  text-align: left;
}

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

.txt--right {
  text-align: right;
}

/* font-size */
.fs--large {
  font-size: 120%;
}

.fs--medium {
  font-size: 85%;
}

.fs--small {
  font-size: 70%;
}

/* font-weight */
.fw--normal {
  font-weight: normal;
}

.fw--bold {
  font-weight: bold;
}

/* letter-spacing */
.ls1 {
  letter-spacing: 1rem;
  margin-right: -1rem;
}

.ls2 {
  letter-spacing: 2rem;
  margin-right: -2rem;
}

/* text-details */
.kakko--arch::before {
  content: '【';
  display: inline-block;
}

.kakko--arch::after {
  content: '】';
  display: inline-block;
}

/* ---------- LINK ---------- */
a.link--txt {
  color: var(--blue);
  text-decoration: underline 1px solid var(--blue);
  transition: color ease .3s, text-decoration ease .3s;
}

@media (hover: hover) {
  a.link--txt:hover {
    color: var(--black);
    text-decoration-color: var(--black);
  }
}
/* ---------- MARGIN ---------- */
.mgb8 {
  margin-bottom: 8px;
}

.mgb48 {
  margin-bottom: 48px;
}

.mgb64 {
  margin-bottom: 64px;
}

@media (max-width: 480px) {
  .mgb8 {
    margin-bottom: calc((8 / var(--width)) * 100vw);
  }

  .mgb48 {
    margin-bottom: calc((48 / var(--width)) * 100vw);
  }

  .mgb64 {
    margin-bottom: calc((64 / var(--width)) * 100vw);
  }
}